/***********************************
  huronvalleyweb.com
  huronvalleyweb.css
************************************/

/* colors */
.green { color: #679d20; }
.brown { color: #483b35; }
.blue,.linkover { color: #509ccd; }
.white { color: #e8dbd5; }

.lft {
	text-align: left;
}
html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, pre, a, img, ol, ul, li, fieldset, form, label, section, table, tbody, tfoot, thead, tr, th, td, footer, header, nav {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 98%;
	font-weight: normal;
	vertical-align: baseline;
}
body {
	background: #e8dbd5;
	color: #483b35;
	font-family: "Segoe UI";
	line-height: 1;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;		
	-webkit-transition: background-color 0.8s ease-out;
	-moz-transition: background-color 0.8s ease-out;
	-o-transition: background-color 0.8s ease-out;
	transition: background-color 0.8s ease-out;
	text-align: center;
}
#debug {
	display: none;
	width: 100%;
}
ol, ul {
	list-style: none;
	margin: 0 0 20px 30px;
}	
}
li {
	display: block;
	margin-bottom: 0.5em;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.bold {
	font-weight:bold;
}
.linkover {
	cursor: pointer;
}
h1, h2, h3, h4, h5 {
	margin: 0;
	padding: 0;
}
h1 { font-size: 150%; font-weight: bold; margin-bottom: 0.4em; letter-spacing: 0.02em; text-rendering: optimizeLegibility; }
h2 { font-size: 140%; margin-bottom: 10px; }
h3 { font-size: 140%; margin: 1.0em 0; text-align: left; text-transform: uppercase; }
h4 { font-size: 120%;  margin-bottom: 6px; }
h5 { font-size: 110%; font-style: italic; margin-bottom: 0; }
p { color: #483b35; margin: 0 0 20px 0; line-height: 1.6; text-align: left; }
a, a:visited { color: #483b35; text-decoration: underline; outline: 0; }
a:hover, a:focus { color: #97cd50; }
.clr { clear: both; height: 0; }
a, button {
	-webkit-transition: color 0.2s ease-out;
	-moz-transition: color 0.2s ease-out;
	-o-transition: color 0.2s ease-out;
	transition: color 0.2s ease-out;
}
.modalDialog {
	background: rgba(0,0,0,0.8);	
	font-size: 85%;
	opacity:0;	
	overflow: scroll;
	pointer-events: none;	
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	z-index: 99999;	
}
.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}
.modalDialog > div {
	background: #fff;		
	border-radius: 10px;
	margin: 2.0em auto;
	padding: 1.0em 2.0em 2.0em;
	position: relative;
	text-align: left;
	width: 60%;
}
.close {
	background: #606061;
	border-radius: 12px;
	box-shadow: 1px 1px 3px #000;	
	color: #fff;
	font-weight: bold;	
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	text-decoration: none;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	width: 24px;		
}
.close:hover { background: #00d9ff; }

/**** BASE ****/
#cards {
	padding: 0;
	margin: 0 auto;
	text-align: center;
}
.inner {
	margin: 0 auto;
	padding: 1.3em 0;
	width: 92%;
}
header, footer {
	margin: 0;
	text-align: left;
}
header {
	background: #483b35;	
	border-bottom: 1px solid #e8dbd5;
	box-shadow: 0 0.3em 0.5em #786b65;
	margin: 0;
	padding: 0;
}
header .inner {
	margin: 0 auto;
	padding: 0;
}
#header1 {
	padding: 1.0em 0;	
	text-align: left;
}
#header1 .inner a:hover {
	text-decoration: none;
}
#header2 {
	margin: 0;
	padding: 0;
}
#header2 .inner {
	border-top: 1px solid #786b65;
	padding: 0.5em 0;	
}
#header2 .inner {

}
#logo {
	background: transparent url('../images/logo-dkerwin-50.png') no-repeat 2px 10px;
	padding-left: 60px;
	width: auto;
}
#logo img {
	margin-top: 0;
}
#logo h1 {
	font-size: 150%;
}
#logo h2 {
	color: #c3b2aa;
	font-size: 100%;
	font-style: italic;
	line-height: 1.0;
	margin: -12px 0 0;
	padding: 0;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-rendering: auto;
}
.currentPage, button.currentPage:hover {
	color: #bbb;
	cursor: default;
}
nav {
	margin: 0;
	padding: 0 .3em;
	width: auto;
}
nav ul { margin: 0; padding: 0; 	text-align: right;}
nav ul li {
	color: #e8dbd5;	
	display: inline-block;
	font-size: 100%;
	letter-spacing: 0;
	line-height: 1.0;	
	margin: 0 0 0 20px;
	padding: 0 0 0 12px;
	text-align: right;
	text-decoration: none;	
	text-rendering: auto;
	width: auto;	
}

