/*CSS*/

body {
	background-image: url("../Images/bodyBack.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	font-family: Arial, sans-serif !important; /*!important to override any admin side styling with different fonts*/
}



/*Header and paragraph styling*/
h1 {
	font-size: 20px !important;
	color: black;
	font-weight: Bold;
	font-family: söhne,ui-sans-serif,system-ui,-apple-system,segoe ui,roboto,ubuntu,cantarell,noto sans,sans-serif,helvetica neue,arial,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;
}

h2 {
	font-size: 18px !important;
	color: black;
	font-family: söhne,ui-sans-serif,system-ui,-apple-system,segoe ui,roboto,ubuntu,cantarell,noto sans,sans-serif,helvetica neue,arial,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;
}

p {
	font-size: 16px !important;
}

/*Link styling*/
.contentBody a:link, .contentBody a:visited, .contentBody a:active, .contentBody a, .footer a:link, .footer a:visited, .footer a:hover, .footer a:active, .footer a { /*Make links appear red*/
	color: red;
	text-decoration: none;
}
.contentBody a:hover {text-decoration: underline;}

.innerContent a {
	color: red !important;
}

/*Header images*/
.headerImgDesktop {
	width: 100%;
}

.headerImgMobile {
	display: none;
	width: 100%;
}

@media only screen and (max-width: 768px ) { /*Hide desktop header image and show mobile header image on smaller screens*/
	.headerImgDesktop {
		display: none;
	}

	.headerImgMobile {
		display: block;
		width: 100%;
	}
}

/*Carousel*/
.carousel {
	width: 90%;
	margin: 0 auto;
	padding: 0px;
	display: block;
}

.carousel-inner {
	border: 3px solid;
	border-radius: 10px;
}

@media only screen and (max-width: 992px ) { /*Padding on carousel arrows so they dont get hidden on smaller screens*/
	.carousel-control-next {
		padding-right: 2em;
	}

	.carousel-control-prev {
		padding-left: 2em;
	}
}

/*Content containers*/
.contentBody {
	width: 90%;
	display: flex;
	margin: 0 auto;
}

.sidebar {
	width: 27%;
	margin: 0 0 0 20px;
	padding: 30px;
	float: right;
	background-color: rgb(245,245,245);
	border: 3px solid black;
	border-radius: 25px;
	flex-shrink: 0; /*To make sidebar same height as content. Give the sidebar a default width, and prevent it from shrinking  */
}

.content {
	background-color: rgb(245,245,245);
	padding: 30px 0px 30px 30px;
	border: 3px solid black;
	border-radius: 25px;
	flex-grow: 1; /*This makes the element grow and take all available space, not taken by the sidebar */
}

.footer {
	display: block;
	text-align: center;
	margin: 0 auto;
	background-color: rgb(245,245,245);
	width: 90%;
	border: 3px solid black;
	padding: 30px;
	border-radius: 25px;
}

@media all and (min-width: 992px) { /*screens bigger than 992px*/
	.innerContent {
		max-height: 2000px !important;
		overflow-y: auto; /*Make content scrollable if too long*/
	}
}

@media only screen and (max-width: 992px) { /*To collapse sidebar if screen is too small*/
	.contentBody {
		flex-flow: column;
	}

	.contentBody, .footer {
		width: 95%;
	}

	.content {
		padding: 5px;
		/*overflow-x: auto;*/
	}

	.sidebar {
		width: auto; /*Make the sidebar take the entire width of the screen*/
		margin: 0;
	}
}

/*NAVBAR*/
.navbar-nav {
	width: 100%;
	padding-left: 12%;
	padding-right: 12%;
	background-color: black;
}

li.static {
	margin: 0 auto;
	text-align: center
}

.nav a:link, .nav a:visited, .nav a:hover, .nav a:active, .nav a {
	color: white;
}

.nav, .nav li {
	background-color: black;
}

.dropdown-menu {
	border: 2px solid black;
}

/*.dropdown-menu > * {
	background-color: white;
}

.dropdown-menu > *:hover {
	background-color: rgb(211,211,211) ;
}*/

div.navbar-nav ul li.dynamic {
	background-color: white;
}

div.navbar-nav ul li.dynamic:hover {
	background-color: rgb(211,211,211);
}

.dropdown-menu a:link, .dropdown-menu a:visited, .dropdown-menu a:hover, .dropdown-menu a:active {
	color: black;
}

.nav li {
	padding: 15px;
}

.toggleCtn { /*Container for menu toggle button*/
	background-color: black;
	width: 100%;
	text-align: center;
}

.toggleCtn a {
	color: white;
}

.toggleCtn tr, td, table {
	padding: 10px;
	margin: 0 auto;
}

@media all and (min-width: 992px) { /*screens bigger than 992px*/
	.menuToggle, .callUs {
		color: white;
		display: none !important
	}

	#navBar {
		display: block !important /*!important To override JS toggle */
	}
}

@media all and (max-width: 992px) { /*screens smaller than 992px*/
	li.static {
		width: 100%;
		text-align: center;
	}

	.dynamic {
		width: 100%;
		margin: 0 auto;
		display: inline-block;
		text-align: center;
	}

	.menuToggle, .callUs {
		display: block;
		color: white;
		margin: 0 auto;
	}

	.menuToggle {
		height: 40px;
	}

	.callUs {
		height: 40px;
		padding: 5px;
	}

	#navBar {
		display: none;
	}

	.dropdown-menu > *:active {
		background-color: lightgray;
	}

	#ctl00_Menu1 a {
		padding: 0px !important; /*fixes indented dropdown menu link issue*/
	}
}

/*Inventory Page + subpages*/
.divCtn {
	display: inline-block;
}

.lookupTbl tr:not(:last-child) {
	border-bottom: 1px dashed black;
}

.flatGrid a {
	color: white !important;
}

.pageitem {
	list-style-type: none;
	margin-left: 3px;
}

@media all and (max-width: 992px) { /*screens smaller than 992px*/
	.tblCtn {
		overflow-x: auto;
	}
	
	.tblCtn table, .tblCtn tr {
		width: 100%;
	}

	.divCtn {
		display: block;
	}
}


/*Prevent the need for horizontal scrolling on mobile pages. '.contentContainer' can be found in Default.aspx in the root folder*/
.contentContainer a {
	word-break: break-word; /*Prevents long links from stretching page beyond content div limits*/
}

.innerContent {
	overflow-x:auto;
}

@media all and (max-width: 992px) { /*screens smaller than 992px*/
	.contentContainer span img, .contentContainer p img { /*Prevent images from stretching past div because they are too large*/
		display: block;
		float: none !important;
		margin: 0 auto !important;
		height: auto !important;
		max-width: 80% !important;
	}

	/*Organs page*/
	.organTable { 
		max-width: 85vw !important;
		margin: 0 auto;
		overflow-x: auto;
	}

	/*Contact Us page*/
	.captchaTable, .captchaTable tr, .captchaTable td { 
		display:block;
	}

	.captchaTable td {
		text-align:left;
	}
}

#ctl00_cphMain_frmI_imgProductImage {
	width: 70% !important;
	height: auto !important;
}