@charset: utf8;
/*
@import: url(addon.css);
*/

/* for april fools joke 2023 */
div#banner {
	margin:      300px 0 0 0 ;
	border:      2px solid #eee;
	background-color: #333;
	font-size:   3em;
	font-weight: bold;
	text-align:  center; 
	height:      9em;
	padding-top: 3em;
	
	}
	

@font-face {
   font-family:  "Open Sans";
   src:          local("Open Sans"),
                 url('./fonts/open_sans/opensans-regular.ttf') format('truetype');
   font-weight:  500;
   font-style:   normal;
   font-variant: normal;
   font-stretch: normal;
}

@font-face {
   font-family:  "Open Sans";
   src:          local("Open Sans"),
                 url('./fonts/open_sans/opensans-italic.ttf') format('truetype');
   font-weight:  500;
   font-style:   italic;
   font-variant: normal;
   font-stretch: normal;
}

@font-face {
   font-family:  "Open Sans";
   src:          local("Open Sans"),
                 url('./fonts/open_sans/opensans-bold.ttf') format('truetype');
   font-weight:  bold; /* is weight 700 */
   font-style:   normal;
   font-variant: normal;
   font-stretch: normal;
}

body {
    background-color: #111;
    color: #eee;
    margin:  0  0  0  0 ;
    padding: 0 10% 0 10%;
    font-family: "Open Sans", "sans serif";
    overflow: auto;

}


header {
    padding: 1em 0 0 0;
    background: #333 url(tux.svg) no-repeat right top;
    background-clip: padding-box;
    background-size: 20% ;
    position: fixed;
    top:0;
    width:80%;
    border-bottom-left-radius: 1em 1em;
    border-top: 1ex solid #333;
}


header h1 {
    text-align: center;
    font-style: /*italics */ normal;
    font-variant /* small-caps */: normal;
    font-weight: bold;
    font-size: 3em;
    display:inline;

    font-family: monospace;
    
    margin: 0 0 0 1em;
}

header h2 {
    text-align: center;
    
    font-family:  monospace;
    font-style:   normal;
    font-variant: normal;
    font-weight:  normal;
    font-size:    1.5em;
    
    display:inline;
    margin: 0 0 0 1em;
}

header hgroup {
    padding: 0 0 1em 0;
}

nav {
    padding: 1ex 0 0   0;
    border-bottom-left-radius:1em;
}

nav ul {
    list-style-type: none;
    text-align:left;
    padding: 0 0 1ex 1em;
    margin:  0 0 0   0  ;
    border-bottom: solid 0.5ex #B58900;
    border-bottom-left-radius:1em;
    
}

nav li {
    display: inline;
    margin:  0 0.5em 0   0.5em;
    padding: 0 0   1ex 0  ;
}

nav a {
    text-decoration: none;
    color: #eee;
    background-color:#333;
    font-size: 1em;
    font-weight: bold;
    padding: 0 1em 0.9ex 1em;
    border-radius: 1em 1em;
    
}

nav li:hover  {
    border-bottom: 0.5ex solid #eee;
}

nav li.active  {
    border-bottom:0.5ex solid #eee;
    }


div#content h1 {
    font-weight:normal;
    color:#B58900;
    margin: 0.5em 0 0.5em 0;

}

div#content {
    margin: 12em 0 0 0;
    padding: 0 2em 2em 2em;
    border-left : 0.5ex solid #333;
    border-right: 1px dotted #333;
    border-top-left-radius : 1em 1em;
}

div#content * + h1 {
    border-top: 1px solid #333;
    padding: 1.5em 0 0 0;
}



div#content h2 {
    font-weight: normal;
}

div#content p,
div#content dd,
div#content ul,
div#content ol
    {
    max-width: 50em;
}

div#content a {
    color: #B58900;
    text-decoration: none;
    border-bottom: 1px solid #B58900;
}

blockquote {
    background-color: #333;
    margin: 0 0 0 -2em;
    padding: 1em 1em 1em 2em;
    border-top-right-radius   : 1em 1em;
    border-bottom-right-radius: 1em 1em;
    max-width: 50%;
}

#map {
    border-top   : 1ex solid #333;
    border-right : 1ex solid #333;
    border-bottom: 1ex solid #333;
    border-left  : none;
    border-top-right-radius   : 1em;
    border-bottom-right-radius: 1em;
    margin: 0 0 0 -2em;
}

em {
    font-style: italic;
    }

dt {
    margin-top: 1ex;
    font-weight: bold;
}


footer {
    position: relative;
    bottom:0;
    }

footer .silly {
    font-style: italic;
    font-size: 90%;
    color: #333;
}