@charset "UTF-8";
/* CSS Document */

body {
	background: url(/media/bg-court.jpg) no-repeat top center;
	background-color: #004b8d;
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
}

p{
	font-family: "Arimo", Helvetica, Arial, sans-serif;
  	line-height: 1.5em;
  	font-size: 1.1em;
  	margin-top: 1em;
  	margin-bottom: 1em;
}
.skip {
        position: absolute;
        top: -1000px;
        left: -1000px;
        height: 1px;
        width: 1px;
        text-align: left;
        overflow: hidden;
	z-index: 1;
	
    }
	a.skip:active, 
    a.skip:focus, 
    a.skip:hover {
        left: 60px; 
        top: 10px;
        width: auto; 
        height: auto; 
        overflow: visible;
		color: #fff;
    }
#container {
	position:relative;
	width:1200px;
	height:920px;
	margin: 0 auto;
	top: -10px;
	/* IE top margin trick*/
	padding-top: 5px;
	margin-top: -5px;
}

#header {
	position:relative;
	width:100%;
	height:100px;
	top:1%;
	margin-bottom:2%;
}
.logo{
  width:25%;
  position: relative;
  float: left;
}

#directory {
	position:relative;
	float:left;
	width: 62%;
	text-align:right;
	font-family: "Trebuchet", "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size:1em;
  	top: 20%;
}

#calendar{
  	position: relative;
	float: right;
	background: #00aeef;
	width: 10%;
	height: 30px;
	color: #FFFFFF;
	padding: 1%;
  	border-radius:10%;
  	top: 10%;
}
.calendar{
 	width: 30%;
	position: relative;
	float: left;
}
.calendar-txt{
  	float: left;
	position: relative;
	padding: 8%;
  	font-size: 0.9em;
  	font-weight: 600;
}

.calendar-txt a:link, .calendar-txt a:visited{
  	color: #000;
}

.searchBox {
	width: 200px;
	height:30px;
	padding: 0 0 0 1%;
	color: #000;
	line-height: 1.5em;
	font-size: 1.5em;
	border:3px solid #FFF;
  	border-radius: 10px;
	background:#FFF;
  	opacity: 0.7;
}

input[id="search\ submit"]{
	vertical-align: bottom;
}

#content{
  width: 100%;
  float:left;
  position: relative;
}
#main_content{
	width:96%;
	min-height:710px;
	padding:10px 30px 50px 30px;
	position:relative;
	float:left;
  	top: 2%;
	background: #FFF;
  	border-top: 3px solid #cfb077;
  	border-radius: 10px;
}
#main_content li{
	font-family:Arial, Helvetica, sans-serif;
	margin-bottom:6px;
}

.top_content {
	float: left;
	position: relative;
	width: 100%;
	height: 660px;
	overflow:hidden;
}
.top_content:after {
  content: "";
  display: table;
  clear: both;
  margin-top: 1%;
}
#slider{
  width: 100%;
  max-height: 600px;
}

/*Link Styles */
a:link {
	color: #FFFFFF;
	text-decoration: none;
}
a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
a:hover {
	color: #cfb077;
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
img a:link{
	border: none;
}

#main_content a:link{
	color: #004b8d;
  	text-decoration: none;
  	background-color: #FFF;
}

#main_content a:hover{
	text-decoration:underline;
}
#main_content a:visited{
	color: #004b8d;
}

#main_content .button{
	width:60%;
	margin: 0 auto;
	text-align: center;
	border-radius:10px;
	border: 1px solid #004b8d;
	margin-top: 1%;
  	margin-bottom: 1%;
	clear: both;
}
#main_content .button a:link{
	display:block;
	padding:6px;
	border-radius:10px;
	text-decoration:none;
	color: #004b8d;
	box-shadow: none;
	}
#main_content .button a:visited{
	text-decoration:none;
	color: #004b8d;
}
#main_content .button a:hover{
	background: #cfab7a;
	-webkit-transition: background .5s ease;
        -moz-transition: background .5s ease;
        -o-transition: background .5s ease;
        transition: background .5s ease;
}

#footlocker{
  	width: 1200px;
	position: relative;
	margin: 0 auto;
}

footer {clear: both; 
color:#FFF;
background: #004b8d;
padding-top: 20px;
font-size:0.8em;
font-family:'Arimo', Arial, Helvetica, sans-serif;
text-align:center;
bottom:0; 
width:100%;
	padding:10px 0 60px 0;
  top: 30px;
position:relative;
float: left;
	border-radius: 10px 10px 0 0; }

#footer_nav {
	width: 100%;
	margin: 0 auto;
	text-align: left;
	padding: 20px 0;
	overflow: hidden;
}

