/*******************************************************************************
 AccessibilityOz [October 2012]              http://www.accessibilityoz.com.au/
 ------------------------------------------------------------------------------
 Core styling for the appendix example and demo pages
 ------------------------------------------------------------------------------
*******************************************************************************/
*
{
	margin:0;
	padding:0;
}
html, body
{
	font-size:100%;
	
	background:#fff;
	color:#555;
}
body
{
	width:620px;
	margin:40px auto;
	padding:0 20px;
	
	font:normal normal normal 0.93em/1.7 verdana,sans-serif;
}
html > body
{
	width:81%;
	min-width:270px;
	max-width:50em;
}

.script-only
{
	display:none;
}
.script-enabled .script-only
{
	display:block;
}

h1
{
	clear:both;
	margin:0 0 10px 0;
    
    font:normal normal normal 1.8em/1.35 arial,sans-serif;
    
	color:#5297a2;
}
h1 small
{
	display:block;
	margin:0 0 5px 0;

	font-size:0.75em;	
	font-variant:small-caps;
}
h1 strong em
{
	display:block;
	
	font-size:11em;
	font-style:normal;
	text-align:center;

	color:#5297a2;
}

h2, h3
{
	margin:35px 0 10px 0;
    
    font:normal normal normal 1.5em verdana,sans-serif;
	font-weight:normal;
	
	color:#5297a2;
}
h3
{
	margin-top:0;
	
	font-size:1.15em;
}
body > h2:first-child
{
	float:right;
	margin:0 0 10px 0;
	
	font-size:1.25em;
	letter-spacing:-0.05em;
	text-align:right;
	
	color:#f60;
}
body > h2 + h3
{
	float:left;
	margin:0 10px 35px 0;
	
	font-size:1.25em;
}
body > h2 + h3 > em,
body > h2 + h3::before
{
    font:normal normal bold 0.88em arial,sans-serif;
}
body > h2 + h3::before
{
	display:inline-block;
	margin:0 6px 0 0;
}
body > h2 + h3.correct, 
body > h2 + h3.correct > em
{
	color:#219858;
}
body > h2 + h3.correct::before
{
	content:"\2714";
}
body > h2 + h3.incorrect, 
body > h2 + h3.incorrect > em
{
	color:#d22;
}
body > h2 + h3.incorrect::before
{
	content:"\2718";
}

p, ul, ol, form, iframe
{
	margin:0 0 10px 0;
}
ol
{
	margin-left:25px;
}
ul
{
	margin-left:18px;
}
li
{
	margin-bottom:5px;
}
ol.menu li
{
	margin-bottom:0;
}

fieldset
{
	padding:0;
	
	border:none;
}
fieldset, legend strong
{
	display:block;
	padding:0 0 5px 0;
}
form p
{
	margin-bottom:5px;
}
p label
{
	display:inline-block;
	width:8em;
}
input[type="radio"] + label,
input[type="checkbox"] + label
{
	width:auto;
}
input[type="text"], 
input[type="password"], 
button
{
	padding:3px 6px;
	
    font:normal normal normal 0.95em arial,sans-serif;
}
input[type="text"], 
input[type="password"]
{
	width:11em;
}
input.large[type="text"]
{
	width:15em;
	
	padding:4px 8px;
	font-size:1em;
}
button
{
	overflow:visible;
	padding:6px 10px;
	
	font-size:1.05em;
}
h3 button
{
	margin-right:5px;
	padding:2px 5px;
	
	line-height:1;
}

div.demo
{
	padding-left:20px;
	
	border-left:3px double #5297a2;
}

.border 
{
	border:1px solid #999;
}

a, a:visited, * a, * a:visited
{
	text-decoration:underline;
	
	color:darkblue;
}
a:visited, * a:visited
{
	color:purple;
}
em, i
{
	font-style:italic;
	color:#444;
}
q
{
	quotes:none;
}
q::before
{
	content:"\201c";
}
q::after
{
	content:"\201d";
}
strong, b
{
	font-weight:bold;
}
abbr
{
	border-bottom:1px dotted #666;
	cursor:default;
}
cite, blockquote
{
	font:italic normal normal 1.15em/1.5 georgia,serif;
	color:#345;
}
blockquote
{
	margin:0 40px 0 20px;
	max-width:35em;
}
blockquote > p::before
{
	content:"\201c";
}
blockquote > p:last-child::after
{
	content:"\201d";
}
code, samp, kbd
{
	font:normal normal normal 1em "monaco","lucida console","courier new",monospace;
	color:#333;
}