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

* html body { /*IE6 hack*/
  padding: 145px 0 30px 0; /* Set value to height of contenttop */
}

* html .maincontent { /*IE6 hack*/
  height: 100%;
  width: 1000px;
}

.body {
  margin:0; padding: 0; border: 0; overflow: hidden;
  height: 100%; max-height: 100%;
  background-color: #ffffff;
  /*font-size: 62.5%;*/
}

.container {
  position:fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px; max-width: 1000px; height:100%;
  margin-left: auto; margin-right: auto; margin-top: 0px; padding: 0px;
  background-color: #f0ffff;
  /* border: 1px; border-style: solid; border-color: #000; */
}

.banner {
  width: 100%; height: 111px; overflow:hidden;
}

.titlebar {
  background-color: #0065bd; border: 0px; border-style: solid; border-color: #000;
  width: -moz-available;          /* WebKit-based browsers will ignore this. */
  width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
  width: fill-available; 
  height: 34px;
  padding-left: 3px; padding-top: 4px; padding-bottom: 2px; padding-right: 50px;
  font-family: arial, helvetica; font-size: 18px; font-weight: bold; color: #f0ffff;
}

.searchfield {
  background-color:#f0ffff; color: #0065bd;
  height:18px; padding: 1px; border:1px solid #87ceeb;
}

.searchsymbol {
  color: #0065bd; background: #0065bd; border: 0px; border-style: solid; border-color: #000;
  height:18px; width: 30px;
}

.menuframe {
  position: absolute;
  display: inline-block;
  vertical-align: top;
  top: 0px;
  bottom: 0px;
  width:240px;
  height:98%;
  padding: 2px;
}

.social {
  position: absolute;
  left: 250px; /* width of menuframe */
  top: 0px;
  bottom: 0px;
  width: 750px; height: 32px;
  border-left-width: 3px; border-left-style: solid; border-left-color: #87ceeb;
  padding-top: 3px;
  margin: 0px;
}

.contentframe {
  position: fixed;
  display: inline-block;
  vertical-align: top;
  top: 145px; /* Set top value to height of contenttop */
  margin-left:auto;
  margin-right: auto;
  bottom: 30px; /* Set bottom value to Height of contentbottom */
  width: 1000px;
  background: #f0ffff;
}

.contenttop, .contentbottom {
  position: absolute;
  margin-left:auto;
  margin-right: auto;
  width: 1000px;
  height: 145px; /*Height of top frame div*/
  overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
  background-color: #f0ffff;
  color: white;
}

.contentbottom {
  top: auto;
  bottom: 0;
  height: 30px; /* Height of bottom frame div*/
  overflow: hidden; /* Disable scrollbars. Set to "scroll" to enable */
}

.sitemap {
  float: right; display: inline-block; width: 100px; height: 16px;
  background-color:#87ceeb; border-width: 1px; border-color: #0065bd; border-style: solid;
  padding-top: 1px; padding-bottom: 1px;
  text-align: center; font-family: arial, helvetica; font-weight: bold; font-size: 12px;
}

.scrollcontent {
  position: absolute;
  left: 250px; /* Width of menuframe */
  top: 35px; /* Set top value to height of social */
  bottom: 0px;
  margin: 0px; width:596px; /* of social less scrollbar and padding */
  overflow-x: hidden; overflow-y:scroll; scrollbar-face-color: #0065bd; scrollbar-track-color: #f0ffff; scrollbar-arrow-color: #0065bd;
  border-left-width: 3px; border-left-style: solid; border-left-color: #87ceeb;
  padding-left: 83px; padding-right: 67px;
}

.visiblecontent {
  width:100%; border: 0px; border-style: solid; border-color: #000;
}

.footerleft {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width:246px; /* menu less padding */ height:100%;
  border-top-width: 3px; border-top-style: solid; border-top-color: #0065bd;
  padding: 2px;
}

.footerright {
  position: absolute;
  left: 250px; /* width of footerleft */
  top: 0px;
  bottom: 0px;
  width:750px; height:100%; overflow: hidden;
  border-top-width: 3px; border-top-style: solid; border-top-color: #0065bd;
  border-left-width: 3px; border-left-style: solid; border-left-color: #87ceeb;
  padding-top: 2px;
}

