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

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
   removing ul, li, allows the ident, list-style to work
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, 
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	 display: block;  
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*  RESET - code above always first in the CSS   /* background-color:#0FF;  */
/*
.LGbannerCoRepeat {	
	background: transparent url("images/banner_USNA_1246x72Gray.png") 2px 1px repeat ;  
	width: 100%;
	height: 72px;
	position:200px;
	right:0px;
	border: 1px red outset;
  background-color:  #0FF;   /* teal */
	
/* }  */

* {
  box-sizing: border-box;
}

body  {
	font: 1em/1.4 Arial, "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",  Verdana, Tahoma, sans-serif;
	/*font: 1em/1.4 "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;  
	
	 font: 94% Verdana, Arial, Helvetica, sans-serif;   */
	background: #fffff9;
/*	background: #000080;   NAVY BLUE   */
	
	/*margin: 1px 1px 1 px 1 px; /* zero the margin and padding of the body element to account for differing browser defaults */
 	margin: 1px ;   
	padding: 0;
	text-align: left; /* centers the container in IE browsers. The text is then set to the left aligned default in the #main selector */
	color: #000000;
	color: rgb(59,67,68);
	line-height:125%;
	max-width:100%;
}

h1, h2, h3 {
	margin: 0;
	/*padding: 0 0 1em 0;  */
	
	padding: 0 0 .01em 0;
	/*text-shadow: 1px 1px 5px rgba(0,0,0,0.5);  */
	text-shadow: 1px 1px 5px rgba(255,215,0,0.9);
}

h1 {
	/* font-size: 137.5%;  */
	font-size: 190.5%;
/*	color: rgb(241,47,93);   
	color: rgb(0,0,242);  */
	color: rgb(0,0,128);
	/* background-color:blue;  */
}

h2 {
	font-size: 125%;
	/*color: rgb(241,47,93);   */  
	/*color: rgb(0,0,247); /*  royal blue  */
	color: rgb(0,0,128); 
	
}

h3 {
	font-size: 100%;
}

h4 { height: 2px;	font-size: 100%; }

/*  change back after navbar is fixed
ul {list-style-type: disc;}
li {list-style-type: square;}

*/


/* *************************  FROM EXTERNAL CSS  *********************  */


/* CSS Document */



a {	color: teal;
	/*background-color: #FFFFFF; /*inside navbar color */
	font-weight: 600;
	text-decoration: none;
	width: 100%;
	
	/*
	width: auto;
	color: #BE5500;
	font-family: Trebuchet MS, verdana, ariel, helvetica, san-serif;
	font-weight: 600;
	text-decoration: none;   */
	
}


a {	color: teal;
	/*background-color: #FFFFFF; /*inside navbar color */
	font-weight: 600;
	text-decoration: none;
	width: 100%;
	
	/*
	width: auto;
	color: #BE5500;
	font-family: Trebuchet MS, verdana, ariel, helvetica, san-serif;
	font-weight: 600;
	text-decoration: none;   */
	
}

a:link {
color: black;
	color: blue;
	
}	

/*a:visited { 
	color: #BE5500; 
	color: blue; 
}
a:hover {
	color: gold; /* was red  */
	/*background-color:  /* #CCCCCC; /* was gray  */
/*	background-color: #0000ff;
	background-color: #000080;
	
		/*	background-color:   #FFD100; 
	color:  #000080;  /* Gold for Blue and Gold!*/
/*}	

/**************   tableSubPages for navbar*****************/
.tableSubPages table {
	/* caption-side: bottom;   */
}

/*  #338BA6;   */
.tableSubPages {
	margin-left: 20px;
	border: 1px thin  dotted #666666;
	border-collapse: collapse;
}

.tableSubPages.figcaption {
text-align:center;
}

.tableSubPages td, .tableSubPages th {
	/* border: 1px solid #solid #73C0D4;  */
}
.tableSubPages td {
	/*border: 1px solid #D6DDE6;  */
	/* display:inline-block;  */
	background-color:  #FFD100; /* Gold for Blue and Gold!*/
	background-color:  #CCC; /* Gold for Blue and Gold!*/
	border: 1px solid #666666;
	/* text-align: left;  */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: .85em; /*  size for BINGO BOARD */ 
	/*//background-color: #E4E4DE;  /*#D2D0C4; 	*/
	
	padding-left: 8px; padding-right: 8px; padding-top: 7px; padding-bottom: 7px;  
 -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;

	/*
	height: inherit   */
}

