/*   
Theme Name: SELF
Theme URI: http://www.scheetzdesigns.com
Author URI: http://www.scheetzdesigns.com
Description: The Responsive WordPress vCard Theme
Tags: vcard, responsive, customizable
Author: Justin Scheetz
Version: 1.5
License: GNU General Public License
License URI: http://www.gnu.org/copyleft/gpl.html
*/

body {
	font-size:15px;
	line-height:22px;
	color:#5d5d5d;
}

#main { position:relative; }

#main:after {
	content:" ";
	width:960px;
	height:20px;
	position:absolute;
	bottom:-20px;
	left:0;
}

.wrapper { width:960px; margin:0 auto; }

header { position:relative; height:288px; background-size:auto 288px !important; }


.sep { margin:20px 0; display:block; height:5px; width:100%; font-size:1px; line-height:1px; }
.int-sep { margin:20px 0 10px; display:block; background:url('_theme_styles/images/internal_sep.png') top right no-repeat; height:11px; width:100%; font-size:1px; line-height:1px; }
p { margin:0 0 15px; padding:0; }
.mobile-clear { display:none; }
.cl { display: block; font-size: 0; line-height: 0; text-indent: -4000px; }

.window { display:none; background:#fff; padding:10px; }

.window h1 {
	font-size:50px;
	line-height:30px;
	margin:0 0 20px;
	padding:0;
	letter-spacing:-2px;
	color:#5d5d5d;
}

.page-content h2 {
	font-size:25px;
	line-height:31px;
	margin:0 0 15px;
	font-weight:normal;
	padding:15px 0 0;
	letter-spacing:0;
	color:#5d5d5d;
}

.page-content h3 {
	font-size:17px;
	border-top:1px solid #ddd;
	line-height:24px;
	font-weight:normal;
	margin:0 0 10px;
	padding:15px 0 0;
	position:relative;
}

.page-content h3 span.date {
	position:absolute;
	top:13px; right:0;
	font-size:15px;
	color:#9c9c9c;
}

.page-content h3 span.rating {
	position:absolute;
	top:17px; right:0;
	height:17px;
	background:url('_theme_styles/images/star.png') repeat-x 0 0;
	background-size:auto 15px;
}

.page-content h3 span.rating.one { width:16px; }
.page-content h3 span.rating.two { width:32px; }
.page-content h3 span.rating.three { width:49px; }
.page-content h3 span.rating.four { width:66px; }
.page-content h3 span.rating.five { width:83px; }

.page-content .wp-caption { margin-right: -10px !important; }
.page-content .wp-caption img { -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
.page-content .wp-caption-text { font-size:12px; color:#888; text-align:center; padding:10px 0 0; margin:0; }
.page-content .sticky {}
.page-content .gallery-caption {}
.page-content .bypostauthor {}
.page-content .alignright { float:right; margin:0 0 20px 30px; }
.page-content .alignleft { float:left; margin:0 30px 20px; }
.page-content .aligncenter { float:right; margin:0 auto 30px auto; }

.page-content small {
	display:block;
	font-family:"Georgia",serif;
	font-style:italic;
	color:#9c9c9c;
	font-size:12px;
	line-height:18px;
	margin:0;
	padding:0;
	font-weight:normal;
}

.page-content a, .profile-who a {
	font-weight:bold;
	text-decoration:none;
}

.page-content a:hover, .profile-who a:hover {
	color:#555;
	text-decoration:underline;
}

.page-content .mini-title { margin:0; color:#888; font-size:11px; font-weight:bold; }

/* Fluid Columns */
.one_half { width: 48%; }
.one_third { width: 30.66%; }
.two_third { width: 65.33%; }
.one_fourth { width: 22%; }
.three_fourth { width: 74%; }
.one_fifth { width: 16.8%; }
.two_fifth { width: 37.6%; }
.three_fifth { width: 58.4%; }
.four_fifth { width: 79.2%; }
.one_sixth { width: 13.33%; }
.five_sixth { width: 82.67%; }

.one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth {
   position: relative;
   margin-right: 4%;
   margin-bottom: 15px;
   float: left;
}

.last {
   margin-right: 0 !important;
   clear: right;
}

.portfolio-block, .resume-block, .contact-block, .page-block { padding:4%; }


/* Mobile Navigation (Hidden) */
div.mobile-nav { display:none; }


/* Main Navigation */
header nav {
	position:absolute;
	bottom:20px;
	left:20px;
	width:auto;
	height:32px;
	padding:0;
	font-size:12px;
	font-weight:bold;
	color:#5d5d5d;
	text-transform:uppercase;
	line-height:32px;
	background:#fff;
	background:rgba(255,255,255,0.8);
	-moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px;
}

header nav span.nav-title { width:100px; cursor:pointer; color:#fff; display:block; position:absolute; left:45px; top:1px; }

header nav .overflow { height:32px; width:32px; display:block; position: relative; overflow:hidden; }
header nav .overflow .links { display:block; width:900px; height:32px; }

header nav .symbol {
	text-transform:lowercase;
	position:absolute;
	cursor:pointer;
	left:9px;
	top:-1px;
	font-weight:bold;
	font-size:22px;
}

header nav a {
	position:relative;
	left:32px;
	display:inline-block;
	color:#5d5d5d;
	padding:0 20px 0 0;
	text-decoration:none;
}

header nav.active { width:auto; padding:0 5px 0 40px; }
header nav.active a { left:0; }
header nav.active .symbol { left:9px; }
header nav.active span.nav-title { display:none; }

header nav .overflow, header nav a, header nav {
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}


/* Social Links */
header #socials {
	position:absolute;
	bottom:20px;
	right:20px;
}

header #socials a {
	display:block;
	width:32px;
	height:32px;
	opacity:0.8;
	-moz-opacity:0.8;
	position:relative;
	top:0;
	text-indent:-9999px;
	float:left;
	margin:0 0 0 10px;
	
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	
	background-size:32px 32px;
}

header #socials a:hover {
	top:-5px;
	opacity:1;
	-moz-opacity:1;
}

header #socials a.twitter { background:url('_theme_styles/images/socials_twitter.png') no-repeat center center; }
header #socials a.facebook { background:url('_theme_styles/images/socials_facebook.png') no-repeat center center; }
header #socials a.linkedin { background:url('_theme_styles/images/socials_linkedin.png') no-repeat center center; }
header #socials a.google { background:url('_theme_styles/images/socials_google.png') no-repeat center center; }
header #socials a.dribbble { background:url('_theme_styles/images/socials_dribbble.png') no-repeat center center; }
header #socials a.feed { background:url('_theme_styles/images/socials_rss.png') no-repeat center center; }


/* Profile Window */

.profile-block .profile-photo {
	width:220px;
	height:299px;
	display:block;
	float:left;
}

.profile-block .profile-who { float:left; width:340px; padding:30px 40px 15px; }
.profile-block .profile-who.wide { width:640px; }

.profile-block .profile-who .titles h2 {
	font-weight:normal;
	text-transform:uppercase;
	font-size:21px;
	line-height:25px;
	margin:5px 0 20px;
	padding:0;
	color:#5d5d5d;
}

.profile-block .profile-details { min-height:275px; color:#333; width:275px; float:left; padding:20px 5px 5px 20px; }
.profile-block .profile-details h3 { font-size:20px; padding:0; margin:0 0 25px; line-height:20px; }
.profile-block .profile-details .detail { padding:0 0 10px; }
.profile-block .profile-details .title, .profile-block .profile-details .desc { display:block; font-size:13px; line-height:16px; }

.profile-block .profile-details .title {
	font-weight:bold;
	float:left;
	width:25%;
	text-transform: uppercase;
}

.profile-block .profile-details .desc {
	width:63%;
	float:right;
	opacity:0.7;
	-moz-opacity:0.7;
	filter: alpha(opacity=70);
}

.profile-block .profile-details .no-float { float:none; padding-bottom:5px; display:block; }

.profile-block .profile-details .desc a { color:#000; font-weight:bold; text-decoration:none; }

/* Portfolio */

.portfolio-block { padding-right:1%; }
.portfolio-block .sep, .portfolio-block .int-sep { width:96%; }

.portfolio-block #filters { margin:0 0 25px; }
.portfolio-block #filters span {
	display:inline-block;
	padding:6px 9px;
	font-weight:bold;
	background:#D0D0D0;
	color:#fff;
	font-size:11px;
	text-transform:uppercase;
	line-height:11px;
	float:left;
	cursor:pointer;
	margin:0 5px 0 0;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}

.portfolio-block #filters span:hover { background:#aaa; }

.portfolio-block .item { display:block; float:left; margin:0 20px 30px 0; }
.portfolio-block .item.hidden { display:none; }
.portfolio-block .item.last { margin-right:0; }
.portfolio-block .item a img {
	width:205px;
	height:136px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	margin:0 0 15px;
	opacity:0.8;
}
.portfolio-block .item a:hover img { opacity:100; }
.portfolio-block .item a img {
	-webkit-transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
}
.portfolio-block .item h3 { border-top:none; text-align:center; font-size:14px; line-height:20px; margin:0; padding:0; font-weight:normal; }
.portfolio-block .item h3 a { text-decoration:none; }
.portfolio-block .item h3 span { display:block; font-family:"Georgia",serif; font-style:italic; color:#9c9c9c; font-size:12px; line-height:18px; margin:0; padding:0; font-weight:normal; }

.portfolio-block-items { opacity:0; -moz-opacity:0; filter: alpha(opacity=0); }

#filters span {
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

/* Contact Page */
form.styled {
   display: block;
   margin: 0 0 15px;
}

form.styled label {
   font-weight: bold;
   display: block;
   margin: 0 0 10px;
}

form.styled .textbox,form.styled .textarea-wrap {
	display: block;
	border: 1px solid #ddd;
	background: #f5f5f5;
	display: block;
	font-size: 13px;
	line-height: 17px;
	font-family: sans-serif;
	padding: 2%;
	margin: 0 0 15px;
	width: 94%;
	color: #888;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	background-color: #ffffff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
	background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
	background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
	background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
	background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
	background-image: linear-gradient(top, #ffffff, #f5f5f5);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ffffff', EndColorStr='#f5f5f5');

	-webkit-box-shadow: inset 1px 1px 3px #eee;
	-moz-box-shadow: inset 1px 1px 3px #eee;
	box-shadow: inset 1px 1px 3px #eee;
}

form.styled .textbox,form.styled .textarea-wrap {
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

form.styled .textbox:focus { outline:none; }

form.styled .textbox.input-error, form.styled .textarea-wrap.input-error {

	border:1px solid #eeaaaa;
	background-color: #ffffff;
	
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fff2f2));
	background-image: -webkit-linear-gradient(top, #ffffff, #fff2f2);
	background-image: -moz-linear-gradient(top, #ffffff, #fff2f2);
	background-image: -o-linear-gradient(top, #ffffff, #fff2f2);
	background-image: -ms-linear-gradient(top, #ffffff, #fff2f2);
	background-image: linear-gradient(top, #ffffff, #fff2f2);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ffffff', EndColorStr='#fff2f2');

   	-webkit-box-shadow: inset 1px 1px 4px #ffeeee;
   	-moz-box-shadow: inset 1px 1px 4px #ffeeee;
   	box-shadow: inset 1px 1px 4px #ffeeee;
}

form.styled .textarea-wrap textarea {
   -webkit-resize: none;
   -moz-resize: none;
   resize: none;
   width: 100%;
   height: 100px;
   border: none;
   background: none;
   padding: 0;
   margin: 0;
   outline: none;
   font-size: 13px;
   line-height: 18px;
   color:#888;
}

form.styled .button {
   cursor: pointer;
   border: none;
   font-size: 11px;
   line-height: 24px;
   font-weight: bold;
   text-transform: uppercase;
   color: #fff;
   display: inline-block;
   padding:2px 12px 0;

   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
}

form.styled .button:hover {
   background: #525252;
   color: #fff;
}

p.success-sending-message, p.error-sending-message { font-size:13px; }

p.success-sending-message {
	display:none;
	border-radius:3px;
	margin: 0 0 20px;
	padding: 10px;
	background-color: #c0ffd4;
	color: #159d50;
}

p.error-sending-message {
	display:none;
	border-radius:3px;
	color: #c03d00;
	margin: 0 0 20px;
	padding: 10px;
	background-color: #ffded4;
}

span.sending-message { display:none; position:relative; font-size:13px; color:#777; left:0; top:0; }
span.sending-message img { display:inline-block; position:relative; top:-2px; padding-left:0; }


/* Footer */
footer {
	background:url('_theme_styles/images/footer_lines.png') no-repeat bottom left;
	padding:15px 0;
	font-size:11px;
	color:#fff;
	color:rgba(255,255,255,0.4);
}

footer.wrapper { 
	margin-bottom:40px;	
}


footer.wrapper a:link    {
color:#f2ddba;
}

footer.wrapper a:visited {
color:#f2ddba;
}

footer.wrapper a:hover   {
color:#5c5c5c;
}

footer.wrapper a:active  {
color:#f2ddba;
}