html {
height: 100%;
}
body {
background: #94958b;
display: flex;
flex-flow: row wrap;
font-family: Calisto MT,Bookman Old Style,Bookman,Goudy Old Style,Garamond,Hoefler Text,Bitstream Charter,Georgia,serif;
padding: 0;
margin: 0;
box-sizing: border-box;
height: 100%;
}
#wrapper {
width: 100%;
text-align: center;
}
#main_menu {
text-align: left;
padding: 15px;
background: #e0e0e2;
border-bottom: 2px solid #656565;
margin: 0 0 10px 0;
}
#main_menu a {
padding: inherit;
text-decoration: none;
border-right: 1px solid #656565;
transition: all 0.5s ease-out;
}
#main_menu a:last-of-type {
border-right: none;
}
#main_menu a:hover {
color: #FFF;
background: #464655;
text-decoration: none;
transition: all 0.5s ease-out;
}
#notifications {
float: right;
position: absolute;
top: 0;
right: 0;
}
#notifications img {
display: none;
}
#notifications:hover > .notifications,
#notifications:focus > .notifications {
display: block;
}
.notifications {
box-shadow: -1px 1px 1px #555;
color: #000;
display: none;
float: right;
position: absolute;
right: 5px;
top: 52px;
width: 450px;
background: #ABABAB;
border: 1px solid #656565;
border-radius: 2px;
z-index: 99;
}
a {
color: #161b33;
}
table {
display: inline-table;
vertical-align: top;
border-collapse: collapse;
margin: 0 0 10px 0;
empty-cells: show;
}
.full_table {
width: calc(100% - 10px);
}
.half_table {
width: calc(50% - 10px);
}
.quarter_table {
width: calc(25% - 10px);
}
.table_head {
background: #FFF;
border-top: 2px solid orange;
border-bottom: 2px solid yellow;
}
.table_head td {
padding: 5px 2px;
font-weight: bold;
}
tr.user_data:nth-child(odd) {
background: #FAFAFA;
}
tr.user_data:nth-child(even) {
background: #ABABAB;
}
.user_data {
line-height: 1.5em;
}
.user_data td {
padding: 4px 2px;
}
.user_data td:first-of-type {
border-left: 2px solid #656565;
}
.user_data td:last-of-type {
border-right: 2px solid #656565;
}
.mean_neck {
border: 2px solid #656565;
}
.mean_neck td {
font-weight: bold;
padding: 5px 2px;
background: #464655;
color: #FFF;
}
.demon {
display: inline-table;
}
.demon tr:last-of-type {
border-bottom: 2px solid #656565;
}
.warning {
color: #FFF;
background: red;
border-bottom: 1px solid #FFF;
padding: 7px 5px;
}
.warning:last-of-type,
.notice:last-of-type {
border-bottom: none;
}
.notice {
color: #F2F2F2;
background: #0B6121;
border-bottom: 1px solid #FFF;
padding: 7px 5px;
}
#footer {
font-size: 85%;
border-top: 2px solid #656565;
margin-top: 10px;
padding: 10px 5px;
background: #bebbbb;
width: 100%;
}
#footer #note {
text-align: center;
}
.bold {
font-weight: bold;
text-decoration: underline;
}
.black {
color: #000;
}
h1, h2 {
padding: 0 15px;
}
h1 > span {
font-size: 0.75em;
}
.lefttext {
text-align: left;
}
/* Pages */
.header {
color: #FFF;
background: #161b33;
border: 2px solid #161b33;
border-bottom: none;
width: 90%;
margin: 0 auto;
border-radius: 2px 2px 0 0;
}
.header > h3 {
padding: 7px 5px;
margin: 0;
}
.content {
background: #F2F2F2;
width: 90%;
margin: 0 auto;
padding: 7px 0;
border-radius: 0 0 2px 2px;
border: 2px solid #656565;
}
.content p {
padding: 0 10px;
text-align: justify;
line-height: 1.5em;
}
/* Popup Snip: https://codepen.io/imprakash/pen/GgNMXO */
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
display: none;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 45%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h3 {
margin-top: 0;
}
.popup .close, .popup .close2 {
position: absolute;
top: 10px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover,
.popup .close2:hover {
color: #06D85F;
cursor: pointer;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
/* Add some responsiveness */
@media screen and (max-width: 700px){
table {
width: calc(100% - 2px) !important;
}
#footer span {
padding: 10px 0 0 0;
}
.popup {
width: 85%;
}
#notifications span {
display: none;
}
#main_menu #notifications:hover {
background: none;
}
#notifications img {
display: block;
}
.notifications {
width: 300px;
}
}