/*
----------------------------------------
Mase Engineering
     Author:    Dennis Eusebio
---------------------------------------- */

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

/* png transparency */
#logo, #logo_sec { behavior: url(iepngfix.htc); }

body {
  background: #000 url(../images/bg.gif);
  font: .8em/160% Arial, Verdana, sans-serif;
  color: #999;
}

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

/* links
---------------------------------------- */
a:link { color: #c8c8c8; font-weight: bold; outline: none; }
a:visited { color: #c8c8c8; font-weight: bold; outline: none; }
a:hover { color: #fff; font-weight: bold; outline: none; }
a:active { color: #c8c8c8; font-weight: bold; outline: none; }

/* headers
---------------------------------------- */
h1, h2, h3, h4 {
  font-weight: bold;
}
h1 {
  margin-bottom: 25px;
  font-size: 250%;
  color: #d6ca92;
  line-height: normal;
}
h2 {
  margin-bottom: 10px;
  font-size: 140%;
  color: #d6ca92;
}


/* universal
---------------------------------------- */
.container {
  float: left;
  width: 950px;
}
#nav {
  margin: 0 auto;
  width: 950px;
}
  #nav .container { background: #171716; }
  #nav ul {
    padding: 12px 25px;
    float: left;
    width: 900px;
  }
  #nav ul li { display: inline; }
    #nav a:link, #nav a:visited, #nav a:hover, #nav a:active {
      margin: 0 15px;
      text-indent: -9999px;
      float: left;
      height: 26px;
      display: inline;
    }
    #nav #nav_home { 
      margin: 0 15px 0 0; padding-right: 20px;
      width: 31px; 
      background: url(../images/logo_menu.gif) no-repeat; 
      border-right: 1px solid #454545;      
    }
    #nav_about { width: 43px; background: url(../images/nav_about.gif) no-repeat; }
      #sel_about #nav_about { background-position: 0 -26px; }
    #nav_blog { width: 33px; background: url(../images/nav_blog.gif) no-repeat; }
      #sel_blog #nav_blog { background-position: 0 -26px; }
    #nav_case { width: 99px; background: url(../images/nav_case.gif) no-repeat; }
      #sel_case #nav_case { background-position: 0 -26px; }
    #nav_products { width: 70px; background: url(../images/nav_products.gif) no-repeat; }
      #sel_products #nav_products { background-position: 0 -26px; }
    #nav_projects { width: 68px; background: url(../images/nav_projects.gif) no-repeat; }
      #sel_projects #nav_projects { background-position: 0 -26px; }
    #nav_services { width: 66px; background: url(../images/nav_services.gif) no-repeat; }
      #sel_services #nav_services { background-position: 0 -26px; }
    #nav_tour { width: 111px; background: url(../images/nav_tour.gif) no-repeat; }
      #sel_tour #nav_tour { background-position: 0 -26px; }
    #nav_contact { width: 61px; background: url(../images/nav_contact.gif) no-repeat; }
      #sel_contact #nav_contact { background-position: 0 -26px; }
      #nav a:hover, #nav #nav_home:hover { background-position: 0 -26px; }

#main, #application {
  margin: 0 auto;
  width: 950px;
}
  #main .container { 
    margin-top: 25px;
    background: #171716; 
  }
  #application .container { background: #171716; }

#logo_cont {
  margin: 0 auto;
  width: 950px;
}
  #logo_sec a:link, #logo_sec a:visited, #logo_sec a:hover, #logo_sec a:visited {
    margin: 20px 25px;
    text-indent: -9999px;
    display: block;
    width: 660px; height: 26px;
    background: url(../images/logo_sec.png) no-repeat;
  }
  
/* columns */
.left_column_large {
  margin: 25px;
  float: left;
  width: 650px;
  display: inline;
}
.right_column_small {
  margin: 25px 25px 25px 0;
  float: right;
  width: 225px;
  display: inline;
}

