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

/*DAN COLLISON WEB DESIGN*/

/*RESETS*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, input, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{border:none; outline:none; padding:0; margin:0;}

.clear {clear:both;}
a {text-decoration:none; color:#99ccff;}
a:hover {text-decoration:none; color:#C7E2FD;}

/*TEXT AND FONTS*/
h1 {font-weight:bold; font-style:italic;}
h2 {color:#99ccff;}
h4 {font-weight:bold; font-style:italic; font-size:1.6em;}
h5 {color:#99ccff; font-size:1.2em;}
h6 {color:#99ccff; font-size:1.2em; font-weight:normal;}
h6.title {display:none;}

p.main-text {font-size:1.1em;}
p.testim {font-style:italic; color:#C7E2FD;}
span.details {font-size:.8em;}

/*CSS LINKS*/
a.logo {display:block; text-indent:-9999em; overflow:hidden; width:330px; height:100px; background:url(../images/site-layout/logo.png) no-repeat;}

h3 a {display:block; text-indent:-9999em; position:relative; overflow:hidden;}

h3 a.web1, h3 a.web1:hover {background:url(../images/site-layout/web-link.png); margin:-30px 0 0 360px; width:230px; height:60px;}
h3 a.web1 {background-position:top;}
h3 a.web1:hover {background-position:bottom;}

h3 a.latest1, h3 a.latest1:hover {background:url(../images/site-layout/latest-link.png); margin:-20px 0 0 130px; width:150px; height:50px;}
h3 a.latest1 {background-position:top;}
h3 a.latest1:hover {background-position:bottom;}

h3 a.coming1, h3 a.coming1:hover {background:url(../images/site-layout/coming-link.png); margin:-20px 0 0 120px; width:160px; height:50px;}
h3 a.coming1 {background-position:top;}
h3 a.coming1:hover {background-position:bottom;}

h3 a.featured1, h3 a.featured1:hover {background:url(../images/site-layout/featured-link.png); margin:-20px 0 0 110px; width:170px; height:50px;}
h3 a.featured1 {background-position:top;}
h3 a.featured1:hover {background-position:bottom;}

h3 a.early1, h3 a.early1:hover {background:url(../images/site-layout/early-link.png); margin:-20px 0 0 140px; width:140px; height:50px;}
h3 a.early1 {background-position:top;}
h3 a.early1:hover {background-position:bottom;}

h3 a.sneak1, h3 a.sneak1:hover {background:url(../images/site-layout/sneak-link.png); margin:-20px 0 0 110px; width:170px; height:50px;}
h3 a.sneak1 {background-position:top;}
h3 a.sneak1:hover {background-position:bottom;}

/*MAIN LAYOUT*/
body {background:#036 url(../images/site-layout/body-x2.png) repeat-x; color:#FFF; font-family:Arial, Helvetica, sans-serif; line-height:20px;}
.body-home {background:#036 url(../images/site-layout/body-x.png) repeat-x;}
#outter-wrapper {width:960px; margin:0 auto; font-size:.8em;}
#header-wrapper {width:960px; height:120px; margin:0 auto; padding-top:20px; background:url(../images/site-layout/header-bg.png) no-repeat; float:left;}
#logo-wrapper {width:500px; float:left;}
#signup {width:460px; float:left; margin:53px 0 0 0;}
#main-nav {width:960px; height:50px; margin:0 auto; background:url(../images/site-layout/nav-bg.png) no-repeat right; float:left; overflow:hidden;}
#content-wrapper {width:960px; float:left;}
#footer-wrapper {width:940px; height:240px; margin:0 auto; padding-top:30px; background:url(../images/site-layout/footer-bg.png) no-repeat; float:left;}

.blue-wrapper, .blue-wrapper2 {width:960px; margin:10px 0; float:left; background:#1a4876 url(../images/site-layout/port-bg.png) repeat-x; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -khtml-border-radius:10px;}
.blue-wrapper li {list-style-type:none;}
.blue-wrapper ul {margin-bottom:10px;}

.blue-wrapper2 {margin:20px 0;}

/*MAIN NAV*/
#main-nav li {display:inline;}
#main-nav li a {display:block; height:50px; float:left; text-indent:-9999em;}

#main-nav li a.nav1, #main-nav li a.nav1:hover, #main-nav li a.sel1 {width:130px; background:url(../images/nav/nav1.png);}
#main-nav li a.nav2, #main-nav li a.nav2:hover, #main-nav li a.sel2 {width:160px; background:url(../images/nav/nav2.png);}
#main-nav li a.nav3,#main-nav li a.nav3:hover, #main-nav li a.sel3 {width:170px; background:url(../images/nav/nav3.png);}
#main-nav li a.nav4, #main-nav li a.nav4:hover, #main-nav li a.sel4 {width:170px; background:url(../images/nav/nav4.png);}
#main-nav li a.nav5, #main-nav li a.nav5:hover, #main-nav li a.sel5 {width:160px; background:url(../images/nav/nav5.png);}
#main-nav li a.nav6, #main-nav li a.nav6:hover, #main-nav li a.sel6 {width:170px; background:url(../images/nav/nav6.png);}

#main-nav li a.nav1, #main-nav li a.nav2, #main-nav li a.nav3, #main-nav li a.nav4, #main-nav li a.nav5, #main-nav li a.nav6 {background-position:top;}

#main-nav li a.nav1:hover, #main-nav li a.sel1, #main-nav li a.nav2:hover, #main-nav li a.sel2, #main-nav li a.nav3:hover, #main-nav li a.sel3, #main-nav li a.nav4:hover, #main-nav li a.sel4, #main-nav li a.nav5:hover, #main-nav li a.sel5, #main-nav li a.nav6:hover, #main-nav li a.sel6 {background-position:bottom;}

/*Signup Form*/
.signup-field {border:#396ea4 solid 1px; background:none; width:208px; height:16px; float:left; margin:0 0 0 10px; padding:6px 5px; color:#f1f1f1; font-size:.9em;}
.signup-btn {border:none; float:right; margin:-30px 0 0 0;}
.join {text-align:right; margin:0 0 5px 0;}

/*logos*/
#logos {width:960px; height:70px; overflow:hidden;}
#logos li {display:inline; float:left;}
#logos li a {display:block; text-indent:-9999em;}

#logos li a.w3schools {width:114px; height:27px; margin:20px 0 0 160px; background:url(../images/logos/w3schools.png);}
#logos li a.w3c {width:80px; height:42px; margin:12px 0 0 30px; background:url(../images/logos/w3c.png);}
#logos li a.apple {width:45px; height:56px; margin:0 0 0 32px; background:url(../images/logos/apple.png);}
#logos li a.adobe {width:46px; height:63px; margin:2px 0 0 32px; background:url(../images/logos/adobe.png);}
#logos li a.firefox {width:55px; height:51px; margin:10px 0 0 33px; background:url(../images/logos/firefox.png);}
#logos li a.teesside {width:131px; height:40px; margin:13px 0 0 32px; background:url(../images/logos/teesside.png);}

#logos li a.w3schools, #logos li a.w3c, #logos li a.apple, #logos li a.adobe, #logos li a.firefox, #logos li a.teesside {opacity:.6;}
#logos li a.w3schools:hover, #logos li a.w3c:hover, #logos li a.apple:hover, #logos li a.adobe:hover, #logos li a.firefox:hover, #logos li a.teesside:hover {opacity:1;}

/*footer*/
#footer-wrapper a {color:#FFF;}
#footer-wrapper a:hover {color:#99ccff;}
#footer-nav {margin:25px 0 0 10px; float:left;}
#footer-nav li {display:inline; margin-left:15px;}
#copy {margin:25px 10px 0 0; float:right; text-align:right;}

/*HOME LAYOUT*/
#home-text {width:300px; margin:10px; padding-top:30px; float:left;}
#cv {height:50px; margin-top:60px;}
#pdf {width:42px; height:42px; background:url(../images/site-layout/PDFicon.png) no-repeat; float:right; margin:-62px 30px 0 0;}
#home-flash {width:600px; height:420px; margin:20px 0 10px 20px; padding:10px; position:relative; float:left; background:url(../images/site-layout/flash-bg.png) no-repeat;}
#teaser-wrapper {width:960px; margin:10px 0 30px 0; float:left;}
.teaser {width:280px; height:130px; margin:10px; padding:10px; float:left; background:url(../images/site-layout/teaser-bg.png) no-repeat; position:relative;}

.hi {margin-top:10px;}
.qual {margin-top:20px;}
.home1 {margin-top:10px;}

/*PORTFOLIO LAYOUT*/
.port-img1 {width:440px; height:308px; margin:10px; padding:10px; float:left; background:url(../images/site-layout/port-img-bg.png) no-repeat;}
.port-text1 {width:450px; margin:10px; float:left;}
.port-text2 {width:450px; margin:10px; padding-left:10px; float:left; text-align:right;}
#totop {text-align:center; padding:10px;}

.tech-box {margin:10px 0 0 0;}
.tech-box img {margin:0 0 0 5px;}


/*STANDARDS LAYOUT*/
#stan-left {width:260px; margin:10px; float:left; padding:20px 10px 20px 20px;}
#stan-right {width:620px; margin:10px; float:left;}
#home-flash2 {width:600px; height:411px; margin:20px 10px 10px 10px; padding:10px; position:relative; float:left; background:url(../images/site-layout/flash-bg2.png) no-repeat;}
.line1 {height:1px; background:#16426e; margin:-5px 0 15px 0;}

/*WORKFLOW LAYOUT*/
.flow-left {width:435px; margin:20px 15px 0 30px; padding-bottom:20px; float:left;}
.flow-right {width:435px; margin:20px 30px 0 15px; padding-bottom:20px; float:left;}
.flow-big {text-align:center; margin:20px 0;}
.flow-sen {text-align:center; margin:0 auto 20px auto; width:880px;}

/*ABOUT ME LAYOUT*/
.about-left {width:300px; margin:10px; float:left;}
.about-mid {width:300px; margin:10px; padding-top:20px; float:left;}
.about-right {width:300px; margin:10px; padding-top:20px; float:left;}
.about-image1 {margin:-30px 0 0 -30px; position:relative; float:left;}

/*CONTACT LAYOUT*/
#form-wrapper {width:280px; margin:10px; float:left; padding:20px 0 0 20px;}
.form-field1 {width:240px; height:20px; padding:10px; background:url(../images/site-layout/form-field-bg.png) no-repeat; border:0; margin-bottom:20px; color:#FFF; font-size:1.05em;}
.form-field2 {width:240px; height:70px; padding:10px; background:#c6d1dd; border:0; margin-bottom:20px; color:#FFF; font-size:1.05em; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; font-family:Arial, Helvetica, sans-serif;}
.form-field1:focus, .form-field2:focus {color:#333;}
.form-btn {width:270px; height:50px; background:none; border:none; margin-left:-5px;}

#social-wrapper {width:300px; margin:10px; float:left; padding-top:20px;}
#soc-box {width:300px; padding-top:20px; margin-bottom:20px; background:#c6d1dd; text-align:center; -moz-border-radius:5px; -webkit-border-radius:5px;  border-radius:5px;}
#soc-box img {margin-bottom:20px;}
#soc-box img:hover {opacity:.8;}

#working {width:280px; margin:20px; float:left; padding-top:10px;}

/*FORM VALIDATION*/
/*input, select {border:1px solid #888; background:#fff; padding:3px 4px; color:#222; margin:0px 5px 0px 0px; border-radius:7px; -moz-border-radius:7px;}*/
input:focus, select:focus {outline:none;}
.InputGroup {display:inline-block; padding:3px 4px; border:1px solid #FFF; border-radius:7px; -moz-border-radius:7px;}
.ErrorField {color:#D00;}
span.ValidationErrors {display:none; font-size:12px; color:#D00; padding-left:10px; font-style:italic; width:200px; height:30px;}

/*THANKS LAYOUT*/
a.logo2 {display:block; text-indent:-9999em; width:330px; height:100px; margin:0 auto; background:url(../images/site-layout/logo.png) no-repeat;}
#results {margin-top:80px; text-align:center;}