/*
Theme Name: Wasyl Design Postered
Theme URI: http://www.wasyl.com
Description: WordPress theme for Wasyl Design website. 
Version: 1.0
Author: Mark Wasyl
Author URI: http://www.wasyl.com
Tags: clean, basic, red, black, tan
*/


/*
--------------------------------------------------
Created:			May 01, 2010
Updated:			May 15, 2010
--------------------------------------------------
--------------------------------------------------
COLORS
Body Background:	#000
Body Text:			#736554
Headings:			#000
Links:				#E00
Links (hover):		#600

Tan (dark)			#736554
Tan (medium)		#C5B7A8
Tan (light)			#E7E0D7

Red (dark)			#600
Red (medium)		#E00
Red (light)			#NA

--------------------------------------------------
*/


@import "style/css/reset.css";
@import url("style/css/structure.css");
@import "style/css/layout.css";
@import "style/css/dropdown.css";
@import "style/css/nivo-slider.css";


/*
--------------------------------------------------
global
--------------------------------------------------
*/
	body {
		background: #000;
		color: #736554;
		font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
		font-size: 13px;
		}
	h1, h2, h3, h4, h5, h6 {
		color: #000;
		font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
		line-height: 1em;
		}
	h2 {font-size: 18px;}
	h4, h5, h6 {
		font-weight: bold;
		}
	p {
		line-height: 1.5em;
		margin-bottom: 20px;
		}
	a:link,
	a:visited {
		color: #E00;
		outline: none; /* fixes Firefox dotted outline */
		text-decoration: none;
		}
	a:hover,
	a:active {
		color: #600;
		outline: none; /* fixes Firefox dotted outline */
		text-decoration: none;
		}



/*
--------------------------------------------------
default styles
--------------------------------------------------
 */
	.clear {clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0}	
	b, strong {font-weight: bold;}
	em, i {font-style: italic;}
	.underline {text-decoration: underline;}
	.small {font-size: 9px;}
	.big {font-size: 14px;}
	
	.center {text-align: center;}
	.left {text-align: left;}
	.right {text-align: right;}
	
	.float-left {float: left;}
	.float-right {float: right;}
	.center {text-align: center;}
	img.float-left {float: left; margin: 0 30px 30px 0;}
	img.float-right {float: right; margin: 0 0 30px 30px;}


/*
--------------------------------------------------
extra styles
--------------------------------------------------
 */
	.margin-top {
		margin-top: 40px;
		}
/* button styles */
	p.readmore a,
	.reply a {
		background: #E7E0D7;
		border: 1px solid #C5B7A8;
		color: #E00;
		line-height: 150%;
		padding: 1px 8px;
		text-decoration: none;
		text-align: right;
		}
	p.readmore a:hover,
	.reply a:hover {
		background: #C5B7A8;
		color: #FFF;
		text-decoration: none;
		}
/* home: button styles: read more */
	p.readmore a {
		font-size: 11px;
		margin-bottom: 10px;
		}
	p.readmore a:hover {
		}


/*
--------------------------------------------------
wrappers, containers
--------------------------------------------------
*/
	#wrapper {
		background: #E7E0D7;
		margin: 0 auto;
		padding-bottom: 60px;
		}


/*
--------------------------------------------------
grid system (based on 12 columns)
col numbers add up to 12
--------------------------------------------------
*/
	.row {
		margin: 0 auto;
		width: 960px;
		}
	.span-12,
	.span-6,
	.span-4,
	.span-3 {
		display: inline;
		float: left;
		margin-left: 20px;
		margin-right: 20px
		}
	.span-12 {width: 920px;} /* 1 column */
	.span-6 {width: 440px;} /* 2 columns */
	.span-4 {width: 280px;} /* 3 columns */
	.span-3 {width: 200px;} /* 4 columns */


/*
--------------------------------------------------
header
--------------------------------------------------
*/
	#header {
		border-bottom: 10px solid #000;
		height: 80px;
		}
	h1#logo {
		}
	h1#logo a,
	h1#logo a:link,
	h1#logo a:visited,
	h1#logo a:hover,
	h1#logo a:active {
		background: url(style/images/header-logo.png) left 15px no-repeat;
		border: none;
		display: inline-block;
		float: left;
		height: 80px;
		text-indent: -9999px;
		width: 310px;
		}


