@import url("reset.css");
@import url("text.css");
@import url("grid.css");


/*------------------------------------------
GENERAL //////////////////////////////////
------------------------------------------*/

body {background:#004ebd url(../images/body-bg.jpg);color:#fff;font:16px/24px Georgia,"Times New Roman",Times,serif;position:relative;}
  body.follow {background:#a2531d url(../images/body-follow-bg.jpg);}
  
/*Animation*/

@-webkit-keyframes drive {
  from   { -webkit-transform: rotate(0deg)}
  50% { -webkit-transform: rotate(2deg);}
  to  { -webkit-transform: rotate(0deg)}
}

@-webkit-keyframes logo {
  from   { -webkit-transform: scale(1)}
  60% { -webkit-transform: scale(1.05);}
  to {-webkit-transform: scale(1);}
}


/*------------------------------------------
TYPOGRAPHY ///////////////////////////////
------------------------------------------*/

/*Headers*/
h1, h2, h3, h4, h5, h6, blockquote {margin-bottom:24px;}
h3 {font-size:16px;}
header[role="branding"] h1 {background:url(../images/logo.png) no-repeat;width:181px;height:181px;text-indent:-9999px;position:absolute;left:0;top:65px;}
body.index  header[role="branding"] h1, body.thanks  header[role="branding"] h1 {position:relative;margin:0 auto;}
  header[role="branding"] h1:hover {-webkit-animation-name: logo;-webkit-animation-duration: .2s;-webkit-animation-iteration-count: 1;-webkit-animation-timing-function: linear;}
  body.follow header[role="branding"] h1 {background:url(../images/logo-follow.png) no-repeat;}
  header[role="branding"] h1 a {display:block;width:100%;height:100%;}
h2 {font-size:24px;line-height:48px;}
div#featured-brands h3 {font-family: "adelle-1","adelle-2";text-transform:uppercase;color:rgba(0,40,97,1);}

/*Links*/
a {}
a:hover {}

/*Text*/
p {margin-bottom:24px;}


/*------------------------------------------
LAYOUT ///////////////////////////////////
------------------------------------------*/

section {width:960px;margin:0 20px 0 40px;}

/*Main Header*/
header[role="branding"] {background:url(../images/header-branding-bg.png) repeat-x;width:100%;height:239px;position:fixed;left:0;top:0;z-index:20000;}
  body.index header[role="branding"], body.thanks header[role="branding"] {background:none;position:relative;}
  body.follow header[role="branding"] {background:url(../images/header-branding-follow-bg.png) repeat-x;}

#nav-secondary {margin:0;}
  #nav-secondary li {float:left;list-style:none;margin:0 30px 0 0;height:60px;}
  #nav-secondary a {display:block;text-indent:-9999px;height:48px;background:url(../images/nav-secondary-bg.png) left center no-repeat;padding-left:30px;border-left:1px solid #333;}
    #nav-secondary li.home {margin-left:25px;}
      #nav-secondary li.home a {width:125px;padding:0;border:0;}
      
      #nav-secondary li.network a {width:157px;background-position:-131px center;}
    
    #nav-secondary li.current {background:url(../images/nav-secondary-current.png) center bottom no-repeat;}
  
#newsletter {position:absolute;right:20px;top:0;}
  #newsletter a {display:block;line-height:44px;color:#ccc;font-family: "adelle-1","adelle-2";font-size:12px;text-decoration:none;text-transform:uppercase;padding:4px 0 0 20px;background:url(../images/newsletter-bg.png) left center no-repeat;-webkit-transition:color .2s linear;-webkit-transition:color .2s linear;}
    #newsletter a:hover {color:#fff;}
    
  #newsletter form {width:230px;position:absolute;right:0;top:47px;background:#000;-webkit-border-bottom-left-radius:7px;-webkit-border-bottom-right-radius:7px;-moz-border-radius-bottomleft:7px;-moz-border-radius-bottomright:7px;padding:10px;display:none;}
    #newsletter fieldset {margin:0;}
    #newsletter input {border:0;border-bottom:1px dotted #666;background:transparent;font:italic 12px Georgia;color:#fff;width:160px;float:left;}
    #newsletter input[type="submit"] {-webkit-border-radius:20px;-moz-border-radius:20px;background:#333;border:0;width:auto;cursor:pointer;position:relative;float:right;}
      #newsletter input[type="submit"]:hover {-webkit-box-shadow:1px 1px 1px rgba(255,255,255,.3);left:-1px;top:-1px;}
      
    .e2ma_signup_message, #e2ma_signup_reset_button, .e2ma_signup_form_label, .e2ma_signup_form_required_footnote {display:none;}

#nav-primary {margin:0;height:60px;position:absolute;left:240px;top:125px;font-family: "league-gothic-1","league-gothic-2";text-transform:uppercase;font-size:32px;margin:0;}
  #nav-primary li {float:left;list-style:none;margin:0 25px 0 0;padding-right:25px;border-right:1px solid #003e92;height:60px;line-height:60px;}
    #nav-primary li:last-child {border:0;margin:0;padding:0;}
  #nav-primary a {color:rgba(0,34,82,1);text-decoration:none;text-shadow:1px 1px 0 rgba(255,255,255,.2);-webkit-transition:color .3s linear;-moz-transition:color .3s linear;}
    #nav-primary a:hover {color:rgba(0,0,0,1);}
    #nav-primary a.current {color:rgba(255,255,255,1);text-decoration:none;text-shadow:1px 1px 0 rgba(0,0,0,.5);}

/*Section - Generic*/
section footer {border-top:1px solid #003e92;border-bottom:1px solid #003e92;height:48px;margin-top:120px;position:relative;clear:both;background:transparent;}

body.follow section footer {border:none;height:auto;margin-top:0;position:absolute;left:90px;top:1110px;}
body.follow section footer a {display:block;background:url(../images/follow-backhome.png) no-repeat;text-indent:-9999px;width:108px;height:70px;}
  
  section footer a:hover {color:rgba(255,255,255,1);}
  
  section footer li > span {position:absolute;top:-32px;font-size:10px;font-family: "adelle-1","adelle-2";color:#002861;text-transform:uppercase;}
    section footer li.next > span {right:0;}
  section footer ul {text-align:center;}
  section footer li {list-style:none;margin:0;line-height:48px;display:inline;}
  section footer li.prev {position:absolute;left:0;top:0;}
  section footer li.next {position:absolute;right:0;top:0;}
    section footer li a {color:rgba(0,0,0,.3);font-size:12px;text-decoration:none;-webkit-transition:color .2s linear;}
    section footer li.prev a, section footer li.next a {font-family: "league-gothic-1","league-gothic-2";font-size:32px;text-transform:uppercase;color:rgba(255,255,255,.5);text-decoration:none;position:relative;display:block;}
    section footer li.next a {right:-20px;}
    section footer li.prev a {left:-20px;}
      section footer li a span {color:#002861;}
      section footer li.next a:hover, section footer li.prev a:hover {color:rgba(255,255,255,1);}

/*Section - Top*/
section#top {padding-top:288px;height:816px;position:relative;}

section#top div#intro h2 {font-size:100px;font-family: "league-gothic-1","league-gothic-2";text-transform:uppercase;width:560px;line-height:96px;text-shadow:1px 1px 0 rgba(0,0,0,.5);background:url(../images/h2-tagline.png) no-repeat;width:536px;height:168px;text-indent:-9999px;}
  section#top div#intro h2 + p {width:540px;font-size:18px; position:relative}
  section#top div#intro img{position:absolute; left: 990px; top: 210px;}
  
section#top div#featured-brands {margin-top:48px;border-top:1px solid rgba(0,0,0,.2);padding-top:12px;overflow:hidden;height:228px;}
  section#top div#featured-brands h3 {width:220px;float:left;margin-right:20px;}
  section#top div#featured-brands ul {float:left;position:relative;}  
    section#top div#featured-brands li {float:left;width:210px;height:150px;margin:0 20px 0 0;list-style:none;border:5px solid #00347f;}
      section#top div#featured-brands li:last-child {margin:0;}
    section#top div#featured-brands li a {display:block;width:210px;height:150px;overflow:hidden;}
    section#top div#featured-brands li p {width:680px;height:30px;position:absolute;left:0;bottom:-84px;padding:10px;background:url(../images/brand-preview-bg.png) no-repeat;font-family: "adelle-1","adelle-2";font-size:12px;text-transform:uppercase;text-shadow:1px 1px 0 rgba(0,0,0,.5);line-height:44px;display:none;}
      section#top div#featured-brands li:nth-child(2) p {background-position:0 -51px;}
      section#top div#featured-brands li:nth-child(3) p {background-position:0 -102px;}

/*Section - About*/
section#about {padding-top:257px;}
section#about h2 {background:url(../images/headers-main.png) no-repeat;height:110px;text-indent:-9999px;margin-bottom:29px;}
section#about h3 {font-family: "adelle-1","adelle-2";font-size:16px;text-transform:uppercase;color:#002861;position:relative;top:12px;}

section#about .bounty,
section#about .american {float:left;width:280px;margin-right:20px;padding-right:20px;}
  section#about .american {width:340px;padding-right:280px;}
  
section#about blockquote {clear:both;position:relative;font-family: "adelle-1","adelle-2";font-size:22px;line-height:32px;padding-left:240px;padding-right:260px;height:200px;}
  section#about blockquote img {position:absolute;left:-12px;top:-12px;}
  section#about blockquote cite {display:block;font-family:"Georgia";color:#002a67;font-size:16px;}
  section#about blockquote a {background:rgba(0,0,0,.5);color:#fff;padding:4px 6px;-webkit-transition:background .2s linear;-webkit-border-radius:5px;-moz-border-radius:5px;}
    section#about blockquote a:hover {background:rgba(0,0,0,0);text-decoration:none;color:#000;}
    
    
    
/*Section - Brands*/
section#brands {padding-top: 210px;}
section#brands > ul li {list-style:none;margin:0;height:358px;border-bottom:1px solid #003e92;padding-top:48px;padding-right:450px;overflow:hidden;}
  section#brands > ul li#fcb {background:url(../images/brands-fcb-bg.png) right center no-repeat;}
  section#brands > ul li#fred {background:url(../images/brands-fred-bg.png) right center no-repeat;}
  section#brands > ul li#caldera {background:url(../images/brands-caldera-bg.png) right center no-repeat;}
  section#brands > ul li#butternuts {background:url(../images/brands-butternuts-bg.png) right center no-repeat;}
  section#brands > ul li#stoudts {background:url(../images/brands-stoudts-bg.png) right center no-repeat;}
  
section#brands h3 {font-family: "league-gothic-1","league-gothic-2";font-size:52px;text-transform:uppercase;line-height:48px;float:left;}
  section#brands li#fred h3 {text-indent:-9999px;width:82px;height:40px;background:url(../images/brand-headline-fred.png) no-repeat;}
section#brands h3 + a {float:left;background:url(../images/brands-visit-bg.png) center center no-repeat;font-size:10px;color:#fff;font-style:italic;height:41px;line-height:41px;width:129px;text-align:center;padding-right:10px;margin-left:10px;text-decoration:none;-webkit-transform:rotate(-2deg);-moz-transform:rotate(-2deg);-webkit-transition:-webkit-transform .2s linear;}
  section#brands h3 + a:hover {color:#ccc;-webkit-transform:rotate(0);-moz-transform:rotate(0);}

section#brands li > p {clear:both;padding-right:20px;}

section#brands dl {float:left;width:220px;margin-right:20px;}
  section#brands dl + dl {margin:0;}
  
  section#brands dl dt {font-family: "adelle-1","adelle-2";text-transform:uppercase;font-size:12px;color:#002861;}
  section#brands dl dd {font-size:12px;line-height:18px;}
  
/*Section - Contact*/
section#contact {position:relative;padding-top:160px;}
section#contact form {float:left;width:390px;margin-top:20px;margin-bottom:20px;margin-left:150px;background:rgba(255,255,255,.1) url(../images/contact-form-bg.png) 280px 30px no-repeat;padding:10px;-webkit-transform:rotate(-3deg);-webkit-transition:-webkit-transform .2s linear;-moz-transform:rotate(-3deg);-moz-transition:-moz-transform .2s linear;}
section#contact form:hover {-webkit-transform:rotate(0);-moz-transform:rotate(0);}
  section#contact fieldset {background:rgba(0,0,0,.15);margin:0;padding:100px 20px 20px;}
  
  section#contact .row {position:relative;margin-bottom:24px;}
  
  section#contact label, header[role="branding"] label {position:absolute;left:2px;top:7px;font-size:20px;color:#ccc;font-style:italic;cursor:pointer;}
    section#contact .message label {top:2px;}
    section#contact label.error {position:absolute;top:-28px;background:rgba(0,0,0,.6);padding:4px 7px;font-size:11px;-webkit-border-radius:7px;z-index:-5;}
  
  section#contact input[type="text"] {width:340px;background:transparent;border:none;border-bottom:1px solid rgba(0,0,0,.2);font-family:Georgia;font-size:20px;color:#fff;height:29px;line-height:30px;}
  section#contact textarea {width:340px;min-height:96px;border:none;background:transparent url(../images/contact-message-bg.png);font-family:Georgia;font-size:20px;color:#fff;line-height:30px;padding:0;}
  
  section#contact input[type="image"] {position:relative;float:right;}
    section#contact input[type="image"]:hover {top:-2px;left:-2px;}
    section#contact input[type="image"]:active {top:-1px;left:-1px;}
  
section#contact .callout {width:340px;float:right;margin-top:50px;position:relative;}
  section#contact .callout h4 {width:262px;height:216px;background:url(../images/contact-callout-header.png) no-repeat;text-indent:-9999px;}
  section#contact .callout a {position:relative;display:block;height:370px;}
  section#contact .callout a img[alt="Banner"] {position:absolute;left:0;bottom:0;}
  section#contact .callout a img[alt="Truck"] {position:absolute;left:0;bottom:-30px;-webkit-transition:left 1.5s ease-in-out;}
    section#contact .callout a:hover img[alt="Truck"] {-webkit-animation-name: drive;-webkit-animation-duration: 1.5s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: ease-in-out;left:200px;}
    
/*Page - Follow*/
body.follow header[role="branding"] h2 {position:absolute;left:205px;top:135px;font-family: "league-gothic-1","league-gothic-2";font-size:60px;color:#fff;text-transform:uppercase;text-shadow:1px 1px 0 rgba(0,0,0,.5);}

section#follow #twitter {position:relative;padding-top:230px;height:578px;width:800px;}
  section#follow #twitter li {width:240px;background:#fff;-webkit-border-radius:12px;-webkit-box-shadow:0 0 5px rgba(0,0,0,.3);-moz-box-shadow:0 0 5px rgba(0,0,0,.3);-moz-border-radius:12px;color:#000;list-style:none;margin:0;float:right;clear:both;position:relative;margin-bottom:-20px;-webkit-transition:-webkit-transform .2s ease-out;opacity:0;padding:20px;font-size:11px;line-height:16px;}
  section#follow #twitter li:nth-child(1) {left:-130px;}
  section#follow #twitter li:nth-child(3) {left:-40px;}
  section#follow #twitter li:hover {-webkit-transform: scale(1.1);-moz-transform:scale(1.1);opacity:1 !important;-webkit-backface-visibility: hidden;}
    section#follow #twitter li p {padding:20px;font-size:11px;line-height:16px;margin:0;}
  section#follow #twitter a.button {float:none;position:absolute;left:auto;right:-40px;top:540px;}
  section#follow #twitter li a {color:#000;text-decoration:none;display:block;width:100%;height:100%;}
  section#follow #twitter li a span {color:#999;display:block;font-size:10px;text-transform:uppercase;}
  
  section#follow #twitter #mtaTwitter > a {display:none;}
  
section#follow a.button {display:block;width:243px;height:75px;background:url(../images/follow-button-bg.png) no-repeat;text-align:center;float:right;font-family:Georgia;color:#fff;line-height:75px;text-decoration:none;padding-right:20px;font-style:italic;-webkit-transform:rotate(-2deg);-webkit-transition:-webkit-transform .2s linear;-moz-transform:rotate(-2deg);-moz-transition:-moz-transform .2s linear;}
  section#follow a.button:hover {-webkit-transform:rotate(0);-moz-transform:rotate(0);}

section#follow #facebook {clear:both;width:700px;margin-left:240px;position:relative;}
  section#follow #facebook h3, section#follow #facebook p {width:430px;}
    section#follow #facebook p {width:400px;}
  section#follow #facebook h3 {font-family: "adelle-1","adelle-2";font-size:24px;text-transform:uppercase;}
  section#follow #facebook .button {position:absolute;right:0;top:50%;margin-top:-37.5px;}
  
/*Footer*/
body>footer {font-size:12px;clear:both;overflow:hidden;}
  footer section {border-top:1px solid #003e92;padding:10px 0;}
footer a {color:#000;}
footer p {float:left;}
  footer p + p {float:right;}


/*------------------------------------------
ROAD /////////////////////////////////////
------------------------------------------*/

#road-1 {background:url(../images/road-1.png) 0 -25px no-repeat;}
#road-2 {background:url(../images/road-2.png) 0 0 no-repeat;height:5560px;margin-top:236px;position:relative;}
#road-3 {height:1257px;background:url(../images/road-3.png) 724px 0 no-repeat;}
#road-4 {height:3400px;background:url(../images/road-4.png) no-repeat;position:relative;}
#road-5 {background:url(../images/road-5.png) 687px 0 no-repeat;}
#road-6 {background:url(../images/road-6.png) -103px -406px no-repeat;height:1335px;}
#road-7 {margin-bottom:60px;background:url(../images/road-6.png) -103px -1741px no-repeat;height:860px;}
body.follow #road-1 {height:1200px;background:url(../images/follow-road.png) 80px -15px no-repeat;}


/*------------------------------------------
MISC /////////////////////////////////////
------------------------------------------*/

/*Quick Jump Hovers*/
.quick-jump {position:absolute;top:600px;left:200px;width:200px;padding:30px;opacity:0;text-align:center;background:#000;-webkit-border-radius:12px;-moz-border-radius:12px;}
  .quick-jump span {background:url(../images/quick-jump-caret.png) right center no-repeat;display:block;width:12px;height:24px;position:absolute;right:-12px;top:24px;}
  .quick-jump p {margin-bottom:10px;}
  .quick-jump ul, .quick-jump li {list-style:none;margin:0;}
    .quick-jump li {float:left;margin-right:20px;}
    .quick-jump li + li {float:right;margin:0;}
  .quick-jump a {color:#fff;-webkit-transition:color .2s linear;}
    .quick-jump a:hover {color:#ccc;}
    
  #road-4 .quick-jump {top:500px;}

/*Hover Tooltip*/
.qtip {z-index:90000 !important;font-size:11px;font-style:italic;line-height:16px;color:#333;opacity:.8;}

/*Yes No*/
#yes-no {padding-top:60px;width:380px;margin:0 auto;font-size:20px;line-height:1.5;}
  #yes-no a {color:#fff;text-decoration:none;display:block;width:100%;height:100%;-webkit-transition:color .2s linear;}
    #yes-no a:hover {color:#000;}
  #yes-no li {list-style:none;margin:0;width:160px;text-align:center;float:right;}
    #yes-no li:first-child {float:left;}
#yes-no li span {font-size:72px;font-family: "league-gothic-1","league-gothic-2";display:block;text-transform:uppercase;line-height:1;}

/*Thanks*/
body.thanks p {padding-top:60px;text-align:center;font-size:24px;width:300px;margin:0 auto;line-height:1.3;}
body.thanks a {text-align:center;color:#000;font-size:12px;display:block;margin-top:40px;-webkit-transition:color .2s linear;}
  body.thanks a:hover {color:#fff;}
  
/*Safari & Snow Leopard Fixed Positioning Bug*/
body.home.browserSafari header[role="branding"] {position:absolute;}