/*******************************************************************************

This file contains styles used across all Fool.com pages

NOTE: See =IE for Internet Explorer hacks
NOTE: Remember to update Compat.css when updating this file

=ELEMENTS
=UTILITY
=ADS
=ROUNDBOX
=TABGROUP
=ROUNDTABGROUP
=TOPHAT
=HEADER
=MASTHEAD
=MENU
=SEARCH
=BULLETIN
=EXPANDO!
=FOOTER
=POPUP
=ECAP
=SPONSOREDLINKS (Industry Brains stuff)
=IE
*******************************************************************************/

/*******************************************************************************
=ELEMENTS
*******************************************************************************/

a/*:link*/ {
	color:#06a;
	text-decoration:none;
} a:visited {
	color:#393;
} a:hover, a.unvisit:hover, *.unvisit a:hover {
	text-decoration:underline;
	color:#c30;
} a.unvisit, *.unvisit a {
	color:#06a;
}


/*******************************************************************************
=UTILITY
*******************************************************************************/
th.numeric {
	text-align:center;
}
td.numeric {
	text-align:right;
}

div.wrap div.clear { /* fixes IE 6 clear problem*/
	clear: both;
	display: block;
	overflow: hidden;
	width: 0;
	height: 0;
}

/*******************************************************************************
=ADS
*******************************************************************************/
#vs-tracking-px, span.infomercial {
	/* get tracking pixels and empty span out of the document flow */
	position:absolute;
}

div.ad-728x90 {
	float:right;
	width:72.8em;
	height:9em;
	max-width:728px;
	max-height:90px;

	/*
	 The following style was disabled to support the over-sized TD Ameritrade leaderboard (728x150)
	*/
	/*overflow:hidden;*/

	/*
	 Relative positioning also added to support the TD Ameritrade over-sized leaderboard
	*/
	position:relative;
} div.ad-728x90 * {
	/*
	 The following styles where disabled to support the over-sized TD Ameritrade leaderboard (728x150)
	*/
	/*width:100%;*/
	/*height:100%;*/
}

div.ad-300x600 {
	float: right;
	width:30em;
	height:60em;
	overflow:hidden;
	text-align:center;
} div.ad-300x600 * {
	width: 30em;
	height: 60em;
}

div.ad-360x280 {
	float: right;
	width:36em;
	height:28em;
	overflow: hidden;
	text-align:center;
} div.ad-360x280 * {
	width: 36em;
	height: 28em;
}

div.ad-336x280 {
	float: right;
	width:33.6em;
	height:28em;
	overflow: hidden;
	text-align:center;
} div.ad-336x280 * {
	width: 33.6em;
	height: 28em;
}

div.ad-340x400 {
	float: right;
	text-align:center;
	/*width:34em;*/
	/*height:54em;*/
}

div.ad-125x125 {
	margin:1.2em;
	float:left;
	width:12.5em;
	height:12.5em;
	overflow: hidden;
} div.ad-125x125 * {
	width: 12.5em;
	height: 12.5em;
}

div.ad-140x35 {
	width:14em; /* fixing bug in 2/20/08 release */
	height:3.5em;
	float: right;
	overflow:hidden;
} div.ad-140x35 * {
	width: 14em;
	height: 3.5em;
}

div.ad-88x31 {
	width: 7.333em;
	height: 2.583em;
	margin: 0 auto 1.6em auto;
} div.ad-88x31 img { /* these ads have text in them! */
	margin-bottom: .25em;
}

div.ad-255x50 {
	width:25.5em;
	height:5em;
	overflow: hidden;
} div.ad-255x50 * {
	width: 25.5em;
	height: 5em;
}

/*******************************************************************************
=roundBOX
*******************************************************************************/
.round {
	background-color:#eee;
	padding: 0 1em 1em 1em;
	position:relative;
} .round div.span-4 {
	width: 14em;
} .round div.wrap {
	background-color:#fff;
}

