@charset "utf-8";

/* CSS RESET STIJLEN */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

img {
	margin: 0;
	padding: 0;
	border: 0;
}

ins {
	text-decoration: none;
}

del {
	text-decoration: line-through;
}

strong {
	font-weight: bold;
}

em, dfn {
	font-style: italic;
}

dfn {
	font-weight: bold;
}

:focus {
	outline: 0;
	-moz-outline: none
}

/* tabellen hebben nog wel cellspacing="0" nodig in de HTML code */
table {
	border-collapse: separate;
	border-spacing: 0;
	vertical-align: middle;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

acronym {
	font-style: normal;
	border-bottom: dotted 0.0625em #006987;
	cursor: help;
}

.hide {
	display: none;
}

pre, code {
	margin: 1.5em 0;
	white-space: pre;
	font: 115% monospace;
}

pre, code, tt {
	font: 1em 'andale mono', 'lucida console', monospace; 
	line-height: 1.5;
} 

sup, sub {
	line-height: 0;
}

hr {
	background: #ccc;
	color: #ccc;
	clear: both;
	float: none;
	width: 100%;
	height: 0.1em;
	margin: 0 0 1.45em;
	border: none;
}

/* hyperlinks */

a {
	color: #FF7F00;
	font-weight: normal;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}


/* BODY */

body {
	background: #fff;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Lucida, Helvetica, Arial, Tahoma, clean, sans-serif;
	font-size: 16px; /* browser default */
	line-height: 1.125em; /* 16x1.125=18px */
}

body.home {
	background: #000;
}


/* MAIN */

#main {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1000px;
	height: 652px;
	margin-left: -520px;
	margin-top: -346px;
	overflow: hidden;
	background: #000;
	border: 20px solid #000;
}

body.home #main {
	width: 556px;
	height: 441px;
	margin-left: -273px;
	margin-top: -230px;
	border: 0;
}


/* HEADER */

#header {
	position: relative;
	overflow: hidden;
	width: 1000px;
	height: 90px;
	clear: both;
	font-family: "Helvetica Neue", Helvetica, Arial, Tahoma, clean, sans-serif;
}

body.studio-hoogtij #header,
body.contact #header {
	height: 113px;
}

#header-boven {
	display: none;
}

#header-links {
	position: absolute;
	left: 0;
	top: 24px;
	width: 466px;
	height: 71px;
}

#header-links h2 {
	position: relative;
	overflow: hidden;
	font-size: 53px;
	line-height: 71px;
	width: 466px;
	height: 71px;
	text-indent: -9999px;
}

body.ons-werk #header-links h2 {
	background: url(../gfx/header_links_ons_werk.gif) no-repeat left top;
}

body.contact #header-links h2 {
	background: url(../gfx/header_links_contact.gif) no-repeat left top;
}

body.studio-hoogtij #header-links h2 {
	background: url(../gfx/header_links_studio_hoogtij.gif) no-repeat left top;
}

#header-rechts-1 {
	position: absolute;
	right: 0;
	top: 33px;
	width: 156px;
	height: 23px;
	overflow: hidden;
}

#header-rechts-2 {
	position: absolute;
	right: 0;
	top: 60px;
	width: 156px;
	height: 23px;
	overflow: hidden;
}

#header-rechts-1 a,
#header-rechts-2 a {
	display: block;
	overflow: hidden;
	width: 156px;
	height: 23px;
	text-indent: -9999px;
	background-repeat: no-repeat;
	background-position: 0 0;
}

body.ons-werk #header-rechts-1 a,
body.contact #header-rechts-1 a {
	background-image: url(../gfx/header_rechts_studio_hoogtij.gif);
}

body.ons-werk #header-rechts-2 a,
body.studio-hoogtij #header-rechts-2 a {
	background-image: url(../gfx/header_rechts_contact.gif);
}

body.contact #header-rechts-2 a,
body.studio-hoogtij #header-rechts-1 a {
	background-image: url(../gfx/header_rechts_ons_werk.gif);
}

#header-rechts-1 a:hover,
#header-rechts-2 a:hover {
	background-position: 0 -33px;
}


/* MENU */

#menu {
	position: relative;
	overflow: hidden;
	width: 990px;
	height: 35px;
	border-bottom: 3px solid #000;
	clear: both;
}

body.home #menu {
	width: 500px;
	margin-bottom: 80px;
}

