User:Ccsmith/common.css

.parent{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr 1fr; height:100vh; margin:2em; grid-template-areas: 'lds1 lds1 lds2 lds2' 'lds1 lds1 lds3 lds3' 'lds4 lds5 lds6 lds7' 'lds8 lds9 lds10 lds11' 'lds12 lds13 lds14 lds15'; }	background:red; grid-area:lds1; }	background:yellow; grid-area:lds2; }	background:green; grid-area:lds3; }	background:lightgreen; grid-area:lds4; }	background:lightyellow; grid-area:lds5; }	background:yellow; grid-area:lds6; }	background:green; grid-area:lds7; }	background:yellow; grid-area:lds8; }	background:yellow; grid-area:lds9; }	background:yellow; grid-area:lds10; }	background:yellow; grid-area:lds11; }	background:yellow; grid-area:lds12; }	background:yellow; grid-area:lds13; }	background:yellow; grid-area:lds14; }	background:yellow; grid-area:lds15; }	background:yellow; grid-area:lds16; }	background:yellow; grid-area:lds17; }	background:yellow; grid-area:lds18; }	background:yellow; grid-area:lds19; }	background:yellow; grid-area:lds20; }	background:yellow; grid-area:lds21; }	background:yellow; grid-area:lds22; }	background:yellow; grid-area:lds23; }	background:yellow; grid-area:lds24; }	background:yellow; grid-area:lds25; }	background:yellow; grid-area:lds26; }	background:yellow; grid-area:lds27; }	background:yellow; grid-area:lds28; }	background:yellow; grid-area:lds29; }	background:yellow; grid-area:lds30; }
 * 1) lds1{
 * 1) lds2{
 * 1) lds3{
 * 1) lds4{
 * 1) lds5{
 * 1) lds6{
 * 1) lds7{
 * 1) lds8{
 * 1) lds9{
 * 1) lds10{
 * 1) lds11{
 * 1) lds12{
 * 1) lds13{
 * 1) lds14{
 * 1) lds15{
 * 1) lds16{
 * 1) lds17{
 * 1) lds18{
 * 1) lds19{
 * 1) lds20{
 * 1) lds21{
 * 1) lds22{
 * 1) lds23{
 * 1) lds24{
 * 1) lds25{
 * 1) lds26{
 * 1) lds27{
 * 1) lds28{
 * 1) lds29{
 * 1) lds30{

.submenu { display:none; position:absolute; width:200px; height:400px; top:100px; left:2%; border:1px solid black; box-shadow: 3px 3px 5px #888888; padding:10px; background-color:white; overflow: auto; z-index:3; } /*--states or province display none-*/ display:none; } /*countries display none*/ display:none; } .displayBox { position:absolute; height:400px; width:200px; top:100px; left:2%; border:1px solid black; box-shadow: 3px 3px 5px #888888; padding:3px; overflow: auto; background-color:white; z-index:2; } .displayBoxHeaders { text-align:center; font-size:1.1em; background-color:lightgray; } .displayCountryName { font-size:1.1em; } .exitIcon { color:red; } .exitIcon2 { color:red; }
 * 1) UnitedStatesStates, #canadaProvinces, #mexicoStates, {
 * 1) northAmericanCountries, #southAmericanCountries, #europeCountries,
 * 2) Australia_OceaniaCountries, #asiaCountries, #africaCountries, #allLocations {

.buttonsMainPage { padding:7px; border:1px solid black; border-radius:5px; box-shadow: 3px 3px 5px #888888; font-size:1.1em; background-color:yellow; } .buttonLocation { padding:7px; border:1px solid black; border-radius:5px; box-shadow: 3px 3px 5px #888888; font-size:1.1em; background-color:blue; color:white; }	position:absolute; top:50px; left:30%; }	position:absolute; top:150px; left:13%; }	position:absolute; top:300px; left:25%; }	position:absolute; top:100px; left:50%; }	position:absolute; top:300px; left:85%; }	position:absolute; top:270px; left:50%; }	position:absolute; top:130px; left:70%; }
 * 1) allLocationButton {
 * 1) northAmericaButton {
 * 1) southAmericaButton {
 * 1) europeButton {
 * 1) Australia_OceaniaButton {
 * 1) africaButton {
 * 1) asiaButton {