/* ---------------------
	Title: Rawson Materials - main screen stylesheet
	Filename: screen.css
	Author: Jim O'Neill - based heavily on work with One Pica Inc, Boston MA
	
	Table of Contents:
		Searchstring (Section Name)				Description
		
		=General (General Styles):				Set font sizes, Page backgrounds, link behaviors, etc
		=Master (Master #container Styles):		Placing, sizing, styling the main container
		=Branding (Branding Styles):			Logos, taglines, branding info
		=Nav (Navigation Styles):				The navigation bar; internal and external
		=Forms (Form Styles)					Set appearance of forms, inputs, buttons, etc
		=Multicol (Multi-Column Styles):		The cases where the content needs to be in multiple columns
		=Content (Content Styles):				The main content of the page
		=Footer (Credit/Footer Styles):			The footer
		=Uni (Universal Styles):				Classes and elements that apply throughout ('clear', 'blue', etc)
	
	Common Color Table:
		White:									#FFFFFF;
		Rawson Dark Blue: 						#293963;
		Teal: 									#559696;
		Footer Text Blue: 						#006696;
		Heading Lavender: 						#6696C9;
		Table Header Light Teal: 				#97CACA;
	
	Thanks To:
		CSS structure/commenting: http://www.huddletogether.com/2006/02/16/practical-web-development-tips/
		Markup structure: http://www.stuffandnonsense.co.uk/archives/whats_in_a_name_pt2.html
		Stylesheet searchstring flags: http://www.stopdesign.com/log/2005/05/03/css-tip-flags.html
---------------------- */

/* =General
---------------------- 
	General Styles applied to 'normalize' things
	Notes:
		'Em' styling generally following (http://www.clagnut.com/blog/348/) from this point 10px=1em, 11px=1.1em, etc
		100.01% font size from (http://www.communitymx.com/content/article.cfm?page=5&cid=FAF76)
		Beginning "global reset" styles, to clear troublesome browser defaults, 
		are based on (http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/) 
		Note that most form elements are omitted; style those separately, further down.
---------------------- */
html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
a img, :link img, :visited img {
	border: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol, ul {
	list-style: none outside;
}

/* Begin Actual Site Styles */
html {
	font-size: 100.01%; /* Ensures font consistency across browsers */
	height: 100%;
}
body {
	font-size: 10px; /* Sets base font-size for browsers that resize text correctly */
	line-height: 1.5; /* Sets base leading for lines of text */
	background-color: #ccc;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	height: 100%;
	color: #555;
}

p {margin-bottom: 1em; line-height: 1.5}
div {line-height: 1.5}

input, select, th, td {font-size: 1em}

h1 {font-size: 2em} /* 22px */
h2 {font-size: 1.5em} /* 17px */
h3 {font-size: 1.25em} /* 14px */
h4 {font-size: 1em} /* 11px */
h5 {font-size: 1em} /* 11px */
h6 {font-size: 1em} /* 11px */

strong {font-weight: bold}
em {font-style: italic}
sup {font-size: 50%; vertical-align: super;}

/* Basic link styles */
a, a:link {
	color: #00278e;
	text-decoration: underline;
}
a:visited {
	color: #00278e;
}
a:hover, a:active {
	color: #0070a5;
	text-decoration: underline;
}
a:focus {
	outline: none; /* Removes dotted outline in Firefox */
}

/* =Master
---------------------- 
	Master Container
	Notes:
		margin: 0px auto; centers the container horizontally except in IE5, which is fixed in the body tag
---------------------- */
#container {
	position: relative;
	margin: 0px auto;
	padding: 0;
	width: 809px;
	font-size: 1.1em; /* 11px (based on value from body) */
	text-align: left; /* Normalize alignment; unfix all browsers from fix in IE stylesheet */
	background: #fff;
}

/* Skip link: This is the very first link anywhere on the page; by tabbing to it or hitting accesskey 2, a user can skip the header/navigation of a page and go directly to the page content. It is normally 'hidden' by being positioned far, far off the page; bringing it into focus with Tab makes it visible. */
	#skiplink a {
		position: absolute;
		top: -1000px;
		left: -2000px;
	}
		#skiplink a:focus, #skiplink a:active {
			position: absolute;
			margin: 0;
			top: 0;
			left: 0;
			display: block;
			padding: 0;
			background: #000;
			color: #fff;
			font-weight: bold;
		}
		#skiplink a:hover { 
		}

