/* Unvisited Link */
a:link {
  text-decoration:none
}

/* Visited Link */
a:visited {
  color: rgb(200, 0, 0);
  text-decoration:none;
}

/* Paragraph Style */
p {font-family: helvetica, arial, sans-serif}

div {font-family: helvetica, arial, sans-serif}

ol {font-family: helvetica, arial, sans-serif}

ul {font-family: helvetica, arial, sans-serif}

li {padding-bottom: 5px}

/* Header Styles */
h1 {font-size: 24; text-align: center}

h2 {font-size: 20;}

h3 {font-size: 18;
    font-family: helvetica, arial, sans-serif;
    color: #336699;}

h4 {
  margin-left: 20px;
  font-size: 20;
  font-family: helvetica, arial, sans-serif;
}

h5 {
  flex-wrap: wrap;
  font-size: 20;
  font-family: helvetica, arial, sans-serif;
}

hr { margin-left: auto; margin-right: auto; color: #336699; background-color: #336699; height: 5px;
 }

/* Unnumbered List */
ul {font-family: helvetica, arial, sans-serif}

/* Table */
table th td {
	padding: 5px;
	}

th, td {
  padding: 10px;
}

th {
  background-color: cadetblue;
  color: white;
  vertical-align: middle;
}

td {
  vertical-align: top; 
}

table.verb {
  padding: 5px;  
  border-spacing: 2px 2px
}

table.blue {
	border-width: 2px 2px 2px 2px;
	border-spacing: 2px 2px;
	border-style: outset outset outset outset;
	border-color: #336699;
	border-collapse: separate;
	background-color: rgb(51, 102, 153);
}
table.blue th {
	border-width: 2px 2px 2px 2px;
	padding: 3px 3px 3px 3px;
	border-style: inset inset inset inset;
	border-color: rgb(51, 102, 153) rgb(51, 102, 153) rgb(51, 102, 153) rgb(51, 102, 153);
	background-color: lightgrey;
	-moz-border-radius: 0px 0px 0px 0px;
}
table.blue td {
	border-width: 2px 2px 2px 2px;
	padding: 3px 3px 3px 3px;
	border-style: inset inset inset inset;
	border-color: rgb(51, 102, 153) rgb(51, 102, 153) rgb(51, 102, 153) rgb(51, 102, 153);
	background-color: white;
	-moz-border-radius: 0px 0px 0px 0px;
}

/* Lexicon Main Table */
.lexical-form {
  background-color: rgb(255, 255, 153); 
  width: 25%;
  vertical-align: middle;
}

.lexical-explanation {
  background-color: rgb(255, 204, 153);
  vertical-align: middle;
}

.rowheader {
  background-color: cadetblue;
  color: white;
  font-weight:bold;
  padding-left: 15px;
  padding-right: 5px;
  padding-bottom: 1px;
  padding-top: 1px;
  margin-bottom: 2px;
}

.rowcontent {
  padding-left: 15px;
  padding-right: 5px;
  padding-bottom: 1px;
  padding-top: 1px;
  margin-bottom: 2px;
}

.rowcontentgray {
  padding-left: 15px;
  padding-right: 5px;
  padding-bottom: 1px;
  padding-top: 1px;
  margin-bottom: 2px;
  background-color: rgb(204, 204, 204);
}

.rowcontentorange {
  padding-left: 15px;
  padding-right: 5px;
  padding-bottom: 1px;
  padding-top: 1px;
  margin-bottom: 2px;
  background-color: rgb(255, 204, 153);
}

.rowcontentyellow {
  padding-left: 15px;
  padding-right: 5px;
  padding-bottom: 1px;
  padding-top: 1px;
  margin-bottom: 2px;
  background-color: rgb(255, 255, 204);
}

.headercontainer {width: 100%;}

.header {color: #FFFFFF;
border: 2px solid;
background-color: #333333;
padding: 2px;
padding-left: 3px;
font: 20px Helvetica, Arial, sans-serif;
font-weight: bold;
text-decoration: none;
vertical-align: 25%;
border-color: #9999ff #000066 #000066 #9999ff;
display: block;
margin: 0px;
width: 100%;
text-align: center;
}

.columnheadercontainer {width: 100%;}

.columnheader {color: #FFFFFF;
background-color: cadetblue;
padding: 15px;
font-weight: bold;
text-decoration: none;
margin: 0px;
text-align: center;
}

.columncontent {
  background-color: antiquewhite;
  padding: 15px;
  margin: 0px;
  text-align: left;
}

.frequencycount {
  background-color:aliceblue;
}


/* Textboxes */

.textbox-right {
  min-width: 100px;
  max-width: 600px;
  background-color: coral;
  color:aliceblue;
  padding: 5px;
  margin-left: 15px;
  float: right;
}

.orangebox {
  background-color: rgb(255, 204, 153);
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: 5px;
  margin-bottom: 2px; 
}

.yellowbox {
  background-color: rgb(255, 255, 204);
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: 5px;
  margin-bottom: 2px; 
}

.graybox {
  background-color: rgb(175, 175, 157);
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: 5px;
  margin-bottom: 2px;
}

.comment {
  background-color: aliceblue;
  padding: 20px;
}

.navigationbox {
  background-color: #552222;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: 5px;
  margin-bottom: 2px;
  text-align: center;
}

/* Buttons */
.buttonscontainer {
  background-color: #333333;
  padding: 5px;
  margin-left: 5px;
  margin-bottom: 2px;
}

.buttons a {color: #FFFFFF;
  padding: 2px;
  padding-left: 3px;
  font-weight: bold;
  text-decoration: none;
  margin: 0px;
  text-align: left;
  background-color: #552222;
}

.buttons a:hover {border: 2px solid;
padding-left: 4px;
padding-top: 3px;
padding-bottom: 1px;
padding-right: 1px;
background-color: #FFFFFF;
border-color: #000066 #9999ff #9999ff #000066;
color: #336699;
text-decoration: none;
}

.horizontalbuttonscontainer {
  width: 100%;
  background-color: #333333;
}

.indented {
  padding-left: 25px;

}

.emphasisorangeonblue { color: #ff9900; background-color: #336699; }

.yellowtextbox-right {
  min-width: 100px;
  max-width: 450;
  background-color: rgb(255,255,204);
  color: black;
  padding: 5px;
  float: right;
}
/* For Lexicon */

.leadletter {
  font-size: 500%;
}

.AlphabetMenu1 {
  width: 400px;
  vertical-align: top;
  color: white;
  background-color: lightcoral;
  float: left;
}

.AlphabetMenu2 {
  width: 400px;
  vertical-align: top;
  color: white;
  background-color: lightcoral;
}

.lesson-at-a-glance {
  padding-left: 15px;
  padding-right: 10px;
}

.grammatical-discussion {
  padding-left: 15px;
  padding-right: 10px;
}

.guided-practice {
  padding-left: 15px;
  padding-right: 10px;
}

.vocabulary {
  padding-left: 15px;
  padding-right: 10px;
}

.exercises {
  padding-left: 15px;
  padding-right: 10px;
}

.reading-and-translation {
  padding-left: 15px;
  padding-right: 10px;
}

.set-margins {
  padding-left: 15px;
  padding-right: 10px;
}

/* Responsive table box sizing for wordlist pages*/

* {
  box-sizing: border-box; /* forces 'width' to include padding and border */
}

.col-container { /* sets bounding box to hold columns for one row */
    display: table;
    width: 100%;
    font-size: 16pt; 
    font-weight: 800;
    border-bottom: solid grey;
}
.col-1 { /* sets size, etc. of first column */
    display: table-cell;
    padding: 16px;
    background-color: coral;
    text-align: center;
    width: 350px;
}
.col-2 { /* sets size, etc. of second column */
    display: table-cell;
    padding: 16px;
    background-color: dodgerblue;
    width: 350px;
}
.col-3 { /* sets size, etc. of third column */
    display: table-cell;
    padding: 16px;
    background-color: lightgreen;
    width: 350px;
}


@media only screen and (max-width: 600px) { /* releases each cell from vertical line for small screens */
  .col-1 { 
    display: block;
    width: 100%;
  }
  .col-2 { 
    display: block;
    width: 100%;
  }
  .col-3 { 
    display: block;
    width: 100%;
  }
}