html {
    overflow: auto;
}
body {
	font: 90%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	background: #fff ;
	margin: 0;
	color: #000;
	padding: 0 2em;
    overflow: hidden;
    position: relative;
    min-width: 1000px;
+background-image(linear-gradient(left, color-stops(#000, #000 50%, transparent 50%, transparent 100%)))
  background-size: 2px 2px
  height: 1px
}
/* ~~ エレメント / タグセレクター ~~ */
ul, ol, dl { /* ブラウザー間の相違により、リストの余白とマージンをゼロにすることをお勧めします。一貫性を保つために、量をここで指定するか、リストに含まれるリスト項目 (LI、DT、DD) で指定できます。より詳細なセレクターを記述しない限り、ここで指定する内容が .nav リストにも適用されることに注意してください。 */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* 上マージンを削除すると、マージンを含む block からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
	padding-right: 15px;
	padding-left: 15px; /* block 自体ではなく block 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要になります。代わりに、両側に余白を指定した block をネストして使用することもできます。 */
}

a img {border: none;}
/* ~~ サイトのリンクのスタイル付けは、ホバー効果を作成するセレクターグループも含め、この順序にする必要があります。~~ */
a:link {
	color: #42413C;
	text-decoration: none; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}
a:visited {
	color: #6E6C64;
	text-decoration: none;
}
a:hover, a:active, a:focus { /* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
	text-decoration: none;
}
/* ~~ この固定幅コンテナが他のすべての block を囲みます。~~ */
.container {
	width: 1000px;
	margin: 0 auto;
}
/* ~~ ヘッダーには幅は指定されません。ヘッダーはレイアウトの幅全体まで広がります。~~ */
*:first-child+html body{
	background: url(/prx/000/http/web-marketing.zako.org/images/bkg/bkg_1407.png) repeat-x;
}
*:first-child+html header {
    padding: 0;
    margin: 0;
	border-bottom:none;
}
*:first-child+html #breadcrumb{border-top: none;}
*:first-child+html #social_box{
	margin-left:-1080px;
}

header {
	background:#ff9c04;
    padding: 0 500%;
    margin: 0 -500%;
	overflow-x:hidden;
	border-bottom:#777 1px solid;
	box-shadow: 0px 9px 3px -3px rgba(189, 189, 189, 0.65098);
  -webkit-box-shadow: 0px 9px 3px -3px rgba(189, 189, 189, 0.65098);
  -moz-box-shadow: 0px 9px 3px -3px rgba(189, 189, 189, 0.65098);
}

#logo {
float: left;
font-size: 15px;
line-height: 140%;
font-weight: bold;
width: 450px;
padding-left: 10px;
height: 55px;
background: url(/prx/000/http/web-marketing.zako.org/images/bkg/logo140711.png) top left no-repeat;
}
#logo a{
display: block;
/*background: url(/prx/000/http/web-marketing.zako.org/images/bkg/logo140711.png) no-repeat;*/
outline: none;
/* padding-top: 45px; */
color: #333;
font-size: 1.1em;
text-decoration: none;
padding: 20px 0 50px 170px;
}

header form#cse-search-box {
float: right;
width:215px !important;
padding: 14px 5px;
height: 30px;
}


header #cse-search-box input[type="submit"] {
background: url(/prx/000/http/web-marketing.zako.org/images/bg/ic_search.png) no-repeat scroll 50% 50%;
border: 0 none;
height: 25px;
margin-left: -26px;
overflow: hidden;
text-indent: -9999px;
width: 20px;
-webkit-appearance: none;
}

h1#banner-desc, h2#banner-desc {
position: absolute;
top: 60px;
margin-left: -15px;
z-index: 0;
font-size: .9em;
line-height: 2.5em;
font-weight: normal;
}

/* ~~ レイアウトに使用するカラムです。~~
*/

#left{
	padding: 10px;
	width: 660px;
	float: left;
	border: 1px solid #dadada;
	margin-bottom: 10px;
	line-height: 140%;
	box-shadow: 0 1px 3px #777;
}

