/* Mobile styling of dxmail.co.nz */
html, body {min-width: 0 !important; width: 100% !important; height: 100% !important; margin: 0px !important; padding: 0px !important; /*overflow-x: hidden;*/ -webkit-text-size-adjust: 100%; /*font-family: 'Signika Negative', Arial, Helvetica, sans-serif;*/ -webkit-font-feature-settings: "lnum"; -moz-font-feature-settings: "lnum"; font-feature-settings: "lnum"; }
body.mobile h1 {font-size:32px !important; line-height:32px !important; -webkit-text-size-adjust: 100%; padding:10px 0 !important; margin: 0 0 0 0;}
body.mobile h2 {font-size:26px !important; line-height:26px !important; -webkit-text-size-adjust: 100%; margin-top:10px;}
body.mobile h3 {font-size:20px !important; line-height:24px !important; -webkit-text-size-adjust: 100%;}
body.mobile h5 { -webkit-text-size-adjust: 100%;}
body.mobile {background:#f1f1f1 !important; font-size:15px !important; line-height:22px !important;}
body.mobile #contentwrapper { box-sizing: border-box !important; -webkit-box-sizing: border-box !important; background:#ffffff; width:100% !important; padding-right:15px !important; padding-left:15px !important; margin-right: auto; margin-left: auto; min-width: 100% !important; }
body.mobile #headerwrapper {
width:100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#285e98+25,1e4065+100 */
background: rgb(40,94,152); /* Old browsers */
background: -moz-linear-gradient(left, rgba(40,94,152,1) 25%, rgba(30,64,101,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(40,94,152,1) 25%,rgba(30,64,101,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(40,94,152,1) 25%,rgba(30,64,101,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#285e98', endColorstr='#1e4065',GradientType=1 ); /* IE6-9 */
color: white;
margin-bottom:0;
height:auto;}
body.mobile #header {width:100% !important; height:88px !important; top:0;}
body.mobile #header_logo {top:0;}
body.mobile #header_logo a {
padding:26px 0 0 15px !important;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e4065+0,285e98+100 */
background: rgb(30,64,101); /* Old browsers */
background: -moz-linear-gradient(left, rgba(30,64,101,1) 0%, rgba(40,94,152,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(30,64,101,1) 0%,rgba(40,94,152,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(30,64,101,1) 0%,rgba(40,94,152,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e4065', endColorstr='#285e98',GradientType=1 ); /* IE6-9 */
height:62px !important;
position:relative;}
body.mobile #header_logo a:after {
content:'';
position:absolute;
top:0;
left:155px;
width:0;
height:0;
border:44px solid transparent;
border-left:44px solid #285E98;
}
body.mobile #breadcrumb {margin:0 0 5px 0;}
body.mobile #page_header_image, body.mobile #menu_container, body.mobile #logo-angle, body.mobile #slide_indicator, body.mobile #page_headerwrapper, body.mobile #menu_background, body.mobile #footer_menu_container, body.mobile #footer_legal, body.mobile .footer_spacer, body.mobile #legend, body.mobile #alphabet_chooser {display:none !important;}
body.mobile #sidebar {display:none;}
body.mobile #content-fix {width:100% !important; float:none !important; padding:20px 0 40px 0;}
body.mobile #footerwrapper {width: 100% !important;}
body.mobile #footer {width: 100% !important; height: auto !important; padding:30px 0 0; border:none; margin-top:0; font-family: 'Raleway', sans-serif;}
body.mobile #footer_copyright {float:left; font-weight: 400; font-size: 14px; padding-left:15px; padding-bottom:40px !important; line-height: 22px; color:#263f8e;}
body.mobile #footer_copyright a {display:block; color:#263f8e;}
body.mobile #footer_links {width:auto; float:right; padding:0 15px 30px 0; margin-top:-10px;}
body.mobile .wrapper_grey {padding:0;}
body.mobile #view-desktop {display: block !important; margin-top: 10px; float:left; color: #263f8e; font-size: 15px; font-weight:600;}
body.mobile .mobile-column-fix {width:100% !important; float:none; margin:0 !important;}
body.mobile .mobile-column-fix img {margin: 0 0 20px 0 !important; width:100% !important; max-width:250px !important; height:auto !important;}
body.mobile .mobile-column-fix ul {width:100% !important; float:none; margin-left:0 !important;}
body.mobile .mobile-padding-fix ul {margin-bottom: 0 !important;}
body.mobile ul.bullet_list {margin-left:0 !important;}
body.mobile .featured_product {background:#f1f1f1 !important;}
body.mobile .featured_product p {width:100% !important;}
body.mobile .wrapper_white, body.mobile #headerwrapper, body.mobile #contentwrapper, body.mobile #menu_background {min-width: 100% !important;}
/* Mobile styling of forms*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
/*body.mobile input[type='checkbox'], body.mobile input[type='radio'] { -webkit-appearance: none; border-radius: 0;}*/
body.mobile input[type='checkbox']:checked, body.mobile input[type='radio']:checked {background:#1eb4da;}
}
body.mobile select, body.mobile input, body.mobile textarea {font-size:14px; line-height:22px; font-family: 'Raleway', sans-serif;}
/* Mobile styling of TT*/
body.tt.mobile .form_wrapper {margin:0 0 20px 0 !important; padding:15px 15px 10px 15px;}
body.tt.mobile .form_wrapper p {margin-bottom:10px !important; font-size:14px; line-height:22px;}
body.mobile img.sample {display:none;}
body.mobile input.track, body.mobile .tt_button_focus {float:none; width:100%; padding:10px; background: #29609A !important; font-size:15px; -webkit-appearance: none; -webkit-border-radius:0; border-radius:0;}
body.mobile input.track:hover, body.mobile input.track:active, body.mobile .tt_button_focus:hover, body.mobile .tt_button_focus:active {background: #245386 !important; }
body.mobile .tt_button_grey {float:none; width:100%; padding:10px; font-size:15px; -webkit-appearance: none; -webkit-border-radius:0; border-radius:0;}
body.mobile .tt_button_focus {margin-bottom:15px;}
body.mobile form table {background:none;}
body.mobile form table td.goleft, body.mobile form table th.goleft {float:left; width:100% !important; text-align:left; border-bottom: none !important; box-sizing:border-box; padding:10px 0 0 0;}
body.mobile td.last, body.mobile th.last {padding-bottom:10px !important;}
body.mobile td.goleft input[type="text"], body.mobile td.goleft input[type="email"], body.mobile td.goleft select, body.mobile td.goleft textarea, body.mobile th.goleft input[type="text"], body.mobile th.goleft select, body.mobile th.goleft textarea {margin-top:-5px; box-sizing:border-box; width:100%; padding:6px; -webkit-appearance: none; -webkit-border-radius:0; border-radius:0; font-size:14px;}
body.mobile td.goleft input[type="text"], body.mobile td.goleft input[type="email"], body.mobile td.goleft textarea, body.mobile th.goleft input[type="text"], body.mobile th.goleft textarea {margin-top:-5px; box-sizing:border-box; width:100%; padding:8px; background:#e7e7e7; border:#cccccc 1px solid;}
body.mobile td.goleft, body.mobile th.goleft label {font-size:14px; line-height:22px;}
/* Mobile styling of Mailbox Locator*/
body.mobile #dx_local {margin:0 0 20px 0 !important; padding:15px 15px 20px 15px;}
body.mobile #dx_local_go {margin-top:10px; float:none; width:100%; padding:10px; background: #29609A !important; font-size:15px; -webkit-appearance: none; -webkit-border-radius:0; border-radius:0;}
body.mobile #dx_local_go:hover {background: #245386 !important; }
body.mobile .field_container {background:none !important; padding:0 !important; margin:0 !important; }
body.mobile .field_container label, body.mobile .field_container select {float:left; width:100% !important; text-align:left; border-bottom: none !important; box-sizing:border-box; padding:10px 0 0 0;}
body.mobile .field_container select {box-sizing:border-box; width:100%; padding:6px; -webkit-appearance: none; -webkit-border-radius:0; border-radius:0; font-size:14px; background:#e7e7e7; border:#cccccc 1px solid !important;}
body.mobile .field_container label {font-size:14px; line-height:22px; height: inherit !important; width:100%; padding-bottom:5px;}
body.mobile .box_locations_table {margin:0 0 25px 0;}
/* Mobile styling of Postcode Locator*/
body.mobile .xsl_postcode {margin:0 !important; height:auto !important;}
body.mobile .xsl_postcode a {margin:0 0 15px 0; height: auto !important; float:none; width:100%; padding:10px 0; background: #29609A !important; font-size:15px; -webkit-appearance: none; -webkit-border-radius:0; border-radius:0; display:block;}
body.mobile .xsl_postcode a:hover {background: #245386 !important; }
/* Mobile styling of Email Invoice Form*/
body.mobile .button {margin-top:10px; float:none; width:100%; padding:10px; background: #29609A !important; font-size:15px; -webkit-appearance: none; -webkit-border-radius:0; border-radius:0;}
body.mobile .button:hover {background: #245386 !important; }
body.mobile .form_wrapper {margin:0 0 20px 0 !important;}
/* General mobile styling*/
body.mobile .show_mobile {display:block !important;}
body.mobile .hide_mobile {display:none !important;}
body.mobile #content p, body.mobile #content li {font-size:14px; line-height:22px;}
body.mobile .links a {height:auto; padding: 8px 40px 8px 10px; line-height:20px;}
/* Table Styling */
.pricelist {width:100%;}
/** Internal menu hack? Just need then to add an on click event handler to div#navs_container to trigger the menu to pop out.**/
body.mobile div.snap-menu-button{position:absolute; display: block; width: 25px; height:24px; margin-top:33px !important; right:15px; background:url(/assets/mobile/img/icons/mobile_menu.png) no-repeat 0 0; background-size:25px 96px; cursor:pointer;
}
body.mobile div.snap-menu-button:hover {background: url(/assets/mobile/img/icons/mobile_menu.png) no-repeat 0 -24px; background-size:25px 96px;}
body.mobile div.menu-open {background: url(/assets/mobile/img/icons/mobile_menu.png) no-repeat 0 -72px !important; background-size:25px 96px !important;}
body.mobile div.menu-open:hover, body.internal.mobile div.menu-open:active {background: url(/assets/mobile/img/icons/mobile_menu.png) no-repeat 0 -48px !important; background-size:25px 96px !important;}
body.mobile.snapjs-right div#snapper-content {
overflow-y: hidden;
}
body.mobile div.snap-drawers {/*position: absolute; height:100%;*/}
body.mobile div.snap-drawer-right{ position: fixed; right:0; left:auto; width:300px; height:100%; overflow-y: scroll;}
body.mobile div#snapper-content {position: absolute; left:0; right:0; top:0; bottom:0; z-index: 1; overflow-x:hidden;-webkit-overflow-scrolling: touch;}
body.mobile div#right-nav-menu { background-color: #26598f; /*border-left:#4a4645 2px solid;*/}
body.mobile div#right-nav-menu #right-nav-menu-list {padding:0; margin:0; list-style:none;}
body.mobile div#right-nav-menu #right-nav-menu-list li {padding:0; margin:0;}
body.mobile div#right-nav-menu #right-nav-menu-list li:nth-of-type(1) {padding:10px 15px; font-size: 17px; line-height: 22px; color:white; font-weight:300;}
body.mobile div#right-nav-menu #right-nav-menu-list li a {text-decoration:none !important; margin:0; display:block; padding:10px 15px; font-size: 17px; line-height: 22px; color:white; font-weight:300; border-bottom:#1e4065 1px solid;}
body.mobile div#right-nav-menu #right-nav-menu-list li ul {list-style:none !important; margin:0 !important; padding:0 !important; display: none;}
body.mobile div#right-nav-menu #right-nav-menu-list li:hover ul {display:block;}
body.mobile div#right-nav-menu #right-nav-menu-list li ul li a {border-bottom:none; padding:5px 15px 5px 25px;}
body.mobile div#right-nav-menu #right-nav-menu-list li ul li:first-child a {padding:10px 15px 5px 25px;}
body.mobile div#right-nav-menu #right-nav-menu-list li ul li:last-child a {border-bottom:#1e4065 1px solid; padding:5px 15px 10px 25px;}
body.mobile div#right-nav-menu #right-nav-menu-list li a:hover, div#right-nav-menu #right-nav-menu-list li a:active {text-decoration:none !important; background:#1e4065 !important;}
body.mobile div#right-nav-menu #right-nav-menu-list li img.arrow {width:16px !important; margin-top:7px; position:inherit !important;}
body.mobile .pull-right {float: right !important;}
body.mobile .glyphicon {font-size:1.7em;}
body.mobile #header-navigation ul.navbar-nav>li>a{height:20px; width:25px; padding:0 20px 0 0; margin:15px 20px 0 0 !important; display:block;}
body.mobile #toggle-menu-button {background: url(/assets/mobile/img/icons/mobile_menu.png) no-repeat 0 0; background-size:25px 40px;}
body.mobile #toggle-menu-button:hover, #toggle-menu-button:active, #toggle-menu-button:visited {background: url(/assets/mobile/img/icons/mobile_menu.png) no-repeat 0 -20px; background-size:25px 40px;}
body.mobile .fullsite_headerlink {top:6px;}
body.mobile #header-navigation ul.nav>li {display:inline-block !important;}
body.mobile #header-navigation .navbar-header,
body.mobile #header-navigation .navbar-header > a.navbar-brand,
body.mobile #header-navigation .navbar-collapse,
body.mobile #header-navigation .navbar-collapse > ul{ height:100%;}
/* PARTNERS STYLING */
.partner {padding:0 !important;}
.op_logo_small {position:inherit !important; display:block; margin-bottom:10px;}
/* SERVICES STYLING */
body.mobile .services_postal a {background: #e7e7e7 url(../../images/services/postal.png) 15px -65px no-repeat; padding-left: 75px; background-size: 46px 115px; }
body.mobile .services_postal a:hover {background: #29609a url(../../images/services/postal.png) 15px 15px no-repeat; background-size: 46px 115px;}
body.mobile .services_boxtobox a {background: #e7e7e7 url(../../images/services/bottobox.png) 15px -65px no-repeat; padding-left: 75px; background-size: 45px 125px;}
body.mobile .services_boxtobox a:hover {background: #29609a url(../../images/services/bottobox.png) 15px 15px no-repeat; background-size: 45px 125px; }
body.mobile .services_facilities a {background: #e7e7e7 url(../../images/services/facilities.png) 15px -65px no-repeat; padding-left: 75px; background-size: 45px 125px;}
.services_facilities a:hover {background: #29609a url(../../images/services/facilities.png) 15px 15px no-repeat; background-size: 45px 125px;}
body.mobile .services_mailsmarts a {background: #e7e7e7 url(../../images/services/mailsmarts.png) 15px -65px no-repeat; padding-left: 75px; background-size: 45px 125px;}
body.mobile .services_mailsmarts a:hover {background: #29609a url(../../images/services/mailsmarts.png) 15px 15px no-repeat; background-size: 45px 125px; }
body.mobile .services_retail a {background: #e7e7e7 url(../../images/services/retail.png) 15px -65px no-repeat; padding-left: 75px; background-size: 45px 125px;}
body.mobile .services_retail a:hover {background: #29609a url(../../images/services/retail.png) 15px 15px no-repeat; background-size: 45px 125px; }
/* FAQ STYLING */
body.mobile .faq dt {padding:10px 15px !important;}
/* PRODUCT STYLING */
body.mobile .product img.thumb {
float:none;
display:block;
margin:0 0 20px 0;
}
body.mobile .product table {
width:100%;
}
body.mobile #product-order-form table {
width:100%;
}
body.mobile .product_image {
float: none;
}
body.mobile .accordion p {
padding: 0 0 1em 0 !important;
}
.product_image a img {
margin-bottom:10px;
}
/* Mobile styling of DX Directory*/
body.mobile .directory {margin:20px 0 20px 0 !important; padding:15px 15px 20px 15px;}
body.mobile .directory h3 {margin: 0 !important;}
body.mobile #dx_directory_go {margin-top:15px; float:none; width:100%; padding:10px; background: #29609A !important; font-size:15px; -webkit-appearance: none; -webkit-border-radius:0; border-radius:0;}
body.mobile #dx_directory_go:hover {background: #245386 !important; }
body.mobile #reset {margin-top:10px; float:none; width:100%; padding:10px; background: #444444 !important; font-size:15px; -webkit-appearance: none; -webkit-border-radius:0; border-radius:0;}
body.mobile #reset:hover {background: #333333 !important; }
body.mobile .directory input[type="text"] {
box-sizing: border-box;
width: 100%;
padding: 8px;
background: #e7e7e7;
border: #cccccc 1px solid;
min-width: 200px;
-webkit-appearance: none;
border-radius: 0;
margin-top:0;
}
body.mobile .dir_search {width:100% !important;}
body.mobile #office-details th {line-height:inherit; height:auto; padding:10px 15px;}
@media(max-width:355px){
/** Snap menu **/
div.snap-drawer-right{ width:224px; height:100%;}
body.mobile #footer_copyright, body.mobile #footer_copyright a {max-width:200px;}
}
@media(max-width:498px){
body.mobile.wide #mobile_orientation_screen {display:block !important; height: 100%; width:100%; background:#29609a; z-index:1000000; position:absolute;}
body.mobile.wide #mobile_orientation_screen span {display:block; text-align:center; font-size:16px; font-weight:600; color:#ffffff; position:absolute; top:50%; bottom:50%; left:50%; right:50%; width:140px; height:120px; margin-top:-60px; margin-left:-70px;}
body.mobile.wide #mobile_orientation_screen span img {display:block; margin:0 auto 10px auto;}
}