BODY { padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; color: #000;}
BODY.home { text-align: center; background: #FFF url("cover.jpg") no-repeat scroll center 50px;}
BODY.index { margin: 10px; background: #DDD;}
BODY.pro { margin: 30px; background: #FFF;}
H2   { margin: 0;}

.home UL, .home LI, .home DIV { margin: 0; padding: 0; border: 0}
DIV.boxcwrapper {
	position: relative;
	margin-top: 45px; /* no JS pos. 110px with JS */
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	border: 4px solid #000;
	overflow: hidden;
}

/* size and floats */
DIV.boxcwrapper		{ width: 619px;}
.handle				{ width: 158px;}
.drawer UL	 		{ width: 134px;}
.work, .work DIV	{ width: 457px;}
.drawer SPAN		{ margin-left: 164px; width: 443px;}
.drawer UL, .handle {
	float: left;
	clear: left;
}

.drawers {
    margin-bottom:0;
    line-height: 18px;
	overflow: hidden;
}
.drawer {
    font-size:11px;
    line-height:1.3em;
}
.handle {
    cursor:pointer;
    font-size:18px;
    font-weight:normal;
    height:36px;
    line-height:36px;
    margin-bottom: 0;
    text-align:center;
}
html>/**/body .drawer DIV { /* also try: <!--[if !lt IE 7]>--><style></style><!--<![endif]--> */
	overflow: auto;
}
.drawer SPAN {
	display: block;
	padding: 4px;
	height: 24px;
	overflow: hidden;
	font-size:12px;
	position:absolute;
}
.drawer #bio SPAN { padding-top: 5px;}
.drawer LI {
    border-bottom:1px solid #99A;
    line-height:16px;
    padding:6px 0pt;
    font-size:11px;
}
.home UL {
    list-style: none;
    padding: 0;
}
/* colour */
.home .boxcwrapper	{ background: #DECCAF;} /* to remove*/
#bio H2			{ background: #423F3A; color:#FFF;}
#pro H2			{ background: #60777D; color:#FFF;}
A 				{ color:#336;}
.drawer UL {
	background: #EDD;
    padding:0 12px;
    padding-bottom:0;
}
.drawer UL,
.handle {	border-right: 4px solid #000;}
#pro UL {	border-top: 4px solid #000;}
#pro H2,
#bio UL {	border-top: 2px solid #000;}
#bio H2,
#bio UL {	border-bottom: 2px solid #000;}
.drawer LI.selected A:after {content:" >";}
.drawer-content LI A {overflow:hidden;}/*display:block;*/
/* works */
DIV.work { position: relative; overflow: hidden; cursor: pointer;}
.home DIV.work { position: absolute; top: 0; left: 162px; height: 274px;}
.work DIV { margin-top: 242px; background: #000; color: #FFF; line-height: 14px; font-size: 12px; padding: 3px; height: 26px; overflow: hidden;}
.work DIV A { color:#99C;}
#works, .home .description { display: none;}
#preload, #preload IMG { width: 1px; height: 1px; overflow: hidden; padding: 5px;}
/* project index */
.index .boxcwrapper { width: 1385px; padding: 5px 0 5px 5px; border: 1px solid #CCC; text-align: center; margin: 5px;}
.index .work { border: 2px solid #000; margin-right: 0; float: left; width: 456px; text-align: left; display: inline;}
.index H1 { line-height: 19px; font-size: 16px; padding: 0; margin: 5px; }
/* project */
.pro .boxcwrapper { border: 0; width:810px; overflow: visible; margin-top: 30px;}
.pro #header { margin-bottom: 15px;}
.pro #caption { float: left; width: 170px; font-size: 0.8em; margin-top: 15px; padding-top: 2px;}
.pro .content { position: absolute; left: 200px; width: 600px; font-size: 0.9em; line-height: 1.2em;}