* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {
    font-size: 18px;
}

a {
    text-decoration: none;
}

.container {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 1rem auto;
}

/* =========================================== */
/*              诗歌搜索部分                    */
/* =========================================== */

.hymn-search {
    margin: 1rem auto;
    width: 90%;
    font-size: 1.5rem;
    max-width:550px;
    -webkit-text-size-adjust: 100% !important;
}

.hymn-search form div {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 1fr minmax(3rem, 5rem);
    grid-auto-rows: 2rem;
    gap: 1rem;
    align-items: center;
}

.hymn-search input {
    height: 2rem;
    font-size: 1rem;
}


#search__input-box {
    padding: 0.5rem 0.5rem;
}

#search__submit-btn {
    background-color: green;
    border-radius: 0.2rem;
    font-size: 2rem;
    color: white;
    border: none;
}

/* =========================================== */
/*              宫格按钮部分                    */
/* =========================================== */
.hymn-click {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 4rem;
    grid-auto-rows: 4rem;
    gap: 0.2rem;
    width: 90%;
    max-width:400px;
    -webkit-text-size-adjust: 100% !important;margin:0 auto;
}

.hymn-click a, div[data-display] {
    background-color: #EFEDDE;
    color: green;
    font-weight: bold;
    font-size: 1.6rem;
    text-decoration: none;
}

.hymn-click a {
    display: grid;
    align-items: center;
    justify-content: center;
}

a.hidden {
    display: none;
}


.hymn-click div[data-display] {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: #FFFFFF;
    border: 1px solid gray;
    color: #000000;
}

a[data-select] {
    grid-column: 1/-1;
    background-color: #338833;
    color: #ffffff;
    letter-spacing: 1rem;
    font-size: 5rem;
}

a[data-number] {
    font-size: 3.5rem;
}

a[data-book] ,a[data-correct], a[data-clear],a[data-submit]{
    font-size: 1.6rem;
}


#data-display {
    grid-column: span 3;
    background-color: #FFFFFF;
    border: 1px solid gray;
    font-weight: bold;
    font-size: 1.6rem;
    text-decoration: none;
}

a[data-correct] { 
    grid-column: span 2;
}
a[data-search] { /* a[data-clear]*/
    color: #b8860b;
}

a[data-submit] {
    /*grid-column: span 3;
     grid-row: span 2;*/
}

a[data-zero] {
    /*grid-column: span 3;*/
}

#chosen-book, #chosen-number, #chosen-type {
    font-size: 2rem;
    color: #000000;

}
.hymn-click a:not(:first-child):hover {
    background-color: #cce5cc;
}

a.disabled {
    color: grey;
    pointer-events: none;
    cursor: default;
}

a[data-book].activate, a[data-search].activate {
    /*background-color: #6acd9c;*/
    border: 2px solid darkgreen;
    /*color: white;*/
}

#wt {
    text-align:center;
    COLOR:#338833;
    FONT-WEIGHT: bold;
    FONT-SIZE:1.1em;
    /* letter-spacing:10px;*/
   /*  word-spacing:10px;*/
     padding-bottom: 1em;
   /*  padding-left: 10px;*/
   /*  padding-right: 0.3em;*/
text-decoration: none;
}

#top {
    text-align:center;FONT-SIZE:1em;COLOR:#2040A0;FONT-WEIGHT: bold;
    padding-top: 2px;padding-bottom: 2px;background-color:#338833;
text-decoration: none;
}

#toptitle {
    text-align:center;FONT-SIZE:1.5em;COLOR:#2040A0;
    padding-top: 0px;padding-bottom: 0px;background-color:#338833;
text-decoration: none;
}
#toptitle1 {
    text-align:center;FONT-SIZE:1.5em;COLOR:#338833;FONT-WEIGHT: bold;
    padding-top: 0px;padding-bottom: 0px;
text-decoration: none;
}

#red {
    
   text-align:left; FONT-SIZE:1.4em;cursor:hand; COLOR:#FF0000;text-decoration: none;
}
#topwhite {
    
   text-align:left; FONT-SIZE:1.4em;FONT-WEIGHT: bold;cursor:hand; COLOR:#FFFFFF;text-decoration: none;
}

