body,div,p,h1,table,ul,li,span,a {
	margin:0;
	padding:0;

}

body {
	background: #663f1e url(/images/bg.jpg) no-repeat center top;	
}

#mp3 {
	float:right;
	margin-top:80px;
	margin-right:60px;
	z-index:0;
}

#container {
	width:1024px;
	margin:0 auto;
}

#masthead {
	width:1024px;
	height:143px;
	background:url(/images/header.jpg);
}

#contenttop {
	width:100%;
	height:10px;
	background:url(/images/contentpadtop.jpg);
}

#contentbot {
	width:1024px;
	height:10px;
	background:url(/images/contentpadbot.jpg);
}

#contentcontainer {
background:url(/images/contentbg.jpg);	
position:absolute;
width:100%;
left:0;
}

#content {
width:1024px;
height:460px;
position:relative;
margin:0 auto;
}

#footer {
clear:both;
width:1024px;
height:216px;
padding-top:470px;
display:absolute;
background:#5e391c url(/images/footer.jpg) 0px 37px;
}

#bigmenu {
	list-style:none;
	margin:0 44px;
	background:transparent;
	padding-top:8px;
}

#bigmenu li {
	float:left;
	width:288px;
	height:432px;
	margin:0 12px;
	
}

#bigmenu li a {
	display:block;
	height:432px;
	width:288px;
	text-decoration:none;
}

#weddings {
background:url(/images/photo_wedding.jpg);
background-position:left;
}
.hover #weddings:hover {
background-position:right;
}

#engagement {
background:url(/images/photo_engagement.jpg);
background-position:left;
}
.hover #engagement:hover {
background-position:right;
}

#family {
background:url(/images/photo_family.jpg);
background-position:left;
}
.hover #family:hover {
background-position:right;
}

#aboutimg {
background:url(/images/photo_about.jpg);
background-position:left;
}
#aboutimg:hover {
background-position:right;
}

#testimonialimg {
background:url(/images/photo_testimonials.jpg);
background-position:left;
}


ul#menu {
	list-style:none;
	width:780px;
	margin:0 auto;
	clear:both;
}

ul#menu li {
	float:left;
	height:31px;
}

#home {
width:65px;
background:url(/images/menu/home.png);
background-position:top;
}
#home:hover {
background-position:bottom;
}

#about {
width:93px;
background:url(/images/menu/about.png);
background-position:top;
}
#about:hover {
background-position:bottom;
}

#gallery {
width:72px;
background:url(/images/menu/gallery.png);
background-position:top;
}
#gallery:hover {
background-position:bottom;
}

#albums {
width:124px;
background:url(/images/menu/albums.png);
background-position:top;
}
#albums:hover {
background-position:bottom;
}

#testimonial {
width:106px;
background:url(/images/menu/testimonial.png);
background-position:top;
}
#testimonial:hover {
background-position:bottom;
}

#pricing {
width:72px;
background:url(/images/menu/pricing.png);
background-position:top;
}
#pricing:hover {
background-position:bottom;
}

#contact {
width:81px;
background:url(/images/menu/contact.png);
background-position:top;
}
#contact:hover {
background-position:bottom;
}


#login {
width:111px;
background:url(/images/menu/login.png);
background-position:top;
}
#login:hover {
background-position:bottom;
}

#blog {
width:52px;
background:url(/images/menu/blog.png);
background-position:top;
}
#blog:hover {
background-position:bottom;
}




#gallery a ul{
	display:none;
}

#gallery a:hover ul {
	display:block;
}


#menu ul {width:70px;padding:0;margin:0;list-style-type:none;}

#menu li a {text-decoration:none;display:block;}

#menu ul {visibility:hidden; position:relative;height:0;top:10px;left:0;text-align:center;}
#menu ul li {width:70px;text-align:center;display:block;height:24px;}
#menu ul li a {font-size:12px;line-height:12px;color:white;text-decoration:none;text-align:center;}
#menu ul li a:hover {color:white;text-decoration:underline;}
/* another hack for IE5.5 */
* html #menu ul {top:0px;t\op:0px;}



#menu li:hover ul,
#menu a:hover ul{visibility:visible;}


#text, .text {
	font-family: Georgia, "Times New Roman", Times;
	color:white;
	font-size:14px;
	text-align:center;
	width:620px;
	float:right;
	margin:15px 40px 0 0;
}

#text p {
	margin-bottom:15px;
}

#copyright {
	color:white;
	width:100%;
	text-align:center;
	padding-top:110px;
	font-size:12px;
}


#testimonials div.items div {
	width:620px;
}

div.items div {
	width:620px;
}

#albumscroll div.items div {
	width:823px;
	text-align:center;
}


#testimonials  {
	width:620px;
}

.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 620px;
	height:400px;
}

#albumscroll {
	width: 823px !important;
	height:288px !important;
	margin:0 auto 15px auto;

}

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

/*
	a single item. must be floated in horizontal scrolling.
	typically, this element is the one that *you* will style
	the most.
*/
.items div {
	float:left;
}


/* position and dimensions of the navigator */
.navi {
	margin:0 auto;
	width:400px;
	height:20px;
	text-align:center;
}


/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	margin:3px;
	background:url(/images/navigator.png) 0 0 no-repeat;
	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
.navi a.active {
	background-position:0 -16px;     
}








.albumlist {
	width:850px;
	margin:0 auto;
	text-align:right;
	
}

.albumlist a {
height:41px;
overflow:hidden;
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}

.albumlist a img {
border:none;

}

.albumlist a:hover img, .albumlist a.selected img {
border:none;
margin-top:-41px;
}























