/* *****************************
Theme Name: the Sandal Jepit
Author: biyanpasau 
Author URI: http://pixeloplosan.com
Version: 1.0
****************************** */

/* =============================
TABLE OF CONTENT

	=COLOR:
	text color		:	#777777
	link color		:	#555555
	link hover		:	#111111
	navigation bg	:	#f7f7f7
	border color	:	#efefef
	scheme color	:	#ed8d23
	
	=FONT:
	body			: helvetica, arial, verdana, 'trebuchet ms', sans-serif
	heading			: 'Questrial'
	special			: 'Goudy Bookletter 1911'
	
============================= */


/* =============================
Global Setting and Reset
============================= */


/* =============================
Typography
============================= */

hr {
	background-color:$bordercolor;
	border:0;
	height:1px;
	margin-bottom:2px;
	clear:both;
}
ol, ul {
	list-style: none outside none;
	padding:0;
	margin:0;
}

div {
	display:block;
}
strong {
	color:#222;
}
.amp {
	font-family: 'Goudy Bookletter 1911', Palatino, Garamond, Georgia, "Times New Roman", serif;
	font-size: 1.4em;
	font-weight: normal;
	vertical-align: -0.15em;
	line-height: 1.2;
	margin: -0.15em 0;
}
.sub {
	font-size:11px;
}
.clear {
	margin:0;
	padding:0;
	.padding:15px;
	clear:both;
	height:0;
	width:100%;
}
.post .separator {
	margin:50px 0;
}
.left {
	float:left;
}
.right {
	float:right;
}
.center {
	margin:0 auto;
}
.two {
	width:50%;
}
.three {
	width:33.333333333333333333333333333333%;
}

table {
	background:#f7f7f7;
	width:100%;
	vertical-align:middle;
	margin-bottom:15px;
	border:1px solid #efefef;
	border-right:none;
	border-collapse:separate;
	border-spacing:0;
}
td {
	color:#555;
	border-top:1px solid #efefef;
	border-right:1px solid #efefef;
}
table, td, th {
	text-align:center;
	height:30px;
}
th {
	background:#f5f5f5;
	height:50px;
	border-right:1px solid #eee;
	box-shadow: inset -1px 0px #f0f0f0;
	-moz-box-shadow: inset -1px 0px #f0f0f0;
	-webkit-box-shadow: inset 0px 1px #fcfcfc;
}
tr {
	background:#fcfcfc;
	-webkit-transition:background-color 0.3s ease;
	-moz-transition:background-color 0.3s ease;
	-o-transition:background-color 0.3s ease;
	-ms-transition:background-color 0.3s ease;
	transition:background-color 0.3s ease;
}
tr:hover {
	background:#eff9ff;
	-webkit-transition:background-color 0.3s ease;
	-moz-transition:background-color 0.3s ease;
	-o-transition:background-color 0.3s ease;
	-ms-transition:background-color 0.3s ease;
	transition:background-color 0.3s ease;
}
.post-body blockquote {
	line-height:1.6em;
	padding:0 20px 0 50px;
	margin:1em 20px;
	font-style:italic;
	font-size:18px;
	font-family:georgia, 'times new roman', serif;
}
.button {
	background:#efefef;
	padding:5px 10px;
	font-family:helvetica, arial, sans-serif;
	color:#555;
	text-shadow:1px 1px 0px #f5e46e;
	cursor:pointer;
	margin-right:10px;
}
.button:hover {
	color:#222;
}
.orange {
	border:1px solid #f5b74e;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	box-shadow:-1px -1px 0 rgba(0, 0, 0, 0.15);
	-moz-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.15);
}
.medium {
	font-size:15px;
}
.small {
	font-size:12px;
	font-weight:bold;
}
.big {
	font-size:18px;
}
.uppercase {
	text-transform:uppercase;
	letter-spacing:1px;
}
.align_right {
	text-align:right;
}
.align_center {
	text-align:center;
}
.orderedlist {
	list-style:inside;
	list-style-type:decimal;
	padding-left:15px;
	padding-bottom:15px;
	padding-top:15px;
}
.unorderedlist {
	list-style:inside;
	list-style-type:square;
	padding-left:10px;
	padding-bottom:10px;
	padding-top:10px;
}
.customlist {
	padding-left:10px;
	padding-bottom:10px;
	padding-top:10px;
}

