body {
    background: url(../images/bg_body.png) #eae9e9 center top no-repeat;
    margin: 0 0 0 0;
    padding: 0 0 10px 0;
    text-align: center;
}

    body#popup {
        background: url('../images/bg_popup_header.png') #eae9e9 top right no-repeat;
        padding: 0 0 19px 0;
        text-align: left;
    }

    body#popup-sandbox {
        background: url('../images/bg_popup_header_sandbox.png') #eae9e9 top right no-repeat;
        padding: 0 0 0 0;
        text-align: left;
    }

    body#popup-login {
        background: url('../images/bg_popup_grad.png') transparent top right repeat-x;
        padding: 30px 30px 30px 30px;
        text-align: left;
    }

#wrap {
    width: 980px;
    background: url(../images/bg_wrap.gif) transparent left top repeat-y;
    margin: 0 auto;
    padding: 0 0 0 0;
    text-align: left;
    border: 0px solid #f00;
}

#header {
    background: url(../images/bg_header.png) transparent left top no-repeat;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: 0px solid #f00;
}

#header-sandbox {
    background: url(../images/bg_header_sandbox.png) transparent left top no-repeat;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: 0px solid #f00;
}

#logo {
    width: 245px;
    float: left;
    margin: 0 0 0 0;
    padding: 25px 0;
}

#header-wrap {
    float: right;
    width: 708px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: 0px solid #f00;
}

#user-login {
    border: 0px solid #f00;
    margin: 0;
    padding: 0;
	height: 54px;
    text-align: right;
}

#user-summary {
    border: 0px solid #f00;
    margin: 0;
    padding: 0;
    height: 54px;
}

#nav {
    height: 41px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: 0px solid #f00;
}

#banner {
    padding: 0 0 0 0;
    margin: 0 0 0 22px;
}

#content {
    padding: 30px 40px 25px 22px;
}
    
    body#home #content {
        padding: 30px 0 25px 22px;
    }



div.sandbox {
    background-image: url(/jigsaw/static/images/bg_sandbox.jpg);
}



#column-left {
    width: 280px;
    float: left;
    border: 0px solid #f00;
    margin: 0 0 0 0;
    padding: 0 0;
}

