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

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

@import "reset.css";

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

a { text-decoration: none; color: #569DD5;  }
h1, h2 { font-size: 20px; font-weight: normal; color: #165485; margin-bottom: 15px; }
.clear { float: none; clear: both; }


#header { width: 860px; height: 110px; margin: auto; position: relative;  }
#header .logo { width: 230px; height: 50px; position: absolute; top: 32px; left: 0; }
#header .logo a { display: block; width: 230px; height: 50px; background: url(/assets/template/bg_logo.png) no-repeat; }
#header .logo a span { display: none; }
#header .nav { width: 150px; position: absolute; text-align: right; top: 8px; right: 0; }
#header .nav li { padding: 3px 0; }
#header .nav a { padding: 2px 0; color: #FFF; font-weight: bold; font-size: 12px; }
#header .nav a:hover { padding: 2px 0; color: #8FC7EE; }
#home .home a, #about .about a, #portfolio .portfolio a, #contact .contact a,
#home .home a:hover, #about .about a:hover, #portfolio .portfolio a:hover, #contact .contact a:hover { background: #569DD5; padding: 2px 5px; color: #FFF; }

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

#body { width: 820px; padding: 20px 20px 40px; background: #FFF url(/assets/template/bg_content.png) 600px 0 repeat-y; border: 1px solid #AAA; margin: 30px auto; position: relative; color: #333; }
#body dt { margin-bottom: 5px; font-size: 14px; font-weight: bold; }
#body dd { font-size: 12px; color: #333; }
#body div.main { width: 560px;  float: left; }
#body div.sidebar { width: 220px; float: right; }


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

#home .image { width: 100%; height: 80px; background: #000 url(/assets/template/bg_home.jpg) no-repeat; margin-bottom: 20px;  }
#home .main p { font-size: 12px; line-height: 1.4; width: 480px; margin-bottom: 10px; }
#home .links { margin-top: 20px; }
#home .links dd { margin: 10px; }
#home .links a { color: #165485; }
#home .links a:hover { text-decoration: underline; }
#home .sidebar .title a { font-size: 20px; color: #FFF; }
#home .sidebar dl { }
#home .sidebar dt { margin-bottom: 10px; }
#home .sidebar dd { margin-top: 5px; line-height: 140%; }
#home .sidebar .description a { font-weight: bold; color: #165485; }
#home .sidebar .description a:hover { text-decoration: underline; }
#home #body .divider {width: 100%; 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: #165485; }
#about .main .description a:hover { text-decoration: underline; }
#about .sidebar dt { margin-bottom: 10px; }
#about .sidebar dd { margin-top: 5px; line-height: 140%; }
#about .sidebar .description a { font-weight: bold; color: #165485; }
#about .sidebar .description a:hover { text-decoration: underline; }

#portfolio #body { background-position: -160px 0; }
#portfolio #body div.main { width: 580px; float: right; }
#portfolio #body div.sidebar { width: 200px; float: left; }
#portfolio h1 { width: 580px; float: none; clear: both; font-size: 24px; padding: 0 0 20px; margin: 0; }
#portfolio .sidebar dl { margin-bottom: 20px; }
#portfolio .sidebar dt { font-size: 12px }
#portfolio .sidebar dd { margin: 10px 0 0 10px; }
#portfolio .sidebar a { color: #333; }
#portfolio .sidebar a:hover { color: #EB552D; }
#portfolio .sidebar dd.selected a, #portfolio .sidebar dd.selected a:hover { font-weight: bold; color: #EB552D; }
#portfolio .example { max-width: 480px; float: left; }
#portfolio .plugin { padding: 5px 0; font-size: 10px; }
#portfolio .plugin a { color: #666; } 
#portfolio dl.thumbnails { width: 80px; float: right; }
#portfolio dl.thumbnails  dt, #portfolio .thumbnails span { display: none; }
#portfolio dl.thumbnails dd { margin-bottom: 10px; }
#portfolio dl.thumbnails img { width: 80px; height: 60px; }
#portfolio dl.info { width: 480px; float: left; padding-top: 20px; }
#portfolio dl.info dt { display: none; }
#portfolio dl.info dd { float: left; margin-right: 10px; }
#portfolio dl.info dd span { font-weight: bold; }
#portfolio dl.description { width: 480px; float: left; padding: 20px 0; }
#portfolio dl.description dd { line-height: 1.4; }
#portfolio dl.description dd p { margin-bottom: 10px; }
#portfolio dl.description dd strong { font-weight: bold; }
#portfolio dl.example-nav { width: 480px; float: left; margin: 20px 0 10px; }
#portfolio dl.example-nav dd.previous { float: left; }
#portfolio dl.example-nav dd.next { float: right; }
#portfolio dl.example-nav a { font-weight: bold; font-size: 12px; background: #569DD5; padding: 2px 5px; color: #FFF; }
#portfolio dl.project-nav { width: 480px; float: left; margin: 20px 0 10px; }
#portfolio dl.project-nav dd.previous { float: left; }
#portfolio dl.project-nav dd.next { float: right; }
#portfolio dl.project-nav a { font-weight: bold; font-size: 12px; background: #CCC; padding: 2px 5px; color: #333; }
#portfolio .example-nav a:hover, #portfolio .project-nav a:hover { background: #EB552D; color: #FFF; }
#portfolio .project { display: none; }


#contact .main p { font-size: 12px; }
#contact .main span { color: #165485; font-size: 14px; font-weight: bold; }
#contact .main .description { font-size: 14px; line-height: 1.4; }
#contact a.submit { padding: 2px 10px; background: #569DD5; font-size: 12px; font-weight: bold; color: #FFF; }
#contact a.submit:hover { background: #EB552D; }
#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, #contact #email, #contact #message { border: 1px solid #CCC; width: 540px; margin-bottom: 5px; padding: 5px; font: 12px Arial, Helvetica, sans-serif; }
#contact #message { height: 200px; margin-bottom: 15px; }
#contact .sidebar dt { margin-bottom: 10px; }
#contact .sidebar dd { margin-top: 5px; line-height: 140%; }
#contact .sidebar .description a { font-weight: bold; color: #165485; }
#contact .sidebar .description a:hover { text-decoration: underline; }
#contact #body .divider { width: 100%; height: 2px; background: url("/assets/template/bg_diag.png"); overflow: hidden; margin: 20px 0 30px; }