/* browser defaults cleanup */
body, h1, h2, h3, h4, h5, h6, h7, div, p, ul, ol, li, img{margin:0;padding:0;border:0;}
ul{list-style-type:none;}


/* page default setup */
body{background-color: #666; font-family: "trebuchet ms", arial, helvetica, sans-serif; color: #fff; font-size: .82em;}

#main-container{position: absolute;left: 50%;top: 0;
	width: 780px;margin: 0 0 0 -390px;
	min-height: 100%;
	border-left: 2px solid #fc3;
	border-right: 2px solid #fc3;
	background-color: #000;}
	
/* navigation */
#main-nav{float: left; text-align: right; width: 170px; margin: 115px 0 30px 10px; text-align: right;}
#main-container > #main-nav{margin-left: 20px;}
	#main-nav li.resume-link{margin-top:1.2em;}

#main-nav .list-header{font-size: 120%; color: #ef413f;}
#main-nav li{line-height: 1.9;font-size: 1.4em;	font-weight: bold;color: #fff;}
#main-nav .current{font-size: 1.5em; line-height: 1em;color: #fc3;}
	
	
/* header */
#header {margin: 25px 0 0 20px;}
#header h1{width: 500px; height: 63px; cursor: hand; color: #f00; font-size: 4.5em; font-weight: normal; font-family: SquireD, serif;}
	#header h1 a{color:#f00;}
	#header h1 span{display: none;}
#header h2{font-size: 1.5em;}
	
/* main content area */
#main-content{float: left; width: 500px; min-height: 440px; margin: 45px 45px 50px 45px;} 

#main-content h2{height: 40px; margin: 0 0 5px 0; position: relative; left: -30px; color: #fc3; font-size: 2.4em; text-transform: lowercase;}
#main-content p{margin-bottom: 5px;}

/* main content area - index pages */
#main-content #examples-list{list-style-type: none; text-align: center;}
	#main-content li.example{float: left; width: 144px; overflow: display; margin: 15px 11px; display: inline;}
	#main-content li.example a{cursor: pointer;}
	#main-content li.example h3{font-size: 1.2em; height:2.2em; line-height: 1;}
	#main-content li.example img{width: 80px; height: 80px; border: 5px #707099 solid; margin: 0 15px; font-size: 12px;}

/* main content area - individual example pages */
#main-content .screencap-title{font-weight: normal; font-size: 1.4em; color: #fff; margin-bottom: 10px;}
#main-content .screencap{width: 460px; margin: 10px 20px;}
#main-content .screencap-sml{width: 400px; margin: 10px 50px; font-size: 2em; text-align: center; color: #f33;}
#main-content p{margin-bottom: 10px;}

#main-content .external-link{display: block; background-color: #707099; width:6.8em; padding: 2px 5px;color: #fff; border-bottom: 2px solid #404069; border-right: 2px solid #404069; margin: 5px 20px; text-transform: uppercase;}
#main-content #full-screen-button{width:12.5em;}
#main-content #pdf-button{width:10.4em;}
#main-content a.external-link:hover, #main-content a.external-link:active{color: #66f; background-color: #404069; border-bottom: 2px solid #000; border-right: 2px solid #000;}

	/* for pages with multipul external links */
	#main-content .multi-site{width: 150px; padding-right: 15px;}
	#main-content .multi-site, #main-content .multi-site .external-link{float: left;}

#example-nav{width: 500px; margin-top: 25px;}
#example-nav #back-button{float: left; text-align: left; width: 250px;}
#example-nav #next-button{float: right; text-align: right; width: 250px;}


/* résumé page */
#resume #main-container{width: 820px;}
#resume > #main-container{width: 780px;}
#resume #main-content{width: 540px; margin-right: 5px;}
#resume-container{position: relative;  margin: 10px 0 25px 5px; padding: 3px 14px 10px 15px; width: 506px; font-size: .98em;}
#resume > #main-container #resume-container{left:-30px;}
#resume-container h1{font-size: 2.2em;}
#resume-container p {margin:0; width: 100%; float: left; clear: both;}
#resume-container h2{position: static; font-size: 1.7em; width: 100%; height: auto; margin: 10px 0 0 0; float: left; clear: both;}

#resume-container ul{list-style-type: disc; margin-left: 17px; clear: both;}
#resume-container ul ul{list-style-type: circle; margin-left: 35px;}

#resume-container #jobs, #resume-container #skills, #resume-container #school{float: left; width: 504px;}
#resume-container #school{margin-bottom:10px;}
#resume-container #jobs span, #resume-container #skills span, #resume-container #school span{float: left; width: 173px; padding: 2px 3px;} 
	#resume #resume-container span.date{width: 140px; text-align: right;}
	#resume-container .alt{background: #333;}
	#resume-container #school em{margin-left: 20px;}
#resume-container #interests ul {list-style-type: none; margin:0;}
#resume-container #interests li{margin: 3px 0;}
#resume-container #interests strong{text-transform: uppercase;}

/* contact page */
#main-content #buttons{margin-top: 10px;}


/* footer */
#footer-nav {width: 780px; text-align: center; color: #707099; margin-bottom: 30px;}
	#footer-nav .list-header{display:none;}
	#footer-nav li{display:inline;}


/* style-switcher */
#style-switcher	{position: absolute; top: 20px; right: 40px; width: 130px; border: 5px #707099 solid; font-size: 12px; text-align:center; padding: 8px 0; display: none;}
	#style-switcher li{display: inline; padding: 0 6px;cursor: pointer;}
	#style-switcher li#default{padding: 0 25px;}


/* links */
a {text-decoration: none;}
a:link, a:visited {color: #fff;}
a:hover, a:active {color: #66f;}