/* - - - - - - - - - - - - - - - - - - - - -
* Filename: style.css
* Version: 1.0.0 ( 6-10-2008 )
* Author: Niels Otterspoor Icemedia
* Description: Odorex.

== STRUCTURE: ==============================
* Pagina width: 1024 px
* Pagina height: 786 px
============================================*/

/*     Basis
============================================*/
body        {margin:0px; padding:0px; background-color:#ffffff; font-family:Arial;color:#003876;}
img         {border:none;}
a           {text-decoration:none;}
a:focus     {outline: none;}
a:active    {outline: none;}

object{outline:none;}

.homelink   {position: absolute; left:55px; top:32px; height:70px; width:230px;}

.footer     {height:40px; width:943px; position:absolute; bottom:0px;}
.footertekst{text-align:right; color:#dcdcdc; padding-right:30px;}
              
.footer a   {color:#009fc3; font-size:11px;}   
.footer a:hover   {color:#009fc3; font-size:11px; text-decoration:underline;}   

.sluitknop { position:absolute; right:8px; top:8px; z-index:999;} 
.fileupload {height:20px;}

    


/*     Wrapper
============================================*/
#wrapper    {width:943px; height:704px; background-image:url(../img/bg.jpg); 
             background-repeat:no-repeat; 
             position:relative; 
             margin:0 auto;
            }
            
/*     Menu
============================================*/
.menu{ height:59px; width:486px; background-image:url(../img/menubg.gif); position:absolute; top:40px; right:10px;}

.menu .link1{height:30px; width:100px; background-image:url(../img/menu/transpiratie_button.gif); position:absolute; left:22px; top:15px;}
.menu .link1 a{height:30px; width:100px; display:block;}
.menu .link1 a:hover{background-image:url(../img/menu/transpiratie_button.gif); background-position:0px -30px;}
.menu .link1 a.active{background-image:url(../img/menu/transpiratie_button.gif); background-position:0px -30px;}

.menu .link2{height:30px; width:79px; background-image:url(../img/menu/ervaringen_button.gif); position:absolute; left:123px; top:15px;}
.menu .link2 a{height:30px; width:79px; display:block;}
.menu .link2 a:hover{background-image:url(../img/menu/ervaringen_button.gif);background-position:0px -30px;}
.menu .link2 a.active{background-image:url(../img/menu/ervaringen_button.gif);background-position:0px -30px;}

.menu .link3{height:30px; width:117px;background-image:url(../img/menu/extradry_button.gif); position:absolute; left:203px; top:15px;}
.menu .link3 a{height:30px; width:117px; display:block;}
.menu .link3 a:hover{background-image:url(../img/menu/extradry_button.gif); background-position:0px -30px;}
.menu .link3 a.active{background-image:url(../img/menu/extradry_button.gif); background-position:0px -30px;}


.menu .link4{height:30px; width:142px; background-image:url(../img/menu/maakjeeigenfilmpje_button.gif); position:absolute; left:320px; top:15px;}
.menu .link4 a{height:30px; width:142px; display:block;}
.menu .link4 a:hover{background-image:url(../img/menu/maakjeeigenfilmpje_button.gif); background-position:0px -30px;}
.menu .link4 a.active{background-image:url(../img/menu/maakjeeigenfilmpje_button.gif); background-position:0px -30px;}
            

/*     First page
============================================*/
.firsttekst{position:absolute; left:60px; top:150px; color:#009fc3; font-size:14px; width:603px; height:116px; text-align:center;}
.firsttekst .span{ font-size:18px; font-weight:bold;}
.product{position:absolute; bottom:50px; left:100px;}  
.selectlink{ position:absolute; top:145px; right:15px; width:223px; height:248px; background-image:url(../img/firstselect.jpg);}
.overlink { position :absolute; top:10px; right:15px; width:200px; height:220px; }




/*     Titels
============================================*/
.vragentitel { position:absolute; left:60px; top:140px;}
.vragenondertitel{position:absolute; left:60px; top:190px; width:220px; height:30px; background-color:#009fc3;}
.vragenondertitel1{position:absolute; left:60px; top:190px; width:220px; height:30px; background-color:#009fc3;}

.vragentitel2 { position:absolute; left:60px; top:225px;}
.vragenondertitel2{position:absolute; left:60px; top:275px; width:220px;}


.vragentitel3 { position:absolute; left:150px; top:150px;}
.vragenondertitel3{position:absolute; left:150px; top:175px; width:220px;}

.vragentitel4 { position:absolute; left:580px; top:150px;}
.vragenondertitel4{position:absolute; left:580px; top:175px;}

.vragentitel5 { position:absolute; left:150px; top:170px;}

.vragentitel6 { position:absolute; left:450px; top:300px;}
.vragentitel7 { position:absolute; left:390px; top:325px;}

.of{position:absolute; left:450px; top:150px;}



/*     Vragen page
============================================*/


.vragentekst {position:absolute; left:300px; top:190px; color:#009fc3; font-size:11px; width:400px; height:116px;}
.vragentekst a{color:#009fc3; font-size:11px; text-decoration:underline;}

.vragenbg{ height:389px; width:405px; position:absolute; top:250px; left:50px; background-image:url(../img/vragenbg.gif); }
.antwoordbg{ position:absolute; height:370px; width:482px; top:267px; right:5px; background-image:url(../img/antwoordbg.gif);}
.submenu{ position:absolute; height:20px; width:405px; top:256px; left:59px;}

#algemeen_show{position:absolute; top:280px; left:60px; height:345px; width:370px; }
#dry_show{position:absolute; top:280px; left:60px; height:345px; width:370px;}
#gebruik_show{position:absolute;top:280px; left:60px; height:345px; width:370px; }

.innershow {color:#009fc3; font-size:12px; font-weight:bold;}
.innershow a{color:#009fc3; font-size:12px; font-weight:bold;}
.innershow ul { padding-top:5px;}
.innershow li { list-style-image:url(../img/li.gif); margin-bottom:5px;}

.content-divs { position:absolute; height:340px; width:450px; top:280px; right:20px; display:none;color:#009fc3; font-size:11px;}
.content-divs a{color:#009fc3; font-size:11px; text-decoration:underline;}
.content-startdivs{ position:absolute; height:340px; width:450px; top:277px; right:30px; display:none;color:#009fc3; font-size:11px; 
                    background-image:url(../img/vragenvrouw.jpg);
                    background-repeat:no-repeat;}


/*     Contact page
============================================*/
.contacttekst{ position:absolute; left:60px; top:230px; width:300px; height:200px; color:#009fc3; font-size:11px;}
.contacttekst a{color:#009fc3; font-size:11px; text-decoration:underline;}

.contactform {position:absolute; right:60px; top:230px; width:390px; height:200px; color:#009fc3; font-size:11px;}
.name{font-weight:bold; width:150px;}

.textfield { border:1px solid #009fc3; width:265px; padding-right:5px;}
.select    { border:1px solid #009fc3; width:100%; color:#009fc3;}
.selectdatum {border:1px solid #009fc3; width:88px; color:#009fc3;}
.textarea  { border:1px solid #009fc3; width:270px;}

.verstuur {border:1px solid #009fc3; color:#009fc3; background-color:#ffffff; font-weight:bold; cursor:pointer;}

/*     Ervaring page
============================================*/
.ervaringtekst{ position:absolute; left:60px; top:230px; width:350px; height:200px; color:#009fc3; font-size:11px;}
.ervaringtekst a{color:#009fc3; font-size:11px; text-decoration:underline;}

.ervaringlink1  {height:215px; width:196px; background-image:url(../img/thumbs/1.jpg); position:absolute; top:426px; left:315px;}
.ervaringlink1 a{height:215px; width:196px; display:block;}

.ervaringlink2  {height:215px; width:196px; background-image:url(../img/thumbs/2.jpg); position:absolute;  top:196px; left:739px; }
.ervaringlink2 a{height:215px; width:196px; display:block;}

.ervaringlink3  {height:212px; width:198px; background-image:url(../img/thumbs/3.jpg); position:absolute; top:443px; left:727px;}
.ervaringlink3 a{height:212px; width:198px; display:block;}

.ervaringlink4  {height:219px; width:202px; background-image:url(../img/thumbs/4.jpg); position:absolute; top:360px; left:530px;}
.ervaringlink4 a{height:219px; width:202px; display:block;}

.ervaringlink5  {height:216px; width:200px; background-image:url(../img/thumbs/5.jpg); position:absolute; top:127px; left:526px;}
.ervaringlink5 a{height:216px; width:200px; display:block;}


.popup { width:500px; height:342px; position:relative;}
.popupfoto { height:324px; width:216px; position:absolute; top:8px; left:8px;}
.titelfoto { height:auto; width:auto; position:absolute; top:8px; left:240px;}
.fototekst { height:100px; width:250px; position:absolute; top:60px; left:240px; color:#009fc3; font-size:11px;}


/*     Transpiratie page
============================================*/
.transpiratietekst{ position:absolute; left:60px; top:230px; width:390px; height:200px; color:#009fc3; font-size:11px;}
.transpiratietekst a{color:#009fc3; font-size:11px; text-decoration:underline;}

.zweetweetjes{ height:219px; width:407px; background-image:url(../img/zweetbg.jpg); 
               position:absolute; top:230px; left:480px; color:#009fc3; font-size:11px;
               padding-left:20px;padding-right:20px;}
.zweetweetjes ul {padding-left:10px; margin:0px;}     

.verborgen   {color:#009fc3; font-size:11px;  padding:20px;   }


/*     dry page
============================================*/
.drytekst{ position:absolute; left:60px; top:230px; width:390px; height:200px; color:#009fc3; font-size:11px;}
.drytekst a{color:#009fc3; font-size:11px; text-decoration:underline;}
.dryproducts {position:absolute; bottom:50px; left:100px;}
.drytabel {position:absolute; top:180px; left:500px;}

.drylink1 a, .drylink2 a, .drylink3 a, .drylink4 a{color:#009fc3; font-weight:bold;}

.drylink1{height:17px; padding-top:3px; width:143px; background-image:url(../img/drybg.gif); position:absolute; top:450px; left:187px; font-size:11px; color:#009fc3; font-weight:bold; text-align:center;}
.drylink2{height:17px; padding-top:3px; width:143px; background-image:url(../img/drybg.gif); position:absolute; top:450px; left:334px; font-size:11px; color:#009fc3; font-weight:bold; text-align:center;}
.drylink3{height:17px; padding-top:3px; width:143px; background-image:url(../img/drybg.gif); position:absolute; top:450px; left:480px; font-size:11px; color:#009fc3; font-weight:bold; text-align:center;}
.drylink4{height:17px; padding-top:3px; width:143px; background-image:url(../img/drybg.gif); position:absolute; top:450px; left:625px; font-size:11px; color:#009fc3; font-weight:bold; text-align:center;}

.drypopop{height:528px; width:712px; position:relative;}
.drypopupfoto { height:294px; width:295px; position:absolute; right:10px; top:10px;}
.drytitelfoto { height:auto; width:auto; position:absolute; top:8px; left:10px;}
.dryfototekst {height:100px; width:350px; position:absolute; top:60px; left:10px; color:#009fc3; font-size:11px;}

.openclose{position:absolute; top:260px; left:10px; width:500px; height:auto;}

.gebruiksaanwijzing{float:left; color:#009fc3; font-weight:bold; font-size:11px; width:500px;}
.gebruikshow{float:left; width:500px; height:auto; color:#009fc3; font-size:10px;margin-bottom:10px;}

.ingredienten{float:left; color:#009fc3; font-weight:bold; font-size:11px;width:500px;}
.ingredientenshow{ float:left; width:500px; height:auto; color:#009fc3; font-size:10px; margin-bottom:10px;}

.gebruiksaanwijzing a, .ingredienten a{color:#009fc3; font-weight:bold;}


/*     Uitleg page
============================================*/
.uitlegtekst{ position:absolute; left:65px; top:350px; width:390px; height:200px; color:#009fc3; font-size:12px;}
.uitlegfoto {position:absolute; left:500px; top:180px;}
.uitlegvolgende {position:absolute; left:65px; top:430px;}

/*     Nav 
============================================*/
.nav{position:absolute; height:30px; width:700px; left:145px; top:520px;}
.vorige{position:absolute; left:0px;}
.volgende{position:absolute; right:0px;}

.butttonvolgende{cursor:pointer;border:none;height:42px;width:78px;
                             background:url(../img/volgende.gif) repeat-x left top;}

.stappen{position:absolute; width:731px; height:48px; bottom:60px; left:130px;}


/*     Select page
============================================*/

.bg { position:absolute; left:130px; top:130px;}
.moviebg {position:absolute; left:150px; top:210px;}


.uploadtekst { position:absolute; top:250px; left:160px; color:#ffffff; font-size:10px; width:200px;}

.teksttitel {font-size:12px; font-weight:bold;}
.usecurrentButton {border:1px solid #50BFD8; font-size:12px; color:#ffffff; font-weight:bold; background-color:#6CCBDF; cursor:pointer;}

.flash {position:absolute; left:390px; top:10px;}

#flashcontent {position:absolute; left:210px; top:140px;}



/*     Preview page
============================================*/

.previewtekst {position:absolute; left:155px; top:220px; width:200px; height:200px; color:#009fc3; font-size:11px;}
.filmhouder {position:absolute; right:100px; top:150px; width:450px; height:360px;}
.filmhouder #flashcontent {position:relative; left:0px; top:0px; width:450px; height:360px;}


/*     Thanks page
============================================*/

.buddy {position:absolute; left:200px; top:220px; height:380px; width:600px; font-size:11px; color:#00668e;}
.name {width:100px;}
.klein{font-size:10px; color:#78b9d2;}

.buddy .textfield { width:150px; background-color:#c3e7f5;}

.haalvrienden {cursor:pointer;border:none;height:21px;width:114px;
                             background:url(../img/haal.gif) repeat-x left top;}
.verstuurvrienden {cursor:pointer;border:none;height:46px;width:67px;
                             background:url(../img/verstuur.gif) repeat-x left top;}
                               
.previewlink{position:absolute; top:-10px; left:0px;}                               
.previewlink a{font-size:11px; color:#00668e; font-weight:bold; text-decoration:underline;}                              
                             
.bb{ width:479px; height:251px; padding-left:10px; padding-top:5px;}
.bb #buddyholder {position:relative;top:0px;left:0px; width:468px;height:211px;}
	#contacts {position:absolute;height:167px;width:212px;overflow:scroll;overflow-x:hidden;bottom:0px;left:0px; background-color:#d5f2fd; border:1px solid #83d9fa;}
	#selectedcontacts{position:absolute;bottom:0px;right:0px;height:167px;width:212px;overflow:hidden;padding-left:2px; padding-top:2px; border:1px solid #83d9fa; background-color:#d5f2fd; overflow:scroll;overflow-x:hidden;}
	#arrows{position:absolute;	left:225px;	top:100px;}
	#bballes{	position:absolute;	left:0px; top:20px;	width: 180px; font-size:12px; font-weight:bold; }
	#bbaantal{	position:absolute;	right:0px; top:20px;	width: 210px; font-size:12px; font-weight:bold; }
	#aantal{ font-family:Arial;  font-weight:bold;}
	#contactaantal{ font-family:Arial;  font-weight:bold;}
	#selectedcontacts span{font-family:Arial, Helvetica, sans-serif; font-size:11px; }
	#contacts{font-family:Arial, Helvetica, sans-serif; font-size:11px; }
                                                     
                                                     
/*     Error page
============================================*/                      
.error {position:absolute; left:310px; top:270px;} 
.error a { text-decoration:underline; }                              

/*     View page
============================================*/

.previewtekst {position:absolute; left:155px; top:220px; width:200px; height:200px; color:#009fc3; font-size:11px;}
.viewfilmhouder {position:absolute; right:220px; top:150px; width:450px; height:360px;}


	#pageLoading { position:absolute; left:150px; top:230px; display:none; height:150px; 
	               width:700px; background:url("../images/loading.gif"); 
	               background-repeat:no-repeat; background-position:center; 
	               background-color:#ffffff;
	                text-align:center;
	                vertical-align:text-bottom;
	               }

    #content {display:none;}
    

/*     selecthyves
============================================*/    
.hyveskiesman{ position:absolute; top:190px; left:360px;}
.hyveskiesvrouw{ position:absolute; top:190px; left:600px; }  

.kiesman {position:absolute; top:510px; left:450px; height:51px; width:88px;}
.kiesvrouw {position:absolute; top:510px; left:670px;}

/*     Uploadhyves
============================================*/ 
.uploadimage{position:absolute; top:190px; left:520px;} 
    
    
    
/*     code page hyves
============================================*/    
.hyvesknop { width:24px; height:24px; border:none;  cursor:pointer;  background:url(../images/favicon_24_round.png) repeat-x left top;}
.code { width:200px; height:150px; background-color:#c3e7f5; border:1px solid #009fc3; font-size:10px;}