/*


NO LONGER IN USE! USE COPY IN PIDISPLAY


The space for a wave menu is a horizontal strip 1270x50 and has 5 sections:
 help left, menu left, center, menu right, help right
Inside menu left and menu right are zero or more menu items

The CSS here will enforce this layout

This works in cooperation with wavemenu.js

Copyright Lee McLoughlin lee@lmmrtech.com 2017
*/

.waveMenu {
	width: 1270px;
	max-width: 1270px;
	height: 50px;
	max-height: 50px;
	overflow: hidden;
	/* was #bff7b2 */
	background-color: black;
	color: white;
	text-align: center;
	font-family: arial;
}

.waveMenuHelpLeft {
	float: left;
	width: 200px;
	height: 50px;
	display: flex;
    align-items: center;
	color: green;
	font-weight: bold;
}

.waveMenuLeft {
	float: left;
	width: 385px;
	height: 50px;
	display: flex;
    align-items: center;
}

.waveMenuCenter {
	float: left;
	background: lightblue;
	width: 100px;
	height: 50px;
	font-size: 80%;
}

.waveMenuRight {
	float: left;
	width: 385px;
	height: 50px;
	display: flex;
    align-items: center;
}

.waveMenuHelpRight {
	float: right;
	width: 200px;
	height: 50px;
	display: flex;
    align-items: center;
	color: green;
	font-weight: bold;
}


.waveMenuHelpLeftItem {
	flex: 1;
}

.waveMenuHelpRightItem {
	flex: 1;
}

.waveMenuLeftItem {
	background-color: white;
	flex: 1;
}

.waveMenuRightItem {
	background-color: white;
	flex: 1;
}

/* While testing I simulate waves with buttons */
.waveButtons {
	width: 1270px;
	text-align: center;
}

.waveButtonsInner {
	margin: 0 auto;
	display: inline-block;	
}

/* Testing options for showing the selected item - see wavemenu.js */

/* Animated border colors */
@-webkit-keyframes borderblink {
	0%   { border-color: yellow; }
	50%  { border-color: black;}
	100% { border-color: yellow; }
}
@-moz-keyframes borderblink {
	0%   { border-color: yellow; }
	50%  { border-color: black;}
	100% { border-color: yellow; }
}
@-ms-keyframes borderblink {
	0%   { border-color: yellow; }
	50%  { border-color: black;}
	100% { border-color: yellow; }
}

.waveItemHighlightBorderBlink {
	border: 4px solid black;
	
	-webkit-animation: borderblink 3s infinite;
	-moz-animation:    borderblink 3s infinite;
	-ms-animation:     borderblink 3s infinite;
}

.waveItemHighlightBorderSolid {
	border-style: solid;
	border-width: 4px;
	border-color: yellow;
}

/* Animated background colors */
@-webkit-keyframes backgroundblink {
	0%   { background-color: yellow; }
	50%  { background-color: white;}
	100% { background-color: yellow; }
}
@-moz-keyframes backgroundblink {
	0%   { background-color: yellow; }
	50%  { background-color: white;}
	100% { background-color: yellow; }
}
@-ms-keyframes backgroundblink {
	0%   { background-color: yellow; }
	50%  { background-color: white;}
	100% { background-color: yellow; }
}

.waveItemHighlightBGBlink {	
	-webkit-animation: backgroundblink 0.7s infinite;
	-moz-animation:    backgroundblink 0.7s infinite;
	-ms-animation:     backgroundblink 0.7s infinite;
}

.waveItemHighlightBG {
	background: yellow;
}

/* testing:
#item3 {
	font-size: 200%;
}
*/

.unstyled-button {
  border: none;
  padding: 0;
  background: none;
}