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

@font-face {
font-family: 'FranklinGothicHeavyRegular';
src: url('frahv-webfont.eot?') format('eot'),
url('frahv-webfont.woff') format('woff'),
url('frahv-webfont.ttf') format('truetype'),
url('frahv-webfont.svg#webfont9aKz0eVj') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'DesyrelRegular';
src: url('../fonts/desyrel-webfont.eot?') format('eot'),
url('../fonts/desyrel-webfont.woff') format('woff'),
url('../fonts/desyrel-webfont.ttf') format('truetype'),
url('../fonts/desyrel-webfont.svg#webfontDHYUuUJT') format('svg');
font-weight: normal;
font-style: normal;
} 

div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    border: 0 none;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}

body{
	margin:0px;
	font-family:Helvetica, Arial,sans-serif;
	}
	
.container{
	}
	
.topbg{
	background-image:url(../images/top_bg.png);
	background-repeat:repeat;
	}

.topcontainer{
	width:100%;
	background-image:url(../images/page_top_bg.jpg);
	background-position:top center;
	background-repeat:repeat-x;
	}
	
.abtcontainer{
	margin:auto;
	background-image:url(../images/section_divider.png);
	background-position:bottom;
	background-repeat:repeat-x;
	}

.abtwidth{
	width:1002px;
	margin:auto;
	}
	
.logo{
	padding-top:120px;
	}
.description{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:center;
	color:#616161;
	padding:25px 0px 20px 0px;
	}
	
.perhaps{
    font-family: 'DesyrelRegular',Arial,sans-serif;
    font-variant: normal;
	color: #E13601;
	letter-spacing:1px;
	font-size:30px;
}

.helpu{
    font-family: 'DesyrelRegular',Arial,sans-serif;
    font-variant: normal;
	color: #E13601;
	letter-spacing:1px;
	font-size:30px;
	width:1002px;
	text-align:right;
	padding:20px 0px 20px 0px;
}

.bighead{
	}

.bigheading {
    color: #535866;
    font-family: FranklinGothicHeavyRegular;
    font-size: 93px;
	font-weight:bolder;
	letter-spacing: -3px;
    line-height: 74px;
    text-shadow: 1px 1px 3px #666666;
    vertical-align: baseline;
	width:1002px;
	text-align:center;
}

.headingOver {
    background-image: url("../images/shadow_bg.png");
    background-position: center top;
    background-repeat: no-repeat;
    clear: both;
    height: 330px;
    margin-top: -25px;
    position: relative;
    width: 980px;
    z-index: 3;
}



.SeviceColumn ul {
    color: #3D414C;
    list-style-type: none;
    margin: 0 auto;
    position: relative;
    text-align: left;
    width: 980px;
}


.SeviceColumn ul li {
    background-image: url("../images/dot_underline.png");
    background-position: center bottom;
    background-repeat: repeat-x;
    float: left;
    font-size: 12px;
    margin-left: 70px;
    padding-bottom: 2px;
    padding-left: 2px;
    padding-top: 10px;
    position: relative;
    text-transform: uppercase;
    width: 225px;
}

.SeviceColumn ul li:hover {
    color: #963715;
    font-weight: bold;
}

.menu{
	width:1002px;
	padding-top:190px;
	}
	
