/* -------------------------------------------------------------- 

  Layout - three blocks of span-24 width with padding and images
           to give a rounded border and glow.
  
-------------------------------------------------------------- */
body {
    font-family:"DejaVu Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color:#202020;
    background:#dedede;
    padding:0;margin:0;
}

div.intro p,
div.outro p {
	font-size:1.2em;
	line-height:1.25;
	margin-bottom:1em;
}

div.outro {
	border-top:1px solid #ccc;
	padding-top:18px;
}
div.intro a {
    border-bottom:1px solid #ddd;
}

div.intro a:hover {
    text-decoration:none;
}

div#top,
div#nav,
div#mid,
div#tail {
    width:950px;
    margin:0 auto;
    border:18px solid #fff;
    border-width:0 18px;
}

/* Header and navigation */
#top {
    background:#2A437D url(/css/images/header_bg.png) bottom center repeat-x;
    color:#fff;
}
#top-wrap div.logo img {
    padding:18px 0 0 30px;
}
#top-wrap h1 {
    /*text-align:right;*/
    border-color: #fff;
    margin-top:18px;
    font-family: "Droid Serif", "Times New Roman", "Times", serif;
}
#nav-wrap a,
#top-wrap a {
    display:block;
    color:#fff;
}
#nav-wrap a:hover,
#top-wrap a:hover {
    text-decoration:none;
}

#top-wrap p {
    font-size:1.5em;
    line-height: 1.25;
    margin:21px 10px 0 0;
    font-family: "Droid Serif", "Times New Roman", "Times", serif;
}
#top-wrap p span.phone {
    color:yellow;
}
#top-wrap ul, #top-wrap li,
#nav-wrap ul, #nav-wrap li {
    padding:0; margin:0;
    list-style-type:none;
}
#nav-wrap ul {
    margin-right:10px;
}
#top-wrap li {
    margin-bottom:1px;
}
#top-wrap li a {
    padding:0.5em;
    font-weight:bold;
    background-color:#C70011;
}
#top-wrap li.last a {
    margin-bottom:0;
}
#top-wrap li a:hover {
    background-color:#DBD0BD;
    color:#C70011;
}

#top-wrap li a span {
    font-weight:normal;
}

/* Non-full width top */
#nav-wrap ul {
    background:#D7DFF1;
    margin-right:0;
    padding-left:10px;
}
#nav-wrap li {
    float:left;
    margin-top:0.5em;
    margin-right:10px;
    background: transparent url(/css/images/top_nav_tab_bg_right.png) right top no-repeat;
    min-width:122px;
}

#nav-wrap li a {
    color:#0C1325;
    font-size:1.2em;
    line-height:1.25;
    padding:0.5em 16px 0.3em 16px;
    background: transparent url(/css/images/top_nav_tab_bg_left.png) left top no-repeat;
    min-width:90px;
    text-align:center;
}
#nav-wrap li.first a {
    background: transparent url(/css/images/top_nav_tab_bg_left_star.png) left top no-repeat;
}
#nav-wrap li a span.small {
    line-height:1.25;
}

/* First had dark blue background */
#nav-wrap li.first {
    background-position:100% -300px;
}
#nav-wrap li.first a {
    background-position:0 -300px;
    color:#fff;
}

/* Red hover */
#nav-wrap li:hover {
    background-position:100% -100px;
    background-color:#c70011;
}

#nav-wrap li a:hover {
   background-position:0 -100px;
   color:#fff;
}

/* Current is white */
#nav-wrap li.current {
    background-position:100% -200px;
}
#nav-wrap li.current a {
    background-position:0 -200px;
    color:#2A437D;
}
#nav-wrap form {
    margin:0; padding:0;
    height:54px;
    background-color:#C70011; 
}
#nav-wrap form div {
    margin:0; padding:1em;
    display:inline-block; 
}
#nav-wrap input {
    font-size:1.4em;
    padding:3px;
    width:165px;
    color:#666;
}
#nav-wrap input.empty {
    background-image:url(/css/images/search_bg.png);
    background-position:top left;
    background-repeat: no-repeat;
}
#nav-wrap input:focus {
    background-color:#F2EEE7;
}
#nav-wrap button {
    border:0; background:transparent;
    padding:0; margin:0;
    vertical-align:top;
}
#nav-wrap button img {
    vertical-align:top;
    margin:0 0 0 0 !important; padding:0;
    width:26px; height:26px;
}
/* Content */
#mid {
    background-color:#fff;
    min-height:324px;
}

