/*
ngmoco - Rolando 2
Gallery styles
*/

/* @override http://rolando2:8888/styles/gallery.css */

/* Whitespace Reset */

* {
	margin: 0;
	padding: 0;
}

body {
	font: bold 11px/14px "Helvetica Neue", Arial;
	color: #56524f;
	text-shadow: #fff 0 1px 1px;
}

/* Images */

a img {
	border: none;
	outline: none;
}

a {
	outline: none;
	text-decoration: none;
	color: #fff;
}

a.active {
	background-color: rgba(0,0,0,0.3);
	color: #fff;
	-webkit-border-radius: 10px;
	border-bottom: 1px solid #735639;
	border-top: 1px solid #4a321e;
	border-right: 1px solid #4a321e;
	border-left: 1px solid #4a321e;
}

#showcase {
	width: 956px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background: url(../images/gallery/background.jpg) repeat;
	height: 658px;
	overflow: hidden;
}

#gallery {
	padding-left: 15px;
}

/* @group Header */

.header {
	height: 52px;
	background: url(../images/gallery/header.gif) no-repeat;
	padding-bottom: 8px;
}

.header ul {
	list-style: none;
	float: left;
	position: absolute;
	left: 20px;
	top: 9px;
	width: 400px;
}

.header ul li {
	display: inline;
	position: relative;
	float: left;
}

.header ul li a {
	font-size: 14px;
	padding: 4px 8px 5px;
	margin-left: 1px;
	margin-right: 1px;
	display: block;
}

.header ul li a.active {
	background-image: url(../images/gallery/tick.gif);
	background-repeat: no-repeat;
	background-position: 7px 6px;
	padding-left: 25px;
	margin-right: 0;
	margin-left: 0;
	background-color: rgba(0,0,0,0.3);
}

.header h2 {
	float: left;
	color: #fff;
	font-size: 24px;
	position: absolute;
	top: 10px;
	left: 440px;
}

.header h2 small {
	color: #dfcbb6;
	font-size: 18px;
	padding-left: 6px;
}

.header em {
	background: url(../images/gallery/vote.gif) no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 65px;
	height: 23px;
	position: absolute;
	top: 12px;
	right: 22px;
}

/* @end */

/* @group Cards */

.cards {
	width: 100%;
}

.card {
	width: 302px;
	height: 180px;
	float: left;
	margin-right: 10px;
	margin-bottom: 8px;
	position: relative;
	background: url(../images/gallery/card.gif) no-repeat;
}

/* Title */

.card .title {
	position: relative;
	height: 26px;
	padding-top: 12px;
	padding-left: 14px;
}

.card .title h4 {
	width: 250px;
	color: #3e3325;
	font-size: 15px;
}

.card .title h4 small {
	color: #7e7154;
	font-size: 12px;
}

.card .title ul {
	position: absolute;
	top: 10px;
	right: 0;
	width: 31px;
	list-style: none;
}

.card .title ul li {
	float: left;
	margin-right: 5px;
}

.card .title ul li a {
	width: 20px;
	height: 21px;
	display: block;
	overflow: hidden;
	text-indent: -9999px;
}

.card .title ul li a.VoteUp {
	background: url(../images/gallery/up.gif) no-repeat;
}

.card .title ul li a.VoteDown {
	background: url(../images/gallery/down.gif) no-repeat;
}

.card .title ul li a.VoteUp.green {
	background: url(../images/gallery/up-green.gif) no-repeat;
}

.card .title ul li a.VoteDown.green {
	background: url(../images/gallery/down-green.gif) no-repeat;
}

.card .title ul li a.VoteUp.red {
	background: url(../images/gallery/up-red.gif) no-repeat;
}

.card .title ul li a.VoteDown.red {
	background: url(../images/gallery/down-red.gif) no-repeat;
}

.card .description {
	float: right;
	width: 152px;
	padding-right: 20px;
	font-size: 11px;
	position: relative;
	padding-top: 8px;
}

.card .description strong {
	font-size: 9px;
	color: #938e8a;
	text-transform: uppercase;
}

.card .description p {
	
}

.card .description small {
	color: #a19b96;
	font-size: 9px;
	position: absolute;
	top: 108px;
	left: 0;
}

.card .description small span {
	font-size: 12px;
	color: #41a52d;
}

.card .description small span.negative {
	font-size: 12px;
	color: #c3431b;
}

.card .description img {
	width: 124px;
	height: 112px;
	float: left;
}

.card .image {
	float: left;
	padding-left: 11px;
	padding-top: 5px;
	padding-right: 9px;
}

/* @end */

/* @group Pagination */

.pagination {
	clear: both;
	text-align: center;
}

.pagination ol {
	list-style: none;
	padding-bottom: 6px;
	position: absolute;
	display: block;
	width: 956px;
	left: 0;
	bottom: 0;
}

.pagination ol li {
	display: inline-block;
	padding-right: 3px;
	padding-left: 3px;
}

.pagination ol li a {
	font-size: 14px;
	padding: 4px 8px 6px;
	text-shadow: #000 0 1px 1px;
	display: block;
	margin-left: 1px;
	margin-right: 1px;
	line-height: 18px;
	margin: 1px;
}

.pagination ol li a.first, .pagination ol li a.last {
	font-size: 11px;
	position: relative;
	margin-right: 20px;
	margin-left: 20px;
}

.pagination ol li a:hover, .pagination ol li a.active {
	background-color: rgba(0,0,0,0.3);
	color: #fff;
	-webkit-border-radius: 10px;
	border-width: 1px;
	border-style: solid;
	border-bottom: 1px solid #6c5b4a;
	border-top: 1px solid #291e13;
	border-left: 1px solid #291e13;
	border-right: 1px solid #291e13;
	margin: 0;
	padding-bottom: 4px;
}

.pagination ol li a.first:hover, .pagination ol li a.last:hover, .pagination ol li a.first.active, .pagination ol li a.last.active {
	background-color: rgba(0,0,0,0.3);
	color: #fff;
	-webkit-border-radius: 10px;
	border-width: 1px;
	border-style: solid;
	border-bottom: 1px solid #6c5b4a;
	border-top: 1px solid #291e13;
	border-left: 1px solid #291e13;
	border-right: 1px solid #291e13;
	margin: 0 19px;
	padding-bottom: 2px;
	padding-top: 2px;
}

/* @end */