/* copyright 2011 Valentine R. Erb II ~ all rights reserved */
/* DOES NOT SUPPORT IE6!!! ...in fact, this only works well if you're NOT supporting it - there was plenty of support for it at one point and then I realized it was just going to drive me crazy and the big project I was finishing this for decided to have no support for it, which is fine by me; maybe some day I'll see if I can make this work for it, but I hope not... */
/* DISCLAIMER - much inspiration has been taken from the openly shared works of others and much effort has been made to scrutinize those pieces of inspiration, but some may be causing issues - question everything and test with reckless abandon!!! */
/* NOTE: I've tried to not let personal style influence this, but when for instance I found out that IE7 wasn't going to cooperate on line-height's within div's unless there was whitespace in the markup (yes, I tried making sure it hasLayout), I said "hey, this is not a problem for me; I always indent and that's all there is to it - that was a relic from someone else's reset proof anyway" - if anyone has a fix, great, because I'd like for this to be CMS-safe, so please share and I'll publicize your contribution, but in the meantime... */


/*
	Sweeping Resets
*/
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big, /* deprecated, but we'll support it anyway */
blockquote,
body,
canvas,
caption,
center, /* deprecated, but we'll support it anyway */
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video { /* nearly all elements - not in this list: button, hr, input, select, textarea */
	margin: 0; /* specifically useful for: addresses margins in body and form handled incorrectly in IE6/7; addresses margin for figure not present in IE6/7/8/9, S5, O11; normalizing fieldsets; addresses margins for button/input/select/textarea set differently in IE6/7, F3/4, S5, Chrome */
	padding: 0; /* specifically useful for: addresses excess padding in IE8/9 */
	border: 0; /* specifically useful for: img's inside a's; corrects color for legends not being inherited in IE6/7/8/9 */
	outline: 0; /* specifically useful for: a's [improves appearance when active or hovered in all browsers (people.opera.com/patrickl/experiments/keyboard/test)] */
	font-size: 100%; /* is putting this here a mistake? */
	font: inherit; /* specifically useful for: td's that don't inherit like you think they should... */
	vertical-align: baseline; /* Improves appearance and consistency in all browsers - can we elaborate on this? */
}
body,
button,
input,
select,
textarea {
    font-family: "Liberation Sans", "Nimbus Sans L", "FreeSans", "Helvetica Neue", Helvetica, Arial, sans-serif; /* addresses font-family inconsistency between 'textarea' and other form elements - takes that a step further and uses a heirarchy that's friendly to outside cases */
}
body,
form,
input,
button,
select, 
textarea {
	font-size: 100%; /* addresses text resizing limitations in IE6/7 - improves text sizing inconsistency in all browsers - known issue: text sizing unnecessary for 'form'? if this is the case, why not just move this to a declaration that's only on body/input/button/select/textarea? */
	margin: 0; /* improves margins set oddly in IE6/7 FF3/4 S5 C10 */
}


/*
	Core Elements
*/
html {
	cursor: default; /* improves visual focus of mouse in all browsers */
	font-size: 100%; /* corrects text resizing oddly when font size is set using ems in IE6/7 (http://clagnut.com/blog/348/#c790) */
	overflow-y: scroll; /* corrects page centering in all browsers regardless of content height */
	-webkit-overflow-scrolling: touch;
	-webkit-tap-highlight-color: transparent; /* improves visual appearance of containers during a delegated click in mSaf (www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/) */
	-webkit-text-size-adjust: 100%; /* corrects text resizing oddly after orientation change in all handhelds (www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/) */
	-ms-text-size-adjust: 100%; /* corrects text resizing oddly after orientation change in all handhelds (www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/) */
}
body {
	/* line-height: 1.231; ...sounds good, but wish there had been an explanation for this... */
	line-height: 1.5; /* CONSTANT!!! */
	/* PERSONAL */
	font-size: 14px; /* round numbers are best, 14's reasonable but small */
	color: black; /* TO-DO: SET THIS TO SOMETHING HOT AND SEE WHAT DOESN'T CHANGE */
}


