/*Created by: Rachel Stancliff*/
/*Last updated: September 1, 2009*/
/*Notes have been added next to some of the CSS to explain what they mean*/

body {
	font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
	font-size: 0.9em; /*0.9em is the same as roughly 10pt; 1em is the same as 12pt*/
	margin: 0; /*top, left, bottom, and right margins for the BODY must be set to 0px for Lightbox to work properly*/
}

#wrapper { /*the wrapper contains all the content and is used for centering the page*/
	margin: auto; /*setting margins to auto centers the content*/
	width: 650px;
}

#header {
	background: url('../images/header.jpg') no-repeat;
	height: 170px;
	margin-bottom: 25px;
}

#catbar {
	height: 75px;
	background: url('../images/catbarback2.jpg') no-repeat;
	margin-bottom: 25px
}

#infobar {
	height: 75px;
	background: url('../images/infobarback.jpg') no-repeat;
}

#catbar img, #infobar img { border: none; } /*removes borders around images when they are linked*/

#sidebar {
	float: right;
	background: #ffd666 url('../images/sidebar.png') no-repeat top;
	width:195px; margin-left:15px; margin-right:0px; margin-top:15px; margin-bottom:15px; background-color:#ffd666
}

#sidebarContent { padding: 40px 10px 10px 10px; }

#contentArea { padding: 15px 15px 25px 15px; } /*the contentArea is where text goes*/

h1 {
	text-transform: uppercase;
	border-bottom: dashed 2px #ffc832;
}

h1.front { border-bottom: none; }
h1.front span { border-bottom: dashed 2px #ffc832; }

h2 { font-size: 1.5em; }

h3 { color: #60605f; }

#footer {
	clear: both; /*by clearing the floated blocks above it (see #sidebar, which is floated right), the footer stays at the bottom of the page*/
	height: 50px;
	line-height: 50px; /*centers the text vertically*/
	background-color: #5f6060;
	text-align: center;
	color: #FFF;
	font-weight: bold;
}

#footer a {
	text-decoration: none;
	color: #FFF;
}

.weeklypicture {
	padding: 5px;
	border: 1px solid gray;
}

.storypicture {
	padding: 5px;
	border: 1px solid #5f6060;
	margin-bottom: 10px;
}

.readMore a {
	color: #ffc832;
	text-decoration: none;
}

.readMore a:hover {
	color: #5f6060;
}

.catpicture {
	margin-top: -10px;
	padding: 5px;
	border: 1px solid #5f6060;
}

.caption {
	font-size: 0.9em;
	display: block;
}

.floatleft { float: left; } /* .floatleft is a class that can be applied to images, which will float them left and allow content to flow around it*/