@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 5
   Case Problem 1
   
   Author:  Adrian Marintez 
   Date:     3/15/26
   
   Filename: gp_layout.css

   This file contains the layout styles and media
   queries used with sample pages from the Golden
   Pulps website.

*/


/* Import Basic Design Styles Used on All Screens */

@import url("gp_designs.css");

/* Flex Layout Styles */
body
{
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
}
section#sheet
{
   -webkit-flex: 3 1 301px;
   flex: 3 1 301px;
}
article
{
   -webkit-flex: 1 3 180px;
   flex: 1 3 180px;
}
/* ============================================
	Mobile Devices: 0 - 480 pixels
   ============================================
*/
@media only screen and (max-width: 480px)
{
   img.panel
   {
      width: 100%;
   }
   nav.horizontal
   {
      -webkit-order: 99;
      order: 99;
   }
   body > footer
   {
      -webkit-order: 100;
      order: 100;
   }
}
/* ===================================================
	Tablet and Desktop Devices: Greater than 480 pixels
   ===================================================
*/
@media only screen and (min-width: 481px)
{
   nav.horizontal ul
   {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row nowrap;
      flex-flow: row nowrap;
      height: 40px;
   }
   nav.horizontal ul li
   {
      -webkit-flex: auto;
      flex: 1 1 auto;
   }
   img.size1{width: 100%;}
   img.size2{width: 60%;}
   img.size3{width: 40%;}
   img.size4{width: 30%;}
}