/* 
 * Lawbore CSS
 * HTML 5 rewrite
 * Original 2012. Rewritten 2020 for new layout.
 */




html {

	/*--main-bg-color: #007d5a; */
	--main-bg-color: #f4f5f4;
	--link-color: #136278;
	--alt-dark-color: #002a32;
	--footer-color: var(--alt-dark-color);
	--panel-color: #d9e0e3;
	--bright-bg-color: #00b5b5;
	--box-bg-color: rgba(210, 219, 223, 0.8);
	--box-bg-color-moreopaque: rgba(210, 219, 223, 0.93);

	/* Panel colour is also set inside SVG backgrounds, so this one isn't global */
}


body {
	font-family: kreon;
	font-weight: 300;
	background: var(--main-bg-color) url("/images/book%20cover%20faded.jpg") no-repeat center var(--navbar-height);
	background-size: contain;
}

/*
h1,
h2,
h3 {
	color: #fff;
}
*/

/* Page structure */


#leftcol {
	margin-left: 0;
	margin-right: 0;
	width: 276px;
}

/*
#maincol {}

#rightcol {}
*/


h1#main_h1 {
	text-align: center;
	font-size: 40px;
}

/* Front page */


#learnmorebox a {
	float: right;
}

#sitelogo_container {
/* Compensate for glow space on image */ 
	margin-left: -12px;
}

/* About page */

.aboutpage h2.sectiontitle {
	margin-top: 2em;
}

.aboutpage h3.subtitle {
	margin-bottom: 0.5em;
	margin-top: 1.5em;
}

.aboutpage ul {
	padding-left: 2em;
}

.aboutpage ul li {
	margin: 0.5em 0em;
}


.imagecaption {
	color: #000;
	font-size: 92%;
	margin-left: 4px;
	margin-bottom: 15px;
}

.screenshot-gallery .imagecaption {
	margin-left: 0;
	margin-right: 15px;
}

img.toptrump {
	max-width: 300px;
	height: auto;
}

/* Topic link stuff */

a.topiclink {
	/*margin: .7em .35em .7em .35em;*/
	margin: 0 auto;
	display: block;
	width: 7.5em;
	height: 9.5em;
	font-weight: normal;
	/* vertical-align: top;*/
	/* float: left;*/

}

/* Gentle zoom-in effect on hover */
a.topiclink .topicimage {
	transition: transform .05s;
}

a.topiclink:hover .topicimage {
	transform: scale(1.1);
}

a.topiclink:hover .topiccaption {
	background-color: rgba(0, 0, 0, 0.1);
}

a.topiclink:hover {
	text-decoration: none;
}

/* topicimage div is a window on the image inside it.
   The image inside it is scaled according to font size. 
   It contains every icon, and then we use relative positioning
   to move it to the position where the icon we want is visible.
 */
.topicimage {
	overflow: hidden;
	width: 6em;
	height: 6em;
	background-image: url("/images/topic circle bg.svg?102023");
	background-size: cover;
	margin-left: 0.525em;
}

.electives .topicimage {
	background-image: url("/images/topic circle bg electives.svg?102023");
}

.professional .topicimage {
	background-image: url("/images/topic circle bg professional.svg?1020203");
}

.topicimage img {
	position: relative;
	top: 0px;
	left: 0px;
	width: 42em;
	/*  7 x width */
	height: 54em;
	/* 9 x height */
}

.topiccaption {
	position: relative;
	top: 0.4em;
	left: 0px;
	text-align: center;
	padding-left: 3px;
	padding-right: 3px;
	padding-bottom: 1px;
	width: 6em;
	line-height: 1.2;
	/* color: #fff; */
	font-weight: 400;
	font-size: 110%;
}

.topicgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(7em,1fr));
	gap: var(--column-gap);

}


div.screenshot-gallery {
	clear: both;
	margin-top: 20px;
	margin-bottom: 10px;
}

div.screenshot {
	width: 155px;
	display: inline-block;
	vertical-align: top;
}

div.screenshot a img {
	border: 1px solid #aaa;
}
#quotespace {
	background-color: var(--alt-dark-color);
	padding: 20px;
	border-radius: 10px;
}
blockquote.studentquote {
	font-family: Georgia, serif;
	font-size: 108%;
	line-height: 140%;
	font-style: italic;
	font-weight: bold;
	color: #fff;
	padding: 0;
	margin: 0;
	margin-top: 24px;
	padding-left: 14px;
	padding-top: 2px;
	margin-bottom: 10px;
	background: url('/about/quotes.png') top left no-repeat
}

div.studentattrib {
	text-align: right;
	font-weight:bold;
	color: #fff;
	margin-bottom: 20px;
}

ul.reflist {
	margin-top: 1em;
	padding-left: 15px;
}

ul.reflist li {
	margin-bottom: 0.7em;
}


.hubbox { /* copied from city hub css */
	margin-bottom: var(--column-gap);
	padding: var(--box-padding);
	background: var(--box-bg-color);
	border-radius: 10px;
	gap: unset;
}