/* =============================
404 Not Found
============================= */
#p404 {
	text-align:center;
}
#p404 h2 {
	font-size:100px;
	font-weight:bold;
	border-bottom:1px solid #efefef;
	margin-bottom:10px;
}
#p404 h3 {
	padding-bottom:10px;
	margin-bottom:20px;
	border-bottom:1px solid #efefef;
}


/* =============================
Widget
============================= */
.widget {
	padding:0 0 30px 0;
}
.widget h3 {
	margin: 0 0 10px 0;
	background:url(../images/widget-title-bg.png) no-repeat left bottom;
	padding-bottom:10px;
	font:normal normal 12px 'Questrial', helvetica, arial, sans-serif;
	color:#222;
	text-transform:uppercase;
	letter-spacing:1px;
}

.widget ul {
	list-style-type:none;
	margin:10px 0 0 0;
	padding:0;
}

.widget li {
	margin:0;
	padding:0;
	border-bottom:1px dotted #efefef;
	line-height:2em;
}


/* =============================
Cover and Rows
============================= */
#cover {
	width:100%;
	margin:0 auto;
}
.outer-wrapper {
	width: 680px;
	text-align: left;
	font: normal normal 12px/1.6em helvetica, arial, verdana, 'trebuchet ms', sans-serif;
	margin: 0 auto;
	padding: 0;
}
.content-wrapper {
	padding:0 0 40px 10px;
}
.row {
	width:100%;
	margin:0;
	padding:0;
}
#row1 {
}
#row2 {
}
#row3 {
}
#row4 {
}
#row5 {
	background:#f7f7f7;
	border-top:1px solid #eee;
}
#row6 {
	background:#eee;
	border-top:1px solid #ddd
}


/* =============================
Header
============================= */
.header-wrapper {
	margin: 0 auto;
	width: 960px;
	padding:50px 0;
}
.lheader {
	padding:0;
	width:50%;
}
.lheader h1, .lheader .description {
	margin:0;
	padding:0;
	font:normal normal 35px/1.2em 'Questrial';
	text-decoration:none;
	color:#222;
}
.lheader .description {
	margin:5px 0 0 0;
	padding:0;
	font:11px Bookman Old Style, Palatino linotype, Times New Roman, Serif;
}
.lheader img {
	margin:0;
}

.rheader {
	width:50%;
	text-align:right;
}


/* ==========================
Social networks
========================== */
.social-networks {
	float:right;
	list-style:none;
	margin:10px 0 0 0;
	padding:0;
	width:auto;
	overflow:hidden;
}

.social-networks li {
	float:left;
	margin-right:10px;
	border:none;
}


/* =youtube */
.icon-youtube, .icon-youtube a {
	background-position:-32px bottom
}
.icon-youtube a:hover {
	background-position:-32px top;
}

/* =flickr */
.icon-flickr, .icon-flickr a {
	background-position:-64px bottom;
}
.icon-flickr a:hover {
	background-position:-64px top;
}

/* =feed */
.icon-feed, .icon-feed a {
	background-position:-96px bottom
}
.icon-feed a:hover {
	background-position:-96px top;
}

/* =twitter */
.icon-twitter, .icon-twitter a {
	background-position:-128px bottom
}
.icon-twitter a:hover {
	background-position:-128px top;
}


/* ===========================
Search
=========================== */

#searchform #s{
	color:#777777; 
	margin:0 50px 0 0; 
	width:175px; 
	padding:7px 10px; 
	border:none;
}


/* ===========================
Faux
=========================== */
.faux {
	width: 680px;
	margin: 30px auto 20px auto;

	.margin-top:0;
}
.faux .first-impression {
	font:normal normal 28px/0.5em 'Questrial', Open Sans;
}
.faux .label ul {
	list-style-type:none;
	margin:0;
	padding:0;
}
.faux .label ul li {
	border:none;
	padding:0;
	margin:0;
	float:left;
}
.faux .label ul li a {
	font-size:9px;
	margin:0 10px 0 0;
	padding:0 10px 0 0;
	border-right:2px dotted #ddd;
	text-transform:uppercase;
}
.faux .label ul li a:hover, .faux .label ul li span {
	color:#000;
}


