@charset "utf-8";
@import "gecko.css";

/*------------------------------------
  ==  default
------------------------------------*/
.article.tutorial p strong {
	font-weight: bold;
}

.article.tutorial hr {
	border: none;
	margin: 30px 0;
}

 .article.tutorial li {
	min-height:106px;
	margin-bottom: 10px;
}

.article.tutorial li.ss {
	text-align: center;
	margin: 20px 0;
}

.article.tutorial li.ss img {
	border: 1px solid #89eaff;
	-webkit-box-shadow: 0px 0px 2px 3px #89eaff;
	box-shadow: 0px 0px 2px 3px #89eaff;
	padding: 2px;
	max-width: 600px;
}

.article.tutorial li.pochi{background:url("/common/images/list_pochi.png") no-repeat left top;}
.article.tutorial li.neko{background:url("/common/images/list_neko.png") no-repeat left top;}

.article.tutorial li p {
	position:relative;
	background:#fff;
	width:480px;
	margin: -10px 0 0 130px;
	padding:15px;
	border: 1px solid #999;
	border-radius: 10px;
	-webkit-box-shadow: 0px 1px 2px 1px #999;
	box-shadow: 0px 1px 2px 1px #999;
	font-size: 14px;
	font-weight: bold;
}

.article.tutorial li a {
	text-decoration: underline;
}

.article.tutorial p span.recomend {
	font-size: 24px;
}

.article.tutorial p span.recomend strong {
	font-size: 40px;
}

/* Variant : for left positioned triangle
------------------------------------------ */

.article.tutorial li.neko p {
	margin: 5px 0 0 130px;
	color: #ff7cee;
}

.article.tutorial li.neko p strong {
	color: #FF28E2;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.article.tutorial li.pochi p {
	margin: 0 0 0 15px;
	color: #7ccfff;
}

.article.tutorial li.pochi p strong {
	color: #00A5FF;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

.article.tutorial li p:before {
  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:40px; /* controls horizontal position */
  border-width:20px 20px 0;
  border-style:solid;
  border-color:#999 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* creates the smaller  triangle */
.article.tutorial li p:after {
  content:"";
  position:absolute;
  bottom:-13px; /* value = - border-top-width - border-bottom-width */
  left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
  border-width:13px 13px 0;
  border-style:solid;
  border-color:#fff transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* Variant : left
------------------------------------------ */

/* creates the larger triangle */
.article.tutorial li.neko p:before {
  top:15px; /* controls vertical position */
  bottom:auto;
  left:-18px; /* value = - border-left-width - border-right-width */
  border-width:9px 18px 9px 0;
  border-color:transparent #999;
}

/* creates the smaller  triangle */
.article.tutorial li.neko p:after {
  top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  bottom:auto;
  left:-15px; /* value = - border-left-width - border-right-width */
  border-width:7px 15px 7px 0;
  border-color:transparent #fff;
}

/* Variant : right
------------------------------------------ */

/* creates the larger triangle */
.article.tutorial li.pochi p:before {
  top:15px; /* controls vertical position */
  bottom:auto;
  left:auto;
  right:-18px; /* value = - border-left-width - border-right-width */
  border-width:9px 0 9px 18px;
  border-color:transparent #999;
}

/* creates the smaller  triangle */
.article.tutorial li.pochi p:after {
  top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  bottom:auto;
  left:auto;
  right:-15px; /* value = - border-left-width - border-right-width */
  border-width:7px 0 7px 15px;
  border-color:transparent #fff;
}