/*
Theme Name: intriplicate
Theme URI: http://intriplicate.com.au
Description: in.triplicate Studios WP main theme. 
Version: 1.0
Author: Fernando Perez
Author URI: http://www.asevatu.com
Tags: illustrations, clean, professional, intriplicate
*/

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";

@font-face{
	font-family: MyriadPro;
	src: url('fonts/MyriadPro-Regular.otf');
}

@font-face{
	font-family: HelveticaNeue;
	src: url('fonts/HelveticaNeue_0.ttf');
	
}

body {
	background-image: url(images/bkg.jpg);
	background-attachment: fixed;
		width:  1020px;
	margin: 0 auto 0 auto;
	font-family: Helvetica, Arial, sans-serif;

}

#page{
	background: url(images/shadow.png) repeat-y 0 0 transparent;
}

/**
* Elements
************************************************/

/* Hyperlinks */
a:link { color: #ffad00;}
a:visited { color: #ff9000;}
a:hover { text-decoration:none;}
a:active {}

/* Headers */
h1 { font-weight: normal;}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

/* Text elements */
strong {}
em {}
cite {}
abbr {}
acronym {}
sup {}
sub {}
address {}
ins {}
dfn {}
del {}

/* Paragraphs */
p {}

/* Unordered lists */
ul {}
	ul li {}

/* Ordered lists */
ol {}
	ol li {}

/* Defition lists */
dl {}
	dt {}
	dd {}

/* Blockquotes */
blockquote {}
	blockquote blockquote {}
	blockquote em {}

/* Object */
object {}

/* Code */
code {}
pre {}
pre code {}

/* Tables */
table {}
	caption {}
	tr {}
	th {}
	td {}

/* Forms */
form {}
	textarea {}
	input {}
	label {}
	option {}

/* Drop caps */
.drop-cap {	}

/* Notes */
.note {}

/* Warnings/Alerts */
.warning, .alert {}

/* Errors */
.error {}

/* Downloads */
.download {}

/* Alignment */
.left, .alignleft {}
.right, .alignright {}
.center, .aligncenter {}
.block, .alignnone {}
.clear {}

/**
* Images
************************************************/

/* Normal images */
img {}
a img {}

/* WP Smilies */
img.wp-smiley {}

/* Thumbnails */
.thumbnail {}

/* WP Captions [caption] */
.wp-caption {}
	.wp-caption img {}
	.wp-caption p {}

/* Gallery [gallery] */
.gallery {}
	.gallery img {}

/* Avatars */
.avatar {}


/**
* Header
************************************************/

/* Contains entire header */
#header-container { background-color: black;
					background-image: url("images/glow_top.jpg");
					background-position: 20px 103px;
					background-repeat: no-repeat; position:relative;}

	/* Contains site title and tagline */
	#header { font-family: MyriadPro, Helvetica, Arial, sans-serif;}

		/* Site title */
		#site-title { padding:100px 0 30px 50px; }
			#site-title a { background-image: url("images/iii.png");
							background-repeat: no-repeat;
							background-position:top center;
							padding-top: 65px;
							font-size: 50px;
							letter-spacing:-2px;
							color:  #FFF;
							text-decoration: none;
							}
				#site-title a span { height: 50px; margin-top:50px; color:#00aeef;}

		/* Site description/tagline */
		#site-description { display:none;}
		
		
		/* header social */
		
		#header-social{
			position: absolute;
			top: 30px;
			right: 250px;
		}
		
		#header-social p{
			float: left;
			color: #4b4f51;
			margin-right: 20px;
			font-size: 18px;
		}
		
		#header-social p span{
			font-size:  14px;
			color:  #242424;
		}
		
		#header-social .twitter {
		background: url(images/twitter.gif) no-repeat center top transparent;
		cursor: pointer;
		display: block;
		height: 18px;
		width:  80px;
		position: relative;
		float: left;
		padding: 0 5px;
		margin-top: 2px;
		
		}
		
		#header-social .twitter span.hover{
			
			background:  url(images/twitter.gif) no-repeat center bottom transparent;
			width: 80px;
			height:18px;
			position: absolute;
		}
		
		#header-social .email-btn{
			background: url(images/email.gif) no-repeat center top transparent;
			cursor: pointer;
			display: block;
			width: 24px;
			height: 16px;
			position: relative;
			float: left;
			padding:0 15px;
			margin-top: 3px;
		}
		
		#header-social .email-btn span.hover{
			
			background: url(images/email.gif) no-repeat center bottom transparent;
			width: 24px; height: 16px;
			position: absolute;
		}
		
		#header-social .feed{
			background: url(images/feed.gif) no-repeat center top transparent;
			width: 25px;
			height: 24px;
			display: block;
			float: left;
			position: relative;
			padding: 0px 15px;
		}
		
		#header-social .feed span.hover{
			
			background:  url(images/feed.gif) no-repeat center bottom transparent;
			width: 25px; height: 24px;
			position: absolute;
			
		}
	
		
		
		
		
		/////////
		
