@charset "utf-8";
/* CSS Document */
html, body {
	background-color: transparent;
}
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	margin: 0; 
	padding: 0;
	color: #000;
	background-image: url(images/bg.jpg);
}
#container {
	max-width: 960px;  
	background: #FBFEEC;
	margin: 0 auto;
}
#header {
	padding: 0px; 
}
h1,h2,h3 {
	font-family: 'Arsenal', sans-serif;
	color: #006837;
	font-weight: bold;
	line-height: 1.2;
}
h4 {
font-weight:bold;
font-size:14px;
padding: 20px 0 0 0;
line-height: 1.2;
margin: 0;
}
h1 {
	margin: 0;
    font-size: 28px;
}
#header h1 {
	margin: 0;
	padding: 40px 10px 5px 20px;
    color: #fff;
    font-weight: 900;
    font-size: 32px;
    transform: scaleX(1.4);
    transform-origin: 0 0;
	line-height: 1;
	font-family: 'Vollkorn', serif;
	display:inline-block;
}
body.hp-body #header h1 {
	transform-origin: center;
	font-size: 26px;
	padding-left: 0;
	line-height: 8px;
}
#hp-footer p {
	color: white;
    font-size: 10px;
    font-family: Arial, sans-serif;
    margin: 10px 0;
}
#header h3 {
    margin: 0;
    color: #cbd965;
    line-height: 1;
    padding: 0 0 30px 130px;
    font-size: 18px;
    font-weight: 500;
    font-family: Oswald;
    transform: scaleY(0.9);
}
 body.hp-body #header h3 {
    padding-left: 64px;
    font-size: 15px;
}

#header-bg {
 background-image: url(images/header-bg.jpg);
 background-size: cover;
}
#mainContent {
	padding: 60px 80px; 
}
#mainContent.wide-padding {
	padding: 60px 120px; 
}
#mainContent p {
	margin: 0;
	padding: 20px 0 20px 0;
	font-size: 14px;
}
#mainContent.p2 p {
	padding-bottom:0;
}
#mainContent img.alignright {
	margin:10px 0 10px 10px;
	float:right;
	max-width:30%;
	height:auto;
}
span.smallfont {
	font-size:0.8em;
	color: #666666;
}
ul {
margin: 0 0 0 20px;
padding: 0 0 0 20px;
}
li {
margin: 0 0 0 20px;
padding: 0;
}
#mainContent ul li p {padding: 0 0 20px 0;}
#footer {
	background-image: url(images/footer-bg.jpg); 
	background-size: cover;
	text-align: center;
	padding-bottom: 50px;
}
#footer p {
	margin: 0;
	padding: 10px 0; 
}
.style1 {
	font-size: 12px;
	color: #FFFFCC;
}
a:link {
	color: #006600;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #006600;
}
a:hover {
	text-decoration: none;
	color: #009933;
}
a:active {
	text-decoration: none;
}
p.style5 {font-size: 12px !important;
	text-align:center;
	}
#feedback-info {
	display: table;
	margin: 40px auto 0 auto;
	border-collapse: separate;
  	border-spacing: 10px;
	text-align: center;
}
.feedbackrow {
	display:table-row;
}
#feedback-info h4 {font-size: 15px;
	font-weight: bold;
	margin: 0;
	padding: 0;
	color: #333;
}

#feedback-info p {font-size: 13px;
	font-weight: normal;
	color: white;
	padding: 5px 0 0 0;
	margin: 0;
	line-height: 16px;
}


#feedback-info p.name {
	font-size: 12px;
	float: left;
}

#feedback-info p.date {
	font-size: 12px;
	float: right;
}

#feedback-info .class3 h4 {
	color:#3b5e1e;
}

#feedback-info .class4 h4 {
	color: #c1d72d;
}

#feedback-info .class4 p {
	color: black;
}

#feedback-info .class3 p {
	color:#555;
}

#feedback-info .class1 p.name, #feedback-info .class1 p.date {
	color: #333;
}

#feedback-info .class4 p.name, #feedback-info .class4 p.date {
	color: white;
}

#feedback-info .class2 p.name, #feedback-info .class2 p.date,
#feedback-info .class3 p.name, #feedback-info .class3 p.date {
	color: black;
}


#feedback-info img {
	margin: 5px 5px 0 0;
	width: 80px;
	height: auto;
	float: left;
	clear: both;
}

