/* 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: 860px;
                     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 and remove underline for hover */
a:hover {text-decoration: none; font-style: normal; font-weight: bold}

/* 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 { cellpadding="0" cellspacing="0" }

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 }

/* ************************************************************************************************************************************************************** */
/* 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: 15px;
	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; }