/* CSS Document */




/* ---------------------------------------------------------------------- *
/* Colour palette */

/* =Typography */
/* ---------------------------------------------------------------------- */
body	{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:small;
	line-height:1.5;
	}
/* Elements */
abbr	{
	border-bottom:1px dotted;
	cursor:help;
	}

dfn	{
	cursor:help;
	}
/* Forms */
form select, form optgroup, form input	{/* More ... */
	font-family:Verdana, Arial, Helvetica, sans-serif;
	}
/* Headings */
h1, h2, h3, h4, h5, h6	{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	}
/* Images */
img.stock	{
	float:left;
	margin-top:.7em;
	margin-right:1em;
	border:1px solid #ccc;
	padding:2px;
	}
img.alt	{
	float:right;
	margin-right:0;
	margin-left:1em;
	}
/* Links */
a	{
	
	color : #0E6E9E;
	}
a:focus, a:hover, a:active	{
	color : #933;
	}
	
a img	{
	border:0;
	}

hr	{
	border : 1px solid #ccc;
	}

body	{
	color:#111;
	background:#ccc url(../images/layout/mimas-bg.png) repeat top left;
	margin:0;
	padding:0 0 20px;
	}
	
.container	{
	background:#fff;
	margin:0 auto;
	width:100%;
	padding:0;
	}

li.excel{
padding-right : 0.2em; 
list-style-image: url(excel-icon.gif);
}

/* =Header ****************************************************/

#header	{
	background:#fff;
	border-bottom : 1px solid #666;
	}

#header-background {
	
	background:url(../images/header.gif) no-repeat;
	background-position: top right;
	height : 84px;
	width : 100%;
	}
	
#unit-box {
	color : #0E6E9E;
	font-size : 2.5em;
	margin-left: 15px;
	float : left;
	background : #fff;
	margin-top : 10px;
	width : 1.5em;
	height :1.5em;
	border : 1px solid #0E6E9E;
}

#unit-number {
	margin-right : auto;
	margin-left : auto;
	width: 1em;
	padding-right: 0px;
	text-align : center;
	font-weight : bold;
	height : 1em;
}

#unit-title {
	color : #0E6E9E;
	font-size : 1.6em;
	float : left;
	line-height : 1em;
	padding-left : 10px;
	margin-top : 10px;
	width : 500px;

}



/* Skip link: uses technique modified from the one used by the Web
   Standards Project: http://www.webstandards.org/, owing to extra colour 
   required. */
p#skip	{
	background:#fff;
	margin:0;
	}
p#skip a	{
	display:block;
	border-bottom:0;
	padding:..1.6em 0 1.6em 0;
	font-size:85%;
	font-weight:bold;
	text-align:center;
	}
.breadcrumb {
	padding-right : 20px;
	padding-left : 25px;
	margin-bottom : 20px;
	margin-top : 10px;
}



/* =Site Navigation ****************************************************/

#nav p	{
	display:none;
	}


/* Use technique from "Bulletproof Web Design", pp28-37. This is a "float 
   everything" approach. */
#nav ul	{
	background:#eee;
	float:right;
	width:100%;
	margin:0;
	border-bottom:2px solid #fff;
	padding:0;
	list-style:none;
	
	}	
	
#nav ul li	{
	float:right;
	margin:0;
	}
	

li#nav-home a{
	background-image : url(home.gif);
	background-repeat: no-repeat;
	background-position: 0 100%;
	}
	
li#nav-glossary a{
	background-image : url(glossary.gif);
	background-repeat: no-repeat;
	background-position: 0 100%;
	}
	
li#nav-help a{
	background-image : url(help.gif);
	background-repeat: no-repeat;
	background-position: 0 100%;
	}

li#nav-activity a{
	background-image : url(activity.gif);
	background-repeat: no-repeat;
	background-position: 0px 100%;
	
	}
	
li#nav-examples a{
	background-image : url(examples.gif);
	background-repeat: no-repeat;
	background-position: 0px 100%;
	
	}
	
li#nav-index a{
	background-image : url(index.gif);
	background-repeat: no-repeat;
	background-position: 0px 100%;
	
	}


#nav ul li a{
	color:#555;
	float:left;
	display:block;
	margin:0;
	border-bottom:0;
	padding:10px .6em .8em 40px;
	font-weight:bold;
	text-decoration:none;
	}

#nav ul li a:focus, 
#nav ul li a:hover, 
#nav ul li a:active	{

	color:#933;
	
	}


/* =Title ****************************************************/
/* ---------------------------------------------------------------------- */
/* If the title is not floated, then it is impossible to set a margin-top 
   on the h1. 
   */
#title	{
	background:#f9f9f9;
	float:left;
	width:100%;
	border-bottom:2px solid #fff;
	}


/* =Content ****************************************************/
/* ---------------------------------------------------------------------- */
/* Use opposing floats for a two column layout: "Bulletproof Web Design", 
   p51, pp190-194. */
#content	{
	background:#fff;/* Set a background colour as a backup for when images 
	are disabled. */
	float:right;
	width:75%;
	}
	
#content-example	{
	background:#fff;/* Set a background colour as a backup for when images 
	are disabled. */
	width:100%;
	}

#content-inner	{
	padding:0 20px;/* Fixed-width guttering. */
	/*margin-top : 20px;*/
	border : 1px #0E6E9E solid;
	margin-right : 10px;
	margin-left : 11px;
	}
	