#ftext{
	padding-top: 10px;
    padding-right: 3%;
    padding-left: 5%;
	padding-bottom: 10px;
	width: 220px;
	float: left;
	position: relative;
	text-align: center;
}
#ftext p{
	color: #fff;
	font-size: 0.9em;
	line-height: 1.5;
	margin-top: 0.2em;
    margin-bottom: 0;
}
#footer a:link{color: #FFF; text-decoration:none;}
#footer a:visited{color:#999;text-decoration:none;}
#footer a:hover{color:#CCC; text-decoration: underline;}
#links-base {
	float:left;
	padding-left: 3%;
	padding-top:20px;
	width:110px;
	margin:0;
	border-left: 1px solid #999;
}
#links-base .link {
	min-width: 24px;
    min-height: 24px;
    font-size: 1em;
	font-weight: 600;
	color: #FFF;
	text-transform: uppercase;
	padding: 0 0 12px;
	margin: 0;
	line-height: 10px;
}
#links-pages {
	float: left;	
	padding-top: 20px;
	margin: 0;
}

#links-pages .link {
	min-width: 24px;
    min-height: 24px;
    font-size: 1em;
	text-transform: uppercase;
	padding: 0 0 12px;
	margin: 0;
	line-height: 10px;
}
#links-pages a:link{
	color:#FFF;
}
#links-pages a:visited{
	color:#cfb077;
}
#links-pages a:hover{
	color:#CCC;
}
#fconnected {
	float: left;
	width: 200px;
	padding-top: 10px;
	text-align: right;
	font-size: 36px;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 0;
	font-family: "Benchnine", "Futura Condensed Medium", "Arial Black", sans-serif;
}
#fconnected .row{
	float:left;
	width:100%;
	padding:4px;
	font-size:16px;
	font-family:'Arimo', Arial, Helvetica, sans-serif;

}
#fconnected img{
	border:0;
	padding:0;
}
#footer .address p{
	font-size: 1.2em;
	color: #fff;
	font-family:'Arimo', Arial, Helvetica, sans-serif;
	line-height: 1.5;
	margin-top: 0.2em;
    margin-bottom: 0;
}

#footer .address a:link{
  	color:#FFF;
    background:#004b8d;
	text-decoration: underline;
}
#footer .address a:hover, #footer .address a:focus{
  	color:#999;
	text-decoration: none;
}

img{
	border:none;
}


/*End*/

/* Text Styles */
h1{
	height:60px;
  	font-size: 2em;
    font-weight: 600;
	background:url(/media/h1bg.png) no-repeat;
	padding:10px 0 0 60px;
	color:#223f81;
  	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	border-bottom: 2px solid #CCC;
}
h2 {
	font-size: 1.6em; 
	color: #009c55;
	font-family: "Arimo", Verdana, Arial, Helvetica, sans-serif;
	font-weight: 600;
	padding: 10px 0 10px 0;	
	margin:0;
	border-bottom: 1px dotted #CCC;
}
	}
h3 {
	color:#000;
	font-family: "Arimo", Verdana, Arial, Helvetica, sans-serif;
	font-size:1.5em;
	font-weight:600;
	margin-bottom:2px;
	margin-top: 1em;
}
h4 {
	font-size: 1.2em;
	font-weight:600;
	font-family: "Arimo", Verdana, Arial, Helvetica, sans-serif;
	padding-bottom:2px;
	}
	
h5 {
	color: #004b8d;
	border-bottom:thin solid #cfb077;
	font-family: "Arimo", Verdana, Arial, Helvetica, sans-serif;
	font-size:1em;
	font-weight:500;
	margin-top:1em;
	margin-bottom:1em;

	}
strong{
  	font-weight: 600;
}
em{
  font-style: italic;
}
#main_content ul li{
 	padding-bottom: 4px;
	margin-top: 0.2em;
	margin-bottom: 0.2em;
	line-height: 20px;
}

#main_content ul{
	margin-bottom: 0.9em;
	margin-top:0.9em;
	padding-left:30px;
	font-size: 1.1em;
	line-height:20px;
	list-style-type: square;
}
#main_content ol{
    list-style-type: decimal;
    margin-bottom: 0.9em;
	margin-top:0.9em;
    padding-left: 30px;
}
#main_content ol.alpha{
	list-style-type: lower-alpha;
}
#main_content ol.roman{
	list-style-type: upper-roman;
}

