/***************************************************************************************
 ******* Name		: style.css
 ******* URI		: /elements/css/style.css
 ******* Description: Main site styles for Steel Market Update. Provides basic structural
 *******			  layout, and typographic styles. This is where the magic happens.
 ******* Author		: Congruent Media
 ******* Author URI	: http://www.congruentmedia.com
 ***************************************************************************************/
 
 /***************************************************************************************
 ******* NAMED COLOUR REFERENCES
 ******* Columbia Blue		:	#6699cc
 ******* Dark Columbia Blue	:	#87b0d7
 ******* Dark Blue			:	#003366
 ******* Rich Black			:	#060202
 ******* Red				:	#cc0b01
 ******* Muted Red			:	#bd2401
 ***************************************************************************************/
 
/***************************************************************************************
 ******* COMMON / GLOBAL STYLES
 ***************************************************************************************/
 body {
	 background: #000 url(/elements/images/global/bodyBG.png) 0 0 repeat-x;
	 font: normal 13px/1.3em Arial, Helvetica, sans-serif;
 }
 a, a:link, a:visited {text-decoration: none;}
 a:hover, a:focus, a:active {}
 .right {
	 display: block;
	 float: right;
	 margin: 0 0 1.25em 1.25em;
 }
 .left {
	 display: block;
	 float: left;
	 margin: 0 1.25em 1.25em 0;
 }
 .centered {
	 display: block;
	 margin: 0 auto;
 }
 #container {
	 background: #fff;
	 margin: 20px auto;
	 width: 960px;
 }
.button {
	background: #87b0d7 url(/elements/images/forms/blueButtonBackground.gif) 0 0 repeat-x;
				cursor: pointer;
				height: 1.9em;
				padding: 0 6px 3px 6px;
				text-align: center;
				text-transform: uppercase;
				vertical-align: top;
				width: auto;
				font-weight: bold;
				border: solid 1px #6699cc;
				font-size:11px;
				font-family:Arial, Helvetica, sans-serif;
				}
.button:hover{background-position: 0 -30px;}
/***************************************************************************************
 ******* HEADER AREA STYLES
 ***************************************************************************************/
 #header {
	 background: #fff url(/elements/images/global/headerBG.gif) 0 0 repeat-x;
	 border: 3px solid #fff;
	 border-width: 3px 3px 0;
	 padding: 22px 30px 0;
	 position: relative;
	 z-index: 1;
 }
 	#header #userBar {
		color: #060202;
		float: right;
		font-size: 0.867em;
		width: 400px;
		text-align: right;
	}
	 	#header #userBar a {
			border-left: 1px solid #6699cc;
			color: #cc0b01;
			margin: 0 0 0 5px;
			padding: 0 0 0 5px;
			text-transform: uppercase;
		}
	 	#header #userBar a:hover {text-decoration: underline;}
	 	#header #userBar fieldset {margin: 1em 0 0;}
		 	#header #userBar fieldset input {
				border: 1px solid #6699cc;
				color: #003366;
				display: inline;
				float: none;
				font: bold 1.1em/1em Arial, Helvetica, sans-serif;
			}
		 	#header #userBar fieldset input[type="text"] {
				height: 1.5em;
				padding: 0.15em;
				width: 150px;
			}
			#header #userBar fieldset input[type="text"]:focus {background: #e4f0fc;}
		 	#header #userBar fieldset input[type="submit"] {
				background: #87b0d7 url(/elements/images/forms/blueButtonBackground.gif) 0 0 repeat-x;
				cursor: pointer;
				height: 1.9em;
				padding: 0 8px;
				text-align: center;
				text-transform: uppercase;
				vertical-align: top;
				width: auto;
			}
		 	#header #userBar fieldset input[type="submit"]:hover {background-position: 0 -30px;}
	#header .navigation {
		border-left: 1px solid #6699cc;
		margin: 15px 0 0;
	}
		#header .navigation li {
			display: block;
			float: left;
			position: relative;
		}
			#header .navigation li a {
				background: #fff url(/elements/images/global/headerNavigationBG.gif) 0 0 repeat-x;
				border: 1px solid #6699cc;
				border-width: 1px 1px 0 0;
				color: #003366;
				display: block;
				font-weight: bold;
				font-size: 0.857em;
				line-height: 22px;
				text-align: center;
				text-transform: uppercase;
				width: 115px;
			}
			
			#header .navigation > li:first-child > a {width: 84px;}
			#header .navigation > li:last-child > a,
			#header .navigation > li.last-child > a {
				background: #bd2401 url(/elements/images/global/headerNavigationSpecialBG.gif) 0 0 repeat-x;
				border-color: #bd2401;
				color: #fff;
				width: 110px;
			}
			#header .navigation li a:hover,
			#header .navigation li:hover a,
			#header .navigation li.hover a {background-position: 0 -25px;}
			#header .navigation li ul {
				border: 1px solid #6699cc;
				border-width: 0 0 1px 1px;
				left: -99999em;
				position: absolute;
				top: 23px;
				width: 150px;
			}
			#header .navigation li:hover ul,
			#header .navigation li.hover ul {left: -1px;}
			#header .navigation > li:last-child:hover ul,
			#header .navigation > li.last-child:hover ul {left: -41px;}
				#header .navigation li ul li a {
					background: #fff;
					display: block;
					line-height: 1.3em;
					padding: 3px 5px;
					text-align: left;
					text-transform: none;
					width: 140px;
				}
				#header .navigation li ul li a:hover {
					background: #acc5de;
					color: #fff;
				}

