/*   
Theme Name: Exlar Tritex microsite general site stylesheet
Description: Standard Style sheet for Tritex microsite.
Author: David Souza
Version: 1.0

   COLORS
   Background: 		#25080c
   Content Header: 	#7a2531
   Content Copy:	#000
   Anchor Hover:    #7a2531
   

   TABLE OF CONTENTS
   TYPOGRAPHY
	Global
	Header
	Nav
	Content
	Left Column
	Footer
	
   LAYOUT
	Global
	Header
	Nav
	Content
	Left Column
	Footer
*/


/*	=TYPOGRAPHY: Global
	------------------------------------------------------ */
body {
	font: 12px/1 Arial, sans-serif;
}

h1, h2, h3, h4, h5 {
	color: #7a2531;
	text-transform: uppercase;
}

h1 { font-size: 2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.2em; }
h5 { color: black; font-size: 1em; }


/*	=TYPOGRAPHY: Nav
	------------------------------------------------------ */
.nav {
	font-family: Arial, sans-serif;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: -.6px;
/*	letter-spacing: .4px;*/
	text-transform: uppercase;
}

.nav a {
	color: black;
	text-decoration: none;
}

.nav a:hover {
	color: #7a2531;
}
	
.nav li {
	text-align: center;
}

.nav li a {
	position: relative;
	top: 13px;
}

.nav li.large {
	text-align: left;
/*	text-indent: 2em;*/
}

.nav li.large a {
	position: relative;
	left: 57px;
	top: 8px;
}

.nav li.large .pull_back {
	position: relative;
	left: -20px;
}

.nav li li a {
	color: #7a2531;
	text-align: left;
}

.nav li li a:hover {
	color: white;
}


/*	=TYPOGRAPHY: Content
	------------------------------------------------------ */
.content h1, 
.content h2, 
.content h3, 
.content h4, 
.content h5 {
	margin: 1em 0 .5em;
}

.content p {
	margin: 0 0 .5em;
	line-height: 1.3em;
}

.content .caption {
	font-size: 11px;
	font-style: italic;
	font-weight: bold;
}


/*	=TYPOGRAPHY: Footer
	------------------------------------------------------ */
.footer {
	color: #959595;
	font: bold 11px/1 Arial, sans-serif;
}

.footer a {
	color: black;
}

.footer a:hover {
	color: #7a2531;
}

.footer ul {
	text-transform: uppercase;
}


/*	=LAYOUT: Global
	------------------------------------------------------ */
body {
	background: #25080c url('../site_images/background.jpg') center top no-repeat;
}	

#page_wrapper {
	background: white;
	width: 960px;
	margin: 0 auto;
}

.float.right {
	float: right;
}

.float.left {
	float: left;
}

.clear {
	clear: both;
}

.centered {
	margin: inherit auto;
}

.push.down {
	margin-top: 2em !important;
}

.push.up {
	margin-top: -2em !important;
}

.half_width {
	width: 44%;
	margin-left: 3%;
	margin-right: 3%;
}

.third_width {
	width: 27.2%;
	margin-left: 3%;
	margin-right: 3%;
}

.quarter_width {
	width: 19%;
	margin-left: 3%;
	margin-right: 3%;
}



/*	=LAYOUT: Header
	------------------------------------------------------ */
.header {
	background: url('../site_images/header_background.jpg') no-repeat;
	position: relative;
	height: 270px;
}

.logo_tritex {
	background: url('../site_images/logo_tritex.png') no-repeat;
	position: absolute;
	right: 0;
	top: 34px;
	width: 960px;
	height: 228px;
	text-indent: -5000px;
}

.tagline_simplify {
	background: url('../site_images/tagline_simplify.png') no-repeat;
	position: absolute;
	left: 31px;
	top: 28px;
	width: 453px;
	height: 20px;
	text-indent: -5000px;
}

.tagline_tritex {
	background: url('../site_images/tagline_tritex.png') no-repeat;
	position: absolute;
	left: 31px;
	top: 185px;
	width: 646px;
	height: 59px;
	text-indent: -5000px;
}


/*	=LAYOUT: Nav
	------------------------------------------------------ */
.nav {
	background: url('../site_images/nav_background.png') no-repeat;
	position: relative;
	width: 960px;
	height: 89px;
	margin-bottom: -46px;
	z-index: 10;
}

.nav ul {
	padding-left: 10px;
}

.nav li {
	background: url('../site_images/shape_transparent.png') no-repeat;
	position: relative;
	float: left;
	width: 167px;
	height: 37px;
	margin-right: -57px;
	z-index: 1;
}

.nav li:hover {
	background-image: url('../site_images/shape_solid.png');
}

.nav li ul {
	background: transparent url('../site_images/submenu_top.png') no-repeat;
	position: absolute;
	left: -9px;
	top: 25px;
	padding-top: 16px;
	display: none;
	z-index: -1;
}

.nav li:hover ul {
	display: block;
}

