/* ----------------------------------------------------------------------------------------- Anton Morrison The Pobla nou Studio, Barcelona, http://www.letimati.com ----------------------------------------------------------------------------------------- */ /* http://meyerweb.com/eric/tools/css/reset/ ----------------------------------------------------------------------------------------- */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin :0;padding :0;border :0;outline :0;font-size :100%;vertical-align :baseline;background :transparent;} body{line-height :1;} ol,ul{list-style :none;} :focus{outline :0;} ins{text-decoration :none;} del{text-decoration :line-through;} table{border-collapse :collapse;border-spacing :0;} body{font-size:75%;font-size:12px;font-family:"Helvetica Neue",Helvetica,georgia,"times new roman",serif;color:#717171;background:#000015 url('/img/backgrounds/body/Blue-Pattern-Tile.jpg');} html>body{font-size:12px;} /* --- Typography from 23ways -------------------------------- */ p{font-size:1em;line-height:1.5em;margin:0 0 1em 0;} h2{line-height:49.2px;font-size:49.0px;margin-bottom:5px;font-family:Helvetica;color:#000844;font-weight:normal;margin-bottom:5px;} h3{line-height:27px;font-size:30.0px;font-family:Helvetica;color:#a4a3a3;margin-bottom:20px;font-weight:normal;} h4{color:#002167;font-size:15px;line-height:17px;font-weight:normal;margin:1em 0;line-height:1.3em;} h5{font-size:14px;color:#00244a;font-weight:bold;background:url('/img/backgrounds/header-gradient.png') repeat-x 0 15px;padding-bottom:15px;text-transform:uppercase;} .kingdom-team h5{width:415px;float:right;} /* Lists */ #content ul,#content ol{margin:0 25px 25px;list-style-type:disc;} #content ul li,#content ol li{margin-bottom:10px;line-height:1.5em;} /* =links ------------------------------------------------------ */ a{text-decoration:none;} a:hover{text-decoration:underline;} p.read-more-link{text-align:right;} p.read-more-link a{text-transform:uppercase;} /* --- layout ----------------------------------------------- keep these for just the layout no background color nothing! */ div#container{width:940px;background:#FFF;margin:0 auto;border:10px solid #C6C6C6;border-top:none;} div#wrapper{float:left;width:100%;padding:20px 0;background:url('/img/backgrounds/wrapper.png') repeat-x;} div#content{margin:0 320px 20px 20px;} div#extra{margin-top:20px;float:left;width:300px;margin-left:-300px;} div#footer{clear:left;width:100%;} div#header{position:relative;background:#000;height:184px;} /* =Different Colour scheems ------------------------------------------------------ */ body.cheese{background:#FEBD00 url('/img/backgrounds/body/Yellow-Pattern-Tile.jpg');} body.dairy{background:#FFF url('/img/backgrounds/body/white-Pattern-Tile.jpg');} /* --- header ---------------------------------------------- */ div#header h1 a{color:#fff;display:block;height:157px;} /* --- top navigation ----------------------------------------------- */ #top-navigation{position:absolute;bottom:0px;left:0;width:100%;background:#000742 url('/img/backgrounds/navigation-animation.png') repeat-x bottom;} #top-navigation ul li{float:left;list-style-type:none;margin-left:0px;position:relative;} #top-navigation ul li a{color:#fff;display:block;padding:8px 7px;background:#000742 url('/img/backgrounds/navigation-animation.png') repeat-x bottom;} #top-navigation ul li a:hover{background:url('/img/backgrounds/navigation-animation.png') repeat-x top;text-decoration:none;} #top-navigation ul li ul{display:none;position:absolute;left:-6px;width:130px;background:transparent url('/img/backgrounds/sub-navigation.png') bottom left no-repeat;color:#666;padding:0 20px 20px 6px;z-index:20;} #top-navigation ul li ul#product-sub-navigation{background:transparent url('/img/backgrounds/product-sub-navigation.png') no-repeat scroll -8px bottom;height:300px;width:450px;} #top-navigation ul li ul#product-sub-navigation li{width:142px;} #top-navigation ul li ul#product-sub-navigation div{position:absolute;top:0;float:left;width:141px;} #top-navigation ul li ul div#products-count-1{position:absolute;left:148px;} #top-navigation ul li ul div#products-count-2{position:absolute;left:291px;} #top-navigation ul li ul li{width:101px;} #top-navigation ul li:hover ul{display:block;} #top-navigation ul li.no-hover:hover ul{display:none;} #top-navigation ul li ul li a{color:#666;padding:4px 4px 4px 8px;background:none;} #top-navigation ul li ul li a:hover{background:#F0F0F5;} /* Subnavigation fonts */ #top-navigation ul li ul li h6{background:#6188FF;color:#FFF;padding:7px 25px 7px 5px;margin:0;} #top-navigation ul li ul li.dairy h6{background:#4d79ea url('/img/backgrounds/sub-nav-pizza.png') no-repeat 110px 5px;} #top-navigation ul li ul li.cheese h6{background:#9DD1FB url('/img/backgrounds/sub-nav-dairy.png') no-repeat 110px 5px;} #top-navigation ul li ul li.retail h6{background:#001540;} /* --- navigation ----------------------------------------------- */ /* sub navigation */ #navigation li ul{display:none;} #navigation li.active ul{display:block;} #navigation li,#navigation ul{list-style-type:none;margin-left:0;} #navigation li a{display:block;background:url('/img/backgrounds/navigation-point.png') no-repeat 0 12px;padding:5px 0 4px 10px;text-transform:capitalize;border-bottom:1px dotted #aaa;} #navigation li li a{padding-left:20px;color:#00F;} #navigation li.active li a{color:#00F;} #navigation li.active li.active a{color:#000080;} #navigation li a:hover,#navigation li.active a{background:url('/img/backgrounds/navigation-point-on.png') no-repeat 0 12px;color:#000080;} /* --- content ----------------------------------------------- */ .slideshow #main-image{position:relative;height:232px;} .slideshow #main-image img{position:absolute;top:0;left:0;z-index:8;opacity:0.0;} .slideshow #main-image img.active{z-index:10;opacity:1.0;} .slideshow #main-image img.last-active{z-index:9;} .team #main-image{width:185px;float:left;padding-top:20px;} .team #content h4, .team #content p, .team #content #page_content{width:410px;float:right;} /* =Products ------------------------------------------------------ */ #product-overview{width:230px;float:left;line-height:22.9px;font:13.5px Helvetica;color:#181412} #product-image{text-align:center;} #product-nutritional-info{width:230px;clear:left;float:left;padding:0px 0 30px 0;border:1px solid #CFCFCF;background:#FFF url('/img/backgrounds/products/ingredience-footer.png') repeat-x bottom;} .cheese #product-nutritional-info{background:#FFF url('/img/backgrounds/products/ingredience-footer-cheese.png') repeat-x bottom;} #product-details, #product-nutritional-info{-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;} #product-nutritional-info dt, #product-nutritional-info dd{background:#FFF;border-bottom:1px solid #CFCFCF;font:12.0px Helvetica;color:#181412;line-height:14.4px;float:left;} #product-nutritional-info dt{width:140px;padding:4px 0 4px 0px;margin-left:15px;} #product-nutritional-info dt.heading{background:#5DeF00 url('/img/backgrounds/products/ingredience-header.png') repeat-x;color:#FFF;font-size:16.5px;padding:15px 0px 15px 15px;width:215px;margin-bottom:15px;margin-left:0;font-weight:bold;-moz-border-radius-topright:10px;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;border-top-left-radius:10px;border-top-right-radius:10px;} .cheese #product-nutritional-info dt.heading{background:#5DeF00 url('/img/backgrounds/products/ingredience-header-cheese.png') repeat-x;} #product-nutritional-info dd{width:60px;padding:4px 0px 4px 0;margin-right:15px;} #product-details{width:320px;float:left;padding:10px 0 20px 10px;border:1px solid #CFCFCF;margin-left:20px;background:#FFF url('/img/backgrounds/products/product-details.png') no-repeat top left;} .cheese #product-details{background:#FFF url('/img/backgrounds/products/product-details-cheese.png') no-repeat top left;} #product-details dt{color:#FFF;font-size:16.5px;padding:5px;font-weight:bold;width:110px;float:left;clear:left;} #product-details dd{width:180px;background:#FFF;float:left;padding:7px 5px 5px 0px;font-size:15.0px;line-height:15.0px;color:#000;border-bottom:1px solid #CFCFCF;} #product-details dd.ingredients{font-size:12.5px;} /* --- news ----------------------------------------------- */ .article{border-bottom:1px solid #acaaaa;margin-bottom:5px;} .article h4{font-weight:bold;margin-bottom:2px;} .article p{margin-bottom:2px;} .article p.read-more-link{text-align:left;} .article p.read-more-link a{color:#002167;} .paging div.disabled{display:inline;} .paging a.previous{background:url('/img/backgrounds/buttons/inner_prev.png') no-repeat left bottom;padding-left:15px;} .paging a.next{background:url('/img/backgrounds/buttons/inner_next.png') no-repeat right bottom;padding-right:15px;} /* =NEWS TICKER ------------------------------------------------------ */ #news-ticker{border-bottom:1px solid #011053;margin-top:15px;margin-bottom:15px;float:left;width:100%;height:30px;overflow:hidden;padding-bottom:5px;background:url('/img/backgrounds/news-ticker.png') no-repeat 110px 0px;} #news-ticker h3{color:#011053;float:left;padding:0 40px 0 0;margin:0;font-size:18px;line-height:29px;border-right:2px solid #011053;} #news-ticker #news{list-style:none;padding-left:0px;margin:0;padding:0;float:left;height:26px;overflow:hidden;} #news-ticker #news li{padding-left:10px;padding-top:3px;font-weight:700;font-size:13px;} #news-ticker #news li a{color:#011053;text-decoration:none;} #news-ticker #news li a:hover{text-decoration:none !important;} /* =JUMPOFFS ------------------------------------------------------ */ .handle,.delete{position:absolute;top:0;left:20px;padding:2px 5px;margin:0px 0px 0 0;cursor:move;font-weight:700;font-size:10px;background:#F00;color:#FFF;z-index:100;} .delete{top:0px;right:20px;left:242px;cursor:pointer;} .delete:hover{background:white;} .jumpoff{position:relative;height:160px;} .component{height:auto;} .hover{cursor:pointer;} .jumpoff h3, .jumpoff h3 a{color:#FFFFFF;font-size:35px;font-weight:normal;left:6px;letter-spacing:-1px;position:absolute;top:6px;z-index:10;width:260px;} .jumpoff h3 a:hover{text-decoration:none;} .jumpoff div.jumpoff-content{background:#FFFFFF none repeat scroll 0 0;margin-right:20px;padding:3px 15px 3px 15px;width:250px;min-height:30px;position:absolute;top:93px;z-index:10;} .jumpoff div.jumpoff-content p{font-size:10px;line-height:9px;margin-bottom:0;padding-top:2px;} .jumpoff img{position:absolute;top:0;left:0;} .jumpoff p,.jumpoff h3{} /* special jumpoffs */ .products-list{height:auto;} .products-list h3{background:transparent url('/img/products-at-glance/products-at-glance.png') repeat-x scroll 0 0;font-size:14px;font-weight:bold;left:0;padding:0px 10px 28px 10px;text-transform:uppercase;top:0;width:260px;letter-spacing:0px;} .products-list h4{text-align:right;text-transform:uppercase;font-size:12px;background:url('/img/products-at-glance/products-glance-view-all.png') repeat-x;width:270px;padding:3px 5px;letter-spacing:0px;margin:25px 0 20px 0;} .products-list h4 a{font-weight:bold;color:#000;} .products-list ul{padding-top:35px;width:280px;} .products-list ul li{position:relative;height:60px;border-top:2px solid #9D9D9D;padding-top:3px;} .products-list ul li img{position:absolute;top:4px;left:0;} .products-list ul li .product-content{position:absolute;top:4px;left:75px;height:58px;background:#231F20;color:#ABABAB;width:205px;} .products-list ul li .product-content p{font-size:11px;line-height:11px;padding:3px 5px;margin-bottom:0;} .products-list ul li .product-content p.read-more-link a{color:#FAEB00;} /* --- carosel --------------------------------------------------- */ /* --- footer --------------------------------------------------- */ #footer{clear:both;background:#525252;} #footer ul{padding:3px 20px;} #footer ul li{display:inline;color:#FFF;} #footer ul li:after{content:" | ";} #footer ul li:last-child:after{content:"";} #footer ul li a{text-transform:uppercase;text-decoration:none;font-size:10px;color:#FFF;} #footer ul li a:hover{text-decoration:underline;} /* --- forms ------------------------------------------------- */ .form-container{width:100%;float:left;padding-bottom:24px;text-align:center;} .form-container form{width:459px;margin:0 auto;} legend{display:none;} label{width:60px;display:block;float:left;color:#030200;font-size:11px;text-transform:uppercase;height:18px;padding-top:2px;} .input{background:url('/img/backgrounds/text-input.png') no-repeat left;padding:5px 10px;margin-bottom:3px;position:relative;border:none !important;} input{border:none !important;margin-left:10px;font-size:11px;padding:2px 0;width:353px;} .input-textarea{background:url('/img/backgrounds/text-area.png') no-repeat left;padding:5px 10px;height:105px;margin-top:0px;} .input-textarea label{padding-top:8px;} textarea{border:none;width:353px;height:90px;margin-left:10px;margin-top:5px;padding:2px 0;font-size:11px;} .submit{text-align:right;padding:5px 15px;} .submit input{width:100px;padding:5px 0;} input,textarea{border:1px solid #FFF;} .error-message{position:absolute;top:-60px;left:30px;padding:0;margin:0;color:#f66;} #flashMessage{padding-bottom:60px;} /* ---[ misc ]------------------------------------- */ img,a img{border:none;} .hide{display:none;} .clear{clear:both;} .debug{border:1px solid red;} /* =Carosel ***************************************************/ /** * This
element is wrapped by jCarousel around the list * and has the classname "jcarousel-container". */ .jcarousel-container{clear:both;position:relative;} .jcarousel-clip{z-index:2;padding:0;margin:0;overflow:hidden;position:relative;} .jcarousel-list{z-index:1;overflow:hidden;position:relative;top:0;left:0;margin:0 !important;padding:0 !important;} .jcarousel-list li, .jcarousel-item{float:left;list-style:none;/* We set the width/height explicitly. No width/height causes infinite loops. */} /** * The buttons are added dynamically by jCarousel before * the