/* Global defaults/reset. */

a {
    color: #826b00;
    text-decoration: none;
}

a:hover {
    border-bottom: #A4893F;
    border-width: 0 0 1px 0;
    border-style: none none dotted none;
}


a:visited { 
    text-decoration: none;
}

:focus {
    outline: none;
}

.clear_both { clear: both; }
.clear_left { clear: left; }
.clear_right { clear: right; }

#content, body.sub {
    font: 0.85em/1.6em "Georgia", "Times", serif;
}

h1 {
    font-size: 2.3em;
    font-weight: normal;
}

h3 { 
    font-size: 1em;
    margin: 0.6em 0;
}

/*
 * Main layout.
 */

body.main {
    background: #FFF9D3;
    margin: 0;
    padding: 0;
}

#container {
    position: relative;
    width: 854px;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}

#top, #middle, #bottom {
    position: relative;
    width: 854px;
}

#top {
    height: 237px;
    background: url("/images/ui/background_top.jpg") center bottom no-repeat;
    margin: 0 2px;
    width: 850px;
}

#middle {
    background: url("/images/ui/background_middle.jpg") center top repeat-y;
    float: left;
}

#bottom {
    height: 94px;
    background: url("/images/ui/background_bottom.jpg") center top no-repeat;
    clear: both;
}

#content {
    margin: 25px 27px;
    position: relative;
}

#logo_link {
    position: absolute;
    display: block;
    left: 105px;
    top: 20px;
    width: 333px;
    padding-top: 115px;
    height: 0;
    overflow: hidden;
    background: url("/images/ui/toolbar_sprite.png") -60px 0px no-repeat; /* For IE. */
    border: none;
}

/* The toolbar. */

#toolbar {
    position: absolute;
    left: 50px;
    top: 173px;
    padding: 0;
    margin: 0;
}

#toolbar li {
    display: inline;
    float: left;
    margin-left: 38px;
    list-style: none;
}

#toolbar li a {
    width: 50px;
    padding-top: 60px;
    height: 0;
    overflow: hidden;
    display: block;
    
    background-image: url("/images/ui/toolbar_sprite.png");
    background-repeat: no-repeat;
    text-decoration: none;
    border: none;
}

#toolbar #toolbar_home a { background-position: 0px 0px; }
#toolbar #toolbar_blog a { background-position: 0px -60px; }
#toolbar #toolbar_email a { background-position: 0px -120px; }
#toolbar #toolbar_feed a { background-position: 0px -180px; width: 33px; padding-top: 33px; }
#toolbar #toolbar_home { margin-left: 0; }
#toolbar #toolbar_feed { margin: 16px 0 0 36px; }

/* The tabs. */

#tabs {
    position: absolute;
    left: 415px;
    top: 191px;
    margin: 0;
    padding: 14px 0 0 0;
    list-style: none;
}

#tabs li {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
}

#tabs li a {
    font: 12pt "Georgia", "Times", serif;
    font-weight: bold;
    color: black;
    border: none;
}

#tabs #bears_tab { margin-left: 0; width: 77px; }
#tabs #dog_coats_tab { margin-left: 13px; width: 117px; }
#tabs #slippers_tab { margin-left: 13px; width: 81px; }
#tabs #accessories_tab { margin-left: 14px; width: 112px; }

/* The view trolley thing at the top. */

div.trolley_top {
    position: absolute;
    left: 635px;
    top: 0;
    width: 120px;
    height: 75px;
}

div.trolley_top a.view_trolley {
    display: block;
    margin: 5px 0 4px 10px;
    width: 101px;
    padding-top: 45px;
    height: 0;
    overflow: hidden;
    border: none;
}

div.trolley_top p.num_items {
    margin: 4px 0 0 0px;
    font: 1.0em "Georgia", "Times", serif;
    text-align: center;
}

/* Breadcrumbs. */

ol.breadcrumbs {
    padding: 0;
    margin: 0 0 1em 0;
    height: 25px;
    font-size: 0.9em;
}

ol.breadcrumbs li.breadcrumb {
    display: inline;
    padding-left: 25px;
    background: url("/images/ui/breadcrumb_arrow.png") left center no-repeat;
    list-style: none;
}

