/* reset */
* { margin: 0; padding: 0; border: 0 }
ul { list-style-type: none }

/* general */
body { text-align: center; background: #563260 url(../img/bg.png) repeat-x left 0px; font-size: 100%; line-height: 100%; color: #fff; }
#main { width: 920px; margin: 10px auto 0 auto; text-align: left; }
#content {  clear: both; width: 100%; padding: 0; }


/* navigation */
#header { width: 100%; height: 115px; text-align: center; clear: both; margin: 0 0 0 0;}
#header #nav { width: 920px; margin: 23px auto 0 auto; text-align: left; }
#header #nav h1 a { width: 69px; height: 69px; float: left; background: url(../img/logo.png) no-repeat; text-indent: -99999px; margin: 0 21px 0 0; }
#header #nav ul { display: inline; list-style-type: none }
#header #nav ul li { text-indent: -99999px; float: left; margin: 0 21px 0 0; }
#header #nav ul li a { display: block; background: url(../img/menu.png); height: 69px; text-indent: -99999px; margin: 0 0 0 0;}  
#header #nav ul li a span {  text-indent: -99999px; }

#header #nav ul li.home { width: 69px;  float: left; }
#header #nav ul li.who { width: 69px; float: left;  }
#header #nav ul li.where { width: 69px; float: left; }

#header #nav ul li.home a { width: 69px; background-position: 0 -6px; }
#header #nav ul li.who a { width: 69px; background-position: -91px -6px; }
#header #nav ul li.where a { width: 69px; background-position: -182px -6px;}

#header #nav ul li.home a.active { background-position: 0 -82px; }
#header #nav ul li.who a.active {background-position: -91px -82px; }
#header #nav ul li.where a.active { background-position: -182px -82px;}

#header #nav ul li.home a:hover { background-position: 0 -168px; }
#header #nav ul li.who a:hover {background-position: -91px -168px; }
#header #nav ul li.where a:hover{ background-position: -182px -168px;}

#header #links { width: 920px; margin: 23px auto 0 auto; text-align: right; }
#header #links ul { display: inline; list-style-type: none }
#header #links ul li { float: right; margin: 0 0 0 4px; }
#header #links ul li a { margin: 0 0 0 4px;} 

/* footer */
#footer { width: 100%; height: 40px; background: #dfdfdf; text-align: center; clear: both; margin: auto 0 0 0; padding-top: 20px; font: 11px arial, sans-serif; color: #666666; letter-spacing: -0.1px;}

/* links */
a, a:visited, a:active { color: #FF6666; text-decoration: none; }
a:hover { text-decoration: underline; }

/*home*/
/* #intro { width: 564px; float: left; margin: 24px 0 24px 0; }
#intro h1 { text-indent: -99999px; background: url(../img/intro.png) no-repeat; width: 540px; height: 120px; }*/
#welcome { float: left; width: 920px; margin: 0 0 0px 0;  }
#welcome { font: 18px arial, sans-serif; letter-spacing: -0.6px;}
#welcome p { line-height: 26px; margin: 0 0 30px 0;  }
#welcome .title { font: 24px arial, sans-serif; letter-spacing: -1px;}
/*#welcome ul { margin: 28px 0 24px 0; border-bottom: 1px solid #8662C8; }
#welcome ul li a { border-top: 1px solid #8662C8; display: block; width: 100%; padding: 13px 0 13px 0;}*/
/*#loader { position: absolute; z-index: 2; margin: 300px 0 0 250px; } */
/*#intro #imageContainer  { position: absolute; z-index: 1px; margin: 20px 0 0 -30px; background: url(../img/screens/bg.jpg) no-repeat; width: 612px; height: 304px;}
#intro #imageContainer img {display:none;	position:absolute;top:0; left:0; z-index: 3} 563260*/
#work { float: left; width: 900px; margin: 0 0 10px 0;}
#work h2 { font: 24px Arial, Helvetica, sans-serif; color: #fff; letter-spacing: -0.6px; margin-bottom: 10px;}
#work p { font: 12px Arial, Helvetica, sans-serif; color: #CCCCCC; letter-spacing: -0.1px; line-height: 15px; margin-bottom: 10px;}
#work .credits { font: 11px Arial, Helvetica, sans-serif; color: #CCCCCC; letter-spacing: -0.1px; line-height: 13px; margin-bottom: 10px; }
#work ul { margin: 0px 0 0px 0; }
#work ul li { background: #482a50; width: 100%; padding: 10px 10px 10px 20px; margin: 0 0 30px 0;}
#work ul li img { border: 4px solid #666666;}
#contactme { float: left; width: 920px; margin: 0 0 30px 0;  }
#contactme { font: 14px arial, sans-serif; letter-spacing: -0.4px;}


#about { float: left; width: 920px; margin: 0 0 0px 0;  }
#about p { font: 14px arial, sans-serif; color:#CCCCCC; letter-spacing: -0.6px; line-height: 18px; margin: 0 0 20px 0;  }
#about .leading { font: 18px arial, sans-serif; color:#FFFFFF; letter-spacing: -0.6px; line-height: 26px; margin: 0 0 20px 0;  }
#about .title { font: 24px arial, sans-serif; color:#FFFFFF; letter-spacing: -1px;}

#about2 { float: left; width: 60%; margin: 0 2% 26px 0;  }
#about2 p { font: 14px arial, sans-serif; color:#CCCCCC; letter-spacing: -0.6px; line-height: 21px; margin: 0 0 15px 0;  }
#about2 .contactme { font: 14px arial, sans-serif; color:#FFFFFF; letter-spacing: -0.4px;}

#photo { float: left; margin: 0 0 20px 0;  }

#more { float: left; width: 34%; margin: 0 0 0 0;}
#more h2 { font: 20px Arial, Helvetica, sans-serif; color: #fff; letter-spacing: -0.6px; margin-bottom: 10px;}
#more p { font: 12px Arial, Helvetica, sans-serif; color: #CCCCCC; letter-spacing: -0.1px; line-height: 15px; margin-bottom: 10px;}
#more .credits { font: 11px Arial, Helvetica, sans-serif; color: #CCCCCC; letter-spacing: -0.1px; line-height: 13px; margin-bottom: 10px; }
#more ul { margin: 0px 0 0px 0; }
#more ul li { background: #482a50; width: 100%; padding: 10px 10px 10px 20px; margin: 0 0 30px 0;}
#more ul li img { border: 4px solid #666666;}


/* about */
.col2 { width: 292px; float: right; padding: 20px 0 40px 0; }
.pic { width: 292px; float: right; padding: 20px 0 40px 0; }
.col1 h2, .col2 h2 { font: 22px helvetica, arial, sans-erif; font-weight: bold; letter-spacing: -.5px; margin: 0 0 10px 0; border-bottom: 1px solid #8662C8; padding: 0 0 10px 0;   }
.col1 h1 { font: 40px arial, sans-serif; font-weight: normal; line-height: 70px; letter-spacing: -1px; margin: 0px 0 0px 0; padding: 20px 0 0 0; }
.pic img { margin-top: 5px; border: 8px solid #8662C8 }
.col1 { width: 60%; float: left; margin: 0 2% 0 0; }
.col1 p, .col2 p { font: 16px arial, sans-serif; line-height: 26px; color: #fff; margin: 0 0 20px 0; }
.col1 p a { text-decoration: none }
.col1 .first { float: left; width: 280px; margin-right: 40px; }
.col1 .second { float: left; width: 284px; }
#lists { clear: both; border-top: 0px solid #8662C8; padding: 10px 0 40px 0; }
.aboutList { margin: -10px 0 30px 0; list-style-type: none; }
.aboutList li { border-bottom: 1px solid #8662C8; padding: .4em 0 .4em 0; font: 16px arial, sans-serif; color: #fff; line-height: 26px;   }

/* portfolio */
.title_view { clear: both; padding: 28px 0 24px 0 !important; }
#title_portfolio h1 { background: url(../img/proud.png) no-repeat; height: 78px; width: 100%; text-indent: -99999px; display: block;  }
#title_projects h1 { background: url(../img/built.png) no-repeat; height: 78px; width: 100%; text-indent: -99999px; display: block;  }
#title_about h1 { background: url(../img/me.png) no-repeat; height: 78px; width: 100%; text-indent: -99999px; display: block;  }
#title_contact h1 { background: url(../img/contact.png) no-repeat; height: 78px; width: 100%; text-indent: -99999px; display: block;  }
#content .desc { font: 18px arial, sans-serif; color: #ccc; padding: 1.4em 0 .3em .3em; clear: both; }
.screen { width:18.50em; display: block; float: left; margin: 0 2.2em 0 0;  }
.last { margin: 0 !important;  }
.screen .top {  height: 20px;}
.screen .middle { text-align: center; height: 279px}
.screen .middle img { border: 0; margin: 0; padding: 0; border: 6px solid #8662C8 }
.screen .bottom { height: 10px;  }
.screen .middle a:hover img { border: 6px solid #80B0DE }

/* contact */
#contact form { margin-top: -12px }
#contact form label, #contact form input { clear: both; }
#contact form label { display: block; font: 16px arial, sans-serif; margin: 0 0 6px 0; }
#contact form input { padding: 4px; font: 22px arial, sans-serif; width: 98%; border: 1px solid #482a50; margin: 0 0 18px 0; color: #666 }
#contact form textarea { margin: 0 0 18px 0;  font: 16px arial, sans-serif; color: #999; width: 98%; height: 180px; color: #666;  padding: 4px; font: 18px arial, sans-serif; line-height: 22px; border: 1px solid #482a50vl } 
#contact form #send { width: 180px; background:  #CCCCCC; border: 2px solid  #482a50vl; color: #563260 }
#content .showcase { clear: both; width: 100%; }
#content h2.desc span { color: #ccc }
.section { margin-bottom: 30px; display: block; border-bottom: 1px solid #8662C8; padding-bottom: 60px; height: 330px; }
li.last { border-bottom: 0 !important }