/*  global      */
@import "cssreset.css";

*       {   box-sizing:     border-box; }

body    {   font-family:    sans-serif; 
            background:     #f7f7f7 url("imgs/border.png") repeat-y;
            margin:         30px;       }

#page   {   max-width:      1000px;
            margin:         0 auto;     }

/*  headings    */
h1,h2,h3,h4,h5,p    {   margin: 10px 10px 30px;   }

h1  {   text-align:     center; 
        margin-right:   130px;
        font-size:      305%;   }

h2  {   text-align: center; 
        font-size:  244%;   }
#index h2 { font-size:  244%;   }

nav {   font-size:  156%;   }

h3  {   font-size:  156%;
        color:      white;
        padding:    5px 10px;
        text-align: left;   }
#book h3    {   background:     black;  }
#author h3  {   background:     black;  }
#content h3 {   background:     black;  }
#teacher h3 {   background:     black;  }
#student h3 {   background:     black;  }
#color h3   {   background:     red;    }
#drawing h3 {   background:     blue;   }
#commercial h3  {   background:     green;  }
#cartooning h3  {   background:     purple; }
#painting h3    {   background:     darkorange;     }
#threedee h3    {   background:     cornflowerblue;
                    color:          black;  }
#praise h3  {   background:     black;  }

h4,h5   {   font-size:  156%;   }

nav a img   {   border:     solid #ed1b24 10px;
                padding:    5px;
                cursor:     pointer;
                float:      left;   }

.prev,.next {   max-width:  55%; 
                margin:     0 0 15px;
                padding:    5px;   }
.next       {   float:      right;
                text-align: right;      }
.prev       {   float:          left;
                margin-left:    5px;   }
.prev,.next     {   text-decoration:    none;
                    color:  black;  }

.leftarrow, .leftarrowshadow      {   float:  left;   }
.rightarrow, .rightarrowshadow    {   float:  right;  }
.leftarrow, .leftarrowshadow, .rightarrow, .rightarrowshadow {
    display:        inline;
    width:          0; 
    height:         0; 
    margin-top:     5px;
    border-top:     10px solid transparent;
    border-bottom:  10px solid transparent;  }
.leftarrow  {    /*  arrowbase =  (2 * arrowside) * 0.866% */
    left:           13px;
    border-right:   17px solid red;     }
.rightarrow  {
    right:          13px;
    border-left:    17px solid red;     }
.prev span, .next span  {   
    position:       relative;
    padding-top:    4px;
    display:        inline-block;       }
.leftarrowshadow, .rightarrowshadow     {
    position:       relative;
    top:            4px;
    z-index:        -1;             }
.prev span  {       left:   -13px;  }
.next span  {       right:  -13px;  }
.leftarrowshadow {   
    left:           -13px;
    border-right:   14px solid black;
    margin-right:   10px;   }
.rightarrowshadow    {   
    right:          -13px;
    border-left:    14px solid black;
    margin-left:    10px;   }

/*  general     */

main    {   clear:  both;   }
.clear  {   clear:  both;   }

/*  figures, tables, paragraph, lists, etc. */

.intro          {   color:  black;  }
.color          {   color:  red;    }
.drawing        {   color:  blue;   }
.commercial     {   color:  green;  }
.cartooning     {   color:  purple; }
.painting       {   color:  darkorange; }
.threedee       {   color:  cornflowerblue; }
.enrichment     {   color:  magenta;        }
.lesson         {   color:  black;  }

figure  {   float:  left;
            width:  45%;
            font-size:  smaller;
            text-align: center;
            margin:     0 15px 15px 10px;   } 
figure img  {   border:     solid black 1px;
                margin:     0 auto;
                max-width:  100%;           }

ul,ol   {   margin: 0 10px; }
li      {   margin: 0 20px; }
li li   {   margin: 0 30px; }

table   {   margin: 20px 10px;  }
td  {   text-align: center;
        border:     solid black 1px;
        width:      120px;
        height:     45px;
        padding:    5px;
        vertical-align: middle; }
.mobitable  {   display:    none;   }

.imglink img    {   display:    block;
                    float:      none;
                    margin:     10px auto; 
                    max-width:  70%;   }

