/***************************************************
   Element styles
 **************************************************/

html, body {
  height: 100%;
}

body {
  margin: 0px;
  padding: 0px;
  
  text-align: center;
  font-family: verdana, arial, sans serif, serif;
  font-size: 0.62em;
  
  color: #FDFAEB;
  background: #000000 url(body_bg7.jpg) repeat-x top left;
  background-attachment: fixed;
}

acronym {
  cursor: help;
  border-bottom: 1px solid #955816;
}

b {
  font-weight: normal;
  color: #FFEEA8;
}

pre {
  padding: 5px 0 0 20px;
  font-family: verdana, arial, sans serif, serif;
  font-size: 1.0em;
  color: #FFEEA8;
}

del {
  color: #CAC5AA;
}


/***************************************************
   Form field styles
 **************************************************/


input, textarea, select {
  margin: 0 0 5px 0;
  padding: 4px;
  font-family: verdana, arial, sans-serif;
  font-size: 1em;
  color: #FDFAEB;
  background: #000000;
  border: 1px solid #666;
}

input:focus, textarea:focus, select:focus {
  border: 1px solid #999;
}

input.button {
  background: #4E2E0C;
  border-color: #795D40 #371C00 #371C00 #795D40;
}


/***************************************************
   Layout styles
 **************************************************/


#header {
  height: 138px;
  background: url(hdr3.jpg) no-repeat top left;
}

#siteBox {
  width: 588px;
  min-height: 100%;
  margin: 0px auto; 
  
  text-align: left;
  background: url(content_bg2.jpg) repeat-y top center;
}





/***************************************************
   Conent styles
 **************************************************/


#content {
    padding: 0px 30px 0 30px;
    background: url(content_top2.jpg) no-repeat top left;
  }


  #content p {
    margin: 0 0 2.5em 0;
    line-height: 1.9em;
  }

  #content p:first-letter {
    font-size: 1.4em;
    line-height: 1.0em;
  }

  #content ul {
    margin-bottom: 2.5em;
    line-height: 1.9em;
    list-style-image: url();
  }
  
  #content ol {
    margin-bottom: 2.5em;
    line-height: 1.9em;  
  }
  
  #content ol li {    
    padding-bottom: 10px;
    font-family: arial, sans serif, serif;
    color: #FFEEA8;
  }
  
  #content ol li span {
    font-family: verdana, arial, sans serif, serif;
    color: #FDFAEB;
  }
  

  #content h1 { 
    height: 40px;    
    clear: left;
    margin: 0px;
    text-indent: -100em;
    
    /************************************  
     OLD DISPLAY STYLES
     ************************************
    text-indent: 1px;
    font-family: times new roman, serif;
    font-size: 38px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: -3.0px;
    color: #FBB023;
    */
  }
  
  #content h2 {
    clear: left;
    margin-bottom: 0px;
    font-family: times new roman, serif;
    font-size: 1.4em;
    font-weight: bold;
    color: #FFEEA8;
  }  

  #contentText a,
  #contentNews a,
  #footer a {
    color: #FFEEA8;
  }

  #contentText a:visited{
    color: #FBB023;
  }
  #contentNews a:visited,
  #footer a:visited {
    color: #FBB023;
  }

  #contentText a:hover {
    color: #FDFAEB;
    background-color: #8A0000;
  }
  #contentNews p a:hover {
    color: #00FF00;
    background-color: ;
  }
  #footer a:hover {
    color: #FDFAEB;
    background-color: #8A0000;
  }

  #contentText {
    width: 375px;
  }

  #contentNews {
    float: right;
    width: 115px;
}




/***************************************************
   Menu styles
 **************************************************/

#menu {
    position: relative;
    left: 536px;
    width: 17px;
    height: 114px;
    background: url(menu_tab2.gif) no-repeat left top;
  }

  #menu a img {
    border: 0px;
  }

  .menuContents {
    width: 150px;
    height: 150px;
    margin-right: 17px;
    padding: 15px 0 10px 0;
    background: url(menu_bg2.png) no-repeat right top !important;  
    background: url(menu_bg2.gif) no-repeat right top;             
  }

  .menuTab {
    float: right;
    width: 17px;
    height: 150px;
    background: url(menu_tab.gif) no-repeat left top;
  }

  .menuContents a {
    display: block;
    width: 115px;
    padding: 3px;
    text-decoration: none;
    text-transform: uppercase;
    text-indent: 12px;
    color: #FDFAEB;
  }

  .menuContents a:hover {
    color: #FBB023;
    background-color: #8A0000;
}





/***************************************************
   Footer styles
 **************************************************/


 #footer {
     height: 52px;
     background: #000000 url(footer3.jpg) no-repeat left top;
   }
 
   #footer p {     
     padding: 34px 0 0 30px;
 }





/***************************************************
   Quote/Pictures side bar styles
 **************************************************/


.quote {
  background: url() no-repeat right bottom;
}

.pictures {
    padding-bottom: 15px;
  }

  .pictures img {
    padding: 2px;
    padding-bottom: 4px;
    opacity: 0.25;
    border: 0px;
  }

  .pictures a:hover img {
    opacity: 1.00;  
}





/***************************************************
   Jump module styles
 **************************************************/

.jump {
    padding-left: 5px;
  }

  .jump img {  
    vertical-align: middle;
    padding-bottom: 5px;
    border: 0px;
  }

  .jump a {
    text-decoration: none;
    text-transform: uppercase;
}




/***************************************************
   Portfolio & Link list styles
 **************************************************/


