/*	basic "core" styles	*/

/*	the page body - please leave the font-size at 100% - to change font-size, edit it in the "td" entry instead	*/
body
{	font-family: trebuchet ms; font-size: 100%; margin: 0px; background: white; color: black;	}
td
{	font-size: 70%;	}

/*	default styles for links	*/
a
{	color: black; text-decoration: underline;	font-weight: bold;	}


/*	use this class to change the screen resolution
		- width 100% fits any screen
		- width 955px fits at 1024x768
		- width 760px fits at 800x600 (though the main menu probably won't fit at 800x600)
		- this style is the best one to use to show an optional background image for the entire MyLogin site	*/
.screenTableWidth
{	width: 100%; background: url(../images/pre_login/main_tile.gif) #c2e5ff top repeat-x;	}

/*	top bar styles	*/
.topBar
{	background: #122155; border-bottom: 1px solid white;	}
/*	links in the top bar	*/
.topBar a
{	color: #fce55d; font-weight: bold;	}
/*	colour used to highlight the user's name when shown in the top bar	*/
.topBarUserNameText 
{	color: #fce55d; font-weight: bold;	}

/*	background image usually shown in the top right of the page
	** if you don't want to use a background image, please leave this class in the stylesheet (but with no properties) as a placeholder **	*/
.clientImage
{	background: url(../images/pre_login/client_image.jpg) top right no-repeat;	}

/*	text used as page headers	*/
.welcomeHeader
{	color: white; font-size: 180%;	}

/*	highlight in page headers, e.g. the name of the product in "Welcome to [Some Product]"	*/
.productHeader
{	color: #fce55d;	}

/*	used to indicate that a form field is required	*/
.formRequired
{	color: black;	}

/*	subheaders e.g. the "Please log in" message		*/
.subHeader
{	color: #000000; font-weight: bold;	}

/*	white text	*/
.whiteText
{	color: white;	}

/*	borders on MyLogin and other product thumbnails in the main menu
	(set to 0 to switch the border off)	*/
.myloginThumbnail
{	border: 0;	}
.productThumbnail
{	border: 1px solid black;	}

/*	these style the boxes on the main post-login menu page showing the options for the "My" products and MyLogin	*/
.productSection
{	background:	#77b5e8 url(../images/pre_login/product_box_tile.gif) top repeat-x; border: 2px solid white;	}
.loginSection
{	background:	#88b1d0 url(../images/pre_login/mylogin_box_tile.gif) top repeat-x; border: 2px solid white;	}

/*	styles for the message box shown above the main menu (e.g. when a user has changed their password successfully)	*/
.MessageBoxHeader
{	color: #ffffff; font-weight: bold; text-transform:uppercase; }
.MessageBox
{	 font-size: 1em; color: white; font-weight: bold; background-image:url(../images/error_message_bg.gif); background-repeat:repeat; 	}
.MessageBox a
{	color: #cdf5ff;	}


/*	form styles	*/

/*	used to indicate fields with errors in forms	*/
.formError
{	background: #961919; color: #fce55d; border-bottom: 1px solid #77b5e8; vertical-align: top;	}
.formError td
{	color: #fce55d; vertical-align: top;	}
.formError .formRequired
{	color: #fce55d;		}
.errorDetails
{	color: white;	}
.formError a
{	color: #fce55d;	}
.errorMarker
{	color: #fce55d; font-weight: bold;	}

/*	basic FORM styles: borders, etc.
	modifying these styles alone should change appearance for all form elements
	element widths and heights are set by the classes at the bottom of this stylesheet	*/
.formField input, .formField select, .formField textarea
{	font-family: tahoma, arial, helvetica, sans-serif; font-size: 100%;
	padding-left: 3px; padding-right: 3px; 
	border: 1px solid #404040;
	border-bottom: white;
	border-right: white;
}

/*	arrow image links to product front-ends	*/
.arrowLink
{	margin-left: 5px; margin-right: 15px;	}

/*	styles used to show MyBriefing subscriptions pages
	(there are some wierd class names here - that's because they're pulled directly from MyBriefing)
	(if this deployment doesn't have MyBriefing, you can ignore them, but please leave them in place)	*/
.txCatChange
{	background: #c2e5ff; border-bottom: 1px solid #134062;	}
.txCatSame
{	background: #c2e5ff; border-bottom: 1px solid #7aacd0;	}
.txTableTop
{	background: #93c3e6; border-top: 1px solid #134062; border-bottom: 1px solid #134062; font-weight: bold;	}

/*	this group is used in the initial "MySubscriptions" page, 
	where users' subscriptions are shown in the form "Animal > Mammal > Badger"
		- txShowSubSame is the standard class
		- txShowSubChange is shown where the "depth" of the classification changes
		  (e.g. when "Animal > Mammal" is followed by "Animal > Mammal > Badger")
		  it is usually the same as txShowSubSame, but with a more "prominent" bottom border colour
		- txShowSubLast is the last entry shown - it is the same as the other two, but with no bottom border
	** For all these classes, padding is set in its shorthand form (the first value is top and bottom, the second left and right) **	*/
.txShowSubSame
{	background: #aed9f8; padding: 2px 10px; border-bottom: 1px solid #134062;	}
.txShowSubChange
{	background: #aed9f8; padding: 2px 10px; border-bottom: 1px solid #134062;	}
.txShowSubLast
{	background: #aed9f8; padding: 2px 10px;	}


/*	this group is used in the second "MySubscriptions" page (the form itself), 
	where users' subscriptions are shown indented to indicate how far "down" the classification they are
		- txTableSame is the standard class
		- txTableChange is shown where the "depth" of the classification changes, as with txShowSubSame/Change, above	*/
.txTableChange
{	background: #c2e5ff; border-bottom: 1px solid #134062;	}
.txTableSame
{	border-bottom: 1px solid #7aacd0;	}

/*	these classes are used as headers, e.g. to show the name of a "root" category	*/
.searchResHeader, .txRootElement
{	color: #006; font-size: 110%; font-weight: bold;	}
.txSubHeader
{	background: #134062;	}
.currentSubscriptionHeader
{	background: #93c3e6; border-bottom: 1px solid #134062;	}

/*	border below the instructions for completing the second "MySuscriptions" page
	this is normally the same border-bottom colour as "txShowSubSame"	*/
.bottomBorder
{	 border-bottom: 1px solid #134062;	}

/*	these two classes accomplish the same thing: putting some padding around 
	the icons shown with "root" categories
	keep in mind, these icons are usually white	*/
.txIcon
{	background: white; padding: 5px;	}
img.txIcon
{	border: 5px solid white;	}

/*	these are container classes for the "MySubscriptions" pages	*/
.mainContentCell
{	background: #93c3e6;	}
.mainContentCellDark
{	background: #72a4c9;	}

/*	--------------------------------------------------------------------------------	*/
/*	very core styles - normally you wouldn't change these at all!	*/
form
{	margin: 0px; padding: 0px;	}

/*	form element widths and heights	*/
.textfield300
{	height: 20px; width: 300px;	}
.textfield200
{	height: 20px; width: 200px;	}
.textfield100
{	height: 20px; width: 100px;	}
.textarea300
{	height: 80px; width: 300px;	}

/*	override right-padding for select boxess */
.formField select
{	padding-right: 0;	}


.welcomeHeader 
{	font-size: 19pt;
	font-weight: normal;
	color: #000000;	}
.welcomeHeaderBold 
{	font-size: 19pt;
	font-weight: bold;
	color: #000000;	}
.welcomeSubHeader 
{	font-size: 12pt;
	font-weight: bold;
	color: #000000;	}


.preLoginMainBG{
background-image:url(../images/pre_login_mainbg.jpg);
background-position:left top;
background-repeat:repeat-x;
background-color:#ECD2ED;
}

.preLoginText{
font-size: 130%}