topHeader{
	font-family:arial;
	color:white;
	position:sticky;
	width:100%;
	top:0;
	background:linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
	z-index:103;
	display:flex;
	flex-direction:column;
	border-bottom:thin solid black;
}
logoholder{
	display:flex;
	align-items:center;
margin-bottom:5px;
}
topmenubutton{
	display:none;
}
logo{
	flex:20;
	font-size:1.4em;
	color:white;
	font-weight:bold;
	text-shadow:-1px 1px 1px black;
	font-family:arial;
	display:inline-block;
	letter-spacing:.5px;
	padding:5px 20px;
}
topLinks{
	flex:99;
	display:flex;
}
topLinks a , [syncHolder]{
	padding:1px 5px;
	text-decoration:none;
	color:white;
	font-weight:bold;
	font-family:arial;
	font-size:12pt;
	text-shadow: 1px 1px 1px black;
	padding:5px 10px;
	border-radius:2px;
	display:inline-block;
	border-radius:0px;
}
topLinks a:hover, [syncHolder]:hover{
	display:inline-block;
	padding:5px 10px;
	text-decoration:none;
	color:white;
	font-weight:bold;
	font-family:arial;
	font-size:12pt;
	background:rgba(0,0,0,0.5);
	transition:background 0.5s;
}







topLinks a[currentLink]{
	background:rgba(0,0,0,0.15);
	border:thin solid black;
}
topLinks a[currentLink]:hover{
	background:rgba(0,0,0,0.5);
}



optionSelectorBar , topmenuselectorholder{
	display:flex;
	font-family:arial;
}
optionselectorbarholder{
	display:flex;
	width:100%;
	font-family:arial;
	white-space:nowrap;
}
topBarOption , topMenuSelector{
	height:auto;
	min-height:12px;
	display: flex;
	align-items: center;  
	padding:2px 10px 0px;
	position:relative;
	cursor:pointer;

	background: rgba(0,0,0,0.25);
	border:thin solid white;
	border-bottom:none;
	border-radius:5px 5px 0px 0px;
	margin-left:3px;
}

topMenuSelector{
	background: rgba(255,255,255,0.25);
}
topMenuSelector:hover{
	background: rgba(0,0,0,0.5);
}
topBarOption:hover{
	background: rgba(0,0,0,0.5);
}



topBarOption i{
margin-right:4px;	
}

topBarOption[jsaction="addNewCallButton"]{
	padding:2px 20px 0px;
	background:linear-gradient(to bottom, #5BEB60 5%, #2DCC32 100%);
	background: var(--addNewItemBG);
	background-color:#AEF078;
	text-shadow:1px 1px 0px black;
	font-family:arial;
	font-weight:bold;
	border:thin solid black;
	border-bottom:0px;
	letter-spacing:1px;
	cursor:pointer;
	border-radius:0px 5px 0px 0px;
	box-shadow:inset 4px 4px 6px rgba(255,255,255,0.5);
	margin-left:0;
}
topBarOption[jsaction="addNewCallButton"]:hover{
	border:thin solid white;
	border-bottom:none;
	box-shadow:none;
	background: var(--addNewItemBGHover)	
}

topMenuSelector{
	position:relative;
}


.barMenu{
	z-index:100;
	cursor:pointer;
	position:relative;
	width:auto;
	display:flex;
margin-left:auto;
    justify-content: flex-end;	
}
.barMenuItems{
	display:none;
}
.barMenu:hover .bars{
	background: rgba(0,0,0,0.25);
}
.barMenu:hover .barMenuItems{
	display:flex;
	position:absolute;
	top:0%;
	right:0;
	padding-top:calc( 22px + 7px );
}

.barMenuItemsHolder{
	white-space:nowrap;
	display:flex;
	flex-direction:column;
	border:thin solid white;
	background: linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
}


.barMenu .bars{
	border:thin solid white;
	border-radius:5px;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:3px 10px;
	z-index:101;
}