.pikachoose{width:394px; margin:0 auto 50px auto;}

/* This is the ul you have all your images in */
.pikachoose ul{padding-left:0;width:510px;height:180px;margin:0;overflow:hidden;}
.pikachoose ul li{float: left;border:1px solid #555;padding:2px;background:#777;margin:0 6px 4px 0;position:relative;overflow:hidden;}
.pikachoose ul li div img{position:relative;cursor:pointer;}

/* this is the surroundner for all your elements. This is also the fake border around the main img and
room for captions */

.photoimages {
	width:50000px;
	}
	
.photoimages img {
	/*margin-right:30px;*/
}
	
.pika_main{
	width:540px;
	height:360px;
	display:block;
	overflow:hidden;
	position:relative;
	float:left;
	margin-top:30px;
	margin-right:50px;
	margin-left:100px;
	z-index:1;
	}

/*sine we give it the fake border, you need to position the image a little. */
.pika_main_img{position:absolute;top:0px;left:0px;border:1px solid white;}
.pika_main_img2{position:absolute;top:0px;left:280px;border:1px solid white;}
.pika_back_img{position:relative;top:0px;}
.pika_subdiv{position:relative;}
.pika_subdiv img, .pika_subdiv a img{}
.pika_caption a{color:white;}

.pika_caption{
	height:16px;
	text-align:center;
	position:absolute;
	text-indent:-9999px;
	top:0px;
	background:none;
	}

.pika_play{position:absolute;z-index:1;left:50%;margin-left:-25px;width:50px;top:5px; display:none;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url('play.png') top center no-repeat; display:none;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url('pause.png') top center no-repeat; display:none;}

.pika_navigation a{font-size: 12px; text-decoration: none;}
.pika_navigation a:hover{text-decoration: underline;}
.pika_navigation{padding-top:10px;clear:both;text-align:center;}

/* if you want to 'hide' these jus make their height and width 1px */
.pika_prev_hover{position:absolute;top:5px;left:5px;height:562px;width:197px;background:url('rewind.png') top left no-repeat;}
.pika_next_hover{position:absolute;top:5px;right:5px;height:562px;width:197px;background:url('fastf.png') top right no-repeat;}

ul#photogallery{
	padding-left:5px;
	width:800px;
	padding-top:20px;
	margin:0 auto;
	list-style:none;
	}
ul#photogallery li{
	float:left;
	margin:4px 4px;
	
	}
	
ul#photogallery li img{
border:1px solid white;
	}



.pika_navigation{display:none;}


#downarrow {
width:30px;
height:20px;
display:block;
text-decoration:none;
background:url(/images/downarrow.png) top;

}

#downarrow:hover {
background-position:bottom;
}

#uparrow {
width:30px;
height:20px;
display:block;
text-decoration:none;
background:url(/images/uparrow.png) top;

}

#uparrow:hover {
background-position:bottom;
}











/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(/images/hori_large.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:120px 10px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right 				{ background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover 		{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } 


/* left */
a.left				{ margin-left: 62px; } 
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }

/* up and down */
a.up, a.down		{ 
	background:url(../img/scrollable/arrow/vert_large.png) no-repeat; 
	float: none;
	margin: 10px 50px;
}

/* up */
a.up:hover  		{ background-position:-30px 0; }
a.up:active  		{ background-position:-60px 0; }

/* down */
a.down 				{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; } 


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






#blogcontainer {
/*	height:460px; */
	overflow:auto;
	color:white;

}

#blogcontainer a {
	color:#ccc;
}

#blog_post_title {
	margin-bottom:8px;
	font-weight:700;
	text-transform: uppercase;
	margin-top:20px;
	
}

#blog_post_title a {
text-decoration:none;
}

#blogcontainer img {
	margin:10px 0 10px 0;
}

#blog_post_date {
	float:right;
	margin-right:50px;
	margin-top:20px;

}

.blogsep {
	width:100%;
	display:block;
	border-bottom:1px dotted #aaa;
}










 
.container {
/*	width:960px;  */
/*	margin:0px auto; */
/*	position:relative; */
	}
	
/* Positions the contact form so it doesn't interfere with any other content, as well as a z-index above any other elements on the page */	
#contactFormContainer {
	position:absolute;
	left:550px;
	top:144px;
	z-index:12;
	}
	
/* Hides the whole contact form until needed */	
#contactForm {
	height:289px;width:558px;
	background:#63281d url(../images/birdy.jpg) no-repeat 241px 11px; 
	border:1px solid #929191;
	display:none;
	padding:7px 12px; 
	color:#fff;
	z-index:100;
	}   

/* Loading bar that will appear while the ajax magic is happening */
.bar{
	display:none; 
	background:url(../images/ajax-loader.gif) no-repeat center; 
	margin-top:100px; 
	height:40px; width:230px;
	}

/* This hides the form validation alert messages until needed */
#contactForm span { 
	display:none; 
	font-size:9px; 
	line-height:10px; 
	padding-left:6px; 
	color:#f5c478;
	}
	
/* Some styling for the contact button */
#contactFormContainer .contact {
	height:47px; width:211px;
	background:url(../images/contact_me.png); 
	position:absolute; 
	left:368px; bottom:-44px; 
	cursor:pointer;
	}
			
/* Hides the darkening layer for the Modal effect. The z-index is necessary for layering purposes, and be sure to keep the positioning/height/width the same */	
#backgroundPopup{
	display:none; 
	position:fixed; 
	_position:absolute; 
	height:100%; width:100%; 
	top:0; left:0; 
	background:#000; 
	z-index:11;
	}