/* CSS Document */

/* reset*/

html
body			{background-color:#ffffff;}


/* headings*/


/* text elements*/
h1			{font:"Times New Roman", Times, serif; font-size:32px; font-weight:bold;color:#000;}
h2			{font:"Times New Roman", Times, serif; font-size:20px; font-weight:bold;color:#ffffff;	}
h3			{font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:normal;color:#666; text-decoration: none;}
h4			{font: 14px/20px Arial, Helvetica, sans-serif; color:#999999;}
h5			{font:"Times New Roman", Times, serif; font-size:20px; font-weight:bold;color:#000; margin-bottom: -10px}
h6 			{font: 13px/17px Arial, Helvetica, sans-serif; font-weight:normal;color:#06C;}
p			{font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #000;	}

label 			{font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:normal;color:#666;}

mark			{color:#fff200; background: black;}

p#p18 			{font-weight: bold;font-size: 18px; margin-bottom: -18px;}
p#p20 			{font-weight: bold;font-size: 20px; margin-bottom: -16px;}
p#p24 			{font-weight: bold;font-size: 24px; margin-bottom: -30px;}
p#p30 			{font-weight: bold;font-size: 30px; margin-bottom: -12px;}
p#p36 			{font-weight: bold;font-size: 36px; margin-bottom: -10px;}


h4.shifted 		{margin-left: 30px;}


/* bullets for ul lists*/

/* once uploaded to Filezilla, these bullets disappear! Check your phone to see if they're OK
Also, use <ul id="properbullets"> to start the list*/

#properbullets li {
	list-style-type: disc;
	list-style-position: outside;
    	margin-left: 0.5em; /* keep this the same as margin-left on the next bit*/
    	margin-right: 0.2em;/* dunno why this is here*/
	margin-bottom: 0.2em;}/* this is the gap between bulleted items*/

#properbullets li:before {
	content: ""; float: left;
	margin-left: -.5em;}
	

	
	
	



/* images*/
.image-frame		{padding: 10px; border: 1px #ccc solid; margin: 45px 20px 10px 0px; width: auto; float: left; clear: right;
			/* Add box-shadow */box-shadow:2px 2px 3px #aaaaaa;}
			
.image-frame-2		{padding: 10px; border: 1px #ccc solid; margin: 10px 20px 10px 0px; width: auto; float: left; clear: right; 			
			/* Add box-shadow */box-shadow:2px 2px 3px #aaaaaa;}

.image-frame-3		{padding: 10px; border: 1px #ccc solid; margin: 10px; width: auto; float: right; clear: left;
			/* Add box-shadow */box-shadow:2px 2px 3px #aaaaaa;}
			
.image-frame-4		{padding: 10px; border: 1px #ccc solid; margin: 10px; width: auto; float: right; clear: left;
			/* Add box-shadow */box-shadow:2px 2px 3px #aaaaaa;}


/* horizontal rules */

hr.fish-hook-ends	{height: 30px;
			border-style: solid; 
			border-color: #0581d6; 
			border-width: 1px 0 0 0; 
			border-radius: 20px;
			margin-bottom: -10px;
			} 
hr.fish-hook-ends:before {display: block; 
			content: ""; 
			height: 30px; 
			margin-top: -31px; 
			border-style: solid; 
			border-color: #0581d6; 
			border-width: 0 0 1px 0; 
			border-radius: 20px;
			}
hr.graduated		{border: 0; 
			height: 1px; 
			background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
			background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
			background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
			background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
			}

/* misc*/

.footer-text 		{font-size:9px; font-family:Arial, Helvetica, sans-serif; font-style:normal; color:#666; text-align:center;}

.freshly-picked-dates 	{font-family:Arial, Helvetica, sans-serif; font-size: 13px;font-weight:bold;color: #ffffff;}

.freshly-picked-dates-2 {font-family:Arial, Helvetica, sans-serif;font-size: 13px; font-weight:normal;color:#949d44;} 

.countdown 		{font: "times new roman" 32px #fff; margin-top: 50;	padding:15 0 0 0;}

.heading-two-in-black 	{font:"Times New Roman", Times, serif; font-size:20px; font-weight:bold;color:#000; text-decoration: none;}

.heading-four-in-black	{font: 14px/20px Arial, Helvetica, sans-serif; color:#000;}

.columns-2		{columns:3000px 2; 
				-webkit-columns:300px 2; /* Safari and Chrome */
				-moz-columns:300px 2; /* Firefox */}

.columns-2-wider		{columns:3000px 2; 
				-webkit-columns:600px 2; /* Safari and Chrome */
				-moz-columns:600px 2; /* Firefox */}				
				
.black			{color:#000;}

.white			{color:#ffffff;}

.blue			{color:#0581d6;}

.dark-blue		{color:#003d7c;}

.light-blue		{color:#8ab6d5;}

.orange			{color:#ff6b15;}

.red			{color:#ed1c24;}

.green			{color:#445f2c;}

.yellow			{color:#fff200;}

.pink			{color: #e34c8f}

.NTpurple		{color: #bda8be}

.purple			{color: #790a82}

.pirate-red		{color: #df7643}

.pale-green		{color: #8cc55a}

.corsley-purple		{color: #bc037b}


.handlee		{font-size: 16px; font-family: 'Handlee', cursive; color: #82517f;}

.handlee-42		{font-size: 42px; font-family: 'Handlee', cursive; color: #882517f;}

.handlee-37		{font-size: 37px; font-family: 'Handlee', cursive; color: #82517f;}

.handlee-28		{font-size: 28px; font-family: 'Handlee', cursive; color: #882517f;}

.handlee-24		{font-size: 24px; font-family: 'Handlee', cursive; color: #82517f;}

.handlee-18		{font-size: 18px; font-family: 'Handlee', cursive; color: #82517f;}

.handlee-14		{font-size: 14px; font-family: 'Handlee', cursive; color: #82517f;}


.h3-36			{font-family:Arial, Helvetica, sans-serif; font-size:36px;}

.h3-34			{font-family:Arial, Helvetica, sans-serif; font-size:34px;}

.h3-28			{font-family:Arial, Helvetica, sans-serif; font-size:28px;}

.h3-24			{font-family:Arial, Helvetica, sans-serif; font-size:24px;}

.h3-20			{font-family:Arial, Helvetica, sans-serif; font-size:20px;}

.h3-16			{font-family:Arial, Helvetica, sans-serif; font-size:16px;}

.dotted			{border-top: 1px dotted #999999;}

.dashed			{border-top: 1px dashed #999999;}

.text-indent 		{text-indent: 30px;} 


/* containers*/


#outer			{width: 1000px; background-color:#FFF; margin:0 auto;	}

#wrapper		{width: 900px; margin: 10px auto 0px auto; background-color:#fff;	}

#header			{width: 600px; height: 170px; float: left; padding-top: 20px;	}

#topnav			{clear: both; 	}

#topnav ul		{margin: 10px 0; padding: 10px; border-top: 1px #999999 solid; border-bottom: 1px #999999 solid;	}
#topnav ul li		{display: inline; padding: 20px;}
#topnav ul li a		{text-decoration: none;	}

#topnav a:link 		{color:#000;}
#topnav a:visited 	{color:#999;}
#topnav a:hover 	{color:#036;font-weight:bold;}

#archive 		{width: 800px;float: left; font:"Times New Roman", Times, serif; font-size:32px; font-weight:bold;color:#000; margin-top: 20px}
#archive ul		{padding: 0px;}
#archive ul li		{display: inline; margin-right: 30px;}

#archive a:link 	{font: 14px/20px Arial, Helvetica, sans-serif; font-weight:normal;color:#8cb9d8;text-decoration: none; }
#archive a:visited 	{color:#8cb9d8;}
#archive a:hover 	{color:#8cb9d8;font-weight:bold;}
#archive a:active 	{color:#8cb9d8;}


#content		{width: 600px;float: left; margin-bottom: auto;}

#content-notice		{width: 600px;float: left;  list-style-type: disc}

#content-notice-for-columns		{width: 1000px;float: left;}

#content-notice-2-col 	{-webkit-column-count: 2; /* Chrome, Safari, Opera */
			-moz-column-count: 2; /* Firefox */
			column-count: 2;
			
			-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
			-moz-column-gap: 40px; /* Firefox */
			column-gap: 40px;
			
			-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
			-moz-column-rule-style: solid; /* Firefox */
			column-rule-style: solid;

			-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
			-moz-column-rule-width: 1px; /* Firefox */
    			column-rule-width: 1px;}
    			
#content-notice-2-col-text 	{-webkit-column-count: 2; /* Chrome, Safari, Opera */
			-moz-column-count: 2; /* Firefox */
			column-count: 2;
			
			-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
			-moz-column-gap: 40px; /* Firefox */
			column-gap: 40px;
			
			-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
			-moz-column-rule-style: solid; /* Firefox */
			column-rule-style: solid;

			-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
			-moz-column-rule-width: 1px; /* Firefox */
    			column-rule-width: 1px;}    			

#content-notice-2	{width: 560px;float: left; padding: 0px 20px 0px 20px; margin-bottom: 20px; margin-top: 20px; list-style-type: none;border-style: dashed; border-width: 1px;}

#content-notice-red	{width: 560px;float: left; padding: 0px 20px 0px 20px; margin: 20px 0px 30px 0px; background-color: #ed1c24; text-align: left; }

#content-notice-grey-small	{width: 380px; clear: left; float: left; padding: 0px 0px 0px 20px; margin: 0px 0px 20px 0px; list-style-type: none; background-color: #ccc; text-align: left; }

#content-notice-black-small	{width: 250px; clear: left; float: left; padding: 0px 0px 0px 40px; margin: 20px 100px 0px 100px; background-color: black; text-align: center; }

#content-notice-black-small-2	{width: 300px; clear: left; float: left; padding: 20px 20px 20px 20px; margin: 20px 150px 20px 100px; background-color: black; text-align: center; }

#content-notice-black	{width: 580px;float: left; padding: 0px 20px 0px 20px; margin-bottom: 20px; margin-top: 20px; list-style-type: none; background-color: #000; text-align: left; }

#content-notice-white	{width: 600px;float: left; list-style-type: none; margin-top: 20px; background-color: #fff;}

#content-notice-cross-keys-grey	{width: 560px; float: left; padding: 0px 20px 0px 20px; margin-bottom: 20px; margin-top: 20px; list-style-type: none; background-color: #aeb3b4; text-align: center; }

#content-notice-cross-keys-light-purple	{width: 560px; float: left; padding: 0px 20px 0px 20px; margin-bottom: 20px; margin-top: 20px; list-style-type: none; background-color: #786090;}

#content-cross-keys-pics	{width: 560px; height: 400px; margin-top: 20px; float: left;}

#content-notice-green		{width: 560px;float: left; padding: 0px 20px 0px 20px; margin-top: 20px; margin-bottom: 20px; list-style-type: none; background-color: #445f2c; text-align: right; }

#content-notice-white-with-border	{width: 580px; clear: right; float: right; padding: 0px 10px 0px 10px; margin: 20px 0px 20px 0px; list-style-type: none; background-color: #fff; text-align: left; border-style: dashed; border-width: 1px;}

#content-notice-white-with-purple-border {width: 580px; clear: right; float: right; padding: 0px 10px 0px 10px; margin: 20px 0px 20px 0px; list-style-type: none; background-color: #fff; text-align: left; border-style: dashed; border-width: 1px; border-color: purple;}

#content-notice-white-with-border-250px	{width: 250px; clear: right; float: right; padding: 0px 10px 0px 10px; margin: 10px 0px 10px 0px; list-style-type: none; background-color: #fff; text-align: left; border-style: dashed; border-width: 1px;}

#content-notice-white-with-border-250px-Len-White-Trust	{width: 275px; clear: right; float: left; padding: 0px 10px 0px 10px; margin: 10px 0px 10px 0px; list-style-type: none; background-color: #fff; text-align: left; border-style: dashed; border-width: 1px;}

#content-notice-white-with-border-250px-Housing-Survey	{width: 275px; clear: left; float: right; padding: 0px 10px 0px 10px; margin: 10px 0px 10px 0px; list-style-type: none; background-color: #fff; text-align: left; border-style: dashed; border-width: 1px;}

#content-notice-grey-with-border	{width: 250px; clear: right; float: right; padding: 0px 10px 0px 10px; margin: 10px 0px 20px 0px; list-style-type: none; background-color: #f9bc32; text-align: left;}

#content-notice-gold			{width: 580px; float: right; padding: 0px 10px 20px 10px; margin: 20px 0px 20px 0px; list-style-type: none; background-color: #bd9a59; text-align: center;}

#content-notice-lilac			{width: 560px; float: left; padding: 0px 20px 0px 20px; margin: 0px 0px 0px 0px; list-style-type: none; background-color: #999dbc; text-align: left;}

#content-corsley-show-subscribe		{width: 560px; clear: right; float: right; padding: 20px 20px 0px 20px; margin: 20px 0px 20px 0px;  background-color: #d4d796; text-align: left;}

#content-corsley-show-steward		{width: 250px; clear: right; float: right; padding: 0px 10px 0px 10px; margin: 20px 0px 20px 10px;  background-color: #d4d796; text-align: left;}

#content-corsley-litter			{width: 250px; clear: right; float: right; padding: 10px 10px 0px 10px; margin: 20px 0px 20px 0px;  background-color: #9d5b74; text-align: center;}

#content-corsley-wildflower		{width: 250px; clear: right; float: right; padding: 10px 10px 0px 10px; margin: -20px 0px 20px 20px;  background-color: #4a531e; text-align: center;}

#content-text-column-left		{width: 380px; clear: left; float: left; padding: 0px 10px 0px 10px; margin: 0px 0px 0px 0px; list-style-type: none; text-align: left; border-style: dashed; border-width: 1px;}

#content-text-column-right		{width: 440px; clear: right; float: right; padding: 0px 10px 0px 10px; margin: 0px 0px 50px 20px; list-style-type: none; text-align: left; border-style: dashed; border-width: 1px;}

#content-dustbin-days-top		{width: 250px; clear: right; float: right; padding: 0px 10px 0px 10px; margin: 20px 0px 20px 0px;  background-color: #68a9f3; text-align: left; }

#content-dustbin-days-bottom		{width: 210px; clear: right; float: right; padding: 0px 10px 0px 10px; margin: -5px 10px 20px 10px; list-style-type: none; background-color: #c4dbf4; text-align: left; box-shadow: 5px 5px 5px #4a77aa;}

#content-corsley-show	{width: 580px; float: left; padding: 0px 10px 0px 10px;  margin: 20px 0px 20px 0px;list-style-type: none; background-color: #d4d796; text-align: left;}

#content-notice-grey	{width: 250px; float: right; padding: 0px 10px 0px 10px; margin: 20px 0px 20px 0px; list-style-type: none; background-color: #ccc; text-align: left;}

#content-notice-yellow	{width: 560px; float: left; padding: 0px 20px 0px 20px; margin: 20px 0px 20px 0px; list-style-type: none; background-color: #fde700; text-align: left;}

#content-notice-network-blue 	{width: 560px;float: left; padding: 10px 20px 5px 20px; margin-top: 20px; margin-bottom: 20px; list-style-type: none; background-color: #014d6d; text-align: left;}

#content-notice-NT-purple	{width: 560px;float: left;  padding: 10px 20px 15px 20px; margin: 20px 0px 20px 0px; list-style-type: none; background-color: #410546; text-align: left; }

#picture-container	{clear: both; width: 580px; height: auto; z-index: 0;}

#text-floating-over-picture-1	{width: 560px; float: left; z-index: 99; margin: -600px 0px 0px 20px; text-align: center;}

#text-floating-over-picture-2	{width: 560px; float: left; z-index: 10; margin: -100px 0px 50px 20px; text-align: center;}

---------------------------------------------------------------


* {
  box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 30%;
  padding: 5px;
  height: 400px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}


 

---------------------------------------------------------------

#content-small			{width: 400px;float: left; margin-bottom: 25px;}
#content-small a:link 		{font: 14px/20px Arial, Helvetica, sans-serif; font-weight:normal;color:#8cb9d8;text-decoration: none; 	}
#content-small a:visited 	{color:#8cb9d8;}
#content-small a:hover 		{color:#8cb9d8;font-weight:bold;}
#content-small a:active 	{color:#8cb9d8;}

#content-small tr	{text-align: left; vertical-align: top;}
#content-small td	{width: 172px; padding-bottom: 10px;}
#content-small table	{width: 400px; height: 295px;}


#content textarea	{width: 220px;}

#content a:link 	{font: 14px/20px Arial, Helvetica, sans-serif; font-weight:normal;color:#8cb9d8;text-decoration: none; 	}
#content a:visited 	{color:#8cb9d8;}
#content a:hover 	{color:#8cb9d8;font-weight:bold;}
#content a:active 	{color:#8cb9d8;}

#content-notice-red a:link 	{font: 16px/20px Arial, Helvetica, sans-serif; font-weight:normal;color:#fbfe02;text-decoration: none; 	}
#content-notice-red a:visited 	{color:#000000;}
#content-notice-red a:hover 	{color:#000000;font-weight:bold;}
#content-notice-red a:active 	{color:#000000;}

#content-notice-asda-green a:link 	{font: 16px/20px Arial, Helvetica, sans-serif; font-weight:normal;color:#ffffff;text-decoration: none; 	}
#ccontent-notice-asda-green a:visited 	{color:#ffffff;}
#ccontent-notice-asda-green a:hover 	{color:#ffffff;font-weight:bold;}
#content-notice-asda-green a:active 	{color:#ffffff;}


#content-notice-network-blue a:link 	{font: 14px/16px Arial, Helvetica, sans-serif; font-weight:normal;color:#8ab6d5;text-decoration: none; 	}
#content-notice-network-blue a:visited 	{color:#8cc55a;}
#content-notice-network-blue a:hover 	{color:#000000;font-weight:bold;}
#content-notice-network-blue a:active 	{color:#000000;}

#content-notice-grey-with-border a:link 	{font: 14px/20px Arial, Helvetica, sans-serif; font-weight:normal;color:#0581d6;text-decoration: none; 	}
#content-notice-grey-with-border a:visited 	{color:#8cb9d8;}
#content-notice-grey-with-border a:hover 	{color:#8cb9d8;font-weight:bold;}
#content-notice-grey-with-border a:active 	{color:#8cb9d8;}

#content-corsley-show-subscribe	 a:link 	{font: 14px/20px Arial, Helvetica, sans-serif; font-weight:normal;color:#bd007b;text-decoration: none; 	}
#content-corsley-show-subscribe	 a:visited 	{color:#bd007b;}
#content-corsley-show-subscribe	 a:hover 	{color:#bd007b;font-weight:bold;}
#content-corsley-show-subscribe	 a:active 	{color:#bd007b;}

#content-corsley-show	 	a:link 		{font: 16px/20px Arial, Helvetica, sans-serif; font-weight:normal;color:#bd007b;text-decoration: none; 	}
#content-corsley-show	 	a:visited 	{color:#bd007b;}
#content-corsley-show	 	a:hover 	{color:#bd007b;font-weight:bold;}
#content-corsley-show	 	a:active 	{color:#bd007b;}

#content-medium			{width: 619px;float: left; margin-bottom: 40px;}
#content-medium a:link 		{font: 14px/20px Arial, Helvetica, sans-serif; font-weight:normal;color:#8cb9d8;text-decoration: none; 	}
#content-medium a:visited 	{color:#8cb9d8;}
#content-medium a:hover 	{color:#8cb9d8;font-weight:bold;}
#content-medium a:active 	{color:#8cb9d8;}

#content-notice-cross-keys-grey a:link 		{font-size: 18px; Arial, Helvetica, sans-serif; font-weight:bold;color:#7270b2;text-decoration: none; 	}
#content-notice-cross-keys-grey a:visited 	{color:#7270b2;}
#content-notice-cross-keys-grey a:hover 	{color:#000000;}
#content-notice-cross-keys-grey a:active 	{color:#000000;}


#content-wide		{width: 900px; float: left;}

#content-wide a:link 	{font: 14px/20px Arial, Helvetica, sans-serif; font-weight:normal;color:#8cb9d8; list-style-type: none; text-decoration: none;}
#content-wide a:visited {color:#8cb9d8;}
#content-wide a:hover 	{color:#8cb9d8;font-weight:bold;}
#content-wide a:active 	{color:#8cb9d8;}

/*

*/
#black-border		{font: 14/20px Arial, Helvetica, sans-serif; font-weight: normal; color: #000000; 
			background-color: #ffffff;
			padding: 10px 10px 10px 10px;
			width: 570px;
			border: 5px;
			border-style: solid;
			border-width: 5px;
			border-color: #000000;
			}

#block-of-text-on-right	{width:400px;
			float: right;
			background-color:#ffffff;
			margin-top: 60px;
			clear: all;}
			
#whitbourne-chapel-times	{width:400px;

			float: left;
			background-color:#ccc;
			clear: all;
			padding: 0px 25px 25px 25px;
			margin-right: 25px;}
			
#map			{width: 425px;
			margin: -18px -300px 0px 0px;
			height: auto;
			border: none;
			float: right;}
			
#whitbourne-map		{width: 425px;
			margin: 0px 0px 0px 0px;
			height: auto;
			border: none;
			float: right;}
			
#church-contacts	{width: 100%;
			float: left;}			
		
table, th, td 		{border: 1px solid black; border-collapse: collapse; margin-bottom: 25px;}
th, td 				{padding: 5px; text-align: left;}
tr:nth-child(even) 	{background: #fba603;}

#t01			{width: 600px; border: 1px solid; margin-bottom: 0px; background: #fff}


#content-text-column-left

table			{width: 600px; border-collapse:collapse; font: 14px/20px Arial, Helvetica, sans-serif; color:#fff;}
tr:nth-child(even) 	{background: #d7d7d7}

			
#pc-query-box		{width:400px;
			float: right;
			transform:rotate(4deg);
				-ms-transform:rotate(4deg); /* IE 9 */
				-webkit-transform:rotate(4deg); /* Safari and Chrome */
			}
#right-hand-box		{width: 250px; float:right; padding: 0px 10px 0px 10px; border: 1px dashed;}
#right-hand-box	 a:link 	{font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:normal;color:#445f2c;text-decoration: none;}
#right-hand-box	 a:visited 	{color:#445f2c;}
#right-hand-box	 a:hover 	{color:#445f2c;font-weight:bold;}

			
#freshly-picked		{width: 250px; float:right; padding: 0 10px 0 10px; margin-top: 20px; background-color:#445f2c;}
#freshly-picked ul	{margin-left: 0px;	}
#freshly-picked ul li 	{margin-left:-40px;	}
#freshly-picked  a:link 	{font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:normal;color:#8cb9d8;text-decoration: none;}
#freshly-picked  a:visited 	{color:#8cb9d8;}
#freshly-picked  a:hover 	{color:#8cb9d8;font-weight:bold;}


#countdown		{width: 185px; float: right;  height: 100px; padding: 25px; background-color:#bd007b;  text-align: center; box-shadow: 5px 5px 15px #999;}

#more-events 		{clear: both; width: 250px; float:right; background-color:#ffffff; padding: 5px 10px 0px 10px; margin-left: 10px; margin-right: -10px;}

#more-events a:link 	{font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:normal;color:#8cb9d8;text-decoration: none;}
#more-events a:visited 	{color:#8cb9d8;}
#more-events a:hover 	{color:#8cb9d8;font-weight:bold;}

#blue-box		{width: 600px;background-color:#0581d6; float: left; clear: both; margin-bottom: auto;list-style-type: none;}

#white-box		{width: 600px;background-color: #fff; float: left; clear: left; margin-bottom: auto;list-style-type: none;}

#gallery 		{width: 600px; float: left; display: inline;}

#footer			{clear: both; border-top: #999 1px dotted; padding: 20px; width: 860px;}

#footer-container	{clear: both; margin-left: -50px; width: 1000px; height: 241px; z-index: 0;}


/*button on image*/

/* Container needed to position the button. Adjust the width as needed */
.container 		{position: relative; width: 100%; max-width: 220px;clear: left; float: right; width: 220px; margin-left: 20px; }

/* Make the image responsive */
.container 		img {width: 100%; height: auto;}

/* Style the button and place it in the middle of the container/image */
.container .btn 	{position: absolute; 
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			background-color: #555;
			color: white;
			font-size: 16px;
			padding: 12px 24px;
			border: none;
			cursor: pointer;
			border-radius: 5px;}

.container .btn:hover	{background-color: black;}


/*images*/

.clock			{width: 200px; float: right; clear: right; margin-top: 170px; text-align: right; color: #707070; font-family:Arial, Helvetica, sans-serif; font-size:13px;}

.clock-index-page-only	{width: 200px; float: right; clear: right; margin-top: 25px; margin-bottom: 10px;text-align: right; color: #707070; font-family:Arial, Helvetica, sans-serif; font-size:13px;}

.clock-avoiding-pics	{width: 150px; float: right; clear: right; text-align: right; color: #707070; font-family:Arial, Helvetica, sans-serif; font-size:13px;}

.vertical-pic		{width: 231px; height: 560px; float: right; margin-left: 20; margin-bottom: 25px;}

.grapevine		{float: left; width: 150px; height: 212px; margin: 15px 60px 30px 30px; box-shadow: 5px 5px 5px #979797;}

.polaroid-pub-pic-left	{width:300px;
			padding:10px 10px 15px 10px;
			text-align: center;
			border:1px solid #BFBFBF;
			background-color:white;
			position: relative;
			top: -80px;
			left: -20px;
			/* Add box-shadow */
			box-shadow:2px 2px 13px #878b8c;
			z-index: 1;}
			
.polaroid-pub-pic-right	{width:300px;
			padding:10px 10px 15px 10px;
			text-align: center;
			border:1px solid #BFBFBF;
			background-color:white;
			position: relative;
			top: -330px;
			left: 20px;
			/* Add box-shadow */
			box-shadow:2px 2px 13px #878b8c;
			z-index: 0;}
			
.rotate_left_pub	{float:right;
			-ms-transform:rotate(7deg); /* IE 9 */
			-webkit-transform:rotate(7deg); /* Safari and Chrome */
			transform:rotate(7deg);
			margin-top: 50px;
			margin-left: 40px;
			margin-bottom: -100px;}
			
.rotate_right_pub	{float:left;
			-ms-transform:rotate(-8deg); /* IE 9 */
			-webkit-transform:rotate(-8deg); /* Safari and Chrome */
			transform:rotate(-8deg);
			margin-top: 100px;
			margin-bottom: 4px;}


.polaroid		{width:195px;
			padding:15px 15px 10px 15px;
			text-align: center;
			border:1px solid #BFBFBF;
			background-color:white;
			/* Add box-shadow */
			box-shadow:2px 2px 3px #aaaaaa;}
			
.polaroid-small		{width:195px;
			padding:10px 10px 8px 10px;
			text-align: center;
			border:1px solid #BFBFBF;
			background-color:white;
			margin-top: 25px;
			/* Add box-shadow */
			box-shadow:2px 2px 3px #aaaaaa;
			z-index: 2;}
			
.rotate_left_small	{float:right;
			-ms-transform:rotate(7deg); /* IE 9 */
			-webkit-transform:rotate(7deg); /* Safari and Chrome */
			transform:rotate(7deg);
			margin-right: 60px;}

.rotate_left		{float:left;
			-ms-transform:rotate(7deg); /* IE 9 */
			-webkit-transform:rotate(7deg); /* Safari and Chrome */
			transform:rotate(7deg);
			margin-top: 50px;
			margin-left: 40px;}

.rotate_right		{float:left;
			-ms-transform:rotate(-8deg); /* IE 9 */
			-webkit-transform:rotate(-8deg); /* Safari and Chrome */
			transform:rotate(-8deg);
			margin-top: 100px;}
			
.footer-text-box	{z-index: 2; background-color: none; margin-top: -35px;}

.picture-overlaid-with-text {z-index: 2; padding: 20px 20px 60px 20px; background-color: none; margin-top: -299px;}
			

/*sliders and stuff*/


/*This is for the fade in-fade out banner image with the roller blind text*/

/*This bit determines the size of the area to be filled with your image âIf it's not the same size as the image, the image will be cropped*/
#s3slider {
    width: 950px; /* important to be same as image width */
    height: 300px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
	
}
 
 /*I have no idea what this is!*/
#s3sliderContent {
    width: 950px; /* important to be same as image width or wider */
    position: absolute; /* important */
    top: 0; /* important */
    margin-left: 0; /* important */
}

#s3sliderContent ul, li {list-style-type: none;}

  /*I have no idea what this is!*/
.s3sliderImage {
    float: left; /* important */
    position: relative; /* important */
    display: none; /* important */
}
 
 /* This bit is for the uppy-downy slider*/
.s3sliderImage span {
    position: absolute; /* important */
	right: 0;
    font: 14px/20px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 400px;
    background-color: #000;
    filter: alpha(opacity=65); /* here you can set the opacity of box with text - for IE v5 6 7 8 9*/
    -moz-opacity: 0.65; /* here you can set the opacity of box with text - for Firefox oder than v0.9 */
    -khtml-opacity: 0.65; /* here you can set the opacity of box with text - for Safari v1.x */
    opacity: 0.65; /* this is the opacity of the roller blind - modern - for all versions of IE Safari Firefox Opera and Chrome*/
    color: #fff;
    display: none; /* important */
    top: 0; /*
        if you put top: 0;  -> the box with text will be shown
                                at the top of the image
        if you put bottom: 0;  -> the box with text will be shown
                                at the bottom of the image
    */
}
 
.clear {
    clear: both;
}

#s3slider	{margin-bottom: 20px; margin-left: -40px;	}

/*these are the attributes (colour, border, etc) of the menu bar*/
#menu-bar {
  width: 900px;
  border-top: 1px #999999 solid; 
  border-bottom: 1px #999999 solid;
  background: #FFFFFF;
  position:relative;
  z-index:1;
  margin-top: -20px;
}
/*these are the size/position attributes of the list items in the menu bar*/
#menu-bar li {
  margin: 0px 0px 5px 0px;
  float: left;
  position: relative;
  list-style: none;
  width: 128px;
  text-align: center;
}
/*these are the text attributes of the menu bar (but NOT the drop-down menu)*/
#menu-bar a {
  font-family: 'times new roman';
  font-size: 18px;
  color: #000;
  text-decoration: none;
  display: block;
  padding: 5px;
  margin: 5px;
  margin-bottom: 0px;
}

/*viv put this in to make the 'hover' action bold*/
#menu-bar li:hover 	{font-weight:bold;}


/*these are the attributes of the AREA OF HOVER of the drop-down menu*/
#menu-bar ul a:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

/*these are the attributes of the drop-down menu AREA*/
#menu-bar ul {
  background: #ffffff;
  display: none; /*this is to hide the dropdown boxes until they're clicked on*/
  margin: 0; /*this is how far the dropdown boxes are away from the menu item*/
  padding: 0; 
  position: absolute; /*if this relative, it pushes the bottom line rule on the menu bar down when you click on the dropbox*/ 
  box-shadow: 5px 5px 15px #999;
}

/*this bit makes the drop-downs appear - without it there's no drop-down!*/
#menu-bar li:hover > ul {
  display: block;
}

/*these are the TEXT attributes of the drop-down menu*/
#menu-bar ul a {
  color:#858585 !important;
  font-size:15px;
  font-family:'times new roman';
  font-weight: normal; /*this ensures that bold on hover works*/
  text-align: left;
}

/*this bit affects where the whole menu bar sits*/
#menu-bar {display: inline-block;padding: 0px 0px 0px 0px;}

html[xmlns] 

#menu-bar {display: block;}