/*
--------------------------------------------------
menu
--------------------------------------------------
*/
	#menu {
		border-right: 1px dotted #C5B7A8;
		float: right;
		font-size: 14px;
		list-style: none;
		text-align: left;
		}
	#menu ul li {
		border-left: 1px dotted #C5B7A8;
		display: inline;
		font-size: 20px;
		font-weight: bold;
		float: left;
		line-height: 14px;
		list-style: none;
		height: 45px;
		margin: 0 10px 0 0;
		padding: 35px 0 0 10px;
		width: 100px;
		}
	#menu ul li .small {
		font-size: 9px;
		font-weight: normal;
		}
	
	#menu ul li.current_page_item a { /* changes current WordPress menu item link state */
		color: #E00;
		}
	#menu ul li a {
		color: #736554;
		}
	#menu ul li a:hover {
		color: #E00;
		}


/*
--------------------------------------------------
footer
--------------------------------------------------
*/
	#footer {
		position: relative;
		padding: 20px 0;
		}
	#footer p {
		font-size: 10px;
		margin-bottom: 10px;
		}
	#footer-copyright {
		display: inline;
		float: left;
		margin-bottom: 20px;
		}
	#footer-menu {
		display: inline;
		float: right;
		margin-bottom: 20px;
		}
	#footer-menu ul {
		list-style: none;
		text-align: center;
		}
	#footer-menu li {
		border-right: 1px solid #736554;
		display: inline;
		font-size: 10px;
		margin-right: 2px;
		padding-right: 4px;
		}
	#footer_menu li.current_page_item a { /* changes current WordPress menu item link state */
		color: #000;
		}
/* footer-widgets */
	#footer-widgets {
		background: url(style/images/bg_footer-border.gif) repeat-x top #C5B7A8;
		padding: 40px 0;
		}
	#footer-widgets .box {
		display: inline;
		float: left;
		margin-right: 30px;
		width: 200px;
		}
	#footer-widgets .box.last {
		border-right: 0;
		margin-right: 0;
		padding-right: 0;
		}
	#footer-widgets h4,
	#footer-widgets h4 a {
		color: #000;
		font-family: 'Lobster', arial, serif;
		font-size: 16px;
		font-weight: normal;
		line-height: 17px;
		margin-bottom: 4px;
		}
	#footer-widgets p {
		line-height: 1.75em;
		margin-bottom: 1.75em;
		}
	#footer-widgets li {
		border-bottom: 1px dotted #000;
		font-size: 11px;
		line-height: 1.75em;
		margin-right: 4px;
			}
	#footer-widgets ul {
		margin-bottom: 10px;
		}
	#footer-widgets li a {
		display: block;
		color: #736554;
		padding: 0 4px;
		}
	#footer-widgets li a:hover {
		background: #E7E0D7;
		color: #600;
		}
	#footer-widgets li.facebook {
		background: url(style/images/menu_facebook.png) 2px 1px no-repeat;
		padding-left: 20px;
		}
	#footer-widgets li.linkedin {
		background: url(style/images/menu_linkedin.png) 2px 1px no-repeat;
		padding-left: 20px;
		}
	#footer-widgets li.twitter {
		background: url(style/images/menu_twitter.png) 2px 1px no-repeat;
		padding-left: 20px;
		}
	#footer-widgets li.rss {
		background: url(style/images/menu_rss.png) 2px 1px no-repeat;
		padding-left: 20px;
		}
/* footer-widgets twitter */
	#footer-widgets #tweet li,
	#footer-widgets #tweet p {
		font-size: 10px;
		line-height: 1.25em;
		margin-bottom: 5px;
		padding-bottom: 5px;
		}
	#footer-widgets #tweet li a {
		display: inline-block;
		}


