Intermediate CSS3 and HTML5 Lesson 7

07tm2stylesheet.css

/* styles.css */
/* Downloadable Font from FontSquirrel */
@font-face {
   font-family: 'Calligraffiti';
   src: url('Calligraffiti-webfont.eot');
   src: url('Calligraffiti-webfont.eot?#iefix') format('embedded-opentype'), 
   url('Calligraffiti-webfont.woff') format('woff'), 
   url('Calligraffiti-webfont.ttf') format('truetype'), 
   url('Calligraffiti-webfont.svg#CalligraffitiRegular') format('svg');
   font-weight: normal;
   font-style: normal;
}
body {
   background-image: url(pix2/hubblesmall.png), url(pix2/stars.png);
   background-repeat: no-repeat;
   background-position: center;
   background-attachment: fixed;
   background-size: contain, cover;
   background-color: black;
}
/* Fixed-position sized to edges of viewport */
#wrapper {
   position: fixed;
   top: 10%;
   left: 10%;
   right: 10%;
   bottom: 10%; /* White for older browser, rgba for newer */
   background: white;
   background: rgba(255,255,255,.6);
   border-radius: 10px;
}
/* Make HTML5 layout elements block elements for older browsers */
header, nav, aside, article, footer, section {
   display: block;
}
/* Style that applies to both header and footer */
header, footer {
   position: absolute;
   height: 15%;
   width: 100%;
   padding: 1%;
}
header {
   top: 0;
   left: 0;
   border-radius: 10px 10px 0 0;
}
footer {
   bottom: 0;
   left: 0;
   border-radius: 0 0 10px 10px;
}
/* This nav section is on the side, positioned absolutely */
nav {
   position: absolute;
   top: 15%;
   left: 0;
   bottom: 15%;
   width: 15%;
   padding: 1%;
}
/* Style for <a> tags in the nav section */
nav a {
   font-family: 'Calligraffiti';
   font-weight: bold;
   background: url(pix2/navback.png) center repeat-x, url(pix2/navhover.png) center repeat-x;
   color: White;
   text-decoration: none;
   outline: none;
   padding: 10px 0;
   display: block;
   border-right: solid 1px silver;
   border-radius: 5px;
   width: 85%;
   text-align: center;
   box-sizing: border-box; /* Box sizing for older browsers */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}
/* Unvisited and visited link styling */
nav a:link, nav a:visited {
   background: url(pix2/navback.png); /* Make background image height equal to button height */
   background-size: auto 100%;
}
/* Styling for hover and tap */
nav a:hover, nav a:active, nav a.currentpage {
   background: url(pix2/navhover.png);
   color: black;
   background-size: auto 100%;
}
/* Main article sized to fit inside header, footer nav */
article {
   position: absolute;
   top: 15%;
   left: 15%;
   right: 0;
   bottom: 15%;
   padding: 10px;
   overflow: auto;
   background: rgba(255,255,255,.6);
}
/* Level-1 Headings */
h1 {
   font: 36pt/36pt Calligraffiti, Fantasy;
   text-shadow: -3px -3px #777;
   margin: 8px 0 0 0;
}