#column-right {
    width: 590px;
    float: right;
    border: 0px solid #f00;
    margin: 0 0 0 0;
    padding: 10px 0 0 0;
}

    body#skills-tracer #column-left {
        width: 152px;
        float: left;
        margin: 0 0 0 0;
        padding: 40px 0 0 0;
    }

    body#skills-tracer #column-right {
        width: 750px;
        float: left;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
    }

    body#resources #wrap {
        background: url('../images/bg_resources_wrap.png') transparent top left no-repeat;
    }

    body#resources #content {
        background: url('../images/bg_resource_content.png') transparent top left no-repeat;
        margin: 20px 0 0 0;
    }

    body#resources #footer {
        background: url('../images/bg_resources_footer.png') #eae9e9 top left no-repeat;
    }

    body#resources-entry #wrap {
        background: url('../images/bg_wrap.gif') transparent top left repeat-y;
    }

    body#resources-entry #content {
        background: url('../images/bg_resource_content_entry.png') transparent top left no-repeat;
        margin: 20px 0 0 0;
        padding: 50px 0 30px 30px;
    }


    body#resources #breadcrumb {
        margin: 0 -19px 30px -21px; /* this may need correcting once column-right has it's correct width set */
        padding: 0 0 0 21px;
        border-bottom: 1px #c8c7c7 solid;
    }

    body#checkout #breadcrumb {
        margin: 0px -38px 30px -21px;
        padding: 0px 0px 0px 41px;
        border-bottom: 1px #c8c7c7 solid;
    }

    #description {
        margin: 0 0 30px 0;
    }



    body#resources #column-right {
        width: 640px;
    }

    body#resources #content {
        padding: 30px 20px 25px 10px;
    }

    #more-info-group {
        margin: 25px 0 0 0;
    }


    div.greybox {
        background: url(../images/bg_greybox.png) transparent bottom left no-repeat;
        margin: 0 0 20px 0;
        padding: 0;
    }

    body#inner div.greybox {
        background: url(../images/bg_inner_greybox.png) transparent bottom left no-repeat;
        margin: 0 0 20px 0;
        padding: 0;
    }

    body#inner div.greybox-grad {
        background: url(../images/bg_greybox.png) transparent bottom left no-repeat;
        margin: 0 0 20px 0;
        padding: 0 0 30px 15px;
    }

    div.sidebox,
    div.sidebox-resource {
        margin: 0 0 15px 0;
        padding: 15px 0 0 18px;
    }

    body#resources div.data-box-grad {
        background: url('../images/bg_resources_data_grad.png') transparent bottom left no-repeat;
        margin: 0 0 30px 0;
        padding:  0 30px 30px 30px;
    }

        body#resources div.data-box,
        body#skills-tracer div.data-box {
            background: url('../images/bg_databox.png') transparent top left repeat-y;
            margin: 0 0 30px 0;
            padding:  0 30px 0 30px;
        }

        body#checkout div.data-box {
            background: url('../images/bg_checkout_data.png') transparent bottom left no-repeat;
            margin: 0 0 30px 20px;
            padding:  0 30px 30px 30px;
        }


        body#checkout div.data-box-float {
            background: url('../images/bg_checkout_data_float.png') transparent bottom left no-repeat;
            margin: 0 18px 30px 0;
            padding:  0 30px 30px 30px;
            float: left;
            voice-family: "\"}\"";
            voice-family: inherit;
            width: 380px;
        }

        html>body#checkout div.data-box-float { width: 380px; }

        #col-right div.menu-box {
            background: url('../images/bg_databox_column.png') transparent bottom left no-repeat;
            margin: 0 0 15px 0;
            padding:  0 30px 30px 30px;
            voice-family: "\"}\"";
            voice-family: inherit;
            width: 274px;
        }

        html>body #col-right div.menu-box { width: 274px; }

        div.data-box-footer {
            background: url('../images/bg_databox_footer.png') transparent bottom left no-repeat;
            height: 18px;
            margin: 0 -30px 0 -30px;
        }


        div.data-footer {
            background: url('../images/bg_data_footer.png') transparent bottom left no-repeat;
            height: 13px;
        }

        #column-right div.data-box-footer {
            background: url('../images/bg_databox_footer.png') transparent bottom left no-repeat;
            margin: 0px -30px;
            height: 13px
        }

        #column-right div.preview div.data-box-footer {
            background: url('../images/bg_databox_footer.png') transparent bottom left no-repeat;
            height: 18px;
            margin: 0 -30px;
        }

        div.inner-data {
            background: url('../images/bg_inner_data.png') transparent bottom left no-repeat;
            margin: 0 0 30px 0;
            padding: 0 30px 30px 30px;
            voice-family: "\"}\"";
            voice-family: inherit;
            width: 579px;
        }

        html>body div.inner-data { width: 579px; }


    #login-ul {
        background: url('../images/bg_side_ul.png') transparent bottom left repeat-x;
        border-top: 1px #ededee solid;
        border-bottom: 1px #9e9e9e solid;
        border-left: 1px #dbdbdb solid;
        border-right: 1px #c4c4c4 solid;
    }


    div.rb-intro {
        background: url('../images/bg_resource_intro.png') transparent top left no-repeat;
        height: 138px;
        margin: 0 12px 0 0;
        padding: 20px 0 0 67px;
        float: left;
        voice-family: "\"}\"";
        voice-family: inherit;
        width: 233px;
        height: 118px;
    }

    html>body.rb-intro { width: 233px; height: 118px; }

    div.page-number {
        margin: 0 0 20px 0;
        padding: 0 10px 0 20px;
    }

    div.results {
        background-color: #e7e7f9;
        margin: 0 0 20px 0;
        padding: 18px 18px 0 18px;
        border-top: 1px #d8d7d7 solid;
        border-left: 1px #d8d7d7 solid;
        border-right: 1px #a6a6a6 solid;
        border-bottom: 1px #a6a6a6 solid;
        zoom: 1;
    }

        div.results-footer {
            background-color: #cbd4f3;
            margin: 0 -18px 0 -18px;
            padding: 10px 18px 5px 18px;
        }

    div.message-green {
        background-color: #e7f9f1;
        margin: 0 0 30px 0;
        padding: 12px 20px 12px 20px;
        border: 1px #21c85b solid;
        font-weight: bold;
        color: #068131;
    }

    div.message-red {
        background-color: #fbf6f6;
        margin: 0 0 30px 0;
        padding: 12px 20px 5px 20px;
        border: 1px #f00 solid;
        text-align: center;
        font-weight: bold;
        color: #f00;
    }

    div.message-grey {
        background-color: #fafafa;
        margin: 0 0 30px 0;
        padding: 12px 20px 5px 20px;
        border: 1px #E6E6E6 solid;
        text-align: center;
        font-weight: bold;
        color: #000;
    }

    div.order-completed {
        background-color: #e7f9f1;
        margin: 0 0 30px 15px;
        padding: 12px 20px 5px 20px;
        border: 1px #21c85b solid;
        font-weight: bold;
        color: #068131;
    }

    #home-left div.message-red {
        background-color: #fbf6f6;
        margin: 0 0 15px 0;
        padding: 8px 10px 0 10px;
        border: 1px #f00 solid;
        text-align: center;
        font-weight: bold;
        color: #f00;
    }

    #login-ul div.message-red {
        background-color: #fbf6f6;
        margin: 0 0 0 0;
        padding: 8px 10px 0 10px;
        border: 1px #f00 solid;
        text-align: center;
        font-weight: bold;
        color: #f00;
    }

    div.book-cover {
        width: 100px;
        margin: 0 30px 30px 0;
        float: left;
    }

    div.show-hide {
        border: 1px #cbd4f3 solid;
        border-top: 0;
        margin:  0 0 20px 0 ;
        padding: 0 15px 10px 15px;
    }

    div.column {
        margin: 0 10px 20px 0;
        padding: 10px 15px 10px 15px;
        float: left;
        border: 1px #cbd4f3 solid;
        voice-family: "\"}\"";
        voice-family: inherit;
        width: 326px;
    }

        html>body div.column { width: 326px; }

    div.column-full {
        margin: 0 10px 20px 0;
        padding: 10px 15px 10px 15px;
        border: 1px #cbd4f3 solid;
    }

    div.inner-data {
        background: url('../images/bg_inner_data.png') transparent bottom left no-repeat;
        margin: 0 0 30px 0;
        padding: 0 30px 30px 30px;
        voice-family: "\"}\"";
        voice-family: inherit;
        width: 579px;
    }

        html>body div.inner-data { width: 579px; }

    div.closed {
        display: none;
    }

    div.more-info {
        margin: 0 12px 0 0;
        padding: 0 0 0 40px;
        float: left;
        voice-family: "\"}\"";
        voice-family: inherit;
        width: 260px;
    }

    html>body.more-info { width: 260px; }

    div.data-address-box {
        background: url('../images/bg_address_box.png') transparent top left no-repeat;
        height: 51px;
        margin: 0 0 18px 0;
        padding: 2px 20px 0 30px;
        voice-family: "\"}\"";
        voice-family: inherit;
        height: 49px;
    }

        html>body div.data-address-box { height: 49px; }



    td.percent div {
        background: url('../images/bg_percent_bar.gif') transparent top left repeat-x;
    }

    body#skills-tracer div.data {
        background: url('../images/bg_skills_data.png') transparent top left repeat-y;
        padding: 0 30px 0 35px;
        voice-family: "\"}\"";
        voice-family: inherit;
        width: 684px;
        min-height: 300px;
    }

    html>body#skills-tracer div.data { width: 684px; }

    body#skills-tracer div.search-bar {
        background: url('../images/bg_search_bar.png') transparent top left repeat-x;
        height: 45px;
        margin: 0 -22px 36px -29px;
    }

    body#skills-tracer div.data-tabs {
        margin: 0 0 25px 0;
    }

    #student-type {
        margin: -30px 0 0 0;
    }
    
    div.started-red {
        background: url('../images/bg_getstarted_red.png') transparent top left no-repeat;
        height: 138px;
        margin: 0 18px 0 0;
        padding: 20px 90px 0 66px;
        float: left;
        voice-family: "\"}\"";
        voice-family: inherit;
        width: 145px;
        height: 118px;
    }

    html>body div.started-red { width: 145px; height: 118px; }

    div.started-green {
        background: url('../images/bg_getstarted_green.png') transparent top left no-repeat;
        height: 138px;
        margin: 0 18px 0 0;
        padding: 20px 90px 0 66px;
        float: left;
        voice-family: "\"}\"";
        voice-family: inherit;
        width: 145px;
        height: 118px;
    }

    html>body div.started-green { width: 145px; height: 118px; }

    div.started-blue {
        background: url('../images/bg_getstarted_blue.png') transparent top left no-repeat;
        height: 138px;
        padding: 20px 90px 0 66px;
        float: left;
        voice-family: "\"}\"";
        voice-family: inherit;
        width: 145px;
        height: 118px;
    }

    html>body div.started-blue { width: 145px; height: 118px; }

    #home-left {
        background: url('../images/bg_login_home.png') transparent top left no-repeat;
        height: 261px;
        margin: 0 18px 0 0;
        padding: 20px 20px 0 30px;
        float: left;
        voice-family: "\"}\"";
        voice-family: inherit;
        width: 251px;
        height: 261px;
    }

    html>body #home-left { width: 251px; height: 261px; }

    #home-right {
        width: 618px;
        float: left;
    }

    #col-left {
        width: 335px;
        margin: 0 14px 0 0;
        float: left;
    }

    #col-right {
        width: 335px;
        float: left;
    }

    div.help {
        background-color: #ebebeb;
        padding: 14px 10px;
        border: 1px #0b48ae solid;
        color: #878787;
    }

    div.article {
        clear: both;
        border-bottom: 1px solid #E3E6DD;
        margin: 10px 0 0 0;
        padding: 10px 0 10px 0;
    }

    div.btn-my-order {
        width: 170px;
        float: right;
        margin: 15px 0 20px 0;
    }

    #close-window {
        height: 52px;
        padding: 25px 60px 0 0;
        text-align: right;
        voice-family: "\"}\"";
        voice-family: inherit;
        height: 27px;
    }

        html>body #close-window { height: 27px; }

    #popup-content {
        background-color: #fff;
        margin: 0 19px 0 19px;
        padding: 40px 30px 0 30px;
        border-left: 1px #c8c7c7 solid;
        border-right: 1px #c8c7c7 solid;
        border-bottom: 1px #c8c7c7 solid;
    }

    body#popup-sandbox #popup-content {
        background-image: url(/jigsaw/static/images/bg_sandbox.jpg);
    }


    div.popup-grad {
        background: url('../images/bg_popup_grad.png') #fff top left no-repeat;
        height: 300px;
        padding: 30px 30px 0 30px;
        voice-family: "\"}\"";
        voice-family: inherit;
        width: 400px;
        height: 270px;
    }

        html>body div.popup-grad { width: 400px; height: 270px; }


