/* @override http://localhost:3000/common/styles/layout.css */

/*===================================================================
 This layout will only work well if the defaults.css file is
 included before it.  This file just does layout. There should
 be an application specific theme file included after this one
 that does the styles and colors.
===================================================================*/


/* Start the important parts here */
body {
	padding: 0px;
	margin: 25px 0%;
	/* margin instead of padding for the gutterspace around 
	 			   the layout because IE breaks the layout when 
	 			   horizontal padding is applied to the body element.
	 			   % over pixels for that horizontal gutterspace so that
	 			   it automatically goes below 20px on low-res browsers
	 			   to create more space for the content. */
	font-size: 100.1%; /* resolve some font size issues in some layouts for
				   some browsers. (in other words, i got no clue.) */
	margin-top: 0;
}

/*===================================================================
 Header Section
===================================================================*/
.fullheader {
	width: 100%;
}

.topline {
	
}

.slogan {
	font-size: smaller;
}

.logo {
	font-size: 24px;
	font-weight: bold;
}

h1 {
	margin: 0;
	padding: 5px;
}

.titlebar {
	font-size: 18px;
}

/*===================================================================
 Navbar is an unordered list
===================================================================*/
#navbar {
	padding: 3px 0;
	margin-left: 0;
	margin-bottom: 8px;
	border-bottom: 1px solid #999;
	font: bold 12px verdana, sans-serif;
}

#navbar ul {
	padding: 0;
	margin-top: 10px;
	margin-bottom: 0;
	list-style-type: none;
	width: 100%;
	text-align: center;
}

#navbar li {
	list-style: none;
	margin: 0;
	display: inline;
	white-space: nowrap;
}

#navbar li a {
	padding: 0.2em 1em;
	margin-left: 3px;
	text-decoration: none;
}

#navbar li a#current {
	background: white;
	border-bottom: 1px solid white;
}

/*===================================================================
 Page Parts
===================================================================*/
#pageWrapper {
	font-size: 80%; /* set your default font size here. */
	border-width: 0 1px;
	min-width: 40em;	/* IE doens't understand this property. EMs are used
				   so that as the font size increases, the proportional
				   limitations (min-width) increase with it, rather
				   than creating a middle column that can only fit
				   3 or 4 characters in it. */
	width: auto;
}
* html #pageWrapper
{
	/* \*/
		word-wrap: break-word;
	/* invalid CSS but keeps IE from breaking horribly under narrow viewports */
}

#mainsection {
	margin: 0px;
	padding: 0px;
	width: 75%;
	float: left;
}

#pagefooter {
	text-align: center;
	font-size: x-small;
	margin-right: 20%;
	margin-left: 20%;
	margin-top: 10px;
	clear: both;
	padding: 0.5em;
}
/*
.rightblocks {
	vertical-align: top;
	padding: 5px;
	margin-left: 75%;
}

.leftblocks {
	vertical-align: top;
	padding: 5px;
}
*/
#leftColumn {
	float: left;
	margin: 0 1px 0 -14em;
	width: 14em;
	z-index: 4;
}

#rightColumn {
	float: right;
	width: 14em;
	margin: 0 -14em 0 1px;
	z-index: 2;
}

#outerColumnContainer {
	/* reserves space for the left and right columns. you can use either
	 * padding, margins, or borders, depending on your needs. however you
	 * can use the border method to create a background color for both left
	 * and right columns
	 */
	border-left: solid 14em #fff;
	border-right: solid 14em #fff;
}

#innerColumnContainer {
	border: solid 1px #fff;
	border-width: 0 1px;
	margin: 0 -1px; /* compensate for the borders because of
				   100% width declaration */
	width: 100%;
	z-index: 1;
}

#leftColumn,#middleColumn,#rightColumn,* html #SOWrap {
	overflow: visible; /* fix for IE italics bug */
	position: relative; /* fix some rendering issues */
}

