/* Simple CSS reset */
body, html, div, span, img, p, h1, ul, ol, li, form, a, nav, label, fieldset, input  
{ margin:0; padding:0; border:0; outline:none; font-size:100%; font:inherit; vertical-align:baseline; background:transparent; }
nav { display:block; }
body { line-height:1; }
ol,ul { list-style:none }
table { border-collapse:collapse; border-spacing:0 } 

/* Default settings, which are overridden by CSS3 media queries below, if browser supports CSS3 */

@-ms-viewport       { width:device-width; }

body { width:100%; min-width:32em; background:#fff; 
    font-family:'Open Sans',Verdana,sans-serif; font-style:normal; font-weight:400; line-height:2em; }
    
h1 { font-size:1.2em; font-weight:700; color:SteelBlue; }

br { line-height:1.2em; }

.small-line-height { line-height:1em; }

#header-container { width:100%; background-color:MidnightBlue; }

#header { max-width:38em; margin:0 auto; padding:1.85em 16px 2.45em 16px; background-color:MidnightBlue; color:white; }

.logo { font-size:3em; font-weight:700; }

.italic { font-style:italic; }

#typing-text { font-size:1.5em; letter-spacing:0.06em; }

#non-typing-text { font-size:1.5em; letter-spacing:0.06em; }

.author { font-size:80%; font-style:italic; line-height:167%; position:relative; vertical-align:baseline; top:0.5em; }

#text-container { max-width:38em; margin:0 auto; padding:3em 16px 2em 16px; }

#footer-links-container { max-width:38em; margin:0 auto; padding:0.5em 16px; border-top:1px dotted SteelBlue; display:none; } /* Only displayed at smaller screen sizes. See CSS3 media queries below */
.footer-links { font-size:80%; }
#footer-container { max-width:38em; margin:0 auto; padding:0.5em 16px; border-top:1px dotted SteelBlue; }
.footer-text { font-size:80%; }

/* For hiding elements at smaller screen sizes. Used in CSS3 media queries below  */
.hideable1st { }
.hideable2nd { }
.hideable3rd { }

#cursor { font-size:150%; font-weight:normal; position:relative; vertical-align:baseline; top:-0.05em; left:-0.2em; }

#navbar-container { width:100%; background:SkyBlue; 
    -webkit-box-shadow:0px 2px 6px rgba(0,0,0,0.5);
    -moz-box-shadow:0px 2px 6px rgba(0,0,0,0.5); 
    -ms-box-shadow:0px 2px 6px rgba(0,0,0,0.5);
    -o-box-shadow:0px 2px 6px rgba(0,0,0,0.5);
    box-shadow:0px 2px 6px rgba(0,0,0,0.5); 
    font-size:100%; letter-spacing:0.06em; line-height:200%; }
#navbar-wrapper { max-width:38em; margin:0 auto; clear:both; overflow:hidden; }

ul#navbar li {display:inline-block; float:left; margin:0; padding:0; }
ul#navbar li a {display:inline-block; float:left; width:5em; color:#386890; background-color:SkyBlue; 
    font-weight:700; text-align:center; text-decoration:none; border-left:1px solid SteelBlue; }
ul#navbar li a:hover {color:white; background:MidnightBlue; transition:background .25s ease-in-out; }
ul#navbar li a.current {color:white; background:SteelBlue; }
ul#navbar li a.current:hover { }
ul#navbar li a.final-1px-line { border-left:1px solid SteelBlue; width:0; height:2em; }

/* Unordered list needs redefining after CSS reset above */
ul.bullets  { list-style-type:disc; list-style-position:inside; padding-left:1.15em; text-indent:-1em; }

#button-container { width:50%; float:left; }
#button { display:block; margin: 0.75em 0; padding:0; 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    -ms-border-radius:5px; 
    -o-border-radius:5px; 
    border-radius:5px; }
#button a { background-color:Green; padding:0.5em 1em; line-height:200%; color:White; opacity:0.9; 
    text-decoration:none; font-weight:700; text-align:center; border-radius:5px; 
    -webkit-box-shadow:2px 2px 6px rgba(0,0,0,0.5);
    -moz-box-shadow:2px 2px 6px rgba(0,0,0,0.5); 
    -ms-box-shadow:2px 2px 6px rgba(0,0,0,0.5);
    -o-box-shadow:2px 2px 6px rgba(0,0,0,0.5);
    box-shadow:2px 2px 6px rgba(0,0,0,0.5); }
