/* CSS Document */

ul.noticecat, ul.noticecat li, .boxcontent ul { list-style-type: none; margin: 0; padding: 0; }
ul.noticecat { margin-bottom: 35px; }
ul.noticecat li { display: inline-block; padding: 5px 10px; background: #004790; color: #FFF; 
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin: 0 5px 0 0;
}
ul.noticecat li a { color: #FFF; text-decoration: none; }
h5.sortby { display: inline-block; margin: 0 10px 0 0; }
ul.noticecat li:hover {	background: #00D2FF; }


.alert, .alert-all, .children, .boxcontent div div, .boxcontent li {
	background: url(http://www.fortsmithwater.org/uploads/layout/icon-drop.png) no-repeat left top;
	padding: 0 0 0 40px;
	margin: 25px 0;
}
.children, .boxcontent div div, .boxcontent li { padding: 10px 0 10px 40px; margin: 10px 0; }
.boxcontent div div div { display: none !important; }

.alert:last-child { margin-bottom: 0; }
.alert h5, .alert-all h5, .children h5, .boxcontent div div h5 { line-height: 110%; }
.alert h6 { color: #d8ff00; margin: 0 0 5px 0; }
.alert-all h6 { margin: 5px 0 0 0; }

.boxcontent div div a, .boxcontent li a { color: #FFF; text-decoration: none; text-transform: uppercase; }
.boxcontent div div a h5:hover, .boxcontent li a:hover{ text-decoration: underline; }

.boxcolleft {
	width: 74%;
	margin: 0.5%;
	float: left;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.boxcolright {
	width: 24%;
	margin: 0.5%;
	float: right;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.box {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	float: left;
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	padding: 2.5%;
	width: 24%;
	margin: 0 0.5% 1.5% 0.5%;
	background: #94c500;
	-webkit-box-shadow: 0px 10px 0px 0px rgba(0, 71, 144, 1);
	-moz-box-shadow:    0px 10px 0px 0px rgba(0, 71, 144, 1);
	box-shadow:         0px 10px 0px 0px rgba(0, 71, 144, 1);
	-webkit-transition: all 0.25s; /* For Safari 3.1 to 6.0 */
	transition: all 0.25s;
}
.box { min-height: 350px; }

.homeboxes a:nth-child(2) .box, .homeboxes a:nth-child(5) .box, .homeboxes a:nth-child(8) .box {
	background: #00d2ff;
}
.homeboxes a:nth-child(3) .box, .homeboxes a:nth-child(6) .box, .homeboxes a:nth-child(9) .box {
	background: #004eff;
}
.homeboxes .box img { 
	max-width: 75%;
	margin: 0 auto 30px auto; 
	display: block;
	-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
	filter:alpha(opacity=50);
	opacity:0.5; 
	-webkit-transition: all 0.25s; /* For Safari 3.1 to 6.0 */
	transition: all 0.25s;
}
.homeboxes .box:hover img {
	max-width: 80%;
	-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
	filter:alpha(opacity=100);
	opacity:1.0;
}
.homeboxes .box h4 { font-size: 125%; }

.boxcap, .box-notices-title {
	background: #c3121d;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding: 5% 7.5%;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.box-notices-title { text-align: center; background: #7a0b11; padding: 10% 7.5%; }

.boxcontent, .box-notices {
	padding: 5% 7.5%;
	background: #94c500;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	-webkit-box-shadow: 0px 10px 0px 0px rgba(0, 71, 144, 1);
	-moz-box-shadow:    0px 10px 0px 0px rgba(0, 71, 144, 1);
	box-shadow:         0px 10px 0px 0px rgba(0, 71, 144, 1);
	margin-bottom: 30px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.box-notices {
	width: 100%;
	margin: 0;
	transition: none;
	padding: 5% 10%;
	min-height: 470px;
	background: #c3121d;
	text-align: left;
}
.boxcontent.lc {
	padding: 5% 7.5%;
}
.boxcontent.lc h5 { 
	line-height: 100%;
}

/* .boxcontent ul, .boxcontent li { list-style-type: none; margin: 0; padding: 0; }
.boxcontent li a {
	background: url(http://www.fortsmithwater.org/uploads/layout/icon-drop.png) no-repeat left center;
	padding: 10px 0 10px 40px;
	color: #FFF;
}
.boxcontent li a h5:hover { text-decoration: underline; }
.boxcontent li { padding: 10px 0; }
.boxcontent li h5 { display: inline-block; } */
/* Stylesheet: Elements Modified On 2015-02-10 15:49:57 */
/* CSS Document */

body {
	margin: 0;
	padding: 0;
	text-align: center;
	background: #004790;
	position: relative;
}
header {
	background: #00d2ff;
	padding: 0 2.5%;
}
#logo1 {
	position: absolute;
	top: -45px;
	right: 2.5%;
	-webkit-transition: all 0.25s; /* For Safari 3.1 to 6.0 */
	transition: all 0.25s;
}
#logo1:hover {
	top: -35px;
}
#toplinks {
	float: right;
	padding: 30px 2.5% 30px 0;
	margin: 0px 190px 0px 0;
	width: auto;
}
#toplinks a {
	float: left; margin: 0 5px; width: 95px;
}
#toplinks h5 {
	line-height: 100%;
	font-size: 90%;
}
#toplinks a img {
	-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”;
	filter:alpha(opacity=60);
	opacity:0.6;
	-webkit-transition: all 0.25s; /* For Safari 3.1 to 6.0 */
	transition: all 0.25s;
}
#toplinks a:hover img {
	-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
	filter:alpha(opacity=100);
	opacity:1.0;
	margin: -10px 0 10px 0;
}
#logo2 {
	float: left;
	padding: 20px 0;
	text-align: left;
	width: 550px;
}
#logo2 img {
	float: left;
	margin: 0 20px 0 0;
	max-width: 100%;
	-webkit-transition: all 0.25s; /* For Safari 3.1 to 6.0 */
	transition: all 0.25s;
}
#logo2 a:hover img {
	margin-top: -10px;
}
nav {
	background: #004790;
	text-align: left;
	padding: 0 0 0 2.5%;	
}
.menu {
	margin: 0 190px 0 0;
}
.menu.mobile { display: none; }
main {
	background: #007eff;
	padding: 50px 3%;
}
.home main {
	padding: 30px 3%;
}
#col1 {
	width: 25%;
	float: left;
	margin: 0 5% 0 0;
	text-align: left;
	display: block;
}
#col2 {
	width: 45%;
	float: right;
	margin: 0 5% 0 0;
	text-align: left;
	display: block;
}
#col3 {
	width: 20%;
	float: right;
	display: block;
}
#col3 img { 
	max-width: 100%; 
	-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
	filter:alpha(opacity=50);
	opacity:0.5;
}
footer {
	background: #004790;
	padding: 50px 5%;
}
#footer-left {
	float: left;
	text-align: left;
	width: 50%;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
