/*
CSS for John and Linda Davies's Web site 
(c) John Davies 2000-2011            
10/6/2002:  Converted all selectors to lower case in view of XHTML 1.0 case sensitivity.
10/6/2002:  Converted some remaining colour names to #RRGGBB values.
Oct 2002 :  Created Holtable coloration.
Dec 2002 :  Created rightcontent and leftcontent.
Feb 2003 :  Added uline property
Feb 2003 :  Added transparent b/g color to stop XHTML Validator bleating about background colors missing.
Mar 2003 :  Adjusted font sizes following site conversion to XHTML
Apr 2003 :  Changed to CSS-based instead of table-based positioning for holiday photos & some others. 
Jan 2005 :  Changed from absolute to relative font-sizes - recommended by WAI.
Jul 2005 :  Numerous small amendments.
Mar 2010 :  Used max-width on the body to prevent extra-wide screens spreading the text out too wide.  Max-width now widely supported.
Mar 2011 :  Supported a div on main index.htm and holidays.htm to prompt users to upgrade from IE6.
Aug 2011 :  Added width to body to give a small margin on mobile devices with small screens.  Removed assorted Tan hacks for IE5.0 and IE5.5.  
Oct 2011 :  Added in lots of styles to support tabbed interface, derived from A List Apart's venerable "Sliding Doors" styles and 'tabber.js' by Patrick Fitzgerald.
*/

* {
  margin: 0;
  padding: 0;
}

/* For HTML5 (and older browsers with Google's HTML5 shim js code):   */
article, aside, figure, footer, header, hgroup, menu, nav, section {display: block;}

/* == end of html5 code ==================*/
img { border: 0; }

body {
	text-align: left;
	background: #eeeeee url(images/bkgrd.gif) fixed;
	color: #333;
	width: 94%;
	margin:	auto;
	white-space: normal;
	font: normal normal 92% Arial, Helvetica, sans-serif; 
	max-width: 1024px;
}

h1, h2, h3, h4, h5 {font-family: Georgia, serif;}

h1 {
	font-size: 200%;
	font-weight: bold;
	font-style: italic;
	color: #0000cc;
	background-color: transparent;
	text-align:	center;
	padding: 0.4em 0.75em;
	margin: 0.5em 20% 1em 0px;
	border:	4px groove #d8d8e8;
	border-radius: 0.25em; 
}

h2 {
	font-size: 125%;
	font-style: italic;
	color: #000099;
	background-color: #ccc;
	text-align: left;
	width: 100%;
	padding: 1px 1% 1px 1%;
	margin:	1.5em 0px 0.5em 0px;
	position: relative;
	left: -6px;
	border: 1px solid;
	border-radius: 0.25em; 
	border-color: #fff #666 #666 #fff;
}

h3 {
	font-size: 120%;
	font-style: italic;
	text-align:	left;
	color: #000099;
	background-color:	transparent;
	margin:	1.0em 0px 0.25em 0px;
}

h4 {
	font-size: 105%;
	font-style: normal;
	text-align:	left;
	color: #000099;
	background-color:	transparent;
	margin:	0em 0px 0.25em 0px;
}

h5 {
	font-size: 105%;
	font-style: italic;
	text-align:	left;
	text-align:	justify;
	background-color:	transparent;
	margin:	0px 0px 0em 1%;
	color: #000099;
}

h6 {
	font:	normal normal 100% "Times New Roman", Roman, serif;
	text-align:	justify;
	background-color:	transparent;
	margin:	0px 0px 0em 10%;
}

p {
	text-align:	justify;
	background-color:	transparent;
	margin:	0px 0px 1em 0px;
}

p.paddown {padding-top:1em;}

ul {
	background-color:	transparent;
	margin:	0px 0px 1em 0px;
}


ul li {
	text-align:	justify;
	background-color:	transparent;
	margin: 0px 0px 0.75em 2em;}

ul        { list-style-type: disc;  margin: 0px 0px 1em 2em;}
ul ul     { list-style-type: circle; margin: 0px 0px 1em 2em;}
ul ul ul  { list-style-type: square; margin: 0px 0px 1em 2em;}

