/* colours blue - 628ea7 green - a4c92d yellow - ffda44 pink - ff89cb grey - c0c0c0 & acacac */ /* global default styles */ html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: normal;} ul, ol{list-style: none;} a {color: #628ea7; text-decoration: none;} a:hover {text-decoration: underline;} html {overflow: -moz-scrollbars-vertical;} .clear{clear:both; border: none;} /* site colors */ .blue{color: #628ea7;} .green{color: #a4c92d;} .yellow{color: #ffda44;} .pink{color: #ff89cb;} .grey{color: #c0c0c0;} /* structure - main boxes */ .box_blue{border: 7px solid #628da5; position: relative; margin-bottom: 20px; height: 100%;} .box_green{border: 7px solid #a4c92d; position: relative; margin-bottom: 20px; height: 100%;} .box_yellow{border: 7px solid #ffda44; position: relative; margin-bottom: 20px; height: 100%;} .box_pink{border: 7px solid #ff89cb; position: relative; margin-bottom: 20px; height: 100%;} .box_grey{border: 7px solid #acacac; position: relative; margin-bottom: 20px; height: 100%;} .corners_blue{background: url(/images/structure/blue/corners.png) no-repeat;} .corners_green{background: url(/images/structure/green/corners.png) no-repeat;} .corners_pink{background: url(/images/structure/pink/corners.png) no-repeat;} .corners_yellow{background: url(/images/structure/yellow/corners.png) no-repeat;} .corners_grey{background: url(/images/structure/grey/corners.png) no-repeat;} .tl{display:block; width: 22px; height: 22px; position: absolute; left: -7px; top: -7px; background-position: 0px 0px;} .tr{display:block; width: 22px; height: 22px; position: absolute; right: -7px; top: -7px; background-position: -22px 0px;} .bl{display:block; width: 22px; height: 22px; position: absolute; left: -7px; bottom: -7px; background-position: 0px -22px;} .br{display:block; width: 22px; height: 22px; position: absolute; right: -7px; bottom: -7px; background-position: -22px -22px;} .content_form span.form_tl, span.form_tr, span.form_bl, span.form_br {background: url(/images/structure/forms/corners.gif) no-repeat; display:block; width: 9px; line-height: 2px; height: 9px; position: absolute;} .content_form .form_tl{left: 0px; top: 0px; background-position: 0px 0px;} .content_form .form_tr{right: 0px; top: 0px; background-position: -9px 0px;} .content_form .form_bl{left: 0px; bottom: 0px; background-position: 0px -9px;} .content_form .form_br{right: 0px; bottom: 0px; background-position: -9px -9px;} /* structure - site layout */ #container{width: 660px; margin-left: auto; margin-right: auto;} #header{margin-top: 40px; height: 40px; margin-bottom: 40px; position: relative; z-index: 9999;} #content{width: 410px; float: right; position: relative; } #sub_content{width: 230px; float: left;} #sub_content .side_img{height: 300px;} #footer{color: #A4A4A4; font-size: 10px;float: right;} /* main nav */ #main_nav{position: absolute; top: 40px; right: 32px;} #main_nav li{float: left; position: relative; z-index: 9999;} #main_nav li a{display:block; margin-right: 42px; height: 18px; text-indent: -9999px;} #main_nav li a.last{margin-right: 0px;} #main_nav li a#nav_about{background: url(/images/structure/nav/about.gif) no-repeat; width: 36px;} #main_nav li a#nav_menu{background: url(/images/structure/nav/menu.gif) no-repeat; width: 33px;} #main_nav li a#nav_joinus{background: url(/images/structure/nav/joinus.gif) no-repeat; width: 44px;} #main_nav li a#nav_funstuff{background: url(/images/structure/nav/funstuff.gif) no-repeat; width: 53px;} #main_nav li a#nav_findus{background: url(/images/structure/nav/findus.gif) no-repeat; width: 44px;} /* sub navs */ #main_nav li div{position: absolute; top: 17px; left: 0px; background: #fff; z-index: 9999; display: none;} #main_nav li div span{width: 9px; height: 9px;position: absolute; z-index: 9999; display:block; line-height: 1px;display:block;} #main_nav li ul li{float: none; margin: 10px;padding-left: 15px;} #main_nav li ul li a{text-indent: 0px; margin: 0px; height: 12px; padding-bottom: 3px; width: 100px;} #main_nav li ul li a:hover{text-decoration: none; color: #000;} #main_nav li div.subnav span.subnav_tl{left: -2px; top: -2px; background-position: 0px 0px;} #main_nav li div.subnav span.subnav_tr{right: -2px; top: -2px; background-position: -9px 0px;} #main_nav li div.subnav span.subnav_bl{left: -2px; bottom: -2px; background-position: 0px -9px;} #main_nav li div.subnav span.subnav_br{right: -2px; bottom: -2px; background-position: -9px -9px;} #main_nav li div.grey{border: 2px solid #c0c0c0;} #main_nav li div.grey li{background: url(/images/structure/grey/arrow.gif) no-repeat 0px 3px;} #main_nav li div.grey li a{border-bottom: 1px solid #c0c0c0;} #main_nav li div.grey span{background: url(/images/structure/grey/subnav.gif) no-repeat; } #main_nav li div.yellow{border: 2px solid #ffda44;} #main_nav li div.yellow li{background: url(/images/structure/yellow/arrow.gif) no-repeat 0px 3px;} #main_nav li div.yellow li a{border-bottom: 1px solid #ffda44;} #main_nav li div.yellow span{background: url(/images/structure/yellow/subnav.gif) no-repeat; } #main_nav li div.green{border: 2px solid #a4c92d;} #main_nav li div.green li{background: url(/images/structure/green/arrow.gif) no-repeat 0px 3px;} #main_nav li div.green li a{border-bottom: 1px solid #a4c92d;} #main_nav li div.green span{background: url(/images/structure/green/subnav.gif) no-repeat; } #main_nav li div.blue{border: 2px solid #628ea7;} #main_nav li div.blue li{background: url(/images/structure/blue/arrow.gif) no-repeat 0px 3px;} #main_nav li div.blue li a{border-bottom: 1px solid #628ea7;} #main_nav li div.blue span{background: url(/images/structure/blue/subnav.gif) no-repeat; } #main_nav li div.pink{border: 2px solid #ff89cb;} #main_nav li div.pink li{background: url(/images/structure/pink/arrow.gif) no-repeat 0px 3px;} #main_nav li div.pink li a{border-bottom: 1px solid #ff89cb;} #main_nav li div.pink span{background: url(/images/structure/pink/subnav.gif) no-repeat; } #main_nav li div.show_sub_nav{display:block;} /* headers */ h1 a{width: 226px; height: 47px; text-indent: -9999px; display: block;} h1 a.blue{background: url(/images/structure/blue/logo.gif) no-repeat;} h1 a.green{background: url(/images/structure/green/logo.gif) no-repeat;} h1 a.yellow{background: url(/images/structure/yellow/logo.gif) no-repeat;} h1 a.pink{background: url(/images/structure/pink/logo.gif) no-repeat;} h2{text-indent: -9999px; margin-left: 15px; margin-top: 15px; margin-bottom: 40px;} h2#drink_different{background: url(/images/content/beyoudrinkdifferent.gif) no-repeat; width: 103px; height: 38px; } h2#keep_in_touch{background: url(/images/content/keepintouch.gif) no-repeat; width: 126px; height: 21px; margin: 10px 0px 0px 15px;} h2#suggest_shake{background: url(/images/content/suggestashake.gif) no-repeat; width: 146px; height: 22px; margin-bottom: 10px;} h2#aboutus{background: url(/images/content/aboutus.gif) no-repeat; width: 65px; height: 14px;} h2#recruitment{background: url(/images/content/recruitment.gif) no-repeat; width: 87px; height: 14px; } h2#franchise{background: url(/images/content/franchisepartnering.gif) no-repeat; width: 182px; height: 17px;} h2#news{background: url(/images/content/shakekingnews.gif) no-repeat; width: 128px; height: 17px;} h2#flavours{background: url(/images/content/flavours.gif) no-repeat; width: 62px; height: 15px; margin-bottom: 20px;} h2#toppings{background: url(/images/content/toppings.gif) no-repeat; width: 66px; height: 17px;} h2#extras{background: url(/images/content/extras.gif) no-repeat; width: 44px; height: 17px;} h2#specials{background: url(/images/content/specials.gif) no-repeat; width: 61px; height: 17px;} h2#joinus{background: url(/images/content/joinus.gif) no-repeat; width: 52px; height: 14px;} h2#alreadyamember{background: url(/images/content/alreadyamember.gif) no-repeat; width: 146px; height: 18px;margin-bottom: 10px;} h2#signuphere{background: url(/images/content/signuphere.gif) no-repeat; width: 146px; height: 18px;margin-bottom: 10px;} h2#ooops{background: url(/images/content/ooops.gif) no-repeat; width: 58px; height: 18px;margin-bottom: 10px;} h2#suggest{background: url(/images/content/suggestaflavour.gif) no-repeat; width: 126px; height: 18px;} h2#yourideas{background: url(/images/content/yourideas.gif) no-repeat; width: 88px; height: 14px; margin-bottom: 10px;} h2#collectpoints{background: url(/images/content/collectpoints.gif) no-repeat; width: 128px; height: 17px; } h2#giftcards{background: url(/images/content/giftcards.gif) no-repeat; width: 66px; height: 17px;;} h2#howitworks{background: url(/images/content/howitworks.gif) no-repeat; width: 94px; height: 14px; margin-bottom: 10px;} h2#shakekingcards{background: url(/images/content/shakekingcards.gif) no-repeat; width: 128px; height: 17px;} h2#myspace{background: url(/images/content/myspace.gif) no-repeat; width: 68px; height: 17px;} h2#propaganda{background: url(/images/content/pimp_my_drink.gif) no-repeat; width: 368px; height: 40px;} h2#giftcardalias{background: url(/images/content/giftcardalias.gif) no-repeat; width: 184px; height: 24px; margin-bottom: 20px;} h2#howmuch{background: url(/images/content/howmuch.gif) no-repeat; width: 184px; height: 40px; margin-bottom: 5px;} h2#bristol{background: url(/images/content/whatsbristol.gif) no-repeat; width: 244px; height: 23px; margin-bottom: 5px;} h2#weston{background: url(/images/content/whatsweston.gif) no-repeat; width: 104px; height: 21px; margin-bottom: 5px;} h2#chat{background: url(/images/content/talktous.gif) no-repeat; width: 78px; height: 14px; margin-bottom: 5px;} /* home page stuff (borders add 14px) */ #home .box_green{height: 300px;} #home .box_blue{height: 90px;} #home .box_yellow{height: 90px;} #home #content .box_green p{width: 180px;} #home #content .box_green span#main_image{width:158px; height: 347px; position:absolute; background: url(/images/content/shakekingcup.png) no-repeat; top: -20px; right: 20px; z-index: 5;} #home #content .box_green div#flavours_image{width:186px; height: 111px; position:absolute; text-indent: -9999px; top: 180px; left: 100px; z-index: 2;} #home_content_nav{margin-left: 15px; margin-top: 30px;} #home_content_nav li a{display: block; width: 65px; margin-bottom: 10px;} #home_content_nav li a:hover{text-decoration: none;} #home_content_nav li a.blue{background: url(/images/structure/blue/arrow.gif) no-repeat 100% 3px; border-bottom: 3px solid #628ea7;} #home_content_nav li a.green{background: url(/images/structure/green/arrow.gif) no-repeat 100% 3px; border-bottom: 3px solid #a4c92d;} #home_content_nav li a.pink{background: url(/images/structure/pink/arrow.gif) no-repeat 100% 3px; border-bottom: 3px solid #ff89cb;} #home #content .box_blue p{width: 170px;} #home #content .box_blue ul{position: absolute; top: 12px; right: 13px;} #home #content .box_blue ul li {float: left; margin-left: 6px;} #home #content .box_blue ul li a{width: 66px; height: 69px; display: block; text-indent: -9999px;} #home #content .box_blue ul li a#facebook{background: url(/images/content/facebooklogo.jpg) no-repeat;} #home #content .box_blue ul li a#twitter{background: url(/images/content/twitterlogo.jpg) no-repeat;} #home #content .box_blue ul li a#myspace{background: url(/images/content/myspacelogo.jpg) no-repeat;} #home #content .box_blue ul li a#facebook:hover{background: url(/images/content/facebooklogoover.jpg) no-repeat;} #home #content .box_blue ul li a#twitter:hover{background: url(/images/content/twitterlogoover.jpg) no-repeat;} #home #content .box_blue ul li a#myspace:hover{background: url(/images/content/myspacelogoover.jpg) no-repeat;} #home #content .box_yellow span#suggest_icon{background: url(/images/content/mysterycup.jpg) no-repeat; width:35px; height: 52px; display: block; position: absolute; top: 20px; right: 15px;} #home #content .box_yellow p em{font-style: normal; position:relative; top: -8px;} /* sub_content_list */ #sub_content_list{} #sub_content_list ul li{height: 60px;} #sub_content_list ul li img{ float: left; margin-top: 10px; margin-right: 10px; padding-bottom: 5px;} #sub_content_list ul li h3{padding-top: 10px; font-size: 12px; font-weight: bold;} #sub_content_list ul li p{} #sub_content_list h4{color: #628DA5;} /* main content areas */ #content p{margin: 15px;} .tabs{height: 25px; margin-top: 15px; padding-left: 5px;} .tabs li{float: left; margin-right: 3px; margin-top: 4px;} .tabs li a{padding: 4px 10px 2px 10px; margin: 0px 0px 0px 0px; display: block;} .multirow{margin-top: 0px;} ul.greytabs{background: #acacac;} ul.pinktabs{background: #ff89cb;} ul.bluetabs{background: #628ea7;} ul.yellowtabs{background: #ffda44;} ul.greentabs{background: #a4c92d;} .greytabs li{background: #fff url(/images/structure/grey/tabs_right.gif) no-repeat 100% 0px;} .greytabs li a{background: url(/images/structure/grey/tabs_left.gif) no-repeat;} .pinktabs li{background: #fff url(/images/structure/pink/tabs_right.gif) no-repeat 100% 0px;} .pinktabs li a{background: url(/images/structure/pink/tabs_left.gif) no-repeat;} .bluetabs li{background: #fff url(/images/structure/blue/tabs_right.gif) no-repeat 100% 0px;} .bluetabs li a{background: url(/images/structure/blue/tabs_left.gif) no-repeat;} .yellowtabs li{background: #fff url(/images/structure/yellow/tabs_right.gif) no-repeat 100% 0px;} .yellowtabs li a{background: url(/images/structure/yellow/tabs_left.gif) no-repeat;} .greentabs li{background: #fff url(/images/structure/green/tabs_right.gif) no-repeat 100% 0px;} .greentabs li a{background: url(/images/structure/green/tabs_left.gif) no-repeat;} .tabs li a.selected{color: #000;} /* sub_content_list */ #news{margin: 20px;} #news p{margin: 0px;} #news ul li{background: url(/images/content/news_archive_divider.gif) repeat-x; height: 60px;} #news ul li img{ float: left; margin-top: 10px; margin-right: 10px;} #news ul li h3{padding-top: 10px; color: #628DA5; font-size: 12px; font-weight: bold;} #news ul li p{color: #628DA5;} #news h4{clear: both; color: #628DA5;} /* menu pages */ #menu #letters{ margin-left: 15px; width: 225px; height: 40px; float: left;} #menu #letters li{float: left;} #menu #letters li a{display: block; width: 16px; height: 15px; margin-right: 1px; margin-top: 1px; padding-top: 1px; text-align: center; background: url(/images/content/letters.gif) no-repeat; color: #fff; font-weight: bold;} #menu form{width: 130px; float: right; position: relative;} #menu form label{display: block; color: #ff89cb; font-weight: bold; margin-bottom: 1px;} #menu form input#search_box{width: 100px;height: 15px;border: 1px solid #ff89cb; color: #ff89cb; font-size: 11px;} #menu form #search_button{position: absolute; right: 18px; top:21px;} #menu h3{margin-left: 15px; font-size: 16px;} #menu h4{font-size: 12px; margin-left: 15px; margin-bottom: 10px;} #menu h6{font-size: 11px; margin-left: 15px; margin-bottom: 10px; color: #ff89cb } #menu p em{color: #ff89cb; font-style: normal;} #menu #menu_list{margin-left: 15px; margin-top: 15px;} #menu #menu_list li{width: 185px; margin-bottom: 10px; margin-right: 1px; float: left;} #menu #menu_list li a{background: url(/images/structure/pink/arrow.gif) no-repeat 0px 3px; padding-left: 12px;} #menu #specials_list{margin: 0px 15px 0px 15px;} #menu #specials_list li{background: url(/images/structure/pink/dots.gif) repeat-x; padding: 10px 0px 10px 0px;} #menu #specials_list li h5{color: #ff89cb; font-weight: bold; width: 160px; float: left;} #menu #specials_list li p{ margin: 0px; float: right; width: 200px;} /* fun stuff */ #funstuff #content .box_green span#suggest_icon{background: url(/images/content/mysterycup.jpg) no-repeat; width:35px; height: 52px; display: block; position: absolute; top: 6px; right: 15px;} #yourideasswf {margin-left: 15px; margin-bottom: 20px;} #funstuff #content #giftcard_p{ width: 185px; margin-bottom: 60px;} #funstuff #content #giftcard_img{ position: absolute; top: 75px; right: 15px;} /* members */ #account #content h3{margin-left: 15px; margin-top: 15px; margin-bottom: 40px; font-size: 16px; font-weight: bold;} #account #content p {position: relative} #account #content p a {} #account #content p em {position: absolute; top: 0px; left: 180px; font-style: normal} #statement #content h3{margin-left: 15px; margin-top: 15px; margin-bottom: 40px; font-size: 16px; font-weight: bold;} #statement table{ margin: 15px;} #statement table th{text-align: left; border-bottom: 1px solid #ccc} #statement table td{padding: 3px 0px 3px 0px;} #statement table td.last{border-top: 1px solid #ccc;} #prizes{margin: 15px;} #prizes li{position:relative; margin-bottom:10px;} #prizes li span.prize{display: block;width: 51px; height: 15px; background: url(/images/content/rewardsnotachieved.gif) no-repeat;text-align: center;} #prizes li span.achieved{background: url(/images/content/rewardsachieved.gif) no-repeat; color: #fff;} #prizes li span.points{position: absolute; top: 0px; left: 60px;} #points{width: 185px; height: 37px; margin-left: 15px; position:relative;} #points_left{position: absolute; top: 0px; left: 0px; color: #fff;background: url(/images/content/points_left.gif) no-repeat;display: block; height: 30px; width: 48px; font-weight: bold; font-size: 16px; text-align: center; padding-top: 7px;} #points_right{position: absolute; top: 0px; left: 48px;background: url(/images/content/points_right.gif) no-repeat;display: block; height: 30px; width: 137px; font-weight: bold; font-size: 13px; text-align: center; padding-top: 9px;} #points_help{display: none;} #statement #sub_content p{margin: 5px;margin-left: 15px; } #account h4{margin-left: 15px; font-size:16px;} table.rateshake{margin: 0px 15px 15px 15px;border-bottom: 1px solid #ccc;} table.rateshake th{text-align: right; border-bottom: 1px solid #ccc;} #redeem .box_blue{float: right; width: 400px; height: 246px;} #redeem img#redeem_img{float: left;width: 227px;} #redeem #content{width: 650px; margin-top: 15px;} /* find us */ #findus #content{} #findus table{width: 160px; margin: 0px 15px 15px 15px; border-right: 1px solid #ccc; float: left;} #findus #content div#address{position: relative; height: 105px; width: 205px; float:right;} #findus #content div#address ul{position: absolute; bottom: 0px; left: 15px; } /* content forms */ .content_form{margin: 15px; background: #e6e6dc; position: relative; height: 100%} .content_form fieldset{ border: 1px solid #bbbbaa; padding: 10px;} .content_form fieldset legend{display: none;} .content_form fieldset ul{} .content_form fieldset ul li{ margin-top: 10px;} .content_form fieldset ul li.col2{width: 170px; float: left; } .content_form fieldset ul li input{margin: 0px; padding: 0px;margin-bottom: 4px;} .content_form fieldset ul li .inputbox{font-size: 10px; border: 1px solid #bbbbaa; width: 160px; } .content_form fieldset ul li select{font-size: 10px; border: 1px solid #bbbbaa; } .content_form fieldset ul li label{color: #666666; display: block; margin-bottom: 2px;} .content_form fieldset ul li span{color: #666666;} .content_form fieldset ul li .messagebox{width: 100%;font-size: 10px; border: 1px solid #bbbbaa; height: 150px; } .content_form fieldset ul li radio{margin: 0px; padding: 0px;} .message{ border: 1px solid #ccc; background: #fee; padding: 5px;} /* left hand side stuff */ #home #sub_content div.box_pink {} #FlowPlayer{ margin-top: 10px; margin-left: 1px;} #home #sub_content div.box_pink img{margin-top: 10px} #about #sub_content div img{margin-top: 61px} #menu #sub_content div.top{height: 293px;} #propaganda #sub_content div.box_green img{margin-top: 50px; margin-left: 25px;} #funstuff #sub_content div.top{ height: 293px;} #funstuff #sub_content p{margin: 0px 15px 0px 15px; font-size: 11px;} #memberslogin #sub_content div.box_blue{height: 293px;} #memberslogin #sub_content div.box_blue img{margin: 0px; padding: 0px;} #account #sub_content div.box_blue{height: 293px;} #findus #sub_content div.box_yellow{height: 293px;} #chat #sub_content div.box_yellow{height: 277px;} /* make the bottom boxes on left butt up to the top one... */ #sub_content .side_bottom{padding: 5px 15px 5px 15px; position: relative; top: -20px;} /* random stuff */ a.pdf{background: url(/images/content/pdficon.gif) no-repeat; display: block; padding-left: 22px; height: 16px;} .dots{ margin: 5px 15px 5px 15px;} .pinkdots{background: url(/images/structure/pink/dots.gif) repeat-x; height: 2px;} .greydots{background: url(/images/structure/grey/dots.gif) repeat-x; height: 2px;} .bluedots{background: url(/images/structure/blue/dots.gif) repeat-x; height: 2px;} .greendots{background: url(/images/structure/green/dots.gif) repeat-x; height: 2px;} .yellowdots{background: url(/images/structure/yellow/dots.gif) repeat-x; height: 2px;} /* scrolling flavours */ #flavours_image {width: 186px; height: 111px; padding: 0; margin: 0 auto; display: none;} #flavours_image img {width: 186px; height: 111px; top: 0; left: 0 } #menu #flavours_image{ position: absolute; top: 60px; left: 190px;}