/* 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 */
#mw-indicator-smw-entity-examiner {
display: none !important;
}
/* The background container for Main_Page-GR */
#GRContainer {
/* Make the container (and background image) 100% of the viewport */
width: 100vw;
background-size: contain;
background-repeat: no-repeat;
}
#GRContainerTest2 {
}
/* the menu table on the Main_Page-GR */
#GRMenu {
border:1px solid black;
width:max-content;
margin-left: auto;
margin-right: auto;
background-color: #ffffd1; /* 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%;
}
/* 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 {
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 */
#FAQPage.container {
margin-left: 0;
}
/* 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. */
#bodySearchInputHomePageSearchBox {
width: 70%;
}
/* 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;
}
#newHeading {
margin-top:0;}
/* 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 -------------------*/
#map {
position: relative;
width: 100%;
padding-top: 40px;
margin-left: 0;
}
.sectionTitle {
text-align:center;
margin-bottom:5px;
font-size:1.2rem;
}
.subTitle {
text-align:center;
font-size:1rem;
}
#statsline {
text-align:center;
margin-top:5px;
margin-bottom:16px;
}
.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:#e1ebee;
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;
}
#all_countries_button:hover {
background-color:white;
color:blue;
}
/* special extra rules for all_countries button */
#all_countries_button {
background-color:#0f5ba9;
font-size:1.2rem;
color:white;
width:220px;
}
/* button placement */
#all_countries_button {top:22%; left:40%;}
#africa_button {top:60%; left:49%;}
#asia_button {top:40%; left:73%;}
#europe_button {top:39%; left: 52%;}
#middle_east_button {top:56%; left:57%;}
#north_america_button {top:35%; left:22%;}
#pacific_button {top:73%; left:85%;}/* Australia/Oceania button*/
#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 -------------------*/
#menu {
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;
}
.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;
}
#menu > ul {
list-style-type: none;
padding: 0;
margin-left: 20px;
}
#menu ul li:hover {
background-color:#ecebea;
}
/* 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;
}