ol.breadcrumbs li.first_breadcrumb {
    padding-left: 0;
    background: none;
}

/* Big quotes. */

blockquote.big {
    font: 1.5em "Garamond", "Georgia", serif;
    background: url("/images/ui/big_quote.png") left top no-repeat;
    padding: 14px 0 0 25px;
    min-height: 31px;
}

/* Page control. */

div.page_control {
    font-size: 1em;
    clear: both;
}

div.page_control ol.pages {
    display: inline;
    list-style: none;
    margin: 0 1em;
    padding: 0;
}

div.page_control ol.pages li {
    display: inline;
}

/* The home page. */

div.home img.portrait {
    float: right;
    margin: 0px 0 0 1em;
    right: 0;
    top: -10px;
}

div.home blockquote.intro {
    font-size: 2.0em;
    font-style: italic;
    margin: 0 0 0 1em;
}

div.home blockquote.intro a,
div.home blockquote.intro a:hover {
    color: black;
    border-color: black;
}

div.home p.text {
    font-size: 1.1em;
}

div.home ol.recent_posts {
    font-size: 1.0em;
    line-height: 1.4em;
    list-style: none;
    padding: 0 0 0 1em;
    margin: 0;
}

div.home ol.recent_posts span.summary {
    font-style: italic;
}

/* The blog. */

div.blog div.left {
    width: 550px;
}

div.blog div.right {
    /*position: absolute;*/
    float: right;
    top: 0;
    right: 0;
    width: 210px;
    padding: 15px;
    background: #F4F4F4;
    margin: 0;
}

div.blog div.left div.post {
    margin: 0 0 2em 0;
}

div.blog div.left div.post h2 {
    margin: 0.1em 0;
    font-size: 1.8em;
    padding-bottom: 0.1em;
    border-bottom: 1px dotted #BBB;
}

div.blog div.left div.post h2 a {
    border: none;
}

div.blog div.left div.post p.date,
div.blog div.left div.post p.written_by {
    font-size: 1.2em;
    margin: 0;
    font-family: "Garamond", "Georgia", serif;
}

div.blog div.left div.post p.date,
div.blog div.left div.post span.by_on {
    font-style: italic;
}

div.blog div.left div.post span.author, 
div.blog div.left div.post span.time {
    font-weight: normal;
}

div.blog div.left div.post p.written_by {
    margin-bottom: 1em;
}

div.blog div.left div.post img {
    padding: 4px;
    border: 1px solid #BBB;
}

div.blog div.right a {
    color: #666;
}

div.blog div.right h3 {
    font: 1.4em "Georgia", serif;
}

div.blog div.right ul.feed_links,
div.blog div.right ul.archive_links {
    list-style-type: none;
    padding: 0;
    margin-left: 0;
}

div.blog div.right div.subscribe_buttons {
    margin-top: 1em;
}

div.blog div.right div.subscribe_buttons img {
    display: block;
    margin: 1px 0 1px 0;
}

/* Category and product galleries. */

ul.gallery {
    list-style: none;
    padding: 0;
    margin: 15px 0 0 0;
}

ul.gallery li.item {
    position: relative;
    float: left;
    width: 240px;
    height: 240px;
    margin: 0 40px 40px 0;
}

ul.gallery li.rightmost {
    margin-right: 0;
}

ul.gallery li.item a {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 240px;
    height: 240px;
    color: black;
    border: none;
    cursor: pointer;
    background: url("/images/ui/gallery_frame.png") -1000px -1000px no-repeat;
    z-index: 1;
}

ul.gallery li.item div.frame {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("/images/ui/gallery_frame.png") left top no-repeat;
}

ul.gallery li.item img {
    display: block;
    padding: 21px 10px 0 10px;
    border: none;
}

ul.gallery li.item div.caption_box_outer {
    display: table;
    position: relative;
    overflow: hidden;
    height: 54px;
    width: 220px;
    left: 10px;
}

ul.gallery li.item div.caption_box_inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
}