/* breadcrumbs */
#breadcrumbs {
  margin: 25px 25px 0 25px; padding-bottom: 5px;
  float: left;
  width: 900px;
  display: inline;
  font-size: 90%;
  border-bottom: 1px solid #1d1d1b;
  color: #666;
}
  #breadcrumbs li { display: inline; }
  #breadcrumbs a:link, #breadcrumbs a:visited, #breadcrumbs a:hover, #breadcrumbs a:active { color: #999; }
    #breadcrumbs a:hover { color: #ccc; }

#pagination {
  margin-top: 25px; padding-top: 10px;
  float: left;
  width: 650px;
  border-top: 1px solid #36352f;
}
  #pagination .selected { color: #fff; border: 1px solid #fff; }
  .pages { 
    margin: 0 20px; 
    display: inline; 
  }
    .pages a {
      padding: 2px 4px;
      border: 1px solid #36352f;
    }
  
#footer {
  margin-top: 25px; padding: 15px 25px;
  float: left;
  width: 900px;
  background: #10100f;
  color: #c8c8c8;
  font-size: 90%;
}
  .copyright { margin-left: 25px; }

/* page specific
---------------------------------------- */
/* index */
#latest_case_study {
  margin: 25px 25px 0 25px;
  float: left;
  width: 437px; height: 376px;
  display: inline;
}
  #info_case {
    margin-top: 275px; padding: 10px;
    background: #000;
  }
    #info_case p { margin: 0; }
    #info_case h1 {
      margin-bottom: 3px;
      font-size: 220%;
      line-height: 100%;
    }
    #icon_read_case {
      margin-left: 25px; padding-left: 20px;
      background: url(../images/icon_readcase.gif) 0 50% no-repeat;
    }
    .hp, .torque { font-size: 180%; color: #fff; }
      .hp strong, .torque strong { margin-right: 10px; font-size: 60%; color: #d6ca92; }

#latest_blog_entries {
  margin-right: 25px;
  float: right;
  width: 434px;
  display: inline;
}
  #logo {
    margin: 0 0 30px 0;
    text-indent: -9999px;
    position: relative; 
    top: -15px;
    float: right;
    width: 434px; height: 111px;
    background: url(../images/logo.png) no-repeat;
  }
  #latest_blog_entries h2 { margin-bottom: 10px; }
  .entry_blog {
    padding: 10px;
    border-bottom: 1px solid #36352f;
  }
    .author { font-weight: bold; }
    .icon_comments {
      padding-left: 22px;
      background: url(../images/icon_comments.gif) 0 50% no-repeat;
    }
    #latest_blog_entries .icon_comments { margin-left: 25px; }

#recent_products {
  margin: 25px 25px 0 25px;
  float: left;
  width: 900px;
  display: inline;
}
  #recent_products h2 { margin-bottom: 10px; }
  .recent_product {
    padding: 10px;
    float: left;
    width: 417px;
  }
  .recent_product.first {
    margin-right: 25px;
    display: inline;
  }
  .product_thumb {
    margin-right: 20px;
    float: left;
    width: 74px;
    display: inline;
  }
  .product_desc {
    float: left;
    width: 190px;
  }
  .recent_product ul {
    float: left;
    width: 128px;
  }
    .recent_product ul li a:link, .recent_product ul li a:visited, .recent_product ul li a:hover, .recent_product ul li a:active {
      padding: 5px 0 5px 36px;
      display: block;
      border-bottom: 1px solid #36352f;
    }
    .recent_product .icon_dyno { background: url(../images/icon_dyno.png) 10px 50% no-repeat; }
    .recent_product .icon_video { background: url(../images/icon_video.png) 10px 50% no-repeat; }
    .recent_product .icon_testimonial { background: url(../images/icon_testimonial.png) 10px 50% no-repeat; }

#twitter a:link, #twitter a:visited, #twitter a:hover, #twitter a:active {
  margin: 25px 25px 0 25px; padding: 30px 25px 30px 175px;
  float: left;
  width: 700px;
  display: inline;
  background: #000 url(../images/bg_twitter.gif) 10px 50% no-repeat;
}
  #twitter h2 { font-size: 150%; }
  #twitter .date { font-size: 60%; }

