MediaWiki:Common.css

/*green online button*/ .green_online_button { background-color: #BFD730; border-radius: 10px; color: white; width: 210px; min-height:52px; text-align: center; text-decoration: none; font-size: 1.1em; margin: 5px; padding-right: 5px; padding-left:5px; padding-top:15px; padding-bottom:15px; display: block; }

.green_online_button:hover, .green_online_button:visited { text-decoration: none !important; background-color: #cade54; }

.green_online_button>a, .green_online_button>a.visited, .green_online_button>a.external:visited, .green_online_button>a:hover { color: white !important; text-decoration: none !important; } /*red online button*/ .red_online_button { background-color: #f16458; border-radius: 10px; color: white; width: 210px; min-height:52px; text-align: center; text-decoration: none; font-size: 1.1em; margin: 5px; padding-right: 5px; padding-left:5px; padding-top:15px; padding-bottom:15px; display: block; }

.red_online_button:hover, .red_online_button:visited { text-decoration: none !important; background-color: #f59289; }

.red_online_button>a, .red_online_button>a.visited, .red_online_button>a.external:visited, .red_online_button>a:hover { color: white !important; text-decoration: none !important; } /*brown online button*/ .brown_online_button { background-color: #9c947a; border-radius: 10px; color: white; width: 210px; min-height:52px; text-align: center; text-decoration: none; font-size: 1.1em; margin: 5px; padding-right: 5px; padding-left:5px; padding-top:15px; padding-bottom:15px; display: block; }

.brown_online_button:hover, .brown_online_button:visited { text-decoration: none !important; background-color: #b3ad98; }

.brown_online_button>a, .brown_online_button>a.visited, .brown_online_button>a.external:visited, .brown_online_button>a:hover { color: white !important; text-decoration: none !important; } /*orange online button*/ .orange_online_button { background-color: #fcb34b; border-radius: 10px; color: white; width: 210px; min-height:52px; text-align: center; text-decoration: none; font-size: 1.1em; margin: 5px; padding-right: 5px; padding-left:5px; padding-top:15px; padding-bottom:15px; display: block; }

.orange_online_button:hover, .orange_online_button:visited { text-decoration: none !important; background-color: #fdbf68; }

.orange_online_button>a, .orange_online_button>a.visited, .orange_online_button>a.external:visited, .orange_online_button>a:hover { color: white !important; text-decoration: none !important; } /*gray online button*/ .gray_online_button { background-color: #bab7b1; border-radius: 10px; color: white; width: 210px; min-height:52px; padding:5px; text-decoration: none; font-size: 1.1em; display:flex; align-items:center; justify-content:center; }

.gray_online_button:hover, .gray_online_button:visited { text-decoration: none !important; background-color: #cfcdc9; }

.gray_online_button>a, .gray_online_button>a.visited, .gray_online_button>a.external:visited, .gray_online_button>a:hover { color: white !important; text-decoration: none !important; }

/* Override Bootstrap for tooltip links */ .tooltip { font-size: 1rem !important; font-family: Verdana,sans-serif !important; }

/* Remove SMW Loader */ /* Should be removed after SMW is fixed */ display: none !important; }
 * 1) mw-indicator-smw-entity-examiner {

/* The background container for Main_Page-GR */ background-image: url(/wiki/en/img_auth.php/9/95/World_map_purplish.png); /* Make the container (and background image) 100% of the viewport */ width: 100vw; background-size: contain; background-repeat: no-repeat; background-position-x: center; }	background-image: url(/wiki/en/img_auth.php/9/95/World_map_purplish.png); } /* the menu table on the Main_Page-GR */ border:1px solid black; width:max-content; margin-left: auto; margin-right: auto; background-color: #ffffffd1; /* white with alpha transparency */ } /* The callout for Main_Page-GR */ .callout2 { position: absolute; top: 1%; right: 80%; width: 160px; text-align: center; font-size: 1rem; cursor: pointer; border-radius: 5px; box-shadow: 5px 5px 2px #888888; color: #004d99; background-color: white; padding: 5px; border: 1px solid gray } /* The div containing the logo on Main Page-GR */ .GRLogo { position: absolute; left: 80%; top: 1%; }
 * 1) GRContainer {
 * 1) GRContainerTest2 {
 * 1) GRMenu {

/* Create a class for GR Sidebar tables */ .sidebar { padding:2px; width:max-content; margin-left:10px; margin-top: 47px; border-spacing:0px; border:1px solid gray; position:relative; background:white; }

.sidebar p { line-height: 1em; }

.sidebar-heading { text-align:center; background: #DCDAD1; font-size:12pt; } /** overrides for Mobile Guided Research Main Page */ @media (max-width: 720px) { /** override Minerva for menu table */ .content table { width: fit-content !important; border: solid 1px gray !important; padding-top: unset !important; }	/* Minerva @media (max-width: 720px) .content table { width: 100% !important; border: unset !important; padding-top: 2.5rem; */

/* Send nav back button to below menu */ .callout2 { position: unset; /* position: absolute; */ margin-left: auto; margin-right: auto; }	/* Hide the callout heading */ .calloutHeading { display: none; }	.guided_research_link { width: auto; /* width: 90px; */ }

.GRLogo { position: unset; } } /* end media query */

/* Create a blue gradient */ .gradient { padding-left:20px; padding-right:20px; margin-left:-20px; margin-right:-20px; background: #d7e0ff; }

/* The following readjusts the popup box that appears when hovering over links in GuidedResearch. */ .tooltip .tooltiptext { left: unset; width: max-content; }

/* Override Bootstrap's definition of container for the FAQ Pages */ margin-left: 0; }
 * 1) FAQPage.container {

/* Bootstrap overrides */ legend { width: auto; } .tooltip { opacity:100 !important; } table { border-collapse: separate; } caption { caption-side: top; } th { text-align: center; } /* end Bootstrap overrides */

.button-style { background-color: #7897BA; border:4px outset #B3D2F5; border-radius:.5rem; color: white !important; padding: .2rem 1.5rem; text-align: center; text-decoration: none; display: inline-block; font-weight:bold; font-family:Arial; position:absolute; font-size: 1.25rem; cursor: pointer; } .button-style > a, .button-style > a.visited, .button-style > a.external:visited, .button-style > a:hover { color:white !important; text-decoration:none !important; }

/* Set width of search box to 70%, so 'go' button stays inline. */   width: 70%; }
 * 1) bodySearchInputHomePageSearchBox {

/* change the box around the code feature */ code { color: #000; background-color: #f9f9f9; border: 1px solid #ddd; } pre, code, tt, kbd, samp, .mw-code { font-family: monospace,Courier; }

/* make sure missing pages remain colored correctly after visiting */ a.new:visited, #p-personal a.new:visited { color: #a55858 !important; }

/* change border on input forms to be 1pm, instead of 2px, and grey instead of black */ form input { /*   border: 1px solid !important;*/ border-color: darkgrey !important; }

margin-top:0;}
 * 1) newHeading {

/* Define spacing and # of columns based on screen size */ @media screen and (min-width: 1400px) { .column-spacing-fullscreen{ column-count: 6; padding-right: 9% !important; }}	@media screen and (min-width: 1200px) and (max-width: 1399px) { .column-spacing-fullscreen{ column-count: 5; }} @media screen and (min-width: 900px) and (max-width:1199px) { .column-spacing-fullscreen{ column-count: 4; }} @media screen and (min-width: 600px) and (max-width:899px) { .column-spacing-fullscreen{ column-count: 3; }} @media screen and (max-width:745px) { .column-spacing-fullscreen{ column-count: 2; }} @media screen and (max-width:500px) { .column-spacing-fullscreen{ column-count: 1; }}

/* Define spacing and # of columns based on screen size - however, /* this section assumes that only half the screen is available for /* the columns. Even though the screen size may be 1400px, the /* available space for the columns is half that, or 700px. */

@media screen and (min-width: 1400px) { .column-spacing-halfscreen{ column-count: 3; }}	@media screen and (min-width: 1200px) and (max-width: 1399px) { .column-spacing-halfscreen{ column-count: 2; }} @media screen and (min-width: 900px) and (max-width:1199px) { .column-spacing-halfscreen{ column-count: 1; }} .column-spacing-halfscreen li, .column-spacing-fullscreen li {padding-right:5px;}

/* landing page */ .fakelink { color:#004d99; display:block; }

/*--main page coding-*/ /* --new CSS ---*/

/* --containers / elements ---*/ position: relative; width: 100%; padding-top: 40px; margin-left: 0; }
 * 1) map {

.sectionTitle { text-align:center; margin-bottom:5px; font-size:1.2rem; }

.subTitle { text-align:center; font-size:1rem; }

text-align:center; margin-top:5px; margin-bottom:16px; }
 * 1) statsline {

.menuTitle { color:black; justify-content:space-between; font-size:1rem; position:sticky; top:0; background-color:#D9D9D4; text-align:center; }

.search-mobile { display:none !important; } .map-mobile { display:none; }

/* use id="mobileonly" in order to remove items that should not be visible in mobile view. Note: id="nomobile" is defined in   Mobile.css - use this eliminate mobile items. */ .mobileonly { display:none; }

.searchboxContainer { display:flex; justify-content:center; align-items: center; /* removed from mobile */ font-size:1rem; margin-top:10px; /* removed from mobile */ }

.tips { text-align:right; font-size:1rem; }

.buttonContainer { }

/* any element with id ending in '_button' */ [id$="_button"] { background-color:#e1ebee96; position:absolute; border:1px solid black; text-align:center; font-size:1rem; padding:5px; cursor:pointer; border-radius:5px; box-shadow:2px 2px 2px #888888; color:#004d99; }

[id$="_button"]:hover { background-color:white; color:blue; }

background-color:white; color:blue; }
 * 1) all_countries_button:hover {

/* special extra rules for all_countries button */ background-color:#0f5ba9; font-size:1.2rem; color:white; width:220px; }
 * 1) all_countries_button {

/* button placement */
 * 1) all_countries_button {top:22%; left:40%;}
 * 2) africa_button {top:60%; left:49%;}
 * 3) asia_button {top:40%; left:73%;}
 * 4) europe_button {top:39%; left: 52%;}
 * 5) middle_east_button {top:56%; left:57%;}
 * 6) north_america_button {top:35%; left:22%;}
 * 7) pacific_button {top:73%; left:85%;}/* Australia/Oceania button*/
 * 8) south_america_button {top:70%; left:27%;}

