@charset "UTF-8";
/* CSS Document. TREBOR DESIGN STYLE SHEET */

/* =Generic
-------------------------------------------------------------- */

#dark {
	background-color: #53534a;
}
#light {
	background-color: #fff;
}
*, ul, ul li {
	margin: 0;
	padding: 0;
}
#wrapper {
	position: relative;
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
a img {
	border:none;
	margin: 0;
	padding: 0;
}

/* =Header
-------------------------------------------------------------- */

#header {
	position: relative;
	height: 70px;
}
.logo {
	padding: 19px 0px 19px 20px;
}
.logo a {
	background: url(images/worksmart_logo.png) no-repeat top left;
	width:287px;
	height: 32px;
	display: block;
}
#light .logo a {
	background: url(images/worksmart_logo_light.png) no-repeat top left;
}
.logo a:hover {
	background: url(images/worksmart_logo_active.png) no-repeat top left;
}
#light .logo a:hover {
	background: url(images/worksmart_logo_active_light.png) no-repeat top left;
}
.strap {
	position: absolute;
	top: 28px;
	right:24px;
	text-align: right; 
	color: #8a8a83;
}

/* =Nav
-------------------------------------------------------------- */

#nav {
	width:956px;
	height: 175px;
	margin:0px 20px;
	padding:0px;
	border-top: 1px solid #ccc;
}
#nav li {
	float: left;
	width: 191px;
	margin: 0px;
	list-style: none;
	position: relative;
	border-bottom: 1px solid #53534a;
}
/* bottom border on light back pages  */
#light #nav li {
	border-bottom: 1px solid #fff;
}
/* first level list on light back pages  */
#light #nav ul li a {
	color: #070706;
}
/* left border to top level lists  */
#nav ul li a {
	border-left: 1px solid #ccc;
	padding: 3px 0px 0px 10px;
	display: block;
}
/* right border to last top level list  */
#nav ul li:last-child {
	border-right: 1px solid #ccc;
}
/* no borders to all other last child lists  */
#nav ul ul li:last-child, #nav ul ul ul li:last-child, #nav ul ul ul ul li:last-child  {
	border:none;
}
/* no borders to all other lists  */
#nav ul ul a {
	border: none;
}
/* colour of 2nd level list items  */
#nav ul ul a, #nav ul ul ul a, #nav ul ul ul ul a {
	color: #8a8a83;
}
/* colour of 2nd level list items on light back pages  */
#light #nav ul ul a, #light #nav ul ul ul a, #light #nav ul ul ul ul a {
	color: #8a8a83;
}
/* links change when list item is hovered  */
#nav li:hover a {
	color: #fff;
	text-decoration: none;
}
/* links change when list item is hovered on light back pages  */
#light #nav li:hover a {
	color: #070706;
}
/* hover effect for all list items  */
#nav ul a:hover {
	color: #070706;
	text-decoration: none;
}
/* hover effect for all list items on light back pages  */
#light #nav ul a:hover {
	color: #8a8a83;
}
/* highlighted sections background colour  */
#nav ul ul li:hover, #nav ul ul ul a, #nav ul ul ul ul a {
	background-color: #787871;
	color: #070706;
	text-decoration: none;
}
/* highlighted sections background colour on light back pages  */
#light #nav ul ul li:hover, #light #nav ul ul ul a, #light #nav ul ul ul ul a {
	background-color: #dddddb;
}
/* background colour of contact link  */
#nav ul li:last-child a:hover {
	background-color: #787871;
}
/* background colour of contact link on light back pages  */
#light #nav ul li:last-child a:hover {
	background-color: #dddddb;
}
/* space above top of 2nd level lists  */
#nav ul ul {
	margin: 5px 0px 0px 0px;
}
#nav ul ul ul {
	margin: 0px;
	z-index: 200;
}
/* text-decoration for first level list  */
#nav ul li a {
	text-decoration: underline;
}
/* no text-decoration for 2nd level list  */
#nav  ul ul li a {
	text-decoration: none;
}
/* position of 2nd and 3rd levels  */
#nav ul ul ul, #nav ul ul ul ul {
	position: absolute;
	top: 0px;
	left: 191px;
	display: none;
	border-left: 1px solid #53534a;
}
/* left border of 2nd and 3rd levels on light back pages  */
#light #nav ul ul ul, #light #nav ul ul ul ul {
	border-left: 1px solid #fff;
}
#nav ul ul li:hover ul {
	display: block;
}
#nav ul ul li:hover ul ul {
	display: none;
}
#nav ul ul ul li:hover ul {
	display: block;
}

/* =Generic Content
-------------------------------------------------------------- */

#content {
	position: relative;
	min-height: 415px;
	width: 1000px;
	padding-top: 20px;
}

/* =Homepage Content
-------------------------------------------------------------- */

