/*----------------------------------------
Gabriel Scientific Consultancy Style Sheet
author:    Peter Cadney
created:   Jan 2010
----------------------------------------*/

/* =Reset Styles - Thank you Eric Meyer (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, 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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

p { margin-top:18px;}
a { color:#0088cc;}
h2 { font-size:18px; font-weight:bold; color:#212121; letter-spacing:-1px; }
h2 span {color:#0088cc;}
strong { font-weight:bold}

.right { float:right}
.left { float:left}

a.lightbox { }
a.lightbox img { margin-right:20px;}
.pdabox4 { background: url(images/screenshots/arrows4.png) no-repeat 66px 0px; padding-top:45px; margin:20px 0 0 14px}
.pdabox4 a.lightbox img { margin-right:10px;}
.pdabox3 { background: url(images/screenshots/arrows3.png) no-repeat 122px 0px; padding-top:45px; margin:20px 0 0 27px}
.pdabox3 a.lightbox img { margin-right:10px;}
.pdabox3pda { background: url(images/screenshots/arrows3pda.png) no-repeat 66px 0px; padding-top:80px; margin:20px 0 0 0px}
.pdabox3pda a.lightbox img { margin-right:10px;}
.pdabox3pda p { float:left; width:290px; margin:0 0 15px 10px}
.pdabox2 { background: url(images/screenshots/arrows2.png) no-repeat 66px 0px; padding-top:45px; margin:20px 0 0 0px}
.pdabox2 a.lightbox img { margin-right:10px;}
.pdabox2 p { float:left; width:290px; margin:0 0 15px 10px}

.industries { position:absolute; margin:40px 0 0 5px;}
.industries p.elec { float:left; margin-right:35px;}
.industries p.vending { float:left; margin-right:50px;}
.industries p.gas { float:left;}


body {background: #212121; color:#333; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:18px;}

#wrapper {width:982px; margin:0 auto;}

#lang { float:left; padding-top:10px;}
#lang a { color:#676767;}

#header {background:url(images/header.png) no-repeat; height:97px; clear:both}
#home #header { margin-bottom:63px;}
#header img {float:left;}
#header h1 {float:left; width:700px; font-weight:normal; font-size:16px; color:#ccc; margin:57px 0 0 20px}

#nav {background: url(images/nav-bg.png) repeat-x;}
#home #nav { position: absolute; top:137px; width:982px;}
#nav ul {list-style-type:none; height:63px; background: url(images/nav-rcorner.png) no-repeat right top; }
#nav ul li {float:left;}
#nav ul a {font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; display:block; line-height:63px; background: no-repeat; height:63px; padding-left:87px;}


#nav ul a#engineer-control { background: url(images/engineer-document-control2.png) 0px -63px; width:204px;}
#nav ul a#time-sheets {background: url(images/time-sheets2.png) 0px -63px; width:98px;}
#nav ul a#job-sheets {background: url(images/job-sheets2.png) 0px -63px; width:89px;}
#nav ul a#scheduler {background: url(images/scheduler2.png) 0px -63px; width:96px;}

#nav ul a:hover#engineer-control { background: url(images/engineer-document-control2.png) 0px 0px; width:204px;}
#nav ul a:hover#time-sheets {background: url(images/time-sheets2.png) 0px 0px; width:98px;}
#nav ul a:hover#job-sheets {background: url(images/job-sheets2.png) 0px 0px; width:89px;}
#nav ul a:hover#scheduler {background: url(images/scheduler2.png) 0px 0px; width:96px;}

#nav ul a#engineer-control.active { background: url(images/engineer-document-control2.png) 0px 0px; width:204px;}
#nav ul a#time-sheets.active {background: url(images/time-sheets2.png) 0px 0px; width:98px;}
#nav ul a#job-sheets.active {background: url(images/job-sheets2.png) 0px 0px; width:89px;}
#nav ul a#scheduler.active {background: url(images/scheduler2.png) 0px 0px; width:96px;}

.box { background: url(images/content-bottom.png) no-repeat left bottom; padding-bottom:8px; margin-bottom:20px;}

#content { background:url(images/main-bg.png) repeat-y; padding:0 2px 20px 2px; min-height:100px; }
/*--IE6--*/* html #content {padding-bottom:0px; }
#content h1 {font-size:20px; font-weight:bold; color:#0088cc; letter-spacing:-1px;}
#content h1 span {color:#212121;}
#showcase { background: url(images/showcase-bg.jpg) repeat-x; height:319px; padding:37px 0px 0px 37px;}
#thankyou { background: url(images/showcase-bg.jpg) repeat-x; height:100px; padding:37px 37px 25px 37px;}
#error { background: #fff; height:100px; padding:37px 37px 25px 37px;}

