MediaWiki:Common.css

Want an adless experience? Log in or Create an account.

Note: After saving, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: hold Shift while clicking Reload, or press either Ctrl+F5 or Ctrl+R (Command+R on a Mac)
• Google Chrome: press Ctrl+Shift+R (Command+Shift+R on a Mac)
• Internet Explorer: hold Ctrl while clicking Refresh, or press Ctrl+F5
• Konqueror: click Reload or press F5
• Opera: clear the cache in Tools → Preferences

/* CSS placed here will be applied to all skins */

/* Rank Coloring
  Applies rank colors to page title on user and user talk pages. 
  In the mw-userlink entries, keep the spaces in names and do not replace them with underscores.
  In the h1 entries, any spaces in names should be replaced with underscores.
*/
/* Admins */

a.mw-userlink[title="User:Emma"],
.page-User_Emma h1,
.page-User_talk_Emma h1,
a.mw-userlink[title="User:Fused shadows"],
.page-User_Fused_shadows h1,
.page-User_talk_Fused_shadows h1,
a.mw-userlink[title="User:Josh"],
.page-User_Josh h1,
.page-User_talk_Josh h1,
a.mw-userlink[title="User:Locke"],
.page-User_Locke h1,
.page-User_talk_Locke h1,
a.mw-userlink[title="User:Mases"],
.page-User_Mases h1,
.page-User_talk_Mases h1 {
	color: #9B508A;
}

/* Patrollers */

a.mw-userlink[title="User:BlackRayquaza98"],
.page-User_BlackRayquaza98 h1,
.page-User_talk_BlackRayquaza98 h1,
a.mw-userlink[title="User:Heroine of Time"],
.page-User_Heroine_of_Time h1,
.page-User_talk_Heroine_of_Time h1,
a.mw-userlink[title="User:Odd300"],
.page-User_Odd300 h1,
.page-User_talk_Odd300 h1,
a.mw-userlink[title="User:Satam"],
.page-User_Satam h1,
.page-User_talk_Satam h1,
a.mw-userlink[title="User:Thortok2000"],
.page-User_Thortok2000 h1,
.page-User_talk_Thortok2000 h1 {
	color: #E99216;
}

/* Bots */

a.mw-userlink[title="User:Navi"],
.page-User_Navi h1,
.page-User_talk_Navi h1,
a.mw-userlink[title="User:Scrapper"],
.page-User_Scrapper h1,
.page-User_talk_Scrapper h1 {
	color: #3EB8C6;
}
/* End Rank Coloring */

