/* Structure your CSS semantically as your order of divs in
your html*/


html, body{
/*background-color: #b5c8e6 */
background-image: url("images/back6.jpg");
background-size: 100%;
background-attachment: fixed;
}

main{
width: 1000px;
min-height: 600px;
margin: auto;
margin-top: -8px;
position: relative;
/*background-color: #fff*/
opacity: 1.0;
}


header{
width: 1000px;
border: 0px solid #000;
position: absolute;
top: 0px;
left: 0px;
height: 128px;
/*background-image: url("images/banner01.jpg");*/
z-index: 2;
opacity: 1.0;
}


nav{
width: 1000px;
min-height: 40px;
border-radius: 18px;
/*background-color: #ffff80;*/
background-color: #8ea6e1;
border: 2px solid #7d8a91;/*#f00;*/
position: absolute;
top: 120px;
left: 0px;
z-index: 2; /* sits above header */
opacity: 0.5;
}

aside{
width: 170px;
min-height: 510px;
border-radius: 18px;
/*background-color: #ffcbe7;*/
/*border: 2px solid #000;*/
border: 2px solid #5a5061;
position: absolute;
top: 182px;
left: 0px;
z-index: 3;
/*opacity: 0.4;*/
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}

section{
width: 794px;
min-height: 510px;
border-radius: 18px;
/*background-color: #ddc2ee;*/
border: 2px solid #5a5061;/*#000;*/
position: absolute;
top: 182px;
right: -4px;
z-index: 3;
padding-top: 10px;
padding-left: 10px;
}

article{
width: 785px;
height: 155px;
/*background-color: #fff;
border: 1px solid #000;*/
position: relative;
margin: 5px 5px 0px 5px; /* top, right, bottom and left margin */
z-index: 2;
}



/* need to use the figure and apply two classes for this to work in
an article */

figure.left{
margin: 5px 0px 0px 5px; /* top right bottom and left margin */
left: 0px;
top: 5px;
width: 535px;
background-color: #c1a6c5; /*#ddd; */ /* grey */
border: 1px solid #323b74; /*black*/
opacity: 1.0;
padding-left: 10px;
}

figure.right{
margin: 5px 0px 0px 5px; /* top right bottom and left margin */
right: 40px;
top: 0px;
width: 535px;
background-color: #c1a6c5; /* grey */
border: 1px solid #323b74; /*black*/
position: absolute;
padding-left: 10px;
}

figure.opposite{
margin: 5px 0px 0px 5px; /* top right bottom and left margin */
right: 40px;
top: -2px;
position: absolute;
text-align: right;
}

footer{
width: 1000px;
height: 45px;
background-color: #8ea6e1;/*#c6e3ff;*/
border-radius: 18px;
border: 2px solid #7d8a91;
position: absolute;
bottom: -161px;
left: 0px;
z-index: 2;
opacity: 0.5;
padding-top: 5px;
padding-left: 5px;
}

.opacityaside{
background-color: #ffcbe7;
opacity: 0.5;
z-index: 2;
}

.opacitysection{
background-color: #ddc2ee;
opacity: 0.65;
z-index: 2;

}

h1, h2, h3, p, ol, ul, li{
margin: 4px 0px 0px 0px;
font-family: Calibri;
opacity: 1.0;
}

h1{
font-size: 1.4em;
color: #574f61;
}

h2{
font-size: 1.1em;
color: #574f61;
}

h3{
font-size: 0.8em;
color: #000;
}

p, ul, ol, li{
font-size: 0.9em;
}

h6{
margin: 4px 0px 0px 190px;
font-family: 'The Girl Next Door', cursive;
font-size: 5em;
color: #776980
}