@charset "UTF-8";
/*
Theme Name: Web Creator Box
Theme URI: http://webcreatorbox.com/
Description: Template for <a href="http://webcreatorbox.com/">Web Creator Box</a>.
Version: 1.0
Author: Mana
Author URI: http://webcreatormana.com/
	
	Please link to this website when you use the code to your website or blog.
	Web Creator Box
	http://webcreatorbox.com
	
	コードをブログやサイトに掲載する際は必ずリンクを張ってください。
	Webクリエイターボックス
	http://webcreatorbox.com

*/


/****************************************

		1. General Setting 

*****************************************/
	
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	}

img{ border: none; }
ul{ list-style: none; }
code{ color:#000099; font-family:"Courier New",Courier,monospace; }
blockquote{
	margin: 1em 2em;
	padding: .5em 1em;
	background-color: #eee;
	font-style:italic;
	}
small{ font-size: 80%; }
.clear{ clear: both; }
.hide{ display: none; }

/*** For Firefox removing dotted line links **	
:focus{ -moz-outline-style: none; }*/

	
body{
    background-color: #fff;
    font: 14px Verdana, Arial,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,'ＭＳ Ｐゴシック', sans-serif;
    color: #666;
	}
	
a{ color: #3cf; }
	a:hover{ color: #1199bb; }
	
#page{ width: 75%; float:right; z-index:2; }
	
#wrapper{ width: 830px; position: relative; }
	



/******************************

		2. Header 

*******************************/

#header{
	background: url(images/catch.jpg) no-repeat 130px 170px;
	height: 400px;
	width: 880px;
	position: absolute;
	top:0;
	left: -50px;
	z-index:3;
	}
	
	#header ul li a.logo{
		background: url(images/logo.jpg) no-repeat;
		width: 224px;
		height: 61px;
		top: 10px;
		left:0;
		}
	#header ul li a.header_twitter{
		background: url(images/header_twitter.jpg) no-repeat;
		width: 121px;
		height: 103px;
		top: 95px;
		right: 95px;
		}
	#header ul li a.rss{
		background: url(images/rss.jpg) no-repeat;
		width: 51px;
		height: 49px;
		top: 200px;
		right: 60px;
		}
		 
	#header ul li a{
		position: absolute;
		text-indent: -9999em;
		}
		#header ul li a:hover{
			background-position:left bottom;
			}
	
	
/*** Search form ***/

	#header form{
		position: absolute;
		top: 10px;
		right: 0;
		}
		
		#header .search{
			background-color:#E8E8E8;
			border:3px solid #C4C4C4;
			color:#666666;
			font-size:110%;
			height:18px;
			padding:3px;
			width:190px;
			}
			
		#header .btn_search{
			background: url(images/btn_search.jpg) no-repeat;
			height:30px;
			width:29px;
			color: transparent;
			border:medium none;
			cursor:pointer;
			overflow: hidden;
			}
			#header .btn_search:hover{
				background-position:left bottom;
				}
		
	
	
	
	
/*******************************

		3. Main 

********************************/
	
