/* -- Date adjusted : 08-11-2011 -- */

/* -- MAIN LAYOUT STYLES ------------------------------------------------ */

    body {
        background-color: #5C6A8F;
        margin: 1em 1em 1em 1em;
        padding: 0px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 1.0em;
    }

    #wrapper {
	    min-width: 920px;
	    max-width: 1150px; /* header pictures are 1150px wide */
	    margin: 0px auto;
	    width:expression(document.body.clientWidth < 922? "920px" : document.body.clientWidth > 1152? "1150px" : "auto");
    }

    #container {background-image: url(images/bg/bg_container.jpg); }

    #container-top {
        height: 15px;
        background: url(images/bg/bg_container_top.png) repeat-x left top;
    }

    #container-bottom {
        clear: both;    
        height: 10px;
        background: url(images/bg/bg_container_bottom.png) repeat-x left bottom;
    }
    
    #content {padding-left: 230px; }

    #header {border-bottom: 6px solid #5C6A8F; }
           
    #sidebar {
        background-image: url(images/bg/bg_sidebar.jpg);
        float: left;
        width: 210px;
        margin: 5px 10px 10px 10px;
        color: #FFF;
        position:relative;
        padding: 5px 0 10px 0;
    }    

    #footer {
        clear: both;
        height: 50px;
        font-size: 11px;
        color: #EEE;
        background: url(images/bg/grad_footer_100x50.png);
    }
   
/* -- HEADER LAYOUT STYLES ------------------------------------------------ */    
    
    #header_top {
        height: 80px;
        background: url(images/bg/grad_white_0_100x80_0_8.png) repeat-x bottom left;
        text-align: right;
        overflow: visible;
     }

     #header_middle {
        height: 80px;
        text-align: right;
        color: white;
        overflow: hidden;
     }

     #header_bottom {
        height: 15px;
        background: transparent;
        text-align: right;
        font-size: 12px;
        font-style: italic;
        overflow: hidden;
     }
       
    .logo {float: left; padding: 10px 10px 0px 0px; }
	
    #header_top ul li {
        float: right;
        background-image: url(images/bg/color_5C6A8F_30.png);
        margin-right: 3px;
        text-align: center;                
    }
           
    #header_top ul li.lastMenuItem {margin-right: -12px; }
    
    #header_top ul li a {
        width: 88px;
        padding: 5px 5px 5px 5px;
        display: block;
        font-size: 13px;
        text-transform: uppercase;
        text-decoration: none;
        color: #000;
    }
    
    #header_top ul li a:hover, #header_top ul li.active a {
        color: #FFF;
        padding-top: 10px;    
        background-image: url(images/bg/color_5C6A8F_60.png);
    }
    
    #header_top ul li a .desc {
        display: none;
        padding-top: 5px;
        text-transform: lowercase;
        color: #FFFA99;
    }

    #header_top li:hover a .desc, #header_top li.active a .desc {display: block; }
    
     