/***************************************************************************************
 ******* CONTENT AREA STYLES
 ***************************************************************************************/
 #middle {
	 border: 3px solid #fff;
	 border-width: 0 3px;
	 padding: 0 30px 20px;
 }
 #middle .widgets .wide {width: 318px;}
 #middle .widgets .narrow {width: 233px;}
	#middle .widgets .widget .title {
		background: #083e73 url(/elements/images/home/primaryCalloutTitleBG.gif) 0 0 repeat-x;
		border: 1px solid #215183;
		height: 23px;
		padding: 5px 0 0 5px;
	}
		#middle .widgets .widget .title h3 {
			color: #fff;
			font: 20px "Helvetica Neue", Helvetica, Arial, sans-serif;
			height: 20px;
		}
	#middle .widgets .widget hr {
		background: #ec5529;
		border: 1px solid #ba1b19;
		border-width: 1px 0;
		display: block;
		height: 1px;
		margin: 1px 0;
	}
	#middle .widgets .widget .body {
		background: #dee7f0;
		height: 130px;
		padding: 8px 13px 0;
	}
		#middle .widgets .widget .body p {
			font-size: 1.025em;
			margin: 0 0 1em;
		}
			#middle .widgets .widget .body a {
				color: #003366;
				font-weight: bold;
			}
			#middle .widgets .widget .body a:hover {color: #2e75bb;}
			#middle .widgets .widget .body p span {
				color: #6699cc;
				display: block;
				margin: 0.25em 0 0;
			}
			
 #middle .widgets .widget .body a.special {
	background: #bd2401 url(/elements/images/global/headerNavigationSpecialBG.gif) 0 0 repeat-x;
	border-color: #bd2401;
	color: #fff;
	width: 110px;
	display:block;
	font-size:0.857em;
	font-weight:bold;
	line-height:22px;
	text-align:center;
	text-transform:uppercase;
 }
 #middle .widgets .widget .body a.special:hover {background-position: 0 -25px;}
 /***************************************************************************************
 ******* FOOTER AREA STYLES
 ***************************************************************************************/
 #footer {
	 background: #6699cc;
	 border-top: 1px solid #000;
	 color: #fff;
	 font-size: 0.867em;
	 padding: 15px 25px;
 }
	 #footer p {display: block; float: left;}
	 #footer ul {display: block; float: right;}
		 #footer ul li {
			 border-left: 1px solid #043a71;
			 display: block;
			 float: left;
		 }
		 #footer ul li:first-child,
		 #footer ul li.first-child {border-left: none;}
		 	#footer ul li a {
				color: #fff;
				display: block;
				padding: 0 7px;
			}
		 	#footer ul li a:hover {text-decoration: underline;}