body {
    background: #242;
    color     : yellowgreen;
}
.main {
    margin    : 20px auto;
    width     : 640px;
}
table {
    margin    : 10px;
    text-align: center;
    border-collapse:separate;
    border-spacing:0px;
    border-left:#4B4B4B 2px solid;
    border-top:#4B4B4B 2px solid;
}
table caption {
    font      : bold 1.5em "sans-serif";
}
table td {
    width     : 80px;
    height    : 80px;
    font      : bold 3em "sans-serif";
    color     : navy;
    background-color:#FFCEF4;
    padding   :10px;
    border    :#4B4B4B 2px solid;
    border-left:#fff 2px solid;
    border-top:#fff 2px solid;
}
table tr td:hover {
    cursor    : pointer;
    color     : blue;
}

.button1 {
    display       : inline-block;
    position      : relative;
    text-decoration: none;
    font-size     : 12pt;        /* 文字サイズ */
    color         : #7272b8;	   /* #797ec9#f9a9ae */
    width   			: 80px;
    height	    	: 40px;
    font-weight   : bold;
    text-align    : center;      /* 文字位置   */
    cursor        : pointer;     /* カーソル   */
    padding       : 5px 5px;     /* 余白      */
    line-height   : 1em;         /* 1行の高さ  */
    border-radius : 5px;         /* 角丸      */
    transition    : .3s;         /* なめらか変化 */
    background    : linear-gradient(#c6d3ee 0%, #99c 100%);	/* #fed6e3,#ffaaaa */
    text-shadow   : 1px 1px 1px rgba(255, 255, 255, 0.66);
    box-shadow    : 0 1px 1px rgba(0, 0, 0, 0.28);  /* 影の設定 */
}
.button1:active {  /*押したとき*/
    -webkit-transform: translateY(2px);
    transform     : translateY(2px);/*沈むように*/
    box-shadow    : 0 0 1px rgba(0, 0, 0, 0.15);
    background-image: linear-gradient(#d6e3fe 0%, #bcbcff 100%);/* #fed6e3,#ffbcbc グラデーションを明るく*/
}

.button2 {
    display       : inline-block;
    position      : relative;
    text-decoration: none;
    font-size     : 12pt;         /* 文字サイズ */
    color         : #59995e;	    /* #79c97e */
    width         : 90px;
    height        : 40px;
    font-weight   : bold;
    text-align    : center;      /* 文字位置   */
    cursor        : pointer;     /* カーソル   */
    padding       : 5px 5px;     /* 余白      */
    line-height   : 1em;         /* 1行の高さ  */
    border-radius : 5px;         /* 角丸      */
    transition    : .3s;         /* なめらか変化 */
    background    : linear-gradient(#c6eed3 0%, #9c9 100%);	/* #d6fee3,#aaffaa */
    text-shadow   : 1px 1px 1px rgba(255, 255, 255, 0.66);
    box-shadow    : 0 1px 1px rgba(0, 0, 0, 0.28);  /* 影の設定 */
}

.button2:active {  /*押したとき*/
    -webkit-transform: translateY(2px);
    transform     : translateY(2px);/*沈むように*/
    box-shadow    : 0 0 1px rgba(0, 0, 0, 0.15);
    background-image: linear-gradient(#d6fee3 0%, #bcffbc 100%);/* #fed6e3,#ffbcbc グラデーションを明るく*/
}