/* Styles used to define the site Skeleton */
/* The Inspiraweb responsive grid system is based upon a 12 column grid with a viewport breakpoint of 768px.
Other viewport options may be implemented using alternative css. */

/* Responsive styles for viewport (screens) that are at least 768px use "@media only screen and (min-width: 768px)" 
Note the keyword "only" used here to hide style sheets from older browsers and "screen" means we will apply css styles to a device with a screen.*/

/* For viewport narrower than 768px use "@media only screen and (max-width: 767px)", 

/* Tips: use percentage (%) value to make the containers fluid. */

/* NOTES:- !important

1) !important indicates that 'this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!'
2) A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.

*/

html, body{
    height: 100%;
    min-height: 100%;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #404040;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding: 0px;
}

/* NOTE: images and css gradient and images may be used for the body background*/
body {
    background: #ffffff;
}

/* Sets below base font size when viewing in less that 767px */
@media only screen and (max-width: 767px) {
    html, body{
        font-size: 14px; 
        background-color: #647e20;
    }
}


/* START general styles */

/* START CSS Device Adaptation */
/* Used in support of <meta name="viewport" */
/* Certain classes of browser attempt to display desktop pages on a small 
screen by automatically zooming the display. This can be problematic for 
applications that have already been optimized for a small screen. 
The viewport meta tag tells the device at what scale to render the page.
CSS Device Adaptation provides a way for an author to specify, in CSS, the size, 
zoom factor, and orientation of the viewport that is used as the base for 
the initial containing block. */

@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}

@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

/* END CSS Device Adaptation */


/* Note that hidden using "display: none; the element will not be displayed and the page will be output as if the element is not there (has no effect on layout) 
    whereas using the alternative " visibility: hidden;" hides an element, but it still gets downloaded and  takes up space in the UI*/

/* SiteWrite/magicaddons goes one step further and implements JavaScript for viewportWidth */

@media only screen and (min-width: 768px) {
    .hideLarge{
        display: none !important; 
    }
}

@media only screen and (max-width: 767px) {
    .hideSmall{
        display: none !important; 
    }
}

/* Used to inset a <br> tag when viewing in less that 767px */
@media screen and (min-width: 768px){
    .remove_br { display: none; }
}



.hide {
    display: none; 
}

.floatLeft {
    float: left !important; 
}

.floatRight {
    float: right !important; 
}

.clearBoth { 
    clear: both; 
}

.clearRight { 
    clear: right; 
}

.clearLeft { 
    clear: left; 
}

.poRelative{
    position: relative;
}

/* Fixes an element to the bottom of its parent div */
.poFixedtobottom{
    position: absolute; 
    bottom: 0;
}

/* Fixes a <div> to the top of the page */
#sticktoTop {
    position: fixed;
    top: 0;
    width: 100%;
}

/* Fixes a <div> to the bottom of the page */
#sticktoBottom {
    position: fixed;
    top: 0;
    width: 100%;
}

.textalignRight {
    text-align: right !important; }

.textalignCenter {
    text-align: center !important; }

.textJustify {
    text-align: justify !important; }




/* Use to horizontally centre images and other block elements */
.center{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.noborder{
    border: 0px;
}  

.imageresize{
    width: auto !important; 
    width: 100%;
    max-width: 100%;
    max-height: 100%;
}

imageresizeBordernull{
    width: auto !important; 
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    border: 0px;
}

.textCenter{
    text-align:center;
}

em, i {
    font-style: italic;
    line-height: inherit; }

strong, b {
    font-weight: bold;
    line-height: inherit; }

/* END general styles */

@media only screen and (min-width: 768px) {
    #pagewrapper {
        position: relative;
        width:  100%;
        margin-right: auto;
        margin-left: auto;
        padding-bottom: 10px;
    }
}

@media only screen and (max-width: 767px) {
    #pagewrapper {
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }
}

/* START accessibility Links */
#accessabilityWrapper{
    width: 100%;
    max-width: 1000px;
    height: 20px;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}

#accessibilitytext{
    float: right;
    padding-right: 10px;
    color: #ffffff;
}

a.accessibilityTop:link, a.accessibilityTop:visited, a.accessibilityTop:active, a.accessibilityTop:hover{
    font-size: x-small;
    color: #ffffff;
    background-color: transparent;
}