/* =Branding
----------------------
	Branding styles: Usually the logo and tagline
	Notes:
		Image replacement: Usually Phark Method (http://www.mezzoblue.com/tests/revised-image-replacement/)
---------------------- */
#branding {
	width: 809px;
	height: 160px;
}
/* Branding by section */
#Home #branding {
	background: transparent url(../images/headers/home.jpg) 5px 0 no-repeat;
	height: 240px;
}
#Company #branding {
	background: transparent url(../images/headers/company.jpg) 5px 0 no-repeat;
}
#Customers #branding {
	background: transparent url(../images/headers/materiallist.jpg) 5px 0 no-repeat;
}
#Employees #branding {
	background: transparent url(../images/headers/employees.jpg) 5px 0 no-repeat;
}
#Community #branding {
	background: transparent url(../images/headers/community.jpg) 5px 0 no-repeat;
}
#Contact #branding {
	background: transparent url(../images/headers/contact.jpg) 5px 0 no-repeat;
}

	#branding-logo {
		position: absolute;
		z-index: 50;
		cursor: pointer;
		width: 220px;
		height: 70px; /* Set dimensions once here, and use 100% for all dimensions in both rules below */
		top: 120px;
		left: 15px;
	}
	#Home #branding-logo {
		top: 200px;
	}
		#branding-logo h1 {
			text-indent: -5000px;
			overflow: hidden;
			width: 100%;
			height: 100%;
			line-height: 1;
			padding: 0;
			margin: 0 0;
		}
			#branding-logo h1 a, #branding-logo h1 a:link, #branding-logo h1 a:visited {
				display: block;
				width: 100%;
				height: 100%;
			}
	#branding-tagline {
		position: absolute;
		z-index: 20;
		top: 194px;
		left: 580px;
		width: 220px;
		height: 15px; /* See branding-logo above */
	}
	#Home #branding-tagline {
		top: 274px;
	}
		#branding-tagline h2 {
			text-indent: -5000px;
			overflow: hidden;
			background: transparent url(../images/branding/rawson_tagline.gif) 0 0 no-repeat;
			width: 100%;
			height: 100%;
			line-height: 1;
			padding: 0;
			margin: 0;
		}


/* =Nav
----------------------
	Navigation styles
	Notes:
		Navigation belongs in an UL tag with <ul><li><a></a></li></ul> as the markup scheme.
		Keep each of the below #elements as divs, and put the UL inside them
		If there's a Left-Hand navigation, use #nav-section, give it a width & float it left
---------------------- */
#nav {
}
	#nav-main {
		width: 809px;
		margin-left: 0;
		height: 36px;
		background: #ccc url(../images/nav/navbar_bg2.jpg) 0 0 no-repeat;
	}
		#nav-main ul {
			position: absolute;
			top: 160px;
			right: 15px;
			list-style: none outside;
			padding: 0;
			width: 490px;
		}
		#Home #nav-main ul {
			top: 240px;
		}
			#nav-main li {
				float: left;
				display: inline;
				margin: 0 0 0 30px;
				padding: 0;
				color: #444;
				position: relative;
				background-image: none;
			}
				#nav-main a, #nav-main a:link, #nav-main a:visited {
					display: block;
					padding: 8px 5px 5px;
					line-height: 1;
					color: #444;
					text-decoration: none;
				}
				#nav-main a:hover, #nav-main a:active {
					color: #293963;
					text-decoration: underline;
				}
			#nav-main li ul {
				display: none;
				background: transparent;
				width: 14.5em;
				padding: 0;
				margin: 0;
				position: absolute;
				z-index: 100;
				top: -76px;
				right: -7px;
				float: none;
				border-bottom: solid 1px #ccc;
			}
			#nav-main li#li-customers ul {
				top: -101px;
			}
			#Home #nav-main li ul {
				top: -76px;
			}
			#Home #nav-main li#li-customers ul {
				top: -101px;
			}
			#nav-main li:hover ul, #nav-main li.over ul {
				display: block;
			}
				#nav-main li ul li {
					float: none;
					display: block;
					background: #559696;
					margin: 0;
					height: 24px;
					border: solid 1px #ccc;
					border-bottom: none;
					padding: 0;
					color: #fff;
				}
					#nav-main li ul li a, #nav-main li ul li a:link, #nav-main li ul li a:visited {
						display: block;
						height: 24px;
						line-height: 24px;
						text-align: right;
						padding: 0 10px;
						background: transparent;
						color: #fff;
					}
					#nav-main li ul li a:hover, #nav-main li ul li a:active {
						background: #293963;
						text-decoration: none;
						color: #fff;
					}
	#nav-breadcrumbs {
		margin: -2px 0 0 25px;
	}
			


