@import url(http://fonts.googleapis.com/css?family=Titillium+Web:200,400,300,600);
/* Base styling */
body, form, fieldset, input, textarea, button, figure,
h1, h2, h3, h4, p, label, table, tbody, thead, tfoot, tr, td {border: 0; font-size: 100%; font-family:'Titillium Web',Helvetica,Arial,san serif; line-height: 1.5; margin: 0; outline: 0; padding: 0;}
body {background: #f8f8f8; padding-bottom: 0;}
/* give everything the box-sizing:border-box rule */
* {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
article, aside, details, figcaption, figure, footer, header, nav, section {display: block;}
img {border: 0; outline: 0; padding: 0;}
img, object, embed {max-width: 100%;}
ul, ol {list-style: none; padding: 0; margin: 0;}
ul, ol, h1, h2, h3, h4 {margin-bottom: 8px;}
ul > li:last-child, ol > li:last-child {margin-bottom: 0;}
/* links */
a {color: #3775b9;}
a:hover {color: #20436a; text-decoration: none;}
/* highlights and outlines */
:focus, a:focus, a:active, input[type="submit"]::-moz-focus-inner {outline: none;}
::-moz-selection {background: #463434; color: #eee; text-shadow: none;}
::selection {background: #463434; color: #eee; text-shadow: none;}
/* Floats & Clearfixing */
.clearfix:after, .contact-Form:after, .navigation:after, .row:after {clear: both; content: "."; display: block; height: 0; visibility: hidden;}
.clearfix, .contact-Form {*zoom: 1;}
.clr {clear: both; height: 0; overflow: hidden;}
.float_left {float: left;}
.float_right {float: right;}
.center{text-align: center;}
.hide, .mobileShow {display: none;}
.overflow{overflow: hidden;}
/* Font Declarations / Resets */
.ultra2 {display: inline-block; font-size: 14em; font-weight: 200; letter-spacing: -8px; line-height: 175px;}
.ultra {font-size: 4em; font-weight: 600;}
.mega {font-size: 3em; font-weight: 300;}
h1, .alpha {font-size: 2.3em; font-weight: 200;}
h2, .beta {font-size: 1.75em; font-weight: 200;}
h3, .gamma {font-size: 1.3em; font-weight: 300;}
h4, .delta {font-size: 1.15em; font-weight: 300;}
p, li, .base {font-size: 1em;}
.tiny {font-size: 0.85em;}
.mini {font-size: 0.7em;}
.txt-Center {text-align: center;}
.txt-Right {text-align: right;}
.txt-Left {text-align: left;}
.bold {font-weight: 600;}
h1 a, h2 a, h3 a, h4 a {color: #444444; text-decoration: none;}
.transition {-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
.maxWidth {padding: 0 1.5%; margin: 0 auto; max-width: 1200px; position: relative; overflow: hidden;}
/* Button. styling */
.btn {-moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -webkit-appearance: none; -webkit-transition: all 0.25s ease-in-out; border-radius: 3px; display: inline-block; font-size: .8em; font-weight: 600; margin: 4px; padding: 4px 8px; text-decoration: none; text-transform: uppercase; transition: all 0.25s ease-in-out; vertical-align: middle; cursor: pointer;}
.btn:hover {background: #f2880a;}
.showBack, .showFront {background: #e8981b; color: #FFF;}
.showBack:hover, .showFront:hover, .btn:hover {color: #FFF;}
.makedefault {background: url(../images/icons/target.png) no-repeat left center; color: #fff; display: inline-block; text-indent: 24px; text-decoration: none; text-transform: uppercase;}
.makedefault:hover {text-decoration: underline;}
/* Columns styling */
.row{overflow: hidden; position: relative;}
.column{float: left; margin: .5%;}
.column.first, .column:first-child, .column:nth-child(6n+7){margin-left: 0;}
.column.last, .column:last-child, .column:nth-child(6n+6) {margin-right: 0;}
.column img{width: 100%;}
.col2{width: 49%;}
.col3{width: 32.33%;}
.col4{width: 24%;}
.col3070{width: 29%;}
.col7030{width: 69%;}
.col6{width: 15.83%;}
/* Header styling */
.header-Top {background: #fff; border-bottom: 1px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); height: 75px; left: 0; position: fixed; top: 0; width: 100%; z-index: 3;}
.header-Top .content {position: relative;}
.header-Top .nav-Container {display: inline-block; padding: 0 30px; position: relative; text-align: center; top: 10px; width: 75%;}
.header-Logo {float: left; padding: 10px 5px 10px 0;}
.header-Logo img {display: block; max-height: 60px;}
/* Search styling */
.form-Search{height:34px;overflow:hidden;position:absolute;right:15px;top:22px;width:60%}

.form-Search:hover .search-btn{border-radius:0}
	@media (max-device-width:480px),screen and (max-width:600px){
		.form-Search{height:65px;margin:0 auto;padding:10px 0;position:static;}
		.form-Search fieldset{position:relative}
	}
.form-Search .inputArea{position:absolute; -webkit-transition: all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; width: 100%;}

	@media (max-device-width:480px),screen and (max-width:600px){
		.form-Search .inputArea{margin-bottom:5px;position:static;}
	}
.search-btn{background-position:-126px 2px;background-color:#444;cursor:pointer;font-size:1px;height:34px;position:absolute;right:0;z-index:3;width:34px;}
.search-btn:hover{background-color:#101010}
	@media (max-device-width:480px),screen and (max-width:600px){
		.search-btn{position:absolute;right:0;z-index:2}
	}
.inputArea{border:1px solid #ccc;height:34px;padding:0 5px;-webkit-appearance: none;}
.inputArea:focus{border:1px solid #50B6D5}

.sprite {background-image: url(../images/sprite-icons.png); background-repeat: no-repeat; font-size: 1px !important; text-indent: -99999px;}

/* Navigation styling */
.nav-Horizontal {list-style: none; margin: 0; overflow: hidden; padding: 0;}
.nav-Horizontal li,.navtab, .navinactive{display: inline-block; font-family: "Titillium Web"; margin: 0; padding: 0;}
.nav-Horizontal a,
.navtab a,
.navinactive a{color: #444444; display: block; font-size: 1.5em; font-weight: 300; padding: 10px 20px;}
.nav-Horizontal a:hover,
.navtab a:hover,
.navinactive a:hover {color: #101010;}

/* Current */
.current{overflow: hidden; margin-top: 75px;}
.currentNav{overflow: hidden; margin: 8px 0;}
.settings{float: right; display: inline-block;}
.details{display:inline-block; margin-left: 3%; text-align: left; vertical-align:top}
.current-details{max-height: 300px;	text-align: center; white-space: normal;}
.current-temps {display: inline-block; margin-left: 3%; vertical-align: middle; text-align: left;}
.currentIcon {display: inline-block; max-width: 28%; vertical-align: middle;}

.radar {display: inline-block; max-width: 420px;}
.radar img{max-width: 100%;}

.noRadar {padding-top: 15%;}
/*  flip card stuff  */
.flip-container {-moz-perspective:1000px; -o-perspective:1000px; -webkit-perspective:1000px; perspective: 1000;}
.flip-container, .front, .back {width: 100%; height: 410px;}

/* flip speed goes here */
.flipper, .flipper.flipped {color: #FFF; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-transition: 0.4s; -o-transition: 0.4s; -webkit-transition: 0.4s; transition: 0.4s; position: relative;}
 .flipper.flipped {-moz-transform:rotateY(180deg); -o-transform:rotateY(180deg); -webkit-transform:rotateY(180deg); transform:rotateY(180deg);}
/* hide back of pane during swap */
.front, .back {-webkit-backface-visibility: hidden; /* Chrome and Safari */
	-moz-backface-visibility: hidden; /* Firefox */
	-ms-backface-visibility: hidden; /* Internet Explorer */
	backface-visibility: hidden;
	position: absolute; top: 0; left: 0;}

/* front pane, placed above back */
.front {z-index: 2;}

/* back, initially hidden pane */
.back {-moz-transform:rotateY(180deg); -o-transform:rotateY(180deg); -webkit-transform:rotateY(180deg); transform:rotateY(180deg);}

/* Degree Toggle styling */
.degree{font-size: 1.6em; vertical-align: top;}
.toggleBtn {background: #E8981B; color: #FFF; padding: 4px 6px 4px 4px;}
.current_temp span{display: block; float: left;}
/* Section styling */
.hourly, .sixDay{margin-top: 16px;}
/* Blocks styling */
.forecastBlocks{color: #FFF; position: relative; overflow: hidden;}
.reveal {background: rgb(233,153,27); background: rgba(0,0,0, .45); position: absolute; top: 100%; padding: 10% 2% 2%; min-height: 100%; width: 100%; word-wrap: normal;}
.stuff {position: relative;}
.stuff:hover .reveal {top: 0;}
.title {text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.2); margin: 0;}
/* Hourly/6 Day styling */
.hourly .row,.sixDay .row{text-align: center;}
/* 6 Day styling */
.sixDay img, .hourly img {display: block; margin: 0 auto; text-align: center; width: 50%;}
.sixDay .column {background: #e9991b;}
/* Hourly styling */
.hourly .forecastBlocks {background: rgb(125, 190, 200);}
/* Advertising styling */
.adSpace{display: inline-block; text-align: center; margin: 16px 0 70px; width: 100%;}
/* Footer Area */
.base-Footer {background: #EFECE8; border-top: 1px solid #DDDDDD; bottom: 0; max-height:53px;
	position: fixed; width: 100%; z-index: 2;}
.logo-Footer {background-color: #444444; background-position: 4px 12px; width: 100px;}
.nav-Outro {list-style: none; margin: 0; overflow: hidden; padding: 0;}
.nav-Outro li {float: left; font-family: "Titillium Web"; font-size: 11px; line-height: 55px; margin: 0; padding: 0 15px 0 0;}
.nav-Outro a {color: #444444; display: inline-block; font-size: 11px; height: 52px; }
.nav-Outro a:hover {color: #101010;}
.hide-the-Scripts{left: -99999px; position:absolute;}
.hide-the-Scripts + img{display: none; height: 0;}
/* forecast colors */
.sunny, .partly_cloudy, .mostly_sun, .mostly_sunny, .passing_clouds, .clear {background-color: #50B6D5;}
.cloudy, .foggy, .haze, .mostly_cloudy {background-color: #90a5b7;}
.rain, .scattered_tstorms, .showers,
.tstorms {background-color: #69858b;}
.cold, .ice, .light_snow, .sleet,
.snow_rain_mix, .snow {background-color: #8abecb;}
.night_clear, .night_mostly_clear, .night_partly_cloudy {background-color: #1e4562;}
.night_mostly_cloudy, .night_sprinkles, .night_tstorms {background-color: #1e262e;}
/* No results */
.page {min-height: 600px; max-width: 800px; margin: 0 auto; padding: 16px;}
/* IE only stying */
.ie8 .face.back {display: none;}
.ie8 .column {margin: .4%;}

/* Media queries */
@media (max-device-width: 480px), screen and (max-width: 600px) {
	.header-Top {height: auto; position: static;}
	.header-Top .nav-Container {width: 65%;}
	.header-Top .content {text-align: center;}
	.header-Top .nav-Container {display: block; padding: 0; position: static; text-align: center; width: 100%;}
	.header-Top .nav-Container li {float: none; display: inline-block;}
	.header-Top .nav-Container a {padding: 5px;}
	.header-Logo {display: inline-block; padding: 5px; max-width: 50%}
	.header-Logo img {margin: 10px auto 0;}
	.form-Search {float: right; height: 65px; margin: 0 auto; padding: 10px 0; position: static;}
	.current{margin-top: 0;}
}

@media (max-device-width: 480px), screen and (max-width: 800px) {
	.header-Logo {width: 30%;}
	.currentIcon{max-width: 30%;}
	.radar {max-width: 300px;}
	.flip-container, .front, .back {max-height: 320px;}
	.base-Footer {padding-left: 5px; position: static; text-align: center; width:auto;}
	.base-Footer .logo-Footer {display: none;}
	.nav-Outro a {height: auto; line-height: 1;}
	.nav-Outro li {display: inline-block; float: none; padding: 0 10px;}
	.currentIcon {vertical-align: middle;}
	.column {float: left; margin: .5%;}
	.col6 {width: 32.66%;}
	.column.first, .column:first-child, .column:nth-child(3n+4){margin-left: 0;}
	.column.last, .column:last-child, .column:nth-child(3n+3) {margin-right: 0;}
	.ultra2 {font-size: 8em; line-height: 100px;}
	.header-Top .nav-Container {font-size: 110%; top: 20px;}
	.adSpace{margin: 16px 0;}
}
@media screen and (max-width:420px){
	h1, .alpha, h2, .beta {font-size: 1.4em; font-weight: 600;}
	.delta {font-size: 1em;}
	.radar {display:none}
	.flip-container, .front, .back {max-height: 250px;}
}
@media screen and (max-device-width:480px), screen and (max-width:730px){
	.adSpace {}
}
@media (max-device-width: 320px), screen and (max-width: 320px) {
	body{font-size: 80%;}
	.makedefault {min-height: 20px;}
	.col6 {width: 48%;}
	.column.first, .column:first-child, .column:nth-child(odd){margin-left: 0; margin-right: 1%;}
	.column.last, .column:last-child, .column:nth-child(even){margin-left: 1%; margin-right: 0;}
	.hourly .row{text-align: left;}
	.hourly .col6{float: none; width: 100%;}
	.title{text-indent: 8px;}
	.hourly img{width: 16%; float: left;}
	.hourly .reveal {background: none; top:0; right: 0; padding:8px; width: 50%;}
	.hourlyTemp{display: inline-block;}
	.hourly .stuff{min-height: 85px;padding: 4%;}
	.hourly .column{margin: 2% 0;}

}