.offCanvasNav { display: none; }

.tableWrap { overflow: auto; }

@media screen and (max-width: 58.75em) { /* 940px */

#wrapper, #container { min-width: 300px; }

/*#contentMain { width: 100%; }
#contentSub { float: none; }
.side-main-sub #contentMain, .side-main-sub #contentSub { width: 100%; }*/
}


@media screen and (max-width: 48em) { /* 768px */
/* ==|== layouts ========== */

body { margin-left: 0;
-webkit-transition: 0.15s ease;
   -moz-transition: 0.15s ease;
     -o-transition: 0.15s ease;
        transition: 0.15s ease;  
}
body.offCanvas.active { margin-left: 13.725em; overflow-x: hidden; }

#header { position: relative; min-height: 109px; }
.offCanvas #header h1 { margin-left: 50px; }

/* #breadcrumb { border-top: 1px solid #032853; } */

#content { border-top: 0; }
.side-main #content { margin-left: 0; }
.fixed #content, .capped #content, .fixed .side-main #content, .capped .side-main #content,
.offCanvas .fixed .side-main #content, .offCanvas .capped .side-main #content { border-width: 0 0 1px 0; margin-left: 0; }
#sidebar .navTitle { display: none; }
#sidebar, .side-main #sidebar, .side-main-sub #sidebar { float: none; width: 100%; background: #fff; }

/* --|-- global nav tabs ---------- */
#navMain ul, .js #navMain ul { height: auto; }
#navMain ul { padding: 0; }
#navMain ul > li { float: none; margin: 0; max-width: none; background-image: none; }
#navMain li.current { border-radius: 0; }
#navMain ul a { background-image: none; text-overflow: none; text-shadow: none; white-space: normal; }
#navMain ul a:hover { background-image: none; }

/* --|-- global nav tabs off canvas ---------- */
.offCanvas #navMain { position: fixed; top: 0; bottom: 0; width: 13.725em; left: -13.725em; height: 100%; background-color: #033374; 
-webkit-transition: 0.15s ease;
   -moz-transition: 0.15s ease;
     -o-transition: 0.15s ease;
        transition: 0.15s ease;
}
.offCanvas.active #navMain { left: 0; }

.offCanvas #navMain ul, .js .offCanvas #navMain ul { height: auto; }
.offCanvas #navMain ul { padding: 0; }
.offCanvas #navMain ul > li { background-color: transparent; background-image: none; border: 0; border-bottom: 1px solid #1c5598; border-top: 0; float: none; margin: 0; max-width: none; }
.offCanvas #navMain ul > li:last-child { border-bottom-color: transparent; }
.offCanvas #navMain li.current { background-color: #03244e; border: 0; border-radius: 0; text-shadow: none; box-shadow: none; border-color: #021b36; }
.offCanvas #navMain ul a { background-color: transparent; background-image: none; color: #fff; min-height: 40px; height: auto; line-height: 40px; text-overflow: none; text-shadow: none; white-space: normal; }
.offCanvas #navMain ul a:hover { background-color: #1c5598; }
.offCanvas #navMain ul .current a { color: #fff; min-height: 40px; height: auto; line-height: 40px; text-shadow: none; }

#sidebar ul.navSide, #sidebar ul.navSide > li { background: transparent; border: none; padding: 0; }
#sidebar ul.navSide > li { float: left; position: relative; }
#sidebar ul.navSide > li > a { border-radius: 5px; display: block; line-height: 27px; margin-right: 2px; padding: 0 10px; }
#sidebar ul.navSide > li > a:hover { text-decoration: none; background-color: #eee; }
#sidebar ul.navSide li.current a, #sidebar ul.navSide .current > a, #sidebar ul.navSide .current > a:hover { background-color: #67813B; color: #fff; cursor: default; }

.offCanvasNav { display: none; }
.offCanvas .offCanvasNav { display: block;  width: 18px; height: 13px; background: url(../img/interface/menu.png) no-repeat center center; background-size: 18px 13px; text-indent: -9999px; padding: 15px 13px; position: absolute; left: 5px; top: 11px; }

.fixed .side-main #sidebar .inner, .fixed .side-main-sub #sidebar .inner { padding: 0 10px; }

.side-main-sub #content, .fixed .side-main-sub #content, .capped .side-main-sub #content { margin-left: 0; }

.side-main-sub #contentMain, .main-sub #contentMain, .side-main-sub #contentSub, .main-sub #contentSub { width: 100%; float: none; }

/* --|-- side nav lists' header ---------- */
h3.navTitle { padding: 10px; }
	
fieldset legend { padding-left: 0; *padding: 0 0 5px 0px; }

label, .formLabel { float: none; width: 100%; text-align: left; }
.input { margin-left: 0; }
.actions { padding: 0; }


