/*
Theme Name: Laari Construction
Theme URI: http://laari.fuelmultimedia.ca
Description: Construction Industrial Theme
Version: 1.0
Author: Fuel Multimedia
Author URI: http://fuelmultimedia.ca
Tags: construction industrial waste
*/

/***********************************
*  CSS Global Reset
************************************/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}


/***********************************
*  Global WordPress and Theme Styles
************************************/

body {
	background: #000;
	font: 13px/20px Arial, Helvetica, Sans-Serif;
	color: #333;
}

#wrapper {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
}

#content_wrapper {
	background: #fefefe url('img/bg.jpg') repeat-x;
	overflow: hidden;
	padding-bottom: 30px;
}

a {  }

p { margin: 0 0 15px; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 15px; font-weight: normal; font-family: "museo-slab-1","museo-slab-2", Sans-Serif; }

h1 { font-size: 30px; line-height: 31px; margin-bottom: 5px; }
h2 { font-size: 18px; color: #0067b6; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 12px; }

.clear { clear: both; }
.aligncenter { text-align: center; }
.alignleft { float: left; }
.alignright { float: right; }
.edit-this { clear:both; }

/***********************************
*  Header Styles
************************************/

#top {
	height: 470px;
	position: relative;
	font-family: "museo-slab-1","museo-slab-2", Sans-Serif;
}

#top .sitename {
	position: absolute;
	top: 55px;
	left: 40px;
}

#top .top_tab {
	top: 0;
	right: 20px;
	position: absolute;
	background: url('img/top_tab.png') no-repeat;
	width: 121px;
	height: 33px;
	text-align: center;
	line-height: 40px;
}

#top .top_tab a {
	color: #ccc;
	font-size: 14px;
	text-decoration: none;
}

#top nav ul {
	display: block;
	position: absolute;
	top: 92px;
	right: 20px;
}

#top nav ul li {
	display: inline;
}

#top nav li a {
	display: block;
	float: left;
	height: 48px;
	margin: 0 1px;
	padding: 0 15px;
	line-height: 48px;
	background: url('img/menu.png') repeat;
	color: #999;
	text-decoration: none;
	font-size: 14px;
}

#top nav li a:hover, #top nav .current_page_item  a {
	background: url('img/menu_over.png') repeat;
}

#top #portfolio {
	height: 285px;
	padding: 24px 23px;
	width: 914px;
	background: url('img/header_bg.png') no-repeat;
	position: absolute;
	bottom: 10px;
}

#portfolio .construction, #portfolio .varco, #portfolio .renewaste, #portfolio .renewableenergy, #portfolio .mining {
	width: 265px;
	padding: 13px 30px;
	height: 67px;
	background: url('img/header_area_bg.jpg') no-repeat;
}

#portfolio a {
	text-decoration: none;
}

#portfolio h2 {
	font-size: 22px;
	color: #88b9f3;
	margin-bottom: 4px;
}

#portfolio p {
	color: #fff;
	font-size: 12px;
	line-height: 14px;
	margin-bottom: 4px;
}

#portfolio .varco h2 {
	color: #ff9f16;
}

#portfolio .renewableenergy h2 {
	color: #bfd730;
}

#portfolio .mining h2 {
	color: #ec4a43;
}

#portfolio .pictures {
	top: 24px;
	right: 26px;
	position: absolute;
	width: 586px;
	height: 282px;
}

#portfolio .pictures img {
	z-index: 400;
	position: absolute;
}

#portfolio .pictures img.active {
    z-index: 1000;
}

#portfolio .pictures img.last-active {
    z-index: 800;
}

#portfolio .construction:hover, #portfolio .current .construction {
	background-position: 0 -94px;
}

#portfolio .varco:hover, #portfolio .current .varco {
	background-position: 0 -188px;
}

#portfolio .renewableenergy:hover, #portfolio .current .renewableenergy {
	background-position: 0 -282px;
}

#portfolio .mining:hover, #portfolio .current .mining {
	background-position: 0 -376px;
}