/*
 corners
*/
.round span.corner {
	background-repeat:no-repeat;
	display:block;
	height:5px;
	overflow:hidden;
	position:absolute;
	width:5px;
	background-image:url("//www.fool.com/img/bg_shaded_corners_trans.gif");
}
.round span.ne {
	top:0;
	right:0;
	background-position:-5px 0;
} .round span.nw {
	left:0;
	top:0;
	background-position:0 0;
} .round span.se {
	bottom:0;
	right:0;
	background-position:-5px -5px;
} .round span.sw {
	bottom:0;
	left:0;
	background-position:0 -5px;
}


/*******************************************************************************
=TABGROUP
*******************************************************************************/
div.tabGroup {
} div.tabGroup ul, div.tabGroup li {
	list-style: none;
	padding: 0;
	margin: 0;
}

div.tabGroup ul.tabs {
	margin: 1em 0 0 0;
	padding: 0 0 .231em 0;
	border-bottom: .075em solid #ddd;
} * html div.tabGroup ul.tabs {
	margin-left:0;
} div.tabGroup ul.tabs li {
	float:left;
}

div.tabGroup ul.tabs li a {
	position: relative;
	color: #222;
	border: .075em solid #ddd;
	padding: .385em .77em;
	background: #fff url("//www.fool.com/img/bg_panelize_tab_grey.gif") repeat-x bottom;
	margin-left: -.075em;
} div.tabGroup ul.tabs li a.firstTab {
	margin-left: 0;
}

div.tabGroup ul.tabs li.active a {
	background-image: none;
	color: #222 ;
	border-bottom-color: #fff;
	padding-top: .54em;
}

div.tabGroup div.panel{
	display:none;
	min-height: 15em;
	padding: 1em 0 1em 0;
} div.tabGroup div.active {
	display:block;
}


/*******************************************************************************
=roundTABGROUP
*******************************************************************************/
div.round div.tabGroup ul.tabs {
	padding-left: .77em;
	border-color: #cfdec1;
} div.round div.tabGroup ul.tabs li a {
	border-color: #cfdec1;
	color: #222;
	background: #fff url("//www.fool.com/img/bg_panelize_tab_green.gif") repeat-x bottom;
} div.round div.tabGroup ul.tabs li.active a {
	color: #222;
	border-bottom-color: #fff;
	background-image: none;
}



/*******************************************************************************
=HEADER
*******************************************************************************/
#header {
	background-color:#06a;
	min-width:100em;
}

#header div.grid, #header div.column {
  margin-bottom:0;
}

#header div.wrap {
  background:#fff url("//www.fool.com/img/bg_header.gif") repeat-x top;
  border-bottom:.5em Solid #5bf; /* 5px */
  margin-bottom:3.3em; /* 33px */
}



/*******************************************************************************
=TOPHAT
*******************************************************************************/
#tophat {
	padding:.5em 0;
	border-bottom:1px solid #fff;
	color:#fff;
	background:#000 url("//g.fool.com/img/bg_tophat.gif") repeat-x top;
}

#tophat span {
	color:#999;
}

#tophat select {
	font-weight:normal;
	font-size:1.1em;
	font-family:verdana,arial,sans-serif !important;
	border:1px solid #c6c6c6;
}

#tophat a {
	color:#7CF;
}

#tophat a:hover {
	color:#8DF;
}

#tophat div.f_JumpToMenu {
	text-align: right;
}

#tophat div.util {
	float:right;
}

#tophat div.util p {
	text-align:right;
}

#tophat p {
	margin-bottom:0;
	font-family:verdana,arial,sans-serif !important;
	font-size:1.1em !important;
}

#tophat .btn {
	font-size:1.1em;
	width: 2.4em;
}

/*******************************************************************************
=MASTHEAD
*******************************************************************************/
#masthead {
	padding:1em 0;
} #masthead img.logo {
	width:20.9em;
	height:4.5em;
	max-width:209px;
	max-height:45px;
	margin-top:2.1em;
	float:left;
	display:block;
}

/* moved to Compat.css */
/*body.caps #masthead img.logo {*/
/*	width:14.8em;*/
/*	height:8em;*/
/*	max-width:148px;*/
/*	max-height:80px;*/
/*}*/

/*******************************************************************************
=MENU
*******************************************************************************/

