/* -------------------------------------------------------------------

	© Ess - Sibran Lens - www.e-ss.be
	
	1. Structure
	2. Header
	3. Navigation
	4. Column01
	5. Column02
	6. Column03
	7. Footer
	
	always include reset.css, it will reset your style
	for all browers, it includes the clearfix
	
	typography specs must be specified in typography.css
	form specs must be specified in forms.css
	
	ID en class naming => use capitals for seperation: navHome

------------------------------------------------------------------- */



/* ----- imports -------------------------------------------------- */

@import url(typography.css);
@import url(forms.css);

/* -------------------------------------------- */
/* -------------------------------------------- */
/*  aanzetten = display:block;
    afzetten  = display:none;										*/

#suggestions {display:block;}

/* -------------------------------------------- */
/* -------------------------------------------- */


/* -------------------------------------------------------------------------------------  1. Structure -------------------------------------------- */

body {background:#333333}
#container {
	background:#f3f1e9 url(/img/css_backgrounds/bg-content-top.jpg) no-repeat 29px top;
	min-height:500px;	height: auto !important; height: 500px;
	padding:0 0 0 39px;
	margin:-23px 0 0 0
}

.left	{ float: left; }
.right	{ float: right; }
.clear	{ clear: both; }
.hide	{ display: none; }
.first	{ margin-top: 0; padding-top: 0; }
.last	{ margin-bottom: 0; padding-bottom: 0; }

hr {display:none;}

a {outline:none;}


/* -------------------------------------------------------------------------------------  2. Logo ------------------------------------------------ */

#logo {background:#f3f1e9; height:62px;}
#logo h1 {margin:0; padding:0; position:absolute; left:58px; top:3px; width:159px; height:62px; background:url(/img/css_backgrounds/bg-logo.gif) no-repeat left top; z-index:10}
#logo h1 a {display:block; width:159px; height:62px; text-indent:-9999px;}
 

/* -------------------------------------------------------------------------------------  3. Navigation ------------------------------------------- */

/* navigation subpages */
ul#navigation {list-style:none; margin:0; margin:50px 0 0 45px; float:left}
ul#navigation li {float:left; margin:0 36px 0 0; padding:0;}

ul#navigation li a {display:block; height:23px; background:url(/img/css_backgrounds/bg-navigation.gif) no-repeat left 5px; text-indent:-9999px;}

ul#navigation li a#navSuggestions {width:76px; background-position:0px 4px;}
ul#navigation li a#navSuggestions:hover {background-position:0px bottom}
ul#navigation li a#navOurCards {width:76px; background-position:-113px 4px;}
ul#navigation li a#navOurCards:hover {width:76px; background-position:-113px bottom}
ul#navigation li a#navReservation {width:108px; background-position:-224px 4px;}
ul#navigation li a#navReservation:hover {width:108px; background-position:-224px bottom}
ul#navigation li a#navImages {width:42px; background-position:-365px 4px;}
ul#navigation li a#navImages:hover {width:42px; background-position:-365px bottom}
ul#navigation li a#navContact {width:96px; background-position:-443px 4px;}
ul#navigation li a#navContact:hover {width:96px; background-position:-443px bottom}
ul#navigation li a#navVacatures {width:69px; background-position:-576px 4px;}
ul#navigation li a#navVacatures:hover {width:69px; background-position:-576px bottom}
ul#navigation li a#navActivities {width:75px;background-position:-682px 4px;}
ul#navigation li a#navActivities:hover {width:75px; background-position:-682px bottom;}

#pageSuggestions ul#navigation li a#navSuggestions {background-position:0px bottom}
#pageOurCards ul#navigation li a#navOurCards {width:76px; background-position:-113px bottom}
#pageReservation ul#navigation li a#navReservation {width:108px; background-position:-224px bottom;}
#pageImages ul#navigation li a#navImages {width:42px; background-position:-365px bottom;}
#pageContact ul#navigation li a#navContact {width:96px; background-position:-443px bottom;}
#pageVacatures ul#navigation li a#navVacatures {width:69px; background-position:-576px bottom}
#pageActivities ul#navigation li a#navActivities {width:75px; background-position:-682px bottom;}

#content ul#subnavigation {list-style:none; border-bottom:1px solid #f3f1e9; margin:0 0 8px -10px; padding:25px 0 0 7px; width:460px;}
#content ul#subnavigation li {float:left; margin:0 10px 0 0; padding:0; background:none;}
#content ul#subnavigation li a {display:block; float:left; height:22px;padding:0 8px 0 0;}
#content ul#subnavigation li a span {display:block; height:17px; padding:5px 0 0 8px; float:left; cursor:pointer}

#content ul#subnavigation li.activeTab a, #content ul#subnavigation li a:hover {background:url(/img/css_backgrounds/bg-subnavigation02.gif) no-repeat right top;}
#content ul#subnavigation li.activeTab a span, #content ul#subnavigation li a:hover span {background:url(/img/css_backgrounds/bg-subnavigation01.gif) no-repeat left top;}


/* -------------------------------------------------------------------------------------  4. Content --------------------------------------------- */

#content	{clear:both; width:700px; background:url(/img/css_backgrounds/bg-content-repeat.gif) repeat-y 14px top; padding:15px 160px 0 51px}
#content p {margin:0; padding:0 0 1.5em 0}
#content ul {margin:0; padding:15px 0; list-style:none;}
#content ul li {background: url(/img/css_backgrounds/bg-li.gif) no-repeat left 5px; padding:0 0 8px 19px}

