/**
 * Reset Global CSS
 * ------------------------------ */
blockquote{margin:10px 0;padding:5px 8px;border:1px solid #ddd;background:#f3f3f3;color:#999;font-family:Consolas,'Lucida Console',Monaco,Courier,'Courier New';font-size:12px;}
code{margin:0 3px;padding:0 5px;border:1px solid #ddd;border-radius:3px;background:#f8f8f8;font-family:Consolas,'Lucida Console',Monaco,Courier,'Courier New';}
pre{position:relative;margin:10px 0;padding:0;color:#333;word-wrap:break-word;}
pre code{display:block;overflow-x:auto;position:relative;margin:0;padding:30px 20px 10px;border:1px solid #ddd;border-radius:3px;background:#f7f7f0;font-family:Consolas,'Lucida Console',Monaco,Courier,'Courier New';font-size:12px;}
pre code:before{content:'Code Examples';position:absolute;top:10px;left:10px;color:#bbb;font:12px/1 Arial;text-shadow:1px 1px 0 #fff;}
pre code.html:before{content:'HTML Code';}
pre code.css:before{content:'CSS Code';}
pre code.js:before{content:'JavaScript Code';}
pre code.php:before{content:'PHP Code';}
pre code ol{list-style:decimal inside;}

a,a:hover{color:#4a89dc;text-decoration:none;}
a:hover{text-decoration:underline;}


/**
 * Layout
 * ------------------------------ */
fieldset{margin:20px 0;padding:20px;border:1px solid #ccc;border-radius:5px;}
fieldset legend{margin-bottom:-10px;padding:0 10px;color:#888;font-weight:bold;font-size:16px;line-height:2;}
fieldset:first-child{margin-top:0;}


/**
 * 布局
 * ------------------------------ */
.wrap{position:relative;}
.wrap:after{visibility:hidden;display:block;font-size:0;content:'';clear:both;height:0;}
.side{float:left;width:280px;}
.side:before{content:'';position:absolute;top:0;left:0;width:280px;height:100%;background:#f5f7fa;box-shadow:3px 0 6px rgba(0,0,0,0.3);z-index:-1;}
.main{overflow:hidden;padding:0 30px 60px 30px;}
.main h2,
.main h3,
.main h4{margin:0.5em 0;font-weight:bold;font-size:24px;line-height:1.5;}
.main h2{margin:15px 0;line-height:30px;}
.main h3{font-size:18px;}
.main h4{font-size:14px;}


/**
 * Logo
 * ------------------------------ */
.logo{padding:10px 15px;background-color:#4a89dc;color:#fff;}
.logo h1{display:inline-block;font-size:24px;line-height:40px;vertical-align:top;}
.logo em{margin-left:1em;font-weight:normal;font-style:normal;font-size:14px;line-height:40px;vertical-align:top;}
.logo a{color:#fff;}
.logo a:hover{color:#e6e9ed;text-decoration:none;}


/**
 * 关于
 * ------------------------------ */
.about{padding:10px 15px;border-bottom:1px solid #ccd1d9;}
.about h2{font-size:16px;line-height:1.5;}
.about ul{overflow:hidden;margin-top:5px;line-height:24px;}
.about li{float:left;position:relative;}
.about li + li{margin-left:10px;padding-left:10px;}
.about li + li:before{content:'';position:absolute;top:15%;bottom:15%;left:0;width:1px;border-left:1px solid #ccc;}
.about li.br{clear:left;margin-top:10px;margin-left:0;padding:0;border-left:none;}
.about li.br ~ li{margin-top:10px;}


/**
 * 导航
 * ------------------------------ */
.nav{margin-top:10px;padding-bottom:100px;}
.nav dl{list-style-type:none;line-height:30px;}
.nav dl + dl{margin-top:10px;}
.nav dt{position:relative;padding-left:15px;font:bold 14px/30px Arial,'\5fae\8f6f\96c5\9ed1';}
.nav dd{border-top:1px solid #ccd1d9;}
.nav dd a{display:block;position:relative;padding:5px 0 5px 30px;line-height:24px;text-transform:capitalize;
/*transition:color 0.2s;*/
}
.nav dd a:before{content:'';position:absolute;top:50%;left:16px;width:0;height:0;margin-top:-5px;border:5px solid transparent;border-left-color:#f5f7fa;
/*transition:border-left-color 0.2s ease-out;*/
}
.nav dd a:after{content:attr(title);display:block;overflow:hidden;color:#aab2bd;font-size:12px;white-space:nowrap;text-overflow:ellipsis;
transition:color 0.2s ease-out;
}
.nav dd a:hover{color:#3bafda;text-decoration:none;}
.nav dd a:hover:before{border-left-color:#3bafda;}
.nav dd a:hover:after{color:#656d78;}
.nav dd.n{background:#e6e9ed;}
.nav dd.n a{color:#3bafda;}
.nav dd.n a:after{color:#656d78;}
.nav dd.n a:before{top:0;left:0;height:100%;margin:0;border:none;border-left:8px solid #3bafda;}

.nav dl.mini dd a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.nav dl.mini dd a:after{display:none;}

.example{position:relative;}
.example + .example{margin-top:40px;}
.example + .example:before{content:'';position:absolute;top:-20px;left:0;width:100%;height:1px;background-color:#ddd;}


/**
 * 表单
 * ------------------------------ */
.form_long dl.row dt{width:10em;}
.form_long dl.row dd{margin-left:11em;}