body {
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	background-color: #FFFFFF;
	background-attachment: scroll;
	background-image: url(../img/body_bg.jpg);
	background-repeat: no-repeat;
	background-position: center 30px;
	line-height: 17px;
	color: #333333;
	margin-top: -15px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}
#wrapper {
    width: 900px;
    margin: 0 auto;
}

/********************************text************************************/

h1 a{
	text-indent:-9999px;
	background-image: url(../img/highlandspring_logo.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 150px;
	width: 225px;
	display:block;
	margin: 0px;
	padding: 0px;
}

h2 {
    margin: 0;
    margin-bottom: 14px;
    padding: 0;
}
h2 {
	margin-bottom: 14px;
	padding: 0;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	font-family: "Bodoni SvtyTwo OS ITC TT-Book";
	font-weight: normal;
	color: #818285;
}

h2.home{
	text-indent:-9999px;
	background-image: url(../img/welcome_header.jpg);
	background-repeat: no-repeat;
	height: 50px;
	width: 155px;
	background-position: left top;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: -10px;
}
h2.what{
	text-indent:-9999px;
	background-image: url(../img/whatewedo_header.jpg);
	background-repeat: no-repeat;
	height: 50px;
	width: 220px;
	
	margin: 0px;
	padding: 0px;
}

h2.family{
	text-indent:-9999px;
	background-image: url(../img/ourfamily_header.jpg);
	background-repeat: no-repeat;
	height: 50px;
	width: 200px;
	background-position: left top;
	margin: 0px;
	padding: 0px;
}

p{
	font-size: 13px;
	color: #666666;
}

.textarea{
	float: left;
	height: 220px;

}
.img_ourfamily{
	border: 1px solid #CCCCCC;
	padding: 5px;
	height: auto;
	width: auto;
	float: left;
	margin-right: 20px;
	margin-bottom: 40px;
}

img{
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;


}
/********************************scroller************************************/

#slider {
	width: 830px;
	position: relative;
	margin-top: -30px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

.scroll {
	height: 560px;
	width: 780px;
	overflow: auto;
	overflow-x: hidden;
	position: relative;
	clear: left;
	background: #FFFFFF;
	padding-left: 20px;
}

.scrollContainer div.panel {
	/*height: 210px;*/
	height: 540px;
	width: 750px;
	padding-top: 30px;
	padding-right: 20px;
	padding-bottom: 40px;
	padding-left: 20px;
}

.scrollContainer div.panel_welcome {
	/*height: 210px;*/
	height: 540px;
	width: 750px;
	padding-top: 150px;
	padding-right: 20px;
	padding-bottom: 40px;
	padding-left: 20px;
}

.scrollContainer div.panel_ourfamily {
	/*height: 210px;*/
	height: 560px;
	padding-top: 22px;
	width: 750px;
	padding-right: 20px;
	padding-bottom: 40px;
	padding-left: 20px;
}


/********************************navigation************************************/

ul.navigation {
	list-style: none;
	margin: 0;
	padding-bottom: 9px;
	background-image: url(../img/nav_bg.jpg);
	background-repeat: no-repeat;
	float: right;
	padding-top: 0;
	padding-right: 0;
	padding-left: 0;
	background-position: right 12px;
}

ul.navigation li {
	display: inline;
	margin-right: 10px;
}

ul.navigation a {
	padding: 10px;
	color: #999999;
	text-decoration: none;
}

ul.navigation a:hover {
	color: #666666;
}

ul.navigation a.selected {
	color: #333333;
}

ul.navigation a:focus {
    outline: none;
}


/********************************scroll buttons************************************/

.scrollButtons {
    position: absolute;
    top: 250px;
    cursor: pointer;
}

.scrollButtons.left {
    left: -20px;
}

.scrollButtons.right {
    right: -20px;
}

.hide {
    display: none;
}

/********************************footer************************************/

#footer{
	background-image: url(../img/footer_bg.jpg);
	background-repeat: no-repeat;
	padding-top: 20px;
	margin-left: 36px;
	padding-left: 25px;
	font-size: 11px;
	color: #666666;
}

#footer a{
	color: #999999;
	text-decoration: underline;
}

#footer a:hover{
	color: #333333;
	text-decoration: underline;
}

.footer_left{
	float: left;
	height: 90px;
	width: 300px;
	margin-right: 20px;
}

.footer_right{
	float: left;
	
	width: 500px;
	
}
#speyside a {
	text-indent:-9999px;
	width:175px;
	height:53px;
	display:block;
	background-image: url(../img/speysideglenlivet_logo.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	float:left;
	margin-top: 7px;
	margin-right: 10px;
}
#speyside a:hover {
	text-indent:-9999px;
	width:175px;
	height:53px;
	display:block;
	background-image: url(../img/speysideglenlivet_logo.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	float:left;
	margin-top: 7px;
	margin-right: 10px;
}

/********************************footer logos************************************/

#highlandspring a {
	text-indent:-9999px;
	width:109px;
	height:57px;
	display:block;
	background-image: url(../img/highland_spring_logo.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	float:left;
}

#highlandspring a:hover{
	text-indent:-9999px;
	width:109px;
	height:57px;
	display:block;
	background-image: url(../img/highland_spring_logo.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	float:left;
}


