html,body{
  background-color: #000;
  background-image: url("images/purple rose.jpg");
  /*background-size: 100%;*/
  background-repeat: stretch;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
}

/* To secure correct behaviour in older browsers, set the CSS display property for these HTML elements to block: */
header,section, footer, aside, nav, article, figure{
  display: block;
 }
 
 /* ######## DIVISIONS ######## */
main{
     width: 1024px;
     min-height: 768px;
     position: relative;/* relative to browser*/
     margin: auto;
     margin-top: -8px;
     border: 2px solid #000;
     z-index: 0;
}

header{
    
     width: 1020px;
     height:148px;
     /*background-color: #a37eed;Purple*/
     border: 2px solid #000;
     position: absolute;
     top: -2px;
     left: -2px;
     z-index: 1;
     opacity: 1;
} 

aside{
     width: 205px;
     min-height: 514px;/* do the math*/
     position: absolute;
     top: 198px;
     left: 0px;
     z-index: 1;/* Sits above the header*/
     padding: 3px
} 

section{
     width: 820px;
     min-height: /*524px; do the math*/519px;
     background-color: #aaa;/* grey*/
     border: 2px solid #000;/*black color*/
     position: absolute;
     top: 198px;
     right: -2px;
     z-index: 1;
     
} 

article{
  width: 807px;
  height: 160px; /*Do the math*/
  background-color: #fff; /* White*/
  border: 1px solid #000; /* Black*/
  position: relative;
  margin: 6px 5px 0px 15px;/*6px 5px 0px 5px;*/ /* top, right, bottom, and left margin */
  z-index: 2;
}



video{
  position: absolute;
  height: 145px; /* do the math*/
  width: 210px;
  z-index: 4;
}

media{
  position: absolute;
  z-index: 4;
}

.media1{
  height: 165px; /* do the math*/
  width: 240px;
  top: -10px;
  left: 20px;
  margin: 0px;
}

.media2{
  height: 145px; /* do the math*/
  width: 190px;
  top: -10px;
  left: 250px;
  margin: 0px;
}

.separate{
  position: relative;
  top: 10px;
  left: 300px;
  height: 165px; 
  width: 240px;
  z-index: 4;
}

picture{
  position: absolute;
  top: 5px;
  left: 5px;
  height: 145px; /* do the math*/
  width: 145px;
  background-color: #fffff;
  z-index: 4;
  border: 2px solid #000;
 }
 
 picture1{
  position: absolute;
  top: 5px;
  left: 5px;
  height: 145px; /* do the math*/
  width: 145px;
  z-index: 4;
  border: 2px solid #000;
 }
 
 .opacity1{
  opacity: 0;
  z-index: 5;
  
}
.black{
  color: #000;
  z-index:4;
  
}
.text{
 border: 2px solid #000;
}
/* Need to use the figure and apply two classes for this to work in the article */

footer1{
     width: 100%;
     height: 60px;
     position: absolute;
     top: 1000px;
     left: -2px;
     z-index: 2;/* Sits above the header*/
} 
 
 footer{
     width: 1020px;
     height: 60px;
     background-color: #f00;
     border: 2px solid #000;
     position: absolute;
     bottom: -2px;
     left: -2px;
     z-index: 2;/* Sits above the header*/
}  

footer2{
     width: 100%;
     height: 60px;
     position: absolute;
     top: 744px;
     left: 2.5px;
     z-index: 2;/* Sits above the header*/
}  
 
figure{    
  position: absolute;
  top: -10px;
  right: -30px;
  height: 145px; /* do the math*/
  width: 625px;
  background-color: #9b6bcf; /* light purple*/
  z-index: 4;
  border: 2px solid #000;
  padding-left:10px;
 }
.opacity{
  background-color: #666;
  opacity: 0.6;
}
.white{
  color: #fff;
}

h1, h2, h3, h4, h5, p, ol, ul, li{
  margin: 4px 0px 0px 0px;
  font-family: Georgia;
  font-weight: 900;
  color: #000;
}

h1{
font-size: 1.5em;
}

h2{
font-size: 1.4em;
}

h3{
font-size: 1.2em;
}

h4{
font-size: 1em;
}

h5{
font-size: 1.3em;
}

p{
font-size: 0.8em;
}

ol, ul, li{
font-size: 0.9em;
}
li{
padding:0px;
margin:0px;
}