/* NAVIGATION BAR STYLES ***********************************************************************************/

/* TOP NAVIGATION BAR ********************************************************/

.navbar00Top{
	margin-top:0.0em;
	margin-bottom:0.4em;
	margin-right: 0.0em;
	margin-left: 0.0em;
	padding: 0;
	font-family: 'Actor', sans-serif;
	font-size: 1.0em;
	text-align:center;
	color: var(--softGrayOuterPlanet);
	display: flex;
	justify-content: space-around;
}

a:link{
	margin-top:1.2em;
	margin-bottom:1.2em;
	margin-right: 0.0em;
	margin-left: 0.0em;
	padding: 0;
	font-family: 'Actor', sans-serif;
	color: var(--softGrayOuterPlanet);
	/*background: rgb(224,224,224);*/ /*outerPlanetLabs light gray*/
	text-decoration: none;
}
a:visited{
	font-family: 'Actor', sans-serif;
	color: var(--softGrayOuterPlanet);
	text-decoration: none;
	padding: 0;
	/*border: 1px solid rgb(0, 0, 255);*//*For Testing Only*/

}
a:hover{
	font-family: 'Actor', sans-serif;
	color: var(--softGrayOuterPlanet);
	text-decoration: none;
	padding: 0;
}
a:active{
	font-family: 'Actor', sans-serif;
	color: var(--softGrayOuterPlanet);
	text-decoration: none;
	padding: 0;
}


/* This is a necessary workaround to allowing the currently viewed page to be colored uniquely*/
/* And note that it had to be placed in this CSS file below all of the links that use it - both below
the standard links and below the navbar00Bottom links for it to work for both...*/
.currentPage a:link{
	color: rgb(100,149,237); /*blueLightKings*/
	display: flex;
	justify-content: space-around;
} 
.currentPage a:visited{
	color: rgb(100,149,237); /*blueLightKings*/
} 

/* END TOP NAVIGATION BAR ****************************************************/



/* BOTTOM NAVIGATION BAR *****************************************************/
.navbar00Bottom{
	padding-top:1.0em;
	margin-top:2.0em;
	margin-bottom:2.0em;
	margin-left:0;
	margin-right:0;
	font-family: 'Actor', sans-serif;
	font-size: 0.9em;
	color: rgb(51,51,51);/*grayCharcoal*/
	text-align:center;
	border-top: 1px solid rgb(100,149,237); /*blueLightKings*/

}

/* ORDER IS IMPORTANT: MUST BE link, then visited, then hover, then active */
.navbar00Bottom a:link{
	margin-top:1.5em;
	margin-bottom:1.5em;
	margin-right:1.5em;
	margin-left:1.5em;
	padding: 0;
	font-family: 'Actor', sans-serif;
	color: rgb(51,51,51);/*grayCharcoal*/
	/*background:rgb(255,255,255); *//*outerPlanetLabs white*/
	text-decoration: none;
}
.navbar00Bottom a:visited{
	font-family: 'Actor', sans-serif;
	color: rgb(51,51,51);/*grayCharcoal*/
	text-decoration: none;
	/*border: 1px solid rgb(0, 0, 255);*//*For Testing Only*/
}
.navbar00Bottom a:hover{
	font-family: 'Actor', sans-serif;
	color: rgb(120,120,120);/*grayLight*/
	text-decoration: none;
}
.navbar00Bottom a:active{
	font-family: 'Actor', sans-serif;
	color: rgb(120,120,120);/*grayLight*/
	text-decoration: none;
}


/* This is a necessary workaround to allowing the currently viewed page to be colored uniquely*/
/* And note that it had to be placed in this CSS file below all of the links that use it - both below
the standard links and below the navbar00Bottom links for it to work for both...*/
.currentPageBNavBar a:link{
	color: rgb(100,149,237); /*blueLightKings*/
} 
.currentPageBNavBar a:visited{
	color: rgb(100,149,237); /*blueLightKings*/
} 
/* END BOTTOM NAVIGATION BAR ****************************************************/

/* END NAVIGATION BAR STYLES ***********************************************************************************/



/*
We can then add our alternate CSS for small screen and width devices inside the curly braces. By using the cascade we can simply overwrite any styles rules we set for desktop browsers earlier in our CSS. As long as this section comes last in your CSS it will overwrite the previous rules. So, to linearize our layout and use a smaller header graphic I can add the following:
*/
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
.navbar00Top{
	margin-right:0.2em;
	margin-left:0.2em;
}
a:link{
	margin-right:0.8em;
	margin-left:0.8em;
}

.navbar00Bottom{
	margin-right:0.2em;
	margin-left:0.2em;
}

/* ORDER IS IMPORTANT: MUST BE link, then visited, then hover, then active */
.navbar00Bottom a:link{
	margin-right:0.8em;
	margin-left:0.8em;
}

}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}