body{font-family:'Open Sans','Verdana', sans-serif; font-size: 18px;  }
figcaption{font-size: 0.8em; text-align: center; font-style: italic;}
#container{width:100%; height: 100%; position: relative; overflow: hidden;}
#canvas{float:left; position: relative; background-color: #34444b; width:100%; padding:0px;}
#content-frame{width:78%; float:right; position: relative; z-index: 999; padding-right: 1%; background-color:#34444b;}
.sr-only{border:0; clip:rect(0 0 0 0); height: 1px; margin:-1px; overflow: hidden; position: absolute;width:1px;}
#nav {width:22%; left:0px; top:0px; min-height: 1200px; background:#34444b; position:relative;  float:left; padding-top:10px; padding-left: 35px;}
#nav > ul{list-style: none; margin:0px; padding:0px; margin-top:30px;}
#nav > ul li{color:#ddd; cursor: pointer;display: block; padding:0px;}
#nav .orangetop{background-color:#f3ad69; background-image:linear-gradient(to bottom, #f3ad69, #f18d54); border-top-left-radius: 8px;}
#nav .bluetop{background-color:#8acee1;}
#nav .bluemid{background-color:#3f9eb8;}
#nav .orangebottom{background-color:#f18d54;}
#nav .toggle-nav{display: none;}
#nav a{display: block; position: relative; font-weight: 300; color:#fff; text-decoration: none; padding:12px 5px 12px 27px; font-size: 13px; letter-spacing: 1px;  transition: all 0.3s ease-in-out;}
#NavBar{background-color:#0c84a6; color:#a6e0f0; line-height: 1.3em; font-size: 0.9em; padding:105px 0px 25px 25px; border-bottom-left-radius: 8px;}
#nav li{transition: all 0.3s ease-in-out;}
#nav li:hover{background-color:rgba(0,0,0,0.5);}
#nav li:hover a{color:#f7ca2f;}
#nav .orangetop:hover a{color:#fff;}
#Page{float: left; width:100%; max-width: 1600px; margin: auto; margin-top:15px; margin-bottom: 15px; background-color:#fff; border-radius: 8px; box-shadow: rgba(0,0,0,0.63) -6px 2px 11px 1px; overflow: hidden;}
#PageTopper{height: 10px; background-color:#f3ad69;background-image: linear-gradient(to bottom, #f3ad69, #f18d54); border-bottom:1px solid #f18d54;}
#Header{height:75px; background-color:#083250; margin-top: 75px; margin-bottom: 0px; position: relative;}
#Header:before{content:''; display: block; width:175px; height: 175px; background-image: url(../../images/fayette-new-logo.png); background-size: contain; background-repeat:no-repeat; background-position: center; position: absolute; top:0px; left:0px; right:0px; bottom:0px; margin:auto;}
#Header .page_title{font-size: 27px; font-weight: 700; color:#083250; position: absolute; bottom:100%; left:0px; padding:0px 32px 20px 32px;}
#QuickButtons{ width: 100%; text-align: right; right:0px; padding-right: 10px; position: absolute; bottom:100%; float:none; clear:none; border-bottom: none;}
#backlinks{padding-right: 8px; font-size: 0.6em; border-bottom: dashed 1px #ccc; margin-top:4px; margin-bottom: 8px;}
#Content{min-height: 1200px; padding:1px 32px 48px;}

