/* ============================================================================== 
   File: scr_link.css
	- Stylesheet for ArchiComix LINKS (taken from TipTool and amended)
	- Author: Daniel Hugentobler (DH)
	- created: 25.SEP.2020
	- amended: 09.JUN.2021, iverted colors, new: blue for unvisited, orange for visited
   ============================================================================== */

 a {
	text-decoration: none; 			/* do NOT underline, better use a border-bottom for readability */
	outline: none;
	cursor: pointer;				/* hand */
	padding: 0.2rem;
	border: none;
	border-radius: 0.8rem;
	background-color: transparent;
	color: #4070a0;				/* shade of cornflowerblue for better contrast - also ok */
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
/* wrapped link: ensure an unstaggered backlighting */
td a {
	display: inline-block;
}
.pen_link {
	display: inline-block;			/* prevent line break of pen and its link! */
}

.collexp a {
	white-space: normal;
	line-height: 1rem;
}
.byNight a {
	color: #8abeff;				/* tint of cornflowerblue */
}
a:visited {
	color: #c08000;
}
.byNight a:visited {
	color: navajowhite;
}

a:focus,
a:hover {
	background-color: #3883d8;	/* darker shade for better contrast */
	background-color: #4070a0;
	color: white;
}
.byNight a:focus,
.byNight a:hover {
	background-color: #3883d8;	/* darker shade for better contrast */
	color: white;
}
a:active, 
.byNight a:active {
	background-color: cornflowerblue;
	color: white;
}

/* override any specific background-color for cmd-links (icon-button) */
a.cmd:link,
a.cmd:visited,
a.cmd:focus,
a.cmd:hover,
a.cmd:active {
	background-color: inherit;
}

/* override background color for icons being used as the link's content */
a.iconLink,
a.iconLink:focus,
a.iconLink:hover,
a.iconLink:active,
a.teamLink,
a.teamLink:focus,
a.teamLink:hover,
a.teamLink:active,
.tblDisplay a.teamLink,
.tblDisplay a.teamLink:focus,
.tblDisplay a.teamLink:hover,
.tblDisplay a.teamLink:active {
	background-color: transparent;
}

/* visited links in header/footer must NOT change their color */
header a:link,
footer a:link,
header a:visited,
footer a:visited,
.byNight header a:visited,
.byNight footer a:visited,
.byNight header a:link,
.byNight footer a:link {
	color: #ffbf00; /* amber */
	padding-left: 0.3rem;
	padding-right: 0.3rem;
}

header a:focus,
header a:hover,
footer a:focus,
footer a:hover,
.byNight header a:focus,
.byNight header a:hover,
.byNight footer a:focus,
.byNight footer a:hover {
	color: black;
	background-color: #ffbf00; /* amber */
}

.byNight header a:focus,
.byNight header a:hover,
.byNight footer a:focus,
.byNight footer a:hover {
	-webkit-box-shadow: 0 0 2rem orange;	/* glow */
	-moz-box-shadow: 0 0 2rem orange;
	box-shadow: 0 0 2rem orange;
}
/* invert the colors */
header a:active,
footer a:active,
.byNight header a:active,
.byNight footer a:active {
	color: white;
	background-color: cornflowerblue;
}
.byNight header a:active,
.byNight footer a:active {
	-webkit-box-shadow: 0 0 2rem cornflowerblue;	/* glow */
	-moz-box-shadow: 0 0 2rem cornflowerblue;
	box-shadow: 0 0 2rem cornflowerblue;
}
/* login-link must be more prominent */
header a.login:link {
	display: inline-block;
	padding: 0.2rem 0.8rem 0.2rem;
}

/* override any specific background-color for cmd-links (icon-button) */
.byNight a.cmd:link,
.byNight a.cmd:visited,
.byNight a.cmd:focus,
.byNight a.cmd:hover,
.byNight a.cmd:active {
	background-color: inherit;
}

/* ---------------------- */
/*     links in TABLES    */
/* ---------------------- */
/* suppress darkening for icon-links */
.td_icon a:active,
.td_icon a:hover,
.td_icon a:focus {
	background-color: transparent;
}

/* link in a th is a sort-arrow */
th a:link,
th a:visited,
th a:focus,
th a:hover,
th a:active {
       background-color: transparent;
       color: navajowhite;
}
th a:focus,
th a:hover,
.byNight th a:focus,
.byNight th a:hover {
       color: darkorange;
}
th a:active,
.byNight th a:active {
       background-color: transparent;
       color: #ffbf00; /* amber */
}

td a.my_tips {
	color: #8B0000;						/* dark red */
	font-weight: bold;
}
td a.my_tips:focus,
td a.my_tips:hover {
	background-color: #8B0000;			/* dark red */
	color: white;
}
.byNight td a.my_tips {
	color: #ffbf00; /* amber */
}
.byNight td a.my_tips:focus,
.byNight td a.my_tips:hover,
.byNight th a:active {
	color: black;
	background-color: #ffbf00; /* amber */
	-webkit-box-shadow: 0 0 2rem orange;	/* glow */
	-moz-box-shadow: 0 0 2rem orange;
	box-shadow: 0 0 2rem orange;
}


/* ---------------------- */
/* emphasize ToC: MY TIPS */
/* ---------------------- */
#navi_tips li.my_tips a,
#navi_tips li.my_tips a:visited {
	color: olivedrab;
	font-weight: bold;
}
#navi_tips li.my_tips a:hover,
#navi_tips li.my_tips a:focus {
	background-color: #8B0000;			/* dark red */
	color: white;
}
#navi_tips li.my_tips a:active {
	color: black;
	background-color: #ffbf00; /* amber */
}
/* special coloring for the link to "my-tips" */
.byNight #navi_tips .my_tips a,
.byNight #navi_tips .my_tips a:visited {
	color: #ffbf00; /* amber */
}
.byNight #navi_tips .my_tips a:hover,
.byNight #navi_tips .my_tips a:focus {
	color: black;
	background-color: #ffbf00; /* amber */
	-webkit-box-shadow: 0 0 2rem orange;	/* glow */
	-moz-box-shadow: 0 0 2rem orange;
	box-shadow: 0 0 2rem orange;
}
.byNight #navi_tips .my_tips a:active {
	color: #ffbf00; /* amber */
	background-color: black;
}

/* -------- */
/* TOOLBARS */
/* -------- */
/* override FF side effect for day and night */
.toolbar li a,
.toolbar li a:active,
.toolbar li a:focus,
.toolbar li a:hover,
#toolbar li a:hover {
	background-color: inherit;
}