cleanup.css

/* copal/cleanup.css -- copal-css.net, 2014-02-12 */

/*
    ~~~~~~~~~~~~

	This is a mix of a reset and a normalization stylesheet:
	
	- more aggressive than normalize.css with vertical spaces
	- less aggressive than reset.css with horizontal spaces
	- complete reset for headlines (they *have* to be custom styled)
	- more typographic finetuning
	- HTML5 elements are included, even if not currently in use by CoPaL
	- surrogate classes for some HTML5 elements
	- provides lots of old IE fixes (6, 7, 8)
	
	The purpose of cleanup.css is to support the needs of the
	CoPaL content and page layout framework. The available reset
	and normalization stylesheets are not suitable for this task.

	Learned much from/been inspired by/taken code where offered from:
	
	Eric Meyer          http://ericmeyer.com
	HTML5 Boilerplate   http://html5boilerplate.com
	HTML5 Doctor        http://html5doctor.com
	HTML5 Reset         http://html5reset.org/
	Paul Irish          http://paulirish.com/
	normalize.css       https://github.com/necolas/normalize.css/
	YUI cssreset.css    http://www.cssreset.com/scripts/yahoo-css-reset-yui-3/
	
	and others ... (and some I've come up with by myself)

    ~~~~~~~~~~~~
    
    
    == ToDos ==
    
    ! Normalization/styling of form elements.
    
    
    == History ==

	2014-02-12 caugustin.de:   Kerning properties added (via Typekit). Cleanup.
	2013-09-03 caugustin.de:   Initial setup.
    

*/



/*  -------------------------------------------
    HTML5 shiv and surrogate classes

    These settings are mostly from normalize.css v1.1.3 and v2.1.3.
*/

/* Set `block` in IE6789 and FF3: */

article,    .article,
aside,      .aside,
details,    .details,
figcaption, .figcaption,
figure,     .figure,
footer,     .footer,
header,     .header,
hgroup,     .hgroup,
main,       .main,
nav,        .nav,
section,    .section,
summary,    .summary {
	display: block;
	margin:  0;
	padding: 0;
}

/* Set `inline-block` in IE6789 and FF3: */

audio,
canvas,
video {
	display: inline-block;
	/* IE67: */ *display: inline;
    /* IE67: */ *zoom: 1;
}

/* Don't display `audio` without controls, 
remove excess hight for iOS 5 devices in this case: */

audio:not([controls]) {
	display: none;
	height:  0;
}

/* Add `[hidden]` styling to IE789, FF3 and Safari 4,
hide new `template` element in IE, Safari and FF < 22: */

[hidden],
template {
	display: none;
}




/*  -------------------------------------------
    Basic resets, normalizations and fixes
*/


/* Fix IE67 text resizing when using `em` units,
prevent iOS text size adjust after orientation change
but without diabling user zoom: */

html {
	font-size: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

/* Force vertical scrollbar to prevent "jumpy" pages: */

html { overflow-y: scroll; }

/* Consistent `font-family` settings across elements: */

html,
button,
input,
select,
textarea {
	font-family: sans-serif;
}

code,
kbd,
pre,
samp {
	font-family: monospace, serif;
	_font-family: 'Courier New', monospace;
	font-size: 1em;
}



/* Links: */

a {
	background: transparent;
}
a:focus {
	outline: thin dotted;
}
a:active,
a:hover {
	outline: 0;
}



/* Improve formatting of preformatted text: */

pre { /* http://html5reset.org/ */
	white-space: pre;      /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}
@media screen { pre { overflow: auto; } } /* caugustin.de: Still needed? */



/* Normalize table elements: */

table {
	border-collapse: collapse;
	border-spacing:  0;
	/* font-size: inherit; */
}
td, th {
	vertical-align: top;
}
caption, th {
	text-align: left;
}
thead {
	display: table-header-group; /* h5bp.com/t */
}




/*  -------------------------------------------
    Remove margins, normalize paddings
*/

/* No margins and no padding at all (already done on HTML5 elements): */

html,
body,
address,
blockquote,
caption,
div,
dd,
dl,
dt,
h1, h2, h3, h4, h5, h6,
li,
menu,
ol,
p,
pre,
table,
td,
th,
ul {
	margin:  0;
}

blockquote,
dd,
menu,
ol,
ul {
	padding: 0 0 0 2em;
}



/*  -------------------------------------------
    Additional IE fixes
*/

/* Global fix of the Italics bugs in IE 5.x and IE 6: */
* html body *   { /* IE6: */ overflow: visible; }
* html iframe,
* html frame    { /* IE6: */ overflow: auto;    }
* html frameset { /* IE6: */ overflow: hidden;  }

/* Prevent background image flicker upon hover in IE6: */
* html { /* IE6: */
	filter: expression(
		document.execCommand('BackgroundImageCache', false, true)
	);
}
                        )
/* Some more IE fixes ... */
/* The first one is essential in IE7 for correct layout scaling.       */
/* CargoCult at the moment, not sure of their necessity! (caugustin.de)  */

*+html body       { /* IE7: */ position: relative; }
* html body       { /* IE6: */ position: static;   }
* html textarea   { /* IE6: */ overflow: scroll; overflow-x: hidden; }
* html input      { /* IE6: */ overflow: hidden;   }
* html body ol li { /* IE6: */ display: list-item; }




/*  -------------------------------------------
    Paged media settings
    
    These settings have no effect with current browser versions
    (even though they should).
    
*/

h1, h2, h3, h4, h5, h6, dt, thead {
	page-break-inside: avoid;
	page-break-after: avoid;
}
figcaption, .figcaption, dd, tfoot {
	page-break-inside: avoid;
	page-break-before: avoid;
}
li, tr, th, td, address, img, object, figure, .figure {
	page-break-inside: avoid;
}
hr {
	page-break-before: avoid;
}
p {
	orphans: 3; widows: 3;
}




/*  -------------------------------------------
    Typography
    
    Mostly from normalize.css 1.1.3; refer to this
    version to see why some of these are needed.
    
*/

body {
	text-rendering: optimizeLegibility;
	font-feature-settings: 'kern' 1;
	font-kerning: normal;
}

abbr {
	white-space: nowrap;
	word-spacing: -0.2em;
}
abbr[title] {
	border-bottom: 1px dotted;
}

b, strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

mark, .mark {
	background-color: yellow;
	color: inherit;
}

q {
	quotes: none;
}
q:before, q:after {
	content: '';
	content: none;
}

small {
	font-size: 80%;
}
sub, sup { /* Based on h5bp.com/k */
	/* ToDo: Try font-size in percent. */
	font-size: 0.8em;
	/* IE6789: */ font-size: 0.9em\9;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup { top:    -0.50em; }
sub { bottom: -0.25em; }




/*  -------------------------------------------
    Headlines and HR
*/

/* Reset headline sizes: */

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}

hr { /* Not for IE67: */
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
}



/*  -------------------------------------------
    Lists
*/

nav ul, .nav ul,
nav ol, .nav ol {
	list-style: none;
	list-style-image: none;
}



/*  -------------------------------------------
    Media and embedded elements
*/

img,
canvas,
object,
embed,
canvas,
audio,
video, {
	vertical-align: middle;
	/* IE67: */ *vertical-align: bottom;
}

/* Remove border in `a` and improved image scaling in all IEs: */
img {
	border: 0;
	-ms-interpolation-mode: bicubic;
}

/* Fix overflow in IE9: */
svg:not(:root) {
	overflow: hidden;
}




/*  -------------------------------------------
    Forms
*/

/* *ToDo!* */