#feedback-info img.bottom {
	width: 188px;
	margin: 5px auto 0 auto;
}

#feedback-info .feedbackitem {
	padding: 8px;
	width: 250px;
    display: table-cell;
    text-align: left;
    margin: 4px 2px;
}
.referrals-item {
	display: block;
	margin: 20px 0;
}
.referrals #reasonCode {margin-bottom:10px}

 img.shadow {
-moz-box-shadow: 0 0 5px #222;
-webkit-box-shadow: 0 0 5px #222;
box-shadow: 0 0 5px #222;
background-color: white;
 }
body.ty-page #content-desktop #header .topnav, .topnav {
    background: rgba(93,142,53,1);
	background: -moz-linear-gradient(top, rgba(93,142,53,1) 0%, rgba(56,90,29,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(93,142,53,1)), color-stop(100%, rgba(56,90,29,1)));
	background: -webkit-linear-gradient(top, rgba(93,142,53,1) 0%, rgba(56,90,29,1) 100%);
	background: -o-linear-gradient(top, rgba(93,142,53,1) 0%, rgba(56,90,29,1) 100%);
	background: -ms-linear-gradient(top, rgba(93,142,53,1) 0%, rgba(56,90,29,1) 100%);
	background: linear-gradient(to bottom, rgba(93,142,53,1) 0%, rgba(56,90,29,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d8e35', endColorstr='#385a1d', GradientType=0 );
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #dece92;
    text-align: center;
    padding: 12px 16px;
    text-decoration: none;
    font-size: 17px;
	font-family: 'Arsenal', sans-serif;
	font-weight: normal;
	font-size: 20px;
}

.app-body .topnav a {
    padding: 9px 8px;
	font-size: 18px;
}

/* Change the color of links on hover */
.topnav a:hover, .topnav a.active,
body.ty-page #content-desktop #header .topnav a:hover, .topnav a.active,
 .topnav .dropdown:hover button.dropbtn,.topnav .dropdown button.active {
  background: rgba(77,117,44,1);
	background: -moz-linear-gradient(top, rgba(77,117,44,1) 0%, rgba(46,74,23,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(77,117,44,1)), color-stop(100%, rgba(46,74,23,1)));
	background: -webkit-linear-gradient(top, rgba(77,117,44,1) 0%, rgba(46,74,23,1) 100%);
	background: -o-linear-gradient(top, rgba(77,117,44,1) 0%, rgba(46,74,23,1) 100%);
	background: -ms-linear-gradient(top, rgba(77,117,44,1) 0%, rgba(46,74,23,1) 100%);
	background: linear-gradient(to bottom, rgba(77,117,44,1) 0%, rgba(46,74,23,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d752c', endColorstr='#2e4a17', GradientType=0 );
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* Dropdown Button */
.topnav button.dropbtn, a.dropbtn {
  background-color: transparent;
    color: #dece92;
    font-family: Arsenal, sans-serif;
    font-weight: normal;
    padding: 12px 16px;
    font-size: 20px;
    border: none;
    box-shadow: none;
}

/* The container <div> - needed to position the dropdown content */
.topnav .dropdown {
  float: left;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.topnav .dropdown-content {
 display: none;
  position: absolute;
  background-color:#92bb6f;
/*  background-color: rgba(255,255,255,0.2); 
  border-radius:4px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
  z-index: 100;
}

/* Links inside the dropdown */
.topnav .dropdown-content a {
  color: #006633; 
  padding: 10px 4px 10px 16px;
  text-decoration: none;
  display: block;
  font-size:20px;
  font-family: Arsenal, sans-serif;
  text-align:left;
 }

/* Change color of dropdown links on hover */
.topnav .dropdown-content a:hover, a.dropbtn:hover,.topnav .dropdown-content a.active {/*background-color:rgba(255,255,255,0.4); border-radius:4px;*/ 
/*color: #dece92; */
background:#76a74c;}

/* Show the dropdown menu on hover */
.topnav .dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.topnav .dropdown:hover button.dropbtn {/*background: #92bb6f;*/}

.topnav .arrow {
margin: 0 3px 3px 3px;
    border: solid;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
}

.topnav .down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

input.commentinput {
	width:100%;
	max-width:360px !important;
}

body.hp-body {
	background-color:#2f5317 !important;
}
.hp-body #content-desktop {
	background-image: url(images/bg.jpg);
}
body.ty-page #content-desktop #header {
	margin-top:0 !important;
}
body.ty-page #content-desktop #header h1{
	padding-left:70px !important;
}
#m-container.ty-page, #m-container.ty-page h2 {
	text-align:center;
	clear:both;
}
#content-mobile #m-container {
background-image: url(images/mobile-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 0;
    padding-bottom: 177.7%;}

#content-desktop {display: block;}
#content-mobile {display: none;}

body.app-body #content-mobile {display: block !important; max-width: 600px; margin: 0 auto;}

body.hp-body  .topnav a.icon {
    float: right;
    color: #2f5318;
    background: #fff;
}
body.hp-body  .topnav {
	background: #fff;
}
body.hp-body .fa {
	font: normal normal normal 30px/1 FontAwesome;
}

body.hp-body .topnav a.icon:link {
	 color: #2f5318;
	text-decoration: none;
	background: #fff;
}
body.app-body .topnav a.icon:visited, body.app-body .topnav a:visited {
	text-decoration: none;
	 color: #2f5318;
	 background: #fff;
}
body.app-body .topnav a.icon:hover, body.app-body .topnav a:hover {
	text-decoration: none;
	 color: #2f5318;
	 background: #fff;
}
body.app-body .topnav a.icon:active, body.app-body .topnav a:active {
	text-decoration: none;
	 color: #2f5318;
	 background: #fff;
}

body.app-body .topnav.responsive a {
	color: #2f5318;
    font-weight: bold;
    font-family: Arial, sans-serif;
}
body.hp-body h2 {
	font-family: Oswald, Arial, sans-serif;
	font-weight: 700;
	font-size:30px;
	color: #2f5318;
	margin: 12px 0;
    line-height: 1.2;
    clear:both;
    transform:scaleY(0.9);
}
.fa-trash, .fa-pencil {
	cursor:pointer;
}
a.delete i.fa-trash, a.edit i.fa-pencil {
	font-size:24px;
	float:left;
	padding:16px 5px 5px 5px;
}

.hp-button {
	-moz-box-shadow: 2px 2px 1px 0px #668251;
	-webkit-box-shadow: 2px 2px 1px 0px #668251;
	box-shadow: 2px 2px 1px 0px #668251;
	background-color:#7ba260;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	display:inline-block;
	cursor:pointer;
	color:#fff !important;
    padding: 10px;
    text-decoration:none;
    line-height: 1;
    width:200px;
    margin: 30px 0 0 0; 
    height:34px;
}
.hp-button span.title {
	font-family:Oswald, Arial, sans-serif;
	font-size: 16px;
    font-weight: 500;
    transform: scaleY(0.9);
    display: inline-block;
	}
.hp-button span.smaller {
	font-size:12px;
	font-family:Arial, sans-serif;
	font-style:	italic;
}
.hp-button:hover {
	background-color:#7ba260;
}
.hp-button:active {
	position:relative;
	top:1px;
}
.button-left {
	margin: 0 30px 30px 0;
    line-height: 34px;
    float: left;
    clear: left;
}
.button-right {
margin: 0;
    position: relative;
    top: 7px;
}
body.hp-body  #header {
  margin-top: 280px;
  }
.referral-form label, .delivery-form label, .referrals-item label, .profileform label, #reasonAddress label, #reasonEmailDiv label {
    text-align: right;
    display: inline-block;
    line-height: 28px;
}
.delivery-item label {
	width:180px;
}
.left198 {
	margin-left:198px;
	vertical-align:middle;
	height:18px;
}
.referral-form label, .profileform label, #reasonAddress label, #reasonEmailDiv label {
	width: 170px;
}
.referral-form input, .delivery-form input, .profileform input, #reasonAddress input, #reasonEmailDiv input {
	max-width:250px;
}
div.voterform {
	font-family: Arial, sans-serif !important;
	font-size: 14px;
}
div.voterform h3 {
	font-family: Arial, sans-serif !important;
	font-size:15px;
}
div.voterform h4 {
	display:inline;
	font-size:14px;
	color: #006837;
	padding-top:20px;
}
div.voterform hr {
	margin:20px 0;
	border: 1px solid #a9b492;
}
div.voterform {margin-top:30px}

