/* CSS Mastery: Advanced Web Standards Solutions - Simon Collison's tutorial */

 /* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 
.clearfix:after {
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  

body {
margin: 1em auto;
padding: 0;
width:50em;
min-width:50em;
font:100% 'Lucida Grande',Verdana, Helvetica, sans-serif;
}
#threeColLayout {
/*background: #CAC78A url(images/background.gif) repeat-x fixed;*/
/*background-color: #effce7; /*#fff;*/
}
#twoColLayout {
/*background: #CAC78A url(images/background.gif) repeat-x fixed;*/
background-color: #effce7; /*#D7D493;*/
/*background-color: #D7D493; #effce7;*/
}
#oneColLayout {
/*background: #CAC78A url(images/background.gif) repeat-x fixed;*/
}

/* default links */

a:link {
background: transparent;/*transparent#66ca00;*/
text-decoration: underline;
color: #000;/*#666 */
}
a:hover {
background: #070;
text-decoration: underline;
color: #000;
}
a:visited {
background: transparent;/*transparent#66ca00*/
text-decoration: underline;
color: #000
}
a:active {
background: transparent;/*transparent#66ca00*/
text-decoration: underline;
color: #000
}
.pagenav a:link, .pagenav a:visited {
color: #000;
}
.pagenav a:hover {
color: #fff;
background: #070;
}
/* headers here */

h1 {
margin:0;
font-size: 100%;
color: #FF0000;
text-indent: -9000px;
}

h2 {
margin: 0 10px 0 10px;
padding: 2px;
font-size: 110%;
color: #fff;/* #A3A06F*/
background-color: #0A0;/*#E5E2A9 */
}

/* and then these h3 statements, unique to whichever section has been attached above, will give the headers the appropriate background color */

h3 {
text-transform: uppercase;
display: inline;
font-size: 92%;
margin: 10px 5px 0 5px;
padding: 2px;
}

/* main wrapper that holds it all centrally */

#wrapper {
	width:50em;/*750px*/
	margin:0 auto;
	background-color: #66ca00; /*#effce7;#D7D493*/
	padding: 1em 1em 1em 1em;/*0 10px 10px 10px;*/
}
/* default Center masthead holding the logo and mainNav */

#header {
	width: 50em;/*750px*/
	height: 10em;/*13em;/*200px*/
	margin-top:0;
	margin-bottom: 0;
	background-color: #0A0;/*#66ca00;*/
	background-repeat: no-repeat;
	background-position: right center;
	background-image: url(images/DSCF0819.jpg);
}
.extraDiv1 {
	position:relative;
	height:10em;
	background-image: url(images/village_aerial_3_title.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
	
/*#extraDiv1 {
	position:relative;
	left:50%;
	margin-left:-48%;
	margin-top: -85px;
	width: 250px;
	height: 150px;
	background-color: transparent;
	background-image: url(images/village_aerial_3_title.gif);
	background-repeat: no-repeat;
	background-position: left top;
	}
*/	
/* note here that specifying twoColLayout in the body will activate the following div instead of the default primaryContent */

#twoColLayout #primaryContent {
width:31em;/*555px*/
float:right;/*left;*/
display:inline;
margin: 0 0 2em 1em;/*0 0 20px 195px;*/
}

/* just incase twoColLayout is specified in body, and secondaryContent is left in, we turn it off - not ideal, but it works */

#twoColLayout #secondaryContent {
display: none;
}

#sideContent{
float:left;
width:13em;/*180px*/
margin: 0 0 0.5em 0;/*-750px;*/
}

/* just incase oneColLayout is specified in body, and these are left in, we turn them off - not ideal, but it works */

#oneColLayout #secondaryContent, #oneColLayout #sideContent {
display: none;
}

/* twoColContent - used to span two right-hand columns - ONLY LEAVE THIS IN IF I DISCUSS IT - box used only if no selector */

