/**
 * Global Styles
 **/

a {
    color: #666;
    text-decoration: none;
}

a img {
    border: none;
}

a:hover {
    color: #BBB;
}

a:visited { 
    text-decoration: none;
    border: 0;
}

:focus {
    outline: none;
}

.clear { 
    clear: both; 
}

/*
 * Rounded Corners
 */

.corners { 
    position: relative; 
}

.corners .corner { 
    position: absolute; 
    width: 7px; 
    height: 7px;
    z-index: 2;
    /* For IE < 8. If not set, the divs change height at large font sizes for some reason. */
    font-size: 0%; 
}

.corners .white_on_grey {
    background: url("/images/ui/corner_7x7_white_on_grey.png") no-repeat;
}

.corners .blue_on_grey {
    background: url("/images/ui/corner_7x7_blue_on_grey.png") no-repeat;
}

.corners .inner {
    position: relative;
}

.corners .tl { top: 0; left: 0; background-position: 0 0; }
.corners .tr { top: 0; right: 0; background-position: -7px 0; }
.corners .bl { bottom: 0; left: 0; background-position: 0 -7px; }
.corners .br { bottom: 0; right: 0; background-position: -7px -7px; }

/*
 * Gallery Navigation Arrows
 */
 
.nav_arrow {
    display: block;
    height: 0;
    overflow: hidden;
}

.nav_arrow_left, .nav_arrow_right {
    width: 8px;
    padding-top: 15px;
    background: url("/images/ui/horizontal_nav_arrows_sprite.png") 
        0 0 no-repeat;
}

.nav_arrow_up, .nav_arrow_down {
    width: 15px;
    padding-top: 8px;
    background: url("/images/ui/vertical_nav_arrows_sprite.png") 
        0 0 no-repeat;
}

.nav_arrow_left { background-position: 0px 0px; }
.nav_arrow_left:hover { background-position: 0px -15px; }
.nav_arrow_right { background-position: 0px -30px; }
.nav_arrow_right:hover { background-position: 0px -45px; }

.nav_arrow_down { background-position: 0px 0px; }
.nav_arrow_down:hover { background-position: 0px -8px; }
.nav_arrow_up { background-position: 0px -16px; }
.nav_arrow_up:hover { background-position: 0px -24px; }


/**
 * Main Layout
 */
 
body {
    padding: 0;
    margin: 0;
    font: normal 1em "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: white;
}
 
#header_band {
    position: relative;
    width: 100%;
    background: white;
    height: 138px;
    margin-top: 24px; 
}

#header_content, #menu_content, #content, #footer {
    width: 990px;
    margin: 0 auto;
    z-index: 1;
    position: relative;
    border: solid #808080;
    border-width: 0 2px; 
}

#header_content {
    background: #7BD3F7;
    border-top-width: 2px;
}

#logo_box {
    margin-left: 590px;
    height: 100%;
    background: white;
}

#logo_box #logo_link {
    position: relative;
    top: 15px;
    left: 15px;
}

#menu_band {
    width: 100%;
}

#menu_content {
    background-color: #E6E7E8;
}

#content_band {
    width: 100%;
    height: 100%;
    background: #BCBEC0;
}

#header_content, #menu_content {
    height: 100%;
}

#content {
    position: relative;
    background: #BCBEC0;
}

#footer {
    height: 9px;
    padding-top: 15px;
    margin-bottom: 100px;
    clear: both;
    background: #BCBEC0;
    border-bottom-width: 2px;
}

/* Bubble Corners */

.bubble_corners { position: relative; }

.bubble_corners .corner {
    position: absolute; 
    width: 9px;
    height: 9px;
    font-size: 0%; 
    background: url("/images/ui/corner_bubble.png") top left no-repeat;
    z-index: 2;
}

.bubble_corners .tl { top: -2px; left: -2px; background-position: 0 0; }
.bubble_corners .tr { top: -2px; right: -2px; background-position: -9px 0; }
.bubble_corners .bl { bottom: -2px; left: -2px; background-position: 0 -9px; }
.bubble_corners .br { bottom: -2px; right: -2px; background-position: -9px -9px; }


/*
 * Contact Details Box
 */
 
#header_contact_details {
    position: absolute;
    left: 30px;
    bottom: 10px;
    font: 0.8em/20px "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/*
 * Site Menu
 */

#site_menu {
    list-style-type: none;
    padding: 0;
    margin: 0 2em 0 0;
    text-align: right;
    font: normal 1em/2em "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #231F20;
}

