/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-family: 'museo-sans', arial, sans-serif;
    background: lightgray;
    font-size: 1em;
    line-height: 1.4;
    text-align: center;
    min-width:800px;
}

section {
    height: 800px;
    position: relative;
    overflow: hidden;
}

section img { position: absolute; }

.main-container {
    height: 100%;
    background: white;
    width: 1500px;
    margin: 0 auto;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.container {
    width: 960px;
    margin: 0 auto;
}

.fact {
    display:block;
    background: url("../img/fact.gif") no-repeat;
    width: 48px;
    position: absolute;
    text-decoration: none;
    text-align: left;
    height: 48px;
}

.fact:hover div { display: block; }

.fact.left {padding-left: 60px; background-position: top left; margin-right: 252px;}

.fact.left div:after {
   content: "";
   position: absolute;
   left: -10px;
   top: 14px;
   border-right: 10px solid whitesmoke;
   border-bottom: 10px solid transparent;
   border-top: 10px solid transparent; 
}

.fact.right { padding-right: 60px; background-position: top right; margin-left: 252px;}
.fact.right div { position: relative; right: 272px; }

.fact.right div:after {
   content: "";
   position: absolute;
   right: -10px;
   top: 14px;
   border-left: 10px solid whitesmoke;
   border-bottom: 10px solid transparent;
   border-top: 10px solid transparent; 
}


.fact div {
    display: none;
    background: whitesmoke;
    padding: 10px;
    margin-top: 0;
    color: #444;
    width: 300px;
    position: relative;
    z-index: 110;
}

.fact div p {
    padding: 10px;
    border: 1px solid lightgray;
    margin:0;
}


::-moz-selection {
    background: #135013;
    color: whitesmoke;
    text-shadow: none;
}

::selection {
    background: #135013;
    color: whitesmoke;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

ul {
    margin-top: 0;
    padding-left: 0;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

h2 {
    font-family: "futura-pt", futura, sans-serif;
    font-size: 24px;
    width: 100%;
    position: absolute;
    top: 70px;
    text-transform: uppercase;
    font-weight: normal;
}

h2 span {
    border-top: 4px solid black;
    border-bottom: 1px solid black;
    padding: 10px 0;
}



/* ==========================================================================
   DBS Link
   ========================================================================== */

.dbs {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 9999;
}

.dbs a {
    float: right;
    color: white;
    font-size: 12px;
    text-decoration: none;
    margin-right: 10px;
}
.dbs .dbs-logo {
    background: url("../img/dbs.png");
    text-indent: -9999px;
    display: block;
    width: 98px;
    height: 19px;
}


/* ==========================================================================
   Sharing
   ========================================================================== */

#sharable {
  position:fixed;
  bottom:0;
  left:20px;
  background: olive;
  color:#fff;
  padding:0;
  width:450px;
  z-index: 9999;
}
#sharable:hover #share-hide {
    display: block;
    -webkit-transition: all .3s ;
    -moz-transition: all .3s ;
    -ms-transition: all .3s ;
    -o-transition: all .3s ;
    transition: all .3s ;
}
#share-hide {display:none; padding:0 0 10px 10px;}
#sharable h2 {
    -moz-border-radius: 7px 7px 0 0;
    border-radius: 7px 7px 0 0;
    background: none repeat scroll 0 0 olive;
    color: #FFFFFF;
    font-family: 'LeagueGothicRegular', sans-serif;
    font-size: 24px;
    left: 0;
    line-height: 32px;
    margin: 0;
    padding: 8px;
    position: absolute;
    top: -41px;
    z-index:999;
    font-weight: 300;
    width: 260px;
}
#sharable p {
  width:90%;
  font-size:.9em;
  text-align: left;
}
textarea  {
    -moz-border-radius: 2px 2px 2px 2px;
    border-radius: 2px 2px 2px 2px;
    background: none repeat scroll 0 0 #5a5a00;
    border: 1px solid #5d6d22;
    color: #F7F7F7;
    display: block;
    font-size: 0.9em;
    height: 100px;
    overflow: hidden;
    padding: 10px;
    width: 90%;
}
.addthis_toolbox {
    position: fixed;
    bottom: 0;
    left: 320px;
    z-index: 9998;
}

/* ==========================================================================
   Header
   ========================================================================== */

header {
    background: url("../img/bg.png");
    position: relative;
}

