body,
html {
    font-family: 'source_sans_pro'; 
    color:#222;
    font-size:1em;
    font-size:1rem;
    margin:0;
   padding:0;
   height:100%;
    background-image: 
radial-gradient(circle at 100% 150%, #D1E3ED 24%, white 25%, white 28%, #D1E3ED 29%, #D1E3ED 36%, white 36%, white 40%, transparent 40%, transparent),
radial-gradient(circle at 0    150%, #D1E3ED 24%, white 25%, white 28%, #D1E3ED 29%, #D1E3ED 36%, white 36%, white 40%, transparent 40%, transparent),
radial-gradient(circle at 50%  100%, white 10%, #D1E3ED 11%, #D1E3ED 23%, white 24%, white 30%, #D1E3ED 31%, #D1E3ED 43%, white 44%, white 50%, #D1E3ED 51%, #D1E3ED 63%, white 64%, white 71%, transparent 71%, transparent),
radial-gradient(circle at 100% 50%, white 5%, #D1E3ED 6%, #D1E3ED 15%, white 16%, white 20%, #D1E3ED 21%, #D1E3ED 30%, white 31%, white 35%, #D1E3ED 36%, #D1E3ED 45%, white 46%, white 49%, transparent 50%, transparent),
radial-gradient(circle at 0    50%, white 5%, #D1E3ED 6%, #D1E3ED 15%, white 16%, white 20%, #D1E3ED 21%, #D1E3ED 30%, white 31%, white 35%, #D1E3ED 36%, #D1E3ED 45%, white 46%, white 49%, transparent 50%, transparent);
    background-size:60px 30px;
}


div {
    box-sizing: border-box;
}


h1 {
    font-size:2rem;
    margin:0;
    padding:.25em;
}
h2 {
    font-size:1.5rem;
}
h3 {
    font-size:1.17rem;
}
h4 {
    font-size:1rem;
}
h5 {
    font-size:.83rem;
}
h6 {
    font-size:.67rem;
}
a:link, a:active, a:visited {
    color:yellow;
    text-decoration-line:none;
    font-weight: bold;
    font-size:1em;
    font-size:1rem;
}
a:hover {
    color:#36410F;
    text-decoration:none;
    font-weight: bold;
    font-size:1em;
    font-size:1rem;
}
.outline a:link, .outline a:active, .outline a:visited {
    color:red;
    text-decoration: none;
    font-weight: bold;
    font-size:.9em;
    font-size:.9rem;
}
.outline a:hover {
    color:#36410F;
    text-decoration: underline;
    font-weight: bold;
    font-size:.9em;
    font-size:.9rem;
}
/************ box holding the content *********/
.container {
    position:relative;
    margin:0 auto;
    background-color: #0869BD;
    min-height:100%;
    max-width:960px;
    border-left:2px solid #D1E3ED;
    border-right:2px solid #D1E3ED;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/************ heading - logo, image ************/
.heading  {
    position:relative;
    margin:0 auto;
    color: #fff;
    background-color: #0869BD;
    border-bottom:2px solid #fff;
    height:auto;
    width:100%;
}


.logo-zh img {
    width:100%;
    height:100%;
}

.logo-wcs img {
    width:100%;
    height:100%;
}
/************* box containing content between header and footer *************/
.main {
    position:relative;
    width:100%;
    height:auto;
    overflow:auto;
    margin:0 auto;
    padding:0;
    background-color: #ACC94F;
    border-top:2px solid #fff;
   padding-bottom:150px;   /* Height of the footer */
   
}

/*********text beside map on home page ********/
#location-hours h4 {
    margin:20px 0 6px 6px;
    font-size: 1.2em;
    color: #fff;
    text-shadow: -1px -1px 0 #2487B7, 1px -1px 0 #000, -1px 1px 0 #12597C, 2px 2px 0 #000;
}
.outline {
     display:block;
     width:auto;
     height:auto;
     padding:4px;
     background-color:#fff;
    opacity: 0.6;
    filter: alpha(opacity=60);
    border-radius: .3em;
    margin-bottom:10px;
} 
.outline p {
    margin:0 0 4px 4px;
    color:navy;
    font-weight:normal;
    font-size:.95em;
    font-size:.95rem;
    text-shadow: -1px -1px 4px #fff
}
/**********contact form button on home page ***********/

.opencontactform {
    margin:10px 0 10px 10px;
    text-align: center;
    font-weight: bold;
    font-size:1em;
    font-size:1rem;
    background-color: #fff;
    width: auto;
    border: 2px solid #008ACC;
}


/*********map image - not embedded google map *************/
.mapdiv-ns img {
    width:100%;
    height:100%;
    border-radius:.5em;
}
/*********map image embedded google map *************/
.iframe-mainpage {
    width:100%;
    height:100%;
    min-width:250px;
    border:none;
    overflow:auto;
}
/************ slide css on home page****************/

#sliderb_container {
    float:left;
    width: 960px; 
    height: 480px; 
    overflow: hidden;
    box-sizing: border-box;
    margin:0;padding:0;
}
.slides {
    cursor: move; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 960px; 
    height: 480px;
    overflow: hidden;
    border-bottom:2px solid #fff;
}
.loadingslide {
    position: absolute;
    top: 0px;
    left: 0px;
}
.loadingslide2 {
    filter: alpha(opacity=70); 
    opacity:0.7; 
    position: absolute; 
    display: block;
    background-color: #0869BD; 
    top: 0px; 
    left: 0px;
    width: 100%;
    height:100%;
}
.loadingslide3 {
    position: absolute;
    display: block;
    background: url(../img/loading.gif) no-repeat center center;
    top: 0px; 
    left: 0px;
    width: 100%;
    height:100%;
}
/* hide navigation bar under slide show - shows when no js  home page***/
.mapbox {
    position:relative;
    top:-30px;
    left:0;
    width:100%;
    height:30px;
    overflow: auto;
    border-top:2px solid #fff;
    background-color: #ACC94F;


}
.hide {
    display:none;
}
/*************** contact form page*****************/
#titlebar {
  margin:0;
    border-bottom:2px solid #fff;
    background-color: #0869BD;
    height:auto;
    overflow:auto;
}
#titlebar  h4 {
  margin:10px;
    font-size: 1.2em;
    color: #fff;
    text-shadow: -1px -1px 0 #2487B7, 1px -1px 0 #000, -1px 1px 0 #12597C, 2px 2px 0 #000;
}
.filler {
    display:none;
}
.form-div .sectionContact {
  background-color: #BED576;
  padding:5px 0 4px 0;
    }
.form-div{
  display:block;
width:80%;
max-width:300px;
margin:0 auto;

}

.form-div input, .form-div textarea {
box-sizing: border-box;
  margin:0 auto;
  display: block;
  width:100%;
}
.form-div .submitbutton {
  width:50px;
  margin-top:4px;
  background-color:#fff;
  border:none;
  font-weight:bold;
  color:#4D6500;
  padding:2px;
  border:1px solid #7D952F;
  border-radius:3px;

}
.form-div label {
 text-align: center;
 /*border:1px solid green;*/
 line-height:1.5em;
 color: #fff;
 font-weight:bold;
 text-shadow: 1px 1px 1px #495A69;
}
.form-div #id02 {
  display: none;
}
.form-div .sectionContact {
  background-color: #BED576;
  padding:5px 0 4px 0;
    }
h4.emailresponse {
    font-size:1em;
    text-shadow:none;
    color:#42550A;
    text-align:center;
    padding-top:20px;
}
p.emailresponse-p {
    text-align:center;
    padding:10px;
}
#respond-confirm h4 {
    margin:0;
}
/************ footer ************/
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:150px;
    background-color: #0869BD;
    color:#fff;
    border-top:2px solid #fff;
}
.leftfooter {
    float:left;
    margin:5px;
}
.rightfooter {
    float:right;
    margin-right:5px;
}

