/* ============== 
    Reset
   ===============*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{ border:0}


/* ============== 
    Tags
   ===============*/
body
{
    background-image:url(images/bgPage.jpg);
    background-position: center top;
    font-family: Helvetica, Arial;
    margin: 0;
    font-size: .85em;
}

h1{ font-size: 1.5em; padding-bottom: .5em;}
h2{ font-size: 1.35em; padding-top: .5em; padding-bottom: 1em; }
h3{  padding-top: .5em; padding-bottom: 1em;  }
h4{ text-decoration: underline; font-size: .85em; }
p{ margin-bottom: 1em; line-height: 1.5em; font-size: .85em; }

a{ color: Black; }
a:visited{ color: #4F4F4F; }

label
{
    display: block;
    margin-bottom: .25em;
}

label span{ font-size: .95em; }

input[type=text], textarea
{
    border: 0 none;
    padding: 3px 3px;
    font-family: arial;
    font-size: 1em;
    width: 350px;
}

textarea
{
    height: 8em;
}

form
{
    padding: 20px;
    border: 1px dashed gray;
    margin-bottom: 2em;
    margin-top: 2em;
    clear: both;
}

td
{
    padding: 2px;
}

strong
{
    font-weight: bold;
}
/* ============== 
    General
   ===============*/
   
#NoJs{
    background-color: #FFFFE1;
    text-align: center;
    padding: .75em;
    color: Red;
}
#Website
{
    background: repeat-x url(images/bgFlag.jpg);
    background-position: center 301px;
}

