@font-face {
    font-family: 'ArchChinesePinyinFont';
    src: url('../fonts/ArchChinesePinyinFont.eot');
    src: url('../fonts/ArchChinesePinyinFont.eot') format('embedded-opentype'),
         url('../fonts/ArchChinesePinyinFont.woff2') format('woff2'),
         url('../fonts/ArchChinesePinyinFont.woff') format('woff'),
         url('../fonts/ArchChinesePinyinFont.ttf') format('truetype'),
         url('../fonts/ArchChinesePinyinFont.svg#ArchChinesePinyinFont') format('svg');
}



@font-face {
    font-family: 'ArchChineseToneFont';
    src: url('../fonts/ArchChineseToneFont.eot');
    src: url('../fonts/ArchChineseToneFont.eot') format('embedded-opentype'),
         url('../fonts/ArchChineseToneFont.woff2') format('woff2'),
         url('../fonts/ArchChineseToneFont.woff') format('woff'),
         url('../fonts/ArchChineseToneFont.ttf') format('truetype'),
         url('../fonts/ArchChineseToneFont.svg#ArchChineseToneFont') format('svg');
}


body {	
	background-color: #EBE9DB;
}

.delete-image {
	font-size:1.0em;
	padding-left:2px;
	padding-right:2px;	
}

.arch-vertical-align {
    display: flex;
    align-items: center;
}

.fa-select {
    font-family: 'FontAwesome';
    color:#1155CC;
}

.vocab-image {
	font-size:1.17em;
	padding-left:8px;
	padding-right:8px;
}

.list-inline {
  white-space:nowrap;
}

.image-roll {
    overflow-x:auto;
    overflow-y:hidden;
    height:120px;
    width:100%;
    padding-top:8px;
}


.arch-pinyin-font {
   font-family:	'ArchChinesePinyinFont',serif,arial;
}
.arch-tone-font {
   font-family:	'ArchChineseToneFont',serif,arial;   
}

.chinese-font {
	font-family: KaiTi,STKaiti,DFKai-SB,BiauKai,Arial !important;
	font-size:1.5em;
}

.gwt-TextBox {
	height: 30px !important;
	font-size: 18px !important;
}

.gwt-TextArea {	
	height:220px !important;
}


.arch-link {
  text-decoration:none;
  color:#1155CC;
  font-family: Arial;  
}

.blue-text {
  color:#1155CC;
}

.team-image {
    background: none no-repeat scroll center top / cover transparent;
    border-radius: 100%;
    box-shadow: 1px 1px 2px 0px #ADA7A4;
    display: inline-block;
    margin: 0px 10px 2px 0px;
    overflow: hidden;
    padding: 0px;
    vertical-align: middle;
    transform: translateZ(0px);
}

.modal{
    direction:rtl;
    overflow-y: auto;
}

.modal .modal-dialog{
    direction:ltr;
}

.modal-open{
    overflow:auto;
}



.container {
  border: 1px #E6E6E6 solid;
  background-color: #ffffff;
}

a:visited {
    color: #1155CC
}

a:hover
{
	background-color: #BFBFEF;
	text-decoration: underline;	
}

a {
    color: #1155CC;
}

.tone1 {
	color:#FF0001 !important;
}
.tone2 {
	color:#D89002 !important;
}
.tone3 {
	color:#00A003 !important;
}
.tone4 {
	color:#0000FF !important;
}
.tone5 {
	color:#000000 !important;
}


@keyframes resize {
  0% {
  }
  33% {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
  }
  66% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1.0);
    -ms-transform: scale(1.0);
    transform: scale(1.0);
  }
}

@-webkit-keyframes resize {
  0% {
  }
  33% {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
  }
  66% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1.0);
    -ms-transform: scale(1.0);
    transform: scale(1.0);
  }
}

@-moz-keyframes resize {
  0% {
  }
  33% {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
  }
  66% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1.0);
    -ms-transform: scale(1.0);
    transform: scale(1.0);
  }
}

.arch-resize-char{
}
.arch-resize-word{
}
.arch-resize-sentence{
}

.arch-resize-char.char {
  animation-name: resize;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

.arch-resize-word.word {
  animation-name: resize;
  animation-duration: 1s;
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

.arch-resize-sentence.sentence {
  animation-name: resize;
  animation-duration: 1s;
  animation-iteration-count: 4;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}


.arch-magnify
{
    -moz-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

.arch-magnify.down{
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
}

.chineseDefRotate{
    -moz-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

.chineseDefRotate.down{
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
}

.sentenceRotate{
    -moz-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

.sentenceRotate.down{
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
}

.sentenceWordRotate{
    -moz-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

.sentenceWordRotate.down{
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
}

.wordRotate{
    -moz-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

.wordRotate.down{
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
}

.wordDtlRotate{
    -moz-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

.wordDtlRotate.down{
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
}

.panel-heading.accordion-toggle .panel-title:after {
    font-family: "FontAwesome";
    content:"\f115";
    float: right;
    position: relative;
    bottom: 0px;
    font-size: 15pt;
    color: #1155CC;
}

.panel-heading.accordion-toggle.collapsed .panel-title:after {
    content:"\f114";
}

.panel-group .panel-heading:hover {
    cursor: pointer;
}

#.panel-heading:hover h4 {
#    text-decoration: underline;
#}

@media screen and (max-width: 550px) {
    #sentenceQuickSetting  {
       display:none;
    }
}



@media screen and (max-width: 500px) {
    .arch-chinese {
        display:none;
    }
}

@media screen and (min-width: 476px) {
    #animatorContainer {
        float:right;
	margin-left:20px;
    } 
  
}

@media screen and (min-width: 576px) {
    #demoContainer {
        float:right;	
    } 
    .word-container {
        white-space:nowrap;
    }
    .action-container {
        white-space:nowrap;
    }      
}


.navbar-nav>li>a {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

@media (min-width: @screen-sm-min) {

    .form-inline > .checkbox {margin-left:5px;margin-right:5px;}
    .form-inline  .form-control {width:auto;}
    .form-inline label {margin-right:5px;}
}


.arch-effect :hover{
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;

    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    cursor: pointer;
}


.arch-skew {
  animation: skew 3s infinite;
  transform: skew(20deg);
  animation-direction: alternate;
  opacity: .8;
}
@keyframes skew 
  0% {
    transform: skewX(20deg);
  }
  100% {
    transform: skewX(-20deg);
  }
}


.arch-spin {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;
    
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(359deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(359deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(359deg); }
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(359deg);
    }
}


#ie_historyFrame { width: 0px; height: 0px; display:none }
#firefox_anchorDiv { width: 0px; height: 0px; display:none }
#safari_formDiv { width: 0px; height: 0px; display:none }
#safari_rememberDiv { width: 0px; height: 0px; display:none }