@charset "UTF-8";
@import url('type.css'); /* Type is first because it sets the fall-back defaults */
@import url('nav1.css');
@import url('nav2.css');
@import url('layout.css');
/* 	GENERIC STYLES AND THEIR VARIANTS 
/	---------------------------------
/	For type styles, see type.css 
/	For layout styles, see layout.css
/ 	For special nav menu styles, see nav1.css and nav2.css
/	These are all used somewhere on the site
/	They are displayed in alphabetical order except where it 
/	makes sense to list them in order of use (like table, tr, th, td)
*/

address {
	font-style: normal;
}
blockquote {
	margin: 10px 20px;
	padding: 0 20px;
	font-style: italic;
}
hr {
	color: #999;
	background-color: #999;
	height: 1px;
	border: 0;
	clear: both;
}
/* IMAGE STYLE DEFAULTS */
img {
	border: 0;
	margin: 0;
	padding: 0;
}
img.leftImg {
	float: left;
	display: inline;
	margin: 5px 8px 8px 0;
}
img.rightImg {
	float: right;
	display: inline;
	margin: 5px 0 8px 8px;
}
ol {
	list-style: decimal;
	margin: 0;
	padding: 0 0 0 1em;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1.5em;
}
li {
	margin: 0;
	padding: 0;
}
td ul {
	padding: 0 0 0 0;
}
.rightTabBoxContent td ul {
	padding: 0 0 0 8px;
}
/*
/	This is a special type of OL that uses images for the list item numbers. 
/	See /why/3goodreasons.html for an example of usage. 
*/
ol.iconListItems {
	list-style: none;
	margin: 0;
	padding: 0;
}
ol.iconListItems li {
	margin-bottom: 20px;
	padding-left: 40px;
}
ol.iconListItems li.one {
	background: url('../images/icon_round_number_1.gif') top left no-repeat;
}
ol.iconListItems li.two {
	background: url('../images/icon_round_number_2.gif') top left no-repeat;
}
ol.iconListItems li.three {
	background: url('../images/icon_round_number_3.gif') top left no-repeat;
}
/*
/	Tables are currently only used in the contentRight column,
/	and only for tablular data.
*/
table {
	margin: 10px 0;
	padding: 0;
	border: 1px solid #999;
}
.contentRightCallout table {
	margin: 0;
	width: 300px;
}
.rightTabBoxContent table {
	border: 0;
}
tr {
	margin: 0;
	padding: 0;
}
th {
	margin: 0;
	padding: 3px;
	background: url('bgTabBlueGrad.gif') top left repeat-x;
	text-align: left;
}
.rightTabBoxContent table th {
	background: none;
}
td {
	padding: 3px;
	text-align: left;
	vertical-align: top;
}
/*	
/	The Live Prices table requires a lot of custom classing.
/	It currently only appears on one page, but this style
/	may be re-used in the future for other price or numeric data.
*/
table.prices {
	width: 740px;
	margin-bottom: 20px;
}
table.prices td {
	width: 32%; /* This prevents wrapping of the commodity name */
	border-bottom: 1px solid #f0f0f0;
	padding: 5px;
}
table.prices td.numeric, table.prices th.numeric {
	width: 12%;
	text-align: right;
	padding-right: 8px;
}
table.prices td.chart, table.prices th.chart {
	width: 8%;
	text-align: center;
}
body {
	font: small sans-serif;
}
div.content {
	border: 1px solid #bbb;
	clear: left;
	width:340px;
	padding: 0em;
}
ol#toc {
	list-style: none;
	margin: 0;
	padding: 0;
}
ol#toc a {
	color: #000;
	display: block;
	float: left;
	height: 2.0em;
	padding-left: 10px;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid #bbb;
	background-image: url('../images/tabgrad.gif');
	background-repeat: repeat-x;
}
ol#toc li {
	font-size: 10px;
	float: left;
	margin-top: 0.2em;
	margin-right: 4px;
	margin-bottom: -1px;
	margin-left: 0;
}
ol#toc li.current a {
	background-color: #fff;
	color: #6699CC;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #fff;
	background-image: none;
}
ol#toc span {
	display: block;
	float: left;
	line-height: 2.0em;
	padding-right: 10px;
}
p {
	margin: .3em 0 1em;
}
#container {
	margin: 0;
	padding: 8px 0 0 0;
	border: 1px solid #bbb;
}
.vwrap {
	margin: 0 0 10px 0;
	padding: 0;
	border: 1px solid #bbb;
}
.vwrap #container {
	margin: 8px;
	padding: 7px 7px 0 7px;
	border: 1px solid #bbb;
}
.chartwrapper {
	position:relative;
}
.vlp {
	position:absolute;
	text-align:right;
	right:5px;
}
.info {
	font-size:100%;
	background-image: url(../images/icon_round_info.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding: 5px 0px 5px 25px;
}
.more_chart {
	background-image: url(../images/icon_chart_more.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding: 8px 0px 8px 42px;
	font-size:90%;
	letter-spacing:normal;
	word-spacing: normal;
}
.vlp small a {
	font-size:88%;
}
.chart_info {
	text-align:center;
	margin-top:15px;
}
/* tab menus */
*html #menu {
	height:20px;
} /* for ie6 only*/
#menu {
	font-size:10px;
	line-height:normal;
}
#menu ul {
	margin:0px;
	padding:0px;
	list-style:none;
}
#menu li {
	display:inline;
	float: left;
	padding-right: 5px;
	margin-bottom:-1px;
}
#menu li a {
	color:#6699CC;
	display:block;
	text-decoration:none;
	padding:3px 8px 3px;
	border-top: 1px solid #bbb;
	border-right: 1px solid #bbb;
	border-left: 1px solid #bbb;
}
#menu li a.tabactive {
	background-image: url(../images/tabgrad.gif);
	background-repeat: repeat-x;
	font-weight:bold;
	color: #000;
	position:relative;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #fff;
}
#tabcontent1, #tabcontent2, #tabcontent3, #tabcontent4, #tabcontent5 {
	border:1px solid #bbb;
	text-align:center;
	clear:both;
	padding:5px 0;
}

#expert { text-align:center;}
#expert_container {
	margin:0 auto;
	padding: 15px 5px 5px;
	border: 1px solid #666;
	width: 340px;
}

.button {
   border-top: 1px solid #f7bc0a;
   background: #f6e6b7;
   background: -webkit-gradient(linear, left top, left bottom, from(#dabc5b), to(#f6e6b7));
   background: -webkit-linear-gradient(top, #dabc5b, #f6e6b7);
   background: -moz-linear-gradient(top, #dabc5b, #f6e6b7);
   background: -ms-linear-gradient(top, #dabc5b, #f6e6b7);
   background: -o-linear-gradient(top, #dabc5b, #f6e6b7);
   padding: 3px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   color: #333333;
   font-size: 10px;
   font-family: Helvetica, Arial, Sans-Serif;
   font-weight:bold;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #dabc5b;
   background: #dabc5b;
   text-decoration: none;
   color: #000000;
   }
.button:active {
   border-top-color: #dabc5b;
   background: #dabc5b;
   text-decoration: none;
   }
.note-box {
	border: 1px solid #999999;
	background-color: #eee;
	padding: 10px;
	font-size: 11px;
	font-style: italic;
	font-family: Arial, Helvetica, sans-serif;
}