body {
  margin: 0;
  padding: 0 0 1em 0;
  font-size: 1em;
  line-height: 1.5em;
  color: #414142;
  font-family: Arial;
  background-color: #82ffff00;
}

body.rtl {
  direction: rtl;
}

body.rtl code {
  display: inline-block;
  direction: ltr;
}

body.rtl pre code {
  display: block;
}

/*
CSS中*{}代表的是所有HTML的doc元素标签
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*/

img {
  max-width: 100%;
}

p {
  margin: 1em 0;
}

p code, li code {
  background-color: #ECECEC;
}

/*
h1, h2 {
  font-family: 'Bree Serif', serif;
  font-weight: normal;
}
h1 {
  margin: 1.5em 0;
  font-weight: normal;
  text-align: center;
}*/

h2 {
  font-family: 'Bree Serif', serif;
  margin: 1.2em 0;
  font-weight: normal;
}

a:link {
  color: #D64078;
  text-decoration: none;
}

a:visited {
  color: #D64078;
}

a:hover {
  text-decoration: underline;
}

a:active {
  background-color: black;
  color: white;
}

#menu {
  background-color: whiteSmoke;
  text-align: center;
}

#menu a {
  color: #8F8F8F;
  display: inline-block;
  padding: .5em 1em;
  text-shadow: 0 1px 0 #EDEDED;
  text-decoration: none;
}

#menu a:hover {
  background: rgb(220, 220, 220);
}

#menu .home-link {
  margin-right: 1em;
}

#logo {
  text-align: center;
  background-color: #ededed;
  padding: 1em 0;
}

#logo a {
  text-decoration: none;
  color: #414142;
  position: relative;
}

#logo a:active {
  background: none;
}

#logo img {
  vertical-align: middle;
}

#logo span {
  vertical-align: middle;
  font-size: 2em;
  font-family: 'Bree Serif', serif;
  margin-left: .2em;
}

#translations {
  text-align: center;
  max-width: 400px;
  margin: 0 auto 1em;
}

#translations span {
  margin: 0 .2em;
  white-space: nowrap;
}

#translator {
  text-align: center;
}

#container {
  padding: 1em;
  margin: 0 0 1em 0;
  background-color: white;
}

.content {
  max-width: 600px;
  margin: 1em auto;
}

h1.content {
  margin: .5em auto 1em;
}

/*字的顏色*/
.ipsum {
  color: #734161;
  background-color: #eee;
}

.highlight {
  margin: 2em auto;
  max-width: 600px;
  line-height: 1.2em;
  font-size: 16px;
  direction: ltr;
}

