/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                           GENERAL SHII                           */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

/* color palette teehee!! 

black - #1E1916
gray - #524B46
dark gray - #423C3C
orange - #FF991C

*/

html {
    cursor: url("http://www.rw-designer.com/cursor-extern.php?id=116424"), auto;
}

html a:hover {
    cursor: url("http://www.rw-designer.com/cursor-extern.php?id=116438"), auto;
}

::selection {
    color: rgb(238, 226, 207);
    background-color: #ab550e;
}

body {
    font-family:'terminal';
    color: rgb(238, 226, 207);
    background-image: url("./pics/bg.png");
    background-color: #1e191644;
    background-blend-mode: multiply;
    background-size: 45%;
    margin: 0;
}

a {
    text-decoration: underline dotted;
}

a:hover {
    text-decoration: underline;
    color: #ab550e;
}

input {
    background-color: #332e2e;
    font-family: 'terminal';
    font-size: 15px;
    color: rgb(238, 226, 207);
    border: 2px inset #423C3C;
    outline: none;
}

input:hover {
    cursor: url("http://www.rw-designer.com/cursor-extern.php?id=116438"), auto;
}

input::placeholder {
    font-style: italic;
    color: #ab550e;
}

button {
    background-color: #ab550e;
    font-family: 'terminal';
    color: rgb(238, 226, 207);
    border: 2px outset #5e2e06;
}

button:hover {
    cursor: url("http://www.rw-designer.com/cursor-extern.php?id=116438"), auto;
    border: 2px inset #5e2e06;
    background-color: #88430b;
    color: rgb(173, 165, 151);
}

select {
    background-color: #332e2e;
    font-family: 'terminal';
    font-size: 15px;
    color: #ab550e;
    font-style: italic;
    border: 2px inset #423C3C;
    outline: none;
}

select:hover {
    cursor: url("http://www.rw-designer.com/cursor-extern.php?id=116438"), auto;
}

hr {
    border: none;
    border-top: 1px dotted #ab550e;
}

@font-face {
    font-family: 'terminal';
    src: url(../museumofnaturalhistory/stuff/fonts/terminal.ttf) format('truetype');
}


/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                           CLASSES :P                           */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

.glow {
    filter: drop-shadow(1px 1px 2px #FF991C);
}

.dot {
    border-radius: 50%;
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: rgb(196, 44, 36);
    vertical-align: middle;
}

.maindiv {
    background-color: #1E1916;
    border: 3px outset black;
    display: block;
    position: relative;
    padding: 33px 10px 10px;
    margin: 0 0 10px;
}

.maindiv div.top {
    background-color: #524B46;
    outline: 3px outset gray;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    padding-top: 2px;
}

.top span {
    margin: 0 5px;
}

.rootin {
    margin: 10px 0;
    border: 1px dotted #ab550e;
    padding: 10px;
    align-items: center;
}

.rootin:hover {
    cursor: url("http://www.rw-designer.com/cursor-extern.php?id=116438"), auto;
    border: 1px solid #ab550e;
    background-color: #352d29;
}

.rootin h1 {
    margin: 0;
    color: #FF991C;
    font-size: 16px;
}

.rootin p {
    margin: 2px 0 0;
    font-size: 14px;
    font-style: italic;
}

/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                           GRID STUFF :3                          */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

.container {
    display: grid;
    justify-self: center;
    width: 85%;
    margin-top: 10px;
    grid-template-columns: 25% auto 19%;
    grid-template-rows: 100px 40px auto;
    grid-auto-flow: row;
    grid-template-areas:
        "header header header"
        "nav nav nav"
        "profile main side";
}

.banner {
    background-color: #000000;
    text-align: center;
    align-content: center;
    width: 100%;
    height: 30px;
    margin: 0;
    font-family: monospace;
    font-size: 11px;
}

.header {
    grid-area: header;
    background-image: url(./pics/header.jpg);
    background-size: 95% 300%;
    background-position: 3% 20%;
    border: 3px outset black;
    color: #FF991C;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
}

.nav {
    grid-area: nav;
    margin-bottom: 10px;
    background-color: #524B46;
    border: 3px outset gray;
    color: #FF991C;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.profile {
    grid-area: profile;
}

.main {
    grid-area: main;
    margin: 0 10px;
}

.main a:hover {
    color: #ab550e;
}

.side {
    grid-area: side;
}

/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                       heh.. i modal'd again                      */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

.modal {
    position: fixed;
    display: none;
    left: 0;
    top: 0;
    background-color: #000000ab;
    width: 100%;
    height: 100%;
    z-index: 1;
    align-items: center;
    justify-content: center;
}

#modaldiv {
    display: block;
    width: 500px;
    height: 300px;
    padding: 40px 10px 0;
}

