
img {
    max-width: 100%;
    height: auto;
} 

* {
    box-sizing: border-box;
}

@media only screen and (min-width: 601px) {
    div#page {
        width: 1012px;
    }

    div#horizNav {
        margin-: 0;
        padding: 0 0 0 21px;
        position:relative;
        font-size: 18px;/*EDIT for style*/
        font-weight: normal;/*EDIT for style*/
        color: #fef6bb;/*EDIT for style*/
        background:url(../images/nav_bg.jpg) 0 0 no-repeat transparent;/*EDIT for style*/
        height:44px;
    }

    div#logo {/*usually we put the logo image directly into the div and give it a link to Home*/
        position: absolute;
        top: 10px; /*EDIT for style:logo div position */
        left: 300px; /*EDIT for style:logo div position */
        padding: 0; 
        margin: 0; 
        width:400px; /*EDIT for style:logo image size */    
        height:200px; /*EDIT for style:logo image size */
        background: transparent; 
    }

    div#banner {
        position: relative;
        margin: 0 0 0 0;
        padding: 9px 0 0 0;
        background: url(../images/banner.jpg) right 9px no-repeat #5b6332; /*EDIT for bg image name and left or right*/
        height: 315px; /*EDIT for style:match height of banner bg image: prefer 80-170px*/
        width: 100%;
    }

    /* content div ---------------*/
    div#content {
        background: transparent;/*EDIT for style*/
        margin: 0 0 0 60px; /* EDIT for style: left margin for left navigation width */
        padding: 10px 60px 30px 0; /* EDIT for style: right padding for content margin (and left, if we are using horiz nav */
        text-align: left;
        min-height: 700px; /* EDIT for style: keeps the content area taller than the left column on the shortest page */
        /*_height:850px; EDIT for style: IE6 only*/
    }
    /* content div ^  ---------------- */

    .floatedPhotoRight {
        float: right;
        margin: 10px 0 5px 15px;
    }

    .floatedPhotoLeft {
        float: left;
        margin: 10px 15px 5px 0;
    }

    .floatedPhotoRight p, .floatedPhotoLeft p, div.photoContainer p {
        margin: 0;
        padding: 5px 1px 0 1px;
        font-size: 14px;/*EDIT for style*/
        line-height: 1.2em;
        text-align:left;
    }

    div#guidelines {
        width: 600px;
        border: 2px solid #838166;
        padding:40px 65px 30px 65px;
        margin: 35px auto 20px auto;
        clear:both;
        background: #f5e6cb;
    }

    div#contact1 {
        text-align:center;
        margin: 0 auto 0 auto;
        padding: 10px 0 0 0;/*EDIT for style*/
        width:1012px;
    }

    div#bottomContact {
        background: url(../images/bottom_bg.jpg) 0 0 no-repeat #393d21;/*EDIT for style*/
        padding: 0 0 0 0;/*EDIT for style*/
        margin:0;
        height: 122px;/*EDIT for style*/
    }

    div#contact1 p.contactLine {
        color: #fefcec;
        font-size:22px;
        padding-bottom:2px;
    }

}

@media only screen and (max-width: 600px) {
    div#page {
        margin:  0;
        width: 100%;
        background: url(../images/content_bg.jpg) center 0 repeat-y #fefcec;
    }

    div#logo {/*usually we put the logo image directly into the div and give it a link to Home*/
        padding: 0; 
        margin: 0; 
        background: transparent; 
    }

    div#banner {
        position: relative;
        margin: 0 0 0 0;
        padding: 9px 0 0 0;
        background: url(../images/banner.jpg) center 9px no-repeat #5b6332; /*EDIT for bg image name and left or right*/
        height: 120px; /*EDIT for style:match height of banner bg image: prefer 80-170px*/
        width: 100%;
        background-size: 100%;
    }

    /* content div ---------------*/
    div#content {
        background: transparent;/*EDIT for style*/
        margin: 0; /* EDIT for style: left margin for left navigation width */
        padding: 10px 20px 30px 20px; /* EDIT for style: right padding for content margin (and left, if we are using horiz nav */
        text-align: left;
        min-height: 700px; /* EDIT for style: keeps the content area taller than the left column on the shortest page */
        /*_height:850px; EDIT for style: IE6 only*/
    }
    /* content div ^  ---------------- */

    div#horizNav {
        margin-: 0;
        padding: 0;
        position:relative;
        font-size: 18px;/*EDIT for style*/
        font-weight: normal;/*EDIT for style*/
        color: #fef6bb;/*EDIT for style*/
    }

    .floatedPhotoRight {
        margin: 15px auto;
        text-align: center;
    }

    .floatedPhotoLeft {
        margin: 15px auto;
        text-align: center;
    }

    .floatedPhotoRight p, .floatedPhotoLeft p, div.photoContainer p {
        margin: 0;
        padding: 5px 1px 0 1px;
        font-size: 14px;/*EDIT for style*/
        line-height: 1.2em;
        text-align:center;
    }

    div#guidelines {
        width: 100%;
        border: 2px solid #838166;
        padding:10px;
        margin: 35px auto 20px auto;
        clear:both;
        background: #f5e6cb;
    }

    div#contact1 {
        text-align:center;
        margin: 0 auto 0 auto;
        padding: 10px 0 0 0;/*EDIT for style*/
        width:100%;
    }

    div#bottomContact {
        background-color: #000;
        padding: 50px 20px;/*EDIT for style*/
        margin:0 ;
    }

    div#contact1 p.contactLine {
        color: #fefcec;
        font-size:16px;
        padding-bottom:2px;
    }

    div#maximenuck109 .maximenumobiletogglericonck {
        background-color:  #c7d294; 
        height: 45px;
    }

    ul.maximenuck {
        background-color:  #c7d294 !important;
        padding-bottom: 50px; 
    }

    div#maximenuck109 ul.maximenuck li.maximenuck > a, div#maximenuck109 ul.maximenuck li.maximenuck > span {
        padding: 25px !important;
    }

}