#latest_projects {
  margin: 25px 0 0 25px ;
  float: left;
  width: 437px;
  display: inline;
  clear: both;
} 
  .project {
    padding: 10px;
    float: left;
    width: 417px;
  }
    .icon_project {
      float: left;
      width: 95px;
    }
    .info_project {
      padding: 10px 0;
      float: right;
      width: 322px;
    }
      .info_project h3 {
        font-size: 130%;
      }

#latest_tour_dates {
  margin: 25px 25px 0 0;
  float: right;
  width: 437px;
  display: inline;
}
  .tour_date {
    padding: 10px;
    float: left;
    width: 189px;
  }
    .tab_date {
      padding: 2px 0;
      float: left;
      width: 50px;
      text-align: center;
      background: #000;
    }
      .tab_date p { margin: 0; }
    .info_date {
      padding-top: 5px;
      float: right;
      width: 119px;
    }     
      .month { 
        font-size: 90%; 
        text-transform: uppercase;  
        border-bottom: 1px solid #333; 
        font-weight: bold;
      }
      .day { padding: 5px 0; font-size: 160%; }

.bs_tour {
  padding: 25px;
  float: left;
  width: 387px;
  background: #1d1d1b;
}


/* about */
.header_picture { margin-bottom: 25px; }
#about blockquote {
  font-size: 180%;
  line-height: 130%;
  color: #c8c8c8;
}
#about_meta { padding-top: 25px; }
  .side_block { margin-bottom: 25px; }
  .side_block ul li {
    padding: 5px 10px;
    border-bottom: 1px solid #36352f;
  }
  .side_block p { padding: 0 10px; }

.icon_services {
  padding-left: 22px;
  background: url(../images/icon_service.gif) 0 50% no-repeat;
}
  
/* services */
.service { margin-bottom: 25px; }
  .service h2 {
    padding-left: 22px;
    background: url(../images/icon_service.gif) 0 50% no-repeat;
  }
  .service strong { color: #fff; }
  .service table { margin-bottom: .8em; width: 100%; }
  .service table td {
    padding: 5px 10px;
    border-bottom: 1px solid #36352f;
    width: 25%;
    text-align: left;
    vertical-align: top;
  }
  
/* blog */
#blog h2 { color: #fff; }
.blog_entry {
  margin-bottom: 25px;
  float: left;
  width: 650px;
}
.blog_info {
  float: right;
  width: 580px;
}
  .blog_info h2 { 
    margin: 0 0 5px 0; padding: 0; 
    font-size: 180%; 
    line-height: 120%;
  } 
  .meta_blog .icon_comments { margin-left: 20px; }
  .blog_content {
    margin-top: 25px;
  }
#categories .selected {
  color: #fff;
}
.backtomain {
  margin-bottom: 25px; padding-bottom: 10px;
  float: left;
  width: 650px;
  border-bottom: 1px solid #36352f;
}
#comments {
  padding: 25px 0 0 0;
  float: left;
  width: 650px;
  border-top: 1px solid #36352f;
}
  #comments h2 { margin-bottom: 25px; }
  #comments .none { text-align: center; font-weight: bold; color: #fff; }
  .comment {
    margin-bottom: 15px;
    float: left;
    width: 650px;
  }
    .comment_content {
      padding: 25px;
      background: #36352f;
    }
    .comment_meta { padding: 10px 25px; }
    
  #f_name, #f_email, #f_url, #f_comment {
    padding: 5px;
    width: 640px;
    background: #ccc;
    font-size: 110%;
  }
  #f_comment { height: 150px; }
  #f_sendupdates { margin-left: 20px; }

