@charset "utf-8";

/* For all window */
#bowling-header       { position: fixed; top: 0; left: 0; z-index: 9998; width: 100%; margin: 0; padding: 0; text-align: left; opacity: 0.9; box-shadow: 0 4px 8px gray; background-color: #1f0068; background: linear-gradient(to bottom, #6600cc, #1f0068); }
#bowling-header h1    { margin: 0; padding: 0; position: absolute; left: 0; top: 0; text-align: left; font-size: 16px; font-weight: bold; text-shadow: 1px 1px 4px #9999ff; }
#bowling-header-title { color: #ffff00; }
#bowling-header-link  { margin: 0; padding: 0; position: absolute; left: 0; bottom: 0; width: 100%; overflow: hidden; white-space: nowrap; font-size: 12px; display: none; text-align: left; background-color: rgba(255,255,255,0.1); }

#bowling-header-menu  { position: absolute; top:  1px; right: 1px; z-index: 9999; text-align: right; }
#bowling-header-drop  { position: absolute; top: 36px; right: 4px; z-index: 9998; background-color: rgba( 192, 255, 192, 0.9 ); text-align: center; padding: 0.5em; border: 2px solid #009900; box-shadow: 2px 2px 4px gray; }

#bowling-footer       { position: relative;  margin: 0; padding: 0; text-align: right; opacity: 0.9; background-color: #1f0068; background: linear-gradient(to bottom, #6600cc, #1f0068); }
#bowling-footer-str   { margin: 0; padding: 0; position: absolute; right: 0; bottom: 0; text-align: right; font-size: 16px; font-weight: bold; text-shadow: 1px 1px 4px #9999ff; }
#bowling-footer-title { color: #ffff00; }
#bowling-footer-link  { margin: 0; padding: 0; position: absolute; right: 0; top: 0; width: 100%; overflow: hidden; white-space: nowrap; font-size: 12px; display: none; text-align: left; background-color: rgba(255,255,255,0.1); }

#bowling-small-link   { font-size: 80%; margin: 4px auto; }

.bowling-link-on          { height: 20px; margin: 0; padding: 0 4px; color: #ff6600; background-color: rgba(255,255,255,0.3); }
.bowling-link-off         { height: 20px; margin: 0; padding: 0 4px; color: #ffffff; background-color: rgba(255,255,255,0.1); }
.bowling-link-off:hover   { color: #ff6600; background-color: rgba(255,255,255,0.5); }
.bowling-link-off a       { color: #ffffff; }
.bowling-link-off a:hover { color: #ff6600; }

#bowling-header .bowling-link-on             { float: left; border-left: 1px solid rgba(255,255,255,0.5); }
#bowling-header .bowling-link-off            { float: left; border-left: 1px solid rgba(255,255,255,0.2); }
#bowling-header .bowling-link-on:last-child  { border-right: 1px solid rgba(255,255,255,0.5); }
#bowling-header .bowling-link-off:last-child { border-right: 1px solid rgba(255,255,255,0.2); }
#bowling-footer .bowling-link-on             { float: right; border-right: 1px solid rgba(255,255,255,0.5); }
#bowling-footer .bowling-link-off            { float: right; border-right: 1px solid rgba(255,255,255,0.2); }
#bowling-footer .bowling-link-on:last-child  { border-left: 1px solid rgba(255,255,255,0.5); }
#bowling-footer .bowling-link-off:last-child { border-left: 1px solid rgba(255,255,255,0.2); }

h1                { font-size: 200%; margin: 0.5em auto; color: #1f0068; font-weight: bold; text-shadow: 4px 4px 16px gray; }
h2                { font-size: 150%; margin: 0.2em auto; color: #009900; font-weight: bold; text-shadow: 4px 4px 8px gray; }

.bowling-outline  { background-color: #ffffcc; margin: 0.5em auto; padding: 0.5em; border: 2px solid #ff9900; box-shadow: 4px 4px 16px gray; text-shadow: 1px 1px 4px #9999ff; }
.bowling-index    { background-color: #ddffff; margin: 0.5em auto; padding: 0.5em; border: 2px solid #000099; box-shadow: 4px 4px 16px gray; text-align: left; text-shadow: 1px 1px 4px #9999ff; }
.bowling-chapter  { font-size: 130%; color: #1f0068; font-weight: bold; margin: 0.5em 12px; padding: 0.2em 0.5em; text-align: left; box-shadow: 4px 4px 16px gray; text-shadow: 2px 2px 8px gray; border-left: 8px solid #1f0068; border-bottom: 2px solid #1f0068; background-color: #ffccff; background: linear-gradient(to bottom, #ffeeff, #ffccff); }
.bowling-section  { font-size: 120%; color: #1f0068; font-weight: bold; margin: 0.5em 12px; padding: 0.2em 0.5em; text-align: left; border-bottom: 1px dashed #1f0068; text-shadow: 1px 1px 4px gray; }
.bowling-content  { font-size: 100%; margin: 0.5em 12px; padding: 0.5em; text-align: left;   background-color: #ffffee; border: 2px solid #1f0068; box-shadow: 4px 4px 16px gray; }
.bowling-link     { font-size: 100%; margin: 0.5em 12px; padding: 0.5em; text-align: left;   background-color: #eeffff; border: 2px solid #009999; box-shadow: 4px 4px 16px gray; }
.bowling-next     { font-size: 100%; margin: 0.5em 12px; padding: 0.5em; text-align: center; background-color: #ffeeff; border: 2px solid #ff00ff; box-shadow: 4px 4px 16px gray; }

#bowling-swing-side { box-shadow: 2px 2px 8px gray; }
#bowling-swing-top  { box-shadow: 2px 2px 8px gray; }
#bowling-swing-all  { box-shadow: 2px 2px 8px gray; }
#bowling-pushaway   { box-shadow: 2px 2px 8px gray; }
#bowling-throw      { box-shadow: 2px 2px 8px gray; }
#bowling-walk       { box-shadow: 2px 2px 8px gray; }

/* For smartphone window (small) */
@media screen and ( min-width : 481px ) {
    #bowling-small-link   { display: none; }
}

/* For smartphone window (small) */
@media screen and ( max-width : 640px ) {
    #bowling-header       { height:  36px; }
    #bowling-header-link  { display: none; }
    #bowling-header-menu  { display: block; }
    #bowling-footer       { height:  36px; }
    #bowling-footer-link  { display: none; }
}

/* For smartphone window (big) */
@media screen and ( min-width : 641px ) {
    #bowling-header       { height: 56px; }
    #bowling-header-link  { display: block; height: 20px; text-align: left; }
    #bowling-header-menu  { display: none; }
    #bowling-header-drop  { display: none; }
    #bowling-footer       { height: 56px; }
    #bowling-footer-link  { display: block; height: 20px; text-align: right; }
    #bowling-small-link   { display: none; }
}

/* For tablet window */
@media screen and ( min-width : 768px ) {
}

/* For PC window (full size) */
@media screen and ( min-width : 1024px ) {
}

/* For PC window (large size) */
@media screen and ( min-width : 1280px ) {
}

/* For Print */
@media print {
    #bowling-header   { display: none; }
    #bowling-footer   { display: none; }
    .bowling-outline  { box-shadow: none; }
    .bowling-index    { box-shadow: none; }
    .bowling-chapter  { box-shadow: none; }
    .bowling-content  { box-shadow: none; }
    .bowling-link     { box-shadow: none; }
    .bowling-next     { box-shadow: none; }
}