@charset "UTF-8";


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, img, ins, 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;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}





body {
	background: #667988;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 17px;
	color: #444;
}

#container {
	position:relative;
	width: 972px;
	margin: 0 auto;
	text-align: left;
}

#contentback, #contentback2 {
	position: absolute;
	top: 139px;
	left: 47px;
	width: 880px;
	height: 400px;
	background: url(images/back_content.gif);
	background-image: url(images/back_content.gif);
}

#contentback2 {
	background: url(images/back_content2.gif);
}

p {
	padding: 0 0 17px;
}

p.datum {
	font-size: 10px;
	padding-bottom: 5px;
}

em {
	font-style: italic;
}


p.klein a {
	font-size: 10px;
	padding-bottom: 5px;
}


a {
	color: #444;
}

a:hover {
	color: #000;
	text-decoration: none;
}

.content h2 {
	font-size: 16px;
	font-weight: normal;
	padding-bottom: 17px;
	color: #384451;
}

.content hr {
	clear: both;
	color: #9ba1a8;
	background-color: #9ba1a8;
	height: 1px;
	margin-bottom: 10px;
	border: none;
}

.left_column {
	position: absolute;
	left: 67px;
	top: 212px;
	width: 230px;
	height: 293px;
	font: 12px/17px Arial, Helvetica, sans-serif;
	color: #444;
}


.content {
	position: absolute;
	left: 320px;
	top: 139px;
	width: 610px;
	height: 323px;
	font: 12px/17px Arial, Helvetica, sans-serif;
	color: #444;
}

#left_column {
	position: absolute;
	left: 47px;
	top: 139px;
	width: 246px;
	height: 400px;
}

#left_column_home {
	position: absolute;
	left: 47px;
	top: 139px;
	width: 880px;
	height: 400px;
	background: url(images/home1.jpg);
}

.contactfoto {
	background: url(images/back_contact.jpg);
}

.schaduwfoto {
	background: url(images/back_schaduw.jpg);
}

.tentoonstellingenfoto {
	background: url(images/back_tentoonstellingen.jpg);
}

.opdrachtgeversfoto {
	background: url(images/back_opdrachtgevers.jpg);
}

.persfoto {
	background: url(images/back_pers.jpg);
}


.workshopsfoto {
	background: url(images/back_workshop.jpg);
}

.linksfoto {
	background: url(images/back_links.jpg);
}

#left_column p {
	padding: 0 20px 17px;
}

#left_column h1 {
	padding: 0 20px 17px;
}










#beeldcontainer {
	position: absolute;
	left: 294px;
	top: 139px;
	width: 633px;
	height: 400px;
	overflow: hidden;
}

#beelden {
	overflow: show;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	
}

.pijl_left {
	position: absolute;
	left: 25px;
	top: 375px;
	background: url(images/pijl_links.gif) no-repeat 0 0;
	width: 17px;
	height: 17px;
}

.pijl_right {
	position: absolute;
	left: 584px;
	top: 375px;
	background: url(images/pijl_rechts.gif) no-repeat 0 0;
	width: 17px;
	height: 17px;
}


a.pijl_left, a.pijl_right {
	text-indent: -999em;
}

a.pijl_left:hover, a.pijl_right:hover {
	background-position: 0 -17px;
}









table#beeld {
        margin-top: 28px;
        padding: 0;
}

table#beeld td {
	border-right: 2px solid #e5e8eb;
}

table#beeld p {
	padding: 3px 10px;
	font-size: 11px;
	line-height: 14px;
}

table#beeld p.meer {
	float: right;
	padding: 0;
	display: block;
}

table#beeld p.meer a {
	background: url(images/meer_info.gif) no-repeat;
	display: block;
	width: 30px;
	height: 22px;
	text-indent: -999em;
}

table#beeld p.meer a:hover {
		background-position: 0 -22px;

}









.beeld {
	width: 246px;
	height: 339px;
	border-right: 2px solid #e5e8eb;
	float: left;
	display: block;
}

.losse_foto {
	position: absolute;
	left: 25px;
	top: 36px;
}

.foto_rechts {
	float: right;
	margin: 0 0 17px 10px;
	border: 1px solid #ccc;
}

.foto_links {
	float: left;
	margin: 0 10px 10px 0;
	border: 1px solid #ccc;
}




/* ================ KOPPEN ========================*/


h1 {
	position: absolute;
	left: 67px;
	top: 167px;
	height: 30px;
	width: 210px;
	text-indent: -999em;
}

.left_column p {
	width: 204px;
}

.content p {
	width: 564px;
}

h1#sec {
	position: relative;
	left: 0px;
	top: 0px;
	padding-bottom: 17px;
}


h1#sec.publicaties {
	background: url(images/kop_publicaties.gif) no-repeat 0px 0px;
}

h1#sec.curriculum {
	background: url(images/kop_curriculum.gif) no-repeat 0px 0px;
}

h1#sec.opdrachten {
	background: url(images/kop_opdrachten.gif) no-repeat 0px 0px;
}

h1#sec.projecten {
	background: url(images/kop_projecten.gif) no-repeat 0px 0px;
}




h1#sec.contact {
	background: url(images/kop_contact.gif) no-repeat 0px 0px;
}

h1#sec.workshops {
	background: url(images/kop_workshops.gif) no-repeat 0px 0px;
}



h1.weblog {
	background: url(images/kop_weblog.gif) no-repeat 0px 0px;
}

h1#sec.pers {
	background: url(images/kop_pers.gif) no-repeat 0px 0px;
}

h1#sec.links {
	background: url(images/kop_links.gif) no-repeat 0px 0px;
}

