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; gap:12px; grid-template-areas: 'lds101 lds101 lds101 lds101' 'lds102 lds102 lds102 lds102' 'lds103 lds103 lds103 lds103' 'lds1 lds1 lds2 lds2' 'lds1 lds1 lds3 lds3' 'lds4 lds5 lds6 lds7' 'lds8 lds9 lds10 lds11' 'lds12 lds13 lds14 lds15' 'lds16 lds17 lds18 lds19' 'lds20 lds21 lds22 lds23' 'lds24 lds25 lds26 lds27' 'lds28 lds29 lds30 lds31'; }

font-size:15px; grid-area:lds101; text-align:center; }	font-size:17px; grid-area:lds102; text-align:center; }	font-size:10px; grid-area:lds103; text-align:center; }
 * 1) lds101{
 * 1) lds102{
 * 1) lds103{

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; }
 * 1) lds1{
 * 1) lds2{
 * 1) lds3{
 * 1) lds4{
 * 1) lds5{
 * 1) lds6{

grid-area:lds6; }
 * 1) lds7{

grid-area:lds7; }
 * 1) lds8{

grid-area:lds8; font-size:20px; line-height:1.2; height:100px; }
 * 1) lds9{

grid-area:lds9; font-size:20px; line-height:1.2; }
 * 1) lds10{

grid-area:lds10; font-size:20px; line-height:1.2; }
 * 1) lds11{

grid-area:lds11; font-size:20px; line-height:1.2 }
 * 1) lds12{

grid-area:lds12; line-height:2; height:150px; }
 * 1) lds13{

grid-area:lds13; line-height:2; }
 * 1) lds14{

grid-area:lds14; line-height:2; }
 * 1) lds15{

grid-area:lds15; line-height:2; }
 * 1) lds16{

grid-area:lds16; }
 * 1) lds17{

grid-area:lds17; }
 * 1) lds18{

grid-area:lds18; }
 * 1) lds19{

grid-area:lds19; }
 * 1) lds20{

grid-area:lds20; font-size:20px; line-height:1.2; height:100px; }
 * 1) lds21{

grid-area:lds21; font-size:20px; line-height:1.2; }
 * 1) lds22{

grid-area:lds22; font-size:20px; line-height:1.2; }
 * 1) lds23{

grid-area:lds23; font-size:20px; line-height:1.2; }
 * 1) lds24{

grid-area:lds24; }
 * 1) lds25{

grid-area:lds25; }
 * 1) lds26{

grid-area:lds26; }
 * 1) lds27{

grid-area:lds27; }
 * 1) lds28{

grid-area:lds28; font-size:20px; line-height:1.2; height:100px; }
 * 1) lds29{

grid-area:lds29; font-size:20px; line-height:1.2; }
 * 1) lds30{

grid-area:lds30; font-size:20px; line-height:1.2; }
 * 1) lds31{

grid-area:lds31; font-size:20px; line-height:1.2; }

.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 {