.vmiddle { position: absolute; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); } .pgCenterP { /* centering the page parent */ display: block; width: 980px; /* 1280px;*/ margin: 0 auto; } .pgCenterC { /* centering the page child */ display: block; width: 980px; text-align: left; } #spxDxHeader { /* Here is header with logospace and navi. But this is just the container for headerfix, only the content has to be moved down with this backgroundcolor */ background-color: #0b1124; font: normal 15px 'Saira', Arial ,sans-serif; } #spxDxHeader .edi, #spxDxHeader .nav .lvl1 .itm1 > .ct { font-family: 'Open Sans', Arial, sans-serif; } #spxDxHeader img { border: 0; display: block; } #spxDxHeader .nav ul, #spxDxHeader .nav ol, #spxDxHeader .nav li { list-style-type: none; margin: 0; padding: 0; color: #fff; } #spxDxHeader #headerfix { /* The header has the background color, is all position fixed and stretches over the complete browser width */ background-color: #0b1124; position: fixed; width:100%; top:0; left:0; z-index: 10000; transition:all 0.3s linear; } /*LOGO SPACE*/ #spxDxHeader .logoSpace { /* The upper line of the header contains the logo, social buttons, search and editions links. Since the content is centered on half left, the space to center the logo and put the social buttons and edition links to left and right is put also half left over the content. */ min-width: 980px; /*xmargin-right: 310px; the difference between 1280px and 970px */ height: 80px; position: relative; overflow: hidden; transition:all 0.3s linear; } /* @media (max-width: 1010px) { if the width of the browswer is reduced below 970px + 2x20px = 1010px the right and left distance from right and left elements of the first line are dropped #spxDxHeader .l { margin-left: 0px; } #spxDxHeader .r { margin-right: 0px; } } */ #spxDxHeader.small .logoSpace { /* If the header is collapsed from scrolling down the height of the upper logo space is reduced */ height: 0; } #spxDxHeader.small.nl2 #headerfix { /* If the header is collapsed from scrolling down and the second navi line is showing, move the header up to show only this second navi line. Override this, if there is more space used, for example the global navi from nba. */ top: -44px; } #spxDxHeader .logoBig { /* Center the logo horizontal and vertical without knowing its size. */ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #spxDxHeader .logoBig a { /* Most commonly the logo is linked to the homepage. If there are more than one logo and they are separately linked, these links are vertically aligned to the middle. */ vertical-align: middle; } #spxDxHeader .logoSpace .l { /* The left element from logoSpace contains the search and edition links */ position: absolute; left: 0; margin-left: 20px; /* transition:all 0.5s ease; */ } #spxDxHeader .logoSpace .r { /* The right element from logoSpace contains the social buttons */ position: absolute; right: 0; margin-right: 20px; /* transition:all 0.5s ease; */ } /* NAVIGATION */ #spxDxHeader .nav { /* The multilined navigation under the logoSpace */ position: relative; color: #fff; } #spxDxHeader .nav .pgCenterC { /* The navi is set to be the same width as the content and positioned over the content as well. This definition overrides the global page centering definitions handling the white space left and right from content. */ margin: 0 5px; width: 970px; } /* NAVIGATION SMALL LOGO */ #spxDxHeader .nav .logoSmallP { /* A parent element for absolute positioning left from navi Using a page centering construct under the navi, places an anchor at navi bottom and content left only if the inner tag is defined as position relative. */ position: relative; } #spxDxHeader .nav .logoSmall { /* If the header is collapsed by scrolling down, the smaller logo is shown left from the navi. If the browser-width is larger than content width you can see it. This is the definition for the smaller logo but it is unvisible. The next style shows the logo if the small class is added to the header root element. */ display: block; position: absolute; right: 1000%; opacity: 0.3; transition:right 0s linear 0.3s,opacity 0.3s linear; /* right starts after some time, but works instantly on activating .small */ bottom: 10px; /* override this if the image is changed i.e. for another destination */ } #spxDxHeader.small .nav .logoSmall { /* Activating the small logo left from navi if the header is collapsed from scrolling down. */ opacity: 1; right: 102%; transition:opacity 0.3s linear; /* definition for fade in: the right value changes instantly because this transition works on small and overrides the transition from non small */ } /* NAVIGATION ITEMS */ #spxDxHeader.small .nav { font-size: 15px; } #spxDxHeader .nav .itm { /* Common definitions for any navi item */ font-weight: normal; display: inline-block; } #spxDxHeader .nav .itm .ct { /* The content of the navi item is to be stretched to the click and hover space */ color: inherit; text-decoration: none; font-weight: normal; font-style: normal; display: inline-block; line-height: 44px; /* height definition and vertically centering*/ } #spxDxHeader .nav .lvl1over .itm .ct { /* The second overlay navi must stretch over the border. */ line-height: 46px; /* height definition and vertically centering*/ } #spxDxHeader .nav .sep { /* the separator for any navi line */ display: inline-block; background-color: #fff; padding: 0; width: 1px; height: 25px; margin-top: -5px; vertical-align: middle; opacity: .5; } #spxDxHeader .nav .lvl1 { /* The first navigation line has borders on top and bottom */ border: 4px solid #fb3500; border-width: 4px 0 0 0; display: block; } #spxDxHeader .nav .lvl1 .itm1.sel{ /* lvl1 selection */ background: #fb3500; } #spxDxHeader .nav .lvl1 .itm1.ov:hover { /* lvl1 hover if overlay is enabled */ background-color: #fff; } #spxDxHeader .nav .lvl1 .itm1.ov:hover > .ct { color: #0b1124; } #spxDxHeader .nav .lvl1over .itm2:hover, #spxDxHeader .nav .lvl2 .itm2:hover > .ct { background: rgba(0,0,0,0.15); } #spxDxHeader.small .nav .lvl2 .itm2:hover > .ct { background-color: #3d3d3d; } #spxDxHeader .nav .lvl2 .itm2.sel { /* selection on mouse over or selected */ background: rgba(0,0,0,0.15); } #spxDxHeader .nav .lvl3 .itm3:hover .ct { /* selection on mouse over or selected */ font-weight: bold; } #spxDxHeader .nav .lvl2 .itm2.imp .ct, #spxDxHeader .nav .lvl1over .itm2.imp .ct { font-weight: bold; } #spxDxHeader .nav .lvl1 .itm1 .ct { /* the navi items of the first level are with fixed width */ width: 150px; text-align: center; } #spxDxHeader .nav .lvl1 .itm1 > .ct { font-weight: bold; } #spxDxHeader .nav .lvl1 .itm1 .itm2 .ct { /* since level 1 navi items are with fixed width, the .lvl1over- items of level 2 have to reset the width*/ width: initial; } #spxDxHeader .nav .lvl1over { /* This is a level 2 navi line that appears only on mouseover from a top-level navi item */ position: absolute; display: block; overflow: hidden; top: 48px; height: 0; left:0; width: 100%; background-color: #fff; text-align: left; opacity: 0; z-index:1; transition:all 0.3s linear 0.3s; } #spxDxHeader .nav .lvl1over .itm2 > .ct { color: #0b1124; } /* transition target */ #spxDxHeader .nav .lvl1 .itm1:hover .lvl1over { /* On mouseover on a top-level navi item the level 2 navi line appears */ height: 46px; opacity: 1; transition:all 0.3s linear; } #spxDxHeader .nav .itm2, #spxDxHeader .nav .lvl2 .sep { /* The level 2 navi items are aligned left so they define a margin to the right */ margin-right: 0px; } #spxDxHeader .nav .itm2 .ct { /* The padding of level 2 navi items have an impact on the count of items that can be shown */ padding: 0 12px; } #spxDxHeader .nav .lvl2 { /* This is the permanent level 2 navi line */ display: block; background-color: #fb3500; transition:background-color 0.5s linear; } #spxDxHeader.small .nav .lvl2 { /* If the header is collapsed from scrolling down, the navi background is changed */ background-color: #0b1124; } #spxDxHeader.small .nav .lvl1 { border-width: 0 0 4px 0; } #spxDxHeader .nav .lvl2 .pgCenterC, #spxDxHeader .nav .lvl1 .pgCenterC { white-space: nowrap; } #spxDxHeader .nav .lvl2 .pgCenterC { position: relative; } #spxDxHeader .nav .lvl3 { /* The level 3 navi is a dropdown that appears only on mouseover from a level 2 navi item */ position: absolute; display: block; padding: 10px 0; background-color: #fff; color: #3d3d3d; margin: 0px 0 0 0px; /*margin: 0px 0 0 -40px;*/ width: 250px; text-align: left; transition:all 0.1s linear; -webkit-transition-delay: 0.3s; /* Safari */ transition-delay: 0.3s; transform: rotateY(-90deg); /*box-shadow: 3px 3px 15px #888888;*/ } #spxDxHeader .nav .dots .lvl3 { margin: 0px 0 0 -195px; } #spxDxHeader .nav .lvl2 .itm2:hover .lvl3 { /* On mouseover on a level 2 navi item the dropdown navi appears */ transform: rotateY(0deg); } #spxDxHeader .nav .lvl3 .itm3 { /* Level 3 navi items are blocks */ display: block; margin: 0 10px; } #spxDxHeader .nav .lvl3 .itm3 .ct { /* The navi items are left aligned and stretch to 100% width */ line-height: 30px; padding: 0 0 0 10px; width: 100%; color: #000000; white-space: nowrap; } #spxDxHeader .lvl3::before { /* the arrow is on top of the dropdown */ content: ''; position: absolute; display: block; top: -10px; left: 8px; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #fff transparent; } #spxDxHeader .dots .lvl3::before { left: 205px; } #spxDxHeader .nav span.ct { cursor: default; } #spxDxHeader .logoSpace .edi span, #spxDxHeader .logoSpace .edi a, #spxDxHeader .logoSpace .edi s { display: inline-block; vertical-align: middle; margin-right: 10px; } #spxDxHeader .logoSpace .edi .lbl { font-size: 12px; color: #fff; opacity: .9375; } #spxDxHeader .logoSpace .edi .itm { width: 30px; height: 30px; opacity: 0.5; } #spxDxHeader .logoSpace .edi .itm.sel, #spxDxHeader .logoSpace .edi .itm:hover { opacity: 1; } #spxDxHeader .logoSpace .edi .sep { width: 1px; background-color: #fff; height: 10px; opacity: .5; } #spxDxHeader .logoSpace .edi .de { background: url(https://www.spox.com/pub/pic/header16/edi-de.svg) no-repeat center center; } #spxDxHeader .logoSpace .edi .at { background: url(https://www.spox.com/pub/pic/header16/edi-at.svg) no-repeat center center; } #spxDxHeader .logoSpace .edi .ch { background: url(https://www.spox.com/pub/pic/header16/edi-ch.svg) no-repeat center center; } #spxDxHeader .logoSpace .searchbg { width: 150px; height: 30px; background: url(https://www.spox.com/pub/pic/header16/search-bg.svg) no-repeat center center; position: relative; } #spxDxHeader .logoSpace .searchbg.sel { opacity: 1; } #spxDxHeader .logoSpace .searchbg .plh { margin:4px 0 0 34px; position: absolute; top:0; left:0; color: #fff; font-size: 15px; opacity: .9375; } #spxDxHeader .logoSpace .searchbg .fld { position: absolute; top:0; left:0; text-align: left; margin:4px 0 0 34px; width: 102px; color:#fff; font-size: 15px; height: auto; min-height:16px; white-space: nowrap; overflow: hidden; outline:0; } #spxDxHeader .logoSpace .soc a, #spxDxHeader .logoSpace .soc s { display: inline-block; vertical-align: middle; margin-left: 15px; } #spxDxHeader .logoSpace .soc .sep { width: 1px; background-color: #fff; height: 10px; } #spxDxHeader .logoSpace .soc .itm { width: 30px; height: 30px; opacity: .9375; padding:0; } #spxDxHeader .logoSpace .soc .instagram { background: url(https://www.spox.com/pub/pic/header16/soc-instagram.svg) no-repeat center center; } #spxDxHeader .logoSpace .soc .facebook { background: url(https://www.spox.com/pub/pic/header16/soc-facebook.svg) no-repeat center center; } #spxDxHeader .logoSpace .soc .twitter { background: url(https://www.spox.com/pub/pic/header16/soc-twitter.svg) no-repeat center center; } #spxDxHeader .logoSpace .soc .tiktok { background: url(https://www.spox.com/pub/pic/header16/soc-tiktok.svg) no-repeat center center; } #spxDxHeader .logoSpace .soc #mikslink { background: url(https://www.spox.com/pub/pic/header16/soc-mobil.svg) no-repeat center center; } .nl1 { /* The content has to move down below the position fixed header. nl1 defines navi level 0 height */ padding-top:132px; } .nl2 { /* The content has to move down below the position fixed header. nl2 defines navi level 1 height */ padding-top:177px; } /* manual separator definition .sni2053474 .ct { padding: 0 10px; } .sni2053474::before { content:""; display: inline-block; background-color: #fff; padding: 0; width: 1px; height: 25px; margin-top: -5px; vertical-align: middle; }*/ /* here we define special navi items to be outside the navi .sni239762 { display: block; position: absolute; right: 102%; } #spxDxHeader .nav .sni2128838 { display: block; top: 3px; position: absolute; left: 102%; color: transparent; background: url(https://www.spox.com/pub/pic/header16/search-bg.svg) no-repeat center center; } #spxDxHeader .nav .sni2128838 a.ct { width: 150px; height: 30px; padding: 0; } #spxDxHeader .nav .lvl2 .itm2.sni2128838:hover > .ct { background: transparent; } */ /* These Navipoints are graphics outside the navi so they are hidden within the overlay navi */ #spxDxHeader .nav .lvl1over .sni2382228, /*NBA-Store*/ #spxDxHeader .nav .lvl1over .sni2382227, /*NBA-LeaguePass*/ #spxDxHeader .nav .lvl1over .sni2382221, /*NFL-GamePass*/ #spxDxHeader .nav .lvl1over .sni2382222, /*NFL-Shop*/ #spxDxHeader .nav .lvl1over .sni3401661, /*MLB-GamePass*/ #spxDxHeader .nav .lvl1over .sni3401662 /*MLB-Shop*/ { display: none; } @media (max-width: 1110px){ #spxDxHeader.small .nav .logoSmall { right: 1000%; opacity: 0.3; } } #spxDxFooter { overflow: hidden; background-color: #0b1124; font: normal 15px 'Saira', Arial ,sans-serif; padding: 0 0 20px 0; margin: 20px 0 0 0; color: #fff; } #spxDxFooter .lnks { border: 1px solid #fb3500; border-width: 1px 0; height: 44px; } #spxDxFooter .lnks .items .tbl { display: table; width:100%; margin: 0; padding:0; } #spxDxFooter .lnks .items .tr { display: table-row; } #spxDxFooter .lnks .items a { display: table-cell; line-height: 44px; color: #fff; text-align: center; font-weight: bold; } #spxDxFooter .lnks .items a:hover { background-color: #3d3d3d; text-decoration: none; } #spxDxFooter .mid { text-align: center; } #spxDxFooter p { margin: 20px 0; } #spxDxFooter img { border:0; }