/* Navigation and Titles ****************************************************/	
.nav-band {
	float:right;
	clear : both; 
	background : #0E6E9E;
	margin-bottom : 0px;
	margin-top : 0px;
	margin-left : 10px;
	margin-right : 10px;
	}

#content-example .nav-band {
	width : 98%;
	

}


.nav-example {
	float:right; 
	background : #0E6E9E;
	margin-bottom : 0px;
	margin-top : 0px;
	margin-left : 10px;
	}

#title-block{		
	font-size : 1.2em;
	font-weight : bold;
	color : #fff;
	width : 500px;
	float : left;
	margin-bottom : 0px;
	margin-right : 0px;
	margin-left : 20px;
	margin-top : 0px;
	border-bottom : none;
	}
	
.top-nav{	
	color : #fff;
	background : #0E6E9E;
	float : right;
	 
	}
	
.next a,.next a:active {		
	color : #fff;
	background : #0E6E9E;
	margin-left : 8px;
	float : right;
	text-decoration: none;
	}
	
	
.previous a,.previous a:active{		
	color : #fff;
	background : #0E6E9E;
	margin-right : 8px;
	float : right;
	text-decoration: none;
	}
	

.previous a:hover, .next a:hover, .top a:hover {
	color : #fff;
	border-bottom : 1px dotted #fff;
	text-decoration: none;
}



.top a,.top a:active{		
	color : #fff;
	background : #0E6E9E;
	margin-left : 4px;
	float : left;
	line-height : 1.5em; 
	}
	
.top {
	
	float : left;
	padding-left : 6px;
}
	


/********************************************************************************/	
	

#sub	{
	background:#f9f9f9;/* Set a background colour as a backup for when images 
	are disabled. */
	float:left;
	width:24%;
	}
	
	
/* To get full-width background on headings need to set guttering on 
   individual elements. */
#sub-inner h2	{
	background:#eee;
	margin:0;
	padding:.3em 20px;

	}

/* Content headings */

	
#content-inner h2	{
	margin:0;
	font-size : 1.2em;
	padding-top : 10px;
	}


/* =Content */
/* ---------------------------------------------------------------------- */
/* Clear any floats before the footer. */
#footer	{
	background:#eee;
	clear:both;
	width:100%;
	margin:0;
	border-top:2px solid #fff;
	padding:1em 0 1em 0;
	font-size:85%;
	}
#footer p, #footer address	{
	padding:0 20px;
	font-style:normal;
	}
#footer p	{
	margin:0;
	}



div#s1 {
  width: 235px; font-weight:bold;          /* menu width */
}

div#s1 ul {
  background-color: #036;
  list-style-type: none; /* get rid of the bullets */
  padding:0;             /* no padding */
  margin:0;              /* no margin for IE either */
}

div#s1 ul li {
  margin: 0;
  padding: 0px;
  background-color: #fff;
  display:block;
  border-top: 1px solid #ccc; /* lines */ 
}

div#s1 ul li a {
  display: block;         /* lines extend to right, make area clickable */
  color: #0E6E9E;
  background-color: #fff;
  padding: 3px 3px 3px 23px;
  margin:0;
  text-decoration:none;
             /* hint for IE, alternatively remove whitespace from HTML */
}

div#s1 ul ul li a {
  margin-left: 5px;     /* indent level 1 */
  
}

div#s1 ul ul ul li a {
  margin-left: 15px;     /* indent level 2 */
}

div#s1 li ul, div#s1 li.open li.closed ul {
  display: none;         /* collapse */
}

div#s1 li.open ul {
  display: block;        /* expand */
}
 

 
div#s1 li.active a {
  background-position: 0px -90px;
  color: #933;            /* highlight text */
}
 
div#s1 li.active li a {
  background-position: 0px 0px;
  color: #0E6E9E;          /* fix lower levels */
}

div#s1 ul li a:hover {
  color: #933;
  background-color: #eee; /* rollover effect */
}

div#content-inner a {
font-weight : bold;

}


.activity, .example {
	padding: 0.7em;
	background:#eee;
	background-repeat:no-repeat;
	background-position:top left;
	margin-bottom : 10px;	
}

.example {
background-image:url(examples-body.gif);
}

.activity {
background-image:url(activity-body.gif);
}


.activity p, .example p{

	margin-left : 40px;
	margin-top : 0px;
}

.activity-heading, .example-heading{

	margin-left : 40px;
	font-size: 1em;
	font-weight: bold;
}

.reference {
	font-size : 0.8em;
	color : gray;
	border-top : solid gray 1px;

}


table

	{

	font-size: 0.9em;
	font-family: verdana, arial, sans-serif; 
	line-height : 1.5em;
	width : 100%;
	border-top: 1px solid #999999;
	border-left: 1px solid #999999;
	border-collapse: collapse;

	}


th, td

	{
	
	padding: 4px;
	border-right: 1px solid #999999;
	border-bottom: 1px solid #999999;

	}


th 

	{
	
	font-family: verdana, sans-serif;
	background: #CCCCCC;
	color : #000;

	}

caption 

	{

	display: none;

	}
	
.illustration
  {
   
    margin-left: auto;
    margin-right: auto;
   display : block;
   padding : 0.3em;
   border:solid 1px #666666;

    }
	
.img-title
  {
   text-align:center;
   display:block;
   color : #666666;
   font-size : 0.8em;
    }
	
.keypoint
{
	background : #D2EEFB;
	padding: 0.7em;
	margin-bottom: 1em;
}