#right {
float: right;
width: 300px;
padding-bottom: 10px;
}


#breadcrumb{
	display: block;
	font-size: .8em;
	padding: 5px 500% 10px;
	margin: 35px -500% 0;
	border-top: #ccc 1px dotted;
}

#breadcrumb li:after{
	content:">";
	margin-left: 3px
}

#breadcrumb li:last-child:after{
content:none;
}

#banner-desc{
	font-size: .8em;
	font-weight: normal;
}

.content {
	padding: 10px;
	width: 660px;
	float: left;
	background:#fff;border:1px solid #dadada;margin-bottom:10px;line-height:140%;
}


.content h1,.content h2 {
font: bold 22px/28px Meiryo,メイリオ,'Lucida Grande',Verdana;
letter-spacing: -1px;
margin-bottom: 10px;
border-left: #f90 7px solid;
padding: 4px;
}
.content h1 a,.content h2 a{
	color: #222;
}

.content h3 {
font-size: 1.6em;
border: 0;
margin: .5em 0;
font-weight: bold;
padding:10px 0 10px 10px;
border-left: 7px double #c13a01;
line-height:120%;
}

.content h4 {
font-size: 1.3em;
padding: .4em .9em;
margin: 2.3em 0 .8em;
font-weight: bold;
border-left: 7px solid #ff6d2f;
}

ul#gnav {
	padding: 18px;
	float: right;
}

#gnav li, #breadcrumb li {
	display: inline;
}

#gnav a {
padding: 17px 5px;
text-decoration: none;
color: #000;
}

#gnav a:before{
	content: url("/prx/000/http/web-marketing.zako.org/images/bg/allow12.gif");
	margin-right: 2px;
}

#gnav a:hover{
	background: #F38025;
}

/* ~~ このセレクターグループは、.content 内のリストに領域間隔を指定します。~~ */
.content ul, .content ol {
	padding: 0 15px 15px 40px; /* この余白は、上述の見出しと段落ルールの右の余白を表します。下の余白はリスト内の他のエレメントとの間隔用に配置され、左の余白はインデント作成用に配置されています。これは必要に応じて調整できます。 */
}
.contents-box{padding-bottom: 15px;margin: 0px 10px 15px 5px;border-bottom: dotted 1px #CCC;min-height:120px;}.t_title {margin: 0px;padding: 0px;font-size: 16px;font-weight: bold;}.contents-box img {float: left;margin-right: 15px;margin-top: 0px;min-height:110px;box-shadow: 0 0 30px 0 #999, inset 0 0 1px 1px #fff;}.clearfix {display: block;}.contents_des_box {padding-top: 0px;margin-left: 125px;}.contents_des {font-size: 12px;color: #333;}

.yarpp-thumbnails-horizontal .yarpp-thumbnail, .yarpp-thumbnail-default, .yarpp-thumbnail-title {display: inline-block;*display: inline;}.yarpp-thumbnails-horizontal .yarpp-thumbnail {border: 1px solid rgba(127,127,127,0.1);width: 125px;height: 220px;margin-left: 0px;vertical-align: top;}.yarpp-thumbnail > img, .yarpp-thumbnail-default {width: 120px;height: 120px;margin: 5px;}.yarpp-thumbnails-horizontal .yarpp-thumbnail > img, .yarpp-thumbnails-horizontal .yarpp-thumbnail-default {display: block;}.yarpp-thumbnails-horizontal .yarpp-thumbnail-title {font-size: 1em;max-height: 6.8em;line-height: 1.4em;margin: 3px;margin-top: 0px;width: 120px;text-decoration: inherit;overflow: hidden;}.yarpp-thumbnail-default {overflow: hidden;}.yarpp-thumbnail-default > img {min-height: 110px;min-width: 110px;padding:2px}.yarpp-thumbnails-horizontal a:hover{background-color: #ddd;}table {border-collapse: collapse;margin-left:1em;}

#left ul.category {margin:10px 0;}
#left ul.category li a:hover {
background: #ccc;
text-decoration: underline;
}
#left .category{border: #ccc 1px solid;margin: 10px 0;border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;}

#left .category ul{
display: table;
padding: 0;
margin: 0;
}
#left .category ul li {
float: left;
list-style: none;
}

