/*** Web Fonts ***/
@font-face {
    font-family: 'Cherry Cream Soda';
    src: url('/themes/wonder/fonts/CherryCreamSoda-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Averia Gruesa Libre';
    src: url('/themes/wonder/fonts/AveriaGruesaLibre-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Farsan';
    src: url('/themes/wonder/fonts/Farsan-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Geostar Fill';
    src: url('/themes/wonder/fonts/GeostarFill-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Lancelot';
    src: url('/themes/wonder/fonts/Lancelot-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Metal Mania';
    src: url('/themes/wonder/fonts/MetalMania-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Nova Flat';
    src: url('/themes/wonder/fonts/NovaFlat.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Paprika';
    src: url('/themes/wonder/fonts/Paprika-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Revalia';
    src: url('/themes/wonder/fonts/Revalia-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Dorsa';
    src: url('/themes/wonder/fonts/Dorsa-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Airstream Futuropolis';
    src: url('/themes/wonder/fonts/Airstream-Futuropolis-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Chakra Petch';
    src: url('/themes/wonder/fonts/ChakraPetch-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*** basic HTML elements ***/
html
{
font-family: 'Chakra Petch';
font-size: 12pt;
line-height: 1;
background-image: repeating-linear-gradient(to bottom right, rgba(0,0,0,0.3), rgba(0,0,0,1), rgba(0,0,0,0.3) 5em), repeating-linear-gradient(to bottom right, rgba(0,0,0,0.3), rgba(0,0,0,1), rgba(0,0,0,0.3) 7em), repeating-linear-gradient(to bottom right, rgba(0,0,0,0.3), rgba(0,0,0,1), rgba(0,0,0,0.3) 11em);
}

body
{
width: 640px;
max-width: 100%;
margin: 0 auto;
}
@media (min-width: 1024) {body {width: 1024px;}}
@media (min-width: 1366) {body {width: 1366px;}}
@media (min-width: 1920) {body {width: 1920px;}}

h1
{
font-size: 2.5em;
}

h2
{
font-size: 2em;
}

h3
{
font-size: 1.5em;
}

h1, h2, h3
{
margin: 0.25em 0.2em 0.4em;
text-align: center;
font-family: Lancelot;
}

p
{
margin: 0 0.2em 1em;
clear: both;
}

p:nth-of-type(odd) img
{
float: left;
}

p:nth-of-type(even) img
{
float: right;
}

h1 a:link, h1 a:visited, h1 a:hover, h1 a:active
{
color: black;
border: none;
}

img
{
/*max-width: 100%;*/
}

a:link, a:visited, a:hover, a:active
{
color: black;
text-decoration: none;
padding: 0 0.3em;
border-bottom: 0.1em solid blue;
border-radius: 0.3em;
}

a:visited
{
border-bottom-color: red;
}

i
{
font-style: italic;
}

em
{
font-size: 1.15em;
}

main
{
background: rgba(255,255,255,0.8);
margin: 0;
padding: 0 0 1.5em;
border: none;
display: block;/* For IE <= 11 */
}

header, nav, footer
{
margin: 0;
padding: 0;
}
/*** ***/

/*** banner, footer and titles ***/
@-webkit-keyframes headertext
{
0% {color: maroon/*rgba(255,0,0,0.6)*/}
50% {color: navy/*rgba(255,0,255,0.6)*/}
100% {color: maroon/*rgba(255,0,0,0.6)*/}
}

nav
{
font-family: Lancelot;
font-size: 1.1em;
}

footer
{
background-color: rgba(220,220,255,0.8);
padding: 1.5em 0.5em 1em;
}

#banner
{
position: relative;
width: 100%;
background-image: url('/themes/wonder/img/figures.jpg');
background-size: cover;
}

#site-img
{
height: 75px;
float: right;
border-radius: 0 0 0 50%;
margin-top: 0.5em;
padding-left: 0.1em;
}

#site-title, #site-description
{
color: maroon;
-webkit-animation: headertext 50s ease infinite;
}

#site-title
{
font-family: 'Dorsa', serif;
background: rgba(220,220,255,0.8);
font-size: 5em;
padding-top: 1.6em;
padding: 0;
text-align: center;
line-height: 0.8;
text-shadow: 6pt 6pt 12pt white, -6pt -6pt 12pt white, -6pt 6pt 12pt white, 6pt -6pt 12pt white;
}

#site-description
{
font-size: 0.5em;
}
/*** ***/

/*** Navigation ***/
nav ul, nav li
{
font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline;
}

nav ul
{
list-style: none;
}

/*** header navigation ***/

#main-nav a:link, #main-nav a:visited, #main-nav a:hover, #main-nav a:active
{
color: white;
border: none;
padding: 0;
border-radius: 0;
}

#main-nav a:hover
{
color: lilac;
}

#main-nav > ul
{
height: 160px;
}

#main-nav > ul > li
{
writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
display: inline-block;
background: rgba(110,110,128,0.8);
border: 0.25em solid white;
border-radius: 1em 1em 0 0;
padding: 0.3em;
text-align: center;
}

#main-nav div
{
font-size: 0.85em;
}

#main-nav > ul > li > ul
{
writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
display: none;
position: absolute;
width: 100%;
top: 160px;
left: 0;
border-top: 0.25em red solid;
background-image: repeating-linear-gradient(to bottom, rgba(220,220,255,0.9) 1pt, rgba(200,200,235,0.9) 4pt, rgba(180,180,195,0.9) 1pt);
}

#main-nav > ul > li:hover
{
border: 0.25em solid red;
}

#main-nav > ul > li:hover > ul
{
display: block;
}

#main-nav li li a:link, #main-nav li li a:visited, #main-nav li li a:hover, #main-nav li li a:active
{
display: inline-block;
border: 0.25em red;
border-style: none none solid none;
}

#main-nav li li
{
font-size: 0.9em;
background: rgba(0,0,0,0.25);
margin-left: 2em;
text-align: left;
border: medium red;
border-style: none none none solid;
}

#main-nav li li:hover
{
background: rgba(0,0,0,0.15);
}
/*** ***/

/*** Heading and Breadcrumb trail ***/
#breadcrumb
{
border: 0.2em solid white;
border-radius: 0 1em 1em 0;
margin-top: 0.5em;
padding: 0.5em;
text-align: center;
background: rgba(0,0,0,0.4);
float: left;
}

#breadcrumb a:link, #breadcrumb a:visited, #breadcrumb a:hover, #breadcrumb a:active
{
color: white;
display: inline-block;
}

#breadcrumb li
{
font-size: 0.95em;
}

#breadcrumb li + li
{
font-size: 0.6em;
}
/*** ***/

#copyright
{
font-family: 'Comic Relief';
font-size: 60%;
margin-top: 1.5em;
}