/* -- IMAGE DISPLAY AND FORMATTING STYLES ------------------------------- */
	
    .imgSidebar {margin: 10px 0px 10px 0px; }
    
    .imgContentLeft {margin: 0px 10px 0px 0px; }
           
    .imgContentRight {margin: 0px 0px 0px 10px; }
    
    .lightBorder {border: 2px solid #DCDCDC; }

    .darkBorder {border: 2px solid #333; }
    
    .medBorder {border: 2px solid #7C8DA1; }
    
    .left {float: left; }
    
    .right {float: right; }
    
    .full_width {width:100%; display:block; }    

    .last_text {padding: 0px 10px 10px 0px; }
    
    .lastImage {padding: 0px 0px 20px 0px; }

    .clearing {clear: both; height: 0px; }
    
    .only_clear {clear: both; }

     /* preload images at the beginning of the HTML sheet */
	 .preload {display:block; position:absolute; left:-9999px;}     
	     
     /* -------------------------- ROUNDED CORNERS ------------------------------- */
    
      .tl, .tr, .bl, .br {
        position : absolute;
        width : 12px;
        height : 12px;  /* corner images are 12x12 */
        display : block;
       }

      .tl {background : transparent url(images/bg/corner_LB_A3AFC9_12x12.png) no-repeat; top:0; left:0; }
      
      .tr {background : transparent url(images/bg/corner_RB_A3AFC9_12x12.png) no-repeat; top:0; right:0; }

      .bl {background : transparent url(images/bg/corner_LO_A3AFC9_12x12.png) no-repeat; bottom:0; left:0; }
      
      .br {background : transparent url(images/bg/corner_RO_A3AFC9_12x12.png) no-repeat; right:0; bottom:0; }

    /* ---------- DROPSHADOW : onion skin ------------------ */ 
	 
	 .drop1_left, .drop1_right, .drop2, .drop3 {display:inline-table; /* \*/display:block;/**/ }
 
	 .drop1_left {float: left; background:url(images/main_shadow_new.png) no-repeat right bottom; margin: 10px 5px 0 18px;}    
     
	 /* -- hoofdschaduw : margins geven alleen de algehele positie van het plaatje in de div -- */
     /* -- margin-left: 18px geeft ruimte aan tussen plaatje en tekst (10px + 8px) -- */
     /* -- margin-right: 5px geeft extra ruimte tussen tekst en plaatje -- */
     /* -- margin-top: 10px zet juiste ruimte boven goed (waarom geen 8px???) -- */

	 .drop1_right {float: right; background:url(images/main_shadow_new.png) no-repeat right bottom; margin: 10px 8px 0 18px;}
     
	 .drop2 {background:url(images/lowerleftfade.png) no-repeat bottom left; margin: 0px 0px 0px -8px; }
	  /* -- margin-left: -8px zet de hoek goed -- */
 
	 .drop3 {padding: 0 8px 8px 0; background:url(images/upperrightfade.png) no-repeat top right; margin: -8px 0 0 8px; }
	 /* -- rechterboven hoek : de padding geeft aan hoever de schaduw onder de image uitsteekt!! -- */
     /* -- margin-left:  -- */
     /* -- margin-top: -8px zet de hoek goed -- */     

	 .drop3 img {display:block; margin: 0px 0px 0px -8px; font-size:12px; font-style:italic;}
     /* -- margin-left: -8px zet de hoek goed -- */     

     .map_pos {margin-top:48px;  }
     
     .pic_pos {margin-top:30px;  }
     /* -- foto plaatsing in een H3-- */
     
     .text_pos {margin-top:20px;  }
     /* --plaatst foto naast de text als de </p> voor de img een br bevat-- */     

     .map_text_left {
        color: #333366;
        margin-left: 10px;
        font-style:italic;
        float:left;
        font-size: 95%;
     }
      
      .map_text_right {
        color: #333366;
        margin-right: 15px;
        font-style:italic;
        float:right;
        font-size: 95%;
     }
	
/* -- TEXT DISPLAY AND FORMATTING STYLES -------------------------- */

    h1 {display: block;
        margin: 0px 10px 0.4em 10px;
        border-bottom: 1px solid #fcfca0;
        font-size: 2.2em;
    }
    
    h2 {margin: 10px 10px 0.4em 10px;
        padding-top: 15px;
        border-bottom: 1px solid #fcfca0;
        font-size: 1.6em;               
    }
    
    h3 {margin: 0.5em 10px 0.4em 10px;
        padding-top: 1em;  /* -- padding to give room to jump to a location on the map, but with some space at the top -- */
        font-size: 1.3em;
    }

    h4 {margin: 0.5em 10px 0.4em 10px;
        padding-top: 1em;  /* -- padding to give room to jump to a location on the map, but with some space at the top -- */
        font-size: 1.4em;
    }
    
    h5 {margin: 0.5em 10px 0.4em 10px; }
    
    a {text-decoration:none; color: #000000; }
    
    b {font-weight: 600; font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif; }    
    
    .header_l {
        display: block;
        clear: both;
        font-weight: 600;
        color: #fcfca0 !important;
        border-bottom: 1px solid #AAA;
        text-transform: uppercase;
    }

    .subHeader_l {
        display: block;
        clear: both;
        font-weight: 600;
        color: #fff;    
    }
    
    .centre {text-align:center; }
    
    .divepage {color: #fcfca0; font-family: times, "Times New Roman", times-roman, georgia, serif; font-weight: 500; }
    
    .balipage {color: #fcfca0; font-family: times, "Times New Roman", times-roman, georgia, serif; font-weight: 500; }
    
    .holidaypage {color: #333366; font-family: times, "Times New Roman", times-roman, georgia, serif; font-weight: 600; border-bottom: 1px solid #333366; }

    .super {font-size: 80%; }
    
    sup, sub {vertical-align:baseline; position:relative; top:-0.4em; }
    
    sub {top:0.4em; } /* manier om te vookomen dat sup en super de regelhoogte beinvloeden */
    
    .footnote {font-size: 70%; } 
    
    .big {font-size: 105%; }   
    
    .bigger {font-size: 110%; }
    
    .biggest {font-size: 120%; }
    
    .smaller {font-size: 90%; }
    
    .smallest {font-size: 80%; }
    
	.underline {text-decoration: underline; }
    
    .italic {font-style: italic; }
    
    .bold {font-weight: bold; }    

    acronym {cursor: help; border-bottom: 1px dotted #AAA; }
    
    .how {
      color: #FFE334;
      cursor: help;
      font-style:italic;
      border-bottom: 1px dotted #FFF;    
    }
    
    .light_yellow {color: #fcfca0; }
	 
	.light_black {color: #3C3C3C; }
    
    .blue {color: #3E5288; }
    
    .dark_blue {color: #333366; }
   /*used for map uitleg*/ 

    .highlight {color: #EEE; font-style: italic; }
    
    .lightTxt {color: #DCDCDC; }
    
    .lighterTxt {color: #D6D6D6; }
    
    .darkTxt {color: #000; }
    
    .nojustify {text-align: left; }
    
    .dropcap {
       float:left;
       color:#333;
       font-size: 375%;
       line-height: 75%;
       padding-right: 3px;
       font-family: times;
    }
    .disease {
      font-weight: 600;
      color: #fcfca0; 
      font-family: "Century Gothic", Verdana;
      font-style:italic;
      font-size: 1.1em;   
    }

    .indent {padding-left:20px; }
	
/*-- GENERAL SIDEBAR LAYOUT, FORMATTING AND MENU STYLES --------------------------------------*/

    #sidebar p {
        color: #FFF;
        font-size: 0.8em;
        margin: 10px 10px 10px 10px;
    }
    
    #sidebar a.link {border-bottom: 1px dotted #fcfca0; color: #fcfca0; font-size: 14px; }
    
    #sidebar a.link:hover {border-bottom: 1px dotted #DCDCDC; color: #DCDCDC; }
    
    #sidebar a.image_link {
    	display: block;	
	    margin-left:10px;
    }
    
    #sidebar a.image_link img {width:100%; height:100%;}
	
	#sidebar a:hover.image_link img, #sidebar a:focus.image_link img {display: none; }
	        
    
    
    /* ---------- SIDEBAR MENU FOR THE "BALI DIVE LOCATION" AND "OTHER DIVE LOCATION" PAGES -------------------------------------------------------*/
    
    #menu_sidebar {
	   width: 200px;
       margin-left: 5px;
       margin-top: 10px;
       border-style: none;
       padding-top: 0px;
    }
    
    #menu_sidebar ul {margin-bottom: 20px; }
    
    #menu_sidebar ul li {
       position: relative;
       font-size: 15px;
       margin-bottom: 4px;
     }
     
    #menu_sidebar ul li:hover, #menu_sidebar ul li.active {font-weight: 600; }     
  
    #menu_sidebar ul li a {
       width: 140px;   
       height: 24px;
       line-height: 24px;
       display: block;
       background: url(images/menu/Button_140x24.png) no-repeat top left;
       padding-left: 5px;
       font-weight:600;
       color: #FFFA99;
       font-family: calibri, times, "Times New Roman", times-roman, georgia, serif;
     }
    
    #menu_sidebar ul li a.current {
        font-weight: 600;    
        font-style: italic;
        color: #FFF;
    }     

    #menu_sidebar ul li.tank {
       padding: 5px 0px 5px 45px;
       background: url(images/menu/tank_off_on_44x37.png) no-repeat top left;
    }

    #menu_sidebar ul li:hover.tank, #menu_sidebar ul li.tank.active {
        background-position: 0px -37px;
    }

    #menu_sidebar ul li:hover.tank em, #menu_sidebar ul li.tank em.current {
        width:16px;
        height:16px;
        position:absolute;
    }

    #menu_sidebar ul li:hover.tank em {background:transparent url(images/menu/where.png); }

    #menu_sidebar ul li.tank em.current {background:transparent url(images/menu/loc.png); }

    #menu_sidebar ul li.buddha {
       padding: 10px 0px 10px 45px;
       background: url(images/menu/buddha_off_on_31x40.png) no-repeat top left;    
    }

    #menu_sidebar ul li:hover.buddha, #menu_sidebar ul li.buddha.active {
        background-position: 0px -40px;
    }

    #menu_sidebar ul li.lumbung {
       padding: 5px 0px 5px 45px;
       background: url(images/menu/lumbung_off_on_42x35.png) no-repeat top left;    
    }

    #menu_sidebar ul li:hover.lumbung, #menu_sidebar ul li.lumbung.active {
        background-position: 0px -35px;
    }

    #menu_sidebar ul li.lang {
         padding: 5px 0px 5px 45px; }    
    
    #menu_sidebar ul li.UKtank {
         background: url(images/menu/UK_off_on_100x40.png) no-repeat top left; }
         
    #menu_sidebar ul li.DEtank {
        background: url(images/menu/DE_off_on_100x40.png) no-repeat top left; }
        
    #menu_sidebar ul li.NLtank {
        background: url(images/menu/NL_off_on_100x40.png) no-repeat top left; }                 

    #menu_sidebar ul li:hover.lang, #menu_sidebar ul li.lang.active {
        background-position: 0px -40px;
	}

    .padangbai {left: 145px; top: -65px; }
    
    .amed {left: 170px; top: -130px; }
    
    .tulamben {left: 160px; top: -180px; }
    
    .pemuteran {left: 25px; top: -240px; }
    
    .menjangan{left: 10px; top: -280px; }
    
    .secretbay {left: -5px; top: -305px; }
    
    .lembongan {left: 140px; top: -280px; }
    
    .penida {left: 150px; top: -305px; }
    
    .gilisNW {left: 35px; top: -145px; }
    
    .gilisSW {left: 5px; top: -108px; }
    
    .LombokSouth {left: 75px; top: -105px; }
    
    .belongas {left: 25px; top: -110px; }    
    
    .manado {left: 48px; top: -55px; }
    
    .bunaken {left: 30px; top: -130px; }
    
    .bangka {left: 108px; top: -202px; }
    
    .lembeh {left: 150px; top: -160px; }
    
    .labuanbajo {left: 100px; top: -125px; }
    
    .komodo {left: 20px; top: -110px; }
            

    #menu_sidebar ul li.lang {
       line-height: 35px;
       padding: 5px 0px 5px 100px;
       margin-left: -5px;
    }
    
    #menu_sidebar ul li.lang a {
       width: 95px;
       background: url(images/menu/Button_100x24.png) no-repeat top left;
    }       

   /* ------------------------- SIDEBAR MENU FOR THE "MORE ABOUT BALI" PAGES ------------------------------------ */

    #sidebar ul li a:hover {font-style: italic; }
    
    #sidebar li {margin-left: 10px; margin-bottom: 10px; }    
    
    #sidebar li.travel {
       line-height: 1.5em;
       padding-left: 18px;
       background: url(images/travel_14x22.png) no-repeat center left;
    }
    
    #sidebar ul li a.text {   
       color: #fcfca0;
       font-family: "Century Gothic", Verdana;
       font-weight: 600;
       font-size: 0.95em;       
    }
    
    #sidebar li.jump {
       line-height: 1em;
       padding-left: 15px;
       background: url(images/asterisk_12x12.png) no-repeat center left;
    }        

    #sidebar li.symbol {
       font-size: 14px;
       line-height: 20px;
       padding: 10px 0px 10px 50px;
    }
                
    .dancer {background: url(images/symbols/dancer_43x60.png) no-repeat top left; }
     
    .temple {background: url(images/symbols/tempel_35x51.png) no-repeat center left; }     
     
    .museum {background: url(images/symbols/museum_icon_35x33.png) no-repeat center left; }
    
    .golf {background: url(images/symbols/golf_50x34.png) no-repeat center left; }    
    
    .shoes {background: url(images/symbols/shoes_40x41.png) no-repeat center left; }        
    
    .surfboard {background: url(images/symbols/surfboard_45x45.png) no-repeat center left; }
    
    .raft {background: url(images/symbols/raft_50x32.png) no-repeat center left; }    
    
    .horseback {background: url(images/symbols/horseback_40x33.png) no-repeat center left; }    
    
    .bicycle {background: url(images/symbols/bicycle_45x32.png) no-repeat center left; }    
    
    .hotspring {background: url(images/symbols/hot_springs_43x25.png) no-repeat center left; }
    
    .waterfall {background: url(images/symbols/waterfall_33x50.png) no-repeat bottom left; }    
    
    .monkey {background: url(images/symbols/monkey_37x50.png) no-repeat center left; }    
        
    .orchid {background: url(images/symbols/orchid_48x45.png) no-repeat center left; }
    
    .botanical {background: url(images/symbols/botanical_45x45.png) no-repeat center left; }    
    
    .tiger {background: url(images/symbols/tiger_44x40.png) no-repeat center left; }    
      
    .bird {background: url(images/symbols/bird_32x45.png) no-repeat center left; }
    
    .elephant {background: url(images/symbols/elephant_48x40.png) no-repeat center left; }
    
    .butterfly {background: url(images/symbols/butterfly_40x28.png) no-repeat center left; }     
    
    .cambodja {background: url(images/symbols/cambodja_32x29.png) no-repeat center left; }       

    .grapes {background: url(images/symbols/grapes_34x50.png) no-repeat center left; }

    .bongo {background: url(images/symbols/bongo_45x30.png) no-repeat center left; }

    .pot {background: url(images/symbols/pot_21x30.png) no-repeat center left; }

    .bottle {background: url(images/symbols/bottle_16x55.png) no-repeat center left; }

    .garuda {background: url(images/symbols/garuda_38x55.png) no-repeat center left; }

    .mask {background: url(images/symbols/mask_25x65.png) no-repeat center left; }

    .earring {background: url(images/symbols/earring_19x40.png) no-repeat center left; }

    .stonehead {background: url(images/symbols/stonehead_34x45.png) no-repeat center left; }                
        

