/*in htm file use <div class="gallery"> put image in here </div> */
.gallery img {
   padding:1px;
   border:1px solid #7c7c7c;
}

.gallery-small img {
   /*padding:1px;*/
   border:1px solid #7c7c7c;
}

.gallery-small{
   font-family: Arial, Helvetica, sans-serif;
   font-size: small;
   color: #333;
   line-height:99%;
}

.gallery-title-desc {font-size: 12px; font-weight: 600;}


#slideshow1 img {
 border-left:20px;
    border-style:solid;
    border-color:#E7E7E7;
}

html {     
       overflow-y: scroll;   /* forces a vertical scrollbar, to prevent centre jumping - works in all except Opera */
}

body {
	/*margin:0;*/
	/*padding:0;*/
			/* This removes the border around the viewport in old versions of IE */
	/*width:960px;*/   /* it was 100%, as a fluid design, I have made 980px */
	/*background: url(../graphics/backgrounds/background-vertical.gif);   commented out as using background colour */
	background:#e4efde;  /*  was #d9ebda then #e4f3ef comment out if using background image   */

	/*min-width:600px;*/    	/* Minimum width of layout - remove line if not required */
					/* The min-width property does not work in old versions of Internet Explorer */
	font-family: Verdana, Arial, Helvetica, sans-serif; 	
	font-size: 1em;  /*  font size of the body text, unless overwritten by a particular class, was 0.8em */
	/*font-size:90%;  if want to set font size in %s instead*/	
	color: #333;  /*   was #62372E  */
}
a {
	color:#3333cc;  
	text-decoration:none;
}
a:hover {
	color:#0241FD;
	text-decoration:underline;
	/*background:#369;  gave blue bkgrnd behind every link on every page, even if it was an image link*/
	
}
h1, h2, h3 {
	margin:.8em 0 .2em 0;
	padding:0;
}
p {
	margin:.4em 0 .8em 0;
	padding:0;
}


/*below taken from dukes barn css file*/


/*p {*/
/*	background-color:#999999;*/
/*	font-family: Arial, Helvetica, sans-serif;*/
/*	font-size: 12px;*/
/*	line-height: 20px;*/
/*	color:#fff;*/
/*	padding:5px;*/
/*}

/*td, th {
/*	font-family: Arial, Helvetica, sans-serif;*/
/*	font-size: 12px;*/
/*	line-height: 24px;*/
/*	color: #330000;*/
/*}




/*above taken from dukes barn css file*/


/*img {*/
	/*margin:0px 0px 0px 0px; only style image here if want it to apply to ALL images which I don't */
}




#header p,
#header h1,
#header h2 {
	padding:.4em 15px 0 15px;
	margin:0;
	}



/* ........TEXT CLASS STYLING......... */


.picturesizes{
font-size:  0.7em;
font-weight: bold;
line-height:80%;
/*color:#000; if want this particular text style class to have a colour different to that set under body*/
}

/* ........ END OF TEXT CLASS STYLING......... */

/* CONTAINER for the background tiling image */

.TextWrapRight {
float: right;
/*margin: 10px;*/
}

.TextWrapLeft {
float: left;
/*margin: 10px;*/
}


#bkgrdimage {
   /* doesn't look like this is required, as the white background in sidebar seems to be extending to footer, use if necessary */ 
    }


/* COLUMN CONTAINER from vareso */


#header {
   /* by default no CSS is required for header div - by default it is 100% of container, and by default will position itself as far to top and left as it can */
   }

#container {
    width:967px;
    margin:10px auto; /* setting auto on left and right margins, combined with fixed width to container - centres it */
    /*background: url(../graphics/backgrounds/background-tiling.jpg) repeat-Y;   I HAVE ADDED */	
    /*border:1px;*/
    /*border-style:solid;*/
    /*border-color:#B2B2B2;*/	    
}

#content {
    /*float:right; set to float:right for sidebar on left, and float:left for sidebar on right. Required so sidebar div sits next content div  */
    /*width:710px;  any px, but sum of content and sidebar widths must be less than or = to container div width  */
    padding:20px 0px 10px 0px;  /* I added */
    }

/*#sidebar{*/
   /*  float:left;  like the content it is floated left, it could also be floated right - either is OK  */
   /* width:207px;   any px, but sum of content and sidebar widths must be less than or = to container div width */
   /* margin: 0px 15px 0px 0px;  I added this, the first 10 doesn't seem to affect top margin of sidebar, very strange */
    /*padding: 10px 5px 10px 5px;    */
    /*background: #F9F5F5;  ONLY NEED THIS IF NOT USING THE TILING BACKGROUND IMAGE IN CONTAINER was  #fff then #F8F4F4 */
   /* }*/

#footer {
    clear:both; /* clears the two floated divs to ensure the footer sits below them - we could use clear:left if wanted  */
}
.imageborder {border:1px solid #999999;}
.imageborderdark {border:1px solid #333333;}
.imageleft {float: left; margin-right: 14px; margin-left: 4px; margin-bottom: 10px;}
.imageright {float: right; margin-left: 14px; margin-right: 4px; margin-bottom: 10px;}
.table-links {border-top:1px solid #999999;}

h1 {font-size: 1.5em; padding-bottom: 12px; color: #4F0000;}
h3 {font-size: 1.1em; padding-bottom: 12px; color: #4F0000;}

.bullets {text-align:left; font-size: 1.3rem; padding-left: 0;}

/************************************************************************************
CSS for text links for LIGHT backgrounds
*************************************************************************************/
a.link-light:link {
	color: #255064; /*--was #333 ---*/
    	text-decoration: none;
	padding: 3px 10px 3px 10px;
	line-height: 38px;
	border: 1px solid #999;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	}
a.link-light:visited {
	color: #255064;
	text-decoration: none;
	padding: 3px 10px 3px 10px;
	line-height: 38px;
	border: 1px solid #999;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	}

a.link-light:hover {
	color: #255064;
	text-decoration: none;
	background-color: #d3d3d3;
	padding: 3px 10px 3px 10px;
	line-height: 38px;
	border: 1px solid #999;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	}
a.link-light:active {
	color:#255064;
	text-decoration: none;
	padding: 3px 10px 3px 10px;
	line-height: 38px;
	border: 1px solid #999;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	}

/************************************************************************************
CSS for text links for DARK backgrounds
*************************************************************************************/
a.link-dark:link {
	color: #f5f5f5;
	text-decoration: none;
	padding: 3px 10px 3px 10px;
	line-height: 38px;
	border: 1px solid #999;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-color: #e1e1e1;
	}
a.link-dark:visited {
	color: #f5f5f5;
	text-decoration: none;
	padding: 3px 10px 3px 10px;
	line-height: 38px;
	border: 1px solid #999;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-color: #e1e1e1;
	}

a.link-dark:hover {
	color: #f5f5f5;
	text-decoration: none;
	background-color: #2f9abf;
	padding: 3px 10px 3px 10px;
	line-height: 38px;
	border: 1px solid #999;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-color: #e1e1e1;
	}
a.link-dark:active {
	color: #f5f5f5;
	text-decoration: none;
	padding: 3px 10px 3px 10px;
	line-height: 38px;
	border: 1px solid #999;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-color: #e1e1e1;
	}