/*  Assignment Name: Path of Light Yoga Studio
        Task 2: Configure the CSS
    File Name: yoga.css
    Date: 11/12/18 
    Programmer: Mary Grace A. Gusso */

* { box-sizing: border-box; }

header, nav, main, footer { display: block; }

body    { background-color: #3F2860;
          color: #3F2860;
          font-family: Verdana, Arial, sans-serif; }

header  { background-color: #9BC1C2;
          background-image: url(../lilyheader.jpg);
          background-position: right;
          background-repeat: no-repeat;
          height: 150px; }

h1      { padding: 50px 0 0 2em; }

nav     { float: left;
          width: 160px;
          font-weight: bold; 
          padding: 1em; }

nav ul  { list-style-type: none; 
          padding-left: 0; }

nav a   { text-decoration: none; 
          display: block;
          text-align: center;
          font-weight: bold;
          border: 3px outset #CCCCCC;
          padding: 1em;
          margin-bottom: 1em;}

nav a:link { color: #3F2860; }
nav a:visited { color: #497777; }
nav a:hover { color: #A26100;
              border: 3px inset #333333; }

main    { padding: 0 2em;
          display: block; 
          margin-left: 170px;
          padding-top: 1em; }

.floatleft { float: left; 
             margin-right: 4em; }

.clear  { clear: both; }

.studio { font-style: italic; }

table   { width: 60%;
          margin: auto;
          border: 1px solid #3F2860;
          border-collapse: collapse;
          margin-bottom: 1em; }

th, td  { padding: 5px;
          border: 1px #4F2860;}

tr:nth-of-type(even) { background-color: #9BC1C2; }

caption { margin: 1em;
          font-weight: bold;
          font-size: 120%; }

footer  { background-color: #9BC1C2;
          font-size: .60em;
          font-style: italic;
          text-align: center; 
          padding: 1em; }

#wrapper { min-width: 1200px;
           max-width: 1480px;
           margin-left: auto;
           margin-right: auto;
           background-color: #F5F5F5; }

#mobile { display: none; }

#desktop { display: inline; }

@media only screen and (max-width: 1024px) {
    body { margin: 0; padding: 0; }
    #wrapper { width: 100%; min-width: 0;
               margin: 0; padding: 0; }
    header { padding-top: 1px; }
    h1 { padding-top: 1em; }
    nav { float: none; width: auto; padding-left: 2em; }
    nav a { padding: 0.2em; margin-left: 0.3em; 
            float: left; width: 23%; }
    main { padding: 2.5em 1em; margin: 0;
           font-size: 90%; clear: both; }
    #hero { width: 100%; height: auto; }
    h2, h3, p, dl { padding: 0 2em; }
    main ul { margin-left: 2em; }
    .floatleft { margin-left: 2em; margin-bottom: 1em; }
    .clear { padding-left: 2em; }
}

@media only all and (max-width: 768px) {
    h1 { font-size: 2em; padding-top: 0.25em;
         padding-left: 1.5em; width: 85%;
         text-align: center; }
    nav a { padding: 0.5em; width: 45%;
            float: left; min-width: 6em; margin-left: 0.5em; }
    main { padding: 0; }
    .floatleft { float: none; display: none; }
    #hero { display: none; }
    footer { padding: 0.5em; margin: 0; }
    #mobile { display: inline; }
    #desktop { display: none; }
}