/* Search results */

#resultsgohere {
	margin-top: 20px;
	height: 550px;
}

#result_header {
	font-weight: bold;
	margin-bottom: 1em;

}

#other_pages {
	margin-bottom: 20px
}

#powered_by {
	text-align: right;
	position: relative;
	top: -20px;
}


#results .title a {
	font-size: larger;
	padding-left: 5px
}

#results .url a {
	color: #97B130
}

#didumean {
	margin-top: 1em;
	font-size: larger;
	font-style: italic;
	font-weight: normal
}

#results .resultlist {
	margin-bottom: 1em;
}

#results .resultlist ul li {
	list-style-type: none;
}

#results .mak_2 {
	font-weight: bold;
}

#other_pages a,
#other_pages b {
	display: inline-block;
	padding-right: 3px;
	padding-left: 3px;
}

#searchpanel {
	background: url('/images/lawbore-search.png') top right no-repeat;
}

#featuredpanel ul {
	list-style: none;
	padding-left: 0;
	text-align: justify;
}

#featuredpanel li {
	margin-bottom: 5px;
	padding-bottom: 5px;
	border-bottom: 1px dotted #a1e5eb;
	width: 21em;
	display: inline-block;
	vertical-align: top;
	text-align: left;
}


#featuredpanel {
	padding-right: 25px;
	box-sizing: border-box;
}

#featuredpanel li.empty {
	border-bottom: 0;
}

/* front page slideshow */


.slideshowLoader {
	margin-top: 120px
}

/* Topic pages */

.editlink {
	font-weight: bold;
}

#subtopics {
	margin-bottom: 200px;
}


#topicdescription {
	float: right;
	background-color: #fff;
	padding-left: 26px;
	width: 50%;
	margin-top: 2.8em;
	padding-right: 26px;
	padding-top: 40px;
	padding-bottom: 0;
	z-index: 90;
	-webkit-box-shadow: 1px 6px 8px 3px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 1px 6px 8px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 1px 6px 8px 3px rgba(0, 0, 0, 0.2);
}

#topicdescription .qmark {
	float: right;
	padding-left: 20px;
	padding-right: 0px;
	padding-bottom: 20px;
}

#topicdescription h3 {

	margin-bottom: 10px;
}


#topicimage {
	text-align: right;
}

.topicsection .articlelist {
	line-height: 100%;
	margin-bottom: 5px;
}

#topicbanner {
	z-index: 100;
	margin-bottom: 0px;
	line-height: 159px;
	margin-top: 10px;
}

#topicbanner,
#topicbanner img {
	height: auto;
	width: 100%;
}



.topicinnerbox {
	padding: 1.5em;
	background: url('/images/subtopic bg.svg');
	background-size: cover;
	box-sizing: border-box;
}

.topicsection {
	/*margin-bottom: 40px;*/
	padding: 0 20px 20px 0;
}


.topicsection .subtopicname,
h3.articletitle {
	margin-bottom: 30px;
	background-color: var(--main-bg-color);
	color: #fff !important;
	font-weight: 400;
	font-size: 130%;
	display: inline-block;
	padding: 3px 5px 3px 5px;
}

h3.articletitle {
	line-height: 130%;
	margin-top: 0.3em;
}


div.articleitem {
	/* background: url("/images/dotbullet.png") no-repeat scroll 0px 3px;*/
	margin-bottom: 10px;
}

div.articleitem a {
	line-height: 1.3 !important;
/* 	color: #000; */
}



.morelink a {
	color: #fff;
	font-weight: bold;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #25C1D2;
	line-height: 1.4;
	display: inline-block;
}

.right-arrow {
	width: 0;
	height: 0;
	border-top: 13px solid transparent;
	border-bottom: 13px solid transparent;
	border-left: 13px solid #25C1D2;
	float: right;
}

.currentsection .right-arrow {
	display: none;
}

i.left-arrow {
	width: 0;
	height: 0;
	border-top: 13px solid transparent;
	border-bottom: 13px solid transparent;
	border-right: 13px solid #25C1D2;
	float: left;
	display: none;
}

.morelink a.left-arrow {
	display: block;
}

.currentsection .left-arrow {
	display: block;
}

.currentsection .rightaligned {
	text-align: left;
	/* doh ! */
}

.report_bad_link {
	font-weight: bold;
}

.badlink button {
	padding: 0.5rem 1rem;
	border-radius: 5px;
} 

.badlink button:focus {
	background-color: var(--bright-bg-color);
}

.badlink fieldset {
	padding-left: 0;
}

#linksarea {
	position: relative;
	/* as a baseline for positioning stuff relative to the top of the main bit of the page, eg. spinner */

}

#topicinstructions {
	background-color: var(--alt-dark-color);
	border-radius: 10px;
	color: #fff;
}

#topicinstructions h2 {
	margin-top: 0;
}

#topicinstructions div {
	padding: 20px;
	color: #fff;
}

#topicinstructions div h3 {
	margin-bottom: 15px;
	color: #fff;
}

