/*
Theme Name: ZigZag
Theme URI: http://firmanw.com/zigzag-wordpress-theme
Description: A slideshow based theme for WordPress
Author: Firman Wandayandi
Author URI: http://firmanw.com/
Version: 1.0b
Tags: yellow, photoblogging, slideshow, gallery
*/

/***** Universal *****/

body, input, textarea {
	font: normal 85.5%/1.3 Helvetica, Arial, Sans-Serif;
}
input, textarea {
	font-size: 100%;
	color: #666;
}
body {
	border-top: 1px solid #ffd16b;
	padding-top: 18px;
	color: #333;
	background: #f6b82e;
}
a {
	text-decoration: none;
	color: #fff;
	text-shadow: 0 1px 1px #c59425;
}
a:hover {
	color: #ef4c10;
}

/***** TEMPLATE *****/

/* Container */
#area {
	background: url(images/bg.jpg) left bottom repeat-x;
	padding-bottom: 42px;
}
	#container {
		min-height: 540px;
	}

/* Header */

#header {
	height: 74px;
	background: url(images/zigzag.png) center top no-repeat;
	position: relative;
}
	#sunburst {
		background: url(images/sunburst.png) left top no-repeat;
		width: 380px;
		height: 250px;
		display: block;
		position: absolute;
		top: -30px;
		left: -140px;
		z-index: -1;
	}
	/* Blog Header */
	#blog-id h1 {
		position: relative;
		float: left;
		margin: 4px 0 0;
		text-shadow: 0 1px 1px #c59425;
	}
	#blog-id h1 a {
		color: #fff;
		text-decoration: none;
		font-style: italic;
		font-size: 1.6em;
	}
	#blog-id p {
		position: relative;
		float: left;
		color: #fff;
		text-shadow: 0 1px 1px #c59425;
		font-size: 1.1em;
		margin: 28px 0 0 8px;
	}
	/* Search */
	#search form {
		margin: 24px 24px 0 0;
	}
	#search p {
		margin: 0;
		background: url(images/searchbox.png) left top no-repeat;
		height: 27px;
	}
	#search input {
		background: transparent;
		border: none;
		width: 160px;
		margin: 5px 10px 0 10px;
		font-size: 13px;
	}

/* Navigation */
#nav {
	height: 72px;
	background: url(images/zigzag.png) left -74px no-repeat;
}
#nav {
	position: relative;
	z-index: 1;
}
	#nav ul {
		margin: 24px 0 0 20px;
		list-style: none;
	}
	#nav li {
		float: left;
		margin:0 1em 0 0;
		padding:0;
		list-style: none;
	}
		/* Lava Effect */
		#nav li.backLava {
			background: url(images/lava.png) no-repeat right -25px;
			width: 10px;
			height: 30px;
			position: absolute;
		}
		#nav li.backLava .leftLava {
			background: url(images/lava.png) no-repeat top left;
			height: 30px;
			margin-right: 10px;
		}
	#nav a {
		color: #fff;
		text-decoration: none;
		text-shadow: 0 1px 1px #c59425;
		text-transform: uppercase;
		font-weight: bold;
		display: block;
		float: left;
		height: 25px;
		z-index: 1;
		position: relative;
		top: 3px;
		margin: auto 10px 0;
	}

/* Content */
#content {
	height: 256px;
	background: url(images/zigzag.png) center -146px no-repeat;
}
	#leftcol {
		margin: 24px 0 24px 0;
		text-align: right;
		overflow: hidden;
	}
	/* Posts */
	#posts {
		height: 240px;
		margin: 8px 0;
		overflow: hidden;
	}
	/* Preview */
	#preview {
		position: relative;
	}
	.preview {
		position: absolute;
		height: 256px;
		width: 700px;
		display: block;
		cursor: pointer;
		cursor: hand;
		top: 0;
		left:0;
	}
	.preview img {
		position: absolute;
		top: 0;
		left: 0;
	}
	#mask {
		position: absolute;
		background: url(images/mask.png) right 0 no-repeat;
		display: block;
		top: 0;
		left: 0;
		height: 256px;
		width: 700px;
		z-index: 1;
	}
	#exif {
		position: absolute;
		z-index: 1;
		background: rgba(0, 0, 0, .3);
		padding: 8px;
		bottom: 16px;
		left: 16px;
		border-radius: 8px;
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;
	}
	#exif p {
		margin: 0;
		color: #fff;
		text-shadow: 0 1px 0 #444;
	}