/* =Forms
----------------------
	Form styles
	Notes:
		A <p></p> should always enclose every label-input (or label-select) pair.
		Widths are in % to start, so that they scale, but they are the attributes most likely to change.
		Remember -- the IE stylesheet has different percentage widths to start.
---------------------- */
form {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
}
	fieldset {
		border: 0px solid;
		padding: 0;
		margin: 0 0 1.4em 0;
	}
	form p {
		display: block;
		clear: both;
		margin: 0 0 0.4em 0;
		padding: 0;	
	}
		form label {
			display: inline;
			float: left;
			width: 37%;
			padding: 0 4% 0 0;
			margin: 0;
		}
		form input, form select, form textarea {
		   margin: 0;
		   padding: 0;
		   width: 57.2%; /* CLOSE to full width; use pixels for the real thing */
		   font-size: 1em;
		   border: solid 1px #999;
		   border-bottom-color: #ccc;
		   background-color: #fff;
		   font-family: Tahoma, sans-serif;
		}
		form input {height: 1.3em}
		form select {width: 59.5%; height: 1.5em}  /* Selects are not the same as inputs */
		form textarea {height: 6em}
		
		/* Radio buttons */
		form input.radio, form input.radiobtn {
			text-align: left;
			width: 1.3em;
			margin: 0.3em 0.2em 0 0;
			padding: 0;
			border: none;
			background: none;
		}
		form .radiotext {
			margin: 0 1em 0 0;
		}
		
		/* Check boxes */
		form input.ckbx, form input.checkbox {
			text-align: left;
			width: 1.2em;
			margin: 0.3em 0.2em 0 0;
			padding: 0;
			border: none;
			background: none;
		}
		
	form p.indent { /* For buttons or text that need to align with inputs/selects */
		margin-left: 40%;
	}
	form p.xspa { /* "extra space after" */
		margin-bottom: 2.0em;
	}
	form .req, form .required {
		color: red;
	}
	form input:focus {
		/* however we want the focused field to look */
	}
	form input.submit, button { /* There are lots of default values to fix */
		border: 3px double #999;
		border-top-color: #ccc;
		border-left-color: #ccc;
		padding: 1px 2px;
		background: #f6f6f6;
		color: #555;
		font-size: 0.9em;
		font-weight: bold;
		height: auto;
		width: auto;
		cursor: pointer;
		font-family: inherit;
	}
	form input.submit:hover, button:hover { /* IE6 can't see these, too bad */
		color: #fff;
		background-color: #ff0000;
	}
	form input.submit:active, button:active { /* Button 'feedback' behavior */
		border: 3px double #ccc;
		border-top-color: #999;
		border-left-color: #999;
	}
	
	
/* =Multicol
----------------------
	Multi-Column Content styles
	Notes:
		These columns should be used for text within #content.
		Values are in percentages to start off -- remember that the IE stylesheet has different values.
		If you need "pixel-perfect", you'll have to stop using percentages and use actual pixels
---------------------- */
.twoColumnLayout {
	float: left;
	clear: none;
}
	.twoColumnLeft {
		width: 40%;
		margin-right: 4%;
	}
	.twoColumnRight {
		width: 40%;
	}

#Contact .twoColumnLeft, #Contact .twoColumnRight {
	width: 20%;
	margin-right: 3%;
}
#Employees .twoColumnLeft, #Employees .twoColumnRight {
	width: 20%;
	margin-right: 3%;
}


.threeColumnLayout {
	width: 31%;
	float: left;
	clear: none;
}
	.threeColumnLeft {
		margin-right: 3%;
	}
	.threeColumnMiddle {
		margin-right: 3%;
	}
	.threeColumnRight {
		margin-right: 0;
	}

/* =Headings
----------------------
	<h1> through <h6>
---------------------- */
h2, h3, h4, h5, h6 {
	line-height: 1.5;
	padding: 0;
	margin: 0;
	font-weight: normal;
}
h3 {
	font-size: 1.64em;
	padding: 0;
	margin: 0 0 0.4em 0;
	color: #6696C9;
}
h4 {
	font-size: 1.45em;
	line-height: 1.2;
	padding: 0 0 0.2em 0;
	border-bottom: solid 1px #999;
	margin: 0 0 0.6em 0;
	color: #559696;
}
h5 {
	font-size: 1.09em;
	line-height: 1.2;
	font-weight: bold;
	padding: 0;
	margin: 0 0 0.3em 0;
	color: #6696C9;
}
h6 {
	font-size: 1em;
	color: #97CACA;
}