#topicinstructions div ul {
	margin-left: 25px;
}

#topicinstructions div ul li {
	padding-left: 5px;
	margin-bottom: 7px;
}

.articleitem.cityonly a,
.cityonlyhighlight {
	background-color: #D5FFF5;
}

.articleURL {
	font-weight: bold;
	overflow-wrap: anywhere;
	word-wrap: anywhere;
}

.articleitem a.highlightedItem {
	background-color: var(--main-bg-color);
	color: #000;
}

.articleitem a.highlightedItem:hover {
	text-decoration: none;
}


#siteinfo {
	/*background: url('/images/item bg.svg');*/
	background-size: cover;
	padding: var(--box-padding);
	z-index: 100;
	display: none;
	background-color: var(--box-bg-color-moreopaque);
	border-radius: 10px;
	/* initially hidden */
}


.itemlinkbit {
	display: flex;
}

.backlink {
	color: #fff;
	font-weight: 700;
}



h3.articletitle a {
/*	color: #fff;*/
}

.articledescription {
	margin-bottom: 10px;
	box-sizing: border-box;
	margin-left: 0;

}

.articledescription p:first-child {
	margin-top: 0;
}

.siteThumb .tip {
	color: #222;
	margin-top: 0;
}

.siteThumb {
	float: right;
	margin-right: 0;
	margin-bottom: 1em;
	margin-left: 1em;
	margin-top: 3px;

}

.siteThumb img {
	border: 1px solid #ddd
}

#loadingspinnerholder {
	position: absolute;
	left: 50%;
	padding-top: 20px;
}

#loading_spinner {
	padding: 20px;
	background: transparent;
}

#preview {
	position: absolute;
	border: 1px solid #fff;
	background: #333;
	padding: 5px;
	display: none;
	color: #fff;
	top: -5px;
	right: 150px;
	z-index: 100;
	min-width: 372px;
	min-height: 100px;
	-webkit-box-shadow: 1px 6px 8px 3px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 1px 6px 8px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 1px 6px 8px 3px rgba(0, 0, 0, 0.2);
}

#preview .caption {
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 0.2em;
	box-sizing: border-box;
}

#bottombar {
	padding-top: 10px;
	margin-top: 10px;
	font-size: 95%;
	border-top: 1px solid #8888;
}

#bottombar a {
	color: #000;
}

img.urlgo {
	margin-right: 7px;
	margin-top: 4px;
}

#itemimagecolumn .imagelink img {
	margin-top: 5px
}

#itemmaincolumn {
	/* border-top: 1px dashed #25C1D2;*/
	padding-top: 10px;
}

.itemhitcount {
	margin-top: 2em;
}


/* Lower area fixed heights */

#lowerarea .fixedheight,
iframe#twitter-widget-0 {
	height: 820px;
	overflow-y: hidden;
}


/* Modal dialogues

Form styling taken from:
http://www.jqueryscript.net/form/Animated-Input-Placeholder-Plugin-With-jQuery-CSS3-Placeholderr.html

*/

.show-after {
	display: none;
}

.feedbackForm p {
	margin-bottom: 1em;
}

/*
.formRow {
	position: relative;
	width: 100%;
}*/

.formRow--item {
	display: block;
	width: 100%;
	margin: 1em 0;
}

.formRow--input {
	position: relative;
	padding: 15px 20px 11px;
	box-sizing: border-box;
	width: 100%;
	border: solid 1px #95989a;
	border-radius: 4px;
	color: #2c3235;
	letter-spacing: .2px;
	font-weight: 400;
	font-size: 16px;
	font-family: monospace;
	resize: none;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
	max-width: 40em;
}

.formRow--input-wrapper {
	position: relative;
	display: block;
	width: 100%;
}

.formRow--input-wrapper.active .placeholder {
	top: -5px;
	background-color: #ffffff;
	text-transform: uppercase;
	letter-spacing: .8px;
	font-size: 11px;
	line-height: 14px;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.formRow--input-wrapper.active .formRow--input:not(:focus):not(:hover)~.placeholder {
	color: #888;
}

.formRow--input-wrapper .formRow--input:focus,
.formRow--input-wrapper .formRow--input:hover {
	border-color: #fd999a;
}

.formRow .placeholder {
	position: absolute;
	top: 50%;
	left: 10px;
	display: block;
	padding: 0 10px;
	white-space: nowrap;
	letter-spacing: .2px;
	font-weight: normal;
	font-size: 16px;
	-webkit-transition: all, .2s;
	transition: all, .2s;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


#reportbox {
	display:flex; 
	gap: var(--column-gap);
}

#reportbox form {
	flex-basis: max(25rem, 50%); 
	flex-shrink: 0.3;
}

#reportbox .badlink_summary {
}

#reportbox .formSubmitted a {
	font-weight: bold;
	color: #000;
}






/* Mobile */
.mobileonly {
	display: none;
}

#greyoverlay {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #000;
	opacity: 0.75;
	z-index: 500;
}

.showoverlayonmobile {
	display: none;
}