﻿/*
    purple: 660099
*/

body 
{
    background: #dedede url(/images/back.png) left top repeat-x;
    margin: 0;
    padding: 0;
    color: #333;
}

hr 
{
    display: none;
}
div.hr
{
    border-top: solid 1px #ddd;
    margin: 20px 0 0 0;
    padding: 6px 0 0 0;
}

div.page-outer
{
    width: 994px;
    padding: 0;
    margin: 0 auto;
}
div.page-inner
{
    width: 980px;
    margin: 0 auto;
    padding: 0;
}

/* HEADER */
div.header
{
    overflow: hidden; /* For Firefox */
}
div.header div.logo
{
    float: left;
    margin: 0;
    padding: 11px 0 0 19px;
}
div.header div.logo a
{
    display: block;
    background: url(/images/header_kinderroom-logo.gif);
    width: 203px;
    height: 41px;
    text-indent: -5000px;
}
div.header div.customer-and-search
{
    margin: 30px 0 0 0;
    float: right;
}
div.header div.customer
{
    float: left;
    padding: 3px 20px 0 0;
    color: #666;
    font-weight: bold;
    font-size: 0.9em;
    text-transform: lowercase;
}
    div.header div.customer a
    {
        margin-left: 5px;
        border-left: solid 1px #999;
        padding-left: 10px;
        color: #666;
        text-decoration: none;
    }
    div.header div.customer a:hover
    {
        color: #333;
    }

div.header div.search
{
    margin: 0;
    float: left;
}
    div.header div.search_bl, div.header div.search_tl, div.header div.search_br, div.header div.search_tr
    {
        background-image: url(/images/search-box.png) !important;
        background-image: url(/images/search-box.gif);
        background-repeat: no-repeat;
    }
    div.header div.search_bl
    {
        background-position: left bottom;
        float: left;
        min-height: 1.7em;
    }
    div.header div.search_tl
    {
        background-position: left top;
        min-height: 17px;
        padding: 0;
    }
        div.header div.search input.textbox
        {
            border: none;
            background: none;
            padding: 0.2em 4px 0 6px !important;
            padding: 0.2em 4px 0.3em 6px; /* IE6 */
            margin: 0;
            font-size: 0.9em;
            width: 11em;
            color: #999;
        }
    div.header div.search_br
    {
        background-position: right bottom;
        float: left;
        min-height: 1.7em;
    }
    div.header div.search_tr
    {
        background-position: right top;
        min-height: 21px;
        padding: 0;
    }
        div.header div.search input.button
        {
            border: none;
            background: none;
            padding: 0.2em 12px 0 8px !important;
            padding: 0.2em 12px 0.4em 8px; /* IE6 */
            margin: 0;
            color: #fff;
            font-size: 0.8em;
            font-weight: bold;
            text-transform: uppercase;
            cursor: pointer;
        }

div.header h1
{
    margin: 0;
    padding: 4px 0 0 19px;
    font-size: 0.8em;
    color: #666;
}

/* MAIN */

div.main
{
    background: #fff;
    margin: 12px 0 0 0;
    padding: 0 0 10px 0;
}

/* NAV */

div.nav
{
    margin: 0;
    padding: 0;
    overflow: auto; /* For IE6+7 */
}

ul.nav-parent
{
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1em;
    font-weight: bold;
    display: block;
    float: left;
    width: 100%;
}

ul.nav-parent li
{
    margin: 0;
    padding: 0;
    float: left;
    background: transparent;
    /* height: 100%; */
    width: 124px;
}

ul.nav-parent li a
{
    display: block;
    margin-right: 2px;
    padding: 0.5em 0 0.6em 0;
    text-align: center;
    color: #666;
    text-decoration: none;
    background: #fff; /* Default */
}

ul.nav-parent span.word1
{
    font-weight: bold;
    text-transform: lowercase;
}
ul.nav-parent span.space
{
    font-size: 0;
}
ul.nav-parent span.word2
{
    font-weight: bold;
    text-transform: lowercase;
}

ul.nav-parent li.giftlists
{
    width: auto;
    padding: 0.8em 10px 0 0;
    float: right;
    font-size: 0.8em;
}
    ul.nav-parent li.giftlists a
    {
        background: url(/images/icon-giftlist.png) left top no-repeat;
        padding: 0 0 0 18px;
        color: #999;
        text-transform: lowercase;
    }
    ul.nav-parent li.giftlists a:hover
    {
        color: #666;
    }