/**
* Page navigation
************************************************/

/* Wrapper for navigation */
#navigation { 
	
}

#navigation{
	background-color:black;
	border-top:1px solid #161616;
	float:left;
	margin-left:390px;
	margin-top:-80px;
	padding:35px 0 0;
	
}

	/* Page nav */
	#page-nav { font-size: 25px; color: white; }
		#page-nav ul { list-style-type:none;}
			#page-nav li { display:inline; margin:0 5px 0 5px; padding:20px;}
				#page-nav li a { color: #444444; text-decoration: none;}
				#page-nav li a:hover{
					color: #00aeef;
				}
			#page-nav li.current_page_item { 
			background: url(images/tab-bkg.gif) 0 0 transparent no-repeat;  }
			
				#page-nav li.current_page_item a{
				
					color: #cbc7c7;
					text-shadow: #000 0px 0px 5px;
				}		
		
		
/* Search */
#header-container .search {
	background:url("images/search-bkg.jpg") no-repeat scroll 0 0 transparent;
	float:right;
	height:41px;
	position:absolute;
	right:0;
	top:24px;
	width:220px;
}
	
#header-container .search label{
	display: none;
}
#header-container input {
background:none repeat scroll 0 0 transparent;
border:medium none;
font:12px arial,verdana,sans-serif;
padding:12px 0 12px 12px;
width:160px;
	}
#header-container .search-text {
	float: left;
	width: 136px;
	padding: 7px 10px 0 10px;
	color: #7e7558;
	}
#header-container #searchsubmit {
background-image:url("images/lupa.gif");
background-position:6px 6px;
background-repeat:no-repeat;
color:#80713D;
font-weight:bold;
text-indent:-1000em;
width:30px;
	}
#header-container .search-submit:hover {
	cursor: pointer;
	}
	
/**********BANNER ******************/

.banner{
	width: 1020px;
	height: 339px;
	display: block;
	background: #3a3e3f url(images/banner-bkg.jpg) no-repeat 0 0;
	
	padding-top: 50px;
	font-weight: normal;
	color: #FFF;
	text-shadow: 0px 0px 10px #000;
}	


#gallery{
	background: url(images/display-monitor.png) no-repeat 0 0 transparent;
	display: block;
	width: 382px;
	height: 300px;
	margin-left: 40px;
	float: left;
	margin-right: 80px;
}

#gallery a img{
	padding: 14px;
}

.banner#home{
	background-image: url(images/banner-home.jpg);
	
	
}

.banner#about{
	background-image: url(images/banner-plain.jpg);
	
}

.banner#blog{
	background-image: url(images/banner-blog.jpg);
	
}

.banner#contact{
	background-image: url(images/banner-contact.jpg);		
}

.banner#services{
	background-image: url(images/banner-services.jpg);
}

.banner#search{
	background-image: url(images/banner-search.jpg);
}

.banner#about h2{
	text-align:left;
	margin-right: 0px;
}

.banner#about h3{
	text-align: left;
	margin-right: 0px;
}

.banner#about p{
	text-align: left;
	float: left;
}


.quote{
	background: url(images/quote.png) no-repeat 0 top transparent;
	width: 180px;
	height: 50px;
	display: block;
	position: relative;
	cursor: pointer;
	float: right;
	margin-top: 50px;
}