.tableSubPages td a:hover  {
/*border-left: 2px solid #CCCCCC;
border-right: 2px solid #CCCCCC;  
	INITIAL BELOW.....
	background-color: #711515; 
	color: #FFF;
	 */
	 display:inline-block;
	background-color:  #000080; /* Gold for Blue and Gold!*/
	color:  #FFD100;
	font-weight: bold;
	font-family: 'Trebuchet MS', 'Lucida Grande';
	 
}


/*  #828282;   #D0D0B7*/
.tableSubPages th {  
	border: 1px solid #666666;
	background-color: #cccccc;  
	/* background-color: #BCBCBC;  */
	font-weight: bold;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	/* font-size: 1.1em;  */
	text-align: left;
	padding: 4px;
}

/*  ****************  OVERALL PAGE ********************   */
.container { 
	width: 100%;  /* this will create a container xx% of the browser width */
	background: #fffff9;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page TRouBLe*/
	margin-top: 1px;  /* force space at top test with 6px-- zero out in production */
	/*border: 1px solid #000000; /* border around entire page */
	/*  REMOVED on 11/8/2015   */
	/*border: 1px solid RED; /* border around entire page */
	text-align: left; /* overrides the text-align: center on the body element */
} 

/* **************************** Index page   *************  */

.boldit {
	font-weight:bold;
}

.center-text-trick { /* https://css-tricks.com/centering-css-complete-guide/  */
  height: 30px;
  line-height: 30px;
  white-space: nowrap;
}

.aside {   }

/* *****************************  bring up menu for small devices ***************/
/* for switching fot small pages  */

/* Add a black background color to the top navigation */

/* Style the links inside the navigation bar */
/*
.topnav {	
	/*height: 72px;
    background-color: red;  
	background-image: url("m59/images/banner_USNA_1246x72Gray.png"); */
 /*   overflow: hidden;
}  */
 
/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: violet;  /* was   #f2f2f2;   */
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;  /* does not seem to make a difference in font-size  */
}
 
/* Change the color of links on hover */

 
/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

.tableSubPages table {
	/* caption-side: bottom;   */
}

/*  #338BA6;   */
.tableSubPages {
	margin-left: 20px;
	border: 1px thin  dotted #666666;
	border-collapse: collapse;
}

.tableSubPages.figcaption {
text-align:center;
}

.tableSubPages td, .tableSubPages th {
	/* border: 1px solid #solid #73C0D4;  */
}
.tableSubPages td {
	/*border: 1px solid #D6DDE6;  */
	/* display:inline-block;  */
	background-color:  #FFD100; /* Gold for Blue and Gold!*/
	background-color:  #CCC; /* Gold for Blue and Gold!*/
	border: 1px solid #666666;
	/* text-align: left;  */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: .85em; /*  size for BINGO BOARD */ 
	/*//background-color: #E4E4DE;  /*#D2D0C4; 	*/
	
	padding-left: 8px; padding-right: 8px; padding-top: 7px; padding-bottom: 7px;  
 -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;

	/*
	height: inherit   */
}

.tableSubPages td a:hover  {
/*border-left: 2px solid #CCCCCC;
border-right: 2px solid #CCCCCC;  
	INITIAL BELOW.....
	background-color: #711515; 
	color: #FFF;
	 */
	 display:inline-block;
	background-color:  #000080; /* Gold for Blue and Gold!*/
	color:  #FFD100;
	font-weight: bold;
	font-family: 'Trebuchet MS', 'Lucida Grande';
	 
}


/*  #828282;   #D0D0B7*/
.tableSubPages th {  
	border: 1px solid #666666;
	background-color: #cccccc;  
	/* background-color: #BCBCBC;  */
	font-weight: bold;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	/* font-size: 1.1em;  */
	text-align: left;
	padding: 4px;
}



/* ********************** Calender on index page  END of Navbar *********************  */
.navCal {
	/*background-color: rgba(255,239,176,0.9); /* Sub of Zoombie.... Beewas  */
	background-color: rgba(255,215,0,0.9); /* Sub of Zoombie.... Beewas  */
	color:black;
	width: 170px;
	float:left;
	list-style-type: none;  
	padding: 3px;
	margin:0;
	font-size: 1.1em;/*
	box-shadow:3px 3px 10px 8px rgba(0, 0, 0, 0.4);   */
	
	box-shadow:1px 1px 1px 1px rgba(0, 0, 0, 0.4); 
	border-radius: 10px; 
	
}
/* CSS Document */




