@import url("reset.css");

.centered { text-align: center }

body {
  background-color: #e1b382;
    background-color: #c89666;
  font-family: 'gasparregular';
}
div#grid {
  .display: grid;
  .grid-template-columns: auto 960px auto;
  .height: 100vh;
}
div#header {
  background-position: center bottom;
  background-size: cover;
  height: 33vh;
}
div#header h1 {
  color: #000;
  font-family: 'gasparbold';
  font-size: 5vh;
  padding-top: 5vh;
  text-align: center;
}
div#content em {
  font-family: 'gasparitalic';
}
div#content h4 {
  font-family: 'gasparbold';
  font-size: 5vh;
  .font-weight: normal;
  margin-top: 5vh;
}
div#content ul {
	list-style: disc;
}
a {
  .font-family: 'OpenSansBold';
  text-decoration: none;
}

@media only screen and (min-width: 592px) {
  div#header {
    .background-image: url('/image/bg-contact.jpg');
    .background-position: center bottom;
    .background-size: cover;
  }
}
@media only screen and (min-width: 1025px) {
  body {
    background-color: #e1b382;
  }
  div#grid {
    display: grid;
    grid-template-columns: auto 960px auto;
    height: 100vh;
  }
  main {
    background-color: #c89666;
    padding: 10px;
  }
}

/*
.width33 { width: 33% }
.width50 { width: 50% }
.width67 { width: 67% }
.width100 { width: 100% }
.alignTop { vertical-align: top }
.alignMiddle { vertical-align: middle }
.padding1 { padding: 1em }

body {
  background-color: #323232;
  background-color: #000;
  background-color: #ed8a63;
  background-color: #c9af98;
  background-color: #e1b382;
}

div#wrapper {
  .background-color: #fff;
  background-color: #c9af98;
  background-color: #c89666;
  .border: 1px solid #00a600;
  color: #00a600;
  color: #000;
  margin: 0 auto;
  padding-top: 1em;
  padding: 1em;
  width: 90%;
  width: 960px;
}
div#header {
  .background-color: #fde586;
  .background-color: #fff;
  height: 320px;
}
div#header.home {
  background-image: url('../image/bg-home.jpg');
}
div#header.about {
  background-image: url('../image/bg-about.jpg');
}
div#header.mktdefs {
  background-image: url('../image/bg-mktdefs.jpg');
}
div#header.bio {
  background-image: url('../image/bg-bio.jpg');
}
div#content {
  margin-top: 1em;
}
div#wrapper div#footer {
  .background-color: #fada5e;
  .border-top: 1px solid #30bf30;
  color: #888;
  font-size: 1.1em;
  margin-top: 1em;
  padding: 0.5em 5em;
  text-align: center;
}

div#wrapper p {
  font-size: 1.5em;
  margin: 1em 0;
  text-align: center;
}
div#wrapper p a {
  color: #ccc;
  font-size: 1.2em;
}

div#content h2 {
  background-color: #30bf30;
  color: #000;
  display: inline-block;
  font-size: 1em;
  font-weight: normal;
  padding: 0.5em;
}
div#content h3 {
  background-color: #00a600;
  color: #000;
  display: inline-block;
  font-size: 1em;
  font-weight: normal;
  padding: 0.5em;
}
div#content h4 {
  font-size: 1.25em;
  font-weight: normal;
  margin: 1em 0 0 0;
}
div#content ul {
	list-style: disc;
	margin: 1em 0 2em 0;
}
div#content ul.list {
  color: white;
	margin: 1em auto;
	width: 86%;
}
div#content li {
  line-height: 1.5;
  margin-left: 1.5em;
}
div#content ul.list li span {
  color: #00a600;
}
div#content li.isCurrent {
  color: #808080;
}
div#content p {
  font-size: 1.5em;
  margin: 2em auto;
  text-align: left;
  width: 80%;
}
div#content p.main1,
div#content p.listHeading {
  margin: 0 auto;
  width: 90%;
}
div#content p.main1 {
  color: white;
  font-size: 1.67em;
  line-height: 1.15;
}
div#content p.main1 b {
  color: #0a0;
}
div#content p.listHeading {
  font-size: 1.33em;
  margin-top: 1em;
}
div#content p.caption {
  background-color: #a3881f;
  background-color: #73ff73;
  background-color: #30bf30;
  color: #323232;
  margin: 1em 0 0 1em;
  padding: 0.25em;
  width: 246px;
}
div#content p.bio {
  font-size: 1.25em;
  text-align: justify;
}
div#content p.bio img {
  border: 0.5em solid #ccc;  
  border-radius: 0.75em;
  float: right;
  margin: 0 0 1em 1em;
  vertical-align: bottom;
}
div#content div.barchart {
  border: 2px solid #30bf30;
  margin: 0 0 0 1em;
  overflow: hidden;
  width: 250px;
}
div#content a {
  color: #00a600;
  color: #008;
  white-space: nowrap;
}
div#content a.isCurrent {
  color: #808080;
}
div#footer {
  clear: both;
}

div#footer a {
  color: #00f;
}
div#content a:hover {
  text-decoration: underline;
}

div#rjo {
  border: 2px solid #30bf30;
  height: 372px;
  width: 536px;
  overflow: hidden;
  position: relative;
}
div#rjo object {
  height: 2048px;
  width: 1024px;
  margin: -190px 0 0 -139px;
}
div#rjo img#hider {
  position: absolute;
  top: 0;
}

div.contact h4,
div.mktdefs h4 {
  font-size: 1.75em !important;
}
div.contact div {
  display: table;
  margin: 1em auto;
}
div.contact table {
  margin: 1em 0 0 0;
}
div.contact table td {
  line-height: 1.25;
  padding: 0 0.5em 0 0;
}

div.barchart applet {
  margin-top: -17px;
}
div.lines13 {
  height: 190px;
}

div.table {
  .border: 1px dotted green;
  display: table;
  margin: 0 auto;
}
div.cell {
  .border: 1px dotted green;
  display: table-cell;
  .padding: 0 6px;
  .vertical-align: middle;
}

img#weather {
}


a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

sup {
  font-size: 0.6em;
  position: relative;
  top: -0.5em;
}
*/
/*
div#wrapper div#footer {
  border-top: 2px solid #ad0101;
  display: table;
  font-size: 8pt;
  margin: 6px 18px 0 18px;
  padding: 6px 0;
  /*
  text-align: right;
  width: 90%;
  */