#modaltop {
    background-color: #ab550e;
    outline-color: #5e2e06;
}

.close {
    position: absolute;
    right: 5px;
    top: 3px;
}

.close:hover {
    color: #5e2e06;
}

#modalimg {
    display: block;
    width: 300px;
    height: 250px;
    margin: 0 auto;
    border: 2px solid #FF991C;
}

#modaltext {
    text-align: center;
    margin: 10px 0 0;
}

#screenclick {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: block;
}

#bigpic {
    width: 600px;
    display: block;
}
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                        header & nav idc                          */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

.header div.logo {
    width: max-content;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.header div.logo img {
    margin: 5px 15px 0 10px;
}

.header div.logo p {
    font-style: oblique;
    display: block;
}

.nav div.tabs {
    display: flex;
    flex-direction: row;   
    align-items: center; 
}

.tabs a {
    width: 78px;
    height: 24px;
    text-align: center;
    line-height: 24px;
}

.tabs a:hover {
    background-color: #423c38;
    outline: inset gray;
}

.nav div.search {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    font-size: 12px;
}

.search input {
    margin-right: 5px;
}
.search select {
    width: 100px;
    margin: 0 5px 0 10px;
}

/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                          purrrofile :3c                          */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

#profileinfo {
    padding-top: 36px;
}

#profileinfo div.top {
    background-color: #ab550e;
    outline-color: #88430b;
    padding-bottom: 3px;
}

#profileinfo div.top span {
    font-size: 20px;
}

#pfp {
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    margin-bottom: 11px;
}

#pfp img.pfpic {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
    outline: 1.5px solid #FF991C;
}

.note {
    display: flex;
    margin: 5px 0 10px;
    border: 1px dotted #ab550e;
    padding: 10px;
    align-items: center;
}

.note img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-right: 10px;
    border: 1px solid #FF991C;
}

.note a {
    margin: 0;
    color: #FF991C;
    font-size: 16px;
    font-weight: bold;
}

.note a:hover {
    color: #ab550e;
}

.note p {
    margin: 2px 0 0;
    font-size: 14px;
    font-style: italic;
}

/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                       side! side! side!                          */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

.featured {
    font-size: 14px;
}

.featured img {
    display: block;
    width: 99%;
    height: 125px;
    margin: auto;
    margin-bottom: 5px;
    border: 2px solid #FF991C;
}

.featured a {
    margin: 0;
    color: #FF991C;
    font-weight: bold;
}

.featured h1 {
    font-size: 18px;
    margin: 0;
}

/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */
/*                    mainmaaaainmain yay <3                        */
/* =^..^=   =^..^=   =^..^=    =^..^=    =^..^=    =^..^=    =^..^= */

.mainpost {
    margin: 10px 20px 35px;
    border: 1px dotted #ab550e;
    padding: 10px 20px;
}

.mainpost legend {
    color: #FF991C;
    font-size: 18px;
    font-weight: bold;
    padding: 0 10px;
}

.mainpost legend span {
    color: rgb(238, 226, 207);
    font-weight: normal;
}

.replydiv {
    font-size: 14px;
}

.replydiv a {
    color: #FF991C;
    margin: 2px 0;
}

.replydiv p {
    color: gray;
    border-left: 1px solid gray;
    margin: 3px 15px;
    padding: 10px 0 10px 10px;
}

.postdiv a {
    color: #FF991C;
    font-size: 16px;
    margin: 2px 0;
}

.postdiv p {
    color: rgb(238, 226, 207);
    margin: 3px 0;
}

.postpic {
    width: 250px;
    display: inline-block;
}

.postpic:hover {
    cursor: url("http://www.rw-designer.com/cursor-extern.php?id=116438"), auto;
    opacity: 0.5;
}