#footer {
    background: url(../images/bg_footer.gif) #eae9e9 top left no-repeat;
    margin: 0 0 0 0;
    padding: 25px 5px;
    text-align: right;
}
    
    div.tools {
        background: url('../images/bg_dashboard_tools.png') transparent top left repeat-x;
        height: 32px;
        margin: -8px 0 20px 0;
        padding: 8px 0 0 15px;
        border-right: 1px #bbc5e1 solid;
        border-bottom: 1px #bbc5e1 solid;
        border-left: 1px #bbc5e1 solid;
        voice-family: "\"}\"";
        voice-family: inherit;
        height: 24px;
    }

        html>body div.tools { height: 24px; }


/*
    Added by Carmen Grantham
*/
    body#skills-tracer div.preview {
        padding: 0 30px 20px 35px;
        voice-family: "\"}\"";
        voice-family: inherit;
        width: 640px;
    }

        html >body#skills-tracer div.preview {
            width: 640px;
        }

div.greybox p {
    padding: 0px 18px 14px;
    color: #0042FF;
}



div#login-box {
    background: url('../images/bg_login_home.png') transparent top left no-repeat;
    height: 261px;
    margin: 0 18px 0 0;
    padding: 20px 20px 0 30px;
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 251px;
    height: 261px;
}
div#login-box table {
    margin: 0 0 0 0;
}

div#login-box td,th {
    padding: 0 0 5px 0;
}

#help-close {
    float: right;
}