/* Custom Fonts */
@font-face {
    font-family: trench;
    src: url("../font/trench.otf");
}

@font-face {
    font-family: titillium;
    src: url("../font/Titillium-Regular.otf");
}

/* Page Elements */
html, body {
    width : 100%;
    height: 100%;
    margin: 0px;
}

body {
    font-family: titillium;

    /*background: #000000 url(../../images/bg.png) repeat scroll top left;
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;*/
    background-color: #DDD;

}

/* Top Bar */
div.top-bar {
    position        : fixed;
    width           : 100%;
    height          : 56px;
    top             : 0px;
    left            : 0px;
    background-color: #475394;
    border-bottom   : 2px solid #475394 /*#005BE3*/;
    box-shadow      : 0px 0px 15px #222;
    z-index         : 10000;
}

div.top-bar .logo {
    position        : absolute;
    width           : 184px;
    height          : 48px;
    left            : 32px;
    margin          : 4px 0px;
    text-align      : center;
    line-height     : 48px;
    font-size       : 275%;
    background-color: transparent;
    color           : white /*#005BE3*/;
    font-family     : trench, titillium;
    font-weight     : bold;
    border-right    : 2px solid white /*#005BE3*/;
}

div.top-bar table.tabs {
    position   : absolute;
    left       : 224px;
    right      : 0px;
    top        : 0px;
    height     : 56px;
    color      : white;
    font-size  : 150%;
    font-family: titillium;
}

div.top-bar table.tabs td {
    padding: 0px 0px 0px 12px;
}

div.top-bar table.tabs a {
    text-decoration: none;
    color          : #EEE;
}

div.top-bar table.tabs a:hover {
    color      : #FFF;
    text-shadow: 0px 0px 2px #black;
}

div.under-bar {
    position: absolute;
    top     : 56px;
    width   : 100%;
    bottom  : 0px;
}

div.under-bar table.action-area {
    position: absolute;
    left    : 0px;
    right   : 0px;
    width   : 100%;
    height  : 100%;

    border-spacing: 0px;
    border-collapse:separate;
}

div.under-bar table.action-area td {
    padding: 0px;
}

div.under-bar td.left-pane {
    width           : 300px;
    height          : 100%;

    background-color: rgba(255, 255, 255, 0.65);
    border-right: 2px solid #CCC;
}

.left-pane a {
    text-decoration: none;
    color: black;
}

div.under-bar td.right-pane {
    height    : 100%;
}

div.under-bar td.left-pane div.page, div.under-bar td.right-pane div.page {
    width : 100%;
    height: 100%;

    overflow-y: auto;
    color: black;
}

.user-tab {
    width: 100%;
    height: 33px;
    border-bottom: 2px solid #999;
    margin: 8px;
}

.user-tab:hover {
    text-shadow: 1px 1px 2px #999;
}

.user-tab .img {
    float : left;
    width : 33px;
    height: 33px;
    background-color: #999;
}

.user-tab .text {
    float: left;
    margin-left: 6px;
    font-family: titillium;
    font-size  : 150%;
}

.user-tab img.sidebar-avatar {
    width: 100%;
    height: 100%;
}

.task-tab {
    width: 100%;
    font-size: 125%;
    padding: 4px 0px 4px 25px;
}

.unread-tab {
    float: right;
    margin-right: 38px;
    margin-top: 4px;
    padding: 0px 12px;
    font-size: 75%;
    color: white;
    background-color: #888;
    border-radius: 26px;
}

.task-tab:hover {
    background-color: rgba(0, 0, 0, 0.25);
    text-shadow: 1px 1px 2px #999;
}

div.under-bar td.left-pane div.page {
    overflow-x: hidden;
}

div.under-bar td.right-pane div.page {
    overflow-x: auto;
}

