@charset "utf-8";


/*
   New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
   Tutorial 11
   Tutorial Case

   The Japanese Puzzle Factory Layout Style Sheet
  
   Filename:         jpf_layout.css

*/


/* HTML and Body styles */

html {
   background: rgb(242, 228, 153);
   font-family: Verdana, Geneva, sans-serif;
   height: 100%;
}

body {
   background-color: white;
   box-shadow: rgb(51, 51, 51) 10px 0px 40px, rgb(51, 51, 51) -10px 0px 40px;
   border-left: 1px solid gray;
   border-right: 1px solid gray;
   min-height: 100%;   
   margin: 0px auto;
   min-width: 600px;
   max-width: 1024px;   
   width: 100%; 
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;   
   -webkit-align-items: center;
   align-items: center;   
}


/* Header styles */

header {
   background: gray;
   width: 100%;
}

header img#logoimg {
   display: block;
   width: 100%;
}

/* Navigation list styles */

header nav ul {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row nowrap;
   flex-flow: row nowrap;
   -webkit-justify-content: center;
   justify-content: center;
   width: 100%;
}

header nav ul li {
   font-size: 1em;
   -webkit-flex: 0 1 auto;
   flex: 0 1 auto;
}

header nav ul li a {
   color: white;
   display: block;
   padding: 5px 20px;
   width: 100%;
}

header nav ul li a:hover {
   color: rgb(214, 237, 129);
}

a#navicon {
   display: none;
}


/* Section Styles */

section {
   -webkit-flex: 1 1 480px;
   flex: 1 1 480px;  
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
   -webkit-justify-content: center;
   justify-content: center; 
   margin-top: 20px;
   border-right: 1px solid black;
}


section > h1 {
   margin: 10px 0px 3px;
   font-size: 1.5em;
   font-weight: normal;
   letter-spacing: 7px;
   text-align: center;
   padding: 10px 0px 0px 0px;
   width: 100%;
}


div#topButtons, div#bottomButtons {
   width: 90%;
   margin: 0px auto;
   text-align: center;
}

   
input.puzzles {
   display: inline-block;
   font-size: 1em;
   height: 30px;
   width: 120px;
   margin: 5px 10px;

   background-color: rgb(211, 255, 163);
   background: -o-linear-gradient(white 5px, rgb(211, 255, 163), rgb(145, 211, 40));
   background: -ms-linear-gradient(white 5px, rgb(211, 255, 163), rgb(145, 211, 40));
   background: -moz-linear-gradient(white 5px, rgb(211, 255, 163), rgb(145, 211, 40));
   background: -webkit-linear-gradient(white 5px, rgb(211, 255, 163), rgb(145, 211, 40));
   background: linear-gradient(white 5px, rgb(211, 255, 163), rgb(145, 211, 40));

   border: 2px solid rgb(76, 188, 0);
   border: 2px solid rgba(76, 188, 0, 0.7);
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
}

input.puzzles:hover {
   background-color: rgb(145, 211, 40);
   background: -o-linear-gradient(white 5px, rgb(145, 211, 40), rgb(39, 94, 0));
   background: -ms-linear-gradient(white 5px, rgb(145, 211, 40), rgb(39, 94, 0));
   background: -moz-linear-gradient(white 5px, rgb(145, 211, 40), rgb(39, 94, 0));
   background: -webkit-linear-gradient(white 5px, rgb(145, 211, 40), rgb(39, 94, 0));
   background: linear-gradient(white 5px, rgb(145, 211, 40), rgb(39, 94, 0));

   border: 2px solid rgb(39, 94, 0);
   border: 2px solid rgba(39, 94, 0, 0.7);
}

#peek, #solve {

   font-size: 1em;
   padding: 2px 5px;
   width: 130px;

   background-color: rgb(254, 232, 130);
   background: -o-linear-gradient(white 5px, rgb(254, 232, 130), rgb(233, 207, 29));
   background: -ms-linear-gradient(white 5px, rgb(254, 232, 130), rgb(233, 207, 29));
   background: -moz-linear-gradient(white 5px, rgb(254, 232, 130), rgb(233, 207, 29));
   background: -webkit-linear-gradient(white 5px, rgb(254, 232, 130), rgb(233, 207, 29));
   background: linear-gradient(white 5px, rgb(254, 232, 130), rgb(233, 207, 29));

   border: 2px solid rgb(233, 207, 29);
   border: 2px solid rgba(233, 207, 29, 0.7);

   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
}

#peek:hover, #solve:hover {

   background-color: rgb(233, 207, 29);
   background: -o-linear-gradient(white 5px, rgbrgb(233, 207, 29), rgb(200, 170, 0));
   background: -ms-linear-gradient(white 5px, rgb(233, 207, 29), rgb(200, 170, 0));
   background: -moz-linear-gradient(white 5px, rgb(233, 207, 29), rgb(200, 170, 0));
   background: -webkit-linear-gradient(white 5px, rgb(233, 207, 29), rgb(200, 170, 0));
   background: linear-gradient(white 5px, rgb(233, 207, 29), rgb(200, 170, 0));

   border: 2px solid rgb(200, 170, 0);
   border: 2px solid rgba(200, 170, 0, 0.7);
}

#peek {
   margin-right: 15px;
}

#solve {
   margin-left: 15px;
}

section > figure {
   clear: left;
   margin: 10px auto;
   width: 95%;
   text-align: center;
}


/* Aside Styles */

aside {
   -webkit-flex: 1 1 260px;
   flex: 1 1 260px;
}

aside h1 {
   color: rgb(33, 88, 132);
   font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
   font-weight: normal;
   font-size: 1.5em;
   letter-spacing: 0.03em;
   line-height: 1.2em;
   margin-bottom: 10px;
   text-align: center;
}

aside p {
   width: 80%;
   margin: 0px auto 10px;
}

aside strong {
   font-weight: bold;
}

aside span {
   color: rgb(36, 148, 0);
}

article code {
   background-color: rgb(191, 191, 191);
}

article span {
   font-weight: bold;
}

article a {
   color: rgb(36, 148, 0);
   text-decoration: underline;
} 

/* Article Styles */

article {
   margin: 20px auto;
   width: 90%;
   border-top: 1px solid black;
}

article h1 {
   color: rgb(33, 88, 132);
   font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
   font-weight: normal;
   font-size: 1.5em;
   letter-spacing: 0.03em;
   line-height: 1.2em;
   margin-bottom: 20px;
   text-align: center;
   
}

article p {
   width: 80%;
   margin: 0px auto 10px;
}



/* Footer styles */   

footer {
   clear: both;
   color: white;    
   background: linear-gradient(to bottom, rgb(165, 143, 23),  rgb(71, 71, 71));
   font-size: 0.9em;  
   font-style: normal;
   width: 100%;
}

footer nav ul {
   float: left;
   padding: 30px;
   width: 25%;
}

footer nav ul a {
   color: white;
}

footer nav ul a:hover {
   text-decoration: underline;
}

footer::after {
   display: table;
   content: "";
   clear: both;
}