/* screen.css: Screen Styles */

/* Styles from the example in Figure 16.9 */
div#content p {
  text-indent: 40px;
}

/*
  NOTE: CSS background images will disappear when CSS > Edit CSS is activated in the 
  Web Developer Add-on; add css/ in front of gfx/ to see it with the Add-on, e.g.,
  background-image: url('css/gfx/header-titled-background.png);
*/


/* Hide Navigation for the purpose of making the Style Guide */
ul#navigation { display: none; }

/* Styles from elsewhere in Chapter 16 */
body {
  font-family: Arial, sans-serif;
}
div#content {
  line-height: 1.6;
}
div#supporting {
  background-color: #333;
  color: #EEE;
  padding: 10px;
  line-height: 1.2;
}
code {
  background-color: #DDD;
  color: #333; /*Add color to `code` so it shows up in `div#supporting`*/
}

/* Styles from Chapter 14 */
div#footer {
  font-family: "Times New Roman", Times, Roman, serif;
  background: black url('gfx/footer-background.png') repeat-x; /*Using background: shorthand*/
  padding: 20px 10px 10px 10px; /*Using padding: shorthand Top Right Bottom Left (TRBL)*/
  color: white;
}
div#footer img {
  display: block;
  padding: 10px 0px 10px 0px;
}
div#footer p.credits { font-style: italic; }
div#footer ul.validators li { display: inline; }

div#header {
  font-family: "Times New Roman", Times, Roman, serif;
  height: 85px;
  background-image: url('gfx/header-tiled-background.png');
  background-position: bottom left;
  background-color: black;
  color: white;
}
div#header h1 a {
  display: block;
  background-image: url('gfx/header-h1-a-background.png');
  height: 75px;
  width: 200px;
  text-indent: -10000px;
  position: absolute; /*Remove from document flow*/
}
div#header p.tagline {
  font-style: italic;
  padding-left: 10px;
  padding-top: 35px; /*Push down from top; div#header h1 a is positioned absolutely, so p.tagline
                       jumps to the very top of div#header.*/
  margin-left: 225px; /*Establish the look of a second column.*/
  color: white;
}

/* Page layout styles covered in Chapter 17 */
div#page {
  width: 700px;
  margin: 0px auto;
}




/* Base Styles */

/* Bold on headings, b, and strong */
h1,h2,h3,h4,h5,h6,b,strong { font-weight: bold; }
/* Italic on i, em, and cite: */
i,em,cite { font-style: italic; }
/* Dotted border and help cursor to abbr and acronym: */
abbr,acronym { border-bottom: 1px dotted; cursor: help; }

/* Body */

body {
}

/* Major Divisions */

/* Page (Containing Div) */
div#page {
}

/* Header */
div#header {
}
div#header h1 {
}
div#header h1 a {
}
div#header p.tagline {
}
div#header ul.accessibility {
  position: absolute; /*Remove from document flow and prepare for positioning*/
  left: -10000px; /*Move way off to left; browser will not create a horizontal scroll bar*/
}

/* Content */
div#content {
}

div#main {
}

div#supporting {
}

/* Footer */
div#footer {
}
div#footer p.credits {
}
div#footer ul.validators {
}
div#footer ul.validators li {
}

/*Navigation*/
ul#navigation {
}

ul#navigation li {
}

ul#navigation li a {
}

ul#navigation li a:visited {
}

ul#navigation li a:hover,
ul#navigation li a:focus {
}


/*Content Typography: Headings*/
div#content h2 {
}
div#content h3 {
}
div#content h4 {
}
div#content h5 {
}
div#content h6 {
}

/*Content Typography: Paragraphs*/
div#content p {
}

/*Content Typography: Unordered Lists*/
div#content ul {
}
div#content ul li {
}
/*Nested*/
div#content * li ul {
}
div#content * li ul li {
}

/*Content Typography: Ordered Lists*/
div#content ol {
}
div#content ol li {
}
/*Nested*/
div#content * li ol {
}
div#content * li ol li {
}

/*Content Typography: Links*/
div#content a {
}
div#content a:visited {
}
div#content a:hover,
div#content a:focus {
}

/*

CSS FOR THIS EXAMPLE IS AT THE TOP OF THIS FILE. SCROLL ALL THE WAY UP!

*/