/* ****************************  FLEX INFO *******************  */
/* ****************************  FLEX HEADER *******************  */

.flexHeader {   /*container   */
	flex;
	background-color: transparent;
	background-color: #000080;   /*    #FFD100 --GOLD;  */
	width:100%;  */
	flex-direction: row;
	justify-content: flex-start;
	
	/*flex-direction: col;  */
		
	}

.flexHeaderLink {
	display: flex;
/*	width:100%;
	
	
	 		display: flex;   */
  	display: -webkit-flex;
  	display: -ms-flexbox;
  

}

.flexBanner {
	display:flex;
	/*width: 80%;  */
	width: 400%;
	height:72px;
	flex: 1.5 1 auto;
	 
	/*	gap: 100px;
align-items: right;  */
	
	background-image:  url("banner_USNA_1246x72Gray.png"); 
	
	/*height:100px;  
	width: 70%;  */
	/*flex: 1.5 1 auto;  
	text-align: right;  
	background-color:yellow;  */
}


/*.maincontain .col {
  width: 10%; 
  align-items: left;

}    */

.flexTime {
	display:flex;
	width:10%
	
	
}
}
#flexHeader { unset; }


/* ****************************  FLEX INFO *******************  */

.flexWrapper {
	background-color: transparent;
	display: flex;
	/*justify-content: space-between;  */
	width: 100%;
	align-items: flex-start;

}




.bottomFlexItem {  /* use if I can ever figure out to have small with info on the bottom */
	display: flex;
	
	
}
.leftFooter {
	/* background-color: yellow;  */
	display: flex;
	/*height:100px;  */
	width: 90%; 
	background-color:transparent; 
	flex: 1.5 0 auto;  
	text-align: left;
}

.rightFooter {
	display: flex;
	width: 90%;
	background-color:blue;
	/*height:100px;  
	width: 70%;  */
	flex: 1.5 1 auto;  
	text-align: right;
}

.flex-container > .left{
  width:15%;
  border:4px red solid;
}

.flex-container > .right{
  display:flex;
  flex-direction:row;
  border:4px lime solid;
  width:30%;
}

.flex-container > .right > div{
  border:4px red solid;
  width:50%;
}

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: left; }
.c {margin-left: auto;}
  /*.AlignSelf {
	/*align-self: flex-end; 
}


 */
/* ********************  MAIN CONTENT    ********************   */

.mainContent { 
	/*margin: 15px 20px 0 13em; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. TRBL (TRouBLe) */
	 /*min-width: 32em;  /* about 512px   */
	 margin: 15px 20px 0 0em; 
	 padding-left:10px;
	 padding-top:10px; 
	 font: 1em/1.4 Arial, "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",  Verdana, Tahoma, sans-serif;
	/*  width:100%;  added 4/17/2015  */
	 max-width:100%;
	 text-justify:left;
	 text-align: left;   /* IE */
		 
} 

.mainContent .tallguy {
	line-height:24px;
	
	/*margin-left: 200px;   */
}

