@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@500&family=Merriweather&display=swap');

html, body {
	margin: 0px;
	padding: 0px;
	border: none;
	}

body {
	background-image:url('images/background.gif');
	background-repeat:repeat-x;
	background-color: #ddd; 
	-webkit-text-size-adjust:100%;
    height: 100vh;
    }

* {
  	box-sizing: border-box;
	}

.header {
	background-color: #422cb3;
	}

.print-header {
	display: none;
	background: #fff;
	height: 71px;
	}

.mobile-header {
	display: none;
	background: #422cb3;
	height: 67px;
	}

.main-table {
	width: 924px;
	height: 100vh;
	background-color: #fff;
	box-shadow: 0px 0px 25px rgba(0,0,0,.5);
	}

ul.topnav {
	list-style-type: none;
	margin: 0px 0px 0px 10px;
	padding: 0px;
	overflow: hidden;
	}

ul.topnav li {
	float: left;
	margin: 0px;
	}

ul.topnav li a:link, ul.topnav li a:visited {
	display: block;
	font-family: 'Archivo Narrow', 'Arial', sans-serif;
	font-size: 19px;
	line-height: 40px;
	padding: 0px 15px 0px 15px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	border-style: solid;
	border-width: 1px 1px 0px 1px;
	border-color: #422cb3 #422cb3 #000 #6c56f9;
	background-image:url('images/button-BG.gif');
	background-color: #4d37c1;
	}

ul.topnav li a:hover {
	background-image:url('images/button-BG-hover.gif');
	}
	
ul.topnav li.on a:link, ul.topnav li.on a:visited {
	color: #422cb3;
	background-image:url('images/button-BG-on.gif');
	background-color: #ddd;
	}

ul.topnav li.on a:hover {
	background-image:url('images/button-BG-on.gif');
	}

