/* normalize */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,pre,p { margin:0; padding:0; }
img { border:0; }
cite,code { font-style:normal; font-weight:normal; }
h1,h2,h3 { font-size:100%; font-weight:normal; }
/* end normalize*/

h2, h3 { font-family: 'Sanchez', serif; font-display: swap; margin-top: 16px; color: var(--heading-color);}
h2 {font-size: 2em;}
h3 {font-size: 1.5em; margin-left: 5px;}

span.maintitle{font-family:roboto_slabregular; font-display: swap; color: var(--logo-text-color);line-height:1;}
span.largetitle{font-size:7em;}
span.subtitle{font-size:2em;padding-left:5px;}
span.subtitle .highlight{color: var(--logo-emphasis-color);}
a.maintitle:hover{text-decoration:none;}

p { padding: 5px 5px 5px 20px; line-height: 23px; }
body { font-family: 'Bitstream Vera Sans', sans-serif; font-display: swap; font-size: 14px; color: var(--text-color); background-color: var(--background-color); }

ul, ol { margin-left:4em; }
li { padding:0.2em;}
#container { width: 960px; margin: 0 auto; }

header { padding: 20px 50px 15px 50px; border-bottom: dotted var(--text-color) 3px; margin-bottom: 16px }
header #logo { width: 600px; height: 150px; }
header #uni { float: right; font-style: italic; color: var(--de-emphasis-color); }
header p { height: 0 }

nav { position: absolute; top: 0; right: 0 }
nav ul { list-style-type: none; padding: 0; margin: 0 }
nav ul li { display: block; float: left; text-align: center; margin: 0 6px }
nav ul li a { display: block; padding: 0.75em 0.5em }

a:link, a:visited {color: var(--emphasis-color); text-decoration: none;}
a:active, a:hover {color: var(--emphasis-color); text-decoration: underline;}

iframe { display: block; margin: 0 auto }

blockquote header { padding: 0; border: 0; text-align: left; font-size: 14px;}
blockquote h2 { font-family: 'Bistream Vera Sans', sans-serif; font-display: swap; font-weight: bold; font-size: 14px; display: inline; padding: 0; margin: 0;}
blockquote .aside { font-style: italic; font-size: 0.8em; margin-bottom: 1em;}
cite { font-style: italic; }

dl { margin: 0 3em; }
dt { font-weight: bold }
dd { margin-left: 2em }

#server_list, #calendar_links { font-size: 0.8em }
#server_list a::after { content: " ·" }
#server_list a:last-child::after { content: "" }

.infobox { width: 630px; clear: both; margin-top: 15px; margin-bottom: 32px; /*border: 1px solid #000*/ }
.infobox:nth-child(even) {float: right; text-align: right}
.infobox h2 { margin-top: 0 }

#posts { padding-bottom: 12px; border-bottom: 1px solid black }
.entries, .entries li { list-style-type: none; margin-left: 0.5em; padding-left: 0 }
.entries a { font-weight: bold }
.entries p { margin-left: 0; padding-left: 0 }
.meta { font-style: italic; font-size: 0.8em; color: #555 }
.pages { list-style-type: none; margin-left: 0; padding-left: 0 }
.pages li { display: inline }
.pages li.active { font-weight: bold }

/* Why can't CSS make "I want a footer at the bottom of my page" easy? */
html, body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; }
#stupid-end-marker { padding-bottom: 3em; }
footer { clear: both; position: relative; height: 3em; margin-top: -3em; padding: 0 32px }
footer h2 { font-size: 1em }

code { font-family: Inconsolata, monospace; font-display: swap; font-size: 13px }
.noticebox { padding: 1em; margin: 0 10em; border: 1px solid var(--de-emphasis-color); background-color: #dfc9bc; text-align: center }

.important { text-align: center; font-weight: bold; }

/* Fonts */
@font-face {
  font-family: 'Bitstream Vera Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Bitstream Vera Sans'), url(/static/fonts/BitstreamVeraSans.ttf) format('opentype');
}

nav#small{
    width:100%;
    background-color:#dddddd;
    max-height:40px;
    overflow:hidden;
    transition:all .3s ease;
    position:relative;
}
nav#small > ul > li{
    width:90%;
    margin:4px 5% 0 5%;
    background-color: var(--background-color);
    padding:0;
}
nav#small.expanded{
    max-height:310px;
    padding-bottom:5vw;
}
div.smallnav{
    padding: 10px 5px 10px 5px;
    height:20px;
}

img#logo{
    float:left;
    padding-right:14px;
}

h1.titleheading{
    padding-top:10px;
    padding-bottom:30px;
}


/* Style for minutes */
ul.minutes {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

ul.minutes > li {
    padding-left: 1em;
    text-indent: -1em;
}

ul.minutes > li::before {
    content: "+";
    font-family: monospace;
    font-weight: bold;
    padding-right: 5px;
}

ul.minutes > li > a:first-of-type { color: var(--text-color); }

ul.minutes > li div.hidden {display: none;}

ul.minutes > li.open::before {content: "-";}
ul.minutes > li.open div.hidden {
    display: block;
    padding-left: 1em;
}

ul.minutes > li iframe {
    width: 500px;
    height: 700px;
    margin: 0;
}

p.minutes-help {
    font-style: italic;
    text-align: center;
    color: #555;
}

/* Media queries for small screens (mobile) */
@media screen and (max-width: 960px) {
    div#container{width:100%}
    iframe#calendar{width:100%}
}
@media screen and (max-width: 700px) {
    /* Stop alternating the infoboxes below 700px, just centre align them */
    .infobox:nth-child(odd), .infobox {width:100%;text-align:center;} 
    /* overly verbose selector because cascading isn't working properly */
    .infobox >p{padding:5px 5px 5px 5px;}
    h2,h3{width:100%;text-align:center;}
    h2{font-size:1.4em;}
    h3{font-size: 1.2em;}
}
@media screen and (min-width: 740px) {
    img#logo{width:150px;height:150px;display:inline-block;}
}
@media screen and (max-width: 740px) {
    /* Logo space becomes scarce at 740 px*/
    img#logo{display:none;}
    span.largetitle{font-size:20vw;}
    span.subtitle{font-size:5vw;}
    header{padding:20px 10px 15px 10px;}
    h1.titleheading{width:100%;text-align:center;padding-bottom:0;}
    .noticebox{margin:0;padding:2px;}
    img#bm{margin-left:auto;margin-right:auto;display:block;}
    blockquote{margin:10px 5px 10px 5px}
    dl{margin:0 5px}
}
    nav#large{display:inline-block;}
    nav#small{display:none;}
@media screen and (max-width: 490px) {
    /* 490 is about as much as the top nav bar can bare */
    nav#large{display:none;}
    nav#small{display:inline-block;}
    header { padding: 0px 0px 20px 0px; }
}
@media screen and (max-width: 390px) {
    header #uni {width:100%;text-align:center;margin-bottom:12px;}
    header {padding: 0px 0px 40px 0px;}
}