/* END accessibility Links */

@media only screen and (min-width: 768px) {
    #UIwrapper{
        width:  100%;
        max-width: 1000px;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 25px;
        border-top: 2px solid #36406f; /* Required to align with contentWrapper */
        border-right: 2px solid #36406f; /* Required to align with contentWrapper */
        border-bottom: 2px solid #36406f; /* Required to align with contentWrapper */
        border-left: 2px solid #36406f; /* Required to align with contentWrapper */
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;	
        -webkit-box-shadow: 10px 10px 15px 5px rgba(54,64,111,0.74);
        -moz-box-shadow: 10px 10px 15px 5px rgba(54,64,111,0.74);
        box-shadow: 10px 10px 15px 5px rgba(54,64,111,0.74);
    }
}

/* START Header wrapper (brochure page) Div style*/
@media only screen and (min-width: 768px) {
    #headerWrapper{
        width:  100%;
        max-width: 1000px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 4px;
        border: 2px solid #3c4f0e;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        -moz-background-clip: padding; /* padding clip control how far a background image or color extends beyond an element's padding or content. */
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        background-color: #647e20;
        box-shadow:
            inset 0 2px 2px rgba(255,255,255,0.67),
            inset 0 -1px 0 rgba(0,0,0,0.14),
            0 1px 0 rgba(0,0,0,0.25);
        background-image: -moz-linear-gradient(90deg, #3c4f0e 0%, #647e20 100%);
        background-image: -o-linear-gradient(90deg, #3c4f0e 0%, #647e20 100%);
        background-image: -webkit-linear-gradient(90deg, #3c4f0e 0%, #647e20 100%);
        background-image: linear-gradient(90deg, #3c4f0e 0%, #647e20 100%);
    }

}

@media only screen and (max-width: 767px) {
    #headerWrapper{
        position: relative;
        width: 100%;	
        height: 105px;
        margin-left: auto;
        margin-right: auto;
        background-color: #647e20;
        border: 1px solid #647e20; /* Required to align with contentWrapper */
    }
}

/* END Header wrapper (brochure page) Div style*/

/* START Content wrapper (brochure page) Div style*/

@media only screen and (min-width: 768px) {

    #contentWrapper{
        width:  100%;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        border: 0px solid #36406f; /* Required to align with contentWrapper */

    }
}

@media only screen and (max-width: 767px) {
    #contentWrapper{
        width: 99%;	
        margin-left: auto;
        margin-right: auto;
        border: 0px solid #a1a1a1;        
    }
}

/* START Navigation wrapper Div style */

#navWrapper{
    z-index: 100;
    display: inline-block;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    #navWrapper{
        background: transparent;
    }
}

.navBG{
    background: #b50101;
}

#navBGWrapper{
    position: relative;
    padding-top: 2px;
    padding-right: 0px;
    padding-bottom:2px;
    padding-left: 0px;
}

/* START Nav background max-width: 767px Div style */

@media only screen and (max-width: 767px) {

    .navBG{
        background: #ffffff;
    }
}
/* END Nav background max-width: 767px Div style */

/* END Navigation wrapper Div style */

/* START Left Column */
/* NOTE column height is determined by the content and the background shown is that of the div #contentWrapper*/
@media only screen and (min-width: 768px) {
    #leftColumn{
        padding-left:10px;
        padding-right: 10px;
    }
}

@media only screen and (min-width: 768px) {
    #leftColumn{
        padding-left:10px;
        padding-right: 10px;
    }
}

/* END Left Column */

@media only screen and (min-width: 768px) {
    #maincontentWrapper{
        width: 100%;	
    }
}

@media only screen and (max-width: 767px) {
    #maincontentWrapper{
        width: 100%;	
        margin-left: auto;
        margin-right: auto;
    }
}

/* START Right Column */
/* NOTE column height is determined by the content and the background shown is that of the div #contentWrapper*/
@media only screen and (min-width: 768px) {
    #rightColumn{
        padding-left:10px;
        padding-right: 10px;
    }
}

@media only screen and (min-width: 768px) {
    #rightColumn{
        padding-left:10px;
        padding-right: 10px;
    }
}

/* END Right Column */


