@charset "utf-8";

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans'), local('OpenSans'), url('../fonts/opensans.woff2') format('woff2'), url('../fonts/opensans.woff') format('woff'), url('../fonts/opensans.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Italic'), local('OpenSans-Italic'), url('../fonts/opensansitalic.woff2') format('woff2'), url('../fonts/opensansitalic.woff') format('woff'), url('../fonts/opensansitalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('../fonts/opensanssemibold.woff2') format('woff2'), url('../fonts/opensanssemibold.woff') format('woff'), url('../fonts/opensanssemibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url('../fonts/Robotocondensed.woff2') format('woff2'), url('../fonts/Robotocondensed.woff') format('woff'), url('../fonts/Robotocondensed.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: local('Roboto Condensed Italic'), local('RobotoCondensed-Italic'), url('../fonts/Robotocondenseditalic.woff2') format('woff2'), url('../fonts/Robotocondenseditalic.woff') format('woff'), url('../fonts/Robotocondenseditalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'), url('../fonts/Robotocondensedbold.woff2') format('woff2'), url('../fonts/Robotocondensedbold.woff') format('woff'), url('../fonts/Robotocondensedbold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}



body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, input, textarea, p {
  margin: 0;
  padding: 0;
  border: 0 none;
}

header, nav, section, article, aside, footer {
  display: block;
}

body{
  font-family: 'Open Sans', sans-serif;
  background: url(../pictures/body_bg.jpg);
}

a {
  text-decoration: none;
}

table {
  border-collapse: collapse;
  border-color: #d4d4d4;
}

td, th {
  padding: 7px;
  border-color: #d4d4d4;
}

blockquote {
    font-style: italic;
    font-family: Georgia, Times, "Times New Roman", serif;
    padding: 2px 0;
    border-style: solid;
    border-color: #ccc;
    border-width: 0;
}

.tabb{
  border-collapse: collapse;
  border: 1px solid #d4d4d4;
}

.tabb td, .tabb th{
  border: 1px solid #d4d4d4;
}

.tabb td.nb{
  border: 0;
}

#mainNav .wrap, #content, footer .wrap, #navHolder .sub {
  width: 68%;
}

#leftCol, #rightCol {
  width: 16%;
}

header {
  background: url(../pictures/header_bg.jpg);
  height: 200px;
  width: 100%;
  display: table;
}

header .wrap {
  display: table-row;
}

header .item {
  width: 33%;
  vertical-align: top;
  display: table-cell;
  text-align: center;
}

header .socBtn {
  margin: 25px 0 0 0;
}

header .socBtn img {
  margin: 0 10px;
  opacity: 0.9;
}

header .socBtn img:hover {
  opacity: 1;
}

#mainNav {
  background-color: #2F2F2F;
  font: 90%/150% "Trebuchet MS", Helvetica, sans-serif;
  text-align: center;
  border-top: 1px solid #8D8D8D;
}

#mainNav .wrap {
  margin: 0 auto 0 auto;
  display: table;
  border-collapse: collapse;
}

#mainNav .wrap .main {
  display: table-row;
}

#mainNav a.f {
  color: #FFF;
  display: table-cell;
  padding: 0.7% 0px;
  width: 16%;
  border-left: 1px solid #757575;
  border-right: 1px solid #757575;
  vertical-align: middle;
}

#mainNav a.fhover {
  background-color: rgb(255, 255, 255);
  color: #5a5a5a;
}

#navHolder .sub {
  font: 90%/150% "Trebuchet MS", Helvetica, sans-serif;
  display: none;
  position: absolute;
background-color: rgb(255, 255, 255);
  border-bottom: solid 1px #D1D1D1;
  box-shadow: 0 10px 10px 1px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

#navHolder .sub li {
  display: block;
  float: left;
  width: 29%;
  margin-right: 3%;
  border-right: dashed 1px rgb(231, 223, 189);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#navHolder .sub a {
  padding: 5% 7%;
  color: #5a5a5a;
  display: inline-block;
}

#navHolder .sub a:hover {
  color: #B75A5A;
}

#content {
margin: 0px auto;
float: left;
box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.1), 10px 0px 25px #F6F6F6 inset;
z-index: 1;
background-color: #FBFBFB;
}

#content .header {
  font-family: 'Roboto Condensed', sans-serif;
  overflow: hidden;
  margin: 1% 0px 0px;
  color: #626262;
}