/* products */
#products {
  margin: 25px;
  float: left;
  width: 650px;
  display: inline;
}
  .product {
    margin-bottom: 1px; padding: 10px;
    float: left;
    width: 630px;
    background: #1d1d1b;
  }
    .product .product_thumb {
      margin-right: 10px; 
      width: 200px; 
    }
    .product .product_desc {
      margin-right: 10px; padding: 10px 0;
      float: left;
      width: 280px;
      display: inline;
    }
      .product .product_desc h2 {
        margin: 0;
        font-size: 180%;
        line-height: normal;
      }
      .power_increase {
        font-weight: bold;
        font-size: 160%;
        color: #fff;
      }
        .power_increase span { 
          margin-right: 10px;
          font-size: 90%;
          color: #d6ca92; 
        }
    .product ul {
      margin-top: 10px;
      float: left;
      width: 130px;
    }
      .product ul li a:link, .product ul li a:visited, .product ul li a:hover, .product ul li a:active {
        padding: 5px 0 5px 36px;
        display: block;
        border-bottom: 1px solid #36352f;
      }
      .product .icon_dyno { background: url(../images/icon_dyno.png) 10px 50% no-repeat; }
      .product .icon_video { background: url(../images/icon_video.png) 10px 50% no-repeat; }
      .product .icon_testimonial { background: url(../images/icon_testimonial.png) 10px 50% no-repeat; }
    
#the_difference {
  margin-top: 25px; padding: 0 10px;
  float: right;
  width: 226px;
}
  #the_difference ul { margin: 20px; }
  #the_difference ul li {
    padding: 2px 0;
    list-style: disc;
  }
  
#product_detail {
  margin: 25px;
  float: left;
  width: 900px;
  display: inline;
}
  #product_detail .backtomain { width: 900px; }

  #product_detail_info {
    float: left;
    width: 583px;
  }
    #product_detail_info .product_info {
      margin: 15px 0; padding: 10px;
      width: 563px;
    }
      .product_info h4 { font-size: 120%; color: #fff; }

  #product_gallery {
    float: right; 
    width: 289px;
    border: 1px solid #36352f;
  }
    #product_thumbs{
      float: left;
      width: 289px;
    }
    #product_thumbs a {
      margin: 10px;
      float: left;
      width: 75px;
    }

    #product_byline {
      padding: 15px;
      border-top: 1px solid #36352f;
      float: left;
      width: 259px;
    }
      #product_byline p { margin: 0; }

  #product_details {
    margin-top: 25px;
    float: left;
    width: 900px;
  }
  #product_details #project_tabs {
    float: left;
    width: 900px;
  }
  #product_details #project_tabs li { display: inline; }
  #product_details #project_tabs a {
    margin-right: 1px; padding: 5px 8px;
    float: left;
  }
    #product_container {
      padding: 10px;
      float: left;
      width: 880px;
      background: #1d1d1b;
    }
      #testimonials, #dyno_chart, #video {
        float: left;
        width: 575px;
      }
 
form#product_contact {
  margin: 25px 0;
  float: left;
  width: 900px;
  display: inline;
}
  form#product_contact #f_contact {
    float: left;
    width: 650px;
  }
  #product_order_meta {
    float: right;
    width: 225px;
  }
  
  
/* projects */  
#projects .project { 
  margin-bottom: 1px;
  width: 630px; 
  background: #1d1d1b;
}
#projects .info_project {
  float: left;
  width: 405px;
}
  .info_project h1 {
    margin: 0 0 5px 0;
    font-size: 220%;
    color: #fff;
    line-height: normal;
  }
#projects .project .stats_project {
  float: left;
  width: 130px;
}
  .stats_project li { padding: 5px; }
  .stats_project .hp { border-bottom: 1px solid #36352f; }
#search_projects form {
  padding: 10px 0 2px 0;
  background: #1d1d1b;
}
  #search_projects p { margin: 0; }
  #search_projects #f_search {
    margin: 0 0 10px 0; padding: 5px;
    width: 195px;
    font-size: 110%;
    background: #ccc;
    border: 1px solid #999;
    color: #999;
  }
#top_hp {
  margin: 25px 50px 0 0;
  float: left;
  width: 300px;
  display: inline;
} 
  .project_list {
    padding: 10px;
    float: left;
    width: 280px;
    border-bottom: 1px solid #36352f;
  }
  #top_hp .info_project {
    float: left;
    width: 150px;
  }
  #top_hp .stats_project {
    padding-top: 5px;
    float: right;
    width: 130px;
    text-align: right;
  }
  #top_hp .hp { border: none; }
