html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

body {
line-height: 1;
overflow-x: hidden;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

/* SOUTH PERISHER 3.0 */

body {
font-size: 100%;
font-family: 'Ainslie-NorReg', sans-serif;
}

h1, h2, h3, h4, nav {
font-family: 'Ainslie-ConBol';
font-weight: normal;
font-style: normal;
}

section h2 {
font-family: 'Ainslie-NorReg', sans-serif;
font-size: 1.6em;
margin: 0.25em 0 0.75em 0;
font-weight:700;
}

header {
height: 4em;
padding: 1em 0;
background: rgba(43, 128, 194, 1);
}

footer {
float: left;
margin-top: 2em;
text-align: center;
color: rgba(255, 255, 255, 1);
clear: both;
width: 100%;
padding: 1.2em 1em;
background: rgba(43, 128, 194, 1);
}

footer nav {
display: none;
}

section {
box-sizing: border-box;
padding: 1em 2em;
}

section p, section ol, section ul {
font-size: 0.92em;
line-height: 1.4;
}

section a {
color: rgba(43, 128, 194, 1);
}

section a:hover {
color: rgba(24, 186, 255, 1);
}

.hero {
width: 100%;
background: transparent url('/i/southp.jpg') 0 0 no-repeat;
background-size: cover;
height: 640px;
margin-bottom: 24px;
position: relative;
}

.hero p {
font-family: 'Ainslie-ConBol';
color: rgba(255,255,255,0.9);
font-size: 1.6em;
display: block;
width:100%;
box-sizing: border-box;
position: absolute;
line-height: 1.4;
text-align:center;
text-shadow: -2px 0 rgba(0,0,0,0.9);

}

.hero p.one {
font-size:3.2em;
top:310px;
}

.hero p.two {
top:390px;
}

section.main {
float: left;
width: 61.8%;
min-height: calc(100vh - 6.2em);
}

section.secondary {
float: left;
width: 38.2%;
}

form#select-years select {
border: 4px solid rgba(43, 128, 194, 1);
font-family: 'Ainslie-ConBol';
font-size: 1em;
color: rgba(43, 128, 194, 1);
background: rgba(255, 255, 255, 1);
padding: 5px;
margin: 1em 0 0 0;
float: left;
clear: left;
}

section p {
font-size: 1.05em;
line-height: 1.4;
margin: 0 0 1em 0;
}

header h1 a {
white-space: nowrap;
text-transform: uppercase;
font-size: 2em;
line-height: 1;
position: absolute;
top: 0.5em;
left: 0.5em;
padding: 0.5em 0.5em 0.25em 2.5em;
text-align: center;
width: 7.6em;
float: left;
color: rgba(255, 255, 255, 1);
border: 4px solid rgba(255, 255, 255, 0);
background: transparent url('/i/mountains.svg') 0.25em 0.25em no-repeat;
background-size: 1.95em auto;
transform: scale(1);
border-radius: 4px;
}

header nav {
position: absolute;
right: 0.1em;
margin: 0.25em;
top: 0.75em;
font-size: 2em;
transition: top 0.5s ease;
}

header nav li {
float: left;
display: block;
margin: 0 0 0 0.2em;
padding: 0 0 0.2em 0;
font-size: 0.6em;
}

header a, footer a {
text-decoration: none;
color: rgba(255, 255, 255, 1);
transition: background-color, transform 0.5s ease;
}

header nav li a {
padding: 0.25em 0.5em 0.1em 0.5em;
line-height: 1.5;
display: block;
border-radius: 4px;
}

header nav li a.active {
background:rgba(0,0,0,0.1);
}

header nav li#twitter a {
text-indent: -9999em;
height: 1.5em;
width: 1.5em;
margin-left: 0.5em;
background: transparent url('/i/twitter.svg') 0.35em 0.35em no-repeat;
background-size: 1.4em auto;
}

header nav li#facebook a {
text-indent: -9999em;
height: 1.5em;
width: 1.5em;
background: transparent url('/i/facebook.svg') 0.35em 0.25em no-repeat;
background-size: 1.3em auto;
}

