/*
* common.css - Common web elements
* Copyright 2019 David Rutherford. All rights reserved.
* www.davidrutherford.ca
*/

/* div.settings */
div.settings { display: block; margin: 5px; text-align:left;}
div.settings > * { display: block; text-align: left; margin:0px 5px; max-width: 100%; }
div.settings > *:nth-child(odd)  { margin-top:7px; }
div.settings > label:nth-child(odd):after,
div.settings > *:nth-child(odd) label:after { content: ":"; }
div.settings * { vertical-align: middle; }

@media (min-width: 700px) {
	div.settings {
		display:grid !important;
		grid-template-columns: max-content auto;
		grid-gap:5px;
		margin:10px;
	}
	div.settings > *:nth-child(odd)  { display: inline-block; justify-self:right; margin:0; }
	div.settings > *:nth-child(even) { display: inline-block; justify-self:left; margin:0; }
	div.settings > label:nth-child(odd),
	div.settings > *:nth-child(odd) label { display:flex; align-items: center; text-align:right;}
}

/* img.zoom */
img.zoom, .zoom img {
	transition: all .25s ease-in-out;
	text-decoration: none;
	border: none;
}
img.zoom:hover, .zoom:hover img {
	transform: scale(1.2);
	text-decoration: none;
	border: none;
}

/* inputMarkup */
.inputMarkupWrapper {
	display: inline-block;
	position: relative;
	margin-bottom: 0.8rem; 
}
.inputRequiredWrapper {
	display: inline-block;
	position: relative; 
}
.inputRequiredWrapper:after {
  content: ' *';
  color: red;
}
.inputMarkupAnnotation { 
	display: inline-block;
	position: absolute;
	right: 0.5px;
	bottom: -0.7rem;
	color: blue;
	font-size: 0.5rem;
}
.inputRequiredWrapper .inputMarkupAnnotation { 
	right: 0.8rem;
}
.inputMarkupWarning {
	color: red;
}

/* dl.faq */
dl.faq dd                 { display:block; color: #000000; font-size: 18px; text-decoration:none; margin:10px; padding:0px; }
dl.faq dd:before          { content: "⊕ "; }
dl.faq dd.selected:before { content: "⊖ "; }
dl.faq dd:hover           { cursor: pointer; color: #3497d8; }
dl.faq dt                 { display:none;  }
dl.faq dt.selected        { display:block; margin:20px; padding:0px;
                            font-size: 18px; font-weight:normal; color: #3497d8; text-decoration:none;
                            -webkit-transition: .25s; /* Safari */
                            transition: .25s; 
                          }