/* --------------------------------------------------------- */
/* LAY OUT RULES
/* --------------------------------------------------------- */
html, body { height:100%; }
#wrapper { width:988px; position:relative; margin:0px auto; }
#wrapper #content-wrapper { float:left; width:772px; margin:4px; margin-right:0px; margin-bottom:0px; }
#wrapper #footer { float:left; width:772px; margin:14px 4px 4px 4px; font-size:9px; }
#wrapper #menu-bar { position:absolute; top:4px; right:4px; width:174px; padding:25px 15px; background:#FFF url(../img/bottom.png) no-repeat bottom center; min-height:400px; }
#wrapper #menu-bar #newsletter { position:absolute; bottom:25px; left:15px; width:174px; overflow:hidden; }
#wrapper #menu-bar #feedback { position:absolute; bottom:25px; left:0px; width:164px; overflow:hidden; background-color:#9C3; font-size:14px; line-height:16px; color:#FFF; padding:20px; }
p.first { font-size:13px; line-height:16px; }
img.new { position:absolute; top:0px; right:0px; }

#left { background-color:transparent !important; }
#left div.last { margin-right:0px; float:left; }
#right-column { overflow:hidden; height:935px; }
#right-column div.column { height:309px; }
#right-column div.column div.body { min-height:299px; }
#right-column div.column div.body a.btn { position:absolute; left:5px; bottom:4px; }

#hp-in-de-kijker div.column { height:319px; }
#hp-in-de-kijker div.column div.body { min-height:309px; }
#hp-in-de-kijker div.column div.body a.btn { position:absolute; left:5px; bottom:4px; }
/* --------------------------------------------------------- */
/* NEWSLETTER
/* --------------------------------------------------------- */
#newsletter h1 { font-size:12px; margin:0; padding:0; font-weight:normal; color:#444; background:url(../img/icon-newsletter.png) no-repeat; line-height:12px; padding-left:20px; }
#newsletter p { margin:0; padding:0; margin-top:5px; }
#newsletter input { margin:0; padding:3px; width:168px; background-color:#EEE; border:none; font:11px/11px Helvetica, Arial, sans-serif; color:#666; }
#newsletter input:focus { outline:none; background-color:#444; color:#FFF; }
#newsletter input.required { outline:none; background-color:#C00076; color:#FFF; }
#newsletter input.radio { width:auto; border:none; margin-right:3px; }
#newsletter label { margin-right:5px; text-transform:lowercase !important; }
#newsletter button { color:#9C3; font-weight:bold !important; font:12px/12px Helvetica, Arial, sans-serif; border:none; background:none; padding:0; margin:0; margin-left:95px; text-transform:uppercase; letter-spacing:-1px;  }

/* --------------------------------------------------------- */
/* MENU RULES
/* --------------------------------------------------------- */
#menu-bar #logo { float:left; margin-bottom:101px; }
#menu-bar #menu { float:left; padding:0; margin:0; list-style:none; border-top:1px solid #DDD; }
#menu-bar #menu li { width:174px; height:34px; }
#menu-bar #menu li a { display:block; width:174px; height:34px; line-height:34px; background:url(../img/menu.png) no-repeat 0px 0px; }
#menu-bar #menu li span { display:none; }

#menu-bar #menu #btn01 a { background-position: 0px 0px; }
#menu-bar #menu #btn02 a { background-position: 0px -34px; }
#menu-bar #menu #btn03 a { background-position: 0px -68px; }
#menu-bar #menu #btn04 a { background-position: 0px -102px; }
#menu-bar #menu #btn05 a { background-position: 0px -136px; }

#menu-bar #menu #btn01 a:hover { background-position: -174px 0px; }
#menu-bar #menu #btn02 a:hover { background-position: -174px -34px; }
#menu-bar #menu #btn03 a:hover { background-position: -174px -68px; }
#menu-bar #menu #btn04 a:hover { background-position: -174px -102px; }
#menu-bar #menu #btn05 a:hover { background-position: -174px -136px; }

