* {
  box-sizing:border-box;
}

body, html{
  margin:0px;
  padding:0px;
}

body {
  width:100%;
  font-family:arial;
  font-size:1em;
  /*background-color:#222222;*/
  background-color:#000030;
}

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

div.text_banner {
  width:100%;
  padding:1em 0em 1em 0em;
  background-color:black;
  color:yellow;
  text-align:center;
  font-weight:bold;
}

div.topbar {
  display:block;
  width:100%;
  margin:0px;
  height:160px;
}

div.topbar img.headerbar {
  width:100%;
  height:160px;
}

div.topbar img.logo {
  display:block;
  position:relative;
  top:-187px;
  z-index:10;
  margin: 0px 5% 0px auto;
  height:140px;
}

div.tel_email {
  display:block;
  position:relative;
  top:-140px;
  z-index:10;
  padding-left:20px;
  height:34px;
  color:white;
}

div.tel_email_element {
  display:inline;
}

div.tel_email_element img {
  display:inline;
  margin-right:0.5%;
  height:30px;
}

div.tel_email_element div.text {
  display:inline;
  margin-right:1%;  
  text-align:left;
  vertical-align:top;
  font-weight:bold;
  font-size:100%;
  white-space:nowrap;
}

div.tel_email_element div.text a {
  color:white;
}

img.school_banner {
  float:left;
  width:25%;
  border:4px solid black;
}

div.leftpane {
  display:block;
  float:left;
  width:60%;
}

div.leftpane img {
  width:100%;
  border:5px solid #222222;
}

div.rightpane {
  display:block;
  float:left;
  width:40%;
}

div.schoolsheading {
  margin-top:10px;
  padding:0px 0px 15px 0px;
  text-align:center;
  font-size:200%;
  font-weight:bold;
  color:lightblue;
  text-shadow:1px 1px 2px black, 0 0 1em white, 0 0 0.2em darkblue;
}

div.rightpane div.schoolname {
  padding-left:1em;
  font-size:1em;
  font-weight:bold;
  color:white;
  /*text-shadow:1px 1px 2px black, 0 0 1em white, 0 0 0.2em darkblue;*/
}

div.rightpane img {
  width:100%;
  border:2px solid black;
}

div.hef {
  margin:20px auto 0px auto;
  position:relative;
  width:90%;
  height:0;
  padding-top:45%; /* aspect ratio */
}

div.hef iframe {
  display:block;
  margin:0px auto 0px auto;
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  width:100%;
  height:100%
}

div.vidtext {
  display:block;
  margin-top:4px;
  margin-left:10px;
  margin-bottom:20px;
  color:white;
  font-size:1em;
}  

div.onclicktext {
  display:block;
  margin-top:4px;
  margin-left:10px;
  margin-bottom:20px;
  color:yellow;
  cursor:pointer;
  font-size:1em;
}  

@media only screen and (max-width:800px) {

div.tel_email {
  top:-150px;
}

div.tel_email_element {
  display:block;
}

div.tel_email_element img {
  height:20px;
}

div.topbar img.logo {
  top:-170px;
  margin: 0px 2% 0px auto;
  height:100px;
}

div.schoolsheading {
    font-size:95%;
  }

  div.rightpane div.schoolname {
    font-size:100%;
  }  
}