/*
	CSS Order:
	- Generic styles (Eg. P, etc) in alphabetical order.
	- Main page layout styles in order of appearance.
	- Main template styles.
	- The tab styles.
	- Menu styles.
	- Templates

	A page can then include a second (or more) CSS file(s) 
	to provide specific custom styles as required.
*/

/*
	GENERIC STYLES
	These are the basic styles that will apply to all pages,
	such as setting the font-family, sizes, background, etc.,
	and also things like P.caption, which you could expect
	to be used across many pages.

	Put these in alphabetical order where possible.
*/

body
{
	background: white;
	color: Black;
	font-family: arial, sans-serif;
	font-size: 100%;
	margin: 0px;
	text-align: center;
}

h1,
h2 {
	margin-top: 0px;
}

h3 {
	color: Black;
	font-family:Times New Roman;
	font-style:italic;
}

img {
	vertical-align: bottom;	
}

p,
div.content li {
	font-size: 75%;
	line-height: 125%;
}

p
{
	margin: 0px;
}

span.mask {
	position: relative;
	top: -3px;
}

span.under {
	text-decoration: underline;
}

/*
	LAYOUT STYLES
	Used simply to control the layout of the page, will
	probably consist mostly of DIVs.

	Put these in order of appearance, to make the cascade
	effect more predictable.
*/

div.page {
	background: white url(images/page-bg.gif) repeat-y left;
	border-bottom: solid 1px #182431;
	margin: 0px auto;
	padding: 0px 1px 0px 1px;
	text-align: left;
	width: 764px;
}

div.header
{
	background: white;
	border-top: solid 0px #B4C6D1;
	float: left;
	width: 764px;
}

div.body
{	
	float: left;
	width: 764px;
}

div.bodyFoot {
	background: #ccc;
	clear: left;
	line-height: 1px;
	font-size: 1px;
	
}

div.mainMenu {
	float: right;
	padding-left: 0px;
	padding-top: 19px;
	width: 153px;
}

div.content {
	background: url(images/content-bg.gif) left repeat-y;
	float: left;
	margin: 0px;
	width: 611px;
}

div.contentHolder
{	
	background: url(images/content-bg-cap.gif) top left no-repeat;
	padding-left: 12px;
	padding-right: 3px;
	padding-top: 1px;
	width: 596px;
}

div.breadcrumb
{
	background: white;
	font-size: 70%;
	padding: 6px 0px 6px 12px;
}

div.contentBase
{
	background: url(images/content-bg-base.gif) top no-repeat;
	border-bottom: solid 3px white;
	float: left;
	font-size: 1px;
	height: 15px;
	line-height: 1px;
	margin-top: -5px;
	width: 611px;
}

div.footer {
	background: white url(images/bar-bg-black.gif) top repeat-x;
	clear: left;
	font-size: 60%;
	padding: 29px 0px 0px 0px;
	text-align: center;
}

div.footer p,
div.footer li
{
	font-size: 100%;
}

/*
	MAIN TEMPLATE STYLES
	These are styles that are part of the main template,
	but really specific and would make the layout harder
	to read.

	Put in order of appearance to align with layout styles.
*/

div.header #imgMoneyMastersLogo 
{
	float: left;
	padding: 26px 0px 14px 18px;
}

div#topNav ul,
div#topNav li
{
		vertical-align: middle;
}

div#topNavHolder
{
	float: left;
	width: 411px;
}

div#topNav
{
	padding-top: 14px;
	padding-left: 10px;
	height: 48px;
	text-align: right;
	width: 397px;
}

div#topNav ul
{
	line-height: 100%;
	list-style: none;
	margin: 0px;
	padding: 0px;	
}

div#topNav li
{
	color: #8FAABB;
	display: inline;
	font-size: 60%;
	vertical-align: baseline;
}

div#topNav li span
{
	position: relative;
	top: -3px;
}

div#topNav li a
{
	color: Black;
}

div#topNav li.searchHolder
{
	border: none;
	white-space: nowrap;
}

div#topNav #txtSearch
{
	height: 14px;
	margin-left: 5px;
	width: 97px;
}

div#topNav #btnSearch
{
	position: relative;
	top: 1px;
	vertical-align: bottom;
}

div.header #imgExclusiveRAccount
{
	padding: 2px 0px 8px 86px;
}

div.breadcrumb a
{
	color: Black;
}

div#mainNavigation {
	background: white url(images/bar-bg-black.gif) repeat-x top;
	border-bottom: solid 1px #B4C6D1;
	float: left;
	padding-top: 13px;
	width: 764px;
}

