/* START main.php template */
	/* START main.php template : BASIC BOXES */
		html {
			height: 100%;
			margin: 0;
			padding: 0;
		}

		body {
			height: calc(100% - 5rem); /* full height minus height of fixed position header - which floats out of and displaces body */
			margin: 0;
			padding: 0;
			margin-top: 5rem;
			min-width: 320px;
		}

		nav {
			min-height: 5rem; /* 5rem = 80px */
		}

		main {
			min-height: calc(100% - 117px - 3rem); /* full height of parent (body) minus footer height minus footer margin-top */
			padding-bottom: 1px; /* stop margin-bottom of last contained element being pushed on to mains margin-bottom */ 
		}

		footer {
			height: 117px;
		}
	/* END main.php template : BASIC BOXES */

	/* START main.php template : Header Nav / Footer style */
		body {
			font-family: 'Heebo', 'Arial Regular', 'Arial', 'Sans-serif';
		}

		nav {
			background-image: linear-gradient(#171717, #333333);
		}
		
		#navbar_container {
			margin: 8px auto;
		}
		
		.navbar-dark .navbar-toggler.kbNavButton
		, .kbNavButton
		, .kbNavButton:hover {
			color: #FFF;
			border-color: #FFF;
			background-color: transparent;
			font-size: 1rem;
		}
		
		.navbar-dark .kbNavButton .navbar-toggler-icon {
			/* redefine burger svg in purest white */
			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
		}
		
		.navbar-brand a {
			outline: none; /* dont draw a nasty blue box around logo when clicked on / active */
		}
		
		.navbar-toggler {
			padding: 0.375rem 0.75rem;
		}
		
		nav #search_input {
			width: 200px;
		}
		
		/* only use this (nav divider) on lg / xl layouts */
		@media (min-width: 992px) { nav .nav-divider-left { border-left: solid 1px rgba(255, 255, 255, 0.3); } }
		
		.frowny_frown {
			width: 100%;
			height: 20px;
			margin-top: 20px; /* push total hight to stay at 40px */
		}
		/* responsive smiley_smile (height) - default mobile above ! */
		@media (min-width: 576px) { .frowny_frown {height: 25px; margin-top: 15px;} }
		@media (min-width: 768px) { .frowny_frown {height: 30px; margin-top: 10px;} }
		@media (min-width: 992px) { .frowny_frown {height: 35px; margin-top: 5px;} }
		@media (min-width: 1200px) { .frowny_frown {height: 40px; margin-top: 0;} }

		footer #footerWrapper {
			color: #999999;
			background-color: #1a1a1a;
			padding: 17px 0;
			height: 77px;
		}

		footer #footerWrapper img {
			height: 43px;
		}
	/* END main.php template : Header Nav / Footer style */
/* END main.php template */

