.arch-selected {
   font-weight:bolder;
}

@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');
}

.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 10px;
}

body {	
	background-color: #FFFFFF;
	font-size: 15px;
}

input[name='chinese[]'] {
	font-family: KaiTi,STKaiti,DFKai-SB,BiauKai,Arial !important;
	font-size:1.5em;
}

.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-check{
   height: 20px;
   width: 20px;
   position: relative;
   cursor: pointer;
   top: 5px;
}

.arch-logo{
   height:auto;
   width:180px;
   float:left;
   margin-top:0px;
   margin-left:10px;
   -webkit-transform: scale(1);
   transform: scale(1);
   -webkit-transition: .3s ease-in-out;
   transition: .3s ease-in-out;
}
.arch-logo:hover {
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
}
.arch-shadow{
   box-shadow: 5px 10px 8px #888888;
}

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

.arch-pinyin-font:hover
{	text-decoration: none;	
    -webkit-transform: scale(1.2);
     -ms-transform: scale(1.2);
	 -moz-transform: scale(1.2);
     transform: scale(1.2);
}


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

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

.cn-font {
	font-family: KaiTi,STKaiti,DFKai-SB,BiauKai,Arial;
	font-size:1.2em;
}

.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
}

.btn-primary {
  border-radius: 1em;
  width:100px;
}

.btn-default {
  border-radius: 1em;	
}

a:hover
{
	#background-color: #e6e6e6;
	#text-decoration: underline;	
	background-color: transparent; 
	text-decoration: none;
}

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{
}

.big-char-effect:hover
{	-moz-box-shadow: 0 0 10px #ccc;
	-webkit-box-shadow: 0 0 10px #ccc;
	box-shadow: 0 0 10px #ccc;

    -webkit-transform: scale(1.2);
     -ms-transform: scale(1.2);
	 -moz-transform: scale(1.2);
     transform: scale(1.2);
}

.c-btn {
    display: inline-block;
    border: solid 1px #CCC;
    border-radius: 1em;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 3px;
    padding-top: 3px;
    margin-bottom: 4px;
   -webkit-transition: width 2s, height 2s;
   transition: width 2s, height 2s;
   -webkit-transform: scale(1);
   transform: scale(1);
   -webkit-transition: .3s ease-in-out;
   transition: .3s ease-in-out;   
}

.c-btn:hover
{	text-decoration: none;	
    -webkit-transform: scale(1.01);
     -ms-transform: scale(1.01);
	 -moz-transform: scale(1.01);
     transform: scale(1.01);
}


.circle-btn {
    display: inline-block;
    border: solid 1px #CCC;
    border-radius: 1em;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 3px;
    padding-top: 3px;
    margin-bottom: 4px;
   -webkit-transition: width 2s, height 2s;
   transition: width 2s, height 2s;
   -webkit-transform: scale(1);
   transform: scale(1);
   -webkit-transition: .3s ease-in-out;
   transition: .3s ease-in-out;   
}

.circle-btn:hover
{	text-decoration: none;	
    -webkit-transform: scale(1.05);
     -ms-transform: scale(1.05);
	 -moz-transform: scale(1.05);
     transform: scale(1.05);
}

.circle-link {
	display:inline-block;
	border: solid 1px #CCC;	
	border-radius: 1em;
	padding:4px;
   -webkit-transition: width 2s, height 2s;
   transition: width 2s, height 2s;
   -webkit-transform: scale(1);
   transform: scale(1);
   -webkit-transition: .3s ease-in-out;
   transition: .3s ease-in-out;   
}

.circle-link:hover
{	text-decoration: none;
    -webkit-transform: scale(1.05);
     -ms-transform: scale(1.05);
	 -moz-transform: scale(1.05);
     transform: scale(1.05);
}

.arch-title {
	height:20px;
}

.img-frame {
   border: 0.5px solid #CCCCCC;
   padding: 1px;
   cursor: pointer;
   border-radius:20%;
   -webkit-transition: width 2s, height 2s;
   transition: width 2s, height 2s;
   -webkit-transform: scale(1);
   transform: scale(1);
   -webkit-transition: .3s ease-in-out;
   transition: .3s ease-in-out;   
}
.arch-pad-lt {
    padding-left:5px;
	padding-top:5px;
}
.arch-live {
   -webkit-transition: width 2s, height 2s;
   transition: width 2s, height 2s;
   -webkit-transform: scale(1);
   transform: scale(1);
   -webkit-transition: .3s ease-in-out;
   transition: .3s ease-in-out;     
}


.arch-live:hover {
   -webkit-transform: scale(1.03);
   transform: scale(1.03);
}

.img-frame:hover {
   border: 0.5px solid #CCCCDD;
   -webkit-filter: contrast(180%);
   filter: contrast(125%);
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
}

.lg-btn {
	width:150px;
	text-align:center;
}

.wd-btn {
	width:100px;
	text-align:center;
}
.md-btn {
	width:66px;
	text-align:center;
}    

.sm-btn {
	width:50px;
	text-align:center;
}    

.word-detail {
	border: solid 1px #CCC;	
	border-radius: 1em;
	padding-left: 4px;
    padding-right: 4px;
}

.word-detail:hover
{	-moz-box-shadow: 0 0 10px #ccc;
	-webkit-box-shadow: 0 0 10px #ccc;
	box-shadow: 0 0 10px #ccc;

    -webkit-transform: scale(1.2);
     -ms-transform: scale(1.2);
	 -moz-transform: scale(1.2);
     transform: scale(1.2);
}

	
.char-effect {
	display: inline-block;
	
}

.char-effect:hover
{
	text-decoration: none;	
    -webkit-transform: scale(1.3);
     -ms-transform: scale(1.3);
	 -moz-transform: scale(1.3);
     transform: scale(1.3);
}

.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-opacity-1-start{
  opacity: 1;
  -webkit-transition: opacity 2s linear;
  -webkit-tranform-origin: center;
  -webkit-tranform-style: preserve-3D;
  transition: opacity 2s linear;
  tranform-origin: center;
  tranform-style: preserve-3D;
}

.arch-opacity-0-end {
  opacity: 0.2;
}

.arch-opacity-0-start{
  opacity: 0.2;
  -webkit-transition: opacity 2s linear;
  -webkit-tranform-origin: center;
  -webkit-tranform-style: preserve-3D;
  transition: opacity 2s linear;
  tranform-origin: center;
  tranform-style: preserve-3D;
}

.arch-opacity-1-end {
  opacity: 1;
}


.arch-spinner {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
  width: 88px;
  height: 88px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.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: 650px) {
	#preference  {
       display:none;
    }
    #sentenceQuickSetting  {
       display:none;
    }

}

@media screen and (max-width: 550px) {
	.arch-logo {
        display:none;
    }
	#archchinese_id {
        display:none;
    }
	
    #ext-word-title-btn-grp  {
       display:none;
    }
	#word-title-btn-grp  {
       display:none;
    }
	
	#work-title-btn-grp  {
       display:none;
    }
}

@media screen and (max-width: 1550px) {
	#pg_title_id {
        margin-top: 0 !important;
    }	
	#adspace {
        text-align: center !important;
    }	

    #holidayDiv {
         display:none;
    }	
}

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

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

@media screen and (min-width: 576px) {
    #demoContainer {
        float:right;
    } 
    #promotion-box {
        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-wd {
    text-align: center;	
	vertical-align:middle;
    display: inline-block;
    height: auto;
	overflow: hidden;
    padding: 0px 4px;
    margin: 0px;
    border: 0px none;
}

@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 }