#site_menu li {
    display: inline;
    margin: 0 2em 0 0;
}

#site_menu li a {
    color: #231F20;
    vertical-align: middle;
}

#site_menu li a:hover {
    color: #BBB;
    vertical-align: middle;
}

/*
 * Pane Styles
 */
 
.pane {
    position: relative;
    background: white;
    font: normal 0.8em/1.0em "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.pane .innner {
    position: relative;
}

/* The title box is redundant markup, but it seems to be necessary to support
   IE6, which ignores right: 0. The title box lets us use width: 100% with 
   no padding or margins, and do the padding on the h3. */

.pane .title_box {
    width: 100%;
    z-index: 1; /* Must be on top of the inner div. */
    margin: 0;
    padding: 0;
    vertical-align: middle;
    color: #231F20;
    background: #7BD3F7;
}

.pane .title_box h3 { 
    margin: 0;
    padding: 0 1em;
    display: inline;
    font: normal 16px/2em "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.pane .title_box h3 a {
    color: #231F20;
}

.pane .title_box_left { text-align: left; }
.pane .title_box_right { text-align: right; }

/*
 * Contact Details Boxes
 */
 
/* FIXME: This seems to break in firefox 2. */

.contact_details p {
    margin: 0 0 5px 0;
    padding: 0;
}

.contact_details .text {
    vertical-align: middle;
    color: black;
}

.contact_details .icon {
    vertical-align: middle;
    margin-right: 5px;
}

.contact_details .phone_number .icon {
    margin-left: 3px;
    margin-right: 9px;
}

/* 
 * User Content
 */

.user_content img {
    margin: 0 5px;
}

.user_content img.centred {
    display: block;
    margin: 0.8em auto;
}

.user_content img.left_aligned {
    float: left;
    margin: 0 5px 5px 0;
}

.user_content img.right_aligned {
    float: right;
    margin: 0 0 5px 5px;
}

.user_content img.left_aligned_nested {
    float: left;
    margin: 5px 5px 5px 0;
}

.user_content img.right_aligned_nested {
    float: right;
    margin: 5px 0 5px 5px;
}


/*
 * --- Home Page ---
 */
 
body.home #left_column {
    float: left;
    width: 338px;
    margin: 24px 0 0 24px;
}

body.home #right_column {
    float: left;
    width: 580px;
    margin: 24px 0 0 24px;
}

body.home #about {
    width: 100%;
    float: left;
}

body.home #sketchbook {
    margin-top: 24px;
    width: 100%;
    float: left;
}

body.home #collection {
    width: 100%;
    float: left;
}

body.home #portfolio {
    margin-top: 24px;
    width: 100%;
    float: left;
}

/*
 * About Me Pane
 */

body.home #about .image_box {
    position: relative;
    float: left;
    height: 100%;
    width: 144px;
}

body.home #about .image_box img {
    width: 124px;
    height: 150px;
    padding: 10px 10px 0 10px;
}


body.home #bio_text {
    padding: 10px 10px 0 10px;
}

body.home #bio_text p {
    margin: 0 0 10px 0;
    padding: 0;
}

 
/*
 * Sketchbook Pane
 */
 
body.home #sketchbook .inner {
    padding: 10px;
}
 
body.home #sketchbook .post {
    float: left;
    margin: 0 0 15px 0;
    width: 100%;
    width: 316px;
    position: relative;
}

body.home #sketchbook .post .thumbnail_box {
    width: 130px;
    float: left;
    margin: 0 10px 0 0;
}

body.home #sketchbook .post img {
    display: block;
    margin: 0 auto;
}

body.home #sketchbook .date_title {
    font-weight: normal;
    font-size: 1.1em;
    letter-spacing: 1px;
    margin: 0;
    padding: 0 0 10px 0;
}

body.home #sketchbook .date_title a {
    color: black;
}

body.home #sketchbook .date_title a:hover {
    color: #BBB;
}

body.home #sketchbook .date_title .date {
}

body.home #sketchbook .date_title .separator {
    font-weight: bold;
    margin: 0 0.3em;
}

body.home #sketchbook .date_title .title {
}

body.home #sketchbook .body {
    padding: 0;
    margin: 0;
}

/* P tags inside the post content. */
body.home #sketchbook .body p {
    margin: 0;
    padding: 0;
}


/* 
 * Thumbnail lists for the right column panes. 
 */
 