ol        { list-style-type: upper-alpha; }  /* A B C D E etc. */
ol ol     { list-style-type: decimal; }      /* 1 2 3 4 5 etc. */
ol ol ol  { list-style-type: lower-roman; }  /* i ii iii iv v etc. */

ol.photolist { list-style-type: decimal;       /* 1 2 3 4 5 etc. */
								margin-left: 2em;
}

ol.photolist li{margin: 0px 0px 0.5em 0px;
}

/*  Supposed to center a table according to WDG - but it does not seem to work  */
table {
margin-left: auto;
margin-right: auto;
}

a {
font-weight: bold;
background-color: transparent;
}

a:link 		{ color: #00f; background-color: transparent;}		/* unvisited link */
a:visited 	{ color: #900; background-color: transparent; }		/* visited links */
a:hover		{ background-color: #0f3; }		/* roll-over colour */
a:active 	{ color: #900; background-color: transparent; }		/* active links */

nav#menuclass  {margin-bottom: 1em;}
p#menuclass, nav#menuclass  {text-align: center;}
p#menuclass a, nav#menuclass a	{padding: 1px 1em; margin: 5px -5px 0px 0px; border: 1px #bbb solid; 
                         font-weight: bold; text-decoration: none; line-height:1.4em;} 
p#menuclass a:link, nav#menuclass a:link    {color: #00f; background-color: transparent; } 
p#menuclass a:visited, nav#menuclass a:visited {color: #00f; background-color: transparent; }
p#menuclass a:hover, nav#menuclass a:hover  {background-color: #0f3; }

.indent1 {margin-left:	3%;}
.indent2 {margin-left:	6%;}
.centred	 {text-align:  center;}
.limeborder {border: 1px solid #00ff00;}
acronym {cursor:help; border-style:dotted; border-width:1px;}
acronym.highlight {background-color:yellow;}
abbr {cursor:help; border-style:dotted; border-width:1px;}

/* Pullquote styles: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
div.pullquote {
	width: 225px;
	background: #daa;
	float: right;
	margin: 0.5em 0em 0.5em 1em;
	padding-bottom: 0.25em;
	border-bottom: #daa solid 8px;
	color: #000;
}
div.pullquote p.quote {
	margin: 0.75em;
	font: bold 75% Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	background-image: url(images/quotes_end.gif);
	background-repeat:no-repeat;
	background-position: bottom right;
	padding-right: 2em;

}
div.pullquote p.quote:before {
content: url(images/quotes_start.gif);
}

div.pullquote p.source:before {
content: "- ";
}

div.pullquote p.source {
	font: 65% Verdana, Arial, Helvetica, sans-serif;
	text-align: right;
	margin-bottom: 0.5em;
	margin-right: 5em;
}
/* End of Pullquote styles: ~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* nav links:  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
div.toc, nav.toc {	
	border: 1px solid #000;
	border-radius: 0.25em;
	position: relative;
	float: right;
}

/* create a button look for links */
div.toc a:link, div.toc a:visited, nav.toc a:link, nav.toc a:visited {
	display: block;
	background-color: #c8c8c8;
	border: solid 2px;
	border-color: #aaa #333 #333 #aaa;
	color: #000;
	font: bold 80% Arial,Helvetica,sans-serif;
	letter-spacing: 1px;
	text-decoration: none;
	text-align: center;
	line-height: 1.75;
	width: 9.5em;
	margin: 2px;
}

div.toc a:hover, nav.toc a:hover
{   background-color: #666; color: #fff;}

/* depress effect on click */
div.toc a:active, div.toc a:focus, nav.toc a:active, nav.toc a:focus {   
	border-color: #333 #ccc #ccc #333;
	letter-spacing: normal;
}

footer {
	margin: 0em 0em 0.5em 0em;
	padding: 0.25em 0em 0em 0em;
	border-top: 1px solid black;
	font-size: 80%;
}
/* End of nav links ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* What's New page styles: ~~~~~~~~~~~~~~~~~~~~~~~~~~*/
table.whatsnew {
  border:	1px #aaa solid; 
	border-radius: 0.3em;
  width:	79%; 
  margin:	1em 10%;
}
table.whatsnew td {
  border:	1px #aaa solid; 
}	

table.whatsnew td.centred {
  font-weight: 	bold;
}	

table.whatsnew td ul {
  margin: 0.5em 0.5em 0.5em 2em;
}
table.whatsnew td li {
  margin: 0.5em;
  text-align:	justify;
  color:	#000000;
}
/* End of What's New page styles  ~~~~~~~~~~~~~~~*/

/*  Bit of a laugh for first letter of each para. */
.dropcap:first-letter { font-size: 125%; color: #933; background-color: #fff6eb; }
.uline {text-decoration: underline;}
.holpic {border: 1px solid #000000;}
.nodisplay {display: none; color: white; background-color: white; }
.hidden {display: none;}
span[lang] {font-style: italic;}  /* Italicise foreign words */
span.warnsome {
	font-size: 110%;
	font-style: italic;
	font-weight: bold;
}

hr {margin: 0.5em 0em;}

/* Styles for PAF pages: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
blockquote {margin: 0.25em 0em 1em 1em;}
/* End of styles for PAF pages ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

div.phot {
  clear: both;
  margin-top: 1em;
  margin-bottom: 1em;
}

div.phot img {
  background-color: #fff;
  color: #111111;
  margin-bottom: 0.5em;
  padding: 10px;
  border: 1px solid #888; 
}
div.phot img.transp {
  background-color: transparent;
  color: #111111;
  margin-bottom: 0.5em;
  padding: 10px;
  border: 1px solid transparent; 
}

div.phot img.l-floating {
  float: left;
  margin-right:1em;
  margin-left:0.5em;
}

div.phot img.r-floating {
  float: right;
  margin-left:1em;
  margin-right:0.5em;
}

div.phot p {
  text-align: center; 
  padding-top: 100px;
}

.photwide {
	clear: both;
  margin-bottom: 4em;
}

.photwide img {
	text-align:center;
  background-color: #fff;
  color: #111111;
  padding: 10px;
  border: 1px solid #888; 
	clear:both;
}

.photwide p, .photwide figcaption {
  text-align: center;
	margin-bottom: 0.5em;
}

div.photscroll {
width:100%; 
height:650px; 
overflow:auto; 
clear: left; 
}

div.youtubevid {
  text-align: center; 
	clear: both;
  margin-bottom: 4em;
}

div.youtubevid p {
  text-align: center; 
}

div.youtubevid embed {
  border: 1px solid #666; 
}

.backto {
  clear:both;
  padding-top:0.5em;
}

table#holtable td { border: 1px #00ff00 solid; padding: 0.5em; font-size: 100%; font-weight: bold; text-align: center;}
table#holtable th { border: 1px #00ff00 solid; padding: 0.5em; font-size: 110%; color: #666;}
table#holtable { 
	border: 4px #00ff00 ridge;
	border-radius: 0.4em;
}
table#holtable td.tal {text-align: left;}
table#holtable a {float:left;}

p.cl, div.cl {clear: left;}

#rightcontent {
  position: absolute;
  float: right;
  right:5%;
  top: 1%;
  margin-top: 10pt;
  z-index: 2;
  width: 20%;
  background: #eee;
  border: 1px #000 solid;
  padding: 5px 5px 5px 5px;
  text-align: center;
  font-size: 80%;
}
#leftcontent {
  position: absolute;
  float: left;
  left: 3%;
  top: 4%;
  z-index: 2;
}


div.googlemap {
float: right;
margin:0px 0px 0.75em 2em; 
text-align:center;
border:1px solid black;
padding-bottom: 0.5em;
}

/* Searchbox Section ~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Styles called from home page, holidays, 404 and search results page */
div#searchbox {
  width: 46%;
  border: double #666666 4px;
	border-radius: .4em;
  font-size: 100%;
  vertical-align: middle;
  margin: 0px auto 0.75em;
  text-align: center;
}

div#searchbox p {
  vertical-align: middle; margin-top: 0.5em; text-align: center;
}

div#searchbox input {
  vertical-align: middle;
  padding: 1px;
  border: 1px solid;
  border-color: #ffc #333 #333 #ffc;
}
div#searchbox input#query {
  border-color: #333 #cc9 #cc9 #333;
}

div#searchbox a {
  font-size: 85%;
}

div#searchbox select {
  display: none;
}
/* End Searchbox Section ~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* RSS Feed ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
div.rssitems {
  margin: 3em 0;
  border-top: 1px solid #c96;
}

div.rssitems a {
  font-size: 120%;
}
/* End RSS Feed ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

p.latenews {
  border: 5px red double;
  padding: 1em;
  color: red;
  text-align: center;
  font-style: italic;
	font-weight: bold;
	font-size: 120%;
}

.cb {clear: both;}

div.cb {
  clear: both;
}

div.plsupg {
  clear: both; 
	width: 70%;
  border: 5px red double;
  padding: 0.75em;
	margin: 0 15% 1em 15%;
  color: red;
  text-align: center;
  font-style: italic;
	font-weight: bold;
}

.clearer {
 clear: both;
 display: block;
 height: 1px;
 margin-bottom: -1px;
 font-size: 1px;
 line-height: 1px;
}
/* Used on ourhome.htm for Roman date text: */
p#sp3 {
font-size: 175%;
font-family: "Times New Roman", Times, serif;
margin: -0.5em 0px 0.25em 0px;
}