#navigation{
	margin:0 auto;
	width:384px;
	overflow:hidden;
	box-shadow:0px 2px 2px rgba(0,0,0,0.07);
	-moz-box-shadow:0px 2px 2px rgba(0,0,0,0.07);
	-webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.07);
	border-radius:100px;
	-moz-border-radius:100px;
	-webkit-border-radius:100px;
}
#navigation ul{
	margin:0px;
	padding:0px;
}
#navigation li{
	list-style:none;
	float:left;
	border:1px solid #BABABA;
	border-left:1px solid #FFF;
	border-top:1px solid #BABABA;
	background:#F8F8F8; /* old browsers */
	background:-moz-linear-gradient(top, #F8F8F8 0%, #ECECEC 100%); /* firefox */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#F8F8F8), color-stop(100%,#ECECEC)); /* webkit */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#F8F8F8', endColorstr='#ECECEC',GradientType=0 ); /* ie */
	background-image:-o-linear-gradient(top, #F8F8F8 0%, #ECECEC 100%); /* opera */
	box-shadow:inset 0 1px 0px rgba(255,255,255,1);
	-moz-box-shadow:inset 0 1px 0px rgba(255,255,255,1);
	-webkit-box-shadow:inset 0 1px 0px rgba(255,255,255,1);
}
#navigation li:hover,
#navigation li.active{
	background:#494949; /* old browsers */
	background:-moz-linear-gradient(top, #494949 0%, #242424 100%); /* firefox */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#494949), color-stop(100%,#242424)); /* webkit */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#242424',GradientType=0 ); /* ie */
	background-image:-o-linear-gradient(top, #494949 0%, #242424 100%); /* opera */
	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	border:none;
}
#navigation ul li a{
	font-size:11px;
	font-weight:600;
	color:#444;
	text-shadow:0px 1px 0px #FFF;
	text-decoration:none;
	display:block;
	text-align:center;
	padding:10px 0px 7px 0px;
}
#navigation ul li a:hover,
#navigation ul li.active a{
	padding:11px 1px 8px 1px;
	color:#FFF;
	text-shadow:-1px 0 0 #000;
}
#navigation li.link-about{
	border-left:1px solid #BABABA;
	border-radius:100px 0px 0px 100px;
	-moz-border-radius:100px 0px 0px 100px;
	-webkit-border-radius:100px 0px 0px 100px;
}
#navigation li.link-about:hover{
	border-left:0px;
}
#navigation ul li.link-work a{
	width:94px;
}
#navigation ul li.link-about a{
	width:94px;
}
#navigation ul li.link-process a{
	width:94px;
}
#navigation ul li.link-contact a{
	width:94px;
}
#navigation li.link-contact{
	border-radius:0px 100px 100px 0px;
	-moz-border-radius:0px 100px 100px 0px;
	-webkit-border-radius:0px 100px 100px 0px;
}

/* --- myworks --- */

.myworkscontainer{
	margin:auto;
	background-image:url(../images/section_divider.png);
	background-position:bottom;
	background-repeat:repeat-x;
}

.myworksbg{
	background-image:url(../images/work_bg.png);
	background-position:top;
	background-repeat:repeat;
	}

.myworkswidth{
	width:1002px;
	margin:auto;
	}
	
.myworks{
	text-align:center;
	padding:25px 0px 50px 0px;
	}
	
#work{
	margin:auto;
	padding-bottom:50px;
	}
	
#work .work-items{
	overflow:hidden;
}

#work .work-items li{
	width:300px;
	list-style:none;
	float:left;
	margin:0 21px 20px 20px;
	position:relative;
}
#work .work-items li a{
	color:#444;
}
#work .work-items li.last{
	margin-right:0px;
}

#work .work-title{
	font-size:11px;
	font-weight:bold;
	margin:10px 0 0 0;
	height:25px;
	float:left;
}
#work .work-image{
	width:260px;
	height:139px;
	padding:10px;
	display:block;
	background:url(../images/portfolio-item-bg.png);
}
#work .work-role{
	color:#999;
	font-size:12px;
	padding:9px 0 0 5px;
	float:left;
}


/* ---  process css --- */

.processcontainer{
	margin:auto;
	background-image:url(../images/section_divider.png);
	background-position:bottom;
	background-repeat:repeat-x;
}

.processbg{
	background-image:url(../images/top_bg.png);
	background-position:top;
	background-repeat:repeat;
	}

.processwidth{
	width:1002px;
	margin:auto;
	height:635px
	}
	
.processhd{
	font-size:48px;
	font-weight:bolder;
	text-shadow:2px 2px 0px #DFDFDF;
	text-align:center;
	padding:40px 0px 20px 0px;
	}
	
#theprocess {
    background: url("../images/process_geek_bg.png") no-repeat scroll 10px center transparent;
    height: 400px;
    padding: 25px 0;
    position: relative;
}

.wrap {
    margin: 0 auto;
    width: 940px;
}

#theprocess li {
	position:absolute;
	width:200px; 
	list-style:none;
	}
	
#theprocess h3 {
	padding:0 0 4px 0;
	font-weight:bold;
	}
	
#theprocess h3 a:link,
#theprocess h3 a:visited {color:#e0692d;}
#theprocess h3 a:hover {color:#fff; background-color:#069;}
#theprocess p {font-size:12px;line-height:1.4em;color:#8D8D8D;}

#theprocess p a{
	text-decoration:underline;
	color:#8D8D8D;
	}
	
#theprocess p a:hover{
	color:#FFF;
	text-decoration:none;
	background-color:#069;
	}

