/* FOR TESTING */
/*div { border: 1px solid red; }*/



/* GENERAL FORMATTING */


body
{
  color: black;
  background: white;
  font: medium Verdana, sans-serif;
  margin: 0;
  padding: 0;
  min-width: 48em;
}


a:link, a:visited { color: black; } 
a:hover, a:active { color: #4682B4; /* steel blue */ } 


div
{
  background: #D3D3D3;
  width: 42em;
  margin: 2em auto;
  padding: 2em;
  border: 1px solid black;
}


h2 
{
  font-size: large;
  margin: 0;
  padding: 0;
}


h3 
{
  font-size: medium;
  margin: 0;
  padding: 0;
}


h4 
{
  font-size: small;
  margin: 0;
  padding: 0;
}


ul
{
  margin: 1em 2em 2em 2em;
  padding: 0 1em;
}

li
{
  margin: 1em 0;
}


img.doctype
{
  vertical-align: middle;
}



/* HEADER */


#header
{
  background: #B0C4DE;
  padding: 0 0 2em 2em;;
  width: 44em; /* The padding must be 0 on the top and right for the cutout to work, so we have to add width to match the other divs. */
}


#cutout 
{
  float: right; 
  width: 12em; 
  border: 1px solid black;
  margin: -1px -1px 0 0;
  padding: 0;
  text-align: center;
}

#cutout>ul 
{
  list-style-type: none;
  background: black; 
  color: white;
  border: solid white;
  border-width: 0 0 1em 1em; 
  margin: -1px -1px 0 0;
  padding: 0;
}

#cutout>ul li
{
  margin: 0;
  padding: 0.5em 0;
}

#cutout a:link, #cutout a:visited { color: white; } 
#cutout a:hover, #cutout a:active { color: #4682B4; /* steel blue */ } 


#header h1 
{
  font-size: x-large;
  margin: 1em 1em 1em 0; /* We need to compensate for the 0 top & right padding on the header. Note that we use 1em instead of 2 because the font is twice as big. */
  padding: 0;
}


#header>ul
{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#header>ul li
{
  margin: 0;
  padding: 0;
}