/* Winter CSS for Pillaton Village Website */
/* Change log:
JW, 2012-12-17. Initial design based on main.css as at this date.
JW, 2013-10-12. Reduced rainfall_table margin from 15px to 10px to keep the tables three abreast.
JW, 2014-04-23. Added br.clear_left to cater for Neighbourhood Watch layout.
JW, 2014-08-10. Added lead_photo_right class for the Neighbourhood Watch logo on the Index page in particular.
JW, 2014-10-08. Reduced rainfall_table margin from 10px to 5px to prevent second table spilling on to next line.
JW, 2014-11-05. Added box_320 class to cater for 320 x 240 images that are occasionally sent in.
JW, 2014-11-16. Added shift_more_right class to prevent bullets overlapping news_page_lead_photo image.
JW, 2015-03-22. Changed a[href^='http://'] to a[href^='http'] so that https refs are also handled in same way.
JW, 2015-12-21. Order of pdf and external link detection swapped so that the latter shows in preference where both apply.
JW, 2016-08-05. As part of the move to Responsive Web Design I added different background colours to mm and ins rainfall 
							tables also catered for table caption. Reduced size of Updated and Contact fonts and changed width to try 
							and avoid text wrapping. Added classes to handle council_item_list and council_list_items. These replace 
							the tables that have been used to date to hold minutes and agendas. Set up Diary classes to use Definition Lists
							in place of tables.
JW, 2016-08-22. Fine tuned the council_item_list values.
. . . end of change log  */

/* To change colour scheme quickly, search and replace refs to #0000ff; (blue) and #cccccc; (silver). 
	Also revise the .gif files for Pillaton logo, border tile and pair of chevrons. */

body {
	font: 100% "Trebuchet MS", Helvetica, Tahoma, Verdana, Arial, sans-serif;
	max-width: 960px;
	margin: 0; 
	padding: 0;
	color: #333333;  /* grey */
	background: #ffffff;
	}
	
h1, h2 {
	border: 1px solid #0000ff; /* blue */
	}
	
h1 {
	font-size: 150%;
	color: #000099;	/* dark blue */
	margin: 1em 0;
	padding: 2px;
	background: #cccccc; /* silver */
	}

	/* IE6 Fix */
	* html h1 {margin: 0 0 1em 0;}

h2 {
	font-size: 125%;
	color: #000099;	
	margin: 2em 0 0 0;
	border: none;
	border-bottom: 3px solid #0000ff; /* blue */
	}

h3 {
	color: #000099;
	font-size: 125%;
	margin: 1em 0 0 0;
	}

h4 {	 
	font-size: 100%;
	margin: 0.5em 0 0 0;
	}

hr {
	color: #0000ff; /* blue */
	background: #0000ff; /* blue */
	height: 0.2em;
	margin: 1em 0 0 0;
	padding: 0;
	border: 0;
	clear: both;
	}

p {
	line-height: 1.5em; 
	margin: 1em 0;
	}
	
blockquote {
	float: left;
	width: 50%;
	background: #ffffff url(index_files/open-quotes.gif) no-repeat left top;
	margin: 1em 0 0 0;
	padding: 0 0 0 4em;
	}

a[href$='.pdf'] {
	background-image: url(index_files/pdficon_small.gif);
	background-repeat: no-repeat;
	background-position: right top;
	padding: 2px 20px 2px 2px;
	}
	
a[href^='http'] {
	background-image: url(index_files/ext_link.gif);
	background-repeat: no-repeat;
	background-position: right center;
	padding: 0 14px 0 0;
	margin: 0 2px 0 0;
	}

ol {
	list-style-position: inside;
	list-style: decimal;
	margin: 0 0 0 2em;
	}
	
ul {
	list-style-position: inside;
	list-style: disc;
	margin: 0 0 0 2em;
	}

.ul_alpha {
	list-style: lower-alpha;
	}

table {
	margin: 2em 0 0 0; 
	}

	table caption {
		color: #000099;   /* dark blue */
		font-weight: bold; 
		text-align: left;
		}

th {
	color: #000099;   /* dark blue */
	font-weight: bold; 
	text-align: left;
	padding: .2em;
	}	