#menu ul {
	position: relative;
	overflow: hidden;
	text-align: left;
	height: 35px;
	padding-left: 1px;	
	list-style: none;
	background: url(../gfx/menu_lijn.gif) no-repeat 0 52%;
}

body.home #menu ul {
	background: none;
}

#menu ul li {
	position: relative;
	float: left;
	height: 35px;
	padding-right: 1px;	
	background: url(../gfx/menu_lijn.gif) no-repeat 100% 52%;
}

body.home #menu ul li {
	padding: 0;
	background: none;
}

#menu li#menu-ons-werk,
#menu li#menu-studio-hoogtij {
	margin-right: 52px;
}

#menu li a {
	height: 35px;
	display: block;
	position: relative;
	text-align: center;
	font-size: 16px;
	line-height: 35px;
	text-indent: -9999px;
	background-repeat: no-repeat;
}

#menu li#menu-brochures a {
	width: 102px;
	background-image: url(../gfx/menu_brochures.gif);
}

#menu li#menu-logos a {
	width: 68px;
	background-image: url(../gfx/menu_logos.gif);
}

#menu li#menu-huisstijlen a {
	width: 101px;
	background-image: url(../gfx/menu_huisstijlen.gif);
}

#menu li#menu-websites a {
	width: 92px;
	background-image: url(../gfx/menu_websites.gif);
}

#menu li#menu-affiches a {
	width: 85px;
	background-image: url(../gfx/menu_affiches.gif);
}

#menu li#menu-advertenties a {
	width: 118px;
	background-image: url(../gfx/menu_advertenties.gif);
}

#menu li#menu-radio a {
	width: 62px;
	background-image: url(../gfx/menu_radio.gif);
}

#menu li#menu-acties a {
	width: 69px;
	background-image: url(../gfx/menu_acties.gif);
}

#menu li#menu-diversen a {
	width: 88px;
	background-image: url(../gfx/menu_diversen.gif);
}

#menu li#menu-ons-werk a {
	width: 118px;
	background-image: url(../gfx/home_menu_ons_werk.gif);
}

#menu li#menu-studio-hoogtij a {
	width: 174px;
	background-image: url(../gfx/home_menu_studio_hoogtij.gif);
}

#menu li#menu-contact a {
	width: 97px;
	background-image: url(../gfx/home_menu_contact.gif);
}

#brochures #menu li#menu-brochures a,
#logos #menu li#menu-logos a,
#huisstijlen #menu li#menu-huisstijlen a,
#websites #menu li#menu-websites a,
#affiches #menu li#menu-affiches a,
#advertenties #menu li#menu-advertenties a,
#radio #menu li#menu-radio a,
#acties #menu li#menu-acties a,
#diversen #menu li#menu-diversen a,
#menu li a:hover {
	background-position: 0 -35px;
}

#brochures #menu li#menu-brochures a:hover,
#logos #menu li#menu-logos a:hover,
#huisstijlen #menu li#menu-huisstijlen a:hover,
#websites #menu li#menu-websites a:hover,
#affiches #menu li#menu-affiches a:hover,
#advertenties #menu li#menu-advertenties a:hover,
#radio #menu li#menu-radio a:hover,
#acties #menu li#menu-acties a:hover,
#diversen #menu li#menu-diversen a:hover {
	cursor: default;
}

/* CONTENTVLAK */

#middencontent {
	position: relative;
	overflow: hidden;
	width: 986px;
	height: 510px;
	border: 7px solid #fff;
	clear: both;
	background: #fff;
}

body.home #middencontent {
	width: 556px;
	height: 326px;
	border: 0;
	background: #000;
}

body.studio-hoogtij #middencontent,
body.contact #middencontent {
	height: 530px;
}

#middencontent #javascriptmelding {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 500px;
	margin-top: -88px;
	margin-left: -270px;
	padding: 20px;
	background: #FF7F00;
}

#middencontent #javascriptmelding h3 {
	color: #fff;
	font-size: 16px;
	line-height: 18px;
	padding: 0;
	margin: 0 0 8px 0;
	font-weight: bold;
}

#middencontent #javascriptmelding p {
	color: #fff;
	font-size: 13px;
	line-height: 18px;
	padding: 0;
	font-weight: bold;
}

#middencontent-links {
	position: relative;
	overflow: hidden;
	float: left;
	display: inline;
	width: 240px;
	height: 499px;
	margin: 3px 0 0 5px;
}

