﻿/*Change browser default settings*/
html, body {
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}

body {
	background: black;

	font-family: "Verdana";
	font-size: 8pt;
	
	background-image: url('images/mainBkg.jpg');
}

p, ul {
	margin: 0px;
	padding: 0px;
}

a {
	color: white;
}
			
/*#body2 {
	position: absolute; 
	top: 0; 
	left: 0;
	
       	height: 100%; 
	width: 100%; 
	
}*/

/*logo is the container for the logo. it is an h1 field that contains the company name hidden in text behind the image for search engine and CSS disabled browsers*/
#logo {
	position: absolute;
	top: 0px;
	left: 0px;

	background: url("../images/swlogo3.png") no-repeat;
	
	overflow: hidden;
	display: block;
	
	height: 68px;
	width: 267px;
	line-height: 1000px;
	text-indent: -9000px;
	outline: 0;
	margin: 20px 20px 20px 20px;
	cursor: pointer;
	
	opacity:0;
	filter: alpha(opacity=0);
}

/*main is the other top level element. Everything except the logo is contained inside of main.
The map and fisheye popins are also independant of main*/			
.main {
	position: absolute;
	left: 0px;

margin-top: 300px;
	width: 100%;

	overflow: visible;
	z-index:1;
}

/*top is the hairline border below the menu and above the center area*/
.main .top {
	position: relative;
	
 	width: 100%;
       	height: 1px;
	
       	line-height: 1px;
       	font-size: 1px;
	
       	background: #999999;
	
/*	filter: alpha(opacity=20);
       	-moz-opacity: .20;
       	opacity: .20;
*/
	z-index:1;
}

/*center is the container which holds the element "content". It's main purpose is for spacing.
During the opening animation, this is what grows in size to create the "opening up" effect*/
.main .center {
	position: relative;
	
       	width: 100%;
       	height: 0px;
	
       	background: black;
       	text-align: center;
       	overflow: visible;
       	
       	line-height: 0px;
       	font-size: 0px;
       	z-index:1;
}

/*bottom is the hairline border above the address and below the center area*/
.main .bottom {
	position: relative;
	
       	width: 100%;
       	height: 1px;
	
       	line-height: 1px;
       	font-size: 1px;
	
       	background: #999999;
	
/*	filter: alpha(opacity=20);
       	-moz-opacity: .20;
       	opacity: .20;
*/
	z-index:1;
}

/*content is the body content inside of the center div. This is what the majority of AJAX calls look for in the DOM to update with ASP output*/
#content {
	position: relative;

	top: 0px;

	padding-top: 10px;
				
	margin-left: auto;
	margin-right: auto;
	width: 760px;
	height: 100%;
	z-index:10;
	text-align: left;
}

/*content2 is used for text bodies, for instance the text in about us, faq, contact us and wedding pricing*/
#content .content2 {
	position: absolute;
    top: 10px;
	left: 270px;


	width: 490px;
	height: 368px;
	padding: 5px;
       
    overflow: auto;
	text-align: left;
	font-family: "Verdana";
	color: white;

	font-size: .8em;
        line-height: normal;
}

li {
	margin-left: 20px;
	margin-bottom: 10px;	
	
}

#content .content2 ul {
	margin-left: 20px;
	margin-bottom: 10px;	
	
}

#content .content2 h1 {
	font-family: "Sans Serif";
	font-size: 1.5em;
	font-weight: bold;
}

#content .content2 p {
	text-indent: 15px;
	
}

/*these are the parent divs for each question in the FAQ.*/
#content .content2 #weddings_faq div {
	cursor:pointer;
	margin-bottom: 3px;
}
#content .content2 #portraits_faq div {
	cursor:pointer;
	margin-bottom: 3px;

}
#content .content2 i{
	position: absolute;
	left: 200px;
}


/*these are the hidden fields in FAQ and Wedding pricing. Display is changed from none to block and back on click of the parent divs*/
#hidden {
	line-height:1.7em;
	display: none;
	margin-top: 10px;
	margin-bottom: 7px;

}

/*any image inside content labeled as a class of about us. FAQ, Wedding Pricing and Contact us also use images with this class*/
#content img.aboutus {
	position: absolute;

	top: 24px;
	left: 0px;

	width: auto;

}



/* Subcat is the container for Sub Categories of Galleries, I.E. Weddings has Weddings, Bridal, Engagement.*/
#content .subcat {
	position: absolute;

	top: 24px;
	left: 0px;

	width: 123px;

	color: #999999;
	font-family: "Verdana";
	text-align: left;
	font-size: .8em;
	font-style: italic;
}

li {
	margin: 0px;
	list-style: circle;
	font-style: normal;
	font-weight: normal;
}

#content .subcat ul {
	margin: 0px;
	list-style: circle;
	font-style: normal;
	font-weight: normal;
}
#content .subcat ul {
	width: 100%;
}
#content .subcat a {
	display: block;
	color: #999999;
	font-family: "Verdana";
	font-size: 1.5em;
	text-decoration: none;
	width: 100%;

}
#content .subcat a:hover {
	background: #1f1f1f;
}

