/* @override http://localhost:8888/market-investment/themes/market-investment/site.css */

/* Global reset for most stuff */
* {
	margin: 0px;
	padding: 0px;
	border: none;
	border-collapse: collapse;
	list-style-type: none;
}
/* main body styles sets the page fonts etc */
html {
	min-width: 900px;
}

body {
	font: 100% "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #000;
}
/* puts the overall page content inside a box, allows for more customisation */
#maincontainer {
	margin: 10px;
	min-width: 850px;
	position: relative;
}
/* page header stuff */
#maincontainer #header {
	color: #fff;
}
/* to add an image to the header replace this with an img url and then set the text indent to a silly high number */
#maincontainer #header h1 {
	font-size: 200%;
	padding: 20px;
	font-style: italic;
	background: #e6e6e6 url(./images/header_bg.jpg) repeat-x;
	font-weight: bold;
	height:  30px;
	font-variant: small-caps;
}
#maincontainer #header ul {
	display: block;
	width:  150px;
	font-size: 70%;
	margin-top:  10px;
	background: #eeeeee;
	margin-right:  10px;
	float: left;
}
#maincontainer #header ul li {
	display: inline;
}
#maincontainer #header ul li a {
	display: block;
	padding: 6px 20px;
	color: #000;
	text-decoration: none;
	border-bottom:  1px solid #fff;
}
#maincontainer #header ul li a:hover {
	background: #2e6296;
	color:  #fff;
}
/* left column, custom built for this theme, includes style reset as it is within the main menu list */

#maincontainer #header ul #advert {
	padding: 0;
}

#maincontainer #leftSide {
	display: block;
	margin: 0;
	padding: 10px;
	color: black;
	background: white;
}
/* right column, usually for adverts or whatever */
#maincontainer #rightSide {
	display: block;
	margin: 10px 10px 10px 0px;
	padding: 5px;
	float: right;
	width: 120px;
}


/* top side advert box */
#maincontainer #topSide {
	width: 468px;
	height:  60px;
	position: absolute;
	top:  5px;
	right:  5px;
	background:  white;
}


/* main page content box, I use the table definition so that it doesnt wrap around the left or right hand adverts but instead flows downwards */
#maincontainer #PageContent {
	display: table;
	margin: 10px;
	margin-bottom:  0px;
}
/* general page content elements */
#maincontainer #PageContent p {
	font-size: 70%;
	line-height: 160%;
	margin-bottom: 10px;
}
#maincontainer #PageContent a {
	color: #2e6296;
	text-decoration: underline;
}
#maincontainer #PageContent h1 {
	font-size: 160%;
	color: #2e6296;
	margin-bottom: 10px;
}
#maincontainer #PageContent h2 {
	font-size: 140%;
	color: #2e6296;
	margin-bottom: 10px;
}
#maincontainer #PageContent h3 {
	font-size: 120%;
	color: #2e6296;
	margin-bottom: 10px;
}
#maincontainer #PageContent ul {
	margin: 10px;
	font-size: 80%;
	line-height: 160%;
}
#maincontainer #PageContent li {
	list-style: square;
}
/*the page footer styles, this element also works to ensure that the maincontainer clears the entire page content, which it wouldnt normally do with floats (a container div has no idea about the heights of any floats - although it really should) */
#maincontainer #footer {
	font-size: 80%;
	display: block;
	clear: both;
	color: #FFF;
	background: #2e6296;
}
#maincontainer #footer strong {
	display: block;
	padding: 10px 20px;
	background: #5085bb;
}
#maincontainer #footer em {
	padding: 5px 20px;
	display: block;
}

/* RSS feed listing styles */

#maincontainer #PageContent #rssFeed {
	margin-top: 10px;
	border-top: 1px dotted #CCC;
	padding-top: 10px;
}
#maincontainer #PageContent #rssFeed .rssfeedItems {
	font-size: 70%;
	padding: 20px 0px;
	clear: both;
	line-height: 160%;
}
#maincontainer #PageContent #rssFeed .rssfeedItems img {
	float: left;
	margin: 0px 20px 20px 0px;
}
#maincontainer #PageContent #rssFeed .rssfeedItems a {
	color: #000;
	text-decoration: none;
}
#maincontainer #PageContent #rssFeed .rssfeedItems .rsstitles {
	font-size: 130%;
	color: #2e6296;
	display: block;
	margin-bottom: 10px;
}
#maincontainer #PageContent #rssFeed .rssfeedItems .rsstitles em {
	font-size: 80%;
	color: #000;
}