MediaWiki:Common.css: Difference between revisions

From Tygron Support wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(148 intermediate revisions by 3 users not shown)
Line 1: Line 1:
/*Editing the common styling requires specific administrator rights*/
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto:300');
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */
:root{
:root{
Line 7: Line 11:


}
}
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto:300');


/** TABLE CLASSES **/
/** TABLE CLASSES **/
Line 43: Line 45:


/* this is a hack to add borders to IE8- */
/* this is a hack to add borders to IE8- */
.table > thead, .table > tbody { border:0 solid #aaa\0/ }
.table > thead, .table > tbody { border:0 solid #aaa }


.table tr {
.table tr {
   border:1px solid #aaa\0/;
   border:1px solid #aaa;
   text-align:left;
   text-align:left;
   border-color:#AAA;
   border-color:#AAA;
Line 165: Line 167:


/*Main page*/
/*Main page*/
/**MAIN PAGE STYLESHEET**/
/**MAIN PAGE NEW STYLESHEET**/
 
.mainpage-cell-wrapper{
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:flex;
flex-wrap:wrap;
justify-content:center;
max-width:96em;
margin:0 auto;
padding-right:0em
}
 
.mainpage-banner{
text-align: left;
margin:0em 0em 1em 0em;
padding:0em;
width:85em;
border:1px solid white;
box-sizing:border-box;
}
 
.mainpage-banner p{
    font-family: sans-serif;
    font-size: 1.0em;   
}
 
.mainpage-cell{
text-align: left;
margin:0em 0em 0em 0.5em;
padding:0em;
width:25em;
border:1px solid white;
box-sizing:border-box;
}
 
.mainpage-cell h2 {
    padding: 0.5em;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 1.1em;
    margin-top:0em;
}
 
.mainpage-cell dl{
    padding-left:0.5em;
}
 
.mainpage-cell h2 {
background-color:#4fb9cf;
}
 
.preview .mainpage-cell h2 {
background-color: #f7bb4a;
}
 
 
 
/**MAIN PAGE OLD STYLESHEET**/


table#mainpagenavigation {
table#mainpagenavigation {
Line 222: Line 284:
}
}


#mainpagenavigation td.content {vertical-align:top;padding:.5em 1.5em;}
#mainpagenavigation td.content {vertical-align:top;padding:.5em 1.5em;position:relative;}
#mainpagenavigation td.separator {border-right:#aaa solid 1px}
#mainpagenavigation td.separator {border-right:#aaa solid 1px}


Line 242: Line 304:
#toc { float: right; margin: 20px; }
#toc { float: right; margin: 20px; }
.toctoggle { float: right; }
.toctoggle { float: right; }
.suppress-toc #toc {
    display: none;
}


/*Header tweaks*/
/*Header tweaks*/
Line 248: Line 314:
}
}
@media print {
@media print {
    img {
        page-break-before: avoid;
    }
    body {
        background: #fff;
        color: #000;
        margin: 0;
        padding: 0;
    }
    body, p {
        font-family: Arial, sans-serif;
    }
    .toc a {
        text-decoration: inherit !important;
        border-bottom: none !important;
    }
     .mw-body-content h3 {
     .mw-body-content h3 {
         border-bottom: none;
         border-bottom: none;
    }
    .firstHeading, h1, h2 {
        border-bottom: none !important;
     }
     }
}
}
Line 383: Line 468:
border-color:#808080;
border-color:#808080;
background-color:#e4e4ee;
background-color:#e4e4ee;
padding-right:40px;
/*padding-right:40px;*/
margin-left:40px;
margin-right:40px;
vertical-align:top;
vertical-align:top;
margin-bottom:10px;
margin-bottom:10px;
}
}


.editor_steps_box .editor_steps_header{
display:flex;
flex-direction: row;
margin: 10px;
border-bottom: 2px solid #808080;
}
.editor_steps_box .editor_steps_title{
.editor_steps_box .editor_steps_title{
  margin-left:20px;
flex-basis:1px;
flex-grow:100;
  margin: 0px 20px;
}
 
.editor_steps_box .video_text {
font-weight: bold;
}
 
.editor_steps_box .editor_steps_content{
padding-right:40px;
}
}


.editor_steps_box_wrapper{
.editor_steps_box_wrapper{
Line 399: Line 501:
.editor_steps_box_wrapper .editor_steps_box{
.editor_steps_box_wrapper .editor_steps_box{
margin:0;
margin:0;
max-width:50%;
max-width:60%;
}
}


Line 407: Line 509:


.editor_steps_box_wrapper .editor_steps_image > div {
.editor_steps_box_wrapper .editor_steps_image > div {
max-width:40%;
max-width:35%;
display:inline-block;
display:inline-block;
margin:0;
margin:0;
Line 559: Line 661:
     }
     }
     #footer-info {
     #footer-info {
        display:none;
    }
    body .matomo-cookies-banner-container {
         display:none;
         display:none;
     }
     }
