/*
Kotitehdas.fi 
XHTML / CSS Author: Harri Kilpiö, Ego Beta Ltd.
Visual Design Copyright 2008 Ego Beta Ltd.

If you have ideas/suggestions for improvement please send us email:
harri.kilpio@egobeta.fi
*/

/* =instruction ol li */
#instructions {background: url("/assets/img/bg_scrapbook_instruction.gif") left top no-repeat;}
#instructions a { font-weight: bold; color: #45A4B9; font-size: 12px;}

/* =header */
.header h1 { font-size: 20px; text-transform: uppercase; letter-spacing: 0; font-weight: bold; padding-left: 10px;}
.header h1 .count { font-weight: normal; font-size: 16px; text-transform: none;}

/* =nav_scrapbook */
#nav_scrapbook { display: block; border-bottom: 4px solid rgb(215, 204, 169); margin-bottom: 0.5em;}
#nav_scrapbook:after { content : "."; display : block; height : 0; clear : both; visibility : hidden; }
#nav_scrapbook li { display: block; float: left; padding: 0.5em 1em 0.25em 1em; border: 1px solid rgb(215, 204, 169); border-bottom: none; margin-right: 1px;}
#nav_scrapbook li.active { background: rgb(215, 204, 169); }

/* =items_category ol */
body.scrapbooks .items_category {min-height:160px;}
body.scrapbooks .items_category ol {list-style:none;width:920px;margin-right:20px;}
body.scrapbooks .items_category ol li {float:left;width:293px; min-height:164px; margin-right:16px;}
body.scrapbooks .items_category ol li.last {margin-right:0;}

