/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */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;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}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;}

* {
    -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
   -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
     -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
        transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */

-webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
   -moz-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
        transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
}


body {
    font-size:22px;
    background:#f0f0f0;
    font-family: 'verdana', sans-serif;
    line-height:125%;
    color:#f0f0f0;
}

.container {
    width:320px;
    max-width:100%;
    margin:0 auto;
    padding:0;
    text-align:center;
}
 
header {
    font-size:30px;
    font-family: 'verdana', sans-serif;
}

header  a {
    text-decoration:none;
    margin:10px;
    background:#f0f0f0
    font-size:24px;
    color:#56672e;
    display:block;
    max-width:100%;
    line-height:125%;
}

header img {
    width:500px;
}

a {
    text-decoration:underline;
    color:inherit;
}

img, iframe {
    max-width:100%;
    height:auto;
}

article {
    max-width:100%;
    background:#56672e;
    color:#fofofo;
    text-align:left;
    padding:10px;
    margin:0 auto;
}

p {
    max-width:100%;
    padding:0px;
    padding-top:10px;
    padding-bottom:10px;
}

article ol li {
    padding:5px;
}

.title {
    font-size:24px;
    font-weight:600;
}

ol.touch {
    text-align:left;
  
    white-space: nowrap;
    overflow-y: hidden;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
    
    background:#56672e;
    colour:#f0f0f0
    display:block;
    width:320px;
    max-width:100%;
}

ol.touch > li {
  display:inline-block;
    width:320px;
    max-width:100%;
}

.lightbox {
    border: 5px solid rgba(0, 0, 0, 0.1);
    display: none;
    position: fixed;
    z-index: 9999;
    width: 96%;
    height: 96%;
    text-align: center;
    top: 2%;
    left: 2%;
    background:#dcf8d9;
    color:#f0f0f0;
    text-decoration:none;
    font-size:22px;
    text-align:left;
}


.lightbox:target {
  display: block;
  outline: none;
}

.lightbox .overflow {
    overflow-y: scroll;
    height:100%;
}

input, textarea {
    border:0;
    max-width:100%;
    width:500px;
}

form {
    width:500px;
    max-width:100%;
    margin:0 auto;
    text-align:left;
}

.tumblr_title {
    font-weight:800;
}

article.news ol li {
    display:none;
}

article.news ol li:nth-child(-n+2) {
    display:block;
}

article.news header {
    
padding-bottom: 25px; 
}


article strong {
    text-align:center; 
}

#help {
    display:none;
}

#help:target {
    display:block;
}

a.help {
    line-height:100px;
    width:100%:
    margin:0 auto;
    text-align:center;
}

img.hover {
    display:none;
}

ol li ul li:hover img.static {
    display:none;
}

ol li ul li:hover img.hover {
    display:block;
}



@media all and (max-width: 1000px) and (min-width: 768px) {
    .container {
    width:768px;
    }
    
    .lightbox div p {
        font-size:22px;
    }
    
    ol.touch {
    width:500px;
    }

    ol.touch > li {
    width:500px;
    }
    
    header img {
        width:500px;
    }
    
    img {
        width:500px;
    }
}

@media all and (max-width: 1680px) and (min-width: 500px) {
  body {
    font-size:20px;
  }
  
  .container {
    width:5000px;
  }
 
  header a {
    font-size:30px;
    display:inline-block;
    padding:10px;
    margin:10px;
  }
  
  header a:hover {
    background:#C2E381;
    color:#f0f0f0;
  }
  
    article {
      padding-left:25%;
      padding-right:25%;
      color:#f0f0f0
    }
  
    article.welcome{
      padding-top:50px;
      padding-bottom:50px;
      max-width:100%;
      font-size:22px;
      color:#fofofo;
    }
  
    article.welcome header {
      font-size:30px;
      color:#fofofo;
      padding-bottom:20px;
	
    }

    .lightbox div p {
        font-size:22px;
        width:500px;
        max-width:100%;
        margin:0 auto;
    }
    
    ol.touch {
    
    width:750px;
  }

    ol.touch > li {
    width:500px;
    font-size:18px;
  }
    ol.touch > li img {
        width:500px;
    }
    
    header img {
        width:500px;
    }
    
    img {
        width:500px;
    }
}