/* 
The following styles apply to Accessibility Tutorials (delivered as part of the WAI-ACT project).  They are meant to integrate the Tutorial styles into the WAI template while giving a distinct look and feel to the tutorial pages.

The tutorial template has the following main areas: 

* #container: contains all tutorial content. This contains: 

     * #banner: to contain the text "Accessibility Tutorials" and the 	       strapline 

     * #navigation: to contain links between tutorial pages.

     * #main: to contain the unique content for each page.

     * #footer: links, document info and copyright etc.

 */


/* Basic styles */
	
body {
	background-color: #fffaf5;	
	color: #000;
	font-family: "Trebuchet MS", sans-serif; 
	margin: 0 1em 1em 1em;
	padding: 0;
	line-height: 135%;
	font-size: 100%;
	}

div {
	margin: 0;
	padding: 0;
	}

h1, h2, h3, h4, h5, h6 {
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 0.7em;				
	font-weight: bold;
	}
		
h1 {
	font-size: 1.5em;	
	}

h2 {
	font-size: 1.3em;	 
	}	

h3 {
	font-size: 1.2em;	 
	}

h4 {
	font-size: 1.1em;	 
	}

h5 {
	font-size: 1.0em;	 
	}

h6 {
	font-size: 0.9em;	 
	}

table {
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	border: 1px solid #aaa;
	margin: 5px 0 10px 0;
	}

caption {
	padding-bottom: 0.2em;
	font-weight: bold;
	font-size: 90%;
	text-align: left;
	}
caption span {
	font-weight: normal;
	font-size: 90%;
	}
th {
	padding: 0.5em 0.70em;
	font-weight: bold;
	text-align: left;
	border: 1px solid #aaa;
	background: #E8D1BC;
	}

th.span {
	padding: 0.5em 0.75em;
	font-weight: bold;
	text-align: left;
	border: 1px solid #aaa;
	background: #E8D1BC;
	}

td {
	padding: 0.5em 0.75em;
	text-align: left;
	border: 1px solid #aaa;
	}

a:link {
    
	color: #036;

	}


a:visited {
    
	color: #603;

	}



a img {
	border: 0;
	}

blockquote {
	margin: 0;
	padding: 0 1.5em;
	}

form {
	margin-bottom: 1em;
	}

/* Containers and subordinate styles (in code order)  */

#controls {

	display: block;
	background: #CCC;
	color: black;
	text-align: right;
	margin: 0 -1em 0 -1em;
	padding: 0.2em;
	border-bottom: 1px solid black;
	font-family: Arial, sans-serif;
	border-right: 2px solid #CCC; 
/* Avoids that Moz shows a horizontal scrollbar */

	}

#controls * {
	display: inline;
	color: black;
	text-decoration: none;
	margin: 0 0 0 .33em;
	padding: 0;

	}

#controls a:hover,
#controls a:focus, #controls a:active {
	text-decoration: underline;

	}

#masthead {
    
	margin-left: 24%;		
/* The background to the right of the logos */
    	background: url(../img/perspective.jpg);
	background-repeat:  no-repeat;
   
	}


*>#masthead {
    
/* Hide from WinIE */

	background-position: 0.6em 0; 
}


#masthead p {
/* For WinIE only */
    
	margin: 0 0 0 -24%;
    
	width: 24%;

	}


#masthead>p {			
/* Hide from WinIE */
    
	margin: 0 0 0 -31.58%;
    
	width: 31.58%;

	}


#masthead p {
    
	padding: 0 0.6em 0 0;
 
	border-right: 1px solid #036;
    
	white-space: nowrap;
    
	min-height: 48px;
	/* Keep height if logos are scaled down */

	background: #005A9C;
	color: #fff;

	}


#masthead img {

/*   max-width: 49%;   Scale logos down on narrow screens */

	vertical-align: bottom;	/* Avoid empty space for descenders below */

	background: #005A9C;
	color: #fff;

	}



#tagline {
    
	display: block;
    
	overflow: hidden;
/* Let height include floats */
    
	margin: 0;
    
	padding: 0;
    
	color: white; 
    
	background: url(../img/tagbararc.png); 
	background-position: top right; 
	background-repeat: no-repeat; 
	background-color: #803000;
    
	min-height: 23px;
/* Height of rounded corner */

	}


#tagline/* HACK: hide from MacIE5 */ {
    
	clear: both;

	}


#tagline p {
    
	margin: 0;
    
	padding: 0.3em 20px 0.3em 0.3em; 
/* 20px makes room for rounded corner */
	
	text-align: right;

	}

#container {
	width: 100%;
	margin: 0 auto;
	padding: 0 0 2em 0;
	font-size: 0.9em; 	
	line-height: 1.5em;
	}
		

#banner {
	border-bottom: 4px solid #803000;
	padding-top: 6px;
	clear: both;
	margin-bottom: 10px;
	}
		
#banner p { 
	margin-top: .5em;
	font-size: 1.5em;
	margin-left: 0;
	color: #803000;
	}

#strapline { 
	font-size: 1em;
	}

/*
#banner ul li { 
	background-image: url(../img/arrow.gif);					background-repeat: no-repeat;
	background-position: left;				
	display: inline;
	font-size: 0.9em;
	padding-left: 15px;
	margin-left: 15px;
	list-style: none;
	}

#banner ul li#first { 
	background-image: none;
	padding-left: 0;
	margin-left: 0;
	}
*/


#navigation {
	margin: 0;
	padding-right: 0;
	width: 24%;	
	float: left;
	}
	

#navigation h2 {
	position: absolute;
	left: -999em;
	}


