/* ©2025 v31.001 dotguide.co.uk styles stylesheet */ /* styles+buttonpics+pictures>wide>small>smallwide>tablet */ body {width: 100%; height: 100%; background: white; background-size: 100%, 100vw; background-attachment: fixed; background-position: left top; color:black; z-index: -2; overflow-y: hidden; font-family: arial, verdana, sans-serif; font-size: 100%;} body#scrollwide {width: 100%; height: 100%; background: white; background-size: cover; background-attachment: fixed; background-position: left top; background-repeat: no-repeat; color:gray; z-index: -2; overflow-y: hidden; font-family: arial, verdana, sans-serif; font-size: 100%;} body#noscroll {width: 100%; height: 100%; background: white; background-size: 100%, 100vw; background-attachment: fixed; background-position: left top; color:gray; z-index: -2; overflow: hidden; font-family: arial, verdana, sans-serif; font-size: 100%;} body#cam {background: transparent; color: white; font-family: arial, verdana, sans-serif; overflow: auto; width: 660px; font-family: arial, verdana, sans-serif; font-size: 120%; font-weight: bold; text-shadow: 1px 1px 0px black; font-family: arial, verdana, sans-serif; font-size: 100%;} #map {display: block; float: right; top: 10px; z-index: 3; margin: 0px 4px 20px 8px; height: 240px; width: 100%; max-width: 980px; } #bigmap {z-index: 3; display: block; position: fixed; top: 150px; left: 20px; right: 20px; bottom: 40px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; border-radius: 20px;} #fullmap {z-index: 3; display: block; position: fixed; top: 20px; left: 20px; right: 20px; bottom: 40px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; border-radius: 20px;} div#header {z-index: 4; display: table-cell; background-image: url('graphics/yorkshireguide364.png'); background-repeat: no-repeat; color:gray; position: fixed; top: 2px; left: 10px; height: 140px; width: 480px; overflow: hidden; vertical-align: top; padding: 0px 0px 0px 60px; } a#header {z-index: 4; display: table-cell; background: transparent; background-image: url('graphics/yorkshireguide364.png'); background-repeat: no-repeat; color:gray; position: fixed; top: 2px; left: 10px; height: 140px; width: 480px; overflow: hidden; vertical-align: top; padding: 0px 0px 0px 60px; border-width: 0px;} div#address:before {display: table-cell; color:gray; position: fixed; top: 88px; right: 20px; text-align: right; text-shadow: 1px 1px black; height: 30px; overflow: hidden; content:""; font-family: arial, verdana, sans-serif; font-size: 3vh; font-weight: bold;} div#bar {display: block; color:gray; position: fixed; bottom: 8px; height: 24px; overflow: hidden; font-family: arial, verdana, sans-serif; font-size: 80%; font-weight: bold; text-align: top;} div#footer {display: block; position: fixed; bottom: 6px; height: 18px; width: 320px; right: 20px; background: transparent; color:gray; overflow: hidden; text-align: right; vertical-align: top; padding-top: 2px; font-family: arial, verdana, sans-serif; font-size: 80% } div#footer:before {content:"\00a9 2025 dotguide.co.uk";} copyright {display: block; text-align: right; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 80%; opacity: 0.9; z-index: 3;} copyright:after {content:"\00a9 2025 dotguide.co.uk \2007 \2007 \2007 \2007";} /* div#text */ div#content {color:black; display: table-cell; position: absolute; top: 160px; bottom: 36px; right: 2px; left: 10px; width: 100%; overflow: auto; font-family: arial, verdana, sans-serif; text-shadow: 1px 1px 0px black; font-size: 100%;} div#widecontent {color:black; display: table-cell; position: absolute; top: 160px; bottom: 36px; right: 2px; left: 10px; width: 2400px; overflow: auto; font-family: arial, verdana, sans-serif; text-shadow: 1px 1px 0px black; } div#mapcontent {color:black; display: block; position: fixed; top: 150px; left: 200px; right: 20px; bottom: 40px; overflow: auto; border: 1px solid #334477; padding: 0px 24px 5px 20px; font-family: arial, verdana, sans-serif; font-size: 120%; font-weight: bold; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; border-radius: 20px;} /* Note: div#text left and right wide to enable tall screen scrolling. Modified back in wide.css */ div#text {background-color: rgba(0, 0, 0, 0.4); color:gray; display: block; position: fixed; top: 150px; left: 0px; right: 0px; bottom: 40px; overflow-x: hidden; border: 1px solid #334477; border-spacing: 3px 3px 3px 3px; padding: 0px 6px 5px 9px; font-family: arial, verdana, sans-serif; font-size: 1.6em; font-weight: bold; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; border-radius: 20px;} div#pageheader {position: absolute; top: 0px; left: 0px; vertical-align: top; z-index: 5;} div.hidden {display: none; opacity: 0.2;} div#quicklinks {background-color: rgba(0, 0, 0, 0); color: rgba(255, 255, 255, 0.5); display: block; position: fixed; top: 580px; left: 10px; right: 18px; bottom: 60px; overflow: hidden; padding: 0px 6px 5px 9px; font-family: arial, verdana, sans-serif; font-size: 1.5vh; font-weight: bold;} /* boxes and spacer */ tweet {position:relative; display:inline-block; float: right; z-index: 3; border: 1px solid #bbbbbb; margin: 0px 2px 10px 8px; max-width: 320px;} /* for Twitter */ tweet:before {display: block; padding-left: 4px; background-color: rgba(255, 255, 255, 0.9); color: white; margin: 0px 0px 4px 0px;font-size: 50%; opacity: 0.6; content:" Twitter content";} /* for Twitter */ tweetwide {position:relative; display:inline-block; float: right; z-index: 3; border: 1px solid #bbbbbb; margin: 0px 52px 10px 8px; max-width: 620px; } /* for Twitter */ tweetwide:before {display: block; padding-left: 4px; background-color: rgba(255, 255, 255, 0.9); color: white; margin: 0px 0px 4px 0px;font-size: 50%; opacity: 0.6; content:" Twitter content";} /* for Twitter */ tweetright {position:relative; display:block; float: right; z-index: 3; border: 1px solid #bbbbbb; margin: 0px 32px 10px 8px; max-width: 640px; } /* for Twitter */ tweetright:before {display: block; padding-left: 4px; background-color: rgba(255, 255, 255, 0.9); color: white; margin: 0px 0px 4px 0px;font-size: 50%; opacity: 0.6; content:" Twitter content";} /* for Twitter */ ad {position:relative; display:inline-block; float: right; z-index: 3; background-color: rgba(0, 0, 0, 0.1); margin: 0px 2px 10px 8px; width: 320px; height: 320px;} /* for ad */ ad:before {display: block; padding-left: 4px; background-color: rgba(255, 255, 255, 0.9); color: white; font-size: 50%; opacity: 0.6; content:" Sponsored";} /* for ad */ gyp {position:relative; display:inline-block; float: right; z-index: 3; background-color: rgba(255, 255, 255, 0.6); margin: 0px 2px 10px 8px; width: 320px; height: 650px;} /* for ad */ gyp:before {display: block; padding-left: 4px; background-color: rgba(255, 255, 255, 0.9); color: white; font-size: 50%; opacity: 0.6; content:" Great Yorkshire Pub 2018";} /* for ad */ post {position:relative; display:inline-block; width: 97%; height: auto; margin: 0px 0px 20px 0px; background-color: rgba(255, 255, 255, 0.5); color: black; padding: 5px 10px 10px 10px; border-radius: 12px; border: 1px solid #334477;} notice {position:relative; display:inline-block; width: 97%; height: auto; margin: 0px 0px 20px 0px; background-color: rgba(255, 255, 255, 0.5); color: black; padding: 5px 10px 10px 10px; border-radius: 12px; border: 1px solid red;} flyer {position:relative; display:inline-block; width: 97%; height: auto; margin: 0px 0px 20px 0px; background-color: rgba(166, 200, 250, 0.6); color: black; padding: 5px 10px 10px 10px; border-radius: 12px; border: 1px solid #334477;} subsection {position:relative; display:inline-block; width: 97%; height: auto; margin: 0px 0px 20px 0px; background-color: rgba(255, 255, 255, 0); color: white; padding: 5px 10px 10px 10px; border-radius: 12px; border: 1px solid skyblue;} section {position:relative; display:inline-block; width: 97%; height: auto; margin: 0px 0px 20px 0px; background-color: rgba(255, 255, 255, 0); color: white; padding: 5px 10px 10px 10px; border-radius: 12px; border: 0px;} hunk {position:relative; display:inline-block; width: 98%; height: auto; margin: 0px 0px 0px 0px; background-color: rgba(255, 255, 255, 0); color: white; padding: 0px 0px 4px 4px; border: 0px; } chunk {position:relative; display:inline-block; width: 49%; height: auto; margin: 0px 0px 0px 0px; background-color: rgba(255, 255, 255, 0); color: white; padding: 0px 4px 4px 4px; border: 0px; } spacer {display:table-cell; vertical-align: top; min-width: 5px; background-color: skyblue; } /* polls */ table.polls {table-layout: fixed; width: 96%; word-break: break-all;} lab- {display:inline-block; background:red; color: white;} lab {display:table-cell; background:red; overflow: hidden; color: white; height: 50px; padding: 6px 1px 1px 2px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%; width: 150px;} lab:after {font-size: 50%; opacity: 0.6; content:" Labour ";} labcoop {display:table-cell; overflow: hidden; background:red; color: white; height: 50px; padding: 6px 1px 1px 2px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%; width: 150px; } labcoop:after {font-size: 50%; opacity: 0.6; content:" Lab Coop ";} con- {display:inline-block; background:blue; color: white;} con {display:table-cell; background:blue; overflow: hidden; color: white; height: 50px; padding: 6px 1px 1px 2px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%; width: 150px;} con:after {font-size: 50%; opacity: 0.6; content:" Conservative ";} libdem- {display:inline-block; background:orange; color: white;} libdem {display:table-cell; background:orange; overflow: hidden; color: white; height: 50px; padding: 6px 1px 1px 2px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%; width: 150px;} libdem:after {font-size: 50%; opacity: 0.6; content:" Lib Dem ";} lib {display:table-cell; background:yellow; overflow: hidden; color: white; height: 50px; padding: 6px 1px 1px 2px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%; width: 150px;} lib:after {font-size: 50%; opacity: 0.6; content:" Liberal ";} ukip {display:table-cell; background:purple; overflow: hidden; color: white; height: 50px; padding: 6px 1px 1px 2px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%; width: 150px; } ukip:after {font-size: 50%; opacity: 0.6; content:" UKIP ";} green {display:table-cell; background:green; overflow: hidden; color: white; height: 50px; padding: 6px 1px 1px 2px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%; width: 150px;} green:after {font-size: 50%; opacity: 0.6; content:" Green ";} greenp {display:table-cell; background:green; overflow: hidden; color: white; height: 50px; padding: 6px 1px 1px 2px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%; width: 150px;} greenp:after {font-size: 50%; opacity: 0.6; content:" Green ";} noc- {display:inline-block; background:gray; color: white;} ind- {display:inline-block; background:lightgray; color: white;} ind {display:table-cell; background:lightgray; overflow: hidden; color: white; height: 50px; padding: 6px 1px 1px 2px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%; width: 150px;} ind:after {font-size: 50%; opacity: 0.6; content:" Ind ";} party {display:table-cell; background:lightgray; overflow: hidden; color: white; height: 50px; padding: 6px 1px 1px 2px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%; width: 150px;} party span {font-size: 50%; opacity: 0.6;} partykey {display:table-cell; font-size: 50%; opacity: 0.6; text-align: right;} vac {display:table-cell; background:transparent; overflow: hidden; color: white; border: solid 1px; height: 50px; padding: 6px 1px 1px 2px; width:10%; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%; width: 150px;} vac:after {font-size: 50%; opacity: 0.6; content:" Vac ";} await {display:table-cell; background:transparent; overflow: hidden; color: white; border: solid 1px; height: 50px; padding: 6px 1px 1px 2px; width:10%; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%; width: 70%;} await:after {font-size: 50%; opacity: 0.6; content:" Awaiting result ";} /* */ iframe {background: transparent; overflow: hidden; border-radius: 12px; } iframe {position: relative; left: 42px; background: transparent; overflow: hidden; border-radius: 12px; } iframe.cam {overflow: hidden; position: relative; background: transparent; display: table-cell; background: transparent; height: 400px; width: 960px; left: 4px; } /* use? */ iframe.webcam {display: block; position: relative; overflow: scroll; left: 8px; background-color: rgba(0, 0, 0, 0.6); height: 520px; max-height: 520px; width: 688px;} div#camnotes { position: relative; display: block; left: 640px; top: -40px; width: 300px; font-family: arial, verdana, sans-serif; font-size: 3.2vh; } div.block {display: block; min-height: 320px;} /* menubutton */ div.menubutton {z-index: 5; display: block; position: absolute; width: 66%; height: 80px; padding: 0px 8px 0px 8px; top: 18px; right: 0px; font-size: 36px; font-family: arial, verdana, sans-serif; font-style: bold; text-align: left; overflow: hidden;} div.menubutton a {display: block; position: relative; text-decoration: none; background: transparent; color: black; font-style: bold; border-width: 0px; border-style: solid; margin: 5px 5px 15px 5px; padding: 7px 15px 7px 15px; border-color: lightgray; border-radius: 8px; } div.menubutton:hover {background: white; opacity: 0.9; color: black; height: 95vh; border-width: 1px; border-style: solid; border-color: lightgray; border-radius: 8px; border-color: lightgray; overflow: auto;} div.menubutton a:hover {background: chartreuse; opacity: 1; } /* any use? */ div#videoscreen {display: table-cell; position: fixed; top: 110px; left: 180px; min-width: 320px; width: 80%; background: black; color:white; overflow: hidden; border: 5px solid #334477; padding: 4px 2px 2px 2px; font-family: arial, verdana, sans-serif; font-size: 120%; font-weight: bold; text-align: center;} div#videooverlay:before {display: table-cell; position: fixed; top: 110px; left: 180px; width: 80%; color:white; background: transparent; overflow: hidden; border: 5px solid #334477; padding: 4px 2px 2px 2px; font-family: arial, verdana, sans-serif; font-size: 120%; font-weight: bold; text-align: left; content:"Click here to play video"; z-index: 4;} div#videotext {display: block; color:white; background: transparent; position: fixed; top: 102px; left: 6px; height: 560px; width: 160px; overflow: hidden; font-family: arial, verdana, sans-serif; font-size: 100%; font-weight: bold;} div#footersmall:before {display: table-cell; position: fixed; bottom: 12px; height: 20px; width: 320px; left: 180px; background: transparent; color:white; overflow: hidden; text-align: left; vertical-align: top; padding-top: 2px; font-family: arial, verdana, sans-serif; font-size: 70%; content:"Click above to play video"; z-index: 2;} div#mobile {display: table-cell; position: fixed; top: 580px; left: 20px; height: 240px; width: 560px; text-align: left; vertical-align: bottom; background: transparent; color:white; overflow: hidden; padding-top: 2px; font-family: arial, verdana, sans-serif; font-size: 100%;} /* webcam */ div.cambackbox {background: transparent; color: white; padding-left: 20px; width: 640px; font-family: arial, verdana, sans-serif; font-size: 120%; font-weight: bold;} div.clipwrapper1 {position: relative; height: 280px;} div.clipwrapper2 {position: relative; top: -410px; left: -200px; height: 280px;} img.webcam1 {position: absolute; top: -20px; clip: rect(400px, 960px, 680px, 320px);} /* crops to 640x280 */ img.webcam2 {position: absolute; top: -20px; clip: rect(400px, 840px, 680px, 200px);} /* crops to 640x280 */ img.webcam {position: fixed; height: 360px; width: 640px; top: 0px; left: 0px; border: solid 0px black; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; z-index: -1; } table.black {position: absolute; bottom: 0px; background: #111111; color: white; width: 97%; margin-left: auto; margin-right: auto; padding: 5px; font-family: arial, verdana, sans-serif; font-size: 100%;} /* standard links */ a {font-family: arial, verdana, sans-serif; font-size: 100%; text-decoration: none; color: white; background-color: rgba(180, 180, 240, 0.4); border-width: 1px; border-style: solid; border-color: #ddddee; padding: 0px 3px 0px 3px;} a.name {position:absolute; visibility: hidden; } a.right {display: inline-block; float: right; color: #999999; text-decoration: none; background: transparent; width: 650px; border-width: 0px; padding: 0px 0px 0px 0px; } a.box {display: inline-block; float: right; color: #999999; text-decoration: none; background: transparent; max-width: 50vw; width: 320px; border-width: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 10px; } a.thumb {display: inline-block; float: right; color: #999999; text-decoration: none; background: transparent; max-width: 33vw; width: 155px; border-width: 0px; padding: 0px 0px 0px 0px; } post a {color: white;} notice a {color: white;} flyer a {color: white;} section a {color: white;} subsection a {color: white;} a:hover {background: chartreuse;} a:active {background: yellow;} a.clear {color: #999999; text-decoration: none; background: transparent; border-width: 0px; } /* Tooltips */ tooltip {position: relative; display: inline-block; color: #6699ff; border-bottom: 1px solid #6699ff; } tooltip tooltiptext {visibility:hidden; position: absolute; top: -5px; right: 0px; width: 200px; background-color: rgba(102, 153, 255, 0.8); color: white; font-size: 80%; text-align: left; padding: 8px 8px; border-radius: 0px 8px 8px 8px; z-index: 11;} tooltip:hover tooltiptext {visibility: visible;} /* Basic buttons */ a.button {display: table-cell; background-image: none; color: darkblue; background-color: rgba(230, 230, 255, 0.6); font-size: 24pt; padding-left: 4px; margin: 0px 4px 12px 0px; border: solid 1px darkblue; text-decoration: none; height: 30px; min-width: 360px; border-radius: 4px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; } post a.button {display: table-cell; background-image: none; color: darkblue; background-color: rgba(210, 210, 255, 0.7); font-size: 24pt; padding-left: 4px; margin: 0px 4px 12px 0px; border: solid 1px darkblue; text-decoration: none; height: 30px; min-width: 360px; border-radius: 4px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; } notice a.button {display: table-cell; background-image: none; color: darkblue; background-color: rgba(210, 210, 255, 0.7); font-size: 24pt; padding-left: 4px; margin: 0px 4px 12px 0px; border: solid 1px darkblue; text-decoration: none; height: 30px; min-width: 360px; border-radius: 4px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; } section a.button {display: table-cell; background-image: none; color: darkblue; background-color: rgba(210, 210, 255, 0.7); font-size: 24pt; padding-left: 4px; margin: 0px 4px 12px 0px; border: solid 1px darkblue; text-decoration: none; height: 30px; min-width: 360px; border-radius: 4px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; } subsection a.button {display: table-cell; background-image: none; color: darkblue; background-color: rgba(210, 210, 255, 0.7); font-size: 24pt; padding-left: 4px; margin: 0px 4px 12px 0px; border: solid 1px darkblue; text-decoration: none; height: 30px; min-width: 360px; border-radius: 4px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; } a.shortbutton {display: table-cell; background-image: none; color: darkblue; background-color: rgba(230, 230, 255, 0.6); font-size: 24pt; font-weight: bold; padding-left: 4px; margin: 0px 4px 12px 0px; border: solid 1px darkblue; text-decoration: none; height: 30px; min-width: 155px; border-radius: 4px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; } a.mappopbutton {display: table-cell; position: relative; float: right; top: -12px; right: 0px: background-image: none; color: darkblue; background-color: rgba(230, 230, 255, 0.6); font-family: arial, verdana, sans-serif; font-weight: bold;font-size: 1.5em; padding: 2px 2px 2px 8px; margin: 0px 0px 0px 0px; border: solid 1px darkblue; text-decoration: none; height: 28px; width: 72px; border-radius: 4px; box-shadow: 1px 1px 1px black; -webkit-box-shadow: 1px 1px 1px black; z-index: 4;} a.shortmappopbutton {display: table-cell; position: relative; float: right; top: -12px; right: 0px: background-image: none; color: darkblue; background-color: rgba(230, 230, 255, 0.6); font-family: arial, verdana, sans-serif; font-weight: bold;font-size: 1.5em; padding: 2px 2px 2px 2px; margin: 0px 0px 0px 0px; border: solid 1px darkblue; text-decoration: none; height: 28px; width: 24px; border-radius: 4px; box-shadow: 1px 1px 1px black; -webkit-box-shadow: 1px 1px 1px black; z-index: 4;} a.mapbutton {position: absolute; top: 20px; right: 50px; z-index: 5; font-size: 20pt; display: table-cell; background-image: none; color: darkblue; background-color: rgba(180, 180, 240, 0.4); font-weight: bold; padding-left: 4px; margin: 0px 4px 12px 0px; border: solid 1px darkblue; text-decoration: none; height: 30px; min-width: 155px; border-radius: 4px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; } a.cmapbutton {position: absolute; top: 20px; right: 50px; z-index: 5; font-size: 20pt; display: table-cell; background-image: none; color: darkblue; background-color: rgba(255, 255, 255, 0.6); font-weight: bold; padding-left: 4px; margin: 0px 4px 12px 0px; border: solid 1px darkblue; text-decoration: none; height: 30px; min-width: 155px; border-radius: 4px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; } a.extbutton {display: table-cell; background-image: none; color: darkblue; background-color: rgba(230, 230, 230, 0.4); font-size: 24pt; padding-left: 4px; margin: 0px 4px 12px 0px; border: solid 1px darkblue; text-decoration: none; height: 30px; min-width: 360px; border-radius: 4px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; } a.mapreturn {z-index: 5; position: fixed; top: 160px; right: 30px; font-family: arial, verdana, sans-serif; font-weight: bold;} div.fb-like {position: relative; left: -40px; bottom: -5px;} a.button span{ } a.button:hover {background: chartreuse;} a.button:active {background: yellow;} /* Basic bar buttons */ a.nullbar{display: table-cell; background-image: none; color: gray; background: white; font-size: 1.6em; text-decoration: none; position: relative; height: 30px; width: 280px; text-align: left; padding-left: 6px; padding: 2px 0px 2px 0px;} a.bar{display: table-cell; background-image: none; color: darkblue; background: skyblue; font-size: 1.6em; text-decoration: none; position: relative; height: 30px; width: 88px; border-width: 1px; border-color: darkblue; padding: 2px 0px 2px 0px;} a.bar span{ } a.bar:hover {background: chartreuse;} a.bar:active {background: yellow;} /* Go back button */ a.mapback {display: table-cell; position: fixed; height: 120px; width: 100px; top: 10px; right: 20px; z-index: 5; background: transparent; background-image: url('buttonpics/back.jpg'); background-repeat: no-repeat; background-position: center; border-width: 1px; border-color: #334477; border-style: solid; font-family: arial, helvetica, sans-serif; font-weight: bold; text-decoration: none; padding: 3px 10px 0px 10px; border-radius: 20px 20%; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black;} a.mapback:before {display: block; position : static; top: 10px; text-align: left; font-size: 18pt; content:"Go back";} a#backpagebut {position: fixed; height: 100px; width: 100px; top: 246px; right: 24px; z-index: 5; background: transparent; opacity: 0.7; color: blue; background-image: url('graphics/backtopagebut.png'); background-repeat: no-repeat; background-position: right top; background-size: 100%; border-width: 1px; border-radius: 8px; box-shadow: 3px 3px 3px gray; -webkit-box-shadow: 3px 3px 3px gray;} a#backpagebut:hover {background: chartreuse; background-image: url('graphics/backtopagebut.png'); background-repeat: no-repeat; background-position: right top; background-size: 100%; } a#backpagebut:active {background: yellow; background-image: url('graphics/backtopagebut.png'); background-repeat: no-repeat; background-position: right top; background-size: 100%; } a#atoybut {position: fixed; height: 100px; width: 100px; top: 124px; right: 24px; z-index: 5; background: transparent; opacity: 0.7; background-image: url('graphics/atoy.png'); background-repeat: no-repeat; background-size: cover; border-width: 1px; border-radius: 8px; box-shadow: 3px 3px 3px gray; -webkit-box-shadow: 3px 3px 3px gray;} a#atoybut:hover {background: chartreuse; background-image: url('graphics/atoy.png'); background-repeat: no-repeat; background-size: cover; } a#atoybut:active {background: yellow; background-image: url('graphics/atoy.png'); background-repeat: no-repeat; background-size: cover; } a#menubut {position: fixed; height: 100px; width: 100px; top: 8px; right: 24px; z-index: 5; background: transparent; background-image: url('graphics/menubut.png'); background-repeat: no-repeat; background-position: right top; background-size: 100%; border-width: 0px; border-radius: 8px;} a#menubut:hover {background: chartreuse; background-image: url('graphics/menubut.png'); background-repeat: no-repeat; background-position: right top; background-size: 100%; } a#menubut:active {background: yellow; background-image: url('graphics/menubut.png'); background-repeat: no-repeat; background-position: right top; background-size: 100%; } /* menu button +++++++ */ a#menu {position: fixed; height: 120px; width: 100px; top: 10px; right: 20px; z-index: 5; background: transparent; background-image: url('graphics/menu.png'); background-repeat: no-repeat; background-position: right top; background-size: 100%; padding: 3px 10px 0px 10px; border-width: 0px;} a#menu:hover {background: chartreuse; background-image: url('graphics/menu.png'); background-repeat: no-repeat; background-position: right top; background-size: 100%; } a#menu:active {background: yellow; background-image: url('graphics/menu.png'); background-repeat: no-repeat; background-position: right top; background-size: 100%; } /* images */ video {float:right; z-index: 3; margin: 0px 2px 10px 8px; } tube {display:block; position:relative; top: -16px; background: black; float:right; z-index: 3; margin: 0px 2px 10px 8px; width: 650px; height: 336px; } tube:before {display: block; padding-left: 4px; background-color: rgba(255, 100, 100, 0.9); color: white; font-size: 50%; opacity: 0.6; content:" Video from YouTube";} /* for you tube */ imgbox650 {position: relative; float: right; width: 650px; max-width: 100%; height: 320px; margin: 0px 2px 10px 8px;} /* image container div legacy version of below */ div.caption650 {position: absolute; width: 650px; max-width: 100%; height: 16px; bottom: 0px; left: -2px; color: #333333; background-color: rgba(255, 255, 255, 0.5); text-align: left; font-size: 0.5em; opacity: 0.8; } img650 {position: relative; float: right; width: 650px; max-width: 100%; height: 320px; margin: 0px 2px 10px 8px; background-position: center;} /* image container div new version of above*/ subsection#visit img650 {position: relative; float: right; width: 320px; max-width: 100%; height: 155px; margin: 0px 2px 10px 8px; background-position: center; background-size: 320px, 155px, cover;} cap650 {position: absolute; width: 645px; padding-left: 5px; max-width: 100%; height: 16px; bottom: 0px; left: 0px; color: #333333; background-color: rgba(255, 255, 255, 0.6); text-align: left; font-size: 0.5em; opacity: 0.8; } cred650 {position: absolute; width: 640px; padding-right: 10px; max-width: 100%; height: 16px; bottom: 0px; right: 0px; color: #333333; background-color: rgba(255, 255, 255, 0); text-align: left; font-size: 0.5em; opacity: 0.7; font-style: italic; text-align: right;} img320 {position: relative; float: right; width: 320px; max-width: 100%; height: 320px; margin: 0px 2px 10px 8px; background-position: center;} cap320 {position: absolute; width: 315px; padding-left: 5px; max-width: 100%; height: 32px; bottom: 0px; left: 0px; color: #333333; background-color: rgba(255, 255, 255, 0.6); text-align: left; font-size: 0.5em; opacity: 0.8; } cred320 {position: absolute; width: 310px; padding-right: 10px; max-width: 100%; height: 16px; bottom: 0px; right: 0px; color: #333333; background-color: rgba(255, 255, 255, 0); text-align: left; font-size: 0.5em; opacity: 0.7; font-style: italic; text-align: right;} img320w {position: relative; float: right; width: 320px; max-width: 100%; height: 155px; margin: 0px 2px 10px 8px; background-position: center; background-size: 320px, 155px, cover;} cap320w {position: absolute; width: 315px; padding-left: 5px; max-width: 100%; height: 32px; bottom: 0px; left: 0px; color: #333333; background-color: rgba(255, 255, 255, 0.6); text-align: left; font-size: 1em; opacity: 0.8; } cred320w {position: absolute; width: 310px; padding-right: 10px; max-width: 100%; height: 16px; bottom: 0px; right: 0px; color: #333333; background-color: rgba(255, 255, 255, 0); text-align: left; font-size: 0.5em; opacity: 0.7; font-style: italic; text-align: right;} img {z-index: 10;} img.right {float: right; z-index: 3; margin: 0px 2px 10px 8px; max-width: 100%; z-index: 10;} img.centre {z-index: 3; display: block; margin-left: auto; margin-right: auto; max-width: 100%;} img.centresmall {z-index: 3; display: block; margin-left: auto; margin-right: auto; height: 155px; width: 320px;} img.box {float: right; z-index: 3; margin: 0px 2px 10px 8px; max-width: 50vw; width: 320px; max-height: 320px; z-index: 10;} img.thumb {float: right; z-index: 3; margin: 0px 2px 5px 3px; max-width: 33vw; width: 155px; max-height: 155px; z-index: 10;} img.tiny {float: right; max-height: 24px; } img.blob{position: relative; top: 8px; margin: 0px 2px 0px 0px; max-width: 48px; max-height: 48px;} img.tinyblob{position: relative; top: 3px; margin: 0px 2px 0px 0px; max-width: 24px; max-height: 24px;} img.full{width: 100%;} img.160{height: 160px; width: 160px; margin: 0px 2px 0px 0px; } img.webcam{position: relative; top: -68px; z-index: -1; width: 100%;} /* map popup */ img.mappop {float: left; height: 32px; width: 32px; margin: 0px 2px 0px 0px; } /* replaced by mappopblob */ img.mappopblob {float: left; height: 32px; width: 32px; margin: 0px 2px 0px 0px; } img.mappic {position: relative; top: -12px; float: right; z-index: 10; margin: 0px 0px 6px 4px; max-height: 156px; max-width: 100%;} div.mappopdepth {height: 6px;} div.mappopnote {position: relative; display: block; top: 0px; left: 0px; width: 650px;} /* pplogo */ div#pplogo {position:absolute; bottom: 36px; right: 556px;} div#pplogo a {color: #999999; text-decoration: none; background: transparent; border-width: 0px; } div#pp2 {position:absolute; bottom: 10px; right: 474px;} div#pp2:hover {background: chartreuse;} div#pp5 {position:absolute; bottom: 10px; right: 330px;} div#pp5:hover {background: chartreuse;} div#pp10 {position:absolute; bottom: 10px; right: 186px;} div#pp10:hover {background: chartreuse;} div#ppany {position:absolute; bottom: 10px; right: 10px;} div#ppany:hover {background: chartreuse;} div#ppother:before {display: block; position:absolute; color: white; width:170px; bottom: 70px; right: 10px; text-align: left; vertical-align: top; font-size: 60%; content:"Other amount";} /* form */ form {z-index: 4;} input {font-family: arial, verdana, sans-serif; font-size: 22px; font-weight: bold; text-decoration: none; color: white; background-color: rgba(200, 255, 255, 0.4); border-width: 1px; border-style: solid; border-color: #ddddee; padding: 0px 3px 0px 3px;} input[type="submit"] {display: table-cell; background-image: none; color: darkblue; background-color: rgba(210, 210, 255, 0.7); font-family: arial, verdana, sans-serif; font-size: 24px; font-weight: bold; padding-left: 4px; margin: 0px 4px 12px 0px; border: solid 1px darkblue; text-decoration: none; text-align: left; height: 30px; min-width: 360px; border-radius: 4px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; } input[type="reset"] {display: table-cell; background-image: none; color: black; background-color: rgba(210, 210, 210, 0.7); font-family: arial, verdana, sans-serif; font-size: 24px; font-weight: bold; padding-left: 4px; margin: 0px 4px 12px 0px; border: solid 1px black; text-decoration: none; text-align: left; height: 30px; min-width: 160px; border-radius: 4px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; } textarea {font-family: arial, verdana, sans-serif; font-size: 22px; font-weight: bold; text-decoration: none; color: white; background-color: rgba(200, 255, 255, 0.4); border-width: 1px; border-style: solid; border-color: #ddddee; padding: 0px 3px 0px 3px;} select {color: white; background-color: rgba(210, 210, 255, 0.4); font-family: arial, verdana, sans-serif; font-size: 24px; font-weight: bold; padding-left: 4px; border: solid 1px darkblue; text-align: left; height: 30px; } option {color: darkblue; background-color: rgba(210, 210, 255, 0.7); font-family: arial, verdana, sans-serif; font-size: 24px; font-weight: bold; padding-left: 4px; border: solid 1px darkblue; text-align: left; height: 30px; } input[type="submit"]:hover {background-color: chartreuse; } input[type="reset"]:hover {background-color: chartreuse; } input#photo:hover {background-color: chartreuse;} input[type="checkbox"] {transform: scale(2.4); border: 4px black;} input[type="radio"] {} /* text */ div.tab {text-indent: 120px;} div.right {text-align: right;} /* ...................site specific colour */ h1 {display: block; position: relative; top: 30px; color: yellowgreen; font-family: Arial, Helvetica, sans-serif; font-size: 1.4em; font-weight: 600; padding-top: 5px; padding-bottom: 5px; z-index: 3; text-shadow: 1px 2px gray;} h1.cam {position: fixed; top: -10px; left: 16px; z-index: 3; font-size: 1.4em;} h1.camdate {position: fixed; color: chartreuse; top: 290px; left: 70px; z-index: 3; font-size: 1em;} h1.camtime {display: block; position: fixed; color: white; top: 290px; left: 16px; z-index: 3; font-size: 1em;} h1.camtext {display: block; position: fixed; color: white; top: 60px; left: 650px; z-index: 3; font-family: Arial, Helvetica, sans-serif; font-size: 1em;} h1.camcopy {display: block; position: fixed; top: 320px; left: 16px; z-index: 3; font-size: 0.5em;} /* ...................site specific background */ h2 {display: block; background: rgba(50,50,120, .5); color: white; font-family: Arial, Helvetica, sans-serif; font-size: 1.4em; vertical-align: top; width: 97%; padding: 1px 0px 3px 8px; vertical-align: middle;} notice h2 {display: block; background: rgba(120,50,50, .5); color: white; font-family: Arial, Helvetica, sans-serif; font-size: 1.4em; vertical-align: top; width: 97%; padding: 1px 0px 3px 8px;} h2.map {font-size: 1.8em; vertical-align: top; min-width: 292px;} /* ...................replaced by mappop */ h2.mappop {font-size: 1.8em; vertical-align: top; min-width: 292px;} /* ...................site specific */ h3 {display: block; background: white; color: darkgray; font-family: Arial, Helvetica, sans-serif; font-size: 1.4em; width: 97%; padding: 1px 0px 3px 8px; vertical-align: middle;} subsection h3 {display: block; background: white; color: darkgray; font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; width: 97%; padding: 0px 0px 3px 8px; } subsection h3 img {vertical-align: -3px;} post h3 {display: block; background: white; color: darkgray; font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; width: 97%; padding: 0px 0px 3px 8px; } h4 {font-size: 0.6em;} ul {list-style-position: outside; } /* position spans */ span.low {position: relative; top: 4px;} span.lower {position: relative; top: 10px;} span.high {position: relative; top: -3px;} span.higher {position: relative; top: -10px;} span.webcamdate{position: relative; top: -100px; left:10px; color: lightblue; } span.webcamtime{position: relative; top: -100px; left:10px; color: white; } span.webcamnotes{position: relative; top: -100px; left:20px; color: white; font-size: 10pt; opacity: 0.6; } /* colour spans */ span.white{color: white; font-weight: bold;} span.black{color: black; font-weight: bold;} span.lightblue{color: lightblue; font-weight: bold;} span.palette1{color: chartreuse;} span.palette2{color: PaleGreen;} span.palette3{color: YellowGreen;} span.palette4{color: Khaki;} span.palette5{color: Salmon;} span.palette6{color: Tomato;} span.palette7{color: Red ; opacity: 0.4;} span.green{color: forestgreen;} span.purple {color: white; background: purple; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} purple {color: white; background: purple; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} span.red{color: white; background: red; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} red{color: white; background: red; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} span.amber{color: white; background: orange; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} amber{color: white; background: orange; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} span.yellow{color: white; background: yellow; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} yellow{color: white; background: yellow; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} span.grn{color: white; background: green; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} grn{color: white; background: green; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} /* green clashes with green party - needs change */ span.mroad {color: white; background: blue; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px; } mroad {color: white; background: blue; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px; } span.mroad- {color: white; background-color: rgba(0, 0, 255, 0.6); padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px; } mroad- {color: white; background-color: rgba(0, 0, 255, 0.6); padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px; } span.aroad {color: white; background: green; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} aroad {color: white; background: green; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} span.aroad- {color: white; background-color: rgba(0, 128, 0, 0.5); padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} aroad- {color: white; background-color: rgba(0, 128, 0, 0.5); padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px; } span.broad {color: white; background: orange; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px; } broad {color: white; background: orange; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px; } span.broad- {color: white; background-color: rgba(255, 165, 0, 0.5); padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px; } broad- {color: white; background-color: rgba(255, 165, 0, 0.5); padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px; } span.rroad {color: black; background: white; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px; } rroad {color: black; background: white; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px; } span.rroad- {color: black; background-color: rgba(255, 255, 255, 0.5); padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px; } rroad- {color: black; background-color: rgba(255, 255, 255, 0.5); padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px; } span.busroute {color: orange; background: black;} busroute {color: orange; background: black;} b1 {display:block; position: relative; left: -44px; top: -16px; background-size: contain; width: 36px; height: 36px; z-index: 5; } b2 {display:block; position: fixed; text-align: left; left: -6px; bottom: 0px; background-size: contain; width: 36px; height: 36px; z-index: 5; } pub {display:block; position: relative; left: 36px; background-image: url('blobs/pub.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } club {display:block; position: relative; left: 36px; background-image: url('blobs/pub.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } wc {display:block; position: relative; left: 36px; background-image: url('blobs/wc.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } sch {display:block; position: relative; left: 36px; background-image: url('blobs/school.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } bus {display:block; position: relative; left: 36px; background-image: url('blobs/bus.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } busi {display:block; position: relative; left: 36px; background-image: url('blobs/businf.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } busi {display:block; position: relative; left: 36px; background-image: url('blobs/businf.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } road {display:block; position: relative; left: 36px; background-image: url('blobs/car.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } grg {display:block; position: relative; left: 36px; background-image: url('blobs/garage.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } fuel {display:block; position: relative; left: 36px; background-image: url('blobs/fuel.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } hw {display:block; position: relative; left: 36px; background-image: url('blobs/hh.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } nd {display:block; position: relative; left: 36px; background-image: url('blobs/nd.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } nym {display:block; position: relative; left: 36px; background-image: url('blobs/nym.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } pd {display:block; position: relative; left: 36px; background-image: url('blobs/pd.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } yd {display:block; position: relative; left: 36px; background-image: url('blobs/yd.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } path {display:block; position: relative; left: 36px; background-image: url('blobs/path.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } steam {display:block; position: relative; left: 36px; background-image: url('blobs/steam.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } sta {display:block; position: relative; left: 36px; background-image: url('blobs/rail.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } stai {display:block; position: relative; left: 36px; background-image: url('blobs/railgosh.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } nosta {display:block; position: relative; left: 36px; background-image: url('blobs/norail.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } cnl {display:block; position: relative; left: 36px; background-image: url('blobs/canal.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } cpw {display:block; position: relative; left: 36px; background-image: url('blobs/worship.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } po {display:block; position: relative; left: 36px; background-image: url('blobs/post.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } popt {display:block; position: relative; left: 36px; background-image: url('blobs/popt.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } pom {display:block; position: relative; left: 36px; background-image: url('blobs/pom.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } bank {display:block; position: relative; left: 36px; background-image: url('blobs/bank.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } lby {display:block; position: relative; left: 36px; background-image: url('blobs/library.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } lbp {display:block; position: relative; left: 36px; background-image: url('blobs/librarypt.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } lbpt {display:block; position: relative; left: 36px; background-image: url('blobs/librarypt.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } lbm {display:block; position: relative; left: 36px; background-image: url('blobs/librarymobile.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } ft {display:block; position: relative; left: 36px; background-image: url('blobs/takeaway.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } fc {display:block; position: relative; left: 36px; background-image: url('blobs/cafe.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } fr {display:block; position: relative; left: 36px; background-image: url('blobs/restaurant.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } shop {display:block; position: relative; left: 36px; background-image: url('blobs/shop.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } smkt {display:block; position: relative; left: 36px; background-image: url('blobs/supermarket.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } mktpt {display:block; position: relative; left: 36px; background-image: url('blobs/marketpt.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } mkt {display:block; position: relative; left: 36px; background-image: url('blobs/market.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } ch {display:block; position: relative; left: 36px; background-image: url('blobs/chemist.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } chall {display:block; position: relative; left: 36px; background-image: url('blobs/community.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } vh {display:block; position: relative; left: 36px; background-image: url('blobs/community.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } vhall {display:block; position: relative; left: 36px; background-image: url('blobs/community.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } phall {display:block; position: relative; left: 36px; background-image: url('blobs/community.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } thall {display:block; position: relative; left: 36px; background-image: url('blobs/community.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } cc {display:block; position: relative; left: 36px; background-image: url('blobs/community.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } tht {display:block; position: relative; left: 36px; background-image: url('blobs/theatre.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } cncrt {display:block; position: relative; left: 36px; background-image: url('blobs/theatre.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } ent {display:block; position: relative; left: 36px; background-image: url('blobs/theatre.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } rac {display:block; position: relative; left: 36px; background-image: url('blobs/horse.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } mus {display:block; position: relative; left: 36px; background-image: url('blobs/museum.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } art {display:block; position: relative; left: 36px; background-image: url('blobs/art.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } park {display:block; position: relative; left: 36px; background-image: url('blobs/tree.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } swim {display:block; position: relative; left: 36px; background-image: url('blobs/swim.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } sport {display:block; position: relative; left: 36px; background-image: url('blobs/sportshall.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } bch {display:block; position: relative; left: 36px; background-image: url('blobs/sands.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } htl {display:block; position: relative; left: 36px; background-image: url('blobs/hotel.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } yha {display:block; position: relative; left: 36px; background-image: url('blobs/hotel.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } bb {display:block; position: relative; left: 36px; background-image: url('blobs/hotel.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } tinfo {display:block; position: relative; left: 36px; background-image: url('blobs/info.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } ha {display:block; position: relative; left: 36px; background-image: url('blobs/abbey.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } hh {display:block; position: relative; left: 36px; background-image: url('blobs/house.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } hc {display:block; position: relative; left: 36px; background-image: url('blobs/castle.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } hx {display:block; position: relative; left: 36px; background-image: url('blobs/church.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } hp {display:block; position: relative; left: 36px; background-image: url('blobs/blueplaque.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } fall {display:block; position: relative; left: 36px; background-image: url('blobs/falls.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } bus159 {display:block; position: relative; left: 36px; background-image: url('blobs/159.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } bus821 {display:block; position: relative; left: 36px; background-image: url('blobs/821.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } bus822 {display:block; position: relative; left: 36px; background-image: url('blobs/822.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } bus857 {display:block; position: relative; left: 36px; background-image: url('blobs/857.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } /* small styles */ span.big{color: white; font-family: Arial, Helvetica, sans-serif; font-size: 150%; font-weight: bold; opacity: 1; z-index: 3;} big {color: white; font-family: Arial, Helvetica, sans-serif; font-size: 150%; font-weight: bold; opacity: 1; z-index: 3;} countdown {color: black; background:white; font-family: Arial, Helvetica, sans-serif; font-size: 150%; font-weight: bold; opacity: 1; z-index: 3;} span.small{color: white; font-family: Arial, Helvetica, sans-serif; font-size: 80%; font-weight: bold; opacity: 0.7; z-index: 3;} small {color: white; font-family: Arial, Helvetica, sans-serif; font-size: 80%; font-weight: bold; opacity: 0.7; z-index: 3;} shrink {font-size: 50%;} archivedate {color: white; font-family: Arial, Helvetica, sans-serif; font-size: 40%; font-weight: bold; opacity: 0.7; z-index: 3;} i {opacity: 0.5; font-style: italic} /* em styles */ em {opacity: 0.7; color: white; font-style: normal} post em {opacity: 0.7; color: black; font-style: normal} notice em {opacity: 0.7; color: black; font-style: normal} section em {opacity: 0.7; color: black; font-style: normal} subsection em {opacity: 0.7; color: black; font-style: normal} /* tables */ table {display: block; overflow: auto;} td {padding-right: 8px; font-size: 3.2vh; vertical-align: top;} /* button links */ a#blank, a#cam, a#festive, a#prelaunch, a#webcam, a#intro, a#gazetteer, a#maps, a#travel, a#visit, a#links, a#pictures, a#home, a#look, a#aboutus, a#rail, a#bus, a#road, a#air, a#sea, a#northyorkmoors, a#peakdistrict, a#york, a#mining, a#sculpture, a#oakwellhall, a#yorkshiredales, a#standedge, a#sport, a#hrailways, a#abbeys, a#castles, a#seaside, a#moresoon, a#atoy, a#museums, a#historichouses{display: table-cell; color: white; background-color: rgba(0, 0, 0, 0.2); background-repeat: no-repeat; background-position: center 50px; left: 10px; height: 400px; border-width: 1px; border-color: #334477; border-style: solid; font-family: arial, helvetica, sans-serif; font-weight: bold; text-decoration: none; padding: 3px 10px 0px 10px; border-radius: 20px 20%; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; float: left;} a#cam {width: 720px; border-radius: 20px 20px; padding: 0px 30px 0px 30px; } /* blank button */ a#blank {;} a#blank:before {display: block; position: static; height: 80px; top: 10px; left: 6px; width: 156px; text-align: left; font-size: 1.6em; content:" ";} a#blank:after {display: block; position: relative; top: 260px; left: 6px; width: 156px; text-align: left; font-size: 1.2em; content: " ";} a#blank:hover {;} /* Home button ----------------------------- */ a#home {position: fixed; z-index: 5; height: 120px; top: 10px; left: 60%; width: 100px; background-image: url('buttonpics/yorksmall.jpg'); background-position: center 30px; border-radius: 20px 20%; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black;} a#home:before {display: block; position : static; top: 10px; text-align: left; font-size: 1.6em; content:"Home";} a#home:hover {background: chartreuse url('buttonpics/yorksmall.jpg') no-repeat center 30px; } /* festive button */ a#festive {background-image: url('buttonpics/festive.jpg');} a#festive:before {display: block; position: static; top: 10px; left: 6px; width: 156px; text-align: left; font-size: 1.6em; content:"Season's Greetings";} a#festive:after {display: block; position: relative; top: 260px; left: 6px; width: 156px; text-align: left; font-size: 1.2em; content: "from your new guide to Yorkshire";} a#festive:hover {background: chartreuse url('buttonpics/festive.jpg') no-repeat center 50px;} /* webcam button */ a#webcam {background-image: url('buttonpics/webcam.jpg');} a#webcam:before {display: block; position: static; top: 10px; left: 6px; width: 156px; text-align: left; font-size: 1.6em; content:"Webcam";} a#webcam:after {display: block; position: relative; top: 260px; left: 6px; width: 156px; text-align: left; font-size: 1.2em; content: "Our webcam on the Yorkshire weather";} a#webcam:hover {background: chartreuse url('buttonpics/webcam.jpg') no-repeat center 50px;} /* Intro button */ a#intro {background-image: url('buttonpics/welcome.jpg');} a#intro:before {display: block; position: static; top: 10px; left: 10px; width: 156px; text-align: left; font-size: 1.6em; content:"Introduction";} a#intro:after {display: block; position: relative; top: 260px; left: 6px; width: 156px; text-align: left; font-size: 1.2em; content: "An introduction to Yorkshire";} a#intro:hover {background: chartreuse url('buttonpics/welcome.jpg') no-repeat center 50px;} /* gazetteer button */ a#gazetteer {background-image: url('buttonpics/gazetteer.jpg');} a#gazetteer:before {display: block; position: static; top: 10px; left: 10px; width: 156px; text-align: left; font-size: 1.6em; content:"Gazetteer";} a#gazetteer:after {display: block; position: relative; top: 260px; left: 6px; width: 156px; text-align: left; font-size: 1.2em; content: "Yorkshire towns and villages";} a#gazetteer:hover {background: chartreuse url('buttonpics/gazetteer.jpg') no-repeat center 50px;} /* links button */ a#links {background-image: url('buttonpics/links.jpg');} a#links:before {display: block; position: static; top: 10px; left: 10px; width: 156px; text-align: left; font-size: 1.6em; content:"Links";} a#links:after {display: block; position: relative; top: 260px; left: 6px; width: 156px; text-align: left; font-size: 1.2em; content: "Useful public service websites";} a#links:hover {background: chartreuse url('buttonpics/links.jpg') no-repeat center 50px;} /* maps button */ a#maps {background-image: url('buttonpics/map.jpg');} a#maps:before {display: block; position: static; top: 10px; left: 10px; width: 156px; text-align: left; font-size: 1.6em; content:"Map";} a#maps:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Our detailed map of the region";} a#maps:hover {background: chartreuse url('buttonpics/map.jpg') no-repeat center 50px;} /* travel button */ a#travel {background-image: url('buttonpics/travel.jpg');} a#travel:before {display: block; position: static; top: 10px; left: 10px; width: 156px; text-align: left; font-size: 1.6em; content:"Travel";} a#travel:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Road, bus and rail routes and airports";} a#travel:hover {background: chartreuse url('buttonpics/travel.jpg') no-repeat center 50px;} /* visit button */ a#visit {background-image: url('buttonpics/visit.jpg');} a#visit:before {display: block; position: static; top: 10px; left: 10px; width: 156px; text-align: left; font-size: 1.6em; content:"Places to go";} a#visit:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Places of interest to visit in Yorkshire";} a#visit:hover {background: chartreuse url('buttonpics/visit.jpg') no-repeat center 50px;} /* pictures button */ a#pictures {background-image: url('buttonpics/pictures.jpg');} a#pictures:before {display: block; position: static; top: 10px; left: 10px; width: 156px; text-align: left; font-size: 1.6em; content:"Pictures";} a#pictures:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "A selection of Yorkshire pictures";} a#pictures:hover {background: chartreuse url('buttonpics/pictures.jpg') no-repeat center 50px;} /* look button */ a#look {background-image: url('buttonpics/look.jpg');} a#look:before {display: block; position: static; top: 10px; left: 10px; width: 156px; text-align: left; font-size: 1.6em; content:"Look back";} a#look:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Remember bygone Yorkshire?";} a#look:hover {background: chartreuse url('buttonpics/look.jpg') no-repeat center 50px;} /* A to Y button */ a#atoy {background-image: url('buttonpics/atoy.jpg'); border-radius: 20px 20%; border-radius: 20px 20%; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black;} a#atoy:before {display: block; position: static; top: 10px; left: 10px; width: 156px; text-align: left; font-size: 1.6em; content:"Gazetteer";} a#atoy:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: " ";} a#atoy:hover {background: chartreuse url('buttonpics/atoy.jpg') no-repeat center 50px; } /* About us button */ a#aboutus {background-image: url('buttonpics/aboutus.jpg'); border-radius: 20px 20%; border-radius: 20px 20%; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black;} a#aboutus:before {display: block; position: static; top: 10px; left: 10px; width: 156px; text-align: left; font-size: 1.6em; content:"About us";} a#aboutus:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Details about the Yorkshire guide";} a#aboutus:hover {background: chartreuse url('buttonpics/aboutus.jpg') no-repeat center 50px; } /* rail button */ a#rail {background-image: url('buttonpics/rail.jpg');} a#rail:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.6em; content:"Rail";} a#rail:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Train services in the Yorkshire area";} a#rail:hover {background: chartreuse url('buttonpics/rail.jpg') no-repeat center 50px; } /* bus button */ a#bus {background-image: url('buttonpics/bus.jpg');} a#bus:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.6em; content:"Bus";} a#bus:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Getting around by bus";} a#bus:hover {background: chartreuse url('buttonpics/bus.jpg') no-repeat center 50px; } /* road button */ a#road {background-image: url('buttonpics/road.jpg');} a#road:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.6em; content:"Road";} a#road:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Travelling to and from the area by road";} a#road:hover {background: chartreuse url('buttonpics/road.jpg') no-repeat center 50px;} /* air button */ a#air {background-image: url('buttonpics/air.jpg');} a#air:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.6em; content:"Air";} a#air:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Airports for the Yorkshire region";} a#air:hover {background: chartreuse url('buttonpics/air.jpg') no-repeat center 50px;} /* sea button */ a#sea {background-image: url('buttonpics/sea.jpg');} a#sea:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.6em; content:"Sea";} a#sea:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Travel by ferry to Yorkshire";} a#sea:hover {background: chartreuse url('buttonpics/sea.jpg') no-repeat center 50px;} /* northyorkmoors button */ a#northyorkmoors {background-image: url('320pics/roseberrytopping.jpg');} a#northyorkmoors:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content:"Moors & coast";} a#northyorkmoors:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "North York Moors National Park";} a#northyorkmoors:hover {background: chartreuse url('320pics/roseberrytopping.jpg') no-repeat center 50px;} /* peakdistrict button */ a#peakdistrict {background-image: url('320pics/peakdistrict.jpg');} a#peakdistrict:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content:"Peak landscape";} a#peakdistrict:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Peak District National Park";} a#peakdistrict:hover {background: chartreuse url('320pics/peakdistrict.jpg') no-repeat center 50px;} /* york button */ a#york {background-image: url('320pics/york3.jpg');} a#york:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content:"City of York";} a#york:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "A medieval capital with Roman and Viking heritage";} a#york:hover {background: chartreuse url('320pics/york3.jpg') no-repeat center 50px;} /* mining button */ a#mining {background-image: url('320pics/ncm1.jpg');} a#mining:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content:"Mining Museum";} a#mining:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Explore below ground at the National Coal Mining Museum";} a#mining:hover {background: chartreuse url('320pics/ncm1.jpg') no-repeat center 50px;} /* museums button */ a#museums {background-image: url('320pics/ncm1.jpg');} a#museums:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content:"Major museums";} a#museums:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Explore science and history in amazing places";} a#museums:hover {background: chartreuse url('320pics/ncm1.jpg') no-repeat center 50px;} /* historichouses button */ a#historichouses {background-image: url('320pics/shibdenhall.jpg');} a#historichouses:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content:"Historic houses";} a#historichouses:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Residences of the rich and famous";} a#historichouses:hover {background: chartreuse url('320pics/shibdenhall.jpg') no-repeat center 50px;} /* sculpture button */ a#sculpture {background-image: url('320pics/sculpture.jpg');} a#sculpture:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content:"Sculpture Park";} a#sculpture:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Art in the open at Yorkshire Sculpture Park";} a#sculpture:hover {background: chartreuse url('320pics/sculpture.jpg') no-repeat center 50px;} /* yorkshiredales button */ a#yorkshiredales {background-image: url('320pics/malham1.jpg');} a#yorkshiredales:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content:"Climbs & caves";} a#yorkshiredales:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Yorkshire Dales National Park";} a#yorkshiredales:hover {background: chartreuse url('320pics/malham1.jpg') no-repeat center 50px;} /* standedge button */ a#standedge {background-image: url('buttonpics/standedge.jpg');} a#standedge:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content:"Tunnel End";} a#standedge:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Canal history alongside the Standedge Tunnels";} a#standedge:hover {background: chartreuse url('buttonpics/standedge.jpg') no-repeat center 50px;} /* sport button */ a#sport {background-image: url('buttonpics/stadium.jpg');} a#sport:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.6em; content:"Sport";} a#sport:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Connect with leading sports teams";} a#sport:hover {background: chartreuse url('buttonpics/stadium.jpg') no-repeat center 50px;} /* heritage railways button */ a#hrailways {background-image: url('320pics/middleton1.jpg');} a#hrailways:before {display: block; position: static; top: 10px; left: 6px; width: 156px; text-align: left; font-size: 1.2em; content:"Rail journeys";} a#hrailways:after {display: block; position: relative; top: 260px; left: 6px; width: 156px; text-align: left; font-size: 1.2em; content: "See Yorkshire from one of its heritage railways";} a#hrailways:hover {background: chartreuse url('320pics/middleton1.jpg') no-repeat center 50px;} /* moresoon button */ a#moresoon {background-image: url('320pics/redcar.jpg');} a#moresoon:before {display: block; position: static; top: 10px; left: 6px; width: 156px; text-align: left; font-size: 1.6em; content:"More soon";} a#moresoon:after {display: block; position: relative; top: 260px; left: 6px; width: 156px; text-align: left; font-size: 1.2em; content: "Further places coming soon";} a#moresoon:hover {background: chartreuse url('320pics/redcar.jpg') no-repeat center 50px;} /* abbeys button */ a#abbeys {background-image: url('320pics/mountgracepriory.jpg');} a#abbeys:before {display: block; position: static; top: 10px; left: 6px; width: 156px; text-align: left; font-size: 1.2em; content:"Abbey heritage";} a#abbeys:after {display: block; position: relative; top: 260px; left: 6px; width: 156px; text-align: left; font-size: 1.2em; content: "Remains of magnificent monasteries";} a#abbeys:hover {background: chartreuse url('320pics/mountgracepriory.jpg') no-repeat center 50px;} /* castles button */ a#castles {background-image: url('320pics/skipton.jpg');} a#castles:before {display: block; position: static; top: 10px; left: 6px; width: 156px; text-align: left; font-size: 1.2em; content:"Noble castles";} a#castles:after {display: block; position: relative; top: 260px; left: 6px; width: 156px; text-align: left; font-size: 1.2em; content: "Yorkshire's stone-built strongholds";} a#castles:hover {background: chartreuse url('320pics/skipton.jpg') no-repeat center 50px;} /* seaside button */ a#seaside {background-image: url('650pics/bridlington20.jpg');} a#seaside:before {display: block; position: static; top: 10px; left: 6px; width: 156px; text-align: left; font-size: 1.2em; content:"Super seaside";} a#seaside:after {display: block; position: relative; top: 260px; left: 6px; width: 156px; text-align: left; font-size: 1.2em; content: "Sandy beaches, harbours and resorts";} a#seaside:hover {background: chartreuse url('650pics/bridlington20.jpg') no-repeat center 50px;} /* prelaunch button */ a#prelaunch {background-image: url('320pics/kingstonuponhull40.jpg');} a#prelaunch:before {display: block; position: static; top: 10px; left: 6px; width: 156px; text-align: left; font-size: 1.6em; content:"Welcome";} a#prelaunch:after {display: block; position: relative; top: 260px; left: 6px; width: 156px; text-align: left; font-size: 1.2em; content: "Latest updates in your guide";} a#prelaunch:hover {background: chartreuse url('320pics/kingstonuponhull40.jpg') no-repeat center 50px;} /* leaflet custom amendments */ /* general typography */ .leaflet-container { font: 12px/1.5 arial, helvetica, sans-serif; } .leaflet-container a.leaflet-popup-close-button { position: absolute; top: 18px; right: 3px; padding: 0px 0px 4px 0px; border: 0px; text-align: center; vertical-align: top; width: 16px; height: 20px; font: 16px arial, helvetica, sans-serif; color: white; text-decoration: none; font-weight: bold; background: red; } .leaflet-container a.leaflet-popup-close-button:hover { color: red; } .leaflet-control-zoom-in, .leaflet-control-zoom-out { font: bold 24px 'Lucida Console', Monaco, monospace; text-indent: 1px; }