textarea {width:98%;}
.tutorial-list {position:relative;}
.tutorial-list img.preface {height:128px; width:128px;position:absolute; top:8px;left:8px;}
.tutorial-list li.tutorial-item {position:relative;padding:8px 8px 8px 136px; margin-top: 18px; margin-bottom: 10px;border-top:1px dotted #ccc;}
.tutorial-list .tutorial-buttons {margin-top:8px;}
.tutorial-info {position:absolute;right:20px;bottom:2px;}

.gray {color:#999;}
.chapter-list ul{padding-left:22px;margin-left:0;list-style: none;}/*lus*/
.chapter-list ul li{*list-style: none;}
.chapter-item {padding:8px 4px 4px 4px;position:relative;display:block;border-bottom:1px dotted #ccc;}
.chapter-item:hover{border-bottom:2px solid #0e0;}
.chapter-list .chapter-num, .chapter-list .chapter-title{font-weight:bold; font-size:24px;}
.chapter-list ul .chapter-title{font-weight:bold; font-size:20px;}
.chapter-item .chapter-buttons {position:absolute; right:2px;bottom:4px;}
.content-outer {padding-left:60px;}
.content-inner {background-color:white;padding:28px;}
p.tutorial_p {position:relative;}
.tutorial-footer {margin-top: 18px; margin-bottom:18px; 
background-color: #eee;padding:16px 8px 8px 8px;border-top:2px solid #717171;}
.buttons {margin-top:10px;}
.outter {position:relative;
-webkit-box-shadow:  0px 0px 4px 2px rgba(128, 128, 128, 0.5);
-moz-box-shadow:  0px 0px 4px 2px rgba(128, 128, 128, 0.5);
box-shadow:  0px 0px 4px 2px rgba(128, 128, 128, 0.5);
}
.chapter-prev {position:absolute;left:10px;color:#ccc;-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;background-color:#eee;padding:4px 8px;
opacity:0.5;
filter:alpha(opacity=50);
}
.chapter-next {position:absolute;right:10px;color:#ccc;-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;background-color:#eee;padding:4px 8px;
opacity:0.5;
filter:alpha(opacity=50);
}
.chapter-prev a, .chapter-next a{color:#666;}
.chapter-top{top:5px;}
.chapter-down{bottom:5px;}

/*expander用来缩放窗口*/
.expander {position:absolute;top:5px;right:-17px;width:12px;height:20px;
font-size:20px;
border:1px solid #ccc;
border-left:none;
border-top-right-radius:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
border-bottom-right-radius:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
background-color:white;
padding:2px;
cursor:pointer;
}
.expander:hover{background-color:Khaki;}
/*章节tip*/
.chapter_tip img{float:left;margin-right:4px;padding-bottom:18px;}
.chapter_tip span.tip-label{width:60px;display:block-inline;}

/*文章显示*/
.article {font-size:14px;line-height:1.5em;font-family:微软雅黑;}
.article img {max-width:100%;}
.article h2 {border-bottom: 1px solid #CCC;}
.article h2, .article h3, .article h4, .article h5, .article h6 {margin-top:20px; margin-bottom:10px;}
.alert h2, .alert h3, .alert h4, .alert h5, .alert h6 {margin-top:5px; margin-bottom:2px;}
.alert p {margin-bottom: 2px;}

/*侧边评论样式*/
#paragraph-comments img{float:left;}

/* inline-tag */
.inline-tag {background-color:blue;color:white;
padding: 1px 4px 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor:pointer;
vertical-align:middle;
}

/*三角气泡评论样式*/
.triangle-right {
	position:relative;
	padding:8px;
	margin:4px 0 8px;
	color:#000;
	background:whitesmoke; /* default background for browsers without gradient support */
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
}
.triangle-right:after {
	content:"";
	position:absolute;
	bottom:-20px; /* value = - border-top-width - border-bottom-width */
	left:50px; /* controls horizontal position */
	border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
	border-style:solid;
	border-color:whitesmoke transparent; 
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}
.triangle-right.left {
	margin-left:30px;
	background:whitesmoke;
}
.triangle-right.left:after {
	top:6px; 
	left:-9px; /* value = - border-left-width - border-right-width */
	bottom:auto;
	border-width:0 10px 10px 0; /* vary these values to change the angle of the vertex */
	border-color:transparent whitesmoke; 
}

/*评论计数*/
.para-comments-count:link,
.para-comments-count:visited {
    position: relative;
    /*float: left;*/
    min-width: 15px;
    height: 18px;
    padding: 0 3px;
    border: 1px solid #bbb;
    margin: 0 0 0 5px; 
    text-decoration: none;
    color: #333;
    background: #fff;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 3px;
}

.para-comments-count:hover,
.para-comments-count:focus,
.para-comments-count:active,
.para-comments-count:visited:hover,
.para-comments-count:visited:focus,
.para-comments-count:visited:active {
    text-decoration: underline;
    background-color: blue;
    color: white;
}

.para-comments-count.active {
background:green;
color:white;
}

/* The count tooltip. Not displayed in IE < 8 */

.para-comments-count:before,
.para-comments-count:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -4px;
    width: 0
    height: 0;
    margin: -4px 0 0;
    border-width: 4px 0 4px 4px;
    border-style: solid;
    border-color: transparent #aaa;
}
.para-comments-count.right:before,
.para-comments-count.right:after {
right:auto;
left: -5px;
border-width: 4px 4px 4px 0px;
float:none;

}
.para-comments-count:after {
    right: -3px;
    border-left-color: #fff;
}
.para-comments-count.right:after {
    left: -4px;
    border-right-color: #fff;
}

.para-comments-count:hover:after {
    right: -3px;
    border-left-color: blue;
}
.para-comments-count.active:after {
    right: -3px;
    border-left-color: green;
}

.para-comments-count.right:hover:after {
    right:auto;
    left: -4px;
    border-right-color: blue;
}
.para-comments-count.active.right:after {
    right:auto;
    left: -4px;
    border-right-color: green;
}

/* animate from animate.css swing */
.animated {
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
}

@-webkit-keyframes swing {
	20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
	20% { -webkit-transform: rotate(15deg); }	
	40% { -webkit-transform: rotate(-10deg); }
	60% { -webkit-transform: rotate(5deg); }	
	80% { -webkit-transform: rotate(-5deg); }	
	100% { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes swing {
	20% { -moz-transform: rotate(15deg); }	
	40% { -moz-transform: rotate(-10deg); }
	60% { -moz-transform: rotate(5deg); }	
	80% { -moz-transform: rotate(-5deg); }	
	100% { -moz-transform: rotate(0deg); }
}

@-ms-keyframes swing {
	20% { -ms-transform: rotate(15deg); }	
	40% { -ms-transform: rotate(-10deg); }
	60% { -ms-transform: rotate(5deg); }	
	80% { -ms-transform: rotate(-5deg); }	
	100% { -ms-transform: rotate(0deg); }
}

@-o-keyframes swing {
	20% { -o-transform: rotate(15deg); }	
	40% { -o-transform: rotate(-10deg); }
	60% { -o-transform: rotate(5deg); }	
	80% { -o-transform: rotate(-5deg); }	
	100% { -o-transform: rotate(0deg); }
}

@keyframes swing {
	20% { transform: rotate(15deg); }	
	40% { transform: rotate(-10deg); }
	60% { transform: rotate(5deg); }	
	80% { transform: rotate(-5deg); }	
	100% { transform: rotate(0deg); }
}

.swing {
	-webkit-transform-origin: top center;
	-moz-transform-origin: top center;
	-ms-transform-origin: top center;
	-o-transform-origin: top center;
	transform-origin: top center;
	-webkit-animation-name: swing;
	-moz-animation-name: swing;
	-ms-animation-name: swing;
	-o-animation-name: swing;
	animation-name: swing;
}

.CodeMirror {border: 1px solid #ccc;}