td {
	vertical-align: top;
	padding: 0.5em;
	border-color: #ffffff; /* white */ 
	border-width: 0 1px 1px 0;
	border-style: none;
	}

div#mast_head_box {
	float: left;
	margin: -22px 5px 10px -22px;
	width: 148px;
	height: 108px;
	background: url(index_files/pillaton_logo_blue.gif) no-repeat center center;
	}
	
	/* IE6 fix */
	* html div#mast_head_box {
	margin-left: -11px; 
	}

#inner {
	margin: 20px;
	background-color: #ffffff;
	border: 4px solid #cccccc; /* silver */
	}

#outer {
	margin: 0;
/*	background: #00ff00; */
	background: url(index_files/silver_blue_1.gif);
	border: 5px solid #0000ff; /* blue */
	zoom: 1; /* IE6 fix */
	}

#nav, #nav ul { 
	float: left;
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
	font-size: 100%;
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	}

	#nav a {
		display: block;
		color: #333333;  /* grey */
		text-decoration: none;
		font-weight: bold;
		}
	
	#nav a:hover, #nav a:focus {
		color: #cccccc; /* silver */
		background: #0000ff; /* blue */
		}
		
	#nav a.active {
		color: #999999; /* grey */
		}
	
	#nav li {
		float: left;
		padding: 40px 10px 5px 10px;
		}
	
#sub_nav {
	font-size: 100%;
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	list-style: none;
	color: #333333;  /* grey */
	background: #eeeeee; /* light grey */
	border: 1px solid #0000ff; /* blue */;
	padding: 2px;
	width: 200px;
	}
	
	/* IE6 fix */
	* html #sub_nav {width: 185px;}

	#sub_nav a {
		text-decoration: none;
		background-color: #eeeeee;
		background-image: url(index_files/right_arrow2.gif);
		background-repeat: no-repeat;
		background-position: 0 4px;
		padding-left: 20px;
		}
	
	#sub_nav a:hover, #sub_nav a:focus {
		color: #0000ff; /* blue */
		background-color: #666666;
		background-image: url(index_files/right_arrow2.gif);
		background-repeat: no-repeat;
		background-position: 0 -5px;
		}

#content {
	clear: both;
	line-height: 1.5em;
	margin: 10px 10px 10px 14%;
	padding: 0 0 50px 0;
	width: 70%; 
	}
	
	/* IE6 fix */
	* html #content {margin: 0 10px 10px 13%;}

.search_box {
	width: 194px;
	background-color: #cccccc; /* silver */
	padding: 2px;
	border: 1px solid #0000ff; /* blue */
	}

.search_again {
	clear: left;
	float: left;
	width: 400px;
	background-color: #3f0;
	margin: 0 0 30px 0;
	padding: 2px;
	border: 1px solid #0000ff; /* blue */
	}

.search_input {
	font-size: 75%;
	width: 120px;
	}

.search_again_input {
	font-size: 90%;
	width: 300px;
	}
	
.search_button {
	font-size: 75%;
	color: #000099;
	}

.search_nav {
	clear: both;
	color: #0000ff; /* blue */
	margin: 2em;
	}

	.search_nav a {
		background-image: none;
		padding: 0;
		margin: 0;
		}	

.results_table {
	clear: both;
	font-size: 90%;
	line-height: 1.25em;
	margin: 0;
	}

.results_table ul {
		list-style: none;
		margin: 0;
		}

.search_results_item {
	margin: 0 0 1em 0; 
	}

	.search_results_item a {
		background-image: none;
		padding: 0;
		margin: 0;
		}	
	
.search_item_info {
	font-size: 80%;	
	color: #898989;
	}
	
.results_foot {
		font-size: 90%;
		margin: 1em;
		}	
		
#news_column {
	clear: right;
	float: right;
	width: 200px;
	background-color: #eeeeee;
	margin: 18px 2px 10px 10px;
	padding: 0.5em;
	border: 1px solid #0000ff; /* blue */
	}

	#news_column h4 {
		font-family: "Times New Roman", Times, serif;	
		line-height: 1.25em;
		margin: 0.5em 0 0 0;
		padding: 2px;
		color: #000099;
		background-color: #cccccc; /* silver */
		border: 1px solid #0000ff; /* blue */
		}

	#news_column li {
		font-size: 85%;
		line-height: 1.5em;
		list-style: disc;
		list-style-position: outside;
		margin: 0 0 0 -5px;
		}
		