/* ===========================
Index +homepages+
=========================== */
.outer-wrapper #homepages {
	border-top:1px solid #efefef;
	padding-top:20px;
}
#homepages .post-body ul {
	list-style-type:none;
	padding:0;
	margin:0;
}
#homepages .post-body .item {
	margin:1px;
	padding-bottom:15px;
	width:238px;
}
.filter .current a {
	text-decoration:underline;
}
#homepages .post-body .thumbnail {
	margin-top:10px;
}
#homepages .post-body .thumbnail img {
	width:238px;
	height:150px;
	display:block;
	overflow:hidden;
}
#homepages .post-body h3 {
	font-size:11px!important;
	text-transform:uppercase;
	text-decoration:none;
	color:#111;
	margin-bottom:0;
}
#homepages .post-body .entry-date {
	font-size:11px;
}


/* ===========================
Index +homepages2+
=========================== */
.outer-wrapper #homepages2 {
	border-top:1px solid #efefef;
}
#homepages2 .post ul li h3, #homepages2 .post ul li span {
	-o-transition: all 0.3s; 
	-moz-transition: all 0.3s; 
	-webkit-transition: all 0.3s;
}
#homepages2 .post ul li:hover h3, #homepages2 .post ul li:hover span {
	padding-left:10px;
	padding-right:10px;
	-o-transition: all 0.3s; 
	-moz-transition: all 0.3s; 
	-webkit-transition: all 0.3s;
}
#homepages2 .post-body ul {
	list-style-type:none;
	padding:0;
	margin:0;
}
#homepages2 .post-body .item {
	margin:1px;
	padding-top:20px;
	width:238px;
	-o-transition: all 0.5s; 
	-moz-transition: all 0.5s; 
	-webkit-transition: all 0.5s;
}
#homepages2 .post-body .item:hover {
	background:#f2f2f2;
	-o-transition: all 0.5s; 
	-moz-transition: all 0.5s; 
	-webkit-transition: all 0.5s;
}
#homepages2 .post-body .thumbnail {
	margin-top:10px;
}
#homepages2 .post-body .thumbnail img {
	width:238px;
	height:150px;
	display:block;
	overflow:hidden;
}
#homepages2 .post-body h3 {
	font-size:11px!important;
	text-transform:uppercase;
	text-decoration:none;
	color:#111;
	margin-bottom:0;
}
#homepages2 .post-body .entry-date {
	font-size:11px;
}
#homepages2 .entry-meta {
	border-top:1px dotted #ddd;
	font-size:11px;
	padding-top:10px;
	margin-top:10px;
}

/* begin toggle */
#homepages2 .thumbnail {
	position: relative;
	line-height:1.6em;
	margin:0;
	overflow:hidden;
}
#homepages2 .thumbnail img {
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
}
#homepages2 .thumbnail a {
	display: block;
	position: relative;
	overflow: hidden;
	height: 150px;
	width: 238px;
	color:$(link.visited.color);
}
#homepages2 .thumbnail a:hover {text-decoration:none}
#homepages2 .thumbs-hovering {
	padding:10px;
}


/* ===========================
Portfolio +three columns+
=========================== */
#three_columns .post-body .item {
	margin:1px;
	width:318px;
	line-height:0;
	overflow:hidden;
}
#three_columns .post-body .item img {
	width:318px;
	padding-bottom:0;
}


/* ===========================
Portfolio +four columns+
=========================== */
#four_columns .post-body .item {
	margin:1px;
	width:210px;
	overflow:hidden;
	line-height:0;
}
#four_columns .post-body .item img {
	width:210px;
}


/* ===========================
Main Blog
=========================== */
#main_blog .sidebar {
	width:240px;
}
#main_blog .post-body {
	width:670px;
	padding-right:50px;
}
#main_blog .post .post-body .description {
	width:65%;
	padding-left:5%;
	.padding-left:0;
}
#main_blog .post .post-body .meta {
	width:30%;
	padding-top:5px;
}
#main_blog .post h2 {
	padding-bottom:20px;
	font:normal normal 25px 'Questrial', Arial, Tahoma, Helvetica, FreeSans, sans-serif;
}
#main_blog .row {
	background:url(../images/widget-title-bg.png) no-repeat left bottom;
	margin-bottom:20px;
	padding-bottom:20px;
}