/* ==|== footer ========== */

#footer p.left, #footer p.right { width: auto; float: none!important; clear: both; text-align: left; }

#container { padding-bottom: 0; border-bottom: 0; border-top: 1px solid #d0d0d0; }

#content { /* border-top: 1px solid #d0d0d0; */ padding: 20px 0; }


/* --|-- modal ---------- */

.modal { width: 95%; top: 2.5%!important; margin-top: 0!important; }
.modalBody { max-height: none; }


/* --|-- retractable menu ---------- */

#hideMenu a { background-position: -32px 18px; }
#hideMenu a.closed { background-position: -48px 18px; }


/* --|-- secondary nav ---------- */

.recess { border-top: 0; }
#container .recess { border-bottom: 1px solid #d0d0d0; }
.recess .tabs { clear: both; }


}

@media screen and (max-width: 30em) { /* 480px */

body { line-height: 1.4; background-position: 0 11px; }
body, p, pre { font-size: 14px; }
body.hasTopNav { background-position: 0 45px; }
#header { padding-top: 30px; background-image: none; background-color: #002d74; }

#header h1 { width: 100%; margin: 20px auto; padding: 0 30px; text-align: center; }
.offCanvas #header h1 { margin-left: auto; }

#navActions { position: absolute; top: 0; left: 0; right: 0; margin: 0; min-height: 30px; padding: 0; text-align: center; background-color: #001d5a; }
#navActions li { display: block; }
#navActions li:first-child { padding: 5px; }
#navActions a.button.download { display: block; }
#navActions a[title="Help"] { position: absolute; right: 10px; top: 64px; }
#navActions a.button:hover { background-position: 0 0; background-color: #67813b; color: #fff; }

.offCanvas .offCanvasNav { top: 55px; }

/* --|-- breadcrumb ---------- */
#breadcrumb ol { margin: 0; padding: 0; }
#breadcrumb ol li, #breadcrumb p, #breadcrumb span { display: block; }

#breadcrumb ol li { float: none; padding-right: 10px; padding-left: 10px; overflow: hidden; background: transparent; border-top: 1px solid #e0e0e0; }
#breadcrumb ol li:first-child { border-top-color: transparent; padding-left: 10px; }
#breadcrumb ol li.dropdown:hover, #breadcrumb ol li.current.dropdown { background: url(../img/interface/crumb_arrow_dropdown.png) transparent no-repeat 98% 50%; }
#breadcrumb li:first-child a { float: none; text-indent: 0; overflow: hidden; background: transparent; width: auto; }
#breadcrumb li:first-child a:hover { background-position: 0 -27px; }
#breadcrumb ol li a { color: #444; display: block; }
#breadcrumb ol li a:active, #breadcrumb ol li a:focus, #breadcrumb ol li a:hover { color: /*#00438a;*/ #111; }

/* --|-- dropdown level ---------- */
#breadcrumb ul { max-width: none; min-width: 300px; margin: 0; padding: 0; right: 0; }
#breadcrumb ul li { padding: 10px; }


/* --|-- building blocks ---------- */
.row { margin-left: 0; }
.row .span1, .row .span2, .row .span3, .row .spanQuarter, .row .span4, .row .spanThird, .row .span5, .row .span6, .row .spanHalf,
.row .span7, .row .span8, .row .spanTwoThirds, .row .span9, .row .spanThreeQuarters, .row .span10, .row .span11, .row .span12, .row .spanFull { width: 100%; padding-left: 0; }

ul.wizard li { display: block; }

/* ==|== tabs ========== */

.tabs { border-color: #ddd; border-style: solid; border-width: 0 0 1px; list-style: none; margin: 0 0 1em; padding: 0; }
.lt-ie8 .tabs { clear: both; overflow: auto; width: 100%; }
.tabs > li { float: none; white-space: nowrap; }
.tabs > li > a { margin-right: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
.tabs > li > a:hover { text-decoration: none; background-color: #eee; border-color: #eee #eee #ddd; }
.tabs .current > a, .tabs .current > a:hover { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

.recess .tabs { padding: 10px; }
.recess.grey .tabs .current > a, .recess.grey .tabs .current > a:hover, .recess.gray .tabs .current > a, .recess.gray .tabs .current > a:hover { border-color: #d0d0d0; }

}

@media screen and (max-width: 20em) { /* 320px */

input, textarea, select, .uneditable-input, .input strong, input.readonly, input[type="button"], input[type="reset"], input[type="submit"], label, .formLabel { width: 100%; }
label, .formLabel { float: none; text-align: left; }
.actions { padding-left: 0; }

}

@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 30em) { #header h1 { margin-top: 50px!important; } }