html{
overflow:hidden;
width: 100%;
height: 100%;
border: 0px;
margin: 0px;
padding: 0px;
}

body{
overflow: hidden;
font-family: "Copperplate light", "copperplate gothic light", "american typewriter", "Lucida Calligraphy", "modern no.20", "imprint MT shadow", "american typewriter", "helvetica";

margin: 0px;
width: 100%;
height: 100%;
padding: 0px;
}


#top{
margin-top: 20px;
padding-top: 0px;
border: 0px; 
margin-left: auto;
margin-right: auto;
width: 100%
height: 120px;
z-index: 0;
min-width: 1200px;
}



ul{
 clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;

}

.clear {clear:both}
/* remove the list style */
#nav {
	text-align: center;
    margin-top: 0;
    list-style: none;
    text-align: center;

}  

#li {
text-align: center;

}
     
    /* make the LI display inline */
    /* it's position relative so that position absolute */
    /* can be used in submenu */
    #nav li.center {
        float:left;
        display:block;
        width:auto;
        min-width: 300px; 
    	text-align: center;
        position:relative;
        z-index:500;
        margin:0 1px;
    
        
     	
    }
       
       
    #nav li.notcenter{
   display:block;
   float:left;
   list-style:none;
   margin-right:15px;
   padding-left: 15px;
   position:relative;
   right:50%;
 	
    } 
       
       
         
    /* this is the parent menu */
    #nav li a {
        display:block;
        margin-left: 0px;
        margin-right: 0px;
        padding:8px 5px 0 5px;
        font-size: 18pt;
        height:23px;
        text-decoration:none;
        color:#000000;
        text-align:left;
        overflow: visible;
        
        
    }
 
    #nav li a:hover {
        color:#999999;
    }
     
	  #nav li a:vsited {
        color:#666666;
    }
     
     
        /* submenu, it's hidden by default */
        #nav ul {
            position:absolute;
            left:0;
            display:none;
            margin:0 0 0 -1px;
            padding:0;
            padding-top: 5px;
            list-style:none ;
            text-align: left;
            
       		
            
        }
         
        #nav ul li {
            width:188px;
            height: auto;
            text-align: left;
            border-top:0px solid #fff;
            
            
        }
         
        /* display block will make the link fill the whole area of LI */
        #nav ul a {
            display:block; 
                        color:#000000;
                        font-size: 13pt;
                      
                        }
         
 
/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html #nav ul {
    margin:0 0 0 -2px;
}
 



pre{
white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; /* IE 5.5+ */
}


img{
border: 0px;
}

pre{
white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
word-wrap: break-word; /* IE 5.5+ */
}
a:link {color:#000000; text-decoration: none;}      /* unvisited link */
a:visited {color:#000000; text-decoration: none;}  /* visited link */
a:hover {color:#AAAAAA; text-decoration: none;}  /* mouse over link */
a:active {color:#CCCCCC; text-decoration: none;}  /* selected link */



#ban1{
float: left;
overflow:visible;
background-image: url('photo/all/vlek3.png');
height: 250px;
width: 250px;
position: absolute; left: -25px; top: -30px;
}

#ban4{
float: left;
overflow:visible;
background-image: url('photo/all/infovlek.png');
height: 450px;
width: 450px;
position: absolute; left: -125px; top: -50px;
background-repeat: no-repeat;
z-index: -10;
}

#bantext{
width: 100%;
height: 100px;
text-align: center;
z-index: 10;
}


#ban2{
position: absolute; right: 0; top: 0;
float: right;
overflow:visible;
background-image: url('photo/all/vlek2.png');
background-repeat: no-repeat;
background-position: right;
height: 300px;
width: 300px;
z-index: -8;
}

#ban3{
position: absolute; right: 0; top: -20px;
float: right;
overflow:visible;
background-image: url('photo/all/camvlek.png');
background-repeat: no-repeat;
background-position: right;
height: 300px;
width: 300px;
z-index: -1;
}


img .trans{
padding:0px;
margin: 0px;
border: none;
  background: transparent !important;
    border: none !important;
    padding: 0 !important;
    -moz-box-shadow: 0 0 0 !important;
    box-shadow: 0 0 0 !important;
    -webkit-box-shadow: 0 0 0 !important;
}

#phomiddle{
width: 600px;
height: 600px;
margin-left: auto;
margin-right: auto;
}

