/*=======================
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: #fffffa; 
/*background : #ddd7c6; */
font: 86%/1.5  Verdana, Geneva, Arial, Helvetica, sans-serif;
}

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

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

/*=====================
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;	
        margin: 10px  0 0 0;
}

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

/*=====================
List Gallery Styling
=====================*/
#listgallery {
	position: relative;
	margin: 0 auto;
	width: 752px; 
	height: 1850px;
	background: #fffffa  url(img/back.jpg)  no-repeat 0 0;
	border: 2px solid #5c3110; 
}

#listgallerybot {
	margin: 0 auto;
	width: 752px; 
	position: relative;
	background: transparent ;
/*	border: 1px solid #5c3110; */
        top: 489px;
}
#explain {
	clear : both;
	padding : 0;
	background: #f6f6e6;
        text-align: center;
/*	border: 1px solid #5c3110;*/ 
	margin: 0 0 0 0;
}
#amble {
	clear : both;
	padding : 0;
        width: 500px;
	background: #f6f6e6;
/*	border: 1px solid #5c3110;*/ 
	margin: 0 auto;
}
#amble h2 {
        color: #ffa500; 
        font size: 1.7em;
}
/*
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: 2px solid #ffa500; 
	width: 80px; 
	height: 80px; 
	float: left; 
	margin: 5px; 
	position: relative; 
	cursor: default;
        background: transparent;
}


a.galleryb, a.galleryb:visited {
	display: inline; 
	color: #333; 
	text-decoration: none; 
	border: 2px solid #ffa500; 
	width: 80px; 
	height: 80px; 
	float: left; 
	margin: 5px; 
	position: relative; 
	cursor: default;
        background: transparent;
}


a.gallery span {
	visibility: hidden; 
	display: block; 
	position: absolute; 
	width: 600px; 
	height: 487px; 
	top: 100px; 
	left: 76px; 
	color: #333; 
	background: #fffffa; 
/*	background: #eae5cc;*/ 
	text-align: center; 
/*	border: 2px solid #663300; */ 
	font-style: italic; 
	font-size :  1.0em ; 
/*	letter-spacing: 2px; */
	cursor: default;
}

a.galleryb span {
	visibility: hidden; 
	display: block; 
	position: absolute; 
	width: 600px; 
	height: 487px; 
	top: 100px; 
	left: 76px; 
	color: #333; 
	background: #fffffa; 
	/*background: #eae5cc; */
	text-align: center; 
	font-size :  1.0em ; 
/*	border: 2px solid #663300; */
	font-style: italic; 
/*	letter-spacing: 2px; */
	cursor: default;
}



a.p01 span {left:  69px; top:93px;}
a.p02 span {left: -25px; top:93px;}
a.p03 span {left:-119px; top:93px;}
a.p04 span {left:-213px; top:93px;}
a.p05 span {left:-307px; top:93px;}
a.p06 span {left:-401px; top:93px;}
a.p07 span {left:-495px; top:93px;}
a.p08 span {left:-589px; top:93px;}

a.p09 span {left:   69px; top:-490px;}
a.p10 span {left:  -25px; top:-490px;}
a.p11 span {left: -119px; top:-490px;}
a.p12 span {left: -213px; top:-490px;}
a.p13 span {left: -307px; top:-490px;}
a.p14 span {left: -401px; top:-490px;}
a.p15 span {left: -495px; top:-490px;}
a.p16 span {left: -589px; top:-490px;}

a.p17 span {left: -589px; top:-586px;}
a.p18 span {left: -495px; top:-586px;}
a.p19 span {left: -401px; top:-586px;}
a.p20 span {left: -307px; top:-586px;}
a.p21 span {left: -213px; top:-586px;}
a.p22 span {left: -119px; top:-586px;}
a.p23 span {left:  -25px; top:-586px;}
a.p24 span {left:   69px; top:-586px;}

a.gallery:hover {
	/*white-space: normal; */
	border: 2px solid #5c3110; 
        background: transparent;
	z-index: 100;
}
a.gallery:active, a.gallery:focus {
	border: 2px solid #333; 
        background: transparent;
	z-index: 10;
}

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

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


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

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

a.galleryb:hover {
	/*white-space: normal; */
	border: 2px solid #5c3110; 
        background: transparent;
	z-index: 100;
}
a.galleryb:active, a.galleryb:focus {
	border: 2px solid #333; 
        background: transparent;
	z-index: 10;
}

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

a.galleryb:hover span img {
	margin: 0; 
/*	border:2px solid #000; */
	position: relative; 
	z-index: 100;
}


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

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