html, body {
	background-color: #822729;
	padding:0;
	margin:0;
}

body {
	font:15px/1.5em 'Montserrat', 'Source Sans Pro', sans-serif;
	color:#333;
}


span.clear {
	display:block;
	height:0;
	clear:both;
}

.content_container {
	width:96%;
	max-width:1000px;
	margin:0 auto;
	padding:0;
}
.content_container .content {
	padding:0 15px;
}

.hide {
	display: none;
}


.slash {
	color:#82272b;
	color:#f0a1a3;
	display: inline-block;
	margin:0 10px;
}

.pipe_break {
	display: inline-block;
	height:1.1em;
	margin:0 10px;
	border-right:1px solid #aaa;
	vertical-align: sub;
}

.error {
	color: red;
	color:#d40000;
}

.alert, .Open {
	color:#82272b;
	color:#d40000;
	font-weight: bold;
}

.gray {
	color:#656565;
}
.lightgray {
	color:#aaa;
}
.lightergray {
	color:#ccc;
}

.Resolved, .success {
	color:#568400;
	color:#4c7500;
}

.approved {
	font-weight: bold;
	color:#4c7500;	
}

/* --------------------------- */

#bannerWrapper {
	padding:20px 0;
}

#bannerWrapper #MHK_logo {
	display:inline-block;
	position: relative;
	width:173px;
	height:102px;
	background: transparent url('MHK_logo_white.png') no-repeat center left;
	text-decoration: none;
}
#bannerWrapper #MHK_logo span {
	display:none;
}

#bannerWrapper #FireDept_logo {
	display:inline-block;
	position: relative;
	width:118px;
	height:117px;
	background: transparent url('firedept_logo.png') no-repeat center right;	
	margin:0 15px 0 30px;
	padding-left:25px;
	border-left: 1px solid #9a5255;
}


#bannerWrapper div#contactInfo
 {
	display:inline-block;
	width:auto;
	position: relative;
	padding:5px 0 0 0;
	letter-spacing: 1px;
}

#bannerWrapper div#contactInfo, 
#bannerWrapper div#contactInfo a {
	font:16px/26px 'Noto Serif SC';
	font-weight: 300;
	color:#faeaeb;
	text-decoration: none;
	vertical-align: top;

}

#bannerWrapper div#contactInfo strong {
	color:white;
	font-size:18px;
	text-transform: uppercase;
	font-weight: 300;
}

#bannerWrapper div#contactInfo p {
	display: inline;
}

#bannerWrapper div#contactInfo span.subcolor {
	color: #f0a1a3;
}


/* --------------------------- */

#mainNavWrapper {
	background-color: #dcedff;
	padding:0;
	margin:0;

	line-height: 0;
	border-collapse: collapse;

	display:none;
}

#mainNavWrapper .content_container {
	padding:0;
}

ul#mainnav {
	display:inline-block;
	padding:0;
	margin:0;
	width:100%;
	position:relative;
	top: 0;
	z-index: 100;
	line-height: 0;
	border-collapse: collapse;
}

ul#mainnav li {
	list-style-type: none;
	float:left;
	padding:0;
	margin:0;
	line-height: 0;
	border-collapse: collapse;
}

ul#mainnav li a {
	display: block;
	text-transform: uppercase;
	text-decoration: none;
	color:#222;
	padding:12px 15px;
	margin:0;
	font-size:14px;
	line-height: 1em;
	font-weight:bold;
	line-height: 1em;
	border-collapse: collapse;
}

ul#mainnav li:hover > a {
	background-color: #cee6ff;
	color:#064f8f;
}

ul#mainnav li ul {
	display:none;
	padding:0;
	margin:0;
}

/* subnav */
ul#mainnav li:hover ul {
	display:block;
	position:absolute;
	background-color: #cee6ff;
	padding:0 0 10px 0;
	width:200px;
	border-bottom:10px solid #822729;
	box-shadow: inset 0 13px 13px -10px #c1dfff;
}

ul#mainnav li ul li {
	float:none;
}

ul#mainnav li:hover ul li a {
	text-transform: none;
	color:#222;
	padding:10px 15px;
	transition: all .3s;
}

ul#mainnav li ul li a:hover {
	color:#003e74;
	background-color: #c4defa;
}

/* -------------------- */



#mainContentWrapper {
	background-color: white;
	padding:30px 0;
}

