/*********************************************************
 * 
 * Deze code is met veel plezier geschreven, getest en met trots 
 * opgeleverd door Aron Rotteveel van Vije Internetproducties.
 * Informatie:
 * 
 * Opdrachtgever: Vanille
 * Laatste update: 28 september 2007
 * 
 * Voor vragen kunt u contact opnemen per e-mail (aron@vije.nl) of per telefoon (074-2673400).
 * Meer informatie over Vije Internetproducties vindt u op http://www.vije.nl
 *
 *********************************************************/


/****( Globale definities )**********************************************/

body {
    background: #fff url(/img/bg.jpg) repeat top left;
    font-family: Arial, Helvetica, Verdana;
    font-size: 8.5pt;
    color: #999;
    text-align: center;
    padding-top: 50px;
    overflow: -moz-scrollbars-vertical;    
    scrollbar-face-color:#fff;
    scrollbar-arrow-color:#444;
    scrollbar-track-color:#fff;
    scrollbar-shadow-color:#ccc;
    scrollbar-highlight-color:#ddd;
    scrollbar-3dlight-color:#fff;
    scrollbar-darkshadow-Color:#fff;    
    line-height: 130%;
}

img {
    vertical-align: middle;
    border: 0;
}

div.spacer {
    clear: both;
    line-height: 1px;
}

a:link, a:visited, a:hover, a:active {
    color: #444;
    text-decoration: none;
    outline: none;
}

a:hover {
    color: #777;
}

form {
    margin: 0;
    padding: 0;
}
    
/****( Layout definities )***********************************************/

div#splashImage {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

div#movie {
    width: 898px;
    height: 505px;
	margin: 0 auto;
    z-index: 2;
}

div#wrapper {
    background: transparent url(/img/shadow.png) no-repeat center center;
    margin: 0 auto;
    position: relative;
    text-align: left;
    width: 910px;
    height: 560px;
}


div#site {
    position: absolute;
    width: 900px;
    height: 550px;
    margin: 5px;
}


div#menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 95px;
    height: 280px;
    overflow: hidden;
    background: transparent url(/img/menubg.jpg) no-repeat top left;
}

div#logo {
    position: absolute;
    top: -25px;
    left: 300px;
    height: 140px;
    width: 140px;
    z-index: 5;
    cursor: pointer;
}

div#highlight {
    float: right;
    position: relative;    
    height: 310px;
    width: 810px !important;
    width: 806px;
}

div#items, div#portfolioitems {
    height: 110px;
    margin: 15px 20px 10px 10px;
    overflow: hidden;
    position: relative;
    width: 872px;
}

div#items {
    margin: 10px 20px 0 10px;
}

div#portfolioitems {
    height: 190px;
}

div#photobar {
    width: 880px;
    height: 80px;
    margin: 20px 20px 0 15px;
    overflow: hidden;    
    position: relative;
}

/****( Opmaak definities )***********************************************/

ul.photolist {
    position: absolute;
    left: 0;
    list-style: none;  
    margin: 0;
    padding: 0;
    height: 75px;
}

ul.photolist li {
    display: inline;
    position: absolute;
    margin: 0;
    padding: 0;
}

div.photobarNav {
    position: absolute;
    bottom: 5px;
    right: 20px !important;
	right: 32px;
	width: 100px;
	text-align: right;
}

div.moveleft {
    background: url(/img/hoekje_links_rotated_zwart.gif) no-repeat top left;
    left: 15px;
}

div.moveright {
    background: url(/img/hoekje_rechts_rotated_zwart.gif) no-repeat top left;
}

div.moveleft a, div.moveright a { display: block; height: 5px; width: 5px; }

div.portfolioItemNav {
    position: absolute;
    bottom: 0px;
    right: 0;
}

div.itemNav {
    position: absolute;
    bottom: 5px;
    right: 0;
    
}

div.topline {
    background-color: #ddd;
    width: 760px;
    height: 1px;    
    overflow: hidden;
    position: relative;
    margin: 10px 20px;
}

div.bottomline {
    margin: 0;
    margin-left: 10px;
    background-color: #ddd;
    width: 870px;
    height: 1px;
    overflow: hidden;
}

div#logo h1 {
    display: none;
}

div#menu ul {
    list-style: none;
    margin: 30px 4px;
    padding: 0;
}

div#menu ul li {
    padding-left: 10px;
    overflow: hidden;
    text-indent: -9000px;
    border-collapse: collapse;
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
}