/*
	(Sometimes-)Sweeping Spacing Declarations
	sort of personal but also necessary
	located here because they may get overwritten later
*/
article,
aside,
audio,
blockquote,
center,
details,
div,
dl,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
iframe,
menu,
meter,
nav,
ol,
p,
pre,
progress,
section,
svg,
table,
ul,
video {
	margin-bottom: 14px; /* pixel equivalent of 1em */
}
blockquote,
center,
dl,
figure,
ol,
ul {
	margin-left: 70px; /* pixel equivalent of 5em */
	margin-right: 70px; /* pixel equivalent of 5em */
}
dd {
	margin-left: 70px; /* pixel equivalent of 5em */
}
dd + dd,
dd + dt,
ol ol,
ul ul {
	margin-top: 4px; /* pixel equivalent of .25em - rounded up */
}
dt,
li {
	margin-bottom: 4px; /* pixel equivalent of .25em - rounded up */
}
figcaption {
	margin-top: 14px; /* pixel equivalent of 1em */
}
td,
th {
	padding-left: 14px; /* pixel equivalent of 1em */
	padding-right: 14px; /* pixel equivalent of 1em */
	padding-top: 4px; /* pixel equivalent of .25em - rounded up */
	padding-bottom: 4px; /* pixel equivalent of .25 em - rounded up */
}