#menu-bar #menu #btn01 a.active { background-position: -348px 0px; }
#menu-bar #menu #btn02 a.active { background-position: -348px -34px; }
#menu-bar #menu #btn03 a.active { background-position: -348px -68px; }
#menu-bar #menu #btn04 a.active { background-position: -348px -102px; }
#menu-bar #menu #btn05 a.active { background-position: -348px -136px; }

/* --------------------------------------------------------- */
/* CONTENT RULES
/* --------------------------------------------------------- */
#content-wrapper .column { float:left; position:relative; margin-right:4px; background-color:#FFF; min-height:100px; border-bottom:4px solid #DDD; }
#content-wrapper .body { padding:5px; overflow:hidden; }
#content-wrapper .body a.btn { font-size:9px; color:#9C3; background:url(../img/arrow-read-more.png) no-repeat 0px right; line-height:11px; text-transform:uppercase; text-decoration:none; font-weight:bold; padding-right:10px; }
#content-wrapper .span-1 { width:190px; }
#content-wrapper .span-2 { width:384px; }
#content-wrapper .span-3 { width:578px; }
#content-wrapper .span-4 { width:772px; margin-right:0px; }
#content-wrapper .last { margin-right:0px !important; float:right; }

div.left-item { float:left; width:190px; text-align:right; }
div.right-item { float:left; width:368px; text-align:left; margin-left:10px; }
div.right-item p { margin-top:0px; }
div.right-item a.btn { float:left; margin-top:5px; }
div.right-item img { float:left; background-color:#444; margin-right:5px; border-left:2px solid #DDD; }

/* --------------------------------------------------------- */
/* PORTAL PAGE
/* --------------------------------------------------------- */
#introduction div.body h1 { margin-top:7px; }
#introduction div.body p.first { margin-top:7px; margin-bottom:5px; }

#featured-product div.body h3, #featured-event div.body h3, #latest-blogpost div.body h3 { margin-top:5px; margin-right:20px; }
#featured-product div.body p, #featured-event div.body p, #latest-blogpost div.body p { margin-top:0px; margin-bottom:5px; }

#content-wrapper div.depts h3 { display:block; margin-top:5px; width:180px; height:20px; background:url(../img/tt-depts.png) no-repeat 0px 0px; text-indent:-10000em; }
#content-wrapper div.depts p { margin-top:2px; margin-bottom:5px; }
#content-wrapper div.depts div.slideshow { position:relative; width:180px; height:180px; }
#content-wrapper div.depts div.slideshow img { position:absolute; }

#content-wrapper #pure-living h3 { background-position:0px 0px; }
#content-wrapper #pure-living a.btn { color:#B32E41; background-position:-11px right; }

#content-wrapper #pure-cooking h3 { background-position:0px -40px; }
#content-wrapper #pure-cooking a.btn { color:#F1D457; background-position:-33px right; }

#content-wrapper #pure-fashion h3 { background-position:0px -60px; }
#content-wrapper #pure-fashion a.btn { color:#8277AC; background-position:-44px right; }

#content-wrapper #pure-kids h3 { background-position:0px -100px; }
#content-wrapper #pure-kids a.btn { color:#C00076; background-position:-66px right; }

#content-wrapper #pure-sports h3 { background-position:0px -80px; }
#content-wrapper #pure-sports a.btn { color:#DB9833; background-position:-55px right; }

#content-wrapper #pure-technology h3 { background-position:0px -20px; }
#content-wrapper #pure-technology a.btn { color:#98C5CC; background-position:-22px right; }

/* --------------------------------------------------------- */
/* FOOTER STYLES
/* --------------------------------------------------------- */
#footer a { color:#888; }

/* --------------------------------------------------------- */
/* CLEAR FIX
/* --------------------------------------------------------- */
.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%; }

.error,
.notice, 
.success    { padding: 10px; margin-bottom:5px; border: 2px solid #ddd; }

.error      { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
.notice     { background: #FFF6BF; color: #514721; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #264409; border-color: #C6D880; }