/*
----------------------------------------
Identity Design
     Author:    Dennis Eusebio
---------------------------------------- */

/* zeros out everything */
@import "/css/whitespace-reset.css";

body {
	background: #3d3d3d;
	font: .8em/160% 'Georgia', 'Times New Roman', serif;
	color: #fff;
}

p { margin-bottom: .8em; }
small { font-size: 90%; }

/* links
---------------------------------------- */
a:link { color: #ccc; outline: none; }
a:visited { color: #ccc; outline: none; }
a:hover { color: #fff; outline: none; }
a:active { color: #ccc; outline: none; }

/* headers
---------------------------------------- */
h1, h2, h3, h4 {
  line-height: normal;
}
h1, h2 {
  text-transform: uppercase;
  font-size: 90%;
  letter-spacing: 5px;
}
h3, h4 { font-family: Arial, Verdana, sans-serif; }
h3 { font-size: 160%; }
h4 { font-size: 120%; }


/* universal
---------------------------------------- */
.container {
  margin: 0 auto;
  width: 940px;
}

#header {
  padding: 15px 0;
  float: left;
  width: 100%;
  background: #333;
}
  #logo a {
    margin: 0 430px;
    text-indent: -9999px;
    float: left;
    width: 81px; height: 123px;
    background: url(/images/logo.png) center 0 no-repeat;
    display: inline;
  }
  #logotype a {
    margin: 15px 0 0 386px;
    text-indent: -9999px;
    float: left;
    width: 168px; height: 8px;
    background: url(/images/logotype.png) no-repeat;
    display: inline;
  }
    #about #logotype a { background-position: 0 -8px; }
    #services #logotype a { background-position: 0 -16px; }
    #projects #logotype a { background-position: 0 -24px; }
    #contact #logotype a { background-position: 0 -32px; }
  #nav {
    margin: 15px 240px 0 240px;
    float: left;
    width: 460px; height: 28px;
    display: inline;
  }
    #nav li { 
      float: left;
      display: inline;
    }
    #nav a:link, #nav a:visited, #nav a:hover, #nav a:active {
      text-indent: -9999px;
      float: left;
      width: 100px; height: 28px;
      background: url(/images/nav.png) 0 0 no-repeat;
      display: inline;
    }
      #nav_about, #nav_services, #nav_projects { margin-right: 20px; }
      #nav #nav_about { background-position: 0 0; }
        #nav #nav_about:hover { background-position: 0 -28px; }
        #about #nav #nav_about { background-position: 0 -56px; }
      #nav #nav_services { background-position: -100px 0; }
        #nav #nav_services:hover { background-position: -100px -28px; }
        #services #nav #nav_services { background-position: -100px -56px; }
      #nav #nav_projects { background-position: -200px 0; }
        #nav #nav_projects:hover { background-position: -200px -28px; }
        #projects #nav #nav_projects { background-position: -200px -56px; }
      #nav #nav_contact { background-position: -300px 0; }
        #nav #nav_contact:hover { background-position: -300px -28px; }
        #contact #nav #nav_contact { background-position: -300px -56px; }
        
#section {
  float: left;
  width: 100%;
}
  #section h1 { padding: 50px 0; }
  #about #section { background: #3366cc url(/images/bg_section_about.png) repeat-x; }
  #services #section { background: #f2ba24 url(/images/bg_section_services.png) repeat-x; }
  #projects #section { background: #8dd86c url(/images/bg_section_projects.png) repeat-x; }
  #contact #section { background: #9f33cc url(/images/bg_section_contact.png) repeat-x; }

#application {
  padding: 50px 0;
  float: left;
  width: 100%;
  background: #333;
}

/* forms */
form {
  padding: 10px;
}
fieldset { border: none; }
dl, dt, dd { margin: 0; padding: 0; }
  dl { margin: 10px 0; }
  dt { margin-bottom: 5px; }
label { 
  font-weight: bold;
  font-family: Arial, Verdana, sans-serif; 
}

/* pagination */
.pagination {
  margin: 20px 0;
  float: left;
  width: 680px;
}

/* slates */
.blank_slate {
  margin: 20px 0;
  float: left;
  width: 100%;
}
  .slate_container {
    padding: 10px;
    background: #3d3d3d;
  }
  .slate_container p { margin: 0; }

#footer {
  padding: 25px 0;
  float: left;
  width: 100%;
}
  #footer p {
    padding: 0 0 25px 60px;
    float: left;
    width: 420px;
    background: url(/images/bg_footer.png) no-repeat;
  }
    .copyright { color: #999; }
  #footer ul {
    float: left;
    width: 220px;
  }
    #social {
      margin-right: 20px;
      display: inline;
    }
      #social li { margin-right: 5px; }
    #footer li { display: inline; }
    #footer a:link, #footer a:visited, #footer a:hover, #footer a:active {
      margin-right: 10px; 
      color: #999;
    }
      #footer a:hover { color: #fff; }