/* =Content
----------------------
	Main Content styles
	Notes:
		
		Font-size is inherited, so some math will be necessary to size child elements up or down correctly
---------------------- */
#content {
	font-size: 1em; /* Inherits 11px from #container */
	margin: 0 25px;
	padding: 14px 0 2em 0;
}
	#content-main {
		min-height: 240px;
	}
	#Home #content-main {
		min-height: 140px;
	}
		#content-main > p {
			width: 80%;
		}



/* Homepage styles */
#Home #nav-breadcrumbs {
	display: none;
}
#Home #content-main p {
	margin-top: 10px;
	width: 66%;
	line-height: 2;
	text-align: justify;
	float: left;
	display: inline;
}
.home-logo {
	float: left;
	display: inline;
	width: 140px;
	margin: 8px 0 0 58px;
}

/* Special column styles */
.history-img {
	float: left;
	display: inline;
	margin: 0 15px 5px 0;
}
.history-p {
	width: 55% !important;
	float: left;
	display: inline;
}
.team-img-left {
	float: left;
	display: inline;
	margin: 0 15px 1.4em 0;
}
.team-p-right {
	float: left;
	display: inline;
	width: 50% !important;
	margin-bottom: 1.4em;
}
.team-img-right {
	float: left;
	display: inline;
	margin: 0 0 1.4em 15px;
}
.team-p-left {
	float: left;
	display: inline;
	width: 50% !important;
	margin-bottom: 1.4em;
}

.logobar {
	padding-top: 1em;
}



/* ULs and OLs */
ul, ol {
	margin: 0 0 1.5em 0;
}
	li {
		background: transparent url(../images/icons/bullet_1.gif) 0 0.5em no-repeat;
		padding: 0 0 0 11px;
		margin: 0 0 0.3em 0;
		line-height: 1.5;
	}
ol {
	list-style: decimal outside;
	padding: 0 0 0 1.6em;
}
	ol li {
		background: none;
		padding: 0;
		margin: 0 0 0.3em 0;
		line-height: 1.5;
	}

/* Logo Bar image maps */
ul#logobar-customers {
	width: 665px;
	height: 72px;
	position: relative;
	background: transparent url(../images/inline/customer_logos.jpg) 0 0 no-repeat;
	margin: 1.5em 0;
	padding: 0;
}
ul#logobar-community {
	width: 585px;
	height: 80px;
	position: relative;
	background: transparent url(../images/inline/community_logos.jpg) 0 0 no-repeat;
	margin: 1.5em 0;
	padding: 0;
}
	#logobar-customers li, #logobar-community li {
		margin: 0;
		padding: 0;
		display: block;
		line-height: 1;
		list-style: none;
		position: absolute;
		background: none;
	}
	#logobar-customers a, #logobar-community a {
		width: 100%;
		height: 100%;
		display: block;
		background: transparent;
		overflow: hidden;
		text-indent: -5000px;
	}
	#ogind {
		width: 70px;
		height: 70px;
		top: 0px;
		left: 0px;
	}
	#suzio {
		width: 70px;
		height: 66px;
		top: 2px;
		left: 80px;
	}
	#nico {
		width: 150px;
		height: 25px;
		top: 10px;
		left: 156px;
	}
	#wheel {
		width: 160px;
		height: 25px;
		top: 40px;
		left: 156px;
	}
	#camosse {
		width: 110px;
		height: 28px;
		top: 8px;
		left: 326px;
	}
	#uni {
		width: 110px;
		height: 28px;
		top: 40px;
		left: 326px;
	}
	#park {
		width: 40px;
		height: 60px;
		top: 5px;
		left: 455px;
	}
	#jolley {
		width: 70px;
		height: 60px;
		top: 5px;
		left: 505px;
	}
	#tilcon {
		width: 73px;
		height: 44px;
		top: 14px;
		left: 585px;
	}
	
	#rotary {
		width: 70px;
		height: 65px;
		top: 5px;
		left: 0px;
	}
	#qvarc {
		width: 65px;
		height: 62px;
		top: 8px;
		left: 85px;
	}
	#qvctc {
		width: 60px;
		height: 62px;
		top: 8px;
		left: 165px;
	}
	#dkh {
		width: 220px;
		height: 35px;
		top: 8px;
		left: 240px;
	}
	#mda {
		width: 90px;
		height: 30px;
		top: 47px;
		left: 240px;
	}


