@charset "UTF-8";

/* kartonfilms.nl - website layout v2.0 */

/* framework */

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

body {
	font: 90% courier new;
	color: black;
	background: white url(images/logo_bg_v4.jpg) top center no-repeat;
	line-height: 120%;
	}
	
div#container {
	width: 960px;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	text-align: left;
	word-wrap: break-word;
	border: 0px solid yellow
	}
	
ul#menu {
	width: 100%;
	border: 0px solid green;
	height: 200px;
	display: block;
	list-style-type: none;
	margin: 0;
	padding: 0;
	}
	
	ul#menu li {
		position: absolute
		}
		
		ul#menu li span { visibility: hidden }
		ul#menu li a { display:block; text-decoration:none }
		ul#menu li#home { z-index: 1; width: 200px; height: 170px; margin-left: 20px; border: 0px solid blue } li#home > a { width: 200px; height: 170px }
		ul#menu li#werkwijze { z-index: 3; left: 60px; top: 120px; width: 297px; height: 100px; background: url(images/m_werkwijze.png) top left no-repeat } li#werkwijze > a { width: 297px; height: 100px }
		ul#menu li#portfolio { z-index: 8; left: 320px; top: 160px; width: 265px; height: 64px; background: url(images/m_portfolio.png) top left no-repeat } li#portfolio > a { width: 265px; height: 64px }
		ul#menu li#weblog { z-index: 3; left: 540px; top: 115px; width: 224px; height: 87px; background: url(images/m_weblog.png) top left no-repeat } li#weblog > a { width: 224px; height: 87px }
		ul#menu li#contact { z-index: 1; left: 730px; top: 110px; width: 210px; height: 88px; background: url(images/m_contact.png) top left no-repeat } li#contact > a { width: 210px; height: 88px }
	
	
	div#social {
		position: absolute;
		top:0;
		left: 820px;
		z-index: 55;
		width: 140px;
		height: 40px;
		border: 0px solid blue;
		}

div#tekening {
	float: right;
	border:0px solid red;
	margin-top: -206px;
	width:300px;
	height:430px
	}
	
div#content {
	float: left;
	width: 580px;
	margin: 50px 30px 0 50px;
	min-height: 500px;
	border: 0px solid purple
	}
	
div#rechterkolom {
	float: right;
	width: 280px;
	min-height: 300px;
	margin-right: 20px;
	border: 0px solid orange;
	}
	
div#footer {
	background-color: black;
	color: white;
	padding: 3px 3px 3px 9px;
	margin: 20px 20px 20px 50px;
	text-align: left;
	font-size: 80%;
	clear: both;
	overflow: hidden
	}
	
	div#footer a:link,
	div#footer a:active,
	div#footer a:visited {
		color: white;
	}
	div#footer a:hover {
		color: #f33
		}

