/* Hide unwanted elements */



div#feedback {
    display: none;
}

#headerwrapper #header a img {
    display: none;
}

div#accountwrapper {
    display: none;
}

div#spacer {
    display: none;
}

.panel.peeking_sumdog:after {
    display: none;
}





/* Basics */
html {
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}

.panel .panel_content {
    padding: 30px;
}

body {
    background: #252525;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    color: #222;
    position: relative;
    height: calc(100% - 10px);
}

body div#page {
    background: #252525;
    padding-top: 0px;
    height: calc(100% - 20px);
    padding-bottom: 0px;
    min-width: 1000px;
}

body div#page #content {
    padding-left: 150px;
    width: 100%;
    max-width: 1000px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    box-sizing: border-box;
    padding-bottom: 40px;
    background: none;
    /* pointer-events: none; */
}

body div#page #content .panel {
    border-radius: 0;
    margin: 0 0 3px;

}

body div#page #content .panel .panel_content {
    font-size: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 1;
}


div#contentwrapper {
    top: 0;
    position: relative;
    height: calc(100% - 40px);
    height: 100%;
}

h1, h2, h3 {
    color: #48a8ca;
}






/* Header */



    /* Move Done button to bottom right */

    #headerwrapper #header a {
        width: 144px;
        background-color: #4E4942;
        background-image: url(http://assets1.sumdog.com/assets/hangout-ui/images/sumdog-logo-75c6863f9482d3187d6dadbd05719e26.png);
        background-repeat: no-repeat;
        background-position: center center;
        height: 110px;
        text-align: center;
        padding: 30px 0;
        box-sizing: border-box;
        margin-bottom: 6px;
        display: block;
        position: relative;
        text-decoration: none;
        pointer-events: none;
        cursor: default;

        top: -30px;
    }

    div#headerwrapper #header a {
        width: calc(100% - 6px);
        background-color: #4E4942;
        background-image: url(http://assets1.sumdog.com/assets/hangout-ui/images/sumdog-logo-75c6863f9482d3187d6dadbd05719e26.png);
        background-repeat: no-repeat;
        background-position: center center;
        height: 110px;
        text-align: center;
        padding: 30px 0;
        box-sizing: border-box;
        margin-bottom: 6px;
        display: block;
        position: relative;
        text-decoration: none;
        pointer-events: all;
        cursor: pointer;
        top: 0;
        transition: all 0.2s ease-out;
    }


    div#headerwrapper #header nav {
        width: 100%;
        display: none;
        pointer-events: none;
        opacity: 0.15;
    }


    div#headerwrapper #header a:hover:after {
        background: #84A63E;
    }

    div#headerwrapper #header a:after {
        content: 'Dashboard';
        Height: 50px;
        top: 116px;
        position: absolute;
        background: #728A41;
        width: 100%;
        left: 0;
        color: #fff;
        font-family: 'Open sans', sans-serif;
        font-size: 18px;
        padding: 11px 15px;
        box-sizing: border-box;
        text-align: center;
        transition: all 0.2s ease-out;
        text-decoration: none;
        pointer-events: all;
        cursor: pointer;
    }

    div#headerwrapper #header a:hover:after {
        background: #84A63E;
    }

    div#headerwrapper #header a:after {
        content: 'Dashboard';
        Height: 50px;
        top: 116px;
        position: absolute;
        background: #728A41;
        width: 100%;
        left: 0;
        color: #fff;
        font-family: 'Open sans', sans-serif;
        font-size: 18px;
        padding: 3px 15px;
        box-sizing: border-box;
        text-align: center;
        transition: all 0.2s ease-out;
        text-decoration: none;
        pointer-events: all;
        cursor: pointer;
    }

    div#headerwrapper #header a {
        background: inherit;
        margin: 0;
        right: 0;
        height: 100%;
        width: 100%;
    }

    div#headerwrapper #header a:before {
        width: 0;
        position: absolute;
        left: 0px;
        border-style: solid;
        z-index: 10;
        top: 0;
        content: 'Done';
        color: #fff;
        border: 0;
        border-left: 3px solid #F2F0EC;
        box-sizing: border-box;
        background-color: inherit;
        height: 100%;
        display: block;
        width: 100%;
        font-size: 15px;
        padding: 8px 15px;
        box-sizing: border-box;
    }





    /* Move header */

    div#headerwrapper {
        width: 100%;
        height: 100%;
        left: 0;
        position: absolute;
        overflow: hidden;
        background: none;
        right: 0;
        max-width: 1000px;
        margin: 0 auto;
        border: 0;
        z-index: 1000;
        pointer-events: none;
    }

    div#headerwrapper #header {
        width: 150px;
        margin: 0;
        height: 100%;
        background: none;
        margin-top: 0px;
        padding: 0;
    }



div#headerwrapper #header nav #menu {
    background: none;
    margin: 0;
    width: 144px;
    display: none;
}

div#headerwrapper #header nav #menu ul {
    font-size: 0;
    line-height: 0;
    padding: 0;
    display: block;
}

div#headerwrapper #header nav #menu ul li {
    display: block;
    width: 100%;
    height: 110px;
    left: 0;
    margin-left: 0;
    font-size: initial;
    padding: 0px;
    line-height: initial;
    margin-bottom: 6px;
}

#headerwrapper #header nav #menu a {
    width: 100%;
    height: 100%;
    background: #a1b10b;
    display: block;
    text-align: center;
    font-weight: normal;
    font-size: 18px;
    line-height: 180px;
}

#headerwrapper #header nav #menu ul li:nth-child(2) a {
    background: #48A8CA;
}

#headerwrapper #header nav #menu ul li:nth-child(3) a {
    background: #C65656;
}

#headerwrapper #header nav #menu ul li:nth-child(4) a {
    background: #7671DD;
}

#headerwrapper #header nav #menu ul li:nth-child(5) a {
    background: #728A41;
}

#headerwrapper #header nav #menu a:hover {
    color: #fff;
}

@media screen and (max-width: 999px) {
   div#headerwrapper {
       left: 0;
   }
}











/* Buttons */

.formtastic button.affirmative:focus,
.formtastic button.affirmative:hover,
.formtastic button.green:focus,
.formtastic button.green:hover,
a.button.affirmative:focus,
a.button.affirmative:hover,
a.button.green:focus,
a.button.green:hover,
button.affirmative:focus,
button.affirmative:hover,
button.green:focus,
button.green:hover,
button.ui-state-default.affirmative:focus,
button.ui-state-default.affirmative:hover,
button.ui-state-default.green:focus,
button.ui-state-default.green:hover,
input.button.affirmative:focus,
input.button.affirmative:hover,
input.button.green:focus,
input.button.green:hover,
label.button.affirmative:focus,
label.button.affirmative:hover,
label.button.green:focus,
label.button.green:hover {
    background: #B0C205;
    filter: none;
   border: 0;
}

.formtastic button,
a.button, button,
button.ui-state-default,
input.button,
label.button,
.ui-widget button {
    border-radius: 0;
    border: 0;
    padding: 6px 15px;
    font-weight: 300 !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 16px;
    height: auto;
    outline: 0;
    text-align: center;
    filter: none;
}

.formtastic button.affirmative,
.formtastic button.green,
a.button.affirmative,
a.button.green,
button.affirmative,
button.green,
button.ui-state-default.affirmative,
button.ui-state-default.green,
input.button.affirmative,
input.button.green,
label.button.affirmative,
label.button.green {
    background: #a1b10b;
    filter: none;
    border: 0;
}

.formtastic button.negative:focus,
.formtastic button.negative:hover,
.formtastic button.red:focus,
.formtastic button.red:hover,
a.button.negative:focus,
a.button.negative:hover,
a.button.red:focus,
a.button.red:hover,
button.negative:focus,
button.negative:hover,
button.red:focus,
button.red:hover,
button.ui-state-default.negative:focus,
button.ui-state-default.negative:hover,
button.ui-state-default.red:focus,
button.ui-state-default.red:hover,
input.button.negative:focus,
input.button.negative:hover,
input.button.red:focus,
input.button.red:hover,
label.button.negative:focus,
label.button.negative:hover,
label.button.red:focus,
label.button.red:hover,
.gradient-button.negative:hover
 {
    background: #51b6da;
    border: none;
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
    filter: none;
}


button.negative,
button.red,
a.button.negative,
a.button.red,
input.button.negative,
input.button.red,
label.button.negative,
label.button.red,
button.ui-state-default.negative,
button.ui-state-default.red,
.formtastic button.negative,
.formtastic button.red {
    filter: none;
  font-weight: 300;
  font-family: 'Open Sans', sans-serif;
  border: 0;

  background: #48a8ca;
}

a.button.disabled,
a.button.disabled:hover,
input.button.disabled,
label.button.disabled,
button.ui-state-default.disabled,
.formtastic button.disabled,
.formtastic button.disabled:focus,
.formtastic button.disabled:hover,
.formtastic button.green.disabled:focus,
.formtastic button.green.disabled:hover,
a.button.affirmative.disabled:focus,
a.button.affirmative.disabled:hover,
a.button.green.disabled:focus,
a.button.green.disabled:hover,
button.affirmative.disabled:focus,
button.affirmative.disabled:hover,
button.green.disabled:focus,
button.green.disabled:hover,
button.ui-state-default.affirmative.disabled:focus,
button.ui-state-default.affirmative.disabled:hover,
button.ui-state-default.green.disabled:focus,
button.ui-state-default.green.disabled:hover,
input.button.affirmative.disabled:focus,
input.button.affirmative.disabled:hover,
input.button.green.disabled:focus,
input.button.green.disabled:hover,
label.button.affirmative.disabled:focus,
label.button.affirmative.disabled:hover,
label.button.green.disabled:focus,
label.button.green.disabled:hover{
    background: #ccc;
    filter: none;
    text-shadow: 0px 0px 3px #eee;
    color: rgba(255, 255, 255, 0.4) !important; /* Sorry about the important, but someone else started it */
}

.formtastic li.commit.button {
    padding: 0;
    filter: none;
}







/* 2-column pages */

.equal_columns {
    width: 100%;
    left: 0;
    margin-left: 0;
    position: relative;
    margin-bottom: 12px;
}

.equal_columns .column {
    width: calc(50% - 3px);
}


#page #content .side_by_side_panels .panel {
    margin-right: 3px;
}

.equal_columns .column {
    margin-right: 3px;
}






/* School search */

#similar_schools .similar_school {
    border: 0;
    background: #e8e8e8;
    border-radius: 0;
    border-bottom: 1px solid #c65656;
}

.similar_school .name {
    color: #c65656;
}

#similar_schools .similar_school .address {
    font-size: 14px;
    overflow: hidden;
}

#similar_schools .similar_school .teachers {
    font-size: 14px;
    overflow: hidden;
}








/* Tabs */

.teacher_tabbed_panel .tabs {
    margin: 0;
}

.teacher_tabbed_panel .tab {
    border-radius: 0;
    height: 47px;
    width: calc(30% - 3px);
    top: 0;
    border: 0;
    max-width: 130px;
    box-sizing: border-box;
    text-align: center;
    background: #e8e8e8;
    margin: 0 3px 0 0;
    padding: 2px 10px;
}

.teacher_tabbed_panel {
    height: 50px;
    padding: 0;
}

.teacher_tabbed_panel .active_tab, .teacher_tabbed_panel .active_tab:hover {
    margin: 0 3px 0 0;
    border: 0;
    background: #fff;
    height: 50px;
}

.teacher_tabbed_panel .tab:hover {
    top: 0;
    background: #fff;
    height: 47px;
}

.teacher_tabbed_panel .active_tab.tab:hover {
    height: 50px;
    cursor: default;
}

.teacher_tabbed_panel .tab {
    max-width: 160px;
    padding: 10px 5px;
}




/* Forms */

form textarea {
  font-family: 'Open Sans', sans-serif;
}





/* Reports - fix width */

div#report-container {
    min-width: 800px;
}

#report_table #report_table_data_container {
    width: auto;
}

#report_filters {
    font-size: 14px;
}


div#report_table div#report_table_data_container {
width: calc(100% - 200px);
overflow-x: auto;
}






/* Footer */

div#footer {
    background-color: #4E4942;
    color: #ffffff;
    position: fixed;
    bottom: 0;
    width: 100%;
    margin: 0;
    z-index: 1000;
    height: auto;
    padding: 5px 0;
    display: none;
}

div#flashes, div.flashes {
    margin: 0px 0 0px 0;
    width: 100%;
    padding: 0;
}





/* School page tables */