/********************************map************************************/

#imap {
	display:block;
	width:750px;
	height:390px;
	position:relative;
	background-repeat: no-repeat;
	left: 0px;
	top: 0px;
	background-image: url(../img/map2.jpg);
}
 
/* set up the definition list <dt><a> to hold the background image for the hover state */
#imap a#title {display:block; width:400px; height:0; padding-top:240px; overflow:hidden; position:absolute; left:0; top:0; background:transparent url(../../test/images/beatles_hover.jpg) no-repeat 400px 400px; cursor:default;}
/* the hack for IE pre IE6 */
* html #imap a#title {height:240px; he\ight:0;}
 
/* the <dt><a> hover style to move the background image to position 0 0*/
#imap a#title:hover {background-position: 0 0; z-index:10;}
 
/* place the <dd>s in the correct absolute position */
#imap dd {position:absolute; padding:0; margin:0;}
#imap #pic1 {left:140px; top:86px; z-index:20;}
#imap #pic2 {left:130px; top:79px; z-index:20;}
#imap #pic3 {left:135px; top:100px; z-index:20;}
#imap #pic4 {left:105px; top:90px; z-index:20;}
#imap #pic5 {left:140px; top:240px; z-index:20;}
 
/* style the <dd><a> links physical size and the background image for the hover */
#imap a#thebraes, #imap a#theochils, #imap a#theglen, #imap a#thefells, #imap a#thebeacons {display:block; width:25px; height:25px; background:transparent url(../../test/images/hover.gif) -100px -100px no-repeat; text-decoration:none; z-index:20;}
 
/* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {display:none;}
 
/* move the link background image to position 0 0 when hovered */
#imap a#thebraes:hover, #imap a#theochils:hover, #imap a#theglen:hover, #imap a#thefells:hover, #imap a#thebeacons:hover {background-position:0 0;}
 
/* define the common styling for the span text */
#imap a:hover span {position:absolute;  width:388px; display:block; font-family:arial; font-size:12px; background:#ffffff; color:#000; border:1px solid #000; padding:5px;}

#imap a:hover span {position:absolute;  width:388px; display:block; font-family:arial; font-size:12px; background:#ffffff; color:#000; border:1px solid #000; padding:5px;}

/* the hack for IE pre IE6 */
* html #imap a:hover span {width:400px; w\idth:388px;}
 
/* move the span text to a common position at the bottom of the image map */
#imap a#thebraes:hover span {
	left: 380px;
	top: -48px;
}
/*#imap a#thebraes:focus span {left: 380px; top: -48px; width:388px; display:block; font-family:arial; font-size:12px; background:#fff; color:#000; border:1px solid #000; padding:5px;}

#imap a#thebraes:active span {left: 380px; top: -48px; width:388px; display:block; font-family:arial; font-size:12px; background:#fff; color:#000; border:1px solid #000; padding:5px;}*/

#imap a#theochils:hover span {
	left:300px;
	top: -75px;
}
#imap a#theglen:hover span {
	left:300px;
	top: -75px;
}
#imap a#thefells:hover span {
	left:300px;
	top: -75px;
}
#imap a#thebeacons:hover span{
left:300px;
top: -75px;
}
 
/* add the style for the link span text - first line */
#imap a span:first-line {font-style:italic;}
 
#ads {margin-top:150px;}
a, a:hover, a:active {} /* this is for IE6 */


#imap a#thebraes, #imap a#theochils, #imap a#theglen, #imap a#thefells,

#imap a#thebeacons {display:block; width:20px; height:20px;

background:transparent url(../../test/images/hover.gif) -100px -100px

no-repeat; text-decoration:none; z-index:20;} /* reduced the size of the

hotspot */


/* reposition the hotspots so they do not overlap */

#imap #pic1 {left:146px; top:73px; z-index:20;}

#imap #pic2 {left:131px; top:103px; z-index:20;}

#imap #pic3 {left:140px; top:125px; z-index:20;}

#imap #pic4 {left:110px; top:126px; z-index:20;}

#imap #pic5 {left:140px; top:300px; z-index:20;}


/* add the :active and :focus states to the default :hover style */

#imap a:hover span,

#imap a:active span,

#imap a:focus span

{
	position:absolute;
	width:388px;
	display:block;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:13px;
	background:#ffffff;
	color:#666666;
	border:1px solid #FFFFFF;
	line-height: 17px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}


/* add the :active and :focus states to the spans and reposition them to

appear in the same place to the right of the map */

#imap a#thebraes:hover span,

#imap a#thebraes:active span,

#imap a#thebraes:focus span

{left:201px;top:-73px;}


#imap a#theochils:hover span,

#imap a#theochils:active span,

#imap a#theochils:focus span

{left:208px;top:-103px;}


#imap a#theglen:hover span,

#imap a#theglen:active span,

#imap a#theglen:focus span

{left:208px;top:-125px;}


#imap a#thefells:hover span,

#imap a#thefells:active span,

#imap a#thefells:focus span

{left:229px;top:-126px;}


#imap a#thebeacons:hover span,

#imap a#thebeacons:active span,

#imap a#thebeacons:focus span

{left:200px;top:-300px;}

p.hsg-small{
	font-size:10px;
}