/*
 #menu is defined in many small pieces below. This creates more code but easier to
  maintain code.  Since we can't use child selectors there are a lot of troublesome
  cascades that happens in a nested menu like this.  Smaller blocks of selectors are
  used to first define a *small* set of styles then *immediately* over-rule as necessary.

  NOTE: You can reference the uncompressed Usmf.css then use Firebug as an easy
  way to quickly find styles for maintenance
*/
#menu {
  overflow:visible;
  position:relative;
}

/*
 * safe cascade-able styles
 */
  #menu ul {
    margin:0;
    padding:0;
    display:block;
  } #menu li {
    list-style:none;
    display:block;
  } #menu a {
    display:block;
  } #menu a span {
		white-space:nowrap;
	}


/*
 * position LIs
 */
  #menu ul li {
    float:left;
  } #menu ul ul ul li {
    float:none;
  }


/*
 * size fonts
 */
  #menu ul {
    font-size:1.2em; /* 12px */
  } #menu ul ul {
    font-size:1.083em; /* 13px */
  } #menu ul ul ul {
    font-size:1em; /* 13px */
  }


/*
 * show and hide ULs
 */
  #menu ul ul {
    /* hide all seondary and tertiary ULs */
    display:none;
  }
  #menu ul li.on ul, #menu ul li.over ul {
    /* show secondary nav when primary tab is "on" or "over" */
    display:block;
  } #menu ul li.on ul ul, #menu ul li.over ul ul, #menu ul li.off ul {
    /* immediate cascade overrule */
    display:none;
  }
  #menu ul ul li:hover ul, #menu ul ul li.hover ul {
    /* show tertiary navigation on hover */
    display:block;
  }

/*
 * position ULs
 */
  #menu ul ul {
    /* secondary nav */
    position:absolute !important; /* the "* html #menu ul" IE hack clobbers this definition w/o the !important */
    top:100%;
    left:0;
  }

  #menu ul ul ul {
    /* tertiary */
    right:0;
    left:auto;
    margin:0;
  }

/*
 * setup UL box model (position, padding, margins, border, backgrounds)
 */
  #menu ul li {
    /* position primary LIs so their border overlays div.wrap's */
    margin-bottom:-0.417em; /* 5px @ 12px */
    border-bottom:0.417em Solid #5bf; /* 5px */
    margin-right:.083em; /* 1px */
  } #menu ul ul li {
    /* immediate cascade overrule */
    margin-bottom:0;
    border-bottom:none;
    margin-right:0;
    position:relative;
  }
  #menu ul li.on, #menu ul li.over {
    /* match bottom-border-color of div.wrap */
    border-bottom-color:#06a;
  }
	#menu ul li.off {
		border-bottom-color:#5bf;
	}

  #menu ul ul {
    margin-top:0.417em; /* 5px @ 12px base */
  }

  #menu ul ul ul {
    padding:.38em; /* 5px at 12px font size */
    border:1px Solid #06a;
    border-top:none;
    width:11.538em; /* 150px */
    background-color:#fff;
  }

/*
 * anchor font and color formatting
 */
  /* primary nav */
  #menu ul a {
    font-weight:bold;
    text-transform:uppercase;
		color:#06a;
  } #menu ul a:hover {
		color:#06a;
	}

	#menu ul ul a {
    /* secondary nav, immediate cascade overrule */
    font-weight:normal;
    text-transform:none;
    color:#fff;
  } #menu ul ul ul a {
    /* tertiary nav, !important to overrule cascades from .over and .on */
    color:#06a !important;
	}




  /* anchor ON color formatting */
  #menu ul li.on a, #menu ul li.on ul li.on a {
    /* color primary and "on" secondary nav */
    color:#bf0 !important;
  } #menu ul li.on ul a {
    /* color normal secondary nav immediate cascade overrule from li.on */
    color:#fff !important;
  }

  /* anchor OFF color formatting */
  #menu ul li.off a {
    /* color primary nav, secondary and tertiary nav isn't visible so no need to overrule */
    color:#fff !important;
  }

  /* anchor OVER color formatting */
  #menu ul li.over a {
    /* color primary nav */
    color:#fff;
  } #menu ul li.over ul li.on a {
    /* immediate cascade overrule to protect color of li.on */
    color:#bf0;
  }

