//body * { border: 1px solid red !important;}
div.menuOpen { margin-left: 0px !important;}
div.topright { float: right; margin-right: 100px; font-size: 11px; position: relative; z-index: 10;}
div.topright table tr:nth-child(2) { visibility: hidden; opacity: 0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;}
div.topright table.optionsOpen tr:nth-child(2) { visibility: visible !important; opacity: 1;}
div.topright tr:first-child a { padding: 10px; display: block;}
div.topright tr:first-child td { padding: 0px; width: 100px; text-align: center;}
div.topright tr:first-child td.menupad { padding: 10px;}
div.topright td:hover, div.topright li:hover, div.topright li:hover a { color: white; cursor: pointer;}
div.topright td li a { display: table-cell; padding: 6px 30px;}
div.topright ul { display: table; border: 1px solid black; margin: 0; box-shadow: 0px 0px 10px black; background-color: #171a21; list-style-type: none; padding: 0;}
div.topright li { display: table-row; padding: 6px 30px;}
div.topright i { padding: 0; font-size: 16px; display: inline;}
span.smallcaps { font-size: smaller; text-transform: capitalize;}
div { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
div.top { display: block; position: absolute; left: 0; top: 0; background-color: #171a21; height: 100px; width: 100%; margin: 0; padding: 5px; border: none; color: #b8b6b4; box-shadow: 0px 4px 15px #1f232d; white-space: nowrap;}
div.top_spacer { height: 100px; width: 100%; margin: 0 0 15px 0; padding: 0;}
div.bottom { display: block; position: fixed; left: 0; bottom: 0; background-color: #171a21; padding: 5px; width: 100%; margin: 0; border: none; color: #b8b6b4; box-shadow: 0px -4px 15px #1f232d; font-size: 10px; text-align: center; height: 25px; white-space: nowrap;}
div.bottom_spacer { height: 25px; width: 100%; margin: 0; padding: 0;}
body { width: auto; overflow-x: hidden; margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-image: url("imgs/bg.jpg"); background-color: #22465e; text-decoration: none; font-family: "Motiva Sans", Sans-serif; height: 100vh;}
a { color: #b8b6b4; text-decoration: none;}
a:hover { color: white;}
div.top img.logo { float: left; margin: 10px 50px; height: 80%;}
div.top img.logoTxt { height: 40px; margin-top: 30px;}
div.top img.menu { display: none;}
div.top h1 { display: inline; vertical-align: middle; line-height: 100px; font-family: 'Faster One', cursive; text-shadow: 0 0 5px black; white-space: nowrap;}
div.top td { white-space: nowrap;}
table { border-collapse: collapse;}
div.topbottom { position: absolute; bottom: 0; padding: 0px 0px 5px 300px;}
div.topbottom td { padding: 0px 10px; text-align: center; text-transform: uppercase;}
div.topbottom td a { display: block; width: 100%;}
div.topbottom td:first-child { display: none;}
div.topbottom td.smallMenu { display: none;}
div.content { padding: 0px 15px 15px 15px; color: #c6d4df; text-shadow: 0 0 5px black; overflow: hidden;}
h2, h3 { display: inline;}
.logoS { font-family: 'Impact'; letter-spacing: 2px; font-weight: normal;}
.sred { color: #e60012;}
.pblue { color: #003791;}
.boxglow1 { box-shadow: 2px 2px 10px #e60012;}
.boxglow2 { box-shadow: 2px 2px 10px #003791;}
.red { color: #ed1c24;}
.blue { color: #00a2e8;}
.green { color: #22b14c;}
.orange { color: #ff7f27;}
.yellow { color: yellow;}
ul { margin-top: 5px; margin-bottom: 5px;}
body:hover { cursor: default;}
body a:hover { cursor: pointer;}
i { padding: 0px 10px 0px 0px; font-size: 20px; vertical-align: bottom;}
div.box { border: 1px solid grey; padding: 20px; border-radius: 15px; box-shadow: 5px 6px 10px black; display: inline-block; margin-left: 10%; margin-right: 10%; background-color: rgb(40,40,40, 0.5);}

input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], input[type=tel], textarea, select { background-color: #121a24; color: #fff; border: 1px solid #000; border-radius: 3px; box-shadow: 1px 1px 0px #45556c; width: 300px; padding: 5px; margin: 4px 0;}
input[type=button] { padding: 0 15px; font-size: 15px; line-height: 30px; border-radius: 2px; display: inline-block; background-color: #274155; color: #67c1f5; border: none;}
input[type=button]:hover { color: white; background-color: #67c1f5; cursor: pointer;}
textarea { resize: none; overflow: auto; font-family: "Motiva Sans", Sans-serif; font-size: 14px;}

body.admin input[type=button], input[type=file], body.admin input[type=submit], body.admin .btn, input[type=file]+label {
    background: #636363;
    background-image: -webkit-linear-gradient(top, #636363, #303030);
    background-image: -moz-linear-gradient(top, #636363, #303030);
    background-image: -ms-linear-gradient(top, #636363, #303030);
    background-image: -o-linear-gradient(top, #636363, #303030);
    background-image: linear-gradient(to bottom, #636363, #303030);
    -webkit-border-radius: 20;
    -moz-border-radius: 20;
    border-radius: 20px;
    color: #ffffff;
    font-size: 14px;
    padding: 4px 10px 2px 10px;
    text-decoration: none;
    display: inline-block;
    margin: 10px 0px 10px 0px;
    min-width: 100px;
    border: none;
    text-align: center;
    text-shadow: 0 0 black, 0 1px black, 1px 0 black, 0 0 black;}
body.admin input[type=button]:hover, input[type=file]:hover, body.admin input[type=submit]:hover, body.admin .btn:hover, input[type=file]:focus+label, body.admin input[type=file]+label:hover {
    background: #9e9e9e;
    background-image: -webkit-linear-gradient(top, #9e9e9e, #575757);
    background-image: -moz-linear-gradient(top, #9e9e9e, #575757);
    background-image: -ms-linear-gradient(top, #9e9e9e, #575757);
    background-image: -o-linear-gradient(top, #9e9e9e, #575757);
    background-image: linear-gradient(to bottom, #9e9e9e, #575757);
    text-decoration: none;
    cursor: default;
}
input[type=number] { -webkit-appearance: none; -moz-appearance: textfield;}
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}
input[type=file] { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1;}
input[type=file]+label i, .btn i { padding-right: 5px; font-size: 20px; vertical-align: middle;}
input[type=button].delBtn { color: red; padding: 0px 10px; margin: 0px; min-width: 0;}
input[type=button].delBtn:hover { cursor: pointer;}

body.admin ul { list-style-type: none; margin: 0; padding: 0; background-color: #2f3136; height: 100%;}
body.admin li { padding: 8px 16px; white-space:nowrap; overflow: hidden; background-color: #2f3136; color: #99ccff; text-shadow: 0 0 black, 0 1px black, 1px 0 black, 0 0 black;}
body.admin li:hover { cursor: pointer; background-color: #464a52;}

.noselect { 
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}


/* Admin Menu Styles */
div.menu { float: left; padding-right: 25px; margin: 0; font-size: 14px;}
div.menu ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #d2d2d2;}
div.menu li { display: block; border: 1px solid black; padding: 0; background-color: #d2d2d2; color: black; text-shadow: 0 0 #d9d9d9, 0 1px #d9d9d9, 1px 0 #d9d9d9, 0 0 #d9d9d9;}
div.menu li:hover { cursor: pointer; background-color: #555; color: white; text-shadow: 0 0 black, 0 1px black, 1px 0 black, 0 0 black;}
div.menu li.h { font-weight: bold; background-color: #4e8787; cursor: default; color: white; padding: 8px 8px; text-shadow: 0 0 black, 0 1px black, 1px 0 black, 0 0 black;}
div.menu li.t { font-weight: bold; background-color: #8e0d0d; color: white; padding: 12px 8px; text-align: center; text-transform: uppercase; text-shadow: 0 0 black, 0 1px black, 1px 0 black, 0 0 black;}
div.menu li.t:hover { background-color: #590d0d;}
div.menu i { padding: 0px 10px 0px 0px; font-size: 20px; vertical-align: bottom;}
div.menu li a { display: block; width: 100%; height: 100%; padding: 8px 16px; text-decoration: none; color: inherit;}

/* Spinner */
.lds-roller { display: inline-block; position: relative; width: 32px; height: 32px;}
.lds-roller div { animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 16px 16px;}
.lds-roller div:after { content: " "; display: block; position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; margin: -1.5px 0 0 -1.5px;}
.lds-roller div:nth-child(1) { animation-delay: -0.036s;}
.lds-roller div:nth-child(1):after { top: 25px; left: 25px;}
.lds-roller div:nth-child(2) { animation-delay: -0.072s;}
.lds-roller div:nth-child(2):after { top: 27px; left: 22.5px;}
.lds-roller div:nth-child(3) { animation-delay: -0.108s;}
.lds-roller div:nth-child(3):after { top: 28.5px; left: 19.5px;}
.lds-roller div:nth-child(4) { animation-delay: -0.144s;}
.lds-roller div:nth-child(4):after { top: 29px; left: 16px;}
.lds-roller div:nth-child(5) { animation-delay: -0.18s;}
.lds-roller div:nth-child(5):after { top: 28.5px; left: 12.5px;}
.lds-roller div:nth-child(6) { animation-delay: -0.216s;}
.lds-roller div:nth-child(6):after { top: 27px; left: 9.5px;}
.lds-roller div:nth-child(7) { animation-delay: -0.252s;}
.lds-roller div:nth-child(7):after { top: 25px; left: 7px;}
.lds-roller div:nth-child(8) { animation-delay: -0.288s;}
.lds-roller div:nth-child(8):after { top: 22.5px; left: 5px;}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.hidden { display: none !important;}
.fading { display: none;}
.fadingGood { color: #00ff00;}
.fadingBad { color: #ed1c24;}

/*
text-shadow: 0 0 5px black;}
    font-family: 'Luckiest Guy', cursive;
    font-family: 'Permanent Marker', cursive;
    font-family: 'Gloria Hallelujah', cursive;
    font-family: 'Dosis', sans-serif;
    font-family: 'Bangers', cursive;
    font-family: 'Press Start 2P', cursive;
    font-family: 'Faster One', cursive;
*/
@font-face {
    font-family: 'CareerCriminalCS';
    src: url('css/CareerCriminalCSRegular.woff') format("woff");
}
@font-face {
    font-family: 'Faster One';
    src: url('css/FasterOne-Regular.ttf') format("truetype");
}