/*
	Native Elements
*/
a {
	/* PERSONAL */
	border-bottom: 1px dotted;
	-moz-transition: color 0.16s linear; /* creates transition for WHICH BROWSERS? */
	-webkit-transition: color 0.16s linear; /* creates transition for WHICH BROWSERS? */
	-o-transition: color 0.16s linear; /* creates transition for WHICH BROWSERS? */
	transition: color 0.16s linear; /* creates transition for WHICH BROWSERS? */
	text-decoration: none; /* remove underline - all underline-like treatments will be handled with borders instead */
}
a:link {
	/* PERSONAL */
	color: blue;
	border-color: blue; /* the traditional coloring applied only to the underline treatment */
}
a:visited {
	/* PERSONAL */
	color: purple;
	border-color: purple; /* the traditional coloring applied only to the underline treatment */
}
a:hover {
	outline: 0; /* improves appearance when active or hovered in all browsers (people.opera.com/patrickl/experiments/keyboard/test) */
	/* PERSONAL */
	color: red;
	border-color: purple;
}
a:active {
	outline: 0; /* improves appearance when active or hovered in all browsers (people.opera.com/patrickl/experiments/keyboard/test) */
	/* PERSONAL */
	color: red;
	border-color: red;
}
a:focus {
	outline: thin dotted; /* addresses outline set oddly in Chrome - perhaps this should be on a blanket :focus pseudo-class instead? that's how meyer's does it */
	/* PERSONAL */
	/* TO-DO: set the color? */
	border-color: black;
}
abbr,
acronym {
	_border-bottom: expression(this.title ? '1px dotted' : 'none'); /* corrects styling not present in IE6 (specifically because of the underscore hack, right? original note mentions IE7/8/9 S5 C10) ...at least for abbr, may not be necessary for acronym, but better safe than sorry?) */
}
abbr[title],
acronym[title] {
	border-bottom: 1px dotted; /* doesn't work for IE6? is that why the underscore hack above? corrects styling not present in IE7/8/9 S5 C10 - is this redundant based on the previous expression? maybe the above expression can be removed now that we're not supporting IE6? */
	/* PERSONAL */
	cursor: help; /* alerts the user to that their rollover has triggered the title attribute's appearance */
	border-color: #808080; /* neutral color treatment so as to not be distracting */
}
abbr {
	
}
acronym {
	
}
address {
	
}
applet {
	
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block; /* corrects block display not defined in IE6/7/8/9 & FF3 */
}
article {
	
}
aside {
	
}
audio {
	display: none; /* corrects display not defined in IE6/7/8/9 & FF3 ...is the original note that spanned a number of declarations - let's elaborate/specify */
	_display: expression(this.controls ? 'inline' : 'none'); /* corrects display not defined in IE6/7/8/9 & FF3 - clearly with the hack this is more specific than that - let's elaborate */
	*zoom: 1; /* corrects display not defined in IE6/7/8/9 & FF3 ...is the original note that spanned a number of declarations - this is of course a hack - let's elaborate/specify */
	/* perhaps to do something here to account for the floating time bubble that shows up in FF outside the box? */
}
audio[controls],
canvas,
video {
	display: inline-block; /* corrects display not defined in IE6/7/8/9 & FF3 ...is the original note that spanned a number of declarations - let's elaborate/specify */
	*display: inline; /* corrects display not defined in IE6/7/8/9 & FF3 ...is the original note that spanned a number of declarations - let's elaborate/specify */
	*zoom: 1; /* does this go with the above? */
	display: block; /* ...hmmm, maybe this stuff above is wrong? ...because this line right here that conflicts with those seems to have normalized display - if we want an inline kind of behavior, let's just float it - want it centered? use margin-left/right of auto */
}
audio:not([controls]) {
    display: none; /* prevents modern browsers from displaying 'audio' without controls - does this expression for the element really work? ...and is it really necessary with the previous statements? */
}
b,
strong {
	font-weight: bold; /* corrects style set incorrectly as 'bolder' in FF3/4 S4/5 C10 */
}
b {
	
}
big { /* deprecated, but we'll support it anyway */
	font-size: 138%; /* why are we doing this? setting it to something normalizes it, number chosen for golden ratio, percentage makes it scalable */
	line-height: 0; /* like sub/sup, keep element from interfering with surrounding line height */
}
blockquote::before,
blockquote::after,
q::before,
q::after {
	content: ""; /* addresses quote property not supported in S4 - should this be applied only to q and not blockquote? if this is Safari only why two declarations? ...not to mention I'm pretty sure it's not supported in more than just Safari */
	content: none; /* addresses quote property not supported in S4 - should this be applied only to q and not blockquote? if this is Safari only why two declarations? ...not to mention I'm pretty sure it's not supported in more than just Safari */
}
blockquote,
q {
	quotes: "" "" "" ""; /* is this the right syntax? */
	quotes: none; /* addresses CSS quotes not supported in IE6/7 - should this be applied only to q and not blockquote? */
	/* PERSONAL */
	font-style: italic; /* makes all quotations italic */
}
blockquote {
	font-family: "Liberation Serif", "Nimbus Roman No 9 L",  "FreeSerif", "Hoefler Text", Times, "Times New Roman", serif; /* gives it that quote-y feel through serif face - not applied to q because that's usually/sometimes inline - uses the full family declaration to be friendly in outside cases - shouldn't this be just an inherit? */
}
button,
input {
	line-height: normal; /* corrects FF3/4 setting it using !important in the UA stylesheet */
	_overflow: expression(this.type == 'button|reset|submit' ? 'visible' : ''); /* corrects spacing displayed oddly in IE6/7 - wait, isn't the underscore hack IE6-only? */
	*overflow: visible;  /* corrects inner spacing displayed oddly in IE6/7 */
}
button,
input[type="button"], 
input[type="reset"], 
input[type="submit"] {
	cursor: pointer; /* improves usability and consistency of cursor style between image-type 'input' and others */
	-webkit-appearance: button; /* corrects inability to style clickable 'input' types in iOS */
	/* in the interests of making these look as much like the file type input, which pretty much cannot be styled... */
		padding-left: 0.70em; /* establish a common declaration */
		padding-right: 0.70em; /* establish a common declaration */
		/* TO-DO: RESOLVE THIS TO PIXELS */
		/* IE7/8 still gives a tiny extra padding so give a little less */
		padding-left: 0.60em\9; /* set IE to use a little less */
		padding-right: 0.60em\9; /* set IE to use a little less */
		/* TO-DO: RESOLVE THIS TO PIXELS */
	/* known issue: Safari gives still more padding, but can't target it without targeting Chrome, right?  It's clearly not perfect, but it *IS* a step in the right direction, no? */
	/* ...alright, on to top and bottom, again with the idea being to make it look like the file type input */
		padding-top: 0.143em;
		padding-bottom: 0.071em;
		padding-top: 2px;
		padding-bottom: 1px;
	/* again, Safari alone seems to be giving a little too much padding */
}
button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0; /* corrects appearance displayed oddly in FF3/4 (www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/) */
	padding: 0; /* corrects appearance displayed oddly in FF3/4 (www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/) */
}
button,
input,
select,
textarea {
	color: black; /* necessary? why? i.e. needs an explanation */
	margin: 0;
	/* -webkit-appearance: none; this removes the drop-down indicator from a select for Chrome and Safari - suggestion was "improves appearance in all browsers"; how so? */
	border-radius: 0; /* implication in http://normalize-css.googlecode.com/svn/trunk/normalize.css is "improves appearance in all browsers" - let's get more specific; what does this do? */
	vertical-align: baseline; /* implication in http://normalize-css.googlecode.com/svn/trunk/normalize.css is "improves appearance in all browsers" - let's get more specific; what does this do? */
	*vertical-align: middle; /* implication in http://normalize-css.googlecode.com/svn/trunk/normalize.css is "improves appearance in all browsers" - let's get more specific; what does this do? clearly here this is targeting IE7 and below  */
	/* PERSONAL */
	font-size: 14px; /* CONSTANT!!! */ /* this should be an inherit, no? */
}
button {
	
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
	/* ...so dumb, but target Opera only to move button's 1px south so they'll align with submit/reset/etc. - at certain zoom levels the button's get just slightly taller, but this is as close as we can get within reason */
	button {
		position: relative;
		top: 1px;
	}
}
caption {
	
}
canvas {
	
}
caption {
	
}
center { /* deprecated, but we'll support it anyway */
	text-align: center; /* is this necessary? */
}
cite {
	font-style: italic;
}
code,
kbd,
pre,
samp {
	font-family: "Liberation Mono", "Nimbus Mono L", "FreeMono", "DejaVu Mono", "Bitstream Vera Mono", "Lucida Console", "Andale Mono", "Courier New", monospace; /* corrects font family displayed oddly in IE6 S5 C10 (en.wikipedia.org/wiki/User:Davidgothberg/Test59) - takes that to next level and gets friendly for outside cases (http://sixrevisions.com/web_design/a-web-designers-guide-to-linux-fonts/)  */
	font-size: 1em; /* corrects font family displayed oddly in IE6 S5 C10 (en.wikipedia.org/wiki/User:Davidgothberg/Test59) */
}
code {
	
}
command {
	/* italic to convey "let's go"? */
}
dd {
	
}
del {
	text-decoration: line-through; /* is this actually necessary or do all browsers already do this? at least meyer's suggests this is necessary */
}
details {
	
}
dfn {
	font-style: italic; /* corrects styling not present in S5 C10 */
}
div {
	
}
dl {
	
}
dt {
	font-weight: bold; /* look at a dictionary - terms are almost always bold */
}
em {
	font-style: italic;
}
fieldset {
	line-height: 28px; /* the pixel equivalent of 2em - this I feel may be a real piece of brilliance - trying to put the right spacing between legend's and fieldset's was proving to be a real nightmare, as was the way a "normal" line height interacted with the adjacent form elements; set a nice tall line-height like this and both issues are solved in one line */
}
figcaption {
	/* text treatment? */
}
figure {
	padding: 1.61803398874em;
	border: 1px solid #808080;
	text-align: center;
}
footer {
	
}
form {
	
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Liberation Serif", "Nimbus Roman No 9 L",  "FreeSerif", "Hoefler Text", Times, "Times New Roman", serif;
	font-weight: bold;
}
h1 {
	font-size: 160%;
	/* PERSONAL */
	color: #666666;
}
h2 {
	font-size: 150%;
	/* PERSONAL */
	color: #555555;
}
h3 {
	font-size: 140%;
	/* PERSONAL */
	color: #444444;
}
h4 {
	font-size: 130%;
	/* PERSONAL */
	color: #333333;
}
h5 {
	font-size: 120%;
	/* PERSONAL */
	color: #222222;
}
h6 {
	font-size: 110%;
	/* PERSONAL */
	color: #111111;
}
header {
	
}
header > hgroup {
	margin-bottom: 0;
}
hgroup {
	
}
hgroup h1,
hgroup h2,
hgroup h3,
hgroup h4,
hgroup h5,
hgroup h6 {
	margin-bottom: 0; /* headings in a heading group are stacked with purpose, so no excessive visual separation */
}
hr {
	/* suggested in html5boilerplate.com's distribution that display: block; is necessary, but not quantified - should we enable this? */
	overflow: hidden; /* makes sure that with what will presumably be a fixed height it doesn't get any taller than that */
	border: 0; /* for whatever reason hr didn't get blanket reset elsewhere here, so... */
	margin: 0; /* for whatever reason hr didn't get blanket reset elsewhere here, so... */
	padding: 0; /* for whatever reason hr didn't get blanket reset elsewhere here, so... */
	/* PERSONAL */
	margin-bottom: 1em; /* not part of the grouped spacing because the above settings would override it - let's get this sorted out */
	height: 1px;
	color: #808080; /* must set both of these to get the same color across browsers - let's clarify which does which */
	background-color: #808080; /* must set both of these to get the same color across browsers - let's clarify which does which */
}
i {
	font-style: italic; /* is this actually necessary */
}
iframe {
	display: block; /* this has a profound effect, eliminating inconsistencies between browsers that for all but IE7 create space(s) around the iframe that even removing the line-height (though it had some effect) failed to resolve */
}
img {
	vertical-align: bottom; /* fixes the problem with extra space inside anchors around images in all but IE7, where the border is still visible */
	/* TO-DO: FIX THE ABOVE MENTIONED PROBLEM WITH IE7 - THE JQUERY SCRIPT COMMENTED OUT CURRENTLY COULD FIX IT, BUT LET'S TRY TO USE CSS */
	-ms-interpolation-mode: bicubic; /* improves visual appearance when scaled in IE7 (code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/) */
}
input,
select,
textarea {
	font-family: inherit; /* isn't there a shorthand for combining these three inheritances? */
	font-size: inherit; /* isn't there a shorthand for combining these three inheritances? */
	font-weight: inherit; /* isn't there a shorthand for combining these three inheritances? */
	*font-size: 100%; /* WHAT'S THIS FOR? */
}
input:valid,
textarea:valid {
	/* you can set a background color here, but it's going to appear an any not-invalid input, not necessarily valid, so for instance a textarea's going to fill with that color, so...*/
}
input:invalid,
textarea:invalid {
	/* PERSONAL */
	background-color: lightCoral;
}
input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box; /* addresses box sizing forced to border-box in IE6/7 */
}
input[type="image"] {
	vertical-align: top; /* much like with a textarea, this allows the label to show up at the top next to the input */
	cursor: crosshair; /* indicates the normal behavior of this control, which is to submit coordinates */
	/* note: this doesn't look right if you're expecting an image type to behave like a submit and it shouldn't; that's not what it's for so that's not semantically correct */
}
input[type="search"] {
	-webkit-appearance: textfield; /* addresses appearance set to searchfield in S5, Chrome */
	-moz-box-sizing: content-box; /* addresses sizing set oddly to searchfield in S5 iOS C10 - known issue: -moz included to future-proof */
	-webkit-box-sizing: content-box; /* addresses box sizing set to border-box in S5, Chrome */
	box-sizing: content-box; /* addresses sizing set oddly to searchfield in S5 iOS C10 */
}
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none; /* addresses inner padding displayed oddly in S5 C10 on OSX */
}
input {
	
}
ins {
	text-decoration: none; /* html5boilerplate.com and meyer's suggested this was necessary - can we confirm why?  at least some browsers will underline, so what, we're preventing/normalizing?  the ideal treatment for ins (IMHO) is to push it up to the superscript's baseline and put a karat before it, but before/after doesn't work for IE7 and we're still supporting it, so... */
	line-height: 0; /* keeps what follows from messing with the line height of surrounding content */
	position: relative; /* sets up for the following... */
	bottom: 0.333em; /* places it above the baseline */
}
kbd {
	
}
label {
	display: inline-block;
	/* ideally we would set a width here, but that would cascade into labels (like for instance one you'd have on a radio button) that wouldn't want this treatment, so it'll have to be a site-specific thing for now */
}
label[for] {
	cursor: pointer; /* indicates to the user they can click on it and something will happen */
}
legend {
	display: block; /* can this be removed with the below width declaration? maybe it's redundant already? */
	width: 100%; /* the last coffin nail in the default treatment of forms with regards to fieldsets and legends */
	color: black; /* can't remember which browser it is, but one of them doesn't provide for these to end up the right color... */
	*margin-left: -7px; /* corrects alignment displayed oddly in IE6/7 */
	*margin-right: -7px; /* counters where it then juts right based on that correction */
}
li {
	
}
mark {
	background-color: yellow; /* corrects styling not present in IE6/7/8/9 */
	color: black; /* corrects styling not present in IE6/7/8/9 */
}
menu {
	
}
meter {
	display: block;
}
nav {
	
}
noscript {
	
}
object {
	
}
ol,
ul {
	list-style-position: outside;
}
ol {
	list-style-type: decimal;
}
ol ol {
	margin-bottom: 0;
	margin-right: 0;
}
p {
	
}
pre {
	white-space: pre; /* improves readability of pre-formatted text in all browsers */
	white-space: pre-wrap; /* improves readability of pre-formatted text in all browsers */
	word-wrap: break-word; /* improves readability of pre-formatted text in all browsers */
}
progress {
	display: block;
}
q {
	
}
s {
	
}
samp {
	
}
section {
	
}
select {
	
}
small {
	font-size: 62%; /* improves appearance in all browsers (gist.github.com/413930) - let's quantify this explanation further; setting it to get consistent, picking the number to be an appropriate size? note golden ratio? */
}
span {
	
}
strike {
	/* add strikethrough? what is this tag? */
}
strong {
	
}
sub,
sup {
	font-size: 62%; /* improves appearance in all browsers (gist.github.com/413930) - let's quantify this explanation further; setting it to get consistent, picking the number to be an appropriate size? note golden ratio? */
	line-height: 0; /* prevents line height being disturbed by these tags (credit to gist.github.com/413930?) */
	position: relative; /* sets up relative positioning that gets defined for each element respectively */
	vertical-align: baseline; /* improves appearance in all browsers (gist.github.com/413930) */ 
}
sub {
	bottom: -0.25em; /* places subscript 25% below baseline */
}
summary {
	
}
sup {
	top: -0.5em; /* places superscript 50% above baseline */
}
svg {
	display: block; /* makes display consistent across browsers */
}
svg:not(:root) { /* SVG not supported in IE7/8 or Safari or Opera, so this is sort of pointless, but... */
    overflow: hidden; /* corrects overflow displayed oddly in IE9 */
}
table {
	border-collapse: collapse; /* improves visual appearance in all browsers - can we get more specific about this? */
	border-spacing: 0; /* improves visual appearance in all browsers - can we get more specific about this? */
	width: 100%;
}
table button,
table input {
    *overflow: auto; /* corrects overlap and whitespace issue for buttons and inputs in IE6/7 - known issue: reintroduces inner spacing */
}
tbody {
	
}
td {
	/* PERSONAL */
	font-size: 14px; /* no longer necessary for there being an inherit set way up top? font-family: "Liberation Sans", "Nimbus Sans L", "FreeSans", "Helvetica Neue", Helvetica, Arial, sans-serif; */
	color: black; /* no longer necessary for there being an inherit set way up top? font-family: "Liberation Sans", "Nimbus Sans L", "FreeSans", "Helvetica Neue", Helvetica, Arial, sans-serif; */
}
textarea {
	/* line-height: 50px; doesnt' support line-height? */
	width: 30em; /* roughly 50 characters per line */
	height: 250px; /* 5 lines high @ above constant - MAKE SURE TO CHANGE WHEN THAT LINE-HEIGHT GETS SET TO SOMETHING INTELLIGENT */
	overflow: auto; /* corrects scrollbar displayed oddly in IE6/7/8/9 */
	vertical-align: top; /* improves readability and alignment in all browsers - can we get more specific about this?  this means the label shows up at the top of the textarea, right? */
	/* TO-DO: SET THIS DIFFERENTLY FOR OPERA WHERE THE TEXT IS RIGHT AT THE TOP OF THE LINE */
}
tfoot {
	
}
th {
	font-weight: bold;
}
thead {
	
}
time {
	
}
tr {
	
}
tt {
	
}
u {
	text-decoration: none;
	border-bottom: 1px solid;
}
ul {
	list-style-type: disc;
}
ul ul  {
	margin-bottom: 0;
	margin-right: 0;
}
var {
	/* should this get a monospace face? */
	font-style: italic;
}
video {
	/* doesn't need the same control-dependent display as audio to get that effect? */
	background-color: #CCCCCC; /* mattes the video on a color so you can see what area is occupied by it */
}