#content .header h1 {
  font-size: 40px;
  line-height: 1.2;
  margin: 0.3% 0 0.7% 1.5%;
  font-weight: normal;
}

#content .banner {
  margin: 1% 0 1% 0;
  clear: both;
  overflow: hidden;
}

#crumbsBar {
  font-size: 20px;
  margin: 1% 1.5%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#crumbsBar a {
  color: #6C8742;
  text-decoration: underline;
}

#crumbsBar a:hover {
  color: #bb401f;
}

article {
  font-size: 18px;
  line-height: 30px;
  color: #313131;
}

article h2 {
  margin: 20px 0;
  font-family: 'Roboto Condensed', sans-serif;
  color: #565656;
}

article h3 {
  font-size: 130%;
  margin: 15px 0;
}

article h4 {
  font-size: 100%;
  margin: 3px 0;
}

article p {
  margin: 0 0 15px 0;
}

article a {
  color: #4F7725;
  text-decoration: underline;
}

article a:hover {
  color: #D55B3B;
}

article a:visited {
  color: #778667;
}

article li {
  margin: 0 0 5px 4%;
}

article ul {
  margin: 0 0 10px 0;
}

article .bottom {
  background-color: #E7EAED;
  padding: 15px;
  border-top: 1px dashed #FBF8F0;
  border-bottom: 1px dashed #FBF8F0;
  overflow: hidden;
  margin-top: 2%;
  box-shadow: inset 0 0 5px 5px #DBE1E3;
  clear: both;
}

#leftCol {
  color: #4d4d4d;
  float: left;
  overflow: hidden;
}

#leftCol a {
  color: #40561D;
  text-decoration: underline;
}

#leftCol a:hover {
  color: #D55B3B;
}

#leftCol a.dashed {
  border-bottom: dashed 1px #617049;
  text-decoration: none;
}

#leftCol .block {
background-color: #FBFBFB;
margin: 10% 0px 10% 20%;
padding: 5%;
border-radius: 10px 0px 0px 10px;
border-left: solid 1px #E9E9E9;
border-top: solid 1px #E9E9E9;
border-bottom: solid 1px #E9E9E9;
font-size: 14px;
}

#leftCol .cats {
  margin: 0px 0px 20px;
  padding: 10px 20px;
  font-size: 14px;
}

#leftCol .cats h3 {
  margin: 0 0 10px 0;
  text-align: center;
}

#leftCol .banner, #rightCol .banner {
  display: block;
  margin: 10% auto 0 auto;
  width: 95%;
  overflow: hidden;
}

#rightCol {
  float: left;
}

#rightCol .item {
  margin: 10% auto 0 auto;
  width: 80%;
  text-align: center;
}

footer {
  background: url(../pictures/footer_bg.png) repeat-x top;
  font-size: 90%;
  line-height: 1.5;
  color: #fff;
  height: 163px;
  clear: both;
  margin: 40px 0 0 0;
  overflow: hidden;
}

footer .wrap {
  margin: 80px auto 0 auto;
  overflow: hidden;
}

footer .bottom {
  display: block;
  float: right;
  margin: -1% 3% 0 0;
}

footer p {
  display: block;
  float: left;
  margin: 0 1% 0 0;
  padding: 0 1% 0 0;
  border-right: solid 1px #958A80;
}

footer p.ctr {
  border: 0;
}

footer a {
  color: #D7C6A0;
}

footer a:hover {
  color: #E1C076;
}

#lastComments {
  font-family: Arial;
  color: #59544F;
  margin: 10% 0 0 0;
}

#lastComments a {
  text-decoration: underline;
  color: #ce8a5f;
}

#lastComments a:hover {
  color: #BC3D34;
}

#lastComments .c {
padding: 5px;
margin: 20px auto;
overflow: hidden;
max-height: 190px;
clear: both;
background-color: RGBA(252, 252, 246, 0.8);
width: 81%;
font-size: 12px;
border-bottom: solid 2px #eee;
}

#lastComments .hr {
height: 5px;
}

#lastComments .date{
  font-size: 10px;
  font-weight: normal;
}

/*  */

label{
    cursor: pointer;
}

.clear {
  clear: both;
}

.btn {
  border-radius: 5px;
  text-decoration: none;
  border-bottom: 1px solid #D4D4D4;
  text-align: center;
}

.btn:active {
  border-top: 1px solid #D4D4D4;
  border-bottom: 0 none;
  opacity: 0.8;
}