body.home #middencontent-links {
	float: none;
	display: block;
	margin: 0;
	width: 516px;
	height: 326px;
	background: #000;
}

body.studio-hoogtij #middencontent-links,
body.noJS #middencontent-links {
	float: left;
	width: 976px;
}

body.studio-hoogtij #middencontent-links {
	padding-right: 5px;
	height: 514px;
}

body.contact #middencontent-links {
	float: left;
	width: 240px;
	height: 514px;
}

#middencontent #contact-credits {
	position: absolute;
	left: 0;
	bottom: 0;
}

#middencontent #contact-credits p,
#middencontent #contact-credits a,
#middencontent #contact-credits a:hover {
	color: #808285;
	margin: 0;
}

#middencontent h1,
#middencontent h2,
#middencontent h3 {
	color: #000;
	font-size: 13px;
	line-height: 18px;
	padding: 2px 0 4px 0;
	font-weight: bold;
}

#middencontent h3 {
	font-size: 12px;
}

body.home #middencontent h1,
body.home #middencontent h2,
body.home #middencontent h3 {
	font-family: "Helvetica Neue", Helvetica, Arial, Tahoma, clean, sans-serif;
	width: 516px;
	text-indent: -9999px;
	display: none;
}

body.home.noJS #middencontent h1,
body.home.noJS #middencontent h2,
body.home.noJS #middencontent h3 {
	display: block;
}

body.home #middencontent h1 {
	height: 72px;
	background: url(../gfx/home_studio_hoogtij.gif) no-repeat;
}

body.home #middencontent h2 {
	height: 142px;
	background: url(../gfx/home_communicatie_en_ontwerp.gif) no-repeat;
}

body.home #middencontent h3 {
	height: 72px;
	background: url(../gfx/home_welkom.gif) no-repeat;
}

body.ons-werk #middencontent h1,
body.ons-werk #middencontent h2,
body.ons-werk #middencontent h3 {
	color: #545557;
}

#middencontent p {
	color: #3C3C3C;
	font-size: 12px;
	line-height: 18px;
	margin: 0 0 6px 0;
}

body.home #middencontent p {
	font-size: 16px;
	line-height: 24px;
	color: #fff;
	margin-bottom: 20px;
}

body.home #middencontent p strong {
	font-size: 20px;
}

body.ons-werk #middencontent p {
	color: #808285;
}

#middencontent table,
#middencontent td {
	padding: 4px;
	border: 0;
	color: #3C3C3C;
}

body.ons-werk #middencontent td {
	color: #808285;
}

#middencontent table {
	margin: 6px 0;
}

#middencontent td {
	vertical-align: top;
	font-size: 12px;
}

#middencontent th {
	padding: 4px;
	border-collapse: collapse;
	font-size: 12px;
	font-weight: bold;
	background: #3C3C3C;
	color: #fff;
	text-align: left;
	vertical-align: middle;
}

#middencontent th a,
#middencontent th a:hover {
	color: #fff;
	border: 0;
}

#middencontent th a:hover {
	text-decoration: underline;
}

#middencontent td p {
	margin: 0;
	padding: 0;
	font-size: 1em;
}

#middencontent ul {
	margin: 6px 32px 12px 29px;
	padding: 0;
}

#middencontent ul ul {
	margin-left: 24px;
}

#middencontent ul ol {
	margin-left: 27px;
}

#middencontent ul li {
	padding: 0 0 0 6px;
	margin: 0 0 6px 0;
	font-size: 12px;
	line-height: 18px;
	color: #3C3C3C;
}

body.ons-werk #middencontent ul li {
	color: #808285;
}

#middencontent ul li li {
	font-size: 1em;
	list-style-type: circle;
}

#middencontent ul#toc li a {
	border: 0;
}

#middencontent ol {
	margin: 6px 32px 12px 34px;
	padding: 0;
}

#middencontent ol ol {
	margin-left: 27px;
}

#middencontent ol ul {
	margin-left: 24px;
}

#middencontent ol li {
	padding: 0;
	margin: 0 0 6px 0;
	font-size: 12px;
	line-height: 18px;
	color: #3C3C3C;
}

body.ons-werk #middencontent ol li {
	color: #808285;
}

#middencontent ol li li {
	font-size: 1em;
}

#middencontent img {
	display: inline;
	background: transparent;
}