/* Bottom */
#bottom h2 {
	font-size: 1em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 1px #c59425;
	padding: 1em 0;
	margin: 0;
	text-align: center;
}
	/* Feed */
	#feed {
		background: url(images/feed.png) left top no-repeat;
		display: block;
		height: 60px;
		width: 102px;
		position: absolute;
		right: 290px;
		text-indent: -9999px;
		z-index: 1;
	}
	/* Thumbnails Slide */
	#thumbs-slide {
		background: url(images/slide_bg.png) center top no-repeat;
		width: 520px;
		height: 125px;
		position: relative;
	}
		#thumbs-slide-shadowleft,
		#thumbs-slide-shadowright {
			top: 0;
			position: absolute;
			width: 24px;
			height: 125px;
			display: block;
		}
		#thumbs-slide-shadowleft {
			left: 0;
			background: url(images/slide_shadow.png) left top repeat-y;
		}
		#thumbs-slide-shadowright {
			right: 0;
			background: url(images/slide_shadow.png) right top repeat-y;
		}
		#thumbs-slide-scrollleft,
		#thumbs-slide-scrollright {
			cursor: pointer;
			cursor: hand;
			width: 24px;
			height: 24px;
			display: block;
			position: absolute;
			top: 50px;
		}
		#thumbs-slide-scrollleft {
			background: url(images/slide_control.png) left top no-repeat;
			left: 0;
		}
		#thumbs-slide-scrollright {
			background: url(images/slide_control.png) right top no-repeat;
			right: 0;
		}
		/* Thumbnails Items */
		#thumbs-items {
			overflow: hidden;
			width: 520px;
			height: 125px;
			display: block;
		}
			#thumbs-items ul {
				padding: 0;
				margin: 0;
				margin-top: 24px;
				padding: 0 210px;
				list-style: none;
				width: 3600px;
				display: block;
			}
			#thumbs-items li {
				float: left;
				margin: 0 10px;
			}
			#thumbs-items li.current a {
				background: #fff;
			}
			#thumbs-items a {
				background: #ffd270;
				height: 75px;
				width: 75px;
				display: block;
				float: left;
				padding: 1px;
			}

	/* Categories */
	#categories {
		background: url(images/lowest_bg.png) left top no-repeat;
	}
	#categories-list ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#categories-list li {
		float: left;
		width: 134px;
		padding: 8px;
		margin: 0 11px;
		background: url(images/line.png) left bottom repeat-x;
	}
	/* Navigation */
	#navigation {
		height: 66px;
		background: url(images/zigzag.png) left -402px no-repeat;
		position: relative;
	}
		#navigation #prev,
		#navigation #next,
		#navigation #older,
		#navigation #newer,
		#navigation a {
			color: #c38f20;
			text-decoration: none;
			font-weight: bold;
			text-transform: uppercase;
			text-shadow: 0 1px 0 #ffd270;
			margin: 0 8px;
			padding: 10px;
			display: block;
			cursor: pointer;
			cursor: hand;
		}
		#navigation a {
			padding: 0;
			margin: 0;
		}
		#navigation #prev,
		#navigation #older {
			position: absolute;
			top: 12px;
			left: 20px;
		}
		#navigation #next,
		#navigation #newer {
			position: absolute;
			top: 12px;
			right: 20px;
		}
		#navigation #prev span,
		#navigation #older a {
			background: url(images/prev.png) left top no-repeat;
			padding-left: 16px;
		}
		#navigation #next span,
		#navigation #newer a {
			background: url(images/next.png) right top no-repeat;
			padding-right: 16px;
		}
		#navigation .off {
			color: #ffd270 !important;
			text-shadow: 1px 0 0 #f0b023 !important;
			cursor: default !important;
		}
		#navigation #next .off,
		#navigation #newer .off {
			background: url(images/next.png) right -18px no-repeat !important;
		}
		#navigation #prev .off,
		#navigation #older .off {
			background: url(images/prev.png) left -18px no-repeat !important;
		}
	/* Twitter Badge */
	#twitter-badge {
		margin: 1em 0;
		position: relative;
	}
		#twitter-bird {
			background: url(images/twitter.png) left 0 no-repeat;
			width: 62px;
			height: 30px;
			display: block;
			position: absolute;
			z-index: 2;
		}
		ul#twitter_update_list {
			list-style: none;
			background: #ffd16b;
			border: 1px solid #f0b023;
			position: absolute;
			top: 26px;
			padding: 16px;
			min-width: 188px;
			border-radius: 8px;
			-moz-border-radius: 8px;
			-webkit-border-radius: 8px;
		}
		ul#twitter_update_list li {
			margin: 0;
			font-size: .9em;
		}
		a#twitter-link {
			position: absolute;
			right: 0;
			top: 8px;
			text-transform: lowercase;
		}

