/* ======================= MAP & ICONS POSITIONING ======================= */ #Map {position: fixed; z-index: 0; width: 100vw; height: 100vh; background:url(p_EuropemapWind.gif) no-repeat; background-size: auto 100%} #Map1 {position: fixed; z-index: 0; width: 100vw; height: 100vh; background:url(p_EuropemapWind1.gif) no-repeat; background-size: auto 100%} #Map2 {position: fixed; z-index: 0; width: 100vw; height: 100vh; background:url(p_EuropemapWind2.gif) no-repeat; background-size: auto 100%} #Map3 {position: fixed; z-index: 0; width: 100vw; height: 100vh; background:url(p_EuropemapWind3.gif) no-repeat; background-size: auto 100%} #Map4 {position: fixed; z-index: 0; width: 100vw; height: 100vh; background:url(p_EuropemapWind4.gif) no-repeat; background-size: auto 100%} .HVDC_rating {position:relative; top:-3vh;} #NSL {position: fixed; left: 44.5vh; top: 4.5vh; width: 41.6vh; height: 47vh; background:url(ES_icons/INTwhite.gif) 0 0 no-repeat; background-size: auto 129%;} #NSL:hover {background:url(ES_icons/INTgreen.gif) 0 0 no-repeat; background-size: auto 129%;} #NSL b {display: none;} #NSL:hover b {display:block;} .NSLtxt {position: fixed; left: 55vh; top: 25vh; width: 28.2vh; height: 28.2vh; color: #80ffaa; text-shadow: 1px 1px #000000; } .NSLtxt::before {content: "NSL - 1.4GW HVDC link to Norway"; } #IFA {position: fixed; left: 58vh; top: 79.6vh; width: 8.5vh; height: 7.9vh; background:url(ES_icons/INTwhite.gif) -22vh -49vh no-repeat; background-size: auto 800%;} #IFA:hover {background:url(ES_icons/INTgreen.gif) -22vh -49vh no-repeat; background-size: auto 800%;} #IFA b {display: none;} #IFA:hover b {display:block;} .IFAtxt {position: fixed; left: 65vh; top: 83vh; width: 28.2vh; height: 28.2vh; color: #67ec91; text-shadow: 1px 1px #000000;} .IFAtxt::before {content: "IFA - 2GW HVDC link to France"; } #IFA2 {position: fixed; left: 45.5vh; top: 81vh; width: 15.7vh; height: 15.6vh; background:url(ES_icons/INTwhite.gif) -38vh -48vh no-repeat; background-size: auto 410%;} #IFA2:hover {background:url(ES_icons/INTgreen.gif) -38vh -48vh no-repeat; background-size: auto 410%;} #IFA2 b {display: none;} #IFA2:hover b {display:block;} .IFA2txt {position: fixed; left: 30vh; top: 88vh; width: 28.2vh; height: 28.2vh; color: #80ffaa; text-shadow: 1px 1px #000000;} .IFA2txt::before {content: "France - HVDC 'IFA2' link = 1GW"; } #EW {position: fixed; left: 20.3vh; top: 59.3vh; width: 17vh; height: 7.8vh; background:url(ES_icons/INTwhite.gif) -0vh -53vh no-repeat; background-size: auto 750%;} #EW:hover {background:url(ES_icons/INTgreen.gif) -0vh -53vh no-repeat; background-size: auto 750%;} #EW b {display: none;} #EW:hover b {display:block;} .EWtxt {position: fixed; left: 5vh; top: 63vh; width: 20vh; height: 28.2vh; color: #67ec91; text-shadow: 1px 1px #000000;} .EWtxt::before {content: "Ireland - HVDC 'East-West' link = 0.5GW"; } #IRL {position: fixed; left: 22.2vh; top: 46.6vh; width: 7.8vh; height: 7.8vh; background:url(ES_icons/INTwhite.gif) -30vh -51.5vh no-repeat; background-size: auto 800%;} #IRL:hover {background:url(ES_icons/INTgreen.gif) -30vh -51.5vh no-repeat; background-size: auto 800%;} #IRL b {display: none;} #IRL:hover b {display:block;} .IRLtxt {position: fixed; left: 2vh; top: 27vh; width: 14vh; height: 28.2vh; color: #80ffaa; text-shadow: 1px 1px #000000; } .IRLtxt::before {content: "N Ireland - HVDC 'IRL' link = 0.5GW"; } #BritNed {position: fixed; left: 56.3vh; top: 71.4vh; width: 20.8vh; height: 8.2vh; background:url(ES_icons/INTwhite.gif) -0vh -48.35vh no-repeat; background-size: auto 760%;} #BritNed:hover {background:url(ES_icons/INTgreen.gif) -0vh -48.35vh no-repeat; background-size: auto 760%;} #BritNed b {display: none;} #BritNed:hover b {display:block;} .BritNedtxt {position: fixed; left: 77vh; top: 64vh; width: 24vh; height: 20vh; color: #80ffaa; text-shadow: 1px 1px #000000;} .BritNedtxt::before {content: "Netherlands - HVDC 'BritNed'link = 1GW"; } #NEMO {position: fixed; left: 58.3vh; top: 77.4vh; width: 16vh; height: 3.3vh; background:url(ES_icons/INTwhite.gif) -17.3vh -55vh no-repeat; background-size: auto 1820%;} #NEMO:hover {background:url(ES_icons/INTgreen.gif) -17.3vh -55vh no-repeat; background-size: auto 1820%;} #NEMO b {display: none;} #NEMO:hover b {display:block;} .NEMOtxt {position: fixed; left: 75vh; top: 73vh; width: 20vh; height: 28.2vh; color: #67ec91; text-shadow: 1px 1px #000000;} .NEMOtxt::before {content: "Belgium - HVDC 'Nemo' link = 1GW"; } #Viking {position: fixed; left: 53.3vh; top: 35vh; width: 50vh; height: 27.3vh; background:url(ES_icons/INT-Viking-white.gif) 0vh 0vh no-repeat; background-size: auto 100%; } #Viking:hover {background:url(ES_icons/INT-Viking-green.gif) 0vh 0vh no-repeat; background-size: auto 100%;} #Viking b {display: none;} #Viking:hover b {display:block;} .Vikingtxt {position: fixed; left: 70vh; top: 40vh; width: 20vh; height: 28.2vh; color: #67ec91; text-shadow: 1px 1px #000000;} .Vikingtxt::before {content: "Denmark - HVDC 'Viking' link = 1.4GW"; } .IconGroup {position:fixed; } /* (Wind & Interconnectors) */ .IconGroup a b {display: none;} .IconGroup a:hover b {display:block} .WindData {position: fixed; top: 30vh; left: 60vh; width: 28.2vh; height: 28.2vh; color: black; } .WindData::before {content: "Wind capacity: 14.2GW Now: 10.1GW (22% of UK power)";} .Wind1 {position: fixed; width: 4.5vh; height: 6.4vh; border: 0; background: url(ES_icons/Wind-fast.gif);background-size: 4.5vh 6.4vh;} .Wind2 {position: fixed; width: 4.5vh; height: 6.4vh; border: 0; background: url(ES_icons/Wind-v-fast.gif);background-size: 4.5vh 6.4vh;} .Wind0 {position: fixed; width: 4.5vh; height: 6.4vh; border: 0; background: url(ES_icons/Wind.gif); background-size: 4.5vh 6.4vh;} #WindIcon0 {top: 11.5vh; left: 35.8vh} /* --Scot OS */ #WindIcon1 {top: 71.8vh; left: 57.3vh} /* --Thames */ #WindIcon2 {top: 51.9vh; left: 60.5vh} /* --Dogger */ #WindIcon3 {top: 55.5vh; left: 32.7vh} /* --Mersey */ #WindIcon4 {top: 77.3vh; left: 30.9vh} /* --Devon */ #WindIcon5 {top: 50.9vh; left: 20.9vh} /* --Ulster E */ #WindIcon6 {top: 43.6vh; left: 13.6vh} /* --Ulster W */ /* #WindIcon7 {top: 18.2vh; left: 25.5vh} */ /* (to disable:) DISABLED for now because live website isn't reading all CSS... */ #WindIcon7 {top: 18.2vh; left: 25.5vh; /*--- animation: SpinTurb 2s infinite; ---*/ animation-timing-function: linear;} @keyframes SpinTurb { 0% {transform: rotate(0deg);} 25% { transform: rotate(90deg);} 50% {transform: rotate(180deg);} 75% {transform: rotate(270deg);} 100% {transform: rotate(360deg);} } #WindIcon8 {top: 27.3vh; left: 30.9vh} /* --Scotland 2 */ .Power {position: fixed; width: 9vh; height: 9.1vh; border:0} #BiomassIcon {top: 49.1vh; left: 44.5vh; background: url(ES_icons/Icon-Biomass.gif);background-size: 9vh 9.1vh;} #CoalIcon {top: 55.5vh; left: 48.2vh; background: url(ES_icons/Icon-Coal.gif);background-size: 9vh 9.1vh;} a[id*="GasIcon"] {position: fixed; width: 6.7vh; height: 6.4vh; border:0; } #GasIcon1 {top: 44.5vh; left: 41.8vh; background: url(ES_icons/Icon-Gas.gif); background-size: 6.7vh 6.4vh} /* --Yorks */ #GasIcon2 {top: 71.8vh; left: 51.8vh; background: url(ES_icons/Icon-Gas.gif); background-size: 6.7vh 6.4vh} /* --London */ #GasIcon3 {top: 68.2vh; left: 43.6vh; background: url(ES_icons/Icon-Gas.gif); background-size: 6.7vh 6.4vh} /* --Midlands */ #GasIcon4 {top: 72.7vh; left: 30.9vh; background: url(ES_icons/Icon-Gas.gif); background-size: 6.7vh 6.4vh} /* --Wales */ #GasIcon5 {top: 44.5vh; left: 18vh; background: url(ES_icons/Icon-Gas.gif); background-size: 6.7vh 6.4vh} /* --Belfast */ #GasIcon6 {top: 58.2vh; left: 38.2vh; background: url(ES_icons/Icon-Gas.gif); background-size: 6.7vh 6.4vh} /* --Liverpool */ a[id*="SunIcon"] {position: fixed; width: 6.7vh; height: 6.7vh; border:0 } #SunIcon1 {top: 79.1vh;left: 43.6vh; background: url(ES_icons/Icon-Sun.gif); background-size: 6.4vh 6.4vh} /* --Soton */ #SunIcon2 {top: 66.4vh;left: 57.3vh; background: url(ES_icons/Icon-Sun.gif); background-size: 6.4vh 6.4vh} /* --East Anglia */ #SunIcon3 {top: 63.6vh;left: 40vh; background: url(ES_icons/Icon-Sun.gif); background-size: 6.4vh 6.4vh} /* --Midlands */ #SunIcon4 {top: 82.7vh;left: 30.9vh; background: url(ES_icons/Icon-Sun.gif); background-size: 6.4vh 6.4vh} /* --Cornwall */ a[id*="NuclearIcon"] {position: fixed; width: 6.7vh; height: 6.4vh; border:0} #NuclearIcon1 {top: 36.4vh;left: 38.2vh;background: url(ES_icons/Icon-Nuclear.gif) no-repeat; background-size: 6.7vh 6.4vh} /* --Scotland */ #NuclearIcon2 {top: 75.5vh;left: 38.2vh ; background: url(ES_icons/Icon-Nuclear.gif) no-repeat; background-size: 6.7vh 6.4vh} /* --Hinkley */ #NuclearIcon3 {top: 48.2vh;left: 34.5vh; background: url(ES_icons/Icon-Nuclear.gif) no-repeat; background-size: 6.7vh 6.4vh } /* --Sellafield */ #NuclearIcon4 {top: 75.5vh;left: 38.2vh; background: url(ES_icons/Icon-Nuclear.gif) no-repeat; background-size: 6.7vh 6.4vh} /* --Hinkley */ /* ======================= MAP & ICONS POSITIONING END======================= */