button {
    cursor: pointer;
    background-color: gainsboro;
    border-color: darkgray;
    margin:5px;
}

    button:hover {
        background-color: lightgreen;
        border-color: darkgreen;
    }


h1 {
    background-color: white;
    border: none;
    border-radius: 0;
    color: #5B5B5B;
    border-bottom: 2px solid navy;
    text-align: left;
    font-size:1.20rem;
}

.company-name-link {
    color: navy;
    text-decoration: none;
}

div#titleBar {
    padding: 5px;
    border-bottom: 5px solid navy;    
}



.two-column-grid {
    display: grid;
    grid-template-columns: 25% auto;
    grid-gap: 2px;
    background-color: darkgray;
    padding: 2px;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

/*  Teachers Helper */
#drop-target {
    padding-top: 25px;
}
/* --------- iphone portrait -----------  */
@media only screen and (max-device-width: 540px) {
    #drop-target {
        display: none;
    }    
}
.drop-target-box {
    margin-left: 50px;
    margin-right: 50px;    
    padding: 50px;
    text-align: center;    
    font-size: 5rem;
    border: 2px dashed gray;
    border-radius: 15px;    
}

.drop-target-text {
    margin-left: 100px;
    margin-right: 100px;
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;
    font-size: 1.5rem;
    line-height: 2rem;
    border-bottom: 2px solid gray;    
}

/* --------- iphone portrait -----------  */
@media only screen and (max-device-width: 540px) {    
    .drop-target-text {
        margin: 0;
    }
}

.drop-target-text-large {
    font-size: 1.5rem;
    line-height: 2rem;
}

.drop-target-text-medium {
    font-size: 1.2rem;
}

.drop-target-button-container {
    padding: 5px;
    text-align: center;
}

.drop-target-button-container > button {
    width: 100%;
}



        
        
        




/* --------- iphone portrait -----------  */
@media only screen and (max-device-width: 540px) {
  .two-column-grid {
        grid-template-columns: 1fr;
        grid-gap: 1px;
        padding: 1px;
        font-size: 1rem;
    }
}
        

.two-column-grid-header {
    grid-column-start: span 2;
    padding: 10px;
    background-color: #B3C7Df;
}


/* --------- iphone portrait -----------  */
@media only screen and (max-device-width: 540px) {
    .two-column-grid-header {
        grid-column-start: span 1;
    }    
}
        

.two-column-grid-footer {
    grid-column-start: span 2;
    background-color: #F4F5D2;
}


/* --------- iphone portrait -----------  */
@media only screen and (max-device-width: 540px) {
    .two-column-grid-footer {
        grid-column-start: span 1;
    }
}
        
.two-column-grid-one-column {
    grid-column-start: span 2;
    background-color: white;
}


/* --------- iphone portrait -----------  */
@media only screen and (max-device-width: 540px) {
    .two-column-grid-one-column {
        grid-column-start: span 1;       
    }
}
        

.two-column-grid-right {
    background-color: white;
    padding: 10px;
}

.two-column-grid-left {
    background-color: #C8EFCA;
    padding: 10px;
    display: flex;
    align-items: center;
}

.four-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;
    background-color: gainsboro;
}

.four-column-grid > div {
    padding: 5px;
    background-color: white;    
}


/* --------- iphone portrait -----------  */
@media only screen and (max-device-width: 540px) {
    .four-column-grid {
        grid-template-columns: 1fr;        
    }

}
        

.invisible-template {
    display: none;
}


/*
    covers portrait and landscape 
    @media screen and (min-width: 481px) and (max-width: 1366px) and (orientation:portrait) {
    @media screen and (min-width: 481px) and (max-width: 1366px) and (orientation:landscape) {
*/
/* --------- ipad portrait -------------  */
@media screen and (min-width: 481px) and (max-width: 1366px) {
}





/* Clean this up from the online.css*/
/* --------  all screens (default) -----------  */
body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

a {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h2 {
    border-radius: 5px;
}

.primary-button {
    background: linear-gradient(#ccffcc,#99ff99);
}

.disabled-button {
    background-color: gainsboro;
    border: 1px solid gray;
    color: darkgray;
}

    .disabled-button:hover {
        background-color: gainsboro;
        border: 1px solid gray;
        color: darkgray;
    }

.standard-button {
    width: auto;
    width: initial;
    padding-left: 15px;
    padding-right: 15px;
}

div#header {
    padding: 0;
    text-align: center;
    background-color: lightblue;
}

#headerAccountBar {
    padding: 5px;
    border-bottom: 1px solid gray;
}