.language-css, .language-html {
  display: block;
  text-shadow: 1px 1px 0 black;
  background-color: #333333;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#000000)); /* Safari 4+, Chrome */
  background-image: -webkit-linear-gradient(top, #333333, #000000); /* Chrome 10+, Safari 5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #333333, #000000); /* Firefox 3.6-15 */
  background-image:      -o-linear-gradient(top, #333333, #000000); /* Opera 11.10-12.00 */
  background-image:         linear-gradient(to bottom, #333333, #000000); /* Firefox 16+, IE10, Opera 12.50+ */
  color: white;
  padding: 1em;
  border-color: rgba(255, 255, 255, 0.3);
  border-width: 3px;
  border-style: solid;
  border-radius: 10px;
  white-space: pre;
}

.language-html:before {
  content: "html";
  float: right;
  color: black;
  text-shadow: -1px 1px 0 #666; /* \m/ */
  font-size: 1.5em;
}

.language-css:before {
  content: "css";
  float: right;
  color: black;
  text-shadow: -1px 1px 0 #666; /* \m/ */
  font-size: 1.5em;
}

/*綠色的框 #6AC5AC*/
/*藍色的框 #98d0f5*/
.elem {
  border: solid  #98d0f5 1px;
  position: relative;
}

.elem p {
  padding: 0 1em;
}

.elem-inline .label, .elem-inline .endlabel {
  position: static;
}

.label, .endlabel {
  position: absolute;
  background-color: #6AC5AC;
  color: #414142;
  line-height: 1em;
}

.label {
  top: 0;
  left: 0;
  padding: 0 3px 3px 0;
}

.endlabel {
  right: 0;
  bottom: 0;
  padding: 3px 0 0 3px;
}

/*框的顏色 #FDC72F*/
/*放grid的框*/
.elem-green {
  border: solid #98d0f5 1px;
}
/*放grid的框view*/
.elem-view {
  border: solid #FDC72F 1px;
}

/*標籤顏色 橘色*/
.elem-green > .label, .elem-green > .endlabel{
  background-color: #FDC72F;
}

/*紅色的框 #D64078*/
.elem-red {
  border: solid #98d0f5 3px;
}

/*紅色的標籤*/
.elem-red > .label, .elem-red > .endlabel{
  color: white;
  background-color: #D64078;
}

/*綠色的框*/
.elem-orange {
  border: solid #96C02E 3px;
}

/*綠色的標籤*/
.elem-orange > .label, .elem-orange > .endlabel{
  background-color: #96C02E;
}

a.nav:before {
  height: 5px;
  width: 100%;
  background: white;
  position: absolute;
  content: "";
  top: -6px;
  left: 0;
}

a.nav {
  background-color: #d64078;
  color: white;
  border-radius: .3em;
  padding: .2em 0;
  position: relative;
  margin: 0 1.5em;
  width: 10em;
  display: inline-block;
  text-decoration: none;
  border: solid #b03060 1px;
  border-bottom: solid #b03060 4px;
  text-shadow: 0px 2px 0 #b03060;
  -webkit-transition: all 0.1s ease-out;  /* Safari 3.2+, Chrome */
     -moz-transition: all 0.1s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.1s ease-out;  /* Opera 10.5–12.00 */
          transition: all 0.1s ease-out;  /* Firefox 16+, Opera 12.50+ */
}

a.nav.prev {
    margin-left: 0;
}

a.nav.next {
    margin-right: 0;
}

a.nav:hover {
  background-color: #c63b6f;
}

a.nav:active {
  border-bottom: solid #b03060 1px;
  top: 4px;
  -webkit-transition: all 0 ease-out;  /* Safari 3.2+, Chrome */
     -moz-transition: all 0 ease-out;  /* Firefox 4-15 */
       -o-transition: all 0 ease-out;  /* Opera 10.5–12.00 */
          transition: all 0 ease-out;  /* Firefox 16+, Opera 12.50+ */
}

.nav-wrapper {
  text-align: center;
  padding: 1em 0;
  clear: both;
}

.prev {
  left: 1em;
  background-color: gray;
  text-shadow: 2px 2px 0 gray;
  border: none;
}

.next {
  right: 1em;
}

footer {
  text-align: center;
}

#share {
  z-index: -9999;
  margin: 0 auto;
  width: 390px;
  text-align: center;
  overflow: hidden;
}

#share li {
  margin: 0;
  list-style: none;
  float: left;
}

#share > li:not(first-child){
  margin-left: 10px;
}

#share #license {

}

#advertisements {
  clear: both;
  margin: 0 auto;
  width: 370px;
  text-align: center;
}

#advertisements span {
  font-size: 10px;
  font-style: italic;
  margin: 0;
}

#advertisements div {
  font-size: 13px;
  text-align: left;
}


@media screen and (min-width:601px) {

  #menu {
    position: absolute;
    top: -16px;
    left: -20px;
    width: 250px;
    padding-top: 2em;
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: rotate(-35deg) translate(-92px, 22px);  /* Safari 3.1+, Chrome */
       -moz-transform: rotate(-35deg) translate(-92px, 22px);  /* Firefox 3.5-15 */
        -ms-transform: rotate(-35deg) translate(-92px, 22px);  /* IE9+ */
         -o-transform: rotate(-35deg) translate(-92px, 22px);  /* Opera 10.5-12.00 */
            transform: rotate(-35deg) translate(-92px, 22px);  /* Firefox 16+, Opera 12.50+ */
  }

  .rtl #menu {
    position: absolute;
    top: -16px;
    left: auto;
    right: -20px;
    width: 250px;
    padding-top: 2em;
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: rotate(35deg) translate(62px, -129px);  /* Safari 3.1+, Chrome */
       -moz-transform: rotate(35deg) translate(62px, -129px);  /* Firefox 3.5-15 */
        -ms-transform: rotate(35deg) translate(62px, -129px);  /* IE9+ */
         -o-transform: rotate(35deg) translate(62px, -129px);  /* Opera 10.5-12.00 */
            transform: rotate(35deg) translate(62px, -129px);  /* Firefox 16+, Opera 12.50+ */
  }

  #menu a {
    display: block;
    padding: .2em 0;
  }

}

@media screen and (max-width:600px) {

  #logo img {
    width: 15%;
  }

}

@media screen and (max-width:404px) {

  a.nav {
    width: 40%;
  }

  h1, #logo span {
    font-size: 1.5em;
  }

}