@import 'lib/reset.css';
@import 'lib/typography.css';
@import 'lib/forms.css';

/* layout
-------------------------------------------------------------- */

body { line-height: 1.5; background: #6F6961; margin:0 auto; }

#ie6 {display: none;}
.container {width: 960px;margin: 0 auto; position: relative; padding: 20px 0;}
.header { position: relative;background: #6F6961 url('/img/bg.png') repeat; border-bottom: 1px solid #C6C5B9; }
.header .container { margin-top:0; position: relative;}
.header .branding {height: 50px;}
.content {background: #fff url('/img/bg-3.jpg') no-repeat top center; position: relative;}


#contact { position: relative;   height: 388px; display: none; padding-top: 10px; }
#contact .container {border: 1px solid #d4d1ce; background: #fff url('/img/bg2.png') repeat; padding: 10px;  }
#contact .container .cont {background: #fff; border: 1px solid #d4d1ce; padding: 20px; position: relative;}
#contact .email {position: absolute; right: 0; top: 80px; width: 350px; padding: 20px;}
#contact .email img {margin: 0; padding: 0;}
#contact img.close {position: absolute; right: 5px; top: 5px;}
/* nav */

ul#nav {display: block; position: absolute; right: 0; bottom: 0; padding: 0; margin: 0;  width: 300px; height: 61px;}
ul#nav li {display: inline;}
ul#nav li a {background-image: url('/img/nav.png'); background-repeat: no-repeat; width: 100px; height: 61px; display: block; float: left;}
ul#nav li a:hover {background-color: transparent;}

#portfolio ul#nav li a.portfolio {background-position: 0 -140px; }

#portfolio ul#nav li a.about {background-position:  -100px -65px; }
#portfolio ul#nav li a:hover.about {background-position:  -100px 10px; }

#portfolio ul#nav li a.contact {background-position: -200px -65px; }
#portfolio ul#nav li a:hover.contact {background-position: -200px 10px; }



#about ul#nav li a.portfolio {background-position: 0 -65px; }
#about ul#nav li a:hover.portfolio {background-position: 0 10px; }

#about ul#nav li a.about {background-position: -100px -140px; }

#about ul#nav li a.contact {background-position: -200px -65px; }
#about ul#nav li a:hover.contact {background-position: -200px 10px; }


#contact ul#nav li a.portfolio {background-position: 0 -65px; }
#contact ul#nav li a:hover.portfolio {background-position: 0 10px; }

#contact ul#nav li a.about {background-position: -100px -65px;  }
#contact ul#nav li a:hover.about {background-position:  -100px 10px; }

#contact ul#nav li a.contact {background-position:  -200px -140px; }

#work ul#nav li a.work, #about ul#nav li a.about { color: #000; text-decoration: none; }


/* Portfolio boxes */

/* Portfolio boxes on home page */
.portfolioitem { width: 150px;  padding: 1em; float: left; border: 1px solid #d4d1ce; background: #fff url('/img/bg2.png') repeat; position: relative; margin:0 9px 9px 0;}
.portfolioitem img.new {position: absolute; right: 12px; top: -1px; border: 0; z-index: 100;}
.portfolioitem a.fade {background: #000; display: block; width: 148px; height: 113px; border: 1px solid #ABA194;}
.portfolioitem a:hover.fade {background: #000; border: 1px solid #4F4131;}
.portfolioitem img.fade {margin: 0;  padding: 0;}
.portfolioitem dl { padding:2px 5px 0 5px;  width: 140px; background: #fff; margin: 1em 0 0 0; }
.portfolioitem dt { font-size: 11px;  margin: 0 6px 0 1px; float: left; clear: left; text-align: left; color: #ABA194; font-variant: small-caps;}
.portfolioitem dd { margin: 1px 0 0 0; font: normal bold normal 11px helvetica, sans-serif; line-height: 1.5em; }
.portfolioitem dd.project { margin: 0 0 0 0; font: normal normal normal 15px helvetica, sans-serif; line-height: 1em; color: #6F6961;text-align: left; }
.screenshots {position: relative; text-align: center;}
.screenshots img {padding: 10px; border: 1px solid #d4d1ce; background: #fff url('/img/bg2.png') repeat; margin: 0 auto; }


/* Misc classes and elements
-------------------------------------------------------------- */
hr {height: 1px; background: #B7B6AB; border: 0; color: #B7B6AB;}
/* logo */
a.logo img {position: absolute; left: -3px; top: 15px;}
a:hover.logo {background: transparent; border: 0;}
.clear {clear: both;  padding: 0;}
.details {background: #fff url('../img/bg-details.png') repeat-y top center; border-top: 1px dashed #B7B6AB;border-bottom: 1px dashed #B7B6AB; margin: 0 0 20px 0; padding: 10px 10px 0 10px; border-right: 1px dashed #B7B6AB;border-left: 1px dashed #B7B6AB;}
.details-4col {background: #fff url('../img/bg-details-4col.png') repeat-y top center;border-top: 1px dashed #B7B6AB;border-bottom: 1px dashed #B7B6AB;border-right: 1px dashed #B7B6AB;border-left: 1px dashed #B7B6AB; margin: 0 0 20px 0; padding: 10px 0 0 10px;}
.span-two {width: 676px; float: left; margin-right: 20px; padding-right: 20px;}
.details-4col .col {width: 219px; float: left; margin-right: 20px;   }
.details .col-last, .details-4-col .col-last  {width: 219px; float: left; margin-right: 0; padding-right: 0;  }



/* featured-work browse portfolio
-------------------------------------------------------------- */
.browse {position: absolute; right: 0; top: 20px; z-index: 100;}
.browse a:hover {background: none;}
.featured-work {display: none; background:#fff; border: 3px solid #f7f7f2; position: absolute; left: 0; top: 30px; width: 267px; z-index: 300; padding: 5px;}


/* ----------colors----------- 
yellow - E5E19E
LT YELLOW - F2F0CE
--------------     */