/*
	ncvp_live_misc.css

	I tried to move the common footer styles into this file but I couldn't make @media queries in two files work,
		so they're now all in the theme css files.
*/

/* Sitemap */

div#nlm_sitemap ul > li {
	margin-left: 50px;
}

div#nlm_sitemap a {
	color: #00f;
}

/* Text styles */

/* Useful for highlighting debugging statements */
.ncvp-dbg {
	background-color: #f00;
	color: #fff;
	font-style: oblique;
	font-size: 80%;
}

/* Not red, 'cos I can't see that */
.ncvp-rbric {
	background-color: #faa;
	border-radius: 15px;
	padding: 10px 20px;
	font-family: "Comic Sans MS", "Comic Neue", sans-serif;
	font-size: 150%;
	line-height: 150%;
	width: 60%;
	margin: auto;
	float: center;
}

/* First needed in some CAS rubrics */
div.ncvp-rbric ul { 
	list-style-position: inside; 
	margin: 0;
}

/* Developers rubric */
.ncvp-devr,
.devr {
	background-color: #ff0;
	color: #00f;
	font-style: normal;
	font-size: 100%;
	border-radius: 5px;
	font-family: "Comic Sans MS", "Comic Sans, cursive";
}

/* Blinking */

.ncvp-blnk {
/*	animation: ncvp-blnk-rule 1s infinite alternate;*/
	animation: ncvp-blnk-rule-2 1s step-end infinite;
}

/* Rather too subtle for CAS members */
@keyframes ncvp-blnk-rule {
	from {background-color:#000; color:#fff} 
	to {background-color:#fff; color:#000}
}

/* Should be visible */
@keyframes ncvp-blnk-rule-2 {
	0% {background-color:#000; color:#fff; border-radius: 5px; padding: 0 5px} 
	50% {background-color:#fff; color:#000}
}

/* Archive — obsolete. Now using blocks on archive page rather than shortcode */

div.nlm-arch div {
	display: inline-block;
	vertical-align: top;
/*
	margin-right: 2em;
	width: 30%;
*/
}

div.nlm-arch ul {
	list-style-type: none;
	display: inline-block;
/*
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(132px, 1fr)); 
*/
}

div.nlm-arch li {
	text-align: left;
	padding: .2em 0;
/*
	margin-right: 1em;
	vertical-align: top;
*/
}

/* Sprite icons */

/*
	This works in testing. In practice it has to be injected dynamically to get the right plugin url
	See ncvp-live-misc.php nlm_enqueue_icon.css
.ncvp-icon a {
	content: url("http://localhost/wp/wp/wp-content/plugins/ncvp-live-misc/svg-icon-ncvp.svg");
	width: 19px;
	height: 19px;
	-webkit-border-radius: 2px;
	border-radius: 2px;   
}
*/

.ncvp-sprites ul {
	list-style: none; 					/* No bullets */
}

.ncvp-sprites li {
/*	float: left;							 Horizontal rather than vertical list */
	padding: 0 20px;						/* To separate the icons */
}

.ncvp-sprites svg {
	height: 1.5em;							/* Size of icon. Aspect ratio is preserved */
	width: 3em;								/* Width of background. Leave it out and it defaults to something like 19em */
	fill: lightgreen;

	background-color: #999;			/* So we can see the extent of the icon */
}

.ncvp-sprites svg:hover {
	fill: blue;
}