/* General Styles */


html {
    background-color: #B2DFDB;
    
    overflow-y: hidden;;
    overflow-x: hidden;;
  touch-action: manipulation;

    overflow: hidden;
    margin: -10px;
}

/* Navbar Styles */

    .gamepage-header {
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: left;
        color: white;
        background-color: #004D40;
        flex: 2;
        padding-top: 00px;
    }

    .nav-content {
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;

        text-align: center;
        text-decoration: none;
        font-size: 22px;
    }

    .nav-list-item {
        text-align: center;
        display: inline;
        float: none;
        vertical-align: middle;
        padding: 0px 0px 0px 0px;
        margin: 0px 0px;
    }

    #site-logo {
        max-height: 60px;
        width: auto;
        padding: 10px;
        padding-left: 20px;
    }

    .nav-link-text:link {
        color: white;
        text-decoration: none;
        text-transform: uppercase;
    }

    .nav-link-text:visited {
        color: white;
        text-decoration: none;
        text-transform: uppercase;
    }

    .nav-link-text:hover {
        color: darkslategrey;
        background-color: #B2DFDB;
        text-decoration: none;
        text-transform: uppercase;
    }

/* Gamepage Styles */

    .gamepage-wrapper {
        display: flex;
        flex-direction: column;
        flex: 1;
        height: 100vh;
        color: darkslategrey;
        background-color: #B2DFDB;
        color: white; 
    }

    .game-content-container {
        display: flex;
        flex: 15;
    }

    .gamepage-left-aside {
        flex: 2;
        color: white;
        background-color: #00897B;
        padding: 15px;
    }

    .game-container {
        color: darkslategrey;
        background-color: #00897B;
        flex: 7;
        width: 100%;
    }

    #game {
        width: 100%;
        height: auto;
    }

    .gamepage-right-aside {
        flex: 1;
        color: white;
        background-color: #00897B;
        padding: 5px;
        padding-right: 20px;
    }