/* Sign up box */
@media all and (min-width: 1001px) and (min-height: 551px) {
    .signup-box {
        width: 1000px;
        height: 550px;
        background: white;
        text-align: center;
        line-height: 112px;
        font-size: 110%;
        box-shadow: 0px 0px 50px #999;

        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -275px;
        margin-left: -500px;
    }

    .login-box {
        height: 320px;
        margin-top: -160px;
    }
}
@media not all and (min-width: 1001px) and (min-height: 551px) {
    .signup-box {
        width: 100%;
        height: 100%;
        background: white;
        text-align: center;
        line-height: 112px;
        font-size: 110%;
        box-shadow: 0px 0px 50px #999;
    }

    .login-box {
        height: 100%;
    }
}

.signup-box span.signup {
    font-family: trench;
    font-size: 300%;
    font-weight: bold;
}

.signup-table {
    font-family: titillium;
    width: 100%;
    position: relative;
    top: -25;
    font-size: 20px;
    padding: 0px 25px 25px 25px;
    line-height: 40px;
}

.signup-table td {
    padding: 25px;
}

/*.signup-table*/ input[type="text"], /*.signup-table*/ input[type="password"] {
    width: 100%;
    font-size: 22px;
    height: 36px;

    background-color: transparent;
    border: 0px solid white;
    border-bottom: 2px solid black;
}

/*.signup-table*/ input[type="text"]:focus, /*.signup-table*/ input[type="password"]:focus {
    outline-width: 0;
    border-bottom: 2px solid #475394;
}

/*.signup-table*/ input[type="text"] {
    font-family: titillium;
    height: 36px;
}

/*.signup-table*/ input[type="radio"] {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    top: 4px;
    margin-left: 24px;
}

/*.signup-box*/ input[type="submit"] {
    background-color: white;
    border: 2px solid black;

    display: inline-block;
    width: 180px;
    height: 36px;

    position: relative;
    top: -20px;

    font-family: trench;
    font-weight: bold;
    font-size  : 150%;
}

/*.signup-box*/ input[type="submit"]:hover {
    background-color: black;
    color: white;
    border: 2px solid black;
}

/* Index Page Shit */
@media all and (min-width: 1025px) {
    .index-section {
        max-width: 1440px;
        width: 70%;
    }
}

@media not all and (min-width: 1024px) {
    .index-section {
        width: 100%;
    }
}

.index-section {
    margin: 24px auto;
    background-color: white;
    box-shadow: 0px 0px 50px #999;
    padding: 16px;
    font-size: 112%;
}

.index-section .title {
    font-size: 250%;
    margin-bottom: 16px;
    text-align: center;
}

.index-section .title-left {
    font-size: 250%;
    margin-bottom: 16px;
    text-align: left;
}

.index-section .hl {
    margin: 36px;
    border-bottom: 1px solid #AAA;
}

/* System Things */
.message-box {
    width: 50%;
    height: 112px;
    background: white;
    text-align: center;
    line-height: 112px;
    font-size: 110%;
    margin: 112px auto;
    box-shadow: 0px 0px 50px #999;
}

.dark-bg {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 58px;
    left: 0px;
    width: 100%;
    bottom: 0px;
    z-index: 10000;
}

.create-new-box {
    color: black;
    width: 60%;
    height: 376px;
    background-color: white;
    box-shadow: 0px 0px 50px #444;
    margin: auto;
    padding: 16px;
    position: fixed;
    left: 20%;
    top: calc(50% - 188px);
}

.create-new-box .create-new-title {
    font-size: 250%;
    margin-bottom: 24px;
}

.create-new-box input[type="submit"] {
    position: relative;
    top: 16px;
}

.todo-list-table td {
    border-bottom: 1px solid #AAA;
    font-size: 125%;
}

.todo-list-table tr {
    height: 40px;
}

.todo-list-table tr:hover {
    background-color: #DEDEDE;
}

.settings-section {
    width: 100%;
    border-bottom: 2px solid #AAA;
    font-size: 150%;
    margin-top: 24px;
    margin-bottom: 8px;
}