@import "reset.css";

html {}

body, #header ul, #header ul li.active a, #services dt
{
	background:url(../images/bg.png) 0 -39px repeat-x;
}

body {
	font-family:Helvetica,Arial,Serif;
	text-align:left;
	font-size:12px;
}
#header {
	padding:109px 10px 0 10px;
}
#header h1 {
	text-transform:uppercase;
	font-size:30px;
	font-weight:bold;
	line-height:42px;
}
#header ul {
	padding:0 2px;
	margin:0 0 14px 0;
	height:40px;
	background-position:0 -7px;
}
#header ul li {
	height:40px;
	float:left;
	margin:0 15px 0 0;
}
#header ul li.active a {
	background-position:50% 34px;
	background-repeat:no-repeat;
}

#header ul a {
	display:block;
	height:40px;
	line-height:35px;
	float:left;
	text-decoration:none;
	text-transform:uppercase;
	color:#999;
	font-weight:bold;
	font-size:14px;
}
#header ul a:hover, #header ul li.active a {
	color:#000;
}

#footer {
	background:#333;
	height:110px;
}
#footer .wrapper {
	overflow:visible;
}
#footer dt {
	position:absolute;
	z-index:1000;
	left:50%;
	top:22px;
	margin-left:-470px;
	height:64px;
	width:235px;
}
#footer dd {
	position:absolute;
	left:50%;top:27px;
	margin-left:-150px;
	color:#ddd;
	line-height:18px;
}
#footer dd a {color:#ddd;}
#footer dd a:hover {color:#39c;}
#footer dd#copy {
	margin-left:170px;
}
#footer dd strong {
	color:#39c;
	line-height:20px;
}
#footer dt a {
	display:block;
	width:242px;
	height:64px;
	overflow:hidden;
	text-indent:-1000px;
	background:url(../images/logo.png) 0 0 no-repeat;
}

.hr {
	display:block;
	height:2px;
	overflow:hidden;
	background:#000;
	margin:40px 10px;
}
.hr hr {display:none;}

.h-wrapper {
	position:relative;
}
.h-wrapper h2 {
	float:left;
}

h2, a.nav {
	font-size:30px;
	font-weight:lighter;
	margin:0 10px 20px 10px;
}
a.nav {color:#ccc;float:right; text-decoration: none;}
a.nav:hover {color:#000;}
a.nav {position:ss;left:-20px;}


a.nav3 {
	font-size:30px;
	font-weight:lighter;
	margin:0 10px 20px 10px;
	color:#ccc;float:right; text-decoration: none;
	
}
a.nav3:hover {color:#000;}

a.nav3.back3 {
	display:block;
	float:left;
	margin-left:-22px;
	left:0;
	padding-left:20px !important;
	background:url(../images/nav-arrows.png) 0 18px no-repeat;
}
a.back3:hover {
	background-position:0 -42px;
}


a.nav1 {color:#ccc;}
a.nav1:hover {color:#000;}

span.nav2 {
	text-decoration: underline;
}

span.back1 { 
	background:transparent url(../images/nav-arrows.png) no-repeat scroll 0 18px;
}

.cln {
	display:block;
	overflow:hidden;
	clear:both;
	//zoom:1;
}
.wrapper {
	width:960px;
	margin:0 auto;
	padding:0 10px;
	text-align:left;
	position:relative;
}

/* SERVICES */

#services {
	width: 960px;
}

#services dl {
	height:350px;
	position:relative;
	width:960px;
}
#services dd {
	display:none;
	position:absolute;
	top:0;left:0;
	width:958px;
	overflow:hidden;
	height:299px;
	background-position:0 0;
	background-color:#ff7f02;
}
#services dd.design {
	background-color:#5ebb19;
	background-position:-1000px 0;
}
#services dd.security {
	background-color:#236ecb;
	background-position:-2000px 0;
}