#top_torque {
  margin-top: 25px;
  float: left;
  width: 300px;
  display: inline;
}
  #top_torque .info_project {
    float: left;
    width: 150px;
  }
  #top_torque .stats_project {
    padding-top: 5px;
    float: right;
    width: 130px;
    text-align: right;
  }
  #top_torque .hp { border: none; }
#search {
  margin-bottom: 25px; padding: 10px;
  float: left;
  width: 630px;
  background: #1d1d1b;
}
  #search p { margin: 0; }
  #search input { vertical-align: middle; }
  #search #f_search {
    margin-right: 10px; padding: 5px;
    width: 490px;
    font-size: 110%;
    color: #999;
    border: 1px solid #999;
    background: #ccc;
  }
  .bs { text-align: center; }
    .bs h2 {
      margin: 0;
      color: #c8c8c8;
      font-size: 110%;
    }
  #results {
    margin-bottom: 25px;
    float: left;
    width: 650px;
  }
    #results p { 
      margin: 0; padding: 0 10px 0 30px;
      background: url(../images/icon_search.gif) 10px 50% no-repeat;
    }
    
    #results strong { color: #fff; }

#project_media {
  margin: 25px 0;
  float: left;
  width: 650px;
}
  #project_tabs li { display: inline; }
  #project_tabs a {
    margin-right: 1px; padding: 5px 8px;
    float: left;
  }
  #media_content {
    padding: 10px;
    float: left;
    width: 630px;
    background: #1d1d1b;
  }
    #media_content p { margin: 0; }
    #media_dyno img { width: 630px; }
    
  /* jquery tab stuff */
  @media projection, screen { 
      .ui-tabs-hide { display: none; }
  }
  @media print {
      .ui-tabs-nav { display: none; }
  } 
  .ui-tabs-selected { background: #1d1d1b; }
  .ui-tabs-selected a { color: #fff; background: #1d1d1b; }

#projects .project_detail {
  padding: 10px;
  float: left;
  width: 630px;
  background: #1d1d1b;
}
  #projects .project_detail #project_meta {
    margin-right: 20px;
    float: left;
    width: 305px;
    display: inline;
  }
    #project_meta img { border: 1px solid #36352f; }
    #projects .project_detail #project_meta ul li {
      padding: 5px 10px;
      border-bottom: 1px solid #36352f;
    }
  #projects #detail_desc {
    padding-bottom: 10px;
    float: left;
    width: 305px;
    border-bottom: 1px solid #36352f;
  }
  #projects .project_detail .info_project {
    float: left;
    width: 305px;
  }
    #projects .project_detail .info_project p { margin: 0; }
  #projects .project_detail .stats_project_detail {
    padding-top: 10px;
    float: left;
    width: 305px;
  }
    .stats_project_detail .hp { margin-right: 10px; }
  #project_desc {
    padding: 20px;
    float: right;
    width: 265px;
  }
    #project_desc h2 { color: #fff; }
  .icon_views {
    padding-left: 22px;
    font-weight: bold;
  }
  
/* contact */
#title_area {
  padding: 25px 25px 0 25px;
  float: left;
  width: 900px;
}
  #title_area h1 {
    margin: 0; 
    float: left;
    width: 650px;
  }
  #title_area .icon_rss {
    float: right;
    width: 225px;
    text-align: right;
  }
    .icon_rss a {
      padding: 2px 0 2px 22px;
      background: url(../images/icon_rss.gif) 0 50% no-repeat;
    }
  #f_c_name, #f_c_email, #f_c_subject, #f_c_message {
    padding: 5px;
    width: 375px;
    background: #ccc;
    font-size: 110%;
  }
  .action {
    padding-top: 10px;
    border-top: 1px solid #36352f;
  }
  
/* tour */  
#tour_nav {
  margin-bottom: 25px;
  float: left;
  width: 650px;
}
  #tour_nav li { display: inline; }
  #tour_nav li a:link, #tour_nav li a:visited, #tour_nav li a:hover, #tour_nav li a:active {
    margin-right: 10px; padding: 5px 10px;
    float: left;
    display: inline;
  }
  #tour_nav a.selected { background: #36352f; color: #fff; }