/*
--------------------------------------------------
featured
--------------------------------------------------
*/
	#featured {
		background: #000;
		}
	#featured.home-slider {
		height: 350px;
		z-index: 100;
		}
	#featured.intro {
		margin-bottom: 40px;
		padding: 20px 0;
		}
	#featured.intro p {
		color: #E7E0D7;
		font-size: 13px;
		letter-spacing: .25em;
		margin-bottom: 20px;
		}
	#featured.intro h2 {
		color: #736554;
		font-size: 24px;
		line-height: 1em;
		margin-bottom: 10px;
		}
	#featured.intro img {
		display: inline;
		float: left;
		margin: 0px 30px 40px 0;
		}


/*
--------------------------------------------------
homepage page
--------------------------------------------------
*/
/* home message */
	#home-message {
		background: #E00;
		border-bottom: 10px solid #000;
		border-top: 10px solid #000;
		display: block;
		height: 90px;
		margin-bottom: 40px;
		overflow: hidden;
		}
	#home-message h3 {
		color: #000;
		font-size: 32px;
		font-weight: bold;
		letter-spacing: -1.5pt;
		line-height: 1em;
		padding: 10px 0 0 0px;
		text-align: center;
		}
	#home-message h3 span {
		color: #E7E0D7;
		font-family: 'Lobster', arial, serif;
		font-size: 36px;
		letter-spacing: .5pt;
		}
/* home teasers */
	#home-teasers {
		}
	#home-teasers .box {
		display: inline;
		float: left;
		margin-right: 20px;
		padding-right: 20px;
		width: 272px;
		}
	#home-teasers .box.last {
		border-right: 0;
		margin-right: 0;
		padding-right: 0;
		}
	#home-teasers h2 {
		border-bottom: 2px solid #C7B9AA;
		}
	#home-teasers h2,
	#home-teasers h2 a {
		color: #736554;
		font-size: 36px;
		font-weight: bold;
		height: 100px;
		line-height: 170px;
		margin-bottom: 10px;
		padding: 0 0 4px 40px;
		}
	h2.home-about {
		background: url(style/images/home-about.png) left top no-repeat;
		}
	h2.home-services {
		background: url(style/images/home-services.png) left top no-repeat;
		}
	h2.home-posts {
		background: url(style/images/home-posts.png) left top no-repeat;
		}
	#home-teasers h3 {
		font-size: 16px;
		font-weight: bold;
		line-height: 17px;
		margin-bottom: 4px;
		}
	#home-teasers p {
		line-height: 1.5em;
		margin-bottom: 1.5em;
		}
/* home columns Services List */
	#home-teasers li {
		border-bottom: 1px dotted #C5B7A8;
		font-size: 12px;
		line-height: 1.5em;
		margin-right: 4px;
		padding-right: 6px;
			}
	#home-teasers ul {
		margin-bottom: 10px;
		}



/*
--------------------------------------------------
portfolio page
--------------------------------------------------
*/
	#portfolio-content h2 {
		font-size: 24px;
		margin-bottom: 6px;
		}
/* portfolio menu */
	#portfolio-menu {
		display: block;
		float: right;
		margin: 0 0 20px 20px;
		padding-left: 10px;
		position: relative;
		width: 180px;
		}
	#portfolio-menu h3 { /* sidebar menu titles */
		border-bottom: 2px solid #000;
		color: #736554;
		font-size: 18px;
		margin-bottom: 0;
		padding-bottom: 6px;
		text-decoration: none;
		}
	#portfolio-menu ul {
		margin-bottom: 0;
		}
	#portfolio-menu li {
		border-bottom: 1px dotted #736554;
		color: #000;
		font-size: 14px;
		font-weight: normal;
		line-height: 12px;
		margin-bottom: 5px;
		padding-bottom: 5px;
		}
	#portfolio-menu a:link,
	#portfolio-menu a:visited {
		display: block;
		text-decoration: none;
		}
	#portfolio-menu a:hover,
	#portfolio-menu a:active {
		color: #600;
		text-decoration: none;
		}