.stats_boxes .stats_box, #billing_details_box.stats_boxes .stats_box {
    background: #e8e8e8;
    border-radius: 0;
    margin-right: 6px;
    margin-left: 0;
    border-bottom: 2px solid #c56565;
    padding: 10px;
    height: auto;
    box-sizing: border-box;
}

.stats_boxes .stats_box .value, #billing_details .stats_boxes .stats_box .value {
    color: #c56565;
    font-size: 32px;
    font-weight: 300;
}

table.info {
    border-spacing: 3px 6px;
}

table.info tr td {
    border-radius: 0;
    background: none;
}

table.info tr td h4 {
    color: #c56565;
    font-weight: 300;
}


#school_code_information .box {
    background: none;
}

#school_code_information .box p.bold {
    font-weight: 300;
    font-size: 14px;
    color: #444;
}

table.info tr.even, table.info tr:nth-child(odd) {
    background: none;
}


strong,
b {
font-weight: 700;
}

.ui-widget .ui-button-text {
    font-weight: 300;
}

.formtastic .buttons .button, .formtastic .buttons .action, .formtastic .actions .button, .formtastic .actions .action {
    box-sizing: border-box;
    height: auto;
    filter: none;
}

.formtastic .actions .button {
    padding: 8px 15px;
}

form .field label, form .field fieldset > legend > label, form .field .label, form .input label, form .input fieldset > legend > label, form .input .label, .formtastic .field label, .formtastic .field fieldset > legend > label, .formtastic .field .label, .formtastic .input label, .formtastic .input fieldset > legend > label, .formtastic .input .label {
    width: auto;
    min-width: 270px;
    line-height: 26px;
}

.gradient-button, .gradient-buttons a, a.gradient-button, form input.gradient-button {
    filter: none;
    border-radius: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    padding: 8px 15px;
    font-size: 16px;
    cursor: pointer;

}

.gradient-button.negative, .gradient-buttons a.negative, a.gradient-button.negative, form input.gradient-button.negative {
    background: #c65656;
    border: 0;
    filter: none;
}

.gradient-button.affirmative, .gradient-buttons a.affirmative, a.gradient-button.affirmative, form input.gradient-button.affirmative {
    background: #a1b10b;
    border: 0;
    filter: none;
}

.gradient-button.affirmative:not(.disabled):hover,
.gradient-buttons a.affirmative:not(.disabled):hover,
a.gradient-button.affirmative:not(.disabled):hover,
form input.gradient-button.affirmative:not(.disabled):hover {
    background: #B0C205;
    border: 0;
    filter: none;
}

#edit_login_settings_page a.gradient-button.negative {
    cursor: pointer;
    filter: none;
}



#reward_challenges .stats_boxes .stats_box {
    width: calc(33% - 6px);
    border-left: 0;
    border-right: 0;
    border-top: 0;
    display: table-cell;
    height: 100%;
    min-height: 298px;
}

#reward_challenges .stats_boxes {
    width: 100%;
    margin: 10px 0;
    display: table;
    table-layout: fixed;
}

.stats_box h3 {
    margin: 10px 0;
    width: 80%;
}

#lesson_page #lesson_overview .stats_boxes .stats_box {
    display: table-cell;
    min-height: 110px;
    box-sizing: border-box;
}

#lesson_page #lesson_overview .stats_boxes {
    display: table;
    table-layout: fixed;
}

.lesson_event_feed .event_item {
    height: auto;
}




.cancel_button {
    float: none;
    display: inline;
    margin-right: 6px;
}

button, a.button, input.button, label.button, button.ui-state-default, form.formtastic button.button {
    float: none;
    display: inline-block;
    padding: 6px 20px;
    font-size: 15px;
}

button.negative:hover, button.negative:focus, button.red:hover, button.red:focus, a.button.negative:hover, a.button.negative:focus, a.button.red:hover, a.button.red:focus, input.button.negative:hover, input.button.negative:focus, input.button.red:hover, input.button.red:focus, label.button.negative:hover, label.button.negative:focus, label.button.red:hover, label.button.red:focus, button.ui-state-default.negative:hover, button.ui-state-default.negative:focus, button.ui-state-default.red:hover, button.ui-state-default.red:focus, .formtastic button.negative:hover, .formtastic button.negative:focus, .formtastic button.red:hover, .formtastic button.red:focus {
    background: #51b6da;
    filter: none;
}

#student_list .callout {
padding-top: 5px;
margin-top: 20px;
}







.dialog form .input label, .dialog form .label {
    min-width: 0;
    min-width: initial;
}

div#selection_toggle {
font-size: 14px;
top: 0;
}





/* Family page */

body div#page #content .panel.wikipanel1,
body div#page #content .panel.wikipanel2,
body div#page #content .panel.wikipanel3 {
    margin-right: 6px;
    display: inline-block;
    float: none;
}

#family_details .stats_boxes .stats_box {
    width: 170px;
    overflow: hidden;
}

#flashes .notice, .flashes .notice {
    border: 0 none;
    padding: 10px 20px;
    font-size: 18px;
    color: #A1B10B;
    background: rgba(255,255,255, 0.1);
    border-bottom: 1px solid #a1b10b;
    margin-bottom: 6px;
}




/* Subscription quote info table */

#teacher_subscription_quotes table.info td {
text-align: right;
}

/* Subscription panel */
#subscription_info .panel {
  min-height: 260px;
}


/* Create activity font weight */

form .info span {
    font-weight: 400;
}



/* Upload students button fix */

.file_button label {
    width: auto;
    height: initial;
    line-height: normal;
}

/*

input#csv_file_chooser:before {
    content: 'Upload file';
    background: #48a8ca;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
padding: 8px 15px;
cursor: pointer;
font-size: 15px;
text-align: center;
margin: 0;
transition: all 0.2s ease-out;

    border: 0 none;



}

input#csv_file_chooser:hover:before {
    background: #51b6da;
}

input#csv_file_chooser {
    opacity: 1;
    position: relative;
    border: none;
}

.file_button label.button.affirmative:hover {
    border: 0 none;
}


/* Needs IE10 pointer-events fix */

*/

/* Live class tooltips */

#lesson_status table .user_status .tooltip {
    z-index: 100;
}


/* Student reports box height */

#reward_challenges .stats_boxes .stats_box {
    min-height: 298px;
}


/* Login settings page form boxes */

#edit_login_settings_page form.formtastic.organisation .input label, form.formtastic.organisation div.field label {
    width: 300px;
    margin-right: 10px;

}

#edit_login_settings_page .formtastic fieldset.choices .label {
    margin: 0;
}


#edit_login_settings_page .formtastic fieldset.choices .choices-group {
    width: 330px;
}

#edit_login_settings_page form .field .info,
#edit_login_settings_page form .input .info,
#edit_login_settings_page .formtastic .field .info,
#edit_login_settings_page .formtastic .input .info {
    width: 340px;
}


/* Add student input boxes */

li#user_first_name_input label,
li#user_last_name_input label {
    min-width: 100px;
}



/* Contest button */

table.contests-table .button, table.contests-entries-table .button {
    padding: 6px 15px;
}



/* Add child form */


    #add_child form .fragments-group {
        display: inline-block;
        width: calc(70% - 40px);
        padding: 0;
        margin-left: 10px;
    }


    #add_child form #student_date_of_birth_input {
        width: calc(100% - 20px);
    }

    #add_child .actions > ol > li {
        margin: 0;
        padding: 0;
        height: 100%;
    }

    #add_child .actions input {
        margin: 0;
        background: #48a8ca;
        border-left: 3px solid #f2f0ec;
        height: 100%;
    }


/* Deleted cover hack hack */

.deleted-cover {
    margin-top: 0px;
}


#class_list .deleted-cover {
    margin-top: 0px;
}



/* Consistent fonts on forms */

form .field input, form .field textarea, form .input input, form .input textarea, .formtastic .field input, .formtastic .field textarea, .formtastic .input input, .formtastic .input textarea {
    font-family: 'Open Sans', sans-serif;
}



/* Focus skills overflow */

li.topic {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



/* Hide profile filter on IE9 */

.facts th, .facts td {
    filter: none;
}


/* Restyle Family Details */

.panel.family:after {
    position: relative;
    right: 0;
    width: 100%;
    text-align: right;
    pointer-events: none;
}

.edit_details, .subscribe {
    margin: 10px 20px 0  0;
    display: inline-block;
}



/* checkbox text alignment */

.info input[type=checkbox] ~ span {
    padding-left: 40px;
    display: inline-block;
}

input#give_reward {
    float: none;
    position: absolute;
}

label.small_label {}


/* Contact form restyle */

div#contact_form {
    width: 100%;
}

#headerwrapper #header #sumdog_peek {
    display: none;
}


/* Parent subscription pages restyle */

hr {
    display: none;
}

.student_body div#contentinner {
    background: #fff;
    padding: 20px;
    margin-bottom: 40px;
}

div#billing_details {
    padding-bottom: 1px;
}

#billing_details .stats_boxes {
    padding: 0;
}

#billing_details_box.stats_boxes .stats_box {
    width: auto;
}

#billing_details #add_children, #billing_details #remove_children {
    margin: 10px 0;
}

#headerwrapper #header img#sumdog-logo {
    display: none;
}

.parent_panel_inner {
    padding: 10px 20px 10px 20px;
}

div#content-header {
    background: none;
}

div#content-footer {
    display: none;
}

.parent_panel {
    padding: 20px;
    font-size: 18px;
    /* border-bottom: 1px solid #c65656; */
}


/* Animal rank page */

.student_body div#nav_links, div#nav_avatar, div#nav_logout {
    display: none;
}

.student_body div#studentnav {
    width: 144px;
    height: 100px;
    left: 0;
    position: absolute;

    background-color: #4E4942;
    background-image: url(http://assets1.sumdog.com/assets/hangout-ui/images/sumdog-logo-75c6863f9482d3187d6dadbd05719e26.png);
    background-repeat: no-repeat;
    background-position: center center;
    height: 110px;
    text-align: center;
    padding: 30px 0;
    box-sizing: border-box;
    margin-bottom: 6px;
    display: block;
    text-decoration: none;

}

.student_body div#studentnav a {
content: 'Dashboard';
height: 54px;
line-height: 54px;
top: 116px;
position: absolute;
background: #728A41;
width: 100%;
left: 0;
color: #FFF;
font-family: 'Open sans',sans-serif;
font-size: 18px;
padding: 0;
box-sizing: border-box;
text-align: center;
transition: all .2s ease-out;
text-decoration: none;
pointer-events: all;
cursor: pointer;
font-weight: 300;
}

.student_body div#studentnav a:hover:after {
    background: #84A63E;
}

.student_body div#studentnav a:after {
    /* content: 'Dashboard'; */
    Height: 50px;
    top: 116px;
    position: absolute;
    background: #728A41;
    width: 100%;
    left: 0;
    color: #fff;
    font-family: 'Open sans', sans-serif;
    font-size: 18px;
    padding: 11px 15px;
    box-sizing: border-box;
    text-align: center;
    transition: all 0.2s ease-out;
    text-decoration: none;
    pointer-events: all;
    cursor: pointer;
    font-weight: 300;
}







.student_body .rounded_tile .image {
    background: none;
    border: none;
    box-shadow: none;
    float: none;
    display: inline-block;
    /* border: 1px solid; */
    border-radius: 0;
    vertical-align: top;
}

.student_body .rounded_tile {
    background: #e8e8e8;
    border-radius: 0;
    border-bottom: 1px solid #48a8ca;
    box-shadow: none;
    filter: none;
    -ms-filter: none;
    margin: 0  0 6px 0;
    height: auto;
}

.student_body .rounded_tile .right {
    font-family: 'Open sans', sans-serif;
    color: #222;
    width: auto;
    height: auto;
}

.student_body #student_ranks .rounded_tile .title {
    font-size: 28px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    color: #48a8ca;
}

.student_body .poster .top {
    background: none;
    color: #48a8ca;
}

.student_body .poster .top h2 {
    color: #fff;
    font-family: 'Open sans', sans-serif;
    font-weight: 300;
}

.student_body .poster .top h1 {
    font-weight: 300;
}

body.student_body {
    background: #f2f0ec;
}

body.student_body div#page {
    max-width: 1000px;
    position: relative;
    margin: 0 auto;
    padding-top: 10px;
}

.student_body div#header {
    height: 0;
    width: 0;
}

.student_body .rounded_tile .right {
    display: inline-block;
    float: none;
    height: auto;
    margin-bottom: 10px;
}

