/* General CSS settings */

/* ************************************************************************************************************************************************************** */
/* Site-wide settings */
/* ************************************************************************************************************************************************************** */

h1 { font-size: medium;
     font-weight: bold;
     text-align: left;
     display: inline;
}

h2 { font-size: medium }

/* Standard picture pages */
#mainpanel { width: 855px;
                     padding: 4px;
                     background-image: url(../images.system/backgrnd.jpg);
}

/* Big picture pages */
#bigpanel { width: 855px;
                     padding: 4px;
                     background-image: url(../images.system/backgrnd.jpg);
}

#panelbody { color: #000000;
          background: #C0C0C0;
          background-image: url(../images.system/weave.gif);
}

body { color: #000000;
          background: #C0C0C0;
          background-image: url(../images.system/backgrnd.jpg);
}

#textblock { width: 100% }

/* Underline for links */
a:link {color: #0000FF; text-decoration: underline; font-style: normal; font-weight: normal }
/* Visited link */
a:visited {color: #000080; text-decoration: underline; font-style: normal; font-weight: normal }
/* Embolden text using 'shadow' to avoid enlarged text increasing size of conatiner for hover */
a:hover {text-shadow: 0 0 .9px #333, 0 0 .9px #333, 0 0 .9px #333;}

/* Tooltip popup hints */
#tt {
 position:absolute;
 display:block;
 background:url(system.js/images/tt_left.gif) top left no-repeat;
 }
 #tttop {
 display:block;
 height:5px;
 margin-left:5px;
 background:url(system.js/images/tt_top.gif) top right no-repeat;
 overflow:hidden;
 }
 #ttcont {
 display:block;
 padding:2px 12px 3px 7px;
 margin-left:5px;
 background:#666;
 color:#fff;
 }
#ttbot {
display:block;
height:5px;
margin-left:5px;
background:url(system.js/images/tt_bottom.gif) top right no-repeat;
overflow:hidden;
}

/* ************************************************************************************************************************************************************** */
/* Standard page headers and footers */
/* ************************************************************************************************************************************************************** */

