/* 
 Author: Emma Jaud
 Organization: University of Delaware Library, Museums and Press
 File: webinator-search.css
 Description: Define styles for external library webinator search page.
*/

/* ------------- Fonts ------------- */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');

@font-face {
    font-family: 'Greycliff_Light';
    src: url('/static/fonts/GreycliffCF-Light.woff') format('woff'),
         url('/static/fonts/GreycliffCF-Light.woff2') format('woff2');
    font-display: auto;
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Greycliff_Bold';
    src: url('/static/fonts/GreycliffCF-Bold.woff') format('woff'), 
         url('/static/fonts/GreycliffCF-Bold.woff2') format('woff2');
    font-display: auto;
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Greycliff_SemiBold';
    src: url('/static/fonts/GreycliffCF-DemiBold.woff') format('woff'), 
         url('/static/fonts/GreycliffCF-DemiBold.woff2') format('woff2');
    font-display: auto;
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Greycliff_Regular';
    src: url('https://library.udel.edu/static/fonts/Greycliff-CF-Regular.otf') format('opentype');
    font-display: auto;
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('/static/fonts/OpenSans.woff') format('woff'), 
         url('/static/fonts/OpenSans.woff2') format('woff2');
    font-display: auto;
    font-weight: normal;
    font-style: normal;
}


/* ------------- General ------------- */
:root {
    font-size: 75%; /* this resets the font scale to 1 rem = 12 px */
	
    --color-blue-med:    #00539f;
    --color-blue-dark:   #003c71;
    --color-blue-light:  #00a0df;
    --color-gold:        #ffd200;
    --color-gold-pale:   #fdf0b2;
    --color-gray-light:  #e5e9ed;
    --color-gray-med:    #bdbdbd;
	--color-black:       #000000;
}
*, *:before, *:after { 
	box-sizing: border-box; 
	font-weight: initial;
}
#body {
	font-family: 'Greycliff_SemiBold';
	font-size: 14px;
}
a { 
	color: var(--color-blue-med); 
/*	font-weight: 600; */
	font-weight: initial !important;
} 
a:hover { 
	color: var(--color-blue-light); 
}

/* ------------- Search Filters ------------- */
.search-results #content {
	padding: 4vmin 4vmin;
}
.search-results .footer-library {
	padding: 4rem 0 0 !important;
}
.search-results .container {
	padding: 0;
}
.search-results table {
     border: 0; 
}
.search-results #SearchForm { 
	background: #eef6ff; 
	border-radius: 1rem;
	padding: 22px 27.5px; 
	width: 100%; 
	display: block; 
} 
.search-results input#query {
	border-radius: 1rem;
    border: 0;
    background-color: white;
    color: var(--color-blue-dark);
    font-size: 22px !important;
    padding: 6px 12px 7px !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	width: 80%;
	height: 45px;
	margin-bottom: 2rem;
}
#SearchForm { 
	background: #eef6ff; 
	border-radius: 1rem;
	padding: 22px 27.5px; 
	width: 100%; 
	display: block; 
	box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
} 
input#query {
	margin-right: 10px;
    border-radius: 1rem;
    border: 0.5px solid #bdbdbd;
    background-color: white;
/*    color: var(--color-blue-dark);*/
    font-size: 1.3em !important;
    padding: 7px 12px 7px !important;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 15%);
    width: 60%;
    height: 40px;
    margin-bottom: 1rem;
}
input[type='submit'] { 
/*	-webkit-appearance: none; */
	background: #00539f; 
	color: #fff; 
	border: 1px solid #00539f; 
	font-family: 'Greycliff_SemiBold';
	padding: .7rem 2rem;
	border-radius: 2rem;
	font-size: 1.4rem;
	
/*	height: 55px; */
	vertical-align: top; 
/*	width: 15%; */
}
input[type='submit']:hover { 
	background: #00a0df; 
	color: #fff; 
	cursor: pointer;
	border: 1px solid #00a0df; 
} 
button#advanced { 
	font-family: 'Greycliff_SemiBold';
	margin-left: -10px; 
	border: 0; 
	-webkit-appearance: none; 
	background: #00539f; 
	color: #fff; 
	padding: 4px 14px; 
	font-size: 14px; 
	cursor: pointer; 
	border-radius: 2rem;
}
button#advanced:hover { 
	color: #fff; 
	background: #00a0df;
}


