/*
Theme Name: Prebuilt
Theme URI: http://www.devlounge.net
Description: A theme built by Astereostudio and Devlounge.
Version: 1.0
Author: Astereostudio & Devlounge
*/


/* Base Layout 
++ This is how the main site is structured. This includes wraps to
hold everything together in a clean and efficient way. These styles
are all used in the header.php, as they are repeated throughout everypage.
*/

body {
margin-top: 10px;
}

#wrap {
width: 750px;
height: 100%;
background-color: #fff;
margin: 0 auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

#header {
width: 747px;
height: 139px;
margin: 0 auto;
background-image: url(images/pre_03.gif);
background-color: #ca1717;
margin-bottom: 10px;
font-size: 10px;
}

ul.menu {
	margin: 0;
	padding: 0;
	bottom: 0;
	left: 20px;
	}

ul.menu li {
	display: inline;
	margin: 0;
	}

ul.menu,
ul.menu li a {
	padding: 5px 15px 6px;
	}

ul.menu li a {
	font: 1em Verdana, Helvetica, Arial, Sans-Serif;
	color: white;
	margin: 0;
	}

ul.menu li a:hover {
	background: #333;
	color: #eee !important;
	text-decoration: none;
	}

ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover {
	color: #333 !important;
	background: white;
	text-decoration: none;
	}

/* Index
++ In this case, we'll be splitting into two columns, but because
our recent comments feature is located in the sidebar, all of that will
be styled in the sidebar section below. This is where classes such as headlines
and post links are defined.
*/

#hppost {
width: 435px;
padding-left: 5px;
padding-right: 10px;
float: left;
border-right: 1px solid #efefef;
}

#hppost h2 {
font-size: 14px;
color: #ca1717;
}

#hppost h2 a {
color: #ca1717;
font-weight: normal;
text-decoration: none;
}

#hppost a {
color: #666;
text-decoration: none;
border-bottom: 1px dotted #666;
}

#hppost a:hover {
color: #222;
border-bottom: 1px dotted #222;
}

.entry {
font-size: 12px;
line-height: 16px;
color: #555;
}

/* Sidebar
++ The sidebar is where you can put anything you'd like to display
on the sides (heh, get it?), of each page. In this case, Prebuilt's
sitebar comes with built in support for the "Recent Comments" plugin,
along with pulling Gravatars for that person. To style these elements,
we introduce the sidebar classes.
*/

#sidebar {
width: 290px;
font-size: 10px;
line-height: 12px;
color: #666;
float: right;
} 

#sidebar a {
color: #666;
text-decoration: none;
border-bottom: 1px dotted #666;
}

#sidebar a:hover {
color: #222;
border-bottom: 1px dotted #222;
}

#sidebar ul{
	list-style-type:none;
	margin:0;
	padding:0;
}
#sidebar ul li{
	border-bottom:1px dotted #efefef;
	margin-bottom:0.6em;
	padding:0.3em;
}

.rctop {
width: 266px;
height: 15px;
background-image: url(images/pre_07.gif);
background-color: #f5f5f5;
margin-bottom: 9px;
}

/* Middle Spacer
++ This is where we have some quick styling to create
a space between content above and the extras below. In
this case, we are using a background image with a soft
drop shadow, to create the look of depth.
*/

#secdivide {
width: 746px;
height: 41px;
margin: 0 auto;
background-image: url(images/pre_13.gif);
background-color: #f7f7f7;
margin-top:8px;
margin-bottom: 8px;
}

/* Flickr Intergration
++ This styles your flickt images, called in via rss
in the flickrss plugin. You can style your images
however, giving them borders, rollover colors, etc.
*/

#flickr {
width: 200px;
height: 180px;
margin-right: 10px;
background-image: url(images/pe_flickr.gif);
background-repeat: no-repeat;
background-color: #ffffff;
float: left;
}

#flickr ul, #flickr ul li { 
padding: 0; 
margin: 0; 
border: 0; 
}

#flickr a img { 
border: 1px #ccc solid; 
padding: 3px; 
margin: 5px 3px 0px;
}

#flickr a:hover img { 
border: 1px #ca1717 solid;
} 

#flickr ul { list-style: none; }
#flickr ul li { display: inline; }

/* Extras
++ This is for category listings, search, archives, etc.
We have set this area up you it can be filled with whatever you may want to put here.
*/

#extras {
background-color: #F5F4F4;
width: 530px;
height: 200px;
margin-top: 3px;
margin-bottom: 5px;
float: right;
}

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

#extras ul li{
border-bottom:1px dotted #efefef;
margin-bottom:0.6em;
padding:0.3em;
}

.extrasinside {
padding: 5px;
font-size: 10px;
line-height: 12px;
color: #555;
}

/* Search
++ This is where we style the search box. In this case,
we're using css based rollovers to create a "Find It Now" image. This can be edited as you wish, but please note if you edit the height of any of the search elements, you will have to rework the extras box.
*/

#search {
border:1px solid #d9d9d9;
width: 520px;
padding: 5px;
float: right;
}

/* Spacer
++ This creates a final gap between the content and page footer. There is really no need to edit this.
*/

#spacer {
width: 100%;
height: 10px;
}

/* Footer
++ The footer is where it all comes together and comes to a close. Styling this is fairly simple, because there's not much to do.
*/

#footer {
width: 747px;
margin: 0 auto;
font-size: 10px;
color: #555;
padding-top: 5px;
border-top: 1px solid #ccc;
}

#footer a {
color: #555;
text-decoration: none;
font-weight: bold;
border-bottom: 1px dotted #ca1717;
}

#footer a:hover {
border-bottom: 1px dotted #333;
}