/* web fonts */

@font-face {
    font-family: 'RockSaltRegular';
    src: url('fonts/RockSalt-webfont.eot');
    src: url('fonts/RockSalt-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/RockSalt-webfont.woff') format('woff'),
         url('fonts/RockSalt-webfont.ttf') format('truetype'),
         url('fonts/RockSalt-webfont.svg#RockSaltRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OstrichSansMedium';
    src: url('fonts/ostrich-regular-webfont.eot');
    src: url('fonts/ostrich-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ostrich-regular-webfont.woff') format('woff'),
         url('fonts/ostrich-regular-webfont.ttf') format('truetype'),
         url('fonts/ostrich-regular-webfont.svg#OstrichSansMedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OstrichSansCondensedLight';
    src: url('fonts/ostrich-light-webfont.eot');
    src: url('fonts/ostrich-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ostrich-light-webfont.woff') format('woff'),
         url('fonts/ostrich-light-webfont.ttf') format('truetype'),
         url('fonts/ostrich-light-webfont.svg#OstrichSansCondensedLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*

@font-face {
    font-family: 'LaneUpperRegular';
    src: url('fonts/LANEUP__-webfont.eot');
    src: url('fonts/LANEUP__-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/LANEUP__-webfont.woff') format('woff'),
         url('fonts/LANEUP__-webfont.ttf') format('truetype'),
         url('fonts/LANEUP__-webfont.svg#LaneUpperRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

*/

@font-face {
    font-family: 'Puritan20Normal';
    src: url('fonts/Puritan_Regular-webfont.eot');
    src: url('fonts/Puritan_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Puritan_Regular-webfont.woff') format('woff'),
         url('fonts/Puritan_Regular-webfont.ttf') format('truetype'),
         url('fonts/Puritan_Regular-webfont.svg#Puritan20Normal') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Puritan20Bold';
    src: url('fonts/Puritan_Bold-webfont.eot');
    src: url('fonts/Puritan_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Puritan_Bold-webfont.woff') format('woff'),
         url('fonts/Puritan_Bold-webfont.ttf') format('truetype'),
         url('fonts/Puritan_Bold-webfont.svg#Puritan20Bold') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*

@font-face {
    font-family: 'Puritan20Italic';
    src: url('Puritan_Italic-webfont.eot');
    src: url('Puritan_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Puritan_Italic-webfont.woff') format('woff'),
         url('Puritan_Italic-webfont.ttf') format('truetype'),
         url('Puritan_Italic-webfont.svg#Puritan20Italic') format('svg');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'Puritan20BoldItalic';
    src: url('Puritan_Bold_Italic-webfont.eot');
    src: url('Puritan_Bold_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Puritan_Bold_Italic-webfont.woff') format('woff'),
         url('Puritan_Bold_Italic-webfont.ttf') format('truetype'),
         url('Puritan_Bold_Italic-webfont.svg#Puritan20BoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

*/

/* global */

* {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
body {font: 12px/18px Geneva, Arial, Verdana, sans-serif; background-color:#ffffff; color:#333; margin-top:0px;}
h1 {font-size:20px;font-weight: normal; font-style: normal; margin-top: 20px;}
h2 {font-size:16px;font-weight: normal; font-style: normal; margin-top: 20px; margin-bottom: 10px;}
h3 {font-size:14px;font-weight: normal; font-style: normal; margin-top: 10px;}
h5 {font-size:14px;font-weight: bold; font-style: normal; margin-top: 10px; margin-bottom: 10px; margin-left: 20px;}
h4,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
p{margin-top: 10px; font-size: 11px;}
img {border: none;}
a { color: #556c77; text-decoration: none;}
a:hover { text-decoration: underline;}

#bodyContainer {width: 100%; text-align: center; position: relative;}
#content {width: 1000px; text-align: left; margin: 0px auto 0px auto;}
.clear {clear: both;}

/* header */

#header {width: 1000px; height: 100px; margin: 0px auto 0px auto; position: relative; text-align: left;}
#header img{position: absolute; left: 10px; top: 0px;}
#header h1{position: absolute; left: 150px; top: 30px;font: 30px/45px 'RockSaltRegular', Arial, sans-serif;letter-spacing: 0;}

/* menu */

#menu {
	position:absolute; bottom: 15px; height: 35px; left: 500px; overflow: hidden;
	border-left: dotted 1px #888888;	
	border-right: dotted 1px #888888;	
}
#menu p{ margin-right: 20px;}
#menu a{
	display: inline-block;
	width: 70px;
	height: 20px;
	margin-top: -15px;
	margin-left: 5px;
	margin-right: 5px;
	padding-top: 8px;
	text-align: center;
	color: #444444;
	z-index: 10;
	font: 12px/14px 'OstrichSansMedium', Arial, sans-serif;letter-spacing: 2px;
}
#menu a:hover{
	color: #0061aa; 
	text-decoration: none;
	background-color: #dfff00;
}
#headSocial {position:absolute; bottom: 20px; left: 950px;}
#headSocial img { position: relative; height: 16px; width: 16px;}

/* footer */

#footer {
	border-top: dotted 1px #dddddd;
	width: 1000px; 
	margin: 40px auto 0px auto;
	position: relative;
	clear: both;
	text-align: left;
}
#footer h1{
	letter-spacing: 0;
	font: 9px/11px Arial, Verdana, sans-serif;
	padding: 0px 0px 0px 0px;
	font-weight: bold;
	margin: 0px auto 5px 0px;
}

#footer p{
	font: 9px/11px Arial, Verdana, sans-serif;
	margin: 0px auto 5px 0px;
}
#copyright {
	clear: both;
	margin-top: 20px; 
	text-align: center;
	font-size: 11px;
	font-weight: lighter;
	color: #999999;
	text-align: center;
}

/* main content */

#flagship {
	background-color: #fcae25;
	width: 100%;
	height: 300px;
	background: url(images/background.jpg) center; 
	text-align: center;
	
}
#flagship #flagshipContent{
	position: relative;
	width: 1000px;
	margin: 0px auto 0px auto;
	height: 300px;
}
#flagship #flagshipContent h1{
	position: absolute;
	right: 80px;
	top: 0px;
	color: black;
	font: 48px/50px 'OstrichSansCondensedLight', Arial, sans-serif;letter-spacing: 2px;
}
#flagship #flagshipContent h2{
	position: absolute;
	text-align: right;
	right: 80px;
	top: 80px;
	color: black;
	font: 32px/35px 'OstrichSansCondensedLight', Arial, sans-serif;letter-spacing: 2px;
}
#flagship #flagshipContent img{
	position: absolute;
	top: 10px;
	left: 80px;
}
#mainContent {width: 1000px;}
.grid1col {margin-top: 20px; width:150px; margin-right: 20px; float: left; }
.grid2col {margin-top: 20px; width:320px; margin-right: 20px; float: left; }
.grid3col {margin-top: 20px; width:490px; margin-right: 20px; float: left; }
.grid4col {margin-top: 20px; width:660px; margin-right: 20px; float: left; }
.grid5col {margin-top: 20px; width:830px; margin-right: 20px; float: left; }
.grid6col {margin-top: 20px; width:1000px; margin-right: 0px; float: left; }
.gridQcol {margin-top: 20px; width:235px; margin-right: 20px; float: left; }
/*
.grid1col {margin-top: 20px; width:150px; margin-right: 20px; float: left; background-color: #aaaaaa;}
.grid2col {margin-top: 20px; width:320px; margin-right: 20px; float: left; background-color: #aaaaaa;}
.grid3col {margin-top: 20px; width:490px; margin-right: 20px; float: left; background-color: #aaaaaa;}
.grid4col {margin-top: 20px; width:660px; margin-right: 20px; float: left; background-color: #aaaaaa;}
.grid5col {margin-top: 20px; width:830px; margin-right: 20px; float: left; background-color: #aaaaaa;}
.grid6col {margin-top: 20px; width:1000px; margin-right: 0px; float: left; background-color: #aaaaaa;}
.gridQcol {margin-top: 20px; width:235px; margin-right: 20px; float: left; background-color: #aaaaaa;}
*/
.gridClear {clear: both;}
.last {margin-right: 0px;}