#services dd.active {
	display:block;
	border:1px solid #000;
	border-width:1px 1px 0 1px;
	color:#fff;
}
#services dt {
	float:left;
	height:75px;
	line-height:75px;
	margin-top:300px;
	background-position:0 -77px;
	width:320px;
	text-align:center;
}
#services dt a {
	display:block;
	padding:22px 0;
	line-height:14px;
	font-size:14px;
	font-weight:bold;
	text-decoration:none;
	text-transform:uppercase;
	color:#777;
	width:200px;
	margin:0 auto;
}
#services dt.active a {
	background:url(../images/color-arrows.png) 50% 0 no-repeat;
}
#services dt.active a, #services dt a:hover {color:#000;}
#services dt.active.software a {
	background-position:50% 0;
}
#services dt.active.design a {
	background-position:50% -100px;
}
#services dt.active.security a {
	background-position:50% -200px;
}
#services dd h3 {
	font-size:36px;
	padding:35px 50px 20px 50px;
	font-family:"Myriad Pro",Helvetica,Arial,Serif;
}
#services dd.software {text-shadow: #66401a 1px 1px 1px;}
#services dd.design {text-shadow: #334e20 1px 1px 1px;}
#services dd.security {text-shadow: #243b57 1px 1px 1px;}

#services dd ul {
	font-size:16px;
	padding:0 50px;
	line-height:21px;
}

/* PORTFOLIO */

#portfolio dl {
	width:820px;
	margin:0 10px 0 150px;
	position:relative;
}
#portfolio dt {
	width:140px;
	height:130px;
	line-height:130px;
	float:left;
	margin-left:-140px;
	background:#666;
	font-size:14px;
	color:#fff;
	text-decoration:none;
	text-transform:uppercase;
	position:relative;
	clear:left;
}
#portfolio dt strong {
	position:absolute;
	top:50%;left:0;
	width:140px;
	text-align:center;
	display:block;
	line-height:14px;
	height:2em;
	margin-top:-1em;
}

#portfolio dt.web strong {
	margin-top:-.5em;
}
#portfolio dt.other strong {
	background:#666;
}
#portfolio dd {
	width:820px;
	float:left;
}
#portfolio dd li {
	display:block;
	width:200px;
	height:230px;
	float:left;
	z-index:100;
	position:relative;
}
#portfolio dd li:hover {z-index:200;}
#portfolio dd li a {
	position:absolute;
	left:0;top:0;
	width:200px;
	height:130px;
	float:left;
	text-decoration:none;
}
#portfolio dd li a:hover {
	top:-5px;left:-5px;
	border:5px solid #000;
	z-index:300;
}
#portfolio dd li a:hover strong {
	color:#f60;
}
#portfolio dd li a img {
	display:block;
}
#portfolio dd li a strong {
	padding:12px 0 2px 0;
	display:block;
	font-size:14px;
	color:#333;
	line-height:16px;
}
#portfolio dd li a em {
	display:block;
	color:#888;
	font-family:Georgia;
}
#portfolio dt span {
	display:block;
	position:absolute;
	right:-10px;top:50%;
	margin-top:-12px;
	z-index:150;
	width:10px;
	height:24px;
	background:url(../images/arrows.png);
}

#portfolio dl:hover dt span{
	background-position:0 -24px;
}

#portfolio dl:hover dt {
	background:#09f;
}


/* PORTFOLIO PREVIEW */

.folio-info {
	font:normal 14px Tahoma,Verdana,Arial,Serif;
	padding:20px 0 30px 0;
}
.folio-link, .folio-img-title {
	font:italic 14px Georgia;
	color:#000;
}
.folio-img-title {
	text-align:center;
	padding:10px 0 20px 0;
}
.folio-img {
	float:left;
	padding:0;
}
.folio-img a {
	display:block;
	text-align:center;
	float:left;
	padding:0 0 9px 0;
	background:url(../images/img-shadow.png) 50% 100% no-repeat;
}
.folio-img img {
	display:block;
	border:1px solid #d4d4d4;
	border-bottom-color:#888;
}

/* NAV */

a.nav.back {
	display:block;
	float:left;
	margin-left:-150px;
	left:0;
	padding-left:20px !important;
	background:url(../images/nav-arrows.png) 0 18px no-repeat;
}
a.back:hover {
	background-position:0 -42px;
}

/* CONTENT */