.image_display {
	margin-top: -20px;
	height: 415px;
	width: 1000px;
}
.image_display img {
	border: 1px solid #53534a;
	border-collapse:collapse;
	float: left;
}
.image_display a img  {
	-khtml-opacity:1; 
	-moz-opacity:1; 
	-ms-filter:”alpha(opacity=100)”; 
	filter:alpha(opacity=100); 
	opacity:100;
}
.image_display a:hover img  {
	-khtml-opacity:.30; 
	-moz-opacity:.30; 
	-ms-filter:”alpha(opacity=30)”; 
	filter:alpha(opacity=30); 
	opacity:.30;
}
.home_slideshows  {
	width: 243px;
	height:137px;
	background-color: #53534a;
	border: 1px solid #53534a;
	border-collapse:collapse;
	float: left;
}

/* =Info Template Content
-------------------------------------------------------------- */

.info_text_container {
	padding: 10px 0px 0px 10px;
	width: 360px;
	margin: 0px 0px 0px 20px;
	z-index: 100;
	position: relative;
}
.info_image_container {
	position: absolute;
	top: 0px;
	left: 20px;
	height: 415px;
	width: 960px;
}

/* =Contact Template Content
-------------------------------------------------------------- */

.contact_form_container {
	position: absolute;
	top: 10px;
	left: 596px;
	width: 340px;
	padding: 30px 0px 0px 0px;
}
.formBlockSurveyTable label {
	display: block;
	padding: 3px 0px;
}
.formBlockSurveyTable input[type="text"], .formBlockSurveyTable input[type="email"], .formBlockSurveyTable input[type="tel"] {
	width: 265px;
	height: 22px;
	margin-bottom: 10px;
	background-color: #dddddb;
	border: none;
}
.formBlockSurveyTable textarea {
  	width: 300px;
	height: 44px;
	margin-bottom: 10px;
	background-color: #dddddb;
	border: none;
}
.formBlockSurveyTable input[type="submit"] {
	height: 20px;
	margin: 0px 0px 5px 5px;
	float: right;
}
.formBlockSurveyTable input[type="text"]:hover, .formBlockSurveyTable input[type="email"]:hover, .formBlockSurveyTable input[type="tel"]:hover, .formBlockSurveyTable textarea:hover {
	background-color: #fff;
}

/* =Case Studies Template Content
-------------------------------------------------------------- */

.case_text_container {
	background-color: #fff;
	-khtml-opacity:.80; 
	-moz-opacity:.80; 
	-ms-filter:”alpha(opacity=80)”; 
	filter:alpha(opacity=80); 
	opacity:.80;
	width: 320px;
	margin: 0px 0px 0px 20px;
	padding: 10px 10px 30px 10px;
	color:#070706;
	z-index: 100;
	position: relative;
}
.case_slide_container {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 415px;
	width: 1000px;
	background-color: #43433b;
	margin: 0;
	padding: 0;
}

/* =Products Template Content
-------------------------------------------------------------- */

.product_text_container {
	width: 320px;
	margin: 0px 0px 0px 20px;
	padding: 10px 10px 30px 10px;
	color:#070706;
	float:left;
}
.product_slideshow_container {
	width:580px;
	background-color: #fff;
	margin: 0px 20px 0px 380px;
}

/* =Product Category Template Content
-------------------------------------------------------------- */

.product_category_text_container {
	width: 940px;
	margin: 0px 0px 0px 20px;
	padding: 10px 10px 0px 10px;
	color:#070706;
}
.image1, .image2, .image3, .image4, .image5, .image6, .image7, .image8 {
	width: 230px;
	margin:0px 0px 0px 20px;
	color:#070706;
	float:left;
}
#category_images img {
	width: 230px;
	height: 150px;
}
#category_images a img {
	border: 1px solid #fff;
}
#category_images a:hover img {
	border: 1px solid #070706;
}

/* =Clients Template Content
-------------------------------------------------------------- */

.logo_container {
	height: 415px;
	width: 960px;
}
.logo_container a img {
	-khtml-opacity:1; 
	-moz-opacity:1; 
	-ms-filter:”alpha(opacity=100)”; 
	filter:alpha(opacity=100); 
	opacity:100;
	border: 1px solid #fff;
}
.logo_container a:hover img {
	-khtml-opacity:.50; 
	-moz-opacity:.50; 
	-ms-filter:”alpha(opacity=50)”; 
	filter:alpha(opacity=50); 
	opacity:.50;
	border: 1px solid #070706;
}
.logo_wrap {
	height: 415px;
	width: 960px;
	margin: 0px 20px;
}


/* =footer
-------------------------------------------------------------- */

#footer {
	clear: both;
	margin: 80px 20px;
	color: #b0b0aa;
}
#footer a, #light #footer p a {
	text-decoration: none;
}
#footer a, .product_slideshow_container a, .case_slide_container a {
	color: #b0b0aa;
}
#light #footer {
	color: #8a8a83;
}
#light #footer a {
	color: #8a8a83;
}
#footer a:hover, #light #footer a:hover, .product_slideshow_container a:hover, .case_slide_container a:hover {
	color: #070706;
}


/* =Image Preload
-------------------------------------------------------------- */

.preload { 
	display: none; 
}