nav ul li a, nav ul li a:visited {
	color: #e8dbd5;
	text-decoration: none;
	outline: 0;
}
nav ul li a:hover {
	color: #97cd50;
}
li#btnOpenSSL {
	display: none;
}
footer {
	padding: 0;
}
footer .inner {
	border-top: 1px solid #43322a;
	padding: 0 0.3em 1.0em;
}
footer p { 
	color: #e8dbd5;
	margin: 0;
	padding: 0;
	text-align: right;	
}

/**** HOME PAGE ****/
#gallery {
	height: auto;
	margin: 0 auto;
	overflow: hidden;
}
#ssnav-lft,#ssnav-rgt {
	display: inline-block;
	height: auto;
	vertical-align: top;
	width: 10px;	
}
#ssnav-lft img,#ssnav-rgt img {
	height: auto;	
	width: 100%;
}
#ssimg {
	border: 1px solid #685b55;
	display: inline-block;
	height: 158px;
	overflow: hidden;
	width: 292px;
}
#ssimg img { height: auto; margin: 0; max-width: 100%; width: 100%; z-index: 900; }
#mask { background: #281b15 url('../images/img-loading.gif') no-repeat center center; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 10000;}
#mask-home { background: #281b15 url('../images/img-loading.gif') no-repeat center center; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 10000;}
#mask img#preloading { border: 1px solid red; height: 24px; position: absolute; top: 50%; left: 50%; width: 24px; z-index: 20000; }

/**** CONTACT FORM ****/
form#contactform {
	color: #483b35;
	max-width: 100%;
	text-align: center;
}
input[type="text"],input[type="email"],
textarea,select {
	background: #f8fbf5;	
	border: 1px solid #a89b95;
	color: #483b35;	
	padding: 0.5em;
	outline: none;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	color: #444;
	margin: 0 auto;
	display: block;
	width: 90%;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,textarea:focus {
		border: 1px solid #aaa;
 		color: #444;
 		-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
		-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
		box-shadow:  0 0 3px rgba(0,0,0,.2); }
textarea { min-height: 60px; }
#contactform input#formSubmit {
	background: #483b35;
	color: #e8dbd5;
	border-radius: 7px;
	margin: 0 auto;
	padding: 0.5em;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	width: 10.0em;
}
#contactform ul {
	margin: 0 auto;
	padding: 0;
	width: 92%;
}
#contactform ul li {
	margin: 0 auto 1.0em;
	padding: 0;	
	text-align: left;
	width: 90%;
}
#contactform ul li label {
	color: #483b35;
	display: block;
	float: none;
	margin: 0 0 0.3em 0;
	text-align: left;
	width: auto;
}
#contactform ul li pre { color: #483b35; font: 4px 'Courier New','Lucida Sans'; width: auto; }
#message { color: red; padding: 15px 0; }
button.btn, p.btn {
	cursor: pointer;
	color:white;
	background: #113360;
	padding:8px 0;
	width: 86px;
	font-size:16px;
	border-top:1px solid #647893;
	border-right:1px solid #96a3b3;
	border-left:1px solid #dedede;
	border-bottom: 1px solid #DEDEDE;
	border-radius:10px;
	-webkit-box-shadow: 0px 2px 2px 0px rgba(125, 125, 125, .5);
	box-shadow: 0px 2px 2px 0px rgba(125, 125, 125, .5);
}

