html {
    background-image: url(/image/pencil_bg.jpg);
    background-repeat: no-repeat;
    background-position:center center;
    background-attachment: fixed;
    background-size: cover;
    color: black;
}
body {
    font-size: 1em;
    font-family: Comic-Sans, Comic-Sans MS, sans-serif;
}
footer { 
    width: 100%;
    border: 3px #00baff solid;
    position: relative;
    background: #e0f1fa;
    margin-top: 0.625em;
    height: 5em;
    text-align: center;
}
footer p {
    padding-top: 0.9375em;
    font-size: 1.25em;
    color: black;
    font-family: Comic-Sans, Comic-Sans MS, sans-serif;
}
img {
    max-width: 100%;
}
.div-six img {
    max-width: 60%;
} 
h1 {
    font-size: 1.5625em;
    text-align: center;
    padding: 0.1875em 0;
}
h2 {
    font-size: 2.5625em;
    padding: 0.625em 0;
}
ol li {
    list-style:decimal;
    font-family:"Comic Sans", sans-serif;
    margin-left: 25px;
    padding: 0.3125em 0 0.125em 5px;
}
ol ol li {
    list-style:lower-alpha;
    margin-left: 28px;
}
ol ol ol li {
    list-style:lower-roman;
    margin-left: 40px;
    padding: 0.125em 0 0.125em 2px;
}
th {
    font-size: 1.5em;
}
ul li {
    list-style:none;
    font-family:"comic sans", sans-serif;
    margin-left:10px;
}
.container {
    height:100%;
    position: relative;
    top: 2.5em;
    width: 100%;
    border: 3px #00baff solid;
    background: #f7fdf2;
    left: 15px;
}
.clearMe { 
    clear: both;
}
.div-intro {
    width: 54%;
    border: 3px #00baff solid;
    float: left;
    position: relative;
    background: #FFFFFF;
    left: .1%;
    font-size: .68em;
    margin: 1.4em 0 0 10px;
}
.div-intro ol {
    float: left;
    padding: 1.5em 1% 0 .5%;
    font-size: 1.3em;
}
.div-intro img {
    float: left;
    padding: 0 0 0 6%;
}
.div-intro p {
    font-size: 1.5em;
    padding-left: 1.2%;
}
.div-intro h1 {
    font-size: 3.3em;
    text-align: center;
    padding: 0.1875em 0;
}
/*header*/
.div-one { 
    width: 100%;
    border: 3px #00baff solid;
    position: relative;
    background: white url(../image/master_header.jpg)no-repeat 	left top;
    top: 1.1em;
    left: 20px;
    z-index:1;
}
.div-one p {
    font-size: 4em;
    font-family: Comic-Sans, Comic-Sans MS, cursive;
    margin-left: 500px;
    margin-top: .33em;
    height: 1.7em;
    text-align: center;
}
/*top navigation bar*/
.div-two {
    width:100%;
    border: 3px #00baff solid;
    left: 1.41667%;
    position: relative;
    list-style:none;
    height:2em;
    padding:0;
    margin: 22px;
    border:none;
}
.div-two li {
    float:left;
    margin-right:0.25em;	
}
.div-two li a {
    display:block;
    padding:0 2em;
    border:0.1em solid #000;
    border-bottom:1;
    font:bold 0.88em/3em arial,geneva,helvetica,sans-serif;
    color:#000;
    background-color:#00baff;

    /* CSS 3 elements */
    -webkit-border-top-right-radius:0.50em;
    -webkit-border-top-left-radius:0.50em;
    -moz-border-radius-topright:0.50em;
    -moz-border-radius-topleft:0.50em;
    border-top-right-radius:0.50em;
    border-top-left-radius:0.50em;
}
.div-two li a:hover {
    background:#FFF;
    color:#FFF;
    text-decoration:none;
}
/*top ad*/
.div-three {
    width: 95%;
    border: 3px #00baff solid;
    position: relative;
    background: #FFFFFF;
    left: 2.08333%;
    font-size: 1.5em;
}
/*left pencil navigation*/		
.div-four {
    width: 20%;
    top: 1.5em;
    border: 3px #00baff solid;
    float: left;
    background: #FFFFFF;
    margin: .9em 0 0 1%;
    height: 22.5em;
}
.div-four p {
    text-align: center;
    font-size: 1.25em;
}
.div-four ul li {
    position: relative;
    padding: .3em 0 .3em 1%;
}
.div-four ul li p {
    font-size: 1em;
}
/*lesson book section*/
.div-five {
    width: 24%;
    border: 3px #00baff solid;
    float: left;
    position: relative;
    background: #FFFFFF;
    font-size: 1em;
    text-align: center;
    margin: .83em 0 0 1.2%;
    height: 22.7em;
}
.div-five a {
    font-family:"Comic Sans", "Comic Sans MS", sans-serif;
    font-size: 2.125em;
    top: 5em;
    left: 60%;
    bottom: 3.9em;
    position: absolute;
}
#lesson_book {
    margin: 1.25em .5% 0 0;
}
#long {
    position: relative;
    left: 7px;
    top:-90px;
}
/*coloring pages*/
.div-six {
    width: 28%;
    border: 3px #00baff solid;
    float: left;
    background: #FFFFFF;
    font-size: 1em;
    text-align: center;
    margin: 1em 0 0 1%;
    font-size: 1em;
    height: 22.5em;
}
#crayons {
    margin: .3em 0 .3em 0;
}
.div-six .sec-one {
    padding: .3em 0 .3em 5%;
    float: left;
}
.div-six .sec-one p {
    padding: .6em 0 .9em 0;
}
.div-six .sec-two {
    padding: .3em 0 .9em 0;
    float: right;
}
.div-six .sec-two p {
    padding: .6em 0 .9em 0;
}