.grid1col h1, .grid2col h1, .grid3col h1, .grid4col h1, .grid5col h1, .grid6col h1{
	margin-top: 0px;
	padding: 5px 5px 3px 5px;
	font: 12px/15px Arial, sans-serif;letter-spacing: 2px;
}

#design h1 {
	background-color: #d3100b;
	color: white;
	background: url(images/button_1.jpg) top left no-repeat; 
	height: 50px;
}
#development h1, #contact h1 {
	background-color: #00802e;
	color: white;
	background: url(images/button_2.jpg) top left no-repeat; 
	height: 50px;
}
#goals h1 {
	background-color: #00802e;
	color: white;
	background: url(images/button2_2.jpg) top left no-repeat; 
	height: 50px;
}
#getintouch h1 {
	background-color: #00802e;
	color: white;
	background: url(images/button3_2.jpg) top left no-repeat; 
	height: 50px;
}
#expertise h1, #contactdetails h1 {
	background-color: #00802e;
	color: white;
	background: url(images/button2_3.jpg) top left no-repeat; 
	height: 50px;
}
#social h1{
	background-color: #007aca;
	color: white;
	background: url(images/button_3.jpg) top left no-repeat; 
	height: 50px;
}
#search h1{
	background-color: #8f1ab6;
	color: white;
	background: url(images/button_4.jpg) top left no-repeat; 
	height: 50px;
}
#email h1{
	background-color: #fbad24;
	color: white;
	background: url(images/button_5.jpg) top left no-repeat; 
	height: 50px;
}
#turnkey h1{
	background-color: #b60a65;
	color: white;
	background: url(images/button_6.jpg) top left no-repeat; 
	height: 50px;
}
h1 a{ color: white;}
p.more{text-align: right; margin-top: -30px; margin-right: 5px;}
p.quote{text-align: right; margin-top: -30px; margin-right: 180px;}
p.more a, p.quote a{color: #ffffff;}
p.more a:hover, p.quote a:hover{text-decoration: underline;}

/* services page */

#servicesMenu {
	position: absolute;
	bottom: 0px;
	width: 1000px;
	left: 0px;
	height:30px;
	text-align: center;
	background: url(images/submenu.png) center; 
	overflow: hidden;
}
#servicesMenu a{
	display: inline-block;
	width: 135px;
	margin: 2px 1px 0px 1px;
	padding: 0px 0px 0px 0px;
	cursor: pointer;
	height:28px;
	padding-top: 5px;
	
}
#servicesMenu a:hover{
	text-decoration: underline;
}
#servicesMenu a.noShow {
	color: inherit;
	border: none;
	margin-left: 1px;
	margin-right: 1px;
}
#servicesMenu a.showMe {
	color:  #007aca;
	border-left: dotted 1px gray;
	border-right: dotted 1px gray;
	margin-left: 0px;
	margin-right: 0px;
}
#servicesMenu a.showMe:hover{
	text-decoration: none;
	cursor: default;
}
#services h1 {
	font: 28px/30px 'Puritan20Bold', Arial, sans-serif;letter-spacing: 2px; margin-left: 0px; padding-left: 0px; margin-top: 20px;
}
#services h2 {
	font: 24px/26px 'Puritan20Normal', Arial, sans-serif;letter-spacing: 2px; margin-left: 0px; padding-left: 0px; margin-top: 15px; color: #666666;
}
#services h3 {
	font: 20px/22px 'Puritan20Normal', Arial, sans-serif;letter-spacing: 2px; margin-left: 0px; padding-left: 0px; margin-top: 15px; color: #007dc5;
}
#services h4 {
	font: 16px/20px 'Puritan20Normal', Arial, sans-serif;letter-spacing: 2px; margin-left: 0px; padding-left: 0px; margin-top: 15px; color: #007dc5;margin-bottom: 10px;
}

