/* CSS by NQ Webdesign 2010 www.nqwebdesign.com */


/* -- IMPORTED STYLESHEETS
----------------------------------------------------------------------------------------------------------*/
@import "reset.css";
@import "typography.css";
@import "common.css";
@import "form.css";
@import "grid24.css";

/* -- DEFAULT
----------------------------------------------------------------------------------------------------------*/
body 
{
	font:12px "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
	background:#19548C url(../images/layout/body.gif) repeat-x 0 0;  
}

a:link {
	color:#00649a;
}
a:visited {
	color:#00649a;
}
a:hover {
	color:#0087D0;
}
#footer a:link {
	color:#B8CED6;
}
#footer  a:visited {
	color:#B8CED6;
}
#footer a:hover {
	color:#FFF;
}



/* -- LAYOUT
----------------------------------------------------------------------------------------------------------*/


div#page { min-width:960px; text-align:center; 	background:url(../images/layout/page.gif) no-repeat 50% 194px;   }
div#page-wrap { margin:0 auto; text-align:left; width:960px; position:relative;  }

div#header, div#main, div#footer, div#intro { clear:both; }

div#header {  }
	
	div#logo-wrap { }
	div#logo { text-align:left; margin:0 auto;  }		
	div#logo h1{ padding:0; margin:0; display:block; line-height:0;}
	div#logo h1 a:hover { background:none; text-decoration:none;}	
		
div#nav{
	padding:8px 0; 
}

div#main { font-size: 14px; color: #555; background:#FFF url(../images/layout/main.gif) repeat-y 0 0; margin-top:36px; }
div#main-wrap { background:url(../images/layout/main-wrap.gif) no-repeat 0 36px;  }
div#main-top { background:url(../images/layout/main-top.gif) no-repeat 0 0;  }
div#main-bottom { background:url(../images/layout/main-bottom.gif) no-repeat 0 100%; padding:45px 0;  }


div#intro { margin-bottom:36px; }

	
	#footer{ padding-top:18px; font-size:12px; color:#D2EBF4;}
	
	#block-footer-contact { text-align: center; margin-bottom:18px;}
	#block-footer-contact strong { margin-left: 12px;}
	#block-footer-contact p { margin:0;}


	
	#block-footer-nav { text-align:right;}
		#block-footer-nav ul { list-style:none; padding:0; margin:0;}
		#block-footer-nav li { list-style: none; display:inline; margin-left:5px; }
	
	
#site-features { background:url(../images/layout/seperator-big.gif) no-repeat 50% 100%; float:left; clear:both; padding:0 15px 9px 15px; margin-bottom:18px; }

#site-features { font-size:12px; font-family:"Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; }
#site-features .columns { width:100%; padding:0; margin:0 0 9px 0; clear:both; }
#site-features .columns .column { width:30%; padding:0; margin:0; }
#site-features .columns .first { margin-right:5%; }
#site-features .columns .last {margin-left:5%;  }


#main #site-features h2 { background-position:0 50%; background-repeat:no-repeat; padding-left:42px; line-height:32px; margin:0 0 8px 0;}

#feature-demo h2{ background-image:url(../images/icons/32x32-movie.gif); }
#feature-facts h2{background-image:url(../images/icons/32x32-exclamation.gif); }
#feature-costs h2 { background-image:url(../images/icons/32x32-calculator.gif);}
#feature-gallery h2{background-image:url(../images/icons/32x32-photo.gif); }
#feature-tips h2{background-image:url(../images/icons/32x32-star.gif); }
#feature-enquiry h2{background-image:url(../images/icons/32x32-contact.gif); }

/* -- INFO BOX
----------------------------------------------------------------------------------------------------------*/

ul.block-list
{
	list-style:none;
	padding:0;
	margin:0;
}

ul.block-list li{ margin:0; padding:0;}
ul.block-list li h2
{
	background-repeat:no-repeat;
	background-position:0 50%;
	padding:0 0 0 42px;
	margin-bottom:10px;
}

ul.block-list #block-sidebar-switch h2{ background-image:url(../images/icons/32x32-switch.gif); line-height:36px;}
ul.block-list #block-sidebar-demo h2{ background-image:url(../images/icons/32x32-movie.gif); line-height:36px; }
ul.block-list #block-sidebar-contacts h2{  background-image:url(../images/icons/32x32-contact.gif); line-height:36px}

/* -- CHECKLIST BLOCK ---------------------------------- */
	ul.checklist
	{
		width:100%;
		padding:0;
		margin:0;
		font-size:12px;
		list-style:square;
		margin-bottom:18px;
		clear:both;
		display:block;
		float:left;
	}
		
	ul.checklist li
	{
		float:left;
		width:400px;
		margin:0 15px 2px 15px;
	}
	

	ul.checklist li.heading
	{
list-style:none;
	}

/* -- INFO BOX
----------------------------------------------------------------------------------------------------------*/

	
.info-box
{
	background:url(../images/layout/sections.gif) repeat-x 0 0;
	border-left:1px solid #E5E2D9;
	border-right:1px solid #E5E2D9;
	border-bottom:1px solid #E5E2D9;
	margin-bottom:18px;
}