/* =body.scrapbooks items_category dl*/
body.scrapbooks .items_category dl {position:relative;width:100%;margin-right:0;padding-top: 155px; color: #5B5647; margin-bottom: 0; padding-bottom: 10px;}
body.scrapbooks .items_category li.last dl {margin-right:0;}
body.scrapbooks .items_category dt { display: none; }
body.scrapbooks .items_category dd.scrapbook-name { position: static; display: block; float: left; padding: 0; font-weight: bold; font-size: 12px; padding-right: 5px; margin-left: 10px;}
body.scrapbooks .items_category dd.scrapbook-author { position: static; display: block; float: left; padding: 0; font-size: 12px; border-left: 1px solid #5B5647; padding-left: 5px;}
body.scrapbooks .items_category a { color: #5B5647; }
body.scrapbooks .pagination { clear: left;}

/* =scrapbook*/
#content-main div.flash-replaced {width:920px;height:805px;}

/* =sb-items */
.sb-items { display: block; padding: 0; }
.sb-items:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* =sb-items li */
.sb-items li { display: block; float: left; margin: 10px; }

/* =sb-items li.note */
.sb-items li.note { background: url('/assets/img/scrapbook/note_top.png') no-repeat; width: 200px; padding: 0;}
.sb-items li.note div { background: url('/assets/img/scrapbook/note_bottom.png') no-repeat left bottom; margin: 34px 0 0 0; padding: 0 0 50px 0;}
.sb-items li.note p { display: block; background: #f5f5f2; padding: 0 15px; margin: 0;}

/* =sb-items li.image */
.sb-items li.image { background: #fff; width: 151px;}
.sb-items li.image img { display: block; margin: 8px;}
.sb-items li.image p { background: #fff; margin: 8px; text-align: center;}

/* =sb-items li.scrap */
.sb-items li.scrap { background: url('/assets/img/scrapbook/scrap_top.png') repeat-x;}
.sb-items li.scrap div { background: url('/assets/img/scrapbook/scrap_bottom.png') repeat-x left bottom; margin-top: 30px;}
.sb-items li.scrap img { border: 5px solid #fff; margin: -10px 10px 0 10px; display: block;}
.sb-items li.scrap p { margin: 10px 10px 0px 10px; padding: 0 0 15px 0;}

/* =sb-items li.palette */
.sb-items li.palette { background: url('/assets/img/scrapbook/palette_top.png') no-repeat top left; padding: 44px 0 35px 0; display: block; width: 130px; -webkit-border-radius: 1.5em; -moz-border-radius: 1.5em; -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.5); }
.sb-items li.palette div:first-child { height: 90px;}
.sb-items li.palette div { display: block; width: 130px; height: 35px; margin: 0; float: none; }

/* =sb-items li.link */
.sb-items li.link { background: url('/assets/img/scrapbook/link.png') repeat-x top left;}
.sb-items li.link p { line-height: 51px; padding: 0; margin: 0 15px; }

.sb-items .empty { height: 500px; text-indent: -9000em;}

/* =notification */
.notification { border: 3px dotted rgb(215, 204, 169); padding: 200px 1em; margin: 0 2em 1em 0; text-align: center;}

/* =notification */
.color-disclaimer {font-size: 10px; margin-top: 2px; margin-bottom: 20px; padding-left: 20px; padding-right: 20px;}
/* ---------------- */

/* Scrapbook instructions */

/* Clears floats (http://www.quirksmode.org/css/clearing.html) */
.float-container {
    overflow: auto; /* Do the magic */
    width: 100%; /* Fix IE6 */
    height: 100%; /* Fix Opera */
    }

/* Clear any conflicting styles */
#scrapbook-instructions h2 {
    padding-left: 0px;
    }

/* Common styles */
#scrapbook-instructions  {
    padding: 20px 20px 15px 20px;
    }
#scrapbook-instructions h1 {
    font-size: 42px;
    line-height: 1;
    margin-bottom: 20px;
    }
#scrapbook-instructions p a {
    color: #5b5647;
    border-bottom: 1px dotted #5b5647;
    }
/*
.box-tl {
    background: #d7cca9 url('/assets/img/box_corner_tl.png') no-repeat;
    }
.box-tr {
    background: url('/assets/img/box_corner_tr.png') no-repeat top right;
    }
.box-bl {
    background: url('/assets/img/box_corner_bl.png') no-repeat bottom left;
    }
.box-br {
    background: url('/assets/img/box_corner_br.png') no-repeat bottom right;
    }
*/
    
/* Page elements  */

/* Introduction part */
#scrapbook-instructions .introduction {
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    width: 600px;
    }
#scrapbook-instructions .introduction ul {
    list-style-type: none;
    }
#scrapbook-instructions .introduction ul li {
    background: url('/assets/img/bullet_blue_arrow.png') no-repeat 0px 7px;
    padding-left: 18px;
    font-family: Georgia, serif;
    font-size: 18px;
    margin-bottom: 10px;
    }
    
/* Benefits part */
#scrapbook-instructions .benefits {
    float: right;
    width: 275px;
    padding-top: 2px;
    padding-right: 10px;
    }
#scrapbook-instructions .benefits h2 {
    font-size: 14px;
    font-weight: bold;
    color: #5b5647;
    margin-bottom: 10px;
    }
#scrapbook-instructions .benefits p {
    font-size: 12px;
    }
    
/* Instructions part */
#scrapbook-instructions .instructions {
    clear: both;
    }
#scrapbook-instructions .instructions h2 {
    margin-left: 10px;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
    }
#scrapbook-instructions .instructions h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 7px;
    }
#scrapbook-instructions .chapter {
    padding: 25px 20px 15px 60px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }
#scrapbook-instructions #chapter-1, #scrapbook-instructions #chapter-2, #scrapbook-instructions #chapter-3 {
    float: left;
    width: 213px;
    height: 206px;
    margin-bottom: 20px;
    }
#scrapbook-instructions #chapter-2, #scrapbook-instructions #chapter-3 {
    margin-left: 20px;
    }
#scrapbook-instructions #chapter-4 {
    clear: both;
    margin-bottom: 20px;
    }
#scrapbook-instructions #chapter-5 {
    }