#twoColContent{
width:36em;/*555px*/
float:left;
margin: 0 0 2em 12em;/*0 0 20px 195px;*/
}

/* cbSide controls non-rounded boxes in the thinner left column, known as sideContent */

.cbSide {
/*width:8em;160px;*/
margin: 0.3em 0.6em 0 0.6em;/*5px 0 0 10px;*/
padding: 0.6em 0 0.3em 0;/*10px 0 5px 0;*/
background-color: #CCFFCC; /*#FFF */
}
.cbSide p {
margin: 0;
padding: 0 0.3em 0.1em 0.3em;/*0 5px 2px 5px;*/
font-size: 70%;
color: #000;
}

/* box is the shaded area that holds a rounded corner box or flat box, fitting the given width of the column it is in. Usually combined with another class to control inner elements, eg box default */

.box {
margin: 0.5em 0 0 0;/*15px 0 0 0;*/
padding: 0.3em 0 0.3em 0;/*5px 0 5px 0;*/
background:url(images/diags-green-rev.gif);
}
.cbb {
margin: 0 0.6em 0 0.6em;
background: #CCFFCC;
padding: 0.3em 0 0.3em 0;
line-height: 170%;
}

/* paragraph styles for any main boxes */
.cbb p, .cb p {
margin: 0;
padding: 0 0.3em 0.3em 1.2em;
color: #333;
}


/* image control. First we define stuff common to ALL images on the page. It is then up to other styles to override these. By default, all images will have a 2px border, and bottom and right margins of 5px. They will all float left. */

img {
float: left;
margin: 0px 0 2px 5px;
/*border: 2px solid #C5BDBD;*/
}
/* For any images in the default boxes - the pencil icons - I don't want the 2px border. So I set border to 0 */

.default img {
border: 0;
}

/* For these larger images, I don't want them to float, for that causes the h3 above to be pushed to the right. I also declare a top margin to space the header and image apart, and also increase the border width slightly.  We also set it to display:block so that if body id is twoColLayout, the image will force the header and other bits to wrap around it */

.mainImage {
display: block;
float: none;
margin-top: 4px;
border: 3px solid #C5BDBD;
}

/* drop shadow effect for the gallery thumbnails. Sadly this requires a div to be wrapped around the image markup, which is a shame */


/* used to ensure all our floated thumbnails stay the right width away from the left side of the box */

.thumbnails {
margin: 0 1em 1em 1em;/*0 0 20px 50px;*/
}
.thumbnails p {
margin: 0 0 1.2em -0.5em;/*0 0 20px -50px;*/
}
/* spacer used immediately after the floated gallery thumbnails to ensure the box expands to hold them all */

.spacer {
clear: both;
}

/* CSS for the ticked off links. Note, I am not ordering things in the LVHA way, as I prefer the visited tick to work above the arrow once visited. */

.cbSide ul {
list-style-type: none;
margin-top: 0px;
margin-left: 0;
margin-bottom: 0;
padding: 0.19em;/*3px;*/
font-size:70%;
font-weight:bold;
}

.cbSide li a:link {
color:#000;
text-decoration:none;
border-bottom: 1px solid #EDEAEB;
background: #CCFFCC;
}

.cbSide li a:active {
color:#000;
text-decoration:none;
border-bottom: 1px solid #EDEAEB;
background: #CCFFCC;
}

.cbSide li a:hover{
color:#fff;/*#990000*/
border-bottom: 1px solid #EDEAEB;
background: #070;
text-decoration:none;
}
.cbSide li a:visited {
text-decoration:none;
border-bottom: 1px solid #EDEAEB;
}
/* Designed by A.Holley */
.cbSide p+p+p {
color:#999999;
}
/* Highlighting external links ONLY in the main text areas, so as not to screw up the ticked-off links */

.box.default a[href^="http:"] { 
  background: url(images/external.gif) no-repeat right top;
  padding-right: 10px; 
} 
 .box.default a[href^="http://www.collylogic.com"], .box.default a[href^="http://www.collylogic.com"] { 
  background-image: none; 
  padding-right: 0; 
}

