/* ---------------------------------------------------------------------- css info ======== Client: Unilever Knorr Agency: Agency.com Brussels Author: Chris Pirotte (cpirotte@agency.com) Start: 09-12-2008 Last update: 30-12-2008 [Chris Pirotte (cpirotte@agency.com)] table of contents ================= 1 =RESET 2 =LAYOUT 2.1 =backgrounds 2.2 =header 2.3 =content 2.2 =footer 3 =LINKS 4 =MISCELLEANEOUS 5 =THICKBOX notes & remarks =============== ---------------------------------------------------------------------- */ /* 1 =RESET ---------------------------------------------------------------------- */ * { margin:0;padding:0 } table { border-collapse:collapse; border-spacing:0 } fieldset,img { border:0 } address,caption,cite,code,dfn,em,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 } body { font-size:11px; font-family:Arial, Helvetica, sans-serif; color:#787878 } /* 2 =LAYOUT ---------------------------------------------------------------------- */ #page { width:798px; height:756px; padding:0px 102px 0px 100px; margin:auto; text-align:center } #printer { display:none } /* 2.1 =backgrounds ---------------------------------------------------------------------- */ body.home { background:#FFFFFF url(../_images/backgrounds/bg_homepage.jpg) top center repeat-x } body.home #page { background: url(../_images/backgrounds/bg_homepage.png) no-repeat; behavior: url("/_scripts/iepngfix.htc") } body.redsoup, body.red { background:#E62A0D url(../_images/backgrounds/bg_redsoup.jpg) top center repeat-x } body.redsoup #page { background: url(../_images/backgrounds/bg_redsoup.png) no-repeat; behavior: url("/_scripts/iepngfix.htc") } body.red #page { background: url(../_images/backgrounds/bg_red.png) no-repeat; behavior: url("/_scripts/iepngfix.htc") } body.greensoup, body.green { background:#6BA101 url(../_images/backgrounds/bg_greensoup.jpg) top center repeat-x } body.greensoup #page { background: url(../_images/backgrounds/bg_greensoup.png) no-repeat; behavior: url("/_scripts/iepngfix.htc") } body.green #page { background: url(../_images/backgrounds/bg_green.png) no-repeat; behavior: url("/_scripts/iepngfix.htc") } body.orangesoup, body.orangecolor, body.orange { background:#F2A205 url(../_images/backgrounds/bg_orangesoup.jpg) top center repeat-x } body.orangesoup #page { background: url(../_images/backgrounds/bg_orangesoup.png) no-repeat; behavior: url("/_scripts/iepngfix.htc") } body.orangecolor #page { background: url(../_images/backgrounds/bg_orangecolor.png) no-repeat; behavior: url("/_scripts/iepngfix.htc") } body.orange #page { background: url(../_images/backgrounds/bg_orange.png) no-repeat; behavior: url("/_scripts/iepngfix.htc") } body.whitesoup, body.white { background:#F6F1EE url(../_images/backgrounds/bg_whitesoup.jpg) top center repeat-x } body.whitesoup #page { background: url(../_images/backgrounds/bg_whitesoup.png) no-repeat; behavior: url("/_scripts/iepngfix.htc") } body.white #page { background: url(../_images/backgrounds/bg_white.png) no-repeat; behavior: url("/_scripts/iepngfix.htc") } .veggies { background: url(../_images/backgrounds/bg_veggies.png) no-repeat; behavior: url("/_scripts/iepngfix.htc") } /* body.promonl { background:#FFFFFF url(../_images/backgrounds/promo.jpg) top center repeat-x } */ body.promonl { background:#5CA427 url(../_images/backgrounds/promo.jpg) top center repeat-x } body.promonl #page { background: url(../_images/backgrounds/_nl/promo.png) no-repeat; behavior: url("/_scripts/iepngfix.htc") } body.promofr { background:#5CA427 url(../_images/backgrounds/promo.jpg) top center repeat-x } body.promofr #page { background: url(../_images/backgrounds/_fr/promo.png) no-repeat; behavior: url("/_scripts/iepngfix.htc") } /* 2.2 =header ---------------------------------------------------------------------- */ #header { height:139px; padding:0px 0 0 0; text-align:left; position:relative; background:transparant; } body.home #header { height:87px; } .logo { margin-top: 46px; float:left } .tagline { margin-top:2px; float:right } #header ul { padding-top:50px; height:35px; line-height:35px } #header li { display: inline; list-style-type: none; margin:0 18px 0 0 } #header ul.fr li { display: inline; list-style-type: none; margin:0 18px 0 0 } #header li.last { margin-left:12px; } ul.navlist { width:550px } .navlist li { padding-left: 27px; padding-top:7px; background-image: url(/_images/backgrounds/check.gif); background-repeat: no-repeat; background-position: 0 .5em } /* 2.3 =content ---------------------------------------------------------------------- */ #content { height:499px; text-align:left; position:relative; } #content h1, #content h2, #content form, #content p, #content ul, #content table { margin:0 33px } #content table#barcode, #content table#barcodecitytrips, #content table#sendfriends { margin:0 } #content #menu p { margin:0 4px } #visual { float:left; width:500px } #visualpromo { float:left; width:500px; padding-left:40px; } .steps { margin-right:10px;} .stepImage { float:left; padding:10px;} .stepText { float:left; margin-top:13px; } .reglement { float:left; margin-top:0px; margin-left:20px; } .reglement a { font-size:11px; font-family:Arial, Helvetica, sans-serif; color:#787878 } .stepText a { font-size:11px; font-family:Arial, Helvetica, sans-serif; color:#787878 } #menu { float:right; width:290px; margin-top:8px } #bannerspacer { height:322px; clear:left; } /* margin-top:81px */ #banner { float:left; margin-top:81px } /* margin-top:81px */ #staticbanner { float:right; margin-top:74px} /*margin-top:-7px*/ .packshots { position:absolute; top:120px; right:5px } body.home #content { height:651px; } #bowls { position:absolute; bottom:2px; right:0 } #soupbanner { position:absolute; bottom:200px; right:0 } #flashcontent { clear:right } #flashcontent2 { float:left; position:absolute; } /*#Colorcontent #ColorFlash { float:left; width:440px; margin-top:-20px; position:relative;}*/ .stamp { margin-right:10px } #barcode td { padding:3px 0px } .disc { list-style-type:disc; list-style-position:inside; } h3 { color:#006600; font-size:1.3em; font-weight:bold; margin-left:33px; } h4 { margin-top:25px; margin-left:5px; } #barcodecitytrips td, #sendfriends td { padding:2px 0px} #sendfriends th { font-weight:bold; padding:1px 0px; font-size:13px} /* Additions for Color */ #Colorcontent { height:499px; text-align:left; position:relative;} #Colorcontent #ColorFlash { float:left; width:440px; margin-top:-20px; position:relative;} #Colorcontent #ColorForm { float:right; text-align:left; width:350px; margin-top:-24px; position:relative;} #Colorcontent #ColorForm h1 { padding-left: 5px;} #Colorcontent #ColorForm .formtext1 { padding: 9px 10px 13px 5px;} #Colorcontent #ColorForm #Form { background: url(../../_images/color_form_bg_top.gif) no-repeat; width: 350px; padding-top:7px;} #Colorcontent #ColorForm #Form .formtext2 { margin: 0 20px 0 22px; text-align:justify;} #Colorcontent #ColorForm #Form .formtext3 { margin: 10px 20px 0 22px; text-align:justify;} #Colorcontent #ColorForm #Form p { margin: 8px 20px 2px 22px;} #Colorcontent #ColorForm #Form h2 { padding: 15px 0 0 18px;} #Colorcontent #ColorForm #closeForm { background: url(../../_images/color_form_bg_btm.gif) no-repeat bottom; width: 350px; height: 10px;} #Colorcontent #ColorForm input {color:#666; font-size:10px; margin-left:2px;} #Colorcontent #ColorForm input.tiny {width:20px;} #Colorcontent #ColorForm input.small {width:40px;} #Colorcontent #ColorForm input.medium {width:90px;} #Colorcontent #ColorForm input.normal {width:140px;} #Colorcontent #ColorForm input.large {width:200px;} #Colorcontent #ColorForm .errorMessage{padding: 0 0 0 22px; } /* #Colorcontent #ColorForm .colorsubmit input { background: url(../color/_images/_nl/send.gif) no-repeat; border:none; width:136px; height:45px; margin-top:12px;} */ #Colorcontent #ColorForm .more-info {margin-left:-10px;} .buttonPointer {cursor:pointer;} #Colorcontent a, #Colorcontent a:hover { color:#787878; text-decoration:underline;} #overlayer { position:absolute; z-index:100; width:936px; height:624px; top:45px; left:50%; margin-left:-468px; } /* 2.4 =footer ---------------------------------------------------------------------- */ #footer { height:40px; line-height:30px; text-align:center; color:#FFFFFF; position:relative; clear:both } #footer a, #footer a:hover, #footer { color:#ababab } body.whitesoup #footer a, body.whitesoup #footer a:hover, body.white #footer a, body.white #footer a:hover, body.home #footer a, body.home #footer a:hover, body.whitesoup #footer, body.white #footer, body.home #footer, body.home #footer a, body.home #footer a:hover { color:#787878 } #footer3 { clear: both; color: #8a8c8f; font-family: Arial, Helvetica, sans-serif; font-size: 0.846em /*11px*/;padding: 30px 0 0; } #footer3_fr { clear: both; color: #8a8c8f; font-family: Arial, Helvetica, sans-serif; font-size: 0.846em /*11px*/; padding: 5px 0 0 } #footer3_fr3 { clear: both; color: #8a8c8f; font-family: Arial, Helvetica, sans-serif; font-size: 0.846em /*11px*/; padding: 30px 0 0 } #footer3 a, #footer3_fr a { color: #8a8c8f; text-decoration: underline } #footer3 #left, #footer3_fr #left { display: inline; float: left; margin: 0 0 0 15px } #footer3 #left a, #footer3_fr #left a { margin: 0 15px 0 0 } #footer3 #right, #footer3_fr #right { display: inline; float: right; margin: 0 4px 0 0 } #footer3 #right a.nl, #footer3_fr #right a.nl { background: url(../img/_nl/knorr.be.png) left top no-repeat; display: block; height: 13px; text-indent: -9999em; width: 81px } #footer3 #right a.fr, #footer3_fr #right a.fr { background: url(../img/_fr/knorr.be.png) left top no-repeat; display: block; height: 13px; text-indent: -9999em; width: 79px } /* 2.4 =footer ---------------------------------------------------------------------- */ #footer2 { height:40px; line-height:30px; text-align:center; color:#FFFFFF;margin-top: -105px; position:relative; clear:both } #footer2 a, #footer2 a:hover, #footer2 { color:#ababab } body.whitesoup #footer2 a, body.whitesoup #footer2 a:hover, body.white #footer2 a, body.white #footer2 a:hover, body.home #footer2 a, body.home #footer2 a:hover, body.whitesoup #footer2, body.white #footer2, body.home #footer2, body.home #footer2 a, body.home #footer2 a:hover { color:#787878 } /* 3 =LINKS ---------------------------------------------------------------------- */ a, a:hover { text-decoration:underline } /* 4 =MISCELLEANEOUS ---------------------------------------------------------------------- */ img, input { behavior: url("/_scripts/iepngfix.htc")} .extra { font-size:9px } .steps { text-align:right; font-weight:bold; font-size:10px; float:right } .steps em { color:#006600; font-weight:bold; font-style:normal; font-size:13px } /* 5 =THICKBOX ---------------------------------------------------------------------- */ #TB_window { font: 12px Arial, Helvetica, sans-serif; color: #333333 } #TB_secondLine { font: 10px Arial, Helvetica, sans-serif; color:#666666 } #TB_window a:link {color: #666666;} #TB_window a:visited {color: #666666;} #TB_window a:hover {color: #000;} #TB_window a:active {color: #666666;} #TB_window a:focus{color: #666666;} #TB_overlay { position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100% } .TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;} .TB_overlayBG { background-color:#000; filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75 } * html #TB_overlay { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px') } #TB_window { position: fixed; background: #ffffff; z-index: 102; color:#000000; display:none; border: 4px solid #525252; text-align:left; top:50%; left:50% } * html #TB_window { /* ie6 hack */position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px') } #TB_window img#TB_Image { display:block; margin: 15px 0 0 15px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-top: 1px solid #666; border-left: 1px solid #666 } #TB_caption{ height:25px; padding:7px 30px 10px 25px; float:left } #TB_closeWindow{ height:25px; padding:11px 25px 10px 0; float:right } #TB_closeAjaxWindow{ padding:7px 10px 5px 0; margin-bottom:1px; text-align:right; float:right } #TB_ajaxWindowTitle{ float:left; padding:7px 0 5px 10px; margin-bottom:1px } #TB_title{ background-color:#e8e8e8; height:27px } #TB_ajaxContent{ clear:both; padding:2px 15px 15px 15px; overflow:auto; text-align:left; line-height:1.4em } #TB_ajaxContent.TB_modal{ padding:15px } #TB_ajaxContent p{ padding:5px 0px 5px 0px } #TB_load{ position: fixed; display:none; height:13px; width:208px; z-index:103; top: 50%; left: 50%; margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */ } * html #TB_load { /* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px') } #TB_HideSelect{ z-index:99; position:fixed; top: 0; left: 0; background-color:#fff; border:none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0; height:100%; width:100% } * html #TB_HideSelect { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px') } #TB_iframeContent{ clear:both; border:none; margin-bottom:-1px; margin-top:1px; _margin-bottom:1px }