/*=======================
Photo Gallery Main CSS
Last update : 31 Aug 2007
=======================*/

/*=====================
Global Styling
=====================*/
* {
	margin : 0;
	padding : 0;
}

body {
text-align : center;
margin :  0 auto;
color : #333;
background : #ddd7c6; 
font: 86%/1.5  Verdana, Geneva, Arial, Helvetica, sans-serif;
}

/*=====================
Page Layout
=====================*/
#wrapper {
	width: 760px;
	margin: 5px auto 0;
	padding : 10px 0 0 0;
	text-align: left;
	color : #333;
	background : #eae5cc; 
	border : 1px solid #333;
}

#footer {
	clear : both;
	padding : 0;
	margin : 10px auto 0;
	color : #fffffa;
	background : #630 url(../images/footerbg.jpg) no-repeat 0 0;
}

/*=====================
Utlities
=====================*/
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.right {
	text-align : right;
}

.left {
	text-align : left;
}

.fright {
	float : right;
}

.fleft  {
	float : left;
}

.middle {
	text-align : center;
	margin : 0 auto;
}

.caption {
	text-align : center;
	font-weight : bold;
}

p.caption {
	padding : 0.5em 1.5em;
}

/*=====================
Typography Styling
=====================*/
h1 {
	font-size: 1.8em;
	margin : 0;
	padding : 0.4em 0 0 0.5em;
	font-weight : bold;
}

h2 {
	font-size: 1.5em;
	margin : 0;
	padding : 1em 0 0 1em;
	font-weight : bold;
}

h3 {
	font-size: 1.2em;
	margin : 0;
	padding : 1em 0 0 1em;
	font-weight : bold;
}

p {
	margin : 0;
	padding : 1em 1.5em;
}

/*=====================
In-line Navigation Colours
=====================*/
a {
	outline : none;
}

a:link {
	color : #5C3110;
	background : transparent;
	text-decoration: none;
	}

a:visited {	
	color : #663300;
	background : transparent;
	text-decoration : none;	
}

a:hover {
	color : #000;
	background : #FFA500;
	text-decoration : none;
}

a:active {
	color : Red;
	background : Yellow;
	text-decoration : none;
}

/*=====================
Footer Navigation Styling
=====================*/
#footer a, #footer a:visited {
	color : #FFA500;
	background : transparent;
	text-decoration : none;	
}

#footer a:hover {
	color : #000;
	background : #FFA500;
	text-decoration : none;
}

/*=====================
List Gallery Styling
=====================*/
#listgallery {
	position: relative;
	margin: 0 auto;
	width: 700px; 
	/*height: 700px;*/
	background: #f6f6e6;
	border: 1px solid #5c3110; 
}

#listgallerybot {
	margin: 567px 0 0 0;
}

img.backdrop {
	display: block; 
	position: absolute; 
	width: 600px; 
	height: 450px; 
	top: 90px;
	left: 48px; 
	margin: 0;
	background: #f6f6e6;
	border: 1px solid #663300;
}

a.gallery, a.gallery:visited {
	display: inline; 
	color: #333; 
	text-decoration: none; 
	border: 1px solid #ffa500; 
	width: 75px; 
	height: 75px; 
	float: left; 
	margin: 5px; 
	position: relative; 
	cursor: default;
}

a.slidea {background: url(img/th01.jpg);}
a.slideb {background: url(img/th02.jpg);}
a.slidec {background: url(img/th03.jpg);}
a.slided {background: url(img/th04.jpg);}
a.slidee {background: url(img/th05.jpg);}
a.slidef {background: url(img/th06.jpg);}
a.slideg {background: url(img/th07.jpg);}
a.slideh {background: url(img/th08.jpg);}

a.slidei {background: url(img/th09.jpg);}
a.slidej {background: url(img/th10.jpg);}
a.slidek {background: url(img/th11.jpg);}
a.slidel {background: url(img/th12.jpg);}

a.slidem {background: url(img/th13.jpg);}
a.sliden {background: url(img/th14.jpg);}
a.slideo {background: url(img/th15.jpg);}
a.slidep {background: url(img/th16.jpg);}

a.gallery span {
	visibility: hidden; 
	display: block; 
	position: absolute; 
	width: 600px; 
	height: 450px; 
	top: 98px; 
	left: 28px; 
	color: #333; 
	background: #eae5cc; 
	text-align: center; 
	border: 1px solid #663300; 
	font-style: italic; 
	letter-spacing: 1px; 
	cursor: default;
}

a.slidea span {left:  41px; top:84px;}
a.slideb span {left: -46px; top:84px;}
a.slidec span {left:-133px; top:84px;}
a.slided span {left:-220px; top:84px;}
a.slidee span {left:-306px; top:84px;}
a.slidef span {left:-393px; top:84px;}
a.slideg span {left:-480px; top:84px;}
a.slideh span {left:-567px; top:84px;}

a.slidei span {left:   41px; top:-484px;}
a.slidej span {left:  -46px; top:-484px;}
a.slidek span {left: -133px; top:-484px;}
a.slidel span {left: -220px; top:-484px;}

a.slidem span {left: -307px; top:-484px;}
a.sliden span {left: -394px; top:-484px;}
a.slideo span {left: -481px; top:-484px;}
a.slidep span {left: -568px; top:-484px;}

a.gallery:hover {
	white-space: normal; 
	border: 1px solid #5c3110; 
	z-index: 100;
}

a.gallery:hover span {
	visibility: visible; 
	z-index: 100;
}

a.gallery:hover span img {
	margin: 0; 
	border:1px solid #000; 
	position: relative; 
	z-index: 100;
}

a.gallery:active, a.gallery:focus {
	border: 1px solid #333; 
	z-index: 10;
}

a.gallery:active span, a.gallery:focus span {
	visibility: visible; 
	z-index: 10;
}

a.gallery:active span img, a.gallery:focus span img {
	border: 1px solid #000; 
	position: relative; 
	margin: 0; 
	z-index: 10;
}