#phopic{
z-index: 0;
overflow: hidden;
position: absolute; right: 170px; top: 120px;
}

#phostrip{
z-index: 0;
overflow: auto;
position: relative; left: 1210px; top: 105px;

}

#phoword{
z-index: 0;
overflow: hidden;
position: absolute; left: 20px; bottom: 20px;
}

#phoback{
z-index: -1;
overflow: hidden;
position: relative; left: 250px; top:-666px;
}

#photos{
z-index: 1;
position: relative; left:73px; bottom:-140px;
}

#photos2{
z-index: 1;
position: relative; left:73px; bottom:-100px;
}

#photos3{
z-index: 1;
position: relative; left:73px; bottom:-100px;
}

#phomenu{
position: fixed; right: 50px; bottom: 50px;
font-size:16pt;
text-align: center;
font-family: "ocr a std", "copperplate gothic light", "Lucida Calligraphy", "modern no.20", "imprint MT shadow", "arial";

}

#infmiddle{
width: 1200px;
height: 600px;
margin-left: auto;
margin-right: auto;

}




}

#infprint{
z-index: 3;
overflow: hidden;
position: relative; left: 50px; top: 290px;
font-size: 23pt;
}

#infcontent{
z-index: -3;
overflow: hidden;
position: absolute; bottom: 170px; left:20px;
/* padding-top: 100px; */

}
#infquote{
z-index: 3;
overflow: hidden;
position: absolute; bottom: 60px; left: 50px;
font-size: 14px;
}

#infpic{
z-index: -10;
position: fixed; right: 0px; bottom: 0px;
float: right;

}

#shirt{
z-index: 0;
overflow: visible;
position: absolute; left: 0px; bottom: 0px;

}

#tshprint{
z-index: 0;
overflow: visible;
position: relative; left: 300px; top: 150px;
font-size: 23pt;
}

#tshcontent{
z-index: 0;
overflow: visible;
margin-left: auto;
margin-right: auto;
width: 500px;
position: relative; top: -68px;
}

#primiddle{
position: fixed; bottom: 0px; left: 50%;
margin-left: auto;
margin-right: auto;
height: 500px;
width: 1200px;


}

#pripic{
z-index: -2;
overflow: visible;
position: absolute; left: 0px; bottom: 0px;
}

#priprint{
font-family:  "copperplate gothic light", "Copperplate light", "american typewriter", "Lucida Calligraphy", "modern no.20", "imprint MT shadow", "american typewriter", "helvetica";
z-index: 100;
overflow: hidden;
position: absolute; bottom: 405px;  left: 285px;
font-size: 23pt;
}

#pricontent{

margin-left: auto;
margin-right: auto;
position: relative; bottom: 150px; right: 55%;
}


#mixed{z-index:-1;overflow: hidden;position: absolute; left: 0px; bottom: 0px; }

#mixed2{z-index:-1;overflow: hidden;position: absolute; right: 0px; bottom: -100px; width: 400px;}
#mixed3{z-index:-1;overflow: hidden;position: absolute; right: 0px; bottom: -50px; }

#mixmiddle{
margin-left: auto;
margin-right: auto;
height: 500px;
width: 1200px;
}

#mixphoto{
position: relative; bottom:20px; left: 310px;
margin-left: auto;
margin-right: auto;
}

#mixphoto1{
position: relative; bottom:20px; left: 230px;
margin-left: auto;
margin-right: auto;
}

#mixphoto2{
position: relative; bottom:20px; left: 280px;
margin-left: auto;
margin-right: auto;
}

#mixmenu{
position: absolute; left: 160px; bottom: -10px;
letter-spacing: -10px;
}

#mixcontent{
z-index: 0;
overflow: hidden;
margin-top: 50px; 
margin-left: 300px;
margin-right: 200px;
font-size: 20pt;
}

#mixcontent2{
z-index: 0;
overflow: hidden;
margin-top: 50px; 
margin-left: 60px;
margin-right: 200px;
font-size: 15pt;
vertical-align: text-top;
}

#mixpage{
position: absolute; bottom: 40px; left: 0px;
}

#mixpage2{
position: absolute; bottom: 40px; left: 0px;
}

#mixnumberclose{
position: relative;
z-index: 5;
float: left;
letter-spacing:15px;
font-family: "ocr a std", "copperplate gothic light", "Lucida Calligraphy", "modern no.20", "imprint MT shadow", "arial";
}

