/* @override http://test.jdhicks.com/css/index.css */

@import "reset.css";

html {
	background: url(../images/footer.jpg) repeat;width:100%;
} 

body{font:14px/18px arial,helvetica,sans-serif; color:#51585b;
	background: url(../images/body.png) repeat-x;
}

a, a:visited{color: yellow; text-decoration:underline}
a:hover{color: white}
a img{border:none}

img[align="right"]{margin:0 0 10px 10px; float:right}

p{margin:14px 0;
	text-align: left;
}

ul{margin:14px 0 14px 20px}

h1{font:bold 33px/33px Arial,Helvetica,sans-serif; margin:0 0 15px 0; color:#1e8783; text-transform:uppercase; text-align:center}
h2{font:bold 24px/24px Arial,Helvetica,sans-serif; text-transform:uppercase; margin:0 0 15px 0}
h3{font:bold 20px/20px Arial,Helvetica,sans-serif; text-transform:uppercase; margin:0 0 15px 0}
h4{font:bold 16px/18px Arial,Helvetica,sans-serif; margin:0 0 15px 0}
h5{font:bold 14px/16px Arial,Helvetica,sans-serif; margin:0 0 15px 0}
h6{font:bold 13px/14px Arial,Helvetica,sans-serif; margin:0 0 15px 0}

button{border:none; background:none; padding:0; cursor:pointer}
input, textarea{width:100%; background:#efefe9; border:1px solid #cecec8; margin:0 0 10px; color:#5e667a; font-family:Arial,Helvetica,sans-serif; font-size:12px}
textarea{height:60px}

.left{float:left}

.left a {
	color: #1e8783;
}
.right{float:right}
.top{vertical-align:top}
.clear{clear:both}
.center{text-align:center}
.margin{margin:0 20px}
.wrap{width: 990px; margin:0 auto}
.error{color:#29a8e6; margin:0 0 5px; display:block}
.hide{display:none}

.header{height:115px;
}
#logo{margin:22px 0 0 0; float:left; position:relative}
#logo a{width: 310px; height: 110px; background:url("../images/logo.png") no-repeat; text-indent:-9999px; display:block; position:absolute; cursor:pointer}

#nav{ margin:11px 0 0 0; list-style:none; position:relative;
	float: right;
}

#nav li{
	float: left;
}

#nav li a{display:block; width:127px; height:90px; text-indent:-9999px; cursor:pointer}

#nav2{ margin: 81px 0 0; list-style:none; position:relative;
	float: right;
}

#nav2 li{
	float: left;
}
#nav2 li a{display:block; width:127px; cursor:pointer;
}
#content{ padding-bottom: 5px; min-height:450px;
	clear: both;
	background: #2ca7d3 url(../images/back.jpg) center top;
}
#copy{width: 425px; float:left; margin: 60px 0 30px;
	background-repeat: no-repeat;
}
#quote{ position:relative;
	text-align: center;
	color: white;
}
.quote{display:block; width:315px; height:34px; position:absolute; bottom: 20px; left:98px}
#feature{width: 535px; float:right; margin: 25px 0 0}
    #services{height:147px; clear:both;
	background: #2ca7d3 url(../images/back.jpg) center 170px;
}
#services .wrap{height:147px;
	background-repeat: no-repeat;
}
#services ul{margin:20px 0 0 0; list-style:none; float:right}
#services ul li a{width: 460px; height:35px; text-indent:-9999px; display:block}
#webdesign a{background:url("../images/webdesign.png") no-repeat right}
#flash a{background: url(../images/advancedflash.png) no-repeat right}
#games a{ background: url(../images/games-interactive.png) no-repeat right}
#valid{height: 57px; border-top:1px solid #bbe4dd; border-bottom:1px solid #d5ecf3;
	background: url(../images/valid.jpg) repeat-x;
}
#valid .wrap{height: 57px;
	background-repeat: no-repeat;
}
#valid p{margin:0}
#valid p a{width:163px; height:61px; background:url("../images/valid-claim.png") no-repeat; margin:16px 0 0 0; text-indent:-9999px; float:left}
#valid #validation{margin:0; list-style:none; float:right}
#valid #validation li{float:left; margin: 17px 0 0 17px}
#valid #validation li a{height:22px; display:block; text-indent:-9999px}
#valid #validation li.xhtml a{width:104px;
	background-repeat: no-repeat;
}
#valid #validation li.css a{width:87px; background:url("../images/css.png") no-repeat}
#valid #validation li.flash a{width:131px; background:url("../images/flash.png") no-repeat}
#mp3player{float:left; margin:20px 0 0 278px}
#footer{height: 65px; background: url(../images/footer.jpg) repeat-x}
#footer a{ height: 30px; background: url(../images/1and1_affiliate_logo.gif) no-repeat; text-indent:-9999px; display:block; float:right; margin: 19px 0 0;
	width: 30px;
}

