@CHARSET "UTF-8";

@import url("reset.css");

html {
   background: #323232 url("../images/html-bg.png") repeat-x;
   font: 100%/1.425 Georgia, serif;
   line-height: 1.425em;
}

body {
   background-color: #dadada;
   font-size: .95em;
}

.container {
   background: transparent url("../images/body-bg.png") no-repeat;
   margin: 0 auto;
   overflow: auto;
   padding-top: 73px;
   position: relative;
   width: 960px;
}

.grid {
   background: transparent url("../images/grid.png") repeat-y !important;
}
.grid * {
	background: none !important; 
}

h1.logo {
   background: transparent url("../images/logo.png") no-repeat;
   margin: 0 0 0 82px;
   text-indent: -9999px;
}
   h1.logo > a {
      display: block;
      width: 312px;
      height: 97px;
   }

.nav {
   margin: -25px 0 25px 400px;
   text-align: right;
   padding-right: 83px;
}

   .nav li {
      display: inline;
      margin-right: 10px;
      padding: 0;
      background: none;
   }
      .nav a {
         color: #000;
      }
         .nav li.active a {
            color: #db0c00;
         }

   .home .nav {
      margin-bottom: 342px;
   }



.intro > div,
.workingon > div,
.quote > div,
.article > div {
   min-height: 300px;
   padding: 5px 24px 1em 19px;
}

.intro {
   background: transparent url("../images/intro-bottom.png") no-repeat 0 bottom;
   float: left;
   margin-left: 88px;
   padding-bottom: 11px;
   width: 306px;
}
   .intro > div {
      min-height: 200px;
      background: transparent url("../images/intro.png") no-repeat 0 0;
   }
   
.workingon {
   background: transparent url("../images/workingon-bottom.png") no-repeat 0 bottom;
   float: left;
   margin-left: 15px;
   padding-bottom: 11px;
   width: 233px;
}
   .workingon > div {
      min-height: 200px;
      background: transparent url("../images/workingon.png") no-repeat 0 0;
   }   
   
.quote {
   background: transparent url("../images/quote-bottom.png") no-repeat 0 bottom;
   float: left;
   margin-left: 6px;
   padding-bottom: 11px;
   width: 233px;
}
   .quote > div {
      background: transparent url("../images/quote.png") no-repeat 0 0;
   }   
 
 .footer {
   background: #323232 url("../images/footer.png") repeat-x;
   margin-top: 1.4em;
   height: 156px;
 }
   .footer > div {
      background: url("../images/footer-address.png") no-repeat 0 0;
      margin: 0 auto;
      width: 960px;
      overflow: auto;
   }
	.footer address {
	   color: #fff;
	   padding: 19px 0 0 109px;
	   width: 298px;
	   float: left;
	}
	   .footer address a {
	      color: #fff;
	   }
	   .footer address strong {
	      display: block;
	      font-size: 1.2em;
	      font-weight: normal;
	      margin-bottom: .4em;
	   }
	   .footer address span {
	      display: block;
	      font-size: .8333em;
	   }
   .footer h2 {
      margin: 14px 0 0 406px;
      font-size: 1.2em;
      font-weight: normal;
   }
      .footer h2 a {
         display: block;
         padding: 5px 0 .9em 45px;
         background: transparent url("../images/twitter-icon.png") no-repeat 0 0;
      }
      .footer a:link, .footer a:visited {
         color: #fff;
      }
      .footer ul {
         margin: 0 0 0 406px;
         padding: 0 0 0 6px;
      }
      .footer li {
         float: left;
         width: 216px;
         padding: 0;
         background: none;
         color: #fff;
         margin: 0 24px 0 0;
      }
      .footer li a {
         text-decoration: underline;
      }

.article {
   background: transparent url("../images/content-bottom.png") no-repeat 0 bottom;
   padding-bottom: 11px;
   margin-left: 406px;
   width: 468px;
}
   .article > div {
      background: transparent url("../images/content.png") no-repeat 0 0;
   }


.portfolio {
	position: absolute;
	top: 190px;
	left: 0px;
	width: 100%;
}
.portfolio-items {
   background: transparent url("../images/portfolio.png") no-repeat 26px 0;
   height: 289px;
   margin-top: 0;
   margin-bottom: 30px;
   margin-left: auto;
   margin-right: auto;
   width: 960px;
   position: relative;
   overflow: hidden;
}
   .portfolio-items > li:first-child {
      display: block;
   }
   
   .portfolio-items > li {
      display: none;
      position: absolute;
      left: 92px;
      top: 3px;
      width: 777px;
      color: #fff;
      padding: 0;
      background: none;
   }
      .portfolio-items img {
         display: block;
         float: left;
      }
      .portfolio-items li > h2,
      .portfolio-items li > p,
      .portfolio-items li > blockquote,
      .portfolio-items li > ul {
         margin-left: 319px;
      }
      .portfolio-items ul li {
         font-size: 1em;
      }
      .portfolio-items a:link,
      .portfolio-items a:visited {
         color: #fff;
         text-decoration: underline;
      }
      .portfolio-items h2 {
         margin-top: 37px;
      }

