/* Basic HTML reset/styles */
@font-face{font-family:'DestroyRegular';
    src:url('/fonts/DESTROY_-webfont.eot');
    src:url('/fonts/DESTROY_-webfont.eot?#iefix') format('eot'),
        url('/fonts/DESTROY_-webfont.woff') format('woff'),
        url('/fonts/DESTROY_-webfont.ttf') format('truetype'),
        url('/fonts/DESTROY_-webfont.svg#webfontT1nOpE1i') format('svg');
    font-weight:normal;
    font-style:normal}
body, html, ul, ol, a img, section, article, footer, aside, header, details, input, p, form, fieldset, figure{border:none; font:13px/1.4 Arial, Helvetica, sans-serif; margin:0; padding:0}
section, article, footer, aside, header, details{display:block}
figure{display:inline}
body{background:url(/zimages/zombieBG.jpg) #0f1201 no-repeat center top; -moz-background-size:100% 768px; -webkit-background-size:100% 768px; background-size:100% 768px; color:#666; overflow-x:hidden}
a{color:#6a757b; text-decoration:none}
a:hover, a:active, a:focus{outline:none; text-decoration:underline}
h1, h2, h3, h4{margin:0 0 10px}
h1, h2, h3, h4, strong{color:#999}
ul, ol{list-style:none}
details{-webkit-appearance:none}

/* generic classes */
.float_right{float:right}
.float_left{float:left}
.clr{clear:both}
.hide{display:none}
.overflow{overflow:hidden}

/* generic layout */
.rounded{-moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px}
.bottomRounded{-moz-border-radius:0 0 6px 6px; -webkit-border-radius:0 0 6px 6px; border-radius:0 0 6px 6px}
.topRounded{-moz-border-radius:6px 6px 0 0; -webkit-border-radius:6px 6px 0 0; border-radius:6px 6px 0 0}
.boxShadow{-moz-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.6); -webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.6);box-shadow:1px 1px 3px rgba(0, 0, 0, 0.6)}
.wTitle{background:#0f1201; color:#fff; font-family:DestroyRegular; font-size:11px; padding:5px; text-align:center}
.high{color:#fac1c2}
.low{color:#c0e6ec}
.zombieFont{font-family:DestroyRegular}
.normalFont{font-family:Arial, Helvetica, sans-serif}
.gradient{background-image:-moz-linear-gradient(top, #363635, #020202);
  background-image:-o-linear-gradient(top, #363635, #020202);
  background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0, #363635),color-stop(1, #020202));
  background-image:-webkit-linear-gradient(#363635, #020202);
  background-image:linear-gradient(top, #363635, #020202);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#363635', EndColorStr='#020202')}
	
/* header area */
header{height:130px; margin:0 auto; min-width:1000px; position:relative; z-index:4}
.zombielogo{background:url(/img/wzlogo.png) no-repeat; height:130px; left:20px; position:absolute; top:15px; width:425px}
nav{background:#000; border:1px solid #135b13; font-family:DestroyRegular; height:50px; line-height:50px; padding:0 10px; position:absolute; right:15px; top:0}
nav a{color:#ccc; display:inline-block; height:48px; padding:2px 10px 0}
nav a:hover, .activeNav{
	background-image:-moz-linear-gradient(top, #333b2c, #212121); 
  	background-image:-o-linear-gradient(top, #333b2c, #212121);
  	background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0, #333b2c),color-stop(1, #212121)); 
  	background-image:-webkit-linear-gradient(#333b2c, #212121); 
  	background-image:linear-gradient(top, #333b2c, #212121);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#333b2c', EndColorStr='#212121'); 
	color:#fff; text-decoration:none}
nav a:active, nav a:focus{text-decoration:none}
#facebookArea{background:#000; border:1px solid #fff; height:55px; overflow:hidden; position:absolute; right:198px; top:65px; width:260px}
#facebookArea iframe{border:none; height:60px; overflow:hidden; position:relative; top:-3px; width:290px}
#appStore{background:url(/img/appstore.png) no-repeat; height:58px; position:absolute; right:15px; top:65px; width:166px}
#appStoreFooter{background:url(/img/appstore.png) no-repeat; display:none; height:58px; margin:0 auto; width:166px}

/* search area */
.zombieSearch p{color:#ddd; display:inline; font-size:13px; padding-left:15px; text-shadow:1px 1px 2px #000}
.zombieSearch{margin-bottom:15px; overflow:hidden}
.zombieSearch label{margin-right:10px; padding-top:17px}
.zombieSearch fieldset{background:#1a1818; border:1px solid #222902; height:35px; padding:5px 10px; position:relative; width:450px}
.searchput{background:none; color:#666; height:40px; padding-top:1px; width:90%} 
.searchput:focus{border:none; color:#eee; outline:none}
.searchbtn{background:url(/img/search.png); cursor:pointer; height:34px; position:absolute; text-indent:-9999px; width:37px}
#weThinkBrain{background:url(/img/brainlocation.png); height:40px; position:absolute; right:115px; top:82px; width:50px}

/* zombie character */
#weatherZombie{bottom:-42px; height:424px; position:absolute; right:-65px; width:302px; z-index:3}
#weatherZombie a{display:block}
#wordBubble{background:#000; display:none; font-size:30px; height:200px; left:60px; padding:40px; position:absolute; top:135px; width:660px}
#wordBubble.moarBubble{height:260px; top:78px; width:392px}
#wordBubble.faqBubble{width:726px}
#zombieRotate img{}

/* Content area */
#weatherArea{background:url(/img/splat.png) no-repeat; height:370px; margin:0 auto; padding:80px; position:relative; top:-13px; width:800px}
#hourlyWeather, #dailyWeather, #radarWeather, #currentWeather{display:none}

/* current weather */
#currentIcon{margin-right:15px; width:240px}
#currentDetails{margin-bottom:15px; text-align:center; width:490px}
	#currentTemp{color:#fff; font-size:84px; margin-right:15px}
	#currentAside{text-align:left}
	#currentAside figure{display:block; font-size:17px; padding:10px 5px}
	#currentAside figure span{margin-right:20px}
	#sun{background:url(/img/sunSR.png) no-repeat; display:block; font-size:14px; height:28px; padding:6px 0 0 50px}
	#change{color:#aaa; padding-left:5px; text-decoration:underline}
	#change:hover{color:#ccc; text-decoration:none}
.multiColumn{-moz-column-count:3; -moz-column-gap:5px; -webkit-column-count:3; -webkit-column-gap:5px; column-count:3; column-gap:5px; border-bottom:2px solid #1c1c1c; border-top:2px solid #1c1c1c; margin:10px 0; padding:10px 20px; width:600px}
.multiColumn li{font-size:14px; margin-bottom:10px}
.multiColumn li strong{color:#999}
.lastUpdated{color:#ccc}

/* daily, hourly & radar weather */
.sliderContainer{height:254px; overflow:hidden; position:relative; width:652px}
.slider{position:absolute}
#dailyWeather, #hourlyWeather{padding-left:50px; position:relative}
#dailyWeather img{width:140px}
#hourlyWeather img{margin:0 10px 23px; width:61px}
#hourlyWeather .summary{text-align:left; width:108px}
.HD-block{border:1px solid #222902; height:252px; margin-right:15px; overflow:hidden; text-align:center; width:200px}
.HD-block h4{border-bottom:1px solid #222902; color:#ccc; font-size:10px; padding:4px; text-shadow:0 -1px 0 #555}
.degreeHD{font-weight:normal}
.listing{text-align:left}
.listing li{padding:2px 10px}
.listing strong{color:#999; margin-right:10px}
.odd{background:#222}
#radarWeather img{margin-right:20px; width:350px}
#radarWeather p{font-size:16px; width:244px}
.prevNext{left:-20px; position:absolute; top:60px}
.prevNext a{background:url(/img/prev-next.png); display:block; height:60px; opacity:.6; text-indent:-9999px; width:60px}
.prevNext a:hover{opacity:1}
.prevNext .next{background-position:0 -70px; margin-bottom:15px}
.prevNext a.disabled, .prevNext a.disabled:hover{opacity:.2}

/* search results & error pages */
.twoColumns{-moz-column-count:2; -moz-column-gap:5px; -webkit-column-count:2; -webkit-column-gap:5px; column-count:2; column-gap:5px; margin:10px 0}
.chooseBetter{border-bottom:1px solid #acc2a4; -moz-column-count:4; -moz-column-gap:20px; -webkit-column-count:4; -webkit-column-gap:20px; column-count:4; column-gap:20px; margin-bottom:10px}
#searchResults{height:225px; overflow:auto; width:80%}
.normallist li{font-size:12px; padding-left:15px}
.normallist li strong{display:block; font-size:13px; padding-bottom:10px}

/* iphone pages */
#iphone{position:absolute; right:-15px; top:20px}
#iphoneArea1{height:300px; overflow:auto; padding-right:20px; position:relative; width:600px; z-index:9}
#iphoneArea1 p{margin-bottom:15px}

/* share area */
#shareArea{bottom:75px; overflow:hidden; position:absolute; width:638px}
#shareArea .details{font-size:11px; margin-right:15px}
#shareArea summary{color:#999; font-size:11px}
#shareArea .float_left{width:375px}

/* sidebar area */		
#radarImage{border:1px solid #444; width:100%}
.additionalRadar{display:none}
#hangingZombie{background:url(/zimages/zombies/crutchZombie.png) no-repeat -23px 0; bottom:-233px; height:216px; left:0; position:absolute; width:207px}

/* Comics page */
#comics{overflow:hidden; padding:30px 0 0 20px}
#flickr_uber_wrapper{}
#flickr_badge_image1{float:left; margin-right:15px}
#smallerFlickr{float:left; padding:0 10px 5px 20px; width:380px}
#smallerFlickr #flickr_badge_image1{display:none}
#smallerFlickr .flickr_badge_image{border:2px solid #999; float:left; height:75px; margin:0 15px 15px 0; opacity:.6}
#smallerFlickr .flickr_badge_image:hover{opacity:1}

/* moar & faq */
#groupShot{bottom:-67px; position:absolute; right:-24px}
#websiteFAQ{display:none}
.faqArea{height:260px; margin-top:15px; overflow:auto; width:97%}
.faqArea p{margin-bottom:15px; padding-right:25px}
#moar{height:300px; overflow:auto; padding-right:15px; width:430px}
.twitter{position:absolute; right:90px; top:110px; width:300px}
.twitter ul{margin-bottom:10px}
.wallpapers{overflow:hidden; padding:0 10px; text-align:center; width:115px}
.wallpapers li{float:left; font-size:11px; width:50%}
#getBadgeCode{padding:15px; width:95%}
#getBadgeCode textarea{background:#1a1818; border:1px solid #222902; color:#aaa; padding:3px 6px; float:left; height:200px; margin-left:50px; width:350px}
.badgeInputArea{width:300px}
input#location{background:#1a1818; border:1px solid #222902; color:#aaa; padding:3px 6px}
input#location:focus, #getBadgeCode textarea{border:1px solid #ccc; color:#eee}
#preview{margin:0 auto; position:relative; width:256px}

/* footer area */
footer{background:url(/zimages/zfooter-top.png) no-repeat center top; margin-top:-24px; padding-top:54px}
footer .footerBG{background:#0f1201; padding:20px 150px 0 0}
div.wzAd{height:96px; position:relative; text-align:center; width:100%; z-index:44}
footer aside{border-top:2px solid #252419; color:#949494; font-size:11px; margin-top:15px; padding:10px 0; text-align:center}
footer aside .padding{padding:0 5px}

/*color box css*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden}
#cboxOverlay{position:fixed; width:100%; height:100%}
#cboxMiddleLeft, #cboxBottomLeft{clear:left}
#cboxContent{position:relative}
#cboxLoadedContent{overflow:auto}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0}
#cboxTitle{margin:0}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer}
#cboxOverlay{background:#333}
#cboxContent{margin-top:20px}
#cboxLoadedContent{background:#000; padding:5px}
#cboxTitle{position:absolute; top:-20px; left:0; color:#ccc}
#cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc}
#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff}
#cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(/img/colorbox/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px}
#cboxPrevious.hover{background-position:bottom left}
#cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(/img/colorbox/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px}
#cboxNext.hover{background-position:bottom right}
#cboxLoadingOverlay{background:#000}
#cboxLoadingGraphic{background:url(/img/colorbox/loading.gif) no-repeat center center}
#cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(/img/colorbox/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px}
#cboxClose.hover{background-position:bottom center}

#elRaptor{z-index:999}

/* we hate ie6 */
#ie6{display:none}

#weatherzombieAdvert{display:none}

/* mobile phones */
@media only screen and (max-device-width:480px),screen and (max-width:460px){ /* @media does not work in ie */
	html, body, header, nav, footer, #weatherArea, .hgroup{margin:0 auto; min-width:320px!important; overflow:hidden; padding:0; position:static; width:auto}
	body{background:#313e13 url(/zimages/zombieBG.jpg) right top no-repeat; background-size:100%}
	.float_left, .float_right{float:none}
	#weatherZombie, #comics-btn, #faq-btn, #moar-btn, #appStore, .wzAd, #facebookArea, br.clr, .addthis_counter.addthis_pill_style{display:none}
	.zombielogo{background-position:left 0; background-size:86%; display:block; height:71px; left:25px; position:absolute; top:60px; width:224px}
	nav{border-left:0; border-right:0; text-align:center; position:static!important}
	nav a{padding:2px 5px}
	#weatherArea{background-position:center 78px; height:auto; padding:160px 0 0 0!important; position:relative; width:auto}
	.zombieSearch{margin:0 auto 20px; min-width:320px; position:relative; width:85%; z-index:9}
	.zombieSearch fieldset{height:20px; width:298px}
	.zombieSearch label{display:block; font-size:10px; margin:0 0 7px; padding:0 0 0 15px; width:100%}
	.searchput{font-size:10px; height:auto}
	.searchbtn{background-repeat:no-repeat; background-size:27px auto; left:272px}
	header{background:url(/zimages/groupShot-mobile.png) no-repeat 93% bottom; background-size:140px; height:185px; min-width:320px; position:absolute; width:100%}
	#change{right:35px; font-size:10px; position:absolute; top:108px}
	footer{background:none; margin:0; padding:0}
	footer .footerBG{background:none; padding:0}
	footer aside{border:none; margin:0; padding:0}
	#shareArea{background:url(/img/splat.png) no-repeat center bottom; margin-top:-10px; padding:12px 10px 72px; position:static; text-align:center; width:auto}
	#shareArea details{margin:0 0 10px}
	#shareArea div.float_left{padding-left:40px; width:auto}
	#currentWeather{margin:0 auto; min-width:320px; position:relative; width:85%}
	#currentIcon{margin:0; width:125px}
	#currentIcon img{width:105%}
	#currentTemp{font-size:76px; position:absolute; right:0; top:0}
	#currentDetails{width:auto}
	#sun{margin:5px 0 5px 40px}
	#currentAside figure{font-size:13px; margin-bottom:10px; padding:0; text-align:center}
	.multiColumn{background:#000; -moz-column-count:2; -moz-column-gap:15px; -webkit-column-count:2; -webkit-column-gap:15px; column-count:2; column-gap:15px; margin-bottom:0; width:auto}
	.multiColumn li{font-size:12px}
	#radarWeather{background:#000}
	#radarWeather p{background:#000; font-size:12px; padding:2px 15px 10px; width:auto}
	#radarWeather img{margin:0 0 0 4px; width:310px}
	#hourSlide img{float:left}
	#hourSlide br.clr{display:inline}
	#hourlyWeather, #dailyWeather{padding-left:58px; margin-bottom:15px}
	.prevNext{position:static}
	.prevNext a{background-size:46px; height:45px; width:45px}
	.prevNext .next{background-position:0 -52px; position:absolute; top:60px; right:7px}
	.previous{position:absolute; top:60px; left:9px}
	.HD-block{float:left; margin-right:0}
	.sliderContainer{width:210px}
	#elRaptor{display:none!important}
	.faqPage, .moarPage, .comicsPage, .mobileHide, #store-btn{display:none}
	#appStoreFooter{display:block; margin-bottom:10px}
	#weThinkBrain{background-size:100%; height:29px; right:25px; top:70px; width:40px; z-index:99}
	#shareArea .details{margin-bottom:15px}
	#hourlyWeather .summary{float:left}
}
@media screen and (max-width:1024px){
	#weatherZombie{bottom:-85px}
	#weatherZombie img{width:85%}
}