/*

# CSS initialization #
May 2016  
Edwardson Tan

[Normalize.css](https://necolas.github.io/normalize.css/) is by Nicolas Gallagher and Jonathan Neal

## References ##
* For some basic styling defaults see Jonathan Neal's [sanitize.css](https://10up.github.io/sanitize.css/)
* More styling defaults using [mini reset
](https://github.com/vladocar/CSS-Mini-Reset/blob/master/CSS-Mini-Reset.css)
* Pseudo-class [:root](https://css-tricks.com/almanac/selectors/r/root/)
* Guide to `box-sizing`: [box-sizing](https://css-tricks.com/box-sizing/), [better box-sizing](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/) 

## License ##
[MIT License](https://opensource.org/licenses/MIT)

*/

@import url(normalize.css); 

/*! Initial styling for all pages */

// use box-border as default so that width = content width + padding + border (but excludes margins)
// from https://css-tricks.com/box-sizing/ , https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ 
html {
  box-sizing: border-box;
	font: 100% sans-serif;
}

*, *:before, *:after {
  box-sizing: inherit;
}
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


// Normalize.css only includes body {margin: 0}
// see https://github.com/vladocar/CSS-Mini-Reset/blob/master/CSS-Mini-Reset.css
html, body, div, form, fieldset, legend, label {
	margin: 0;
	padding: 0;
}
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


// see https://github.com/vladocar/CSS-Mini-Reset/blob/master/CSS-Mini-Reset.css
h1, h2, h3, h4, h5, h6, th, td, caption {
	font-weight: normal;
}
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


// large images should automatically resize down as viewport size decreases
img {
	max-width: 100%;
	border: 0;			// I think some browsers add borders to images
}
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


// table/cell borders and paddings should be specified by user as requirements dictate
table {
	border-collapse: collapse;
	border-spacing: 0;
	max-width: 100%;
}

// wrap tables in <div class='table'> so that tables with many columns or wide content will not increase the width of the page beyond 100% and will instead automatically have scrollbars when browser window is sized down or will inherently be "swipe-able"/"flick-able" horizontally in tablets/smartphones  
div.table {
	overflow: auto;
}
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


a {
	text-decoration: none;
}

 
// see http://practicaltypography.com/straight-and-curly-quotes.html	
q::before {
	content: '\201C';		/* opening double quote: &ldquo; U+201C, when the typeface being used has curly quotes  */
}

q::after {
	content: '\201D';		/* closing double quote: &rdquo; U+201D, when the typeface being used has curly quotes */
}
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^



// for phones and small tablets

@media all and (max-width: 960px) {

}

@media all and (max-width: 768px) {

}

@media all and (max-width: 640px) {

}

@media all and (max-width: 480px) {

}

@media all and (max-width: 320px) {

}