#left .category ul li:nth-child(3n), #left .category ul li:nth-child(3n+2) {
border-left: #ccc 1px solid;
}
#left .category ul li:nth-child(n+4) {border-top: #ccc 1px solid;}
#left .category ul li a {
display: block;
width: 208.5px;
padding: 5px;
text-decoration: none;
font-size: 85%;
}
#left .category ul li a strong {
display: block;
margin-bottom: 1px;
font-size: 105%;
font-weight: bold;
}
.searchbox {
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border: 1px solid #ccc;}
.gsc-control-cse{background: none !important;border: none !important;height: 20px;}

.searchbox p {padding-left:2em;}

.clearfix {display: block;}
.clear{clear:both}
.pageNav{color:#2583ad;background:white;margin:1em auto;line-height:2em;text-align:center}a.page-numbers,.pageNav .current{color:#00019b;padding:2px .4em;border:solid 1px #ccc;text-decoration:none;font-size:smaller}a.page-numbers:hover{color:white;background:#328ab2}.pageNav .current{color:white;background:#328ab2;border-color:#328ab2;font-weight:bold:}.pageNav .next,.pageNav .prev{border:0 none;background:transparent;text-decoration:underline;font-size:smaller;font-weight:bold}

.listbox-inner{
	width:620px;

	padding:7px 0 0;
	margin-bottom:15px;
	margin-left:10px;
	z-index:3;
}
.listgray{background:#e8e8e8 url(/prx/000/http/web-marketing.zako.org/wp-content/themes/statement/images/hikaku/listbox-bg.png) no-repeat;}
.listgray:after{ background:#e8e8e8 url(/prx/000/http/web-marketing.zako.org/wp-content/themes/statement/images/hikaku/menubox-bg-bottom.png) left bottom;}

asid{
	margin:0 0 10px;
	display: block;
}
aside.bg{
	background: #F8C577;
}
div.bgpad {
	padding: 0 10px 10px;
}

.fb-like-box{
	background: #fff;
}

aside li{
	list-style: none;
}

aside h4 {
  position: relative;
  color: #111;
  background: #fff;
  font-size: 20px;
  line-height: 1;
  border :2px solid #555;
  margin: 30px -10px -5px -10px;
  padding: 15px 5px 12px 10px;
  border-radius: 3px;
}
aside.bg h4{
	margin-top: 0;
}
aside.sideTopAd h4{
	margin-bottom: 5px;
}
aside h4:after,aside h4:before {
  content: "";
  position: absolute;
  top: 100%;
  height: 0;
  width: 0;
}
aside h4:after {
  left: 33px;
  border: 11px solid transparent;
  border-top: 11px solid #fff;
}
aside h4:before {
  left: 30px;
  border: 14px solid transparent;
  border-top: 14px solid #555;
}

aside h5 {
  position: relative;
  color: #111;
  background: #fff;
  font-size: 18px;
  line-height: 1;
  border :2px solid #CCC;
  margin: 0 -10px -25px -10px;
  padding: 10px 5px 7px 10px;
  border-radius: 3px;
}
aside h5:after,aside h5:before {
  content: "";
  position: absolute;
  top: 100%;
  height: 0;
  width: 0;
}
aside h5:after {
  left: 33px;
  border: 11px solid transparent;
  border-top: 11px solid #fff;
}
aside h5:before {
  left: 30px;
  border: 14px solid transparent;
  border-top: 14px solid #CCC;
}

#gadgets form{
	padding:5px 8px;
}

a.feedly:before{
	content: url("/prx/000/http/web-marketing.zako.org/images/bg/feedly-follow-16.png");
}

#gadgets a:before{
	content: url("/prx/000/http/web-marketing.zako.org/images/bg/allow12.gif");
	margin-right: 2px;
}

/* ~~ ナビゲーションリストのスタイル付け (Spry などの事前作成済みのフライアウトメニューを使用する場合は削除できます) ~~ */
#right nav ul {
	list-style: none; /* リストのマーカーを削除します。 */
	/*border-top: 1px solid #B1ABAB;  リンク用の上部のボーダーを作成します。他のすべてのものは LI 上で下部のボーダーを使用して配置されます。 */
	margin-bottom: 15px; /* 下のコンテンツのナビゲーション間の間隔を作成します。 */
	background: #F8C577;
	padding: 10px;
}
#right nav ul li {
	border-bottom: 1px solid #B1ABAB; /* ボタンの区切り線を作成します。 */
}
#right nav ul a, #right nav ul #right a:visited { /* これらのセレクターをグループ化することで、リンクのボタン表示が訪問後も確実に保持されます。 */
	/*padding: 15px 5px 15px 15px;*/
	padding: 10px 5px 10px 15px;
	display: block;
	width: 260px;  /*この幅により、IE6 でボタン全体をクリックできるようになります。IE6 をサポートする必要がない場合は削除できます。適切な幅を計算するには、サイドバーコンテナの幅からそのリンクの余白を減算します。 */
	text-decoration: none;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */

}
#right nav ul a:hover, #right nav ul a:active, #right nav ul a:focus, .category ul li a:hover { /* マウスを使用する場合もキーボードを使用する場合も、背景色とテキストカラーを変更します。 */
background: #ffa84c; /* Old browsers */
background: -moz-linear-gradient(top,  #ffa84c 0%, #ff7b0d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa84c), color-stop(100%,#ff7b0d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffa84c 0%,#ff7b0d 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffa84c 0%,#ff7b0d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 ); /* IE6-9 */

}

