@charset "utf-8";
/* CSS Document */

/* css reset v1.0 by eric meyer (www.meyerweb.com) | 20080212 */

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,
b, u, i, center,
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-style: normal;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*** elements ***/

a, a:link{

	color: #0077d5;
	cursor: pointer;

}

a:hover{
	
	color: #ff9f51;;

}

a.blank:after{

	content: url('../img/ablank.png');
		
}

abbr{

	border-bottom: 1px dotted #444;
		
}

address.first{

	margin-top: 1em;
		
}

body{

	background: #fcfaee;
	color: #444;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 80%;
	font-variant: normal;
	line-height: 1.5em;
	text-align: center;

}

body *{

	font-size: 1em;
	
}
	
dl{

	margin-top: 1em;
		
}

dl dt{
	
	clear: left;
	float: left;
	font-weight: bold;
	width: 62px;
	
}

dl dd{

	float: left;
	margin-bottom: 10px;
	margin-left: 10px;
	width: 200px;
	
}
/*
* { behavior: url('../../iepngfix.htc') }
*/

h1{

	height: 70px;
	overflow: hidden;
	width: 300px;
		
}

h2{

	color: #0077d5;
	font-family: impact;
	font-size: 2.8em;
	font-style: normal;
	font-weight: normal;
	line-height: 1em;
	padding-bottom: 0.2em;
	text-transform: uppercase;
	
}

h1 span, h2 span{
	
	float: left;
	text-indent: -999em;
	
}

h1 span{

	float: none;
	
}

h3{
	
	color: #444;
	font-size: 1.8em;
	font-style: normal;
	font-weight: normal;
	line-height: 1em;
	padding-bottom: 0.2em;
	text-transform: uppercase;
	
}

h4{

	color: #444;
	font-size: 1.2em;
	font-weight: bold;
	padding-top: 2em;
	margin-bottom: -1em;
		
}

h3:first-child{

	/*color: #fff;*/
	margin-top: 0.2em;

}

p{
	
	margin-top: 1.5em;
	font-weight: normal;

}


/*p.first:first-letter{

	margin-top: 0.2em;
	float: left;
	font-size: 2em;
	font-weight: 600;
	text-transform:capitalize;

}*/

span.title{

	color: #494848;

}

/*** classes ***/

.accesskey{

	text-decoration: underline;
		
}

.blueTitle, .blueTitleCaps{

	color: #0077d5;
		
}

.titleCaps{

	font-weight: bold;
	text-transform: uppercase;
		
}

.clear{

	clear: both;

}

.clearleft{

	clear: left;

}

.clearright{

	clear: right;

}

.contentRight{
	
	border-left: 2px dotted #494848;
	float: right;
	padding-left: 15px;
	text-align: left;
	width: 565px;

}

body#bodyservices .contentLeft,
body#bodyservices .contentCenter,
body#bodyservices .contentRight{
	
	border-left: 2px dotted #494848;
	float: left;
	padding: 0 8px;
	text-align: left;
	width: 300px;

}


body#bodyservices .contentLeft{

	border: none;
		
}

div#topContent .contentLeft,
div#topContent .contentCenter,
div#topContent .contentRight{
	
	background: #0077d5;
	border-left: none;
	float: left;
	padding: 30px 8px;
	text-align: center;
	width: 300px;
	z-index: 200;

}

.indent{

	margin-left: 72px;
		
}

.left{

	float: left;

}

.leftBoxTop{

	margin-top: 2em;
		
}

.leftBoxTop li{

	background: #fff;
	border: 1px solid #aaa;
	height: 64px;
	margin-top: 13px;
	vertical-align: baseline;
	
}

.leftBoxTop li a{
	
	color: #444;
	
}

.leftBoxTop li#design:hover, .leftBoxTop li#design:hover *{

	background: #0077d5;
	color: #fff;
	cursor: pointer;
		
}

.leftBoxTop li#development:hover, .leftBoxTop li#development:hover *{

	background: #ff9f51;
	color: #fff;
	cursor: pointer;
		
}

.leftBoxTop li#marketing:hover, .leftBoxTop li#marketing:hover *{

	background: #444444;
	color: #fff;
	cursor: pointer;
		
}


.leftBoxTop li img{

	border: 1px solid #fff;
	float: left;
	height: 60px;
	margin-right: 10px;
		
}

.leftBoxTop #design .titleCaps{

	color: #0077d5;
		
}
	
.leftBoxTop #development .titleCaps, h3 .development{
	
	color: #ff9f51;
	
}

h3 .marketing{

	color: #444;
		
}

.leftImg, h3 img{

	float: left;
	margin-right: 10px;
		
}

