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

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, 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,  article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary,  time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0; 
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}    
article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
body {
	background:url(../img/panel-bg.gif) repeat #212121;
	margin:0;
	padding:0;
	font-family:"Myriad Pro", Arial;
} 
#mainwrapper{
	width:100%;
	height:768px;
	margin:0 auto;
	background:url(../img/wall-bg.gif) repeat-x;
}
#main {
	width:1170px;
	height:768px;
	margin:0 auto;
}
#header {
	height:80px; 
	width:100%;
}

.home #homeheader{width:216px; height:57px; background-image:url(../img/homesprite.png); background-position:0px -13px; margin:80px 0 6px 30px;}
.home .next{width:214px; height:77px; background-image:url(../img/homesprite.png); background-position:0px -79px; margin:200px 0 0 256px;}
.home .next:hover{background-position:0px -160px; cursor:pointer;}
#nav{width:1030px;margin:0 auto; padding-top:17px}
#nav a{background-image:url(../img/ns.gif); background-repeat:no-repeat; float:left; content:" ";  display:block; }  
#nav .n-welcome{width:112px; height:23px; background-position:-3px -35px; margin-left:3px; margin-top:34px;}
#nav .n-welcome:hover{background-position:-3px -91px;}
#nav .n-vd{width:91px; height:22px; background-position:-149px -27px; margin-left:35px; margin-top:25px;}
#nav .n-vd:hover{background-position:-149px -83px;}
#nav .n-ux{width:160px; height:23px; background-position:-277px -19px; margin-left:36px; margin-top:17px;}
#nav .n-ux:hover{background-position:-277px -75px;}
#nav .n-logo{width:174px; height:48px; background-position:-469px -3px; margin-left:32px; margin-top:3px;}
#nav .n-logo:hover{background-position:-469px -58px;}
#nav .n-highlights{width:146px; height:26px; background-position:-669px -22px; margin-left:31px; margin-top:21px;}
#nav .n-highlights:hover{background-position:-669px -78px;}
#nav .n-affiliations{width:176px; height:32px; background-position:-848px -29px; margin-left:29px; margin-top:30px;}
#nav .n-affiliations:hover{background-position:-848px -85px;}
#logo {
	width:245px;
	height:75px;
	background:url(../img/logo-script.png) 18px 0px no-repeat;
	margin:9px auto 0;
}
#logo:hover {
	background:url(../img/logo-script.png) 18px -75px no-repeat;
}
#logo a {
	width:245px;
	height:75px;
	display:block;
}
#contents {
	width:228px;
	height:30px;
	float:right;
	background:url(../img/contents.png) no-repeat top;
}
#book {
	width:1170px;
	background:url(../img/stage.jpg) no-repeat top;
	height:556px;
	padding-top:84px;

}
#book .top {
	height:18px;
	width:100%;
	background:url(../img/book-top.png) no-repeat top;
}
#book .bot {
	height:9px;
	width:100%;
	background:url(../img/book-bot.png) no-repeat top;
}
#mybook {
	width:960px;
	height:500px;
	margin-left:111px;
	/*background:url(../img/book.png) no-repeat top #dddddd;*/
}
#footer {
	margin-top:10px; width:100%;
}
#footer #pages{margin:-29px 560px 0; width:66px;}
#footer a, #footer div{background-image:url(../img/footer.png); display:block;}
#footer .pageleft{width:29px; height:29px; background-position:-4px -6px; float:left; display:block; cursor:pointer;}
#footer .pageleft:hover{background-position:-4px -45px}
#footer .pageright{width:29px; height:29px; background-position:-48px -6px; display:block; float:right; cursor:pointer;}
#footer .pageright:hover{background-position:-48px -45px}
#footer a.email{ background-position:-95px -13px; width:161px; height:16px; float:right;}
#footer a.email:hover{background-position:-95px -52px;}
#footer a.twitter{background-position:-274px -13px; width:179px; height:16px; float:left;}
#footer a.twitter:hover{background-position:-274px -52px;}
.page{width:480px; float:left; height:500px;}
.homeheader {
	width:420px;
	height:120px;
	margin:22px 0px 8px 18px;
}
.homemag {
	width:420px;
	height:129px;
	margin-top:10px;
	margin-bottom:10px;
	margin-left:15px;
}
.homebook {
	width:420px;
	height:169px;
	margin:17px;
}
.homenav {
	width:390px;
	height:142px;
	margin:18px 28px;
	background:url(../img/home-nav.png) no-repeat top;
}
.homenav ul {
	margin-top:-1px;
}
.homenav ul li {
	width:176px;
	float:left;
	line-height:22px;
	color:#333;
	margin-left:16px;
	padding-top:11px;
}
.homenav ul li span {
	float:right;
	width:20px;
	line-height:20px;
	margin-right:5px;
	text-align:center;
	color:#C63F0B;
	font-size:15px;
	font-weight:bold;
}
.homenav ul li a {
	text-decoration:none;
	color:#03899C;
	font-weight:bold;
}
.homenav ul li a:hover {
	border-bottom:1px dotted #333;
	color:#C63F0B;
}
#book .home p {
	font-size:18px;
	line-height:27px;
	color:#fff;
	margin:0px 25px 0px 32px;
}
.home em {
	font-weight:normal;
	color:#c63f0b;
}
#twtr-widget-1 .twtr-new-results, #twtr-widget-1 .twtr-results-inner, #twtr-widget-1 .twtr-timeline {
	background:none;
}

