/*Entire viewable page*/
body {
    margin: 0;
    font-size: 12px;
    min-width: 350px;
    /*font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;*/
    /*font-family: 'Roboto';*/
    /*font-family: 'Poppins';*/
    font-family: Calibri, "Helvetica Neue";
}

/*H2 headers, rid of browser defaults*/
h2 {
    margin: 0px;
    padding: 0px;
}

h3 {
    margin: 0px;
    padding: 0px;
}

/*P, rid of browser defaults*/
p {
    margin: 0px;
}

/*fieldset, rid of browser defaults*/
fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    display: inline-block;
}

/*Wrapper for body of all pages*/
#mainContent {
    width: 100%;
    display: block;
    position: relative;
    /*TODO: Default background color*/
    background: url('../Images/bk.png');
    padding-top: 150px;
    padding-bottom: 120px;
    top: 75px;
}

#mainContent > div.wrapper {
    max-width: 2000px;
    margin: 0 auto;
}

/*Content boxes located on pages*/
.contentBox {
    display: block;
    text-align: center;
    margin-left: 5%;
    margin-right: 5%;
	width: auto;
    background-color: rgba(255, 255, 255, 1);
    /*border-style: solid;
    border-color: #03582D;
    border-width: 3px 0px;*/
    padding: 20px;
}

/*Defaults for text on content areas of pages*/
.textContainer {
    color: black;
    /*font-family: Georgia, 'Times New Roman', Times, serif;*/

}

.textContainer.addMargin {
    margin-left: 20%;
    margin-right: 20%;
}

/*Defaults for buttons/links in text container*/
.buttonContainer a {
    width: 100px;
    font-size: 1.2em;
}

/*Defaults for H2 text in content areas of pages*/
.contentBox h2 {
   color: #03582d; 
   /*font-family: 'Poppins';*/
   font-size: 2.2em;
   padding-top: 10px;
   padding-bottom: 10px;
}

/*Defaults for H3 text in content areas of pages*/
.contentBox h3 {
   color: #03582d; 
   /*font-family: Calibri, Arial, Helvetica, sans-serif;*/
   font-size: 1.8em;
   padding-top: 10px;
   padding-bottom: 10px;
}

/*Defaults for H4 text in content areas of pages*/
.contentBox h4 {
   color: #03582d; 
   /*font-family: Calibri, Arial, Helvetica, sans-serif;*/
   font-size: 1.5em;
   padding-top: 0px;
   padding-bottom: 0px;
   margin: 0px;
}

/*Defaults for H5 text in content areas of pages*/
.contentBox h5 {
   color: #03582d; 
   /*font-family: Calibri, Arial, Helvetica, sans-serif;*/
   font-size: 1.2em;
   padding-top: 0px;
   padding-bottom: 0px;
}

.contentBox h2:first-child {
   padding-top: 0px;
}

.contentBox h2:last-child {
   padding-bottom: 0px;
}

/*Defaults for horizontal lines in content boxes*/
.contentBox hr {
    width: 60%;
}

/*Defaults for individual paragraphs in content areas of pages*/
.contentBox p {
    line-height: 1.5;
    text-align: left;
    /*text-indent: 50px;*/
    /*padding-top: 10px;*/
    padding-bottom: 10px;
    font-size: 1.2em;
}


.contentBox p:first-child {
    padding-top: 0px;
}

.contentBox p:last-child {
    padding-bottom: 0px;
}

/*All content areas (text, images) on pages*/
.contentBox,
.contentBox:only-child {
    /*margin-bottom: 20px;
    margin-top: 20px;*/
}

.contentBox:first-child {
    margin-top: 0px;
}

.contentBox:last-child {
    margin-bottom: 0px;
}

/*Content box image container*/
.contentBox .imageContainer,
.contentBox .imageContainer:only-child {
    padding-bottom: 20px;
    padding-top: 20px;
}

.contentBox .imageContainer:first-child {
    padding-top: 0px;
}

.contentBox .imageContainer:last-child {
    padding-bottom: 0px;
}