#button a:hover {color:white; background:DarkGreen; transition:background .25s ease-in-out; opacity:1; }
#button a:active {color:white; background:DarkGreen; }

/* margin-left:50% sets #top-arrow-container to the right of #button container */
#top-arrow-container { margin:0.8em 0 0 50%; vertical-align:bottom; }
#top-arrow { text-align:right; }

img { float:right; margin:2.5em 0 0 2em; 
    -webkit-box-shadow:2px 2px 6px rgba(0,0,0,0.5);
    -moz-box-shadow:2px 2px 6px rgba(0,0,0,0.5); 
    -ms-box-shadow:2px 2px 6px rgba(0,0,0,0.5);
    -o-box-shadow:2px 2px 6px rgba(0,0,0,0.5);
    box-shadow:2px 2px 6px rgba(0,0,0,0.5); }

/* Define separate styles (class="links") for links other than navbar links */
a.links:link {text-decoration:none; border-bottom:1px dotted SteelBlue; color:SteelBlue; }
a.links:visited {text-decoration:none; border-bottom:1px dotted MidnightBlue; color:MidnightBlue; }
a.links:hover {text-decoration:none; border-bottom:1px solid MidnightBlue; color:MidnightBlue; }
a.links:active {text-decoration:none; border-bottom:1px solid MidnightBlue; color:MidnightBlue; }


/* CSS3 Media queries - values replace defaults above, if browser supports CSS3  */

@media screen and (min-width: 64em) {
    body { font-size:120%; }
}


@media screen and (max-width: 64em) {
    body { font-size:100%; }
    ul#navbar li a:hover { color:#386890; background-color:SkyBlue; }
    
    ul#navbar li a.current:hover { color:white; background:SteelBlue; }
/* Avoids a hover problem on touch devices (here assumed to be below 1024px wide)
Problem occurs when you touch and drag a button, which leaves it coloured incorrectly
(in this case, MidnightBlue) */
}


@media screen and (max-width: 41em) {
    body { min-width:15em; font-size:100%; }
    #header { padding:1.25em 16px 1.75em 16px; }
    .logo { font-size:240%; }
    #typing-text {  font-size:120%; text-align:right;  }
    #cursor { font-size:110%; top:-0.05em; }
    #text-container { padding:2em 16px 2em 16px; }
    #navbar-wrapper {margin:0; padding:0; clear:both; overflow:hidden; background:transparent;}
    br { line-height:1em; }
    .hideable1st { display:none; }
}


@media screen and (max-width: 28em) {
    body { min-width:15em; font-size:100%; }
    #header { margin:0; padding:0.8em 16px 1em 16px; }
    .logo { display:block; }
    #cursor { font-size:110%; top:-0.1em; }
    ul#navbar li a {width:100%; }
    ul#navbar li {width:25%; }
    ul#navbar li a.final-1px-line { display:none; }
    img { margin:0.5em 0 0 0.5em; }
    #top-arrow-container { display:none; }
    #top-arrow { display:none; }
    #button-container { width:100%; float:none; margin:0 auto; }
    #button { margin:0 auto; text-align:center; }
    #footer-links-container { display:block; text-align:center; padding:0.5em 16px; }
    #footer-container { text-align:center; }
    .hideable2nd { display:none; }
}


@media screen and (max-width: 22em) {
    body { min-width:15em; font-size:100%; }
    #header { text-align:center; padding:0.5em 10px 0.6em 10px; }
    #cursor { font-size:95%; top:-0.05em; }
    #navbar-container { -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; box-shadow:none; }
    #navbar-wrapper {width:100%; margin:0; padding:0; background:White; }
/*    ul#navbar {display:block; float:none; clear:both; margin:0; padding:0; }   */
    ul#navbar li {width:49.5%; margin:0 1px 1px 0; }
    ul#navbar li a {width:100%; border:0; }
    ul#navbar li a.final-1px-line { display:none; }
    #text-container { padding:2em 10px 2em 10px; }
    img { margin:0.5em 0 0 0.5em; -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; box-shadow:none; }
    #button a { -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; box-shadow:none; } 
    #footer-links-container { padding:0.5em 10px; }
    #footer-container { padding:0.5em 10px; }
    .hideable3rd { display:none; }
}