html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; cursor: default; } article, aside, figure, footer, header, hgroup, nav, section { display: block; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; color: inherit; text-decoration: inherit; } .search_highlight { color: #000; background-color: #edeb33; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted black; cursor: help; } .zoomable, .zoomable * { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: -ms-zoom-in; cursor: -o-zoom-in; cursor: zoom-in; } .lightbox, .lightbox * { cursor: -webkit-zoom-out; cursor: -moz-zoom-out; cursor: -ms-zoom-out; cursor: -o-zoom-out; cursor: zoom-out; } table { border-collapse: collapse; border-spacing: 0; } th { font-weight: bold; vertical-align: bottom; } td { font-weight: normal; vertical-align: top; } hr { display: block; height: 1px; border: 0; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } select, input, textarea { font: 99% sans-serif; } table { font-size: inherit; font: 100%; } a:hover, a:active { outline: none; } small { font-size: 85%; } strong, th { font-weight: bold; } td, td img { vertical-align: top; } sub, sup { font-size: 75%; line-height: 0; position: relative; } sup { top: -0.5em; } sub { bottom: -0.25em; } pre, code, kbd, samp { font-family: monospace, sans-serif; } input { cursor: auto; } textarea { cursor: text; } a, a *, .clickable, label, input[type=button], input[type=submit], input[type=reset], button, #nextPage, #previousPage, #nextPage *, #previousPage * { cursor: pointer; } button, input, select, textarea { margin: 0; } button { width: auto; overflow: visible; } .ie7 img { -ms-interpolation-mode: bicubic; } .ie6 html { filter: expression(document.execCommand("BackgroundImageCache", false, true)); } .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } ins { background-color: #fcd700; color: black; text-decoration: none; } mark { background-color: #fcd700; color: black; font-style: italic; font-weight: bold; } /* ========================================================================== PAGES Styles related to the grids/layouts in the app. This is currently acting as a catch-all for grid-related styles that haven't found a permanent home. These styles should mostly be moved into layout specific styles eventually, but are used throughout the test data, so we'll move them as it makes sense to do so. ========================================================================== */ .grid { margin: 18px; padding: 0 32px; background: white; } .container img, .column h1, .column h2, .column h3, .column h4, .column h5, .column h6, .column h7, .container h1, .container h2, .container h3, .container h4, .container h5, .container h6, .container h7 { padding-left: 20px; } .container hgroup { padding-bottom: 10px; } .iphone .container hgroup { padding-bottom: 15px; } p { padding-left: 20px; color: #333333; text-indent: 24px; text-align: justify; } p.noindent, p.caption, .keeptogether p { text-indent: 0; } p.caption { text-align: left; } .lightbox p.caption { color: #fff; } .iphone .container img, .iphone .container hgroup, .iphone .column h1, .iphone .column h2, .iphone .column h3, .iphone .column h4, .iphone .column h5, .iphone .column h6, .iphone .column h7 { padding-left: 0; } .iphone .column h4 { padding-left: 20px; } .os-iphone grid.fixed.iphone.vertical { padding-left: 0; margin-right: 18px; } .bgclear { background-color: transparent; } h1, h2, h3, h4, h5, h6 { font-family: sans-serif; font-weight: bold; } h1 { font-family: sans-serif; font-size: 24px; line-height: 1em; } p.caption { line-height: 1.2em; font-size: 90%; text-indent: 0; } p.introduction:first-letter { font-size: 460%; font-weight: bold; font-family: serif; float: left; line-height: 0.95em; margin-right: -0.3em; margin-bottom: -0.2em; width: 1em; color: #c5e113; } .hyperlink { color: #2561b1; } a { color: #2561b1; } .grid.iphone.vertical.page-1 .wrapper { height: 365px; margin: 21px 0px 0px; padding: 0 10px; position: relative; } .grid.iphone.horizontal.page-1 .wrapper { height: 217px; margin: 21px 0px 0px; padding: 0 10px; position: relative; } .grid.ipad.vertical.page-1 .wrapper { height: 872px; margin: 21px 0px 0px; padding: 0 10px; position: relative; } .grid.ipad.horizontal.page-1 .wrapper { height: 619px; margin: 21px 0px 0px; padding: 0 10px; position: relative; } .no-mobile .grid .wrapper { height: 92%; /*margin-top: 5%;*/ position: relative; } .grid img { max-width: 100%; } .grid .fLeft { float: left; } .grid .fRight { float: right; } .grid .bold { font-weight: bold; } .grid .italic { font-style: italic; } .grid .underline { text-decoration-line: underline; } /* CSS */ /* Animate.css - http://daneden.me/animate LICENSED UNDER THE MIT LICENSE (MIT) Copyright (c) 2012 Dan Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated { -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; } .animated.hinge { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } @-moz-keyframes flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } @-o-keyframes flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } @keyframes flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} } .flash { -webkit-animation-name: flash; -moz-animation-name: flash; -o-animation-name: flash; animation-name: flash; } @-webkit-keyframes shake { 0%, 100% {-webkit-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} } @-moz-keyframes shake { 0%, 100% {-moz-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);} 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);} } @-o-keyframes shake { 0%, 100% {-o-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);} 20%, 40%, 60%, 80% {-o-transform: translateX(10px);} } @keyframes shake { 0%, 100% {transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 20%, 40%, 60%, 80% {transform: translateX(10px);} } .shake { -webkit-animation-name: shake; -moz-animation-name: shake; -o-animation-name: shake; animation-name: shake; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 40% {-webkit-transform: translateY(-30px);} 60% {-webkit-transform: translateY(-15px);} } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);} 40% {-moz-transform: translateY(-30px);} 60% {-moz-transform: translateY(-15px);} } @-o-keyframes bounce { 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);} 40% {-o-transform: translateY(-30px);} 60% {-o-transform: translateY(-15px);} } @keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-30px);} 60% {transform: translateY(-15px);} } .bounce { -webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes tada { 0% {-webkit-transform: scale(1);} 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} 100% {-webkit-transform: scale(1) rotate(0);} } @-moz-keyframes tada { 0% {-moz-transform: scale(1);} 10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);} 100% {-moz-transform: scale(1) rotate(0);} } @-o-keyframes tada { 0% {-o-transform: scale(1);} 10%, 20% {-o-transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);} 100% {-o-transform: scale(1) rotate(0);} } @keyframes tada { 0% {transform: scale(1);} 10%, 20% {transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} 100% {transform: scale(1) rotate(0);} } .tada { -webkit-animation-name: tada; -moz-animation-name: tada; -o-animation-name: tada; animation-name: tada; } @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); } } @-moz-keyframes swing { 20% { -moz-transform: rotate(15deg); } 40% { -moz-transform: rotate(-10deg); } 60% { -moz-transform: rotate(5deg); } 80% { -moz-transform: rotate(-5deg); } 100% { -moz-transform: rotate(0deg); } } @-o-keyframes swing { 20% { -o-transform: rotate(15deg); } 40% { -o-transform: rotate(-10deg); } 60% { -o-transform: rotate(5deg); } 80% { -o-transform: rotate(-5deg); } 100% { -o-transform: rotate(0deg); } } @keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -moz-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; -moz-animation-name: swing; -o-animation-name: swing; animation-name: swing; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); } } @-moz-keyframes wobble { 0% { -moz-transform: translateX(0%); } 15% { -moz-transform: translateX(-25%) rotate(-5deg); } 30% { -moz-transform: translateX(20%) rotate(3deg); } 45% { -moz-transform: translateX(-15%) rotate(-3deg); } 60% { -moz-transform: translateX(10%) rotate(2deg); } 75% { -moz-transform: translateX(-5%) rotate(-1deg); } 100% { -moz-transform: translateX(0%); } } @-o-keyframes wobble { 0% { -o-transform: translateX(0%); } 15% { -o-transform: translateX(-25%) rotate(-5deg); } 30% { -o-transform: translateX(20%) rotate(3deg); } 45% { -o-transform: translateX(-15%) rotate(-3deg); } 60% { -o-transform: translateX(10%) rotate(2deg); } 75% { -o-transform: translateX(-5%) rotate(-1deg); } 100% { -o-transform: translateX(0%); } } @keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; -moz-animation-name: wobble; -o-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes wiggle { 0% { -webkit-transform: skewX(9deg); } 10% { -webkit-transform: skewX(-8deg); } 20% { -webkit-transform: skewX(7deg); } 30% { -webkit-transform: skewX(-6deg); } 40% { -webkit-transform: skewX(5deg); } 50% { -webkit-transform: skewX(-4deg); } 60% { -webkit-transform: skewX(3deg); } 70% { -webkit-transform: skewX(-2deg); } 80% { -webkit-transform: skewX(1deg); } 90% { -webkit-transform: skewX(0deg); } 100% { -webkit-transform: skewX(0deg); } } @-moz-keyframes wiggle { 0% { -moz-transform: skewX(9deg); } 10% { -moz-transform: skewX(-8deg); } 20% { -moz-transform: skewX(7deg); } 30% { -moz-transform: skewX(-6deg); } 40% { -moz-transform: skewX(5deg); } 50% { -moz-transform: skewX(-4deg); } 60% { -moz-transform: skewX(3deg); } 70% { -moz-transform: skewX(-2deg); } 80% { -moz-transform: skewX(1deg); } 90% { -moz-transform: skewX(0deg); } 100% { -moz-transform: skewX(0deg); } } @-o-keyframes wiggle { 0% { -o-transform: skewX(9deg); } 10% { -o-transform: skewX(-8deg); } 20% { -o-transform: skewX(7deg); } 30% { -o-transform: skewX(-6deg); } 40% { -o-transform: skewX(5deg); } 50% { -o-transform: skewX(-4deg); } 60% { -o-transform: skewX(3deg); } 70% { -o-transform: skewX(-2deg); } 80% { -o-transform: skewX(1deg); } 90% { -o-transform: skewX(0deg); } 100% { -o-transform: skewX(0deg); } } @keyframes wiggle { 0% { transform: skewX(9deg); } 10% { transform: skewX(-8deg); } 20% { transform: skewX(7deg); } 30% { transform: skewX(-6deg); } 40% { transform: skewX(5deg); } 50% { transform: skewX(-4deg); } 60% { transform: skewX(3deg); } 70% { transform: skewX(-2deg); } 80% { transform: skewX(1deg); } 90% { transform: skewX(0deg); } 100% { transform: skewX(0deg); } } .wiggle { -webkit-animation-name: wiggle; -moz-animation-name: wiggle; -o-animation-name: wiggle; animation-name: wiggle; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); } 50% { -moz-transform: scale(1.2); } 100% { -moz-transform: scale(1); } } @-o-keyframes pulse { 0% { -o-transform: scale(1); } 50% { -o-transform: scale(1.2); } 100% { -o-transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .pulse { -webkit-animation-name: pulse; -moz-animation-name: pulse; -o-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -webkit-animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -webkit-animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) scale(1); -webkit-animation-timing-function: ease-in; } } @-moz-keyframes flip { 0% { -moz-transform: perspective(400px) rotateY(0); -moz-animation-timing-function: ease-out; } 40% { -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-animation-timing-function: ease-out; } 50% { -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-animation-timing-function: ease-in; } 80% { -moz-transform: perspective(400px) rotateY(360deg) scale(.95); -moz-animation-timing-function: ease-in; } 100% { -moz-transform: perspective(400px) scale(1); -moz-animation-timing-function: ease-in; } } @-o-keyframes flip { 0% { -o-transform: perspective(400px) rotateY(0); -o-animation-timing-function: ease-out; } 40% { -o-transform: perspective(400px) translateZ(150px) rotateY(170deg); -o-animation-timing-function: ease-out; } 50% { -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-animation-timing-function: ease-in; } 80% { -o-transform: perspective(400px) rotateY(360deg) scale(.95); -o-animation-timing-function: ease-in; } 100% { -o-transform: perspective(400px) scale(1); -o-animation-timing-function: ease-in; } } @keyframes flip { 0% { transform: perspective(400px) rotateY(0); animation-timing-function: ease-out; } 40% { transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; } 50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; } 80% { transform: perspective(400px) rotateY(360deg) scale(.95); animation-timing-function: ease-in; } 100% { transform: perspective(400px) scale(1); animation-timing-function: ease-in; } } .flip { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: visible !important; -webkit-animation-name: flip; -moz-backface-visibility: visible !important; -moz-animation-name: flip; -o-backface-visibility: visible !important; -o-animation-name: flip; backface-visibility: visible !important; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateX(-10deg); } 70% { -moz-transform: perspective(400px) rotateX(10deg); } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-o-keyframes flipInX { 0% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateX(-10deg); } 70% { -o-transform: perspective(400px) rotateX(10deg); } 100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInX; -moz-backface-visibility: visible !important; -moz-animation-name: flipInX; -o-backface-visibility: visible !important; -o-animation-name: flipInX; backface-visibility: visible !important; animation-name: flipInX; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-moz-keyframes flipOutX { 0% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-o-keyframes flipOutX { 0% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; -webkit-backface-visibility: visible !important; -moz-animation-name: flipOutX; -moz-backface-visibility: visible !important; -o-animation-name: flipOutX; -o-backface-visibility: visible !important; animation-name: flipOutX; backface-visibility: visible !important; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-moz-keyframes flipInY { 0% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateY(-10deg); } 70% { -moz-transform: perspective(400px) rotateY(10deg); } 100% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-o-keyframes flipInY { 0% { -o-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateY(-10deg); } 70% { -o-transform: perspective(400px) rotateY(10deg); } 100% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } 100% { transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInY; -moz-backface-visibility: visible !important; -moz-animation-name: flipInY; -o-backface-visibility: visible !important; -o-animation-name: flipInY; backface-visibility: visible !important; animation-name: flipInY; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-moz-keyframes flipOutY { 0% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-o-keyframes flipOutY { 0% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipOutY; -moz-backface-visibility: visible !important; -moz-animation-name: flipOutY; -o-backface-visibility: visible !important; -o-animation-name: flipOutY; backface-visibility: visible !important; animation-name: flipOutY; } @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-o-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -ms-transform: translateY(-20px); } 100% { opacity: 1; -ms-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(2000px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUpBig { 0% { opacity: 0; -moz-transform: translateY(2000px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUpBig { 0% { opacity: 0; -o-transform: translateY(2000px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; transform: translateY(2000px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; -moz-animation-name: fadeInUpBig; -o-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDownBig { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDownBig { 0% { opacity: 0; -o-transform: translateY(-2000px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; transform: translateY(-2000px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; -moz-animation-name: fadeInDownBig; -o-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeftBig { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeftBig { 0% { opacity: 0; -o-transform: translateX(-2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translateX(-2000px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; -moz-animation-name: fadeInLeftBig; -o-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRightBig { 0% { opacity: 0; -moz-transform: translateX(2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRightBig { 0% { opacity: 0; -o-transform: translateX(2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; transform: translateX(2000px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; -moz-animation-name: fadeInRightBig; -o-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @-moz-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @-o-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } .fadeOut { -webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); } } @-moz-keyframes fadeOutUp { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-20px); } } @-o-keyframes fadeOutUp { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; -moz-animation-name: fadeOutUp; -o-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); } } @-moz-keyframes fadeOutDown { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(20px); } } @-o-keyframes fadeOutDown { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; -moz-animation-name: fadeOutDown; -o-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); } } @-moz-keyframes fadeOutLeft { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-20px); } } @-o-keyframes fadeOutLeft { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; -moz-animation-name: fadeOutLeft; -o-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); } } @-moz-keyframes fadeOutRight { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(20px); } } @-o-keyframes fadeOutRight { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; -moz-animation-name: fadeOutRight; -o-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @-moz-keyframes fadeOutUpBig { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-2000px); } } @-o-keyframes fadeOutUpBig { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; -moz-animation-name: fadeOutUpBig; -o-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @-moz-keyframes fadeOutDownBig { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(2000px); } } @-o-keyframes fadeOutDownBig { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; -moz-animation-name: fadeOutDownBig; -o-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @-moz-keyframes fadeOutLeftBig { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-2000px); } } @-o-keyframes fadeOutLeftBig { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; -moz-animation-name: fadeOutLeftBig; -o-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @-moz-keyframes fadeOutRightBig { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(2000px); } } @-o-keyframes fadeOutRightBig { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; -moz-animation-name: fadeOutRightBig; -o-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(.3); } 50% { opacity: 1; -moz-transform: scale(1.05); } 70% { -moz-transform: scale(.9); } 100% { -moz-transform: scale(1); } } @-o-keyframes bounceIn { 0% { opacity: 0; -o-transform: scale(.3); } 50% { opacity: 1; -o-transform: scale(1.05); } 70% { -o-transform: scale(.9); } 100% { -o-transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(.9); } 100% { transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInUp { 0% { opacity: 0; -moz-transform: translateY(2000px); } 60% { opacity: 1; -moz-transform: translateY(-30px); } 80% { -moz-transform: translateY(10px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes bounceInUp { 0% { opacity: 0; -o-transform: translateY(2000px); } 60% { opacity: 1; -o-transform: translateY(-30px); } 80% { -o-transform: translateY(10px); } 100% { -o-transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; transform: translateY(2000px); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInDown { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 60% { opacity: 1; -moz-transform: translateY(30px); } 80% { -moz-transform: translateY(-10px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes bounceInDown { 0% { opacity: 0; -o-transform: translateY(-2000px); } 60% { opacity: 1; -o-transform: translateY(30px); } 80% { -o-transform: translateY(-10px); } 100% { -o-transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-2000px); } 60% { opacity: 1; transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 60% { opacity: 1; -moz-transform: translateX(30px); } 80% { -moz-transform: translateX(-10px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes bounceInLeft { 0% { opacity: 0; -o-transform: translateX(-2000px); } 60% { opacity: 1; -o-transform: translateX(30px); } 80% { -o-transform: translateX(-10px); } 100% { -o-transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { opacity: 1; transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: translateX(2000px); } 60% { opacity: 1; -moz-transform: translateX(-30px); } 80% { -moz-transform: translateX(10px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes bounceInRight { 0% { opacity: 0; -o-transform: translateX(2000px); } 60% { opacity: 1; -o-transform: translateX(-30px); } 80% { -o-transform: translateX(10px); } 100% { -o-transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { opacity: 1; transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); } 25% { -webkit-transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); } } @-moz-keyframes bounceOut { 0% { -moz-transform: scale(1); } 25% { -moz-transform: scale(.95); } 50% { opacity: 1; -moz-transform: scale(1.1); } 100% { opacity: 0; -moz-transform: scale(.3); } } @-o-keyframes bounceOut { 0% { -o-transform: scale(1); } 25% { -o-transform: scale(.95); } 50% { opacity: 1; -o-transform: scale(1.1); } 100% { opacity: 0; -o-transform: scale(.3); } } @keyframes bounceOut { 0% { transform: scale(1); } 25% { transform: scale(.95); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(.3); } } .bounceOut { -webkit-animation-name: bounceOut; -moz-animation-name: bounceOut; -o-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @-moz-keyframes bounceOutUp { 0% { -moz-transform: translateY(0); } 20% { opacity: 1; -moz-transform: translateY(20px); } 100% { opacity: 0; -moz-transform: translateY(-2000px); } } @-o-keyframes bounceOutUp { 0% { -o-transform: translateY(0); } 20% { opacity: 1; -o-transform: translateY(20px); } 100% { opacity: 0; -o-transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(20px); } 100% { opacity: 0; transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; -moz-animation-name: bounceOutUp; -o-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @-moz-keyframes bounceOutDown { 0% { -moz-transform: translateY(0); } 20% { opacity: 1; -moz-transform: translateY(-20px); } 100% { opacity: 0; -moz-transform: translateY(2000px); } } @-o-keyframes bounceOutDown { 0% { -o-transform: translateY(0); } 20% { opacity: 1; -o-transform: translateY(-20px); } 100% { opacity: 0; -o-transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(-20px); } 100% { opacity: 0; transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; -moz-animation-name: bounceOutDown; -o-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @-moz-keyframes bounceOutLeft { 0% { -moz-transform: translateX(0); } 20% { opacity: 1; -moz-transform: translateX(20px); } 100% { opacity: 0; -moz-transform: translateX(-2000px); } } @-o-keyframes bounceOutLeft { 0% { -o-transform: translateX(0); } 20% { opacity: 1; -o-transform: translateX(20px); } 100% { opacity: 0; -o-transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(20px); } 100% { opacity: 0; transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; -moz-animation-name: bounceOutLeft; -o-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @-moz-keyframes bounceOutRight { 0% { -moz-transform: translateX(0); } 20% { opacity: 1; -moz-transform: translateX(-20px); } 100% { opacity: 0; -moz-transform: translateX(2000px); } } @-o-keyframes bounceOutRight { 0% { -o-transform: translateX(0); } 20% { opacity: 1; -o-transform: translateX(-20px); } 100% { opacity: 0; -o-transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(-20px); } 100% { opacity: 0; transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; -moz-animation-name: bounceOutRight; -o-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateIn { 0% { -moz-transform-origin: center center; -moz-transform: rotate(-200deg); opacity: 0; } 100% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateIn { 0% { -o-transform-origin: center center; -o-transform: rotate(-200deg); opacity: 0; } 100% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { transform-origin: center center; transform: rotate(-200deg); opacity: 0; } 100% { transform-origin: center center; transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; -moz-animation-name: rotateIn; -o-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInUpLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInUpLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(90deg); opacity: 0; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; -moz-animation-name: rotateInUpLeft; -o-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInDownLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(-90deg); opacity: 0; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; -moz-animation-name: rotateInDownLeft; -o-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInUpRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInUpRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(-90deg); opacity: 0; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; -moz-animation-name: rotateInUpRight; -o-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInDownRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(90deg); opacity: 0; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; -moz-animation-name: rotateInDownRight; -o-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(200deg); opacity: 0; } } @-moz-keyframes rotateOut { 0% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: center center; -moz-transform: rotate(200deg); opacity: 0; } } @-o-keyframes rotateOut { 0% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: center center; -o-transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { transform-origin: center center; transform: rotate(0); opacity: 1; } 100% { transform-origin: center center; transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; -moz-animation-name: rotateOut; -o-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @-moz-keyframes rotateOutUpLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0; } } @-o-keyframes rotateOutUpLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { -transform-origin: left bottom; -transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; -moz-animation-name: rotateOutUpLeft; -o-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @-moz-keyframes rotateOutDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0; } } @-o-keyframes rotateOutDownLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; -moz-animation-name: rotateOutDownLeft; -o-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @-moz-keyframes rotateOutUpRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0; } } @-o-keyframes rotateOutUpRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; -moz-animation-name: rotateOutUpRight; -o-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @-moz-keyframes rotateOutDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0; } } @-o-keyframes rotateOutDownRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; -moz-animation-name: rotateOutDownRight; -o-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } } @-moz-keyframes lightSpeedIn { 0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } } @-o-keyframes lightSpeedIn { 0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; -moz-animation-name: lightSpeedIn; -o-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } } @-moz-keyframes lightSpeedOut { 0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } } @-o-keyframes lightSpeedOut { 0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; -moz-animation-name: lightSpeedOut; -o-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); opacity: 0; } } @-moz-keyframes hinge { 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 100% { -moz-transform: translateY(700px); opacity: 0; } } @-o-keyframes hinge { 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 100% { -o-transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 100% { transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; -moz-animation-name: hinge; -o-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } } @-moz-keyframes rollIn { 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } } @-o-keyframes rollIn { 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; -moz-animation-name: rollIn; -o-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); } } @-moz-keyframes rollOut { 0% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -moz-transform: translateX(100%) rotate(120deg); } } @-o-keyframes rollOut { 0% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -o-transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; -moz-animation-name: rollOut; -o-animation-name: rollOut; animation-name: rollOut; } /* GUI CSS */ /* END GUI CSS */ .associationadvisor { background: white url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/associationadvisor/bg.png") center 250px no-repeat; background-size: 65% auto; } .associationadvisor .tableSim { display: table; height: 100%; width: 100%; } .associationadvisor .tableRowSim { display: table-row; height: 50%; } .associationadvisor .ipad .tableRowSim { height: auto; } .associationadvisor .tableCellSim { display: table-cell; } .associationadvisor .valigntop { vertical-align: top; } .associationadvisor .valignmiddle { vertical-align: middle; } .associationadvisor .valignbottom { vertical-align: bottom; } .associationadvisor .alignleft { text-align: left; } .associationadvisor .aligncenter { text-align: center; } .associationadvisor .alignright { text-align: right; } .associationadvisor .column { position: absolute; left: -100%; } .associationadvisor .logo_container { positon: absolute; left: 0; width: 100%; text-align: center; -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; animation-delay: 3s; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; } .associationadvisor .logo { max-width: 100%; max-height: 200px; margin-top: 20px; } .associationadvisor .circle_6ways { -moz-animation-name: roll; -moz-animation-duration: 4s; -moz-animation-iteration-count: 1; -o-animation-name: roll; -o-animation-duration: 4s; -o-animation-iteration-count: 1; -webkit-animation-name: roll; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 1; position: absolute; top: 165px; right: 250px; z-index: 2; } .associationadvisor .circle_delivering { -moz-animation-name: rollRev; -moz-animation-duration: 4s; -moz-animation-iteration-count: 1; -o-animation-name: rollRev; -o-animation-duration: 4s; -o-animation-iteration-count: 1; -webkit-animation-name: rollRev; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 1; position: absolute; bottom: 10px; right: 10px; z-index: 3; } .associationadvisor .circle_delivering { bottom: 50px; right: 50px; } .associationadvisor .card_container { width: 200px; height: 200px; position: relative; perspective: 800px; } .associationadvisor .evolving_container { /*-moz-animation-name: flipX; -moz-animation-duration: 4s; -moz-animation-iteration-count: 1; -o-animation-name: flipX; -o-animation-duration: 4s; -o-animation-iteration-count: 1; -webkit-animation-name: flipX; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 1;*/ position: absolute; bottom: 67px; left: 0px; width: 100%; padding: 20px; background: rgba(255, 255, 255, 0.85); z-index: 1; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; } .associationadvisor .footer_container { /*-moz-animation-name: slideToRight; -moz-animation-duration: 4s; -moz-animation-iteration-count: 1; -o-animation-name: slideToRight; -o-animation-duration: 4s; -o-animation-iteration-count: 1; -webkit-animation-name: slideToRight; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 1;*/ /*-webkit-animation: slideToRight 4s ease-out;*/ /*-moz-animation: slideToRight 4s ease;*/ position: absolute; bottom: 0px; left: 0px; width: 100%; padding: 20px; background: #104685; z-index: 1; -webkit-animation-duration: 2s; -webkit-animation-delay: 2s; -moz-animation-duration: 2s; -moz-animation-delay: 2s; -o-animation-duration: 2s; -o-animation-delay: 2s; animation-duration: 2s; animation-delay: 2s; } .associationadvisor .what { max-height: 27px; padding-right: 10px; vertical-align: middle; } .associationadvisor .association { max-height: 27px; padding-left: 10px; vertical-align: middle; } .associationadvisor .circle { display: inline-block; width: 20px; height: 20px; background: #fff; border-radius: 50%; vertical-align: middle; } @-webkit-keyframes roll { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes roll { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @keyframes roll { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes rollRev { from { -webkit-transform: rotate(360deg); } to { -webkit-transform: rotate(0deg); } } @-moz-keyframes rollRev { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @keyframes rollRev { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /*@-webkit-keyframes flipX { from { -webkit-transform: rotateX(360deg) } to { -webkit-transform: rotateX(0deg) } } @-moz-keyframes flipX { from { -moz-transform: rotate(0deg) } to { -moz-transform: rotate(360deg) } } @keyframes flipX { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }*/ /*@-webkit-keyframes slideToRight { from { -webkit-transform: left } to { -webkit-transform: rotateX(0deg) } } @-moz-keyframes slideToRight { from { -moz-transform: rotate(0deg) } to { -moz-transform: rotate(360deg) } } @keyframes slideToRight { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }*/ /*@-webkit-keyframes slideToRight {*/ /*0% { left: -200%; }*/ /*100% { left: 0; }*/ /*}*/ /*@moz-keyframes slideToRight {*/ /*0% { left: -200%; }*/ /*100% { left: 0; }*/ /*}*/ .associationadvisor.w3, .associationadvisor.ipad.horizontal { background: white url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/associationadvisor/bg.png") center 200px no-repeat; background-size: 65% auto; } .associationadvisor.w3 .logo, .associationadvisor.ipad.horizontal .logo { max-width: 100%; max-height: 150px; } .associationadvisor.w3 .circle_6ways, .associationadvisor.ipad.horizontal .circle_6ways { width: 125px; right: 200px; top: 150px; } .associationadvisor.w3 .circle_delivering, .associationadvisor.ipad.horizontal .circle_delivering { width: 200px; bottom: 10px; right: 10px; } .associationadvisor.w3 .evolving_container, .associationadvisor.ipad.horizontal .evolving_container { bottom: 64px; } .associationadvisor.w3 .evolving, .associationadvisor.ipad.horizontal .evolving { max-height: 75px; } .associationadvisor.w3 .what, .associationadvisor.ipad.horizontal .what { max-height: 20px; } .associationadvisor.w3 .association, .associationadvisor.ipad.horizontal .association { max-height: 20px; } .associationadvisor.w3 .circle, .associationadvisor.ipad.horizontal .circle { width: 20px; height: 20px; } .associationadvisor.w2, .associationadvisor.ipad.vertical { background: white url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/associationadvisor/bg.png") center 200px no-repeat; background-size: 85% auto; } .associationadvisor.w2 .logo, .associationadvisor.ipad.vertical .logo { max-width: 100%; max-height: 150px; } .associationadvisor.w2 .circle_6ways, .associationadvisor.ipad.vertical .circle_6ways { width: 135px; right: 73px; top: 140px; } .associationadvisor.w2 .circle_delivering, .associationadvisor.ipad.vertical .circle_delivering { width: 225px; bottom: 50px; left: 10px; } .associationadvisor.w2 .evolving_container, .associationadvisor.ipad.vertical .evolving_container { bottom: 64px; text-align: right; } .associationadvisor.w2 .evolving, .associationadvisor.ipad.vertical .evolving { max-height: 60px; padding-right: 40px; } .associationadvisor.w2 .what, .associationadvisor.ipad.vertical .what { max-height: 16px; } .associationadvisor.w2 .association, .associationadvisor.ipad.vertical .association { max-height: 16px; } .associationadvisor.w2 .circle, .associationadvisor.ipad.vertical .circle { width: 16px; height: 16px; } .associationadvisor.w2 .circle_6ways { width: 135px; right: 53px; top: 130px; } .associationadvisor.w1, .associationadvisor.iphone.vertical, .associationadvisor.iphone.horizontal { background: white url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/associationadvisor/bg.png") center 150px no-repeat; background-size: 95% auto; } .associationadvisor.w1 .logo, .associationadvisor.iphone.vertical .logo, .associationadvisor.iphone.horizontal .logo { max-width: 100%; max-height: 100px; } .associationadvisor.w1 .circle_6ways, .associationadvisor.iphone.vertical .circle_6ways, .associationadvisor.iphone.horizontal .circle_6ways { width: 75px; right: 12px; top: 110px; } .associationadvisor.w1 .circle_delivering, .associationadvisor.iphone.vertical .circle_delivering, .associationadvisor.iphone.horizontal .circle_delivering { width: 150px; bottom: 150px; left: 10px; } .associationadvisor.w1 .evolving_container, .associationadvisor.iphone.vertical .evolving_container, .associationadvisor.iphone.horizontal .evolving_container { bottom: 64px; text-align: right; } .associationadvisor.w1 .evolving, .associationadvisor.iphone.vertical .evolving, .associationadvisor.iphone.horizontal .evolving { max-height: 40px; padding-right: 40px; } .associationadvisor.w1 .what, .associationadvisor.iphone.vertical .what, .associationadvisor.iphone.horizontal .what { max-height: 10px; padding-right: 0px; padding-left: 10px; } .associationadvisor.w1 .association, .associationadvisor.iphone.vertical .association, .associationadvisor.iphone.horizontal .association { max-height: 10px; } .associationadvisor.w1 .circle, .associationadvisor.iphone.vertical .circle, .associationadvisor.iphone.horizontal .circle { width: 10px; height: 10px; } .associationadvisor.iphone.vertical .circle_6ways, .associationadvisor.iphone.horizontal .circle_6ways { width: 75px; right: 5px; top: 109px; } .associationadvisor.iphone.vertical .circle_delivering, .associationadvisor.iphone.horizontal .circle_delivering { width: 150px; bottom: 135px; left: 5px; } .associationadvisor.iphone.vertical .footer_container, .associationadvisor.iphone.horizontal .footer_container { padding: 10px; padding-bottom: 25px; } .associationadvisor.iphone.vertical .what, .associationadvisor.iphone.horizontal .what { vertical-align: top; } .associationadvisor.iphone.vertical .association, .associationadvisor.iphone.horizontal .association { vertical-align: top; } .associationadvisor.iphone.vertical .circle, .associationadvisor.iphone.horizontal .circle { vertical-align: top; } .associationadvisor.iphone.horizontal .circle_6ways { width: 85px; right: 5px; top: 70px; } .associationadvisor.iphone.horizontal .circle_delivering { width: 135px; bottom: 55px; left: 5px; } .associationadvisor.iphone.horizontal .what { max-height: 10px; padding-right: 10px; padding-left: 0px; } .associationadvisor.iphone.horizontal .evolving_container { bottom: 50px; text-align: right; } .associationadvisor.iphone.horizontal .footer_container { text-align: center; width: 97%; } .tvassociationadviser .myAdFullPage { position: absolute; z-index: 999; left:0; width:100%; margin:0 auto; height:100%; background: #fff; padding:0%; text-align: center;} .tvassociationadviser .sponsorship { position:absolute; top:0px; display: block; color:#fff; background:#000; width:100%; z-index:1000; text-align:center; padding-top:20px;} .tvassociationadviser .iPhone .myAdFullPage { top:68px; } .tvassociationadviser .iPad .myAdFullPage { top:68px; } .tvassociationadviser .iPod .myAdFullPage { top:68px; } .tvassociationadviser .backPage { position:absolute; bottom:-5px; left:5px; cursor: pointer; z-index: 1000;} .tvassociationadviser .nextPage { position:absolute; bottom:-5px; right:5px; cursor: pointer; z-index: 1000;} .tvassociationadviser .header { background:#000; position:absolute; top:0; left:0; width:100%; z-index: 1000; padding-top:50px;} .tvassociationadviser .iframeWrapper { overflow:auto; -webkit-overflow-scrolling: touch !important; height:95%;} .tvassociationadviser.iphone.horizontal .iframeWrapper { height:82%;} .tvassociationadviser.iphone.vertical .iframeWrapper { height:88%;} .tvassociationadviser .footer { height:50px; background:#000; position:absolute; bottom:0; left:0; width:100%; z-index: 1000;} /* GUI CSS */ /* END GUI CSS */ /* CSS */ /* CSS */ .membercommunications .column:not(.c1) p:not(img) { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/membercommunications/0087ba.png") repeat-y top left; } .membercommunications .column:not(.c1) h3 { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/membercommunications/0087ba.png") repeat-y top left; } .membercommunications .column:not(.c1) ol { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/membercommunications/0087ba.png") repeat-y top left; } .membercommunications .column:not(.c1) ul { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/membercommunications/0087ba.png") repeat-y top left; } /* GUI CSS */ /* END GUI CSS */ .membercommunications p.first {text-indent:0px} .membercommunications p.credits {text-indent:0;text-align:left;color:grey;font-size:90%;padding:40px 0 0 20px} .membercommunications strong {text-transform:uppercase;font-weight:200;color:rgba(0,174,239,1)} .membercommunications.w1 h1 {font:30px Georgia;color:rgba(0,174,239,1);font-weight:300;border-top:1px dashed rgba(102,153,102,1);padding:10px} .membercommunications h1 {font:44px Georgia;color:rgba(0,174,239,1);font-weight:300;border-top:1px dashed rgba(102,153,102,1);padding:10px} .membercommunications.iphone h1 {font:28px Georgia;color:rgba(0,174,239,1);font-weight:300;border-top:1px dashed rgba(102,153,102,1);padding:10px 0 20px 0;padding:0 0 0 20px} .membercommunications h1 span {color:rgba(102,153,102,1);} .membercommunications ul, ol {list-style-position: inside;padding:10px 0 10px 30px;display:block;} .membercommunications ol li {color:rgba(0,174,239,1)} .membercommunications ul li {list-style-type:disc;padding-top:5px} .membercommunications span.list {color:#000} .membercommunications.iphone h3 {font:18px;color:rgba(0,174,239,1);text-transform:uppercase;padding:20px 0 0 20px;font-weight:500} .membercommunications h3 {font:18px;color:rgba(0,174,239,1);text-transform:uppercase;padding:20px 0 0 20px;font-weight:500} .membercommunications .pullquote {font:24px Georgia;color:#333;font-style:italic; padding-left: 20px; padding-bottom: 20px;} .membercommunications hr {border:0;height:1px;background:#666} .membercommunications .takeaway {background:rgba(138,158,163,1);padding:15px;padding-left:20px;display:block} .membercommunications .takeaway h4 {padding:10px 0 0 40px;padding:0 0 0 20px;background:rgba(102,119,123,1);color:#fff;font:21px Arial;text-transform:uppercase;font-weight:100;letter-spacing:1px;line-height:26px} .membercommunications .takeaway ul li {list-style-type:disk;padding:5px 10px 0 0;padding:5px 0 5px 0;} .membercommunications .takeaway li {font:14px Tahoma;color:#fff;line-height:16px;letter-spacing:1px} .membercommunications p.no-indent { text-indent : 0px; } .membercommunications span.drop-cap { font-size : 4.693em; float : left; line-height : 1; padding-top : -0.07em; padding-right : 0.05em; padding-bottom : -0.204em; font-family : "Oswald", sans-serif; font-stretch : ultra-condensed; font-weight : normal; font-style : normal; color:rgba(102,153,102,1) } .membercommunications .grid { background: red; } .amd .myAdFullPage { position: absolute; z-index: 999; left:0; width:100%; margin:0 auto; height:100%; background: #fff; padding:0%; text-align: center;} .amd .sponsorship { position:absolute; top:0px; display: block; color:#fff; background:#000; width:100%; z-index:1000; text-align:center; padding-top:20px;} .amd .iPhone .myAdFullPage { top:68px; } .amd .iPad .myAdFullPage { top:68px; } .amd .iPod .myAdFullPage { top:68px; } .amd .backPage { position:absolute; bottom:-5px; left:5px; cursor: pointer; z-index: 1000;} .amd .nextPage { position:absolute; bottom:-5px; right:5px; cursor: pointer; z-index: 1000;} .amd .header { background:#000; position:absolute; top:0; left:0; width:100%; z-index: 1000; padding-top:50px;} .amd .iframeWrapper { overflow:auto; -webkit-overflow-scrolling: touch !important; height:95%;} .amd.iphone.horizontal .iframeWrapper { height:82%;} .amd.iphone.vertical .iframeWrapper { height:88%;} .amd .footer { height:50px; background:#000; position:absolute; bottom:0; left:0; width:100%; z-index: 1000;} /* GUI CSS */ /* END GUI CSS */ /* CSS */ /* GUI CSS */ /* END GUI CSS */ .onlinevideo p {text-indent:0;margin:0; padding-bottom: 20px;} .onlinevideo p.credits {text-indent:0;text-align:left;color:grey;font-size:90%;margin:40px 0 0 0} .onlinevideo h1 {font-size:44px;color:rgba(0,70,127,1);font-weight:600} .onlinevideo h1 span {color:rgba(0,135,186,1)} .onlinevideo .titlearea {font-size:14px;color:rgba(138,158,163,1);margin:10px 0 0 20px} .onlinevideo .titleauthor {text-align:right;margin:10px 20px 20px 0;font:14px Calibri;color:#333} .onlinevideo .titleauthor span {color:rgba(0,70,127,1);text-transform:uppercase;font-style:italic} .onlinevideo .question {color:rgba(0,70,127,1);text-transform:uppercase;margin:10px 0 0 0;text-indent:0;text-align:left;font-size:90%} .onlinevideo ul, ol {list-style-position: inside; padding-left:30px;} .onlinevideo ol li {color:rgba(0,174,239,1); padding-bottom:5px;} .onlinevideo ul li {list-style-type:disc; padding-bottom:5px;} .onlinevideo span.list {color:#000} .onlinevideo h3 {font:18px;color:rgba(0,70,127,1);text-transform:uppercase;margin:0 0 20px 0;font-weight:500;font-style:italic;border-bottom:1px dashed rgba(0,70,127,1)} .onlinevideo .pullquote {font:24px Georgia;color:#333;font-style:italic; padding-left: 20px; margin-bottom: 20px;} .onlinevideo .takeaway {background:rgba(0,84,36,1);padding:15px 0 15px 0;margin:0 0 0 20px;display:block} .onlinevideo .takeaway h4 {margin:10px 0 0 40px;padding:0 0 0 20px;background:rgba(120,192,127,1);color:#fff;font:21px Arial;text-transform:uppercase;font-weight:100;letter-spacing:1px;line-height:26px} .onlinevideo .takeaway ul li {list-style-type:disk;margin:5px 10px 0 40px;padding:0} .onlinevideo .takeaway li {font:14px Tahoma;color:#fff;line-height:16px;letter-spacing:1px} .onlinevideo p.no-indent { text-indent : 0px; } .onlinevideo span.drop-cap { font-size : 4.693em; float : left; line-height : 1; margin-top : -0.07em; margin-right : 0.05em; margin-bottom : -0.204em; font-family : "Oswald", sans-serif; font-stretch : ultra-condensed; font-weight : normal; font-style : normal; color:rgba(232,106,76,1) } /* CSS */ /* GUI CSS */ /* END GUI CSS */ .associationcommunicationtrends { background: white url("") left top no-repeat; } .associationcommunicationtrends .tableSim { display: table; height: 100%; width: 100%; } .associationcommunicationtrends .tableRowSim { display: table-row; height: 50%; } .associationcommunicationtrends .ipad .tableRowSim { height: auto; } .associationcommunicationtrends .tableCellSim { display: table-cell; } .associationcommunicationtrends .valigntop { vertical-align: top; } .associationcommunicationtrends .valignmiddle { vertical-align: middle; } .associationcommunicationtrends .valignbottom { vertical-align: bottom; } .associationcommunicationtrends .alignleft { text-align: left; } .associationcommunicationtrends .aligncenter { text-align: center; } .associationcommunicationtrends .alignright { text-align: right; } .associationcommunicationtrends .bold { font-weight: bold; } .associationcommunicationtrends .titlearea { font: 18px Calibri; color: #666; } .associationcommunicationtrends .titleauthor { text-align: right; margin: 0 20px 0 0; font: 14px Calibri; color: #333; } .associationcommunicationtrends .titlearea span, .associationcommunicationtrends .titleauthor span, .associationcommunicationtrends .question span { color: #00467f; text-transform: uppercase; font-style: italic; font-weight: bold; } .associationcommunicationtrends .first { text-indent: 0px; } .associationcommunicationtrends .question { color: #62aba8; text-transform: uppercase; } .associationcommunicationtrends span.letter { font: 40px Calibri; color: #669966; float: left; line-height: 80%; width: 40px; text-indent: 16px; } .associationcommunicationtrends.iphone { font: 20px; color: #51662c; font-weight: 200; margin:5px 0 0 0} .associationcommunicationtrends h1 { font: 50px; color: #51662c; font-weight: 600; padding:10px 0 0 0 } .associationcommunicationtrends h1 span { color: #00467f; } .associationcommunicationtrends ul, ol {list-style-position: inside;margin:5px 0 5px 0;display:block;padding:0 0 0 30px} .associationcommunicationtrends ol li {color:rgba(0,174,239,1)} .associationcommunicationtrends ul li {list-style-type:disc;margin:0;padding:0} .associationcommunicationtrends span.list {color:#000} .associationcommunicationtrends h3 { font: 18px Calibri; color: #00aeef; text-transform: uppercase; margin: 0 0 0 20px; font-weight: 500; } .associationcommunicationtrends .quote { font: 24px Georgia; color: #333; font-style: italic; } .associationcommunicationtrends hr { border: 0; height: 1px; background: #666; } .associationcommunicationtrends small { font: 12px Calibri; font-style: italic; color: #333; } .associationcommunicationtrends small a { text-decoration: none; } .associationcommunicationtrends hgroup { border-top: 4px solid #666; border-bottom: 2px solid #666; padding-left: 0; margin-left: 20px; margin-bottom: 20px; } .associationcommunicationtrends p { text-indent: 0; text-align: left;} .associationcommunicationtrends p.answer { margin-bottom: 1.5em; } /* CSS */ /* GUI CSS */ /* END GUI CSS */ .franktalk p {text-indent:0;margin:0 0 5px 0} .franktalk p.credits {text-indent:0;text-align:left;color:grey;font-size:90%;margin:40px 0 0 0} .franktalk.iphone h1 {font:40px Arial;color:#000;font-weight:400;margin:-20px 0 0 80px;padding:0} .franktalk h1 {font:60px Arial;color:#000;font-weight:400;margin:-20px 0 0 80px;padding:0} .franktalk h1 span {color:rgba(0,135,186,1)} .franktalk .arrow {position:relative;top:20px;width:0px;height:0px;border-bottom:35px solid transparent;border-top:35px solid transparent; border-left:35px solid rgba(195,217,65,1);font-size:0px;line-height:0px} .franktalk.w2 h2, .franktalk.w1 h2 {font:25px Arial;color:#000;font-weight:300;margin:-5px 0 0 40px;padding:0} .franktalk.iphone h2 {font:20px Arial;color:#000;font-weight:300;margin:-5px 0 0 40px;padding:0} .franktalk h2 {font:40px Arial;color:#000;font-weight:300;margin:-5px 0 0 40px;padding:0} .franktalk h2 span {color:rgba(0,135,186,1)} .franktalk .titlearea {font-size:14px;color:rgba(138,158,163,1);margin:10px 0 0 20px} .franktalk .titleauthor {text-align:right;margin:10px 20px 20px 0;font:14px Calibri;color:#333} .franktalk .titleauthor span {color:rgba(0,70,127,1);text-transform:uppercase;font-style:italic} .franktalk .question {color:rgba(98,171,168,1);text-transform:uppercase;margin:10px 0 0 0;text-indent:0;text-align:left} .franktalk h3 {font:18px;color:rgba(232,108,76,1);text-transform:uppercase;margin:20px 0 0 0px;font-weight:500;font-style:italic} .franktalk .pullquote {font:20px Georgia;color:#333;font-style:italic;padding:0 0 0 30px;margin:0;text-align:left;display:block} .franktalk .quotewho {font:10px;font-style:italic;color:grey;text-align:left;display:block;text-align:right;margin:10px 0 0 0} .franktalk .takeaway {background:rgba(0,84,36,1);padding:15px 0 15px 0;margin:0 0 0 20px;display:block} .franktalk .takeaway h4 {margin:10px 0 0 40px;padding:0 0 0 20px;background:rgba(120,192,127,1);color:#fff;font:21px Arial;text-transform:uppercase;font-weight:100;letter-spacing:1px;line-height:26px} .franktalk .takeaway ul li {list-style-type:disk;margin:5px 10px 0 40px;padding:0} .franktalk .takeaway li {font:14px Tahoma;color:#fff;line-height:16px;letter-spacing:1px} .franktalk p.no-indent { text-indent : 0px; } .franktalk span.drop-cap { font-size : 4.693em; float : left; line-height : 1; margin-top : -0.07em; margin-right : 0.05em; margin-bottom : -0.204em; font-family : "Oswald", sans-serif; font-stretch : ultra-condensed; font-weight : normal; font-style : normal; color:rgba(232,106,76,1) } /* CSS */ /* GUI CSS */ /* END GUI CSS */ .associationspotlight p {text-indent:10px} .associationspotlight p.credits {text-indent:0;text-align:left;color:grey;font-size:90%;margin:40px 0 0 0} .associationspotlight.iphone h1 {font-size:24px;color:#000;font-weight:600} .associationspotlight h1 {font-size:44px;color:#000;font-weight:600} .associationspotlight h1 span {color:rgba(0,135,186,1)} .associationspotlight.iphone .titlearea {font-size:14px;color:rgba(138,158,163,1);margin:10px 20px 0 20px} .associationspotlight .titlearea {font-size:14px;color:rgba(138,158,163,1);margin:10px 0 0 20px} .associationspotlight .titleauthor {text-align:right;margin:10px 20px 20px 0;font:14px Calibri;color:#333} .associationspotlight .titleauthor span {color:rgba(0,70,127,1);text-transform:uppercase;font-style:italic} .associationspotlight .question {color:rgba(0,70,127,1);text-transform:uppercase;margin:10px 0 0 0;text-indent:0;text-align:left;font-size:90%} .associationspotlight h3 {font:18px;color:rgba(232,108,76,1);text-transform:uppercase;margin:20px 0 0 0px;font-weight:500;font-style:italic} .associationspotlight .pullquote {font:20px Georgia;color:#333;font-style:italic;padding:0 0 0 30px;margin:0;text-align:left;display:block} .associationspotlight .quotewho {font:10px;font-style:italic;color:grey;text-align:left;display:block;text-align:right;margin:10px 0 0 0} .associationspotlight .takeaway {background:rgba(195,217,65,1);padding:15px 0 15px 0;margin:0 0 0 20px;display:block} .associationspotlight .takeaway h4 {margin:10px 0 0 40px;padding:0 0 0 20px;background:rgba(102,119,123,1);color:#fff;font:21px Arial;text-transform:uppercase;font-weight:100;letter-spacing:1px;line-height:26px} .associationspotlight .takeaway ul li {list-style-type:disk;margin:5px 10px 0 40px;padding:0} .associationspotlight .takeaway li {font:14px Tahoma;color:#fff;line-height:16px;letter-spacing:1px} .associationspotlight p.no-indent { text-indent : 0px; } .associationspotlight span.drop-cap { font-size : 4.693em; float : left; line-height : 1; margin-top : -0.07em; margin-right : 0.05em; margin-bottom : -0.204em; font-family : "Oswald", sans-serif; font-stretch : ultra-condensed; font-weight : normal; font-style : normal; color:rgba(232,106,76,1) } /* CSS */ .didyouknow .column:not(.c1) p:not(img) { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/didyouknow/0087ba.png") repeat-y top left; } /* GUI CSS */ /* END GUI CSS */ .didyouknow p {text-indent:10px} .didyouknow p.credits {text-indent:0;text-align:left;color:grey;font-size:90%;padding:40px 0 0 0} .didyouknow.iphone h1 {font-size:24px;color:#000;font-weight:600} .didyouknow h1 {font-size:44px;color:#000;font-weight:600} .didyouknow h1 span {color:rgba(0,135,186,1)} .didyouknow.iphone .titlearea {font-size:14px;color:rgba(138,158,163,1);padding:10px 20px 0 0} .didyouknow .titlearea {font-size:14px;color:rgba(138,158,163,1);padding:10px 0 0 0} .didyouknow .titleauthor {text-align:right;padding:10px 20px 20px 0;font:14px Calibri;color:#333} .didyouknow .titleauthor span {color:rgba(0,70,127,1);text-transform:uppercase;font-style:italic} .didyouknow .question {color:rgba(0,93,166,1);text-transform:uppercase;padding:10px 0 0 20px;text-indent:0;text-align:left;font-size:90%} .didyouknow h3 {font:18px;color:rgba(232,108,76,1);text-transform:uppercase;padding:20px 0 0 0px;font-weight:500;font-style:italic} .didyouknow .pullquote {font:24px Georgia;color:#333;font-style:italic; padding-left: 20px; padding-bottom: 20px;} .didyouknow .takeaway {background:rgba(0,118,194,1);padding:15px 0 15px 0;padding:0 0 0 20px;display:block} .didyouknow .takeaway h4 {padding:10px 0 0 40px;padding:0 0 0 20px;background:rgba(247,143,37,1);color:#fff;font:21px Arial;text-transform:uppercase;font-weight:100;letter-spacing:1px;line-height:26px} .didyouknow .takeaway ul li {list-style-type:disk;padding:5px 10px 0 40px;padding:0} .didyouknow .takeaway li {font:14px Tahoma;color:#fff;line-height:16px;letter-spacing:1px} .didyouknow p.no-indent { text-indent : 0px; } .didyouknow span.drop-cap { font-size : 4.693em; float : left; line-height : 1; margin-top : -0.07em; margin-right : 0.05em; margin-bottom : -0.204em; font-family : "Oswald", sans-serif; font-stretch : ultra-condensed; font-weight : normal; font-style : normal; color:rgba(232,106,76,1) } .didyouknow span.one {color:rgba(247,143,37,1)} .didyouknow span.two {color:rgba(210,35,42,1)} .didyouknow span.three {color:rgba(65,173,73,1)} .didyouknow span.four {color:rgba(0,70,127,1)} /* CSS */ /* GUI CSS */ /* END GUI CSS */ .whatassociationsdonotget p {text-indent:10px} .whatassociationsdonotget p.credits {text-indent:0;text-align:left;color:grey;font-size:90%;margin:40px 0 0 0} .whatassociationsdonotget.iphone h1 {font-size:20px;color:rgba(0,84,36,1);font-weight:600;border-top:4px double rgba(232,106,76,1);padding:10px 0 0 0;margin:0 0 0 20px} .whatassociationsdonotget h1 {font-size:40px;color:rgba(0,84,36,1);font-weight:600;border-top:4px double rgba(232,106,76,1);padding:10px 0 0 0} .whatassociationsdonotget h1 span {color:rgba(232,106,76,1)} .whatassociationsdonotget h1 span2 {color:rgba(120,192,127,1)} .whatassociationsdonotget.iphone .titlearea {font-size:14px;color:rgba(138,158,163,1);margin:10px 20px 0 20px} .whatassociationsdonotget .titlearea {font-size:14px;color:rgba(138,158,163,1);margin:10px 0 0 20px} .whatassociationsdonotget .titleauthor {text-align:right;margin:10px 20px 20px 0;font:14px Calibri;color:#333} .whatassociationsdonotget .titleauthor span {color:rgba(0,70,127,1);text-transform:uppercase;font-style:italic} .whatassociationsdonotget .question {color:rgba(232,108,76,1);text-transform:uppercase;margin:10px 0 0 0;text-indent:0;text-align:left} .whatassociationsdonotget h3 {font:18px;color:rgba(0,174,239,1);text-transform:uppercase;margin:20px 0 0 0px;font-weight:500} .whatassociationsdonotget .pullquote {font:24px Georgia;color:#333;font-style:italic; padding-left: 20px; margin-bottom: 20px;} .whatassociationsdonotget hr {border:0;height:1px;background:#666} .whatassociationsdonotget small {font:12px;font-style:italic;color:#333} .whatassociationsdonotget small a {text-decoration:none} .whatassociationsdonotget .takeaway {background:rgba(120,192,127,.4);padding:15px 0 15px 0;margin:0 0 0 20px;display:block} .whatassociationsdonotget .takeaway h4 {margin:10px 0 0 40px;padding:0 0 0 20px;background:#000;color:#fff;font:21px Arial;text-transform:uppercase;font-weight:100;letter-spacing:1px;line-height:26px} .whatassociationsdonotget .takeaway ul li {list-style-type:disk;margin:5px 10px 0 40px;padding:0} .whatassociationsdonotget .takeaway li {font:14px Tahoma;color:#000;line-height:16px;letter-spacing:1px} .whatassociationsdonotget p.no-indent { text-indent : 0px; } .whatassociationsdonotget span.drop-cap { font-size : 4.693em; float : left; line-height : 1; margin-top : -0.07em; margin-right : 0.05em; margin-bottom : -0.204em; font-family : "Oswald", sans-serif; font-stretch : ultra-condensed; font-weight : normal; font-style : normal; color:rgba(232,106,76,1) } /* CSS */ /* GUI CSS */ /* END GUI CSS */ .associationtechnologyadoption p {text-indent:10px} .associationtechnologyadoption p.credits {text-indent:0;text-align:left;color:grey;font-size:90%;margin:40px 0 0 0} .associationtechnologyadoption h1 {font-size:40px;color:rgba(232,108,76,1);font-weight:600;border-left:4px ridge grey} .associationtechnologyadoption h1 span {color:rgba(0,135,186,1)} .associationtechnologyadoption.iphone .titlearea {font-size:14px;color:rgba(138,158,163,1);margin:10px 20px 0 20px} .associationtechnologyadoption .titlearea {font-size:14px;color:rgba(138,158,163,1);margin:10px 0 0 20px} .associationtechnologyadoption .titleauthor {text-align:right;margin:10px 20px 20px 0;font:14px Calibri;color:#333} .associationtechnologyadoption .titleauthor span {color:rgba(0,70,127,1);text-transform:uppercase;font-style:italic} .associationtechnologyadoption .question {color:rgba(0,70,127,1);text-transform:uppercase;margin:10px 0 0 0;text-indent:0;text-align:left;font-size:90%} .associationtechnologyadoption h3 {font:18px;color:rgba(232,108,76,1);text-transform:uppercase;margin:20px 0 0 0px;font-weight:500;font-style:italic} .associationtechnologyadoption .pullquote {font:24px Georgia;color:#333;font-style:italic; padding-left: 20px; margin-bottom: 20px;} .associationtechnologyadoption .takeaway {background:rgba(0,84,36,1);padding:15px 0 15px 0;margin:0 0 0 20px;display:block} .associationtechnologyadoption .takeaway h4 {margin:10px 0 0 40px;padding:0 0 0 20px;background:rgba(120,192,127,1);color:#fff;font:21px Arial;text-transform:uppercase;font-weight:100;letter-spacing:1px;line-height:26px} .associationtechnologyadoption .takeaway ul li {list-style-type:disk;margin:5px 10px 0 40px;padding:0} .associationtechnologyadoption .takeaway li {font:14px Tahoma;color:#fff;line-height:16px;letter-spacing:1px} .associationtechnologyadoption p.no-indent { text-indent : 0px; } .associationtechnologyadoption span.drop-cap { font-size : 4.693em; float : left; line-height : 1; margin-top : -0.07em; margin-right : 0.05em; margin-bottom : -0.204em; font-family : "Oswald", sans-serif; font-stretch : ultra-condensed; font-weight : normal; font-style : normal; color:rgba(232,106,76,1) } /* CSS */ /* GUI CSS */ /* END GUI CSS */ .cloudcomputing p {text-indent:10px} .cloudcomputing p.credits {text-indent:0;text-align:left;color:grey;font-size:90%;margin:40px 0 0 0} .cloudcomputing h1 {font-size:44px;color:#000;font-weight:600} .cloudcomputing h1 span {color:rgba(0,135,186,1)} .cloudcomputing .titlearea {font-size:14px;color:rgba(138,158,163,1);margin:10px 0 0 20px} .cloudcomputing .titleauthor {text-align:right;margin:10px 20px 20px 0;font:14px Calibri;color:#333} .cloudcomputing .titleauthor span {color:rgba(0,70,127,1);text-transform:uppercase;font-style:italic} .cloudcomputing .question {color:rgba(0,135,186,1);text-transform:uppercase;margin:10px 0 0 0;text-indent:0;text-align:left} .cloudcomputing ul, ol {list-style-position: inside;margin:5px 0 5px 0;display:block;padding:0 0 0 30px} .cloudcomputing ol li {color:rgba(0,174,239,1)} .cloudcomputing ul li {list-style-type:disc;margin:0;padding:0} .cloudcomputing span.list {color:#000} .cloudcomputing h3 {font:18px;color:rgba(232,108,76,1);text-transform:uppercase;margin:20px 0 0 0px;font-weight:500;font-style:italic} .cloudcomputing .pullquote {font:24px Georgia;color:#333;font-style:italic; padding-left: 20px; margin-bottom: 20px;} .cloudcomputing .takeaway {background:rgba(0,135,186,1);padding:15px 0 15px 0;margin:0;display:block} .cloudcomputing .takeaway h4 {margin:10px 0 0 40px;padding:0 0 0 20px;background:#000;color:#fff;font:21px Arial;text-transform:uppercase;font-weight:100;letter-spacing:1px;line-height:26px} .cloudcomputing .takeaway ul li {list-style-type:disk;margin:5px 10px 0 0;padding:0} .cloudcomputing .takeaway li {font:14px Tahoma;color:#fff;line-height:16px;letter-spacing:1px} .cloudcomputing p.no-indent { text-indent : 0px; } .cloudcomputing span.drop-cap { font-size : 4.693em; float : left; line-height : 1; margin-top : -0.07em; margin-right : 0.05em; margin-bottom : -0.204em; font-family : "Oswald", sans-serif; font-stretch : ultra-condensed; font-weight : normal; font-style : normal; color:rgba(232,106,76,1) } /* CSS */ /* GUI CSS */ /* END GUI CSS */ .abouttablets p {text-indent:0px} .abouttablets.iphone h1 {font:20px Sans-Serif;color:rgba(0,70,127,1);font-weight:600} .abouttablets h1 {font:45px Sans-Serif;color:rgba(0,70,127,1);font-weight:600} .abouttablets h1 span {color:rgba(0,174,239,1)} .abouttablets.iphone .titlearea {font:18px;color:#666;margin:10px 20px 0 20px} .abouttablets .titlearea {font:18px;color:#666;margin:10px 0 0 20px} .abouttablets .titleauthor {text-align:right;margin:10px 20px 20px 0;font:14px Calibri;color:#333} .abouttablets .titleauthor span {color:rgba(0,70,127,1);text-transform:uppercase;font-style:italic} .abouttablets .question {color:rgba(0,174,239,1);text-transform:uppercase;margin:10px 0 0 0;text-indent:0;text-align:left} .abouttablets .question span {color:rgba(0,70,127,1);text-transform:uppercase;font-style:italic} .abouttablets ul, ol {list-style-position: inside;margin:10px 0 10px 0} .abouttablets ul li p {color:#000;text-indent:0} .abouttablets ul li {list-style-type:disc;margin:0 0 0 20px} .abouttablets h3 {font:18px;color:rgba(0,174,239,1);text-transform:uppercase;margin:20px 0 0 0px;font-weight:500} .abouttablets .pullquote {font:24px Georgia;color:#333;font-style:italic; padding-left: 20px; margin-bottom: 20px;} .abouttablets hr {border:0;height:1px;background:#666} .abouttablets small {font:12px;font-style:italic;color:#333} .abouttablets small a {text-decoration:none} .abouttablets .takeaway {background:rgba(138,158,163,.5);padding:5px 0 5px 0;margin:10px 0 0 0;display:block} .abouttablets .takeaway h4 {margin:0;padding:0 0 0 10px;background:rgba(102,119,123,1);color:#fff;font:16px Calibri} .abouttablets .takeaway ul li {list-style-type:none;margin:0 0 0 -30px;padding:0} .abouttablets .takeaway li {font:12px Tahoma} .abouttablets .takeaway li:before {content:"e2[[ISSUE_CSS]]a0"} .abouttablets p.no-indent { text-indent : 0px; } .abouttablets span.drop-cap { font-size : 4.693em; float : left; line-height : 1; margin-top : -0.07em; margin-right : 0.05em; margin-bottom : -0.204em; font-family : "Oswald", sans-serif; font-stretch : ultra-condensed; font-weight : normal; font-style : normal; color:rgba(102,153,102,1) } /* CSS */ .writingfortheweb p {text-indent:0px} .writingfortheweb h1 {font:45px Sans-Serif;color:rgba(0,70,127,1);font-weight:600} .writingfortheweb h1 span {color:rgba(0,174,239,1)} .writingfortheweb .titlearea {font:18px;color:#666;margin:10px 0 0 20px} .writingfortheweb .titleauthor {text-align:right;margin:10px 20px 20px 0;font:14px Calibri;color:#333} .writingfortheweb .titleauthor span {color:rgba(0,70,127,1);text-transform:uppercase;font-style:italic} /* GUI CSS */ /* END GUI CSS */ .writingfortheweb h1 { font-size: 60px; margin-top: 10px; margin-bottom: 10px; } .writingfortheweb p {text-indent:10px} /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .grid.inspirecreativity.no-page-1 { background-color: #fff; } .grid.inspirecreativity.page-1 { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .inspirecreativity.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/inspirecreativity/iPhone_port_creativity.png") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .inspirecreativity.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/inspirecreativity/iPad_port_creativity.png") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .inspirecreativity.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/inspirecreativity/iPhone_port_creativity.png") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .inspirecreativity.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/inspirecreativity/iPad_land_creativity.png") center center no-repeat; background-size: contain;} } /* //////////////////////////////////////////////////////////// // 3-column //////////////////////////////////////////////////////////// */ .no-mobile .inspirecreativity.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/inspirecreativity/iPad_land_creativity.png") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // 4-column //////////////////////////////////////////////////////////// */ .no-mobile .inspirecreativity.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/inspirecreativity/iPad_land_creativity.png") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone vertical //////////////////////////////////////////////////////////// */ .inspirecreativity.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/inspirecreativity/iPhone_port_creativity.png") center center no-repeat;} /* //////////////////////////////////////////////////////////// // iPhone horizontal //////////////////////////////////////////////////////////// */ .inspirecreativity.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/inspirecreativity/iPhone_land_creativity.png") center center no-repeat;} /* //////////////////////////////////////////////////////////// // iPad vertical //////////////////////////////////////////////////////////// */ .inspirecreativity.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/inspirecreativity/iPad_port_creativity.png") center center no-repeat;} /* //////////////////////////////////////////////////////////// // iPad horizontal //////////////////////////////////////////////////////////// */ .inspirecreativity.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/inspirecreativity/iPad_land_creativity.png") center center no-repeat;} /* GUI CSS */ /* END GUI CSS */ .inspirecreativity p {text-indent:10px} .inspirecreativity p.credits {text-indent:0;text-align:left;color:grey;font-size:90%;margin:40px 0 0 0} .inspirecreativity h1 {font-size:44px;color:#000;font-weight:600;margin:0 0 10px 0} .inspirecreativity h1 span {color:rgba(0,135,186,1)} .inspirecreativity .titlearea {font-size:14px;color:rgba(138,158,163,1);margin:10px 0 0 20px} .inspirecreativity .titleauthor {text-align:right;margin:10px 20px 20px 0;font:14px Calibri;color:#333} .inspirecreativity .titleauthor span {color:rgba(0,70,127,1);text-transform:uppercase;font-style:italic} .inspirecreativity .question {color:rgba(0,70,127,1);text-transform:uppercase;margin:10px 0 0 0;text-indent:0;text-align:left;font-size:90%} .inspirecreativity ul, ol {list-style-position:inside;color:rgba(0,135,186,1)} .inspirecreativity ol li p, ul li p {color:#000;text-indent:0;font-size:100%} .inspirecreativity ul li {list-style-type:disc} .inspirecreativity h3 {font:18px;color:rgba(232,108,76,1);text-transform:uppercase;margin:20px 0 0 0px;font-weight:500;font-style:italic} .inspirecreativity .pullquote {font:24px Georgia;color:#333;font-style:italic; padding-left: 20px; margin-bottom: 20px;} .inspirecreativity .takeaway {background:rgba(0,118,194,1);padding:15px 0 15px 0;margin:0 0 0 20px;display:block} .inspirecreativity .takeaway h4 {margin:10px 0 0 40px;padding:0 0 0 20px;background:rgba(247,143,37,1);color:#fff;font:21px Arial;text-transform:uppercase;font-weight:100;letter-spacing:1px;line-height:26px} .inspirecreativity .takeaway ul li {list-style-type:disk;margin:5px 10px 0 30px;padding:0} .inspirecreativity .takeaway li {font:14px Tahoma;color:#fff;line-height:16px;letter-spacing:1px} .inspirecreativity p.no-indent { text-indent : 0px; } .inspirecreativity span.drop-cap { font-size : 4.693em; float : left; line-height : 1; margin-top : -0.07em; margin-right : 0.05em; margin-bottom : -0.204em; font-family : "Oswald", sans-serif; font-stretch : ultra-condensed; font-weight : normal; font-style : normal; color:rgba(232,106,76,1) } .inspirecreativity span.one {color:rgba(247,143,37,1)} .inspirecreativity span.two {color:rgba(210,35,42,1)} .inspirecreativity span.three {color:rgba(65,173,73,1)} .inspirecreativity span.four {color:rgba(0,70,127,1)} /* CSS */ /* GUI CSS */ /* END GUI CSS */ .rebranding p {text-indent:0;margin:0 0 5px 0} .rebranding p.credits {text-indent:0;text-align:left;color:grey;font-size:90%;margin:40px 0 0 0} .rebranding h1 {font-size:44px;color:#000;font-weight:600} .rebranding h1 span {color:rgba(0,174,239,1)} .rebranding .titlearea {font-size:14px;color:rgba(138,158,163,1);margin:10px 0 0 0} .rebranding .titleauthor {text-align:right;margin:10px 20px 20px 0;font:14px Calibri;color:#333} .rebranding .titleauthor span {color:rgba(0,70,127,1);text-transform:uppercase;font-style:italic} .rebranding .question {color:rgba(0,93,166,1);text-transform:uppercase;margin:10px 0 0 0;text-indent:0;text-align:left;font-size:90%} .rebranding ul, ol {list-style-position:inside;color:rgba(0,135,186,1)} .rebranding ol li p, ul li p {color:#000;text-indent:0;font-size:100%} .rebranding ul li {list-style-type:disc} .rebranding h3 {font:18px;color:rgba(232,108,76,1);text-transform:uppercase;margin:20px 0 0 0px;font-weight:500;font-style:italic} .rebranding .pullquote {font:24px Georgia;color:#333;font-style:italic; padding-left: 20px; margin-bottom: 20px;} .rebranding .takeaway {background:rgba(0,118,194,1);padding:15px 0 15px 0;margin:0 0 0 20px;display:block} .rebranding .takeaway h4 {margin:10px 0 0 40px;padding:0 0 0 20px;background:rgba(247,143,37,1);color:#fff;font:21px Arial;text-transform:uppercase;font-weight:100;letter-spacing:1px;line-height:26px} .rebranding .takeaway ul li {list-style-type:disk;margin:5px 10px 0 40px;padding:0} .rebranding .takeaway li {font:14px Tahoma;color:#fff;line-height:16px;letter-spacing:1px} .rebranding p.no-indent { text-indent : 0px; } .rebranding span.drop-cap { font-size : 4.693em; float : left; line-height : 1; margin-top : -0.07em; margin-right : 0.05em; margin-bottom : -0.204em; font-family : "Oswald", sans-serif; font-stretch : ultra-condensed; font-weight : normal; font-style : normal; color:rgba(232,106,76,1) } /* CSS */ /* GUI CSS */ /* END GUI CSS */ .makingthemost p {text-indent:0;margin:0 0 3px 0} .makingthemost p.credits {text-indent:0;text-align:left;color:grey;font-size:90%;margin:40px 0 0 0} .makingthemost.iphone.horizontal h1 {font-size:30px;color:rgba(0,70,127,1);font-weight:200} .makingthemost h1 {font-size:44px;color:rgba(0,70,127,1);font-weight:600} .makingthemost h1 span {color:rgba(0,135,186,1)} .makingthemost.iphone .titlearea {font-size:14px;color:rgba(138,158,163,1);margin:10px 20px 0 10px} .makingthemost .titlearea {font-size:14px;color:rgba(138,158,163,1);margin:10px 0 0 10px} .makingthemost .titleauthor {text-align:right;margin:10px 20px 20px 0;font:14px Calibri;color:#333} .makingthemost .titleauthor span {color:rgba(0,70,127,1);text-transform:uppercase;font-style:italic} .makingthemost .question {color:rgba(0,70,127,1);text-transform:uppercase;margin:10px 0 0 0;text-indent:0;text-align:left} .makingthemost ul, ol {list-style-position: inside;margin:10px 0 10px 0} .makingthemost ul li p {color:#000;text-indent:0} .makingthemost ul li {list-style-type:disc;margin:0 0 0 20px} .makingthemost h3 {font:18px;color:rgba(196,22,28,1);text-transform:uppercase;margin:20px 0 0 20px;font-weight:500} .makingthemost .pullquote {font:24px Georgia;color:#333;font-style:italic; padding-left: 20px; margin-bottom: 20px;} .makingthemost hr {border:0;height:1px;background:#666} .makingthemost small {font:12px;font-style:italic;color:#333} .makingthemost small a {text-decoration:none} .makingthemost .takeaway {background:rgba(120,192,127,.4);padding:15px 0 15px 0;margin:0 0 0 20px;display:block} .makingthemost .takeaway h4 {margin:10px 0 0 40px;padding:0 0 0 20px;background:#000;color:#fff;font:21px Arial;text-transform:uppercase;font-weight:100;letter-spacing:1px;line-height:26px} .makingthemost .takeaway ul li {list-style-type:disk;margin:5px 10px 0 40px;padding:0} .makingthemost .takeaway li {font:14px Tahoma;color:#000;line-height:16px;letter-spacing:1px} .makingthemost p.no-indent { text-indent : 0px; } .makingthemost span.drop-cap { font-size : 4.693em; float : left; line-height : 1; margin-top : -0.07em; margin-right : 0.05em; margin-bottom : -0.204em; font-family : "Oswald", sans-serif; font-stretch : ultra-condensed; font-weight : normal; font-style : normal; color:rgba(232,106,76,1) } /* CSS */ /* GUI CSS */ /* END GUI CSS */ .doyouhaveanapp p {text-indent:10px} .doyouhaveanapp p.credits {text-indent:0;text-align:left;color:grey;font-size:90%;margin:40px 0 0 0} .doyouhaveanapp h1 {font-size:44px;color:#000;font-weight:600;border-right:4px double rgba(0,135,186,1)} .doyouhaveanapp h1 span {color:rgba(0,135,186,1)} .doyouhaveanapp .titlearea {font-size:14px;color:rgba(138,158,163,1);margin:10px 0 0 20px} .doyouhaveanapp .titleauthor {text-align:right;margin:10px 20px 20px 0;font:14px Calibri;color:#333} .doyouhaveanapp .titleauthor span {color:rgba(0,70,127,1);text-transform:uppercase;font-style:italic} .doyouhaveanapp .question {color:rgba(0,70,127,1);text-transform:uppercase;margin:10px 0 0 0;text-indent:0;text-align:left;font-size:90%} .doyouhaveanapp ul, ol {list-style-position:inside;color:rgba(0,135,186,1)} .doyouhaveanapp ol li p, ul li p {color:#000;text-indent:0;font-size:100%} .doyouhaveanapp ul li {list-style-type:disc} .doyouhaveanapp h3 {font:18px;color:rgba(232,108,76,1);text-transform:uppercase;margin:20px 0 0 0px;font-weight:500;font-style:italic} .doyouhaveanapp .pullquote {font:24px Georgia;color:#333;font-style:italic; padding-left: 20px; margin-bottom: 20px;} .doyouhaveanapp .takeaway {background:rgba(0,84,36,1);padding:15px 0 15px 0;margin:0 0 0 20px;display:block} .doyouhaveanapp .takeaway h4 {margin:10px 0 0 40px;padding:0 0 0 20px;background:rgba(120,192,127,1);color:#fff;font:21px Arial;text-transform:uppercase;font-weight:100;letter-spacing:1px;line-height:26px} .doyouhaveanapp .takeaway ul li {list-style-type:disk;margin:5px 10px 0 40px;padding:0} .doyouhaveanapp .takeaway li {font:14px Tahoma;color:#fff;line-height:16px;letter-spacing:1px} .doyouhaveanapp p.no-indent { text-indent : 0px; } .doyouhaveanapp span.drop-cap { font-size : 4.693em; float : left; line-height : 1; margin-top : -0.07em; margin-right : 0.05em; margin-bottom : -0.204em; font-family : "Oswald", sans-serif; font-stretch : ultra-condensed; font-weight : normal; font-style : normal; color:rgba(232,106,76,1) } .naylor .myAdFullPage { position: absolute; z-index: 999; left:0; width:100%; margin:0 auto; height:100%; background: #fff; padding:0%; text-align: center;} .naylor .sponsorship { position:absolute; top:0px; display: block; color:#fff; background:#000; width:100%; z-index:1000; text-align:center; padding-top:20px;} .naylor .iPhone .myAdFullPage { top:68px; } .naylor .iPad .myAdFullPage { top:68px; } .naylor .iPod .myAdFullPage { top:68px; } .naylor .backPage { position:absolute; bottom:-5px; left:5px; cursor: pointer; z-index: 1000;} .naylor .nextPage { position:absolute; bottom:-5px; right:5px; cursor: pointer; z-index: 1000;} .naylor .header { background:#000; position:absolute; top:0; left:0; width:100%; z-index: 1000; padding-top:50px;} .naylor .iframeWrapper { overflow:auto; -webkit-overflow-scrolling: touch !important; height:95%;} .naylor.iphone.horizontal .iframeWrapper { height:82%;} .naylor.iphone.vertical .iframeWrapper { height:88%;} .naylor .footer { height:50px; background:#000; position:absolute; bottom:0; left:0; width:100%; z-index: 1000;} /* GUI CSS */ /* END GUI CSS */ /* CSS */ /* GUI CSS */ /* END GUI CSS */ .sponsorships p {text-indent:0;margin:0 0 5px 0} .sponsorships p.credits {text-indent:0;text-align:left;color:grey;font-size:90%;margin:40px 0 0 0} .sponsorships.iphone h1 {font:24px Arial;color:#000;font-weight:400} .sponsorships.w1 h1 {font:24px Arial;color:#000;font-weight:400} .sponsorships h1 {font:60px Arial;color:#000;font-weight:400} .sponsorships h1 span {color:rgba(0,135,186,1)} .sponsorships h2 {font:40px Arial;color:#000;font-weight:300;margin:-5px 0 0 40px;padding:0} .sponsorships h2 span {color:rgba(0,135,186,1)} .sponsorships.iphone .titlearea {font-size:14px;color:rgba(138,158,163,1);margin:10px 20px 0 20px} .sponsorships .titlearea {font-size:14px;color:rgba(138,158,163,1);margin:10px 0 0 20px} .sponsorships .titleauthor {text-align:right;margin:10px 20px 20px 0;font:14px Calibri;color:#333} .sponsorships .titleauthor span {color:rgba(0,70,127,1);text-transform:uppercase;font-style:italic} .sponsorships .question {color:rgba(0,70,127,1);text-transform:uppercase;margin:10px 0 0 0;text-indent:0;text-align:left} .sponsorships ul, ol {list-style-position: inside;margin:5px 0 5px 0;display:block;padding:0 0 0 30px} .sponsorships ol li {color:rgba(0,174,239,1)} .sponsorships ul li {list-style-type:disc;margin:0;padding:0} .sponsorships span.list {color:#000} .sponsorships h3 {font:18px;color:rgba(232,108,76,1);text-transform:uppercase;margin:20px 0 0 0px;font-weight:500;font-style:italic} .sponsorships .pullquote {font:20px Georgia;color:#333;font-style:italic;padding:0 0 0 30px;margin:0;text-align:left;display:block} .sponsorships .quotewho {font:10px;font-style:italic;color:grey;text-align:left;display:block;text-align:right;margin:10px 0 0 0} .sponsorships .takeaway {background:rgba(0,84,36,1);padding:15px 0 15px 0;margin:0 0 0 20px;display:block} .sponsorships .takeaway h4 {margin:10px 0 0 40px;padding:0 0 0 20px;background:rgba(120,192,127,1);color:#fff;font:21px Arial;text-transform:uppercase;font-weight:100;letter-spacing:1px;line-height:26px} .sponsorships .takeaway ul li {list-style-type:disk;margin:5px 10px 0 40px;padding:0} .sponsorships .takeaway li {font:14px Tahoma;color:#fff;line-height:16px;letter-spacing:1px} .sponsorships p.no-indent { text-indent : 0px; } .sponsorships span.drop-cap { font-size : 4.693em; float : left; line-height : 1; margin-top : -0.07em; margin-right : 0.05em; margin-bottom : -0.204em; font-family : "Oswald", sans-serif; font-stretch : ultra-condensed; font-weight : normal; font-style : normal; color:rgba(232,106,76,1) } /* CSS */ /* GUI CSS */ /* END GUI CSS */ .duesrevenueefforts p {text-indent:0;margin:0 0 5px 0} .duesrevenueefforts p.credits {text-indent:0;text-align:left;color:grey;font-size:90%;margin:40px 0 0 0} .duesrevenueefforts h1 {font-size:44px;color:rgba(0,70,127,1);font-weight:600} .duesrevenueefforts h1 span {color:rgba(0,135,186,1)} .duesrevenueefforts .titlearea {font-size:14px;color:rgba(138,158,163,1);margin:10px 0 0 0} .duesrevenueefforts .titleauthor {text-align:right;margin:10px 20px 20px 0;font:14px Calibri;color:#333} .duesrevenueefforts .titleauthor span {color:rgba(0,70,127,1);text-transform:uppercase;font-style:italic} .duesrevenueefforts .question {color:rgba(0,93,166,1);text-transform:uppercase;margin:10px 0 0 0;text-indent:0;text-align:left;font-size:90%} .duesrevenueefforts ul, ol {list-style-position:inside;color:rgba(0,135,186,1)} .duesrevenueefforts ol li p, ul li p {color:#000;text-indent:0;font-size:100%} .duesrevenueefforts ul li {list-style-type:disc} .duesrevenueefforts h3 {font:18px;color:rgba(232,108,76,1);text-transform:uppercase;margin:20px 0 0 0px;font-weight:500;font-style:italic} .duesrevenueefforts .pullquote {font:24px Georgia;color:#333;font-style:italic; padding-left: 20px; margin-bottom: 20px;} .duesrevenueefforts .takeaway {background:rgba(0,118,194,1);padding:15px 0 15px 0;margin:0 0 0 20px;display:block} .duesrevenueefforts .takeaway h4 {margin:10px 0 0 40px;padding:0 0 0 20px;background:rgba(247,143,37,1);color:#fff;font:21px Arial;text-transform:uppercase;font-weight:100;letter-spacing:1px;line-height:26px} .duesrevenueefforts .takeaway ul li {list-style-type:disk;margin:5px 10px 0 40px;padding:0} .duesrevenueefforts .takeaway li {font:14px Tahoma;color:#fff;line-height:16px;letter-spacing:1px} .duesrevenueefforts p.no-indent { text-indent : 0px; } .duesrevenueefforts span.drop-cap { font-size : 4.693em; float : left; line-height : 1; margin-top : -0.07em; margin-right : 0.05em; margin-bottom : -0.204em; font-family : "Oswald", sans-serif; font-stretch : ultra-condensed; font-weight : normal; font-style : normal; color:rgba(232,106,76,1) } .duesrevenueefforts span.one {color:rgba(247,143,37,1)} .duesrevenueefforts span.two {color:rgba(210,35,42,1)} .duesrevenueefforts span.three {color:rgba(65,173,73,1)} .duesrevenueefforts span.four {color:rgba(0,70,127,1)} .beadvised .myAdFullPage { position: absolute; z-index: 999; left:0; width:100%; margin:0 auto; height:100%; background: #fff; padding:0%; text-align: center;} .beadvised .sponsorship { position:absolute; top:0px; display: block; color:#fff; background:#000; width:100%; z-index:1000; text-align:center; padding-top:20px;} .beadvised .iPhone .myAdFullPage { top:68px; } .beadvised .iPad .myAdFullPage { top:68px; } .beadvised .iPod .myAdFullPage { top:68px; } .beadvised .backPage { position:absolute; bottom:-5px; left:5px; cursor: pointer; z-index: 1000;} .beadvised .nextPage { position:absolute; bottom:-5px; right:5px; cursor: pointer; z-index: 1000;} .beadvised .header { background:#000; position:absolute; top:0; left:0; width:100%; z-index: 1000; padding-top:50px;} .beadvised .iframeWrapper { overflow:auto; -webkit-overflow-scrolling: touch !important; height:95%;} .beadvised.iphone.horizontal .iframeWrapper { height:82%;} .beadvised.iphone.vertical .iframeWrapper { height:88%;} .beadvised .footer { height:50px; background:#000; position:absolute; bottom:0; left:0; width:100%; z-index: 1000;} /* GUI CSS */ /* END GUI CSS */ /* CSS */ /* GUI CSS */ /* END GUI CSS */ .newvideoservice p {text-indent:0;margin:0 0 3px 0} .newvideoservice p.credits {text-indent:0;text-align:left;color:grey;font-size:90%;margin:40px 0 0 0} .newvideoservice h1 {font-size:44px;color:rgba(0,70,127,1);font-weight:600} .newvideoservice h1 span {color:rgba(0,135,186,1)} .newvideoservice .titlearea {font-size:14px;color:rgba(138,158,163,1);margin:10px 0 0 20px} .newvideoservice .titleauthor {text-align:right;margin:10px 20px 20px 0;font:14px Calibri;color:#333} .newvideoservice .titleauthor span {color:rgba(0,70,127,1);text-transform:uppercase;font-style:italic} .newvideoservice .question {color:rgba(0,70,127,1);text-transform:uppercase;margin:10px 0 0 0;text-indent:0;text-align:left;font-size:90%} .newvideoservice ul, ol {list-style-position:inside;color:rgba(0,135,186,1)} .newvideoservice ol li p, ul li p {color:#000;text-indent:0;font-size:100%} .newvideoservice ul li {list-style-type:disc} .newvideoservice h3 {font:18px;color:rgba(0,70,127,1);text-transform:uppercase;margin:0 0 20px 0;font-weight:500;font-style:italic;border-bottom:1px dashed rgba(0,70,127,1)} .newvideoservice .pullquote {font:24px Georgia;color:#333;font-style:italic; padding-left: 20px; margin-bottom: 20px;} .newvideoservice .takeaway {background:rgba(0,84,36,1);padding:15px 0 15px 0;margin:0 0 0 20px;display:block} .newvideoservice .takeaway h4 {margin:10px 0 0 40px;padding:0 0 0 20px;background:rgba(120,192,127,1);color:#fff;font:21px Arial;text-transform:uppercase;font-weight:100;letter-spacing:1px;line-height:26px} .newvideoservice .takeaway ul li {list-style-type:disk;margin:5px 10px 0 40px;padding:0} .newvideoservice .takeaway li {font:14px Tahoma;color:#fff;line-height:16px;letter-spacing:1px} .newvideoservice p.no-indent { text-indent : 0px; } .newvideoservice span.drop-cap { font-size : 4.693em; float : left; line-height : 1; margin-top : -0.07em; margin-right : 0.05em; margin-bottom : -0.204em; font-family : "Oswald", sans-serif; font-stretch : ultra-condensed; font-weight : normal; font-style : normal; color:rgba(232,106,76,1) } /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .grid.buzzing { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .buzzing.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/buzzing/buzzing_iPhone_port_articles.png") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .buzzing.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/buzzing/iPad_port_buzzing.png") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .buzzing.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/buzzing/buzzing_iPhone_port_articles.png") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .buzzing.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/buzzing/buzzing_iPhone_land_articles.png") center center no-repeat; background-size: contain;} } /* //////////////////////////////////////////////////////////// // 3-column //////////////////////////////////////////////////////////// */ .no-mobile .buzzing.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/buzzing/buzzing_iPad_land.png") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // 4-column //////////////////////////////////////////////////////////// */ .no-mobile .buzzing.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/buzzing/buzzing_iPad_land.png") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone vertical //////////////////////////////////////////////////////////// */ .buzzing.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/buzzing/buzzing_iPhone_port_articles.png") center center no-repeat;} /* //////////////////////////////////////////////////////////// // iPhone horizontal //////////////////////////////////////////////////////////// */ .buzzing.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/buzzing/buzzing_iPhone_land_articles.png") center center no-repeat;} /* //////////////////////////////////////////////////////////// // iPad vertical //////////////////////////////////////////////////////////// */ .buzzing.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/buzzing/iPad_port_buzzing.png") center center no-repeat;} /* //////////////////////////////////////////////////////////// // iPad horizontal //////////////////////////////////////////////////////////// */ .buzzing.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/buzzing/buzzing_iPad_land.png") center center no-repeat;} /* GUI CSS */ /* END GUI CSS */ /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .grid.communicationoverloadad { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .communicationoverloadad.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/communicationoverloadad/321x416.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .communicationoverloadad.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/communicationoverloadad/768x923.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .communicationoverloadad.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/communicationoverloadad/321x416.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .communicationoverloadad.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/communicationoverloadad/480x268.jpg") center center no-repeat; background-size: contain;} } /* //////////////////////////////////////////////////////////// // 3-column //////////////////////////////////////////////////////////// */ .no-mobile .communicationoverloadad.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/communicationoverloadad/1024x670.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // 4-column //////////////////////////////////////////////////////////// */ .no-mobile .communicationoverloadad.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/communicationoverloadad/1024x670.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone vertical //////////////////////////////////////////////////////////// */ .communicationoverloadad.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/communicationoverloadad/321x416.jpg") center center no-repeat;} /* //////////////////////////////////////////////////////////// // iPhone horizontal //////////////////////////////////////////////////////////// */ .communicationoverloadad.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/communicationoverloadad/480x268.jpg") center center no-repeat;} /* //////////////////////////////////////////////////////////// // iPad vertical //////////////////////////////////////////////////////////// */ .communicationoverloadad.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/communicationoverloadad/768x923.jpg") center center no-repeat;} /* //////////////////////////////////////////////////////////// // iPad horizontal //////////////////////////////////////////////////////////// */ .communicationoverloadad.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/communicationoverloadad/1024x670.jpg") center center no-repeat;} /* GUI CSS */ /* END GUI CSS */ /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .grid.aheadofthecurve { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .aheadofthecurve.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/aheadofthecurve/iPhone_port_curve.png") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .aheadofthecurve.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/aheadofthecurve/iPad_port_curve.png") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .aheadofthecurve.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/aheadofthecurve/iPhone_port_curve.png") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .aheadofthecurve.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/aheadofthecurve/iPhone_land_curve.png") center center no-repeat; background-size: contain;} } /* //////////////////////////////////////////////////////////// // 3-column //////////////////////////////////////////////////////////// */ .no-mobile .aheadofthecurve.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/aheadofthecurve/iPad_land_curve.png") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // 4-column //////////////////////////////////////////////////////////// */ .no-mobile .aheadofthecurve.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/aheadofthecurve/iPad_land_curve.png") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone vertical //////////////////////////////////////////////////////////// */ .aheadofthecurve.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/aheadofthecurve/iPhone_port_curve.png") center center no-repeat;} /* //////////////////////////////////////////////////////////// // iPhone horizontal //////////////////////////////////////////////////////////// */ .aheadofthecurve.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/aheadofthecurve/iPhone_land_curve.png") center center no-repeat;} /* //////////////////////////////////////////////////////////// // iPad vertical //////////////////////////////////////////////////////////// */ .aheadofthecurve.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/aheadofthecurve/iPad_port_curve.png") center center no-repeat;} /* //////////////////////////////////////////////////////////// // iPad horizontal //////////////////////////////////////////////////////////// */ .aheadofthecurve.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/naylor/associationadvisor/vol15issue1/aheadofthecurve/iPad_land_curve.png") center center no-repeat;} /* GUI CSS */ /* END GUI CSS */ /* Animate.css - http://daneden.me/animate Licensed under the ☺ license (http://licence.visualidiot.com/) Copyright (c) 2012 Dan Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ -webkit-backface-visibility: hidden; } .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-moz-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-o-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; -moz-animation-name: flash; -o-animation-name: flash; animation-name: flash; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); } } @-moz-keyframes shake { 0%, 100% { -moz-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -moz-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -moz-transform: translateX(10px); } } @-o-keyframes shake { 0%, 100% { -o-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -o-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -o-transform: translateX(10px); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } .shake { -webkit-animation-name: shake; -moz-animation-name: shake; -o-animation-name: shake; animation-name: shake; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); } } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); } 40% { -moz-transform: translateY(-30px); } 60% { -moz-transform: translateY(-15px); } } @-o-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -o-transform: translateY(0); } 40% { -o-transform: translateY(-30px); } 60% { -o-transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); } } @-moz-keyframes tada { 0% { -moz-transform: scale(1); } 10%, 20% { -moz-transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -moz-transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -moz-transform: scale(1.1) rotate(-3deg); } 100% { -moz-transform: scale(1) rotate(0); } } @-o-keyframes tada { 0% { -o-transform: scale(1); } 10%, 20% { -o-transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -o-transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -o-transform: scale(1.1) rotate(-3deg); } 100% { -o-transform: scale(1) rotate(0); } } @keyframes tada { 0% { transform: scale(1); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; -moz-animation-name: tada; -o-animation-name: tada; animation-name: tada; } @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); } } @-moz-keyframes swing { 20% { -moz-transform: rotate(15deg); } 40% { -moz-transform: rotate(-10deg); } 60% { -moz-transform: rotate(5deg); } 80% { -moz-transform: rotate(-5deg); } 100% { -moz-transform: rotate(0deg); } } @-o-keyframes swing { 20% { -o-transform: rotate(15deg); } 40% { -o-transform: rotate(-10deg); } 60% { -o-transform: rotate(5deg); } 80% { -o-transform: rotate(-5deg); } 100% { -o-transform: rotate(0deg); } } @keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -moz-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; -moz-animation-name: swing; -o-animation-name: swing; animation-name: swing; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); } } @-moz-keyframes wobble { 0% { -moz-transform: translateX(0%); } 15% { -moz-transform: translateX(-25%) rotate(-5deg); } 30% { -moz-transform: translateX(20%) rotate(3deg); } 45% { -moz-transform: translateX(-15%) rotate(-3deg); } 60% { -moz-transform: translateX(10%) rotate(2deg); } 75% { -moz-transform: translateX(-5%) rotate(-1deg); } 100% { -moz-transform: translateX(0%); } } @-o-keyframes wobble { 0% { -o-transform: translateX(0%); } 15% { -o-transform: translateX(-25%) rotate(-5deg); } 30% { -o-transform: translateX(20%) rotate(3deg); } 45% { -o-transform: translateX(-15%) rotate(-3deg); } 60% { -o-transform: translateX(10%) rotate(2deg); } 75% { -o-transform: translateX(-5%) rotate(-1deg); } 100% { -o-transform: translateX(0%); } } @keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; -moz-animation-name: wobble; -o-animation-name: wobble; animation-name: wobble; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); } 50% { -moz-transform: scale(1.1); } 100% { -moz-transform: scale(1); } } @-o-keyframes pulse { 0% { -o-transform: scale(1); } 50% { -o-transform: scale(1.1); } 100% { -o-transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .pulse { -webkit-animation-name: pulse; -moz-animation-name: pulse; -o-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -webkit-animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -webkit-animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) scale(1); -webkit-animation-timing-function: ease-in; } } @-moz-keyframes flip { 0% { -moz-transform: perspective(400px) rotateY(0); -moz-animation-timing-function: ease-out; } 40% { -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-animation-timing-function: ease-out; } 50% { -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-animation-timing-function: ease-in; } 80% { -moz-transform: perspective(400px) rotateY(360deg) scale(0.95); -moz-animation-timing-function: ease-in; } 100% { -moz-transform: perspective(400px) scale(1); -moz-animation-timing-function: ease-in; } } @-o-keyframes flip { 0% { -o-transform: perspective(400px) rotateY(0); -o-animation-timing-function: ease-out; } 40% { -o-transform: perspective(400px) translateZ(150px) rotateY(170deg); -o-animation-timing-function: ease-out; } 50% { -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-animation-timing-function: ease-in; } 80% { -o-transform: perspective(400px) rotateY(360deg) scale(0.95); -o-animation-timing-function: ease-in; } 100% { -o-transform: perspective(400px) scale(1); -o-animation-timing-function: ease-in; } } @keyframes flip { 0% { transform: perspective(400px) rotateY(0); animation-timing-function: ease-out; } 40% { transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; } 50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; } 80% { transform: perspective(400px) rotateY(360deg) scale(0.95); animation-timing-function: ease-in; } 100% { transform: perspective(400px) scale(1); animation-timing-function: ease-in; } } .flip { -webkit-backface-visibility: visible !important; -webkit-animation-name: flip; -moz-backface-visibility: visible !important; -moz-animation-name: flip; -o-backface-visibility: visible !important; -o-animation-name: flip; backface-visibility: visible !important; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateX(-10deg); } 70% { -moz-transform: perspective(400px) rotateX(10deg); } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-o-keyframes flipInX { 0% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateX(-10deg); } 70% { -o-transform: perspective(400px) rotateX(10deg); } 100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInX; -moz-backface-visibility: visible !important; -moz-animation-name: flipInX; -o-backface-visibility: visible !important; -o-animation-name: flipInX; backface-visibility: visible !important; animation-name: flipInX; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-moz-keyframes flipOutX { 0% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-o-keyframes flipOutX { 0% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; -webkit-backface-visibility: visible !important; -moz-animation-name: flipOutX; -moz-backface-visibility: visible !important; -o-animation-name: flipOutX; -o-backface-visibility: visible !important; animation-name: flipOutX; backface-visibility: visible !important; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-moz-keyframes flipInY { 0% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateY(-10deg); } 70% { -moz-transform: perspective(400px) rotateY(10deg); } 100% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-o-keyframes flipInY { 0% { -o-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateY(-10deg); } 70% { -o-transform: perspective(400px) rotateY(10deg); } 100% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } 100% { transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInY; -moz-backface-visibility: visible !important; -moz-animation-name: flipInY; -o-backface-visibility: visible !important; -o-animation-name: flipInY; backface-visibility: visible !important; animation-name: flipInY; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-moz-keyframes flipOutY { 0% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-o-keyframes flipOutY { 0% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipOutY; -moz-backface-visibility: visible !important; -moz-animation-name: flipOutY; -o-backface-visibility: visible !important; -o-animation-name: flipOutY; backface-visibility: visible !important; animation-name: flipOutY; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translateY(-20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUpBig { 0% { opacity: 0; -moz-transform: translateY(2000px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUpBig { 0% { opacity: 0; -o-transform: translateY(2000px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; transform: translateY(2000px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; -moz-animation-name: fadeInUpBig; -o-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDownBig { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDownBig { 0% { opacity: 0; -o-transform: translateY(-2000px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; transform: translateY(-2000px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; -moz-animation-name: fadeInDownBig; -o-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeftBig { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeftBig { 0% { opacity: 0; -o-transform: translateX(-2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translateX(-2000px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; -moz-animation-name: fadeInLeftBig; -o-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRightBig { 0% { opacity: 0; -moz-transform: translateX(2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRightBig { 0% { opacity: 0; -o-transform: translateX(2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; transform: translateX(2000px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; -moz-animation-name: fadeInRightBig; -o-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); } } @-moz-keyframes fadeOutUp { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-20px); } } @-o-keyframes fadeOutUp { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; -moz-animation-name: fadeOutUp; -o-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); } } @-moz-keyframes fadeOutDown { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(20px); } } @-o-keyframes fadeOutDown { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; -moz-animation-name: fadeOutDown; -o-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); } } @-moz-keyframes fadeOutLeft { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-20px); } } @-o-keyframes fadeOutLeft { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; -moz-animation-name: fadeOutLeft; -o-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); } } @-moz-keyframes fadeOutRight { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(20px); } } @-o-keyframes fadeOutRight { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; -moz-animation-name: fadeOutRight; -o-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @-moz-keyframes fadeOutUpBig { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-2000px); } } @-o-keyframes fadeOutUpBig { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; -moz-animation-name: fadeOutUpBig; -o-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @-moz-keyframes fadeOutDownBig { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(2000px); } } @-o-keyframes fadeOutDownBig { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; -moz-animation-name: fadeOutDownBig; -o-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @-moz-keyframes fadeOutLeftBig { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-2000px); } } @-o-keyframes fadeOutLeftBig { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; -moz-animation-name: fadeOutLeftBig; -o-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @-moz-keyframes fadeOutRightBig { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(2000px); } } @-o-keyframes fadeOutRightBig { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; -moz-animation-name: fadeOutRightBig; -o-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(0.3); } 50% { opacity: 1; -moz-transform: scale(1.05); } 70% { -moz-transform: scale(0.9); } 100% { -moz-transform: scale(1); } } @-o-keyframes bounceIn { 0% { opacity: 0; -o-transform: scale(0.3); } 50% { opacity: 1; -o-transform: scale(1.05); } 70% { -o-transform: scale(0.9); } 100% { -o-transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInUp { 0% { opacity: 0; -moz-transform: translateY(2000px); } 60% { opacity: 1; -moz-transform: translateY(-30px); } 80% { -moz-transform: translateY(10px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes bounceInUp { 0% { opacity: 0; -o-transform: translateY(2000px); } 60% { opacity: 1; -o-transform: translateY(-30px); } 80% { -o-transform: translateY(10px); } 100% { -o-transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; transform: translateY(2000px); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInDown { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 60% { opacity: 1; -moz-transform: translateY(30px); } 80% { -moz-transform: translateY(-10px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes bounceInDown { 0% { opacity: 0; -o-transform: translateY(-2000px); } 60% { opacity: 1; -o-transform: translateY(30px); } 80% { -o-transform: translateY(-10px); } 100% { -o-transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-2000px); } 60% { opacity: 1; transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 60% { opacity: 1; -moz-transform: translateX(30px); } 80% { -moz-transform: translateX(-10px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes bounceInLeft { 0% { opacity: 0; -o-transform: translateX(-2000px); } 60% { opacity: 1; -o-transform: translateX(30px); } 80% { -o-transform: translateX(-10px); } 100% { -o-transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { opacity: 1; transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: translateX(2000px); } 60% { opacity: 1; -moz-transform: translateX(-30px); } 80% { -moz-transform: translateX(10px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes bounceInRight { 0% { opacity: 0; -o-transform: translateX(2000px); } 60% { opacity: 1; -o-transform: translateX(-30px); } 80% { -o-transform: translateX(10px); } 100% { -o-transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { opacity: 1; transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); } 25% { -webkit-transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); } } @-moz-keyframes bounceOut { 0% { -moz-transform: scale(1); } 25% { -moz-transform: scale(0.95); } 50% { opacity: 1; -moz-transform: scale(1.1); } 100% { opacity: 0; -moz-transform: scale(0.3); } } @-o-keyframes bounceOut { 0% { -o-transform: scale(1); } 25% { -o-transform: scale(0.95); } 50% { opacity: 1; -o-transform: scale(1.1); } 100% { opacity: 0; -o-transform: scale(0.3); } } @keyframes bounceOut { 0% { transform: scale(1); } 25% { transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(0.3); } } .bounceOut { -webkit-animation-name: bounceOut; -moz-animation-name: bounceOut; -o-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @-moz-keyframes bounceOutUp { 0% { -moz-transform: translateY(0); } 20% { opacity: 1; -moz-transform: translateY(20px); } 100% { opacity: 0; -moz-transform: translateY(-2000px); } } @-o-keyframes bounceOutUp { 0% { -o-transform: translateY(0); } 20% { opacity: 1; -o-transform: translateY(20px); } 100% { opacity: 0; -o-transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(20px); } 100% { opacity: 0; transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; -moz-animation-name: bounceOutUp; -o-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @-moz-keyframes bounceOutDown { 0% { -moz-transform: translateY(0); } 20% { opacity: 1; -moz-transform: translateY(-20px); } 100% { opacity: 0; -moz-transform: translateY(2000px); } } @-o-keyframes bounceOutDown { 0% { -o-transform: translateY(0); } 20% { opacity: 1; -o-transform: translateY(-20px); } 100% { opacity: 0; -o-transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(-20px); } 100% { opacity: 0; transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; -moz-animation-name: bounceOutDown; -o-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @-moz-keyframes bounceOutLeft { 0% { -moz-transform: translateX(0); } 20% { opacity: 1; -moz-transform: translateX(20px); } 100% { opacity: 0; -moz-transform: translateX(-2000px); } } @-o-keyframes bounceOutLeft { 0% { -o-transform: translateX(0); } 20% { opacity: 1; -o-transform: translateX(20px); } 100% { opacity: 0; -o-transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(20px); } 100% { opacity: 0; transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; -moz-animation-name: bounceOutLeft; -o-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @-moz-keyframes bounceOutRight { 0% { -moz-transform: translateX(0); } 20% { opacity: 1; -moz-transform: translateX(-20px); } 100% { opacity: 0; -moz-transform: translateX(2000px); } } @-o-keyframes bounceOutRight { 0% { -o-transform: translateX(0); } 20% { opacity: 1; -o-transform: translateX(-20px); } 100% { opacity: 0; -o-transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(-20px); } 100% { opacity: 0; transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; -moz-animation-name: bounceOutRight; -o-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateIn { 0% { -moz-transform-origin: center center; -moz-transform: rotate(-200deg); opacity: 0; } 100% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateIn { 0% { -o-transform-origin: center center; -o-transform: rotate(-200deg); opacity: 0; } 100% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { transform-origin: center center; transform: rotate(-200deg); opacity: 0; } 100% { transform-origin: center center; transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; -moz-animation-name: rotateIn; -o-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInUpLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInUpLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(90deg); opacity: 0; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; -moz-animation-name: rotateInUpLeft; -o-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInDownLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(-90deg); opacity: 0; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; -moz-animation-name: rotateInDownLeft; -o-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInUpRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInUpRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(-90deg); opacity: 0; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; -moz-animation-name: rotateInUpRight; -o-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInDownRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(90deg); opacity: 0; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; -moz-animation-name: rotateInDownRight; -o-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(200deg); opacity: 0; } } @-moz-keyframes rotateOut { 0% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: center center; -moz-transform: rotate(200deg); opacity: 0; } } @-o-keyframes rotateOut { 0% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: center center; -o-transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { transform-origin: center center; transform: rotate(0); opacity: 1; } 100% { transform-origin: center center; transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; -moz-animation-name: rotateOut; -o-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @-moz-keyframes rotateOutUpLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0; } } @-o-keyframes rotateOutUpLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; -moz-animation-name: rotateOutUpLeft; -o-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @-moz-keyframes rotateOutDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0; } } @-o-keyframes rotateOutDownLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; -moz-animation-name: rotateOutDownLeft; -o-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @-moz-keyframes rotateOutUpRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0; } } @-o-keyframes rotateOutUpRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; -moz-animation-name: rotateOutUpRight; -o-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @-moz-keyframes rotateOutDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0; } } @-o-keyframes rotateOutDownRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; -moz-animation-name: rotateOutDownRight; -o-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); opacity: 0; } } @-moz-keyframes hinge { 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 100% { -moz-transform: translateY(700px); opacity: 0; } } @-o-keyframes hinge { 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 100% { -o-transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 100% { transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; -moz-animation-name: hinge; -o-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } } @-moz-keyframes rollIn { 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } } @-o-keyframes rollIn { 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; -moz-animation-name: rollIn; -o-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); } } @-moz-keyframes rollOut { 0% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -moz-transform: translateX(100%) rotate(120deg); } } @-o-keyframes rollOut { 0% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -o-transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; -moz-animation-name: rollOut; -o-animation-name: rollOut; animation-name: rollOut; } /* originally authored by Angelo Rohit - https://github.com/angelorohit */ @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } } @-moz-keyframes lightSpeedIn { 0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } } @-o-keyframes lightSpeedIn { 0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; -moz-animation-name: lightSpeedIn; -o-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } .animated.lightSpeedIn { -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s; } /* originally authored by Angelo Rohit - https://github.com/angelorohit */ @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } } @-moz-keyframes lightSpeedOut { 0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } } @-o-keyframes lightSpeedOut { 0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; -moz-animation-name: lightSpeedOut; -o-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } .animated.lightSpeedOut { -webkit-animation-duration: 0.25s; -moz-animation-duration: 0.25s; -o-animation-duration: 0.25s; animation-duration: 0.25s; } /* originally authored by Angelo Rohit - https://github.com/angelorohit */ @-webkit-keyframes wiggle { 0% { -webkit-transform: skewX(9deg); } 10% { -webkit-transform: skewX(-8deg); } 20% { -webkit-transform: skewX(7deg); } 30% { -webkit-transform: skewX(-6deg); } 40% { -webkit-transform: skewX(5deg); } 50% { -webkit-transform: skewX(-4deg); } 60% { -webkit-transform: skewX(3deg); } 70% { -webkit-transform: skewX(-2deg); } 80% { -webkit-transform: skewX(1deg); } 90% { -webkit-transform: skewX(0deg); } 100% { -webkit-transform: skewX(0deg); } } @-moz-keyframes wiggle { 0% { -moz-transform: skewX(9deg); } 10% { -moz-transform: skewX(-8deg); } 20% { -moz-transform: skewX(7deg); } 30% { -moz-transform: skewX(-6deg); } 40% { -moz-transform: skewX(5deg); } 50% { -moz-transform: skewX(-4deg); } 60% { -moz-transform: skewX(3deg); } 70% { -moz-transform: skewX(-2deg); } 80% { -moz-transform: skewX(1deg); } 90% { -moz-transform: skewX(0deg); } 100% { -moz-transform: skewX(0deg); } } @-o-keyframes wiggle { 0% { -o-transform: skewX(9deg); } 10% { -o-transform: skewX(-8deg); } 20% { -o-transform: skewX(7deg); } 30% { -o-transform: skewX(-6deg); } 40% { -o-transform: skewX(5deg); } 50% { -o-transform: skewX(-4deg); } 60% { -o-transform: skewX(3deg); } 70% { -o-transform: skewX(-2deg); } 80% { -o-transform: skewX(1deg); } 90% { -o-transform: skewX(0deg); } 100% { -o-transform: skewX(0deg); } } @keyframes wiggle { 0% { transform: skewX(9deg); } 10% { transform: skewX(-8deg); } 20% { transform: skewX(7deg); } 30% { transform: skewX(-6deg); } 40% { transform: skewX(5deg); } 50% { transform: skewX(-4deg); } 60% { transform: skewX(3deg); } 70% { transform: skewX(-2deg); } 80% { transform: skewX(1deg); } 90% { transform: skewX(0deg); } 100% { transform: skewX(0deg); } } .wiggle { -webkit-animation-name: wiggle; -moz-animation-name: wiggle; -o-animation-name: wiggle; animation-name: wiggle; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } .animated.wiggle { -webkit-animation-duration: 0.75s; -moz-animation-duration: 0.75s; -o-animation-duration: 0.75s; animation-duration: 0.75s; } #jstwitter { font-family: georgia; line-height: 1em; font-size: 13px; color: #333333; padding: 10px 10px 10px 10px; } #jstwitter .tweet { margin: 0 auto 5px auto; padding: 0 0 15px 0; border-bottom: 1px dotted #ccc; } #jstwitter .tweet a { text-decoration: none; color: #13c9d0; } #jstwitter .tweet a:hover { text-decoration: underline; } #jstwitter .tweet .time { font-size: 10px; font-style: italic; color: #666666; } /* ========================================================================== CHROME Styles related to the chrome (interface) of the app. ========================================================================== */ .viewer { top: 0px; right: 30px; bottom: 0px; left: 30px; } .os-ipad .viewer { top: 0px; right: 0px; bottom: 0px; left: 0px; } .os-iphone .viewer { top: 0px; right: 0px; bottom: 0px; left: 0px; } .os-android .viewer { top: 0px; right: 0px; bottom: 0px; left: 0px; } #dialog_container { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; visibility: hidden; z-index: 4; } #dialog_container ::-webkit-scrollbar { -webkit-appearance: none; width: 12px; } #dialog_container ::-webkit-scrollbar-thumb { border-radius: 8px; background-color: rgba(255, 255, 255, 1); } .next.overlay { position: absolute; height: 100%; width: 32px; top: 0; right: -30px; z-index: 3; opacity: 0.8; background-color: #000000; background-image: url("../../core/interface/img/arrow_right.png"); bacground-attachment: fixed; background-repeat: no-repeat; background-position: center;} .next.overlay:hover { opacity: 1; } .prev.overlay { position: absolute; height: 100%; width: 32px; top: 0; left: -30px; opacity: 0.8; background-color: #000000; background-image: url("../../core/interface/img/arrow_left.png"); bacground-attachment: fixed; background-repeat: no-repeat; background-position: center; z-index: 3; } .prev.overlay:hover { opacity: 1; } .os-android .next.overlay:hover { background-color: rgba(0, 0, 0, 0);} .os-android .prev.overlay:hover { background-color: rgba(0, 0, 0, 0);} nav { display: block; position: absolute; z-index: 5; bottom: 0; height: 0; left: 0; right: 0; } .bottom_controls { position: absolute; bottom: 0px; left: 0px; right: 0px; height: 30px; z-index: 20; width: 64px; margin: auto; } .radial_controls { width: 60px; height: 20px; margin: 0 auto; padding: 0 0; z-index: 20; } .radial_inner { position: relative; display: inner-block; width: 60px; height: 20px; margin: 0 0; padding: 0 0; clear: both; z-index: 20; } .radial_toggle_btn { -webkit-transform: translate3d(0, 0, 0); background: url("../../core/interface/img/icons.png") no-repeat 0px -16px; width: 64px; height: 32px; text-indent: -9999px; border: none; position: absolute; display: block; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; transition: all 0.1s linear; position: absolute; left: 0px; top: 0px; } .radial_toggle_btn:hover { -webkit-transform: scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform: scale(1.1); /*Mozilla scale version*/ -o-transform: scale(1.1); /*Opera scale version*/ } .contents_btn { -webkit-transform: translate3d(0, 0, 0); background: url("../../core/interface/img/icons.png") no-repeat -63px 0px; width: 64px; height: 64px; text-indent: -9999px; border: none; position: absolute; display: block; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; transition: all 0.1s linear; left: -120px; top: -36px; } .contents_btn:hover { -webkit-transform: scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform: scale(1.1); /*Mozilla scale version*/ -o-transform: scale(1.1); /*Opera scale version*/ } .share_btn { -webkit-transform: translate3d(0, 0, 0); background: url("../../core/interface/img/icons.png") no-repeat -127px 0px; width: 64px; height: 64px; text-indent: -9999px; border: none; position: absolute; display: block; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; transition: all 0.1s linear; left: -70px; top: -95px; } .share_btn:hover { -webkit-transform: scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform: scale(1.1); /*Mozilla scale version*/ -o-transform: scale(1.1); /*Opera scale version*/ } .search_btn { -webkit-transform: translate3d(0, 0, 0); background: url("../../core/interface/img/icons.png") no-repeat -319px 0px; width: 64px; height: 64px; text-indent: -9999px; border: none; position: absolute; display: block; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; transition: all 0.1s linear; left: 0px; top: -118px; } .search_btn:hover { -webkit-transform: scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform: scale(1.1); /*Mozilla scale version*/ -o-transform: scale(1.1); /*Opera scale version*/ } .print_btn { -webkit-transform: translate3d(0, 0, 0); background: url("../../core/interface/img/icons.png") no-repeat -192px 0px; width: 64px; height: 64px; text-indent: -9999px; border: none; position: absolute; display: block; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; transition: all 0.1s linear; left: 70px; top: -95px; } .print_btn:hover { -webkit-transform: scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform: scale(1.1); /*Mozilla scale version*/ -o-transform: scale(1.1); /*Opera scale version*/ } .help_btn { -webkit-transform: translate3d(0, 0, 0); background: url("../../core/interface/img/icons.png") no-repeat -255px 0px; width: 64px; height: 64px; text-indent: -9999px; border: none; position: absolute; display: block; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; transition: all 0.1s linear; left: 120px; top: -36px; } .help_btn:hover { -webkit-transform: scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform: scale(1.1); /*Mozilla scale version*/ -o-transform: scale(1.1); /*Opera scale version*/ } .radial_button_hidden { left: 0px; top: 0px; } .lbscroll { -webkit-overflow-scrolling: touch !important; overflow: auto; overflow-x: hidden; } .lightbox { position: fixed; overflow: hidden; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; background: rgba(0, 0, 0, 0.5); } .lightbox .container { position: absolute; overflow: hidden; top: 0; right: 0; bottom: 0; left: 0; padding: 8px; background: black; padding-left: 0px; } /* ========================================================================== IPAD SPECIFIC CHROME STYLES Contains any chrome styling specific to the iPad. ========================================================================== */ .os-ipad button { -webkit-appearance: none; } /* ========================================================================== IPHONE SPECIFIC CHROME STYLES Contains any chrome styling specific to the iPhone (normal and retna) ========================================================================== */ .os-iphone button { -webkit-appearance: none; } .r16x9.w1, .container.w1 [ratio="16x9"] img { width: 308px; height: 173px; } .r16x9.w2, .container.w2 [ratio="16x9"] img { width: 634px; height: 357px; } .r16x9.w3, .container.w3 [ratio="16x9"] img { width: 960px; height: 540px; } .r16x9.w4, .container.w4 [ratio="16x9"] img { width: 1286px; height: 723px; } .r4x3.w1, .container.w1 [ratio="4x3"] img { width: 308px; height: 231px; } .r4x3.w2, .container.w2 [ratio="4x3"] img { width: 634px; height: 476px; } .r4x3.w3, .container.w3 [ratio="4x3"] img { width: 960px; height: 720px; } .r4x3.w4, .container.w4 [ratio="4x3"] img { width: 1286px; height: 965px; } .r5x4.w1, .container.w1 [ratio="5x4"] img { width: 308px; height: 246px; } .r5x4.w2, .container.w2 [ratio="5x4"] img { width: 634px; height: 507px; } .r5x4.w3, .container.w3 [ratio="5x4"] img { width: 960px; height: 768px; } .r5x4.w4, .container.w4 [ratio="5x4"] img { width: 1286px; height: 1029px; } .r1x1.w1, .container.w1 [ratio="1x1"] img { width: 308px; height: 308px; } .r1x1.w2, .container.w2 [ratio="1x1"] img { width: 634px; height: 634px; } .r1x1.w3, .container.w3 [ratio="1x1"] img { width: 960px; height: 960px; } .r1x1.w4, .container.w4 [ratio="1x1"] img { width: 1286px; height: 1286px; } .r4x5.w1, .container.w1 [ratio="4x5"] img { width: 308px; height: 385px; } .r4x5.w2, .container.w2 [ratio="4x5"] img { width: 634px; height: 793px; } .r4x5.w3, .container.w3 [ratio="4x5"] img { width: 960px; height: 1200px; } .r4x5.w4, .container.w4 [ratio="4x5"] img { width: 1286px; height: 1608px; } .r3x4.w1, .container.w1 [ratio="3x4"] img { width: 308px; height: 411px; } .r3x4.w2, .container.w2 [ratio="3x4"] img { width: 634px; height: 845px; } .r3x4.w3, .container.w3 [ratio="3x4"] img { width: 960px; height: 1280px; } .r3x4.w4, .container.w4 [ratio="3x4"] img { width: 1286px; height: 1715px; } .c1 { margin-left: 0px; } .c2 { margin-left: 326px; } .c3 { margin-left: 652px; } .c4 { margin-left: 978px; } .w1 { width: 308px; } .w2 { width: 634px; } .w3 { width: 960px; } .w4 { width: 1286px; } .w3.grid:not(.fixed):not(.sizetocontainer) { max-width: 1286px; } .w2.grid:not(.fixed):not(.sizetocontainer) { max-width: 960px; } .w1.grid:not(.fixed):not(.sizetocontainer) { max-width: 634px; } .lightbox .container[class*="single"] { width: 308px; } .lightbox .container[class*="double"] { width: 634px; } .lightbox .container[class*="triple"] { width: 960px; } .lightbox .container[class*="quad"] { width: 1286px; } .lightbox .container img { width: 100%; height: auto; } .column { width: 308px; font-size: 16px; line-height: 24px; } orientation-horizontal .column { width: 390px; } orientation-vertical .column { width: 200px; } .grid { position: absolute; overflow: hidden; z-index: 1; -webkit-backface-visibility: hidden; -webkit-font-smoothing: subpixel-antialiased; } .fixed.grid, .sizetocontainer.grid { max-width: none; max-height: none; min-width: none; min-height: none; } html.js .hidden, html.no-js .hidden { display: none; } .chrome, .viewer { position: absolute; display: block; } .chrome { bottom: 0; top: 0; left: 0; right: 0; overflow: hidden; } .container.scroll { position: absolute; overflow: auto; overflow-x: hidden; } .grid .scroll-fade:after { content: "\0020"; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; z-index: 3; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(white)); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), white); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), white); background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0), white); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), white); background-image: linear-gradient(top, rgba(255, 255, 255, 0), white); } .container .scroll { overflow: auto; width: 100%; height: 100%; padding-bottom: 40px; } ::-webkit-scrollbar { -webkit-appearance: none; width: 12px; } ::-webkit-scrollbar-thumb { border-radius: 8px; background-color: rgba(0, 0, 0, 0.5); } .touch ::-webkit-scrollbar { width: 3px; } html { font-size: 16px; line-height: 24px; font-family: sans-serif; color: #333333; background-color: #333666; background-image: url("../../core/interface/img/app_background.png"); } html, body { overflow: hidden; } h1, h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; word-wrap: break-word; } .column, .container { position: absolute; overflow: hidden; top: 32px; bottom: 32px; } .column { min-height: 72px; } #previousPage, #nextPage { opacity: 0.5; } #currentPage { } .os-android #previousPage { opacity: 1; } .os-android #nextPage { opacity: 1; } .grid.trimleft { padding-left: 0; } .grid.trimright { padding-right: 0; } figure { display: block; } .colapsed { position: absolute; } .topfix { top: 0; } .rightfix { right: 0; } .bottomfix { bottom: 0; top: auto; } .leftfix { left: 0; } .overflow { overflow: visible; } .error, .loading { position: absolute; } .error#nextPage, .error#previousPage, .loading#nextPage, .loading#previousPage { display: none; } .hidden, .microdata { display: none; } .group { position: absolute; top: 0; bottom: 0; padding: 0; } .center, .center * { text-align: center; } .nocap .caption { display: none; } .fill .caption { padding-left: 32px; padding-right: 32px; } .caption.left { text-align: left; } .caption.right { right: 0; text-align: right; } .insetcap .caption { position: absolute; } .insetcap.ul .caption { top: 0; left: 0; } .insetcap.ur .caption { top: 0; right: 0; } .insetcap.ll .caption { bottom: 0; left: 0; } .insetcap.lr .caption { bottom: 0; right: 0; } .fullbleed { position: absolute; bottom: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; width: auto; } .os-ipad, .os-ipad .grid, .os-iphone, .os-iphone .grid { -webkit-font-smoothing: antialiased; } html.offline .no-offline, html.offline [data-requires~="no-offline"] { display: none; } html.offline [data-requires~="offline"] { display: block; } html.no-offline [data-requires~="no-offline"] { display: block; } html.no-offline [data-requires~="offline"] { display: none; } .r { background: #ff9999 !important; } .g { background: #99ff99 !important; } .b { background: #9999ff !important; } .c { background: #99ffff !important; } .m { background: #ff99ff !important; } .y { background: #ffff99 !important; } .ad.grid.w1 { width: 100px; } .ad.grid.w2 { width: 200px; } .ad.grid.w3 { width: 300px; } .ad.grid.w4 { width: 400px; } .ad.grid.w5 { width: 500px; } .ad.grid.w6 { width: 600px; } .ad.grid.w7 { width: 700px; } .ad.grid.w8 { width: 800px; } .ad.grid.w9 { width: 900px; } .ad.grid.w10 { width: 1000px; } .ad.grid.w11 { width: 1100px; } .ad.grid.w12 { width: 1200px; } .ad.grid { background: none; } .grid.ipad { min-width: 99999px; width: 99999px; margin: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; border: none; } .os-ipad .grid { min-width: 99999px; width: 99999px; opacity: 1 !important; } .os-ipad .grid.fixed.ipad.horizontal { height: 644px; width: 960px; min-width: 960px; padding: 0 32px; } .os-ipad .grid.fixed.ipad.vertical { height: 900px; width: 634px; min-width: 634px; padding: 0 67px; } .os-ipad.fullscreen .grid.fixed.ipad.horizontal { height: 748px; } .os-ipad.fullscreen .grid.fixed.ipad.vertical { height: 1004px; } .grid.iphone { min-width: 99999px; width: 99999px; margin: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; border: none; } .os-iphone .vertical div { line-height: 16px; font-size: 12px; } .os-iphone .vertical div.column { width: 300px; } .os-iphone .vertical p { line-height: 16px; font-size: 12px; } .os-iphone .horizontal div { line-height: 16px; font-size: 12px; } .os-iphone .horizontal div.column { width: 460px; } .os-iphone .horizontal p { line-height: 16px; font-size: 12px; } .os-iphone .grid { min-width: 99999px; width: 99999px; opacity: 1 !important; } .os-iphone .grid.fixed.iphone.horizontal { height: 268px; width: 480px; min-width: 468px; padding: 0px 0px; } .os-iphone .grid.fixed.iphone.horizontal .container { width: 480px; } .os-iphone .grid.fixed.iphone.vertical { height: 416px; width: 320px; min-width: 308px; padding: 0px 0px; } .os-iphone.fullscreen .grid.fixed.iphone.horizontal { height: 300px; } .os-iphone.fullscreen .grid.fixed.iphone.vertical { height: 460px; } .os-iphone.fullscreen .grid.fixed.iphone.vertical div.column { width: 300px; } .ipc1 { margin-left: 0; } .ipw_v { width: 300px; } .ipw_h { width: 460px; } .grid.ipod { min-width: 99999px; width: 99999px; margin: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; border: none; } .os-ipod div { font-size: 12px; } .os-ipod .grid { min-width: 99999px; width: 99999px; opacity: 1 !important; } .os-ipod .grid.fixed.ipod.horizontal { height: 268px; width: 960px; min-width: 960px; padding: 0 -460px; } .os-ipod .grid.fixed.ipod.vertical { height: 416px; width: 960px; min-width: 960px; padding: 0 -466.667px; } .os-ipod.fullscreen .grid.fixed.ipod.horizontal { height: 300px; } .os-ipod.fullscreen .grid.fixed.ipod.vertical { height: 460px; } .contents_panel { z-index: 1; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; display: none; } .contents_panel h1 { margin-left: 8px; } .contents_panel .lFloatclear { float: left; clear: both; } .contents_panel .clearDiv { height: 0; clear: both; } .contents_panel .contentslist { background: #000; padding-top: 10px; max-width: 422px; margin: 1.5em auto 1.5em; position: relative; } .contents_panel .contentitem { background: #303030; background: -webkit-linear-gradient(top, #303030, #242424); background: -moz-linear-gradient(top, #303030, #242424); background: -o-linear-gradient(top, #303030, #242424); background: -ms-linear-gradient(top, #303030, #242424); background: linear-gradient(top, #303030, #242424); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#303030', endColorstr='#242424'); max-width: 422px; cursor: pointer; border-top: 1px solid #4d4d4d; border-bottom: 2px solid #000; margin-bottom: 0px; margin-left: 8px; margin-right: 8px; padding: 8px 8px 8px 8px; cursor: pointer; } .contents_panel .contentitem:hover, .contents_panel .contentitem:active { background: #242424; background: -webkit-linear-gradient(top, #242424, #303030); background: -moz-linear-gradient(top, #242424, #303030); background: -o-linear-gradient(top, #242424, #303030); background: -ms-linear-gradient(top, #242424, #303030); background: linear-gradient(top, #242424, #303030); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#242424', endColorstr='#303030'); } .contents_panel .contentitem img { cursor: pointer; width: 64px; height: 64px; float: right; margin-left: 8px; margin-bottom: 8px; } .contents_panel .contenttitle { display: block; font-weight: lighter; font-size: 1em; color: #aeaeae; padding: 5px 8px 5px 0; cursor: pointer; } .contents_panel .tocDesc { display: block; padding: 0; margin: 0; line-height: 1.25em; color: #909090; font-size: .75em; margin-right: 80px; text-align: left; } .contents_panel .author { float: right; clear: both; color: #909090; padding: 0; margin: 0; font-size: 75%; font-style: italic; } .os-iphone .contents_thumb { display: none; } .share_panel .addthis_text { color: #dfdfdf; } .share_panel .addthis_toolbox a { display: block; float: left; width: 45%; margin: 0 0 1px 2%; padding: 1%; font-size: 85%; white-space: nowrap; line-height: 33px; border-top: 1px solid #4d4d4d; border-bottom: 2px solid #000; background: #303030; background: -webkit-linear-gradient(top, #303030, #242424); background: -moz-linear-gradient(top, #303030, #242424); background: -o-linear-gradient(top, #303030, #242424); background: -ms-linear-gradient(top, #303030, #242424); background: linear-gradient(top, #303030, #242424); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#303030', endColorstr = '#242424'); } .share_panel .addthis_toolbox a:hover { background: #242424; background: -webkit-linear-gradient(top, #242424, #303030); background: -moz-linear-gradient(top, #242424, #303030); background: -o-linear-gradient(top, #242424, #303030); background: -ms-linear-gradient(top, #242424, #303030); background: linear-gradient(top, #242424, #303030); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#242424', endColorstr = '#303030'); } .share_panel .action { float: left; margin-right: 20px; color: #dfdfdf; vertical-align: baseline; } .share_panel #yourmessage { width: 100%; } .share_panel .share { display: block; min-width: 200px; float: left; margin-bottom: 10px; } .share_panel label { display: block; font-size: 100%; margin-top: 10px; } .share_panel .url { font-size: 75%; line-height: 8px; } .help_panel .fingerSwipe { height: 100px; margin: 3px; } .help_panel .fingerSwipe img { width: 100px; height: 100px; } .help_panel .fingerSwipe h4 { margin: 30px 30px; } .search_panel .search2 { display: none; } .search_panel .search { width: 99%; position: relative; } .search_panel .action { float: left; margin-right: 20px; color: #dfdfdf; vertical-align: baseline; } .search_panel #searchtype { padding: 3px; } .search_panel input, .search_panel label { vertical-align: baseline; } .search_panel label { margin-left: 10px; } .search_panel .searchoptions { float: left; margin-top: 24px; margin-bottom: 24px; } .search_panel .previousblock { float: left; position: relative; left: -20px; } .search_panel .nextblock { float: right; position: relative; right: -20px; } .search_panel .previousblock p, .search_panel .nextblock p, .search_panel .previousblock img, .search_panel .nextblock img { display: block; float: left; text-indent: 0; margin-right: 6px; color: #dfdfdf; font-variant: small-caps; } .search_panel .contentslist { background: #000; padding: 30px; padding-top: 10px; max-width: 422px; margin: 1.5em auto 1.5em; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position: relative; } .search_panel .contentitem { background: #303030; background: -webkit-linear-gradient(top, #303030, #242424); background: -moz-linear-gradient(top, #303030, #242424); background: -o-linear-gradient(top, #303030, #242424); background: -ms-linear-gradient(top, #303030, #242424); background: linear-gradient(top, #303030, #242424); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#303030', endColorstr = '#242424'); max-width: 422px; cursor: pointer; border-top: 1px solid #4d4d4d; border-bottom: 2px solid #000; margin-bottom: 1px; margin-left: 8px; margin-right: 8px; padding: 8px 8px 8px 8px; cursor: pointer; } .search_panel .contentitem:hover, .search_panel .contentitem:active { background: #242424; background: -webkit-linear-gradient(top, #242424, #303030); background: -moz-linear-gradient(top, #242424, #303030); background: -o-linear-gradient(top, #242424, #303030); background: -ms-linear-gradient(top, #242424, #303030); background: linear-gradient(top, #242424, #303030); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#242424', endColorstr = '#303030'); } .search_panel .contentitem img { cursor: pointer; width: 64px; height: 64px; float: right; margin-left: 8px; margin-bottom: 8px; } .search_panel .contenttitle { display: block; font-weight: lighter; font-size: 1em; color: #aeaeae; padding: 5px 8px 5px 0; cursor: pointer; } .search_panel .h_divider { background: url(../../img/h-divider-gradient.png) no-repeat; max-width: 422px; height: 3px; margin-top: 9px; margin-bottom: 9px; } .search_panel .resultdesc { display: block; padding: 0; margin: 0; line-height: 1.25em; color: #909090; font-size: .75em; margin-right: 80px; text-align: left; } .search_panel .resultsTitle { margin-bottom: 24px; color: #909090; font-size: 75%; margin: 5px 8px; } .search_panel .keyword { color: #CC3333; } /*** VARIABLES ***/ /*************************************************/ .articlebarholder { position: absolute; height: 16px; left: 36px; right: 36px; top: 0px; padding: 0px 0px; padding-bottom: 4px; margin: 0px 0px; z-index: 10; text-align: center; background-color: #333; border: solid 1px #333; border-bottom: none; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } .articlebar_line { position: absolute; left: 3px; right: 3px; padding: 3px; margin: 0px auto; } .os-android .articlebarholder { visibility: hidden;} .os-iphone .articlebarholder { visibility: hidden;} .os-ipad .articlebarholder { visibility: hidden;} .os-android .articlebar_line { visibility: hidden; } .os-iphone .articlebar_line { visibility: hidden; } .os-ipad .articlebar_line { visibility: hidden; } .articlebar_article, .articlebar_indicator { box-sizing: border-box; -moz-box-sizing: border-box; float: left; top: -4px; height: 14px; background-color: #666666; border: solid 1px #333; border-top: none; border-bottom: none; -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; font-size: 10px; color: #000; line-height: 12px; font-weight: bold; text-align: center; background-color: #666666; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#737373', endColorstr='#595959'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#737373', endColorstr='#595959'); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(1, #8c8c8c), color-stop(0.5, #666666), color-stop(0.49, #595959)); background-image: -webkit-linear-gradient(top, #8c8c8c 0%, #666666 50%, #595959 51%, #595959 100%); background-image: -moz-linear-gradient(top, #8c8c8c 0%, #666666 50%, #595959 51%, #595959 100%); background-image: linear-gradient(top, #8c8c8c 0%, #666666 50%, #595959 51%, #595959 100%); } .articlebar_article div, .articlebar_indicator div { margin-left: -999em; position: absolute; font-size: 16px; color: #fff; line-height: 20px; font-weight: bold; text-align: left; } .articlebar_article:hover, .articlebar_indicator:hover { background-color: #aaaaaa; background-color: #aaaaaa; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b7b7b7', endColorstr='#9d9d9d'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b7b7b7', endColorstr='#9d9d9d'); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(1, #d0d0d0), color-stop(0.5, #aaaaaa), color-stop(0.49, #9d9d9d)); background-image: -webkit-linear-gradient(top, #d0d0d0 0%, #aaaaaa 50%, #9d9d9d 51%, #9d9d9d 100%); background-image: -moz-linear-gradient(top, #d0d0d0 0%, #aaaaaa 50%, #9d9d9d 51%, #9d9d9d 100%); background-image: linear-gradient(top, #d0d0d0 0%, #aaaaaa 50%, #9d9d9d 51%, #9d9d9d 100%); } .articlebar_article:hover div, .articlebar_indicator:hover div { position: absolute; top: 20px; z-index: 99; margin-left: 0; } .articlebar_currentarticle, .articlebar_indicator { background-color: #333333; background-color: #333333; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#404040', endColorstr='#262626'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#404040', endColorstr='#262626'); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(1, #595959), color-stop(0.5, #333333), color-stop(0.49, #262626)); background-image: -webkit-linear-gradient(top, #595959 0%, #333333 50%, #262626 51%, #262626 100%); background-image: -moz-linear-gradient(top, #595959 0%, #333333 50%, #262626 51%, #262626 100%); background-image: linear-gradient(top, #595959 0%, #333333 50%, #262626 51%, #262626 100%); } /** The tooltip that shows the article title. */ .articlebar_label { background-color: #000000; color: #ffffff; border: solid 1px #ffffff; font-size: 12px; font-weight: bold; padding: 0px 6px; } .articlebar_label p { padding: 4px 4px; color: #fff; font-weight: normal; text-indent: none; text-align: left; } /** The indicator holder div. This moves and provides a way to show a line or some other */ .articlebar_indicator { background-color: #4c83a9; position: absolute; box-sizing: border-box; -moz-box-sizing: border-box; top: 3px; border: none; background-color: #4c83a9; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a90b5', endColorstr='#447597'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a90b5', endColorstr='#447597'); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(1, #7da7c5), color-stop(0.5, #4c83a9), color-stop(0.49, #447597)); background-image: -webkit-linear-gradient(top, #7da7c5 0%, #4c83a9 50%, #447597 51%, #447597 100%); background-image: -moz-linear-gradient(top, #7da7c5 0%, #4c83a9 50%, #447597 51%, #447597 100%); background-image: linear-gradient(top, #7da7c5 0%, #4c83a9 50%, #447597 51%, #447597 100%); } .articlebar_indicator div { opacity: 0; } .articlebar_indicator:hover div { opacity: 1; } /** The actual indicator text div, attached to the indicator holder. It is positioned relative to the indicator holder, allowing them to move as one component. */ .articlebar_pagetext { position: absolute; top: 16px; left: 0px; text-align: center; line-height: 18px; font-size: 12px; font-weight: bold; width: 40px; height: 18px; background-color: #000; color: #ffffff; border: solid 2px #ffffff; } .contents_panel, .print_panel, .help_panel, .search_panel, .share_panel { color: #dfdfdf; z-index: 1; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; display: none; padding-top: 30px; padding-bottom: 40px; } .contents_panel .bg, .print_panel .bg, .help_panel .bg, .search_panel .bg, .share_panel .bg { background: black; background: rgba(0, 0, 0, 0.7); position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; overflow: auto; padding: 8px; z-index: 1; } .contents_panel p, .print_panel p, .help_panel p, .search_panel p, .share_panel p { text-indent: 0; } .contents_panel .cancel, .print_panel .cancel, .help_panel .cancel, .search_panel .cancel, .share_panel .cancel { display: block; margin-top: 15px; font-size: 75%; text-decoration: underline; color: #9d9d9d; } .contents_panel .cancel:hover, .contents_panel .cancel:active, .print_panel .cancel:hover, .print_panel .cancel:active, .help_panel .cancel:hover, .help_panel .cancel:active, .search_panel .cancel:hover, .search_panel .cancel:active, .share_panel .cancel:hover, .share_panel .cancel:active { color: #dfdfdf; } .contents_panel .h_divider, .print_panel .h_divider, .help_panel .h_divider, .search_panel .h_divider, .share_panel .h_divider { background: url(../../img/h-divider-gradient.png) no-repeat center; max-width: 422px; height: 3px; margin-top: 9px; margin-bottom: 9px; } .contents_panel .topRow, .print_panel .topRow, .help_panel .topRow, .search_panel .topRow, .share_panel .topRow { width: 100%; margin-bottom: 24px; } .contents_panel .nowrap, .print_panel .nowrap, .help_panel .nowrap, .search_panel .nowrap, .share_panel .nowrap { white-space: nowrap; } .contents_panel .lFloatclear, .print_panel .lFloatclear, .help_panel .lFloatclear, .search_panel .lFloatclear, .share_panel .lFloatclear { float: left; clear: both; } .contents_panel .floatleft, .print_panel .floatleft, .help_panel .floatleft, .search_panel .floatleft, .share_panel .floatleft { float: left; } .contents_panel .floatright, .print_panel .floatright, .help_panel .floatright, .search_panel .floatright, .share_panel .floatright { float: right; } .contents_panel .clearDiv, .print_panel .clearDiv, .help_panel .clearDiv, .search_panel .clearDiv, .share_panel .clearDiv { height: 0; clear: both; } .contents_panel p.inline, .print_panel p.inline, .help_panel p.inline, .search_panel p.inline, .share_panel p.inline { color: #dfdfdf; display: inline; } .contents_panel .floatright, .print_panel .floatright, .help_panel .floatright, .search_panel .floatright, .share_panel .floatright { float: right; } .contents_panel .floatleft, .print_panel .floatleft, .help_panel .floatleft, .search_panel .floatleft, .share_panel .floatleft { float: left; } .contents_panel h1, .print_panel h1, .help_panel h1, .search_panel h1, .share_panel h1 { display: block; color: #aeaeae; font-size: 90%; font-weight: lighter; letter-spacing: 1px; font-family: Tahoma, Geneva, sans-serif; margin-bottom: .5em; text-align: left; text-transform: uppercase; } .contents_panel ul, .print_panel ul, .help_panel ul, .search_panel ul, .share_panel ul { width: 90%; max-width: 600px; margin: 0 auto; } .contents_panel li, .print_panel li, .help_panel li, .search_panel li, .share_panel li { font-family: 'Lora', serif; list-style: none; display: list-item; text-align: -webkit-match-parent; border: 1px solid #666; background-color: #fff; margin: 5px; -moz-border-radius: 1em 1em 1em 1em; border-radius: 1em 1em 1em 1em; } .contents_panel li h3, .print_panel li h3, .help_panel li h3, .search_panel li h3, .share_panel li h3 { font-family: 'Lora', serif; font-size: 1.3em; color: #333; text-align: center; padding: 6px 0 0 0; margin: 0 auto; font-weight: bold; } .contents_panel li h4, .print_panel li h4, .help_panel li h4, .search_panel li h4, .share_panel li h4 { font-size: 1em; color: #333; text-align: center; padding: 3px 0 0 0; margin: 0 auto; font-weight: normal; } .contents_panel .close, .print_panel .close, .help_panel .close, .search_panel .close, .share_panel .close { position: absolute; right: 0px; top: 0px; cursor: pointer; background: url("../../img/close2.png"); padding: 10px; } .contents_panel .button, .print_panel .button, .help_panel .button, .search_panel .button, .share_panel .button { -moz-box-shadow: inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff; box-shadow: inset 0px 1px 0px 0px #ffffff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf)); background: -moz-linear-gradient(center top, #ededed 5%, #dfdfdf 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ededed', endColorstr = '#dfdfdf'); background-color: #ededed; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #dcdcdc; display: inline-block; color: #777777; font-family: arial; font-size: 15px; font-weight: bold; padding: 3px 9px; text-decoration: none; text-shadow: 1px 1px 0px #ffffff; } .contents_panel .button:hover, .print_panel .button:hover, .help_panel .button:hover, .search_panel .button:hover, .share_panel .button:hover { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed)); background: -moz-linear-gradient(center top, #dfdfdf 5%, #ededed 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#dfdfdf', endColorstr = '#ededed'); background-color: #dfdfdf; } .contents_panel .button:active, .print_panel .button:active, .help_panel .button:active, .search_panel .button:active, .share_panel .button:active { position: relative; top: 1px; } .share_panel_inner, .print_panel_inner, .contents_panel_inner, .help_panel_inner, .search_panel_inner, .searchresultscontainer { background: #212121; padding: 8px; padding-bottom: 24px; max-width: 422px; margin: auto; margin-top: 30px; margin-bottom: 30px; position: relative; -moz-box-shadow: 2px 2px 3px #000; -webkit-box-shadow: 2px 2px 3px #000; box-shadow: 2px 2px 3px #000; border: 2px solid #333; border-radius: 5px; } .os-iphone .no-ios { display: none; } .os-ipad .no-ios { display: none; } .os-iphone .ios-only { display: block; } .os-ipad .ios-only { display: block; } .ios-only { display: none; } body.os-iphone .ios-only { display: block; } .panel_visible { visibility: visible; display: block; opacity: 1; }