/*
Original design: Variant Note (v1.0 - Mar 03, 2011) - A free xhtml/css website template by Andreas Viklund.
For more information, see http://andreasviklund.com/templates/variant-note/
*/

@import url(http://fonts.googleapis.com/css?family=Anonymous+Pro);

/* Main containers */
body {padding:0; margin:0; font:84%; font-family:Helvetica; background:#fff url(images/background.jpg) top center no-repeat; color:#333; text-align:center; line-height:1.4em;}
#wrap {width:960px; text-align:left; margin:0 auto;}

/* Header */
#header {height:160px; margin:0 0 20px 0;padding-top:36px;}
#title {padding:20px 0 10px 140px; height:100px;background:transparent url(images/logo.png) top left no-repeat;}
h1 {margin:0 auto 5px auto; padding:0; font-size:3em; font-weight:400;color:#888; letter-spacing:-1px; line-height:1.2em; text-shadow:#bbb 2px 2px 4px;}
h1 a {color:#9e1616; font-weight:700; text-decoration:none;}
h1 a:hover {color:#555; text-decoration:none;}
.slogan {color:#555; font-size:1.2em; margin:0 0 15px 5px; padding:0;}

/* HTML Tags */
a {text-decoration:none; font-weight:400; color:#9e1616;}
a:hover {text-decoration:underline;}
a img {border:0;}
h2 {margin:10px 0 15px 0; color:#9e1616; font-size:1.8em; font-weight:400; border-bottom:1px solid #ccc;}
h2 a {font-weight:400;}
h3 {font-size:1.6em; font-weight:400; margin:0 0 10px 0; padding:2px 0; color:#9e1616; font-size:1.2em; font-weight:400; border-bottom:1px solid #ccc;}
h2,h3 {text-shadow:#aaa 0px 0px 2px; border-left:5px solid #ccc; padding:5px 10px;}
p {margin:0 0 20px 18px;}
ul {margin:0 0 20px 20px; padding:0;}
li {margin:0; padding:0 0 0 5px;}

/* Sidebar */
#sidebar {width:240px; float:left; margin:0 0 25px 0; padding:0; color:#444;}
#sidebar h2 {font-size:1.5em; padding-bottom:3px; border-bottom:1px solid #ccc; margin-bottom:5px;}
#sidebar ul {list-style:none; margin:0 0 15px 18px;}
#sidebar li {padding:0; margin:0;}
#sidebar ul.sidemenu {width:200px; padding:0; margin:0 0 20px 18px;}
#sidebar ul.sidemenu li a {color:#333; display:block; padding:5px 0; margin:0; font-size:1.3em; text-shadow:#aaa 0px 0px 2px;}
#sidebar ul.sidemenu li a:hover {color:#9e1616; text-decoration:none; text-shadow:#aaa 0px 0px 2px;}
#sidebar ul.sidemenu li a.active {color:#ffffff; text-shadow:#aaa 0px 0px 2px; background-color:#9e1616;}
#sidebar ul.sidemenu ul {width:180px; padding:0; margin:0 0 0 20px;}
#sidebar ul.sidemenu ul li a {padding:2px 0; margin:0; font-size:1em;}

/* Content area */
#content {text-align:left; margin:0 0 25px 280px; width:680px;}
#content img {margin:5px 0;}
.post {margin:0 0 30px 0;}
.postmeta {color:#666; text-align:right !important; padding:5px 10px 0 0; margin-left:0; border-top: 1px solid #ccc; border-right:5px solid #ccc; font-size:0.9em;}

/* Footer */
#footer {font-size:0.9em; clear:both; width:960px; line-height:1.4em; color:#555; font-weight:400; margin-bottom:10px; border-top:1px solid #ccc; border-left:5px solid #ccc;}
#footer p {padding:5px 0 5px 10px; margin:0;}
#footer a {color:#555; font-weight:400; text-decoration:none; border-bottom: 1px dotted #888;}

/* Various classes */
.featureimage {margin:5px auto 20px; display:block;}
.centered {text-align:center;}
.hide {display:none;}
.clear {clear:both; visibility:hidden;}

/* Alternate layout */
body.singlecol #sidebar {width:960px; margin:0 auto; float:none;}
body.singlecol #content {width:960px; margin:20px auto;}

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 660px;
	height:230px;
	/* custom decorations */
	border:0px solid #ccc;
	background: #F1F1F1;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
	left: 2px;
}

.items div {
	float:left;
	width:660px;
	height:240px;
}

/* single scrollable item */
.scrollable img {
	float:left;
	margin:10px 0 10px 0;
	background-color:#fff;
	padding:0;
	width:300px;
	height:220px;
	overflow:hidden;
	background-color:#FFF;
}

/* active item */
.scrollable .active {
	border:2px solid #000;
	position:relative;
	cursor:default;
}


/* position and dimensions of the navigator */
.navi {
	margin-left:328px;
	width:200px;
	height:20px;
}


/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../img/scrollable/arrow/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
.navi a.active {
	background-position:0 -16px;     
}

.widget {
	min-height: 230px;
	width: 312px;
	float: center;
	display: inline;
}

.largecolumn {
	width: 100%;
	/*display: inline;*/
	float: center;
	margin: 0 0 10px 0;
}

.viewall a {
	display: inline;
	float: right;
	padding: 3px;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFF;
	text-align: center;
	margin: 8px 8px 0 0;
	background-color: #000;
}
.viewall a:hover {
	color: #000;
	background-color: #FFF;
}


.news_item {
	width: 300px;
	float: left;
	display: inline;
	margin: 0 0 0 20px;
	background-color: transparent;
}
.news_item h4 {
	background-color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	font-size: 11px;
	margin: 5px 0 0 0px;
	padding: 5px 0px 5px 10px;
}
.news_item h4:hover {
	background-color: #FF0;
}