/* ********* */
  /* RESET CSS */
  /* ********* */
  
  /* First blob here is derived from YUI's "reset" CSS file v 2.5.0 */
  
  html{color:#000;background:#FFF;}
  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
  table{border-collapse:collapse;border-spacing:0;}
  img{border:0;}
  address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
  li{list-style:none;}
  caption,th{text-align:left;}
  h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
  /* q:before,q:after{content:'';} */
  abbr,acronym {border:0;font-variant:normal;}
  /* to preserve line-height and selector appearance */
  sup {vertical-align:text-top;}
  sub {vertical-align:text-bottom;}
  input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
  /*to enable resizing for IE*/
  input,textarea,select{font-size:100%;}
  /*because legend doesn't inherit in IE */
  legend{color:#000;}
  
  /* Global modifications to "reset" to make it more typical */
  
  h1,h2,h3,h4,h5,h6{font-weight:bold;}
  input,select {font-size: 90%;}
  strong, th {font-weight: bold;}
  em {font-style: italic;}
  ul li {list-style-type: disc; list-style-position: inside;}
  ol li {list-style-type: decimal; list-style-position: inside;}
  p {margin: 15px 0;}
  img { display: block; }
  
  
  
  /* STRUCTURE */
  
  html
  {
    /* Font change - 20230906 - Wayne
    color: #4B4B4B;
    font-family: Arial, sans-serif;
    */
    color: #6D6D6D;
    font-family: Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif;
    font-size: 16px;
    background: #FEFEFE;

  }
  
  body
  {
    min-width: 1300px;
  }
  
  #wrapper
  {
    position: relative;
    min-width: 1160px;
    max-width: 1220px;
    padding: 0 40px;
    text-align: left;
    margin: 0 auto;
  /*
    min-width: 1270px;
    padding: 0 50px;
  */
  }
  
  
  /* GENERAL FORMATTING */
  
  a:link { color: mediumblue; text-decoration: none; }
  a:visited { color: mediumblue; text-decoration: none; }
  a:hover { color: royalblue; text-decoration: none; }
  a:active { color: royalblue; text-decoration: none; }
  
  a img { border: 0; }
  
  h2
  {
  /*
    font-size: 125%;
    color: #2C54A8;
  */
    font-size: 150%;
    color: #0F4AC8;
    text-shadow: 1px 1px 1px #BECAE4;
  }
  
  
  h3 { font-size: 110%; }
  h4 { font-size: 90%; }
  
  /* ul, ul li { list-style-type: none; } */
  
  input[type=submit],
  input[type=button]
  {
    padding: 2px 2px 0;
  }
  
  
  .centered
  {
    text-align: center;
    margin: 0 auto;
  }
  
  .left
  {
    float: left;
    margin: 0 15px 15px 0;
  }
  
  .right
  {
    float: right;
    margin: 0 0 15px 15px;
  }
  
  .clear { clear: both; }
  .small { font-size: 85%; }
  .smaller { font-size: smaller; }
  .hidden { display: none; }
  .error { color: #a60202; }
  .note { color: blue; }
  .inline { display: inline; }
  .offscreen { position: absolute; top: 0; left: -999px; width: 990px; }
  
  table, table th, table td { border-collapse: collapse; }
  table { margin: 20px 0; }
  table td, table th { padding: 10px; }
  table td.label { width: 90px; }
  
  div.hr hr { display: none; }
  div.hr
  {
    margin: 15px 0;
    border-bottom: 1px solid #4B5EAE;
  }
  
  .currencyicon
  {
    display: inline;
    vertical-align: text-bottom;
  }
  
  
  p img.faction
  {
    display: inline-block;
    vertical-align: middle;
    height: 1.1em;
    margin-right: 1px;
  }
  
  /* select { border: 1px solid #aaa; } */
  
  
  /* HEADER */
  
  #header
  {
    /* height: 131px; */
    min-width: 1170px;
  }
  
  #pagebanner
  {
    width: 300px;
    display: inline-block;
  }
  
  #pagebanner img
  {
    width: 300px;
    margin: 12px 0 0 -7px;
    display: inline;
  }
  
  form#search
  {
    display: inline-block;
    vertical-align: top;
    margin-left: 50px;
    margin-top: 15px;
    width: 300px;
  }
  
  #header table#searchbox
  {
    margin: 0;
    padding: 0;
    border-collapse: separate;
    border: none;
    padding-top: 3px;
  }
  
  
  #header #searchbox td
  {
    padding: 0 7px 0 0;
    border: none;
  }
  
  
  #header table#searchbox td#searchbar
  {
    padding: 2px;
    border: 2px solid #9999cc;
    border-radius: 6px;
    color: #343488;
  }
  
  #header td#searchbar input#term
  {
    border: none;
    width: 86%;
    color: #343488;
    font-size: 95%;
  }
  
  /*
  #header table#searchbox td#searchbar
  {
    padding: 2px;
    border: 2px solid #fff;
    border-radius: 6px;
    background-color: rgb(240, 241, 249);
    box-shadow: 0px 0px 1px 1px rgb(101, 135, 227);
  }
  
  #header td#searchbar input#term
  {
    border: none;
    width: 86%;
    color: rgb(3, 58, 170);
    font-size: 95%;
    background-color: inherit;
  }
  */
  
  #header #searchbox input#searchbutton
  {
    border: none;
    height: 16px;
    vertical-align: bottom;
    float: left;
    margin: 1px 5px 0 1px;
  }
  
  #header #searchbox input#incretired
  {
    vertical-align: middle;
    margin-left: 5px;
  }
  
  #header #searchbox label
  {
    font-size: smaller;
    vertical-align: middle;
    padding-right: 10px;
    color: #2f3f5f;
  }
  
  #header #searchbox #advsearch
  {
    vertical-align: middle;
  }
  
  #header #searchbox a:link,
  #header #searchbox a:visited
  {
    font-weight: bold;
    font-size: smaller;
    color: #000080;
  }
  
  #header #searchbox a:hover,
  #header #searchbox a:active
  {
    color: #0000FF;
  }
  
  
  /* MENU */
  
  #menu
  {
    float: left;
    width: 190px;
    padding: 0px 6px 20px;
    font-size: 94%;
    border-style: solid;
    border-radius: 8px;
    border-color: rgb(238, 238, 238);
    color: white;
  /*  background-color: steelblue; */
    background: linear-gradient(steelblue, #131C41);
    background: -moz-linear-gradient(steelblue, #131C41);
    background: -webkit-linear-gradient(steelblue, #131C41);
    background: -o-linear-gradient(steelblue, #131C41);
    line-height: 165%;
  }
  
  .menulinkform
  {
    height: 100%;
  }
  
  button.menulink  /* form styled as link for menu, used for logout */
  {
    border: none;
    padding: 0;
    display: inline;
    background: none;
    height: 100%;
    width: 100%;
    text-align: left;
    margin-bottom: 0.7em;
  }
  
  button.menulink:hover
  {
    cursor: pointer;
  }
  
  
  #menu ul,
  #menu ul li
  {
    list-style-type: none;
    margin: 15px 0 0 0;
    padding: 0;
    color: #ffffff;
    background-color: inherit;
    width: 100%;
    height: 100%;
  }
  
  #menu ul ul,
  #menu ul ul li
  {
    margin: 0 0 0 5px;
    font-weight: normal;
  }
  
  #menu ul li
  {
    padding-left: 10px;
    font-weight: bold;
    line-height: 1.6em;
  }
  
  #menu #rss img
  {
    display: inline;
    margin-bottom: -1px;
  }
  
  #menu #update
  {
    margin: 25px 0 0 0;
    font-size: 70%;
    text-align: center;
  }
  
  
  #menu ul li a:link,
  #menu ul li a:visited
  {
    color: white;
  }
  
  #menu ul ul li a:link,
  #menu ul ul li a:visited
  {
    color: white;
  }
  
  #menu ul li#account a,
  #menu ul li#usercollection a,
  #menu ul li#login a,
  #menu ul li#collection_edit,
  button.menulink
  {
    color: #8DF;
  }
  
  #menu ul li#account a,
  #menu ul li#usercollection a,
  #menu ul li#login a,
  button.menulink
  {
    font-size: 100%;
    font-weight: bold;
    line-height: 100%;
  }
  
  #menu ul li a:hover,
  #menu ul li a:active,
  #menu ul ul li a:hover,
  #menu ul ul li a:active,
  #menu ul li#account a:hover,
  #menu ul li#usercollection a:hover,
  #menu ul li#login a:hover,
  #menu ul li#account a:active,
  #menu ul li#usercollection a:active,
  #menu ul li#login a:active
  {
    color: #51cdfe;
  }
  
  #menu ul li#admin a
  {
    font-size: 120%;
    color: rgba(181, 234, 171, 1);
  }
  
  #menu img.menuexpansiontag
  {
    height: 16px;
    width: auto;
    margin-right: 0.1em;
    display: inline;
    vertical-align: text-bottom;
  }
  
  #menu img.menuicon
  {
    height: 10px;
    width: auto;
    margin-right: 0.3em;
    display: inline;
  }
  
  span.newtag
  {
    font-size: x-small;
    font-weight: bold;
    color: white;
    background-color: #12B4FF;
    margin-left: 7px;
    border: 1px solid white;
    border-radius: 4px;
    padding: 1px 2px;
    vertical-align: top;
  }
 
  #menu li.shadowlandsmenuheading
  {
    padding-left: 0;
    color: #f5f5f5; 
    text-shadow: 0px 0px 2px #464646;
  }
  
  #menu li.bfamenuheading
  {
    padding-left: 0;
    text-shadow: 1px 1px #7d5f2a;
    color: #e19e54;
  }
  
  #menu li.bfamenuitem a,
  #menu li.bfamenuitem a:link,
  #menu li.bfamenuitem a:visited
  {
    color: #ffd3a3;
  }
  
  #menu li.bfamenuheading,
  #menu li.bfamenuheading a:link,
  #menu li.bfamenuheading a:visited
  {
  }
  
  .menu h3#legionindex
  {
    text-shadow: 1px 1px 0 #3651ad;
  }
  
  #menu li.legionmenuheading
  {
    color: #bcff06;
    text-shadow: 0 0 2px #3c5924;
  }
  
  #menu li.legionmenuitem,
  #menu li.legionmenuitem a:link,
  #menu li.legionmenuitem a:visited
  {
    color: #b4ed1b;
    text-shadow: 0 0 2px #3c5924;
  }
  
  
  
  /* MENU POINTERS */
  
  body#user #menu li#user,
  body#user #menu li#login,
  body#user #menu li#account,
  body#usercollection #menu li#usercollection,
  body#bfamodels #menu li#bfamodels,
  body#bfasources #menu li#bfasources,
  body#patch81 #menu li#patch81,
  body#patch83source #menu li#patch83source,
  body#multicompanions #menu li#multicompanions,
  body#pandaria #menu li#pandaria,
  body#draenor #menu li#draenor,
  body#legion #menu li#legion,
  body#legion71 #menu li#legion71,
  body#legion715 #menu li#legion715,
  body#legion72 #menu li#legion72,
  body#legion725 #menu li#legion725,
  body#legion73 #menu li#legion73,
  body#draenorsource #menu li#draenorsource,
  body#char1 #menu li#char1,
  body#char2 #menu li#char2,
  body#char3 #menu li#char3,
  body#char4 #menu li#char4,
  body#new #menu li#new,
  body#gallery #menu li#gallery,
  body#gallery_alliance #menu li#gallery_alliance,
  body#gallery_horde #menu li#gallery_horde,
  body#search #menu li#search,
  body#racial_alliance #menu li#alliance,
  body#racial_horde #menu li#horde,
  body#class #menu li#class,
  body#achievement #menu li#achievement,
  body#promo #menu li#promo,
  body#bmah #menu li#bmah,
  body#quest #menu li#quest,
  body#vendor #menu li#vendor,
  body#argenttournament #menu li#argenttournament,
  body#reputation #menu li#reputation,
  body#expansionfeature #menu li#expansionfeature,
  body#pvp #menu li#pvp,
  body#crafted #menu li#crafted,
  body#event #menu li#event,
  body#tcg #menu li#tcg,
  body#loot #menu li#loot,
  body#retired #menu li#retired,
  body#cataclysm #menu li#cataclysm,
  body#patch41 #menu li#patch41,
  body#blog #menu li#blog,        /* for the blog, but here to use same arrow graphic */
  body#archive #menu li#archive,   /* for the blog, but here to use same arrow graphic */
  body#unimplementedgallery #menu li#unimplementedgallery,
  body#unusedlooksgallery #menu li#unusedlooksgallery,
  body#mechanical #menu li#mechanical,
  body#undead #menu li#undead,
  body#singlecharacter #menu li#singlecharacter,
  body#admin #menu li#admin
  {
    background: transparent url('whitearrow.png') left center no-repeat;
  }
  
  
  
  /* CONTENT */
  
  #content
  {
    margin-left: 220px;
    margin-right: 220px;
  }
  
  /* FOOTER */
  
  #footer
  {
    font-size: 70%;
    text-align: center;
    color: #888;
    margin-top: 30px;
    clear: both; /* ensures footer is right at bottom and not inline with mount images or anything) */
  }
  
  /* The footer is dueling with the blog archive and the #about page, which was dueling with the menu, so we specify it *very* clearly. */
  #footer ul.footer_menu,
  #footer ul.footer_menu li
  {
    display: inline;
    margin: 0;
    padding-top: 7px;
  }
  
  #footer ul.footer_menu
  {
    border-top: 1px solid #aaa;
  }
  
  #footer p { margin: 0; }
  
  #footer a { text-decoration: none; }
  #footer a:link { color: #888; }
  #footer a:visited { color: #888; }
  
  #footer a:hover,
  #footer a:active
  {
    color: #4dcdf0;
  }
  
  #footer #backtotop
  {
    line-height: 70%;
  }
  
  #footer #backtotop img
  {
    width: 90px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10px;
  }
  
  .mount #footer #backtotop
  {
    display: none; /* don't want 'back to top' image to display on individual mount pages as they're usually very short */
  }
  
  .paginatorindex
  {
    color: #11bbf3;
  }
  
  .paginatorindex a
  {
    color: #006fcc;
  }
  
  .paginatorarrow
  {
    font-size: 120%;
  }
  
  span.wow-macro
  {
    font-family: monotype;
    font-size: 90%;
    width: 95%;
    background: #eee;
    display: block;
    color: black;
    padding: 0.5em 1em;
    margin: 0.8em 0 0.8em 1em;
    border: 1px solid #592f18;
    border-radius: 5px;
    word-wrap: break-word;
  }
  
  /* CAMEO TABLES */
  
  
  table.cameo
  {
    margin: 0 0 30px 0;
    text-align: center;
    vertical-align: top;
    line-height: 100%;
  }
  
  table.cameo td
  {
    vertical-align: top;
    padding: 0;
  }
  
  
  table.cameo div.thumbnail
  {
    position: relative;
    width: 150px;
    height: 150px;
    line-height: 110%;
    font-weight: bold;
    font-size: 77%;
    background-color: white;
    margin-bottom: 2.7em;
    padding-right: 10px;
  }
  
  table.cameo div.thumbnail a:link,
  table.cameo div.thumbnail a:visited
  {
    color: rgb(0, 65, 120);
  }
  
  table.cameo div.thumbnail a:active,
  table.cameo div.thumbnail a:hover
  {
    color: rgb(0, 115, 180);
  }
  
  table.cameo div.thumbnail img.thumbimage
  {
    box-shadow: 2px 2px 12px #9999cc;
    border-radius: 15px;
    border: 2px solid silver;
    padding: 5px;
    margin: 8px 5px;
    width: 120px;
  }
  
  table.cameo .thumblabel
  {
    margin: -1px 12px 0 7px;
  }
  
  table.cameo div.thumbnail img.thumbimage:active,
  table.cameo div.thumbnail img.thumbimage:hover
  {
    box-shadow: 3px 3px 16px #8a8ab8;
  }
  
  
  table.cameo div.thumbnail img.retired
  {
    position: absolute;
    top: 5px;
    left: 10px;
    height: 35px;
  }
  
  
  /* GALLERY & COLLECTION CAMEOS */
  
  
  .gallery table.cameo div.thumbnail
  {
  }
  
  .gallery table.cameo table td.name
  {
  }
  
  .gallery h2
  {
  /*  color: #1f1f99; */
  }
  
  .gallery h4
  {
    margin: 2em 0;
    font-style:italic;
    text-align: left;
    color: #333399;
    font-size: 80%;
  }
  
  .gallery h4 a:link,
  .gallery h4 a:visited
  {
    font-style:italic;
    color: #520029;
  }
  
  .gallery h4 a:hover,
  .gallery h4 a:active
  {
    color: #990033;
  }
  
  .gallery_backtotop
  {
    float: right;
    font-size: 75%;
  }
  
  .gallery_backtotop img
  {
    display: inline;
    margin-left: -2px;
    margin-bottom: -2px;
  }
  
  .gallerynotes
  {
  /*  text-align: justify; */
    font-size: 10pt;
    line-height: 1.6em;
  }
  
  #content ul.gallery_index
  {
    line-height: 150%;
    font-size: 80%;
    font-weight: bold;
    column-width: 12em;
    -moz-column-width: 12em;
    -webkit-column-width: 12em;
    margin: 10px 0 15px 0;
  }
  
  #content ul.gallery_index li
  {
    list-style-type: circle;
    list-style-position: inside;
  }
  
  
  /* HOME PAGE */
  
  .home #news
  {
    margin-bottom: 40px;
    padding: 15px;
    border: 1px solid blue;
  }
  
  .home #news h2
  {
    font-size: 100%;
    font-weight: bold;
  /*  font-variant: small-caps; */
  }
  
  .home #news img
  {
    display: inline;
  }
  
  .home #news ul
  {
    margin: 5px 0 15px 20px;
  }
  
  .home #news ul,
  .home #news li
  {
    list-style-type: circle;
    line-height: 175%;
  }
  
  .home #meta
  {
    margin: 0;
    padding: 0;
    font-size: 90%;
  }
  
  .home #award
  {
    clear: both;
    font-size: 90%;
    line-height: 125%;
  }
  
  .home table.data,
  .home table.data th,
  .home table.data td
  {
    border: 1px solid black;
  }
  
  .home h2
  {
    color: #1E2C96;
    margin-left: 9px;
    margin-bottom: 7px;
  }
  
  .home h2 span.headersuffix
  {
    font-size: small;
    margin-left: 0.7em;
    /* display: block; */
  }
  
  /*
  .home h3
  {
    margin: 1em 0;
    text-align: left;
    font-size: 90%;
    color: midnightblue;
  }
  */
  
  .home .updatestring
  {
    display: inline;
  }
  
  .home #newsbox
  {
    display: inline-block;
    padding: 1em 2.5em 2em;
    margin: 3px 10px 30px 10px;
    border-radius: 6px;
    border: 2px solid #4673B0;
    box-shadow: 0px 0px 1px 1px #376AAD;
    max-width: 660px;
    background-color: #FCFCFC;
  
  /*  text-align: justify;
    border: 2px solid #5988B0;
    box-shadow: 0px 0px 0px 1px #3A6890;
    border: 2px solid #99c;
    box-shadow: 0px 0px 0px 1px #BDBDD5;
  */
  }
  
  .home #newsbox.greynewsbox
  {
    background-color: #596980;
    color: rgb(242, 240, 240);
    border: 2px solid rgb(106, 132, 168);
    box-shadow: 0px 0px 1px 1px rgb(158, 172, 191);
  }
  
  .home #newsbox.greynewsbox h2
  {
    color: rgb(163, 239, 255);
    text-shadow: 1px 1px 2px #6F7C90;
  }
  
  .home #newsbox.greynewsbox h3
  {
    color: rgb(163, 239, 255);
  }
  
  .home #newsbox h2
  {
    margin: 0 0 0.8em 0;
    font-size: 200%;
    text-align: center;
    color: #1E5296;
    text-shadow: 1px 1px 2px #A6BCDA;
  
  /*
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: normal;
    font-family: Copperplate,Copperplate Gothic Light,fantasy;
    color: #4A3B89;
  */
  
  
  }
  
  .home #newsbox h3
  {
    font-weight: bold;
    color: #1C5299;
    font-size: 120%;
    margin-bottom: 0.6em;
    margin-top: 1em;
  }
  
  
  .home #newsbox div.newsitem
  {
    line-height: 1.56em;
  /*  margin: 0 10px 3em 10px; */
    clear: both;
    display: table-row;
  }
  
  .home #newsbox .newsimageblock
  {
    display: table-cell;
    vertical-align: middle;
  }
  
  .home #newsbox .newsimageblock.topalign
  {
    display: table-cell;
    vertical-align: top;
  }
  
  .home #newsbox .newsimageblock img
  {
    box-shadow: 0px 0px 2px 0px #637FA7;
    border: 1px solid #A1B3CC;
    padding: 2px;
    border-radius: 1px;
  }
  
  .home #newsbox .newsimageblock.topalign img
  {
    margin-top: 5px;
  }
  
  .home #newsbox div.newstext
  {
    list-style-position: inside;
    display: table-cell;
    vertical-align: middle;
    padding-left: 1em;
  }
  
  .home #newsbox div.newsitem:last-of-type
  {
  }
  
  .home #newsbox .newsheader
  {
    font-weight: bold;
    color: #1E2C96;
  /*  font-variant: small-caps; */
    font-size: 120%;
    margin-bottom: 0.3em;
  }
  
  .home #newsbox img.newsitembanner
  {
    width: 600px;
    margin: 0 auto 1em auto;
  
  }
  
  .home #newsbox .newsdivide
  {
    width: 40%;
    margin: 45px auto;
    border: 0;
    border-bottom: 4px double #6C8398;
    clear: both;
  }
  
  .home #newsbox .newsdivide2
  {
    width: 25%;
    margin: 2em auto;
    border: 0;
    border-bottom: 1px solid #70899F;
    clear: both;
  }
  
  .home #newsbox .newsimage
  {
    box-shadow: 2px 2px 4px #B8C3D2;
    border: 1px solid #97A6BA;
  }
  
  .home #newsbox a:link,
  .home #newsbox a:visited
  {
    color: #5FB7DA;
    font-weight: bold;
  }
  
  .home #newsbox a:hover,
  .home #newsbox a:active
  {
    color: #0E88FF;
  }
  
  .home .twitter-follow-button
  {
    float:right;
    margin-right: 15px;
    margin-top: -30px;
  }
  
  .home .twitterlink
  {
    float:right;
    margin-right: 10px;
    margin-top: -30px;
  }
  
  .home .twitterbutton
  {
    width: 30px;
  }
  
  .home #mountbox
  {
    display: inline-block;
    padding: 0 0 0 25px;
    margin: 0 0 0 15px;
  }
  
  .home #mountbox h2
  {
    font-size: 120%;
    text-align: left;
    color: #0a0a62;
    text-shadow: 1px 1px 1px #b7b7b7;
    height: 25px;
    margin: 1em 0 0.8em;
  }
  
  .home #mountbox .flexigallery
  {
  }
  
  .home #mountbox .flexigallery div.thumbnail
  {
    display: inline-block;
  }
  
  .home #mountbox .flexigallery div.thumbnail a:link,
  .home #mountbox .flexigallery div.thumbnail a:visited
  {
    color: #0024a7;
  }
  
  .home #mountbox .indexgallery
  {
    margin-top: 0;
    display: block;
  }
  
  .home #mountbox .indexgallery:last-of-type
  {
    margin-right: 0;
  }
  
  
  /* For link to WoD page: */
  
  .home #newsbox #WoDLink
  {
    text-align: center;
    display: block;
    margin: 0px auto 10px;
    clear: both;
  }
  
  .home #newsbox #WoDLink #WoDLinkInfo #WoDLinkText
  {
    display: inline-block;
    margin-left: 2px;
    margin-top: -5px;
    font-variant: small-caps;
    font-size: 95%;
    font-weight: bold;
  }
  
  .home #newsbox #WoDLink
  {
    color: #383535;
  }
  
  .home #newsbox #WoDLink:active,
  .home #newsbox #WoDLink:hover
  {
    color: #B60C18;
  }
  
  .home #newsbox #WoDLink #WoDLinkInfo
  {
    display: inline-block;
  }
  
  .home #newsbox #WoDLink #WoDLinkInfo img
  {
    width: 280px;
  }
  
  .home #newsbox #WoDLink .guillemet
  {
    font-size: 120%;
  }
  
  .home img.newsheaderimage.bfalogo
  {
    text-align: center;
    margin: 0 auto -1em;
    width: 220px;
  
  }
  
  
  /* BROWSE PAGES */
  
  .browse h3
  {
    margin-top: 30px;
    color: #174098;
    text-shadow: 1px 1px 1px #C4D3F3;
  }
  
  .browse ul
  {
    margin: 0 0 0 30px;
  }
  
  
  
  /* SEARCH PAGE */
  
  #search #show_form,
  #search #hide_form
  {
    margin: 5px 0;
    font-size: 90%;
    font-style: italic;
  }
  
  #search #form_div
  {
  
  }
  
  #search #parameters
  {
    border-collapse: separate;
    border: 1px solid white;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 0 1px 1px slateblue;
  }
  
  #search #parameters,
  #search #parameters th,
  #search #parameters td
  {
    color: #DAE7F0;
    background-color: #223568;
  }
  
  #search #parameters th,
  #search #parameters td
  {
    border-collapse: collapse;
    border: 1px none black;
    padding: 7px 5px;
    vertical-align: text-top;
  }
  
  #search #parameters td:first-child
  {
    text-align: right;
  }
  
  #search #parameters td .hint
  {
    font-size: smaller;
    color: #E7E552;
    font-style: italic;
  }
  
  #search #parameters tr:last-child td
  {
    padding: 30px 0 0 165px;
  }
  
  #search #parameters td:first-child label
  {
  
  }
  
  #search #parameters select,
  #search #parameters input
  {
    box-shadow: 0 0 2px aliceblue;
    margin: 3px 0 0 0;
  }
  
  #search #parameters input
  {
    padding: 1px 1px 1px 2px;
  }
  
  #search #parameters .search_travel_mode
  {
    display: block;
    line-height: 140%;
  }
  
  #search #results,
  #search #results th,
  #search #results td
  {
    border-collapse: collapse;
    border: 1px solid black;
    margin: 0;
    padding: 0 5px;
    white-space: nowrap;
  }
  
  #search #results a.searchname
  {
    font-size: 110%;
    vertical-align: middle;
  }
  
  #search #results td.searchnotescolumn
  {
    width: 100%;
  }
  
  #search #results
  {
    width: 100%;
    font-size: 90%;
  }
  
  #search #results img
  {
    display: inline;
  }
  
  #search #results th
  {
    padding: 3px 5px;
  }
  
  #search #results td img
  {
    height: 50px;
    margin: 0 5px;
    vertical-align: middle;
  }
  
  #search #results td p
  {
    margin: 0;
    padding: 0;
  }
  
  #search #results img.retired,
  #search #results img.upcoming,
  #search #results img.unimplemented,
  #search #results img.unused
  {
    height: 20px;
  }
  
  
  
  
  /* WIDGETS */
  
  div.widget_data
  {
    display: block;
  }
  
  div.widget_saving
  {
    display: none;
  }
  
  .mountOwnershipWidgetButton
  {
    margin-left: 0.7em;
    scale: 0.7;
  } 

  .mountOwnershipWidgetButton:checked
  {
    display: none;
  }

  .mountOwnershipWidgetButton:not(:checked) ~ .mountOwnershipWidgetLabelIcon
  {
    display: none;
  }
  
  .mountOwnershipWidgetButton:checked ~ .mountOwnershipWidgetLabelIcon
  {
    margin-left: 0.6em;
  }
  
  .mountOwnershipWidgetButton:checked ~ .mountOwnershipWidgetLabelText,
  .mountOwnershipWidgetButton:checked ~ .mountOwnershipWidgetLabelIcon
  {
    font-weight: bold;
  }
   
  .mountOwnershipWidgetButton:checked ~ .mountOwnershipWidgetLabelText.checked,
  .mountOwnershipWidgetButton:not(:checked) ~ .mountOwnershipWidgetLabelText.notchecked
  {
    display: inline;
  }
   
  .mountOwnershipWidgetButton:checked ~ .mountOwnershipWidgetLabelText.notchecked,
  .mountOwnershipWidgetButton:not(:checked) ~ .mountOwnershipWidgetLabelText.checked
  {
    display: none;
  }
  
  .mountOwnershipWidgetButton.owned:checked ~ .mountOwnershipWidgetLabelText,
  .mountOwnershipWidgetButton.owned:checked ~ .mountOwnershipWidgetLabelIcon
  {
    color: #00600f;
  }
  
  .mountOwnershipWidgetButton.notowned:checked ~ .mountOwnershipWidgetLabelText,
  .mountOwnershipWidgetButton.notowned:checked ~ .mountOwnershipWidgetLabelIcon
  {
    color: #8f0202;
  }

  .mountOwnershipWidgetButton.wished:checked ~ .mountOwnershipWidgetLabelText,
  .mountOwnershipWidgetButton.wished:checked ~ .mountOwnershipWidgetLabelIcon
  {
    /* color: #aa8000; */
    color: #7445ac;
  }
  
  .mountOwnershipWidgetButton.ignored:checked ~ .mountOwnershipWidgetLabelText,
  .mountOwnershipWidgetButton.ignored:checked ~ .mountOwnershipWidgetLabelIcon
  {
    color: #661901;
  }
  
  .mountOwnershipWidgetLabel
  {
    display: block;
    color: #828282;
  }
  
  .mountOwnershipWidgetLabelSaving
  {
    display: none;
  }
  
  .ownershipwidgetheading.bugged
  {
    font-style: italic;
    font-size: 13px;
    line-height: 1.4;
    color: #5200b5;
  }
  
  img.pageheadingfactionlogo
  {
    display: inline-block;
    vertical-align: top;
    margin-right: 0.1em;
  }
  
  .collection .flexigallery div.thumbnail select.collectioneditselect[ownershipstate=""]
  {
    /* box-shadow: 0 0 0px 2px darkred; */
    background: darkred;
    color: white;
  }
  
  .collection .flexigallery div.thumbnail select.collectioneditselect[ownershipstate="owned"]
  {
    /* box-shadow: 0 0 0px 2px green; */
    background: #277327;
    color: white;
  }
  
  .collection .flexigallery div.thumbnail select.collectioneditselect[ownershipstate="wished"]
  {
    /* box-shadow: 0 0 0px 2px #b3b305; */
    /* background: #b3b305; */
    background: #7445ac;
    color: white;
  }
  
  .collection .flexigallery div.thumbnail select.collectioneditselect[ownershipstate="ignored"]
  {
    box-shadow: 0 0 0px 2px grey;
    color: grey;
  }
  
  /* MOUNT PAGES */
  
  .mount #content
  {
    font-size: 90%;
    line-height: 140%;
  }
  
  
  .mount h2
  {
    font-size: 150%;
    margin-top: 3px;
    color: #3140B3;
    line-height: 120%;
  }
  
  .mount h2 img
  {
    display: inline;
    margin-right: 5px;
  }
  
  .mount h2 img.icon
  {
    width: 32px;
    vertical-align: middle;
  }
  
  .mount span#mountname
  {
    vertical-align: middle;
  }
  
  .mount p.tagline
  {
    font-weight: bold;
    font-style: italic;
    color: #908400;
    margin: 10px 0;
    text-shadow: 0px 0px 1px #ECECEC;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 105%;
  }
  
  .mount h3
  {
    margin: 1em 0 0 0;
  /*  font-size: 90%; */
    font-size: 100%;
    font-weight: bold;
  /*  color: rgba(54, 72, 149, 1); */
    color: #263AA8;
    display: block;
    font-family: "Arial Black", Gadget, sans-serif;
  }
  
  .mount h3.retired
  {
    margin-top: 10px;
    color: red;
    font-size: 100%;
  }
  
  .mount h3#wowheadlink
  {
    font-size: 110%;
    color: #7B0F0F;
  }
  
  .mount h3#wowheadlink img
  {
    display: inline;
    vertical-align: top;
    margin-right: 2px;
  }
  
  .mount #content ul,
  .mount #content ul li
  {
    list-style-type: disc;
    list-style-position: outside;
    margin-left: 11px;
    padding: 0;
  }
  
  .mount #content ul ul,
  .mount #content ul ul li
  {
    list-style-type: circle;
    list-style-position: inside;
    margin-left: 9px;
  }
  
  .mount p
  {
    margin: 0 0 0 8px;
    padding: 0;
  /*  text-align: justify; */
  }
  
  .mount .mountstatus,
  .mount .mountstatus2
  {
    font-weight: bold;
  }
  
  .mount .mountstatus.bfa
  {
    color: #0a0a56;
    text-shadow: 1px 1px 1px #fcfcfc;
  }
  
  .mount .mountstatus
  {
    color: #91370b;
    font-size: 95%;
    line-height: 1.4;
    vertical-align: middle;
    margin: 0;
  }
  
  .mount .mountstatus.retired
  {
    color: #910000;
  }
  
  .mount .mountstatus.hiatus
  {
    color: #c45c01;
  }
  
  .mount .mountstatus2
  {
    color: #393939;
    font-weight: normal;
  }
  
  
  .mount .mountstatus img,
  .mount .mountstatus2 img
  {
    display: inline;
    width: 20px;
    vertical-align: top;
  }
  
  .mount .mountstatus img.mountstatuslogo
  {
    height: 15px;
    width: auto;
    margin-right: 0.1em;
  }
  
  .mount img.faction
  {
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    margin-right: 1px;
  }
  
  .mount p span.datamined
  {
    font-weight: bold;
    color: #520799;
  }
  
  
  .mount #wowheadmountlinks h3 img
  {
    margin-right: 1px;
    width: 18px;
  }
  
  .mount #wowheadmountlinks a
  {
    font-weight: bold;
    color: midnightblue;
  }
  
  .mount #wowheadmountlinks a:active,
  .mount #wowheadmountlinks a:hover
  {
    color: steelblue;
  }
  
  
  .mount #companionthumbimage
  {
    width: 100px;
    margin-left: 18px;
    margin-bottom: 4px;
    border: 2px solid #99C;
    border-radius: 11px;
    box-shadow: 0 0 2px 1px silver;
  }
  
  .mount p#patch
  {
    margin: 30px 0;
  }
  
  .mount #content ul.ownership_list
  {
    line-height: 2.2em;
    display: inline-block;
  }
  
  .mount #content ul.ownership_list li
  {
    list-style-type: none;
    margin-left: 0;
  }
  
  .mount #content ul.ownership_list li label
  {
    margin-right: 2px;
  }
  
  .mount .mountpage
  
  {
    display: inline-block;
    width: 40px;
    vertical-align: middle;
  }

  .mount span.mountpagewishlisticon
  {
    display: inline-block;
    width: 35px;
    height: 35px;
    background-size: contain;
    vertical-align: middle;
    margin-right: 0.2em;
  }

  .mount span.mountpagewishlisticon.add
  {
    background: url("/images/wishlistadd.png") no-repeat;
    background-size: contain;
  }
  
  .mount span.mountpagewishlisticon.add:hover
  {
    background: url("/images/wishlistaddhover.png") no-repeat;
    background-size: contain;
  }
  
  .mount span.mountpagewishlisticon.added
  {
    background: url("/images/wishlist.png") no-repeat;
    background-size: contain;
  }

  .mount span.mountpagewishlisticon.remove
  {
    background: url("/images/wishlistdelete.png") no-repeat;
    background-size: contain;
  }
  
  .mount span.mountpagewishlisticon.remove
  {
    background: url("/images/wishlistadd.png") no-repeat;
    background-size: contain;
  }
  
  .mount div.widget_data
  {
    display: inline-block;
  }
  
  .mount table.mount_widget
  {
    text-align: left;
    margin: 0;
  }
  
  .mount table.mount_widget td
  {
    height: 1.7em;
    margin: 0;
    padding: 0;
  }
  
  .mount table.mount_widget td:first-child
  {
    text-align: right;
    padding-right: 20px;
  }
  
  
  .mount #more_info
  {
    font-size: 90%;
    clear: right;
  }
  
  .mount a:link,
  .mount a:visited
  {
    color: mediumblue;
  }
  
  .mount span#wowheadmountlinks
  {
  
    margin: 0 0 0 8px;
  }
  
  .mount div.thumbnail img.thumbimage
  {
    width: 100px;
    border-radius: 11px;
    border: 2px solid #99C;
    margin: 0 0 4px 18px;
    box-shadow: 0 0 2px 1px silver;
    width: 120px;
  }
  
  .mount div.thumbnail .siteicon,
  .siteicon
  {
    width: 18px;
    margin-right: 4px;
    display:inline;
  }
  
  .mount div.thumbnail .companionlinks,
  .companionlinks
  {
    display: block;
    margin-top: 4px;
  }
  
  
  .mount div.thumbnail a:link,
  .mount div.thumbnail a:visited
  {
    color: midnightblue;
  }
  
  .mount div.thumbnail a:active,
  .mount div.thumbnail a:hover
  {
    color: rgb(0, 115, 180);
  }
  
  .mount .thumblabel
  {
    font-size: 100%;
    width: 120px;
    margin-left: 10px;
    color: midnightblue;
  }
  
  .companionsubname
  {
    display: block;
    font-size: 95%;
  }

  .mount #samemodel .thumblabel
  {
    font-size: 100%;
    width: 120px;
    margin-left: 10px;
    color: midnightblue;
  }
  
  .mount div.thumbnail
  {
    margin-top: 10px;
    margin-left: -10px;
    width: 140px;
    line-height: 120%;
    font-weight: bold;
    font-size: 85%;
    padding: 0 0 30px 0;
    text-align: center;
    display: inline-table;
    position: relative;
  }
  
  .mount #sameunusedselector
  {
    margin-left: 9px;
  }
  
  .mount span#samemodel
  {
    margin-top: 10px;
    vertical-align: top;
  }
  
  .mount #samemodel div.thumbnail img.retired
  {
    position: absolute;
    top: 4px;
    left: 22px;
    height: 18px;
  }
  
  .mount #samemodel div.thumbnail img.upcoming
  {
    position: absolute;
    top: 4px;
    left: 22px;
    height: 18px;
  }
  
  .mount #samemodel div.thumbnail img.upcoming.bfa
  {
    top: 3px;
    left: 21px;
    height: 12px;
  }
  
  .mount #samemodel div.thumbnail img.unimplemented
  {
    position: absolute;
    top: 4px;
    left: 22px;
    height: 18px;
  }
  
  .mount #samemodel div.thumbnail img.unused
  {
    position: absolute;
    top: 4px;
    left: 22px;
    height: 20px;
  }
  
  /*
  .mount #samemodel div.thumbnail span.retired
  {
    position: absolute;
    top: 3px;
    left: 20px;
    font-size: 240%;
    font-weight: bold;
    color: #BD1C1C;
    text-shadow: 1px 1px 2px #5D5E69;
  }
  
  .mount #samemodel div.thumbnail span.upcoming
  {
    position: absolute;
    top: 7px;
    left: 22px;
    font-size: 170%;
    font-weight: normal;
    color: #7E84B1;
  }
  
  .mount #samemodel div.thumbnail img.unimplemented
  {
    position: absolute;
    top: 4px;
    left: 22px;
    height: 20px;
  }
  
  .mount #samemodel div.thumbnail span.unused
  {
    position: absolute;
    top: 6px;
    left: 21px;
    font-size: 155%;
    font-weight: normal;
    color: #A28B55;
  }
  */
  
  .mount .sameunusedmodel
  {
  /*  display: none; */
  }
  
  .mount #sameunusedselector
  {
  }
  
  .mount #sameunusedlabel
  {
    margin-left: 0.25em;
    font-size: 80%;
    vertical-align: text-top;
    color: #303050;
    font-weight: bold;
    font-style: italic;
  }
  
  .mount img.mount
  {
    margin: 10px 0 0 30px;
    border-radius: 20px;
    vertical-align: top;
    display: table-cell;
    border: 3px solid #919DAA;
    box-shadow: 0px 0px 3px 2px #BFC5CB;
    width: 400px;
  }
  
  .mount span#mountinfo1
  {
    display: table-cell;
    vertical-align: top;
  }
  
  .mount span#mounttopsection
  {
    display: inline-table;
  }
  
  .mount .mountdata
  {
    margin-left: 9px;
  /*  display: block; */
  /*  text-align: justify; */
    margin-bottom: 5px;
    display: inline-block;
  }
  
  .mount #collectiondata .mountdata
  {
    display: list-item;
    list-style-position: inside;
  }

  .mount .mountdata .owned
  {
    font-weight: bold;
    color: #00600f;
  }

  .mount .mountdata .notowned
  {
    font-weight: bold;
    color: #8f0202;
  }
  
  .mount .mountdata .mountdatawarning
  {
    color: #8F1A1A;
    font-style: italic;
  }
  
  .mountpagecollectionicon,
  .mountpagecollectiontext
  {
    display: inline-block;
    vertical-align: top;
  }
  
  .mountpagecollectionicon
  {
    font-size: 150%;
    margin-right: 0.2em;
    font-weight: bold;
  }
  
  .mountpagecollectionicon.owned
  {
    color: green;
  }
  
  .mountpagecollectionicon.unowned
  {
    color: red;
  }
  
  .mountpagecollectionicon.wished
  {
    color: yellow;
  }
  
  .mountpagecollectionicon.ignored
  {
    color: red;
  }
  
  .mountpagecollectioncheckbox
  {
    display: none;
  }
  
  .mountpagecollectioncheckbox:checked + label .mountpagecollectionownedlabel.unowned,
  .mountpagecollectioncheckbox:checked + label .mountpagecollectionownedlabel.unwished,
  .mountpagecollectioncheckbox:checked + label .mountpagecollectionownedlabel.notignored
  {
    display: none;
  }
  
  .mountpagecollectioncheckbox:not(:checked) + label .mountpagecollectionownedlabel.owned,
  .mountpagecollectioncheckbox:not(:checked) + label .mountpagecollectionownedlabel.wished,
  .mountpagecollectioncheckbox:not(:checked) + label .mountpagecollectionownedlabel.ignored
  {
    display: none;
  }
  
  #calltoarms #satchellist,
  #calltoarms #satchellist li
  {
    list-style-type: disc;
    margin: 0;
    margin-left: 10px;
    padding: 0;
  }
  
  #calltoarms #satchellist li .ctatype
  {
    font-size:90%;
  }
  
  
  #calltoarms #satchellist a:link,
  #calltoarms #satchellist a:visited
  {
    font-weight: bold;
    color: #1010b9;
  }
  
  #calltoarms #satchellist a:hover,
  #calltoarms #satchellist a:active
  {
    color: blue;
  }
  
  /* VARIOUS CATEGORY PAGES */
  
  #category h4
  {
    margin-top: 10px;
    color: #191970;
    padding-right: 14px;
    font-size: 80%;
    margin-bottom: -3px;
  }
  
  #category #arenanote
  {
    font-size: 90%;
    font-style: italic;
  }
  
  #category #arenanote a:link,
  #category #arenanote a:visited
  {
    font-weight: bold;
    color: #000080;
  }
  
  #category #arenanote a:hover,
  #category #arenanote a:active
  {
    color: #0000FF;
  }
  
  .categorysubheading
  {
    /* font-style: italic; */
    line-height: 145%;
    font-size: 85%;
    margin-top: 0.5em;
    width: 80%;
    color: #484848;
  }
  
  .categorycurrencyicon
  {
    display: inline-block;
    height: 14px;
    margin-right: 0.12em;
  }
  
  .categoryheadingicon
  {
    display: inline-block;
    vertical-align: middle;
  }
  
  #categorytop
  {
    display: flex;
    margin: 1.5em 0 3.5em;
  }
  
  
  #categoryindexbox #categoryindex ul.categoryindexlist
  {
    width: 100%;
  }
  
  ul.categoryindexlist
  {
    line-height: 190%;
    font-size: 80%;
    font-weight: bold;
    column-count: 1;
    margin: 0.7em 0.5em 0.9em;
    text-align: left;
  }
  
  ul.categoryindexlist li
  {
  
    list-style-type: disc;
    list-style-position: inside;
    margin-top: 0.2em;
    white-space: nowrap;
  }
  
  
  
  #categoryindex
  {
    display: inline-block;
    margin: auto;
    border: 2px solid #E4E7ED;
    border-radius: 7px;
    padding: 0.5em 1em;
    box-shadow: 1px 1px 5px 0px #373a41, 1px 1px 5px 0px #404144 inset;
    background: linear-gradient(-45deg, #e6e6e6, white, #e6e6e6);
  }
  
  #categorytop #categoryindex
  {
    margin-right: 2em;
    width: 100%;
  }
  
  #categoryindexcontainer
  {
    text-align: left;
    margin: 3em 0 5em 0;
  }
  
  #categoryindexbox
  {
    text-align: left;
    width: 100%;
    margin: 0 2.5em;
  }
  
  #categoryindexbox #categoryindex
  {
    width: 100%;
  }
  
  
  
  h2#categoryindexheading
  {
    text-align: center;
    color: #334259;
    text-shadow: 1px 1px #c4ccda;
  }
  
  a.categoryindexlink
  {
    color: #083cd1;
  }
  
  a.categoryindexlink:hover,
  a.categoryindexlink:active
  {
    color: #58198c;
  }
  
  
  #categoryintro
  {
    display: inline;
    margin-right: 2em;
    color: #593901;
		line-height: 1.5;
    /* line-height: 120%; */
    /* font-size: 95%; */
  }
  
  
  #categoryintro a
  {
    color: #051DA1;
  }
  
  #categoryintro a:hover,
  #categoryintro a:active
  {
    color: #2895FF;
  }
  
  #categoryintro h4
  {
    color: #1531C9;
    text-shadow: 1px 1px 1px #CCD0E9;
  }
  
  .categoryexpansionheading img.categoryexpansionlogo
  {
    margin: auto;
  }
  
  img.categoryexpansionheadinglogo
  {
    display: inline-block;
    vertical-align: middle;
    height: 40px;
    margin-right: 0.2em;
  }
  
  .categoryexpansionheadingtext
  {
    vertical-align: middle;
    margin-left: 0.3em;
    height: 40px;
  }
  
  /*
  .categoryexpansionheading
  {
    border-top: 3px double;
    border-bottom: 3px double;
    padding: 0.2em 0.2em;
    margin: 2em auto 3em;
    text-align: center;
    width: 90%;
  }
  */
  
  a.categoryindexlink.exp1:hover,
  a.categoryindexlink.exp1:active,
  .categoryexpansionheading.exp1
  {
    color: #005278;
    text-shadow: 1px 1px 1px #b5c8d5;
  }
  
  a.categoryindexlink.exp2:hover,
  a.categoryindexlink.exp2:active,
  .categoryexpansionheading.exp2
  {
    color: #213b09;
    text-shadow: 1px 1px 1px #649626;
  }
  
  a.categoryindexlink.exp3:hover,
  a.categoryindexlink.exp3:active,
  .categoryexpansionheading.exp3
  {
    color: #173b90;
    text-shadow: 1px 1px 1px #2c617a;
  }
  
  a.categoryindexlink.exp4:hover,
  a.categoryindexlink.exp4:active,
  .categoryexpansionheading.exp4
  {
    color: #592500;
    text-shadow: 1px 1px 1px #b99976;
  }
  
  a.categoryindexlink.exp5:hover,
  a.categoryindexlink.exp5:active,
  .categoryexpansionheading.exp5
  {
    color: #197738;
    text-shadow: 1px 1px 1px #46a757;
  }
  
  a.categoryindexlink.exp6:hover,
  a.categoryindexlink.exp6:active,
  .categoryexpansionheading.exp6
  {
    color: #662915;
    text-shadow: 1px 1px 1px #7a5e3b;
  }
  
  a.categoryindexlink.exp7:hover,
  a.categoryindexlink.exp7:active,
  .categoryexpansionheading.exp7
  {
    color: #233b0f;
    text-shadow: 1px 1px 1px #8eb66f;
  }
  
  a.categoryindexlink.exp8:hover,
  a.categoryindexlink.exp8:active,
  .categoryexpansionheading.exp8
  {
    color: #17245c;
    text-shadow: 1px 1px 1px #49647e;
  }

  a.categoryindexlink.exp9:hover,
  a.categoryindexlink.exp9:active,
  .categoryexpansionheading.exp9
  {
    color: #aaaaaa;
    text-shadow: 1px 1px 1px #aaaaaa;
  }
  
  .categoryindexexpansionblock
  {
    display: table;  /* prevents the columns breaking in the middle of an expansion list */
    margin-top: 0.7em;
  }
  
  .categoryindexexpansionblock:first-child
  {
    margin-top: 0;
  }
  
  /*
  .categoryexpansionheading.exp1
  {
    background: linear-gradient(to bottom, #d4e6ef, white 10%, white 90%, #d4e6ef);
  }
  
  .categoryexpansionheading.exp2
  {
    background: linear-gradient(to bottom, #dce7d4, white 10%, white 90%, #dce7d4);
  }
  
  .categoryexpansionheading.exp3
  {
    background: linear-gradient(to bottom, #cfd4e4, white 10%, white 90%, #cfd4e4);
  }
  
  .categoryexpansionheading.exp4
  {
    background: linear-gradient(to bottom, #e7cec0, white 10%, white 90%, #e7cec0);
  }
  
  .categoryexpansionheading.exp5
  {
    background: linear-gradient(to bottom, #d6e7d3, white 10%, white 90%, #d6e7d3);
  }
  
  .categoryexpansionheading.exp6
  {
    background: linear-gradient(to bottom, #e0c5bb, white 10%, white 90%, #e0c5bb);
  }
  
  .categoryexpansionheading.exp7
  {
    background: linear-gradient(to bottom, #cad7bd, white 10%, white 90%, #cad7bd);
  }
  
  .categoryexpansionheading.exp8
  {
    background: linear-gradient(to bottom, #c4c7d7, white 10%, white 90%, #c4c7d7);
  }
  */
  
  /* PvP PAGE */
  
  #pvp h4
  {
    margin-top: 10px;
    color: #191970;
    padding-right: 14px;
    font-size: 80%;
    margin-bottom: -3px;
  }
  
  #pvp #arenanote
  {
    font-size: 90%;
    font-style: italic;
  }
  
  #pvp #arenanote a:link,
  #pvp #arenanote a:visited
  {
    font-weight: bold;
    color: #000080;
  }
  
  #pvp #arenanote a:hover,
  #pvp #arenanote a:active
  {
    color: #0000FF;
  }
  
  .pvpsubheading
  {
    font-style: italic;
  }
  
  .pvpcurrencyicon
  {
    display: inline-block;
    height: 14px;
    margin-right: 0.12em;
  }
  
  .pvpheadingicon
  {
    display: inline-block;
    vertical-align: middle;
  }
  
  #pvpindexcontainer
  {
    text-align: left;
    margin: 3em 0 5em;
  }
  
  #pvpindex
  {
    display: inline-block;
    margin: auto;
    border: 2px solid #E4E7ED;
    border-radius: 7px;
    padding: 0.5em 1em;
    box-shadow: 1px 1px 5px 0px #373a41, 1px 1px 5px 0px #404144 inset;
    background: linear-gradient(-45deg, #e6e6e6, white, #e6e6e6);
  }
  
  ul.pvpindexlist
  {
    line-height: 190%;
    font-size: 80%;
    font-weight: bold;
    column-count: 1;
    margin: 0.7em 0.5em 0.9em;
    text-align: left;
  }
  
  ul.pvpindexlist li
  {
  
    list-style-type: disc;
    list-style-position: inside;
    margin-top: 0.2em;
  }
  
  
  h2#pvpindexheading
  {
    text-align: center;
    color: #334259;
    text-shadow: 1px 1px #c4ccda;
  }
  
  a.pvpindexlink
  {
    color: #083cd1;
  }
  
  a.pvpindexlink:hover,
  a.pvpindexlink:active
  {
    color: #58198c;
  }
  
  
  a.gallery_backtotop.racial
  {
    color: #4386bf;
    font-weight: bold;
  }
  
  .racialsectionheading
  {
    margin-top: 2em;
  }
  
  a.gallery_backtotop.racial:hover,
  a.gallery_backtotop.racial:active
  {
    color: #4dcdf0;
  }
  
  #reputation p
  {
    font-size: 95%;
  }
  
  #racialfactionindexcontainer
  {
    text-align: left;
    margin: 3em 0 5em;
  }
  
  #racialfactionindex
  {
    display: inline-block;
    margin: auto;
    border: 2px solid #E4E7ED;
    border-radius: 7px;
    padding: 0.5em 1em;
    box-shadow: 1px 1px 5px 0px #373a41, 1px 1px 5px 0px #404144 inset;
    background: linear-gradient(-45deg, #e6e6e6, white, #e6e6e6);
  }
  
  ul.racialfactionindexlist
  {
    line-height: 190%;
    font-size: 80%;
    font-weight: bold;
    column-count: 1;
    margin: 0.7em 0.5em 0.9em;
    text-align: left;
  }
  
  ul.racialfactionindexlist li
  {
  
    list-style-type: disc;
    list-style-position: inside;
    margin-top: 0.2em;
  }
  
  ul.racialfactionindexsublist
  {
    column-count: 1;
    column-gap: 3em;
  }
  
  ul.racialfactionindexsublist li
  {
  
    list-style-type: circle;
    list-style-position: inside;
    margin-top: 0.1em;
  }
  
  h2#racialfactionindexheading
  {
    text-align: center;
    color: #334259;
    text-shadow: 1px 1px #c4ccda;
  }
  
  a.racialfactionindexlink
  {
    color: #662914;
  }
  
  a.racialfactionindexlink:hover,
  a.racialfactionindexlink:active
  {
    color: #9733ea;
  }
  
  a.racialfactionsubindexlink
  {
    color: #0732ae;
  }
  
  a.racialfactionsubindexlink:hover,
  a.racialfactionsubindexlink:active
  {
    color: #6391F3;
  }
  
  
  /* Retired PAGE */
  
  #retired h4
  {
    margin-top: 10px;
    color: #191970;
    padding-right: 14px;
    font-size: 80%;
    margin-bottom: -3px;
  }
  
  
  
  /* USER PAGES */
  
  /* Form table */
  
  #user h4.collectionSub
  {
    margin: -1.3em 0 2em 0;
    font-style: normal;
    text-align: left;
    color: #3831B0;
    font-size: 80%;
  }
  
  #user table.form,
  #user table.form th,
  #user table.form td
  {
    margin: 0;
    padding: 2px 10px 2px 0;
    border: 0;
    color: #12254D;
  }
  
  #user table.form tr
  {
    line-height: 2.5em;
  }
  
  #user table.form th
  {
    padding-top: 15px;
  }
  
  #user table.form td.security
  {
    font-size: 75%;
    color: maroon;
  }
  
  #user table.form td.error
  {
    color: darkred;
    font-size: 90%;
    margin-bottom: 1em;
    font-weight: bold;
    line-height: 170%;
  }
  
  
  #user p.security
  {
    font-size: 80%;
    color: maroon;
  }
  
  #user p#accountCollectionLink
  {
    margin: 2em 0 1em;
  }
  
  #user p#accountCollectionLink a
  {
    background: linear-gradient(#2c75b3, #5fa1d9, #2c75b3);
    color: white;
    padding: 2px 9px 3px 6px;
    border-radius: 4px;
    box-shadow: 0 0 1px 0 #898989;
  }
  
  
  #user p#accountCollectionLink a:active,
  #user p#accountCollectionLink a:hover
  {
    text-shadow: 0px 0px 3px #56BDFF;
  }
  
  #user p#accountCollectionLink .linkarrow
  {
    font-size: 24pt;
    vertical-align: text-top;
    line-height: 15pt;
  }
  
  #user table.form td.submit
  {
    padding-top: 7px;
  }
  
  #user table.form input.text
  {
    width: 250px;
    padding: 2px 4px;
    border: 1px solid #808080;
    color: #0D1248;
    font-weight: bold;
    border-radius: 4px;
  }
  
  #user h3
  {
    margin: 2em 0 1em;
    color: #2E23D8;
  }
  
  /* Registration Page */
  
  
  #user #login input.text
  {
    width: 150px;
  }
  
  #user #login input.text:required
  {
  }
  
  
  #user #registration
  {
    margin-top: 30px;
  }
  
  #charRace,
  #charClass
  {
    width: 10em;
  }
  
  /* Account Page */
  
  #user h2
  {
    color: #3329D4;
    display: inline-block;
  }
  
  #user h2 .realmstring
  {
    font-weight: normal;
    color: #505280;
    font-size: 70%;
  }
  
  p.warning
  {
    font-weight: bold;
    color: darkred;
  }
  
  #user p.warning
  {
    font-size: 80%;
    margin-top: 0;
    margin-left: 1em;
    font-weight: bold;
    font-style: italic;
    color: darkred;
  }
  
  #user p.update
  {
    font-size: 80%;
    margin-top: 0;
    margin-left: 1em;
    color: #5F64CE;
    font-style: italic;
  }
  
  #user p#accountheader
  {
    margin-top: 30px;
  }
  
  .accountheader.name
  {
    color: #305FD0;
  }
  
  #user .accountheading
  {
    font-weight: bold;
  }
  
  #user #regioninfo
  {
    display: inline;
    margin-left: 4em;
  }
  
  #user form#regionselector
  {
    display: inline;
  }
  
  #user select#region
  {
    display: inline;
    padding-top: 2px;
  }
  
  #user input#regionset
  {
    display: inline;
  }
  
  #user table.characters,
  #user table.characters td,
  #user table.characters th
  {
    text-align: center;
    color: #111E41;
  }
  
  #user table.characters
  {
    margin-top: 0;
  }
  
  #user table.characters td,
  #user table.characters th
  {
    margin-top: 20px;
  }
  
  #user table.characters th
  {
    font-size: 9pt;
    vertical-align: bottom;
    line-height: 130%;
  }
  
  #user table.characters td.armoryIconCell
  {
    padding: 5px;
  }
  
  #user table.characters th#charNameHeader
  {
    text-align: left;
    font-size: 105%;
  }
  
  #user table.characters th.updateChar,
  #user table.characters td.updateChar
  {
  /*  background-color: #E9EAFF; */
  }
  
  #user table.characters tr:nth-of-type(2n) th.updateChar,
  #user table.characters tr:nth-of-type(2n) td.updateChar
  {
  /*  background-color: #D3D8F3; */
  }
  
  #user table.characters th.updateChar
  {
    border-radius: 0;
  }
  
  #user table.characters tr:last-of-type td.updateChar
  {
    border-radius: 0;
  }
  
  #user table.characters img.armoryIcon
  {
    width: 40px;
    border: 2px solid rgba(58, 83, 141, 1);
    border-radius: 7px;
  }
  
  #user table.characters .charName
  {
    text-align: left;
    font-weight: bold;
    color: #030598;
  }
  
  #user table.characters .charName a:hover,
  #user table.characters .charName a:active,
  #user table.characters .charName a:hover span.charData,
  #user table.characters .charName a:active span.charData,
  #user table.characters .charName a:hover span.charData span.charRealm,
  #user table.characters .charName a:active span.charData span.charRealm
  {
    color: #009CFF;
  }
  
  #user table.characters span.charData
  {
    font-size: 90%;
    color: #2E2B60;
    font-weight: normal;
  }
  
  #user table.characters th span.charData
  {
    font-size: 70%;
    font-weight: bold;
  }
  
  #user table.characters .charName span.charData span.charRealm
  {
    font-weight: bold;
  }
  
  #user table.characters tr:nth-of-type(2n)
  {
  /*  background-color: #DDECF9; */
  /*  box-shadow: 0 0 2px 1px #DDECF9; */
    background-color: #E9E9E9;
    box-shadow: 1px 2px 4px 1px #D2D2D2;
  }
  
  
  #user table.characters span.updatewarning
  {
    color: darkred;
    font-weight: bold;
  }
  
  #user table.characters input
  {
    font-size: 75%;
    padding-top: 2px;
  }
  
  #user table.characters input#collupdate
  {
    color: #235F99;
    font-weight: bold;
  }
  
  #user table.characters input#charupdate
  {
    color: #4D3387;
    font-weight: bold;
  }
  
  #user table.characters input#delete
  {
    color: darkred;
    font-weight: bold;
    font-variant: small-caps;
    font-size: 60%;
    padding-left: 2px;
    padding-right: 2px;
  }
  
  
  #user #details
  {
    margin-top: 15px;
  }
  
  #user input#addcharbutton
  {
    margin: 15px 0;
    font-weight: bold;
    color: #0B4875;
    font-size: 90%;
  }
  
  #user #content #logout
  {
    display: inline-block;
    margin-left: 4em;
    font-size: 85%;
    color: darkred;
    font-weight: bold;
    font-variant: small-caps;
    vertical-align: bottom;
    padding-top: 2px;
  }
  
  /* New Character Page */
  
  #user #new_character
  {
    margin: 25px 0;
  }
  
  #user #new_character label
  {
    color: #454360;
    font-weight: bold;
    font-size: 95%;
  }
  
  
  #user span#character
  {
    color: #241A89;
    font-weight: bold;
  }
  
  #user #new_character tr
  {
    vertical-align: text-bottom;
  }
  
  #user #new_character input#charName
  {
    padding-left: 3px;
    font-weight: bold;
    color: #4F4583;
  }
  
  #user #new_character input#charEdit
  {
    color: #452183;
    font-weight: bold;
  }
  
  #user #new_character select#charRealm
  {
    color:#4F4583;
    font-variant: small-caps;
  }
  
  #user #new_character input#charEditCancel
  {
    color: #833C3C;
    font-weight: bold;
    float: right;
  }
  
  #user #new_character td.submit
  {
    padding-top: 30px
  }
  
  #user p.updatehint
  {
    font-size: 85%;
    color: #14347E;
    width: 70%;
    text-shadow: 0px 0px 1px #C3C5E3;
  /*  text-align: justify; */
  }
  
  #user div#index
  {
    font-size: 75%;
    font-weight: bold;
    line-height: 150%;
    display: block;
    margin: 1em 0 2em 1em;
    color: #5C1A1A;
  }
  
  
  #user div#index ul
  {
    margin-left: 2em;
    width: 100%;
  }
  
  #user div#index li
  {
    list-style-type: disc;
  }
  
  #user div#index li a:link,
  #user div#index li a:visited
  {
    color: #711111;
  }
  
  #user div#index li a:hover,
  #user div#index li a:active
  {
    color: #8C4245;
  }
  
  .login input[type="submit"],
  .login input[type="button"]
  {
    padding: 2px 8px;
    border-radius: 3px;
    border: none;
    background: linear-gradient(#266aa6, #4696db, #266aa6);
    color: white;
    box-shadow: 0 0 1px 0px #4a8bc4;
    font-size: 110%;
  }
   
  .prefs_div
  {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1em;
    width: 95%;
    margin: auto;
    font-size: 85%;
  }
  
  
  .prefs_section
  {
    display: grid;
    border: 2px solid #1b7dce;
    padding: 1em 1em 2em;
    border-radius: 4px;
    grid-template-rows: 0.9fr 1fr;
  }
  
  .prefs_section.account
  {
    
  }
  
  .prefs_section.character
  {
    
  }

  .prefs_subsection
  {
    margin: 0 0.5em;
  }

  .prefs_subsection.details
  {
    border-bottom: 1px solid #1b7dce;
  }
  
  .prefs_subsection.change
  {
    
  }
  
  .prefs_section_heading + p
  {
    margin-top: 0;
  }
  
  #user h2.prefs_section_heading
  {
    margin-bottom: 1.5em;
  }
  
  .prefs_form
  {
    
  }
  
  .prefs_form_field
  {
    
  }
  
  .prefs_label
  {
    display: block;
    font-weight: bold;
    color: #4B6DBF;
    font-size: 90%;
  }
  
  .prefs_input
  {

  }
  
  .prefs_select,
  .prefs_input
  {
    margin-top: 0.1em;
    margin-bottom: 0.7em;
    padding: 0.1em 0.4em;
    font-size: 90%;
    font-weight: bold;
    line-height: 1.6em;
    color: #2f2f2f;
    border-style: double;
    border-color: #d3d3d3;
    border-radius: 3px;
  }
  
  .prefs_select,
  .prefs_input,
  .prefs_button
  {
    margin-left: 0.5em;
  }
   
  .prefs_select
  {
    margin-left: 0.5em;
  }
  
  input.prefs_button
  {
    margin-top: 1em;
    padding: 0.25em 0.4em;
    font-weight: bold;
    color: #3c3c3c;
    border-radius: 3px;
    border: 1px solid #575757;
  }
 
  input.prefs_button.delete
  {
    margin-top: 6.5em;
    color: darkred;
    border-color: darkred;
  }    
  
  .prefs_character_div
  {
    background-color: #E9E9E9;
    box-shadow: 1px 2px 4px 1px #D2D2D2;
    padding: 0.5em;
    margin-bottom: 2em;
  }
  
  .prefs_character_icon
  {
    display: inline-block;
  }
  
  .prefs_character_info
  {
    display: inline-block;
    padding-left: 0.5em;
  }
    
  .prefs_character_update
  {
    margin-top: 0.5em;
    font-style: italic;
  }
  
  .prefs_character_icon img.armoryIcon
  {
    width: 40px;
    border: 2px solid rgba(58, 83, 141, 1);
    border-radius: 7px;
  }
  
  .prefs_character_name
  {
    font-weight: bold;
    color: #030598;
    display: table-cell;
    vertical-align: middle;
  }
  
  .prefs_character_alert
  {
     padding: 0.5em 0.7em;
     margin-top: 0.5em;
     border: 2px solid #6f0404;
     border-radius: 6px;
     width: 90%;
  }
  
  .prefs_character_alert_heading
  {
    font-variant:small-caps;
    font-size: 90%;
    font-weight: bold;
    color: #530202;
  }
  
  .prefs_character_alert_message
  {
    color: #202020;
    font-size: 90%;
    margin: auto;
  }
  
   
  
  /* COLLECTIONS */
  
  /* Edit Collection */
  
  #collectioneditrefreshbutton
  {
    /* float: right; */
    margin: 15px 30px;
  }
  
  #share
  {
    font-size: 85%;
    color: #1D2C9F;
    line-height: 150%;
    font-style: italic;
  }
  
  #share a:link,
  #share a:visited
  {
    color: #192CFF;
    font-weight: bold;
  }
  
  #share a:hover,
  #share a:active
  {
    color: #88F;
  }
  
  #javascript
  {
    display: block;
    margin: 20px 0;
    padding: 0 20px;
    border: 1px solid blue;
  }
  
  table.icon
  {
    margin: 15px 0;
    text-align: center;
    vertical-align: top;
  }
  
  table.icon td
  {
    vertical-align: top;
    padding: 0;
  }
  
  table.icon div.thumbnail
  {
    position: relative;
    width: 110px;
    margin: 0;
    padding: 0 5px;
  }
  
  table.icon div.thumbnail img
  {
    margin: 5px auto;
  }
  
  table.icon div.thumbnail img.retired
  {
    position: absolute;
    top: -10px;
    left: 18px;
  }
  
  table.icon div.thumbnail p
  {
    margin: 3px 0 0 0;
    padding: 0;
    line-height: 150%;
    font-size: 60%;
    height: 5em;
  }
  
  .collection .collectioneditheadertext
  {
    color: black;
    font-size: 95%;
  }
  
  .collection .collectionedittext
  {
    font-style: italic;
    margin-left: 1em;
    font-size: 90%;
  }
  
  .collection .flexigallery
  {
    margin-left:10px;
    margin-bottom: 40px;
    display: block;
  }
  
  .collection .flexigallery div.thumbnail img.retired
  {
    top: 10px;
    left: 11px;
    width: 20px;
    height: 20px;
  }
  
  .collection .flexigallery div.thumbnail img.unused
  {
    top: 10px;
    left: 11px;
    width: 20px;
    height: 22px;
  }
  
  .collection .flexigallery div.thumbnail img.unimplemented
  {
    top: 10px;
    left: 11px;
    width: 20px;
    height: 20px;
  }
  
  .collection .flexigallery div.thumbnail img.upcoming
  {
    top: 10px;
    left: 11px;
    width: 20px;
    height: 20px;
  }
  
  .collection .flexigallery div#collectioneditthumb
  {
    font-size: 110%;
    display: inline-block;
    margin-right: 5px;
  }
  
  .collection .flexigallery div#collectioneditthumb
  {
    margin-bottom: 9px;
  }
  
  .collection .flexigallery div.thumbnail
  {
    width: 120px;
    padding: 0;
    margin: 0;
    text-align: center;
  }
  
  .collection .flexigallery div.thumbnail a:link
  {
    font-size: 85%;
  }
  
  .collection .flexigallery div.thumbnail img.thumbimage
  {
    width: 90px;
    margin-bottom: 4px;
    margin-left: auto;
    margin-right: auto;
    padding: 4px;
    border-radius: 11px;
    border-color: #BDC9CE;
  /*
    box-shadow: 0px 0px 0px 2px #3E6184;
    border-color: #839CC6;
  */
  }
  
  .collection .flexigallery div.thumbnail img.thumbimage:hover,
  .collection .flexigallery div.thumbnail img.thumbimage:active
  {
    box-shadow: 0px 0px 4px 2px #574F93;
    border-color: #BDC9CE;
  }
  
  .collection .flexigallery div.thumblabel
  {
    margin-top: 2px;
    line-height: 90%;
    width: 90%;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  
  .collection .flexigallery div.thumblabel a
  {
    height: 2em;
  }
  
  .collection .flexigallery div.thumblabel a:link,
  .collection .flexigallery div.thumblabel a:visited
  {
    color: midnightblue;
  }
  
  .collection .flexigallery div.thumbnail select
  {
    width: 95px;
    /* box-shadow: 0 0 0px 1px #6887AA; */
    text-align: center;
    font-size: 85%;
    margin-left: 2px;
    border-radius: 4px;
    border: 1px solid #fff6;
  }
  
  .collection #collectioneditheader
  {
    margin: 0 0 20px 0;
  }
  
  .collection #collectioneditheader div
  {
    vertical-align: top;
    padding: 0;
    margin: 0;
    height: 3em;
  }
  
  .collection #collectioneditheader #index
  {
    font-size: 75%;
    font-weight: bold;
    line-height: 150%;
    margin-left: 100px;
    display: inline-block;
    border-radius: 4px;
    border: 1px solid white;
    padding: 0.5em 1em;
    background: linear-gradient(to bottom right, #f9f9f9, #fff, #f9f9f9);
    box-shadow: 0 0 5px 1px #f0f0f0 inset, 0 0 1px 1px #a4a4a4;
  }
  
  .collection #collectioneditheader #headersection1
  {
    display: inline-block;
    vertical-align: top;
  }
  
  .collection #collectioneditheader #index ul
  {
    color: darkblue;
    margin-left: 2em;
    width: 100%;
  }
  
  .collection #collectioneditheader #index li
  {
    list-style-type: circle;
    list-style-position: inside;
  }
  
  .collection #collectioneditheader #index li a:link,
  .collection #collectioneditheader #index li a:visited
  {
    color: rgba(0, 118, 206, 1);
  }
  
  .collection #collectioneditheader #index li a:hover,
  .collection #collectioneditheader #index li a:active
  {
    color: #88F;
  }
  
  .collection h2
  {
    color: #4C3189;
    display: inline-block;
    margin-bottom: 20px;
  }
  
  
  .collection h3
  {
    margin: 0 0 10px 0;
    color: #312E60;
  }
  
  .collection form input#collectioneditrefreshbutton
  {
    margin: 0;
    padding: 0;
    font-size: 85%;
    border-radius: 4px;
    border: none;
    box-shadow: 0 0 1px #bfbfbf;
    background: #8a9eae;
    background: linear-gradient(#828b93, #a8adb3, #828b93);
    color: white;
    padding: 0.25em 0.5em;
  }
  
  .collection #collectioneditrefresh
  {
    display: inline-block;
    margin-right: 1em;
  }
  
  .collection #collectioneditcollectionlink
  {
    margin: 2em 0 1em;
    padding: 0.25em 0.5em;
    background: linear-gradient(#2c75b3, #5fa1d9, #2c75b3);
    border-radius: 4px;
    box-shadow: 0 0 1px 0 #898989;
  }
  
  .collection #collectioneditcollectionlink a
  {
    color: white;
  }
  
  
  .collection #collectioneditcollectionlink a:active,
  .collection #collectioneditcollectionlink a:hover
  {
    text-shadow: 0px 0px 3px #56BDFF;
  }
  
  .collection .gallery_backtotop
  {
    color: steelblue;
  }
  
  #collectionlist h3
  {
    margin: 30px 0px 30px;
    color: #3E5A7D;
  }
  
  #collectionlist h3 span.headingsub
  {
    font-size: 80%;
  }
  
  #collectionlist p.update
  {
    font-size: 80%;
    margin-top: 0;
    color: #5F64CE;
  }
  
  /*
  #collectionlist .collectiontabs
  {
    position: relative;
    margin-top: 40px;
    border-bottom: 3px solid #3B71B1;
  }
  
  #collectionlist p.update ~ .collectiontabs,
  #collectionlist p.warning ~ .collectiontabs
  {
    margin-top: 18px;
  }
  
  #collectionlist .collectiontabs input
  {
    display: none;
  }
  
  #collectionlist .collectiontabs label
  {
    padding: 2px 5px 1px;
    margin-right: 20px;
    border-radius: 4px 4px 0px 0px;
    opacity: 0.7;
    font-variant: small-caps;
    font-size: 110%;
  }
  
  #collectionlist .collectiontabs label:first-of-type
  {
    margin-left: 0;
  }
  
  #collectionlist .collectiontabs input:checked + label
  {
    opacity: 1;
    background: linear-gradient(#84B9EC, #3B71B1);
    background: -moz-linear-gradient(#84B9EC, #3B71B1);
    background: -webkit-linear-gradient(#84B9EC, #3B71B1);
    background: -o-linear-gradient(#84B9EC, #3B71B1);
    color: white;
  }
  
  #collectionlist .collectionsection
  {
    position: absolute;
    width: 100%;
  }
  
  #collectionlist .collectiontabs input ~ .collectionsection
  {
    display: none;
  }
  
  #collectionlist .collectiontabs input:checked + label + .collectionsection
  {
    display: block;
  }
  
  */
  
  
  #collectionlist .flexigallery div.thumbnail img.thumbimage
  {
    width: 90px;
    margin-bottom: 4px;
  }
  
  #collectionlist .flexigallery div.thumbnail
  {
    width: 120px;
    font-size: 68%;
    line-height: 105%;
    margin-bottom: 8px;
  }
  
  #collectionlist .flexigallery .thumblabel
  {
    margin-left: -1px;
    padding: 0 8px;
  }
  
  #collectionlist .flexigallery div.thumbnail a:link,
  #collectionlist .flexigallery div.thumbnail a:visited
  {
    text-shadow: 2px 2px 15px #B6B3CC;
  }
  
  
  #collectionlist #footer
  {
    display: none;
    /* hide the footer on collection pages till I can work out htf to stop it appearing under the collection - Wayne */
  }
  
  .collection_tools
  {
    display: block;
  }
  
  .collection_form.update
  {
    display: inline-block;
  }
  
  .collection_button.update
  {
    display: inline-block;
    border-radius: 4px;
    color: white;
    background-color: #63ACF0;
    font-weight: bold;
    padding: 0.2em 0.4em;
  }
  
  .collection_link.edit
  {
    display: inline-block;
    margin-left: 5em;
  }
  
  .collectionbutton
  {
    display: inline-block;
    border-radius: 4px;
    margin-top: 1em;
    font-size: 70%;
    width: 190px;
    height: 26px;
    padding: 0.15em 0.25em;
    color: white;
    font-weight: bold;
    border: 2px solid #3b648fde;
    background-color: #0651a4de;
    background: linear-gradient(to bottom, #0e4a8cde, #2366b7de, #0e4a8cde);
  }
  
  .collectionbutton:hover
  {
    background-color: #1764b7de;
    background: linear-gradient(to bottom, #0e4786de, #406da2de, #0e4786de);
  }
  
  .collectionbuttonimage
  {
    display: inline;
   /*  width: 25px; */
    margin-right: 10px;
    vertical-align: middle;
    transition: transform 0.3s ease-in;
    filter: brightness(1.2);
    width: 13%;
  }
  
  .collectionbutton:hover .collectionbuttonimage
  {
    transform: rotate(90deg);
    filter: brightness(2) saturate(0);
  }
  
  .collectionbuttonlabel
  {
    display: inline-block;
    /* width: 150px; */
    vertical-align: middle;
    color: white;
    width: 80%;
    -webkit-text-size-adjust: none;
  }
  

  .collectionbutton.update
  {
    border: 2px solid #3b648fde;
    background-color: #0651a4de;
    background: linear-gradient(to bottom, #0e4a8cde, #2366b7de, #0e4a8cde);
  }
 
  .collectionbutton.update:hover
  {
    background-color: #1764b7de;
    background: linear-gradient(to bottom, #0e4786de, #406da2de, #0e4786de);
  }

  .collectionbutton.forcerefresh
  {
    margin-left: 2em;
    border: 2px solid #acaaaade;
    background: linear-gradient(to bottom, #6a6a6ade, #888787de, #4a4a4ade);
    float: right;
    margin-right: 2em;
  }
 
  .collectionbutton.forcerefresh:hover
  {
    background-color: #1764b7de;
    background: linear-gradient(to bottom, #797979de, #6f6f6fde, #797979de);
  }
  
  .collectionbutton.adjust
  {
    border: 2px solid #6d8fb5de;
    background-color: #455566de;
    margin-left: 2em;
    background: linear-gradient(to bottom, #607b99de, #769dc8de, #607b99de);
  }
  
  .collectionbutton.adjust:hover
  {
    background-color: #5f7791de;
    background: linear-gradient(to bottom, #688eb9de, #4a76a6de, #688eb9de);
  }
  
  .collectionbutton.account
  {
    display: table-cell;
    font-size: 100%;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    padding: 0.15em 0.5em;
  }
  
  .collectionbutton.account .collectionbuttonlabel
  {
    width: 100%;
  }
  
  .collectionrefreshinfo
  {
    font-weight: bold;
    font-size: 70%;
  }
  
  .collectionerror
  {
    color: white;
    font-weight: bold;
    font-size: 85%;
    width: 80%;
    margin: 2em 1em;
    background: #a62525;
    padding: 0.5em 0.8em;
    border-radius: 5px;
    border: 1px solid white;
    box-shadow: 0 0 0 1px #d0bfbf;
  }

  .collectionerror a:link,
  .collectionerror a:visited
  {
    color: #6efdfd;
  }
  
  .collectionerror a:hover,
  .collectionerror a:active
  {
    color: #ff6767;
  }
  
  /* ABOUT */
  
  
  #about h3
  {
    margin: 20px 0 -10px 0;
  }
  
  #about #content ul, #about #content li
  {
    list-style-type: circle;
    margin: 10px 0 0 15px;
  }
  
  
  
  /* ADMIN PAGES */
  
  .admin #content table, .admin #content table th, .admin #content table td
  {
    padding: 2px 5px;
    border: 1px solid white;
    background-color: #CCE1F6;
  }
  
  .admin #content table
  {
    width: 100%;
  }
  
  .admin #content table td.label
  {
    width: 175px;
  }
  
  .admin #content table#mount_edit td.label,
  .admin #content table#companion_edit td.label
  {
    text-align: right;
    font-weight: bold;
    font-size: 90%;
    color: #31169b;
  }
  
  .admin #content table#companion_edit td
  {
    padding: 7px 5px;
  }
  
  .admin #content table#mount_edit .formsubtext,
  .admin #content table#companion_edit .formsubtext
  {
    font-size: 90%;
    font-style: italic;
  }
  
  #admin h2
  {
    color: #4622D7;
    display: inline-block;
    font-size: 150%;
  }
  
  #admin h3
  {
    margin: 2em 0 0.6em;
    color: #4022B6;
  }
  
  #admin #content ul li
  {
    line-height: 180%;
    list-style: disc inside;
  }
  
  #admin #content ul li a
  {
    color: #0b5a95;
  }
  
  .admin #content table.admincompanionpettable,
  .admin #content table.admincompanionpettable td,
  .admin #content table.admincompanionpettable th
  {
    font-size: 90%;
  }
  
  .admin #content table.admincompanionpettable td,
  .admin #content table.admincompanionpettable th
  {
    background-color: inherit;
  }
  
  .admin #content table.admincompanionpettable tr
  {
    background-color: #e3e3e3;
  }
  
  .admin #content table.admincompanionpettable tr:nth-of-type(4n+1),
  .admin #content table.admincompanionpettable tr:nth-of-type(4n+2)
  {
    background-color: silver;
  }
  
  .admin #content table.admincompanionpettable tr:nth-of-type(1),
  .admin #content table.admincompanionpettable tr:nth-of-type(2)
  {
    background-color: #ccbef0;
  }
  
  .admin #content table.admincompanionpettable td.companionname
  {
    font-weight: bold;
    color: #2b872c;
  }
  
  .admin #content table.admincompanionpettable img
  {
    height: 60px;
  }
  
  .admin input#delete
  {
    color: darkred;
    font-weight: bold;
    float: right;
  }
  
  .admin_edit_hint
  {
    font-style: italic;
    font-size: 80%;
    display: block;
    padding-top; 3px;
  }
  
  .admin #content #game_parameter_edit
  {
    table-layout: fixed;
    width: 90%;
    color: maroon;
  }
  
  .admin #content #game_parameter_edit td
  {
    padding: 10px;
    background-color: #E5E5F5;
  }
  
  .admin #content #game_parameter_edit td.label
  {
    font-weight: bold;
    font-size: 95%;
    color: #1d357a;
    vertical-align: top;
    width: 25%;
  }
  
  .admin #content #game_parameter_edit input[type="text"]
  {
    width: 90%;
    padding; 1px 2px;
  }
  
  
  /* ADS */
  
  #sidead
  {
    float: right;
    width: 190px;
    border-style: solid;
    border-radius: 8px;
    border-color: #EEE;
    padding: 0 6px;
    width: 190px;
    min-width: 190px;
  }
  
  #headerad
  {
    float: right;
    margin-top: 5px;
    border-style: solid;
    border-radius: 8px;
    border-color: #EEE;
    width: 488px;
    min-width: 488px;
  }
  
  #ads_header_468x60
  {
    width: 468px;
    height: 60px;
    margin: 10px;
    padding: 0;
  }
  
  #ads_side_120x600
  {
    width: 120px;
    height: 600px;
    margin: 35px;
    padding: 0;
  }
  
  #ads_side_160x600
  {
    width: 160px;
    height: 600px;
    margin: 15px;
    padding: 0;
  }
  
@media only screen and (max-device-width: 812px)
{
  #headerad
  {
    float: none;
    display: block;
    margin-left: 0;
    margin-right: auto;
    margin-bottom: 1em;
  }

  #sidead
  {
    display: none;
  }
}

  
  /* NEW FLEXIBLE GALLERY */
  
  .flexigallery
  {
    display: block;
  }
  
  .flexigallery div.thumbnail
  {
    width: 150px;
    line-height: 110%;
    font-weight: bold;
    font-size: 80%;
    background-color: white;
    margin-bottom: 2.7em;
    margin-right: 5px;
    position: relative;
    display: inline-flex;
    vertical-align: text-top;
    flex-direction: column;
  }
  
  .flexigallery div.thumbnail a.thumbimagelink,
  .flexigallery div.thumbnail a.thumbimagelink:visited
  {
    color: rgb(0, 65, 120);
  }
  
  .flexigallery div.thumbnail a.thumbimagelink:active,
  .flexigallery div.thumbnail a.thumbimagelink:hover
  {
    color: rgb(0, 115, 180);
  }
  
  .flexigallery div.thumbnail a.thumbimagelink
  {
    display: block;
    position: relative;
  }
  
  .flexigallery div.thumbnail a img.thumbimage
  {
    box-shadow: 2px 2px 12px #9999cc;
    border-radius: 15px;
    border: 2px solid silver;
    padding: 5px;
    margin: 8px auto;
    display: block;
    width: 120px;
  }
  

  div.thumbnail[data-owned='1'] img.thumbimage
  {
    border-color: #99D5B5;
  }
  
  .flexigallery div.thumbnail[data-owned='1'] img.thumbimage
  {
    border: 3px solid #99D5B5;
    padding: 4px;
  }
  
  .flexigallery .thumblabel
  {
    text-align: center;
    padding: 0 5px;
    display: block;
  }
  
  .flexigallery div.thumbnail img.thumbimage:active,
  .flexigallery div.thumbnail img.thumbimage:hover
  {
    box-shadow: 3px 3px 16px #8a8ab8;
  }
  
  
  .flexigallery div.thumbnail img.retired
  {
    position: absolute;
    top: 4px;
    left: 12px;
    height: 25px;
  }
  
  .flexigallery div.thumbnail img.upcoming
  {
    position: absolute;
    top: 4px;
    left: 12px;
    height: 23px;
  }
  
  .flexigallery div.thumbnail img.upcoming.bfa
  {
    position: absolute;
    top: 4px;
    left: 12px;
    height: 13px;
  }
  
  .flexigallery div.thumbnail img.unused
  {
    position: absolute;
    top: 4px;
    left: 12px;
    height: 23px;
  }
  
  .flexigallery div.thumbnail img.unimplemented
  {
    position: absolute;
    top: 4px;
    left: 12px;
    height: 23px;
  }
  
  .flexigallery div.thumbnail span.owned
  {
    color: #139215;
    text-shadow: 1px 1px 4px #878B98;
    opacity: 0.8;
    vertical-align: text-bottom;
    margin-right: 2px;
    font-size: 1.1em;
  }
  
  .flexigallery div.thumbnail span.mountname
  {
  
  }
  
  
  .flexigallery div.thumbnail .thumblabel
  {
    text-align: center;
    font-size: 90%;
  }
  
  .flexigallery div.thumbnail .thumblabel .thumblabeltext
  {
  
  }
  
  .flexigallery div.thumbnail .thumblabel .thumblabeltext a,
  .flexigallery div.thumbnail .thumblabel .thumblabeltext a:visited
  {
    color: #0024a7;
    text-shadow: 1px 1px 0 #dee6ff;
  }
  
  
  .flexigallery div.thumbnail .thumblabel .thumblabeltext a:hover,
  .flexigallery div.thumbnail .thumblabel .thumblabeltext a:active
  {
    color: #3398e1;
  }
  
  
  
  .flexigallery div.thumbnail .thumbinfo
  {
    text-align: center;
    margin-top: 0.5em;
    font-size: 80%;
    color: #363636;
    line-height: 1.05em;
  }
  
  .flexigallery div.thumbnail .thumbinfo .thumbinfotext
  {
  
  }
  
  .flexigallery div.thumbnail .thumbinfo .thumbinfotext a,
  .flexigallery div.thumbnail .thumbinfo .thumbinfotext a:visited
  {
    color: #541702;
  }
  
  
  .flexigallery div.thumbnail .thumbinfo .thumbinfotext a:hover,
  .flexigallery div.thumbnail .thumbinfo .thumbinfotext a:active
  {
    color: #cb4f0d;
  }
  
  
  
  .WCMGallery
  {
    counter-reset: page;
    margin-bottom: 80px;
    font-weight: bold;
    color: #2A3656;
  }
  
  .gallery_index li a:link,
  .gallery_index li a:visited
  {
    color: #3C0F0F;
  }
  
  .WCMGallery .galleryfamilyheading
  {
    color: #262C6C;
  }
  
  
  .WCMGallery .galleryfamilyheading:first-of-type
  {
    margin-top: 20px;
  }
  
  .WCMGallery .flexigallery
  {
    min-height: 100px;
  }
  
  
  .WCMGallery input
  {
    margin: 15px 0 20px 0;
  }
  
  .WCMGallery div.thumbnail
  {
    counter-increment: page;
  }
  
  .WCMGallery input.noretired:checked ~ .flexigallery div.thumbnail[data-retired='1']
  {
    display: none;
    counter-increment: none;
  }
  
  .WCMGallery input.noallianceonly:checked ~ .flexigallery div.thumbnail[data-alliance-only='1']
  {
    display: none;
    counter-increment: none;
  }
  
  .WCMGallery input.nohordeonly:checked ~ .flexigallery div.thumbnail[data-horde-only='1']
  {
    display: none;
    counter-increment: none;
  }
  
  .WCMGallery::after
  {
    content: "Total Number of Mounts: " counter(page);
  }
  
  .WCMGallery .galleryfilter
  {
    margin-left: 5px;
    font-size: 9pt;
    font-weight: bold;
    color: #32353C;
  }
  
  .WCMGallery input
  {
    margin-left: 10px;
  }
  
  .WCMGallery input:first-of-type
  {
    margin-left: 0;
  }
  
  
  
  /*
  .flexigallery div.thumbnail span.upcoming
  {
    position: absolute;
    top: 16px;
    left: 10px;
    font-size: 180%;
    font-weight: normal;
    color: #7E84B1;
  }
  
  .flexigallery div.thumbnail span.unused
  {
    position: absolute;
    top: 15px;
    left: 9px;
    font-size: 160%;
    font-weight: normal;
    color: #A28B55;
  }
  
  .flexigallery div.thumbnail span.retired
  {
    position: absolute;
    top: 16px;
    left: 9px;
    font-size: 24.5pt;
    font-weight: normal;
    color: #BD1C1C;
    text-shadow: 1px 1px 2px #191645;
  }
  */
  
  .flexigallery .thumbsuffix
  {
    text-align: center;
    font-weight: bold;
    color: #004178;
    font-size: 75%;
    line-height: 110%;;
    padding-top: 2px;
    width: 130px;
    margin: -1px 13px 0px 7px;
    display: block;
  }
  
  .flexigallery #customgallery div.thumbnail
  {
    display: block;
  }
  
  .flexigallery .customthumb
  {
    display: inline-table;
    margin-right: 5px;
    padding-bottom: 2em;
    width: 150px;
  }
  
  .flexigallery .customthumb div.thumbnail
  {
    margin-bottom: 0px;
    height: auto;
  }
  
  .flexigallery .customthumb .thumbtop
  {
    font-style: normal;
    font-weight: bold;
    text-align: center;
    padding: 0 11px;
    color: #191970;
    font-size: 75%;
    display:block;
  }
  
  #reputation img.factionnameimg
  {
    display: inline-block;
    vertical-align: middle;
    width: 0.9em;
    margin-right: 0.05em;
  }
  
  #reputation h3
  {
    font-size: 95%;
    margin-bottom: 1.2em;
  }
  
  #reputation h3 a
  {
    color: #003289;
  }
  
  #reputation h3 a:hover,
  #reputation h3 a:active
  {
    color: #3062ba;
  }
  
  .factionexpansionheading img.factionexpansionlogo
  {
    margin: auto;
  }
  
  img.factionexpansionheadinglogo
  {
    display: inline-block;
    vertical-align: middle;
    height: 40px;
  }
  
  .factionexpansionheadingtext
  {
    vertical-align: middle;
    margin-left: 0.3em;
    height: 40px;
  }
  
  hr.expansiondivide
  {
    margin-top: 1em;
  }
  .factionexpansionheading
  {
    border-top: 3px double;
    border-bottom: 3px double;
    padding: 0.2em 0.2em;
    margin: 2em auto 3em;
    text-align: center;
    width: 90%;
  }
  
  a.factionindexlink.exp1:hover,
  a.factionindexlink.exp1:active,
  .factionexpansionheading.exp1
  {
    color: #005278;
    text-shadow: 1px 1px 1px #b5c8d5;
  }
  
  a.factionindexlink.exp2:hover,
  a.factionindexlink.exp2:active,
  .factionexpansionheading.exp2
  {
    color: #213b09;
    text-shadow: 1px 1px 1px #649626;
  }
  
  a.factionindexlink.exp3:hover,
  a.factionindexlink.exp3:active,
  .factionexpansionheading.exp3
  {
    color: #173b90;
    text-shadow: 1px 1px 1px #2c617a;
  }
  
  a.factionindexlink.exp4:hover,
  a.factionindexlink.exp4:active,
  .factionexpansionheading.exp4
  {
    color: #592500;
    text-shadow: 1px 1px 1px #b99976;
  }
  
  a.factionindexlink.exp5:hover,
  a.factionindexlink.exp5:active,
  .factionexpansionheading.exp5
  {
    color: #197738;
    text-shadow: 1px 1px 1px #46a757;
  }
  
  a.factionindexlink.exp6:hover,
  a.factionindexlink.exp6:active,
  .factionexpansionheading.exp6
  {
    color: #662915;
    text-shadow: 1px 1px 1px #7a5e3b;
  }
  
  a.factionindexlink.exp7:hover,
  a.factionindexlink.exp7:active,
  .factionexpansionheading.exp7
  {
    color: #233b0f;
    text-shadow: 1px 1px 1px #8eb66f;
  }
  
  a.factionindexlink.exp8:hover,
  a.factionindexlink.exp8:active,
  .factionexpansionheading.exp8
  {
    color: #17245c;
    text-shadow: 1px 1px 1px #49647e;
  }  
  
  a.factionindexlink.exp9:hover,
  a.factionindexlink.exp9:active,
  .factionexpansionheading.exp9
  {
    color: #262626;
    text-shadow: 1px 1px 1px #a2a2a2;
  }
  
  .factionindexexpansionblock
  {
    display: table;  /* prevents the columns breaking in the middle of an expansion list */
    margin-top: 0.7em;
  }
  
  .factionindexexpansionblock:first-child
  {
    margin-top: 0;
  }
  
  .factionexpansionheading.exp1
  {
    background: linear-gradient(to bottom, #d4e6ef, white 10%, white 90%, #d4e6ef);
  }
  
  .factionexpansionheading.exp2
  {
    background: linear-gradient(to bottom, #dce7d4, white 10%, white 90%, #dce7d4);
  }
  
  .factionexpansionheading.exp3
  {
    background: linear-gradient(to bottom, #cfd4e4, white 10%, white 90%, #cfd4e4);
  }
  
  .factionexpansionheading.exp4
  {
    background: linear-gradient(to bottom, #e7cec0, white 10%, white 90%, #e7cec0);
  }
  
  .factionexpansionheading.exp5
  {
    background: linear-gradient(to bottom, #d6e7d3, white 10%, white 90%, #d6e7d3);
  }
  
  .factionexpansionheading.exp6
  {
    background: linear-gradient(to bottom, #e0c5bb, white 10%, white 90%, #e0c5bb);
  }
  
  .factionexpansionheading.exp7
  {
    background: linear-gradient(to bottom, #cad7bd, white 10%, white 90%, #cad7bd);
  }
  
  .factionexpansionheading.exp8
  {
    background: linear-gradient(to bottom, #c4c7d7, white 10%, white 90%, #c4c7d7);
  }
  
  .factionexpansionheading.exp9
  {
    background: linear-gradient(to bottom, #dbdbdb, white 10%, white 90%, #dbdbdb);
  }
  
  .reputationheading
  {
    margin-bottom: 1.0em;
    margin-top: 0.2em;
    font-style: italic;
  }
  
  #reputation p
  {
    font-size: 95%;
  }
  
  #factionindexcontainer
  {
    text-align: center;
    margin: 3em 0 5em;
  }
  
  #factionindex
  {
    display: inline-block;
    margin: auto;
    border: 2px solid #E4E7ED;
    border-radius: 7px;
    padding: 0.5em 1em;
    box-shadow: 1px 1px 5px 0px #373a41, 1px 1px 5px 0px #404144 inset;
    background: linear-gradient(-45deg, #e6e6e6, white, #e6e6e6);
  }
  
  ul.factionindexlist
  {
    line-height: 190%;
    font-size: 75%;
    font-weight: bold;
    column-count: 3;
    margin: 0.7em 0.5em 0.9em;
    text-align: left;
  }
  
  ul.factionindexlist li
  {
  /*
    list-style-type: circle;
    list-style-position: inside;
  */
  }
  
  ul.factionindexlist li img.factionexpansionlogo
  {
    display: inline;
    height: 1.2em;
    vertical-align: text-bottom;
    margin-right: 0.2em;
  }
  
  ul.factionindexlist ul li.factionindexfactionitem
  {
    list-style-type: disc;
  /*  list-style-position: inside; */
  }
  
  h2#factionindexheading
  {
    text-align: center;
    color: #334259;
    text-shadow: 1px 1px #c4ccda;
  }
  
  a.factionindexlink
  {
    color: #662914;
  }
  
  a.factionindexlink:hover,
  a.factionindexlink:active
  {
    color: #6391F3;
  }
  
  a.factionsubindexlink
  {
    color: #0732ae;
  }
  
  a.factionsubindexlink:hover,
  a.factionsubindexlink:active
  {
    color: #6391F3;
  }
  
  .factiondiv
  {
    display: inline-block;
    margin-right: 5em;
  }
  
  .reputationdiv
  {
    display: inline-block;
  }
  
  .factionselector
  {
    text-align: center;
  }
  
  .factionselectorlabel
  {
    margin-right: 1em;
    font-size: 85%;
    font-weight: bold;
    transition: color 0.3s;
    transition: text-shadow 0.3s;
  }
  
  #factionall:checked + .factionselectorlabel
  {
    color: #8d5c07;
    text-shadow: 1px 1px #f5eadb;
  }
  
  #factionalliance:checked + .factionselectorlabel
  {
    color: #0d3cc3;
    text-shadow: 1px 1px #deecf3;
  }
  
  #factionhorde:checked + .factionselectorlabel
  {
    color: #890808;
    text-shadow: 1px 1px #fbe0e0;
  }
  
  #reputation .factionselectorlabel img.factionnameimg
  {
    width: 1.2em;
  }
  
  #factionfiltertext
  {
    font-weight: bold;
    color: #303030;
    font-size: 90%;
    margin-right: 1em;
  }
  
  #factionalliance:checked ~ .factiondiv.Horde,
  #factionalliance:checked ~ .factiondiv h3 .factionname.joiner,
  #factionalliance:checked ~ .factiondiv h3 .factionname.horde,
  #factionalliance:checked ~ #factionindexcontainer #factionindex .factionindexlist .factionindexsublist li.factionindexfactionitem.Horde
  {
    display: none;
  }
  
  #factionhorde:checked ~ .factiondiv.Alliance,
  #factionhorde:checked ~ .factiondiv h3 .factionname.joiner,
  #factionhorde:checked ~ .factiondiv h3 .factionname.alliance,
  #factionhorde:checked ~ #factionindexcontainer #factionindex .factionindexlist .factionindexsublist li.factionindexfactionitem.Alliance
  {
    display: none;
  }
  
 
   /* PATCH PAGES */
  
  .patch #content,
  .multicompanions #content
  {
    padding: 0 1.5em;
  }

  .patchindexcontainer
  {
    text-align: center;
    margin-bottom: 2em;
  }
  
  .patchindex
  {
    text-align: left;
    display: inline-block;
    margin: auto;
    border: 2px solid #E4E7ED;
    border-radius: 7px;
    padding: 0.5em 1em;
    box-shadow: 1px 1px 5px 0px #373a41, 1px 1px 5px 0px #404144 inset;
    background: linear-gradient(-45deg, #e6e6e6, white, #e6e6e6);
  }
  
  
  ul.patchindexlist
  {
    column-count: 3;
    column-gap: 1.9em;
    font-size: 15px;
    line-height: 1.3;
    margin-bottom: 1.2em;
    margin-left: 1.5em;
  }
  
  ul.patchindexlist.smallindex
  {
   column-count: 2;
   column-gap: 3em;
  }
  
  ul.patchindexlist.source
  {
    line-height: 1.9em;
    column-count: 2;
  }

  ul.patchindexlist li
  {
    margin-bottom: 0.5em;
    list-style-position: outside;
  }

  ul.patchindexlist.bullet li
  {
    list-style-type: circle;
  }

  ul.patchindexlist.bullet li::marker
  {

  }
  
  .patch h2.patchindexheading
  {
    text-align: center;
    color: white;
    background: #29649d;
    padding: 0.2em;
    margin: 0.2em 0 0.6em;
    font-size: 22px;
    border-radius: 2px;
    text-shadow: none;
    box-shadow: 1px 1px 1px #999;
  }
  
  h4 a.patchindexcategorylink
  {
    display: block;
    background: #4087cc;
    color: white;
    text-align: center;
    padding: 0.15em 0.25em;
    margin-bottom: 0.5em;
    text-shadow: none;
    font-size: 17px;
    box-shadow: 1px 1px 1px #9f9f9f;
  }
   
  h4 a.patchindexcategorylink.unused
  {
    background: #80868c;
    font-style: italic;
  }
  
  h4 a.patchindexcategorylink.smallindex
  {
    text-align: left;
  }
  
  a.patchindexlink
  {
    color: #1e2437;
    line-height: 1.1;
    /*break-inside: avoid-column;*/
    display: inline; /* horrible workaround because Firefox ignores break-inside: avoid-column; */
  }

  a.patchindexlink.unused
  {
    color: #54565e;
    display: inline-block;
    line-height: 1.25;
    font-style: italic;
  }
  
  a.patchindexlink.source
  {
    color: #662914;
  }
  
  a.patchindexlink:hover,
  a.patchindexlink:active
  {
    color: #6391F3;
  }
  
  .patch h2
  {
    color: #201e8f;
    font-size: 150%;
    text-align: center;
    padding: 0.4em 0 0.6em;
  }
  
  .patch .banner2
  {
    margin: 0px auto 1em;
  }
  
  .patch h2.topheading
  {
    padding: 0 0 1em 0;
    margin-top: 0;
    font-size: 32px;
    color: #07559f;
    text-shadow: 1px 1px 1px #9b9a7e;
  }
  
  .patch h2.sectionheading
  {
    color: #fff;
    text-align: left;
    padding: 1em 0;
    border-radius: 4px;
    margin: 1.5em 0 1.5em;
    padding: 0.3em;
    text-shadow: 1px 1px 0 #637d99;
    font-size: 28px;
    font-variant: all-small-caps;
    background: #6c62b3;
    box-shadow: 1px 1px 1px gray;
  }
  
  .patch h2.sectionheading.nosubsection
  {
    margin-bottom: 0.5em;
  }
  
  .patch h2.sectionheading .sectionsubheading
  {
    display: block;
    font-size: 50%;
    font-style: italic;
    font-variant: none;
    font-weight: normal;
    margin-top: 0.2em;
  }
  
  .patch h3,
  h3.guide
  {
    color: #3065b6;
    font-size: 140%;
    margin: 0.5em 0 0.5em;
    text-shadow: 1px 1px 1px #a9bbd7;
    border: 1px solid #6b93cf;
    border-left: none;
    border-right: none;
    padding: 0.2em 0.5em;
    background: linear-gradient(to bottom, #cdd9ec, white 10%, white 90%, #cdd9ec);
  }
  
  .patch .modelnotes
  {
    margin: 0 0 2em;
    line-height: 1.55em;
    font-size: 85%;
    color: #592f18;
  }
  
  .patch .modelnotes a,
  .patch .modelnotes a:visited
  {
    font-weight: bold;
    color: #1750c2;
  }
  
  .patch .modelnotes a:hover,
  .patch .modelnotes a:active
  {
    color: #4d71f0;
  }
  
  .patch .sectionnotes
  {
    line-height: 1.6em;
    font-size: 90%;
    color: #151680;
  }
  .patch .sectionheading + .sectionnotes
  {
    margin-top: 1.5em;
  }
  
  .patch .patchindexcontainer + .patchsection
  {
    margin-top: 2em;
  }

  .patch .patchsection.lastsection
  {
    margin-bottom: 4em;
  }
  
  .patch h5.later
  {
    font-size: 100%;
    color: #0053b1;
    margin-top: 1.5em;
  }
  
  .patch h5.unused
  {
    font-size: 95%;
    color: #680000;
    margin-top: 1.5em;
  }
  
  p.headingexplanation
  {
    font-size: 90%;
    font-style: italic;
    margin-bottom: 1.5em;
    margin-top: 0.3em;
  }
  
  .patch .patchpagestatus
  {
    line-height: 1.6;
    width: 90%;
    margin: 0 auto 1.5em;
    font-size: 17px;
    color: #5f1901;
    text-align: center;
    font-weight: bold;
  }
  
  .patch .patchintro
  {
    line-height: 1.6;
    width: 90%;
    margin: 0 auto 1.5em;
    font-size: 17px;
    color: #5f1901;
    text-align: center;
  }
  
  .patch .patchintro a,
  .patch .patchintro a:visited
  {
    color: #2261dd;
    font-weight: bold;
    text-shadow: 1px 1px 1px #c0cde6;
  }
  
  .patch .patchintro a:hover,
  .patch .patchintro a:active
  {
    color: #3d98ff;
  }
  
  .patch .modelpane .thumbnail.big img.thumbimage
  {
    width: 150px;
  }
  
  .patch .modelpane div.thumbnail .thumblabel_top
  {
    font-size: 70%;
    display: flex;
    align-content: flex-end;
    flex-direction: column;
    justify-content: flex-end;
    flex-basis: 0;
  }
  
  /* PATCH / EXPANSION DISPLAY PAGES */
  
  img.mountthumbfactionicon.namelogo
  {
    display: inline-block;
    height: 1.15em;
    vertical-align: middle;
    padding-bottom: 0.1em;
    margin-right: 0.1em;
  }
  
  img.mountthumbfactionicon.namelogo.alliance
  {
    filter: brightness(140%);
  }
  
  img.mountthumbfactionicon.namelogo.horde
  {
    filter: brightness(130%);
  }
  
  .modelpane
  {
    line-height: 4em;
  }
  
  .modelpane div.thumbnail
  {
    display: inline-flex;
    position: relative;
    width: 160px;
    vertical-align: top;
    margin-bottom: 1.5em;
    text-align: center;
    flex-direction: column;
    align-items: center;
  }
  
  .modelpane div.thumbnail.big
  {
    width: 210px;
  }
  
  .modelpane div.thumbnail img.thumbimage
  {
    border-radius: 8px;
    width: 120px;
  }
  
  .modelpane div.thumbnail.big img.thumbimage
  {
    width: 170px;
  }
  
  .modelpane div.thumbnail img.unused,
  .modelpane div.thumbnail img.upcoming
  {
    position: absolute;
    top: 5px;
    left: 5px;
    height: 20px;
  }
  
  .modelpane div.thumbnail img.upcoming.bfa
  {
    top: 2px;
    left: 1px;
    height: 16px;
  }
  
  .modelpane div.thumbnail.big img.unused,
  .modelpane div.thumbnail.big img.upcoming
  {
    height: 25px;
  }
  
  .modelpane div.thumbnail.big img.upcoming.bfa
  {
    top: 5px;
    left: 4px;
    height: 15px;
  }
  
  .modelpane div.thumbnail .thumblabel
  {
    text-align: center;
    margin-top: 0.6em;
    display: block;
    font-weight: bold;
    line-height: 110%;
    font-size: 75%;
    padding: 0 0.7em;
  }
  
  .modelpane div.thumbnail.big .thumblabel
  {
    margin-top: 0.4em;
    line-height: 115%;
    font-size: 90%;
  }
  
  .modelpane div.thumbnail .thumblabel_top
  {
    text-align: center;
    padding: 0px 10px;
    margin-top: 0.9em;
    margin-bottom: 0.8em;
    display: flex;
    align-content: flex-end;
    flex-direction: column;
    justify-content: flex-end;
    flex-basis: 0;
    font-weight: bold;
    font-size: 75%;
    color: #3D3B93;
    line-height: 1.2em;
  }
  
  .modelpane div.thumbnail .thumbinfo
  {
    text-align: center;
    padding: 0 0.7em;
    margin-top: 0.4em;
    display: flex;
    flex-direction: column;
    flex-basis: 0;
    font-weight: bold;
    font-size: 70%;
    color: #414141;
    line-height: 1.2em;
    min-height: 2.4em;
  }
  
  
  .modelpane div.thumbnail .thumblabel_top img.faction,
  .modelpane div.thumbnail .thumbinfo img.faction
  {
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    margin-right: 1px;
  }
  
  .modelpane div.thumbnail a.thumbimagelink
  {
    position: relative;
    display: inline-block;
    box-shadow: 1px 1px 9px 1px rgb(181, 190, 213), 0 0 1px 0px rgb(216, 223, 243) inset, 0 0 1px 1px rgb(229, 234, 249);
    border-radius: 10px;
    padding: 4px;
    background-color: #f2f2f2;
    background-image: linear-gradient(rgba(255,255,255,0) 90%, rgb(227, 227, 227));
  }
  
  .modelpane div.thumbnail[data-owned='1'] a.thumbimagelink
  {
    background-color: #77C187;
    background-image: none;
  }
  
  .modelpane div.thumbnail span.owned
  {
    color: #139215;
    text-shadow: 1px 1px 4px #878B98;
    opacity: 0.8;
    vertical-align: text-bottom;
    margin-right: 2px;
    font-size: 1em;
  }
  
  .modelpane div.thumbnail a.thumbimagelink:hover,
  .modelpane div.thumbnail a.thumbimagelink:active
  {
    box-shadow: 0px 0px 12px 2px rgb(118, 144, 207);
  }
  
  .modelpane div.thumbnail .thumblabel a:link,
  .modelpane div.thumbnail .thumblabel a:visited
  {
    color: #1f3daa;
    text-shadow: 1px 1px 0 #dadfed;
  }
  
  .modelpane div.thumbnail .thumblabel a:hover,
  .modelpane div.thumbnail .thumblabel a:active
  {
    color: #3398e1;
  }
  
  .modelpane div.thumbnail .thumblabel_top a:link,
  .modelpane div.thumbnail .thumblabel_top a:visited,
  .modelpane div.thumbnail .thumbinfo a:link,
  .modelpane div.thumbnail .thumbinfo a:visited
  {
    color: #541702;
  }
  
  .modelpane div.thumbnail .thumblabel_top a:hover,
  .modelpane div.thumbnail .thumblabel_top a:active,
  .modelpane div.thumbnail .thumbinfo a:hover,
  .modelpane div.thumbnail .thumbinfo a:active
  {
    color: #cb4f0d;
  }
  
  
  .modelpane div.thumbnail .thumblabel a span.unused
  {
    font-weight: normal;
    font-size: 90%;
  }
  
  .modelpane div.thumbnail img.retired
  {
    position: absolute;
    top: 7px;
    left: 17px;
    height: 25px;
  }
  
  .modelpane div.thumbnail .thumbimagediv
  {
  
  }
  
  .modelpane div.thumbnail.label-image-info .thumbimagediv
  {
    order: 2;
  }
  
  .modelpane div.thumbnail.label-image-info .thumbinfo
  {
    order: 3;
    justify-content: normal;
  }
  
  .modelpane div.thumbnail.label-image-info .thumblabel
  {
    order: 1;
    margin-top: 0;
    margin-bottom: 0.4em;
  }
  
  
  .modelpane div.thumbnail.image-label-info .thumbimagediv
  {
    order: 1;
  }
  
  .modelpane div.thumbnail.image-label-info .thumbinfo
  {
    order: 3;
    margin-top: 0.4em;
    justify-content: normal;
  }
  
  .modelpane div.thumbnail.image-label-info .thumblabel
  {
    order: 2;
    margin-top: 0.6em;
  }
  
  .modelpane.largepane .thumbnail.big img.thumbimage,
  .bfa .modelpane.largepane .thumbnail.big img.thumbimage
  {
    width: 170px;
  }
  
  .modelupdatetable
  {
    margin: auto;
  }
  
  .modelupdatetable th,
  .modelupdatetable td
  {
    text-align: center;
  }
  
  .modelupdatetable th
  {
    padding: 0.5em 0.7em;
  }
  
  .modelupdatetable td
  {
    vertical-align: middle;
    padding: 2em 0.5em;
  }
  
  .modelupdatetable td div.thumbnail
  {
    position: relative;
    vertical-align: top;
    text-align: center;
  }
  
  .modelupdatetable .thumbimage
  {
    height: 170px;
  }
  
  .modelupdatetable div.thumbnail a.thumbimagelink
  {
    position: relative;
    display: inline-block;
    box-shadow: 1px 1px 9px 1px rgb(181, 190, 213), 0 0 1px 0px rgb(216, 223, 243) inset, 0 0 1px 1px rgb(229, 234, 249);
    border-radius: 10px;
    padding: 4px;
    background-color: #f2f2f2;
    background-image: linear-gradient(rgba(255,255,255,0) 90%, rgb(227, 227, 227));
  }
  
  .modelupdatetable div.thumbnail .thumblabel
  {
    text-align: center;
    font-weight: bold;
    line-height: 110%;
    font-size: 80%;
    margin-top: 0.7em;
  }
  
  .modelupdatetable div.thumbnail .thumblabel a,
  .modelupdatetable div.thumbnail .thumblabel a:visited
  {
    color: #1f3daa;
    text-shadow: 1px 1px 0 #dadfed;
  }
  
  .modelupdatetable div.thumbnail .thumblabel a:hover,
  .modelupdatetable div.thumbnail .thumblabel a:active
  {
    color: royalblue;
  }
  
  .modelupdatearrow
  {
    font-size: 600%;
    color: #1c4f9c;
    display: inline-block;
    padding: 0 0.3em;
    text-shadow: 2px 2px 4px #9a9da2;
    height: 170px;
  }
  
  
  
  /* WARLORDS OF DRAENOR PAGE */
  
  
  .draenor h2
  {
    color: rgba(147, 18, 18, 1);
    font-size: 150%;
    text-align: center;
    padding: 1em 0;
  }
  
  .draenor h2#topheading
  {
    padding: 0 0 1em 0;
    margin-top: -10px;
    font-size: 14pt;
    color: rgba(123, 0, 0, 1);
  }
  
  .draenor h3
  {
    color: rgba(98, 41, 26, 1);
    text-align: center;
    font-size: 150%;
    margin-top: 4em;
  }
  
  .draenor h3.first
  {
    margin-top: 3em;
  }
  
  .draenor h3 img.wodheading
  {
    display: inline-block;
    vertical-align: middle;
    max-width: 150px;
    max-height: 120px;
    padding: 0 10px;
  }
  
  .draenor h3 img.wodheading2
  {
  
  }
  
  
  .draenor h3 .h3text
  {
    display: inline-block;
    max-width: 40%;
    vertical-align: middle;
    line-height: 120%;
    font-size: 90%;
  }
  
  .draenor h3 .h3text .h3textheading
  {
    font-size: larger;
    display: block;
    line-height: 110%;
    font-size: 110%;
  }
  
  .draenor h4
  {
    color: #1F1642;
    font-size: 95%;
    padding: 1em 0;
  }
  
  .draenor h4.first
  {
    padding: 0 0 1em;
  }
  
  .draenor h5.unused
  {
    font-size: 90%;
    color: #7A0840;
    margin-top: 1.5em;
    margin-bottom: 1em;
    text-align: center;
  }
  
  .draenor p
  {
    color: rgba(33, 21, 57, 1);
    text-align: center;
    font-size: 105%;
    line-height: 1.3em;
  }
  
  .draenor p#update
  {
    font-style: italic;
    text-align: center;
    font-family: Georgia, serif;
    font-weight: bold;
    color: #4E465D;
    margin: 30px 0;
    font-size: 90%;
  }
  
  .draenor p#intro
  {
    font-style: italic;
    text-align: center;
    font-family: Georgia, serif;
    font-weight: bold;
    color: #4E465D;
    padding: 0 4em;
  }
  
  .draenor .speculation
  {
    display: inline;
    width: 120px;
    box-shadow: 2px 2px 12px #9999cc;
    border-radius: 15px;
    border: 2px solid silver;
    padding: 5px;
    margin: 8px 5px;
  }
  
  .draenor .modelpanel
  {
    text-align: center;
    line-height: 4em;
  }
  
  
  .draenor .modelpanel img
  {
    display: inline-block;
    box-shadow: 0px 0px 6px 0px rgba(74, 84, 116, 1);
    border-radius: 10px;
    padding: 2px 5px;
    margin: 0 10px;
  }
  
  .draenor .modelpane
  {
    text-align: center;
    line-height: 4em;
  }
  
  .draenor .modelpane div.thumbnail
  {
    display: inline-block;
    position: relative;
    width: 230px;
  }
  
  .draenor .modelpane div.thumbnail img.thumbimage
  {
    box-shadow: 0px 0px 6px 0px rgba(74, 84, 116, 1);
    border-radius: 10px;
    padding: 2px 5px;
    margin: 0 10px;
  }
  
  .draenor .modelpane div.thumbnail img.unused,
  .draenor .modelpane div.thumbnail img.upcoming
  {
    position: absolute;
    top: 7px;
    left: 17px;
    height: 25px;
  }
  
  .draenor .modelpane div.thumbnail .thumblabel
  {
    text-align: center;
    padding: 0px 11px;
    margin-left: -6px;
    margin-top: 0.6em;
    display: block;
    font-weight: bold;
    line-height: 115%;
    font-size: 90%;
  }
  
  .draenor .modelpane div.thumbnail .thumblabel_top,
  .draenor .modelpane div.thumbnail .thumbinfo
  {
    text-align: center;
    padding: 0px 10px;
    margin-top: 0.9em;
    margin-bottom: 0.8em;
    display: block;
    font-weight: bold;
    line-height: 135%;
    font-size: 80%;
    color: #3D3B93;
  }
  
  .draenor .modelpane div.thumbnail .thumblabel_top img.faction,
  .draenor .modelpane div.thumbnail .thumbinfo img.faction
  {
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    margin-right: 1px;
  }
  
  .draenor .modelpane div.thumbnail a.thumbimagelink
  {
    position: relative;
    display: block;
  }
  
  .draenor .modelpane div.thumbnail .thumblabel a:link,
  .draenor .modelpane div.thumbnail .thumblabel a:visited
  {
    color: #350702;
  }
  
  .draenor .modelpane div.thumbnail .thumblabel a:hover,
  .draenor .modelpane div.thumbnail .thumblabel a:active
  {
    color: #6B0A0A;
  }
  
  .draenor .modelpane div.thumbnail .thumblabel_top a:link,
  .draenor .modelpane div.thumbnail .thumblabel_top a:visited,
  .draenor .modelpane div.thumbnail .thumbinfo a:link,
  .draenor .modelpane div.thumbnail .thumbinfo a:visited
  {
    color: #781454;
  }
  
  .draenor .modelpane div.thumbnail .thumblabel_top a:hover,
  .draenor .modelpane div.thumbnail .thumblabel_top a:active,
  .draenor .modelpane div.thumbnail .thumbinfo a:hover,
  .draenor .modelpane div.thumbnail .thumbinfo a:active
  {
    color: #0B4D8D;
  }
  
  
  .draenor .modelpane div.thumbnail .thumblabel a span.unused
  {
    font-weight: normal;
    font-size: 90%;
  }
  
  .draenor .modelpane div.thumbnail img.retired
  {
    position: absolute;
    top: 7px;
    left: 17px;
    height: 25px;
  }
  
  .draenor .banner
  {
    margin: -40px auto 0;
  }
  
  .draenor .banner2
  {
    margin: 0px auto 30px;
  }
  
  .draenor .stress
  {
    font-weight: bold;
  }
  
  .draenor #draenorindexcontainer
  {
    text-align: center;
    margin-top: 4em;
  }
  
  .draenor #draenorindex
  {  padding: 10px 0px 20px;
    border-radius: 8px;
    border: 2px solid grey;
    text-alignment: center;
    font-size: 90%;
  }
  
  .draenor #draenorindex h3
  {
    margin-top: 0;
    margin-bottom: 1em;
    font-size: 130%;
  }
  
  .draenor #draenorindex ul.draenorindexlist
  {
    margin: -4px 0 0 44px;
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    text-align: left;
    line-height: 200%;
  }
  
  .draenor #draenorindex ul.draenorindexlist li
  {
  }
  
  .draenor #draenorindex ul.draenorindexlist a img
  {
    display: inline;
    vertical-align: middle;
    margin-right: 7px;
  }
  
  .draenor #draenorindex ul.draenorindexlist li a,
  .draenor #draenorindex ul.draenorindexlist li a:visited
  {
    color: #413232;
    text-decoration: none;
    font-weight: bold;
  }
  
  .draenor #draenorindex ul.draenorindexlist li a:hover,
  .draenor #draenorindex ul.draenorindexlist li a:active
  {
    color: #BC0404;
  }
  
  /* LEGION PAGE */
  
  
  .legion h2
  {
    color: rgba(147, 18, 18, 1);
    font-size: 150%;
    text-align: center;
    padding: 1em 0;
  }
  
  .legion#legion72 h2
  {
    color: rgb(98, 26, 26);
    font-size: 15pt;
    text-align: center;
    padding: 2em 0 0 0;
  }
  
  .multilookarrow
  {
    font-size: 163%;
    line-height: 210px;
    margin: 29px 0px 0 -20px;
    display: inline-block;
    color: #0a084d;
    text-shadow: 2px 2px 5px #1d1a3b;
  }
  
  .legion#legion72 h3
  {
    font-size: 14pt;
  }
  
  
  .legion h2#topheading
  {
    padding: 0 0 1em 0;
    margin-top: -10px;
    font-size: 16pt;
    color: rgb(68, 140, 38);
    text-shadow: 0 0 1px #c5db7e;
  }
  
  .legion h3
  {
    color: rgb(70, 116, 51);
    font-size: 130%;
    margin-top: 2.5em;
  }
  
  .legion h3.first
  {
    margin-top: 3em;
  }
  
  .legion h3 img.wodheading
  {
    display: inline-block;
    vertical-align: middle;
    max-width: 150px;
    max-height: 120px;
    padding: 0 10px;
  }
  
  
  .legion h3 .h3text
  {
    display: inline-block;
    max-width: 40%;
    vertical-align: middle;
    line-height: 120%;
    font-size: 90%;
  }
  
  .legion h3 .h3text .h3textheading
  {
    font-size: larger;
    display: block;
    line-height: 110%;
    font-size: 110%;
  }
  
  .legion h4
  {
    color: #1F1642;
    font-size: 95%;
    padding: 1em 0;
  }
  
  .legion h4.first
  {
    padding: 0 0 1em;
  }
  
  .legion h5.unused
  {
    font-size: 90%;
    color: #7A0840;
    margin-top: 1.5em;
    margin-bottom: 1em;
  }
  
  .legion .legionimage
  {
    margin: auto;
  }
  
  .legion p
  {
    color: #211d27;
    font-size: 105%;
    line-height: 1.3em;
  }
  
  .legion#legion72 p,
  .legion#legion72 ul.legionlist
  {
    font-size: 95%;
    margin: 1em 2em;
  }
  
  .legion#legion72 ul#classmountvariantsummary
  {
    margin-bottom: 2em;
  }
  
  
  .legion#legion72 ul#classmountvariantsummary li
  {
    list-style-type: disc;
    margin-left: 1em;
    margin-bottom: 0.5em;
  }
  
  .legion#legion725 p,
  .legion#legion725 ul.legionlist
  {
    font-size: 95%;
    margin: 1em 2em;
  }
  
  .legion#legion725 h2
  {
    font-size: 15pt;
    text-align: center;
    padding: 2em 0 0 0;
  }
  
  
  .legion#legion725 h3
  {
    font-size: 14pt;
  }
  
  .legion#legion725 .legionindexcontainer
  {
    margin-top: 1em;
  }
  
  
  .legion#legion725 h2#topheading
  {
    margin-top: 0;
  }
  
  .legion .banner725
  {
    margin: 5px auto 30px;
    width: 600px;
  }
  
  .legion #legionindex,
  .legion .legionindex
  {
    padding: 10px 0px 20px;
    border-radius: 8px;
    border: 2px solid grey;
    text-alignment: center;
    font-size: 90%;
  }
  
  .legion#legion725 .legionindex
  {
    line-height: 1em;
    padding: 1em 2.5em 0.8em;
    display: inline-block;
  }
  
  .legion#legion725 .legionindex#classindex
  {
    padding: 1.1em 0em 0.9em 1.7em;
    width: 70%;
    font-size: 85%;
  }
  
  .legion#legion725 .legionindex h3
  {
    margin-bottom: 1.2em;
  }
  
  .legion#legion725 .legionindex#classindex h3
  {
    font-size: 110%;
    margin-bottom: 0.8em;
  }
  
  .legion#legion725 .legionindex h4
  {
    margin-left: 0;
  }
  
  .legion#legion725 .legionindex ul.legionindexlist2
  {
    padding: 0;
  }
  
  .legion#legion725 .modelpane
  {
    margin-left: 2em;
    margin-right: 2em;
  }
  
  
  .legion li .modelpane
  {
    margin-top: 0.8em;
  }
  
  
  .legion p#update
  {
    font-style: italic;
    text-align: center;
    font-family: Georgia, serif;
    font-weight: bold;
    color: #4E465D;
    margin: 30px 0;
    font-size: 90%;
  }
  
  .legion p#intro
  {
    font-weight: bold;
    padding: 0 4em;
  }
  
  .legion .speculation
  {
    display: inline;
    width: 120px;
    box-shadow: 2px 2px 12px #9999cc;
    border-radius: 15px;
    border: 2px solid silver;
    padding: 5px;
    margin: 8px 5px;
  }
  
  .legion .modelpane
  {
    line-height: 4em;
  }
  
  .legion .modelpane div.thumbnail
  {
    display: inline-block;
    position: relative;
    width: 230px;
    vertical-align: top;
    margin-bottom: 1.5em;
  }
  
  .legion .modelpane div.thumbnail img.thumbimage
  {
    box-shadow: 0px 0px 6px 0px rgba(74, 84, 116, 1);
    border-radius: 10px;
    padding: 2px 5px;
  }
  
  .legion .modelpane div.thumbnail img.unused,
  .legion .modelpane div.thumbnail img.upcoming
  {
    position: absolute;
    top: 7px;
    left: 7px;
    height: 25px;
  }
  
  .legion .modelpane div.thumbnail .thumblabel
  {
    text-align: center;
    padding: 0px 11px;
    margin-left: -16px;
    margin-top: 0.6em;
    display: block;
    font-weight: bold;
    line-height: 115%;
    font-size: 90%;
  }
  
  .legion .modelpane div.thumbnail .thumblabel_top,
  .legion .modelpane div.thumbnail .thumbinfo
  {
    text-align: center;
    padding: 0px 10px;
    margin-top: 0.9em;
    margin-bottom: 0.8em;
    display: block;
    font-weight: bold;
    line-height: 135%;
    font-size: 80%;
    color: #3D3B93;
  }
  
  .legion .modelpane div.thumbnail .thumblabel_top img.faction,
  .legion .modelpane div.thumbnail .thumbinfo img.faction
  {
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    margin-right: 1px;
  }
  
  .legion .modelpane div.thumbnail a.thumbimagelink
  {
    position: relative;
    display: block;
  }
  
  .legion .modelpane div.thumbnail .thumblabel a:link,
  .legion .modelpane div.thumbnail .thumblabel a:visited
  {
    color: #350702;
  }
  
  .legion .modelpane div.thumbnail .thumblabel a:hover,
  .legion .modelpane div.thumbnail .thumblabel a:active
  {
    color: #6B0A0A;
  }
  
  .legion .modelpane div.thumbnail .thumblabel_top a:link,
  .legion .modelpane div.thumbnail .thumblabel_top a:visited,
  .legion .modelpane div.thumbnail .thumbinfo a:link,
  .legion .modelpane div.thumbnail .thumbinfo a:visited
  {
    color: #781454;
  }
  
  .legion .modelpane div.thumbnail .thumblabel_top a:hover,
  .legion .modelpane div.thumbnail .thumblabel_top a:active,
  .legion .modelpane div.thumbnail .thumbinfo a:hover,
  .legion .modelpane div.thumbnail .thumbinfo a:active
  {
    color: #0B4D8D;
  }
  
  
  .legion .modelpane div.thumbnail .thumblabel a span.unused
  {
    font-weight: normal;
    font-size: 90%;
  }
  
  .legion .modelpane div.thumbnail img.retired
  {
    position: absolute;
    top: 7px;
    left: 17px;
    height: 25px;
  }
  
  .legion .banner
  {
    margin: -40px auto 0;
  }
  
  .legion .banner2
  {
    margin: 0px auto 30px;
  }
  
  .legion .banner72
  {
    margin: 5px auto 30px;
    width: 680px;
    border: 3px solid #dee7db;
    border-radius: 2px;
  }
  
  .legion .stress
  {
    font-weight: bold;
  }
  
  .legion #legionindexcontainer,
  .legion .legionindexcontainer
  {
    text-align: center;
    margin-top: 4em;
  }
  
  .legion .legionindexcontainer
  {
    margin-top: 3em;
  }
  
  .legion#legion72 .legionindexcontainer
  {
    margin-top: 1em;
  }
  
  
  .legion#legion72 h2#topheading
  {
    margin-top: 0;
  }
  
  .legion #legionindex,
  .legion .legionindex
  {
    padding: 10px 0px 20px;
    border-radius: 8px;
    border: 2px solid grey;
    text-alignment: center;
    font-size: 90%;
  }
  
  .legion#legion72 .legionindex
  {
    line-height: 1em;
    padding: 1em 2.5em 0.8em;
    display: inline-block;
  }
  
  .legion#legion72 .legionindex#classindex
  {
    padding: 1.1em 0em 0.9em 1.7em;
    width: 70%;
    font-size: 85%;
  }
  
  .legion#legion72 .legionindex h3
  {
    margin-bottom: 1.2em;
  }
  
  .legion#legion72 .legionindex#classindex h3
  {
    font-size: 110%;
    margin-bottom: 0.8em;
  }
  
  .legion#legion72 .legionindex h4
  {
    margin-left: 0;
  }
  
  .legion#legion72 .legionindex ul.legionindexlist2
  {
    padding: 0;
  }
  
  .legion #legionindex h3,
  .legion .legionindex h3
  {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: 130%;
  }
  
  .legion #legionindex h4,
  .legion .legionindex h4
  {
    margin-left: 25px;
    padding-top: 0;
    font-size: 90%;
    text-align: left;
    color: rgb(110, 23, 9);
  }
  
  .legion #legionindex h4 a,
  .legion .legionindex h4 a
  {
    color: rgb(110, 23, 9);
  }
  
  .legion #legionindex h4 a:hover,
  .legion #legionindex h4 a:active,
  .legion .legionindex h4 a:hover,
  .legion .legionindex h4 a:active
  {
    color: rgb(201, 48, 24);
  }
  
  
  .legion #legionindex ul.legionindexlist,
  .legion #legionindex ul.legionindexlist2,
  .legion .legionindex ul.legionindexlist,
  .legion .legionindex ul.legionindexlist2
  {
    margin: -4px 0 0 44px;
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    text-align: left;
    column-gap: 40px;
    -moz-column-gap: 40px;
    -webkit-column-gap: 40px;
    color: rgba(33, 21, 57, 1);
    font-size: 110%;
  }
  
  .legion #legionindex ul.legionindexlist,
  .legion .legionindex ul.legionindexlist
  {
    line-height: 200%;
    font-size: 110%;
  }
  
  .legion #legionindex ul.legionindexlist2,
  .legion .legionindex ul.legionindexlist2
  {
    line-height: 100%;
    font-size: 100%;
    padding-bottom: 15px;
  }
  
  .legion #legionindex ul.legionindexlist li,
  .legion #legionindex ul.legionindexlist2 li,
  .legion .legionindex ul.legionindexlist li,
  .legion .legionindex ul.legionindexlist2 li
  {
    list-style-type: disc;
    white-space: nowrap;
  }
  
  .legion #legionindex ul.legionindexlist li,
  .legion .legionindex ul.legionindexlist li
  {
    line-height: 4.1em;
    display : inline;
  }
  
  .legion #legionindex ul.legionindexlist2 li,
  .legion .legionindex ul.legionindexlist2 li
  {
    line-height: 2.1em;
  }
  
  .legion #legionindex ul.legionindexlist a img,
  .legion #legionindex ul.legionindexlist2 a img,
  .legion .legionindex ul.legionindexlist a img,
  .legion .legionindex ul.legionindexlist2 a img
  {
    display: inline;
    vertical-align: middle;
    width: 50px;
    margin-right: 7px;
  }
  
  .legion #legionindex ul.legionindexlist li a,
  .legion #legionindex ul.legionindexlist li a:visited,
  .legion #legionindex ul.legionindexlist2 li a,
  .legion #legionindex ul.legionindexlist2 li a:visited,
  .legion .legionindex ul.legionindexlist li a,
  .legion .legionindex ul.legionindexlist li a:visited,
  .legion .legionindex ul.legionindexlist2 li a,
  .legion .legionindex ul.legionindexlist2 li a:visited
  {
    color: #413232;
    text-decoration: none;
    font-weight: bold;
  }
  
  .legion #legionindex ul.legionindexlist li a:hover,
  .legion #legionindex ul.legionindexlist li a:active,
  .legion #legionindex ul.legionindexlist2 li a:hover,
  .legion #legionindex ul.legionindexlist2 li a:active,
  .legion .legionindex ul.legionindexlist li a:hover,
  .legion .legionindex ul.legionindexlist li a:active,
  .legion .legionindex ul.legionindexlist2 li a:hover,
  .legion .legionindex ul.legionindexlist2 li a:active
  {
    color: #BC0404;
  }
  
  
  .legion ul.legionlist
  {
   margin: 2em auto 5em;
  }
  
  .legion ul.legionlist li
  {
    list-style-type: disc;
    line-height: 1.5em;
    margin-top: 1em;
  }
  
  
  .legion .legiondivide
  {
    width: 95%;
    margin: 2.5em auto 4em;
    border: 0;
    border-bottom: 3px double #7D9575;
  }
  
  .legion#legion72 .legionclassmountimg
  {
    width: 700px;
  }
  
  .legion .listtable
  {
    display: table;
    margin: auto;
    border-spacing: 0.3em 0;
  }
  
  .legion .listrow
  {
    display: table-row;
  }
  
  .legion .listcell1,
  .legion .listcell2
  {
    display: table-cell;
  }
  
  .legion .listcell1
  {
    text-align: right;
  }
  
  .legion .listcell2
  {
    text-align: left;
  }
  
  .legion ul,
  .legion li
  {
    list-style-position: inside;
    list-style-type: disc;
    color: #211d27;
    line-height: 1.3em;
 }
  
  .legion li
  {
   margin: 15px;
  }
  
  /* BfA PAGES */
  
  .bfa #content
  {
    padding: 0 2em;
 }
  
    // BfA Index:
  
  .bfa #content #bfaindexcontainer
  {
    text-align: center;
 }
  
  .bfaindexcontainer
  {
    text-align: center;
    margin-bottom: 2em;
 }
  
  #bfaindex
  {
    display: inline-block;
    margin: auto;
    border: 2px solid #E4E7ED;
    border-radius: 7px;
    padding: 0.5em 1em;
    box-shadow: 1px 1px 5px 0px #373a41, 1px 1px 5px 0px #404144 inset;
    background: linear-gradient(-45deg, #e6e6e6, white, #e6e6e6);
 }
  
  .bfaindex
  {
    text-align: left;
    display: inline-block;
    margin: auto;
    border: 2px solid #E4E7ED;
    border-radius: 7px;
    padding: 0.5em 1em;
    box-shadow: 1px 1px 5px 0px #373a41, 1px 1px 5px 0px #404144 inset;
    background: linear-gradient(-45deg, #e6e6e6, white, #e6e6e6);
 }
  
  
  ul.bfaindexlist
   {
    column-count: 3;
    column-gap: 1.9em;
    font-size: 75%;
    line-height: 1.5em;
    margin-bottom: 1.2em;
    margin-left: 1.5em;
    font-weight: bold;
  }
  
  ul.bfaindexlist.smallindex
   {
   column-count: 2;
   column-gap: 3em;
  }
  
  ul.bfaindexlist.source
   {
    line-height: 1.9em;
    column-count: 2;
  }
  
  ul.bfaindexlist .bfaindexlistitem
  {
    overflow: hidden;
    line-height: 1.7em;
  }

  .bfasubindexblock
  {
    display: block;
  }
  
  .bfasubindexblock:first
  {
  }
  
  ul.bfasubindexlist
  {
    margin-left: 1.4em;
  }
  
  ul.bfaindexlistul.bfaindexlist li
  {
    list-style-type: circle;
    list-style-position: inside;
    color: #93a7ec;
    white-space: nowrap;
  }
  
  ul.bfaindexlist.source li.bfaindexli.source
  {
    list-style-type: none;
    list-style-position: outside;
  }
  
  ul.bfasubindexlist li
  {
    margin-top: 0;
  }
  
  ul.bfasubindexlist.source li
  {
    list-style: disc;
    display: list-item;
    color: #9f9f9f;
  }
  
  h2#bfaindexheading
  {
    text-align: center;
    color: #074199;
    text-shadow: 1px 1px #c4ccda;
    margin: 0.5em 0 1em;
    padding: 0;
    font-size: 130%;
  }
  
  h4 a.bfaindexcategorylink
  {
    color: #662914;
    text-align: center;
    margin-bottom: 0.2em;
    display: block;
    text-shadow: 1px 1px 2px #d7bfb8;
  }
 
  h4 a.bfaindexcategorylink.smallindex
  {
    text-align: left;
  }
  
  a.bfaindexlink
  {
    color: #001a74;
  }
  
  a.bfaindexlink.source
  {
    color: #662914;
  }
  
  a.bfasubindexlink.source
  {
    color: #001a74;
  }
  
  a.bfaindexlink:hover,
  a.bfaindexlink:active
  {
    color: #6391F3;
  }
  
  .bfa h2
  {
    color: #201e8f;
    font-size: 150%;
    text-align: center;
    padding: 0.4em 0 0.6em;
  }
  
  .bfa .banner2
  {
    margin: 0px auto 1em;
  }
  
  .bfa h2#topheading
  {
    padding: 0 0 1em 0;
    margin-top: 0;
    font-size: 160%;
    color: #001a74;
    text-shadow: 1px 1px 1px #9b9a7e;
  }
  
  .bfa h2.sectionheading
  {
    color: #fff;
    text-align: left;
    padding: 1em 0;
    border: 2px solid #7cb3ec;
    border-radius: 2px;
    margin: 1.5em 0 1.5em;
    padding: 0.3em;
    text-shadow: 1px 1px 0 #637d99;
    font-size: 170%;
    font-variant: all-small-caps;
    background: linear-gradient(to bottom, #6fbae7, #1c73a2 5%, #1c73a2 95%, #6fbae7);
    background: #5c9bda;
  }
  
  .bfa h2.sectionheading.nosubsection
  {
    margin-bottom: 0.5em;
  }
  
  .bfa h2.sectionheading .sectionsubheading
  {
    display: block;
    font-size: 50%;
    font-style: italic;
    font-variant: none;
    font-weight: normal;
    margin-top: 0.2em;
  }
  
  .bfa hr.sectiondivide,
  hr.sectiondivide
  {
    width: 50%;
    margin: 2em auto;
    border: 0;
    border-bottom: 1px solid #467199;
    clear: both;
    box-shadow: 1px 1px 5px #bec4c9;
  }
  
  .bfa h3
  {
    color: #3065b6;
    font-size: 140%;
    margin: 0.5em 0 0.5em;
    text-shadow: 1px 1px 1px #a9bbd7;
    border: 1px solid #6b93cf;
    border-left: none;
    border-right: none;
    padding: 0.2em 0.5em;
    background: linear-gradient(to bottom, #cdd9ec, white 10%, white 90%, #cdd9ec);
  }
  
  .bfa .modelnotes
  {
    margin: 0 0 2em;
    line-height: 1.55em;
    font-size: 85%;
    color: #592f18;
  }
  
  .bfa .modelnotes a,
  .bfa .modelnotes a:visited
  {
    font-weight: bold;
    color: #1750c2;
  }
  
  .bfa .modelnotes a:hover,
  .bfa .modelnotes a:active
  {
    color: #4d71f0;
  }
  
  .bfa .sectionnotes
  {
    line-height: 1.6em;
    font-size: 90%;
    color: #151680;
  }
  .bfa .sectionheading + .sectionnotes
  {
    margin-top: 1.5em;
  }
  
  .bfa .bfaindexcontainer + .bfasection
  {
    margin-top: 2em;
  }

  .bfa .bfasection.lastsection
  {
    margin-bottom: 4em;
  }
  
  .bfa h5.later
  {
    font-size: 100%;
    color: #0053b1;
    margin-top: 1.5em;
  }
  
  .bfa h5.unused
  {
    font-size: 95%;
    color: #680000;
    margin-top: 1.5em;
  }
  
  p.headingexplanation
  {
    font-size: 90%;
    font-style: italic;
    margin-bottom: 1.5em;
    margin-top: 0.3em;
  }
  
  
  .bfa #intro
  {
    line-height: 1.4em;
    width: 90%;
    margin: 0 auto 2em;
    font-size: 95%;
    color: #5f1901;
    text-shadow: 1px 1px #edddd8;
    text-align: center;
  }
  
  .bfa #intro a,
  .bfa #intro a:visited
  {
    color: #2261dd;
    font-weight: bold;
    text-shadow: 1px 1px 1px #c0cde6;
  }
  
  .bfa #intro a:hover,
  .bfa #intro a:active
  {
    color: #3d98ff;
  }
  
  .bfa .modelpane .thumbnail.big img.thumbimage
  {
    width: 150px;
  }
  
  .bfa .modelpane div.thumbnail .thumblabel_top
  {
    font-size: 70%;
    display: flex;
    align-content: flex-end;
    flex-direction: column;
    justify-content: flex-end;
    flex-basis: 0;
  }
  
  
  
  div.petmatchpanel
{
  margin-bottom: 2em;
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 1em 3em;
  margin-left: 2em;
}

div.petmatchitem
{
  border-radius: 3px;
  box-shadow: 1px 1px 5px 1px rgb(181, 190, 213), 0 0 1px 0px rgb(216, 223, 243) inset, 0 0 1px 1px rgb(229, 234, 249);
}

a.matchingtable_matchthumb,
a.matchingtable_mountthumb
{
  width: 120px;
  font-size: 80%;
  display: inline-block;
  text-align: center;
  line-height: 1.3;
  padding: 0.6em 0.6em;
  border: 2px solid #bed0e8;
  font-size: 75%;
  line-height: 1.2;
  box-sizing: border-box;
  height: 100%;
  vertical-align: top;
  border-radius: 3px;
  font-weight: bold;
}

a.matchingtable_matchthumb
{
  background-color: white;
  color: #493cd0;
  border: 3px solid #a39bff;
}

a.matchingtable_mountthumb
{
  color: #458be8;
  font-weight: bold;
  border: 3px solid #7da8e1;
}

a.matchingtable_matchthumb:active,
a.matchingtable_matchthumb:hover
{
  color: #a39bff !important;
}


a.matchingtable_mountthumb:active,
a.matchingtable_mountthumb:hover
{
  color: #5274f5 !important;
}

a.matchingtable_matchthumb img,
a.matchingtable_mountthumb img
{
  width: 100px;
  margin-left: auto;
  margin-right: auto;
}
  
.matchsubnameprefix
{
  width: 100%;
  display: block;
  font-size: 80%;
  padding: 1px;
  color: #515151;
  font-style: italic;
}
  
.companiondiv
{
  padding: 0.7em 0 2em;
  background-color: #e1e1e1;
  border-radius: 5px;
  border: 1px solid #d3d3d3;
  box-shadow: 0 0 3px 1px #e8e4e4;
}

.companionlist
{
  padding: 0;
  color: midnightblue;
  font-size: 80%;
  font-weight: bold;
  line-height: 110%;
  border: none;
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

.companionlist td,
.companionlist th
{
  text-align: left;
  vertical-align: middle;
  border: none;
  padding-left: 1.5em;
  padding-top: 0;
}
  
.companionlist td.companioncolumn,
.companionlist th.companioncolumn
{
  width: 80%;
}

  
.companionlist tr
{
  border-bottom: 2px outset #FFF;
}

.companionlist tr:first-of-type
{
}


.companionlist tr:nth-child(even)
{
  background: #f5f5f5;
}

.companionlist div.thumbnail,
.companionlist div.companionthumbnail
{
  width: 120px;
  line-height: 110%;
  font-weight: bold;
  font-size: 77%;
  margin-top: 10px;
  margin-right: 5px;
  display: block;
  position: relative;
  display: inline-block;
  vertical-align: text-top;
}

.companionlist div.thumbnail a:link,
.companionlist div.thumbnail a:visited,
.companionlist div.companionthumbnail a:link,
.companionlist div.companionthumbnail a:visited
{
  color: rgb(0, 65, 120);
}

.companionlist div.thumbnail a:active,
.companionlist div.thumbnail a:hover,
.companionlist div.companionthumbnail a:active,
.companionlist div.companionthumbnail a:hover
{
  color: rgb(0, 115, 180);
}

.companionlist div.thumbnail img.thumbimage,
.companionlist div.companionthumbnail img.companionthumbimage
{
  box-shadow: 1px 1px 4px #66718C;
  border-radius: 15px;
  border: 2px solid #BAC2D0;
  padding: 5px;
  margin: 3px 5px;
  display: block;
  background-color: white;
  width: 90px;
}

.companionlist .thumblabel,
.companionlist .companionthumblabel
{
  text-align: center;
  padding: 0 11px;
  margin-left: -6px;
  display: block;
}

.companionlist .companionthumblabel.top
{
  color: #444;
  font-size: 110%;
}

.companionlist div.thumbnail img.thumbimage:active,
.companionlist div.thumbnail img.thumbimage:hover,
.companionlist div.companionthumbnail img.companionthumbimage:active,
.companionlist div.companionthumbnail img.companionthumbimage:hover
{
  box-shadow: 2px 2px 10px #66718C;
}


.companionlist div.thumbnail img.retired
{
  position: absolute;
  top: 13px;
  left: 10px;
  height: 25px;
}

.companionlist div.thumbnail img.upcoming
{
  position: absolute;
  top: 12px;
  left: 9px;
  height: 23px;
}

.companionlist div.thumbnail img.unused
{
  position: absolute;
  top: 12px;
  left: 9px;
  height: 23px;
}

.companionlist div.thumbnail img.unimplemented
{
  position: absolute;
  top: 12px;
  left: 9px;
  height: 23px;
}

.companionlist div.thumbnail span.owned
{
  position: absolute;
  top: 123px;
  left: 118px;
  font-size: 14pt;
  color: #139215;
  text-shadow: 1px 1px 4px #878B98;
  opacity: 0.8;
}

  /* MATCHING COMPANION LIST (CURRENTLY ADMIN ONLY) */
  
  #companionlist
  {
    padding: 0;
    color: midnightblue;
    font-size: 80%;
    font-weight: bold;
    line-height: 110%;
    border: none;
    text-align: center;
  /*
    background: linear-gradient(to right, #E4E4E4, #BABABA);
    background: -moz-linear-gradient(to right, #E4E4E4, #BABABA);
    background: -webkit-linear-gradient(to right, #E4E4E4, #BABABA);
    background: -o-linear-gradient(to right, #E4E4E4, #BABABA);
  */
  }
  
  #companionlist th
  {

  }
  
  #companionlist td,
  #companionlist th
  {
    text-align: left;
    vertical-align: middle;
    border: none;
  }
  
  #companionlist td.companioncolumn,
  #companionlist th.companioncolumn
  {
    padding-left: 3em;
  }
  
  #companionlist tr
  {
    border-bottom: 2px outset #C7D1EA;
  }
  
  #companionlist tr:first-of-type
  {
    background: white;
  }
  
  
  #companionlist tr:nth-child(even)
  {
  /*  background: white; */
  }
  
  #companionlist div.thumbnail,
  #companionlist div.companionthumbnail
  {
    width: 120px;
    line-height: 110%;
    font-weight: bold;
    font-size: 77%;
    margin-right: 5px;
    display: block;
    position: relative;
    display: inline-block;
    vertical-align: text-top;
  }
  
  #companionlist div.thumbnail a:link,
  #companionlist div.thumbnail a:visited,
  #companionlist div.companionthumbnail a:link,
  #companionlist div.companionthumbnail a:visited
  {
    color: rgb(0, 65, 120);
  }
  
  #companionlist div.thumbnail a:active,
  #companionlist div.thumbnail a:hover,
  #companionlist div.companionthumbnail a:active,
  #companionlist div.companionthumbnail a:hover
  {
    color: rgb(0, 115, 180);
  }
  
  #companionlist div.thumbnail img.thumbimage,
  #companionlist div.companionthumbnail img.companionthumbimage
  {
    box-shadow: 1px 1px 4px #66718C;
    border-radius: 15px;
    border: 2px solid #BAC2D0;
    padding: 5px;
    margin: 8px 5px;
    display: block;
    background-color: white;
    width: 90px;
  }
  
  #companionlist .thumblabel,
  #companionlist .companionthumblabel
  {
    text-align: center;
    padding: 0 11px;
    margin-left: -6px;
    display: block;
  }

  #companionlist .companionthumblabel.top
  {
    color: #444;
    font-size: 110%;
  }
  
  #companionlist div.thumbnail img.thumbimage:active,
  #companionlist div.thumbnail img.thumbimage:hover,
  #companionlist div.companionthumbnail img.companionthumbimage:active,
  #companionlist div.companionthumbnail img.companionthumbimage:hover
  {
    box-shadow: 2px 2px 10px #66718C;
  }
  
  
  #companionlist div.thumbnail img.retired
  {
    position: absolute;
    top: 13px;
    left: 10px;
    height: 25px;
  }
  
  #companionlist div.thumbnail img.upcoming
  {
    position: absolute;
    top: 12px;
    left: 9px;
    height: 23px;
  }
  
  #companionlist div.thumbnail img.unused
  {
    position: absolute;
    top: 12px;
    left: 9px;
    height: 23px;
  }
  
  #companionlist div.thumbnail img.unimplemented
  {
    position: absolute;
    top: 12px;
    left: 9px;
    height: 23px;
  }
  
  #companionlist div.thumbnail span.owned
  {
    position: absolute;
    top: 123px;
    left: 118px;
    font-size: 14pt;
    color: #139215;
    text-shadow: 1px 1px 4px #878B98;
    opacity: 0.8;
  }
  
  
  p.guide,
  ul.guide
  {
    color: #2d210b;
    line-height: 1.50;
    font-size: 85%;
    margin-left: 1em;
    margin-right: 1em;
  }
  
  ul.guide li
  {
    list-style-type: disc;
    list-style-position: inside;
    margin-left: 1em;
  }
  
  body#piggypaper
  {
    background-image: url('../images/tiletest/GBTile2small.png');
  }
  
  body#piggypaper div#content #mountbox,
  body#piggypaper #sidead,
  body#piggypaper #headerad,
  body#piggypaper #header table#searchbox td#searchbar
  {
    background-color: white;
  }
  
  body#piggypaper div#content #mountbox
  {
    border-radius: 20px;
    border: 2px solid maroon;
    padding: 20px;
    display: inline-block;
    margin-top: 1px;
  }
  
  
  body#bordertest #mountbox
  {
    border-radius: 20px;
    border: 3px solid #B9C9DD;
    padding: 20px;
    margin-top: 1px;
    display: inline-block;
  }
  
  body#bordertest2
  {
    background-color: #F6EDF9;
  }
  
  body#bordertest2 div#content #mountbox
  {
    border-radius: 20px;
    border: 3px solid #B9C9DD;
    padding: 20px;
    margin-top: 1px;
    display: inline-block;
    background-color: white;
  }
  
  body#bordertest2 #sidead,
  body#bordertest2 #headerad,
  body#bordertest2 #header table#searchbox td#searchbar
  {
    background-color: white;
  }
  
  body#bordertest3 #mountbox
  {
    border-radius: 20px;
    border: 3px solid rgba(193, 203, 215, 1);
    padding: 20px;
    margin-top: 1px;
    display: inline-block;
    background-color: rgba(201, 219, 222, 1);
  }
  
  body#bordertest4 #mountbox
  {
    border-radius: 20px;
    border: 3px solid #B9C9DD;
    padding: 20px;
    margin-top: 1px;
    display: inline-block;
    background-color: rgba(59, 75, 107, 1);
    color: white;
  }
  
  body#bordertest4 #mountbox h3
  {
    color: #56DAEA;
  }
  
  body#bordertest4 #mountbox .mountstatus
  {
    color: #FF133C;
  }
  
  body#bordertest4 #mountbox #sameunusedlabel
  {
    color: rgba(183, 247, 255, 1);
  }
  
  
  
  #frostyboar
  {
    border: 3px solid #7575B1;
    border-radius: 10px;
    padding: 2px;
  }
  
  
  .mountimagebox
  {
    display: inline-block;
    float: right;
    /* space for display image plus 15px extra in between */
    padding-top: 415px;
    width: 400px;
    position: relative;
    text-align: center;
    margin: 10px 0 0 30px;
  }
  
  .mountimagebox .imageboxtitle
  {
    display: block;
    font-weight: bold;
    font-size: 85%;
    color: #244DA2;
  }
  
  .mountimagebox #imagebox-new .imageboxtitle,
  .imagebox-new .imageboxtitle
  {
    color: #741101;
  }
  
  .mountimagebox #imagebox-old .imageboxtitle,
  .imagebox-old .imageboxtitle
  {
    color: #46484E;
  }
  
  
  .mountimagebox-sub
  {
    display: block;
    text-align: center;
  }
  
  .mountimagebox input
  {
    display: none;
  }
  
  .mountimagebox img.mountmini
  {
    padding: 2px;
    width: 50px;
    border: 2px solid #8C8989;
    margin-left: 5px;
    opacity: 0.8;
    display: inline;
    border-radius: 4px;
  }
  
  .mountimagebox #imagebox-new img.mountmini,
  .imagebox-new img.mountmini
  {
    border-color: #A4837F;
  }
  
  .mountimagebox img.mountmini:first-of-type
  {
    margin-left: 0;
  }
  
  .mountimagebox input:checked + label img.mountmini
  {
    border: 2px solid #5679C2;
    opacity: 1;
  }
  
  .mountimagebox #imagebox-new input:checked + label img.mountmini,
  .imagebox-new input:checked + label img.mountmini
  {
    border: 2px solid #8D3A2C;
  }
  
  .mountimagebox #imagebox-old input:checked + label img.mountmini,
  .imagebox-old input:checked + label img.mountmini
  {
    border: 2px solid #484A4E;
  }
  
  
  .mountimagebox .mountimage
  {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px;
  /*
    border-radius: 20px;
    border: 3px solid #919DAA;
    box-shadow: 0px 0px 3px 2px #BFC5CB;
  */
  }
  
  .mountimagebox input ~ .mountimage
  {
    opacity: 0;
    transition-property: all;
    transition-duration: 500ms;
    -moz-transition-property: all;
    -moz-transition-duration: 500ms;
    -webkit-transition-property: all;
    -webkit-transition-duration: 500ms;
    -o-transition-property: all;
    -o-transition-duration: 500ms;
  }
  
  .mountimagebox input:checked + label + .mountimage
  {
    opacity: 1;
  }
  
  .mountimagebox#flippy input:not(:checked) + label + img.mountimage
  {
    z-index: -1;
    display: inline;
    position: absolute;
    top: 520px;
    width: 50px;
    height: 50px;
    opacity: 0;
    transition-property: all;
    transition-duration: 500ms;
    -moz-transition-property: all;
    -moz-transition-duration: 500ms;
    -webkit-transition-property: all;
    -webkit-transition-duration: 500ms;
    -o-transition-property: all;
    -o-transition-duration: 500ms;
  }
  
  .mountimagebox#flippy input + label
  {
    display: inline;
    position: absolute;
    top: 520px;
  }
  
  .mountimagebox#flippy input:checked + label + img.mountimage
  {
    z-index: 1;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    transition-property: all;
    transition-duration: 500ms;
    -moz-transition-property: all;
    -moz-transition-duration: 500ms;
    -webkit-transition-property: all;
    -webkit-transition-duration: 500ms;
    -o-transition-property: all;
    -o-transition-duration: 500ms;
  }
  
  .mountimagebox#flippy input#mountpic0:not(:checked) + label + img.mountimage,
  .mountimagebox#flippy input#mountpic0 + label
  {
    left: 57px;
  }
  
  .mountimagebox#flippy input#mountpic1:not(:checked) + label + img.mountimage,
  .mountimagebox#flippy input#mountpic1 + label
  
  {
    left: 123px;
  }
  
  .mountimagebox#flippy input#mountpic2:not(:checked) + label + img.mountimage,
  .mountimagebox#flippy input#mountpic2 + label
  
  {
    left: 189px;
  }
  
  .mountimagebox#flippy input#mountpic3:not(:checked) + label + img.mountimage,
  .mountimagebox#flippy input#mountpic3 + label
  
  {
    left: 255px;
  }
  
  .mountimagebox#flippy input#mountpic4:not(:checked) + label + img.mountimage,
  .mountimagebox#flippy input#mountpic4 + label
  
  {
    left: 321px;
  }
  
  .mountimagebox#flippy input#mountpic5:not(:checked) + label + img.mountimage,
  .mountimagebox#flippy input#mountpic5 + label
  
  {
    left: 387px;
  }
  
  .mountimagebox#flippy label
  {
    display: inline;
  }
  
  .mountimagebox#flippy2 .mountimage
  {
    position: absolute;
    top: 250px;
    left: 250px;
    width: 0;
    height: 0;
  }
  
  .mountimagebox#flippy2 input:checked + label + .mountimage
  {
    opacity: 1;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
  }
  
  body#mounttest #wrapper
  {
    min-width: 1290px;
  }
  
  .mount#mounttest img.mount
  {
    margin: 0 0 0 20px;
  }
  
  .mount#mounttest span#mounttopsection
  {
    display: inline;
  }
  
  body#mounttest #mountinfo1
  {
    display: inline-block;
  }
  
  
  
  
  #usercollection h3
  {
    margin: 30px 0px 30px;
    color: #3E5A7D;
  }
  
  #usercollection h3 span.headingsub
  {
    font-size: 80%;
  }
  
  #usercollection p.update
  {
    font-size: 80%;
    margin-top: 0;
    color: #5F64CE;
  }
  
  
  
  #usercollection .flexigallery div.thumbnail img.thumbimage
  {
    width: 90px;
    margin-bottom: 4px;
  }
  
  #usercollection .flexigallery div.thumbnail
  {
    width: 120px;
    font-size: 68%;
    line-height: 105%;
    margin-bottom: 8px;
  }
  
  #usercollection .flexigallery .thumblabel
  {
    margin-left: -1px;
    padding: 0 8px;
  }
  
  #usercollection .flexigallery div.thumbnail a:link,
  #usercollection .flexigallery div.thumbnail a:visited
  {
    text-shadow: 2px 2px 15px #B6B3CC;
  }
  
  
  .account#user h2
  {
    color: #1F1F99;
  }
  
  .account#user #accountInfo
  {
    display: table;
    margin-top: 25px;
    color: #0D2B51;
  }
  
  .account#user #accountInfo .accountRow
  {
    display: table-row;
  }
  
  .account#user #accountInfo .accountRow .accountItem
  {
    display: table-cell;
    padding-right: 30px;
    padding-bottom: 5px;
  }
  
  .account#user #accountCollectionLink a:link,
  .account#user #accountCollectionLink a:visited
  {
    color: #1457AB;
  }
  
  .account#user #accountCollectionLink a:hover,
  .account#user #accountCollectionLink a:active
  {
    color: #116EE3;
  }
  
  .account#user table.characters th
  {
    border-bottom: 3px solid #3B71B1;
    font-variant: small-caps;
    color: rgb(38, 77, 186);
    padding: 5px 15px 1px 15px;
    font-size: 90%;
    background-color: white;
    text-align: left;
    text-shadow: 0px 0px 4px rgb(205, 200, 237);
  }
  
  
  
  .account#user table.characters th.updateChar
  {
    border-radius: inherit;
  }
  
  .account#user table.characters td.updateChar
  {
    background-color: inherit;
  }
  
  
  .account#user table.characters tr:nth-of-type(2n) td.updateChar
  {
    background-color: inherit;
  }
  
  .account#user table.characters tr:nth-of-type(2n)
  {
  /*  background: transparent linear-gradient(#FFF, #DDE6ED) repeat scroll 0% 0%; */
  /*  box-shadow: none; */
  }
  
  .account#user table.characters th#charNameHeader,
  .account#user table.characters th#mountNumHeader
  {
    font-size: 110%;
  }
  
  .account#user table.characters td
  {
    padding: 10px 25px;
  }
  
  .account#user table.characters td.armoryIconCell
  {
    padding-right: 3px;
    padding-left: 10px;
  }
  
  .account#user table.characters td.charName,
  .account#user table.characters th#charNameHeader
  {
    padding-left: 7px;
    line-height: 110%;
  }
  
  .account#user table.characters span.charRace,
  .account#user table.characters th span.charData
  {
    display: block;
  }
  
  .account#user table.characters td span.charData
  {
    font-size: 80%;
  }
  
  
  .account#user table.characters tr
  {
    border-bottom: 1px solid white;
    background-color: rgb(228, 234, 245);
    box-shadow: none;
  }
  
  .mount .collectionwidget
  {
    margin: 5px 0 10px 9px;
  }
  
  .mount .collectionwidgetlist
  {
    margin-left: 9px;
  }
  
  .mount #content .collection_list
  {
    margin-left: 18px;
    line-height: 2.2em;
    display: table;
  }
  
  .mount #content .collection_list li
  {
    list-style-type: none;
    margin-left: 0;
    display: table-row;
  }
  
  .mount #content .collection_list li label
  {
    display: table-cell;
  }
  
  .mount #content .collection_list li label span.widget_realm
  {
    font-size: 11px;
  }
  
  .mount #content .collection_list li div.widget_data
  {
    display: table-cell;
    padding-left: 5px;
  }
  
  .mount input#collectionwidgettoggle ~ .collection_list,
  .mount input#collectionwidgettoggle
  {
    display: none;
  }
  
  .mount input#collectionwidgettoggle + label
  {
    color: #252732;
    text-align: right;
  }
  
  .mount input#collectionwidgettoggle:checked ~ .collection_list
  {
    display: inline-block;
  }
  
  .mount input#collectionwidgettoggle + label .closedwidget,
  .mount input#collectionwidgettoggle:checked + label .openwidget
  {
  /*  width: 15px; */
    display: inline-block;
  }
  
  .mount input#collectionwidgettoggle:checked + label .closedwidget,
  .mount input#collectionwidgettoggle + label .openwidget
  {
    display: none;
  }
  
  .mount input#collectionwidgettoggle + label .closedwidget
  {
    font-size: 12px;
  }
  
  .mount input#collectionwidgettoggle:checked + label .openwidget
  {
    font-size: 12px;
  }
  
  .mount img.factionrestrictionicon
  {
    height: 1.1em;
    display: inline-block;
    margin-right: 0.1em;
    vertical-align: middle;
  }
  
  .mount img.factionrestrictionicon.alliance
  {
    filter: brightness(140%);
  }
  
  .mount img.factionrestrictionicon.horde
  {
    filter: brightness(130%);
  }
  
  
  /* TABS (added early 2015) */
  
  .wcmtabs
  {
    position: relative;
    margin-top: 40px;
    border-bottom: 3px solid #3B71B1;
  }
  
  .wcmtabs .wcmtabsinput
  {
    display: none;
  }
  
  .wcmtabs .wcmtabslabel
  {
    padding: 2px 15px 2px;
    border-radius: 4px 4px 0px 0px;
    opacity: 0.7;
    font-variant: small-caps;
    font-size: 110%;
    color: white;
    background: #768699;
    filter: grayscale(50%);
  }
  
  .wcmtabs .wcmtabslabel:first-of-type
  {
    margin-left: 0;
  }
  
  .wcmtabs .wcmtabsinput:checked + .wcmtabslabel
  {
    opacity: 1;
    color: white;
    filter: none;
    background: linear-gradient(#84B9EC, #3B71B1);
    background: -moz-linear-gradient(#84B9EC, #3B71B1);
    background: -webkit-linear-gradient(#84B9EC, #3B71B1);
    background: -o-linear-gradient(#84B9EC, #3B71B1);
  }
  
  .wcmtabsection
  {
    width: 100%;
    float: left;
    margin-bottom: 50px;
  }
  
  .wcmtabs .wcmtabsinput ~ .wcmtabsection
  {
    display: none;
  }
  
  .wcmtabs .wcmtabsinput:checked + .wcmtabslabel + .wcmtabsection
  {
    display: block;
  }
  
  
  
  /* TEST OF NEW STYLES - HOME PAGE */
  
  
  .homenew
  {
    display: block;
  /*  border: 1px solid #5988B0; */
  /*  box-shadow: 0px 0px 0px 1px #3A6890; */
    border-radius: 5px;
    margin-bottom: 20px;
  }
  
  
  .homenew h2
  {
    font-size: 185%;
    font-weight: normal;
    font-family: sans-serif;
    color: #4949D4;
    text-align: left;
    margin: 15px;
    padding: 5px 10px;
    text-shadow: 0px 0px 1px #8481B1;
    display: inline-block;
  }
  
  .homenew h2 span.headersuffix
  {
    font-size: small;
    display: block;
  }
  
  .homenew h3
  {
    font-variant: small-caps;
    margin: 1em 0;
    text-align: left;
    font-size: 90%;
    color: rgb(40, 126, 189);
  }
  
  .homenew .updatestring
  {
    display: inline;
  }
  
  
  .homenew .rightfloat
  {
    float: right;
    margin-left: 5px;
    margin-right: -15px;
    margin-top: -1em;
  }
  
  .homenew .leftfloat
  {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
    margin-top: -1em;
  }
  
  .homenew #news
  {
    color: rgb(12, 21, 42);
  }
  
  .homenew #news img
  {
    display: inline;
    box-shadow: 0px 0px 5px rgb(154, 161, 182);
    border: 2px solid rgb(175, 180, 207);
    border-radius: 6px;
  }
  
  .homenew #news ul
  {
    margin: 5px 0 15px 20px;
  }
  
  .homenew #news ul,
  .homenew #news li
  {
    list-style-type: circle;
    line-height: 175%;
  }
  
  .homenew #meta
  {
    margin: 0;
    padding: 0;
    font-size: 90%;
  }
  
  .homenew #award
  {
    clear: both;
    font-size: 90%;
    line-height: 125%;
  }
  
  .homenew table.data,
  .homenew table.data th,
  .homenew table.data td
  {
    border: 1px solid black;
  }
  
  
  .homenew a.newsimage
  {
    display: inline-block;
  }
  
  .homenew a.newsimage img
  {
    display: inline-block;
  }
  
  .homenew div.newsitem
  {
    line-height: 165%;
    margin: 0 30px 25px; /*temp */
    clear: both;
    font-size: 90%;
  }
  
  .homenew div.newsitem img
  {
    margin-left: 35px; /*temp */
  }
  
  .homenew div.newstext
  {
  /*  margin: 0 115px; */
    margin: 0 30px 30px 45px;
    display: list-item;
    list-style-position: inside;
    padding-left: 120px; /*temp */
  }
  
  .homenew div.newsitem:last-of-type
  {
  }
  
  .homenew .newsheader
  {
    font-weight: bold;
    color: #247AA2;
    font-variant: small-caps;
    font-size: 110%;
  }
  
  .homenew a:link,
  .homenew a:visited
  {
    color: rgb(114, 48, 90);
    font-weight: bold;
  }
  
  .homenew a:hover,
  .homenew a:active
  {
    color: #35afff;
  }
  
  .homenew .newsdivide
  {
    width: 40%;
    margin: 60px auto;
    border: 0;
    border-bottom: 4px double #6C8398;
  }
  
  .homenew .flexigallery
  {
    margin: 10px 10px 30px 20px;
    display: block;
  }
  
  .homenew .flexigallery .thumblabel
  {
    margin-left: 0;
    padding: 0 9px;
  }
  
  .homenew .flexigallery div.thumbnail
  {
    background: inherit;
  }
  
  .homenew .flexigallery div.thumbnail a:link,
  .homenew .flexigallery div.thumbnail a:visited
  {
    color: rgb(47, 46, 68);
  }
  
  .homenew .indexgallery
  {
    margin-top: 0;
  }
  
  .homenew .indexgallery:last-of-type
  {
    margin-right: 0;
  }
  
  .homenew .flexigallery div.thumbnail img.thumbimage
  {
    box-shadow: 3px 3px 16px #9AA1B6;
    border: 2px solid #AFB4CF;
    padding: 1px;
    margin: 8px 10px;
    border-radius: 8px;
    width: 120px;
  
  }
  
  .homenew .flexigallery div.thumbnail img.upcoming
  {
    top: 12px;
    left: 14px;
    height: 22px;
  }
  
  .homenew .flexigallery div.thumbnail img.upcoming.bfa
  {
    top: 2px;
    left: 1px;
    height: 16px;
  }
  
  .homenew .wcmtabs
  {
    text-align: left;
    border-bottom: 3px solid rgb(78, 84, 155);
    margin-top: 0;
  }
  
  .homenew .wcmtabsection
  {
    margin-top: 5px;
    background: linear-gradient(#F8F8F8, #B1B2C6) repeat scroll 0% 0%;
  }
  
  .homenew .wcmtabs .wcmtabslabel
  {
    border: 1px solid #C6C6C6;
    border-bottom: none;
    margin: 0;
    background: transparent linear-gradient(#FFF, #AEAEAE) repeat scroll 0% 0%;
    opacity: 0.8;
    padding-bottom: 1px;
  }
  
  .homenew .wcmtabs .wcmtabsinput:checked + .wcmtabslabel
  {
    border: none;
    background: transparent linear-gradient(#B6B8E6, #4E549B) repeat scroll 0% 0%;
  }
  
  img.indexheadinglogo
  {
    display: inline-block;
    height: 25px;
    vertical-align: middle;
    margin-right: 0.2em;
  }
  
  .sideadleft,
  .sideadright,
  .topad
  {
    display: inline-block;
    vertical-align: top;
    border: 2px solid #EEE;
    border-radius: 8px;
    background-color: white;
  }
  
  
  .sideadright
  {
    float: right;
  }
  
  .topad
  {
    float: right;
  }
  
  
  
  #navbar
  {
    position: fixed;
    top: 0;
    width: 100%;
    height: 5em;
    background-color: #002C5D;
    color: #FDFDFD;
    z-index: 9999;
  }
  
  #navbar #navmenu
  {
    list-style: outside none none;
    display: inline-table;
    border-collapse: collapse;
    height: 100%;
  }
  
  #navbar #navmenu:after
  {
    content: ""; clear: both;
    display: block;
  }
  
  #navbar #navmenu a:link,
  #navbar #navmenu a:visited
  {
    color: inherit;
    display: block;
  }
  
  #navbar #navmenu > li
  {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    width: 8em;
    height: 100%;
    font-size: 90%;
    border: none;
    text-align: center;
    text-align: center;
    padding: 0 2px;
  }
  
  #navbar #navmenu > li .navlabel
  {
    display: inline-block;
    line-height: 13pt;
    vertical-align: middle;
    text-align: left;
    width: -moz-min-content;
    width: -o-min-content;
    width: -webkit-min-content;
    cursor: default;
  }
  
  #navbar #navmenu li#home
  {
    width: 180px;
    border: none;
    background: none;
    background-color: white;
    padding: 0;
  }
  
  #navbar #navmenu li ul
  {
    display: block;
    visibility: hidden;
    position: absolute;
    text-align: left;
    padding: 0;
    left: 0;
    line-height: 38px;
    font-size: 9pt;
  }
  
  #navbar #navmenu li ul li
  {
    float: none;
    border-bottom: 1px solid #708199;
    position: relative;
    display: block;
    width: 100%;
    background-color: inherit;
    line-height: 38px;
    padding: 0 10px;
  }
  
  #navbar #navmenu li ul li.menusubtitle
  {
    font-style: italic;
    color: #FFF86C;
  }
  
  #navbar #navmenu li:hover
  {
    background-color: #7D6DA7;
  }
  
  #navbar #navmenu li:hover ul
  {
    visibility: visible;
    background-color: #4C5F95;
    width: 100%;
  }
  
  #navbar #navmenu li:hover ul li
  {
    visibility: visible;
  }
  
  #navbar #navmenu .headermenuarrow
  {
    font-size: 8pt;
    margin-left: 3px;
    vertical-align: top;
  }
  
  #undernavbar
  {
    margin-top: 25px;
    height: 160px;
    width: 100%;
  /*  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%), repeat 0 0, url("/images/WCMBanner.jpg") repeat 0 0; */
    background-repeat: repeat-x;
    background-size: auto 100%;
  }
  
  .homenew #searchbox
  {
    display: inline;
  }
  
  #WCMBody
  {
  /*  background-color: #C5D4EF; */
    text-align: center;
    display: inline-block;
  }
  
  #WCMContainer
  {
    display: block;
    text-align: center;
    margin: 5em auto;
  }
  
  #WCMHeader
  {
    display: inline-block;
    text-align: left;
    width: 100%;
    margin-bottom: 20px;
  /*  background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%) repeat scroll 0% 0%, none repeat scroll 0px 0px, transparent url("/images/WCMBanner.jpg") repeat scroll 0px 0px; */
  }
  
  #WCMSplash
  {
    display: inline-block;
  }
  
  #WCMBanner
  {
    z-index: -100;
    height: 160px;
  }
  
  #WCMLogo
  {
    display: inline-block;
    line-height: 7pt;
  }
  
  #WCMLogo img
  {
    height: 90px;
    display: block;
  }
  
  #sublogo
  {
    display: block;
    font-weight: bold;
    color: #20499C;
    font-size: 8pt;
    margin-left: 6px;
  }
  
  #WCMLogo #sublogo #headerbannerimage
  {
    background-color: red;
    display: block;
  }
  #WCMHeader .randommountimage
  {
    display: inline-block;
    width: 100px;
    vertical-align: top;
  }
  
  #WCMContent
  {
    display: inline-block;
  }
  
  
  #headersearchbar
  {
    border: 2px solid #8890AA;
    border-radius: 5px;
    float: right;
    font-weight: normal;
    background: #E7EAEF;
    height: 20px;
    margin-top: 15px;
    display: inline-block;
    clear: both;
    padding: 1px 3px;
  }
  
  #headersearchbar #searchbutton
  {
    width: 18px;
    vertical-align: text-bottom;
  }
  
  #headersearchbar #term
  {
    background-color: inherit;
    color: #030417;
    border: none;
    padding-left: 4px;
    vertical-align: text-top;
    width: 130px;
  }
  
  #twitterbanner
  {
    display: block;
    margin-left: 15px;
    margin-top: 20px;
    float: right;
    clear: both;
  }
  
  
  /* Wowhead tooltip colour changes */
  
  /* the following is important for changing common (white) quality item tooltips to black, otherwise the Wowhead code will recolour them to white on our white background */
  
  a.q1
  {
    font-weight: bold;
    color: black !important;
  }
  
  
  /* FACTION LOGO TEST */
  
  img.mountthumbfactionicon.nameleft
  {
    margin-right: 0.1em;
  }
  
  img.mountthumbfactionicon.nameright
  {
    margin-left: 0.15em;
  }
  
  img.mountthumbfactionicon.thumblogo
  {
    display: block;
    position: absolute;
    filter: brightness(140%);
    height: 21px;
  }
  
  img.mountthumbfactionicon.thumblogo.imagebr1
  {
    bottom: -0.5em;
    right: 0.5em;
  }
  
  img.mountthumbfactionicon.thumblogo.imagebr2
  {
    bottom: 1px;
    right: 5px;
  }
  
  img.mountthumbfactionicon.thumblogo.imagebr3
  {
    bottom: 2px;
    right: 10px;
  }
  
  img.mountthumbfactionicon.thumblogo.imagebr4
  {
    bottom: 3px;
    right: 11px;
  }
  
  img.mountthumbfactionicon.thumblogo.imagetr1
  {
    top: 1px;
    right: 5px;
  }
  
  img.mountthumbfactionicon.thumblogo.imagetr2
  {
    top: 4px;
    right: 12px;
  }
  
  img.mountthumbfactionicon.thumblogo.imagebl1
  {
    bottom: 4px;
    left: 12px;
  }
  
  img.newsimage.standalone
  {
    margin-left: auto;
    margin-right: auto;
  }
  
  .companionrealmoption
  {
    display: none;
    visibility: hidden;
  }
  
  .companionregionselector#charRegion-US:checked ~ .companionrealmselector > .companionrealmoption.US,
  .companionregionselector#charRegion-EU:checked ~ .companionrealmselector > .companionrealmoption.EU,
  .companionregionselector#charRegion-KR:checked ~ .companionrealmselector > .companionrealmoption.KR,
  .companionregionselector#charRegion-TW:checked ~ .companionrealmselector > .companionrealmoption.TW,
  .companionregionselector#charRegion-CN:checked ~ .companionrealmselector > .companionrealmoption.CN
     
  {
    display: block;
    visibility; visible;
  }
  
  .collectionfilterlogo
  {
    display: inline;
    height: 18px;
    vertical-align: inherit;
    margin-bottom: 3px;
    margin-right: 2px;
    opacity: 0.8;
  }
  
  .collectionfilterlogo.alliance
  {
    filter: brightness(140%);
  }
   
  .collectionfilterlogo.horde
  {
    filter: brightness(130%);
  }
  
  .collectionfilterlogo.class,
  .collectionfilterlogo.profession
  {
    
  }
  
  .collectionfilterlabel
  {
    margin-left: 0.2em;
    font-size: 70%;
    color: white;
    background-color: #5358AC;
    padding: 0.2em 0.4em;
    border-radius: 5px;
    border: 1px solid #D8D8FF;
    box-shadow: 0 0 0px 1px #D3D5F0;
    display: inline-block;
    white-space: nowrap;
    height: 18px;
    margin-bottom: 0.4em;
    vertical-align: middle;
    line-height: 18px;
    -webkit-text-size-adjust: none;
  }
  
  .collectionfilterlabel.faction
  {
    background-color: #7b559b;
  }
  
  .collectionfilterlabel.class
  {
  }
  
  .collectionfilterlabel.race
  {
    background-color: #ac5151;
  }
  
  .collectionfilterlabel.profession
  {
    background-color: #b36f4f;
  }
  
  .collectionfilterlabel::before
  {
    margin-right: 0.2em;
    display: inline-block;
    width: 1em;
  }
  
  input.collectionfilter:not(:checked) + .collectionfilterlabel::before
  {
    content: "\2717";
    color: #e10e0e;
  }
  
  input.collectionfilter:checked + .collectionfilterlabel::before
  {
    content: "\2713";
    color: #70fd94;
  }
  
  input.collectionfilter
  {
    margin-left: 1em;
    font-size: 70%;
    display: none;
  }
  
  input.collectionfilter#show-restricted-alliance:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-alliance,
  input.collectionfilter#show-restricted-horde:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-horde,
  input.collectionfilter#show-restricted-deathknight:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-deathknight,
  input.collectionfilter#show-restricted-demonhunter:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-demonhunter,
  input.collectionfilter#show-restricted-hunter:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-hunter,
  input.collectionfilter#show-restricted-mage:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-mage,
  input.collectionfilter#show-restricted-monk:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-monk,
  input.collectionfilter#show-restricted-paladin:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-paladin,
  input.collectionfilter#show-restricted-priest:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-priest,
  input.collectionfilter#show-restricted-rogue:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-rogue,
  input.collectionfilter#show-restricted-shaman:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-shaman,
  input.collectionfilter#show-restricted-warlock:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-warlock,
  input.collectionfilter#show-restricted-warrior:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-warrior,
  input.collectionfilter#show-restricted-engineering:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-engineering,
  input.collectionfilter#show-restricted-blacksmithing:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-blacksmithing,
  input.collectionfilter#show-restricted-leatherworking:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-leatherworking,
  input.collectionfilter#show-restricted-tailoring:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-tailoring,
  input.collectionfilter#show-restricted-alchemy:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-alchemy,
  input.collectionfilter#show-restricted-jewelcrafting:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-jewelcrafting,
  input.collectionfilter#show-restricted-draenei:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-draenei,
  input.collectionfilter#show-restricted-darkirondwarf:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-darkirondwarf,
  input.collectionfilter#show-restricted-dwarf:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-dwarf,
  input.collectionfilter#show-restricted-tauren:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-tauren,
  input.collectionfilter#show-restricted-bloodelf:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-bloodelf,
  input.collectionfilter#show-restricted-warrior:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-warrior,
  input.collectionfilter#show-restricted-zandalaritroll:not(:checked) ~ .wcmtabsection .flexigallery .thumbnail.restricted-to-zandalaritroll
  {
    display: none;
  }
  
  .collectionfilterdivide
  {
    margin-bottom: 2em;
    border: none;
  }
  
  h4.collectionfilterheading
  {
    margin: 0;
    margin-bottom: 0.4em;
    font-size: 70%;
  }
  
  .collectionarea .wcmtabs
  {
    margin-top: 1em;
  }
  
  .petLookOwned
  {
    color: green;
  }
  
  .petLookNotOwned
  {
    color: red;
  }