/* side navigation */
.sidenav {
    background-color: #696969;
    display: none;
    font-size: 11px;
    font-family: Verdana, serif;
    height: 100%;
    width: 180px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    overflow-x: hidden;
    padding-top: 30px;
}
.sidenav a {
    padding: 4px 8px 4px 16px;
    text-decoration: none;
    font-size: 11px;
    color: white;
    display: block;
}
.sidenav a:hover {
    color: yellow;
}
.sidenav .closebtn {
    position: absolute;
    top: 0;
    font-size: 18px;
    text-align: center;
    width: 180px;
}
.sidenav p {
    font-size: 12px;
    font-weight: normal;
}
/* body */
a {
    text-decoration: none;
}
a:hover {
    background-color: orange;
    text-decoration: none;
}
.divBiblical {
    background: url("https://junursal2.github.io/junursal2.basahon/images/basahon/biblical.png") right bottom no-repeat;
    background-size: 110px;
    background-color: #ffffb3;
    margin-top: 55px;
    padding-top: 1px;
    padding-bottom: 1px;
}
.divComputers {
    /* background: url("https://junursal2.github.io/junursal2.basahon/images/basahon/computer.png") right bottom no-repeat;
    background-size: 75px; */
    background-color: #b3ffb3;
    padding-bottom: 1px;
}
.divDisasters {
    background: 
        url("https://junursal2.github.io/junursal2.basahon/images/basahon/disasters9.png") right center no-repeat, 
        url("https://junursal2.github.io/junursal2.basahon/images/basahon/disaster.jpg") right bottom no-repeat;
    background-size: 300px auto, 100px auto;
    background-color: #ffedcc;
    padding-top: 1px;
    padding-bottom: 1px;
}
.divDisasters > p {
    padding-left: 30px;
}
.divExcel {
    background: url("https://junursal2.github.io/junursal2.basahon/images/basahon/excel2.png") right bottom no-repeat;
    background-size: 50px;
    background-color: #D6F5D6;
    padding-top: 0.5px;
    padding-bottom: 1px;
}
.divExcel > p {
    padding-left: 30px;
}
.divFun {
    background: url("https://junursal2.github.io/junursal2.basahon/images/basahon/fun-stuff.gif") right bottom no-repeat;
    background-size: 110px;
    background-color: #DCDCDC;
    padding-top: 0.5px;
    padding-bottom: 1px;
}
.divHPOI {
    /* background: url("https://junursal2.github.io/junursal2.basahon/images/basahon/hpoilogo2.png") right bottom no-repeat;
    background-size: 100px; */
    background-color: #F0E68C;
    padding-bottom: 1px;
}
.divLifehacks {
    background: url("https://junursal2.github.io/junursal2.basahon/images/basahon/lifehacks.jpg") right bottom no-repeat;
    background-size: 90px;
    background-color: #ffffcc;
    padding-top: 0.5px;
    padding-bottom: 1px;
}
.divLMS {
    background: url("https://junursal2.github.io/junursal2.basahon/images/basahon/love-marriage-sex.jpg") right bottom no-repeat;
    background-size: 100px;
    background-color: #ffcccc;
    margin-top: 55px;
    padding-top: 0.5px;
    padding-bottom: 1px;		
}
.divMoney {
    background: url("https://junursal2.github.io/junursal2.basahon/images/basahon/coins.png") right bottom no-repeat;
    background-size: 60px;
    background-color: #eaccff;
    padding-top: 0.5px;
    padding-bottom: 1px;
}
.divNature {
    background: url("https://junursal2.github.io/junursal2.basahon/images/basahon/nature.png") right bottom no-repeat;
    background-size: 125px;
    background-color: #ccffcc;
    padding-top: 5px;
    padding-bottom: 1px;
}
.divOptics {
    /* background: url("https://junursal2.github.io/junursal2.basahon/images/basahon/optics.gif") right bottom no-repeat;
    background-size: 100px; */
    background-color: #f9d2f9;
    padding-bottom: 1px;  
}
.divOthers {
    background-color: #D3D3D3;
    padding-top: 0.5px;
    padding-bottom: 1px;
}
.divQuality {
    /* background: url("https://junursal2.github.io/junursal2.basahon/images/basahonn/quality.png") right bottom no-repeat;
    background-size: 100px; */
    background-color: #99ffcc;
    padding-bottom: 1px; 
}
.divTrivia {
    background: url("https://junursal2.github.io/junursal2.basahon/images/basahon/brainbulb.png") right bottom no-repeat;
    background-size: 65px;
    background-color: #b3ffb3;
    padding-top: 0.5px;
    padding-bottom: 1px;
}
.divVirtues {
    background: url("https://junursal2.github.io/junursal2.basahon/images/basahon/virtue.jpg") right bottom no-repeat;
    background-size: 100px;
    background-color: #ffdb99;
    padding-top: 0.5px;
    padding-bottom: 1px;
}
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 12px;}
}
/* Mobile Responsive */
@media (max-width: 768px) {
  *:not(#header) {
    background-image: none !important;
  }
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
}
.col-1 {
    width: 50%; 
    padding-top: 4px; 
    padding-right: 4px;
}
.col-2 {
    width: 50%;
    padding-top: 4px;
    padding-left: 4px;
}
h1, h2, h3, h4, h5, h6 {
    font-family: Verdana, sans-serif;
    padding-left: 10px;
    margin-bottom: 0.3em;
}
.new {
    color: red;
}
p {
    font-size: 14px;
    font-weight: bold;
    font-family: "Trebuchet MS",sans-serif;
}
li {
    font:12px Verdana, sans-serif;
}
ol {
    margin-left:0;
    padding-left:20px;
}
ul {
  padding-left: 20px;
  margin-left: 0;
  margin-top: 0.3em;
  margin-bottom: 0.5em;
}
ul ul {
  /* list-style-type: circle;  /* optional: a different bullet style */
  margin-left: -0.7em;        /* pulls sublist bullet left */
  margin-top: revert;
  margin-bottom: revert;
}
sup {
    color: black;
    font-size: 8px;
}