h1 {
	font: 24px/1em 'Noto Serif SC';
	font-weight:400;
	color:#333;
	padding:0 13px 18px 13px;
	margin:0 0 6px 0;
	border-bottom: 1px solid #822729;
}

h2 {
	font: 20px/1.5em 'Noto Serif SC';
	font-weight:400;
	color:#822729;
	padding:0 13px 12px 13px;
	margin:20px 0 6px 0;
	border-bottom: 1px solid #ddd;
	font-style: italic;
}

h3 {
	font-size:18px;
	line-height: 1.5em;
	margin:1em 0 .2em 0;
	padding:20px 0 5px 0;
}


hr {
	background-color: #ddd;
	height:1px;
	border:none;
	border-collapse: collapse;
	padding:0;
	margin:5px 0;
}


/* --------------------------- */


.content.searchBar {
	font: 18px/18px 'Noto Serif SC';
	padding-top:6px;
	padding-bottom:3px;
	margin:0;
}

.content.searchBar form {
	display:inline;
	padding:0;
	margin:0;
	width: auto;
}

.content.searchBar .selectDiv {
	width:220px;
	overflow: hidden;
	display: inline-block;
	border:1px solid #606060;
	position: relative;
	padding:0;
	margin:0 0 0 5px;
	vertical-align: bottom;
	top:-3px;
	left:4px;
	color:#fafafa;
	background: #606060 url('arrowDown.png') no-repeat 96% center;
	overflow: visible;

	height:34px;
}	
.content.searchBar .selectDiv select {
	font:15px/15px 'Montserrat';
	padding:6px 12px 7px 12px;
	position: absolute;
	top:0;
	left:2px;
	width:250px;
	margin:0;
	background-color:transparent;
	color:#fafafa;
	border:none;
	overflow: visible;
	height:34px;
}
.content.searchBar .selectDiv option {
	padding:0;
	margin:0;
	background-color: #fff;
	color:#555;
	font:17px/17px 'Montserrat';
}

.content.searchBar .searchBlock {
	display:inline;
}

input[type="text"] {
	border:1px solid #ccc;
	background-color:#fafafa;
	color:#555;
	font:15px/15px 'Montserrat';
	padding:9px 12px 10px 12px;
	position: relative;
	top:-2px;
	width:220px;
	margin:0;
	height:15px;
}

input[type="submit"] {
	border:1px solid #a3b05e;
	background-color:#a3b05e;
	color:white;
	font:13px/13px 'Montserrat';
	font-weight:bold;
	padding:10px 12px 11px 12px;
	position: relative;
	top:-3px;
	left:-1px;
	margin:0;
	transition: all .3s;
	cursor: pointer;
	height:36px;
	overflow: visible;
}
input[type="submit"]:hover {
	border:1px solid #82282a;
	background-color: #82282a;
}

/* --------------------------- */

#footerContent {
	font-family: 'Noto Serif SC';
	font-weight: 200;
	padding:30px 0;
	color:#f4ebee;
	color:#e5e2cf;
	font-style: italic;
	line-height: 1.8em;
}
#footerContent a, 
#footerContent span {
	font-weight: 400;
	color:#e5e2cf;
}

/* --------------------------- */

#KDWlogo_bl {
	width:340px;
	height:72px;
	position: relative;
	top:10px;
}



table.dataTable {
	width:100%;
}
table.dataTable th,
table.dataTable td {
	padding:8px 13px;
	text-align: left;
	transition: all .3s;
}
table.dataTable th {
	font:18px/18px 'Noto Serif SC';
	border-bottom: 1px solid #822729;
}
table.dataTable td {
	color:#555;
	border-bottom: 1px solid #eee;
}
table.dataTable tr:nth-of-type(even) td {
	background-color: #f8f8f8;
}
table.dataTable tr:hover td {
	background-color: #eef6c6;
	color:#000;
}


/* --------------------------- */


/*
.violation_record {
	margin:15px 0;
	padding: 15px 0;
}
*/

.violation_record h3 {
	border-top:3px solid #ccc;
	padding-top: 20px;
}

.violation_details, .inspection_results {
	margin:8px 10px 8px 6px;
	padding:12px;
	border-radius: 5px;
	background-color: #f7f7f7;
}
.content_container .inspection_results {
	margin:0 15px;
	padding:10px;
	line-height: 2em;
}

.violation_details img {
	width:auto;
	height:auto;
	max-width:100%;
}