#contentHeader {
    background-image: url('https://images.movingbeyondthepage.com/images/titleonline.jpg');
    background-repeat: no-repeat;
    background-color: white;
    text-align: right;
    border-bottom: 25px solid #ff9221;
}

#content {
    position: relative;
    clear: both;
    text-align: left;
    padding: 15px;
}


#contentFooter {
    /*width: 1200px;*/
    margin: auto;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    border-top: 25px solid #ff9221;
}

#headerHomePageLink {
    padding: 5px;
}

.header-button {
    border-radius: 10px;
    border: 1px solid darkgray;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: gainsboro;
}

.header-button-selected {
    border-radius: 10px;
    border: 1px solid darkgray;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #ccffcc;
}


.license-description {
    padding: 5px;
    background-color: gainsboro;
    border: 1px solid darkgray;
    text-align: center;
}

.progress-bar-background {
    background-color: lightblue;
    position: relative;
    text-align: center;
    padding: 5px;
    padding-left: 0;
    border: 1px solid #1a1a1a;
    border-radius: 10px;
}

.progress-bar-foreground {
    background-color: navy;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: .33;
    border-radius: 10px;
}

/* -------------------------------------------------------
	online positioning
---------------------------------------------------------*/
ul.materialsList {
    padding: 0px;
    margin: 0px;
}

li.materialsListItem {
    width: 45%;
    float: left;
    margin-left: 25px;
}

#learningCenterHeader {
    background-image: url('https://images.movingbeyondthepage.com/images/titleonline.jpg');
    background-repeat: no-repeat;
    background-color: white;
    height: 40px;
    padding-right: 15px;
    padding-top: 18px;
    text-align: right;
}

#lessonContent {
    padding-bottom: 20px;
    border-bottom: 1px solid gray;
    margin-bottom: 20px;
}

.lesson-map-grid {
    display: grid;
    grid-template-columns: repeat(12, auto);    
}

.lesson-map-inactive-box {
    border: 1px solid;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
    padding: 5px;
}

.lesson-map-inactive-link {

}

.lesson-map-active-box {
    border: 1px solid;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
    padding: 5px;
}

.lesson-map-active-link {    
    font-weight: bold;
}

.lesson-map-idea-share-box {
    position: relative;
}

.lesson-map-idea-share-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
.lesson-map-idea-share-counter {
    font-size: .66rem;
    position: absolute;
    bottom: 0;
    left: -5px;
    padding: 3px;
    border-radius: 7px;
    background-color: lightgreen;
    color: blue;
    line-height: 1;
}

.lesson-portfolio-link-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lesson-portfolio-link-box {
    position: relative;
}

.lesson-portfolio-link-count {
    font-size: .66rem;
    position: absolute;
    bottom: 0;
    left: -5px;
    padding: 3px;
    border-radius: 7px;
    background-color: lightgreen;
    color: blue;
    line-height: 1;
}

.lessonComplete {
    color: gray;
    text-decoration: line-through;
}

.lessonIncomplete {
    color: black;
}


#navigationButtonContainer {
    padding-bottom: 10px;
    text-align: center;
}

.publisher-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
    border: 1px solid darkgray;
    background-color: gainsboro;
    text-align: center;
    margin-top: 15px;
}

    .publisher-links-grid > div {
        padding: 8px;
    }

.clickable-area {
    cursor: pointer;
    border: 2px solid transparent;
}

    .clickable-area:hover {
        border: 2px solid lightBlue;
        background-color: lightyellow;
    }

.table-of-contents-grid {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto auto;
    font-size: 1rem;
    grid-template-areas:
        "a a a a"
        "b c c c";
}

.table-of-contents-unit-title {
    grid-area: a;
}

.table-of-contents-unit-picture {
    grid-area: b;
}

.tableOfContents {
   grid-area: c;
}



.table-of-contents-unit-version {    
    text-align: center;
    padding: 0;
}

.current-task-details {
    grid-column: 1 / span 2;
    text-align: center;
    padding: 5px;
    background-color: lightyellow;
    border: 1px solid red;
}

.table-of-contents-author {
    display: grid;
    grid-template-columns: auto;
    padding-top: 25px;
}

.table-of-contents-author-title {
    font-size: .75rem;
    font-weight: bold;
}

.table-of-contents-author-name {
    font-size: 1rem;
}

.update-unit-picture-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.update-unit-contributor-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    background-color: darkgray;
    border: 1px solid darkgray;
    grid-gap: 1px;
}

    .update-unit-contributor-grid > div {
        padding: 5px;
    }