#mid {
    padding:18px 0;
}
/* Footer */
div#tail {
    background-color:#ccc;
    padding:0;
    border-bottom:18px solid #fff;
}
ul.colophon {
    list-style-type:none;
    padding:5px;
    margin:0;
    clear:both;
}

ul.colophon li {
    display: inline;
    margin:0 10px 0 0; padding:0;
}


/* -------------------------------------------------------------- 

  Bubbles
  
  A bubble has nice rounded heading using a background image.
  It can optionally have a tail to round the bottom too.
  
  FIXME: Should use the span-x classes to set width and jst use this for images.
-------------------------------------------------------------- */
.bubble-1 { width:30px; /*background-image: url(/css/images/ho_span_1.png);*/ }
.bubble-2 { width:70px; /*background-image: url(/css/images/ho_span_2.png);*/ }
.bubble-3 { width:110px; /*background-image: url(/css/images/ho_span_3.png);*/}
.bubble-4 { width:150px; /*background-image: url(/css/images/ho_span_4.png);*/ }
.bubble-5 { width:190px; /*background-image: url(/css/images/ho_span_5.png);*/ }
.bubble-6 { width:230px; /*background-image: url(/css/images/ho_span_6.png);*/ }
.bubble-7 { width:270px; /*background-image: url(/css/images/ho_span_7.png);*/ }
.bubble-8 { width:310px; /*background-image: url(/css/images/ho_span_8.png);*/ }
.bubble-9 { width:350px; /*background-image: url(/css/images/ho_span_9.png);*/ }
.bubble-10 { width:390px; /*background-image: url(/css/images/ho_span_10.png);*/}
.bubble-11 { width:430px; /*background-image: url(/css/images/ho_span_11.png);*/}
.bubble-12 { width:470px; /*background-image: url(/css/images/ho_span_12.png);*/}
.bubble-13 { width:510px; /*background-image: url(/css/images/ho_span_13.png);*/ }
.bubble-14 { width:550px; /*background-image: url(/css/images/ho_span_14.png);*/ }
.bubble-15 { width:590px; /*background-image: url(/css/images/ho_span_15.png);*/ }
.bubble-16 { width:630px; /*background-image: url(/css/images/ho_span_16.png);*/ }
.bubble-17 { width:670px; /*background-image: url(/css/images/ho_span_17.png);*/ }
.bubble-18 { width:710px; /*background-image: url(/css/images/ho_span_18.png);*/ }
.bubble-19 { width:750px; /*background-image: url(/css/images/ho_span_19.png);*/ }
.bubble-20 { width:790px; /*background-image: url(/css/images/ho_span_20.png);*/ }
.bubble-21 { width:830px; /*background-image: url(/css/images/ho_span_21.png);*/ }
.bubble-22 { width:870px; /*background-image: url(/css/images/ho_span_22.png);*/ }
.bubble-23 { width:910px; /*background-image: url(/css/images/ho_span_23.png);*/ }
.bubble-24 { width:950px; /*margin:0; background-image: url(/css/images/ho_span_24.png);*/ }



.bubble-wrap {
    padding-bottom:10px;
    margin-bottom:18px;
    background-color:#fff;
    background-position: bottom left;
    background-repeat: no-repeat;
}

.bubble-wrap h3 {
    margin:0;
    padding:0.5em;
    background-color:#2A437D;
    color:#fff;
}

.bubble-wrap h4 {
	background:#ddd;
	padding:0.5em;
    margin:9px 0;
}

.bubble-content {
    padding:10px;
    border:1px solid #ccc;
    border-width:0 1px 1px 1px;
}

/* Bubble stuff specific to this site */
.bubble-wrap .notice,
.bubble-wrap .error {
	margin:0;
}
.bubble-wrap .notice p {
    margin-bottom:9px;
}
.bubble-content div.controls {
    border:0; margin:0; padding:0;
}

.bubble-content .controls button,
.bubble-content .controls a.button {
    float:right;
}

/* Add to this as needs be */
div.bubble-8 label {
	width:70px;
}
div.bubble-8 input {
    width:200px;
}
div.bubble-16 label {
	width:110px;
}


/* -------------------------------------------------------------- 

  Link, heading and table defaults
  
-------------------------------------------------------------- */

a,
.error a,
.notice a,
.success a {
    color:#34588D;/* SITE SPECIFIC */
    text-decoration:none;
}

a:hover {
    color:#338000;/* SITE SPECIFIC */
    text-decoration:underline;
}

a.button:hover {
    text-decoration:none;
}

