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; } ol, ul { padding-left: 40px; } 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; } /* Backgroud image of cover page */ .cover { background: #000 url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/cover/Front-cover-shot-2.jpg") center top no-repeat; background-size: cover;} /* Enforce images do not expand more than 100% of the width of their container */ .cover img { max-with: 100%;} /* Displaying page requires at least 1-col be present - this pushes said column off the screen */ .cover .column { position: absolute; left: -100%;} /* Reset paragraph styles for the cover page */ .cover p { text-align: left; text-indent: 0; padding: 0; line-height: normal;} /* Wrapper used for positioning */ .cover .wrapperCover { margin-top: 25px; margin-left: 5px; position: relative;} /* Logo attributes for smart phones */ .cover.iphone .wrapperCover .logo img { width: 215px;} /* Logo text width on iphone landscape */ .cover.iphone.horizontal .wrapperCover .logo { max-width: 45%;} /* Logo, feature, and article font attributes */ .cover .logo, .cover .feature, .cover .articles, .cover a { color: #fff; text-shadow: 1px 1px 3px #000;} .cover a:hover, .cover a:active { text-shadow: 3px 3px 5px #000;} /* Feature and article positioning */ .cover .feature, .cover .articles { margin-top: 15px;} /* Article positioning for iPhone landscape */ .cover.iphone.horizontal .articles { position: absolute; right: 5px; top: 50px;} /* "Reaching" attributes */ .cover .reaching { position: absolute; top: -23px; right: 0; width: 125px; animation-iteration-count:3; -moz-animation-iteration-count:3; /* Firefox */ -webkit-animation-iteration-count:3; /*Safari and Chrome*/ -o-animation-iteration-count:3; /* Opera */} /* "Reaching" positioning for iPhone portrait */ .cover.iphone.vertical .reaching { top: -7px;} /* "Reaching" positioning for iPhone landscape */ .cover.iphone.horizontal .reaching { top: -25px;} /* "Reaching" width for everything over 1 column */ .cover.w2 .reaching, .cover.w3 .reaching, .cover.w4 .reaching { width: 250px;} /* larger h1 size than default */ .cover h1 { font-size: 28px;} /* GUI CSS */ /* END GUI CSS */ /* 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; } /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .grid.trumpf { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .trumpf.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/trumpf/Trumpf-full.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .trumpf.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/trumpf/Trumpf-full.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .trumpf.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/trumpf/Trumpf-full.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .trumpf.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/trumpf/Trumpf-full.jpg") center center no-repeat; background-size: contain;} } /* //////////////////////////////////////////////////////////// // 3-column //////////////////////////////////////////////////////////// */ .no-mobile .trumpf.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/trumpf/Trumpf-full.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // 4-column //////////////////////////////////////////////////////////// */ .no-mobile .trumpf.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/trumpf/Trumpf-full.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone vertical //////////////////////////////////////////////////////////// */ .trumpf.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/trumpf/Trumpf-full.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone horizontal //////////////////////////////////////////////////////////// */ .trumpf.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/trumpf/Trumpf-full.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPad vertical //////////////////////////////////////////////////////////// */ .trumpf.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/trumpf/Trumpf-full.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPad horizontal //////////////////////////////////////////////////////////// */ .trumpf.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/trumpf/Trumpf-full.jpg") center center no-repeat; background-size: contain;} /* GUI CSS */ /* END GUI CSS */ .trumpfweb.grid { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/trumpfweb/logo_trumpf.png") center center no-repeat, url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/trumpfweb/preloader1.gif") center center no-repeat;} /* .trumpfweb.grid { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/trumpfweb/preloader1.gif") center center no-repeat, url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/trumpfweb/TRUMPF_Wallpaper_E_1280x1024.jpg") right top no-repeat;} */ .trumpfweb .myAdFullPage { position: absolute; z-index: 999; left:0; width:100%; margin:0 auto; height:100%; background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/trumpfweb/preloader1.gif") center center no-repeat; background-size: cover; padding:0%; text-align: center;} .trumpfweb .sponsorship { position:absolute; top:0px; display: block; color:#fff; background:#000; width:100%; z-index:1000; text-align:center; padding-top:20px;} .trumpfweb .iPhone .myAdFullPage { top:68px; } .trumpfweb .iPad .myAdFullPage { top:68px; } .trumpfweb .iPod .myAdFullPage { top:68px; } .trumpfweb .backPage { position:absolute; bottom:-5px; left:5px; cursor: pointer; z-index: 1000;} .trumpfweb .nextPage { position:absolute; bottom:-5px; right:5px; cursor: pointer; z-index: 1000;} .trumpfweb .header { background:#000; position:absolute; top:0; left:0; width:100%; z-index: 1000; padding-top:50px;} .trumpfweb .iframeWrapper { overflow:auto; -webkit-overflow-scrolling: touch !important; height:95%;} .trumpfweb.iphone.horizontal .iframeWrapper { height:82%;} .trumpfweb.iphone.vertical .iframeWrapper { height:88%;} .trumpfweb .footer { height:50px; background:#000; position:absolute; bottom:0; left:0; width:100%; z-index: 1000;} /* GUI CSS */ /* END GUI CSS */ /*General Styles*/ .toc.grid { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/toc/bkg.jpg") top left no-repeat; background-size: cover} .toc p { text-indent: 0; text-align: left; padding-bottom: 1em; color: #333; padding:0; margin:0} .toc ul li { padding:0; margin:0 0 10px 10px; list-style-type:none; font: 110% 'Roboto Condensed'; font-weight:100} .toc ul.next li { padding:0; margin:0 0 0 20px; list-style-type:square; font: 110% 'Roboto Condensed'; font-weight:100} .toc .myWrapper { margin-bottom: 75px; top: 40px;} .toc .footer { position: absolute; background: #505050; height: 90px; width: 110%; bottom: 0; left: -32px; padding-left: 75px; box-shadow: 0 -1px 5px #000} /* iPhone h1 tag in header attributes */ .toc.iphone .header h1 { font-size: 14px;} .toc .sidebar { position: absolute; height: 100%; width: 32px; top: 0; left: 0;} .toc .header h1 { position: relative; top: 12px; color: #000; font-weight: normal; left: -5px;} .toc p { color: #fff; text-indent: 0; padding-bottom:10px;} .toc p.first:first-letter { float: left; color: #000; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Coda', cursive;} .toc p:last-child { padding-bottom:0; margin-bottom:0;} .toc a { color: #7F3F17;} .toc .example-obtuse { position:relative; padding:15px 30px; margin:0; color:#000; background:#a3a8ac; background:-webkit-gradient(linear, 0 0, 0 100%, from(#b3b8bb), to(#a3a8ac)); background:-moz-linear-gradient(#b3b8bb, #a3a8ac); background:-o-linear-gradient(#b3b8bb, #a3a8ac); background:linear-gradient(#b3b8bb, #a3a8ac); -webkit-border-top-left-radius:25px 50px; -webkit-border-top-right-radius:25px 50px; -webkit-border-bottom-right-radius:25px 50px; -webkit-border-bottom-left-radius:25px 50px; -moz-border-radius:25px / 50px; border-radius:25px / 50px; } /* display of quote author (alternatively use a class on the element following the blockquote) */ .toc .example-obtuse + p {margin:10px 150px 2em 0; text-align:right; color:#000; font-style:italic;} /* creates the larger triangle */ .toc .example-obtuse:before { content:""; position:absolute; bottom:-30px; right:80px; border-width:0 0 30px 50px; border-style:solid; border-color:transparent #a3a8ac; display:block; width:0; } /* creates the smaller triangle */ .toc .example-obtuse:after { content:""; position:absolute; bottom:-30px; right:110px; border-width:0 0 30px 20px; border-style:solid; border-color:transparent; display:block; width:0; } /* MagTitle (overlays on top of footer) attributes */ .toc .magTitle { display: block; position: absolute; right: 32px; bottom: 5px; z-index: 4;} /* iPhone magTitle (overlays on top of footer) attributes */ .toc.iphone .magTitle { right: 5px;} /* MagTitle image (overlays on top of footer) attributes */ .toc .magTitle img { padding-top: 5px;} /* MagTitle position for when using images instead of text */ .toc .magTitle { bottom: -2px;} /* GUI CSS */ /* END GUI CSS */ /***********************/ /*** CORE Styles ***/ /***********************/ /* GradientType=0 is top to bottom */ /* GradientType=1 is left to right */ .toc { background: #fff url("{}") center center repeat; background-size: cover;} .toc p, .toc h1 { text-indent: 0; text-align: left; color: #333} .toc h2 { color:#fff; font: 220% 'Fjalla One'; -webkit-filter: drop-shadow(0 1px 2px #000); -moz-filter: drop-shadow(0 1px 2px #000); -ms-filter: drop-shadow(0 1px 2px #000); -o-filter: drop-shadow(0 1px 2px #000); filter: drop-shadow(0 1px 2px #000); padding:0; margin:20px 0 0 35px} .toc h3 { color: #cc252c; font:240% 'Roboto Condensed'; text-transform:uppercase; font-weight:100; padding:0 0 20px 0; margin:10px 0 0 0} .toc li a:link, .toc li a:active, .toc li a:visited { color:#4163ba; display:block; font:140%; padding:0 0 0 10px; margin:0 0 0 -10px} .toc li a:hover { background:#fff} .toc .myWrapper { margin-bottom: 25px; top: 30px;} /* iPhone */ .toc.iphone .myWrapper { top: 30px; margin-bottom: 0;} .toc .header { position: absolute; height: 45px; width: 110%; top: 0; left: -32px; padding-left: 75px; background: #efefef); box-shadow: 0 1px 5px #000; z-index: 2; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0', endColorstr='#f9f9f9');/*For IE7-8-9*/} /* iPhone */ .toc.iphone .header { height: 30px; padding-top: 10px; padding-left: 67px; box-shadow: 0 1px 5px #000;} .toc .header h1 { position: relative; top: 12px; color: #939498; font-weight: normal; left: -5px;} /* iPhone */ .toc.iphone .header h1 { font-size: 14px;} .toc .header h1 .arrows { font-size: 125%; font-weight: normal;} .toc .ad1 { position: absolute; top: 5px; right: 32px; width: 288px; height: 29px; background: #000; color: #fff; z-index: 5; padding-top: 6px; text-align: center;} .toc .ad2 { position: absolute; top: 5px; right: 340px; width: 288px; height: 29px; background: #6d6d6d; color: #fff; z-index: 5; padding-top: 6px; text-align: center;} .toc .ad3 { position: absolute; top: 5px; right: 648px; width: 288px; height: 29px; background: #a0a0a0; color: #fff; z-index: 5; padding-top: 6px; text-align: center;} .toc .footer { position: absolute; height: 40px; width: 110%; bottom: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0', endColorstr='#f9f9f9');/*For IE7-8-9*/} box-shadow: 0 1px 5px #000; z-index: 2;} .toc .magTitle { display: block; position: absolute; right: 32px; bottom: -2px; z-index: 4;} .toc.iphone .magTitle { right: 5px;} .toc .magTitle img { padding-top: 5px;} .toc .sidebar { position: absolute; background: -webkit-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -moz-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -o-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -ms-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#aaaaaa', endColorstr='#939498');/*For IE7-8-9*/ height: 100%; width: 32px; top: 0; left: 0; box-shadow: 1px 0 5px #000; z-index: 3;} .toc .sidebarConnector { position: absolute; background: -webkit-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -moz-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -o-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -ms-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#aaaaaa', endColorstr='#939498');/*For IE7-8-9*/ height: 55px; width: 32px; top: 0; left: 0; z-index: 1;} .toc .sidebarContent { position:absolute; width: 300px; top: 144px; left: -130px; transform:rotate(-90deg); -ms-transform:rotate(-90deg); /* IE 9 */ -moz-transform:rotate(-90deg); /* Firefox */ -webkit-transform:rotate(-90deg); /* Safari and Chrome */ -o-transform:rotate(-90deg); /* Opera */ z-index: 5; color: #fff; text-align: right; height: 32px;} .toc .adQtrPage_2col:hover { border: 1px solid red;} .toc .floatL { float: left; display:block; width:288px; margin:0 0 0 20px} .toc .floatR { float: right;} .toc .clearB { clear: both;} .toc .item_2col p:last-of-type { margin-bottom: 0; } .toc .c2.item_2col, .toc .c3.item_2col, .toc .c4.item_2col { border-left: 1px solid #dedede;} .toc .item_2col img { padding: 0;} .toc .item_2col img.floatL { margin: 10px; margin-left: 0;} .toc .item_2col img.floatR { margin: 10px; margin-right: 0;} .toc .aside { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/toc/metalBG_634.jpg"); background-size: cover; padding: 20px; position: relative;} .toc .aside .img1 { position: absolute; right: 0px; top: 0;} .toc .aside .img2 { position: absolute; right: 0px; top: 175px;} .toc .aside h3, .toc .aside p { margin-left: 5px;} .toc .aside h2 { margin-top: 15px; text-transform: uppercase;} .toc.w4 .aside .subscribeBtn { position: absolute; right: 100px; top: 425px; cursor: pointer;} .toc.w4 .aside .forwardBtn { position: absolute; right: 100px; top: 460px; cursor: pointer;} .toc .aside .subscribeBtn { cursor: pointer;} .toc .aside .forwardBtn { cursor: pointer;} .toc.iphone .myWrapper { margin-left: 35px;} /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .grid.wila { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .wila.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/wila/Wila-full.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .wila.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/wila/Wila-full.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .wila.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/wila/Wila-full.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .wila.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/wila/Wila-full.jpg") center center no-repeat; background-size: contain;} } /* //////////////////////////////////////////////////////////// // 3-column //////////////////////////////////////////////////////////// */ .no-mobile .wila.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/wila/Wila-full.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // 4-column //////////////////////////////////////////////////////////// */ .no-mobile .wila.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/wila/Wila-full.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone vertical //////////////////////////////////////////////////////////// */ .wila.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/wila/Wila-full.jpg") center center no-repeat;} /* //////////////////////////////////////////////////////////// // iPhone horizontal //////////////////////////////////////////////////////////// */ .wila.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/wila/Wila-full.jpg") center center no-repeat;} /* //////////////////////////////////////////////////////////// // iPad vertical //////////////////////////////////////////////////////////// */ .wila.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/wila/Wila-full.jpg") center center no-repeat;} /* //////////////////////////////////////////////////////////// // iPad horizontal //////////////////////////////////////////////////////////// */ .wila.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/wila/Wila-full.jpg") center center no-repeat;} /* GUI CSS */ /* END GUI CSS */ .wilaweb .myAdFullPagewilaweb { position: absolute; z-index: 999; left:0; width:100%; margin:0 auto; height:100%; background: transparent; padding:0%; text-align: center;} .wilaweb .sponsorship { position:absolute; top:0px; display: block; color:#fff; background:#000; width:100%; z-index:1000; text-align:center; padding-top:20px;} .wilaweb .iPhone .myAdFullPagewilaweb { top:68px; } .wilaweb .iPad .myAdFullPagewilaweb { top:68px; } .wilaweb .iPod .myAdFullPagewilaweb { top:68px; } .wilaweb .backPage { position:absolute; bottom:-5px; left:5px; cursor: pointer; z-index: 1000;} .wilaweb .nextPage { position:absolute; bottom:-5px; right:5px; cursor: pointer; z-index: 1000;} .wilaweb .header { background:#000; position:absolute; top:0; left:0; width:100%; z-index: 1000; padding-top:50px;} .wilaweb .iframeWrapperwilaweb { overflow:auto; -webkit-overflow-scrolling: touch !important; height:95%;} .wilaweb.iphone.horizontal .iframeWrapperwilaweb { height:82%;} .wilaweb.iphone.vertical .iframeWrapperwilaweb { height:88%;} .wilaweb .footer { height:50px; background:#000; position:absolute; bottom:0; left:0; width:100%; z-index: 1000;} /* GUI CSS */ /* END GUI CSS */ /***********************/ /*** CORE Styles ***/ /***********************/ /* Paragraph indentation */ .publishersletter p { text-indent: 15px; text-align: left} /* Give last paragraph in a section bottom padding before the ensuing subheader */ .publishersletter .section p:last-of-type { padding-bottom: 16px;} /* Subheader default margin removal */ .publishersletter h3 { margin: 0;} /* Subheader non bold and italicized */ .publishersletter h3.mild { font-weight: normal; font-style: italic;} /* Subheader adjustments on iPhone */ .publishersletter.iphone h3 { padding-left: 20px;} /* Paragraph indentation for paragraphs immediately following a subheader */ .publishersletter .keeptogether + p, .publishersletter p.hyperlink { text-indent: 0;} /* Hyperlink padding */ .publishersletter p.hyperlink { padding-bottom: 0; padding-top: 16px;} /* Lines between columns - change .png file to your liking */ .publishersletter .column:not(.c1) p, .publishersletter .column:not(.c1) ul, .publishersletter .column:not(.c1) h3 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/publishersletter/c7c7c7.png") repeat-y top left;} /* Background image for all article pages */ .publishersletter { background: #fff url("{}") center center repeat; background-size: cover;} /* Colorbox caption/title area background */ #cboxTitle { background: #fff;} /* On page caption indentations */ p.caption { text-indent: 0; margin-bottom: 10px;} /* On page caption indentations adjustments for iPhone */ .iphone p.caption { padding-left: 0; width: 280px;} /* .publishersletter p, .publishersletter h1 { text-indent: 0; text-align: left; color: #333}*/ /* Font color for article */ .publishersletter p, .publishersletter h1, .publishersletter h2, .publishersletter h3, .publishersletter h4, .publishersletter li { color: #333;} /* Positioning for list items */ .publishersletter ul, .publishersletter ol { padding-left: 20px; list-style: inside;} /* Bottom padding for lists */ .publishersletter ol, .publishersletter ul { padding-bottom: 10px;} /* Positioning for wrapper to accomodate for sizes of header/footer */ .publishersletter .myWrapper { margin-bottom: 25px; top: 30px;} /* iPhone wrapper positioning */ .publishersletter.iphone .myWrapper { top: 17px; margin-bottom: 3px; margin-left: 17px;} .publishersletter.iphone .myWrapper .container { margin-left: 18px;} .publishersletter .myWrapper iframe { padding-left: 20px;} .publishersletter.iphone .myWrapper iframe { padding-left: 0;} /* Header attributes */ .publishersletter .header { position: absolute; height: 45px; width: 110%; top: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0', endColorstr='#f9f9f9');/*For IE7-8-9*/ box-shadow: 0 1px 5px #000; z-index: 2;} /* iPhone header attributes */ .publishersletter.iphone .header { height: 30px; padding-top: 10px; padding-left: 67px; box-shadow: 0 1px 5px #000;} /* h1 tag in header attributes */ .publishersletter .header h1 { position: relative; top: 12px; color: #000; font-weight: normal; left: -5px;} /* iPhone h1 tag in header attributes */ .publishersletter.iphone .header h1 { font-size: 14px;} /* Arrow attributes in front of h1 tag in header */ .publishersletter .header h1 .arrows { font-size: 125%; font-weight: normal;} /* Footer attributes */ .publishersletter .footer { position: absolute; height: 40px; width: 110%; bottom: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0', endColorstr='#f9f9f9');/*For IE7-8-9*/ box-shadow: 0 1px 5px #000; z-index: 2;} /* MagTitle (overlays on top of footer) attributes */ .publishersletter .magTitle { display: block; position: absolute; right: 32px; bottom: 5px; z-index: 4;} /* iPhone magTitle (overlays on top of footer) attributes */ .publishersletter.iphone .magTitle { right: 5px;} /* MagTitle image (overlays on top of footer) attributes */ .publishersletter .magTitle img { padding-top: 5px;} /* Sidebar attributes */ .publishersletter .sidebar { position: absolute; background: -webkit-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -moz-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -o-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -ms-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#aaaaaa', endColorstr='#939498');/*For IE7-8-9*/ height: 100%; width: 32px; top: 0; left: 0; box-shadow: 1px 0 5px #000; z-index: 3;} /* Sidebar Connector used only for box shadow purposes if you don't want the sidebar shadow to cover the header */ .publishersletter .sidebarConnector { position: absolute; background: red; height: 55px; width: 32px; top: 0; left: 0; z-index: 1;} /* Positioning for the content text on the sidebar */ .publishersletter .sidebarContent { position:absolute; width: 300px; top: 144px; left: -130px; transform:rotate(-90deg); -ms-transform:rotate(-90deg); /* IE 9 */ -moz-transform:rotate(-90deg); /* Firefox */ -webkit-transform:rotate(-90deg); /* Safari and Chrome */ -o-transform:rotate(-90deg); /* Opera */ z-index: 5; color: #fff; text-align: right; height: 32px;} /* Float left style */ .publishersletter .floatL { float: left;} /* Float right style */ .publishersletter .floatR { float: right;} /* Clear floats (both left and right) */ .publishersletter .clearB { clear: both;} /* Pullquote attributes */ .publishersletter .pullquote { font-size: 20px; color: #999; font-style: italic; padding: 20px; line-height: normal;} /* iPhone portrait image width adjustment */ .publishersletter.iphone .container { width: 280px;} /* GUI CSS */ /* END GUI CSS */ /* GradientType=0 is top to bottom */ /* GradientType=1 is left to right */ /* Sidebar color */ .publishersletter .sidebar { position: absolute; background: -webkit-linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); background: -moz-linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); background: -o-linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); background: -ms-linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); background: linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#0f5596',endColorstr='#0c467c');} /* h1 tag color in header */ .publishersletter .header h1 { color: #0c467c;} /* MagTitle position for when using images instead of text */ .publishersletter .magTitle { bottom: -2px;} /* Tilt and shadow for photo */ .publishersletter .tilted img { transform:rotate(-7deg); -ms-transform:rotate(-7deg); /* IE 9 */ -moz-transform:rotate(-7deg); /* Firefox */ -webkit-transform:rotate(-7deg); /* Safari and Chrome */ -o-transform:rotate(-7deg); /* Opera */ margin-left: 20px; margin-bottom: 20px; box-shadow: 3px 3px 5px #666; padding-left: 0; text-align: center;} /* Frame padding for photo */ .publishersletter .frame { padding: 15px 15px 0;} /* Title attributes */ .publishersletter .title { margin-bottom: 15px;} /* Title h1 attributes */ .publishersletter .title h1 { font-size: 36px; color: #333; line-height: normal;} /* Title h2 attributes */ .publishersletter .title h2 { font-size: 24px; color: #999; line-height: normal;} /* Boxed figure attributes */ .publishersletter .box { padding: 10px; margin-left: 20px; border-top: 1px solid #0f5596; border-bottom: 1px solid #0f5596; background: #e5e5e5;} /* Boxed figure dimensions for iPhone */ .publishersletter.iphone.vertical .box { margin-left:0;} /* Boxed figure width for iPhone in landscape */ .publishersletter.iphone.horizontal .box { width: 428px;} /* Boxed figure paragraph attributes (*/ .publishersletter .box p { font-style: italic; font-size: 90%; text-indent: 0; padding-left: 0; text-align: left; line-height: normal; border: none;} /* Masthead attributes */ .publishersletter .aside { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/publishersletter/metalBG_634.jpg"); background-size: cover; padding: 20px; position: relative;} .publishersletter .aside p { text-indent: 0; text-align: left;} .publishersletter .aside .img1 { position: absolute; right: 0px; top: 0;} .publishersletter .aside .img2 { position: absolute; right: 0px; top: 175px;} .publishersletter .aside h2 { margin-top: 15px; text-transform: uppercase;} .publishersletter .aside .subscribeBtn { cursor: pointer;} /* Figure width for iPhone in landscape */ .os-iphone .grid.publishersletter.fixed.iphone.horizontal .container { width: 460px; margin-left: 0;} .zoomable, .zoomable * { cursor: pointer;} /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .grid.salvagnini { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .salvagnini.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/salvagnini/Salvagnini-1266.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .salvagnini.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/salvagnini/Salvagnini-1266.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .salvagnini.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/salvagnini/Salvagnini-1266.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .salvagnini.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/salvagnini/Salvagnini-1266.jpg") center center no-repeat; background-size: contain;} } /* //////////////////////////////////////////////////////////// // 3-column //////////////////////////////////////////////////////////// */ .no-mobile .salvagnini.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/salvagnini/Salvagnini-1266.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // 4-column //////////////////////////////////////////////////////////// */ .no-mobile .salvagnini.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/salvagnini/Salvagnini-1266.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone vertical //////////////////////////////////////////////////////////// */ .salvagnini.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/salvagnini/Salvagnini-1266.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone horizontal //////////////////////////////////////////////////////////// */ .salvagnini.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/salvagnini/Salvagnini-1266.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPad vertical //////////////////////////////////////////////////////////// */ .salvagnini.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/salvagnini/Salvagnini-1266.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPad horizontal //////////////////////////////////////////////////////////// */ .salvagnini.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/salvagnini/Salvagnini-1266.jpg") center center no-repeat; background-size: contain;} /* GUI CSS */ /* END GUI CSS */ .ipgphotonicsweb .myAdFullPageipgphotonicsweb { position: absolute; z-index: 999; left:0; width:100%; margin:0 auto; height:100%; background: transparent; padding:0%; text-align: center;} .ipgphotonicsweb .sponsorship { position:absolute; top:0px; display: block; color:#fff; background:#000; width:100%; z-index:1000; text-align:center; padding-top:20px;} .ipgphotonicsweb .iPhone .myAdFullPageipgphotonicsweb { top:68px; } .ipgphotonicsweb .iPad .myAdFullPageipgphotonicsweb { top:68px; } .ipgphotonicsweb .iPod .myAdFullPageipgphotonicsweb { top:68px; } .ipgphotonicsweb .backPage { position:absolute; bottom:-5px; left:5px; cursor: pointer; z-index: 1000;} .ipgphotonicsweb .nextPage { position:absolute; bottom:-5px; right:5px; cursor: pointer; z-index: 1000;} .ipgphotonicsweb .header { background:#000; position:absolute; top:0; left:0; width:100%; z-index: 1000; padding-top:50px;} .ipgphotonicsweb .iframeWrapperipgphotonicsweb { overflow:auto; -webkit-overflow-scrolling: touch !important; height:95%;} .ipgphotonicsweb.iphone.horizontal .iframeWrapperipgphotonicsweb { height:82%;} .ipgphotonicsweb.iphone.vertical .iframeWrapperipgphotonicsweb { height:88%;} .ipgphotonicsweb .footer { height:50px; background:#000; position:absolute; bottom:0; left:0; width:100%; z-index: 1000;} /* GUI CSS */ /* END GUI CSS */ /***********************/ /*** CORE Styles ***/ /***********************/ /* Paragraph indentation */ .pressbrakes p { text-indent: 15px; text-align: left} /* Give last paragraph in a section bottom padding before the ensuing subheader */ .pressbrakes .section p:last-of-type { padding-bottom: 16px;} /* Subheader default margin removal */ .pressbrakes h3 { margin: 0;} /* Subheader adjustments on iPhone */ .pressbrakes.iphone h3 { padding-left: 20px;} /* Paragraph indentation for paragraphs immediately following a subheader */ .pressbrakes .keeptogether + p, .pressbrakes p.hyperlink { text-indent: 0;} /* Hyperlink padding */ .pressbrakes p.hyperlink { padding-bottom: 0; padding-top: 16px;} /* Lines between columns - change .png file to your liking */ .pressbrakes .column:not(.c1) p, .pressbrakes .column:not(.c1) ul, .pressbrakes .column:not(.c1) h3 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/pressbrakes/c7c7c7.png") repeat-y top left;} /* Background image for all article pages */ .pressbrakes { background: #fff url("{}") center center repeat; background-size: cover;} /* Colorbox caption/title area background */ #cboxTitle { background: #fff;} /* On page caption indentations */ p.caption { text-indent: 0; margin-bottom: 10px;} /* On page caption indentations adjustments for iPhone */ .iphone p.caption { padding-left: 0; width: 280px;} /* .pressbrakes p, .pressbrakes h1 { text-indent: 0; text-align: left; color: #333}*/ /* Font color for article */ .pressbrakes p, .pressbrakes h1, .pressbrakes h2, .pressbrakes h3, .pressbrakes h4, .pressbrakes li { color: #333;} /* Positioning for list items */ .pressbrakes ul, .pressbrakes ol { padding-left: 20px; list-style: inside;} /* Bottom padding for lists */ .pressbrakes ol, .pressbrakes ul { padding-bottom: 10px;} /* Positioning for wrapper to accomodate for sizes of header/footer */ .pressbrakes .myWrapper { margin-bottom: 25px; top: 30px;} /* iPhone wrapper positioning */ .pressbrakes.iphone .myWrapper { top: 17px; margin-bottom: 3px; margin-left: 17px;} .pressbrakes.iphone .myWrapper .container { margin-left: 18px;} .pressbrakes .myWrapper iframe { padding-left: 20px;} .pressbrakes.iphone .myWrapper iframe { padding-left: 0;} /* Header attributes */ .pressbrakes .header { position: absolute; height: 45px; width: 110%; top: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0', endColorstr='#f9f9f9');/*For IE7-8-9*/ box-shadow: 0 1px 5px #000; z-index: 2;} /* iPhone header attributes */ .pressbrakes.iphone .header { height: 30px; padding-top: 10px; padding-left: 67px; box-shadow: 0 1px 5px #000;} /* h1 tag in header attributes */ .pressbrakes .header h1 { position: relative; top: 12px; color: #000; font-weight: normal; left: -5px;} /* iPhone h1 tag in header attributes */ .pressbrakes.iphone .header h1 { font-size: 14px;} /* Arrow attributes in front of h1 tag in header */ .pressbrakes .header h1 .arrows { font-size: 125%; font-weight: normal;} /* Footer attributes */ .pressbrakes .footer { position: absolute; height: 40px; width: 110%; bottom: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0', endColorstr='#f9f9f9');/*For IE7-8-9*/ box-shadow: 0 1px 5px #000; z-index: 2;} /* MagTitle (overlays on top of footer) attributes */ .pressbrakes .magTitle { display: block; position: absolute; right: 32px; bottom: 5px; z-index: 4;} /* iPhone magTitle (overlays on top of footer) attributes */ .pressbrakes.iphone .magTitle { right: 5px;} /* MagTitle image (overlays on top of footer) attributes */ .pressbrakes .magTitle img { padding-top: 5px;} /* Sidebar attributes */ .pressbrakes .sidebar { position: absolute; background: -webkit-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -moz-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -o-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -ms-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#aaaaaa', endColorstr='#939498');/*For IE7-8-9*/ height: 100%; width: 32px; top: 0; left: 0; box-shadow: 1px 0 5px #000; z-index: 3;} /* Sidebar Connector used only for box shadow purposes if you don't want the sidebar shadow to cover the header */ .pressbrakes .sidebarConnector { position: absolute; background: red; height: 55px; width: 32px; top: 0; left: 0; z-index: 1;} /* Positioning for the content text on the sidebar */ .pressbrakes .sidebarContent { position:absolute; width: 300px; top: 144px; left: -130px; transform:rotate(-90deg); -ms-transform:rotate(-90deg); /* IE 9 */ -moz-transform:rotate(-90deg); /* Firefox */ -webkit-transform:rotate(-90deg); /* Safari and Chrome */ -o-transform:rotate(-90deg); /* Opera */ z-index: 5; color: #fff; text-align: right; height: 32px;} /* Float left style */ .pressbrakes .floatL { float: left;} /* Float right style */ .pressbrakes .floatR { float: right;} /* Clear floats (both left and right) */ .pressbrakes .clearB { clear: both;} /* Pullquote attributes */ .pressbrakes .pullquote { font-size: 20px; color: #999; font-style: italic; padding: 20px; line-height: normal;} /* iPhone portrait image width adjustment */ .pressbrakes.iphone .container { width: 280px;} /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .pressbrakes.grid.page-1 { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .pressbrakes.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/pressbrakes/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .pressbrakes.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/pressbrakes/ipad_port.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .pressbrakes.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/pressbrakes/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .pressbrakes.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/pressbrakes/ipad_land.jpg") center center no-repeat; background-size: contain;} } /* 3-column */ .no-mobile .pressbrakes.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/pressbrakes/ipad_land.jpg") center center no-repeat; background-size: contain;} /* 4-column */ .no-mobile .pressbrakes.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/pressbrakes/ipad_land.jpg") center center no-repeat; background-size: contain;} /* iPhone vertical */ .pressbrakes.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/pressbrakes/iphone_port.jpg") center center no-repeat; background-size: contain;} /* iPhone horizontal */ .pressbrakes.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/pressbrakes/iphone_land.jpg") center center no-repeat; background-size: contain;} /* iPad vertical */ .pressbrakes.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/pressbrakes/ipad_port.jpg") center center no-repeat; background-size: contain;} /* iPad horizontal */ .pressbrakes.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/pressbrakes/ipad_land.jpg") center center no-repeat; background-size: contain;} /* GUI CSS */ /* END GUI CSS */ /* GradientType=0 is top to bottom */ /* GradientType=1 is left to right */ /* Sidebar color */ .pressbrakes .sidebar { position: absolute; background: -webkit-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -moz-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -o-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -ms-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#eb262e', endColorstr='#d12229');/*For IE7-8-9*/} /* h1 tag color in header */ .pressbrakes .header h1 { color: #d12229;} /* MagTitle position for when using images instead of text */ .pressbrakes .magTitle { bottom: -2px;} .salvagniniweb .myAdFullPagesalvagniniweb { position: absolute; z-index: 999; left:0; width:100%; margin:0 auto; height:100%; background: transparent; padding:0%; text-align: center;} .salvagniniweb .sponsorship { position:absolute; top:0px; display: block; color:#fff; background:#000; width:100%; z-index:1000; text-align:center; padding-top:20px;} .salvagniniweb .iPhone .myAdFullPagesalvagniniweb { top:68px; } .salvagniniweb .iPad .myAdFullPagesalvagniniweb { top:68px; } .salvagniniweb .iPod .myAdFullPagesalvagniniweb { top:68px; } .salvagniniweb .backPage { position:absolute; bottom:-5px; left:5px; cursor: pointer; z-index: 1000;} .salvagniniweb .nextPage { position:absolute; bottom:-5px; right:5px; cursor: pointer; z-index: 1000;} .salvagniniweb .header { background:#000; position:absolute; top:0; left:0; width:100%; z-index: 1000; padding-top:50px;} .salvagniniweb .iframeWrappersalvagniniweb { overflow:auto; -webkit-overflow-scrolling: touch !important; height:95%;} .salvagniniweb.iphone.horizontal .iframeWrappersalvagniniweb { height:82%;} .salvagniniweb.iphone.vertical .iframeWrappersalvagniniweb { height:88%;} .salvagniniweb .footer { height:50px; background:#000; position:absolute; bottom:0; left:0; width:100%; z-index: 1000;} /* GUI CSS */ /* END GUI CSS */ /***********************/ /*** CORE Styles ***/ /***********************/ /* Paragraph indentation */ .breakingthesoundbarrier p { text-indent: 15px; text-indent: left} /* Give last paragraph in a section bottom padding before the ensuing subheader */ .breakingthesoundbarrier .section p:last-of-type { padding-bottom: 16px;} /* Subheader default margin removal */ .breakingthesoundbarrier h3 { margin: 0;} /* Subheader non bold and italicized */ .breakingthesoundbarrier h3.mild { font-weight: normal; font-style: italic;} .breakingthesoundbarrier p.QandA { text-indent: 0;} /* Subheader adjustments on iPhone */ .breakingthesoundbarrier.iphone h3 { padding-left: 20px;} /* Paragraph indentation for paragraphs immediately following a subheader */ .breakingthesoundbarrier .keeptogether + p, .breakingthesoundbarrier p.hyperlink { text-indent: 0;} /* Hyperlink padding */ .breakingthesoundbarrier p.hyperlink { padding-bottom: 0; padding-top: 16px;} /* Lines between columns - change .png file to your liking */ .breakingthesoundbarrier .column:not(.c1) p, .breakingthesoundbarrier .column:not(.c1) ul, .breakingthesoundbarrier .column:not(.c1) h3 { background-image: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/breakingthesoundbarrier/c7c7c7.png") repeat-y top left;} /* Background image for all article pages */ .breakingthesoundbarrier { background: #fff url("{}") center center repeat; background-size: cover;} /* Colorbox caption/title area background */ #cboxTitle { background: #fff;} /* On page caption indentations */ p.caption { text-indent: 0; margin-bottom: 10px;} /* On page caption indentations adjustments for iPhone */ .iphone p.caption { padding-left: 0; width: 280px;} /* .breakingthesoundbarrier p, .breakingthesoundbarrier h1 { text-indent: 0; text-align: left; color: #333}*/ /* Font color for article */ .breakingthesoundbarrier p, .breakingthesoundbarrier h1, .breakingthesoundbarrier h2, .breakingthesoundbarrier h3, .breakingthesoundbarrier h4, .breakingthesoundbarrier li { color: #333;} /* Positioning for list items */ .breakingthesoundbarrier ul, .breakingthesoundbarrier ol { padding-left: 20px; list-style: inside;} /* Bottom padding for lists */ .breakingthesoundbarrier ol, .breakingthesoundbarrier ul { padding-bottom: 10px;} /* Positioning for wrapper to accomodate for sizes of header/footer */ .breakingthesoundbarrier .myWrapper { margin-bottom: 25px; top: 30px;} /* iPhone wrapper positioning */ .breakingthesoundbarrier.iphone .myWrapper { top: 17px; margin-bottom: 3px; margin-left: 17px;} .breakingthesoundbarrier.iphone .myWrapper .container { margin-left: 18px;} .breakingthesoundbarrier .myWrapper iframe { padding-left: 20px;} .breakingthesoundbarrier.iphone .myWrapper iframe { padding-left: 0;} /* Header attributes */ .breakingthesoundbarrier .header { position: absolute; height: 45px; width: 110%; top: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0', endColorstr='#f9f9f9');/*For IE7-8-9*/ box-shadow: 0 1px 5px #000; z-index: 2;} /* iPhone header attributes */ .breakingthesoundbarrier.iphone .header { height: 30px; padding-top: 10px; padding-left: 67px; box-shadow: 0 1px 5px #000;} /* h1 tag in header attributes */ .breakingthesoundbarrier .header h1 { position: relative; top: 12px; color: #000; font-weight: normal; left: -5px;} /* iPhone h1 tag in header attributes */ .breakingthesoundbarrier.iphone .header h1 { font-size: 14px;} /* Arrow attributes in front of h1 tag in header */ .breakingthesoundbarrier .header h1 .arrows { font-size: 125%; font-weight: normal;} /* Footer attributes */ .breakingthesoundbarrier .footer { position: absolute; height: 40px; width: 110%; bottom: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0', endColorstr='#f9f9f9');/*For IE7-8-9*/ box-shadow: 0 1px 5px #000; z-index: 2;} /* MagTitle (overlays on top of footer) attributes */ .breakingthesoundbarrier .magTitle { display: block; position: absolute; right: 32px; bottom: 5px; z-index: 4;} /* iPhone magTitle (overlays on top of footer) attributes */ .breakingthesoundbarrier.iphone .magTitle { right: 5px;} /* MagTitle image (overlays on top of footer) attributes */ .breakingthesoundbarrier .magTitle img { padding-top: 5px;} /* Sidebar attributes */ .breakingthesoundbarrier .sidebar { position: absolute; background: -webkit-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -moz-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -o-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -ms-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#aaaaaa', endColorstr='#939498');/*For IE7-8-9*/ height: 100%; width: 32px; top: 0; left: 0; box-shadow: 1px 0 5px #000; z-index: 3;} /* Sidebar Connector used only for box shadow purposes if you don't want the sidebar shadow to cover the header */ .breakingthesoundbarrier .sidebarConnector { position: absolute; background: red; height: 55px; width: 32px; top: 0; left: 0; z-index: 1;} /* Positioning for the content text on the sidebar */ .breakingthesoundbarrier .sidebarContent { position:absolute; width: 300px; top: 144px; left: -130px; transform:rotate(-90deg); -ms-transform:rotate(-90deg); /* IE 9 */ -moz-transform:rotate(-90deg); /* Firefox */ -webkit-transform:rotate(-90deg); /* Safari and Chrome */ -o-transform:rotate(-90deg); /* Opera */ z-index: 5; color: #fff; text-align: right; height: 32px;} /* Float left style */ .breakingthesoundbarrier .floatL { float: left;} /* Float right style */ .breakingthesoundbarrier .floatR { float: right;} /* Clear floats (both left and right) */ .breakingthesoundbarrier .clearB { clear: both;} /* Pullquote attributes */ .breakingthesoundbarrier .pullquote { font-size: 20px; color: #999; font-style: italic; padding: 20px; line-height: normal;} /* iPhone portrait image width adjustment */ .breakingthesoundbarrier.iphone .container { width: 280px;} /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .grid.breakingthesoundbarrier.page-1 { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .breakingthesoundbarrier.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/breakingthesoundbarrier/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .breakingthesoundbarrier.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/breakingthesoundbarrier/ipad_port.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .breakingthesoundbarrier.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/breakingthesoundbarrier/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .breakingthesoundbarrier.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/breakingthesoundbarrier/ipad_land.jpg") center center no-repeat; background-size: contain;} } /* 3-column */ .no-mobile .breakingthesoundbarrier.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/breakingthesoundbarrier/ipad_land.jpg") center center no-repeat; background-size: contain;} /* 4-column */ .no-mobile .breakingthesoundbarrier.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/breakingthesoundbarrier/ipad_land.jpg") center center no-repeat; background-size: contain;} /* iPhone vertical */ .breakingthesoundbarrier.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/breakingthesoundbarrier/iphone_port.jpg") center center no-repeat; background-size: contain;} /* iPhone horizontal */ .breakingthesoundbarrier.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/breakingthesoundbarrier/iphone_land.png") center center no-repeat; background-size: contain;} /* iPad vertical */ .breakingthesoundbarrier.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/breakingthesoundbarrier/ipad_port.jpg") center center no-repeat; background-size: contain;} /* iPad horizontal */ .breakingthesoundbarrier.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/breakingthesoundbarrier/ipad_land.jpg") center center no-repeat; background-size: contain;} /* GUI CSS */ /* END GUI CSS */ /* GradientType=0 is top to bottom */ /* GradientType=1 is left to right */ /* Sidebar color */ .breakingthesoundbarrier .sidebar { position: absolute; background: -webkit-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -moz-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -o-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -ms-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#eb262e', endColorstr='#d12229');/*For IE7-8-9*/} /* h1 tag color in header */ .breakingthesoundbarrier .header h1 { color: #d12229;} /* MagTitle position for when using images instead of text */ .breakingthesoundbarrier .magTitle { bottom: -2px;} /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .ipgphotonics.grid { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .ipgphotonics.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/ipgphotonics/IPG-full.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .ipgphotonics.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/ipgphotonics/IPG-full.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .ipgphotonics.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/ipgphotonics/IPG-full.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .ipgphotonics.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/ipgphotonics/IPG-full.jpg") center center no-repeat; background-size: contain;} } /* //////////////////////////////////////////////////////////// // 3-column //////////////////////////////////////////////////////////// */ .no-mobile .ipgphotonics.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/ipgphotonics/IPG-full.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // 4-column //////////////////////////////////////////////////////////// */ .no-mobile .ipgphotonics.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/ipgphotonics/IPG-full.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone vertical //////////////////////////////////////////////////////////// */ .ipgphotonics.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/ipgphotonics/IPG-full.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone horizontal //////////////////////////////////////////////////////////// */ .ipgphotonics.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/ipgphotonics/IPG-full.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPad vertical //////////////////////////////////////////////////////////// */ .ipgphotonics.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/ipgphotonics/IPG-full.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPad horizontal //////////////////////////////////////////////////////////// */ .ipgphotonics.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/ipgphotonics/IPG-full.jpg") center center no-repeat; background-size: contain;} /* GUI CSS */ /* END GUI CSS */ /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .grid.hyperthermweb { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .hyperthermweb.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/hyperthermweb/AD_hprxd_Interactive-1286.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .hyperthermweb.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/hyperthermweb/AD_hprxd_Interactive-1286.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .hyperthermweb.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/hyperthermweb/AD_hprxd_Interactive-1286.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .hyperthermweb.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/hyperthermweb/AD_hprxd_Interactive-1286.jpg") center center no-repeat; background-size: contain;} } /* //////////////////////////////////////////////////////////// // 3-column //////////////////////////////////////////////////////////// */ .no-mobile .hyperthermweb.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/hyperthermweb/AD_hprxd_Interactive-1286.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // 4-column //////////////////////////////////////////////////////////// */ .no-mobile .hyperthermweb.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/hyperthermweb/AD_hprxd_Interactive-1286.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone vertical //////////////////////////////////////////////////////////// */ .hyperthermweb.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/hyperthermweb/AD_hprxd_Interactive-1286.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone horizontal //////////////////////////////////////////////////////////// */ .hyperthermweb.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/hyperthermweb/AD_hprxd_Interactive-1286.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPad vertical //////////////////////////////////////////////////////////// */ .hyperthermweb.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/hyperthermweb/AD_hprxd_Interactive-1286.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPad horizontal //////////////////////////////////////////////////////////// */ .hyperthermweb.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/hyperthermweb/AD_hprxd_Interactive-1286.jpg") center center no-repeat; background-size: contain;} /* GUI CSS */ /* END GUI CSS */ /***********************/ /*** CORE Styles ***/ /***********************/ /* Paragraph indentation */ .anewwaterjettrend p { text-indent: 15px; text-align: left} /* Give last paragraph in a section bottom padding before the ensuing subheader */ .anewwaterjettrend .section p:last-of-type { padding-bottom: 16px;} /* Subheader default margin removal */ .anewwaterjettrend h3 { margin: 0;} /* Subheader adjustments on iPhone */ .anewwaterjettrend.iphone h3 { padding-left: 20px;} /* Paragraph indentation for paragraphs immediately following a subheader */ .anewwaterjettrend .keeptogether + p, .anewwaterjettrend p.hyperlink { text-indent: 0;} /* Hyperlink padding */ .anewwaterjettrend p.hyperlink { padding-bottom: 0; padding-top: 16px;} /* Lines between columns - change .png file to your liking */ .anewwaterjettrend .column:not(.c1) p, .anewwaterjettrend .column:not(.c1) ul, .anewwaterjettrend .column:not(.c1) h3 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/anewwaterjettrend/c7c7c7.png") repeat-y top left;} /* Background image for all article pages */ .anewwaterjettrend { background: #fff url("{}") center center repeat; background-size: cover;} /* Colorbox caption/title area background */ #cboxTitle { background: #fff;} /* On page caption indentations */ p.caption { text-indent: 0; margin-bottom: 10px;} /* On page caption indentations adjustments for iPhone */ .iphone p.caption { padding-left: 0; width: 280px;} /* .anewwaterjettrend p, .anewwaterjettrend h1 { text-indent: 0; text-align: left; color: #333}*/ /* Font color for article */ .anewwaterjettrend p, .anewwaterjettrend h1, .anewwaterjettrend h2, .anewwaterjettrend h3, .anewwaterjettrend h4, .anewwaterjettrend li { color: #333;} /* Positioning for list items */ .anewwaterjettrend ul, .anewwaterjettrend ol { padding-left: 20px; list-style: inside;} /* Bottom padding for lists */ .anewwaterjettrend ol, .anewwaterjettrend ul { padding-bottom: 10px;} /* Positioning for wrapper to accomodate for sizes of header/footer */ .anewwaterjettrend .myWrapper { margin-bottom: 25px; top: 30px;} /* iPhone wrapper positioning */ .anewwaterjettrend.iphone .myWrapper { top: 17px; margin-bottom: 3px; margin-left: 17px;} .anewwaterjettrend.iphone .myWrapper .container { margin-left: 18px;} /* Header attributes */ .anewwaterjettrend .header { position: absolute; height: 45px; width: 110%; top: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0', endColorstr='#f9f9f9');/*For IE7-8-9*/ box-shadow: 0 1px 5px #000; z-index: 2;} /* iPhone header attributes */ .anewwaterjettrend.iphone .header { height: 30px; padding-top: 10px; padding-left: 67px; box-shadow: 0 1px 5px #000;} /* h1 tag in header attributes */ .anewwaterjettrend .header h1 { position: relative; top: 12px; color: #000; font-weight: normal; left: -5px;} /* iPhone h1 tag in header attributes */ .anewwaterjettrend.iphone .header h1 { font-size: 14px;} /* Arrow attributes in front of h1 tag in header */ .anewwaterjettrend .header h1 .arrows { font-size: 125%; font-weight: normal;} /* Footer attributes */ .anewwaterjettrend .footer { position: absolute; height: 40px; width: 110%; bottom: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0', endColorstr='#f9f9f9');/*For IE7-8-9*/ box-shadow: 0 1px 5px #000; z-index: 2;} /* MagTitle (overlays on top of footer) attributes */ .anewwaterjettrend .magTitle { display: block; position: absolute; right: 32px; bottom: 5px; z-index: 4;} /* iPhone magTitle (overlays on top of footer) attributes */ .anewwaterjettrend.iphone .magTitle { right: 5px;} /* MagTitle image (overlays on top of footer) attributes */ .anewwaterjettrend .magTitle img { padding-top: 5px;} /* Sidebar attributes */ .anewwaterjettrend .sidebar { position: absolute; background: -webkit-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -moz-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -o-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -ms-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#aaaaaa', endColorstr='#939498');/*For IE7-8-9*/ height: 100%; width: 32px; top: 0; left: 0; box-shadow: 1px 0 5px #000; z-index: 3;} /* Sidebar Connector used only for box shadow purposes if you don't want the sidebar shadow to cover the header */ .anewwaterjettrend .sidebarConnector { position: absolute; background: red; height: 55px; width: 32px; top: 0; left: 0; z-index: 1;} /* Positioning for the content text on the sidebar */ .anewwaterjettrend .sidebarContent { position:absolute; width: 300px; top: 144px; left: -130px; transform:rotate(-90deg); -ms-transform:rotate(-90deg); /* IE 9 */ -moz-transform:rotate(-90deg); /* Firefox */ -webkit-transform:rotate(-90deg); /* Safari and Chrome */ -o-transform:rotate(-90deg); /* Opera */ z-index: 5; color: #fff; text-align: right; height: 32px;} /* Float left style */ .anewwaterjettrend .floatL { float: left;} /* Float right style */ .anewwaterjettrend .floatR { float: right;} /* Clear floats (both left and right) */ .anewwaterjettrend .clearB { clear: both;} /* Pullquote attributes */ .anewwaterjettrend .pullquote { font-size: 20px; color: #999; font-style: italic; padding: 20px; line-height: normal;} /* iPhone portrait image width adjustment */ .anewwaterjettrend.iphone .container { width: 280px;} /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .anewwaterjettrend.grid.page-1 { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .anewwaterjettrend.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/anewwaterjettrend/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .anewwaterjettrend.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/anewwaterjettrend/ipad_port.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .anewwaterjettrend.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/anewwaterjettrend/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .anewwaterjettrend.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/anewwaterjettrend/ipad_land.jpg") center center no-repeat; background-size: contain;} } /* 3-column */ .no-mobile .anewwaterjettrend.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/anewwaterjettrend/ipad_land.jpg") center center no-repeat; background-size: contain;} /* 4-column */ .no-mobile .anewwaterjettrend.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/anewwaterjettrend/ipad_land.jpg") center center no-repeat; background-size: contain;} /* iPhone vertical */ .anewwaterjettrend.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/anewwaterjettrend/iphone_port.jpg") center center no-repeat; background-size: contain;} /* iPhone horizontal */ .anewwaterjettrend.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/anewwaterjettrend/iphone_land.jpg") center center no-repeat; background-size: contain;} /* iPad vertical */ .anewwaterjettrend.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/anewwaterjettrend/ipad_port.jpg") center center no-repeat; background-size: contain;} /* iPad horizontal */ .anewwaterjettrend.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/anewwaterjettrend/ipad_land.jpg") center center no-repeat; background-size: contain;} /* GUI CSS */ /* END GUI CSS */ /* GradientType=0 is top to bottom */ /* GradientType=1 is left to right */ /* Sidebar color */ .anewwaterjettrend .sidebar { position: absolute; background: -webkit-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -moz-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -o-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -ms-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#eb262e', endColorstr='#d12229');/*For IE7-8-9*/} /* h1 tag color in header */ .anewwaterjettrend .header h1 { color: #d12229;} /* MagTitle position for when using images instead of text */ .anewwaterjettrend .magTitle { bottom: -2px;} /***********************/ /*** CORE Styles ***/ /***********************/ /* Paragraph indentation */ .whatcausesdross p { text-indent: 15px; text-align: left} /* Give last paragraph in a section bottom padding before the ensuing subheader */ .whatcausesdross .section p:last-of-type { padding-bottom: 16px;} /* Subheader default margin removal */ .whatcausesdross h3 { margin: 0;} /* Subheader adjustments on iPhone */ .whatcausesdross.iphone h3 { padding-left: 20px;} /* Paragraph indentation for paragraphs immediately following a subheader */ .whatcausesdross .keeptogether + p, .whatcausesdross p.hyperlink { text-indent: 0;} /* Hyperlink padding */ .whatcausesdross p.hyperlink { padding-bottom: 0; padding-top: 16px;} /* Lines between columns - change .png file to your liking */ .whatcausesdross .column:not(.c1) p, .whatcausesdross .column:not(.c1) ul, .whatcausesdross .column:not(.c1) h3 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/whatcausesdross/c7c7c7.png") repeat-y top left;} /* Background image for all article pages */ .whatcausesdross { background: #fff url("{}") center center repeat; background-size: cover;} /* Colorbox caption/title area background */ #cboxTitle { background: #fff;} /* On page caption indentations */ p.caption { text-indent: 0; margin-bottom: 10px;} /* On page caption indentations adjustments for iPhone */ .iphone p.caption { padding-left: 0; width: 280px;} /* .whatcausesdross p, .whatcausesdross h1 { text-indent: 0; text-align: left; color: #333}*/ /* Font color for article */ .whatcausesdross p, .whatcausesdross h1, .whatcausesdross h2, .whatcausesdross h3, .whatcausesdross h4, .whatcausesdross li { color: #333;} /* Positioning for list items */ .whatcausesdross ul, .whatcausesdross ol { padding-left: 20px; list-style: inside;} /* Bottom padding for lists */ .whatcausesdross ol, .whatcausesdross ul { padding-bottom: 10px;} /* Positioning for wrapper to accomodate for sizes of header/footer */ .whatcausesdross .myWrapper { margin-bottom: 25px; top: 30px;} /* iPhone wrapper positioning */ .whatcausesdross.iphone .myWrapper { top: 17px; margin-bottom: 3px; margin-left: 17px;} .whatcausesdross.iphone .myWrapper .container { margin-left: 18px;} .whatcausesdross .myWrapper iframe { padding-left: 20px;} .whatcausesdross.iphone .myWrapper iframe { padding-left: 0;} /* Header attributes */ .whatcausesdross .header { position: absolute; height: 45px; width: 110%; top: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0',endColorstr='#f9f9f9'); box-shadow: 0 1px 5px #000; z-index: 2;} /* iPhone header attributes */ .whatcausesdross.iphone .header { height: 30px; padding-top: 10px; padding-left: 67px; box-shadow: 0 1px 5px #000;} /* h1 tag in header attributes */ .whatcausesdross .header h1 { position: relative; top: 12px; color: #000; font-weight: normal; left: -5px;} /* iPhone h1 tag in header attributes */ .whatcausesdross.iphone .header h1 { font-size: 14px;} /* Arrow attributes in front of h1 tag in header */ .whatcausesdross .header h1 .arrows { font-size: 125%; font-weight: normal;} /* Footer attributes */ .whatcausesdross .footer { position: absolute; height: 40px; width: 110%; bottom: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0',endColorstr='#f9f9f9'); box-shadow: 0 1px 5px #000; z-index: 2;} /* MagTitle (overlays on top of footer) attributes */ .whatcausesdross .magTitle { display: block; position: absolute; right: 32px; bottom: 5px; z-index: 4;} /* iPhone magTitle (overlays on top of footer) attributes */ .whatcausesdross.iphone .magTitle { right: 5px;} /* MagTitle image (overlays on top of footer) attributes */ .whatcausesdross .magTitle img { padding-top: 5px;} /* Sidebar attributes */ .whatcausesdross .sidebar { position: absolute; background: -webkit-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -moz-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -o-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -ms-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#aaaaaa',endColorstr='#939498'); height: 100%; width: 32px; top: 0; left: 0; box-shadow: 1px 0 5px #000; z-index: 3;} /* Sidebar Connector used only for box shadow purposes if you don't want the sidebar shadow to cover the header */ .whatcausesdross .sidebarConnector { position: absolute; background: -moz-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -o-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -ms-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#aaaaaa',endColorstr='#939498'); height: 55px; width: 32px; top: 0; left: 0; z-index: 1;} /* Positioning for the content text on the sidebar */ .whatcausesdross .sidebarContent { position:absolute; width: 300px; top: 144px; left: -130px; transform:rotate(-90deg); -ms-transform:rotate(-90deg); /* IE 9 */ -moz-transform:rotate(-90deg); /* Firefox */ -webkit-transform:rotate(-90deg); /* Safari and Chrome */ -o-transform:rotate(-90deg); /* Opera */ z-index: 5; color: #fff; text-align: right; height: 32px;} /* Float left style */ .whatcausesdross .floatL { float: left;} /* Float right style */ .whatcausesdross .floatR { float: right;} /* Clear floats (both left and right) */ .whatcausesdross .clearB { clear: both;} /* Pullquote attributes */ .whatcausesdross .pullquote { font-size: 20px; color: #999; font-style: italic; padding: 20px; line-height: normal;} /* iPhone portrait image width adjustment */ .whatcausesdross.iphone .container { width: 280px;} /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .whatcausesdross.grid.page-1 { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .whatcausesdross.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/whatcausesdross/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .whatcausesdross.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/whatcausesdross/ipad_port.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .whatcausesdross.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/whatcausesdross/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .whatcausesdross.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/whatcausesdross/ipad_land.jpg") center center no-repeat; background-size: contain;} } /* 3-column */ .no-mobile .whatcausesdross.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/whatcausesdross/ipad_land.jpg") center center no-repeat; background-size: contain;} /* 4-column */ .no-mobile .whatcausesdross.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/whatcausesdross/ipad_land.jpg") center center no-repeat; background-size: contain;} /* iPhone vertical */ .whatcausesdross.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/whatcausesdross/iphone_port.jpg") center center no-repeat; background-size: contain;} /* iPhone horizontal */ .whatcausesdross.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/whatcausesdross/iphone_land.jpg") center center no-repeat; background-size: contain;} /* iPad vertical */ .whatcausesdross.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/whatcausesdross/ipad_port.jpg") center center no-repeat; background-size: contain;} /* iPad horizontal */ .whatcausesdross.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/whatcausesdross/ipad_land.jpg") center center no-repeat; background-size: contain;} /* GUI CSS */ /* END GUI CSS */ /* GradientType=0 is top to bottom */ /* GradientType=1 is left to right */ /* Sidebar color */ .whatcausesdross .sidebar { position: absolute; background: -webkit-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -moz-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -o-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -ms-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#eb262e',endColorstr='#d12229');} /* h1 tag color in header */ .whatcausesdross .header h1 { color: #d12229;} /* MagTitle position for when using images instead of text */ .whatcausesdross .magTitle { bottom: -2px;} /***********************/ /*** CORE Styles ***/ /***********************/ /* Paragraph indentation */ .plasmacuttersforlowcostplasmasystems p { text-indent: 15px; text-align: left} /* Give last paragraph in a section bottom padding before the ensuing subheader */ .plasmacuttersforlowcostplasmasystems .section p:last-of-type { padding-bottom: 16px;} /* Subheader default margin removal */ .plasmacuttersforlowcostplasmasystems h3 { margin: 0;} /* Subheader non bold and italicized */ .plasmacuttersforlowcostplasmasystems h3.mild { font-weight: normal; font-style: italic;} /* Subheader adjustments on iPhone */ .plasmacuttersforlowcostplasmasystems.iphone h3 { padding-left: 20px;} /* Paragraph indentation for paragraphs immediately following a subheader */ .plasmacuttersforlowcostplasmasystems .keeptogether + p, .plasmacuttersforlowcostplasmasystems p.hyperlink { text-indent: 0;} /* Hyperlink padding */ .plasmacuttersforlowcostplasmasystems p.hyperlink { padding-bottom: 0; padding-top: 16px;} /* Lines between columns - change .png file to your liking */ .plasmacuttersforlowcostplasmasystems .column:not(.c1) p, .plasmacuttersforlowcostplasmasystems .column:not(.c1) ul, .plasmacuttersforlowcostplasmasystems .column:not(.c1) h3 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/plasmacuttersforlowcostplasmasystems/c7c7c7.png") repeat-y top left;} /* Background image for all article pages */ .plasmacuttersforlowcostplasmasystems { background: #fff url("{}") center center repeat; background-size: cover;} /* Colorbox caption/title area background */ #cboxTitle { background: #fff;} /* On page caption indentations */ p.caption { text-indent: 0; margin-bottom: 10px;} /* On page caption indentations adjustments for iPhone */ .iphone p.caption { padding-left: 0; width: 280px;} /* .plasmacuttersforlowcostplasmasystems p, .plasmacuttersforlowcostplasmasystems h1 { text-indent: 0; text-align: left; color: #333}*/ /* Font color for article */ .plasmacuttersforlowcostplasmasystems p, .plasmacuttersforlowcostplasmasystems h1, .plasmacuttersforlowcostplasmasystems h2, .plasmacuttersforlowcostplasmasystems h3, .plasmacuttersforlowcostplasmasystems h4, .plasmacuttersforlowcostplasmasystems li { color: #333;} /* Positioning for list items */ .plasmacuttersforlowcostplasmasystems ul, .plasmacuttersforlowcostplasmasystems ol { padding-left: 20px; list-style: inside;} /* Bottom padding for lists */ .plasmacuttersforlowcostplasmasystems ol, .plasmacuttersforlowcostplasmasystems ul { padding-bottom: 10px;} /* Positioning for wrapper to accomodate for sizes of header/footer */ .plasmacuttersforlowcostplasmasystems .myWrapper { margin-bottom: 25px; top: 30px;} /* iPhone wrapper positioning */ .plasmacuttersforlowcostplasmasystems.iphone .myWrapper { top: 17px; margin-bottom: 3px; margin-left: 17px;} .plasmacuttersforlowcostplasmasystems.iphone .myWrapper .container { margin-left: 18px;} .plasmacuttersforlowcostplasmasystems .myWrapper iframe { padding-left: 20px;} .plasmacuttersforlowcostplasmasystems.iphone .myWrapper iframe { padding-left: 0;} /* Header attributes */ .plasmacuttersforlowcostplasmasystems .header { position: absolute; height: 45px; width: 110%; top: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0',endColorstr='#f9f9f9'); box-shadow: 0 1px 5px #000; z-index: 2;} /* iPhone header attributes */ .plasmacuttersforlowcostplasmasystems.iphone .header { height: 30px; padding-top: 10px; padding-left: 67px; box-shadow: 0 1px 5px #000;} /* h1 tag in header attributes */ .plasmacuttersforlowcostplasmasystems .header h1 { position: relative; top: 12px; color: #000; font-weight: normal; left: -5px;} /* iPhone h1 tag in header attributes */ .plasmacuttersforlowcostplasmasystems.iphone .header h1 { font-size: 14px;} /* Arrow attributes in front of h1 tag in header */ .plasmacuttersforlowcostplasmasystems .header h1 .arrows { font-size: 125%; font-weight: normal;} /* Footer attributes */ .plasmacuttersforlowcostplasmasystems .footer { position: absolute; height: 40px; width: 110%; bottom: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0',endColorstr='#f9f9f9'); box-shadow: 0 1px 5px #000; z-index: 2;} /* MagTitle (overlays on top of footer) attributes */ .plasmacuttersforlowcostplasmasystems .magTitle { display: block; position: absolute; right: 32px; bottom: 5px; z-index: 4;} /* iPhone magTitle (overlays on top of footer) attributes */ .plasmacuttersforlowcostplasmasystems.iphone .magTitle { right: 5px;} /* MagTitle image (overlays on top of footer) attributes */ .plasmacuttersforlowcostplasmasystems .magTitle img { padding-top: 5px;} /* Sidebar attributes */ .plasmacuttersforlowcostplasmasystems .sidebar { position: absolute; background: -webkit-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -moz-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -o-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -ms-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#aaaaaa',endColorstr='#939498'); height: 100%; width: 32px; top: 0; left: 0; box-shadow: 1px 0 5px #000; z-index: 3;} /* Sidebar Connector used only for box shadow purposes if you don't want the sidebar shadow to cover the header */ .plasmacuttersforlowcostplasmasystems .sidebarConnector { position: absolute; background: red; height: 55px; width: 32px; top: 0; left: 0; z-index: 1;} /* Positioning for the content text on the sidebar */ .plasmacuttersforlowcostplasmasystems .sidebarContent { position:absolute; width: 300px; top: 144px; left: -130px; transform:rotate(-90deg); -ms-transform:rotate(-90deg); /* IE 9 */ -moz-transform:rotate(-90deg); /* Firefox */ -webkit-transform:rotate(-90deg); /* Safari and Chrome */ -o-transform:rotate(-90deg); /* Opera */ z-index: 5; color: #fff; text-align: right; height: 32px;} /* Float left style */ .plasmacuttersforlowcostplasmasystems .floatL { float: left;} /* Float right style */ .plasmacuttersforlowcostplasmasystems .floatR { float: right;} /* Clear floats (both left and right) */ .plasmacuttersforlowcostplasmasystems .clearB { clear: both;} /* Pullquote attributes */ .plasmacuttersforlowcostplasmasystems .pullquote { font-size: 20px; color: #999; font-style: italic; padding: 20px; line-height: normal;} /* iPhone portrait image width adjustment */ .plasmacuttersforlowcostplasmasystems.iphone .container { width: 280px;} /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .plasmacuttersforlowcostplasmasystems.grid.page-1 { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .plasmacuttersforlowcostplasmasystems.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/plasmacuttersforlowcostplasmasystems/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .plasmacuttersforlowcostplasmasystems.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/plasmacuttersforlowcostplasmasystems/ipad_port.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .plasmacuttersforlowcostplasmasystems.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/plasmacuttersforlowcostplasmasystems/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .plasmacuttersforlowcostplasmasystems.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/plasmacuttersforlowcostplasmasystems/ipad_land.jpg") center center no-repeat; background-size: contain;} } /* 3-column */ .no-mobile .plasmacuttersforlowcostplasmasystems.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/plasmacuttersforlowcostplasmasystems/ipad_land.jpg") center center no-repeat; background-size: contain;} /* 4-column */ .no-mobile .plasmacuttersforlowcostplasmasystems.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/plasmacuttersforlowcostplasmasystems/ipad_land.jpg") center center no-repeat; background-size: contain;} /* iPhone vertical */ .plasmacuttersforlowcostplasmasystems.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/plasmacuttersforlowcostplasmasystems/iphone_port.jpg") center center no-repeat; background-size: contain;} /* iPhone horizontal */ .plasmacuttersforlowcostplasmasystems.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/plasmacuttersforlowcostplasmasystems/iphone_land.jpg") center center no-repeat; background-size: contain;} /* iPad vertical */ .plasmacuttersforlowcostplasmasystems.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/plasmacuttersforlowcostplasmasystems/ipad_port.jpg") center center no-repeat; background-size: contain;} /* iPad horizontal */ .plasmacuttersforlowcostplasmasystems.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/plasmacuttersforlowcostplasmasystems/ipad_land.jpg") center center no-repeat; background-size: contain;} /* GUI CSS */ /* END GUI CSS */ /* GradientType=0 is top to bottom */ /* GradientType=1 is left to right */ /* Sidebar color */ .plasmacuttersforlowcostplasmasystems .sidebar { position: absolute; background: -webkit-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -moz-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -o-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -ms-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#eb262e',endColorstr='#d12229');} /* h1 tag color in header */ .plasmacuttersforlowcostplasmasystems .header h1 { color: #d12229;} /* MagTitle position for when using images instead of text */ .plasmacuttersforlowcostplasmasystems .magTitle { bottom: -2px;} /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .grid.multicylweb { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .multicylweb.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/multicylweb/Multicyl.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .multicylweb.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/multicylweb/Multicyl.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .multicylweb.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/multicylweb/Multicyl.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .multicylweb.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/multicylweb/Multicyl.jpg") center center no-repeat; background-size: contain;} } /* //////////////////////////////////////////////////////////// // 3-column //////////////////////////////////////////////////////////// */ .no-mobile .multicylweb.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/multicylweb/Multicyl.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // 4-column //////////////////////////////////////////////////////////// */ .no-mobile .multicylweb.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/multicylweb/Multicyl.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone vertical //////////////////////////////////////////////////////////// */ .multicylweb.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/multicylweb/Multicyl.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone horizontal //////////////////////////////////////////////////////////// */ .multicylweb.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/multicylweb/Multicyl.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPad vertical //////////////////////////////////////////////////////////// */ .multicylweb.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/multicylweb/Multicyl.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPad horizontal //////////////////////////////////////////////////////////// */ .multicylweb.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/multicylweb/Multicyl.jpg") center center no-repeat; background-size: contain;} /* GUI CSS */ /* END GUI CSS */ /***********************/ /*** CORE Styles ***/ /***********************/ /* Paragraph indentation */ .newsawsfromfabtech p { text-indent: 15px; text-align: left} /* Give last paragraph in a section bottom padding before the ensuing subheader */ .newsawsfromfabtech .section p:last-of-type { padding-bottom: 16px;} /* Subheader default margin removal */ .newsawsfromfabtech h3 { margin: 0;} /* Subheader non bold and italicized */ .newsawsfromfabtech h3.mild { font-weight: normal; font-style: italic;} /* Subheader adjustments on iPhone */ .newsawsfromfabtech.iphone h3 { padding-left: 20px;} /* Paragraph indentation for paragraphs immediately following a subheader */ .newsawsfromfabtech .keeptogether + p, .newsawsfromfabtech p.hyperlink { text-indent: 0;} /* Hyperlink padding */ .newsawsfromfabtech p.hyperlink { padding-bottom: 0; padding-top: 16px;} /* Lines between columns - change .png file to your liking */ .newsawsfromfabtech .column:not(.c1) p, .newsawsfromfabtech .column:not(.c1) ul, .newsawsfromfabtech .column:not(.c1) h3 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/newsawsfromfabtech/c7c7c7.png") repeat-y top left;} /* Background image for all article pages */ .newsawsfromfabtech { background: #fff url("{}") center center repeat; background-size: cover;} /* Colorbox caption/title area background */ #cboxTitle { background: #fff;} /* On page caption indentations */ p.caption { text-indent: 0; margin-bottom: 10px;} /* On page caption indentations adjustments for iPhone */ .iphone p.caption { padding-left: 0; width: 280px;} /* .newsawsfromfabtech p, .newsawsfromfabtech h1 { text-indent: 0; text-align: left; color: #333}*/ /* Font color for article */ .newsawsfromfabtech p, .newsawsfromfabtech h1, .newsawsfromfabtech h2, .newsawsfromfabtech h3, .newsawsfromfabtech h4, .newsawsfromfabtech li { color: #333;} /* Positioning for list items */ .newsawsfromfabtech ul, .newsawsfromfabtech ol { padding-left: 20px; list-style: inside;} /* Bottom padding for lists */ .newsawsfromfabtech ol, .newsawsfromfabtech ul { padding-bottom: 10px;} /* Positioning for wrapper to accomodate for sizes of header/footer */ .newsawsfromfabtech .myWrapper { margin-bottom: 25px; top: 30px;} /* iPhone wrapper positioning */ .newsawsfromfabtech.iphone .myWrapper { top: 17px; margin-bottom: 3px; margin-left: 17px;} .newsawsfromfabtech.iphone .myWrapper .container { margin-left: 18px;} .newsawsfromfabtech .myWrapper iframe { padding-left: 20px;} .newsawsfromfabtech.iphone .myWrapper iframe { padding-left: 0;} /* Header attributes */ .newsawsfromfabtech .header { position: absolute; height: 45px; width: 110%; top: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0',endColorstr='#f9f9f9'); box-shadow: 0 1px 5px #000; z-index: 2;} /* iPhone header attributes */ .newsawsfromfabtech.iphone .header { height: 30px; padding-top: 10px; padding-left: 67px; box-shadow: 0 1px 5px #000;} /* h1 tag in header attributes */ .newsawsfromfabtech .header h1 { position: relative; top: 12px; color: #000; font-weight: normal; left: -5px;} /* iPhone h1 tag in header attributes */ .newsawsfromfabtech.iphone .header h1 { font-size: 14px;} /* Arrow attributes in front of h1 tag in header */ .newsawsfromfabtech .header h1 .arrows { font-size: 125%; font-weight: normal;} /* Footer attributes */ .newsawsfromfabtech .footer { position: absolute; height: 40px; width: 110%; bottom: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0',endColorstr='#f9f9f9'); box-shadow: 0 1px 5px #000; z-index: 2;} /* MagTitle (overlays on top of footer) attributes */ .newsawsfromfabtech .magTitle { display: block; position: absolute; right: 32px; bottom: 5px; z-index: 4;} /* iPhone magTitle (overlays on top of footer) attributes */ .newsawsfromfabtech.iphone .magTitle { right: 5px;} /* MagTitle image (overlays on top of footer) attributes */ .newsawsfromfabtech .magTitle img { padding-top: 5px;} /* Sidebar attributes */ .newsawsfromfabtech .sidebar { position: absolute; background: -webkit-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -moz-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -o-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -ms-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#aaaaaa',endColorstr='#939498'); height: 100%; width: 32px; top: 0; left: 0; box-shadow: 1px 0 5px #000; z-index: 3;} /* Sidebar Connector used only for box shadow purposes if you don't want the sidebar shadow to cover the header */ .newsawsfromfabtech .sidebarConnector { position: absolute; background: red; height: 55px; width: 32px; top: 0; left: 0; z-index: 1;} /* Positioning for the content text on the sidebar */ .newsawsfromfabtech .sidebarContent { position:absolute; width: 300px; top: 144px; left: -130px; transform:rotate(-90deg); -ms-transform:rotate(-90deg); /* IE 9 */ -moz-transform:rotate(-90deg); /* Firefox */ -webkit-transform:rotate(-90deg); /* Safari and Chrome */ -o-transform:rotate(-90deg); /* Opera */ z-index: 5; color: #fff; text-align: right; height: 32px;} /* Float left style */ .newsawsfromfabtech .floatL { float: left;} /* Float right style */ .newsawsfromfabtech .floatR { float: right;} /* Clear floats (both left and right) */ .newsawsfromfabtech .clearB { clear: both;} /* Pullquote attributes */ .newsawsfromfabtech .pullquote { font-size: 20px; color: #999; font-style: italic; padding: 20px; line-height: normal;} /* iPhone portrait image width adjustment */ .newsawsfromfabtech.iphone .container { width: 280px;} /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .newsawsfromfabtech.grid.page-1 { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .newsawsfromfabtech.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/newsawsfromfabtech/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .newsawsfromfabtech.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/newsawsfromfabtech/ipad_port.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .newsawsfromfabtech.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/newsawsfromfabtech/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .newsawsfromfabtech.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/newsawsfromfabtech/ipad_land.jpg") center center no-repeat; background-size: contain;} } /* 3-column */ .no-mobile .newsawsfromfabtech.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/newsawsfromfabtech/ipad_land.jpg") center center no-repeat; background-size: contain;} /* 4-column */ .no-mobile .newsawsfromfabtech.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/newsawsfromfabtech/ipad_land.jpg") center center no-repeat; background-size: contain;} /* iPhone vertical */ .newsawsfromfabtech.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/newsawsfromfabtech/iphone_port.jpg") center center no-repeat; background-size: contain;} /* iPhone horizontal */ .newsawsfromfabtech.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/newsawsfromfabtech/iphone_land.jpg") center center no-repeat; background-size: contain;} /* iPad vertical */ .newsawsfromfabtech.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/newsawsfromfabtech/ipad_port.jpg") center center no-repeat; background-size: contain;} /* iPad horizontal */ .newsawsfromfabtech.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/newsawsfromfabtech/ipad_land.jpg") center center no-repeat; background-size: contain;} /* GUI CSS */ /* END GUI CSS */ /* GradientType=0 is top to bottom */ /* GradientType=1 is left to right */ /* Sidebar color */ .newsawsfromfabtech .sidebar { position: absolute; background: -webkit-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -moz-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -o-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -ms-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#eb262e',endColorstr='#d12229');} /* h1 tag color in header */ .newsawsfromfabtech .header h1 { color: #d12229;} /* MagTitle position for when using images instead of text */ .newsawsfromfabtech .magTitle { bottom: -2px;} /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .grid.doallsawingproducts { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .doallsawingproducts.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/doallsawingproducts/DoAll.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .doallsawingproducts.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/doallsawingproducts/DoAll.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .doallsawingproducts.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/doallsawingproducts/DoAll.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .doallsawingproducts.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/doallsawingproducts/DoAll.jpg") center center no-repeat; background-size: contain;} } /* //////////////////////////////////////////////////////////// // 3-column //////////////////////////////////////////////////////////// */ .no-mobile .doallsawingproducts.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/doallsawingproducts/DoAll.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // 4-column //////////////////////////////////////////////////////////// */ .no-mobile .doallsawingproducts.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/doallsawingproducts/DoAll.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone vertical //////////////////////////////////////////////////////////// */ .doallsawingproducts.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/doallsawingproducts/DoAll.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone horizontal //////////////////////////////////////////////////////////// */ .doallsawingproducts.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/doallsawingproducts/DoAll.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPad vertical //////////////////////////////////////////////////////////// */ .doallsawingproducts.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/doallsawingproducts/DoAll.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPad horizontal //////////////////////////////////////////////////////////// */ .doallsawingproducts.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/doallsawingproducts/DoAll.jpg") center center no-repeat; background-size: contain;} /* GUI CSS */ /* END GUI CSS */ /***********************/ /*** CORE Styles ***/ /***********************/ /* Paragraph indentation */ .bendingthickplate p { text-indent: 15px; text-align: left} /* Give last paragraph in a section bottom padding before the ensuing subheader */ .bendingthickplate .section p:last-of-type { padding-bottom: 16px;} /* Subheader default margin removal */ .bendingthickplate h3 { margin: 0;} /* Subheader non bold and italicized */ .bendingthickplate h3.mild { font-weight: normal; font-style: italic;} /* Subheader adjustments on iPhone */ .bendingthickplate.iphone h3 { padding-left: 20px;} /* Paragraph indentation for paragraphs immediately following a subheader */ .bendingthickplate .keeptogether + p, .bendingthickplate p.hyperlink { text-indent: 0;} /* Hyperlink padding */ .bendingthickplate p.hyperlink { padding-bottom: 0; padding-top: 16px;} /* Lines between columns - change .png file to your liking */ .bendingthickplate .column:not(.c1) p, .bendingthickplate .column:not(.c1) ul, .bendingthickplate .column:not(.c1) h3 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingthickplate/c7c7c7.png") repeat-y top left;} /* Background image for all article pages */ .bendingthickplate { background: #fff url("{}") center center repeat; background-size: cover;} /* Colorbox caption/title area background */ #cboxTitle { background: #fff;} /* On page caption indentations */ p.caption { text-indent: 0; margin-bottom: 10px;} /* On page caption indentations adjustments for iPhone */ .iphone p.caption { padding-left: 0; width: 280px;} /* .bendingthickplate p, .bendingthickplate h1 { text-indent: 0; text-align: left; color: #333}*/ /* Font color for article */ .bendingthickplate p, .bendingthickplate h1, .bendingthickplate h2, .bendingthickplate h3, .bendingthickplate h4, .bendingthickplate li { color: #333;} /* Positioning for list items */ .bendingthickplate ul, .bendingthickplate ol { padding-left: 20px; list-style: inside;} /* Bottom padding for lists */ .bendingthickplate ol, .bendingthickplate ul { padding-bottom: 10px;} /* Positioning for wrapper to accomodate for sizes of header/footer */ .bendingthickplate .myWrapper { margin-bottom: 25px; top: 30px;} /* iPhone wrapper positioning */ .bendingthickplate.iphone .myWrapper { top: 17px; margin-bottom: 3px; margin-left: 17px;} .bendingthickplate.iphone .myWrapper .container { margin-left: 18px;} .bendingthickplate .myWrapper iframe { padding-left: 20px;} .bendingthickplate.iphone .myWrapper iframe { padding-left: 0;} /* Header attributes */ .bendingthickplate .header { position: absolute; height: 45px; width: 110%; top: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0',endColorstr='#f9f9f9'); box-shadow: 0 1px 5px #000; z-index: 2;} /* iPhone header attributes */ .bendingthickplate.iphone .header { height: 30px; padding-top: 10px; padding-left: 67px; box-shadow: 0 1px 5px #000;} /* h1 tag in header attributes */ .bendingthickplate .header h1 { position: relative; top: 12px; color: #000; font-weight: normal; left: -5px;} /* iPhone h1 tag in header attributes */ .bendingthickplate.iphone .header h1 { font-size: 14px;} /* Arrow attributes in front of h1 tag in header */ .bendingthickplate .header h1 .arrows { font-size: 125%; font-weight: normal;} /* Footer attributes */ .bendingthickplate .footer { position: absolute; height: 40px; width: 110%; bottom: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0',endColorstr='#f9f9f9'); box-shadow: 0 1px 5px #000; z-index: 2;} /* MagTitle (overlays on top of footer) attributes */ .bendingthickplate .magTitle { display: block; position: absolute; right: 32px; bottom: 5px; z-index: 4;} /* iPhone magTitle (overlays on top of footer) attributes */ .bendingthickplate.iphone .magTitle { right: 5px;} /* MagTitle image (overlays on top of footer) attributes */ .bendingthickplate .magTitle img { padding-top: 5px;} /* Sidebar attributes */ .bendingthickplate .sidebar { position: absolute; background: -webkit-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -moz-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -o-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -ms-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#aaaaaa',endColorstr='#939498'); height: 100%; width: 32px; top: 0; left: 0; box-shadow: 1px 0 5px #000; z-index: 3;} /* Sidebar Connector used only for box shadow purposes if you don't want the sidebar shadow to cover the header */ .bendingthickplate .sidebarConnector { position: absolute; background: red; height: 55px; width: 32px; top: 0; left: 0; z-index: 1;} /* Positioning for the content text on the sidebar */ .bendingthickplate .sidebarContent { position:absolute; width: 300px; top: 144px; left: -130px; transform:rotate(-90deg); -ms-transform:rotate(-90deg); /* IE 9 */ -moz-transform:rotate(-90deg); /* Firefox */ -webkit-transform:rotate(-90deg); /* Safari and Chrome */ -o-transform:rotate(-90deg); /* Opera */ z-index: 5; color: #fff; text-align: right; height: 32px;} /* Float left style */ .bendingthickplate .floatL { float: left;} /* Float right style */ .bendingthickplate .floatR { float: right;} /* Clear floats (both left and right) */ .bendingthickplate .clearB { clear: both;} /* Pullquote attributes */ .bendingthickplate .pullquote { font-size: 20px; color: #999; font-style: italic; padding: 20px; line-height: normal;} /* iPhone portrait image width adjustment */ .bendingthickplate.iphone .container { width: 280px;} /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .bendingthickplate.grid.page-1 { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .bendingthickplate.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingthickplate/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .bendingthickplate.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingthickplate/ipad_port.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .bendingthickplate.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingthickplate/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .bendingthickplate.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingthickplate/ipad_land.jpg") center center no-repeat; background-size: contain;} } /* 3-column */ .no-mobile .bendingthickplate.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingthickplate/ipad_land.jpg") center center no-repeat; background-size: contain;} /* 4-column */ .no-mobile .bendingthickplate.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingthickplate/ipad_land.jpg") center center no-repeat; background-size: contain;} /* iPhone vertical */ .bendingthickplate.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingthickplate/iphone_port.jpg") center center no-repeat; background-size: contain;} /* iPhone horizontal */ .bendingthickplate.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingthickplate/iphone_land.jpg") center center no-repeat; background-size: contain;} /* iPad vertical */ .bendingthickplate.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingthickplate/ipad_port.jpg") center center no-repeat; background-size: contain;} /* iPad horizontal */ .bendingthickplate.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingthickplate/ipad_land.jpg") center center no-repeat; background-size: contain;} /* GUI CSS */ /* END GUI CSS */ /* GradientType=0 is top to bottom */ /* GradientType=1 is left to right */ /* Sidebar color */ .bendingthickplate .sidebar { position: absolute; background: -webkit-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -moz-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -o-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -ms-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#eb262e',endColorstr='#d12229');} /* h1 tag color in header */ .bendingthickplate .header h1 { color: #d12229;} /* MagTitle position for when using images instead of text */ .bendingthickplate .magTitle { bottom: -2px;} /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .grid.vibroindustries { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .vibroindustries.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/vibroindustries/vibro_1266.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .vibroindustries.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/vibroindustries/vibro_1266.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .vibroindustries.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/vibroindustries/vibro_1266.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .vibroindustries.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/vibroindustries/vibro_1266.jpg") center center no-repeat; background-size: contain;} } /* //////////////////////////////////////////////////////////// // 3-column //////////////////////////////////////////////////////////// */ .no-mobile .vibroindustries.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/vibroindustries/vibro_1266.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // 4-column //////////////////////////////////////////////////////////// */ .no-mobile .vibroindustries.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/vibroindustries/vibro_1266.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone vertical //////////////////////////////////////////////////////////// */ .vibroindustries.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/vibroindustries/vibro_1266.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone horizontal //////////////////////////////////////////////////////////// */ .vibroindustries.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/vibroindustries/vibro_1266.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPad vertical //////////////////////////////////////////////////////////// */ .vibroindustries.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/vibroindustries/vibro_1266.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPad horizontal //////////////////////////////////////////////////////////// */ .vibroindustries.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/vibroindustries/vibro_1266.jpg") center center no-repeat; background-size: contain;} /* GUI CSS */ /* END GUI CSS */ /***********************/ /*** CORE Styles ***/ /***********************/ /* Paragraph indentation */ .gettingmorefromanironworker p { text-indent: 15px; text-align: left} /* Give last paragraph in a section bottom padding before the ensuing subheader */ .gettingmorefromanironworker .section p:last-of-type { padding-bottom: 16px;} /* Subheader default margin removal */ .gettingmorefromanironworker h3 { margin: 0;} /* Subheader non bold and italicized */ .gettingmorefromanironworker h3.mild { font-weight: normal; font-style: italic;} /* Subheader adjustments on iPhone */ .gettingmorefromanironworker.iphone h3 { padding-left: 20px;} /* Paragraph indentation for paragraphs immediately following a subheader */ .gettingmorefromanironworker .keeptogether + p, .gettingmorefromanironworker p.hyperlink { text-indent: 0;} /* Hyperlink padding */ .gettingmorefromanironworker p.hyperlink { padding-bottom: 0; padding-top: 16px;} /* Lines between columns - change .png file to your liking */ .gettingmorefromanironworker .column:not(.c1) p, .gettingmorefromanironworker .column:not(.c1) ul, .gettingmorefromanironworker .column:not(.c1) h3 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/gettingmorefromanironworker/c7c7c7.png") repeat-y top left;} /* Background image for all article pages */ .gettingmorefromanironworker { background: #fff url("{}") center center repeat; background-size: cover;} /* Colorbox caption/title area background */ #cboxTitle { background: #fff;} /* On page caption indentations */ p.caption { text-indent: 0; margin-bottom: 10px;} /* On page caption indentations adjustments for iPhone */ .iphone p.caption { padding-left: 0; width: 280px;} /* .gettingmorefromanironworker p, .gettingmorefromanironworker h1 { text-indent: 0; text-align: left; color: #333}*/ /* Font color for article */ .gettingmorefromanironworker p, .gettingmorefromanironworker h1, .gettingmorefromanironworker h2, .gettingmorefromanironworker h3, .gettingmorefromanironworker h4, .gettingmorefromanironworker li { color: #333;} /* Positioning for list items */ .gettingmorefromanironworker ul, .gettingmorefromanironworker ol { padding-left: 20px; list-style: inside;} /* Bottom padding for lists */ .gettingmorefromanironworker ol, .gettingmorefromanironworker ul { padding-bottom: 10px;} /* Positioning for wrapper to accomodate for sizes of header/footer */ .gettingmorefromanironworker .myWrapper { margin-bottom: 25px; top: 30px;} /* iPhone wrapper positioning */ .gettingmorefromanironworker.iphone .myWrapper { top: 17px; margin-bottom: 3px; margin-left: 17px;} .gettingmorefromanironworker.iphone .myWrapper .container { margin-left: 18px;} .gettingmorefromanironworker .myWrapper iframe { padding-left: 20px;} .gettingmorefromanironworker.iphone .myWrapper iframe { padding-left: 0;} /* Header attributes */ .gettingmorefromanironworker .header { position: absolute; height: 45px; width: 110%; top: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0',endColorstr='#f9f9f9'); box-shadow: 0 1px 5px #000; z-index: 2;} /* iPhone header attributes */ .gettingmorefromanironworker.iphone .header { height: 30px; padding-top: 10px; padding-left: 67px; box-shadow: 0 1px 5px #000;} /* h1 tag in header attributes */ .gettingmorefromanironworker .header h1 { position: relative; top: 12px; color: #000; font-weight: normal; left: -5px;} /* iPhone h1 tag in header attributes */ .gettingmorefromanironworker.iphone .header h1 { font-size: 14px;} /* Arrow attributes in front of h1 tag in header */ .gettingmorefromanironworker .header h1 .arrows { font-size: 125%; font-weight: normal;} /* Footer attributes */ .gettingmorefromanironworker .footer { position: absolute; height: 40px; width: 110%; bottom: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0',endColorstr='#f9f9f9'); box-shadow: 0 1px 5px #000; z-index: 2;} /* MagTitle (overlays on top of footer) attributes */ .gettingmorefromanironworker .magTitle { display: block; position: absolute; right: 32px; bottom: 5px; z-index: 4;} /* iPhone magTitle (overlays on top of footer) attributes */ .gettingmorefromanironworker.iphone .magTitle { right: 5px;} /* MagTitle image (overlays on top of footer) attributes */ .gettingmorefromanironworker .magTitle img { padding-top: 5px;} /* Sidebar attributes */ .gettingmorefromanironworker .sidebar { position: absolute; background: -webkit-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -moz-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -o-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -ms-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#aaaaaa',endColorstr='#939498'); height: 100%; width: 32px; top: 0; left: 0; box-shadow: 1px 0 5px #000; z-index: 3;} /* Sidebar Connector used only for box shadow purposes if you don't want the sidebar shadow to cover the header */ .gettingmorefromanironworker .sidebarConnector { position: absolute; background: red; height: 55px; width: 32px; top: 0; left: 0; z-index: 1;} /* Positioning for the content text on the sidebar */ .gettingmorefromanironworker .sidebarContent { position:absolute; width: 300px; top: 144px; left: -130px; transform:rotate(-90deg); -ms-transform:rotate(-90deg); /* IE 9 */ -moz-transform:rotate(-90deg); /* Firefox */ -webkit-transform:rotate(-90deg); /* Safari and Chrome */ -o-transform:rotate(-90deg); /* Opera */ z-index: 5; color: #fff; text-align: right; height: 32px;} /* Float left style */ .gettingmorefromanironworker .floatL { float: left;} /* Float right style */ .gettingmorefromanironworker .floatR { float: right;} /* Clear floats (both left and right) */ .gettingmorefromanironworker .clearB { clear: both;} /* Pullquote attributes */ .gettingmorefromanironworker .pullquote { font-size: 20px; color: #999; font-style: italic; padding: 20px; line-height: normal;} /* iPhone portrait image width adjustment */ .gettingmorefromanironworker.iphone .container { width: 280px;} /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .gettingmorefromanironworker.grid.page-1 { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .gettingmorefromanironworker.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/gettingmorefromanironworker/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .gettingmorefromanironworker.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/gettingmorefromanironworker/ipad_port.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .gettingmorefromanironworker.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/gettingmorefromanironworker/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .gettingmorefromanironworker.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/gettingmorefromanironworker/ipad_land.jpg") center center no-repeat; background-size: contain;} } /* 3-column */ .no-mobile .gettingmorefromanironworker.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/gettingmorefromanironworker/ipad_land.jpg") center center no-repeat; background-size: contain;} /* 4-column */ .no-mobile .gettingmorefromanironworker.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/gettingmorefromanironworker/ipad_land.jpg") center center no-repeat; background-size: contain;} /* iPhone vertical */ .gettingmorefromanironworker.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/gettingmorefromanironworker/iphone_port.jpg") center center no-repeat; background-size: contain;} /* iPhone horizontal */ .gettingmorefromanironworker.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/gettingmorefromanironworker/iphone_land.jpg") center center no-repeat; background-size: contain;} /* iPad vertical */ .gettingmorefromanironworker.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/gettingmorefromanironworker/ipad_port.jpg") center center no-repeat; background-size: contain;} /* iPad horizontal */ .gettingmorefromanironworker.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/gettingmorefromanironworker/ipad_land.jpg") center center no-repeat; background-size: contain;} /* GUI CSS */ /* END GUI CSS */ /* GradientType=0 is top to bottom */ /* GradientType=1 is left to right */ /* Sidebar color */ .gettingmorefromanironworker .sidebar { position: absolute; background: -webkit-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -moz-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -o-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -ms-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#eb262e',endColorstr='#d12229');} /* h1 tag color in header */ .gettingmorefromanironworker .header h1 { color: #d12229;} /* MagTitle position for when using images instead of text */ .gettingmorefromanironworker .magTitle { bottom: -2px;} /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .grid.ophir { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .ophir.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/ophir/Ophir-1266.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .ophir.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/ophir/Ophir-1266.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .ophir.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/ophir/Ophir-1266.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .ophir.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/ophir/Ophir-1266.jpg") center center no-repeat; background-size: contain;} } /* //////////////////////////////////////////////////////////// // 3-column //////////////////////////////////////////////////////////// */ .no-mobile .ophir.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/ophir/Ophir-1266.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // 4-column //////////////////////////////////////////////////////////// */ .no-mobile .ophir.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/ophir/Ophir-1266.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone vertical //////////////////////////////////////////////////////////// */ .ophir.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/ophir/Ophir-1266.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone horizontal //////////////////////////////////////////////////////////// */ .ophir.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/ophir/Ophir-1266.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPad vertical //////////////////////////////////////////////////////////// */ .ophir.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/ophir/Ophir-1266.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPad horizontal //////////////////////////////////////////////////////////// */ .ophir.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/ophir/Ophir-1266.jpg") center center no-repeat; background-size: contain;} /* GUI CSS */ /* END GUI CSS */ /***********************/ /*** CORE Styles ***/ /***********************/ /* Paragraph indentation */ .productiononfire p { text-indent: 15px; text-align: left} /* Give last paragraph in a section bottom padding before the ensuing subheader */ .productiononfire .section p:last-of-type { padding-bottom: 16px;} /* Subheader default margin removal */ .productiononfire h3 { margin: 0;} /* Subheader non bold and italicized */ .productiononfire h3.mild { font-weight: normal; font-style: italic;} /* Subheader adjustments on iPhone */ .productiononfire.iphone h3 { padding-left: 20px;} /* Paragraph indentation for paragraphs immediately following a subheader */ .productiononfire .keeptogether + p, .productiononfire p.hyperlink { text-indent: 0;} /* Hyperlink padding */ .productiononfire p.hyperlink { padding-bottom: 0; padding-top: 16px;} /* Lines between columns - change .png file to your liking */ .productiononfire .column:not(.c1) p, .productiononfire .column:not(.c1) ul, .productiononfire .column:not(.c1) h3 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/productiononfire/c7c7c7.png") repeat-y top left;} /* Background image for all article pages */ .productiononfire { background: #fff url("{}") center center repeat; background-size: cover;} /* Colorbox caption/title area background */ #cboxTitle { background: #fff;} /* On page caption indentations */ p.caption { text-indent: 0; margin-bottom: 10px;} /* On page caption indentations adjustments for iPhone */ .iphone p.caption { padding-left: 0; width: 280px;} /* .productiononfire p, .productiononfire h1 { text-indent: 0; text-align: left; color: #333}*/ /* Font color for article */ .productiononfire p, .productiononfire h1, .productiononfire h2, .productiononfire h3, .productiononfire h4, .productiononfire li { color: #333;} /* Positioning for list items */ .productiononfire ul, .productiononfire ol { padding-left: 20px; list-style: inside;} /* Bottom padding for lists */ .productiononfire ol, .productiononfire ul { padding-bottom: 10px;} /* Positioning for wrapper to accomodate for sizes of header/footer */ .productiononfire .myWrapper { margin-bottom: 25px; top: 30px;} /* iPhone wrapper positioning */ .productiononfire.iphone .myWrapper { top: 17px; margin-bottom: 3px; margin-left: 17px;} .productiononfire.iphone .myWrapper .container { margin-left: 18px;} .productiononfire .myWrapper iframe { padding-left: 20px;} .productiononfire.iphone .myWrapper iframe { padding-left: 0;} /* Header attributes */ .productiononfire .header { position: absolute; height: 45px; width: 110%; top: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0',endColorstr='#f9f9f9'); box-shadow: 0 1px 5px #000; z-index: 2;} /* iPhone header attributes */ .productiononfire.iphone .header { height: 30px; padding-top: 10px; padding-left: 67px; box-shadow: 0 1px 5px #000;} /* h1 tag in header attributes */ .productiononfire .header h1 { position: relative; top: 12px; color: #000; font-weight: normal; left: -5px;} /* iPhone h1 tag in header attributes */ .productiononfire.iphone .header h1 { font-size: 14px;} /* Arrow attributes in front of h1 tag in header */ .productiononfire .header h1 .arrows { font-size: 125%; font-weight: normal;} /* Footer attributes */ .productiononfire .footer { position: absolute; height: 40px; width: 110%; bottom: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0',endColorstr='#f9f9f9'); box-shadow: 0 1px 5px #000; z-index: 2;} /* MagTitle (overlays on top of footer) attributes */ .productiononfire .magTitle { display: block; position: absolute; right: 32px; bottom: 5px; z-index: 4;} /* iPhone magTitle (overlays on top of footer) attributes */ .productiononfire.iphone .magTitle { right: 5px;} /* MagTitle image (overlays on top of footer) attributes */ .productiononfire .magTitle img { padding-top: 5px;} /* Sidebar attributes */ .productiononfire .sidebar { position: absolute; background: -webkit-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -moz-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -o-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -ms-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#aaaaaa',endColorstr='#939498'); height: 100%; width: 32px; top: 0; left: 0; box-shadow: 1px 0 5px #000; z-index: 3;} /* Sidebar Connector used only for box shadow purposes if you don't want the sidebar shadow to cover the header */ .productiononfire .sidebarConnector { position: absolute; background: red; height: 55px; width: 32px; top: 0; left: 0; z-index: 1;} /* Positioning for the content text on the sidebar */ .productiononfire .sidebarContent { position:absolute; width: 300px; top: 144px; left: -130px; transform:rotate(-90deg); -ms-transform:rotate(-90deg); /* IE 9 */ -moz-transform:rotate(-90deg); /* Firefox */ -webkit-transform:rotate(-90deg); /* Safari and Chrome */ -o-transform:rotate(-90deg); /* Opera */ z-index: 5; color: #fff; text-align: right; height: 32px;} /* Float left style */ .productiononfire .floatL { float: left;} /* Float right style */ .productiononfire .floatR { float: right;} /* Clear floats (both left and right) */ .productiononfire .clearB { clear: both;} /* Pullquote attributes */ .productiononfire .pullquote { font-size: 20px; color: #999; font-style: italic; padding: 20px; line-height: normal;} /* iPhone portrait image width adjustment */ .productiononfire.iphone .container { width: 280px;} /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .productiononfire.grid.page-1 { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .productiononfire.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/productiononfire/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .productiononfire.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/productiononfire/ipad_port.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .productiononfire.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/productiononfire/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .productiononfire.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/productiononfire/ipad_land.jpg") center center no-repeat; background-size: contain;} } /* 3-column */ .no-mobile .productiononfire.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/productiononfire/ipad_land.jpg") center center no-repeat; background-size: contain;} /* 4-column */ .no-mobile .productiononfire.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/productiononfire/ipad_land.jpg") center center no-repeat; background-size: contain;} /* iPhone vertical */ .productiononfire.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/productiononfire/iphone_port.jpg") center center no-repeat; background-size: contain;} /* iPhone horizontal */ .productiononfire.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/productiononfire/iphone_land.jpg") center center no-repeat; background-size: contain;} /* iPad vertical */ .productiononfire.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/productiononfire/ipad_port.jpg") center center no-repeat; background-size: contain;} /* iPad horizontal */ .productiononfire.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/productiononfire/ipad_land.jpg") center center no-repeat; background-size: contain;} /* GUI CSS */ /* END GUI CSS */ /* GradientType=0 is top to bottom */ /* GradientType=1 is left to right */ /* Sidebar color */ .productiononfire .sidebar { position: absolute; background: -webkit-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -moz-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -o-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -ms-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#eb262e',endColorstr='#d12229');} /* h1 tag color in header */ .productiononfire .header h1 { color: #d12229;} /* MagTitle position for when using images instead of text */ .productiononfire .magTitle { bottom: -2px;} /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .grid.controlledautomation { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .controlledautomation.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/controlledautomation/controlled-auto-1266.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .controlledautomation.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/controlledautomation/controlled-auto-1266.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .controlledautomation.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/controlledautomation/controlled-auto-1266.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .controlledautomation.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/controlledautomation/controlled-auto-1266.jpg") center center no-repeat; background-size: contain;} } /* //////////////////////////////////////////////////////////// // 3-column //////////////////////////////////////////////////////////// */ .no-mobile .controlledautomation.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/controlledautomation/controlled-auto-1266.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // 4-column //////////////////////////////////////////////////////////// */ .no-mobile .controlledautomation.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/controlledautomation/controlled-auto-1266.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone vertical //////////////////////////////////////////////////////////// */ .controlledautomation.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/controlledautomation/controlled-auto-1266.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPhone horizontal //////////////////////////////////////////////////////////// */ .controlledautomation.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/controlledautomation/controlled-auto-1266.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPad vertical //////////////////////////////////////////////////////////// */ .controlledautomation.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/controlledautomation/controlled-auto-1266.jpg") center center no-repeat; background-size: contain;} /* //////////////////////////////////////////////////////////// // iPad horizontal //////////////////////////////////////////////////////////// */ .controlledautomation.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/controlledautomation/controlled-auto-1266.jpg") center center no-repeat; background-size: contain;} /* GUI CSS */ /* END GUI CSS */ /***********************/ /*** CORE Styles ***/ /***********************/ /* Paragraph indentation */ .bendingtubetheoldfashionedway p { text-indent: 15px; text-align: left} /* Give last paragraph in a section bottom padding before the ensuing subheader */ .bendingtubetheoldfashionedway .section p:last-of-type { padding-bottom: 16px;} /* Subheader default margin removal */ .bendingtubetheoldfashionedway h3 { margin: 0;} /* Subheader non bold and italicized */ .bendingtubetheoldfashionedway h3.mild { font-weight: normal; font-style: italic;} /* Subheader adjustments on iPhone */ .bendingtubetheoldfashionedway.iphone h3 { padding-left: 20px;} /* Paragraph indentation for paragraphs immediately following a subheader */ .bendingtubetheoldfashionedway .keeptogether + p, .bendingtubetheoldfashionedway p.hyperlink { text-indent: 0;} /* Hyperlink padding */ .bendingtubetheoldfashionedway p.hyperlink { padding-bottom: 0; padding-top: 16px;} /* Lines between columns - change .png file to your liking */ .bendingtubetheoldfashionedway .column:not(.c1) p, .bendingtubetheoldfashionedway .column:not(.c1) ul, .bendingtubetheoldfashionedway .column:not(.c1) h3 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingtubetheoldfashionedway/c7c7c7.png") repeat-y top left;} /* Background image for all article pages */ .bendingtubetheoldfashionedway { background: #fff url("{}") center center repeat; background-size: cover;} /* Colorbox caption/title area background */ #cboxTitle { background: #fff;} /* On page caption indentations */ p.caption { text-indent: 0; margin-bottom: 10px;} /* On page caption indentations adjustments for iPhone */ .iphone p.caption { padding-left: 0; width: 280px;} /* .bendingtubetheoldfashionedway p, .bendingtubetheoldfashionedway h1 { text-indent: 0; text-align: left; color: #333}*/ /* Font color for article */ .bendingtubetheoldfashionedway p, .bendingtubetheoldfashionedway h1, .bendingtubetheoldfashionedway h2, .bendingtubetheoldfashionedway h3, .bendingtubetheoldfashionedway h4, .bendingtubetheoldfashionedway li { color: #333;} /* Positioning for list items */ .bendingtubetheoldfashionedway ul, .bendingtubetheoldfashionedway ol { padding-left: 20px; list-style: inside;} /* Bottom padding for lists */ .bendingtubetheoldfashionedway ol, .bendingtubetheoldfashionedway ul { padding-bottom: 10px;} /* Positioning for wrapper to accomodate for sizes of header/footer */ .bendingtubetheoldfashionedway .myWrapper { margin-bottom: 25px; top: 30px;} /* iPhone wrapper positioning */ .bendingtubetheoldfashionedway.iphone .myWrapper { top: 17px; margin-bottom: 3px; margin-left: 17px;} .bendingtubetheoldfashionedway.iphone .myWrapper .container { margin-left: 18px;} .bendingtubetheoldfashionedway .myWrapper iframe { padding-left: 20px;} .bendingtubetheoldfashionedway.iphone .myWrapper iframe { padding-left: 0;} /* Header attributes */ .bendingtubetheoldfashionedway .header { position: absolute; height: 45px; width: 110%; top: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0',endColorstr='#f9f9f9'); box-shadow: 0 1px 5px #000; z-index: 2;} /* iPhone header attributes */ .bendingtubetheoldfashionedway.iphone .header { height: 30px; padding-top: 10px; padding-left: 67px; box-shadow: 0 1px 5px #000;} /* h1 tag in header attributes */ .bendingtubetheoldfashionedway .header h1 { position: relative; top: 12px; color: #000; font-weight: normal; left: -5px;} /* iPhone h1 tag in header attributes */ .bendingtubetheoldfashionedway.iphone .header h1 { font-size: 14px;} /* Arrow attributes in front of h1 tag in header */ .bendingtubetheoldfashionedway .header h1 .arrows { font-size: 125%; font-weight: normal;} /* Footer attributes */ .bendingtubetheoldfashionedway .footer { position: absolute; height: 40px; width: 110%; bottom: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0',endColorstr='#f9f9f9'); box-shadow: 0 1px 5px #000; z-index: 2;} /* MagTitle (overlays on top of footer) attributes */ .bendingtubetheoldfashionedway .magTitle { display: block; position: absolute; right: 32px; bottom: 5px; z-index: 4;} /* iPhone magTitle (overlays on top of footer) attributes */ .bendingtubetheoldfashionedway.iphone .magTitle { right: 5px;} /* MagTitle image (overlays on top of footer) attributes */ .bendingtubetheoldfashionedway .magTitle img { padding-top: 5px;} /* Sidebar attributes */ .bendingtubetheoldfashionedway .sidebar { position: absolute; background: -webkit-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -moz-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -o-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -ms-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#aaaaaa',endColorstr='#939498'); height: 100%; width: 32px; top: 0; left: 0; box-shadow: 1px 0 5px #000; z-index: 3;} /* Sidebar Connector used only for box shadow purposes if you don't want the sidebar shadow to cover the header */ .bendingtubetheoldfashionedway .sidebarConnector { position: absolute; background: red; height: 55px; width: 32px; top: 0; left: 0; z-index: 1;} /* Positioning for the content text on the sidebar */ .bendingtubetheoldfashionedway .sidebarContent { position:absolute; width: 300px; top: 144px; left: -130px; transform:rotate(-90deg); -ms-transform:rotate(-90deg); /* IE 9 */ -moz-transform:rotate(-90deg); /* Firefox */ -webkit-transform:rotate(-90deg); /* Safari and Chrome */ -o-transform:rotate(-90deg); /* Opera */ z-index: 5; color: #fff; text-align: right; height: 32px;} /* Float left style */ .bendingtubetheoldfashionedway .floatL { float: left;} /* Float right style */ .bendingtubetheoldfashionedway .floatR { float: right;} /* Clear floats (both left and right) */ .bendingtubetheoldfashionedway .clearB { clear: both;} /* Pullquote attributes */ .bendingtubetheoldfashionedway .pullquote { font-size: 20px; color: #999; font-style: italic; padding: 20px; line-height: normal;} /* iPhone portrait image width adjustment */ .bendingtubetheoldfashionedway.iphone .container { width: 280px;} /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .bendingtubetheoldfashionedway.grid.page-1 { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .bendingtubetheoldfashionedway.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingtubetheoldfashionedway/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .bendingtubetheoldfashionedway.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingtubetheoldfashionedway/ipad_port.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .bendingtubetheoldfashionedway.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingtubetheoldfashionedway/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .bendingtubetheoldfashionedway.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingtubetheoldfashionedway/ipad_land.jpg") center center no-repeat; background-size: contain;} } /* 3-column */ .no-mobile .bendingtubetheoldfashionedway.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingtubetheoldfashionedway/ipad_land.jpg") center center no-repeat; background-size: contain;} /* 4-column */ .no-mobile .bendingtubetheoldfashionedway.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingtubetheoldfashionedway/ipad_land.jpg") center center no-repeat; background-size: contain;} /* iPhone vertical */ .bendingtubetheoldfashionedway.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingtubetheoldfashionedway/iphone_port.jpg") center center no-repeat; background-size: contain;} /* iPhone horizontal */ .bendingtubetheoldfashionedway.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingtubetheoldfashionedway/iphone_land.jpg") center center no-repeat; background-size: contain;} /* iPad vertical */ .bendingtubetheoldfashionedway.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingtubetheoldfashionedway/ipad_port.jpg") center center no-repeat; background-size: contain;} /* iPad horizontal */ .bendingtubetheoldfashionedway.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/bendingtubetheoldfashionedway/ipad_land.jpg") center center no-repeat; background-size: contain;} /* GUI CSS */ /* END GUI CSS */ /* GradientType=0 is top to bottom */ /* GradientType=1 is left to right */ /* Sidebar color */ .bendingtubetheoldfashionedway .sidebar { position: absolute; background: -webkit-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -moz-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -o-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: -ms-linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); background: linear-gradient(left, #d12229 20%, #eb262e 50%, #d12229); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#eb262e',endColorstr='#d12229');} /* h1 tag color in header */ .bendingtubetheoldfashionedway .header h1 { color: #d12229;} /* MagTitle position for when using images instead of text */ .bendingtubetheoldfashionedway .magTitle { bottom: -2px;} /***********************/ /*** CORE Styles ***/ /***********************/ /* Paragraph indentation */ .americanbuiltmeansbuildingamerica p { text-indent: 15px; text-align: left} /* Give last paragraph in a section bottom padding before the ensuing subheader */ .americanbuiltmeansbuildingamerica .section p:last-of-type { padding-bottom: 16px;} /* Subheader default margin removal */ .americanbuiltmeansbuildingamerica h3 { margin: 0;} /* Subheader non bold and italicized */ .americanbuiltmeansbuildingamerica h3.mild { font-weight: normal; font-style: italic;} /* Subheader adjustments on iPhone */ .americanbuiltmeansbuildingamerica.iphone h3 { padding-left: 20px;} /* Paragraph indentation for paragraphs immediately following a subheader */ .americanbuiltmeansbuildingamerica .keeptogether + p, .americanbuiltmeansbuildingamerica p.hyperlink { text-indent: 0;} /* Hyperlink padding */ .americanbuiltmeansbuildingamerica p.hyperlink { padding-bottom: 0; padding-top: 16px;} /* Lines between columns - change .png file to your liking */ .americanbuiltmeansbuildingamerica .column:not(.c1) p, .americanbuiltmeansbuildingamerica .column:not(.c1) ul, .americanbuiltmeansbuildingamerica .column:not(.c1) h3 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/americanbuiltmeansbuildingamerica/c7c7c7.png") repeat-y top left;} /* Background image for all article pages */ .americanbuiltmeansbuildingamerica { background: #fff url("{}") center center repeat; background-size: cover;} /* Colorbox caption/title area */ #cboxTitle { background: #fff;} /* On page caption indentations */ p.caption { text-indent: 0; margin-bottom: 10px;} /* On page caption indentations adjustments for iPhone */ .iphone p.caption { padding-left: 0; width: 280px;} /* .americanbuiltmeansbuildingamerica p, .americanbuiltmeansbuildingamerica h1 { text-indent: 0; text-align: left; color: #333}*/ /* Font color for article */ .americanbuiltmeansbuildingamerica p, .americanbuiltmeansbuildingamerica h1, .americanbuiltmeansbuildingamerica h2, .americanbuiltmeansbuildingamerica h3, .americanbuiltmeansbuildingamerica h4, .americanbuiltmeansbuildingamerica li { color: #333; text-align: left} /* Positioning for list items */ .americanbuiltmeansbuildingamerica ul, .americanbuiltmeansbuildingamerica ol { padding-left: 20px; list-style: inside;} /* Bottom padding for lists */ .americanbuiltmeansbuildingamerica ol, .americanbuiltmeansbuildingamerica ul { padding-bottom: 10px;} /* Positioning for wrapper to accomodate for sizes of header/footer */ .americanbuiltmeansbuildingamerica .myWrapper { margin-bottom: 25px; top: 30px;} /* iPhone wrapper positioning */ .americanbuiltmeansbuildingamerica.iphone .myWrapper { top: 17px; margin-bottom: 3px; margin-left: 17px;} .americanbuiltmeansbuildingamerica.iphone .myWrapper .container { margin-left: 18px;} .americanbuiltmeansbuildingamerica .myWrapper iframe { padding-left: 20px;} .americanbuiltmeansbuildingamerica.iphone .myWrapper iframe { padding-left: 0;} /* Header attributes */ .americanbuiltmeansbuildingamerica .header { position: absolute; height: 45px; width: 110%; top: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f9f9f9', endColorstr='#f0f0f0');/*For IE7-8-9*/ box-shadow: 0 1px 5px #000; z-index: 2;} /* iPhone header attributes */ .americanbuiltmeansbuildingamerica.iphone .header { height: 30px; padding-top: 10px; padding-left: 67px; box-shadow: 0 1px 5px #000;} /* h1 tag in header attributes */ .americanbuiltmeansbuildingamerica .header h1 { position: relative; top: 12px; color: #000; font-weight: normal; left: -5px;} /* iPhone h1 tag in header attributes */ .americanbuiltmeansbuildingamerica.iphone .header h1 { font-size: 14px;} /* Arrow attributes in front of h1 tag in header */ .americanbuiltmeansbuildingamerica .header h1 .arrows { font-size: 125%; font-weight: normal;} /* Footer attributes */ .americanbuiltmeansbuildingamerica .footer { position: absolute; height: 40px; width: 110%; bottom: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0', endColorstr='#f9f9f9');/*For IE7-8-9*/ box-shadow: 0 1px 5px #000; z-index: 2;} /* MagTitle (overlays on top of footer) attributes */ .americanbuiltmeansbuildingamerica .magTitle { display: block; position: absolute; right: 32px; bottom: 5px; z-index: 4;} /* iPhone magTitle (overlays on top of footer) attributes */ .americanbuiltmeansbuildingamerica.iphone .magTitle { right: 5px;} /* MagTitle image (overlays on top of footer) attributes */ .americanbuiltmeansbuildingamerica .magTitle img { padding-top: 5px;} /* Sidebar attributes */ .americanbuiltmeansbuildingamerica .sidebar { position: absolute; background: -webkit-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -moz-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -o-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -ms-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#aaaaaa', endColorstr='#939498');/*For IE7-8-9*/ height: 100%; width: 32px; top: 0; left: 0; box-shadow: 1px 0 5px #000; z-index: 3;} /* Sidebar Connector used only for box shadow purposes if you don't want the sidebar shadow to cover the header */ .americanbuiltmeansbuildingamerica .sidebarConnector { position: absolute; background: red; height: 55px; width: 32px; top: 0; left: 0; z-index: 1;} /* Positioning for the content text on the sidebar */ .americanbuiltmeansbuildingamerica .sidebarContent { position:absolute; width: 300px; top: 144px; left: -130px; transform:rotate(-90deg); -ms-transform:rotate(-90deg); /* IE 9 */ -moz-transform:rotate(-90deg); /* Firefox */ -webkit-transform:rotate(-90deg); /* Safari and Chrome */ -o-transform:rotate(-90deg); /* Opera */ z-index: 5; color: #fff; text-align: right; height: 32px;} /* Float left style */ .americanbuiltmeansbuildingamerica .floatL { float: left;} /* Float right style */ .americanbuiltmeansbuildingamerica .floatR { float: right;} /* Clear floats (both left and right) */ .americanbuiltmeansbuildingamerica .clearB { clear: both;} /* Pullquote attributes */ .americanbuiltmeansbuildingamerica .pullquote { font-size: 20px; color: #999; font-style: italic; padding: 20px; line-height: normal;} /* iPhone portrait image width adjustment */ .americanbuiltmeansbuildingamerica.iphone .container { width: 280px;} /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .americanbuiltmeansbuildingamerica.grid.page-1 { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .americanbuiltmeansbuildingamerica.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/americanbuiltmeansbuildingamerica/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .americanbuiltmeansbuildingamerica.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/americanbuiltmeansbuildingamerica/ipad_port.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .americanbuiltmeansbuildingamerica.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/americanbuiltmeansbuildingamerica/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .americanbuiltmeansbuildingamerica.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/americanbuiltmeansbuildingamerica/ipad_land.jpg") center center no-repeat; background-size: contain;} } /* 3-column */ .no-mobile .americanbuiltmeansbuildingamerica.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/americanbuiltmeansbuildingamerica/ipad_land.jpg") center center no-repeat; background-size: contain;} /* 4-column */ .no-mobile .americanbuiltmeansbuildingamerica.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/americanbuiltmeansbuildingamerica/ipad_land.jpg") center center no-repeat; background-size: contain;} /* iPhone vertical */ .americanbuiltmeansbuildingamerica.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/americanbuiltmeansbuildingamerica/iphone_port.jpg") center center no-repeat; background-size: contain;} /* iPhone horizontal */ .americanbuiltmeansbuildingamerica.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/americanbuiltmeansbuildingamerica/iphone_land.jpg") center center no-repeat; background-size: contain;} /* iPad vertical */ .americanbuiltmeansbuildingamerica.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/americanbuiltmeansbuildingamerica/ipad_port.jpg") center center no-repeat; background-size: contain;} /* iPad horizontal */ .americanbuiltmeansbuildingamerica.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/americanbuiltmeansbuildingamerica/ipad_land.jpg") center center no-repeat; background-size: contain;} /* GUI CSS */ /* END GUI CSS */ /* GradientType=0 is top to bottom */ /* GradientType=1 is left to right */ /* Sidebar color */ .americanbuiltmeansbuildingamerica .sidebar { position: absolute; background: -webkit-linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); background: -moz-linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); background: -o-linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); background: -ms-linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); background: linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#0f5596',endColorstr='#0c467c');} /* h1 tag color in header */ .americanbuiltmeansbuildingamerica .header h1 { color: #0c467c;} /* MagTitle position for when using images instead of text */ .americanbuiltmeansbuildingamerica .magTitle { bottom: -2px;} /***********************/ /*** CORE Styles ***/ /***********************/ /* Paragraph indentation */ .choosingtherightfilter p { text-indent: 15px; text-align: left} /* Give last paragraph in a section bottom padding before the ensuing subheader */ .choosingtherightfilter .section p:last-of-type { padding-bottom: 16px;} /* Subheader default margin removal */ .choosingtherightfilter h3 { margin: 0;} /* Subheader non bold and italicized */ .choosingtherightfilter h3.mild { font-weight: normal; font-style: italic;} /* Subheader adjustments on iPhone */ .choosingtherightfilter.iphone h3 { padding-left: 20px;} /* Paragraph indentation for paragraphs immediately following a subheader */ .choosingtherightfilter .keeptogether + p, .choosingtherightfilter p.hyperlink { text-indent: 0;} /* Hyperlink padding */ .choosingtherightfilter p.hyperlink { padding-bottom: 0; padding-top: 16px;} /* Lines between columns - change .png file to your liking */ .choosingtherightfilter .column:not(.c1) p, .choosingtherightfilter .column:not(.c1) ul, .choosingtherightfilter .column:not(.c1) h3 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/choosingtherightfilter/c7c7c7.png") repeat-y top left;} /* Background image for all article pages */ .choosingtherightfilter { background: #fff url("{}") center center repeat; background-size: cover;} /* Colorbox caption/title area background */ #cboxTitle { background: #fff;} /* On page caption indentations */ p.caption { text-indent: 0; margin-bottom: 10px;} /* On page caption indentations adjustments for iPhone */ .iphone p.caption { padding-left: 0; width: 280px;} /* .choosingtherightfilter p, .choosingtherightfilter h1 { text-indent: 0; text-align: left; color: #333}*/ /* Font color for article */ .choosingtherightfilter p, .choosingtherightfilter h1, .choosingtherightfilter h2, .choosingtherightfilter h3, .choosingtherightfilter h4, .choosingtherightfilter li { color: #333;} /* Positioning for list items */ .choosingtherightfilter ul, .choosingtherightfilter ol { padding-left: 20px; list-style: inside;} /* Bottom padding for lists */ .choosingtherightfilter ol, .choosingtherightfilter ul { padding-bottom: 10px;} /* Positioning for wrapper to accomodate for sizes of header/footer */ .choosingtherightfilter .myWrapper { margin-bottom: 25px; top: 30px;} /* iPhone wrapper positioning */ .choosingtherightfilter.iphone .myWrapper { top: 17px; margin-bottom: 3px; margin-left: 17px;} .choosingtherightfilter.iphone .myWrapper .container { margin-left: 18px;} .choosingtherightfilter .myWrapper iframe { padding-left: 20px;} .choosingtherightfilter.iphone .myWrapper iframe { padding-left: 0;} /* Header attributes */ .choosingtherightfilter .header { position: absolute; height: 45px; width: 110%; top: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0', endColorstr='#f9f9f9');/*For IE7-8-9*/ box-shadow: 0 1px 5px #000; z-index: 2;} /* iPhone header attributes */ .choosingtherightfilter.iphone .header { height: 30px; padding-top: 10px; padding-left: 67px; box-shadow: 0 1px 5px #000;} /* h1 tag in header attributes */ .choosingtherightfilter .header h1 { position: relative; top: 12px; color: #000; font-weight: normal; left: -5px;} /* iPhone h1 tag in header attributes */ .choosingtherightfilter.iphone .header h1 { font-size: 14px;} /* Arrow attributes in front of h1 tag in header */ .choosingtherightfilter .header h1 .arrows { font-size: 125%; font-weight: normal;} /* Footer attributes */ .choosingtherightfilter .footer { position: absolute; height: 40px; width: 110%; bottom: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0', endColorstr='#f9f9f9');/*For IE7-8-9*/ box-shadow: 0 1px 5px #000; z-index: 2;} /* MagTitle (overlays on top of footer) attributes */ .choosingtherightfilter .magTitle { display: block; position: absolute; right: 32px; bottom: 5px; z-index: 4;} /* iPhone magTitle (overlays on top of footer) attributes */ .choosingtherightfilter.iphone .magTitle { right: 5px;} /* MagTitle image (overlays on top of footer) attributes */ .choosingtherightfilter .magTitle img { padding-top: 5px;} /* Sidebar attributes */ .choosingtherightfilter .sidebar { position: absolute; background: -webkit-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -moz-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -o-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: -ms-linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); background: linear-gradient(left, #939498 20%, #aaaaaa 50%, #939498); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#aaaaaa', endColorstr='#939498');/*For IE7-8-9*/ height: 100%; width: 32px; top: 0; left: 0; box-shadow: 1px 0 5px #000; z-index: 3;} /* Sidebar Connector used only for box shadow purposes if you don't want the sidebar shadow to cover the header */ .choosingtherightfilter .sidebarConnector { position: absolute; background: red; height: 55px; width: 32px; top: 0; left: 0; z-index: 1;} /* Positioning for the content text on the sidebar */ .choosingtherightfilter .sidebarContent { position:absolute; width: 300px; top: 144px; left: -130px; transform:rotate(-90deg); -ms-transform:rotate(-90deg); /* IE 9 */ -moz-transform:rotate(-90deg); /* Firefox */ -webkit-transform:rotate(-90deg); /* Safari and Chrome */ -o-transform:rotate(-90deg); /* Opera */ z-index: 5; color: #fff; text-align: right; height: 32px;} /* Float left style */ .choosingtherightfilter .floatL { float: left;} /* Float right style */ .choosingtherightfilter .floatR { float: right;} /* Clear floats (both left and right) */ .choosingtherightfilter .clearB { clear: both;} /* Pullquote attributes */ .choosingtherightfilter .pullquote { font-size: 20px; color: #999; font-style: italic; padding: 20px; line-height: normal;} /* iPhone portrait image width adjustment */ .choosingtherightfilter.iphone .container { width: 280px;} /* //////////////////////////////////////////////////////////// // Media Queries for 1-column and 2-column //////////////////////////////////////////////////////////// */ .grid.choosingtherightfilter.page-1 { background-color: transparent; } @media screen and (min-height:700px) { /* 1-column */ .no-mobile .choosingtherightfilter.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/choosingtherightfilter/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .choosingtherightfilter.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/choosingtherightfilter/ipad_port.jpg") center center no-repeat; background-size: contain;} } @media screen and (max-height:699px) { /* 1-column */ .no-mobile .choosingtherightfilter.w1.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/choosingtherightfilter/iphone_port.jpg") center center no-repeat; background-size: contain;} /* 2-column */ .no-mobile .choosingtherightfilter.w2.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/choosingtherightfilter/ipad_land.jpg") center center no-repeat; background-size: contain;} } /* 3-column */ .no-mobile .choosingtherightfilter.w3.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/choosingtherightfilter/ipad_land.jpg") center center no-repeat; background-size: contain;} /* 4-column */ .no-mobile .choosingtherightfilter.w4.page-1 .wrapper { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/choosingtherightfilter/ipad_land.jpg") center center no-repeat; background-size: contain;} /* iPhone vertical */ .choosingtherightfilter.iphone.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/choosingtherightfilter/iphone_port.jpg") center center no-repeat; background-size: contain;} /* iPhone horizontal */ .choosingtherightfilter.iphone.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/choosingtherightfilter/iphone_land.jpg") center center no-repeat; background-size: contain;} /* iPad vertical */ .choosingtherightfilter.ipad.vertical.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/choosingtherightfilter/ipad_port.jpg") center center no-repeat; background-size: contain;} /* iPad horizontal */ .choosingtherightfilter.ipad.horizontal.page-1 { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/choosingtherightfilter/ipad_land.jpg") center center no-repeat; background-size: contain;} /* GUI CSS */ /* END GUI CSS */ /* GradientType=0 is top to bottom */ /* GradientType=1 is left to right */ /* Sidebar color */ .choosingtherightfilter .sidebar { position: absolute; background: -webkit-linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); background: -moz-linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); background: -o-linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); background: -ms-linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); background: linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#0f5596',endColorstr='#0c467c');} /* h1 tag color in header */ .choosingtherightfilter .header h1 { color: #0c467c;} /* MagTitle position for when using images instead of text */ .choosingtherightfilter .magTitle { bottom: -2px;} /***********************/ /*** CORE Styles ***/ /***********************/ .industrynews { background: #fff url("{}") center center repeat; background-size: cover;} .industrynews p, .industrynews h1 { text-indent: 0; text-align: left; color: #333} .industrynews h1, .industrynews h2, .industrynews h3, .industrynews li { color: #333;} .industrynews ul, .industrynews ol { padding-left: 20px; list-style: inside;} .industrynews ol { padding-bottom: 10px;} .industrynews .myWrapper { margin-bottom: 25px; top: 30px;} /* iPhone */ .industrynews.iphone .myWrapper { top: 20px; margin-left: 17px;} .industrynews.iphone.vertical .myWrapper .container { min-height: 480px;} .industrynews .header { position: absolute; height: 45px; width: 110%; top: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0', endColorstr='#f9f9f9');/*For IE7-8-9*/ box-shadow: 0 1px 5px #000; z-index: 2;} /* iPhone */ .industrynews.iphone .header { height: 30px; padding-top: 10px; padding-left: 67px; box-shadow: 0 1px 5px #000;} .industrynews .header h1 { position: relative; top: 12px; color: #0c467c; font-weight: normal; left: -5px;} /* iPhone */ .industrynews.iphone .header h1 { font-size: 14px;} .industrynews .header h1 .arrows { font-size: 125%; font-weight: normal;} .industrynews .ad1 { position: absolute; top: 5px; right: 32px; width: 288px; height: 29px; background: #000; color: #fff; z-index: 5; padding-top: 6px; text-align: center;} .industrynews .ad2 { position: absolute; top: 5px; right: 340px; width: 288px; height: 29px; background: #6d6d6d; color: #fff; z-index: 5; padding-top: 6px; text-align: center;} .industrynews .ad3 { position: absolute; top: 5px; right: 648px; width: 288px; height: 29px; background: #a0a0a0; color: #fff; z-index: 5; padding-top: 6px; text-align: center;} .industrynews .footer { position: absolute; height: 40px; width: 110%; bottom: 0; left: -32px; padding-left: 75px; background: #efefef); background: -webkit-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -moz-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -o-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: -ms-linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); background: linear-gradient(top, #f9f9f9 20%, #f0f0f0 50%, #f9f9f9); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0', endColorstr='#f9f9f9');/*For IE7-8-9*/ box-shadow: 0 1px 5px #000; z-index: 2;} .industrynews .magTitle { display: block; position: absolute; right: 32px; bottom: -2px; z-index: 4;} .industrynews.iphone .magTitle { right: 5px;} .industrynews .magTitle img { padding-top: 5px;} .industrynews .sidebar { position: absolute; background: -webkit-linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); background: -moz-linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); background: -o-linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); background: -ms-linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); background: linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#0f5596',endColorstr='#0c467c'); height: 100%; width: 32px; top: 0; left: 0; box-shadow: 1px 0 5px #000; z-index: 3;} .industrynews .sidebarConnector { position: absolute; background: red; height: 55px; width: 32px; top: 0; left: 0; z-index: 1;} .industrynews .sidebarContent { position:absolute; width: 300px; top: 144px; left: -130px; transform:rotate(-90deg); -ms-transform:rotate(-90deg); /* IE 9 */ -moz-transform:rotate(-90deg); /* Firefox */ -webkit-transform:rotate(-90deg); /* Safari and Chrome */ -o-transform:rotate(-90deg); /* Opera */ z-index: 5; color: #fff; text-align: right; height: 32px;} .industrynews .adQtrPage_2col:hover { border: 1px solid red;} /* .industrynews .column:not(.c1) { background: url("http://read.nxtbook.com/techgen/fabshopmagdirect/february2013/industrynews/505050_25percent.png") repeat-y top left;} */ .industrynews .floatL { float: left;} .industrynews .floatR { float: right;} .industrynews .clearB { clear: both;} .industrynews .pullquote { font-size: 20px; color: #999; font-style: italic; padding: 20px; line-height: normal;} .industrynews .container p { margin-bottom: 20px; } .industrynews .container p:last-of-type { margin-bottom: 0; } .industrynews .c2.container, .industrynews .c3.container, .industrynews .c4.container { border-left: 1px solid #dedede;} .industrynews .container img { padding: 0;} .industrynews .container img.floatL { margin: 10px; margin-left: 0;} .industrynews .container img.floatR { margin: 10px; margin-right: 0;} /* Colorbox caption/title area background */ #cboxTitle { background: #fff;} /* GUI CSS */ /* END GUI CSS */ /* GradientType=0 is top to bottom */ /* GradientType=1 is left to right */ /* Sidebar color */ .industrynews .sidebar { position: absolute; background: -webkit-linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); background: -moz-linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); background: -o-linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); background: -ms-linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); background: linear-gradient(left, #0c467c 20%, #0f5596 50%, #0c467c); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#0f5596',endColorstr='#0c467c');} /* h1 tag color in header */ .industrynews .header h1 { color: #0c467c;} /* MagTitle position for when using images instead of text */ .industrynews .magTitle { bottom: -2px;} /* 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; } #grids_loading { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color: #333333; opacity: 0.9; z-index: 999; } #grids_loading .message { font-size: 20px; font-weight: bold; color: #ffffff; } #phone_rotated { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color: #333333; display: none; z-index: 999; } #phone_rotated .message { font-size: 20px; font-weight: bold; color: #ffffff; } #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 .text { color: #dfdfdf; } .share_panel .share_facebook_icon { float:left; display:block; width: 33px; height: 33px; margin-right:10px; background: url(../../core/interface/img/share/share_facebook.png) no-repeat; } .share_panel .share_twitter_icon { float:left; display:block; width: 33px; height: 33px; margin-right:10px; background: url(../../core/interface/img/share/share_twitter.png) no-repeat; } .share_panel .share_pinterest_icon { float:left; display:block; width: 33px; height: 33px; margin-right:10px; background: url(../../core/interface/img/share/share_pinterest.png) no-repeat; } .share_panel .share_linkedin_icon { float:left; display:block; width: 33px; height: 33px; margin-right:10px; background: url(../../core/interface/img/share/share_linkedin.png) no-repeat; } .share_panel .share_email_icon { float:left; display:block; width: 33px; height: 33px; margin-right:10px; background: url(../../core/interface/img/share/share_email.png) no-repeat; } .share_panel .emailbox { padding: 5px 5px; margin-left: 20px; } .share_panel .toolbox a, .share_panel .emailbox a { display: block; color:#dfdfdf; 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 .toolbox a:hover, .share_panel .emailbox a:hover { background: #242424; color:#fff; 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; }