#main{
	width: 520px;
	float:left;
	position:relative;
	margin: 380px 30px 40px 10px;
	}
	
	#main h1.headline{
		font-size: 200%;
		margin-bottom: 20px;
		}
	
	#main img{
		border: 1px dashed #ccc;
		padding: 5px;
		margin: 10px 0;
		}

	#main img.alignleft{
		float: left;
		margin: 0 20px 10px 0;
		}

	#main img.alignright{
		float: right;
		margin: 0 0 10px 20px;
		}

	#main img.hatena_user{
		display:block;
		margin:5px;
		padding:0;
		border:none;
		}

	#main .code{
		border:1px dashed #CCCCCC !important;
		padding:10px !important;
		margin:20px 0 !important;
		font-size:80% !important;
		}

	#main strong{ font-weight: bold; }
	#main object{ display:block;margin:10px 0; }
	
	#main .title{
		background: url(images/title_bg.jpg) no-repeat top center;
		font-size: 224%;
		letter-spacing:0.03em;
		padding:45px 30px 30px;
		}
		#main .title a{
			color: #fff;
			text-decoration: none;
			}
			#main .title a:hover{
				color: #1199bb;
				}
				
	#main ul.post_info{
		font-size: 85%;
		margin:10px 0 40px;
		}
		#main ul.post_info li{
			float: left;
			margin-right:15px;
			padding-left:20px;
			height: 17px;
			}
			#main ul.post_info li.tag{ background: url(images/icon_tag.gif) no-repeat top left; }
			#main ul.post_info li.date{ background: url(images/icon_cal.gif) no-repeat top left; }
			#main ul.post_info li.tweetmeme{ background: url(images/icon_twitter.gif) no-repeat top left; }
			#main ul.post_info li.hatebu{padding-left:0;}
			#main ul.post_info li.addthis{ padding:0; margin:0; }
			
	#main img.attachment-post-thumbnail{
		width: 200px;
		height: 160px;
		margin: 0 20px 0 0;
		float: left;
		}
		
	#main a.more-link{
		background: url(images/btn_more.jpg) no-repeat;
		width: 69px;
		height: 26px;
		text-indent: -9999em;
		display: block;
		margin:20px 0 40px 450px;
		}
		#main a.more-link:hover{
			background-position:left bottom;
			}
	
	
	#main .ad_468x60{
		border: 2px solid #ccc;
		margin: 35px 0 25px 20px;
		padding: 5px;
		position:relative!important;
		}
		#main .ad_468x60:hover{
			border: 2px solid #eee;
			}
			
	#main h2.post_h2{
		font-size: 160%;
		border-left: 5px solid #3cf;
		margin: 50px 0 20px 0;
		padding-left: 10px;
		font-weight:bold;
		}
	#main h2.post_h2 a, #main h2.post_h2 a:hover,
	#main h3.post_h3 a, #main h3.post_h3 a:hover{
		color: #666;
		}
		
	#main h3.post_h3{
		font-size: 140%;
		margin: 40px 0 10px 0;
		font-weight:bold;
		}

	#main h4.post_h4{
		font-size: 110%;
		margin: 35px 0 10px 0;
		font-weight:bold;
		}
			
	#main p{line-height: 160%; margin-bottom:10px}
	#main p.wp-caption-text{margin-bottom:30px;}
	#main p.overflow{overflow:hidden}
		
	#main ol.post_ol{
		margin:25px 0 25px 25px;
		padding-left:15px;
		}

	#main ul.post_ul{
		margin:25px 0 25px 25px;
		padding-left:15px;
		list-style-image: url(images/list.gif);
		}
		#main ul.post_ul li, #main ol.post_ol li{
			margin: 10px 0;
			}
		
	#main img.post_img{
		margin: 20px 0;
		}
		
	
	
/*** Below the post ***/

	#main h3.related, h3.comments, h3.comment_title{
		width: 268px;
		height: 82px;
		}
	
	#main h3.related, h3.comments, h3.comment_title, h3.trackback_title, h3.post_comment, h3.trackback_url{
		text-indent: -9999em;
		margin: 60px 0 10px 0;
		}


	
	/*** 3-1. Share ***/
	
	#main ul.share{
		background: url(images/social_bg.jpg) no-repeat;
		width: 499px;
		height: 133px;
		margin: 10px 0;
		padding-left: 20px;
		}
		
		#main ul.share li{
			float: left;
			margin:50px 8px 0;
			}
			
			#main ul.share li a.tweetmeme_big{ text-indent:0; }
			#main ul.share li a.hatena{ background:url(images/social_hatena.png) no-repeat; width: 56px; height:42px;}
			#main ul.share li a.delicious{ background:url(images/social_delicious.png) no-repeat; }
			#main ul.share li a.digg{ background:url(images/social_digg.png) no-repeat; }
			#main ul.share li a.stumble{ background:url(images/social_stumble.png) no-repeat; }
			#main ul.share li a.fb{ background:url(images/social_fb.png) no-repeat; }
			#main ul.share li a.email{ background:url(images/social_email.png) no-repeat; }
			
			.delicious, .digg, .stumble, .fb, .email{ width:51px; height: 47px; }
			
			#main ul.share li a{	
				display: block;
				text-indent: -9999em;
				}
				#main ul.share li a:hover{
					background-position:left bottom;
					}
					
					
	/*** 3-2. Related ***/
	
		#main h3.related{
			background: url(images/title_related.jpg) no-repeat;
			}

	#main ul.related_posts{
		margin:15px 0 15px 25px;
		list-style-image: url(images/list.gif);
		}
		#main ul.related_posts li{
			margin: 10px 0 20px;
			}
	
			/*#main ul.related_posts li{
			margin:10px 10px 20px 0;
			width:220px;
			float:left;
			}*/
			
			#main ul.related_posts h4{
				font-weight:bold;
				margin-bottom: 5px;
				}

			#main ul.related_posts p{
				font-size: 90%;
				line-height: normal;
				}
			
			
	/*** 3-3. Comments ***/
	
		#main h3.comment_title{ background: url(images/title_comment.jpg) no-repeat; clear:both; }
		#main a.post_comment_small{ background: url(images/form_comment.gif) no-repeat; }
		#main div.comment{ background: url(images/comment_bg.jpg) no-repeat 20px 20px; }
		#main div.comment p { margin-bottom: 10px; }

form#commentform label small{ font-size:85%; }
					
					
	/*** 3-4. Trackback ***/
			
		#main h3.trackback_title{
			background: url(images/title_trackback.jpg) no-repeat;
			width: 237px;
			height: 46px;
			}
		#main a.post_trackback{ background: url(images/form_trackback.gif) no-repeat; }
		#main div.trackback{ background: url(images/trackback_bg.jpg) no-repeat 20px 20px; }
					
					
	
	/*** Comments, Trackback ***/
		
		#main a.back_top{
			background: url(images/back_top.gif) no-repeat;
			line-height: 100px;
			}
			
		#main a.back_top, #main a.post_comment_small, #main a.post_trackback{
			padding-left: 25px;
			color: #666;
			text-decoration: none;
			}
			#main a.back_top:hover, #main a.post_comment_small:hover, #main a.post_trackback:hover{
				color: #ccc;
				text-decoration: underline;
				}
			
		#main div.comment, #main div.trackback{
			border: 1px dashed #ccc;
			padding: 30px 30px 20px;
			margin-top: 15px;
word-wrap: break-word;
			}
			#main div p.user_info{
				margin-top: 20px;
				}
				#main div p.user_info span{
					font-size: 85%;
					}
					
	
	/*** 3-5. Post comment ***/
	
		#main h3.post_comment{
			background: url(images/title_comment2.jpg) no-repeat;
			width: 206px;
			height: 46px;
			}
			
		#main form{
			margin-top: 20px;overflow:hidden;width:480px;
			}
			
		#main form input[type="submit"]{
			background: url(images/btn_comment.jpg) no-repeat;
			width:137px;
			height:50px;
			color: transparent;
			border: none;
			cursor: pointer;
			margin:20px 0 20px 300px;
			padding-left: 180px;
			}
			#main form input[type="submit"]:hover{
				background-position:left bottom;
				}
			
			
	/*** 3-6. Trackback URL ***/
	
		#main h3.trackback_url{
			background: url(images/title_track_url.jpg) no-repeat;
			width: 308px;
			height: 46px;
			}
			
		#main .trackback_field{
			background-color:#E8E8E8;
			border:3px solid #C4C4C4;
			color:#666666;
			padding:3px;
			width: 400px;
			margin: 10px 0 40px; 
			}
			
	/*** RT ***/
		#main a.rt{
			background: url(images/rt.png) no-repeat;
			color:#666;
			display:block;
			height:30px;
			margin-bottom:20px;
			padding:10px 0 10px 32px;
			text-decoration:none;
			width:120px;
			}
			#main a.rt:hover{
				color: #ccc;
				text-decoration: underline;
				}
					
				
			


/******************************

		4. Side 

*******************************/

#side{
	width: 270px;
	float:left;
	margin:350px 0 40px;
	}
	
	#side h3{
		text-indent: -9999em;
		margin: 60px 0 10px 0;
		width: 268px;
		height:82px;
		}
	#side h3.ads{
		text-indent: 0;
		margin: 50px 0 10px 10px;
		height: auto;
		}
		

/*** 4-1. Sub category (Tag cloud) ***/

	#side h3.subcat{
		background: url(images/title_subcat.jpg) no-repeat;
		}
		
	#side p.tagcloud{
		text-align: center;
		margin-bottom: 60px;
		}
		#side p.tagcloud a{
			margin: 0 5px;
			white-space:nowrap;
			color: #666;
			text-decoration: none;
			}
			#side p.tagcloud a:hover{
				color: #ccc;
				text-decoration: underline;
				}
			
			

/*** 4-2. Ads ***/
	#side .ad_125{
		border: 2px solid #ccc;
		margin: 1px;
		}
		#side .ad_125:hover{
			border: 2px solid #eee;
			}


/*** 4-3. Popular Links ***/

	#side h3.popular{
		background: url(images/title_popular.jpg) no-repeat;
		}

	#side ul.side_ul{
		margin:15px 0 15px 13px;
		list-style-image: url(images/list.gif);}
		
	#side ul.side_ul li{
		margin: 15px 10px;
		}
		
	#side ul.side_ul h4{
		font-weight: bold;
		}

	#side ul.side_ul p{
		font-size: 90%;
		}

/* For ADS */
#side iframe{ margin:0 10px; }

/*** 4-4. Twitter ***/

	#side h3.twitter{
		background: url(images/title_twitter.jpg) no-repeat;
		}
		
	#side ul#twitter_side li{
		padding:10px 10px 25px;
		background: url(images/line_twitter.gif) no-repeat center bottom;
		word-wrap:break-word;
		}
		
		#side ul#twitter_side span a{
			font-size: 85%;
			color: #ccc;
			text-decoration: none;
			}
			#side ul#twitter_side span a:hover{
				color: #1199bb;
				}
				
	#side a.twitter_side_follow{
		background: url(images/twitter_side.jpg) no-repeat;
			width: 94px;
			height:53px;
			text-indent: -9999em;
			display:block;
			margin:5px 0 0 150px;
			}
			#side a.twitter_side_follow:hover{
				background-position:left bottom;
				}


/*** 4-5. Facebook ***/
	#side h3.likebtn{background: url(images/title_likebtn.jpg) no-repeat;}
		img.logo_fb{margin-left:10px;}

/*** 4-6. Polls ***/
	#side h3.polls{background: url(images/title_polls.jpg) no-repeat;}
	.wp-polls-ul label{float:none;}
	
/*** 4-7. Other websites ***/
	#side h3.other_websites{background: url(images/title_other.jpg) no-repeat;}
	
	
	
	
/******************************

		5. Footer 

*******************************/
	
#footer{
	background: url(images/footer_bg.jpg) repeat-y;
	width: 809px;
	margin: 30px 0 0 10px;
	clear:both;
	font-size: 85%;
	}
	
	#footer h3{
		background: url(images/footer_top_bg.jpg) no-repeat;
		height: 129px;
		text-indent: -9999em;
		}



/*** About/Twitter ***/
		
	#footer div.about{
		width: 345px;
		margin: 10px 60px 0 45px;
		float: left;
		}
		
		#footer div.about h4{
			background:url(images/twitter_mana_top.jpg) no-repeat;
			width: 337px;
			height: 39px;
			text-indent: -9999em;
			margin-top: 15px;
			}

		#footer div.about p{
			line-height: 20px;
			}
			
		#footer div.about #twitter_mana{
			background: url(images/twitter_mana_bg.jpg) no-repeat left bottom;
			padding:0 20px 20px;
			width:297px;
			}
		#footer div.about #twitter_mana p{
			line-height:15px;
			word-break: break-all;
			}
			#footer div.about #twitter_mana span a{
				font-size: 85%;
				color: #ccc;
				text-decoration: none;
				}
				#footer div.about #twitter_mana span a:hover{
					color: #1199bb;
					}
				
		#footer div.about a.twitter_mana_follow{
			background: url(images/twitter_mana_follow.jpg) no-repeat;
			width: 337px;
			height:11px;
			text-indent: -9999em;
			display:block;
			margin-top:15px;
			}
			#footer div.about a.twitter_mana_follow:hover{
				border-bottom:2px dotted #CCCCCC;
				padding-bottom:4px;
				}
				
		#footer form{
			width: 320px;
			float: left;
			overflow: hidden;
			}
				
		#footer div.footer_links{
			background: #fff url(images/footer_bottom_bg.jpg) no-repeat;
			height: 29px;
			line-height: 22px;
			/line-height: 20px; /* IE6, 7 */
			text-align: center;
			clear: both;
			padding-top: 50px;
			}
		
		#footer p.txt_links{display:none;}





/******************************

		6. Form 

*******************************/
		
		form label.lb_name{
			background:url(images/form_name.gif) no-repeat left top;
			}
		form label.lb_email{
			background:url(images/form_email.gif) no-repeat left top;
			}
		form label.lb_website{
			background:url(images/form_website.gif) no-repeat left top;
			}
		form label.lb_comment{
			background:url(images/form_comment.gif) no-repeat left top;
			}
		form label.lb_alt{
			background:url(images/icon_bulb.gif) no-repeat left top;
			}
		form label.lb_banner{
			background:url(images/icon_heart.gif) no-repeat left top;
			}
		form label.lb_twitter{
			background:url(images/icon_formtwitter.gif) no-repeat left top;
			}
		form label.lb_ads{
			background:url(images/form_ad.gif) no-repeat left top;
			}
		form span.ads{ margin:-5px 0 10px;display:block;}
		form label.lb_test{
			background:url(images/form_test.gif) no-repeat left top;
			}
		
		#main form label{ width: 100px; padding-left: 30px; }
		#footer form label{ width: 65px; padding: 6px 0 0 30px; }
		form label{
			height: 21px;
			float:left;
			}
		
	
		#main form input[type="text"], #main form textarea{ width:300px; }
		#footer input[type="text"], #footer textarea { width:200px; }
		#footer .test { position:relative; top:-10px; width:103px !important; }
		#main form .test { position:relative; top:-30px; width:103px !important; }

		#main form .upload, #main form input[type="text"], #main form textarea, #footer input[type="text"], #footer textarea {
			background-color:#E8E8E8;
			border:3px solid #C4C4C4;
			color:#666666;
			padding:3px;
			margin-bottom: 10px;
			}
			
		#main form.form_comment input[type="text"], #footer input[type="text"] {
			height:15px;
			}
		#main form img {border:none;}
			
		#main form textarea{ height:150px; }
		#main form textarea#twitter-ad{ height: 100px;}
		#footer textarea{ height:80px; }
		#main form textarea, #footer textarea{
			font-size:95%;
			}
		#main form #countUp{
		color:#BBBBBB;
		font: 140% Georgia, serif;
		position:relative;
		right:-5px;
		top:-10px;
		}
			
		#footer input[type="submit"] {
			background: url(images/btn_contact.jpg) no-repeat;
			width:125px;
			height:51px;
			color: transparent;
			border: none;
			cursor: pointer;
			}
			#main form input[type="submit"]:hover,#footer input[type="submit"]:hover {
				background-position:left bottom;
				}

		#footer input[type="submit"] {margin-left: 180px;padding-left:165px; }
			
	
	
	
/******************************

		7. Category 

*******************************/

#category{
	width: 25%;
	background: #333333 url(images/bg.jpg);
	position:fixed;
	z-index:1;
	height: 100%;
	float:right;
	top:0
	}
	
#cat_wrapper{
	width: 180px;
	margin-left: auto;
	background: url(images/cat_bg.jpg) repeat-y top right;
	height: 100%;
	padding-top: 10px;
	}
	
	#cat_wrapper ul li a.home{
		background: url(images/home.jpg) no-repeat;
		width:35px;
		height:65px;
		margin: 0 0 150px 30px;
		}	
	#cat_wrapper ul li a.cat_info{
		background: url(images/cat_info.png) no-repeat;
		width:159px;
		height:108px;
		}
	#cat_wrapper ul li a.cat_tech{
		background: url(images/cat_tech.png) no-repeat;
		width:161px;
		height:82px;
		}
	#cat_wrapper ul li a.cat_inspi{
		background: url(images/cat_inspi.png) no-repeat;
		width:179px;
		height:100px;
		margin-top:10px;
		}
		
	#cat_wrapper ul li a{
		text-indent: -9999em;
		display: block;
		}
		#cat_wrapper ul li a:hover{
			background-position:left bottom;
			}
		
		
		

/******************************

		Otheres 

*******************************/
p.gift{margin:25px 0 5px}strong.search-excerpt { background: yellow; }
p.gift a{
	background: url(images/gift.png) no-repeat;
	text-decoration:none;
	font-size:115%;
	font-weight:bold;
	padding: 10px 0 0 32px;
	
	}

	a.btn_sample{
		background: url(images/btn_sample.jpg);
		width:120px;
		height:41px;
		display: block;
		cursor:pointer;
		color:#666;
		font-weight: bold;
		font-size:135%;
		letter-spacing:0.15em;
		padding:14px 0 0 60px;
		margin-top: 20px;
		text-decoration:none;
		}
		a.btn_sample:hover{
			background-position:left bottom;
			color: #19b;
			}
		
	a.sample_spritemenu{
		background: url(images/sprite-menu.jpg);
		width:140px;
		height:30px;
		display: block;
		cursor:pointer;
		padding-top:10px;
		text-align:center;
		color:#fff;
		}

		a.sample_spritemenu:hover{
		background-position:left bottom;
		}

span.codedirection {
    direction:rtl;
    unicode-bidi:bidi-override;
    }





/******************************

		9. Brawser Hacks 

*******************************/			

/* For IE8 */
#header .btn_search{ padding-left: 29px\9; }


/* For IE7 */
*:first-child+html #page{ position:absolute; left:25%; }


/* For IE7,6 */
#header .btn_search{ /padding-left: 29px; }


/* For IE6 */
* html #main { margin: 380px 20px 40px 10px; }
* html #footer div.about{ margin-left: 35px; }


@media screen and (max-width: 1200px) {
  #page{width:82%;}
  #category{width:18%;}
}

@media screen and (max-width: 1000px) {
	#page,#wrapper{width:auto}
	#category{width:18%;}
 	#header{
 		width:625px;
 		left:170px;
 		top:-375px;
 		background:  url(images/catch_s.jpg) no-repeat 20px 170px
 		}
 	#header ul li a.header_twitter{right:35px}
 	#header ul li a.rss{right:0}
 	#main{float:none;margin:380px 0 40px 236px;}
 	#side{
 		float:none;
 		margin: 65px 0 0 182px;
 		width:600px;}
 		#side h3{margin-top:10px;
 		}
 	#side div.side_block{
 		float: left;
		width: 270px;
		padding-left: 30px;
 		}
 		#side div.side_block:nth-child(odd){clear: both}
 	#footer,#footer div.footer_links{background:none;}
 	#footer h3, #footer .about, #footer #contact{
 		display:none
 		}
 	#footer p.txt_links{display:block;}
}