/* form styling - not much though kids */

form {
	margin: 0;
	padding: 0;
	font-size: 80%;
}
.acc fieldset {
	float:left;
	border: thin dashed #ccc;
	margin: 10px 0 10px 10px;
	padding: 0;
}

legend {
text-transform: uppercase;
font-size: 110%;
font-weight: bold;
margin: 10px 0 2px 0px;
padding: 2px;
background-color: #D72E2E;
color: #FFF;
}

.default legend {
display: block;
}

label {
display: none;
}

.default label {
display: block;
font-weight: bold;
}
.accLabel label {
display: block;
font-weight: bold;
}

input.accInput {
	margin-top:0;
	padding: 2px;
	border: 0;
	background: #fff;
	color: #333;
}

input.accInputLi {
	/*width: 30em;*/
	margin-top:0;
	margin-left:0;
	margin-right:0.5em;
	padding: 2px;
	border: 1px solid #3366CC;
	background-color: #fff;
	color: #333;
}
textarea {
	margin-top:0;
	padding: 2px;
	border: 0;
	background-color: #D7E7E9;
	color: #333;
}
input.accInputLi {
	display: block;
}
.default input {
	display: block;
}

/* Extra styles added for Village History */
#homePgInfo_p2_photo {
	float:right;
	margin: 2px 2px 2px 2px;
	z-index:5;
}
#morehistory {
	display:none;
}
/* end */
/* Extra styles added for Calendar and Accommodation, Businesses */
.cbSideCal{
	width:30em;/*530px;*/
	margin: 0.6em 0.6em 0.6em 0.6em;
	padding: 0.12em 0 0.12em 0.12em;/*2px;*/
	background-color: #CCFFCC; /*#FFF */
	/*border: solid 1px #0f0; /* Not sure if this works to switch off borders on images in calendar*/
}
.cbSideCal p {
	padding: 0 0.3em 0.12em 0.3em;/*0 5px 2px 5px;*/
	color: #000;
	font-size: 90%;
}
.boxCal {
	margin: 15px 0 0 0;
	padding: 5px 0 5px 0;
	background:url(images/diags-green-rev.gif);
}

/* end */
/* Extra styles added for Gallery (phpslideshow)*/
.image_info {
    display:block;
    font-size:10px;
    color:#999;
    border:0px;
    }