.right{

	float: right;

}

.rightBoxTop{

	height: 252px;
	padding: 15px;
	padding-right: 5px;
	overflow: hidden;
	
}

.sent fieldset{

	display: none;
		
}

.textinputError + label{
	
	color: red;
	
}


/*** ids ***/

#contentWrapper{

	text-align: left;
	margin-left: auto;
	margin-right: auto;
	width: 960px;

}

#content, .boxes li, .rightBoxTop{

	background: #fff;
	border: 1px solid #aaa;
	margin-top: 2em;
		
}

#content, .leftBoxTop li, .boxes li{

	padding: 10px;
		
}

#content dl{

	margin-top: 2em;
		
}

#content dt{

	float: none;
	margin-left: 180px;
	width: 270px;
		
}

#content dd{

	float: none;
	padding-top: 0.5em;
	width: 450px;
		
}

#content dd img{

	
	float: left;
	height: 100px;
	margin: -1.8em 20px 80px 0;
	width: 150px;
		
}

#content fieldset{

	background: #fff;	
	border: 1px solid #aaa;
	float: left;
	margin-right: 10px;
	margin-top: 10px;
	padding: 10px;
	padding-top: 0;
	width: 450px;
		
}

#content fieldset legend{


	background: #eee;
	border: 1px solid #aaa;
	color: #444;
	font-size: 1.5em;
	margin-bottom: 10px;
	margin-left: -11px;
	margin-right: -11px;
	text-transform: uppercase;
	
}

#content fieldset legend span{
	
	float: left;
	height: 1.5em;
	padding: 10px;
	padding-left: 130px;
	padding-bottom: 0px;
	margin: 0;
	width: 330px;
	white-space: pre-wrap;
	
}

#content input, #content select, #content textarea, #content .input{

	background: #fff;
	border: 1px solid #444;
	float: left;
	margin-top: 2px;
	width: 300px;
		
}

#content .input{

	border: none;
		
}

#content label{

	clear: left;
	color: #444;
	float: left;
	font-weight: bold;
	margin-right: 20px;
	margin-top: 2px;
	text-align: right;
	width: 100px;
		
}

#content input[type='submit'], #content input[type='reset']{

	background: #fff;
	border: 1px solid #0077D5;
	color: #0077D5;
	text-transform: uppercase;
		
}

#content input[type='submit']:hover, #content input[type='reset']:hover{

	background: #0077D5;
	color: #fff;
		
}	
	
#content p{

	text-align: justify;
		
}
	
#content textarea{

	height: 12em;
	font-family: Helvetica, Arial, sans-serif;
		
}

#content ul{

	margin-top: 1em;
	text-indent: 1em;
		
}

#content ul li:before{

	content: '»';
	margin-right: 0.5em;
		
}

#content .messageError, #content .messageOk{

	background: #ff9f51;
	color: #fff;
	font-weight: bold;
	padding: 10px;
	width: 451px;
		
}

#content .messageOk{

	background: #0077D5;
		
}

#content .textinputError{

	border: 1px solid #ff9f51;
		
}

#headerWrapper{

	background: url('../img/header_bg.png') repeat-x;
	left: 0;
	top: 0;
	height: 100px;
	margin: 0;
	width: inherit;
	z-index: 20;

}

#header{

	margin: 0 auto;
	width: 960px;
	height: 100px;

}

#leftContent{

	float: left;
	width: 320px;
		
}

#logo{

	display: block;
	float: left;
	margin: 0;
	margin-right: 20px;
	margin-top: 20px;
	
}

#logo img{

	height: 70px;
	width: 300px;

}

#navi{
	
	background: #aaa;
	list-style: none;
	padding-right: 10px;
	
}

#navi li{

	background: url('../img/header_separator.png') no-repeat top left transparent;
	display: block;
	float: left;
	
}

#navi li a{

	display: block;
	height: 40px;
	padding-top: 60px;
	text-decoration: none;
	width: 100px;

}

#navi li a:hover{

	background: #fcfaee;

}

/* navigation states */


body#bodyindex #navi #index a{

	background: #fcfaee;

}

body#bodyservices #navi #services a{
	
	background: #fcfaee;
	
}

body#bodyportfolio #navi #portfolio a{
	
	background: #fcfaee;
	
}

body#bodycontact #navi #contact a{

	background: #fcfaee;

}

#navi #contact a{

	background: url('../img/header_separator.png') no-repeat top right;

}

#navi #contact a:hover{

	background-color: #fff;
		
}

/* navigation states end */

#rightContent{

	float: left;
	margin-left: 30px;
	width: 515px;
	
}