@import url(https://fonts.googleapis.com/css?family=Ubuntu:300);
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
@import url(https://fonts.googleapis.com/css?family=Lexend:300);


*
{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html
{
  background-color: #b6c0ce;
}

#background_logo
{
  position: absolute;
  top: 10px;
  left: -120px;
  width: 100px;
}

body
{
    position: relative;
    padding: 20px;
    padding-top: 70px;
    font-family: 'Lexend', sans-serif;
    background-color: white;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

#loginstatus
{
  position: absolute;
  top: 10px;
  right: 10px;
}

#headerTitle
{
  position: absolute;
  display: block;
  margin: 0;
  top: 10px;
  left: 30px;
  font-size: 30px;
}

#headerTitle span
{
  font-size: 10px;
  padding-right: 4px;
  padding-left: 2px;
}

.pointclick, .clickable
{
  cursor: pointer;
}

a
{
  text-decoration: none;
  color: black;
}

#chooseSubject
{
  position: absolute;
  top: 35px;
  right: 10px;
  font-size: 18px;
}

#back_top, #back_bottom, #back_top_extra, #back_bottom_extra
{
  font-weight: bold;
  position: absolute;
  left: 30px;
}


#back_top
{
  top: 50px;
}

#back_top_extra
{
  top: 70px;
}

#back_bottom
{
  bottom: 20px;
}

#back_bottom_extra
{
  bottom: 40px;
}

.hoverable:hover 
{
  background-color: #ffff99;
}

.selected
{
  background-color: #22ee22;
}

.unselected
{
  background-color: #ffffff;
}


#tajming
{
  position: absolute;
  bottom: -12px;
  font-size: 10px;
  right: 0;
  font-weight: bold;
  color: #eeeeee;
}

.redWarning
{
  font-weight: bold;
  color: red;
}

.orangeWarning
{
  font-weight: bold;
  color: orange;
}

h1
{
  padding-top: 0px;
}

.latestSave
{
  text-align: center;
  font-weight: bold;
  color: green;
}

.bggreen
{
  background-color: #aaffaa;
}

.bgred
{
  background-color: #ffaaaa;
}

.bgorange
{
  background-color: #ffee00;
}

.trashcan
{
  height: 1em;
}

.redText
{
  font-weight: bold;
  color: red;
}

.greenText
{
  font-weight: bold;
  color: green;
}

.superImportant 
{
  animation: blinker 1s linear infinite;
  font-weight: bold;
  text-decoration: underline;
  color: darkred;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}