.notification {
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #DDCCB7;
  color: #625749;
  margin: 2% auto;
  padding: 1%;
  font-size: 85%;
  background-color: #FFEFA4;
  border-radius: 10px;
  width: 75%;
}

.gray {
  color: #757575;
}

.red {
  color: #B42C2C;
}

.yellow {
  color: #B39411;
}

.green {
  color: #3F8D3F;
}

.marker {
  padding: 0 2px;
  background-color: #FFFEAE;
}

.ch {
	font-family: "Helvetica Neue",Helvetica,Arial,STXihei,STHeiti,SimSun,sans-serif;
  color: #3A6216;
  font-size: 135%;
}

.pn {
  color: #707070;
  font-family: "Helvetica Neue",Helvetica,Arial,STXihei,STHeiti,SimSun,sans-serif;
  letter-spacing: 0.5px;
  font-weight: normal;
}

.pn::before {
  content: '[';
  margin-right: 1px;
}

.pn::after {
  content: ']';
  margin-left: 1px;
}

.rus {
  color: #535353;
}

.imageLeft, .imageRight, .imageCenter {
  margin: 10px 10px 0 0;
  background-color: #FFF;
  padding: 7px;
  border: dashed 1px #eee;
}

.imageLeft {
  float: left;
  clear: left;
}

.imageRight {
  float: right;
  clear: right;
}

.imageCenter {
  margin: 10px auto 10px auto;
  display: block;
}

a.dashedLink {
  border-bottom: 1px dashed #4F7725;
  text-decoration: none;
}

.ajaxWaiting {
  margin: 10px auto;
  background: url(../pictures/ajaxWaiting.gif) no-repeat;
  height: 21px;
  width: 56px;
}

.spoiler {
  display: none;
  border: 1px dashed #CBBAA7;
}
/*  */


ul.inlined li {
  display: inline-block;
  list-style: outside none none;
  background-color: #F3E5B6;
  padding: 5px 10px;
  margin: 5px 10px 5px 0;
  border-radius: 7px;
  font-size: 14px;
}

.std_m15
{
  margin: 1.5%;
}

/*  */

.abc {
  clear: both;
  margin: 1% 0 1% 0;
  text-align: center;
}

.abc a {
  display: inline-block;
  margin-right: 1%;
  background: #fff;
  width: 1.6em;
  height: 1.6em;
  font-size: 0.8em;
  line-height: 1.6em;
  text-decoration: none;
  border-radius: 5px;
  box-shadow: 0 1px 1px 0 #DDD;
}

.abc a:hover {
  box-shadow: none;
}

.ajaxMoreBtn {
  display: block;
  width: 30%;
  margin: 1% auto;
  background: #fff;
  font-size: 80%;
  padding: 0.5%;
}

#topMenu, .infoBar {
  font-size: 80%;
  clear: both;
  padding: 1% 1.5%;
  overflow: hidden;
}

#topMenu a, .infoBar a {
display: block;
float: left;
font-size: 13px;
margin: 0px 1px 0px 0px;
color: #fff;
padding: 1px 10px;
text-decoration: none;
background-color: #83a45b;
border-bottom: 2px solid #7d9948;
}

#topMenu a:hover, .infoBar a:hover {
background-color: rgb(253, 253, 253);
color: rgb(108, 108, 108);
border-top: 1px solid rgb(231, 231, 231);
border-bottom: 1px solid rgb(255, 255, 255);
}

.infoBar {
  padding-top: 0;
}

#topMenu a:hover, .infoBar a:hover {
  color: #CF5B26;
}

.cascadeCats {
  font-size: 90%;
}

.cascadeCats h3 {
  margin-top: 1.5%;
}

.cascadeCats p {
  margin-left: 1.5%;
}

/* Comments */

#comments {
  border-top: 2px dashed #FFF;
  border-bottom: 2px dashed #FFF;
  padding: 15px 0 35px 0;
  font-size: 18px;
  line-height: 1.5;
  color: #3C3C3C;
  background-color: #F9F9F3;
  clear: both;
  margin-bottom: 20px;
}

#comments h3 {
 text-align: center;
font-size: 40px;
color: #bababa;
margin-bottom: 25px;
}

#comments .top, #comments .message, #comments .bottom {
  width: 70%;
  margin: 1px auto;
  overflow: hidden;
}