a.button, button {
    font-family:"DejaVu Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

table tbody th,
table tbody td {
    border-bottom:1px solid #eee;
}

table tfoot th {
    background-color:transparent;
}

hr.dotty {
   background:transparent url(/css/images/dotty.png) top left repeat;
   height:1px;
}

ol.terms {
    padding-left:10px;
}

ol.terms li ul,
ol.terms li ol {
    margin:1.5em;
}

.worldpay {
    border:1px solid #BBBBBB;
    background:#fff url(/css/images/worldpay_wide_bg.png) 1px 1px no-repeat;
    margin:1em 0;
    padding:1em;
}

.worldpay span {
    font-size:1.5em;
    line-height:1.5;
}
/* -------------------------------------------------------------- 

  Sidebar
  
-------------------------------------------------------------- */
#sidebar {
    margin:-17px 0 0 0;
}
#sidebar h3 {
    margin:0 0 1px 0;
    padding:0.4em 0.5em 0.5em;
    color:#fff;
    background-color:#2A437D;
}
#sidebar ul, #sidebar li {
    margin:0; padding:0; list-style-type:none;
}
#sidebar li {
    margin-bottom:1px;
}
#sidebar li a {
    display:block;
    background-color:#D7DFF1;
    color:#0C1325;
    font-size:1.2em; line-height:1.25;
    padding:0.6em 0.75em 0.57em 0.75em;
}
#sidebar li.last {
    margin-bottom:0;
}
#sidebar li.last a {
    background-color:#2A437D;
    color:#fff;
}
#sidebar li a:hover {
    color:#fff;
    background-color:#C70011;
    text-decoration:none;
}


/* -------------------------------------------------------------- 

  Page navigation
  
-------------------------------------------------------------- */
div.pagenav {
    margin-bottom:18px;
    position:relative;
}

div.pagenav p {
    background:#FFD324 url(/css/images/h2_shadow.png) bottom left repeat-x;
    margin:0;padding:0.75em 1em;
    border-top:1px solid #FFFBBD;
}

div.pagenav form {
    position:absolute;
    right:0.5em; top:0.6em;
}

div.pagenav form div {
    margin:0;padding:0;display:inline;
}

div.pagenav form div select {
    width:auto;
}

div.pagenav ul {
    margin:0;
    position:relative;
}

div.pagenav li {
    margin:0 1px 0 0;padding:0;
    display:block;
    float:left;
}

div.pagenav li a {
    background:#fff url(/css/images/page_number_bg.png) left top no-repeat;
    display:block;
    padding:0.4em 0 0.6em 0;
    width:30px;
    text-align:center;
    color:#333;
}

div.pagenav li a:hover {
    text-decoration:none;
    background-color:#ccc;
    background-position:-40px 0;
    color:#333;
}

div.pagenav li.selected {
    background:#FFD324 url(/css/images/page_number_current_bg.png) bottom left no-repeat;
    padding:0.65em 0;
    width:30px;
    text-align:center;
    margin-top:-4px;
}

/* Next and previous need to be positioned absolutely and of a fixed
  width */
div.pagenav li.next,
div.pagenav li.prev {
    position:absolute;
    top:0; right:0;
    margin:0;
    background:transparent;
}
div.pagenav li.prev {
    right:50px;
}
div.pagenav li.prev a {
    text-align:right;
}
div.pagenav li.next a,
div.pagenav li.prev a {
    padding:0.5em 5px;margin:0;
    width:40px;
    background:transparent;
}

/* -------------------------------------------------------------- 

  Products
  
-------------------------------------------------------------- */
body.home div.bubble-wrap {
    width:220px !important;
    border:0 !important;
}
body.home div.bubble-wrap h3 {
    font-size:1.2em;
}
body.home a.button {
    margin-right:24px !important;
}
div.product-collection,div.product-main {
    margin-right:10px;
}

div.product-row {
    margin-bottom:0; padding-bottom:0;
    border-top:1px solid #ccc;
}

div.product-collection h3 {
    min-height:54px;
    font-size:1em;
    line-height:1.4;
    padding:6px 0 0 0 !important;
    margin:0 !important;
    background-color:#fff !important;
    color:#333 !important;
}
/* 
    4 per row for this site, which needs to fit 
    into span-18 i.e. span-4.5 = 170px
*/
div.product-row div.bubble-wrap {
    width:170px;
    border-right:1px solid #ccc;
    margin:0; padding:0;
    margin-right:5px; padding-right:4px;
}
/* On the page of all titles there are 6 per row */
body.all-titles div.product-row div.bubble-wrap {
    width:150px;
}

div.product-row div.bubble-wrap.last {
    border-right:0 !important;
    margin-right:0 !important; padding-right:0 !important;
}

