@charset "utf-8";
/* CSS Document */


* {
  box-sizing: border-box;
}

/* XXXXXXXXXXXXXXXXX  Menu bar001     XXXXXXXXXXXXXXXXXXXXXXXXX */
.menubar001 {
	display:inline-block;
	background-color:#FFFFFF; /* same color as background  */
	padding:10px;
	width:100%;
}
.menuitem001 { 
	display:inline-block;
	float:left;
	padding:10px;
	width:25%; /* Depends how many menu items we have 4 hence 25%*/ 
	height:40px;
	font-size:18px;
	text-align:center;
	border:thin solid #000000;
	background-color:#8F8;  
	border-radius:20px;
}
.menubar001::after {
  content: "";
  clear: both;
  display: block;
}
/*  XXXXXXXXXXXXXXXX  END menubar001  XXXXXXXXXXXXXXXXXXXXXXXXX  */

/*
.pagecontent{
	font-size:16px; transfered to indevidual page css
}
*/


   
/*  DEFAULT conditions before application of @media > 1200px   YELLOW  */
html{margin:0:}
body{
	font-family:Verdana, Geneva, sans-serif;
	background-color:#FFFFFF; /* white */
	/*  background-color:#990033; /* test */
    margin:0;
} 
h1 {text-align:center; font-size:36px; margin-top:0px; margin-bottom:0px; }
h2 {text-align:center; font-size:24px; margin-top:0px; margin-bottom:0px; }
.topDiv{
	background-color:#FFFF99; /* Pale Yellow */
	/* background-color:#609; /* test */
	
	width:100%;	
	color:#000000;
	border:thin solid #000000;
	padding:10px;
	margin-top:0px;
	
}
.pagecontent{ font-size:14px;}

.homebutton{
    background-color:#0F0; 
	border-color:#000000; 
	border-width:thin; 
	border-style:solid; 
	padding:5px;
	width:100px;
	text-align:center;
	height:24px;
	border-radius:12px;
	font-size:12px;
}
.menuitem001 {
    display:block;
	width:25%; 	
    }

/* END DEFAULT contitions */

/* I notice that Bootstrap uses 4 breakpoints, 1200, 992, 768, 576. so I will do the same */
/* only up to 1200px for Tablets Landscape     GRAY      */
@media only screen and (max-width: 1200px) {
body{background-color:#FFFFFF;} 
/* body{background-color:#ff0000;} /* test */
h1 {text-align:center; font-size:24px; }
h2 {text-align:center; font-size:18px; }
.homebutton{
	font-size:10px; 
	border-right:7px;
	width:100px;
	height:22px; 
	border-radius:11px;
	padding:2px;
	}
.pagecontent{ font-size:14px;}
.topDiv{
	background-color:#CCCCCC; /* Grey */
	padding:15px;
    }
.menuitem001 {
    display:block;
	width:25%; 	
    }
}

/* only up to 992px  for  Tablet small       PURPLE   */
@media only screen and (max-width: 992px) {
body{background-color:#FFFFFF; } 
h1 {text-align:center; font-size:18px }
h2 {text-align:center; font-size:16px; }
.homebutton{font-size:12px;}
.pagecontent{ font-size:14px;}
.topDiv{
	background-color:#FF80FF; /* Purple */
	/* background-color:#FF9999; /* Just testing */
	padding:15px;
    }
.menuitem001 {
    display:block;
	width:25%; 	
	/* background-color:#FFFF33;  /* Just testing */
    }
}

/* only up to 768 for  iPHONE Landscape Tablet Portrate   GREEN  */
@media only screen and (max-width: 768px) {
body{background-color:#FFFFFF;} 
h1 {text-align:center; font-size:16px; }
h2 {text-align:center; font-size:14px; }
.homebutton{font-size:10px;}
.pagecontent{ font-size:14px;}
.topDiv{
	background-color:#00FF00; /* Green */
	padding:10px;
    }
.menuitem001 {
	display:block;
	width:100%;
   }  
 	
}

/* only up to 576px for iPHONE portrate      BLUE  */
@media only screen and (max-width: 576px) {
body{background-color:#FFFFFF;} 
h1 {text-align:center; font-size:14px; }
h2 {text-align:center; font-size:12px; }
.homebutton{
	font-size:8px;
	height:16px;
	border-radius:8px;
	}
.pagecontent{ font-size:14px;}
.topDiv{
	background-color:#33CCFF; /* Blue */
	padding:5px;
    }
.menuitem001 {
	display:block;
	width:100%;
   } 
}