.news_column_image {
	margin: 10px 2px;
	}
		
th.col_month {
	width: 15%;
	border-top: 1px solid #0000ff; /* blue */
	border-bottom: 1px solid #0000ff; /* blue */
	}

th.col_date {
	width: 10%;
	border-top: 1px solid #0000ff; /* blue */
	border-bottom: 1px solid #0000ff; /* blue */
	}

th.col_event {
	width: 70%;
	border-top: 1px solid #0000ff; /* blue */
	border-bottom: 1px solid #0000ff; /* blue */
	}

h2.jubilee_header {
	font-size: 125%;
	color: #000099;	
	margin: 2em 0 0 0;
	border: none;
	border-bottom: 3px solid #000099; /* dark blue */
	}
	
h3.jubilee_header  {
	color: #000099;
	font-size: 125%;
	margin: 1em 0 0 0;
	padding: 0 0 0 25px;
	background-image: url(images/union_jack.gif);
	background-repeat: no-repeat;
	background-position: left center;
	}
	
th.tve_time {
	width: 15%;
	border-top: 1px solid #000099; /* dark blue */
	border-bottom: 1px solid #000099; /* dark blue */
	}

th.tve_venue {
	width: 20%;
	border-top: 1px solid #000099; /* dark blue */
	border-bottom: 1px solid #000099; /* dark blue */
	}

th.tve_event {
	width: 60%;
	border-top: 1px solid #000099; /* dark blue */
	border-bottom: 1px solid #000099; /* dark blue */
	}

.union_jack_line {
	line-height: 16px;
	margin: 20px 0;
	padding: 0;
	background-image: url(images/union_jack_bunting.gif);
	background-repeat: repeat-x;
	background-position: 2px;
	}
	
.contact_list {
	line-height: 2em;
	list-style: none;
	}

.contact_list li {
	line-height: 2em;
	margin-left: -20px;
	padding-left: 30px;
	background-image: url(index_files/phone.gif);
	background-repeat: no-repeat;
	background-position: 10px 10px;
	}
	
.councillor_list {
	line-height: 2em;
	list-style: none;
	}

.councillor_list li {
	line-height: 2em;
	margin-left: -20px;
	padding-left: 30px;
	background-image: url(index_files/stickman.gif);
	background-repeat: no-repeat;
	background-position: 7px 7px;
	}

.emphatic {
	font-size: 110%;
	font-weight: bold;
	font-style: italic;
	padding: 5px;
	}

.links_panel {
	clear: right;
	float: right;
	width: 200px;
	background-color: #efefef;
	margin: 15px 0 15px 15px;
	padding: 0.5em;
	border: 2px solid #0000ff; /* blue */
	}
	
	.links_panel h4 {
		font-size: 100%;
		line-height: 1.25em;
		text-align: center;
		margin: 0.25em 0 1em 0;
		padding: 2px;
		color: #000099;
		border-bottom: 2px solid #0000ff; /* blue */
		}
		
	.links_panel p {
		font-size: 85%;
		margin: 0;
		}

	.links_panel li {
		font-size: 85%;
		line-height: 1.5em;
		list-style: disc;
		list-style-position: outside;
		margin: 0 0 0 -5px;
		}		

.news_links {
	float: right;
	font-size: 85%;
	font-family: "Times New Roman", Times, serif;
	color: #333333;   /* dark grey */
	font-weight: bold;	
	margin: -1em 2px 0 0;
	}

	.news_links a {
		display: block;
		color: #333333;   /* dark grey */
		text-decoration: none;
		}

	.news_links a:hover, .news_links a:focus {
		color: #cccccc; /* silver */
		background: #0000ff; /* blue */
		}

	.news_links ul {
		list-style: none;
		}

	.news_links li {
		float: left;
		padding: 0px 0px 0px 15px;
		}

.news_links_footer {
	margin: 3em 0;
	}

	
.splash_notice {
	font-size: 100%;
	text-align: left;
	margin: 10px 5px 25px 5px;
	padding: 2px;
	border: 4px double #666666; /* grey */
	color: #000000; /* black */
	background: #ffffff; /* white */
	}