.clear { /* Also commonly known as clearfix */
  clear: both; /* At the very least, you must have this. All extra declarations are for fine-tuning */
  height: 0;
  font-size: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 0;
  line-height: 0;
}

.dern { /* non visible content */
  display:none;
}

.centercontent { /* container for centering with centered */
  vertical-align:top; text-align: center;
  margin-left:auto; margin-right:auto;
  width:100%;
}

.centered {
  display: inline-block;
  vertical-align:top;
  margin-left:auto; margin-right:auto;
}

/* Text Styles */

.heading1 { /* h1 */
  font-family: arial, helvetica; font-size: 18px; color: #000000;
}

.heading1center { /* h1 */
  font-family: arial, helvetica; font-size: 18px; color: #000000; text-align: center;
}

.headingnomargin1 { /* h1 */
  font-family: arial, helvetica; font-size: 18px; color: #000000;
  margin: 0px 0px 0px 0px;
}

.heading2 { /* h2 */
  font-family: arial, helvetica; font-size: 16px; color: #000000;
}

.heading2center { /* h2 */
  font-family: arial, helvetica; font-size: 16px; color: #000000; text-align: center;
}

.headingnomargin2 { /* h2 */
  font-weight: normal; font-family: arial, helvetica; font-size: 16px; color: #000000; vertical-align: top;
  margin: 0px 0px 0px 0px;
}

.heading3 { /* h3 */
  font-family: arial, helvetica; font-size: 14px; color: #000000;
}

.heading3center { /* h3 */
  font-family: arial, helvetica; font-size: 14px; color: #000000; text-align: center;
}

.headingnomargin3 { /* h3 */
  font-weight: normal; font-family: arial, helvetica; font-size: 14px; color: #000000; vertical-align: top;
  padding-bottom: 2px; padding-top: 2px; margin: 0px 0px 0px 0px;
}

.headingnomargin3center { /* h3 */
  font-weight: normal; font-family: arial, helvetica; font-size: 14px; color: #000000; vertical-align: top; text-align: center;
  padding-bottom: 2px; padding-top: 6px; margin: 0px 0px 0px 0px;
}

.menuitem { /* Left contents menu */
  font-weight: normal; font-family: arial, helvetica; font-size: 14px; color: #000000; vertical-align: top;
  padding-bottom: 0px; padding-top: 2px; margin: 0px 0px 0px 0px;
  width:235px;
}

.menuitemexpand { /* left contents expanded menu in Wir Ain Leed*/
  font-weight: normal; font-family: arial, helvetica; font-size: 14px; color: #000000; vertical-align: top;
  padding-bottom: 0px; padding-top: 2px; margin: 0px 0px 0px 0px;
  width:160px;
}

.menuitem:hover .menuevent {
  display: block; width: 160px;
  background-color: #f0ffff;
  z-index: 10;
  border:0px; border-style:solid; border-color:#000;
  position: absolute;
  top: 165px;
  left: 165px;
  padding: 4px;
}

.menuevent {
  display: none;
}

.audioitem { /* Left contents menu */
  position: relative;
  font-weight: normal; font-family: arial, helvetica; font-size: 14px; color: #000000; vertical-align: top;
  padding-bottom: 0px; padding-top: 2px; margin: 0px 0px 0px 0px;
  width:235px;
}

.audioitemexpand { /* left contents expanded menu in Listen In*/
  font-weight: normal; font-family: arial, helvetica; font-size: 14px; color: #000000; vertical-align: top;
  padding-bottom: 0px; padding-top: 2px; margin: 0px 0px 0px 0px;
  width:160px;
}

.audioitem:hover .audioevent {
  display: block; width: 80px;
  background-color: #f0ffff;
  z-index: 10;
  /*border:1px; border-style:solid; border-color:#000;*/
  position: absolute;
  top: 0px;
  left: 100px;
  padding: 4px;
}

.audioevent {
  display: none;
}

.textblacklarge {
  font-weight: normal; font-family: arial, helvetica; font-size: 18px; color: #000000;
  text-align: left;
}

.textblacklargecenter {
  font-family: arial, helvetica; font-size: 18px; color: #000000; text-align: center;
}

.textblackmedium { /* used in dictionary */
  font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #000000;
}

.textblackmediumcenter { /* used in dictionary */
  font-family:Arial, sans-serif; font-size: 16px; color:#000000; text-align:center;
}

