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

input, select, button, textarea {
  max-width: 100%;
}

meter, progress, output {
  max-width: 100%;
}

div#tswsidecol {
  float: right;
  width: 25%;
  color: black;
  background-color: #f5f5f5;
}

div#tswcontent {
  float: right;
  width: 75%;
  color: black;
  background-color: #f5f5f5;
}

@media only screen and ( max-width : 700px ) {
  div#tswsidecol {
    float: none;
    width: 100%;
  }
  div#tswcontent {
    float: none;
    width: 100%;
  }
}

div#tswcontproper {
  padding-left: 5px;
  padding-right: 5px;
}

div#tswcontainer {
  color: ;
  background-color: #f5f5f5;
}

div#tswsideproper, div#tswothersideproper {
  padding-left: 5px;
  padding-right: 5px;
}

div#tswheader {
  color: black;
  background-color: #f5f5f5;
}

#tswcontproper {
  background-color: #f5f5f5;
}

* {
    font-family: Cambria, serif;
    background-color: #f5f5f5;
  }

body{
	line-height:1.4;
	margin-right:5vw;
	}

.note {
    text-decoration: underline;
    text-decoration-style: dotted;
}

.note .notebox {
    display: block;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    width: max(21vw, 126px);
    left: 1vw;
    transform: translate(0px, -20px);
    background-color: #f5f5f5;
    color: black;
    border: 2px solid grey;
    border-radius: 6px;
    padding: 5px 5px;
    transition: all 0.6s ease-out;
}

.note:hover .notebox {
    opacity: 1;
    visibility: visible;
}

.left {
   float: left;
   width: 30%;
   padding: 0 20px 0 0;
   }

.right {
   float: right;
   width: 30%;
   padding: 0 0 0 20px;
   }

.good {
  color: #2eb82e;
}

.bad {
  color: #ff9933;
}