/*Old IntMenu*/
#IntMenu{position: relative; float:left; width:28.5%; max-width: 350px; border:1px solid #f18d54; background-color:#fafafa; padding:30px 0px 35px 14px; font-size: 0.85em; margin:15px 2% 15px 0px; border-radius: 3px; color:#666; font-weight: 600; }
#IntMenu .dhome{font-size: 1.2em;}
#IntMenu a{color:#666; text-decoration: none;}
/*New .intnav*/
nav.intnav{position: relative; float:left; width:28.5%; max-width: 350px; border:1px solid #f18d54; background-color:#fafafa; padding:30px 14px 35px 14px; font-size: 0.85em; margin:4px 2% 15px 0px; border-radius: 3px; color:#666; font-weight: 600;}
nav.intnav .dhome{font-size: 1.2em;}
nav.intnav > ul{list-style: none; padding:0px; margin:0px; }
nav.intnav > ul > li{list-style: none; padding:0px; margin:0px 0px 0.75em; }
nav.intnav a{color:#666; text-decoration: none;}
nav.intnav .submenu{display: none; background-color:#bde1e5; border:1px solid #ccc; padding:10px; margin: 10px 0px; list-style: none; font-size: 0.8em;}
nav.intnav .submenu .submenu{font-size: 1em; padding:0px 0px 0px 10px; border:none;}
nav.intnav .submenu li{margin-bottom: 0.75em;}
nav.intnav .nolink .submenu,
nav.intnav .open-menu .submenu,
nav.intnav .active > .submenu{display: block;}
nav.intnav .active > a{color:#f18d54}
nav.intnav .submenu .active > a{color:#083250;}

#Main{float:left; width:69.5%; padding:1px 15px;}
#Main > div:first-child{margin-top:0px;}
#Footer{color:#333; bottom:10px; text-align: center; padding:15px; font-size: 0.8em; border-top: 1px solid #ddd; background-color:#f6f6f6; margin-top:40px; }
.invalid{box-shadow: #a12d3a 0px 0px 0px 4px;}
.redtext,
.red_text{color:#da4d22;}
.bluetext{color:#0c84a6;}
a.button,
.button_style a{color:#444;
	margin-left:3px;
	font-size:.75em;
	text-transform:uppercase;
	padding: .5em 1.1em;
	border:1px solid #ddd; 		
	-webkit-border-top-left-radius: 3px; 
	-moz-border-top-left-radius: 3px;
	border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px; 
	-moz-border-top-right-radius: 3px;
	border-top-right-radius: 3px;
	border-radius: 3px;
	text-decoration:none; display:inline-block;
 background-color: #dbc795;
 background-image: linear-gradient(to bottom, #fefefe, #e5e4e4);
}
a.button.blue{
	background-image: linear-gradient(to bottom, #0c84a6, #083250); color:#fff;
}
.button:before{display: none;}
@media  screen and (max-width:600px) {
	#QuickButtons a{font-size: 0.65em; padding:0.5em;}
}
ul.no-dot{list-style:none;}
ul.no-dot li{margin-bottom: 18px;}
video{max-width: 100%;}
.video{max-width:100%; }
h1{text-transform: uppercase; font-weight: 700; font-size: 36px; color:#0c84a6; text-align: center; margin:32px auto 32px;}
h1 > .h2{display: block; font-size: 24px; font-weight: 800; color:#999; margin:0px 0px 1em;  line-height: 1em;}
h2{font-size: 24px; font-weight: 800; color:#999; margin:1em 0px;}
h3{font-size: 18px; color:#0c84a6; font-weight: 800;}
.serif{font-family: 'Libre Baskerville', serif;}
.astrisk{font-family: 'Libre Baskerville', serif;}
.dropshadow{box-shadow: rgba(0,0,0,0.5) 1px 1px 8px;}
ol > li{margin-bottom: 1.2em;}
ul.paddedlist > li{margin-bottom: 1.2em;}
.FAQList{list-style: none; padding-left: 0px;}
.FAQList > li{margin-bottom: 2em; padding-left: 0px;}
.FAQList .question{font-size: 1.5em; font-weight: 500; margin-bottom: 1.2em; position: relative; padding-left: 54px;}
.FAQList .question:before{font-size: 48px; color:#0c84a6; content:'Q'; display: inline-block; vertical-align: top; margin-right: 16px; margin-bottom: 16px; position: absolute; top:-12px; left:0px;}
.FAQList .answer{position: relative; padding-left: 54px;}
.FAQList .answer:before{font-size: 48px; color:#f18d54; content:'A'; display: inline-block; vertical-align: top; margin-right: 16px; margin-bottom: 16px; position: absolute; top:-20px; left:4px;}
.empbox,
.box{border:2px solid #0c84a6; padding:24px 48px; margin-top:48px; margin-bottom: 48px;}
.red-box{border-color:#da4d22;}
.empbox2{margin: 48px auto; background-color:#083250; color:#fff; padding:24px;}
.empbox2 a{color:#fff;}
.empbox2 h2{color:#fff;}
.empbox3{border:5px solid #083250; padding:18px; text-align: center; margin-top: 24px; margin-bottom: 24px;}
.empbox3 h2{color:#083250;}
.alertbox{border:10px solid #da4d22; padding:24px 48px; margin-top:48px; margin-bottom: 48px;}
.alertbox h2{color:#da4d22; padding-top:48px; background-image:url("../../images/Alert.svg"); background-size:34px auto; background-repeat:no-repeat; background-position:center top; text-align: center;}
h2.alert,
h4.alert{padding-top:48px; background-image:url("../../images/Alert.svg"); background-size:34px auto; background-repeat:no-repeat; background-position:center top; text-align: center;}

.public-notices{}
.public-notices > div{border-bottom: 1px solid #0c84a6; padding:24px; margin-bottom: 18px;}
.public-notices h4{text-align: center; color:#0c84a6}

.datatable{border:1px solid #333; width:100%; border-collapse: collapse;}
.datatable td{border:1px solid #333; padding: 0.5em 1em;}
.datatable th{padding:0.5em 1em; color:#083250;}
.datatable tbody tr:nth-child(2n){background-color:#cfeeec}
.datatable caption{background-color:#083250; color:#fff; font-size: 1.2em; padding:8px; font-weight: 700; }

table.meeting-schedule{border:1px solid #333; border-collapse: collapse; width:100%;}
table.meeting-schedule thead{background-color:#083250; color:#fff;  font-weight: 700;}
table.meeting-schedule th{text-align: center; padding:8px;}
table.meeting-schedule td{border:1px solid #333; padding:8px 16px;}
table.meeting-schedule tbody tr:nth-child(2n){background-color:#cfeeec;}

table.agenda-table{border:1px solid #333; border-collapse: collapse; width:100%;}
table.agenda-table thead{background-color:#083250; color:#fff;  font-weight: 700;}
table.agenda-table th{text-align: center; padding:8px;}
table.agenda-table td{border:1px solid #333; padding:8px 16px;}
table.agenda-table tbody tr.date{background-color:#cfeeec; text-align: center;}

.interior .main-content{display: flex; flex-direction: row-reverse; }
.interior #public-notice{background-color:#e9fdfc; width:50%; flex-basis: 50%; padding:24px 16px;}
.interior #public-notice .notice{font-size: 0.8em;}
.interior #contact{width:50%; flex-basis: 50%; padding-right: 48px; }
.interior #public-notice > h2.title{color:#f18d54;}




.home #Header{ background-color:#fff; background-image: url(../../images/headerbckgd.jpg); background-size: contain; background-repeat: no-repeat; background-position: left top; margin-top:0px; height: 125px; position: relative; }
.home #Header:before{display: none;}
.home #QuickButtons{bottom:0px;}
.home #Content{display: flex; flex-direction: row-reverse; padding:1px 0px 0px 0px;}
.home #NewsContent{flex-basis: 68%; display: flex; flex-direction: row-reverse;}
.home #PublicNotice{flex-basis: 35%; background-color:#e9fdfc; padding:24px 0px;}
.home #PublicNotice h2{text-align: center; margin-top:0px; margin-bottom: 0px;}
.home #News{flex-basis: 65%; width:65%; background-color:#ededed; padding-top:24px;}
.home #News h2{text-align: center; color:#0c84a6; margin-top:0px;}
.home #HomeLinks{flex-basis: 33%; padding:24px 16px;}
.home #HomeLinks h2{text-align: center; margin-top:0px; margin-bottom: 0px;}
.home #PublicNotice .notice{font-size: 0.8em;}

.press-release{padding:14% 16px 16px; background-image: url(../../images/press-release-header.png); background-size: 100% auto; background-position: center top; background-repeat: no-repeat; border-bottom: 1px solid #0c84a6; margin-bottom: 4px; font-size: 0.8em;}
.news .event{padding:16px; font-size: 0.8em; margin-bottom: 4px; border-bottom: 1px solid #0c84a6;}
.press-release h4{text-align: center; color:#083250; margin-top:1.5rem;}
#HomeLinks h3{text-align: center;}
#HomeLinks h3 img{display: block; margin-left: auto; margin-right: auto; max-width: 100%;}
#HomeLinks h3 a:before{display: block; content:''; width:100%; height:auto; padding-top: 25%; background-size: contain; background-repeat: no-repeat; background-position: center;}
#HomeLinks .covid a:before{display: none;}
#HomeLinks .boc a:before{background-image: url(../../images/fayette-new-logo.png); padding-top:45%;}
#HomeLinks .transportation a:before{background-image: url(../../images/Fayette-TP-Logo.png);}
#HomeLinks .splost2017 a:before{background-image: url(../../images/2021/splost.svg);}
#HomeLinks .water a:before{background-image: url(../../water/water-logo.png);}
#HomeLinks .online-payments a:before{background-image: url(../../images/2021/online-payments.svg);}
#HomeLinks .forms a:before{background-image: url(../../images/2021/Forms.svg);}
#HomeLinks .everify a:before{display: none;}

#NewsList{list-style: none; margin:0px}
#NewsList li{margin-bottom: 24px;  padding-bottom: 24px; border-bottom: 2px solid #999; position: relative; padding-left: 150px;}
#NewsList li .teaser{position: absolute; top:0px; left:0px; width:125px; height: 100px;}
#NewsList .title .date{font-weight: 800; color:#999;}
#NewsList .title h3{margin:6px 0px 0px;}
#NewsList .title p{margin-top:6px}
#NewsList li.press-release{background-image: none; padding:0px 0px 24px 150px; font-size: 1em;}
#NewsList h4.accordian-header{color:#083250; text-align: center;}


	.home #Content{display: grid; grid-template-columns: 60% 40%; grid-template-rows: auto 1fr;}
	.home #News{width:auto;}
	.home #Content #NewsContent{grid-column-start:1; grid-row-start:span 2;  display: block; width:auto;}
	.home #Content #HomeLinks{grid-column-start:2; grid-row-start:2; overflow: hidden; }
	.home #Content #PublicNotice{grid-column-start:2; grid-row-start:1; }


@media screen and (max-width:1296px){
	.home #Content{display: flex; flex-direction: column;}
	.home #NewsContent{ order:2;}
	.home #PublicNotice{ order:1;}
	.home #Content #HomeLinks{order:3}

	.home #News{width:auto;}
}

@media screen and (max-width:800px){
    .interior .main-content{flex-direction: column;}
    .interior #public-notice{width:auto; flex-basis: 100%;}
    .interior #contact{width:auto; flex-basis: 100%; padding-right: 0px;}
}

@media screen and (max-width:750px){
	.home #Content{flex-direction: column;}
}

/*............full site menu styles............*/
#MPbackground{
	display:none;   
    position:fixed;    
    _position:absolute; /* hack for internet explorer 6*/    
    height:100%;    
    width:100%;    
    top:0;    
    left:0;    
    background:#000000;     
    z-index:999;  
}

#MPopup{    
    display:none;     
    _position:absolute; /* hack for internet explorer 6 */      
    z-index:999;
	margin-left:auto;
	margin-right:auto;
	width:90%; 
	left:0px;
	max-width:1200px;    
}   
.MPInterior{
	width:95%;
	margin-left:2%;
	margin-right:2%;
	
	padding-left:3%;
	padding-right:3%;
	background-color:#FFF;
	margin-top:0px;
	position:relative;
	left:0px;
	top:10px;
	border-left:1px #0c0c0c solid;
	border-bottom:1px #0c0c0c solid;
	padding-top:2%;
	padding-bottom:45px;
	box-shadow:1px -1px 2px #333;	
}
.MPInterior ul {
	list-style:none;
	margin-left:-10px;
}
.hide_menu{
	position:absolute;
	top:5px;
	right:5px;
	width:1.5em;
	height:1.5em;
	
}
.nav_div a{
	color:#000;
	text-decoration:underline;
}
.nav_div a:hover {
	color:#AC191C;
}
.nav_div a:visited {
	color:#666;
}
#MainLinks, #FeatureLink, #Docs li {
	/*line-height:1.5em;*/
}
.nav_div ul li{
	padding:0px 0px 3px; font-size: 0.9em;
}
#FeatureLink, #MainLinks, #Docs, .otherLinks {
	/*border:0px;*/
}
#FeatureLink {
	margin-top:15px;
	background-color:rgba(243,224,201,.3);
	border:1px solid #CB6021;
	margin-left:3%;
	padding:25px;
	float:left;
	width:50%;
}
#Docs {
	margin-top:15px;
	background-color:rgba(207,240,244,.3);
	padding:25px;
	border: 1px solid #417d15;
	margin-left:3%;
	float:left;
	width:35%;

}
#MainLinks {
	padding:25px;
	border: 1px solid #417d15;
	margin-left:3%;
	margin-top:35px;
	
	width:88%;
}
.otherLinks {
	border-left:1px solid #A28C8D;
	padding-left:5px;
	margin-top:25px;
}
#MainLinks .otherLinks{margin-top: 25px; width:31%; margin-left: 2%; float:left;}
#MainLinks .otherLinks:nth-child(3n+1){clear: left;}

/*---------styles for responsive images--------------------*/
.eighthundred {
	width:100%;
	max-width:800px;
}
.sevenhundred {
	width:100%;
	max-width:700px;
}
.sixhundred {
	width:100%;
	max-width:600px;
}
.fivehundred {
	width:100%;
	max-width:500px;
}
.fourhundred {
	width:100%;
	max-width:400px;
}
.threehundred {
	width:100%;
	max-width:300px;
}
.twohundred {
	width:100%;
	max-width:200px;
}
.onehundredfifty {
	width:100%;
	max-width:150px;
}
.onehundred {
	width:100%;
	max-width:100px;
}

/*STYLES 2022*/
.styles2022 #Header .page_title{display: none;}
.styles2022 #Content{padding:1px 48px 48px;}
.styles2022 .section-top{display: table; margin-bottom: 48px; width:100%; margin-left: -48px;}
.styles2022 .section-top .intnav{display: table-cell; float:none; border:none; border-left: 4px solid #f18d54; background-color:#efefef; border-radius: 0px; width:285px; vertical-align: top; padding-top:48px;}
.styles2022 .section-top #Main{display: table-cell; float:none; width:auto; padding:1px 48px 48px;}

@media screen and (max-width:1056px){
	.text-wrap{padding-left: 16px; padding-right: 16px;}
	#Content .content-wrap{margin-left: 16px; margin-right: 16px;}
	#Content .content-wrap .text-wrap{padding-left:0px; padding-right: 0px;}
	.styles2022 .section-top #Main{padding:0px 16px; display: block;}

	.empbox, .box{
		padding:8px 12px; margin-top:24px; margin-bottom: 24px;
	}
}

@media screen and (max-width:985px){
    #content-frame{left:300px; padding-right: 50px; transition: all 0.5s ease-out; width:100%; }
    .nav-collapsed #content-frame{left:50px;}
    #nav{position: absolute; padding-left: 5px; padding-top: 0px; width:300px;}
    #nav #toggle li .toggle-nav{display: block; color:#fff;font-size: 0.8em; line-height: 0.8em; position: absolute; top:6px; left:6px;}
    .toggle-nav hr{margin-top:3px; height: 3px; margin-bottom: 0px; color:#fff; background-color: #fff; border:none;}
    #nav #toggle li{padding-left: 50px; position: relative; }
    
    
    #Header .page_title{font-size: 18px; padding-bottom: 24px;}
    h1{font-size: 36px;}
    #Content{position: relative; overflow: hidden;}
    nav.intnav{position: absolute; top:0px; left:auto; right:100%; bottom:0px; z-index: 999; width:165px; margin:0px; transform: translateX(0px); transition: all 0.3s ease-in-out;}
    nav.intnav.on{transform: translateX(165px);}
    nav.intnav .nav-toggle{position: absolute; top:-1px; left:100%; padding:4px; border:1px solid #f18d54; background-color:#fafafa; border-top-right-radius: 3px; border-bottom-right-radius: 3px; transform: translateX(-1px); border-left: none; transition: all 0.3s ease-in-out;}
    nav.intnav .nav-toggle:before{content:'MENU'; border-bottom: 1px solid #f18d54; padding-bottom: 2px; display: block; transition: all 0.3s ease-in-out;}
    nav.intnav .nav-toggle:after{content:''; display: block; width:46px; height: 5px; border-top:1px solid #f18d54; border-bottom: 1px solid #f18d54; margin-top: 5px; position: relative; transition: all 0.3s ease-in-out;}
    nav.intnav.on .nav-toggle{padding:16px 8px;}
    nav.intnav.on .nav-toggle:before{content:''; width:36px; transform-origin:  bottom center; transform: translate(2px, 7px) rotate(45deg); }
    nav.intnav.on .nav-toggle:after{ width:36px; border-bottom:none; transform-origin: top center; transform: translate(1px, 1px) rotate(-45deg);}
    #Main{width:auto; float:none; padding:0px;}

	.styles2022 .section-top{margin-left: 0px; display: block;}
    .styles2022 .section-top #Main h1{margin-left:40px; margin-right: 40px;}
    .styles2022 .section-top .intnav{width:245px; display:block;}
    .styles2022 nav.intnav.on{transform:translateX(245px); box-shadow: rgb(0 0 0 / 24%) 3px 0px 3px;}
    .styles2022 nav.intnav .nav-toggle{background-color: #efefef; border:none;}
	.styles2022 #Content{padding:0px;}
}


@media screen and (max-width:725px){
    body{font-size: 16px;}
    #Header{margin-top:68px; z-index: 1;}
	.home #Header{height: 75px;}
    #Header:before{width:115px; height: 115px;}
    #QuickButtons{bottom:-58px;}
    #Content{padding:21px 16px 48px;}
    nav.intnav{top:41px;}
    h1{font-size: 24px; margin:20px 40px 15px; }
    .larger{font-size: 1em;}
    .box{margin-top:24px; margin-bottom: 24px; padding:16px 24px;}
    h1 > .h2{font-size: 18px;}
    .column_list li{margin-bottom: 0.8em;}
    .column_list{column-count: 1;}
    #NewsList{padding:0px;}
    
    .FAQList .question{font-size: 1em; padding-left: 24px; margin-bottom: 0.8em;}
    .FAQList .answer{padding-left: 24px;}
    .FAQList .question:before{font-size: 26px; top:-6px; left:-10px;}
    .FAQList .answer:before{font-size: 26px; top:-6px; left:-7px;}
    
    form input.large{width:100%;}
    
    .datatable{display: block;}
    .datatable tbody{display: block;}
    .datatable thead{display: block;}
    .datatable th{display: block;}
    .datatable tr{display: block; border:1px solid #333;}
    .datatable td{display: block; border:none;}

	.styles2022 #Header{margin-top:0px;}
    .styles2022 #Header:before{height: 100px; top:11px;}
    .styles2022 #QuickButtons{text-align: center;     border-bottom: dashed 1px#ccc;}
    .styles2022 #Content{padding:32px 0px 48px; }
	.styles2022 .section-top #Main h1{font-size: 18px;}
	.styles2022 h2{font-size: 18px;}
	#NewsList .ui-accordion .ui-accordion-content{padding:1em 0;}
}

@media screen and (max-width:600px){
	#NewsList li{padding-left:0px; padding-top:100px}
	#NewsList li .teaser{ top:0px; left:0px; right:0px; margin:auto;}
}