/* global */

*{margin:0;padding:0;}
html{height: 100%;}
* html #wrap{height: 100%;}
body{height: 100%;background:#4F4F4F url(/_imgs/ui/page_bg.gif) repeat-y;color:#333333;font:11px verdana,arial,helvetica;line-height:14px;}
#wrap{width:725px;position:relative;min-height: 100%;}
#menu{float:left;width:140px;}
#contentwrap{float:right;width:584px;}
#content{padding:20px 0px 20px 1px;}
#footer{height:33px;width:725px;position:relative;margin-top:-34px;background: url(/_imgs/ui/footer_bg.gif) no-repeat;text-align:right;clear:both;}
#footer a {position:relative;top:9px;}
#footer a img{border:0;}
#about p, #illustration p, #interactive p, #motion p, #print p {padding-left:20px;}

/* menu */

#menu ul{background:url(/_imgs/ui/menu_bg.gif) no-repeat;height:159px;width:140px;list-style-type:none;margin:90px 0;padding:0;font-size:12px;}
#menu img{border:0;}
#menu li{text-indent:-9000px; margin:0; padding:1px 0;}
#menu-spacer {width:115px;height:22px; }

				/* menu *//* sections */

#menu-about a {background: url(/_imgs/ui/menu_about_new.gif) no-repeat top;width:115px;height:14px;}
#menu-illustration a{background: url(/_imgs/ui/menu_illustration_new.gif) no-repeat top;width:115px;height:14px;}
#menu-interactive a{background: url(/_imgs/ui/menu_interactive_new.gif) no-repeat top;width:115px;height:14px;}
#menu-motion a{background: url(/_imgs/ui/menu_motion_new.gif) no-repeat top;width:115px;height:14px;}
#menu-print a{background: url(/_imgs/ui/menu_print_new.gif) no-repeat top;width:115px;height:14px;}

				/* menu *//* button states */

#about #menu-about a,#illustration #menu-illustration a,#interactive #menu-interactive a,#motion #menu-motion a,#print #menu-print a {background-position:-140px;}
#home #menu-about a,#home #menu-illustration a,#home #menu-interactive a,#home #menu-motion a,#home #menu-print a {background-position:-140px;}
#home #menu-about a:hover,#home #menu-illustration a:hover,#home #menu-interactive a:hover,#home #menu-motion a:hover,#home #menu-print a:hover {background-position:-280px;}
#menu li a,#menu li a:hover {text-decoration: none;display:block;padding:5px 15px 4px 6px;}
#menu li a {background-position:left;}
#menu li a:hover {background-position:-280px;}

/* home page */

#welcome{float:left;width:275px;display:inline;padding-top:10px;}
#welcometxt {margin-bottom:8px;padding:10px 0px 0px 20px;}
#welcome #hidden {padding:0;margin:0;position:relative;top:1px;}
#welcome p {margin-bottom:20px;padding-left:20px;}
#welcome h3 {background: url(/_imgs/ui/title_bg.gif) no-repeat;}
#welcome h3 img {margin:0px 0 16px 0;padding:0 0 0 20px;}

				/* home page *//* thumbnails */

#welcome .thumblink {background: url(/_imgs/ui/thumb_bg.gif) no-repeat; display:block; height:93px; width:248px;margin:0 0 15px 20px;padding:0;text-align:right; text-decoration:none;}
#welcome .thumblink img{padding:0 0 4px 0; margin:10px 10px 0 8px;height:53px;width:226px;}
#welcome .thumblink span{margin-right:14px;color:#333;font-weight:lighter;text-decoration:none;line-height: 10px; }
.il {background-color: #FC5252;border: 2px solid #FFF;}
.in {background-color: #6667E1;border: 2px solid #FFF;}
.mo {background-color: #6FCB21;border: 2px solid #FFF;}
.pr {background-color: #FFCC00;border: 2px solid #FFF;}
a:hover .il {border-color: #FC5252;}
a:hover .in {border-color: #6667E1;}
a:hover .mo {border-color: #6FCB21;}
a:hover .pr {border-color: #FFCC00;}

				/* home page *//* newsbox */

#news{float:right;height:520px;width:291px;background: url(/_imgs/ui/home_news_bg.gif) no-repeat;display:inline;margin:10px 10px 0 0;}
#newscontent{margin:43px 10px 20px 10px;padding:10px;width:245px;height:390px;overflow:auto;border-bottom: 1px dashed #DCDCDC;}
#newscontent h1{font-size: 11px;}
#newscontent h2{font-size: 11px; margin-bottom:5px;color:#888888;}
#newscontent p{margin-bottom:10px;padding-bottom:10px;border-bottom: 1px solid #DCDCDC;}
#newslink{margin-left:20px;}
#news #month{margin:10px 0 5px 0;}

/* about page */

#about #polaroid {float:right;position:absolute;top:3px;left:504px;}
#about #intro {width:340px;margin-bottom:10px;}
#about #more {width:340px;}
#about p {margin:0 20px 20px 0;}
#about h2 {margin:0 0 10px 20px;}
#about h3 {height:26px;padding-top:4px;background: url(/_imgs/ui/colourbar_grey.gif) no-repeat;text-indent:20px;margin:0 0 10px 0;}
#about #skillswrap {background: url(/_imgs/ui/colourbar_grey.gif) no-repeat;height:100px;width:582px;clear:right;}
#about #skillswrap h3{background:none;}
#about #skills {width:282px;float:left;margin:0;height:100px;}
#about #tools {width:282px;float:right;margin:0;height:100px;}
#about #interests {clear:both;}
#about #hidden {position:relative;top:1px;}

				/* about page *//* contact form */

#about #contactform {width:499px;margin-left:20px;}
#about label, input {display: block;width: 150px;float: left;margin-bottom:10px;}
#about textarea {display: block;width:400px;height:50px;float:left;margin-bottom:10px;}
#about label {text-align: right;width:75px;padding-right: 20px;}
#about br {clear:left;}
#about #submit {width:80px;float:right;background-color: #FFF; border: 1px solid #949494;font:11px verdana,arial,helvetica;color:#333;}

/* thumbnail page */

.thumbwrap {width:550px;overflow:hidden;margin:0px 0px 15px 20px;}
#thumbnail-page .thumblink {background: url(/_imgs/ui/thumb_bg.gif) no-repeat; display:block; height:93px; width:248px;padding:0;text-align:right;text-decoration:none;float:left;}
#thumbnail-page .thumblink img{padding:0 0 4px 0; margin:10px 10px 0 8px;height:53px;width:226px;}
#thumbnail-page .thumblink span{margin-right:14px;color:#333;font-weight:lighter;text-decoration:none;line-height: 10px;}
.summary{background: url(/_imgs/ui/summary_bg.gif) no-repeat; width: 275px; height: 68px;float:left;position:absolute; left:432px;padding:21px 20px 10px 10px; line-height:17px;}

/* project page */

#infowrap {width:580px;overflow:hidden;margin:0 0 20px 0;}
#infowrap h3 img {margin:0 0 15px 20px;}
#infoleft {width:260px;min-height:125px;float:left;margin:0;}
* html #infoleft {height:125px;} /* IE specific */
#inforight {background:url(/_imgs/ui/projectinfo_bg.gif) no-repeat;width:285px;height:137px;padding: 21px 20px 10px 10px;float:left;position:absolute;left:431px;line-height:17px;}
#project-page img {margin:0 0 20px 20px;clear:both;}
#projectnav{background:url(/_imgs/ui/project_nav_bg.gif) no-repeat;width:525px;height:22px;color:#c0c0c0;margin-left:20px;padding:5px 10px 0 10px;}
* html #projectnav {margin-bottom:30px;} /* IE specific */
#projectnav #prev{width:180px;float:left;}
#projectnav #main{width:175px;float:left;text-align:center;}
#projectnav #next{width:170px;float:right;text-align:right;}
#project-page #images {text-align:center;padding-right:16px;}

/* content sections */

#about #content,#illustration #content,#interactive #content,#motion #content,#print #content{padding-top:45px;}

#about #content {background: url(/_imgs/ui/colourbar_about.gif) no-repeat;}
#illustration #content {background: url(/_imgs/ui/colourbar_illustration.gif) no-repeat;}
#interactive #content {background: url(/_imgs/ui/colourbar_interactive.gif) no-repeat;}
#motion #content {background: url(/_imgs/ui/colourbar_motion.gif) no-repeat;}
#print #content {background: url(/_imgs/ui/colourbar_print.gif) no-repeat;}

#home a{color:#878787;}
#home a:hover{color:#333333;}
#home a:visited{color:#959494;}

#about a{color:#E83490;}
#about a:hover{color:#333333;}
#about a:visited{color:#959494;}

#illustration a, #interactive a, #motion a, #print a{color:#878787;font-weight: bold;}