52
edits
mNo edit summary |
No edit summary |
||
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; | |||
} | } |
edits