/******************************************************
/
/
/					Default Styles for Living Rock web pages
/
/					Updated December 3rd, 2007
/
/
/
/******************************************************/

body{
	font: medium/normal Arial, Helvetica, sans-serif;
	color: #333333;
	margin: 0px;
	padding: 0px;
	background: #DDDDDD url("/images/marbletex.jpg") fixed;
}

/******* hyperlink and anchor tag styles *******/

a {
	color: #005FA9;
	font: bold small Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}


/************** header tag styles **************/

h1{
 font: bold 120% Arial,sans-serif;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

h2{
 font: bold 114% Arial,sans-serif;
 color: #006699;
 margin: 4px;
 padding: 4px;
}

h3{
 font: bold 100% Arial,sans-serif;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

h4{
 font: 100% Arial,sans-serif;
 color: #333333;
 margin: 0px;
 padding: 0px;
}

h5{
 font: 100% Arial,sans-serif;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

/*************** list tag styles ***************/

ul{
 list-style-type: square;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

/************ paragraph related things ********/
p {
	margin-right: 10px;
	white-space: normal;
}

/************* table stuff **********************/

table {
	border:none 0 hidden;	
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px;
	padding: 0px;
}

/********* form and related tag styles *********/

form {
	margin: 0;
	padding: 0;
}

label{
 font: bold 1em Arial,sans-serif;
 color: #334d55;
}
				
input{
	font: medium Arial, Helvetica, sans-serif;
}

/******************************************************
*
* 				All stuff related to the top menu bar
*
*******************************************************/

/* All top menu bar stuff will happen within a table of class topmenubar */
table.topmenubar, .topmenubar table {
	border: 0;
	border-collapse: collapse;
}

/* All anchor attributes (well, pseudoclasses) contained within a topmenubar class table */
.topmenubar a {
	color:#000000;
	display: block;
	font: bold small Verdana, Helvetica, sans-serif;
	text-decoration:none;
	white-space: nowrap;
}

.topmenubar a:visited {
	color:#111111;
}

.topmenubar a:hover {
	color:#5500FF;
	text-decoration:underline;
}

/* Using TD elements to be "button-like" */
.topmenubar td{
	border-left: thin solid #ccc;
	background-image:url(/images/glbnav_background.gif);
	padding: 0em 1em;
}

.topmenubar td:hover{
	background-image:url(/images/glblnav_selected.gif);
}

/*******************************************************************************************************************************
 *																																																														 *
 *  This is the sidebar class.  After awhile I figured that a sidebar will be contained [and declared] in a table container... *
 *  																																																													 *
 *  There is an elaborate couple of lines to get around the [unfortunate] necessity of including the cellpadding/cellspacing   *
 *  attributes in the table tag.  The solution is somewhat convoluted so I only included it here for reference and we should   *
 *  rely on this method for other table members until the border-spacing attribute is properly supported in IE at the minimum. *
 *																																																														 *
 *******************************************************************************************************************************/
table.sidebar, .sidebar table {
	border-collapse: separate;
	*border-collapse: collapse; /* IE7 workaround for cellspacing (border-spacing is not recognized!!!) must go with position: relative in the td tag */
	border-spacing: 0; 					/* Not supported in IE (must resort to position: relative in td tag)*/
	margin: 0;
	padding: 0;
}

/* all td elements *inside* a sidebar table to give a "button look and feel"... */
.sidebar td {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #ccc;
	position: relative;
	padding: 0;
	margin: 0;
}

/* The hover event affecting the sidebar "button" */
.sidebar td:hover {
	border-top: 1px solid #33F;
	border-bottom: 1px solid #33F;
}

/* all links (visited or not) inside the sidebar -> contained inside of a td element*/
.sidebar a, .sidebar a:visited {
	display: block; /* This line means *alot*!!! lol :P */
	background-image:  url("/images/bg_nav.jpg");
	font: normal normal bold x-small Verdana, Arial, Helvetica, sans-serif;
	color: #21536A;
	padding: .5em 1em;
	white-space: nowrap;
}

/* The hover event for the sidebar anchor [the text in the button] */
.sidebar a:hover {
	background-color: #ccf;
	background-image: none;
	font-weight: bold;
	text-decoration: none;
}

/************************************************************************************************
*
*		To define a class... you are supposed to be able to define it either 
*		.newclass nameofelement {...} or nameofelement.newclass {...} such as menu a {} or a.menu {}
*
*		Ideally, it would be good to define a class and all the elements under it 
*   [like menu.a {...} menu.td {...} menu.whatever {etc}... ]
*
*		However, it seems difficult to "override" one class inside another this way :)
*
*		So if I have a menu but I want to override it with a special menucorner subclass 
*		[to take away the borders and padding in the corner, for instance] 
*		I CANNOT have .menu td {...} and then .menucorner td {...} because the menucorner will not
*		render properly.
*
*		To do this, it is necessary to write the CSS as td.menucorner {...} so that it will be recognized!
*
*		I have no idea why, but it applies to both IE and Firefox so I guess I'm stuck!!!
*
*		I can define a first level of .menu stuff but am having to override with either long style tags
*		[which is a good way to override an individual attribute] or through this "secondary" method
*		[a.menuleft, td.menuleft, etc] which seems a lot less "coherent"...
*
*		*sigh*... end of rant!!!			LOL :P
*
*************************************************************************************************/

/**************************************************************
*
*
*			Picture Frame Stuff???
*
*
***************************************************************/
.pictureFrame {
	border-color:#C5C5C5;
	border-style:outset;
	border-width:thick;
	border-spacing: 10px;
	margin: 10px;
	padding: 10px;
}

/*************************************************************
 *
 *	A caption series of classes for pictures in articles
 *
 *************************************************************/
.picturecaption p, p.picturecaption {
	font: smaller Verdana, Arial, Helvetica, sans-serif; 	
 }
 
/***************************************************************
*
*
*		All things related to quotes
*
*
****************************************************************/

.quote {
	padding: 10px;
	margin-right: 10px;
}

/**************************************************************
*
*
*		Carry-overs from Kevin [the original website designer]
*
*
***************************************************************/

/************** siteInfo styles ****************/

#siteInfo{
	clear: both;
	border-top: 1px solid #cccccc;
	font-size: x-small;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000000;
	padding: 10px;
	margin-top: 0px;
	text-align: center;
}

#siteInfo img{
	padding: 4px 4px 4px 0px;
	vertical-align: middle;
}

/************* story styles  *******************/

.padallmargins p {
	padding: 10px;
	margin: 10px;
}

.padallmargins h1 {
	padding: 20px;
	text-align: center;
}

.story {
	padding: 1em;
	font-size: 80%;
}

.story h3{
	font: bold 125% Arial,sans-serif;
	color: #334D55;
}

.story h5 {
	padding: 10px;
	margin: 10px;
}

.story p {
	padding: 0px 0px 10px 0px;
	white-space:normal;
}

.story a.capsule{
	font: bold 1em Arial,sans-serif;
	color: #005FA9;
	display:block;
	padding-bottom: 5px;
}

.story a.capsule:hover{ 
	text-decoration: underline;
}

td.storyLeft{
	padding-right: 12px;
}