.student_body .rounded_tile h2, .student_body .rounded_tile h3 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    color: #444;
}

.student_body #student_ranks .rounded_tile .bold_value {
    font-family: 'Open sans', sans-serif;
    font-weight: 400;
    color: #666;
}

.student_body .middle {
    background: none;
}

.student_body div#footer a {
    color: #ffffcc;
    font-family: 'Open sans', sans-serif;
}

.student_body .poster .bottom {
    display: none;
}

button.orange:hover,
#back_button a:hover, #back_button1 a:hover, button.orange:focus, #back_button a:focus, #back_button1 a:focus, a.button.orange:hover, a.button.orange:focus, input.button.orange:hover, input.button.orange:focus, label.button.orange:hover, label.button.orange:focus, button.ui-state-default.orange:hover, #back_button a.ui-state-default:hover, #back_button1 a.ui-state-default:hover, button.ui-state-default.orange:focus, #back_button a.ui-state-default:focus, #back_button1 a.ui-state-default:focus, .formtastic button.orange:hover, .formtastic #back_button a:hover, #back_button .formtastic a:hover, .formtastic #back_button1 a:hover, #back_button1 .formtastic a:hover, .formtastic button.orange:focus, .formtastic #back_button a:focus, #back_button .formtastic a:focus, .formtastic #back_button1 a:focus, #back_button1 .formtastic a:focus {
    background: #B0C205;
    filter: none;
    text-shadow: none;
}

button.orange, #back_button a, #back_button1 a, a.button.orange, input.button.orange, label.button.orange, button.ui-state-default.orange, #back_button a.ui-state-default, #back_button1 a.ui-state-default, .formtastic button.orange, .formtastic #back_button a, #back_button .formtastic a, .formtastic #back_button1 a, #back_button1 .formtastic a {
    background: #a1b10b;
    filter: none;
    border: 0 none;
}

ul#problems {
  color: #D00000;
}

#back_button a, #back_button1 a {
    margin: 0;
    float: none;
}

.student_body div#back_button {
    padding: 0 30px;
    width: 100%;
    box-sizing: border-box;
}





.student_body .rounded_tile:nth-child(8n+0) {
    border-bottom-color: #c65656
  }

.student_body .rounded_tile:nth-child(8n+1) {
    border-bottom-color: #728a41
  }

  .student_body .rounded_tile:nth-child(8n+2) {
    border-bottom-color:  #48a8ca
  }

  .student_body .rounded_tile:nth-child(8n+3) {
    border-bottom-color:  #a1b10b
  }

  .student_body .rounded_tile:nth-child(8n+4) {
    border-bottom-color:  #7671dd
  }

  .student_body .rounded_tile:nth-child(8n+5) {
    border-bottom-color:  #d47b1d
  }

  .student_body .rounded_tile:nth-child(8n+6) {
    border-bottom-color:  #a85d9b
  }

 .student_body .rounded_tile:nth-child(8n+7) {
    border-bottom-color:  #d39b00
  }



.student_body #student_ranks .rounded_tile:nth-child(8n+0) h2 {
   color: #c65656
  }

.student_body #student_ranks .rounded_tile:nth-child(8n+1) h2 {
    color: #728a41
  }

.student_body #student_ranks .rounded_tile:nth-child(8n+2) h2 {
    color:  #48a8ca
  }

.student_body #student_ranks .rounded_tile:nth-child(8n+3) h2 {
    color:  #a1b10b
  }

.student_body #student_ranks .rounded_tile:nth-child(8n+4) h2 {
    color:  #7671dd
  }

.student_body #student_ranks .rounded_tile:nth-child(8n+5) h2 {
    color:  #d47b1d
  }

.student_body #student_ranks .rounded_tile:nth-child(8n+6) h2 {
    color:  #a85d9b
  }

 .student_body #student_ranks .rounded_tile:nth-child(8n+7) h2 {
    color:  #d39b00
  }




.student_body #student_ranks .rounded_tile:nth-child(8n+0) .rank {
   color: #c65656
  }

.student_body #student_ranks .rounded_tile:nth-child(8n+1) .rank {
    color: #728a41
  }

.student_body #student_ranks .rounded_tile:nth-child(8n+2) .rank {
    color:  #48a8ca
  }

.student_body #student_ranks .rounded_tile:nth-child(8n+3) .rank {
    color:  #a1b10b
  }

.student_body #student_ranks .rounded_tile:nth-child(8n+4) .rank {
    color:  #7671dd
  }

.student_body #student_ranks .rounded_tile:nth-child(8n+5) .rank {
    color:  #d47b1d
  }

.student_body #student_ranks .rounded_tile:nth-child(8n+6) .rank {
    color:  #a85d9b
  }

.student_body #student_ranks .rounded_tile:nth-child(8n+7) .rank {
    color:  #d39b00
  }

.student_body .title_rank {
    margin-bottom: 15px;
}

.student_body .rounded_tile .wikipedia {
    display: block;
    position: relative;
    margin: 5px 0 0;
}

.student_body .poster {
    width: 100%;
}

div#contentinner {
    background: #fff;
    width: auto;
    padding: 20px;
    pointer-events: all;
}

div#contentarea {
    width: 100%;
    box-sizing: border-box;
}

#messages_poster h2 {
    font-size: 24px;
    font-weight: 300;
}

#messages_poster .red_button {
    background: #aaa;
    font-family: 'Open sans', sans-serif;
    color: #fff;
    padding: 10px;
    margin: 0;
    width: calc(50% - 3px);
    box-sizing: border-box;
    height: auto;
    font-weight: 300;
    font-size: 19px;
}

#messages_poster #messages {
    margin-top: 0;
    border-top: 6px solid #E8E8E8;
    padding-top: 3px;
}

#messages_poster .rounded_tile {
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

#messages_poster #message_type_choice {
    text-align: left;
    box-sizing: border-box;
}

#messages_poster .red_button.selected {
    background: #e8e8e8;
    color: #d47b1d;
    pointer-events: none;
    border-bottom: 3px solid #e8e8e8
}

#messages_poster .rounded_tile .right {
    height: auto;
}



/* Parent subsctription */

.parent_panel {
    box-sizing: border-box;
}

.parent_panel {
    box-sizing: border-box;
}

.parent_panel_2_columns .parent_panel {
    padding: 0;
    margin-top: 10px;
    width: calc(50% - 20px);
    margin-right: 20px;
}

.parent_panel h2 {
    margin: 0 0 10px 0;
}

.ui-dialog {
    z-index: 1000;
}

/* Shop fixes */

div#shop_advert,
div#merchandise_advert {
    display: none;
}

div#side_nav {
    float: none;
    display: inline-block;
}

div#category_items {
    float: none;
    display: inline-block;
    vertical-align: top;
}

#exit_shop a {
    position: absolute;
}

div#shop_info {
    float: none;
    display: inline-block;
    vertical-align: top;
}

div#top_nav {
    padding-top: 60px;
}





#billing_details div#sumdog_family {
    text-align: right;
    float: none;
    width: 100%;
    margin-right: 0;
    background-position: right center;
}


#parent_order_form #terms_and_conditions {
    width: 20%;
    display: inline-block;
    float: none;
}

#parent_order_form #terms_and_conditions_label {
    width: 70%;
    display: inline-block;
    float: none;
    vertical-align: middle;
}

#parent_order_form label, #parent_order_form p {
    font-size: 14px;
}


#parent_order_form #submit_button_wrapper {
    height: auto;
}

#parent_order_form #place_order_button {
    float: none;
}

.ui-widget-overlay {
z-index: 1000;
}



/* Friends page restyle */


#friends_home .top {
    width: 100%;
    background: none;
}

#friends_home .middle {
    background: none;
    width: calc(45%);
    display: inline-block;
    vertical-align: top;
}

#friends_home .friends_content {
    background: #fff;
    padding: 20px;
}


#friends_home {
    margin: -30px;
    background: #252525;
    position: relative;
    overflow: hidden;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #222;
}

#friends_home #add_friends {
    width: 100%;
}

#friends_home h1 {
    color: #48a8ca;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 32px;
}

#friends_home form #add_friend_button {
float: none;
margin-left: 10px;
display: inline-block;
margin-left: -80px;
margin-top: 10px;
}


#friends_home #friend_requests {
    width: 100%;
    margin-top: 3px;
}

#friends_home h2 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    color: #222;
    font-size: 16px;
}

#friends_home .bottom,
#friends_home #friend_of_sumdog {
    display: none;
}

#friends_home #your_friends_bottom,
#friends_home #your_friends_middle,
#friends_home #your_friends_top {
    width: 100%;
}

#friends_home #your_friends_tile {
    float: none;
    width: calc(45% - 6px);
    display: inline-block;
}

#friends_home .friend_tile .friend_name {
    width: calc(100% - 90px);
    float: none;
    display: inline-block;
    margin-left: 10px;
    margin-top: 0px;
}

.friend_tile .avatar_wrapper {
    float: none;
    display: inline-block;
}


#friends_home form .field input {
    min-width: 0;
    width: calc(100% - 110px);
}


#friends_home .friend_tile, 
#friends_home .friend_tile.last {
    border: none;
    padding: 10px 10px 20px 10px;
    background: #f2f0ec;
}


#friends_home form .field input {
    border-radius: 0;
    box-shadow: none;
    background: #e8e8e8;
    border: 0 none;
    height: 22px;
}

#friends_home .friend_tile .friend_stats .title,
#friends_home .friend_tile .friend_stats .title ~ span {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #48a8ca;
    display: none;
}


#friends_home .friend_tile .friend_stats .title ~ span {
    color: #222;
    display: inline-block;
}

#friends_home .friend_name h2.title {
    font-size: 24px;
    color: #48a8ca;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#friends_home .friend_points span.title ~ span:after {
    content: ' coins';
}


#friends_home .friend_tile .avatar_wrapper object {
    margin: 10px 0;
}

#friends_home #friend_request .friend_name {
    width: 150px;
}

#friends_home #friend_request .friend_actions {
    float: none;
    margin-top: 6px;
    position: relative;
    display: inline-block;
}

#friends_home #friend_request .friends-button {
    width: 100%;
    margin-bottom: 3px;
    text-align: center;
    width: auto;
    display: inline-block;
}

#friends_home .friend_tile {
    background: #e8e8e8;
    border-width: 0 0 1px 0;
    border-color: #48a8ca;
    border-style: solid;
    margin-bottom: 3px;
    padding: 5px 10px;
    margin-left: -10px;
    width: calc(100%);
}

#friends_home .friend_tile.last {
    border-bottom: 1px solid #48a8ca;
}

#friends_home .friend_tile .friend_stats {
    float: none;
    width: calc(100% - 90px);
    margin-left: 90px;
    margin-top: 12px;
}

#friends_home .friend_tile .friend_actions {
    float: none;
    width: calc(100% - 90px);
    margin-left: 90px;
    margin-top: 6px;
}


a {
    font-family: 'Open Sans', sans-serif;
    font-weight: inherit;
}


#friends_home #add_friends .hint {
    margin: 0 10px;
}


.student_body div#studentnav a:hover {
    background-color: #84A63A;
}


/* 150622 another adult restyle (definitely need to tidy this up) */

div#contentwrapper {
    top: 67px;
    left: 0;
    right: 0;
    position: absolute;
    max-width: 1000px;
    margin: auto;
    overflow-y: auto;
    overflow-x: auto;
    bottom: 50px;
    height: auto;
    top: 67px;
}

    /* Make heading into top bar */

    h1, 
    h2#page-title,
    .panel_content h2.first_title,
    .panel_content ~ h2 {
        position: fixed;
        top: 10px;
        background-color: #48a8ca;
        left: 0;
        right: 0;
        max-width:  1000px;
        width: 100%;
        color: #fff;
        font-weight: 300;
        padding: 10px 90px 10px 20px;
        height: 54px;
        margin: 0 auto;
        font-size: 24px;
        box-sizing: border-box;
        text-overflow: ellipsis;
        font-family: 'Open sans', sans-serif;
        overflow: hidden;
        white-space: nowrap;
        z-index: 100;
        clear: both;
    }

    /* Add small Sumdog logo on RHS of heading */

    #page-title:before, 
    .panel_content h2.first_title:before, 
    .panel_content~h2:before, 
    h1:before {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        background-image: url(http://assets0.sumdog.com/assets/homepage/sumdogLogo-cdc3e5704f8bb963f10cd6e381ea06fd.png);
        width: 70px;
        height: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin-right: 20px;
    }

body div#page #content {
    padding: 0;
    margin: 0;
    max-width: none;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

html body {
    overflow: hidden;
    background: #f2f0ec;
}

body div#page {
    min-width: 0;
    background: none;

}

