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

	CSS on Sails
	Title: Total Marketing
	Author: XHTMLized (http://www.xhtmlized.com/)
	Date: July 2009

***********************************************************************************************
		
	1. BASE
			1.1 Reset
			1.2 Accessibility Navigation & Hide
			1.3 Clearfix
			1.4 Default Styles
	
	2. LAYOUT
      		2.1 Structure
			2.2 Header
      		2.3 Navigation
			2.4 Content
			2.5 Sidebar
			2.6 Footer		

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


/* 1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/	


/* 1.1	Reset
-----------------------------------------------------------------------------------------------*/	

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
a, ins, del { text-decoration: none; }
table { border-collapse: collapse; border-spacing: 0; }
th, td { vertical-align: top; }
th { text-align: left; }

/* 1.2	Accessibility Navigation & Hide
-----------------------------------------------------------------------------------------------*/	

ol#accessibility-nav, .hide { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; }


/* 1.3	Clearfix
-----------------------------------------------------------------------------------------------*/

#main-content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }


/* 1.4	Default Styles
-----------------------------------------------------------------------------------------------*/	

body { background: #94b6d2 url(../images/body.png) repeat-x top; color: #333; font: 62.5% Arial, Helvetica, sans-serif; text-align: center; }
hr { display: none; }
strong { font-weight: bold; }
em { font-style: italic; }
del { text-decoration: line-through; }
th { font-weight: normal; }
address, cite, dfn { font-style: normal; }
li { list-style: none; }
abbr, acronym { border-bottom: 1px dotted #999; cursor: help; }
input, textarea, select { font-family: Arial, Helvetica, sans-serif; }
a, a:visited { color: #19397F; text-decoration: none; }
a:hover, a:active { color: #19397F; text-decoration: underline; }

h2{ font: 1.642em/1em Georgia, "Times New Roman", Times, serif; font-weight: normal; padding: 10px 0 5px; margin-bottom: 10px; border-bottom: 1px solid #ccc;}
#sidebar h2{ border-bottom: none;}

/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	


/* 2.1	Structure
-----------------------------------------------------------------------------------------------*/	

.container { width: 960px; position: relative; margin: 0 auto; text-align: left; font-size: 1.2em; }
.container-nav{ width: 978px; }
.container-main{ width: 978px; padding-bottom: 18px; background: url(../images/bottom.png) no-repeat 0 bottom; font-size: 1.4em; color: #333; position: relative; z-index: 10;}
.main-wrapper{ padding: 15px 9px; background: url(../images/container_main.png) repeat-y 0 0; }
#top-navigation{ height: 34px; background: #222 url(../images/top.png) repeat-x top; }
#header{
	height: 105px;
	padding-top: 14px;
	padding-bottom: 10px;
}
#navigation{ height: 35px; background: url(../images/nav.png) no-repeat 0 0;}
#main-content{ background: #fff url(../images/grey.png) repeat-y 642px 0;}
#content { width: 580px; float: left; padding-left: 35px; }
#sidebar { width: 250px; float: right; padding-right: 40px; }
#footer { background:#3c3c3c url(../images/footer.gif) top repeat-x; }


/* 2.2	Header
-----------------------------------------------------------------------------------------------*/	

#header .total-marketing{ display: block; overflow: hidden; width: 456px; height: 89px; text-indent: -999em; background: url(../images/logo.png) no-repeat; }
#header .total-university {
	display: block;
	overflow: hidden;
	width: 456px;
	height: 141px;
	text-indent: -999em;
	background: url(../images/TOTAL-University.png) no-repeat;
}
#header .total-3 {
	display: block;
	overflow: hidden;
	width: 456px;
	height: 150px;
	text-indent: -999em;
	background: url(../images/T3-logo.png) no-repeat;
}
#header .total-green {
	display: block;
	overflow: hidden;
	width: 456px;
	height: 122px;
	text-indent: -999em;
	background: url(../images/TOTALly-Green.png) no-repeat;
}

/* 2.3	Navigation
-----------------------------------------------------------------------------------------------*/

#top-navigation li,
#navigation li{ float:left; }

#top-navigation .left{ float: left; }
#top-navigation .left li{ padding: 6px 4px 0 0;}
#top-navigation .right{ float: right; }
#top-navigation .right li{ padding: 6px 0 0 4px;}
#top-navigation a{ float: left; background: #575757; padding: 9px 12px 8px; font-size: .8333em; line-height: 1em; text-transform: uppercase; color: #fff; border-top: 1px solid #686868;}
#top-navigation .current a{ background: #fff; color: #666; border-top: 1px solid #ccc;}

#navigation ul{ width: 960px; overflow: hidden; padding: 2px 9px 0;}
#navigation li{ padding-top: 3px; position: relative; margin-left: -1px;}
#navigation a{ float: left; color: #152e64; padding: 9px 14px 6px 15px; height: 15px; background: url(../images/grey.png) repeat-y left; }
#navigation .first a{ background: none;}
#navigation li.current{ background: #fff url(../images/nav_active_right.png) right top no-repeat; padding-top: 0;}
#navigation li.current a{ background: url(../images/nav_active_left.png) left top no-repeat; padding-top: 12px;}

/* 2.4	Content
-----------------------------------------------------------------------------------------------*/	

.home-banner{ text-align: center; padding: 10px 0;}
#main-content p{ padding-bottom: 20px; line-height: 19px;}
#main-content p.less-padding{ margin-top: -10px; padding-bottom: 10px;}
.button, .button span{ float: left; clear: both; height: 37px;color: #fff; cursor: pointer;}
.button{ background: url(../images/button_right.gif) no-repeat right top; text-transform: uppercase;  text-decoration: none; font-weight: bold;}
.button:hover{ color: #fff; text-decoration: underline;}
.button span{ background: url(../images/button_left.gif) no-repeat left top; height: 15px; line-height: 15px; padding: 11px 15px 11px;}

.image{ margin-bottom: 5px; }
.floatleft {
	float: left;
	padding-right: 10px;
	padding-bottom: 5px;
}

#main-content .staff{ font-size: .857em; padding: 10px; }
#main-content .staff p{ padding-bottom: 15px;}
#main-content .staff li{ width: 100%; position: relative;}

.photo{ width: 139px; height: 159px; padding: 18px 0 0 19px; background: url(../images/photo_frame.png) no-repeat; position: absolute; left: -999em; top: -7px; }
.photo img{ border: 1px solid #999;}
.photo span{ display: block; color:#19397F; font-weight: bold; padding-top: 4px;}

.photos .gallery {
	float: left;
	width: 250px;
	margin-right: 10px;
}
.photos .gallery h2 {
	padding-bottom: 32px;
	font-family: Georgia, 'New York CE', utopia, serif;
	font-size: 22px;
	font-weight: normal;
}
.photos .gallery a {
	float: left;
	border: 1px solid #232323;
	margin: 0 40px 40px 0px;
}
.photos .gallery i {
	display: block;
	padding-top: 7px;
	font-size: 12px;
	color: #666;
}
.blockquote {
	padding: 15px 20px 15px 32px;
	border: 1px solid #F0F0F0;
	background: #e1e0e0 url(../images/quote.gif) no-repeat 12px 12px;
	font-weight: normal;
	line-height: 16px;
}

/* 2.5	Sidebar
-----------------------------------------------------------------------------------------------*/	

.events h2{ padding-bottom: 0;}
.events ul{ padding-bottom: 10px;}
.events li{ padding: 5px 0; border-top: 1px solid #d4d4d4;}
.events li.first{ border: none; }

.dealers h2{ padding-bottom: 0;}
.dealers p{ font-size: .928em;}

.banners li{ padding-bottom: 23px;}

.newsletter{ padding-bottom: 26px; width: 100%; overflow: hidden;}
.newsletter h2{ margin-bottom: 2px;}
input#email{ height: 19px; padding: 6px 7px 0; border: 1px solid #ccc; margin-bottom: 5px; font-size: 11px; color: #333;  }
input.empty{color: #999 !important; font-style: italic;}
.newsletter label{ display: none;}
label {
	display: block;
	padding-top: 5px;
}

/* Form Elements
-----------------------------------------------------------------------------------------------*/	
form {
	padding: 5px 0;
}
form p {
	border-bottom: 1px solid #E6E6E6;
	padding: 12px 0 5px 0;	margin: 0;	
	color: #666666;
}
input, select, textarea {
	margin: 5px 0;
	padding: 5px;
	color: #6A6969;
	border-width: 1px;
	border-style: solid;
  	border-color: #D4D4D4 #EBEBEB #EBEBEB #D4D4D4; 	
	font: 11px 'Lucida Grande', Verdana, Helvetica, sans-serif;
}
.part {
	width:40px;
}
#name, #message, #website  {
	width: auto;
}
input.button {
	font: bold 12px Arial, Sans-serif;
	height: 35px;
	margin: 0;
	padding: 2px 3px;
	color: #FFF;
	width: 100px;
	background-image: url(../images/btn.png);
	background-repeat: repeat-x;
}


/* 2.6	Footer
-----------------------------------------------------------------------------------------------*/

.content-footer{ width: 958px; height: 51px; padding: 39px 0 24px; background: url(../images/bluebox.png) no-repeat 0 15px; position: relative;}
.content-footer p{width: 928px; height: 30px; margin: 0 auto; position: relative; text-align: center;}
.content-footer p span{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url(../images/tagline.png) no-repeat;}

.copyright{ background: #383838 url(../images/footer_line.gif) repeat-x top; color: #6a6a6a; padding: 15px 0 20px; font-size: 1.2em; }
.copyright span{ padding: 0 7px; top: -1px; position: relative;}

#footer .container{ overflow: hidden; padding-top: 37px;}
#footer .col1,#footer .col2,#footer .col3,#footer .col4{ float: left; background: url(../images/footer_separator.gif) no-repeat right top; min-height: 95px;}
#footer .col1{ width: 173px; padding-left: 65px; }
#footer .col2{ width: 177px; padding-left: 59px; }
#footer .col3{ width: 150px; padding-left: 40px; }
#footer .col4{ width: 213px; padding-left: 40px; background: none; }

#footer h3{ color: #fff; height: 18px; position: relative; overflow: hidden; }
#footer h3 span{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-repeat: no-repeat;}
#footer h3.txt-find-out-more{ width: 114px; }
#footer h3.txt-find-out-more span{ background-image: url(../images/ir_find-out-more.gif); }
#footer h3.txt-about-us{ width: 77px; }
#footer h3.txt-about-us span{ background-image: url(../images/ir_about-us.gif); }
#footer h3.txt-stay-in-touch{ width: 103px; }
#footer h3.txt-stay-in-touch span{ background-image: url(../images/ir_stay-in-touch.gif); }
#footer h3.txt-support-center{ width: 127px; }
#footer h3.txt-support-center span{ background-image: url(../images/ir_support-center.gif); }

#footer a{ color: #999; }
#footer a:hover{ color: #93b6d2; }

#footer ul{ padding: 5px 0 20px; }
#footer li{ padding-bottom: 5px; }
.product img  {
	float: left;
	padding-right: 10px;
	padding-bottom: 10px;
}
.product {
	display: block;
	margin: 5px;
	border-bottom: 1px solid #ccc;
}
#comments {
	width: auto;
}