.pagetop{width:984px;  background: #f0efe9 url("../images/pagetop.jpg") no-repeat; position:relative; top: 40px}
.pagebottom{width:984px;  height: 440px;
	background: url("../images/pagebottom.jpg") no-repeat;
}

.welcometitle{
	background-repeat: no-repeat;
	color: white;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0;
}

#ourportfolio .pagebottom a{margin:40px 40px 0 40px; width:200px !important; height:200px !important; float:left}
#ourportfolio .pagebottom a.webportfolio{padding-top:31px; margin-left:120px}
#ourportfolio .pagebottom a.brandportfolio{padding-top:20px}

/* Web */
#web ul, #print ul, #brand ul{margin:0 0 0 38px; list-style:none}
#web ul li, #print ul li, #brand ul li{float:left; margin:0 20px 6px 0}
#web ul li a, #print ul li a, #brand ul li a{margin:0 !important}
xhtml
#ourservices .left, #ourservices .right{margin:20px 0 0 0}
#ourservices .left{margin-left:30px}

#ourservices .right{margin-right:30px}
#ourservices .left li, #ourservices .right li{width:330px; min-height:48px; margin:0 0 10px; padding:0 0 0 80px; list-style:none !important}
#ourservices .left li a, #ourservices .right li a{width:330px; padding:8px 0 9px 0; color:#666; text-decoration:none; text-transform:uppercase; display:block; background:url("../images/services-link.gif") repeat-x; position:relative; top:8px; cursor:pointer}
#ourservices .left li p, #ourservices .right li p{font-size:12px; line-height:1.2}
#ourservices .left li a:hover, #ourservices .right li a:hover{color:#00969a}
.custom{background:url("../images/services-custom.png") no-repeat 15px 10px}
.flash{background:url("../images/services-flash.png") no-repeat 10px 8px}
.build{background:url("../images/services-build.png") no-repeat 15px 10px}
.wordpress{background:url("../images/services-wordpress.png") no-repeat 24px 10px}
.cms{background:url("../images/services-cms.png") no-repeat 9px 5px}
.seo{background:url("../images/services-seo.png") no-repeat 10px 7px}
.print{background:url("../images/services-print.png") no-repeat 10px 5px}
.identity{background:url("../images/services-identity.png") no-repeat 18px 8px}

#contact{font-size:12px}
#contact .left{width: 380px; height:300px; margin: 14px 0 0 100px}
.contacttitle{width:209px; height:38px; margin:0 0 10px 0;
	background-repeat: no-repeat;
}
#contact ul{margin:0; list-style:none; background:url("../images/dots.gif") repeat-x bottom}
#contact ul li{float:left; padding:10px 0;
	margin-right: 5px;
	margin-left: 5px;
}
.first{}
.twitter, .ichat, .skype, .linkedin, .resume{width: 60px; height: 40px; text-indent:-9999px; display:block; margin:0 0 6px;
	float: left;
}
.twitter{background:url("../images/twitter.png") no-repeat;
	clear: both;
}
.ichat{background:url("../images/ichat.png") no-repeat}
.skype{background: url(../images/skype.png) no-repeat}

.linkedin {
	background: url(../images/linkedin.png) no-repeat;
}

.resume {
	background: url(../images/pdf.png) no-repeat;
}
#contact .right{width:320px; height:300px; margin:0 150px 0 0; background:url("../images/dots.gif") repeat-y left}
#contact form{width:279px; margin:0 0 0 42px}
#contact form button{position:relative; left:190px}
#contact input{width:281px; height:25px; border:none; background:url("../images/input.png") no-repeat; padding:4px; margin:0 !important}
#contact textarea{width:281px; height:131px; border:none; background:url("../images/textarea.png") no-repeat; padding:4px}