div.product-row div.bubble-content {
    margin:0; padding:0; border:0;
}

div.product-collection p img {
    margin:0 0.5em 0 0;padding:0;
}

div.no-text p {
    text-align:center;
}

div.no-text p img {
    display:inline;
    margin:0 0 0.5em 0; padding:0;
    float:none;
}

p.img-wrap {
    height:180px;
    vertical-align:middle;
    padding:0; margin:0;
}

p.rate {
    text-align:left;
    clear:both;
    margin:0; padding:0;
}
div.video p.rate {
    background-image:url(/media/images/icons/film.png);
    background-repeat:no-repeat;
    background-position:100% -3px;
}
span.stars {
    background:transparent url(/css/images/small_stars.png) top left no-repeat;
    width:70px;
    text-indent:-5000px;
    overflow:hidden;
    display:block;
    float:left;
}
span.stars-0 {
    visibility:hidden;
}
span.stars-1 {
    background-position:0 -20px;
}
span.stars-2 {
    background-position:0 -40px;
}
span.stars-3 {
    background-position:0 -60px;
}
span.stars-4 {
    background-position:0 -80px;
}
span.stars-5 {
    background-position:0 -100px;
}
span.stars-6 {
    background-position:0 -120px;
}
span.stars-7 {
    background-position:0 -140px;
}
span.stars-8 {
    background-position:0 -160px;
}
span.stars-9 {
    background-position:0 -180px;
}
span.stars-10 {
    background-position:0 -200px;
}
p.rate span.quiet {
    display:block;
    float:left;
    margin:0; padding:0;
    font-size:0.9em;
    line-height:1;
    text-align:left;
}

div.product-collection .price {
    display:block;
    float:left;
    color:#338000;
    font-size:1.2em;
    font-weight:bold;
    line-height:1.8;
}
h2 .price .quiet,
div.product-collection .price .quiet {
    font-size:70%;
}
div.product-collection .quiet {
    color:#666;
}
h2 .price {
    text-align:center;
    background-color:#C70011;
    color:yellow;
    float:right;
}
h2 .price .quiet {
    color:#fff;
}
button.order,
a.button.order {
    float:right;
    background:#2A437D url(/css/images/order_button_bg.png) 0 -50px repeat-x;
    color:#fff;
    border:1px solid #2A437D;
    font-weight:normal;
    text-decoration:none;
    margin:0;
}

button.order:hover,
a.order:hover {
    background-color:#C70011;
    background-position: 0 0;
    border:1px solid #C70011;
}

/* Table of pricing info availability */


table.buy {
    margin:0;
    width:100%;
    border-collapse:collapse;
}

table.buy td, 
table.buy th {
    margin:0; padding:3px 0;
    background-color:transparent;
    border-bottom:1px solid #eee;
}

table.buy tr.last td, 
table.buy tr.last th {
    border-bottom:0;
}

table.buy label {
    display:inline;
    width:auto;
    float:none;
    padding:0;margin:0;
}

table.buy th.desc {
    width:160px;
}

table.buy td.frm {
    width:auto;
}

table.buy form, table.buy form div {
    margin:0; padding:0;
}

table.buy input {
    padding:3px;
    margin:3px 3px 0;
    width:20px;
}

table.buy button {
    float:none;
    display:inline;
}

.video_sample {
    margin-top:18px;
    border:3px solid #ccc;
    width:240px; height:200px;
}

.video_sample object {
    margin-top:3px;
}

/* -------------------------------------------------------------- 

  Customer Reviews
  
-------------------------------------------------------------- */
h3#add_review {
    padding:0.5em;
    background-color:#2A437D;
    color:#fff;
}

div.reviews h2 {
    background-color:#ccc;
    color:#444;
    padding:0.5em;
    font-size:1.4em;
}

div.reviews div {
    border-bottom:1px solid #ccc;
    margin-bottom:18px;
}

div.reviews span.rate {
    font-weight:bold;
}

div.reviews div.last {
    border:0;
}
/* -------------------------------------------------------------- 

  General form
  
-------------------------------------------------------------- */
form div.req label,
form div.req div.note {
	color:#202020;
}
form div.req label span {
	color:red;
}
form div.req label span * {
	display:inline;
	float:none;
	margin:0;padding:0;
}
/* -------------------------------------------------------------- 

  Basket
  
-------------------------------------------------------------- */

table.basket {
    width:950px;
    border-collapse:collapse;
    border:2px solid #FFD324;
}

table.basket thead th {
    background: #FFD324;
    color:#333;
}

