/* 
	Load in stylesheet settings for dasBlog specific items
*/

@import url("navigationBar.css");

body
{
	margin: 0; 
	padding: 0; 
	background-color: #353535;
	text-align: left;
}

#pageContainer
{
	width: 760px;
	margin: 0 auto;
	font-family: Verdana, arial, helvetica, sans-serif;
	font-size: small;
}

#pageContent
{
	float: left;
	width: 760px;
	padding: 0;
	background: #fff;
}

/*
 * the next four styles display the page header using a header graphic that you can 
 * change as desired (the file is specified below as Header.jpg).  
 * The drawback of using this header graphic is that the blog title is not
 * automatically displayed from the site.config file.  The benefit is a slick header! ;-)
 * if you wish to use a header graphic *AND* have text in front of it, you can do that too- 
 * comment out the next four styles and then UNCOMMENT the four identically named styles after them.
 * The new header used is HeaderClean.jpg (you can use anything you want , but I submitted that one 
 * so you can play) and allows the blog title to come through.
 */

#pageHeader
{
	padding: 0;
	margin: 0;
	height: 90px;
	width: 760px;
	background: #369 url( "../images/header_bg.gif" );
	border-bottom: 1px solid #64a6f3;
	position: relative; /* needed for the clickable header image */
}

#pageHeader a, #pageHeader a:hover, #pageHeader a:active, #pageHeader a.active:link, #pageHeader a.active:visited
{
	position: absolute;
	top: 18px;
	left: 15px;
	width: 354px;
	height: 60px;
	color: white;
	text-decoration: none;
	/* border: 1px solid red; display the clickable area */
}

#pageHeader h1
{
	text-indent: -1000px;
}

#pageHeader a h1
{
	font: 18pt Tahoma, arial, helvetica, sans-serif;
	font-weight: bold;
	display: none;
}

#pageHeader h2
{
	margin: 0;
	padding: 5px 0 0 90px;
	color: #fff;
	font: 8pt Verdana, arial, helvetica, sans-serif;
	font-weight: bold;
	display: none;
}

/*
* Here is the end of the four styles which allow automatic blog titling from the site.config file
*/

#siteNavigation
{
	width: 760px;
	background: white;
}

#leftSide
{
	float: left;
	width: 510px;
	padding: 10px 10px;
	line-height: 1.5em;
}

#rightSide
{
	float: right;
	width: 225px;
	margin: 0;
	padding: 20px 0 10px 0;
	font: 8pt Verdana, arial, helvetica, sans-serif;  
	font-size: 90%;
	line-height: 1.5em;
	color: #369;
}

#shadowBox
{
	width: 460px;
}

#leftSide .date
{
	font-size: 1.5em;
	font-weight: bold;
	margin: 10px 10px 0px 10px;
	font-family: "Trebuchet MS", Verdana, arial, helvetica, sans-serif;
}

.side
{
	margin: 0;
	padding: 10px 5px 15px 10px;
	line-height: 1.2em;
	font-size: 90%;
	background-image: url(img/bluegradient.gif);
	background-repeat: no-repeat;
}

form
{
	margin: 0;
	padding: 0;
}

.bodyContentStyle
{
	margin: 0;
	padding: 0;
}

#footer
{
	padding: 10px;
	background-color: #000;
	font-size: 80%;
}

#footer p
{
	margin: 0;
	padding: 2px;
}

#aboutBox
{
	margin: 10px;
	padding: 0px 10px 0px 10px;
	color: #aaa;
}

#aboutBox a, #aboutBox a:link, #aboutBox a:active, #aboutBox a:visted
{
	color: #aaa;
	text-decoration: none;
}

#aboutBox a:hover
{
   color: #fff;
}

#aboutbox select
{
	font-size: 50%;
	background-color: Fuchsia;
}