body {
	color:                 #ffffff;
 	background-color:      #517d7c; 
	background-image:      url(http://www.sirrah.ch/css/blue-grain.gif);
	background-attachment: fixed;
	background-repeat:     repeat;
	background-position:   center center;
	font-family:           verdana, sans-serif;
	font-size:             16pt;
	margin-left:           auto;
	margin-right:          auto;
	padding-left:          50px;
	padding-right:         50px;
}


h1 {
	float:                 right;
	clear:                 both;
	font-size:             24pt;
	font-weight:           bold;
	padding-bottom:        0px;
	margin-bottom:         0px;
}

h2 {
	float:                 right;
	clear:                 both;
	font-size:             16pt;
	font-weight:           bold;
	padding-bottom:        40px;
}

li.active {
	color:                 #aaaaaa;
}

a {
	color:                 #bbffdd;
	text-decoration:       none;
}

a:hover {
	color:                 #ff4444;
}

.hover:hover {
	color:                 #ff4444;
	cursor:                pointer;
}


.centered {
	text-align:            center;
}

.left {
	text-align:            left;
}

.right {
	text-align:            right;
}

.floatright {
	float:                 right;
}

.floatleft {
	float:                 left;
}

.clearleft {
	clear:                 left;
}

.clearboth {
	clear:                 both;
}


.boxed {
	padding-top:           10pt;
	padding-bottom:        10pt;
	border:                2px solid #aaaaaa;
}		  

.topalign {
	vertical-align:        top;
	display:               inline;
}

.small {
	font-size:             12pt;
}

.medium {
	font-size:             14pt;
}


.audio {
        display:               block;
	padding-left:          50px;
	padding-right:         50px;
}


.audioctrl {
        display:               block;
	height:                30px;
	width:                 100%;
	min-width:             400px;
        vertical-align:        baseline;
}

.vspace {
        width:                 100%;
        height:                100px;
	clear:                 both;
}

.nowrwap {
        white-space:           nowrap;
}	


div#canvas {
	background-color:      black;
	border:                2px solid #ffffff;
	position:              fixed;
	top:                   20px;
	left:                  20px;
}

div#navigation {
        clear:                 both;
        width:                 100%;
}

@media (min-width: 1200px) {
div#navleft {
        width:                 20em;
	float:                 left;
	position:              sticky;
	position:              -webkit-sticky;
	top:                   100px;
}
div#pagecontent {
        margin-left:           20em;
}}
@media (max-width: 1200px) {
div#navleft {
	position:              left;
	clear:                 both;
	padding-bottom:        100px;
}
div#pagecontent {
	clear:                 both;
}}

div#index {
	float:                 right;
	max-width:             770px;
	max-height:            740px;
	overflow:              auto;
}


img#sirrah {
        max-width:             100%;
	height:                auto;
}	

div#cover {
	text-align:            right;
	float:                 right;
	width:                 800px;
	height:                800px;
	overflow:              auto;
}

div.image {
	background-color:      black;
	position:              absolute;
	left:                  20px;
	top:                   20px;
}

img.thumbnail {
	text-align:            center;
	vertical-align:        bottom;
	border:                2px solid #4a0098;
	margin:                20px;
}

img.thumbnail:hover {
	border:                2px solid #9bcaf6;
	cursor:                pointer;
}

div#valid {
	padding-top:           40px;
	padding-bottom:        40px;
}

div#valid > a > img {
	border:                0px;   
}

div#ie {
	padding-top:           40px;
	clear:                 left;
	color:                 #8888ff;
}