/* 
    Document   : cheweee.css
    Created on : Nov 11, 2012, 10:22:55 AM
    Author     : Sanjay Sinha
    Description:
        Poppets case study styles
    Colours: 
        Red #e11e1c
        White #ffffff

*/

body.poppets {text-align: center; background: #e11e1c url(../images/bg-poppets.jpg) repeat center 0;}

.poppets article header hgroup {padding: 64px 0 34px 0; margin: 0 auto;}
.poppets article header hgroup  h2 {margin: 0 auto; font-family: "proxima-nova", helvetica, sans-serif; color: #ffffff; font-size: 24px; font-weight: bold; width: 767px;}
.poppets article {}

.poppets h1.hd-poppets {background: url(../images/hd-poppets.png) no-repeat 0 0; text-indent: -9999px; width: 503px; height: 131px; margin: 0 auto 42px auto;}
.poppets h2 {font-family: "proxima-nova", helvetica, sans-serif; color: #fcf4b6; font-size: 24px; font-weight: bold; margin: 0 0 20px 0; }

.poppets p {font-family: "proxima-nova", helvetica, sans-serif; color: #ffffff; font-size: 18px; font-weight: bold; padding: 30px 0 0 0; }
.poppets p a {color: #ffffff;}
.poppets section.proj-body {background: url(../images/bg-grid.png) repeat-y center 0;}

.poppets figure {}
.poppets figure figcaption {background: url(../images/bg-text.png) repeat center 0; font-family: "proxima-nova", helvetica, sans-serif; color: #ffffff; font-size: 18px; font-weight: bold; padding: 20px; width: 792px; margin: 0 auto 40px;}

.poppets .sequencer-desc {width: 792px; margin: 0 auto;}

/* Project footer */

.poppets section.proj-footer {background: url(../images/bg-proj-footer.png) repeat 0 0; text-align: left; margin: 40px 0 0 0; padding: 0 0 20px 0; border-top: 1px solid #fcf4b6;}
.poppets section.proj-footer .inner {width: 960px; padding: 40px 0; margin: 0 auto;}

.poppets section.proj-footer .row {width: 960px;}
.poppets section.proj-footer .column, .poppets section.proj-footer .columns { float: left; min-height: 1px; padding: 0 0; position: relative; }

.poppets section.proj-footer ul li {float: left; padding: 0 35px 0 0;}

.poppets section.proj-footer p {font-size: 10px; text-transform: uppercase; height: 134px; width: 70px; padding: 80px 0 0 0; text-align: center; color: #fcf4b6}

.poppets section.proj-footer p.concept-creation {background: url(../images/icon-concept-creation.png) no-repeat 0 0;}
.poppets section.proj-footer p.project-management {background: url(../images/icon-proj-management.png) no-repeat 0 0;}
.poppets section.proj-footer p.ux {background: url(../images/icon-ux.png) no-repeat 0 0;}
.poppets section.proj-footer p.ui {background: url(../images/icon-ui.png) no-repeat 0 0;}
.poppets section.proj-footer p.illustration {background: url(../images/icon-illustration.png) no-repeat 0 0;}
.poppets section.proj-footer p.flash {background: url(../images/icon-flash.png) no-repeat 0 0;}
.poppets section.proj-footer p.copywriting {background: url(../images/icon-copywriting.png) no-repeat 0 0;}
.poppets section.proj-footer p.email {background: url(../images/icon-email.png) no-repeat 0 0;}
.poppets section.proj-footer p.reporting {background: url(../images/icon-reporting.png) no-repeat 0 0;}

.poppets section.proj-footer .dotted-left {padding-left: 60px; border-left: 4px dotted #fcf4b6;}
.poppets section.proj-footer .dotted-top {padding-top: 20px; border-top: 4px dotted #fcf4b6;}

.poppets section.proj-footer .contact-form form {background: url(../images/bg-form.png);}
#response {color: #fcf4b6;}

.poppets section.proj-footer .share-cntr {background: url(../images/bg-stripe-diag-sml.png); }

/*-- Device responsive styles --*/

@media screen and (max-width: 960px) {
    .poppets h1.hd-poppets {background: none; font-family: "proxima-nova", helvetica, sans-serif; color: #ffffff; font-size: 134px; font-weight: bold; text-indent: 0; width: auto; height: auto;}   
    .poppets article header hgroup  h2 {width: 80%;}
    .poppets figure figcaption {width: 88%;}

    
    .poppets section.proj-footer .dotted-left {padding-left: 20px; border-left: 4px dotted #fcf4b6;}
    
    .poppets section.proj-footer .inner {width: auto;}
    .poppets section.proj-footer ul {list-style-type: disc; margin-right: 20px;}
    
    .poppets section.proj-footer ul li {float: none; margin: 0 0 0 50px; padding: 0 0 0 10px; list-style-type: disc; line-height: 28px; color: #ccf701;}
    .poppets section.proj-footer p {font-size: 18px; text-transform: none; color: #fcf4b6; height: auto; width: auto; padding: 0; text-align: left;}
    
    .poppets section.proj-footer .seven h2 {padding-left: 10px;}
    
    .poppets section.proj-footer p.concept-creation, .poppets section.proj-footer p.project-management, .poppets section.proj-footer p.ux,
    .poppets section.proj-footer p.ui, .poppets ection.proj-footer p.illustration, .poppets section.proj-footer p.games, .poppets section.proj-footer p.video,
    .poppets section.proj-footer p.email, .poppets section.proj-footer p.copywriting, .poppets section.proj-footer p.reporting, .poppets section.proj-footer p.flash,
    .poppets section.proj-footer p.microsite, .poppets section.proj-footer p.drupal, .poppets section.proj-footer p.illustration  {background: none;}
}

@media screen and (max-width: 767px) {
 .poppets .sequencer-desc {width: 80%;}   
}

@media screen and (max-width: 600px) {
    
    .poppets section.proj-footer .five h2:first-child {padding-top:20px;} 
    .poppets section.proj-footer .dotted-left {padding-left: 10px; border: none;}
    
}

@media screen and (max-width: 480px) {
    .poppets h1.hd-poppets {background: none; font-family: "proxima-nova", helvetica, sans-serif; color: #ffffff; font-size: 72px; font-weight: bold; text-indent: 0; width: auto; height: auto;}
    

}

@media screen and (max-width: 320px) {
    body.poppets {background-image: none; background-color: #c1e5f1}
}