h1#sec.OPDRACHTEN {
	background: url(images/kop_opdrachtgevers.gif) no-repeat 0px 0px;
}

h1#sec.tentoonstellingen {
	background: url(images/kop_tentoonstellingen.gif) no-repeat 0px 0px;
}


h1#weblog {
	position: relative;
	left: 17px;
	top: 37px;
	padding-bottom: 30px;
	background: url(images/kop_weblog.gif) no-repeat 0px 0px;
}

h1#grafmonumenten {
	background: url(images/kop_gedenkbeelden.gif) no-repeat 0px 0px;
}

h1#mozaieken {
	background: url(images/kop_mozaieken.gif) no-repeat 0px 0px;
}

h1#schilderijen {
	background: url(images/kop_schilderijen.gif) no-repeat 0px 0px;
}

h1#vloerkleden {
	background: url(images/kop_vloerkleden.gif) no-repeat 0px 0px;
}

h1#keramiek {
	background: url(images/kop_keramiek.gif) no-repeat 0px 0px;
}

h1#deschaduwblijft {
	background: url(images/kop_deschaduwblijft.gif) no-repeat 0px 0px;
}

h1#grafmonumenten {
	background: url(images/kop_grafmonumenten.gif) no-repeat 0px 0px;
}


h1#projecten {
	background: url(images/kop_projecten.gif) no-repeat 0px 0px;
}






ul#mainnav {
	position: absolute;
	width: 800px;
	height: 21px;
	left: 151px;
	top: 118px;
	background: url(images/back_mainnav.gif) no-repeat;
}

ul#mainnav li {
	float: left;
	padding-right: 29px;
}

ul#mainnav li a, ul#subnav li a {
	text-indent: -999em;
	display: block;
}

ul#mainnav li a:hover, ul#mainnav li.active a, ul#subnav li a:hover, ul#subnav li.active a {
	background-position: 0 -21px;
}

li#weblog a {
	background: url(images/but_weblog.gif) 0 0 no-repeat;
	width: 46px;
}

li#home a {
	background: url(images/but_home.gif) 0 0 no-repeat;
	width: 37px;
}

li#grafmonumenten a {
	background: url(images/but_grafmonumenten.gif) 0 0 no-repeat;
	width: 108px;
}

li#mozaieken a {
	background: url(images/but_mozaieken.gif) 0 0 no-repeat;
	width: 67px;
}

li#schilderijen a {
	background: url(images/but_schilderijen.gif) 0 0 no-repeat;
	width: 71px;
}

li#vloerkleden a {
	background: url(images/but_vloerkleden.gif) 0 0 no-repeat;
	width: 75px;
}

li#keramiek a {
	background: url(images/but_keramiek.gif) 0 0 no-repeat;
	width: 59px;
}

li#deschaduwblijft a {
	background: url(images/but_deschaduwblijft.gif) 0 0 no-repeat;
	width: 106px;

} 

li#projecten a {
	background: url(images/but_projecten.gif) 0 0 no-repeat;
	width: 61px;

} 




ul#subnav {
	position: absolute;
	width: 500px;
	height: 18px;
	left: 321px;
	top: 148px;
	background: url(images/back_subnav.gif) no-repeat;
}

 ul#subnav li {
	float: left;
	padding-right: 15px;
}

li#volwassenen a {
	background: url(images/but_volwassenen.gif) 0 0 no-repeat;
	width: 80px;
}

li#kinderen a {
	background: url(images/but_kinderen.gif) 0 0 no-repeat;
	width: 57px;
}

li#urnen a {
	background: url(images/but_urnen.gif) 0 0 no-repeat;
	width: 153px;
}




ul#secnav {
	position: absolute;
	left: 100px;
	top: 545px;
	font: 10px Arial, Helvetica, sans-serif;
}

ul#secnav li {

	float: left;
	padding: 0 9px;

	border-right: 1px solid #8b9299;
}

ul#secnav li.last {
	border-right: none;
}

ul#secnav li a {
	text-decoration: none;
	color: #c7d1db;
}

ul#secnav li a:hover {
	text-decoration: underline;
	color: #fff;
}






a.mijnman {
	background: url(images/back_mijnman.gif) 0 0 no-repeat transparent;
	text-indent: -999em;
	width: 183px;
	height: 19px;
	display: block;
	position: absolute;
	left: 740px;
	top: 542px;
}

a.mijnman:hover {
  background-position:0 -19px;
}



 .popup {
 	display: none;
	position: absolute;
	left: 313px;
	top: 157px;
	width: 599px;
	height: 375px;
	background: url(images/popup_back.png) 0 0 no-repeat;
}

.popup_content {
	position: absolute;
	left: 15px;
	top: 30px;
	width: 573px;
	overflow: hidden;
}

.popup_content .scrolling {
	padding-right: 30px;
	width: 538px;
	text-align: center;
}

.popup_content .scrolling h2 {
	padding:  8px 30px 8px 0 ;
	width: 538px;
	text-align: left;
	font-size: 14px;
	font-weight: bold;
}

.popup_content .scrolling p {
	padding: 0 30px 20px 0;
	width: 558px;
	text-align: left;
}

.popup_content .scrolling img {
	padding: 0 0 10px;
}


.popup a.sluit {
	display: block;
	position: absolute;
	left: 567px;
	top: 4px;
	background:url(images/but_uit.gif) 0 0 no-repeat transparent;
	width: 22px;
	height: 23px;
	text-indent: -999em;
}

.popup a.sluit:hover {
	background-position:0 -23px;
}

/*--- toegevoegd voor animatie ---*/
#animation {
    position: relative;
    height: 400px;
    width: 880px;
}
#animation img {
    position: absolute;
    height: 400px;
    width: 880px;
}