div#headerwrapper {
    bottom: 10px;
    position: absolute;
    top: initial;
    height: 37px;
    width: 100%;
    margin: auto;
    background-color: #48a8ca;
    padding: 0;
}

div#headerwrapper #header {
    width: auto;
    right: 0;
    left: initial;
    position: absolute;
    top: 0;
    min-width: 100px;
    line-height: normal;
}

body div#page #content .panel {
    margin-bottom: 0;
    border-top: 3px solid #f2f0ec;
}

div#buttons {
    position: fixed;
    bottom: 0px;
    z-index: 80;
    left: 0;
    right: 0;
    max-width: 1000px;
    text-align: right;
    margin: auto;
    font-size: 0;
}

div#headerwrapper {
    z-index: 0;
    height: 36px;
}

#buttons a.button {
    background-color: #48a8ca;
    padding: 8px 15px;
    border-left: 3px solid #f2f0ec;
    text-align: center;
    margin-left: 0;
    margin-right: 0;
}





body div#page #content .panel:first-of-type {
    border-top: 0;
}

table {
    border-collapse: separate;
    border-spacing: 2px;
}

th {
    background: #B9B6B0;
    color: #fff;
    font-weight: 400;
    font-size: 1em;
    border: none;
}

td,th {
    border: none;
    font-size: 1em;
    padding: 8px 15px;
    font-weight: 400;
    vertical-align: top;
}

td {
    background-color: #e9e6e0;
}

tr:nth-of-type(2n+1) td {
    background-color: #f2f2ec;
}

h2, h3 {
    font-weight: 300;
    font-size: 32px;
}



.teacher_tabbed_panel {
    background-color: #f2f0ec;
}

.teacher_tabbed_panel .tab {
    background-color: #e3e0d9;
    height: 47px;
    font-weight: 400;
    padding-top: 14px;
    width: calc(20% - 3px);
    min-width: 0;
    max-width: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    top: 3px;
    transition: all 0.2s ease-out;
}

body div#page #content .teacher_tabbed_panel ~ .panel {
    border-top: none;
}

body div#page #content .panel ~ .teacher_tabbed_panel {
    border-top: 20px solid #f2f0ec;
}

.teacher_tabbed_panel .tab.active_tab {
    background-color: #fff;
    height: 50px;
    top: 0;
}

div#reward_challenge_500 {}

#billing_details_box.stats_boxes .stats_box, .stats_boxes .stats_box {
    background-color: #f2f0ec;
    border: 0;
    color: #444;
}

#student_details_panel table.student_details th {
    font-weight: 300;
}

#student_details_panel table.student_details td, #student_details_panel table.student_details th {
    color: #444;
    padding: 5px 10px;
    font-size: 16px;
}

#student_details_panel table.student_details td {
    font-weight: 400;
}

#student_details_panel {
    height: auto;
}

body div#page #content .panel .panel_content {
    font-weight: 400;
    color: #444;
}

#student_details_panel table.student_details {
}

.stats_boxes .stats_box table td, .stats_boxes .stats_box table th {
    font-size: 16px;
    font-weight: 400;
    color: #444;
}

#reward_challenges .stats_boxes .stats_box table td {
    font-weight: 600;
}

#reward_challenges .stats_boxes .stats_box table th {
    font-weight: 300;
}

.teacher_tabbed_panel .tab:hover {
    height: 50px;
    top: 0;
}

tr.odd td {
    background-color: #e9e6e0;
}

#student_list table td {
    font-size: 14px;
}

#student_list table {
    width: 100%;
    height: 100%;
    display: table;
    position: relative;
}


/* Student list */

    #students_index h1 ~ p {
        background-color: #f2f0ec;
        padding: 20px 20px 20px 60px;
        position: relative;
        margin-bottom: 30px;
        }

    #students_index h1 ~ p:before {
      background-color: #A1B10B;
      content: "!";
      position: absolute;
      left: 10px;
      top: 10px;
      border-radius: 40px;
      width: 40px;
      height: 40px;
      text-align: center;
      font-size: 30px;
      font-weight: 600;
      color: #FFF;
      line-height: 40px;
      opacity: 0.6;
    }

    /* Class chooser and action buttons */

    #students_index h3 {
        font-size: 26px;
    }

    #students_index select#class_selector {
        border: 2px solid #E9E6E0;
        color: #444;
        display: inline-block;
        font-family: "Open Sans", sans-serif;
        font-size: 26px;
        font-weight: 300;
        margin-bottom: 3px;
        margin-right: 30px;
        outline: none;
        padding: 10px;
        transition: all 0.2s ease-out;
        -box-shadow: none;
        -webkit-box-shadow: none;
        border-radius: 0;
        height: auto;
        width: 400px;
        min-width: 0;
        max-width: 100%;
        margin-top: 0px;
        padding: 0 10px 0 0px;
        margin-left: -20px;
        color: #48a8ca;
    }


    #students_index select#class_selector option {
        font-size: 26px;
        color: #444;
    }

    #students_index .actions a.button, 
    #students_index .actions input.button {
        padding: 8px 15px;
        margin-right: 3px;
        }

    #students_index .actions a.button:hover, 
    #students_index .actions input.button:hover,
    #students_index .actions a.button:focus, 
    #students_index .actions input.button:focus {
        padding: 8px 15px;
        margin-right: 3px;
        border: 0 none;
        background-color: #b0c205;
        transition: all 0.2s ease-out;

        }

    #students_index .actions {
        float: none;
        display: inline-block;
        vertical-align: middle;
    }

    

    /* Hide row marked as removed (class added by script) */

    tr.student-removed {
      background: #fff;
    }

    tr.student-removed td {
      opacity: 0.15;
      pointer-events: none;
    }

    /* Hide existing cover for removed students */
    
    .deleted-cover {
        display: none !important;
    }


    .callout {
        background: #e9e6e0;
    }

    .callout:after {
        border-color: #e9e6e0 rgba(0, 0, 0, 0);
    }


/* Move buttons on profile to bottom */

form .actions, .formtastic .actions {
    position: fixed;
    bottom: 10px;
    max-width: 1000px;
    margin: auto;
    text-align: right;
    background: #48a8ca;
    height: 36px;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    left: 0;
    right: 0;
}

form .actions input.button, 
.formtastic .actions input.button {
    background: #48a8ca;
    border-left: 3px solid #f2f0ec;
    height: 100%;
    margin: 0;
    transition: all 0.2s ease-out;
}

form .actions input.button:hover, 
.formtastic .actions input.button:hover {
    background: #51b6da;
    border-left: 3px solid #f2f0ec;
}

/* Create activity form */

form .field, 
form .input, 
.formtastic .field, 
.formtastic .input {
    background: #f2f0ec;
    width: calc(100% - 20px);
    border-radius: 0;
    border: 0;
    padding: 10px 20px;
    margin: 0 -10px 3px -10px;
    display: block;
}

.radio_options, .formtastic fieldset > ol > li ol {
    background: none;
    border: none;
}

form .field input[type=text], 
form .field input[type=password], 
form .field input[type=number], form .field input[type=email], form .input input[type=text], form .input input[type=password], form .input input[type=number], form .input input[type=email], .formtastic .field input[type=text], .formtastic .field input[type=password], .formtastic .field input[type=number], .formtastic .field input[type=email], .formtastic .input input[type=text], .formtastic .input input[type=password], .formtastic .input input[type=number], .formtastic .input input[type=email] {
    margin: 0;
    border: 2px solid #d9d6d0;
    width: calc(70% - 40px);
}

form .field input, form .field textarea, form .input input, form .input textarea, .formtastic .field input, .formtastic .field textarea, .formtastic .input input, .formtastic .input textarea {
    border: 2px solid #d9d6d0;
    width: calc(70% - 40px);
}

form .field input[type=text].date_popup, form .input input[type=text].date_popup, .formtastic .field input[type=text].date_popup, .formtastic .input input[type=text].date_popup {
    margin-right: 10px;
}

form .field label, 
form .field fieldset > legend > label, 
form .field .label, form .input label, 
form .input fieldset > legend > label, 
form .input .label, .formtastic .field label, 
.formtastic .field fieldset > legend > label, 
.formtastic .field .label, 
.formtastic .input label, 
.formtastic .input fieldset > legend > label, 
.formtastic .input .label {
    min-width: 0;
    width: 30%;
}

form .field input[type=radio]:before, 
form .input input[type=radio]:before, 
.formtastic .field input[type=radio]:before, 
.formtastic .input input[type=radio]:before,
form .field input[type=checkbox]:before, 
form .input input[type=checkbox]:before, 
.formtastic .field input[type=checkbox]:before, 
.formtastic .input input[type=checkbox]:before,
#parent_order_form input.child:before,
#parent_order_form #terms_and_conditions:before,
#parent_order_form #payment_method_credit_card:before,
#parent_order_form #payment_method_paypal:before {
content: '';
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 30px;
height: 30px;
margin-right: 10px;
background-color: #fff;
border: 2px solid #c9c6c0;
-webkit-border-radius: 15px;
border-radius: 15px;
cursor: pointer;
font-size: 32px;
line-height: 0.8;
text-align: center;
-webkit-transition: color 0.2s ease-out;
-moz-transition: color 0.2s ease-out;
-o-transition: color 0.2s ease-out;
-ms-transition: color 0.2s ease-out;
transition: color 0.2s ease-out;
vertical-align: middle;
position: absolute;
left: 0px;
top: 0px;
margin: -10px 0 0 -10px;
}

form .field input[type=radio]:checked:before, 
form .input input[type=radio]:checked:before, 
.formtastic .field input[type=radio]:checked:before, 
.formtastic .input input[type=radio]:checked:before,
form .field input[type=checkbox]:checked:before, 
form .input input[type=checkbox]:checked:before, 
.formtastic .field input[type=checkbox]:checked:before, 
.formtastic .input input[type=checkbox]:checked:before,
#parent_order_form input.child:checked:before,
#parent_order_form #terms_and_conditions:checked:before,
#parent_order_form #payment_method_credit_card:checked:before,
#parent_order_form #payment_method_paypal:checked:before {
    content: '\2713';
    font-family: 'Sumdog';
    content: '|';
    color: #48a8ca;
    font-size: 26px;
    padding-left: 5px;
    }

#parent_order_form input.child:before,
#parent_order_form #terms_and_conditions:before,
#parent_order_form #payment_method_credit_card:before,
#parent_order_form #payment_method_paypal:before {
    position: relative;
    font-family: 'Sumdog';
}

form .field input[type=radio], 
form .input input[type=radio], 
.formtastic .field input[type=radio], 
.formtastic .input input[type=radio],
form .field input[type=checkbox], 
form .input input[type=checkbox], 
.formtastic .field input[type=checkbox], 
.formtastic .input input[type=checkbox]

 {
    position: relative;
    width: 10px;
    height: 10px;
    margin: 10px 20px 20px 10px;
    box-shadow: none;
}

form .field input[type=radio]:disabled, 
form .input input[type=radio]:disabled, 
.formtastic .field input[type=radio]:disabled, 
.formtastic .input input[type=radio]:disabled,
form .field input[type=checkbox]:disabled, 
form .input input[type=checkbox]:disabled, 
.formtastic .field input[type=checkbox]:disabled, 
.formtastic .input input[type=checkbox]:disabled {
opacity: 0.2;
}

form .field .info, 
form .input .info, 
.formtastic .field .info, 
.formtastic .input .info {
background: none;
border: none;
padding: 10px 0;
width: 60%;
border-radius: 0;
}

.formtastic .fragments .label label, 
.formtastic .choices .label label {
    position: relative;
    width: 100%;
    display: inline-block;
}

select {
    border: 2px solid #d9d6d0;
    box-shadow: none;
    font-family: inherit;
    border-radius: 0;
}

.info {
    padding: 12px 0;
}

form label, .form label {
    float: left;
    margin: 10px 10px 0 0;
}


div#headerwrapper #header a:hover {
    background-color: #51b6da;
}

/* Profile panel */

.facts {
    background: none;
    border: none;
    border-radius: 0;
}

.facts th, .facts td {
    padding: 8px 15px;
    font-weight: 300;
    font-size: 16px;
    color: #444;
    background: #f2f0ec;
    font-weight: 400;
}



#profile_panel .facts {
    width: 70%;
    max-width: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}

#profile-panel .inpageAvatar {
    width: 30%;
    height: 470px;
    display: inline-block;
    /* float: none; */
}

