/*
      Created with a little help from http://www.code-sucks.com 
	  css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/
*/


/*=================
    Basic elements 
===================*/

* { /* Normaliser */
	padding: 0;
	margin: 0;
}

body  { /* Font normaliser */
	font-size: 62.5%;

	font-family: Georgia, "Times New Roman", Times, serif; 
	background: #333 url(../images/lode_final_texture.gif) 
	}

img {
border:0;
}

a {
color:#333;
}
	

/*=================
    Structure 
===================*/

#wrapper {
	margin: 0 auto;
	width: 800px;
}

#header   { 
	color: #333; 
	background: #fff url(../images/lode_header_bg.gif) bottom no-repeat; 
	margin: 0; 
	padding: 15px 60px 0 60px; 
	width: 680px; 
	height: 80px; 

}

#container {
	width:100%;
	height:auto;
	Background:#fff;

}


#leftcolumn {
	float: left;
	width: 400px;
}

#rightcolumn {
	float: right;
	color: #333;
	padding: 20px 60px 0 50px;
	display: inline;
	width: 290px;	
	min-height: 440px;
	height:auto;
}

#footer   { 
	color: #ccc; 
	padding-top: 20px; 
	width: auto; 
	height: 80px; 
	clear: both; 
}


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

#navcontainer {
    padding-top:10px;
   	height:auto;	
   	width: 680px;
}

#navlist {
	margin: 0;
	padding: 0;
	height: 20px;
	list-style: none;
	display: inline;
	overflow: hidden;
}


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

#navlist a {
	float: left;
	padding: 20px 0 0 0;
	overflow: hidden;
	height: 0px !important; 
	height /**/:20px; /* for IE5/Win only */
}

#navlist a:hover {
	background-position: 0 -20px;
}

#navlist a.selected {
	background-position: 0 -20px;
	}

/*====  Main menu  ===*/

#index a  {
	width:147px;
	background: url(../images/navlabels/nav_01.gif) top left no-repeat;
	}

#bespoke a  {
	width: 203px;
	background: url(../images/navlabels/nav_02.gif) top left no-repeat;
	}
	
#exhibition a  {
	width: 136px;
	background: url(../images/navlabels/nav_03.gif) top left no-repeat;
	}

#showcase a  {
	width: 120px;
	background: url(../images/navlabels/nav_04.gif) top left no-repeat;
	}
		
#about a  {
	width: 74px;
	background: url(../images/navlabels/nav_05.gif) top left no-repeat;
	}
	



/*=================
    Typography 
===================*/

p, ul{
	font-size: 1.25em;
	line-height: 1.6em;
	color:#444;	
	margin-top:1.2em;
}

#footer h2 {
	font-size: 12px;
	letter-spacing: 2px;
	word-spacing: .2em;
	color:gray;
	font-variant: small-caps; 
	font-weight: normal;
}

h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; 
	font-variant: small-caps; 
	font-weight: bold }



/*=================
    Styling 
===================*/

.slideshow {

}

#indexheadline {
	height: 100px;
}

#indexheadline img {
	top: 20px ;
	left: 250px;
	display:block;
	float:left;
	position:relative;
}

#indexcopy {
	padding-top:40px;
}

#showcasewrap {
	padding: 20px 60px 40px 60px;
}

#showcasewrap img {
	display: block;
    margin-left: auto;
    margin-right: auto;
}

#showcasewrap p{
	padding: 0 5px 0 5px;
}


.thumbnail {
	float:left;
	padding:5px; 
	margin:0;
	width:160px;
	height:160px;
	overflow:hidden;
}

#aboutcopy {
	padding: 20px 20px 0 60px;

}

#aboutcontainer {
	width:100%;
	height:auto;
	Background:#fff url(../images/aboutlode_bg.jpg) no-repeat bottom right;


}

#footer img {
	display: block;
    margin-left: auto;
    margin-right: auto;
}



/* Exhibition */

#exhibition {
	margin: 30px 30px 20px 30px;
}

.exhibit_thumb {
	float:left;
	margin:0 5px 0 5px; 
	width:600px;
	height:200px;
	overflow:hidden;
	border-bottom: 4px solid #4A4A4A;
}

.first { 
	border-top: 4px solid #4A4A4A;
}



/*=====================
    Slideshow - Bespoke
========================*/

 div.slideshow2 {
  margin: 18px auto;
  padding: 20px 0 0 60px;
}

div.slideshow2 p {
  padding-top: 9px;
}
div.slideshow2 ul {
  background: #FFF;
  bottom: -75px;
  left: 0px;
  position: absolute;
  overflow: hidden;
  margin: 0 0 0 60px;
  z-index: 10001;
}
div.slideshow2 ul a {
  background-position: 50% 50%;
  cursor: pointer;
  display: block;
  margin-left: 5px;
  margin-top: 5px;
  opacity: 0.5;
  height: 32px;
  width: 32px;
}
div.slideshow2 ul a.active,
div.slideshow2 ul a:hover {
  opacity: 1;
}
div.slideshow2 ul li {
  float: left;
  list-style: none;
}