body {
    font-family: 'Roboto', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    text-shadow: 1px 1px 1px #aaa;
	margin-left: 10px;
	margin-top: 10px;
	margin-right: 10px;
}
.bodyheading {
    font-family: 'Roboto', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
    font-size: 20pt;
    text-shadow: 1px 1px 1px #aaa;
	color:#A8CF45;
	text-align:center !important;
}
#header img {
    max-width: 80%;
    max-height: 170px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15%;
    padding-right: 15%;
    margin-bottom: 1em;
    width: auto\9; /* ie8 */
}

#header1 {
	background-color: #A8CF45;
	margin-top: auto;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15%;
	padding-right: 15%;
	padding-top: 15px;
	padding-bottom: 5px;
	/*  margin-bottom: 0.5em;*/
	width: auto\9; /* ie8 */
	text-align: center;
	min-height: 30px;
}

#header2 {
	background-color:#CCC; 
	text-align:center !important;
	padding-top:20px;
	padding-left: 20px;
    padding-right: 20px;
	}

#header2 img {
  	max-width: 100%;
	max-height: 300px;
    margin-left: auto;
    margin-right: auto;
    
    width: auto\9; /* ie8 */
}

.divtable {
	width: auto;
	background-color: #eee;
	border-spacing: 5px; 
	border: 0;
	padding-left: 3%;
	/*font-size: 2vw;*/
	text-align: center;
	margin: 1em 5%;
}

.divtr {
	display: table-row;
	width: auto;
	clear: both;
}

.divtd {
	float: left; /* fix for  buggy browsers */
	display: table-column;
	padding: 5px;
}

.filtertable {
	background-color: #f6f6f6;
	margin: 1em 5% 1em 5%;
	width: auto;
	font-size: 2vw;
}
.filtertable select {
	width:12em;
}
#filterright {
	/*width: 45%;
	float: right;
	align-content: center;*/
	/*min-width: 300px;*/
	display:none;
}
#filterleft {
	width: 45%;
	/*float: left;*/
	align-content: center;
	/*min-width: 300px;*/
}
#arearegionselector, #communityselector {
	width: 45%;
}

#communityselector select, #arearegionselector select {
	font-size: 2vw;
}


#dirdata_filter {
	font-size: 3vw;
	font-weight:bold;
	display: inline-block;
}

	#dirdata_filter input {
		font-size: 3vw;
		width: 70%;
	}

div.dataTables_wrapper div.dataTables_filter {
	width: 80%;
	float: none;
	text-align: center;
}

.links {
	font-size: 2vw;
	background-color: #fff;
	text-align: center;
	margin: 1em 5%;
}

.links img {
		
	max-width: 344px;
	/*max-height: 39px;
	margin-left: auto;
	margin-right: auto;
	width: auto\9; *//* ie8 */
}

#footer {
	background-color: #CCC;
	padding-left: 15%;
	padding-right: 15%;
	padding-bottom: 10px;
	padding-top: 10px;
	text-align: center;
}

#footer img {

    max-width: 100%;
    height: auto;
    margin-top: 1em;
    width: auto\9; /* ie8 */
}
#footertext {
	height: auto;
	/*width: 100%;*/
	text-align: center;
	padding: 1em 3%;
}
#footertext div {
	padding: 0px 3%
}
#footertext img {
	width: 100%;
	height: auto;
	max-width: 255px;
}

td.details-control {
	background: url('images/details_open.png') no-repeat center center;
	cursor: pointer;
}

tr.shown td.details-control {
	background: url('images/details_close.png') no-repeat center center;
}

/* Tooltip container */
.tooltip {
	position: relative;
	display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
	visibility: hidden;
	width: 330px;
	background-color: #555;
	color: #fff;
	text-align: left;
	padding: 10px;
	border-radius: 6px;
	/* Position the tooltip text */
	position: absolute;
	z-index: 1;
	/* Fade in tooltip */
	opacity: 0;
	transition: opacity 0.3s;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}


@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

	#dirdata_filter {
		font-size: 4vw;
	}
	#dirdata_filter input {
		font-size: 4vw;
		width: 100%;
	}

	#communityselector select, #arearegionselector select {
		font-size: 3vw;
	}
	#communityselector {
		margin-top: 3px;
	}

	.links {
		font-size: 3vw;
	}
	.links img {
		width: 100%;
		height: auto;
		max-width :344px;
	}
	#footertext {
		width:auto;
	}
	#footertext img {
		width: 100%;
		height: auto;
		max-width: 255px;
	}

	/* Force table to not be like tables anymore */
	.dirdata table, .dirdata thead, .dirdata tfoot, .dirdata tbody,
	.dirdata th, .dirdata td, .dirdata tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.dirdata thead tr, .dirdata tfoot tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.dirdata tr {
		border: 1px solid #ccc;
	}

	#dirdata td{
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 25%;
		padding-bottom:3px;
		min-height: 1em;
	}


	.dirdata td::before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 20%;
		padding-right: 10px;
		white-space: nowrap;
		background: #f6f6f6;
	}


	.details {
		position: relative;
		left: -25%;
		padding-left: 5px;
		width: 120%;
	}

	/*
	Label the data
	*/
	.dirdata td:nth-of-type(1)::before {
		content: "";
	}

	.dirdata td:nth-of-type(2)::before {
		content: "Name";
	}

	.dirdata td:nth-of-type(3)::before {
		content: "Category";
	}

	.dirdata td:nth-of-type(4)::before {
		content: "Area Region";
	}

	.dirdata td:nth-of-type(5)::before {
		content: "Community";
	}

	.dirdata td:nth-of-type(6)::before {
		content: "Products";
	}

}