/* css Paymetric layout style v1.1 */
/* css released under ZETTAcreative License - http://www.zettacreative.com  */
/* the layout stylesheet is being used to setup the layout for the entire page using a standard 3 column layout. */

/* zczczczczczczczczczc  page layout elements */
html {
            position: relative;
            min-height: 100%;
        }
body {font: 12px Arial, Helvetica, sans-serif; margin: 0; padding: 0; margin-bottom: 135px !important;}


        #Site-Header .top-menu {
            background-color: #000;
            width: 100%;
            height: 10px;
        }

        .logo-menu,
        .logo-menu .logo,
        .logo-menu .menu
        .logo-menu .info {
            height: 80px;
        }

        .logo-menu {
            display: inline-block;
            background-color: #FFF;
            width: 100%;
        }
        .logo-menu img
        {
            margin:0 10px;
        }

            .logo-menu .logo,
            .logo-menu .menu,
            .logo-menu .info {
                display: table-cell;
            }

            .logo-menu .logo {
                width: 300px;
                vertical-align: middle;
            }

            .logo-menu .menu {
                width: 100%;
            }
             .logo-menu .info
             {
                 width: auto;
                 padding:5px 10px 0 0;
                 vertical-align: top;
                 font-weight: bold;
                 font-size: 14px;
                 text-align: right;
             }

        .site-search {
            width: 100%;
            clear: both;
            background-color: #003F72;
            height: 30px;
            border-bottom: solid 1px #003F72;
            border-top: solid 1px #003F72;
             color:#ffffff;
        }

        .xiid-select {
            float: left;
            margin-left: 10px;
            padding-top: 2px;
        }

        .environment-lbl
        {
            margin: 0 auto; 
            width: 250px;
        }
        .adv-select {
            float: right;
            width: auto;
            height: 30px;
            margin: 0;
            padding: 4px 5px 0 5px;
            color:#ffffff;
        }

        .site-search a{
            color:#ffffff;
            font-size: 12px;
        }
         .site-search a:hover{
            text-decoration: underline;
             color:#ffffff;
        }
            .adv-select .ControlsRight {
                float: right;
                margin-right: 5px;
            }
            .adv-serach-link
            {
                padding-top: 5px;
            }

        #Site-Footer {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 135px;
            width: 100%;
            background-color: #FFF;
        }

        .top-footer {
            width: 100%;
            height: 50px;
            background-color: #003F72;
        }
            .top-footer div {
                display: table-cell;
                height: 50px;
                width: 9%;
                vertical-align: middle;
                text-align: center;
            }

        .content-footer {
            width: 100%;
            height: 30px;
            background-color: #000;
            color: #FFF;
            font-size: 11px;
        }

            .content-footer a {
                color: #ffffff;
            }

            .content-footer .container {
                margin: auto;
                width: 600px;
            }

                .content-footer .container div {
                    display: table-cell;
                    vertical-align: middle;
                    height: 30px;
                    text-align: center;
                    padding: 0 10px;
                }

        .certification .container {
            margin: auto;
            width: 400px;
        }

            .certification .container div {
                vertical-align: middle;
                height: 55px;
                text-align: center;
                padding: 0 10px;
            }

#header {margin:0; padding:0;}

#main1 {margin: 0; padding: 5px 0 0 0;margin-left: 10px;}

#main2 {margin: 0; padding: 0;}

#left {float: left;	width: 15px; margin: 0; padding: 0;}

#right {float: right; width: 15px; margin: 0; padding: 0;}

/* zczczczczczczczczczc  if the sizes of either the #left or the #right change (currently set at 15px), then the #middle margin must change accordingly.  shorthand is being used to designate this as follows: margin: [top/bottom] [right/left];.  it could also be written out this way: margin: 0 15px 0 15px;  the order of the values is the same for both padding & margin -  margin: top right bottom left;  */
#middle {margin: 0;}

#footer {margin: 0; padding: 0;	height: 44px;}


/* zczczczczczczczczczc  the following elements are used to clear floats */
.cleaner {
	clear:both;
	height:1px;
	font-size:1px;
	border:none;
	margin:0; padding:0;
	background:transparent;
}

.clearBoth {
	clear:both;
	height: 0px;
	font-size: 0px;
	border:none;
	margin:0; 
	padding:0;
	background: transparent;
}


.alignL { text-align:left; }
.alignR { text-align:right; }
.alignM { text-align:center; }

.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../Images/modalbackground.png) repeat !important;
    z-index: 17000 !important;
}

/*-- @Media Layout --*/
@media screen and (max-width: 1200px) {
    .menu .dxmLite_pm, 
    .menu .dxmLite_pm .dxm-content a.dx,
    .environment-lbl {
        width: auto;
    }
    .menu .dxmLite_pm
    {
        height: 80px;
        overflow: hidden; 
    }
}
@media screen and (max-width: 1000px) {
    .environment-lbl {
        display: none;
    }
}
@media screen and (max-width: 830px) {
    .adv-select{
        display: none;
    }
}
@media screen and (max-width: 610px) {
    .dxmLite_pm,
    .content-footer,
    .logo-menu .info{
        display: none;
    }
}