#middencontent-links img[align="left"] {
	margin: 5px 5px 5px 0;
}

#middencontent-links img[align="right"] {
	margin: 5px 0 5px 5px;
}

#middencontent th img,
#middencontent td img {
	margin: 0;
}

/* MP3 */

.mp3 {
	padding: 4px 0 0 0;
}

.mp3 embed,
.mp3 object {
	overflow: visible;
	display: block;
	margin: 0;
	padding: 0;
}

.mp3 div {
	color: #3c3c3c;
	font-size: 12px;
	line-height: 20px;
}

/* rechterkolom contentvlak */

#middencontent-rechts {
	position: relative;
	overflow: hidden;
	float: right;
	display: inline;
	width: 680px;
	height: 502px;
	margin: 8px 8px 0 0;
}

body.studio-hoogtij #middencontent-rechts,
body.noJS #middencontent-rechts {
	display: none;
}

body.contact #middencontent-rechts {
	display: inline;
	height: 509px;
}

/* fotogalerij */

#gallery {
	display: block;
	float: left;
	width: 680px;
	height: 475px;
	margin: 0 0 6px 0;
}

.noJS #gallery {
	display: none;
}

.slideshow {
	clear: both;
}

.slideshow span.image-wrapper {
}

.slideshow a.advance-link {
	display: block;
}

.slideshow img {
	display: block;
}

.controls {
	display: inline;
	position: relative;
	z-index: 1;
	float: left;
	width: 92px;
	height: 22px;
	margin: 0;
}

.ss-controls {
	display: block;
	position: absolute;
	top: 0;
	left: 23px;
	z-index: 3;
	width: 42px;
	height: 22px;
}

.ss-controls span {
	display: block;
	width: 42px;
	height: 22px;
	text-indent: -9999px;
	cursor: pointer;
}

.ss-controls span.play {
	background: url(../gfx/fotogalerij_afspelen.gif) no-repeat center top;
}

.ss-controls span.pause {
	background: url(../gfx/fotogalerij_pauze.gif) no-repeat center top;
}

.ss-controls span:hover {
	background-position: center bottom;
}

.nav-controls {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 88px;
	height: 22px;
}

.nav-controls a {
	display: block;
	position: absolute;
	top: 0;
	width: 15px;
	height: 22px;
	text-indent: -9999px;
}

.nav-controls a.prev {
	left: 0;
	background: url(../gfx/fotogalerij_vorige.gif) no-repeat left top;
}

.nav-controls a.next {
	right: 0;
	background: url(../gfx/fotogalerij_volgende.gif) no-repeat left top;
}

.nav-controls a:hover {
	background-position: left bottom;
}

.navigation {
	display: inline;
	float: left;
	height: 22px;
}

#middencontent-rechts ul.thumbs {
	display: inline;
	float: left;
	overflow: hidden;
	height: 22px;
	margin: 0 0 0 28px;
	padding: 0;
}

#middencontent-rechts ul.thumbs li {
	display: inline;
	float: left;
	overflow: hidden;
	height: 22px;
	line-height: 22px;
	margin: 0 6px 0 0;
	padding: 0;
	list-style: none;
}

#middencontent-rechts ul.thumbs li a {
	display: block;
	float: left;
	overflow: hidden;
	height: 22px;
	margin: 0;
	padding: 0;
}

#middencontent-rechts ul.thumbs li a img {
	margin: 0;
	padding: 0;
	border: none;
}

#middencontent-rechts ul.thumbs li a:hover img,
#middencontent-rechts ul.thumbs li.selected a img {
	margin-top: -22px;
}

#middencontent-rechts ul.thumbs a:focus {
	outline: none;
}

.pagination {
	display: inline;
	float: left;
	padding: 0 0 0 60px;
	margin: 0 0 0 23px;
	height: 22px;
	font-family: "Helvetica Neue", Helvetica, Arial, Tahoma, clean, sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-align: right;
	background: url(../gfx/fotogalerij_pagina.gif) no-repeat left top;
}

.navigation .top {
	display: none;
}

.pagination a, 
.pagination strong {
	display: block;
	float: left;
	height: 22px;
	line-height: 22px;
	padding: 0 3px;
	font-weight: bold;
}

.pagination a {
	color: #000;
}

.pagination strong,
.pagination a:hover {
	color: #FF7F00;
	text-decoration: none;
}