@media (max-width: 835px) {
  header {
  margin: 0;
  }
  header nav {
  left: 11.5em;
  top: 0.25em;
  width: 10.75em;
  }
  header nav li {
  float: left;
  width: 7em;
  margin: 0;
  border-color: rgba(43, 128, 194, 1);
  }
  header nav li a {
  padding: 0.05em 0.5em;
  margin-right: 0.5em;
  color: rgba(255, 255, 255, 1);
  border: none;
  }
  img#snowcam {
  width: 100%;
  }
  header nav li#twitter {
  position: absolute;
  top: -0.2em;
  width: 1.8em;
  right: 0;
  }
  header nav li#twitter a {
  margin-left: 0;
  width: 1.8em;
  color: rgba(255, 255, 255, 1);
  }
  header nav li#facebook {
  position: absolute;
  top: 1.7em;
  width: 1.8em;
  right: 0;
  }
  header nav li#facebook a {
  width: 1.8em;
  color: rgba(255, 255, 255, 1);
  }
  header nav li a:hover {
  border-color: rgba(43, 128, 194, 1);
  }
  section.main {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .hero {
    height: 240px;	
  }
  .hero p.one {
      top:70px;
      font-size:1.9em;
      text-align:left;
      padding-left:30px;
  }
  .hero p.two {
      top:120px;
      font-size:1.35em;
      text-align:left;
      padding-left:30px;
  }
  ul.years {
    margin: 1em 2em;
  }
  header {
    height: 5.1em;
    margin-bottom: 0;
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:999;
  }
  .hero {
      top:7em;
  }
  section.main {
      margin-top:7em !important;
  }
  header h1 a {
    font-size: 2em;
    padding: 0.5em 0.5em 0.25em 2.5em;
    width: 7.5em;
    left: 50%;
    margin-left: -5.3em;
    top: 0.25em;
  }
  header nav {
    top: 2em;
    left: 50%;
    margin-left: -5.1em;
    width: 9.4em;
    display: table;
  }
  header nav li {
    float: none;
    display: table-cell;
    vertical-align: middle;
    font-size: 0.525em;
  }
  header nav li a {
    color: #fff;
    text-align: center;
  }
  header nav li.start a {
    text-align: left;
  }
  header nav li.end a {
    margin-right: 0;
    text-align: right;
  }
  img#snowcam {
    width: 100%;
  }
  section.main, section.secondary {
    padding: 0;
    margin: 0;
    width: 100%;
    float: left;
    clear: left;
    min-height: 0;
  }
  section.secondary {
      border-top:1px solid #eee;
      margin-top:1em;
      padding-top:1em;
  }
  section p {
      margin: 10px 30px 10px 30px;
      padding: 0;
  }
  section h2 {
    margin: 0 30px 0 30px;
    padding: 2em 0 0.8em 0;
  }

  header nav li#twitter,
  header nav li#facebook {
  opacity: 0;
  }
  header.out nav li#twitter,
  header.out nav li#facebook {
    opacity: 1;
  }
  header.out nav li#twitter {
  position: fixed;
  top: auto;
  bottom: 0.8em;
  right: 3em;
  z-index: 901;
  }
  header.out nav li#facebook {
  position: fixed;
  top: auto;
  bottom: 0.8em;
  right: 0.75em;
  z-index: 901;
  }
  footer {
  display:none;
  opacity: 0;
  text-align: left;
  position: fixed;
  bottom: 0;
  left: 0;
  transition: opacity 1s ease;
  overflow:hidden;
  }
  footer.out {
  opacity:0;
  }
  footer nav {
  display:block;
  visibility: hidden;
  }
  footer.in {
  opacity: 1;
  }
  footer.in nav {
  visibility:visible;
  }
  footer p {
  display: none;
  }
  footer nav li {
  display: block;
  float: left;
  margin-right: 0;
  }
  footer nav li a {
  padding: 0.4em;
  border-radius: 4px;
  }
  section h2 {
  font-size: 1.1em;
  margin-top: 0;
  }
  section.secondary {
  margin-bottom: 4em;
  }
  section p {
  font-size: 1em;
  }
}

/* Charts */
#charts {
margin: 0;
}

.chart-wrapper {
position: relative;
float: left;
margin: 0 0 1em 0;
width: calc(100% - 2em);
}

a.chart-wrapper {
text-decoration: none;
border: 0;
background: none;
}

.chart {
position: relative;
background: #fff;
}

chart.big {
left: 30px;
padding-bottom: 40px;
}

.chart-x {
position: absolute;
bottom: 0;
width: 100%;
}

.chart-y {
position: absolute;
top:0;
bottom: 0;
}

.chart-x.big {
left: 30px;
bottom: -53px;
}

.chart-y.big {
width: 30px;
}

.theYear {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
font-size: 0.7em;
color: #666;
z-index: 999;
}

.detail {
background: none;
background-color: transparent !important;
}

.detail .x_label {
display: none;
border: 0;
}

h2 .year1, h2 .year2, h2 .select {
background: #fff;
font-size: 1em;
font-family: 'Ainslie-NorReg', sans-serif;
width: 2.5em;
padding: 5px 5px 0 5px;
text-decoration: none;
color: #69cc12;
border: 2px solid #69cc12;
transition: color, background 0.5s ease;
}

h2 .year1:hover {
color: #fff;
background: #69cc12;
}

h2 .year2, h2 .select {
color: #18baff;
border: 2px solid #18baff;
}

h2 .editing {
background: #fff !important;
color: #000 !important;
border: 2px #777 dashed !important;
}

h2 .year2:hover, h2 .select:hover {
color: #fff;
background: #18baff;
}

ul.years {
line-height: 1.6;
}

ul.years li {
display: inline-block;
float: left;
margin-right: 0.2em;
}

ul.years li:after {
  content: ", ";
}

ul.years li:last-child:after {
  content: "";
}

#temperature {
position: absolute;
z-index: 1000;
left: 2em;
font-size: 1em;
display: block;
width: 2.5em;
height: 2.5em;
padding: 0;
border-radius: 2em;
line-height: 2.5;
background: rgba(255, 255, 255, 1);
}

h2.years {

}

h2.years a {
margin-left: 0.1em;
}

.view {
text-decoration: underline;
opacity: 0;
transition: all 0.5s ease;
padding-left: 0.1em;
border: none;
background: transparent;
font-family: 'Ainslie-NorReg', sans-serif;
font-size: 1em;
color: rgba(43, 128, 194, 1);
cursor:pointer;
}

.view:focus, .view:hover {
color: rgba(24, 186, 255, 1);
}

.view.show {
opacity: 1;
}


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}