html,body {
  width:100%;height:100%;margin: 0 0 0 0;padding: 0 0 0 0;
  font-family: arial;color: #110b01;font-size: 12pt;
  background-color: #e0d0a4; 
}
body.kili {
  width:80%;
  background-color: #9fdce3; 
}
html.usage{
  color: white;
  padding: 0;
  margin:auto; text-align:center;
  overflow:hidden;
  height: 30px;
  width: 75%;
}

header {
  position: relative; top:85px;
  height: 350px; width: 750px;
  background-image: url("/ovs/image/ovsHeader.JPG");
  background-repeat: no-repeat;
  /* background-attachment: fixed;
  background-position: center;
  background-size: auto; */
}
.i { font-style: italic;}

.slogan {
  color: red;
  font-family:Arial;
  font-size-adjust:initial;
  font-size: x-large;
  font-weight: normal;
  font-style:italic;
  position: relative;
  top: 50px; left: -170px;
}
.intro{
  position: relative; top: 90px;
  text-align:center;
  width: 750px;
  font-style:italic;
}
.susan {
  position: relative; top: 160px;
  text-align:center;
  width: 750px;
  font-size: small;
}
.blueBack {
  width:750px;height:410px;
  background-image: url("/ovs/image/bluebackground.jpg");
  background-repeat: no-repeat;
  background-size: auto;
  background-attachment: fixed;  
}
.whiteBack {
	width:710px;
	background-color: white;
	padding:15px;
	margin-left: 20px;
	margin-right; 20px;
}

a:link { color: wheat}
a:visited { color: wheat}
a:hover {color: white}
a:active { color: red}

a.body:link { color: blue}
a.body:visited { color: blue}
a.body:hover {color: white}
a.body:active { color: red}

div#whiteBack a:link { color: blue}
div#whiteBack a:visited { color: blue}
div#whiteBack a:hover {color: red}
div#whiteBack a:active { color: red}

img {
  position: relative; top: 140px;
  
}
img.team { top: 0px; }

figcaption { color:black; text-align: left; }
figcaption.qt { font-style:italic }
figcaption.team {text-align: center;}

footer {
  color: black; background-color: #7fbcff; 
  word-wrap: normal; height: 100%;
  margin:auto;padding-left: 15px; padding-right:15px;  padding-top:10px;
  font-family: Sans,Arial;font-size: 14px;font-weight: bold;line-height: 14px;
  /* Border Radius */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px; 
}
.footer{
  position: relative; bottom: -250px; 
  margin: auto;text-align:center;
}
p.usage{
  color: white; background-color: #7fbcff; 
  word-wrap: normal; height: 100%; width: 750px;
  margin-left: auto; margin-right:auto;  padding-top:12px;
  font-family: Sans,Arial;font-size: 14px;font-weight: bold;line-height: 14px;
  /* Border Radius */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}
iframe.ftrFrm{
  width:100%;margin:auto;text-align:center;
}
.center{ margin: auto;width: 750px;text-align:center;}
.error{ position: relative; height: 250px; top: 200px; color:red}
h1{text-shadow: 5px 5px 5px #fffa04;text-align:center;}
h2{text-shadow: 5px 5px 5px #fffa04;text-align:center;font-size: 24px}
h4{text-align:center;margin:0; padding: 10px;text-shadow: 5px 5px 5px #fffa04;}

@media only screen and ( max-width: 750px ) /* 1000 */
		{
      header{
        width: 100%;
      }
			.center, .intro
			{
				width: 100%;
				margin: 0;
			}
      
		}
@media only screen and ( max-width: 40em ) /* 640 */
  {    
  html,body {
    width:100%;height:100%;margin: 0 0 0 0;padding: 0 0 0 0;
    font-family: arial;color: #110b01;font-size: 12pt;
    background-color: #e0d0a4; 
  }
  
  header {
    /* position: relative; top:85px; */
	top:85px;
	width: 100%;
    background-image: url("/ovs/image/ovsHeader.JPG");
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* background-position: static; */
    /* background-size: auto; */
  } 
  .slogan {
    color: red;
    font-family:Arial;
    font-size: 14pt;
    font-weight: normal;
    font-style:italic;
    /* position: relative; */
    top: 50px; left: -30px;
  }
  
  .header{
    height:100px;width: 100%;
  }
  .intro{
    width: 96%;
    font-style:italic;  } 
  .susan {
    position: relative; top: 160px;
    text-align:center;
    width: 96%;
    font-size: small;
  }
  .blueBack {
	top: 200px;
	width: 100%;
	height: auto;
  }
  .whiteBack {
	width:90%;
	padding:15px;
	margin-left: 20px;
	margin-right: 20px;
	margin-botton: 20px;
  }

  a:hover {color: white} 
  
  div#whiteBack a:link { color: blue}
  div#whiteBack a:visited { color: blue}
  div#whiteBack a:hover {color: red}
  div#whiteBack a:active { color: red}

  
  footer {
    color: white; background-color: #7fbcff; 
    word-wrap: normal; 
    height:100%; 
    margin:auto;padding-left: 15px; padding-right:15px;  padding-top:5px;
    font-family: Sans,Arial;font-size: 14px;font-weight: bold;line-height: 14px;
    /* Border Radius */
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
  }
  .footer{
    position: relative; bottom: -150px; height:50px;width: 84%;
    margin: auto;text-align:center;
  }
  img { position: relative; top: 140px; width: 96%; }
  img.team { width:100%; }
  .center{margin: auto;width: 96%;text-align:center;}
  h1{text-shadow: 5px 5px 5px #fffa04;text-align:center;}
  h4{text-align:center;margin:0; padding: 10px;text-shadow: 5px 5px 5px #fffa04;}  
  }