/* header */
#header {
    position: fixed;
    height:50px;
    /* height: 8vh; /* fixed relative to screen height */
    /* height: 8%; */
    width: 100%;
    top: 0px;
    margin-left: -8px;
    background-color: crimson;/* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Fx 3.6 to 15 */
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* Standard syntax (must be last) */
}
#main {
    position: relative;
    font: 36px Georgia, serif;
    font-weight: bold;
    color: cyan;
    text-shadow: 0 0 3px red, 0 0 5px red;
    text-align: center;
    top: -20px;
}
#basahon {
    text-decoration: none;
}
#basahon:hover {
    background-color: transparent;
}
#menu {
    color: white;
    cursor: pointer;
    font-size: 36px;
    font-weight: bold;
    margin-left: 10px;
    margin-top: -2px;
    float: left;
    text-shadow: 1px 1px 4px #000000;
}
#supscript {
    color: white;
    cursor: pointer;
    font-family: Verdana, serif;
    font-size: 24px;
    margin-right: 8px;
    margin-top: 2px;
    float: right;
    text-shadow: 1px 1px 4px #000000;
}
#suptxt {
    color: white;
    font-family: Verdana, serif;
    font-size: 10px;
    text-shadow: 1px 1px 4px #000000;
}
.header2 {
    position:fixed;
    width: 100%;
    background-color: dimgray;
    font-family: "Trebuchet MS",sans-serif;
    font-size: 10.5px;
    float: left;
    /* margin-top: 21px; */
    margin-top: 40px;
    margin-left: -8px;
    padding-left: 10px;
}
#newinred {
    color: red;
    background-color: white;
}
#noteNew {
    color: yellow;
    float: left
}
#noteNew:hover {
    background-color: transparent;
    cursor: default;
}
#noteUpdate {
    background-color: transparent;
    color: yellow;
    cursor: default;	
    float: right;
    margin-right: 8px;
}
#bottom {
    font-size: 10.5px;
}
#emdates {
    font-size: 10.5px;
}
#owner {
    font-size: 10.5px;
}

/* footer */
footer {
    font: 10px "Trebuchet MS", serif;
    line-height: 150%;
    background: lightgreen;
    background-size: cover;
    text-align: center;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 50px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 70%;
    max-width: 600px;   /* prevents it from getting too wide on desktop */
    box-sizing: border-box; /* include padding + border in width calc */
    overflow-x: auto;   /* if something inside is wide, allow scroll */
    border-radius: 8px; /* optional, just looks better */
}
/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover, .close:focus {
    color: red;
    text-decoration: none;
    cursor: pointer;
}

/* table */
table {
    font-family: arial, sans-serif;
    font-size: 12px;
    border-collapse: collapse;
    width: 90%;
}
th {
    background-color: gray;
    border: 1px solid #000000;
    color: white;
    text-align: center;
    padding: 8px;
}
td {
    border: 1px solid #000000;
    text-align: left;
    padding: 8px;
}
tr:nth-child(odd) {
    background-color: #dddddd;
}