/*
Theme Name: City of Darkness
Theme URI: http://www.thisismyengine.com
Description: Custom theme for City of Darkness Revisited. 
Version: 3.5
Author: S.J.Taylor 
Author URI: www.elementdev.co.uk
*/

@import "css/reset.min.css";

/* ---------------------------------------------------------------- APPLICATION --- */
/*
colors:
ededed	background
999999	quote text
504c52	feature controls
bfbfbf	dotted line
7f7f7f	action items / field text
00a1ff	blue
e5e5e5	action input field
*/
@charset "UTF-8";
@font-face {
	font-family: 'rotis_reg';
	src: url('font/rotis_reg.eot');
	src: url('font/rotis_reg.eot?#iefix') format('embedded-opentype'),  url('font/rotis_reg.woff') format('woff'),  url('font/rotis_reg.ttf') format('truetype'),  url('font/rotis_reg.svg#rotis_reg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'rotis_bold';
	src: url('font/rotis_bold.eot');
	src: url('font/rotis_bold.eot?#iefix') format('embedded-opentype'),  url('font/rotis_bold.woff') format('woff'),  url('font/rotis_bold.ttf') format('truetype'),  url('font/rotis_bold.svg#rotis_bold') format('svg');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'rotis_extra';
	src: url('font/rotis_extra.eot');
	src: url('font/rotis_extra.eot?#iefix') format('embedded-opentype'),  url('font/rotis_extra.woff') format('woff'),  url('font/rotis_extra.ttf') format('truetype'),  url('font/rotis_extra.svg#rotis_extra') format('svg');
	font-weight: bold;
	font-style: normal;
}
html, body {
	font-family: 'rotis_reg', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	background-color: #ededed;
	color: #504c52;
}
hr {
	clear: both;
	display: block;
	margin: 10px 0px;
	border: none;
	border-bottom: dotted 1px #bfbfbf;
}
hr.special {
	margin-top: 146px;	
}
hr.hide {
	border: none;
	height: 1px;
}
/* --------------------------------------------------------------------- HEADER --- */
.header {
	z-index: 3;
	position: fixed;
	top: 0px;
	width: 100%;
	background-image: url(gfx/header.png);
	color: #ffffff;
}
.header .area {
	position: relative;
	margin: 0px auto;
	width: 952px;
	height: 125px;
}
.header h1 {
	position: absolute;
	top: 10px;
	left: 0px;
	font-size: 31px;
	color: #ffffff;
}
.header h1 a {
	color: #ffffff;
	text-decoration: none;
}
.header h1 .subtitle {
	color: #a9a9a9;
}
.header .area .nav .menu {
	position: absolute;
	bottom: 0px;
	left: 0px;
}
.header .area .nav .menu-header ul li {
	display: block;
	float: left;
	margin-top: 1px;
	margin-left: 20px;
	width: 88px;
	height: 24px;
	line-height: 24px;
	font-size: 12px;
	font-family: 'rotis_bold', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: #ffffff;
}
.menu-header ul li a {
	line-height: 24px;
	font-size: 12px;
	font-family: 'rotis_bold', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	color: #ffffff;
	width: inherit;
	display: inline-block;
	border-top: solid 1px transparent;
}
.header .area .nav .menu-header .menu li:first-child {
	margin-left: 0px;
}
.header .area .nav .menu-header ul li a:hover, 
.header .area .nav .menu-header ul li a.select,
.current-menu-item a {
	margin-top: 0px;
	border-top: solid 1px #ffffff !important;
	cursor: pointer;
}
/* ----------------------------------------------------------------------- SITE --- */
.site {
	z-index: 1;
	display: block;
	margin-top: 140px;
}
/* -------------------------------------------------------------------- FEATURE --- */
.feature {
	position: relative;
	margin: 142px auto 0px auto;
	width: 952px;
	height: 513px;
}
.feature .area {
	border: 4px solid #ffffff;
	height: 476px;
	background-color: #ffffff;
}
.feature .area .image {
	position: absolute;
	top: 4px;
	left: 4px;
	display: none;
	width: 944px;
	height: 476px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.feature .area .image:hover {
	cursor: pointer;
}
.feature .area .image.display {
	z-index: 2;
	display: block;
}
.feature .area .image.next {
	z-index: 1;
	display: block;
	opacity: 0;
}
.feature .mslide-layer {
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
	width: 944px;
	height: 476px;
	background-image: url(gfx/overlay.png);
	line-height: 476px;
	text-align: center;
	text-transform: uppercase;
	font-size: 21px;
	color: #ffffff;
}
.mslide:hover .mslide-layer {
	display: block;
}
.feature .label {
	position: relative;
	display: inline-block;
	padding-right: 20px;
}
.feature .label:after {
	content: '';
	position: absolute;
	top: 232px;
	right: 0px;
	display: block;
	width: 14px;
	height: 13px;
	background-image: url(gfx/arrow.png);
}
.feature .control {
	position: absolute;
	bottom: 0px;
	left: 0px;
	display: block;
	width: 125px;
	height: 17px;
}
.feature .control .left, .feature .control .right {
	position: absolute;
	top: 0px;
	width: 16px;
	height: 16px;
	background-position: 0px 0px;
}
.feature .control .left:hover, .feature .control .right:hover {
	background-position: 0px -16px;
	cursor: pointer;
}
.feature .control .left {
	background-image: url(gfx/feature_left.png);
	left: 0px;
}
.feature .control .right {
	background-image: url(gfx/feature_right.png);
	right: 0px;
}
.feature .position {
	position: absolute;
	bottom: 0px;
	right: 0px;
	display: block;
	font-size: 21px;
	color: #504c52;
}
.meteor-clip {
	overflow: hidden;
}
.meteor-nav .next a {
    left: 67px !important;
}


/* ------------------------------------------------------------------ STATEMENT --- */
.statement {
	margin: 12px auto 17px auto;
	width: 736px;
	text-align: center;
	font-size: 31px;
	color: #9c9a9d;
}
/* ------------------------------------------------------------------ CONTAINER --- */
.container {
	margin: 8px auto 0px auto;
	width: 952px;
}
/* -------------------------------------------------------------------- ACTIONS --- */
.actions {
	float: right;
	width: 196px;
	margin-bottom: 20px;
}
.actions .item {
	position: relative;
	display: block;
	margin-bottom: 16px;
	padding: 8px;
	font-family: 'rotis_bold', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 21px;
	text-decoration: none;
	background-color: #dedbd9;
	color: #808080;
}
.actions a.item:hover {
	cursor: pointer;
}
.actions .item:after {
	content: '';
	position: absolute;
	bottom: -16px;
	left: 0px;
	display: block;
	width: 16px;
	height: 16px;
	background-image: url(gfx/action.png);
	background-position: 0px -16px;
}
.actions .item:nth-child(2n):after {
	right: 0px;
	left: auto;
	background-position: 0px 0px;
}
.actions .item .image {
	width: 172px;
	overflow: hidden;
	height: 176px;
	border: 4px solid #ffffff;
	background-color: #ffffff;
}
.actions .item .image img {
/*	height:176px;
	width: 172px;*/
}
.actions .item h3 {
	margin-top: 5px;
	color: #00a1ff;
}
.actions .item p {
}
.actions .item input[type="text"] {
	display: block;
	outline: none;
	margin: 10px 0px 5px 0px;
	padding-left: 4px;
	border: none;
	height: 20px;
	line-height: 20px;
	font-family: 'rotis_reg', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-color: #808080;
	color: #ededed;
	width: 146px;
}
.actions .item .button {
	margin-bottom: 2px;
	display: block;
	outline: none;
	border: none;
	padding-left: 4px;
	width: 110px;
	height: 20px;
	font-family: 'rotis_reg', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
	vertical-align: top;
	text-align: left;
	background-image: url(gfx/button.png);
	background-color: transparent;
	background-repeat: no-repeat;
	color: #ededed;
}
.actions .item.book .image {
	background-image: url(images/page_book_thumbnail.jpg);
}
.actions .item.print .image {
	background-image: url(images/page_print_thumbnail.jpg);
}
/* --------------------------------------------------------------------- RECENT --- */
.recent {
	overflow: auto;
	width: 648px;
}
.recent h2 {
	margin-bottom: 10px;
	font-family: 'rotis_reg', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 21px;
	text-transform: uppercase;
}
.recent .item {
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	border-bottom: dotted 1px #bfbfbf;
	padding-bottom: 5px;
	width: 196px;
	min-height: 305px;
}
.recent .item .image {
	position: relative;
	margin-bottom: 10px;
	border: 4px solid #ffffff;
	height: 198px;
	width: 188px;
	overflow: hidden;
	background-color: #ffffff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.recent .item .image img {
}
.recent .item .image:hover {
	cursor: pointer;
}
.recent .item .image .layer {
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
	width: 188px;
	height: 200px;
	background-image: url(gfx/overlay.png);
	line-height: 200px;
	text-align: center;
	font-size: 21px;
	color: #ffffff;
}
.recent .item .image:hover .layer {
	display: block;
}
.recent .item .image .layer .label {
	position: relative;
	display: inline-block;
	padding-right: 20px;
	top: 0;
}
.recent .item .image .layer .label:after {
	content: '';
	position: absolute;
	top: 93px;
	right: 0px;
	display: block;
	width: 14px;
	height: 13px;
	background-image: url(gfx/arrow.png);
}


/*
.label {
	position: relative;
	display: inline-block;
	padding-right: 20px;
}
.label:after {
	content: '';
	position: absolute;
	top: 231px;
	right: 0px;
	display: block;
	width: 14px;
	height: 13px;
	background-image: url(gfx/arrow.png);
}
*/

.recent .item .category {
	margin-bottom: 5px;
	font-family: 'rotis_bold', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
}
.recent .item h3 {
	margin-bottom: 10px;
	font-size: 21px;
	text-transform: uppercase;
}
.recent .item li a {
	margin-bottom: 5px;
	font-family: 'rotis_bold', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
	text-decoration: none;
	color: #504c52;
}
.post-categories a:hover {
	color: #00a1ff !important;
}
/* ----------------------------------------------------------------------- LIST --- */
.list {
	float: left;
	margin-right: 20px;
	border-top: dotted 1px #bfbfbf;
	width: 192px;
}
.list h2 {
	margin-top: 10px;
	margin-bottom: 30px;
	font-family: 'rotis_reg', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	color: #7f7f7f;
}
.list a {
	display: block;
	padding-top: 5px;
	padding-bottom: 20px;
	border-top: dotted 1px #bfbfbf;
	text-decoration: none;
	color: #7f7f7f;
}
.list a:hover {
	color: #00a1ff;
	cursor: pointer;
}
/* -------------------------------------------------------------------- CONTENT --- */
.content {
	float: left;
	width: 520px;
}
.content .item {
	position: relative;
}
.content .media {
	border: 4px solid #ffffff;
	background-color: #ffffff;
}



.media p {
	margin: 0!important;
}
.content .media img {
	width: 100%;
	height: 100%;
	margin-bottom: -5px;
}

.content .media iframe {
		margin-bottom: -5px;
}

.content .jump {
	display: block;
	position: absolute;
	top: -135px;
}
.content h2 {
	padding: 18px 0px;
	border-bottom: dotted 1px #bfbfbf;
	font-family: 'rotis_bold', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 21px;
}

.content img {
	max-width: 100%;
	height: auto;
}

.content p {
	margin-top: 10px;
	font-size: 16px;
	line-height: 18px;
}
.content .bar {
	overflow: auto;
	margin-top: 20px;
	margin-bottom: 30px;
	border-top: dotted 1px #bfbfbf;
	border-bottom: dotted 1px #bfbfbf;
	height: 28px;
	line-height: 28px;
}
.content .bar .share {
	margin-top: 4px;
}
.content .bar h3 {
	font-family: 'rotis_extra', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px;
	line-height: 19px;
	text-transform: uppercase;
}
/* ---------------------------------------------------------------------- OFFER --- */
.offer {
	
	width: 648px;
}
.offer h2 {
	margin-bottom: 10px;
	font-family: 'rotis_reg', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 21px;
	text-transform: uppercase;
}
.offer .image {
	margin: 10px 0px;
	border: 4px solid #ffffff;
	background-color: #ffffff;
}
.offer .paypal {
}
/* ---------------------------------------------------------------------- Privacy --- */
.privacy {
	width: 100%;
	max-width: 648px;
	margin-bottom: 40px;
}
.privacy h2 {
	margin-top: 20px;
	margin-bottom: 10px;
	font-family: 'rotis_reg', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 21px;
	text-transform: uppercase;
}
/* --------------------------------------------------------------------- BUTTON --- */
.button {
	display: block;
	outline: none;
	border: none;
	padding-left: 4px;
	width: 110px;
	height: 20px;
	font-family: 'rotis_reg', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 18px;
	text-align: left;
	background-image: url(gfx/button.png);
	background-color: transparent;
	background-repeat: no-repeat;
	color: #ffffff;
}
.actions .item .button {
	line-height: 14px;
	vertical-align: top; 
	padding-bottom: 2px;
}
a.button {
	line-height: 20px;
	text-decoration: none;
}
.button:hover {
	cursor: pointer;
}
/* ---------------------------------------------------------------------- SHARE --- */
.share {
	padding: 0px;
}
.share .twitter, .share .facebook, .share .google {
	float: right;
	display: block;
	margin-left: 5px;
	width: 20px;
	height: 20px;
	background-position: 0px 0px;
}
.share .twitter {
	background-image: url(gfx/twitter.png);
}
.share .facebook {
	background-image: url(gfx/facebook.png);
}
.share .google {
	background-image: url(gfx/google.png);
}
.share .twitter:hover, .share .facebook:hover, .share .google:hover {
	background-position: 0px -20px;
	cursor: pointer;
}
/* --------------------------------------------------------------------- FOOTER --- */
.footer {
	overflow: auto;
	margin: 0px auto 30px auto;
	width: 952px;
}
.footer .search {
	float: left;
}
.footer .search input {
	display: block;
	outline: none;
	border: none;
	padding-left: 4px;
	height: 20px;
	width: 195px;
	float: left;
	font-family: 'rotis_reg', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-transform: uppercase;
	line-height: 20px;
	background-color: #7F7F7F;
	color: white;
	position: relative;
	top: 1px;
}
#searchsubmit {
	width: 20px;
	height: 22px;
	background-image: url(gfx/searchSubmit.png);
	cursor: pointer;
	left: -10px;
	top: 1px;
	position: relative;
}
.footer .email, .footer .share {
	float: right;
}
.footer .email {
	border-bottom: dotted 1px #bfbfbf;
	padding-top: 4px;
	width: 108px;
	height: 15px;
	line-height: 15px;
	font-size: 12px;
	text-decoration: none;
	color: #7f7f7f;
}
.footer .email:hover {
	color: #00a1ff;
	cursor: pointer;
}
.footer .share {
	width: 90px;
}
/* --------------------------------------------------------------------- SEARCH --- */
.search {
	text-align: center;
	margin-bottom: 30px;
}
.search .title, .search .input {
	font-family: 'rotis_reg', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 30px;
	color: #504c52;
}
.search .title {
	color: #a9a9a9;
}
.search input {
	display: inline-block;
	outline: none;
	border: none;
	padding-left: 4px;
	height: 20px;
	width: 192px;
	font-family: 'rotis_reg', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-transform: uppercase;
	line-height: 20px;
	background-color: #7f7f7f;
	background-image: url(../gfx/button.png);
	color: #ffffff;
}
/* --------------------------------------------------------------------- RESULT --- */
.result {
	position: relative;
	overflow: auto;
	width: 432px;
	min-height: 40px;
	margin-top: 32px;
	padding-left: 216px;
}
.post-categories a {
	color: #a9a9a9;
	text-decoration: none;
}
.result h4 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 196px;
	border-top: dotted 1px #bfbfbf;
	padding-top: 10px;
	font-family: 'rotis_reg', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-transform: uppercase;
}
.result h2 {
	margin: 0 0 0 70px;
	text-transform: uppercase;
}
.result .item {
	position: relative;
	float: left;
	min-height: 90px;
	margin-right: 20px;
	margin-bottom: 20px;
	border-bottom: dotted 1px #bfbfbf;
	padding-bottom: 5px;
	width: 196px;
}
.result .item .image {
	position: relative;
	margin-bottom: 10px;
	width: 188px;
	overflow: hidden;
	background-color: #ffffff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
/*.result .item .image img {
	max-width:190px;
	
}*/

.result .item .image:hover {
	cursor: pointer;
}
.result .item .image .mslide-layer {
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
	width: 188px;
	height: 200px;
	background-image: url(gfx/overlay.png);
	line-height: 200px;
	text-align: center;
	font-size: 21px;
	color: #ffffff;
}
.result .item .image:hover .mslide-layer {
	display: block;
}
.result .item .image .mslide-layer .label {
	position: relative;
	display: inline-block;
	padding-right: 20px;
	top: 0;
}
.result .item .image .mslide-layer .label:after {
	content: '';
	position: absolute;
	top: 93px;
	right: 0px;
	display: block;
	width: 14px;
	height: 13px;
	background-image: url(gfx/arrow.png);
}
.result .item .category {
	margin-bottom: 5px;
	font-family: 'rotis_bold', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
	text-align: left;
	text-decoration: none;
}
.result .item h3 {
	margin-bottom: 10px;
	font-size: 21px;
	text-transform: uppercase;
	text-align: left;
	text-decoration: none;
}
/* ----------------------------------------------------------------------- BODY --- */
.content p {
	line-height: 20px;	
}
/* ---------------------------------------------------------------------- ERROR --- */
.error {
	text-align: center;
	margin-bottom: 30px;
}
.error .title, .error .message {
	font-family: 'rotis_reg', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 30px;
}
.error .title {
	color: #a9a9a9;
}