.textblack {
  padding-bottom: 3px; font-family: arial, helvetica; font-size: 14px; color: #000000;
  text-align: left;
}

.textblackcenter {
  font-family: arial, helvetica; font-size: 14px; color: #000000; text-align: center;
}

.textblacksmall {
  padding-bottom: 1px; font-family: arial, helvetica; font-size: 12px; color: #000000;
  text-align: left;
}

.textblacksmallright {
  padding-bottom: 1px; font-family: arial, helvetica; font-size: 12px; color: #000000; text-align: right;
}
.textblacksmallcenter {
  padding-bottom: 1px; font-family: arial, helvetica; font-size: 12px; color: #000000; text-align: center;
}

.textgray { /*text format of parent element*/
  color: #808080;
}

.textdarkblue {
  padding-bottom: 3px; font-family: arial, helvetica; font-size: 14px; color: #0065bd; float: left;
}

.textdarkblueright {
  padding-bottom: 3px; font-family: arial, helvetica; font-size: 14px; color: #0065bd; float: right;
}

.textdarkbluecentre {
  padding-bottom: 3px; font-family: arial, helvetica; font-size: 14px; color: #0065bd; text-align: center;
}

.textdarkbluesmall { /* Bottom navigation */
  padding-top: 2px; font-family: arial, helvetica; font-size: 12px; color: #0065bd; float: left;
}

.textdarkbluesmallright { /* Bottom navigation */
  padding-top: 2px; font-family: arial, helvetica; font-size: 12px; color: #0065bd; float: right;
}

.textdarkbluesmallcentre { /* Bottom navigation */
  padding-top: 2px; font-family: arial, helvetica; font-size: 12px; color: #0065bd; text-align: center;
}

/* Styles for Links */

a:link {
  text-decoration: none;
  color: #0065bd;
}

a:visited {
  text-decoration: none;
  color: #0065bd;
}

a:hover {
  text-decoration: underline;
  color: #0000EE;
}

a:active {
  text-decoration: none;
}

/* Styles for Images */

.imagePayPal {
  border-style: none;
}

.image300wir_ain_leed {
  margin:2px; padding:1px; border: 2px; border-color: #0065bd; border-style: solid; width: 200px; max-width: 200px; height: auto; float: right; background-color: #fff; vertical-align: top;
  font-family: arial, helvetica; font-size: 10px; color: #000000; text-align: center;
  transition: 1s ease;
}

.image300wir_ain_leed:hover {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  transition: 1s ease;
}

.image300wir_ain_leed20 {
  margin:2px; padding:1px; border: 2px; border-color: #0065bd; border-style: solid; width: 120px; max-width: 120px; float: right; background-color: #fff;
  font-family: arial, helvetica; font-size: 10px; color: #000000; text-align: center;
  transition: 1s ease;
  overflow: visible;
}
.image300wir_ain_leed20:hover {
  -webkit-transform: scale(2.2);
  -ms-transform: scale(2.2);
  transform: scale(2.2);
  transition: 0.25s ease;
  overflow: visible;
  position: relative;
  left: -12%;
}

.image300wir_ain_leed20left {
  margin:2px; padding:1px; border: 2px; border-color: #0065bd; border-style: solid; width: 20%; max-width: 300px; height: auto; float: left; background-color: #fff;
  font-family: arial, helvetica; font-size: 10px; color: #000000; text-align: center;
  transition: 1s ease;
  overflow: visible;
}
.image300wir_ain_leed20left:hover {
  -webkit-transform: scale(2.2);
  -ms-transform: scale(2.2);
  transform: scale(2.2);
  transition: 0.25s ease;
  overflow: visible;
  position: relative;
  right: -12%;
}

.Leed_Tree {
  background-color: #f0ffff;
  max-width: 865px;
  transition: 1s ease;
  overflow: visible;
  text-align: center;
}

.Leed_Tree:hover {
  -webkit-transform: scale(1.4);
  -ms-transform: scale(1.4);
  transform: scale(1.4);
  transition: 1s ease;
  overflow: visible;
  position: relative;
  right: 0%;
}

.imageEbogle {
  width: 150px; max-width: 320px; height: auto;
  transition: 1s ease;
}

.imageEbogle:hover {
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  transition: 1s ease;
}