.quote span.hover{
	background:  url(images/quote.png) no-repeat 0 bottom transparent;
	width: 180px; height: 50px;
	position: absolute;
	left: 0px;
	top: -1px;
}

.back-btn{
	background: url(images/back.png) no-repeat 0 top transparent;
	width: 128px;
	height: 50px;
	display: block;
	position: relative;
	cursor: pointer;
	float: left;
	margin-top: 30px;
}

.back-btn span.hover{
	background:  url(images/back.png) no-repeat 0 bottom transparent;
	width: 128px; height: 50px;
	position: absolute;
	left: 0px;
	top: -1px;
}

.send-email{
	background: url(images/sendusanemail.png) no-repeat 0 top transparent;
	width: 180px;
	height: 50px;
	display: block;
	position: relative;
	cursor: pointer;
	float: right;
	margin-top: 50px;
}

.send-email span.hover{
	background:  url(images/sendusanemail.png) no-repeat 0 bottom transparent;
	width: 180px; height: 50px;
	position: absolute;
	left: 0px;
	top: -1px;
}

.next-btn{
	background: url(images/next.png) no-repeat 0 top transparent;
	width: 128px;
	height: 50px;
	display: block;
	position: relative;
	cursor: pointer;
	float: left;
	margin-top: 30px;
}

.next-btn span.hover{
	background:  url(images/next.png) no-repeat 0 bottom transparent;
	width: 128px; height: 50px;
	position: absolute;
	left: 0px;
	top: -1px;
}

.banner h2{
	font-size: 65px;
	text-align:right;
	margin: 0px 50px 0px ;
	letter-spacing:-2px;
		font-family: MyriadPro, Arial, Helvetica;
		
	
}

.banner h2 span{
	color: #00aeef;
}

.banner h3{
	font-size: 40px;
	color: gray;
	text-align: right;
	margin:0 50px 15px 0;
	letter-spacing:-2px;
		font-family: MyriadPro, Arial, Helvetica;
	
}

.banner p{
	text-align: right;
	width: 400px;
	float: right;
	margin-right: 50px;
	text-shadow: 1px 1px 1px #000;
}


.portfolio-btn{
	background: url(images/button1.png) no-repeat 0 top transparent;
	width: 180px;
	height: 50px;
	display: block;
	position: relative;
	cursor: pointer;
	float: right;
	margin-top: 50px;
}