#comments .top .avatar {
  height: 75px;
  width: 75px;
  background-color: rgb(203, 224, 245);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  float: left;
  margin: 0 10px 0 0;
  border-radius: 50%;
  border: solid 6px #F9F9F3;
}

#comments .top .title {
  font-size: 21px;
  margin-top: 11px;
}

#comments .top .title a {
  color: rgb(15, 101, 185);
}

#comments .top .title a:hover {
  text-decoration: underline;
}

#comments .top .title a.dashed {
  text-decoration: none;
  color: rgb(129, 129, 129);
  border-bottom: dashed 1px rgb(129, 129, 129);
}

#comments .top .date {
  font-size: 14px;
}

#comments a.replyLink {
  font-size: 14px;
  display: block;
  background-color: #efebe3;
  padding: 3px 15px;
  float: right;
  border-radius: 0 0 5px 5px;
  color: #7b6550;
  margin-right: 10px;
}

#comments a.replyLink:hover {
  background-color: rgb(252, 221, 49);
  color: #333;
}

#comments .message {
  background-color: #fff;
  box-sizing: border-box;
  padding: 15px;
  margin-top: -7px;
  border-radius: 10px;
}

.addCommentForm {
  clear: both;
  margin: 40px 0;
}

.addCommentForm textarea, .addCommentForm input[type=text] {
  padding: 8px;
  background-color: #FCFCFC;
  border-radius: 5px;
  border: 1px solid #E7E7E7;
  box-shadow: 0px 1px 1px 1px #F6F6F6 inset;
  font-size: inherit;
  font-family: inherit;
  margin: 0 auto;
  width: 60%;
  display: block;
  box-sizing: border-box;
}

.addCommentForm textarea:focus, .addCommentForm input[type=text]:focus {
  border: solid 1px #ffe88b;
}

.addCommentForm input[type="submit"] {
  background-image: linear-gradient(to bottom, #8CBACF, #437793);
  width: auto;
  margin: 20px auto;
  padding: 8px 35px;
  border-radius: 5px;
  color: #FFF;
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  display: block;
  box-sizing: border-box;
}

.addCommentForm input[type="submit"]:active {
  box-shadow: inset 1px 1px 3px 0 RGBA(56, 56, 56, 0.47);
  background-image: linear-gradient(to bottom, #77A0B3, #6698B3);
}

#userID {
  background-color: #E9F7F9;
  padding: 10px;
  margin: 0 auto;
  box-sizing: border-box;
}

#userID label {
  margin-right: 15px;
}

.answerBar {
  background-color: #E9F7F9;
  padding: 10px;
  width: 60%;
  margin: 0 auto;
  box-sizing: border-box;
}

.answerBar a {
  color: rgb(105, 130, 189);
  border-bottom: dashed 1px rgb(105, 130, 189);
}

.answerBar .deleteBtn {
  width: 25px;
  height: 25px;
  line-height: 25px;
  cursor: pointer;
  font-size: 18px;
  text-align: center;
  float: right;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 5px;
  margin: 0 0 0 10px;
  background-color: #CAE6F2;
}

.answerBar .deleteBtn:hover {
  background-color: #F5FCFF;
}
/* */

#userContent {
  display: table;
}

#userContent h3 {
  margin: 0;
}

#userContent h4 {
font-size: 20px;
margin: 0 0 10px 0;
}

#userContent .item {
  overflow: hidden;
  display: table-row;
}

#userContent .leftCol, #userContent .rightCol {
  display: table-cell;
  vertical-align: top;
  padding: 0 25px 20px 0;
}

#userContent .photo {
  float: left;
  width: 150px;
  height: 170px;
  overflow: hidden;
  background-color: #FFF;
  text-align: center;
  margin-top: 7px;
}

#userContent .loc {
  font-weight: bold;
  margin: 0 0 1% 0;
  font-size: 90%;
}

#userContent li {
  list-style-type: square;
}

#userContent .row {
  clear: both;
  overflow: hidden;
  margin: 0 0 10px 0;
  border-bottom: 1px dotted #E7E2D7;
}

#userContent .key, #userContent .val {
  float: left;
  padding: 0.5%;
}

#userContent .key {
  width: 33%;
  color: #636363;
}

#userContent .val {
  width: 61%;
  margin-left: 2%;
}

.cats .item {
  margin: 0 0 15px 15px;
  overflow: hidden;
}

#downloads .item {
  margin: 3% 0;
  overflow: hidden;
  border-bottom: 1px dashed rgb(101, 91, 76);
  padding-bottom: 1%;
}

