/**
 * main.css
 *
 * Layout and tweaks for all of the structural elements within a page.
 * Typographical markup (font-size, headers, etc) is mainly handled in 'typo.css'
 */ 
@import 'typo.css';

body {
    background: linen;
    color: black;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 90%; 	/* Keep above 75% otherwise Mozilla and IE for PCs do strange things. */
	
    margin: 0;
    padding: 0;

/*	background-image: url(some_image); 
	background-repeat: no-repeat;
	background-position: top left; */
}

/* ------ Header ------- */

#header {
   padding: 2em 0 0 10px; margin: 0;
   background: royalblue;
}

#header p { line-height: 1em; font-size: 80%; color: #333; margin: 0; padding: 0; }
#header h1 { line-height: 0.8em; font-size: 2.5em; margin: 0; padding: 0; }
#header h1 a { color: black; text-decoration: none; }
#header h1 a:hover { color: black; }

#content {
    width: 75%;
    min-width: 25em;
}

#nav { font-size: 70%; margin: 0; padding-left: 10px; background: #ddd; }
#nav ul { margin: 0; padding: 0; border: none;}
#nav li { display: inline; list-style: none; linen-space: nowrap; padding: 0; }
#nav li a { color: royalblue; padding: 0 0.7em 0 0.7em; border: 2px solid #ddd; }
#nav li a:hover { 
    color: black;
    border-top: 2px solid #eee;
    border-right: 2px solid #eee;
    border-bottom: 2px solid royalblue;
    border-left: 2px solid royalblue;
    text-decoration: none; 
}

.article {
   padding: 0 5% 0 20%;
   margin: 0 0 1em 0;
}

.article .main { padding: 0; margin: 0; }

.article p { margin-top: 0; }

.article h1 {
    font-size: 1.3em;
    border-bottom: 1px solid #ddd;
    line-height: 80%;
    margin: 0 0 1em 0;
    padding: 1.5em 0 0 0;
}

.article h2 {
    font-weight: bold;
    font-size: 1.3em;
    margin: 0.5em 0 0 0;
}

.article img {
    margin: 0 1em 0 0;
    padding: 1px;
    float: left;
    border: 1px dotted royalblue;
}

#side { font-size: 75%; float: right; clear: right; width: 25%; min-width: 17em;}
#side p { line-height: 1.3em; }
#side h1 { font-size: medium; }
.sidebar {
   background: linen;
   color: royalblue;
   padding: 1ex;
   margin: 1ex 2em 1ex 0;
   border: 1px dotted #bbb;
}

.sidebar:hover {
    color: black;
    border: 1px dotted black;
}

.sidebar p {
   margin: 0 0 2ex 0;
}

.sidebar h1 {
   margin: 0 0 3px 0;
}

.sidebar h2 {
   margin: 0;
   border-bottom: 1px dotted #aae;
}

.sidebar ul {
   margin: 0 0 2ex 0;
   padding: 0;
   list-style: none inside
}

.sidebar li:before { 
   content: '> ' 
}

#footer { 
   color: royalblue;
   text-align: center;
   font-size: 0.8em;
   clear: both;   
}