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

/*LAYOUT*/
body,html{height: 100%;}
body{overflow-x: hidden;}
div#site{
	position: relative; z-index: 1;
	min-height: 100%; min-width: 960px;
	}

div#background{
	position: absolute; z-index: 1; left: 0; top: 0;
	width: 100%; height: 200px;
	}

div#container{
	position: relative; z-index: 2;
	width:960px; margin:0 auto;
	}

header{
	position: relative;
	height: 340px;
	}

article{
	float:left; display: inline; width:700px; margin-bottom: 50px;
	}

aside{
	float:right; display:inline; margin-bottom: 50px;
	width:220px; border-left: 1px solid #ccc; padding-left: 20px;
	}

aside section{
	margin: 0 0 20px;}

footer{
	position: absolute; bottom: 0; left: 0; z-index: 3;
	width:100%; height: 25px; overflow: hidden;
	}

.home article{
	float: right; width: 580px;}

.home aside{
	float: left; width: 300px; padding: 0 40px 0 0; 
	border-left: 0; border-right: 1px solid #ccc;}

.home .col1{
	float: left; display: inline; clear: both;
	width: 220px; margin: 20px 80px 0 0;
	}

.home .col2{
	float: left; display: inline;
	width: 220px; margin: 20px 0 0;
	}

div#extra{
	position: absolute; z-index: 3; right: 20px; top: 140px;
	height: 200px; overflow: hidden;
	}

/* LOGO
**************************************************/
div#logo                                  { position: absolute; z-index: 2; left: 0; top: 0; width: 232px; height: 216px;
                                            background: transparent url("../images/bgLogo.png") left top no-repeat;}
div#logoTransparent                       { position: absolute; z-index: 2; left: 0; top: 0; width: 232px; height: 216px;}
div#logo a, div#logoTransparent a         { display: block; height: 143px; border: 0; text-decoration: none;}
div#logo a img, div#logoTransparent a img { margin: 15px 0 0 20px;}

/* HOOFDMENU
**************************************************/
header nav                  { float: right; position: relative; z-index: 4; margin: 20px 0 0;}

/* LEVEL ONE*/
ul.dropdown                 { position: relative; }
ul.dropdown li              { float: left; zoom: 1; font-size: 14px; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;}
ul.dropdown li.current      { font-weight: bold;}
ul.dropdown li a            { display: block; padding: 4px 8px; color: #fff; text-decoration: none; }
ul.dropdown li.hover,
ul.dropdown li:hover        { position: relative; }
ul.dropdown li.master:hover { -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomright: 0; -moz-border-radius-bottomleft: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
/* LEVEL TWO */
ul.dropdown ul              { width: 160px; visibility: hidden; position: absolute; top: 100%; left: 0; padding: 0 0 7px;
                              -webkit-border-radius: 3px; -webkit-border-top-left-radius: 0; -moz-border-radius: 3px; -moz-border-radius-topleft: 0; border-radius: 3px; border-top-left-radius: 0; 
                              -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.2); box-shadow: 3px 3px 3px rgba(0,0,0,0.2); }
ul.dropdown ul li           { font-weight: normal; float: left; display: block; font-size: 11px; margin: 0 10px; width: 140px;}
ul.dropdown ul li a         { width: 136px; display: inline-block; padding: 4px; line-height: 14px; background: url("../images/menuBorder.png") 50% bottom repeat-x;} 
ul.dropdown ul li a:hover   { font-weight: bold; }

/*BREADCRUMB
**************************************************/
div#breadCrumb              { position: absolute; left: 0; top: 295px; z-index: 2; font: 11px/20px Arial, sans-serif; color: #888; text-transform: lowercase;}
div#breadCrumb a            { color: #888; text-decoration: none; border: 0; font-weight: bold; padding: 0 0 0 10px; background: url("../images/breadcrumb.gif") 3px 5px no-repeat;}
div#breadCrumb a:hover      { color: #333; text-decoration: none; border: 0; background-position: 3px -10px}
div#breadCrumb a.index      { padding: 0; background: none;}

/*FOOTERNAV
**************************************************/
footer nav                  { width: 960px; margin: 0 auto;}
footer ul                   { float: right; display: inline;}
footer ul li                { float: left; display: inline; margin: 0 0 0 20px;}
footer ul li a              { font: 11px/25px 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                 { border-bottom: 1px solid #ccc; 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;}