.sidebar
{
	float:right;
	width: 200px;
	margin-left:25px;
	padding:36px 30px;
	font-size:12px; color:#7b7b7b;
}


hr
{
	border: none 0; 
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #efefef;
	width: 100%;
	height: 2px;
	margin: 18px auto;
}


/* -- TYPOGRAPHY > HEADINGS, PARAGRAPHS, LISTS
----------------------------------------------------------------------------------------------------------*/

#main h1
{
	font:36px "Myriad Pro", Arial, Helvetica, sans-serif;
	color:#7eba21;
	font-weight:normal;
}
#main h2.sub {
	color:#919191;
	font-size:12px;
	font-weight:normal; 
	font-family: Arial, Helvetica, sans-serif;
	margin-top:-25px; 
	text-transform:uppercase; 	
	letter-spacing:0;
}



#main h2
{
	font:18px Arial, Helvetica, sans-serif;
	font-weight:bold;
	line-height:18px;
	color:#00649a;
	letter-spacing:-0.5px;
	
}


#main h3
{
	font:14px Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform:uppercase;
	line-height:18px;
	color:#000;
}

p.first { color:#1a1a1a; font-size:19px; line-height:29px; }

/* -- TABLES
----------------------------------------------------------------------------------------------------------*/
.tabular-data
{
	border:none;
	border-collapse:collapse;
	border-spacing:0;
	width:100%;
	padding:0;
}


.tabular-data tfoot th
{
	font-weight:normal;
	color:#333;
	text-align: center;
	padding:4px ;
	font-size: 12px;
}

.tabular-data thead th
{
	font:12px Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform:uppercase;
	line-height:18px;
	color:#111;
	text-align: center;
	padding:4px;
	border-bottom:1px solid #E2E2E2;

}
.tabular-data td,
.tabular-data tbody th
{
	border-bottom:1px solid #E2E2E2;
	font-size:12px;
	text-align:center;
	padding:4px;
}
.tabular-data tbody th
{
	text-align: left;
	font-weight: bold;
}

.tabular-data tbody tr.odd
{
	background-color:#F4F4F4;
}

.tabular-data tbody tr.even
{
}


/* -- FORMS
----------------------------------------------------------------------------------------------------------*/


	form { margin-bottom:18px;}
		form ul { list-style:none; margin:0 0 9px 0; }
		form ul.inline li { display:inline; margin-right:15px;}
		form label { font-weight:bold;}
		form fieldset { background:#F4F4F4; border:1px solid #E2E2E2; padding:18px; width:500px;}
	

/* -- MISC.
----------------------------------------------------------------------------------------------------------*/

.img-border,
.img-right,
.img-left
{ background:none; padding:0; border:7px solid #E7E7E7;}



/* -- BUTTONS
----------------------------------------------------------------------------------------------------------*/
body .button, body .button:visited
 {
	background: #d20102 url(../images/common/button-overlay.png) repeat-x 0 -20px;
	display:inline-block;
	padding: 7px 13px 8px 13px;
	color: #fff;
	text-decoration: none;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.45);
	border: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
	clear:both;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	background-image: url(../images/common/button-overlay.png);
}
	body .button:hover	{ background-color: #111; color: #fff; }
	body .button:active	{ top: 1px; }
	
	body .small.button
	{
		border-radius: 11px; 
		-moz-border-radius: 11px; 
		-webkit-border-radius: 11px;
	}
	body .small.button, body .small.button:visited { font-size: 11px; padding: 4px 8px 5px 8px; }

	
	body .button, 
	body .button:visited,body .medium.button, 
	body .medium.button:visited 
	{
		font-size: 13px; 
		font-weight: bold; 
		line-height: 1; 
		text-shadow: 0 -1px 1px rgba(0,0,0,0.25); 
	}
	
	
	body .green.button, body .green.button:visited		{ background-color: #7eba21; color: #222; 	text-shadow: 0 -1px 1px rgba(255,255,255,0.45); }
	body .green.button:hover							{  background-color: #111; color: #fff; text-shadow: 0 -1px 1px rgba(0,0,0,0.45); }

	
	body .silver.button, body .silver.button:visited	{ background-color: #EEE; color: #222; 	text-shadow: 0 -1px 1px rgba(255,255,255,0.45); }
	body .silver.button:hover							{  background-color: #111; color: #fff; text-shadow: 0 -1px 1px rgba(0,0,0,0.45); }


.caption
{
	font-style:italic;
	font-size:12px;
	color:#666;
	text-align:center; display:block; width:100%;
}

body#page-home #nav ul.sfx-menu li#home a,
body#page-capabilities #nav ul.sfx-menu li#capabilities a,
body#page-projects #nav ul.sfx-menu li#projects a,
body#page-water #nav ul.sfx-menu li#water a,
body#page-gallery #nav ul.sfx-menu li#gallery a,
body#page-contact #nav ul.sfx-menu li#contact a
{
	background:#FFF;
	-webkit-border-radius: 15px;
	-khtml-border-radius: 15px;	
	-moz-border-radius: 15px;
	border-radius: 15px;
	color:#000;
}