/*
}

div#header h3 {
  background-color: #c0c0c0;
  border: 3px solid black;
  border-radius: 10px;
  display: inline-block;
  font-size: 10pt;
  line-height: 2;
  padding: 2px 7px 4px 7px;
  position: relative;
  text-align: center;
  top: 3px;
  width: 142px;
}
div#header h3.two-line {
  line-height: 1;
}
div#header img {
  display: table;
  display: block;
  margin: 0 auto 6px auto;
  
  width: 300px;
  padding: 6px;
  background-color: #fff;
}

div#advert img {
  vertical-align: bottom;
}

div#slideshow div#slideshow1,
div#slideshow div#slideshow2,
div#slideshow div#slideshow3 {
  .border: 1px dashed red;
  display: inline-block;
  margin-right: 9px;
}
div#slideshow img.slide {
  .visibility: hidden;
  display: none;
}


div#menu a {
  background-color: gray;
  border: 3px solid black;
  border-radius: 10px;
  color: white;
  display: block;
  font-size: 10pt;
  font-weight: bold;
  line-height: 2;
  margin-bottom: 3px;
  padding: 2px 7px 4px 7px;
  text-align: center;
  text-decoration: none;
  width: 142px;
}
div#menu a.two-line {
  line-height: 1;
}
div#menu a:active {
  background-color: #f66;
  color: white;
  padding: 3px 7px 3px 7px;
}

div#content a {
  color: #008;
  font-family: 'Arial', 'Times New Roman', 'Verdana';
  text-decoration: none;
}
div#content a:hover {
  text-decoration: underline;
}
div#content b {
  font-family: 'Puritan20Bold';
}
div#content div#offset {
  .border: 1px dotted green;
  padding-right: 18px;
  text-align: right;
}
div#content h1,
div#content h2,
div#content h3 {
  font-family: 'Puritan20Bold';
  font-size: 14pt;
  font-weight: normal;
  text-align: center;
}
div#content h3 {
  color: #ad0101;
  .font-family: 'Puritan20Normal';
  .font-weight: normal;
  margin-bottom: 3px;
}
div#content h4,
div#content h5,
div#content h6 {
  font-size: 13pt;
  text-align: center;
}
div#content h4 {
  font-size: 14pt;
  margin-bottom: 6px;
}
div#content h5 {
  font-weight: normal;
}
div#content h6 {
}
div#content ul {
  font-size: 14pt;
  list-style-type: disc;
  .margin-top: 18px;
}
div#content ul li {
  font-size: 12pt;
  margin-left: 18px;
}
div#content p {
  .border: 1px dotted green;
  font-family: 'Puritan20Normal';
  font-size: 14pt;
  margin: 6px 108px 6px 108px;
  text-align: center;
}
div#content p b {
  font-family: 'Puritan20BoldItalic';
}

div#content table {
  margin: 0 auto;
  /*
  width: 100%;
  */