table.basket thead th.code,
table.basket thead th.price,
table.basket thead th.total,
table.basket thead th.qty {
    width:15%;
}

table.basket thead th.desc {
    width:40%;
}

table.basket tbody td {
    background:#FFF6BF;
    border-bottom:1px solid #DAD3A6;
    border-collapse:collapse;
}

table.basket input {
    width:20px;
    padding:4px;
}

table.basket input,
table.basket button {
    float:none;
    display:inline;
    margin:0;
}
table.basket tr.grand-total td,
table.basket tr.grand-total th {
    font-size:1.5em;
}
table.basket td.discount-code {
    text-align:left;
    padding:9px 0;
    border-top:1px solid silver;
}
table.basket td.discount-code label,
table.basket td.discount-code input {
    width:auto;
    float:none;
}
.bubble-content table.basket {
    width:930px;
    margin:0 auto 18px auto;
    border-bottom: 3px solid #FFD324;
}

div.basket-controls {
    background: #FFD324;
    padding:5px 0;
    width:950px;
    border:2px solid #FFD324;
}

div.basket-controls button.update {
    float:left;
    margin-left:10px;
}

div.basket-controls a.button {
    text-align:center;
}

div.basket-controls p {
    font-size:1.5em;
    margin-top:0;
    color:#333;
}

div.basket-controls a.button,
div.basket-controls p {
    float:left;
    margin-bottom:0;
}

/* -------------------------------------------------------------- 

  Checkout
  
-------------------------------------------------------------- */

/* Web checkout steps */
.web-checkout-steps {
    background-color: #FFD324;
    padding:5px 0;margin:18px 0 18px 0;
}
.web-checkout-steps ol {
    background-color:red;
    margin:0; padding:0;
}
.web-checkout-steps li {
    list-style-type:none;
    float:left;
    width:140px;
    text-align:center;
    margin:0 10px;
    padding:3px 0;
    font-size:1.2em; line-height:1.25;
    color:#666;
    background: #FFD324;
}

.web-checkout-steps li.current {
    color:#333;
    background:#FFE788;
}

.web-checkout-steps li.first {
    margin-left:80px;
}

.web-checkout-steps li.last {
    margin-right:0;
}

.web-checkout-steps li img {
    display:inline;
    float:none;
    margin:0; padding:0;
}
#mid-wrap .checkout-info-wrapper h3 {
    background-color:#A9BAE1;
    font-size:1.2em;
    margin-top:0.2em;
    padding:0.5em;
}
table.shipping-costs {
    width:100%;
    border-collapse:collapse;
}

table.shipping-costs th {
    text-align:center;
}

table.shipping-costs td {
    text-align:center;
    border-bottom:1px solid #ccc;
}
table.shipping-costs tr.current td {
    background-color:yellow;
}

ul.cards li {
    list-style-type:none;
    margin:0 0 9px 0;padding:0;
    width:90px;
    float:left;
    text-align:center;
}
p.cards {
    padding-top:5px;
}
p.cards img {
    margin-right:6px;
}
form div.pick-card label,
form div.pick-card select {
    font-size:1.3em;
}


/* -------------------------------------------------------------- 

  Account
  
-------------------------------------------------------------- */

div.account dt,
div.account dd {
    width:130px;
    float:left;
    margin:0;
}
div.account table.orders,
div.account table.basket {
    width:700px;
}
div.account table.orders td {
    border-bottom:1px solid #ccc;
}
div.account table.orders tr.cancelled td {
    color:#666;
    text-decoration:line-through;
}


/* -------------------------------------------------------------- 

  Sitemap
  
-------------------------------------------------------------- */
ul.sitemap,
ul.sitemap li {
    padding:0;
    list-style-type:none;
    margin-left:0;
}
ul.sitemap li.level-2 {
    padding-left:10px;
}
ul.sitemap li.level-3 {
    padding-left:20px;
}


/* -------------------------------------------------------------- 

  Promo table
  
-------------------------------------------------------------- */
p.promo {
    clear:both;
    margin-top:18px;
}
table.promo {
    border-collapse:collapse;
}
table.promo th.caption {
    padding:9px; margin:0;
    font-size:1.1em;
    font-weight:bold;
    text-align:center;
    background-color:#ccc;
    border:1px solid silver;
}
table.promo thead th {
    text-align:center;
    width:30%;
    background-color:#eee;
    color:#222;
}
table.promo td, 
table.promo th {
    border:1px solid silver;
}
table.promo tfoot td {
    font-size:1.5em;
    font-weight:bold;
    font-style:normal;
}
table.promo tbody th {
    font-weight:normal;
}