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

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
=GENERIC STYLES
=HOVER
=TICKERHOVER
=CAPSRATINGS
=ADS
=ROUNDBOX
=TABGROUP
=ROUNDTABGROUP
=EXPANDO!
=BREADCRUMBS
=POPUP
=ECAP
=AGGREGATOR
=SPONSOREDLINKS (Industry Brains stuff)
=IE
*******************************************************************************/

/*******************************************************************************
=LAYOUT
*******************************************************************************/
#mid {
	/*
	moving #mid away from #header, overrule this margin on css further down stream if necessary
	*/
	margin-top:10px;
}

div.grid #container {
	/*
	#container is a vestigial layout element - this definition should be removed once
	div#container is removed while refactoring Article.css
	*/
	margin:0 auto;
}


/*******************************************************************************
=GRID
Restore bottom margin on div.column removed when refactoring Fool.css
*******************************************************************************/
div.grid div.column {
	margin-bottom:20px;
}

/*******************************************************************************
=ELEMENTS
*******************************************************************************/
body {
	color:#222;
}

blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input,
li, ol, p, pre, select, textarea, td, th, ul {
  font-family:Arial,Helvetica,sans-serif;
}

h1 {
	font-size:3.6em; /* 36px */
	font-weight:normal;
	line-height: 1.11em;
	margin-bottom: 20px;
}

h2 {
	font-size:2.4em; /* 24px */
	line-height:1.67em; /* 40px */
	margin-bottom:20px;
}

h3 {
	font-size:1.8em; /* 18px */
	line-height:1.25em; /* 20px */
	margin-bottom:20px;
	font-weight:bold;
}

h4 {
	font-size:1.6em; /* 16px */
	line-height:1.25em; /* 20px */
	margin-bottom:20px;
	font-weight:normal;
}

h5, h6 {
	font-size:1.4em; /* 14px */
	line-height:1.43em; /* 20px */
	margin-bottom:20px;
}

p, ul, ol, dl {
	font-size:1.3em; /* 13px */
	line-height:1.54em; /* 20px */
	margin-bottom:20px;
}
ul ul, ol ol {
	font-size:1em;
	line-height:1em;
	margin-bottom:20px;
}
th, td {
	font-size:1.3em; /* 13px */
	line-height:20px;
}
input, select, textarea {
	/*font-size:1.3em;*/
	/* hard-coding to pixel height to solve for form elements nested within li's */
	font-size:13px;
}

ul, ol {
	padding-left:40px;
}

dl {
	padding-left:0;
} dt {
	margin-top:20px;
} dd {
	padding-left:20px;
}

label {
	cursor: pointer;
}

p.large, ul.large, ol.large, dl.large {
	font-size:1.6em; /* 16px */
	line-height:1.25em; /* 20px */
	margin-bottom:20px;
} ul.large, ol.large, dl.large {
	padding-left:40px; /* 40px */
}

td.large, th.large {
	font-size:1.6em; /* 16px */
	line-height:1.25em; /* 20px */
}

input.large, select.large, textarea.large {
	font-size:1.6em; /* 16px */
}

p.small, ul.small, ol.small, dl.small {
	font-size:1.1em; /* 11px */
	line-height:1.82em; /* 20px */
	margin-bottom:20px;
} ul.small, ol.small, dl.small {
	padding-left:40px; /* 40px */
}

td.small, th.small {
	font-size:1.1em; /* 11px */
	line-height:1.82em; /* 20px */
}

input.small, select.small, textarea.small {
	font-size:1.1em;
}


/*******************************************************************************
=GENERIC STYLES
*******************************************************************************/
a.button, input.button {
	background: #fff url("../../img/bg_button_grad.gif") repeat-x bottom;
	color: #222;
	padding:5px;
	font-weight: bold;
	text-align: center;
	border: 1px solid #CCC;
	text-decoration:none;
	display:block;
	cursor: pointer;
} a.button:hover, input.button:hover {
	color: #222;
	text-decoration: none;
	border: 1px solid #AAA;
}

/* wrap multiple buttons in a .buttons */
div.buttons {
	overflow:hidden; /* clearfix */
} div.buttons a.button, div.buttons input.button {
	float:left;
	margin-right:10px;
}

/* decorate rss links */
a.rss {
	padding:3px 0 3px 22px;
	background:url("../../art/article/utilitybelt/icon_rss.gif") no-repeat 0 50%;
}

/* generic styles for our collection headers, typically precedes a headline */
h4.collection {
	font-size:1.1em;
	font-weight:bold;
	line-height:1em;
	margin-bottom:10px;
	text-transform:uppercase;
	color:#999999;
} h4.collection a {
	text-decoration:none;
	color:#999999;
} h4.collection a:hover {
	text-decoration:underline;
}

/**********************************************************************
=HOVER
NOTE: Left EM sizing so it grows with its content!
**********************************************************************/
div.v1 {
  max-width:40em;
  min-width:15em;
  width:26em; /* 250px */
}

/**********************************************************************
=TICKERHOVER
NOTE: div.tickerHover is within a div.v1
**********************************************************************/
/* generic */
div.tickerHover p {
	margin-bottom:0;
}