#tour .tour_date {
  margin: 0 0 25px 0; padding: 0; 
  float: left;
  width: 650px;
}
  #tour .tour_date .tab_date {
    margin-right: 10px;
    float: left;
    width: 50px;
    display: inline;
  }
  #tour .tour_date .info_date {
    float: left;
    width: 390px;
  }
      #tour .tour_date h3 { font-size: 180%; line-height: normal; color: #fff; }
    #tour .tour_date ul {
      float: right;
      width: 170px;
    }
      #tour .tour_date ul li {
        padding: 5px 10px;
        border-bottom: 1px solid #36352f;
      }
  #tour .tour_date .tour_desc {
    margin-top: 10px;
    float: left;
    width: 390px;
  }

#map_of_event {
  padding: 25px 0;
  border-top: 1px solid #1d1d1b;
  border-bottom: 1px solid #1d1d1b;
  float: left;
  width: 650px;
}
  #map {
    width: 650px;
    height: 325px;
  }
  
#register {
  padding-top: 25px;
  float: left;
  width: 650px;
}
  #register .disclaimer {
    padding-bottom: 25px;
  }
  #register strong { color: #fff; }
  #register h3 {
    margin-bottom: 5px;
    font-size: 120%;
    color: #fff;
  }
  #register .car_info {
    margin-top: 25px;
  }
  #register #f_phone, #register #f_name, #register #f_email, #register #f_car, #register #f_considerations, #register #f_ems {
    padding: 5px;
    width: 455px;
    background: #ccc;
    font-size: 110%;
  }
    #register #f_considerations { 
      height: 100px;
    }
#terms { padding: 25px 0; }
  
/* case studies */
#case_studies {
  margin: 25px;
  float: left;
  width: 900px;
  display: inline;
}
  .case_study {
    float: left;
    width: 900px;
  }
    .case_preview {
      float: left;
      width: 290px;
    }
    .case_info {
      float: right;
      width: 583px;
    }
      .case_header {
        float: left;
        width: 583px;
      }
        .case_name {
          float: left;
          width: 358px;
        }
          .case_name h1 { margin: 0; }
          .case_name .car { color: #c8c8c8; }
          .case_name h2 { font-size: 250%; line-height: 90%; }
          .case_name .icon_comments { margin-left: 25px; }
        .case_power {
          float: right;
          width: 200px;
        }
      .icon_read_case {
        padding-left: 22px;
        background: url(../images/icon_read_case.gif) 0 50% no-repeat;
      }

  #case_studies #pagination {
    width: 900px;
  }

#case_detail {
  margin: 25px;
  float: left;
  width: 900px;
  display: inline;
}
  #case_detail .backtomain { width: 900px; }
  
  #case_study_detail {
    float: left;
    width: 583px;
  }
    #case_study_detail .case_info {
      margin: 15px 0; padding: 10px;
      width: 563px;
    }
      .case_info h4 { font-size: 120%; color: #fff; }
  
  #case_study_gallery {
    float: right; 
    width: 289px;
    border: 1px solid #36352f;
  }
    #gallery_thumbs{
      float: left;
      width: 289px;
    }
    #gallery_thumbs a {
      margin: 10px;
      float: left;
      width: 75px;
    }
    #gallery_thumbs .last { margin: 0; }
    
    #gallery_byline {
      padding: 15px;
      border-top: 1px solid #36352f;
      float: left;
      width: 259px;
    }
  
  #case_details {
    margin-top: 25px;
    float: left;
    width: 900px;
  }
  #case_detail #project_tabs {
    float: left;
    width: 900px;
  }
  #case_detail #project_tabs li { display: inline; }
  #case_detail #project_tabs a {
    margin-right: 1px; padding: 5px 8px;
    float: left;
  }
    #case_container {
      padding: 10px;
      float: left;
      width: 880px;
      background: #1d1d1b;
    }
      #modifications, #dyno_chart, #video {
        float: left;
        width: 575px;
      }
        #modifications table { width: 100%; }
          #modifications table td { padding: 5px; width: 50%; vertical-align: top; }
        #modifications h3 { color: #c8c8c8; }
  
  
  #case_detail #comments { border: none; }