/* headers */

	h1 {
		display:none;
		}
		
	h2,h3 {
		color: white;
		padding: 6px 4px 1px 6px;
		}

	h2 { margin-top: 32px; font-size: 130%; background-color: black;	 }
	h2 span { float: right }
	h2 > span > a { font-size: 75%; }
	h2 a:link,
	h2 a:active,
	h2 a:visited {
		color: white
		}
		// h2 a:link,
		// h2 a:active,
		// h2 a:visited { color: black }
	h2 a:hover {
		color: #f33
		}

	div.weblogitem > h2 { margin-top: -40px; width: 460px; margin-left: 100px; padding-left: 30px  }
	div.weblogitem > h5 { margin-top: -15px; padding-left: 120px }

	h3  { font-size: 110%; background-color: #333 }

	h4,h5 { font-weight: normal; margin-bottom: 10px }
	h4 { font-size: 130%; margin-top: 40px; font-weight:bold }
	h4 > em { font-size: 130%; font-style: normal; font-weight: bold }
	h5 { color: #555; border-bottom: 1px dotted grey; padding:4px }
	h6 { font-size: 100%; font-weight: bold; display: inline }


/* algemene declaraties */

	img { border: 0 }

	hr { border: 0; border-bottom: 1px dotted grey; width:100%; }

	ul, ul>li { margin: 0; padding: 0; list-style-type: none }
	ul { margin: 0 0 10px 0 }
	div#rechterkolom li { padding: 4px }

	table { width: 100%; margin: 18px }
	td { width: 33% }

	span.karakter_omschrijving { display: block; margin: -150px 0 0 142px; height: 160px }

	textarea { width: 100%; height: 200px }

	a:link,
	a:active,
	a:visited {
		font-family: verdana, arial, helvetica;
		color: black
	}
	a:hover {
		color: #f00;
	}


/* weblog */

	div.weblogitem { margin-bottom: 10px }

	div.weblogitem img.hoofdje { margin-bottom: 0; position: relative; top:11px }
	
	.commentheader { font-size: 90%; background-color: #333; color: white }
	
	iframe { display:inline }
	span>iframe { position:absolute;top:-4px; }
	
	input[name=spamchecker] { width: 14px }

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

	div#web_nav {
		width: 100%;
		border-bottom: 0px;
		display: block;
		clear: both
		}

	div#web_nav a.web_nav_knop {
		width: 282px;
		overflow: hidden;
		display: block;
		padding: 4px;
		margin: 30px 0 20px 0;
		float: left;
		background-color: #333;
		color: white;
		text-align: center
		}
		
	div.weblogshort {
		color: #555;
		margin-bottom: 100px
		}
		
/* tooltips */

	a.tooltip:hover {
		position: relative;
		}

	a.tooltip span {
		display: none;
		}

	a.tooltip:hover span {
		position: absolute;
		z-index: 100;
		background-color: #444;
		color: #fff;
		display: block;
		top: 20px;
		left: -300px;
		width: 415px;
		border: 1px dotted #555;
		padding: 10px
		}

/* portfolio */

	ul.portfolio_index { margin-bottom: 50px }
	.portfolio_index li { margin-bottom: 16px; min-height: 50px; }
	.portfolio_index img { float:left; margin: 4px 6px 4px 0; border: 1px dotted #aaa }
	.widget_index li { min-height: 50px; padding-top: 17px; }
	.widget_index img { float: left; margin: -12px 6px 0 0; border: 1px dotted #aaa }

	h2.video { 
		/* font-family: verdana,arial,helvetica; */
		color: black;
		background-color: transparent;
		font-size: 160%;
		letter-spacing: -0em;
		font-weight: bold;
		margin: 20px 0 4px 0;
		padding-bottom: 10px;
		padding-left: 0
		}
		
		.film { 	width: 745px; }

	/*  De knopjes rechts */
	/*  Deels hebben ze eigenschappen van a.tooltip.
		Omdat ze een vaste breedte hebben, kan makkelijk
		de overlay met een precies aantal pixels
		gepositioneerd worden */
	div#content h2.video > a {
				margin-top: -3px;
				font-size: 60%;
				display: block;
				padding-top: 3px;
				width: 200px;
				height: 17px;
				text-align: right;
				float: right
				}

	div#content h2.video a.info {
				width: 50px;
				}

	/* Zorgt voor het hover-effect van de linkjes zelf */
	div#content h2.video > a:link,
	div#content h2.video > a:active,
	div#content h2.video > a:visited {
				color: black;
				}
	div#content h2.video > a:hover {
				background-color: white;
				color: red;
				text-decoration: none
				}

	/* Het overlay vlak - deze overschrijft deels waarden van
		het tooltip vlak. Hun parent is h2.video > a */
	div#content h2.video a span.overlay {
		text-align: left;
		top: 26px;
		left: -80px;
		width: 260px; 
		background: url(images/blacktransbg90.png); 
		border: 1px dotted white; 
		font-weight: normal;
		}

	a.tooltip span.menu, a.tooltip span.filler {	/* helaas, wordt ge'hide' voor gebruikers van IE */
		// display/*\**/:none;
		}

	/*  Filler die het gat tussen link en vlak opvult 
		zodat je met je muis naar het vlak kan bewegen.
		De breedte moet overeenkomen met de breedte
		van h2.video > a */
	div#content h2.video a span.filler {
		position: absolute;
		top: 0;
		left: 0;
		margin-top: 0;
		width: 200px;
		height:26px;
		z-index: 50;
		filter:alpha(opacity=0);
		-moz-opacity:0;
		-khtml-opacity: 0;
		opacity: 0;
		}

	/* Alles wat ín het vlak zit */
	div#content h2.video ul { list-style-type: none; margin: 0; padding: 0 }
							/*  door de padding-top komt de tekst lager te staan,
								maar dit moet worden gecompenseerd door de margin van het plaatje */
	div#content h2.video ul li { height: 34px; margin: 0; padding: 14px 0 3px 0; overflow: visible }
	div#content h2.video ul img { margin: -14px 8px 0 0; padding: 0; border: 1px dotted white; float: left }
	
	div#content h2.video a span object ul a:link,
	div#content h2.video a span object ul a:active,
	div#content h2.video a span object ul a:visited {
							width: 100%;
							text-decoration: none;
							color: #888
							}

	div#content h2.video a span object ul a:hover { color: white }
	div#content h2.video a span object ul a:hover img { border: 1px solid white }
	div#content h2.video a span object p { font-size: 90% }