/*
	Nav-Specific - not really necessary, but nice to have
*/
nav {
	background-color: #CCCCCC;
	line-height: 28px;
}
nav ul {
	list-style: none; /* no bullets */
	margin: 0; /* no margins around the list, except the following to indent */
	margin-left: 70px; /* the pixel equivalent of 5em's */
}
nav ul li {
	margin: 0; /* no margins around the list items */
	display: block; /* blows the line items up to the height of the nav - still necessary? */
	float: left; /* runs the list items from left to right */
	line-height: inherit; /* ???? */
}
nav ul li a {
	display: block; /* blows the links up to the height of the nav */
	border: none; /* removes the standard underline treatment for links */
	font-weight: bold; /* bolds the links because it's a navigation */
	padding-left: 0.70em; /* puts some space between the links */
	padding-right: 0.70em; /* puts some space between the links */
	margin-right: 14px; /* the pixel equivalent of 1em */
}
nav ul li a:link {
	color: #333333;
	background-color: #999999;
}
nav ul li a:visited {
	color: #333333;
	background-color: #999999;
}
nav ul li a:hover {
	color: white;
	background-color: #999999;
}
nav ul li a:active {
	color: white;
	background-color: #999999;
}
nav ul li a.current:link {
	color: #CCCCCC;
	background-color: #666666;
}
nav ul li a.current:visited {
	color: #CCCCCC;
	background-color: #666666;
}
nav ul li a.current:hover {
	color: white;
	background-color: #666666;
}
nav ul li a.current:active {
	color: white;
	background-color: #666666;
}


