@charset "UTF-8";
/* CSS Document */

body  {
	font: 100% Arial, Helvetica, sans-serif;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
#container { 
	width: 1034px;
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	/*border: 1px solid #000000;*/
	text-align: left; /* this overrides the text-align: center on the body element. */
	} 

#nav_container{
	width:1024px;
	padding:0;
	margin:0;
}

#mainnav {
	height:40px;	
	padding:0;
	margin:0;
	position:relative;
	top:0;
	left:550px;
	width:500px;

}

#subnav {
	min-height:70px;	
	padding:0;
	margin:0;
	position:relative;
	top:0;
	left:665px;
	width:450px;
/*
	border: solid 1px #000;

*/}

#header { 
	min-height:390px;	
	padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	z-index:1;
	position:relative;
	margin:-35px 0 0 0;
} 

/* == alternate headers per page == */
#welcome_page #header
{
		background-image:url(images/anzel_head.jpg);
}

#contact_page #header, #people_page #header, #artmakers_page #header, #waikato_page #header
{
		background-image:url(images/clinton_head.jpg);
}

#stories_page #header{
		background-image:url(images/teorepi_head.jpg);
}

#research_page #header{
		background-image:url(images/faith_head.jpg);
}


#logo {
	background-image:url(images/glasshedgehog.png);
	width:575px;
	height:158px;
	position:relative;
	top:50px;
	left:50px;
}

#featured_story_block
{
	position:relative;
	top:300px;
	left:760px;
	width:200px;
	z-index:2;
	min-height:45px;
/*border:solid 1px #888; temp delete me when header image is sorted */
}

#featured_story_block a
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
	color:#f5801f;
	top:15px;
	margin-left:10px;
	position:relative;
}

/* == need to sort out appropriate roll over for featured storyblock
#featured_story_block a:hover
{
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; ==comment me== first! for IE 
	filter:alpha(opacity=50); ==comment me== second! for IE 
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	background:#FFFFFF;
}
*/


/*#header h1 { */
/*	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
/*	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
/*}*/

#sidebar {
	float: right; /* since this element is floated, a width must be given */
	width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #ffffff; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 15px 10px 0 0;
}

#sidebar img
{
	margin:30px 0 -10px 30px;
}

#mainContent { 
	margin: 30px 250px 0 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0 100px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
} 

#stripes
{
	background:url(images/stripes.jpg) 0 no-repeat;
	min-height:275px;
}
#footer { 
	padding: 0 60px 0 75px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#FFFFFF; 
} 

#footer hr{
	margin-bottom:10px;
}

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}	



/* === text ===*/

/* size for ie5/6 - allow for predictable font scaling */
body
{
font-size:75%;
}

/* size for rest of world */
#html>body 
{
font-size: 12px;
}

h1
{
font-size:1.75em;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#666666;
}

/* Andy Clarke's Milarkey Image Replacement http://www.stuffandnonsense.co.uk/archives/examples/malarkey-method-example.html*/
#welcome_page h1.mir {
width:450px; 
height: 45px; 
background:url(images/title_welcome.jpg) no-repeat;
}

#stories_page h1.mir {
width:450px; 
height: 45px; 
background:url(images/title_stories.jpg) no-repeat;
}

#research_page h1.mir {
width:450px; 
height: 45px; 
background:url(images/title_research.jpg) no-repeat;
}

#contact_page h1.mir {
width:450px; 
height: 45px; 
background:url(images/title_contact.jpg) no-repeat;
}

#people_page h1.mir {
width:450px; 
height: 45px; 
background:url(images/title_people.jpg) no-repeat;
}

#artmakers_page h1.mir {
width:450px; 
height: 45px; 
background:url(images/title_artmakers.jpg) no-repeat;
}

#waikato_page h1.mir {
width:450px; 
height: 45px; 
background:url(images/title_waikato.jpg) no-repeat;
}

.mir { letter-spacing : -1000em; }
/* Just for Opera, but hide from MacIE */
/*\*/html>body .mir { letter-spacing : normal; text-indent : -999em; overflow : hidden;}
/* End of hack */

/* End Andy Clarke's Milarkey Image Replacement http://www.stuffandnonsense.co.uk/archives/examples/malarkey-method-example.html*/


h2
{
font-size:1.5em;
line-height:1.333em;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#666666;
margin-bottom:-0.5em;
}

h3
{
font-size:1.2em;
line-height:2em;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#666666;
margin-bottom:-0.1em;
}

h4
{
font-size:1em;
line-height:2em;
font-family:Arial, Helvetica, sans-serif;
color:#666666;
}

