/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 3
   Review Assignment
   
   Style Sheet for the Pandaisia Chocolates Monthly Specials
   Author: Boe Mathewson
   Date:   09/13/2022
   
   Filename: pc_specials.css

*/

/* ----Page Body Styles---- */
body {
   width: 95%;                /* set to be 95% of browser window width */
   min-width: 640px;          /* set the range of the width tp 640px and 960px */
   max-width:960px;           /* set the range of the width tp 640px and 960px */
   margin-right: auto;        /* Horizontally center the page body for the window */
   margin-left: auto;         /* Horizontally center the page body for the window */


}


/* ----Image Styles---- */
                               
img {                       /* Create a style rule that displays all "img" elements*/
   display:block;           /* as blocks */
   width: 100%;             /* with a width of 100%  */
}

/* ----Horizontal Navigation Styles---- */ 
                           /*section to be block floated on the left margin with a width of 16.66% */
nav.horizontal li {        /* Style rule for every list item in the horizontal nav class=horizontal */
   display: block;         /* make section to be block */
   float: left;            /* Floated to left margin */
   width: 16.66%           /* with width of 16.66% */
}

nav li> a {                 /* Display every hyperlink link nested in the nav list as a block*/
   display: block;

}

/* ----Row Styles---- */
 
/*displays with a width of 100% only when all floated elements have been cleared */
div.newRow {               /* For every "div" element of "newRow" class */
   width: 100%;            /*displays with a width of 100% */
   clear: both;            /*only when all floated elements have been cleared */
}

 /*style rule that uses the "after" psueodu-element to expand each newRow class of the "div" element around is floating columns*/
div.newRow::after {
   clear:both;
   content:"";
   display: table;
}
/* ----Column Styles---- */                                                                                                         

div[class^="col-"] {       /*All "div" elements with class "col-" */
   float: left;            /*float on left margin */
   padding: 2% 2%;        /* Then set padding all such elements to 2% */
   -moz-box-sizing: border-box; /* apply support for older browser */
   -webkit-box-sizing: border-box; /* apply support for older browser */
   box-sizing:border-box;  /* apply border box sizing model to the content of those elements */

}



/* ----Specials Styles---- */
/* create a style rule for the div elements to class names and widths */
div.col-1-1 {width:100%;}
div.col-1-2 {width:50%;}
div.col-1-3 {width:33.33%;}
div.col-2-3 {width:66.67%;}
div.col-1-4 {width:25%;}
div.col-3-4 {width:75%;}


/* ----Award Styles---- */
div.specials {                         /* for all divs with the class specials */
   min-height: 400px;                  /* set min height to 400px */  
   outline: 1px dashed rgb(71,52,29); /* and adds a 1 pixel dashed outline around the element with specified color value */  
}

div#awardList {         /* for the awards in div elements with id of "awardlist" */
   position:relative;   /* create a style rule that places it using relative positioning */
   height: 650px;       /* and sets the height to 650px */
   overflow: auto;      /* and uses a scroll bar for overflow content */
}

div.awards {            /* all div elements of the awards class */
position: absolute;     /* place elements in absolute position */
width: 30%;              /* set width to 30% */
}
/* place div elements with id award in positions */                                                                                 /*affects the awards section on right side */
div#award1 {
   top: 80px;
   left: 5%;
}

div#award2 {
   top: 280px;
   left:60%;
}

div#award3 {
   top:400px;
   left: 20%;
}
div#award4 {
   top: 630px;
   left: 45%;
}
div#award5 {
   top: 750px;
   left: 5%;
}

/* Footer Styles */

footer {
   clear: both; /*clear the floating element for the footer */
}