html, body {height:100%; background:#1c1c1c;}

body {margin:0 auto; padding:0; text-align:center;}
	#layout {min-height:100%; height:100%; display:table; overflow:hidden; width:100%;}
	#cell {margin:0 auto; display:table-cell; vertical-align:middle; width:100%; height:620px;}
	#page {position:relative; margin:30px auto;}

a {margin:0; padding:0; outline:none;}
#logo img {border:0;}
dl, dt, dd {margin:0; padding:0; line-height:1em;}

.js #page {max-width:930px; height:620px; background:#0e0e0e; overflow:hidden; border:3px solid #d0d0d0;}

/* LOGO */
.js #logo {position:absolute; bottom:70px; left:0; z-index:20; width:100%; height:130px; background:url(../img/panel.png) 0 0 repeat; text-align:left; }
.js #logo h1 {padding:0; margin:42px 0 0 50px;}

/* SITE NAV */
.js dt {position:absolute; bottom:121px; right:0; z-index:30; color:#FFF;}
.js dt a {cursor:pointer; display:block; padding-bottom:5px;}
.js dt a:active, .js dt.active a {border-bottom:1px solid #ff0067; padding-bottom:4px;}
.js dt img {border:0;}

.js #portfolio {right:250px;}
.js #personal {right:150px;}
.js #contact {display:block; position:absolute; bottom:51px; right:50px; margin:0; padding:0; line-height:1em; padding-bottom:5px;}
.js #contact:active {border-bottom:1px solid #ff0067; padding-bottom:4px;}

/* PHOTO NAV */
.js #nav {position:absolute; top:0; left:0; z-index:50; width:100%; padding:0; margin:0; list-style:none;}
.js #nav a {cursor:pointer; display:block;}
.js #nav #prev a {position:absolute; top:50px; left:50px; text-align:left;}
.js #nav #next a {position:absolute; top:50px; right:50px; text-align:right;}
.js #nav img {border:0; display:block; padding:386px 0 10px 0;}
.js #nav #prev img {padding-right:380px;}
.js #nav #next img {padding-left:380px;}

/* PHOTOS */
.js dl, .js dt, .js dd {display:block;}

.js dd {display:none; position:absolute; top:0; right:0; z-index:10;}
.js dd img {display:block;}


/* NON JAVASCRIPT */
body.nojs {}

.nojs #layout {width:24000px;}

.nojs #logo {position:relative; float:left; text-align:right; height:630px; width:400px; background:#0e0e0e;}
	.nojs #logo h1 {padding-right:50px;}
	.nojs #contact {display:block; width:143px; margin:20px 50px 0 ; float:right; text-align:left;}

.nojs dl, .nojs dt, .nojs dd {display:block; float:left;}
.nojs dt {height:630px; text-align:right; background:#0e0e0e; width:200px; border-left:1px solid #ff0067;}
	.nojs dt img {padding:27px 50px 0 0;}
	.nojs dd img {border:3px solid #d0d0d0; margin-right:150px;}