/* Example stylesheet for to increase readability on websites */

/* Shameless plug, but use a font designed 
   for greater readability than just looking cool. 
   This one is designed for dyslexic readers, though
   it can be useful to increase readability for anyone 
   else                                                 */

@font-face{
	font-family: "opendyslexic";
	src: url('../fonts/OpenDyslexic-Regular.otf');
	font-style: normal;
	font-weight: normal;
}
@font-face{
	font-family: "opendyslexic";
	src: url('../fonts/OpenDyslexic-Italic.otf');
	font-style: italic;
	font-weight: normal;
}
@font-face{
	font-family: "opendyslexic";
	src: url('../fonts/OpenDyslexic-Bold.otf');
	font-weight: bold;
	font-style: normal;
}
@font-face{
	font-family: "opendyslexic";
	src: url('../fonts/OpenDyslexic-BoldItalic.otf');
	font-weight: bold;
	font-style: italic;
}

* {
   font-family: "opendyslexic" !important;
}

/* Use an off-white background. Some users need high
   contrast for better reading. Some need low contrast. 
   A happy medium would be off white to reduce "glare"
   and black text. Anyone that needs a greater extreme
   likely overrides stylesheets.                       
   The text is colored dark blue to assist with "glare"
   issues, but also to make the black symbols subtly stand
   out.                                                  */
body {
	font-size: 14px;
	line-height: 200%;
	background: snow;
	margin: auto 0;
	padding: 0 100;
	color: #1A0033; 
}

/* the highlight class is being used in conjuction 
   with a script that results in symbols being colored 
   differently. This helps comprehension by making them
   subtly more visable.                                 */
h1, h2, h3, h4, .highlight {
	font-style: bold;
	color: black;
}
.highlight, .symbolPop {
	font-size: 125%;
}

/* alternate paragraph shading helps users stay
   on track while reading. This shading is very 
   subtle so it is not annoying, but it still 
   helps.                                       */
p:nth-child(even), li:nth-child(even) {
	background-color: rgba(0,0,0, 0.03);
}


/* highlight text under cursor helps users focus
   on what they are currently reading. This shading
   is darker than the alt-paragraph shading.        */
p:hover, li:hover {
   background-color: rgba(0,0,0, 0.5) !important;

}