/* Content Tables, e.g. Materials List */
#materials-list {
	margin-top: 1em;
}
table {
	width: 100%;
	border-collapse: collapse;
	padding: 0;
	margin: 0 0 1em 0;
}
	thead {}
	tbody {}
	tfoot {}
		th, td {
			font-size: 1em;
			line-height: 1.3;
		}
		th {
			color: #97CACA;
			font-weight: bold;
			padding: 0 0 0.3em 0;
			border-bottom: solid 1px #97CACA;
		}
		td {
			padding: 0.3em 5px 0.3em 0;
			border-bottom: solid 1px #ddd;
		}
		.first td {
			padding-top: 0.6em;
		}
		.last td {
			padding-bottom: 0.6em;
			border-bottom: none;
		}
		tfoot td {
			padding: 0.6em 0 0 0;
			border-top: solid 1px #97CACA;
			border-bottom: none;
		}
		
table#holidays {
	width: 40%;
}
	#holidays td {
		border-bottom: none;
	}

/* RFMQ Styles */
form#rfmq_form h4 {
	font-size: 1.09em;
	line-height: 1.2;
	padding: 0 0 0.2em 0;
	border-bottom: solid 1px #97CACA;
	margin: 0 0 0.6em 0;
	color: #97CACA;
}
form#rfmq_form label {
	line-height: 1.5;
}
.material-block {
	border: solid 1px #97CACA;
	padding: 6px 0 6px 6px;
	margin: 0 0 0.8em 0;
}

form .qtyline label {
	width: 20%;
	float: left;
	display: inline;
	margin-right: 1%;
}
form .qtyline select {
	width: 48%;
	float: left;
	display: inline;
	margin-right: 4%;
}
form .qtyline label.qtylabel {
	width: 6%;
}
form .qtyline input {
	width: 8.5%;
	float: left;
	display: inline;
	margin-right: 0;
}
form p.radiobtns {
	padding: 0.6em 0 0.3em;
}
form p.radiobtns label {
	width: 30%;
}
form input.radiobtn {
	width: 1.1em;
	height: 1.1em !important;
	float: left;
	display: inline;
	margin-right: 2%;
}

form .statezip label {
	width: 15%;
	float: left;
	display: inline;
}
form .statezip select {
	width: 17%;
	float: left;
	display: inline;
	margin-right: 6%;
}
form .statezip input {
	width: 37%;
	float: left;
	display: inline;
}
#rfmq_form label {
	color: #006696;
}
#rfmq_form input, #rfmq_form select {
	border: solid 1px #6696C9;
	border-bottom-color: #8ab5e3;
}

form p.fullwidth label {
	float: none;
	display: block;
	width: 100%;
	padding: 0 0 0.3em 0;
	margin: 0;
}
form p.fullwidth textarea {
	float: none;
	display: block;
	width: 100%;
	margin: 0;
}
form p.btnrow {
	padding: 0.3em 0 0 0;
}
#rfmq_form button {
	font-size: 1.1em;
	background: #6698CB;
	border: solid 2px #99C5E8;
	border-bottom-color: #1A3D70;
	border-right-color: #1A3D70;
	color: #fff;
	padding: 1px 6px;
}
			

/* =Footer
----------------------
	Credit/footer styles: Usually the copyright/company info
	Notes:
		Total footer height = 30px (important for calculating background graphics positions)
			Then add 18px for the bottom margin.
---------------------- */
#site-info {
	color: #006696;
	font-size: 1em;
	text-align: center;
	padding: 3px 35px 6px 35px;
}
	#site-info-legal { /* Usually the copyright notice */
		line-height: 1.5;
	}
	#site-info-links { /* Usually Terms, Privacy and Accessibility */
		line-height: 1.5;
	}
	#site-info a, #site-info a:link, #site-info a:visited {
		color: #006696;
		text-decoration: none;
	}
	#site-info a:hover, #site-info a:active {
		color: #000;
		text-decoration: underline;
	}

/* =Uni
----------------------
	Universal styles: Styles that apply to elements found throughout the site
	Notes:
		The best example of this is the "clear" div
---------------------- */
.clear {clear: left}
.clear-right {clear: right}
.clear-both {clear: both}

.bold {font-weight: bold}
.em {font-style: italic}

.align-left {text-align: left}
.align-right {text-align: right}

.xspt { /* "extra space top" */
}
.xspb {
	margin-bottom: 0.7em;
}
.spacer1 {
	height: 2em;
}