/* Footer */
#footer {
	background: #ffc84d;
	text-align: center;
	padding: 18px 0;
	color: #c38f20;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: 0 1px 0 #ffe4a9;
	font-size: .80em;
}
	#footer p {
		margin: 0;
	}
	#footer a {
		color: #ef4c10;
		text-decoration: none;
		text-shadow: 0 1px 0 #ffe4a9;
	}


/* Page */
#page, #about {
	position: relative;
	height: 256px;
	width: 700px;
	display: block;
	overflow: hidden;
}
	#page-content {
		margin: 24px 128px 24px 24px;
		color: #fff;
		z-index: 4;
	}
	/* For about page */
	#about {
		background: url(images/about.png) 450px 48px no-repeat;
	}
		#social-network {
			margin-bottom: 1em;
		}
			#social-network a {
				background-position: right top;
				background-repeat: no-repeat;
				width: 32px;
				height: 32px;
				text-indent: 9999px;
				display: block;
				float: right;
				margin-left: 4px;
			}
			#facebook {
				background-image: url(images/facebook_32.png);
			}
			#deviantart {
				background-image: url(images/deviantart_32.png);
			}
			#myspace {
				background-image: url(images/myspace_32.png);
			}
			#twitter {
				background-image: url(images/twitter_32.png);
			}
			#flickr {
				background-image: url(images/flickr_32.png);
			}

/***** LIBRARY *****/

/* Entry */
.entry-post {
	text-align: right;
	display: block;
	height: 208px;
	padding: 16px 0;
}
	.entry-post h3 {
		color: #fff;
		margin: 0;
		font-weight: bold;
		font-size: 1.4em;
	}
	.entry-meta {
		font-size: .85em;
		color: #666;
	}
	.comments a {
		background: url(images/comment.png) left -1px no-repeat;
		padding-left: 20px;
		font-size: .85em;
	}
	
/* Comments */
#comments h2 {
	margin-bottom: .4em;
}
	/* Comment row */
	.comment-sofar {
		font-size: .9em;
		color: #666;
	}
	.comment-list {
		list-style: none;
		margin: 0;
	}
	.comment-list li {
		padding: 0;
	}
	.comment {
		background: url(images/line.png) left bottom repeat-x;
		margin: 0 0;
		display: block;
	}
	.comment-body {
		clear: both;
		padding: 12px;
	}
	.comment-author {
		color: #666;
	}
	.comment-author .avatar {
		float: left;
		margin-right: 8px;
		border: 1px solid #ffd26f;
	}
	.comment-author .fn {
		font-weight: bold;
	}
	.comment-meta {
		font-size: .85em;
	}
	.comment-body p {
		margin: .8em 0;
		font-size: .9em;
	}
	.comment-body .reply {
		display: block;
	}
	.bypostauthor {
		background-color: #ffc84d;
	}

	/* Comment form */
	#commentform {
		border-radius: 8px;
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;
		background: #f0b023;
		padding: 16px;
	}
	#commentform p {
		margin: .4em 0;
	}
	#commentform input,
	#commentform textarea {
		border: 2px solid #ffd16b;
		padding: 4px;
		width: 340px;
		margin-right: .4em;
		background: #fff url(images/input_bg.png) right top repeat-y;
	}
	#commentform label {
		color: #c38f20;
		font-size: .85em;
		font-weight: bold;
		text-transform: uppercase;
		text-shadow: 0 1px 0 #ffd270;
	}
	#commentform textarea {
		width: 475px;
	}
	#commentform #submit {
		background: transparent url(images/submit_comment.png) left top no-repeat;
		border: none;
		width: 105px;
		height: 27px;
		display: block;
		text-indent: -9999px;
	}

/* Colorbox */
a.colorbox:hover .zoom {
	background:transparent url(images/zoom.png) left top no-repeat;
	display:block;
	height:65px;
	margin:15px 0 0 15px;
	position:absolute;
	width:65px;
	z-index: 6;
}