Thành viên:Đức Anh/Nháp 88

    Tủ sách mở Wikibooks
    /* 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;
    }