/* Google fonts -
YES - Darker Grotesque (clean, innocent, compact), Glory (OK), Text Me One (quite stylish, but less compact than Darker Grotesque), Monserrat
CHECK AGAIN - Noto Sans (very anonymous), 'DM Sans' (clean and airy), 'Cabin' (good, but fractionally too heavy),
No - 'Jost'(no- clunky, anonymous), 'Arsenal' (bit amateur), Didact Gothic (no bold), Fira Sans Condensed (Condensed fonts too cramped/heavy), Mada (a bit thin), figtree, Jaldi (massive spaces between lines), Gowun Dodum (bit dull)
CHANGES TO STYLE.css
3apr24 - p, .pFont, .InfoBox, .InfoSubBox {position:relative;}
replace "li" occurrences with ".dropdown" to allow default behaviour for other lists
10sep24 - .dropdown span removed from this list because it caused all blocks in menu to display without hover
*/
/*-- COLOUR SCHEMES MAIN #dfe8ef => #e5e2e2 => #e5e4e2---*/
/*-- Graphs --*/ canvas {background: #fcfbf8} /*-- #f8fbfc --*/
/*-- Graphs for GRAPH content colour schemes - see JS files (esp HomeGridModel.js) --*/
/*-- --*/ body {background: #281f05; color: #000;}
/*-- --*/ div[id*="Editorial-"] {background: #f5f4f2;}
/*-- --*/ .PicText {background: #f5f4f2;}
/*-- --*/ .SidebarTxt {background: #f5f4f2;}
/*-- --*/ @media only screen and (max-width: 400px) {
/*-- --*/ div[id*="Editorial-"] {background: #eff4f8;} /*-- brightened to make small text clearer --*/
/*-- --*/ .PicText {background: #eff4f8;}
/*-- --*/ }
/*-- --*/ .BackBox {background: #f34352; color: white;}
/*-- --*/ .HeadlineBox {background: #433339; color: white;}
/*-- --*/ .HeadlineBox2 {background: #f59143; color: black;}
/*-- MENU --*/ .ES_banner {background: #200e03; }
/*-- MENU --*/ .dropbtn, .dropdown-content a {background: rgba(37,20,15,0.6); color: white; font-size:2vw; }
/*-- MENU --*/ .dropdown:hover {background: rgba(37, 0, 0,1); }
/*-- MENU --*/ .dropdown-content a:hover {background: rgb(37,0,0)}
/*-- --*/ .hyperlink {color: #600000;background: rgba(255,255,0,0.1)}
/*-- --*/ .hyperlink:hover {color: rgb(0,0,200); background: rgb(245,245,266); transition: 0.5s;}
/*-- --*/ @media only screen and (max-width: 700px) {
/*-- --*/ div[class*="sc-"] div span {background: rgba(240,245,255,0.8);}
/*-- --*/ }
/*-- END OF COLOUR SCHEMES ---*/
/*-- TEXT SIZING - SUMMARY OF CHANGES ----------------*/
/*-- h1 - was 5vw - now 75px - main headings
h2 - was 2.8vw - now 70px - prev only used in 'FrontBox' (now for a more compact main heading size)
h3 - was 1.6vw - now 40px - old sub-headings (now used in 'FrontBox')
h4 - was 1.4vw - now 23px - new sub-headings (prev only used on background map)
p - was 1.4vw - now 20px (also body, td, th, infobox, some li)
[class*="sc-"] 17px
-----------------------------------------------------*/
/*-- TEXT SIZING -------------------------------------*/
* {box-sizing: border-box;}
body {margin: 0; font-family: 'Darker Grotesque', calibri, Tahoma, verdana, sans-serif; font-weight: 500; text-align:left;}
h1 {font-size: 75px; letter-spacing: -2.1px; line-height: 58px; margin: 4px 0 14px;}
h2 {font-size: 70px; letter-spacing: -2.0px; line-height: 58px; margin: 4px 0 14px;}
h3, .FrontBox {font-size: 40px; margin: 0;} /* PicBoxTxt */
h4, .BackBox {font-size: 23px; margin: 0;} /* sub-headlines & PicBoxReverse */
h5 {}
h6 {}
p, body, td, th, #FiveStepsList li, .InfoBox, .InfoSubBox {position:relative; font-size: 20px; margin: 0; font-weight: 500;}
/* pFont occurred in GridModel to style 'ul' as 'p' */
div[class*="sc-"], td[class*="sc-"], tr[class*="sc-"] td, tr[class*="sc-"] th {font-size: 17px; font-weight:bold;}
th {font-weight: 800;}
.subtext {font-size: 60%;}
.miniFont {font-size: 80%;}
.HeadlineBox {width: 20vw; font-size: 40px; font-weight : bold; padding:1px 10px 10px 10px;}
.HeadlineBox2 { border: 40px 0 0 0 solid; line-height: 0.9;}
.SubHeadline {font-size: 50%; font-weight: regular; z-index:20; line-height: 0.9;}
.ResponsiveImage { width: 100%; height: auto;} /*-- used in infoboxes.js --*/
.burger div {position:relative; width: 30px; height: 4px; background: white; margin: 5px 20px; display: none;}
.burger:hover li { display: inline;}
.clearfix::after {content: ""; clear: both; display: table;}
/* ======================= RESPONSIVE FONT-SIZING ======================= */
@media only screen and (max-width: 1020px) {
.HeadlineBox {width: 22vw;}
} /*-- .UK_FuelPie {width: 25vw; height: 25vw;} --*/
@media only screen and (max-width: 700px) {
h1 {font-size: 53px; letter-spacing: -2.1px; line-height: 50px; margin: 3px 0 11px;}
h2 {font-size: 45px; letter-spacing: -2.0px; line-height: 50px; margin: 3px 0 11px;}
h3, .FrontBox {font-size: 34px; margin: 0;} /* PicBoxTxt */
h4, .BackBox {font-size: 21px; margin: 0;} /* sub-headlines & PicBoxReverse */
p, body, td, th, #FiveStepsList li, .InfoBox, .InfoSubBox {position:relative; font-size: 18px; margin: 0; font-weight: 500;}
/* pFont occurred in GridModel to style 'ul' as 'p' */
div[class*="sc-"], td[class*="sc-"], tr[class*="sc-"] td, tr[class*="sc-"] th {font-size: 17px; font-weight:bold;}
}
/* ======================= HOVER DROP DOWN MENU STYLING ======================= */
.DropDownMenu {width: 100%;}
.MenuHeader {position:fixed; top: 0; width:100%; z-index:99; }
.ES_banner {position: absolute; left:0%; width: 100%; height: 55px; background: url(p_Title.gif) 0% / 250px no-repeat; }
.burger ul {height: 55px; align-items: center; display: flex; justify-content: center; margin: 0; overflow: hidden; background: #200e03;}
.MenuSpacer {position:relative ; height: 55px; }
/*--- ".dropdown" replaces "li"----*/
.dropdown a, .dropbtn {display: inline-block; text-align: center; padding: 10px 26px; text-decoration: none}
.dropdown {display: inline-block; z-index: 99; float: left;}
.dropdown-content {display: none; position: absolute; min-width: 16px; z-index: 6;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
transform: translate3D(0%, 0%, 600px)}
.dropdown-content a {display: block; text-decoration: none; text-align: left;
padding: 4px 16px; } /* Height & width of drop-down cells */
.dropdown:hover .dropbtn {max-height:1000px; }
.dropdown:hover .dropdown-content {display: block;}
/* ======================= END OF HOVER DROP DOWN MENU STYLING ======================= */
/* ===================== scroll styling - START ======================= */
.ScrollContainer { /* id for master div container */
width:100%; left:0%;
position: relative; height: 100vh; /* set to fill screen */
overflow-x: hidden; overflow-y: auto;
perspective: 300px;
perspective-origin: 100%; /* stops horizontal scrolling bug in webkit browsers */ /***CHANGED - was 50% ***/
}
.Parent {position: relative; height: 800px; transform-style: preserve-3d; pointer-events: none;}
.Tall {height: 1100px !important;}
div[class*="Content-"] {position: absolute; border-radius: 15px; pointer-events: auto;
transform-origin: 100%;} /* Stops webkit scrolling bug (but default=50%?) */
.Content-norm {transform: translate(0%, 0%); } /* x-transform ALIGNS content in scroll */
.Content-UltraFast {transform: translate3D(40vw, 0%, 158px) scale(0.48);}
.Content-Fast {transform: translate3D(23vw, 0%, 90px) scale(0.7);}
.Content-Slow {transform: translate3D(-1vw, 0%, -300px) scale(2);}
.Content-Ultraslow {transform: translate3D(-50vw, 0%, -600px) scale(3);}
div[id*="Editorial-"] {width: 70vw; padding: 20px}
.z0 {z-index: 0;}
.z1 {z-index: -1;}
.z2 {z-index: -2;}
.z3 {z-index: -3;}
.z4 {z-index: -4;}
.z5 {z-index: -5;}
.z6 {z-index: -6;}
.z7 {z-index: -7;}
.z8 {z-index: -8;}
.z9 {z-index: -9;}
.z10 {z-index: -10;}
#AfterScrollDiv {position: relative; width: 100px; height: 130vh; overflow-x: visible;}
/* ===================== scroll styling - END ======================= */
/*----------- Tooltip method - https://www.w3schools.com/howto/howto_css_tooltip.asp ------*/
.INFOBOX, .INFOsubBOX, .GRAPHBOX,
.InfoBoxWrapper, .InfoSubBoxWrapper, .GraphBoxWrapper {position: static; display:inline-block; color: #c04d00; text-shadow: 0 0 0; border-bottom: 1px dotted red; z-index:99;}
.INFOsubBOX, .InfoSubBoxWrapper {position:relative;}
.INFOBOX sup:first-child, .InfoBoxWrapper sup:first-child {font-weight: bold; }
div[id*="Editorial-"] p, div[id*="Editorial-"] table {position:relative;}
.PicText {position:relative;}
.InfoBoxWrapper .InfoBox, .InfoSubBoxWrapper .InfoSubBox, .GraphBoxWrapper .GraphBox,
.INFOBOX .InfoBox, .INFOsubBOX .InfoSubBox, .GRAPHBOX .GraphBox {
display:inline-block;
visibility: hidden;
width: 45vw; /* was 70vw */
min-width: 300px;
background:white;
padding: 1.5vw;
border: 2px solid black;
border-radius: 8px;
font-weight: 100; color: black; text-shadow: 0 0 0;
text-align: left;
position: absolute;
z-index: 99;
top: 60px;
left: 2vw;
margin-left: 0;
opacity: 0;
transition: 0.4s;
}
.INFOBOX tr.InfoBox,
.InfoBoxWrapper tr.InfoBox {border: none; padding: 0; position: absolute; background: none;} /* on hydrogen page */
.INFOBOX .InfoBox::after, .INFOsubBOX .InfoSubBox::after, .GRAPHBOX .GraphBox::after,
.InfoBoxWrapper .InfoBox::after, .InfoSubBoxWrapper .InfoSubBox::after, .GraphBoxWrapper .GraphBox::after {: "";}
.INFOBOX:hover .InfoBox, .INFOsubBOX:hover .InfoSubBox, .GRAPHBOX:hover .GraphBox,
.InfoBoxWrapper:hover .InfoBox, .InfoSubBoxWrapper:hover .InfoSubBox, .GraphBoxWrapper:hover .GraphBox {visibility: visible; opacity: 1; transition: 1.3s;}
.w35 {width: 35vw !important} /* RESPONSIVE 55 */
.w55 {width: 55vw !important} /* RESPONSIVE 90 */
.r0 {top:2vw !important;}
.r2 {top:8vw !important;}
.r3 {top:11vw !important;}
.r4 {top:13vw !important;}
.r5 {top:15vw !important;}
.r7 {top:20vw !important;}
.r8 {top:23vw !important;}
.r9 {top:26vw !important;}
.r10 {top:25vw !important;}
.r12 {top:34vw !important;}
.r15 {top:40vw !important;}
.r20 {top:50vw !important;}
.L0 {left:-1vw !important;} /* RESPONSIVE */
.L10 {left:-10vw !important;} /* RESPONSIVE */
.L15 {left:-15vw !important;} /* RESPONSIVE */
.L20 {left:-20vw !important;}
.L25 {left:-25vw !important;}
.L30 {left:-30vw !important;}
.L40 {left:-40vw !important;}
.L50 {left:-50vw !important;}
.Indent {margin-left: 1.5vw}
.BlackBox {background: black; color: white; padding:5px 10px; border-radius:10px;} /*-- in blog_hydrogen only? --*/
.GreenBox {background: #060; color: white; padding:5px 10px; border-radius:10px;} /*-- in blog_hydrogen only --*/
/*----------- End Tooltip CSS --------------------------- End Tooltip CSS ----------------*/
/*-- PHOTOBOXES, CHARTBOXES (used in Blog-FutureTech.htm - and now expanding to other pages [12may24] blog-globalGHGemissions) --*/
.PhotoBox , .ChartBox {width: 17%; float: left; position: relative; display: inline-block; margin-right:1em; margin-top:0.6em; z-index: 1;}
.PhotoBox:hover, .ChartBox:hover {z-index: 2;}
/* ======================= PIC BOXES & FLIP-BOX STYLING ========================== */
/* HOME BLOG-HOME GRIDMODEL BIG IDEA OTHER
1 NonFlip 1 3 1
2 NonFlip 3,8 5,10
flex,flip 1,6,8 4
*/
.PicHolder {position: relative; z-index: 10}
.PicFrame {position: relative; width: 100%; height: auto; background: white; border-radius: 15px; border: 1vw solid white; text-align: center;}
.PicContent {position: relative; width : 100%; height: auto; background: white; border-radius: 10px; overflow: hidden;}
.PicCredit {position: absolute; bottom: 5px; right: 5px; color: #ddd;}
.PicText {border-radius: 15px; padding: 10px}
.NonFlipTop {position: fixed; float: right; right: 0; top: 0; width: 17%;} /* background: transparent; width: 33%; height: auto; */
.NonFlipBottom {position: fixed; bottom: 0; width: 25%; } /* background: transparent; width: 33%; height: auto; */
.NonFlip {} /* background: transparent; width: 33%; height: auto; */
.FlipBox, .BoxOuter {background: transparent; width: 33%; height: auto; perspective: 1000px; }
.FlipBox:hover .Twist, .BoxOuter:hover .Twist {transform: rotateY(180deg);}
.FourBox { width: 25%;}
.Twist { transition: transform 0.8s; transform-style: preserve-3d;}
.FrontBox{height: 100%;} /*- these should be for BackBox too, but something's wrong there-*/
.BackBox {position: absolute; border-radius: 15px; padding: 10px; transform: rotateY(180deg); font-weight: bold; left: 0%; }
.FrontBox, .BackBox{ text-decoration:none; width: 100%;
-webkit-backface-visibility: hidden /* Safari */; backface-visibility: hidden;}
.BackBox:hover, .Non-flip:hover, .Hot:hover {opacity:0.7}
/* ---- "bg_" = background images for hot boxes ------ */
[class*="bg_"]{color: white; text-shadow: 2px 2px #000000; z-index:10; font-weight: bold; border-radius: 10px;
display: flex; height: 7vw; justify-content: center; align-items: center;}
.bg_grid {background:url(p_Grid.jpg) no-repeat; background-size: cover}
.bg_StCh {background:url(p_StandingCharge.jpg) no-repeat; background-size: cover}
.bg_CCS {background:url(p_CCS.jpg) no-repeat; background-size: cover}
.bg_Biomass {background:url(p_Biomass.jpg) no-repeat; background-size: cover}
.bg_Biomass2 {background:url(p_Biomass2.jpg) no-repeat; background-size: cover}
.bg_H2 {background:url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/BMW_Hydrogen_7_%2832402740931%29.jpg/320px-BMW_Hydrogen_7_%2832402740931%29.jpg) no-repeat; background-size: cover; /*-- color: #3a2715; text-shadow: 2px 2px #ffffff; --*/ }
.bg_WindMap {background:url(p_UKWindMap.jpg) no-repeat; background-size: cover}
.bg_SolarMap{background:url(p_UKSolarMap.jpg) no-repeat; background-size: cover}
.bg_UKMap {background:url(p_UKMap.gif) no-repeat; background-size: cover}
.bg_UKMap1 {background:url(p_UKMap1.gif) no-repeat; background-size: cover}
.bg_Truck {background:url(https://da4dkroembtou.cloudfront.net/wp-content/uploads/2019/05/Hesse1.png) no-repeat; background-size: cover}
.bg_Tech {color: #3a2715; text-shadow: 2px 2px #ffffff;
background:url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/DEA_2274.jpg/320px-DEA_2274.jpg) no-repeat; background-size: cover}
.HotButton {background: white; color: #3a2715; text-decoration: none; border-radius: 10px; padding: 0 15px; margin: 5px 0 0 0; display:inline-block;}
.HotButton:hover {background: #eeddcc}
/* ======================= END OF PIC BOXES & FLIP-BOX STYLING ========================== */
#spacerBox {width: 20%; }
.Indent {padding-left: 20px} /* alternative to using lists */
.FlexElmt-2sliderBox {display: flex; flex-flow: row wrap;} /*-- still contains the grid model in new table format --*/
.FlexBoxHeat {display: flex; flex-flow: row wrap;}
.FlexWrapLeft {flex: 80%;}
.FlexWrapright {flex: 20%;}
#dashHeat,#dashTransp {width: 50%; padding: 3px 3px 1vw 3px; border: solid black 1px; border-radius: 5px;}
.WindTurb {position:absolute; top:-77px; left:-73px; }
.Fast {animation: SpinTurb 1.2s infinite; animation-timing-function: linear;}
.Slow {animation: SpinTurb 20s infinite; animation-timing-function: linear;}
/*--- @keyframes SpinTurb from BlogHome-MapIcons.css ----*/
.UK_FuelPie {width:300px; height:300px; background: url(p_UK_fuel_pie.gif); background-size:cover; border-radius:50%; display:inline-block; }
.UK_FuelPie2 {width:17vw; height:17vw; background: url(p_UK_fuel_pie.gif); background-size:cover; border-radius:50%; display:inline-block; }
/* .UK_FuelPie:hover { background: url(p_UK_fuel_pie2.gif);background-size:cover; } */
.UK_FuelPieX {width: 100%; height: 100%; background: url(p_UK_fuel_pie2.gif);background-size:cover; animation: FuelPieChange 3s infinite; animation-timing-function: linear; display:inline-block; }
/* background shorthand syntax: colour image(file) repeat [[attachment: fixed/abs/rel]/img size] position ; */
@keyframes FuelPieChange {
0% {opacity:1;}
10% {opacity:0;}
40% {opacity:0;}
80% {opacity:1;}
100% {opacity:1;}
}
.icon_wind {width: 45px; height: 60px;} /* background:url(ES_icons/Wind.gif") no-repeat; background-size: cover; */
.icon_sun {width: 60px; height: 60px;} /* background:url(ES_icons/Icon-Sun.gif" alt="Solar") no-repeat; background-size: cover;*/
.icon_nuc {width: 65px; height: 60px;} /* background:url(ES_icons/Icon-Nuclear.gif" alt="Nuclear") no-repeat; background-size: cover; */
/* ===================== RANGE SLIDERS - START ======================= */
input{accent-color: #f5b543; width: 8vw} /*--- for grid model sliders (not working?)---*/
.slidecontainer {position: relative; width: 10vw; height:4vw;} /*--- only 3 sliders in GridModelNEW (B3 heating controls & hidden data table)---*/
.slidecontainer label {position: absolute; bottom:0px; }
.slidecontainer div {position: absolute; bottom: 10px; width: 100%; text-align: center;}
.slidecontainer input {position: relative; z-index:1 }
.sliderTxt {width:6vw; font-weight: bold;} /*--- deleted from GridModelNEW ---*/
.SwitchContainer {display:flex; flex-direction: row;}
div[class*="sc-"] {display: flex; margin: 0; font-weight:bold;}
/* div[class*="sc-"] div:first-child {position:relative; width:8vw;} */
.sc-BIG {position: relative; display: flex; align-items: center;} /*--- for new page format with big sliders */
.sc-SOLAR {color: orange; text-shadow: 1px 0px #000000;}
.sc-WIND input, .sc-WIND label {color: #0055cc; accent-color: #0055cc;} /*--- see new colours in home-NEW ---*/
.sc-NUCLEAR input, .sc-NUCLEAR {color:#cc2200; }
.sc-HP {}
.sc-INSU {}
.UnderLine {text-decoration: underline;} /* for headings in GridModel */
.CapctyWidth {width:100px} /* for 'capacity' heading in GridModel */
/* ===================== TOGGLE SWITCHES - START ======================= */
/*- TOGGLE SWITCHES -----*/
.switch {position: relative;display: inline-block;width: 30px;height: 17px;top:-0px}
.switch input {opacity: 0; width: 0; height: 0;}
.ToggleSlider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: pointer;transition: .4s;
background: #ccc;} /*- main colour (un-checked) -*/
.ToggleSlider:before {
position: absolute;
content: "";
height: 13px;
width: 14px;
left: 2px;
bottom: 2px;
background: white;
transition: .4s;
}
input:checked + .ToggleSlider {background: #B55A30;} /*- main colour (checked) -*/
input:checked + .ToggleSlider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
/*---- "YES/NO" labels source:https://stackoverflow.com/questions/39846282/how-to-add-the-text-on-and-off-to-toggle-button ----*/
.ToggleSlider:after {content:'NO'; display: block; position: absolute; top: 50%; left: 70%; font-size: 8px; transform: translate(-50%,-50%);
color: white;} /*- text color-*/
input:checked + .ToggleSlider:after {content:'YES'; left: 30%;}
.ToggleSlider.round {border-radius: 17px;}
.ToggleSlider.round:before {border-radius: 50%;}
/* ===================== TOGGLE SWITCHES - END ======================= */
/*----============================------*/
/*---- ==== DATE ZOOM SLIDERS ===------*/
/*----============================------*/
.range_container {display: flex; flex-direction: column; width: 97%;}
.ZoomSlidercontrol {position: relative; top: -3vh; left: 3%; height: 0px; overflow: visible;}
.ZoomSlidercontrol input[type=range]::-webkit-slider-thumb { /*-- slider knob (except Mozilla) --*/
-webkit-appearance: none;
pointer-events: all;
z-index: 49;
position: relative;
top: 12px;
width: 2px;
height: 25px;
background: #000030; /*-- #6a472f; ---*/ /*-- slider knob fill--*/
border-radius: 5%;
box-shadow: 0 0 0 1px #000030; /*-- #6a472f; ---*/ /*-- slider knob outline--*/
cursor: pointer;
}
.ZoomSlidercontrol input[type=range]::-moz-range-thumb { /*-- slider knob (Mozilla only) --*/
-webkit-appearance: none;
pointer-events: all;
z-index: 49;
position: relative;
top: 12px;
width: 2px;
height: 25px;
background: #000030; /*-- #6a472f; ---*/ /*-- slider knob fill--*/
border-radius: 5%;
box-shadow: 0 0 0 1px #000030; /*-- #6a472f; ---*/ /*-- slider knob outline--*/
cursor: pointer;
}
.ZoomSlidercontrol input[type=range]::-webkit-slider-thumb:hover {
background: #000; /*-- slider knob fill (hover) --*/
box-shadow: 0 0 4px #6a472f, 0 0 10px #000030; /*-- #6a472f; ---*/
-webkit-box-shadow: 0 0 4px #0d7416 /*-- slider knob outline (hover) --*/ , 0 0 10px #000030; /*-- #6a472f; ---*/
}
.ZoomSlidercontrol input[type=range] { /*-- slider baselines --*/
-webkit-appearance: none;
appearance: none;
height: 1px;
width: 100%;
position: absolute;
background: #000030; /*-- #6a472f; ---*/
}
#ZoomSliderInfo { /*-- start date --*/
position: relative;
left: 10px;
font-size: 1rem;
color: #000030; /*-- #6a472f; ---*/
}
#ZoomSliderInfo1 { /*-- end date --*/
position: relative;
left: 10%;
font-size: 1rem;
color:black;
}
/*----================================------*/
/*---- ==== END DATE ZOOM SLIDERS ===------*/
/*----================================------*/
/*------ From B_Style.css -----------*/
#TextArea {position: relative; width: 55%; margin: 8rem; float: right; z-index:2; }
#TextAreaB {position: absolute; width: 45%; margin: 8vw; left: -40vw; top: -140px; }
.SidebarL {position: absolute; width: 25vw; left: -34vw; top:0vw;}
.SidebarR {position: absolute; width: 25vw; left: 64vw; top:0vw;}
.SidebarTxt {border-radius: 15px; padding: 10px;}
div[id*="Editorial-B"] {position: relative; width: 55%; margin: 10vw 10vw 0 0; float: right; border-radius: 15px; }
#Editorial-B2 , #Editorial-B4, #Editorial-B6, #Editorial-B8 {margin: 10vw 0 0 10vw; float: left;}
/*------ End of from B_Style.css -----------*/
.red {border: 3px dashed rgba(255,0 , 0, 1 ); background-color: rgba(255,0 , 0 ,0.1 ); }
.orange {border: 3px dotted rgba(255, 120 , 0, 1 ); background-color: rgba(255,120, 0 ,0.1 ); }
.yellow {border: 3px dotted rgba(255, 255 , 120, 1 );background-color: rgba(255,255, 120,0.1 ); }
.green {border: 3px dashed rgba(0, 255, 120 , 1 ); background-color: rgba(0 ,255, 120,0.1 ); }
.blue {border: 3px dashed rgba(0, 0, 255, 1 ); background-color: rgba(0 ,0 , 255,0.1 ); }
.indigo {border: 3px dashed rgba(200,0 , 255, 1 ); background-color: rgba(200,0 , 255,0.1 ); }
.redBG { background-color: rgba(255,0 , 0 ,0.5 ); }
.orangeBG {background-color: rgba(255,120, 0 ,0.5 ); }
.yellowBG {background-color: rgba(255,255, 120,0.5 ); }
.greenBG { background-color: rgba(0 ,255, 120,0.5 ); }
.blueBG { background-color: rgba(0 ,0 , 255,0.5 ); }
.indigoBG {background-color: rgba(200,0 , 255,0.5 ); }
@media only screen and (max-width: 1020px) {
}
@media only screen and (max-width: 930px) {
.HeadlineBox {width: 26vw; font-size: 3vw;}
.icon_wind {width: 30px; height: 40px;}
.icon_sun {width: 40px; height: 40px;}
.icon_nuc {width: 40px; height: 40px;}
.InfoBoxWrapper .InfoBox, .InfoSubBoxWrapper .InfoSubBox, /*-- .GraphBoxWrapper .GraphBox, --*/
.INFOBOX .InfoBox, .INFOsubBOX .InfoSubBox /*--, .GRAPHBOX .GraphBox --*/
{width: 60vw !important} /* from 45 */
.w35 {width: 55vw !important} /* from 35 */
.w55 {width: 80vw !important} /* from 55 */
}
@media only screen and (max-width: 865px) {
.SwitchContainer {flex-direction: column;}
}
@media only screen and (max-width: 700px) {
.HeadlineBox {width: 65vw;}
.sliderTxt {width:11vw;}
.burger div {display:block; right: 0%}
.burger li {display:none;}
.burger a, .burger span {font-size:3vw; font-weight: bold;}
/* re-implemented from top: */
.w35 {width: 80vw !important} /* from 35 */
.w55 {width: 90vw !important} /* from 55 */
.L15 {left:0 !important;}
.L10 {left:0 !important;}
.L25 {left:-30vw !important;}
.L40 {left:-65vw !important;}
.SidebarL, .SidebarR {position:static; left: 0; width: 100%; border: 1px double black; border-radius: 12px; }
.SidebarPic {width: 60%; margin: 0 2% ;}
.SidebarTxt {margin: auto;}
div[id*="Editorial-B"], #Editorial-B2, #Editorial-B4, #Editorial-B6, #Editorial-B8 {width: 98%; padding:10px; margin: 560px 0 0 0;}
}
@media only screen and (max-width: 400px) {
div[id*="Editorial-"] {padding: 8px}
.PicText {border-radius: 5px; padding: 5px}
}
/*-----------------------------------------------------------------------------------------------------------
----------------------- CUT AND PASTE PARTS ---------------------------------------------------------------
£ = £
Hyperlink =
TEXTHERE
INFOBOX =
TEXTHERE
HEADING
,
--- PHOTOBOXES (used in Blog-FutureTech.htm) --------
Creates a holder for small photo (17%, left, inline) with enlarged version on hover:
CSS: .PhotoBox {width: 17%; float: left; position: relative; display: inline-block; margin-right:1em; margin-top:0.6em; z-index: 1;}
CSS: .PhotoBox:hover {z-index: 2;}
TITLE
DESCRIPTION
Photo: WikiMedia/
CREDIT
-----------------------------------------------------------------------------------------------------------*/