@import "reset.css";
@import "fonts.css";

body {
	background:		#F3F2E8;
	border-bottom:	5px solid #292929;
	color:			#292929;
	font-family:	'MyriadProRegular', Helvetica, Arial, sans-serif;
}

h1,h2,h3,h4,h5 {
	font-family:		'Swiss921Regular';
	font-weight:		normal;
}

p {
	font-size:		80%;
	line-height:	190%;
	margin:			0 0 20px;
}

a {
	color:				#292929;
	text-decoration:	none;
}

p a {
	font-weight:		bold;
}

a:hover {
	color:				#ff7300;
	border-bottom:		1px solid #ff7300;
}

a:active {
	color:				#ff7300;
	border-bottom:		3px solid #ff7300;
}

#pageWrapper {
	margin: 		0 auto;
	
}

.container,
.wideContainer {
	margin: 		0 auto;
	max-width:		980px;
	overflow:		visible;
	position:		relative;
	width:			100%;
}

.wideContainer {
	max-width: 		1010px;
}

/* Header */
header {
	background:		#F3F2E8 url("images/diagonal_bg.png");
	border-top:		5px solid #292929;
	overflow:		hidden;
	padding:		50px 0 0 0;
	position:		relative;
}

header h1 {
	float:			left;
	font-size:		225%;
	letter-spacing:	-1px;
	margin:			0 0 40px 19px;
	text-shadow: 1px 1px 0px #fff;
	text-transform:	uppercase;
}

header h1 a, 
header h1 a:hover,
header h1 a:visited,
header h1 a:active{
	border: none;
	color: #292929;
	text-decoration: none;
}

p.tagline {
	float:			right;
	font:			normal 80% 'MyriadProRegular';
	margin:			14px 14px 0 0;
	text-transform:	uppercase;
}


/* Navigation */
nav {
	clear:			both;
	text-align:		left;
}

nav li {
	display:		block;
	float: 			left;
	width: 			20%;
}

nav li a {
	background:			#e2e1d4;
	border-left:		1px solid #b4b3a9;
	border-right:		1px solid #b4b3a9;
	border-top:			2px solid #292929;
	color:				#292929;
	display:			block;
	font-family:		'MyriadProRegular';
	font-size:			80%;
	margin:				0 0 0 2px;
	padding:			10px 0 10px 19px;
	text-decoration:	none;
	text-transform:		uppercase;
}

nav li:first-child a{
	margin-left:		0;
}

nav li a:hover {
	background:			#e2e1d4 url("images/btn_gradient.png") bottom left repeat-x;
	border-bottom:		none;
	color:				#292929;
}

nav li a:active,
nav li.current_page_item a {
	border-bottom:		none;
	border-top:			2px solid #ff7e00;
}

nav li.current_page_item a:hover {
	background-image:	none;
}

/*feature */
#feature {
	background:			#292929;
	border-bottom:		1px solid #b4b3a9;
	border-top:		1px solid #b4b3a9;
	clear: 				both;
	overflow:			hidden;
	padding:			0 0 35px;
}

#feature article {
	background:		#f3f2e8; /*url("images/feature_bg.png") no-repeat;*/
	border:			1px solid #b4b3a9;
	float: 			left;
	height:			192px;
	margin-left:	14px;
	padding:		20px;
	position:		relative;
	width:			192px;
}

#feature-container {
	overflow:		hidden;
}

#feature-container article:first-child {
	margin-left:	0;
}

article dl {
	font:			normal 80% 'MyriadProRegular';
	width:			192px;
}

article dt,
article dd {
	background:		#292929;
	color:			#FFF;
	display:		none;
	margin:      	0 1px;
	position:		relative;
	width:			192px;
	z-index:		1;
}

article dt {
	font-weight:	bold;
	margin-top:		1px;
	padding:		5px 5px 2px 5px;
	width:			182px;
	z-index:		10;
}

article:hover dt,
article:hover dd {
	display:		block;
}

article dd.roles {
	border-bottom:	2px solid #ff7e00;
	font-size:		90%;
	padding: 		0 5px 5px;
	width:			182px;
	z-index:		10;
}

