/*
	Author Name	: Ryan Roberts
	Author Site	: www.thevisualprocess.com
	Scheme Name	: Visualstyle v2.3
*/


/*- BASE ------------------------------------------------------ */

* {
	margin: 0;
	padding: 0;
	font-weight: normal;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #F0F0F0;
	}

body {
	font: 62.5% Verdana, Arial, Helvetica, sans-serif;
	color: #767A68;
	}
	
.rem { 
	position: absolute;
 	left: 0;
 	top: -999em;
 	width: 0;
 	height: 0;
 	overflow: hidden;
	}
	
hr {
	height: 1px;
	color: #d6d6d6;
	background: #d6d6d6;
	border: none;
	}
	
	
/*- BASIC TYPOGRAPHY ------------------------------------------------------ */
	
p {
	font-size: 1.1em;
	padding: 0 0 14px 0;
	line-height: 1.7em;
	}
.yenicss {
	font-family: Tahoma, Verdana, Arial;
	font-size: 11px;
	color: #9CA7BE;
}

	
h4 {
	font-size: 1em;
	color: #7286bd;
	text-transform: uppercase;
	}
	
h4 span {
	color: #b6b6b6;
	}
	
h1 { font-size: .1em; }

h2,
h3 { 
	height: 0;
	padding: 19px 0 0 0;
	overflow: hidden;
	font-size: 1.3em;
	color: #424F69;
	font-weight: bold;
	margin: 0 0 12px 0;

	background: url(headers.gif) no-repeat;
	}
	
h3#h_skills { background-position: 0 -19px; }
h3#h_news { background-position: 0 -38px; }
h3#h_clients { background-position: 0 -57px; }
h2#h_portfolio { background-position: 0 -95px; }
h2#solutions { background-position: 0 -114px; }
h3#h_overview { background-position: 0 -133px; }
h2#h_contact { background-position: 0 -152px; width: 404px; }

h2#eden_h { background-position: 0 -76px;}
h2#h_salamis { background-position: 0 -171px; }
h2#h_otools { background-position: 0 -190px; }
h2#h_halert { background-position: 0 -209px; }
h2#h_hats { background-position: 0 -228px; }
h2#h_diab { background-position: 0 -247px; }
		

ul {
	font-size: 1.1em;
	list-style: none;
	}
	
strong { 
	font-size: 1em;
	color: #7286bd;
	text-transform: uppercase;
	}
	
ul li strong { 
	font-size: .9em;
	}
	
a {
	color: #7986A2;
	text-decoration: none;
	}
	
a img {
	border: none;
	}
	
html>body a:hover {
	background-color: #f4f4f4;
	}
	
abbr, 
acronym {
	cursor: help;
	}

/*- MAIN STRUCTURE ------------------------------------------------------ */	

#wrapper {
	width: 100%;
	height: auto;
	background: #F0EFEF url(bg_header.jpg) repeat-x;
	border-top-width: 16px;
	border-top-style: solid;
	border-top-color: #414f69;
	}

#secondary {
	width: 100%;
	padding: 30px 0 0 0;
	background: url(bg_secondary.gif) repeat-x;
	}

#header {
	width: 680px;
	margin: 0 auto;
	}
	
#header h1 {
	width: 260px;
	height: 0;
	padding: 77px 0 0 0;
	overflow: hidden;
	float: left;
	clear: none;
	background-image: url(navbuttons.gif);
	background-repeat: no-repeat;
	background-position: 0 19px;
	}

/*- MAIN NAV ------------------------------------------------------ */	

#mainnav { 	
	width: 407px;
	height: 77px;
	float: right;
	clear: none;
	}
	
#mainnav ul { 	
	width: 407px;
	height: 77px;
	}
	
#mainnav ul li { 	
	width: 98px;
	height: 55px;
	float: left;
	clear: none;
	margin: 2px 2px 0 1px;
	}
	
#mainnav ul li a { 
	display: block;	
	width: 98px;
	height: 0;
	padding: 55px 0 0 0;
	overflow: hidden;
	border-top: 3px solid #C6C8BE;
	border-bottom: none;
	background: url(navbuttons.gif);
	}
	
