MediaWiki:Mobile.css

/* The background container for Main_Page-GR */
#GRContainer {
	background-image: url(/wiki/en/img_auth.php/9/95/World_map_purplish.png); 
	background-size: cover;	
}
/* the menu table on the Main_Page-GR */
#GRMenu {
	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%;
}


/* Code for Guided Research Page */
.GR-where-can-I-find {
	font-family:museo;
	font-size:20px;
	font-weight:bold;
	margin-top:0.7em;
}
.GR-start-here {
	margin-top:0.9em;
	font-size:15px;
	font-weight:bold;
}
.GR-links-below {
	margin-left:1em;
}
.GR-you-can-try {
	margin-left:4em;
	font-weight:bold;
	margin-top:1.5em;
}
.GR-if-not-found {
	font-size:15px;
	font-weight:bold;
}
ul.GR-indent-bulleted-list {
	margin-left:5em;
	margin-bottom:1em;
}

 /* 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;
}

/* 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 */

 /* landing page mobile specific features */
 .map-mobile {
    display:inline!important;
    text-align:center;
    font-size: 1.25rem;
    color: #aac777;
  }

  .search-mobile {
    display:inline !important;
  } 


/* end of specific features for landing page */

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

.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;
}

/*--------------------------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; 
	margin-top:-10px;
}

.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;*/ /* removed from mobile */
	/*align-items: center;*/  /* removed from mobile */
	font-size:1rem;
	/*margin-top:10px;*/  /* removed from mobile */
        flex-direction:column;
}

.search-mobile {
        display:unset;
}

.tips {
	text-align:center; 
	font-size:1rem;
        width:70%; /* mobile view only */
}

.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;
}

#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:25%; left:40%;}
#africa_button {top:65%; left:51%;}
#asia_button {top:45%; left:73%;}
#british_isles_button {top:42%; left:38%;}
#caribbean_button {top:60%; left:29%;}
#central_america_button {top:63%; left:17%;}
#europe_button {top:44%; left: 52%;}
#middle_east_button {top:56%; left:57%;}
#north_america_button {top:40%; left:22%;}
#pacific_button {top:82%; left:85%;}
#south_america_button {top:73%; left:27%;}

/* Callout is the 'Guided Research' element */
/* .callout different in mobile view */
.callout {
    position:unset; /* different in mobile */
    top:unset; /* different in mobile */ 
    left:unset; /* different in mobile */
    width:100px; /* different in mobile */
    margin-left: auto; /* added in mobile */
    margin-right: auto; /* added in mobile */
    line-height: 1; /* added in mobile */
    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.2rem; /* different in mobile */
	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:90px; /* different in mobile */
}

/* ------------------menus -------------------*/
#menu {
    position:absolute;
    top:125px;
    left:0;
    width:210px;
    height:500px;
    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: white;
}



/*--------------------------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;
}