ul.nav-parent li.basket
{
    width: auto;
    padding: 0.8em 10px 0 0;
    float: right;
    font-size: 0.8em;
}
    ul.nav-parent li.basket a
    {
        background: url(/images/icon-basket.png) left top no-repeat;
        padding: 0 0 0 21px;
        color: #999;
        text-transform: lowercase;
    }
    ul.nav-parent li.basket a:hover
    {
        color: #666;
    }
    ul.nav-parent li.basket span.basket-total
    {
        border-left: solid 1px #999;
        padding: 0 0 0 6px;
        margin: 0 0 0 2px;
    }

/* NAV DROP-DOWNS */

ul.nav-parent li div.dropdown
{
    display: none;
    position:absolute;
    padding: 0;
    width: 180px;
    z-index: 10;
    overflow: hidden;
}
ul.nav-parent li div.dropdown div.dropdown-outer
{
    background: url(/images/dropdown-shadow.png) right top no-repeat;
}
ul.nav-parent li div.dropdown div.dropdown-inner
{
    margin: 0 9px 0 0;
    padding: 0 10px 0 18px;
    border: solid 1px transparent; /* For IE7 */
}
ul.nav-parent li div.dropdown div.dropdown-bottom
{
    height: 8px;
}
ul.nav-parent li div.dropdown div.dropdown-bottomleft1
{
    height: 2px;
    margin: 0;
}
ul.nav-parent li div.dropdown div.dropdown-bottomleft2
{
    height: 8px;
    padding: 0;
    margin: 0 9px 0 0;
    background: url(/images/dropdown-shadow.png) left bottom no-repeat;
}
ul.nav-parent li div.dropdown div.dropdown-bottomright
{
    float: right;
    height: 8px;
    width: 9px;
    background: url(/images/dropdown-shadow.png) right bottom no-repeat;
}

ul.nav-parent li:hover div.dropdown
{
    display: block;
}
ul.nav-parent li div.dropdown dl
{
    margin: 0;
    padding: 0.4em 0 0 0;
}
    ul.nav-parent li div.dropdown dt
    {
        margin: 0.5em 0 0 0;
        padding: 0 0 0.3em 0;
        font-weight: bold;
    }
    ul.nav-parent li div.dropdown dd
    {
        margin: 0;
        padding: 0 0 0.3em 0;
        font-weight: bold;
        font-size: 0.8em;
        text-transform: lowercase;
    }
        ul.nav-parent li div.dropdown dd a
        {
            margin: 0;
            padding: 0;
            text-align: left;
            border: 0;
        }

/* SUB NAV */

div.nav-child
{
    clear: both;
    background: #660099;
    min-height: 1.5em;
    height: auto !important;
    height: 1.5em;
}

ul.nav-child
{
    clear: both;
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
    width: 100%;
    float: left;
    font-weight: bold;
    font-size: 9pt;
}
ul.nav-child li
{
    margin: 0;
    padding: 0;
    float: left;
}
ul.nav-child li:first-child
{
    margin-left: 9px;
}
ul.nav-child li a
{
    margin: 0;
    padding: 0.4em 10px;
    display: block;
    text-decoration: none;
    text-transform: lowercase;
    color: #666;
}


/* BREADCRUMB TRAIL */

div.breadcrumbtrail
{
    font-size: 8pt;
    text-transform: uppercase;
    color: #999;
    margin: 1em 0 0 19px;
}
div.breadcrumbtrail ul
{
    list-style: none;
    display: inline;
    margin: 0;
    padding: 0;
}
div.breadcrumbtrail ul li
{
    display: inline;
    margin: 0 0 0 4px;
    padding: 0 0 0 15px;
    color: #660099;
    font-weight: bold;
    background: url(/images/breadcrumb-bullet.gif) left 4px no-repeat;
}
div.breadcrumbtrail ul li a
{
    color: #999;
    text-decoration: none;
    font-weight: normal;
}
div.breadcrumbtrail ul li a:hover
{
    color: #660099;
    text-decoration: underline;
}

/* CONTENT */