.violation_details i.status_icon,
.inspection_results .fa {
	font-size:20px;
	position: relative;
	top:2px;
	margin:1px 0 1px 4px;
}

.inspection_results .fa {
	width:26px;
	text-align:center;
	display:inline-block;
}

.violation_details .status_display {
	display: inline-block;
	float:right;
}

/* --------------------------- */



@media screen and (max-width:1000px) {


}


/* --------------------------- */

@media screen and (max-width:850px) {

	#mainContentWrapper {
		padding-top: 15px;
	}

	.content_container .content	{
		padding:0;
	}

	.searchBlock span.mobile_break {
		color:transparent;
		background-color: transparent;
		display:block;
		clear:both;
		height:1px;
		opacity: 0;
		margin-top: 15px;
		border:none;
	}

	#bannerWrapper {
		padding:15px 0 5px 0;
		border-bottom: 10px solid #dcedff;
	}

	#bannerWrapper #MHK_logo {
		width:130px;
		height:75px;
		top:-15px;
		background-size: contain;
	}

	#bannerWrapper #FireDept_logo {
		width:95px;
		height:95px;
		background-size: contain;
		margin-left: 10px;
		margin-right: 5px;
		padding-left:10px;
	}


	#bannerWrapper div#contactInfo {
		padding-top:0;
	}

	#bannerWrapper div#contactInfo,
	#bannerWrapper div#contactInfo a {
		font-size: 15px;
		line-height: 1.4em;
	}

	div#contactInfo span.fullscreen {
		display:none;
	}

	span#navIcon {
		display:block;
		width:40px;
		height: 40px;
		background:transparent url('navIcon.png') no-repeat center center;
		cursor: pointer;
		position: absolute;
		right:15px;
		top:63px;
		z-index:20;

		display:none;
	}


	ul#mainnav {
		display:none;
		background-color: rgba(0, 0, 0, 0.93);
		background-color: #dcedff;
		margin:0;
		position:absolute;
		top:120px;
		left:0;
		padding:5px 0 20px 0;
	}

	ul#mainnav li {
		float:none;
	}
	ul#mainnav > li {
		border-top:1px solid #b7d1ed;
	}
	ul#mainnav > li:first-of-type {
		border-top:none;
	}

	ul#mainnav li a,
	ul#mainnav li:hover > a {
		padding:15px 10px 10px 15px;
		background-color: transparent;
		color:#222;
	}

	ul#mainnav li ul,
	ul#mainnav li:hover ul {
		display:block;
		position:relative;
		background-color: transparent;
		border-radius:none;
		padding:0 15px 15px 15px;
		border:none;
		box-shadow: none;
		width:auto;
	}


	ul#mainnav li ul li a, 
	ul#mainnav li:hover ul li a {
		text-transform: none;
		color:#064f8f;
		padding:5px 10px 5px 20px;
	}

	ul#mainnav li:hover a,
	ul#mainnav li ul li a:hover {
		color:#064f8f;
		background-color: transparent;
	}


	.content.searchBar {
		padding:8px 0 0 0;
		margin:0 -70px 0 0;

		zoom: 0.9;
		-ms-zoom: 0.9;
		-webkit-zoom: 0.9;
		-moz-transform:  scale(0.9,0.9);
		-moz-transform-origin: left top;

		overflow: hidden;
	}

	.content.searchBar form {
		display:inline;
		padding:0;
		margin:0;
		width: auto;
	}

	.content.searchBar input[type="text"] {
		width:180px;
	}


	h1, h2 {
		padding-left:0;
		line-height: 1.5rem;
	}

	div#footerContent {
		text-align: center;
	}

}



/* --------------------------- */

@media screen and (max-width:750px) {

	span.mobile_break {
		color:transparent;
		background-color: transparent;
		display:block;
		clear:both;
		height:1px;
		opacity: 0;
		border:none;
		/*margin-top: 15px;*/
	}

	.violation_details .status_display {
		display: block;
		float:none;
	}
	
}


/* --------------------------- */

@media screen and (max-width:640px) {

	#bannerWrapper div#contactInfo {
		display: block;
	}

	#bannerWrapper div#contactInfo strong {
		display:block;
		padding:5px 0;
	}

	#bannerWrapper div#contactInfo p {
		display: none;
	}


	.content.searchBar .searchBlock {
		display:block;
		margin:15px 0;
	}

}