/* 	This is the style Sheet for the home page of saundby.com
	It's not a template, don't use it unless you have my permission.
	Thanks.
	-Mark Graybill, August 2009
*/

/* Basics */

html { margin: 0; padding: 0; }

body {
	margin: 0;
	padding: 0;
	background: #3043a7; 
	color: #fff393;
	line-height: 120%;
	font-family: Futura, Geneva, Optima, Gill Sans, monospace;
	letter-spacing: 0.12em;
	text-align: center;
	width: 100%;
	min-width: 720px;
}

img {
	margin: 5px;
	border-width: 1px;
}

h1 {
	letter-spacing: 0.2em;
	text-align: center;
}

h2 {
	letter-spacing: 0.15em;
	font-style: italic;
	text-align: center;
}

a:link { color: #0077ff; }
a:visited { color: #c700ff; }
a:hover { color: #00ffff; }

.title {
	font-variant: small-caps;
}

/* Divisions */

/* PAGETITLE ================================= */
/* This division sits above the rest of the page,
	across the top. The three columns of leftcol,
	rightcol, and main all start underneath this. 
	An ad banner can safely be placed over this div. */
	
#pagetitle {
	clear: both;
	margin: 20px 20px 20px 20px;
	float: top;
}

#pagetitle h2 {
	letter-spacing: 0.15em;
	font-style: italic;
	text-align: center;
}

#pagetitle h3 {
	letter-spacing: 0.15em;
	font-style: italic;
	text-align: center;
}

/* LEFTCOL ===================================== */
/* This is the outer "wrapper" for the left column.
	Other divisions like NAVBAR, link lists, and so on
	go inside this division. */

#leftcol {
	float: left;
	padding: 0;
	margin: 0;
	width: 210px;
}

/* RIGHTCOL =================================== */
/* This is the outer "wrapper" for the right column.
	Other divisions like NAVBAR, link lists, and so on
	go inside this division. */

#rightcol {
	float: right;
	padding: 0;
	margin: 0;
	width: 145px;
}


/* CONTAINER ================================= */
/* This wraps the content of the center section
	of the screen. The main section, and the footer
	are usual divisions to put inside the CONTAINER */
	
#container {
	margin: 0 auto;
	padding: 20px;
	background: #000;
	width: 800px;
	text-align: left;
}

/* NAVBAR ===================================== */
/* This is a general format for navigation bars,
	usually placed in either the left or right column. */
	
#navbar {
	padding: 0.5em; 
	margin: 0;
/*	background: #202434; Restore this 
	if you want a contrasting background. */
	letter-spacing: 0.15em;
	color: #00b7ff;
}

#navbar h1 { letter-spacing: 0.15em; margin: 0 0 .3em 0;}
#navbar h2 { letter-spacing: 0.15em; margin: 0 0 .3em 0;}
#navbar h3 { letter-spacing: 0.15em; margin: 0 0 .3em 0;}
#navbar h4 { letter-spacing: 0.15em; margin: 0 0 .3em 0;}
#navbar h5 { letter-spacing: 0.15em; margin: 0 0 .3em 0;}
#navbar h6 { letter-spacing: 0.15em; margin: 0 0 .3em 0;}

#navbar ul { 
	list-style-type: none; 
	padding: 0;
	margin: 0;
}

#navbar li { padding: 0 0 0.25em 0.25em; }

#navbar a:link { color: #00adff; }
#navbar a:visited { color: #d020ef; }
#navbar a:hover { color: #00ffff; }


/* SUMMARY =================================== */
/* This is a pullquote or small intro statement
	for the page. Usually sits in the right column,
	can be moved to the left column, it may be
	desirable to change the width if so. */
	
#summary {
	margin: 0; 
	padding: 5px;
	width: 135px; 
	/* background: #202434; */
	letter-spacing: 0.15em;
	font: italic 10pt/22pt;
	color: #00ffff;
	text-align:center;
}

#summary p { margin: 0.3em; }

#summary h1 { letter-spacing: 0.2em; margin: 0 0 0.5em 0;}
#summary h2 { letter-spacing: 0.2em; margin: 0 0 0.5em 0;}
#summary h3 { letter-spacing: 0.2em; margin: 0 0 0.5em 0;}
#summary h4 { letter-spacing: 0.2em; margin: 0 0 0.5em 0;}
#summary h5 { letter-spacing: 0.2em; margin: 0 0 0.5em 0;}
#summary h6 { letter-spacing: 0.2em; margin: 0 0 0.5em 0;}

/* MAIN ===================================== */
/* The main section of the page. This
	stays in the center margin, and does not
	flow into the third column. */

#main {
	margin: 0 20px  0 215px;
	padding: 0;
	width: 595px;
}

/* ITEM ======================================== */
/* This is a format for short news items or links to
	other articles placed in the main section. */
#item {
	margin: 0 0 0.5em 0;
	padding:0;
	border: 1px solid gray;
	overflow: visible;
	min-height: 144px;

}

#item p {
	padding: 0 0.4em 0.2em 0.5em;
	color: #f7f7f7;
	font: normal 11pt/18pt;
	letter-spacing: 110%;
	line-height: 1.45;
}

#item h3 {
	margin: 0 0 0 0;
	padding: 0.3em;
	background: #380000;
	font-variant: small-caps;
	border-bottom: 1px solid gray;
}

#item p.highlight {
	padding: 0 0.4em 0.2em 0.5em;
	color: #3d5;
}

#item img {
	padding: 0;
	margin: 6px;
}

#item ul {
	margin: 0 0 0.5em 2em;
	padding: 4px;
}

/* ARTICLE ==================================== */
/* A larger item on the page than an item, doesn't need to
	be set off as much, */

#article {
	margin: 0 0 0.5em 0;
	padding:0;
	overflow: visible;
	min-height: 144px;
}

#article p {
	padding: 0 0.4em 0.2em 0.5em;
	color: #f7f7f7;
	font: normal 11pt/18pt;
	letter-spacing: 110%;
}

#article h3 {
/* This is the title for the article and should br set off in some way,
	either through typography or color or a bacground. */
	margin: 0 0 0 0;
	padding: 0.3em;
	background: #444;
	font-variant: small-caps;
}

#article h4 {
/* This is used for article subtitles, should be set off mildly from
	text and brighten the page to avoid monotony in long runs of text. */
	margin: 0;
	padding: 0.2em 0 0 0;
	color: #3e7;
}
#article p.highlight {
	padding: 0 0.4em 0.2em 0.5em;
	color: #3d5;
}

#article img {
	padding: 0;
	margin: 6px;
}

#article ul {
	margin: 0 0 0.5em 2em;
	padding: 4px;
}


/* FOOTER ===================================== */
/* This is the section for the foot of the page, it will
	drop below the level of all content on the page that comes before it, including long left or right columns. Ads can be safely placed inside or after the footer. */
	
#footer {
	clear: both;
	margin: 0.3em;
	padding: 0.2em;
	font: normal 8pt/14pt;
	text-align: center;
	color: #fff393;

}


/* ADSENSE ====================================== */
/* This section holds formatting stuff for different adsense ads,
	a different adsense id can be created for each type of ad. */
	
#adsense-square { /* This is for 200x200 square ads
						placed in the left column. */
	clear:left;
	float: left;
	margin: 1em 0 0 0;
}