/*index*/
.index_btn{
display: block;
width: 100%;
border-radius: 0.3em;
}
.index_btn_a{
background: url('../img/btn_bg.png'), linear-gradient(to bottom, #ffefd1 0%,#f7d183 4%,#f9bf45 98%,#e3aa45 100%);;
background: url('../img/btn_bg.png'), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffefd1), color-stop(4%,#f7d183), color-stop(98%,#f9bf45), color-stop(100%,#e3aa45));;
background: url('../img/btn_bg.png'), -webkit-linear-gradient(top, #ffefd1 0%,#f7d183 4%,#f9bf45 98%,#e3aa45 100%);
background-position: right top, center center;
background-size: 5em, 100%;
background-repeat: no-repeat, repeat;
border: 1px solid #d4ac70;
}
.index_btn_b{
background: url('../img/btn_bg.png'), linear-gradient(to bottom, #f9bf45 4%,#f9c353 100%); 
background: url('../img/btn_bg.png'), -webkit-gradient(linear, left top, left bottom, color-stop(4%,#f9bf45), color-stop(100%,#f9c353));
background: url('../img/btn_bg.png'), -webkit-linear-gradient(top, #f9bf45 4%,#f9c353 100%);
background-position: right top, center center;
background-size: 5em, 100%;
background-repeat: no-repeat, repeat;
border: 1px solid #d4ac70;
-webkit-box-shadow: 0 0 5px rgba(100,100,100,0.5) inset;
}
.index_icon{width: 6em;}
.index_list{
width: 92%;
margin: 0.5em auto;
}
.index_list td{
}
.index_icon{padding-left: 0.3em;}
.index_name{
text-align: right;
padding: 0 0.5em 0.3em;
font-size: 1.3em;
font-weight: bold;
color: #0674ac;
text-shadow: 0 0.05em 0 rgba(255,255,255,0.6);
}

/*fortune_tell*/
.list_btn{
display: block;
width: 94%;
border-radius: 0.5em;
margin: 0.5em auto;
}
.btn_a{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffefd1), color-stop(4%,#f7d183), color-stop(98%,#f9bf45), color-stop(100%,#e3aa45));
background: -webkit-linear-gradient(top,  #ffefd1 0%,#f7d183 4%,#f9bf45 98%,#e3aa45 100%); 
background: linear-gradient(to bottom,  #ffefd1 0%,#f7d183 4%,#f9bf45 98%,#e3aa45 100%);
border: 1px solid #d4ac70;
}
.btn_b{
background: -webkit-gradient(linear, left bottom, left top, color-stop(4%,#f9bf45), color-stop(100%,#f9c353));
background: -webkit-linear-gradient(bottom,  #f9bf45 4%,#f9c353 100%);
background: linear-gradient(to top,  #f9bf45 4%,#f9c353 100%);
border: 1px solid #d4ac70;
-webkit-box-shadow: 0 0 5px rgba(100,100,100,0.5) inset;
}
.btn_table{
width: 100%;
padding: 0.2em;
}
.btn_table .title_icon img{width: 3em;}
.btn_table .enter_icon img{width: 1.5em;}
.headline{
font-size: 1.1em;
color: #0674ac;
font-weight: bold;
text-shadow: 0.08em 0.08em 0 rgba(255,255,255,0.3);
}
.subtitle{
font-size: 1em;
color: #7e43e6;
padding-right: 0.8em;
}
.theme{
width: 2.2em;
font-size: 1.3em;
color: #0674ac;
font-weight: bold;
text-shadow: 0.08em 0.08em 0 rgba(255,255,255,0.3);
}
.topic{
font-size: 1em;
color: #0674ac;
padding: 0 0.8em 0 0.6em;
}

/*test_love*/
.test_list_btn{
display: block;
width: 94%;
border-radius: 0.5em;
margin: 0.5em auto;
}
.btn_a{
background: linear-gradient(to bottom,  #ffefd1 0%, #f7d183 4%, #f9bf45 98%, #e3aa45 100%);
border: 1px solid #d4ac70;
}
.btn_b{
background: linear-gradient(to top, #f9bf45 4%, #f9c353 100%);
border: 1px solid #d4ac70;
-webkit-box-shadow: 0 0 5px rgba(100,100,100,0.5) inset;
}
.test_btn_table{
width: 100%;
padding: 0.2em;
}
.test_btn_table td{padding: 0.2em;}
.test_headline{
font-size: 1.1em;
color: #b21d55;
font-weight: bold;
text-shadow: 0.08em 0.08em 0 rgba(255,255,255,0.3);
}
.result_letters{
font-size: 0.95em;
color: #595757;
font-weight: bold;
}
.pirce_box{
width: 3.2em;
height: 3em;
font-size: 0.95em;
font-weight: bold;
line-height: 3em;
padding: 0.1em 0;
border-radius: 2em;
color: white;
text-shadow: 0 0 0.15em rgba(10,10,10,0.8);
text-align: center;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg); /* IE 9 */
-webkit-transform: rotate(-10deg); /* Opera, Chrome, and Safari */
}
.free{
background: #8fc31f;
border-top: 0.1em solid #d5f482;
border-bottom: 0.1em solid #698718;
}
.pay{
background: #f98e23;
border-top: 0.1em solid #fce6d2;
border-bottom: 0.1em solid #af661e;
}

/*explain_page*/
select, option{
font-size: 1em;
}
.title_block table{
width: 100%;
padding: 0.5em;
border-bottom: 0.1em dashed white;
}
.title_block{
width: 100%;
background: #ffcc33;
padding: 0.2em 0 0.4em;
}
.title{
font-size: 1.2em;
color: #0674ac;
font-weight: bold;
}
.title_block table .result_letters{
font-size: 1em;
margin-top: 0.5em;
}
.use_explain{
font-size: 1.15em;
line-height: 1.3em;
padding: 0.5em;
color: #605345;
font-weight: bold;
}
.each_data_block{padding: 0.5em;}
.each_data_mark{
position: relative;
font-size: 1em;
background: #87b9c9;
line-height: 1.65em;
width: 4.5em;
height: 1.65em;
padding: 00.2em;
color: white;
font-weight: bold;
text-align: center;
margin-bottom: 0.5em;
text-shadow: 0 0 0.15em rgba(10,10,10,0.5);
}
.mark_arrow{
display: inline-block;
position: absolute;
height: 0;
width: 0;
border-left: 1em solid #87b9c9;
border-top: 1em solid #f7dda6;
border-bottom: 1em solid #f7dda6;
right: -1em;
top: -0.05em;
}
.data_block{
background: rgba(255,255,255,0.3);
border-radius: 0.5em;
}
.data_block table{
padding: 0.2em;
width: 100%;
}
.data_block table th{color: #27647c;}
.data_block table td{padding: 0.4em 0;}
.data_item_title{
width: 7.6em;
color: #3e3a39;
font-weight: bold;
}
input{
font-size: 1em;
color: #3e3a39;
background: white;
border: none;
border-radius: 0.2em;
padding: 0.2em;
width: 10em;
}
.multi_input input{width: 4em;}
.duet_multi_input input{width: 2.8em;}
.duet_birth_input input{
width: 7em;
margin-top: 0.2em;
}
.word_input input{width: 3em;}
.duet_sex_selc .sex_btn{
display: inline-block;
width: 3.6em;
height: 2em;
line-height: 2em;
border: 0.15em solid #ffcc33;
text-align: center;
font-weight: bold;
background: rgba(255,255,255,0.3);
color: #CCCCCC;
font-size: 1em;
}
.sex_btn{
position: relative;
display: inline-block;
width: 4em;
height: 2em;
line-height: 2em;
border: 0.15em solid #ffcc33;
text-align: center;
font-weight: bold;
background: rgba(255,255,255,0.3);
color: #CCCCCC;
font-size: 1em;
}
.male_btn{
border-radius: 0.3em 0 0 0.3em;
border-right: none;
vertical-align: middle;
}
.female_btn{
border-radius: 0 0.3em 0.3em 0;
border-left: none;
vertical-align: middle;
}
.sex_btn_active{background: #ffcc33;}
.duet_sex_selc .sex_btn_active{
background: #ffcc33;
color: #0674ac;
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
.text_big{
position: absolute;
font-size: 1.5em;
color: #0674ac;
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
top: 0;
left: 0.75em;
}
.enter_btn{
display: inline-block;
padding: 0.4em 0.8em;
font-size: 1.1em;
color: #7a6a56;
font-weight: bold;
text-shadow: 0 0.08em 0 rgba(255,255,255,0.8);
border-radius: 0.3em;
margin-top: 0.5em;
}
.content_title_block{
width: 100%;
background: #ffcc33;
padding: 0.2em 0 0.4em;
}
.content_title{
font-size: 1.2em;
color: #3e3a39;
font-weight: bold;
padding: 0.2em 0.5em;
}
.data_value{
font-size: 1em;
color: #3e3a39;
font-weight: bold;
padding:  0 0.5em 0.5em;
}
.content_text{
padding: 0.8em;
line-height: 1.4em;
}
.title-reader{
margin: 0.5em 0;
color: #b21d55;
font-weight: bold;
}
.hr{
width: 100%;
height: 1px;
border-bottom: 0.1em dashed white;
}
.speaker{
position: fixed;
width: 2.4em;
border-radius: 5px;
background: rgba(255,255,255,0.5);
padding: 0.2em;
text-align: center;
right: 0;
bottom: 0;
margin-bottom: 0.5em;
margin-right: 0.5em;
}
.tts{
display: inline-block;
padding: 0.3em;
border-radius: 0.3em;
border: 1px solid #786A5F;
}
.tts_btn_a{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.4, white), color-stop(0.9, #E6E3DF), color-stop(1, #D9D3C8));
background: -moz-linear-gradient(top, white, #E6E3DF , #D9D3C8);
-webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.tts_btn_b{
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #E6E3DF), color-stop(1, #D9D3C8));
background: -moz-linear-gradient(bottom, #E6E3DF, #D9D3C8);
-webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.8), 0 0 2px rgba(10,10,10,0.8) inset;	
}

/*Calendar*/
.date_bar{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c73822), color-stop(69%,#a81f0c), color-stop(100%,#ad220e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #c73822 0%,#a81f0c 69%,#ad220e 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom,  #c73822 0%,#a81f0c 69%,#ad220e 100%); /* W3C */
}
.date_bar > table{
width: 100%;
text-align: center;

}
.date_bar > table img{
width: 2.5em;
}
.arrow_td{width: 18%;}
.hr_td{width: 0.5%;}
.date_td{width: 31.25%;}
.date_bar_hr{
width: 2px;
height: 3em;
background: rgba(10,10,10,0.3);
border-radius: 10px / 100px;
-webkit-box-shadow: 1px 1px 0 rgba(255,255,255,0.3), 0 1px 1px rgba(50,50,50,0.5)inset;
}
.date_btn{
display: block;
width: 100%;
font-size: 1.4em;
color: white;
text-shadow: 0 0 2px rgba(10,10,10,0.5);
padding: 0.6em 0;
}
.date_btn_active{
background: rgba(50,50,50,0.2);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.8)inset;
}
.arrow_btn{
width: 100%;
display: inline-block;
padding: 0.4em 0;
}
.arrow_btn_active{
background: rgba(50,50,50,0.2);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.8)inset;
}
.now_date_block{
width: 92%;
margin: 1em auto;
color: #604c3f;
text-shadow: 0 1px 1px rgba(255,255,255,0.8); 
}
.festival_select{
position: relative;
width: 100%;
height: 3em;
}
.show_festival{
position: absolute;
width: 100%;
color: white;
font-size: 1.4em;
text-align: center;
text-shadow: 0 0 2px rgba(10,10,10,0.5);
padding: 0.6em 0;
top: -0.1em;
left: 0;
z-index: 4;
}
.festival_sel_hide{
position: absolute;
width: 100%;
overflow: hidden;
z-index: 5;
}
.festival_sel_hide select{
width: 130%;
font-weight: normal;
font-size: 1.4em;
color: rgba(0,0,0,0);
}
.lunar_status{
font-size: 1.15em;
line-height: 1.3em;
margin: 0.5em auto 1em;
color: #604c3f;
}
.now_date_block table{width: 100%;}
.lunar_status table{
width: 98%;
margin: 0.5em auto 0.3em;
}
.lunar_block{
font-size: 1em;
font-weight: bold;
color: #604c3f;
}
.lunar_value, .lunar_year_value, .lunar_date_value, .days_detail{
display: inline-block;
vertical-align: top;
}
.lunar_year_value, .lunar_date_value, .days_detail{width: 0.8em;}
.lunar_value{
width: 1em;
padding-left: 0.5em;
font-size: 1.2em;
}
.day_block{
text-align: center;
color: #604c3f;
}
.month_value{
font-size: 1.6em;
text-align: center;
margin-bottom: -0.5em;
}
.date_value{
font-size: 7.5em;
vertical-align: top;
text-align: center;
}
.week_value{
font-size: 1.8em;
vertical-align: top;
font-weight: bold;
margin-top: -0.6em;
text-align: center;
}
.festival_name{
width: 1em;
padding: 0.4em 0.2em;
border: 0.25em double #d63838;
color: #d63838;
font-size: 1.2em;
font-weight: bold;
margin-top: 1em;
margin-left: -0.4em;
}
.festival_days{
color: #604c3f;
font-weight: bold;
}
.days_festival_name{
font-weight: bold;
color: #940012;
}
.lunar_dashed{
display: inline-block;
width: 1em;
vertical-align: bottom;
text-align: center;
color: #604c3f;
font-weight: bold;
padding: 0 0 0.2em;
}
.lunar_dashed img{
width: 1.6em;
vertical-align: middle;
margin-left: -0.35em;
}
.lunar_status_top{
margin: 0.8em 0;
border: 0.2em double #a48b78;
padding: 0.2em;
}
.lunar_title{
font-size: 0.9em;
color: #604c3f;
width: 5.5em;
text-align: right;
padding: 0.2em 0;
}
.lunar_detail{
text-align: left;
font-size: 1em;
color: #604c3f;
font-weight: bold;
padding-left: 0.5em;
}
.lunar_status_bottom{
color: #604c3f;
padding: 0.2em;
font-weight: bold;
}
.proper_title img{
width: 2em;
}
.attention_block{
margin-top: 1em;
padding: 0.2em 0.8em 0.3em;
font-size: 0.9em;
background: rgba(201,188,156,0.6);
color: #7a6a56;
}

/*history*/
.no_history{
width: 50%;
padding:0.5em;
margin: 2em auto;
font-size: 1.2em;
font-weight: bold;
color: #0674ac;
text-align: center;
border-radius: 0.5em;
background: rgba(100,100,100,0.1);
-webkit-box-shadow: 0 1px 1px rgba(255,255,255,0.8), 0 1px 2px rgba(50,50,50,0.5)inset;
}
.history_block{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff8eb), color-stop(3%,#f7e0b2), color-stop(100%,#f2bd50)); 
background: -webkit-linear-gradient(top,  #fff8eb 0%,#f7e0b2 3%,#f2bd50 100%); 
background: linear-gradient(to bottom,  #fff8eb 0%,#f7e0b2 3%,#f2bd50 100%);
}
.history_btn{
display: block;
padding: 0.8em 0.5em;
font-size: 1.1em;
font-weight: bold;
color: #352a23;
text-shadow: 0 1px 1px rgba(255,255,255,0.8);
border-bottom: 1px solid #d4ac70;
}
.history_btn_active{
color: #FFFFFF;
text-shadow: 0 1px 1px rgba(50,50,50,0.5);
background: rgba(50,50,50,0.2);
-webkit-box-shadow: 1px 1px 5px rgba(10,10,10,0.5)inset;
border-bottom: 1px solid #9b7d56;
}
.inter_icon{
display: inline-block;
float: right;
margin-right: 0.2em;
}
.inter_icon img{width: 1.2em;}
.mark_td{
border-bottom: 1px solid #940a1b;
width: 0.5em;
background: #c30d23;
}
.share_btn{
display: inline-block;
}
.share_btn_active{
display: inline-block;
opacity: 0.5;
}
/*About*/
.tab_table{
width: 100%;
}
.tag{
text-align: center;
padding: 0.3em 0;
font-size: 1.5em;
font-weight: bold;
text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.tag_off{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1ca78), color-stop(100%,#ebb034)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f1ca78 0%,#ebb034 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom,  #f1ca78 0%,#ebb034 100%); /* W3C */
color: #604c3f;
-webkit-box-shadow: 0 -1px 2px rgba(50,50,50,0.5)inset; 
}
.tag_on{
background: #f7dda6;
color: #0674ac;
}
.about_teacher{
padding: 0.5em 0.4em;
color: #3e3a39;
font-size: 1.15em;
line-height: 1.3em;
}
.about_teacher p{
margin-bottom: 1em;
}
.article_name{
display: inline-block;
font-size: 1.1em;
font-weight: bold;
color: #595757;
padding: 0.5em 0.2em 0.5em 0.5em;
vertical-align: middle;
}
.sort_name{
display: inline-block;
font-size: 1.2em;
font-weight: bold;
color: #0674ac;
padding: 0.5em 0.2em 0.5em 0.5em;
vertical-align: middle;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.about_point{
font-weight: 900;
color: #956134;
}

/*Daily*/
.exponents{
margin: 0.8em 0 1.5em;
font-size: 1.15em;
line-height: 1.3em;
}
.exponents table{width: 100%;}
.daily_title{
width: 5em;
text-align: center;
}
.daily_title img{
width: 4em;
}
.daily_value{
font-size: 1.5em;
font-weight: bold;
color: #940012;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.daily_detail{
font-size: 0.95em;
font-weight: bold;
color: #604c3f;
}

/*Setting*/
.setting_note{
padding: 0.2em 0.5em;
text-align: center;
color: #b21d55;
font-weight: bold;
line-height: 1.4em;
border-bottom: 0.1em dashed white;
}
#form{padding: 0.5em;}
#form table td{padding: 0.4em 0;}
@-webkit-keyframes removed-item-animation {
    0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    }
    
    30% {
    opacity: 1;
    -webkit-transform: translate(50px, 0);
    }
    
    80% {
    opacity: 1;
    -webkit-transform: translate(-800px, 0);
    }
    
    100% {
    opacity: 0;
    -webkit-transform: translate(-800px, 0);
    }
}
.removed-item {
-webkit-animation: removed-item-animation .8s ease-in-out;
opacity: 0;
}
.icon-arrowDouble{
color: white;
}
.icon-minus{
display: block;
padding: 0.2em;
background: red;
color: white;
border-radius: 1em;
}