#Page
{
    background-image:url(images/bgMiddle.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    overflow: hidden;
}

#ContentMiddle 
{
    
    float:left;
}
    
    #ContentMiddle #LanguageSelector
    {
        margin-top: 1em;
        margin-bottom: 1em;
        overflow: hidden;
        float: right;
        font-size: .75em;
        
    }
    
    #ContentMiddle #LanguageSelector li
    {
        float: left;
    }
    
    #ContentMiddle #LanguageSelector a
    {
        display: block;
        margin-right: 1px;
        text-decoration: none;
        padding: 3px;
    }
    
    #ContentMiddle #LanguageSelector a:hover, #ContentMiddle #LanguageSelector a.selected
    {
        background-color: Black;
        color: White;
    }
    
#ContentAll
{
    margin-bottom: 1em;
    overflow: hidden;
    width: 630px; 
    background-image:url(images/bgPage.jpg);
    margin: 0 auto;
}


#ContentLeft
{
    height: 600px;    
    float: left;    
}

a.index 
{
    background:repeat-no url(images/logo.jpg); 
    display: block;
    width: 190px;
    height: 160px;
}

#Navigation 
{
    margin-bottom: 2em;
    font-size: .8em; 
    overflow: hidden; 
    clear: both;
}

#Navigation li
{
    float:left;
}

#Navigation a
{
    width: 70px;
    padding-top: 60px;
    height: 15px;
    display: block;
    text-align: center;    
    background-repeat: no-repeat;
    text-decoration: none;
    background-image: url(images/links.jpg);
    color: #5F5F5F;
}

#Navigation a:hover{ color: Black; }


/* Different link styles (icons) */

#Navigation #Menu{ background-position:0px 0px; }
#Navigation #Menu:hover, #Navigation #Menu.selected{ color: Black; background-position:-630px 0px; }

#Navigation #Reserveer{ background-position:-70px 0px; }
#Navigation #Reserveer:hover, #Navigation #Reserveer.selected{ color: Black; background-position:-700px 0px; }

#Navigation #Gastenboek{ background-position:-140px 0px; }
#Navigation #Gastenboek:hover, #Navigation #Gastenboek.selected{ color: Black; background-position:-770px 0px; }

#Navigation #Fotos{ background-position:-210px 0px; }
#Navigation #Fotos:hover, #Navigation #Fotos.selected{ color: Black; background-position:-840px 0px; }

#Navigation #Catering{ background-position:-280px 0px; }
#Navigation #Catering:hover, #Navigation #Catering.selected{ color: Black; background-position:-910px 0px; }

#Navigation #Personeel{ background-position:-350px 0px; }
#Navigation #Personeel:hover, #Navigation #Personeel.selected{ color: Black; background-position:-980px 0px; }

#Navigation #Links{ background-position:-420px 0px; }
#Navigation #Links:hover, #Navigation #Links.selected{ color: Black; background-position:-1050px 0px; }

#Navigation #Contact{ background-position:-490px 0px; }
#Navigation #Contact:hover, #Navigation #Contact.selected{ color: Black; background-position:-1120px 0px; }

#Navigation #Events{ background-position:-560px 0px; }
#Navigation #Events:hover, #Navigation #Events.selected{ color: Black; background-position:-1190px 0px; }

#Content
{
    clear: both;
    padding: 10px 30px;
}

#Footer
{
    clear: both;
    text-align: center;
    font-size: .75em;
    margin: 0em auto 2em;
    border: 1px dashed #9F9F9F;
    width: 450px;
    padding: .75em;
    line-height: 2em;
    color: #4F4F4F;
    clear: both;
}

#Footer div{color: Black;}

#Footer a, #Footer span
{
    text-decoration: none;
    color: Black;
}

#Intro
{
    border: 1px dashed #9F9F9F;
    margin: 2em 0;
    line-height: .5em;
}

/* ============== 
    Validation
   ===============*/
.validation-summary-errors
{
    list-style-type: disc !important;
    padding-left: 1em;
    margin: 0;
    margin-bottom: 1em;
}
.validation-summary-errors li 
{
    color: Red;
    padding: 0 !important;
    margin: 0 !important;
}

/* ============== 
    Menu(food)
   ===============*/

#MenuTypes
{
    line-height: 1.5em;
    margin-bottom: 1.5em;
}

#MenuTypes a 
{
    color: Black; 
    text-decoration: none; 
    font-size: .9em;
}

#MenuTypes a:visited 
{
    color: #4F4F4F;
}

#MenuTypes a:hover 
{
    text-decoration: underline; 
}


#MenuTitle
{
    background-image:url(images/menuTop.jpg);
    height: 101px;
}

#MenuTitle h1
{
    padding: 65px 40px;
}

#MenuContent
{
    background-image:url(images/menuRepeater.jpg);
    padding: 0 40px;
    overflow: hidden;
    line-height: 2em;
}

#MenuBottom
{
    background-image:url(images/menuBottom.jpg);
    height: 122px;
}


/* ============== 
    Personeel
   ===============*/
#PersoneelContent
{
    margin-top: 1em;
}
#PersoneelContent li{ float: left; width: 285px; height: 150px; }   
#PersoneelContent .face
{
    margin-right: 15px;
    float:left;
}

#PersoneelContent h2
{
    padding: 0;
    margin: 0;
    margin-bottom: .5em;
}

#PersoneelContent a{ text-decoration: none; }


/* ============== 
    Links
   ===============*/
.linksList
{
    line-height: 1.75em;
    margin-bottom: 2em;
}

.linksList a{ text-decoration: none;}
.linksList a:hover{ text-decoration: underline; }

/* ============== 
    Events
   ===============*/
#Events span
{
    font-size: .75em;
}
#Events li 
{
    padding-bottom: 1em;
}
#Events h2
{
    padding-bottom: 0;
}

/* ============== 
    Gastenboek
   ===============*/
   
#Guestbook
{
    overflow: hidden;
}

#Guestbook form
{
}

#Guestbook ul
{
    margin-right: 10px;
    display: block;
}

#Guestbook ul li
{
    margin-bottom: 1em;
    padding-bottom: 1em;
}

#Guestbook h3
{
    font-weight: normal;
    font-size: 1.15em;
    padding-bottom: .5em;
}

#Guestbook h3 strong
{
    font-weight: bold;
}


/* ============== 
    foto's
   ===============*/
   
#GalleryContainer
{
    overflow: hidden;
    width: 570px;
    margin-top: 1.5em;
}

#Gallery
{
    width: 10000px;
}   

#Gallery li
{
    margin-bottom: 15px;
    margin-right: 15px;
}

#NaviContainer
{
    clear: both;
    width: 56px;
    margin: auto;
}

#NaviContainer img
{
    margin: 10px;
    cursor: pointer;
}

/* ============== 
    Contact
   ===============*/

#OpeningsUren 
{
    border: 1px dashed black; 
    padding: 10px;
    line-height: 1.5em;
}

/* ============== 
    Tafels
   ===============*/
   
#Tafels
{
    width: 300px;
    float: left;
    margin-bottom: 4em;
    overflow: hidden;
}
#Tafels #BigImage
{
    height: 250px;
    overflow: hidden;
    border: 5px solid black;
    display: none;
    position: relative;
}

#Tafels #BigImage img
{
    position:absolute;   
    top: 0;
    left: 0; 
    height: 250px;
}

#Tafels ul
{
    border: 1px dashed gray;
    border-top: none 0;
    overflow: hidden;
    padding: 10px 10px 0;
}

#Tafels li
{
    float: left;
    width: 129px;
    margin-bottom: .75em;
    margin-right: 10px;
    overflow: hidden;
}

#Tafels ul li img
{
    border: 3px solid black;
    display: block;
    float: left;
    margin-right: 10px;
}

#Tafels p
{
    margin: 0;
    padding: 11px 0 0 0;
}