/* non- element-specific pseudo elements */
:focus {
	/* the problem with the following is that in some browsers you'll see focus on things like the body or div's or whatever - we want focus to only be on interactive elements, so that's anchors, buttons, selects, textareas, inputs, what else? let's (i.e. TO-DO!!!) set focus to have no treatment, i.e. do a reset, then build it up for the elements that should get it */
	/* outline: thin dotted black; */
}
::-moz-selection { /* which browsers does this target? */
	background-color: slateblue; /* sets the color of the highlight */
	color: white; /* must constrast with the above color; i.e. don't set it to white if the background color is yellow */
	text-shadow: none; /* makes sure no text shadow in selection */
}
::selection { /* this must be declared separately even though it's exactly the same as the one above - which browsers is this targeting? */
	background: slateblue; /* sets the color of the highlight */
	color: white; /* must constrast with the above color; i.e. don't set it to white if the background color is yellow */
	text-shadow: none; /* makes sure no text shadow in selection */
}
[hidden] { /* any element with the boolean attribute (i.e. presence is true, does not get a value) of hidden (works like "checked" or "selected") */
    display: none; /* addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 - known issue: no IE6 support */
	visibility: hidden; /* hides it also from screen readers? (css-discuss.incutio.com/wiki/Screenreader_Visibility) - should this get applied to other hidings? */
}

