HTML Tutorial 5: Designing for the Mobile Web

@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%; }