/*Images inside image container*/
.contentBox .imageContainer > img {
    display: inline-block;
    margin: 5px;
    border: 1px solid #000000;
}

/*Common attribute applied to elements*/
.center {
    text-align: center !important;
}

.hidden {
    display: none !important;
}

.left {
    text-align: left !important;
}

.right {
    text-align: right !important;
}

.floatRight {
    float: right !important;
}

.floatLeft {
    float: left !important;
}

.middle {
    vertical-align: middle !important;
}

.table {
    display: table;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
}

.highlight {
    background-color: #86C18D;
}

.bold {
    font-weight: bold;
}

.bolder {
    font-weight: bolder;
}

.white {
    color: #FFFFFF;
}

.required {
    color: red;
}

.underline {
    text-decoration: underline;
}

/*Remove default styles from hyperlinks*/
a,
input[type="submit"],
input[type="reset"] {
    outline: 0;
    text-decoration: none;
}

/*Buttons used on content areas of pages*/
a.button,
input.button {
    color: #000000;
    background-color: #FFFFFF;
    padding: 5px 30px;
    border-style: solid;
    border-color: #03582D;
    border-width: 3px 0px;
    /*font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;*/
    -webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	transition: background-color 0.5s;
    margin-left: 15px;
    margin-right: 15px;
    display: inline-block;
    word-break: break-word;
}

a.button:hover,
a.button:focus,
input.button:hover,
input.button:focus {
    background-color: #86C18D;
}

a img {
    border:none;
    outline:none;
}

/*When window is just small enough to cause the Merchandise page to have one column of items, but text is still right of items*/
@media screen and (min-width: 1545px) {
    /*Rid of individual cell HR lines when larger*/
    .contentBox hr.hrCell {
        display: none !important;
    }
    /*Show row HR lines when larger*/
    .contentBox hr.hrRow {
        display: block !important;
    }
}

/*When window is just small enough to cause the Merchandise page to have one column of items AND text under the items*/
@media screen and (max-width: 631px) {
    /*Rid of extra description spacing*/
    .merchandiseText > span.description {
        height: auto !important;
    }
}

/*What to do when screen width has been reduced below a certain width (for mobile or small screens)*/
@media screen and (max-width: 900px) {
    body {
        font-size: 12px;
    }
    
    #page {
        overflow: hidden;
    }
    
    .rslides_nav > img {
        max-width: 30px;
    }
    
    .rslides li img {
        width: 700px !important;
    }
    
    /*Make content boxes take up most of the width of the screen*/
    .contentBox {
        margin-left: 5% !important;
        margin-right: 5% !important;
    }
    
    /*Make slides take up most of the width of the screen*/
    #slides {
        /*width: 90% !important*/
    }

    /*Remove old navigation bar at top*/
    .menuItems > li:first-child,
    .menuItems > li:last-child {
        display: none !important;
    }
    
    .menuItems > .menuItem {
        display: none !important;
    }

    /*Add mobile navigation bar at tp*/
    .mobileMenu {
        display: block !important;;
    }

    /*Make padding less on slides captions*/
    .caption {
        padding: 2px !important;
    }

    /*Increase width of contact form*/
    #contactForm {
        width: 90% !important;
    }

    .contactContainer {
        max-width: none !important;
    }

    .contactContainer,
    contactTextContainer {
        width: 100% !important;
    }

    /*Increase width of catering/events form*/
    #cateringForm,
    #eventsForm {
        width: 90% !important;
    }

    .cateringContainer,
    .eventsContainer {
        max-width: none !important;
        width: 100% !important;
    }

    .cateringTextContainer {
        width: 100% !important;
    }

    /*Increase image widths in content area of pages*/
    .imageContainer > img {
        max-width: 80% !important;
        min-width: 30% !important;
    }
    
    .textContainer.addMargin {
        margin-left: 0%;
        margin-right: 0%;
    }

    /*Merchandise to stack on top of each other*/
    /*.merchandiseContainer {
        width: 100% !important;
    }*/
}