/*====================*/
/*=== Other Styles ===*/
/*====================*/
.vd-header{margin:0;}
.vd-header img{margin:-10px 0 12px -9px;}
.vd-proj{margin-bottom:60px; margin-top:0px;}
/* .vd-proj img {width:125px; height:100px; border:1px solid #54371A; margin-bottom:20px; -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	}
.vd-proj img:hover{width:150px; height:120px; margin:-12px -5px 9px; -moz-box-shadow: 0px 0px 3px #fff;
-webkit-box-shadow: 0px 0px 3px #fff;
box-shadow: 0px 0px 3px #fff;}
.vd-proj li{
	text-align:center;
	float:left;
	font-size:17px;
	text-transform:uppercase;
	color:#ccc;
	background:#ccc;
} */
#cs {display: block;
    font-size: 26px;
    margin: 228px 0 0 515px;}
.vd-proj li a{color:#c7c9c9; font-size:18px; text-decoration:none;}
.vd ul li{float:left; text-align:left; display:block;}
.vd ul li a{margin:0;}
.vd ul li a span{opacity:0; text-transform:uppercase; color:#eee; background:#222; -moz-transition: all .3s ease-in-out;
-webkit-transition:all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out ;}
	.vd ul.large a span{font-size:15px; padding:6px 10px; position:absolute; margin:94px 1px; display:block;}
	.vd ul.med a span{font-size:13px; display:block; margin:93px 7px; padding:6px 9px; position:absolute;}
	.vd ul.small a span{font-size:11px; display:block; position:absolute; margin:88px 20px; padding:4px 8px;}
.vd ul li a:hover span{ opacity:0.9; }
.vd ul li  img{background:url(../img/rework/sprite.jpg); border:1px solid #666; width:150px; height:120px; margin:0; display:block; float:left; 
	-webkit-box-shadow: 0px 2px 1px 2px rgba(0, 0, 0, .5);
-moz-box-shadow: 0px 2px 1px 2px rgba(0, 0, 0, .5);
box-shadow: 0px 2px 1px 2px rgba(0, 0, 0, .5); 
-moz-transition: all .3s ease-in-out;
-webkit-transition:all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;}
.vd li.wr img{background-position:0px 0px;}
.vd li.wwp img{background-position:0px -150px;}
.vd li.dp img{background-position:0px -300px;}
.vd li.firststring img{background-position:0px -450px;}
.vd li.hotseat img{background-position:0px -600px;}
.vd li.inbahx img{background-position:0px -750px;}
.vd li.mobile img{background-position:0px -900px;}
.vd li.statefarm img{background-position:0px -1200px;}
.vd li.studio img{background-position:0px -1350px;}
.vd li.recycling img{background-position:0px -1050px;}
.vd ul.large{margin:-8px 0 49px; height:148px;}
.vd ul.large li a{width:150px; display:block;}
/*.vd ul.med li a{width:120px; display:block;}
.vd ul.small li a{width:100px; display:block;}*/
.vd ul.med {height: 89px;  margin:-12px 17px 12px;}
.vd ul.small{margin:0px;}
.vd ul.large li  img{ -moz-transform: scale(0.8);  -webkit-transform: scale(0.9); margin-bottom:10px; }
.vd ul.large li img:hover{ -moz-transform: scale(1);  -webkit-transform: scale(1);} 
.vd ul.med li  img{ -moz-transform: scale(0.7);  -webkit-transform: scale(0.7); }
.vd ul.med li img:hover{ -moz-transform: scale(0.9);  -webkit-transform: scale(0.9);}
.vd ul.small li  img{ -moz-transform: scale(0.6);  -webkit-transform: scale(0.6);}
.vd ul.small li img:hover{ -moz-transform: scale(0.75);  -webkit-transform: scale(0.75);}

.vd ul.large li{margin:21px 26px 12px 4px;; width:120px; height:100px; }
.vd ul.med li{ margin:7px; width:116px; height:87px;}
.vd ul.small li{ margin:9px 9px 0 0; width:96px; height:88px;}
p.split-left{margin:22px 18px 0px;}
p.split-right{margin:197px 15px 0}
p.ux-right{margin:21px 15px 0;}
p.split-left span, p.split-right span, p.ux-right span{color:#a03c16; font-size:20px;}
#book p{ color: #333333;
    font-size: 18px;
    line-height: 27px;}
.ux-header{margin:-11px 0 0 -12px;}
.ux-fs{background-image:url(/img/ux/fs-t.jpg);}
.ux-gs{background-image:url(/img/ux/gs-t.jpg);}
.ux-l360{background-image:url(/img/ux/l360-t.jpg);}
.ux-rm{background-image:url(/img/ux/rm-t.jpg);}
.clear {
	clear:both;
}
.aboutchart {
	width:416px;
	height:213px;
	margin:17px 0 24px 23px;
}
.about p {
	font-size:19px;
	line-height:27px;
	color:#333;
	margin:0px 15px 0px 30px;
}
.highlightheader {
	width:420px;
	height:55px;
	margin:14px 0 10px 15px;
}
ul.highlights, ul.news {
	width:410px;
	height:345px;
	padding:4px;
	margin:10px 0 0 22px;
	background:url(../img/newsbox.png) no-repeat top left;
	overflow:auto;
}
ul.highlights li {
	padding:10px 10px 5px 69px;
	border-bottom:1px dotted #555;
	font-size:13px;
	color:#333;
	line-height:18px;
	background:url(../img/dates.png) 3px 5px no-repeat;
}
ul.n-highlights{
	width:410px;
	margin:7px 0 0 22px;	
}
ul.uxproj li{
width:205px; height:94px; border:1px solid #aaa; float:left; margin:11px;
-moz-transition: all .3s ease-in-out;
-webkit-transition:all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
ul.uxproj li:hover{margin-top:0px;}
ul.uxproj a{width:100%; height:94px; display:block; text-decoration:none;}
ul.uxproj span{position:absolute; margin:74px 0 0 0px; background:#555; color:#fff; font-size:12px; padding:4px;}
ul.uxproj{margin-top:10px;}
ul.n-highlights li{
	padding:9px 8px 6px 67px;
	border-top:1px dotted #bbb383;
	font-size:13px;
	line-height:18px;
	background:url(../img/n-dates.png) 3px 5px no-repeat;	
}
ul.news li{
	padding:10px 2px;
	border-bottom: 1px solid  #ccc;
	font-size:14px;
	line-height:18px;
	margin:0 9px;	
}
ul.news li:hover{background:#eee;}
ul.news li a{color:#03899C; text-decoration:none;}
ul.news li a:hover{border-bottom:1px dotted #03899C;}
ul.n-highlights li em {
	color:#A03C16;
}
.highlight-right{padding-top:23px;}
ul.highlights li.y99, ul.n-highlights li.y99 {
	background-position:1px -905px;
}
ul.highlights li.y00, ul.n-highlights li.y00 {
	background-position:1px -841px;
}
ul.highlights li.y01, ul.n-highlights li.y01 {
	background-position:1px -775px;
}
ul.highlights li.y02, ul.n-highlights li.y02 {
	background-position:1px -711px;
}
ul.n-highlights li.y03 {
	background-position:1px -645px;
}
ul.n-highlights li.y04 {
	background-position:1px -581px;
}
ul.n-highlights li.y05 {
	background-position:1px -516px;
}
ul.n-highlights li.y06 {
	background-position:1px -451px;
}
ul.n-highlights li.y07 {
	background-position:1px -386px;
}
ul.n-highlights li.y08 {
	background-position:1px -321px;
}
ul.n-highlights li.y09 {
	background-position:1px -256px;
}
ul.n-highlights li.y10 {
	background-position:1px -191px;
}
ul.n-highlights li.y11 {
	background-position:1px -126px;
}
ul.n-highlights li.y12 {
	background-position:1px -61px;
}
ul.n-highlights li.y13 {
	background-position:1px 5px;
}
.projectheader {
	width:420px;
	height:55px;
	margin:16px 0 0 11px;
}
.projects ul{
	margin:10px 0 0 22px;
	background:url(../img/highlightbox.png) no-repeat top left;
	width:425px;
	height:324px;
	padding-left:2px;
	padding-top:5px;
	padding-bottom:10px;
	overflow:auto;
}

/* BULLET */

.stbullet {line-height:19px; font-size:16px; color:#222; margin:13px 16px;}
.stbullet li{margin-left:-2px; margin-bottom:12px; background:url(../img/o-bullet.png) no-repeat -2px 0px; padding-left:24px;}
#willthanks{font-size: 13px;
    left: 335px;
    padding: 6px;
    position: absolute;
    top: 418px;
	color:#A03C16;
	}
	#willthanks a{color:#a03c16; text-decoration:none;}
.afilbox{width:410px; height:183px; background:url(../img/afil-box.png) no-repeat top left; margin:10px 0 0 22px; padding:5px;}
#book .afilbox p{margin:12px; font-size:19px; line-height:30px;}
.afilbox a{text-decoration:none; color:#A03C16;}
.afilbox a:hover{border-bottom:2px dotted #f90;}
.row img{padding:15px 9px;}
.social{padding-left:18px; margin-top:3px;}
.social img{margin:4px; border:1px dotted #888;}
.social img:hover{background:#eee;}
.thanks{background-image:url(../img/back-sprite.png); background-position:-8px -100px; display:block; width:305px; margin:25px 25px 16px; height:40px;}
.backtofront a{background-image:url(../img/back-sprite.png); background-position:-8px -10px; display:block; width:277px; margin-left:-4px; height:40px;}
.backtofront{bdisplay:block; margin-top:8px; padding:5px 26px;}
.backtofront a:hover{background-position:-8px -54px;}
.projectbox {
	width:455px;
	background:url(../img/projectbox.png) no-repeat top left;
}
.projects ul li {
	width:390px;
	height:35px;
	padding-top:11px;
	overflow:hidden;
	float:left;
	margin:9px 0 0 9px;
	border:1px solid #444;
}
.projects ul li[title="studio"]{background:url(../img/sel/studio.png) no-repeat top;}
.projects ul li[title="firststring"]{background:url(../img/sel/firststring.png) no-repeat top;}
.projects ul li[title="hotseat"]{background:url(../img/sel/hotseat.png) no-repeat top;}
.projects ul li[title="wwp"]{background:url(../img/sel/wwp.png) no-repeat top;}
.projects ul li[title="sn"]{background:url(../img/sel/studentnerds.png) no-repeat top;}
.projects ul li[title="inbahx"]{background:url(../img/sel/inbahx.png) no-repeat top;}
.projects ul li[title="cdw"]{background:url(../img/sel/cdw.png) no-repeat top;}
.projects ul li[title="mixable"]{background:url(../img/sel/mixable.png) no-repeat top;}
.projects ul li[title="mailguard"]{background:url(../img/sel/mailguard.png) no-repeat top;}
.projects ul li[title="doubletake"]{background:url(../img/sel/doubletake.png) no-repeat top;}
.projects ul li[title="dp"]{background:url(../img/sel/dp.png) no-repeat top;}
.projects ul li:hover {
	background:url(../img/projhover.png) no-repeat top;
	cursor:pointer;
}
.projects ul li strong {
	color:#333;
	
	font-size:16px;
	font-weight:bold;
	line-height:24px;
	margin:4px 0 0 8px;
	padding:7px;
	background:#fff;
}
.projects ul li span {
	float:right;
	line-height:20px;
	font-size:11px;
	margin:2px 8px 0 0;
	font-style:italic;
}
.projects ul li em {
	float:right;
	clear:left;
	display:block;
	margin:4px 8px 0 0 ;
	font-size:11px;
	line-height:9px;
}
.projopen {
	width:425px;
	height:340px;
}
.projopen:hover {
	background:url(../img/proj/hover.png) no-repeat;
}
.off {
	display:none;
}
.on {
	display:visible;
}
.projects ul li.open {
	background:url(../img/projon.png) no-repeat top;
}
.projects ul li.open strong {
	color:#fff;
	background:none;
}
.projects ul li.open span {
	color:#eee;
}
.projects ul li.open em {
	color:#eee;
}
.portfolio h3 {
	font-size:20px;
	color:#333;
	text-align:center;
	margin-top:24px;
}
.portfolio h4 {
	font-size:16px;
	color:#c63f0b;
	font-style:italic;
	text-align:center;
	margin-top:6px;
}
.portfolioimage {
	width:428px;
	height:327px;
	margin:16px 0 0 18px;
}
.portfoliodots {
	height:35px;
}
.contact {
	padding:10px;
	margin-top:13px;
}
.profile {
	float:left;
	width:55px;
	margin:0 10px;
	height:200px;
	text-align:center;
}
.profile h4 {
	color:#fff;
	font-size:11px;
	text-align:center;
	margin:3px 0;
}
.profile a {
	text-decoration:none;
	color:#03899C;
	text-align:center;
	font-size:12px;
}
.delicious {
	width:476px;
	float:right;
	text-align:left;
	margin-top:29px;
}
.delicious li {
	margin-top:-2px;
	padding:8px 0 8px 20px;
	font-size:15px;
	line-height:16px;
	color:#ccc;
}
.delicious li:hover{
	background:url("../img/shade-bg.png");
}	
.delicious li a {
	color:#3e9db9;
	text-decoration:none;
}
.delicious li a:hover {
	border-bottom:1px dotted #ccc;
}
.deliciousheader {
	margin-bottom:5px;
	padding:18px 0 5px 11px;
	/* border:1px solid #222222;
	background:url("../img/shade-bg.png"); */
}
.contact-icons {
	margin-top:-5px;
}
.contact-icons img {
	margin:5px;
}
.contactheader {
	margin:13px 20px 9px;
}
	.moreheader {
    height: 55px;
    margin: 21px 0 -5px 22px;
    width: 420px;
}
.moreabout ul li {
	line-height:18px;
	margin-bottom:10px;
	font-size:16px;
}
.moreabout ul li em {
	color:#C63F0B;
	font-weight:bold;
}
.moreabout ul {
	margin:10px 15px 5px 33px;
}
.moreabout p {
	font-size:19px;
	line-height:27px;
	color:#333;
	margin:13px 15px 0px 32px;
}
.moreabout em {
	font-weight:normal;
	color:#c63f0b;
}

   #contactform{background:url(../img/contact-bg.png) no-repeat top; height:300px; width:400px; margin:7px 0 0 28px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; padding:10px;}
   #contactform input[type=text]{width:343px; height:30px; margin:7px; padding:4px 4px 4px 35px; border:1px solid #999;}
   #contactform input[type=submit]{margin-left:8px; width:158px; height:40px; margin-top:5px; font-weight:bold; color:#C63F0B; font-size:14px; }
   #contactform textarea{width:362px; margin:7px; padding:10px; height:105px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#333; font-size:14px; border:1px solid #999;}
   #contactform label{margin:4px; font-size:12px; color:#900;}
   #fullname {background:url(../img/contact-name.png) no-repeat left;}
   #emailaddress{background:url(../img/contact-email.png) no-repeat left;}
   
   #message{padding:10px;}
   #message h2{font-size:20px; margin-bottom:17px; margin-top:11px; color:#C63F0B;}
   
   #message p{font-size:14px; line-height:20px; color:#333;}
   #message p img{float:right; margin-top:-35px;}