#scrapbook-instructions #chapter-1 {
    background: #d7cca9 url('/assets/img/chapter-1.png') no-repeat 18px 27px;
    }
#scrapbook-instructions #chapter-2 {
    background: #d7cca9 url('/assets/img/chapter-2.png') no-repeat 18px 27px;
    }
#scrapbook-instructions #chapter-3 {
    background: #d7cca9 url('/assets/img/chapter-3.png') no-repeat 18px 27px;
    }
#scrapbook-instructions #chapter-4 {
    background: #d7cca9 url('/assets/img/chapter-4.png') no-repeat 18px 27px;
    }
#scrapbook-instructions #chapter-5 {
    background: #d7cca9 url('/assets/img/chapter-5.png') no-repeat 18px 27px;
    }
#scrapbook-instructions #chapter-1 .screenshot {
    }
#scrapbook-instructions #chapter-2 .screenshot {
    padding-top: 15px;
    }
#scrapbook-instructions #chapter-3 .screenshot {
    padding-top: 30px;
    }
#scrapbook-instructions #chapter-4 .float-container {
    margin-left: -10px;
    width: 850px;
    }
#scrapbook-instructions #chapter-5 .col-1 {
    float: left;
    width: 520px;
    }
#scrapbook-instructions #chapter-5 .screenshot {
    float: right;
    }
    
/* Instruction browser */
#scrapbook-instructions .instruction-browser {
    margin-top: 30px;
    }
#scrapbook-instructions .expanding-list {
    float: left;
    width: 265px;
    border-top: 1px dotted #aca387;
    list-style-type: none;
    }
#scrapbook-instructions .expanding-list li {
    border-bottom: 1px dotted #aca387;
    margin: 0px;
    padding: 0px;
    }
#scrapbook-instructions .expanding-list .expanded, #scrapbook-instructions .expanding-list li:hover {
    background-color: #e4dec2;
    }
#scrapbook-instructions .expanding-list h4 {
    margin: 0px;
    }
#scrapbook-instructions .expanding-list h4 a, #scrapbook-instructions .expanding-list h4 a:hover, #scrapbook-instructions .expanding-list h4 a:visited {
    display: block;
    padding: 6px 10px 6px 35px;
    color: #333333;
    font-size: 12px;
    font-weight: bold;
    color: #333333;
    cursor: pointer;
    }
#scrapbook-instructions .expanding-list .item-content {
    padding: 10px 10px 6px 35px;
    }
#scrapbook-instructions .expanding-list .a h4 a {
    background: url('/assets/img/a_blue.gif') no-repeat 10px 5px;
    }
#scrapbook-instructions .expanding-list .a.expanded h4 a {
    background: url('/assets/img/a_gray.gif') no-repeat 10px 5px;
    }
#scrapbook-instructions .expanding-list .b h4 a {
    background: url('/assets/img/b_blue.gif') no-repeat 10px 5px;
    }
#scrapbook-instructions .expanding-list .b.expanded h4 a {
    background: url('/assets/img/b_gray.gif') no-repeat 10px 5px;
    }
#scrapbook-instructions .expanding-list .c h4 a {
    background: url('/assets/img/c_blue.gif') no-repeat 10px 5px;
    }
#scrapbook-instructions .expanding-list .c.expanded h4 a {
    background: url('/assets/img/c_gray.gif') no-repeat 10px 5px;
    }
#scrapbook-instructions .expanding-list .d h4 a {
    background: url('/assets/img/d_blue.gif') no-repeat 10px 5px;
    }
#scrapbook-instructions .expanding-list .d.expanded h4 a {
    background: url('/assets/img/d_gray.gif') no-repeat 10px 5px;
    }
#scrapbook-instructions .expanding-list .e h4 a {
    background: url('/assets/img/e_blue.gif') no-repeat 10px 5px;
    }
#scrapbook-instructions .expanding-list .e.expanded h4 a {
    background: url('/assets/img/e_gray.gif') no-repeat 10px 5px;
    }
