/**
* CSS
* 
* @version 1.0
* @author Vaska 
*
*/

/* ---------- IMAGE HOVER ---------- */

.hover-image-container {
height: 280px;
position: relative;
width: 500px;
margin: 0 auto;
margin-bottom: 20px;
}



.hover-list-item img {
display:none;
}

.hover:hover + img {

height: 281px;
width: 500px;
margin: 0 auto;
display: block;
position: absolute;
top: 104px;
margin-left:250px;
}


/* ---------- ONLY EDIT BELOW THIS LINE ---------- */
body {
width: 1000px ;
  margin-left: auto ;
  margin-right: auto ;
text-align: center ;
font-size: 12px;
	font-family: Arial, 'Helvetica Neue', Helvetica, Verdana, sans-serif;
	background: #fff;
	color: #999;
	line-height: 1.3em;
}

/* the general link scheme */
/* 'index' links are governed further down the file - #index */
a:link { text-decoration: none; color: #999; }
a:active { text-decoration: none; color: #999; }
a:visited { text-decoration: none; color: #999; }
a:hover { text-decoration: none; color: #000000; }
a img { border: none; }

.clL { clear: center; }

/* this is to prevent some background colors on links in exhibits */
/* maybe this is no longer necessary */
#img-container span.backgrounded a,
#img-container a.thickbox, 
#img-container a.thumb-img, 
#img-container #d-col1 a { background: transparent; }


#index {
    width: 100%;
	z-index: 1;
	position: fixed;
	top: 0;
	left: 0;
	background: #fff;
	overflow: visible;
	height: 55px; /* adjust this if needed */
margin-top: 25px;
	margin-bottom: 35px
}


/* PRE NAV TEXT - Name Of The Site / Your Logo - Can be accessed in the Exhibit Settings */
#index .top-section
{

  width: 1000px ;
  margin-left: auto ;
  margin-right: auto ;
	text-align: center;
	z-index: 3;
	right: 0px;
	top: 15px;
	margin-bottom: 10px;
	
}
/* END PRE NAV STYLING */


/* STYLING THE INDEX - via #index */
/* all menu parts */
#index nav {  }
#index ul {
	 /* the width of each column in the menu */
	list-style-type: none;
	overflow: auto;
	margin-left: auto ;
  margin-right: auto ;
	padding: 0px 0px 0px 0px; 
}


#index ul.section { margin-bottom: 0px; }
/* another nice way to do this - comment out the above line */
/*#index ul.section ul { margin-bottom: 0px; }
#index ul.section ul ul.subsection { margin-bottom: 0px; } */

/* styles for the section titles */
#index ul.section span.section_title, 
#index ul.section span.section_title a 
{ text-decoration: none; color: #999; cursor: pointer; font-weight: normal; text-align: center; width: auto; }
#index ul.section span.section_title:hover, #index ul.section span.section_title a:hover 
{ text-decoration: none; color: #000000; }

/* active section titles */
#index ul.active_section { }

/* sub-section titles */
#index ul.section span.subsection_title, 
#index ul.section span.subsection_title a 
{ line-height: 1.3em; text-decoration: none; cursor: pointer; width: auto; text-align: left; }
#index ul.section span.subsection_title, #index ul.subsection span.subsection_title a 
{ /* font-weight: bold; */ }
#index ul.section span.subsection_title:hover, #index ul.section span.subsection_title a:hover 
{ text-decoration: underline; }
/* indent if using chronological or tag groups */
ul.subsection { /* padding-left: 5px; */ }


/* exhibit titles */
/* NEED TO REVIEW ALL OF THESE STILL */
#index ul.section li.exhibit_title { width: auto; text-align: center; margin: 0px 0px 0px 0px; }
#index ul.section li.exhibit_title a:link { text-decoration: none; }
#index ul.section li.exhibit_title a:hover { text-decoration: none; }
#index ul.section li.exhibit_title a:active {  }
#index ul.section li.exhibit_title a:visited {  }
#index ul.sectino li.section-link {  }
#index ul.section li#ndxz-searcher {  }

/* for 'all tags' display */
#index ul.all_tags { list-style-type: none; margin-bottom: 9px; }
#index ul.all_tags li { display: inline; margin-right: 3px; }
#index ul.all_tags li a {  }

/* need to review this still */
/* active parts */
li.active a:link, li a.active, 
li.active a:hover, li a.active, 
li.active a:active, li a.active, 
li.active a:visited, li a.active, 
li span.active, 
#index ul.section li.active a:link, 
#index ul.section li.active a:hover, 
#index ul.section li.active a:active, 
#index ul.section li.active a:visited
{ width: auto; text-align: left; }
#index p { width: auto; text-align: center; }

/* additional #index options */
#index ul li .password a { /* background: url(../img/locked.gif) right center no-repeat; */ padding-right: 18px; }
/* "new" */
#index ul li sup { color: #0c0; font-weight: bold; text-transform: uppercase; font-size: 8px; vertical-align: top; }
/* END INDEX STYLING */

#separator {
z-index : 1001;
top : 0;
margin-bottom : 25px;
background : none;
border : none;
}
/* this bit below alters to the header for the index */
#exhibit {
width: 1000px ;
height: 100%;
	margin-top: 104px;
	margin-bottom: 65px;


}


/* links styles for the #exhibit region */
#exhibit a:link {  } 
#exhibit a:hover {  } 
#exhibit a:active {  } 
#exhibit a:visted {  }


/* this is where you adjust your paddings for #index and #container */
.container { padding: 0px 0px 0px 0px; }

/* if the needed is to have different paddings in each region */
#index .container {  padding: 0px 0px 0px 0px;  }
#exhibit .container {  padding: 0px 0px 0px 0px;  }


#index .top { height: 25px; float: left; }
#exhibit .top { display: none; }
#show .top { height: 36px; }

<SCRIPT LANGUAGE="JAVASCRIPT">
if (document.images) {
image1 = new Image
image2 = new Image

image1.src = "http://benjaminreed.co.uk/files/Image/Tchami1%40500.jpg"
image2.src = "http://benjaminreed.co.uk/files/Image/Tchami01.jpg"

}
</SCRIPT>
/* headings - if you use them - you should be */
h1 { font-size: 14px; margin-bottom: 9px; font-weight: bold; }

h2 {
	font-size: 160px;
	line-height: 120%;
	letter-spacing: -16px;
	font-weight: bold;
	padding: 0px 0px 10px 0px;
}

h3 {
	font-size: 54px;
	line-height: 100%;
	letter-spacing: -4px;
	font-weight: bold;
	padding: 0px 0px 10px 0px;
}

h4 {
	font-size: 27px;
	line-height: 100%;
	letter-spacing: -2px;
	font-weight: bold;
	padding: 0px 0px 10px 0px;
}

/* paragraphs - for the most part */
#exhibit p, #ndxz-media p { width: 1000px;
	margin: 0px 0px 5px 0px;
	position: auto;
	line-height: 1.3em; }



p, object, .flash-apl, .flash-flv { margin: 0 0 9px 0; width: 1000px; }
object { display: block; }
.flash-flv { display: inline; }

.copyrighted { margin-top: 18px; padding-top: 220px; }

/* generic #img-container - but remember that exhibtion formats can override these */
#img-container { margin: 0; padding: 0; }
#img-container p { margin: 0; padding: 0 0 12px 0; }

/* some generic oft used rules */
.highlight { color: #FFA500; }
small { font-size: 12px; font-weight: bold; color: #000000; }
.once { clear: left; }