/*All the CSS related to the main DIVs of the web page, and all responsive specific elements*/
/* Note that # are ID CSS properties, e.g., id='loginDIV'  (one element only) */

/* [[ loginDIV ]] is the top blue strip with the login form + login btn = OR - your login name + logout btn*/

#loginDIV {
	margin: 0;
	width: 100%;
	padding: 0;
	background-color: #103596; /*var(--OAME-blue); */
	height: 30px;
}

#login {
	margin: 0;
	float: right;
	background-color: #103596; /*var(--OAME-blue); */
	color: white;
	padding: 4px
}

#login form {
	font-family: Verdana;
	font-size: 10px;
}

#loginUserNameWide {
	margin-right: 5px;
	float: left;
}
#loginUserNameTiny {
	margin-right: 5px;
	float: left;
}
#loginOAMEtinyBanner {
	display: none;
	padding-left: 2px;
}

/* [[ HeaderDIV ]] is the fat white strip with the OAME logo and name - gets reduced when screen is shrunk*/
#HeaderDIV {
	position: relative;
}
#headerOAMEacronym {
	display: inline;
}
#headerOAMElogo3D {
	display: inline;
}
#headerOAMEfullNameImage {
	display: inline;
}
#headerOAMEfullNameText {
	display: none;
	position: absolute;
	left: 2px;
	bottom: 9px;
	font-size: 12px;
	padding-left: 15px;
}
#headerOAMEfullNameTextNoBR {
	display: none;
}

#headerFacEdLink {
	padding-right: 5px;
}

.clearfix {
    overflow: auto;
}

/* [[ NavDIV ]] is the top black menu strip with the primary functions / main areas - gets reduced to an icon bar when super shrunk */
#NavDIV {
	position: relative;
	padding-left: 5px;
	padding-right: 5px;
}
.navButton {
	display: none;
	float: left;
	overflow: auto;
	top:15px;
}

.navButton:hover {
   /*padding: 1px 1px 1px 1px;*/
   background-color: red;
}

#NavEllipsisOtherMenu {
	position: absolute;
	right:2px;
	top:0;
	/*float: right;
	top: -42px;*/
}

#NavBarMenuPix{
	display: none;
}

.verticalAlignMiddle {
	vertical-align: middle;
	padding-bottom: 10px;
}
/* [[ mainContentContainerDIV ]] is the main area - originally on full screens divided into 3 areas:
   - Main Menu vertical black menu options and, if logged in, Member Links and other ones if applicable
   - Content area for the actual page info to be displayed
   - OtherStuff side panel on the right (Prez Msg, Twitter feed, quick links to MCIS, Next Conference, etc...)

   IF screen is shrunk, the OtherStuff right panel is the first to go - and is replaced by the NavEllipse button in the NavDIV
   IF screen is super shrunk, the MainMenu is also iconized as a Hamburger btn in the NavDIV
*/

#mainContentContainerDIV {
/*	padding-left: 180px;
	padding-right: 200px; */
	display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 98%; /*Changing width from 100% to 98% seems to remove horizontal scroll bar and slight overhang issue*/
	/*position: relative;*/
	/*margin: 0;*/
	padding-left: 5px;
	padding-right: 5px;

	/*From #content in general.css*/
	/*padding: 10px;*/
    /*margin-left: auto;
    margin-right: auto;
    margin-top: 0px;*/
    /*width: 94%;*/
}

#mainContentFullWidth {
	flex:98%;
}

#mainMenuLeftPanelDIV {
	/*flex: 20%;*/
	display: inline-block;
	/*background-color: lightgreen;*/
	padding-right: 10px;
	/*position: absolute;*/
}

#mainContentCentreDIV {
	/*flex: 55%;*/
	/*display: inline-block;*/
	/*position: absolute;*/
	top:0;
	padding-left: 0px;
	padding-right: 0px;
}

#otherStuffRightPanelDIV {
	/*flex: 25%;*/
	/*display: inline-block;*/
	/*position: absolute;*/
	top:0px;
	right:2px;
	padding-left: 10px;
}


/*
	The following two DIVs are repeats of the Left and Right panels that will flyout when the icons for them are pressed in smaller versions of the page.
*/

#mainMenuPanelFromButton {
	position: absolute;
	left:2px;
	background-color: #FFFFFF;
	padding-right: 5px;
	padding-bottom: 20px;
}
#otherStuffPanelFromButton {
	position: absolute;
	right:5px;
	background-color: #FFFFFF;
}


.displayNone {
	display: none;
}
.displayInline {
	display: inline;
	/*float: right;	*/
}