/* --- CONTENT LAYOUT AND DISPLAY STYLES ----------------------------------------- */
     
    #content a.link {border-bottom: 1px dotted #fcfca0; color: #fcfca0; }
    
    #content a.link:hover {border-bottom: 1px dotted #000066; color: #000066; }     

	.jump_map {
	    margin: 1em 10px 0.4em 10px;
	    padding-top: 0.7em;  
   		position: relative;
	    padding-left:80px;
  	}

	a.link_map {
       	position: absolute; 
        left: 5px;
     	top: 0px;
      	width: 60px;
      	height: 39px; 			
    }

	a.link_map:hover {background-position: bottom left; }	  
	  
	a.map_bali {background: transparent url(images/bg/bali_lembongan_62x78.png) top left; }
	a.map_lombok {background: transparent url(images/bg/lombok_62x78.png) top left; }	    
	a.map_N_sulawesi {background: transparent url(images/bg/north_sulawesi_62x78.png) top left; }	  
	a.map_W_flores {background: transparent url(images/bg/west_flores_62x78.png) top left; }
    
	#content a.jump_back {
        border: 1px solid #69C;
        display: block;
		height: 1.3em;
	    line-height:1.3em;
        width: 9em;
        color: #FFF;
        background-color: #036;
	    margin-right: 15px;
        padding: .2em 0;
        text-align: center;
        text-decoration: none;
  	    font-size: 0.7em;
	    font-weight:normal;
      }
	  
	#content a:hover.jump_back {
        border: 1px solid #036;
        background-color: #69C;
    }    

    #content a.mt2 {margin-top: 1.3em; }  /* -- divepages: to bring the back-to-map on the same height as h2 -- */
        
    #content p {  
        margin: 10px 15px 10px 10px;
        font-size: 0.9em;
        line-height: 1.5em;
        text-align: justify;
        letter-spacing: 0.04em;               
    }
    
	#content div.attention {margin:0 15px 0 10px; padding:5px 10px 5px 10px; border:2px dotted #00008b; font-style:italic; font-size:0.9em; }    

    #content ul.calender {padding-left: 20px; clear: both; }   /* for the page: more_about_bali */ 
    
    #content ul.calender li {
        float: left; 
        line-height: 1.5em; 
        vertical-align: middle; 
        text-align:left;
        font-size: 90%;
    }      
    
    #content ul.calender li.day {width: 12em; }
    
    #content ul.calender li.date {
        width: 12em;
        font-weight: 600;
        font-family: "Century Gothic", Verdana;
    }
    
    #content ul.calender li.event {
        width: 20em;
        font-style:italic;
    }
   
	