div#mainNavHolder,
div#noJSMenu
{
	float: left;
	width: 618px;
}

img#openAccount
{
	float: left;
	height: 29px;
	width: 146px;
}

div.footer strong
{
	color: #003D7D;
}

div.footer p
{
	margin: 0px 0px 15px 0px;
}

div.footer ul 
{
	line-height: 100%;
	list-style: none;
	margin: 0px 0px 15px 0px;
	padding: 0px;
}

table.promotions 
{
	height: 78px;
}

table.promotions td
{
	vertical-align: top;
}

table.promotions td.spacer {
	background: white;
	height: 5px;
}

table.promotions img 
{
	border: none;	
}

ul.footerNavigation {
	margin: 8px 0px 5px 100px;
	padding-top: 0px;
}

ul.footerNavigation li {
	color: #D5D5D5;
	display: inline;
	padding: 0px 0px 0px 2px;
}

ul.footerNavigation li.firstItem
{
	border: none;
}

div.footer td
{
	vertical-align: top;
}

div.footer p.copyright {
	margin-bottom: 0px;
	padding-bottom: 15px;
}

div.footer td#tdContactInfo
{
	text-align: left;
	width: 147px;
}

div.footer td#tdContactInfo div
{
	border-left: solid 1px #92BEE2;
	padding-left: 10px;
}

div.footer td#tdContactInfo div table
{
	margin-left: 1px;
}

div.footer td#tdContactInfo div td.day
{
	width: 72px;
}

div.footer td#tdContactInfo strong
{
	color: Black;
}

div.footer td#tdContactInfo table td
{
	border-top: solid 1px #92BEE2;
	padding: 3px 0px;
}

div.footer td#tdContactInfo p
{
	line-height: 140%;
}

/*
	MENU STYLES
	This sets the display of our beloved multi-nested menu.

	Put these in any order that works!
*/

div.mainMenu div.holder
{
	padding: 0px 12px 0px 10px;
}

div.mainMenu hr
{
	background: #99999A;
	border: none;
	height: 1px;
	color: #99999A;
}

div.mainMenu ul
{
	font-size: 75%;
	list-style: none;
	margin: 0px;
	padding: 5px 0px 0px 0px;
	text-align: center;
}

div.mainMenu li
{
	padding-bottom: 10px;
	line-height: 140%;
}

div.mainMenu a
{
	color: #5A9ACE;
}

/*
	TEMPLATE STYLES
	These styles make any large changes to the design, that
	can't really be made from within the content area itself.

	Just group these up so they make sense.
*/

/* neutralStripe */

body.neutralStripe div.contentHolder
{	
	background: url(images/body-bg-top-black-neutralst.gif) top left no-repeat;
	padding-top: 4px;
}

body.neutralStripe div.content {
	background: url(images/body-bg-neutralstripe.gif) repeat-y;
}

/* whiteStripe */

table.holder {
	width: 596px;
}

table.holder td.header {
	background: #5296C6 url(images/narrow-title-bg.gif) bottom repeat-x;
	color: #fff;
	font-size: 80%;
	font-weight: bolder;
	letter-spacing: -1px;
	line-height: 100%;
	text-transform: uppercase;
}

table.holder td.header div {
	background: url(images/narrow-title-edge.gif) repeat-y;
	padding: 8px 0px 8px 35px;
}

div.content_holder {
	padding: 18px 17px 20px 30px;	
}

div.content_holder h1 {
	line-height: 110%;
	font-size: 145%;
	margin: 0px;
}

div.content_holder h2 {
	font-size: 110%;
	margin: 15px 0px 1px 0px;
}

div.content_holder p {
	margin-top: 14px;
	margin-bottom: 0px;
}

div.content_holder p.footer {
	margin-top: 20px;
}

div.content_holder p.footer #hrfNext {
	text-decoration: none;
}

div.content_holder p.footer span.continued {
	font-size: 90%;
}

div.content_holder p.footer span.current {
	color: #99999a;	
}

/* grey */

body.grey div.bodyHead {
	background: #fff url(images/body-bg-top-black-grey.gif) no-repeat top left;
}

body.grey div.body {
	background: url(images/body-bg-grey.gif) repeat-y;
}

body.grey div.bodyFoot {
	background: #fff url(images/body-bg-bottom-grey.gif) no-repeat top;
}

/* grey base */
body.greyBase div.bodyFoot {
	background: #fff url(images/body-bg-bottom-grey.gif) no-repeat top;
}

