/*cyber definitions*/

* {-webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;}

body {font-family: system-ui,-apple-system,BlinkMacSystemFont,Roboto,Oxygen-Sans,Ubuntu,Cantarell,helvetica neue,sans-serif; background: black;}

h1, h3 {font-size: 30px; margin: 10px 0 20px 0; text-align: center;}
h2 {font-size: 28px; margin: 20px 0px;}
h4 {font-size: 24px; text-align: center; margin: 20px 0px;}
h5 {font-size: 20px; margin-top: 20px;}

a {color: #11600e;}
ul {list-style: square; margin: 10px 0 20px 20px;}
ul li {padding: 10px 0 0;}

img {max-width: 800px; height: auto;}

.references {font-size: 10px; color: #888; margin: 20px;}
.text-centred {text-align: center; margin-bottom: 20px;}
.adHolder {display: flex; align-items: center; justify-content: space-between !important; position: relative; left: 50%; width: 640px; margin-left:-320px; height: 260px;}
.contentImage {margin: 5px 20px 5px 0px;}
.pageImage {margin: 30px 0px; text-align: center;}
.pageImage img {border: #e0e0e0 4px solid;}
.imageBlock {margin: 20px 0px;}
.imageBlock img {margin: 10px 10px 0px 0px; border: 4px solid #c0c0c0; border-radius: 3px; float: left;}
.top20 {margin-top: 20px;}
.bottom20 {margin-bottom: 20px;}
.topright {
    position: absolute;
    top: 0;
    left: 660px;
}
table {border-collapse: collapse; width: 100%; margin: 30px 0px;}
th {background: #000; color: white; font-weight: bold; text-align: center; border-left: 1px solid white; padding: 10px;}
th:first-of-type {border-left: 1px solid black;}
th:last-of-type {border-right: 1px solid black;}
td {border: 1px solid black; padding: 10px; text-align: left;}

input[type=button] {padding: 5px; margin: 5px;}

.highlight {background: #d0d0d0;}

.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
margin: 30px 0 15px 0;
border: 2px black solid;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.videobox {height: auto;}
.sidebar-content .videobox {margin-top: 20px;}
.extras {margin: 30px 0px;}
.ximage {border: #c0c0c0 5px solid;}
.fontred {color: red;}

/*search*/
#resultsBox {position: absolute; z-index: 2; width: 700px; background: #edf9eb; border: 2px #004400 solid; border-radius: 4px; margin-left: 10px; display: none; z-index: 100;}
#searchHolder {display: flex; align-items: center; justify-content: space-between;}
#searchHolder input[type=search]{display: block; border-radius: 5px; width: 400px; height: 45px; margin: 0 0 10px 10px; padding: 10px; font-size: 21px; color: black; background: #edf9eb;}
input[type=search]:focus {outline: none;}
.search-result-link {display: block; padding: 5px 10px; color: #003300; font-size: 17px;}
.search-result-link:nth-of-type(even) {background: #e0e0e0;}
.search-result-link:last-of-type {border-bottom: 2px #004400 solid; padding-bottom: 20px;}
#nextButtons {display: flex; align-items: center; margin: 5px 10px 10px 10px; }
#nextButtons div {font-weight: bold; margin: 10px 10px 0 0; color: #444;}

/*iPhone Formatting*/

#phoneMsg p {padding: 5px; border-radius: 2px;}
.cright, .cleft {display: flex; justify-content: space-between; margin-bottom: 5px;}
.cleft p {background: #aaffaa;}
.cright p {background: #d0d0d0;}
#phoneMsg {width: 340px; position: relative; left: 50%; margin-left: -170px; border: 4px solid black; border-radius: 4px; padding: 5px; min-height: 450px; background-image: url("https://www.cyberdefinitions.com/images/iphone_background.webp");}
.sorryMsg {display: flex; align-items: center; justify-content: center; font-size: 15px;}
.authorBox {display: flex; align-items: center; justify-content: center; width: 340px; margin: 20px 0 20px;}
.authorBox img {border-radius: 50%; margin-right: 10px;}
#phoneTranslate {position: relative; left: 50%; width: 80px; margin: 10px 0px 10px -40px;}

#phoneTranslate button, .formButton {
background-image: linear-gradient(to right, black, #003300);
color: white; padding: 10px; border-radius: 4px;
box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
cursor: pointer;
}
#phoneTranslate button {font-size: 23px;}
.helpUs .formButton {padding: 3px !important;}

/*Misc Formatting*/
.small {font-size: 0.8em;}
.big {font-size: 1.4em;}
.clearer {clear: both;}
.curs {cursor: pointer}

/*Container*/
.container {display: block; width: 1200px; position: relative; left: 50%; margin-left: -600px;}

/*header*/
header {display: flex; color: #fff;}
header b {font-size: 53px;}
header div {margin: 15px 0 0 20px;}
header span {font-size: 21px; color: #ddd;}

/*Nav*/
.nav {display: flex; flex-wrap: wrap; margin-top: 10px;}
.dropBox {position: relative; width: calc(100%/7);}
.navHead {display: inline-flex; justify-content: center; align-items: center; background: #005500; color: #fff; font-size: 15px; width: 100%; height: 40px; text-decoration: none; margin-bottom: 3px; border: 2px solid #001100;}
.navUL {background: #005500; display: none; list-style-type: none; margin: 0; position: absolute; text-align: center; width: 100%;}
.navUL li {padding: 10px;}
.dropBox:hover .navUL {display: block; z-index: 1;}
.navUL li:hover {background: green;}
.navUL a {color: #fff; text-decoration: none;}
.muchMore {background: black;}


.nextLesson {
width: auto;
color: #fff;
background: black;
padding: 10px;
margin: 10px;
font-size: 31px;
text-align: center;
cursor: pointer;
border-radius: 3px;
box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
}

/*Content (cols 1, 2, and 3)*/
.twoColumnHolder {display: flex; align-items: stretch; padding-bottom: 20px;}

div.sticky {
position: -webkit-sticky;
position: sticky;
top: 10px;
}

/*Main Content (col 1)*/
.main-content {
background-color: white;
width: 790px;
padding: 10px 20px;
font-size: 19px;
line-height: 1.7;
}

/*Sidebar Content Col 2)*/
.sidebar-content {
background: white;
width: 400px;
padding-top: 10px;
position: relative;
font-size: 19px;
line-height: 1.7;
margin-left: 10px;
}

.sidebar-content h2 {margin: 40px 0px; text-align: center;}
.main-content .ad-tag, .sidebar-content .ad-tag {margin-top: 30px;}

/*sidebox*/
.sidebox, .helpUs {
padding: 15px;
border: 2px solid #ddd;
border-radius: 2px;
margin: 2em 0em;
}

.sidebox {background: #e0e0e0;}
.helpUs {background: #ffffff;}
.helpUs h4 {margin-top: 0px;}
.sidebox img {vertical-align: middle; margin-right: 0.5em;}
.imageIntro {margin: 20px 0px;}
.imageLabel {margin-bottom: 30px;}

/*Links CSS*/
.see-also a {
padding: 10px;
border: dotted 2px #11600e;
display: block;
margin: 5px 0px;
text-align: center;
text-decoration: none;
}

.see-also {margin-bottom: 50px;}	

/*used to create top margin for ad in col 3*/

.topLevelPages a {display: block; border: dotted 2px #11600e; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 80px; margin: 10px; text-decoration: none;}
.topLevelPages p:first-of-type {font-weight: bold;}

.topLevelPages a:nth-of-type(1){
background-image: url('https://cyberdefinitions.com/images/send-large-emoji-sidebar.webp');
background-repeat: no-repeat;
}

.topLevelPages a:nth-of-type(5){
background-image: url('https://cyberdefinitions.com/images/send-encrypted-message-sidebar.webp');
background-repeat: no-repeat;
}

/*footer CSS*/
.footerDiv {
margin: 0 0 20px;
width: 100%;
text-align: center;
color: white;
}
.footerDiv a {color: white;}
.nomobile {display: auto;}

/*rated test*/
#gameBoard {background: #e0e0e0; overflow: hidden; border: 1px black solid; border-radius: 4px; margin-bottom: 30px;}
#canvas1 {margin-top: 20px;}
#scoreBoard {display: none;}
#howToPlayInstructions {border-radius: 4px; margin: 10px 0 10px; background: #e0e0e0; overflow: hidden; padding: 0px 20px;
-webkit-transition: height 1s; /* Transitions not working */
transition: height 1s;}
.ansHolder, .questionHolder {transition: margin-left 0.5s;-webkit-transition: margin-left 0.5s; cursor: pointer; background: #c0c0c0; border: 1px black solid; border-radius: 4px; margin: 5px 0px;}
.ansHolder {padding: 10px;}
.questionHolder {padding: 30px 10px;}
.ansBoxTwo {display: inline-block; cursor: pointer; background: #f0f0f0; border: 1px black solid; border-radius: 4px; padding: 0px 5px; margin-top: 3px;} 
.ansBoxTwo:nth-of-type(odd) {margin-right: 5px;}
.questionThree div {display: inline-block; font-size: 31px; cursor: pointer; border-radius: 4px;}
.ansHolder, .ansBoxTwo {box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);}
.showCorrect {background: green !important; color: white;}
.showWrong {background: red !important; color: white;}
.startButton, .claimButton {position: absolute; width: 200px; font-size: 34px;}
.formDiv {background: white; height: 620px; padding: 10px;}
#scoreBoard {width: 200px; position: relative; left: 50%; margin: 10px 0 10px -100px; padding: 10px; font-size: 44px; font-weight: bold; background: yellow; text-align: center; border-radius: 4px;}
#questionBoard {display: flex; align-items: center; justify-content: space-around;}
#questionBoard div, .scorerP {display: inline-flex; align-items: center; justify-content: center; background: #444; color: white; width: 30px; height: 30px; border-radius: 50% !important;}
#questionBoard div {margin-top: 10px;}
.inertBox {background: #e0e0e0 !important; color: #c0c0c0;}
.emojiTable {margin-top: -25px !important;}
.emojiTable td {border: none;}
.emojiTable td:first-of-type {width: 33%; text-align: right;}
.emojiTable tr:nth-of-type(even) {background: #d0d0d0;}
.scoreHolderDiv {display: flex; align-items: center; justify-content: center;}
.scoreHolderDiv p, .oneScore {margin: 5px 3px; background: #e0e0e0; padding: 5px; border-radius: 4px; text-align: center;}
.oneScore {display: inline-flex; align-items: center; justify-content: space-between; width: 70px;}
.scoreBoxOne {width: 340px;}
.totScore {font-size: 41px; font-weight: bold; margin: 0px 10px;}
.recordBox {text-align: center; margin: 20px 0px;}
.recordEntry {display: inline-flex; align-items: flex-start; justify-content: space-around; flex-wrap: wrap; border: 3px #c0c0c0 solid; border-radius: 4px; padding: 5px; margin: 10px; width: 200px;}
.recordEntry div:first-of-type {display: flex; width: 120px; align-items: center; justify-content: center; flex-direction: column;}
.recordEntry b {font-size: 23px;}
.recordEntry p:first-of-type {width: 50px; background: yellow; font-size: 23px; border-radius: 4px; font-weight: bold; color: #444;}
.TopScoreId {font-size: 15px; color: #fff; background: #444; padding: 2px 5px; border-radius: 4px;}
.top20 {margin-top: 20px;}
.bottom20 {margin-bottom: 20px;}
.jello-horizontal{-webkit-animation:jello-horizontal .9s both;animation:jello-horizontal .9s both}

@-webkit-keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
.rotate-center{-webkit-animation:rotate-center .6s ease-in-out both;animation:rotate-center .6s ease-in-out both}
@-webkit-keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}

/* ----------------------------------------------
 * Generated by Animista on 2023-8-1 9:21:4
 * ---------------------------------------------- */

.mobileOnly {display: none;}

/* mobile */
@media screen and (max-width: 1199px) {

h1 {margin-top: 180px;}

/*control ad size*/
.nomobile {display: none;}
.mobileOnly {display: block;}
img {max-width: 100%; height: auto;}

/*header*/
header {width: 100%; background: #001100; justify-content: start; align-items: start; height: 100px; position: fixed; top: 0; z-index: 100;}
header img {width: 105px; height: 80px;}
header b {font-size: 25px;}
header span {font-size: 13px;}
header div {margin: 15px 0 5px 10px;}
header p {display: none;}

.adHolder {width: 300px; margin-left:-150px;}
/*search*/

#searchHolder {width: 100%; background: #001100; position: fixed; top: 99px; z-index: 100;}
#searchHolder input[type=search]{width: 200px; border: 2px solid #004400;}
#searchHolder img {margin-right: 10px;}
#resultsBox {position: fixed; top: 160px; width: 96%; margin: 0 2%;}
.topright {position: absolute; top: 0; left: 90%;}

/*Nav*/
.nav {display: none;}
.nav {position: fixed; top: 160px; z-index: 100; width: 96%; margin: 0 2%;}
.dropBox {width: 50%; margin: 0px; padding: 0px;}
.dropBox:first-of-type {width: 100%;}
.navHead {display: inline-flex; justify-content: center; align-items: center; margin: 0px; box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);}
.tableOfContents ul {margin: 0px 10px 20px;}
.nomobile, .dropBox:hover .navUL, .nextLesson {display: none;}




.videoWrapper iframe {width: 100%; height: 100%;}

/*structure CSS*/
.container {width: 100%; left: 0; margin: 0;}
.twoColumnHolder, .main-content, .sidebar-content {
width: 100%;
margin: 0px;
display: block;
}
.main-content {padding: 10px;}
.tablecell .gridtable, .helpUs {margin: 30px -8px; width: auto;}

#phoneMsg {width: auto; position: static; margin: 30px 0;}

/*Footer*/
.footerDiv {display: none;}
.shrinkForMobile th, .shrinkForMobile td {font-size: 9px; padding: 3px;}
.audioButton {display: block; text-align: center; margin-top: 3px;}

/*rated test */
.recordEntry {padding: 3px; margin: 2px; width: 110px;}
.recordEntry img {width: 30px; height: 50px;}
.recordEntry div:first-of-type {width: 60px;}
.recordEntry b {font-size: 14px;}
.recordEntry p:first-of-type {font-size: 21px;}
.TopScoreId {font-size: 12px; margin-top: 5px;}
.rankTable p {width: 110px; font-size: 14px; font-weight: bold;}
.oneScore {font-size: 12px; width: 60px;}
.scoreBoxOne {width: 130px; padding:0px;}
.totScore {font-size: 22px; margin: 0px 5px 0px 0px;}
.ansBoxTwo {font-size: 36px;}
.emojiTable td {text-align: right;}
}