.facts th {
    background: #e9e6e0;
    font-weight: 300;
}


/* Student list reset password message alignment */
.password-reset:before {
    display: inline-block;
    content: '';
    width: 0;
    height: 100%;
    vertical-align: middle;
}

.password-reset {
    margin-left: 5px;
}



/* Student upload */

div#upload_box {
    position: fixed;
    bottom: 17px;
    height: 36px;
    width: 100%;
    max-width: 1000px;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0;
}


#upload_box .warning,  
#upload_box .error,  
#upload_box .notice {
background: #c65656;
display: inline-block;
width: auto;
border: 0 none;
height: 100%;
color: #fff;
position: relative;
border-left: 3px solid #f2f0ec;
max-width: none;
text-align: left;
box-sizing: border-box;
font-size: 16px;
padding: 6px 15px;
font-weight: 300;
left: 0;
}


/* Tabbed panels */

    div.tabbed_panel .panels {
        padding: 10px 30px;
        border: none;
    }

    div.tabbed_panel .tabs {
        background: #f2f0ec;
        border-bottom: 0;
        height: auto;
        font-size: 0;
        position: relative;
    }

    div.tabbed_panel .tab {
        background: #e9e6e0;
        border-radius: 0;
        width: 140px;
        height: calc(100% - 3px);
        vertical-align: bottom;
        display: inline-block;
        border: none;
        text-align: center;
        margin: 0 3px 0px 0;
        float: none;
        font-size: 16px;
        transition: all 0.2s ease-out;
        overflow: hidden;
        box-sizing: border-box;
        top: 0;
        line-height: normal;
    }

    div.tabbed_panel .tab.active_tab {
        height: calc(100% + 4px);
        background: #fff;
        cursor: default;
    }

    div.tabbed_panel .active_tab, 
    div.tabbed_panel .active_tab:hover, 
    div.tabbed_panel .tab:hover {
        border: none;
        background: #fff;
        line-height: normal;
    }

    body div#page #content .tabbed_panel .panel {
    border-top: none;
    }

    /* Remove margin on tabbed panel pages so that tabs sit at edge */

    .panel_content > div > .tabbed_panel,
    .panel_content > div.tabbed_panel {
        margin: -30px -30px 0;
    }

    /* Smaller margin on dialog boxes with tabs */

    .ui-dialog-content > div.tabbed_panel {
        margin: -20px -20px 0;
    }

div.step .step_details .bullets {
    background: #f2f0ec;
    border-radius: 0;
    padding: 20px 20px;
    font-weight: 300;
}

div.step .step_details .bullets ul li {
    font-weight: 400;
}

div#upload_box {
position: fixed;
bottom: 10px;
height: 36px;
width: 100%;
max-width: 1000px;
left: 0;
right: 0;
margin: auto;
overflow: hidden;
box-sizing: border-box;
min-height: 0;
}

#upload_box form {
    text-align: right;
    background: #48a8ca;
    margin: 0;
    height: 36px;
}

#upload_box .cancel_button, #upload_box .file_button {
    float: none;
   
    height: auto;
    width: auto;
    border-left: 3px solid #f2f0ec;
    height: 36px;
    box-sizing: border-box;
    display: inline-block;
    white-space: nowrap;
    vertical-align: top;
    margin: 0;
    font-size: 0;
    position: relative;
    cursor: pointer;
}



#upload_box .cancel_button a.button:hover {
border-left: none;
}

#upload_box .file_button label {
    display: block;
    width: auto;
    position: relative;
    background: #48a8ca;
    height: 100%;
    transition: all 0.2s ease-out;
}

#upload_box .file_button label:hover {
    background: #51b6da;
}

.file_button input {
    height: 100%;
    display: block;
}

#upload_box .cancel_button a.button {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
}

div.error, 
div.warning, 
div.notice {
color: #c65656;
background: none;
border: none;
border-top: 10px solid #f2f0ec;
margin: -30px -30px 0px -30px;
border-bottom: 10px solid #f2f0ec;
padding: 10px 20px;
}

div.error p, 
div.warning p, 
div.notice  p {
    margin: 0 0 5px 0;
}

.tabbed_panel div.error, 
.tabbed_panel div.warning, 
.tabbed_panel div.notice {
color: #c65656;
background: none;
border: none;
padding: 10px 20px;
margin: 0;
border-bottom: 10px solid #f2f0ec;
}

.ui-widget-header {
    background: #C1CA64;
    color: #fff;
    border-radius: 0;
}

div#progress_info {
    color: #fff;
    font-weight: 300;
    font-family: 'open sans', sans-serif;
}

.ui-progressbar {
    border-radius: 0;
    border: 0;
    background: #f2f0ec;
}


/* School page */

.equal_columns .column {
    margin-right: 0;
    border-right: 3px solid #f2f0ec;
    display: table-cell;
    float: none;
    background: #fff;
    vertical-align: top;
}

.equal_columns {
    display: table;
    table-layout: fixed;
    margin-bottom: 0;
    height: 100%;
}

.equal_columns:before, .equal_columns:after {
    display: none;
}

.stats_boxes {
    width: 100%;
    display: table;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 3px;
}

#billing_details_box.stats_boxes .stats_box, .stats_boxes .stats_box {
    display: table-cell;
    float: none;
}

.stats_boxes .clear {
    display: none;
}

.stats_boxes .stats_box .value, #billing_details .stats_boxes .stats_box .value {
    font-size: 40px;
}

.stats_boxes .stats_box .label {
    font-size: 14px;
}

table.info tr th {
    background: #e9e6e0;
    border: none;
}

table.info tr td {
    background: #f2f0ec;
    border: none;
    text-align: left;
}

table.info tr th h4 {
    color: #444;
    font-weight: 300;
    font-size: 16px;
}

#school_code_information .box {
    padding: 0;
    text-align: left;
}

#school_code_information .box p.bold {
    width: auto;
    word-wrap: normal;
    font-weight: 400;
}

table.info tr td p {
    color: #444;
}

/* Classes page */

    div#classes_content {
        margin-top: 0px;
    }


    #classes_content .tabbed_panel .tabs {
        text-align: left;
    }

    #classes_content div.tabbed_panel .tab {
        min-height: 90px;
    }


    /* Action buttons */

    #classes_content .tabbed_panel .tabs a {
        float: right;
    }


    /* Make sure action buttons are green on hover */

    #classes_content .tabbed_panel .tabs > a {
        margin-top: 10px;
        transition: background-color 0.2s ease-out;
    }

    #classes_content .tabbed_panel .tabs > a:hover {
        background-color: #b0c205;
        border: 0 none;
    }

    /* Reposition buttons on edit class page to bottom, and colour red */

    #class_list form > div.right {
        position: fixed;
        bottom: 10px;
        max-width: 1000px;
        margin: 0 auto;
        text-align: right;
        float: none;
        width: 100%;
        padding: 0;
        left: 0;
        right: 0;
        height: 36px;
        font-size: 0;
        overflow: hidden;
    }

    #class_list form > div.right > a,
    #class_list form > div.right > input {
        margin: 0;
        width: auto;
        height: 100%;
        border-left: 3px solid #f2f0ec; 
        background-color: #48a8ca;

        vertical-align: top;
        padding: 8px 15px;
    }

    #class_list form > div.right > a:hover,
    #class_list form > div.right > input:hover {
        background-color: #51b6da;
    }


/* School settings page */

.actions ol, 
.actions ol li {
display: inline-block;
height: 100%;
}

/* Quote request page */

#teacher_subscription_quotes .buttons  {
    position: fixed;
    bottom: 10px;
    max-width: 1000px;
    left: 0;
    right: 0;
    width: 100%;
    margin: auto;
    text-align: right;
}

#teacher_subscription_quotes .buttons input.button {
    border-left: 3px solid #f2f0ec;
    height: 36px;
    margin: 0;
    background: #48a8ca;
}

/* Edit students */

#student_list .right {
    position: fixed;
    bottom: 10px;
    left: 0;
    right: 0;
    max-width: 1000px;
    margin: auto;
    width: 100%;
    text-align: right;
    height: 36px;
}

#student_list .right a.button, #student_list .right input.button {
    height: 100%;
    box-sizing: border-box;
    border-left: 3px solid #f2f0ec;
    padding: 8px 15px;
    margin: 0;
    background: #48a8ca;
    display: inline-block;
    vertical-align: top;
}

/* Report */

th.report_table_header {
    white-space: nowrap;
    font-size: 13px;
    padding: 10px 5px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: normal;
}

table#report_table_data {
    table-layout: auto;
}

#report_table td {
    font-size: 14px;
    text-align: right;
    padding: 5px 15px 5px 10px;
    height: 20px;
}

#report_table_names tr, 
#report_table_data_container tr {
    height: 30px !important;
}

#report_table_names tr:nth-of-type(2n) td, 
#report_table_data_container tr:nth-of-type(2n) td {
    background: #f2f0ec;
}

#report-container {
    background: #fff;
}

#report_table table#report_table_names {
    width: 150px;
}

#report_table_names td a {
    text-decoration: none;
}

#report_table_names td a:hover {
    text-decoration: underline;
}

div#report_table_scroll_container {
    display: none;
}

#teacher_report #report_filters {
    border-radius: 0;
    background: #f2f0ec;
}


#report_table #report_table_data_container {
    width: calc(100% - 200px);
    overflow-x: auto;
}

#report_table td.animalrankreport {
    text-align: left;
}

div#report-container {
    min-width: 0;
}

#report_table #report_table_data_container #report_table_data {
    min-width: 650px;
}

#teacher_report #report_update_button_container {
    background: #f2f0ec;
    display: none;
}

a#report_update_button {
    position: absolute;
    right: 0;
}

div#report_filters {
    position: relative;
    width: 100%;
}


div#report-container {
    min-width: 0;
}

#report_table #report_table_data_container #report_table_data {
    min-width: 650px;
}

#teacher_report #report_update_button_container {
    background: #f2f0ec;
    display: none;
}

a#report_update_button {
    position: absolute;
    right: 0;
}

div#report_filters {
    position: relative;
    width: 100%;
}


ui-dialog {
    font-family: 'Open Sans', sans-serif;
}

.ui-dialog-titlebar.ui-corner-all {
    font-weight: 300;
    background: #48a8ca;
    border-radius: 0;
    border: 0;
}

.ui-dialog .ui-dialog-title {
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
}

.ui-dialog-titlebar button {
    display: none;
}

.ui-dialog .ui-dialog-content {
    top: 3px;
    background: #fff;
}

.ui-dialog {
    background: none;
    border-radius: 0;
    border: none;
}

.ui-widget-overlay {
    background: rgba(90,87,80,0.8);
    opacity: 1;
}

.ui-dialog .ui-dialog-buttonpane {
    background: #48a8ca;
    border: none;
    margin-top: 6px;
    padding: 0;
}

.accordion .ui-state-default, 
.accordion .ui-widget-content {
    background: #f2f0ec;
    border-radius: 0;
    border: none;
    margin-bottom: 1px;
    margin-right: 5px;
    color: #777;
}

#studentSelect {
    margin-left: -5px;
    margin-right: -15px;
}

.accordion .ui-widget-content {
    margin-left: 10px;
    margin-right: 15px;
    background: none;
    padding: 0;
}

.accordion .ui-widget-content li {
    background: #e9e6e0;
    padding: 5px 10px;
    margin: 0 0 1px 0;
    color: #444;
}

.ui-widget-content.accordion .ui-state-active, 
.ui-widget-content.accordion .ui-state-active:hover {
    background: #e9e6e0;
    border: none;
    color: #444;
}

.accordion .ui-accordion-header {
    background: #f2f0ec;
    border: none;
}

.accordion .ui-accordion-header:hover {
    background: #e9e6e0;
    border: none;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    padding: 0;
    margin: 0;
    height: 100%;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
    margin: 0;
    background: #48a8ca;
    border-left: 3px solid #f2f0ec;
    transition: all 0.2s ease-out;
    height: 100%;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:hover {
    background: #51b6da;
    
}

.ui-dialog {
    max-height: calc(100% - 20px);
    margin: auto;
    bottom: 0;
}

.ui-dialog-titlebar.ui-corner-all {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    border: none;
}

.ui-dialog .ui-dialog-content {
    top: 53px;
    margin: 0;
    border: 0;
    bottom: 39px;
    position: absolute;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
    max-height: none !important;
    }

.ui-dialog .ui-dialog-buttonpane {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
}

#studentSelect {
    height: calc(100% - 120px);
    max-height: none;
    overflow-y: auto;
}