ul.gallery li.item p.caption {
    margin: 0;
    font: italic 1.4em "Garamond", "Georgia", serif;
}

/* The product page. */

div.product_info {
    width: 495px;
}

div.product_info h2.name {
    font-size: 1.8em;
    font-weight: normal;
    margin-top: 0;
}

div.product_info p.description {
    color: #333;
}

div.product_info p.price {
    font: italic 1.5em "Garamond", "Georgia", serif;
}

div.product_info p.price span.amount {
    font-style: normal;
}

div.product_info ul.images {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0 0 0 -15px;
    width: 510px;
}

div.product_info ul.images li {
    display: inline; /* Fixes IE6's double float margin bug. */
    position: relative;
    float: left;
    width: 240px;
    height: 197px;
    margin: 0 0 15px 15px;
}

div.product_info ul.images li a {
    display: block;
    position: absolute;
    border: none;
    left: 0;
    top: 0;
    width: 240px;
    height: 197px;
    cursor: pointer;
    background: url("/images/ui/product_image_frame.png") -10000px -10000px no-repeat;
    z-index: 1;
}

div.product_info ul.images li img {
    border: none;
    display: block;
    position: relative;
    left: 10px;
    top: 23px;
}

div.product_info ul.images li div.frame {
    background: url("/images/ui/product_image_frame.png") left top no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    width: 240px;
    height: 197px;
}

div.order_box {
    float: right;
    width: 280px;
    overflow: visible;
}

div.order_box div.order_form,
div.order_box div.confirmation {
    margin: 0;
    float: right;
    width: 250px;
}

div.order_box ul.swatches,
div.order_box ul.sizes {
    list-style: none;
    padding: 0 0 0 1em;
    margin: 0.5em 0 0.5em 0;
}

div.order_box ul.swatches li {
    display: block;
    line-height: 2empx;
}

div.order_box ul.swatches img {
    vertical-align: middle;
}

div.order_box ul.swatches li input {
    margin: 0;
    padding: 0;
}

div.order_box ul.sizes li {
}

div.order_box a.dog_sizing_guide {
    margin-left: 1em;
}

div.order_box .walkthrough {
    font: 1.4em "Georgia", serif;
    margin: 0.8em 0 0.8em 0;
    
}

div.order_box blockquote.walkthrough {
    font-size: 1.7em;
    font-style: italic;
    font-weight: normal;
    margin: -19px 0 0.8em 0;
    min-height: 31px;
    position: relative; /* Fixes background clipping in IE6. */
}

div.order_box form.order {
    padding-left: 15px;
}

div.order_box form.order input.add_to_trolley {
    display: block;
    margin: 0.5em 0 0.1em 0;
}

div.order_box form.order div.add_to_trolley {
    padding-left: 1em;
    float: left;
    text-align: center;
}

/* The confirmation box on the order page. */

div.order_box  blockquote.thanks {
    margin: -19px 0 1em 0;
    font: italic 1.7em "Georgia", serif;
    position: relative; /* Stops IE6 clipping with negative margin. */
}


div.order_box div.confirmation h5 {
    font: 1.3em "Georgia", serif;
    margin: 1.0em 0 0.4em 0;
}

div.order_box div.confirmation a.change_items {
    display: block;
    background: url("/images/ui/trolley_change_items_button.png");
    width: 173px;
    padding-top: 50px;
    height: 0;
    overflow: hidden;
    border: none;
    position: relative;
    left: 50%;
    margin: 0.4em 0 0 -86px;
}

table.micro_trolley {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.9em;
    width: 100%;
}

table.micro_trolley td {
    padding: 0.4em 0;
    border-bottom: 1px solid #DDD;
}

table.micro_trolley td.quantity {
    width: 5ex;
    text-align: right;
}

table.micro_trolley td.quantity span.quantity {
    font-family: "Verdana", sans;
}

table.micro_trolley td.name {
    padding-left: 1ex;
    line-height: 1.2em;
    color: #333;
}

table.micro_trolley td.price,
table.micro_trolley td.total {
    text-align: right;
    padding-left: 1ex;
}

