/*! @license
 * Copyright 2012-2015
 *
 * you may not use this file except in compliance with the License.
 * Please contact Haola Tech thru hl@ihaola.com.cn for any personal or business usage
 *
 *Portrait version
 */

html, body {
  background: #eeeeee;
}

.button {
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
  background-color: #EEE;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZiZmJmYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2UxZTFlMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #fbfbfb), color-stop(100%, #e1e1e1));
  background: -moz-linear-gradient(top, #fbfbfb, #e1e1e1);
  background: -webkit-linear-gradient(top, #fbfbfb, #e1e1e1);
  background: linear-gradient(to bottom, #fbfbfb, #e1e1e1);
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #d4d4d4;
  padding: 0;
  font-weight: 300;
  font-size: 14px;
  font-family: "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
  color: #666;
  text-shadow: 0 1px 1px white;
  margin: 4px 0;
  text-decoration: none;
  text-align: center
}

input.button, button.button {
  height: 34px;
  cursor: pointer;
  -webkit-appearance: none
}

.button-block {
  display: block
}

.button.disabled, .button.disabled:hover, .button.disabled:focus, .button.disabled:active, input.button:disabled, button.button:disabled {
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  filter: alpha(opacity=80);
  opacity: .8;
  background: #EEE;
  border: 1px solid #DDD;
  text-shadow: 0 1px 1px white;
  color: #CCC;
  cursor: default;
  -webkit-appearance: none
}

.button-flat {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -moz-transition-property: background;
  -o-transition-property: background;
  -webkit-transition-property: background;
  transition-property: background;
  -moz-transition-duration: .3s;
  -o-transition-duration: .3s;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  background: #EEE;
  border: 0;
  text-shadow: none
}

.button-flat.disabled {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none
}

.button-border {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: .3s;
  -o-transition-duration: .3s;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  color: #666;
  border: 2px solid #666;
  background: 0;
  text-shadow: none
}

.button-border.disabled {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none
}

.button-circle {
  border-radius: 10px;
  -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
  width: 95%;
  padding-left: 3%;
  padding-right: 2%;
  text-align: center;
  line-height: 40px;
  word-break: normal;
  height: 40px;
  border-width: 0
}

.button-circle2 {
  -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.2);
  width: 120px;
  line-height: 120px;
  height: 120px;
  border-width: 0;
  font-size: 16px
}

.button-primary {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYjVlNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOGRiMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #00b5e5), color-stop(100%, #008db2));
  background: -moz-linear-gradient(top, #00b5e5, #008db2);
  background: -webkit-linear-gradient(top, #00b5e5, #008db2);
  background: linear-gradient(to bottom, #00b5e5, #008db2);
  background-color: #00a1cb;
  border-color: #007998;
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0, 40, 50, 0.35)
}

.button-primary:hover, .button-primary:focus {
  background-color: #00a1cb;
  color: #fff;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYzlmZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOGRiMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #00c9fe), color-stop(100%, #008db2));
  background: -moz-linear-gradient(top, #00c9fe, #008db2);
  background: -webkit-linear-gradient(top, #00c9fe, #008db2);
  background: linear-gradient(to bottom, #00c9fe, #008db2)
}

.button-primary:active, .button-primary.is-active, .button-primary.active {
  background: #1495b7;
  color: #005065
}

.button-flat-primary {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -moz-transition-property: background;
  -o-transition-property: background;
  -webkit-transition-property: background;
  transition-property: background;
  -moz-transition-duration: .3s;
  -o-transition-duration: .3s;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  background: #66b3ff;
  color: #fff;
  text-shadow: none;
  border: 0
}

.button-flat-primary.disabled {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none
}

.button-flat-white {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: #fff;
  color: #000;
  text-shadow: none;
  /*border: 0*/
  border: 1px solid #999999;
}

.button-flat-whiteinput {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: #fff;
  color: #000;
  text-shadow: none;
  height: 75px;
  border: 1px solid #5a8200
}

.button-flat-textinput {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: #fff;
  color: #000;
  text-shadow: none;
  height: 60px;
  line-height: 1.5;
  text-align: left;
  border: 1px solid #5a8200
}

.button-flat-black {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: #84bf00;
  color: #fff;
  text-shadow: none;
  border: 1px solid #5a8200
}

.button-flat-red2 {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -moz-transition-property: background;
  -o-transition-property: background;
  -webkit-transition-property: background;
  transition-property: background;
  -moz-transition-duration: .3s;
  -o-transition-duration: .3s;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  background: #9393ff;
  color: #fff;
  text-shadow: none;
  border: 0
}

.button-flat-red2.disabled {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none
}

.button-highlight {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZhOTkxNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q4N2UwNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #fa9915), color-stop(100%, #d87e04));
  background: -moz-linear-gradient(top, #fa9915, #d87e04);
  background: -webkit-linear-gradient(top, #fa9915, #d87e04);
  background: linear-gradient(to bottom, #fa9915, #d87e04);
  background-color: #f18d05;
  border-color: #bf7004;
  color: #fff;
  text-shadow: 0 -1px 1px rgba(91, 53, 2, 0.35)
}

.button-highlight:hover, .button-highlight:focus {
  background-color: #f18d05;
  color: #fff;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZiYTQyZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q4N2UwNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #fba42e), color-stop(100%, #d87e04));
  background: -moz-linear-gradient(top, #fba42e, #d87e04);
  background: -webkit-linear-gradient(top, #fba42e, #d87e04);
  background: linear-gradient(to bottom, #fba42e, #d87e04)
}

.button-highlight:active, .button-highlight.is-active, .button-highlight.active {
  background: #d8891e;
  color: #8d5303
}

.button-border-highlight {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: .3s;
  -o-transition-duration: .3s;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  color: #fff;
  border: 2px solid #fff;
  background: 0;
  text-shadow: none
}

.button-flat-highlight {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -moz-transition-property: background;
  -o-transition-property: background;
  -webkit-transition-property: background;
  transition-property: background;
  -moz-transition-duration: .3s;
  -o-transition-duration: .3s;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  background: #f18d05;
  color: #fff;
  text-shadow: none;
  border: 0
}

.button-flat-highlight.disabled {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none
}

div.img {
  margin: 1px;
  border: 0;
  height: auto;
  width: 110px;
  float: left;
  text-align: center
}

div.img img {
  display: inline;
  margin: 1px;
  border: 0
}

div.desc {
  text-align: center;
  font-weight: normal;
  width: 110px;
  font-size: 12px;
  margin: 3px
}

#cover:before {
  content: "";
  width: 100%;
  height: 20em;
  display: block;
  /*background: url(../Images/wdoc.png) no-repeat;*/
  background-size: 100%;
  margin: 10% auto 0
}

#cover {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  filter: blur(5)
}

.follow {
  margin: 1px;
  border: 1px solid #bebebe;
  height: 30px;
  width: 110px;
  float: left;
  text-align: center
}

div.speech {
  margin: 10px 0;
  padding: 8px;
  table-layout: fixed;
  word-break: normal;
  position: relative;
  /*background: -webkit-gradient(linear, 50% 0, 50% 100%, from(#fff), color-stop(0.1, #ececec), color-stop(0.5, #dbdbdb), color-stop(0.9, #dcdcdc), to(#8c8c8c));*/
  border: 1px solid #dcdcdc;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px
}

div.speech:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left: 15px;
  top: -20px;
  border: 10px solid;
  border-color: transparent transparent #fff transparent
}

div.speech:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left: 17px;
  top: -16px;
  border: 8px solid;
  border-color: transparent transparent #fff transparent
}

div.speech.right {
  /*box-shadow: -2px 2px 5px #1CA0CD;*/
  margin-right: 10px;
  min-width: 120px;
  width: 75%;
  float: right;
  /*background: -webkit-gradient(linear, 50% 0, 50% 100%, from(#e4ffa7), color-stop(0.1, #A0E75A), color-stop(0.4, #aed943), color-stop(0.8, #a7d143), to(#99bf40))*/
  background: #428BCA;
}

div.speech.right:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 9px;
  bottom: auto;
  left: auto;
  right: -10px;
  border-width: 9px 0 9px 10px;
  /* border-color: transparent #989898 */
}

div.speech.right:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 10px;
  bottom: auto;
  left: auto;
  right: -8px;
  border-width: 8px 0 8px 9px;
  border-color: transparent #428BCA;
}

div.speech.left {
  box-shadow: 2px 2px 2px #dcdcdc;
  margin-left: 10px;
  /*width: 75%;*/
  margin-right: 60px;
  float: left;
  background-color: #ffffff;
  /*background: -webkit-gradient(linear, 50% 0, 50% 100%, from(#fff), color-stop(0.1, #eae8e8), color-stop(0.4, #e3e3e3), color-stop(0.8, #dfdfdf), to(#d9d9d9))*/
}

div.speech.left:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 9px;
  bottom: auto;
  left: -10px;
  border-width: 9px 10px 9px 0;
  border-color: transparent #dcdcdc;
}

div.speech.left:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 10px;
  bottom: auto;
  left: -8px;
  border-width: 8px 9px 8px 0;
  border-color: transparent #ffffff
}

.leftimg {
  float: left;
  margin-top: 10px
}

.rightimg {
  float: right;
  margin-top: 10px
}

.leftd1 {
  clear: both;
  float: left;
  margin-left:10px;
  background: url(../Images/wdoclj.jpg) 0 10px no-repeat;
  background-size: 40px 40px;
  padding-left: 40px
}

.leftd2 {
  clear: both;
  float: left;
  background: url(/images/wdocdj.jpg) 0 10px no-repeat;
  background-size: 40px 40px;
  padding-left: 40px
}

.leftd3 {
  clear: both;
  float: left;
  background: url(../Images/mdoc.png) 0 10px no-repeat;
  padding-left: 40px
}

.rightd1 {
  clear: both;
  float: right;
  background: url(../Images/people1.png) right 10px no-repeat;
  margin-right:10px;
  padding-right: 40px
}

.rightd2 {
  clear: both;
  float: right;
  background: url(/images/people2.png) right 10px no-repeat;
  padding-right: 40px
}

.rightd3 {
  clear: both;
  float: right;
  background: url(/images/people3.png) right 10px no-repeat;
  padding-right: 40px
}

.clear {
  clear: both
}

.divh {
  min-height: 200px
}

canvas {
  /*background: #fff;*/
  /*display: block;*/
  left: 50%;
  margin: -51px 0 0 -201px;
  position: absolute;
  top: 10%
}

.xbox {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  width: 100%;
  height: 33%;
  text-align: center;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  font-family: "Microsoft YaHei";
  font-size: 11px
}

.xflex1 {
  -webkit-box-flex: 1;
  width: 50%
}

.xflex2 {
  -webkit-box-flex: 1;
  width: 50%
}

.tbox {
  position: absolute;
  z-index: 999;
  color: rgb(30, 155, 234);
  background: #ffffff;
  text-align: left;
  left: 20px;
  right: 20px;
  top: 20px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: none;
  font-size: 18px;
  line-height: 1.8;
  border: 1px solid rgb(30, 155, 234);
  overflow-y: scroll;
  /*width: 500px;*/
  /*height: 300px;*/
}

.shint {
  margin: 0 auto;
  background: #e5e5e5;
  font-size: 11px;
  font-weight: 600;
  font-family: Helvetica, Arial;
  white-space: nowrap;
  color: #428BCA;
  width: 12%;
  border-radius: 2px;
  padding-top: 2px;
  padding-bottom: 2px
}

.shintmain {
  text-align: center;
  display: inline-block;
  width: 100%
}

.hrcolor {
  color: #007500;
}

.mulbtn_press {
  color: black;
  background: #A0E75A;
  font-size: 12px
}

.mulbtn_ori {
  color: black;
  background: #ffffff
}

.sinbtn_press {
  color: black;
  background: #e4ffa7
}

.sinbtn_ori {
  color: black;
  background: #ffffff
}

.sheader {
  color: #007500;
}