.ad {
	line-height: 1.5em;
	text-align: center;
	margin: 1em;
	padding: 0.2em;
	border: 1px solid #ff0000; /* red */
	color: #ff0000; /* red */
	background: #ffffff; /* white */
	}

	.ad h1, .ad h2, .ad h3, .ad h4 {
	color: #ff0000; /* red */
	background: #ffffff; /* white */
	border: none;
	}

.merry_xmas {
	font-size: 125%;
	text-align: center;
	margin: 10px 0 0 0;
	padding: 0 25px;
	border: 3px double #dd0000; /* red */
	color: #dd0000; /* red */
	background: #ffffff; /* white */
	background: url(images/holly_leaves_top_left_50.jpg) no-repeat left top;
	background-position: 25px 5px;
	zoom: 1; /* IE6 fix */
	}

.image_float_left {
	float: left;
	width: 20px;
	}

.image_float_right {
	float: right;
	width: 20px;
	}

.feature_box {
	float: left;
	text-align: center;
	margin: 10px 10px 25px 10px;
	padding: 5px;
	border: 3px ridge #000099; /* blue */
	color: #000099; /* blue */
	background: #ffffff; /* white */
	}
	
.notice {
	float: left;
	font-size: 80%;
	text-align: center;
	margin: 0 5px 15px 5px;
	padding: 2px;
	border: 1px solid #666666; /* grey */
	color: #333333; /* grey */
	background: #ffffff; /* white */
	}

.notice_quarter_page {
	width: 22%;
	}

.notice_half_page {
	width: 45%;
	}

.notice_full_page {
	width: 95%;
	}

.notice_date {
	font-style: italic;
	font-size: 80%;
	float: right;
	margin: -0.5em 0 0 0;
	color: #999999; /* grey */
	}

.author {
	font-style: italic;  
	}

.quote {
	font-style: italic;
	background: #ffffff url(index_files/close-quotes.gif) no-repeat right bottom;
	margin: 0 2em 0 0;
	padding: 0 0 1em 0;
	}

.quoted_message {
	font-style: italic;
	margin: 5px;
	padding: 15px;
	background-color: #eeeeee;
	border: 1px solid #333333;
	}

.italic {
	font-style: italic;
	}

.pod_item, .memorials {
	font: 100% Georgia, "Times New Roman", serif;
	margin: 5% 5% 10% 5%; 
	padding: 10%;
	border: solid 1px #333333; /* grey */
	color: #333333;  /* grey */
	background: #ffffee; /* pale cream */
	}
	
	.pod_item ul, .memorials ul {
	list-style: none;
	line-height: 1.5em;
	margin: 0;
	}
	
	/* IE6 fix */
	* html .pod_item li, .memorials li {margin-left: -20px;}

	.memorials tr {
	border-bottom: solid 1px #333333; /* grey */
	}

.mason {
	float: right;
	}

div#tailpiece {
	clear: both;
	margin: 0 1% 5% 14%;
	padding: 20px 0 0 0;
	width: 70%;
	color: #333333;  /* grey */
	}
	
	/* IE6 fix */
	* html div#tailpiece {margin-left: 13%;}

.link_to_top {
	clear: both;
	float: right;
	margin: 0;
	}

br.clear {
	clear: both;
	}

br.clear_left {
	clear: left;
	}

.sub_nav_right {
	float: right;
	margin: -1em 2px 0 0;
	}

.picture_column {
	float: right;
	width: 200px;
	margin: 10px 0 0 10px;
	border: 1px solid #666666;
	}

.px150_column {
	float: right;
	width: 160px;
	margin: 10px 0 0 10px;
	border: 1px solid #666666;
	}

.gallery_backdrop {
	clear: both;
	line-height: 1.5em;
	font-size: 80%;
	margin: -20px 0 0 0 ;
	padding: 20px;
	border: 5px solid #333333;
	color: #333333; /* dark grey */
	background: #ffffff; /* white */
	zoom: 1; /* IE6 fix */
	}
	
	.gallery_backdrop h4 {
		font-weight: normal;
		margin: 20px 0 0 0;
		}

