.body{
    background-color:#e0ffff;
}
.button{
    padding:3px;
    margin:0;
    font-weight:bold;
    color:#00008b;
    background:#87cefa;
    border: solid 3px #00008b;
    border-radius:15px;
}
.button2{
    padding: 3px;
    margin: 0;
    font-weight: bold;
    color: #00008b;
    background: #87cefa;
    border: solid 3px #00008b;
    border-radius: 10px;
}
.button3{
    padding: 3px;
    margin: 0;
    font-weight: bold;
    color: #00008b;
    background: #87cefa;
    border: solid 2px #00008b;
    border-radius: 10px;
}

.frameA{
    padding:3px;
    margin:5px 0 0 0;
    font-weight:bold;
    color:#00008b;
    background:#87cefa;
    border: solid 3px #00008b;
    border-radius:15px;
}

.frameB{
    padding:3px;
    margin:3px 0 0 0;
    font-weight:bold;
    color:#00008b;
    background:#87cefa;
    border: solid 2px #00008b;
    border-radius:15px;
}

.back{
    font-weight: bold;
    color: #00008b;
    background: #87cefa;
    border: solid 3px #00008b;
    border-radius: 6px;
}

.tab_wrap{
    width:360px;
    margin:0;
}
input[name="tab_btn"]{
    display:none;
}
.tab_area label{
    width:90px;
    margin:0 5px 0 0;
    display:inline-block;
    padding:12px 0;
    text-align:center;
    font-size:13px;
    cursor:pointer;
    transition:ease 0.2s opacity;
    font-weight: bold;
    color: #00008b;
    background: #87cefa;
    border: solid 3px #00008b;
    border-radius: 10px;
}
.tab_area label:hover{
    opacity:0.8;
}
.panel_area{
    width:340px;
    padding:3px;
    margin:9px 0 5px -5px;
    font-weight: bold;
    color: #00008b;
    background: #87cefa;
    border: solid 3px #00008b;
    border-radius: 10px;
    text-align:center;
}
.tab_panel{
    padding:0;
    margin: 0;
    display:none;
}
#tab1:checked ~ .tab_area .tab1_label{
    background:rgb(197, 197, 197);
}
#tab1:checked ~ .panel_area #panel1{
    display:block;
}
#tab2:checked ~ .tab_area .tab2_label{
    background:rgb(197, 197, 197);
}
#tab2:checked ~ .panel_area #panel2{
    display:block;
}
#tab3:checked ~ .tab_area .tab3_label{
    background:rgb(197, 197, 197);
}
#tab3:checked ~ .panel_area #panel3{
    display:block;
}

img {
    vertical-align: middle;
}