/***************************************************************************************
 ******* Name		: style.css
 ******* URI		: /elements/css/style.css
 ******* Description: Main site styles for Speakman Company. Provides basic structural
 *******			  layout, and typographic styles. This is where the magic happens.
 ******* Author		: Congruent Media
 ******* Author URI	: http://www.congruentmedia.com
 ***************************************************************************************/
 
/***************************************************************************************
 ******* COMMON / GLOBAL STYLES
 ***************************************************************************************/
 body {
	 background: #fff;
	 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 10px 10px;
 }
 .left {
	 display: block;
	 float: left;
	 margin: 0 10px 10px 0;
 }
 .centered {
	 display: block;
	 margin: 0 auto;
 }
 #container {
	 background: #fff;
	 margin: 30px auto;
	 width: 960px;
 }

/***************************************************************************************
 ******* HEADER AREA STYLES
 ***************************************************************************************/
 #header {z-index: 99999;}
 	#header .logo {
		display: block;
		float: left;
		height: 50px;
		width: 175px;
	}
	#header #userBar {
		float: right;
		margin: 15px 0 0;
	}
		#header #userBar form {
			display: block;
			float: left;
			margin: 0 20px 0 0;
		}
			#header #userBar form input {
				background: #fff;
				border: 1px solid #ccc;
				color: #666;
				font-size: 0.85em;
				height: 16px;
				line-height: 16px;
				padding: 0 5px;
				width: 150px;
			}
			#header #userBar form input.submit {
				background:#e4e4e4 url(/elements/images/global/searchButtonBG.gif) 0 0 no-repeat;
				cursor: pointer;
				height: 18px;
				padding: 0;
				text-indent: -99999em;
				vertical-align: bottom;
				width: 18px;
			}
		#header #userBar a.button {
			background: #60abc3 url(/elements/images/global/headerButtonBG.gif) 0 0 repeat-x;
			border: 1px solid #ccc;
			color: #fff;
			display: block;
			float: left;
			font-size: 0.85em;
			height: 16px;
			line-height: 16px;
			padding: 0 5px;
			text-transform: uppercase;
		}
	#header ul {
		border: 1px solid #ccc;
		border-left: none;
		clear: both;
		height: 21px;
		z-index: 999999;
	}
		#header ul li {
			background: #e4e4e4 url(/elements/images/global/primaryNavigationBG.gif) 0 0 repeat-x;
			border-left: 1px solid #ccc;
			color: #666;
			display: block;
			float: left;
			font-size: 0.875em;
			font-weight: bold;
			height: 21px;
			line-height: 21px;
			position: relative;
			text-align: center;
			width: 158px;
			z-index: 9999999;
		}
		#header ul li.first {width: 163px;}
		#header ul li:hover,
		#header ul li.hover {background-position: 0 -25px;}
			#header ul li a {
				color: #666;
				display: block;
				height: 21px;
				line-height: 21px;
				width: 100%;
			}
			#header ul li ul {
				left: -99999em;
				position: absolute;
				width: 100%;
			}
			#header ul li:hover ul,
			#header ul li.hover ul {left: -1px;}
				#header ul li ul li {
					background: #fefefe;
					border: 1px solid #ccc;
					border-width: 0 1px 1px 1px;
					font-size: 1em;
					width: 100%;
				}
				#header ul li ul li:hover,
				#header ul li ul li.hover {background: #efefef;}
					#header ul li ul li a {
						padding: 0 5px;
						text-align: left;
					}

/***************************************************************************************
 ******* CONTENT AREA STYLES
 ***************************************************************************************/
 #middle {}
 	#banner {}
		#banner hr,
		#middle #content hr {
			background: transparent url(/elements/images/global/bannerDividerBG.gif) 0 0 repeat-x;
			border: none;
			clear: both;
			height: 4px;
			margin: 1px 0;
		}
		#middle #content hr.thin {
			height: 1px;
			margin: 2em 0;
		}
		#banner img {display: block;}
		#banner #breadcrumbs {margin: 0;}
			#banner #breadcrumbs p {
				background: #ecebeb;
				border: 1px solid #ccc;
				color: #999;
				font-size: 0.9em;
				font-weight: bold;
				margin: 0;
				padding: 10px;
			}
				#banner #breadcrumbs p a {
					color: #029acc;
					text-transform: uppercase;
				}
		#flash {
			color: #666;
			font: bold 0.95em/1 Arial, Helvetica, sans-serif;
			margin: 0 0 1em;
			padding: 10px;
		}
			#flash.warning {
				background: #fbfb92;
				border: 2px solid #f9d350;
			}
			#flash.error {
				background: #febebe;
				border: 2px solid #ea8989;
			}
			#flash.success {
				background: #bcfcbc;
				border: 2px solid #70e270;
			}

/***************************************************************************************
 ******* FOOTER AREA STYLES
 ***************************************************************************************/
 #footer {
	position: relative;
	text-align: center;
}
 	#footer ul {
		background: #e5e5e5 url(/elements/images/global/footerNavigationBG.jpg) 0 0 repeat-x;
		border: 1px solid #ccc;
		padding: 10px 15px;
	}
	 	#footer ul li {
			border-left: 1px solid #c8c8c8;
			display: block;
			float: left;
			font-size: 0.88em;
		}
	 	#footer ul li.first {border: none;}
		 	#footer ul li a {
				color: #149dcb;
				display: block;
				padding: 0 5px;
			}
		 	#footer ul li.first a {padding: 0 5px 0 0;}
		 	#footer ul li a:hover {text-decoration: underline;}
 	#footer p {
		color: #999;
		font-size: 0.85em;
		margin: 2em 0;
	}
	#footer ul.social-media {
		background: none;
		border: none;
		padding: 0;
		position: absolute;
		right: 0;
		top: 3.5em;
	}
		#footer ul.social-media li {
			border: none;
			margin: 0 2px;
		}
			#footer ul.social-media li a {
				background-position: 0 0;
				background-repeat: no-repeat;
				height: 22px;
				padding: 0;
				text-indent: -9999em;
				width: 22px;
			}
			#footer ul.social-media li.wordpress a {background-image: url(/elements/images/icons/wordpress.png);}
			#footer ul.social-media li.facebook a {background-image: url(/elements/images/icons/facebook.jpg);}
			#footer ul.social-media li.twitter a {background-image: url(/elements/images/icons/twitter.jpg);}