/* Main */
body {
	background: #6699CC; 
	color: black;
	font-family: Verdana;
	font-size: 10pt;
	text-align: center;
}
p {
	clear: left;
	margin-top: 0;
	margin-bottom: 16px;
}
h2 {
	clear: both;
	font-size: 20pt;
	font-weight: bold;
	color: black;
	text-align: center;
  	margin-top: 0px;
  	margin-bottom: .2em;
}
span.bold {
	font-size: 9pt;
	font-weight: bold;
}
span.italics {
	font-size: 9pt;
	font-style: italic;
}
a:link, a:visited, a:active {
	color: #FF0000;
	text-decoration: none;
}
a:hover {
/*	color: #B22222; */
	color: #FF0000;
	text-decoration: underline;
}

/* Main body */
div#main {
	background: #E0FFFF;
	background-repeat: no-repeat;
	background-position: 100% 0%;
	clear: both;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid black;
	padding: 2px;
	text-align: center;
	width: 760px;
}
div#footer {
	background: #000000;
	background-position: 100% 0%;
	border: 1px solid black;
	clear: both;
	color: white;
	font-family: Arial;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 2px;
	padding: 2px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 760px;
}
div#contents {
	border: 1px solid black;
	background: #FFFFFF; 
	clear: all;
	margin-left: auto;
	margin-right: auto;
	padding: 15px 25px 15px 25px;
	text-align: center;
}
div.justify {
	margin-top: 10px;
	text-align: justify;
}
div#bottom {
	background: #FFFFFF; 
	border: 1px solid black;
	clear: all;
	padding: 15px;
	text-align: justify;
}
div#news {
	float: left;
	background: #E0FFFF;
	border: 1px solid #000000;
	width: 200;
	text-align: left;
	padding: 15px;
	margin-bottom: 16px;
	margin-right: 16px;
	margin-top: 10px;
}

img#map {
	border: 1px solid #000000;
	height: 421px;
	width: 547px;
}
div#disclaimer {
	font-size: 9px;
	font-style: italic;
	margin: 5px 0px 0px 0px;
}

/* The goal was to have an outer container setting the background color
and containing 10 rows of div pairs, one for the stone identifier ("number")
and one for the description of the stone.  To force each div in a pair
to align next to each other, I must use float: left.  If I do that, 
there are only two ways to force the outer container to properly surround
all of the div pairs:
1) float the outer container left.  This has 3 bad effects: it destroys
the centering of the outer container by floating it all the way to the 
left, it stops the container from expanding to its full width, and it
screws up the height of the outer container.
2) insert a <p> into the outer container and do not float the container
at all.  The <p> surrounds the div pairs and forces the outer container 
to expand to its proper height while still preserving its full expansion
width.  Sadly, the <p> brings with it a mandatory top margin of 16px, so
I have to add 16px to the other margins to properly center the content. */

div.side {
	background: #E0FFFF;
	border: 1px solid #000000;
	clear: all;
	margin: 0px 0px 16px 0px; 
	padding: 0px 0px 0px 16px;
}
div.number {
	clear: left;
	float: left;
	font-weight: bold;
	padding: 5px 2px 5px 0px;
	text-align: left;
	width: 65px;
}
div.description {
	float: left;
	padding: 5px 2px 5px 0px;
	text-align: justify;
	width: 590px;
}
/* I can't explain this, but in IE, I have to have a border and some padding of
2px or more in sources for IE to recognize the bottom margin of 16px in <p>.  
Sadly, that screws up some Firefox browsers, so I'll just force a bottom
margin, which displays nicely in Firefox but ends up as double in IE. */
div.sources {
	border: 1px solid #FFFFFF;
	clear: all;
	margin-bottom: 16px;
	text-align: left;
}
div.arrow {
	clear: left;
	float: left;
	width: 5px;
	padding: 3px 8px 0px 8px;
}
div.source {
	float: left;
	font-size: 11px;
	width: 675px;
}
span.pub {
	text-decoration: underline;
	font-weight: bold;
}

/* view.php and read.php */
div#view_main {
	background: #E0FFFF;
	background-repeat: no-repeat;
	background-position: 100% 0%;
	border: 1px solid black;
	clear: all;
	margin-left: auto;
	margin-right: auto;
	padding: 2px;
	text-align: center;
	width: 550px;
}
div#view_contents {
	border: 1px solid black;
	background: #FFFFFF; 
	clear: all;
	margin-left: auto;
	margin-right: auto;
	padding: 5px 5px 5px 5px;
	text-align: center;
}
table#view_nav {
	border: 0px;
	width: 544px;
}
img.stone {
	border: 1px solid #000000;
	margin: 15px 15px 0px 15px;
	text-align: center;
}
div.view_footer {
	background: #000000;
	background-position: 100% 0%;
	border: 1px solid #000000;
	clear: left;
	color: white;
	font-family: Arial;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 2px;
	padding: 2px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 550px;
}

/* page.php */ 
div#page_main {
	background: #E0FFFF;
	background-repeat: no-repeat;
	background-position: 100% 0%;
	border: 1px solid black;
	clear: all;
	margin-left: auto;
	margin-right: auto;
	padding: 2px;
	text-align: center;
	width: 600px;
}
div#page_contents {
	border: 1px solid black;
	background: #FFFFFF; 
	clear: all;
	margin-left: auto;
	margin-right: auto;
	padding: 5px 5px 5px 5px;
	text-align: center;
}
table#page_nav {
	border: 0px;
	width: 594px;
}
div.title {
	font-weight: bold;
	padding: 10px 15px 10px 15px;
	text-align: justify;
}
div.text {
	padding: 15px;
	text-align: justify;
}
hr.title {
	border: 0x;
	color: #000000;
	background-color: #000000;
	height: 3px;
	width: 85%;
}
div.page_footer {
	background: #000000;
	background-position: 100% 0%;
	border: 1px solid #000000;
	clear: left;
	color: white;
	font-family: Arial;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 2px;
	padding: 2px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 600px;
}