/* book.css */

body
{
   color: black;
	background-color: white;
   margin: 0;
	min-width: 500px;
}

/* #breadcrumbs
 *
 * Surrounds the breadcrumb trail found on every page of the help book.
 */

#breadcrumbs
{
   width: 100%;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	font-family: "Lucida Grande", Arial, sans-serif;
	font-size: 9pt;
	margin-bottom: 30px;
	background-color: lightgrey;
   padding: 2px 0px 2px 0px;
}

a
{
   color: #572100;
}

#icon
{
   width: 32px;
   height: 32px;
}

/* #titlePageContent
 *
 * Content container for everything below the breadcrumb trail on the first page the user sees when he opens the help book.
 */

#titlePageContent
{
   width: 500px;
	margin-left: auto;
	margin-right: auto;
	font-family: "Lucida Grande", Arial, sans-serif;
}

#titlePageContent h1
{
	font-size: 18pt;
   color: #572100;
}

#titlePageContent h2
{
	font-size: 11pt;
}

/* #titlePageContent #left
 *
 * Container for the left side of the content on the title page.
 */

#titlePageContent #left
{
   width: 250px;
	text-align: center;
   position: relative;
   float: left;
	border-right: 1px solid #808080;
}

#titlePageContent #left a
{
   color: blue;
	font-size: 8pt;
	text-decoration: none;
}

#titlePageContent #left #screenshot
{
   width: 200px;
   height: 150px;
	margin-left: 25px;
	margin-right: 25px;
}

/* #titlePageContent #right
 *
 * Container for the right side of the content on the title page.
 */

#titlePageContent #right
{
   width: 250px;
	margin-right: -250px;
	margin-top: 20px;
	padding-left: 30px;
   position: relative;
   float: left;
}

#titlePageContent #right h2
{
	margin-bottom: 20px;
}

/* #articleContent
 *
 * Container for everything below the breadcrumb trail on pages containing actual articles.
 */

#articleContent
{
	font-family: "Lucida Grande", Arial, sans-serif;
	padding-left: 20px;
	padding-right: 20px;
 width: 800px;
	margin-left: auto;
	margin-right: auto;
}

#articleContent h1
{
	font-size: 16pt;
   color: #572100;
}

#articleContent h2
{
	font-size: 12pt;
   color: #572100;
}

#articleContent p
{
	font-size: 10pt;
}

#articleContent blockquote
{
	font-size: 10pt;
 border: 2px lightgrey dotted;
 padding: 5px;
	text-align: center;
}

#articleContent ul
{
	font-size: 10pt;
}

#articleContent td
{
   border: 2px solid lightgrey;
}

#articleContent table
{
   border: 2px solid lightgrey;
	border-collapse: collapse;
	margin-bottom: 10px;
}

#articleContent th
{
	font-size: 10pt;
	background-color: lightgrey;
   color: white;
}

#articleContent td
{
	font-size: 10pt;
}

/* #articleContent .deeperInformation
 *
 * Container for individual blocks of information that can be considered a little more advanced than the core lesson
 * in the article.
 */

#articleContent .deeperInformation
{
	font-size: 10pt;
   padding: 4px 4px 4px 4px;
	margin-top: 8pt;
	margin-bottom: 10px;
   border-top: 16pt solid #572100;
	border-right: 1pt dotted #572100;
	border-bottom: 1pt dotted #572100;
	border-left: 1pt dotted #572100;
}

#articleContent .deeperInformation h2
{
   color: white;
	margin-top: -17pt;
	font-size: 10pt;
}

#articleContent .deeperInformation em
{
	font-weight: bold;
}

/* #indexContent
 *
 * Container for everything below the breadcrumb trail on index pages, which link to articles or other index pages.
 */

#indexContent
{
	font-family: "Lucida Grande", Arial, sans-serif;
	padding-left: 20px;
	padding-right: 20px;
 width: 800px;
	margin-left: auto;
	margin-right: auto;
}

#indexContent h1
{
	font-size: 16pt;
   color: #572100;
}

#indexContent h2
{
	font-size: 16pt;
   color: #572100;
}

#indexContent a
{
	font-weight: bold;
}

#indexContent p
{
	font-size: 10pt;
}

#indexContent ul
{
	border-left: 2px lightgrey solid;
	list-style-type: none;
	padding-left: 20px;
	padding-top: 5px;
	padding-bottom: 5px;	
}

.screenshot
{
   width: 600px;
	margin-left: 100px;
	margin-right: 100px;
}