@charset "utf-8";
/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 5
   Case Problem 1
   
   Filename: gp_designs.css

   This file design style used by all screen sizes for
   the Golden Pulps sample comic book pages

*/


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


html {
	background-color: rgb(211, 255, 211);
	font-size: 12px;
	font-family: Tahoma, Geneva, sans-serif;
}

body {
	background-color: rgb(242, 221, 174);
	box-shadow: 15px 0px 30px rgb(51, 51, 51),
				-15px 0px 30px rgb(51, 51, 51);	
	margin: 0px auto;				   
	max-width: 1024px;
}
	
body > header {
	background: url("gp_back1.png") center center / cover no-repeat;
	text-align: center;	
	width: 100%;
}

body > header > img {
	display: inline;
	width: 70%;
	max-width: 400px;
	text-align: center;
}


/* Horizontal Navigation Styles */

nav.horizontal {
	height: auto;
	width: 100%;
}

nav.horizontal ul {
	background-color: rgb(212, 175, 55);
	text-align: center;
	width: 100%;	
}


nav.horizontal li {
	font-family: 'Comic Sans MS', cursive; 
	font-size: 1.4em;
	line-height: 2em;
	list-style-type: none;	
	width: 100%;
}

nav.horizontal li a {
	color: black;
	display: block;
	width: 100%;
}

nav.horizontal li a:hover, nav.horizontal li a:active {
	color: white;
	background-color: rgb(51, 51, 51);
}

/* Article Styles */

article {
	padding: 10px;
}
	
article h1 {
	text-align: center;
	font-size: 1.4em;
	letter-spacing: 3px;
}

article p {
	font-size: 1.4em;
	line-height: 1.2;
	margin: 20px 0px;
}


/* Comic Book Sheet Styles */

section#sheet {
	border: 1px solid rgb(101, 101, 101);
	background-color: white;
	padding: 10px 10px 0px 10px;
}	

section#sheet h1 {
	font-size: 1.4em;
	text-align: center;
	letter-spacing: 3px;
	margin: 5px;
}

section#sheet footer {
	text-align: center;
	width: 100%;
	clear: left;
}


/* Navigation Pages Styles */

nav#pages {
	padding-bottom: 10px;
}

nav#pages::after {
	content: "";
	display: table;
	clear: both;
}

nav#pages a {
	background-color: rgb(242, 221, 174);
	border: 1px solid rgb(101, 101, 101);
	box-shadow: rgb(51, 51, 51) 2px 2px 5px;
	display: block;
	float: left;
	margin: 4px;
	padding: 2px;
	text-align: center;
	width: 20px;
}

nav#pages a:first-of-type {
	width: 80px;
}

nav#pages a#current {
	background-color: rgb(51, 51, 51);
	color: white;
}

/* Comic Image Panel Styles */

img.panel {
   float: left;
   display: block;
}


/* Body Footer Styles */

body > footer {
	color: white;
	background-color: rgb(51, 51, 51);
	text-align: center;
	line-height: 2em;
	width: 100%;	
}