.LGleft {
  background-color: #2196F3;
  padding: 20px;
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.SMleft {
	
  background-color: #2196F3;
  padding: 20px;
  float: left;
  width: 20%;  */ /* The width is 20%, by default */
}

.left { display: none; }  

.main {
	margin-left:20%;
  	background-color: #f1f1f1;
  	padding: 20px;
 /* float: right;  */
  	width: 80%; /* The width is 60%, by default */
}

.right {
  background-color: #04AA6D;
  padding: 20px;
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.bannerCoRepeat {	
	background: transparent url("m59/images/banner_USNA_1246x72Gray.png") 2px 1px repeat ;    
	width: 100%;
	height: 72px;
	position:5px;
	right:0px;
	border: 1px white outset;
}

 
 
 figure {
    width: 30%; 
    float: left;
    margin: 0;
    text-align: center;
    padding: 0;
}
.redLine {
	font-weight:bolder;
	color:red;
	
}

.imgborderMH {
	border-width: 2px;
	/*border-style: solid; */
	background-color: #FFD010; /* #C2E9FE; /* #ffebb2;  */
	border-color: #999;  /*  bgcolor=""   #D2D0C4   #CC6600*  #635d52  #666666;*/
	background-position: top center;
	color:#000000;
	color: #000084; /* Navy Blue #ffebb2;  */
	
	text-align:left;	
	padding-top: 10px;
	padding-left: 10px;  
	padding-bottom: 6px;
	padding-right: 10px;
		
	border-radius: 40px;
	
/*	box-shadow:3px 3px 10px 8px rgba(0, 0, 0, 0.4);  */
	
	box-shadow:1px 1px 1px 1px rgba(0, 0, 0, 0.4);  
	
	line-height:14px; /*  org was 24px  */
/*	margin-left: 10px;  /* juryrig to set margins for Class DIrectory on homepage  */
/*	margin-right: 10px;  */
}
.imgborderMarty{
	border-width: 2px;
	border-style: solid;
	background-color: rgba(0, 0, 0, 0.8); /*	background-color:gold;  */
	border-color:#000;  /*  bgcolor=""   #D2D0C4   #CC6600*  #635d52  #666666;*/
	background-position: top center;
	color: #ffffff; /* Navy Blue #ffebb2;  */
	text-align:left;	
	font-weight:800;
	padding-top: 10px;
	padding-left: 10px;
	padding-bottom: 6px;
	padding-right: 10px;
	box-shadow:3px 3px 10px 8px rgba(0, 0, 0, 0.2);  
	border-radius: 10px;
	line-height:24px;
	margin-left: 5px;  /* juryrig to set margins for Class DIrectory on homepage  */
	margin-right: 5px;
}
.imgborderMHx {
	border-width: 2px;
	/*border-style: solid; */
	background-color: #FFD010; /* #C2E9FE; /* #ffebb2;  */
	border-color: #999;  /*  bgcolor=""   #D2D0C4   #CC6600*  #635d52  #666666;*/
	background-position: top center;
	color:#000000;
	color: #000084; /* Navy Blue #ffebb2;  */
	
	text-align:left;	
	padding-top: 10px;
	padding-left: 10px;
	padding-bottom: 6px;
	padding-right: 10px;
		
	border-radius: 40px;
	
/*	box-shadow:3px 3px 10px 8px rgba(0, 0, 0, 0.4);  */
	
	box-shadow:1px 1px 1px 1px rgba(0, 0, 0, 0.4);  
	
	line-height:14px; /*  org was 24px  */
	margin-left: 10px;  /* juryrig to set margins for Class DIrectory on homepage  */
	margin-right: 10px;
}


#indexCenter {
	text-align: center;
	font-weight:800;
	margin-left:7px;
	margin-right:7px;
}

.imgbordergrey {
	border-width: 2px;
	/*border-style: solid; */
	background-color: rgb(234,234,234); /* #ffebb2;  */
	border-color:#999;  /*  bgcolor=""   #D2D0C4   #CC6600*  #635d52  #666666;*/
	background-position: top center;
	color:#000000;
	color: #000084; /* Navy Blue #ffebb2;  */
	
	text-align:left;	
	padding-top: 10px;
	padding-left: 10px;
	padding-bottom: 6px;
	padding-right: 10px;
		
	border-radius: 40px;
	
	box-shadow:3px 3px 10px 8px rgba(0, 0, 0, 0.4);  
	
	line-height:24px;
	margin-left: 10px;  /* juryrig to set margins for Class DIrectory on homepage  */
	margin-right: 10px;  /*  was 200px for full screen  */
}

.imgborderwide {
	border-width: 2px;
	border-style: solid;
	background-color: #fffff9; /* #ffebb2;  */
	border-color:#666666;  /*  bgcolor=""   #D2D0C4   #CC6600*  #635d52  #666666;*/
	background-position: top center;
	color:#000000;
	text-align:left;	
	padding-top: 10px;
	padding-left: 10px;
	padding-bottom: 6px;
	padding-right: 10px;
	box-shadow:2px 2px 10px 4px rgba(0, 0, 0, 0.4);  
	border-radius: 20px;
	line-height:24px;
	margin-left: 10px;  /* juryrig to set margins for Class DIrectory on homepage  */
	margin-right: 10px;
}

.imgborderColor{
	border-width: 2px;
	border-style: solid;
	background-color: rgba(255, 215, 0, 0.8); /*	background-color:gold;  */
	border-color:#666666;  /*  bgcolor=""   #D2D0C4   #CC6600*  #635d52  #666666;*/
	background-position: top center;
	color: #000084; /* Navy Blue #ffebb2;  */
	text-align:left;	
	font-weight:800;
	padding-top: 10px;
	padding-left: 10px;
	padding-bottom: 6px;
	padding-right: 10px;
	box-shadow:3px 3px 10px 8px rgba(0, 0, 0, 0.4);  
	border-radius: 10px;
	line-height:20px;
	margin-left: 5px;  /* juryrig to set margins for Class DIrectory on homepage  */
	margin-right: 5px;
}	

.scraf  img {
	float:left;
	width:70px;
/*	border:#FFFF00;  */
	margin: 20px 0px 0px 20px;  /* TRBL move scarf on Class Directory info  -12 for overlap top margin */
	 -webkit-box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.4);
	  -moz-box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.4);
 	 	box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.4);
	  -webkit-transform: rotate(5deg);  /* opera, Chrome, Safari */
	  -moz-transform: rotate(5deg);  /* firefox */
	  -o-transform: rotate(5deg);
	  -ms-transform: rotate(-10deg);  /* IE 9 */
	  transform: rotate(-10deg);
}