.formtastic fieldset.choices .choices-group {
    background: none;
    border: 0;
}

#edit_login_settings_page form.formtastic.organisation .input label, form.formtastic.organisation div.field label {
    width: auto;
}



.formtastic fieldset.choices .choices-group .choice input {
    margin-top: 8px;
}

#edit_login_settings_page .formtastic fieldset.choices .choices-group {
    padding-top: 6px;
}

#edit_login_settings_page a.gradient-button.negative:hover,
#edit_login_settings_page a.gradient-button.negative:focus {
    background: #d65f5f;
}


.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.disabled {
background: rgba(255,255,255,0.4);
filter: none;
text-shadow: none;
border: none;
border-left: 3px solid #f2f0ec;
}


/* Subscription page */

.equal_columns {
    height: calc(100% + 30px);
    margin: -10px auto;
}

div#assignment_panel {
    height: calc(100% - 20px);
}

div#contentwrapper {
    bottom: 49px;
    border: none;
    width: 100%;
}

.equal_columns .column:last-of-type {
    border-right: 0;
}

#assignment_panel tr th, #assignment_panel tr td {
    border: none;
}

#assignment_panel .panel {
    height: auto !important;
}

.equal_columns .column {
margin-right: 0;
border-bottom: 3px solid #f2f0ec;
display: block;
float: none;
background: #fff;
width: 100%;
height: auto !important;
}

.equal_columns {
    height: auto;
    margin: 0;
    display: block;
}

div#assignment_panel {
    height: auto;
}

.equal_columns .column {
    border-right: none;
}


/* School settings page */

table.info {
    width: 100%;
    margin: 0;
}

/* Edit school page */

.formtastic .buttons .button, 
.formtastic .buttons .action, 
.formtastic .actions .button, 
.formtastic .actions .action {
    margin: 0;
    text-align: center;
}

.formtastic .actions .button {
    border-left: 3px solid #f2f0ec;
}

/* Dialog box */

.ui-dialog .ui-dialog-title {
    font-weight: 300;
}

.ui-dialog-titlebar.ui-corner-all {
    BACKGROUND: #48a8ca;
    border-radius: 0;
    border: none;
    margin-bottom: 3px;
}

.ui-dialog {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 300;
    color: #444 !important;
    background: none;
    border: none;
    left: 0 !important;
    right: 0;
    margin: 0 auto;
    max-width: 600px;
    width: 100% !important;
    width: 100% !important;
}

.ui-dialog .ui-dialog-content {
    background: #fff;
    padding: 20px;
    font-size: inherit;

}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: none;
    border: none;
    color: #fff;
}

.ui-state-default .ui-icon {
    background: none;
    text-indent: 0;
}

.ui-state-default .ui-icon:before {
    content: 'X';
    color: #fff;
    display: block;
    line-height: 16px;
    font-size: 14px;
    padding: 0;
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0px;
    text-align: center;
    
    font-weight: 600;
}

.ui-dialog .ui-dialog-buttonpane {
    background: #48a8ca;
    border-top: 0;
    margin-top: 3px;
    padding: 0;
    height: 36px;
}

.ui-dialog-buttonset {}

.ui-dialog .ui-dialog-buttonpane button {
    margin: 0;
    background: #48a8ca;
    border-left: 3px solid #f2f0ec;
    transition: all 0.2s ease-out;
}

.ui-widget-overlay {
    background: #F2F0EC;
    opacity: 0.85;
}

.ui-dialog .ui-dialog-buttonpane button:hover {
    border-left: 3px solid #f2f0ec;
    background: #51b6da;
}

.dialog-box {
    font-family: 'Open Sans', sans-serif;
}

.dialog-box p {
    margin-bottom: 5px;
}


/* 150713 even more */

.formtastic .buttons, 
.formtastic .actions {
    position: fixed;
    bottom: 10px;
    right: 0;
    max-width: 1000px;
    left: 0;
    margin: auto;
    width: 100%;
    text-align: right;
    padding: 0;
    font-size: 0;
}

.formtastic div.buttons .button, 
.formtastic div.buttons .action, 
.formtastic div.actions .button, 
.formtastic div.actions .action {
    float: right;
    height: 36px;
    border-left: 3px solid #f2f0ec;
    background: #48a8ca;
    padding: 8px 15px;
    line-height: normal;
    transition: all 0.2s ease-out;
}

button.negative:hover, 
button.negative:focus, 
button.red:hover, 
button.red:focus, 
a.button.negative:hover, 
a.button.negative:focus, 
a.button.red:hover, 
a.button.red:focus, 
input.button.negative:hover, 
input.button.negative:focus, 
input.button.red:hover, 
input.button.red:focus, 
label.button.negative:hover, 
label.button.negative:focus, 
label.button.red:hover, 
label.button.red:focus, 
button.ui-state-default.negative:hover, 
button.ui-state-default.negative:focus, 
button.ui-state-default.red:hover, 
button.ui-state-default.red:focus, 
.formtastic button.negative:hover, 
.formtastic button.negative:focus, 
.formtastic button.red:hover, 
.formtastic button.red:focus {
    border-left: 3px solid #f2f0ec;
}

.formtastic button.affirmative:focus, 
.formtastic button.affirmative:hover, 
.formtastic button.green:focus, 
.formtastic button.green:hover, 
a.button.affirmative:focus, 
a.button.affirmative:hover, 
a.button.green:focus, 
a.button.green:hover, 
button.affirmative:focus, 
button.affirmative:hover, 
button.green:focus, 
button.green:hover, 
button.ui-state-default.affirmative:focus, 
button.ui-state-default.affirmative:hover, 
button.ui-state-default.green:focus, 
button.ui-state-default.green:hover, 
input.button.affirmative:focus, 
input.button.affirmative:hover, 
input.button.green:focus, 
input.button.green:hover, 
label.button.affirmative:focus, 
label.button.affirmative:hover, 
label.button.green:focus, 
label.button.green:hover {
    background: #51b6da;
    border-left: 3px solid #f2f0ec;
}

.boxed_bulk_actions a.button.affirmative:hover,
.boxed_bulk_actions a.button.affirmative:focus,
#students_index > .panel_content > .actions a.button.affirmative:hover,
#students_index > .panel_content > .actions a.button.affirmative:focus {
    background-color: #b0c205;
    border-left: none;
}

#flashes .notice, .flashes .notice {
background: #f2f0ec;
margin: -30px 0px 0px 0px;
border-bottom: 10px solid #fff;
border-top: 10px solid #fff;
}

div#content::-webkit-scrollbar-thumb,
div#contentwrapper::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 3px solid transparent;
    -webkit-background-clip: content;
    -moz-background-clip: content;
    background-color: #8bc0d3;
    background-clip: content-box;
}

div#content::-webkit-scrollbar-thumb:hover,
div#contentwrapper::-webkit-scrollbar-thumb:hover {
    background-color: #48a8ca;
    }

div#content::-webkit-scrollbar,
div#contentwrapper::-webkit-scrollbar {
    width: 15px;
    background: #f2f0ec;
}

.accordion .clusters_accordion, .accordion .skills_content {
    background: none;
}

.accordion .domains_accordion .ui-accordion-content {
    background: #e9e6e0;
    margin-top: 0;
    padding: 20px;
}

.accordion .skill_text {
    color: #222;
}

div.accordion .ui-widget {
    font-family: 'Open Sans', sans-serif;
}


.accordion h3.ui-accordion-header, 
.accordion h3.ui-accordion-header:hover {
    background: #f2f0ec;
    border: none;
    color: #444;
}

.accordion h3.ui-accordion-header:hover {
    background: #e9e6e0;
}

.accordion .domains_accordion .ui-accordion-header {
    margin-top: 1px;
}

.accordion .ui-widget-content {
    margin-top: -1px;
}

.accordion .domains_accordion .ui-accordion-header {
    background: #e9e6e0;
}

.accordion .clusters_accordion, .accordion .skills_content {
    padding: 0;
    margin: 0;
}

.accordion h3.cluster {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
}

.accordion .standard_text {
    font-weight: 300;
    vertical-align: initial;
    line-height: normal;
    font-size: 14px;
    font-style: italic;
}

.accordion label span, .accordion label input {
    line-height: 16px;
    height: 16px;
}

    /* Topic selector */

    .accordion .skill_content {
        min-height: 20px;
        padding: 0 30px 0 10px;
        }


/* Change password dialog */

.ui-dialog form button,
.ui-dialog form input.button,
.ui-dialog button.cancel,
.ui-dialog button.save
  {
    position: absolute;
    bottom: 0;
    margin: 0;
    left: initial;
    right: initial;
    float: right;
    transition: all 0.2s ease-out;
    z-index: 10;
}

.ui-dialog form input.button#user_submit,
.ui-dialog button.save  {
    right: 0;
    border-left: 3px solid #f2f0ec;
    background-color: #48a8ca;
    width: 80px
}

.ui-dialog form input.button#user_submit:hover,
.ui-dialog button.save:hover {
    background-color: #51b6da
}

.ui-dialog form button.negative,
.ui-dialog button.cancel {
    right: 80px;
    border-left: 3px solid #f2f0ec;
    color: #48a8ca;
    width: 80px;
}

.ui-dialog:before {
    position: absolute;
    height: 32px;
    background: #48a8ca;
    width: 100%;
    bottom: 32px;
    /* content: ''; */
    z-index: 1;
    border-top: 3px solid #f2f0ec;
}

.ui-dialog form {
    margin: 20px;
}



.ui-dialog #dialog-fancyConfirm .blocksubmit {
    position: fixed;
    bottom: 16px;
    background: #48a8ca;
    height: 36px;
    display: block;
    max-width: 600px;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0 auto;
}

.ui-dialog .blocksubmit.center button {
    height: 100%;
    margin: 0;
}

/* Writing settings */

#student_list h3 #class_selector {
    height: auto;
}


/* Change classes dialog */

.ui-dialog .blocksubmit.center button {
    margin: 0;
}

#dialog-normal.change_classes_dialog .fields {
height: calc(100% - 35px);
padding: 20px;
box-sizing: border-box;
}



/* Parent subscription page */

    .parent_panel_2_columns {
        top: 60px;
    }

    body div#page div#content.contentfp {
        max-width: 1000px;
        margin: auto;
        position: absolute;
        top: 67px;
        bottom: 50px;
        overflow-y: auto;
        height: auto;
    }

/* Writing challenge */

    /* remove styling from notice */

    .form_section div.error, .form_section div.notice, .form_section div.warning {
        margin: 0 -20px;
        border: 0 none;
        }


/* Add student dialog */

    #class_membership_buttons {
        position: fixed;
        height: 36px;
        background: #48a8ca;
        width: 100%;
        max-width: 600px;
        left: 0;
        right: 0;
        bottom: 10px;
        margin: auto;
        text-align: right;
        overflow: hidden;
        font-size: 0;
        }

    #class_membership_buttons a.button, #class_membership_buttons li.action {
        list-style-type: none;
        border-left: 3px solid #f2f0ec;
        margin: 0;
        height: 100%;
        padding: 8px 15px;
        vertical-align: top;
        float: none;
        position: relative;
        width: auto;
        display: inline-block;
        transition: all 0.2s ease-out;
        }

    #class_membership_buttons li.action { 
        border: 0;
        padding: 0;
        margin: 0;
        }

    .ui-dialog form #class_membership_buttons li.action input {
        float: none;
        position: relative;
        width: auto;
        margin: 0;
        height: 100%;
        padding: 6px 15px;
        }

    #class_membership .field label {
        width: calc(100% - 60px);
        }

    #class_membership > fieldset > ol {
        border: none;
        overflow-x: hidden;
        max-height: none;
        height: auto;
        }

    div#class_membership {
        padding: 10px;
        background: #f2f0ec;
        font-weight: 400;
        }

    #class_membership > fieldset > ol .field {
        background: none;
        margin: 0;
        padding: 5px 0px;
        }

    .formtastic #class_membership legend {
        color: #555;
        padding: 10px 0;
        }


/* Buttons re-greening */

    .activity_edit_button a.button:hover, .activity_edit_button a.button:focus,
    #current_activities a.button:hover, #current_activities a.button:focus,
    #choose_students_button a.button:hover, #choose_students_button a.button:focus,
    #students_in_groups_chooser a.button:hover, #students_in_groups_chooser a.button:focus,
    table.contests-table .button:hover, table.contests-entries-table .button:focus, 
    #active_students ~ div.actions a.button:hover, #active_students ~ div.actions a.button:focus {
        background-color: #b0c205;
        border: none;

    }


