/* 
    Document   : Store01
    Created on : Aug 23, 2017, 8:15:31 PM
    Author     : Chuck
    Description:
        Purpose of the stylesheet follows.

Revisions:
10/31/17    Made changes to fix HTML errors
09/06/21    Added imgCC
*/

/*
root { 
    display: block;
}
*/

body {
    margin: 0px;
    /*    overflow: hidden;
        position: relative;*/
    /* the above two lines do not work. the scroll bar is missing if used. 
        see body::after */
}


body:after {
    clear: both;
    content: "";
    display: table;
}


* {
    box-sizing: border-box;
}

h1 {
    font-size: 2em;
    -webkit-margin-before: 0.2em;
    -webkit-margin-after: 0.2em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}

table {
    border-collapse: collapse;
}

th, td{
    padding:3px;     
}

th {
    background-color:#F6F6F6;
}

[class*="col-"] {
    float: left;
    /*padding: 15px;*/
    padding: 7px;
}

[class*="navDivItemSpace-"] {
    float: left;
    padding: 15px;
}

.navDivItem {
    float: left;
    /*padding: 15px;*/
    padding: 7px; 
    /* border: solid;
    border-width: 1px; */
}


html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    /*
    background-color: #9933cc;
    color: #ffffff;
    */
    /*padding: 15px;*/
    display: block;
    width: 100%; 
    float: left;
    border: none;
    padding: 0;
    margin: 0;
}

.HeaderText {
    display: none;
}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color: #33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    /*
    background-color: #0099cc;
    color: #ffffff;
    */
    display: block;
    width: 100%; 
    float: left;
    border: none;
    margin: 0;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}

.FootTable{
    margin-left: auto;
    margin-right: auto;
    border: None;
}
.imgVacDoc {
    /*width: 105px;*/
    max-width: 105px;
    height: auto;
    border: 0;
    float: left;
}
.imgCC {
    /*max-width: 210px;*/
    max-width: 100%;
    height: auto;
    border: 0;
}



.imgCenter {
    display: block; 
    margin: auto;
    Border: none;
}
.container {
    display: block;
    width: 100%; 
    float: left;
    border: none;
    padding: 0;
    margin: 0;
}

.ContainerFormat {
    padding: 7px;
}
.colcontainer {
    display: table; /* Make the container element behave like a table */
    width: 100%; /* Set full-width to expand the whole page */
}

.col {
    display: table-cell; /* Make elements inside the container behave like table cells */
}

.wordwrap { 
    /*white-space: pre-wrap;      /* CSS3 */   
    white-space: -moz-pre-wrap; /* Firefox */    
    white-space: -pre-wrap;     /* Opera <7 */   
    white-space: -o-pre-wrap;   /* Opera 7 */    
    word-wrap: break-word;      /* IE */
}

.ItemDetailText {
    padding-left: 50px;
    text-indent: -50px;
}

.button {
    border-radius: 8px;
    background-color: #ffcc66;
}

p {
    margin-top: 7px;
    margin-bottom: 7px;

}

.MobileOnlyOff {
    float: left;
    padding: 7px;
}


[class*="cola-"] {
    float: left;
    /*padding: 15px;
    padding: 7px;*/
}

.cola-1 {width: 8.33%;}
.cola-2 {width: 16.66%;}
.cola-3 {width: 25%;}
.cola-4 {width: 33.33%;}
.cola-5 {width: 41.66%;}
.cola-6 {width: 50%;}
.cola-7 {width: 58.33%;}
.cola-8 {width: 66.66%;}
.cola-9 {width: 75%;}
.cola-10 {width: 83.33%;}
.cola-11 {width: 91.66%;}
.cola-12 {width: 100%;}

.DivPaddingLeft {
    padding: 0px;
}

/******************************************************************************/

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

[class*="navDiv"] {
    width: 50%;
}

[class*="navDivItemSpace-"] {
    display: none;
}

.navDivItemSpace-1 {
    width: 25%;
    display: block;
}

.HMenuHeader {
    display: none;
}

.MobileOnlyOff {
    display: none;    
}

.HMenuFooter {
    display: block;
}

[class*="HMenu"] {
    background-color: #ffcc66;
}

.LeftBorder {
    border-left: none;
}

.imgBanner {
    /*max-width: 210px;*/
    max-width: 50%;
}


/******************************************************************************/
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}

    .navDivItem {width: 25%;}

    .navDivItemSpace-1 {
        width: 37.5%;
        display: block;
    }
    .navDivItemSpace-2 {
        width: 25%;
        display: block;
    }
    .navDivItemSpace-3 {
        width: 12.5%;
        display: block;
    }

    .MobileOnlyOff {
        display: block;    
    }

    .HMenuHeader {
        display: none;
    }

    .HMenuFooter {
        display: block;
    }

    .LeftBorder {
        border-left: solid;
        border-width: 1px;
    }

}


/******************************************************************************/
@media only screen and (min-width: 768px), print {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

    /*.navDivItem {width: 16.66%;} */
    .navDivItem {width: 20%;}

    .navDivItemSpace-1 {
        width: 41.66%;
        display: block;
    }
    .navDivItemSpace-2 {
        width: 33.33%;
        display: block;
    }
    .navDivItemSpace-3 {
        width: 25%;
        display: block;
    }
    .navDivItemSpace-4 {
        width: 16.66%;
        display: block;
    }
    .navDivItemSpace-5 {
        width: 8.33%;
        display: block;
    }

    .imgVacDoc {
        /*max-width: 210px;*/
        max-width: 100%;
    }

    .HeaderText {
        display: block;
    }

    .MobileOnlyOff {
        display: block;    
    }

    .HMenuHeader {
        display: block;
    }

    .HMenuFooter {
        display: none;
    }

    .DivPaddingLeft {
        padding-left: 12px;
    }
}

@media only screen and (max-width: 768px), print {
    .imgBanner {
        /*max-width: 210px;*/
        max-width: 100%;
    }
}