body {
    margin: 0;
    padding: 0;

    background: #212121;
    color: #e4e4e4;
}

p {
    padding: 5px;
    text-align: left;
}

h1 {
    padding: 55px;
    padding-top: 2px;
}

img {
    padding: 5px;
    max-width: 100%;
    height: auto;
}



.main {
    text-align: center;
    padding-bottom: 15% /* a BAD BAD way to fix this... TODO:FIX THIS! Fix what? Well the footer! */; 
}

.main-menu {
    text-align: center;
}

span.red {
    color: #bb0707;
}

#sandboxCanvas {
    border: 1px solid #12292f;

    width: 100%;
    max-width: 100%;
    height: auto;
}

.tooltip {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }


/* text align */
.center {
  text-align: center;
}
.left {
  text-align: left;
}
.right {
  text-align: right;
}
.faded {
  color: #525252;
}
.tiny {
  font-size: 0.6em;
  line-height: 0.3em;
}
.hidden {
  display: none;
}



/* ********* */
/* OVERRIDES */
/* ********* */

html {
    height: 100%;
  }

body {
    min-height: 100%;
  }

a:link {text-decoration: none; color: #e4e4e4;}
a:visited {text-decoration: none; color: #c7e4c7;}
a:hover {text-decoration: none; color: #bfdde4;}
a:active {text-decoration: none; color: #e4e4e4;}


.menu li {
    background-color: #212121;
    box-shadow: 0 1px 3px rgba(0,0,0,0.42), 
    0 1px 2px rgba(0,0,0,0.44);
}
.menu li:hover {
    background-color: #2a2a2a;
  }

.menu li a { 
    margin: 0px; 
    display: block; 
    width: 100%; 
    height: 100%; 
    text-decoration-line: none;
    color: #e4e4e4;
}

.footer {
    position: static;
    bottom:0;
    
    text-align: center;
    width: 100%;
    background-color: #1a1a1a;
}


/* Javascript exercises */

button {
  padding: 10px 15px 10px 15px;
  background-color: transparent;
  border: 1px solid #ffffff;
  color: #e4e4e4;
}

button.selected {
  border: 2px solid #ff0000;
}

#cButton1, #cButton2 {
  padding: 10px 15px 10px 15px;
  background-color: transparent;
  color: #e4e4e4;
}

#cButton1 {
  border: 1px solid #c80003;
}
#cButton2 {
  border: 1px solid #ffffff;
}

#cButton1:focus, #cButton2:focus, button:focus { outline:0; }
#cButton1:active, #cButton2:active, button:active {
  background-color: #3b3b3b;
}

#inputToText {
  margin-top: 10px;
  margin-bottom: 10px;
}




#mountains tr {
  
  background-color: #bb0707; /* for debug */
}




/* TABS */
#tabContent {

  padding: 25px 15px 25px 15px;
  min-height: 500px;

  transition: all 0.25s ease-in;

}




/******************************************

    THE CSS3 
    "HTML5". Create one appearance for all 
    your pages using CSS3. 
    Be as creative as you can.

******************************************/



#page1 .footer-row, #page2 .footer-row {
    position: fixed;
    bottom: 0;
    width: 100%;
}

#page2 h1 {

    color: #2AA7FF;
    text-shadow: 2px 2px 8px rgba(25,100,153,0.89);

}
#page2 #name {
    font-weight: 900;
    color: #0bbe26;
    font-style: normal;
}

/*
#page3 {

}
*/

#page4 {
    background: #c80003;
    color: #fff;
}
#page4 canvas {
    background: #1f1f1f;
}
#page4 em {
    font-weight: 900;
    color: orange;
}





.tv-box {
  border: 8px solid #525252;
  border-bottom: 20px solid #525252;
  background: #2a2a2a;

  max-width: 100%; /* This is because BOOTSTRAP STILL has strange image bug?!? */
  
}





/* 

TEHTÄVÄT


@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}

@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}


*/