div.content
{
    border: solid 1px #e2dee3;
    margin: 6px 16px 10px 16px;
    padding: 20px;
}
div.content h1
{
    font-size: 20pt;
    font-weight: normal;
    margin: 0;
    padding: 0;
    color: #999;
    letter-spacing: 0;
    float: left;
}
div.content h1 span.word1
{
    font-weight: bold;
    color: #660099;
    /* Selected color override set below */
}
div.content h1 span.space
{
    font-size: 0;
}
div.content h1 span.word2
{
    font-weight: normal;
    text-transform: lowercase;
}
p.page-desc
{
    margin: 5px 0 0 0;
    float: right;
    max-width: 500px;
    font-style: italic;
}
div.content h2
{
    font-size: 1.3em;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    color: #999;
    clear: left;
    float: left;
}
div.content h3
{
    font-size: 1.4em;
    color: #660099;
}

/* FOOTER 1 */

div.footer1
{
    background: #fff url(/images/footer1_back.png) left top repeat-x;
    margin: 0;
    padding: 6px 0;
}
    div.footer1 ul
    {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    div.footer1 ul li
    {
        float: left;
        width: 142px; /* 162-4-16 = 142 */
        min-height: 84px; /* 96-6-6 = 84 */
        border-right: solid 1px #bbb;
        padding: 10px 4px 5px 16px;
    }
    div.footer1 ul li.last
    {
        width: 152px; /* 165-4-9 = 152 */
        border-right: none;
        padding: 10px 4px 5px 9px;
    }
    
    div.footer1 ul li h7
    {
        margin: 0;
        padding: 0;
        font-weight: normal;
    }
    div.footer1 ul li span.word1
    {
        font-size: 1.4em;
        color: #660099;
        font-weight: bold;
        text-transform: lowercase;
    }
    div.footer1 ul li span.space
    {
        font-size: 0;
    }
    div.footer1 ul li span.word2
    {
        font-size: 1.5em;
        color: #666;
        font-weight: normal;
        text-transform: lowercase;
    }
    

    div.footer1 ul li ul
    {
        list-style-position: outside;
        list-style-type: none;
        margin: 0.3em 0 0 0;
    }
    div.footer1 ul li ul li
    {
        float: none;
        width: auto;
        min-height: 12px;
        border: none;
        padding: 0 0 0 12px;
        margin: 0;
        font-size: 0.9em;
        background: url(/images/footer_bullet.gif) left 5px no-repeat;
    }
    div.footer1 ul li ul li a
    {
        color: #666;
        text-decoration: none;
        text-transform: lowercase;
    }
        div.footer1 ul li ul li a:hover
        {
            color: #660099;
        }

    /* Mailing List */
    div.footer1 ul li.last
    {
        position: relative;
    }
    div.footer1 ul li.last p
    {
        font-size: 0.9em;
        margin: 0.35em 0;
        color: #666
    }


/* FOOTER 2 */

div.footer2
{
    width: 981px;
    margin: 6px auto;
    padding: 0;
    color: #888;
    font-size: 0.8em;
}
div.footer2 div.left
{
    float: left;
}
div.footer2 div.right
{
    float: right;
}
div.footer2 a
{
    color: #999;
    text-decoration: none;
}
    div.footer2 a:hover
    {
        color: #666;
    }
div.footer2 p
{
    margin: 0;
}

/* SELECTED NAV COLOURS */

/* 0 */
div.content h1 span.word1.a0,
div.content .page-desc.a0,
ul.nav-parent li.a0 span.word1, 
ul.nav-parent li.a0 div.dropdown dt, ul.nav-parent li.a0 div.dropdown dd a:hover,
div.nav-child.a0 ul.nav-child a:hover, div.nav-child.a0 li.selected a
{
    color: #a5a6c3;
}
ul.nav-parent li.a0:hover a, ul.nav-parent li.a0 a:hover, 
ul.nav-parent li.a0 a.selected, 
ul.nav-parent li.a0 div.dropdown-bgcolor,
div.nav-child.a0 li.selected a, 
div.nav-child.a0
{
    background: #ededed;
}


/* 1 */
div.content h1 span.word1.a1,
div.content .page-desc.a1,
ul.nav-parent li.a1 span.word1, 
ul.nav-parent li.a1 div.dropdown dt, ul.nav-parent li.a1 div.dropdown dd a:hover,
div.nav-child.a1 ul.nav-child a:hover, div.nav-child.a1 li.selected a
{
    color: #b581b4;
}
ul.nav-parent li.a1:hover a, ul.nav-parent li.a1 a:hover, 
ul.nav-parent li.a1 a.selected, 
ul.nav-parent li.a1 div.dropdown-bgcolor,
div.nav-child.a1, 
div.nav-child.a1 li.selected a
{
    background: #eddded;
}

/* 2 */
div.content h1 span.word1.a2,
div.content .page-desc.a2,
ul.nav-parent li.a2 span.word1, 
ul.nav-parent li.a2 div.dropdown dt, ul.nav-parent li.a2 div.dropdown dd a:hover,
div.nav-child.a2 ul.nav-child a:hover, div.nav-child.a2 li.selected a
{
    color: #5f98a2;
}
ul.nav-parent li.a2:hover a, ul.nav-parent li.a2 a:hover, 
ul.nav-parent li.a2 a.selected, 
ul.nav-parent li.a2 div.dropdown-bgcolor,
div.nav-child.a2,
div.nav-child.a2 li.selected a
{
    background: #d6eaeb;
}

/* 3 */
div.content h1 span.word1.a3,
div.content .page-desc.a3,
ul.nav-parent li.a3 span.word1, 
ul.nav-parent li.a3 div.dropdown dt, ul.nav-parent li.a3 div.dropdown dd a:hover,
div.nav-child.a3 ul.nav-child a:hover, div.nav-child.a3 li.selected a
{
    color: #7a8d91;
}
ul.nav-parent li.a3:hover a, ul.nav-parent li.a3 a:hover, 
ul.nav-parent li.a3 a.selected, 
ul.nav-parent li.a3 div.dropdown-bgcolor,
div.nav-child.a3,
div.nav-child.a3 li.selected a
{
    background: #e2e8ea;
}

/* 4 */
div.content h1 span.word1.a4,
div.content .page-desc.a4,
ul.nav-parent li.a4 span.word1, 
ul.nav-parent li.a4 div.dropdown dt, ul.nav-parent li.a4 div.dropdown dd a:hover,
div.nav-child.a4 ul.nav-child a:hover, div.nav-child.a4 li.selected a
{
    color: #7ba567;
}
ul.nav-parent li.a4:hover a, ul.nav-parent li.a4 a:hover, 
ul.nav-parent li.a4 a.selected, 
ul.nav-parent li.a4 div.dropdown-bgcolor,
div.nav-child.a4,
div.nav-child.a4 li.selected a
{
    background: #e0ecd9;
}

/* 5 */
div.content h1 span.word1.a5,
div.content .page-desc.a5,
ul.nav-parent li.a5 span.word1, 
ul.nav-parent li.a5 div.dropdown dt, ul.nav-parent li.a5 div.dropdown dd a:hover,
div.nav-child.a5 ul.nav-child a:hover, div.nav-child.a5 li.selected a
{
    color: #9c694e;
}
ul.nav-parent li.a5:hover a, ul.nav-parent li.a5 a:hover, 
ul.nav-parent li.a5 a.selected, 
ul.nav-parent li.a5 div.dropdown-bgcolor,
div.nav-child.a5,
div.nav-child.a5 li.selected a
{
    background: #e7d9ce;
}


/* BACK TO TOP */

a.back-to-top
{
    display: block;
    margin: 10px 0;
    float: right;
    color: #999;
    text-transform: uppercase;
    font-size: 0.8em;
}
    a.back-to-top:hover
    {
        color: #666;
    }


/* Purple button with rounded corners */

a.button1
{
    display: block;
    float: left;
    color: #fff;
    font-weight: bold;
    font-size: 0.8em;
    text-transform: uppercase;
    text-decoration: none;
    min-width: 70px;
}

a.button1 span.button1_top_left
, a.button1 span.button1_top_right
, a.button1 span.button1_top_middle
, a.button1 span.button1_bottom_left
, a.button1 span.button1_bottom_right
, a.button1 span.button1_bottom_middle
, a.button1 span.button1_middle
{
    background: url(/images/button1.png) no-repeat;
    display: block;
}

a.button1 span.button1_top_left
{
    background-position: left top;
    height: 3px;
    padding: 0 0 0 4px;
}
a.button1 span.button1_top_right
{
    background-position: right top;
    height: 3px;
    padding: 0 4px 0 0;
}
a.button1 span.button1_top_middle
{
    background-position: -1000px top;
    height: 3px;
}

a.button1 span.button1_bottom_left
{
    background-position: left bottom;
    height: 4px;
    padding: 0 0 0 4px;
}
a.button1 span.button1_bottom_right
{
    background-position: right bottom;
    height: 4px;
    padding: 0 4px 0 0;
}
a.button1 span.button1_bottom_middle
{
    background-position: -1000px bottom;
    height: 4px;
}

a.button1 span.button1_middle
{
    padding: 0 6px;
    background-position: 0px -4px;
    text-align: center;
}

