/* ---------------------------------------------------------
   HTML5 Bones
   This stylesheet contains print styling and a section for 
   you to simply add your own. This is a basic template 
   after all.
   ---------------------------------------------------------*/

* {
    box-sizing: border-box;
}

body {
    background:#efefef;
    color:#000;
    font:100% 'Roboto', sans-serif;
    letter-spacing:.03em;
    }

footer {margin:1em 0;}

/* Default link styling */
a { text-decoration:none; }
a:link { color:#0052cc; }
a:visited { color:#003380; }
a:hover, a:focus { color:#80b3ff ;}
a:active { color:#003380;} 

h1 { 
    color:#0052cc;
    font-size:2.5em;
    font-weight:900;
    margin:.2em 0;
    letter-spacing:0.06em;
}

h2 {
    color:#4e4e50;
    font-size:1.75em;
    margin:.1em 0;
}

h3 {
    color:#4e4e50;
    font-size:1.5em;
    font-weight:750;
    margin:.2em 0;
    letter-spacing:0.02em;
}

h4 {
    color:#000;
    font-size:1em;
    font-weight:600;
    margin:.2em 0;
}

p {
    margin:.2em 0;
    line-height:130%;
}

section { font-size:1.4em; }

article { margin:1.5em 0em; }

#navigation {
    text-align:right;
    margin:0 auto;
    font-size:1.5em;
    font-weight:900;
    word-spacing:.5em;
}

.mobile-navigation { display:none; }

.mobile-navigation-panel { display:none; }

.navlist ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

.navlist li { 
    display:inline;
    position: relative;
    display: inline-block;
}

.mobile-navlist ul {
    list-style-type:none;
    margin:0;
    padding:0;
    text-align:left;
}

.mobile-navlist li {
    padding:0.75em;
    list-style-type:none;
}

.mobile-navlist a {
    color:#efefef;
}

.navlist li .tooltiptext {
    visibility:hidden;
    width:120px;
    top:125%;
    left:50%;
    margin-left:-60px;
    background-color:#4e4e50;
    font-size:0.5em;
    color:#efefef;
    text-align:center;
    padding:5px 0;
    border-radius:6px;
    position: absolute;
    z-index: 1;
}

.navlist li:hover .tooltiptext {
    visibility: visible;
}

.navlist .tooltiptext::after {
    content:" ";
    position:absolute;
    bottom: 100%;
    left:50%;
    margin-left:-5px;
    border-width:5px;
    border-style:solid;
    border-color:transparent transparent #4e4e50 transparent;
}

.about { 
    font-size:0.9em;
    line-height: 1.5em;
}

.pubs li {
    margin:1em 0;
    font-size:1em;
    line-height:150%;
}

.events li {
    list-style-type: square;
    margin:1em 0;
    font-size:1em;
    line-height:150%;
}

#eventslist {
    font-size:0.75em;
    margin:2em 0.5em;
}

#publist {
    font-size:0.75em;
    margin:2em 0.5em;
}

.wrap {
    width:50%;
    margin:2em auto;
    }

.navigation-wrap {
    width:50%;
    margin:2em auto;
}

.timestamp {color:#4e4e50;}

@media only screen and (max-width:700px) {
    [class*="wrap"] {
        width: 90%;
    }
    
    .navigation-wrap {
        width:100%;
        margin:0;
        color:#efefef;
        font-size:1.25em;
        z-index:1;
        position:fixed;
        background-color:#151515;
        width:100%;
        top:0;
        left:0;
    }
    
    #navigation { display:none; }
    
    .mobile-navigation {
        display:contents;
        cursor:pointer;
        width:100%;
        border:none;
        outline:none;
        transition:0.5s;
        background:none;
        font-size:1.25em;
    }
    
    .navbutton {
        text-align:left;
        padding:0.5em;
        color:#efefef;
        width:100%;
    }
    
    .mobile-navigation-panel {
        padding:0;
        margin:0;
        display:none;
        overflow:hidden;
    }
    
    .banner {
        margin-top:4.5em;
    }

    .pubs li {
        margin:1em 0;
        font-size:1em;
        line-height:150%;
    }

    .events li {
        list-style-type: square;
        margin:1em 0;
        font-size:1em;
        line-height:150%;
    }

    #eventslist {
        font-size:0.75em;
        margin:2em 0.25em;
    }

    #publist {
        font-size:0.75em;
        margin:2em 0.25em;
    }
}
    
/* ---------------------------------------------------------
   Print styles
   ---------------------------------------------------------*/
@media print {
    * {
        color:#000 !important;
        box-shadow:none !important;
        text-shadow:none !important;
        background:transparent !important;
    }
    html { background-color:#fff; }
    /* Hide navigation */
    nav { display:none; }
    
    body { font:100% 'Roboto Slab', serif; }

    /* Show link destinations in brackets after the link text */
    a[href]:after { content: " (" attr(href) ") "; }
    a[href] {
        font-weight:bold;
        text-decoration:underline;
        color:#06c;
        border:none;
    }
    /* Don't show link destinations for JavaScript or internal links */ 
    a[href^="javascript:"]:after, a[href^="#"]:after { content:""; }
    
    /* Show abbr title value in brackets after the text */
    abbr[title]:after { content: " (" attr(title) ")"; }

    figure { 
        margin-bottom:1em; 
        overflow:hidden;
    }

    figure img { border:1px solid #000; }
    
    h1 { font-weight:500; }
    
    .wrap {
    width:90%;
    margin:0.5em auto;
    }
}