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: white; color:black;
}
html.usage{
  color: white;
  padding: 0;
  margin:auto; text-align:center;
  overflow:hidden;
  height: 30px;
  width: 75%;
}
div.header { margin: auto;width: 750px;text-align:center; }
header {
  position: relative; top:20px;
  height:200px;padding:10px;
  background-image: url("../image/GuthrieTartanAncient750.jpg");
  background-repeat: repeat;
  background-attachment: fixed;
  /* background-position: center;
  background-size: auto; */
}
img.header {
  position:absolute;
  top:10px;
  left:10px;
  height:90%;
}
.i { font-style: italic;}

.slogan {
  position: relative; top:140px;
  padding:10px;text-align: right;
  color: white;
  font-family:Arial;
  font-size-adjust:initial;
  font-size: x-large;
  font-weight: normal;
  font-style:italic;
}
.intro{
  position: relative; top: 10px;
  text-align:center;
  width: 750px;
  font-style:italic;
}

.blueBack {
  width:750px;height:410px;
  background-image: url("../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}

div.audio-header { margin: auto;text-align:center;}

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

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

footer {
  color: white; 
  background-image: url("../image/GuthrieTartanAncient750.jpg");
  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-image: url("../image/GuthrieTartanAncient750.jpg");
  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;border:0;}
.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; 
  }
  
  header {
    /* position: relative; top:85px; */
	top:5px;
	height:100px;width: 100%;

  } 
  img.header {
    position:absolute;
    top:10px;
    left:10px;
    height:100px;width:90px;
  }
  .slogan {
	position: relative; top:50px;width:270px;
    padding:10px;text-align: right;
    font-family:Arial;
    font-size: 14pt;
    font-weight: normal;
    font-style:italic;
  }
  
  .header{
    height:100px;width: 100%;
  }
  .intro{
    width: 96%;
    font-style:italic;  } 
  .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 {
    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; 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;}  
  } 
  div.header{ width:640px; }