div.tickerHover em {
	font-style:normal;
}


/* div.trend */
div.tickerHover div.trend {
	border-bottom:1px Solid #dadada;
	overflow:hidden;
	*overflow:visible; /* clearfix */
	margin-bottom:10px;
	padding-bottom:10px;
}
div.tickerHover h3 {
	font-size:1.2em; /*12*/
	line-height:1.250em; /* 15 */
	padding:5px;
	margin-bottom:10px;
	text-align:center;
	background-color:#06a;
	color:#fff;
}
div.tickerHover div.trendUp em {
	color:#44AA00;
} div.tickerHover div.trendDown em {
	color:#DD1100;
} div.tickerHover div.trendUp p.price {
	background-image:url("../../img/hover/ticker/bg_price_up.gif");
} div.tickerHover div.trendDown p.price {
	background-image:url("../../img/hover/ticker/bg_price_down.gif");
}

div.tickerHover p.price {
	font-size:1.8em; /* 18 */
	font-weight:bold;
	float:left;
	padding-left:25px;
	background-repeat:no-repeat;
	line-height:1em;
	background-position:0 50%;
}

div.tickerHover p.change {
	float:left;
	clear:left;
}

div.tickerHover p.stars {
	float:right;
	width: 64px;
}

/* div.ratio */
div.tickerHover div.ratio {
	position:relative;
	text-align:center;
	margin-bottom:10px;
} div.tickerHover div.ratio p {
	/*width:6.85em;*/ /* 75px @ 1.1 em font size */
	width:4.688em; /* 75px @ 1.6 em font size */
	font-weight:bold;
} div.tickerHover div.ratio p span {
	display:block;
	font-weight:normal;
	font-size:0.688em; /* 11 at 16px p font-size */
} div.tickerHover p.out {
	float:left;
} div.tickerHover p.under {
	float:right;
}

div.tickerHover a.chart {
	display:block;
	float:left;
	margin-left:.7em; /* 5px */
	margin-bottom:10px;
} div.tickerHover a.chart img {
	width:7.5em;
	height:5.6em;
}

div.tickerHover a.button {
	font-size:1.1em;
	width:12.273em; /* 135 */
	clear:both;
	margin:0 auto;
}

/* div.articles */
div.tickerHover div.articles {
	padding-top:10px;
} div.tickerHover ul.small {
	padding:0;
	line-height:1.364em; /* 15 */
	list-style:none;
	margin-bottom:10px;
} div.tickerHover ul.small li {
	margin-bottom:5px;
	color:#888;
}

/* div.sponsor */
div.tickerHover div.sponsor {
	border-top:1px Solid #dadada;
	text-align:center;
	margin-top:10px;
	padding-top:10px;
}

/* ie */
* html div.tickerHover div.trend, * html div.tickerHover div.ratio {
	height:1%;
} * html div.tickerHover div.articles {
	text-align:left;
}

*+html div.tickerHover div.ratio {
	min-height:1%; /* makes IE7 behave */
}



/*******************************************************************************
=CAPSRATINGS
*******************************************************************************/
span.stars, span.stars5 {
	float: left;
	clear: none;
	text-indent: -1400px;
	margin-top: -5px;
	width: 64px;
	height: 19px;
	overflow: hidden;
	background: url("../../img/stars.gif") no-repeat left;
} span.stars4 {
	background-position: -13px;
} span.stars3 {
	background-position: -26px;
} span.stars2 {
	background-position: -39px;
} span.stars1 {
	background-position: -52px;
} span.stars0 {
	background-position: -65px;
}

/*******************************************************************************
=ADS
*******************************************************************************/
div.ad-336x280, div.ad-340x400, div.ad-300x600 {
	margin: 5px 0pt 15px;
	clear:both;
}

div.ad-300x600 {
	width:340px;
	padding: 15px 0;
	text-align:center;
}

div.ad-360x280 {
	text-align:center;
}

div.ad-336x280 {
	text-align:center;
}

div.ad-340x400 {
	text-align:center;
}

div.ad-125x125 {
	/*float:left;*/
	text-align:center;
}

div.ad-140x35 {
	width:140px; /* fixing bug in 2/20/08 release */
	float: right;
	text-align:center;
}

div.ad-88x31 {
	margin: 0 auto 16px auto;
} div.ad-88x31 img { /* these ads have text in them! */
	/*margin-bottom: 3px;*/
}

div.ad-255x50 {
}

div.ad-590{
	width:590px;
}

.promoboxAd {
}

/*******************************************************************************
=roundBOX
*******************************************************************************/
.round {
	background-color:#eee;
	padding: 0 10px 10px 10px;
	position:relative;
} .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("../../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 ul, div.tabGroup li {
	list-style: none;
	padding: 0;
	margin: 0;
}

div.tabGroup ul.tabs {
	margin: 13px 0 0 0;
	padding: 0 0 3px 0;
	border-bottom: 1px solid #ddd;
}

* html div.tabGroup ul.tabs  {
	position: relative;
	margin-left:0;
}

div.tabGroup ul.tabs li {
	float:left;
}

