﻿/* ******************************************************************************

NOTES

This file contains styles intended for all pages under *.fool.com

--------------------------------------------------------------------------------

CONTENTS

= FONTS
= GLOBAL
= CLEANUP
= STANDARDS
== Pos/Neg
== Errors/Alerts
== Timestamps
== Corners

****************************************************************************** */


/* ******************************************************************************
=FONTS - Default font size and type after the reset
****************************************************************************** */

html body, body, div, table, form {	/* Fix this for IE6 */
	font-size: 14px;	/*14px display*/
}
body {
	line-height: 22px;
}
table {
	font-size: inherit;
}
pre, code, kbd, samp, tt {
	font-family: monospace;
	line-height: 100%;
}


/* ******************************************************************************
=GLOBAL - Baseline sizes, colors and padding after the reset
****************************************************************************** */

/* Spacing */
address, code, dl, fieldset, h1, h2, h3, h4, h5, h6, hr, ol, p, pre, samp, ul {
	margin: 0 0 22px 0;
}
div.cms h1, 
div.cms h2, 
div.cms h3, 
div.cms h4, 
div.cms h5, 
div.cms h6{
	margin: 22px 0 11px 0;
}

div.cms blockquote, 
div.cms code, 
div.cms fieldset, 
div.cms pre, 
div.cms samp, 
div.cms p, 
div.cms table, 
div.cms hr	{
	margin: 11px 0 11px 0;
}

div.cms ul,
div.cms ol,
div.cms dl {
	margin: 11px 0 11px 16px;
}


/* Links */
a {
	color: #069;
	text-decoration: underline;
}
a:visited {
	color: #6AC;
}
a:hover {
	color: #047;
	text-decoration: none;
}
a.novisit,
.novisit a {
	color: #069;
}



/* Text Formatting */

/* Unknown: Why do we bold strong three times: Once in Fool.css and twice in Bridge.css? */
h1,h2,h3,h4,h5,h6,strong,legend {
	font-weight:bold; 
}
h1 {
	font-size: 28px;
	line-height:32px;
	letter-spacing:-1px;
}
h2 {
	font-size: 18px;
}
h3 {
	font-size: 16px;
}
h4 {
	font-size: 14px;
}
h5 {
	font-size: 12px;
}
h6 {
	font-size: 10px; /* Why would we ever need or want 10px text? Just asking... - D.S. For people with small eyes. -B.C.*/
}

div.cms h1 {
	font-size: 28px;
	line-height:32px;
	letter-spacing:-1px;
}
div.cms h2 {
	font-size: 24px;
}
div.cms h3 {
	font-size: 18px;
}
div.cms h4 {
	font-size: 14px;
}
div.cms h5 {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing:.5px;
}
div.cms h6 {
	font-size: 12px; 
}


.small, sub, sup {
	font-size: 12px;
	/* line-height: 20px; Let's try not having this for a wee bit. */
}
.xsmall {
	font-size: 10px !important;
}
sub, sup {
	font-size: 0.7em;
	position: relative;
	vertical-align: baseline;
}
sub {
	top: 3px;
}
sup {
	bottom: 5px;
}
del {
	text-decoration:line-through;
}

/* Tooltip hints */
abbr, acronym {
	border-bottom: 1px dotted #888;
	cursor: help;
}

/* Bolds */
/* Unknown: Why do we bold strong three times: Once in Fool.css and twice in Bridge.css? */
label, optgroup, strong, th, dt {
	font-weight: bold;
}
label.checkbox {
	font-weight: normal;
}

/* Italics */
address, caption, cite, dfn, em, optgroup, q, var {
	font-style: italic;
}

/* Monospace */
code, samp, kbd, pre {
	font: normal 14px/22px monospace;
	overflow: auto;
}

/* Lists */
dl, ol, ul {
	margin-left: 20px;
}
dd {
	margin: 0px 0px 20px 20px;
}
ul li, ol li {
	margin-bottom: 5px;
}

/* Blocks */
fieldset, pre {
	display: block;
	padding: 20px;
	border: 1px solid #DDD;
	background: #F5F5F5;
}

/* Forms */
form {
	display: inline;
}
button, input, optgroup, select, textarea {
	font-family: 'Arial', 'Helvetica', sans-serif;
	font-size: 14px;
	line-height: normal; /* Firefox ignores line-height on all but textareas, so let's just make it normal. Tight layouts break if we assign line height to inputs for IE and Webkit. Nothing wrong with being normal. */
	padding: 5px;
}
input.checkbox,
input.radio {
	vertical-align:middle;
}
fieldset {
	padding: 0px 20px;
}
label {
	cursor: pointer;
}
legend {
	margin-left: -5px; /* I know... */
	padding: 0 5px;
	font-weight: bold;
}
option {
	margin-top: 5px;
	padding-right:12px; /* FF2 needs this sometimes */
}

/* Blockquotes */
blockquote {
	padding: 0 40px;
}

/* Horizontal Rules */
hr {
	clear: both;
	height: 0px;
	border: none 0;
	border-bottom: 1px solid #DDD;
}

/* Images */
img {
	border: none;
}