/*thumb is the container for thumbnails which appears and pops down when a gallery is called, replacing the address.*/
.thumb {position: relative; top: -51px; margin: 0 auto; width: 475px; height: 96px; display: none; overflow: hidden; z-index: 100;}
#thumb {
	position: relative;

	top: -100px;

	overflow: hidden;

	margin-left: auto;
	margin-right: auto;
	
	width: 475px;
	height: 86px;
	
}

#thumb #frame {position: relative; width: 100%}
#thumb #left {position: absolute;left: 0px;}
#thumb #right {position: absolute; right: 0px;}
/*.thumb {
	position: absolute;

	top: 0px;
	left: 22px;

	width: 470px;
	height: 86px;

	overflow: hidden;

	z-index: 100;
}*/
#thumb2 {
	position: absolute;
	top: 0px;
	
	padding: 0px;
	margin: 0px;
	margin-left: 20px;

	white-space: nowrap;
}

#thumb2 li {
	list-style: none;
	margin: 0;
	padding: 0;
}
	#thumb2 {
		width: 5418px;
	}

#thumb ul li {   
        display: block;   
        float: left;   
        margin: 5px;   
        padding: 5px;   
        border: 1px solid #666;   
        background-color: #000;   
    }   
  
#thumb ul li img {   
    display: block;   
}   

#thumb2 a {
	position: relative;
	display: inline;

	margin-left: 0px;
}

#thumb2 a img {
	border: none;

	filter: alpha(opacity=50);
	-moz-opacity: .50;		
	opacity: .50;
}

#thumb2 a:hover img {
	border: none;

	filter: alpha(opacity=100);
	-moz-opacity: 1;		
	opacity: 1;
}

/*below are styling definitions specific to the Contact Us form*/
#Submit {
	position: relative;
	right: 20px;
}

#special {
	visibility:hidden
}

#Sending {
	visibility: hidden;
	position: absolute;
	top: 45%;
	left: 45%;
	width: 10%;
	height: 10%;
	
	border: 2px maroon solid;
	
	color: maroon;
	font-weight: bolder;
}

.contactus {
	position: absolute;
	bottom: 100px;
	left: 140px;
	border-left:thin #C0C0C0 ridge;
	border-right:thin #C0C0C0 ridge;
	font-family:Arial, Helvetica, sans-serif;
	color: white;
	cursor: pointer;
}

/*lightbox is a 100% by 100% grey-tinted layer between the body and the map and fisheyes popins.*/
#lightbox {
	z-index: 110; 
	
	position: absolute; 
	top: 0px; left: 0px;
	
	height: 100%; width: 100%; 
	line-height: 100%;
	
	background: #222;
	
	filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;
	visibility: hidden;

}

#fisheye {
	z-index: 120;
	
	filter: alpha(opacity=0); -moz-opacity: 0; opacity: .0;
	visibility: hidden; 
	
	position: relative; 
	
	margin-right: auto; margin-left: auto; top: 80px; 
	
	height: 467px; width: 664px; 
	
	background: url('../images/about/BkgFisheyes.jpg') no-repeat;
}

#map {
	z-index: 120;
	
	filter: alpha(opacity=0); -moz-opacity: 0; opacity: .0;
	visibility: hidden; 
	
	position: relative; 
	
	margin-right: auto; margin-left: auto; top: -320px; 
	padding-top: 10px;
	
	height: 340px; width: 385px; 
	
	background: url('../images/BkgMap.jpg') no-repeat;
}

/*holder is used to house the menu embed object*/
#holder {
	position: relative;
	width: 100%;
	height: 27px;
	overflow: visible;
}

/*address is the div under the bottom border of the content area*/
#address {
	color:#b5b7b4;
	font-weight:bold;
	position:relative;
	text-align:center;
	width:100%;
}

#address table {
	
	height: 100%;
	margin:auto;
}

#address a {
	height: 19px;
	width: 36px;
	
	display: block;
	position:relative; float:right;
	
	overflow: hidden;
	
	background: url('../images/mapit5.gif') no-repeat;
	background-position: 0 0;
}

#address a:active {
	background-position: 0 100%;
}

#address a span {
	display: none;
}

.alert {
	position: static;
	margin-top: 20px;
	width: 100%;
	
    background: #fff6bf url(../images/alert.jpg) center no-repeat;
    background-position: 15px 50%; /* x-pos y-pos */
	text-align: left;
    padding: 5px 20px 5px 45px;
    border-top: 2px solid #ffd324;
    border-bottom: 2px solid #ffd324;
    
    color: brown;
    font-family: "Lucida Bright";
    font-size: .8em;
}

.alert a{
	 color: brown;
}

#music {
	left:25px;
	position:absolute;
	top:90px;
}


table.albums td {vertical-align: top;}
#content table.albums p {text-indent: 0px;}

#flushed {
	position: relative;
	display: none;
	visibility: hidden;
	filter: alpha(opacity=0); -moz-opacity: 0; opacity: .0;
}
