|
|
| Line 354: |
Line 354: |
| width: inherit; | | width: inherit; |
| } | | } |
| }
| |
|
| |
| /* Games Bar */
| |
| #sitenav-games {
| |
| margin-bottom: 15px;
| |
| }
| |
| .secondary {
| |
| width: 100%;
| |
| /*background: #060805;*/
| |
| box-sizing: content-box;
| |
| position: relative;
| |
| top: 0;
| |
| }
| |
| .secondary * {
| |
| box-sizing: content-box;
| |
| }
| |
| .secondary h2 {
| |
| margin: 12px 0 12px
| |
| }
| |
| .secondary > ul {
| |
| /*z-index: 10000;*/
| |
| position: relative;
| |
| height: 70px;
| |
| margin: 0px auto;
| |
| padding: 0px;
| |
| box-shadow: 0px 1px 2px #333;
| |
| }
| |
| .secondary ul li {
| |
| list-style: none;
| |
| float: left;
| |
| }
| |
| .secondary > ul li {
| |
| display: block;
| |
| width: 60px;
| |
| height: 70px;
| |
| }
| |
| /* splitting pixels.. */
| |
| .secondary > ul > li:nth-child(even) {
| |
| width: 61px;
| |
| }
| |
| .secondary .g19 {
| |
| border-right: 0px;
| |
| }
| |
| .secondary > ul li a {
| |
| display: block;
| |
| background-repeat: no-repeat;
| |
| background-position-y: 5px;
| |
| width: 100%;
| |
| height: 100%;
| |
| }
| |
| .secondary > ul, .secondary > ul > li {
| |
| border-right: 1px solid rgba(38, 96, 38, 0.4);
| |
| background: #1C3E26; /* Old browsers */
| |
| background: -moz-linear-gradient(top, #1C3E26 0%, #000201 100%); /* FF3.6+ */
| |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1C3E26), color-stop(100%, #000201)); /* Chrome,Safari4+ */
| |
| background: -webkit-linear-gradient(top, #1C3E26 0%, #000201 100%); /* Chrome10+,Safari5.1+ */
| |
| background: -o-linear-gradient(top, #1C3E26 0%, #000201 100%); /* Opera 11.10+ */
| |
| background: -ms-linear-gradient(top, #1C3E26 0%, #000201 100%); /* IE10+ */
| |
| background: linear-gradient(to bottom, #1C3E26 0%, #000201 100%); /* W3C */
| |
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1C3E26', endColorstr='#000201', GradientType=0); /* IE6-9 */
| |
| }
| |
| .secondary > ul > li:hover {
| |
| background: #C6E2C9; /* Old browsers */
| |
| background: -moz-linear-gradient(top, #1C3E26 0%, #C6E2C9 100%); /* FF3.6+ */
| |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1C3E26), color-stop(100%, #C6E2C9)); /* Chrome,Safari4+ */
| |
| background: -webkit-linear-gradient(top, #1C3E26 0%, #C6E2C9 100%); /* Chrome10+,Safari5.1+ */
| |
| background: -o-linear-gradient(top, #1C3E26 0%, #C6E2C9 100%); /* Opera 11.10+ */
| |
| background: -ms-linear-gradient(top, #1C3E26 0%, #C6E2C9 100%); /* IE10+ */
| |
| background: linear-gradient(to bottom, #1C3E26 0%, #C6E2C9 100%); /* W3C */
| |
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1C3E26', endColorstr='#C6E2C9', GradientType=0); /* IE6-9 */
| |
| }
| |
| /*
| |
| * Flyout Styles
| |
| * -----------------------------------------------------------------------------
| |
| */
| |
|
| |
| .flyout {
| |
| display: none;
| |
| z-index: 9009;
| |
| width: 1170px;
| |
| height: 260px;
| |
| position: absolute;
| |
| color: #152F02;
| |
| background: #C6E2C9;
| |
| font-size: 14px;
| |
| -moz-box-shadow: 0 3px 5px #000000;
| |
| -webkit-box-shadow: 0 3px 5px #000000;
| |
| box-shadow: 0 3px 5px #000000;
| |
| }
| |
| .flyout a, .flyout h2 {
| |
| color: #000000;
| |
| text-decoration: none;
| |
| border-bottom: 0;
| |
| }
| |
| .flyout strong a, .flyout a strong {
| |
| color: #152F02;
| |
| }
| |
| .flyout a:hover, .flyout a:hover * {
| |
| color: #F3B333;
| |
| }
| |
| /* Flyout Positioning */
| |
| .secondary ul li:nth-of-type(2) .flyout {
| |
| margin-left: -61px;
| |
| }
| |
| .secondary ul li:nth-of-type(3) .flyout {
| |
| margin-left: -123px;
| |
| }
| |
| .secondary ul li:nth-of-type(4) .flyout {
| |
| margin-left: -184px;
| |
| }
| |
| .secondary ul li:nth-of-type(5) .flyout {
| |
| margin-left: -246px;
| |
| }
| |
| .secondary ul li:nth-of-type(6) .flyout {
| |
| margin-left: -307px;
| |
| }
| |
| .secondary ul li:nth-of-type(7) .flyout {
| |
| margin-left: -369px;
| |
| }
| |
| .secondary ul li:nth-of-type(8) .flyout {
| |
| margin-left: -430px;
| |
| }
| |
| .secondary ul li:nth-of-type(9) .flyout {
| |
| margin-left: -492px;
| |
| }
| |
| .secondary ul li:nth-of-type(10) .flyout {
| |
| margin-left: -553px;
| |
| }
| |
| .secondary ul li:nth-of-type(11) .flyout {
| |
| margin-left: -615px;
| |
| }
| |
| .secondary ul li:nth-of-type(12) .flyout {
| |
| margin-left: -676px;
| |
| }
| |
| .secondary ul li:nth-of-type(13) .flyout {
| |
| margin-left: -738px;
| |
| }
| |
| .secondary ul li:nth-of-type(14) .flyout {
| |
| margin-left: -799px;
| |
| }
| |
| .secondary ul li:nth-of-type(15) .flyout {
| |
| margin-left: -861px;
| |
| }
| |
| .secondary ul li:nth-of-type(16) .flyout {
| |
| margin-left: -922px;
| |
| }
| |
| .secondary ul li:nth-of-type(17) .flyout {
| |
| margin-left: -984px;
| |
| }
| |
| .secondary ul li:nth-of-type(18) .flyout {
| |
| margin-left: -1045px;
| |
| }
| |
| .secondary ul li:nth-of-type(19) .flyout {
| |
| margin-left: -1109px;
| |
| }
| |
| /* Game Navigation Images */
| |
| .secondary .g1 > a {
| |
| background-image: url('images/gamenav/G01.png');
| |
| }
| |
| .secondary .g2 > a {
| |
| background-image: url('images/gamenav/G02.png');
| |
| }
| |
| .secondary .g3 > a {
| |
| background-image: url('images/gamenav/G03.png');
| |
| }
| |
| .secondary .g4 > a {
| |
| background-image: url('images/gamenav/G04.png');
| |
| }
| |
| .secondary .g5 > a {
| |
| background-image: url('images/gamenav/G05.png');
| |
| }
| |
| .secondary .g6 > a {
| |
| background-image: url('images/gamenav/G06.png');
| |
| }
| |
| .secondary .g7 > a {
| |
| background-image: url('images/gamenav/G07.png');
| |
| }
| |
| .secondary .g8 > a {
| |
| background-image: url('images/gamenav/G08.png');
| |
| }
| |
| .secondary .g9 > a {
| |
| background-image: url('images/gamenav/G09.png');
| |
| }
| |
| .secondary .g10 > a {
| |
| background-image: url('images/gamenav/G10.png');
| |
| }
| |
| .secondary .g11 > a {
| |
| background-image: url('images/gamenav/G11.png');
| |
| }
| |
| .secondary .g12 > a {
| |
| background-image: url('images/gamenav/G12.png');
| |
| }
| |
| .secondary .g13 > a {
| |
| background-image: url('images/gamenav/G13.png');
| |
| }
| |
| .secondary .g14 > a {
| |
| background-image: url('images/gamenav/G14.png');
| |
| }
| |
| .secondary .g15 > a {
| |
| background-image: url('images/gamenav/G15.png');
| |
| }
| |
| .secondary .g16 > a {
| |
| background-image: url('images/gamenav/G16.png');
| |
| }
| |
| .secondary .g17 > a {
| |
| background-image: url('images/gamenav/G17.png');
| |
| }
| |
| .secondary .g18 > a {
| |
| background-image: url('images/gamenav/G18.png');
| |
| }
| |
| .secondary .g19 > a {
| |
| background-image: url('images/gamenav/G19.png');
| |
| }
| |
| /* Flyout Menu Images */
| |
| .secondary .g1 .fly-img {
| |
| background-image: url('images/gamenav/FLY01.jpg');
| |
| }
| |
| .secondary .g2 .fly-img {
| |
| background-image: url('images/gamenav/FLY02.jpg');
| |
| }
| |
| .secondary .g3 .fly-img {
| |
| background-image: url('images/gamenav/FLY03.jpg');
| |
| }
| |
| .secondary .g4 .fly-img {
| |
| background-image: url('images/gamenav/FLY04.jpg');
| |
| }
| |
| .secondary .g5 .fly-img {
| |
| background-image: url('images/gamenav/FLY05.jpg');
| |
| }
| |
| .secondary .g6 .fly-img {
| |
| background-image: url('images/gamenav/FLY06.jpg');
| |
| }
| |
| .secondary .g7 .fly-img {
| |
| background-image: url('images/gamenav/FLY07.jpg');
| |
| }
| |
| .secondary .g8 .fly-img {
| |
| background-image: url('images/gamenav/FLY08.jpg');
| |
| }
| |
| .secondary .g9 .fly-img {
| |
| background-image: url('images/gamenav/FLY09.jpg');
| |
| }
| |
| .secondary .g10 .fly-img {
| |
| background-image: url('images/gamenav/FLY10.jpg');
| |
| }
| |
| .secondary .g11 .fly-img {
| |
| background-image: url('images/gamenav/FLY11.jpg');
| |
| }
| |
| .secondary .g12 .fly-img {
| |
| background-image: url('images/gamenav/FLY12.jpg');
| |
| }
| |
| .secondary .g13 .fly-img {
| |
| background-image: url('images/gamenav/FLY13.jpg');
| |
| }
| |
| .secondary .g14 .fly-img {
| |
| background-image: url('images/gamenav/FLY14.jpg');
| |
| }
| |
| .secondary .g15 .fly-img {
| |
| background-image: url('images/gamenav/FLY15.jpg');
| |
| }
| |
| .secondary .g16 .fly-img {
| |
| background-image: url('images/gamenav/FLY16.jpg');
| |
| }
| |
| .secondary .g17 .fly-img {
| |
| background-image: url('images/gamenav/FLY17.jpg');
| |
| }
| |
| .secondary .g18 .fly-img {
| |
| background-image: url('images/gamenav/FLY18.jpg');
| |
| }
| |
| .secondary .g19 .fly-img {
| |
| background-image: url('images/gamenav/FLY19.jpg');
| |
| }
| |
| /* wide game nav */
| |
| @media (min-width: 1280px) {
| |
| .secondary {
| |
| background: #1C3E26; /* Old browsers */
| |
| background: -moz-linear-gradient(top, #1C3E26 0%, #000201 100%); /* FF3.6+ */
| |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1C3E26), color-stop(100%, #000201)); /* Chrome,Safari4+ */
| |
| background: -webkit-linear-gradient(top, #1C3E26 0%, #000201 100%); /* Chrome10+,Safari5.1+ */
| |
| background: -o-linear-gradient(top, #1C3E26 0%, #000201 100%); /* Opera 11.10+ */
| |
| background: -ms-linear-gradient(top, #1C3E26 0%, #000201 100%); /* IE10+ */
| |
| background: linear-gradient(to bottom, #1C3E26 0%, #000201 100%); /* W3C */
| |
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1C3E26', endColorstr='#000201', GradientType=0); /* IE6-9 */
| |
| box-shadow: 0px 1px 2px #333;
| |
| }
| |
| .secondary > ul {
| |
| width: 1280px;
| |
| margin: 0 auto;
| |
| box-shadow: none;
| |
| }
| |
| .secondary > ul > li,
| |
| .secondary > ul > li:nth-child(even) {
| |
| width: 66px;
| |
| }
| |
| .secondary > ul > li:nth-child(4n+1) {
| |
| width: 67px;
| |
| }
| |
| .secondary > ul li a {
| |
| background-position-x: 3px;
| |
| }
| |
| .flyout {
| |
| width: 1280px;
| |
| }
| |
| /* flyout positioning */
| |
| .secondary ul li:nth-of-type(2) .flyout {
| |
| margin-left: -68px;
| |
| }
| |
| .secondary ul li:nth-of-type(3) .flyout {
| |
| margin-left: -135px;
| |
| }
| |
| .secondary ul li:nth-of-type(4) .flyout {
| |
| margin-left: -202px;
| |
| }
| |
| .secondary ul li:nth-of-type(5) .flyout {
| |
| margin-left: -269px;
| |
| }
| |
| .secondary ul li:nth-of-type(6) .flyout {
| |
| margin-left: -337px;
| |
| }
| |
| .secondary ul li:nth-of-type(7) .flyout {
| |
| margin-left: -404px;
| |
| }
| |
| .secondary ul li:nth-of-type(8) .flyout {
| |
| margin-left: -471px;
| |
| }
| |
| .secondary ul li:nth-of-type(9) .flyout {
| |
| margin-left: -538px;
| |
| }
| |
| .secondary ul li:nth-of-type(10) .flyout {
| |
| margin-left: -606px;
| |
| }
| |
| .secondary ul li:nth-of-type(11) .flyout {
| |
| margin-left: -673px;
| |
| }
| |
| .secondary ul li:nth-of-type(12) .flyout {
| |
| margin-left: -740px;
| |
| }
| |
| .secondary ul li:nth-of-type(13) .flyout {
| |
| margin-left: -807px;
| |
| }
| |
| .secondary ul li:nth-of-type(14) .flyout {
| |
| margin-left: -875px;
| |
| }
| |
| .secondary ul li:nth-of-type(15) .flyout {
| |
| margin-left: -942px;
| |
| }
| |
| .secondary ul li:nth-of-type(16) .flyout {
| |
| margin-left: -1009px;
| |
| }
| |
| .secondary ul li:nth-of-type(17) .flyout {
| |
| margin-left: -1076px;
| |
| }
| |
| .secondary ul li:nth-of-type(18) .flyout {
| |
| margin-left: -1144px;
| |
| }
| |
| .secondary ul li:nth-of-type(19) .flyout {
| |
| margin-left: -1211px;
| |
| }
| |
| }
| |
|
| |
| @media (min-width: 1440px) {
| |
| .secondary > ul {
| |
| width: 1440px;
| |
| margin: 0 auto;
| |
| box-shadow: none;
| |
| }
| |
| .secondary > ul > li,
| |
| .secondary > ul > li:nth-child(even) {
| |
| width: 75px;
| |
| }
| |
| .secondary > ul > li:nth-child(4n+1) {
| |
| width: 74px;
| |
| }
| |
| .secondary > ul li a {
| |
| background-position-x: 7px;
| |
| }
| |
| .flyout {
| |
| width: 1440px;
| |
| }
| |
| /* flyout positioning */
| |
| .secondary ul li:nth-of-type(2) .flyout {
| |
| margin-left: -75px;
| |
| }
| |
| .secondary ul li:nth-of-type(3) .flyout {
| |
| margin-left: -151px;
| |
| }
| |
| .secondary ul li:nth-of-type(4) .flyout {
| |
| margin-left: -227px;
| |
| }
| |
| .secondary ul li:nth-of-type(5) .flyout {
| |
| margin-left: -303px;
| |
| }
| |
| .secondary ul li:nth-of-type(6) .flyout {
| |
| margin-left: -378px;
| |
| }
| |
| .secondary ul li:nth-of-type(7) .flyout {
| |
| margin-left: -454px;
| |
| }
| |
| .secondary ul li:nth-of-type(8) .flyout {
| |
| margin-left: -530px;
| |
| }
| |
| .secondary ul li:nth-of-type(9) .flyout {
| |
| margin-left: -606px;
| |
| }
| |
| .secondary ul li:nth-of-type(10) .flyout {
| |
| margin-left: -681px;
| |
| }
| |
| .secondary ul li:nth-of-type(11) .flyout {
| |
| margin-left: -757px;
| |
| }
| |
| .secondary ul li:nth-of-type(12) .flyout {
| |
| margin-left: -833px;
| |
| }
| |
| .secondary ul li:nth-of-type(13) .flyout {
| |
| margin-left: -909px;
| |
| }
| |
| .secondary ul li:nth-of-type(14) .flyout {
| |
| margin-left: -984px;
| |
| }
| |
| .secondary ul li:nth-of-type(15) .flyout {
| |
| margin-left: -1060px;
| |
| }
| |
| .secondary ul li:nth-of-type(16) .flyout {
| |
| margin-left: -1136px;
| |
| }
| |
| .secondary ul li:nth-of-type(17) .flyout {
| |
| margin-left: -1212px;
| |
| }
| |
| .secondary ul li:nth-of-type(18) .flyout {
| |
| margin-left: -1287px;
| |
| }
| |
| .secondary ul li:nth-of-type(19) .flyout {
| |
| margin-left: -1363px;
| |
| }
| |
| }
| |
| /* Columns within flyout */
| |
| .fly-col {
| |
| width: 288px; /* columns should auto scale, this is a fallback only */
| |
| display: table-cell;
| |
| }
| |
| .fly-col:first-of-type {
| |
| text-align: center;
| |
| width: 274px;
| |
| display: block;
| |
| }
| |
| .fly-col ul {
| |
| margin-left: 5px;
| |
| }
| |
| .fly-col ul li {
| |
| list-style: none;
| |
| background: none;
| |
| display: block;
| |
| width: auto;
| |
| height: auto;
| |
| float: none;
| |
| }
| |
| .fly-col ul li:first-of-type {
| |
| font-weight: bold;
| |
| margin: 5px 0;
| |
| }
| |
| .fly-col ul li a {
| |
| width: auto;
| |
| height: auto;
| |
| display: inline;
| |
| }
| |
| .fly-img {
| |
| width: 230px;
| |
| margin: 0px 22px;
| |
| height: 150px;
| |
| }
| |
| /* show the flyout menu */
| |
|
| |
| .secondary ul li:hover .flyout {
| |
| display: table;
| |
| }
| |
| .flyout:hover {
| |
| display: table;
| |
| } | | } |