/*Wir Ain Leed examples tables*/

.tableexamples {
  width: 550px;
  float: left;
  padding-left: 30px;
  text-align: left;
  /* border: 1px; border-color: #000000; border-style: solid; */
}

.tableimageright { /* used instead of tableexamples if image placed to right */
  width: 415px;
  float: left;
  padding-left: 30px;
  /* border: 1px; border-color: #000000; border-style: solid; */
}

.colunmnopen {
  float: left;
  display:inline-block;
  /*width: auto;*/
  padding: 2px; font-family: arial, helvetica; font-size: 14px; color: #000000;
  /* border: 1px; border-color: red; border-style: solid; */
}

.colunmn5pc {
  float: left;
  width:  5%;
  padding: 2px; font-family: arial, helvetica; font-size: 14px; color: #000000;
  /* border: 1px; border-color: red; border-style: solid; */
}

.colunmn10pc {
  float: left;
  width:  10%;
  padding: 2px; font-family: arial, helvetica; font-size: 14px; color: #000000;
  /* border: 1px; border-color: red; border-style: solid; */
}

.colunmn15pc {
  float: left;
  width:  15%;
  padding: 2px; font-family: arial, helvetica; font-size: 14px; color: #000000;
  /* border: 1px; border-color: red; border-style: solid; */
}

.colunmn20pc {
  float: left;
  width:  20%;
  padding: 2px; font-family: arial, helvetica; font-size: 14px; color: #000000;
  /* border: 1px; border-color: red; border-style: solid; */
}

.colunmn25pc {
  float: left;
  width:  25%;
  padding: 2px; font-family: arial, helvetica; font-size: 14px; color: #000000;
  /* border: 1px; border-color: red; border-style: solid; */
}

.colunmn30pc {
  float: left;
  width:  30%;
  padding: 2px; font-family: arial, helvetica; font-size: 14px; color: #000000;
  /* border: 1px; border-color: red; border-style: solid; */
}

.colunmn35pc {
  float: left;
  width:  35%;
  padding: 2px; font-family: arial, helvetica; font-size: 14px; color: #000000;
  /* border: 1px; border-color: red; border-style: solid; */
}

.colunmn40pc {
  float: left;
  width:  40%;
  padding: 2px; font-family: arial, helvetica; font-size: 14px; color: #000000;
  /* border: 1px; border-color: red; border-style: solid; */
}

.colunmn45pc {
  float: left;
  width:  45%;
  padding: 2px; font-family: arial, helvetica; font-size: 14px; color: #000000;
  /* border: 1px; border-color: red; border-style: solid; */
}

.colunmn48pc {
  float: left;
  width:  48%;
  padding: 2px; font-family: arial, helvetica; font-size: 14px; color: #000000;
  /* border: 1px; border-color: red; border-style: solid; */
}

.colunmn50pc {
  float: left;
  width:  50%;
  padding: 2px; font-family: arial, helvetica; font-size: 14px; color: #000000;
  /* border: 1px; border-color: red; border-style: solid; */
}

.colunmn55pc {
  float: left;
  width:  55%;
  padding: 2px; font-family: arial, helvetica; font-size: 14px; color: #000000;
  /* border: 1px; border-color: red; border-style: solid; */
}
.colunmn60pc {
  float: left;
  width:  60%;
  padding: 2px; font-family: arial, helvetica; font-size: 14px; color: #000000;
  /* border: 1px; border-color: red; border-style: solid; */
}

.colunmn65pc {
  float: left;
  width:  65%;
  padding: 2px; font-family: arial, helvetica; font-size: 14px; color: #000000;
  /* border: 1px; border-color: red; border-style: solid; */
}

.colunmn70pc {
  float: left;
  width:  70%;
  padding: 2px; font-family: arial, helvetica; font-size: 14px; color: #000000;
  /* border: 1px; border-color: red; border-style: solid; */
}

.colunmn80pc {
  float: left; display: inline-block;
  width:  80%;
  padding: 2px; font-family: arial, helvetica; font-size: 14px; color: #000000;
  /* border: 1px; border-color: red; border-style: solid; */
}

/* Styles for the guestbook */

.guest input[type=text] {
  height: 15px;
  background-color:#f0ffff;
  color: #0065bd;
  border:1px solid #87ceeb;
}

