/**********************************************************************
	
	STYLE.CSS
	==========
 	Main project specific styles.
	
	Vision Through Communication
	www.fueldesign.co.nz	
	
	Contents:
	==============
	1 - Default typography
	2 - Global Styles
	3 - Main Layout Divs
	4 - Form Styling

************************************************************************/
	
@import url("basic.css");
@import url("forms.css");
@import url("tooltip.css");
@import url("menu.css");

/***********************************************************************
1 - DEFAULT TYPOGRAPHY
************************************************************************/
* { font-family:Trebuchet MS, Trebuchet, Verdana, Geneva, Arial, Helvetica, sans-serif; color:#666; line-height:1.725em; }

/*body { background:url("/images/color.jpg") no-repeat fixed center top transparent; font-size:14px; min-width:740px; text-align:center; }*/
body { font-size:14px; height:100%; margin:0; padding:0; text-align:center;  background: url(../images/color2.jpg) no-repeat top center; background-size: 100%; background-attachment:fixed; background-color:#5D9D2D;}

a:link, a:visited { color:#666; }

a:hover { text-decoration:none; }

/***********************************************************************
2 - GLOBAL STYLES
************************************************************************/

/*
#background {
    width: 100%;
    background-color:#5A9C2E;
    height:auto !important; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1;
    margin:0; padding:0;
}

.stretch {
    width:100%;
   	height:100%;
    margin:0; padding:0;
    background-color:#5A9C2E;
}
*/



#placeholder, #sidebar img, #logo, .thumb { background-image:url(../images/loading.gif); background-position:top left; background-repeat:repeat; }

p, ul { margin:1em 0; }

h1 { font-size:30px; color:#005373; line-height:38px; font-weight:normal; }

#content #wrap p { }

p.leadin { color: #50064B;font-size: 17px;line-height: 1.5em;margin: 14px 0;}

#contactContainer h5, label { text-transform:uppercase; font-weight:bold; margin-bottom:0; }

blockquote p, .help { background-color:#F0F0F0; color:#005373; padding:1em; border-top:1px dotted #ccc; border-bottom:1px dotted #ccc; }

.button { width:95px; height:24px; line-height:24px; background-image:url(../images/button.gif); background-position:top left; background-repeat:no-repeat; display:block; margin-top:1em; }

a:visited.button, a:link.button, input.button { color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; padding:0 1em; }

a:hover.button, .button:hover { background-position:0 -24px; }

.clearer { clear:both; }

.rightAlign { float:right; }

.border { border:1px solid #ccc; box-shadow:2px 2px 10px #666666; -moz-box-shadow:2px 2px 10px #666666; -webkit-box-shadow:box-shadow:2px 2px 10px #666666;}

/***********************************************************************
3 - MAIN LAYOUT DIVS
************************************************************************/
#container { z-index:1; background-color: rgba(255, 255, 255, 0.7); padding-top:1px; margin:15px auto 0 auto; text-align:left; width:980px; -moz-box-shadow:0 0 12px #0C3201; -webkit-box-shadow:0 0 12px #0C3201; box-shadow:0 0 12px #0C3201;
					}

#featWorkContainer { background-color:#DFDFDF; background-image:url("../images/dot_white.gif"); background-position:right bottom; background-repeat:no-repeat; clear:both; height:78px; margin:0 1px; position:relative; width:978px; border-top:1px solid #ededed; }

#header { background-color:#999; height:250px; margin:0 1px; width:978px; }

#utility-menu { width:980px; height:30px; padding:0; margin:10px auto 0 auto; position: relative; }

#mainNav { margin:0 1px; border-top:1px solid #a9a9a9;position:relative; width:978px; height:38px; }

#content { margin:1em 0 0 0; border-bottom:1px solid #c2c2c2; padding-bottom:50px; }

#sidebar { float:left; width:250px; }

/*************************
3.1 Header
**************************/
#logo { float:left; width:250px; height:250px; }

#BannerSlider { float:right; height:250px; overflow:hidden; width:728px; position:relative; z-index:1; }

#BannerSlider ul { margin:0; padding:0; }

#BannerSlider ul li { list-style:none; margin:0; padding:0; }

#banner-nav { position: absolute; bottom:10px; right:10px; text-align:left; z-index:10; padding:4px 11px; background: rgba( 2, 2, 2, 0.5 ); font-size:12px; }

#banner-nav a { float: left; background: #999; color:white; padding:0 5px; margin-right:6px; line-height: 17px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }

#banner-nav a.activeSlide, #banner-nav a:hover { background:#c5e6f2; color:#005373; }

/* Menus in menu.css */
#search-the-site { position:absolute; right:5px; top:7px; width:210px; height:24px; line-height:24px; overflow:hidden; }
#site-search, #site-search fieldset 	{ width:210px; height:24px; line-height:24px; overflow:hidden; margin:0; padding:0; position:relative;  }
/* #site-search #search-field { position:absolute; top:0; left:0; margin:0; } */
/*************************
3.2 featured work
**************************/
#h2FeatWork { position:absolute; bottom:30px; left:88px; }

.thumb { display:block; width:78px; height:78px; float:left; }

ul#featWorkThumbs li { display:inline; }

ul#featWorkThumbs { margin:0 0 0 250px; }

ul#featWorkThumbs a { background-color:#005373; display:block; float:left; min-height:78px; min-width:78px; }

ul#featWorkThumbs a:hover img {/*opacity:0.5;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50);*/ }

ul#featWorkThumbs img { border-left:1px solid #fff; }

#featWorkContainer .button { position:absolute; right:0px; bottom:20px; }

/*************************
3.3 Main content
**************************/
#content .wrap { margin:1em; padding-left:1em; }

#content dd, #content dt { margin-top:1em; }

#content dt { font-weight:bold; }

#content a:link, #content a:visited { text-decoration:underline; }

#content a:link.button, #content a:visited.button, #content a:hover.button { text-decoration:none; color:#fff; }

#content a:hover { color:#005373; }

#content li { margin-bottom:1em; }

#content a.get-a-quote, a.get-a-quote { text-decoration: none; color:white; border:0; height:10px; padding:8px 30px 8px 15px; background:url("../images/icons/hand-point.png") no-repeat scroll 98% 53% #006F90; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }

#content a.get-a-quote:hover, a.get-a-quote:hover { border:0; color:white; background:url("../images/icons/hand-point.png") no-repeat scroll 98% 53% #999; }

/* ** Tables */

/* Default Content Table */
#content table { border:1px solid #dfdfdf; border-collapse:collapse; font-size:1.1em; margin:20px 0; width:99%; }

#content table th { background:#005373; border-right:1px solid white; padding:2px 11px; color:white; font-weight:bold; line-height:1.2; text-align:left; border-bottom:1px solid white; }

#content tr.alt td { background:#ecf6fc; }

#content tr:hover, #content tr.alt:hover { background:#ccc; }

#content td { border-bottom:1px solid #dfdfdf; padding:6px 11px; vertical-align:top; }

/* Custom Tables */
#content tr td.table-price, #content tr.alt td.table-price { border-left:1px solid white; background:#b8b7b7; color:white; }

#content tr:hover td, #content tr.alt:hover td, #content tr.alt:hover td.table-price { background:#f0f0f0; }

#content td.table-price:hover, #content tr.alt td.table-price:hover { color:#999; }

/* Hints Table */
#content table.hints td { background:#e5dae1; border-bottom:1px solid white; }

#content table.hints td.header { background:#50064b; color:white; }

#content table.hints td.title { background:#946D92; color:white; }

/* Search Results */
.search-results { margin-top:20px; }

.search-results h3 { font-size:16px; }

.search-results p { margin-top:5px; }

.search-results img { display:inline; }

.search-result { padding-bottom:5px; border-bottom:1px dotted #ccc; }

/*************************
3.3 Side Bar
**************************/
#sidebar { overflow:hidden; }

#sidebar .wrap { margin:1em; }

#sidebar a:link, #sidebar a:visited { text-decoration:underline; }

#sidebar a:hover { color:#005373; }

.list li { margin-bottom:0; margin-left:2em; list-style-type:circle; }

.services-menu { overflow: hidden; padding-left:0; }

.services-menu h3 { margin-left:12px; font-size:18px; color:#005373; }

.services-menu > div { width:100%%;
}

#content .services-menu ul { margin:5px 0 0 0; padding:0; }

#content .services-menu ul li { list-style: none; margin:0 0 0.075em 0; padding:0; }

.services-menu ul li.selected { }

#sidebar .services-menu ul li a { background-color: #006F90; border-color: #C5E0E9; border-style: solid; border-width: 1px 1px 1px 0; color: white; display: block; margin: 0 0 5px; padding: 2px 0 2px 28px; text-decoration: none; width: 222px; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; }

#sidebar .services-menu ul li a:hover, #sidebar .services-menu ul li.selected a { width:88%; background:#f0f0f0; color:#005373; }

/*************************
3.5 Contact
**************************/
#contactContainer { background-color:#dfdfdf; clear:both; height:180px; margin:0 1px 1px 1px; position:relative; width:978px; border-top:1px solid white; border-bottom:1px solid white; }

#contactDetails { bottom:0; left:0; position:absolute; top:0; width:250px; font-size:11px; }

#contactDetails h6, #contactDetails h5 { font-size:12px; }

#contactUs { border-color:transparent #fff; border-style:none solid; border-width:0 1px; bottom:0; left:250px; position:absolute; top:0; width:364px; }

#contactQuote { bottom:0; position:absolute; right:0; top:0; width:364px; }

#contactContact { bottom:0; position:absolute; right:0; }

.contactBox { }

#contactContainer .wrap { margin:1em; }

#contactDetails .wrap { }

ul#contact-details { margin-bottom:15px; overflow:auto; text-align:left; }

ul#contact-details li { background:#999; font-size:13px; color:white; -moz-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px; margin-bottom:1px; padding:1px 3px; }

ul#contact-details li abbr { font-weight:700; margin:0 2px 0 4px; text-decoration: none; border:0; color:white; }

#contact-page { margin-top:10px; }

#location { margin-top:-10px; border:1px solid #ccc; border-width: 1px 0 1px 0; }

.contact-form { width:400px;  }

/*************************
3.6 Footer
**************************/
#footer { width:980px; margin:5px auto; height:40px; line-height:40px; clear:both; font-size:12px; }

ul#footNav { line-height:30px; text-align:right; margin:0; padding:0; }

#footer li, #footer a:link, #footer a:visited { color:white; }

#footer a:hover { color:#666; }

ul#footNav li { display:inline; }

ul#certificates li { text-align: center; }

ul#certificates li a { margin:0 auto; }

/*************************
3.7 System Message Overides
**************************/
.system-message, .system-error-message { background-color:#f9f9f9; border:1px solid #eee; color:#666; height:auto !important; margin:18px; min-height:110px; padding:15px 15px 25px 15px; }

.system-message h1, .system-error-message h1 { color:#005373; margin:0 0 18px; }

.system-message #content td { border:0 none; padding:3px 0; vertical-align:top; }

/***********************************************************************
4 - FORM STYLING
************************************************************************/
/* see forms.css */

/***********************************************************************
5 - Misc
************************************************************************/
.popup { text-align:left; width:700px; background:none; margin-left:auto; margin-right:auto; margin-top:20px; }

.popup li { margin-bottom:1em; }

.error { color:#005373; }

#gallery li { float:left; margin-left:10px; }

#contactPage dd, #contactPage dl, #contactPage dtx { margin-top:0px; margin-bottom:0px; }

/* clearfix */
.clearfix:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; }

.clearfix { display:inline-block; }

html .clearfix { display:block; }

* html .clearfix { height:1%; }

/* floats */
.left, .float-left { float:left; }

.right, .float-right { float:right; }

/* For CMS / Editor */
p.hints { background:#d0edf9; color:#1a1919; padding:7px 10px 15px 10px }

p.hints strong { color:#18487e; font-size:15px; }