#services div.show {display: block;}
#services div.hide {display: none;}
#services div.grid2col, .ads {padding-top: 55px;}
/* contact page */

#contact form input, #contact form textarea{
	width : 300px;
}
#contact form textarea{
	height: 50px;
}
#contact form input.aButton{
	width: 100px; margin-left: 30px;
}

.contType{
	display: inline-block;
	color: #007dc5;
	width: 80px;
}
.contInput{
	display: inline-block;
	width: 150px;
}
.adGrey {margin-left: 0px; font: 10px/12px Arial, sans-serif; color: #767676; margin-bottom: 0px;}
.adBlue {margin-left: 0px; font: 13px/16px Arial, sans-serif; color: #2200c1; text-decoration: underline;margin-bottom: 0px;margin-top: 10px; 
	background: url(images/glass.png) right no-repeat; width: 175px;
	}
.adBlack {margin-left: 0px; font: 12px/14px Arial, sans-serif; margin-bottom: 0px;margin-top: 5px;}
.adGreen {margin-left: 0px; font: 12px/14px Arial, sans-serif; color: #0e774a;margin-bottom: 15px;margin-top: 5px;}
.adBanner {float:right;}
.contactImg {margin-top: 50px;}

.gallery {border: solid 1px #888888; margin-bottom: 5px; margin-top: 10px;}