.photo_panel {
	margin: 0 4px;
	background-color: #ffffff; /* white */
	}

	.photo_panel img {
		width: 150px;
		border: 1px #333333 solid;
		}
	
	.photo_panel a:hover {
		background-color: #ffffff;
		}
	
.lead_photo {
	float: left;
	margin: 0px 15px 10px 0;
	border: 1px solid #666666;
	}

.lead_photo_right {
	float: right;
	margin: 0px 0px 10px 15px;
	border: 1px solid #666666;
	}
	
.shift_more_right {
	margin: 0 0 0 125px; /* to prevent bullets overlapping news_page_lead_photo image (esp. in Activities/Neighbourhood Watch section) */
	}
	
.news_page_lead_photo {
	float: left;
	margin: 20px 15px 10px 0;
	border: 1px solid #666666;
	}

.head_photo_right {
	float: right;
	margin: 20px 0 10px 15px;
	border: 1px solid #666666;
	}

.head_photo_centre {
	margin: 0 60% 0 40%;
	}
	
.centre_image {
    display: block;
    margin-left: auto;
    margin-right: auto;
	}
	
.thumbnail_right {
	float: right;
	margin: 5px;
	border: 1px #333333 solid;
	}

/* 05-08-2016: following tweak to fix problem in strict HTML5 whereby a border 
	around an inline floating image leaves a gap at the bottom of the image */
.lead_photo img, .lead_photo_right img, .news_page_lead_photo img, .head_photo_right img, .thumbnail_right img {
	vertical-align: middle;
}

.photo_box {
	font-size: 80%;
	font-style: italic;
	text-align: center;
	padding: 10px;
	background: #dddddd; /* light grey */
	border: 1px solid #666666;
	}
	
.box_top {
	text-align: right;
	margin: 20px 0;
	}

.box_left {
	float: left;
	width: 300px;
	margin: 10px 20px 10px 2px;
	}

.box_centre {
	width: 300px;
	padding: 10px;
	margin: auto;
	}
	
.box_right {
	float: right;
	width: 300px;
	margin: 10px 2px 10px 20px;
	}

.box_150 {
	width: 150px;
	}

.box_320 {
	width: 320px;
	}

.side_note {
	float: right;
	width: 150px;
	font-size: 85%;
	font-style: italic;
	margin: 0 0 10px 15px;
	padding: 5px;
	border: 1px solid #666666;
	}

.noticeboard_item {
	display: inline-block;
	vertical-align: top;
	font-size: 80%;
	font-style: italic;
	text-align: center;
	margin: 5px;
	padding: 5px;
	background-color: #eeeeee;
	border: 2px solid #333333;
	}

.picframe_item {
	display: inline-block;
	vertical-align: top;
	font-size: 80%;
	font-style: italic;
	text-align: center;
	margin: 5px;
	padding: 10px;
	background-color: #eeeeee;
	border: 2px solid #333333;
	}
	
.gallery_item {
	display: inline-block;
	vertical-align: top;
	width: 150px;
	font-size: 80%;
	font-style: italic;
	text-align: center;
	margin: 5px;
	padding: 5px;
	background-color: #eeeeee;
	border: 2px solid #333333;
	}

div#gallery h3 {
		clear: both;
		color: white;
		padding: 10px 0;
	}

.pic_show_text {
	width: 580px;
	font-size: 80%;
	font-style: italic;
	font-weight: bold;
	text-align: center;
	margin: -7px 5px 5px 19px;
	padding: 1px;
	background-color: #eeeeee;
	border: 2px solid #333333;
	}

.gallery_frame {
	vertical-align: top;
	text-align: center;
	margin: 10px auto;
	padding: 0;
	}

	.gallery_frame img {
		padding: 10px;
		background-color: #eeeeee;
		border: 2px #666666 solid;
		}

#gallery_show_title {
	font-weight: bold;
	text-align: center;	
	margin: 0 0 -20px 0;
	padding: 0 10px;
	color: #333333;
	border: 1px #333333 solid;
	background: #cccccc; /* silver */
	}

#gallery_show_text {
	font-size: 90%;	
	font-style: italic;
	font-weight: bold;
	text-align: center;
	margin: 0 0 -20px 0;
	padding: 0 10px;
	color: #333333;
	}
	
