/*
Theme Name: clarionrubber
Theme URI: http://www.clarionrubber.com
Description: Clarion Rubber Theme - 12/17/2009
Version: 1.0
Author: Brandon Sorg
Author URI: http://www.brandonsorg.com
Tags:
*/

/*****************************************************

	clarionrubber.com - style.css

*****************************************************/

/* IMPORTS */
@import url("lib/css/reset.css");


/* MAIN / LAYOUT
----------------------------------------------- */
body {
	background-color: #fff;
	color: #000;
	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
	font-size: 13px; line-height: 15px;
	}

#container {
	width: 950px; margin: 20px auto;
	position: relative; /* helps with positioning of elements below and z-index */
}

#header {  }

#content { margin: 25px 0 15px 0; clear: both; position: relative; }

#footer { font-size: 15px; line-height: 18px; color: #ca3f1f; text-align: center; }


/* NAVIGATION
----------------------------------------------- */
.nav { float: left; margin: 19px 0 0 30px; font-size: 15px; color: #ca3f1f; text-transform: lowercase; }
.nav ul { list-style-type: none; width: 170px; }
.nav li { line-height: 24px; position: relative; }
.current_page_item { font-weight: bold; }


/* HEADERS
----------------------------------------------- */
#header h1 { float: left; margin: 0 0 0 160px; }
#header h1 a { /* for image/text replacement */
	text-indent: -5000px;
	background: #fff url(lib/imgs/logo.jpg) no-repeat;
	width: 411px; height: 112px; display: block;
}

#home h2 { font-size: 26px; line-height: normal; color: #ca3f1f; font-weight: bold; text-align: center; }

h1 {  }
h2 { font-size: 26px; line-height: normal; color: #f8c958; font-weight: bold; text-align: center; margin: 0 0 5px 0; }
h3 { font-size: 15px; font-weight: bold; }
h4 {  }


/* LINKS
----------------------------------------------- */
a { color: #ca3f1f; text-decoration: none; }
a:hover { color: #555; text-decoration: none; }


/* TYPOGRAPHY / STYLING
----------------------------------------------- */

/* PARAGRAPHS */
p {  }

/* LISTS */
ul { }
li { }


/* INDIVIDUAL PAGES
----------------------------------------------- */

/* HOME */
#home #content img { margin-top: 15px; position: relative; left: 50%; margin-left: -400px; width: 800px; /* centers image on front page */ }

/* PRODUCT-LIST */
#product-list #productWrapper { position: relative; margin: 35px 0 0 0; z-index: 10; }

.product { float: left; width: 285px; margin-left: 25px; margin-bottom: 25px; }

.product img {
	float: left; clear: both;
	/* max-height: 180px; max-width: 75px; was controlling here but the magic fields panel setting is now */
	}
	
.product .productInfo {
	float: right; width: 200px;
	font-size: 12px;
	}

.product h3 {
	float: right; width: 200px;
	margin: 0 0 5px 0;
	}

#productLines { /* create the lines between the products */
	position: absolute; left: 316px;
	height: 100%;
 	width: 315px;
	border-left: 1px solid #777;
	border-right: 1px solid #777;
	z-index: -1;
	}



/* PRODUCT-USES */
#product-uses #content { min-height: 566px; } /* height of tallest img, 566 the right */
#product-uses #productUses { color: #ca3f1f; text-align: center; margin: 35px 0 35px 0; font-size: 22px; }
#product-uses #productUses h2 { margin: 0 0 30px 0; }
#product-uses #productUses ul { margin: 10px 0 35px 0; font-size: 18px; }
#product-uses #productUses li { margin: 0 0 10px 0; }

img#productUses-left { position: absolute; top: 0px; left: 0px; }
img#productUses-right { position: absolute; top: 0px; right: 0px; }

/* RAW-MATERIAL-CONTENT */
#raw-material-content #content { min-height: 500px; }
div#rawMaterialContent ul { color: #ca3f1f; font-size: 18px; line-height: 25px; margin: 60px 0 0 0; text-align: center; }

img#rawMaterialContent-left { position: absolute; top: 60px; left: 40px; }
img#rawMaterialContent-right { position: absolute; top: 60px; right: 40px; }


/* MISC
----------------------------------------------- */
.pageinfo { text-align: center; margin: 0 0 20px 0; font-size: 15px; color: #ca3f1f; }

/* SELECTIONS */
::-moz-selection {background: #f8c958; color: #fff;}
::selection {background: #f8c958; color: #fff;}


/* CLASSES
----------------------------------------------- */
.clear { clear: both; height: 0px; line-height: 0px; }
.errorPage { margin: 60px 0 200px 0; }
strong { font-weight: bold; }
em { font-style: italic; }