@import url("Reset.css");

html
{
    width:                              100%;
    height:                             100%;   
    min-height:                         100%;   
}

body 
{
    margin:                             0;
    max-width:                          1000px;
    font-size:                          100%;
}

div#javascript,
div#no-javascript
{
    width:                              100%;
    height:                             100%;
    padding:                            0px;
    margin:                             0px;
}

div.page
{
    width:                              100%;
    min-width:                          1024px;
    height:                             100%;
    margin:                             auto;
}

div.banner
{
    width:                              100%;
    height:                             115px;
}

img.logo
{
    width:                              109px;
    margin:                             20px;
}

div.database
{
    height:                             30px;
    margin-top:                         30px;
    margin-right:                       25px;
}

span.instance
{
    font-size:                          125%;
    padding:                            3px;
    border-width:                       2px;
}

div.heading
{
    height:                             40px;
    padding-top:                        15px;
}

span.application
{
    margin-left:                        20px;
    font-size:                          150%;
}

span.page-title
{
    margin-left:                        20px;
    font-size:                          150%;
}

span.help
{
    margin-right:                       25px;
}

input[type="button"]
{
    padding-top:                        3px;
    padding-bottom:                     3px;
    padding-left:                       15px;
    padding-right:                      15px;
    border-width:                       1px;
    font-size:                          90%;
}

input[type="button"]:hover
{
    padding-top:                        2px;
    padding-bottom:                     2px;
    padding-left:                       14px;
    padding-right:                      14px;
    border-width:                       2px;
    font-size:                          90%;
}

div.text
{
    width:                              900px;
    min-width:                          900px;
    margin:                             20px;
    font-size:                          100%;
}

div.text p
{
    margin-top:                         10px;
    margin-bottom:                      10px;
    line-height:                        150%;
}

input[type="text"],
input[type="password"],
select
{
    border-width:                       1px;
    -webkit-border-radius:              5px;
    -moz-border-radius:                 5px;
    border-radius:                      5px;   
    padding:                            2px;
}

select
{
    padding:                            3px;
}

div.login,
div.login-summary
{
    margin-left:                        auto;
    margin-right:                       auto;
    margin-top:                         20px;
}

div.login
{
    width:                              400px;
    *width:                             450px;
    padding:                            10px;
    -moz-border-radius:                 5px;
    border-radius:                      5px;
}

span.field-validation-error
{
    position:                           absolute;
    padding:                            5px;
    margin-left:                        10px;
    background-color:                   #782327;
    color:                              #ffffff;
    font-size:                          90%;
    -moz-border-radius:                 5px;
    border-radius:                      5px;    
}

div.login-summary
{
    width:                              425px;
}

div.login input[type="text"],
div.login input[type="password"]
{
    width:                              150px;
}

div.table-row
{
    width:                              100%;
    padding-top:                        5px;
    padding-bottom:                     5px;
}

div.login div.table
{
    width:                              390px;
}

div.login div.table-row,
div.login div.table-row-short
{
    width:                              325px;
}

div.login div.table-row
{
    margin-top:                         5px;
    margin-bottom:                      5px;
    margin-left:                        50px;
}

div.login div.label
{
    min-width:                          100px;
    padding:                            5px;
    margin-top:                         1px;
    margin-right:                       15px;
}

div.address div.label,
div.emergency-contact div.label,
div.email-contact div.label,
div.forgotten-pin div.label {
    padding: 5px;
    margin-right: 15px;
}

input[type="text"],
input[type="password"]
{
    padding:                            5px;
    -moz-border-radius:                 5px;
    border-radius:                      5px;
    font-size:                          100%;
}

select
{
    font-size:                          100%;
}

input#input-small
{
    width:                              50px;   
}

div.validation-summary-errors
{
    padding:                            15px;
    -moz-border-radius:                 5px;
    border-radius:                      5px;
}

div.validation-summary-errors li
{
    margin:                             10px;
}

div#help-dialog,
div#logout-dialog
{
    width:                              550px;
    border-width:                       1px;
}

