body{ background-image: url(../img/imag0021-qpr.jpg);
        background-attachment: fixed;
        background-size: cover;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
    {
        display:block;
}

header{
        padding-right:2%;
        padding-left:2%;
        width:75%;
        margin:auto;
        top: 20px;
        text-align: center;

        border: solid #000000 2px;
        border-radius: 15px;

        background-image: linear-gradient(to right, #0060BF, #B2E3FF);
    }


h2,header h1{
         text-align:center;
         color:#F5F8FF ;
         text-shadow: 1px 1px 1px #4300A8;
    }

    nav{
         position:relative;
         display: block;
         font-family: "Trebuchet MS", Helvetica, sans-serif;
         font-variant: small-caps;

    }
        nav ul{
        list-style:  none;
        position:relative;
        display:block;
        text-align: center;

    }

  nav li{
        position:relative ;
        display: inline;
        line-height: 2em;
        font-weight:bold;
        border: solid #000000 1px;
        border-radius: 5px;
        padding:3px;
        text-shadow: 1px 1px 1px #4300A8;
        background-color:#CCDDFF;

        text-align: center;
        margin: 5px;
    }

 /* Inactive buttons*/
    .inactive {
        color:#CCCCCC ;
        background-color: #BBBBBB;
    }

/*active buttons*/
    nav a{

         text-decoration: none;
    }

    nav a:link{
        color: #FFFFCC;
    }


    nav a:visited{
        color: #C2FFD6;
    }

    nav a:hover{
    color: #FFCCB2;
    }

     /* top left link to go up to current directory index */
    aside a{

         text-decoration: none;
    }

   aside a:link{
        color:#FFFFCC
    }


    aside a:visited {
        color: #C2FFD6;
    }

    aside a:hover {
    color: #FFCCB2;
    background-color: #66FF66;
    }

    section{
        position: relative;
        width: 80%;
        top: 30px;
        border: solid #FFFFFF 3px;
        border-radius: 5px ;

        margin: auto;
        text-align: left;
        padding:5px;
    }

    blockquote{
         display: block;
        width: 200px;
        height: 100px;

          border: solid #6600FF 1px;
          border-radius: 5px ;
        color: #FFFFFF;
        padding: 5px;
    }

    aside{
        position: fixed;
        top: 0;
        width:75px ;

        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        text-decoration: none;
        color: #FFFFCC;

         font-size: larger;
        padding: 5px;

    }

        #right{
        right:0;
        width:100px;
        border: dotted #FFFFFF 1px;

        background-image : linear-gradient(to bottom left, #336600, #33FF00)  ;
    }

       #up{
       left:0;
       height:30px;
       border-radius: 2px;
       border: solid #006600 1px;
       background-image : linear-gradient(to bottom right, #336600, #33FF00)  ;

   }



     #b1{
         position:static;

        background-color: rgba(204, 0, 0, .5);

    }
       #b2{
         position:absolute;
        background-color: rgba(0, 128, 128, .7);
         left:50% ;
        top:50px;

    }
          #b3{
              position:relative;
               display:inline-block;
        background-color: rgba(0, 0, 255, 0.5);



    }
            #b4{
                 position:relative;
              display: inline-block;
                background-color: rgba(216, 217, 122, 0.5);


            }
                #b5{
                    position: relative;
                    display:block;
                    right:10px;
            background-color: rgba(0, 0, 255, 0.8);

        }