/** Styles for CSSE340 web page
    and Schedule.
 **/

body.csse340 {
  background-color:white;
  transition-duration:0.5s;
}
body.csse240 {
  /*display:none;*/
  background-color:#eef;
  transition-duration:0.5s;
}

ul.header > li {
  list-style-type: square;
}

td {
  padding:10px;
  margin:10px;
}

table.plain, table.plain td {
  border:none;
}

table.schedule  {
  margin-top:3px;
  border:1px solid black;
  border-collapse: collapse;
  background: white;
}

.schedule th {
  padding: 5px;
  background: #ccc;
  /*border: 1px solid;*/
}

.schedule td {
  padding: 5px;
  border: 1px solid #aaa;
}

.firstCol , .secondCol {
  background: #eef;
}

.schedule .break {
  background: #efe;
  text-align:center;
  border: 1px dotted;
}

td.exam {
  background: #fcc;
  font-weight:bold;
}

td.lab {
  background: #ffc;
}

td.presentations {
  background: #dfe;
}

td.noclass {
  background: #eee;
  color: #777;
  font-style:italic;
}
td.noclass:before {
  content: "(no class)";
}

img.mode_icon {
  height: 1.3em;
  vertical-align: middle;
  margin-right: 6px;
}

/** For toggle button (340 | 240)  **/
div.floatscroller {
  display:none;
  position: -webkit-sticky;
  position: sticky;
  top: 33px;
  float:right;
  margin-right:5px;
}

.tog {
  position: relative;
  display: flex;
  border: 2px solid gray;
  background-color: #99f;
  width: 6.2em;
  height:1.2em;
  border-radius:10px;
}
.tog > span {
  text-align:center;
  font-weight:bold;
  vertical-align:middle;
}

.tog:after {
  content: '';
  position: absolute;
  width: 3em;
  height: 1em;
  top: 1px;
  left: 1px;
  background-color: gray;
  border: 1px solid #444;
  border-radius:7px;
  transition-duration:0.5s;
}
.chx:checked + .tog:after {
  left: 3em;
  transition-duration:0.5s;
}
.chx:checked + .tog {
  background-color:white;
}

.chx { display: none; }
</style>