#thankyou{width:514px; height:272px; background:url("../images/thankyou.jpg") no-repeat top; text-align:center}
#thankyou p{position:relative; top:60px}

#navigation{position:relative}
#nav{
	position: absolute;
	top: 10px;
	left: 500px;
}
#nav li{height: 80px;  bottom:0; position:relative;
}
#nav a{position:absolute; bottom:0; z-index:2; height:110px; display:block;}
.label{width: 126px; height:30px; color:#006d69; text-transform:uppercase; display:block; text-align:center; font-size:11px; padding:5px 0 0 0; position:absolute; bottom:7px; z-index:1; cursor:pointer;
	background-repeat: no-repeat;
}
#nav .grey, 
#nav .white, 
#nav .blue{position:absolute; display:block; bottom:0;
}
#nav .imgs{position:absolute; top:10px; display:block; height:64px; width: 127px}
#nav li.home{
}
/*
#nav li.portfolio{left:130px}
#nav li.services{left:260px}
#nav li.contact{left: 390px}
*/
#nav li.portfolio{left:130px}
#nav li.services{left:260px}
#nav li.contact{left: 390px}

#ienav { float:right; }
#ienav li { float:left; }
#ienav li.ie-home a { width:127px; height:90px; background:url("../images/ie-home.gif") no-repeat; text-indent:-9999px; display:block; }
#ienav li.ie-portfolio a { width:127px; height:90px; background:url("../images/ie-portfolio.gif") no-repeat; text-indent:-9999px; display:block; }
#ienav li.ie-services a { width:127px; height:90px; background:url("../images/ie-services.gif") no-repeat; text-indent:-9999px; display:block; }
#ienav li.ie-contact a { width:127px; height:90px; background:url("../images/ie-contact.gif") no-repeat; text-indent:-9999px; display:block; }

#slider{width:984px; margin:0 auto; position:relative}
.scroll{width:984px; position:relative; clear:left; margin:0; padding:0}
.scrollContainer div.panel{width:984px}
.hide{display:none}

#easyTooltip{padding:5px; border:1px solid #ccc; background:#34aba6; font-size:12px; color:#fff}

#terms{margin:10px 0 !important;display:block; float:left;border:none;}
#terms fieldset {margin:0;padding:0;}
.requiredfield {color:#29a8e6;}
#agree {clear:both; margin:0 0 10px 10px;}

a.awesome, .awesome{
    background: #222 url(../images/alert-overlay.png) repeat-x;
    display: inline-block;
    padding: 3px 40px 6px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
    background-color: rgb(255, 181, 21);
	font-size: 25px;
}
.blue {background-color: rgb(39, 131, 255);}
.small {padding: 1px 1px 1px;font-size: 12px;height: 20px;width: 100px;}
p#result {margin: 30px;text-align: center;}

#portfolio{position:relative;width: 984px;height: 435px;padding:0;overflow:hidden;
}
#portfolio dd{position:absolute;left:250px;top:-455px;width: 463px;height: 415px;margin:0;padding:0;background: #fff;padding:10px;}
#portfolio dd h3{color: #184f75;
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 0;
}

#portfolio dd a {
	color: #184f75;
	margin-left: 4px;
	border-bottom: 1px dashed gray;
	text-decoration: none;
}
#portfolio dd h4{color: #2d90b7;margin-bottom:0;margin-top:0;
	font-size: 13px;
	font-weight: bold;
}

#portfolio dd p{
	font-size: 11px;
}
#portfolio dd img{display:block;border:3px solid #999999;
	margin: 0 auto;
}
.dt{width:240px;height:65px;background: #2c3031;margin:0;
	color: white;
	font-size: 11px;
	padding: 5px;
}
.dt img{border:2px solid #fff;height:55px;width:55px;float:left;margin-right:5px;cursor: pointer}
.dt a{display:block;color:#fff;text-decoration:none;
	font-size: 13px;
	font-weight: bold;cursor: pointer
}

.dt p {
	color: white;cursor: pointer;
	margin: 0;
}
.dt.left{position:absolute;left:0px;
	height: 63px;
}
.dt.right{position:absolute;right:0px;
	height: 63px;
}