#mixarleft{
margin-bottom: 0px; 
margin-left: 0px;
float: left;
}

#mixarright{
margin-bottom: 0px; 
margin-left: 0px;
float: left;
}

#mixnumber{
position: relative;
z-index: 5;
margin-top: 50px; 
margin-left: 0px;
float: left;
letter-spacing:18px;
font-family: "ocr a std", "copperplate gothic light", "Lucida Calligraphy", "modern no.20", "imprint MT shadow", "arial";
z-index: 3;
}

#title{z-index: 0; overflow: visible; position: absolute; right: 100px; top: 190px; font-size: 20pt; font-family: "copperplate gothic light";}

#desmid{
position: relative; top: 30px;
margin-left: auto;
margin-right: auto;
height: 500px;
width: 1200px;
font-family: "Dirty ego", "copperplate regular", "copperplate gothic light", "Lucida Calligraphy", "modern no.20", "imprint MT shadow", "arial";
}

#desword{
position: relative; top: -530px; left: 550px;
font-size: 32pt;
}

#desdesign{
overflow: visible;
position: relative; left: 350px; top: -90px;
width: 410px;
margin-top: 130px;


}
#desrequest{
z-index:1;
overflow: visible;
position: relative; left: 120px; top: -525px;
padding-left: 160px;
}
#dessite{
z-index: 0;
overflow: visible;
position: relative; left: 610px; top: -527px;
padding-left: 160px;
}
#descard{
z-index: 1;
overflow: visible;position: relative; left: 256px; top: -416px;
padding-left: 160px;
}
#desflyer{
z-index: 1;overflow: visible;
position: relative; left: 478px; top: -320px;
padding-left: 160px;
}
#deslogo{
z-index: 0;
overflow: visible;
position: relative; left: 415px; top: -199px;
padding-left: 160px;
}
#descontact{
z-index: 0;
overflow: hidden; 
position: relative; left: 682px; top: -230px; height: 40px;
padding-left: 160px;
}

#contmiddle{
margin-left: auto;
margin-right: auto;

height: 500px;
width: 100%
}



#veer{
position: absolute; right: 37%; top: 24%;
font-size: 15pt;
color: gray;
}

#telefoon{
position: absolute; right: 0px; bottom: 50px;
}


#nummer{
position: absolute; right: 250px; bottom: 100px;
font-size: 15pt;
color: gray;
z-index: 5;
}

#concontact{
position: absolute; top: 160px; left: 180px;
font-size: 25pt;
color: gray;
}

#naam{
position: absolute; right: 65%; top: 250px; 
font-size: 15pt;
color: gray;
}

#conemail{
position: absolute; right: 60%; top: 40%;
font-size: 15pt;
color: gray;
}





#booksright{
overflow: visible;
float: right;
position: fixed; right: 60px; bottom: 30px;
}

#booksleft{
position: absolute; top: -18px; left: -60px;
z-index: -5;
}

#boomiddle{
position: absolute; top:250px;
width: 100%;
z-index: 1;
overflow: visible;
text-align: center;
}


#boocontent{
/* min-width: 1000px; */
padding-left: 820px;
position: relative; left: -400px; top: -90px;
}

#artmiddle{

position: relative; top: 130px;
margin-left: auto;
margin-right: auto;
z-index: -1;
}

#artmid{
margin-left: auto;
margin-right: auto;
width: 400px;
height: 400px;
position: relative; bottom: -40px; left: -40px;

}

#artz1{

float: left;
position: absolute; left: 0px; bottom: 0px;
z-index: -1000;

}



#artz2{
margin-left: auto;
margin-right: auto;
position: relative; top: 45px; left: 90px;
z-index: 0;
 width: auto;
overflow: hidden;
z-index: -1;
}

#artprint{
z-index: 0;
font-size: 14pt;
color: gray;
position: relative; top:-66px; left: 350px;
overflow: visible;
}
#artdesign{
z-index: 0;
font-size: 14pt;
position: relative; top:-220px; left: 180px;
overflow: hidden;
}
#artmixed{
z-index: 0;
font-size: 14pt;
position: relative; top:-100px; left: 0px;
overflow: hidden;
}
#artshirt{
z-index: 0;
font-size: 14pt;
position: relative; top:0px; left: 160px;
overflow: hidden;
}



#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }