/* @import url('debug.css'); */

/* === ALGEMEEN =============================== */

body
{
	margin: 0;
	margin-top: 4px;
	background-color: rgb(0,0,75);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: rgb(0,0,100);
}

img
{
	border: 0;
}

a:link,
a:visited,
a:hover,
a:active,
a:focus
{	
	color: rgb(0,0,100);
	text-decoration: none;
}
a:hover
{
	color: rgb(225,0,26);
	text-decoration: underline;
}

/* === OUTER DIV ======================================= */

div#layout
{
	position: relative;
	width: 960px;
	height: 575px;
	background-color: #FFFFFF;	
	background-image: url(/img/bg/main.jpg);
}

/* === NAVIGATION BUTTONS =============================== */

div.nav_sublinks
{
	position: absolute;
	width: 336px;
	top: 540px;
	left: 624px;
}

div.nav_button_home
{
	position: absolute;
	width: 230px;
	height: 360px;
	left: 677px;
	cursor: pointer;
}

div.nav_button_normal_vorm,
div.nav_button_hover_vorm,
div.nav_button_active_vorm,
div.nav_button_normal_kleur,
div.nav_button_hover_kleur,
div.nav_button_active_kleur,
div.nav_button_normal_tekst,
div.nav_button_hover_tekst,
div.nav_button_active_tekst,
div.nav_button_normal_beeld,
div.nav_button_hover_beeld,
div.nav_button_active_beeld,
div.nav_button_normal_portfolio,
div.nav_button_hover_portfolio,
div.nav_button_active_portfolio,
div.nav_button_normal_contact,
div.nav_button_hover_contact,
div.nav_button_active_contact
{
	position: absolute;
	width: 88px;
	height: 26px;
	top: 33px;
}

div.nav_button_normal_vorm,
div.nav_button_hover_vorm,
div.nav_button_normal_kleur,
div.nav_button_hover_kleur,
div.nav_button_normal_tekst,
div.nav_button_hover_tekst,
div.nav_button_normal_beeld,
div.nav_button_hover_beeld,
div.nav_button_normal_portfolio,
div.nav_button_hover_portfolio,
div.nav_button_normal_contact,
div.nav_button_hover_contact
{
	cursor: pointer;
}

div.nav_button_normal_vorm,
div.nav_button_hover_vorm,
div.nav_button_active_vorm
{
	left: 27px;
}
div.nav_button_normal_kleur,
div.nav_button_hover_kleur,
div.nav_button_active_kleur
{
	left: 125px;
}
div.nav_button_normal_tekst,
div.nav_button_hover_tekst,
div.nav_button_active_tekst
{
	left: 223px;
}
div.nav_button_normal_beeld,
div.nav_button_hover_beeld,
div.nav_button_active_beeld
{
	left: 321px;
}
div.nav_button_normal_portfolio,
div.nav_button_hover_portfolio,
div.nav_button_active_portfolio
{
	left: 444px;
}
div.nav_button_normal_contact,
div.nav_button_hover_contact,
div.nav_button_active_contact
{
	left: 542px;
}

div.nav_button_normal_vorm
{
	background-image: url(/img/btn/normal/vorm.gif);
}
div.nav_button_normal_kleur
{
	background-image: url(/img/btn/normal/kleur.gif);
}
div.nav_button_normal_tekst
{
	background-image: url(/img/btn/normal/tekst.gif);
}
div.nav_button_normal_beeld
{
	background-image: url(/img/btn/normal/beeld.gif);
}
div.nav_button_normal_portfolio
{
	background-image: url(/img/btn/normal/portfolio.gif);
}
div.nav_button_normal_contact
{
	background-image: url(/img/btn/normal/contact.gif);
}