#mainnav ul li#currentpage a,	
#mainnav ul li a:hover { 
	border-top-color: #A8C360;	
	background-position: 0 -63px;
	}
	
#mainnav ul li a#folio-btn { background-position: -98px 0; }
#mainnav ul li#currentpage a#folio-btn,
#mainnav ul li a:hover#folio-btn { background-position: -98px -63px; }

#mainnav ul li a#info-btn { background-position: -196px 0; }
#mainnav ul li#currentpage a#info-btn,
#mainnav ul li a:hover#info-btn { background-position: -196px -63px; }

#mainnav ul li a#contact-btn { background-position: -294px 0; }
#mainnav ul li#currentpage a#contact-btn,
#mainnav ul li a:hover#contact-btn { background-position: -294px -63px; }
	
#content {
	width: 680px;
	margin: 0 auto;
	}
	
#about {
	width: 360px;
	float: left;
	clear: none;
	margin: 23px 0 0 0;
	}
	
#recentwork {
	width: 300px;
	height: 222px;
	float: right;
	clear: none;
	background: url(recentwork.gif) no-repeat top center;
	margin: 0 0 15px 0;
	}
	
#recentwork h2 { 
	position: absolute;
 	left: 0;
 	top: -999em;
 	width: 0;
 	height: 0;
 	overflow: hidden;
	}
	
#secondaryinfo {
	width: 260px;
	float: left;
	clear: none;
	}
	
#foliolist {
	width: 235px;
	float: right;
	clear: none;
	}
	
#secondaryinfo ul,
#secondaryinfo ul li a,
ul#overview {
	text-transform: uppercase;
	color: #7286BD;
	font-size: 1em;
	}
	
#secondaryinfo ul {
	margin: 0 0 30px 0;
	}
	
#secondaryinfo ul li,
ul#overview li {
	margin: 5px 0 5px 5px;
	padding: 0 0 0 15px;
	background: url(arrow.gif) no-repeat 0 4px;
	}

#newscolumn {
	width: 372px;
	float: right; 
	clear: none;
	}
	
#folio_item {
	width: 402px;
	float: left; 
	clear: none;
	}
	
#folio_item ul {
	margin: 0 0 15px 0;
	}

#folio_item li {
	border-top: 1px dotted #C2C2C2;
	padding: 5px 0;
	}
	
#footer {
	width: 680px;
	height: 96px;
	margin: 15px auto 30px auto;
	background: #f4f4f4 url(bg_footer.gif) repeat-x;
	}


/*- FOLIO ------------------------------------------------------ */
.folioinfo {
	width: 290px;
	float: left;
	clear: none;
	}

img.screenshot {
	float: right;
	clear: none;
	margin: 0 0 20px 0;
	}

#folio_item img.screenshot2,
#folio_item img.screenshotdiab {
	width: 382px;
	height: 150px;
	float: right;
	clear: none;
	margin: 0 0 20px 0;
	padding: 10px;
	background: #e6e6e6 url(bg_screenshot.gif);
	}
	
#folio_item img.screenshotdiab {
	height: 300px;
	background: #e6e6e6 url(bg_screenshot_large.gif);
	}
	
#diabgal {
	width: 402px;
	height: 320px;
	position: relative;
	}
	
#diabgal ul {
	position: absolute;
	top: 293px;
	right: 16px;
	z-index: 999;
	display: inline;
	border: none;
	}

#diabgal ul li {
	display: inline;
	border: none;
	width: auto;
	height: auto;
	}
	
#diabgal ul li a{
	color: #fff;
	text-shadow: #666666 5px 5px 5px;
	text-decoration: none;
	background: none;
	border: none;
	padding: 1px 3px;
	}
	
#diabgal ul li a:hover {
	background: #a8c360;
	color: #414f69;
	}




ul#gallerynav {
	width: 230px;
	overflow: hidden;
	margin: 0 auto;
	}

ul#gallerynav li {
	float: left;
	clear: none;
	width: 230px;
	height: 90px;
	background-color: #f8f8f8;
	list-style: none;
	}