/* portfolio projects */
	ul.projects {
		margin-bottom: 20px;
		}
	ul.projects li {
		background: #C5B7A8;
		border: 1px solid #C5B7A8;
		display: inline;
		float: left;
		margin: 0 7px 7px 0;
		position: relative;
		text-align: center;
		width: 300px;
		}
	ul.projects li.last {
		margin-right: 0;
		}
	ul.projects.tall li {
		height: 340px;
		overflow: hidden;
		}
	ul.projects.wired li {
		height: 290px;
		overflow: hidden;
		}
	ul.projects.short li {
		height: 202px;
		overflow: hidden;
		}
	ul.projects li h3,
	ul.projects_wide li h3 { /* project title */
		color: #000;
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 4px;
		padding: 0 20px;
		text-align: left;
		}
	ul.projects h4,
	ul.projects-wide li h4 { /* project title */
		color: #000;
		font-size: 10px;
		font-weight: bold;
		padding: 0 20px;
		text-align: left;
		text-transform: uppercase;
		}
	ul.projects p {
		font-size: 10px;
		line-height: 1.25em;
		margin-bottom: 10px;
		padding: 0 20px;
		text-align: left;
		}
	ul.projects img {
		border-bottom: 2px solid #C5B7A8;
		margin: 0 0 4px 0;
		width: 300px;
		}
	.more-link {
		background: url(style/images/arrow_red-small.gif) left no-repeat;
		display: block;
		line-height: 12px;
		float: right;
		margin: 0 0 60px 0;
		padding-left: 15px;
		}
/* portfolio projects wide*/
	ul.projects-wide li {
		background: url(style/images/bg_45.gif) repeat;
		border-bottom: 2px solid #C5B7A8;
		display: block;
		float: left;
		margin-bottom: 30px;
		width: 100%;
		}
	ul.projects-wide li h3 {
		padding-top: 20px;
		}
	
	ul.projects-wide li img {
		border-right: 2px solid #C5B7A8;
		float: left;
		margin-bottom: 2px;
		margin-right: 20px;
		padding-right: 0;
		width: 450px;
		}


/*
--------------------------------------------------
page
--------------------------------------------------
*/
	#page-content.narrow {
		display: inline;
		float: right;
		width: 640px;
		}
	#page-content.wide {
		}
	#page-content h3 {
		font-size: 18px;
		font-weight: bold;
		line-height: 1em;
		margin-bottom: 4px;
		}
	#page-content h4,
	#page-sidebar h4 {
		font-size: 14px;
		font-weight: bold;
		line-height: 1em;
		margin-bottom: 4px;
		}
	.page-testimonials {
		background: #EEE;
		margin-bottom: 30px;
		padding: 20px;
		width: 180px;
		}
	.page-image {
		margin-bottom: 30px;
		}
	.page-image img {
		margin-bottom: 10px;
		width: 220px;
		}
	.page-image p {
		color: #666;
		font-size: 10px;
		}
/* services page */
	#services .box {
		display: inline;
		float: left;
		margin-right: 37px;
		padding-right: 36px;
		width: 250px;
		}
	#services .box.last {
		border-right: 1px;
		margin-right: 0;
		padding-right: 0;
		}
	#services li {
		background: url(style/images/arrow_red-small.gif) left no-repeat;
		border-bottom: 1px dotted #C5B7A8;
		font-size: 12px;
		line-height: 1.75em;
		margin-bottom: 2px;
		padding: 2px 10px;
			}
	#services ul {
		margin-bottom: 10px;
		}