Line 645: Line 750:
div.nav .heading::after {
div.nav .heading::after {
   bottom:-3px;
   bottom:-3px;
}
div.nav .heading > * {
  display: inline-block;
  margin-top: 0px;
  vertical-align: middle;
}
div.nav .heading > *:not(:first-child) {
  margin-left: 0.3em;
}
div.nav .heading .module-button {
  width: unset;
  height: unset;
}
div.nav .heading .module-button .module-button-text {
  display: none;
}
div.nav .heading .module-button img {
  width: 30px;
  height: 30px;
}
}


Line 664: Line 789:
   padding:2px 8px 2px 0px;
   padding:2px 8px 2px 0px;
   width:25%;
   width:25%;
  box-sizing: border-box
}
}


Line 672: Line 798:
   margin:0;
   margin:0;
   padding:2px 0px 2px 8px;
   padding:2px 0px 2px 8px;
   width:67%;
   width:74%;
  box-sizing: border-box
}
}


Line 709: Line 836:
/* Nav Items */
/* Nav Items */
div.nav.items .heading { background-color:var(--fx-color-interface); }
div.nav.items .heading { background-color:var(--fx-color-interface); }
div.nav.items.wide .currentheading { background-color:rgba(103, 145, 94,1); }
div.nav.items .heatheading { background-color:#EC6050; }
div.nav.items .heatheading { background-color:#EC6050; }
div.nav.items.wide .currentheading { background-color:rgba(103, 145, 94,1); }
div.nav.items .aeriusheading { background-color:rgb(253, 231, 106); }
   
div.nav.items .subsidenceheading { background-color:rgb(137, 105, 66); }
div.nav.items .trafficheading {  background-color:rgb(137, 137, 137); }
 
 
div.nav.items dd,
div.nav.items dd,
div.nav.items dt,
div.nav.items dt,
Line 741: Line 872:
.table.overlay > tbody > tr.heading > * {
.table.overlay > tbody > tr.heading > * {
   background-color:var(--fx-color-interface) !important;
   background-color:var(--fx-color-interface) !important;
}
}
.table.overlay > tbody > tr > th,
.table.overlay > tbody > tr > th,
Line 751: Line 883:
.table > tbody > tr.overlay:nth-child(odd) {
.table > tbody > tr.overlay:nth-child(odd) {
   background-color:var(--fx-color-interface-row-odd);
   background-color:var(--fx-color-interface-row-odd);
}
.table.overlay th,
.table.overlay td {
  padding-right: 3em;
  text-align: left;
}
.icon-cell {
  padding-right: unset;
  width: 50px;
  text-align: center;
}
}


/*Buttons (old style)*/
div.module-button{
div.module-button{
   border:0px solid #AAA;
   border:0px solid #AAA;
Line 758: Line 901:
   border-radius:4px;
   border-radius:4px;
   font-size:1.5em;
   font-size:1.5em;
   height:7em;
   height:8em;
   width:8em;
   width:8em;
   position:relative;
   position:relative;
Line 766: Line 909:
div.module-button .module-button-text{
div.module-button .module-button-text{
   position: absolute;  
   position: absolute;  
   top: 8em;
   top: 110px;
   text-align: center;
   text-align: center;
   width: 100%;
   width: 100%;
Line 781: Line 924:
   position:relative;
   position:relative;
   margin:auto;
   margin:auto;
}
/*Buttons (new style)*/
div.nav-button-container {
  height: 10.5em;
  margin-top: 5px;
}
div.nav-button-container > div.nav-button {
  margin: 5px 0.375em;
}
div.nav-button {
  flex-direction: column;
  position: relative;
  align-items: center;
  display: inline-flex;
 
  overflow: hidden;
  cursor: pointer;
  width:7.5em;
  height:100%;
  min-height:9em;
  border-radius: 1em;
  box-sizing: border-box;
  background-color: lightgrey;
}
div.nav-button > * {
  z-index: 100;
}
div.nav-button > a {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index:200;
  text-decoration: none;
}
div.nav-button .nav-button-text {
  text-align: center;
  font-size: 0.9375em;
  font-family: 'Roboto Slab', serif;
  flex-grow: 1;
  flex-basis: 1px;
  width: 100%;
  height: 1em;
  z-index: 150;
  /*background-color: rgb(255,255,255,0.5);*/
  border-radius: 1em;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
div.nav-button-img {
  text-align: center;
  margin-top: 0.5em;
}
div.nav-button-highlight {
  position:absolute;
  height:100%;
  width: 100%;
}
/*Button highlighting*/
div.nav-button:hover div.nav-button-highlight {
  background-color: rgb(0, 0, 0, 0.1);
}
div.nav-button:hover .nav-button-text {
  color: white;
}
/*Button link via image to allow self-link*/
div.nav-button > .center {
  position: absolute;
  width:    100%;
  height:  100%;
  opacity:  0;
  z-index:  300;
  text-align: unset;
}
div.nav-button > .center a {
  position: absolute;
  height:  100%;
  width:    100%;
  display:  block;
}
div.nav-button > .center a img{
  display:  none;
}
/*Buttons in nav*/
div.nav .heading .nav-button-container {
  height:unset;
}
div.nav .heading .nav-button {
  background-color: unset !important;
  display: inline-block;
  height: unset;
  width: unset;
  min-height: unset;
  min-width: unset;
  margin: unset;
  padding: unset;
}
div.nav .heading div.nav-button:hover div.nav-button-highlight {
  background-color: unset;
}
div.nav .heading .nav-button-img {
  margin-bottom: unset;
}
div.nav .heading .nav-button img {
  width: 30px;
  height: 30px;
}
div.nav .heading .nav-button-text {
  display: none;
}
}


Line 836: Line 1,107:


div.list-filterer .list-filterer-button {
div.list-filterer .list-filterer-button {
     background-image: url(/w/skins/Vector/images/search-ltr.png?39f97);
     background-image: url(/w/skins/Vector/resources/common/images/search.svg);
     background-position: center center;
     background-position: center center;
     background-repeat: no-repeat;
     background-repeat: no-repeat;
Line 860: Line 1,131:
.mw-prefixindex-body li a{
.mw-prefixindex-body li a{
     display: inline-block;
     display: inline-block;
}
/*Hiding elements from guest users*/
.userhidden {
display: none;
}
.gallerycaptionalign-center .gallerytext {
    text-align: center;
}
.mw-content-ltr ul.gallery {
    margin-left: 0px;
}
/*Hatnote*/
.hatnote {
    font-style: italic;
    padding-left: 1.6em;
}
/*Styling rules results*/
.editRulesResults {
    border: 1px solid red;
    margin-bottom: 1em;
    padding: 0.5em;
}
.editRulesResult {
    margin-bottom: 1em;
}
.editRulesResultHeader {
    font-weight: bold;
}
.editRulesResultEntry {
    padding-left: 1em;
}
.protected-email:before {
    content: attr(data-u) "\0040" attr(data-d);
}
.protected-email-scrape {
    display:none;
}
.visible-for-tygron-only {
    display:none;
}
.fullwidth .image img{
  width: 100%;
  height:auto;
}
}

Latest revision as of 15:01, 18 October 2024

/*Editing the common styling requires specific administrator rights*/

@import url('https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto:300');

/* CSS placed here will be applied to all skins */
:root{
   --fx-color-interface: rgba(79, 185, 207, 1);
   --fx-color-interface-active: rgba(94, 255, 255, 1);
   --fx-color-interface-highlight: rgba(177, 217, 217, 1);
   --fx-color-interface-row-odd: rgba(229, 248, 252, 1);

}

/** TABLE CLASSES **/
.table {
  border:0 solid;
  border-collapse:collapse;
  border-spacing:0;
  font-size:.9230769231em;
  text-align:left;
  clear:none;
  position:relative;
  display:inline-block;
  vertical-align:top;
  margin:10px 10px;
  padding:0;
}

.table::after {
  content:"";
  position:absolute;
  width:100%;
  left:0;
  height:3px;
  background-image:url("/images/4/45/Shadow_after.png");
  background-size:100% 3px;
}

.table::after {
  bottom:-3px;
}

/* make table captions bold */
.table > caption { font-weight: bold }

/* this is a hack to add borders to IE8- */
.table > thead, .table > tbody { border:0 solid #aaa }

.table tr {
  border:1px solid #aaa;
  text-align:left;
  border-color:#AAA;
}

/* and this removes them for IE9+ */
:root .table tr { border-top-width:0; border-bottom-width:0; }

.table > * > tr > :first-child { border-left:1px solid #AAA; }
.table > * > tr > :last-child { border-right:1px solid #AAA; }

.table > tbody > tr:last-child,
.table > tbody > tr:last-child > *,
.table > tfoot > tr:last-child > *,
.table > caption { border-bottom:1px solid #AAA; }

.table > tbody:first-child > tr:first-child > *,
.table > tbody > tr.heading > *,
.table > thead > tr:first-child > * {
  background-image:url("/images/c/cc/Infobox_header_overlay.png");
  background-color:#EEE;
  border-color:#AAA;
  padding:.5em;
}

.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th {
  line-height:1.667em;
  padding:.25em .5em;
}

.table tr > th, .table[class*=center] tr { text-align:center; }
.table[class*=left] tr { text-align:left; }
.table[class*=right] tr { text-align:right; }
.table[class*=middle] tr { vertical-align:middle; }
.table[class*=top] tr { vertical-align:top; }
.table[class*=bottom] tr { vertical-align:bottom; }

.table > :first-child > tr:first-child,
.table > tbody > tr.heading {
  background-color:#EEE;
  border:1px solid #aaa!important;
}

.table > tbody > tr > th, .table > tfoot > tr > th {
  background-color:#E7E7E7;
  border-color:#AAA;
}

.table > tbody > tr:nth-child(odd) {
  background-color:#F3F3F3;
  border-color:#AAA;
}

.table > tbody,
.table > tbody > tr.heading,
.table > tbody > tr > [rowspan],
.table > tbody > tr > [colspan] { border:1px solid #AAA; }

.table > :first-child > tr:first-child + tr [rowspan],
.table > :first-child > tr:first-child + tr [colspan] { border-top-width:0; }

.table .line,
.table .line-bottom {
  border-bottom-width:1px!important;
  border-bottom-style:solid;
}

.table .line-top {
  border-top-width:1px!important;
  border-top-style:solid;
  border-top-color:#AAA;
}

.table .line-left {
  border-left-width:1px!important;
  border-left-style:solid;
  border-left-color:#AAA;
}

.table .line-right {
  border-right-width:1px!important;
  border-right-style:solid;
  border-right-color:#AAA;
}

.table table {
  background-color:transparent;
  padding:0;
  margin:0;
}

dl+table.table {
  margin-top: 0;
}

/** STDT table classes **/
/* any */
.table.any > :first-child > tr:first-child,
.table.any > :first-child > tr:first-child > *,
.table.any > tbody > tr.heading,
.table.any > tbody > tr.heading > * {
  background-color:#888 !important;
  border-color:#6D6D6D !important;
}
.table.any > tbody > tr > th,
.table.any > tfoot > tr > th,
.table.any > thead > tr > th,
table.table > tbody > tr.any > th {
  background-color:#CCC;
  border-color:#AAA;
}
.table.any > tbody > tr:nth-child(odd),
.table > tbody > tr.any:nth-child(odd) {
  background-color:#EEE;
}

/*Main page*/
/**MAIN PAGE NEW STYLESHEET**/

.mainpage-cell-wrapper{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	max-width:96em;
	margin:0 auto;
	padding-right:0em
}

.mainpage-banner{
	text-align: left;
	margin:0em 0em 1em 0em;
	padding:0em;
	width:85em;
	border:1px solid white;
	box-sizing:border-box;
}

.mainpage-banner p{
    font-family: sans-serif;
    font-size: 1.0em;    
}

.mainpage-cell{
	text-align: left;
	margin:0em 0em 0em 0.5em;
	padding:0em;
	width:25em;
	border:1px solid white;
	box-sizing:border-box;
}

.mainpage-cell h2 {
    padding: 0.5em;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 1.1em;
    margin-top:0em;
}

.mainpage-cell dl{
    padding-left:0.5em;
}

.mainpage-cell h2 {
	background-color:#4fb9cf;	
}

.preview .mainpage-cell h2 {
	background-color: #f7bb4a;
}



/**MAIN PAGE OLD STYLESHEET**/

table#mainpagenavigation {
	/*border: 1px solid #000000;*/
	box-shadow:rgba(0,0,0,0.25) 0 0 0.75em;
}

.page-Main_Page h1.firstHeading#firstHeading {
display:none;
}

#mainpagenavigation {
display:block;
border-collapse:collapse;
text-align:left
}

#mainpagenavigation th {
/*font-size:1.7692307692em;*/
font-size:20px;
color:#fff;
/*text-shadow:rgba(0,0,0,0.75) 0 0 .25em;*/
background-color:#4fb9cf;
font-weight:400;
height:48px;
text-align:center;
font-size-adjust:0.43
}

#mainpagenavigation th.header_sub {
height:24px;
}

#mainpagenavigation th h3{
font-size:25px;
padding-top:0px;
color:#fff;

background-color:#444;
font-weight:400;
height:48px;
text-align:center;
font-size-adjust:0.43
}

#mainpagenavigation td {
background-color:#fff;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffffffff);
background-image: linear-gradient(top, #bbb 0%, #fff 2%, #fff 100%);
background-image: -o-linear-gradient(top, #bbb 0%, #fff 2%, #fff 100%);
background-image: -moz-linear-gradient(top, #bbb 0%, #fff 2%, #fff 100%);
background-image: -webkit-linear-gradient(top, #bbb 0%, #fff 2%, #fff 100%);
background-image: -ms-linear-gradient(top, #bbb 0%, #fff 2%, #fff 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bbb), color-stop(.02, #fff), color-stop(1, #fff));
/*height:250px;*/
}

#mainpagenavigation td.content {vertical-align:top;padding:.5em 1.5em;position:relative;}
#mainpagenavigation td.separator {border-right:#aaa solid 1px}

/*Editing tags on the main page*/
#mainpagenavigation h5{
position:absolute;
margin-left:180px;
}
/*Main page (padding, not used)*/
/* body.page-Main_Page.ns-subject #content,body.page-Main_Page_editcopy.ns-subject #content {padding-left:1em;padding-right:1em}*/


/*Preview Main Page*/
.preview #mainpagenavigation th {
background-color: #f7bb4a;
}

/*Float the table of contents right*/
#toc { float: right; margin: 20px; }
.toctoggle { float: right; }

.suppress-toc #toc {
    display: none;
}

/*Header tweaks*/
.mw-body-content h3 {
    border-bottom: 1px solid #a2a9b1b0;
}
@media print {
    img {
        page-break-before: avoid;
    }
    body {
        background: #fff;
        color: #000;
        margin: 0;
        padding: 0;
    }
    body, p {
        font-family: Arial, sans-serif;
    }
    .toc a {
        text-decoration: inherit !important;
        border-bottom: none !important;
    }
    .mw-body-content h3 {
        border-bottom: none;
    }
    .firstHeading, h1, h2 {
        border-bottom: none !important;
    }
}

.mw-body-content h4 {
 font-size: 1.1em;
}

/* Style for horizontal lists (separator following item).
   IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].
   @source mediawiki.org/wiki/Snippets/Horizontal_lists
   @revision 6 (2014-05-09)
   @author [[User:Edokter]]
 */
.hlist dl,
.hlist ol,
.hlist ul {
    margin: 0;
    padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
    margin: 0;
    display: inline;
}
/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
    display: inline;
}
/* Generate interpuncts */
.hlist dt:after {
    content: ": ";
}
.hlist dd:after,
.hlist li:after {
    content: " · ";
    font-weight: bold;
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
    content: none;
}
/* For IE8 */
.hlist dd.hlist-last-child:after,
.hlist dt.hlist-last-child:after,
.hlist li.hlist-last-child:after {
    content: none;
}
/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
    content: " (";
    font-weight: normal;
}
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
    content: ") ";
    font-weight: normal;
}
/* For IE8 */
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {
    content: ") ";
    font-weight: normal;
}
/* Put ordinals in front of ordered list items */
.hlist ol {
    counter-reset: listitem;
}
.hlist ol > li {
    counter-increment: listitem;
}
.hlist ol > li:before {
    content: " " counter(listitem) " ";
    white-space: nowrap;
}
.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
    content: " (" counter(listitem) " ";
}

/*Don't float the horizontal list by default*/
#toc.toc.hlist {
float:none;
}

/*learned things header*/
.learned_heading {
/*background-color:#d0eed0;*/
background-color:#c9f9ff;
background-color:#c9f9ffaa;
padding: 1px 1px 10px 12px;
}

/*General step box to indicate a location*/
.location_steps_box {
margin: 15px 0px;
margin-left: 1.6em;
}
.location_steps_box.basic .entry{
font-style: italic;
}
.location_steps_box.basic .entry i{
font-style: normal;
}

/*boxes with steps in the editor*/
.editor_location_box {
margin: 15px 0px;
}
.location_steps_box.editor_location_box {
margin-left: 1.6em;
}



.editor_steps_box {
display:inline-block;
border-style:dashed;
border-color:#808080;
background-color:#e4e4ee;
/*padding-right:40px;*/
margin-right:40px;
vertical-align:top;
margin-bottom:10px;
}

.editor_steps_box .editor_steps_header{
 display:flex;
 flex-direction: row;
 margin: 10px;
 border-bottom: 2px solid #808080;
}
.editor_steps_box .editor_steps_title{
 flex-basis:1px;
 flex-grow:100;
 margin: 0px 20px;
}

.editor_steps_box .video_text {
 font-weight: bold;
}

.editor_steps_box .editor_steps_content{
padding-right:40px;
}


.editor_steps_box_wrapper{
margin-left:40px;
}

.editor_steps_box_wrapper .editor_steps_box{
margin:0;
max-width:60%;
}

.editor_steps_box_wrapper .editor_steps_image {
display:inline;
}

.editor_steps_box_wrapper .editor_steps_image > div {
max-width:35%;
display:inline-block;
margin:0;
float:right;
clear:both;
}

/*Workaround because of applied width to style*/
.editor_steps_box_wrapper .editor_steps_image > div > div {
width:auto !important;
}

.editor_steps_box_wrapper .editor_steps_image img{
max-width:100%;
height:auto;
}

/*Support namespace styling*/
.ns-4500 #content, .ns-501 #content { background-color: #f3f3f3; }
.ns-4500 div.thumb, .ns-501 div.thumb { border-color: #f3f3f3; }

/*Infobox styling*/
/* Infobox template style */
.infobox {
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    color: black;
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em;
    float: right;
    clear: right;
}
.infobox td,
.infobox th {
    vertical-align: top;
}
.infobox caption {
    font-size: larger;
}
.infobox.bordered {
    border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
    border: 1px solid #aaa;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
    border: 0;
}

.infobox.sisterproject {
    width: 20em;
    font-size: 90%;
}

.infobox.standard-talk {
    border: 1px solid #c0c090;
    background-color: #f8eaba;
}
.infobox.standard-talk.bordered td,
.infobox.standard-talk.bordered th {
    border: 1px solid #c0c090;
}

/* styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
    border: 0;
    border-top: 1px solid #aaa;
    border-right: 1px solid #aaa;
}

.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
    border: 0;
    border-right: 1px solid #aaa;
}

/* Styles for geography infoboxes, eg countries,
   country subdivisions, cities, etc.            */
.infobox.geography {
    text-align: left;
    border-collapse: collapse;
    line-height: 1.2em; 
    font-size: 90%;
}

.infobox.geography  td,
.infobox.geography  th {
    border-top: solid 1px #aaa;
    padding: 0.4em 0.6em 0.4em 0.6em;
}
.infobox.geography .mergedtoprow td,
.infobox.geography .mergedtoprow th {
    border-top: solid 1px #aaa;
    padding: 0.4em 0.6em 0.2em 0.6em;
}

.infobox.geography .mergedrow td,
.infobox.geography .mergedrow th {
    border: 0;
    padding: 0 0.6em 0.2em 0.6em;
}

.infobox.geography .mergedbottomrow td,
.infobox.geography .mergedbottomrow th {
    border-top: 0;
    border-bottom: solid 1px #aaa;
    padding: 0 0.6em 0.4em 0.6em;
}

.infobox.geography .maptable td,
.infobox.geography .maptable th {
    border: 0;
    padding: 0;
}

/* Code styling */
code{
    color:black;
    background-color:#f9f9f9;
    border:1px solid #ddd;
    border-radius:2px;
    padding:1px 4px
}

/*Infobox basic styling*/
.tygron-abox {
    width: 60%;
    margin: auto;

    background-color: #dddddd;
    border: 2px solid #bbbbbb;
    padding: 10px;
}

/*Page breaks*/
.pageBreakBlock {
    display:none;
}
@media print {
    .pageBreak {
        page-break-after: always;
    }
    .pageBreakBlock {
        display:block;
    }
    .printfooter {
        display:none;
    }
    #footer-info {
        display:none;
    }
    body .matomo-cookies-banner-container {
        display:none;
    }
}

/*Suppress selflinks*/
.noselflink a.mw-selflink.selflink {
    font-weight: normal;
}

/*Collapsible lists*/
.collapsible_list_container {
  display: flex;
  flex-direction: row;
}
.collapsible_list {
  flex-basis: 1px;
  flex-grow: 1
}
@media (max-width: 800px) {
  .collapsible_list_container {
    flex-direction: column;
  }
}

/* Navigation Boxes*/
div.nav {
  position:relative;
}

div.nav .box {
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffeeeeee);
  background-image:linear-gradient(top, #fff 0%, #eee 100%);
  background-image:-o-linear-gradient(top, #fff 0%, #eee 100%);
  background-image:-moz-linear-gradient(top, #fff 0%, #eee 100%);
  background-image:-webkit-linear-gradient(top, #fff 0%, #eee 100%);
  background-image:-ms-linear-gradient(top, #fff 0%, #eee 100%);
  background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #eee));
  border:1px solid #AAA;
  border-spacing:0;
  font-size:.9230769231em;
  min-height:60px;
  position:relative;
  margin:auto;
}

div.nav           .box { width:42em; }
div.nav.thin      .box { width:34em; }
div.nav.wide      .box { width:50em; }
div.nav.verywide  .box { width:unset; max-width:60em; }
div.nav.full      .box { width:unset; }

div.nav .heading {
  background-color:#888;
  background-image:url("/images/c/cc/Infobox_header_overlay.png") !important;
  border:1px solid rgba(0,0,0,0.25);
  border-bottom-width:0px;
  font-family:Arial, sans-serif!important;
  font-size:1.083em;
  font-size-adjust:.52;
  font-weight:700;
  line-height:100%;
  text-align:center;
  margin:-1px -1px 0px;
  padding:.769em 0;
  position:relative;
  z-index:1;
}

div.nav .clear {
  height:0.667em;
}

div.nav .box::after,
div.nav .heading::after {
  content:"";
  position:absolute;
  width:100%;
  left:0;
  height:3px;
  background-image:url("/images/5/5d/Boxshadow.png");
  background-size:100% 3px;
}

div.nav .box::after,
div.nav .heading::after {
  bottom:-3px;
}

div.nav .heading > * {
  display: inline-block;
  margin-top: 0px;
  vertical-align: middle;
}
div.nav .heading > *:not(:first-child) {
  margin-left: 0.3em;
}
div.nav .heading .module-button {
  width: unset;
  height: unset;
}
div.nav .heading .module-button .module-button-text {
  display: none;
}
div.nav .heading .module-button img {
  width: 30px;
  height: 30px;
}

div.nav .wrapper {
  padding: 0px 8px;
}

div.nav dl,
div.nav .wrapper.hlist > ul {
  margin:0.667em 0em;
}

div.nav dt {
  float:left;
  text-align:right;
  clear:left;
  border-right:2px solid #999;
  margin:0 -2px 0 0;
  padding:2px 8px 2px 0px;
  width:25%;
  box-sizing: border-box
}

div.nav dd {
  float:left;
  text-align:left;
  border-left:2px solid #888;
  margin:0;
  padding:2px 0px 2px 8px;
  width:74%;
  box-sizing: border-box
}

div.nav dt, div.nav dd {
  line-height:1.667em;
}

div.nav table {
  line-height:1.667em;
  background-color:transparent;
  border-collapse:collapse;
  width:100%;
  margin:0.667em 0;
}

div.nav table th {
  text-align:right;
  border-right:2px solid #888;
  vertical-align:top;
  padding:2px 8px;
}

div.nav table td {
  padding:2px 8px;
}

.nav .wrapper p {
  margin-top:0.667em;
  margin-bottom:0.667em;
}

div.nav .selflink {
  font-weight:bold;
}

/* Nav Items */
div.nav.items .heading { background-color:var(--fx-color-interface); }
div.nav.items.wide .currentheading { background-color:rgba(103, 145, 94,1); }
div.nav.items .heatheading { background-color:#EC6050; }
div.nav.items .aeriusheading { background-color:rgb(253, 231, 106); }
div.nav.items .subsidenceheading {  background-color:rgb(137, 105, 66); }
div.nav.items .trafficheading {  background-color:rgb(137, 137, 137); }


div.nav.items dd,
div.nav.items dt,
div.nav.items table th { border-color:var(--fx-color-interface); }

.table.items > :first-child > tr:first-child,
.table.items > :first-child > tr:first-child > *,
.table.items > tbody > tr.heading,
.table.items > tbody > tr.heading > * {
  background-color:#ffffff !important;
  border-color:var(--fx-color-interface) !important;
}
.table.items > tbody > tr > th,
.table.items > tfoot > tr > th,
.table.items > thead > tr > th,
table.table > tbody > tr.items > th {
  background-color:#ffffff;
  border-color:var(--fx-color-interface);
}
.table.items > tbody > tr:nth-child(odd),
.table > tbody > tr.items:nth-child(odd) {
  background-color:var(--fx-color-interface-row-odd);
}

/* Overlays */
.table.overlay > :first-child > tr:first-child,
.table.overlay > :first-child > tr:first-child > *,
.table.overlay > tbody > tr.heading,
.table.overlay > tbody > tr.heading > * {
  background-color:var(--fx-color-interface) !important;

}
.table.overlay > tbody > tr > th,
.table.overlay > tfoot > tr > th,
.table.overlay > thead > tr > th,
table.table > tbody > tr.overlay > th {
  background-color:var(--fx-color-interface);
}
.table.overlay > tbody > tr:nth-child(odd),
.table > tbody > tr.overlay:nth-child(odd) {
  background-color:var(--fx-color-interface-row-odd);
}
.table.overlay th,
.table.overlay td {
  padding-right: 3em;
  text-align: left;
}
.icon-cell {
  padding-right: unset;
  width: 50px;
  text-align: center;
}

/*Buttons (old style)*/
div.module-button{
  border:0px solid #AAA;
  border-spacing:0;
  border-radius:4px;
  font-size:1.5em;
  height:8em;
  width:8em;
  position:relative;
  margin:auto;
}

div.module-button .module-button-text{
  position: absolute; 
  top: 110px;
  text-align: center;
  width: 100%;
  font-family: 'Roboto Slab', serif;
}

div.module-button-small{
  border:0px solid #AAA;
  border-spacing:0;
  border-radius:4px;
  font-size:0.5em;
  height:1em;
  width:1em;
  position:relative;
  margin:auto;
}

/*Buttons (new style)*/
div.nav-button-container {
  height: 10.5em;
  margin-top: 5px;
}
div.nav-button-container > div.nav-button {
  margin: 5px 0.375em;
}
div.nav-button {
  flex-direction: column;
  position: relative;
  align-items: center;
  display: inline-flex;
  
  overflow: hidden;
  cursor: pointer;


  width:7.5em;
  height:100%;
  min-height:9em;

  border-radius: 1em;
  box-sizing: border-box;

  background-color: lightgrey;
}
div.nav-button > * {
  z-index: 100;
}
div.nav-button > a {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;

  z-index:200;

  text-decoration: none;
}
div.nav-button .nav-button-text {
  text-align: center;
  font-size: 0.9375em;
  font-family: 'Roboto Slab', serif;

  flex-grow: 1;
  flex-basis: 1px;

  width: 100%;
  height: 1em;

  z-index: 150;

  /*background-color: rgb(255,255,255,0.5);*/
  border-radius: 1em;

  display: flex;
  justify-content: center;
  flex-direction: column;
}
div.nav-button-img {
  text-align: center;
  margin-top: 0.5em;
}
div.nav-button-highlight {
  position:absolute;
  height:100%;
  width: 100%;
}

/*Button highlighting*/
div.nav-button:hover div.nav-button-highlight {
  background-color: rgb(0, 0, 0, 0.1);
}
div.nav-button:hover .nav-button-text {
  color: white;
}

/*Button link via image to allow self-link*/
div.nav-button > .center {
  position: absolute;
  width:    100%;
  height:   100%;
  opacity:  0;
  z-index:  300;
  text-align: unset;
}
div.nav-button > .center a {
  position: absolute;
  height:   100%;
  width:    100%;
  display:  block;
}
div.nav-button > .center a img{
  display:  none;
}

/*Buttons in nav*/
div.nav .heading .nav-button-container {
  height:unset;
}
div.nav .heading .nav-button {
  background-color: unset !important;
  display: inline-block;

  height: unset;
  width: unset;
  min-height: unset;
  min-width: unset;

  margin: unset;
  padding: unset;
}
div.nav .heading div.nav-button:hover div.nav-button-highlight {
  background-color: unset;
}
div.nav .heading .nav-button-img {
  margin-bottom: unset;
}
div.nav .heading .nav-button img {
  width: 30px;
  height: 30px;
}
div.nav .heading .nav-button-text {
  display: none;
}


div.imagelink-white,
.imagelink-white {
  z-index:5;
}
div.imagelink-white p a,
.imagelink-white p a{
  color:white;
}

/* Matomo banner */
body .matomo-cookies-banner-container {

}


/*List filteres search*/
div.list-filterer {
    display: block;
    width: 12.6em;
    width: 20vw;
    min-width: 5em;
    max-width: 20em;
    padding-right: 1.4em;
    height: 1.6em;
    margin-top: 0.65em;
    position: relative;
    min-height: 1px;
    border: solid 1px #aaa;
    color: #000;
    background-color: #fff;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAQCAIAAABY/YLgAAAAJUlEQVQIHQXBsQEAAAjDoND/73UWdnerhmHVsDQZJrNWVg3Dqge6bgMe6bejNAAAAABJRU5ErkJggg==);
    background-position: top left;
    background-repeat: repeat-x;
}

div.list-filterer .list-filterer-input {
margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: #000;
    width: 100%;
    padding: 0.2em 0 0.2em 0.2em;
    font-size: 13px;
    direction: ltr;
    -webkit-appearance: textfield;
}
div.list-filterer .list-filterer-input:focus {
    outline: 0;
}

div.list-filterer .list-filterer-button {
    background-image: url(/w/skins/Vector/resources/common/images/search.svg);
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: #000;
    position: absolute;
    top: 0;
    right: 0;
    width: 1.65em;
    height: 100%;
    cursor: pointer;
    text-indent: -99999px;
    line-height: 1;
    direction: ltr;
    white-space: nowrap;
    overflow: hidden;
}

/*Here because the filter function might break columns*/
.mw-prefixindex-body li a{
    display: inline-block;
}


/*Hiding elements from guest users*/
.userhidden {
display: none;
}

.gallerycaptionalign-center .gallerytext {
    text-align: center;
}
.mw-content-ltr ul.gallery {
    margin-left: 0px;
}


/*Hatnote*/
.hatnote {
    font-style: italic;
    padding-left: 1.6em;
}

/*Styling rules results*/
.editRulesResults {
    border: 1px solid red;
    margin-bottom: 1em;
    padding: 0.5em;
}
.editRulesResult {
    margin-bottom: 1em;
}
.editRulesResultHeader {
    font-weight: bold;
}
.editRulesResultEntry {
    padding-left: 1em;
}

.protected-email:before {
    content: attr(data-u) "\0040" attr(data-d);
}
.protected-email-scrape {
    display:none;
}

.visible-for-tygron-only {
    display:none;
}

.fullwidth .image img{
   width: 100%; 
   height:auto;

}