/* -------------------------------------------
project:	Paletuviers
date:		15/01/2010
------------------------------------------- */

/* Reset (a mix of Eric Meyer's & Yahoo's reset)
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4,
h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, font, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
:focus { outline: 0; }
body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
table { border-collapse:collapse; border-spacing:0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before,
blockquote:after,
q:before,
q:after { content: ""; }
blockquote,
q { quotes: "" ""; }

/* GENERAL
------------------------------------------- */
body { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; line-height: 20px; color: #666; }
#locaties a {  color:#666; text-decoration: none; }
#footer a {  color:#00ABB6; text-decoration: underline; }
a {  color:#666; text-decoration: underline; }
a:hover {  color:#05C0CC; text-decoration: underline; }

/* HEADINGS
------------------------------------------- */
h1 {color:#00ABB6; font-size: 23px; font-weight: normal; margin-bottom: 20px;}
h2 {color:#05C0CC; font-size: 18px; font-weight: normal; margin-bottom: 20px; font-style: italic;}
h3 { color:#666; font-size:14px; background-color: #F0F0F0; min-height: 23px; margin-top: 30px; padding-left:10px; padding-top: 3px;font-weight: normal; margin-bottom: 30px; font-style: italic;}
h4 { color:#666; font-size:14px; background-color: #F0F0F0; min-height: 23px; margin-top: 10px; padding-left:10px; padding-top: 3px;font-weight: normal; font-style: italic;}
h5 {color:#00ABB6; font-size: 14px; font-weight: bold; margin-bottom: 5px; font-style: italic;}
h6 {color:#05C0CC; font-size: 13px;  margin-bottom: 5px; text-transform:capitalize;}

/* HELPERS
------------------------------------------- */
hr { color: #CCC; background-color: #CCC; border: 0; height: 1px; margin: 0 0 30px 0 ; clear:both; }

.center { text-align: center;}
.small {font-size: 10px;line-height: 15px;}
.blue{ color:#00ABB6;}
.code{color:#00ABB6;float: right; margin-top: -20px; margin-right: 10px;} 
.greybg {background-color:#F9F9F9;}
.textindent { text-indent: 20px;}
.border{ border: solid 1px #CCC}

.sidemenu{ top: 170px; position: absolute; margin-left: 240px;}

.automargin{ margin:0 auto;}
.marginright12{ margin-right: 12px;}
.marginbot40{ margin-bottom: 40px;}
.marginbot15{ margin-bottom: 15px;}
.marginR50{ margin-right: 50px;}
.marginL30{ margin-left: 50px;}
.padding54 { padding: 0 54px;}
.paddingR24{ padding-right: 24px;}
.paddingR70{ padding-right: 70px;}
.padding20{ padding:20px;}
.paddingbot6{padding-bottom: 5px;}
.imgleft{ float:left; padding-right: 24px}   





/* LAYOUT
------------------------------------------- */

#home_lang { width: 350px; margin: 0 auto; margin-top: 30px;}
  #home_lang li a{ float: left; border: solid 1px #CCC; background:url(../../lang.jpg) no-repeat; display:block; text-indent: -9999px; height:32px;} 
   #home_lang li.fr a{width: 100px; background-position: 15px 12px;  margin-right: 10px; } 
   #home_lang li.fr a:hover{ border: solid 1px #05C0CC; } 
   #home_lang li.nl a{width: 120px; background-position: -96px 12px; margin-right: 10px;} 
   #home_lang li.nl a:hover{border: solid 1px #05C0CC; } 
   #home_lang li.en a{width: 100px; background-position: -225px 12px;} 
   #home_lang li.en a:hover{border: solid 1px #05C0CC;} 

#header_home { margin: 0 auto; background: url(../images/bg_menu.jpg) repeat-x; background-position: 0px 310px; }
#header { margin: 0 auto; background: url(../images/bg_menu.jpg) repeat-x; background-position: 0px 169px; height:235px; margin-bottom: 25px;}
#wrapper{ width:960px; margin:0 auto;}
#logo_home { position: relative; text-align: center; margin-bottom: 20px; margin-top:10px;}
#logo { position: absolute; float:left;}
 #menu { height: 70px; font-size: 14px; width: 711px;}
  #menu ul {display: block; width: 711px;}
  #menu li { float: left; margin-top: 12px; }
  #menu li a { padding: 8px 10px 0px 10px; background: url(../images/menu_slct.png) no-repeat; height: 36px; display:block; text-indent:-9999px;}
   #menu li.item1 a {background-position: 0px 0px; width: 101px;}
   #menu li.item1 a:hover{background-position: 0px -44px;}
   #menu li.item1 a.selected {background-position: 0px -44px;}
   #menu li.item2 a { background-position: -121px 0px; width: 81px;}
   #menu li.item2 a:hover {background-position: -121px -44px;}
   #menu li.item2 a.selected {background-position: -121px -44px;}
   #menu li.item3 a {background-position: -223px 0px; width: 93px;}
   #menu li.item3 a:hover {background-position: -223px -44px;}
   #menu li.item3 a.selected {background-position: -223px -44px;}
   #menu li.item4 a {background-position: -346px 0px; width:75px; margin-left: 10px;}
   #menu li.item4 a:hover {background-position: -346px -44px;}
   #menu li.item4 a.selected {background-position: -346px -44px;}
   #menu li.item5 a {background-position: -443px 0px;width:38px;}
   #menu li.item5 a:hover {background-position: -443px -44px;}
   #menu li.item5 a.selected {background-position: -443px -44px;}
   #menu li.item6 a {background-position: -501px 0px; width:98px; }
   #menu li.item6 a:hover {background-position: -501px -44px;}
   #menu li.item6 a.selected {background-position: -501px -44px;}
   #menu li.item7 a {background-position: -619px 0px; width: 72px;}
   #menu li.item7 a:hover {background-position: -619px -44px;}
   #menu li.item7 a.selected {background-position: -619px -44px;}
#content{ margin: 0 auto; width: 960px;}
 #slideshow{ height: 360px;}
#locaties{ margin-bottom: 50px; height: 278px; margin-top: 30px; width: 960px; margin-bottom: 50px;}
 #locaties ul{}
   #locaties li { width: 276px; float: left;}
   #locaties li a{ background: url(../images/home_locaties.jpg) no-repeat; display: block; border: #0F0; height: 88px; padding: 190px 20px 0 20px;}
    #locaties li.toubacouta a{ background-position: 0px 0px;}
    #locaties li.toubacouta a:hover{ background-position: 0px -292px; color: #FFF;}
    #locaties li.toubacouta a.selected{ background-position: 0px -292px; color: #FFF;}
    #locaties li.toubacouta{ background-position: 0px -292px; color: #FFF;}
    #locaties li.eiland a{ background-position: -288px 0px;}
    #locaties li.eiland a:hover{ background-position: -288px -292px;color: #FFF;}
    #locaties li.eiland a.selected{ background-position: -288px -292px;color: #FFF;}
    #locaties li.strand a{background-position: -575px 0px;}
    #locaties li.strand a:hover{background-position: -575px -292px;color: #FFF;}
    #locaties li.strand a.selected{background-position: -575px -292px;color: #FFF;}

#footer{ overflow: hidden; background: url(../images/bg_footer.jpg) repeat-x; width: 100%; height:65px; text-align: center; padding-top: 25px;}

.locatiemenu{ width: 216px; float: left;}
 .locatiemenu ul{}
  .locatiemenu li a{ background-image: url(../images/menulocatie.jpg); display: block; height: 65px;}
   .locatiemenu li.fotos a { background-position: 0px 0px;}
   .locatiemenu li.fotos a:hover { background-position: -222px 0px;}
   .locatiemenu li.fotos a.selected { background-position: -222px 0px;}
   .locatiemenu li.excursies a { background-position: 0px -65px;}
   .locatiemenu li.excursies a:hover { background-position: -222px -65px;}
   .locatiemenu li.excursies a.selected { background-position: -222px -65px;}
   .locatiemenu li.tarieven a { background-position: 0px -130px; padding-bottom: 6px;}
   .locatiemenu li.tarieven a:hover { background-position: -222px -130px;}
   .locatiemenu li.tarieven a.selected { background-position: -222px -130px;}
   
   .locatiemenu li.fotos2 a { background-image:url(../images/menulocatie2.jpg);  background-position: 0px 0px;}
   .locatiemenu li.fotos2 a:hover { background-position: -222px 0px;}
   .locatiemenu li.fotos2 a.selected { background-position: -222px 0px;}

   
.submenu{ width: 215px; float: left;}
 .submenu ul{}
  .excursies .submenu li a{ background-image: url(../images/menuexcursie.jpg); display: block; height: 41px;}
   .submenu li.subitem01 a { background-position: 0px 0px;}
   .submenu li.subitem01 a:hover { background-position: -217px 0px;}
   .submenu li.subitem01 a.selected { background-position: -217px 0px;}
   .submenu li.subitem02 a { background-position: 0px -41px;}
   .submenu li.subitem02 a:hover { background-position: -217px -41px;}
   .submenu li.subitem02 a.selected { background-position: -217px -41px;}
   .submenu li.subitem03 a { background-position: 0px -82px;}
   .submenu li.subitem03 a:hover { background-position: -217px -82px;}
   .submenu li.subitem03 a.selected { background-position: -217px -82px;}
   .submenu li.subitem04 a { background-position: 0px -123px;}
   .submenu li.subitem04 a:hover { background-position: -217px -123px;}
   .submenu li.subitem04 a.selected { background-position: -217px -123px;}
   .submenu li.subitem05 a { background-position: 0px -164px;}
   .submenu li.subitem05 a:hover { background-position: -217px -164px;}
   .submenu li.subitem05 a.selected { background-position: -217px -164px;}
   .submenu li.subitem06 a { background-position: 0px -205px;}
   .submenu li.subitem06 a:hover { background-position: -217px -205px;}
   .submenu li.subitem06 a.selected { background-position: -217px -205px;}
   .submenu li.subitem07 a { background-position: 0px -246px;}
   .submenu li.subitem07 a:hover { background-position: -217px -246px;}
   .submenu li.subitem07 a.selected { background-position: -217px -246px;}
   .submenu li.subitem08 a { background-position: 0px -287px;}
   .submenu li.subitem08 a:hover { background-position: -217px -287px;}
   .submenu li.subitem08 a.selected { background-position: -217px -287px;}
   .submenu li.subitem09 a { background-position: 0px -328px;}
   .submenu li.subitem09 a:hover { background-position: -217px -328px;}
   .submenu li.subitem09 a.selected { background-position: -217px -328px;}
   .submenu li.subitem10 a { background-position: 0px -369px;}
   .submenu li.subitem10 a:hover { background-position: -217px -369px;}
   .submenu li.subitem10 a.selected { background-position: -217px -369px;}

  .info .submenu li a{ background-image: url(../images/menuinfo.jpg); display: block; height: 42px;}
  .contact .submenu li a{ background-image: url(../images/menucontact.jpg); display: block; height: 42px;}
   
#subcontent { width: 706px; float: left; margin-left: 30px; margin-bottom: 50px;}
 .images { height: 341px;}
 .text { margin: 30px 26px 0 20px;}

  .images li{ float: left; margin-right: 10px; margin-bottom: 5px }

#overzicht{ margin-left: 40px; height: 300px;} 
 #overzicht li {float: left; margin-right: 5px; margin-bottom: 5px;}
  #overzicht li a { background:url(../images/excursies.jpg) no-repeat; display: block; height: 141px; width: 171px;}
   #overzicht li.excursie01 a { background-position: 0px 0px;}
   #overzicht li.excursie01 a:hover { background-position: 0px -452px;}
   #overzicht li.excursie01 a:hover { background-position: 0px -452px;}
   #overzicht li.excursie02 a { background-position: -178px 0px;}
   #overzicht li.excursie02 a:hover { background-position: -178px 0px;}
   #overzicht li.excursie02 a:hover { background-position: -178px -452px;}
   #overzicht li.excursie03 a { background-position: -356px 0px;}
   #overzicht li.excursie03 a:hover { background-position: -356px -452px;}
   #overzicht li.excursie03 a:hover { background-position: -356px -452px;}
   #overzicht li.excursie04 a { background-position: -535px 0px;}
   #overzicht li.excursie04 a:hover { background-position: -535px -452px;}
   #overzicht li.excursie04 a:hover { background-position: -535px -452px;}
   #overzicht li.excursie05 a { background-position: 0px -149px;}
   #overzicht li.excursie05 a:hover { background-position: 0px -601px;}
   #overzicht li.excursie05 a:hover { background-position: 0px -601px;}
   #overzicht li.excursie06 a { background-position: -178px -149px;}
   #overzicht li.excursie06 a:hover { background-position: -178px -601px;}
   #overzicht li.excursie06 a:hover { background-position: -178px -601px;}
   #overzicht li.excursie07 a { background-position: -356px -149px;}
   #overzicht li.excursie07 a:hover { background-position: -356px -601px;}
   #overzicht li.excursie07 a:hover { background-position: -356px -601px;}
   #overzicht li.excursie08 a { background-position: -535px -148px;}
   #overzicht li.excursie08 a:hover { background-position: -535px -600px;}
   #overzicht li.excursie08 a:hover { background-position: -535px -600px;}
   #overzicht li.excursie09 a { background-position: 0px -297px;}
   #overzicht li.excursie09 a:hover { background-position: 0px -749px;}
   #overzicht li.excursie09 a:hover { background-position: 0px -749px;}
   #overzicht li.excursie10 a { background-position: -178px -297px;}
   #overzicht li.excursie10 a:hover { background-position: -178px -749px;}
   #overzicht li.excursie10 a:hover { background-position: -178px -749px;}


.col400{ width: 400px; float: left;} 
.col660{ width: 660px; float: left;} 
.col620{ width: 620px; float: left;} 
.col230{ width: 230px; float: left;} 
.col315{ width: 315px; float: left;} 
.col345{ width: 345px; float: left;} 
.col440{ width: 440px; float: left;} 
.col700{ width: 700px; float: left;}
.col200{ width: 200px; float: left;}



/* ELEMENTS
------------------------------------------- */
#google-maps {position: absolute; width: 661px; height: 299px; margin-top: 20px; margin-left: 19px;}
#madeby { display: absolute; margin-top: -23px; margin-left: 370px; }


/* Browser Fixes
-------------------------------------------------------------- */
.clearfloat { clear: both; }
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix {height: 1%; }