#main_content ol li{
	padding-bottom:8px;
	margin-bottom: 0.2em;
	font-size: 1.1em;
	line-height:20px;
} 
#main_content .top_content ul{
	padding-left:0;
}
#main_content .top_content ul li{
	list-style-type: none;
}
.style2 {
	font-family: Trebuchet, Verdana, sans-serif;
	font-size: 0.8em;
	color: #FFFFFF;
}
.style3 {
	font-size: 0.7em;
}
.style4 {
	color: #cfb077;
}

blockquote{
	display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
}
sup { 
    vertical-align: super;
    font-size: smaller;
}
.indent{
	display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 10%;
    margin-right: 10%;
}

table{
	display: table;
    border-collapse:collapse;
	border: 2px solid #cfab7a;
	overflow: scroll;
	width: 100%;
  	background: #FFF;
  	font-family: "Arimo", Helvetica, Arial, sans-serif;
}

th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
    text-align: center;
  	padding: 2%;
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}


td {
    display: table-cell;
    vertical-align:top;
	padding:2%;
	border: 2px solid #e4e4e4;
}
tr.gold, th.gold, td.gold{
	background-color:#FDE4C5;
}
tr.gray, th.gray, td.gray{
	background-color:#EEEEEE;
}

tr.blue, th.blue, td.blue{
	background-color:#004B8D;
	color: #FFF;
}
td.ten{
	width: 10%;
}
td.twenty{
	width: 20%;
}
td.forty{
	width: 40%;
}
td.sixty{
	width: 60%;
}

.group{
  	width: 80%;
  	margin: 0 auto;
	padding: 1.5625em;
	border: 1px solid #333;
	border-top: 5px solid #cfb077;
	border-radius: 5px;
	background-color: #f5f5f5;
  	margin-top: 1%;
}

/* Grid - Featured Items */
.wrapper {
  width: 100%;
  margin: 0 auto;
  overflow:hidden;
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 20px;
  grid-template-areas:
    "header"
    "nav"
    "content"
    "sidebar"
    "ad"
    "footer";
}
.wrapper > * {
  grid-column: col-start / span 12;
}

.item1 {
  grid-column: col-start / span 3;
}
.item2 {
  grid-column: col-start 6 / span 4 ;
  grid-row: 1 / 3;
}
.item3 {
  grid-column: col-start 2 / span 2;
  grid-row: 2;
}
.item4 {
  grid-column: col-start 3 / -1;
  grid-row: 3;
}
.listing {
  list-style: none;
  margin: 2em;
  display: grid;
  gap: 20px;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));
}
.listing .wide {
  grid-column-end: span 2;
}

.listing li {
  border: 2px solid #e4e4e4;
  border-radius: 0 0 10px 10px;
  display: flex;
  flex-direction: column;
  background: #FFF;
  text-align: center;

}
.listing .photo img{
  max-width: 100%;
}
.listing .photo a:hover{
  	opacity:0.7;
	-webkit-transition: opacity 0.5s; /* Safari */
	transition: opacity 0.5s;
}
.listing .cta {
  margin-top: auto;
  padding: 10px;
  text-align: center;
}

.listing .body {
  padding: 0 20px;

}
.listing h2{
  background: #004b8d;
  color: #FFF;
  font-family: 'Benchnine', Arial, Helvetica, sans-serif;
  border: none;
}

/* Canbar */
div#canton_bar {
	background-color: #333;
  	width:100%;
  	height: 40px;
  	border-radius: 10px;
  	font-size: 1.3em;
  	font-family: 'Benchnine', Arial, Helvetica, sans-serif;
	}

div#canton_bar .access {height:0;width:0;overflow:hidden;position:absolute;}
div#canton_bar h1{
	border: none;
	background:none;
  	height: 0;
	}
div#canton_bar h1.logo a{
	width:200px;
	height:28px;
	overflow:hidden;
	text-indent:-9000px;
	background:url(/media/logowordmark-white.svg) no-repeat;
	float:left;
	}

div#canton_bar #topnav {padding:1%;list-style:none;float:right;}

div#canton_bar #topnav li {
	float:left;
	font-size:1em;
	text-transform:uppercase;
	padding:3px 8px 3px 7px;
}
div#canton_bar #topnav li.last {background:none;padding-right:0;}
div#canton_bar #topnav li a {color:#FFF;text-decoration:none;}
div#canton_bar #topnav li a:hover {text-decoration:underline;}


.center{
	text-align: center;
}
.left{
	text-align: left;
}
.right{
	text-align: right;
}

img.centered{
	margin: 0 auto;
	display: block;
}
img.alignleft{
	float: left;
	margin: 2%;
	display: inline;
}
img.alignright{
	float: right;
	margin: 1%;
	display: inline;
}