table#calareaid {
display: none;
}
table#calareaid.calareavisible {
display: block;
}

/* Search2.php styles: */
table#phptable {border-collapse: collapse;}
table#phptable td {border-top: 1px solid black;}
table#phptable th {border: 1px solid black; padding: 0px 1em 0px 1em;}
table#phptable td.nooline {border-top: 0px ;}

/*Amenddvd.php: */
form#insform p.lbl {
width:6em;
display:inline-block;
text-align:right;
margin: 0px 0.25em 0.5em 0px;
}
p.dvdinserr {
color:#FF0000;
font-weight:bold;
font-size:120%;
}

/* Holly Hack for IE Win but not IE/Mac \*/
* html div.cb {
  height: 1%;
}
/*  End Holly Hack - Needed for IE hasLayout but hidden from IE/Mac */

/* Remove menu buttons and background and margins when printed */
@media print{
    body {background-color:#FFFFFF; background-image:none; color:#000000; margin-left:0%; margin-right:0%;}
    #rightcontent {display:none;}
    a:after{content: attr(href)}
}






/*--------------------------------------------------
 From here on is tabber styles .....:*/
/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
  margin: auto;
  max-width: 1024px;
	background: transparent;
  }

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
  margin: 0px;
  padding:10px 10px 14px 10px;
  list-style:none;
  font: bold 13px Verdana, sans-serif;
  height: 0px;
}