#goldLine a:hover{	
	color: gold;
	background-color: #000080; 
	left:0px;

}	
.datasubtle table {
	width:300px; border: 1px solid black;
	border:dotted;
	border-color: grey;
	width: 300px;
	
}


.datasubtle {
	margin-left: 0px;  /* move the tables to the left   */
	border: 1px thin  dotted #333;
	border-collapse: collapse;
}

.datasubtle.figcaption {
text-align:center;
}

.datasubtle  th {
	 border: 1px solid solid #73C0D4;  
}
.datasubtle td {
	/*border: 1px solid #D6DDE6;  */
	/* display:inline-block;  */
	/* background-color:  #FFD100;  Gold for Blue and Gold!*/
	background-color:  #ffffff; /* Gold for Blue and Gold!*/
	border: 1px dotted #333;
	
	/* text-align: left;  */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	/*border: 1px solid #666666;  */
	/* text-align: left;  */
	font-size: 1em;  
	padding-left: 6px; padding-right: 6px;
	/*//background-color: #E4E4DE;  /*#D2D0C4; 	*/
	
/*	padding-left: 8px; padding-right: 8px; padding-top: 7px; padding-bottom: 7px;  
 -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;   */

	/*
	height: inherit   */
}

.datasubtle.graduate td {
	background-color: red;
	
}

.datasubtle td a:hover  {
/*border-left: 2px solid #CCCCCC;
border-right: 2px solid #CCCCCC;  
	INITIAL BELOW.....
	background-color: #711515; 
	color: #FFF;
	 */
	 display:inline-block;
	background-color:  #000080; /* Gold for Blue and Gold!*/
	color:  #FFD100;  
	/*
	background-color:   #FFD100;   /*  Gold  */
	/*color:  #000080;  /* Gold for Blue and Gold!*/
	font-weight: bold;
	font-family: 'Trebuchet MS', 'Lucida Grande';
	 
}

/*   COMPLETE DATA LIST and OTHERS     */
.thickLine {
        height: 25px;
        border: 0;
        box-shadow: inset 0 12px 12px -12px rgba(9, 84, 132);
      }

.usna59 {
	margin: 0;
	padding: 0 0 0em 0;
	/*text-shadow: 1px 1px 5px rgba(0,0,0,0.5);  */
	/*text-shadow: 1px 1px 5px rgba(255,255,0,0.9);  */
	
	
	color:  #FFD100;  /*  for Blue and Gold!  */
	/*background-color: #0000ff;  */
	background-color:  #000080;      /*Navy color */
/*	background-color:  #0000e3;      /*Blue color */
/*	text-shadow: 1px 1px 5px rgba(255,255,255,0.9);  /* using all white  */
/*	text-shadow: 1px 1px 5px rgba(242,242,242,0.9);   /* using all concrete  */
	
	font-weight: normal;
	font-family: 'Trebuchet MS', 'Lucida Grande'; 
	font-weight:900;
		
	font-size: 190.5%;
	
	/*	color: gold; /* was red  */
	/*background-color:  /* #CCCCCC; /* was gray  */
	/*background-color: #0000ff;
	background-color: #000080;  */
}	 

