/* @override http://localhost/wattsarchitects/css/watts.css */

body {
	font-family: Verdana, sans-serif;
	font-size: 12px;
	line-height: 130%;
	background: url(../images/body-bg.png) repeat-x #eeebe9;
	color: #341513;
 }

a { color: #341513; }
a img { border: none }
ul, ol { margin: 0; padding: 0}


#wrapper { width: 966px; margin: 0 auto}
#header {
	margin-top: 25px;
	width: 966px;
	text-align: center;
	color: #ffffff;
	font-size: 13px;
 }
 #header h1, #header h2 { display: inline; font-size: 1em; }
 #header h2, #header span { font-weight: normal; padding-left: .5em; }
 #header a { color: #FFF; text-decoration: none}
 #header a:hover { text-decoration: underline}


#nav {
	position: relative;
	list-style: none;
	margin-top: 0;
	margin-left: 50px;
	padding:0;
	font-size: 16px;
	font-family: Times, "Times New Roman", Georgia, serif;
	font-variant: small-caps;
	background: url(../images/tab.gif) no-repeat;
	width: 376px;
	height: 40px;
}

#nav li {
	display: inline;
	padding-left: 50px;
	top: 20px;
	position: relative;
}

#nav li a {
	text-decoration: none;
	color: #cdcdcd;
}
#nav li a:hover { text-decoration: underline; color: #FFFFFF; }

#main h2 { margin: 0; margin-bottom: 15px }


#content_container-top{
	background: url(../images/content_bg-top.png) no-repeat;
	width: 966px;
	height: 22px;
}

#content_container-mid{
	background: url(../images/content_bg-mid.png) repeat-y;
	padding: 30px 50px;
}

#content_container-mid.home{
	padding:0;
}

#content_container-bottom{
	background: url(../images/content_bg-bottom.png) no-repeat;
	width: 966px;
	height: 24px;
}

.logo {
	position: absolute;
	bottom: 61px;
	left: 53px;
	z-index: 5;
}

.anniversary-banner { position:absolute; left:40px; bottom:175px }

#gallery_link h3, #schedule_link h3 { margin: 0; }

#gallery_link {
	background: url(../images/gallery_link-bg.png) no-repeat;
	width: 511px;
	height: 155px;
	float: left;
	margin-left: 2px;
	margin-top: -10px;
	cursor: pointer;
}

#schedule_link {
	background: url(../images/schedule_link-bg.png) no-repeat;
	width: 454px;
	height: 167px;
	float: left;
	margin-left: -3px;
	margin-top: -16px;
	cursor: pointer;
}

#footer {
	text-align: center;
	font-size: 10px;
	padding: 20px;
}

#footer h3 { font-size:12px; margin: 0; }

label {	padding-right: 20px; }

.error { color: #FF0000; }
div.error { margin: 15px; }

.galleryGroup b {
	font-size: 16px;
	line-height: 150%;
}

.galleryGroup p {
	padding-left: 25px;
	width: 810px;
	margin: 0;
	margin-bottom: 10px;
}

.nonscroll {
	height: 120px;
	margin-left: 25px;
	margin-bottom: 20px;
}

.galleryStack {	float: left; }

.galleryStack b { font-size: 14px; }

.galleryStack p {
	padding-left: 25px;
	margin: 0;
	margin-bottom: 6px;
}




/*jQuery Scrollable Styles*/

div.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 814px;
	height: 120px;
	margin-bottom: 20px;
	/* this makes it possible to add next button beside scrollable */
	float: left;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable div.items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

/* single scrollable item */
div.scrollable div.items div {
	float:left;
	padding: 0;
	padding-right: 4px;
}

div.scrollable div.items div img{
	margin: 0;
}

/* active item */
div.scrollable div.items div.active {
	border:1px inset #ccc;
	background-color:#fff;
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:18px;
	height:18px;
	background:url(../images/left.png) no-repeat;
	float:left;
	margin: 50px 4px 0;
	cursor:pointer;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -18px;
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;
}

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(../images/right.png);
	clear:right;
}




/*jQuery s3Slider styles*/

#s3slider {
   width: 920px; /* important to be same as image width */
   height: 617px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
   margin: 0 auto;
}

#s3sliderContent {
   width: 930px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute; /* important */
   font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
   font-size: 20px;
   line-height: 180%;
   height: 100%;
   text-align: center;
   padding: 60px 30px;
   width: 320px;
   background-color: #000;
   filter: alpha(opacity=75); /* here you can set the opacity of box with text */
   -moz-opacity: 0.75; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.75; /* here you can set the opacity of box with text */
   opacity: 0.75; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;

   /*
	   if you put
	   top: 0; -> the box with text will be shown at the top of the image
	   if you put
	   bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

#s3sliderButton {
	color: #FFF;
	width: 200px;
	height: 43px;
	font-weight: bold;
	display: none;
	position: absolute;
	bottom: 0;
	left: 40%;
}
#s3sliderButton img {
	width: 200px;
	height: 43px;
}

.s3sliderImage span.right {
	right: 0;
}

.s3sliderImage span.left {
	left: 0;
}

.yellow {
	color: #efbe1d;
}

.small {
	font-size: 16px;
}

.large {
	font-size: 24px;
}

.clear {
   clear: both;
}