/*  stylesheet */

/* ===============================================================================
   Reset
================================================================================ */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td {
	margin:0;
	padding:0;
}

/* ===============================================================================
   Basis
================================================================================ */

body {
    	font-family: 'Special Elite',sans-serif;
}

@font-face {
    font-family: 'Special Elite';
    src: url('../fonts/SpecialElite.ttf') format('truetype');
}


/* ===============================================================================
   Algemene content
================================================================================ */

/* Body  */ 
body {
	background-image: url(../images/zand.gif);
	background-repeat: repeat;
	background-color: transparent;
    	font-family: 'Special Elite',sans-serif;
	font-size: 12px;
	color: #3D3028;
	line-height: 15px;
}

a, a:visited {
	color: #3D3028;
	font-size: 12px;
	line-height: 15px;
	text-decoration: underline;
	outline: 0 none;
}

a:hover {
	color: #3D3028;
	font-size: 12px;
	line-height: 15px;
	text-decoration: underline;
	outline: 0 none;
}

a.footer:link, a.footer:active, a.footer:hover, a.footer:visited {	
	font-size: 9px;
	text-decoration: none;
	border: 0px;
}

/* ===============================================================================
   Template ontwerp stijlen
================================================================================ */

div#box {
	position: relative;
	top: 10px;
	margin: 0 auto;
	width: 1000px;
	height: auto;
	background-color: transparent;
}

div#logo {	
	position: relative;
	top: 0px;
	width: 1000px;
	height: 570px;
	background-image: url(../images/logo.jpg);
	background-repeat: no-repeat;
	background-color: transparent;
}

div#content {
	position: relative;
	top: 10px;
	left: 160px;
	width: 480px;
	height: 380px;
	z-index: 2;
	background-color: transparent;
}

/* ===============================================================================
   Hoofdmenu
================================================================================ */

/* Menu grafisch */
div#menu_grafisch {
	position: relative;
	top: 60px;
	left: 95px;
	width: 300px;
	height: 60px;
	z-index: 1;
	background-color: transparent;
}

#menu_grafisch ul {
	margin:0; 
	padding:0; 
	list-style-type:none;
}

#menu_grafisch li {
   margin: 0 !important;
   background-position: right;
}

#menu_grafisch li a {
   height: 50px;
   text-decoration: none;
}

/* Button grafisch */
#menu_grafisch li a.nav_grafisch {
	display: block; 
	width: 300px; 
	height: 60px; 
	margin-bottom: 12px;
	background: url(../images/menu_index/grafisch.png) no-repeat right;
}

#menu_grafisch li a.nav_grafisch:hover {
	background: url(../images/menu_index/grafisch_hover.png) no-repeat right;
}

#menu_grafisch li a.nav_grafisch:active {
	background: url(../images/menu_index/grafisch_on.png) no-repeat right;
}

#menu_grafisch li a.nav_grafisch span {
	display: none;
}

/* Menu webdesign */
div#menu_webdesign {
	position: relative;
	top: 170px;
	left: -5px;
	width: 250px;
	height: 50px;
	z-index: 1;
	background-color: transparent;
}

#menu_webdesign ul {
	margin:0; 
	padding:0; 
	list-style-type:none;
}

#menu_webdesign li {
   margin: 0 !important;
   background-position: right;
}

#menu_webdesign li a {
   height: 50px;
   text-decoration: none;
}

/* Button webdesign */
#menu_webdesign li a.nav_webdesign {
	display: block; 
	width: 250px; 
	height: 50px; 
	margin-bottom: 12px;
	background: url(../images/menu_index/webdesign.png) no-repeat right;
}

#menu_webdesign li a.nav_webdesign:hover {
	background: url(../images/menu_index/webdesign_hover.png) no-repeat right;
}

#menu_webdesign li a.nav_webdesign:active {
	background: url(../images/menu_index/webdesign_on.png) no-repeat right;
}

#menu_webdesign li a.nav_webdesign span {
	display: none;
}

/* Menu fotografie */
div#menu_fotografie {
	position: relative;
	top: 270px;
	left: 5px;
	width: 250px;
	height: 50px;
	z-index: 1;
	background-color: transparent;
}

#menu_fotografie ul {
	margin:0; 
	padding:0; 
	list-style-type:none;
}

#menu_fotografie li {
   margin: 0 !important;
   background-position: right;
}

#menu_fotografie li a {
   height: 50px;
   text-decoration: none;
}