/* ****************************************************/  /*
The min- prefix, which means "a minimum of," is the same as saying
"greater than or equal to."  So here you're saying if the VIEWPORT is a 
minimum of 40ems wide or if the VIEWPORT is greater than or equal to 
40ems wide.
If the VIEWPORT is any width less than 40ems, then the query is not true.
If it is exactly 40ems wide, or any width greater than 40ems, the tne
query is true.

The opposite,  the max- prefix, means "a maxiumn of" and i the smae as 
saying "less than or equal to."
/* ****************************************************/ 

/* other version  */

/* GOING THRU MEDIA SPECIFICS */
@media screen and (min-width: 100px) and (max-width: 500px) {	 /* SMALL SCREEN - iPhone like */ 
body {
		background-color:  #FCF;   /* corale color #FCC ; */
	/*	font: 1em/1.4 Arial,Verdana, Tahoma, "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",  sans-serif;  */
	
	}
	
.navLg { display:none; }	
	

.flexHeader {   /*container   */
	flex;
	background-color: transparent;
	background-color: #000080;   /*    #FFD100 --GOLD;  */
	width:100%;  */
	flex-direction: row;
	justify-content: flex-start;
	
	/*flex-direction: col;  */
		
	}
	
#flexNoUSNAheader  { display:none;  } 

.navLg {display: none: } 
	
	
#flexBigBanner {
	display:flex;
	/*width: 80%;  */
	width: 500%;
	height:72px;
	flex: 1.5 1 auto;
	
}
	 
	/*	gap: 100px;
align-items: right; 
	
	background-image:  url("banner_USNA_1246x72Gray.png");  */
	
	/*height:100px;  
	width: 70%;  */
	/*flex: 1.5 1 auto;  
	text-align: right;  
	background-color:yellow;  */

	
/* header  {	
   
     background-image:  url("USNA1959.png"); 
  
	/*background-repeat: no-repeat, repeat;
  	background-color: #0F3; 
	width: 1598px;  
	 background-image:  url("USNA1959.png");  */
/*	width: 100%;
	height: 72px;
	position:200px;
	right:0px;
	border: 2px yellow outset;
 }
 

 
 nav { display: none; }	*/
 

 .flexWrapper {
	/*background-color: transparent;
	display: flex;
	justify-content: space-between; 
	width: 100%;
	align-items: flex-start;  */
	flex-direction: column;
 }
.leftFlexItem {
	/* background-color: yellow;   */
	display: flex;
	/*height:100px;  */
	width: 100%;  /*  65% */
	flex: 1.5 0 auto;  
	
}


.rightFlexItem {
	/*  background-color: #34005b;  */
	display: flex;
	/*height:100px;  */
	width: 100%;    /*  35% */
	flex: 1 1 auto;
	text-align: right; 
	/*flex-direction: row;  */

}
}

 /* MEDIUM  SCREEN - iPAD  */
  /* MEDIUM  SCREEN - iPAD  */
@media screen and (min-width: 501px) and (max-width: 900px) {	


/*@media screen and (max-width: 501px)  {	*/

body {
		background-color: #FF0 ;  /* FF0 yellow #F99pink like color  */
		font: 1em/1.4 Arial,Verdana, Tahoma, "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",  sans-serif; 
		
	}
	
.navLg { display:none; }
	
.flexHeader {   /*container   */
	flex;
	background-color: transparent;
	background-color: #000080;   /*    #FFD100 --GOLD;  */
	width:100%;  */
	flex-direction: row;
	justify-content: flex-start;
	
	/*flex-direction: col;  */
		
}
	
	#flexNoUSNAheader  { display:none;  } */
	
	
	
	#flexBigBanner {
	display:flex;
	/*width: 80%;  */
	width: 1000%;
	height:72px;
	flex: 1.5 1 auto;
	 
	/*	gap: 100px;
align-items: right;  */
	
	background-image:  url("banner_USNA_1246x72Gray.png"); 
	
	/*height:100px;  
	width: 70%;  */
	/*flex: 1.5 1 auto;  
	text-align: right;  
	background-color:yellow;  */
}
	