.update-unit-contributor-grid-title {
    grid-column: 1 / span 2;
    background-color: gainsboro;
    text-align: center;
    font-weight: bold;
}

.update-unit-contributor-grid-label {
    background-color: lightblue;
    align-items: center;
    display: flex;
    justify-content: right;
}

.update-unit-contributor-grid-value {
    background-color: white;
}

.label-content-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 1px;
    background-color: darkgray;
    border: 1px solid darkgray;
}

    .label-content-grid > div {
        padding: 5px;
    }

.label-content-grid-header {
    grid-column: 1 / span 2;
    font-weight: 800;
    background-color: lightblue;
    padding: 10px;
}

.label-content-grid-label {
    background-color: gainsboro;
    align-items: center;
    display: flex;
    justify-content: right;
}

.label-content-grid-content {
    background-color: white;
}

.label-content-grid-note {
    grid-column: 1 / span 2;
    background-color: white;
}

.assign-to-publisher-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 5px;
}

.unit-task-history-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr 1fr 2fr;
    grid-gap: 1px;
    background-color: darkgray;
    border: 1px solid darkgray;
}

    .unit-task-history-grid > div {
        background-color: white;
        padding: 5px;
    }

.unitContainer {
    width: 160px;
    float: left;
    padding-bottom: 15px;
}

.unitContainerImage {
    height: 200px;
}

.unitPicture {
    width: 25%;
    float: left;
    text-align: center;
}

.unitDescription {
    text-align: left;
    padding: 10px;
}


.lessonPartDivider {
    padding: 5px;
    border: 1px solid gray;
    background-color: #ccffcc;
    font-weight: bold;
    margin-top: 10px;
    clear: both;
}

.lessonPartDividerHalf {
    width: 50%;
    float: left;
}

.lessonSectionDivider {
    background-color: #ffcc99;
    border: 1px solid #ff3300;
    padding: 5px;
    margin: 5px;
    margin-top: 50px;
    font-weight: bold;
}

.lessonHasBeenUpdated {
    border: 1px solid navy;
    background-color: #539DC2;
    padding: 5px;
}

.website-message {
    border: 1px solid red;
    padding: 15px;
    background-color: yellow;
}


.editorNoteContainer {
    background-color: yellow;
    color: black;
    padding: 10px;
    margin-right: 30px;
    margin-left: 30px;
    border: 1px solid red;
}

.parentPlanContainer {
    background-color: #DCDCDC;
    padding: 10px;
    margin-right: 30px;
    margin-left: 30px;
    border: 1px solid gray;
}

.license {
    clear: both;
    text-align: center;
    padding: 5px;
    border-top: 1px solid gray;
    margin-top: 20px;
    padding-top: 20px;
}

#ideaShareTitle {
    padding: 5px;
    text-align: center;
    border: 1px solid black;
    background-color: #3366ff;
    margin-bottom: 10px;
    margin-top: 10px;
    color: white;
}

.lesson-part-tiny-materials {
    padding-bottom: 10px;
    font-style: italic;
}

.lessonPartLink {
    color: navy;
}

.one-column-grid {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 2px;
    background-color: darkgray;
    padding: 2px;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 1rem;
}

.one-column-grid-header {    
    background-color: #B3C7Df;
    padding: 10px;
}


.one-column-grid-body {
    background-color: white;    
}

.one-column-grid-footer {
    background-color: #F4F5D2;
}

.one-column-grid-object-box {
    text-align: center;
    background-color: gray;
}

.web-link-screenshot-grid {
    display: grid;
    grid-template-columns: 15rem auto;
    grid-gap: 25px;
}

    .web-link-screenshot-grid > .web-link-screenshot {
        width: 15rem;
        height: 20rem;
        overflow: hidden;
        margin: 10px;        
        border: 2px solid darkgray;
        border-radius: 10px;        
    }

        .web-link-screenshot-grid > .web-link-screenshot > a > img {
            width: 100%;
        }

    .web-link-screenshot-grid > .web-link-text {
        word-wrap: break-word;
        margin: 10px;
    }

.lesson-part-link-object-container {
    width: 560px;
    height: 315px;
    margin-left: auto;
    margin-right: auto;
}

.lessonPartLinkHeader {
    padding: 5px;
    background-color: #DCDCDC;
    border: 1px solid black;
    margin-top: 15px;
    width: 66%;
    margin-left: auto;
    margin-right: auto;
}

.lessonPartLinkContainer {
    padding: 5px;
    border: 1px solid black;
    width: 66%;
    margin-left: auto;
    margin-right: auto;
}

