/* !Layout */

html { background-color: #d7f0ff;  }

body {
    background: url('../images/tile.png') repeat-y top center;
    color: #1192d7;
    font: normal 10px/2 Calibri,Arial,'Helvetica Neue',sans-serif;
    margin: 0 auto;
}

div.container {
    background: url('../images/banner.jpg') no-repeat -156px 0;
    margin: 0 auto;
    min-height: 255px;
    padding-left: 40px;
    width: 1020px;
    overflow: hidden;
}

div.panel-major {
    float: left;
    width: 854px;
}

div.banner {
    min-height: 255px;
    position: relative;
}

    p.logo {
        background: url('../images/logo.png') no-repeat;
        height: 124px;
        left: 15px;
        position: absolute;
        text-indent: -9999px;
        width: 261px;
    }

    .logo a {
        display: block;
        height: 100%;
    }

    p.region {
        background: url('../images/region.png') no-repeat;
        height: 38px;
        position: absolute;
        right: 0;
        top: 5px;
        width: 198px;
    }

    p.region a {
        float: left;
        display: block;
        padding: 10px 15px;
    }

    p.region img {
        border: 0;
        margin: 0;
        padding: 5px 6px 0 0;
    }

div.content {
    background: white url('../images/page.png') repeat-y;
    clear: both;
    overflow: hidden;
    padding: 20px 47px 20px;
    position: relative;
    width: 760px;
}

div.footer {
    background: #14538c url('../images/footer.png') no-repeat;
    padding: 40px 47px;
    width: 760px;
}

div.panel-minor {
    background: url('../images/skyscraper-top.png') no-repeat right top;
    float: right;
    margin-top: 10px;
    padding-top: 15px;
    width: 166px;
}

div.skyscraper {
    background: url('../images/skyscraper-bottom.png') no-repeat right bottom;
    min-height: 600px;
    padding: 0 15px 15px 31px;
}
div.skyscraper img {
    border:0;
}

/* !Grid */

div.block {
    float: left;
    margin: 0 24px 20px 0;
    position: relative;
    width: 760px;
/*  outline: 1px solid #333; */
}

/* .block .block { margin-bottom: 0; } */

div.block-one { width: 172px;  }

div.block-two { width: 368px; }

div.block-three { width: 564px; }

div.last {
    float: right;
    margin-right: 0;
}

div.clear { clear: both; }

div.compact { margin-bottom: 0; }

    /* Decorations */

    div.dots {
        background: url('../images/hr-dots.png') repeat-x;
        padding-top: 20px;
    }

    div.flowers {
        background: url('../images/hr-flowers.png') no-repeat right bottom;
        padding-bottom: 40px;
    }

    div.music {
        background: url('../images/hr-music.png') no-repeat right bottom;
        padding-bottom: 40px;
    }

    div.list-item, div.internal { margin-bottom: 0; }
    
    /* Video */
    
    div.video {
        background: url('../images/video-top.png') no-repeat center top;
        padding-top: 20px;
    }
    
    div.video-inner {
        background: url('../images/video-bottom.png') no-repeat center bottom;
        padding: 0 0 20px;
    }
    
    .video .block { margin-bottom: 0; }
    
        .video-inner .block-one {
            margin-left: 6px;
            width: 166px;
        }
        
        .video-inner .block-one.last {
            margin: 0 16px 0 0;
            width: 156px;
        }
    
    .video .decoration {
        background: url('../images/bg-video.png') no-repeat center top;
        min-height: 145px;
    }

/* !Typography */
    strong {
        font-weight: bold;
    }

    h1, h2, h3, h4 {
        color: #27629d;
        font-weight: bolder;
    }
    
    h1, h2 { background: url('../images/hr-dots.png') repeat-x left bottom; }
    
    h1 {
        font-size: 220%;
        line-height: 0.909;
        margin-bottom: 0.456em;
        padding-bottom: 1.364em;
    }
     
        .feature h1 { /* Homepage only */
            zoom:1;
            font-size: 180%;
            line-height: 1.111;
            background: url('../images/hr-dots.png') repeat-x left bottom;
            margin-bottom: 0.456em;
            padding-bottom: 1.364em;
        }
    
    h2 {
        font-size: 180%;
        line-height: 1.111;
        margin-bottom: 0.833em;
        padding-bottom: 1.389em;
    }
    
        h2.alternative {
            background-image: none;
            margin-bottom: 1.111em;
            padding-bottom: 0;
        }
    
    h3 {
        font-size: 150%;
        line-height: 1.333;
        margin-bottom: 1.333em;
    }
    
    h4 {
        font-size: 130%;
        line-height: 1.333;
        margin-bottom: 0.333em;
    }
    
    p, li {
        font-size: 120%;
        line-height: 1.667;
    }
    
    p { margin-bottom: 1.667em; }
    
        .feature p, .feature a.action {
            font-size: 150%;
            line-height: 1.333;
            margin-bottom: 1.333em;
        }
        
        .summary h3, .summary p, p.summary { margin-bottom: 0; }
    
        p.meta-link {
            margin-bottom: 0;
            position: absolute;
            right: 47px;
            top: 25px;
        }
        
        .block .meta-link {
            right: 0;
            top: 0;
        }
    
    a {
        color: #ff6e00;
        font-weight: bolder;
        text-decoration: none;
        outline: none;
    }
    
    a:hover {
        color: #b17ec4;
        text-decoration: underline;
    }

    a.action:after { content: ' \00bb'; }
    
    /* !Images */

    img {
        border: 4px solid #eaeeee;
        display: block;
        margin: 0 auto;
    }

    img.inline {
        float: right;
        margin: 0 0 20px 24px;
    }

    .video img {
        border-color: white;
        border-width: 3px;
        margin: 55px 0 0 30px;
    }

    .promo-main img { margin-bottom: 20px; }

    /* !Buttons */
    
    button {
        border: none;
        text-align: left;
    }

    button, span.button  {
        background: url('../images/button-left.png') no-repeat top left;
        cursor: pointer;
        font-weight: bold;
        margin: 5px 0;
        padding-left: 10px;
    }

    span.button {
        display: inline-block;
    }

    span.button a {
        display: inline-block;
    }

    button span {
        display: inline-block;
        white-space: nowrap;
        font-size: 120%;
        /* FF3 Mac */
        margin: -1px 0 0 -3px;
    }

    button span, span.button a {
        background: url('../images/button-right.png') no-repeat top right;
        color: white;
        line-height: 30px;
        height: 30px;
        padding: 0 10px 0 0;
    }

    button:hover, span.button:hover { background-image: url('../images/button-left-hover.png'); }

    button:hover span, span.button:hover a { background-image: url('../images/button-right-hover.png'); }

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

    span.button-large {
        background-image: url('../images/button-large-left.png');
    }
    
    span.button-large a {
        background-image: url('../images/button-large-right.png');
        height: 40px;
        line-height: 40px;
        padding: 0 10px 0 0;
        font-size: 120%;
    }
    
    span.button-large:hover { background-image: url('../images/button-large-left-hover.png'); }
    
    span.button-large:hover a { background-image: url('../images/button-large-right-hover.png'); }
    
/* Pagination */

ol.pagination { overflow: hidden; }

.pagination li {
    color: #27629d;
    float: left;
    font-size: 120%;
    padding-right: 0.666em;
}

.prev .action:before { content: '\00ab '; }

.prev .action:after { content: none; }

/* !Navigation */

    .nav ul, .nav li { height: 40px; }

    .nav ul {
        bottom: 17px;
        left: 32px;
        overflow: hidden;
        position: absolute;
    }
    
    .nav li {
        float: left;
        font-size: 120%;
        line-height: 3.333;
    }
    
    .nav li a {
        background: #ff8e1d url('../images/nav-tile.png') repeat-x;
        display: block;
        height: 100%;
        padding: 0 0.833em;
    }
    
    .nav li a, .nav li a:hover { 
        color: white;
        outline: 0;
    }
    
    .nav .first a, .nav .last a { background-repeat: no-repeat; }
    
    .nav .first a {
        background-image: url('../images/nav-first.png');
        padding-left: 1.333em;
    }
    
    .nav .last a {
        background-image: url('../images/nav-last.png');
        background-position: right top;
        padding-right: 1.333em;
    }
    
    .nav a:hover, .nav .active, .about .nav_about a, .news .nav_news a, .fun .nav_fun a, .videos .nav_watch a { background-image: url('../images/nav-tile-active.png'); }
    
    .nav_home a:hover, .nav .first .active, .home .nav_home a { background-image: url('../images/nav-first-active.png'); }
    
    .nav_products a:hover, .nav .last .active, .products .nav_products a { background-image: url('../images/nav-last-active.png'); }
    
/* !Sub-Navigation */

    .menu {
        background: #e6f4ff url('../images/menu-top.png') no-repeat center top;
        margin-bottom: 20px;
        padding-top: 20px;
    }
    
    .menu ul {
        background: #e6f4ff url('../images/menu-bottom.png') no-repeat center bottom;
        padding: 0 16px 20px;
    }
    
    .menu a.active { color: #27629d; }
    
/* !Forms */

    label, input, button { vertical-align: middle; }

    legend { display: none; }
    
    label {
        display: block;
        font-size: 120%;
        font-weight: bolder;
        line-height: 1.667;
    }
    
        p label { font-size: 100%; }
    
    input[type='text'], select { font-size: 120%; }
    
    input.text { font-size: 120%; }
    
    input[type='text'] {
        background: url('../images/input-tile.png') repeat-x;
        border: 3px solid #eaeeee;
        margin-bottom: 1em;
        padding: 0.333em;
        width: 29.5em;
    }

    input.text {
        background: url('../images/input-tile.png') repeat-x;
        border: 3px solid #eaeeee;
        margin-bottom: 1em;
        padding: 0.333em;
        width: 29.5em;
    }

    /* Multiple Choice */

    .multiple label { line-height: 4; }

    .multiple span {
        background-position: left center;
        background-repeat: no-repeat;
        display: inline-block;
        padding-left: 48px;
    }

    .multiple_a span { background-image: url('../images/multiple_a.png'); }

    .multiple_b span { background-image: url('../images/multiple_b.png'); }

    .multiple_c span { background-image: url('../images/multiple_c.png'); }

    div.dob {
        height: 4em;
        padding-top: 0.6em;
    }

    .dob label {
        display: inline-block;
        margin-right: 0.333em;
    }

    .dob select { margin-right: 1em; }

/* !Search */

div.search {
    background: white url('../images/search-tile.png') repeat-x;
    bottom: 17px;
    height: 40px;
    position: absolute;
    right: 32px;
}

.search fieldset {
    background: url('../images/search-butt.png') no-repeat;
    padding-left: 10px; 
}

.search legend { display: none; }

.search label {
    font-size: 0;
    height: 0;
    text-indent: -9999px;
}

.search input, .search button { border: none; }

.search input {
    background: url('../images/search-tile.png') repeat-x;
    color: #27629d;
    font-size: 120%;
    font-weight: bolder;
    height: 15px;
    margin-bottom: 0;
    padding: 13px 0 12px; 
    width: 20em;
}

.search button {
    background: #ff8e1d url('../images/search-button.png') no-repeat;
    cursor: pointer;
    display: inline;
    float: none;
    height: 40px;
    margin: 0;
    text-indent: -9999px;
    width: 48px;
}

/* !Social Bookmarks module */
.social {
    float: left;
    background: url('../images/social-first.jpg') no-repeat top left;
    padding-left: 20px;
    margin-right: 24px;
}

.social ul {
    float: left;
    background: url('../images/social-last.jpg') no-repeat top right;
    height: 50px;
    list-style: none;
    padding: 15px 20px 0 0;
}

.social ul li {
    float: left;
    margin-right: 5px;
}

.social ul li a {
    display: inline-block;
}

.social ul li span {
    display: inline-block;
    padding-top: 1px;
}

.social ul img {
    border: none;
    display: inline;
}

.social ul li.last {
    margin-right: 0;
    padding-left: 10px;
}

/* !Promo boxes */

.promo { margin-bottom: 20px; }

.promo-cbeebies {
    background: url('../images/promo-cbeebies-top.png') no-repeat top left;
    padding-top: 15px;
    cursor: pointer;
}

.promo-cbeebies .promo-inner {
    background: url('../images/promo-cbeebies-bottom.png') no-repeat bottom left;
    overflow: hidden;
    padding: 0 15px 15px;
}

.promo-cbeebies.wide { background: url('../images/promo-cbeebies-top-wide.png') no-repeat top left; }

.promo-cbeebies.wide .promo-inner {
    background: url('../images/promo-cbeebies-bottom-wide.png') no-repeat bottom left;
    padding: 0 0 15px;
}

    .promo-cbeebies.wide .summary {
        margin-right: 16px;
        width: 156px;
    }

.promo-cbeebies img { margin: 0 auto 20px; }

.promo-cbeebies.wide img { margin-bottom: 0; }

.promo-cbeebies .block { margin-bottom: 0; }

.promo-newsletter {
    background: url('../images/promo-greendots-top.png') no-repeat top left;
    padding-top: 15px;
}

.promo-newsletter h3 { color: #ff6e00; }

.promo-newsletter .promo-inner {
    background: url('../images/promo-greendots-bottom.png') no-repeat bottom left;
    padding: 0 15px 15px 15px;
}

.promo-character {
    background: url('../images/promo-greendots-top.png') no-repeat top left;
    padding-top: 15px;
}

.promo-character .promo-inner {
    background: url('../images/promo-greendots-bottom.png') no-repeat bottom left;
    padding: 0 15px 15px 15px;
}

.promo-decoration img {
    border: none;
    display: block;
    margin: 0 auto 20px;
}


/* !Footer */
.footer {
    overflow:hidden;
}

.footer #rdfrights img { border: 0; }
.footer #rdfrights {
    margin-top:10px;
    width:144px;
    float:left;
}
.footer #legal {
    position:relative;
    width:616px;
    margin-top:10px;
    float:right;
}

.footer, .footer a, .footer a:hover { color: white; }

.footer p {
    text-align:right;
    right:0;
    top:1.6em;
}

.footer ul {
    text-align:right;
    overflow: hidden;
    margin:0;
    padding:0;
}

.footer li {
    display:inline;
    background: url('../images/footer-divider.png') no-repeat left center;
    margin-right: 0.5em;
    padding-left: 0.833em;
}

.footer li.first {
    background-image: none;
    padding-left: 0;
}

.footer li.last { margin-right: 0; }

/* Lightbox - See facebox.css */

/* !404 Page */
.page-404 #piplings img {
    border:0;
    float:left;
    margin:0;
}

/* !About Page */
.pipling img {
    border: none;
    display: block;
    margin: 0 auto 20px;
}


.nav a, #search:focus {
    outline:0;
    border:0;
}

/* Placeholders */
img.placeholder {
    border:0;
}


/* Hacks (Clearfix - http://www.positioniseverything.net/easyclearing.html) 
--------------------*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */