/*----------- initial tags -----------*/
html {background: url("http://codeblog.studiokoi.com/images/back.gif") repeat top left fixed; margin: 0; padding: 0;}
body {height:100px; margin:0; padding:0; text-align: left; font: 76%/140% arial, verdana, sans-serif;}
p, div, h1, h2, h3, h4, h5,ol, ul, li, form, input {margin:0; padding:0;}
img {margin:0; padding:0; border:0;}
ul {list-style: none;}
a {outline:none;}
pre, code {
        overflow:auto;
        width:620px;
        margin:10px 10px 0 10px;
        font-size:1.1em; 
        border:1px #333 dashed;
        display:block;
        background-color:#ccc;
        padding-right:10px;
 	background: url("http://codeblog.studiokoi.com/images/img-back.gif") repeat top left;
        font-weight:bold;
       }
/*----------- universal -----------*/
.float-left {float:left;}
.float-right {float:right;}
.clear {clear:both;}
.center {text-align:center;}

/*----------- search input -----------*/
.textfield {width:190px; color:#666; margin:0; padding:2px; font: 11px/11px verdana, arial, sans-serif; float:left;}
.search-button {margin:0 0 0 10px;}

/*----------- head content -----------*/
#header {background: url("http://codeblog.studiokoi.com/images/top-back.gif") repeat-x top left; height:101px; width:100%; text-align:center;}
#header-inner {
	width: 915px;
	height:101px;
	margin: 0 auto;
	line-height: 1em;
	background-image: url("http://codeblog.studiokoi.com/images/site-logo.jpg");
	background-repeat:no-repeat;
	display:block;
	text-align:right;
}