#scrapbook-instructions .expanding-list .f h4 a {
    background: url('/assets/img/f_blue.gif') no-repeat 10px 5px;
    }
#scrapbook-instructions .expanding-list .f.expanded h4 a {
    background: url('/assets/img/f_gray.gif') no-repeat 10px 5px;
    }
#scrapbook-instructions .expanding-list .g h4 a {
    background: url('/assets/img/g_blue.gif') no-repeat 10px 5px;
    }
#scrapbook-instructions .expanding-list .g.expanded h4 a {
    background: url('/assets/img/g_gray.gif') no-repeat 10px 5px;
    }
#scrapbook-instructions .expanding-list .h h4 a {
    background: url('/assets/img/h_blue.gif') no-repeat 10px 5px;
    }
#scrapbook-instructions .expanding-list .h.expanded h4 a {
    background: url('/assets/img/h_gray.gif') no-repeat 10px 5px;
    }
#scrapbook-instructions .expanding-list .i h4 a {
    background: url('/assets/img/i_blue.gif') no-repeat 10px 5px;
    }
#scrapbook-instructions .expanding-list .i.expanded h4 a {
    background: url('/assets/img/i_gray.gif') no-repeat 10px 5px;
    }
#scrapbook-instructions .picture-map {
    float: right;
    position: relative;
    }
#scrapbook-instructions .picture-map {
    float: right;
    position: relative;
    background: url('/assets/img/bg_scrapbook_help.jpg') no-repeat;
    width: 563px;
    height: 555px;
    }
#scrapbook-instructions .picture-map .expanded .placeholder {
    display: none;
    }
#scrapbook-instructions .picture-map .item {
    position: absolute;
    cursor: pointer;
    }
#scrapbook-instructions .picture-map .expanded {
    z-index: 5;
    }
#scrapbook-instructions .picture-map .a {
    left: 24px;
    top: 39px;
    }
#scrapbook-instructions .picture-map .b {
    left: 224px;
    top: 275px;
    }
#scrapbook-instructions .picture-map .c {
    left: 12px;
    top: 498px;
    }
#scrapbook-instructions .picture-map .d {
    left: 208px;
    top: 4px;
    }
#scrapbook-instructions .picture-map .e {
    left: 1px;
    top: 1px;
    }
#scrapbook-instructions .picture-map .f {
    left: 99px;
    top: 25px;
    }
#scrapbook-instructions .picture-map .g {
    left: 6px;
    top: 109px;
    }
#scrapbook-instructions .picture-map .h {
    left: 164px;
    top: 109px;
    }
#scrapbook-instructions .picture-map .i {
    left: 278px;
    top: 108px;
    }
#scrapbook-instructions .picture-map .a .placeholder {
    width: 99px;
    height: 73px;
    }
#scrapbook-instructions .picture-map .b .placeholder {
    width: 326px;
    height: 129px;
    }
#scrapbook-instructions .picture-map .c .placeholder {
    width: 168px;
    height: 48px;
    }
#scrapbook-instructions .picture-map .d .placeholder {
    width: 87px;
    height: 28px;
    }
#scrapbook-instructions .picture-map .e .placeholder {
    width: 135px;
    height: 33px;
    }
#scrapbook-instructions .picture-map .f .placeholder {
    width: 80px;
    height: 27px;
    }
#scrapbook-instructions .picture-map .g .placeholder {
    width: 162px;
    height: 141px;
    }
#scrapbook-instructions .picture-map .h .placeholder {
    width: 119px;
    height: 179px;
    }
#scrapbook-instructions .picture-map .i .placeholder {
    width: 159px;
    height: 178px;
    }
#scrapbook-instructions .instruction-browser .item-content {
    display: none;
    }
#scrapbook-instructions .instruction-browser .expanded .item-content {
    display: block;
    }

#scrapbook-help { display: block; position: absolute; top: 88px; right: 28px;}