@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 5
   Case Problem 2
   
   Filename: cw_designs.css

   This file design style used by all screen sizes for
   the Cauli Wood Gallery home page.

*/


/* =============================================
	Base styles used by All Screens
   =============================================
*/


/* HTML and Body Styles */

html {
   background: rgb(246, 177, 177);
   font-family: Verdana, Geneva, sans-serif;
   font-size: 12px;
}

body {
   background: white;
   max-width: 1024px;
   margin: 0px auto;
   box-shadow: rgb(51, 51, 51) 10px 10px 25px,  rgb(51, 51, 51) -10px 10px 25px;
}

body > header {
   background: white;
   width: 100%;
}

img#logoImage {
   display: block;
   width: 100%;
   max-width: 600px;
   margin: 0px auto;
}

p {
   font-size: 1.2em;
   line-height: 1.4em;
   margin: 15px;
}

nav#top ul li {
   margin: 10px;
}

nav#top ul li a {
   color: white;
   display: block;
   font-size: 1.2em;
   text-align: center;
   padding: 50% 0%;
}

nav#top ul li a:hover, nav#top ul li a:active {
   color: rgb(255, 0, 0);
   text-shadow: 0px 0px 2px black, 0px 0px 15px white;
}

article p:nth-of-type(2) img {
   float: right;
   width: 45%;
   margin: 0px 0px 120px 50px;
   transform: translateY(60px) translateX(-0px) rotate(30deg);
   box-shadow: rgba(70,36,37,1.00) 10px -10px 30px;
}

section#spotlight {
   background-color: rgb(171, 171, 171);
   padding-bottom: 15px;
}

section#spotlight h1 {
   font-size: 2.5em;
   color: rgb(111, 111, 111);
   text-shadow: white -2px 0px 1px,  white -5px 0px 30px;
   padding: 20px 15px 10px 0px;
   text-align: right
}

section#spotlight img {
   width: 35%;
   float: left;
   display: block;
   margin: 20px 20px 10px 15px;
}

section#spotlight p {
   margin-bottom: 0px;
}

section#spotlight::after {
   content: "";
   display: table;
   clear: both;
}

/* Aside  Styles */

aside {
   background-color: rgb(211, 211, 211);
}

aside h1 {
   font-size: 2em;
   font-weight: normal;
   letter-spacing: 0.4em;
   text-align: center;
   margin: 20px 0px 25px;
}

aside a {
   color: rgb(234, 44, 44);
}

/* Description List */

dl {
   text-align: center;
}

aside img {
   display: block;
   width: 30%;
   margin: 5px auto;
}

dl dd {
   margin-bottom: 20px;
}

footer {
   width: 100%;
}

nav#bottom {
   background-color: rgb(220, 27, 27);
   color: rgb(211, 211, 211);
   padding: 15px;
}

nav#bottom ul li {
   font-size: 1em;
   line-height: 1.8em;
}

nav#bottom ul a {
   color: white;
}

footer p {
   color: rgb(211, 211, 211);
   font-size: 0.9em;
   text-align: center;
   background-color: black;
   margin: 0px;
   padding: 10px 0px;
}