/*
   New Perspectives on HTML and CSS
   Tutorial 8
   Review Assignment

   Mobile Styles
   Author: Claudia Lindsay
   Date:   10/08/2015

   Filename:         dfmobile.css
   Supporting Files: tblogo_sm.png

*/

/* Styles to be used with mobile devices */



/* Hide page elements that will not be displayed */

header, header h1, header nav,  footer {
   display: none;
}

/* Block styles */
header, nav, article {
   display: block;
}

/* Header styles */

header {
   background: rgb(18, 15, 12) url(tblogo_sm.png) center center no-repeat;

   -o-background-size: contain;
   -moz-background-size: contain;
   -webkit-background-size: contain;
   background-size: contain;

   height: 50px;
   width: 100%;
}

/* Page section navigation list styles */


section#page nav.horizontal {
   width: 100%;
}

section#page nav.horizontal li {
   display: block;
   float: left;
   height: 20px;
   margin: 0px;
   width: 20%;
}

section#page nav.horizontal li a {
   display: block;
   border: 1px solid rgb(18, 15, 12);
   color:white;
   background-color: rgb(90, 127, 0);
   text-align: center;
   line-height: 20px;
   font-size: 12px;
   margin: 0px;
}

section#page nav.horizontal li:first-of-type a {
   background-color: rgb(50, 97, 0);
}


   section#page article {
      display: block;
      margin: 0px auto;
      width: 90%;
   }


   section#page article h1 {
      font-size: 18px;
      margin: 0px;
      text-align: center;
   }

   section#page #family {
      display: block;
      margin: 5px auto;
      width: 80%;
   }

   section#page article p {
      font-size: 12px;
      margin: 10px;
   }

   nav#familyLinks li span {
      display: block;
      width: 100%;
      font-size: 8px;
      margin: 5px 0px;
      text-align: center;
   }

   nav#familyLinks li a {
      color: black;
   }

   nav#familyLinks li img {
      width: 100%;
   }

   section#page article p:last-of-type {
      display: none;
   }






/* Styles under portrait orientation */
@media screen and (orientation: portrait) {
   nav#familyLinks li {
      display: block;
      width: 40%;
      margin: 5px 5%;
      float: left;
}
}







/* Styles under landscape orientation */
@media screen and (orientation: landscape) {
   li.parentList {
      display: block;
      width: 45%;
      margin: 5px 2%;
      float: left;
}

   li.childList {
      display: block;
      width: 16%;
      margin: 5px 0.2%;
      float: left;
}
}