@media screen {    /* CSS rules for screen display */

    /* General tag styles */
    body, html       {  font: 100% Book Antiqua, serif;
                        background-color: white;
                        text-align: left;
                        line-height: 150%;}

    a                {  text-decoration: none;}

    a:hover          {  color: #B80000;
                        text-decoration: none;
                        background-color: #e9e9e9;}

    /* ID styles (only one occurrence per document) */
    #main            {  width: 900px;
                        margin: 0 auto;}

    #sig, #d-title   {  font-style: italic;
                        font-weight: bold;
                        line-height: 150%;}

    #contents        {  line-height: 150%;}


    /* Class styles (multiple occurrences per document) */
    .s-num           {  font-size: 140%;
                        font-weight: bold;
                        float: left;
                        width: 50px;
                        line-height: 200%;
                        padding-top: 10px;}

    .s-title         {  font-size: 140%;
                        font-weight: bold;
                        line-height: 200%;
                        padding-top: 10px;
                        /*text-shadow: 5px 5px 5px #D8D8D8;*/}

    .scroll          {  display: block;
                        margin-left: auto;
                        margin-right: auto;
                        padding-top: 5px;
                        padding-bottom: 5px;
                        width: 10%;}

    .c-num           {  float: left;
                        width: 50px;
                        text-align: left;}

    .lesson-bottom   {  font-size: 70%;
                        text-align: left;
                        color: #B80000;}

    .bottom-link     {  color: #222222;}

    .lesson-img      {  display: block;
                        margin-left: auto;
                        margin-right: auto;
                        padding-top: 5px;
                        padding-bottom: 5px;
                        }
}

/* General smartphone width */
@media only screen and (max-device-width: 480px) { 
    body, html                  {font-size: 100%;text-shadow: none;}
    #main                       {width: 400px}
    .lesson-title, h1, h2       {text-shadow: none;}
                                }

/* iPhone width */
@media only screen and (max-device-width: 320px) { 
    body, html                  {font-size: 100%;text-shadow: none;}
    #main                       {width: 240px}
    .lesson-title, h1, h2       {text-shadow: none;}
                                }

/* LG Nexus 5 width */
@media only screen and (max-device-width: 360px) { 
    body, html                  {font-size: 100%;text-shadow: none;}
    #main                       {width: 360px}
    .lesson-title, h1, h2       {text-shadow: none;}
                                }
/* Browser window width*/
@media only screen and (max-width: 480px) {
    body, html                  {font-size: 100%;text-shadow: none;}
    #main                       {width: 400px}
    .lesson-title, h1, h2       {text-shadow: none;}
                                }