.nav li li {
	background: transparent url('../site_images/submenu_item.png') no-repeat;
	position: relative;
	float: none;
	height: 8px;
	margin: 0;
	padding: 6px 0 0;
}

.nav li li:hover {
	background-image: url('../site_images/submenu_item.png');
}

.nav li li .sub_wrapper {
	position: relative;
	float: right;
	width: 50px;
}

.nav li li a {
	background: white;
	position: absolute;
	left: 0;
	top: 0;
	width: 200px;
	padding: 1px;
	border: 1px solid #7a2531;
	display: block;
}

.nav li li a:hover {
	background: #7a2531;
}

.nav li li.item1 { width: 90px; left: -40px; }
.nav li li.item2 { width: 120px; left: -70px; }
.nav li li.item3 { width: 150px; left: -100px; }
.nav li li.item4 { width: 180px; left: -130px; }


/*	=LAYOUT: Main
	------------------------------------------------------ */
.main {
	position: relative;
	margin-bottom: 20px;
/*	padding-bottom: 20px;*/
	overflow: hidden;
}


/*	=LAYOUT: Left Column
	------------------------------------------------------ */
.left_column {
	background: url('../site_images/left_column_shape.gif') 0 10px repeat-y;
	position: relative;
	float: left;
	width: 240px;
	height: 100%;
	margin-left: 10px;
	margin-bottom: -32000px;
	padding-bottom: 32000px;
}


/*	=LAYOUT: Content
	------------------------------------------------------ */
.content {
	position: relative;
	float: right;
	width: 690px;
	padding-top: 40px;
	padding-right: 20px;
	overflow: visible;
}

.content ul {
	list-style: disc inside;
}

.content li {
	margin-bottom: .3em;
}

.content ul ul {
	margin-top: .3em;
	margin-left: 2em;
	margin-bottom: 1em;
	list-style: circle inside;
}

.content img {
	margin-top: 2em;
	margin-bottom: 2em;
	display: block;
}

.content img.float {
	margin-top: 0;
}

.content img.float.right {
	margin-left: 2em;
}

.content img.float.left {
	margin-right: 2em;
}

.content img.home {
	margin-right: -20px;
}

.content .caption {
	clear: both;
	margin-top: -1.5em;
}

.content .spaced_image {
	margin-left: -100%;
	margin-bottom: -100%;
}

.content .spacer {
	float: right;
	clear: right;
	height: 24px;
}

.content .spacer1 { width: 160px; }
.content .spacer2 { width: 180px; }
.content .spacer3 { width: 210px; }
.content .spacer4 { width: 240px; }
.content .spacer5 { width: 240px; }
.content .spacer6 { width: 280px; }
.content .spacer7 { width: 320px; }
.content .spacer8 { width: 320px; }
.content .spacer9 { width: 320px; }
.content .spacer10 { width: 370px; }
.content .spacer11 { width: 370px; }


/*	=LAYOUT: Footer
	------------------------------------------------------ */
.footer {
	position: relative;
	clear: both;
	margin: 2em -20px 1em 0;
	padding-top: 2em;
	border-top: 2px solid #25080c;
}

.footer ul li {
	background: url('../site_images/footer_divider.gif') 4px 0 no-repeat;
	float: left;
	height: 15px;
	padding-top: 1px;
	padding-left: 16px;
	list-style: none;
}

.footer ul li.first {
	background: none;
	padding-left: 0;
}

.footer .exlar_wrapper {
	background: white;
	position: absolute;
	top: 5px;
	clear: both;
	left: -240px;
	width: 240px;
	margin-bottom: -32000px;
	padding-bottom: 32000px;
}

.footer .logo_exlar {
	position: absolute;
	top: -88px;
}


/*	=WIDGET: Sitemap
	------------------------------------------------------ */
.sitemap {
	list-style: none !important;
	font-weight: bold;
}

.sitemap ul {
	list-style: disc !important;
}

.sitemap a {
	color: black;
}

.sitemap a:hover {
	text-decoration: none;
}

.sitemap a:visited {
	color: #7a2531;
}


/*	=WIDGET: Table
	------------------------------------------------------ */
table {
	width: 100%;
	margin-bottom: 2em;
}	

table, tr, th, td {
	background: #e1e2e2;
	padding: 3px 5px;
	border: 1px solid #999;
	vertical-align: middle;
	text-align: center;
}

table thead th {
	background: #7a2531;
	border-color:  #7a2531;
	color: white;
	text-transform: uppercase;
}

table .color_text {
	color: #7a2531;
}

table sup {
	position: relative;
	top: -.4em;
	font-size: .7em;
}

table .data td,
table .data th,
table td.data,
table th.data {
	background: white;
}

table .label td,
table .label th,
table td.label,
table th.label {
	background: #e1e2e2;
}

table .left td,
table .left th,
table td.left,
table th.left {
	padding-left: 5px;
	text-align: left;
}

table .right td,
table .right th,
table td.right,
table th.right {
	padding-right: 5px;
	text-align: right;
}

table .common_width {
	float: left;
	width: 50%;
	margin-right: 5%;
	display: block;
}