@charset "utf-8";
/* CSS Document */

/*---[ SHARED STYLES ]----------------------------------------------------------------------*/

@import "reset.css";

body { background: #000 url("/assets/template/bg_body.png") repeat-x; font-family: Arial, Helvetica, sans-serif; padding-bottom: 60px; }

a { text-decoration: none; }
h1, h2 { font-size: 36px; font-weight: normal; color: #06F; margin-bottom: 15px; }
.clear { float: none; clear: both; }


#header { width: 800px; margin: auto; position: relative; }
#header .logo { width: 300px; height: 80px;	margin-bottom: 25px; }
#header .logo a { display: block; background: url("/assets/template/bg_logo.png") no-repeat; width: 300px; height: 0; padding-top: 80px; overflow: hidden; }
#header .nav { width: 150px; position: absolute; text-align: right; top: 12px; right: 0; }
#header .nav li { margin: 3px 0; }
#header .nav a { padding: 2px 0; color: #CCC; text-transform: uppercase; font-weight: bold; font-size: 14px; }
#header .nav a:hover { padding: 2px 5px; color: #FFF; }
#home .home a, #about .about a, #portfolio .portfolio a, #contact .contact a { background: #06F; padding: 2px 5px; color: #FFF; }
#header .divider { width: 800px; height: 5px; background: url("/assets/template/bg_diag.png"); overflow: hidden; }

#footer { width: 800px; margin: 0 auto; font-size: 10px; color: #666; background: url("/assets/template/bg_diag.png"); }
#footer span { background: #000; padding-right: 5px; }
#footer a { color: #666; }
#footer a:hover { color: #CCC; }

#body { width: 800px; margin: 35px auto; position: relative; color: #CCC; }
#body dt { margin-bottom: 5px; font-size: 14px; font-weight: bold; color: #666; text-transform:uppercase; }
#body dd { font-size: 14px; color: #CCC; }
#body div.main { width: 485px; float: left; }
#body div.sidebar { width: 300px; float: right; }


/*---[ TEMPLATE SPECIFIC STYLES ]-----------------------------------------------------------*/

#home .main p { font-size: 20px; line-height: 140%; width: 480px; }
#home .links { margin-top: 20px; }
#home .links a { color: #06F; }
#home .links a:hover { text-decoration: underline; }
#home .sidebar .title a { font-size: 20px; color: #FFF; }
#home .sidebar dt { margin-bottom: 10px; }
#home .sidebar dd { margin-top: 5px; line-height: 140%; }
#home .sidebar .description a { font-weight: bold; color: #06F; }
#home .sidebar .description a:hover { text-decoration: underline; }
#home #body .divider { width: 300px; height: 2px; background: url("/assets/template/bg_diag.png"); overflow: hidden; margin: 20px 0 30px; }

#about #body .divider { width: 100%; height: 2px; background: url("/assets/template/bg_diag.png"); overflow: hidden; margin: 20px 0 30px; }
#about .main dl { margin-bottom: 20px; }
#about .main dt { margin-top: 20px; }
#about .main dd { margin-top: 5px; line-height: 140%; }
#about .main .description a { font-weight: bold; color: #06F; }
#about .main .description a:hover { text-decoration: underline; }
#about .sidebar a { color: #06F; font-size: 20px; line-height: 140%; }
#about .sidebar a:hover { text-decoration: underline; }
#about .sidebar .resume a { display: block; padding-left: 70px; background: url("/assets/template/bg_resume.png") 0 0 no-repeat; }
#about .sidebar .links p { margin-bottom: 20px; }

#portfolio #body { width: 890px; padding: 0; margin: 0 auto; }
#portfolio #previous, #portfolio #next { width: 45px; height: 38px; position: absolute; top: 14px; }
#portfolio #previous { left: 0; }
#portfolio #next { right: 0; }
#portfolio #previous a, #portfolio #next a { display: block; width: 25px; height: 0; padding-top: 38px; overflow: hidden; }
#portfolio #previous a {  background: url("/assets/template/bg_previous.png") 0 0 no-repeat; float: left; }
#portfolio #next a { background: url("/assets/template/bg_next.png") 0 0 no-repeat; float: right; }
#portfolio #previous a:hover, #portfolio #next a:hover { background-position: 0 -38px; }
#portfolio #projectnav { width: 800px; height: 24px; margin: 0 auto; }
#portfolio #projectnav dt { float: left; padding: 3px 0; margin-right: 5px; }
#portfolio #projectnav dd { float: left; padding: 3px; margin: 0 3px; }
#portfolio #projectnav a { color: #999; }
#portfolio #projectnav a:hover { color: #CCC; }
#portfolio #projectnav dd.selected { background: #06F; }
#portfolio #projectnav dd.selected a { color: #FFF; }
#portfolio #projects { position: relative; width: 800px; height: 450px; margin: 5px auto 30px; overflow: hidden; }
#portfolio #slider { position: absolute; width: 15000px; height: 400px; }
#portfolio #slider .project { width: 800px; height: 400px; float: left; padding-right: 50px; }
#portfolio #slider .image { width: 485px; height: 400px; background: #333 url("/assets/template/bg_loading.png") no-repeat; }
#portfolio #slider .description, #portfolio #slider .role, #portfolio #slider .screenshots { margin-top: 15px; }
#portfolio #slider .description dd { line-height: 140%; }
#portfolio #slider .screenshots dd { float: left; padding: 3px; margin: 0 3px; }
#portfolio #slider .screenshots a { color: #CCC; }
#portfolio #slider .screenshots dd.selected { background: #06F; }
#portfolio #slider .screenshots dd.selected a { color: #FFF; }
#portfolio #slider .launch { margin-top: 20px; }
#portfolio #slider .launch a { padding: 2px 10px; background: #06F; font-size: 14px; font-weight: bold; color: #FFF; text-transform:uppercase; }
#portfolio .divider { width: 800px; height: 5px; background: url("/assets/template/bg_diag.png"); overflow: hidden; margin: 30px auto; }
#portfolio .links { width: 800px; margin: 0 auto 30px; font-size: 20px; line-height: 140%; color: #CCC; }
#portfolio .links a { color: #06F; }
#portfolio .links a:hover { text-decoration: underline; }

#contact .description { font-size: 20px; line-height: 140%; }
#contact #contactform { margin: 15px 0 40px; }
#contact label { display: block; width: 380px; margin: 5px 0 3px 0; font: 12px Arial, Helvetica, sans-serif;}
#contact #name { width: 380px; margin-bottom: 5px; padding: 5px; font: 12px Arial, Helvetica, sans-serif; }
#contact #email { width: 380px; margin-bottom: 5px; padding: 5px; font: 12px Arial, Helvetica, sans-serif; }
#contact #message { width: 380px; height: 200px; margin-bottom: 15px; padding: 5px; font: 12px Arial, Helvetica, sans-serif;}
#contact .main span { color: #06F; font-weight: bold; }
#contact a.submit  { padding: 2px 10px; background: #06F; font-size: 14px; font-weight: bold; color: #FFF; text-transform:uppercase; }
#contact #body .divider { width: 100%; height: 2px; background: url("/assets/template/bg_diag.png"); overflow: hidden; margin: 20px 0 30px; }
#contact .links { font-size: 20px; color: #CCC; line-height: 140%; }
#contact .links a { color: #06F; }
#contact .links a:hover { text-decoration: underline; }
#contact .sidebar a { color: #06F; font-size: 20px; line-height: 140%; }
#contact .sidebar a:hover { text-decoration: underline; }
#contact .sidebar .resume a { display: block; padding-left: 80px; }
#contact .sidebar .links p { margin-bottom: 20px; }