/* Tables */
table {
	border-collapse: collapse;
	empty-cells: show;
	margin:0;
	width: 100%;
}
th, td {
	padding: 5px 7px;
	border: 1px solid #bbb;
	text-align: left;
	vertical-align: baseline; /* Keeps different text blocks aligned when they are different sizes. */
}
th {
	/* Note: Bold already defined in list of bolds. */
	background: #eee;
}
thead th,
thead td {
	vertical-align:middle;
}
thead th {
	text-align: center;
}
caption {
	text-align: center;
}

/* Overwrite all layout styles */
.unstyled {
	margin: 0;
	padding: 0;
}
fieldset.unstyled {
	border: none;
	background: none;
	display: inline;
}




/* ******************************************************************************
=CLEANUP - The header is upstream of the Bridge, so these refix the main nav
****************************************************************************** */
#menu ul li {
	padding-top: 0;
}


/* ******************************************************************************
=STANDARDS - Items that should be consistant across all free Fool sites
****************************************************************************** */

/*** ==Pos/Neg - Positive, Negative and Neutral styling ***/

.green, 
.pos, 
.pos *, 
.up {
color:#4A0;
}
.red, 
.neg, 
.neg *, 
.down {
color:#c00;
}
.neutral, 
.neutral * {
color:#000;
}
.muted, a.muted, .muted a,
a.muted:visited, .muted a:visited {
	color: #888;
}
.hilite {
	color: #c60;
}

a.muted:hover,
.muted a:hover {
	color: #666;
}


/*** ==Position - Left, Right  ***/

.floatL, .fl {
    float:left !important; /* these should always overrule */
}
.floatR, .fr {
    float:right !important; /* these should always overrule */
}

/* Text Alignment (From oo-css) */
.txtC {
	text-align: center !important; /* these should always overrule */
}
.txtL {
	text-align: left !important; /* these should always overrule */
}
.txtR {
	text-align: right !important; /* these should always overrule */
}


/*** ==Timestamp - The time/date display under the headline ***/

div.timeStamp, div.timeStamp a {
	color:#888;
	font-size:11px;
}

/*** ==Margins and Padding ***/
.flush {
	margin: 0 !important;
}

.flushB {
	margin-bottom: 0 !important;
}

.minMarginB {
	margin-bottom: 5px !important;
}

.hMarginB {
	margin-bottom: 10px !important;
}

.marginB {
	margin-bottom: 20px !important;
}
.xMarginB {
	margin-bottom: 40px !important;
}

.marginL {
	margin-left: 20px !important;
}

.marginR {
	margin-right: 20px !important;
}

.padded {
	padding: 20px !important;
}

.hPadded {
	padding: 10px !important;
}

.minPadded {
	padding: 5px !important;
}

.notPadded {
	padding: 0;
}

.xPadded {
	padding: 40px !important;
}

.paddedL {
	padding-left: 20px !important;
}

.paddedR {
	padding-right: 20px !important;
}

.paddedT {
	padding-top: 20px !important;
}

.paddedB {
	padding-bottom: 20px !important;
}

.minPaddedT {
	padding-top: 5px !important;
}

.hMarginL {
	margin-left: 10px !important;
}

.hMarginR {
	margin-right: 10px !important;
}

.hPaddedL {
	padding-left: 10px !important;
}

.hPaddedR {
	padding-right: 10px !important;
}

.hPaddedT {
	padding-top: 10px !important;
}

.hPaddedB {
	padding-bottom: 10px !important;
}

.xPaddedL {
	padding-left: 40px !important;
}

.xPaddedR {
	padding-right: 40px !important;
}

.xPaddedT {
	padding-top: 40px !important;
}

.xPaddedB {
	padding-bottom: 40px !important;
}

.flushT {
	margin-top: 0 !important;
}

.hMarginT {
	margin-top: 10px !important;
}

.marginT {
	margin-top: 20px !important;
}

.xMarginT {
	margin-top: 40px !important;
}

.underlined, a.underlined {
	text-decoration: underline !important;
}

.round {
	border-radius: 5px; 
}


/* ******************************************************************************
=ERROR/CONFIRM MESSAGING
****************************************************************************** */
.statusMessageBox {
	background:#ffc;
	border:2px solid #ee8;
	margin:0 0 26px;
	padding:26px 1em 4px 1em;
}
.errorBox {
	background:transparent url(//g.foolcdn.com/common/img/ico/stop.png) no-repeat scroll .5em 22px;
	border-color: #aa0c00;
	padding-left:45px;
}
.errorBox h2,
.errorBox .title,
label.error,
p.error {
	color: #aa0c00;
}

.successBox {
	background:transparent url(//g.foolcdn.com/common/img/ico/go.png) no-repeat scroll .5em 22px;
	border-color: #60a82c;
	padding-left:45px;
}
.successBox h2, .successBox .title {
	color: #449009;
}

.hidden {
	display: none;
}
.vis-hidden {
	visibility: hidden;
}


div#downtimeAlert {
    background-color: #f2dede;
    border: medium none;
    padding: 1rem;
    text-align: center;
}
div#downtimeAlert h1 {
    color: #b94a48;
    margin: 0;
    background: transparent url("http://g.foolcdn.com/art/littlealert.png") no-repeat scroll left center;
    display: inline-block;
    font: 14px arial,sans-serif;
    padding-left: 24px;
}