div.nav_button_hover_vorm
{
	background-image: url(/img/btn/hover/vorm.gif);
}
div.nav_button_hover_kleur
{
	background-image: url(/img/btn/hover/kleur.gif);
}
div.nav_button_hover_tekst
{
	background-image: url(/img/btn/hover/tekst.gif);
}
div.nav_button_hover_beeld
{
	background-image: url(/img/btn/hover/beeld.gif);
}
div.nav_button_hover_portfolio
{
	background-image: url(/img/btn/hover/portfolio.gif);
}
div.nav_button_hover_contact
{
	background-image: url(/img/btn/hover/contact.gif);
}

div.nav_button_active_vorm
{
	background-image: url(/img/btn/active/vorm.gif);
}
div.nav_button_active_kleur
{
	background-image: url(/img/btn/active/kleur.gif);
}
div.nav_button_active_tekst
{
	background-image: url(/img/btn/active/tekst.gif);
}
div.nav_button_active_beeld
{
	background-image: url(/img/btn/active/beeld.gif);
}
div.nav_button_active_portfolio
{
	background-image: url(/img/btn/active/portfolio.gif);
}
div.nav_button_active_contact
{
	background-image: url(/img/btn/active/contact.gif);
}

div.nav_arrow_left_normal,
div.nav_arrow_left_hover,
div.nav_arrow_right_normal,
div.nav_arrow_right_hover
{
	position: absolute;
	width: 28px;
	height: 28px;
	top: 503px;
	cursor: pointer;
}
div.nav_arrow_left_normal,
div.nav_arrow_left_hover
{
	left: 759px;
}
div.nav_arrow_right_normal,
div.nav_arrow_right_hover
{
	left: 797px;
}
div.nav_arrow_left_normal
{
	background-image: url(/img/btn/normal/arrow_left.gif);
}
div.nav_arrow_right_normal
{
	background-image: url(/img/btn/normal/arrow_right.gif);
}
div.nav_arrow_left_hover
{
	background-image: url(/img/btn/hover/arrow_left.gif);
}
div.nav_arrow_right_hover
{
	background-image: url(/img/btn/hover/arrow_right.gif);
}


/* === 1x3 MATRIX ================================= */

div#matrix_1x3_spot1,
div#matrix_1x3_spot2,
div#matrix_1x3_spot3
{
	position: absolute;
	top: 113px;
	width: 192px;
	height: 192px;
	text-align: left;
}

div#matrix_1x3_spot1
{
	left: 42px;
}
div#matrix_1x3_spot3
{
	left: 234px;
}
div#matrix_1x3_spot2
{
	left: 426px;
}

/* === 2x5 MATRIX ================================= */

div#matrix_2x5_spot1,
div#matrix_2x5_spot2,
div#matrix_2x5_spot3,
div#matrix_2x5_spot4,
div#matrix_2x5_spot5,
div#matrix_2x5_spot6,
div#matrix_2x5_spot7,
div#matrix_2x5_spot8,
div#matrix_2x5_spot9,
div#matrix_2x5_spot10
{
	position: absolute;
	width: 128px;
	height: 128px;
	text-align: left;
}

div#matrix_2x5_spot1
{
	left: 10px;
	top: 81px;
}
div#matrix_2x5_spot2
{
	left: 138px;
	top: 81px;
}
div#matrix_2x5_spot3
{
	left: 266px;
	top: 81px;
}
div#matrix_2x5_spot4
{
	left: 394px;
	top: 81px;
}
div#matrix_2x5_spot5
{
	left: 522px;
	top: 81px;
}

div#matrix_2x5_spot6
{
	left: 10px;
	top: 209px;
}
div#matrix_2x5_spot7
{
	left: 138px;
	top: 209px;
}
div#matrix_2x5_spot8
{
	left: 266px;
	top: 209px;
}
div#matrix_2x5_spot9
{
	left: 394px;
	top: 209px;
}
div#matrix_2x5_spot10
{
	left: 522px;
	top: 209px;
}

/* === 1x1 MATRIX ================================= */

div#matrix_1x1_spot1
{
	position: absolute;
	width: 640px;
	height: 256px;
	left: 10px;
	top: 81px;
	text-align: left;
}

/* === CORPUS TEKST =============================== */

