/* ******** ******** IE 9 FIX ******** Horizontal grid must be 100% height of viewport. ******** Modern browsers are okay if some wrapping tags do not specify height ******** Old IE req's that every wrapping tag up the chain to be height 100% ******** */ html.ie9 #wbk-body div[class^="dnn"], html.ie9 #wbk-body div[class^="Dnn"], html.ie9 #wbk-body div[class^="DNN"], html.ie9 #wbk-body div[id^="dnn"], html.ie9 #wbk-body div[id^="Dnn"], html.ie9 #wbk-body div[id^="DNN"] { height: 100%; } html.wbk-layout-desktop .isotope-wrapper div[class^="dnn"], html.wbk-layout-desktop .isotope-wrapper div[class^="Dnn"], html.wbk-layout-desktop .isotope-wrapper div[class^="DNN"], html.wbk-layout-desktop .isotope-wrapper div[id^="dnn"], html.wbk-layout-desktop .isotope-wrapper div[id^="Dnn"], html.wbk-layout-desktop .isotope-wrapper div[id^="DNN"] { /*height: 100%;*/ } html.ie9 #siteWrapper { height: 100%; } html.wbk-page-home.wbk-layout-phone #siteWrapper { position: relative; /* allows "return arrow, position absolute" to sit at bottom of page */ } /* ******** ******** ISOTOPES WRAPPER (table) ******** */ html.wbk-page-home.wbk-layout-desktop #isotopes-wrapper { display: table; height: 100%; } /* ******** ******** ISOTOPES (table row) ******** */ html.wbk-page-home.wbk-layout-desktop #isotopes { display: table-row; height: 100%; } html.wbk-page-home.wbk-layout-phone #isotopes { } /* ******** ******** ISOTOPE WRAPPERS (table cell) ******** */ html.wbk-page-home #landing { z-index: 5; } html.wbk-page-home #videos { z-index: 4; } html.wbk-page-home #games { z-index: 3; } html.wbk-page-home #comics { z-index: 2; } html.wbk-page-home #downloadables { z-index: 1; } html.wbk-page-home.wbk-layout-desktop .isotope-wrapper { background-position: top left; background-repeat: no-repeat, repeat-x; background-size: auto 100%; display: table-cell; position: relative; height: 100%; min-width: 100%; } /* hide any DNN titles, just in case */ html.wbk-page-home .isotope-wrapper h2 span.TitleH2 { display: none; } html.wbk-page-home.wbk-layout-phone .isotope-wrapper h2 span.TitleH2 { display: none; } html.wbk-page-home.wbk-layout-desktop #landing { /* style using #wbk-body */ /*background-image: url(images/desktop/page-home/hero-landing.jpg), url(images/desktop/page-home/grad-landing.jpg);*/ } html.wbk-page-home.wbk-layout-desktop #videos { background-image: url(images/desktop/page-home/hero-videos.jpg), url(images/desktop/page-home/grad-videos.jpg); } html.wbk-page-home.wbk-layout-desktop #games { background-image: url(images/desktop/page-home/hero-games.jpg), url(images/desktop/page-home/grad-games.jpg); } html.wbk-page-home.wbk-layout-desktop #comics { background-image: url(images/desktop/page-home/hero-comics.jpg), url(images/desktop/page-home/grad-comics.jpg); } html.wbk-page-home.wbk-layout-desktop #downloadables { background-image: url(images/desktop/page-home/hero-downloadables.jpg), url(images/desktop/page-home/grad-downloadables.jpg); } html.wbk-page-home.wbk-layout-phone .isotope-wrapper { background-position: top left; background-repeat: no-repeat; background-size: 100% auto; min-height: 500px; /* ensures each section is at least the height of the screen for better UX */ position: relative; } html.wbk-page-home.wbk-layout-phone #landing { /* style using #wbk-body */ /*background-image: url(images/phone/page-home/hero-landing.jpg);*/ } html.wbk-page-home.wbk-layout-phone #videos { background-image: url(images/phone/page-home/hero-videos.jpg); } html.wbk-page-home.wbk-layout-phone #games { background-image: url(images/phone/page-home/hero-games.jpg); } html.wbk-page-home.wbk-layout-phone #comics { background-image: url(images/phone/page-home/hero-comics.jpg); } html.wbk-page-home.wbk-layout-phone #downloadables { background-image: url(images/phone/page-home/hero-downloadables.jpg); } html.wbk-page-home.wbk-layout-phone #landing ul { padding-top: 0 !important; } /*Phone Title*/ html.wbk-page-home.wbk-layout-phone .featured-title { color: #ffffff; padding: 15% 3% 0; max-width: 80%; overflow: hidden; display: block; font-weight: bold; font-size: 26px; line-height: 29px; margin: 0 auto -10%; text-align: center; } html.wbk-page-home .isotope-wrapper-title, html.wbk-page-home.wbk-layout-phone #landing .featured-title { display: none; } /* ******** ******** ISOTOPES ******** */ html.wbk-page-home .isotope { list-style: none outside none; margin: 0; padding: 0; } html.wbk-page-home.wbk-layout-desktop .isotope { height: 83%; margin: 3% 0 0; /*position: absolute !important;*/ /* for "animate out" */ top: 0; } /* ******** ******** ISOTOPE ITEMS: DEFAULT THUMBNAILS ******** */ .isotope-item { overflow: hidden; opacity: 0; /* hide until the item's image has been sized correctly, see wbk-page-home.js */ } /* exceptions */ .isotope-item.visibleStyle { opacity: 1; } html.wbk-layout-phone .isotope-item { overflow: inherit; opacity: 1; } /* Having the transform enabled while the isotope/page is resizing will probably break the layout. See wbk-page-home.js for when "on-hover" is added and removed. */ html.wbk-page-home.wbk-layout-desktop .isotope-item.on-hover:not(.mysterybox) { -moz-transform: scale(1.0); -ms-transform: scale(1.0); -o-transform: scale(1.0); -webkit-transform: scale(1.0); transform: scale(1.0); -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -moz-transition: all 0.7s ease-out; -o-transition: all 0.7s ease-out; -webkit-transition: all 0.7s ease-out; transition: all 0.7s ease-out; } html.wbk-page-home.wbk-layout-desktop .isotope-item.on-hover:not(.mysterybox).w05:hover, html.wbk-page-home.wbk-layout-desktop .isotope-item.on-hover:not(.mysterybox).w06:hover { -moz-transform: scale(1.04); -ms-transform: scale(1.04); -o-transform: scale(1.04); -webkit-transform: scale(1.04); transform: scale(1.04); -moz-transition-duration: 0.15s; -o-transition-duration: 0.15s; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; } html.wbk-page-home.wbk-layout-desktop .isotope-item.on-hover.w10:hover, html.wbk-page-home.wbk-layout-desktop .isotope-item.on-hover.w12:hover { -moz-transform: scale(1.015); -ms-transform: scale(1.015); -o-transform: scale(1.015); -webkit-transform: scale(1.015); transform: scale(1.015); } html.wbk-page-home.wbk-layout-desktop .isotope-item-inner { height: 100%; width: 100%; } html.wbk-page-home .indicator { background-color: transparent; background-position: right top; background-repeat: no-repeat; background-size: 100% 100%; position: absolute; right: -1px; top: 2px; /* heights and widths are set in js */ /*height: 85px;*/ /*width: 120px;*/ } html.wbk-page-home .isotope-item.bucket-mobilepromo figcaption, html.wbk-page-home .isotope-item.gallery figcaption { background: none; } html.wbk-page-home.wbk-layout-desktop .isotope-item.gallery figcaption { height: 21%; } html.wbk-page-home.wbk-layout-desktop .isotope-item.gallery h3 { color: #fff; text-align: center; } html.wbk-page-home .isotope-item.game .indicator, .carousel .game .indicator { background-image: url("images/desktop/page-home/indicator-game.png"); } html.wbk-page-home .isotope-item.video .indicator, .carousel .video .indicator { background-image: url("images/desktop/page-home/indicator-video.png"); } html.wbk-page-home .isotope-item.comicbook .indicator, .carousel .comicbook .indicator { background-image: url("images/desktop/page-home/indicator-comic.png"); } html.wbk-page-home .isotope-item.downloadable .indicator, .carousel .downloadable .indicator { background-image: url("images/desktop/page-home/indicator-downloadable.png"); } html.wbk-page-home.wbk-layout-phone .isotope-item-inner { margin: 0 10px 1%; position: relative; } /* positioning only */ html.wbk-page-home figcaption, html.wbk-page-home .figcaption-bg { position: absolute; } html.wbk-page-home figcaption { color: #fff; height: 58px; padding: 1% 2%; } html.wbk-page-home figcaption h3 { height: 1.2em; line-height: 1.2em; margin: 1% 0; overflow: hidden; text-shadow: 0 -1px black, -3px 3px rgba(27, 27, 27, 1); } html.wbk-page-home.wbk-layout-phone figcaption h3 { margin: 2% 0; } html.wbk-page-home.wbk-layout-desktop figcaption p { font-family: "roboto",helvetica,arial,sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4em; margin: 0; overflow: hidden; text-shadow: -2px 2px rgba(27, 27, 27, 1); max-height: 40px; } /* exceptions > tablet */ @media (min-width: 768px) and (max-width: 1199px) { html.wbk-page-home.wbk-layout-desktop figcaption h3 { font-size: 16px; } html.wbk-page-home.wbk-layout-desktop figcaption p { font-size: 12px; } } html.wbk-page-home figcaption { background: none repeat scroll 0 0 rgba(0, 22, 36, 0.8); height: auto; -moz-transform: skewX(-5deg); -ms-transform: skewX(-5deg); -o-transform: skewX(-5deg); -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } html.wbk-page-home .w12 figcaption { left: 1.8%; right: 2.3%; } html.wbk-page-home.wbk-layout-phone .w12 figcaption { left: 1.6%; right: 2.5%; } html.wbk-page-home .w10 figcaption { left: 2%; right: 2.5%; } html.wbk-page-home.wbk-layout-phone .w10 figcaption { right: 3%; } html.wbk-page-home.wbk-layout-desktop .w06 figcaption { left: 3%; right: 4.5%; } html.wbk-page-home.wbk-layout-desktop .w05 figcaption { left: 4%; right: 6%; } html.wbk-page-home.wbk-layout-phone .h04 .figcaption-bg { display: none; } html.wbk-page-home .h08 figcaption { bottom: 4%; } html.wbk-page-home.wbk-layout-desktop .h04 figcaption { bottom: 8%; } /*6X4 5X4 thumbnails for mobile*/ html.wbk-page-home.wbk-layout-phone .h04 .aspect-ratio { padding-bottom: 39.5%; } /*html.wbk-page-home.wbk-layout-phone .w05.h04 .aspect-ratio { padding-bottom: 32%; }*/ html.wbk-page-home.wbk-layout-phone .h04 a { position: absolute; height: 100%; width: 100%; } .wbk-page-home.wbk-layout-phone .h04 .aspect-ratio > a .wbk-image-wrapper { margin-top: 5%; margin-left: 6%; margin-right: 1%; } .wbk-page-home.wbk-layout-phone .w10.h08 .aspect-ratio { padding-bottom: 80%; height: 0; } .wbk-page-home.wbk-layout-phone .w12.h08 .aspect-ratio { padding-bottom: 66%; height: 0; } html.wbk-page-home.wbk-layout-phone figcaption p { display: none; } html.wbk-page-home.wbk-layout-phone figcaption h3 { top: 5px; height: inherit; } html.wbk-page-home.wbk-layout-phone .isotope-item.w10 figcaption h3, html.wbk-page-home.wbk-layout-phone .isotope-item.w12 figcaption h3 { line-height: 1em; } html.wbk-page-home.wbk-layout-phone .h08 figcaption, html.wbk-page-home.wbk-layout-phone .h08 .figcaption-bg { bottom: 3%; } /*5X4 Image to the right*/ html.wbk-page-home.wbk-layout-phone .w05.h04 .aspect-ratio > a .wbk-image-wrapper { width: 40%; float: right; margin-right: 5%; height: 100%; margin-top: 4%; margin-left: 0; } html.wbk-page-home.wbk-layout-phone .w05.h04 figcaption { padding: 0 0 10px 8%; width: 49%; } /*Indicator to the left */ html.wbk-page-home.wbk-layout-phone .w06.h04 .indicator { left: 0; } /*MysteryBox Phone full width*/ html.wbk-page-home.wbk-layout-phone .mysterybox canvas { width: 100%; } html.wbk-page-home.wbk-layout-phone .mysterybox .isotope-item-inner { background-image: none !important; } .mystery-box-wrapper { cursor: pointer; position: relative; width: 100%; } .mystery-box-wrapper img { width: 100%; z-index: 1; } .mystery-box-wrapper canvas { left: 0; position: absolute; top: 0; width: 100%; z-index: 2; } /* ******** ******** ISOTOPE BRIDGES ******** */ html.wbk-page-home .bridge { } html.wbk-page-home.wbk-layout-desktop .bridge { background-image: url('images/desktop/page-home/bridge.png'); background-position: top center; background-repeat: no-repeat; background-color: transparent; background-size: auto 100%; position: absolute; right: 0; top: 0; z-index: 1; } html.wbk-page-home.wbk-layout-desktop #downloadables .bridge { background-image: url('images/desktop/page-home/bridge-end.png'), url(images/desktop/page-home/grad-downloadables.jpg); background-position: top right; } html.wbk-page-home.wbk-layout-phone .bridge { background-image: url('images/phone/page-home/bridge.png'); background-position: center left; background-repeat: no-repeat; background-color: transparent; background-size: 100% auto; position: absolute; right: 0; left: 0; width: 100vw; } html.wbk-page-home.wbk-layout-phone #downloadables .bridge { /*background-color: ;*/ background-image: url('images/phone/page-home/bridge-end.png'); background-position: bottom left; } /* ******** ******** ISOTOPE PLACEHOLDERS ******** */ .isotope .placeholder { opacity: 0; } /* ******** ******** ISOTOPE IMAGES ******** */ .isotope .wbk-thumb { width: 100%; } .isotope .wbk-thumb-type { display: none; } /* ******** ******** ENDLESS SCROLL (DESKTOP) ******** */ /* placeholder: vertical center, horizontal 50% */ html.wbk-layout-desktop #nudge-arrow-outer { position: fixed; right: 0; top: 45%; } html.wbk-layout-desktop #nudge-arrow { background: url("images/desktop/page-home/arrow-right.png") no-repeat scroll top right transparent; cursor: pointer; height: 156px; position: relative; /*right: see skin.css ;*/ top: -78px; width: 111px; /* http://matthewlein.com/ceaser/ */ -webkit-transition: right 500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition: right 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: right 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: right 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: right 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ } /*right: see skin.css ;*/ /*html.wbk-layout-desktop #nudge-arrow:hover { right: ; }*/ html.wbk-layout-desktop #wbk-body { left: 0; /* http://matthewlein.com/ceaser/ */ -webkit-transition: left 500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition: left 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: left 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: left 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: left 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ } html.wbk-layout-desktop.page-nudge-right #wbk-body { left: -100px; } /* placeholder: vertical center, horizontal 50% */ html.wbk-layout-desktop #return-arrow-outer { display: none; position: fixed; right: 0; top: 45%; } html.wbk-layout-desktop #return-arrow { background: url("images/desktop/page-home/arrow-left.png") no-repeat scroll top right transparent; cursor: pointer; height: 156px; position: relative; /*right: see skin.css ;*/ top: -78px; width: 111px; /* http://matthewlein.com/ceaser/ */ -webkit-transition: right 500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */ -webkit-transition: right 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -moz-transition: right 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); -o-transition: right 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); transition: right 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */ } /*right: see skin.css ;*/ /*html.wbk-layout-desktop #return-arrow:hover { right: ; }*/ /* exceptions > tablet */ @media (min-width: 768px) and (max-width: 1199px) { html.wbk-layout-desktop #nudge-arrow, html.wbk-layout-desktop #return-arrow { background-size: 80%; height: 120px; } } /* ******** ******** ENDLESS SCROLL (PHONE) ******** */ html.wbk-layout-phone #nudge-arrow-outer { display: none; } html.wbk-layout-phone #return-arrow-outer { position: absolute; bottom: 0; left: 50%; } html.wbk-layout-phone #return-arrow { cursor: pointer; height: 100px; left: -90px; position: relative; width: 180px; } #endlessScrollNoClick { background: #000; bottom: 0; display: none; left: 0; opacity: 0.75; position: fixed; top: 0; right: 0; z-index: 1000; } /* ******** ******** ENDLESS SCROLL (CANVASES) ******** */ #endlessScrollWeb-wrapper { display: none; opacity: 0; position: fixed; z-index: 1001; bottom: 0; left: 0; right: 0; top: 0; } #endlessScrollWeb { position: fixed; z-index: 1001; top: 0; left: 0; } #endlessScrollMobile-wrapper { display: none; opacity: 0; position: fixed; z-index: 1001; bottom: 0; left: 0; right: 0; top: 0; } #endlessScrollMobile { position: fixed; z-index: 1001; bottom: 0; left: 0; } html.wbk-layout-desktop .bridge-wrapper { position: relative; float: right; } html.wbk-layout-desktop .isotope-wrapper > div { float: left; } html.wbk-page-home .isotope-item.bucket-mobilepromo figcaption, html.wbk-page-home .isotope-item.bucket-mobilepromo .indicator { display: none; } html.wbk-page-home.wbk-layout-phone .isotope-item.bucket-mobilepromo.w05.h04 .aspect-ratio { padding-bottom: 80%; } html.wbk-page-home.wbk-layout-phone .isotope-item.bucket-mobilepromo.w06.h04 .aspect-ratio { padding-bottom: 66%; } html.wbk-page-home.wbk-layout-phone .isotope-item.bucket-mobilepromo.h04 .isotope-item-inner { background: none; } html.wbk-page-home.wbk-layout-phone .isotope-item.bucket-mobilepromo.h04 .aspect-ratio > a .wbk-image-wrapper { float: none; width: 100%; margin: 0; height: 100%; } html.wbk-page-home.wbk-layout-phone .isotope-item.bucket-mobilepromo.h04 .aspect-ratio > a .wbk-image-wrapper img { max-height: 100%; } /*Home page Carousel*/ .isotope-item-inner .bxslider { height: 100% !important; margin: 0 !important; } .isotope-item-inner .bx-viewport { left: 0; } .isotope-item-inner .bx-viewport, .isotope-item-inner { position: relative; } .isotope-item-inner .bx-wrapper .bx-controls-direction a { background: url('images/desktop/carousel/carousel-arrows-homepage.png') no-repeat 0 0 transparent !important; padding: 0; top: 50%; margin-top: -40px; width: 10%; height: 22%; z-index: 0; background-size: 200% !important; z-index: 0; } .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-prev { left: 26px; background-position: right top !important; } .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-prev:hover { background: url('images/desktop/carousel/carousel-arrows-homepage-hit.png') no-repeat 0 0 transparent !important; left: 26px; background-position: right top !important; background-size: 200% !important; } .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-next { right: 21px; background-position: left top !important; } .isotope-item-inner .bx-wrapper .bx-controls-direction .bx-next:hover { background: url('images/desktop/carousel/carousel-arrows-homepage-hit.png') no-repeat 0 0 transparent !important; right: 21px; background-position: left top !important; background-size: 200% !important; }