/* Chris D's styles.	*/

div.cd {
	margin:0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	color:black;
	text-align:left;
}

div.cd div.grey-bar {
	background-color:#C4C7C9;
	height:18px;
}

div.cd div.spacer {
	line-height:0px;
	font-size:0px;
}

div.cd .blue-base{
	height:64px;
	background-color:#2EA1C7;
	position:relative;
}

div.cd .grey-border {
	border:1px solid #C4C7C9;
}

div.cd .white-bg{
	background-color:white;
}

div.cd .light-bg{
	background-color:#FDFDFD;
}

div.cd .little-link{
	font-family:Arial, Helvetica, sans-serif;
	font-size:70%;
	color: black;
	text-decoration: none;
}
div.cd .popuptext{
	font-family:Arial, Helvetica, sans-serif;
	font-size:75%;
	color:black;
}
div.cd .more-link{
	font-family:Arial, Helvetica, sans-serif;
	font-size:85%;
	font-weight:bold;
}
div.cd .text{
	font-family:Arial, Helvetica, sans-serif;
	color:black;
	font-size:90%;
}
div.cd .text70{
	font-family:Arial, Helvetica, sans-serif;
	color:black;
	font-size:75%;
}
div.cd .textSmall {
	font-family:Arial, Helvetica, sans-serif;
	color:black;
	font-size:70%;
}
div.cd .text80{
	font-family:Arial, Helvetica, sans-serif;
	color:black;
	font-size:80%;
}
div.cd .text110{
	font-family:Arial, Helvetica, sans-serif;
	color:black;
	font-size:110%;
}
div.cd .text100{
	font-family:Arial, Helvetica, sans-serif;
	color:black;
	font-size:100%;
}
div.cd .big-text{
	font-family:"Times New Roman", Times, serif;
	font-size:130%;
	color:black;
	letter-spacing: -1px;
}

div.cd .bluelink75,
div.cd .bluelink85{
	font-family:Arial, Helvetica, sans-serif;
	font-size:85%;
	color:blue;
}
div.cd .bluelink75 {
	font-size: 75%;
}
div.cd .bluelink75:hover,
div.cd .bluelink85:hover{
	color:#D40000;
}
div.cd .bluelink75:active,
div.cd .bluelink85:active{
	color:#D40000;
}
div.cd .bluelink75:visited,
div.cd .bluelink85:visited{
	color:blue;
}

div.cd .myList{
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	list-style-type:disc;
	list-style-position:inside;
}

div.cd .myOrderedList {
	list-style-position: inside;
	padding: 0px;
	margin: 0px;
}

div.cd .myList li,
div.cd .myOrderedList li {
	font-size: 100%;
}

div.cd .white100{
	font-family:Arial, Helvetica, sans-serif;
	color:white;
	font-size:100%;
}
div.cd .white80{
	font-family:Arial, Helvetica, sans-serif;
	color:white;
	font-size:80%;
}

div.cd .grey{
	background-color:#D1D1D1;
}

/* calculator menu */

div.mainMenu div.calculators {
	margin-top: 10px;
}

div.mainMenu div.calculators h3 {
	font-size: 100%;
	margin: 0px;
	padding-left: 25px;
}

div.mainMenu div.calculators ul {
	background: url(images/calculator-bottom.gif) no-repeat bottom left;
	margin: 1px 0px 17px 0px;
	padding-bottom: 1px;
	width: 147px;
}

div.mainMenu div.calculators ul li {
	background: url(images/calculator-top.gif) no-repeat top left;
	margin-top: 0px;
	padding: 3px 0px 1px 0px;
}

div.mainMenu div.calculators ul li span {
	display: block;
	padding-bottom: 1px;
}

div.mainMenu div.calculators ul li a {
	background: url(images/calculator-bullet.gif) no-repeat left;
}

div.mainMenu div.calculators ul li.active {
	background: url(images/calculator-current-top.gif) no-repeat top left;
}

div.mainMenu div.calculators li.active span {
	background:url(images/calculator-current-bottom.gif) no-repeat bottom left;
}

div.mainMenu div.calculators li.active a {
	background: url(images/mainmenu-current-bullet.gif) no-repeat left;
	color: #000;
}

body.acqTemplate div.mainMenu div.calculators li.active a {
	background: url(../images/mainmenu-current-bullet.gif) no-repeat left;
	color: #000;
}

/*	grey blue template	*/

