@charset "utf-8";

html {
   background-color: rgb(255,255,255);
}

body {
   margin-left: auto;
   margin-right: auto;
   width: 98%;
   font-family:arial,serif;
   font-size:2vw;
   color:teal;
}

/* Page Header Styles */

body > header > nav.navBar li {
   width: 12.5%;
}


/* Horizontal Navigation List Styles */



nav.navBar > ul > li {
   display: block;
   float: left;
}

nav.navBar a {
   display: block;
   font-family: arial,serif;
   font-size: 2vw;
   line-height: 2.1vw;
   text-align: center;
}  

nav.navBar a:link, 
nav.navBar a:visited {
   color: teal;
   border-top: solid 10pt teal;
}

nav.navBar a:hover, 
nav.navBar a:active {
   background-color: #f0f0f5;
   color: rgb(0,102,153);
   border-top: solid 10pt teal;
} 

/* Heading Styles */

h1, h2, h3, h4, h5 {
   text-indent: 1em;
}


h1 {
   font-size: 3.5vw;
   line-height: 2.4em;
   font-family: arial,serif;
   letter-spacing: 0.3em;
   text-align: center;
   font-weight: normal;
   color: teal;
}

h2, h3 {
   font-family: arial,serif;
   padding: 0.5em 0;
}

h2 {
   font-size: 2.5vw;
   background-color: teal;
   color: black;
}


h3 {
   font-size: 2.25vw;
}

h4 {
   font-size: 2vw;
}

h5 {
   font-size: 1.75vw;
}

/* Paragraph Styles */

p {
   margin: 1em;
   font-size:2vw;
}


a:link,a:visited {
	text-decoration:none;
}
a:hover {
	text-decoration:none;
	background-color: rgb(204,255,255);
}

img {
  width: 80%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5vw;
  margin-bottom: 2vw;
}

/* Footer Styles */

footer {
   color: teal;
   background-color: rgb(204,255,255);
   font-size: 2vw;
   padding: 1em 0;
   text-align: center;
}

ol li {
   margin-left:2vw;
   list-style:none;
   margin-bottom:2vw;
}

@media only screen and (max-width: 480px) {
  span.raspipromo {
    z-index:1;
    position:absolute;
    left: 0%;
    top: 0%;
    background-color: rgb(250,250,230);
    height: 5%;
    width: 20%;
    padding: 5px;
    font-size: 1vw;
    font-family: "Arial", "Verdana", sans-serif;
    }
}
@media only screen and (min-width: 481px) {
  span.raspipromo {
    z-index:1;
    position:absolute;
    left: 10%;
    top: 20%;
    background-color: rgb(250,250,230);
    height: auto;
    width: 20%;
    padding: 5px;
    font-size: 1.25vw;
    font-family: "Arial", "Verdana", sans-serif;
    }
}
/* Computer Styles: 700px and greater */
@media only screen and (min-width: 700px) {
  span.raspipromo {
    z-index:1;
    position:absolute;
    left: 0%;
    top: 0%;
    background-color: rgb(250,250,230);
    height: auto;
    width: 20%;
    padding: 5px;
    font-size: 1vw;
    font-family: "Arial", "Verdana", sans-serif;
    }
}
/* Computer Styles: 769px and greater */
@media only screen and (min-width: 769px) {
  span.raspipromo {
    z-index:1;
    position:absolute;
    left: 0%;
    top: 0%;
    background-color: rgb(250,250,230);
    height: auto;
    width: 20%;
    padding: 5px;
    font-size: 1vw;
    font-family: "Arial", "Verdana", sans-serif;
    }
}