/*
}

div#content table.residents img {
  .padding-top: 9px;
  width: 216px;
  width: 234px;
  width: 270px;
}
div#content table.residents td {
  /*
  border: 1px dotted green;
  */
/*
  padding: 9px;
  text-align: center;
  vertical-align: middle;
}
div#content table td.left {
  text-align: left;
}
div#content table.vacant {
  .border: 1px dotted red;
  margin-top: 6px;
  margin-bottom: 12px;
  width: 702px;
  width: 774px;
}
div#content table.vacant img {
  /* can be eliminated once all classes defined */
/*
  padding: 0;
  width: 150px;
  vertical-align: bottom;
}
div#content table.vacant td,
div#content table.vacant th {
  padding: 3px 0;
  text-align: center;
  vertical-align: middle;
}
div#content table.vacant th {
  font-style: italic;
}
div#content table.vacant tr.odd-row {
  background-color: #78cdd0;
  background-color: #d2eff0;
  background-color: #FFA9A9;
  background-color: #d69661; /* odd row? */
/*
}
div#content table.vacant tr.even-row {
  background-color: #fff890;
  background-color: #fffddd;
  background-color: #d66161; /* even row? */
/*
}
div#footer div {
  display: table-cell;
  vertical-align: middle;
}
div#footer div#fb-root,
div#footer div.fb-like {
  display: block;
}
div#footer div.contact {
  text-align: center;
  width: 100%;
}
div#footer img {
  visibility: hidden;
}
div#footer img#eho {
  cursor: pointer;
  visibility: visible;
}

div#offset {
}
div#offset a {
  background-color: #c0c0c0;
  border: 1px solid #808080;
  color: #000000;
  font-size: 11pt;
  line-height: 2;
  padding: 3px;
  text-decoration: none;
}
div#offset a:hover {
  text-decoration: none;
}
div#offset span.bold {
  font-size: 11pt;
  font-weight: bold;
  line-height: 2;
  margin-right: 3px;
}
/*
div#offset span.paging {
  background-color: #c0c0c0;
  border: 1px solid #808080;
  font-size: 11pt;
  line-height: 2;
  padding: 3px;
}
*/
/*
div#offset span.disabled {
  background-color: #c0c0c0;
  border: 1px solid #808080;
  color: #a0a0a0;
  font-size: 11pt;
  line-height: 2;
  padding: 3px;
}
div#offset span.notify {
  color: #ad0101;
  font-size: 11pt;
  font-weight: bold;
  line-height: 2;
  margin-right: 36px;
}

div.button-bar {
  border: 1px dotted green;
  /*
  line-height: 2;
  */