/* START Footer div */
@media only screen and (min-width: 768px) {
    #footerWrapper {
        width:  100%;
        max-width: 1000px;
        margin-right: auto;
        margin-left: auto;
        border: 2px solid #3c4f0e;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        -moz-background-clip: padding; /* padding clip control how far a background image or color extends beyond an element's padding or content. */
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        background-color: #647e20;
        box-shadow:
            inset 0 2px -2px rgba(255,255,255,0.67),
            inset 0 0 -1px rgba(0,0,0,0.14), /* inset changes the shadow from an outer shadow to an inner shadow*/
            0 0 1px rgba(0,0,0,0.25);  /* h-shadow v-shadow blur spread color */


        background-image: -moz-linear-gradient(90deg, #3c4f0e 0%, #647e20 100%);
        background-image: -o-linear-gradient(90deg, #3c4f0e 0%, #647e20 100%);
        background-image: -webkit-linear-gradient(90deg, #3c4f0e 0%, #647e20 100%);
        background-image: linear-gradient(90deg, #3c4f0e 0%, #647e20 100%);

    }

    #footerWrapperplus {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box; /* The width and height properties (and min/max properties) includes content, padding and border, but not the margin */
        border: 1px solid #a1a1a1; /* Required to align with contentWrapper */
    }

    #footerText{
        text-align: center;
    }
}


@media only screen and (max-width: 767px) {
    #footerWrapper {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #a1a1a1; /* Required to align with contentWrapper */
        background-color: #647e20;
    }

    #footerText{
        text-align: center;
    }
}

/* END Footer div */

/* DH IMPORTANT! The following are required for responsive design */

/*  SECTIONS  */
/*  COLUMN SETUP  */

.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

.columns {
    position: relative;
    padding-left: 0.9375em;
    padding-right: 0.9375em;
    float: left; }

.columns:first-child { 
    margin-left: 0; 
}

.columnsCentered {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    float: none !important; } 

.columns:last-child-justify{ 
    float: right; 
}

.columns:last-child { 
    float: left; 
}


/*  GROUPING  */
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}

.span_1_of_1 {
    width: 100%;
}

/* START Responsive grid column styles for screens that are at least 768px; Note the keyword "only" used here to hide style sheets from older browsers from seeing style sheet and "screen" means we will apply css styles to a device with a screen.*/
@media only screen and (min-width: 768px) {
    .large1 {
        position: relative;
        width: 8.33333%; }

    .large2 {
        position: relative;
        width: 16.66667%; }

    .large3 {
        position: relative;
        width: 25%; }

    .large4 {
        position: relative;
        width: 33.33333%; }

    .large5 {
        position: relative;
        width: 41.66667%; }

    .large6 {
        position: relative;
        width: 50%; }

    .large7 {
        position: relative;
        width: 58.33333%; }

    .large8 {
        position: relative;
        width: 66.66667%; }

    .large9 {
        position: relative;
        width: 75%; }

    .large10 {
        position: relative;
        width: 83.33333%; }

    .large11 {
        position: relative;
        width: 91.66667%; }

    .large12 {
        position: relative;
        width: 100%; }

    /* START Large Indent styles used to position the first column in a section with the column being indented from the left and therefore only has 11 column options */
    .largeIndent1 {
        margin-left:  8.33333%; }

    .largeIndent2 {
        margin-left:  16.66667%; }

    .largeIndent3 {
        margin-left:  25%; }

    .largeIndent4 {
        margin-left:  33.33333%; }

    .largeIndent5 {
        margin-left:  41.66667%; }

    .largeIndent6 {
        margin-left:  50%; }

    .largeIndent7 {
        margin-left:  58.33333%; }

    .largeIndent8 {
        margin-left:  66.66667%; }

    .largeIndent9 {
        margin-left:  75%; }

    .largeIndent10 {
        margin-left:  83.33333%; }

    .largeIndent11 {
        margin-left:  91.66667%; }

}

/* END Large Indent styles */

/*  GO FULL WIDTH AT LESS THAN 768 PIXELS */
/* For viewport narrower than 768px, the following rules will apply: Note the keyword "only" used here to hide style sheets from older browsers from seeing style sheet and "screen" means we will apply css styles to a device with a screen.*/
/* Tips: use percentage (%) value to make the containers fluid. */