/* ===========================
Blog1
=========================== */
#blog1 .post-body {
	width:670px;
	margin:0;
	padding-right:50px;
	padding-bottom:50px;
}
#blog1 .meta {
	width:240px;
}
#blog1 .meta h2 {
	background:url(../images/widget-title-bg.png) no-repeat left bottom;
	padding-bottom:20px;
	margin-bottom:20px;
	font:normal normal 35px 'Questrial', Arial, Tahoma, Helvetica, FreeSans, sans-serif;
}
.post-body a {
	color:#111;
}
.post-body h2, .post-body h3 {
	margin-bottom:10px;
}
.entry-meta .meta-data ul li {
	line-height:3em;
}
.post-body p {
	margin-top:10px;
}
.post-body ul li, .post-body ol li {
	line-height:2em;
}
.post-body img {
	max-width:670px;
	display:inline;
}
.entry-meta .description {
	margin-top:20px;
	padding-bottom:10px;
	padding-top:20px;
	background:url(../images/widget-title-bg.png) no-repeat left top;
}
.mini ul li {
	float:left;
	margin:5px;
	border:none;
}


/* ===========================
Blog2
=========================== */
#blog2 .post-body {
	width:670px;
	margin:0;
	padding-right:50px;
	padding-bottom:50px;
}
#blog2 .meta {
	width:240px;
}
#blog2 .post h2 {
	background:url(../images/widget-title-bg.png) no-repeat left top;
	padding-top:20px;
	padding-bottom:10px;
	margin-top:40px;
	font:normal normal 35px 'Questrial', Arial, Tahoma, Helvetica, FreeSans, sans-serif;
}
.entry-meta .meta-data ul li {
	line-height:2.5em;
}
.post-body p {
	margin-top:10px;
}


/* ===========================
Fullwidth
=========================== */
#fullwidth h2 {
	background:url(../images/widget-title-bg.png) no-repeat left bottom;
	padding-bottom:10px;
	margin-bottom:10px;
	font-size:35px;
}


/* ===========================
Single Project
=========================== */
#single_project h2 {
	margin-bottom:20px;
}


/* ===========================
Contact
=========================== */
#googlemaps{
height: 300px;
width: 960px;
margin: 20px auto;
}
.contactForm{
	margin:30px 0px 10px 0px;
}
.contactForm div{
	position:relative
}
.contactForm input[type="text"]{width:94%;}
.contact {
	margin:10px 0;
}
.contact .cform{
	border:1px solid #efefef;
	background:#f7f7f7;
	padding:10px 2px;
	margin:0;
	border-left:3px solid #ed8d23;
	color:#777;
}


/* ===========================
Middle
=========================== */
.middle-wrapper {
	padding:0 0 30px 0;
	margin:0 auto;
	clear:both;
	width:960px;
}
.middle {
	clear:both;
}
.client {
	background:#f9f9f9;
	border:1px solid #efefef;
	padding:20px 20px 10px 20px;
	margin-bottom:30px;
}
.kiri {
	width:295px;
	padding-right:25px;
}
.tengah {
	width:270px;
	padding-left:25px;
	padding-right:25px;
}
.kanan {
	width:295px;
	padding-left:25px;
}
.kiri img, .kanan img {
	max-width:295px;
	padding-top:10px;
	padding-bottom:10px;
}
.tengah img {
	max-width:270px;
	padding:10px 0;
}


/* ===========================
Comments
=========================== */
.comments-wrapper h4 {
	background:url(../images/widget-title-bg.png) no-repeat left top;
	width:100%;
	padding:10px 0 30px 0;
	margin-top:50px;
	font:normal normal 12px 'Questrial', helvetica, arial, sans-serif;
	color:#222;
	text-transform:uppercase;
	letter-spacing:1px;
}
.comments-wrapper .content {
	border-bottom:1px solid #efefef;
	margin-bottom:20px;
}


/* level 1 */
.comments-wrapper .level1 .avatar {
	width:36px;
	height:36px;
	overflow:hidden;
	margin:5px 20px 0 0;
}
.comments-wrapper .level1 .content {
	width:614px;
}
.comment-header .cauthor {
	font-size:14px;
	font-weight:bold;
	color:#555;
	padding-right:10px;
}
.comment-header .permalink {
	font-size:11px;
}

/* level 2 */
.comments-wrapper ul li ul {
	margin-left:56px;
}
.comments-wrapper .level2 .avatar {
	width:36px;
	height:36px;
	overflow:hidden;
	margin:5px 20px 0 0;
}
.comments-wrapper .level2 .content {
	width:558px;
}