/*  MEDIA QUERIES - are the heart and soul and brains behind the responsive design.
	Basically, they determine what DIVs or other elements are visible or hidden, based on the screen width.

	Currently: 3 settings.
	* Full size (above 840px) - all the defaults (and loginUserNameTiny hidden)
	* Medium size (between 621px and 840px) - Full Name large image replaced by text, RightPanel replaced by NavEllipsis btn
	* Small size (below 621px) - loginUserNameTiny replaces loginUserNameWide, OAME acronym and logo hidden from header, show in loginDIV, MainMenu replaced by Hamburger icon in NavDIV, NavBar menu changes from text menu (plain) to icon menu (pix)
*/

@media only screen and (min-width: 621px) {
	#loginUserNameTiny {display:none;}
	#loginUserNameWee {display:none;}
}

@media only screen and (min-width: 1200px) {
	.grid-container-gallery {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}
	.grid-container-videos {grid-template-columns: 1fr 1fr 1fr ;}
}

@media only screen and (min-width: 1500px) {
	.grid-container-gallery {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}
	.grid-container-videos {grid-template-columns: 1fr 1fr 1fr 1fr;}
}


@media only screen and (max-width: 840px) {
	#headerOAMEfullNameImage {display:none;}
	#headerOAMEfullNameText {display: inline;}
	#NavEllipsisOtherMenu {display: inline;}
	#otherStuffRightPanelDIV {display: none;}
	#centerpane {
		margin: 0px 0px;
		padding-right: 0px;
	}
}

@media only screen and (max-width: 700px) {
	.grid-container-gallery {grid-template-columns: 1fr 1fr 1fr 1fr;}
	.grid-container-videos {grid-template-columns: 1fr 1fr ;}
}

@media only screen and (max-width: 650px) {
	#loginOAMEtinyBanner {display: inline;}
	#loginUserNameWide {display:none;}
	#loginUserNameTiny {display:inline;}
	#loginUserNameWee {display:none;}

	#headerOAMEfullNameText {display: none;}
	#headerOAMEfullNameTextNoBR {display: inline; padding-left: 2px;}
	#headerOAMEacronym {display: none;}
	#headerOAMElogo3D {display: none;}
	#headerFacEdLink {padding-right: 2px;}

	#NavDIV { padding-left: 2px; padding-right: 2px;}
	#NavBarMenuPlain {display: none;}
	#NavBarMenuPix {display: inline;}
	#NavHamburgerMainMenu {display: inline;}

	#mainContentContainerDIV { padding-left: 2px; padding-right: 2px;}
	#mainMenuLeftPanelDIV {display: none;}
	/*#mainContentCentreDIV { padding-left: 5px;}*/

	#otherStuffPanelFromButton {right: 2px;}
}


@media only screen and (max-width: 450px) {
	.grid-container-gallery {grid-template-columns: 1fr 1fr 1fr;}
	.grid-container-videos {grid-template-columns: 1fr ;}
	.grid-container-archives-table{grid-template-columns: 1fr 1fr;}
	.input-city{ width:120; }
	.grid-container-creditCard{grid-template-columns: auto;}
	.grid-container-gazetteSearch{grid-template-columns: auto;}
	.item-shopFront-td-name {display: none;}
	.item-shopFront-th-name {display: none;}
	.grid-container-shopFront {grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
	.item-filler-6cols {grid-column-end: span 5; }
	.input-medium {
		width:200px;
	}
	.input-long {
		width:200px;
	}
	.input-short {
		width:100px;
	}
}

@media only screen and (max-width: 390px) {
	.grid-container-gallery {grid-template-columns: 1fr 1fr;}
	.grid-container-videos {grid-template-columns: 1fr }
	.grid-container-archives-table{grid-template-columns: 1fr;}
	.ematics {display: none;}
	.profileTextInput {width: 280px;}
	.item-shopFront-td-name {display: none;}
	.item-shopFront-th-name {display: none;}
	.grid-container-shopFront {grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
	.item-filler-6cols {grid-column-end: span 5; }
	.grid-container-creditCard{grid-template-columns: auto;}
	.grid-container-gazetteSearch{grid-template-columns: auto;}
	.input-medium {
		width:100px;
	}
	.input-long {
		width:100px;
	}
	.input-short {
		width:70px;
	}

	#loginUserNameWide {display:none;}
	#loginUserNameTiny {display:none;}
	#loginUserNameWee {display:inline;}

	.NavDivIcon40px { width: 32px; }
	.NavDivIcon { width: 80%; }
	#mainmenuPix.lavaLampNoImage { width: 245px; height: 24px; padding: 2px; }
	#mainmenuPix.lavaLampNoImage li a { margin: auto 4px; }
}


.supports4grid , .supports4flex , .supports4gridAltNeeded {
	background-color: red;  /* default is negatory - only turns pository if passes the @support test */
}

@supports (display: flex) {
	.supports4flex {background: green;}
}
@supports (display: grid) {
	.supports4grid {background: green;}
}
@supports not (display: grid) {
	.supports4gridAltNeeded {background: lime;}

	.grid-container-shopFront {display: none;}
	.NOgrid-container-shopFront {display: inline-block;}
	.item-gallery { display: inline-block; }
}