/* @override http://idontlikeyouinthatway.craveonline.com/css/main.css */

/* All browsers have a default font-size, though the differ from implementation. */
/* So we set our own default here  */
html {font-size:16px}

/* We want our background to run to the edge of the page, so we kill the body's default margin */
/* By default, browsers use a larger font-size that we ever would, */
/* so let's pare that down to ~80% of its normal size and choose some good fonts */
body {
	margin:0;
	background:white url(/images/bg_body.gif) repeat-y center top;
	font-size:.8em;
	font-family:Arial, Helvetica, sans;
}

/* Centre the wrapper and set up our background styles */
#wrapper {
	width:876px;
	margin:0 auto;
	background:#e0e0e0 url(/images/bg_wrapper.jpg) no-repeat center top;
}


/* Sitebuilder slaps a default padding inline on each content div, */
/* so we need to override that with an !important declaration */
div.content {padding:0 !important}


/* Give the link home finite dimensions and indent its text off the left page edge, */
/* leaving us with an effectively "invisible" clickable area over the */ 
/* logo on the #wrapper's background */
a.logo {
	display:block;
	width:212px;
	height:72px;
	text-indent:-5000em;
	outline:none;
}

/* Links are awesome */
a {color:#cd2626;}

/* Lists have a tonne of padding and margin by default. Let's pare them down a bit */
ul.nav,
ul.nav li {
	margin:0;
	padding:0;
	list-style:none;
}

/* Set our nav background */
ul.nav {background:white url(/images/nav_bg.gif) no-repeat 0 0;}

ul.nav li,
ul.nav li a {
	display:inline-block;
	height:41px;
}

/* We'll be using BG images for the text, so let's boot the anchor text off page */
ul.nav li a {text-indent:-5000em}

/* For each item, we set its width and background individually */
ul.nav li.home a {
	width:87px;
	background:transparent url(/images/nav_home.gif) no-repeat 0 0;
}

ul.nav li.pictures a {
	width:147px;
	background:transparent url(/images/nav_celebrity.gif) no-repeat 0 0;
}

ul.nav li.submit a {
	width:91px;
	background:transparent url(/images/nav_submit.gif) no-repeat 0 0;
}

/* Each background image is a sprite; the top half of the image is the default state, and the */
/* bottom half of the image is the hover state. So, when we hover over the anchor, all we */
/* have to do is change the background image position */
ul.nav li a:hover {background-position:left bottom}

div.rsslist div.header,
div.rsslist div.content,
div.result div.header,
div.result div.content {
	background:#f7f9f8;
	border:1px solid #cfcfcf;
	padding:15px !important;
}

div.rsslist div.header,
div.result div.header {
	padding-bottom:.5em !important;
	border-bottom-width:0;
}

div.result div.header_text {
	text-align:left !important;
	font-size:1.6em;
	font-weight:bold;
	color:#790e11;
}

div.rsslist div.header_text {
	text-align:left !important;
	font-size:1.2em;
	font-weight:bold;
	color:#790e11;
}


div.rsslist div.content,
div.result div.content {
	padding-top:0 !important;
	border-top-width:0;
}

div.rsslist ul.rsslistings {
	margin: 0;
	padding-left: 18px;
}


div.rsslist div.content,
div.result div.searchResult {margin:0 0 1em}

div.result div.searchResultsHeader {
	font-size:.8em;
	margin:1em 0 -1.2em;
}

div.result div.searchResultsHeader strong {font-size:1.2em}

div.result div.searchResultTitle a {
	color:#790e11;
	font-size:1.2em;
	text-decoration:none;
	font-weight:bold;
}

div.result div.searchResultTitle a:hover {text-decoration:underline}

div.result div.searchResultUrl,
div.result div.searchResultExcerpt {font-size:.9em}

div.result div.searchResultExcerpt {margin:.25em 0}



/* Create some space for our footer background and drop said background in */
div.footer {
	padding-top:150px !important;
	background:transparent url(/images/bg_footer.jpg) no-repeat 0 0;
}

/* Now the real footer. Let's give this a finite width and float it left; this way we'll */
/* be able to contain the elements below, which are also floated */
div.footer div.footer_content {
	float:left;
	width:860px; /* Width + 2x Padding = #wrapper's width */
	padding:8px 8px 0;
	height:52px;

	background:#790e11;
	color:white;
	font-size:.8em;
}

/* Make each of these roughly half the width of the footer (a smidge less, for gutter) */
/* and float them left */
div.footer div.copyright,
div.footer div.footer_nav {
	width:35%;
	float:left;
	text-align:left;
}

/* As we want this on the right hand side, we reverse the float and text-align */
div.footer div.footer_nav {
	width:55%;
	float:right;
	text-align:right;
}

div.footer div.footer_nav a {
	font-size:1.2em;
	color:white;
	text-decoration:none
}

div.footer div.footer_nav a:hover {border-bottom:1px dotted white}