/* Callout is the 'Guided Research' element */ .callout { position:absolute; top:15%; left:80%; width:160px; text-align:center; font-size:1rem; cursor:pointer; border-radius:5px; box-shadow:5px 5px 2px #888888; color:#004d99; background-color:white; padding:5px; border:1px solid gray; }

.calloutHeading { color:orange; font-size:1.3rem; font-family:museo; }

.guided_research_link { border:1px solid black; text-align:center; font-size:1rem; cursor:pointer; border-radius:5px; box-shadow:2px 2px 2px #888888; color:#004d99; width:150px }

/* --menus ---*/ position:absolute; top:125px; left:0; width:210px; height:25vw; overflow-y:scroll; display:block; color:#aba8a0; background-color:white; border:1px solid black; z-index: 10; }
 * 1) menu {

.exit { color: red; cursor: pointer; float: right; }

.exit:hover { font-weight: bold; }

/** This hack is to eliminate shifting due to :hover */ span.exit::before { display: block; content: "foo"; font-weight: bold; height: 0; overflow: hidden; visibility: hidden; }

list-style-type: none; padding: 0; margin-left: 20px; }
 * 1) menu > ul {

background-color:#ecebea; }
 * 1) menu ul li:hover {

/* There are two separate classes, but we don't differentiate their styles */ .countrymenu, .statemenu { padding:3px; top:0; background-color:#D9D9D4; color:black }

/* color menu spans to look like a link */ .fakelink { color:#004d99; }

.menulink { font-size: 1rem; cursor: pointer; margin-left:-1.2rem; }

.menulink::before { content: "> "; }

.menulink:hover { background-color: #ecebea; }

/*--main page coding-*/

/* make sure missing pages remain colored correctly after visiting */ a.new:visited, #p-personal a.new:visited { color: #a55858 !important; } /* change border on input forms to be 1pm, instead of 2px, and grey instead of black */ form input { /* border: 1px solid !important; */   border-color: darkgrey !important; }