.gae {
  cursor: pointer;
  border: 0px;
  background-color: #0065bd;
  color: #0065bd; font-weight: bold;
  font-family: arial, helvetica; font-size: 15px; color: #f0ffff;
  width: 55px; height:20px;
}

.guestform {
  width: 370px;
  height:15px;
  background-color: #ffffff; /* #87ceeb; */
  border:1px; border-color: #0065bd; border-style: solid; padding: 1px;
  font-family: arial, helvetica; font-size: 12px; /*color: #f0ffff;*/
}

.select {
  width: 374px;
  height:19px;
  background-color: #ffffff; /* #87ceeb; */
  border:1px; border-color: #0065bd; border-style: solid; padding: 1px;
  font-family: arial, helvetica; font-size: 12px; /*color: #f0ffff;*/
}

.captchaguest {
  width: 100px;
  height:16px;
  background-color: #ffffff; /* #87ceeb; */
  border:1px; border-color: #0065bd; border-style: solid; padding: 1px;
  font-family: arial, helvetica; font-size: 12px; /*color: #f0ffff;*/
}

.sendguest {
  width: 100px;
  height: 20px;
  background-color: #87ceeb;
  border: 1px;
  border-color: #0065bd;
  border-style: solid;
  font-weight: bold;
  font-family: arial, helvetica;
  font-size: 12px;
  color: #0065bd;
  cursor: pointer;
  float: right;
}

.checkbox {
  float: left;
  width: 15px;
  height: 15px;
  background: #87ceeb;
  border:1px; border-color: #0065bd; border-style: solid; padding: 0px;
}

.comment {
  width: 370px;
  height:100px;
  background-color: #ffffff; /* #87ceeb; */
  border:1px; border-color: #0065bd; border-style: solid; padding: 1px;
  font-family: arial, helvetica; font-size: 12px; /*color: #f0ffff; */
  scrollbar-face-color: #0065bd;
  scrollbar-track-color: #f0ffff;
  scrollbar-arrow-color: #0065bd;
}

/* Contact form  */

.contact {
  width: 250px;
  height:15px;
  /*background-color: #87ceeb;*/
  background-color: #ffffff;
  border:1px; border-color: #0065bd; border-style: solid; padding: 1px;
  font-family: arial, helvetica; font-size: 12px; color: #000000;
}

/*.contact:focus {
  color: #000000;
}*/

.message {
  width: 250px;
  height:150px;
  /*background-color:#87ceeb;*/
  background-color: #ffffff;
  border:1px; border-color: #0065bd; border-style: solid; padding: 1px;
  font-family: arial, helvetica; font-size: 12px; color: #000000;
  scrollbar-face-color: #0065bd;
  scrollbar-track-color: #f0ffff;
  scrollbar-arrow-color: #0065bd;
}

/*.message:focus {
  color: #000000;
}*/

.capcha {
  width: 100px;
  height:20px;
  /*background-color: #87ceeb;*/
  background-color: #ffffff;
  border:1px; border-color: #0065bd; border-style: solid; padding: 1px;
  font-family: arial, helvetica; font-size: 15px; color: #000000;
}

/*.capcha:focus {
  color: #000000;
}*/

.sendform {
  float: right; width: 100px; height:24px; background-color: #87ceeb; padding: 1px; border: 1px; border-color: #0065bd; border-style: solid; font-weight: bold; font-family: arial, helvetica; font-size: 15px; color: #0065bd;
  /*border-radius:12px;
  -moz-border-radius:12px;
  -webkit-border-radius:12px;*/
  cursor: pointer;
}

/* Styles for dictionary */

.bodydictionary {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  height: 100%;
  max-height: 100%;
}

.ie6dictionary html body { /*IE6 hack*/
  padding: 147px 0 40px 0; /* Set value to height of contenttopdictionary */
}

* html .contentdictionary { /*IE6 hack*/
  height: 100%;
  width: 640px;
}