#gallery_back1 {
	position: relative;
	top: 25px;
	left: -26px;
	background: url(index_files/left_chevron_blue.gif) no-repeat left center;
	background-position: 0px 0px;
	width: 18px;
	height: 18px;
	margin: 0 auto;
	border: 0 solid black;
	}
	
#gallery_next1 {
	position: relative;
	top: 25px;
	left: 615px;
	background: url(index_files/right_chevron_blue.gif) no-repeat right center;
	background-position: 0px 0px;
	width: 18px;
	height: 18px;
	margin: 0 auto;
	border: 0 solid black;
	}

.icon_top_left {
	float: left;
	margin: 0 15px 10px 0;
	}

.icon_top_right {
	float: right;
	margin: 0 0 10px 15px;
	}

table.calendar {
	border: 1px solid black;
	margin: 1em 0;
	}

	table.calendar th {
		color: #000099;
		background: #cccccc; /* silver */
		padding: 2px 10px 0 10px;
		border: 1px dotted black;
		text-align: center;
		}

	table.calendar td {
		padding: 2px 10px 0 10px;
		border: 1px dotted black;
		text-align: center;
		}
		
table.council_calendar th, table.council_calendar td {
		width: 65px;
	}

table.council_calendar caption {
		color: #333333;
		font-weight: bold;
		margin: 10px 0;
	}

	
.diary_month {
	font-size: 1.1em;
	color:#000099;
	margin: 3em 0 0 0;
	padding: 0;
	}

.diary_event {
	width: 100%;
	line-height: 1.2em;
	margin: 0 0 0 0;
	padding: 0;
}

.diary_event dt {
	position: relative;
	left: 0;
	top: 1.2em;
	width: 4em;
	margin: 0 0 0 1em;
}

.diary_event dd {
	margin: 0 0 0 4em;
	padding: 0 0 0 .5em;
}


.council_item_list {
    width:100%;
	margin: 0;
	color: #333333;
}

.council_item_list h4 {
    color: #0000ff;
    margin: 0;
    padding: 1.5em 0 0 0;
   	line-height: 1em;
}

.council_list_item {
	list-style-type: none;
    margin:0;
    padding:0;
}

.council_list_item li {
    float:left;
	text-align: center;
    margin-bottom: 0;
	background-color: #eee;  /* light grey */
	border: .1em solid  #888888; /* grey */
}

.council_list_item li div {
    width: 5em;
	line-height: 1.5em;
	margin: .1em;
}

.rainfall_graph {
	margin: 20px 0;
	border: 0px solid #666666;
	}
	
.rainfall_table {
	float:left;
	width: 180px;
	line-height: 0.5em;
	font-size: 85%;
	margin: 5px;
	background-color: #ccffff; /* pale turquoise */
	border: 1px solid #666666;
	}

	.rainfall_table th {	
		color: #333333;
		font-weight: bold;
		line-height: 1em;
		padding: 5px 10px;
		border-bottom: 1px solid  #666666; /* grey */
		}
		
	.rainfall_table caption {
		color: #333333;
		font-weight: bold;
		margin: 10px 0;
	}
	
.rainfall_table_ins {
	background-color: #ffffcc; /* pale yellow */
	}

	
.rainfall_table_total {
	border-top: 1px solid  #666666; /* grey */
	}

.sponsor_logo {
	vertical-align: top;
	text-align: center;
	margin: 10px auto;
	padding: 0;
	}

	.sponsor_logo a[href^='http://'] {
		background: url(index_files/null.gif);
		}
	
#contact_form label {
	color: #000099;
	font-weight: bold; 
	}

#message {
	width: 40em;
	height: 5em;
	}
	
.address_gif {
	vertical-align: -0.6em;
	}
	
.smallprint {
	font-size:70%; 
	line-height: 1em;
	}

.updated {
	float: left; 
	font-size: 60%;
	width: 60%; 
	margin: 0;
	}
	
.contact {
	float: right;
	font-size: 60%;
	margin: 0;
	}
				
	.contact a {
		background: url(index_files/envelope.gif) no-repeat left center;
		padding-left: 15px;
	}

/* End of main.css */