/*
 * anchor box model and backgrounds
 */
  #menu ul a {
    /* primary nav */
    background-image:url("//www.fool.com/img/sprite_topnav.gif");
    background-repeat:no-repeat;
    max-width:200px; /* NOTE: max supported width of sprite_topnav */
    line-height:1;
  } #menu ul a span {
    background-image:url("//www.fool.com/img/sprite_topnav.gif");
    display:block;
    background-position:100% -50px;
    padding: 1em 0.833em .923em; /* 12px 10px 12px */
  }

  #menu ul ul a, #menu ul a:hover ul a {
    /* secondary nav */
    background-image:url("//www.fool.com/img/bg_nav_secondary.gif");
    background-position:right 50% !important; /* important to overrule cascades coming from changes to primary nav anchors */
    padding:.769em; /* 8.5px */
    max-width:none;
  } #menu ul ul li.last a {
    background-image:none;
  } #menu ul ul li.more {
    background:url("//www.fool.com/img/bg_nav_more.gif") no-repeat 100% 50%;
    padding-right:5px;
  }

  #menu ul ul ul a {
    /* tertiary nav */
    padding:.385em; /* 5px */
  } #menu ul ul ul a:hover {
    background-color:#eee;
  }

/*
 * anchor HOVER background positioning
 */
  #menu ul a:hover {
    background-position:0 -100px;
  } #menu ul a:hover span {
    background-position:100% -150px;
  }

/*
 * anchor Premium background positioning
 */
  #menu ul li.premium a, #menu ul li.premium a:hover {
    background-position:0 -400px;
  } #menu ul li.premium a span, #menu ul li.premium a:hover span {
    background-position:100% -450px;
  }

/*
 * anchor ON background positioning
 */
  #menu ul li.on a, #menu ul li.on a:hover {
    background-position:0 -200px;
  } #menu ul li.on a span, #menu ul li.on a:hover span {
    background-position:100% -250px;
  }

/*
 * anchor OVER background positioning
 */
  #menu ul li.over a, #menu ul li.over a:hover {
    background-position:0 -200px;
  } #menu ul li.over a span, #menu ul li.over a:hover span {
    background-position:100% -250px;
  }

/*
 * anchor OFF background positioning
 */
  #menu ul li.off a, #menu ul li.off a:hover {
    background-position:0 -300px;
  } #menu ul li.off a span, #menu ul li.off a:hover span {
    background-position:100% -350px;
  }

	/*
	 * mint promotional logo
	 */
		#menu ul li.mint {
			padding-left: 17px;
			background: url('//g.fool.com/img/mint_leaf.gif') no-repeat 5px 3px;
		}




/*******************************************************************************
=SEARCH
*******************************************************************************/
#search {
	background:#E8E8E8 url(//www.fool.com/img/bg_search.gif) repeat-x top;
	border-bottom:1px Solid #ddd;
	border-top:1px Solid #fff;
	padding:.5em;
} #search input.query {
	color: #888;
	width:28em; /* 421px*/
	margin-right:.67em; /*10px*/
	padding:.19em 0 .19em .31em;
	border:1px Solid #cccccc;
	font-size:1.5em;
} #search input.active {
	color:#222;
} #search input.btn {
	font-size:1.2em;
	margin: 0 0.45em 0.08em 0;
	padding: 0.17em 0;
} #search div.grid, #search div.column {
	margin-bottom: 0;
} #search p {
	padding-top: .2em;
	margin-bottom:0;
	text-align:left;
	font-size:1.2em;
	color:#888;
} #search div.span-7 p a {
	margin:0 .25em;
}


/*******************************************************************************
=BULLETIN
*******************************************************************************/
#bulletin {
	margin-bottom:2em;
} #bulletin p {
	border:4px Solid #cc0000;
	margin:0;
	text-align:center;
	color:#fff;
	font-weight:bold;
	font-size:2em;
	padding:.5em;
	background-color:#d90000;
}

/*******************************************************************************
=MID
*******************************************************************************/
#mid {
	margin-top:2em;
}