/* CSS styling for the User Welcome */
.user_welcome { border: 2px solid #000; padding: 5px; border-radius: 10px; }
.user_welcome .head { border: 1px solid #000; padding: 6px; border-top-right-radius: 10px; border-top-left-radius: 10px; background: url("//zeldadungeon.net/wp-content/themes/layout20/images/Box1Color.png"); font-weight: bold; font-size: 18px; }
.user_welcome .welcome_content { padding: 5px 0; }

/* Header */
.secondary > ul { border-radius: 0px; }

/* Common boxes */
.box { float: none; margin: 0px; margin-bottom: 1em; border: 1px solid #253125; padding: 2px; width: auto; background-color: #f0ddbd; }
.box > div { border-bottom: 0px; padding: 0px; font-weight: normal; font-family: inherit; }
.darkbox { margin: 1em 0em; border: 3px solid #19345e; padding: .2em; background-color: #c3d1e8; }
.box + .box { margin-top: 1em; }
.box table { width: 100%; }
.box .title { position: relative; margin-bottom: 2px; border: 1px solid #253125; padding: .2em .4em; background-color: #8fbb94; background-image: url("//www.zeldadungeon.net/wiki/images/3/3c/BoxTitleTexture.png"); font-weight: bold; font-size: 1.1em; }
.box .title ._toggler { position: absolute; right: .5em; }
.box .title .edit { position: absolute; left: .5em; }
.header { padding: 0em .4em; background-color: #8fbb94; background-image: url("//www.zeldadungeon.net/wiki/images/c/c4/BoxHeaderTexture.png"); font-weight: bold; }
.label { padding: 0em .4em; background-color: #8fbb94; background-image: url("//www.zeldadungeon.net/wiki/images/d/d3/BoxLabelTexture.png"); font-weight: bold; }
.even { background-color: #ffffff; }

/* Infobox */
.infobox img { margin-bottom: 2px; max-width: 258px; height: auto; }
.infotable { margin: 0px; border: 1px solid #253125; border-collapse: collapse; width: 100%; height: 100%; font-size: .95em; }
.infotable th, .infotable td { border: 1px solid #253125; padding: 2px; vertical-align: middle; }

.infobox-hostile, .infobox-hostile .title, .infobox-hostile th, .infobox-hostile td { border-color: red; }
.infobox-hostile .title, .infobox-hostile .header, .infobox-hostile .label { background-color: #ff4444; }
.infobox-dungeon, .infobox-dungeon .title, .infobox-dungeon th, .infobox-dungeon td { border-color: black; }
.infobox-dungeon .title, .infobox-dungeon .header, .infobox-dungeon .label { background-color: #333333; }
.infobox-dungeon .title, .infobox-dungeon .header { color: white; }
.infobox-location, .infobox-location .title, .infobox-location th, .infobox-location td { border-color: brown; }
.infobox-location .title, .infobox-location .header, .infobox-location .label { background-color: #995533; }
.infobox-location .title, .infobox-location .header { color: #d5f1e5; }
.infobox-character, .infobox-character .title, .infobox-character th, .infobox-character td { border-color: green; }
.infobox-character .title, .infobox-character .header, .infobox-character .label { background-color: #00cc00; }
.infobox-item, .infobox-item .title, .infobox-item th, .infobox-item td { border-color: orange; }
.infobox-item .title, .infobox-item .header, .infobox-item .label { background-color: #ff9933; }
.infobox-knowledge, .infobox-knowledge .title, .infobox-knowledge th, .infobox-knowledge td { border-color: purple; }
.infobox-knowledge .title, .infobox-knowledge .header, .infobox-knowledge .label { background-color: #cc33ee; }
.infobox-nondiegetic, .infobox-nondiegetic .title, .infobox-nondiegetic th, .infobox-nondiegetic td { border-color: gray; }
.infobox-nondiegetic .title, .infobox-nondiegetic .header, .infobox-nondiegetic .label { background-color: #cccccc; }

/* Navbox */
.navbox { clear: both; margin: auto; width: 70%; font-size: .85em; }
.navbox .label { width: 20%; }
.navbox ul { margin: 0px !important; }

/* Ambox */
.ambox { margin: auto; border-left: 10px solid #5a7db5; border-right: 1px solid #5a7db5; border-collapse: collapse; width: 70%; background-color: #f6f6f6; }
.ambox-image, .ambox-text { border-top: 1px solid #5a7db5; border-bottom: 1px solid #5a7db5; }
.ambox + .ambox .ambox-image, .ambox + .ambox .ambox-text { border-top: none; }
.ambox-image { width: 50px; }
.ambox-small { width: 50%; }
.ambox-small .ambox-image { display: none; }

.ambox-content { border-left: 10px solid orange; }
.ambox-style { border-left: 10px solid yellow; }
.ambox-delete { border-left: 10px solid red; }
.ambox-move { border-left: 10px solid green; }
.ambox-protection { border-left: 10px solid gray; }

/* Userbox */
.userbox + .userbox { margin-top: 1px; }

/* Horizontal Lists */
.hlist > li, .hlist > * > li { display: inline; margin: 0; }
.hlist > li:after, .hlist > * > li:after { content: " · "; font-weight: bold; }
.hlist > li:last-child:after, .hlist > * > li:last-child:after { content: none; }
.hlist > li.hlist-last-child:after, .hlist > * > li.hlist-last-child:after { content: none; } /* IE8 */

/* Tabs2 Core Functionality */
.tabcontent2:not(.default) { display: none; }

/* Tabs2D */
.tabs2d.tabtarget { position: relative; padding: 10px; }
.tabs2d.tabtarget.hastabstop { margin-top: 31px; }
.tabs2d > .tabsettop { position: absolute; top: -32px; margin: 0px !important; }
.tabs2d > .tabsetleft { float: left; }
.tabs2d > .tabset > .tab2 { display: block; padding: 0px 10px; margin: 0px; border: 1px solid #5a7db5; }
.tabs2d > .tabsettop > .tab2 { float: left; height: 30px; line-height: 30px; }
.tabs2d > .tabsetleft > .tab2 { padding: 5px 10px; }
.tabs2d > .tabsettop > .tab2 + .tab2 { margin-left: -1px; }
.tabs2d > .tabsetleft > .tab2 + .tab2 { margin-top: -1px; }

.tabs2d > .tabset > .tab2 { background-color: #e6e6e6; }
.tabs2d > .tabset > .tab2.active { background-color: #f6f6f6; }
.tabs2d > .tabsettop > .tab2.active { border-bottom-color: #f6f6f6; }
.tabs2d > .tabsetleft > .tab2.active { border-right-color: #f6f6f6; }
.tabs2d > .tabset > .tab2:hover { background-color: #5a7db5 !important; color: #fefefe; cursor: pointer; }

.tabs2d .wikitable { margin-top: 0px; }

/* TabsGrid */
.tabsgrid.tabset { border-collapse: collapse; width: initial; }
.tabsgrid td { padding: 0px; }
.tabsgrid .tab2.active { outline: #cccc33 ridge thick !important; }
.tabsgrid .tab2:hover { outline: #5a7db5 ridge; cursor: pointer; }

.nospace, .nospace * { margin: 0px !important; border: 0px !important; padding: 0px !important; }

#mw-normal-catlinks ul { margin-left: 0; }

/* Hiding obsolete and unused elements */ 
body.page-Special_Statistics tr.statistics-group-checkuser, body.page-Special_Statistics tr.statistics-group-widgeteditor, body.page-Main_Page h1#firstHeading, table.mw-listgrouprights-table tr#checkuser, table.mw-listgrouprights-table tr#widgeteditor {
display: none;
}

/* Letterhead table classes */
table.letterhead{
border-width: 0px; 
width:100%;
border-spacing: 0;
border-collapse: separate;
}
table.letterhead td{
background-image:url('//zeldadungeon.net/wiki/images/c/cf/Letterhead-Corner.png');
background-repeat:no-repeat;
text-align:right;
width: 80px;
height:80px;
background-color: transparent;
padding: 0;
}
table.letterhead th{
text-align:center;
background-image:url('//zeldadungeon.net/wiki/images/9/93/Letterhead-Tex.png');
font-weight:bold
}
div.letterhead{
padding: 1em 3em 2em;
background-image:url('//zeldadungeon.net/wiki/images/9/93/Letterhead-Tex.png');
text-align:left;
font-size:1.2em;
border-width: 0px;
border-spacing: 0;
border-collapse: separate;
}

/* Header shadowing */
#firstHeading, #mw-previewheader, #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5, #bodyContent h6 {
text-shadow: #AAA 1.2px 1.2px 1px;
}

/* Dashed Headers */
h3 {
border-bottom: 1px dashed #AAA;
}

/* Remove White Backround on Diff */
table.diff, td.diff-otitle, td.diff-ntitle {
background-color: transparent;
}


/* prevents Pre tags from spilling out of their content area. */
pre {
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* Fix for gap created by Recent Changes legend. */
table.mw-recentchanges-table {
width: 575px;
}

/* Fix to make changes in the Diff view more visible post-MediaWiki 1.23.7. */
del.diffchange, del.diffchange-inline {
color: #8b0000;
}
ins.diffchange, ins.diffchange-inline {
color: #006400;
}

/* Fix for de-uglify the vector tabs that were broken in an update. */
div.vectorTabs{
  background: transparent !important; 
  background-image: none !important;
  margin-bottom: -1px !important;
  padding-left: 0px !important;
}
div.vectorTabs ul, div.vectorTabs ul li, div.vectorTabs ul li span {
 background: transparent !important; 
 background-image: none !important;
 border: none;
}

.vectorTabs a{
  border-top: 1px solid #AAA;
  border-left: 1px solid #AAA;
  border-right: 1px solid #AAA;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  border-radius: 8px 8px 0 0;
  -moz-border-radius: 8px 8px 0 0;
  -webkit-border-radius: 8px 8px 0 0;
  border-radius: 8px 8px 0 0;
  background: #FBF0D4; /* Old browsers */
  background: -moz-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* FF3.6+ */
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FBF0D4),color-stop(100%,#F9F9F9)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* IE10+ */
  background: linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* W3C */
}
.vectorTabs a:hover, .vectorTabs strong:hover, .selected a, .selected strong,.elected a:hover, .selected strong:hover{
  text-shadow: 0px -1.5px 0px #DDD;
  background: #FBF0D4;
}
.vectorTabs a:hover,.vectorTabs strong:hover {
  background: #FBF0D4; /* Old browsers */
  background: -moz-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* FF3.6+ */
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#E1E4FA),color-stop(100%,#F9F9F9)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* IE10+ */
  background: linear-gradient(top,#F9F9F9 0,#FBF0D4 100%); /* W3C */
}
.selected li, .selected li,.selected a:hover, .selected strong:hover {
  background: #FBF0D4; /* Old browsers */
  background: -moz-linear-gradient(top,white 0,#F9F9F9 5%,#FBF0D4 55%); /* FF3.6+ */
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,white),color-stop(5%,#F9F9F9),color-stop(55%,#FBF0D4)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,white 0,#F9F9F9 5%,#FBF0D4 55%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,white 0,#F9F9F9 5%,#FBF0D4 55%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,white 0,#F9F9F9 5%,#FBF0D4 55%); /* IE10+ */
  background: linear-gradient(top,white 0,#F9F9F9 5%,#FBF0D4 55%); /* W3C */
}

/* Conditional column handling for pages with multiple columns
   On wide screens, show these as two columns
   On narrow and mobile screens, let them collapse into a single column */
.column-left {
    float: left;
    width: 50%;
}
.column-right {
    float: right;
    width: 49%;
}
.column-left-wide {
    float: left;
    width: 60%;
}
.column-right-narrow {
    float: right;
    width: 39%;
}
.column-left-narrow {
    float: left;
    width: 39%;
}
.column-left-extra-wide {
    float: left;
    width: 70%;
}
.column-left-extra-narrow {
    float: left;
    width: 29%;
}
.column-right-extra-wide {
    float: right;
    width: 70%;
}
.column-right-extra-narrow {
    float: right;
    width: 29%;
}
.column-left-very-wide {
    float: left;
    width: 95%;
}
.column-right-very-wide {
    float: right;
    width: 95%;
}
@media only screen and (max-width: 800px) {
    /* Decouple the columns on narrow screens */
    .column-left,
    .column-right,
    .column-left-wide,
    .column-right-narrow,
    .column-left-narrow,
    .column-left-extra-wide,
    .column-left-extra-narrow,
    .column-right-extra-wide,
    .column-right-extra-narrow,
    .column-left-very-wide,
    .column-right-very-wide {
        float: 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;
}