.portfolio-indicator {
   margin: -54px auto 0 auto;
   width: 550px;
   position: relative;
   padding-left: 410px;
}
   .portfolio-indicator li {
   	display: inline;
   	background: none;
   	padding: 0;
   }
   .portfolio-indicator li.active a {
      background-color: #db0c00;
   }
   .portfolio-indicator li a {
      background-color: #535252;
   	float: left;
   	height: 5px;
   	width: 20px;
   	margin-right: 1px;
   	text-indent: -9999px;
   	display: block;
      color: #fff;
   }

.portfolio > p {
   margin: 0 auto;
   width: 960px;
   position: relative;
}
.portfolio-previous,
.portfolio-next {
	display: block;
	position: absolute;
	top: -137px;
   /*height: 27px;*/
   height: 80px;
   width: 29px;
   text-indent: -9999px;
}
.portfolio-previous {
   left: 26px;
}
.portfolio-next {  
   right: 26px;
}


p {
   margin: .4em 0 1.4em 0;
   font: 85%/1.625 "Lucida Sans Unicode", sans-serif;
}

p img {
	border: 1px solid #dadada;
	padding: 1px;
}

li {
	margin: 0 0 .4em 0;
   font: 85%/1.625 "Lucida Sans Unicode", sans-serif;
   background: transparent url("../images/bulletitem.png") no-repeat 0 8px;
   padding: 0 0 0 10px;
}

   li p {
      font-size: 1em;
   }
   
blockquote {
   background: transparent url("../images/quote-open.png") no-repeat 0 0;
   margin-left: -31px;
   padding-left: 31px;
}

q {
   display: block;
   background: transparent url("../images/quote-close.png") no-repeat right bottom;
   margin: 0 -21px -12px 0;
   padding: 12px 21px 12px 12px;
   
   color: #6d6d6d;
   font-size: 14px;
}

cite {
   font-size: 13px;
}

h1 {
   margin: 1em 0 .4em 0;
   font-size: 1.35em;
}

h2 {
	margin: 1em 0 .4em 0;
	font-size: 1.25em;
}

a:hover {
	color: #db0c00 !important;
	text-decoration: underline;
}



/*************************************
   Forms.css - (c) Aljan Scholtens
*************************************/
form{
   margin:0px 0px 22px 0px;
   overflow:hidden;
}
   fieldset{
      padding:0;
      margin:0px 0px 22px 0px;
      border:0;
   }
      dl dt{
         float:left;
         text-align:right;
         width:140px;
         padding:6px 10px 0px 0px;
      }
      dl dd{
         overflow:hidden;
         margin:0px 0px 5px 0px;
         padding:0;
      }
      ul.errors{
         color:#f00;
      }
      dd.has-errors input[type=text],dd.has-errors textarea {
      }
      
      input[type=text],textarea{
         width:200px;
         font-family:'lucida sans unicode', 'lucida grande', sans-serif;
         font-size:13px;
         padding:8px 10px 8px 10px;
         margin:0;
         border-bottom:0px solid #d6d6d6;
         border-top:1px solid #d6d6d6;
         border-right:1px solid #d6d6d6;
         border-left:1px solid #d6d6d6;
         background: transparent url('../images/line.png') bottom repeat-x;
         border-radius: 3px;
      }
      textarea{
         height:160px;
         width:253px;
      }
      input[type=text]:focus, textarea:focus{
         background-color: #f8f8f8;
      }

      input[type=submit], button{
         width:160px;
         float:right;
         font-family:'lucida sans unicode', 'lucida grande', sans-serif;
         background:url('../images/buttonSprite.png') 0px 0px no-repeat;
         border:0;
         color:#000000;
         font-size:13px;
         font-weight:normal;
         cursor:pointer;
         margin:11px 0px 11px 11px;
         padding:5px 0px 10px 34px;
         text-align:left;
      }
      input[type=submit]:-moz-focus-inner, button:-moz-focus-inner {
         padding: 0;
         border: 0;
      }
         input[type=submit]:hover, button:hover{
            background:url('../images/buttonSprite.png') -161px 0px no-repeat;
         }
         input[type=submit]:active, button:active{
            background:url('../images/buttonSprite.png') -322px 0px no-repeat;
         }

.intro dl {
	margin-top: 0;
}
.intro dl dt {
   float: none; 
   text-align: left;
   width: auto;
}
.intro input[type=text] {
	width: 241px;
}
.intro textarea {
	width: 241px;
	height: 120px;
}
.intro #Send-label {
	display: none;
}