@charset "utf-8";
/* CSS Document */
@import url(cssverticalmenu.css);

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body{
	background:#303;
	font-family: Verdana, Geneva, sans-serif;
	font-size:14px;
	margin-top:20px;
}

p, h1, h2, h3, h4, h5, blockquote{
	font-family: Verdana, Helvetica, sans-serif;
	color: #FFC;
	margin: 5px 10px 5px 10px;
	padding:5px 10px 5px 10px;
	line-height:20px;

}

a{
	font-family: Verdana, Helvetica, sans-serif;
	color: #FFC;	
}

#main-content a{
		font-weight:bold;
		text-decoration:none;
}

#main-content a:hover{
	color:#F06;
	}

p, blockquote{
	font-size:12px;
	line-height:18px;
	font-weight:normal;
}

p.intro{
	font-size:14px;
	margin-top:15px;
}

h1, h2, h3, h4, h5{
	font-size:18px;
	font-weight:bold;
}

h1{
	line-height:35px;
	}

blockquote{
	font-style:italic;
}

.bold{
	font-weight:bold;
}

.italic{
	font-style:italic;
}

#wrapper{
	width:880px;
	margin:0px auto;
}

#header, #top-content, #content{
	position:relative;
	width:880px;
	clear:both;
}

#logo, #header-bar, #navigation, #slideshow, #side-bar, #main-content{
	float:left;

}

#logo, #navigation,  #side-bar{
	width:160px;
}


#header-bar, #slideshow, #main-content{
	width:720px;
}

#logo, #header-bar{
	height:104px;
}

#logo, #side-bar{
	background:#fff;
}

#side-bar {min-height:420px;}

#logo a{
	overflow:hidden;
	text-indent:-99999px;
	background:#fff url(../images/logo.png) no-repeat center center;
	width:160px;
	height:104px;
	display:block;
}

#header-bar{
	background:url(../images/purpletulip.jpg) no-repeat;
	text-align:right;
	color:#fff;
	font-size:32px;
	line-height:36px;
}

#header-bar blockquote, #header-bar p.person{
	color:#fff;
	font-size:18px;
	line-height:24px;
	font-family:Verdana, Geneva, sans-serif;
	padding:15px 20px 0 0;
}

#header-bar p.person{
	font-size:16px;
	padding-top:5px;
}

#navigation{
	background:#2C3C21;
	height:250px;
}

#slideshow{
	height:250px;
	overflow:hidden;
	display:block;
}

#page-name, #vertibax a{
	background:#fff url(../images/Homepic.png) no-repeat center top;
	height:250px;
	width:160px;
	overflow:hidden;
	text-indent:-999999px;
}

body.show-gardens #page-name, body.home-gardens #page-name, body.school-gardens #page-name, body.Vertibax-Show-Garden #page-name, body.Ricola-2010-Show-Garden #page-name, body.Ricola-2009-Show-Garden #page-name, body.Edible-Spaces-Show-Garden #page-name, body.BT-Beach-House-Show-Garden #page-name, body.BT-Beach-House-Scotland-Show-Garden #page-name, body.BT-Beach-House-Ideal-Homes-Show-Garden #page-name, body.BT-Boat-House-Show-Garden #page-name, body.Wireless-Wherever-Show-Garden #page-name, body.At-A-Dales-Pace-Show-Garden #page-name,body.Waterscape-Show-Garden #page-name {
	background:#fff url(../images/gardens.png) no-repeat center top;
	height:360px;
}

body.backsupport #page-name{
	background:#fff url(../images/vertibax.png) no-repeat center top;
	height:550px;
}

body.contact #page-name{
	background:#fff url(../images/contact.png) no-repeat center top;
	height:360px;
}

body.sitemap #page-name{
	background:#fff url(../images/sitemap.png) no-repeat center top;
	height:400px;
	margin-top:20px;
}
	

#vertibax a{
	display:block;
	height:52px;
	width:120px;
	background:#fff url(../images/vertibax4web.jpg) no-repeat center bottom;
	margin:0px auto;
	margin-bottom:15px;
	border:1px solid #fff;
}