#content {
	position:relative;
}
#content p em {
	font:italic 14px Georgia;
}
#content #portfolio-view, #content #contacts, #content #about, #content #brief {
	padding-left:140px;
}
#content #portfolio-view h2, #content #contacts h2, #content #about h2, #content #brief h2 {
	margin:0 0 10px 0;
}

#contact-info {
	font-size:30px;
}
#contact-info dt {
	color:#999;
	font-weight:normal;
}
#contact-info dd a {
	color:#000;
	text-decoration:underline;
}
#contact-info dt, #contact-info dd {
	display:block;
	float:left;
}
#contact-info dt {clear:left;margin:0 .3em 1.1em 0;}
#contact-info dd {clear:right;margin:0 0 1.1em 0;}







#contact-info2 {
	font-size:30px;
}
#contact-info2 .dt {
	color:#999;
	font-weight:normal;
}
#contact-info2 .dd a {
	color:#000;
	text-decoration:underline;
}
#contact-info2 .dt, #contact-info2 .dd {
	display:block;
	float:left;
}
#contact-info2 .dt {clear:left;margin:0 .3em 1.1em 0;}
#contact-info2 .dd {clear:right;margin:0 0 1.1em 0;}


/* ABOUT */

.z1 {z-index:1;}
.z2 {z-index:2;}
.z3 {z-index:3;}
.z4 {z-index:4;}
.z5 {z-index:5;}
.z6 {z-index:6;}

#content #about dl {
	float:left;
	width:265px;
	height:440px;
	position:relative;
	top:60px;
}
#content #about dt {

	height:320px;
	width:300px;
	border-bottom:2px solid #000;
}
#content #about dt img {
	position:absolute;
	left:0;top:0;
}
#content #about dd {
	padding:1.5em 0;
}
#content #about dd h4 {
	font:bold 14px Tahoma,Verdana,Arial,Serif;
}
#content #about dd p {
	font:italic 14px Georgia;
	padding:.2em 0;
}

/* BRIEF */

#brief-form {
	margin:1em 0 0 -10px;
	padding:0 160px 0 0;
}
#brief-form fieldset {
	padding:5px 10px;
	border:1px solid #e0e0e0;
	margin:0 0 1em 0;
}

#brief-form h4 {
	font:bold 14px Tahoma,Verdana,Arial,Serif;
	margin:0 0 .6em 0;
}
#brief-form fieldset p {
	padding:.5em 0;
	width:100%;
	clear:both;
	//zoom:1;
}

#brief-form .left-label label {
	width:120px;
	float:left;
	text-align:right;
	margin:.3em .6em 0 0;
}
#brief-form .left-label input, #brief-form .left-label textarea {
	float:left;
	display:block;
}

a.submit {
	font-size:30px;
	margin-left:140px;
	text-decoration:underline;
	color:#888;
}
a.submit:hover {color:#000;}

/* SLIDER */

.stripNav {display:none;}


.service-link {
    color: #101010;
}

.service-link:HOVER {
    color: #fff;
    background-color: #666666;
    text-decoration: none;
}

.service-header {
	font-size: 30px; font-family: arial;
}

.service-p {
	font-family: tahoma;
	font-size: 14px; 
	padding-top:10px; 
	font-family: sans-serif;
	line-height: 130%;	
}

.formElement {
	font-size: 14px;
	font-family: Tahoma,Verdana,Arial,Serif;
	padding-bottom: 8px;
	display: block;
}

.formElementDescription {
	color: #666;
	font-size: 13px;
	font-family: georgia trebuchet cursive;
	padding-bottom: 18px;
	display: block;
}



.hrbrief {
	margin-top: 5px;
	margin-bottom: 15px;
}

#mapContainer {
 	    position:relative;
        width:940px;
        height:340px;
        z-index:50;
        margin:0 10px;
}

#map {
	position:relative;
    z-index:60;
}
#mapShadow {
        display:block;
        left:0;top:0;
        width:940px;
        height:340px;
        position:absolute;
        z-index:100;
        background:url(../images/shadow.png) 0 0 no-repeat;
}

#foot_navi a {
	color:#666;
	margin: 5px;
}
#foot_navi a:hover {color:#000;}