#container
{
width: 90%;                               /* document is 90% width of browser window                              */
border: 1px solid black;                  /* document has razor-thin solid black border                           */
}

header
{
padding: 1em;                             /* start any element 1 character in from adjacent elements              */                         
background-color: gainsboro;              /* background color is light gray                                       */
border-bottom: 1px solid black;           /* top & side border taken care of by container, but need bottom border */
}
header h1 { margin: 0; padding: 0;}       /* tight box around header text                                         */

/*-----------------------------------------*/
/*---------- Media Queries ----------------*/
/*-----------------------------------------*/

/* high resolution... desktops and iphone5 */
@media screen and (min-device-width : 961px)
{
   #resolution:after {content: "High Resolution"; }           /* Uses pseduo-element selector after YOU MUST USE :after for this to work. */
                                                              /* #resolution ids a span with no content... so we're basically saying put  */
                                                              /* this string "High Resolution" after the span with no content             */
   
   nav
   {
    	float: left;                                          /* float to the left of the next element to appear after this in DOM        */
    	padding: 1em;
   }
   nav ul {margin: 0; padding: 0; list-style-type: none;}      /* list items are navigation links, don't bullet them                      */
   nav a  {font-weight: bold; text-decoration: none;}          /* bold hypertext with no underline                                        */
}

/* handhelds up to iPhone4 */
@media screen and (max-device-width : 960px)
{
   #resolution:after {content: "Low Resolution"; }            /* see comments above                                                       */
   
   nav
   {
    	padding: 1em;                                         /* deleted left float here so that nav options above content for lowres     */
   }
   nav ul {margin: 0; padding: 0; list-style-type: none;}     /* list items are navigation links, don't bullet them                       */
   nav a  {font-weight: bold; text-decoration: none;}         /* bold hypertext with no underline                                         */
}

/* printer (no need for navigation) */
@media print
{
   #resolution:after {content: "Print Resolution"; }
   
   nav
   {
   		display: none;                                        /* don't display nav options when printing                                  */
   }   
}

article
{
	float: left;
	border-left: 1px solid gray;
	padding: 1em;
	max-width: 36em;                     /* limit text width (or left float w/ nav element won't work)           */
}
article h2 {margin: 0;}                  /* keep "title" tag tight to top of content element                      */

footer
{
	clear: both;                         /* stop floating
	font-family: monospace;              /* computery font                                                        */
	background-color: gainsboro;         /* background color is light gray                                        */
	border-top: 1px solid black;         /* top, left, right side borders already, we need a top border           */
}

#email a  {text-decoration: none;}       /* email is hypertext with no underline                                  */
.quote {font-style: italic;}             /* quotes appear in italics                                              */