/* security page */
div#security-refs {
	text-align: center;
}
ul.accordion {
	margin: 0 auto;
	padding: 0;
	width: 100%
}
li.accordion-item {
	margin: 0;
	padding: 0;
}
li.accordion-item a {
	margin: 0;
	padding: 1.0em 0.5em;
}
.accordion-item:first-child > :first-child {
/*	border-radius: 0 0 0 0; */
}
.accordion-title {
	background: #f8fbf5;
	border-bottom: 1px solid #9ea6e5;				
	color: #3b3633;
	display: block;
	font-weight: bold;
	position: relative;
	margin: .5em .5em 0 0;
	padding: .3em .6em;
	text-align: left;
	text-decoration: none;	
}
.accordion-title::before {
    position: absolute;
    top: 1.0em;
    right: 1.0em;
    margin: 0;
    content: '+';
}
:last-child:not(.is-active) > .accordion-title {
}
.accordion-title:hover,
.accordion-title:focus,
li.is-active a {
	background-color: #3d729c;		
	color: #fff;	
}	
ul.accordion-content {
	background: #d8cbc5;	
	display: none;
	margin: 0;
	padding: 0;
}
ul.accordion-content li {
	background: #d8cbc5;	
	margin: 0 0.5em;
	padding: 0.7em 1.0em;
	border-bottom: 1px solid #e8dbd5;
	text-align: left;
}
ul.accordion-content li label {
	display: block;
	width: 15em;
}
ul.accordion-content li a {
	background: #d8cbc5;
	color: #483b35;
	display: inline-block;
	padding: 0;
}
#openssl ul,
#openssl ol {
	margin: 0.2em 0;
	padding: 0;	
	text-align: left;	
}
#openssl ul li, #openssl ol li {
	line-height: 1.3;
	margin: 0.5em 0 0.5em 1.0em;	
}
#openssl ul li ul,
#openssl ol li ul,
#openssl ul li ol,
#openssl ol li ol {
	line-height: 1.3;
	margin: 0.5em 0 0.5em 1.0em;	
}
#openssl ol li {
	margin: 0.5em 0 0.5em 2.0em;	
}
#openssl ul label,
#openssl ol label {
	color: #483b35;
	display: block;
	font-size: 110%;
	font-weight: bold;
}
#openssl ul li label,
#openssl ol li label {
	color: #483b35;
	display: block;
	font-size: 100%;	
	font-weight: bold;
}
#openssl ul li ul li,
#openssl ul li ol li,
#openssl ol li ul li,
#openssl ol li ol li {
	line-height: 1.3;
	margin: 0.5em 0 0.5em 1.0em;
}

#openssl ol li ol li ul li:before {
  content: "\007E\0020";
}
#openssl ol {
	list-style-type: decimal;
}
#openssl ol li ol {
	list-style-type: lower-alpha;

}
@media only screen and (min-width: 480px) {
	html, body, div, span, object, h1, h4, h5, h6, p, pre, a, img, ol, ul, li, fieldset, form, label, section, table, tbody, tfoot, thead, tr, th, td, footer, header, nav {
		font-size: 99%;
	}	
	li#btnOpenSSL {
		display: inline-block;
	}	
	#ssimg {
		height: 199px;
		width: 367px;
	}	
}

@media only screen and (min-width: 768px) {
	html, body, div, span, object, h1, h4, h5, h6, p, pre, a, img, ol, ul, li, fieldset, form, label, section, table, tbody, tfoot, thead, tr, th, td, footer, header, nav {
		font-size: 99%;
	}	
	.inner {
		width: 80%;
	}	
	#ssimg {
		height: 282px;
		width: 520px;		
	}
	#ssnav-lft,#ssnav-rgt  {
		width: 15px;
	}	
}

@media only screen and (min-width: 960px) {
	html, body, div, span, object, h1, h4, h5, h6, p, pre, a, img, ol, ul, li, fieldset, form, label, section, table, tbody, tfoot, thead, tr, th, td, footer, header, nav {
		font-size: 100%;
	}	
	.inner {
		width: 80%;
	}	
	#ssimg {
		height: 391px;
		width: 720px;		
	}
	ul.accordion-content li label {
		display: inline-block;
		width: 6.0em;
	}		
}

@media only screen and (min-width: 1200px) {
	html, body, div, span, object, h1, h4, h5, h6, p, pre, a, img, ol, ul, li, fieldset, form, label, section, table, tbody, tfoot, thead, tr, th, td, footer, header, nav {
		font-size: 100%;
	}	
	.inner {
		max-width: 1024px;
		width: 80%;
	}
	#ssimg {
		height: 500px;
		width: 920px;
	}
	ul.accordion {
		width: 80%
	}
	ul.accordion-content ul li label {
		display: inline-block;
		width: 6.0em;
	}
	div#contact {
		text-align: left;
	}
	form#contactform {
		text-align: left;
	}
	#contactform ul {
		text-align: left;
	}
	#contactform ul li label {
		float: left;
		margin: 0.3em 0.8em 0 0;
		text-align: right;
		width: 10.0em;
	}
	input[type="text"],input[type="email"],
	textarea,select {
		margin: 0;
		width: 25em;
		display: block;
	}
	#contactform ul li label#spam-lbl {
		margin: 0.3em 0.8em 30em 0;
	}
	#contactform ul li input#spam_image {
		margin: 0.3em 0.8em 0.2em 0;
	}	
}