@media only screen and (max-width: 767px) {

    .small1 {
        position: relative;
        width: 8.33333%; }

    .small2 {
        position: relative;
        width: 16.66667%; }

    .small3 {
        position: relative;
        width: 25%; }

    .small4 {
        position: relative;
        width: 33.33333%; }

    .small5 {
        position: relative;
        width: 41.66667%; }

    .small6 {
        position: relative;
        width: 50%; }

    .small7 {
        position: relative;
        width: 58.33333%; }

    .small8 {
        position: relative;
        width: 66.66667%; }

    .small9 {
        position: relative;
        width: 75%; }

    .small10 {
        position: relative;
        width: 83.33333%; }

    .small11 {
        position: relative;
        width: 91.66667%; }

    .small12 {
        position: relative;
        width: 100%; }

    /* START Small Indent styles used to position the first column in a section with the column being indented from the left and therefore only has 11 column options */
    .smallIndent1 {
        margin-left:  8.33333%; }

    .smallIndent2 {
        margin-left:  16.66667%; }

    .smallIndent3 {
        margin-left:  25%; }

    .smallIndent4 {
        margin-left:  33.33333%; }

    .smallIndent5 {
        margin-left:  41.66667%; }

    .smallIndent6 {
        margin-left:  50%; }

    .smallIndent7 {
        margin-left:  58.33333%; }

    .smallIndent8 {
        margin-left:  66.66667%; }

    .smallIndent9 {
        margin-left:  75%; }

    .smallIndent10 {
        margin-left:  83.33333%; }

    .smallIndent11 {
        margin-left:  91.66667%; }

}
/* END Small Indent styles */

/* START Form specific styles */

/* Responsive styles for screens that are atleast 768px; Note the keyword "only" used here to hide style sheets from older browsers from seeing style sheet and "screen" means we will apply css styles to a device with a screen.*/
/* NOTE: width has been reduced by 2% to account for padding: 5px; on elements, if aditional changes are made to form element css this may require changing */
@media only screen and (min-width: 768px) {
    .Formlarge1 {
        position: relative;
        width: 6.33333%; }

    .Formlarge2 {
        position: relative;
        width: 14.66667%; }

    .Formlarge3 {
        position: relative;
        width: 23%; }

    .Formlarge4 {
        position: relative;
        width: 31.33333%; }

    .Formlarge5 {
        position: relative;
        width: 39.66667%; }

    .Formlarge6 {
        position: relative;
        width: 48%; }

    .Formlarge7 {
        position: relative;
        width: 56.33333%; }

    .Formlarge8 {
        position: relative;
        width: 64.66667%; }

    .Formlarge9 {
        position: relative;
        width: 73%; }

    .Formlarge10 {
        position: relative;
        width: 81.33333%; }

    .Formlarge11 {
        position: relative;
        width: 89.66667%; }

    .Formlarge12 {
        position: relative;
        width: 96%; }

}

/*  GO FULL WIDTH AT LESS THAN 768 PIXELS */
/* For viewport narrower than 768px, the following rules will apply: Note the keyword "only" used here to hide style sheets from older browsers from seeing style sheet and "screen" means we will apply css styles to a device with a screen.*/
/* NOTE: width has been reduced by 2% to account for padding: 5px; on elements, if aditional changes are made to form element css this may require changing */


@media only screen and (max-width: 767px) {

    .Formsmall1 {
        position: relative;
        width: 6.33333%; }

    .Formsmall2 {
        position: relative;
        width: 14.66667%; }

    .Formsmall3 {
        position: relative;
        width: 23%; }

    .Formsmall4 {
        position: relative;
        width: 31.33333%; }

    .Formsmall5 {
        position: relative;
        width: 39.66667%; }

    .Formsmall6 {
        position: relative;
        width: 48%; }

    .Formsmall7 {
        position: relative;
        width: 56.33333%; }

    .Formsmall8 {
        position: relative;
        width: 64.66667%; }

    .Formsmall9 {
        position: relative;
        width: 73%; }

    .Formsmall10 {
        position: relative;
        width: 81.33333%; }

    .Formsmall11 {
        position: relative;
        width: 89.66667%; }

    .Formsmall12 {
        position: relative;
        width: 96%; }
}

/* END Form specific styles */