﻿body {
  font-family: Arial;
  font-size: 12px;
	background-color: #bcdfe3;
	background-image: url('../images/bg_xtile.gif');
	background-repeat: repeat-x; 
}

h1, h2, h3, a {
	color: #011e4b;
}

h1, h2, h3, p {
	margin: 0 0 18px 0;
}

h1 {
	font-size: 21px;
}

h2 {
	font-size: 18px;
}

h3 {
	font-size: 14px;
}

p {
  line-height: 1.55;
}

a {
	font-weight: bold;
}

a:hover {
	color: #72b0c5;
}

img {
  border-style: none;
}

/* Layout */

.container {
  background-image: url('../images/bg_ytile.gif');
  background-repeat: repeat-y;
  width: 909px;
  min-height: 650px;
  margin: 25px auto 0;
  padding: 0 0 3px 0;
  position: relative;
}

.headcontainer {
  background-image: url('../images/bg_header.gif');
  background-repeat: no-repeat;
  height: 137px;
  width: 909px;
}

.headnav {
  background-color: #011e4b;
  height: 26px;
  width: 894px;
  margin: 0 8px 0 8px;
  padding: 0;
  position: absolute;
  top: 108px;
  border-bottom: solid 3px #fff;
}
  
#logo {
  width: 320px;
  height: 100px;
  position: absolute;
}

.headnav ul {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.headnav a {
  display: block;
  color: white;
  line-height: 26px;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0 15px;
}

.headnav a:hover {
  background-color: #72b0c5;
}

.main {
  background-image: url('../images/bg_container.gif');
  background-repeat: no-repeat;
  width: 910px;
}

.leftcontainer {   
  width: 302px;
  margin: 0 0 0 8px;
  float: left;
}

.formleft {
  background-color: #c7e5e8;
  width: 302px;
  min-height: 520px;
  margin: 0 0 0 8px;
  float: left;
}

.cell {
  font-size: 1.2em;
  padding: 0;
  margin: 0;
}

.cell a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 3px 0 0 9px;
  margin: 0;
}

.cell ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.cell p {
  padding: 6px 0 6px 10px;
  margin: 0;
  font-weight: bold;
  border-bottom: solid 3px #fff;
}

.cell li {
  display: block;
  font-weight: bold;
  height: 26px;
  width: 300px;
  padding: 2px 0 0 2px;
  margin: 0;
  border-bottom: solid 3px #fff;
}

.ttlimg {
  padding-top: 7px;
}
            
.darkaquabg {
  background-color: #72b0c5;
  color: white;
}

.lightaquabg li {
  background-color: #9cc8d6;
  color: white;
}

.chooseus {
  padding: 10px;
}

.chooseus ul {
  padding: 0 0 0 55px;
  margin: 0;
}

.chooseus li {
  padding: 0 0 3px 0;
  margin: 0;
}

.rightcontainer {
  width: 588px;
  padding: 0 0 0 4px;
  position: relative;
  float: left;
}

.rightcontainer_pad {
  width: 538px;
  padding: 15px 25px 15px 29px;
  position: relative;
  float: left;
}  

.window {
  background-color: #b5dcdf;
  position: relative;
  width: 578px;
  height: 170px;
  margin: 3px 0 0 0;
  padding: 5px 5px 10px 5px;
}

.pane {
  display: block;
  background-color: #b5dcdf;
  padding: 0 2px 0 2px;
  margin: 2px 2px 2px 2px;
  width: 280px;
  float: left;
}

.interiorpadding {
  padding: 10px 25px 15px 25px;
}

.footer {
  background-image: url('../images/bg_ytile.gif');
  background-repeat: repeat-y;
  text-align: center;
  margin: 0 auto 0 auto;
  padding: 0;
  width: 909px;
  font-size: 0.9em;
}

.footcontainer {
  background-image: url('../images/bg_footer.gif');
  background-repeat: no-repeat;
  height: 34px;
  width: 909px;
  position: relative;
  top: 0px;
  margin: 0 auto 0 auto;
  clear: both;    
}

.wired {
	display: block;
	text-align: center;
	width: 300px;
	position: relative;
	margin: 0 auto 0 auto;
}

a.wired {
  color: #315172;
  text-decoration: none;
}

.btn {
  background-color: #011e4b;
  border-radius: 100px;
  color: white;
  text-decoration: none;
  padding: 14px 24px;
  font-size: 12px;
  letter-spacing: .02em;
  display: inline-block;
  text-transform: uppercase;
}

.btn:hover {
  color: white;
}

/* Homepage */

.imgright {
	float: right;
	margin: 0 0 0 15px;
}

.imgleft {
	float: left;
	margin: 0 15px 0 0;
}

.center {
  text-align: center;
}

.white {
  color: White;
}

.clear {
  clear: both;
}

/* Gallery */

.slider-wrapper {
  margin: 25px auto 0;
  position: relative;
  overflow: hidden;
  width: 502px;
  height: 424px;
  border: 1px solid #72b0c5;
  padding: 4px;
}

.slides-container {
  height: 100%;
  width: 100%;
  display: flex;
  overflow: hidden;
  scroll-behavior: smooth;
  list-style: none;
  margin: 0;
  padding: 0;
}

.slide-arrow {
  position: absolute;
  display: flex;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 4rem;
  background-color: white;
  border: none;
  width: 2rem;
  font-size: 3rem;
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 100ms;
}

.slide-arrow:hover,
.slide-arrow:focus {
  opacity: 1;
}

#slide-arrow-prev {
  left: 0;
  padding-left: 0.25rem;
  border-radius: 0 2rem 2rem 0;
}

#slide-arrow-next {
  right: 0;
  padding-left: 0.75rem;
  border-radius: 2rem 0 0 2rem;
}

#slide-arrow-prev svg,
#slide-arrow-next svg {
  fill: #0A100D;
  position: relative;
  top: 21px;
  height: 23px;
  width: auto;
}

#slide-arrow-prev svg {
  transform: rotate(180deg);
  left: 2px;
}

.slide {
  width: 100%;
  height: 100%;
  flex: 1 0 100%;
}

.slide img {
  width: 502px;
  height: 424px;
}