@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700|Open+Sans);

/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary { display: block; }
/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video { display: inline-block; }
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Address styling not present in IE 8/9.
 */
[hidden] { display: none; }
/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
      -ms-text-size-adjust: 100%; /* 2 */
}
/**
 * Remove default margin.
 */
body { margin: 0; }
/* ==========================================================================
   Links
   ========================================================================== */
/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus { outline: thin dotted; }
/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover { outline: 0; }
/* ==========================================================================
   Typography
   ========================================================================== */
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] { border-bottom: 0 none; /*1px dotted;*/ }
/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong { font-weight: bold; }
/**
 * Address styling not present in Safari 5 and Chrome.
 */
dfn { font-style: italic; }
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
       box-sizing: content-box;
  height: 0;
}
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}
/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}
/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre { white-space: pre-wrap; }
/**
 * Set consistent quote types.
 */
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
/**
 * Address inconsistent and variable font size in all browsers.
 */
small { font-size: 80%; }
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* ==========================================================================
   Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9.
 */
img { border: 0; }
/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) { overflow: hidden; }
/* ==========================================================================
   Figures
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure { margin: 0; }
/* ==========================================================================
   Forms
   ========================================================================== */
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}
/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */
button,
input,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 2 */
  margin: 0; /* 3 */
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input { line-height: normal; }
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select { text-transform: none; }
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] { cursor: default; }
/**
 * 1. Address box sizing set to `content-box` in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
     -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
          box-sizing: content-box;
}
/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
  overflow: auto; /* 1 */
  vertical-align: top; /* 2 */
}
/* ==========================================================================
   Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* end Normalize.css */