/*******************************************************************************
=FOOTER
*******************************************************************************/
#footer {
	color: #5bf;
	text-align: center;
	padding: 1em 0 1em 0;
	background: #059;
	border-top: .5em solid #5bf;
} #footer div.grid {
	margin-bottom: 0;
} #footer div.column div.wrap, #footer div.column ul {
	font-size: 1.2em;
} #footer div.column {
	margin-bottom: 2em;
	text-align: center;
}

#footer a {
	color: #fff;
	font-weight: normal;
} #footer a:hover {
	color: #7df;
} #footer div.legal a {
	font-weight: bold;
} #footer ul li a {
	border-left: .09em solid #5bf;
	padding: 0 0 0 .64em;
	margin: 0 .64em 0 0;
} #footer li.first a {
	border: none;
	padding: 0;
}

#footer ul {
	font-size: 1em;
	text-align: center;
	overflow: hidden;
	padding: 0;
	margin: 0 0 .4em 0;
	list-style: none;
} #footer ul li {
	font-weight: bold;
	display: inline;
}

#footer img.rssLogo, #footer img.foolUkLogo {
	width: 1.455em;
	height: 1em;
}

#footer div.legal p {
	font-size: 1.2em;
	margin-bottom: 0;
}

#footer div.attrib {
	margin-bottom: 0;
	padding-bottom: 0;
} #footer div.attrib p {
	margin-bottom: 0;
	font-size: 1.1em;
} #footer div.attrib img {
	vertical-align: text-bottom;
	margin-bottom: 0.2em;
	height: 1.818em;
} #footer img.yahooLogo {
	width: 5.364em;
} #footer img.idcLogo {
	width: 7.455em;
}

#footer #fn-serverinfo {
		color:#059;
}

/*******************************************************************************
=POPUP
Styles used by PopupMaster.Master
*******************************************************************************/
body.popup div.content {
	padding:2em 2em 0 2em;
	position:relative;
} body.popup h3 {
	font-weight: bold;
	border-bottom:1px Solid #ddd;
	margin-bottom:1em;
	padding-bottom:1em;
	margin-top:0;
} body.popup p.small {
	margin:0;
	padding:1em;
	line-height:1;
} body.popup p#closeTop {
	position:absolute;
	right:0;
	top: .5em;
	z-index:3;
} body.popup p#closeBottom {
	padding-top:0;
	text-align:right;
} body.popup p.small a {
	display:block;
	padding:1em;
	position:relative;
} body.popup p#closeBottom a {
	padding:0 1em 0 0;
}


/*******************************************************************************
=ECAP
*******************************************************************************/
div.ecap h4 {
	background:transparent url("//g.fool.com/img/icon_email_normal.gif") no-repeat 0 0;
	margin:0 0 .54em;
	padding-left:20px;
	font-size:1.3em; /* 13px */
	font-weight:normal;
} div.ecapSuccess h4 {
	/* actual selector is div.ecap.ecapSuccess but IE6 prevents us from using this */
	background-image:url("//g.fool.com/img/icon_email_success.gif");
} div.ecapError h4 {
	background-image:url("//g.fool.com/img/icon_email_error.gif");
	color:#D10;
}

div.ecap input.ecapInput {
	color:#666;
} div.ecap input.ecapInputFocus {
	/* actual selector is input.ecapInput.ecapInputFocus */
	color:#000;
}

div.ecap span.ecapInternal {
	/*display:none;*/
	display:block;
}

div.ecap div.shield {
	background:#FFFFFF url(//g.fool.com/img/bg_loading_fff.gif) no-repeat scroll 50%;
}

div.ecap input.ecapButton {
	background: #e8e8e8 url(//g.fool.com/img/bg_button_grad.gif) repeat-x center;
	border:1px solid #dcdcdc;
	padding: 0.083em .333em 0;
} div.ecap input.ecapButton:hover {
	background-image:none;
	background-color:#fff;
	border-right-color:#ccc;
	border-bottom-color:#ccc;
}

div.ecap span.ecapValidation {
	color: #d10;
}