#navigation h3 {
	color: #803000;
	font-size: 1.4em;
	padding: .7em 0;
	margin-bottom: 0;
	}

#navlist, #topic {
	margin: 0;
	padding: 0;
	}

#topic ol{
	color: #803000;
	margin:1em 3em ;
	padding: 0;
	border-top: 1px solid #803000;	}

#navlist ul, #future ul {
	margin:1em ;
	padding: 0;
	border-top: 1px solid #803000;
	}
	
#navlist li, #future li {
	list-style: none;	
	}


#navigation a:link, #navigation a:visited {
	color: #803000;
	text-decoration: none;
	}

#home a, #home a:link, #home a:visited, #future li  strong, #navlist li strong, #topic li a, #topic li a:link, #topic li a:visited, #navlist li a, #navlist li a:link, #navlist li a:visited {
	display: block;
	width: auto;	
	margin: 0 -.3em;
	padding:  .5em;
	border-bottom: 1px solid #803000;
	color: #803000;
	text-decoration: none;
	}

#home a {
	border-top: 1px solid #803000;
	}

p#home {
	padding-bottom: 0;
	}
#topic li a {
	background-color: #F1E3DB;
	font-weight: normal;
	padding-left: .7em;
	}

#home, #future li  strong, #navlist li strong, #navlist li a {
	background-color: #E5CCBF;
	font-weight: bold;
	}

#home a:hover, #home a:focus, #home a:active, #navlist li a:hover, #navlist  li a:focus, #navlist li a:active {
	background: #fff url(../img/arrow.gif) 96% 50% no-repeat;
	color: #803000;
	text-decoration: underline;
	}

#topic li a:hover, #topic li a:focus, #topic li a:active {
	background: #fff url(../img/arrow.gif) 96% 50% no-repeat;
	background-color: #E5CCBF;
	color: #803000;
	text-decoration: underline;
	}

#navlist a:hover, #navlist a:focus, #navlist a:active {
	background: #fff url(../img/arrow.gif) 96% 50% no-repeat;
	background-color: #fffaf5;
	color: #803000;
	text-decoration: underline;
	}

#navlist li#currentTopic {
	background-color: #fffaf5;
	color: #803000;
	font-weight: bold;
	padding: .7em .5em;
	border-bottom: 1px solid #803000;
	}

#topic li#current {
	background-color: #fffaf5;
	color: #803000;
	padding: .7em .5em;
	border-bottom: 1px solid #803000;
	font-weight: normal;
	}

#topic li#current img {
	position: relative;
	left: -.5em;
	}


/*main containers */

.groupcontent {
/*	border-bottom: 4px solid #803000;  */
	margin: 0 0 0 26%;
	padding-left: 0;
	}

/*
*>html.groupcontent {
	width: 76%;
	}
*/

#main {
	display: inline-block;
	padding: 0;
	margin: 0;
	}

		
#main p {
	padding-bottom: 10px;
	}

p img.floatLeft {
	float: left;
	margin: 0 1em 1em 0;
	}

div.note {
	padding: 0.6em 1em;
	}

.note h2, .note h3, .note h4  {  
	font-size: 0.9em;
	display: inline;
	}

.note p {  
	display: inline;
	}

div#status {
	padding: 0.6em 1em;
	background-color: #CCFFCC;
	border: 1px solid #803000;
	}

#status h2   {  
	font-size: 0.9em;
	display: inline;
	}

#status p {  
	display: inline;
	}


div#important {  
	background: #fff;
	border: 2px solid #803000;
	padding: 0.6em 1em;
	}

#important h2, #important h3, #important h4  {  
	font-size: 0.9em;
	display: inline;
	}

#important p {  
	display: inline;
	}

div#learn {  
	border-top: 1px solid black;
	padding: 0 1em;
	border-bottom: 1px solid black;
	margin-bottom: 2em;
	}

#learn h2 {  
	font-size: 1em;
	}

ul#wwh {
	list-style-type: none;
	padding: 1.5em 0 0.5em 0;
	margin-top: 3em;
	}

ul#wwh li {
	display: block;
	line-height: 1.2em;
	padding-bottom: .3em;
	}


/* Code snippets */

div.source {  
	font-family: Courier, monospace;
	font-size: 1.2em;
	background: #f0f0f2;
	border: 1px solid black;
	padding: 1em;
	}

code	{
	margin: 0.em;
	padding: 0em;
	}


/* Previous and Next links */

#tools {
	margin: 1em 0;
	padding: 0;
	}

#tools ul{
	text-align: left;
	margin: 0;
	padding: 0;
	}

#tools  ul li#next,  #tools  ul li#top, #tools  ul li#prev {
	margin-right: .5em;
	padding: 0;
	display: inline;
	list-style-type: none;
	}

	
#top {
	}

#prev {
	}

#next {
	}

div.clear {
	clear: both;
	}

#footer {
	border-top: 1px solid #803000;
	clear: both;
	color: #333;
	font-size: 0.8em;

	}


#footer h2 { 	/* hide visual rendering of h2 */
    			position: absolute;
	left: -999px;
	width: 990px; 
	}

#footer a {
	color: inherit;
	text-decoration: underline;

	}

#footer #copyright {
	border: 9px solid #fffaf5;
	float: left;

	line-height:normal;

	}


/* screen reader*/

.offscreen {
	position: absolute;
	left: -9999em;
	}

#main ul {
	padding-top: 0;
	margin-top: 0;
	}

#main li {
	line-height: 1.3em;
	margin-bottom: .3em;
	}

p.list {
	margin-bottom: 0;
	padding-bottom: 0;
	}

p.quote	{
	margin: 0;
	padding: 0;
	}