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



body{background: #313131; margin:0;  font-family:Georgia, "Times New Roman", Times, serif; color:#FFF; font-size:11px; }
#clear{clear:both;}

td{vertical-align:text-top;}

a:link{color:#FFF; text-decoration:none;}
a:visited{color:#FFF; text-decoration:none;}
a:hover{color:#FFF; text-decoration:underline;}
a:active{color:#FFF; text-decoration:none;}

#wrapper{margin:40px auto 40px auto; width:990px;}
#top{width:990px; height:10px; background:url(images/top.gif); clear:both;}
#middle{width:981px; background:url(images/middle.gif) repeat-y; clear:both; padding:0 4px 0 5px;}

#nav{width:981px; height:22px;}
#navitem{margin-right:20px; color:#666; font-family:Arial, Helvetica, sans-serif; font-size:11px; margin-top:3px; float:right;}
#navitem a:link{color:#666; text-decoration:none;}
#navitem a:visited{color:#666; text-decoration:none;}
#navitem a:hover{color:#666; text-decoration:underline;}
#navitem a:active{color:#09C; text-decoration:none;}

#contact-left{float:left; text-align:right; width:470px; padding-right:20px; margin-top:75px; color:#666; font-style:italic;}
#contact-right{float:left; text-align:left; width:470px; padding-left:20px; margin-top:75px; color:#666; font-style:italic;}
.contacttitle{color:#09F; }

#dash{height:1px; background:url(images/dash.png) repeat-x; clear:both; margin:0 0 0 0;}
#bottom{width:990px; height:10px; background:url(images/bottom.gif); clear:both;}
#logo {background:url(images/logo3.png); width:106px; height:106px; margin-left:30px; position:absolute; top:-52px; z-index:10;}
#logo2 {background:url(images/logo2.png); width:127px; height:127px; margin-left:30px; position:absolute; top:-82px; z-index:10;}
#rel {position:relative;}
#contact {height:390px;width:981px; background-color:#F9F9F9; background:url(images/contactbg.png); margin:0 0 0 0;}
#about{width:481px; background-color:#F9F9F9; text-align:center; clear:both; color:#333; padding:10px 250px 25px 250px;}
#slide {height:390px;width:981px; background-color:#F9F9F9; margin:0 0 0 0; }
#blackbar{height:33px; width:956px; background-color:#000; padding:10px 0 0 25px; font-family:Georgia, "Times New Roman", Times, serif; color:#FFF; font-size:18px; font-style:italic;}
#footer{width:981px; height:169px; background:url(images/footer.png); padding:25px 0 0 0;font-style:italic; }
#footeritem{margin:0 25px 0 25px; float:left; width:277px;}
#footertitle{ color:#09F; margin-bottom:15px; font-size:18px;}
#footertext{ color:#FFF; font-size:12px;}
#footer-top{height:145px;}
#footer-bottom{margin-right:20px; color:#666; font-family:Arial, Helvetica, sans-serif; font-size:11px; margin-top:6px; float:right;}
#footersmall{height:25px; width:981px; background:#191919; padding-top:3px;}


#work{padding:34px 79px 0 53px;}
#workitem{width:256px; margin:25px 0 0 25px; float:left; height:132px; border:#CCC solid 1px;}
#workspacer{height:53px; width:256px;}

#project-description{width:881px; background-color:#000; padding:20px 50px; margin:0 0 0 0; font-style:italic; background:url(images/workbg.png);}

#proj{width:824px; min-height:145px; background:#000; padding:0 79px 78px 78px;font-style:italic; }
#projitem{margin:25px 25px 0 0px; float:left; width:258px; text-align:left;  text-align:center;}
#projitemright{margin:25px 0 0 0px; float:left; width:258px; text-align:left;  text-align:center;}
#projtitle{ color:#09F; margin-bottom:15px; font-size:14px;}
#projtext{ color:#FFF; font-size:12px;}
#proj-top{height:145px;}
#proj-bottom{margin-right:20px; color:#666; font-family:Arial, Helvetica, sans-serif; font-size:11px; margin-top:6px; float:right;}
#projsmall{height:25px; width:981px; background:#191919; padding-top:3px;}
#projbg{background:#333 url(images/projectdescriptionbg.png); padding-bottom:35px;}

#potfoliodecription{width:281px; height:330px;  float:left;  position:absolute; top:-390px; z-index:9; padding-top:30px; margin-top:30px;}
#potfoliodecriptionbg{width:281px; height:360px; margin-top:30px;  float:left; background:#000 url(images/blackwithcircle.png) top left no-repeat;  position:absolute; top:-390px; z-index:8; /* for IE */
  filter:alpha(opacity=90);
  /* CSS3 standard */
  opacity:0.90;
  }
#portfoliowork{width:981px; height:390px;  float:left; overflow-y: hidden; clear:both; }
#portitem{margin:10px 25px 0 25px; clear:both; width:222px; }
#porttitle{ color:#09F; margin-bottom:15px; font-size:14px;}
#porttext{ color:#fff; font-size:12px;}

#displaywork{width:824px; height:390px;  float:left;  clear:both; padding:70px 79px 0px 78px; background:url(images/blackwithcircle.png) top left no-repeat #000; }
#displaydecription{width:256px; height:360px;  float:left;  position:absolute; top:-460px; left:70px; z-index:9; padding-top:30px;}
#displaydecriptionbg{width:256px; height:390px;  float:left; background:#000 ;  position:absolute; top:-460px; left:70px; z-index:8; /* for IE */
  filter:alpha(opacity=90);
  /* CSS3 standard */
  opacity:0.90;
  }
#displayitem{margin:10px 25px 0 25px; clear:both; width:222px; }
#displaytitle{ color:#09F; margin-bottom:15px; font-size:14px;}
#displaytext{ color:#fff; font-size:12px;}




#s3slider { 
   width: 981px; /* important to be same as image width */ 
   height: 390px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
   z-index:1;
}

#s3sliderContent {
   width: 981px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
   left:-40px;
   top:-11px;
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
   
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 651px;
   font-size:12px;
   font-family:Georgia, "Times New Roman", Times, serif;
   font-style:italic;
   padding: 10px 13px;
   width: 309px;
   
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   bottom: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image 
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
}