@charset "utf-8";

/*
   Michelle Peterson
   Floating Style Sheet
   Filename: ca_floatlyaout1.css
*/


/* HTML and Body styles */

html {
    font-family: Verdana, Geneva, sans-serif;
    height: 100%;
    background-color: #1D3040;
}

body {
    background-color: white;
    border-left: 1px solid #1C2F3F;
    border-right: 1px solid #1C2F3F;
    height: 100%;   
    margin: 0px auto;
    min-width: 320px;
    max-width: 1200px;   
    width: 100%;
}

/* Flex Layout */

body {
    display: flex;
    flex-flow: column nowrap;
}

div#container {
    flex: 1 0 auto;
}

/* Header styles */

header {
    background-color: #C5C6B9;
    border-bottom: 1px solid ;
    color: white;
    text-align: center;
}

header h1 {
    color: white;
    font-size: 1.4em;
    padding-left: 20px;
    border-left: black;
}

/* Navigation list styles */

nav img {
    height: 200px;
    width: 300px;
    padding-bottom: 1em;
    padding-left: 20px;
} 

/* Container Styles */

div#container {
   background: #F2E9D8;
   padding: 10px;
   /* column-count: 2; */
}

/* Left Column Styles */

section#leftColumn {
    clear: left;
    float: right;
    width: 65%;
    padding: 1.5em;
 }
 
 /* Right Column Styles */
 
 section#rightColumn {
    float: right;
    width: 30%;
 }


/* Main Section styles */

/* section#leftColumn {
    padding: 10px 20px 0px 20px; 
    clear: both;
    float: left;
    width: 70%;
} */

section#leftColumn img {
   display: block;
   width: 50%;
}

section#leftColumn h2 {
   color: white; 
   background-color: #1D3040;
   font-size: 1.1em;
   letter-spacing: 5px;
   padding: 5px 0px 5px 12px;
   /* column-span: 2; */
}

/* Right Section styles */

section#right {
    padding: 0px 15px 0px 15px;
    clear: both; 
    float: right;
}   

/* Aside styles */
aside {
    border: 1px solid  #AFB0A5; 
    margin: 15px 0px;
    width: 80%;
}


aside h1 {
    background-color: #1D3040;
    border-radius: 10px;
    color: white;
    font-size: 0.9em;
    text-align: center;
    margin: 10px;
}

aside h2 {
    color: black;
    text-align: left;
    font-size: 0.9em;
    line-height: 0.95;
    margin: 15px;
}

aside img {
    width: 30%;
    padding-left: 15px;

}

aside p {
    border-left: 4px solid  #AFB0A5;
    font-size: 0.7em;
    padding: 0px 0px 0px 5px;
    margin: 10px 25px;
    text-align: center;
}


/* Footer styles */   

footer {
    color: white;
    background-color: #1D3040;
    font-size: 0.65em;  
    height: 30px;
    line-height: 30px;   
    letter-spacing: 5px;
    padding: 5px 0px 5px 12px;
    text-align: center;

}

/* ===============================
   Mobile Styles: 0px to 640px 
   ===============================
*/


@media only screen and (max-width: 640px) {

   section#main {
      width: 100%;
   }
   
   section#right {
      width: 100%;
   }
   
   a#navicon {
      display: block;
   }
   
   header nav ul {
      display: none;
   }
   
   header nav ul li {
      font-size: 1em;
      line-height: 1.3em;
      height: 1.3em;
   }
   
   a#navicon:hover+ul, header nav ul:hover {
      display: block;
   } 
} 

/* =============================================
   Tablet and Desktop Styles: greater than 640px
   =============================================
*/


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

   section#main {
      float: left;
      width: 70%;
   }
   
   section#right {
      float: left;
      width: 30%;
   }
   
   header nav ul {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row nowrap;
      flex-flow: row nowrap;
      -webkit-justify-content: center;
      justify-content: center;
   } 
   
   eader nav ul li {
      -webkit-flex: 0 1 auto;
      flex: 0 1 auto;
   }
}