div.voterform form input, div.voterform form select {
	margin-bottom: 10px;
	border:1px solid #a9b492;
	border-radius:3px;
	font-size:14px;
	padding:5px;
}
div.voterform form select.calendarDateInput{
	margin-bottom: 10px;
	border:1px solid #a9b492;
	border-radius:3px;
	font-size:14px;
	padding:4px 5px;
}
/* .calendarDateInput{
	min-width:50px; 
} */
.calendar {
	padding-bottom:8px;
}
div.voterform form input[type=submit] {
	margin-top:20px;
}
div.voterform form input[type=submit]:hover, div.voterform form input[type=button]:hover {
	cursor:pointer;
}
div.voterform form label{
	font-size:14px;
}
div.voterform form label.small{
	font-size:12px;
	padding-bottom:0;
}
div.voterform form label.line2{
	line-height:2;
	}
div.voterform form span.redstar{
	font-size:14px !important;
}
div.voterform div.readmore {
	display: inline;
	color: #006837;
	font-weight:bold;
}
div.voterform div.readmore:hover {
	cursor:pointer;
}
.switch-field {
	display: flex;
	margin-bottom: 20px;
	overflow: hidden;
	margin-top: 10px;
}

div.voterform input.greenbtn {
	background-color: #7da161;
	color: #fff;
	border-radius: 4px;
	font-size:16px;
	padding:10px 20px;
	font-weight:normal;
}
div.voterform input.greenbtn:hover {
	cursor:pointer;
	background-color:#698950;
}
div.voterform button.greenbtnSm {
	background-color: #7da161;
	color: #fff;
	border-radius: 4px;
	font-size:14px;
	padding:5px 20px;
	font-weight:normal;
	border: 1px solid #a9b492
}
div.voterform button.greenbtnSm:hover {
	cursor:pointer;
	background-color:#698950;
}
div.voterform button.greybtnSm {
	background-color: #efefef;
	color: #000;
	border-radius: 4px;
	font-size:14px;
	padding:5px 20px;
	font-weight:normal;
	border: 1px solid #a9b492
}
div.voterform button.greybtnSm:hover {
	cursor:pointer;
	background-color:#ddd;
}
div.voterform button.greybtnSm:focus {
	outline:none;
}

