@import url(http://fonts.googleapis.com/css?family=Open+Sans);

* {
margin: 0;
padding: 0;
outline: none;
}

html {
height: 100%;
padding-bottom: 1px;
}

body {
text-align: left;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 13px;
color: #636363;
min-height: 100%;
}

h1 {
color: #052a48;
font-size: 21px;
font-weight: normal;
margin-bottom: 0.8em;
}

#page {
min-height: 100%;
position: relative;
}

#dia {
height: 22px;
position: absolute;
right: 20px;
top: 26px;
width: 440px;
}

#dia p {
width: 418px;
height: 22px;
border: 1px solid #26d252;
background: #daf6e1;
padding: 10px;
color: #26d252;
}

#dia p.red {
width: 418px;
height: 22px;
border: 1px solid #d22626;
background: #f6dada;
padding: 10px;
color: #d22626;
}

table {
width: 100%;
border-collapse: collapse;
margin: 60px 0;
}

table tr td {
background: #EEEEEE;
padding: 5px;
border: 1px solid #CCC;
}

table tr:hover td {
background: #F4F4F4;
}

table tr th {
background: #FFF;
border: 0px solid;
border-bottom: 1px solid #0e71b8;
text-align: left;
font-weight: normal;
padding: 5px;
}

table tr td.greenQ, table tr th.greenQ {
border: 1px solid #26d252;
background: #daf6e1;
color: #26d252;
}

.formfield {
margin-bottom: 3px;
}

.formfield label {
float: left;
width: 200px;
}

.formfield input {
float: left;
width: 200px;
border: 1px solid #CCC;
padding: 3px;
background: #FFF;
}

.formfield input:hover, .formfield input:focus {
border: 1px solid #888;
background: #EEE;
color: #444;
}

.clearer {
clear: both;
display: block;
}

.btn {
  background: #3498db !important;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9) !important;
  background-image: -moz-linear-gradient(top, #3498db, #2980b9) !important;
  background-image: -ms-linear-gradient(top, #3498db, #2980b9) !important;
  background-image: -o-linear-gradient(top, #3498db, #2980b9 !important);
  background-image: linear-gradient(to bottom, #3498db, #2980b9) !important;
  -webkit-border-radius: 28 !important;
  -moz-border-radius: 28 !important;
  border-radius: 28px !important;
  font-family: Arial !important;
  color: #ffffff !important;
  font-size: 15px !important;
  padding: 5px 10px 5px 10px !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db) !important;
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db) !important;
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db) !important;
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db) !important;
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db) !important;
  text-decoration: none !important;
}

.btn.green {
  background: #20b046;
  background-image: -webkit-linear-gradient(top, #20b046, #107a25) !important;
  background-image: -moz-linear-gradient(top, #20b046, #107a25) !important;
  background-image: -ms-linear-gradient(top, #20b046, #107a25) !important;
  background-image: -o-linear-gradient(top, #20b046, #107a25) !important;
  background-image: linear-gradient(to bottom, #20b046, #107a25) !important;
  -webkit-border-radius: 28 !important;
  -moz-border-radius: 28 !important;
  border-radius: 28px !important;
  font-family: Arial !important;
  color: #ffffff !important;
  font-size: 15px !important;
  padding: 5px 10px 5px 10px !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.btn.green:hover {
  background: #1ad636;
  background-image: -webkit-linear-gradient(top, #1ad636, #1cb01c) !important;
  background-image: -moz-linear-gradient(top, #1ad636, #1cb01c) !important;
  background-image: -ms-linear-gradient(top, #1ad636, #1cb01c) !important;
  background-image: -o-linear-gradient(top, #1ad636, #1cb01c) !important;
  background-image: linear-gradient(to bottom, #1ad636, #1cb01c) !important;
  text-decoration: none !important;
}

.btn.red {
  background: #cf1f1f !important;
  background-image: -webkit-linear-gradient(top, #cf1f1f, #850f0f) !important;
  background-image: -moz-linear-gradient(top, #cf1f1f, #850f0f) !important;
  background-image: -ms-linear-gradient(top, #cf1f1f, #850f0f) !important;
  background-image: -o-linear-gradient(top, #cf1f1f, #850f0f) !important;
  background-image: linear-gradient(to bottom, #cf1f1f, #850f0f) !important;
  -webkit-border-radius: 28 !important;
  -moz-border-radius: 28 !important;
  border-radius: 28px !important;
  font-family: Arial !important;
  color: #ffffff !important;
  font-size: 15px !important;
  padding: 5px 10px 5px 10px !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.btn.red:hover {
  background: #ff0000 !important;
  background-image: -webkit-linear-gradient(top, #ff0000, #a81c1c) !important;
  background-image: -moz-linear-gradient(top, #ff0000, #a81c1c) !important;
  background-image: -ms-linear-gradient(top, #ff0000, #a81c1c) !important;
  background-image: -o-linear-gradient(top, #ff0000, #a81c1c) !important;
  background-image: linear-gradient(to bottom, #ff0000, #a81c1c) !important;
  text-decoration: none !important;
}

.frage {
  background: #f0f0f0;
  background-image: -webkit-linear-gradient(top, #f0f0f0, #e0e0e0);
  background-image: -moz-linear-gradient(top, #f0f0f0, #e0e0e0);
  background-image: -ms-linear-gradient(top, #f0f0f0, #e0e0e0);
  background-image: -o-linear-gradient(top, #f0f0f0, #e0e0e0);
  background-image: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #7a7a7a;
  font-size: 15px;
  padding: 10px 20px 10px 20px;
  min-height: 50px;
  border: solid #d6d6d6 1px;
  text-decoration: none;
  margin-bottom: 20px;
}

.frage:hover {
  text-decoration: none;
}

#quizzer {
width: 100%;
}

#quizzer form {
width: 49%;
float: left;
}

#quizzer form.right {
float: right;
}

#quizzer form input.btn {
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 10px;
cursor: pointer;
}

.questtaker {
margin-bottom: 20px;
}

.pleft {
float: left;
color: #052a48;
font-size: 15px;
font-weight: normal;
}

.pright {
float: right;
color: #052a48;
font-size: 15px;
font-weight: normal;
}

.pictaker {
width: 100%;
margin-bottom: 20px;
}

#quizzer form.nofloat {
float: none;
width: 100%;
margin: 45px 0;
}

#quizzer form.nofloat label {
width: 100px;
}

.false {
color: red;
}