/* comment form */
#comment-form {
	margin:30px 0px 10px 0px;
	clear:both;
}
.comment div{
	position:relative;
}
.comment input[type="text"]{width:94%;}
.comment {
	margin:5px 0;
	clear:both;
}
.comment .cform {
	border:1px solid #efefef;
	background:#f7f7f7;
	padding:5px 2px;
	border-left:3px solid #ed8d23;
	color:#777;
}



/* ===========================
Column
=========================== */
.onehalf {
	width:48%;
	padding-right:2%;
}
.onethird {
	width:30%;
	padding-right:3%;
}
.onequarter {
	width:23%;
	padding-right:2%;
}
.onefifth {
	width:18%;
	padding-right:2%;
}
.onesixth {
	width:13%;
	padding-right:3%;
}


/* ===========================
Footer
=========================== */
.footer-wrapper {
	width:960px;
	margin:0 auto;
	padding:30px 0;
	clear:both;
}
.flickr {
	padding:0;
}
.flickr_badge_image {
	float: left;
	margin: 5px;
}
.flickr_badge_image img {
	height: 63px;
	width: 63px;
	padding:0;
}



/* ===========================
Credit
=========================== */
.credit-wrapper {
	padding:10px 0;
	width:960px;
	margin:0 auto;
	clear:both;
}
.credit-wrapper .clear {
	.padding:0;
}
.credit {
	width:50%;
}
.credit p {
	margin:0;
}
.credit-wrapper .right {
	text-align:right;
}
.credit ul li {
	float:left;
	margin-left:10px;
	padding-left:10px;
	border-left:1px dotted #ddd;
}


/* =============================
Media Queries
============================= */
/* for less than 960px */
@media screen and (max-width: 959px) {
 
	.outer-wrapper,
	.header-wrapper,
	.faux,
	.middle-wrapper,
	.footer-wrapper,
	.credit-wrapper {
		width:720px;
	}
	#googlemaps {display:none}
	.first-impression {display:none}
	.comments-wrapper .avatar {display:none}
	#blog2 .meta {display:none}
	#main_blog .sidebar {display:none}
	.social-networks {display:none}
	.kiri, .tengah, .kanan {
		width:215px;
		padding:10px;
	}
	.kiri img, .tengah img, .kanan img {
		max-width:215px;
	}
	#blog1 .post-body {
		width:500px;
	}
	#blog1 .post-body img {
		max-width:500px;
	}
	#blog1 .meta {
		width:170px;
	}
	.comments-wrapper .level1 .content {width:500px}
	#three_columns .post-body .item {
		width:238px;
		height:auto;
	}
	#three_columns .post-body .item img{
		width:238px;
	}
	#p404 .lup {background:none}
}

/* for less than 720px */
@media screen and (max-width: 719px) {
 
	.outer-wrapper,
	.header-wrapper,
	.faux,
	.middle-wrapper,
	.footer-wrapper,
	.credit-wrapper {
		width:480px;
	}
	.lheader {
		float:none;
		text-align:center;
	}
	.lheader img {
		max-width:240px;
		margin:0 auto;
		display:block;
	}
	.tengah {display:none}
	#row6 {display:none}
	.rheader {display:none}
	#main_blog .post-body {
		width:480px;
		padding:0;
	}
	#main_blog .post-body img {
		max-width:480px;
	}
	#blog1 .post-body {
		width:480px;
	}
	#blog1 .post-body img {
		max-width:480px;
	}
	.comments-wrapper .level1 .content {width:480px}
	#comment-form {display:none}
	#blog1 .meta {float:none}
	#blog1 .entry-meta {display:none}
	#blog2 .post-body {width:480px}
	#p404 .lup {background:none}
	.post-body h2 {font-size:20px!important}
}

/* for less than 480px */
@media screen and (max-width: 479px) {
	.outer-wrapper,
	.header-wrapper {
		width:240px;
	}
	.faux,
	.middle-wrapper,
	.footer-wrapper,
	.credit-wrapper {
		display:none;
	}
	.lheader img {
		max-width:240px;
	}
	#main_blog .post-body {
		width:240px;
		padding:0;
	}
	#main_blog .meta {display:none}
	#main_blog .post .post-body .description {
		width:240px;
		float:none;
		padding:0
	}
	#main_blog .post-body img {
		max-width:240px;
	}
	#blog1 .post-body {
		width:240px;
	}
	#blog1 .post-body img {
		max-width:240px;
	}
	.comments-wrapper .level1 .content {display:none}
	#blog2 .post-body {width:240px}
	.flexslider {display:none}
	.form {display:none}
}