/* ©2025 dotguide.co.uk v31.043 Yorkshire.guide styles stylesheet */ /* Stylesheet order: STYLES+buttonpics+pictures>WIDE>small>smallwide>tablet */ phonehide {visibility: hidden;} table { border-spacing: 4px; border-collapse: collapse; } body {width: 100%; height: 100%; background: skyblue; background-image: url('graphics/backgroundt.png'); background-size: 100%, 100vw; background-attachment: fixed; background-position: left top; color:white; z-index: -2; overflow-y: hidden; font-family: arial, verdana, sans-serif; font-size: 100%;} body#scrollwide {width: 100%; height: 100%; background: skyblue; background-image: url('graphics/backgroundt.png'); background-size: cover; background-attachment: fixed; background-position: left top; background-repeat: no-repeat; color:white; z-index: -2; overflow-y: hidden; font-family: arial, verdana, sans-serif; font-size: 100%;} body#noscroll {width: 100%; height: 100%; background: skyblue; background-image: url('graphics/backgroundt.png'); background-size: 100%, 100vw; background-attachment: fixed; background-position: left top; color:white; z-index: -2; overflow: hidden; font-family: arial, verdana, sans-serif; font-size: 100%;} #map {display: block; float: right; top: 10px; right: -9px; margin: 0px 0px 20px 0px; height: 240px; width: 100%; max-width: 980px; z-index: 3; } #minimap {display: block; float: right; top: 10px; right: -9px; margin: 0px 0px 20px 0px; height: 140px; width: 320px; z-index: 3; } #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;} #halfmap {z-index: 3; display: block; position: fixed; top: 140px; 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:white; position: fixed; top: 2px; left: 10px; height: 140px; width: 480px; overflow: hidden; vertical-align: top; padding: 0px 0px 0px 60px; } div#scrollgraphic {z-index: 4; display: table-cell; background-image: url('graphics/smallscroll.gif'); background-repeat: no-repeat; color:white; position: fixed; top: 600px; left: 33vw; height: 77px; width: 320px; overflow: hidden;} a#header {z-index: 4; display: table-cell; background: transparent; background-image: url('graphics/yorkshireguide364.png'); background-repeat: no-repeat; color:white; 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:white; 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#toolbar {visibility: hidden; position: fixed; display: inline-block; background-color: rgba(50,50,120,0.6); float: right; top: 152px; right: 28px; margin: 0px 10px 0px 0px; padding: 8px 20px 0px 10px; height: 0px; z-index: 20; } div#t-bar {display: inline-block; position: relative; top: 0px; float: left; background-color: rgba(50,50,120,0.2); width: 304px; height: auto; padding: 8px 8px 16px 8px; margin: 10px 10px 16px 0px;} div#bar {display: block; color:white; position: fixed; bottom: 14px; height: 20px; overflow: hidden; font-family: arial, verdana, sans-serif; font-size: 80%; font-weight: bold; text-align: top;} div#footer {display: block; position: fixed; bottom: 2px; height: 18px; width: 320px; right: 20px; background: transparent; color:white; 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 Yorkshire.guide";} copyright:after {display: block; text-align: right; color: white; font-family: Arial, Helvetica, sans-serif; font-size: 50%; opacity: 0.6; z-index: 3; content:"\00a9 2025 Yorkshire.guide";} div#content {color:white; 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:white; 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:white; 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 {display: block; background-color: rgba(0, 0, 0, 0.4); color:white; position: fixed; top: 150px; left: 6px; right: 10px; 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: 2.0em; 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;} div#districtText {display: inline; position: relative; top: -14px; width: 300px;} /* boxes and spacer */ tweet, tweetwide, tweetright {position:relative; display:inline-block; float: right; z-index: 3; border: 1px solid #bbbbbb;} /* for Twitter */ tweet {margin: 0px 2px 10px 8px; max-width: 320px;} /* for Twitter */ tweetwide {margin: 0px 52px 10px 8px; max-width: 620px; } tweetright {margin: 0px 32px 10px 8px; max-width: 640px; } tweet:before, tweetwide:before, 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";} 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 */ /* --------- data grid ------------------------ */ /* Flexible table elements */ gn0 {position: relative; display:inline-block; width: 8px; text-align: right; font-size: 75%; padding-right: 2px; margin: 4px 4px 10px 0px;} gn1 {position: relative; display:inline-block; width: 14px; text-align: right; font-size: 75%; padding-right: 2px; top: 2px; margin: 4px 4px 10px 0px;} gn2 {position: relative; display:inline-block; width: 70px; text-align: right; font-size: 75%; padding-right: 2px; margin: 4px 4px 10px 0px;} gn3 {position: relative; display:inline-block; width: 96px; text-align: right; font-size: 75%; padding-right: 2px; margin: 4px 8px 10px 0px;} gn4 {position: relative; display:inline-block; width: 164px; text-align: right; font-size: 75%; padding-right: 2px; margin: 4px 8px 10px 0px;} gn5 {position: relative; display:inline-block; width: 270px; text-align: right; font-size: 75%; padding-right: 2px; margin: 4px 8px 10px 0px;} gt0 {position: relative; display:inline-block; width: 8px; text-align: left; font-size: 75%; padding-left: 1px; margin: 4px 4px 10px 0px;} gt1 {position: relative; display:inline-block; width: 14px; text-align: left; font-size: 75%; padding-left: 1px; top: 2px; margin: 4px 4px 10px 0px;} gt2 {position: relative; display:inline-block; width: 70px; text-align: left; font-size: 75%; padding-left: 1px; margin: 4px 4px 10px 0px;} gt3 {position: relative; display:inline-block; width: 96px; text-align: left; font-size: 75%; padding-left: 1px; margin: 4px 8px 10px 0px;} gt4 {position: relative; display:inline-block; width: 164px; text-align: left; font-size: 75%; padding-left: 1px; margin: 4px 8px 10px 0px;} gt5 {position: relative; display:inline-block; width: 270px; text-align: left; font-size: 75%; padding-left: 1px; margin: 4px 8px 10px 0px;} gt6 {position: relative; display:inline-block; width: 380px; text-align: left; font-size: 75%; padding-left: 1px; margin: 4px 8px 10px 0px;} gt7 {position: relative; display:inline-block; width: 480px; text-align: left; font-size: 75%; padding-left: 1px; margin: 4px 8px 10px 0px;} /* sections ------------------------ */ section, subsection, flyer, post, wrap, notice, warning, election, seaside, festive, railtpe, york, memorial, hunk {position:relative; display:inline-block; width: 96%; height: auto; margin: 0px 0px 20px 0px; padding: 8px 20px 12px 10px; border-radius: 12px; } section {background-color: rgba(255, 255, 255, 0); color: white; padding: 2px 0px 20px 8px;} section#plus { } subsection {background-color: rgba(0, 0, 0, 0.3); color: white; border: 1px solid skyblue;} flyer {background-color: rgba(166, 200, 250, 0.7); color: black; border: 1px solid #334477;} flyer#features { } post {background-color: rgba(255, 255, 255, 0.6); color: black; border: 1px solid #334477;} post#travel { } memorial {background-color: rgba(255, 255, 255, 0.6); color: black; border: 1px solid black;} giants {background-color: rgba(255, 255, 255, 0.6); color: black; border: 1px solid darkorange; } /*used in https://Huddersfield.guide ------------------------ */ town {background-color: rgba(255, 255, 255, 0.6); color: black; border: 1px solid blue; } /*used in https://Huddersfield.guide ------------------------ */ railtpe {background-color: rgba(255, 255, 255, 0.6); color: black; border: 1px solid steelblue; } seaside {background-color: rgba(255, 255, 255, 0.6); color: black; border: 1px solid goldenrod; } york {background-color: rgba(255, 255, 255, 0.6); color: black; border: 1px solid #334477; } festive {background-color: rgba(255, 255, 255, 0.6); color: black; border: 1px solid red;} wrap {background-color: rgba(145, 165, 130, 0.7); color: black; border: 1px solid #555555;} wrap#council { } notice {background-color: rgba(255, 255, 255, 0.6); color: black; border: 1px solid red;} notice#emergency { } warning {background-color: rgba(255, 255, 255, 0.6); color: black; border: 1px solid darkorange;} election {background-color: rgba(0, 0, 0, 0.3); color: white; border: 1px solid skyblue;} hunk {background-color: rgba(255, 255, 255, 0); color: white; padding: 0px 0px 4px 4px; border: 0px; } chunk {display:inline-block; position:relative; width: 320px; max-width: 47%; height: auto; margin: 0px 0px 0px 0px; background-color: rgba(255, 255, 255, 0); color: black; padding: 0px 4px 4px 4px; border: 0px; } mapbox {position:fixed; display:inline-block; top: 140px; left: 20px; right: 20px; width: auto; height: 320px; min-height: 284px; margin: 0px 0px 0px 0px; background-color: rgba(255, 255, 255, 0.9); color: black; padding: 0px 10px 10px 10px; border-radius: 12px; border: 0px solid #334477; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black;z-index: 200;} mapbox div#buttons {position:absolute; display:block; left: 10px; bottom: 6px; } spacer {display:table-cell; vertical-align: top; min-width: 5px; background-color: skyblue; } spacer15 {display:block; position: relative; background: transparent; height: 15px; width: 15px; } /* railmapkey also available as a#railmapkey */ railmapkey {display: inline-block; position: fixed; height: 480px; width: 330px; top: 150px; left:32px; z-index: 5; background: #a9ccff; opacity: 0.9; background-repeat: no-repeat; background-size: cover; color: black; overflow: auto; padding: 0px 8px 8px 8px; border-width: 1px; border-radius: 8px; box-shadow: 3px 3px 3px gray; -webkit-box-shadow: 3px 3px 3px gray; font-size: 1.1em;} railmap23key {display: inline-block; position: fixed; height: 480px; width: 330px; top: 190px; left:30px; z-index: 5; background: #a9ccff; opacity: 0.9; background-repeat: no-repeat; background-size: cover; color: black; overflow: auto; padding: 0px 8px 8px 8px; border-width: 1px; border-radius: 8px; box-shadow: 3px 3px 3px gray; -webkit-box-shadow: 3px 3px 3px gray; font-size: 1.1em;} /* gazetteer */ *[id^='gaz-'] {display: none; position: relative; width: 100%; font-size: 1.0em;} /* div#gaz-a div#gaz-b etc. gazetteer alphabet sections initially hidden */ *[id^='gaz-'] a:not([class="collapse"]), gaz-buttons a {display:inline-block; min-width: 300px; margin: 10px 5px 0px 0px; } *[id^='gaz-'] a.info, gaz-buttons a.info {padding: 4px 3px 4px 3px; margin: 10px 5px 0px 0px;} div.buttonblock {float: right; width: 330px;} /* travel */ table.travel {table-layout: fixed; width: 98%; word-break: normal;} table.travel tr {} table.travel td {color: white; font-family: Arial, Helvetica, sans-serif; font-size: 80%; font-weight: bold; opacity: 0.9; min-width: 14%; border-collapse: collapse; border: 1px solid white; vertical-align: top;} table.travel i {font-style: italic; font-weight: bold; opacity: 1; position: relative; top: 10px; } /* ^^^^^^ */ /* polls */ table.polls {table-layout: auto; width: 96%; word-break: break-all;} polls {width: 96%;} candidates section {position:relative; top: -16px;} candidates section h3 {font-size: 60%; background: transparent;} candidates section table {table-layout: fixed; width: 50%; word-break: break-all;} candidates section em {position:relative; font-size: 50%; top: -18px;} candidates section em partykey {font-size: 80%;} candidates section party span {visibility: hidden;} result-await {display:table-cell; background-color: rgba(0,0,0,0.1); 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;} election result-await {display: table-cell; background-color: rgba(0,0,0,0.1); overflow: hidden; color: black; border: 1px solid darkgray; width: 180px; height: 28px; padding: 6px 1px 1px 10px; margin: 20px 0px 0px 0px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%;} result-await:after {font-size: 70%; opacity: 0.6; content:" Awaiting result ";} awaitingresult {display: inline-block; position: absolute; right: 30px; color: black; background: white; width: 320px; padding-left: 10px; padding-right: 10px;} awaitingresult:after {content:" AWAITING RESULT ";} labwin {display: inline-block; position: absolute; right: 30px; color: white; background: red; width: 320px; padding-left: 10px; padding-right: 10px;} labwin:after {content:" LABOUR WIN ";} labcoopwin {display: inline-block; position: absolute; right: 30px; color: white; background: red; width: 320px; padding-left: 10px; padding-right: 10px;} labcoopwin:after {content:" LABOUR & COOP WIN ";} conwin {display: inline-block; position: absolute; right: 30px; color: white; background: blue; width: 320px; padding-left: 10px; padding-right: 10px;} conwin:after {content:" CONSERVATIVE WIN ";} libdemwin {display: inline-block; position: absolute; right: 30px; color: white; background: darkorange; width: 320px; padding-left: 10px; padding-right: 10px;} libdemwin:after {content:" LIBERAL DEMOCRAT WIN ";} indwin {display: inline-block; position: absolute; right: 30px; color: white; background: darkgrey; width: 320px; padding-left: 10px; padding-right: 10px;} indwin:after {content:" INDEPENDENT WIN ";} candidates await {position: relative; display:inline-block; border-radius: 8px 8px 8px 8px; background: white; color: darkgray; width: 400px; height: 24px; text-align: left; padding-left: 10px; margin: 4px 8px 10px 0px; font-size: 80%;} candidates await:after {content:"Result to come";} candidates postponed {position: relative; display:inline-block; overflow: hidden; border: solid 1px; border-radius: 8px 8px 8px 8px; background:transparent; color: darkgray; width: 400px; height: 24px; text-align: left; padding: 6px 1px 1px 10px; margin: 4px 8px 10px 0px; line-height: 60%; vertical-align: top; font-size: 50%; opacity: 0.6; } candidates postponed:before {content:"Election postponed";} candidates title {position: relative; display:inline-block; overflow: hidden; white-space: nowrap; border: solid 1px; border-radius: 8px 8px 8px 8px; background:black; color: lightgray; width: 400px; height: 24px; text-align: left; padding: 9px 1px 1px 10px; margin: 4px 8px 10px 0px; line-height: 60%; vertical-align: top; font-size: 84%; opacity: 0.8; } candidates addr {position: relative; display:inline-block; overflow: hidden; white-space: nowrap; border: solid 1px; border-radius: 8px 8px 8px 8px; background:lightgray; color: black; width: 300px; height: 24px; text-align: left; padding: 9px 1px 1px 10px; margin: 4px 8px 10px 0px; line-height: 60%; vertical-align: top; font-size: 50%; opacity: 0.8; } brexit- {display:inline-block; background: aqua; color: white; padding: 0 16px;} brexit {display:table-cell; background: aqua; 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;} brexit:after {font-size: 50%; opacity: 0.6; content:" Brexit ";} lab- {display:inline-block; background: red; color: white; padding: 0 16px;} election lab- {padding: 0 4px;} lab {display:inline-block; 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;} election lab {display: table-cell; border-radius: 0px 18px 18px 0px; background: red; overflow: hidden; color: white; width: 100px; height: 30px; padding: 6px 1px 1px 2px; margin: 20px 0px 0px 0px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%;} candidates lab {position: relative; display:inline-block; overflow: hidden; white-space: nowrap; border-radius: 8px 8px 8px 8px; background: red; width: 400px; height: 24px; text-align: left; padding-left: 10px; margin: 4px 8px 10px 0px; font-size: 80%;} election result-lab {display: table-cell; background: red; overflow: hidden; color: white; width: 180px; height: 30px; padding: 6px 1px 1px 10px; margin: 20px 0px 0px 0px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%;} result-lab:before, lab:after, election lab:before {font-size: 50%; opacity: 0.6; content:" Labour ";} election lab:after, candidates lab:after {content:"";} labcoop {display:inline-block; 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- {display:inline-block; background: red; color: white; padding: 0 16px;} election labcoop- {padding: 0 4px;} election labcoop {display: table-cell; border-radius: 0px 18px 18px 0px; background: red; overflow: hidden; color: white; width: 100px; height: 30px; padding: 6px 1px 1px 2px; margin: 20px 0px 0px 0px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%;} candidates labcoop {position: relative; display:inline-block; overflow: hidden; white-space: nowrap; border-radius: 8px 8px 8px 8px; background: red; width: 400px; height: 24px; text-align: left; padding-left: 10px; margin: 4px 8px 10px 0px; font-size: 80%;} result-labcoop:before, labcoop:after, election labcoop:before {font-size: 50%; opacity: 0.6; content:" Lab Coop ";} election labcoop:after, candidates labcoop:after {content:"";} con- {display:inline-block; background:blue; color: white; padding: 0 16px;} election con- {padding: 0 4px;} con {display:inline-block; 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;} election con {display: table-cell; border-radius: 0px 18px 18px 0px; background: blue; overflow: hidden; color: white; width: 100px; height: 30px; padding: 6px 1px 1px 2px; margin: 20px 0px 0px 0px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%;} candidates con {position: relative; display:inline-block; overflow: hidden; white-space: nowrap; border-radius: 8px 8px 8px 8px; background: blue; width: 400px; height: 24px; text-align: left; padding-left: 10px; margin: 4px 8px 10px 0px; font-size: 80%;} result-con:before, con:after, election con:before {font-size: 50%; opacity: 0.6; content:" Conservative ";} election con:after, candidates con:after {content:"";} libdem- {display:inline-block; background:orange; color: white; padding: 0 16px;} election libdem- {padding: 0 4px;} libdem {display:inline-block; 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;} election libdem {display: table-cell; border-radius: 0px 18px 18px 0px; background: orange; overflow: hidden; color: white; width: 100px; height: 30px; padding: 6px 1px 1px 2px; margin: 20px 0px 0px 0px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%;} candidates libdem {position: relative; display:inline-block; overflow: hidden; white-space: nowrap; border-radius: 8px 8px 8px 8px; background: orange; width: 400px; height: 24px; text-align: left; padding-left: 10px; margin: 4px 8px 10px 0px; font-size: 80%;} result-libdem:before, libdem:after, election libdem:before {font-size: 50%; opacity: 0.6; content:" Lib Dem ";} election libdem:after, candidates libdem:after {content:"";} lib {display:inline-block; 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;} election lib {display: table-cell; border-radius: 0px 18px 18px 0px; background: yellow; overflow: hidden; color: white; width: 100px; height: 30px; padding: 6px 1px 1px 2px; margin: 20px 0px 0px 0px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%;} lib:after {font-size: 50%; opacity: 0.6; content:" Lib ";} snp {display:inline-block; 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;} election snp {display: table-cell; border-radius: 0px 18px 18px 0px; background: yellow; overflow: hidden; color: white; width: 100px; height: 30px; padding: 6px 1px 1px 2px; margin: 20px 0px 0px 0px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%;} snp:after {font-size: 50%; opacity: 0.6; content:" SNP ";} pc {display:inline-block; background:springgreen; 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;} election pc {display: table-cell; border-radius: 0px 18px 18px 0px; background: springgreen; overflow: hidden; color: white; width: 100px; height: 30px; padding: 6px 1px 1px 2px; margin: 20px 0px 0px 0px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%;} pc:after {font-size: 50%; opacity: 0.6; content:" PC ";} dup {display:inline-block; background:midnightblue; 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;} election dup {display: table-cell; border-radius: 0px 18px 18px 0px; background: midnightblue; overflow: hidden; color: white; width: 100px; height: 30px; padding: 6px 1px 1px 2px; margin: 20px 0px 0px 0px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%;} dup:after {font-size: 50%; opacity: 0.6; content:" DUP ";} brexit- {display:inline-block; background:cornflowerblue; color: white; padding: 0 16px;} election brexit- {padding: 0 4px;} ukip {display:inline-block; 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;} candidates ukip {position: relative; display:inline-block; overflow: hidden; white-space: nowrap; border-radius: 8px 8px 8px 8px; background: purple; width: 400px; height: 24px; text-align: left; padding-left: 10px; margin: 4px 8px 10px 0px; font-size: 80%;} greenp- {display:inline-block; background:green; color: white; padding: 0 16px;} election greenp- {padding: 0 4px;} green {display:inline-block; 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:inline-block; 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;} candidates greenp {position: relative; display:inline-block; overflow: hidden; white-space: nowrap; border-radius: 8px 8px 8px 8px; background: green; width: 400px; height: 24px; text-align: left; padding-left: 10px; margin: 4px 8px 10px 0px; font-size: 80%;} greenp:after {font-size: 50%; opacity: 0.6; content:" Green ";} election greenp:after, candidates greenp:after {content:"";} yorks {display:inline-block; background:skyblue; 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;} candidates yorks {position: relative; display:inline-block; overflow: hidden; white-space: nowrap; border-radius: 8px 8px 8px 8px; background: skyblue; width: 400px; height: 24px; text-align: left; padding-left: 10px; margin: 4px 8px 10px 0px; font-size: 80%;} reform {display:inline-block; background:mediumturquoise; 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;} candidates reform {position: relative; display:inline-block; overflow: hidden; white-space: nowrap; border-radius: 8px 8px 8px 8px; background: mediumturquoise; width: 400px; height: 24px; text-align: left; padding-left: 10px; margin: 4px 8px 10px 0px; font-size: 80%;} result-reform:before, reform:after, election reform:before {font-size: 50%; opacity: 0.6; content:" Reform UK ";} engdem {display:inline-block; background:lightcoral; 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;} candidates engdem {position: relative; display:inline-block; overflow: hidden; white-space: nowrap; border-radius: 8px 8px 8px 8px; background: lightcoral; width: 400px; height: 24px; text-align: left; padding-left: 10px; margin: 4px 8px 10px 0px; font-size: 80%;} noc- {display:inline-block; background:gray; color: white; padding: 0 16px;} election noc- {padding: 0 4px;} candidates noc {position: relative; display:inline-block; overflow: hidden; white-space: nowrap; border: solid 1px; border-radius: 8px 8px 8px 8px; background:gray; color: white; width: 400px; height: 24px; text-align: left; padding: 6px 1px 1px 10px; margin: 4px 8px 10px 0px; line-height: 60%; vertical-align: top; font-size: 85%; opacity: 0.7;} candidates noc:after {content:"";} ind- {display:inline-block; background:silver; color: white; padding: 0 16px;} election ind- {padding: 0 4px;} ind {display:inline-block; background:silver; 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;} election ind {display: table-cell; border-radius: 0px 18px 18px 0px; background: silver; overflow: hidden; color: white; width: 100px; height: 30px; padding: 6px 1px 1px 2px; margin: 20px 0px 0px 0px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; opacity: 0.7; vertical-align: top; line-height: 60%;} result-ind:before, ind:after, election ind:before {font-size: 50%; opacity: 0.6; content:" Ind ";} candidates ind {position: relative; display:inline-block; overflow: hidden; white-space: nowrap; border-radius: 8px 8px 8px 8px; background: silver; width: 400px; height: 24px; text-align: left; padding-left: 10px; margin: 4px 8px 10px 0px; font-size: 80%;} election ind:after, candidates ind:after {content:"";} party {display:inline-block; 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;} candidates party {position: relative; display:inline-block; overflow: hidden; white-space: nowrap; border-radius: 8px 8px 8px 8px; width: 400px; height: 24px; text-align: left; padding-left: 10px; margin: 4px 8px 10px 0px; font-size: 80%;} party span {font-size: 50%; opacity: 0.6;} partykey {display:table-cell; font-size: 50%; opacity: 0.6; text-align: right;} vac {display:inline-block; 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:inline-block; 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 ";} /* */ 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 */ note {position: relative; display: inline-block; font-family: arial, verdana, sans-serif; font-size: 50%; padding: 5px; } div.camimgdiv {display: inline-block; float: left; position: relative; background-color: rgba(0, 0, 0, 0.6); width: 650px; height: 360px; margin: 0px 124px 20px 0px;top: 0px; left: 0px; border: solid 1px black; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; z-index: -2; } img.camimg {position: relative; width: 640px; height: 320px; object-fit: none; object-position: 91% 68%; margin: 5px; filter: brightness(150%) saturate(125%) contrast(1); z-index: 0;} div.smallcamimgdiv {display: inline-block; position: relative; width: 320px; height: 240px; margin: 0px 5px 20px 0px; border: solid 1px black; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; z-index: -2; } img.smallcamimg {position: relative; width: 320px; height: 240px; object-fit: none; object-position: -580px -310px; filter: brightness(130%) saturate(125%); z-index: -1;} div.webcamdate{display: inline-block; position: absolute; top: 330px; left: 10px; color: lightblue; } div.webcamtime{display: inline-block; position: absolute; top: 330px; left: 176px; color: white; } div.webcamnotes{display: inline-block; position: absolute; top: 343px; right: 10px; color: white; font-size: 10pt; opacity: 0.6; } div.webcamdatesmall{display: inline-block; position: absolute; bottom: 2px; left: 4px; color: lightblue; font-size: 75%; } div.webcamtimesmall{display: inline-block; position: absolute; bottom: 2px; right: 4px; color: white; } /* --- */ div.clipwrapper1 {position: relative; height: 280px;} /* ?? */ div.clipwrapper2 {position: relative; top: -410px; left: -200px; height: 280px;} /* ?? */ 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(150, 150, 180, 0.4); border-width: 1px; border-style: solid; border-color: #ddddee; border-radius: 2px; padding: 0px 3px 0px 3px;} a.info {display: inline-block; font-family: arial, verdana, sans-serif; font-size: 110%; text-decoration: none; color: white; background-color: rgba(150, 150, 180, 0.9); border-width: 2px; border-style: solid; border-color: #ddddee; padding: 0px 3px 0px 3px; margin: 3px 0px 3px 0px;} a.district {display: inline-block; font-family: arial, verdana, sans-serif; font-size: 110%; text-decoration: none; color: white; background-color: rgba(96, 182, 42, 0.9); border-width: 2px; border-style: solid; border-color: #ddddee; padding: 3px 3px 3px 3px; margin: 3px 0px 3px 0px;} a.answer {display: inline-block; font-family: arial, verdana, sans-serif; font-size: 110%; font-style: italic; text-decoration: none; color: darkblue; background-color: rgba(240, 240, 240, 0.9); border-width: 2px; border-style: solid; border-color: #ddddee; padding: 0px 3px 0px 3px; margin: 3px 0px 3px 0px;} a.name {position:absolute; visibility: hidden; } a.right {display: inline-block; right: -3px; 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; } /* superceded by */ a.link320, a.link320r {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.link320r {clear: right;} a.link320w {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.loading {display: inline-block; float: left; 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; margin: 0px 0px 0px 6px; } /* superceded by */ a.link155 {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; margin: 0px 0px 0px 6px; } a.link155w {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; margin: 0px 0px 0px 6px; } a.collapse {display: inline-block; float: right; color: #aaaaaa; font: 24pt; text-decoration: none; background-color: rgba(255, 0, 0, 0.7); } a.closebutton {display: inline-block; float: right; position: relative; top: 1.4em; right: 0px; color: #aaaaaa; font: 24pt; text-decoration: none; background-color: rgba(255, 0, 0, 0.7); } a.pic {display: inline-block; float: right; position: relative; right: -4px; top: -10px; color: #999999; text-decoration: none; background: transparent; border: 0px; padding: 10px 2px 0px 0px; } /* used for link650 superceded by */ a.link650 {display: inline-block; float: right; color: #999999; text-decoration: none; background: transparent; max-width: 98vw; width: 650px; border-width: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 6px;} post a, town a, giants a, railtpe a, seaside a, york a, notice a, warning a, flyer a, post section a {color: darkblue; background-color: rgba(230, 230, 255, 0.6);} {color: darkblue; background-color: rgba(230, 230, 255, 0.6);} section a, subsection a, election a {color: white; background-color: rgba(230, 230, 255, 0.5);} gazetteer a {display: inline-block; margin: 0px 4px 10px 0px;} a:hover {background: chartreuse;} a:active {background: yellow;} a.tab {display: inline-block; border-radius: 10px 10px 0px 0px; background-color: rgba(230, 230, 255, 0.6); font-size: 1.2em; padding-top: 4px;} a.clear {color: #999999; text-decoration: none; background: transparent; border-width: 0px; } /* Tooltips */ tooltip {position: relative; display: inline-block; color: #6699ff; padding: 10px; height: 1em; vertical-align: top; } tooltip tooltiptext {position: absolute; visibility:hidden; color: white; font-size: 80%; text-align: left; padding: 10px; z-index: 11;} tooltip shrink {vertical-align: super;} tooltip:hover {background-color: rgba(102, 153, 255, 0.8); border-radius: 0px 8px 8px 8px; width: 75vw; height: 3em; } tooltip:hover tooltiptext {visibility: visible;} tooltip tooltipline {visibility:hidden; position: relative; top: 40px; left: 0px; width: 400px; 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;} /* Basic buttons */ a.button {display: inline-table; background-image: none; color: darkblue; background-color: rgba(230, 230, 255, 0.6); font-size: 1.6em; padding: 8px 10px 8px 6px; margin: 0px 4px 15px 0px; border: solid 1px darkblue; text-decoration: none; height: 30px; min-width: 480px; border-radius: 4px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; } post a.button, flyer a.button, notice a.button, warning a.button, section a.button, subsection a.button, town a.button, giants a.button, railtpe a.button, seaside a.button, york a.button, memorial a.button, election a.button{display: inline-table; background-image: none; color: darkblue; background-color: rgba(210, 210, 255, 0.7); font-size: 1.6em; padding: 8px 10px 8px 6px; margin: 0px 4px 15px 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; } mapbox a.button {display: inline-table; position: relative; top: -16px; background-image: none; color: darkblue; background-color: rgba(230, 230, 255, 0.6); font-size: 1.6em; font-weight: bold; padding: 5px 10px 5px 10px; border: solid 1px darkblue; text-decoration: none; height: 22px; width: 296px; min-width: 296px; border-radius: 4px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; } a.button span{ } a.button:hover {background: chartreuse;} a.button:active {background: yellow;} a.shortbutton {display: inline-table; background-image: none; color: darkblue; background-color: rgba(230, 230, 255, 0.6); font-size: 1.6em; font-weight: bold; padding: 8px 10px 8px 6px; border: solid 1px darkblue; text-decoration: none; height: 30px; width: 120px; min-width: 120px; border-radius: 4px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; } mapbox a.shortbutton {display: inline-block; position: relative; top: -16px; background-image: none; color: darkblue; background-color: rgba(230, 230, 255, 0.6); font-size: 1.6em; font-weight: bold; padding: 2px 10px 2px 10px; border: solid 1px darkblue; text-decoration: none; height: 34px; width: 120px; min-width: 120px; border-radius: 4px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; } a.shortbutton:hover {background: chartreuse;} a.shortbutton:active {background: yellow;} a.keybutton {display: inline-block; background-image: none; color: darkblue; background-color: rgba(230, 230, 255, 0.6); font-size: 2em; font-weight: bold; padding: 0px 12px 20px 12px; border: solid 1px darkblue; margin: 0px 5px 24px 10px; text-decoration: none; text-align: center; vertical-align: middle; height: 50px; min-width: 50px; border-radius: 4px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; } a.keybutton:hover {background-color: chartreuse;} a.keybuttonsmall {display: inline-block; background-image: none; color: darkblue; background-color: rgba(230, 230, 255, 0.6); font-size: 2em; font-weight: bold; padding: 0px 12px 20px 12px; border: solid 1px darkblue; margin: 0px 5px 24px 10px; text-decoration: none; text-align: center; vertical-align: middle; height: 50px; min-width: 50px; border-radius: 4px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; } a.keybuttonsmall:hover {background-color: chartreuse;} /* keybuttonsmall same here as keybutton but changed in wide.css */ a.mapbutton {display: table-cell; position: absolute; top: 12px; right: 26px; z-index: 5; font-size: 26pt; vertical-align: middle; background-image: none; color: darkblue; background-color: rgba(150, 150, 180, 0.4); font-weight: bold; text-decoration: none; padding: 0px 10px 16px 10px; 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 {display: table-cell; position: absolute; top: 12px; right: 26px; z-index: 5; font-size: 26pt; vertical-align: middle; background-image: none; color: darkblue; background-color: rgba(255, 255, 255, 0.4); font-weight: bold; text-decoration: none; padding: 0px 10px 16px 10px; 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;} /* 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: 264px; right: 24px; z-index: 5; background: transparent; opacity: 0.8; 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: 138px; 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#yorkshiremapbut {position: fixed; height: 100px; width: 100px; top: 264px; right: 24px; z-index: 5; background: transparent; opacity: 0.7; background-image: url('graphics/yorkshiremap.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#yorkshiremapbut:hover {background: chartreuse; background-image: url('graphics/yorkshiremap.png'); background-repeat: no-repeat; background-size: cover; } a#yorkshiremapbut:active {background: yellow; background-image: url('graphics/yorkshiremap.png'); background-repeat: no-repeat; background-size: cover; } a#railmapbut {position: fixed; height: 100px; width: 100px; top: 264px; right: 24px; z-index: 5; background: transparent; opacity: 0.7; background-image: url('graphics/railmap.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#railmapbut:hover {background: chartreuse; background-image: url('graphics/railmap.png'); background-repeat: no-repeat; background-size: cover; } a#railmapbut:active {background: yellow; background-image: url('graphics/railmap.png'); background-repeat: no-repeat; background-size: cover; } a#mapinfobut {position: fixed; height: 100px; width: 100px; top: 390px; right: 24px; z-index: 5; background: transparent; opacity: 0.7; background-image: url('graphics/mapinfo.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#mapinfobut:hover {background: chartreuse; background-image: url('graphics/mapinfo.png'); background-repeat: no-repeat; background-size: cover; } a#mapinfobut:active {background: yellow; background-image: url('graphics/mapinfo.png'); background-repeat: no-repeat; background-size: cover; } a#mapkey {position: fixed; height: 320px; width: 650px; bottom: 100px; left: 24px; z-index: 5; background: transparent; opacity: 0.7; background-image: url('graphics/mapinfo.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#mapkey:hover {background: chartreuse; background-image: url('graphics/mapinfo.png'); background-repeat: no-repeat; background-size: cover; } a#mapkey:active {background: yellow; background-image: url('graphics/mapinfo.png'); background-repeat: no-repeat; background-size: cover; } a#railmapkey {position: fixed; height: 320px; width: 320px; top: 150px; left:32px; z-index: 5; background: transparent; opacity: 0.7; background-image: url('graphics/railmapkey.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#railmapkey:hover {background: chartreuse; background-image: url('graphics/railmapkey.png'); background-repeat: no-repeat; background-size: cover; } a#railmapkey:active {background: yellow; background-image: url('graphics/railmapkey.png'); background-repeat: no-repeat; background-size: cover; } a#menubut {position: fixed; height: 120px; width: 100px; top: 10px; right: 18px; z-index: 5; background: transparent; background-image: url('graphics/menubut.png'); background-repeat: no-repeat; background-position: center; background-size: 100px; border-width: 0px; border-radius: 20px;} a#menubut:hover {background: chartreuse; background-image: url('graphics/menubut.png'); background-repeat: no-repeat; background-position: center; background-size: 100px; border-radius: 20px; } a#menubut:active {background: yellow; background-image: url('graphics/menubut.png'); background-repeat: no-repeat; background-position: center; background-size: 100px; border-radius: 20px;} /* menu button +++++++ */ a#menu {position: fixed; height: 100px; width: 100px; top: 18px; 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: 5px 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 SECTION */ gfx650s {display: inline-block; position: relative; float: right; right: -9px; width: 650px; height: 686px; contain: paint; margin: 0px 2px 32px 10px; z-index: 150} gfx650s buttons {display: inline-block; position: absolute; top: 650px; left: 0px; float: right; width: 629px; height: 36px; background-color: white; color: black; padding: 0px 10px 0px 10px; border: 0px; z-index: 200} gfx650s buttons a {border-radius: 8px;} gfx980 {display: inline-block; position: relative; float: right; right: -9px; width: 662px; height: 469px; contain: paint; margin: 0px 2px 32px 10px; z-index: 150} gfx980 buttons {display: inline-block; position: absolute; top: 433px; left: 0px; float: right; width: 629px; height: 36px; background-color: white; color: black; padding: 0px 10px 0px 10px; border: 0px; z-index: 200} gfx980 buttons a {border-radius: 8px;} img980, video650, img650, img650s, img650f, img320, img320r, img320w, img320t, img000, img155w, img155 {display: inline-block; position: relative; float: right; right: -9px; margin: 0px 2px 32px 8px; background-position: center; background-repeat: no-repeat; z-index: 10;} cap650, cap650xc, cap320, cap320w, cap320xc, cap320xxc, cap650s, cap650sxc {position: absolute; float: right; padding-left: 5px; margin-bottom: 32px; max-width: 100%; left: 0px; color: #333333; background-color: rgba(255, 255, 255, 0.6); text-align: left; font-size: 0.4em; opacity: 0.9; } cred650, cred320, cred320w {position: absolute; padding-right: 10px; margin-bottom: 32px; max-width: 100%; height: 16px; bottom: -36px; 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;} img980 {width: 650px; height: 212px; background-size: cover;} video650 {width: 650px; height: 320px; background-size: contain;} img650 {width: 650px; height: 320px; background-size: contain;} /* image container div new version - Used for all img650 except below - see also a.pic */ img650s {width: 650px; height: 650px; background-size: contain;} img650f {width: 650px; height: 650px; background-size: contain;} img.right {display: inline-block; position: relative; float: right; right: -9px; margin: 0px 2px 10px 8px; z-index: 10;} /* Used for old 650pics/ graphics links etc. */ img.covidbgwy {display: inline-block; position: relative; float: right; right: -9px; margin: 0px 2px 16px 8px; z-index: 10; background-image: url('graphics/covidbgwy.png');} subsection#visit img650 {display: inline-block; position: relative; float: right; right: -9px; width: 320px; max-width: 100%; height: 155px; margin: 0px 2px 10px 8px; background-position: center; background-size: 320px, 155px, cover;} cap650, cap650s, cap650sxc {width: 645px; height: 16px; bottom: -36px;} cap650xc {width: 645px; height: 32px; bottom: -52px;} subsection#visit cap650 {width: 315px; height: 16px; top: 155px; } cred650 {width: 640px;} img320 {width: 320px; height: 320px; background-size: 320px, 320px, contain;} /* old 320pics/ links also used img.right */ img320r {width: 320px; height: 320px; clear: right; background-size: 320px, 320px, contain;} img320w {width: 320px; height: 155px; background-size: 320px, 155px, contain; margin: 0px 2px 24px 8px; } img320t {width: 320px; height: 487px; background-size: 320px, 487px, contain;} cap320 {width: 315px; height: 16px; bottom: -36px;} cap320w {width: 315px; height: 16px; bottom: -36px;} cap320xc {width: 315px; height: 32px; bottom: -52px;} cap320xxc {width: 315px; height: 48px; bottom: -36px;} cred320 {width: 310px;} cred320w {width: 310px; bottom: 0px; } img155w {width: 155px; height: 77px; background-size: 155px, 77px, cover; margin: 0px 0px 8px 8px; } /* currently working as 155w */ img155 {width: 155px; height: 155px; background-size: 155px, 155px, cover; margin: 0px 0px 8px 8px; } cap155 {position: absolute; width: 150px; padding-left: 3px; padding-bottom: 2px; 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.7; } cap155xc {position: absolute; width: 150px; padding-left: 3px; padding-bottom: 2px; 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.7; } img000 {width: 155px; height: 155px; margin: 0px 0px 8px 8px; background-size: 155px, 155px, cover;} img {z-index: 10;} img.box {display: inline-block; position: relative; float: right; right: -10px; margin: 0px 2px 8px 8px; max-width: 50vw; width: 320px; max-height: 320px; z-index: 3;} img.loading {display: inline-block; position: relative; float: left; left: 10px; margin: 0px 0px 0px 0px; width: 320px; height: 320px; z-index: 3;} img#locPic {display: inline-block; position: relative; top: -28px; background-image: url('650pics/default.jpg'); background-size: cover; float: left; left: 0px; margin: 0px 20px 0px 0px; max-width: 50vw; width: 320px; height: 155px; z-index: 3;} img.thumb {display: inline-block; position: relative; float: right; right: -10px; margin: 0px 0px 10px 8px; max-width: 33vw; width: 155px; max-height: 155px; z-index: 3;} img.widesmall {display: inline-block; position: relative; float: right; right: -10px; margin: 0px 0px 10px 8px; max-width: 33vw; width: 320px; max-height: 155px; height: 155px; z-index: 3;} 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.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.a320 {float: right; z-index: 10; margin: 0px 4px 20px 8px; height: 320px; width: 320px; } img.a320w {float: right; z-index: 10; margin: 0px 4px 20px 8px; height: 155px; width: 320px; } img.a650w {float: right; z-index: 10; margin: 0px 4px 20px 8px; height: 320px; width: 650px; } figure, figcaption {display: table-cell; font-size: 16px; text-decoration: none:} img.webcam{position: relative; top: -68px; z-index: -1; width: 100%;} img.gfx650s {width: 650px; height: 650px;} img.gfx980 {width: 650px; height: 433px;} img.pichead {position: absolute; left: 0;} div.pichead {height: 320px;} /* NEW SS REGIME VERSION */ div.img320w {display: inline-block; position: relative; float: right; right: -9px; background-position: center; background-repeat: no-repeat; z-index: 10; width: 320px; height: 155px; background-size: contain; margin: 0px 2px 24px 8px; } div.newsize {display: inline-block; height: 155px; width:320px;} /* END of Images Section */ /* images y.g or legacy */ video {} tube {display:block; position:relative; top: -16px; background: black; float:right; z-index: 3; margin: 0px 2px 30px 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 16px 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; } subsection#visit img650 {display: inline-block; position: relative; float: right; right: -9px; width: 320px; max-width: 100%; height: 155px; margin: 0px 2px 10px 8px; background-position: center; background-size: 320px, 155px, cover;} subsection#visit a.link650 {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;} /* as 320w in this subsection */ subsection#visit cap650 {position: absolute; width: 315px; 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;} /* as cap320w in this subsection */ img.covidbgsy {display: inline-block; position: relative; float: right; right: -9px; width: 650px; height: 320px; margin: 0px 2px 10px 8px; background-position: center; background-size: cover;background-image: url('graphics/covidgraphbgsy.png');} /* map popup */ img#locPic {display: inline-block; position: relative; top: -28px; background-image: url('650pics/default.jpg'); background-size: cover; float: left; left: 0px; margin: 0px 20px 0px 0px; width: 320px; height: 155px; z-index: 3;} a.mappoptextlink {color: darkblue; background-color: rgba(150, 150, 180, 0.4); } a.mappopbutton {display: table-cell; position: relative; float: right; top: 20px; 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 5px 5px 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;} /* now using mapboxbuttons as container and button and shortbutton */ a.shortmappopbutton {display: table-cell; position: relative; float: right; top: 0px; 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 5px 5px 0px; border: solid 1px darkblue; text-decoration: none; height: 28px; width: 32px; border-radius: 4px; box-shadow: 1px 1px 1px black; -webkit-box-shadow: 1px 1px 1px black; z-index: 4;} img.mappop {float: left; height: 32px; width: 32px; margin: 0px 2px 0px 0px; } /* replaced by mappopblob */ img.mappopblob {top: -2px; float: left; height: 32px; width: 32px; margin: 0px 6px 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;} div.mapnote {position: relative; display: block; box-sizing: border-box; top: 0px; left: 0px; width: 300px; max-width: 300px; height: 72px; font-size: 1.4em; background: transparent; overflow: hidden; } /* old */ a.mappopdistrict {display: inline-block; position: relative; top: -12px; font-family: arial, verdana, sans-serif; font-size: 100%; text-decoration: none; color: white; background-color: rgba(180, 240, 180, 0.9); border-width: 2px; border-style: solid; border-color: #ddddee; padding: 0px 30px 0px 3px; margin: 0px 0px 0px 0px; max-height: 36px; min-width: 180px;} a.mappopdistrict:hover {background-color: chartreuse;} /* see div.mapnotebox later */ /* 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 */ del {text-decoration: line-through;} div.tab {text-indent: 120px;} div.right {text-align: right;} /* ...................site specific colour */ h1 {display: block; margin: auto; color: yellowgreen; background: rgba(125,135,225, .2); font-family: arial, helvetica, sans-serif; font-size: 2em; font-weight: bold; font-stretch: condensed; font-kerning: normal; padding: 20px 0px 6px 4px; z-index: 3; text-shadow: 1px 2px gray;} /* ...................site specific background */ h2, subsection h2, post h2, notice h2, memorial h2, warning h2, railtpe h2, seaside h2, york h2 {display: block; width: 98%; display: block; position: relative; top: -16px; background: rgba(50,50,120, .5); color: white; font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; vertical-align: baseline; padding: 0px 6px 6px 8px; margin-bottom: -0.1em; border-radius: 6px; z-index: 1;} subsection h2 {background: rgba(125,135,225, .5); color: white;} notice h2 {background: rgba(150,50,50, .5); color: white;} warning h2 {background: rgba(255,160,0, .5); color: white; } memorial h2 {background: black; color: white;} railtpe h2 {color: white; background: steelblue; background-size: cover; background-position: 0% center; background-image: url(graphics/tpe-head.png); width: 98%;} seaside h2 {color: white; background: goldenrod; background-size: cover; background-position: 0% center; background-image: url(graphics/seaside-head.png); width: 98%;} york h2 {color: white; background: rgba(50,50,120, .5); background-size: cover; background-position: 0% center; background-image: url(graphics/york-head.png); width: 98%;} mapbox h2 {display: block; position: relative; top: -12px; background: rgba(50,50,120, .5); color: white; font-family: Arial, Helvetica, sans-serif; font-size: 2em; vertical-align: top; width: 98%; padding: 1px 0px 3px 8px; vertical-align: middle;} post h2 small {color: white; opacity: 0.7; font-size: 0.6em;} flyer h2 small {color: white; opacity: 0.7; font-size: 0.6em;} 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, subsection h3, post h3, memorial h3, section h3, wrap h3, flyer h3, railtpe h3, seaside h3, york h3, warning h3, notice h3 {display: block; width: 98%; background: white; color: darkgray; position: relative; top: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; vertical-align: baseline; padding: 0px 6px 6px 8px; margin-bottom: 0.2em; border-radius: 6px; z-index: 1;} subsection h3 {background: white; color: darkgray; } subsection h3 img {vertical-align: -3px;} post h3 {background: white; color: darkgray;} memorial h3 {background: white; color: black;} railtpe h3 {background: white; color: darkgray;} section#plus h3 {background: rgba(255,255,255, 0.2); color: white; font-size: 1.0em; padding: 0px 0px 4px 4px;} section#plus h3 img {vertical-align: 3px; height: 32px; width: 32px;} wrap#council h3 {background: rgba(255,255,255, 0.2); color: white; font-size: 1.0em; padding: 0px 0px 4px 4px;} wrap#council em {color: white; font-size: 1.0em;} /* warning h3, notice h3 {background: rgba(255,255,255, 0.2); color: white; font-size: 1.0em; padding: 0px 0px 4px 4px;} */ flyer#features h3 {background: rgba(255,255,255, 0.2); color: white; font-size: 1.0em; padding: 0px 0px 4px 4px;} flyer#features h3 img {vertical-align: 3px; height: 32px; width 32px;} election h3 {display: inline-block; background: white; color: darkgray; font-family: Arial, Helvetica, sans-serif; font-size: 60%; width: 300px; height: 80px; padding: 0px 0px 8px 8px;} election h3 em {color: lightgray;} h3.mappop {font-size: 1.8em; vertical-align: top; min-width: 80px;} h4 {font-size: 0.6em;} flyer h4 {background: rgba(180,180,150, 0.5); color: steelblue; font-size: 1.2em; padding: 0px 0px 8px 4px;} h5 {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;} /* 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;} whitetext {color: white; background: transparent;} blacktext {color: black; opacity: 1; background: transparent;} greytext {color: slategray; background: transparent;} greentext {color: forestgreen; background: transparent;} palegreentext {color: palegreen; background: transparent;} redtext {color: red; background: transparent;} tomatotext {color: tomato; background: transparent;} bluetext {color: blue; background: transparent;} ambertext {color: darkorange; background: transparent;} yellowtext {color: yellow; background: transparent;} blackital {color: black; opacity: 0.9; background: transparent; font-style: italic} span.green {color: forestgreen;} span.black{color: black; background: transparent;} black{color: black; background: transparent;} gray{color: lightgray; background: transparent;} 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;} onpurple {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;} onred {color: white; background: red; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} onfadered {color: white; background: red; opacity: 0.5; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} onblue {color: white; background: blue; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} span.amber{color: white; background: darkorange; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} amber{color: white; background: darkorange; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} onamber {color: white; background: darkorange; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} onfadeamber {color: darkorange; background: #ffdcb1; 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;} palegreen{color: white; background: palegreen; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} ongreen {color: white; background: green; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} onfadegreen {color: white; background: green; opacity: 0.3; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} onpalegreen {color: white; background: palegreen; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} onyellowgreen {color: white; background: yellowgreen; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} onyellow {color: darkgray; background: yellow; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} onfadeyellow {color: darkgray; background: yellow; opacity: 0.3; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} ongold {color: darkgray; background: gold; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} on blue {color: white; background: blue; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} onblack{color: white; background: black; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} onwhite{color: black; background: white; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} onfadewhite{color: black; background: white; opacity: 0.5; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} onlightgray{color: white; background: #999999; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} ongray{color: white; background: dimgray; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} ondarkgray{color: white; background: #333333; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} onblank{color: white; background: #333333; opacity: 0.1; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px;} /* green clashes with green party - needs change */ /* road and rail */ 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.onwhite {color: black; background: white; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px; } onwhite {color: black; background: white; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px; } blackborder {color: black; background: white; padding-left: 5px; padding-right: 5px; margin-left: 2px; margin-right: 3px; border: 1px solid black; } 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 {display: inline-block; color: white; background: black; min-width: 44px; padding-left: 3px; padding-right: 3px; text-align: right; margin-top: 1px;} busroute {display: inline-block; color: white; background: black; min-width: 44px; padding-left: 3px; padding-right: 3px; text-align: right; margin-top: 1px;} busno {display: inline-block; color: white; background: black; min-width: 44px; padding-left: 3px; padding-right: 3px; text-align: right; margin-top: 1px;} /* ------ Rail operators --------------- */ station {display:inline-block; color: black; background: white; border: solid 1px #000000; font-size: 1.2em; font-weight: bold; border-radius: 6px; padding: 4px 4px 4px 8px; margin: 0px 0px 8px 0px; width: 240px;} nonstop {display:block; background: lightgray; } route {display:block; max-height: 420px; overflow-x: hidden; overflow-y: auto;} mapticket {display:block; width: 268px; padding: 5px; border: 1px solid slategray; margin-left: 1px; border-radius: 14px 14px 14px 14px; background: transparent; z-index: 5;} northern, tpe, lner, lumo, hulltr, xc, emr, gc, stram {display: inline-block; height: 32px; width: 312px; font-size: 0.8em; color: white; padding: 0px 4px 4px 4px; margin 0px 0px 2px 0px;} tpe:before, northern:before, lner:before, lumo:before, hulltr:before, xc:before, emr:before, gc:before, stram:before {display: inline-block; top: 0px; left: 4px; color: white; background: transparent;} northern {background: darkblue;} northern:before {content:" Northern";} tpe {background: skyblue;} tpe:before {content:" TransPennine Express";} lner {background: red;} lner:before {content:" LNER";} lumo {background: blue;} lumo:before {content:" LUMO";} hulltr {background: deeppink;} hulltr:before {content:" Hull Trains";} xc {background: #aaaaaa;} xc:before {content:" Cross Country";} gc {background: orange;} gc:before {content:" Grand Central";} emr {background: #993366;} emr:before {content:" EMR";} stram {background: yellow;} stram:before {content:" Supertram";} kwvr, nymr, ebasr, wr, mtnr {display:inline-block; height: 32px; width: 312px; font-size: 0.8em; color: white; background: darkolivegreen; padding: 0px 4px 4px 4px; margin 0px 0px 2px 0px;} nymr:before {display: inline-block; top: 0px; left: 4px; color: white; background: transparent; font-size: font-weight: bold; content:" North Yorkshire Moors Railway";} kwvr:before {display: inline-block; top: 0px; left: 4px; color: white; background: transparent; font-weight: bold; content:" Keighley and Worth Valley Railway";} ebasr:before {display: inline-block; top: 0px; left: 4px; color: white; background: transparent; font-size: 90%; font-weight: bold; content:" Embsay and Bolton Abbey Steam Railway";} wr:before {display: inline-block; top: 0px; left: 4px; color: white; background: transparent; font-weight: bold; content:" Wensleydale Railway";} mtnr:before {display: inline-block; top: 0px; left: 4px; color: white; background: transparent; font-weight: bold; content:" Middleton Railway";} tt {display:block; float: right; position: relative; top: -28px; right: 12px; color: white; padding: 0px 0px 2px 10px; background: transparent; width: 40px; font-family: arial, verdana, sans-serif; font-size: 1.1em; font-weight: bold; } seat {display:inline-block; color: #999999; background: white; border: solid 1px #aaaaaa; padding: 1px; width: 260px;} seat:before {display: inline-block; top: 0px; left: 4px; color: #999999; background: transparent; font-size: 1em; font-weight: normal; content:"Seat reservation required";} seatrec {display:inline-block; color: #999999; background: white; border: solid 1px #aaaaaa; padding: 1px; width: 260px;} seatrec:before {display: inline-block; top: 0px; left: 4px; color: #999999; background: transparent; font-size: 1em; font-weight: normal; content:"Seat reservation recommended";} /* ------ Station inserts --------------- */ stationinsert {} stationinsert b {color:#333333;} stationinsert addr {vertical-align: text-bottom; position: relative; left: 20px; font-size: 0.7em; color: lightgray;} stationinsert intro {font-size: 0.8em; color:slategray;} stationinsert dest {display: block; width: 320px; font-size: 0.8em; color: black; background: white; padding: 4px 5px 4px 5px;} stationinsert plat {display: block; width: 98%; font-size: 0.8em; color: white; background: #666666; padding: 0px 6px 0px 6px; margin: 0px 2px 4px 3px;} stationinsert platno {display: inline-block; color: black; background: white; padding: 0px 10px 0px 10px; margin: 0px 2px 0px 3px;} stationinsert route {display: block; font-size: 0.8em; color:slategray; margin-bottom: 12px;} stationinsert wy {color: red;} stationinsert wy a {color: red;} stationinsert sy {color: gold;} stationinsert sy a {color: gold;} stationinsert niy {color: #bbbbbb;} stationinsert t {font-size: 0.8em; color:#333333;} stationinsert wy t {font-size: 0.8em; color: black;} stationinsert sy t {font-size: 0.8em; color: black;} stationinsert notes {display: block; width: 650px; border: 1px solid slategray; font-size: 0.7em; color:slategray; padding: 8px 8px; margin: 0px 0px;} stationinsert notes a {color:darkgray;} stationinsert notes sym {font-size: 1em; color:#333333;} mapticket northern, tpe, lner, lumo, hulltr, xc, emr, gc, stram, northern, kwvr, nymr, ebasr, wr, mtnr {width: 260px; height: 24px; border-radius: 11px 11px 0px 0px; vertical-align: bottom;} /* ------- Blobs -------------- */ div#mapnotebox {position: relative; display: inline-block; box-sizing: border-box; top: -48px; left: 0px; width: 300px; max-width: 300px; height: 155px; font-size: 1em; background: rgba(180,180,180,0.3); vertical-align: top; overflow: hidden; float: left;} div#mapnotebox img {width: 48px; height: 48px;} div#mapboxinfo {position: relative; display: inline-block; box-sizing: border-box; top: -64px; left: 0px; width: 300px; max-width: 300px; height: 40px; font-size: 1em; background: rgba(255,255,255,0); vertical-align: top; overflow: hidden; float: left;} div#mapboxbuttons {position: relative; top: -6px; } /* ------- container for mapbox buttons --- W ---------- */ air0 {display: inline-block; position: relative; top: 2px; background-image: url('blobs/air.gif'); background-size: contain; width: 24px; height: 24px; z-index: 5; } bus0 {display: inline-block; position: relative; top: 2px; background-image: url('blobs/bus.gif'); background-size: contain; width: 24px; height: 24px; z-index: 5; } road0 {display: inline-block; position: relative; top: 2px; background-image: url('blobs/car.gif'); background-size: contain; width: 24px; height: 24px; z-index: 5; } walk0 {display: inline-block; position: relative; top: 2px; background-image: url('blobs/path.gif'); background-size: contain; width: 24px; height: 24px; z-index: 5; } cycle0 {display: inline-block; position: relative; top: 2px; background-image: url('blobs/cycle.gif'); background-size: contain; width: 24px; height: 24px; z-index: 5; } sta0 {display: inline-block; position: relative; top: 2px; background-image: url('blobs/rail.gif'); background-size: contain; width: 24px; height: 24px; z-index: 5; } img.keyblob, pub, club, wc, sch, uni, bus, busi, buso, busq, air, road, grg, fuel, hw, nd, nym, pd, yd, fb, np, fob, path, walk, cycle, steam, stai, sta, nosta, riv, cnl, cpw, popt, pom, po, bank, lby, lbp, lbpt, lbm, ft, fc, fr, acc, shop, shopf, shopn, smkt, mktpt, mkt, ch, chem, cchall, chall, vh, vhall, phall, thall, cc, tht, cncrt, ent, rac, mus, art, park, swim, sport, golf, soccer, rugby, cricket, bch, tp, htl, yha, bb, tinfo, ha, ha0, hh, hh0, hc, hc0, hx, hp, hbp, fall, cin, tram, add, blf, duck, xrobin {display: inline-block; position: relative; left: 33px; background-size: contain; width: 36px; height: 36px; z-index: 205;} /* ...... modified in mapbox.css */ pub {background-image: url('blobs/pub.gif'); } club {background-image: url('blobs/pub.gif'); } wc {background-image: url('blobs/wc.gif'); } sch {background-image: url('blobs/school.gif'); } uni {background-image: url('blobs/university.gif'); } bus {background-image: url('blobs/bus.gif'); } busi {background-image: url('blobs/businf.gif'); } buso {background-image: url('blobs/busdate.gif'); } busq {background-image: url('blobs/busq.gif'); } tram {background-image: url('blobs/tram.gif'); } air {background-image: url('blobs/air.gif'); } road {background-image: url('blobs/car.gif'); } grg {background-image: url('blobs/garage.gif'); } fuel {background-image: url('blobs/fuel.gif'); } hw {background-image: url('blobs/hhills.gif'); } nd {background-image: url('blobs/nd.gif'); } nym {background-image: url('blobs/nym.gif'); } pd {background-image: url('blobs/pd.gif'); } yd {background-image: url('blobs/yd.gif'); } fb {background-image: url('blobs/fb.gif'); } np {background-image: url('blobs/np.gif'); } fob {background-image: url('blobs/fob.gif'); } path {background-image: url('blobs/path.gif'); } walk {background-image: url('blobs/path.gif'); } cycle {background-image: url('blobs/cycle.gif'); } steam {background-image: url('blobs/steam.gif'); } stai {background-image: url('blobs/railgosh.gif'); } sta {background-image: url('blobs/rail.gif'); } nosta {background-image: url('blobs/norail.gif'); } cnl {background-image: url('blobs/canal.gif'); } riv {background-image: url('blobs/river.gif'); } cpw {background-image: url('blobs/worship.gif'); } popt {background-image: url('blobs/popt.gif'); } pom {background-image: url('blobs/pom.gif'); } po {background-image: url('blobs/post.gif'); } bank {background-image: url('blobs/bank.gif'); } lby {background-image: url('blobs/library.gif'); } lbp {background-image: url('blobs/librarypt.gif'); } lbpt {background-image: url('blobs/librarypt.gif'); } lbm {background-image: url('blobs/librarymobile.gif'); } ft {background-image: url('blobs/takeaway.gif'); } fc {background-image: url('blobs/cafe.gif'); } fr {background-image: url('blobs/restaurant.gif'); } shop {background-image: url('blobs/shop.gif'); } smkt {background-image: url('blobs/supermarket.gif'); } shopf {background-image: url('blobs/shopf.gif'); } shopn {background-image: url('blobs/shopn.gif'); } mktpt {background-image: url('blobs/marketpt.gif'); } mkt {background-image: url('blobs/market.gif'); } ch, chem {background-image: url('blobs/chemist.gif'); } cchall, chall, vh, vhall, phall, thall, cc {background-image: url('blobs/community.gif'); } tht, cncrt, ent {background-image: url('blobs/theatre.gif'); } rac {background-image: url('blobs/horse.gif'); } golf {background-image: url('blobs/golf.gif'); } soccer {background-image: url('blobs/soccer.gif'); } rugby {background-image: url('blobs/rugby.gif'); } cricket {background-image: url('blobs/cricket.gif'); } mus {background-image: url('blobs/museum.gif'); } cin {background-image: url('blobs/cinema.gif'); } art {background-image: url('blobs/art.gif'); } park {background-image: url('blobs/tree.gif'); } tp {background-image: url('blobs/tp.gif'); } duck {background-image: url('blobs/duck.gif'); } xrobin {background-image: url('blobs/xrobin.gif'); } swim {background-image: url('blobs/swim.gif'); } sport {background-image: url('blobs/sportshall.gif'); } acc {background-image: url('blobs/acc.gif'); } bch {background-image: url('blobs/sands.gif'); } htl {background-image: url('blobs/hotel.gif'); } yha {background-image: url('blobs/yha.gif'); } bb {background-image: url('blobs/hotel.gif'); } tinfo {background-image: url('blobs/info.gif'); } ha {background-image: url('blobs/abbey.gif'); } ha0 {background-image: url('blobs/abbey.gif'); } hp {background-image: url('blobs/abbey.gif'); } hh {background-image: url('blobs/house.gif'); } hh0 {background-image: url('blobs/house.gif'); } hc {background-image: url('blobs/castle.gif'); } hc0 {background-image: url('blobs/castle.gif'); } hx {background-image: url('blobs/church.gif'); } hbp {background-image: url('blobs/blueplaque.gif'); } fall {background-image: url('blobs/falls.gif'); } blf {background-image: url('blobs/blank.gif'); } /* add text fix */ add {display:block; position: relative; width: 196px; top: 6px; margin-top: 10px; } /* bus route experiment */ bus159 {display:block; position: relative; left: 33px; background-image: url('blobs/159.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } bus821 {display:block; position: relative; left: 33px; background-image: url('blobs/821.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } bus822 {display:block; position: relative; left: 33px; background-image: url('blobs/822.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } bus857 {display:block; position: relative; left: 33px; background-image: url('blobs/857.gif'); background-size: contain; width: 36px; height: 36px; z-index: 5; } /* train route */ divert {display:block; position: relative; float: left; width: 32px; height: 32px; margin-right: 4px; margin-top: 4px; background: white; background-image: url('blobs/tiny/route-divert.png'); background-size: cover; z-index: 5; } repbus {display:block; position: relative; float: left; width: 32px; height: 32px; margin-right: 4px; margin-top: 4px; background: white; background-image: url('blobs/tiny/route-bus.png'); background-size: cover; z-index: 5; } part {display:block; position: relative; float: left; width: 32px; height: 32px; margin-right: 4px; margin-top: 4px; background: white; background-image: url('blobs/tiny/route-part.png'); background-size: cover; 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;} h3 small {color: slategray; font-family: Arial, Helvetica, sans-serif; font-size: 80%; font-weight: bold; opacity: 0.9; z-index: 3;} post small {color: slategray; font-family: Arial, Helvetica, sans-serif; font-size: 80%; font-weight: bold; opacity: 0.9; z-index: 3;} memorial small {color: slategray; font-family: Arial, Helvetica, sans-serif; font-size: 80%; font-weight: bold; opacity: 0.9; z-index: 3;} notice small {color: slategray; font-family: Arial, Helvetica, sans-serif; font-size: 80%; font-weight: bold; opacity: 0.9; z-index: 3;} warning small {color: slategray; font-family: Arial, Helvetica, sans-serif; font-size: 80%; font-weight: bold; opacity: 0.9; z-index: 3;} addr {color: white; font-family: Arial, Helvetica, sans-serif; font-size: 80%; font-weight: bold; opacity: 0.7; z-index: 3; vertical-align: 4px;} web {color: white; font-family: Arial, Helvetica, sans-serif; font-size: 80%; font-weight: bold; opacity: 0.7; z-index: 3; vertical-align: -4px;} h5 {color: white; font-family: Arial, Helvetica, sans-serif; font-size: 80%; font-weight: bold; opacity: 0.7; z-index: 3; margin-top: 6px; margin-bottom: 6px;} shrink {font-size: 50%;} election shrink {display: none;} archivedate {color: white; font-family: Arial, Helvetica, sans-serif; font-size: 40%; font-weight: bold; opacity: 0.7; z-index: 3;} archivedate:before {color: black; content:" Archived - first created: ";} i {opacity: 0.5; font-style: italic} small i {opacity: 0.8; font-style: italic} election em i {font-size: 80%; font-style: italic} /* em styles */ em {opacity: 0.7; color: white; font-style: normal} post em {opacity: 0.7; color: black; font-style: normal} memorial 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: 2px 12px 10px 2px; margin: 0px 4px 4px 0px; font-size: 0.9em; vertical-align: top;} td.red {background-color: red;} td.palered {background-color: tomato;} td.yellow {background-color: yellow;} td.green {background-color: chartreuse;} td.palegreen {background-color: palegreen;} td.white {background-color: white;} /* standard graphics */ microdot {display: inline-block; width: 12px; height: 12px; background-image: url('https://dotguide.co.uk/icons/micro-icon.png'); background-size: cover;} microrose {display: inline-block; width: 12px; height: 12px; background-image: url('https://dotguide.co.uk/yorkshire/icons/micro-icon.png'); background-size: cover;} microflag {display: inline-block; width: 24px; height: 12px; background-image: url('https://dotguide.co.uk/icons/micro-flag.png'); background-size: cover;} /* 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#beauty, 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: 62%; width: 100px; background-image: url('buttonpics/york.jpg'); background-position: center 30px; background-size: cover; 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/york.jpg') no-repeat center 30px; background-size: cover; } /* 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/bus1.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/bus1.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/pics1.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/pics1.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/road1.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/road1.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;} /* national landscapes button */ a#beauty {background-image: url('320pics/brimhamrocks.jpg');} a#beauty:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content:"Natural beauty";} a#beauty:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "More areas with outstanding landscapes";} a#beauty:hover {background: chartreuse url('320pics/brimhamrocks.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/richmond-castle.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/richmond-castle.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;} /* ticker control */ @keyframes ticker { 0% { visibility: visible; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0); } } @-webkit-keyframes ticker { 0% { visibility: visible; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0); } } tickerbox { position: relative; bottom: 12px ; width: 100%; overflow: hidden; height: 160px; padding-left: 100%; box-sizing: content-box; } tickerbox ticker { display: inline-block; height: 80px; line-height: 2.4em; white-space: nowrap; margin-left: 40px; padding-right: 100%; box-sizing: content-box; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-name: ticker; -webkit-animation-name: ticker; animation-duration: 25s; -webkit-animation-duration: 25s; } tickertext { display: inline-block; padding: 0px 32px; font-size: 1.6em; color: rgba(0,0,0,0.8); } /* mapbox */ mapboxcontainer {position:fixed; display: inline-table; background-color: rgba(255, 255, 255, 0.9); color: black; width: 640px ; height: 320px; padding: 0px 10px 5px 20px; border-radius: 12px; border: 0px solid #334477; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; z-index: 200; font-family: arial, verdana, sans-serif; font-size: 100%;} mapboxcontainer div#buttons {position: absolute; display: table-cell; background: transparent; left: 352px; top: 220px; width: 320px; height: 54px; z-index: 201;} mapboxcontainer div#mapboxdistrict {position: absolute; display: table-cell; background: transparent; left: 352px; top: 24px; min-width: 250px; height: 48px; z-index: 203;} mapboxcontainer div#mapboxtext {position: absolute; display: table-cell; background: transparent; left: 352px; top: 100px; width: 300px; height: 56px; vertical-align: middle; z-index: 201;} mapboxcontainer div#mapboxblobs {position: absolute; display: inline-block; left: 20px; top: 64px; width: 620px; height: 40px; background: rgba(180,180,180, 0); float: left ; font-size: 0.7em; vertical-align: top; z-index: 201;} mapboxcontainer h2 {position: absolute; display: inline-block; background: rgba(50,50,120, .5); color: white; font-size: 1.6em; padding: 3px 0px 3px 10px; vertical-align: middle; top: 0px; height: 34px; width: 625px; z-index: 201;} mapboxcontainer h3 {position: absolute; display: inline-block; background: transparent; color: cyan; font-size: 1.2em; padding: 1px 0px 3px 8px; vertical-align: middle; top: 5px; left: 345px; width: 300px; z-index: 202;} mapboxcontainer img {position: absolute; display: table-cell; left: 20px; top: 102px; width: 320px; height: 155px;} mapboxcontainer img.tinyblob{display: inline-block; position: relative; top: 3px; left: 0px; margin: 0px 0px 0px 0px; max-width: 24px; max-height: 24px;} mapboxcontainer img.blob {position: relative; left: 0px; width: 48px; height: 48px; float: left;} mapboxcontainer div#mapboxblobs img {width: 48px; height: 48px; float: left;} mapboxcontainer a.mapboxdistrict {display: inline-block; float: right; color: white; background-color: rgba(96, 182, 42, 0.9); font-size: 1.2em; font-weight: bold; border-width: 1px; border-style: solid; border-color: #ddddee; padding: 0px 12px 1px 4px; vertical-align: top; min-width: 180px;} mapboxcontainer a.mapboxdistrict:hover {background-color: chartreuse;} mapboxcontainer a.blobkeybutton {display: inline-block; position: relative; color: white; background-color: rgba(150, 150, 180, 0.4); left: 38px; top: 6px; width: 28px; height: 18px; font-size: 1.3em; font-weight: bold; border-width: 1px; border-style: solid; border-color: #ddddee; border-radius: 2px; margin; 0px; padding: 1px 4px 1px 4px; border-radius: 2px; } mapboxcontainer a.blobkeybutton:hover {background-color: chartreuse;} mapboxcontainer a.shortbutton img {position: relative; top: 0px; left: 0px; width: 120px; height: 32px;} mapboxcontainer a.button img {position: relative; top: 0px; left: 0px; width: 120px; height: 32px;} mapboxcontainer pub, mapboxcontainer club, mapboxcontainer wc, mapboxcontainer sch, mapboxcontainer uni, mapboxcontainer bus, mapboxcontainer buso, mapboxcontainer busi, mapboxcontainer busq, mapboxcontainer busdate, mapboxcontainer air, mapboxcontainer road, mapboxcontainer grg, mapboxcontainer fuel, mapboxcontainer hw, mapboxcontainer nd, mapboxcontainer nym, mapboxcontainer pd, mapboxcontainer yd, mapboxcontainer fb, mapboxcontainer np, mapboxcontainer fob, mapboxcontainer path, mapboxcontainer walk, mapboxcontainer steam, mapboxcontainer stai, mapboxcontainer sta, mapboxcontainer nosta, mapboxcontainer riv, mapboxcontainer cnl, mapboxcontainer cpw, mapboxcontainer popt, mapboxcontainer pom, mapboxcontainer po, mapboxcontainer bank, mapboxcontainer lby, mapboxcontainer lbp, mapboxcontainer lbpt, mapboxcontainer lbm, mapboxcontainer ft, mapboxcontainer fc, mapboxcontainer fr, mapboxcontainer acc, mapboxcontainer shop, mapboxcontainer shopf, mapboxcontainer shopn, mapboxcontainer smkt, mapboxcontainer mktpt, mapboxcontainer mkt, mapboxcontainer ch, mapboxcontainer chem, mapboxcontainer cchall, mapboxcontainer chall, mapboxcontainer vh, mapboxcontainer vhall, mapboxcontainer phall, mapboxcontainer thall, mapboxcontainer cc, mapboxcontainer tht, mapboxcontainer cncrt, mapboxcontainer ent, mapboxcontainer rac, mapboxcontainer mus, mapboxcontainer art, mapboxcontainer park, mapboxcontainer swim, mapboxcontainer sport, mapboxcontainer golf, mapboxcontainer soccer, mapboxcontainer rugby, mapboxcontainer bch, mapboxcontainer tp, mapboxcontainer htl, mapboxcontainer yha, mapboxcontainer bb, mapboxcontainer tinfo, mapboxcontainer ha, mapboxcontainer ha0, mapboxcontainer hh, mapboxcontainer hh0, mapboxcontainer hc, mapboxcontainer hc0, mapboxcontainer hx, mapboxcontainer hp, mapboxcontainer hbp, mapboxcontainer cin, mapboxcontainer tram, mapboxcontainer fall, mapboxcontainer blf {display: block; position: relative; background-size: contain; width: 32px; height: 32px; z-index: 205; } mapboxcontainer blf {display: block; position: relative; left: 0px; top: 0px; z-index: 205; } /* leaflet custom amendments */ /* general typography */ .leaflet-container { font: 16px arial, verdana, sans-serif; font-weight: normal; } .leaflet-container a.leaflet-popup-close-button, railmapkey a.closebutton { position: absolute; top: 12px; right: 12px; padding: 0px 0px 0px 0px; border: 2px solid #cccccc; border-radius: 6px; text-align: center; vertical-align: top; width: 32px; height: 32px; font: 28px arial, verdana, sans-serif; color: #cccccc; text-decoration: none; font-weight: bold; background: rgba(255, 0, 0, 0.7); z-index: 203; } .leaflet-container a.leaflet-popup-close-button:hover { background: rgba(128, 255, 0, 0.7); z-index: 203; } .leaflet-popup-content { margin: 13px 24px 13px 20px; line-height: 1.3; font-size: 13px; font-size: 1.08333em; min-height: 1px; } .leaflet-popup-content p { margin: 17px 0; margin: 1.3em 0; } .leaflet-control-zoom-in, .leaflet-control-zoom-out { font: bold 40px 'Lucida Console', Monaco, monospace; text-indent: 1px; } .leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out { font-size: 40px; }