body.home .thumbnails {
    position: relative;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

body.home .thumbnails li.thumbnail {
    position: relative;
    float: left;
    padding: 0;
    margin: 23px 0 0 23px;
    width: 160px;
    height: 115px;
}

body.home .thumbnails .thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/*
 * Collection Pane
 */

body.home #collection .text { 
    clear: both;
    margin: 0 23px 0 23px;
    padding: 10px 0 13px 0;
}

/* This is for the P tags in the content generated by the editor. */
body.home #collection .text p {
    margin: 0 0 10px 0;
}

/*
 * Portfolio Pane
 */

body.home #portfolio .text {
    float: left;
    width: 164px;
    margin: 23px 0 13px 23px;
    padding: 0;
}

body.home #portfolio .text p {
    margin: 0 0 10px 0;
}

body.home #portfolio .thumbnail {
    margin-bottom: 23px;
}


/*
 * --- Product box (shared between collection and portfolio pages). ---
 */
 
#product_box {
    position: relative;
}
 
#product_box #products {
    list-style: none;
    padding: 0;
    margin: 0;
}
 
#product_box .product {
    display: none;
}

#product_box .active_product {
    display: block;
}

#product_box .product .display_name {
    font: bold 1.05em "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
}

#product_box .product .description {
    /*font: normal 1em "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;*/ 
    text-align: center;
    margin: 0;
    /* padding-bottom: 21px; to avoid buy button*/
}

#product_box .product .description p {
    padding: 0;
    margin: 0.7em 0 0.7em 0;
}

/* FIXME: This could overlap the text. There just doesn't seem to be a 
   non-horrible way to wrap text around a bottom right float in CSS. */
#product_box .product .buy_link {
    display: block;
    position: absolute;
    right: -12px;
    bottom: -12px;
    width: 54px;
    height: 0;
    padding-top: 21px;
    overflow: hidden;
    background: url("/images/ui/buy_button.png") no-repeat;
}

/*
 * -- Product Image Box --
 */

#product_box .product_image_box {
    position: relative;
    width: 498px;
    height: 310px;
    margin: 0 0 10px 0;
}

#product_box .product_image {
    display: block;
    width: 100%;
    height: 100%;
}

#product_box .product_image_box .image_buttons {
    position: absolute;
    top: -15px;
    left: 50%;
    float: left;
    margin: 0;
    padding: 0;
}

#product_box .product_image_box .image_button {
    position: relative;
    display: block;
    float: left;
    right: 50%;
    margin: 0 2px;
}

#product_box .product_image_box .image_button a {
    display: block;
    width: 10px;
    height: 0;
    padding-top: 10px;
    overflow: hidden;
    background: url("/images/ui/image_link_circles_sprite.png") 0px 0px 
        no-repeat;
}

#product_box .product_image_box .active_image_button a {
    background-position: 0px -10px;
}

/*
 * --- Collection Page ---
 */

body.collection #gallery_pane {
    float: left;
    margin: 24px 0 0 24px;
    width: 372px;
}

body.collection #product_pane {
    float: left;
    margin: 24px 0 0 24px;
    width: 546px;
}

body.collection #product_box {
    min-height: 456px;
    margin: 24px;
    position: relative;
}

/*
 * -- Gallery --
 */

body.collection #gallery {
    position: relative;
}

body.collection #gallery_scroll_box {
    overflow: hidden;
    position: relative;
    margin: 24px 24px 0 24px;
    width: 324px;
    height: 480px;
    padding: 0;
    
}

body.collection #gallery_items {
    list-style: none;
    position: relative;
    padding: 0;
    margin: 0;
    width: 99999px;
} 

body.collection #gallery_items .gallery_item {
    position: absolute;
    width: 150px;
    height: 160px;
}

body.collection #gallery_items .gallery_item .display_name {
    display: block;
    width: 100%;
    height: 36px;
    vertical-align: top;
    padding-top: 4px;
    font: normal 1em "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: black;
}

body.collection #gallery_items .gallery_item .thumbnail {
    margin: 0;
    padding: 0;
    display: block;
}

 /*
 * Gallery Navigation Arrow Positioning
 */
 
body.collection #gallery .nav_arrow {
    position: absolute;
    top: 216px;
    margin-top: -8px;
}

body.collection #gallery .nav_arrow_left {
    left: 8px;
}

body.collection #gallery .nav_arrow_right {
    right: 8px;
}

/*
 * --- Portfolio Page ----
 */
 