/* page specific
---------------------------------------- */
/* index */
#feature {
  float: left;
  width: 100%; height: 333px;
  background: #cc3333 url(/images/bg_feature.png) repeat-x;
}
  #feature h1 { padding-top: 168px; }
  #feature.comingsoon { height: 100px; }
  #feature.comingsoon h1 { padding-top: 50px; }
  .comingsoon .container { text-align: center; }

#project_list {
  float: left;
  width: 700px;
}
  #project_list h2 { margin-bottom: 20px; }
  .project {
    margin-bottom: 20px;
    float: left;
    width: 700px;
  }
    .project_thumb {
      margin-right: 20px;
      float: left;
      width: 220px;
      display: inline;
    }
      .project_thumb img {
        padding: 10px;
        background: #fff;
      }
    .project_info {
      margin-right: 20px;
      float: left;
      width: 280px;
      display: inline;
    }
      .project_info h3 { margin-bottom: 10px; }
      .project_info a:link, .project_info a:visited, .project_info a:hover, .project_info a:active {
        color: #cc3333;
      }
        .project_info a:hover { color: #fff; }
    .project_services {
      float: left;
      width: 160px;
    }
      .project_services h4 { 
        margin-bottom: 10px; 
        color: #cc3333;
      }
        .project_services ul { margin: 0 20px; }
        .project_services ul li {
          padding: 2px 0;
          color: #999; 
          list-style: disc; 
        }
        .project_services a:link, .project_services a:visited, .project_services a:hover, .project_services a:active {
          color: #999;
        }
          .project_services a:hover { color: #fff; }

#twitter {
  float: right;
  width: 220px;
}
  #twitter h2 { margin-bottom: 20px; }
  .tweet {
    margin-bottom: 20px;
    float: left;
    width: 220px;
  }
    .tweet_content {
      margin-bottom: 5px; padding: 20px 10px 10px 10px;
      background: #3d3d3d url(/images/bg_tweet.png) 0 0 no-repeat;
    }
    .tweet_date {
      padding: 0 10px;
      color: #999;
    }

/* about us */
#about_us {
  float: left;
  width: 680px;
}
  #about_us h3 {
    margin-bottom: 20px; 
    color: #3366cc; 
  }
#testimonials { margin: 40px; }
  .testimonial { 
    margin-bottom: 20px; padding-bottom: 20px; 
    border-bottom: 1px solid #666;
  }
    .testimonial cite { color: #999; }

/* services */
#our_services {
  float: left;
  width: 680px;
}
  #our_services h3 { 
    margin-bottom: 20px;
    color: #f2ba24; 
  }

/* projects */
#projects #project_list h3, #projects #project_list h4 { color: #8dd86c; }
#projects .project_info a:link, #projects .project_info a:visited, #projects .project_info a:hover, #projects .project_info a:active {
  color: #8dd86c;
}  
  #projects .project_info a:hover { color: #fff; }

#services_categories {
  float: right;
  width: 220px;
}
  #services_categories h2 { margin-bottom: 20px; }
  #services_categories a:link, #services_categories a:visited, #services_categories a:hover, #services_categories a:active {
    margin-bottom: 1px; padding: 10px;
    color: #999;
    float: left;
    width: 200px;
    border: 1px solid #999;
    font-family: Arial, Verdana, sans-serif;
    font-size: 90%;
    font-weight: bold;
  }
    #services_categories a:hover {
      border: 1px solid #fff; 
      color: #fff; 
    }

/* project detail */
#project_detail {
  float: left;
  width: 700px;
}  
#gallery_detail {
  padding: 10px;
  background: #3d3d3d;
  display: block;
}
#project_thumbs {
  padding: 10px;
  float: left;
  width: 680px;
  background: #3d3d3d;
}
  #project_thumbs img {
    margin-right: 10px;
    float: left;
    display: inline;
  }
#project_description {
  margin: 20px 0;
  float: left;
}
  #description {
    padding: 10px;
    float: left;
    width: 460px;
  }
  #service_listing {
    margin: 0 20px; padding: 10px;
    float: right;
    width: 150px;
    display: inline;
  }
    #service_listing li {
      list-style: disc;
      color: #999;
    }
    #service_listing a:link, #service_listing a:visited, #service_listing a:hover, #service_listing a:active {
      color: #666;
    }
      #service_listing a:hover { color: #fff; }
#contact_project {
  margin: 20px 0;
  float: left;
  width: 700px;
}
  #contact_project a:link, #contact_project a:visited, #contact_project a:hover, #contact_project a:active {
    padding: 10px;
    float: left;
    width: 680px;
    background: #3d3d3d;
    color: #999;
  }
    #contact_project a:hover {
      color: #fff;
    }

/* conatct us */
#contact_us {
  float: left;
  width: 680px;
}
  #contact_us h3 { color: #9f33cc; }
  #send_message {
    float: left;
    width: 680px;
  }
  #i_name, #i_email, #i_message {
    padding: 5px;
    border: none;
    width: 450px;
    font-size: 120%;
    font-family: Arial, Verdana, sans-serif;
  }
    #i_message { height: 100px; }