div#menu ul li, div#menu ul.submenu li {
    /*background: transparent url(/img/hoekje.gif) no-repeat 3px 49%;*/
}

div#menu ul li.hasChildren {
    /*background: transparent url(/img/hoekje.gif) no-repeat 3px 9px;*/
}

div#menu ul.submenu {
    margin: 0;
}

div#menu ul.submenu li {
    padding-left: 15px;
}

div#menu ul li.active {
    /*background: transparent url(/img/hoekje2.gif) no-repeat 5px 49%;*/
}

div#menu ul li.expanded {
   /*background: transparent url(/img/hoekje2.gif) no-repeat 4px 9px;*/
}



div#highlight div.image {
    float: right;
    position: relative;
    width: 409px;
    height: 280px;
    overflow: hidden;
	margin-right: 1px !important; 
}

div#highlight div.imagenav {
    float: right;
    position: relative;
    width: 410px;
    height: 25px;
    margin-top: 10px;
    margin-right: 20px;
    text-align: right;
}

div#highlight div.image div.imageContainer {
    position: relative;
    width: 410px;
    height: 280px;
    overflow: hidden;
}

div#highlight div.image div.imageContainer div.counter {
    position: absolute;
    top: 0;
    right: 0;
    height: 25px;
    background: #fff;
    text-align: center;
    width: 40px;
    color: #999;
    font-family: 'Arial Narrow', Arial;
    font-size: 14pt;
}

div#highlight div.image div.imageContainer img {
    position: absolute;
    top: 0;
    left: 0;
}

div#highlight div.image div.imageContainer a {
    z-index: 10;
    outline: none;
}


div#highlight div.content {
    float: left;
    position: relative;
    width: 380px !important;
    width: 376px;
    height: 175px;
    margin: 105px 0 0 20px !important;
    margin: 105px 0 0 10px;
}

div#highlight div.content div#innercontent {
    margin-right: 20px;
}

div#highlight div.scroller {
    overflow-y: auto;
}

div#highlight div.content div#uparrow {
    background: transparent url(/img/buttons/arrow_up.png) no-repeat top left !important;
    background: transparent none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/buttons/arrow_up.png', sizingMethod='crop');
    width: 16px;
    height: 16px;
    position: absolute;
    top: 0;
    right: -5px;
}

div#highlight div.content div#downarrow {
    background: transparent url(/img/buttons/arrow_down.png) no-repeat top left !important;
    background: transparent none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/buttons/arrow_down.png', sizingMethod='crop');
    width: 16px;
    height: 16px;
    position: absolute;
    bottom: 0;
    right: -5px;

}


div#highlight div.content h3, div#highlight div.content h4 {
    font-family: 'Times New Roman', serif;
    margin: 0;
    font-size: 11pt;
    color: #7d7d7d;
    height: 13pt;
}

div#highlight div.content h4 {
    font-size: 12pt;
}


div#items ul, div#portfolioitems ul, div#bigitems ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

div#items ul li.item, div#portfolioitems ul li.item {
    position: absolute;
    width: 205px !important;
    width: 210px;
    height: 100px;
    padding-right: 5px;
    border-right: 1px solid #ddd;
    line-height: 130%;
    /*overflow: hidden;*/
}

div#portfolioitems ul li.item {
    height: 160px;
}

div#items ul li.first, div#portfolioitems ul li.first, div#bigitems ul li.first {
    margin-left: 0;
    padding-left: 0;
}

div#items ul li.item h3, div#items ul li.item h4, div#portfolioitems ul li.item h3, div#portfolioitems ul li.item h4, div#bigitems ul li.item h3, div#bigitems ul li.item h4 {
    height: 13pt;
    margin: 0 0 5px 0;
    color: #7d7d7d;
    font-size: 11pt;
}

div#items ul li.item h4, div#portfolioitems ul li.item h4, div#bigitems ul li.item h4 {
    font-size: 11pt;
}

div#portfolioitems ul li.item div.portfolioimage, div#bigitems ul li.item div.image {
    float: right;
    position: relative;
    margin: 0 10px 20px 0;
    width: 55px;
    overflow: hidden;
}

div#portfolioitems ul li.item div.header, div#bigitems ul li.item div.header {
    float: left;
	position: relative;
    width: 120px;
    padding-top: 34px;
}