/* START standard site content styling */
	img {
		max-width: 100%; /* stop images escaping container */
	}
	.drop_shadow {
		box-shadow: 0px 2px 4px 0px rgba(51, 51, 51, 0.5);
	}

	.grey_text {
		color: #6b6b6b;
	}
	
	.mini_input_alert{position: absolute;font-size: 0.8em;width: auto;display: none;padding: 0.3em;left: 120px;z-index: 100; margin-top:3px;box-shadow: 1px 1px 1px rgba(0,0,0,0.2);}

	/* use slightly smaller h1 on xs (small mbl) so teh word 'KnowledgeBase' fits in element ! */
	@media (max-width: 575.98px) { h1 { font-size: 2.2rem; } }
	
	/* START center all bootstrap alerts */
		.alert {
			text-align: center;
		}
		.alert ul {
			display: inline-block;
		}
		.alert ul li {
			text-align: left;
		}
	/* END center all bootstrap alerts */
	
	/* START scroll to top */
		#scroll_to_top {
			height: 40px;
			width: 40px;
			bottom: 2rem;
			border-radius: 4px; 
			font-size: 1.5rem;
			background: #2789ED;
			color: #fff;
			opacity: 0.25;
			cursor: pointer;
			text-align: center;
		}
		#scroll_to_top:hover {
			opacity: 1;
		}
	/* END scroll to top */

	/* START smiley blocks */
		.smiley_block {
			padding-bottom: 0.1rem;/*covers a small glitch with the top line of px's on the SVG!*/
			border-radius: 0;
			background: #3193ff;
			color: #fff;
			margin-bottom:0;
			background-image: linear-gradient(to bottom, #4aa3ff, #1f8bff);
		}
		.smiley_smile {
			width:100%;
			margin-top: -5px;
			height: 40px;
		}
		/* responsive smiley_smile (height) - default mobile above ! */
		@media (min-width: 576px) { .smiley_smile {height: 50px;} }
		@media (min-width: 768px) { .smiley_smile {height: 60px;} }
		@media (min-width: 992px) { .smiley_smile {height: 70px;} }
		@media (min-width: 1200px) { .smiley_smile {height: 80px;} }
		.strap {
			color: #c4e8ff;
			font-size: 1.3em;
		}
		
		@media (min-width: 576px) { .strap {font-size: 1.6em;} }
	/* END smiley blocks */

	/* START listings */
		.item_title {
			font-size:1.3rem;
			font-weight:bold;
			margin-bottom:0
		}
		.item_summary {font-size:1.2rem}
	/* END listings */
	
	/* START FORMS */
		.form-group label {
			min-width: 100px;
		}
		.btn.btn-bold {
			font-weight: 700;
		}
	/* END FORMS */
	
	/* START card-deck */
		@media (max-width: 575.98px) {
			.card-deck .card {
				width: 100%; /* hacky fix for cards in deck on mbl */
			}
		}
	/* END card-deck */
/* END standard site content styling */

/* START page specific content styling */
	/* START viewer/search */
		.input-group-append > #big_search_articles_btn {
			padding-bottom: .32rem;
			border-radius: 0;
		}
		.input-group > #big_search_field {
			border-radius: 0;
		}
		@media (max-width: 575.98px) {
			/* reduce placeholder text size on mbl */
			.input-group #big_search_field::-webkit-input-placeholder { font-size: 0.85rem; } /* Chrome/Opera/Safari */
			.input-group #big_search_field::-moz-placeholder { font-size: 0.85rem; } /* Firefox 19+ */
			.input-group #big_search_field:-moz-placeholder { font-size: 0.85rem; } /* Firefox 18- */
			.input-group #big_search_field:-ms-input-placeholder { font-size: 0.85rem; } /* IE 10+ */
			.input-group #big_search_field::placeholder { font-size: 0.85rem; } /* future std */
			
			/* reduce button text size on mobile */
			.input-group-append > #big_search_articles_btn { font-size: 1rem; }
			
		}
	/* END viewer/search */

	/* START viewer/glossary */
	#glossary_a2z_links {
		font-size: 1.5rem;
	}
	
	dt {
		font-size: 1.25rem;
	}
	dd {
		font-size: 1.125rem;
	}
	
	/* END viewer/glossary */

	/* START admin/users */

	label#staff_user_group_label {
		height: 25px;
	}
	.form-group > #staff_user_group_wrapper {
		margin-bottom: 0;
		margin-top: 8px;
	}
	.form-group > .checkbox_wrapper {
		margin-left: 15px;
	}

	/* END admin/users */
	
	/* START editor/articles/add_edit */
		body.mce-fullscreen, div.mce-fullscreen {
			margin-top: 5rem; /* Move down fullscreen tinyMCE content because we have a fixed navbar that is 5rem tall */
		}

		textarea#content_html {
			min-height: 500px; /* for now just make editor a little taller ... temp */
		}
	/* END editor/articles/add_edit */

	/* START editor/articles, admin/users */
	table .sort_table_header {
		cursor: pointer;
	}
	.container .filter_listing {
		border-radius: 0.25rem;
		border-style: solid;
		border-width: 1px;
		border-color: #999999;		
	}
	
	/* END editor/articles, admin/users */

	/* START editor/image_assets/ */
		.card-text label {
			width: 100px;
			float:left;
			clear:left;
		}
		.card-text labeled_value {
			margin-left: 100px;
			display: inline-block;
			float:left;
		}
	/* END editor/articles/add_edit */
	
	/* START viewer/articles/article */
		#quick_nav_column {
			background-color: #F0F9FF;
			background-image: linear-gradient(to bottom, #F0F9FF 0%, #F0F9FF 75%, #FFF 100%);
		}
		
		#quick_nav_block {
			top: 60px;
		}
		h2#quick_nav_title {
			font-size: 1.125rem;
			font-weight: bold;
		}
		#article_quick_nav a {
			font-size: 0.875rem;
			font-weight: normal;
			line-height: 1.25rem;
			display: block;
			
		}
		
		#article_date {
			font-size: 0.75rem;
			font-weight: normal;
		}
		#article_title {
			font-size: 2.25rem;
			font-weight: bold;
			line-height: 2.75rem;
		}
		#article_summary {
			font-size: 1.625rem;
			font-weight: normal;
			line-height: 2.375rem;
			border-left: solid 3px #C4E8FF;
		}
		
		#previous_and_next_article  {font-size: 1.125rem;}
		#previous_article .related_arrow {position: absolute; left:0; color: #2B88EC;}
		#previous_article {padding-left: 1em;}
		#next_article .related_arrow {position: absolute; right:0; color: #2B88EC;}
		#next_article {padding-right: 1em;}
	/* END viewer/articles/article */
	
	/* START viewer/articles/index */
		#topic_and_article_list ul {
			list-style:none;
		}
	/* END viewer/articles/index */
/* END page specific content styling */