﻿
body, html {
    width: 100%;
    height: 100%;
}

#wrapper {
    width: 100%;
    height: 100%;
    -moz-min-width: 300px;
    -ms-min-width: 300px;
    -o-min-width: 300px;
    -webkit-min-width: 300px;
    min-width: 300px;
    max-width: 2000px;
    margin: 0 auto;
}

#content_2tile_bottom2 {
    padding: 10px;
    background-color: #346f9c;
    height: inherit;
    width: auto;
    overflow: auto;
}


#header {
    float: left;
    height: 77px;
    width: auto;
}

#contentliquid {
    float: left;
    width: 100%;
    max-width: 100%;
    height: 100%;
}

#content {
    width: auto;
    overflow: auto;
    height: 100%;
    /*margin-left: 4px;*/
}


#tdcontent {
    height: 100%;
    width: 100%;
}

#tdheader {
    height: 100px;
    width: auto;
}

#tdheader2 {
    height: auto;
    width: auto;
}

body {
    margin: 0;
}


#transp {
    background: #000000;
    -ms-opacity: 0.5;
    opacity: 0.5;
    height: 100%;
    width: 100%;
    z-index: 3;
}

#ui-datepicker-div {
    z-index: 999 !important;
}

@media only screen and (max-device-width: 1099px) {

    .pushmenu {
        position: fixed;
        width: 226px;
        height: 100%;
        top: 0;
        z-index: 1000;
    }


    .pushmenu-left {
        left: -226px;
    }

        .pushmenu-left.pushmenu-open {
            left: 0px;
        }

    .pushmenu-push {
        overflow-x: hidden;
        position: relative;
        left: 0;
    }

    .pushmenu-push-toright {
        left: 226px;
    }

    /*Transition*/
    .pushmenu, .pushmenu-push {
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .contentMenu {
        margin-left: 4px;
    }
}

@media only screen and (min-device-width: 1100px ) {


    .pushmenu {
        position: fixed;
        width: 226px;
        height: 100%;
        top: 0;
        z-index: 1000;
    }

    .pushmenu-left {
        left: 0px;
    }

        .pushmenu-left.pushmenu-open {
            left: -226px;
        }

    .pushmenu-push {
        overflow-x: hidden;
        position: relative;
        left: 0;
    }

    .pushmenu-push-toright {
        left: 0px;
    }

    /*Transition*/
    .pushmenu, .pushmenu-push {
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .contentMenu {
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .contentMenu {
        margin-left: 230px;
    }

    .contentMenu-open {
        margin-left: 40px;
    }
}

#hometiles {
    max-width: 1200px;
}

/* Following section defines shrinking of home page content and header content*/
@media only screen and (min-device-width : 340px) and (max-device-width : 480px) {


    #hometiles {
        -webkit-transform: scale(0.82);
        -moz-transform: scale(0.82);
        -ms-transform: scale(0.82);
        -o-transform: scale(0.82);
        transform: scale(0.82);
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -o-transform-origin: left top;
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }

    #tdheader {
        -moz-transform: scale(0.82);
        -ms-transform: scale(0.82);
        -o-transform: scale(0.82);
        -webkit-transform: scale(0.82);
        transform: scale(0.82);
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -o-transform-origin: left top;
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }
}


@media only screen and (min-device-width : 280px) and (max-device-width : 340px) {


    #hometiles {
        -webkit-transform: scale(0.72);
        -moz-transform: scale(0.72);
        -ms-transform: scale(0.72);
        -o-transform: scale(0.72);
        transform: scale(0.72);
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -o-transform-origin: left top;
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }

    #tdheader {
        -webkit-transform: scale(0.72);
        -moz-transform: scale(0.72);
        -ms-transform: scale(0.72);
        -o-transform: scale(0.72);
        transform: scale(0.72);
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -o-transform-origin: left top;
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }
}

/*responsivegridsystem.com*/
/*  GRID OF TWO   ============================================================================= */


.span_2_of_2 {
    width: 100%;
}

.span_1_of_2 {
    width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_2_of_2 {
        width: 100%;
    }

    .span_1_of_2 {
        width: 100%;
    }
}


/*  SECTIONS  ============================================================================= */

.rspsection {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  GROUPING  ============================================================================= */


.rspgroup:before,
.rspgroup:after {
    content: "";
    display: table;
}

.rspgroup:after {
    clear: both;
}

.rspgroup {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}

    .col:first-child {
        margin-left: 0;
    }
/* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col {
        margin: 1% 0 1% 0%;
    }
}

/*  GRID OF FOUR   ============================================================================= */


.span_4_of_4 {
    width: 100%;
}

.span_3_of_4 {
    width: 74.6%;
}

.span_2_of_4 {
    width: 49.2%;
}

.span_1_of_4 {
    width: 23.8%;
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_4_of_4 {
        width: 100%;
    }

    .span_3_of_4 {
        width: 100%;
    }

    .span_2_of_4 {
        width: 100%;
    }

    .span_1_of_4 {
        width: 100%;
    }
}
