@charset "utf-8";

*{ margin:0; padding:0; }
body{ margin:0; padding:0; font-family:Verdana, Arial, Helvetica, sans-serif; background:#eeeebd; font-size:62.5%; }

p{ font-size:1.2em; }
a{ cursor:pointer; text-decoration:none; color:#780000; }
a:hover{ text-decoration:underline; }
label{ font-size:1.2em; padding-bottom:3px; }

#header{ background:url(images/header.jpg) top center no-repeat; width:840px; height:100px; margin:0 auto; position:relative; }
#header h1{ padding-top:10px; width:100%; text-align:center; }
#photo-wrapper{ width:760px; padding:0 10px; margin:0 auto; background:#fffff0; position:relative; }

#contact-header{ background:url(images/header.jpg) top center no-repeat; width:840px; height:100px; margin:0 auto; position:relative; }
#contact-header h2{ padding-top:10px; width:100%; text-align:center; }
#contact-wrapper{ width:740px; padding:0 20px 10px; margin:0 auto; background:#fffff0; }

label.error{ color:#780000; padding:5px; border:#780000 1px solid; margin-left:0.5em; }
label.success{ color:green; padding:5px; border:green 1px solid; margin-left:0.5em; }

#footer{ background:url(images/header.jpg) top center no-repeat; width:840px; height:40px; margin:0 auto; position:relative; text-align:center; padding:30px; color:#FFF; font-weight:bold; }
#footer a{ color:#FFF; }

#scrollnext{ position:absolute; top:55px; right:-10px; }
#scrollprev{ position:absolute; top:55px; left:-10px; }

#photos{ position:relative; overflow:hidden; width:760px; height:420px; }

#thumbs{ position:absolute; width:30000px; }

.slide{ float:left; width:770px; }

.thumb{ width:180px; height:180px; float:left; display:block; background:#FFF; margin:10px 2px; padding:2px; position:relative; text-align:center; border:#888 solid 1px; border-top:#CCC solid 1px; border-left:#CCC solid 1px; }
.thumb img{ margin:auto; text-align:center; border:none; }

.clear{ clear:both; }

.navi{ /*margin-left:328px;*/ margin:0 auto; width:190px; height:20px; }
.navi a{ width:8px; height:8px; float:left; margin:3px; background:url(images/navigator.png) 0 0 no-repeat; display:block; font-size:1px; }
.navi a:hover{ background-position:0 -8px; }
.navi a.active{ background-position:0 -16px; }

/* OVERLAY */

/* the overlayed element */
.simple_overlay {
	
	/* must be initially hidden */
	display:none;
	
	/* place overlay on top of other elements */
	z-index:10000;
	
	/* styling */
	background-color:#FFF;
	
	width:675px;
	min-height:200px;
	border:1px solid #666;
	
	/* CSS3 styling for latest browsers */
	/*
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;	
	*/
}

/* close button positioned on upper right corner */
.simple_overlay .close {
	background-image:url(images/close.png);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:30px;
	width:30px;
}

/* GALLERY SPECIFIC */

/* the large image. we use a gray border around it */
#img {
	
}

/* "next image" and "prev image" links */
.next, .prev {
	
	/* absolute positioning relative to the overlay */
	position:absolute;
	top:40%;	
	border:1px solid #666;	
	cursor:pointer;
	display:block;
	padding:10px 20px;
	color:#fff;
	font-size:11px;
	
	/* upcoming CSS3 features */
	/*
	-moz-border-radius:5px;
	-webkit-border-radius:5px;	
	*/
}

.prev {
	left:0;
	border-left:0;
	/*
	-moz-border-radius-topleft:0;
	-moz-border-radius-bottomleft:0;
	-webkit-border-bottom-left-radius:0;
	-webkit-border-top-left-radius:0;
	*/
}

.next {
	right:0;
	border-right:0;
	/*
	-moz-border-radius-topright:0;
	-moz-border-radius-bottomright:0;
	-webkit-border-bottom-right-radius:0;
	-webkit-border-top-right-radius:0;	
	*/
}

.next:hover, .prev:hover {
	text-decoration:underline;
	background-color:#000;
}

/* when there is no next or previous link available this class is added */
.disabled {
	visibility:hidden;		
}

/* the "information box" */
.info {
	position:absolute;
	bottom:0;
	left:0;	
	padding:10px 15px;
	color:#fff;
	font-size:11px;
	border-top:1px solid #666;
}

.info strong {
	display:block;	
}

/* progress indicator (animated gif). should be initially hidden */
.progress {
	position:absolute;
	top:45%;
	left:50%;
	display:none;
}

/* everybody should know about RGBA colors. */
.next, .prev, .info {
	background:#333 !important;
	background:rgba(0, 0, 0, 0.6) url(/img/global/gradient/h80.png) repeat-x;		
}