/*
------------------------------------------------------------------------------------------------
	GENERIC CSS - styles.css											  
------------------------------------------------------------------------------------------------
	Created: 	24-07-2007															
	Author: 	Ember Interactive (www.emberinteractive.co.uk)						
	Website: 	Mango Photography - Weddings															
------------------------------------------------------------------------------------------------
*/


/*
----------------------------------------------------------------------------------------- GLOBAL
															
------------------------------------------------------------------------------------------------
*/

body {
	background: #000;
	font-family: "Lucida Grande", "Gill Sans", Arial, Verdana, Sans-Serif;
	font-size: 62.5%;
	margin: 0;
	padding: 0;
	}
	
/*
-------------------------------------------------------------------------------- TITLES AND TEXT
														
------------------------------------------------------------------------------------------------
*/

h1 {color: #FFCC00; font-size: 2.0em; line-height: 50px; font-weight: normal; margin: 0; padding: 10px 0 0 20px;}
h2 {color: #FFCC00; font-size: 2.0em; line-height: 50px; font-weight: normal; margin: 0; padding: 10px 0 0 20px;}
h2.album {float: left; display: block;}

h3 {color: #FFCC00; font-size: 1.5em; font-weight: bold; margin: 0; padding: 5px 0 10px 20px;}
h3 span {color: #FFCC00; font-size: 0.75em; font-weight: normal; margin: 0; padding: 0;}

h4 {color: #FFF; font-size: 1.25em; font-weight: bold; margin: 0; padding: 10px 0 10px 20px;}

p {color: #FFF; font-size: 1.10em; line-height: 1.75em; font-weight: normal; margin: 0; padding: 5px 15px 10px 20px;}
p span {color: #FFCC00;}
p.album {float: right; display: block; padding-top: 28px;}

a {color: #FFCC00; margin: 0; padding: 0;}
a:link, a:visited {text-decoration: none;}
a:hover {color: #FF9900; text-decoration: none;}
a.active {color: #FF9900;}

ul {
	margin: 5px 0 5px 20px; 
	padding: 0; 
	list-style-type: none;
	}
	
li { 
	background: url(images/bg_bullet.gif) left no-repeat;
	background-position: 0 6px;
	color: #fff;
	font-size: 1.10em;
	line-height: 2em;
	margin: 0;
	padding: 0 20px 0 20px;
	}

/*
------------------------------------------------------------------------------------- NAVIGATION
														
------------------------------------------------------------------------------------------------
*/

ul#nav {position: absolute; width: 780px; margin: 0; padding: 0;}
ul#nav li {float: left; list-style-type: none;}
ul#nav li a {height: 33px; display: block; position: absolute; top: 0; text-indent:-9999px; outline: none;}

li#navIntro a, li#navPackages a, li#navGallery a, li#navAlbum a, li#navBooking a, li#navPrivate a, li#navContact a {background: url(images/bg_button.gif);}

li#navIntro a {background-position: 0 0; width: 106px; left: 0; }
li#navIntro a:hover, li#navIntro a.active {background-position: 0 -33px;} 

li#navPackages a {background-position: -106px 0; width: 132px; left: 106px;}
li#navPackages a:hover, li#navPackages a.active {background-position: -106px -33px;}

li#navGallery a {background-position: -238px 0; width: 107px; left: 238px;}
li#navGallery a:hover, li#navGallery a.active {background-position: -238px -33px;}

li#navAlbum a {background-position: -345px 0; width: 121px; left: 345px;}
li#navAlbum a:hover, li#navAlbum a.active {background-position: -345px -33px;}

li#navBooking a {background-position: -466px 0; width: 124px; left: 466px;}
li#navBooking a:hover, li#navBooking a.active {background-position: -466px -33px;}

li#navPrivate a {background-position: -590px 0; width: 111px; left: 590px;}
li#navPrivate a:hover, li#navPrivate a.active {background-position: -590px -33px;}

li#navContact a {background-position: -701px 0; width: 79px; left: 701px;}
li#navContact a:hover, li#navContact a.active {background-position: -701px -33px;}

/*
----------------------------------------------------------------------------------------- LAYOUT
															
------------------------------------------------------------------------------------------------
*/

#master {width: 780px; margin: 0 auto; padding: 0;}

#header {height: 100px; margin: 0; padding: 0;}

#navigation {background: url(images/bg_navigation.gif) repeat-x; height: 33px; margin: 0; padding: 0; border: 1px solid #222;}

#content {margin: 0 0 30px 0; padding: 0;}

#content_left {float: left; width: 389px; margin: 0; padding: 0;}

#content_right {float: left; width: 390px; margin: 0; padding: 0; border-left: 1px solid #222;}

#footer {background: url(images/bg_footer.gif) repeat-x; height: 33px; margin: 0; padding: 0; border: 1px solid #222; text-align: center;}

/*
----------------------------------------------------------------------------------------- HEADER
															
------------------------------------------------------------------------------------------------
*/

#header img.logo {float: left; margin: 0; padding: 20px 0 0 20px;}

#banner {float: right; width: 330px; height: 58px; margin: 20px 0 0 0; padding: 0 20px 0 0;}

.banner1 {background: url(images/banner1.jpg) no-repeat;}
.banner2 {background: url(images/banner2.jpg) no-repeat;}
.banner3 {background: url(images/banner3.jpg) no-repeat;}
.banner4 {background: url(images/banner4.jpg) no-repeat;}
.banner5 {background: url(images/banner5.jpg) no-repeat;}
.banner6 {background: url(images/banner6.jpg) no-repeat;}
.banner7 {background: url(images/banner7.jpg) no-repeat;}

/*
----------------------------------------------------------------------------------------- FOOTER
															
------------------------------------------------------------------------------------------------
*/

#footer p.footer_left {float: left; margin: 0; padding: 7px 0 0 20px; font-size: 1em;}

#footer p.footer_right {float: right; margin: 0; padding: 7px 20px 0 0; font-size: 1em;}

#footer span {color: #FFCC00;}

/*
----------------------------------------------------------------------------------- INTRODUCTION
															
------------------------------------------------------------------------------------------------
*/

#content_left_home {float: left; width: 390px; margin: 0; padding: 0; border-right: 1px solid #222;}

#content_right_home {float: left; width: 369px; margin: 0; padding: 0 20px 0 0; text-align: left;}

#content_right_home p {float: left; margin: 0; padding: 0 0 0 39px; line-height: 30px;}

img.photo_home {float: right; margin: 7px 0 0 30px; padding: 0;}

/*
--------------------------------------------------------------------------------------- PACKAGES
															
------------------------------------------------------------------------------------------------
*/

img.photo_package {margin: 15px 0 10px 0; padding: 0;}

#dates {margin: 10px 37px 0 20px; padding: 0;}

#dates .date {float: left; display: block; width: 160px; margin: 0; padding: 0; font-weight: bold;}
#dates .price {float: left; display: block; width: 60px; margin: 0; padding: 0;}
#dates .status {float: left; display: block; width: 100px; margin: 0; padding: 0;}

.touch1 {background: url(images/touch1_off.jpg) no-repeat; margin: 10px 0 20px 60px; padding: 0; display: block; width: 228px; height: 330px; border: 1px solid #fff;}
.touch1:hover {background: url(images/touch1_on.jpg) no-repeat;}

.touch2 {background: url(images/touch2_off.jpg) no-repeat; margin: 10px 0 20px 60px; padding: 0; display: block; width: 236px; height: 330px; border: 1px solid #fff;}
.touch2:hover {background: url(images/touch2_on.jpg) no-repeat;}

/*
---------------------------------------------------------------------------------------- GALLERY
															
------------------------------------------------------------------------------------------------
*/

#content_left_gallery {float: left; width: 390px; margin: 0; padding: 0;}


/*
----------------------------------------------------------------------------------------- ALBUMS
															
------------------------------------------------------------------------------------------------
*/

#content_left_album {float: left; width: 780px; margin: 0; padding: 0;}

#samplealbum1 {width: 780px; margin: 0px; padding: 0; text-align: center;}

/*
---------------------------------------------------------------------------------------- BOOKING
															
------------------------------------------------------------------------------------------------
*/

img.photo_booking {margin: 20px 20px 0 0; padding: 0;}

/*
---------------------------------------------------------------------------------------- PRIVATE
															
------------------------------------------------------------------------------------------------
*/

img.private {margin: 10px; padding: 0; border: 1px solid #fff;}

#content_left_private {float: left; width: 389px; margin: 0; padding: 0; border-right: 1px solid #222;}

#content_right_private {float: left; width: 369px; margin: 0; padding: 0; text-align: center;}

p.note {font-size: 9px;}

#content_left_detail {float: left; width: 390px; margin: 0; padding: 0; border-right: 1px solid #222;}

#content_right_detail {float: left; width: 369px; margin: 0; padding: 0; text-align: left;}

/*
---------------------------------------------------------------------------------------- CONTACT
															
------------------------------------------------------------------------------------------------
*/

fieldset {border: 0 solid; padding: 0;}

label {display: block; color: #FFCC00; margin-bottom: 5px;}

input {width: 250px; font-size: 1em; line-height: 1.75em; font-weight: normal; font-family: "Lucida Grande", "Gill Sans", Arial, Verdana, Sans-Serif;}

textarea {width: 250px; font-size: 1em; line-height: 1.75em; font-weight: normal; font-family: "Lucida Grande", "Gill Sans", Arial, Verdana, Sans-Serif;}

select {width: 250px; font-size: 1em; line-height: 1.75em; font-weight: normal; font-family: "Lucida Grande", "Gill Sans", Arial, Verdana, Sans-Serif; padding: 2px;}

.btn {margin-top: 20px; background: #FFCC00;}

.thanks {height: 345px;}

.private {color: #fff;}

#content_left_thankyou {float: left; width: 390px; margin: 0; padding: 0; border-right: 1px solid #222;}

#content_right_thankyou {float: left; width: 389px; margin: 0; padding: 0;}

/*
------------------------------------------------------------------------------------------ MISC.
															
------------------------------------------------------------------------------------------------
*/

br.clear {clear: both; overflow: hidden; line-height: 0px;}

/*
------------------------------------------------------------------------------------------- BLOG
															
------------------------------------------------------------------------------------------------
*/

#blog {display: block; width: 127px; height: 25px; margin-left: 633px; position: absolute; top: 135px!important; background: url(images/blog_button.gif) no-repeat;}
#blog a {display: block; width: 127px; height: 25px; text-indent:-9999px; outline: none;}