/*  home page    */
#home img    {  display:    block;
                float:      none;
                margin:     10px auto; 
                max-width:  100%;
                height:     auto;   }

/*  menu page   */
#menu .intro        {   color: black;   background:  white; border: solid black 1px; }
#menu .color        {   color: white;   background:  red;       }
#menu .drawing      {   color: white;   background:  blue;      }
#menu .commercial   {   color: white;   background:  green;     }
#menu .cartooning   {   color: white;   background:  purple;    }
#menu .painting     {   color: white;   background:  darkorange;        }
#menu .threedee     {   color: white;   background:  cornflowerblue;    }
#menu .enrichment   {   color: white;   background:  magenta;   }
#menu .lesson       {   color: black;   background:  white; border: solid black 1px; }
#menu a {   text-decoration:    none;   
            width:          100%;
            display:        block;
            padding:        5px 10px;
            margin:         0;
            font-size:      120%;
            font-weight:    bold;   }
#menu ul    {   margin: 0 130px 0;  }
#menu li    {   list-style: none;
                margin: 5px 15px;   }

/*  book page    */
#book h3    {   counter-reset:  item;   }
#book h4    {   color:  red;        }
#book h5    {   color:  blue;   }
#book figure    {   float:      none;            
                    width:      100%;   }
#book section   {   max-width:  600px;
                    margin:     0 auto;
                    padding:    0 20px;    }
#book ol  {     float:  left;
                margin: 25px auto 25px 40px;    }
#book ol>li {
    counter-increment:  item; 
    list-style: none inside;
    margin:     20px 0; }
#book ol>li:before {
    content:    counter(item); 
    float:      left;
    display:    block;
    position:   relative;
    top:        -6px;
    color:      blue;
    border:     solid blue 2px;
    width:      25px;
    height:     20px;
    padding-top:    4px;
    border-radius:  50%;
    text-align:     center;
    font-weight:    bold;
    margin-right:   15px;     }

/*  content page      */
#content section    {   float:  left;
                        width:  45%;
                        margin: 0 auto 25px;    }
#content ul         {   margin:     25px;   }

/*  color page  */
#color section  {   float:  left;
                    width:  45%;    }
#color .indent  {   margin-left:    30px;   
                    display:        inline-block;   }

/*  commercial page */
#commercial ul  {   float:  left;
                    margin-bottom:  20px;   }

/*  footer      */
footer  {   margin:     20px 5px 5px;
            font-size:  75%;
            clear:      both;   }

.siteby {   float:          right;      }
.siteby a   {   text-decoration:    none;
                color:      black;      }

/*  smaller  */
@media only screen and (max-width : 760px)  {
#book section   {   float:  none;
                    clear:  both;
                    margin: 0 auto 20px;    }   }
@media only screen and (max-width : 630px)  {
#color section,
#content section  {   float:  none;
                    width:  100%;           }   }
@media only screen and (max-width : 650px)  {
#book ol    {   float:  none;   }           }

/*  mobile  */
@media only screen and (max-width : 480px)  {

body    {   margin:     10px;   
            background: #f7f7f7 url("imgs/borderSmall.png") repeat-y;    }
h1  {   font-size:  249%;   
        margin:     0;      }
h2  {   font-size:  110%;
        font-weight:    normal;
        margin:         10px auto;  }
#index h2 { font-size:      173%;
            font-weight:    bold;   }

h3,h4,h5    {   font-size:  144%;   }

nav a img   {   width:  20vw;
                float:  left;   }

nav {   font-size:  110%;   }

#menu ul    {   margin:     0;      }

#book figure    {   text-align: left;   }

.widetable  {   display:    none;   }
.mobitable  {   display:    block;  }

figure      {   width:      95%;
                margin:     0 10px 15px;    } 
figure img  {   max-width:  90%;    }
.narrow     {   float:      none;
                width:      100%;   }

footer  {   margin:     40px 5px 5px;   }

}

/*  large device font sizes  0.56, 0.75, 
     1.00, 1.25, 1.56, 1.95, 2.44, 3.05
    mobile device font sizes 0.64, 0.80, 
     1.00, 1.20, 1.44, 1.73, 2.07, 2.49
h1  305%    249%
h2  244%    207%
nav 156%    144%
h3  156%    144%
h4  195%    173%
p   100%    100%
*/