#downloads .secondary, #downloads .panel {
  font-size: 80%;
}

#downloads .panel {
  margin-top: 2%;
}

#downloads .info {
  font-weight: bold;
}

#downloads .downloadLink {
  background: #fff;
  padding: 0.3% 2%;
  margin-right: 1%;
}

#examplesList .item {
  margin: 2% 0;
  border-bottom: dashed 1px #DBD3C8;
}

#hieroglyph .caption {
  font-size: 70%;
}

#hieroglyph .ch, #hieroglyph .pn, #hieroglyph .rus {
  line-height: normal;
  margin-bottom: 2%;
}

#hieroglyph .ch {
  font-size: 300%;
  margin-bottom: 1%;
}

#hieroglyph .pn, #hieroglyph .rus {
  font-size: 120%;
}

.hieroglyphsList {
  width: 100%;
  border-collapse: collapse;
}

.hieroglyphsList .num {
 text-align: center;
 color: #BCBCBC;
}

.hieroglyphsList td {
  padding: 10px;
}

.hieroglyphsList tr {
  border-bottom: dotted 1px #CCC;
}

.hieroglyphsList tr:nth-last-child(1) {
  border: none;
}

.hieroglyphsList tr:hover {
  background-color: #FCFCFC;
}

.hieroglyphsList .pn {
  font-size: 16px;
}

#strokesOrder {
  background-color: #fff;
  padding: 1.5%;
  border-top: 1px dashed #FBF8F0;
  border-bottom: 1px dashed #FBF8F0;
  margin-top: 2%;
}

#strokesOrder h3 {
  margin: 0 0 1.5% 0;
  font-size: 95%;
  font-weight: bold;
}

#strokesOrder h3 a {
  text-decoration: none;
  color: #AEAEAE;
}

#strokesOrder h4 {
  font-size: 100%;
  font-weight: normal;
  margin: 10px 0 3px 0;
}

#lesson .item {
  margin: 0 0 50px 0px;
}

#news .item {
  margin: 0 0 25px 0;
}

#news .date {
  font-weight: bold;
  color: #727272;
}

.pagination {
  width: 60%;
  margin: 3% auto;
  overflow: hidden;
}

.pagination .item {
  border: 1px solid #cccccc;
  margin: 0.5%;
  background-color: #ffffff;
  display: block;
  height: 1.8em;
  width: 1.8em;
  line-height: 1.8em;
  text-align: center;
  float: left;
  border-radius: 5px;
}

.pagination a {
  text-decoration: none;
}

#photos {
  overflow: hidden;
  clear: both;
  text-align: center;
}

#photos .wrap {
  width: 10em;
  height: 10em;
  display: inline-block;
  overflow: hidden;
  border: 1px solid #FFF;
  margin: -8px 0 0 0;
}

#photos .photo {
  position: relative;
  left: -4em;
  top: -1em;
  width: 20em;
}

.placesTb {
  width: 100%;
}

.placesTb td {
  padding: 10px;
}

.place {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  background-color: #2D2D2D;
  overflow: hidden;
}

.place .map {
  width: 300px;
  margin: 40px 0 40px 40px;
  border: solid 4px #fff;
  float: left;
}

.place .title {
  background-color: rgba(0, 0, 0, 0.5);
  margin-top: 60px;
  overflow: hidden;
}

.place .title .leftCol {
  float: left;
  width: 50%;
  text-align: right;
  color: #fff;
}

.place .title .rightCol {
  float: left;
  width: 48%;
  margin-left: 2%;
  color: #e5e5e5;
}

.place h3 {
  line-height: 0.9;
}

.place h4, #place h5 {
  line-height: normal;
}

.place .info {
  float: left;
  margin: 40px;
  overflow: hidden;
  color: #333333;
}

.place .info p {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px 20px 20px 10px;
  font-size: 24px;
}

.place .caption {
  font-size: 14px;
  margin: 0;
}

.formattedTable {
  margin: 15px auto 15px auto;
  border-collapse: collapse;
}

.formattedTable td {
  border: 1px solid #E6DFD6;
  padding: 10px;
}

.formattedTable thead {
  background-color: #FBF8EB;
}

#user {
  line-height: 2;
}

#vuzes h2 {
  margin: 0;
  line-height: normal;
}

#vuzes p {
  margin: 0 0 20px 15px;
}

.video {
  background-color: #000;
  text-align: center;
  padding: 10px;
  color: #AAA;
  border-top: dashed 2px #666;
  border-bottom: dashed 2px #666;
}

.form {
  margin: 1.5%;
  overflow: hidden;
}

.form h5 {
border-bottom: 1px solid #8DA16A;
margin: 30px 0px;
color: #8DA16A;
}


.form .required::after {
  content: ' * ';
  color: #DB0000;
}

.formError {
  padding: 3px;
  font-size: 14px;
  background-color: #F8EE85;
  box-sizing: border-box;
}

.formError::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: #F8EE85;
  position: relative;
  top: -10px;
  float: left;
  transform: rotate(45deg);
}

.form input[type=text], .form input[type=password], .form select, .form textarea {
  padding: 8px;
  background-color: #FCFCFC;
  border-radius: 5px;
  border: 1px solid #E7E7E7;
  box-shadow: 0px 1px 1px 1px #F6F6F6 inset;
  font-size: inherit;
  font-family: inherit;
}

.form input[type=text], .form input[type=password] {
  padding: 9px;
}

.form input[type=text]:focus, .form input[type=password]:focus, .form select:focus, .form textarea:focus {
  border: solid 1px #ffe88b;
}

.form .row {
  margin: 0 0 20px 0;
  overflow: hidden;
  clear: both;
}

.form .label, .form .field {
  float: left;
}

.form .label {
  width: 20%;
  color: #6C6C6C;
  text-align: right;
  padding: 8px 0;
}

.form .field {
  width: 60%;
  margin-left: 2%;
}

.form input[type=submit], .form input[type=button] {
  padding: 8px 35px;
  border-radius: 5px;
  color: #FFF;
  background-image: linear-gradient(to bottom, #E56E70, #D24846);
  font-weight: bold;
  font-family: inherit;
  font-size: inherit;
}

.form input[type=submit]:active, .form input[type=button]:active {
  box-shadow: inset 1px 1px 3px 0 #A72B2A;
}

.form .vStack {
  margin: 5px 0;
}

.form .hStack {
  overflow: hidden;
}

.form .hStack div {
  float: left;
  margin-right: 5px;
}

.form .toolTip {
  color: #777777;
  font-size: 14px;
  clear: both;
  line-height: 22px;
}

:focus::-webkit-input-placeholder{opacity:0;}
:focus::-moz-placeholder{opacity:0;} /* Firefox 19+ */
:focus:-moz-placeholder{opacity:0;} /* Firefox 18- */
:focus:-ms-input-placeholder{opacity:0;}
input[placeholder]{text-overflow:ellipsis;}
input::-moz-placeholder{text-overflow:ellipsis;}
input:-moz-placeholder{text-overflow:ellipsis;}
input:-ms-input-placeholder{text-overflow:ellipsis;}

.phLabel{
    position: absolute;
    display: block;
    font-size: 12px;
    padding: 1px 2px;
    line-height: normal;
    margin: -8px 0 0 5px;
    background-color: rgb(252, 252, 252);
    color: rgb(164, 164, 164);
}

.phLabel:hover{
    color: rgb(0, 0, 0);
}

input[placeholder], textarea[placeholder]{
    display: block;
    box-sizing: border-box;
}

.topForm {
  padding: 1.5%;
  border-top: 1px solid #F3F3F3;
  border-bottom: 1px solid #ECECEC;
  background-image: linear-gradient(to bottom, #FBFBFB, #F6F6F6);
  overflow: hidden;
  font-size: 14px;
}

.topForm .reset {
  opacity: 0;
}

.topForm input[type=text], .topForm select, .topForm textarea {
  padding: 4px;
  background-color: #FCFCFC;
  border-radius: 5px;
  border: 1px solid #E7E7E7;
  box-shadow: 0px 1px 1px 1px #F6F6F6 inset;
}

.topForm input[type=text], .topForm textarea {
  padding: 5px 4px;
}

.topForm input[type=text]:focus, .topForm select:focus, .topForm textarea:focus {
  border: solid 1px #ffe88b;
}

.topForm input[type=submit], .topForm input[type=button] {
  padding: 4px 15px;
  border-radius: 5px;
  color: #FFF;
  background-image: linear-gradient(to bottom, #9DBA79, #738444);
  font-family: arial;
  font-weight: bold;
}

.topForm input[type=submit]:active, .topForm input[type=button]:active {
  box-shadow: inset 1px 1px 3px 0 #5D6B42;
}

.topForm fieldset {
  margin: 10px 0 0 0;
  overflow: hidden;
}

#dctSearchForm {
  padding: 1.5%;
  border-top: 1px solid #E4E4E4;
  border-bottom: 1px solid #E4E4E4;
  background-image: linear-gradient(to bottom, #F9F9F9, #F5F5F5);
  overflow: hidden;
  text-align: center;
}

#dctSearchForm input[type=text] {
  padding: 4px;
  background-color: #FCFCFC;
  border-radius: 5px;
  border: 1px solid #E7E7E7;
  width: 60%;
  font-size: 20px;
}

#dctSearchForm input[type=text] {
  padding: 5px 7px;
}

#dctSearchForm input[type=submit] {
  padding: 4px 15px;
  border-radius: 5px;
  color: #FFF;
  background-image: linear-gradient(to bottom, #9DBA79, #738444);
  font-family: arial;
  font-weight: bold;
  width: 15%;
  font-size: 20px;
}

#dctSearchForm input[type=submit]:active {
  box-shadow: inset 1px 1px 3px 0 #5D6B42;
}

#exercise .task {
  color: #A12626;
  font-weight: bold;
}

#exercise .exerciseQuestion {
  margin: 10px 10px 0 10px;
  padding: 10px;
  background-color: #FCFCFC;
  display: block;
  border: solid 2px #D8D8D8;
}

#exercise .hiddenAnswer {

  margin: 10px;
  padding: 10px;
  background-color: #FAFFEC;
  display: none;
  border: 2px solid #D1D7B9;
}

#exercise .openAnswer {
  border-bottom: 1px dashed #6f8443;
  margin: 5px auto 15px;
  color: #6f8443;
  display: block;
  text-align: center;
  width: 150px;
  cursor: pointer;
}

.roundGallery .item {
  margin: 12px 40px 12px 0;
  width: 9em;
  height: 9em;
  border-radius: 100px;
  overflow: hidden;
  display: inline-block;
}

.roundGallery .item img {
  width: 20em;
}

.saleNotification {
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #DDCCB7;
  color: #625749;
  margin: 2% auto;
  padding: 10px;
  background-color: #FEF8B6;
  border-radius: 10px;
}

.booking {
  text-align: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  background-color: #2D2D2D;
  overflow: hidden;
  padding: 0 0 10px 0;
  border-top: dashed 1px #eee;
  border-bottom: dashed 1px #eee;
}

.booking h3 {
  color: #2D2D2D;
  padding: 10px 0px;
  background-color: #FFEB3B;
  font-size: 14px;
  width: 400px;
  margin: 0 auto 25px auto;
  border-radius: 0 0 10px 10px;
}

.booking iframe {
  background: url(/styles/default/pictures/ticketFormPreloader_bg.png) no-repeat center;
}

#userPhotoUploadForm {
  width: 300px;
  margin: 20px auto 0 auto;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 2px 1px #F0F0F0;
  line-height: normal;
}

.deletePhotoLink {
  float: right;
  font-size: 12px;
}

#userPhotoUploadForm input[type=submit] {
  padding: 4px 15px;
  border-radius: 5px;
  color: #FFF;
  background-image: linear-gradient(to bottom, #9DBA79, #738444);
  font-family: arial;
  font-weight: bold;
}

#userPhotoUploadForm input[type=submit]:active {
  box-shadow: inset 1px 1px 3px 0 #5D6B42;
}

#userPhotoUploadForm input[type=file] {
  margin: 0 0 20px 0;
}

#covers
{
  overflow: hidden;
  padding-bottom: 10px;
}

#covers a
{
  width: 30%;
  margin: 2% 0 0 2%;
  padding: 12% 0 0 0;
  float: left;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center 10%;
  background-size: 100%;
  background-color: #2D2D2D;
  border-radius: 15px;
  border: solid 4px #FFF;
  display: block;
  color: #fff;
  text-decoration: none;
}

