/**
 * 前端规范系列
 *
 * 包括代码风格、编程实践、工作流
 *
 * @mender Anguske
 * @update 2014-11-11
 */

/*
 * Fonts
 */
@font-face {
  font-family: 'fontello';
  src: url('font/fontello.eot');
  src: url('font/fontello.eot#iefix') format('embedded-opentype'),
       url('font/fontello.woff') format('woff'),
       url('font/fontello.ttf') format('truetype'),
       url('font/fontello.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
}


/*
 * Scaffolding and type
 */
html {
  font-size: 11px;
}
@media (min-width: 48em) {
  html {
    font-size: 15px;
  }
}

body {
  overflow-x: hidden;
  margin: 0;
  font: 1rem/1.5 "PT Sans", sans-serif;
  font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", sans-serif;
  color: #5a5a5a;
}

a {
  color: #08c;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4 {
  margin: 0 0 .5rem;
  font-weight: normal;
  line-height: 1;
  color: #2a2a2a;
  letter-spacing: -.05em;
}
h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.75rem; }
h5 { font-size: 1.25rem; }

p {
  margin: 0 0 1rem;
}
.lead {
  font-size: 1.3rem;
}


blockquote {
  position: relative;
  margin: 0 1rem 1rem;
  font-style: italic;
  color: #7a7a7a;
}
blockquote p {
  margin-bottom: 0;
}

ul li {
  margin-bottom: .25rem;
}

/* Tighten up margin on last items */
p:last-child,
ul:last-child,
blockquote:last-child{
  margin-bottom: 0;
}



/*
 * Code
 */
code,
pre {
  font-family: "PT Mono", Menlo, "Courier New", monospace;
  font-size: 95%;
}
code {
  padding: 2px 4px;
  font-size: 85%;
  color: #d44950;
  background-color: #f7f7f9;
  border-radius: .2rem;
}

pre {
  display: block;
  margin: 0 0 1rem;
  line-height: 1.4;
  white-space: pre;
  white-space: pre-wrap;
}
pre code {
  padding: 0;
  color: inherit;
  background-color: transparent;
  border: 0;
}
.highlight {
  margin: 0;
}
.highlight pre {
  margin-bottom: 0;
}
.highlight + .highlight {
  border-left: 1px solid #fff;
}



/*
 * The Grid
 */