.googlepublisherpluginad {
margin-top: -10px;
}

nav p {
	margin:10px 0
}
ul.module-list {
margin: 20px 0 10px;
}
/* ~~ フッター ~~ */
footer {
    padding: 10px 500%;
    margin: 0 -500%;
	overflow-x:hidden;
	background: #222;
	color: #FFF;
	position: relative;/* IE6 に、適切にクリアするための hasLayout を指定します。 */
	clear: both; /* この clear プロパティにより .container は、カラムの範囲がどこまでかを認識してその範囲を含めるようになります。 */
	white-space: nowrap;
}
footer a:link,footer a:visited{
	color: #f90;
}
footer a:hover{
	color: #fff;
}
footer ul li{
	display: inline;
	margin-left: 10px;
}
/*footer ul li:before{
	content: url("/prx/000/http/web-marketing.zako.org/images/bg/allow12.gif");
	margin-right: 2px;
}*/

/*HTML 5 サポート - 新しい HTML 5 タグを display:block に設定します。これにより、ブラウザーでタグが適切にレンダリングされます。 */
header, section, footer, aside, nav, article, figure {
	display: block;
}
table.entry {border-collapse: collapse;margin:1em;}table.entry th, td{padding:3px;}th {border: solid 1px #666;color: #000;background-color: #9DFF9A;}table.entry td {border: solid 1px #666;background-color: #fff;text-align:center;width:35%;}table.entry thead th{background-color: #0E7C01;color: #FFF;}thead th a:link,thead th a:visited{color: #FFF;}
table.tdleft td {text-align:left;}

.floatleft{float:left;margin:0 0 10px 10px}.floatright{float:right;margin:0 0 10px 10px}

#social_box_wrap{
	width:960px;
	margin:10px auto;
}

#social_box{
	background: #E4E1E1;
	width:60px;
	padding: 15px 20px 15px 10px;
	margin-left:-120px;
	text-align:center;
	position:fixed;
	top:150px;
	list-style-type:none;
	border-radius: 5px;
}

#main{
	width:660px;
	float:left;
}

#side{
	width:300px;
	float:left;
}