article dd.image {
	border:			1px solid #292929;
	display:		block;
	height:			192px;
	margin:			0;
	position:		absolute;
	top:			20px;
	z-index:		0;
}

article dd.image img {
	clip: 			rect(0px 384px 192px 170px);
	position: 		absolute;
	right:			0;
}

#feature h2 {
	color:			#f3f2e8;
	font-size:		225%;
	margin:			25px 0 20px 21px;
	text-shadow:	1px 1px 0 #000000;
}

#pageContent {
	background:		#F3F2E8;
	clear:			both;
	overflow:		hidden;
	padding:		35px 0 45px;
	position:		relative;
}

.home #pageContent {
	background:		url("images/diagonal_bg.png");
}

.shadowTopLeft, 
.shadowTopRight,
.shadowBottomLeft, 
.shadowBottomRight {
	height:			14px;
	position:		absolute;
	width:			50%;
	z-index:		1;
}

.shadowTopLeft {
	background:		url("images/shadowTopLeft.png") top left no-repeat;	
	left:			0;
	top:			0;
}

.shadowTopRight {
	background:		url("images/shadowTopRight.png") top right no-repeat;
	right:			0;
	top:			0;
}

.shadowBottomLeft {
	background:		url("images/shadowBottomLeft.png") top left no-repeat;
	bottom:			0;	
	left:			0;
}

.shadowBottomRight {
	background:		url("images/shadowBottomRight.png") top right no-repeat;
	bottom:			0;
	right:			0;
}

.blockWrapper {
	float:			left;
	overflow:		hidden;
	padding: 		0 14px 15px;
	position:		relative;
	width:			47%;
}

.blockShadowRight,
.blockShadowLeft {
	bottom:			0;
	height:			156px;
	position:		absolute;
	width:			100%;
	z-index:		0;
}

.blockShadowLeft {
	background:		url("images/boxshadow_left.png") top left no-repeat;
	left:			10px;
}

.blockShadowRight {
	background:		url("images/boxshadow_right.png") top right no-repeat;
	right:			10px;
}

section.block {
	background: 	#f3f2e8;
	border:			1px solid #B4B3A9;
	border-top:		10px solid #ff7e00;
	padding:		20px;
	position:		relative;
}

section.block h2 {
	margin:			0 0 20px 0;
}

section.block ul {
	font-size:		80%;
	margin:			0 0 20px;
}

section.block li {
	margin:			0 0 5px;
}

.post {
	clear:			both;
	margin:			40px auto;
	overflow:		visible;
	padding:		0 18px;
}

.postpage .post{
	min-height:		210px;
}

div:first-child .post {
	margin-top:		0;
}

h1.entry-title {
	font-size:		150%;
	padding:		0 18px;
}

#titlebox-content h1,
h1.entry-title,
h2.entry-title {
	margin:			0 0 20px;
}

#titlebox-content.special-post h1 {
	margin:			20px 0 0;
}

.entry-meta {
	display:		none;
}

.roles {
	line-height:	100%;
	padding:		0 18px;
}

img.thumbnail-class {
	border:			5px solid #292929;
	clear:			both;
	float:			left;
	margin:			0 20px 0 0;
}

img.large-image-class {
	border:			5px solid #292929;
	margin:			0 0 0 18px;
}

p.no-border-image a:hover{
	border:			none;
}

.entry-utility,
.post ul,
.post ol {
	font-size:		80%;
	line-height:	190%;
}

#comments {
	padding:		0 18px;
}

#nav-below {
	margin:			0 auto 35px;
	max-width:		980px;
	padding:		0 18px;
}

footer {
	background:		#E2E1D4;
	border-top:		1px solid #b4b3a9;
	font-family:	'MyriadProRegular';
	font-size:		80%;
	overflow:		hidden;
	padding: 		20px 0 20px 15px;
}

footer .container {
	max-width:		965px;
}

footer p {
	float:			left;
}

footer p.contact {
	float:			right;
}

#authorbox {
	background: 	#292929 url("images/authorbox_gradient.png") bottom right no-repeat;
	border:			2px solid #000;
	color:			#F3F2E8;
	margin:			40px 0;
	overflow:		hidden;
	padding:		25px;
}

