/*User Experience Design Style Sheet*/
/*Carl Myhill, December 2007*/
/*CSS Validated using W3C validator against CSS 2.1 on 20th December 2007*/

/* ===================================================================================================== */
/* RESET ALL DEFAULTS FOR CROSS BROWSER COMPATIBILITY */
/* ===================================================================================================== */
/* INITIAL styling for cross browser consistency. What this does is to reset all style */
/*  elements before we start because each browser does different things with defaults */
/*  This is from v2.1, by Faruk Ates - www.kurafire.net */
/*  Addendum by Robert Nyman - www.robertnyman.com */

/* Neutralize styling: Elements we want to clean out entirely: */
html, form, fieldset, body  {
        margin: 0;
        padding: 0;
      }

body {
        font: 80%/130% Verdana, Arial, Helvetica, sans-serif; /* 100%/120% means font size/line height */
    }

/* Neutralize styling: Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
        margin: 1em 0; /*top and bottom 1em; left and right 0 */
        padding: 0;
}

/* Apply left margin: Only to the few elements that need it: */
li, dd, blockquote {
        margin-left: 1em;
}

li {margin-bottom: 1em;
		}

ul, ol {margin-left: 0.5em; /* apparently needed for IE7 to render correctly*/
		}

/* Miscellaneous conveniences: */
form label {
        cursor: pointer;
		}
		
fieldset {
        border: none;
		}

input, select, textarea {
        font-size: 100%;
		}

/* ===================================================================================================== */
/* ACCESSIBILITY */
/* ===================================================================================================== */

/*Skip link styles and offleft technique used may be seen on NOMENSA webste. */
/*I beleive this was invented by Tom Gilder */
.skip {
		position:absolute;
		left: -999em;
		}
		
/* dynamically shows the skiplink */
a.skip:active, a.skip:focus {
		top: 0;
		left: 0em;
		padding: .5em;
		border: 3px #00c solid;
		background-color: #fff;
		color: #00C;
		z-index: 100;
		}

/* ===================================================================================================== */
/*  Styles */
/* ===================================================================================================== */
h1 		{font-size: 140%;
		}
h2 		{font-size: 120%;
 		margin: 2em 0 1em 0;
		}
		
h3 		{font-size: 100%;
		 margin: 2em 0 1em 0;
		}
h4 		{font-size: 80%}
h5 		{font-size: 60%}

/* sets the emphasis character used with labels, eg the Search label */
label em {  
		font-style: italic;
        font-weight: normal;
		} 

/* Set emphasis style within a */
a em {      
		font-style: italic;
        font-weight: normal;
        text-decoration: underline;
      }
	  
/* Display inline */
.inline {display:inline}
	  
/* Link styles from WAI */
:link 	{ 
		color: #00C; 
		background: transparent; 
		}
:visited { 
		color: #609; 
		background: transparent; 
		}
a:active { 
		color: #C00; 
		background: transparent;
		}
a[href]:hover { 
		color: inherit;
		background: #ffa;
		 } /*highlight active link*/

/* ===================================================================================================== */
/*  Image Styling (this is a bit old) - improve these selectors */
/* ===================================================================================================== */

/* a class of images that dont want a border */
img.noborder {
		border: 0;
		}

/* for photos in a within a report, DIV styles */
.inlinephotoleft {
		float: left;  
		margin: 0 .75em 0.25em 0;
		border: 1px solid #333333;
		color: black;
		background-color: #F7F7F7;
		text-align: center; /*workaround for ie mac problem with 'auto' ??? see glish.com*/ 
		padding: .5em;
		}

.inlinephotoleft img {
		border: 0;
		} /*to turn this off as it causes images to jump all over the show*/

.inlinephotoleft p {
		clear:left;			
		font-size:80%;
		text-align: center;
		margin: 0px; 
		padding: 0.25em 0 1em 0; 
		}
			

.inlinephotoright {
		float: right; 
		margin: 0 0em 0.25em 0.75em;  
		border: 1px solid #333333;
		color: black;
		background-color: #F7F7F7;
		text-align: center; /*workaround for ie mac problem with 'auto' ??? see glish.com*/ 
		padding: .5em;
		}
				
.inlinephotoright img {
		border: 0;
		} /*to turn this off as it causes images to jump all over the show*/

.inlinephotoright p {
		clear:left;			
		font-size:80%;
		text-align: center;
		margin: 0px; 
		padding: 0.25em 0 1em 0; 
		}
		
.validationlogo { 
		float: left;
		padding: 0 .75em 1em 0;
		margin: 0px;
		}

/* ===================================================================================================== */
/*  Layout */
/* ===================================================================================================== */
body {
        /* margin: 0 0.5em 0 1em; */
		text-align: center; 
		 }

#container {
		margin: 10px auto; /*top and bot 10px, auto margins left and right*/
		width: 95%;
		text-align: left;
		}

/*  Header Block -------------------------- */
#header {	
		position: relative;
		margin: 0;
		padding-bottom: 0;
		}