.show_title a {
    font-size:12px;
    text-decoration:none;
    color:#999;
}
.image_info a {
background-color: transparent;
text-decoration: underline;
color: #666;
}
.image {
    margin:5px 5px 5px 5px;
}
.image img {
    padding:6px;
    border: 1px solid #000;
    display:block;
    background-color: #E5E2A9;
    margin-top: 10px;
}
.image_right {
	float:right;
    margin:5px 5px 5px 5px;
}
.image_left {
	float:left;
    margin:5px 5px 5px 5px;
}
.navigation {
	text-decoration: none;
    color:#FF3366;
    margin-top:9px;
    font-weight:bold;
}
.thumbnail_row {
    width:500px;
    margin-right: auto;
    padding: 10px 10px 10px 10px;
    border:0;
}
.thumbnail_center, .thumbnail_center img, .thumbnail, .thumbnail img {
	display:block;
	float:left;
	margin: 0 auto 0 auto;
	padding: 0 0 0 0;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-color: #E5E2A9;
	border-right-color: #E5E2A9;
	border-bottom-color: #E5E2A9;
	border-left-color: #E5E2A9;
}
.small, .small a {
    margin-top: 20px;
    text-decoration:none;
    color:#777;
}
/* Extra styles added for Village Noticeboard */
#nbBLOCK_alt {
	position: relative;
	padding: 2px;
	margin-top: 1%;
	margin-left: 1%;
	margin-right: 1%;
	background-image: url(images/notes_torn_paper_long.gif);
	background-repeat: no-repeat;
	background-position: center center;
	height: 130px;
	width: 425px;
	/*border: 1px solid #CCCCCC;*/
}
#nbBLOCK_alt p.description_alt {
	color: #666666;
	font-size: 14px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-style: italic;
	padding-top: 2.5em;
	padding-left: 1.3em;
	line-height: 1.3em;
	/*border: 1px solid #FF0000;*/
}
#csBLOCK_alt {
	position: relative;
	padding: 2px;
	margin-top: 1%;
	margin-left: 1%;
	margin-right: 1%;
	width: 27em;
}
#csBLOCK_alt p.description_alt {
	color: #666666;
	font-size: 80%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-style: italic;
	padding-top: 2.5em;
	padding-left: 1.3em;
	line-height: 1.3em;
}
#addentry a:link, #addentry a:visited {
color: #000;
}
#addentry a:hover {
color: #fff;
background: #070;
}
.accBLOCK_alt ul{
	float:left;
	/*position: relative;*/
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.8em;
	padding: 0px;
	margin-top: 5px;
	margin-left: 1%;
	width: 27em;
	list-style-position: inside;
	list-style-type: square;
	border: solid 1px #fff;
}
.moredetail {
	float:left;
	width:20em;
	margin-top:5px;
	margin-left:1%;
	clear:both;
	/*border: solid 1px #A00;*/
}
.accDetail_alt ul{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.8em;
	float:left;
	margin-top: 5px;
	margin-left: 1%;
	margin-right: 1%;
	list-style-position: inside;
	list-style-type: square;
	clear:both;
}
.accDetail_alt p{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.8em;
	color: #fff;/* #A3A06F*/
	background-color: #0A0;/*#E5E2A9 */
	margin-top: 5px;
	margin-bottom: 0;
	margin-left: 1%;
	width: 20em;
	clear:both;
}

/********************************************************/
#email p{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.8em;
	color: #fff;/* #A3A06F*/
	background-color: #0A0;/*#E5E2A9 */
	margin-top: 0;
	margin-left: 1%;
	width: 20em;
	/*border: 1px solid #FF0000;*/
}
#email img{
}
#email a:link, #email a:visited{
	color: #fff;
	text-decoration:none;
}
#email a:hover {
	color: #fff;
	background: #070;
}
/********************************************************/

#accDetail_img {
	float:left;
	padding: 2px;
	margin-top: 1%;
}

#accDetail_img.one {
	position: absolute;
	left: 0px;
	top: 0px;
}
#accDetail_img.two {
	position: absolute;
	left: 200px;
	top: 0px;
}
#accDetail_img.three {
	position: absolute;
	left: 400px;
	top: 0px;

}
.accBLOCK_link{
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #CCFFCC;
	text-decoration:none;
}
/* Google Map Container */
#map {
	padding: 2px;
	width:400px;
	margin-top: 1%;
	margin-left: 1%;
	margin-right: 1%;
	/*display: block;*/
}
#googlemap_OnOff {
	background-color: #0a0;
	clear:both;
}
#googlemap_OnOff a:link, #googlemap_OnOff a:visited{
	color: #fff;
	text-decoration:none;
}
#googlemap_OnOff a:hover {
	color: #fff;
	background: #070;
}
.mapLinks {
	float:left;
	margin-top:10px;
	padding:5px 5px 5px 5px;
}
.mapLinks a:link, .mapLinks a:visited {
color: #000;
}
.mapLinks a:hover {
color: #fff;
background: #070;
}
/* end */
/* Extra styles added for Village Admin pages */
.adminContainer {
	margin: 0 1.2em 1.2em 1.2em;
	padding:1.2em 0 0 0;
}
.adminContainer p {
	margin: 0 0 1.2em 1.2em;
}