/* Animal Ranks */

    #student_ranks .rounded_tile {
    width: calc(100% - 40px);
    position: relative;
    }

    .student_body .rounded_tile:nth-child(n) {
        border: none;
        background: #f2f0ec;
        padding: 10px 20px;
    }

    #student_ranks .rounded_tile div.right {
        max-width: 750px;
        width: calc(100% - 150px);
        padding-left: 150px;
    }

    .student_body .rounded_tile .image {
        position: absolute;
    }

    #student_ranks .rounded_tile .description {
        width: calc(100% - 0px);
    }

    #student_ranks .rounded_tile .wikipedia {
        position: relative;
    }

    #student_ranks .rounded_tile .population {
        float: none;
        display: inline-block;
    }

    #student_ranks .rounded_tile .title {
        width: auto;
    }

/* Parent purchase page */

div#credit_card_fields, div#paypal_fields {
    margin: 20px -20px;
    padding: 0px 20px 20px;
    border-top: 3px solid #fff;
    border-bottom: 3px solid #fff;
}

#parent_order_form label {
    float: none;
}

#parent_order_form #terms_and_conditions {
    width: auto;
}

#parent_order_form #terms_and_conditions {
width: auto;
float: left;
margin-right: 20px;
margin-top: 24px;
margin-left: 7px;
margin-bottom: 30px;
}

#parent_order_form input.child {
margin-top: 20px;
}

#parent_order_form #terms_and_conditions {
width: auto;
float: left;
margin-right: 20px;
margin-top: 24px;
margin-left: 7px;
margin-bottom: 30px;
}

#parent_order_form input[type='text'], 
#parent_order_form input[type='email'],
#parent_order_form select,
.login-container input[type='text'], 
.login-container input[type='password'],
.login-container input[type='email'],

.login-container select {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    color: #48a8ca;
    font-size: 16px;
    padding: 3px 5px;
    width: 65%;
    border: 2px solid #e9e6e0;
    height: auto;
}


.login-container input[type='text'], 
.login-container input[type='password'],
.login-container input[type='email'],

.login-container select {
    margin: 10px 0;
    padding: 8px 15px;
    font-size: 18px;
    font-weight: 400;
}
#parent_order_form select {
    background: #fff;
    }

#parent_order_form input[type='text']:focus, 
#parent_order_form input[type='email']:focus,
#parent_order_form select:focus {
    border: 2px solid #d9d6d0;
    outline: none;
}

div#contentarea {
    top: 20px;
}

div#content-header {
    height: auto;
}

.parent_panel_2_columns {
    top: 0;
    margin-top: 0;
}


/* Report buttons */

    div#chart_buttons {
        top: -10px;
        margin-top: 0;
    }

    #chart_buttons a.button:hover, 
    #chart_buttons a.button:focus,
    #export_csv_button_container a.button:hover,
    #export_csv_button_container a.button:focus {
        border-left: none;
        }

    #chart_buttons a.button:not(.disabled):hover, 
    #chart_buttons a.button:not(.disabled):focus,
    #export_csv_button_container a.button:not(.disabled):hover,
    #export_csv_button_container a.button:not(.disabled):focus,
    #teacher_report #report_update_button_container:not(.disabled) a.button:hover,
    #teacher_report #report_update_button_container:not(.disabled) a.button:focus,
    #assignment_panel a.button:hover, #assignment_panel a.button:focus,
    #teacher_subscription_quotes a.button:hover, #teacher_subscription_quotes a.button:focus {
        border-left: none;
        background: #B0C205;
        }

    #teacher_report #report_update_button_container {
        display: inline-block;
        position: relative;
        }

    #report_table_names td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        }

    .formtastic.family .actions ol li.action input, 
    .formtastic.family .actions ol a.gradient-button.negative {
        background: #48a8ca;
        border-left: 3px solid #f2f0ec;
        padding: 8px 15px;
        margin: 0;
        }

    .formtastic.family .actions ol li.action input:hover, 
    .formtastic.family .actions ol a.gradient-button.negative:hover {
        background: #51b6da;
        border-left: 3px solid #f2f0ec;
        padding: 8px 15px;
        margin: 0;
        }

    .formtastic.family .actions ol li.action {
        margin: 0;
        padding: 0;
        }

/* Activity game selector */

    .game_selection::-webkit-scrollbar-thumb {
        background-color: #8bc0d3;
        }

    .game_selection {
        height: auto;
        }


/* Remove wiki-embed link outline */
    .wiki-embed a {
        outline: none;
        }

/* Edit school page buttons */

    #edit_school_page form .actions li.action {
        margin: 0;
        height: 100%;
        padding: 0;
    }


    #edit_school_page form .actions a {
        height: 100%;
        padding: 9px 15px;
    }


/* Parsed student upload */

div#background_job_progress {
    margin: 30px 0;
}

    #new_students .action_buttons, 
    .buttons.upload-preview {
        position: fixed;
        width: 100%;
        max-width: 1000px;
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: right;
        background: #48a8ca;
        height: 36px;
        bottom: 10px;
        font-size: 0;
    }

    #new_students .action_buttons > div {
        height: 100%;
        float: none;
        display: inline-block;
        padding: 0;
        margin: 0;
    }

    #new_students .action_buttons > div a.button {
        background: #48a8ca;
        border-left: 3px solid #f2f0ec;
        height: 100%;
        box-sizing: border-box;
        margin: 0;
        transition: all 0.2s ease-out;
    }

    #new_students .action_buttons > div a.button:hover, #new_students .action_buttons > div a.button:focus {
        background: #51b6da;
    }

    #new_students select {
        max-width: 100%;
        width: auto;
    }

div#new_students #warning_panels {
margin: 0 -30px;
background: #F2F0EC;
padding: 3px 0;
background-clip: content-box;
}

div#new_students #warning_panels > div {
margin: 0;
border-width: 3px 0;
padding: 8px 45px;
border-width: 0;
margin: 6px 0;
background: #fff;
}



    .buttons.upload-preview form {
        margin: 0;
        height: 100%;
        overflow: hidden;
    }

    .buttons.upload-preview form a, 
    .buttons.upload-preview form input {
        margin: 0;
        height: 100%;
    }

    .buttons.upload-preview form a, .buttons.upload-preview form input {
        vertical-align: top;
        border-left: 3px solid #f2f0ec;
        background: #48a8ca;
        transition: all 0.2s ease-out;
        }

/* New quote page */
    #teacher_subscription_quotes #number_places_field label {
        line-height: normal;
        margin-top: 24px;
        }

/* Quote */
    #teacher_subscription_quotes table.info td, #teacher_subscription_quotes table.info th {
        text-align: left;
        font-size: 18px;
        padding: 15px;
    }

    #teacher_subscription_quotes table.info tr th h4 {
        font-size: 16px;
        margin: 0;
    }

    table.info {
        border-spacing: 3px;
        table-layout: fixed;
    }

    #teacher_subscription_quotes table.info td {
        min-width: 0;
        width: auto;
    }



/* Wiki-web (I think) */

body.info div#contentwrapper {
    top: 55px;
    background: #fff;
}

body.info .panel_content > h1 ~ p {
    margin-top: 0;
}

body.info div#page #content {
    height: auto;
}



/* Example questions */

#example_questions.panel-content.pane .heading, #example_questions.panel-content.pane .control, #example_questions.panel-content.pane .content {
    background: #fff;
}

#example_questions.panel-content.pane .heading {
    background: #48a8ca;
    width: 100%;
    height: 50px;
    padding: 8px 15px;
    line-height: normal;
    font-size: 24px;
}

#example_questions.panel-content.pane {
    background-color: #f2f0ec;
    overflow: hidden;
    top: 10px;
    bottom: 10px;
    position: fixed;
    max-height: calc(100% - 20px);
    max-width: 1000px;
    left: 0;
    right: 0;
    margin: auto;
}

#example_questions.panel-content.pane .control {
    position: absolute;
    bottom: 0;
    top: initial;
    background: #48a8ca;
    z-index: 100;
    height: 36px;
    border-left: 3px solid #f2f0ec;
    width: 100px;
}

#example_questions.panel-content.pane .control:hover {
    background-color: #52b6db;
}

#example_questions.panel-content.pane .control:before {
    width: 940px;
    position: absolute;
    content: '';
    background: #48a8ca;
    height: 36px;
    bottom: 0;
    right: 100px;
    z-index: -1;
    border-left: 10px solid #f2f0ec;
}

#example_questions.panel-content.pane .control:after {
    content: 'Close';
    font-size: 18px;   
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 0;
    line-height: 36px;
}

#example_questions.panel-content.pane .content {
    top: 53px;
    bottom: 39px;
}

.panel-content.pane#example_questions .content .view {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
}

#example_questions.panel-content.pane .example-questions > h2 {
    background: #fff;
    color: #444;
    padding: 20px 20px;
    font-weight: 300;
    border-bottom: 3px solid #f2f0ec;
    margin-bottom: 0;
}

#example_questions.panel-content.pane .example-questions .question {
    margin: 0;
    padding: 20px;
    background-color: #fff;
    border-bottom: 3px solid #f2f0ec;
    font-size: 24px;
}

#example_questions ul.options {
    padding: 10px 20px;
    border-bottom: 3px solid #f2f0ec;
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 15px 0;
}

#example_questions.panel-content.pane .example-questions .options li {
    min-height: 0;
    display: table-cell;
    width: 25%;
    line-height: normal;
}

#example_questions.panel-content.pane .example-questions a.next {
    position: relative;
    bottom: 0px;
    background: #48a8ca;
    padding: 8px 15px;
    font-size: 18px;
    font-weight: 300;
    display: inline-block;
    margin: 10px calc(50% - 50px);
    right: 0;
    left: 0;
    max-width: 100px;
    width: 100%;
}

#example_questions.panel-content.pane .example-questions a.next:hover {
    background-color: #52b6db
}

#example_questions.panel-content.pane .example-questions {
    color: #444;
}

#example_questions ul.options li .fragment {
    color: #fff;
}


.table-progress-pane.panel-content.pane .heading, #example_questions.panel-content.pane .control, #example_questions.panel-content.pane .content {
    background: #fff;
}

.table-progress-pane.panel-content.pane .heading {
    background: #48a8ca;
    width: 100%;
    height: 50px;
    padding: 8px 15px;
    line-height: normal;
    font-size: 24px;
}

.table-progress-pane.panel-content.pane {
    background-color: #f2f0ec;
    overflow: hidden;
    top: 10px;
    bottom: 10px;
    max-width: 1000px;
    left: 0;
    right: 0;
    margin: auto;
}

.table-progress-pane.panel-content.pane .control {
    position: absolute;
    bottom: 0;
    top: initial;
    background: #48a8ca;
    z-index: 100;
    height: 36px;
    border-left: 3px solid #f2f0ec;
    width: 100px;
}

.table-progress-pane.panel-content.pane .control:hover {
    background-color: #52b6db;
}

.table-progress-pane.panel-content.pane .control:before {
    width: 940px;
    position: absolute;
    content: '';
    background: #48a8ca;
    height: 36px;
    bottom: 0;
    right: 100px;
    z-index: -1;
    border-left: 10px solid #f2f0ec;
}

.table-progress-pane.panel-content.pane .control:after {
    content: 'Close';
    font-size: 18px;   
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 0;
    line-height: 36px;
}

.table-progress-pane.panel-content.pane .content {
    top: 53px;
    bottom: 39px;
}

.table-progress-pane.pane#example_questions .content .view {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
}


.table-progress-pane.pane.panel-content .view {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0; }
 .table-progress-pane.pane:before {
     background-color: #f2f0ec;
 }


/* New class dialog */

form#new_student_group .blocksubmit {
    float: none;
    position: absolute;
    bottom: 0;
    background: #48a8ca;
    width: 100%;
    margin: 0;
    left: 0;
    height: 36px;
    padding: 0;
    text-align: right;
    overflow: hidden;
}

form#new_student_group input#student_group_submit {
    position: relative;
    height: 100%;
    background: #48a8ca;
    border-left: 3px solid #f2f0ec;
}

form#new_student_group input#student_group_submit:hover {
    background: #51b6da;
    
}

form#new_student_group a.closeDialog {
    float: none;
    padding: 8px 15px;
    border-left: 3px solid #f2f0ec;
    margin: 0;
}

form#new_student_group ol li label[for="student_group_typical_age"] {
    font-size: inherit;
    line-height: normal;
}