a:link          {color: #422cb3;}
a:visited       {color: #422cb3;}
a:hover         {color: #6d57ff;}

a:link.nav      {color: #422cb3; text-decoration: none;}
a:visited.nav   {color: #422cb3; text-decoration: none;}
a:hover.nav     {color: #6d57ff; text-decoration: none;}

h1 {
	font-family: 'Merriweather', 'Georgia', serif;
	font-size: 28px;
	line-height: 125%;
	font-weight: normal;
	margin-top: 30px;
	margin-bottom: 12px;
	color: #422cb3;
	}

tr.navigation {
	background-color: #4d37c1;
	}

td.subnav {
	cursor: pointer;
	}

.subnav {
	font-family: 'Archivo Narrow', 'Arial', sans-serif;
	font-size: 17px;
	margin: 0px;
	color: #666;
	text-align: center;
	}

p.subnav img {
	margin-right: 7px;
	}

.socialBar {
	background-color:#f0f0f0;
	border-radius: 16px;
	padding: 4px 0 0 0;
	margin-bottom: 30px;
	}

.socialBar td {
	vertical-align: top;
	}

.toc {
	max-width: 370px;
	display: inline-block;
	vertical-align: top;
	text-align: left;
	margin: 0px;
	}
	
.toc ol {
	margin: 0px 5px 0px 0px;
	}

.toc li {
	font-size: 15px;
	margin: 0px 0px 15px 0px;
	}

h2 {
	width: 100%;
	font-family: 'Merriweather', 'Georgia', serif;
	font-size: 24px;
	line-height: 125%;
	font-weight: normal;
	margin-top: 30px;
	margin-bottom: 20px;
	color: #5945bc;
	border-style: solid; 
	border-width: 0px 0px 1px 0px; 
	border-color: #5945bc;
	}

#less {
	background-image: url("images/lesson-background.png") !important;
	}

.article {
	max-width: 660px;
	max-width: 646px;
	margin: 0px 0px 30px 0px;
	}

.alphabet {
	width: 100%;
	}

.alphabet th {
	border-bottom:	1px solid #CCC;
	}

.alphabet td {
	padding: 0 5px;
	vertical-align: top;
	}

.alphabet tr:nth-child(2n+3) {
    background-color: #f8f8f8;
	}

.audio {
	margin: 0 6px 0 0;
	cursor: pointer;
	display: none;
	}

.menu {
	margin: 20px 0px 0px 0px;
	background-color:#ebe3ff;
	border-radius: 10px;
	border-radius: 0px;
	padding: 10px 20px;
	}

.two-col {
	display: inline-block;
	width: 320px;
	vertical-align: top;
	margin: 0px;
	padding: 0px;
	}

.three-col {
	display: inline-block;
	width: 210px;
	vertical-align: top;
	margin: 0px;
	padding: 0px;
	}

.four-col {
	display: inline-block;
	width: 158px;
	vertical-align: top;
	margin: 0px;
	padding: 0px;
	}

.aside .two-col {
	width: 300px;
	}

table.chart {
	margin: 10px auto 20px auto;
	}
	
table.chart td {
	padding: 0px 12px;
	}

table.chart td p {
	margin: 5px 0px;
	}

table.chart th {
	padding: 0px 12px;
	vertical-align: bottom;
	text-align: left;
	border-bottom:	1px solid #CCCCCC;
	}

table.chart th p {
	font-weight: normal;
	margin: 5px 0px;
	}

h2.san-serif {
	font-family: 'Archivo Narrow', 'Arial', sans-serif;
	font-size: 25px;
	border-style: none;
	}

h2.subhead {
	font-family: 'Arial', 'Helvetica', sans-serif;
	font-size: 16px;
	font-weight: normal;
	font-style: italic;
	margin: 0px 0px 20px 0px;
	border-style: none;
	}

h3 {
	font-family: 'Merriweather', 'Georgia', serif;
	font-size: 22px;
	line-height: 140%;
	font-weight: normal;
	margin-top: 30px;
	margin-bottom: 20px;
	color: #6f61c4;
	}

h4 {
	font-family: 'Merriweather', 'Georgia', serif;
	font-size: 18px;
	line-height: 140%;
	font-weight: normal;
	margin-top: 30px;
	margin-bottom: 20px;
	color: #867ace;
	}

h5 {
	font-family: 'Merriweather', 'Georgia', serif;
	font-size: 17px;
	line-height: 140%;
	font-weight: normal;
	margin-top: 30px;
	margin-bottom: 20px;
	color: #9f95d9;
	}

h6 {
	font-family: 'Merriweather', 'Georgia', serif;
	font-size: 16px;
	line-height: 140%;
	font-weight: bold;
	margin: 40px 0px 20px 0px;
	border-style: solid; 
	border-width: 0px 0px 1px 0px; 
	color: #6f61c4;
	}

p {
	font-family: 'Merriweather', 'Georgia', serif;
	font-size: 14px;
	line-height: 160%;
	margin: 12px 0px;
	}

p.example {
	font-size: 15px;
	font-weight: bold;
	margin: 10px 0px;
	}

p.example I {
	font-weight: normal;
	}

p.example-main {
	font-size: 15px;
	font-weight: bold;
	margin: 20px 0px;
	line-height: 175%;
	text-align: center;
	}

p.example-main I {
	font-weight: normal;
	}

p.example-formula {
	font-size: 15px;
	font-weight: bold;
	margin: 20px 0px;
	line-height: 175%;
	text-align: center;
	background-color: #F6F6F6;
	padding: 10px;
	}

p.example-small {
	font-size: 14px;
	font-weight: bold;
	margin:	4px 0px;
	line-height: 175%;
	TEXT-ALIGN: left;
	TEXT-ALIGN: center;
	}

p.example-small I {
	font-weight: normal;
	}

table.conjugation {
	margin: 10px auto;
	}

table.conjugation td {
	width: 90px;
	padding: 0px 0px 0px 8px;
	background-image:url('images/ConjugationtableBG.png');
	}

table.wide td {
	width: 120px;
	}

table.conjugation td p {
	margin: 4px 0px;
	text-align: left;
	}

.indent {
	margin:	0px 0px 0px 40px;
	}

.red {
	color:			#FF0000;
	}

.highlight, .irregular {
	background-color: rgba(255,255,0,0.5);
	}

p.list {
	margin-top:		7px;
	margin-bottom:	7px;
	}

.small {
	font-size:		11px !important;
	line-height:	140%;
	}

.big {
	font-size:		17px;
	line-height:	150%;
	}

#aag {
	padding-top: 10px;
	}

td.copyright {
	height: 1px;
	background-color: #422cb3;
	padding: 6px 0px;
	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 11px;
	line-height: 140%;
	color: #fff;
	margin: 0px;
	}

.copyright a {
	color: #fff;
	}

.nomargin {
	margin-top:		2px;
	margin-bottom:	2px;
	}

p.nav {
	font-weight:	bold;
	font-size:		13px;
	line-height:	100%;
	margin-top:		5px;
	margin-bottom:	5px;
	TEXT-ALIGN:		center;
	color:			#422cb3;
	}

input.button {
	font-family: 'Archivo Narrow', 'Arial', sans-serif;
	font-size: 19px;
	color: #422cb3;
	}

ul {
	font-family: 'Merriweather', 'Georgia', serif;
	font-size:	    14px;
	line-height:	160%;
	}

ol {
	font-family: 'Merriweather', 'Georgia', serif;
	font-size:	    14px;
	line-height:	160%;
	}

li {
	margin-top:	    10px;
	margin-bottom:	10px;
	}

.ataglance {
	width: 730px;
	margin-left: auto;
    margin-right: auto;
	margin-bottom: 30px;
	}

.sidebar {
	width: 182px;
	background-color: #E5F1F8;
	padding: 10px;
	position: absolute;
	margin: 0px 0px 0px 672px;
	border-style: solid;
	border-width: 1px;
	border-color: #C3DEEF;
	border-radius: 0px;
	}

.sidebar p {
	font-size:		13px;
	font-weight:	bold;
	margin-top:		6px;
	margin-bottom:	0px;
	color:			#000000;
	}

.sidebar img {
	margin: 0px 5px;
	}

.sidebarAd {
	display: block;
    position: fixed;
    top: 187px;
	width: 160px;
	margin: 0px 0px 0px 900px;
	}

.note {
	width: 182px;
	background-color:#FFFFCC;
	padding: 0px 10px 0px 10px;
	position: absolute;
	margin: 0px 0px 0px 672px;
	border-style: solid;
	border-width: 1px;
	border-color: #F2DC8F;
	border-radius: 0px;
	}

.note p {
	font-size: 13px;
	}

.note hr {
	border: none;	
	height: 1px;
	margin: 0px;
	background-color: #F2DC8F;	
	color: #F2DC8F;
	}

.callout {
	width: 182px;
	background-color: #eee;
	padding: 5px 10px;
	position: absolute;
	margin: 0px 0px 0px 672px;
	border-style: solid;
	border-width: 1px;
	border-color: #ccc;
	border-radius: 0px;
	}

.callout p {
	font-size: 13px;
	margin-top: 6px;
	margin-bottom: 6px;
	}

.pracNote {
	text-align: center;	
	background-color: #EEEEEE;
	margin: 30px 0px;
	padding: 0px 20px;
	border-style: solid;
	border-width: 1px;
	border-color: #DDDDDD;
	border-radius: 10px;
	border-radius: 0px;
	}

.pracNote p {
	line-height: 140%;
	margin: 8px 0px;
	}

.checkmark {
	margin:		-6px 0px 0px -315px;
	position:	absolute;
	}

.menu li {
	margin: 6px 0px;
	}

.circle {
	margin: -2px 0px 0px -10px;
	position: absolute;
	}

.aside {
	margin: 20px 0px;
	border-radius: 10px;	
	border-radius: 0px;	
	background-color:#E5F5FF;
	padding: 20px 20px 10px 20px;
	}

.aside h1, .aside h2, .aside h3, .aside h4, .aside h5, .aside h6 {
	margin-top: 0px;
	margin-bottom: 0px;
	color:	#0099FF;
	}

table.centered {
	margin: 0px auto;
	}

table.vocab {
	margin: 30px;
    border-collapse: collapse;
	width: 100%;
	}

table.vocab tr:nth-child(even) {background: #fafafa;}
table.vocab tr:nth-child(odd) {background: #ffffff;}

table.vocab td {
	font-family: 'Merriweather', 'Georgia', serif;
	font-size: 16px;
	border-width: 0px;
	padding: 10px 10px;
	}

span {
	text-decoration: inherit;
	}

span.noun {
	background-color: #FFFFCF;
	}

span.verb {
	background-color: #DFF2FF;
	}

span.dop {
	background-color: #DFFFDF;
	}

span.iop {
	background-color: #F2DFFF ;
	}

span.adj {
	background-color: #FFDFFF;
	}

span.adv {
	background-color: #FFECCF;
	}

span.ref {
	background-color: #F0E8D9;
	}

span.pret {
	background: url(images/Underline-Preterite.png) bottom repeat-x;
	}

span.imp {
	background: url(images/Underline-Imperfect.png) bottom repeat-x;
	}

span.subj {
	background: url(images/Underline-Subjunctive.png) bottom repeat-x;
	}

span.ind {
	background: url(images/Underline-Indicative.png) bottom repeat-x;
	}

span.mas {
	background: url(images/Underline-Masculine.png) bottom repeat-x;
	}
	
span.fem {
	background: url(images/Underline-Feminine.png) bottom repeat-x;
	}

table.keychart {
	margin: 20px auto;
	}
	
table.keychart td {
	padding: 5px 15px;
	}

table.keychart td p {
	font-size: 15px;
	margin: 0px;
	}

table.keychart th {
	padding: 5px 0px;
	border-bottom:	1px solid #000000;
	}

table.keychart th p {
	font-size: 15px;
	font-weight: bold;
	margin: 0px;
	color: #422cb3;
	}

tr.underline {
	border-bottom:	1px solid #CCC;  
	}

.GooglePres  {
	margin:	0px 0px 20px 0px; 
	}

.dropdown-menu {
	border-style:		solid;
	border-width:		0px 1px 1px 1px;
	border-color:		#FFFFFF #00822B #00822B #FFFFFF;
	background-color:	#DFDFDF;
	width:				200px;
	position:			absolute;
	top:				115px;
	z-index:			2;
	}

img.infographic {
	border: 1px solid #000000;
	margin: 20px 0px;
	}

.corrections {
	font-size: 13px;
	text-align: center;
	margin: 0px 0px 30px 0px;
	}

@media print {

	boday {background-image: none; background-color: #fff;}
	.main-table {box-shadow: none;}
	.header, .navigation, .ad, .socialBar, .tabs, .corrections {display: none;}
	td.copyright, .copyright A {background-color: #fff; color: #000;}
	.print-header {display: table-row;}
	
	}

@media only screen and (max-width: 728px) {

	body {background-image: none; background-color: #fff;}
	.main-table {box-shadow: none; width: 100%;}
	.header, .socialBar, .tabs, .sidebar, .callout, .note, .noMobile, .pracNote {display: none;}
	.mobile-header {display: table-row;}
	.article {max-width: 100%;}
	.article img {max-width: 300px; height: auto;}

	ul.topnav {
		margin: 0px;
		}

	ul.topnav li {
		font-size: 16px;
		width: 100%;
		display: inline-block;
		float: none;
		}

}