/* Background was #9FA4BD */
table.pageheader {width: 100%; height: 50px; background-color: #767676;  font-size: 14pt; font-style: normal; font-weight: normal; border: 0; border-spacing: 0}
table.pageheader img {border: 0}
table.pageheader td:first-child {width: 40%; text-align: left}
table.pageheader td:nth-child(2) {width: 10%; text-align: center}
table.pageheader td:nth-child(3) {width: 50%; text-align: right}

/* Thin yellow separator horizontal line. */
div.hseparator { background-color: #FFFFA0; height: 3px}
tr.hseparator {background-color: #FFFFA0; height: 3px}

table.socialheader {width: 100%; background-color: #999999;  font-size: 10pt; font-style: normal; font-weight: normal; border: none}

/* Background was #9FA4BD */
table.pagefooter {width: 100%; height: 50px; background-color: #767676; font-size: 14pt; font-style: normal; font-weight: normal; border: 0; border-spacing: 0;}
table.pagefooter img {border: 0}
table.pagefooter td:first-child {width: 33%; text-align: center}
table.pagefooter td:nth-child(2) {width: 33%; text-align: center}
table.pagefooter td:nth-child(3) {width: 33%; text-align: center}

/* Wallpaper only pages */
table.pagefooter-wp {width: 100%; height: 50px; background-color: #767676; font-size: 14pt; font-style: normal; font-weight: normal; border: 0; border-spacing: 0;}
table.pagefooter-wp img {border: 0}
table.pagefooter-wp td:first-child {width: 45%}
table.pagefooter-wp td:nth-child(2) {width: 10%}
table.pagefooter-wp td:nth-child(3) {width: 45%}

/* Background was #9FA4BD */
table.copyright {width: 100%; color: #000000; background-color: #767676; font-size: x-small; border: 1px solid white; text-align: center}

/* Navigation bar */
table.navbar { width: 100%; color: #000000; background-color: #999999;  border: 0; border-spacing: 0 }
table.navbar a { display: block; width: 100%; color: #000000; text-decoration: none; font-style: normal; font-weight: normal}
table.navbar a:link {color: #000000; text-decoration: none; font-style: normal; font-weight: normal}
table.navbar a:hover {text-decoration: none; font-style: normal; font-weight: bold; background: #148ed9;}
table.navbar td {text-align: center; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; }

/* ************************************************************************************************************************************************************** */
/* Index page settings */
/* ************************************************************************************************************************************************************** */
table.btncolumn { border: 0; cellpadding: 0px; cellspacing: 0px }

img.indexbanner { height: 132px; width: 855px; border: 0; vertical-align:text-top; display: block; margin-left: auto; margin-right: auto }
img.countybuttons { border: 0; height: 26px; width: 140px }
img.miscbuttons { border: 0; height: 26px; width: 130px }

/* Map and buttons display on index page */
tr.countybuttons { height: 30px; }
td.countybuttons { width: 140px; }

.button {
    display: inline-block;
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0,.3);
    font-family: sans-serif;
    box-shadow:
        inset 0 0 2px 0 rgba(255,255,255,.4),
        inset 0 0 3px 0 rgba(0,0,0,.4),
        inset 0 0 3px 5px rgba(0,0,0,.05),
        2px 2px 4px 0 rgba(0,0,0,.25);
    border-radius: 4px;
    padding: 7px 16px;
    margin-bottom: 5px;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    line-height: 14px;
    position: relative;
}
/* County Buttons */
/* Row 1 */
.button.brecknockshire   { background: #FEFECF; color: #000; text-decoration: none; padding-left:21px; padding-right:21px; }
.button.gloucestershire  { background: #568D00; color: #FFF; text-decoration: none; padding-left: 7px; padding-right;16px; }
.button.northyorkshire   { background: #FEFE83; color: #000; text-decoration: none; padding-left:20px; padding-right:20px; }
/* Row 2 */
.button.buckinghamshire  { background: #BF00BF; color: #FFF; text-decoration: none; padding-left: 7px; padding-right;16px; }
.button.hampshire        { background: #FE4FA7; color: #000; text-decoration: none; padding-left:29px; padding-right:29px; }
.button.nottinghamshire  { background: #CF9B00; color: #000; text-decoration: none; padding-left:19px; padding-right:18px; }
/* Row 3 */
.button.caernarfonshire  { background: #FE6FFE; color: #000; text-decoration: none; padding-left:19px; padding-right:19px; }
.button.herefordshire    { background: #DFDF00; color: #000; text-decoration: none; padding-left:22px; padding-right:22px; }
.button.oxfordshire      { background: #FFD8B0; color: #000; text-decoration: none; padding-left:32px; padding-right:32px; }
/* Row 4 */
.button.cambridgeshire   { background: #DF6F00; color: #000; text-decoration: none; padding-left:21px; padding-right:21px; }
.button.hertfordshire    { background: #DFFEAF; color: #000; text-decoration: none; padding-left:22px; padding-right:22px; }
.button.pembrokeshire    { background: #BF7FFE; color: #000; text-decoration: none; padding-left:24px; padding-right:24px; }

/* Row 5 */
.button.carmarthenshire  { background: #72BF00; color: #000; text-decoration: none; padding-left:18px; padding-right:18px; }
.button.huntingdonshire  { background: #00EFEF; color: #000; text-decoration: none; padding-left:14px; padding-right:14px; }
.button.radnorshire      { background: #9F4F00; color: #000; text-decoration: none; padding-left:31px; padding-right:31px; }

/* Row 6 */
.button.ceredigion       { background: #FE4F4F; color: #000; text-decoration: none; padding-left:34px; padding-right:34px; }
.button.kent             { background: #AEFDFD; color: #000; text-decoration: none; padding-left:45px; padding-right:45px; }
.button.rutland          { background: #FE7F00; color: #000; text-decoration: none; padding-left:43px; padding-right:43px; }

/* Row 7 */
.button.cheshire         { background: #9E7600; color: #000; text-decoration: none; padding-left:39px; padding-right:39px; }
.button.leicestershire   { background: #8E008E; color: #FFF; text-decoration: none; padding-left:21px; padding-right:21px; }
.button.highlands        { background: #FE0000; color: #000; text-decoration: none; padding-left:13px; padding-right:13px; }

/* Row 8 */
.button.cumbria          { background: #CEFDE6; color: #000; text-decoration: none; padding-left:40px; padding-right:41px; }
.button.lincolnshire     { background: #9CE6B3; color: #000; text-decoration: none; padding-left:26px; padding-right:27px; }
.button.shropshire       { background: #5FFE5F; color: #000; text-decoration: none; padding-left:33px; padding-right:34px; }

/* Row 9 */
.button.denbighshire     { background:#00D0D0; color: #000; text-decoration: none; padding-left:28px; padding-right:28px; }
.button.london           { background:#4F4F4F; color: #FFF; text-decoration: none; padding-left:39px; padding-right:39px; }
.button.somerset         { background:#C5C5FE; color: #000; text-decoration: none; padding-left:37px; padding-right:37px; }

/* Row 10 */
.button.derbyshire       { background: #62CDFE; color: #000; text-decoration: none; padding-left:32px; padding-right:32px; }
.button.monmouthshire    { background: #FE936F; color: #000; text-decoration: none; padding-left:19px; padding-right:19px; }
.button.suffolk          { background: #FEB4B4; color: #000; text-decoration: none; padding-left:43px; padding-right:43px; }

/* Row 11 */
.button.dorset           { background: #9595C7; color: #000; text-decoration: none; padding-left:44px; padding-right:44px; }
.button.montgomeryshire  { background: #FE7F7F; color: #000; text-decoration: none; padding-left:14px; padding-right:14px; }
.button.sussex           { background: #FBB504; color: #000; text-decoration: none; padding-left:41px; padding-right:41px; }

/* Row 12 */
.button.essex            { background: #418383; color: #000; text-decoration: none; padding-left:45px; padding-right:45px; }
.button.norfolk          { background: #00AAFE; color: #000; text-decoration: none; padding-left:42px; padding-right:42px; }
.button.wiltshire        { background: #AF5700; color: #000; text-decoration: none; padding-left:39px; padding-right:39px; }

/* Row 13 */
.button.glamorgan        { background: #2F74FE; color: #000; text-decoration: none; padding-left:32px; padding-right:32px; }
.button.northamptonshire { background: #C0C000; color: #000; text-decoration: none; padding-left:13px; padding-right:13px; }
.button.worcestershire   { background: #3574E1; color: #000; text-decoration: none; padding-left:22px; padding-right:22px; }

/* Towns and Other Counties buttons */
.button.towns         { background: #9F9F9F; color: #000; text-decoration: none; padding-left:59px;padding-right:59px; }
.button.othercounties { background: #9F9F9F; color: #000; text-decoration: none; padding-left:38px;padding-right:38px; }

/* Miscellaneous buttons */
.button.links          { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }
.button.transport      { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }
.button.guestbook      { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }
.button.blog           { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }
.button.wallpaper      { background: #EDE4B7; color: #000; text-decoration: none; width: 107px; float: left; }
.button.updates        { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }

.button.search         { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }
.button.driving        { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }
.button.donate         { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }
.button.howtouse       { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }
.button.categories     { background: #EDE4B7; color: #000; text-decoration: none; width: 107px; float: left; }
.button.daytrips       { background: #EDE4B7; color: #000; text-decoration: none; width: 124px; float: left; }

.button.gazetteer      { background: #EDE4B7; color: #000; text-decoration: none; width: 104px; float: left; }
.button.footpaths      { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }
.button.contact        { background: #EDE4B7; color: #000; text-decoration: none; width: 105px; float: left; }
.button.oldest         { background: #EDE4B7; color: #000; text-decoration: none; width: 109px; float: left; }


.button:before, .button:after {
    content: '';
    display: block;
    position: absolute;
    left: 2px;
    right: 2px;
    height: 3px;
}
.button:before {
    top: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background: rgba(255,255,255,.6);
    box-shadow: 0 1px 2px 0 rgba(255,255,255,.6);
}
.button:after {
    bottom: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background: rgba(0,0,0,.15);
    box-shadow: 0 -1px 2px 0 rgba(0,0,0,.15);
}

/* ************************************************************************************************************************************************************** */
/* Standard image pages layout */
/* ************************************************************************************************************************************************************** */

/* Blank margins */
td.marginL {width: 10px}
td.marginC {width: 10px}

/* Image cell */
td.photocell {width: 370px}
td.multi-photoL {width: 370px}
td.multi-photoR {width: 370px}

/* Button Row */
table.btnrow  {height: 35px; width: 97%; color: #000000; background-color: #999999 }
table.btnrow a { display: block; width: 100%; color: #0000CC; text-decoration: none; font-style: normal; font-weight: normal}
table.btnrow a:link {color: #0000CC; text-decoration: none; font-style: normal; font-weight: normal}
table.btnrow a:hover {text-decoration: none; color: #000000; font-style: normal; font-weight: normal; background: #148ed9; padding: 3px }
table.btnrow td {text-align: center; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; }

/* Table cells in btnrow */
td.enlargebtn { width: 18% }
td.commentbtn { width: 20% }
td.infobtn { width: 5% }
td.parkingbtn {width: 8% }

table.regionbtn {height: 30px; width: 96%;  color: #000000; background-color: #999999 }
table.regionbtn a { display: block; width: 100%; color: #0000CC; text-decoration: none; font-style: normal; font-weight: normal}
table.regionbtn a:link {color: #0000CC; text-decoration: none; font-style: normal; font-weight: normal}
table.regionbtn a:hover {text-decoration: none; color: #000000; font-style: normal; font-weight: normal; background: #148ed9; padding: 0 }
table.regionbtn td {text-align: center; vertical-align: middle; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; }
/* td.londonbtn {width: 427 } */

table.londonbtn {height: 30px; width: 100%;  color: #000000; background-color: #999999 }
table.londonbtn a { display: block; width: 100%; color: #0000CC; text-decoration: none; font-style: normal; font-weight: normal}
table.londonbtn a:link {color: #0000CC; text-decoration: none; font-style: normal; font-weight: normal}
table.londonbtn a:hover {text-decoration: none; color: #000000; font-style: normal; font-weight: normal; background: #148ed9; padding: 0 }
table.londonbtn td {text-align: center; vertical-align: middle; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; }

/* Currently not used.  */
/* This won't work with IE 6 but works with other browsers (e.g. Firefox, Opera, Chromium etc.). */
/* img.photoframe {border-style: solid; border-width: 2px; border-color: transparent} */
/* img.photoframe:hover {border-style: solid; border-width: 2px; border-color: black} */

img.stdphotoL {width: 370px; border: none; margin-left: auto; margin-right: auto}
img.stdphotoP {height: 370px; border: none; margin-left: auto; margin-right: auto}
img.stdthumbL {width: 75px; border: none; margin-left: auto; margin-right: auto}
img.stdthumbP {height: 75px; border: none; margin-left: auto; margin-right: auto}
img.stdflag   {border: none}

/* This will work with IE 6 and other browsers (e.g. Firefox, Opera, Chromium etc.). */
/* Frame for landscape format images */
a.linkframe {display: block; margin: 2px; width: 370px}
a.linkframe:hover {display: block; margin: 0; border-style: solid; border-width: 2px; border-color: black }
/* Frame for portrait format images  with width 277 */
a.linkframeP {display: block; margin: 2px;  width: 277px}
a.linkframeP:hover {display: block; margin: 0; border-style: solid; border-width: 2px; border-color: black }
/* Frame for portrait format images with width 248 */
a.linkframeP2 {display: block; margin: 2px;  width: 248px}
a.linkframeP2:hover {display: block; margin: 0; border-style: solid; border-width: 2px; border-color: black }

/* Updates table */
/* table.updates { border-width: 1px; width: 100% } */

/* Frame for landscape format thumbnails  with width 75/60 */
a.thumbframe {display: block; margin: 2px; width: 75px}
a.thumbframe:hover {display: block; margin: 0; border-style: solid; border-width: 2px; border-color: black}
/* Frame for portrait format thumbnails  with width 60 */
a.thumbframeP {display: block; margin: 2px; width: 60px}
a.thumbframeP:hover {display: block; margin: 0; border-style: solid; border-width: 2px; border-color: black}

a.linkframe:focus {outline:none}

/* ***************************************** End standard image pages layout ******************************************* */

/* ************************************************************************************************************************************************************** */
/* Large image pages layout */
/* ************************************************************************************************************************************************************** */

/* Large image */
img.bigphotoL { width: 855px; border: none; }
img.bigphotoP { height: 855px; border: none; }

/* ***************************************** End large image pages layout ******************************************* */

/* ************************************************************************************************************************************************************** */
/* Miscellaneous settings */
/* ************************************************************************************************************************************************************** */

table.externallist a { text-decoration: underline; font-style: italic; font-weight: normal }
table.externallist a:hover { text-decoration: none; font-style: italic; font-weight: bold }

tr.externallist a { text-decoration: underline; font-style: italic; font-weight: normal }
tr.externallist a:hover { text-decoration: none; font-style: italic; font-weight: bold }

a.external { text-decoration: underline; font-style: italic; font-weight: normal }
a:hover.external { text-decoration: none; font-style: italic; font-weight: bold }

span.important { color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-size: x-small }
span.osgridref { color: #990000; background-color: transparent; font-weight: bold; font-style: normal; font-size: small }

/* Picture index */
div.index-level1 {background-color: #FFFFFF; text-indent: 1em; border: groove; width: 55%}
div.index-level1 a { display: block; width: 100%; color: #000000; background-color: #FFFFFF; text-decoration: none; text-indent: 1em; border: none}
div.index-level1 a:hover { display: block; width: 100%; color: #000000; background-color: #148ed9; text-indent: 1em; border: none}
div.index-sublevel1 { color: #000000; background-color: #FFFFA0; text-indent: 1em; width: 53%; margin-left: 2% }

div.index-level2 { background-color: #FFFFFF; text-indent: 1em; border: groove; width: 55%; margin-left: 4% }
div.index-level2 a { display: block; width: 100%; color: #000000; background-color: #FFFFFF; text-decoration: none; text-indent: 1em; border: none}
div.index-level2 a:hover { display: block; width: 100%; color: #000000; background-color: #148ed9; text-indent: 1em; border: none}
div.index-sublevel2 { background-color: #FFFFA0; text-indent: 1em; width: 53%; margin-left: 6% }

div.index-level3 { background-color: #FFFFFF; text-indent: 1em;  border: groove; width: 55%; margin-left: 6% }
div.index-level3 a { display: block; width: 100%; color: #000000; background-color: #FFFFFF; text-decoration: none; text-indent: 1em; border: none}
div.index-level3 a:hover { display: block; width: 100%; color: #000000; background-color: #148ed9; text-indent: 1em; border: none}
div.index-sublevel3 { background-color: #FFFFA0; text-indent: 1em;  width: 53%; margin-left: 8% }

div.index-level4 { background-color: #FFFFFF; text-indent: 1em;  border: groove; width: 55%; margin-left: 8% }
div.index-level4 a { display: block; width: 100%; color: #000000; background-color: #FFFFFF; text-decoration: none; text-indent: 1em; border: none}
div.index-level4 a:hover { display: block; width: 100%; color: #000000; background-color: #148ed9; text-indent: 1em; border: none}
div.index-sublevel4 { background-color: #FFFFA0; text-indent: 1em;  width: 53%; margin-left: 10% }

td.linkbody { background-color: #FFFFA0 }
td.credit1 { font-size: small }

td.currentpage {color: #FFFFFF; background-color: #767676; font-size: x-small}

.floatleft {
    float: left;
    margin-top: 4px;
    margin-left: 4px;
    margin-bottom: 4px;
    margin-right: 10px;
    border: 2px solid #0000BB;
}

table.topicbtn {height: 30px; width: 100%;  color: #000000; background-color: #999999}
table.topicbtn a { display: block; width: 100%; color: #0000CC; text-decoration: none; font-style: normal; font-weight: normal}
table.topicbtn a:link {color: #0000CC; text-decoration: none; font-style: normal; font-weight: normal}
table.topicbtn a:hover {text-decoration: none; color: #000000; font-style: normal; font-weight: normal; background: #148ed9; padding: 0 }
table.topicbtn tr {height: 30px}
table.topicbtn td {text-align: left; vertical-align: middle; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; }


.modalwin .box {
  	width: -webkit-min-content;
  	width: -moz-min-content;
  	width: min-content;
	min-width:1200px; /* Localhost */
/*	min-width:1050px;  UH server */
 	margin: 2% auto;
	padding:20px;
	background-color:#CCC;
	box-shadow: 0px 1px 26px -3px #777777;
	}

	.modalwin .title {
		margin:0;
		padding:0 0 10px 0px;
		border-bottom:1px #ccc solid;
		font-size:22px;
		}

	.modalwin .content {
		display:block;
		padding:10px 0 0 0px;
		font-size:14px;
		line-height:22px;
		}

.modalwin {
	/** Hide the modalwin */
	display: none;

	/** Apply basic modalwin styling */
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	color:#333333;
	}

.modalwin:target {
    /** Show modalwin when it is target */
    display: block;
    outline: none;
}

  .modalwin .close {
	background: #808081;
	color: #F00;
	line-height: 25px;
	position: absolute;
	right: 90px;
	text-align: center;
	top: 35px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

  .close:hover { background: #00d9ff; }