html, body 	{margin: 0; padding: 0; }
body 		{font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #333333; padding: 10px; }


/* TEXT */

h1, h2, h3, h4, h5, p, ul, li {margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, sans-serif; font-weight: normal; line-height: 1.4em; color: #333333;}

h1 {font-size: 22px; text-transform: capitalize; }
h2 {font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
h3 {font-size: 13px; text-transform: capitalize; }
h4 {font-size: 10px; font-weight: bold;}
h5 {font-size: 13px;}
p  {font-size: 11px; }
ul {font-size: 10px; }
li {margin: 0 1.5em; line-height: 1.3em; }

div#headcol h1, div.hello h1 {font-size: 9px; line-height: 1em; letter-spacing: 1px; text-transform: uppercase; margin: 0 10px 27px 0; }

p.description {font-size: 12px; }

h1.sorry404 {font-size: 16px; text-align: center; color: #FFFFFF; padding: 15%;}


/* LINKS */

a, a:visited {color: #EEEEEE; text-decoration: none;  cursor: pointer; }
a:hover {color: #FFFFFF;}

a.close, a.closer {position: relative; top: 12px; right: 9px; width: 10px; height: 10px; border: 0; float: right; background: url(icons/close.gif) no-repeat center top; display: block;}
a.close:hover, a.closer:hover {background-position: center -10px ;}



/* CONTAINERS */


div#container {height: 100%; width: 100%; position: relative; background: #CCCCCC url(images/physics.gif) no-repeat center center; }
div.grouper, div.page {width: 746px; position: absolute; top: 20px; left: 19%; z-index: 49; background-color: #FFFFFE; text-align: left;}
div.page {z-index: 99;}

div#container, div.grouper, div.page {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

div.page-controls a.launch {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

/* FOR FIREFOX: HIDE CONTAINER CORNERS (DISPLAYED IN IE STYLESHEET) */

img.corner {display: none;}



/* LEFT NAV */


div#links {text-align: left;}
div#links span {font-weight: normal; font-size: 9px; letter-spacing: 1px; text-transform: uppercase;}
	div#light {position: absolute; top: 0; left: 9%;}
	div#light img {float: left;}
	div#light span {float: left; margin: 70px 0 0 7px;}
	div#weights {position: absolute; top: 142px; left: -2px;}
	div#weights img {float: left;}
	div#weights span {float: left; margin: 5px 0 0 7px;}
	div#skates {position: absolute; top: 211px; left: 10%;}
	div#skates span {display: block; margin: 0 0 5px 0;}
	img#energy7 {position: absolute; bottom: -1px; right: 10%;}
div#links a img {border: 0;}

div#links a, div#links a:visited {color: #CCCCCD; cursor: pointer; display: block;}
div#links a:hover {color: #FFFFFF;}

div#links div:hover a {color: #FFFFFF;}


/* PORTFOLIO INDEX */

div#portfolio-box {top: 100px;}

div#flags {margin: 45px 55px 15px; height: 198px; width: 636px; background: url(images/wires.gif) no-repeat center 50px; position: relative;} 
div#flags a {float: left; height: 50px; width: 50px; margin-right: 3px; background: url(images/thumbs.jpg) no-repeat -50px 0; display: block;}
div#flags a#flag1 {margin-top: 41px; background-color: #5a5691;}
div#flags a#flag2 {margin-top: 25px; background-color: #74986c;}
div#flags a#flag3 {margin-top: 12px; background-color: #275582;}
div#flags a#flag4 {margin-top: 23px; background-color: #e85367;}
div#flags a#flag5 {margin-top: 42px; background-color: #ff6600;}
div#flags a#flag6 {margin-top: 29px; background-color: #cc0000;}
div#flags a#flag7 {margin-top: 0px;  background-color: #4daadc;}
div#flags a#flag8 {margin-top: 9px; background-color: #feea5b;}
div#flags a#flag9 {margin-top: 38px; background-color: #ecac43;}
div#flags a#flag10 {margin-top: 48px; background-color: #bbbbbb;}
div#flags a#flag11 {margin-top: 28px; background-color: #f6480b;}
div#flags a#flag12 {margin-top: 13px; background-color: #1b62b3;}


div#dots {margin: 0 45px; width: 590px;}
div#dots div {float: left; height: 161px; width: 16px; margin-right: 24px; text-align: center; background: url(icons/candy.gif) no-repeat 0 0; margin-bottom: 60px;}
div#dots div#headcol {width: 95px; text-align: right; background-image: none; margin-top: 5px; margin-right: 15px; }

div#dots a {display: block; height: 32px; width: 16px;}
a.spacer {background-color: #FFFFFE;}



/* PORTFOLIO PAGES */

div.content {width:706px; height: 421px; margin: 33px 20px 0 20px; }


div.slideshow {clear: both; } /* This is the large image */
div.slideshow span.image-wrapper {float: left;}
div.slideshow a.advance-link {padding: 2px; display: block; background-color: #DDDDDD;}
div.slideshow img {border: none; display: block; }



div.embox {clear: both; padding: 10px 2px; margin: 0; text-align: right;}
p.caps {font-size: 9px; line-height: 9px; text-transform: uppercase; letter-spacing: 1px; margin: 0; color: #333333;}



div.navigation {width:706px; height: 75px; margin: 10px 20px 0 20px; padding: 0; }

div.top, div.bottom, div.pagination {height: 1px; margin: 0; padding: 0; display: none;}

ul.thumbs {clear: both; margin: 0; padding: 0; list-style: none;}
ul.thumbs li {float: left; margin: 0 12px 0 0; padding: 0; list-style: none; }
ul.thumbs li a {display: block; border: 2px solid #DDDDDD; }
ul.thumbs li.selected a {border-color: #666666; }
ul.thumbs a:focus {outline: none; }
ul.thumbs img {border: none; }



div.controls {/* contains play/pause/previmg/nextimg buttons */
height: 23px; width: 68px; position: absolute; top: 566px; left: 51px; }

div.ss-controls {position: absolute; height: 32px; width: 22px; left: 23px; top: 0; } /* play/pause button */
div.ss-controls a {cursor: pointer; height: 32px; width: 22px; display: block;}
div.ss-controls a.play {background: url(icons/play.gif) no-repeat center top; }
div.ss-controls a.pause {background: url(icons/pause.gif) no-repeat center top; }
div.ss-controls a:hover {background-position: center -32px;}

div.nav-controls {position: relative; width: 68px;} /* previmg/nextimg buttons */
div.nav-controls a {height: 32px; width: 23px; display: block; float: left; margin: 0;}
div.nav-controls a.prev {background: url(icons/previmage.gif) no-repeat center top;}
div.nav-controls a.next {background: url(icons/nextimage.gif) no-repeat center top; position: relative; left: 22px;}
div.nav-controls a:hover {background-position: center -32px; }



div.extras {clear: both; margin: 0 20px 35px 20px;}

div.page-controls {float: left; margin: 3px 0 0 2px; width: 126px;}
div.page-controls a {display: block; margin-bottom: 15px;}
div.page-controls a.prevpage {background: url(icons/prevpage.gif) no-repeat center top; width: 23px; height: 23px; float: left;}
div.page-controls a.prevpage:hover {background-position: center -23px; }
div.page-controls a.nextpage {background: url(icons/nextpage.gif) no-repeat center top; width: 23px; height: 23px; float: right;}
div.page-controls a.nextpage:hover {background-position: center -23px; }

div.page-controls a.launch {color: #666666; background: #d2dbe3; clear: both; width: 100%; padding: 6px 0; text-align: center; text-transform: uppercase; letter-spacing: 1px; font-size: 9px;}
div.page-controls a.launch:hover {color: #999999; background: #e1e7ed;}

p.description {margin: 28px 3px 0 144px; }



/* RESUME BOX */

div#resume-box {width: 746px;}

div#resume-box h1 {margin: 45px 45px 30px;}

div#resume-box div.mainbar {margin-left: 45px; padding: 0; float: left; width: 461px; display: inline;}
div#resume-box div.sidebar {margin-right: 45px; padding: 0; float: right; width: 150px; display: inline;}
div#resume-box div.page-controls {margin: 10px 45px 20px; clear: both; display: inline;}

div#resume-box h2 {margin: 0 0 1.4em 0;}
div#resume-box h3 {margin: 0 0 .2em 0;}
div#resume-box h4 {margin: 0;}
div#resume-box p  {margin: 0 0 1.4em 0;}
div#resume-box ul {margin: 0 0 2.8em 1.5em; padding: 0; list-style-type: none;}
div#resume-box li {margin: 0;}

div#resume-box ul.schools {list-style-image: url(icons/bullet.gif); margin-bottom: 1.4em;}
div#resume-box ul.schools li {margin-top: .3em;}



/* INFO BOX */

div#info-box {top: 100px;}

div.hello {margin: 45px; height: 324px;}
div.hello p {font-size: 12px; margin-top: 2em;}

img.sketch {float: right; margin-left: 45px;}

div.contact  {float: left; text-align: center; margin-right: 45px; margin-top: 10px;}
div.contact p {font-size: 10px; text-transform: uppercase; letter-spacing: 1px; margin-top: 0;}
div.contact a {color: #333333;}
div.contact a:hover {color: #6a87a3;}
div.contact img {margin-bottom: 10px; border: 0;}