h1 {
    font-family: 'LeagueGothicRegular', 'Arial Narrow', sans-serif;
    text-shadow: 1px 1px 0 rgba(255,255,255,.5);
    position:absolute;
    font-weight: normal;
    font-size: 78px;
    text-transform: uppercase;
    top: 120px;
    width: 100%;
}

header img { padding: 40px;}



/* ==========================================================================
   The World of Water
   ========================================================================== */

#world { background: url('../img/world-bg.png') repeat; padding: 60px 0; }
#world h2 { color: white; top: 50px; }
#world h3 { top: 86px; }
#world h2 span { border-color: white; }

.planet {
    background: url('../img/world-planet.png') top left no-repeat;
    width: 441px;
    height: 443px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -220px 0 0 -221px;
    z-index: 100;
}

#world img {
    left: 50%;
    margin-left: -390px;
    top: 407px;
    -animation : rocket 10s infinite linear;
    -moz-animation : rocket 10s infinite linear;
    -webkit-animation : rocket 10s infinite linear;
    -o-animation : rocket 10s infinite linear;
}

.fact.one { top: 111px; left: 216px; }
.fact.two { top: 250px; left: -270px; }
.fact.three { top: 310px; left: 340px; }


/* ==========================================================================
   The Clean Water Cure
   ========================================================================== */

#clean { background: url('../img/clean-bg.png') top center no-repeat #81825D; }
#clean h2 { color: white; }
#clean h2 span { border-color: white; }
#clean .dirty {
    background: url('../img/clean-dirty.png') bottom left repeat-x;

    width: 256px;
    height: 336px;
    position: absolute;
    z-index: 100;
    top: 315px;
    left: 50%;
    margin-left: -450px;
}
#clean .clean-water {
    background: url('../img/clean-water.png') bottom left repeat-x;
    width: 263px;
    height: 259px;
    position: absolute;
    z-index: 100;
    top: 315px;
    left: 50%;
    margin-left: -143px;
}
#clean .clean-clock {
    background: url('../img/clean-clock.gif') bottom left repeat-x;
    width: 238px;
    height: 238px;
    position: absolute;
    z-index: 100;
    top: 327px;
    left: 50%;
    margin-left: 193px;
}


/* ==========================================================================
   America's Obsession with Water
   ========================================================================== */

#america { background: #81825D; position: relative; }
#america h2 { color: white; top: 30px; }
#america h2 span { border-color: white; }
#america h3 { top: 73px; }
#america .water {
    background: url('../img/work-it-out-water.png') bottom left repeat-x;
    -animation : waves 1s infinite linear;
    -webkit-animation: waves 1s infinite linear;
    -moz-animation: waves 1s infinite linear;
    -o-animation: waves 1s infinite linear;
    width: 100%;
    height: 383px;
    position: absolute;
    z-index: 100;
    bottom: 0;
}
.america {
    background: url('../img/america.png') top left no-repeat;
    width: 810px;
    height: 511px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -195px 0 0 -405px;
    z-index: 1;
}
.fact.twentythree {
    background-position: left top;
    left: 50%;
    margin-left: -320px;
    margin-right: 252px;
    padding-left: 60px;
    top: 453px;
    z-index: 9999;
}
.fact.twentytwo {
    left: 50%;
    margin-left: 170px;
    padding-left: 60px;
    top: 347px;
    z-index: 9999;
}





/* ==========================================================================
   Here's to Your Health
   ========================================================================== */

#health { background: url('../img/health-bg.png') repeat-x;}
#health h2 { color: white; }
#health span { border-color: white; }
.hills { bottom:0; left:0; }
.sun {
    bottom: 50px;
    left: 0;
    -animation : sun 12s infinite linear;
    -webkit-animation: sun 12s infinite linear;
    -moz-animation: sun 12s infinite linear;
    -o-animation: sun 12s infinite linear;
}
.bird1 { top:340px; right: 50px; }
.bird2 { top:300px; right: 19%; }
.bird3 { left: 8%; top: 180px; }
.fact.four { top: 141px; left: -14px; }
.fact.five { top: 330px; left: 50%; margin-left: -421px; z-index: 9999; }
.fact.six { top: 510px; left: 50%; margin-left: -110px; z-index: 9999; }

.men {
    background: url('../img/health-men.png') no-repeat;
    width: 938px;
    height: 570px;
    display: block;
    position: relative;
    top: 220px;
    margin: 0 auto;
}

/* ==========================================================================
   Wellness and Water: Work it Out
   ========================================================================== */

