/* Background (height set to 10000px is quite alot, but
   doesn't seem to be a big hit on loading time)
------------------------------------------------------ */
html {
	height: 100%;
	z-index: 0;
	
	/* Legacy browsers */
	background: #e4e5e5 url(../images/img/gradient.png) repeat-y center;
	-o-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	
	/* Recent browsers */
	background: -moz-linear-gradient (left,
			#eceded, 
			#eceded 50%, 
			#e4e5e5 50%, 
			#e4e5e5 );
	background: -webkit-gradient (linear,
			left center, right center, 
			from(#eceded), to(#e4e5e5),
			color-stop(0.5, #eceded),
			color-stop(0.5, #e4e5e5) );
	}

body {
	position: relative;
	min-height: 100%;
	margin: 0 auto;
	width: 1000px;
	background: url(../images/img/strip-grey.png) repeat-y;
	overflow: hidden;
	z-index: 10;
}

#left {
	margin-left: -50%;
	width: 50%;
	float: left;
	height: 720px;
	z-index: 20;
/* 	overflow-y: hidden; */
	}
	
#right {
	display: inline;
	position: relative;
	margin-right: -50%;
	width: 50%;
	float: right;
	height: 720px;
	z-index: 20;
/* 	overflow-y: hidden; */
	}

#left.home {
	background: url(../images/img/strip-left.jpg) repeat-x;
	}

#left.hello {
	background: url(../images/img/strip-left.jpg) repeat-x;
	}

#left.flowers {
	background: url(../images/img/strip-left-flowers.jpg) repeat-x;
	}

#left.weddings {
	background: url(../images/img/strip-left-weddings.jpg) repeat-x;
	}

#right.home {
	background: url(../images/img/strip-right.jpg) repeat-x;
	}

#right.hello {
	background: url(../images/img/strip-right.jpg) repeat-x;
	}

#right.flowers {
	background: url(../images/img/strip-right-flowers.jpg) repeat-x;
	}

#right.weddings {
	background: url(../images/img/strip-right-weddings.jpg) repeat-x;
	}



/* Content area reset top position, and sets the
   main floral and bugs background image
------------------------------------------------------ */
#reset-height {
	}

#content {
	height: 100%;
	height: 720px;
	background: url(../images/img/background-home.jpg) no-repeat;
	z-index: 30;
	}

#content.home {
	background: url(../images/img/background-home.jpg) no-repeat;
	}
	
#content.hello {
	background: url(../images/img/background-hello.jpg) no-repeat;
	}

#content.flowers {
	background: url(../images/img/background-flowers.jpg) no-repeat;
	}

#content.weddings {
	background: url(../images/img/background-weddings.jpg) no-repeat;
	}



/* Set left, main and right columns for content
   floating from right to left
------------------------------------------------------ */
#left-column {
	position: relative;
	display: inline;
	float: left;
	height: 100%;
}

#right-column {
	position: relative;
	display: inline;
	float: right;
	height: 100%;
}

#main-column {
	position: relative;
	display: inline;
	float: right;
	height: 100%;
	z-index: 100;
}


/* Header
------------------------------------------------------ */

#header {
	position: relative;
	z-index: 100;
	}

#logo {
	position: relative;
	top: 30px;
	width: 280px;
	height: 110px;
	z-index: 300;
	}

#logo-button {
	position: relative;
	top: 0px;
	width: 280px;
	height: 110px;
	color: #fff;
	display: block;
	background: url(../images/img/logo.png) no-repeat;
	z-index: 1000;	
	}

#logo-button:hover {
	background: url(../images/img/logob.png) no-repeat;
	z-index: 1000;	
	}

#repeater {
	height: 80px;
	width: 320px;
	z-index: 100;
	}
	
#curves {
	z-index: 100;
	}		

#repeater.home {
	background: url(../images/img/header-strip-320.png) repeat-y;
	height: 80px;
	}
	
#curves.home {
	background: url(../images/img/header-curves-320.png) no-repeat;
	height: 90px;
	}

#repeater.hello {
	background: url(../images/img/header-strip-320.png) repeat-y;
	height: 530px;
	}
	
#curves.hello {
	background: url(../images/img/header-curves-320.png) no-repeat;
	height: 540px;
	}

#repeater.flowers {
	background: url(../images/img/header-strip-500.png) repeat-y;
	height: 510px;
	width: 500px;
	}
	
#curves.flowers {
	background: url(../images/img/header-curves-500.png) no-repeat;
	height: 150px;
	width: 500px;
	}