#portfolio .construction:hover h2, #portfolio .current .construction h2 {
	color: #fff;
}

#portfolio .varco:hover h2, #portfolio .current .varco h2 {
	color: #fff;
}

#portfolio .renewableenergy:hover h2, #portfolio .current .renewableenergy h2 {
	color: #fff;
}

#portfolio .mining:hover h2, #portfolio .current .mining h2 {
	color: #fff;
}


/***********************************
*  Content Styles
************************************/

#content {
	width: 555px;
	float: right;
	margin: 20px 15px 20px 0;
}

#content a {
	text-decoration: none;
	color: #333;
	border-bottom: 1px solid #333;
}

#content a:hover {
	border: 0;
}

#content small {
	font-size: 11px;
}

#content ul {
	padding: 0 0 20px 25px;
	margin: 0;
}

.blue_box {
	background: #d8e5f1;
	overflow: hidden;
	padding: 20px;
	color: #0f2840;
}

.blue_box a {
	color: #0f2840;;
}

.green_box {
	background: #f4f8dd;
	overflow: hidden;
	padding: 20px;
	color: #494d32;
	margin-bottom: 20px;
}

.left_box {
	width: 265px;
	float: left;
	margin-right: 20px;
}

.right_box {
	width: 225px;
	float: right;
}

#content iframe {
	margin-top: 20px;
	border: 1px solid #999;
}

/***********************************
*  Aside Styles
************************************/

#left {
	width: 280px;
	padding: 30px 20px 30px 40px;
	margin-left: 10px;
	float: left;
	background: #fefefe url('img/sidebar_bg.jpg') repeat-x;
	font-size: 14px;
}

#left .s {
	background: url('img/search_bg.png') repeat;
	border: 1px solid #ccc;
	width: 220px;
	font-size: 13px;
	padding: 2px 4px;
	margin-right: 5px;
}

#left form {
	margin: 0 0 20px 0;
}

#left br {
	line-height: 24px;
}

#left h4 {
	font-size: 21px;
	margin: 25px 0 4px 0;
}

#left h5 {
	font-size: 14px;
	color: #0067b6;
}

#left a.sidemenu {
	text-decoration: none;
	color: #333;
}

#left a.sidemenu:hover, #left a.active {
	font-weight: bold;
}


/***********************************
*  Footer Styles
************************************/

#site_info_wrap {
	clear: both;
	background: url('img/site_info_bg.jpg');
}

#site_info {
	width: 940px;
	margin: 0 auto;
	padding: 30px 0;
	color: #999;
	overflow: hidden;
}

#site_info a {
	color: #999;
	text-decoration: none;
}

#site_info a:hover {
	color: #ccc;
}

#site_info h5 {
	font-size: 18px;
	color: #ccc;
	margin-bottom: 10px;
}

#site_info ul {
	list-style: none;
}

#site_info ul li {
	border-bottom: 1px dotted #777;
	padding: 12px 0 4px 0;
	font-size: 14px;
}

.about_us_column, .our_services_column, .contact_us_column {
	width: 140px;
	float: left;
	margin: 0 20px;
}

.message_form {
	float: right;
	margin-right: 50px;
}

.message_form p {
	margin-bottom: 5px;
}

.message_form input[type="text"],input[type="email"], textarea {
	width: 300px;
	background: #3b3b3c;
	border: 1px solid #555;
	padding: 4px;
	font-family: Tahoma, Sans-Serif;
	font-size: 12px;
	color: #ccc;
}

.message_form textarea {
	height: 50px;
}

.message_form .wpcf7-submit {
	float: right;
	font-size: 11px;
	color: #fff;
	background: #5f5f5f;
	padding: 4px 25px;
	border: 0;
	cursor: pointer;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	font-weight: bold;
}

#footer_wrap {
	background: #000;
}

#bottom {
	clear: both;
	width: 920px;
	margin: 0 auto;
	height: 44px;
	line-height: 40px;
	font-size: 11px;
	color: #999;
}

#bottom a {
	color: #999;
	text-decoration: none;
}