/* ============================================================================== 
   File: scr_toolbar.css
	- Stylesheet for TipTool TOOLBARS 
		- to make the image look like a button
		- to make change image & label upon li-hover/focus
	- Author: Daniel Hugentobler (DH)
	- created: 30.JAN.2019
	- amended: -
   ============================================================================== */
/* 
HTML-structure:
ul.toolbar
	li.linkIcon/funcIcon 
		span.btn
			img.js_icon/a img.btn
			span.label
#toolbar {
	display: inline-block;
}
*/
.dummy {
	display: inline;
	margin-left: 2rem;
}
.dummy li {
	align-content: center;
	height: 7rem;
	width: 12rem;
}
.linkIcon {
	position: relative;
}
.toolbar li {
	display: inline-block;
	min-width: 3rem;
	max-width: 5rem;
	margin-right: 1rem;
	margin-bottom: 1rem;
	text-align:center;
	vertical-align: top;
	-webkit-hyphens: manual;	/* for ­ */
	-moz-hyphens: manual;
	-ms-hyphens: manual;
	-o-hyphens: manual;
	hyphens: manual;
	cursor: pointer;
}
/* span.btn: */
/*a.aLink+.btn img.js_icon,
.toolbar .funcIcon img.btn,
.linkIcon img.btn {*/
a.btn, 
.toolbar .btn,
.tblDisplay .btn {
	position: relative;			/* for image's positioning */
	display: inline-block;
	min-height: 2.4rem;
	max-height: 2.4rem;
	min-width: 2.4rem;
	max-width: 2.4rem;
	border-radius: 50%;
}
/* button's image */
/*.btn a img.js_icon,*/ /* no effect */
.btn img.js_icon {
	position: absolute;
	top: 0.2rem;
	left: 0.19rem;
	max-height: 1.4rem;
	max-width: 1.4rem;
	height: 1.4rem;
	width: auto;
}
span.toolbar .btn,
.pushButtons .btn {
	vertical-align: middle;
}
.my_breadcrumb {
	font-weight: bold;
}
/* ----------------------------------------------------------------------------- */
/* INDIVIDUALLY position specially SIZED images (due to img's non-square-format) */
/* ----------------------------------------------------------------------------- */
#cmdEditGrp img,
.btn img.cmdEditGrp {
	left: 0.2rem;
}
#cmdCalendar img,
.btn img.cmdCalendar {
	left: 0.24rem;
}
.cmdScroll img {
	left: 0.5rem;
	top: 0.5rem;
}
#cmdReports img,
.btn img.cmdReports,
#cmdExample img,
.btn img.cmdAddGroup,
#cmdAddGroup img,
.btn img.cmdDelete,
#cmdDelete img,
.btn img.cmdFullHistory,
#cmdFullHistory img,
.btn img.cmdHeadline,
#cmdHeadline img,
.btn img.cmdHistory,
#cmdHistory img {
	left: 0.3rem;
}
#cmdAddPart img,
.btn img.cmdAddPart,
#cmdAddFavorite img,
.btn img.cmdAddFavorite,
#cmdLock img,
.btn img.cmdLock {
	left: 0.4rem;
}
#cmdCalcGame img,
.btn img.cmdCalcGame,
#cmdCalcResult img,
.btn img.cmdCalcResult,
#cmdHighScreen img,
.btn img.cmdHighScreen {
	left: 0.45rem;
}
#cmdBulkMail img,
.btn img.cmdBulkMail {
	max-height: 1.1rem;
	top: 0.4rem;
}
#cmdBulkMailAdm img,
.btn img.cmdBulkMailAdm {
	top: 0.15rem;
}
#cmdLinksMaintain img,
.btn img.cmdLinksMaintain {
	width: 1.2rem;
	height: 1.6rem;
	max-height: 1.6rem;
	left: 0.38rem;
	top: 0.06rem;
}
#cmdLinksView img,
.btn img.cmdLinksView {
	width: 1.1rem;
	height: 1.6rem;
	max-height: 1.6rem;
	left: 0.36rem;
	top: 0.1rem;
}

