@charset "UTF-8"; //Site: http:www.bakingmad.com //By: A Stainforth //Agency: Spinnaker //Date: 26/04/2011 //Last Updated: 26/04/2011 //Colors @panel_color: #203565; @heading_color: #203565; @text_color: #333; @reviews_color: #7d0a39; @like_color: #d67a1f; @form_blue: #335577; @ideas_header:#539146; //Typography @h3_size: 20px; @main_size:12px; //Central Panels @central_width:511px; .hide{ position:absolute !important; left:-10000px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; text-decoration: none !important; } #logo{ h2 a{ display:block; width:335px; height:103px; text-decoration:none; } } /* addthis ********************/ .addthis_style{ width:289px; margin-left:7px; margin-top:10px; } .addthis_style_tips{ margin-left:0; margin-top:10px; clear:both; } .addthis_pill_style{ clear:both; float:left; margin-top: 4px; } a.addthis_button_facebook_like{ width:72px!important; } a.addthis_button_tweet iframe{ width:99px!important; } // Recipes section print_only{ position:absolute !important; left:-10000px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; text-decoration: none !important; } .recipeTopHeading h1 { font-size: 16px; color: @heading_color; margin: 0px 0 6px 0; } .recipe_panel { font-size:@main_size; color:@text_color; &#main_ingredients, &#additional_ingredients, &#additional2_ingredients{ table{ width:506px; margin-left:2px; td, th{ padding:2px 3px 2px 10px; } } } .recipe_content { background:url("/images/recipe/recipeTopHeading.gif") no-repeat; padding: 10px 1px 0 0; margin: 0; position: relative; width: 511px; ol{ margin: 5px 10px; width: 490px; } h2{ font-size:16px; color:@heading_color; margin:0px 0 6px 10px; &.red{color:@reviews_color; } &.yellow{color:@like_color; } } .highlightListText, .comment{ width:506px; margin-left:2px; li{ padding:2px 3px 2px 10px; } } a{ font-size:@main_size; color:@text_color; } .recipeDetails{ h1{ font-size:20px; color:@panel_color; } p{ line-height:16px; padding: 15px 0 10px 0; } table{ width:205px; margin-bottom:10px; font-size:11px; th, td{ text-align: left; font-weight:normal; padding:1px 2px 1px 2px; } th{font-weight:normal;} } li{ text-align: left; padding:1px 2px 1px 2px; } a{ text-decoration:none; display:block; &:hover{ background-color:#c5d7ee; } } } .left{ float: left; width: 266px; img{ padding-left: 10px; } } .right{ float: left; left: 266px; width: 205px; padding-left: 24px; } h2 .expert{ margin-left:-5000px; } #reviewThisRecipe, #sendToMobile, #enlargeText, #reviewThisRecipe2{ display:block; float:right; } #sendToMobile, #enlargeText, #reviewThisRecipe2{margin:10px 10px 0;} #reviewThisRecipe { margin:10px 0 0 0; } ol#method{ li{ font-size:@main_size; color:@text_color; cursor:pointer; line-height:16px; padding:10px; margin:0 0 0 20px; } } } .bottom{ background: url("/images/recipe/recipeTopHeadingBottom.gif") 0 -10px no-repeat; height: 14px; width: 511px; margin-bottom:10px } } //Craft panel on Recipes and Ideas .craft_holder { clear: both; padding: 10px 0; h2 { color: @ideas_header; font-size: 20px; padding: 0 0 2px 10px; margin: 10px 0 10px; } } #crafts.recipe{ h2{ color: @panel_color; font-size: 16px; } } // Top panel section .ideaBanner, .top_banner { width:@central_width; #idea{ background:url("/images/ideas/idea-banner-generic.jpg") no-repeat; height:274px; } #tips{ background:url("/images/tips/tips_gen_banner.jpg") no-repeat; height:274px; margin-bottom:8px; } .margin-b-8{ margin-bottom:8px; } #tips_section, #section{ background-image: url(../images/recipe/recipeTopHeading.gif); background-repeat: no-repeat; padding: 10px 1px 0 0; margin: 0px 0 5px 0; position: relative; width: @central_width; img { margin:10px 10px 0; } .addthis_style_tips{ margin-left:10px; } .tipsDesc{ float:left; width:200px; margin:10px 10px 0; h1{ font-size:@h3_size; color:@panel_color; } } .bottom{ background-image:url(../images/recipe/recipeTopHeadingBottom.gif); background-repeat:no-repeat; height: 24px; width:@central_width; } } #expert{ background:url("/images/expert/expert_banner.jpg") no-repeat; height:223px; margin-bottom:10px; } .stock_welcome{ padding:75px 0 0 20px; width:220px; p{ font-size:13px; margin-bottom:10px; color:#272425; strong{ font-weight:bold; } } } #allinson_banner{ background:url("/images/retailers/allinson_large.jpg") no-repeat; height:276px; strong{ color:#72292b; } } #billingtons_banner{ background:url("/images/retailers/billingtons-stockist-banner.jpg") no-repeat; height:276px; strong{ color:#72292b; } } #cakecraft_banner{ background:url("/images/retailers/cake_craft_large.jpg") no-repeat; height:276px; .stock_welcome { padding:95px 0 0 30px; } strong{ color:#4f07a7; } } #silverspoon_banner{ background:url("/images/retailers/silver_spoon_large.jpg") no-repeat; height:276px; strong{ color:#0079a1; } } #askeys_banner{ background:url("/images/retailers/askeys_large.jpg") no-repeat; height:276px; strong{ color:#212981; } } #nielson_massey_banner{ background:url("/images/retailers/nielsen-massey_large.jpg") no-repeat; height:276px; strong{ color:#a27800; } } } // Central Heading tags .topIdeasExp h3{ font-size:@h3_size; padding:0 0 2px 10px; } .recipeDetails h3{ font-size:@h3_size; color:@panel_color; } //Stockists .retailers{ a.stockist { display:block; width:511px; height:158px; text-decoration:none; } .allinson{ background: url('/images/retailers/allinson-banner-stock.gif') no-repeat; } .billingtons{ background: url('/images/retailers/billingtons-banner-stock.gif') no-repeat; } .cake_craft{ background: url('/images/retailers/cake-craft-banner-stock.gif') no-repeat; } .silverspoon{ background: url('/images/retailers/silverspoon-banner-stock.jpg') no-repeat; } .askey{ background: url('/images/retailers/askeys-banner-stock.jpg') no-repeat; } .nielsen-massey{ background: url('/images/retailers/nielsen-massey-banner-stock.gif') no-repeat; } p.products{ height:40px; } table{ th, td{ font-size:70%; border:dashed #999999 1px; padding:4px 1px 4px 0; text-align:left; } tbody th { padding-left:5px; font-weight:normal; } td{ text-align:center; } .tableheading{ background-color:#f3d7bb; th { font-weight:bold } } th.sub{ font-weight:bold } } } //Kids' Baking section ////////////////////////////////////////////////////////////////////////////////////////// #kids_header{ margin: 0 0 6px; } #kids_panel_win, #kids_panel_tips{ a { float: left; margin-bottom: 5px; img{ display:block; } } } #kids_recipes_recommended{ h1{ background: url("/images/kids/kids_recipe_recommend_title.gif") top left no-repeat; text-indent:-2000px; margin:0 0 0 25px; padding:0; height: 24px; } } #featured_crafts{ h1{ background: url("/images/kids/kids_activities_title.gif") top left no-repeat; text-indent:-2000px; margin:0 0 0 25px; padding:0; height: 24px; } } ///////// advice page .cooking{ color:#333; h1{ color: #0E3565; font-size: 1.25em; font-weight: bold; margin: 5px 150px 10px 15px; } ul{ margin: 0 0 0 15px; li{ font-size:0.75em; width:100%; margin-bottom:5px; a{ text-decoration:underline; } } li.last_li{ margin:0; padding:0; } } .forum_buttons{ a{ float:left; img{ display:block; } } .image_left{ margin-right:11px; } } } .safety_tips{ h1{ color: #0E3565; font-size: 1.25em; font-weight: bold; margin: 20px 150px 10px 0; } h2{ font-size: 0.875em; margin:20px 10px 5px 0; color: #0E3565; } .baking_content{ margin-left:10px; } } .main_page_title{ font-size:1.375em; color:#723c20; font-weight:bold; margin:15px!important; } /////////////// Activities .recipeTopHeading table { margin-left: 0; } #craft_categories, #crafts{ ul{ li{ display:block; float:left; position:relative; width:220px; height:80px; padding-top:0 !important; p{ float:left; padding:5px 10px; width:120px; } a{ float:left; color:@text_color; text-decoration:none; font-weight:bold; &:hover{ text-decoration:underline; } } } } } #comps_terms{ h1{ font-size:20px; color:@panel_color; } } .craft_panel { font-size:@main_size; color:@text_color; &#main_ingredients, &#additional_ingredients, &#additional2_ingredients{ table{ width:506px; margin-left:2px; td, th{ padding:2px 3px 2px 10px; &.quantity{ width:50px } &.material{ width:456px; } } } } .craft_content { background:url("/images/recipe/recipeTopHeading.gif") no-repeat; padding: 10px 1px 0 0; margin: 0; position: relative; width: 511px; ol{ margin: 5px 10px; width: 490px; } h2{ font-size:16px; color:@heading_color; margin:0px 0 6px 10px; &.red{color:@reviews_color; } &.yellow{color:@like_color; } } .highlightListText, .comment{ width:506px; margin-left:2px; li{ padding:2px 3px 2px 10px; } } a{ font-size:@main_size; color:@text_color; } &.craftDetails{ h1{ font-size:20px; color:@panel_color; } table{ width:205px; margin-bottom:10px; font-size:11px; th, td{ text-align: left; font-weight:normal; padding:1px 2px 1px 2px; } th{font-weight:normal;} } li{ text-align: left; padding:1px 2px 1px 2px; } a{ text-decoration:none; display:block; &:hover{ background-color:#c5d7ee; } } p{ line-height:16px; padding: 15px 0 10px 0; clear:both; &.panel_description{ clear:both; padding: 0 0 5px; } &.submitted{ font-size:65%; float:left; clear:right; a{ font-size:1.6em; display:inline; &:hover{ text-decoration:underline; background:none; } } } } } .left{ float: left; width: 266px; img{ padding-left: 10px; } } .right{ float: left; left: 266px; width: 205px; padding-left: 24px; } h2 .expert{ margin-left:-5000px; } #reviewThisCraft, #sendToMobile, #enlargeText, #reviewThisCraft2{ display:block; float:right; } #sendToMobile, #enlargeText, #reviewThisCraft2{margin:10px 10px 0;} #reviewThisCraft { margin:10px 0 0 0; } ol#method{ li{ list-style:none; padding:10px; margin:0 0 10px; clear:both; //min-height:100px; /* p{ font-size:@main_size; color:@text_color; cursor:pointer; width:350px; line-height:16px; padding:10px 0; float:left; margin:0 0 0 10px; min-height:100px; }*/ .method_text{ cursor:pointer; width:350px; padding:0 0 0 5px; display:block; float:left; margin:0 0 0 10px; font-size:@main_size; color:@text_color; cursor:pointer; line-height:16px; p{font-size:@main_size !important;} span{ float:left; margin:0 6px 3px 0; padding-bottom:2px; display:block; height:5px; } } .method_image{ float:left; width:100px; //height:100px; } } } } .bottom{ background: url("/images/recipe/recipeTopHeadingBottom.gif") 0 -10px no-repeat; height: 14px; width: 511px; margin-bottom:10px; } } .enter_comp{ ul{ margin:10px 0 0; li{ margin:5px; input{ display:inline; } label{ padding:0 10px; display:inline; color:@text_color; font-weight:normal; } } } } #craft_method { .craft_content{ background: url('/images/kids/craft_panel_top.gif') no-repeat; } .bottom{ background: url('/images/kids/craft_panel_btm.gif') 0 -10px no-repeat; } } //// Kids competition #kids_competitions{ #main_panel { background: url('/images/kids/kids_comp_little_baker.gif') no-repeat; width: 511px; height: 309px; margin-bottom:20px; h2{.hide;} } h1{ font-size: 20px; font-weight: bold; margin: 20px 0; padding: 0 0 2px 10px; color:#ee3224 ; } .compo{ float: left; margin-bottom: 30px; margin-left: 10px; .competitions_holder { float: left; .pic { margin-right: 12px; padding-bottom: 10px; img{ display: block; } } .link { a{ float: left; } } .title{ color:#EE3224; font-size: 1.1em; font-weight: bold; margin-bottom: 5px; width: 335px; } .description { width: 335px; } } } } .agreetc{ a{ color:#333; } a:hover{ text-decoration:none; } } .thankyou_copy_holder{ padding-top:20px; } .thankyou_copy{ text-align:center; color:#1f3366; font-weight:bold; font-size:1.2em; } // erroring #feedback_agreetc, #feedback_content, .error{ clear:both; font-size:0.9em; margin-bottom:10px; color:#CD2626; } .entry .thumb_pic img { display: block; margin: 0 0 10px; } //Voting .voting_text{ color: #203565; font-size: 1.25em; font-weight: bold; text-align:center; margin:30px auto 20px; width:400px; } .winner_text{ color: #203565; font-size: 1.25em; font-weight: bold; margin:20px 15px 10px; width:350px; float:left; } .voting_buttons{ a{ float:left; margin:0 5px; } img{ display:block; } } .voting_addthis .addthis_style{ margin-left: 12px; margin-top: 0; margin-bottom: 20px; } .comp_panel { .bottom{ background: url("/images/recipe/recipeTopHeadingBottom.gif") 0 -10px no-repeat; height: 14px; width: 511px; } .pic { float: left; margin: 0 0 0 10px; width: 266px; img{ display: block; margin: auto; padding-bottom: 10px; } } .holder{ float: left; padding-left: 15px; width: 205px; } h1{ color: #203565; font-size: 1.25em; font-weight: bold; } .description { color: #333333; font-size: 0.75em; line-height: 16px; padding: 15px 0 10px; } } ////Kids contact .bakingContact { font-size:90%; color:#333; fieldset{ margin:20px 0 0 5px; label{ float:left; width:90px; margin-top:10px; font-weight:bold } input[type="text"]{ width:200px; margin-top:10px; } textarea{ width:290px; height:150px; margin-top:10px; } input[type="submit"]{ height:30px; padding:3px; width:100px; font-weight:bold !important; text-shadow: #fff 1px 1px; } } } .baking_content { h1, h2 , h3{ color:@panel_color; } h1{ font-size:20px;} h2, h3{ font-size:14px } p, li{ color:@text_color; font-size:13px; } p{ margin:10px 0; } li{ list-style:disc; margin:5px 20px; } } //// Contact page .contact_list{ margin:10px; h2{ color:#333; font-size:0.9em; margin:0 0 0 2px!important; } } .contact{ a{ text-decoration:underline; color:#0e3165; } fieldset{ margin-left:1px!important; } legend{ color: #203565; font-size: 16px; margin: 0 0 6px; font-weight:bold; padding-left:10px; } textarea{ width:300px; } } ////////////////// General .inline_panel { width:511px; margin-bottom: 5px; float:left; ul{ margin:0 0 0 25px; li{ display:inline; width:150px; } img{ float:left; } a{ font-size:0.813em; color:#333; font-weight:bold; text-decoration:none; float:left; &.text{ width:70px; padding:0 5px; } } } } .panel_top{ background: url("/images/kids/panel_top.gif") top left no-repeat; height: 16px; width:511px; } .panel_middle{ background: url("/images/kids/panel_middle.gif") top left repeat-y; width:511px; float:left; } .panel_bottom{ background: url("/images/kids/panel_bottom.gif") top left no-repeat; height: 11px; width:511px; float:left; } .introCopy{ font-weight: normal; padding:0 25px 10px; } //////// End of Kids' Baking section //////////////////////////////////////////////////////////// // RHS .colRight div{ a{ img{ display:block; } } } //Additions .float_left{ display:block; float:left; } //Breadcrumbs #breadcrumbs ul{ margin: 10px 0 10px 40px; li{ display:inline; font-size:0.688em; color:#666; a{ color:#666; } } } //Navigation #navigation { ul{ padding: 3px 0 0 8px; li{ a{ font-size:0.75em!important; padding:0 15px 0 10px; } } } } //Sitemap .ul_section{ float:left; margin-bottom:35px; } .sitemap_sections{ margin-left:40px; ul{ float:left; margin:5px 0; li{ margin:0 0 5px 0; a{ color:#0e3165; font-weight:bold; font-size:1.063em; } } ul{ margin-left:20px; width:250px; li{ a{ color:#0e3165; font-weight:bold; font-size:1.063em; } } ul{ margin-left:20px; li{ a{ color:#666; font-weight:normal; font-size:0.875em; } } ul{ margin-left:20px; li{ display:block; clear: both; a{ color:#666; font-weight:normal; font-size:0.875em; } } } } } } } .sitemap_sections ul ul ul ul{ li{ } } h1.main_recipe_page{ margin-left:10px; } /* competition/upload section */ .competition_styling{ width:500px; p{ font-size:1em; line-height:1.2em; } } .competition_answers{ padding-top:15px; .type12{ input{ margin-top:0; } } label{ display:block; } .third_party{ margin-top:20px; label{ float:left; font-size:0.9em; } input{ margin:2px 0 0 10px; } } } .competition_submitbutton{ background: #fff url("/images/global/submit.gif") no-repeat left top; border: none; cursor: pointer; display: block; font-size: 0; height: 25px; line-height: 0; margin-left: 9px!important; overflow: hidden; width: 118px; clear:both; float:left; } .competition_upload{ textarea{ height:120px; } input#compentry_content{ width:272px; } } // Ecoupon page .col_right_full{ float:left; width:741px; iframe{ border:none; margin-right:20px; } } .ecoupon_area{ img{ display:block; } } //Ecoupon sidebar .ecoupon_top{ background: url("/images/home/ecoupon_top.gif") top left no-repeat; height:14px; width:200px; margin:0!important; } .ecoupon_area{ background: url("/images/home/ecoupon_middle.gif") top left repeat-y; width:200px; text-align:center; margin:0!important; div{ margin:0!important; } .header{ color:#0e3267; font-size:1.25em; font-family:'Bevan', arial, serif; padding:0 15px 10px; line-height:1em; a{ color:#0e3267; text-decoration:none; } } .body{ font-size:0.813em; padding:0 15px 10px; a{ color:#333; text-decoration:none; font-weight:normal; } } } .ecoupon_bottom{ width:200px; } .brd_reg { #brd-visit{ margin: 0; padding: 0 1.5em; text-align: left; height:32px; } #welcome, #visit-links{ padding: 0.5em 0; } .gen-content, .main-content { border-style: solid; border-width: 1px; background: #fbfbfb; border-color: #DFE6ED; border-bottom-color: #CBD1D8; } .options span{ margin: 0 0 0 0.5em; padding: 0 0 0 0.5em; } a{ color: #00579C; &:hover, &:active, &:focus{ text-decoration: none; color: #b42000; } } p{ padding: 0.5em 0;} ul, ol { padding: 0.5em 0 0.5em 2em; } .required label em, #req-msg em, .warn strong, .important strong { color: #B42000; } .crumbs { background: #fff; border-color: #fff; font-size: 1.084em; margin: 0.5em 0; padding: 0 1.417em; a{ color: #00579C; text-decoration:none; &:hover, &:active, &:focus{ text-decoration: underline; } } } .main-head, .main-foot { background: #1F537B; color: #ddd; border-color: #1f537b; border-style: solid; border-width: 1px; padding: 0 1.417em; } .main-head{ h2 { font-size: 1.084em; padding-right: 10em; padding: 0.5em 10em 0.5em 0; font-weight:normal } } .crumblast{font-weight:bold;} .ct-box { border-style: solid; border-width: 1px; margin: 1.417em; padding: 0.5em 1em; position: relative; background: none repeat scroll 0 0 #FFFFE1; border-color: #DBE0E4; h2 { color: #1F537B; font-size: 1.167em; font-weight: bold; } } .req-warn { display: none; } frm-group { margin: 1.417em; } sf-set { padding: 0 0 0 17em; .fld-input { display: block; left: 0; padding: 0.3em 1em; position: absolute; top: 0; } } form{ .sf-set{ margin:10px 0; } label{ display:block; width: 16em; margin:0.3em 0; text-align:right; float: left; color: @form_blue; font-weight: bold; em { font-size: 0.917em; line-height: 1.2em; text-align:right; display:block; width: 100%; font-style: normal; font-weight: normal; } } small{ font-size: 0.917em; margin: 2em 10px 0; text-align: left; color:@form_blue; } input[type="text"], .text input { margin: 0.3em 10px; } select { float:left; margin: 0.3em 10px !important; } .date { .fld-input { padding:0 8px; display:block; float:left; select{ margin: 0.3em 0.3em 0.3em 0 !important; } } } .register_boxes{ padding:0 8px; display:block; float:left; .checkbox { display:block; margin:5px 0; input[type="checkbox"], input[type="text"]{ margin: 0 4px 0 0; } input[type="text"]{ clear:both; } label{ display:inline; color:@text_color; font-weight:normal; float:none; padding:0; margin:0 !important; } } } .privacy, .recaptcha{ margin:0.3em 0 0.3em 16.8em; display:block } .frm-buttons{ border-top:3px double #DBE0E4; margin: 0.75em 1.417em 1em; padding: 0.8em 0 0.3em 18em; input[type="submit"]{ font-size: 1.084em; padding-left: 0.5em; padding-right: 0.5em; } } } } /* ####################################### LEAVE AT BOTTOM OF CSS ####################################### */ /* Clearing floats without extra markup Based on How To Clear Floats Without Structural Markup by PiE [http://www.positioniseverything.net/easyclearing.html] */ .hidden { position:absolute !important; left:-10000px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; text-decoration: none !important; } .clear_new { display: inline-block; } .clear_new:after, .container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html .clear_new { height: 1%; } .clear_new { display: block; }