ul.portfolio, 
ul.links {
    float: left;
    padding: 0px;
    margin: 0px;
  }


  ul.portfolio li, 
  ul.links li {
    float: left;
    position: relative;
    padding: 3px 0 3px 0 !important;
    padding: 0px;
    list-style-type: none;
    list-style: none;
  }

  ul.portfolio li a,
  ul.links li a {
    float: left;    
    width: 364px;
    margin: 4px;    
    cursor: pointer;
    text-decoration: none;  
  }

  ul.links li a {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 2px;
    padding-bottom: 0px;
  }

  ul.portfolio li a:hover,
  ul.links li a:hover {
    background: url() no-repeat top center;
  }

  ul.portfolio li a img {
    float: left;
    width: 50px;
    padding: 7px;
    border: 0px;
    opacity: 0.5;
  }
  
  ul.portfolio li a:hover img {
    opacity: 0.99;
  }

  ul.portfolio li a span.title {
    float: left;
  }
  
  ul.links li a span.title {
    display: block;
    text-indent: 15px;
    margin-left: 11px;
    background: url() no-repeat center left;
  }  

  ul.portfolio li a span.desc, 
  ul.links li a span.desc {
    float: left;  
    width: 297px;
    padding-right: 3px;
    color: #FDFAEB 
  }
  
  ul.links li a span.desc {
    margin-left: 10px;
    width: 350px;
  }
  
  ul.portfolio li a span.bottom,
  ul.links li a span.bottom {
    display: block;
    height: 10px;
    clear: both;
  }
  
  ul.links li a span.bottom {
    height: 9px;
  }
  

  ul.portfolio li a:hover span.bottom,
  ul.links li a:hover span.bottom {
    background: #8A0000;
}  



/***************************************************
   Header image styles 
 **************************************************/
 
 
h1.portfolio {
  background: url() no-repeat center left;
}

h1.freeTemplates {
  background: url() no-repeat center left;
}

h1.latest {
  background: url() no-repeat center left;
}

h1.next {
  background: url() no-repeat center left;
}

h1.webDesign {
  background: url() no-repeat center left;
}

h1.whyChooseUs {
  background: url() no-repeat center left;
}

h1.whatWeDo {
  background: url() no-repeat center left;
}

h1.view {
  background: url() no-repeat center left;
}

h1.quote {
  background: url() no-repeat center left;
}

h1.about {
  background: url() no-repeat center left;
}

h1.useability {
  background: url() no-repeat center left;
}

h1.design {
  background: url() no-repeat center left;
}

h1.cost {
  background: url() no-repeat center left;
}

h1.why2 {
  background: url() no-repeat center left;
}

h1.jump {
  background: url() no-repeat center left;
}

h1.goals {
  background: url() no-repeat center left;
}

h1.query {
  background: url() no-repeat center left;
}

h1.coding {
  background: url() no-repeat center left;
}

h1.javascript {
  background: url() no-repeat center left;
}

h1.images {
  background: url() no-repeat center left;
}

h1.details {
  background: url() no-repeat center left;
}

h1.time {
  background: url() no-repeat center left;
}

h1.contact {
  background: url() no-repeat center left;
}

h1.success {
  background: url() no-repeat center left;
}

h1.links {
  background: url() no-repeat center left;
}

h1.suggest {
  background: url() no-repeat center left;
}

h1.backScratch {
  background: url() no-repeat center left;
}

h1.ourServices {
  background: url() no-repeat center left;
}

h1.secondToNone {
  background: url() no-repeat center left;
}

h1.logoAndBranding {
  background: url() no-repeat center left;
}




/***************************************************
   Generic Display Classes
 **************************************************/

.highlight {
  background-color: #371C00;
}

/********************************************/
/*****    css photo gallery             *****/
/*****  http://www.beyondsexxy.com      *****/
/*****            20/08/2007            *****/
/********************************************/

/* ---------- gallery container ---------- */
.gallery {
position:relative;
width:624px;
margin:1em auto;
}

/* ---------- opacity ---------- */
.gallery a img {opacity:0.7; filter:alpha(opacity=70); -moz-opacity:0.70; -khtml-opacity:0.70;}
.gallery a:visited img {opacity:0.7; filter:alpha(opacity=70); -moz-opacity:0.70; -khtml-opacity:0.70;}
.gallery a:hover img {opacity:0.95; filter:alpha(opacity=95); -moz-opacity:0.95; -khtml-opacity:0.95;}

/* ---------- thumbnail images ---------- */
.thumb, .no-thumb {
float:left;
width:149px;
height:112px;
margin:2px;
}
.thumb {
border:0px solid #000;
}
.no-thumb {
border:0px solid #000;
}
.thumb a img {display:block;}
.thumb a span {display:none;}
.thumb a:hover, .thumb a:active, .thumb a:focus {background:transparent;}

/* ---------- preview image ---------- */
.gallery a:hover span {
display:block;
position:absolute;
width:300px;
height:225px;
top:124px;
left:161px;
}

/* ---------- preview image title block ---------- */
.thumb em {
position:absolute;
width:200px;
top:196px;
left:50px;
-moz-border-radius:12px;
background:#036;
color:#0FF;
font:normal 14px/20px verdana;
text-align:center;
opacity:0.8;
filter:alpha(opacity=100);
-moz-opacity:0.80;
-khtml-opacity:0.8;
}
.thumb a {
text-decoration:none;
}

/* ---------- no border on images ---------- */
a img {border:0;}

/* ---------- clear floats ---------- */
.clear {
height:0;
line-height:0px;
font-size:0;
clear:both;
}
}