@import "reset.css";

body, html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    font: 62.5% "Times New Roman", Times, serif;
    color: #7558a2;
}
html {overflow: auto;}
	* html body {
	    overflow: hidden;
	    width: 100%;
	}
#container {
    position: absolute;
    width: 100%;
    height: 100%;
	overflow:hidden;
	top: 0px;
}
#main {
    position: absolute;
    right: 0px;
    height: 100%;
    overflow-y: auto;
	overflow-x: hidden;
    width: 60%;
    z-index: 50;
}
	.reverse #main {
		left: 0px;
		right: auto;
		width: 100%;	
	}
	* html .reverse #main {
	}
#content {
    padding: 20px;
    padding-top: 238px;
    width: 500px;
    position: relative;
    font-size: 1.5em;
    line-height: 150%;
}
	.reverse #content {
		float: right;
		margin-right: 40%;	
		
	}
	* html .reverse #content {
		margin-right: 20%;
	}
#side {
    width: 40%;
    position: absolute;
    left: 0px;
    top: 0px;
    text-align: right;
	z-index:90;
}
.reverse #side{
	left: auto;
	right: 16px;
	text-align: left;
}
#navigation {
    position: absolute;
    right: 10px;
    top: 240px;
    width: 300px;
    font-size: 1.7em;
}
.reverse #navigation {
	left: 16px;
	right: auto;
}
    #navigation ul {}
    #navigation ul li {
        font-weight: bold;
        margin: 0 0 10px 0;
    }
    #navigation ul li.this {
    }
    #navigation ul li a {
        color: #175d5e;
        text-decoration: none;
    }
    #navigation ul li.this a {
        color: #9dda4d;
        text-decoration: none;
    }
    #navigation ul li a:hover {
        text-decoration: underline;
    }

#header {
    width: 40%;
    z-index: 80;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 230px;
}
.reverse #header {
	left: auto;
	right:16px;
}
#header h1 {
    color: #FFF;
    font-size: 90px;
    position: absolute;
    right: -115px;
    bottom: 0px;
	height: 81px;
    text-transform:lowercase;
    font-style:italic;
}
.reverse #header h1 {
	left:-115px;
	right: auto;
}
* html #header h1 {
	font-weight: normal !important;
	overflow: hidden;
}
#paars {
    background-color: #4a3073;
    width: 100%;
    height: 230px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 10;
}
#paarsover {
    width: 100%;
    height: 230px;
    position: absolute;
    right: 16px;
    top: 0px;
    z-index: 60;
    /*
	background-color: #4a3073;
    filter:alpha(opacity=60);
    opacity: 0.6;
	*/
    background: transparent url(images/transparent.png) repeat left top;
}
* html #paarsover {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=css/images/transparent.png, sizingMethod=scale);
	background-image:none; 
}

#ballBlue {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #660066;
    background: url(images/stip.png) no-repeat left top;
    font-size: 1px;
	z-index:1002;
	cursor: hand;
}
* html #ballBlue {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=css/images/stip.png, sizingMethod=scale);
	background-image:none; 
}
/*start: content styling */
#content p {
	margin: 0 0 0.6em;
}

#content h2 {
	font-size: 1.3em;
	font-weight: bold;
	color:	#9dda4d;
	margin: 0.8em 0 0.5em 0;
}

#content h2.maintitle {
	margin-top: 0;	
}
#content h3 {
	font-size: 1.2em;
	font-weight: bold;
	color:	#7558a2;
	margin: 0.8em 0 0.3em 0;
}
#content a {
	color: #7558a2;
	text-decoration: underline;
}
#content a:hover {
	color: #175d5e;
	text-decoration: none;
}
#content ul {
	margin: 10px 0 10px 12px;
}
#content ul li {
	margin-left: 13px;
	
	list-style-type: disc;
	line-height: 120%;
	margin: 3px 0;
}
#content ul li ul {
	margin-top: 3px;
}
#content ul li li{
	margin-left: 13px;
	list-style-type: circle;
}
.beeld {
	height: 140px;
}
.enkel {

}
.serie {

}
	.serie .item {
		margin-right: 9px;
		float: left;
	}
		.reverse .serie .item {
			margin-right: 0px;
			margin-left: 9px;
			float: right;
		}
.vol {
	width: 675px;
}

.reverse .vol {
	margin-left: -180px;
}
.inline {
	display: inline;
	float: right;
	margin-bottom: 8px;
	margin-left: 8px;
	height: auto;
}
	.reverse .inline {
		float: left;
		margin-left: 0px;
		margin-right: 8px;
	}
.tekst {}



/* Gallery Styles */

#motioncontainer {
/*margin:0 auto;  Uncomment this line if you wish to center the gallery on page */
width: 675px; /* Set to gallery width, in px or percentage */
height: 140px; /* Set to gallery height */
}
.reverse #motioncontainer {
		margin-left: -180px;
}
* html #motioncontainer {
width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
}
#motioncontainer a img {
margin-right: 9px;
}
.reverse #motioncontainer a img {
margin-left: 9px;
margin-right: 0px;
}


#motioncontainer a:hover img {

}

#statusdiv {
background-color: lightyellow;
border: 1px solid gray;
padding: 2px;
position: absolute; /* Stop Editing Gallery Styles */
left: -300px;
visibility: hidden;
}

#motioncontainer a:hover {
color: red; /* Dummy definition to overcome IE bug */
}
/* End Gallery Styles */