/* ------------- Search Filters Dropdown ------------- */
.fakespan {
	display: none;
}
#SearchForm table table {
	margin: 0;
}
#SearchForm table tr>td[colspan="2"]>table  {
	width: 100%;
}
#SearchForm .choice {
    width: 100%;
    height: 34px;
}
#SearchForm #notq {
	height: 34px;
}
#SearchForm label>strong {
	font-weight: initial !important;
}
#SearchForm small>select, #SearchForm #notq, #SearchForm .choice {
	padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 15%);
    color: black;
    /* box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); */
    border-radius: 0.8rem;
}


/* ------------- Search Results ------------- */
.results {
	background: white;
    padding: 15px;
    border-radius: 1rem;
}
.results p:last-of-type {
	margin-bottom: 5px;
}
.results>a:first-of-type {
	padding-bottom: 15px;
    display: inline-block;
	font-size: 1.2em !important;
}
.results b {
    font-weight: 600;
    background: var(--color-gold);
/*	padding: 0 2px;*/
    padding: 0px 6px 2px;
    border-radius: 0.5rem;
	font-weight: initial !important;
}
.results span {
	overflow-wrap: break-word;
/*	overflow: hidden;*/
/*    text-overflow: ellipsis;*/
}
#searchresults table {
	margin: 10px 0;
	width: 100%;
}


/* ------------- Search Navigation ------------- */
#searchNavTop {
	margin: 0 0 20px;
}
.searchNav tr:nth-of-type(2) td {
	padding: 0;
}
.searchNav .button a  {
	text-decoration: none;
    border: 0;
    -webkit-appearance: none;
    background: #00539f;
    color: #fff;
    padding: 8px 16px 8px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 2rem;
	min-height: 34px;
}
.searchNav .button a:hover, 
.searchNav tr:nth-of-type(3) td:nth-of-type(2) a:hover {
    background: var(--color-blue-light);
}
.searchNav tr:nth-of-type(3) td:nth-of-type(2) a, 
.searchNav tr:nth-of-type(3) td:nth-of-type(2) b {
    background: #00539f;
	text-decoration: none;
    color: #fff;
    padding: 6px 6px;
    margin: 0 2px 0;
    min-width: 34px;
    height: 34px;
	display: inline-block;
	border-radius: 2rem;
	border: 2px solid transparent;
	font-weight: initial;
}
.searchNav tr:nth-of-type(3) td:nth-of-type(2) b {
	background: var(--color-blue-light);
	border: 2px solid black;
}



/* ------------- Responsive CSS ------------- */
@media only screen and (max-width: 520px) {
	table, thead, tbody, th, td, tr {
		display: block;
	}
	#SearchForm #notq {
		width: 100%;
	}
	#SearchForm td {
		padding: 0 0 1rem;
	}
	#SearchForm > table {
		width: 90% !important;
	}
	#SearchForm > table > tbody > tr:nth-of-type(2) > td {
		width: 100% !important;
		text-align: center !important;
	}
	#SearchForm > table > tbody > tr:nth-of-type(2) > td th {
		text-align: center !important;
	}

	#SearchForm td[colspan="2"] th, #SearchForm td[colspan="2"] td {
		display: inline-block;
		width: 45%;
		text-align: center !important;
	}
	#SearchForm td[colspan="2"] tbody>tr:first-child th {
		display: block;
		width: 100%;
	}
	
	#searchresults>td:first-child {
		padding: 0;
	}
	
	.searchNav tr:last-child  {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.searchNav tr:last-child td:nth-of-type(2) {
		width: 100% !important;
		order: 1;
		grid-column: span 2;
	}
	.searchNav tr:last-child td:nth-of-type(1) {
		width: 100% !important;
		order: 2;
	}
	.searchNav tr:last-child td:nth-of-type(3) {
		width: 100% !important;
		order: 3;
	}
	.searchNav tr:nth-of-type(3) td:nth-of-type(2) a, .searchNav tr:nth-of-type(3) td:nth-of-type(2) b {
		margin: 2px;
	}
}

@media only screen and (max-width: 490px) {
	#SearchForm {
		padding: 16px 27.5px 22px;
	}
	#SearchForm label>strong {
		margin-bottom: 10px !important;
		display: block;
	}
	#SearchForm label[for="refine"] {
		margin-bottom: 10px !important;
		display: inline-block;
	}
}