.dictionary { /* Outer frame */
  width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.bannerdictionary {  /* top image */
  width:100%; height: 91px; padding-top: 0; margin-top: 0;
}

.titlebardictionary  { /* title and search field */
  width: 100%; height: 20px; background-color: #0065bd; padding-top: 4px; padding-bottom: 1px;
  font-family: arial, helvetica; font-size: 15px; font-weight: bold; color: #f0ffff;
  /* border-width: 1px; border-style: solid; border-color: black; */
}

.contenttopdictionary, .contentbottomdictionary {
  position: absolute;
  top: 0;
  width: 640px;
  height: 147px; /* Height of top frame div */
  overflow: hidden; /* Disable scrollbars. Set to "scroll" to enable */
  background-color: #f0ffff;
}

.contentbottomdictionary {
  top: auto;
  bottom: 0;
  height: 40px; /*Height of bottom frame div*/
  overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
  background-color: #f0ffff;
  color: white;
  /* border: 1px; border-style: solid; border-color: #000; */
}

.contentdictionary {
  position: fixed;
  top: 147px; /*Set top value to height of contenttopdictionary */
  margin-left:auto;
  margin-right: auto;
  bottom: 40px; /* Set bottom value to height of contentbottomdictionary */

  background-color: #f0ffff;
  width: 640px;

}

.scrollcontentdictionary {
  overflow-x: hidden; overflow-y:scroll; scrollbar-face-color: #0065bd; scrollbar-track-color: #f0ffff; scrollbar-arrow-color: #0065bd;
  padding-left:2px; padding-right:2px;
  width:635px; height:100%;
}

.footerdictionary { /* Footer info*/
  height: 20px; width: 100%; border-top-width: 3px; padding-bottom: 3px; border-top-style: solid; border-top-color: #0065bd;
}

.bottomnavdictionary { /*Used X */
  width:70%; margin-left:auto; margin-right:auto;
  font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-decoration: none; text-align: center;
  margin-top: 0px; padding-top: 0px;
}

.listdictionary { /* used in the abbreviations page */
  display:block; float: left; padding-bottom: 3px;
}

.var { /*abbreviations in dictionary definitions used*/
  font-family: Arial, Helvetica, sans-serif; font-size:10px; color: #000000; text-align: inherit;
}

.hielicht { /* in dictionary definitions used */
  background-color:#ffff00; font-weight: bold;
}

.results { /* in dictionary definitions used */
  position:relative; left:0; right:0;
  border-bottom-color: #0065bd; border-bottom: 1px; border-bottom-style: solid;
}

.dictionaryspaceline { /*  empty line in results disply */
  line-height:  7px; /* border:1px; border-style:solid; border-color: red;*/
  padding:0; margin:0;
  font-size: 3px;
}

.dictionarysearchfield { /* Search Field and Button used */
  float: right;
  margin: 0; padding: 0; border:0px;
}

.dictionarysearchinput { /* Search input field */
  height:15px; display:inline-block; vertical-align:top;
  font-family: arial, helvetica; font-size: 14px; color: #0065bd;
  background-color: #f0ffff;
  border:0px;
}

.dictionarysend {  /* used */
  cursor: pointer;
  border: 0px;
  background-color: #0065bd;
  color: #0065bd; font-weight: bold;
  font-family: arial, helvetica; font-size: 15px; color: #f0ffff;
  width: 40px;
}

/* Styles for mobile content */

.mobile { /* this is the outer frame with black outline*/
  position:fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width:100%; max-width: 640px; height: 100%;
  margin-left:auto; margin-right:auto; margin-top: 0px; padding: 0px;
  background-color: #f0ffff;
  /* border: 1px; border-color: #000000; border-style: solid; */
}

.mobiletop, .mobilefooter {
  position: absolute;
  margin-left:auto;
  margin-right: auto;
  width:100%; max-width: 640px;
  height: 60px; /*Height of top frame div*/
  overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
}

.mobilefooter {
  top: auto;
  bottom: 0;
  width:100%; max-width: 636px; /*width less padding */
  height: 35px; /* Height of footer frame div*/
  overflow: hidden; /* Disable scrollbars. Set to "scroll" to enable */
  font-family:Arial, sans-serif; font-size:1em; color:#000000; text-align: center;
  border-top-width: 2px; border-top-style: solid; border-top-color: #0065bd; padding: 2px;
  background-color: #f0ffff;
}

.mobilecontent { /* scrollable content frame */
  position: fixed;
  display: inline-block;
  vertical-align: top;
  top: 60px; /* Set top value to height of mobiletop */
  margin-left:auto;
  margin-right: auto;
  padding-left: 2px; padding-right: 2px;
  bottom: 39px; /* Set bottom value to Height of mobilefooter + padding */
  width:100%; max-width: 636px;
  margin: 0px; float: right; overflow-x: hidden; overflow-y: auto; scrollbar-face-color: #0065bd; scrollbar-track-color: #f0ffff; scrollbar-arrow-color: #0065bd;
}

.mobilesearchinput { /* Search input field */
  display: inline-block;
  height:14px; width: 105px;
  font-family: arial, helvetica; font-size: 12px; color: #0065bd;
  background-color: #f0ffff;
  border:0px;
}

.mobilesend {  /* used */
  display: inline-block;
  cursor: pointer;
  border: 0px; padding: 0px;
  background-color: #0065bd;
  color: #0065bd; font-weight: bold;
  font-family: arial, helvetica; font-size: 12px; color: #f0ffff;
  width: 20px;
}

.mobilecontact {
  width: 200px;
  height:14px;
  border:1px; border-color: #0065bd; border-style: solid; padding: 1px;
  font-family: arial, helvetica; font-size: 12px; color: #000000;
}

.mobilemessage {
  width: 200px; height:100px; margin-top: 1px;
  border:1px; border-color: #0065bd; border-style: solid; padding: 1px;
  font-family: arial, helvetica; font-size: 12px; color: #000000;
  scrollbar-face-color: #0065bd;
  scrollbar-track-color: #f0ffff;
  scrollbar-arrow-color: #0065bd;
}

.mobilesendform {
  width: 50px; height:20px;
  padding: 1px; border: 1px; border-color: #0065bd; border-style: solid; margin-top: 2px;
  font-weight: bold; font-family: arial, helvetica; font-size: 15px; color: #0065bd;
  /*border-radius:12px;
  -moz-border-radius:12px;
  -webkit-border-radius:12px; */
  cursor: pointer;
}

/* Sytles for slideshow */

.slideshowcontainer {
  width: 100%; vertical-align: top;
}

.pictureframe {
  float: left;
  display: inline-block;
  width: 400px;
  height: 300px;
  /* border: 1px; border-style: solid; border-colour: #000; */
}

.slideshow {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.buttons {
  width: 100px; display: inline-block; float: right; vertical-align: top; /* border 1px; border-style:solid; border-color: #000; */
}

.selectbox {
width: 200px; height:22px; border:1px; border-color: #0065bd; border-style: solid; padding: 1px; font-family: arial, helvetica; font-size: 14px; color: #000;
}

.radiobutton {
  width: 10px; height:10px;
  background-color: #87ceeb; border:1px; border-color: #0065bd; border-style: solid;
}

.submitbutton {
  width: 200px; height:24px; background-color: #87ceeb; padding: 1px; border: 1px; border-color: #0065bd; border-style: solid; font-weight: bold; font-family: arial, helvetica; font-size: 15px; color: #0065bd;
  cursor: pointer;
}

.slidecontainer {
    width: 302px;
	height: 20px;
	display:flex;
	justify-content: space-around;
	align-items: center;
	background-color: #87ceeb;
border: 1px #0065bd solid;
}


.slider {
    -webkit-appearance: none;
    width: 100px;
    height: 3px;
    background: #f0ffff;
    outline: none;
}

.slider:hover {
background: #f0ffff;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
	border: 1px #0065bd solid;
    background: #0065bd;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
	border: 1px #0065bd solid;
    background: #0065bd;
    cursor: pointer;
}

#myVol{width: 100px;}

/* Callout box - fixed position at the bottom of the page */
.callout {
  position: fixed;
  bottom: 200px;
  right: 50px;
  border:1px; border-color: #0065bd; border-style: solid;
  margin-left: 2px;
  max-width: 250px;
}

/* Callout header */
.callout-header {
  padding: 5px 5px;
  background: #0065bd;
  font-size: 20px;
  font-weight: bold;
  font-family: arial, helvetica;
  color: white;
}

/* Callout container/body */
.callout-container {
  padding: 2px;
  background-color: #f0ffff;
  color: black
}

/* Close button */
.closebtn {
  position: absolute;
  top: -2px;
  right: 15px;
  color: white;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
}

/* Change color on mouse-over */
.closebtn:hover {
  color: lightgrey;
}