#covers h4
{
  padding: 10px;
  background-color: rgba(39, 39, 39, 0.7);
  font-size: 14px;
  margin: 0;
  border-radius: 0 0 15px 15px;
  text-align: center;
  line-height: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

#covers a:hover
{
  color: #FFFA9B;
  box-shadow: 0 0 5px 1px #D7D7D7;
}

#chineseKeys
{
   margin: 1.5% auto;
}

#chineseKeys td
{
   width: 23%;
   border: 1px solid rgb(231, 231, 231);
   background-color: rgb(248, 248, 248);
   padding: 1%;
   text-align: center;
   vertical-align: top;
   line-height: normal;
}

#chineseKeys .num
{
   position: relative;
    left: 0;
    top: 0;
   font-size: 14px;
   width: 3em;
}

#chineseKeys .ch
{
  font-size: 40px;
  margin: 10px 0;
}

#chineseKeys .pn
{
  font-size: 16px;
}

#chineseKeys .rus
{
  margin-top: 10px;
  font-size: 18px;
  color: #000;
}

#chineseKeys .ch .grey
{
  font-size: 30px;
  color: #3C3C3C;
}

#chineseKeys .ch .grey span
{
background-color: #eee;
border-radius: 50px;
}

#chineseKeys .ch .green
{
  font-size: 30px;
  color: #3C3C3C;
}

#chineseKeys .ch .green span
{
background-color: #e5f0d5;
border-radius: 50px;
}

#chineseKeys .body
{
overflow: hidden;
}

#chineseKeys .right
{
  float: right;
  width: 2em;
}

#chineseKeys .right li
{
  list-style: none;
  display: block;
  background-color: #ecf3dc;
  border-radius: 50%;
  font-family: 楷体, 楷体_GB2312;
  font-size: 1.5em;
}

#spokens .col
{
    float: left;
    margin: 0 10px 0 0;
}

#spokens .spoken
{
    margin: 0 0 20px 0;
}

#spokens .row
{
    clear: both;
    overflow: hidden;
    margin: 0 0 25px 0;
    border-bottom: dashed 1px #8f8f8f;
}

#spokens .spoken .top_row
{
  font-size: 20px;
  background-color: #FFF;
  min-height: 55px;
}

#spokens .spoken .pn_row
{
  background-color: rgb(250, 250, 250);
  font-size: 16px;
}

#spokens .spoken .verb_row
{
  background-color: rgb(250, 250, 250);
  font-style: italic;
  font-size: 14px;
}

#spokens .note
{
clear: both;
margin: 15px 0;
}
#spokens .note p
{
margin: 5px 0 8px 0;
}

#chars h2
{
  font-size: 46px;
font-weight: normal;
margin: 45px 0 25px 0;
opacity: 0.5;
}

#chars h2:hover
{
opacity: 1;
}

.newForm{

}

.newForm input[type=text], .newForm textarea{
   display: block;
   box-sizing: border-box;
}

.newForm .row{
 margin: 20px auto;
 width: 80%;
 overflow: hidden;
}

.newForm .rowLight{
margin: 40px auto;
width: 80%;
background-color: rgb(252, 252, 252);
border: 1px solid rgb(231, 231, 231);
padding: 10px;
box-sizing: border-box;
}

.uploadImgForm{
  overflow: hidden;
  width: 400px;
  margin: 10px auto;
}

.uploadImgForm .preview{
  height: 150px;
  width: 150px;
  background-color: rgb(203, 224, 245);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  margin: 10px auto;
  border-radius: 50%;
  border: solid 6px rgb(236, 236, 236);
}

.uploadImgForm .rmImgLink
{
float: left;
background-color: rgb(255, 255, 255);
width: 1.5em;
height: 1.5em;
display: block;
box-sizing: border-box;
border-radius: 50%;
opacity: 0.5;
background: url(../pictures/delete.png) center center no-repeat;
}

.uploadImgForm .rmImgLink:hover
{
color: rgb(216, 36, 36);
opacity: 1;
}

.uploadImgForm input[type=submit] {
  padding: 4px 15px;
  border-radius: 5px;
  color: #FFF;
  background-image: linear-gradient(to bottom, #9DBA79, #738444);
  font-family: arial;
  font-weight: bold;
}

.uploadImgForm input[type=submit]:active {
  box-shadow: inset 1px 1px 3px 0 #5D6B42;
}

.uploadImgForm .col {
  float: left;
}

#handWrCont{
    margin-top: 20px;
    min-height: 100px;
    background: url(../pictures/HdWrLoad.png) no-repeat center;
}

.hskVar{
padding: 10px;
box-sizing: border-box;
background-color: #fff;
margin: 15px;
overflow: hidden;
border-radius: 7px;
}

.hskLeft{
float: left;

}

.hskRight{
float: left;
padding-left: 50px;
margin-left: 20px;
}

.hskDownload{
 font-size: 14px;
 line-height: normal;
}