.col {
  position: relative;
  padding: 2rem 1rem;
}
.col p {
  max-width: 40rem;
}
.col + .col {
  border-top: 1px solid #dfe1e8;
  background-color: #f7f7f9;
}
@media (min-width: 38em) {
  .col {
    padding: 2rem;
  }
}
@media (min-width: 48em) {
  .section {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .col {
    display: table-cell;
    padding: 3rem;
    vertical-align: top;
  }
  .col + .col {
    border-top: 0;
  }
}

/* Make the ToC a whole section */
.toc {
  position: relative;
  background: #333;
  border-bottom: 1px solid #444;
  text-align: left;
  z-index: 99;
}
@media (min-width: 38em) {
  .toc {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2.6rem;
  }
}
.toc ul {
  margin-top: 0;
  padding-left: 0;
  list-style: none;
}
.logo {
  padding: 0 2rem;
  background: #303030;
  font-size: 2.4rem;
  color: rgba(255,255,255,.5);
  line-height: 1;
}
.page-codestyle .logo { color: #4F81BD; }
.page-practice .logo  { color: rgb(248,100,136); }
.page-workflow .logo  { color: rgb(137,127,221); }
.page-train .logo     { color: rgb(103,245,160); }
@media (min-width: 38em) {
  .logo {
    height: 100%;
  }
}
.logo:hover {
  text-decoration: none;
}
.logo,
.menu,
.menu-item {
  display: inline-block;
  vertical-align: top;
}
.menu-item a {
  display: block;
  padding: 0.6rem 1.6rem;
  color: #ccc;
}
.menu-item a.active,
.menu-item a:hover {
  background: #404040;
  color: #fff;
  text-decoration: none;
}
.menu-sub {
  position: absolute;
  z-index: 10;
  visibility: hidden;
  min-width: 14rem;
  background: #fff;
  box-shadow: 0 0 0.3rem #888;
  white-space: nowrap;
}
.menu-item:hover .menu-sub {
  visibility: visible;
}
.menu-sub li {
  margin-bottom: 0;
}
.menu-sub a {
  padding: 0.4rem 1.5rem;
  color: #666;
}
  .title-codestyle a { color: rgb(40,160,178); }
  .title-practice a  { color: rgb(183,35,71); }
  .title-workflow a  { color: rgb(72,62,156); }
  .title-train a     { color: rgb(38,180,95); }
.menu-sub a:hover {
  background: #f8f8f8;
  color: #000;
}
  .title-codestyle a:hover { color: rgb(40,160,178); }
  .title-practice a:hover  { color: rgb(183,35,71); }
  .title-workflow a:hover  { color: rgb(72,62,156); }
  .title-train a:hover     { color: rgb(38,180,95); }
.menu-sub hr {
  border: none;
  border-top: 1px solid #ccc;
}
.menu-other {
  position: absolute;
  top: 0;
  right: 0;
}
.menu-other .menu-sub {
  right: 0;
}


/*
 * Masthead
 */
.masthead {
  position: relative;
  z-index: 10;
  padding: 5rem 1rem 4rem;
  color: rgba(255,255,255,.5);
  text-align: center;
  background-color: #2a3440;
  box-shadow: 0 2px 5px #aaa;
}
.page-codestyle .masthead { background: #4F81BD; }
.page-practice .masthead  { background: rgb(183,35,71); }
.page-workflow .masthead  { background: rgb(72,62,156); }
.page-train .masthead     { background: rgb(38,180,95); }
@media (min-width: 38em) {
  .masthead {
    margin-top: 2.6rem;
    padding-top: 8rem;
    padding-bottom: 7rem;
  }
}
.masthead h1 {
  color: #fff;
  margin-bottom: .25rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  letter-spacing: .1rem;
}


/*
 * Sections
 */
.heading {
  padding: 2rem 2rem 1.5rem;
  background-color: #dfe1e8;
  border-left: .6rem solid #2a3440;
  box-shadow: 0 0 2rem #bbb inset;
}
.page-codestyle .heading { border-color: #4F81BD; }
.page-practice .heading  { border-color: rgb(183,35,71); }
.page-workflow .heading  { border-color: rgb(72,62,156); }
.page-train .heading     { border-color: rgb(38,180,95); }
@media (min-width: 38em) {
  .heading {
    padding: 3rem 3.5rem 2.5rem;
  }
}
.heading h2 {
  color: #333;
  /*font-weight: bold;*/
  letter-spacing: 1px;
  text-shadow: 2px 2px #bbb;
}
.heading-sub {
  padding: 1rem 0;
  text-align: center;
}
.heading-sub h3 {
  letter-spacing: .1rem;
}

.heading-sub,
.section {
  border-bottom: 1px solid #dfe1e8;
}


/*
 * Footer
 */
.footer {
  padding: 3rem 1rem;
  font-size: 90%;
  text-align: center;
}
.footer p {
  margin-bottom: .5rem;
}
.footer h3 {
  line-height: 1.5;
}
.footer-wrap {
  display: inline-block;
  text-align: left;
}

.ref {
  color: #aaa;
  -webkit-transition: padding-left ease-out .6s, background ease-out .3s;
     -moz-transition: padding-left ease-out .6s, background ease-out .3s;
      -ms-transition: padding-left ease-out .6s, background ease-out .3s;
       -o-transition: padding-left ease-out .6s, background ease-out .3s;
          transition: padding-left ease-out .6s, background ease-out .3s;
}
.ref:target {
  margin-left: -5px;
  padding: 2px 5px;
  background: #ff8;
  border-radius: 3px;
}
.ref-num {
  display: inline-block;
  width: 24px;
  margin-right: 10px;
  text-align: right;
}
.ref:target .ref-num {
  color: #777;
}
.page-codestyle .ref-trans { color: rgb(105,225,243); }
.page-practice .ref-trans  { color: rgb(248,100,136); }
.page-workflow .ref-trans  { color: rgb(137,127,221); }
.page-train .ref-trans     { color: rgb(103,245,160); }
.ref-author {
  color: #aaa;
}


/*
 * Syntax highlighting
 */
.hll { background-color: #ffc }
 /*{ background: #f0f3f3; }*/
.c  { color: #999; } /* Comment */
.err { color: #a00; background-color: #faa } /* Error */
.k  { color: #069; } /* Keyword */
.o  { color: #555 } /* Operator */
.cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */
.cp { color: #099 } /* Comment.Preproc */
.c1 { color: #999; } /* Comment.Single */
.cs { color: #999; } /* Comment.Special */
.gd { background-color: #fcc; border: 1px solid #c00 } /* Generic.Deleted */
.ge { font-style: italic } /* Generic.Emph */
.gr { color: #f00 } /* Generic.Error */
.gh { color: #030; } /* Generic.Heading */
.gi { background-color: #cfc; border: 1px solid #0c0 } /* Generic.Inserted */
.go { color: #aaa } /* Generic.Output */
.gp { color: #009; } /* Generic.Prompt */
.gs { } /* Generic.Strong */
.gu { color: #030; } /* Generic.Subheading */
.gt { color: #9c6 } /* Generic.Traceback */
.kc { color: #069; } /* Keyword.Constant */
.kd { color: #069; } /* Keyword.Declaration */
.kn { color: #069; } /* Keyword.Namespace */
.kp { color: #069 } /* Keyword.Pseudo */
.kr { color: #069; } /* Keyword.Reserved */
.kt { color: #078; } /* Keyword.Type */
.m  { color: #f60 } /* Literal.Number */
.s  { color: #d44950 } /* Literal.String */
.na { color: #4f9fcf } /* Name.Attribute */
.nb { color: #366 } /* Name.Builtin */
.nc { color: #0a8; } /* Name.Class */
.no { color: #360 } /* Name.Constant */
.nd { color: #99f } /* Name.Decorator */
.ni { color: #999; } /* Name.Entity */
.ne { color: #c00; } /* Name.Exception */
.nf { color: #c0f } /* Name.Function */
.nl { color: #99f } /* Name.Label */
.nn { color: #0cf; } /* Name.Namespace */
.nt { color: #2f6f9f; } /* Name.Tag */
.nv { color: #033 } /* Name.Variable */
.ow { color: #000; } /* Operator.Word */
.w  { color: #bbb } /* Text.Whitespace */
.mf { color: #f60 } /* Literal.Number.Float */
.mh { color: #f60 } /* Literal.Number.Hex */
.mi { color: #f60 } /* Literal.Number.Integer */
.mo { color: #f60 } /* Literal.Number.Oct */
.sb { color: #c30 } /* Literal.String.Backtick */
.sc { color: #c30 } /* Literal.String.Char */
.sd { color: #c30; font-style: italic } /* Literal.String.Doc */
.s2 { color: #c30 } /* Literal.String.Double */
.se { color: #c30; } /* Literal.String.Escape */
.sh { color: #c30 } /* Literal.String.Heredoc */
.si { color: #a00 } /* Literal.String.Interpol */
.sx { color: #c30 } /* Literal.String.Other */
.sr { color: #3aa } /* Literal.String.Regex */
.s1 { color: #c30 } /* Literal.String.Single */
.ss { color: #fc3 } /* Literal.String.Symbol */
.bp { color: #366 } /* Name.Builtin.Pseudo */
.vc { color: #033 } /* Name.Variable.Class */
.vg { color: #033 } /* Name.Variable.Global */
.vi { color: #033 } /* Name.Variable.Instance */
.il { color: #f60 } /* Literal.Number.Integer.Long */

.css .o,
.css .o + .nt,
.css .nt + .nt { color: #999; }


/**
 * 追加自定义样式
 */

.hide {
  display: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.middle {
  text-align: center;
}
.middle:before {
  content: "";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}


/* 示例图 */
.decoupling-diagram {
  display: inline-block;
  background: #eee;
  border-collapse: collapse;
  vertical-align: middle;
}
.decoupling-diagram td {
  width: 50%;
  padding: 1rem 2rem;
  border: 1px solid #ccc;
  text-align: center;
}
/*  |xGv00|989ecdce68567b6d98e33e9086543fb6 */