#galTable {
	border-collapse:collapse;
	margin-left:0.2em;
	margin-right:0.2em;
	border: 1px solid #666;
}
th, td.galRow {
	padding: 2px 2px;
	font-size: 75%;
}
caption {
	padding: 2px 2px;
	font-size:80%;
	font-weight:bold;
	color:#fff;
	margin: 1em 0 0 0;
	background-color:#070;
}
col {
	/*border-right: 1px solid #ccc;*/
	/*width:auto;*/
}
#adminmenu tr {
	margin-left:auto;
	margin-right:auto;
}

#adminmenu a:link {
	color:#000;
	line-height:150%;
	text-decoration:none;
	display:inline;
	width:15em;/*154px;*/
	/*border-bottom: 1px solid #EDEAEB;*/
	background: #CCFFCC;
	font-size:80%;
	font-weight:bold;
}
#adminmenu a:active {
	color:#000;
	line-height:150%;
	text-decoration:none;
	display:inline;
	width:15em;/*154px;*/
	/*border-bottom: 1px solid #EDEAEB;*/
	background: #CCFFCC;
	font-size:80%;
	font-weight:bold;
}
#adminmenu a:hover{
	color:#fff;/*#990000*/
	line-height:150%;
	display:inline;
	width:15em;/*154px;*/
	/*border-bottom: 1px solid #EDEAEB;*/
	background: #070;
	text-decoration:none;
	font-size:80%;
	font-weight:bold;
}
#adminmenu a:visited {
	text-decoration:none;
	line-height:150%;
	font-size:80%;
	font-weight:bold;
	/*border-bottom: 1px solid #EDEAEB;*/
}

.busBLOCK_alt p{
	float:left;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.8em;
	padding: 2px;
	margin-top: 5px;
	margin-left: 1%;
	margin-right: 1%;
	width: 30em;
	/*border: solid 1px #CCFF00;*/
}
.busBLOCK_desc p{
	float:left;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.8em;
	padding: 2px;
	margin-top: 5px;
	margin-left: 1%;
	margin-right: 1%;
	width: 35em;
}

#busBLOCK_alt_img {
	float:right;
	padding: 2px;
	margin-top: 1%;
	margin-right: 1%;
}
.busBLOCK_img {
	float:right;
	padding: 2px;
	margin-top: 1%;
	margin-right: 1%;
	/*border: solid 1px #A00;*/
}

.busDetail_alt p{
	float:left;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.8em;
	color: #fff;/* #A3A06F*/
	background-color: #0A0;/*#E5E2A9 */
	margin-top: 5px;
	margin-left: 1%;
	margin-right: 1%;
	width: 15em;
}
.busDetail_alt a:link, .busDetail_alt a:visited{
	color: #fff;
	text-decoration:none;
}
.busDetail_alt a:hover {
	color: #fff;
	background: #070;
}
/* File Download tables on public site */
table#downTable {
	border-collapse:collapse;
	margin-left:0.2em;
	margin-right:0.2em;
	border: 1px solid #666;
}
th, td.downRow {
	padding: 2px 2px;
	font-size: 75%;
}
th.downRow {
	color:#FFFFFF;
	background-color:#070;
}
/* the Thank You or Updating text */
.thanks {
	margin-top: 30%;
	margin-bottom:30%;
	margin-left: 30%;
	margin-right: 30%;
	padding: 0;
	width:10em;
	font-size:300%;
font-weight:bold;
}



/* erm, the footer */

#footer{
	clear:both;
	height: 25px;
	padding: 20px 0 0 0;
	background-color: transparent;
	background-image: url(images/footer-1.jpg);
	background-repeat: repeat-x;
	background-position: left top;
}
#footer p {
	margin:8px 5em 0 0;
	padding:2px 2px 2px 2px;
	font-weight: normal;
	font-size:70%;
	background-color:#070;
	color:#fff;
}
#footer a:link, #footer a:visited {
	color: #CCCC66;
}
#footer a:hover {
	color: #000;
	background: #D7D493;
}

/* end */