/*
  text-align: left;
  text-align: center;
}
div.button-bar a {
  border: 2px solid black;
  border-radius: 10px; 
  font-weight: bold;
  position: relative;
  text-align: center;
  text-decoration: none;
  display: block;
  float: left;
  width: 150px;
  background-color: gray;
  color: white;
  padding: 2px 7px 4px 7px;
}
div.button-bar a:active {
  background-color: #f66;
  color: white;
  padding: 3px 7px 3px 7px;
}

div.spacer {
  margin: 9px 0;
}
div.marginer {
  margin: 18px 12px;
}
div.three-sixty {
  line-height: 1.25;
  padding-bottom: 9px;
  vertical-align: top;
  width: 360px;
}

/*
div.button-bar a.idle {
  background-color: gray;
  color: white;
  padding: 2px 7px 4px 7px;
  top: 0px;
}
div.button-bar a.pressed {
  background-color: #f66;
  color: white;
  padding: 3px 7px 3px 7px;
  top: 1px;
}
*/
/*
div#wrapper div#header div {
  border: 3px solid black;
  border-radius: 10px; 
  display: table;
  position: relative;


  top: 3px;
}
div#wrapper div#header div h3 {
  padding: 7px 20px;
}
div#wrapper div#header img {
  display: block;
  margin: 0px auto;
}
div#wrapper div#spacer {
  height: 67px;
}

div#wrapper div.linkbar {
  border-top: 1px solid #000088;
  border-bottom: 1px solid #000088;
  clear: both;
  line-height: 2;
  text-align: center;
}
div#wrapper div.linkbar a {
  color: #000088;

  font-size: 12pt;
  font-weight: bold;
  text-decoration: none;
}
div#wrapper div.linkbar a:hover {
  text-decoration: underline;
}
div#wrapper div.linkbar hr {
  background-color: #000076;
  border: 0px;
  color: #000076;
  height: 1px;
  margin: 0px;
}

div#wrapper div#sidebar {
	border: 1px dashed green;
  float: left;
  padding: 1%;
  width: 18%;
}
div#wrapper div#content a {
  color: #000076;
  text-decoration: none;

}
div#wrapper div#content a:hover {
  text-decoration: underline;
}
div#wrapper div#content div.banner {
  background-color: #000076;
  color: #ffffff;
  margin: 15px 15px 0px 15px;
  padding: 10px;
}
div#wrapper div#content div.banner a {
  color: #ffffff;
  text-decoration: none;
}
div#wrapper div#content div.banner a:hover {
  text-decoration: underline;
}
div#wrapper div#content div.center {
  margin-top: 15px;
  text-align: center;
}
div#wrapper div#content p {
  margin-bottom: 7px;
}

div#wrapper div#footer {
  font-family: 'GoodDogRegular';
  text-align: center;
}
div#wrapper div#footer a {
  color: #000076;
  text-decoration: none;
}
div#wrapper div#footer a:hover {
  text-decoration: underline;
}
div#wrapper div#footer div.eggKrate {
  float: right;
}
div#wrapper div#footer div.eggKrate-inner {
  float: right;
  font-family: 'GoodDog';
  font-size: 11pt;
  line-height: 1;
  padding: 5px 5px 0px 0px;
}

div#wrapper div#clearer {
  clear: both;
  height: 10px;
}


a.button {
  background-color: #000076;
  color: #ffffff;
  font-weight: bold;
  padding: 3px 5px;
  text-decoration: none;
}
*/
/*

div#links {
  .border: 1px solid black;
  display: table;
  font-size: 8pt;
  margin: 6px auto 18px auto;
  margin: 6px auto;
}
div#links a {
  color: #000;
  line-height: 1.5;
  text-decoration: none;
}
div#links a.header {
  font-weight: bold;
}
div#links div.cell {
  vertical-align: top;
}

.center {
  text-align: center;
}

/*
form#service-request {
  .background-color: #e0e0e0;
  background-color: #eee;
  border: 1px solid #888;
  border-radius: 6px;
  display: table;
  margin: 6px auto;
  padding: 9px;
}
form#service-request div {
  .border: 1px dotted blue;
  margin-bottom: 6px;
}
form#service-request input {
  width: 356px;
}
form#service-request input.radio {
  width: auto;
}
form#service-request input.submit {
  display: block;
  margin: 0 auto;
  width: auto;
}
form#service-request label {
}
form#service-request textarea {
  width: 356px;
}
*/
/*

form.site-email {
  background-color: #eee;
  border: 1px solid #888;
  border-radius: 6px;
  display: table;
  margin: 6px auto;
  padding: 9px;
}
form.site-email div.mb6px {
  .border: 1px dotted blue;
  margin-bottom: 6px;
}
form.site-email div.center {
  .border: 1px dotted blue;
  display: table;
  margin: 0 auto;
  text-align: center;
}
form.site-email img {
  padding: 3px;
  vertical-align: top;
}
form.site-email input.text {
  width: 356px;
}
form.site-email input.date {
  margin-left: 12px;
  width: auto;
}
form.site-email input.radio {
  width: auto;
}
form.site-email input.submit {
  .display: block;
  .margin: 0 auto;
  margin-top: 6px;
  .width: auto;
}
form.site-email label.sub-label {
  font-size: 10pt;
}
form.site-email select {
  width: 360px;
}
form.site-email textarea {
  width: 356px;
}

form.site-email div.failure {
  border: 1px dotted #c00;
}
form.site-email div.failure label {
  color: #c00;
  font-weight: bold;
}

div.form-failure {
  background-color: #ccc;
  border: 2px solid #c00;
  color: #c00;
  display: table;
  font-family: sans-serif;
  margin: 12px auto;
  padding: 6px 18px;
}
div.form-success {
  background-color: #ccc;
  border: 2px solid #080;
  color: #080;
  display: table;
  font-family: sans-serif;
  margin: 12px auto;
  padding: 6px 18px;
}

div#roundabout {
  display: none;
}

img.bio {
  border: 18px solid #ccc;
  border-radius: 12px;
  .margin: 0 18px 18px 0;
  margin: 18px 0;
  vertical-align: bottom;
}
div.bio {
  background-color: #d66161; /* even row? */
/*
  background-color: rgba(214, 97, 97, 0.8);
  border: 9px solid rgba(100, 100, 100, 0.67);
  border-radius: 6px;
  padding: 6px;
  .position: absolute;

  .width: 40%;
  .width: 450px;

  font-family: 'Puritan20Normal';
  font-size: 12pt;
  
.bottom: 0;
.left: 0;
  text-align: justify;
}

div#disclaimer {
  border-top: 1px solid #ad0101;
  color: #aaa;
  font-size: 8pt;
  font-style: italic;
  margin: 0 auto 18px auto;
  padding-top: 6px;
  text-align: center;
  width: 882px;
}

div#wrapper div#mobile {
  display: none;
}