/*
COLORS:
#191919 [background, no opacity]
#3C3C3C [input field background]
#BFDDE5 [ghost button hover]
#8AC0CC 138,192,204 [text, borders, hr]
#24D7FF [headers]
#B3B3B3 [placeholder text]
#4EB1F9 [paragraph link color]
*/


body, html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background-image: url("/static/mast/images/background.jpg");
    background-size: 25%;

    color: #8AC0CC;
    font-family: 'Open Sans', sans-serif;
}


/* Ghost Buttons */
.ghost-button, .ghost-button:hover, .ghost-button:active, .ghost-button:link, .ghost-button:visited {
    color: #8AC0CC;
    text-decoration: none;
}
.ghost-button {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 8px;

    min-width: 120px;
    height: 40px;

    border: 1px solid #8AC0CC;

    background-color: transparent;

    font-family: 'Open Sans', sans-serif;
    font-size: 21px;
    font-weight: 300;
}
.ghost-button:hover {
    transition: all 0.3s ease-out;

    background-color: #BFDDE5;
    color: #191919;
}

/* Highlighted ghost buttons */
@keyframes ghost-button-highlight {    
    from, to { border-color: 1px solid rgba(138,192,204,1); }
    50% { border-color: rgba(138,192,204,0.66); }
}  
.ghost-button.highlight {
    animation: ghost-button-highlight 1s ease-in-out infinite; 
}

/* Smaller ghost buttons (for form buttons and stuff) */
.ghost-button-sm {
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;

    border: 1px solid #8AC0CC;

    background-color: transparent;
    color: #8AC0CC;

    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 300;

    cursor: pointer;
}
.ghost-button-sm:hover {
    transition: all 0.3s ease-out;

    background-color: #BFDDE5;
    color: #191919;
}


.code-inline {
    font-family: monospace;
}


a {
    color: #4EB1F9;
}

hr {
    border: 0;
    border-bottom: 1px dashed #8AC0CC;
    background: transparent;
}

h1, h2, h3, h4, h5, h6 {
    color: #24D7FF;
}


#container {
    position: relative;
    min-height: 100%;
    width: 980px;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;

    background-color: #191919;

    border-top: 0;
    border-bottom: 0;
    border-left: 128px solid transparent;
    border-right: 128px solid transparent;

    box-sizing: content-box;
    background-clip: padding-box;
    border-image: url("/static/mast/images/border.png") 368 368 repeat;
}


#account-info {
    position: absolute;
    top: 8px;
    right: 40px;
    z-index: 1;

    text-align: right;
}


#navbar {
    width: 100%;
    height: 240px;
}

#navbar #navbar-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;

    position: relative;
    max-width: 980px;
    height: 100%;
    margin: 0 auto;
}

#navbar #navbar-brand {
    margin-top: 12px;
}

#navbar #navbar-links {
    display: flex;
    padding: 0;
    list-style: none;
}

#navbar #navbar-links li {
    padding: 8px;
}
#navbar #navbar-links li a {
    float: right;
}
#navbar #navbar-links li.active a, #navbar #navbar-links li a:hover {
    background-color: #BFDDE5;
    color: #191919;
}

#footer {
    padding-bottom: 24px;
    text-align: right;
}


#messages {
    margin: 0 0 8px 0;
    padding: 0;
    list-style: none;
}
#messages li.info {
    color: #ACFFFC;
}
#messages li.success {
    color: #67FF57;
}
#messages li.warning {
    color: #FFFD67;
}
#messages li.error {
    color: #FF9292;
}


/* FORM STUFF */
input {
    display: block;
    padding: 8px;
    margin-bottom: 4px;
    width: 250px;
    outline: none;
    border: 1px solid #8AC0CC;
    background-color: #3C3C3C;

    color: #8AC0CC;
}

::-webkit-input-placeholder {
    color: #B3B3B3;
}
:-moz-placeholder {
    color: #B3B3B3;
}
::-moz-placeholder {
    color: #B3B3B3;  
}
:-ms-input-placeholder {
    color: #B3B3B3;
}



/* Responsive styling */
@media (max-width: 1320px) {
    #container {
        border: none;
        width: auto;
    }
}