/* -- FOOTER LAYOUT AND DISPLAY STYLES -------------------------------------- */

    #footerLeft {
        float: left;
        width: 61%;
        height: 50px;
        line-height:25px;
        text-align: left;
        padding-left:5px;
        background: url(images/bg/corner_LO_5C6A8F_12x12.gif) no-repeat bottom left;
    }
    
    #footerLeft .contact {
        position:relative;
        bottom:5px;
        left:5px;   
    }

    #footerLeft a.link, #footerRight a.link {color: #EEE;}
    
    #footerLeft a:hover.link, #footerRight a:hover.link {
        text-decoration: underline;
        color: #FFF;
    }

    #footerRight {
        float: right;
        width: 38%;
        height: 50px;
        line-height:50px;
        text-align: right;
        background: url(images/bg/corner_RO_5C6A8F_12x12.gif) no-repeat bottom right;
    }

    #footerRight .sitemap {
		color: #EEE;
	 	float: right;
		font-style: normal;
	    margin-left:5px;
		margin-right:10px;
    }
    
    #footerRight ul {
        margin-right: 5px;
    }
    
    #footerRight li {
        width: 30px;
        height: 19px;  /* hoogte vlaggetje + 3px verschuiven */
        float: right;
        margin: 18px 10px 0px 3px;
        overflow: hidden;   /* anders verchuift de hele pagina tijdens het springen in de HTML met anchors */
    }
 
    #footerRight li a {
        background-position: 0px 0px;
        display: block;
        float: right;
        width: 30px;        /* --- dezelfde breedte als de vlag anders wordt de vlag zo lang als de tekst ----- */
        margin-right: 0px;
        padding-top: 30px;  /* ----- dit verschuift de tekst naar beneden en uit beeld met overflow: hidden  ----- */
		background-repeat: no-repeat;
    }
        
    #footerRight li a:hover, #footerRight li a.active {background-position: 0px -47px; }  /* ----- sliding-door techniek --- */
    
    #footerRight li.EN a {background-image: url(images/menu/uk_2tone.png); }      
    
    #footerRight li.NL a {background-image: url(images/menu/nl_2tone.png); }
    
    #footerRight li.DE a {background-image: url(images/menu/de_2tone.png); }