html							{ margin: 0; padding: 0; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; }
body							{ margin: 0; padding: 20px; color: #404040; font-family: Arial, Tahoma, Verdana; font-size: 16px; line-height: 26px; }

pre							{ margin: 20px 0px 0px 0px; padding: 0; line-height: 20px; }
pre.lightgreen						{ color: #08b200; margin: 0; }

div.pre							{ font-family: monospace; line-height: 14px; margin: 26px 0px 6px 0px; }
div.pre				span			{ color: #e0e0e0; }

a							{ text-decoration: none; color: #0093b8; border-bottom: 1px solid #acd7ed; }
a:hover							{ color: #ff0000; border-bottom: 1px solid #ffa5aa; }

ul, ol							{ margin-top: 20px; } 
li							{ margin: 0; }

#pathString						{ color: #808080; }

#lessonContent						{ background-color: #f0f0f0; color: #000000; margin-top: 20px; padding: 22px 28px 22px 28px; }
#lessonContent			ul			{ margin: 0; }
#lessonContent			ul > li			{ margin-left: -28px; }

#taskContent						{ background-color: #f0f0f0; margin-top: 20px; padding: 22px 28px 22px 28px; overflow: auto; line-height: 22px; }
#taskContent			h2			{ margin: 0px 0px 20px 0px; }
#taskContent			img			{ display: block; width: 100%; max-width: 600px; }
#taskContent			ul			{ margin: 0; }
#taskContent			ul > li			{ margin-left: -12px; }

.exampleContent						{ padding: 20px 28px 0px 28px; color: #000000; line-height: 22px; }
.exampleContent			img			{ display: block; width: 100%; max-width: 600px; margin: 5px 0px; }
.exampleText						{ padding: 20px 28px 0px 28px; color: #000000; line-height: 22px; }
.exampleText			img			{ display: block; width: 100%; max-width: 600px; }
.exampleText			ul			{ margin: 0; }
.exampleText			ul > li			{ margin-left: -23px; }
.resultContent						{ padding: 4px 34px 0px 29px; font-family: Arial, Tahoma, Verdana; font-size: 16px; line-height: 22px; color: #000000; overflow: auto; }
.black							{ color: black; }
.darkgray						{ color: slategray; }
.green							{ color: green; }
.red							{ color: red; }
.bold							{ font-weight: bold; }
.overflowAuto						{ overflow: auto; }

#showSolutionLink					{ color: #404040; border-bottom: 1px dashed #808080; }
#solutionContainer					{ display: none; overflow: auto; }

.bigString						{ padding: 20px 0px 20px 0px; font-size: 100px; line-height: 106px; font-weight: bold; color: #000000; }
.textString						{ padding: 0px 0px 10px 0px; line-height: 22px; color: #000000; }
.new							{ color: #ff0000; font-weight: bold; font-variant: small-caps; }

#copyrightFooter					{ margin: 32px 0px 10px 0px; padding-top: 32px; border-top: 1px solid #a0a0a0; font-size: 13px; line-height: 18px; color: #a0a0a0; }
#lessonsNavigation					{ margin: 30px 0px -6px 0px; padding: 24px 0px 0px 23px; border-top: 1px dashed #a0a0a0; font-size: 13px; line-height: 18px; color: #a0a0a0; }


@media screen and (min-width: 300px)
{
 h1							{ font-size: 22px; line-height: 28px; margin-top: 20px; }
 h2							{ font-size: 20px; margin: 20px 0px 0px 0px; }
 h3							{ font-size: 18px; margin: 20px 0px 0px 28px; }
 #pathString						{ font-size: 13px; line-height: 19px; }
}


@media screen and (min-width: 700px)
{
 h1							{ font-size: 26px; line-height: 32px; margin-top: 20px; }
 h2							{ font-size: 21px; margin: 20px 0px 0px 0px; }
 h3							{ font-size: 18px; margin: 20px 0px 0px 28px; }
 #pathString						{ font-size: 14px; line-height: 20px; }
}


@media screen and (min-width: 1000px)
{
 h1							{ font-size: 30px; line-height: 36px; margin-top: 20px; }
 h2							{ font-size: 22px; margin: 20px 0px 0px 0px; }
 h3							{ font-size: 18px; margin: 20px 0px 0px 28px; }
 #pathString						{ font-size: 14px; line-height: 20px; }
}