.portfolio-btn span.hover{

	background:  url(images/button1.png) no-repeat 0 bottom transparent;
	width: 180px; height: 50px;
	position: absolute;
	left: 0px;
	top: -1px;
}	
////////////


	/**
	* Content
	************************************************/

	
		}
		#content {
	
		color: #FFFFFF;
		}
		
		#content{
			color: #FFFFFF;
			background-color: #222222;	
		}
		

		#content h2{
			font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
			font-size: 22px;
			font-weight:300;
			margin-bottom: 15px;
		}
	
		#content h3{
			font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
			font-size: 22px;
			font-weight:300;
			margin-bottom: 15px;
		}
		
		#content h3 span{
			color: #00aeef;
		}
		
		#content h4{
			font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
			font-size: 19px;
			margin-bottom: 20px;
		}
		
		#content p{
			color:  #8f8888;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 15px;
			margin-bottom: 20px;
		}
		
		#recent-posts{
			
			position: relative;
			padding-left: 30px;
		}
		
		#date{
			display: block;
			background-color: #ff003c;
			color: white;
			position: absolute;
			left: -40px;
			text-align: center;
			padding: 10px;
		}
		
		#day{
			
		}
		
		#content-left{
			float: left;
			border-right: 8px dashed #363636;
			background-color: #222222;	
			width: 252px;
			padding: 40px;		
			}
			
		#content-left.about{
			width: 600px;
		}
		
		#content-middle{
			float: left;
			border-right: 8px dashed #363636;
			background-color: #222222;	
			width: 252px;
			padding: 40px;
		}
		
		#content-right{
			float: left;
			background-color: #222222;	
			width: 252px;
			padding: 40px;
		}
		
		#content-right ul{
			margin-bottom: 20px;
		}
		#content-right ul li{
			padding-bottom: 20px;
			font-size: 14px;
			color:  #8f8882;
		}
		
		#twitter-updates{
			padding-top: 50px;
			padding-bottom: 50px;
			width: 100%;
			background-image: url(images/twitter-bird.png);
			background-repeat: no-repeat;
			background-position: 800px 35%;
			border-bottom: #000 1px solid;
			
			display: block;
			clear:both;
		}
		
		#updates{
			background-image: url(images/twit-arrow.gif);
			background-position: 720px 35%;
			background-repeat: no-repeat;
		}
		
		#twitter-updates p{
			color: #FFFFFF;
			font-size: 30px;
			background-color:  #383838;
			width: 650px;
			padding: 40px;
		}
		
		#twitter-updates p span{
			
		}

		/* Breadcrumb trail */
		.breadcrumb {}

		/* Archive and search <div> before posts are listed */
		.author-info {}
		.category-info {}
		.date-info {}
		.search-info {}
		.tag-info {}

		/* Posts */
		.post { border-bottom: 5px dashed #363636; margin-bottom: 15px;}

			/* Post, page, and archive titles */
			.entry-title {}
			.single-title {}
			.page-title {}
			.attachment-title {}
			.error-404-title {}
			.author-title {}
			.category-title {}
			.date-title {}
			.search-title {}
			.tag-title {}

			/* Author and date byline */
			.byline {}

			/* Full entries */
			.entry-content {}

			/* Excerpts (introduced in Hybrid 0.4) */
			.entry-summary {}

				/* Using <!--nextpage--> */
				p.pages a {}

				/* More link <!--more--> */
				a.more-link {}

			/* Post meta data */
			.post-meta-data {}

		/* Post series */
		.series {} 
			.series-title {}

		/* Navigation links */
		.navigation-links {}
			.navigation-links .previous {}
			.navigation-links .next {}

		/* WP PageNavi (plugin) */
		.wp-pagenavi {}
			.wp-pagenavi .pages {}
			.wp-pagenavi .current {}
			.wp-pagenavi .extend {}
			.wp-pagenavi a {}

		/* Attachment image navigation */
		.navigation-attachment {}

		/**
		* Comments template
		************************************************/

		/* Wrapper for entire comments area */
		#comments-template {}

			/* Comments section headers/titles */
			.comments-header {}
			#comments-number {}

			/* Comments closed paragraph */
			p.comments-closed {}

				/* Main comments section */
				#comments {}
					#comments ol {}

						/* Individual comments (note that WordPress has even/odd backwards) */
						#comments li {}
							#comments li li {}
								#comments li li li {}
									#comments li li li li {}
						#comments li.even {}
						#comments li.odd {}
						#comments li.thread-even {}
						#comments li.thread-odd {}
						#comments li.author {}
						#comments li.trackback {}
						#comments li.pingback {}

							/* Comment avatars */
							#comments .avatar {}

							/* Comment meta data */
							#comments .comment-meta-data {}
								#comments .comment-meta-data cite {}

							/* Comment text */
							#comments .comment-text {}

					/* Paged comments navigation */
					#comments-template .paged-navigation {}
						#comments-template .paged-navigation .page-numbers {}
						#comments-template .paged-navigation .next {}
						#comments-template .paged-navigation .prev {}

				/* Main comment form div */
				#respond {}

					/* Comment form title */
					#reply {}

					/* Comment form elements */
					p#cancel-comment-reply {}
					#respond form {}
						#respond .form-author {}
							#respond input {}
						#respond .form-email {}
						#respond .form-url {}
						#respond .form-textarea {}
							#respond textarea { background-color:#363636;
							color:white;
							padding:20px;
							width:560px;}
						#respond .button {}
						#respond .comment-action {}

		/**
		* Utility widget sections (see other widget code below)
		************************************************/

		/* All utility widget sections (except widgets template) */
		.utility {}

		/* Before content */
		#utility-before-content {}

		/* After content */
		#utility-after-content {}

		/* After post but before comments */
		#utility-after-single {}

		/* After page but before comments */
		#utility-after-page {}

		/* Widgets page template widgets */
		.page-template-widgets #content .widget {}

	/**
	* Widget sections (Primary and Secondary)
	************************************************/

	/* Widgets in general */
	.widget {}
		.widget-inside {}
			.widget-title {}

	/* Primary widget section */
	#primary {}
		#primary .widget {}
			#primary .widget-inside {}
				#primary .widget-title {}
				#primary .widget ul {}
					#primary .widget ul li {}

	/* Secondary widget section */
	#secondary {}
		#secondary .widget {}
			#secondary .widget-inside {}
				#secondary .widget-title {}
				#secondary .widget ul {}
					#secondary .widget ul li {}