div.corpus_tekst
{
	position: absolute;
	left: 16px;
	top: 378px;
	width: 874px;
	text-align: left;
	line-height: 24px;
	font-size: 12px;
}

/* === 2x5 HOVER SPOTS VOOR CONTACT ======================= */

div#contact div#matrix_2x5_spot1,
div#contact div#matrix_2x5_spot2,
div#contact div#matrix_2x5_spot3,
div#contact div#matrix_2x5_spot4,
div#contact div#matrix_2x5_spot5,
div#contact div#matrix_2x5_spot6,
div#contact div#matrix_2x5_spot7,
div#contact div#matrix_2x5_spot8,
div#contact div#matrix_2x5_spot9,
div#contact div#matrix_2x5_spot10
{
	width: 640px;
	height: 256px;
	left: 10px;
	top: 81px;
}

div#contact div#matrix_2x5_spot1
{
	/* background-image: url(/img/contact/spot1.jpg); */
}
div#contact div#matrix_2x5_spot2
{
	background-image: url(/img/contact/spot2.jpg);
}
div#contact div#matrix_2x5_spot3
{
	background-image: url(/img/contact/spot3.jpg);
}
div#contact div#matrix_2x5_spot4
{
	/* volgt later background-image: url(/img/contact/spot4.jpg);*/
}
div#contact div#matrix_2x5_spot5
{
	background-image: url(/img/contact/spot5.jpg);
}
div#contact div#matrix_2x5_spot6
{
	background-image: url(/img/contact/spot6.jpg);
}
div#contact div#matrix_2x5_spot7
{
	background-image: url(/img/contact/spot7.jpg);
}
div#contact div#matrix_2x5_spot8
{
	background-image: url(/img/contact/spot8.jpg);
}
div#contact div#matrix_2x5_spot9
{
	background-image: url(/img/contact/spot10.jpg); 
}
div#contact div#matrix_2x5_spot10
{
	
}

/* === 2x5 HOVER SPOTS ==================================== */

div.hoverspot_normal,
span.hoverspot_normal
{
	cursor: pointer;
}

div.hoverspot_hover,
span.hoverspot_hover,
div.hoverspot_hover a:link,
div.hoverspot_hover a:visited,
div.hoverspot_hover a:hover,
div.hoverspot_hover a:active,
div.hoverspot_hover a:focus
{
	color: rgb(225,0,26);
	cursor: pointer;
}
	
div#hover_2x5_spot1,
div#hover_2x5_spot2,
div#hover_2x5_spot3,
div#hover_2x5_spot4,
div#hover_2x5_spot5,
div#hover_2x5_spot6,
div#hover_2x5_spot7,
div#hover_2x5_spot8,
div#hover_2x5_spot9,
div#hover_2x5_spot10
{
	position: absolute;
	cursor: default; /* help */
	width: 170px;
	height: 60px;
}
div#hover_2x5_spot5,
div#hover_2x5_spot10
{
	width: 200px;
}
div#hover_2x5_spot1,
div#hover_2x5_spot2,
div#hover_2x5_spot3,
div#hover_2x5_spot4,
div#hover_2x5_spot5
{
	top: 0px;
}
div#hover_2x5_spot6,
div#hover_2x5_spot7,
div#hover_2x5_spot8,
div#hover_2x5_spot9,
div#hover_2x5_spot10
{
	top: 60px;
}
div#hover_2x5_spot1,
div#hover_2x5_spot6
{
	left: 0px;
}
div#hover_2x5_spot2,
div#hover_2x5_spot7
{
	left: 170px;
}
div#hover_2x5_spot3,
div#hover_2x5_spot8
{
	left: 340px;
}
div#hover_2x5_spot4,
div#hover_2x5_spot9
{
	left: 510px;
}
div#hover_2x5_spot5,
div#hover_2x5_spot10
{
	left: 680px;
}

div#spot_portfolio
{
    position: absolute;
	width: 640px;
	height: 256px;
	top: 81px;
	left: 10px;
	display: none;
}
	
div#spot_portfolio
{
	display: block;
}