#mainContent div.voterform2 p {
	font-size:14px;
	padding:10px 0;
}
.switch-field input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.switch-field label {
	background-color: #fff;
	color:#949597;
	font-size: 14px;
	line-height: 1;
	text-align: center;
	padding: 8px 16px;
	margin-right: -1px;
	border: 1px solid #a9b492;
/*	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); */
	transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
	cursor: pointer;
}

.switch-field input:checked + label {
	background-color: #7da161;
	color: #fff;
}

.switch-field label:first-of-type {
	border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
	border-radius: 0 4px 4px 0;
}
input.camerabutton {
	font-family: FontAwesome !important;
	color:#006837;
	padding:5px 20px;
	font-size:16px !important;
	cursor:pointer;
}
.referrals {
	position:relative;
	clear: left;
}
.ref-image {
 	max-height: 130px;
    position: absolute;
    top: 0;
    left: 440px;
    width: auto;
    max-width: 232px;
    height: auto;
}
.right-left {
	float: right;
}
fieldset {
	border: none;
    display: inline;
    margin: 0;
    padding: 0;
}
.hidden {display:none}
.fltright {
 float:right;}
 
 div.delivery-form img {
 border:solid 1px #ccc;}

 body.app-body .topnav a:not(:first-child) {display: none;}
 body.app-body .topnav a.icon {
    float: right;
    display: block;
	padding: 14px 20px;
  }
  .ref-image {
   position: initial;
  }
 /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  body.app-body .topnav.responsive {position: relative;}
  body.app-body .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  body.app-body .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
	padding-left: 20px;
    margin-left: 0 !important;
  }
.applinks {
	display:block;
	text-align: center;
    padding-top: 0;
    float: right;
}
.referral-form {
	float: left;
    margin-bottom: 30px;
    width: 500px;
}
@media only screen and (max-width:960px) {
#container {
	width: 100%; 
}
#mainContent {
    padding: 40px 20px;
}
#mainContent.wide-padding {
    padding: 40px 60px;
}
.topnav a {
	padding: 14px 8px;
}
body.app-body  .topnav a {
	padding: 9px 8px;
	font-size:18px;
}

}