#work-it-out { background: #D8D8C0; }
.fact.seven { left: 50%; margin-left: 160px; top: 320px; z-index: 101; }
.fact.eight { top: 285px; left: 50%; margin-left: -170px; z-index: 101; }
.fact.nine { top: 480px; left: 50%; margin-left: 50px; z-index: 101; }

.water {
    background: url('../img/work-it-out-water.png') bottom left repeat-x;
    -animation : waves 1s infinite linear;
    -webkit-animation: waves 1s infinite linear;
    -moz-animation: waves 1s infinite linear;
    -o-animation: waves 1s infinite linear;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 100;
}
.pool {
    top: 320px;
    left: 20px;
}
.swim {
    background: url('../img/work-it-out-swim.png') no-repeat;
    width: 486px;
    height: 272px;
    top: 340px;
    left: 50%;
    margin-left: -440px;
    position: absolute;
}
.aerobics {
    background: url('../img/work-it-out-aerobics.png') no-repeat;
    width: 295px;
    height: 376px;
    top: 230px;
    left: 50%;
    margin-left: 44px;
    position: absolute;
}


/* ==========================================================================
   Like Water for Chocolate
   ========================================================================== */

#chocolate { background: url('../img/chocolate-bg.png') no-repeat #81825D; }
#chocolate h2 { top: 40px; }
#chocolate h3 { color: #222222; top: 82px; }
.cloud1 {
    top: 70px;
    right: 60px;
    -animation : cloud 30s infinite linear;
    -webkit-animation: cloud 30s infinite linear;
    -moz-animation: cloud 30s infinite linear;
    -o-animation: cloud 30s infinite linear;
}
.cloud2 {
    top: 20px;
    left: 100px;
    -animation : cloud2 60s infinite linear;
    -webkit-animation: cloud2 60s infinite linear;
    -moz-animation: cloud2 60s infinite linear;
    -o-animation: cloud2 60s infinite linear;
}
.cloud3 {
    top: 20px;
    right: 270px;
    -animation : cloud3 90s infinite linear;
    -webkit-animation: cloud3 90s infinite linear;
    -moz-animation: cloud3 90s infinite linear;
    -o-animation: cloud3 90s infinite linear;
}
.fact.ten { top: 350px; left: 50%; margin-left: -290px; z-index: 101; }
.fact.eleven { top: 610px; left: 50%; margin-left: -255px; z-index: 101; }
.fact.twelve { top: 570px; left: 50%; margin-left: -60px; z-index: 101; }
.fact.thirteen { top: 640px; left: 50%; margin-left: 75px; z-index: 101; }
.fact.fourteen { top: 460px; left: 50%; margin-left: 85px; z-index: 101; }

.pork {
    background: url('../img/chocolate-pork.png') no-repeat;
    width: 314px;
    height: 153px;
    left: 50%;
    margin-left: -420px;
    position: absolute;
    top: 370px;
}

.beef {
    background: url('../img/chocolate-beef.png') no-repeat;
    width: 433px;
    height: 242px;
    left: 50%;
    margin-left: 80px;
    position: absolute;
    top: 370px;
}

.egg {
    background: url('../img/chocolate-egg.png') no-repeat;
    width: 49px;
    height: 35px;
    left: 50%;
    margin-left: -250px;
    position: absolute;
    top: 640px;
}

.chicken {
    background: url('../img/chocolate-chicken.png') no-repeat;
    width: 129px;
    height: 127px;
    left: 50%;
    margin-left: -150px;
    position: absolute;
    top: 531px;
}

.bar {
    background: url('../img/chocolate-bar.png') no-repeat;
    width: 79px;
    height: 56px;
    left: 50%;
    margin-left: 100px;
    position: absolute;
    top: 660px;
}

/* ==========================================================================
   Time is Money (and Water)
   ========================================================================== */

#money { background: url('../img/money-bg.png') repeat-x; }
#money h3, #oil h3 { color: #222222; }
#money .fact div { background: #444; }
#money .fact div p { color: whitesmoke; }
#money .fact.left div:after { border-right: 10px solid #444; }
#money .fact.right div:after { border-left: 10px solid #444; }
.fact.fifteen { top: 330px; left: 50%; margin-left: -355px; z-index: 101; }
.fact.sixteen { top: 390px; left: 50%; margin-left: -140px; z-index: 101; }
.fact.seventeen { top: 450px; left: 50%; margin-left: 40px; z-index: 101; }
.fact.eighteen { top: 510px; left: 50%; margin-left: 310px; z-index: 101; }