div.tabGroup ul.tabs li a {
	position: relative;
	color: #222;
	border: 1px solid #ddd;
	padding: 5px 10px;
	background: #fff url("../../img/bg_panelize_tab_grey.gif") repeat-x bottom;
	margin-left: -1px;
} 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: 7px;
}

div.tabGroup div.panel{
	display:none;
	min-height: 150px;
	padding: 10px 0;
} div.tabGroup div.active {
	display:block;
}


/*******************************************************************************
=roundTABGROUP
*******************************************************************************/
div.round div.tabGroup ul.tabs {
	padding-left: 10px;
	border-color: #cfdec1;
} div.round div.tabGroup ul.tabs li a {
	border-color: #cfdec1;
	color: #222;
	background: #fff url("../../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;
}




/*******************************************************************************
=BREADCRUMBS
*******************************************************************************/
/* this hack is necessary to align the breadcrumbs flush to search */
#mid {
	margin-top:10px;
}
#breadcrumbs {
	border-bottom:1px Solid #eee;
	margin-bottom:0;
} #breadcrumbs p {
	float: left;
	clear: none;
	color:#888;
	margin-bottom:0;
	padding:10px 0 10px 0; /* 10px bottom; */
	line-height:1;
} #breadcrumbs p.small {
	font-size: 1.2em;
} #breadcrumbs p.adSponsor {
	font-size: 11px;
	float: right;
	clear: none;
	margin: 0;
	padding: 0;
} #breadcrumbs p.adSponsor img {
	vertical-align: middle;
	margin: 0 0 1px 0;
}

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


/*******************************************************************************
=ECAP
*******************************************************************************/
div.ecap h4 {
	background:transparent url("../../img/icon_email_normal.gif") no-repeat 0 0;
	margin:0 0 5px;
	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("../../img/icon_email_success.gif");
} div.ecapError h4 {
	background-image:url("../../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(../../img/bg_loading_fff.gif) no-repeat scroll 50%;
}

div.ecap input.ecapButton {
	background: #e8e8e8 url(../../img/bg_button_grad.gif) repeat-x center;
	border:1px solid #dcdcdc;
	padding: 1px 4px 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;
}

/*******************************************************************************
=AGGREGATOR
*******************************************************************************/
body.aggregator #mid h3 {
	color:#444444;
	font-weight:normal;
	font-size:1.8em;
} body.aggregator #mid h3 a {
	font-weight:bold;
}

body.aggregator p.paginator {
	font-size:1.1em;
	font-weight:bold;
} body.aggregator p.paginator a {
	/*padding:2px;*/
	font-weight:normal;
}

body.aggregator dl {
	font-size:1em;
} body.aggregator dt, body.aggregator dd {
	padding:10px;
} body.aggregator dt {
	color:#999;
	font-size:1.1em;
	font-weight:bold;
	padding-bottom:0;
	line-height:1;
	text-transform:uppercase;
	margin-top:0;
	padding-bottom:5px;
} body.aggregator dd {
	padding-top:0;
	margin-bottom:5px;
} body.aggregator dd a {
	font-weight:bold;
	text-decoration:underline;
} body.aggregator dd p {
	margin-bottom:0;
}

body.aggregator dt.alt, body.aggregator dd.alt {
	background-color:#f4f4f4;
}



/*******************************************************************************
=SPONSOREDLINKS
*******************************************************************************/
#spons-links {
	border:1px Solid #ccc;
	padding-top:5px;
} #spons-links-h4 {
	background:#eee;
	font-size:1.2em; /* 12px */
	line-height:normal;
	margin-bottom:0;
	padding:5px 10px;
	color:#666;
	font-weight:normal;
	border-width:1px 1px 0 1px;
	border-color:#ccc;
	border-style:solid;
} #spons-links-h4 {
	margin-top:20px;
} #spons-links span {
	display:block;
	text-align:right;
	background:#eee;
	padding:5px 10px;
	margin-top:5px;
	font-weight:bold;
} #spons-links p {
	font-size:1.1em; /* 11px */
	line-height:1.4em; /* 14px */
	margin-bottom:0;
	padding:5px 10px;
} #spons-links p a {
	font-weight:bold;
	text-decoration:underline;
}
/* Styles for new IB markup */
#ib-sponsors {
	border:1px solid #ddd;
	padding:1px;
	margin-top:10px;
}	#ib-sponsors p {
	padding:6px 8px;
	font-size:13px;
	line-height:16px;
}	#ib-sponsors a {
	font-weight:bold;
	text-decoration:underline;
}	#ib-sponsors .buylink {
	text-align:right;
	margin-top:16px;
	background-color:#133F6C;
	font-size:11px;
	display:block;
	padding:6px;
}	#ib-sponsors a.buylink {
	color:#fff;
	text-decoration:underline;
}	#ib-sponsors h3 {
	background:#133F6C;
	color:#fff;
	font-size:1.3em;
	line-height:2.5em;
	margin:0;
	padding-left:0.5em;
}
/*******************************************************************************
=IE
*******************************************************************************/

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

* html #spons-links-h4 {
	/* prevent peekaboo */
	height:1%;
}