ul.tabbernav li
{
  float:left;
  background:url("images/left.gif") no-repeat left top;
  margin:0;
  padding:0 0 0 9px;
  height: 25px;
  position: relative;
  top: 1px;
}

ul.tabbernav li a
{
  float:left;
  margin:0;
  background:url("images/right.gif") no-repeat right top;
  padding: 5px 15px 4px 6px;
  text-decoration:none;
  font-weight:bold;
  color:#765;
	height: 16px;
}

ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }

ul.tabbernav li a:hover
{
  color:#f33;
}

ul.tabbernav li.tabberactive
{
  background-image:url("images/left_on.gif");
  position: relative;
  top: 1px;
	height: 26px;
}

ul.tabbernav li.tabberactive a
{
  background-image:url("images/right_on.gif");
  color:#333;
  height: 17px;
	border-bottom: 1px solid #fff;
}

ul.tabbernav li.tabberactive a:hover
{
 color: #f33;
 border-bottom: 1px solid #fff;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
	clear: left;
  background: transparent;
	padding:1em;
  margin-top: 11px;
	border:1px solid #aaa;
	border-radius: 0.5em;
	left: 0px;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 height:580px; 

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 overflow:auto;
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
/*
.tabberlive .tabbertab h3 {
 display:none;
}
*/

/* Example of using an ID to set different styles for the tabs on the page
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}
*/

.tabbertab  ol { 
list-style-type: decimal;   /* 1 2 3 4 5 etc. */
margin: 0.25em 4% 1em 5%; 
}

/*  End of style sheet  */