#repeater.weddings {
	background: url(../images/img/header-strip-500.png) repeat-y;
	height: 420px;
	width: 500px;
	}
	
#curves.weddings {
	background: url(../images/img/header-curves-500.png) no-repeat;
	height: 150px;
	width: 500px;
	}

#repeater.404 {
	background: url(../images/img/header-strip-320.png) repeat-y;
	height: 160px;
	}
	
#curves.404 {
	background: url(../images/img/header-curves-320.png) no-repeat;
	height: 170px;
	}




/* Right sidebar menu (positioned independently to other
   divs & resets to the top of the screen)
------------------------------------------------------ */

#nav-menu {
	position: relative;
	top: 260px;
	width: 100px;
	height: 220px;
	}

.menu li {
	/* darn padding centres the li text */
	padding: 4px 0 0 0;
	background: url(../images/img/menu-strip.jpg) repeat-y;
	}

.menu-top {
	background: url(../images/img/menu-curves-top.png) no-repeat;
	height: 20px;
	}
	
.menu-bottom {
	background: url(../images/img/menu-curves-bottom.png) no-repeat;
	height: 100%;
	}

	
/* Common page elements
------------------------------------------------------ */
.dots {
	position: relative;
	left:-2px;
	background: url(../images/img/dot.png) repeat-x;
	height: 10px;
	}
	
.last-dot {
	position:relative;
	display: inline;
	background: url(../images/img/dot.png) no-repeat;
	float: right;
	left: -20px;
	width: 5px;
	height: 5px;
	}	
	
.main-text {
	text-align: center;
	}

.spacer10 {height: 10px;}
.spacer15 {height: 15px;}

.copyright {
	font-family: Title;
	text-transform: uppercase;
	font-size: 10px;
	color:#ccc;
	position: fixed;
	bottom: 0px;
	width: 1000px;
	text-align: center;
	height: 15px;
	z-index: 99999999999999999999999;
	}
	
.copyright h3 {color:#ccc;font-size: 10px;height: 15px;z-index: 999999999999999999999998;}	
.copyright a {color:#ccc; font-size: 10px;height: 15px;z-index: 999999999999999999999999;}	
.copyright a:hover {color:#444;}
	
/* HELLO page
------------------------------------------------------ */
#hello-ants-top {
	margin:  0;
	background: url(../images/img/hello-ants-top.png) no-repeat;
	height: 50px;
	z-index: 400;
	}

#hello-ants-bottom {
	margin: -30px 0 0 0;
	background: url(../images/img/hello-ants-bottom.png) no-repeat;
	height: 50px;
	z-index: 300;
	}


/* FLOWERS page
------------------------------------------------------ */
#bug-top-flowers {
	display: block;
	float: left;
	background: url(../images/img/bug-top-flowers.png) no-repeat;
	height: 60px;
	z-index: 100;
	margin: -20px 0 0 0;
	}

#bug-bottom-flowers {
/* 	margin: -10px 0 0 0; */
	background: url(../images/img/bug-bottom-flowers.png) no-repeat;
	height: 70px;
	z-index: 300;
	}

.photo-player {
/* 	background-color: #d4d4d4; */
	height: 307px;
	}
	
.photo-player-collections {
	}
	
ul.photo-player-collections {
	position: relative;
	}	

ul.photo-player-collections li {
	width:123px;
	cursor:pointer;
	float:left;
	text-align:center;
	list-style-type:none;
	font-weight:normal;
	}	

ul.photo-player-collections li a {
	text-decoration:none;
	display:block;
	float:left;
	}	


/* WEDDINGS page
------------------------------------------------------ */
.gallery {
	display: inline;
	float: left;
	width: 140px;
/* 	height: 100%; */
	margin: 0 10px 0 10px;
	text-align: center;
	}

.weddings .photo-player {
	height: 307px;
	}
	
.weddings .photo-player img {
	height: 307px;
	}
	

#bug-top-weddings {
	background: url(../images/img/bug-top-weddings.png) no-repeat;
	height: 120px;
	z-index: 100;
	margin: -80px 0 0 0;
	}

#bug-bottom-weddings {
	margin: -10px 0 0 0;
	background: url(../images/img/bug-bottom-weddings.png) no-repeat;
	height: 70px;
	z-index: 300;
	}



/* Utility and debug classes
------------------------------------------------------ */

.hidden {display: none;}
.centre {text-align: center;}

/*
.pink {background-color: fuchsia;opacity: 0.5; }
.blue {background-color: aqua;opacity: 0.5; }
.yellow {background-color: yellow;opacity: 0.5; }
*/