/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html,
button,
input,
select,
textarea { color: #222; }

body {
    font-size: 1em;
    line-height: 1.4;
    padding-left: 1em;
}

a { color: #3615D4; }

a:visited { color: #551a8b; }

a:hover { color: #06e; }

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */
img { vertical-align: middle; }

/*
 * Remove default fieldset styles.
 */
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea { resize: vertical; }

/* ==========================================================================
   wthr custom styles
   ========================================================================== */
html {
	min-height: 100%;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFEE', EndColorStr='#DDDDDD');
}

body {
    background-color: #FFE;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFE), to(#DDD));
    background-image: -webkit-linear-gradient(top, #FFE, #DDD);
    background-image:    -moz-linear-gradient(top, #FFE, #DDD);
    background-image:      -o-linear-gradient(top, #FFE, #DDD);
    background-image:         linear-gradient(to bottom, #FFE, #DDD);
    color: #444;
    font-family: "Open Sans", sans-serif;
    padding-right: 1em;
}

.wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 36em;
}

h1,
h2 {
    color: #FA5B3C;
    font-family: "PT Sans Narrow", sans-serif;
}

h1 { /* app title */
    padding: 0 1ex;
    font-size: 4.5em;
    line-height: 1;
    font-weight: normal;
    margin: 0;
    padding: 0 1ex;
    text-align: center;
    /* 3D Text: http://markdotto.com/playground/3d-text/ */
    text-shadow:    0 1px 0 #f60,
                    0 2px 0 #c9c9c9,
                    0 3px 0 #bbb,
                    0 4px 0 #b9b9b9,
                    0 5px 0 #aaa,
                    0 6px 1px rgba(0, 0, 0, .1),
                    0 0 5px rgba(0, 0, 0, .1),
                    0 1px 3px rgba(0, 0, 0, .3),
                    0 3px 5px rgba(0, 0, 0, .2),
                    0 5px 10px rgba(0, 0, 0, .25),
                    0 10px 10px rgba(0, 0, 0, .2),
                    0 20px 20px rgba(155, 155, 155, .15);
}

form { text-align: center; }

form .icon-spin5 {
    color: #999;
    margin-top: 1ex;
    opacity: 0;
    transition: opacity 1s;
}

form.loading .icon-spin5,
.ui-autocomplete-loading + button + .icon-spin5 { opacity: 1; }

.lt-ie9 form .icon-spin5 { display: none; }
.lt-ie9 form.loading .icon-spin5,
.lt-ie9 .ui-autocomplete-loading + button + .icon-spin5 { display: block; }

/* Hide geolocation-dependent features if not supported: */
.no-geolocation .geolocation { display: none; }

label[for=place] {
    display: block;
    margin: 1em 0;
}

.place-error {
    color: #B22;
    display: block;
    visibility: hidden;
}

.error .place-error {
    text-indent: -4ex;
    visibility: visible;
}

/* Autocomplete styles: */
.ui-autocomplete { background: #FFF; }

.ui-autocomplete a { color: #444; }

.ui-autocomplete li:hover { color: #FFE; }

.ui-autocomplete .ui-menu-item > a.ui-state-active,
.ui-autocomplete li:hover a { color: #FA5B3C; }

.ui-autocomplete a:focus { color: #FA5B3C; }

/* Results */
#results { display: none; }

.error input { border: 1px solid #f00; }

p.error {
    color: #B22;
    text-align: center;
}

h2 {
    font-size: 3em;
    margin: 0;
}

.generatedcontent #results { position: relative; }

.generatedcontent h2:before {
    color: #AAA;
    content: '';
    font-family: "wthr-icons";
    font-size: 2em;
    font-style: normal;
    font-weight: normal;
    height: 1em;
    line-height: 1;
    margin-left: -2em;
    margin-right: 0;
    position: absolute;
    right: 0;
    speak: none;
    top: -0.5ex;
    width: 1em;
    z-index: -1;
}

.generatedcontent h2[data-code^="2"]:before { content: ''; } /* thunderstorm */
.generatedcontent h2[data-code^="3"]:before { content: '\e804'; } /* drizzle */
.generatedcontent h2[data-code^="5"]:before { content: '\e803'; } /* rain */
.generatedcontent h2[data-code^="6"]:before { content: '\e805'; } /* snow */
.generatedcontent h2[data-code^="7"]:before { content: ''; } /* atmosphere */
.generatedcontent h2[data-code^="8"]:before { content: '\e807'; } /* clouds */
.generatedcontent h2[data-code^="9"]:before { /* extreme */
    color: #B22;
    content: '!';
    font-family: Georgia, serif !important;
}

dl {
    min-height: 8em;
    position: relative;
}

dd { margin: 0; }

/* current, low and high temps: */
.now + dd {
    font-size: 5em;
    margin-top: -0.5ex;
    text-align: center;
    text-indent: 0.76ex; /* adjust for degree symbol */
    width: 100%;
}

.now + dd .deg { color: #999; }

.low,
.low + dd,
.high,
.high + dd {
    bottom: 0;
    position: absolute;
    width: 2.2em;
}

.low,
.low + dd { left: 0; }

.high,
.high + dd { right: 0; }

.low + dd,
.high + dd {
    bottom: 1ex;
    font-size: 2em;
    width: 1.2em;
}

.desc + dd {
    margin: 0 auto;
    text-align: center;
    width: 70%;
}

.switch {
    margin: 1em auto 0;
    width: 6em;
}

/* Hide fancy slide toggle (for units) for non-capable browsers.
   This will be overridden in a media query, below:
*/
.switch .slide-button { display: none; }

/* Accommodate IE < 9: */
.lt-ie9 .switch label + input {
    margin-left: 1em;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */
/* Prevent callout */
.nocallout { -webkit-touch-callout: none; }

.pressed { background-color: rgba(0, 0, 0, 0.7); }

/* A hack for HTML5 contenteditable attribute on mobile */
textarea[contenteditable] { -webkit-appearance: none; }

/* A workaround for S60 3.x and 5.0 devices which do not animate gif images if
   they have been set as display: none */
.gifhidden {
    position: absolute;
    left: -100%;
}

/*
 * Image replacement
 */
.ir {
    background-color: transparent;
    background-repeat: no-repeat;
    border: 0;
    direction: ltr;
    display: block;
    overflow: hidden;
    text-align: left;
    text-indent: -999em;
}

.ir br { display: none; }

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */
.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible { visibility: hidden; }

/**
 * Clearfix helper
 * Used to contain floats: h5bp.com/q
 */
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after { clear: both; }

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix { *zoom: 1; }

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 480px) {
    h2 { text-align: center; }
}

@media only screen and (min-width: 600px) {

	h1 { font-size: 5.5em; }
	#results { margin-top: 2em; }
}

@media only screen and (min-width: 768px) {

	h1 { font-size: 6.5em; }
	
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for viewports that meet the condition */
}

/* Switch styles for units conversion */
@media only screen {

    /* ------------------------------------------
    CSS TOGGLE SWITCHES (Ionuț Colceriu)
    Licensed under Unlicense 
    https://github.com/ghinda/css-toggle-switch
    ------------------------------------------ */
    /* Candy Theme
     * Based on the "Sort Switches / Toggles (PSD)" by Ormal Clarck
     * http://www.premiumpixels.com/freebies/sort-switches-toggles-psd/
     */
 
    .switch {
        background-color: #ffe;
        border-radius: 3px;
        box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2);
        color: #fff;
        font-weight: bold;
        display: block;
        height: 30px;
        padding: 0;
        position: relative;
        text-align: center;
        text-shadow: 1px 1px 1px #191b1e;
    }

    .switch input {
        position: absolute;
        opacity: 0;
    }

    .switch label {
        color: #444;
        cursor: pointer;
        float: left;
        height: 100%;
        line-height: 30px;
        margin: 0;
        position: relative;
        text-align: center;
        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
        vertical-align: middle;
        width: 50%;
        z-index: 2;
}

    .switch .slide-button {
        background-color: #FA5B3C;
        background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
        background-image:    -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
        background-image:     -ms-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
        background-image:      -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
        background-image:         linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
        border: 1px solid #333;
        border-radius: 3px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.45);
        display: block;
        height: 100%;
        left: 0;
        padding: 0;
        position: absolute;
        top: 0;
        width: 50%;
        z-index: 1;
        -webkit-transition: all 0.3s ease-out;
           -moz-transition: all 0.3s ease-out;
            -ms-transition: all 0.3s ease-out;
             -o-transition: all 0.3s ease-out;
                transition: all 0.3s ease-out;
    }

    .switch input:last-of-type:checked ~ .slide-button {
        left: 50%;
    }

    .switch * {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
             -o-box-sizing: border-box;
                box-sizing: border-box;
    }

    .switch input:focus + label { outline: 1px dotted #888; }

    .switch input:checked + label {
        color: #FFF;
    }

    /* Bugfix for older Webkit, including mobile Webkit. Adapted from:
     * http://css-tricks.com/webkit-sibling-bug/
     */
    .switch { -webkit-animation: bugfix infinite 1s; }

    @-webkit-keyframes bugfix { from { position: relative; } to { position: relative; } }

}