/*----------- body content -----------*/
#content-containter {width:915px; margin:15px auto; position:relative;}
.post-content {width:650px; margin:0 0 20px 0;}
.post-content p {padding:10px 10px 0px 10px;}
.post-content ol {padding:10px 10px 0px 30px;}
.post-content pre ol {padding:10px 0px 10px 40px;}
.post-content a, .post-content a:visited, .post-content a:active {color:#E68A00; text-decoration:none; font-weight:bold;}
.post-content a:hover {color:#E68A00; text-decoration:none; border-bottom:1px #E68A00 dotted; font-weight:bold;}
.date {font-size:.9em; float:right; margin:1px 20px 0 0; font-weight:bold;}
.post-head {
	background: url("http://codeblog.studiokoi.com/images/content-head.gif") no-repeat;
	display:block;
	width:650px;
	height:25px;
	margin:0 0 -5px 0;
	padding:5px 0 0 10px;
	font-size: 1.2em;
	line-height:.9em;
	color:#333;
	}
.post-content .post-head a,
.post-content .post-head a:hover,
.post-content .post-head a:visited,
.post-content .post-head a:active {text-decoration:none; color:#333; border:none;}
.post-body {display:block; width:650px; background:#fff; color:#333;}
.post-body img {
	padding:7px;
	background: url("http://codeblog.studiokoi.com/images/img-back.gif") repeat top left;
	border:1px #333 dashed;
	}
.post-body object {
        display:block;
	padding:7px;
	background: url("http://codeblog.studiokoi.com/images/img-back.gif") repeat top left;
	border:1px #333 dashed;
	}
.post-body .download:link,
.post-body .download:active,
.post-body .download:visited {background: url("http://codeblog.studiokoi.com/images/download.gif") no-repeat 0 0; display:block; width:139px; height:29px;}
.post-body .download:hover {
        background: url("http://codeblog.studiokoi.com/images/download.gif") no-repeat 0 -29px;
        display:block;
	width:139px;
	height:29px;
	text-decoration:none;
	border:none;
}
.post-bottom {background: url("http://codeblog.studiokoi.com/images/bottom-wh-border.gif") no-repeat; display:block; width:650px; height:7px;}
.post-foot {margin:5px 0 10px 0; font-size:.9em; color:#d5d5d5; text-align:right;}
.post-content  .post-foot a, .post-content  .post-foot a:visited, .post-content  .post-foot a:active {color:#bccfef; text-decoration:none; font-weight:bold;}
.post-content  .post-foot a:hover {color:#bccfef; text-decoration:none; border-bottom:1px #bccfef dotted; font-weight:bold;}

/*----------- comments -----------*/
.comment-box {width:650px; margin:0 0 10px 0;}
.comment-box p {padding:0px 10px 5px 10px;}
.comment-top {background: url("http://codeblog.studiokoi.com/images/top-wh-border.gif") no-repeat; display:block; width:650px; height:7px;}
.comment-body {display:block; width:650px; background:#fff;}
.comment-body a, .post-content a:visited, .post-content a:active {color:#E68A00; text-decoration:none; font-weight:bold;}
.comment-body a:hover {color:#E68A00; text-decoration:none; border-bottom:1px #E68A00 dotted; font-weight:bold;}
.comment-bottom {background: url("http://codeblog.studiokoi.com/images/bottom-wh-border.gif") no-repeat; display:block; width:650px; height:7px;}
.comment-foot {
	background: url("http://codeblog.studiokoi.com/images/comment-pointer.gif") no-repeat 15px 0;
	padding-top:7px;
	font-size:.9em;
	color:#d5d5d5;
	text-align:left;
	}
.comment-foot a, .comment-foot a:visited, .comment-foot a:active {color:#bccfef; text-decoration:none; font-weight:bold;}
.comment-foot a:hover {color:#bccfef; text-decoration:none; border-bottom:1px #bccfef dotted; font-weight:bold;}
.comment-title {width:650px; margin:0 0 15px 0; padding:10px 0 0px 0; border-bottom:1px #d5d5d5 dotted; color:#d5d5d5; font-weight:bold;}
.pagination-box-main {width:650px; margin:0 0 0 0;}
.pagination-box-main p {padding:0px 10px 0 10px; text-align:center;}
.pagination-box{width:650px; margin:0 0 10px 0;}
.pagination-box p {padding:0px 10px 0 10px; text-align:center;}

/*----------- add comment area -----------*/
.comment-entry {display:block; width:650px; background:#fff;}
.comment-entry a, .post-content a:visited, .post-content a:active {color:#E68A00; text-decoration:none; font-weight:bold;}
.comment-entry a:hover {color:#E68A00; text-decoration:none; border-bottom:1px #E68A00 dotted; font-weight:bold;}
.entry-textfield {width:300px;}
.entry-textarea {width:630px; height:200px;}

/*----------- side nav -----------*/
#nav-container {float:right; width:250px; font-size:1em;}
.nav-box {margin-bottom:15px;}
.nav-box ul {margin:0 0 0 18px;}
.nav-box ul li {padding:0 0 3px 0;}
.nav-box a, .nav-body a:visited, .nav-body a:active {color:#d5d5d5; text-decoration:none;}
.nav-box a:hover {color:#d5d5d5; text-decoration:none; border-bottom:1px #d5d5d5 dotted;}
.nav-head-open {
	background: url("http://codeblog.studiokoi.com/images/nav-open-top.gif") no-repeat;
	display:block;
	width:250px;
	height:19px;
	padding:2px 0 0px 10px;
	margin-bottom:-2px;
	font-weight:bold;
	color:#d5d5d5;
	}
.nav-head-open a {
	background:url("http://codeblog.studiokoi.com/images/nav-close-btn.gif") no-repeat;
	float:right;
	margin:1px 13px 0 0;
	display:block;
	width:13px;
	height:13px;
       display:block;
	}
.nav-head-open a:hover {text-decoration:none; border:none;}
.nav-head-closed {
	background: url("http://codeblog.studiokoi.com/images/nav-closed-top.gif") no-repeat;
	display:block;
	width:250px;
	height:19px;
	padding:2px 0 0px 10px;
	margin-bottom:-2px;
	font-weight:bold;
	color:#d5d5d5;
	}
.nav-head-closed a {
	background:url("http://codeblog.studiokoi.com/images/nav-open-btn.gif") no-repeat;
	float:right;
	margin:1px 13px 0 0;
	display:block;
	width:13px;
	height:13px;
       display:block;
	}
.nav-head-closed a:hover {text-decoration:none; border:none;}
.nav-body {padding:10px 10px 0px 10px; background-color:#383838; display:block;}
.nav-foot {background: url("http://codeblog.studiokoi.com/images/nav-open-bottom.gif") no-repeat; display:block; width:250px; height:7px;}

/*----------- side nav list styles -----------*/
#recent-entries ul {list-style: url("http://codeblog.studiokoi.com/images/arrow-orange.gif");}
#catagories ul {list-style: url("http://codeblog.studiokoi.com/images/arrow-blue.gif");}
#archives ul {list-style: url("http://codeblog.studiokoi.com/images/arrow-green.gif");}
#favlinks ul {list-style: url("http://codeblog.studiokoi.com/images/arrow-purple.gif");}

/*----------- footer -----------*/
#footer a, .post-content a:visited, .post-content a:active {color:#E68A00; text-decoration:none; font-weight:bold;}
#footer a:hover {color:#E68A00; text-decoration:none; border-bottom:1px #E68A00 dotted; font-weight:bold;}
#footer {clear:both; color:#d5d5d5; background: url("http://codeblog.studiokoi.com/images/bottom-back.gif") repeat-x top left; height:30px; width:100%; text-align:center;}
#footer-body {
	width: 915px;
	margin: 0 auto;
	line-height: 1em;
	display:block;
        padding:12px 0 0 0;
        text-align:left;
}
.foot-nav {float:right;}

/*----------- content backgrounds ------------*/
.catbox {display:block; width:100px; height:87px; float:right;}
.catbox a, .catbox a:hover, .catbox a:visited,
.catbox a:active{display:block; width:100px; height:87px; text-decoration:none; border:none;}
.News-content .post-body .catbox{background:url("http://codeblog.studiokoi.com/images/news-content-back.jpg") no-repeat top right;}
.CSS-content .post-body .catbox{background:url("http://codeblog.studiokoi.com/images/css-content-back.jpg") no-repeat top right;}
.Flash-ActionScript-content .post-body .catbox{background:url("http://codeblog.studiokoi.com/images/flash-content-back.jpg") no-repeat top right;}
.HTML-content .post-body .catbox{background:url("http://codeblog.studiokoi.com/images/html-content-back.jpg") no-repeat top right;}
.JavaScript-content .post-body .catbox{background:url("http://codeblog.studiokoi.com/images/js-content-back.jpg") no-repeat top right;}
.Photoshop-content .post-body .catbox{background:url("http://codeblog.studiokoi.com/images/ps-content-back.jpg") no-repeat top right;}
.ExpressionEngine-content .post-body .catbox{background:url("http://codeblog.studiokoi.com/images/ee-content-back.jpg") no-repeat top right;}
.Extensions-content .post-body .catbox{background:url("http://codeblog.studiokoi.com/images/ext-content-back.jpg") no-repeat top right;}
.about-content .post-body .catbox{background:url("http://codeblog.studiokoi.com/images/about-content-back.jpg") no-repeat top right;}
.AIR-content .post-body .catbox{background:url("http://codeblog.studiokoi.com/images/air-content-back.jpg") no-repeat top right;}
.Flex-content .post-body .catbox{background:url("http://codeblog.studiokoi.com/images/flex-content-back.jpg") no-repeat top right;}

/*-- flickr --*/
#flickr {margin:0; padding:0;}
#flickr-inner {display:block; height:154px; padding:6px;}
.flickr_badge_image {float:left; padding:2px;}

/*-- nicetitle --*/
div.nicetitle {
	background-color: #333;
	color: #fff;
	font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
	left: 0;
	padding: 4px;
	position: absolute;
	top: 0;
	width: 25em;
	z-index: 20;
	}

div.nicetitle p {margin: 0; padding: 0 3px;}
div.nicetitle p.destination {font-size: 9px; padding-top: 3px; text-align: left;}
div.nicetitle p span.accesskey {color: #d17e62;}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
/* *{padding: 0; margin: 0;} */

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
	font: 12px Arial, Helvetica, sans-serif;
	color: #333333;
}

#TB_secondLine {
	font: 10px Arial, Helvetica, sans-serif;
	color:#666666;
}

#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
	position: fixed;
	z-index:100;
	top: 0px;
	left: 0px;
	height:100%;
	width:100%;
}

.TB_overlayMacFFBGHack {background: url(/images/macFFBgHack.png) repeat;}
.TB_overlayBG {
	background-color:#000;
	filter:alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

* html #TB_overlay { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_window {
	position: fixed;
	background: #ffffff;
	z-index: 102;
	color:#000000;
	display:none;
	border: 4px solid #525252;
	text-align:left;
	top:50%;
	left:50%;
}

* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_window img#TB_Image {
	display:block;
	margin: 15px 0 0 15px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #666;
	border-left: 1px solid #666;
}

#TB_caption{
	height:25px;
	padding:7px 30px 10px 25px;
	float:left;
}

#TB_closeWindow{
	height:25px;
	padding:11px 25px 10px 0;
	float:right;
}

#TB_closeAjaxWindow{
	padding:7px 10px 5px 0;
	margin-bottom:1px;
	text-align:right;
	float:right;
}

#TB_ajaxWindowTitle{
	float:left;
	padding:7px 0 5px 10px;
	margin-bottom:1px;
}

#TB_title{
	background-color:#e8e8e8;
	height:27px;
}

#TB_ajaxContent{
	clear:both;
	padding:2px 15px 15px 15px;
	overflow:auto;
	text-align:left;
	line-height:1.4em;
}

#TB_ajaxContent.TB_modal{padding:15px;}

#TB_ajaxContent p{
	padding:5px 0px 5px 0px;
}

#TB_load{
	position: fixed;
	display:none;
	height:13px;
	width:208px;
	z-index:103;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_HideSelect{
	z-index:99;
	position:fixed;
	top: 0;
	left: 0;
	background-color:#fff;
	border:none;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	height:100%;
	width:100%;
}

* html #TB_HideSelect { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_iframeContent{
	clear:both;
	border:none;
	margin-bottom:-1px;
	margin-top:1px;
	_margin-bottom:1px;
}