/*
	kartonfilms.nl
	website layout v1.0
				*/



/* html, body, container */

	html,body {
		margin: 0;
		padding: 0;
		height: 100%
		}

	body {
		font: 90% verdana,arial,helvetica;
		color: black;
		background-color: #dfddda;
		line-height: 120%;
		text-align: center
		}

	div#container {
		position: relative;
		min-height: 100%;
		width: 745px;
		background: url(images/randen.gif) top left repeat-y white;
		padding: 0 25px;
		margin: 0 auto;
		overflow: hidden;
		text-align: left
		}


/* header, menu */

	div#header{
		width: 745px;
		height: 160px;
		background: url(images/header.jpg) top left no-repeat
		}

	div#headerwout{
		width: 745px;
		height: 160px;
		background: url(http://wouter.kartonfilms.nl/header_wouter.jpg) top left no-repeat
		}

	div#headertoobz{
		width: 745px;
		height: 160px;
		background: url(http://tobias.kartonfilms.nl/header_tobias.jpg) top left no-repeat
		}

	div#headermaart{
		width: 745px;
		height: 160px;
		background: url(http://maarten.kartonfilms.nl/header_maarten.jpg) top left no-repeat
		}

	div#headerties{
		width: 745px;
		height: 160px;
		background: url(http://ties.kartonfilms.nl/header_ties.jpg) top left no-repeat
		}

		h1{
			display: block;
			width: 200px;
			height: 130px;
			margin: 0;
			float: left;
			visibility: hidden
			}

		h2{
			width:733px;
			height:28px;
			margin:0;
			display:block;
			font-weight:bold;
			color: white;
			padding: 3px 0 0 12px;;
			text-align:left;
			overflow:hidden;
			background: url(images/subheader.gif) top left no-repeat black
			}

			h2.persoonlijk{
				background:black;
				padding-top:8px;
			}
			h2 span{visibility:hidden}

			h2.persoonlijk span{ 
				visibility: visible;
				display: block;
				float: left
				}

			h2.persoonlijk span + span{
				visibility: visible;
				display: block;
				float: right;
				font-size: 60%;
				margin-right: 20px;
				padding-top: 2px
				}

/* kolommen */

	div#bijkolom {
		width: 210px;
		margin: 15px 0 30px 0;
		padding-left: 15px;
		text-align: left;
		color: #333;
		float: left
		}

	div#hoofdkolom {
		width: 500px;
		margin: 15px 0 30px 0;
		padding-bottom: 35px	/* ruimte voor de footer! */
		text-align: left;
		float: left
		}

	div.weblogitem { 
		padding-bottom: 4px;
		border-bottom: 1px dashed gray;
		margin-bottom: 10px
		}

		div.weblogitem ul, div.weblogitem li{ list-style-type: circle }
		div.weblogitem img { margin-top: 15px }
		div#web_nav{ margin: 6px 0 10px 0 }

	div#singlekolom {
		width: 733px;
		margin: 30px 0;
		padding-bottom: 35px;
		text-align: center
		}


/* footer */

	div#footer {
		position: absolute;
		bottom: 0;
		width: 733px;		
		background-color: black;
		color: white;
		padding: 6px;
		margin-bottom: 6px;
		text-align: left;
		font-weight: bold;
		clear: both;
		overflow: hidden
		}

/* linkjes! */


	a:link { color: #444; font-weight: bold; text-decoration: none; background-color: white }
	a:visited { color: #444; font-weight: bold; text-decoration: none; background-color: white }
	a:hover { color: #ece2d2; font-weight: bold; text-decoration: none; background-color: black }
	a:active { color: #444; font-weight: bold; text-decoration: none; background-color: white }

	h2 a:link { color: #fff; text-decoration: none; background-color: black }
	h2 a:visited { color: #fff; text-decoration: none; background-color: black }
	h2 a:hover { color: #ece2d2; text-decoration: none; background-color: black }
	h2 a:active { color: #fff; text-decoration: none; background-color: black }

	.contact a:link { color: #444; font-weight: normal; text-decoration: none; background-color: white }
	.contact a:visited { color: #444; font-weight: normal; text-decoration: none; background-color: white }
	.contact a:hover { color: #ece2d2; font-weight: normal; text-decoration: none; background-color: black }
	.contact a:active { color: #444; font-weight: normal; text-decoration: none; background-color: white }

	a.img:link { border: 0; background-color: white }
	a.img:visited { border: 0; background-color: white }
	a.img:hover { border: 0; background-color: white }
	a.img:active { border: 0; background-color: white }



/* algemene declaraties */


	div#bijkolom h3 { width: 80%; font-size: 120%; margin-top: 23px }
	div#hoofdkolom h3 { width: 100%; margin-top: 20px }

	h3 {
		font: 140% Trebuchet MS, Verdana, Arial, Helvetica, monospace, Sans-Serif;
		font-weight: bold;
		text-transform: uppercase;
		padding: 2px 0;
		color: #8b7f69;
		display: block;
		border-bottom: 1px dashed gray;
		margin-bottom: 4px;
		}

	h4 {
		color: #555;
		font-size: 1.1em;
		display: block;
		width: 100%;
		z-index: 2
		}

	div.weblogitem h4 { margin: 4px 0 }

	div.weblogitem h4.weblogkopje { 
		padding: 14px 0;
		color: #999;
		font-size: 140%;
		text-align: left;
		font-weight: normal
		}

	h4.spaced { margin-top: 40px }

	.contact {
		font-size: 90%;
		line-height: 150%;
		display: block;
		margin-bottom: 2px
		}

	span.datum {
		font-size: 0.8em;
		font-color: gray;
		font-style: italic;
		text-indent: 20px
		}

	div#bijkolom ul, div#bijkolom li{ list-style-type: none; margin: 0; padding: 0 }
	div#bijkolom ul{ margin-bottom: 32px }

	img { border: 0 }

	embed { border: 1px dotted #8b7f69 }
	


/* weblog navigatie knoppen */

	span#berichten {
		width: 350px;
		text-align: center;
		display: block
		}

	div#web_nav {
		width: 500px;
		display: inline;
		border-bottom: 0px;
		text-align: center;
		float: left
		}

		a#volgend {
			width: 242px;
			overflow: hidden;
			display: block;
			padding: 4px;
			float: left
			}

		a#vorig {
			width: 242px;
			overflow: hidden;
			display: block;
			padding: 4px;
			float: right
			}