#vertibax a:hover{
	border:1px solid #C06;
}


#main-content{
}

#main-content a.back, #main-content a.next{margin: 40px 0 0 20px; color:#FFC; text-decoration:none; font-size:14px; font-weight:bold; display:block;}

#main-content a.next{float:right;}

#main-content a.back:hover, #main-content a.next:hover{color:#F09;}

#main-content a.next:after{content:"»"; padding:0 0 0 5px;}

#main-content a.back:before{content:"«"; padding:0 0 0 5px;}

#thumbs{
	width:720px;
	height:75px;
}

div.content {
	/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
	display: none;
	float: right;
	width: 720px; 
}

div.slideshow-container {
	position: relative;
	clear: both;
	height: 250px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('loader.gif');
	background-repeat: no-repeat;
	background-position: center;
	width: 550px;
	height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {
	position:relative;
}

#slideshow .image-wrapper .advance-link img{
	margin:0; 
	position:absolute; 
	top:0;
	left:0;
}

#slideshow span.image-wrapper {
	display: block;
}

#slideshow a.advance-link {
	width: 720px;
	height: 250px; /* This should be set to be at least the height of the largest image in the slideshow */
	text-align: center;
	position:relative;
}

ul.thumbs {
	clear: both;
	margin: 0;
	padding: 0;
}
ul.thumbs li {
	float: left;
	padding: 0;
	margin: 0;
	list-style: none;
	width:70px;
	height:70px;
	border:1px solid #FFFFCC;
}

ul.thumbs li:hover, #show-gardens li:hover{
	border:1px solid #F06;
}

a.thumb {
	padding: 0;
	display: inline;
	border: none;
}
ul.thumbs li.selected a.thumb {
	color: #000;
	font-weight: bold;
}
a.thumb:focus {
	outline: none;
}
ul.thumbs img {
	border: none;
	display: block;
}

#show-gardens{
	padding:0 0 0 20px;
	display:block;
}
#show-gardens li{
	float:left;
	margin:0 6px 10px 0;
	border:1px solid #FFFFCC;
}

#medal{
	position:absolute;
	right:0;
	top:85px;
	text-align:right;
	width:130px;
}

#medal img{
	display:block;
	margin:5px 0 0 0;
	float:right;
}

#footer{
	text-align:right;
	font-size:9px;
	color:#ffffcc;
	margin-bottom:20px;
	width:880px;
}

body.privacy #content #side-bar{
	height:900px;
}

ul.sitemap, ul.inner-list {
	padding: 0 0 0 60px;
	font-weight:bold;
	font-size:12px;
	color:#FFC;
	list-style:disc;
}

ul.sitemap li, ul.inner-list li{
	padding:4px 0px;
}

ul.inner-list{
	padding:0 0 10px 60px;
	list-style:circle;
}

li.no-bullet{list-style:none;}

.form li{
	padding:5px;
	width:460px;
	margin:0 0 0 15px;
	
}

label{
	display:block;
	float:left;
	width:160px;
	height:20px;
	margin-bottom:10px;
	padding-right:5px;
	font-weight:bold;
	font-size:14px;
	color:#ffffcc;
	font-family: Verdana, Geneva, sans-serif;
	font-size:14px;
}

input, #message{
	background:#fff;
	width:285px;
	height:20px;
	border:1px solid #000;
	float:left;
	display:block;
	margin-bottom:10px;
}

#message{
	height:150px;
}

label.error{
	color:#900;
	float:left;
	display:block;
	width:300px;
	padding-top:0px;
	margin-top:0px;
	padding-bottom:5px;
}

input.error, #message.error{
		border:1px solid #900;
		margin-bottom:0px;
}

input:focus, #message:focus{
	border:1px solid #099;
}

#submit{
	behavior: url(PIE.htc);
	width:100px;
	height:30px;
	line-height:30px;
	margin-left:380px;
	cursor:pointer;
	color:#003300;
	background:#ffffcc;
	font-weight:bold;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
}

#submit:hover{
	background:#003300;
	color:#ffffcc;
}



/*Clearfix class*/


.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}