div.dialog-body p
{
    margin:                             10px;
    font-size:                          90%;
    line-height:                        150%;
}

div.dialog-header
{
    padding:                            10px;
}

div.dialog-header span#help-title,
div.dialog-header span#logout-title
{
    font-size:                          150%;
}

div.navigation
{
    width:                              100%;
    margin-top:                         20px;
}

div.navigation div.left
{
    margin:                             10px;
    margin-left:                        20px;
}

div.navigation div.right
{
    margin:                             10px;
    margin-right:                       20px;
}

div.trim-left,
div.trim-right
{
    width:                              502px;
    min-width:                          502px;
    border-top-width:                   2px;
    padding-top:                        10px;
    padding-bottom:                     10px;
}

div.trim-left
{
    padding-left:                       10px;
}

div.trim-right
{
    padding-right:                      10px;
}

div.footer,
div.bottom-bar
{
    width:                              100%;
}

span.version-label,
span.version-text
{
    font-size:                          80%;
}

div.dialog-navigation
{
    width:                              100%;
    min-height:                         40px;
    bottom:                             5px;
}

div.dialog-navigation div.left
{
    width:                              45%;
    margin-left:                        10px;
}

div.dialog-navigation div.right
{
    width:                              45%;
    margin-right:                       10px;
}

div.address,
div.emergency-contact,
div.email-contact,
div.forgotten-pin {
    margin-left: 20px;
}

div.address div.label
{
    min-width:                          175px;
}

div.emergency-contact div.label,
div.email-contact div.label
{
    min-width: 250px;
}

div.forgotten-pin div.label
{
    min-width:                          100px;
}

div.address input#Line1,
div.address input#Line2,
div.address input#Line3,
div.emergency-contact input#ContactNameAndRelationship
{
    width:                              275px;
}

div.address input#City,
div.address input#Telephone
{
    width:                              175px;
}

div.address input#PostCode
{
    width:                              100px;
}

div.forgotten-pin input#StudentID
{
    width:                              150px;
}

div.address select#County,
div.address select#Nation
{
    width:                              350px;
    border-width:                       1px;
    padding:                            2px;
}

/*
    Errors
*/
    div.address span.field-validation-error,
    div.emergency-contact span.field-validation-error,
    div.email-contact span.field-validation-error,
    div.forgotten-pin span.field-validation-error {
        margin-left: 10px;
        margin-top: 3px;
    }

input.input-validation-error,
select.input-validation-error
{
    padding:                            3px;
    border-width:                       3px;
}

/* padding range */
.para-top-5 { padding-top: 5px; }
.para-top-10 { padding-top: 10px; }
.para-top-15 { padding-top: 15px; }
.para-top-20 { padding-top: 20px; }
.para-top-25 { padding-top: 25px; }
.para-top-30 { padding-top: 30px; }
.para-bottom-5 { padding-bottom: 5px; }
.para-bottom-10 { padding-bottom: 10px; }
.para-bottom-15 { padding-bottom: 15px; }
.para-bottom-20 { padding-bottom: 20px; }
.para-bottom-25 { padding-bottom: 25px; }
.para-bottom-30 { padding-bottom: 30px; }


/* edit boxes*/
.edit-box {
    background-color: WhiteSmoke;
    width: 97%;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 15px;
}

/* table */
table {  width: 98%; }

thead {
    background-color: #c60c30;
    color: #ffffff;
}
thead tr th:first-child { text-align: left; }
thead tr th:nth-child(3), thead tr th:nth-child(4) { text-align: right; }
thead tr th:nth-child(2) { text-align: center; }

th, td { padding: 7px 10px; }

tbody tr:nth-child(even) { background: WhiteSmoke; }

tbody tr td:nth-child(2) { text-align: center; }
tbody tr td:nth-child(2) > div {
    margin: auto;
    text-align: center;
}

tbody tr td:nth-child(3), tbody tr td:nth-child(4) { text-align: right; }

tfoot {
    background: #ffffff;
    color: #000000;
    text-align: left;
}