body.greyBlue div.bodyHead {
	background: #fff url(images/body-bg-bluegrey-cap.gif) no-repeat top left;
}

body.greyBlue div.body {
	background: url(images/body-bg-bluegrey.gif) repeat-y left;
}

body.greyBlue div.bodyFoot {
	background: #fff url(images/body-bg-bluegrey-base.gif) no-repeat top left;
}
body.greyBlue table.content p {
	line-height: 140%;
	margin-top: 0px;
	margin-bottom: 12px;
}

/*
	Inline Promotion Code Input Box
*/

div#promotionBoxHolder
{
	margin-top: 0px;
	margin-bottom: 10px;
}

div#promotionBoxField
{
	background: #f7f7f7;
	border: solid 1px #B6B6B7;
	margin: 0px 38px 0px 38px;
	padding: 0px;
}

div#promotionBoxField input
{
	vertical-align: middle;
}

div#promotionBoxField p,
div#content div#promotionBoxField p
{
	font-size: 80%;
	margin: 0px;
	padding: 3px 0px 2px 0px;
}

div#promotionBoxError
{
	margin: 0px 15px 0px auto;
	padding: 0px;
	text-align: left;
	width: 480px;
}

div#promotionBoxError p.error,
div#content div#promotionBoxError p.error
{
	color: Red;
	margin: 0px 0px 0px 10px;
}

/*
	Milonic Menu Styles
*/

div#mainNavigation ul
{
	margin-bottom: 5px;
	margin-top: 5px;
	margin-left: 15px;
	padding-left: 15px;
}

div#mainNavigation ul.first
{
	margin-top: 11px;
}

div#mainNavigation ul.last
{
	margin-bottom: 9px;
}

div#mainNavigation ul strong
{
	font-size: 100%;
	text-decoration: underline;
}

div#mainNavigation ul span
{
	color: Black;
	display: block;
	margin-top: 1px;
}

/*
	Non-JS menu:
*/

div#mainNavigation div#noJSMenu ul
{
	list-style: none;
	font: bolder 80% arial, sans-serif;
	margin: 0px;
	padding: 7px 0px 0px 0px;
}

div#mainNavigation div#noJSMenu li
{
	border-left: solid 1px #8FAABB;
	display: inline;
	padding: 0px 14px 0px 15px;
}

div#mainNavigation div#noJSMenu li.firstItem
{
	border: none;
	padding-left: 16px;
}

div#mainNavigation div#noJSMenu a
{
	color: Black;
	text-decoration: none;
}

div#mainNavigation div#noJSMenu a:hover
{
	color: #003D7D;
}

/*
	Side styles.
*/

div.mainMenu form
{
	margin: 0px;
}

div#sideLogin
{
	background: #003D7E;
	color: White;
	height: 225px;
	padding-left: 13px;
	position: relative;
	top: -1px;
}

div#sideLogin a
{
	color: White;
}

div#sideLogin h2
{
	font-size: 150%;
	padding: 8px 0px 11px 0px;
	margin: 0px;
}

div#sideLogin p
{
	font-size: 100%;
	margin-top: 10px;
}

div#sideLogin label
{
	font-size: 110%;
}

div#sideLogin input.textBox
{
	border: solid 2px #698EA4;
	margin-bottom: 10px;
	margin-top: 2px;
	font-size: 100%;
	width: 110px;
}

div#sideNews
{
	padding-left: 10px;
	padding-bottom: 5px;
}


div#sideNews div.item
{
	border-top: solid 1px #92BEE2;
	margin-top: 4px;
	padding-top: 4px;
	width: 128px;
}


div#sideNews div.item a
{
	color: Black;
	text-decoration: none;
}

div#sideNews div.item span
{
	color: Green;
	font-weight: bolder;
}

div#sideNews div.item span span
{
	text-decoration: underline;
}

div#sideNews img#sideNewsTitle
{
	margin: 7px 0px -2px 0px;
}

div#sideNews div.item img
{
	margin-bottom: 3px;
}

div#sideNews p
{
	font-size: 90%;
}

/*
*	Side help box.
*/

div#sideHelpBox
{
	background: #877266;
	color: White;
	font-size: 80%;
	border-top: solid white 7px;
	padding-bottom: 10px;
	text-align: center;
	margin-bottom: 15px;
}

div#sideHelpBox a
{
	color: White;
	text-decoration: none;
}

div#sideHelpBox a img
{
	border: none;
	padding-bottom: 5px;
}

div#sideHelpBox a span
{
	text-decoration: underline;
}


