﻿@import url('reset.css');

/*- ================== -/
/-  ===== Common ===== -*/

body {font:12px/1.8em Tahoma, sans-serif; background:url(../images/body-bg.jpg) no-repeat 50% 0 #86c7bf; color:#141414;}
p {font-size:12px; padding-bottom:20px;}
h1 {font-size:50px; color:#b5e8e1;}
h2 {color:#b5e8e1; font-size:25px;}
a {color:#b5e8e1; text-decoration:none;}
a:hover {text-decoration:underline;} 
body.alt {background:url(../images/alt_body-bg.jpg) no-repeat 50% 0;}


/*- ================== -/
/-  === Containers === -*/
#container {margin:0 auto; width:760px;}
#header {height:180px;}
#banner {height:245px;}
#content {width:760px; padding-bottom:20px; margin:0 auto;}
#footer_wrap {padding-top:20px; background:url(../images/footer_wrap-bg.jpg) repeat-x;}
  #footer {height:150px; width:760px; margin:0 auto;}
  
  #primary {width:350px;}
  #secondary {width:300px; float:right; margin-top:50px;}
  
  
/*- =================== -/
/-  ====== Header ===== -*/
#logo {
    background:url(../images/logo.png) no-repeat;
    float:left; 
    display:block; 
    text-indent:-9999em; 
    height:165px; 
    width:160px; 
    margin:15px 0 0 40px;    
}

    /*-  ====== Nav ===== -*/
    #nav {float:right; height:45px; margin-right:40px;}
    #nav li {float:left; width:50px; margin:80px 0 0 20px;}
    #nav li a {display:block; width:50px; text-indent:-9999em; height:45px; background:url(../images/home-nav.png) no-repeat;}
        #nav li#services-nav a {background:url(../images/services-nav.png); width:55px;}
        #nav li#about-nav a {background:url(../images/about-nav.png); width:55px;}
        #nav li#contact-nav a {background:url(../images/contact-nav.png); width:55px;}
        
        body#home_page #nav li#home-nav a,
        body#about_page #nav li#about-nav a,
        body#services_page #nav li#services-nav a,
        body#contact_page #nav li#contact-nav a,
        #nav li a:hover {background-position:0 -45px!important;}
        

 /*- ================== -/
/-  ====== Banner ===== -*/
#posts {float:left; width:350px; padding:40px 0 0 40px;}
#technology {float:right; width:300px; height:200px; text-align:center; padding-top:10px;}

 /*- ================== -/
/-  ===== Content ===== -*/
#primary ul {margin-left:20px;}
#primary ul li {list-style:disc;}

#secondary ul {margin-left:20px;}
#secondary ul li {list-style:disc;}

  /* Alt Page */
  body#home_page #content {background:url(../images/cta-bg.png) no-repeat 50% 0; width:auto; height:290px;}
  body#home_page #primary {width:760px; margin:0 auto;}
  body#home_page #technology h2 {color:#1d7a6e;}  
  body#home_page #primary h2 {color:#1d7a6e;}
  
  body.alt h1 {font-size:30px; padding-bottom:10px;}
  body.alt h2 {font-size:25px; padding-bottom:10px;}
  body#about_page #content {height:350px;}
  body#about_page #posts {padding:20px 0 0 0; width:350px;}
  body#about_page #primary {padding-top:20px;}
  
  body#services_page #posts {padding:20px 0 0 0; width:400px;}
  body#services_page #primary {padding-top:20px; float:left;}
  
  body#contact_page #posts {padding:20px 0 0 0; width:400px; height:400px;}
  
#cta {padding-top:20px; margin-left:0!important;}
#cta li {background:url(../images/cta-full.png) no-repeat; position:relative; list-style:none!important; height:206px; float:left; width:170px; padding:20px 40px 20px 20px; margin-left:20px}
#cta li:hover {background-position:0 -246px; cursor:pointer;}
#cta li h2 {padding-bottom:10px;}
#cta li p {font-size:12px; line-height:16px;}
#cta li a {display:block; width:170px; height:206px; position:absolute;}
#cta li ul {padding-top:10px;}
#cta li ul li {background:none; height:auto; float:none; padding:0; list-style:disc!important; margin-left:20px; font-size:12px; text-shadow:1px 1px 1px #fff;}

 /*- ================== -/
/-  ====== Form ====== -*/
#enquiry_form {width:300px; float:right;}
#enquiry_form ol li {margin-bottom:15px; background:#fff; width:260px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border:none;
  }
#enquiry_form ol li label {padding-left:5px; width:250px}
#enquiry_form ol li input {padding:5px; width:250px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border:none;
  }
#enquiry_form ol li#textarea {height:110px;}
#enquiry_form ol li textarea {width:250px; padding:5px; border:none; height:100px;}

#enquiry_form ol li#button{background:none;}
#enquiry_form ol li input#submit {width:100px; height:25px; display:block; cursor:pointer; background:#fff;}


 /*- ================== -/
/-  ===== Footer ===== -*/
#footer p {float:left;}

iframe {display:block; clear:both;}

#site_map {float:right; height:32px; margin-right:40px;}
#site_map li {float:left; width:40px; margin-left:20px;}
#site_map li a {display:block; width:40px; text-indent:-9999em; height:32px; background:url(../images/home-sitemap.png) no-repeat;}
    #site_map li#site-about a {background:url(../images/about-sitemap.png);}
    #site_map li#site-services a {background:url(../images/services-sitemap.png);}
    #site_map li#site-contact a {background:url(../images/contact-sitemap.png); width:45px;}

    body#home_page #site_map li#site-home a,
    body#about_page #site_map li#site-about a,   
    body#services_page #site_map li#site-services a,
    body#contact_page #site_map li#site-contact a,  
    #site_map li a:hover {background-position:0 -30px!important;}

