/* Colours
-----------------------------------------------------------------------------*/
:root {
    --main-bg-colour: #FFFFFF;
    --body-bg-colour: #FFFFFF;
    --light-text-colour: #e9e9ee;
    --highlight-text-colour: #a8a0ad;
    --main-colour: #498abd;
    --dark-text-colour: #6d767f;
    --dark-colour: #687079;
    --light-background: #FFFFFF;
    --error-colour: #992020;
}

/* Main Wrappers
-----------------------------------------------------------------------------*/
body {
    font: .75em/1.125em Arial, sans-serif;
    background-color: var(--main-bg-colour);
}

body a {
    -webkit-transition: color .3s;
    -webkit-transition: background-color .3s;
    transition: color .3s;
    transition: background-color .3s;
}

/* Header
-----------------------------------------------------------------------------*/
.headerrow {
    width: 100%;
    vertical-align: middle;
}
.logo {
    height: 99px;
    width: 265px;
    margin: 10px;
}
.headtext {
    float: right;
    font-size: 3em;
    padding-top: 1em;
    color: var(--main-colour);
    vertical-align: middle;
}

.headerhr {
    color: var(--main-colour);
    background-color: var(--main-colour);
    height: 3px;
}
/* Menu Bar
-----------------------------------------------------------------------------*/
.menubar {
    background-color: var(--main-colour);
    height: 3em;
    margin-bottom: 5px;
    padding-top: 5px;
    text-align: right;
}
.menubar a {
    color: var(--light-text-colour);
    font-size: 1.5em;
    font-weight: bold;
    border-left: 20px;
    text-decoration: none;
    border-radius: 4px;
    padding-left: 5px;
    padding-right: 5px;
}

.menubar a:hover {
    color: var(--dark-colour);
}

.menubutton {
    display: inline-block;
    padding-left: 20px;
    height: 3em;
    margin-top: 1em;
}
.menubutton a {
    color: var(--light-text-colour);
    font-size: 2em;
    font-weight: bold;
    border-left: 20px;
    text-decoration: none;
    border-radius: 4px;
    padding-left: 10px;
    padding-right: 10px;
}
.menubutton .selected {
    background-color: var(--light-text-colour);
    color: var(--main-colour);
}
.menubutton a:hover {
    background-color: var(--light-text-colour);
    color: var(--main-colour);
}
/* Login
-----------------------------------------------------------------------------*/
.loginarea {
    display: inline-block;
}

.LoginBlock {
    width: 60%;
    margin-left: 20%;
}

.Login {
    background-color: var(--main-colour);
    color: var(--light-text-colour);
    border-radius: 25px;
    margin-left: auto;
    margin-right: auto;
    width: 380px;
    text-align: center;
}

.Login table {
    border: 0px;
    border-spacing: 0.5em;
    padding: 0px;
    width: 100%;
}

.Login td.msg {
    font-size: 1.5em;
    font-weight: bold;
    height: 3em;
    text-align: center;
}

.Login td.err {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--error-colour);
    /*height: 3em;*/
    text-align: center;
}

.Login td.button {
    text-align: right;
    padding-right: 20px;
}

/* Main
-----------------------------------------------------------------------------*/
.main {
    display: block;
    height: 90%;
}
.body {
    display: block;
    height: 80%;
}
.display {
    position: relative;
    float: right;
    height: 100%;
    width: calc(69% - 55px);
    text-align: center;
}

div .pagemsg {
    padding-left: 5%;
    padding-right: 10%;
    padding-top: 30px;
}
.main-right {
    float: right;
    position: relative;
    width: 80%;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.typespan {
    font-size: 1.5em;
    display: block;
    margin: 20px 0px 0px 10px;
}

/* Footer
-----------------------------------------------------------------------------*/
.footer {
    background-color: var(--main-colour);
    color: var(--light-text-colour);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4em;
    font-weight: bold;
    padding-left: 5px;
    padding-top: 10px;
}
.footer a {
    text-decoration: none;
    color: var(--light-text-colour);
}

/* Left Menu
-----------------------------------------------------------------------------*/
.leftmenu {
    position: relative;
    padding-left: 50px;
    font-size: 1.5em;
    overflow-y: scroll;
    height: 100%;
}
.leftmenu .filemenu {
    display: block;
    padding-top: .5em;
    padding-bottom: .6em;
    cursor: pointer;
    border-radius: 4px;
    vertical-align: middle;
    line-height: 1.2;
    padding-left: 1em;
    width: 60%;
}

.displayed {
    background-color: var(--main-colour);
    color: var(--light-text-colour);
}

/* Right Pane
-----------------------------------------------------------------------------*/

.right {
    float: right;
    width: 15%;
}