@charset "utf-8";
html {
/*    background-color: rgb(186, 136, 81); */
}
body {
    width: 95%;
    min-width: 640px;
    max-width: 1680px;
    margin-left: auto;
    margin-right: auto;
    min-height: 100px;
    font-family: Arial, Helvetica, sans-serif;
    color: #6A6A75;
}
header {
    color: #081359;
}
 
header > section img {
    display: block;
    width: 100%;
}
body > header > nav.horizontalNavigation  li {
    width: 20%;
}
 
nav.horizontalNavigation   li {
    display: block;
    float: left;
}

nav.horizontalNavigation a {
    display: block;
    text-align: center;
}

nav ul {
    margin: 0;
}

nav a {
    text-decoration: none;
}

header  p {
    padding-top: 20%;
    color: white;
    font-style: italic;
    font-family: comic sans ms;
    font-size: 700%;
    text-align: center;
}
section#About {
    line-height: 24px;
	background-color: #e0e3d8;
	height: 700px;
    width: 100%;
}
section#Music {
    background-color: #847d70;
   	height: 550px;
    width: 100%;

}
section#Contact {
    background-color: #af8d71;
    height: 550px;
    width: 100%;
    color: white;
    padding-top: 0%;
    margin-top: 0%;
}
section > div.details {
    margin-left: 30%;
    margin-top: 0%;
}
section > div.details > h1{
    margin-top: 0%;
    padding-top: 10%;
}
article.David {
    width: 48%;
	float: left;
	clear: left;
    margin: 20px 0px 0px 0px;
}
 
article.David > img {
    padding-left: 30%;
}

article.David > p {
    margin-left: 20%;
    margin-right: 20%;
    padding: 3%;
    color: grey;
    background-color: white;
}
 
article.Gary   {
    width: 48%;
	float: right;
    margin: 20px 0px 0px 0px;
}

article.Gary > img {
    padding-left: 30%;
}

article.Gary > p {
    margin-left: 20%;
    margin-right: 20%;
    padding: 3%;
    color: grey;
    background-color: white;
}

article.David > p, article.Gary >  p, article.Both > p {
    border: solid;
}
article.Both  {
    margin-left: 10%;
    width: 80%;
    float:left;
}
article.Both > p {
    margin-left: 5%;
    margin-right: 5%;
    background-color: white;
    padding: 3%;
 }
iframe {
    width: 45%;
    height: 45%;
    margin: 1% 2% 1% 2%;
    float: left;
}
footer  {
    margin: 20px 0px 20px 0;
    height: 150px;
    text-align: center;
}

/* ========================================================
 * Mobile Styles: 0 to 480 pixels
 * ========================================================
 */
@media only screen and (max-width: 480px)
{

/*    body > header > section.homeBackground {
        background: url(Images/smallDavidGary.png) 100%/ cover no-repeat content-box;
        clear: left;
        height: 35vh;
        max-width: none;
    }
*/
    header  p {
        padding-top: 20%;
        color: white;
        font-style: italic;
        font-family: comic sans ms;
        font-size: 200%;
        text-align: center;
    }
    article.David > img {
        padding-left: 30%;
        width: 75%;
    }
    article.Gary > img {
        padding-left: 30%;
        width: 64%;
    }
    section#About {
        line-height: 15px;
        background-color: #e0e3d8;
        height: 700px;
        width: 100%;
    }
    section#Music {
        line-height: 15px;
        background-color: #847d70;
        height: 550px;
        width: 100%;

    }
    article.David > p {
        margin-left: 20%;
        margin-right: 20%;
        padding: 3%;
        color: grey;
        width:72%;
    }
    article.Gary > p {
        margin-left: 20%;
        margin-right: 20%;
        padding: 3%;
        color: grey;
        width:72%;
    }
    article.Both > p {
        margin-left: 20%;
        margin-right: 20%;
        padding: 3%;
        color: grey;
        width:72%;
    }
}