@charset "utf-8";
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 1
Case Problem 3
Filename: dr_layout.css

This file contains the layout styles used at Diane's Run
Modified by : Dr. Roger Webster
*/


/* =============================================
Base layout styles used by mobile devices
up to 480px and cascaded to larger devices 
unless superceded by other styles.
=============================================
*/

html {
    height: 100%;
    margin: 0; padding: 0; border: 0;
    background-color: white;
}

body {
    margin: 0px auto auto auto;
    width: 100%;
    min-width: 320px;
    background-color: white;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 16px;

}

/* rww */
body > header > nav > ul {
    display: block;
    width: 100%;
    background-color: #003366;
    height: 25px;
    margin-left:0px;
    margin-right:0px;
    

    
  /*  align-items: center; 
    display: flex; 
    align-content: center; 
    justify-content : center;
    */
}

/* rww */
body > header > nav > ul > li {
    display: block;
    width: 12.5%;
    height: 100%;
    float: right;
    font-size: 0.8em;
    color: white; 
    text-align: center; 
}

body > header > nav > ul > li > a {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: white;
    text-decoration: none;
}

body > header > nav > ul > li > a:visited {
    color: white;
}

body > header > nav > ul > li > a:hover {
    color: white;
    background-color: blue;
}

body > header > nav > ul > li > a:active {
    color: white;
    background-color: #c20563;
}


/*
body section:first-of-type {
display: none;
}

body section:nth-of-type(2) {
width: 94%;
margin: 0px auto;
}

body section:nth-of-type(2) header h1 {
font-size: 1.1em;
color: #c04198;
}

body section:nth-of-type(2)  h2 {
font-size: 0.9em;
color: #c04198;
}

body section:nth-of-type(2) header img {
width: 100%;
}

body section:nth-of-type(2) p, body section:nth-of-type(2) li {
font-size: 0.8em;
}

body section:nth-of-type(2) a {
color: #c04198;
}

body section:nth-of-type(2) a:visited {
color: #c04198;
}
*/

footer {
    clear: left;
    background-color: blue;
    color: white;
    text-align:center;
    vertical-align: middle;
    height: 30px;
    font-size: 0.7em;
}

/*
article {
position: relative;
display: block;
}

aside {
display: block;
float: left;
width: 250px;
background-color: #a29d96;
margin-top: -30px;
}

aside blockquote {
width: 80%;
color: white;
margin: 10px auto 20px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 0.9em;
}

aside {
display: none;
}
*/

/* =============================================
Tablet layout styles used by devices
481px to 768px and cascaded to larger 
devices.
=============================================
*/


@media only screen and (min-width: 481px) {
/*
    body {
        font-size: 18px;
        min-height: 100%;
    }

    body header {
        width: 100%;

    }

    body section {
        float: left;
    }
*/
    /*RWW here 
    body section:first-of-type {
        width: 35%;
        display: block;
        margin-left: 2px;
        margin-right: 2px;
    }
    
    body section:nth-of-type(2) {
        width: 64%;
        margin-left: 2px;
        margin-right: 2px;
    }
    
    
    */
    
    /*
    body section:first-of-type h1 {
    font-size: 1em;
}

    body section:first-of-type p {
    font-size: 0.8em;
}

    body section:first-of-type ul {
    padding-left: 20px;
}
    body section:first-of-type ul li {
    font-size: 0.8em;
    margin: 2em 0;
}

    body section:first-of-type ul li strong {
    color: #c04198;
}


    body section:nth-of-type(2) {
    margin-right: 2%;
}


    body section:nth-of-type(2) header h1 {
    font-size: 1.5em;
}

    body section:nth-of-type(2)  h2 {
    font-size: 1.1em;
}

    body section:nth-of-type(2) p, body section:nth-of-type(2) li {
    font-size: 0.9em;
}
    */

    footer {
        font-size: 0.85em;
    }



    /* =============================================
    Desktop layout styles used by  devices
    769px and larger.
    =============================================
    */

    @media only screen and (min-width: 769px) {

        html {
           
              background-color: rgb(153, 255, 255); 
            width : 100%;
        }

        body {
            
            background-color: rgb(153, 255, 255); 
            width: 90%;
            /*max-width: 1020px;*/
            -moz-box-shadow: rgba(61, 61, 61, 0.9) 20px 0px 25px,  rgba(61, 61, 61, 0.9) -20px 0px 25px;
            -webkit-box-shadow: rgba(61, 61, 61, 0.9) 20px 0px 25px,  rgba(61, 61, 61, 0.9) -20px 0px 25px;
            box-shadow: rgba(61, 61, 61, 0.9) 20px 0px 25px,  rgba(61, 61, 61, 0.9) -20px 0px 25px;
        }
    }/* end @media only screen */

}