body.portfolio #portfolio_pane {
    width: 670px;
    float: left;
    margin: 24px 0 0 24px;
}

body.portfolio #press_pane {
    width: 248px;
    float: left;
    margin: 24px 0 0 24px;
}

/*
 * -- Portfolio Pane ---
 */
 
body.portfolio #gallery {
    position: relative;
    float: left;
    height: 464px;
    margin: 24px 24px 24px 24px;
}
 
body.portfolio #product_box {
    float: left;
    width: 498px;
    margin: 24px 0 24px 0;
}

/*
 * - Gallery -
 */

body.portfolio #gallery_scroll_box {
    overflow: hidden;
    position: relative;
    width: 100px;
    height: 100%;
    padding: 0;
    
}

body.portfolio #gallery_items {
    list-style: none;
    position: relative;
    padding: 0;
    margin: 0;
    height: 666666in;
} 

body.portfolio #gallery_items .gallery_item {
    position: static;
    width: 100px;
    height: 116px;
}

body.portfolio #gallery_items .gallery_item .display_name {
    display: block;
    width: 100%;
    height: 36px;
    vertical-align: top;
    padding-top: 4px;
    font: normal 1em "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: black;
}

body.portfolio #gallery_items .gallery_item .thumbnail {
    margin: 0;
    padding: 0;
    display: block;
}

/*
 * Navigation Arrow Positioning
 */

body.portfolio #gallery .nav_arrow {
    position: absolute;
    left: 50px;
    margin-left: -8px;
}

body.portfolio #gallery .nav_arrow_up {
    top: -15px;
}

body.portfolio #gallery .nav_arrow_down {
    bottom: -15px;
}

/*
 * -- Press Pane ---
 */
 
body.portfolio #press_content {
    margin: 24px;
}

body.portfolio #press_content .contact_details {
    font: 0.9em/20px "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    /* Let the text impinge upon the press box's right margin to stop the email
       address being wrapped. */
    width: 224px;
}

/*
 * --- Blog Page ---
 */
 
body.blog #sketchbook_pane {
    float: left;
    margin: 24px 0 0 24px;
    width: 400px;
}

body.blog #sketchbook_pane .inner,
body.blog #entry_pane .inner {
    margin: 24px;
}

body.blog #entry_pane {
    float: left;
    margin: 24px 0 0 24px;
    width: 518px;
}

/*
 * -- Sketchbook Pane --
 */

body.blog #post_preview_list {
    list-style: none;
    margin: 0 0 1.5em 0;
    padding: 0;
    position: relative;
}

body.blog #post_preview_list .post {
    margin: 1em 0;
    position: relative;
}

body.blog #post_preview_list .post .thumbnail_box {
    width: 100px;
    float: left;
}

body.blog #post_preview_list .post .thumbnail_box img {
    display: block;
    margin: 0 auto;
}

body.blog #post_preview_list .post .date_title {
    font-weight: normal;
    font-size: 1.1em;
    letter-spacing: 1px;
    margin: 0 0 15px 0;
    padding: 0;
}

body.blog #post_preview_list .post .date_title a {
    color: black;
}

body.blog #post_preview_list .post .date_title a:hover {
    color: #BBB;
}

body.blog #post_preview_list .post .date_title .separator {
    font-weight: bold;
    margin: 0 0.3em;
}

body.blog #post_preview_list .post .body {
    float: left;
    width: 244px;
    padding: 0;
    margin: 0;
    padding-left: 8px;
}

/* P tags inside the post content. */
body.blog #post_preview_list .post .body p {
    margin: 0;
}

/*
 * Navigation Links
 */
 
body.blog .nav_link {
    font: 1.2em "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    display: block;
    margin: 0 32px 0 32px;
}

body.blog #prev_page_link {
    float: left;
}

body.blog #next_page_link {
    float: right;
}

/*
 * -- Entry Pane --
 */

body.blog #full_post .title {
    font: bold 1.2em "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    margin: 0 0 0.1em 0;
}

body.blog #full_post .date {
    font: 0.9em "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    display: block;
    margin: 0.1em 0 1em 0;
}

body.blog #full_post .body img {
    display: block;
    margin: 1em auto;
}

body.blog #full_post .body {
}

/*
 * --- About Page ---
 */
 
body.about .pane {
    float: left;
    margin: 24px 0 0 24px;
    width: 298px;
}

body.about .pane .inner {
    margin: 24px;
}