/*記事に関する設定*/
p.thumb img {
border: none;
margin: 0 auto;
display: block;
}
p.thumb img, .content p img, .wp-caption {
padding: 4px;
-webkit-box-shadow: 0 0 30px 0 #999, inset 0 0 1px 1px #fff;
-moz-box-shadow: 0 0 30px 0 #999, inset 0 0 1px 1px #fff;
box-shadow: 0 0 30px 0 #999, inset 0 0 1px 1px #fff;
}

.content p, .content ul, .content ol{
font-size: 1.1em;
line-height: 1.6em;
margin: 0 1em 1.3em;
padding-bottom: 7px;
color: #4d4b4c;
}

.content a, #breadcrumb a{
	color: #36c;
}
.content a:hover, #breadcrumb a:hover {
color: #a90000;
text-decoration: underline;
}

.allinfos{font-size:11px;height:15px;padding:3px 0 10px}
.allinfos span{background:url(/prx/000/http/web-marketing.zako.org/images/bg/csg-4d5fcaa6e77fe.png) no-repeat top left;padding-left:20px}
span.comments{background-position:0 0;width:16px;height:16px}
span.date{background-position:0 -66px;width:16px;height:16px}
span.cat{background-position:0 -132px;width:16px;height:16px}
span.author{background-position:0 -198px;width:16px;height:16px}

ul.add, ul.commentlist {
display: block;
list-style: none;
line-height: 2;
padding: 20px;
background: #F1F1F1;
box-shadow: rgba(112, 112, 112, 0.65098) 0px 0px 6px 3px;
-webkit-box-shadow: rgba(112, 112, 112, 0.65098) 0px 0px 6px 3px;
-moz-box-shadow: rgba(112, 112, 112, 0.65098) 0px 0px 6px 3px;
}