/*******************************************************************************
=SPONSOREDLINKS
*******************************************************************************/
#spons-links-h4 {
	background:#ddd;
	font-size:1.2em; /* 12px */
	line-height:1em;
	margin-bottom:0;
	padding:.42em .83em; /* 5px 10px */
} #spons-links {
	border:1px Solid #ddd;
	padding-top:.5em; /* 5px */
} #spons-links span {
	display:block;
	text-align:right;
	background:#ddd;
	padding:.5em 1em; /* 5px 10px */
	margin-top:.5em; /* 5px */
	font-weight:bold;
} #spons-links p {
	font-size:1.1em; /* 11px */
	line-height:1.4em; /* 14px */
	margin-bottom:0;
	padding:0.45em 0.91em; /* 5px 10px */
} #spons-links p a {
	font-weight:bold;
	text-decoration:underline;
}


/*******************************************************************************
=IE
*******************************************************************************/
* html #masthead img.logo {
	width:20.85em;
	height:4.45em;
} * html body.caps #masthead img.logo {
	width:14.75em;
	height:7.95em;
}

/* Required for (at least ) IE 6 and 7 */
* html #header {
	z-index:100;
	position:relative;
} *+html #header {
	z-index:100;
	position:relative;
}

/* This two-part fix ensures that LI.on and LI.hover bottom borders display above div.wrap */
* html #menu ul {
  position:relative;
} * html #menu ul li.on, * html #menu ul li.over {
  position:fixed;
}

* html #menu ul ul {
  margin-top:0.43em; /* ie6 shimmy secondary nav down a smidge */
	width:75.740em /* 980px at 13px font size */
} * html #menu ul ul ul {
	/* restore ~150px width */
	width:11.560em;
}

* html #menu ul li.over a:hover {
	color:#fff;
}

* html #menu ul ul ul {
  line-height:1; /* fix odd spacing between LI elements */
  margin-top:1px; /* tweak top positioning of tertiary nav */
}
* html #menu a {
  position:relative; /* ie6 support for hovers on A with display block */
}

*+html #menu ul ul li.more ul li {
	/* ie7 support for tertiary A rendering as block */
	line-height:1;
	min-height:1%;
}

/* =ECAP */
* html div.ecap h4 {
	/* ie6 refuses to show the background image on this h4 w/o hasLayout */
	position:relative;
}

/* =ADS */
* html div.ad-728x90 {
	/*
	 The following styles where disabled to support the over-sized TD Ameritrade leaderboard (728x150)
	*/
	/*width:72.75em;*/
	/*height:8.95em;*/

	/*
	 Relative positioning also added to support the TD Ameritrade over-sized leaderboard
	*/
	position:relative;
}

* html div.ad-300x600 {
	width:29.95em;
	height:59.950em;
}
* html div.ad-300x600 * {
	width:29.95em;
	height:59.950em;
}

* html div.ad-360x280 {
	width:35.950em;
	height:27.950em;
}
* html div.ad-360x280 * {
	width:35.950em;
	height:27.950em;
}

* html div.ad-336x280 {
	width:33.55em;
	height:27.95em;
}

* html div.ad-336x280 * {
	width:33.55em;
	height:27.95em;
}

* html div.ad-340x400 {
	width: 33.95;
	height: 39.95;
}

* html div.ad-340x400 * {
	width: 33.95;
	height: 39.95;
}

* html div.ad-125x125 {
	width:12.5em;
	height:12.5em;
}
* html div.ad-125x125 * {
	width:12.5em;
	height:12.5em;
}

* html div.ad-140x35 {
	width:13.95em;
}

* html div.ad-140x35 * {
	width:13.95em;
}

* html div.ad-88x31 {
	width: 7.28em;
	margin: 0 auto;
}

* html div.ad-88x31 * {
	width: 7.28em;
	margin: 0 auto;
}

* html div.ad-255x50 {
	width:25.450em;
}

* html div.ad-255x50 * {
	width:25.450em;
}

/*
 mseeley: These two definitions are EXTREMELY important. If they are removed IE6
 and IE7 inserts strange whitespace below #search when the primary nav is
 hovered over. I can't explain the cause of the problem or why these lines work
 around it, they just do.
 */
* html #search {
	display:inline-block;
} *+html #search {
	display:inline-block;
}

/* z-index fix */
body {
	position:relative;
	z-index:0;
} #header {
	position:relative;
	z-index:1000;
} #menu {
	z-index:1;
} #mid {
	z-index:0;
}