*{padding:0;margin:0;}

/*--- LAYOUT ---*/
body{background:#fff;font-family:Verdana, Geneva, "Lucida Sans", Arial, sans-serif;font-size:12px;line-height:160%; word-spacing:0.1em;color:#333;}
#wrap{margin:10px auto 10px; width:1080px;}

/*--- HEADER ---*/
#header{border:5px solid #ddd; background-color:#f5f5f5; height:116px; font-family:Helvetica, Arial, sans-serif; margin-bottom:14px;}
#logo {margin:40px 0 0 28px; font-size:52px; letter-spacing:-2px; text-transform:uppercase; text-shadow: 4px 4px #fff; font-weight:bold;}
#logo a {text-decoration:none; color:#999;}
#logo .which {color:#3399AC;}
#logo .protein {color:#006699;}
#logo .couk {font-size:36px;}
#tagline {margin:16px 0 0 30px; font-size:14px; font-variant:small-caps; text-shadow: 1px 1px #FFF; color:#666;}

/*--- BREADCRUMB ---*/
div.breadcrumb {margin-bottom:14px; color:#666;}

/*--- TITLE ---*/
div.title h1 {color:#444; margin-bottom:2px; margin-top:0;}
div.title p {color:#666; padding-bottom:4px; border-bottom:1px solid #ccc;}
div.title p.review {margin-bottom:0;}

/*--- MAIN CONTENT ---*/
#wrapper {float:left; width: 825px; /* margin-left:260px; /* max-width:900px; */}
.content{border:5px solid #ddd; padding:10px 10px 2px; margin-bottom:16px;}

/*--- SIDEBAR CONTENT ---*/
.sidebar {float:left; width:215px; border:5px solid #ddd; font-size:12px; padding:10px 10px 0; margin:0 10px 16px 0;}
.sidebar ul{list-style-type:square;padding:5px 10px 10px 0; margin:0;}
.sidebar ul li{margin-left:18px;}
.sidebar ul li.title{font-size:12px; font-weight:bold;line-height:30px; list-style-type:none; padding-left:0; margin-left:0;}

.sidebar a{text-decoration:none;}
.sidebar a:hover{text-decoration:underline;}
.sidebar a:active{text-decoration:none;}

/*--- FOOTER ---*/
#footer{text-align:center;color:#444;font-size:11px;border:5px solid #ddd;padding:10px;background-color:#f5f5f5;text-shadow: 1px 1px #fff; clear:both;}

/*--- REVIEW PAGE ---*/
#product_wrap{}
#product_wrap #image{float:left; width:310px; text-align:center; margin-bottom:40px;}
#product_wrap #ratings{min-width:330px; margin-left:330px; margin-bottom:40px;}
#product_wrap #ratings table{width:100%;}

p.review_category {margin:10px 0 18px;}

ul.awards {margin-left:5px; list-style-type:none;}
ul.awards li { background:url(../images/icons/awards/na.png) no-repeat 0 2px; padding-left:24px; margin-bottom:10px; }
ul.awards li.tick { background-image:url(../images/icons/tick.png); }
ul.awards li.overall { background-image:url(../images/icons/awards/overall.png); }
ul.awards li.taste { background-image:url(../images/icons/awards/taste.png); }
ul.awards li.mixability { background-image:url(../images/icons/awards/mixability.png); }
ul.awards li.calorie { background-image:url(../images/icons/awards/calorie.png); }
ul.awards li.protein { background-image:url(../images/icons/awards/protein.png); }
ul.awards li.vfm { background-image:url(../images/icons/awards/vfm.png); }

img.flavour {border:1px solid #CCC; margin-top:3px;}

.note_flavour {padding:6px 12px; font-weight:bold;}
.note_flavour:before {content: "Flavour reviewed: "; font-weight:normal;}
.note_flavour_chocolate {background-color:#e5ddcf;}
.note_flavour_strawberry {background-color:#ffe5e5;}

.wpc, .wpi, .wph, .wp {color:#FFFFFF; background-color:#060; padding:1px;}
.cc, .mc {color:#FFFFFF; background-color:#369; padding:1px;}
.ea {color:#FFFFFF; background-color:#F90; padding:1px;}

h3.showhide {border:1px #999 solid;cursor:pointer;margin:0 0 14px;padding:10px 45px 10px 12px;background:url(../images/icons/add-delete-sprite.png) no-repeat 97% 17px;}
h3.showhide:hover {border-color:#a9bacb;}
h3.showhide.active {background:url(../images/icons/add-delete-sprite.png) no-repeat 97% -83px;}

div.showhide_outer {border:1px #CCC solid;background-color:#fffff2;margin-bottom:26px;}
div.showhide_inner {padding:18px 14px;}
div.showhide_outer p:last-child, div.showhide_outer ul:last-child {margin-bottom:0;}

div.tableshide {margin:30px 0 40px;}
div.tablehide table {}

/*--- MAIN ATTRIBUTES ---*/
p, h1, h2, h3, h4, h5, h6, ul, ol {margin-bottom:28px;}
abbr { border-bottom:dotted 1px; cursor:help;}
blockquote {margin:30px 0 30px 30px; padding:12px 10px;border-left:5px solid #999; background-color:#f5f5f5;}

img {border:none;}
img.right {float:right;padding: 5px 0 5px 12px}
img.center {margin:0 auto 28px; padding:6px; display:block; border:1px #ccc solid;}

ul {margin-left:28px;}
ol {margin-left:28px;}

h1, h2, h3, h4, h5, h6 {line-height:140%;}

h1, .h1 {margin:14px 0 28px; font-size:30px;}
h2 {margin:40px 0 20px; font-size:24px;}
h2.top {margin:14px 0 28px; font-size:24px;}
h2.underline {border-bottom:1px solid #ccc;}
h3 {margin:40px 0 20px; font-size:20px; font-style:italic;}
h4 {margin:40px 0 20px; font-size:16px;}

a{color:#06C;}
a:hover{text-decoration:none;}
a:active{text-decoration:underline;}
a:visited{color:#909;}

::selection {background:#006699; color:#FFF;}

/*--- CUSTOM MAIN ATTRIBUTES ---*/

a.out {background: url(/images/icons/ext-link.png) no-repeat 100%; padding: 0 18px 0 0;}
a.download {background: url(/images/icons/download-file.png) no-repeat 100%; padding: 0 22px 0 0;}

.bold {font-weight:bold;}
.italic {font-style:italic;}
.center { text-align:center;}
.hidden { visibility:hidden; }
.left { text-align:left; }
.right { text-align:right; }

.indent { font-style:italic; margin-left:25px;}
.important { margin-left:25px; border-left:3px solid #069; padding:6px; font-weight:bold;}
.caution {border:1px solid #999;padding:6px 8px 6px 38px; background:#feffdb url(/images/icons/error.png) no-repeat 12px 49%;}
.note {border:1px solid #999;padding:6px 8px 6px 38px; background:#feffdb url(/images/icons/pencil.png) no-repeat 12px 49%;}
.note:before {content: "Note: ";}
.tip {border:1px solid #999;padding:6px 8px 6px 38px; background:#feffdb url(/images/icons/wand.png) no-repeat 12px 49%;}
.tip:before {content: "Tip: ";}
.summary {border:1px solid #999; padding:6px 8px; background-color:#e5fdff;}
.help {cursor:help;}
.rating {font-size:10px;}
.rating abbr {font-weight:bold; font-size:14px;}

.red {color:#900;}
.orange {color:#C60;}
.green {color:#060;}
.blue {color:#069;}
.purple {color:#606;}

.caption { background-color: #F9F9F9; border: 1px solid #CCCCCC; padding: 8px; font-size: 11px; margin:0 auto 26px; line-height:18px;} 
.caption img, .caption iframe  { border: 1px solid #CCCCCC; vertical-align:middle; margin:0 auto 5px; display:block;} 

ul.box_note {border:2px solid #ccc; padding:10px 8px 10px 42px; background:#feffdb url(/images/icons/pencil.png) no-repeat 12px 10px; margin-bottom:20px; margin-left:0;}
ul.box_note li.title { list-style-type:none; font-weight:bold; margin-left:0; margin-bottom:6px;}
ul.box_note li {margin-left:26px; margin-bottom:3px;}
ul.stats {background:#feffdb url(/images/icons/chart_bar.png) no-repeat 12px 10px;}


div.green_box {border:dashed 2px #060; background-color:#CFC; padding:8px; margin-bottom:24px;}
div.green_box p {margin-bottom:15px;}
div.green_box p.title {font-weight:bold; font-size:16px; margin-bottom:15px;}

div.blue_box {border:dashed 2px #036; background-color:#CFF; padding:8px; margin-bottom:24px;}
div.blue_box p {margin-bottom:15px;}
div.blue_box p.title {font-weight:bold; font-size:16px; margin-bottom:15px;}

/*--- TABLE ---*/

table {border: 1px solid #999; border-collapse:collapse; margin:0 auto 28px;}
table caption {font-size:10px;caption-side:bottom; padding-top:2px;}
table th {padding:8px 10px; background-color:#feffdb; border: 1px dashed #ccc;}
table tr {}
table tr:nth-child(odd) {background-color:#e5fbff;}
table td {padding:4px 10px; border: 1px solid #999;}

table td.rank { font-size:16px; font-weight:bold; text-transform:uppercase; text-shadow: 2px 2px #fff; text-align:center; color:#555; width:22px; padding:2;}
table td.rank:after {content: ".";}
table td.product { min-width:250px; padding:0px;}
table td.product img.product { vertical-align:middle; border: 1px solid #333; margin:4px;}
table td.product div {display:inline-block; vertical-align:middle; padding-left:5px;}
table td.retailer { padding:0px; text-align:center;}
table td.retailer img { vertical-align:middle; border: 1px solid #333; margin:4px;}

table td.price {padding:0px 4px; text-align:center;}
table td.ratings {text-align:right;}
table td.center {text-align:center;}
table td.important {background-color:#e5ffe5; font-weight:bold;}

table td div.logo_rank {position:relative;  }
table td div.logo_rank div.rank { position: absolute; left:0; top:0; color:#333; font-size:11px; font-weight:bold; background: rgba(255, 255, 255, 0.8); border-right: 1px solid #999; border-bottom: 1px solid #999;}
table td div.logo_rank div.rank div {padding:3px 6px 3px 4px;}

table.box {border:5px solid #ddd; margin-bottom:20px; width:100%; /*clear:both;*/}
table.nutrition th {text-align:left; width:130px;}
table span.button_extras {font-size:10px; font-style:italic;}

/*--- BUTTONS ---*/

.btn {display: inline-block;zoom: 1;/* zoom and *display = ie7 hack for display:inline-block */
*display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em;-moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);}
.btn:hover {text-decoration: none;}
.btn:active {position: relative;top: 1px;}
.btn:visited {color:#FFF;}

.btn_bigrounded {-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius: 2em;}
.btn_medium {font-size: 12px;padding: .4em 1.5em .42em;}
.btn_small {font-size: 11px;padding: .2em 1em .275em;}

.btn_review {font-size: 20px; padding: 0.75em 1.5em 0.35em; margin:10px;}
.btn_review span.price {font-size:32px; font-weight:bold;}
.btn_review span.url {font-size:12px;}

 /* color styles ---------------------------------------------- */
 
 /* orange */
.btn_orange {color: #fff;border: solid 1px #da7c0c;background: #f78d1d;background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));background: -moz-linear-gradient(top, #faa51a, #f47a20);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');}
.btn_orange:hover {background: #f47c20;background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));background: -moz-linear-gradient(top, #f88e11, #f06015);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');}
.btn_orange:active {color: #fff;background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));background: -moz-linear-gradient(top, #f47a20, #faa51a);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');}

 /* blue */
.btn_blue {color: #fff;border: solid 1px #0076a3;background: #0095cd;background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));background: -moz-linear-gradient(top, #00adee, #0078a5);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');}
.btn_blue:hover {background: #007ead;background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));background: -moz-linear-gradient(top, #0095cc, #00678e);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');}
.btn_blue:active {color: #fff;background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));background: -moz-linear-gradient(top, #0078a5, #00adee);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');}

 /* green */
.btn_green {color: #fff;border: solid 1px #538312;background: #64991e;background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));background: -moz-linear-gradient(top, #7db72f, #4e7d0e);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');}
.btn_green:hover {background: #538018;background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));background: -moz-linear-gradient(top, #6b9d28, #436b0c);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');}
.btn_green:active {color: #fff;background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));background: -moz-linear-gradient(top, #4e7d0e, #7db72f);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');}