.adsense{font-size:.9em;padding:0 0 10px 15px;}
.google-ad2{width:300px;height:300px;font-size:.9em;padding:10px 0;clear:both}
.unit{height:17px;min-height:17px;padding:8px 10px;border-top:1px #ccc solid;border-bottom:1px #ccc solid;margin-bottom:10px}
.rakuad{padding-left: 30px;}


.head-line dl {margin:0;padding:.5em;width:600px;background-color:#fff;font-size:1em;}
.head-line dt {margin:0;padding:.5em;font-weight:bold;background-color:#e0e0e0;}
.head-line dd {margin:0;padding:0;padding-top:.5em;padding-bottom:.5em;}
.head-line dd {padding-left:.5em;border-left:1px solid #333;clear:both;}
.head-line dd {margin-top:.5em;margin-bottom:.5em;clear:both;}

.contents-box img {float: left;margin-right: 15px;margin-top: 0px;}
.clearfix {display: block;}
.contents_des_box {padding-top: 0px;margin-left: 125px;}
.ads_top{margin:10px 30px 30px}
.more{text-align:right;padding:0 5px}
.picture{width: 400px;}

.floatleft{float:left;margin:0 0 10px 10px}
.floatright{float:right;margin:0 0 10px 10px}

.content strong { background: linear-gradient(transparent 40%, #ff9 40%); }

.content b {color:#C02903;}
p.desc{padding:10px;background:#f9f5dc}

.wp-caption.alignnone {margin: 5px 10px 10px;}
.wp-caption {border: 1px solid #D7D7D7;max-width: 96%;padding: 15px 3px 10px;text-align: center;font-size: .7em;}
p.wp-caption-text{margin-bottom: 0;}
.wp-caption img {border: 1px solid #D7D7D7;}

article#left img {
    max-width: 600px;
    height: auto;
}

h5.tips {
position: relative;
font-size: 1em;
font-weight: bold;
margin: 2.4em 0 1.5em;
padding: 0.5em 0.5em 0.5em 2.0em;
}
div.ml-5{margin-left: 3px !important;padding: 15px 10px 10px 5px;}

h5.tips:before {
content: "□";
font-size: 130%;
position: absolute;
color: #f08300;
top: -0.8em;
left: 0.3em;
height: 12px;
width: 12px;
}

h5.tips:after {
content: "□";
font-size: 130%;
position: absolute;
color: #f04900;
top: -0.5em;
left: 0;
height: 12px;
width: 12px;
}
#left .yarpp-related {
    margin: 2em 0 !important;
}

/* PrismJS 1.10.0
http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript&plugins=line-highlight+line-numbers+toolbar+show-language */
/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

code[class*="language-"],
pre[class*="language-"] {
	color: #f8f8f2;
	background: none;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
	border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #272822;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #f8f8f2;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
	color: #f92672;
}

.token.boolean,
.token.number {
	color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #a6e22e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
	color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function {
	color: #e6db74;
}

.token.keyword {
	color: #66d9ef;
}

.token.regex,
.token.important {
	color: #fd971f;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

pre[data-line] {
	position: relative;
	padding: 1em 0 1em 3em;
}

.line-highlight {
	position: absolute;
	left: 0;
	right: 0;
	padding: inherit 0;
	margin-top: 1em; /* Same as .prism’s padding-top */

	background: hsla(24, 20%, 50%,.08);
	background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));

	pointer-events: none;

	line-height: inherit;
	white-space: pre;
}

	.line-highlight:before,
	.line-highlight[data-end]:after {
		content: attr(data-start);
		position: absolute;
		top: .4em;
		left: .6em;
		min-width: 1em;
		padding: 0 .5em;
		background-color: hsla(24, 20%, 50%,.4);
		color: hsl(24, 20%, 95%);
		font: bold 65%/1.5 sans-serif;
		text-align: center;
		vertical-align: .3em;
		border-radius: 999px;
		text-shadow: none;
		box-shadow: 0 1px white;
	}

	.line-highlight[data-end]:after {
		content: attr(data-end);
		top: auto;
		bottom: .4em;
	}

.line-numbers .line-highlight:before,
.line-numbers .line-highlight:after {
	content: none;
}

pre.line-numbers {
	position: relative;
	padding-left: 3.8em;
	counter-reset: linenumber;
}

pre.line-numbers > code {
	position: relative;
    white-space: inherit;
}

.line-numbers .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: 0;
	font-size: 100%;
	left: -3.8em;
	width: 3em; /* works for line-numbers below 1000 lines */
	letter-spacing: -1px;
	border-right: 1px solid #999;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}

	.line-numbers-rows > span {
		pointer-events: none;
		display: block;
		counter-increment: linenumber;
	}

		.line-numbers-rows > span:before {
			content: counter(linenumber);
			color: #999;
			display: block;
			padding-right: 0.8em;
			text-align: right;
		}
pre.code-toolbar {
	position: relative;
}

pre.code-toolbar > .toolbar {
	position: absolute;
	top: .3em;
	right: .2em;
	transition: opacity 0.3s ease-in-out;
	opacity: 0;
}

pre.code-toolbar:hover > .toolbar {
	opacity: 1;
}

pre.code-toolbar > .toolbar .toolbar-item {
	display: inline-block;
}

pre.code-toolbar > .toolbar a {
	cursor: pointer;
}

pre.code-toolbar > .toolbar button {
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	line-height: normal;
	overflow: visible;
	padding: 0;
	-webkit-user-select: none; /* for button */
	-moz-user-select: none;
	-ms-user-select: none;
}

pre.code-toolbar > .toolbar a,
pre.code-toolbar > .toolbar button,
pre.code-toolbar > .toolbar span {
	color: #bbb;
	font-size: .8em;
	padding: 0 .5em;
	background: #f5f2f0;
	background: rgba(224, 224, 224, 0.2);
	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
	border-radius: .5em;
}

pre.code-toolbar > .toolbar a:hover,
pre.code-toolbar > .toolbar a:focus,
pre.code-toolbar > .toolbar button:hover,
pre.code-toolbar > .toolbar button:focus,
pre.code-toolbar > .toolbar span:hover,
pre.code-toolbar > .toolbar span:focus {
	color: inherit;
	text-decoration: none;
}