p
{
line-height:2em;
font-family:Arial, Helvetica, sans-serif;
margin-bottom:2.5em;
color:#666666;
}

#sidebar p
{
font-size:0.9em;	
}

a
{
	text-decoration:none;
	color:#f5801f;
	font-weight:bolder;
	font-family:Arial, Helvetica, sans-serif;
}

a:hover
{
	color:#f7cc1f;
}

body#people_page #people_a, body#waikato_page #waikato_a, body#artmakers_page #artmakers_a
{
	
		color:#f7cc1f;

}


/*
.before_list
{
margin-bottom:1em;
}

#content ul
{
margin-bottom:2em;

}

li
{
z-index:1000;
position:relative;
list-style:none;
line-height:2em;
font-family:Arial, Helvetica, sans-serif;
display:inline;
margin-left:20px;
}

.p_before_li
{
margin-bottom:3pt;
}
*/

#footer p {
	font-size:1em;
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	color:#666666;
}

ul{
	margin-top:-2em;
	color:#666666;
}

li
{
	line-height:2em;
	font-family:Arial, Helvetica, sans-serif;
	list-style:none;
	text-decoration:none;	
}


/* == buttons see #mainnav == */
/* Rollovers care of Web Standars Solutions pgs 216 - 210 */
#nav_ul
{
	margin:0;
	padding:0;
	height:40px;
	list-style:none;
	display:inline;
	overflow:hidden;	
}

#nav_ul li
{
	margin:0;
	padding:0;
	list-style:none;
	display:inline;
}

#nav_ul a
{
	float:left;
	padding:40px 20px 0 0;
	overflow:hidden;
	height:0px !important;
	height: /**:40px; /*for IE/Win Only */
}

#nav_ul a:hover
{
	background-position:0 -40px;
}

body#welcome_page #button_welcome,  body#stories_page #button_stories,  body#research_page #button_research,  body#contact_page #button_contact, body#people_page #button_contact, body#waikato_page #button_contact, body#artmakers_page #button_contact  
{
	background-position:0 -40px;
}

#button_welcome
{
  width:83px;
  background: url("images/button_welcome.jpg") no-repeat 0 0;
  }

#button_stories
{
  width:83px;
  background: url("images/button_stories.jpg") no-repeat 0 0;
}

#button_research
{  
  width:83px;
  background: url("images/button_research.jpg") no-repeat 0 0;
}

#button_contact
{
  width:83px;
  background: url("images/button_contact.jpg") no-repeat 0 0;
}

/* == End buttons == */

/* == sub nav buttons see #subnav == */
#subnav ul
{
	display:inline;
	position:relative;
	list-style:none;
	list-style-position:outside; /*got rid of wierd extra gap where bullet would be in IE/WIN*/
	float:left;
	margin:0;
	padding:0;
	margin-top:0px;
	font-size:0.9em;
}

#research_subnav
{
	width:105px; /* is controlling position of next floated ul */
}

#stories_subnav
{
	display: hidden; /*temp hiding till later go live - ONLY THING NEEDING DELETING*/
	width:100px; /* is controlling position of next floated ul */
}

#subnav a
{
text-decoration:none;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
color:#48575d;
margin:0;
padding:0;
line-height:1.75em;
}

#subnav a:hover, #footer a:hover
{
	color:#f7cc1f;
}

/*
#stories_subnav, #contact_subnav, #research_subnav
{
	margin:0;
	padding:0;
}
*/

.inline_li, .inline_li a, .inline_li li
{
	display:inline;
	padding:0 10px 0 10px;
}

.currentpage
{
	color:#48575d;
}

/* == #footer nav == */
#footer li, #footer ul {
	display:inline;
	position:relative;
	text-decoration:none;
	list-style:none;
	margin:0px 20px 0 0;
	padding:0;
}

#footer a
{
	text-decoration:none;
	color:#f5801f;
	font-weight:bolder;
	font-family:"Arial Black", Arial, Helvetica, sans-serif;
	font-size:1.4em;
	line-height:2em;
}

#clearboth
{
	clear:both;
}

 a, a:hover /* fixes no cursor pointer in IE */ 
 {
  cursor: pointer;
 }

 
 /* == Videos == */
.videos
{
	float:left;
	margin:0 25px 25px 0;
	width:325px; 
	height:244px;
	display:block;
	position:relative;
	clear:left;
}

/* clearfix care of http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: ".";
     clear: both;
     height: 0;
	   }

/*.clearfix {display: inline-block;}*/  /* for IE/Mac */