/* #footer2 {
	float: left;
	width: 33%;
	text-align: center;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;
	box-sizing: border-box;
} */
#footer-right {
	float: right;
	text-align: right;
	width: 50%;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

/* CLEARFIX */

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}
/* Stylesheet: Layout Modified On 2014-11-25 17:10:32 */
/* CSS Document */

/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */

#menu_vert {
   margin-left: 1px;
   margin-right: 1px;
}

/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper { 
   /* Fix for Opera 8 */ 
   /*   overflow: hidden;  */ 
   width: auto;
   text-align: left;
   white-space:nowrap;
   position: relative;
   z-index: 10000;
}
#primary-nav li.menuactive ul a, #primary-nav li li.menuactive ul a {
	color: #FFF;
	background:none;
}
#primary-nav li.menuactive ul a:hover {
	color: #FFF;
	background: #002a56;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
#primary-nav li li.menuactive a, #primary-nav li li li.menuactive a {
	color: #FFF;
	background: #002a56;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
#primary-nav li.menuactive a span {
}
#primary-nav li.menuactive li a span {
	border-bottom: none;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li { 
}
#primary-nav li li, #primary-nav li li li { 
   width: 100%; 
}
#primary-nav li li ul  {
	width: auto;
}
#primary-nav li ul {
	margin-left: 0px;
	margin-top: 0;
	z-index: 1000;
	padding: 20px 0 15px 0;
	background: #002a56;
	-webkit-border-radius: 10px;
	-webkit-border-top-left-radius: 0;
	-moz-border-radius: 10px;
	-moz-border-radius-topleft: 0;
	border-radius: 10px;
	border-top-left-radius: 0;
	-webkit-box-shadow: 0px 10px 0px 0px rgba(0, 71, 144, 1);
	-moz-box-shadow:    0px 10px 0px 0px rgba(0, 71, 144, 1);
	box-shadow:         0px 10px 0px 0px rgba(0, 71, 144, 1);
}
#primary-nav li ul ul {
	margin: -20px 0 0 -10px !important;
}
/* #primary-nav li ul:after {
	bottom: 100%;
	left: 20%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 71, 144, 0);
	border-bottom-color: #004790;
	border-width: 20px;
	margin-left: -20px;
} */
#primary-nav li li ul {
}
/* Unless you know what you do, do not touch this */ 
#primary-nav, #primary-nav ul { 
   list-style: none; 
   margin: 0px; 
   padding: 0px;
   text-align: left;
}
#primary-nav ul { 
   position: absolute; 
   top: auto; 
   display: none; 
	margin-top: 10px;
	margin-bottom: 0px;
}
#primary-nav ul ul { 
   margin-top: 0px;
   margin-left: 0px;
   left: 100%; 
   top: 0px; 
}
#primary-nav li li ul {
	margin-top: -10px;
}
#primary-nav li { 
   margin-left: -1px;
   float: left; 
  text-align: left;
}
#primary-nav li li { 
   margin-left: 0px;
   margin-top: 0px;
   float: none; 
   position: relative; 
}