table.micro_trolley th.total {
    text-align: right;
    font-size: 1.3em;
    padding: 12px 1ex 0 0;
    font-weight: normal;
}

table.micro_trolley td.total {
    font-size: 1.3em;
    border: none;
    padding: 12px 0 0 0;

}

div.order_box div.confirmation form.checkout {
    text-align: center;
}

/* The trolley page. */

table.big_trolley {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.9em;
}

table.big_trolley th {
    padding: 0 0.5em 0.5em 0.5em;
    font: italic 1.6em "Georgia", serif;
}

table.big_trolley td {
    padding: 0.4em 1em;
    border-bottom: 1px solid #F0F0F0;
}

table.big_trolley .colour,
table.big_trolley .size {
    text-align: center;
}

table.big_trolley .name {
    padding-left: 0;
}

table.big_trolley th.price,
table.big_trolley td.total {
    padding-right: 0;
}

table.big_trolley td.price {
    padding-right: 4px; /* IE doesn't right-align italics flush, this is a hack to compensate. The little indent looks OK in other browsers. */
}

table td.remove {
    text-align: right;
    padding-left: 0;
}

table td.remove input {
    display: block;
}


table.big_trolley th.remove {
    width: 0;
}

table.big_trolley .name {
    text-align: left;
}

table.big_trolley td.name a {
    color: black;
    font-size: 1.1em;
    border-color: #BBB
}

table.big_trolley td.name {
    width: 100%;
}

table.big_trolley td.quantity {
    text-align: center;
}

table.big_trolley th.price,
table.big_trolley td.price,
table.big_trolley td.total {
    text-align: right;
}

table.big_trolley .price,
table.big_trolley .total {
    font: italic "Garamond", "Georgia", serif;
}

table.big_trolley th.total {
    text-align: right;
    padding: 20px 0 0 0;
    font-size: 1.8em;
}

table.big_trolley td.total {
    text-align: right;
    padding: 20px 0 0 0;
    border: none;
    font-size: 1.3em;
}

table.big_trolley select.colour,
table.big_trolley select.size {
    width: 100px;
}

table.big_trolley td.update {
    padding-bottom: 0;
    border: none;
    padding: 20px 0 0 0; 
}

table.big_trolley blockquote.update {
    font-size: 1.4em;
}

div.trolley form.checkout {
    margin-top: 0.5em;
    float: right;
}

/* The dog coat sizing box. */

/* Hack to make the close box not overlap the scrollbar. */
body.product #fancy_frame {
    margin: 15px;
    width: 95%;
    height: 93%;
}

body.dog_coat_sizing {
    padding: 0;
    margin: 0;
    position: relative;
}

body.dog_coat_sizing h2.title {
    position: relative;
    margin: 0;
    padding: 0;
    width: 560px;
    padding-top: 77px;
    height: 0;
    overflow: hidden;
    background: url("/images/ui/how_to_choose_a_dog_coat_size.png") left top no-repeat;
}

table.dog_coat_sizing {
    width: 95%;
    border-collapse: collapse;
    border-top: 1px dotted #826b00;
    border-bottom: 1px dotted #826b00;
}

table.dog_coat_sizing th {
    font-weight: normal;
    font-size: 0.9em;
    font-weight: bold;
}

table.dog_coat_sizing th.top {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 25%;
}

table.dog_coat_sizing th.left {
    padding-right: 20px;
    text-align: right;
    width: 0;
    padding-left: none;
}

table.dog_coat_sizing tr.bottom td,
table.dog_coat_sizing tr.bottom th {
    padding-bottom: 15px;
}

table.dog_coat_sizing td {
    background: white;
    font-size: 0.8em;
    padding: 10px 10px;
    text-align: center;
}

table.dog_coat_sizing tr.odd td, 
table.dog_coat_sizing tr.odd th {
    background: #fffae0;
}

body.dog_coat_sizing ul.take_measurements {
    list-style: none;
    margin: 10px 0 0 0;
    padding-left: 15px;
}

body.dog_coat_sizing ul.take_measurements li {
    padding-left: 30px;
    background: url("/images/ui/breadcrumb_arrow.png") left center no-repeat;
    list-style: none;
}