div#portfolioitems ul li.item div.header h4 {
    font-size: 11pt;
    height: 13pt;
}

div#items ul li.item p, div#portfolioitems ul li.item p {
    margin: 0;
    height: 70px;
    
}

div#items ul li.last, div#portfolioitems ul li.last, div#bigitems ul li.last {
    border: 0 !important;
}


/***** grote items *******************************/

    div#bigitems {
        height: 190px;        
        margin: 15px 20px 0 10px;
        margin-top: 15px;
        overflow: hidden;
        position: relative;
    }
    
    div#bigitems ul li.item {
        position: absolute;
        width: 205px !important;
        width: 210px;
        height: 160px;
        padding-right: 5px;
        border-right: 1px solid #ddd;        
        overflow: hidden;
    }
    
    div#bigitems ul li.item p {
        margin: 0;
    }
    
    div#bigitems ul li.first {
        margin-left: 0;
        padding-left: 0;
    }



/****( STYLED LINKS )*****************************************************************************************/

    /**** ( MENU ) ****/
    
    div#menu ul li a {
        display: block;
        height: 14px;
        padding: 4px;
        line-height: 20px;
        color: #fff;
        font-size: 9pt;
    }
    
    div#menu ul li a span, div#menu ul.submenu li a span {
        display: block;
        height: 14px;
        margin: 0 !important;
        margin: 7px 0 4px 0;
    }

    div#menu ul.submenu li a {
        font-size: 9pt;
        height: 12px;
        line-height: 12px;
        padding: 4px 0;
    }
    
    
    div#menu ul li:hover, div#menu ul li.active, div#menu ul li.hover {
        border-bottom: 1px solid #fff;
        border-top: 1px solid #fff;
    }
    
    div#menu ul.submenu li a:hover, div#menu ul.submenu li a.active {
    /*
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
    */
    }    
    
    a.nieuws span { 
        background: transparent url(/img/menu/nieuws.png) no-repeat 0 50% !important; 
        background: transparent none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/menu/nieuws.png', sizingMethod='image');        
    }    
    a.ikwilvanille span { 
        background: transparent url(/img/menu/ikwilvanille.png) no-repeat 0 50% !important; 
        background: transparent none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/menu/ikwilvanille.png', sizingMethod='image');        
    }
    a.portfolio span { 
        background: transparent url(/img/menu/portfolio.png) no-repeat 0 50% !important; 
        background: transparent none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/menu/portfolio.png', sizingMethod='image');        
    }
    a.zoet span { 
        background: transparent url(/img/menu/zoet.png) no-repeat 0 50% !important; 
        background: transparent none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/menu/zoet.png', sizingMethod='image');        
    }
    a.pittig span { 
        background: transparent url(/img/menu/pittig.png) no-repeat 0 50% !important; 
        background: transparent none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/menu/pittig.png', sizingMethod='image');        
    }
    a.fris span { 
        background: transparent url(/img/menu/fris.png) no-repeat 0 50% !important; 
        background: transparent none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/menu/fris.png', sizingMethod='image');        
    }
    a.vol span { 
        background: transparent url(/img/menu/vol.png) no-repeat 0 50% !important; 
        background: transparent none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/menu/vol.png', sizingMethod='image');        
    }
	
    a.medewerkers span { 
        background: transparent url(/img/menu/medewerkers.png) no-repeat 0 50% !important; 
        background: transparent none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/menu/medewerkers.png', sizingMethod='image');        
    }
	
    a.thijs span { 
        background: transparent url(/img/menu/thijs.png) no-repeat 0 50% !important; 
        background: transparent none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/menu/thijs.png', sizingMethod='image');        
    }
    a.marloes span { 
        background: transparent url(/img/menu/marloes.png) no-repeat 0 50% !important; 
        background: transparent none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/menu/marloes.png', sizingMethod='image');        
    }
    a.jana span { 
        background: transparent url(/img/menu/jana.png) no-repeat 0 50% !important; 
        background: transparent none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/menu/jana.png', sizingMethod='image');        
    }
    a.ton span { 
        background: transparent url(/img/menu/ton.png) no-repeat 0 50% !important; 
        background: transparent none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/menu/ton.png', sizingMethod='image');        
    }
	
    a.contact span { 
        background: transparent url(/img/menu/contact.png) no-repeat 0 50% !important; 
        background: transparent none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/menu/contact.png', sizingMethod='image');        
    }