.qr-saleflyer img {
    width:90%;
    height:90%;
}
.centrefooter {
    text-align:center;
    padding:6px 0;
}
.qr-saleflyer img {
    width:100%;
    height: 100%;
}

/* *****************start max 670px width **********************/
@media only screen and (min-width: 670px) { 
/***heading - home***/

.logo-zh {
    float:left;
    margin:10px 20px 5px 20px;
    width:120px;
    height:auto;
}
.logo-wcs {
    float:left;
    margin-top:30px;
    height:98px;
    width:361px;
}
/***location, hours boxes - home***/
#location-hours {
 margin:0 0 10px 10px;
float:left;
width:35%;
height:auto;
padding:0 20px;

}
/***contact form button - home***/
.form-contact {
    float:right;
    margin-top:20px;
    }
/*** embedded google map ***/
.mapdiv {
        float:right;
        width:60%;
        height:300px;
        overflow:hidden;
        clear:right;
        margin:12px 12px 12px 2px;
        border-radius: .5em;
 }
 /*** map image - for no js ***/
.mapdiv-ns {
        float:right;
        width:60%;
        height:auto;
        clear:right;
        margin:0 20px 12px 2px;
    }

.footer-text {
    margin:16px 0 0 20px;
    line-height: 2em;
    font-size:1em;
    font-size:1rem;
}
.qr-saleflyer {
    float:right;
    width:100px;
    height:100px;
    margin:10px;
}

}

