/* Title: Water Fight CSS Author: Sapient Date Modified: 2010 Version: 1.0 */ /* CSS RESET */ body { overflow-x:hidden; font-family:Georgia, serif; font-size:62.5%; color:#000 } * { margin:0; padding:0 } h1, h2, h3, h4, h5, h6, p, a, table { font-size:1em; line-height:1 } table, img, fieldset, button { border:none } table { border-collapse:collapse } ul, ol, li { list-style:none } caption, th { text-align:left } address, caption, cite, code, dfn, var { font-style:normal; font-weight:normal } input, select, textarea, button { font-family:Georgia, serif; font-size:1.1em; color:#666666 } input[type=radio], input[type=checkbox] { width:15px; height:15px } hr, legend { display:none } input, button { white-space:nowrap; background-color:transparent; border:none } a { color:#2699C7; text-decoration:none } a:hover { text-decoration:underline } /* GENERIC STYLES */ .clear:after { content:"."; display:block; clear:both; height:0; visibility:hidden } .hidden { display:none } .invisible { visibility:hidden } .floatLeft { float:left } .floatRight { float:right } /* TYPOGRAPHY */ @font-face { font-family: Miso; src: url(../fonts/miso.ttf) format('truetype'), url(../fonts/miso.svg#webfont) format('svg'); font-weight:normal; font-style:normal } @font-face { font-family: MisoRegular; src: url('miso-webfont.eot'); src: local('?'), url('../fonts/miso-webfont.woff') format('woff'), url('../fonts/miso-webfont.ttf') format('truetype'), url('../fonts/miso-webfont.svg#webfontrkZRJFhP') format('svg'); font-weight: normal; font-style: normal; } /* STRUCTURE */ #WaterFightContainerOuter { background:#F8F0E1 url(../images/background-page.jpg) repeat 50% 0 } #WaterFightContainerMiddle { background:transparent url(../images/background-page-top.jpg) no-repeat 50% 0 } #WaterFightContainerInner { background:transparent url(../images/background-page-bottom.jpg) no-repeat 50% 100% } #WaterFightContainer { width:1000px; height:4192px; margin:0 auto } body.dynamic #WaterFightContainer { height:4192px } /* MODULES */ /* Header */ .waterFightHeader { margin-bottom:5px; padding-left:60px } .waterFightHeader h1 { float:left; padding:12px 0 0 10px; font-weight:normal } .waterFightHeader h1 span { display:block; font-family:Miso, MisoRegular, Arial, sans-serif; font-size:1.8em; color:#999; letter-spacing:0.9px; text-transform:uppercase } .waterFightHeader h1 strong { display:block; margin-bottom:3px; font-size:2.1em; font-weight:normal } .waterFightNavigation { float:right; width:571px; padding:0 5px 0 15px; background:transparent url(../images/background-navigation.png) no-repeat 0 0 } .waterFightNavigation li { float:left; font-family:Miso, MisoRegular, Arial, sans-serif; font-size:1.8em; letter-spacing:0.9px; text-transform:uppercase } .waterFightNavigation li a { display:block; padding:15px 0 40px; color:#333; text-align:center } .waterFightNavigation li a:focus { outline:none } .waterFightNavigation li a.soak { width:135px } .waterFightNavigation li a.how { width:166px } .waterFightNavigation li a.ways { width:194px } .waterFightNavigation li a.about { width:76px } .waterFightNavigation li.selected a, .waterFightNavigation li a:focus { color:#fff } .waterFightNavigation li.selected a:hover { text-decoration:none } .waterFightNavigation li.selected a.soak, .waterFightNavigation li a.soak:focus { background:transparent url(../images/background-navigation-soak.png) no-repeat 0 3px } .waterFightNavigation li.selected a.how, .waterFightNavigation li a.how:focus { background:transparent url(../images/background-navigation-how.png) no-repeat 0 3px } .waterFightNavigation li.selected a.ways, .waterFightNavigation li a.ways:focus { background:transparent url(../images/background-navigation-ways.png) no-repeat 0 3px } .waterFightNavigation li.selected a.about, .waterFightNavigation li a.about:focus { background:transparent url(../images/background-navigation-about.png) no-repeat 0 3px } /* Navigation */ #WaterFightNavigation { position:fixed; top:0; left:50%; z-index:899; margin-left:-150px } /* Navigation Modules */ .module { position:absolute; top:0; left:50%; width:1000px; margin-left:-500px } /* Soak Module */ #WaterFightSoak { top:0; z-index:890; padding-bottom:248px; background:transparent url(../images/background-water-stain-1.jpg) no-repeat 140px 100% } #WaterFightSoak .waterFight-decoration-flag-left { position:absolute; top:0; left:50%; z-index:1; width:361px; height:314px; margin-left:-770px; background-image: url(../images/image-flag-left.png); background-repeat: no-repeat } #WaterFightSoak .waterFight-decoration-flag-right { position:absolute; top:0; left:50%; z-index:891; width:613px; height:370px; margin-left:240px; background:transparent url(../images/image-flag-right.png) no-repeat 0 0 } /* Flash Container */ #WaterFightFlashContainer { position:relative; z-index:890; width:832px; height:601px; margin:40px auto 0; background:transparent url(../images/background-flash.jpg) no-repeat 0 0 } #WaterFightFlashContainer .overlay { position:absolute } #WaterFightFlashContainer .top { top:0; left:0; width:832px; height:54px; background:transparent url(../images/overlay-flash-top.png) no-repeat 0 0 } #WaterFightFlashContainer .left { top:54px; left:0; width:50px; height:374px; background:transparent url(../images/overlay-flash-left.png) no-repeat 0 0 } #WaterFightFlashContainer .right { top:54px; right:0; width:55px; height:374px; background:transparent url(../images/overlay-flash-right.png) no-repeat 0 0 } #WaterFightFlashContainer .bottom { bottom:120px; left:0; width:832px; height:53px; background:transparent url(../images/overlay-flash-bottom.png) no-repeat 0 0 } #WaterFightFlashContainer .underneath { bottom:0; left:0; width:832px; height:120px; background:transparent url(../images/overlay-flash-underneath.jpg) no-repeat 0 0 } #WaterFightFlash { display:block } /* Footer */ #Footer { top:3714px; z-index:400; height:478px } body.dynamic #Footer { display:none } #Footer .footerSections { padding-top:110px } #Footer .section { float:left; width:220px; margin-right:25px } #Footer .sectionLearn { width:180px } #Footer .sectionWaterCalculator { width:270px } #Footer .section h3 { margin-bottom:15px; font-size:2.3em; font-weight:normal } #Footer .section ul.linksList { font-family:Arial, sans-serif; font-size:1.3em; font-weight:bold; line-height:1.5 } #Footer .section ul.socialList li { float:left; margin-right:10px } #Footer .section p { font-family:Arial, sans-serif; font-size:1.3em; color:#666; margin-bottom:10px } #Footer .section a.newsletterButton { display:block; width:123px; padding:7px 0 8px 40px; font-size:1.6em; color:#fff; background:transparent url(../images/background-newsletter-button.png) no-repeat 0 0 } #Footer .sectionWaterNewsletter { width:230px } /* Page Decorations */ .waterfight-decoration { position:absolute } .waterFight-decoration-bacon { top:520px; left:50%; z-index:891; width:402px; height:341px; margin-left:380px; background:transparent url(../images/image-bacon.png) no-repeat 0 0 } .waterFight-decoration-splash-balloon { top:730px; left:50%; z-index:891; width:289px; height:249px; margin-left:-480px; background:transparent url(../images/background-water-stain-2.png) no-repeat 0 0 } .waterFight-decoration-balloon-blue { top:750px; left:50%; z-index:892; width:274px; height:264px; margin-left:-600px; background-image: url(../images/image-balloon-blue.png); background-repeat: no-repeat } .waterFight-decoration-splash-balloon { background-image: url(../images/IE6/background-water-stain-2-ie6.png) } #WaterFightFlash { margin-left:11px; } #WaterFightFlashContainer { height:586px; padding-top:15px; }