/****( Form definities )**************************************************************************************/

	form.contactForm {
		width: 360px;
		overflow: hidden;
	}
	
    form.contactForm div.spacer {
        height: 1px;
    }

    input, textarea {
        border: 0;
        background: #eee;
        width: 260px !important;
        width: 240px;
        margin: 0;
        padding: 0;
    }
    
    textarea { 
        height: 80px;
    }   
    
    div.contactsend {
        text-align: right;
        margin-top: 2px;
        width: 360px !important;
        width: 340px;
    }
    
    div.contactsend input {
        outline: none;
    }
   
    div.contactsend input {
        width: 47px !important;
        height: 20px;
    }
    
    div.label { 
        float: left; 
        position: relative;
        width: 100px;
        height: 22px;
    } 
    
    div.field {
        float: left;
        position: relative;
        width: 260px !important;
        width: 240px;
    }
    
    span.errMsg {
        display: none;
    }
    
    .errFld {
        border: 1px solid #ff0000;
    }
    
       

/****( SIFR definities )*************************************************/

/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1 {
	visibility: hidden;
}

.sIFR-hasFlash h2 {
	visibility: hidden;
	letter-spacing: -9px;
	font-size: 55px;
}

.sIFR-hasFlash h3 {
	visibility: hidden;
	letter-spacing: -6px;
	font-size: 25px;
}

.sIFR-hasFlash h4 {
	visibility: hidden;
	letter-spacing: -5px;
	font-size: 21px;
}

.sIFR-hasFlash h5#pullquote {
	letter-spacing: -4px;
	visibility: hidden;
	font-size: 24px;
}

/**( Lightbox )******************************************************************/

#lightbox{
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
}

#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;
}

#hoverNav, #portfolioHoverNav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav { left: 0;}
#imageContainer>#portfolioHoverNav { left: 0;}

#hoverNav a { outline: none;}
#portfolioHoverNav a { outline: none;}

#prevLink, #nextLink, #portfolioPrevLink, #portfolioNextLink {
	width: 49%;
	height: 100%;
	background: transparent url(/img/zerobyte.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
}

#prevLink, #nextLink {
    display: none;
}

#prevLink, #portfolioPrevLink { left: 0; float: left; }
#nextLink, #portfolioNextLink { right: 0; float: right; }
#prevLink:hover, #prevLink:visited:hover { background: url(/img/prev.gif) left 53%; background-repeat:no-repeat;}
#nextLink:hover, #nextLink:visited:hover { background: url(/img/next.gif) right 53%; background-repeat:no-repeat;}
#portfolioPrevLink:hover, #portfolioPrevLink:visited:hover { background: url(/img/prev.gif) left 53%; background-repeat:no-repeat; }
#portfolioNextLink:hover, #portfolioNextLink:visited:hover { background: url(/img/next.gif) right 53%; background-repeat:no-repeat; }



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

#imageData {
	padding:0 10px;
}

#bottomNav {
    position: absolute;
    top: 10px;
    right: 10px;    
    color: #444;
    background: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    z-index: 999;
}

#bottomNav a {
    display: block;
    height: 20px;
    width: 20px;
    border: 1px solid transparent;    
}

#bottomNav a:hover {
}

#imagePrevNext {
    padding-top: 10px;
}

#imagePrevNext a#bottomPrevLink {
    float: left;
    margin-left: 10px;
    z-index: 999;
    outline: none;
}

#imagePrevNext a#bottomNextLink {
    float: right;
    margin-right: 10px;
    z-index: 999;
    outline: none;
}

#imageData {
    text-align: center;
}


#imageData #imageDetails{ 
}	

#imageData #caption{ font-size: 11px; color: #444; }
#imageData #numberDisplay{ display: none; clear: left;	color: #000;}			
#imageData #bottomNavClose{ width: 36px; float: right;	}	
		
#overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	/*filter:alpha(opacity=60);*/
	-moz-opacity: 0.6;
	opacity: 0.6;
}   


/* modifiers */

.noTopBorder { border-top: 0 !important; }
.noBottomBorder { border-bottom: 0 !important; }
.nowrap { white-space: nowrap; }



#splash {
    position: absolute;
    top: 50%;
    left: 50%;
    width:908px; 
    height:567px;
    margin-top: -284px; /* 567/2 */ 
    margin-left: -454px; /* 908/2 */
}
/**( EOF )**********************************************************************/