#SOWrap {
	float: left;
	margin: 0 -1px 0 0;
	padding: 0;
	width: 100%;
	z-index: 3;
}

/*===================================================================
 Block Styles
===================================================================*/
.block {
	padding: 0;
	margin-bottom: 1.5em;
	margin-top: 3px;
	display: block;
    margin-left: auto;
    margin-right: auto;
}

.block h3 {
	font-weight: bolder;
	margin: 0px;
	padding: 6px;
}

.block ul {
	list-style-type: none;
	margin: 5px;
	padding: 0;
}

.block dl {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

.block dd {
	margin-left: 10px;
	list-style-type: none;
}

.block dt {
	margin-top: 5px;
	margin-bottom: 5px;
	list-style-type: none;
}

.block img {
	width: 90%;
	display: block;
    margin-left: auto;
    margin-right: auto;
}

.menu ul {
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
}
.menu a {
	display: block;
	width: 100%;
	padding: 0;
	text-decoration: none;
}

.form input {
	width: 12em;
}

/*===================================================================
 Content Section Stuff
===================================================================*/
#content {
	text-align: left;
	vertical-align: top;
	float: right;
	margin: 0 0 0 -1px;
	width: 100%;
	z-index: 5;
}

.sectionheader {
	font-weight: bold;
	text-decoration: none;
	padding: 8px;
}

.breadcrumb {
	text-align: left;
	padding-left: 3em;
}

/*===================================================================
 A story is a bock with formatting for 
 title and author information.
===================================================================*/
.story {
	padding: 5px;
	margin-bottom: 10px;
}

.story h2,.storytitle {
	text-decoration: none;
	margin: 0px;
	padding: 3px;
}

.storybody {
	text-indent: 5px;
}

.storyoptions {
	text-align: right;
	font-size: x-small;
}

.storyinfo {
	font-size: x-small;
}

.comments ul {
	list-style-type: none;
	margin: 5px;
	margin-left: 20px;
	padding: 0;
}

.comments a {
	display: block;
	width: 100%;
	padding: 0;
	text-decoration: none;
}

/*===================================================================
 Feed blocks are half of a row wide
 and are about halfway between a block
 and a story.
===================================================================*/
.feed {
	width: 48%;
	padding-bottom: 5px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	margin-top: 5px;
	margin-bottom: 10px;
	margin-left: 0;
	margin-right: 1%;
	float: left;
}

.feed ul {
	margin: 5px;
	padding: 5px;
	list-style-type: none;
}

.feed dl {
	margin: 5px;
	padding: 5px;
	list-style-type: none;
}

.feed dd {
	margin-left: 10px;
	list-style-type: none;
}

.feed dt {
	margin-top: 5px;
	margin-bottom: 5px;
	list-style-type: none;
}

.feed h2 {
	font-weight: bolder;
	margin: 0px;
	padding-bottom: 3px;
	padding-left: 7px;
	padding-right: 3px;
	padding-top: 3px;
}

.feed img {
	float: left;
}
/*===================================================================
 Image Stuff
===================================================================*/
.thumbnail {
	float: left;
	width: 22%;
	border: 1px solid #ccc;
	margin: 0 1% 1% 0;
	padding: 5px;
	text-align: center;
}

.thumbnail img {
	width: 100%;
}
/*===================================================================
 Hacks and Fixes
===================================================================*/
.clear {
	clear: both;
	padding-bottom: 1px; /* for Gecko-based browsers */
	margin-bottom: -1px; /* for Gecko-based browsers */
}

.hide {
	display: none !important;
}

.inside {
	/* glitch in IE caused by vertical padding in this class, so 0 padding is
	 * set here and those blocks that need the vertical padding must be 
	 * applied to the parent element. the purpose of this class is to provide
	 * horizontal padding without using hacks to get around IE's broken box 
	 * model. so it's okay to apply vertical padding to the parent element, 
	 * just not horizontal padding.
	 */
	padding: 0 1em;
}

table {
	width: 100%;
}