/*
Theme Name: Jo Shin - Shindig Portfolio
Theme URI: http://www.jo-shin.net
Description: A portfolio template using slider effect on each post. Magazine style. Three column.
Version: 1.0
Author: Jo Shin
Tags: three column, image, magazine, portfolio, fluid, black

 * Global Color Reference:
 * Black - #1b1b1b
 * White - #ffffff
 * Blue 1 (Light) - #95b3cf
 * Blue 2 (Middle) - #386d9e 
 * Blue 3 (Dark) - #2d547b
 *
  index ->
	global
	headings
	layout
	header
	navigation
	contact
	links
	resume
	content
	form
	media
	footer 
*/
  
/* =global */ 

body {font: 100.01%/1.25 helvetica, arial, sans-serif; background-color: #555555; height: 100%}
#site {font-size: 62.5%}

a {color: #386d9e}
a:link, a:visited {text-decoration: underline}
a:focus, a:hover, a:active {text-decoration: none}
a:visited {color: #2d547b}

p, pre, address, code,
dl, dt, dd, ol, ul, li,
fieldset, label,
table {line-height: 1.25em; margin: 1.25em 0; color: #55555}

blockquote {font-size: 1.8em; line-height: 1.8; margin: 1.8em 2em}
address {font-style: normal}
dt, dd {display: inline}
dt {margin-right: 5px}
ul, ol {margin-left: 20px; list-style: none}
strong {font-weight: bold}
em {font-style: italic}
input {font-size: 1em}
textarea {resize: none; font-family: helvetica, arial, sans-serif; font-size: 1em}

hr {height: 1px; color: #909090; background: #909090; border: none; margin: 1.25em 0 1.5em; clear: both}

#skip {display: none}

.alignleft {float: left}
.alignright {float: right}

/* =headings */

.heading {text-transform: uppercase; font-family: rockwell, arial black, arial, sans-serif; color: #1b1b1b; font-weight: bold; font-size: 1.4em}
.module-post .heading a {color: #fefefe; text-decoration: none}
.module-twitter .module-header .heading a {display: block; padding: 18px 0 0; color: #ebebeb; text-decoration: none}

/* =layout */

html, body {height: 100%}
#site {min-height: 100%; height: auto !important; height: 100%; overflow: hidden; background: transparent url(images/bg-gradient.jpg) 0 0 repeat-x}
#site-outer {min-width: 960px; padding: 0 10px 3em; margin: 0 auto; background-color: #1b1b1b}
#site-inner {margin: 10px 0 0; padding-bottom: 4em; min-height: 625px; background: #f1f1f1 url(images/bg-papertile.png) 0 0 repeat}

#header {position: absolute; left: 0; z-index: 2; margin: -10px 0 0; height: 188px; width: 100%; min-width: 960px; background: transparent url(images/bg-header-long.png) no-repeat scroll 50% 0}
.content-outer  {position: relative}
#sidebar {position: relative; z-index: 1; margin: 0 0 0 -20px; padding-bottom: 14px; width: 240px; background: transparent url(images/bg-sidebar-ftr.png) 0 100% no-repeat}
#content {xoverflow: hidden; margin: 0 305px 0 223px; padding-top: 188px; min-width: 380px}
#twitter {position: absolute; top: 188px; right: -20px; margin: 0; padding-bottom: 21px; width: 320px; background: transparent url(images/bg-twitter-ftr.png) 0 100% no-repeat}
#footer {height: 20px}

/* =header */

.header-inner {margin-right: 3%; margin-left: 3%}
.logo {display: block; height: 188px; width: 540px; position: absolute; top: 0; left: 3%; background: transparent url(images/logo.png) 0 0 no-repeat; text-indent: -9999em}
.description {margin: 2.25% 0 0 540px; padding-left: 1%; line-height: 1.3; font-weight: bolder; font-size: 1.8em; color: #ebebeb}

/* =sidebar */

.sidebar-inner {margin: 155px 0 0; padding: 33px 0 10px; background: transparent url(images/bg-sidebar.png) 0 0 repeat-y}
.rss {position: absolute; bottom: -22px; right: 10px; z-index: -1; display: block; height: 36px; width: 49px; background: transparent url(images/sprite-rss.png) 0 0 no-repeat; text-indent: -9999em}
.rss:focus, .rss:hover {background-position: -49px 0}
.rss:active {background-position: -98px 0}

/* =navigation */

#navigation, #navigation ul {margin: 0 10px 0 6px; font-family: rockwell, arial black, arial, sans-serif; font-weight: bold; text-transform: uppercase}
#navigation ul ul {margin: 0; display: inline}
#navigation li {margin: 0 0 37px 0}

#navigation li a {display: block; height: 37px; width: 219px; background: transparent url(images/sprite-nav.png) 0 0 no-repeat; text-indent: -9999em}
#navigation li a:focus, #navigation li a:hover, #navigation li a:active {background-position: -219px 0}

	#navigation li.home a {width: 140px}
	#navigation li.home a.active, #navigation li.home a:focus, #navigation li.home a:hover, #navigation li.home a:active {background-position: -219px 0}

	#navigation li.categories a {height: 37px; width: 219px; background-position: 0 -37px}
	body.page-template-page-categories-php #navigation li.categories a, body.category #navigation li.categories a, #navigation li.categories a:focus, #navigation li.categories a:hover {background-position: -219px -37px}
	
	#navigation li.page-item-4 a {height: 47px; width: 180px; background-position: 0 -74px}
	#navigation li.page-item-4.current_page_parent a, #navigation li.page-item-4.current_page_item a, #navigation li.page-item-4 a:focus, #navigation li.page-item-4 a:hover, #navigation li.page-item-4 a:active {background-position: -219px -74px}

	#navigation li.page-item-34 a {width: 210px; background-position: 0 -121px}
	body.date #navigation li.page-item-34 a, #navigation li.page-item-34.current_page_parent, #navigation li.page-item-34.current_page_item a, #navigation li.page-item-34 a:focus, #navigation li.page-item-34 a:hover, #navigation li.page-item-34 a:active {background-position: -219px -121px} 

	#navigation li.page-item-22 a {width: 214px; background-position: 0 -158px}
	#navigation li.page-item-22.current_page_parent, #navigation li.page-item-22.current_page_item a, #navigation li.page-item-22 a:focus, #navigation li.page-item-22 a:hover, #navigation li.page-item-22 a:active {background-position: -219px -158px}

#navigation ul li {display: inline}
#navigation ul li a {display: inline; height: auto; width: auto; padding: 0 2px; background: none; text-indent: 0; color: #525252; font-size: 1.3em; text-decoration: none}
#navigation ul li.current-cat a, #navigation ul li.current_page_item a, #navigation ul li a:focus, #navigation ul li a:hover, #navigation ul li a:active {background-color: #2d547b; color: #b1d9fe}

/* =search */

#search {position: relative; margin: 2em 0 2em 10px; height: 42px; width: 158px}
	#search label {display: none}
	#search #s {position: absolute; height: 27px; width: 144px; padding: 11px 5px 0 5px; background-color: #ebebeb; border: 2px solid #95b3cf; font-size: 1.4em}
	#search #searchsubmit {position: absolute; left: 158px; height: 42px; width: 69px; background: transparent url(images/button-search.gif) 0 0 no-repeat; font-family: rockwell, arial black, arial, sans-serif; font-size: 1.2em; font-weight: bold; color: #1e1e1e; text-transform: uppercase; border: 0}
	#search #searchsubmit:focus, #search #searchsubmit:hover, #search #searchsubmit:active {background-position: 0 -42px}
	
/* =content */
/* =boxes */

.module-post {overflow: hidden; position: relative; width: 364px; height: 259px; margin: 0 0 10px 10px; float: left; background: #161613; border: solid 8px #101010}  
	/*.boxgrid img { position: absolute; top: 0; left: 0; border: 0}  */

.module-caption {float: left; position: absolute; padding: 0 3px; height: 110px; width: 365px; background: #000; opacity: .8; cursor: default;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 	}
 	
 .captionfull .boxcaption {top: 260px; left: 0}
 .caption .boxcaption {top: 225px; left: 0}	
 .module-caption, .module-caption p, .see-more {display: inline}
 
 /* =boxes inside */
 
 dl.postmetadata {margin: 0 0 .5em; color: #404040; text-transform: uppercase}
 	dl.postmetadata dt,
 	dl.postmetadata dd {margin-top: 0; margin-bottom: 0; font-size: 1em}

.module-caption p, .module-caption a {font-size: 1.1em}
.module-caption p {color: #cccccc}
.module-caption a {font-weight: bold}
.module-caption dl.postmetadata {color: #b3b3b3}

.posts-navigation {clear: both; overflow: hidden}

.posts-navigation .alignleft a, .posts-navigation .alignright a, #content a.post-edit-link {padding: 0 3px; font-size: 1.3em; font-family: rockwell, arial black, arial, sans-serif; font-weight: bold;background-color: #e1e1e1; color: #525252; text-decoration: none; text-transform: uppercase}
.posts-navigation .alignleft a:focus, .posts-navigation .alignleft a:hover, .posts-navigation .alignleft a:active,
.posts-navigation .alignright a:focus, .posts-navigation .alignright a:hover, .posts-navigation .alignright a:active,
#content a.post-edit-link:focus, #content a.post-edit-link:hover, #content a.post-edit-link:active {background-color: #2d547b; color: #b1d9fe}

.module-caption a.post-edit-link {float: right; margin: -40px 5px 0 0}

.posts-navigation .alignleft a {margin-left: 10px}

/* =page and =single*/

body.page #content, body.single #content {margin: 0 20px 0 250px}

div.entry {font-size: 100%}

	.entry p,
	.entry blockquote,
	.entry pre,
	.entry, address, 
	.entry code,
	.entry ol, 
	.entry ul, 
	.entry li,
	.entry dt,
	.entry dd,
	.entry fieldset,
	.entry label
	.entry table {font-size: 1.2em; color: #404040}
	
	.entry ul, .entry ol {margin-left: 1%; list-style-position: inside}
	.entry ul {list-style-type: square}
	.entry ul ul {margin: 0 0 0 1%; font-size: 100%}
	.entry ol {list-style-type: decimal-leading-zero}
	.entry li {margin: 0}
		.entry li li {font-size: 100%}
		
.page-heading {font-size: 2.4em}

/* =contact page */

.wpcf7 form input, .wpcf7 form textarea {padding: 11px 5px 0 5px; background-color: #ebebeb; border: 2px solid #95b3cf; font-size: 1.4em}
.wpcf7 form textarea {height: 130px; width: 26em}
.wpcf7 form .submit {margin-left: 29em}
.wpcf7 form .submit input {padding: 0; height: 42px; width: 107px; background: transparent url(images/button-send.gif) 0 0 no-repeat; font-family: rockwell, arial black, arial, sans-serif; font-size: 1.2em; font-weight: bold; color: #1e1e1e; text-transform: uppercase; border: 0}
.wpcf7 form .submit input:focus, .wpcf7 form .submit input:hover {background-position: 0 -42px}
.wpcf7 form span.wpcf7-not-valid-tip {position: static; padding: 0 0 0 10px; widht: auto; background: none; border: none; color: #FF0000; font-size: 0.8em}
form div.wpcf7-validation-errors {border: none; color: #ff0000}

/* =twitter */

.module-twitter {padding: 0 20px 20px; background: transparent url(images/bg-twitter.png) 0 0 repeat-y}
.twitter-icon {float: right; display: block; margin-top: -39px; width: 50px; height: 64px; background: transparent url(images/icon-twitter-bird.png) 0 0 no-repeat; text-indent: -9999em}
	.module-twitter ol {margin: 0}
		.module-twitter ol li {margin: 0 10px 10px; padding: 10px 0 0 ; width: 269px; background: transparent url(images/tweet-top.gif) 0 0 no-repeat}
		.module-twitter ol li.last {display: none}
			.module-twitter ol li p {margin: 0; padding: 0 0 10px; background: transparent url(images/tweet-bottom.gif) 0 100% no-repeat; color: #cccccc}
				.module-twitter ol li p span {overflow: hidden; display: block; padding: 0 10px; background-color: #3c3c3c}
	.module-twitter .first {margin: 0 0 15px; padding: 31px 0 0; width: 290px; background: transparent url(images/tweet-first-top.gif) 0 0 no-repeat}
		.module-twitter .first p {margin: 0; padding: 0 0 11px; background: transparent url(images/tweet-first-bottom.gif) 0 100% no-repeat; color: #404040}
			.module-twitter .first p span {background: transparent url(images/tweet-first-body.gif) 0 0 repeat-y}
	.module-twitter .tweet-time {float: right; padding-top: 8px; font-weight: bold; color: #90aeca}
	.module-twitter .first .tweet-time {color: #386d9e}


/* =footer */
 
.site-info {float: right; margin: 5px 0 0; text-align: right; font-family: rockwell, arial black, arial, sans-serif; color: #ebebeb}
	.site-info dt, .site-info dd {margin-top: 0; margin-bottom: 0}
	.site-by {padding: 2px 0 0 3px}
	
/* =images =gallery */

.gallery {overflow: hidden}
.gallery dl.gallery-item {float: left; width: auto; text-align: left}
.gallery dt.gallery-icon, .gallery dd {display: block}
.gallery img.attachment-thumbnail {border: 8px solid #101010}