#showcase .info { width:340px; float:left}
#showcase h1, #showcase h2 { font-size:20px; font-weight:bold; color:#0088cc; letter-spacing:-1px;}
#showcase p img { float:none;}
#showcase img { float:right}

#about { float:left; width:275px; margin:30px 0 0px 25px;}
/*--IE6--*/ *html #about { margin-left:14px; }

#subnav { float:left; width:275px; margin:30px 0 40px 25px; background:url(images/gabriel-business-solutions.png) no-repeat left top; padding-top:60px;}
/*--IE6--*/ *html #subnav { margin-left:14px; }
#subnav h2 { font-weight:normal}

#extend { float:right; width:615px; padding:0 20px; border-left:1px solid #c1c1be; margin-top:30px;}
#extend.single { float: left; width: 939px; padding:0 20px; border-left: 0px none #fff; margin-top:30px;}
/*--IE6--*/ *html #extend {margin-left:20px;}
#extend h2 { margin-top:25px;}
#home #extend { padding-right:0px; width:635px;}
#home #extend h2 {margin-top:0px;}

#extend ol, #extend ul  { margin:20px 0 0 40px;}
#extend ol li, #extend ul li { margin:0 0 20px;}

#home #extend ul, #home #extend ol {margin: 20px 0 0 0;}
#home #extend ul li, #home #extend ol li { margin:0px} 

ul.sub { list-style-type:none; height:182px; margin-top:20px;}
#subnav ul.sub { margin-top:0px;}
ul.sub li { width:300px; height:67px; display:block; float:left; margin-right:20px;}
/*--IE6--*/* html ul.sub li { margin-right:7px;}
ul.sub li.nomargin { margin-right:0px;}
ul.sub li p { font-size:12px;}

#subnav ul.sub li { width:275px; border-bottom:1px dotted #c1c1be; margin-bottom:20px;}


ul.sub li a img { float:left; margin-right:10px; border:1px solid #c1c1be;}
ul.sub li span a { float:left;}
#subnav ul.sub li span a { float: none;}

#footer { width:962px; height:316px; background: url(images/footer.png) no-repeat left top; padding:20px 0 0 25px;}
#company-details { text-align:center; height:40px;}
#company-details p { margin-top:10px; color:#676767;} 
#company-details strong { font-weight:bold; color:#999;} 

#contactform {width:560px; float:left; margin:10px 0 0 0px;}
#contactform div#inputs { width:177px; float:left;}
#contactform div#inputs input {width:177px; background-color:#fff;  border: 1px solid #b6b6b6;  padding:3px 0 3px 5px; margin:3px 0 2px 0px; font-family: Arial, Helvetica, sans-serif; font-size:12px;}
#contactform div#textarea { width:323px; float:left; margin-left:30px;}
/*--IE6--*/* html #contactform div#textarea { width:323px; float:left; margin-left:5px}
/*--IE7--*/*+html #contactform div#textarea { width:323px; float:left; margin-left:15px}
#contactform div#textarea textarea { margin-top:3px; width:323px; background-color:#fff; border: 1px solid #b6b6b6; padding:10px; height:140px; font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#102f45;}
/*--IE6--*/* html #contactform div#textarea textarea { width:323px; height:145px;}
/*--IE7--*/*+html #contactform div#textarea textarea { width:323px; height:145px;}
/*--IE6--*/* html #contactform div#textarea label { margin-left:10px}
/*--IE7--*/*+html #contactform div#textarea label { margin-left:15px}
#contactform label {display:block;margin-bottom:0px; width:200px;}
#contactform .fmtext { margin-bottom:10px;}
.sendenquiry { float:right; margin:5px 0px 0 0; cursor:pointer; color:#fff; font-size:11px; text-align:center; border:none; font-family: Arial, Helvetica, sans-serif; padding:8px 10px 10px 15px; }

#contactform .red { display:block; background-color:#ffcccc; color:#c62021; padding:0 5px; border:1px solid #c62021; width:172px;}
#textarea .red { width:333px;}
* html #textarea .red { position:relative; z-index:99; margin-left:-5px;}