/**
* Footer
************************************************/

/* Wrapper for the entire footer */
#footer-container {}

	/* Subsidiary widget section */
	#subsidiary {}
		#subsidiary .widget {}
			#subsidiary .widget-inside {}
				#subsidiary .widget-title {}

	/* Footer section */
	#footer { 
	background-color: black; color: #8f8888; display:block; clear:both; border-top:#414244 1px solid;}
	#footer h3{
		font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
		font-size: 22px;
		color: #8f8888;
	}
	
	#footer h4{
		margin-top: 25px;
	}
	
	#footer p{
		margin-top: 35px;
	}
	
	#footer a{
		
		
	}
	
	#footer a:hover{
		color: #ffad00;
	}
	
		#footer-left{
			float: left;
			border-right: 1px dashed #161616;
			width: 252px;
			padding: 40px;	
		}
		
		#footer-left ul li a{
			margin-top: 0px;
			color: #999;
			text-decoration: none;
		}
		
		#footer-left ul li a{
			border-bottom:  1px dashed #161616;
			margin-top: 20px;
		}
		
		#footer-middle{
		float: left;
		border-right: 1px dashed #161616;
		width: 252px;
		padding: 40px;	
			
		}
		
		#footer-right{
		float: left;
		width: 252px;
		padding: 40px;	
		}
		
		#footer-right p{
			text-align:center;
		}
		
		#footer-license{
			clear: both;
			font-size: 12px;
			color: #161616;
		}
		
		#footer .share-facebook{
			background: url(images/facebook.png) no-repeat 0 0 transparent;
			cursor: pointer;
			display: block;
			width: 180px;
			height: 44px;
			position: relative;
			float: left;
			clear: both;
			padding: 20px 0 0 80px;
						
		}
		
		#footer .share-facebook:hover{
			color: #375492;
		}
		
		#footer .share-facebook span.hover{
			background: url(images/facebook.png) no-repeat center bottom transparent;
			position: absolute;
			top: 0px;
			left:  0px;
			width: 64px;
			height: 64px;
			float: left;
			
		}
		
		
		#footer .share-twitter{
			background: url(images/share-twitter.png) no-repeat 0 0 transparent;
			cursor: pointer;
			display: block;
			width: 180px;
			height: 44px;
			position: relative;
			float: left;
			clear: both;
			padding: 20px 0 0 80px;
		}
		#footer .share-twitter:hover{
			color:#61d7ff;
		}
		
		#footer .share-twitter span.hover{
			background: url(images/share-twitter.png) no-repeat center bottom transparent;
			position: absolute;
			display: block;
			float: left;
			width: 64px;
			height: 64px;
			top: 0px;
			left: 0px;
			
			
		}
		
		.twitter-timestamp{
			color: black;
			font-size: 12px;
		}
		
		.twitter-link{
			display: none;
		}
		
		#footer .mail {
			background: url(images/mail.png) no-repeat 0 0 transparent;
			cursor: pointer;
			display: block;
			width: 180px;
			height: 44px;
			position: relative;
			float: left;
			clear: both;
			padding: 20px 0 0 80px;
		}
		
		#footer .mail:hover{
			color: #ffae00;
		}
		
		#footer .mail span.hover{
		background: url(images/mail.png) no-repeat center bottom transparent;
			position: absolute;
			display: block;
			float: left;
			width: 64px;
			height: 64px;
			top: 0px;
			left: 0px;
		}

		/* Footer extra */
		#footer .copyright {}
		#footer .credit {}