/* What are you doing here? ;) */
/* Copyright Anny, annystudio.com */

@font-face {font-family:Poppins; src:url(fonts/PoppinsLatin-Regular.ttf); font-weight:normal; font-style:normal; font-display:fallback;}
@font-face {font-family:Poppins; src:url(fonts/PoppinsLatin-ExtraLightItalic.ttf); font-weight:normal; font-style:italic; font-display:fallback;}
@font-face {font-family:Poppins; src:url(fonts/PoppinsLatin-ExtraBold.ttf); font-weight:bold; font-style:normal; font-display:fallback;}

html, body {height:100%; margin:0; padding:0; font:medium Poppins,"Lucida Grande",Verdana,sans-serif;}
body {background-color:#FFF; color:#000;}

h1 {font-size:250%; font-weight:bold; color:#333; margin-top:2em;}
h2 {font-size:200%; font-weight:bold; color:#333; margin-top:2em;}
h3 {font-size:150%; font-weight:bold; color:#333; margin-top:2em;}
h4 {font-size:100%; font-weight:bold; color:#333; margin-top:2em;}
h1 + h2, h2 + h3, h2 + h4, h3 + h4 {margin-top:auto;}
p {line-height:normal;}
ul, ol {list-style-position:inside;}
li {margin:0.5em 0;}
kbd, code {font-style:normal;}
a, a:link, a:visited, a:hover, a:focus, a:active {color:#FFF; text-decoration:none;}
small {font-size:0.8rem;}
.externallink {margin-right:0.1em; padding-right:0.9em; background:url('images/external-link.svg') right center / 0.7em auto no-repeat;}
.centered {text-align:center;}
.epigraph {text-align:right; font-style:italic;}
.tabbed {padding-left:2rem;}
.printonly {display:none;}



/* MENU */

#menu {position:fixed; z-index:100; top:0; height:4.8rem; font-size:1.5rem; line-height:1; width:100%; margin:0; padding:0; background-color:#252628; overflow:hidden; transition:top 0.3s ease-in-out;}   /* transition for menu's hide/reveal on scroll ; z-index - to prevent ads from overlaying the menu */
#logo {width:29%; height:4.8rem; min-width:150px; display:inline-block; box-sizing:border-box; padding:0.7rem 0.5rem 0.3rem 1.5rem;}  /* font-size + top and bottom paddings = #menu height */
#logo img {display:inline-block; box-sizing:border-box; height:100%; max-height:3.8rem; max-width:100%; vertical-align:bottom;}  /* #logo img max-height + #logo top and bottom paddings = #menu height */
#menu input, #menu label {display:none;}
#menulinks {float:right; box-sizing:border-box; width:70%; text-align:right;}
#menulinks a {display:inline-block; box-sizing:border-box; padding:1.5rem 1.5rem 1.8rem;}  /* top padding + bottom padding + font size(line height:1) = #menu height */
#calendarsmenu {width:45%; background-color:#555; text-align:center; transition:background-color 0.3s ease;}
#calendarsmenu:hover {background-color:#666;}
#appsmenu {width:25%; background-color:#AAA; text-align:center; transition:background-color 0.3s ease;}
#appsmenu:hover {background-color:#BBB;}
#moremenu {width:29%; background-color:#AAA; border-left:2px solid #999; text-align:center; transition:background-color 0.3s ease;}
#moremenu:hover {background-color:#BBB;}



/* MAIN CONTENT */

/* Head Image */
.headimage {height:600px; background-position:center center; background-size:auto 100%; background-repeat:no-repeat; background-origin:border-box; background-clip:border-box;} 
.headtext {padding-top:200px; text-align:right; text-transform:uppercase;}
.headtextw, .headtextb {display:inline-block; padding:1.2rem; font-size:3rem; font-weight:bold; line-height:1;}
.headtextw {background-color:rgba(0,0,0,0.8); color:#FFF;}
.headtextb {background-color:rgba(255,255,255,0.8); color:#000;}

/* Tiles */
#tilesbg {padding-top:4.8rem; background-color:#EEE;}  /* padding-top 4.8rem - to allow for menu height */
.headimage + #tilesbg {padding-top:0;}
#tilesheader {padding:2% 2% 0; text-align:center; color:#999; font-size:2rem; text-transform:uppercase;}
#tiles {padding-top:2%; display:flex; flex-wrap:wrap; justify-content:space-between; margin:0 2%;}
.tile {background-color:#FFF; box-sizing:border-box; width:32%; margin-bottom:2%;} /* (100% - 2 * 2%) / 3  = 32% [3 items with 2 2% gaps between] - default layout, for width 1201px-1800px */
.tilelink {display:block;}
.tileimage {display:block; height:auto; max-width:100%; margin:0 auto;}
.tileheader {padding:1rem; font-size:1.5rem; color:#000; text-align:center;}
.tiletext {margin:4%; color:#000;}
.tilebutton {margin:4%; text-align:center;}
.buttonshape {display:inline-block; padding:0.5rem;}
.tiledate {margin:4%; font-size:0.8rem; color:#666; text-align:right;}
/* Tile colour styles, class name must be maximum 6 characters: */
.grey .tileheader, .grey .buttonshape {color:#FFF; background-color:#252628;}
.yellow .tileheader, .yellow .buttonshape {color:#FFF; background-color:#FC0;}
.orange .tileheader, .orange .buttonshape {color:#FFF; background-color:#F50;}
.blue .tileheader, .blue .buttonshape {color:#FFF; background-color:#09F;}
.purple .tileheader, .purple .buttonshape {color:#FFF; background-color:#609;}
.red .tileheader, .red .buttonshape {color:#FFF; background-color:#EF2121;}
.pink .tileheader, .pink .buttonshape {color:#FFF; background-color:#C36;}

/* Article */
main {min-height:75vh; min-width:300px;}
article {padding:7rem 0 2rem; margin:0 auto; max-width:1000px;}
.headimage + article {padding-top:4rem;}
article a, article a:link {color:#06C;}
article a:visited {color:#609;}
article a:hover, article a:focus, article a:active {text-decoration:underline; color:#000;}
article > p, article > ul, article > ol {max-width:800px;}
article > h1, article > h2, article > h3, article > h4, article > p, article > ul, article > ol, .notebox, blockquote, figcaption, .tablealternating, #listoftags, #lastupdate, #commenting, .padded {padding-left:5%; padding-right:5%}
.ad {margin:1em 0; text-align:left;} /* depends on the internal unit text alignment, which changes from time to time */

.notebox, blockquote {margin:1rem 0; padding-top:1rem; padding-bottom:1rem; background-color:#F5F5F5;}
.notebox .heading {margin:1.5rem 0 1rem; font-size:0.8rem; font-weight:bold;}
blockquote {background-image:url('images/quotes-left.svg'), url('images/quotes-right.svg'); background-position:top left, bottom right; background-repeat:no-repeat, no-repeat; background-size:3rem auto, 3rem auto;}
.source {color:#666; font-size:0.8rem;}
.source::before {content:"\2014\00a0";} /* CSS hex values for mdash and nbsp */

figure {display:table; margin:3rem auto 2rem; text-align:center;} 
figure img {display:inline-block; max-width:100%; height:auto; margin:0.5rem 0;}
figure figcaption {display:table-caption; caption-side:bottom; margin:0.5rem 0; color:#666; font-size:0.8rem;}

.tablealternating {border-collapse:separate; border-spacing:3px; margin:1rem 0;} 
.tablealternating th, .tablealternating td {padding:0.7rem;}
.tablealternating th {font-weight:bold; color:#FFF; background-color:#999;}
.tablealternating td {vertical-align:top;}
.tablealternating tr:nth-child(even) {background-color:#FFF;}
.tablealternating tr:nth-child(odd) {background-color:#F5F5F5;}
.tablealternating tr:nth-child(odd) td {border-top:1px solid #DDD; border-bottom:1px solid #DDD;}
.tablealternating tr:last-child td {border-bottom:0.5rem solid #999;}
.cellright {text-align:right;}

#lastupdate {margin-top:2rem; font-size:0.8rem; color:#666;}
#listoftags {margin:2rem 0 1rem;}
.tag {display:inline-block; margin-right:0.5rem; margin-top:0.5rem; padding:0.2rem 0.5rem; border-radius:0.2rem; background-color:#F5F5F5;}
.tag a::before {content:"#"; color:#6BF;}

/* Comments */
#commenting {margin:2rem 0 1rem;}
.commentinglink, .commentinglink:link, .commentinglink:visited, .commentinglink:hover, .commentinglink:focus, .commentinglink:active {display:inline-block; margin:2rem 0; padding:0.5rem 1rem; text-decoration:none; color:#FFF; background-color:#39F; cursor:pointer;}
#comments {}
.comment {font-style:italic;}
.comment + .comment {margin-top:4rem;}
.response {margin-left:3rem; color:#999;}
.response::before {content:"Anny's response: ";}



/* FOOTER */

footer a:hover {text-decoration:underline;}
#footer1 {padding:1.5rem; background-color:#252628; color:#FFF; text-align:center; line-height:2;}
#footer2 {padding:2rem; text-align:center; font-size:0.8rem; color:#666;}



@media (min-width:2401px) { /* 5 items with 4 2% gaps per row */
.tile {width:18.4%;}
.max3 .tile {width:32%;} /* for main page layout, with maximum 3 tiles per row */
}

@media (min-width:1801px) and (max-width:2400px) { /* 4 items with 3 2% gaps per row */
.tile {width:23.5%;}
.max3 .tile {width:32%;}
}

@media (min-width:601px) and (max-width:1200px) {  /* 2 items with 1 2% gap per row */
.tile {width:49%;}
}

@media (max-width:600px) {  /* 1 item with 100% width */

#menu label {display:block; float:right; cursor:pointer; font-size:3rem; line-height:0.5; padding:0.9rem; width:1em;} /* 2x font-size means the line-height should halve and padding adjusted to fit the height of #menu (3rem + 0.9 + 0.9 = 4.8rem) */

/* Tribar icon */
#tribaricon, #tribaricon::before, #tribaricon::after {background:#FFF; height:0.2em; width:100%; transition:transform 0.15s ease-in-out;}
#tribaricon {display:inline-block; margin:0.4em 0; width:1em; position:relative;}
#tribaricon::before, #tribaricon::after {content:''; left:0; position:absolute;}
#tribaricon::before {top:-0.4em;}
#tribaricon::after {bottom:-0.4em;}

/* Cross icon */
input[type=checkbox]:checked + label #tribaricon {background:transparent;}
input[type=checkbox]:checked + label #tribaricon::before {transform:translateY(0.4em) rotate(-45deg) scaleX(1.2);}
input[type=checkbox]:checked + label #tribaricon::after {transform:translateY(-0.4em) rotate(45deg) scaleX(1.2);}

/* Fold-out menu */
#menu {height:auto; min-height:4.8rem; overflow:visible;}
#logo {width:70%; max-width:70%; padding:0.7rem 0.9rem 0.3rem;}
#menulinks {float:none; width:100%; text-align:center; overflow:hidden; max-height:0; transition:max-height 0.15s ease-in-out;}  /* Transition only works if max-height defined here as a number. For syncronised action, use the same transition duration and timing function as for tribar icon */
#menulinks a {display:block; padding:0.5em 0;}
#menu input:checked ~ #menulinks {padding-bottom:1em; max-height:7em;}  /* Max-height must be a number for transition to work; use 2em per line + bottom padding */ 
#calendarsmenu, #appsmenu, #moremenu {width:100%; background-color:#252628; border-width:0;}
#calendarsmenu:hover, #appsmenu:hover, #moremenu:hover {background-color:#555;}

article {}

#tilesheader {padding:2rem 2rem 0;}
#tiles {padding-top:2rem; margin:0 2rem;}
.tile {width:100%; margin-bottom:2rem;}
}

@media print {
.printonly {display:block;}
body {min-height:initial; display:initial; background-color:initial;}  
main {min-height:0;}
h1 {margin-top:auto;}
.noprint, nav, .headimage, #tilesbg, #listoftags, #commenting, footer, noscript, .ad, #messageform {display:none;}
article {margin:0; padding:0; max-width:none;}
article a, article a:link, article a:visited, .source, .tablealternating th {color:black;}
article > p, article > ul, article > ol {max-width:none;}
article > h1, article > h2, article > h3, article > h4, article > p, article > ul, article > ol, .notebox, blockquote, figcaption, .tablealternating, #lastupdate, .padded {padding-left:0; padding-right:0; color:black;}
.notebox, blockquote {margin:1rem 0; padding-top:0; padding-bottom:0; padding-left:2rem; border-left:1px dotted black; background-color:initial;}
blockquote {background-image:none;}
.tablealternating {border-collapse:collapse; border:1px solid black;}
.tablealternating th, .tablealternating tr:nth-child(even), .tablealternating tr:nth-child(odd) {background-color:initial;}
.tablealternating tr:nth-child(odd) td {border-top:1px solid black; border-bottom:0;}
.tablealternating td {border-top:1px solid black;}
.tablealternating tr:last-child td {border-bottom:1px solid black;}
}