/* Styling the basic apperance of the menu elements */
#primary-nav a { 
   display: block;
   margin: 0;
   text-decoration: none;
   text-align: left;
}
#primary-nav li li:hover a.menuparent {
}
#primary-nav li a { 
	font-family: 'proxima-nova', Arial, Helvetica, sans-serif;
	font-weight: 400;
	color: #FFF;
	font-size: 26px;
	padding: 20px 20px;
}
#primary-nav li li a { 
	padding: 5px 30px;
	text-decoration: none;
	text-align: left;
	background: none;
	font-size: 18px;
	color: #00d2ff;
}
#primary-nav li a:hover, #primary-nav li:hover a {
	color: #FFF;
}
#primary-nav li a:hover li a, #primary-nav li:hover li a   {
	color: #00d2ff;
	background: none;
	
}
#primary-nav li, #primary-nav li.menuparent { 
}
#primary-nav li li a:hover {
	color: #FFF;
}

#primary-nav li.menuactive a {
	color: #FFF;
	font-weight: 800;
	background: #007eff;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
#primary-nav li li.menuactive a, #primary-nav li.menuactive a:hover {
	color: #FFF;
	background: #002a56;
}
#primary-nav li a:hover, #primary-nav li.menuactive a:hover,
#primary-nav li.menuactive:hover a, #primary-nav li:hover a {
	color: #FFF;
	background: #002a56;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
#primary-nav li.menuactive li a {
	background: none;
	font-weight: 400;
	color: #00d2ff !important;
}
#primary-nav li.menuactive li.menuactive a, #primary-nav li.menuactive li a:hover {
	color: #FFF !important;
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent, 
#primary-nav ul li.menuparent:hover, 
#primary-nav ul li.menuparenth { 
/* arrow for menuparents */
}

/* Styling the apperance of menu items on hover */


#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { 

}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/* 
just add 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul ul ul,
for fourth level 
*/
#primary-nav ul, 
#primary-nav li:hover ul, 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, 
#primary-nav li.menuparenth ul ul { 
   display: none; 
}

/* add 
#primary-nav ul ul ul li:hover ul, 
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, 
#primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul { 
   display: block; 
}


/* IE Hacks */
#primary-nav li li { 
   float: left; 
   clear: both; 
}
#primary-nav li li a { 
   height: 1%; 
}
li li .sectionheader, li li li .sectionheader {
	cursor: pointer;

}
li .sectionheader {
	cursor: pointer;

}
/* Stylesheet: Menu Modified On 2014-12-18 01:10:27 */
.menumobile { display: none; }

@media all and (max-width: 1270px) and (min-width: 0px) {
	
#toplinks a {
	margin: 0;
}

}

@media all and (max-width: 1230px) and (min-width: 0px) {
	
#logo1 { width: 150px; }
#logo1 img { max-width: 100%; }

#toplinks {
	margin: 0px 150px 0px 0;
}
#logo2 { width: 480px; }
#logo2 img {
	margin: 0 10px 0 0;
}
#logo2 h1, #logo2 a h1 { font-size: 260%; }

#primary-nav li a { font-size: 22px; }
#primary-nav li li a { font-size: 16px; }

.homeboxes .box h4 { font-size: 100%; }
.box { min-height: 240px; }
.box-notices { min-height: 415px; }

.alert h5, .alert-all h5, .children h5, .boxcontent div div h5 {
    line-height: 110%;
    font-size: 90%;
}

