/* ------------------------------------------------- */
/* COMMON STYLES
/* ------------------------------------------------- */
body { background-color:#87D9F8; margin:0; padding:0; font:13px/18px Georgia, "Times New Roman", serif; color:#006BB3; }
img { display:block; }
input:focus { outline:none; }
h1 { font:35px/36px Georgia, "Times New Roman", serif; color:#FFF; padding:18px 5px; margin-bottom:10px; }
em { font-style:italic; }
h1 span { color:#006BB3; }
hr { border:1px dotted #CCC; color:transparent; background-color:transparent; margin-bottom:18px; }

/* ------------------------------------------------- */
/* LAY-OUT STYLES
/* ------------------------------------------------- */
#wrapper { width:960px; position:relative; overflow:hidden; margin:0px auto; }
#wrapper #header { float:left; width:960px; height:470px; background:url(../img/bg-nav.png) repeat-x left bottom; margin-top:55px; }
#wrapper #header #menu { float:left; margin-left:65px; height:270px; }
#wrapper #content { float:left; width:960px; }
#wrapper #footer { float:left; width:960px; margin-bottom:40px; }

/* ------------------------------------------------- */
/* MENU STYLES
/* ------------------------------------------------- */
#menu { list-style:none; }
#menu li { display:inline; height:270px; list-style:none; }
#menu li a { float:left; display:block; height:220px; background:url(../img/menu.png) no-repeat 0px 0px; }
#menu li a span { display:none; }

#menu #btn01 a { width:142px; background-position:0px 0px; }
#menu #btn02 a { width:156px; background-position:-142px 0px; }
#menu #btn03 a { width:143px; background-position:-298px 0px; }
#menu #btn04 a { width:179px; background-position:-441px 0px; }

#menu #btn01 a:hover { width:142px; background-position:0px -220px; }
#menu #btn02 a:hover { width:156px; background-position:-142px -220px; }
#menu #btn03 a:hover { width:143px; background-position:-298px -220px; }
#menu #btn04 a:hover { width:179px; background-position:-441px -220px; }

/* ------------------------------------------------- */
/* HOMEPAGE STYLES
/* ------------------------------------------------- */
#news-flash { float:left; width:110px; height:210px; background:url(../img/bg-news-flash.png) no-repeat 0px 0px; padding:60px 55px 0px 110px; font-size:11px; line-height:120%; }
#news-flash a { text-decoration:none; color:#006BB3; }
#news-flash a:hover { text-decoration:none; color:#000; }

/* ------------------------------------------------- */
/* PORTAL STYLES
/* ------------------------------------------------- */
#content h1.portal { float:left; text-indent:-10000em; background: url(../img/tt-etiket-een-winkel-vol-verhalen.png) no-repeat scroll top left; width: 960px; height: 130px; }
#content div.col { float:left; width:240px; }
#content div.col h2 { width:240px; height:80px; text-indent:-10000em;  }
#content div.col p { padding:20px; }
#content img.sub-title { margin-left:30px; margin-bottom:30px; }
#content #bucket-01 h2 { background:url(../img/sub-tt-een-verhaal-van-winkelen-en-genieten.png) no-repeat scroll top left; }
#content #bucket-03 h2 { background:url(../img/sub-tt-een-verhaal-van-poezie-in-je-hoofd-en-op-je-kussensloop.png) no-repeat scroll top left; }
#content #bucket-02 h2 { background:url(../img/sub-tt-een-verhaal-van-heel-veel-prenten-en-woorden.png) no-repeat scroll top left; }
#content #bucket-04 h2 { background:url(../img/sub-tt-een-verhaal-van-grote-mensen.png) no-repeat scroll top left; }
#content div.item { float:left; width:430px; padding-left:30px; margin-bottom:60px; }
#content div.item h2 { font-size:16px; padding:12px 0px 2px 10px; border-top:2px dotted #FFF; color:#006BB3; line-height:18px; text-transform: uppercase; }
#content div.item h3 { font-size:20px; padding:0px 10px 12px 10px; border-bottom:2px dotted #FFF; color:#036; line-height:18px; font-weight:bold; margin-bottom:18px; text-transform: uppercase; }
#content div.item h3 span { font-size:13px; color:rgb(0, 107, 179); }
#content div.item img { float:left; margin:0 15px 0 20px; }
#content div.item p { padding:0px 10px 18px 20px; font-size:14px; color:#036; }
#content div.item p.intro { font-style:italic; color:#000; }

/* ------------------------------------------------- */
/* PICTURE STYLES
/* ------------------------------------------------- */
#content div.item div.pictures { float:left; clear:both; background:#A9DFF7; padding:0; margin:0; overflow:hidden; padding:5px 5px 0px 0px; margin-left:20px; margin-top:20px; }
#content div.item div.pictures img { padding:0; margin:0; margin-left:5px; margin-bottom:5px; }

/* --------------------------------------------------------- */
/* FOOTER STYLES
/* --------------------------------------------------------- */
#footer div { float:left; width:480px; height:190px; border-top:24px solid #71acc5; }
#footer #montage { float:left; margin-top:60px; margin-bottom:15px; }
#footer #openingsuren { text-indent:-1000em; background:url(../img/footer-openingsuren.png) no-repeat 0px 0px; }
#footer #nieuwsbrief { position:relative; background:url(../img/footer-nieuwsbrief.png) no-repeat 0px 0px; }
#footer #nieuwsbrief.alone { float:left; margin-left:290px; width:460px; height:190px; border-top:2px dotted #FFF; }
#footer #nieuwsbrief label { position:absolute; top:25px; left:217px; line-height:18px; font-size:14px; color:#006BB3; width:150px; cursor:pointer; }
#footer #nieuwsbrief input { position:absolute; top:66px; left:217px; font:16px/16px Georgia, "Times New Roman", serif; color:#71acc5; width:226px; padding:15px 12px; background:transparent; border:none; }
#footer #nieuwsbrief button { position:absolute; top:70px; left:135px; background:transparent url(../img/btn-schrijf-me-in.png) no-repeat 0px 0px; width:115px; height:113px; border:none; cursor:pointer; }
#footer #nieuwsbrief button:hover { background:transparent url(../img/btn-schrijf-me-in.png) no-repeat 0px -113px; }
#footer #nieuwsbrief button span { display:none; }
#footer #nieuwsbrief #feedback { position:absolute; top:125px; right:8px; border:none; height:30px; width:210px; color:#036; }