.lessonPartLinkFooter {
    padding: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #DCDCDC;
    border: 1px solid black;
    border-top: 0px;
    font: normal 10pt;
    width: 66%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}

.lessonPartLinkObject {
    padding: 5px;
    border: 1px solid black;
    width: 66%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: gray;
}

.lessonPartImageHeader {
    padding: 5px;
    background-color: #DCDCDC;
    border: 1px solid black;
    font: bold 14pt;
    margin-top: 15px;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.lessonPartImageContainer {
    padding: 5px;
    border: 1px solid black;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.lessonPartImageFooter {
    padding: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    border: 1px solid black;
    border-top: 0px;
    font: normal 12pt;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}

.learningCenterVisibilityOff {
    border: 1px solid black;
    padding-right: 15px;
    padding-left: 15px;
    background-color: White;
}

.learningCenterVisibilityOn {
    border: 1px solid black;
    padding-right: 15px;
    padding-left: 15px;
    font-weight: bold;
    background-color: Yellow;
}

.spellingItem {
    width: 10%;
    float: left;
}

.lessonBreadCrumbTrailPlain {
}

.lessonBreadCrumbTrailIPhone {
    height: 0;
    visibility: hidden;
}

.student-activity-page-grid {
    display: inline-grid;
    margin-left: 25px;
}

.equation-solution-grid {
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
    grid-gap: 15px;
    row-gap: 5px;    
    column-gap: 0.5em;
    align-items: start;
    font-size: 1.2rem;    
}
    

    .equation-solution-grid > :nth-child(4n+1) {
        justify-self: end; /* Align right */
    }

    .equation-solution-grid > :nth-child(4n+2) {
        justify-self: center; /* Align center */
    }

    .equation-solution-grid > :nth-child(4n+3) {
        justify-self: start; /* Align left */
    }

    .equation-solution-grid > :nth-child(4n+4) {
        padding-left: 15px;
        justify-self: start; /* Align left */
    }

.equation-solution-action-row {         
    color: #666666;
    font-style: italic;
}

.equation-solution-standard-row {
    font-size: 1.4rem;    
}

.equation-solution-underline-row {
    border-bottom: 3px solid #666666;
}

.lesson-part-table {
    border: 1px solid darkgray;
    border-radius: 5px;
    margin: 15px auto;
    padding: 0;
}

    .lesson-part-table th {
        background-color: gainsboro;
        border: 1px solid darkgray;
        padding: 8px;
        text-align: center;
    }

    .lesson-part-table td {
        background-color: white;
        border: 1px solid darkgray;
        padding: 8px;
    }
        


/* --------- iphone -----------  */
@media screen and (max-width: 540px) {
    #layout {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding: 0;
        background-color: white;
        border: 0;
        border-radius: 0;
    }

    #contentHeader {
        background-image: none;
        background-color: white;
        text-align: center;
    }

    #content {
        position: relative;
        padding: 5px;
        clear: both;
    }

    #contentFooter {
        width: 100%;
        padding-top: 15px;
        padding-bottom: 15px;
        text-align: center;
        border-top: 25px solid #ff9221;
    }

    .noIPhone {
        visibility: hidden;
        height: 0px;
    }

    .right /* is this stupid */ {
        text-align: left;
    }

    .license {
        clear: both;
        text-align: center;
        padding: 5px;
    }

    #headerHomePageLink {
        padding: 0;
    }

    .lesson-map-grid {
        grid-template-columns: repeat(2, auto);
    }
    /* -------------------------------------------------------
	    online positioning
    ---------------------------------------------------------*/
    .table-of-contents-grid {        
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;        
        grid-template-areas: "a" "c" "b";
    }

    .publisher-links-grid {
        grid-template-columns:  1fr 1fr;
    }
    
    .publisher-links-grid > div {
        padding: 3px;
    }
    
    ul.materialsList {
        padding: 15px;
        padding-top: 0px;
        margin: 0px;
    }

    li.materialsListItem {
        width: 100%;
        float: left;
        margin-left: 0px;
    }
    
    .lesson-map-active-box {
        display: none;
    }

    .lesson-map-inactive-box {
        display: none;
    }

    .lesson-map-idea-share-box {
        grid-column-start: span 12;
    }

    .lesson-map-blank {
        display: none;
    }

    .lessonComplete {
        color: gray;
        text-decoration: line-through;
    }

    .lessonIncomplete {
        color: black;
    }

    #navigationButtonContainer {
        text-align: center;
    }

    .navigationContainer {
        border: 0px;
        text-align: center;
        width: 100%;
        margin: 0px;
        background-color: #E47646;
    }

    .navigationButton {
        border: 0px;
        padding: 0px;
        float: left;
        width: 50%;
    }

    .navigationButtonInner {
        padding-top: 15px;
        padding-bottom: 15px;
        border: 1px solid black;
    }

    .unitContainer {
        text-align: left;
        width: 100%;
        background-color: #DCDCDC;
        margin-bottom: 10px;
        padding: 0;
        border-radius: 5px;
    }

    .unitContainerImageContainer {
        width: 30%;
        float: left;
        background-color: gainsboro;
        text-align: center;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .unitContainerImage {
        height: initial;
    }

    .unitContainerLink {
        float: left;
        width: 67%;
        text-align: center;
        padding-top: 25px;
    }

    .unitPicture {
        visibility: hidden;
        width: 0px;
    }

    .unitDescription {
        visibility: hidden;
        height: 0px;
    }

    .tableOfContents {
        text-align: left;
        width: 100%;
        padding: 0px;
        border: 1px solid gray;
    }

    .lessonPartDivider {
        padding: 5px;
        border: 1px solid gray;
        background-color: #ccffcc;
        font-weight: bold;
        clear: both;
    }

    .lessonPartDividerHalf {
        width: 100%;
        clear: both;
    }

    .lessonSectionDivider {
        background-color: #ffcc99;
        border: 1px solid #ff3300;
        padding: 5px;
        margin: 5px;
        margin-top: 50px;
        font-weight: bold;
    }

    .lessonHasBeenUpdated {
        border: 5px solid navy;
        background-color: lightBlue;
        padding: 3px;
    }

    .parentPlanContainer {
        background-color: gainsboro;
        padding: 10px;
        margin-right: 0px;
        margin-left: 0px;
        border: 1px solid gray;
    }

    #ideaShareTitle {
        padding: 5px;
        text-align: center;
        border: 1px solid black;
        background-color: #3366ff;
        margin-bottom: 10px;
        margin-top: 10px;
        color: white;
    }

    .web-link-screenshot-grid {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 20rem;
    }

        .web-link-screenshot-grid > .web-link-screenshot {
            height: 20rem;
        }

    .lesson-part-link-object-container {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }


    .lessonPartLink {
        color: navy;
    }

    .lessonPartLinkHeader {
        background-color: gainsboro;
        border: 1px solid black;
        margin-top: 15px;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }

    .lessonPartLinkContainer {
        padding-top: 20px;
        border: 1px solid black;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }

    .lessonPartLinkFooter {
        padding: 5px;
        border: 1px solid black;
        background-color: gainsboro;
        width: 95%;
        margin-bottom: 15px;
    }

    .lessonPartLinkObject {
        padding: 5px;
        border: 1px solid black;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        background-color: gray;
    }

    .lessonPartImageHeader {
        padding: 0px;
        background-color: gainsboro;
        border: 1px solid black;
        font: bold 24pt verdana;
        margin-top: 15px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .lessonPartImageContainer {
        padding: 0px;
        border: 1px solid black;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .lessonPartImageFooter {
        padding: 0px;
        padding-top: 2px;
        padding-bottom: 2px;
        border: 1px solid black;
        border-top: 0px;
        font: normal 24pt verdana;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 15px;
    }
       

    .spellingItem {
        width: 100%;
        float: left;
    }

    .lessonBreadCrumbTrailPlain {
        height: 0px;
        visibility: hidden;
    }

    .lessonBreadCrumbTrailIPhone {
        height: auto;
        visibility: visible;
    }

    .student-activity-page-grid {
        display: grid;
        margin-left: 0;
    }

}

/* --------- ipad portrait -------------  */

/*
    I think covering both portrait and landscape at once will be fine.
    @media screen and (min-width: 481px) and (max-width: 1366px) and (orientation:portrait) {
    @media screen and (min-width: 481px) and (max-width: 1366px) and (orientation:landscape) {
*/
@media screen and (min-width: 481px) and (max-width: 1366px) {
    #layout {
        width: 100%;
        margin: 0;
        background-color: white;
        border: 0;
        border-radius: 0;
        padding: 0;
    }

    #contentHeader {
        background-image: none;
        background-color: 0;
        background: linear-gradient(#ccffcc, #99ff99);
        border-bottom: 14x solid darkGray;
        padding: 5px;
        text-align: center;
    }

    #content {
        position: relative;
        clear: both;
        text-align: left;
        padding: 15px;
    }


    #contentFooter {
        width: 100%;
        margin: auto;
        padding-top: 15px;
        padding-bottom: 15px;
        text-align: center;
        border-top: 25px solid #ff9221;
    }
}