.tub {
    background: url('../img/money-tub.png') no-repeat;
    width: 324px;
    height: 374px;
    left: 50%;
    margin-left: -455px;
    position: absolute;
    top: 350px;
}

.tub img {
    position: absolute;
    top: 36px;
    left: 91px;
}

.clock {
    background: url('../img/money-clock.png') no-repeat;
    width: 84px;
    height: 83px;
    left: 50%;
    margin-left: -185px;
    position: absolute;
    top: 330px;
}

.toilet {
    background: url('../img/money-toilet.png') no-repeat;
    width: 163px;
    height: 430px;
    left: 50%;
    margin-left:-30px;
    position: absolute;
    top: 299px;
}

.sink {
    background: url('../img/money-sink.png') no-repeat;
    width: 149px;
    height: 394px;
    left: 50%;
    margin-left: 250px;
    position: absolute;
    top: 338px;
}


/* ==========================================================================
   The Oil and Water Solution
   ========================================================================== */

#oil {
    background: url('../img/oil-bg.png') bottom center no-repeat #E6E8CE;
    padding-top: 40px;
}

#oil h2 { top: 50px; }
#oil h3 { top: 86px; }

.plane {
    background: url('../img/oil-plane.png') no-repeat;
    width: 85px;
    height: 45px;
    left: 200px;
    position: absolute;
    top: 60px;
    -animation : plane 15s infinite linear;
    -webkit-animation: plane 15s infinite linear;
    -moz-animation: plane 15s infinite linear;
    -o-animation: plane 15s infinite linear;
}

.car {
    background: url('../img/oil-car.png') no-repeat;
    width: 699px;
    height: 230px;
    left: 50%;
    margin-left: -390px;
    position: absolute;
    top: 278px;
}

.oil {
    left: 397px;
    top: 144px;
}

.sewer {
    left: 617px;
    top: 200px;
}

.waves {
    left: 50%;
    margin-left: -145px;
    top: 743px;
}

.boat {
    background: url('../img/oil-boat.png') no-repeat;
    width: 672px;
    height: 328px;
    left:50%;
    margin-left: -200px;
    position: absolute;
    bottom: 15px;
    -animation : boat 2s infinite linear;
    -webkit-animation: boat 2s infinite linear;
    -moz-animation: boat 2s infinite linear;
    -o-animation: boat 2s infinite linear;
}

.fact.nineteen { top: 290px; left: 50%; margin-left: -250px; z-index: 101; }
.fact.twenty { top: 180px; left: 50%; margin-left: 100px; z-index: 101; }

/* ==========================================================================
   Footer
   ========================================================================== */

#footer {
    background: url('../img/footer-bg.png') repeat;
    height: 650px;
    position: relative;
}

#footer h2 { color: white; }
#footer span { border-color: white; }

#footer .container {
    position: relative;
    top: 240px;
}

.sources, .evg { float:left; }
.sources { width: 65%; }

.evg {
    background: #111;
    width: 35%;
}

.evg img {
    width: 75%;
    padding: 10px 0 30px 0;
}

.evg h3 {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 15px;
}

.sources ul li {
    list-style-type: none;
    text-align: left;
    font-size: 13px;
    padding-bottom: 10px;
}

.sources ul li a {
    color: white;
    text-decoration: none;
}

.sources ul li a:hover {
    color: gray;
    text-decoration: none;
}

h3 {
    color: white;
    font-family: "futura-pt", futura, sans-serif;
    font-size: 18px;
    width: 100%;
    font-weight: normal;
    padding-top: 20px;
    position: absolute;
    top: 116px;
    left: 25%;
    width: 50%;
}

h3 span {
    border-top: 4px solid white;
    border-bottom: 1px solid white;
    padding: 10px 40px;
}



/* ==========================================================================
   @font-face
   ========================================================================== */

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('../fonts/League_Gothic-webfont.eot');
    src: url('../fonts/League_Gothic-webfont-.eot#iefix') format('embedded-opentype'),
         url('../fonts/League_Gothic-webfont.woff') format('woff'),
         url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
         url('../fonts/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 1500px) {
    .main-container, section { max-width: 100%; overflow: hidden; }
}

@media only screen and (max-width: 960px) {
    .container { max-width: 100%; }
}


/* ==========================================================================
   Animation Definitions
   ========================================================================== */

