:root {
	--col-light: hsl(210,20%,60%);
	--col-dark: hsl(210,20%,20%);
	--col-mid: hsl(210,20%,35%);
}

body {
	font-family: 'nanum gothic', "Trebuchet MS", Verdana, Arial, helvetica, sans-serif;
	font-size: 12pt;
	background-color: #EEE;
	color: #333;
}

a {
	text-decoration: none;
	border-bottom: 1px dashed #030;
	color: #030;
}
a:hover {
	border-bottom: none;
	color: #070;
}

/* The top slice contains the title and stapline */

#topslice {
	background-color: #EEE;
	padding-bottom: 20px;
}

#logo img {
	width: 120px;
}

#topslice #title1,
#topslice #title2 {
	color: var(--col-mid);
}
#topslice #title1 { 
	font-size: 3em; 
}
#topslice #title2 { 
	font-size: 1.5em;
	letter-spacing: 0.1em;
}
#header {
	padding-top: 0.8em;
}
#header1 {
	padding-top: 20px;
}
.strapline {
	width: 300px;
	font-family: 'Nanum Gothic', sans-serif;	/* loaded as a google web font */
	font-size: 1.5em;
	color: var(--col-mid);
	float: left;
}
.bhhpa {
	float: right;
	margin-top: 0px;
}

/* The next slice conatins the naviagation bar */

#navslice {
	height: 40px;
	background-color: var(--col-mid);
	background-image: linear-gradient(var(--col-light), var(--col-dark));
}
#navholder {
	width: 936px;
	height: 40px;
	margin-bottom: 10px;
	xbackground-color: #050;
	xbackground-image: url(../images/navbg.jpg);
	xbackground-repeat: repeat-x;
	xborder-left: 2px solid #050;
	xborder-right: 2px solid #090;
}
#navholder a {
	color:#EEE;
	line-height: 40px;
	font-weight: bold;
	text-decoration: none;
	margin-left: 0px;
	margin-right: 20px;
	border-bottom: none;
}
#navholder a:hover {
	color: #0F0;
}


/* Big picture below the nav bar */
#picholder {
	position: relative; /* allows for abs positioning of new flash */
}
#picture {
	width: 940px;
	height: 200px;
	background-image: url(../images/header-new.jpg);
	background-repeat: no-repeat;
	margin: 10px 0;
}

/* this is the main page content */

#main {
	xbackground-color: #FFF;
	position: relative;
	width: 960px;
	margin: 10px auto;
	xborder: 1px solid #555;
}
#mainholder, 
#main {
	xbackground-image:url('../images/greenfade.jpg');
	xbackground-repeat: repeat-x;
	xbackground-position: bottom;
}

/* the bottom slice contains other useful stuff like faceook */

#bottomslice {
	background-color: var(--col-mid);
	padding: 20px 0 20px 0;
	color: #FFC;
}
#bottomslice h2 {
	color: yellow;
}


h1 { font-size: 1.7em; }
h2 { font-size: 1.3em; }

#title1,
#title2,
h1, h2,
.highlight,
.lowlight
{
	font-family: 'Nanum Gothic', sans-serif;	/* loaded as a google web font */
}

h1, h2,
.highlight {
  color: var(--col-mid);
}

#title2 {
  font-weight: bold;
}
.highlight { font-size: 1.5em; }


#gallery {
	margin-top: -10px;
}
#gallery img,
#gallery1 img,
#gallery2 img {
	padding: 4px;
	border: 1px solid #070;
	margin-top: 15px;
}
#gallery a,
#gallery1 a,
#gallery2 a {
	text-align: center;
	text-decoration: none;
	color: #070;
	border-bottom: none;
}

/*
	Caravan features are provided as an unordered list...
	If the columns are the same size then this can be used, otherwise use the featuresEq class.
*/
ul.features {
	border: 1px solid silver;
	border-radius: 10px;
	padding: 5px;
	padding: 5px 5px 5px 10px;
	background-color: white;
}

ul.features li {
	margin: 0 0 1em 1em;
	list-style: circle;
	padding-left: 10px;
}

/* 
	This is used to provide equal height columns but only has borders top and left 
*/
div.featuresEq {
	overflow:hidden;
	margin-bottom: 20px;
	
}
ul.featuresEq {
	border-radius: 10px;
	padding: 5px 5px 5px 10px;
	background-color: white;

	border-left: 1px solid silver;
	border-top: 1px solid silver;
	background-color: white;
  	margin-bottom: -99999px;
	padding-bottom: 99999px;
}
ul.featuresEq li {
	margin: 0 0 1em 1em;
	list-style: circle;
	padding-left: 10px;
}

/*
	Link to info@sycamore...
*/
.email {
	font-family: 'nanum gothic', "Trebuchet MS", Verdana, Arial, helvetica, sans-serif;
}
#bottom .email a {
	color: #FFC;
}
#bottom .email a:hover {
	color: yellow;
}

/*
	The forsale div is a block of buttons, each linking to a caravan that's for sale.
*/
#forsale a {
	display: block;
	width: 200px;
	text-decoration: none;
	margin-top: 10px;
	font-weight: bold;
	color: yellow;
	border: 1px solid #070;
	border-radius: 10px;
	padding: 5px;
	background-image: url(../images/navbg.jpg);
	background-repeat: repeat-x;
	text-align:center;
}
#forsale a:hover {
	color: #000;
	background-position: bottom;
}


/*
	to overlay a sycamore leaf on a small scrolling image
*/
img.overlay {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 18px;
	height: 21px;
	background-image: url(/images/leaf2.png);
	background-repeat: no-repeat;
	border:none !important;
}


.bold {
	font-weight: bold;
}