/*
--------------------------------------------------
blog
--------------------------------------------------
*/
	#blog-page {
		margin: 0 auto;
		}
	#blog-page h2 {
		color: #000;
		font-size: 26px;
		font-weight: bold;
		letter-spacing: -.5pt;
		margin-bottom: 10px;
		padding-bottom: 4px;
		}
	#blog-page #featured.intro h2 {
		color: #736554;
		font-size: 36px;
		font-weight: normal;
		line-height: 1em;
		margin-bottom: 10px;
		font-style: italic;
		}
	.post h2,
	.post h2 a,
	.post-single h2 {
		color: #000;
		font-weight: bold;
		}
	.post h2 a:hover {
		background: none;
		color: #E00;
		}
	
	#blog-page .post {
		background: #F7F0E7;
		border-bottom: 1px dashed #C5B7A8;
		margin-bottom: 0;
		padding-bottom: 10px;
		}
	#blog-page .post img.attachment-thumbnail {
		border: 2px solid #E7E0D7;
		float: right;
		height: 150px;
		margin: 5px 0 20px 20px;
		width: 150px;
		z-index: 999;
		}
	#blog-page .post .single img.attachment-thumbnail {
		border: none;
		float: none;
		height: 60px;
		margin: 0;
		margin-top: 10px;
		width: 60px;
		}
	#blog-page .post p {
		font-size: 12px;
		line-height: 2em;
		}
	.post {
		margin: 0 0 30px 0;
		overflow: hidden;
		}
	.post p {
		}
	.post-meta {
		display: block;
		margin-bottom: 16px;
		}
			#blog-page .post-meta p,
			.post-meta-single p {
				font-size: 9px;
				}
	.post-meta-box {
		color: #C5B7A8;
		}
	.post-meta-date-box {
		color: #C5B7A8;
		display: inline;
		float: left;
		margin: 0 40px 20px 0;
		text-align: left;
		width: 60px;
		}
		.post-meta-date-box .day {
			border-bottom: 1px solid #C5B7A8;
			font-size: 56px;
			font-weight: bold;
			line-height: 50px;
			margin-bottom: 5px;
			padding-bottom: 5px;
			}
		.post-meta-date-box .month {
			display: inline;
			font-size: 12px;
			line-height: 1em;
			padding-right: 2px;
			text-transform: uppercase;
			}
		.post-meta-date-box .year {
			display: inline;
			font-size: 12px;
			line-height: 1em;
			}
	.post-meta-box .by {
		}
	.post-content {
		display: inline;
		float: left;
		width: 550px
		}
	.post-content.blog {
		}
	.post-content.single {
		}
	.post-meta p {
		margin-bottom: 2px;
		}
	.post-single {
		margin: 20px 0;
		padding: 20px 0;
		}
	.post-image-wide img {
		display: inline;
		float: left;
		height: 200px;
		margin: 0 16px 16px 0;
		width: 100%;
		}
	.entry {
		}
	.entry-single {
		}
/* image styles */
	img.size-thumbnail {
		}
	img.size-medium {
		}
	img.size-large {
		}
	img.size-full {
		}
/* post thumbnail styles */
	img.attachment-thumbnail {
		}
	img.attachment-medium {
		height: 240px;
		width: 120px;
		}
	img.attachment-large {
		}
	img.attachment-full {
		}
/* post: navigation (WP) */
	.post-navigation {
		margin: 20px 0;
		}
	.nav-previous,
	.nav-next {
		display: inline;
		position: relative;
		}
	.nav-previous {
		padding-right: 6px;
		}
	.nav-next {
		padding-left: 6px;
		}



/*
--------------------------------------------------
COMMENTS
--------------------------------------------------
*/
	#commentform input {
		margin: 5px 5px 1px 0;
		width: 50%;
		}
	#commentform {
		margin: 5px 10px 0 0;
		}
	#commentform textarea {
		margin-bottom: 10px;
		width: 100%;
		}
	#commentform #submit {
		margin: 0 0 5px auto;
		float: right;
		width: 120px;
		}
	#commentform label {
		width: 200px;
		}
/* comments: comment list */
	h3#comments {
		margin-bottom: 20px;
		}
	.commentlist .comment-author {
		display: block;
		height: 60px;
		position: relative;
		}
	.commentlist .avatar {
		display: inline;
		float: left;
		height: 40px;
		margin: 0 15px 0 0;
		width: 40px;
		}
	.commentlist .comment-meta {
		font-size: 10px;
		margin-bottom: 10px;
		}
	.commentlist .fn {
		font-size: 18px;
		font-weight: bold;
		line-height: 1em;
		margin-top: 0;
		}
	.commentlist .says {
		}
	ol.commentlist {
		list-style: none;
		margin: 0 0 20px 0;
		padding-left: 0;
		}
	ol.commentlist li {
		position: relative;
		}
	.comment-body {
		-moz-border-radius: 20px;
		-moz-border-radius-topleft: 0;
		-webkit-border-radius: 20px;
		-webkit-border-top-left-radius: 0;
		border-radius: 20px;
		border-top-left-radius: 0;
		border: 1px solid #ABC;
		clear: both;
		font-size: 12px;
		margin: 20px 0 0 0;
		padding: 30px;
		}
	.comment-body p {
		}
	ul.children li {
		padding-left: 60px;
		}
	#respond h3 {
		margin: 10px 0;
		}