w
    .games-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        background-color: #004D40;
        color: white;
    }


    /* cloes crap */


    body {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    
        position: relative;
    background-color: white;
  }

  a:hover,a:active{color:#4CAF50}
  table.w3-table-all{margin:20px 0}
  /*OPPSETT AV TOP, TOPNAV, SIDENAV, MAIN, RIGHT OG FOOTER:*/
  .top {
  position:relative;
  background-color:#ffffff;
  height:68px;
  padding-top:20px;
  line-height:50px;
  overflow:hidden;
  z-index:2;
  }
  .w3schools-logo {
  font-family:fontawesome;
  text-decoration:none;
  line-height:1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:37px;
  letter-spacing:3px;
  color:#555555;
  display:block;
  position:absolute;
  top:17px;
  }
  .w3schools-logo .dotcom {color:#4CAF50}
  .topnav {
  position:relative;
  z-index:2;
  font-size:17px;
  background-color:#5f5f5f;
  color:#f1f1f1;
  width:100%;
  padding:0;
  letter-spacing:1px;
  font-family:"Segoe UI",Arial,sans-serif;
  }
  .topnav a{
  padding:10px 15px 9px 15px !important;
  }
  .topnav .w3-bar a:hover,.topnav .w3-bar a:focus{
  background-color:#000000 !important;
  color:#ffffff !important;
  }
  .topnav .w3-bar a.active {
  background-color:#4CAF50;
  color:#ffffff;
  }
  a.topnav-icons {
  width:52px !important;
  font-size:20px !important;
  padding-top:11px !important;
  padding-bottom:13px !important;
  }
  a.topnav-icons.fa-home {font-size:22px !important}
  a.topnav-icons.fa-menu {font-size:22px !important}
  a.topnav-localicons {
  font-size:20px !important;
  padding-top:6px !important;
  padding-bottom:12px !important;
  }
  i.fa-caret-down,i.fa-caret-up{width:10px}
  #sidenav h2 {
  font-size:21px;
  padding-left:16px;
  margin:-4px 0 4px 0;
  width:204px;
  }
  #sidenav a {font-family:"Segoe UI",Arial,sans-serif;text-decoration:none;display:block;padding:2px 1px 1px 16px}
  #sidenav a:hover,#sidenav a:focus {color:#000000;background-color:#cccccc;}
  #sidenav a.active {background-color:#4CAF50;color:#ffffff}
  #sidenav a.activesub:link,#sidenav a.activesub:visited {background-color:#ddd;color:#000;}
  #sidenav a.activesub:hover,#sidenav a.activesub:active {background-color:#ccc;color:#000;}
  #leftmenuinner {
  position:fixed;
  top:0;
  padding-top:112px;
  padding-bottom:0;    
  height:100%;
  width:220px;
  background-color:transparent;
  }
  #leftmenuinnerinner {
  height:100%;
  width:100%;
  overflow-y:scroll;
  overflow-x:hidden;
  padding-top:20px;
  }
  #main {padding:16px}
  #mainLeaderboard {height:90px}
  #right {text-align:center;padding:16px 16px 0 0}
  #right a {text-decoration:none}
  #right a:hover {text-decoration:underline}
  #skyscraper {min-height:600px}
  .sidesection {margin-bottom:32px;}
  #sidesection_exercise a{display:block;padding:4px 10px;}
  #sidesection_exercise a:hover,#sidesection_exercise a:active{background-color:#ccc;text-decoration:none;color:#000000;}
  .bottomad {padding:0 16px 16px 0;float:left;width:auto;}
  .footer a {text-decoration:none;}
  .footer a:hover{text-decoration:underline;}
  #nav_tutorials,#nav_references,#nav_exercises{-webkit-overflow-scrolling:touch;overflow:auto;}
  #nav_tutorials::-webkit-scrollbar,#nav_references::-webkit-scrollbar,#nav_exercises::-webkit-scrollbar {width: 12px;}
  #nav_tutorials::-webkit-scrollbar-track,#nav_references::-webkit-scrollbar-track,#nav_exercises::-webkit-scrollbar-track {background:#555555;}
  #nav_tutorials::-webkit-scrollbar-thumb,#nav_references::-webkit-scrollbar-thumb,#nav_exercises::-webkit-scrollbar-thumb {background: #999999;}
  #nav_tutorials,#nav_references,#nav_exercises {
  display:none;
  letter-spacing:0;
  margin-top:44px;
  }
  #nav_tutorials a,#nav_references a,#nav_exercises a{
  padding:2px 0 2px 6px!important;
  }
  #nav_tutorials a:focus,#nav_references a:focus,#nav_exercises a:focus{
  color: #000;
  background-color: #ccc;
  }
  #nav_tutorials h3,#nav_references h3,#nav_exercises h3{
  padding-left:6px;
  }
  .ref_overview{display:none}
  .tut_overview{
   display :none;
   margin-left:10px;
   background-color :#ddd;
   line-height:1.8em;
  }
  #sidenav a.activesub:link,#sidenav a.activesub:visited {background-color:#ddd;color:#000;}
  #sidenav a.activesub:hover,#sidenav a.activesub:active {background-color:#ccc;color:#000;}
  #sidenav a.active_overview:link,#sidenav a.active_overview:visited {background-color:#ccc;color:#000;}
  .w3-example{background-color:#f1f1f1;padding:0.01em 16px;margin:20px 0;box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important}
  .nextprev a {font-size:17px;border:1px solid #cccccc;}
  .nextprev a:link,.nextprev a:visited {background-color:#ffffff;color:#000000;}
  .w3-example a:focus,.nextprev a:focus{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);}
  .nextprev a.w3-right,.nextprev a.w3-left {background-color:#4CAF50;color:#ffffff;border-color:#4CAF50}
  #w3-exerciseform {background-color:#555555;padding:16px;color:#ffffff;}
  #w3-exerciseform .exercisewindow {background-color:#ffffff;padding:16px;color:#000000;}
  #w3-exerciseform .exerciseprecontainer {background-color:#f1f1f1;padding:16px;font-size:120%;font-family:Consolas,"Courier New", Courier, monospace;}
  #w3-exerciseform .exerciseprecontainer pre[class*="language-"] {padding:1px;}
  #w3-exerciseform .exerciseprecontainer pre {display: block;}
  #w3-exerciseform .exerciseprecontainer input {padding:1px;border: 1px solid transparent;height:1.3em;}
  .w3-theme {color:#fff !important;background-color:#73AD21 !important;background-color:#4CAF50 !important}
  .w3-theme-border {border-color:#4CAF50 !important}
  .sharethis a:hover {color:inherit;}
  .fa-facebook-square,.fa-twitter-square,.fa-google-plus-square {padding:0 8px;}
  .fa-facebook-square:hover, .fa-thumbs-o-up:hover {color:#3B5998;}
  .fa-twitter-square:hover {color:#55acee;}
  .fa-google-plus-square:hover {color:#dd4b39;}
  #google_translate_element img {margin-bottom:-1px;}
  #googleSearch {color:#000000;}
  #googleSearch a {padding:0 !important;}
  .searchdiv {max-width:400px;margin:auto;text-align:left;font-size:16px}
  div.cse .gsc-control-cse, div.gsc-control-cse {background-color:transparent;border:none;padding:6px;margin:0px}
  td.gsc-search-button input.gsc-search-button {background-color:#4CAF50;border-color:#4CAF50}
  td.gsc-search-button input.gsc-search-button:hover {background-color:#46a049;}
  input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus, .gsc-search-button {
  box-sizing:content-box; line-height:normal;}
  .gsc-tabsArea div {overflow:visible;}
  /*"nullstille" w3css:*/
  .w3-main{transition:margin-left 0s;}
  /*"nullstilling" slutt*/
  @media (min-width:1675px) {
  #main {width:79%}
  #right {width:21%}
  }
  @media (max-width:992px) {
  .top {height:100px}
  .top img {display:block;margin:auto;}
  .top .w3schools-logo {position:relative;top:0;width:100%;text-align:center;margin:auto}
  .toptext {width:100%;text-align:center}
  #sidenav {width:260px;
  box-shadow:0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  }
  #sidenav h2 {font-size:26px;width:100%;}
  #sidenav a {padding:3px 2px 3px 24px;font-size:17px}
  #leftmenuinner {  
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  height:100%;
  position:relative;
  width:auto;
  padding-top:0;
  background-color:#f1f1f1;
  }
  #leftmenuinnerinner {overflow-y:scroll}
  .bottomad {float:none;text-align:center}
  #skyscraper {min-height:60px}
  }
  @media screen and (max-width:600px) {
  .w3-example, .w3-note, #w3-exerciseform {margin-left:-16px;margin-right:-16px;}
  .top {height:68px}
  .toptext {display:none}
  }
  @font-face {
  font-family:'fontawesome';
  src: url('../lib/fonts/fontawesome.eot?14663396');
  src:url('../lib/fonts/fontawesome.eot?14663396#iefix') format('embedded-opentype'),
  url('../lib/fonts/fontawesome.woff?14663396') format('woff'),
  url('../lib/fonts/fontawesome.ttf?14663396') format('truetype'),
  url('../lib/fonts/fontawesome.svg?14663396#fontawesome') format('svg');
  font-weight:normal;
  font-style:normal;
  }
  .fa {
  display:inline-block;
  font:normal normal normal 14px/1 FontAwesome;
  font-size:inherit;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transform:translate(0, 0);
  }
  .fa-2x {
   font-size:2em;
  }
  .fa-home:before {content:'\e800';}
  .fa-menu:before {content: '\f0c9';}
  .fa-globe:before {content:'\e801';}
  .fa-search:before {content:'\e802'; }
  .fa-thumbs-o-up:before {content:'\e803';}
  .fa-left-open:before {content:'\e804';}
  .fa-right-open:before {content:'\e805';}
  .fa-facebook-square:before {content:'\e806';}
  .fa-google-plus-square:before {content:'\e807';}
  .fa-twitter-square:before {content:'\e808';}
  .fa-caret-down:before {content:'\e809';}
  .fa-caret-up:before {content:'\e80a';}
  .fa.fa-adjust:before { content: '\e80b'; }
  span.marked, span.deprecated {
   color:#e80000;
   background-color:transparent;
  }
  .w3-code span.marked {
   color:#e80000;
   background-color:transparent;
  }
  .darktheme .w3-code span.marked {
   color:#ff9999;
   background-color:transparent;
  }
  .darktheme .w3-example.w3-light-grey {
    background-color:rgb(40,44,52)!important;color:white;
  }
  .intro {font-size:16px}
  .w3-btn, .w3-btn:link, .w3-btn:visited {color:#FFFFFF;background-color:#4CAF50}
  a.w3-btn[href*="exercise.asp"],a.w3-btn[href*="exercise_js.asp"] {margin:10px 5px 0 0}
  a.btnplayit,a.btnplayit:link,a.btnplayit:visited {background-color:#FFAD33;padding:1px 10px 2px 10px}
  a.btnplayit:hover,a.btnplayit:active {background-color:#ffffff;color:#FFAD33}
  a.btnplayit:hover {box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);}
  a.btnsmall:link,a.btnsmall:visited,a.btnsmall:active,a.btnsmall:hover {
  float:right;padding:1px 10px 2px 10px;font:15px Verdana, sans-serif;}
  a.btnsmall:hover {box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);}
  a.btnsmall:active,a.btnsmall:hover {color:#4CAF50;background-color:#ffffff}
  .tagcolor{color:mediumblue}
  .tagnamecolor{color:brown}
  .attributecolor{color:red}
  .attributevaluecolor{color:mediumblue}
  .commentcolor{color:green}
  .cssselectorcolor{color:brown}
  .csspropertycolor{color:red}
  .csspropertyvaluecolor{color:mediumblue}
  .cssdelimitercolor{color:black}
  .cssimportantcolor{color:red}  
  .jscolor{color:black}
  .jskeywordcolor{color:mediumblue}
  .jsstringcolor{color:brown}
  .jsnumbercolor{color:red}
  .jspropertycolor{color:black}
  .javacolor{color:black}
  .javakeywordcolor{color:mediumblue}
  .javastringcolor{color:brown}
  .javanumbercolor{color:red}
  .javapropertycolor{color:black}
  .kotlincolor{color:black}
  .kotlinkeywordcolor{color:mediumblue}
  .kotlinstringcolor{color:brown}
  .kotlin…
  










































  
#slidecontainer {
    width:100%;
  }
  .slider-color {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity:0.7;
    -webkit-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;
  }
  .slider-color:hover {
    opacity:1;
  }
  .slider-color::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
  }
  .slider-color::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border: 0;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
  }
  
  .slider-pic {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #FFFFFF;
    outline: none;
    opacity:0.7;
    -webkit-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;
  }
  
  .slider-square {
    -webkit-appearance: none;
    width: 40%;
    height: 100%;
    height: 33px;
    background: #000000;
    outline: none;
    opacity:0.7;
    -webkit-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;
  }
  .slider-square:hover {
    opacity:1;
  }
  .slider-square::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: #ffffff;
    cursor: pointer;
  }
  .slider-square::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border: 0;
    background: #ffffff;
    cursor: pointer;
  }






  .slider-squarex {
    -webkit-appearance: none;
    width: 40%;
    height: 100%;
    height: 33px;
    background: #000000;
    outline: none;
    opacity:0.7;
    -webkit-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;
  }
  .slider-squarex:hover {
    opacity:1;
  }
  .slider-squarex::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 5px;
    height: 33px;
    background: #FF0000;
    cursor: pointer;
  }
  .slider-squarex::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border: 0;
    background: #ffffff;
    cursor: pointer;
  }




  .slider-squarey {
    -webkit-appearance: none;
    width: 40%;
    height: 100%;
    height: 15px;
    background: #000000;
    outline: none;
    opacity:0.7;
    -webkit-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;
  }
  .slider-squarey:hover {
    opacity:1;
  }
  .slider-squarey::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 5px;
    height: 20px;
    background: #FF0000;
    cursor: pointer;
  }
  .slider-squarey::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border: 0;
    background: #ffffff;
    cursor: pointer;
  }
  
.GraphCard {
  padding: 1px;
  margin: 1px;
  background-color: #ffde00;
  color: #333;
  display: inline-block;
  font-family: monospace;
  font-size: 32px;
  text-align: center;
}


.disable-dbl-tap-zoom {
  touch-action: manipulation;
}

@font-face {
  font-family: 'programming6';
  src: url('http://www.ditzbitz.com/ft.ttf');
}

.ExampleCard {
  padding: 1px;
  margin: 1px;
  background-color: #ffde00;
  color: #333;
  display: inline-block;
  font-family: monospace;
  font-size: 32px;
  text-align: center;
}