/*main container, centered*/
body{
margin:0;
padding:0;
/*font-family:Helvetica Neue, Arial, Helvetica;*/
font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica Neue,Arial,Verdana,sans-serif;
font-size:12px;
background-color:#000;
line-height:1.5em;
}
h3{
margin-top:0;
margin-bottom:1em;
font-size:13px;
}
p{
margin-top:0;
}
a:link{ color:#0063a9; }
a:visited{ color:#0063a9; }

#outercontainer{
width:806px;
margin:auto;
}
#content{
color:white;
background-color:#000;
clear:both;
}

/**************** menu coding *****************/
#menu {
width: 100%;
background: #eee;
float: left;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 0px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

/*translations, an abuse of the menus for which i prepared but were not needed */
ul#eerste li ul li a{ color:blue; background-color:white; }
ul#tweede li ul li a{ color:blue; background-color:white; }
ul#derde li ul li a{ color:blue; background-color:white; }
ul#vierde li ul li a{ color:blue; background-color:white; }

/*logo hangs a bit out to the left*/
#logo{
display:block;
position:relative;
left:-13px;
padding-top:90px;
}

/*kop*/
#pagetop{
color:white;
background-color:#000;
height:288px;
}
/*styles om menu items eigen achtergrond plaatje te geven*/
#menu a{
display:block;
/*GEEN height geven, daar verslikt IE7 zich in en ziet geen :hover meer. Voor dimensies van de a een div er in zetten (beetje vies maar ja...) */
background-position: 0px 0px;
background-repeat: no-repeat;
background-color: #000;
background-attachment: scroll;
}
/*eerste*/
#menu a.eerste{
background-image: url(../img/menu-prima-out.gif);
background-repeat: no-repeat;
}
#menu a.eerste.selected{
background-image: url(../img/menu-prima-over.gif);
background-repeat: no-repeat;
}
#menu a.eerste:hover{
background-image: url(../img/menu-prima-over.gif);
background-color: #000;
}
#menu a.eerste div{
width:180px;
height:25px;
}
/* ul style om menu items eigen breedte te geven als menu geen gelijke breedtes kent */
#menu ul#eerste{
width:180px;
}
/*tweede*/
#menu a.tweede{
background-image: url(../img/menu-notizie-out.gif);
background-repeat: no-repeat;
}
#menu a.tweede.selected{
background-image: url(../img/menu-notizie-over.gif);
background-repeat: no-repeat;
}
#menu a.tweede:hover{
background-image: url(../img/menu-notizie-over.gif);
background-color: #000;
}
#menu a.tweede div{
width:365px;
height:25px;
}
/* ul style om menu items eigen breedte te geven als menu geen gelijke breedtes kent */
#menu ul#tweede{
width:365px;
}
/*derde*/
#menu a.derde{
background-image: url(../img/menu-receta-out.gif);
background-repeat: no-repeat;
}
#menu a.derde.selected{
background-image: url(../img/menu-receta-over.gif);
background-repeat: no-repeat;
}
#menu a.derde:hover{
background-image: url(../img/menu-receta-over.gif);
background-color: #000;
}
#menu a.derde div{
width:197px;
height:25px;
}
/* ul style om menu items eigen breedte te geven als menu geen gelijke breedtes kent */
#menu ul#derde{
width:197px;
}
/*vierde*/
#menu a.vierde{
background-image: url(../img/menu-winkel-out.gif);
background-repeat: no-repeat;
}
#menu a.vierde.selected{
background-image: url(../img/menu-winkel-over.gif);
background-repeat: no-repeat;
}
#menu a.vierde:hover{
background-image: url(../img/menu-winkel-over.gif);
background-color: #000;
}
#menu a.vierde div{
width:64px;
height:25px;
}
/* ul style om menu items eigen breedte te geven als menu geen gelijke breedtes kent */
#menu ul#vierde{
width:64px;
}
#horizontalline{height:54px; border-top:1px solid #fff;}
#linkerpaneel{float:left; width:500px; height:297px;}
#rechterpaneel{width:230px; float:right; padding-bottom:2em; font-size:100%; }
#rechterpaneel p:first-child{margin-top:-.3em;}

#footer{clear:both; background-image: url(../img/mozaik.png); background-repeat: repeat-x; height:80px; background-position:0px 30px;}

.recepttext{float:right; width:280px; height:375px; overflow:auto; color:white; background-color:black; padding:5px; font-size: 90%;}
.recepttext h3{margin-bottom:0; font-size: 11px;}
.recepttext h3:first-child{font-size: 12px;}

#TB_window .recepttext a:link{ color:#0063a9; font-size:120%; }
#TB_window .recepttext a:visited{ color:#ccc; }
#TB_window .recepttext a:hover{ color:#fff; }