#headerlogo {
		float:left;
		padding: 0;
		margin: 0 0 10px 0;
		width: 179px;
		}			
	
#headerlogo img {
		border: 0px;
		}
		
#headertitle {
		padding: 1.5em 0 0 0;
		margin-left: 220px;
		}

#header h1 {	
		display: inline;
		font-size: 190%;
		}
		
#header p {
		margin: .75em 0 0 0;
		}

/* Navigation bar -------------------------- */				
#navbar  {		
		border-top: 1px solid #3333cc; 
		border-bottom: 1px solid #3333cc; 
		background-color: #F7F7F7;
		padding: 0;
		width: 100%;
		font-size:95%;
		}

ul#breadcrumbs  { 
		float:left;
		list-style-type: none;
		padding: 0.6em 0 0.2em 0.5em;
		margin: 0;
		}

ul#breadcrumbs li {
		display: inline;
		margin: 0;
		padding: 0em 0.5em 0 0;
		border-left: 0;
		}

ul#breadcrumbs li + li {    /* adjacent child selector, refers to 2nd and subsequent breadcrumb */
		padding: 0em 0.5em 0 0.5em;
		border-left: 1px dotted #666
		}

#search {
		float:right;
		text-align: right;
		padding: 0.4em 0.5em 0.3em 0;
		margin: 0;
		width: 25em;
		}
								
#navbar form, input {
		margin: 0;
					}

/* Main content (this is 'main content plus menu' layout) */

#content { /*content with margins for left and right menus*/
		position:relative;
		top: 0em;
		left: 0em;
		padding: 0; 
		margin-left: 200px;
		margin-right: 120px; 
		}
		
#content_no_left { /*content with only right bar*/
		position:relative;
		top: 0em;
		left: 0em;
		padding: 0; 
		margin-right: 120px; 
		}

#content_no_right { /*content with only left bar*/
		position:relative;
		border-left: 1px dotted #DCDCDC;
		top: 0em;
		left: 0em;
		padding-left: 1.5em; 
		margin-left: 200px; 
		}
		
#content_no_left_no_right { /*content with no left nor right*/
		position:relative;
		top: 0em;
		left: 0em;
		padding: 0;  
		}

/* Menu on the left plus possible image --------------------------------------------------- */

#menu  {
		float:left;
		margin-top: 0.5em;
		padding: 1em 1.5em 1em 0;
		width: 185px;
		font-size: 95%;
		}
		
#menu ul {
		margin: 0 0 1em 0;
		padding: 0 0 .25em 0;
		text-align: left;
		}

#menu li {	
		list-style: none;
		padding: 0 0 0.5em 0;
		margin: 0;
			}
			
#menuimage {			/*container for the photo*/		
		width: 170px; 
		border: 1px solid #333333;
		color: black;
		background-color: #F7F7F7;
		text-align: center; /*workaround for ie mac problem with 'auto' ??? see glish.com*/ 
		padding: .5em;
		}

#menuimage p{		
		clear:left;			
		font-size:80%;
		text-align: center;
		margin: 0; 
		padding: 0.25em 0 0 0; 
		}

/* Right column */
#rightbar  {
		float:right;
		/* margin: 0.5em 1em 1em 0; 
		padding: .5em 0 .25em 0; */
		margin:0;
		padding: 1em 0 1em 1em;
		/* border-top: 1px dashed #666; */
		width: 100px;
		}


/* bottom margin things--------------------------------------------------------------------------- */ 
#footer {
		clear: both;
		border-top: 1px solid #3333cc; 
		margin: 2em 0 .25em 0;
		color: #999999;
		padding: 0;
		width: 100%;
		font-size: 80%;
		}
		
#footer :link { 
		color: #999999; 
		background: transparent; 
		}
		
#footer :visited  { 
		color: #999999; 
		background: transparent; 
		}

#footer a:active { 
		color: #999999; 
		background: transparent;
		}

#footer a[href]:hover { 
		color: inherit;
		background: #ffa;
		 } /*highlight active link*/

#copyright {
		float:left;
		padding: 0 1.5em 0 0;
		margin-top: .5em;
		}

#contact { 
		float:left;
		padding: 0 1.5em 0 1.5em;
		border-left: 1px dotted #999999;
		margin-top: .5em;
		}

#accessibilitystatement { 
		float:left;
		padding: 0 1.5em 0 1.5em;
		border-left: 1px dotted #999999;
		margin-top: .5em;
		}		

#designedby {
		float:left;
		padding: 0 1.5em 0 1.5em;
		border-left: 1px dotted #999999;
		margin-top: .5em;
		}


#updateinfo {
		float:right;
		text-align:right;
		padding: 0;
		margin-top: .5em;
		}
		
#stats {
		float:left;
		padding: 0 1.5em 0 1.5em;
		margin-top: .5em;
		}
			
/* Layout 'tricks' */

/* Very neat trick from www.alistapart.com/stories/practicalcss which forces a Div which only contains Floats to cater */
/* for the size of their content dynamically */
.spacer {  
		clear:both;
		}