ul#gallerynav li a {
	display: block;
	width: 214px;
	height: 78px;
	padding: 12px 0 0 16px;
	overflow: hidden;
	color: #aaa;
	text-decoration: none;
	font: 1em Tahoma, Verdana, Arial, Helvetica, sans-serif;
	border-bottom: none;
	font-weight: bold;
	background: url(gallerynav.jpg);
	}

ul#gallerynav li a:hover {
	background-repeat: no-repeat;
	background-color: #f1f1f1;
	color: #6ea6c7;
	}

ul#gallerynav li a span {
	float: right;
	margin: -12px 16px 0 0;
	font-weight: normal;
	}

ul#gallerynav li#eden a { background-position: 0 0; }
ul#gallerynav li#eden a.activefolio,
ul#gallerynav li#eden a:focus,
ul#gallerynav li#eden a:hover { background-position: -230px 0; color: #6ea6c7; }

ul#gallerynav li#salamis a { background-position: 0 -90px; }
ul#gallerynav li#salamis a.activefolio,
ul#gallerynav li#salamis a:focus,
ul#gallerynav li#salamis a:hover { background-position: -230px -90px; color: #6ea6c7; }

ul#gallerynav li#oceantools a { background-position: 0 -180px ; }
ul#gallerynav li#oceantools a.activefolio,
ul#gallerynav li#oceantools a:focus,
ul#gallerynav li#oceantools a:hover { background-position: -230px -180px; color: #6ea6c7; }

ul#gallerynav li#hydralert a { background-position: 0 -270px; }
ul#gallerynav li#hydralert a.activefolio,
ul#gallerynav li#hydralert a:focus,
ul#gallerynav li#hydralert a:hover { background-position: -230px -270px; color: #6ea6c7; }

ul#gallerynav li#hazelshats a { background-position: 0 -360px; }
ul#gallerynav li#hazelshats a.activefolio,
ul#gallerynav li#hazelshats a:focus,
ul#gallerynav li#hazelshats a:hover { background-position: -230px -360px; color: #6ea6c7; }

ul#gallerynav li#dracinabox a { background-position: 0 -450px; }
ul#gallerynav li#dracinabox a.activefolio,
ul#gallerynav li#dracinabox a:focus,
ul#gallerynav li#dracinabox a:hover { background-position: -230px -450px; color: #6ea6c7; }

/*- INFO PAGE 
---------------------------------------------------------------------------- */

.infoblock {
	width: 300px;
	float: left;
	clear: none;
	margin: 0 40px 0 0;
	}


/*- CONTACT PAGE 
---------------------------------------------------------------------------- */

address {
	width: 200px;
	float: right;
	clear: none;
	font-size: 1.6em;
	font-weight: bold;
	font-style: normal;
	color: #b6b6b6;
	margin: 30px 45px 0 0;
	}

fieldset {
	outline: none;
	border: none;
	}
	
form {
	width: 400;
	height: 50;
	float: left;
	clear: none;
	position: relative;
	}

#contactinfo {
	float:right;
	}

label {
	display: block;
	padding: 3px 3px 3px 0;
	}

input {
	display: block;
	padding: 3px;
	}
	
input {
	width: 250px;
	border: 1px solid #d6d6d6;
	font: 1.2em/1.5em Verdana, Arial, Helvetica, sans-serif;
	}
	
textarea {
	width: 400px;
	height: 200px;
	display: block;
	padding: 0 0 0 2px;
	margin: 0 0 10px 0;
	font: 1.2em/1.5em Verdana, Arial, Helvetica, sans-serif;
	border: 1px solid #d6d6d6;
	
	position: absolute;
	top: 17px;
	left: 0;
	}
	
label#msglabel {
	position: absolute;
	top: 0;
	left: 0;
	}
	
.submit_btn {
	border: none;
	width: 260px;
	height: 90px;
	color: #b6b6b6;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 10px 0 0 0;
	cursor: pointer;
	background: #fff;	
	position: absolute; 
	top: 119px; 
	left: 422px;
	}
	
/*- FLOAT CLEARING ------------------------------------------------------ */		

#header:after,
#content:after,
form:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}