/*ad right side*/
.div-seven {
    width: 15%;
    border: 3px #00baff solid;
    float: left;
    background: #FFFFFF;
    left: 81.77%;
    margin: .7em 0 0 1%;
    font-size: 1.5em;
    height: 15em;
}

/*ad left side*/
.div-eight {
    width: 17%;
    border: 3px #00baff solid;
    float: left;
    background: #FFFFFF;
    left: 1%;
    margin: .65em 0 0 1%;
    font-size: 1.5em;
    height: 27em;
}
/*activities*/
.div-nine {
    width: 40%;
    border: 3px #00baff solid;
    float: left;
    background: #FFFFFF;
    left: 11.25em;
    margin: 1.4em 0 0 10px;
    font-size: 1em;
}
/*suggested reading*/
.div-ten {
    width: 32%;
    border: 3px #00baff solid;
    float: left;
    background: #FFFFFF;
    left: 62.5%;
    margin: .96em 0 0 1%;
    font-size: 1em;
}
li iframe {
    width: 90%;
    height: 205px;
}
.div-related {
    width: 55%;
    border: 3px #00baff solid;
    float: left;
    background: #FFFFFF;
    position: relative;
    left: .1%;
    font-size: .9em;
    margin: .9em 0 0 1%;
}
.div-related h1 {
    font-size: 1.5em;
    text-align: center;
    padding: 0.1875em 0;
}

.last {
    position:relative;
}
.letter-books {
    width: 49.47917%;
    border: 3px #00baff solid;
    float: left;
    background: #FFFFFF;
    left: 4%;
    font-size: 15px;
    bottom: 314px;
    margin: 15px 0 0 10px;
}
.letter-books p {
    font-size: 55px;
    text-align: center;
    color: red;
}
#letters-one {
    padding-left: 6%;
}
.letter_page {
    width: 45%;
    border: 3px #00baff solid;
    float: left;
    background: #FFFFFF;
    left: 22.9%;
    font-size: 1.125em;
    bottom: 19.75em;
    margin: .9em 0 0 1%;
}

.table-container {
    width: 58%;
    border: 3px #00baff solid;
    float: left;
    background: #FFFFFF;
    left: 220px;
    font-size: .72em;
    bottom: 19.75em;
    margin: 1.4em 0 0 10px;
}
.table-ad-two {
    width: 15.5%;
    border: 3px #00baff solid;
    position: absolute;
    background: #FFFFFF;
    left: 81%;
    bottom: 56.6em;
    font-size: 1.5em;
    margin: 15px 0 0 10px;
    height: 15.1em;
}
.table-ad-three {
    width: 19.4%;
    border: 3px #00baff solid;
    position: absolute;
    background: #FFFFFF;
    left: 1.4%;
    bottom: 28em;
    font-size: 1.5em;
    height: 28.1em;
}
.table {
    width: 48%;
    border: 3px #00baff solid;
    background: #FFFFFF;
    left: 2.1%;
    font-size: .9em;
    top: 17.875em;
    padding-left: 1%;
    position: relative;
    left: 2.2%;
    bottom: 19.75em;
}
.table-one {
    margin: 1.25em 0 0 4%;
    border: 2px solid black;
    text-align: center;
}
.table-one th {
    padding-left: 1%;
    border: 2px solid black;
    font-size: 1em;
}
.table-one td {
    padding-left: 1%;
    border: 2px solid black;
}
.table-two {

    width: 60%;
    position: relative;
    text-align: center;
    border: none;
    left: 9%;
}
.table-two img {
    padding:1.25em 0 0 1.42%;
}
.table-two th {
    font-size: 1.8em;
}
.table-two tr td {
    font-size: 1.5em;
}
.topic {
    color: #184AE8;
    font-size: 16px;
}
.underline {
    padding: 20px 0 0 0;
    text-decoration:underline
}

/*ad right side*/
/*workbook page*/
.workbook-ad-two {
    width: 20%;
    border: 3px #00baff solid;
    float: left;
    background: #FFFFFF;
    left: 77%;
    bottom: 37.5em;
    font-size: 1.5em;
    margin: .73em 0 0 1%;
    height:22.5em
}

/*ad left side*/
/*workbook page*/
.workbook-ad-three {
    width: 20%;
    border: 3px #00baff solid;
    position: absolute;
    background: #FFFFFF;
    left: 1%;
    bottom: 10.8em;
    font-size: 1.5em;
    height: 25.5em;	
}

/*--phone portrait--*/
@media screen and (max-width:480px) {
    .div-intro {
        float: none;
        clear: both;
        width: auto;
    }
    .div-five {
        float: none;
        clear: both;
        width: auto;
    }
    .div-six {
        float: none;
        clear: both;
        width: auto;
    }
    .div-ten {
        float: none;
        clear: both;
        width: auto;
    }
    .div-six .sec-two {
        float: none;
        clear: both;
        width: auto;
    }
    .div-six .sec-one {
        float: none;
        clear: both;
        width: auto;
    }
}