#p_1 {top:40px;left:150px;}
	#p_1 span {display:block;width:67px;height:67px;position:absolute;top:0;left:-87px;}
	#p_1 span a:link,
	#p_1 span a:visited {display:block;width:100%;height:100%;border:none;text-indent:-9999px;}
	#p_1 span a:hover {background:transparent;}
#p_2 {top:182px;left:90px;}
#p_3 {top:312px;left:207px;}
#p_4 {top:80px;left:450px;}
#p_5 {top:340px;left:600px;}
#p_6 {top:180px;left:715px;}

/* --- process css ends  */

/*  --- contact form starts  ---  */

.contactcontainer{
	margin:auto;
	background-image:url(../images/footer_bg.png);
	background-position:center bottom;
	background-repeat:repeat-x;
}

.contactbg{
	background-image:url(../images/work_bg.png);
	background-position:top;
	background-repeat:repeat;
	}

.contactwidth{
	width:1002px;
	margin:auto;
	height:635px
	}
	
.contacthd{
	font-size:72px;
	font-weight:bolder;
	text-shadow:2px 2px 0px #DFDFDF;
	text-align:center;
	padding:40px 0px 20px 0px;
	}
	
.contacttext{
	float:left;
	width:400px;
	padding:0px 40px 0px 20px;
	}
	
.contactsubhd{
	font-size:32px;
	font-weight:bolder;
	text-shadow:2px 2px 0px #DFDFDF;
	padding:40px 0px 20px 0px;
	}
	
.contactsmalltext{
	font-size:16px;
	color:#8D8D8D;
	}
	
.contactform{
	float:left;
	width:520px;
	padding:40px 0px 20px 0px;
	}
	
.contactrow{
	float:left;
	height:20px;
	padding:10px 0px 10px 0px;
	}
	
.leftinput{
	float:left;
	}
	
.rightinput{
	float:left;
	padding-left:20px;
	}
	
input{
	border: 1px solid #BABABA;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 2px 0 rgba(0, 0, 0, 0.03) inset;
    color: #999999;
    font-size: 13px;
    width: 216px;
	padding:5px;
	}
	
	
textarea{
	border: 1px solid #BABABA;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 2px 0 rgba(0, 0, 0, 0.03) inset;
    color: #999999;
    font-size: 13px;
    height: 100px;
    width: 464px;
	padding:5px;
	}
	
.submitbtn{
	float:left;
	width:473px;
	padding-top:100px;
	}
	
.button.red {
    background: -moz-linear-gradient(center top , #FF3019 0%, #CF0404 100%) repeat scroll 0 0 transparent;
    border: 1px solid rgba(106, 0, 0, 0.3);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 #992029;
}

.button {
    background: -moz-linear-gradient(center top , #F8F8F8 0%, #ECECEC 100%) repeat scroll 0 0 transparent;
    border: 1px solid #BEBDBD;
    border-radius: 100px 100px 100px 100px;
    box-shadow: 0 1px 0 #FFFFFF inset;
    color: #444444;
    display: inline;
    font-size: 14px;
    padding: 6px 12px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 #FFFFFF;
}

.right {
    float: right;
}
	
	
/*  --- contact form ends  ---  */

/* --- totop --- */
#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:40px;
	height:80px;
	border:none;
	text-indent:-999px;
	background:url(../images/ui.totop.png) no-repeat left top;
}

#toTopHover {
	background:url(../images/ui.totop.png) no-repeat left top;
	width:40px;
	height:80px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
	outline:none;
}

/*  --- social elements --- */

#sidebar { 
		position:absolute;
		margin:0px;
		top:25px;
		left:15px;
		width:40px;
		height:220px;
		z-index:200;
	}
	
#sidebar li{
    border-radius: 100px 100px 100px 100px;
    list-style: none outside none;
    margin: 0 0 10px;
}
	
#sidebar li a {
	height:50px;
	width:40px;
	display:block;
	text-indent:-9999px;
	background:url(../images/icon-sprite.png);
}
	
#sidebar li a.twitter {
    background-position: -35px 0px;
}

#sidebar li a.twitter:hover{
	background-position:-35px 76px;
}

#sidebar li a.facebook{
	background-position:-184px 0px;
}
#sidebar li a.facebook:hover{
	background-position:-184px 76px;
}

#sidebar li a.linkedin{
	background-position:-78px 0px;
}
#sidebar li a.linkedin:hover{
	background-position:-78px 76px;
}