#authorbox p {
	line-height:	125%;
	margin:			6px 0 0 117px;
}

#authorbox a {
	color:			#F3F2E8;
}

#authorbox #avatar {
	border:			5px solid #F3F2E8;
	float:			left;
	margin:			0 25px 0 0;
	overflow:		hidden;
}

#authorbox img.avatar {
	border: 		1px solid #292929;
	float:			left;
}

img.screenshot {
	border:			5px solid #B4B3A9;
}

div.wp-caption {
	width: 			auto !important;
}

div.wp-caption p {
	font-style:		italic;
}

#comments-list ol {
	list-style:		none;
	padding:		0;
}

#comments-list ol li {
	background:		#E2E1D4;
	border-bottom:	1px solid #B4B3A9;
	overflow:		hidden;
	padding:		25px;
}

#comments-list ol {
	border:			1px solid #B4B3A9;
	border-bottom:	none;
}

#comments-list .avatar {
	border:			6px solid #B4B3A9;
	float:			left;
	margin:			0 25px 0 0;
}

.comment-content p,
.comment-meta {
	font-size:		80%;
	line-height:	125%;
	margin:			6px 0 6px 117px;
}

.vcard > span a {
	font-family:	'Swiss921Regular';
	font-weight:	normal;
}

@media only screen and (min-device-width: 768px) and (orientation: portrait),
screen and (max-width: 994px) {
	#pageWrapper {
		min-width:		0;
	}
	
	#feature {
		text-align:		center;
	}
	
	#feature-container {
		margin:			0 auto;
		text-align:		left;
		width:			500px;
	}
	
	#feature h2 {
		margin-left:	0;
	}
	
	#feature article,
	#feature-container article:first-child {
		margin:			0 auto;
	}
	
	article#article2,
	article#article4 {
		float:			right;
	}
	
	#feature-container article#article1,
	article#article2 {
		margin-bottom:	30px;
	}
	
	.blockWrapper {
		float:			none;
		margin:			0 auto;
		width:			500px;
	}
	
	footer {
		text-align:		center;
	}
	
	footer p,
	footer p.contact {
		float:			none;
		line-height:	100%;
		margin:			0;
	}
}

@media screen and (max-width: 555px),
screen and (max-device-width: 480px) {
	
	#pageWrapper {
		min-width:		0;
	}
	
	header .container {
		text-align:		center;
	}
	
	header h1 {
		margin:			0 auto;
		width:			100%;
	}
	
	p.tagline {
		float:			none;
		margin:			0 auto 35px;
	}
	
	nav li {
		text-align:		center;
	}
	
	nav li a {
		padding-left:	0;
	}
	
	#feature {
		text-align:		center;
	}
	
	#feature-container {
		width:			auto;
	}
	
	#feature article {
		width:			322px;
	}
	
	#feature article,
	#feature-container article#article1{
		float:			none;
		margin:			0 auto 30px;
	}
	
	#feature article:last-child {
		margin-bottom:	0;
	}
	
	article dt,
	article dd.roles {
		width:			310px;
	}
	
	article dd.image {
		width:			320px;
	}
	
	article dd.image img {
		clip:			rect(0px 320px 192px 0px);
		left:			0;
	}
	
	.blockWrapper {
		float:			none;
		width:			364px;
	}
	
	img.thumbnail-class {
		float:			none;
	}
	
	img.large-image-class {
		border-left:	none;
		border-right:	none;
		margin:			0 auto;
		width:			100%;
	}
}

@media screen and (max-width: 320px) {
	#feature article {
		width:			194px;
	}
	
	article dt,
	article dd.roles {
		width:			182px;
	}
	
	article dd.image {
		width:			192px;
	}
	
	article dd.image img {
		clip:			rect(0px 192px 192px 0px);
		left:			0;
	}
	
	.blockWrapper {
		float:			none;
		width:			236px;
	}
	
	img.thumbnail-class {
		float:			none;
		width:			96%;
	}
	
	img.large-image-class {
		border-left:	none;
		border-right:	none;
		margin:			0 auto;
		width:			100%;
	}
}