* {
  margin: 0; padding: 0;
}
body {
  font-family: Arial, Helvetica, Sans-serif; 
  line-height:1.1;
}

img {
  display:block;
  margin:auto;
}

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

header {
  display: block;  
  background-color: #0067A5; 
  padding: 3.5em;
  border-bottom: 5px solid #757575;
}

.englishToolkit {
  font-weight: normal; 
  color: white; 
  text-shadow: 1px 1px 0px #444; 
  margin-left:40px;
}

.i-circle {
  background: #ff0000;
  color: #fff;
  padding: 5px 10px;
  border-radius: 50%;
  line-height:1.5;
  margin-right:6px;
  margin-left:66px;
}

.indent {
  margin-left:4%;
}

p {
  margin-bottom: 15px;
}

.description {
  display:inline;
  margin-left:10px;
}

.numberAndHeading {
  margin: 30px 30px 20px 91px;
  text-indent:-51px;
}

.questionNumber {
  display:inline;
  margin-right:20px;
  font-weight:800;
  font-size:22px;
  color:red;
}

.heading {
  color:white;
  background-color:red;
  font-weight:800;
  font-size:22px;
  padding:2px;
  padding-right:4px;
  line-height:1.4;
}

.text {
  margin: 0px 35px 50px 90px;
  font-weight:normal;
}

.instructions {
  font-weight:bold;
  margin-left:15px;
  text-indent:10px;
  margin-top:30px;
}

#typicalErrorWord, #correctionWord, #explanationWord {
  color:#009F9B;
  font-size:1.1em;
}

.instructions:before {
  content: url('images/pencil.png');
  margin-left:-30px;
}

.errorMessage {
  margin-top:30px;
  margin-left:30px;
  position:absolute;
}

.check {
  padding:4px;
  margin-top:30px;
}

.next {
  padding:4px;
  display:none;
  margin-top:30px;
}

.reset {
  padding:4px;
  margin:30px;
  position:absolute;
}

.center {
  text-align: center;
}

nav {
  background-color: #443A5C;
}

nav a {
  color: white; 
  text-decoration: none;
}

nav a:hover {
  color: #ddd;
}

nav ul {
  display: table; 
  width: 100%; 
  margin: auto;
}

nav li {
  display: table-cell; 
  text-align: center; 
  padding: 1em;
}

main {
  overflow: auto; 
  min-height: 76vh; 
  padding: 20px 30px 40px 20px;
}

footer {
  padding: 1.1em; 
  background-color: #0067A5; 
  font-size: 0.8em;
}

.errors {
  padding: 1em; 
  border: 1px solid red; 
  background-color: lightyellow; 
  color: red; 
  margin-bottom: 1em; 
  overflow: auto;
}

.errors ul {
  margin-left: 1em;
}

.noBreak {
  margin-top:-32px;
}

.blue {
  color:blue;
}

.royalblue {
 color:#0067A5;
}

.red {
  color:red;
}

.orange {
  color:#F58525;
}

.green {
  color:green;
}

.purple {
  color: #7E0448;
}

.brown {
  color:brown;
}

.lightbrown {
  color:tan;
}

.grey {
  color:grey;
}

.lightgreen {
  color:lightgreen;
}

.pink {
  color:pink;
}

.maroon {
  color:maroon;
}

.bluegreen {
  color:#009F9B;
}

.lightblue {
  color:lightblue;
}

.indigo {
  color:indigo;
}

.lightorange {
  color:lightsalmon;
}

.armygreen {
  background-color:#E6EDD4;
}

.darkgreen {
  background-color:#98BA68;
}

.froggreen {
  background-color:#79AD36;
}

.beige {
  background-color:#F2E1C0;
  color:#DC5229;
}

.grammarcolor {
  color:#01B1D6;
}

.invisible {
  visibility:hidden;
}

.linespacing {
  line-height:1.5;
}

.link {
  color:blue; 
  text-decoration:underline; 
}

table ,th, tr, td {
  border:2px solid lightblue;
  border-collapse:collapse;
  padding:6px;
  margin-top:40px;
  margin-bottom:40px;
}

/*
@media only screen and (min-width: 900px) {
  .text {
    margin-right:180px;
  }
}

@media only screen and (max-width: 830px) {
  .numberAndHeading{
    margin-left:70px;
  }

  .text {
    margin-left:20px;
  }
  .i-circle {
    margin-left:0px;
  }
}
*/