/* header  {	
   
     background-image:  url("USNA1959.png"); 
  
	/*background-repeat: no-repeat, repeat;
  	background-color: #0F3; 
	width: 1598px;  
	 background-image:  url("USNA1959.png");  */
/*	width: 100%;
	height: 72px;
	position:200px;
	right:0px;
	border: 2px yellow outset;
 }
 
*/
  
 /*   nav { display: none; }	  */
  
    .navLg {display: none: } 
  
  
  .flexWrapper {
	background-color: transparent;
	display: flex;
	/*justify-content: space-between;  */
	width: 100%;
	align-items: center;
	flex-direction: row;
 }
.leftFlexItem {
	/* background-color: yellow;  */
	display: flex;
	/*height:100px;  */
	width: 65%;  /*  65% */
	flex: 1.5 0 auto;  
	text-align: left;
}


.rightFlexItem {
	/*  background-color: #34005b;  */
	display: flex;
	/*height:100px;  */
	width: 35%;    /*  35% */
	flex: 1 1 auto;
	text-align: right; 
	flex-direction: row;

}


}

 


@media screen and (min-width: 901px) {
body {
 	 background-color: lightblue;
	 

}
.sidenav { display: none; }

/* nav { display: none; }  */
/*	.topNav {display: none;  } 
	.sidenav {display: none;  }
 	 .icoOpen {display:none;}
	 
	 .topRest {display: none;  } 
*/	 
	/* #flexNoUSNAheader  { display:none;  }   */

.flexWrapper {
	/*background-color: transparent;
	display: flex;
	justify-content: space-between; 
	width: 100%;
	align-items: flex-start;  */
	flex-direction: column;
 }
.leftFlexItem {
	/* background-color: yellow;   */
	display: flex;
	/*height:100px;  */
	width: 100%;  /*  65% */
	flex: 1.2 1 auto;  
	
	
}


.rightFlexItem {
	background-color:white;  
	display: flex;
	/*height:100px;  */
	width: 100%;    /*  35% */
	flex: 1 1 auto;
	text-align: right; 
	/*flex-direction: row;  */

}
  

 
 /* next step is to have the USNA Class of 1959 logo added
  <a href='./../index.php'><img src="m59/images/USNA1959.png"   alt="USNA 1959 Home Page" style="border:double; "/></a>
  */
   
  article { width: 64%; float:left; margin-right: 0; }
  aside { width: 36%; float:right; margin-left: 0;   }
/* 
  nav { display: none; }
  .navLg {display: none: } 
  .navLg {display: none: } 
 
  */
  footer {clear: both }
 
}




@media screen and (min-width: 1250px) {
body {
 	 background-color: #EAEAEA   ;  /*lightbgrey; #CCC */
  
}

.sidenav { display: none; }

 .flexWrapper {
	background-color: transparent;
	display: flex;
	/*justify-content: space-between;  */
	width: 100%;
	align-items: center;
	flex-direction: row;
 }
.leftFlexItem {
	/* background-color: yellow;  */
	display: flex;
	/*height:100px;  */
	width: 65%;  /*  65% */
	flex: 1.5 0 auto;  
	text-align: left;
}


.rightFlexItem {
	/*  background-color: #34005b;  */
	display: flex;
	/*height:100px;  */
	width: 35%;    /*  35% */
	flex: 1 1 auto;
	text-align: right; 
	flex-direction: row;

}
 
 /* next step is to have the USNA Class of 1959 logo added
  <a href='./../index.php'><img src="m59/images/USNA1959.png"   alt="USNA 1959 Home Page" style="border:double; "/></a>
  */
   
  article { width: 64%; float:left; margin-right: 0; }
  aside { width: 36%; float:right; margin-left: 0;      }



}

/* 
 .header, .bannerCoRepeat,
  .LGleft, .main  {
    width: 100%;  */ 
	/* The width is 100%, when the viewport is 800px or smaller 
  }
  
   header  {	
  
	background-image:  url("banner_USNA_1246x72Gray.png");  
	/*background-repeat: no-repeat, repeat;
  	background-color: #0F3; 
	width: 1598px;  
	 background-image:  url("USNA1959.png");  
	width: 100%;
	height: 72px;
	position:200px;
	right:0px;
	border: 2px NAVY BLUE outset;
	background-color: #0F3; 
 
}
*/
  
  
}