/* Global Box Sizing and Font-Smoothing */	 
*, *:after, *:before {
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	-o-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

html { font-size: 100%; -webkit-text-size-adjust: 100%; 
                          -ms-text-size-adjust: 100%; }

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 0.75em;/*12px/16px */
	font-weight:400; /* Better supported than 'lighter' attribute */
	line-height:18px;
	color: #1c1c1c; /* Lighter on the eyes than #000 Black */
	margin: 0px; background: #cccccc; background-size: cover;
}

img {
	border: 0px;
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

/* ==========================================================================
   Typography stuff goes here
   ========================================================================== */
h1,h2,h3,h4,h5,h6 { font-weight: bold; margin:0; padding:0;}
/*h1 see mediaqueries*/ 
h2 {font-size: 1.2em;}
h3 {font-size: 1.1em;}
h4 {font-size: 1.0em; }
h5 {font-size: 0.83em;}
h6 {font-size: 0.75em;}

a:hover, a:active { outline: none; }
a { color: #000066; font-weight: 800; text-decoration: none;}
a:visited { color:#414141 ;  }
a:hover { color:#000; text-decoration: underline; }
.frontpage a:hover { display:inline-block; width: 100%; background-color: #778899;}

/* =============================================================================
   Main container stuff goes here and other globals
   ========================================================================== */
.container{
 background: #414141; border:1px solid #000; border-radius:10px;
	max-width:800px;width:95%;margin:0 auto;position:relative; }

	
.fancyabout { font-weight:400; text-decoration: none; }
/* =============================================================================
   Header stuff goes here
   ========================================================================== */
header {
	clear:both; 
	color:white; 
	text-align:center; 
	text-transform:uppercase; 
	display:block;
	box-shadow:inset 0px -5px 8px #000000;
	min-height:70px;
	border-radius: 10px 10px 0px 0px; 
}

.headleft {
	float: left;
}

header h1{
	float:none;
	padding-top:25px;
}

.headright {
	float: right;
}

/* =============================================================================
   Section and Article stuff goes here
   ========================================================================== */
section {
clear:both;
background-color: #fff;
}

article {
border-bottom: 1px solid black;
max-width:800px;
}

/*-------------frontpage article-------------*/

.frontpage h2 {
	padding: 5px 0 0 5px;
}

.frontpage h4 {
	padding: 5px 0 5px 20px;
	 font-style: italic;
}

/*-------------books article-------------*/
.books {
	clear: both;
	padding: 10px;
}

.cover {
	float:left;
	margin: 0 10px 0 0;
	min-width: 56px;
	min-height: 70px;
}

.download {
	float: right;
}

.download a {
	border-radius: 6px;
	box-shadow:0 0 10px #000;
	background: darkgray;  
	background: radial-gradient(#666, black);
	color: #EEE;
	text-decoration : none;
	font-weight: bold;
	padding: 5px;
}

.books h4{
 	display: inline;
	font-style: italic;
}

/*-------------books popup article-------------*/
.bookpopup h2{
	margin: 15px 15px; 
}

.bookpopup h3{
	display:inline;
}

.bookpopup p{
	display:inline;	
}

.bookpopup h4{
	border-top: 1px solid black;
}

.popupless a{
	font-weight: 100;
	border-radius: 6px;
	background: darkgray;  
	background: radial-gradient(#666, black);
	color: #EEE;
	padding: 0 5px 0;
}
/* =============================================================================
   Footer stuff goes here
   ========================================================================== */
footer
{
clear:both;
box-shadow:inset 0px 5px 8px #000000;
border-radius: 0px 0px 10px 10px; 
height:32px;
}

footer a{
	float: right;
}
/* =============================================================================
   Aside stuff goes here
   ========================================================================== */
aside
{
float: right;
width : 250px;
}

.search
{
display:none;
width : 250px;
position: absolute;
background: white;
}

/*-------------Search Aside-------------*/
.search form
{
background-color: black;
margin-top: 3px;
border-radius: 6px;
}

.search input[type=text], .search select
{
vertical-align: middle;
margin: 8px 10px;
}

.search input[type=image], .search img
{
vertical-align: middle;
float:right;
padding: 3px 2px;
}

#loading 
{
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-color: #ccc;
filter: alpha(opacity=70);
opacity: 0.70;
text-align: center;
padding-top: 120px;
}

/* =============================================================================
   Mediaquerie stuff goes here
   ========================================================================== */
/* 100px and greater */
@media only screen and (min-width: 100px) {
h1 {font-size: 1em;}
.container { width:100%; }
}
   
/* 320px and greater */
@media only screen and (min-width: 320px) {
h1 {font-size: 1.2em;}
}

/* 480px and greater */
@media only screen and (min-width: 480px) {
h1 {font-size: 1.5em;}
}

/* 810px and greater */
@media only screen and (min-width: 768px) {
h1 {font-size: 2em;}
.container { box-shadow:0 0 20px #000; }
body { margin: 5px; }
}