/* menu */
#content ul.menu {margin:0; padding:5px 0 15px 0; list-style:none;}
#content ul.menu li {padding:5px; margin:0 0 2px 0; background:#ebe7e5;}
#content ul.menu li.odd {background:#f8f6f5;}
#content ul.menu li .price {float:right; width:100px; text-align:right; position:relative;}

/* image thickbox gallery */
#content ul.imgGallery {list-style:none;}
#content ul.imgGallery li {background:none; float:left; padding:0 10px 10px 0; margin:0;}
#content ul.imgGallery li img {border:3px solid #F0F0E8;}

/* home button */
#homebutton {position:absolute; left:250px; top:22px; z-index:20; width:79px; height:35px;}

/* facebook */
#fb {position:absolute; left:580px; top:19px; z-index:20; width:350px;}
#homepage #fb {position:relative; left:0; top:0; margin:10px 0 0 25px;}
/* subpage box */
.subpageBox {width:330px; padding-right:20px; float:left;}

/* oudjaar */
#oudjaar {background:url(/img/general/oudjaar2008-subpage.jpg) no-repeat right bottom; padding-bottom:70px}

/* valentijn */
#valentijn {background:url(/img/general/valentijn2009-subpage.jpg) no-repeat right top; padding-top:180px}

/* facebook */
#facebook {left:862px; position:absolute; top:350px; z-index:1000;}

/* -------------------------------------------------------------------------------------  5. Footer --------------------------------------------- */

#containerFooter01 {background:#f3f1e9 url(/img/css_backgrounds/bg-containerFooter01.gif) repeat-x left bottom;}
#containerFooter01 div {width:980px; height:120px; background:url(/img/css_backgrounds/bg-footer01.jpg) no-repeat 24px top;}
#containerFooter02 div {width:930px; height:25px; background:url(/img/css_backgrounds/bg-footer02.jpg) no-repeat 24px top; padding:125px 50px 25px 0}


/* -------------------------------------------------------------------------------------  6. Homepage --------------------------------------------- */

/* z-index */
#homeGallery {z-index:1}
#homepage #content {z-index:2}
#homeOlives {z-index:3}
#homepage #logo h1 {z-index:4}

/* content part */
#homepage #content {
	position:absolute; top:79px; left:26px;
	width:474px; 
	background:#fff;
	border:1px solid #ccc;
	padding:50px 10px 15px 40px; margin:0 0 15px 0;
}

#homepage #intro {background:url(/img/css_backgrounds/bg-curl-top.gif) no-repeat left top; padding:10px 0 0 0; margin:0 0 0 -27px;}
#homepage #intro div#endCurl {background:url(/img/css_backgrounds/bg-curl-bottom.gif) no-repeat 458px top; height:26px; padding:8px 0 0 0}
#homepage #intro p {padding:0 39px 0 27px;}

#homepage #content ul {margin:0; padding:0 0 7px 0; list-style:none;}
#homepage #content ul li {background: url(/img/css_backgrounds/bg-li-home.gif) no-repeat left 5px; padding:0 0 8px 12px}

/* news */
#homepage #content #news {padding:8px; width:450px; margin:10px 0 10px -10px; background:#ebefca; border:3px solid #cdd59a; float:left;}
#homepage #content #news ul {padding:0; margin:0;}

/* buttons */
.buttons {padding:15px 0 15px 0; clear:both;}
.buttons img {float:left; margin:0 0 10px 0;}

/* box */
.boxWrap {width:200px; float:left; padding:15px 25px 0 0}
.box {width:177px; background:url(/img/css_backgrounds/bg-box-home-top.gif) no-repeat left top; padding:12px 13px 4px 10px;}
.box p {padding:0; margin:0; line-height:1.2em}
.boxBottom {width:200px; height:8px; background:url(/img/css_backgrounds/bg-box-home-bottom.gif) no-repeat left top;}
.boxLink {padding:5px 0 0 0;}

/* gallery slideshow */
#homeGallery {position:absolute; left:494px; top:4px; width:461px; height:347px; background:url(/img/css_backgrounds/bg-home-gallery.jpg) no-repeat left top;}
#homeGallery ul#gallerySlideShow {list-style:none; margin:32px 0 0 31px; padding:0; width:399px; height:269px; overflow:hidden}
#homeGallery ul#gallerySlideShow li {list-style:none; margin:0; padding:0}

/* olives */
#homeOlives {position:absolute; left:324px; top:0; width:170px; height:125px; background:url(/img/css_backgrounds/bg-home-olives.jpg) no-repeat left top; text-indent:-9999px;}

/* meta information */
#meta {position:absolute; left:562px; top:592px; width:417px; height:60px; background:url(/img/css_backgrounds/bg-home-meta.gif) no-repeat left top; text-indent:-9999px;}
#meta a#linkResto {display:block; width:57px; height:60px; float:left;}
#meta a#linkLavazza {display:block; width:90px; height:60px; float:left; margin:0 0 0 110px; display:inline;}


/* overwriting elements general website */
#homepage #container {background:none; background-color:#f3f1e9}

/* logo */
#homepage #logo h1 {position:absolute; left:36px; top:18px;}

/* footer */
#homepage #containerFooter01 div {background:none;}
#homepage #containerFooter02 div {background:none; padding:15px 0 40px 0px; text-align:right;}

/* subscribe */
#homepage #subscribe {width:246px; height:190px; position:absolute; left:596px; top:390px;}

/* special */
#special {margin:-18px 0 0 -10px; width:460px;}