/*
	Utility Classes
*/
.warning {
	color: orangeRed;
}
error {
	color: maroon;
}
.clearfix:before,
.clearfix:after {
	content: ""; /* contain floats (nicolasgallagher.com/micro-clearfix-hack/) */
	display: table; /* contain floats (nicolasgallagher.com/micro-clearfix-hack/) */
}
.clearfix:after {
	clear: both; /* contain floats (nicolasgallagher.com/micro-clearfix-hack/) */
}
.clearfix {
	zoom: 1; /* contain floats (nicolasgallagher.com/micro-clearfix-hack/) */
}
.preloader { /* loads images visibly out of sight for preloading; i.e. hover actions and stuff - let's make sure this is working across browsers? */
	position: absolute; /* provides for the object to be positioned relative to the document */
	top: -999999px; /* puts the object way above the document */
	left: -99999px; /* puts the object way left of the document */
}
.containsImgOnly { /* special class added by jQuery to anchors around images */
	display: inline-block; /* keeps the anchor from becoming taller than the anchor - let's qualify which of these declarations makes which browsers cooperate */
	line-height: 0; /* keeps the anchor from becoming taller than the anchor - let's qualify which of these declarations makes which browsers cooperate */
	border: 0; /* removes the bottom border(s) that get are being applied to anchors */
}


/*
	Print format - so far all brought in from html5boilerplate.com, needs to be scrutinized
*/
@media print {
	* { /* sigh, really? is this really smart to start introducing wildcard here? */
		background: transparent !important;
		color: black !important; /* black prints faster (sanbeiji.com/archives/953) */
		text-shadow: none !important;
		filter: none !important;
		-ms-filter: none !important;
	}
	a,
	a:visited {
		color: #444 !important;
		text-decoration: underline;
	}
	a[href]:after {
		content: " (" attr(href) ")";
	}
	abbr[title]:after {
		content: " (" attr(title) ")";
	}
	/* for image replacement class not being used in this sheet - .ir a:after, */
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content: ""; /* don't show links for images, or javascript/internal links */
	}
	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}
	thead {
		display: table-header-group; /* css-discuss.incutio.com/wiki/Printing_Tables */
	}
	tr,
	img {
		page-break-inside: avoid;
	}
	img {
		max-width: 100% !important;
	}
	@page {
		margin: 0.5cm;
	}
	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}
	h2,
	h3 {
		page-break-after: avoid;
	}
}

/* ...similarly, maybe there's a good application for a handwriting font - maybe ins or something like that?  something to consider... */