@keyframes waves {
    from { background-position: 0 0; }
    to   { background-position: -75px 0; }
}
@-moz-keyframes waves {
    from { background-position: 0 0; }
    to   { background-position: -75px 0; }
}
@-webkit-keyframes waves {
    from { background-position: 0 0; }
    to   { background-position: -75px 0; }
}
@-0-keyframes waves {
    from { background-position: 0 0; }
    to   { background-position: -75px 0; }
}

@keyframes cloud {
    from { right: -300px; }
    to   { right: 120%; }
}
@-moz-keyframes cloud {
    from { right: -300px; }
    to   { right: 120%; }
}
@-webkit-keyframes cloud {
    from { right: -300px; }
    to   { right: 120%; }
}
@-o-keyframes cloud {
    from { right: -300px; }
    to   { right: 120%; }
}

@keyframes cloud2 {
    from { left: -100px; }
    to   { left: 120%; }
}
@-moz-keyframes cloud2 {
    from { left: -100px; }
    to   { left: 120%; }
}
@-webkit-keyframes cloud2 {
    from { left: -100px; }
    to   { left: 120%; }
}
@-o-keyframes cloud2 {
    from { left: -100px; }
    to   { left: 120%; }
}

@keyframes cloud3 {
    0% { right: 300px; }
    49%  { right: 1200px; }
    49.01%  { right: -600px; }
    100%   { right: 300px; }
}
@-moz-keyframes cloud3 {
    0% { right: 300px; }
    49%  { right: 1500px; }
    49.01%  { right: -900px; }
    100%   { right: 300px; }
}
@-webkit-keyframes cloud3 {
    0% { right: 300px; }
    49%  { right: 1200px; }
    49.01%  { right: -600px; }
    100%   { right: 300px; }
}
@-o-keyframes cloud3 {
    0% { top: 300px; }
    30%  { right: 1200px; }
    49.01%  { right: -600px; }
    100%   { right: 300px; }
}

@keyframes boat {
    0% { background-position: 0 0; }
    50%  { background-position: 0 -10px; }
    75%  { background-position: 0 5; }
    90%  { background-position: 0 -2px; }
    100%   { background-position: 0 0; }
}
@-moz-keyframes boat {
    0% { background-position: 0 0; }
    50%  { background-position: 0 -10px; }
    75%  { background-position: 0 5; }
    90%  { background-position: 0 -2px; }
    100%   { background-position: 0 0; }
}
@-webkit-keyframes boat {
    0% { background-position: 0 0; }
    50%  { background-position: 0 -10px; }
    75%  { background-position: 0 5; }
    90%  { background-position: 0 -2px; }
    100%   { background-position: 0 0; }
}
@-o-keyframes boat {
    0% { background-position: 0 0; }
    50%  { background-position: 0 -10px; }
    75%  { background-position: 0 5; }
    90%  { background-position: 0 -2px; }
    100%   { background-position: 0 0; }
}

@keyframes rocket {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}
@-moz-keyframes rocket {
    from { -moz-transform: rotate(0deg); }
    to   { -moz-transform: rotate(-360deg); }
}
@-webkit-keyframes rocket {
    from { -webkit-transform: rotate(0deg); }
    to   { -webkit-transform: rotate(-360deg); }
}
@-o-keyframes rocket {
    from { -o-transform: rotate(0deg); }
    to   { -o-transform: rotate(-360deg); }
}

@keyframes plane {
    from { left: -120px; top:200px }
    40%  { left: 520px; top: -100px; }
    50%  { left: 930px; top: -100px; }
    to   { left: 1510px; top: 140px; transform: rotate(20deg); }
}
@-moz-keyframes plane {
    from { left: -120px; top:200px }
    40%  { left: 520px; top: -100px; }
    50%  { left: 930px; top: -100px; }
    to   { left: 1510px; top: 140px; -moz-transform: rotate(20deg); }
}
@-webkit-keyframes plane {
    from { left: -120px; top:200px }
    40%  { left: 520px; top: -100px; }
    50%  { left: 930px; top: -100px; }
    to   { left: 1510px; top: 140px; -webkit-transform: rotate(20deg); }
}
@-o-keyframes plane {
    from { left: -120px; top:200px }
    40%  { left: 520px; top: -100px; }
    50%  { left: 930px; top: -100px; }
    to   { left: 1510px; top: 140px; -o-transform: rotate(20deg); }
}

@keyframes sun {
    from { bottom: -80px; transform: rotate(0deg); }
    50%  { bottom: -40px; }
    to   { bottom: -80px; transform: rotate(360deg); }
}



/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}