/****************************************************************************
 *
 * File name: 	basestylesheet.css
 * Description:	Base style sheet for DumbSoutherner.com
 * Author:	Fred D. Bean
 * Last update:	30-Dec-2003
 *
 ****************************************************************************/



	/* General text and background appearance */

body
{
  background-color: 	#ffffff;
  color: 		#000000;

  padding:		0;
  margin:		0;
  border:		none;


  /* Allow the user's browser settings to dictate font size, so vision 
     impaired folks can read the text. However, since the default font size
     for most browsers is so funkily large, we'll size it down a bit... */
  font-size:		.75em;
  font-family: 		Arial, Helvetica, sans-serif;


  /* Watermark the page... */
  background-image:	url(http://dumbsoutherner.com/common/background.gif);
  background-repeat:	no-repeat;
  background-attachment:fixed;
  background-position:	99% 99%;
}


/* Generic spacing for all paragraphs... */
p 
{
  margin-top:		0em;
  margin-bottom:	.75em;
}


/* Get rid of those ugly borders around images used as links... */
a:link img
{ 
  border:		0px;
}
a:visited img
{
  border:		0px;
}





		/* General page layout */

/* The fixed-width box into which the entire page will be rendered... */
#palette
{
  width:		600px;

  background-color: 	inherit;
  color: 		#000000;

  margin-left:		auto;
  margin-right:		auto;
  margin-top:		15px;
  margin-bottom:	15px;

  padding-left:		0px;
  padding-right:	0px;
  padding-top:		0px;
  padding-bottom:	15px;


  border-top-style:	none;
  border-top-color:	#ffffff;
  border-top-width:	0px;

  border-right-style:	none;
  border-right-color:	#ffffff;
  border-right-width:	0px;

  border-bottom-style:	none;
  border-bottom-color:	#ffffff;
  border-bottom-width:	0px;

  border-left-style:	none;
  border-left-color:	#ffffff;
  border-left-width:	0px;
}


/* The box into which the masthead will be rendered...*/
#masthead
{
  /* For now, no special positioning or formatting. */
}


/* The box into which stories will be rendered... */
#leftColumn
{
  clear:		left;
  float:		left;
  width:		445px;

  background-color: 	inherit;
  color: 		#000000;


  border-top-style:	none;
  border-top-color:	#ffffff;
  border-top-width:	0px;

  border-right-style:	dashed;
  border-right-color:	#cccccc;
  border-right-width:	1px;

  border-bottom-style:	none;
  border-bottom-color:	#ffffff;
  border-bottom-width:	0px;

  border-left-style:	none;
  border-left-color:	#ffffff;
  border-left-width:	0px;

  padding-top:		0px;
  padding-bottom:	12px;
  padding-left:		0px;
  padding-right:	12px;

  margin-top: 		0px;
  margin-bottom:	0px;
  margin-left: 		0px;
  margin-right:		0px;
}


/* The box into which the navigation links and other assorted junk will be 
rendered... */
#rightColumn
{
  float:		left;
  width:		130px;

  background-color: 	inherit;
  color:		#000000;

  border-top-style:	none;
  border-top-color:	#ffffff;
  border-top-width:	0px;

  border-right-style:	none;
  border-right-color:	#ffffff;
  border-right-width:	0px;

  border-bottom-style:	none;
  border-bottom-color:	#ffffff;
  border-bottom-width:	0px;

  border-left-style:	none;
  border-left-color:	#ffffff;
  border-left-width:	0px;

  padding-left:		12px;
}


/* The box into whick navigation links will be rendered... */
.navigationLinks
{
  background-color:	#ccccff;
  color:		inherit;

  padding:		4px;
  margin:		4px;
}


/* The box into which random thoughts will be rendered... */
.randomThought
{
  background-color:	inherit;
  color:		inherit;

  font-size:		.80em;

  border-style:		solid;
  border-width:		1px;
  border-color:		#cccccc;

  padding:		4px;

  margin-top: 		64px;
  margin-bottom:	2px;
  margin-left: 		2px;
  margin-right:		2px;
}


/* The box into which code listings will be rendered... */
.codeListing
{
  display:		block;
  white-space:		pre;
/*
  overflow:		scroll;
  height:		300px;
*/

  overflow:		scroll;
  padding:		8px;
  margin-bottom:	1em;

  width:		95%;
  margin-left:		auto;
  margin-right:		auto;

  border-style:		solid;
  border-width:		1px;

  font-family:		"Courier New", Courier, monospace;
  font-size:		8pt;
}


/* The boxes into which next/previous story links will be rendered... */
.previousStory
{
  clear: 		both;
  float:		left;

  background-color:	#ccccff;
  color:		inherit;

  border:		none;

  font-size:		90%;

  padding:		.5em;
  margin-bottom: 	4px;
}

.nextStory
{
  float:		right;

  background-color:	#ccccff;
  color:		inherit;

  border:		none;

  font-size:		90%;

  padding:		.5em;
  margin-bottom: 	4px;
}

/* The box into which continue/back story continuation links will be 
rendered... */
.continueBackTagLine
{
  clear: 		both;
  text-align:		center;
  display: 		block;
}

.continueBackTagLine img
{
  display: 		inline;
  margin-left:		1em;
  margin-right:		1em;
}


/* Boxes for photos and their captions. Some care must be exercised in
  using these boxes. Be sure that the photos embedded in these DIV's are
  not wider then the name of the class implies. For example, photos in
  the 'photoLeft100' must *not* be wider than 100 pixels. */
.photoLeft100
{
  float:		left;
  width:		100px;
  padding:		.75em;
  border-style:		none;

  text-align:		center;
  font-style:		italic;
}

.photoLeft100 img
{
  display:		inline;
}

.photoLeft200
{
  float:		left;
  width:		200px;
  padding:		.75em;
  border-style:		none;

  text-align:		center;
  font-style:		italic;
}

.photoLeft200 img
{
  display:		inline;
}

.photoLeft300
{
  float:		left;
  width:		300px;
  padding:		.75em;
  border-style:		none;

  text-align:		center;
  font-style:		italic;
}

.photoLeft300 img
{
  display:		inline;
}

.photoRight100
{
  float:		right;
  width:		100px;
  padding:		.75em;
  border-style:		none;

  text-align:		center;
  font-style:		italic;
}

.photoRight100 img
{
  display:		inline;
}

.photoRight200
{
  float:		right;
  width:		200px;
  padding:		.75em;
  border-style:		none;

  text-align:		center;
  font-style:		italic;
}

.photoRight200 img
{
  display:		inline;
}

.photoRight300
{
  float:		right;
  width:		300px;
  padding:		.75em;
  border-style:		none;

  text-align:		center;
  font-style:		italic;
}

.photoRight300 img
{
  display:		inline;
}

.photoCenter
{
  padding:		.75em;
  border-style:		none;

  text-align:		center;
  font-style:		italic;
}

.photoCenter img
{
  display:		inline;
}


/* The box into which the page footer will be rendered... */
#footer
{
  clear:		both;

  border-top-style:	dashed;
  border-top-color:	#cccccc;
  border-top-width:	1px;

  border-right-style:	none;
  border-right-color:	#ffffff;
  border-right-width:	0px;

  border-bottom-style:	none;
  border-bottom-color:	#ffffff;
  border-bottom-width:	0px;

  border-left-style:	none;
  border-left-color:	#ffffff;
  border-left-width:	0px;

  padding-top:		12px;

  font-size:		.75em;
  text-align:		center;
}

#footer p 
{ 
  margin-top:		.5em;
  margin-bottom:	0em;
} 

#footer img
{
  display: 		inline;
  padding-left:		20px;
  padding-right:	20px;
}



		/* Text formatting */

.storyTitle
{
  color:		#000066;
  background-color: 	inherit;

  font-size:		1.5em;
  font-weight:		bold;

  margin-bottom:	.75em;
}

.storyDate
{
  font-size:		.75em;
}

.centered
{
  text-align:		center;
  display: 		block;
}