/* comments: buttons */
	.reply a {
		background: #ABC;
		color: #FFF;
		font-size: 14px;
		padding: 4px 10px;
		}
	.reply a:hover {
		}




/*
--------------------------------------------------
sidebars
--------------------------------------------------
*/
	#page-sidebar h2,
	#sidebar h2 {
		background: #C5B7A8;
		color: #000;
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 4px;
		padding: 2px 4px;
		}
/* page sidebar */
	#page-sidebar {
		display: block;
		float: right;
		font-size: 12px;
		margin: 0 0 40px 40px;
		padding-left: 40px;
		width: 200px;
		z-index: 2;
		}
	#page-sidebar p {
		margin-bottom: 10px;
		}
	#page-sidebar ul li,
	#page-sidebar ul li ul {
		margin-bottom: 30px;
		}
	#page-sidebar li ul li {
		background: url(style/images/arrow_red-small.gif) left no-repeat;
		border-bottom: 1px dotted #C5B7A8;
		color: #000;
		margin-bottom: 2px;
		padding: 2px 10px;
		}
	#page-sidebar a {
		}
/* blog sidebar */
	#sidebar {
		}
	#sidebar ul li {
		margin-bottom: 30px;
		}
	#sidebar li ul li {
		border-bottom: 1px dotted #C5B7A8;
		font-size: 11px;
		margin-bottom: 2px;
		padding-left: 8px;
		}
	#sidebar a {
		display: block;
		}
/* calendar widget */
	table#wp-calendar {
		font-size: 10px;
		width: 100%;
		}
	table#wp-calendar td,
	table#wp-calendar th {
		padding: 2px;
		text-align: left;
		}
	table#wp-calendar th {
		color: #000;
		font-weight: bold;
		}





/*
--------------------------------------------------
form styles
--------------------------------------------------
*/
	:focus {outline: 0;} /*removes focus in Safari and Chrome */
	input[type="text"],
	textarea {
		background-color: #FFF;
		border: 1px solid #C5B7A8;
		color: #333;
		line-height: 1em;
		margin-bottom: 2px;
		padding: 4px;
		vertical-align: top;
		}
	textarea:focus,
	input[type="text"]:focus {
		border: 1px dotted #F00;
		}
	select option {
		border-bottom: 1px dotted #CCC;
		padding: 0 10px;
		}
/* search */
	#searchform {
		}
	#searchform #s {
		background: url(style/images/icon_search.png) #FFF center right no-repeat;
		width: 190px; /* search text field */
		}
	#searchform #s {
		}
	
	#searchsubmit,
	label.screen-reader-text {
		display: none; /* hides Search For text */
		}
/* fieldset */
	fieldset {
		display: inline;
		line-height: 1em;
		text-align: left;
		}
	fieldset h4 {
		font-size: 10px;
		margin-bottom: 4px;
		text-transform: uppercase;
		}
	form fieldset p {
		margin-bottom: 4px;
		}
	fieldset h4,
	fieldset dropdown,
	fieldset legend,
	.form_button  {
		margin-left: 130px;
		}
	fieldset legend {
		font-size: 12px;
		font-weight: bold;
		margin-bottom: 10px;
		text-transform: uppercase;
		}
	fieldset label {
		color: #000;
		display: inline-block;
		font-size: 12px;
		padding-top: 4px;
		text-align: left;
		width: 130px;
		}
	fieldset input[type="text"],
	fieldset textarea {
		font-family: Helvetica, Verdana, Arial, sans-serif;
		font-size: 12px;
		margin: 0 0 6px 0;
		width:  400px;
		}
	fieldset input {
		height: 16px;
		}
	fieldset textarea {
		height: 100px;
		}
	.form_button {
		outline: none; /* fixes Firefox dotted outline */
		width: 80px;
		}