/* Button fotografie */
#menu_fotografie li a.nav_fotografie {
	display: block; 
	width: 250px; 
	height: 50px; 
	margin-bottom: 12px;
	background: url(../images/menu_index/fotografie.png) no-repeat right;
}

#menu_fotografie li a.nav_fotografie:hover {
	background: url(../images/menu_index/fotografie_hover.png) no-repeat right;
}

#menu_fotografie li a.nav_fotografie:active {
	background: url(../images/menu_index/fotografie_on.png) no-repeat right;
}

#menu_fotografie li a.nav_fotografie span {
	display: none;
}

/* Menu schilderen */
div#menu_schilderen {
	position: relative;
	top: 350px;
	left: 25px;
	width: 250px;
	height: 50px;
	z-index: 1;
	background-color: transparent;
}

#menu_schilderen ul {
	margin:0; 
	padding:0; 
	list-style-type:none;
}

#menu_schilderen li {
   margin: 0 !important;
   background-position: right;
}

#menu_schilderen li a {
   height: 50px;
   text-decoration: none;
}

/* Button schilderen */
#menu_schilderen li a.nav_schilderen {
	display: block; 
	width: 250px; 
	height: 60px; 
	margin-bottom: 12px;
	background: url(../images/menu_index/schilderen.png) no-repeat right;
}

#menu_schilderen li a.nav_schilderen:hover {
	background: url(../images/menu_index/schilderen_hover.png) no-repeat right;
}

#menu_schilderen li a.nav_schilderen:active {
	background: url(../images/menu_index/schilderen_on.png) no-repeat right;
}

#menu_schilderen li a.nav_schilderen span {
	display: none;
}


/* Menu projecten */
div#menu_projecten {
	position: relative;
	top: -100px;
	left: 515px;
	width: 250px;
	height: 50px;
	z-index: 1;
	background-color: transparent;
}

#menu_projecten ul {
	margin:0; 
	padding:0; 
	list-style-type:none;
}

#menu_projecten li {
   margin: 0 !important;
   background-position: right;
}

#menu_projecten li a {
   height: 50px;
   text-decoration: none;
}

/* Button projecten */
#menu_projecten li a.nav_projecten {
	display: block; 
	width: 250px; 
	height: 50px; 
	margin-bottom: 12px;
	background: url(../images/menu_index/projecten.png) no-repeat right;
}

#menu_projecten li a.nav_projecten:hover {
	background: url(../images/menu_index/projecten_hover.png) no-repeat right;
}

#menu_projecten li a.nav_projecten:active {
	background: url(../images/menu_index/projecten_on.png) no-repeat right;
}

#menu_projecten li a.nav_projecten span {
	display: none;
}

/* Menu info */
div#menu_info {
	position: relative;
	top: -80px;
	left: 795px;
	width: 250px;
	height: 50px;
	z-index: 1;
	background-color: transparent;
}

#menu_info ul {
	margin:0; 
	padding:0; 
	list-style-type:none;
}

#menu_info li {
   margin: 0 !important;
   background-position: right;
}

#menu_info li a {
   height: 50px;
   text-decoration: none;
}

/* Button info */
#menu_info li a.nav_info {
	display: block; 
	width: 250px; 
	height: 50px; 
	margin-bottom: 12px;
	background: url(../images/menu_index/info.png) no-repeat right;
}

#menu_info li a.nav_info:hover {
	background: url(../images/menu_index/info_hover.png) no-repeat right;
}

#menu_info li a.nav_info:active {
	background: url(../images/menu_index/info_on.png) no-repeat right;
}

#menu_info li a.nav_info span {
	display: none;
}

/* Menu contact */
div#menu_contact {
	position: relative;
	top: 80px;
	left: 845px;
	width: 250px;
	height: 50px;
	z-index: 1;
	background-color: transparent;
}

#menu_contact ul {
	margin:0; 
	padding:0; 
	list-style-type:none;
}

#menu_contact li {
   margin: 0 !important;
   background-position: right;
}

#menu_contact li a {
   height: 50px;
   text-decoration: none;
}

/* Button contact */
#menu_contact li a.nav_contact {
	display: block; 
	width: 250px; 
	height: 50px; 
	margin-bottom: 12px;
	background: url(../images/menu_index/contact.png) no-repeat right;
}

#menu_contact li a.nav_contact:hover {
	background: url(../images/menu_index/contact_hover.png) no-repeat right;
}

#menu_contact li a.nav_contact:active {
	background: url(../images/menu_index/contact_on.png) no-repeat right;
}

#menu_contact li a.nav_contact span {
	display: none;
}