#cmdEmptyTips img,
.btn img.cmdEmptyTips {
	left: 0.4rem;
	top: 0.1rem;
}
#cmdAddYourself img,
.btn img.cmdAddYourself {
	max-height: 1.2rem;
}
#cmdInvite img,
.btn img.cmdInvite, 
#cmdInvitation img,
.btn img.cmdInvitation {

	max-height: 1rem;
	top: 0.3rem;
}
a.contact > img {
	max-height: 0.8rem;
}
#cmdAddGame img,
.btn img.cmdAddGame {
height: 1.6rem;
	max-height: 1.6rem;
	max-width: 1.6rem;
	left: 0.1rem;
	top: 0;
}
#cmdLoadAll img,
.btn img.cmdLoadAll,
#cmdUnloadAll img,
.btn img.cmdUnloadAll,
.btn img.cmdLoadOne,
.btn img.cmdUnloadOne {
	left: 0.36rem;
}
#cmdEdit img,
.btn img.cmdEdit {
	left: 0.36rem;
	top: 0.12rem;
}
#cmdEditAlias img,
.btn img.cmdEditAlias {
	height: 1.2rem;
}
#cmdBulkInvite img,
.btn img.cmdBulkInvite {
/*	height: 1.2rem;*/
}
#cmdZeroOutAllTips img,
.btn img.cmdZeroOutAllTips {
	left: 0.12rem;
}
.noView {
	min-height: 1.6rem;
	max-height: 1.6rem;
	min-width: 1.6rem;
	max-width: 1.6rem;
}

.toolbar li a {
	display: inline-block;		/* allow sizing */
	/* ensure alignment with non>a entries all over the toolbar: */
	height: 0;
	margin: 0;
	padding: 0;
}
.toolbar li label {
	display: inline;
	font-weight: normal;
}
/* change the label's color */
.toolbar li:focus,
.toolbar li:hover {
	color: darkolivegreen;
}
.byNight .toolbar li:focus,
.byNight .toolbar li:hover {
	color: #C9FFC0;				/* very light green */
}
/* change icon's background upon focus/hover of its parent li/a
	same settings as in scr_input: .btn:hover */
a.aLink:focus > .btn,
a.aLink:hover > .btn,
.toolbar li:focus > .btn,
.toolbar li:hover > .btn,
.toolbar li:focus > a .btn,
.toolbar li:hover > a .btn {
	-webkit-background-image: linear-gradient(olivedrab, darkolivegreen, black);
	-moz-background-image: linear-gradient(olivedrab, darkolivegreen, black);
	-ms-background-image: linear-gradient(olivedrab, darkolivegreen, black);
	-o-background-image: linear-gradient(olivedrab, darkolivegreen, black);
	background-image: linear-gradient(olivedrab, darkolivegreen, black);
}
.byNight a.aLink:focus > .btn,
.byNight a.aLink:hover > .btn,
.byNight .toolbar li:focus > .btn,
.byNight .toolbar li:hover > .btn,
.byNight .toolbar li:focus > a .btn,
.byNight .toolbar li:hover > a .btn {
	-webkit-background-image: linear-gradient(forestgreen, black);
	-moz-background-image: linear-gradient(forestgreen, black);
	-ms-background-image: linear-gradient(forestgreen, black);
	-o-background-image: linear-gradient(forestgreen, black);
	background-image: linear-gradient(forestgreen, black);
	-webkit-box-shadow: 0 0 2rem lime;		/* lime glow */
	-moz-box-shadow: 0 0 2rem lime;
	box-shadow: 0 0 2rem lime;
	color: lightgray;
}
/* prevent regular link's background*/
a.aLink:active,
a.aLink:focus,
a.aLink:hover {
	background-color: transparent;
}