@import url("reset.css");
@import url("layoutmodellen.css");

/*SUPERSIZED*/
#loading {display: none;}
#supersize{position:fixed;}
#supersize img, #supersize a{ height:100%; width:100%; position:absolute; z-index: 0;}
#supersize .prevslide, #supersize .prevslide img{z-index: 1;}
#supersize .activeslide, #supersize .activeslide img{z-index: 2;}
#pattern{ position: absolute; left: 0; top: 0; z-index: 1; height: 100%; width: 100%;}

/*LAYOUT*/
body,html{height: 100%; overflow: hidden;}

div#scroll{
	position: absolute; left: 0; top: 0; z-index: 3;
	height: 100%; width: 100%; overflow: auto; overflow-x: hidden;
	background: url("../images/spacer.gif");
	}

div#site{
	position: relative; z-index: 1;
	float: left; display: inline;
	min-height: 100%; width: 100%; min-width: 960px;
	}

div#background{
	position: absolute; z-index: 1; left: 0; top: 0;
	width: 100%; height: 20px;
	filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity: 0.7; opacity: 0.7;
	}

footer, div#footerBg{
	position: absolute; z-index: 3; bottom: 0; left: 0;
	width:100%; height: 100px; padding: 0; overflow: hidden;
	}

div#footerBg{z-index: 1;}

/* SITE
**************************************************/
div#container{
	position: relative; z-index: 2;
	width:916px; margin:65px auto 0;
	}

div#content{
	position: relative; z-index: 1;
	margin: 0 0 100px 176px;
	width: 740px; min-height: 600px;
	background: transparent url("../images/bgContent.png") left top repeat-y;
	}

	header{
		position: relative;
		height: 320px; margin: 0 20px;
		}

		div#headerBg1, div#headerBg2{
			position: absolute; left: 0; top: 0; z-index: 3;
			height: 270px; width: 10px;
			background: url("../images/headerBg1.png") left top no-repeat;
			}

		div#headerBg2{
			left: auto; right: 0;
			background: url("../images/headerBg2.png") left top no-repeat;
			}

		div#extra{
			position: absolute; right: -10px; top: 120px; z-index: 4;
			height: 210px; width: 350px;
			}

	div#box{
		background: url("../images/bgBox.jpg") 434px top repeat-y;
		margin: 0 35px 20px;
		}

	article{
		float: left; display: inline;
		width: 420px; margin: 0;
		}
	aside{
		float: right; display: inline;
		width: 220px; margin: 0;
		}

	section{
		margin: 0 0 20px;
		background: url("../images/dots.jpg") left bottom repeat-x;
		}

div#contentTop{
	position: absolute; z-index: 3; top: -20px; left: 0;
	width: 740px; height: 20px; overflow: hidden;
	background: transparent url("../images/bgContentTop.png") left top no-repeat;
	}

div#contentBottom{
	position: absolute; z-index: 3; bottom: -20px; left: 0;
	width: 740px; height: 20px; overflow: hidden;
	background: transparent url("../images/bgContentBottom.png") left top no-repeat;
	}

/* LOGO
**************************************************/
div#logo            { position: absolute; z-index: 10; left: 50%; top: 0; height: 180px; text-align: center; width: 235px; margin-left: -250px; background: url("../images/bgLogo.png") no-repeat;}
div#logoTransparent { position: absolute; z-index: 10; left: 50%; top: 0; height: 180px; text-align: center; width: 235px; margin-left: -250px; background: transparent;}

div#logo img, div#logoTransparent img { margin-top: 5px;}

/* MENU
**************************************************/
nav, div#navTop{
	position: absolute; left: 0; top: 100px; z-index: 0;
	float:left; display: inline;
	width:186px;
	background: url("../images/bgNav.png") left bottom no-repeat;
	}

div#navTop{
	top: 75px; overflow: hidden; height: 25px;
	background: url("../images/bgNavTop.png") left bottom no-repeat;
	}

/*LEVEL ONE*/
nav ul{
	float: left; display: inline;
	margin: 0 0 25px 11px; width: 175px;
	border-top: 1px solid #ccc;
	}

nav ul li{
	float: left; display: inline; clear: left; 
	border-bottom: 1px solid #ccc; width: 175px;
	}

nav ul li a{
	display: block;
	padding: 4px 10px 4px 25px;
	text-decoration: none;
	font: 13px/15px Arial, sans-serif;
	color: #666;
	}

nav ul li.current a{
	color: #fff;
	}

/*LEVEL TWO*/
nav ul li.current ul{
	margin: 3px 0 5px; width: 175px;
	border-top: 0;
	}

nav ul li.current ul li{
	border-bottom: 0;
	}

nav ul li.current ul li a{
	display: block;
	padding: 2px 10px 2px 40px;
	text-decoration: none;
	font: 12px/15px Arial, sans-serif;
	background-image: none;
	color: #fff;
	}

nav ul li.current ul li a:hover{
	text-decoration: underline;
	}

nav ul li.current ul li.current a{
	font-weight: bold;
	}

/* FOOTER
**************************************************/
div#footerBox          { width:916px; margin:35px auto 0; color: #fff;}
div#footerTekst        { float: right; display: inline; margin: 0 20px 0 0; width: 320px;}
footer ul              { float: left; display: inline; margin: 0 0 0 196px; width: 360px;}
footer ul li           { float: left; display: inline; margin: 0 0 0 20px;}
footer ul li a         { font: 11px/17px Arial, sans-serif; text-decoration: none; border-bottom: 0;}
footer ul li.current a { font-weight: bold;}
footer ul li a:hover   { text-decoration: underline; border-bottom: 0;}

/*GASTENBOEK
**************************************************/
div#gastenboek h3 span      { color: #999; font-weight: bold; font-size: 11px; margin: 0 0 0 5px;}
div.toevoegen               { position: relative; left: -10px;}
div.reactie                 { background: url("../images/dots.jpg") left bottom repeat-x; margin: 0 0 20px;} 
div.pagingGB                { display: block; margin: 0 0 20px; }
div.navGB                   { float: right; display: inline;}
div.navGB a                 { float: left; display: inline; margin: 0 0 0 10px;}
div.navGB a.disable         { color: #999; text-decoration: none; font-weight: normal; cursor: default;}
div.reactieGB               { padding: 0 0 0 10px; margin-left: 10px; position: relative; top: -10px; border-left: 4px solid #fff;}
div.reactieGB p             { padding: 0;}

/*FOTOALBUM
**************************************************/
table.album                 { margin: 0 0 20px;}
table.album td              { padding: 0 5px 0 0; margin: 0;}
table.album td a:hover img  { filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8;}
table.albumNav              { margin: 0; position: relative; top: -20px;}