/* RESETS AND DEFAULTS ============================================================================= */ /* ================================================================================================== */ * {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; margin: 0px; padding: 0px;} html, body {background-color: #ffffff; color: #333333; font-family: "NFLEndzoneSansLight", Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 14px; height: 100%; position: relative; width: 100%; overflow-y:hidden;} a, input:focus, select:focus, textarea:focus, button:focus {outline: none; text-decoration: none;} .clear {clear: both;} /* NFL FRAMEWORK HACKS ============================================================================= */ /* ================================================================================================== */ body #wrap {height: 100%; position: absolute; width: 100%;} body #wrap #doc {height: 100%; position: absolute; width: 100%;} /* CUSTOM-FONTS ==================================================================================== */ /* ================================================================================================== */ @font-face {font-family: "nfl_iconsregular"; src: url("http://i.nflcdn.com/assets/video/1.0/js/font-nflicons/assets/nflicons-regular-webfont.eot");} @font-face {font-family: "nfl_iconsregular"; font-style: normal; font-weight: normal; src: url("//:") format("no404"), url("/assets/video/1.0/js/font-nflicons/assets/nflicons-regular-webfont.eot?iefix") format("eot"), url("http://i.nflcdn.com/assets/video/1.0/js/font-nflicons/assets/nflicons-regular-webfont.woff") format("woff"), url("/assets/video/1.0/js/font-nflicons/assets/nflicons-regular-webfont.ttf") format("truetype"), url("/assets/video/1.0/js/font-nflicons/assets/nflicons-regular-webfont.svg#nfl_iconsregular") format("svg");} @font-face{font-family:"NFLEndzoneSansCondMedium";src:url("http://i.nflcdn.com/static/site/5.12/img/fonts/endzone-sans/medium-cond.eot")} @font-face{font-family:"NFLEndzoneSansCondMedium";src:url("//:") format("no404"), url("http://i.nflcdn.com/static/site/5.12/img/fonts/endzone-sans/medium-cond.eot?#iefix") format("eot"), url("http://i.nflcdn.com/static/site/5.12/img/fonts/endzone-sans/medium-cond.woff") format("woff"), url("http://i.nflcdn.com/static/site/5.12/img/fonts/endzone-sans/medium-cond.ttf") format("truetype"), url("http://i.nflcdn.com/static/site/5.12/img/fonts/endzone-sans/medium-cond.svg#webfont9DqcIwJf") format("svg"); font-weight:normal;font-style:normal} @font-face {font-family: "NFLEndzoneSansCondBold"; src: url("http://i.nflcdn.com/static/site/5.11/img/fonts/endzone-sans/bold-cond.eot");} @font-face {font-family: "NFLEndzoneSansCondBold"; src: url("//:") format("no404"), url("http://i.nflcdn.com/static/site/5.11/img/fonts/endzone-sans/bold-cond.eot?#iefix") format("eot"), url("http://i.nflcdn.com/static/site/5.11/img/fonts/endzone-sans/bold-cond.woff") format("woff"), url("http://i.nflcdn.com/static/site/5.11/img/fonts/endzone-sans/bold-cond.ttf") format("truetype"), url("http://i.nflcdn.com/static/site/5.11/img/fonts/endzone-sans/bold-cond.svg#webfont9DqcIwJf") format("svg"); font-style: normal; font-weight: normal;} @font-face {font-family: "NFLEndzoneSansLight"; src: url("http://i.nflcdn.com/static/site/5.11/img/fonts/endzone-sans/light.eot");} @font-face {font-family: "NFLEndzoneSansLight"; src: url("//:") format("no404"), url("http://i.nflcdn.com/static/site/5.11/img/fonts/endzone-sans/light.eot?#iefix") format("eot"), url("http://i.nflcdn.com/static/site/5.11/img/fonts/endzone-sans/light.woff") format("woff"), url("http://i.nflcdn.com/static/site/5.11/img/fonts/endzone-sans/light.ttf") format("truetype"), url("http://i.nflcdn.com/static/site/5.11/img/fonts/endzone-sans/light.svg#webfont9DqcIwJf") format("svg"); font-style: normal; font-weight: normal;} @font-face {font-family: "NFLEndzoneSansBold"; src: url("http://i.nflcdn.com/static/site/5.11/img/fonts/endzone-sans/bold.eot");} @font-face {src: url("//:") format("no404"), url("http://i.nflcdn.com/static/site/5.11/img/fonts/endzone-sans/bold.eot?#iefix") format("eot"),url("http://i.nflcdn.com/static/site/5.11/img/fonts/endzone-sans/bold.woff") format("woff"),url("http://i.nflcdn.com/static/site/5.11/img/fonts/endzone-sans/bold.ttf") format("truetype"),url("http://i.nflcdn.com/static/site/5.11/img/fonts/endzone-sans/bold.svg#webfont9DqcIwJf") format("svg");font-family: "NFLEndzoneSansBold"; font-style: normal; font-weight: normal;} /* Z-INDEXING ====================================================================================== */ /* ================================================================================================== */ .content-section.section-1 {z-index: 1;} .content-section.section-1 .lines-1 {z-index: 2;} .video-bg .video-player {z-index: 100;} .play-button {z-index: 500;} .mute-button {z-index: 500;} .nav-prev, .nav-next {z-index: 900;} .pagination {z-index: 1000;} .nav-tooltip {z-index: 1000;} /* BUTTONS AND GENERAL UI ========================================================================== */ /* ================================================================================================== */ div.divider { width: auto; display: block; margin: 0 auto 4px 0px; height: 1px; padding: 0px; border: ;} div.divider .logo { display: block; margin: 0 auto; position: relative; top: -35px; } /* HEADER ========================================================================================== */ /* ================================================================================================== */ #header-wrap {background: #000000;height: 60px;left: 0px;position: absolute;top: 0px;width: 100%;} #header-wrap #nfl-logo-wrap {cursor:pointer;} #header-wrap .nfl-logo {height: 55px; left: 50%; margin-left: -300px; position: relative; top: 5px; width: 360px;} #header-wrap .project-logo {cursor: pointer; height: 25px; left: 30px; position: relative; top: 5px; width: 100px;} /* PAGINATION ========== */ .pagination {bottom: 0px; position: absolute; right: 160px; top: 0px;} .pagination .page-num {color: #696969; cursor: pointer; display: block; float: left; font-family: "Courier New", Courier, monospace; font-weight: bold; height: 100%; margin: 0px 3px; padding: 21px 5px 0 5px; position: relative; top: 0px; -moz-transition: background .3; -webkit-transition: background .3; transition: background .3s;} .pagination .page-num:hover {background: #2980b9; color: #ffffff;} .pagination .page-num .current-indicator {background: url('../img/sprite-main.png') no-repeat -116px -80px; bottom: -6px; display: none; height: 19px; left: 50%; margin-left: -7px; position: absolute; width: 14px;} .pagination .page-num.current .current-indicator {display: block;} .pagination .page-num.current {color: #ffffff;} /* PAGINATION TOOLTIPS */ .nav-tooltip {bottom: -10px; position: absolute; width: 10px;} .nav-tooltip .tooltip-text {background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.3); color: #eeeeee; display: block; font-size: 14px; font-weight: normal; padding: 3px 20px; position: absolute; right: -40px; text-transform: capitalize; top: -1px; white-space: nowrap;} .nav-tooltip .tooltip-pointer {background: url('../img/sprite-main.png') no-repeat 0px -45px; height: 11px; left: 50%; margin-left: -12px; position: absolute; top: -11px; width: 23px;} /* LEFT / RIGHT NAVIGATION */ .nav-prev, .nav-next {background: rgba(0,0,0,.1); border: 1px solid rgba(0,0,0,.2); cursor: pointer; height: 90px; margin-top: -45px; opacity: 1; padding: 10px; position: absolute; top: 50%; width: 68px; -moz-transition: opacity .3; -webkit-transition: opacity .3; transition: opacity .3s;} .hide-pagination .nav-prev, .hide-pagination .nav-next {opacity: 0;} .nav-prev:hover, .nav-next:hover {background: rgba(0,0,0,.15); border: 1px solid rgba(0,0,0, 0.3)} .nav-prev.inactive, .nav-next.inactive {cursor: default; display: none; } .nav-prev .icon, .nav-next .icon {background: url('../img/sprite-main.png') no-repeat; display: block; height: 75px; left: 50%; margin: -37px 0px 0px -10px; position: relative; top: 50%; width: 39px; -moz-transition: opacity .3; -webkit-transition: opacity .3; transition: opacity .3s;} .nav-prev.inactive .icon, .nav-next.inactive .icon {cursor: default; display: none;} .nav-prev {left: 20px;} .nav-prev .icon {background-position: -153px 0px; display: block; margin-left: -20px;} .nav-prev:hover .icon {background-position: -114px 0px;} .nav-next {right: 20px;} .nav-next .icon {background-position: -231px 0px; display: block; margin-left: -18px;} .nav-next:hover .icon {background-position: -192px 0px;} /* HEADER & SOCIAL */ #share-bar {display: inline-block; position: absolute; right: 14px; top: 13px;} #share-bar .share-title {color: #ffffff; display: inline-block; font-family: "NFLEndzoneSansCondMedium", arial, sans-serif; font-size: 18px; height: 36px; line-height: 36px; margin-left: 5px; text-transform: uppercase;} #share-bar .nflicon {color: #D0B240; cursor: pointer; font-family: "nfl_iconsregular"; font-size: 50px; line-height:40px} #share-bar .nflicon:hover {color: #ffffff; cursor: pointer;} #share-bar .nflicon.gplus:after {content:"7";} #share-bar .nflicon.facebook:after {content:"5";} #share-bar .nflicon.twitter:after {content:"4";} /* COLOR LINES */ .lines-wrapper.lines-blue .line {background: #2980b9;} .lines-wrapper.lines-blue .corner {height: 0; border-style: solid;} .lines-wrapper.lines-orange .line {background: #ea5442;} .lines-wrapper.lines-orange .corner {height: 0; border-style: solid;} .lines-wrapper.lines-gold .line {background: #f1c40f;} .lines-wrapper.lines-gold .corner {height: 0; border-style: solid;} .lines-wrapper.lines-red .line {background: #e84c3d;} .lines-wrapper.lines-red .corner {height: 0; border-style: solid;} /* FOOTER ========================================================================================== */ /* ================================================================================================== */ .footer {background: #b6b6b6; padding: 40px 0px; width: 100%;} .footer .footer-text {color: #555555; font-size: 12px; margin: 0px auto; max-width: 960px; width: 100%;} /* CREDITS ========================================================================================= */ /* ================================================================================================== */ .credit-wrap {margin-bottom: 0px; padding-top: 41px; position: relative;} .credit-wrap .credit-toggle {cursor: pointer; left: 50%; margin-left: -65px; position: absolute; top: 0px; width: 130px;} .credit-wrap .credit-toggle .text {color: #000000; display: block; float: left; font-family: nflendzonesansbold; font-size: 24px; font-weight: bold; text-transform: uppercase;} .credit-wrap .credit-toggle .icon {background: url('../img/sprite-main.png') no-repeat -25px -51px; display: block; float: left; height: 5px; margin: 10px 0px 0px 6px; width: 7px;} .credit-wrap .credit-content {background: #000000;height: 0px;overflow: hidden;} .credit-wrap .credit-content .credit-content-inner {margin: 0px auto; max-width: 1280px; padding: 80px 0px; width: 100%;} .credit-wrap .credit-content .credit-content-inner .col-1 {float: left; width: 85%;} .credit-wrap .credit-content .credit-content-inner .col-2 {float: left; width: 50%;} .credit-wrap .credit-content .credit-content-inner ul {list-style: none;} .credit-wrap .credit-content .credit-content-inner ul li {display: block; margin-bottom: 20px; position: relative;} .credit-wrap .credit-content .credit-content-inner ul li .title {color: #D0B240;font-family: "NFLEndzoneSansCondBold",Courier,monospace;font-size: 20px;left: 0;position: absolute;text-align: right;text-transform: capitalize;top: 0;width: 340px;} .credit-wrap .credit-content .credit-content-inner ul li .text {color: #ffffff; display: block; font-family: 'NFLEndzoneSansMedium',Arial, Helvetica; font-size: 16px; font-weight: lighter; padding: 3px 20px 0 360px;} /* CONTENT SECTIONS ================================================================================ */ /* ================================================================================================== */ #content-wrap {background: #666666; bottom: 0px; overflow: hidden; position: absolute; top:60px; width: 100%;} .content-section {height: 100%; left: 100%; overflow-x: hidden; overflow-y: auto; position: absolute; width: 100%;} .content-section.left-side {} .content-section.section-video {overflow: hidden;} .content-section.section-2 .copy {color: #000000;font-family: "NFLEndzoneSansLight", Arial, Helvetica, sans-serif;font-size: 17px;line-height: 29px;margin: 0px auto;margin-top:60px;margin-bottom: 40px;position: relative;/* top:-100px */} .content-section.section-2 .copy2 {color: #000000; font-family: "NFLEndzoneSansLight", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22px; margin: 0px auto; margin-top: 10px; margin-bottom: 40px; position: relative; text-align: center;} .content-section .copy .big-letter {background-color: #000; color: #ffffff; float: left; font-family: Courier New; font-size: 92px; font-weight: normal; line-height: 0; margin: -64px 4px 0 0; padding: 45px 10px 42px; } .content-section .copy .bold-copy {font-family: 'NFLEndzoneSansMedium',Arial, Helvetica; font-weight: bold;} .content-section .copy br {margin-bottom: 20px; } .content-section .copy .copy-link {color: #2980b9; cursor: pointer; font-family: Courier New; font-size: 19px; font-weight: bold;} .content-section .copy .copy-link:before {background: url('../img/sprite-main.png') no-repeat -75px -33px; bottom: -4px; content: ""; display: inline-block; height: 23px; position: relative; width: 22px;} .content-section .copy .copy-link:hover {text-decoration: none;} .content-section .fade-carousel {height: ; position: relative; width: 100%;} .content-section .fade-carousel .frame-wrap {height: 100%; position: absolute; width: 100%;} .content-section .fade-carousel .frame-wrap .frame {background-position: center center; background-repeat: no-repeat; background-size: cover; display: none; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%;} .content-section .fade-carousel .frame-wrap .frame-1 {display: block;} .content-switcher {padding: 0px 30px; position: relative; width: 100%;} .content-switcher .thumb-wrap {cursor: pointer; margin: 0 auto; max-width: 1100px; padding: 0; position: relative; width: 100%;} .content-switcher .thumb-wrap .thumb {display: block; float: left; padding: 0px 10px; position: relative; width: 12.5%;} .content-switcher .thumb-wrap .thumb .thumb-avatar {background: url('../img/avatar-default.jpg') no-repeat center center / cover; box-shadow: 0px 0px 0px 1px rgba(0,0,0,.2); height: 0; padding-bottom: 100%; width: 100%;} .content-switcher .switcher-content-wrap {clear: both; margin: 0px auto; max-width: 1100px; padding: 10px; position: relative; top: 50px; width: 100%;} .content-switcher .switcher-content-wrap .frame {display: none; margin-bottom: 40px; position: absolute;} .content-switcher .switcher-content-wrap .frame-1 {display: block;} .content-switcher .frame .col-img {float: left; padding-bottom: 50px; position: relative; width: 40%;} .content-switcher .frame .col-img .image-wrap-frame {background: rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 0px 1px rgba(0,0,0,.2); padding: 10px;} .content-switcher .frame .col-img .img-wrap {height: 0; left: 0; padding-bottom: 140.5%; position: relative; top: 0; width: 100%;} .content-switcher .frame .col-img .img-wrap img {height: 100%; position: absolute; width: 100%;} .content-switcher .frame .col-img .stats-wrap {position: relative; text-transform: uppercase; top: 24px;} .content-switcher .frame .col-img .small-title {font-family: "Courier New",Courier,monospace; font-size: 19px; margin-bottom: 20px;} .content-switcher .frame .col-img .bold-title {font-family: "NFLEndzoneSansCondBold", Arial, Helvetica, sans-serif; font-size: 33px;} .content-switcher .frame .col-img .stats-games {font-family: "NFLEndzoneSansLight",Arial, Helvetica, sans-serif; font-size: 15px; margin-bottom: 45px;} .content-switcher .frame .col-img .accomplishments-list {list-style-type: none;} .content-switcher .frame .col-text {float: right; padding: 0px 0px 50px 40px; position: relative; width: 60%;} .content-switcher .frame .col-text .name {font-family: "NFLEndzoneSansCondBold", Arial, Helvetica, sans-serif; display: block; font-size: 55px; font-weight: bold;} .content-switcher .frame .col-text .description {font-family: "Courier New",Courier,monospace; display: block; font-size: 25px; font-weight: bold; margin: -8px 0px 20px 0px; } .content-switcher .frame .col-text .main-text {} .content-switcher .frame .col-text .main-text .text-item {display: block; font-family: "NFLEndzoneSansLight",Arial, Helvetica, sans-serif; font-size: 18px; margin-bottom: 20px;width: 100%;} .content-switcher .frame .col-text .main-text .text-item b {font-family: "NFLEndzoneSansBold", Arial, Helvetica, sans-serif; font-weight: normal;} /* SECTION 1 ======================================== */ .content-section.section-2 .title-bar {margin: 0 auto; max-width: 960px; padding: 0 30px; padding: 20px 30px 40px 30px; position: relative; width: 100%;} .content-section.section-2 .title-bar .page-title {font-family: "NFLEndzoneSansCondBold", Arial, Helvetica, sans-serif; font-size: 48px; text-transform: uppercase;} .content-section.section-2 .title-bar .credit {font-family: "Courier New", Courier, monospace; font-size: 24px; font-weight: bold;} .content-section.section-2 .title-bar .credit span {font-weight: lighter;} /* SECTION 2 ======================================== */ .content-section.section-2 {background: #ffffff repeat center top / 100% auto;} .content-section.section-2 .fade-carousel {} .content-section.section-2 .fade-carousel .frame-wrap {} .content-section.section-2 .fade-carousel .frame-wrap .frame {} .content-section.section-2 .fade-carousel .frame-wrap .frame-1 {background-image: url('http://www.nfl.com/content/public/static/html/labs/rr/mccarthy/img/hero_mccarthy.jpg');} .content-section.section-2 .read-more-bar {position: relative; top: -50px;} .content-section.section-2 .read-more-bar .read-more-button {background: url('http://static.nfl.com/static/content/public/static/html/labs/rr/roethlisberger/desktop/static/img/downarrow.png') no-repeat 0px -2px; cursor: pointer; height: 150px; left: 50%; margin-left: -65px; position: absolute; top: -475px; width: 165px;} .content-section.section-2 .read-more-bar .read-more-button .text {color: #ffffff; display: block; float: left; font-family: courier new; font-size: 24px; font-weight: normal; margin: 12px 0px 0px 10px; text-transform: uppercase;} .content-section.section-2 .read-more-bar .read-more-button .icon {background: url('../img/sprite-main.png') no-repeat -25px -51px; display: block; float: left; height: 5px; margin: 21px 0px 0px 6px; width: 7px;} .content-section.section-2 .title-bar {margin: 70px auto; max-width: 720px; padding: 0 30px; padding: 10px 0px 40px 0px; position: relative; width: 100%; /* top:-200px */} .content-section.section-2 .title-bar .page-title {font-family: "NFLEndzoneSansCondBold", Arial, Helvetica, sans-serif; font-size: 48px; text-transform: uppercase;} .content-section.section-2 .title-bar .credit {font-family: "NFLendzonesanslight"; font-size: 26px; font-weight: bold;} .content-section.section-2 .title-bar .credit span {font-weight: lighter;} .content-section.section-2 .copy-wrap {position: relative; } .content-section.section-2 .copy .initial { float: left; color: #000000; font-size: 34px; font-family: "NFLEndzoneSansCondMedium"; line-height: 2px; padding-top: 12px; padding-right: 6px; margin:0; padding-right; line-height: 28px; margin-right:0px; } .content-section.section-2 .copy .initial2 {color: #000000; font-size: 23px; font-family: "NFLEndzoneSansCondmedium"; padding-top: 10px; padding-right: 7px; margin:0; padding-right; line-height: 29px; margin-right:0px; } .content-section.section-2 .copy-wrap .big-hero {background-repeat: no-repeat; background-position: center center; background-size: cover; height: 720px; position: relative; top: 0px; width: 100%;} .content-section.section-2 .copy-wrap .big-hero2 {background-image: url('http://www.nfl.com/content/public/static/html/labs/rr/mccarthy/img/hero_A.jpg'); overflow: hidden} .content-section.section-2 .copy .img-wrap {padding: 0px 0; position: relative;} .content-section.section-2 .copy .img-wrap img {background-position: center center; background-repeat: no-repeat; background-size: cover; display: block; margin-right: 20px; max-width: 450px; width: 100%; float: left;} /* VIDEO PLAYER ==================================================================================== */ /* ================================================================================================== */ .content .video-bg .jwvideo video {height: 100%!important; width: 100%!important;} .video-bg {height: 100%; position: absolute; width: 100%;} .video-bg .video-player {height: 100%; position: absolute; width: 100%;} .video-bg .video-player object {height: 100%; position: absolute; width: 100%;} .video-bg .video-player embed {height: 100%; position: absolute; width: 100%;} .video-content-wrap {left: 60px; opacity: 1; position: absolute; top: 50px; -moz-transition: all .3s; -webkit-transition: all .3s; transition: all .3s;} .hide-ui .video-content-wrap {opacity: 0;} .video-content-wrap .title {color: #ffffff; font-family: "NFLEndzoneSansBold", Arial, Helvetica, sans-serif; font-size: 30px; font-weight: normal; text-shadow: 0 0 6px rgba(0, 0, 0, 0.6); text-transform: capitalize;} .video-content-wrap .text {color: #ffffff; font-family: "NFLEndzoneSansLight"; font-size: 22px; text-shadow: 0 0 5px rgba(0, 0, 0, 0.8); width: 600px;} .video-content-wrap .time {color: #ffffff; font-family: "NFLEndzoneSansLight"; font-size: 18px; text-shadow: 0 0 5px rgba(0, 0, 0, 0.8); width: 600px;} .play-button {background:url('../img/sprite-main.png') no-repeat -56px -58px; bottom: 24px; cursor: pointer; display: block; height: 64px; left: 50px; position: absolute; width: 56px; -moz-transition: opacity .3s; -webkit-transition: opacity .3s; transition: opacity .3s;} .play-button:hover {background-position: -56px -122px;} .paused .play-button {background-position: 0px -58px;} .paused .play-button:hover {background-position: 0px -122px;} .hide-ui .play-button {opacity: .1;} .mute-button {background:url('../img/sprite-main.png') no-repeat 0px -186px; bottom: 34px; cursor: pointer; display: block; height: 46px; left: 120px; position: absolute; width: 50px; -moz-transition: opacity .3s; -webkit-transition: opacity .3s; transition: opacity .3s;} .mute-button:hover {background-position: 0px -232px;} .muted .mute-button {background-position: -50px -186px;} .muted .mute-button:hover {background-position: -50px -232px;} .hide-ui .mute-button {opacity: .1;} .scrubber-wrap {background: rgba(0,0,0,.3); bottom: 47px; height: 18px; left: 200px; padding: 0px 4px; position: absolute; opacity: 1; right: 80px; -moz-transition: opacity .3s; -webkit-transition: opacity .3s; transition: opacity .3s;} .hide-ui .scrubber-wrap {opacity: .4;} .scrubber-wrap .scrubber-bar {background: rgba(255, 255, 255, 0.35); height: 10px; left: 4px; position: absolute; top: 4px; right: 4px;} .scrubber-wrap .scrubber-bar .scrubber-progress {background: #2980b9; height: 100%; position: absolute;} .scrubber-wrap .scrubber-bar .scrubber-handle {background: url('../img/sprite-main.png') no-repeat -134px -80px ; cursor: all-scroll; height: 25px; left: 0; position: absolute; top: 0px; width: 10px;} .scrubber-wrap .scrubber-bar .scrubber-handle .current-time {background: rgba(0,0,0,.4); box-shadow: 0px 0px 0px 1px rgba(255,255,255,.2); color: #eeeeee; left: 50%; line-height: 0; margin-left: -18px; padding: 10px 4px; position: absolute; top: 30px;} .scrubber-wrap .total-time {background: rgba(0,0,0,.3); color: #eeeeee; line-height: 0; padding: 9px 5px; position: absolute; right: -47px;} .videoTitle { background-size: 60%; line-height: 40px; width: 100%; max-width: 985px; margin: 0 auto -5px auto; background: url('${nfl_devSite}/content/public/static/html/labs/rr/beckham/img/bg_videoTitle.jpg') center center no-repeat ; height: 40px; padding: 0 16.5%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .videoTitle2 { background-size: 60%; line-height: 40px; width: 100%; max-width: 985px; margin: 0 auto 10px auto; background: url('${nfl_devSite}/content/public/static/html/labs/rr/beckham/img/bg_videoTitle2.jpg') center center no-repeat ; height: 40px; padding: 0 16.5%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .videoCaption{line-height: 22px; font-size: 18px; font-style: italic; font-family: "Trebuchet MS", Helvetica, sans-serif; color: #b2b2b2; padding: 10px; width: 68%; max-width: 619px; margin: 0 auto; } .videoDivider { height: 5px; border: solid 4px #001E62; max-width: 700px; width: 90%; margin: 0 auto 40px auto; } /*elastic video*/ .videoDivider2 { height: 5px; border: solid 2px ##A6192E; max-width: 700px; width: 90%; margin: 0 auto -25px 40px; } .videoOuter { position: relative; border: 1px solid #ffffff; width: 100%;max-width: 550px; margin: 0px 0px 0px 20px; float: right;} .videoOuter2 { position: relative; border: 1px solid #ffffff; width: 100%;max-width: 400px; margin: 0px 0px 0px 20px; float: right;} .videoOuter3 { position: relative; border: 1px solid #ffffff; width: 100%;max-width: 400px; margin: 0px 0px 20px 0px; float: left;} .videoOuter:after { margin-top: 56.25%; position: relative; display: block; content: ""; z-index: 1; } .videoInner { border: 1px solid #ffffff; width: 100%; height: 100%; position:absolute; } .videoInner .nfl-video-tag { width: 100%; height: 100%; } .videoInner .yui3-nfl-video { width: 100%; height: 100%; } /* HERO UNITS ====================================================================================== */ /* ================================================================================================== */ .hero {background-repeat: no-repeat; background-position: center center; background-size: cover; max-width: 100%; background: transparent; color: #ffffff; font-size: 12px; margin-bottom: 0px;} .hero1 {max-width: 100%; background: transparent; color: #ffffff; font-size: 12px; margin-bottom: 0px; } .hero1 img { width: 100%; } .hero1 .herofooter {width: 100%;background: #000000;height: 50px;position: absolute;} .hero1 .herofooter .lefttext {color: #A71930; font-size: 24px;left: 15%;padding-top: 10px; font-family: nflendzonesanscondbold;} .hero1 .herofooter .righttext {color: #D0B240;font-size: 24px;left: 70%;padding-top: 10px;font-family: nflendzonesanscondbold;} .hero-title {bottom: 400px; height: 408px; left: 50%; margin-left: -325px; position: relative; width: 900px; -moz-transition: all .3s; -webkit-transition: all .3s; transition: all .3s;} .hero-title .title {background: url('http://static.nfl.com/static/content/public/static/html/labs/rr/katrina/desktop/static/img/hero-title2.png') no-repeat 0px 0px; height: 100%; left: ; margin: 248px 0 0 -481px; position: relative; top: ; width: 100%;} .hero-herschel {bottom: -84px; height: 579px; left: 50%; margin-left: -289px; position: absolute; width: 613px; -moz-transition: all .3s; -webkit-transition: all .3s; transition: all .3s;} .hero-herschel .herschel {background: url('../img/hero-herschel.png') no-repeat 0px 0px; height: 100%; left: 50%; margin: -289px 0px 0px -306px; position: absolute; top: 50%; width: 100%;} #content-wrap .content-section.section-1 .hero-banner {background: url('../img/hero-banner-bg.jpg') no-repeat center center #ffffff; width: 100%;} #content-wrap .content-section.section-1 .hero-banner-content {display: block; margin: 0px auto; max-width: 706px; width: 100%;} /* PHOTO UNITS ====================================================================================== */ /* ================================================================================================== */ .content-section.section-2 .copy .photo { padding: 10px 0; border-top: ; border-bottom: ; margin-top: 10px; margin-bottom: 10px; width: ; position: relative;} .content-section.section-2 .copy .photo img { width: 100%; } .content-section.section-2 .copy .photo img:hover { cursor: } .content-section.section-2 .copy .photo .caption { background-color: #; display: none; line-height: 20px; font-size: 15px; font-style: ; font-family: "NFLEndzoneSansBold"; color: #000000; padding-top: 17px; padding-bottom: 17px; padding-left: 17px; padding-right: 10px;} .content-section.section-2 .copy .photo .credit { color: #c9243f; font-weight: bold; font-family: "NFLEndzoneSansLight", Helvetica, sans-serif; font-size: 21px; line-height: 50px; } .content-section.section-2 .copy .photo .border { background: url('http://www.nfl.com/content/public/static/html/labs/rr/jerseyguys/img/jg-photo-border.jpg'); height: 5px; width: 100%; margin: 10px 0 10px 0; no-repeat scroll 0% 0%; padding: 0; display: block; border: ; position: relative; border: } div.divider { border: solid 1px #A71930;width: auto; display: block; margin-top: 20px; margin-bottom: 20px;border: ; } .content-section.section-2 .copy .photo2 { padding: 10px 0; border-top: ; border-bottom: ; margin-top: 10px; margin-bottom: 10px; max-width: 500px ; position: relative;} .content-section.section-2 .copy .photo2 img { width: 100%; } .content-section.section-2 .copy .photo2 img:hover { cursor: } .content-section.section-2 .copy .photo2 .caption {background-color: #;display: none;line-height: 26px;font-size: 19px;font-style:;font-family: "NFLEndzonesanscondmedium";color: #000000;padding-top: 10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;} .content-section.section-2 .copy .photo2 .credit { color: #c9243f; font-weight: bold; font-family: "NFLEndzoneSansLight", Helvetica, sans-serif; font-size: 21px; line-height: 50px; } .content-section.section-2 .copy .photo2 .border { background: url('http://static.nfl.com/static/content/public/static/html/labs/rr/jerseyguys/desktop/static/img/jg-photo-border.jpg'); height: 20px; width: 100%; margin: 0px 0 10px 0; } .content-section.section-2 .copy .photo3{ padding: 10px 0; border-top: ; border-bottom: ; margin-top: 10px; margin-bottom: 10px; max-width: 550px ; position: relative;} .content-section.section-2 .copy .photo3 img { width: 100%; } .content-section.section-2 .copy .photo3 img:hover { cursor: } .content-section.section-2 .copy .photo3 .caption { background: ; display: none; line-height: 20px; font-size: 15px; font-style: ; font-family: "NFLEndzoneSansBold"; color: #29433a; padding-top: 7px; padding-bottom:22px; padding-left:15px; padding-right:15px} .content-section.section-2 .copy .photo3 .credit { color: #c9243f; font-weight: bold; font-family: "NFLEndzoneSansBold", Helvetica, sans-serif; font-size: 21px; line-height: 50px; } .content-section.section-2 .copy .photo3 .border { padding: 0; display: block; border: ; 0px; margin-top: px; margin-bottom: px; height: 1px; width: auto; position: relative; } .content-section.section-2 .copy .photo4 { padding: 10px 0; border-top: ; border-bottom: ; margin-top: 10px; margin-bottom: 40px; width: ; position: relative;} .content-section.section-2 .copy .photo4 img { width: 100%; } .content-section.section-2 .copy .photo4 img:hover { cursor: } .content-section.section-2 .copy .photo4 .border { padding: 0; display: block; border: ; 0px; margin-top: px; margin-bottom: px; height: 1px; width: auto; position: relative; } /* TEMP CODE ======================================================================================= */ /* ================================================================================================== */ @media ( max-width: 899px ){ .content-section.section-2 .copy .initial { float: left; color: #000000; font-size: 30px; font-family: "NFLEndzoneSansCondMedium"; padding-top: 10px; padding-bottom: 10px; padding-right: 5px; line-height: 1px; margin-right:0px; } .content-section.section-2 .read-more-bar {position: relative; top: -50px;} .content-section.section-2 .read-more-bar .read-more-button {background: url('http://static.nfl.com/static/content/public/static/html/labs/rr/watt/desktop/static/img/downarrow.png') no-repeat 0px -2px; cursor: pointer; height: 150px; left: 50%; margin-left: -65px; position: absolute; top: -475px; width: 0px;} .hero {padding-bottom:55%;} .content-section.section-2 .copy { width: 90%; margin-top:50px} .content-section.section-2 .copy .photo.left {float: left; width:60%; margin: 10px 20px 10px -15px; } .content-section.section-2 .copy .photo.right {float: right; width:60%; margin: 10px -15px 10px 20px; } .content-section.section-2 .copy .photo img {} .content-section.section-2 .copy .photo img.mobileHide { display: none; } .content-section.section-2 .copy .photo2.left {float: left; width:60%; margin: 10px 20px 10px -15px; } .content-section.section-2 .copy .photo2.right {float: right; width:60%; margin: 10px -15px 10px 20px; } .content-section.section-2 .copy .photo2 img {} .content-section.section-2 .copy .photo2 img.mobileHide { display: none; } .content-section.section-2 .copy .photo3.left {float: left; width:60%; margin: 10px 20px 10px -15px; } .content-section.section-2 .copy .photo3.right {float: right; width:60%; margin: 10px -15px 10px 20px; } .content-section.section-2 .copy .photo3 img {} .content-section.section-2 .copy .photo3 img.mobileHide { display: none; } .credit-wrap .credit-content {font-size: 12px; width:100%} .credit-wrap .credit-content .credit-content-inner .col-1 {float: left; width:100%;} .credit-wrap .credit-content .credit-content-inner .col-2 {float: left; width: 20%;} .credit-wrap .credit-content .credit-content-inner ul {list-style: none;} .credit-wrap .credit-content .credit-content-inner ul li {display: block; margin-bottom: 20px; position: relative;} .credit-wrap .credit-content .credit-content-inner ul li .title {color: #D0B240;font-family: "NFLEndzoneSansBold",Courier,monospace;font-size: 15px;left: 0;position: absolute;text-align: right;text-transform: capitalize;top: 0;width: 155px;} .credit-wrap .credit-content .credit-content-inner ul li .text {color: #ffffff; display: block; font-family: 'NFLEndzoneSansLight',Arial, Helvetica; font-size: 15px; font-weight: lighter; padding: 0px 4px 0px 200px;} .hero1 .herofooter .lefttext {color: #A71930; font-size: 17px;left: 8%;padding-top: 15px;} .hero1 .herofooter .righttext {color: #D0B240;font-size: 17px;left: 72%;padding-top: 15px;} .content-section .fade-carousel {height: 400px; position: absolute; width: 100%;} .content-section.section-2 .title-bar {margin: 0 auto; max-width: 720px; padding: 0 30px; padding: 450px 30px 120px 0px; position: relative; width: 85%;} .content-section.section-2 .title-bar .page-title {font-family: "NFLEndzoneSansCondBold", Arial, Helvetica, sans-serif; font-size: 48px; text-transform: uppercase;} .content-section.section-2 .title-bar .credit {font-family: "Courier New", Courier, monospace; font-size: 24px; font-weight: bold;} .content-section.section-2 .title-bar .credit span {font-weight: lighter;} .header-wrap .project-logo {width: 15px} .header-wrap .nfl-logo {width:auto} } @media ( max-width: 468px ){ .content-section.section-2 .copy .initial { float: left; color: #000000; font-size: 26px; font-family: "NFLEndzoneSansCondMedium"; padding-top: 9px; padding-bottom: 10px; padding-right: 6px; line-height: 8px; margin-right:0px; } .content-section.section-2 .copy .initial2 {color: #000000; font-size: 21px; font-family: "NFLEndzoneSansCondmedium"; padding-top: 10px; padding-right: 7px; margin:0; padding-right; line-height: 29px; margin-right:0px; } .content-section.section-2 .copy { width: 90%; font-size: 17px;} .content-section.section-2 .copy .img-wrap {max-width:55px; top:4px} .content-section.section-2 .copy .photo.left {float: left; width:100%; margin: 10px 10px 10px 0px; } .content-section.section-2 .copy .photo.right {float: right; width:100%; margin: 10px 0px 10px 10px; } .content-section.section-2 .copy .photo img {} .content-section.section-2 .copy .photo img.mobileHide { display: none; } .content-section.section-2 .copy .photo2.left {float: left; width:100%; margin: 10px 10px 10px 0px; } .content-section.section-2 .copy .photo2.right {float: right; width:100%; margin: 10px 0px 10px 10px; } .content-section.section-2 .copy .photo2 img {} .content-section.section-2 .copy .photo2 img.mobileHide { display: none; } .content-section.section-2 .copy .photo3.left {float: left; width:100%; margin: 10px 10px 10px 0px; } .content-section.section-2 .copy .photo3.right {float: right; width:100%; margin: 10px 0px 10px 10px; } .content-section.section-2 .copy .photo3 img {} .content-section.section-2 .copy .photo3 img.mobileHide { display: none; } div.divider .logo { display: block; margin: 0 auto; position: relative; top: -40px; /* width:100% */} .hero {width:100%; position: relative; height:120px; padding-bottom: 60%;} #header-wrap .nfl-logo {width: 100%; margin-left; top:; padding-left:; float:right; margin-right:50%;} #header-wrap .project-logo {width: 65px; float: left; margin-left: -20px; top:20px } .credit-wrap .credit-content {font-size: 12px; width:100%} .credit-wrap .credit-content .credit-content-inner .col-1 {float: left; width:100%;} .credit-wrap .credit-content .credit-content-inner .col-2 {float: left; width: 20%;} .credit-wrap .credit-content .credit-content-inner ul {list-style: none;} .credit-wrap .credit-content .credit-content-inner ul li {display: block; margin-bottom: 20px; position: relative;} .credit-wrap .credit-content .credit-content-inner ul li .title {color: #D0B240;font-family: "NFLEndzoneSansBold",Courier,monospace;font-size: 13px;left: 0;position: absolute;text-align: right;text-transform: capitalize;top: 0;width: 125px;} .credit-wrap .credit-content .credit-content-inner ul li .text {color: #ffffff; display: block; font-family: 'NFLEndzoneSansLight',Arial, Helvetica; font-size: 13px; font-weight: lighter; padding: 0 4px 0 150px;} .content-section .fade-carousel {height: 160px; position: absolute; width: 100%;} .content-section.section-2 .title-bar {margin: 0 auto; max-width: 467px; padding: 0 30px; padding: 50px 30px 120px 20px; position: relative; width: 100%;} .content-section.section-2 .title-bar .page-title {font-family: "NFLEndzoneSansCondBold", Arial, Helvetica, sans-serif; font-size: 48px; text-transform: uppercase;} .content-section.section-2 .title-bar .credit {font-family: "Courier New", Courier, monospace; font-size: 24px; font-weight: bold;} .content-section.section-2 .title-bar .credit span {font-weight: lighter;} .hero1 .herofooter .lefttext {color: #A71930;font-size: 14px;left: 10%;padding-top: 15px;} .hero1 .herofooter .righttext {color: #D0B240;font-size: 14px;left: 75%;padding-top: 15px;} #share-bar {display: inline-block; position: absolute; right: 6px; top: 13px;} #share-bar .nflicon {color: #D0B240;cursor: pointer;font-family: "nfl_iconsregular";font-size: 30px;line-height:40px;} .content-section.section-2 .read-more-bar .read-more-button { background: url('http://static.nfl.com/static/content/public/static/html/labs/rr/watt/desktop/static/img/downarrow.png') no-repeat 0px -2px; cursor: pointer; position: absolute; width: 100%; height: 50%;} } @media ( min-width: 900px ){ .content-section.section-2 .copy .initial { float: left; color: #000000; font-size: 34px; font-family: "NFLEndzoneSansCondMedium"; padding-top: 9px; padding-bottom: 10px; padding-right: 6px; line-height: 3px; margin-right:0px; } .content-section.section-2 .read-more-bar {position: relative; top: -50px;} .content-section.section-2 .read-more-bar .read-more-button {background: url('http://static.nfl.com/static/content/public/static/html/labs/rr/watt/desktop/static/img/downarrow.png') no-repeat 0px -2px; cursor: pointer; height: 0px; left: 8%; position: absolute; top: -310px; width: 165px;} .hero {padding-bottom:8%;} .content-section.section-2 .copy { width: 770px; } .content-section.section-2 .copy2 { width: 780px; } .content-section.section-2 .copy3 { width: auto; } .content-section.section-2 .copy .photo.left { float: left; margin-right: -20px; left: -5%; } .content-section.section-2 .copy .photo.right { float: right; margin-left: -20px; right: -5%; } .content-section.section-2 .copy .photo {width: 400px;} .content-section.section-2 .copy .photo2.left { float: left; margin-right: -20px; left: -5%; } .content-section.section-2 .copy .photo2.right { float: right; margin-left: -20px; right: -5%; } .content-section.section-2 .copy .photo2 { width: 500px; } .content-section.section-2 .copy .photo3.left { float: left; margin-right: -40px; left: -8%; } .content-section.section-2 .copy .photo3.right { float: right; margin-left: -40px; right: -8%; } .content-section.section-2 .copy .photo3 { width: 550px; } .content-section.section-2 .copy .photo4.left { float: left; margin-right: -50px; left: -10%; } .content-section.section-2 .copy .photo4.right { float: right; margin-left: -50px; right: -10%; } .content-section.section-2 .copy .photo4 { width: 100px; } .header-wrap .project-logo {width: auto} .header-wrap .nfl-logo {width: auto} } @media ( min-width: 1100px ){ .content-section.section-2 .copy .initial { float: left; color: #000000; font-size: 34px; font-family: "NFLEndzoneSansCondMedium"; padding-top: 7px; padding-bottom: 8px; padding-right: 6px; line-height: 3px; margin-right:0px; } .content-section.section-2 .read-more-bar {position: relative; top: -50px;} .content-section.section-2 .read-more-bar .read-more-button {background: url('http://static.nfl.com/static/content/public/static/html/labs/rr/watt/desktop/static/img/downarrow.png') no-repeat 0px -2px; cursor: pointer; height: 0px; left: 24%; position: absolute; top: -200px; width: 165px;} .hero {padding-bottom: 5%;} .content-section.section-2 .copy { width: 770px; } .content-section.section-2 .copy2 { width: 780px; } .content-section.section-2 .copy3 { width: auto; } .content-section.section-2 .copy .photo.left { float: left; margin-right: -50px; left: -10%; } .content-section.section-2 .copy .photo.right { float: right; margin-left: -50px; right: -10%; } .content-section.section-2 .copy .photo {width: 400px;} .content-section.section-2 .copy .photo2.left { float: left; margin-right: -50px; left: -10%; } .content-section.section-2 .copy .photo2.right { float: right; margin-left: -50px; right: -10%; } .content-section.section-2 .copy .photo2 { width: 500px; } .content-section.section-2 .copy .photo3.left { float: left; margin-right: -50px; left: -10%; } .content-section.section-2 .copy .photo3.right { float: right; margin-left: -50px; right: -10%; } .content-section.section-2 .copy .photo3 { width: 550px; } .content-section.section-2 .copy .photo4.left { float: left; margin-right: -50px; left: -10%; } .content-section.section-2 .copy .photo4.right { float: right; margin-left: -50px; right: -10%; } .content-section.section-2 .copy .photo4 { width: 100px; } .header-wrap .project-logo {width: auto} .header-wrap .nfl-logo {width: auto} } @media ( min-width: 1250px ){ .content-section.section-2 .copy .initial { float: left; color: #000000; font-size: 30px; font-family: "NFLEndzoneSansCondMedium"; padding-top: 10px; padding-bottom: 8px; padding-right: 6px; line-height: 3px; margin-right:0px; } .content-section.section-2 .read-more-bar {position: relative; top: -50px;} .content-section.section-2 .read-more-bar .read-more-button {background: url('http://static.nfl.com/static/content/public/static/html/labs/rr/watt/desktop/static/img/downarrow.png') no-repeat 0px -2px; cursor: pointer; height: 0px; left: 25%; position: absolute; top: -250px; width: 165px;} .hero {padding-bottom: 5%;} .content-section.section-2 .copy { width: 770px; } .content-section.section-2 .copy2 { width: 780px; } .content-section.section-2 .copy3 { width: auto; } .content-section.section-2 .copy .photo.left { float: left; margin-right: -50px; left: -10%; } .content-section.section-2 .copy .photo.right { float: right; margin-left: -50px; right: -10%; } .content-section.section-2 .copy .photo {width: 400px;} .content-section.section-2 .copy .photo2.left { float: left; margin-right: -50px; left: -10%; } .content-section.section-2 .copy .photo2.right { float: right; margin-left: -50px; right: -10%; } .content-section.section-2 .copy .photo2 { width: 500px; } .content-section.section-2 .copy .photo3.left { float: left; margin-right: -50px; left: -10%; } .content-section.section-2 .copy .photo3.right { float: right; margin-left: -50px; right: -10%; } .content-section.section-2 .copy .photo3 { width: 550px; } .content-section.section-2 .copy .photo4.left { float: left; margin-right: -50px; left: -10%; } .content-section.section-2 .copy .photo4.right { float: right; margin-left: -50px; right: -10%; } .content-section.section-2 .copy .photo4 { width: 100px; } .header-wrap .project-logo {width: auto} .header-wrap .nfl-logo {width: auto} } @media ( min-width: 1500px ){ .content-section.section-2 .copy .initial {float: left;color: #000000;font-size: 35px;font-family: "NFLEndzoneSansCondMedium";padding-top: 10px;padding-bottom: 8px;padding-right: 6px;line-height: 3px;margin-right:0px;} .content-section.section-2 .read-more-bar {position: relative; top: -50px;} .content-section.section-2 .read-more-bar .read-more-button {background: url('http://static.nfl.com/static/content/public/static/html/labs/rr/watt/desktop/static/img/downarrow.png') no-repeat 0px -2px; cursor: pointer; height: 0px; left: 25%; position: absolute; top: -320px; width: 100%;} .hero {padding-bottom: 5%;} .content-section.section-2 .copy { width: 770px; } .content-section.section-2 .copy2 { width: 780px; } .content-section.section-2 .copy3 { width: auto; } .content-section.section-2 .copy .photo.left { float: left; margin-right: -50px; left: -10%; } .content-section.section-2 .copy .photo.right { float: right; margin-left: -50px; right: -10%; } .content-section.section-2 .copy .photo {width: 400px;} .content-section.section-2 .copy .photo2.left { float: left; margin-right: -50px; left: -10%; } .content-section.section-2 .copy .photo2.right { float: right; margin-left: -50px; right: -10%; } .content-section.section-2 .copy .photo2 { width: 500px; } .content-section.section-2 .copy .photo3.left { float: left; margin-right: -50px; left: -10%; } .content-section.section-2 .copy .photo3.right { float: right; margin-left: -50px; right: -10%; } .content-section.section-2 .copy .photo3 { width: 550px; } .content-section.section-2 .copy .photo4.left { float: left; margin-right: -50px; left: -10%; } .content-section.section-2 .copy .photo4.right { float: right; margin-left: -50px; right: -10%; } .content-section.section-2 .copy .photo4 { width: 100px; } .hero1 .herofooter .lefttext {color: #000000;font-size: 24px;left: 15%;padding-top: 10px;font-family: nflendzonesanscondbold;} .hero1 .herofooter .righttext {color: #D0B240;font-size: 24px;left: 75%;padding-top: 10px;font-family: nflendzonesanscondbold;} .header-wrap .project-logo {width: auto} .header-wrap .nfl-logo {width: auto} }