/* ***************** 501px  to 670px width **********************/
@media only screen and (min-width:501px) and (max-width: 669px) { 
/***heading - home***/

.logo-zh {
    float:left;
    margin:10px 20px 5px 20px;
    width:110px;
    height:auto;
}
.logo-wcs {
    float:left;
    margin-top:30px;
    height:80px;
    width:295px;
}

/***location, hours boxes - home***/
#location-hours {
position:relative;
margin:0 auto;
width:70%;
height:auto;
padding:0 20px;
overflow:auto;
text-align:center;
}
 
/***contact form button - home***/
.form-contact {
    margin:0 auto;
    width:40%;
    }
/*** embedded google map ***/
.mapdiv {
        position:relative;
        margin:6px auto 10px;
        width:96%;
        height:300px;
        overflow:hidden;
        border-radius: .5em;
}
 /*** map image - for no js ***/
.mapdiv-ns {
        position:relative;
        margin:6px auto 10px;
        width:90%;
        height:auto;
        border-radius: .5em;
    }
.footer-text {
    margin:16px 0 0 20px;
    line-height: 2em;
    font-size:1em;
    font-size:1rem;
}
.qr-saleflyer {
    float:right;
    width:100px;
    height:100px;
    margin:10px;
}
}
/* ***************** 420px to 500 width **********************/
@media only screen and (min-width:420px) and (max-width: 500px) { 
/***heading - home***/

.logo-zh {
    float:left;
    margin:10px 5px 5px 5px;
    width:80px;
    height:auto;
}
.logo-wcs {
    float:left;
    margin-top:20px;
    height:80px;
    width:295px;
}

/***location, hours boxes - home***/
#location-hours {
position:relative;
margin:0 auto;
width:90%;
height:auto;
padding:0 20px;
overflow:auto;
text-align:center;
}
 
/***contact form button - home***/
.form-contact {
    margin:0 auto;
    }
/*** embedded google map ***/
.mapdiv {
        position:relative;
        margin:6px auto 10px;
        width:96%;
        height:300px;
        overflow:hidden;
        border-radius: .5em;
}
 /*** map image - for no js ***/
.mapdiv-ns {
        position:relative;
        margin:6px auto 10px;
        width:94%;
        height:auto;
}
.leftfooter {
    margin:0 auto;
    padding:4px;
    width:60%;
}
.footer-text {
    margin:8px 0 0 12px;
    font-size:.94em;
    font-size:.94rem;
    line-height: 1.5em;
}
#phone {
    font-weight: bold;
}

.qr-saleflyer {
    margin:10px 10px 0 0;
    width:80px;
    height:80px;
}
}
/* ***************** to 400 width **********************/
@media only screen and (max-width: 419px) { 
/***heading - home***/

.logo-zh {
    display: none;
}
.logo-wcs {
    position:relative;
    width:313px;
    height:80px;
    margin:4px auto 10px;

}
/***location, hours boxes - home***/
#location-hours {
position:relative;
margin:0 auto;
width:100%;
height:auto;
padding:0 20px;
overflow:auto;
text-align:center;
}


/***contact form button - home***/
.form-contact {
    margin:0 auto;
    }
/*** embedded google map ***/
.mapdiv {
        position:relative;
        margin:12px auto 10px;
        width:96%;
        height:300px;
        overflow:hidden;
        border-radius: .5em;
}
 /*** map image - for no js ***/
.mapdiv-ns {
        position:relative;
        margin:12px auto 10px;
        width:96%;
        height:auto;
}
.leftfooter {
    margin:0 auto;
    padding:4px;
    width:60%;
}
.footer-text {
    margin:4px 0 0 6px;
    font-size:.94em;
    font-size:.94rem;
    line-height: 1.6em;
}

.qr-saleflyer {
    margin:4px 12px 0 0;
    width:80px;
    height:80px;
}
}
/*******end of responsive design *********/
#phone {
    padding-left:4px;
    font-weight: bold;
    color:yellow;
}
#wcs {
   font-size:1.1rem;
   font-size:1.1em;
   font-style:italic;
   font-weight:bold;
   margin-bottom:6px;
}
#pearl {
position:absolute;
bottom:0;
right:10px;
margin:4px;
padding:0;
}
#email {
    padding-left:4px;
}
#pearl a:link, #pearl a:active, #pearl a:visited {
    font-size:.7em;
    text-decoration: none;
    font-style:italic;
    color:#47FFFB;
    font-weight: normal;
}
#pearl a:hover {
    font-size:.7em;
    text-decoration: underline;
    font-style:italic;
    color:#fff;
    font-weight: normal;
}