@media screen and (max-width: 700px) {
#feedback-info {
	display: inline-block;
}
.feedbackrow {
	display:inline;
}
#feedback-info .feedbackitem {
	display:inline-block;
	width: 90%;
    max-width: 500px;
}
.applinks {
	float:none;
}
.button-left,.button-right {
	float: none;
    text-align: center;
    display: block;
}
.button-right {
	margin: 10px auto;
}
.button-left {
	margin: 30px auto;
}
#mainContent img.alignright { 
	display:none;
}

}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Hamburger"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .topnav div.dropdown {display: none;}
  .topnav a.icon {
    float: left;
    display: block;
	padding: 14px 20px;
  }
   h1 {
  font-size:22px;
  }
ul {
	margin: 0;
	padding: 0;
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
	padding-left: 20px;
    margin-left: 0 !important;
  }
  
   .topnav.responsive div.dropdown {
    float: none;
    display: block;
    text-align: left;
	padding-left: 0;
    margin-left: 0 !important;
   }
   .topnav.responsive .dropdown-content {
    display: block;
    position: relative;
    background-color: transparent;
    z-index: 1;
     }
   .topnav.responsive .dropdown-content a {
      color: #dece92;
   }
   .topnav.responsive .dropdown-content a.active {
    background: rgba(77,117,44,1);
	background: -moz-linear-gradient(top, rgba(77,117,44,1) 0%, rgba(46,74,23,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(77,117,44,1)), color-stop(100%, rgba(46,74,23,1)));
	background: -webkit-linear-gradient(top, rgba(77,117,44,1) 0%, rgba(46,74,23,1) 100%);
	background: -o-linear-gradient(top, rgba(77,117,44,1) 0%, rgba(46,74,23,1) 100%);
	background: -ms-linear-gradient(top, rgba(77,117,44,1) 0%, rgba(46,74,23,1) 100%);
	background: linear-gradient(to bottom, rgba(77,117,44,1) 0%, rgba(46,74,23,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d752c', endColorstr='#2e4a17', GradientType=0 );
}
	.topnav.responsive button.dropbtn {
	display:none;
	}
  #header h1 {
	padding-left: 10px;
    font-size: 26px;
    padding-top: 50px;
 	}
 	#header h3 {
    padding: 0 0 16px 92px;
    font-size: 15px;
 }
 .fltright {
 float:none;}
 	
}

/* When the screen is less than 767 pixels wide, hide all links, except for the first one ("Hamburger"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 767px) {

#content-desktop {display: none;}
#content-mobile {display: block;}
.right-left {
	float: none;
}
	
   .ref-image {
   position: initial;
  }
 }
@media screen and (max-width: 500px) {
.referral-form label, .profileform label, #reasonAddress label, #reasonEmailDiv label {
	width: 190px;
    text-align: left;
    display: inline-block;
    line-height: 28px;
}
.referral-form label.hidemobile, .profileform label.hidemobile {
	line-height: 1px;
}
.referral-form {
	width:250px;
	margin:0 auto;
	float: none;
}

.delivery-form {
	width:300px;
	margin:0 auto;
	float: none;
}
.delivery-form label, label.delivery {
	width: 200px;
    text-align: left;
    display: inline-block;
    line-height: 28px;
	
}
.left198 {
	margin-left:0;
}

	}
@media screen and (max-width: 450px) {
	#receiveDate0_ID,#receiveDate1_ID,#receiveDate2_ID,#receiveDate3_ID,#receiveDate4_ID,#receiveDate5_ID,#receiveDate6_ID,
	#receiveDate7_ID,#receiveDate8_ID,#receiveDate9_ID {
		left: 0;
	}
	
}

@media screen and (min-width: 400px) {
	#content-mobile #m-container {
		background-position: 0 -50px;
}
}
@media screen and (min-width: 450px) {
	#content-mobile #m-container {
		background-position: 0 -100px;
}
body.hp-body #header {
    margin-top: 280px;
}
}
@media screen and (min-width: 490px) {
body.hp-body #header {
    margin-top: 320px;
}
}
@media screen and (min-width: 550px) {
	#content-mobile #m-container {
		background-position: 0 -200px;
}
}
@media screen and (max-width: 420px) {
	body.hp-body #header {
	 	margin-top: 240px;
	 }
}
@media screen and (max-width: 360px) {
	body.hp-body #header {
	 	margin-top: 220px;
	 }
}
@media screen and (max-width: 340px) {
	body.hp-body #header {
	 	margin-top: 160px;
	 }
}
@media screen and (max-width: 300px) {
	body.hp-body #header {
	 	margin-top: 110px;
	 }
}