#col2 {
	width: 50%;
}
#col3 {
	width: 15%;
}
#toplinks {
	margin: 0px 135px 0px 0;
	width: auto;
}
#toplinks a { width: 90px; }
	
}

@media all and (max-width: 1110px) and (min-width: 0px) {
	
a.citydepts { display: none; }

#primary-nav li a { padding: 20px 15px; }
	
}

@media all and (max-width: 1010px) and (min-width: 0px) {
	
#logo1 { display: none; }
#logo2 {
	float: none;
	display: block;
	margin: 0 auto;
	padding: 20px 0;
	text-align: left;
}
#logo2 img {
	-webkit-transition: none; /* For Safari 3.1 to 6.0 */
	transition: none;
}
#logo2 a:hover img {
	margin-top: 0px;
}
#toplinks {
	float: none;
	display: block;
	padding: 0 0 20px 0;
	margin: 0px auto;
	width: auto;
}
#toplinks a {
	float: none; display: inline-block;
}
nav {
	text-align: center;
	padding: 0 0 0 0;	
}
.menu {
	display: table;
	margin: 0 auto;
}
.boxcolleft {
	width: 49%;
}
.boxcolright {
	width: 49%;
}
.box { width: 47%; margin: 0px 1.5% 5% 1.5%; padding: 5%; }

.box-notices {
    min-height: 915px;
}

#col1 {
	width: 30%;
}
#col2 {
	width: 65%;
	margin: 0;
}
#col3 { display: none; }
	
}

@media all and (max-width: 800px) and (min-width: 0px) {
	
.menu.desktop { display: none; }
.menu.mobile { display: block; margin: 0 auto; }

nav { padding: 15px 0; }

.menu.mobile select {
	padding: 15px;
	font-family: 'proxima-nova', Arial, Helvetica, sans-serif;
	color: #004790;
	font-size: 22px;
	background: #FFF;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	width: 90%;
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	border: none;
}
.boxcolleft {
	width: 59%;
}
.boxcolright {
	width: 39%;
}
.box-notices {
    min-height: 940px;
}
#footer-left, #footer-right {
	float: none;
	text-align: center;
	width: 100%;
	padding: 20px 0;
}
.colwrap { display: table !important; width: 100%; }

#col2 { 
	float: none;
	width: 90%;
	display: table-caption;
	margin: 0px 0px 50px;
	padding: 0 5% !important;
}
#col1 { 
float: none; width: 100%; display: table-footer-group; margin: 0; 
}
	
}

@media all and (max-width: 700px) and (min-width: 0px) {
	
.box { min-height: 220px; }
.box-notices { min-height: 860px; }

ul.noticecat li {
    margin: 0px 5px 10px 0px;
}
	
}

@media all and (max-width: 620px) and (min-width: 0px) {
	
.boxwrap { display: table !important; }
	
.boxcolleft, .boxcolright {
	width: 100%;
	float: none;
	display: block;
}
.boxcolright { padding: 1.5%; width: 99%; display: table-caption; margin-bottom: 15px; }
.boxcolleft { display: table-footer-group; }

.box {
    min-height: 280px;
}
.box-notices {
    min-height: 0;
	padding: 5% 10% 10% 10%;
}
.homeboxes .box img { 
	-webkit-transition: none; /* For Safari 3.1 to 6.0 */
	transition: none;
}
.homeboxes .box:hover img {
	max-width: 75%;
}
.box-notices-title {
    padding: 7.5%;
}
.home main {
	padding: 25px 3%;
}
h1 { font-size: 250%; }
	
}

@media all and (max-width: 510px) and (min-width: 0px) {

#logo2 { width: 100%; text-align: center; margin: 0 auto 20px auto; }
#logo2 img {
	margin: 0 auto;
	float: none;
}
#logo2 h1, #logo2 a h1 { font-size: 260%; text-align: center; }

.box {
    min-height: 250px;
}

}

@media all and (max-width: 450px) and (min-width: 0px) {
	
a.citydepts { display: none !important; }

#logo2 h5, #logo2 a h5 {
    line-height: 100%;
    margin-bottom: 10px;
}
#logo2 h1, #logo2 a h1 { line-height: 90%; }
.box { width: 99%; margin: 0px 0 25px 0; padding: 7.5%; }

footer h2 {
    font-size: 200%;
}
	
}
/* Stylesheet: Mobile Modified On 2014-11-25 21:31:16 */
