/* CSS for support landing page * -------------------------------*/ /* Fix SVG in tags not scaling in IE9, IE10, IE11 * * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files * * [1] IE9 * [2] IE10+ */ /* 1 */ .ie9 img[src$=".svg"] { width: 100%; } /* 2 */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { img[src$=".svg"] { width: 100%; } } /* level 1 * ----------*/ .full-width-bg { padding: 75px 5%; background: url(../images/technical-support-documentation-817722418.jpg) no-repeat; background-position: center 35%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .full-width-bg .max-width-1440 h1 { color: #003f6d; max-width: 70%; } /* Level 2 ---------------*/ #burgerIconLink, #burgerIconAlloc8Link { width: 50px; height: 50px; } .burger-ctn, .burger-ctn-alloc8 { border: 1px solid #aaa; } .burger-ctn-alloc8 { margin-top: 3rem; } .burger-ctn h3, .burger-ctn-alloc8 h3 { margin: 11px 20px; cursor: pointer; } /* hamburger animation ---------------------------------------------*/ #bugerIcon, #bugerIconAlloc8 { position: absolute; right: 45px; top: 14px; cursor: pointer; margin: 9px 6px 0 0; } #bugerIcon span, #bugerIcon span:before, #bugerIcon span:after, #bugerIconAlloc8 span, #bugerIconAlloc8 span:before, #bugerIconAlloc8 span:after { cursor: pointer; border-radius: 1px; height: 5px; width: 35px; background: #353d4a; /* sets color of hamburger */ position: absolute; display: block; content: ''; } #bugerIcon span:before, #bugerIconAlloc8 span:before { top: -10px; } #bugerIcon span:after, #bugerIconAlloc8 span:after { bottom: -10px; } #bugerIcon span, #bugerIcon span:before, #bugerIcon span:after, #bugerIconAlloc8 span, #bugerIconAlloc8 span:before, #bugerIconAlloc8 span:after { transition: all 500ms ease-in-out; } #bugerIcon.go span, #bugerIconAlloc8.go span { background-color: transparent; } #bugerIcon.go span:before, #bugerIcon.go span:after, #bugerIconAlloc8.go span:before, #bugerIconAlloc8.go span:after { top: 0; } #bugerIcon.go span:before, #bugerIconAlloc8.go span:before { transform: rotate(45deg); } #bugerIcon.go span:after, #bugerIconAlloc8.go span:after { transform: rotate(-45deg); } /* Expanding containers * ---------------------------*/ #agDocs, #alloc8Docs { border-bottom: 1px solid #aaa; border-left: 1px solid #aaa; border-right: 1px solid #aaa; overflow: hidden; } #alloc8DocsLegacy, #alloc8DocsLatest, #alloc8DocsHowTo, #agDocsVideoUX, #agDocsVideoPortal, #agDocsVideoAuth, #agDocsVideoAdmin, #agDocsVideo, #agDocsLatestLegacy, #agDocsLatestEg6000, #agDocsLatestEg3000, #agDocsLatestAg5900, #agDocsLatestAg5800, #agDocsLatestAg5600, #agDocsLatestAg2500, #agDocsLatestAg2400, #agDocsLatestAg2300, #agDocsLatestNWCG, #agDocsLatest, #agDocsSplash, #agDocsRadius, #agDocsDHCP, #agDocsBilling, #agDocsHowTo, #agDocsAdmin { overflow: hidden; } #alloc8DocsLegacyTrigger #alloc8DocsLatestTrigger, #alloc8DocsHowToTrigger, #agDocsVideoUXTrigger, #agDocsVideoPortalTrigger, #agDocsVideoAuthTrigger, #agDocsVideoAdminTrigger, #agDocsVideoTrigger, #agDocsLatestLegacyTrigger, #agDocsLatestEg6000Trigger, #agDocsLatestEg3000Trigger, #agDocsLatestAg5900Trigger, #agDocsLatestAg5800Trigger, #agDocsLatestAg5600Trigger, #agDocsLatestAg2500Trigger, #agDocsLatestAg2400Trigger, #agDocsLatestAg2300Trigger, #agDocsLatestNWCGTrigger, #agDocsLatestTrigger, #agDocsSplashTrigger, #agDocsRadiusTrigger, #agDocsDHCPTrigger, #agDocsBillingTrigger, #agDocsHowToTrigger, #agDocsAdminTrigger { display: inline-block; } #alloc8DocsLegacyTrigger:hover, #alloc8DocsLatestTrigger:hover, #alloc8DocsHowToTrigger:hover, #agDocsVideoUXTrigger:hover, #agDocsVideoPortalTrigger:hover #agDocsVideoAuthTrigger:hover, #agDocsVideoAdminTrigger:hover, #agDocsVideoTrigger:hover, #agDocsLatestLegacyTrigger:hover, #agDocsLatestEg6000Trigger:hover, #agDocsLatestEg3000Trigger:hover, #agDocsLatestAg5900Trigger:hover, #agDocsLatestAg5800Trigger:hover, #agDocsLatestAg5600Trigger:hover, #agDocsLatestAg2500Trigger:hover, #agDocsLatestAg2400Trigger:hover, #agDocsLatestAg2300Trigger:hover, #agDocsLatestNWCGTrigger:hover, #agDocsLatestTrigger:hover, #agDocsSplashTrigger:hover, #agDocsRadiusTrigger:hover, #agDocsDHCPTrigger:hover, #agDocsBillingTrigger:hover, #agDocsHowToTrigger:hover, #agDocsAdminTrigger:hover { color: #53b044; } #alloc8DocsLegacy .doc-columns-3:last-child, #alloc8DocsLatest .doc-columns-3:last-child, #alloc8DocsHowTo .doc-columns-3:last-child, #agDocsVideoUX .doc-columns-3:last-child, #agDocsVideoPortal .doc-columns-3:last-child, #agDocsVideoAuth .doc-columns-3:last-child, #agDocsVideoAdmin .doc-columns-3:last-child, #agDocsLatestEg6000 .doc-columns-3:last-child, #agDocsLatestEg3000 .doc-columns-3:last-child, #agDocsLatestAg5900 .doc-columns-3:last-child, #agDocsLatestAg5800 .doc-columns-3:last-child, #agDocsLatestAg5600 .doc-columns-3:last-child, #agDocsLatestAg2500 .doc-columns-3:last-child, #agDocsLatestAg2400 .doc-columns-3:last-child, #agDocsLatestAg2300 .doc-columns-3:last-child, #agDocsLatestNWCG .doc-columns-3:last-child, #agDocsSplash .doc-columns-3:last-child, #agDocsRadius .doc-columns-3:last-child, #agDocsDHCP .doc-columns-3:last-child, #agDocsBilling .doc-columns-3:last-child, #agDocsHowTo .doc-columns-3:last-child, #agDocsAdmin .doc-columns-3:last-child { padding-right: 0; } /* classes */ .plus-sign::before { content: '+'; padding-right: 0.4rem; color: #53b044; font-size: 1.5rem; position: relative; top: 0.1rem; } .minus-sign::before { content: '-'; padding-right: 0.4rem; color: #53b044; font-size: 1.5rem; position: relative; top: 0.1rem; } .max-height-0 { max-height: 0; } .max-height-10k { max-height: 10000px; } .padding-wrapper { padding: 0.5rem 0 0.5rem 1rem; } .padding-wrapper-extra { padding: 0.1rem 0 0.1rem 0.75rem; } .icon-pdf-howtoguide { background: url(../images/icon-pdf-howtoguide.svg) top left / 20px 20px no-repeat; min-height: 25px; display: inline-block; padding-left: 1.5rem; } .icon-pdf-datasheet { background: url(../images/icon-pdf-datasheet.svg) top left / 20px 20px no-repeat; min-height: 25px; display: inline-block; padding-left: 1.5rem; } .icon-pdf-readme { background: url(../images/icon-pdf-readme.svg) top left / 20px 20px no-repeat; min-height: 25px; display: inline-block; padding-left: 1.5rem; } .icon-pdf-pressrelease { background: url(../images/icon-pdf-pressrelease.svg) top left / 20px 20px no-repeat; min-height: 25px; display: inline-block; padding-left: 1.5rem; } .icon-pdf-quickstart { background: url(../images/icon-pdf-quickstart.svg) top left / 20px 20px no-repeat; min-height: 25px; display: inline-block; padding-left: 1.5rem; } .icon-pdf-usersguide { background: url(../images/icon-pdf-usersguide.svg) top left / 20px 20px no-repeat; min-height: 25px; display: inline-block; padding-left: 1.5rem; } .pdf-link { background: url(../images/icon-pdf.svg) top left / 20px 20px no-repeat; min-height: 25px; display: inline-block; padding-left: 1.5rem; } .zip-link { background: url(../images/icon-zip.svg) top left / 20px 20px no-repeat; min-height: 25px; display: inline-block; padding-left: 1.5rem; } .vimeo-link { background: url(../images/icon-vimeo.svg) top left / 20px 20px no-repeat; min-height: 25px; display: inline-block; padding-left: 1.5rem; } .youtube-link { background: url(../images/icon-youtube.svg) top left / 20px 20px no-repeat; min-height: 25px; display: inline-block; padding-left: 1.5rem; } /* 3 column setup*/ .doc-columns-3 { float: left; width: 32%; padding-right: 1%; } @media screen and (max-width: 768px) { .full-width-bg { padding: 55px 5%; } /* Decrease size of bugerIcon*/ #bugerIconAlloc8 span, #bugerIconAlloc8 span:before, #bugerIconAlloc8 span:after, #bugerIcon span, #bugerIcon span:before, #bugerIcon span:after { height: 4px; width: 30px; } /* Adjust margins to reposition */ #bugerIconAlloc8, #bugerIcon { margin: 6px 0 0 0; } /* 2 columns wide, stack other column underneath */ .doc-columns-3 { width: 48%; } } @media screen and (max-width: 640px) { .full-width-bg .max-width-1440 h1 { margin-bottom: 0 !important; } /* Stack 3 column to make one column */ .doc-columns-3 { width: 100%; float: none; } }