/*  
Theme Name: Postmodern Sublime
Author: Postmodern Sublime
Author URI: http://www.postmodernsublime.com/
*/

/*=== Setup ===*/
*{border: 0;margin: 0;padding: 0; outline: none}
html{height: 100%}
body{background: #fff; color: #eee; font: 12px/1.3  "Century Gothic", Helvetica, Arial, sans-serif; letter-spacing: 0.1em}
p{}
a {color: #DDFF4D;text-decoration: none}
a:active, a:focus {outline: none}
.preview-image{width: 94px; height:69px; background-repeat:no-repeat; background-position: 0 0; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; position: relative; -moz-box-shadow: 0 3px 7px #111; -webkit-box-shadow: 0 3px 7px #111}
		.preview-image a {position: absolute; top:-3px; left:-3px; width: 100px; height: 75px; display: block}
	.has-halo {}
	.has-halo img {opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0)}
img.alignleft, div.alignleft {margin: 0 15px 15px 0}
	img.alignright, .div.alignleft {margin: 0 0 15px 15px}
img.avatar {-moz-box-shadow: 0 3px 7px #111; -webkit-box-shadow: 0 3px 7px #111}
.post img {-moz-box-shadow: 0 3px 7px #111; -webkit-box-shadow: 0 3px 7px #111}
input,select,textarea{font: normal 12px  "Century Gothic", Helvetica, Arial, sans-serif;padding: 2px; background: #fefefe;border:none;-moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 3px 7px #111; -webkit-box-shadow: 0 3px 7px #111}
select{padding: 0}
ul li{list-style: none}
h1, h2, h3{font-weight: normal; letter-spacing: 0.18em; font-variant:small-caps; color: #cccccc; margin: 0 0 12px}
h1{font-size: 16px;}
h2{font-size: 14px;}
h3 {margin: 0 0 12px}
/*=== Layout ===*/
#wrap {width: 100%; height: 1px; position: absolute; top: 40%; left: 0; overflow: visible}
#case{width: 914px; height: 570px; position: absolute; top: -250px; left: 50%; margin: 0 0 0 -500px; overflow: hidden; background: url(images/bg-case.png) no-repeat 0 0; text-align:left; padding: 30px 43px 57px}
/*=== Header ===*/
#header{position:relative; height: 38px}
/*- Logo -*/
#header h1 {margin: 0}
#header #logo{position: absolute; font-size:28px; top: 2px; left: 6px}
#header #logo a{display: block;height: 40px; color: #eee}
#header #logo span {display: block; text-indent: -999em}
#header #description {font-size: 12px; color: #ccc; position: absolute; top: 6px; right: 7px; letter-spacing: 0.25em; margin: 0}
/*main nav*/
	#menu-wrap {position: absolute; right: 0px; bottom: 60px; width: 100%; height: 20px}
	#mainmenu {margin: 0 auto; text-align: center}
	#mainmenu ul {height:20px; display: inline}
		#mainmenu li {display: inline; height: 20px; font: 12px  "Century Gothic", Helvetica, Arial, sans-serif; z-index:100; position:relative; letter-spacing: 0.25em; font-variant:small-caps; text-transform:lowercase}
			#mainmenu ul li a {color: #fff; line-height: 20px; padding: 0 15px;}
			#mainmenu ul li a.home {}
				#mainmenu ul li.current_page_item a, #mainmenu ul li.current_page_parent a, #mainmenu ul li.current-cat a, #mainmenu ul.in-blog li a {color:#DDFF4D}
		
/*=== Main column ===*/
#content{position: relative; width:100%; height: 498px; overflow: hidden; background: #222;}
#main{width: 630px; position: relative; padding: 18px; z-index:11;  height: 462px; border-right: 1px #111 solid; overflow: hidden}
#main.portfolio {width: 688px;}
#main-full {position: relative; padding: 15px; z-index:11;  height: 468px; overflow: hidden}
	.wp-caption {-moz-border-radius: 2px; -khtml-border-radius: 2px;
   -webkit-border-radius: 2px; padding:3px 1px; margin-bottom: 15px }
		.wp-caption img {margin: 0 auto; display: block}
		.wp-caption .wp-caption-text {padding: 3px 3px 0}
		.wp-caption.alignright {margin: 0 0 7px 7px}
		.wp-caption.alignleft {margin: 0  7px 7px 0}
/*=== Post ===*/
.blogpost {padding: 12px 0; margin: 0 12px; clear:both; border-bottom: 1px #111 solid; overflow:hidden }
.blogpost .preview-image {margin: 0 15px 0 3px}
.post {clear: both;}
.post p, .post li, .blogpost p {font-size: 12px; font-family: "Century Gothic", Helvetica, sans-serif; letter-spacing: 0.05em}
.post p, .post ul, .post ol {padding: 0 0 18px}
.read-more a {color: #ddff4d;}
.portfolio .post {padding: 7px 0 0; overflow:hidden}
.witty {font-style:italic; font-size:11px; padding: 5px 0 10px 0; float:right; color: #ccc}
.postmeta{color: #999;font-size: 10px; padding: 0 0 12px; display:block; height: 16px}
	.postmeta div {float:left; height: 16px; line-height: 16px; padding: 0 5px 0 0; margin: 0 5px 0 0}
	.postmeta .time, .postmeta .comment {border-right: 1px #999 solid}
	.sociable {}
	.sociable li {float: left; margin: 0 4px 0 0!important; height: 16px; width: 16px; overflow: hidden}
		.sociable li img {opacity: 0.6; -moz-opacity: 0.6; filter: alpha(opacity=60)}
.blogpost .posted {float: right; color: #999;font-size: 10px;}
.preview-site {float: right; width: 500px; }
	.large-image {width: 500px; height: 375px; background-repeat: no-repeat; background-position: 0 0; -moz-border-radius: 7px; -khtml-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; -moz-box-shadow: 0 5px 10px #111; -webkit-box-shadow: 0 5px 10px #111 }
	.site-actions {margin: 25px auto 0; height: 15px}
		.site-actions div {height: 15px; line-height: 15px; overflow: hidden; text-align: center}
		.site-actions .quick-look {}
		.site-actions a{height: 15px; line-height: 15px;padding: 0 0 0 20px; background: url(images/post-actions.png); background-repeat: no-repeat; margin: 0 7px; color:#ccc; font-size: 11px}
		.site-actions .quick-look a { float: right; background-position: 0 0}
		.site-actions .quick-look a:hover {background-position: 0 -15px}
		.site-actions .quick-look a:active {background-position: 0 -30px}
		.site-actions .visit-site a {margin: 0 auto;background-position: 0 -45px}
		.site-actions .visit-site a:hover {background-position: 0 -60px}
		.site-actions .visit-site a:active {background-position: 0 -75px}
		#TB_ajaxContent {padding: 0 0 15px 0 !important; overflow: visible !important}
		#TB_window {color: #ccc!important;font-family:  "Century Gothic", Helvetica, Arial, sans-serif !important; font-variant: small-caps!important; -moz-border-radius: 15px; -khtml-border-radius: 15px;  -webkit-border-radius: 15px; border-radius: 7px; background: #222!important }
		#TB_title {background: #222 !important; -moz-border-radius-topright: 15px; -moz-border-radius-topleft: 15px; border-radius: 15px;  -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; }
.the_content {float: left; width: 175px; font-size: 11px}
	.the_content a {color: #ccc}
	.the_content p {font-size: 11px}
.next {position: absolute; bottom: 20px; left: 15px; width: 170px; border-top: 1px #111 solid; padding: 10px 0 0; text-align: center; font-size: 10px}
	.next .preview-image {margin: 10px auto}
	.next a {color: #ccc}
.details {padding: 5px 0 0}
	.details .header {color: #ccc}
	
.post ol {margin: 0 0 0 20px}
.post ul{margin: 0 0 0 12px}
.post ul li ul, .post ol li ol{margin-bottom:0px;}
.post ul li {list-style:disc outside;margin: 7px;}
.post ul li ul li {list-style:disc outside;}
.post ol li {list-style:decimal outside }
.post ol li ol li {list-style:decimal-leading-zero outside}
.edit {float:right; font-size: 10px}	
.read-more {float: right; margin: 11px 0 0; font-size: 11px; letter-spacing: 0.25em; font-variant:small-caps; text-transform:lowercase;}

/*=== sidebar == */
#sidebar{width: 242px; height: 100%; position: absolute; top: 0; right: 0; text-transform: lowercase;  height: 500px}
#sidebar.skinny {width: 185px}
.sidebar-content {padding: 20px 15px}
#sidebar li {list-style: none; margin: 0 0 15px}
#sidebar h3 {font-size: 15px; text-transform: lowercase;margin: 0 0 15px; line-height: 1}
	#sidebar h3 a {color: #ccc}
	#sidebar ul{margin: 0; font-size: 11px; text-transform: lowercase; z-index:100; position:relative; letter-spacing: 0.1em;}
		#sidebar ul li{margin: 0 0 5px 0; padding: 0}
		#sidebar ul ul{padding: 3px 0 0 0; margin: 0 0 0 10px; font-size: 90%}
.sidebar-content a {color: #fff; display: block}
.sidebar-content .current_page_item a {color: #DDFF4D}
.featured-posts-more-news {font-size: 80%}

#search {position: relative; width:149px;height: 22px}
	#search #s {width: 143px; padding-left: 5px; font-size: 11px; letter-spacing: 0.18em; font-variant:small-caps; text-transform:lowercase;}
	#search #searchsubmit {background: transparent url(images/bg-search-submit.gif) no-repeat 0 0; position: absolute; top: 5px; right: 5px; height: 12px; width: 12px; border: 0; -moz-box-shadow: none; -webkit-box-shadow: none; }
/*=== Footer ===*/
#footer{width: 914px; position: absolute; bottom: 0; text-align: center; padding: 0 0 3px; font-size: 10px; color: #aaa}
	#footer a {color: #aaa}
/*=== Misc. ===*/
.th{background:#FFFFFF none repeat scroll 0 0;border:1px solid #CCCCCC;padding:2px; float: left; margin: 0 10px 10px 0}
.image-wrap {float:left; margin: 0 15px 15px 0}
.fl{float: left;}
.fr{float: right;}
.gravatar {float:left;border: 1px solid #ccc;margin-right: 7px;}
/*========= COMMENTS =========*/
div#comments {clear: both; border-top: 1px #1a1a1a solid; padding: 12px 12px 12px 0}
.post-a-comment {float: right}
div#comments li {list-style: none}
#comments a {color: #DDFF4D}
.respond {width: 100%; margin: 0 0 0 12px}
	.respond p{margin-bottom:10px;padding:0!important;}
.respond input {-moz-border-radius: 7px; -khtml-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; -moz-box-shadow: 0 5px 10px #111; -webkit-box-shadow: 0 5px 10px #111; padding: 3px 5px}

.fldrequired{
background-image: url(images/bg-required-field.png)!important; background-repeat: no-repeat !important; background-position: 100% 0!important}

ol.commentlist{margin: 10px 0 20px;padding: 0;list-style: none;font-size: 12px;line-height: 20px;}
ol.commentlist p{line-height: 20px;}
ol.commentlist cite{font-style: normal;font-weight: bold;}
ol.commentlist li{padding: 10px 10px 0 10px; border-top:1px solid #1a1a1a;}
ol.commentlist li.alt{}

input#submit {display: block;margin: 15px auto; -moz-border-radius: 7px; -khtml-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; -moz-box-shadow: 0 5px 10px #111; -webkit-box-shadow: 0 5px 10px #111; background: #555; color:#fff; cursor: pointer}

input#submit:hover {-moz-box-shadow: 0 5px 10px #000; -webkit-box-shadow: 0 5px 10px #000; background: #666;}
input#submit:focus {-moz-box-shadow: 0 5px 10px #000; -webkit-box-shadow: 0 5px 10px #000; background: #444; outline: none!important; border: none!important}


ol.commentlist .comment-meta{font-size:10px; float: right; color: #999}	
ol.commentlist li .avatar {float:left;margin-right: 7px;}
ol.commentlist li .even{}
ol.commentlist li ul {margin: 0 -10px 0 20px}
ol.commentlist li ul li {padding: 10px; background: none!important ;}
ol.commentlist li ul li ul li.alt {}
ol.commentlist li .reply {text-align: right; padding: 0 0 10px; font-size: 0.8em}
ol.commentlist li .awaiting-moderation {color: #892e06; font-style: italic; padding: 0 0 5px}
.post-alt p {padding:0;}

.navigation {clear: both; overflow:hidden; font-size: 11px; letter-spacing: 0.25em; font-variant:small-caps; text-transform:lowercase; padding: 12px 0; margin: 0 12px;}
.alignleft{display:inline;float:left;}
.alignright{display:inline;float:right;}
.aligncenter {display: block; margin: 0 auto; text-align: center}

/*Scrollbar */
.jScrollPaneContainer {position: relative;overflow: hidden;z-index: 1;}

.jScrollPaneTrack {position: absolute;cursor: pointer;right: 0;top: 0;height: 100%;	background: #1c1c1c;}
.jScrollPaneDrag {position: absolute;background: #2e2e2e;cursor: pointer;overflow: hidden;}
.jScrollPaneDragTop {position: absolute;top: 0;left: 0;overflow: hidden;}
.jScrollPaneDragBottom {position: absolute;bottom: 0;left: 0;overflow: hidden;}
a.jScrollArrowUp {display: block;position: absolute;z-index: 1;top: 0;right: 0;text-indent: -2000px;overflow: hidden;height: 9px;}
a.jScrollArrowUp:hover {}
a.jScrollArrowDown {display: block;position: absolute;z-index: 1;bottom: 0;right: 0;text-indent: -2000px;overflow: hidden;height: 9px;}
a.jScrollArrowDown:hover {}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {}

/*cover flow for portfolio pages*/
#coverflow {height: 300px; width: 10000px;position: absolute; top: 0px; left: 0px; padding: 65px 0 0}
#coverflow img {float: left; position: relative; margin: 5px; -moz-box-shadow: 0 0 25px #222; -webkit-box-shadow: 0 0 25px #222; cursor: pointer}
#coverflow img:hover{cursor: pointer}
div.wrapper {height: 440px; width: 100%; overflow: hidden; position: relative;}
#demo-frame {overflow: hidden;}

div.demo {
	
}
div.instructions {text-align: center; position: absolute; bottom: 25px; width: 100%; z-index: 99}

/*home page animations*/
#stage {height: 462px; width: 640px; position: relative; overflow: hidden}
.letter {position: absolute; z-index: 2}
#w {left: 15px; top: 168px; width: 56px; height: 53px }
#e1 {left: 69px; top: 168px}
#l {top: 168px; left: 110px}
#c {left: 147px; top: 168px; width: 36px; height: 53px}
#o {left: 187px; top: 170px}
#m {left: 226px; top: 168px; width: 62px; height: 53px}
#e2 {left: 288px; top: 168px; }
/*#w {top: 0; left: 0;  width: 0; height: 0}
#e1 {top: 240px; right: 200px; opacity: 0; filter: alpha(opacity=0); }
#l {bottom: -53px; left: 110px}
#c {left: -100px; top: 300px; height: 0; width: 0}
#o {left: 300px; top: 100px; opacity: 0; filter: alpha(opacity=0);}
#m {bottom: 0; right: 0; width: 0; height: 0}
#e2 {left: 333px; top: 168px; opacity: 0; filter: alpha(opacity=0);}*/
#dot-matrix {height: 100%; width: 100%; position: relative;}
	.dot-row {position: relative; height: 10px; width: 640px; overflow:hidden;}	

.dot {float: left; font-size: 12px; line-height:1; color: #222; cursor:default}
#welcome-message {position: absolute; z-index: 2; top: 245px; left: 22px; text-align: justify; width:460px; /*opacity: 0; filter: alpha(opacity=0)*/}
#lights-out {position: absolute; bottom: 0; left: 0; font-size: 10px; cursor: pointer; z-index: 3; color: #666}