form#new_student_group ol li select#student_group_typical_age {
    width: calc(70% - 40px);
}


/* Add child button */

#add_child .actions {
right: 100px;
width: calc(100% - 100px);
max-width: 900px;
}


/* Copy and paste students */

.copy_paste_box_buttons {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 1000px;
    text-align: right;
    overflow: hidden;
    margin: 0 auto;
    left: 0;
    right: 0;
    background: #48A8CA;
    height: 36px;
    bottom: 10px;
    font-size: 0;
}

.copy_paste_box_buttons .cancel_button {
    float: none;
    height: 100%;
    margin: 0;
    display: inline-block;
    padding: 0;
    vertical-align: top;
}

input#copy_paste_submit {
    margin: 0;
    float: none;
    height: 100%;
    border-left: 3px solid #f2f0ec;
    background: #48a8ca;
    transition: all 0.2s ease-out;
}

.copy_paste_box_buttons .cancel_button a {
    border-left: 3px solid #f2f0ec;
    height: 100%;
    display: inline-block;
    padding: 8px 15px;
    margin: 0;
    transition: all 0.2s ease-out;
}

input#copy_paste_submit:hover {
    background: #51b6da;
}

/* Blank subscription page button */

a.button.affirmative.subscription_link:hover,
a.button.affirmative.subscription_link:focus {
margin: 0;
border: 0;
background: #b0c205;
}

#student_details_panel .inpageAvatarHead {
    height: 100px;
}

/* Billing details header fix */

body div#page div#content.contentfp{
    z-index: initial !important;
}


/* Consent code form */

#consent_code_form .actions a.button {
    background: #48a8ca;
    height: 100%;
    vertical-align: top;
    border-left: 3px solid #f2f0ec;
    margin: 0;
    transition: all 0.2s ease-out;
}

#consent_code_form .actions {
    overflow: hidden;
    padding: 0;
    font-size: 0;
}

#consent_code_form .actions a.button:hover {
    background: #51b6da;
}

#messages_poster .rounded_tile .right {
margin-left: 90px;
}


.setup_new_school a.button:hover, 
.similar_school input.button:hover,
.setup_new_school a.button:focus, 
.similar_school input.button:focus {
    background: #afc205;
    border: 0 none;
}

#similar_schools .similar_school {
background: #f2f0ec;
border-bottom: 0;
}

#new_organisation .actions li.action {
margin: 0;
padding: 0;
height: 100%;
}


/* Friends */

#friends_home {
    background: #fff;
    margin: 0;
}

#friends_home form {
    height: auto;
}

div#friends_home:before {
    
    position: fixed;
    top: 10px;
    z-index: 10;
    color: #fff;
    font-size: 24px;
    padding: 10px 20px;
    left: 0;
    right: 0;
    max-width: 1000px;
    margin: auto;
}

#friends_home h1 {
    margin: auto;
    color: #fff;
    font-size: 24px;
}


#friends_home #friend_request .friends-button:hover, 
#friends_home #friend_request .friends-button:focus {
background: #d65f5f;
}

/* Profile panel */

#profile_panel a.button:hover {
    background: #afc205;
    border: 0 none;
}

#profile_panel a.button:focus {
    background: #afc205;
    border: 0 none;
}

#profile_panel #flashes .notice, 
#profile_panel .flashes .notice {
    margin: 0;
}

form.edit_user label {
    float: none;
    margin: 15px 0;
    display: inline-block;
    width: 30%;
}



form#edit_user .radio_options {
    width: auto;
}


#change_password_dialog .change-password-buttons {
    position: fixed;
    bottom: 16px;
    height: 36px;
    left: 0;
    right: 0;
    max-width: 602px;
    margin: auto;
    text-align: right;
    padding: 0;
    background: #48a8ca;
    font-size: 0;
    padding: 0;
    width: 100%;
    border-top: 3px solid #f2f0ec;
}

#change_password_dialog .change-password-buttons button:hover, 
#change_password_dialog .change-password-buttons input:hover {
    background-color: #52b6db;
}

#change_password_dialog .change-password-buttons button, 
#change_password_dialog .change-password-buttons input {
    background: #48a8ca;
    border-left: 3px solid #f2f0ec;
    vertical-align: top;
    margin: 0;
    height: 100%;
    padding: 8px 15px;
    width: auto;
    right: initial;
    display: inline;
    float: none;
    position: relative;
}


#friends_home h2 {
    color: #48a8ca;
    font-size: 24px;
}

#friends_home h3 {
    color: #444;
    font-size: 18px;
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
}

#friends_home #add_friends .hint {
    font-size: 18px;
    font-weight: 300;
}

#friends_home #friend_requests_middle {
    border-right: 3px solid #f2f0ec;
    width: 50%;
    padding-right: 20px;
}

#friends_home {
    margin-top: -30px;
}

#friends_home .friends_content {
}

.ui-dialog .blocksubmit.center {
    MAX-HEIGHT: 36px;
    position: absolute;
    bottom: 0px;
    background: #48a8ca;
    height: 36px;
    width: 100%;
    left: 0;
    border-top: 3px solid #f2f0ec;
}


form#edit_user label {
    float: left;
}


#profile_panel a.button.affirmative:focus {
    background-color: #B0C205;
    border: 0;
}



body div#page #content .panel#browser_check .panel_content {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

div#browser_check .browser_check .result {
    width: 60%;
    display: inline-block;
    vertical-align: middle;
    float: none;
    padding: 0;
}

div#browser_check .browser_check .title {
    vertical-align: middle;
    display: inline-block;
    height: auto;
    width: 40%;
    padding-left: 20px;
    box-sizing: border-box;
}

div#browser_check .browser_check {
    font-size: 0;
}

#profile_panel .actions {
float: none;
text-align: right;
}


/* Confirmation errors page */

#error_explanation h2, #payments_disabled_message.error h2 {
    font-family: 'Open sans', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #c65656;
    line-height: normal;
    padding: 5px 0;
}

#error_explanation, #payments_disabled_message.error {
    font-family: 'Open-sans', sans-serif;
    
    font-size: 16px;
    color: #c65656;
    border: none;
    background: #f2f0ec;
    padding: 20px;
}

#error_explanation ul li, #payments_disabled_message.error ul li {
    list-style-type: none;
    color: #c65656;
}

#error_explanation ul li span, #payments_disabled_message.error ul li span {
    color: #c65656;
}

#login_problems input[type="submit"] {
    background: #a1b10b;
    color: #fff;
    font-weight: 300;
    border: none;
    padding: 8px 15px;
    height: auto;
    cursor: pointer;
    
    font-family: 'Open Sans', sans-serif;
}

#login_problems form .field {
    margin: 10px 0;
    width: calc(100%);
    border: 2px solid #d9d6d0;
    box-sizing: border-box;
    height: auto;
}

#login_problems > h2 {
    margin-top: 40px;
}

div#login_problems form#edit_user label {
    width: 100%;
}

.enter-contest-page a.button,
.class-activity-page a.button {
    transition: all 0.2s ease-out;
}

.enter-contest-page a.button:hover,
.enter-contest-page a.button:focus,
.class-activity-page a.button:hover,
.class-activity-page a.button:focus,
#teacher_contest_entry a.button:hover,
#teacher_contest_entry a.button:focus {
border: 0 none;
background: #afc205;
}


/* Upload students */

div#tidy_up_handling {
margin-top: 50px;
}

#current_students .hidden.notice {
margin: 0 -30px;
border-top-width: 3px;
border-bottom-width: 3px;
padding: 10px 30px;
color: #728A41;
font-size: 16px;
line-height: normal;
}


/* Messages screen */

.student_body .poster#messages_poster {
    margin: -30px -30px;
    background: #f2f0ec;
    width: calc(100% + 60px);
    box-sizing: border-box;
}

#messages_poster #messages {
    background: #fff;
    padding: 20px;
    margin: 0;
    border-top: 0 none;
}

#messages_poster .rounded_tile {
    background: #fff;
}

#messages_poster .red_button {
    background: #d9d6d0;
    color: #444;
    text-decoration: none;
    margin: 0;
    border: 0;
    padding: 20px;
    font-size: 18px;
    display: inline-block;
    width: auto;
}

#messages_poster .red_button.selected {
    background: #fff;
    color: #444;

    border: none;
}

.poster#messages_poster .middle {
    padding: 0;
    left: 0;
}

#messages_poster #message_type_choice {
    display: block;
    margin: 0;
    left: 0;
}

#messages_poster .rounded_tile {
    padding: 30px 20px;
    background: #fff;
    border-bottom: 3px solid #f2f0ec;
    margin: 0 -20px;
    width: calc(100% + 40px);
    }

#messages_poster .rounded_tile .right {
    margin-left: 120px;
}

#messages_poster h2 {
    color: #48a8ca;
    font-size: 32px;
}


/* SSO link account */

    #link_account_form .signup_page.student#student_login h1 {
        display: none;
    }

.login-container .submit {
    position: fixed;
    bottom: 10px;
    height: 36px;
    width: 100%;
    max-width: 1000px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: right;
    padding: 0;
}

.login-container .submit input.button {
    margin: 0;
    height: 100%;
    color: #48a8ca;
    border-left: 3px solid #f2f0ec;
    transition: all 0.2s ease-out;
    background-color: #48a8ca;
}

.login-container .submit input.button:hover,
.login-container .submit input.button:focus {
    background-color: #51b6da;
}


/* Leave school dialog */

#leave_school_dialog .blocksubmit.center {
    text-align: right;
    font-size: 0;
}

#leave_school_dialog .blocksubmit.center button, 
#leave_school_dialog .blocksubmit.center input.button#user_submit {
    float: none;
    width: auto;
    height: 100%;
    margin: 0;
    right: initial;
    padding: 8px 15px;
    display: inline-block;
    position: relative;
}


/* Student report page */


#login_details .equal_columns {
    -webkit-columns: auto 2; /* Chrome, Safari, Opera */
    -moz-columns: auto 2; /* Firefox */
    columns: auto 2;
}

#login_details .equal_columns .column {
    border: 0;
    vertical-align: top;
    background: none;
}

#student_details_panel table.student_details {
    vertical-align: top;
}

#student_details_panel #login_details {
    width: calc(100% - 210px);
    height: auto;
}


/* SSO */

#single_sign_on_settings .actions li.action input:hover,
#single_sign_on_settings .actions li.action input:focus {
    background: #51b6da;
}


div#single_sign_on_settings .actions li.action {
    height: 100%;
}

div#single_sign_on_settings .actions li.action input {
    height: 100%;
    background: #48a8ca;
    border-left: 3px solid #f2f0ec;
    transition: all 0.2s ease-out;
}






/* Date range dialog for reports */



div#date_range_dialog .date_selector {
    float: none;
}


div#date_range_dialog table tbody {
    background: #fff;
}


div#date_range_dialog td a.ui-state-default {
    background: #a1b10b;
    color: #fff;
    transition: background 0.2s ease-out;

}


div#date_range_dialog td a.ui-state-default:hover {
    background: #B0C205;
    }



div#date_range_dialog td.ui-datepicker-other-month {
    background: #fff;
}

div#date_range_dialog td.ui-datepicker-unselectable {
    background: #fff;
    color: #b9b6b0;
}

div#date_range_dialog td.ui-datepicker-unselectable .ui-state-default {
    color: #a9a6a0;
}

div#date_range_dialog td.ui-datepicker-week-end a.ui-state-default {
    background: #728A41;
}

div#date_range_dialog td.ui-datepicker-week-end a.ui-state-default:hover {
    background: #84a63e;
}

div#date_range_dialog td.ui-datepicker-current-day a.ui-state-default {
    background: #d39b00;
}

div#date_range_dialog td.ui-state-disabled {
    background: #f2f0ec;
    opacity: 1;
}

div#date_range_dialog .date_selector .ui-widget-content {
    border: none;
    background: #f2f0ec;
    border-radius: 0;
}

div#date_range_dialog .ui-datepicker table {
    table-layout: fixed;
}

div#date_range_dialog .ui-datepicker table th {
    font-weight: 300;
    background: #f2f0ec;
    padding: 5px 0;
    color: #696660;
}


div#date_range_dialog .ui-datepicker table thead tr {
    background: red;
}

div#date_range_dialog tr.even,
div#date_range_dialog tr:nth-child(odd) {
    background: #f2f0ec;
}

div#date_range_dialog table tr td a, 
div#date_range_dialog table tr td span {
    text-align: center;
}

div#date_range_dialog .ui-widget-header {
    background: none;
    color: #48a8ca;
    border: none
}