#title2 {
 text-align:left;FONT-SIZE:1.4em;FONT-WEIGHT: bold;cursor:hand; background-color:#338833;COLOR:#FFFFFF;padding-top: 2px;padding-bottom: 3px;
}
#title2white {
 
 text-align:left; FONT-SIZE:1.2em; FONT-WEIGHT: bold;cursor:hand; COLOR:#FFFFFF;text-decoration: none;padding-bottom: 5px;
}
#title3 {
 
 text-align:left; font-size:1.4em;FONT-WEIGHT: bold;cursor:hand; COLOR:#FFFFFF;text-decoration: none;padding-top: 0px;padding-bottom: 0px;
}
#o2 {
    text-align:left;
padding-top:1em;
    padding-bottom:0.1em;
    padding-left:1em;
    FONT-SIZE:1.5em;
    FONT-WEIGHT: bold;
    text-decoration: none;
margin:0 0 0 0em;
}
#o2t {
    text-align:left;
padding-top:0.2em;
    padding-bottom:0.1em;
    padding-left:1em;
    FONT-SIZE:1.5em;
    FONT-WEIGHT: bold;
    text-decoration: none;
margin:0 0 0 0em;
}
#o2-1 {
    text-align:left;
padding-top:0.1em;
    padding-bottom:0.1em;
    padding-left:1em;
    FONT-SIZE:1.5em;
    FONT-WEIGHT: bold;
    text-decoration: none;
margin:0 0 0 0em;
}
#o3 {
    text-align:left;
padding-top:0.2em;
    padding-bottom:0.5em;
    padding-left: 2em;
    FONT-SIZE:1.4em;
text-decoration: none;
margin:0 0 0 0em;
}
#o3t {
    text-align:left;
padding-top:0.1em;
    padding-bottom:0.1em;
    padding-left: 2em;
    FONT-SIZE:1.4em;
text-decoration: none;
margin:0 0 0 0em;
}
#o3tt {
    text-align:left;
padding-top:0.1em;
    padding-bottom:0.1em;
    padding-left: .1em;
    FONT-SIZE:1.4em;
text-decoration: none;
margin:0 0 0 0em;
}
#o {
    text-align:left;
padding-top:0.1em;
    padding-bottom:0.1em;
    padding-left: 1em;
    FONT-SIZE:1.4em;
text-decoration: none;
margin:0 0 0 0em;
}
#big {
    FONT-WEIGHT: bold;
    FONT-SIZE:1.1em;
}


/*==展示分类==============*/
.mainclass{
width:100%;
height:auto;
overflow:hidden;
margin:5px auto 4px auto;
text-align:center;
}
.mainclass .cl{
display:inline-block;
vertical-align: middle;
width:23.5%;
height:84px;
margin:5px 0;
}
.mainclass .cl a{
display:block;
width:100%;
height:84px;
}
.mainclass .cl a i{
display:block;
width:100%;
height:74px;
line-height:70px;
font-size:42px;
text-align:center;
}
.mainclass .cl a .c1{color:#519D46;}
.mainclass .cl a .c2{color:#EF450C;}
.mainclass .cl a .c3{color:#2889D0;}
.mainclass .cl a .c4{color:#BF2BB8;}
.mainclass .cl a .c5{color:#88AE42;}
.mainclass .cl a .c6{color:#874AEC;}
.mainclass .cl a .c7{color:#00B7B7;}
.mainclass .cl a .c8{color:#FF8000;}
.mainclass .cl a .c9{color:#666;}
.mainclass .cl a img{
display:block;
width:70px;
margin:0 auto;
height:70px;
line-height:70px;
font-size:48px;
text-align:center;
}
.mainclass .cl a span{
display:block;
width:100%;
height:24px;
line-height:20px;
font-size:13px;
text-align:center;
}

/* button 
---------------------------------------------- */
.button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 1px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .3em .3em .3em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em; 
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.2);
box-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}

.bigrounded {
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
.medium {
font-size: 12px;
padding: .4em 1.5em .42em;
}
.small {
font-size: 1em;
padding: .4em .9em .4em;
}

/* color styles 
---------------------------------------------- */

/* white */
.white {
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top,  #fff,  #ededed);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.white:hover {
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}

.white:active {
color: #999;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
background: -moz-linear-gradient(top,  #ededed,  #fff);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}
.text12_88 { 
margin : 50px 2px 80px 2px; 
font-size : 1.2em; 
color : #CCCCCC; 
text-align : center;
}