/* Table of Contents ================================================== #Aside #Media Queries */ /* #Aside ================================================== */ .aside-backdrop { background: rgba(71,74,84,1); bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 1040; } .aside-backdrop.fade { opacity: 0; } .aside-backdrop, .aside-backdrop.fade.in { opacity: 0.8; filter: alpha(opacity=80); } .aside { background-clip: padding-box; background: rgba(255,255,255,1); box-shadow: 0 0 3px rgba(0,0,0,0.25); height: 100%; left: initial; margin-left: 0; outline: none; position: fixed; right: 0; top: 0; width: 560px; z-index: 1050; } .aside-left { left: 0; right: initial; } .aside.fade { right: -100%; -webkit-transition: opacity 0.3s linear, right 0.3s ease-out; transition: opacity 0.3s linear, right 0.3s ease-out; top: 0; } .aside-left.fade { left: -100%; right: 0; -webkit-transition: opacity 0.3s linear, left 0.3s ease-out; transition: opacity 0.3s linear, left 0.3s ease-out; } .aside.fade.in { right: 0; top: 0; } .aside-left.fade.in { left: 0; right: initial; } .aside-header { background: rgba(255,255,255,1); border-bottom: 1px solid rgba(217,222,225,1); padding: 21px 0px 18px 0px; margin: 0; position: absolute; text-align: center; text-transform: uppercase; top: 0; width: 100%; z-index: 1051; } .aside-header h3 { font-size: 17px; letter-spacing: 1px; line-height: 17px; margin: 0; text-align: center; text-transform: uppercase; } .aside-body { bottom: 0; overflow-y: scroll; padding: 65px 18px; position: absolute; width: 524px; top: 0; } .aside-body p:last-child { margin-bottom: 0; } .aside-footer { background: rgba(255,255,255,1); border-top: 1px solid rgba(227,232,235,1); bottom: 0; margin-bottom: 0; padding: 0; position: absolute; width: 100%; z-index: 1051; } .aside-footer-btn, input[type="submit"].aside-footer-btn { -webkit-appearance: none; -moz-appearance: none; background: transparent; border: none; border-radius: 0; -moz-box-sizing: border-box; box-sizing: border-box; color: rgba(0,153,255,1); cursor: pointer; float: left; font-size: 13px; -webkit-font-smoothing: antialiased; font-weight: 500; line-height: 13px; margin: 0; padding: 20px 0 18px 0; text-align: center; text-indent: 0; text-rendering: geometricPrecision; text-transform: uppercase; vertical-align: middle; width: 100%; } .aside-footer-btn[disabled], input[type="submit"].aside-footer-btn[disabled] { color: rgba(158,171,179,1); cursor: not-allowed; } .aside-footer-dual > .aside-footer-btn, .aside-footer-dual > input[type="submit"].aside-footer-btn { border-right: 1px solid rgba(217,222,225,1); width: 50%; } .aside-footer-dual > .aside-footer-btn:last-child, .aside-footer-dual > input[type="submit"].aside-footer-btn:last-child { border-right: none; } /* #Media Queries ================================================== */ @media only screen and (max-width: 767px) { .aside { width: 300px; } .aside-body { width: 264px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .aside { width: 460px; } .aside-body { width: 424px; } }