/* ********* */
/* RESET CSS */
/* ********* */

/* First blob here is derived from YUI's "reset" CSS file v 2.5.0 */

html
{
  color: #000;
  background-color: #FFF;
}

html.classic
{
  color: #EFD3AE;
  background-color: #313E30;
}

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 */

body {font-size:100%;}
input,select {font-size: 90%;}
h1,h2,h3,h4,h5,h6 {font-weight:bold;}
strong, th {font-weight:bold;}
em {font-style:italic;}
ul li {list-style-type:disc;}
ol li {list-style-type:decimal;}



/*

  COLOR CHART
  outside background:     #809680 (green-grey)
  page background:        #dcffdc (very pale mint)
  navigation background:  #bbffbb (bright mint)
  borders:                #232D23 (ye olde hunter green)
  text:                   black
  hover links:            green

*/

/* Wowhead link colours */
.q1 /* common / white links */
{
  text-shadow: 0 0 3px #1a3c1a;
}

.q3 /* rare / blue links */
{
  text-shadow: 0px 0px 1px #a5d3ff;
}

.q4 /* epic / purple links */
{
  text-shadow: 0 0 1px #eeeeee40;
}


/* STRUCTURAL ELEMENTS */

html
{
  /* background: #809680; */
  background: #85b385;
}

body
{
  color: black;
  /* font-family: Verdana, sans-serif; */
  font-family: Arial, sans-serif;
  line-height: 1.75;
}

/*
#wrapper
{
  position: relative;
  width: 960px;
  margin: 0 auto;
  border: 1px solid #232D23;
  border-width: 1px 5px;
  background: #dcffdc;
  font-size: 0.9em;
}
*/

@font-face
{
/*
  font-family: 'Warcraft';
  src: url('/fonts/LifeCraft_Font.ttf') format("truetype");
*/
}

#content
{
  float: right;
  width: 670px;
  /* margin: 15px 45px 75px 30px; */
  margin: 15px 45px 140px 30px;
  /* Total width: 745px */
}

#sidebar
{
  position: relative;
  float: right;
  width: 200px;
  margin: 15px;
  margin-right: 0;  /* We let the content block have the space. */
  /* Total width: 215px */
}

#footer
{
  position: relative;
  clear: both;
}


.petopia_header.classic
{
}

.petopia_header_image.classic
{
  height: 200px;
  margin: 0.5em auto 1em;
}



/* ADS */

#ad_menu_square
{
  display: none;
  width: 200px;
  height: 200px;
}
.js #ad_menu_square { display: block; }

.ad_content_square
{
  display: none;
  float: right;
  margin-left: 30px;
  width: 300px;
  height: 250px;
}
.js .ad_content_square { display: block; }

#ad_navigation_skyscraper
{
  position: absolute;
  bottom: -1500px;
  left: 20px;
  width: 160px;
  height: 600px;
}

#ad_navigation_skyscraper2
{
  position: absolute;
  bottom: -3500px;
  left: 20px;
  width: 160px;
  height: 600px;
}

#ad_footer_short
{
  position: absolute;
  top: -75px;
  right: 45px;
  width: 468px;
  height: 60px;
}

#ad_footer_leaderboard
{
  display: none;
  clear: both;
  margin: 15px 0 15px 187px;
  width: 728px;
  height: 90px;
}
.js #ad_footer_leaderboard { display: block; }

#ad_footer_gallery
{
  display: none;
  margin: 0 0 30px -58px;
  width: 728px;
  height: 90px;
}
.js #ad_footer_gallery { display: block; }

ul.nobullet li
{
  list-style-type: none;
}


/* HEADER, FOOTER & MENU*/

/* Google Search */
#cse-search-form
{
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 250px;
  padding-top: 15px;
}
.js #cse-search-form { display: block; }
#cse-search-form table, #cse-search-form table td  { border: 0; }

.cse .gsc-branding, .gsc-branding { display: none; }
input.gsc-input { padding: 3px 0; }
input.gsc-search-button { padding: 3px; }

/* top menu block */
#featured
{
  margin-bottom: 15px;
  padding-bottom: 15px;
}


/* main menu block */
#navigation { margin-top: 15px; }

#twitterwidget
{
  position: absolute;
  top: 80px;
  right: 5px;
}

.menu
{
  padding: 0 19px;    /* +1px for the borders. */
  border: 1px solid #232D23;
  background: #bbffbb;
  line-height: 1.5;
}

.menu h3 { margin-top: 15px; }

.menu ul, .menu ul li
{
  margin: 0;
  list-style-type: none;
}
.menu ul li { padding-left: 10px; }
.menu ul ul li { padding-left: 30px; }

.menu p.update
{
  font-size: 75%;
  text-align: center;
}

.menu p.forums
{
  margin: 20px 0;
  padding: 10px;
  border: 1px dotted green;
  text-align: center;
  font-size: 85%;
}

.menu h3#legionindex
{
  color: #2A8D11;
}

/* If the body's class matches the navigation link's class, then we are on a page that
   corresponds to this link, and the link should have a nice little arrow in front of it.
   */

body#menu_id_prelegion .menu a.menu_id_prelegion,
body#menu_id_legion .menu a.menu_id_legion,
body#menu_id_wod .menu a.menu_id_wod,
body#menu_id_wod_families .menu a.menu_id_wod_families,
body#menu_id_wod_looks .menu a.menu_id_wod_looks,

body#menu_id_mop .menu a.menu_id_mop,
body#menu_id_patch51 .menu a.menu_id_patch51,
body#menu_id_patch52 .menu a.menu_id_patch52,

body#menu_id_cataclysm .menu a.menu_id_cataclysm,
body#menu_id_patch406 .menu a.menu_id_patch406,
body#menu_id_patch41 .menu a.menu_id_patch41,
body#menu_id_patch42 .menu a.menu_id_patch42,
body#menu_id_patch43 .menu a.menu_id_patch43,

body#menu_id_browse .menu a.menu_id_browse,
body#menu_id_search .menu a.menu_id_search,
body#menu_id_gallery .menu a.menu_id_gallery,
body#menu_id_special .menu a.menu_id_special,

body#menu_id_talents .menu a.menu_id_talents,
body#menu_id_skills .menu a.menu_id_skills,

body#menu_id_starter .menu a.menu_id_starter,
body#menu_id_choose .menu a.menu_id_choose,
body#menu_id_callpet .menu a.menu_id_callpet,
body#menu_id_stable .menu a.menu_id_stable,
body#menu_id_diet .menu a.menu_id_diet,

body#menu_id_starterchart .menu a.menu_id_starterchart,
body#menu_id_dietchart .menu a.menu_id_dietchart,
body#menu_id_stablelist .menu a.menu_id_stablelist,

body#menu_id_links .menu a.menu_id_links
{
  background-image: url(arrow.gif);
  background-repeat: no-repeat;
  background-position: left center;
  margin-left: -10px;
  padding-left: 10px;
}

body#menu_id_wod .menu a.menu_id_wod:hover,
body#menu_id_wod_families .menu a.menu_id_wod_families:hover,
body#menu_id_wod_looks .menu a.menu_id_wod_looks:hover,

body#menu_id_mop .menu a.menu_id_mop:hover,
body#menu_id_patch51 .menu a.menu_id_patch51:hover,
body#menu_id_patch52 .menu a.menu_id_patch52:hover,

body#menu_id_cataclysm .menu a.menu_id_cataclysm:hover,
body#menu_id_patch406 .menu a.menu_id_patch406:hover,
body#menu_id_patch41 .menu a.menu_id_patch41:hover,
body#menu_id_patch42 .menu a.menu_id_patch42:hover,
body#menu_id_patch43 .menu a.menu_id_patch43:hover,

body#menu_id_browse .menu a.menu_id_browse:hover,
body#menu_id_search .menu a.menu_id_search:hover,
body#menu_id_gallery .menu a.menu_id_gallery:hover,
body#menu_id_special .menu a.menu_id_special:hover,

body#menu_id_talents .menu a.menu_id_talents:hover,
body#menu_id_skills .menu a.menu_id_skills:hover,

body#menu_id_starter .menu a.menu_id_starter:hover,
body#menu_id_choose .menu a.menu_id_choose:hover,
body#menu_id_callpet .menu a.menu_id_callpet:hover,
body#menu_id_stable .menu a.menu_id_stable:hover,
body#menu_id_diet .menu a.menu_id_diet:hover,

body#menu_id_starterchart .menu a.menu_id_starterchart:hover,
body#menu_id_dietchart .menu a.menu_id_dietchart:hover,
body#menu_id_stablelist .menu a.menu_id_stablelist:hover,

body#menu_id_links .menu a.menu_id_links:hover
{
  background-image: url(arrow_hover.gif);
}

#footer p
{
  margin: 0 45px;
  padding: 10px;
  padding-top: 3px;
  border-top: 1px dotted #232D23;
  font-size: 75%;
  text-align: center;
}



/* GENERAL FORMATTING */

h1 { font-size: 125%; }
h2 { font-size: 110%; }
h3 { font-size: 100%; }

h1.icon,
h2.icon
{
  margin-bottom: 30px;  /* leaves room for the icon */
  border-bottom: 1px solid #232D23;
}

h1.icon img,
h2.icon img
{
  display: inline;
  margin: 0 5px -24px 0;
}

p { margin: 5px 0 15px 0; }
ul, ol { margin: 5px 0 15px 45px; }
blockquote
{
  margin: 15px 45px;
  font-style: italic;
}

input[type=submit],
input[type=button]
{
  padding: 2px 4px;
}


/*
a:link, a:visited { color: black; }
a:hover, a:active { color: green; }
*/

a:link,
a:visited
{
  color: #1d591d;
  text-decoration: none;
  font-weight: bold;
}

a:hover,
a:active
{
  color: #05c905;
}

.petopia_wrapper.classic a,
.petopia_wrapper.classic a:visited
{
  color: #c2ff80;
  font-weight: inherit;
}

.petopia_wrapper.classic a:hover,
.petopia_wrapper.classic a:active
{
  color: #ffbe87;
}


a img { border: 0; }

img { display: block; }
img.inline
{
  display: inline;
  vertical-align: middle;
  margin-top: -4px;
  margin: 0;
  padding: 0;
}

img.text-left
{
  float: left;
  margin-right: 15px;
}

img.text-right
{
  float: right;
  margin-left: 15px;
}

.warning { color: red; }
a:link.warning { color: red; }
a:visited.warning { color: red; }
a:hover.warning { color: maroon; }
a:active.warning { color: maroon; }

.note
{
  color: #36000B;
  font-size: 92%;
  line-height: 160%;
  font-style: italic;
  margin-top: 1em;
  text-align: left;
}

.note a:link,
.note a:visited
{
  color: #900A26;
  text-decoration: none;
  font-weight: bold;
}

.note a:hover,
.note a:active
{
  color: #c80a0a;
  text-decoration: none;
}


.exoticNote { color: #2a8c00; }

a:link.note { color: blue; }
a:visited.note { color: blue; }
a:hover.note { color: navy; }
a:active.note { color: navy; }

.note2 { color: maroon; }
a:link.note2 { color: maroon; }
a:visited.note2 { color: maroon; }
a:hover.note2 { color: red; }
a:active.note2 { color: red; }

.alt { background-color: #ccffcc; }
.small { font-size: 85%; }
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.nowrap { white-space: nowrap; }

.breadcrumb_top
{
  margin: 0 0 7px 0;
  font-size: 85%;
}

.breadcrumb_btm
{
  margin: 7px 0 0 0;
  font-size: 85%;
}

#beta
{
  margin-top: 0;
  font-size: 80%;
}

/* This CSS is only used within <noscript> block. In other places we use the .js trick, but for these we are using <noscript> legitimately. */

noscript p
{
  font-size: 85%;
  color: blue;
}

/* Used primarily in FAQs for the opening menu of questions. */
noscript ol
{
  margin-left: 45px;
  margin-bottom: 30px;
}

code.codebox
{
  width: 90%;
  display: block;
  margin: auto;
  background: #0005;
  padding: 1em;
  border-radius: 5px;
  border: 1px solid;
  color: white;
  font-weight: bold;
}

/* TABLES */

table,
table th,
table td { border-collapse: collapse; }
table tr.alt th { background-color: #bbffbb; }
table tr.alt td { background-color: #d2ffd2; }

/* Icons tables are optimized for a display of 6 icons across. */

table.icons
{
  margin: 15px 0;
  width: 660px;
}

table.icons td
{
  width: 110px;
  padding-bottom: 15px;
  font-size: 90%;
  text-align: center;
}
table.icons td img { margin: 0 auto; }

/* Looks tables are optimized for a display of 4 pet look thumbnails across. */

table.looks
{
  width: 668px;
  margin: 30px 0;
}

table.looks th
{
  text-align: left;
  padding: 15px 0;
}

table.looks td
{
  width: 167px;
  padding-bottom: 30px;
  vertical-align: top;
  text-align: center;
}

table.looks td img
{
  margin: 0 auto;
  margin-bottom: 2px;
}

/* Ability tables are used both for skill/talent pages, and for skill/talent tooltips. */
/* See tooltip section below for more. */

table.ability td h3 span
{
  font-size: 85%;
  font-style: italic;
  font-weight: normal;
}

table.ability td.focus,
table.ability td.cast
{
  font-style: italic;
  text-align: left;
}

table.ability td.range,
table.ability td.cooldown
{
  font-style: italic;
  text-align: right;
}

table.ability_details,
table.ability_details tr
{
  border: 1px solid #232D23;
  vertical-align: top;
}

/* Overrides details outer border. */
table.ability_details table.ability,
table.ability_details table.ability tr
{
  border: 0;
}

table.ability_details table.ability td
{
  width: 596px;
  padding: 0;
  padding-right: 20px;
}

table.ability_details table.ability td.icon
{
  width: 64px;
  padding: 10px;
}

table.ability_details table.ability td h3 { padding-top: 10px; }
table.ability_details table.ability td.desc { padding: 5px 20px 5px 0; }

/* Data tables are multi-purpose. We can also center the text. */

table.data
{
  margin: 15px 0 20px 0;
  width: 100%;
}

table.data.narrow
{
  width: auto;
}

table.data.centered
{
  text-align: center;
}

table.data, table.data th, table.data td
{
  padding: 5px;
  border: 1px solid #232D23;
}
table.data_centered th, table.data_centered td { text-align: center; }
table.data_centered td img { margin: 0 auto; }

:root
{
  --family-color-ferocity: #a40000;
  --family-color-cunning: #159908;
  --family-color-tenacity: #1070ff;
  --family-color-ferocity-darker: #770505;
  --family-color-cunning-darker: #064100;
  --family-color-tenacity-darker: #001960;
  --family-color-ferocity-name: #2c1313;
  --family-color-cunning-name: #172f15;
  --family-color-tenacity-name: #161d36;
}

a.look_thumb_link
{
  text-decoration: none;
  font-weight: bold;
  color: #1b4b1b;
  font-size: 85%;
  width: 120px;
  line-height: 120%;
  text-align: center;
  margin: 10px;
}

a.look_thumb_link:hover,
a.look_thumb_link:active
{
  color: #0a8702;
}

.gallery img.look_thumb_image
{
  margin-bottom: 3px;
  margin-left: auto;
  margin-right: auto;
}

.ability_index_icon.classic,
.ability_heading_icon.classic
{
  display: inline;
  vertical-align: middle;
}

.ability_index_icon.classic
{
  width: 1.1em;
  margin-right: 0.2em;
}

.ability_heading_icon.classic
{
  width: 1.2em;
  margin-right: 0.2em;
}

h1.guide_heading
{
  font-size: 200%;
  color: #298f19;
}

h2.guide_heading
{
  color: #62453e;
}

h2.guide_heading.classic
{
  color: #EFD3AE;
}

h1.guide_heading.smaller
{
  font-size: 160%;
}


h2.guide_section_heading
{
  font-size: 180%;
  text-align: center;
}

h2.guide_subheading
{
  font-size: 130%;
}

h3.guide_heading
{
  color: #392019;
}

h3.guide_subheading
{
}

h4.guide_index_heading
{
  font-size: 110%;
}

h4.guideheading
{
  font-size: 100%;
}

h1.guide_heading.classic
{
  font-size: 200%;
  color: #FFEFD9;
}

h1.guide_heading.smaller.classic
{
  font-size: 160%;
}


h2.guide_section_heading.classic
{
  font-size: 180%;
  text-align: center;
}

h2.guide_subheading.classic
{
  font-size: 130%;
  color: #f2e482;
}

h3.guide_heading.classic
{
  font-size: 170%;
  color: #EDBF82;
  margin-top: 1em;
}

h3.guide_subheading.classic
{
  color: #fff;
}

h4.guide_index_heading.classic
{
  font-size: 110%;
  color: #fff;
}

h4.guideheading.classic
{
  font-size: 100%;
  color: #fff;
}

.guideindexsection.classic
{
  text-align: center;
}

.guideindex.abilitysource.classic
{
  column-count: 2;
}

.guideindex.classic
{
  display: inline-block;
  text-align: center;
}

.guideindex.border.classic
{
  border: 2px solid #EAE2A5;
  border-radius: 5px;
  padding: 0.5em 2em;
}

.guideindexlist.classic
{
  display: inline-block;
  text-align: left;
  vertical-align: top;
}

ul.indexlist.classic
{
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

ul.indexlist.classic li
{
  list-style-position: inside;
}

ul.indexlist.attackspeed.classic li
{
  list-style-type: square;
  color: white;
}

ul.indexlist.iconforbullet.classic li
{
  list-style-type: none;
  margin-left: 1em;
}

ul.indexlist.attackspeed.classic
{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.abilitysourcelist.classic
{
  margin-left: 0.5em;
}

.abilitysourcelist.classic li
{
  list-style-type: none;
}

.petopia_wrapper.classic a.npclink.classic,
.petopia_wrapper.classic a.npclink,classic:visited
{
/*  color: #8ef3ff; */
}

.petopia_wrapper.classic a.npclink.classic:hover,
.petopia_wrapper.classic a.npclink.classic:active
{
  color: #fff;
}

ul.abilityranklist.classic
{
  margin-left: 0.5em;
  line-height: 1.4em;
  font-size: 95%;
}

li.abilityrank.classic
{
  line-height: 1.6em;
  list-style-type: none;
  margin-bottom: 1em;
}

.abilityrankname.classic
{
  font-weight: bold;
  font-size: 110%;
  color: #fff;
}

.abilityrankdesc.classic
{

}

ul.abilityranknpclist.classic
{

}

li.abilityranknpc.classic
{
  line-height: 1.6em;
}

hr.guideheadingdivide.classic
{
  margin: 1em auto;
}

hr.guidedivide.classic
{
  margin: 2em auto;
}

.abilitymaindesc.classic
{
  font-style: italic;
  font-weight: bold;
  margin: 0.5em 0;
}

.abilitymaindesc.classic,
.abilityrankdesc.classic
{
  font-style: italic;
  color: #F9F7EB;
}

.abilityrankvariable.classic
{
  font-weight: bold;
  color: #FFEB74;
}

.abilitysourceheading.classic
{
  display: block;
  color: #fffbb3;
}

.ability_family_list_heading.classic
{
}

.ability_family_list.classic
{
}

.guideimage
{
  box-shadow: 1px 1px 5px #7d9b7d;
  border: 1px solid #f9f7eb;
}

.guideimage.inline.left
{
  float: left;
  margin-right: 1em;
  margin-top: 0.45em;
}

.guideimage.inline.right
{
  float: right;
  margin-left: 1em;
  margin-top: 0.45em;
}

.guideimage.inline.left.classic
{
  float: left;
}

.guideimage.inline.right.classic
{
  float: right;
}

.guide.classic h1.subheadingfollows
{
  line-height: 1em;
}

.guide.classic h2.subheading
{
  margin-bottom: 1.5em;
}

.guide p
{
  font-size: 90%;
  line-height: 1.6;
  display: inline-block;
}

.guide.classic p
{
  font-size: 90%;
  line-height: 1.5;
}

.guide.classic ul.abilitysourcelist.textbody.classic
{
  font-size: 90%;
  line-height: 1.6;
}

.guide .listimage
{
  display: inline;
  vertical-align: middle;
  width: 80px;
  margin-right: 0.5em;
}

.guide .listimage.large
{
  width: 140px;
}

.guide ul.hativariants
{
  font-weight: bold;
  color: #165089;
  font-size: 90%;
  column-count: 2;
  margin-left: 0;
  text-align: center;
}

.guide ul.hativariants li
{
  list-style-type: none;
  width: auto;
  border: 2px solid #a7c1c8;
  margin-bottom: 1em;
  border-radius: 5px;
  box-shadow: 1px 1px 5px #a7cfa7;
}

.warning.caveat.classic
{
  font-weight: bold;
  font-style: italic;
  color: #fff;
}

.guidebox.classic
{
  border: 2px solid #EAE2A5;
  border-radius: 5px;
  display: inline-block;
  padding: 1em 1.5em 0.5em;
  margin-bottom: 2em;
}

.guidetable.plain.classic,
.guidetable.plain.classic th,
.guidetable.plain.classic td
{
  border: 1px solid #EAE2A5;
  padding: 0.3em 0.5em;
  text-align: center;
  color: #fff;
}

.guidetable.plain.classic
{
  table-layout: fixed;
  width: 95%;
  margin-top: 1em;
}

.guidetable.plain.classic th,
.guidetable.plain.classic td
{

}

.guide.classic ul.textbody.classic
{
  font-size: 90%;
  line-height: 1.6;
}

.pagealternativenote
{
  font-size: 90%;
  line-height: 130%;
  font-weight: bold;
  font-size: 90%;
  font-variant: all-petite-caps;
  text-align: left;
}

.pagealternativenote.historical
{
  color: #262842;
}

.pagealternativenote .historicalheading
{
  font-weight: bold;
  color: #A71111;
  font-size: 115%;
}

.pagealternativenote a
{
  text-decoration: none;
  color: #0e99da !important;
}

.pagealternativenote a:hover,
.pagealternativenote a:active
{
  text-decoration: none;
  color: #70dafc !important;
}

.family_panel_container
{
  text-align: center;
}

.family_panel
{
  display: inline-grid;
  text-align: justify;
  grid-template-columns: auto auto auto auto auto auto;
  margin-top: 2.5em;
}

.family_panel.classic
{
  grid-template-columns: auto auto auto auto auto;
}

.family_panel .family_panel_item
{
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  width: 110px;
  font-size: 80%;
  padding-bottom: 15px;
}

.family_panel.classic .family_panel_item.classic
{
  width: 120px;
}

.familypanelcontainer
{
}


.familydisplayform
{
  text-align: center;
}

.familydisplayform h1
{
  text-align: justify;
  margin-top: 1em;
}

.familytypeselector
{
  margin-left: 0.5em;
}

.familytypeselectorlabel
{
  font-weight: bold;
  font-size: 90%;
}

.familytypecheckbox
{
  display: none;
}

.familytypecheckboxlabel
{
  width: 5.2em;
  height: 2.4em;
  font-weight: bold;
  font-size: 75%;
  display: inline-block;
  line-height: 2.4em;
  position: relative;
  padding: 0em 0.72em 0em 2.5em;
  border: 2px solid #fff;
  border-radius: 100px;
  color: #fff;
  background-color: #6a8494;
  box-shadow: 0 0 2px 1px #94b794;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, box-shadow .2s;
  vertical-align: middle;
  margin: 0 0.5em;
}

.familytypecheckboxlabel.classic
{
  border: 2px solid #D1B99A;
}

.familytypecheckboxlabel.spec
{
  float: left;
  margin-right: 1em;
}

.familytypecheckboxlabel.spec:first-of-type

{
  margin-left: 1.4em;
}

.familytypecheckboxlabel.exotic
{
  float: right;
}

.familytypecheckboxlabel#typelabelnonexotic
{
  margin-right: 2.6em;
  margin-left: 1em;
}

.familytypecheckboxlabel.exotic
{
  padding: 0em 2.6em 0em 0.62em;
}

.familytypecheckboxlabel#typelabelexotic
{

}

.familytypecheckboxlabel #typelabelnonexotictext
{
  white-space: normal;
  line-height: 1.1em;
}

.familytypecheckboxlabel#typelabelexotic #family_panel_exotic_label
{
}

.familytypecheckboxlabel::before
{
  content: '';
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  width: 1.55em;
  height: 1.55em;
  border: 2px solid #fff;
  border-radius: 100px;
  transition: background-color .2s;
  line-height: 1.5em;
  color: white;
  font-size: 120%;
}

.familytypecheckboxlabel.exotic::before
{
  top: 1px;
  right: 1px;
  left: unset;
}

.familytypecheckboxlabel:hover,
.familytypecheckbox:focus + .familytypecheckboxlabel
{
  box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}

.familytypecheckbox:checked + .familytypecheckboxlabel
{
  background-color: #405640;
}

.familytypecheckbox.classic:checked + .familytypecheckboxlabel.classic
{
  background-color: inherit;
  color: #C8B7A0;
}

.familytypecheckbox:checked + .familytypecheckboxlabel#typelabelexotic
{
  /* background-color: #637b63; */
}

.familytypecheckbox:checked + .familytypecheckboxlabel::before
{
  background-color: #fff;
  content: "\2713";
  font-weight: bold;
  color: white;
  text-shadow: 0 0 1px white;
}

.familytypecheckbox:checked + .familytypecheckboxlabel#typelabelferocity::before
{
  background-color: var(--family-color-ferocity);
}

.familytypecheckbox:checked + .familytypecheckboxlabel#typelabelcunning::before
{
  background-color: var(--family-color-cunning);
}

.familytypecheckbox:checked + .familytypecheckboxlabel#typelabeltenacity::before
{
  background-color: var(--family-color-tenacity);
}

.familytypecheckbox:checked + .familytypecheckboxlabel#typelabelexotic::before
{
  background-color: #bd9f00;
}

.familytypecheckbox:checked + .familytypecheckboxlabel#typelabelnonexotic::before
{
  background-color: #684c0c;
}

.familytypecheckboxsublabel
{
  font-size: 75%;
  display: block;
  bottom: -2.7em;
  right: 0.7em;
  position: absolute;
  color: #272C25;
  font-style: italic;
}

.familydisplayformlabel
{
  font-weight: bold;
  font-size: 90%;
  margin-left: 1.5em;
  color: #1e1e1e;
}

.family_panel .family_panel_item img.family_panel_image
{
  margin: 0 auto;
  background-color: #bec8be;
  border: 1px solid #7a7a7a;
  padding: 1px;
  border-radius: 9px;
}

.family_panel.classic .family_panel_item img.family_panel_image.classic
{
  border: 1px solid #444;
}

.family_panel .family_panel_item img.family_panel_image.ferocity,
.family_panel .family_panel_item img.family_panel_image.offensive
{
  background-color: var(--family-color-ferocity);
  background-image: linear-gradient(rgba(255,255,255,0) 90%, rgb(243, 53, 23));
}

.family_panel .family_panel_item img.family_panel_image.cunning,
.family_panel .family_panel_item img.family_panel_image.general
{
  background-color: var(--family-color-cunning);
  background-image: linear-gradient(rgba(255,255,255,0) 90%, rgb(140, 221, 23));
}

.family_panel .family_panel_item img.family_panel_image.tenacity,
.family_panel .family_panel_item img.family_panel_image.defensive
{
  background-color: var(--family-color-tenacity);
  background-image: linear-gradient(rgba(255,255,255,0) 80%, rgba(21, 177, 189, 0.7));
}

.family_panel .family_panel_item a
{
  text-decoration: none;
  color: #272C25;
  text-shadow: 0 0 1px #d4d4d4;
}

.family_panel.classic .family_panel_item.classic a
{
  text-decoration: none;
  color: #E4D5C0;
  text-shadow: none;
}

.family_panel .family_panel_item a .family_panel_name
{
  display: block;
  line-height: 1.2;
  margin-top: .2em;
}

.family_panel .family_panel_item.ferocity a .family_panel_name
{
  color: var(--family-color-ferocity-name);
}

.family_panel .family_panel_item.cunning a .family_panel_name
{
  color: var(--family-color-cunning-name);
}

.family_panel .family_panel_item.tenacity a .family_panel_name
{
  color: var(--family-color-tenacity-name);
}

.family_panel .family_panel_item a .family_panel_image_container
{
  position: relative;
  display: inline-block;
}

.family_panel .family_panel_item img.family_panel_image.borderreplace
{
  border: none;
  padding: 0;
}

.family_panel .family_panel_image_border
{
  position: absolute;
  left: 0;
  top: 0;
}

.family_panel_exotic_icon
{
  color: #9b0000;
  display: inline-block;
  vertical-align: middle;
  filter: hue-rotate(60deg) brightness(250%);
  margin-top: -0.1em;
}

#typelabelexotic .family_panel_exotic_icon
{
  margin-right: 0.15em;
}

.family_panel .family_panel_item a .family_panel_exotic_icon
{
  position: absolute;
  right: 15px;
  bottom: -5px;
}

.family_panel_exotic_star
{
  display: inline-block;
  vertical-align: middle;
  margin-top: -0.1em;
  width: 20px;
}

#typelabelexotic .family_panel_exotic_star
{
  margin-right: 0.15em;
}

.family_panel .family_panel_item a .family_panel_exotic_star
{
  position: absolute;
  right: -5px;
  bottom: -5px;
}

.family_panel .family_panel_item a .family_panel_bfa_logo
{
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  left: -5px;
  top: 0px;
  width: 42px;
}

.family_panel .family_panel_item a .family_panel_shadowlands_logo
{
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  left: -10px;
  top: -3px;
  width: 42px;
}


.family_panel .family_panel_item a:hover,
.family_panel .family_panel_item a:active
{
  color: green;
}

p.family_panel_key
{
  font-size: 80%;
  line-height: 80%;
  margin-right: 2em;
  text-align: right;
  vertical-align: text-bottom;
}

h1.family_panel_heading
{
  font-size: 150%;
  text-align: center;
  color: #1c531c;
  margin: 0.5em 0;
}

h1.family_panel_heading.classic
{
  color: #EFD9BC;
}

.family_panel_note
{
  font-size: 75%;
  text-align: center;
  font-style: italic;
  margin: 0 0 0.2em;
}

.familydisplayform #familydisplayformnote
{
  font-size: 70%;
  font-style: italic;
  width: 5.2em;
  margin-left: -5.2em;
  line-height: 1.1em;
  display: inline-block;
  vertical-align: middle;
  text-align: right;
}

#indexfamilynospec
{
  display: none;
  font-size: 90%;
  font-weight: bold;
  color: #0558ff;
  margin-top: 5em;
}

img.alert_image_nospec
{
  margin: auto;
  border-radius: 8px;
  box-shadow: 0 0 15px 2px #261838;
  background: #897aa1;
}

#indexfamilynospec #nospecalert
{
  color: #a40000;
  font-size: 120%;
}

#indexfamilynospec .specname
{
  text-decoration: underline;
}

input#typecheckboxferocity:not(:checked) ~ input#typecheckboxcunning:not(:checked) ~ input#typecheckboxtenacity:not(:checked) ~ #indexfamilynospec,
input#typecheckboxferocity:not(:checked) ~ input#typecheckboxcunning:not(:checked) ~ input#typecheckboxtenacity:not(:checked) ~ #indexfamilynospec
{
  display: inline-block;
}

input#typecheckboxferocity:not(:checked) ~ input#typecheckboxcunning:not(:checked) ~ input#typecheckboxtenacity:not(:checked) ~ #extrafamilyheading
{
  display: none;
}

.indexfamilynote
{
  text-align: left;
  font-style: italic;
  font-size: 90%;
  margin: 0;
  line-height: 1.6em;
}

input#typecheckboxferocity:not(:checked) ~ .family_panel_container .family_panel .family_panel_item.ferocity,
input#typecheckboxcunning:not(:checked) ~ .family_panel_container .family_panel .family_panel_item.cunning,
input#typecheckboxtenacity:not(:checked) ~ .family_panel_container .family_panel .family_panel_item.tenacity,
input#typecheckboxferocity:not(:checked) ~ .family_panel_container .family_panel .family_panel_item.offensive,
input#typecheckboxcunning:not(:checked) ~ .family_panel_container .family_panel .family_panel_item.general,
input#typecheckboxtenacity:not(:checked) ~ .family_panel_container .family_panel .family_panel_item.defensive,
input#typecheckboxexotic:not(:checked) ~ .family_panel_container .family_panel .family_panel_item.exotic,
input#typecheckboxnonexotic:not(:checked) ~ .family_panel_container .family_panel .family_panel_item.nonexotic
{
  display: none;
}


.familyheadersection
{
  display: block;
  /* text-align: center; */
}

.familyheadersection.classic
{
  text-align: center;
}

.familyheadersection.left
{
  text-align: left;
}

h1.familyheadingname
{
  display: block;
  text-align: left;
  font-size: 150%;
  color: #320808;
}

h1.familyheadingname .upcomingtag
{
  display: inline-block;
  font-size: 70%;
  color: #1c1c1c;
  text-shadow: 0 0 1px #a2a2a2;
  vertical-align: middle;
  margin-left: 1em;
  float: right;
}

h1.familyheadingname .upcomingtag .upcomingtagtext
{
  vertical-align: middle;
}

h1.familyheadingname .upcomingtag img
{
  display: inline-block;
  width: 3.5em;
  vertical-align: middle;
  margin: 0 0.15em 0 0;
}

h1.familyheadingname.classic
{
  color: #FFECA9;
}



/*
.familydetails
{
  display: inline-block;
  background: #212a50;
  color: white;
  padding: 0.5em 1em;
  border-radius: 6px;
  border: 2px solid #fff;
  box-shadow: 0 0 1px 1px #7d7d7d;
  font-size: 90%;
  float: right;
  max-width: 35%;
  box-sizing: border-box;
}
*/

.familydetails h2
{
  text-align: center;
}

.familydetailsspec
{
}

.familyspecicon
{
  display: inline-block;
  height: 40px;
  vertical-align: middle;
}

.familyexoticlabel
{
  display: inline-block;
  vertical-align: middle;
  line-height: 1.2em;
  text-shadow: 0 0 1px #484118;
  color: gold;
}

.familyexoticicon
{
  display: inline-block;
  height: 35px;
  vertical-align: middle;
  margin: 0 0.2em;
}

.family .familyexoticicon
{
  height: 30px;
  margin-left: 0.5em;
}

.note .familyexoticicon
{
  height: 18px;
  margin-bottom: 0.1em;
}

.familyexoticnote
{
  display: block;
  font-size: 80%;
  font-style: italic;
  line-height: 1.1em;
}

.familydetailsdata
{
}

.familydetailsdata.classic
{
  column-count: 2;
}

.familydetailsdata.classic.diet
{
  column-count: 1;
}

.familydetailsrole.classic
{
  text-align: center;
  font-weight: bold;
  font-size: 110%;
}

.familydetailsdata.spec,
.familydetailsdata.diet
{
  margin-bottom: 0;
}

.familydetailssubheading
{
}

.familydetailssubheading.classic
{
  color: #ffb7b7;
}

.familydetailsdata.diet
{
  line-height: 1.4em;
  margin-top: 0.5em;
  display: table-caption;
  width: 100%;
}

.familydetailsdietlist
{
  display: table-caption;
  width: inherit;
}

.familydetailsheading
{
  display: block;
}

.familyability
{
  display: block;
  margin-left: 1em;
}

.familyabilityitem
{
  font-size: 90%;
}

.familyabilityitem.classic
{
  line-height: 1.9em;
}

.familyabilityitem a
{
  text-decoration: none;
  color: #fffd9c;
}

.familyabilityitem.classic a
{
  color: #fffec6;
  text-shadow: 1px 1px #686852;
}

.familyabilityitem a:hover,
.familyabilityitem a:active
{
  color: lightblue;
}

.familyabilityicon
{
  display: inline-block;
  width: 18px;
  vertical-align: middle;
}

.familyabilityicon.classic
{
  margin-right: 0.2em;
}

.petopia_wrapper.classic .familyabilityitem.classic a,
.petopia_wrapper.classic .familyabilityitem.classic a:visited
{
  color: white;
}

.petopia_wrapper.classic .familyabilityitem.classic a:hover,
.petopia_wrapper.classic .familyabilityitem.classic a:active
{
  color: #ffbe87;
}

.familyabilities
{
}

.familydetailsclass
{
  display: inline-block;
  font-weight: bold;
  text-shadow: 0px 0px 1px #383838;
  text-align: left;
  font-size: 120%;
}

.familydetailsclass.exotic
{
  float: right;
}

.familydetails
{
  display: inline-block;
  /* background-color: #5e875e; */
  background-color: #3c6460;
  color: white;
  padding: 0.5em 1.5em 1.2em;
  border-radius: 6px;
  border: 2px solid #fff;
  box-shadow: 0 0 1px 1px #7d7d7d;
  font-size: 75%;
  box-shadow: 1px 1px 5px 0px #8a8a8a;
  text-align: left;
  max-width: 60%;
  margin-left: 1em;
}

.familydetails.tenacity
{
  background-color: #2b60ae;
}

.familydetails.cunning
{
  background-color: #367e2f;
}

.familydetails.ferocity
{
  background-color: #8f1616;
}

.familydetails.classic
{
  background-color: #4d78494d;
  max-width: 100%;
}

.familydetailstop
{
  display: block;
  text-align: center;
}

h1.familydetailsname
{
  display: inline-block;

}

h1.familydetailsname img
{
  display: inline-block;
  vertical-align: middle;

}

.familydetailsabilitiessection
{
  display: grid;
  grid-column-gap: 1.5em;
  grid-auto-flow: column;
  margin: 0 0.6em;
}

.familydetailssection
{
  display: grid;
  grid-column-gap: 1.5em;
  grid-auto-flow: column;
  background: #fff3;
  padding: 0.5em 1.5em;
  border-radius: 2px;
}

.familydetailssection.tamingskill,
.familydetailssection.diet
{
  background: #fff4;
}

.familydetailssection.tamingskill .familydetailstamingskilltitle
{
}

.familydetailssection.tamingskill .familydetailstamingskillicon
{
  display: inline-block;
  vertical-align: middle;
  height: 35px;
  margin-right: 0.3em;
}

.familydetailssection.tamingskill .familydetailstamingskillname
{
  vertical-align: middle;
  font-weight: bold;
  text-shadow: 0 0 1px #959595d9;
  font-size: 120%;
}

.familydetailsabilitiessection.classic
{
  grid-column-gap: 4.5em;
}

.familydetailsheading
{
  text-align: center;
  width: 100%;
  background: rgba(255, 252, 223, 0.1);
  margin-top: 1em;
  margin-bottom: 2px;
  font-weight: bold;
  color: #235123;
  background: #f4f9f4;
  font-size: 110%;
}

.familydetailsheading.classic
{
  margin-bottom: 0.7em;
  font-size: 100%;
}

.familydetailsheading.abilities
{
  margin-top: 0.5em;
}

.familydetailsabilities.diet
{
  margin: 0 0.6em;
  text-align: center;
}

.familydetailsabilities.tamingskill
{
  margin: 0 0.6em;
  text-align: center;
}

.familydetailsdiet
{
  display: block;
  margin: 1em;
}

.familydetailsblock
{
}

.familydetailsdrawer
{
  display: inline-block;
}

.familydetailsdrawer label
{
  float: right;
}

.familyheaderimage
{
  display: inline-block;
}

.familyheaderimage img
{
  display: inline-block;
}

.familyheaderlower
{
  display: flex;
}

.family .upcomingtag
{
}

#familydetailsdrawerswitch
{
  display: none;
}

#familydetailsdrawerswitch ~ .familydetails
{
  width: 0;
  transition: width 1s;
  display: none;
  visibility: hidden;
}

#familydetailsdrawerswitch:checked ~ .familydetails
{
  display: inline-block;
  visibility: visible;
  width: 100%;
  transition: width 1s;
}

.family a
{
  text-decoration: none;
  font-weight: bold;
}


/*  for test page
.family_panel_exotic_star
{
  display: none;
}

.startestradiolabel .family_panel_exotic_star
{
  display: inline-block;
  margin-left: -0.2em;
  margin-right: 0.1em;
}

.startestradiolabel
{
  margin-right: 2em;
  font-weight: bold;
}

input#startest1:checked ~ #typelabelexotic .family_panel_exotic_star.star1,
input#startest1:checked ~ .family_panel_container .family_panel .family_panel_item a .family_panel_image_container .family_panel_exotic_star.star1,
input#startest2:checked ~ #typelabelexotic .family_panel_exotic_star.star2,
input#startest2:checked ~ .family_panel_container .family_panel .family_panel_item a .family_panel_image_container .family_panel_exotic_star.star2,
input#startest3:checked ~ #typelabelexotic .family_panel_exotic_star.star3,
input#startest3:checked ~ .family_panel_container .family_panel .family_panel_item a .family_panel_image_container .family_panel_exotic_star.star3,
input#startest4:checked ~ #typelabelexotic .family_panel_exotic_star.star4,
input#startest4:checked ~ .family_panel_container .family_panel .family_panel_item a .family_panel_image_container .family_panel_exotic_star.star4,
input#startest5:checked ~ #typelabelexotic .family_panel_exotic_star.star5,
input#startest5:checked ~ .family_panel_container .family_panel .family_panel_item a .family_panel_image_container .family_panel_exotic_star.star5,
input#startest6:checked ~ #typelabelexotic .family_panel_exotic_star.star6,
input#startest6:checked ~ .family_panel_container .family_panel .family_panel_item a .family_panel_image_container .family_panel_exotic_star.star6,
input#startest7:checked ~ #typelabelexotic .family_panel_exotic_star.star7,
input#startest7:checked ~ .family_panel_container .family_panel .family_panel_item a .family_panel_image_container .family_panel_exotic_star.star7,
input#startest8:checked ~ #typelabelexotic .family_panel_exotic_star.star8,
input#startest8:checked ~ .family_panel_container .family_panel .family_panel_item a .family_panel_image_container .family_panel_exotic_star.star8
{
  display: inline-block;
}
*/

/* TOOLTIPS */

.yui-tt
{
  /* max-width: 600px; */
  padding: 0;
  /* background-color: #bbffbb; */
  border: 0;
  font-family: Verdana, sans-serif;
  /* font-size: 90%; */
  font-size: 75%;
  line-height: 1.5; /* Apparently we need to override the normal tooltip line-height. */
  color: black;
  padding: 3px;
  background-color: #87c587;
  opacity: 0.97;
  border-radius: 7px;
}
.yui-tt p { margin: 0; }

/* Pet list tooltips are used in look tables to show a list of tameable pets when you mouse over the look. */

.yui-tt table.petlist
{
  margin: auto;
  width: 100%;
  background-color: #e8fbe8;
  border-collapse: collapse;
  border-style: hidden;
  border-radius: 5px;
}

.yui-tt table.petlist th,
.yui-tt table.petlist td
{
  /* border: 1px solid #232D23; */
  border: 1px solid #7DB47D;
}

.yui-tt table.petlist th { padding: 5px 7px; }
.yui-tt table.petlist td { padding: 3px 7px; }

/* The diet and talent tree description tooltips on the family page aren't tables and so need their own outer border. */

.yui-tt p.outer,
.yui-tt div.outer
{
  border: 1px solid #232D23;
  padding: 5px 7px;
}

/* Abilities tables that are used in tooltips have a set width because otherwise they tend to get really wide. */

.yui-tt table.ability { width: 300px; }



/* Index News */

.index div.patch50
{
  border-bottom: 3px double #232D23;
  margin-bottom: 2em;
  padding-bottom: 1em;
}
.index div.patch50 p { margin-bottom: 0; }
.index div.patch50 ul
{
  margin-top: 0;
}


.index div.expansion
{
  text-align: center;
  border-bottom: 1px solid #232D23;
  margin-bottom: 2em;
  padding-bottom: 1em;
}
.index div.expansion p { margin: 0; }
.index div.expansion ul, .index div.expansion ul li
{
  margin: 0;
  list-style-type: none;
}

.index .legionheading
{
  vertical-align: middle;
  line-height: 40px;
}

.index .legionlogo80
{
  display: inline-block;
  vertical-align: middle;
}

.index .indexlegionpagelink
{
  text-decoration: none;
  font-weight: bold;
  color: #2A8D11;
  line-height: 15pt;
  vertical-align: top;
}

.index .indexlegionpagelink .brokenrightarrow
{
  font-size: 280%;
  line-height: 15pt;
  vertical-align: top;
  margin-right: 5px;
  display: inline-block;
  margin-top: -2px;
}

.index .legionlink
{
  vertical-align: top;
  line-height: 15pt;
  margin-bottom: 30px;
}

div.index_news
{
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid blue;
  text-align: center;
}
div.index_news h1 { font-size: 150%; }
div.index_news h1 a { text-decoration: none; }
div.index_news h2
{
  font-size: 95%;
  margin-top: 15px;
}
div.index_news p { margin: 0; }



/* SEARCH PAGE */

body.search h2 { margin-top: 20px; }

/* Note: parameters_form, show_parameters, hide_parameters are primarily used for JavaScript. */
body.search .nojs_show_hide { display: none; }
body.search .js .nojs_show_hide { display: block; }
body.search #show_parameters,
body.search #hide_parameters
{
  margin: 0;
  font-size: 85%;
}

/* Table that formats the search parameter form. */

body.search table.parameters { margin: 20px 0; }
body.search table.parameters td
{
  vertical-align: top;
  padding: 0 15px 5px 0;
}

body.search input,
body.search select
{
  padding: 3px;
  background: #80a680;
  color: white;
  font-weight: bold;
  border: 1px solid #689368;
  border-radius: 4px;
}

body.search select::after
{
}

body.search input.wide,
body.search select.wide
{
  width: 210px;
}

body.search input.narrow,
body.search select.narrow
{
  width: 150px;
}

body.search table.parameters table { width: 100%; }
body.search table.parameters table td { padding: 0; }

/* Search results */

body.search div.pages
{
  float: right;
  font-size: 85%;
}

body.search table.results { width: 100%; }

body.search table.results,
body.search table.results th,
body.search table.results td
{
  border: 1px solid #232D23;
  padding: 5px 7px;
  line-height: 1.4;
}
body.search img.search-icon { width: 75px; }



/* FAMILY PAGES */

body.family div.summary
{
  float: right;
  margin-top: -5px;  /* Pulls the icons slightly off the h1 line. */
  font-size: 85%;
}

body.family div.summary a
{
  text-decoration: none;
}

body.family div.summary img
{
  display: inline;
  /* width: 48px; */
  width: 30px;
  vertical-align: middle;
}

.family_model_subheading
{
  margin-top: 40px;
  /* color: #381D1D; */
  /* color: #2D0F0F; */
  color: white;
  font-size: 105%;
  padding: 0.4em 1em;
  /* background: #6cb16c; */
  background-color: #628c5e;
  border: 1px solid white;
  border-radius: 3px;
  /* box-shadow: 0 0 1px #6cb16c; */
  box-shadow: 0 0 1px #acacac;
}
  
.family_model_subheading.classic
{
  color: #FFE7C9;
  padding: 0.5em 0.5em;
  background: #dcffdc21;
  border: 1px solid #FFE7C9;
}

.family_model_subheading.hidden
{
  visibility: hidden;
}

.family_model_subheading.classic.hidden
{
  color: #FFE7C9;
}

.family_model_notes
{
  line-height: 140%;
  font-size: 90%;
  color: #481717;
  font-style: italic;
  padding-left: 1em;
}

.modeldetailstamingskilltitle
{
  font-weight: bold;
  text-shadow: 0 0 1px #959595d9;
  font-size: 100%;
  font-style: normal;
  color: #fff;
}

.taming_skill_notes .modeldetailstamingskillicon
{
  height: 20px;
}

.modeldetailstamingskillicon
{
  display: inline-block;
  vertical-align: middle;
  height: 30px;
  margin-right: 0.3em;
}

.modeldetailstamingskillname
{

}

.taming_skill_notes
{
  line-height: 140%;
  font-size: 90%;
  color: white;
  background: #81ae81;
  width: 90%;
  margin: 1em auto 0;
  padding: 0.5em 1em 0.5em;
  border-radius: 4px;
}


div.model_looks_panel
{
  display: block;
}

div.model_looks_thumb,
div.model_looks_big_thumb
{
  display: inline-block;
  text-align: center;
  vertical-align: top;
}

div.model_looks_thumb
{
  margin: 15px 15px 20px;
  width: 135px;
}

div.model_looks_big_thumb
{
  margin: 15px 14px 40px;
  width: 190px;
}

div.model_looks_thumb img
{
  margin: 0 auto;
}

div.model_looks_big_thumb img
{
  margin: 0 auto;
  width: 190px;
}

div.model_looks_thumb.classic img.look_thumb_image.classic,
div.model_looks_big_thumb.classic img.look_thumb_image.classic
{
  border: 1px solid #a9cb9d;
  border-radius: 4px;
  padding: 1px;
  background-color: #c2a98e;
  box-shadow: 0 0 1px #88B185;
}

div.model_looks_thumb a,
div.model_looks_big_thumb a
{
  display: inline-block;
  line-height: 145%;
  font-weight: bold;
  font-size: 90%;
  color: #320B12;
  text-decoration: none;
}

div.model_looks_thumb a:hover,
div.model_looks_thumb a:active,
div.model_looks_big_thumb a:hover,
div.model_looks_big_thumb a:active
{
  color: #87172B;
}

.petopia_wrapper.classic div.model_looks_thumb.classic a,
.petopia_wrapper.classic div.model_looks_big_thumb.classic a,
.petopia_wrapper.classic div.model_looks_thumb.classic a:visited,
.petopia_wrapper.classic div.model_looks_big_thumb.classic a:visited
{
  color: #FFF0DE;
}

div.model_looks_thumb.classic a:hover,
div.model_looks_thumb.classic a:active,
div.model_looks_big_thumb.classic a:hover,
div.model_looks_big_thumb.classic a:active
{
  color: #FFCC8F;
  text-shadow: 0 0 1px #FFACAC;
}

div.model_looks_thumb.classic a:hover img.look_thumb_image.classic,
div.model_looks_thumb.classic a:active img.look_thumb_image.classic,
div.model_looks_big_thumb.classic a:hover img.look_thumb_image.classic,
div.model_looks_big_thumb.classic a:active img.look_thumb_image.classic
{
  box-shadow: 0 0 4px #ADDEA9;
}

.model_looks_subheading
{
  margin-left: 15px;
}

h4.model_looks_subheading
{
  /* color: #270808; */
  /* color: #4A1212; */
  color: #fff;
  /* text-shadow: 0 0 1px #f0f0f0; */
  padding: 0.5em 0.5em;
  /* background-color: #7C9979; */
  background-color: #D7E4D5;
  font-size: 100%;
  position: relative;
  margin-top: 2em;
  border: 1px solid white;
  border-radius: 3px;
  box-shadow: 0 0 1px #acacac;
}





h4.model_looks_subheading,
h4.model_looks_subheading.unused,
h4.model_looks_subheading.untameable
{
  /* color: white; */
  color: #428242;
}

h4.model_looks_subheading.classic
{
  color: #C1FFFF;
  text-shadow: 0 0 1px #000;
  padding: 0.5em 0.5em;
  background-color: #ffffff11;
  font-size: 100%;
  position: relative;
  margin-top: 2em;
  border: 1px solid #C8E1E1;
}

h4.model_looks_subheading.classic:hover
{
  background-color: #b9b9b94d;
}

.closedwidget .model_looks_subheading
{
  opacity: 0.85;
}


.family  .closedwidget .model_looks_subheading.untameable
{
  /* color: #0d330d; */
}

.family  .closedwidget .model_looks_subheading.unused
{
  /* color: #2D4729; */
}

.family .unusedLabelExtra
{
  /* color: #0F110F; */
  font-size: 90%;
  opacity: 1.0;
  margin-left: 1em;
}

.family .unusedLabelExtra.classic
{
  color: #fff;
}


h4.model_looks_subheading.unofficial
{
  font-size: 80%;
  color: #1d1d1d;
}

input.unusedtoggle ~ .unusedLooks,
input.unusedtoggle
{
  display: none;
}

input.unusedtoggle:checked ~ .unusedLooks
{
  display: inline-block;
}

input.unusedtoggle + label .closedwidget,
input.unusedtoggle:checked + label .openwidget
{
  display: block;
}

input.unusedtoggle:checked + label .closedwidget,
input.unusedtoggle + label .openwidget
{
  display: none;
}

input.unusedtoggle + label .closedwidget
{

}

input.unusedtoggle:checked + label .openwidget
{

}

.closetoggle.classic
{
  font-size: 130%;
  position: absolute;
  right: 1em;
  bottom: 0.5em;
}

input.unusedtoggle.classic:checked + label .closetoggle.classic
{

}

.family #otherlooks
{
  margin-top: 40px;
}




/* LOOK PAGES */

.lookstatus
{
  font-weight: bold;
  color: #2b312b;
  background: #fffc;
  display: block;
  padding: 0.2em 0.5em;
  margin-top: 0;
}

.look_status_shadowlands_logo
{
  display: inline-block;
  height: 18px;
  vertical-align: middle;
  margin-right: 0.2em;
}

.look:not(.classic) h1
{
  color: white;
  padding: 0 0.5em;
  border-radius: 3px;
  background: #5a995a;
}

.lookimage.classic
{
  border: 2px solid #4e744e;
  box-shadow: 0 0 1px 2px #aed7ae;
  margin-left: 2px;
}

body.look h2
{
  font-size: 100%;
  margin: 30px 0 5px 0;
}

/* OLD FORMATTING FOR PETS TABLE
.look table.pets,
.look table.pets th,
.look table.pets td
{
  border: 1px solid #232D23;
}

.look table.pets { margin-bottom: 30px; }
.look table.pets td { padding: 3px 5px; }
.look table.pets th { padding: 5px; }

.look table.pets tr:nth-child(2n+1) { background-color: #d2ffd2; }

.look table.pets td.name { width: 150px; }
.look table.pets td.level { width: 70px; }
.look table.pets td.zone { width: 175px; }
.look table.pets td.links { width: 20px; }

.look table.pets td.notes { width: 190px; }
.look table.pets td.long-notes { width: 245px; }

.look table.pets .level,
.look table.pets .links { text-align: center; }
*/

/* new table styling - Wayne 20170424 */
.look table.pets,
.look table.pets th,
.look table.pets td
{
  border: 1px solid white;
}

.look table.pets
{
  border-bottom: solid 2px #c6e4c6;
  margin-bottom: 30px;
}

/* header colour */
.look table.pets th
{
  background-color: #68ab68;
  color: white;
  padding: 5px;
}


/* alternate row colour */
.look table.pets tr:nth-child(2n+1)
{
  background-color: #c6e4c6;
}

.look table.pets td
{
  padding: 6px 5px;
  line-height: 150%;
  font-size: 95%;
}

.look table.pets td.name
{
  width: 170px;
}

.look table.pets td.level
{
  font-size: 90%;
}
.look table.pets td.zone
{
  font-size: 90%;
  width: 175px;
}

.look table.pets td.links { width: 20px; }

.look table.pets td.notes
{
  width: 210px;
}

.look table.pets td.long-notes { width: 245px; }

.look table.pets .level,
.look table.pets .links { text-align: center; }

/* new table styling - Wayne 20170606 */
table.petdata,
table.petdata th,
table.petdata td
{
  border: 1px solid white;
}

table.petdata
{
  border: solid 2px #aed7ae;
  box-shadow: 1px 1px 15px 1px #a4bda4;
  margin-top: 15px;
}

table.petdata.classic
{
  box-shadow: 1px 1px 5px 1px #4e744e;
}

table.petdata a
{
  text-decoration: none;
  font-weight: bold;
  color: #066306;
}

table.petdata a:hover,
table.petdata active
{
  color: #0b9f0b;
}

/* header colour */
table.petdata th
{
  background-color: #68ab68;
  color: white;
  padding: 5px;
}


/* alternate row colour */
table.petdata tr.petstats
{
}

table.petdata tr.petdatahidden
{
  display: none;
}

table.petdata tr:nth-child(4n+5),
table.petdata tr:nth-child(4n+6)
{
  background-color: #c6e4c6;
}

table.petdata tr:nth-child(4n+5) td,
table.petdata tr:nth-child(4n+6) td
{
  color: #4a2d07;
}

table.petdata.classic tr:nth-child(4n+5) td,
table.petdata.classic tr:nth-child(4n+6) td
{
  color: #332b29;
}

.petopia_wrapper.classic table.petdata tr:nth-child(4n+5) td a,
.petopia_wrapper.classic table.petdata tr:nth-child(4n+6) td a,
.petopia_wrapper.classic table.petdata tr:nth-child(4n+5) td a:visited,
.petopia_wrapper.classic table.petdata tr:nth-child(4n+6) td a:visited
{
  color: #175407;
}

.petopia_wrapper.classic table.petdata tr:nth-child(4n+5) td a:hover,
.petopia_wrapper.classic table.petdata tr:nth-child(4n+6) td a:hover,
.petopia_wrapper.classic table.petdata tr:nth-child(4n+5) td a:active,
.petopia_wrapper.classic table.petdata tr:nth-child(4n+6) td a:active
{
  color: #d46b13;
}



/*
table.petdata tr:nth-child(4n+4) td,
table.petdata tr:nth-child(4n+5) td
{
  border-color: #aac8aa;
}

table.petdata tr:nth-child(4n+4),
table.petdata tr:nth-child(4n+5)
{
  background-color: #c6e4c6;
}

*/



table.petdata td
{
  /* padding: 6px 5px; */
  padding: 0.5em;
  line-height: 140%;
  font-size: 95%;
}

table.petdata td.petnotes
{
  font-size: 90%;
  line-height: 1.7em;
  /* padding: 0.8em 2em 1.5em 2.4em; */
  border-top: none;
}

table.petdata td.name
{
  border-bottom: none;
}

table.petdata td.level,
table.petdata td.zone,
table.petdata td.links
{
  border-bottom: 1px dotted white;
}

table.petdata td.petnotes,
table.petdata td.petundername
{
  border-top: none;
}

table.petdata td.name,
table.petdata td.petundername,
table.petdata td.level,
table.petdata td.zone
{
  border-right: none;
}

table.petdata td.level,
table.petdata td.zone,
table.petdata td.links,
table.petdata td.petnotes
{
  border-left: 1px dotted white;
}

table.petdata td.name
{
 /* width: 220px; */
  color: #332008;
  font-weight: bold;
  white-space: nowrap;
}

table.petdata.classic td
{
  color: #eddfcc;
  border-color: #60725E;
}

table.petdata.classic td.name
{

}

table.petdata td.level
{
  font-size: 85%;
  white-space: nowrap;
  /* width: 75px; */
}

.exoticlevelmin
{
  display: block;
}

.exoticlevelmin .familyexoticicon
{
  height: 10px;
  vertical-align: top;
}

.exoticnpclevel
{
  font-style: italic;
  font-size: 90%;
}

table.petdata td.zone
{
  font-size: 90%;
  width: 80%;
  /* width: 300px; */
}

table.petdata td.links
{
  width: 5%;
 /*  width: 20px; */
}

table.petdata td.notes
{
  width: 210px;
}

table.petdata td.long-notes { width: 245px; }

table.petdata .links
{
  text-align: center;
}

td.image.classic
{
  padding-right: 0.5em;
  vertical-align: top;
}

table.look.classic table.petdata.classic
{
  margin: 0;
}


table.petdata.classic td.petdatasearchlookimage.classic
{
  background-color: #232D22;
}

.model_notes
{
  line-height: 1.5;
  color: #623737;
}

.patch_model_notes
{
  line-height: 1.4;
  font-size: 95%;
  color: #5e5e5e;
  margin: 0.5em 0.5em;
  font-weight: normal;
}

.look p.look_notes
{
  margin-bottom: 2em;
  font-size: 90%;
}

.look h3#look_notes
{

}

.tameableicon
{
  display: table-cell;
  padding-right: 7px;
  vertical-align: middle;
}

.tameableicon img.inline
{
  max-width: 16px;
}

.tameableicon img.inline.alliance
{
  filter: brightness(140%);
}

.tameableicon img.inline.horde
{
  filter: brightness(130%);
}

.casteralerticon
{
  color: #ff2929;
  font-size: 130%;
  margin-left: 0.2em;
  font-weight: normal;
  text-shadow: 0 0 1px #441414;
}

img.notesicon
{
  max-width: 14px;
  display: inline;
  vertical-align: middle;
}

img.notesicon.alliance
{
  filter: brightness(140%);
}

img.notesicon.horde
{
  filter: brightness(130%);
}

.pettablename
{
  display: table-cell;
}

.pettabletitle
{
  display: block;
  font-size: 85%;
}

.wowheadlinkicon
{
  width: 18px;
}

.unknowntame
{
  font-weight: bold;
  font-size: 170%;
  color: #ff6c00;
  padding-bottom: 4px;
  vertical-align: middle;
}

.look .untameheading
{
  color: #560D0D;
  margin-top: 2em;
}

.look .untameLabelExtra
{
  color: #10246c;
  font-size: 90%;
  opacity: 1.0;
}

.look .hiddenpetform
{
}

.look input.hiddenpettoggle
{
  display: none;
}

.look input.hiddenpettoggle:not(:checked) ~ .hiddenpetsection
{
  display: none;
}

.look input.hiddenpettoggle + label .closedwidget,
.look input.hiddenpettoggle:checked + label .openwidget
{
  display: inline-block;
}

.look input.hiddenpettoggle:checked + label .closedwidget,
.look input.hiddenpettoggle + label .openwidget
{
  display: none;
}

.look input.hiddenpettoggle + label .closedwidget
{
  margin-bottom: 30px;
}

.look input.hiddenpettoggle:checked + label .openwidget
{
  margin-bottom: 0;
}




.look input.untametoggle ~ #untameabletable,
.look input.untametoggle ~ .pettablenote,
.look input.untametoggle
{
  display: none;
}

.look input.untametoggle:checked ~ #untameabletable,
.look input.untametoggle:checked ~ .pettablenote
{
  display: inline-block;
}

.look input.untametoggle + label .closedwidget,
.look input.untametoggle:checked + label .openwidget
{
  display: inline-block;
}

.look input.untametoggle:checked + label .closedwidget,
.look input.untametoggle + label .openwidget
{
  display: none;
}

.look input.untametoggle + label .closedwidget
{
  margin-bottom: 30px;
}

.look input.untametoggle:checked + label .openwidget
{
  margin-bottom: 0;
}

.look input.hiddenpettoggle:checked ~ #untameablepettable
{
  display: block;
  height: 100%;
  opacity: 1;
  transition: height 2s, opacity 5s;
}

.look input.hiddenpettoggle:not(:checked) ~ #untameablepettable
{
  display: none;
  height: 0;
  opacity: 0;
}


.petnoteasterisk.scale
{
  color: #9b0089;
  font-weight: bold;
  font-size: 130%;
  vertical-align: text-top;
  line-height: 1em;
}

.petnoteasterisk.scale.bfa
{
  color: #00bca8;
}
.petnotetext
{
  display: table-cell;
}

.petnoteparagraph
{
  display: table-row;
}

.look .pettablenote
{
  margin: 10px 10px 40px 10px;
  font-size: 80%;
  word-spacing: 0.13em;
}

.npc .pettablenote
{
  font-size: 80%;
  margin-top: 4em;
}

.pettablenoteempty
{
  margin-bottom: 30px;
}
.pettablenote .petnoteasterisk
{
  display: table-cell;
  padding-right: 0.2em;
  text-align: right;
  position: relative;
  top: 0.18em;
}

.starterpetimg
{
}

.look .look_notes a
{
  text-decoration: none;
  color: #00a700;
  text-shadow: 0 0 1px #d4d4d4;
}

.look .look_notes a:hover,
.look .look_notes a:active
{


}

.look .mountheading,
.look .companionheading
{
  color: #560D0D;
  margin-bottom: 5px;
}

.look .mountpanel,
.look .companionpanel
{
  margin-bottom: 40px;
  display: inline-flex;
  flex-wrap: wrap;
}


a.matchingmount,
a.matchingcompanion
{
  padding: 1px 1px 6px 1px;
  text-decoration: none;
  font-weight: bold;
  color: #1b4b1b;
  font-size: 85%;
  width: 120px;
  line-height: 120%;
  text-align: center;
  background-color: white;
  box-shadow: 0 0 0px 2px #829582;
  border: 1px solid #bed7be;
  margin: 10px;
}

a.matchingmount:hover,
a.matchingmount:active,
a.matchingcompanion:hover,
a.matchingcompanion:active
{
  color: #044e84;
  border: 1px solid #6a8fab;
  box-shadow: 0 0 2px 1px #257fc0;
}

img.matchingmountimg,
img.matchingcompanionimg
{
  margin-bottom: 3px;
}

.breadcrumbarrow
{
  display: table-cell;
  vertical-align: middle;
  font-weight: bold;
  font-size: 140%;
  padding-right: 2px;
}

.breadcrumbtext
{
  display: table-cell;
  vertical-align: middle;
}

.look .breadcrumb_top a,
.look .breadcrumb_btm a
{
  text-decoration: none;
  color: #1c8a1c;
}

div.model_looks_thumb img.look_status_icon
{
  display: inline;
  margin: 0 5px 0 0;
  height: 10px;
}

div.model_looks_thumb span.look_status_icon_unconfirmed
{
  margin-right: 5px;
  color: #ff6c00;
}


/* SPECIAL CATALOG PAGES */

body.special #content2 h2 { margin-top: 15px; }
body.special #content2 h3 { margin-top: 15px; }

body.special table.look { margin: 30px 0 45px 0; }

body.special table.look p.breadcrumb_btm { margin: 5px 0 0 15px; }

table.look td.image
{
  vertical-align: top;
}

body.special table.pets,
body.special table.pets th,
body.special table.pets td
{
  border: 1px solid #232D23;
  padding: 3px 5px;
  font-weight: normal;
}

body.special table.pets { margin-left: 15px; }
body.special table.pets td.name { width: 200px; }
body.special table.pets td.level { width: 120px; }
body.special table.pets td.zone { width: 200px; }
body.special table.rare table.pets td.zone { width: 140px; }

body.special table.popular { width: 100%; }
body.special table.popular td
{
  border-top: 1px solid #232D23;
  border-bottom: 1px solid #232D23;
  padding: 15px 0;
  vertical-align: top;
}

body.special table.popular p { margin: 0; }
body.special table.popular p.rank
{
  font-weight: bold;
}
body.special table.popular p.stats { font-size: 85%; }

body.special div.pages
{
  text-align: right;
  font-size: 85%;
}


.model table.modeldata td
{
  padding: 6px 5px;
  line-height: 150%;
  font-size: 95%;
}

.model table.modeldata a
{
  text-decoration: none;
  font-weight: bold;
  color: #066306;
}

.model table.modeldata a:hover,
.model table.modeldata active
{
  color: #0b9f0b;
}

.model a
{
  text-decoration: none;
}

hr.modellookdivide
{
  width: 100%;
  margin: 1.5em auto 1.5em;
  border: 0;
  border-bottom: 3px double #7D9575;
}

span.statustext
{
  font-variant: small-caps;
}

span.statustext.tameable,
.npc .petstatus.tameable
{
  color: #3c7e3c;
}

span.statustext.untameable,
span.statustext.unused,
.npc .petstatus.untameable,
.npc .petstatus.unused
{
  /* color: #d00; */
  color: #6d1e1e;
}

span.statustext.retired,
.npc .petstatus.retired
{
  color: #7b7b7b;
}

span.statustext.unconfirmed,
.npc .petstatus.unconfirmed
{
  color: #637b2e;
}

span.statustext.upcoming,
.npc .petstatus.upcoming
{
  color: #148cc6;
}

.npc .npcheading.tameable h1
{
  background-color: #3c7e3c;
}

.npc .npcheading.untameable h1,
.npc .npcheading.unused h1
{
  background-color: #6d1e1e;
}

.npc .npcheading.retired h1
{
  background-color: #7b7b7b;
}

.npc .npcheading.unconfirmed h1
{
  background-color: #637b2e;
}

.npc .npcheading.upcoming h1
{
  background-color: #148cc6;
}

.model .modelheadingdiv
{

}

.model .modelmodelheadingdiv
{

}

.model .modelfamilyheadingdiv
{
  float: right;
}

.model .modelfamilyheadingdiv a
{
  text-decoration: none;
  color: #07479b;
}

.model .modelfamilyheadingdiv a:hover,
.model .modelfamilyheadingdiv a:active
{
  color: #2f88fc;
}


/* TALENT PAGES */

body.talents h2
{
  margin-top: 2em;
}

body.talents h2 span
{
  font-size: 85%;
  font-weight: normal;
}

body.talents ul
{
  font-size: 90%;
}

body.talents p.quote
{
  font-style: italic;
  text-align: center;
  margin: 1em;
}

.talents h1
{
  color: #320808;
}


.talents p
{
  font-size: 90%;
}

.talents a
{
  color: #1d591d;
  text-decoration: none;
}

.talents a:hover,
.talents a:active
{
  color: #05c905;
}

.talents .spectable
{
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  background-color: #c1edc1;
  margin-top: 2em;
  border: 3px solid #e2ffe2;
  box-shadow: 0px 0px 1px 2px #629862, 1px 1px 7px 3px #878f87;
}

.talents .spectable img.spectablespecicon
{
  margin: 0 auto;
}

.talents .spectable tr
{
}

.talents .spectable th
{
  text-align: center;
  line-height: 1em;
  text-shadow: 0 0 2px #fff;
}

.talents .spectext
{
  font-weight: bold;
}

.talents .spectable th.spectableheading.cunning,
.talents .spectext.cunning
{
  color: var(--family-color-cunning);
}

.talents .spectable th.spectableheading.ferocity,
.talents .spectext.ferocity
{
  color: var(--family-color-ferocity);
}

.talents .spectable th.spectableheading.tenacity,
.talents .spectext.tenacity
{
  color: var(--family-color-tenacity);
}

.talents .spectable th,
.talents .spectable td
{
  padding: 0.5em 1em;
  vertical-align: top;
  border-right: 2px solid #dcffdc;
}

.talents .spectable th:last-child,
.talents .spectable td:last-child
{
  border-right: none;
}

.talents .spectable td
{
}

.talents .spectable td.spectabledesc
{
  font-style: italic;
  font-size: 75%;
  text-align: center;
  line-height: 1.6em;
  color: #181818;
}

.talents .spectable td.spectableheadingcell
{
  text-align: center;
}

.talents .spectable td.spectableheadingcell .spectableheading
{
  display: block;
  text-align: center;
  font-weight: bold;
  font-size: 90%;
  background-color: #488c48;
  color: white;
  padding: 0.18em 0;
  text-shadow: 0 0 1px #479647;
}

.talents .spectable td.spectableabilities
{
  text-align: left;
  font-size: 80%;
}

.talents .spectable td.spectableabilities .specabilitylist
{
  margin: 0.5em 0 0.5em 1em;
}

.talents .spectable td.spectableabilities .specabilityitem
{
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  list-style-type: none;
  font-size: 120%;
  min-height: 5em;
}

.talents .spectable td.spectableabilities .specabilityitem:first-child
{
  margin-top: -0.5em;
}

.talents .spectable td.spectableabilities .specabilityitem:last-child
{
  margin-bottom: -0.4em;
}

.talents .spectable td.spectableabilities .specabilityitem .specabilityclass
{
}

.talents .spectable td.spectableabilities .specabilityitem .specabilitydesc
{
  font-size: 90%;
  line-height: 1.4em;
  display: inline-block;
}

.talents .spectable td.spectableabilities .specabilityitem img.specabilityicon
{
  display: inline-block;
  width: 1.3em;
  vertical-align: middle;
}

.talents .spectable td.spectableabilities .specabilityitem a
{
  font-size: 100%;
  color: #2729ae;
}

.talents .spectable td.spectableabilities .specabilityitem a:hover,
.talents .spectable td.spectableabilities .specabilityitem a:active
{
  color: #11a5d5;
}

.talents .spectable td.spectablefamilylist
{
}

.talents .spectable td ul.specfamilylist
{
  margin-left: 1.5em;
  font-size: 80%;
}

.talents .spectable td ul.specfamilylist li.specfamilyitem
{
  list-style-position: inside;
  list-style-type: none;
  color: #392727;
  line-height: 2.8em;
}

.talents .spectable td ul.specfamilylist li.specfamilyitem a
{
  color: #092495;
}

.talents .spectable td ul.specfamilylist li.specfamilyitem.cunning a
{
  color: var(--family-color-cunning);
}

.talents .spectable td ul.specfamilylist li.specfamilyitem.ferocity a
{
  color: var(--family-color-ferocity);
}

.talents .spectable td ul.specfamilylist li.specfamilyitem.tenacity a
{
  color: var(--family-color-tenacity);
}

.talents .spectable td ul.specfamilylist li.specfamilyitem a:hover,
.talents .spectable td ul.specfamilylist li.specfamilyitem a:active
{
  color: #9c9c9c;
}

.talents img.specfamilyicon
{
  display: inline-block;
  height: 1.8em;
  vertical-align: text-bottom;
}

.talents .spectable a
{
  text-decoration: none;
  font-weight: bold;
  color: #1c1b2a;
}

.talents .spectable a:hover,
.talents .spectable a:active
{
  color: #b7b7b7;
}



/* SKILL PAGES */

.skills h2
{
  margin: 4em 0 0 0;
  color: #0a0aad;
}

body.skills table.family_skills,
body.skills table.family_skills th,
body.skills table.family_skills td
{
  border: 1px solid #232D23;
  padding: 5px 5px 0 5px;
  text-align: center;
  vertical-align: top;
}
body.skills table.family_skills td { width: 130px; }
body.skills table.family_skills td img { margin: 0 auto; }


.skills #content2
{
  font-size: 90%;
}

.skills h1
{
  color: #320808;
}

.skills ul.abilitysourcelist
{
  width: 80%;
}

.skills ul.abilitysourcelist li
{
}

.skills ul.abilitysourcelist li a
{
  color: #1818c9;
  font-size: 95%;
  line-height: 1.7em;
}

.skills ul.abilitysourcelist li a:hover,
.skills ul.abilitysourcelist li a:active
{
  color: #8c66f6;
}

.abilitysectionnote
{
  font-size: 95%;
  line-height: 1.6em;
  margin: 0.2em 0 1em 0;
}

#exotickey
{
  font-size: 90%;
  font-style: italic;
}

.skills #exotickey img.ability_exotic_star
{
  display: inline-block;
  width: 1.3em;
  vertical-align: middle;
}

.skills table.abilitytable
{
  border: 1px solid darkgrey;
  border-collapse: collapse;
  margin: 1em 0 5em 0;
  background-color: #c1edc1;
  border: 3px solid #e2ffe2;
  box-shadow: 0px 0px 1px 2px #629862, 1px 1px 7px 3px #878f87;
}

.skills table.abilitytable.familyandspec
{
  table-layout: fixed;
  width: 100%;
}

.skills table.abilitytable th,
.skills table.abilitytable td
{
  border: 2px solid #dcffdc;
  padding: 0.7em 0.7em;
  box-shadow: 0 0 4px 1px #6f8969 inset;
}

.skills table.abilitytable td
{
  vertical-align: text-top;
}

.skills table.abilitytable th
{
  text-align: center;
  vertical-align: top;
}

.skills table.abilitytable th .specicon
{
  margin: auto;
}


.skills table.abilitytable th.abilnamecell
{
  vertical-align: bottom;
  text-align: left;
  width: 18%;
  line-height: 1.5em;
}

.skills table.abilitytable th,
.skills table.abilitytable td.abilnamecell
{
  background-color: #b1e3b1;
  color: #2729ae;
}

.skills table.abilitytable td.abilnamecell
{
  font-size: 90%;
  vertical-align: middle;
}

.skills table.abilitytable th .abilityitem
{
  text-align: left;
  font-size: 80%;
  margin-top: 0.5em;
  line-height: 1.3em;
  border-radius: 2px;
  background-color: #c8f5c8;
  padding: 0.5em 0.5em;
}

.skills table.abilitytable th .abilityitem,
.skills table.abilitytable td .effectitem
{

}

.skills table.abilitytable td .effectitem
{

}


.skills table.abilitytable th.cunning,
.skills table.abilitytable td.cunning
{

}

.skills table.abilitytable th.ferocity,
.skills table.abilitytable td.ferocity
{

}

.skills table.abilitytable th.tenacity,
.skills table.abilitytable td.tenacity
{

}

img.abilityicon
{
  display: inline-block;
  height: 1.5em;
  vertical-align: middle;
}

.skills table.abilitytable img.abilityicon
{
  display: inline-block;
  height: 1.5em;
  vertical-align: middle;
}

.skills table.abilitytable .abilitydesc
{
  display: block;
  font-weight: normal;
  color: #030320;
}

.skills .abilitytable .abilityitem a,
.skills .abilitytable .exoticabilityitem a,
.skills .abilitytable .abilitytableabil a

{
  font-size: 100%;
  color: #0a0b57;
}

.skills .abilitytable .abilityitem a:hover,
.skills .abilitytable .abilityitem a:active,
.skills .abilitytable .exoticabilityitem a:hover,
.skills .abilitytable .exoticabilityitem a:active,
.skills .abilitytable .abilitytableabil a:hover,
.skills .abilitytable .abilitytableabil a:active
{
  color: #11a5d5;
}

.skills table.abilitytable img.abilityfamilyicon
{
  /* display: inline-block; */
  display: none;
  height: 1.5em;
  vertical-align: middle;
  margin-right: 0.2em;
  vertical-align: middle;
}

.ability_table_exotic_star
{
  display: inline-block;
  vertical-align: middle;
  margin-top: -0.1em;
  width: 12px;
  margin-right: 0.12em;
}

h2 .ability_exotic_star
{
  display: inline-block;
  width: 25px;
  vertical-align: middle;
}

.skills table.abilitytable div.abilitytableentry
{
  line-height: 2em;
  font-size: 85%;
  margin-top: 0.5em;
}


.skills table.abilitytable div.abilitytableentry a,
.abilitytablefamilyname a
{
  display: block;
}

.skills table.abilitytable div.abilitytableentry a:active,
.skills table.abilitytable div.abilitytableentry a:hover
{
  color: #9c9c9c;
}

.skills table.abilitytable.exotic,
.skills table.abilitytable.bonus
{
  table-layout: unset;
  width: unset;
}

.skills table.abilitytable.exotic .abilitytablefamilyname
{
  white-space: nowrap;
}

.skills .abilitytable img.exoticabilityicon
{
  display: inline-block;
  width: 1.3em;
  vertical-align: middle;
}

.skills table.abilitytable.exotic .exoticabilitydesc
{
  font-size: 85%;
}

.skills .abilitytable th.abilitytableheading .abilitytablespecname
{
  margin-bottom: 1em;
}

.skills .abilitytable th.abilitytableheading.cunning .abilitytablespecname
{
  color: var(--family-color-cunning);
}

.skills .abilitytable th.abilitytableheading.ferocity .abilitytablespecname
{
  color: var(--family-color-ferocity);
}

.skills .abilitytable th.abilitytableheading.tenacity .abilitytablespecname
{
  color: var(--family-color-tenacity);
}


.skills table.abilitytable a.abilitytablefamily:active,
.skills table.abilitytable a.abilitytablefamily::hover
{
  color: #9c9c9c;
}

.skills hr.skilltabledivide
{
  margin: 0 auto;
  border: none;
  border-bottom: 3px double #3B4D36;
  width: 60%;
}


.skills table.abilitytable .abilitytablefamname a.abilitytablefamily
{
  text-align: center;
  background-color: #6bad6b;
  line-height: 1.5em;
  border: 1px solid #fff;
  border-radius: 2px;
  box-shadow: 0 0 1px 1px #97bd97, 0 0 3px 1px #589258 inset;
  text-shadow: 0 0 1px #7b7b7b;
}

.skills table.abilitytable .abilitytablefamname a.abilitytablefamily.cunning
{
  border: 1px solid #158d09;
  box-shadow: 0 0 3px 1px #1d8913 inset;
  background-color: #41ab37;
}

.skills table.abilitytable .abilitytablefamname a.abilitytablefamily.ferocity
{
  border: 1px solid #a20000;
  background: #b71b1b;
  box-shadow: 0 0 3px 1px #e92424 inset;
}

.skills table.abilitytable .abilitytablefamname a.abilitytablefamily.tenacity
{
  border: 1px solid #114ca5;
  box-shadow: 0 0 3px 1px #295699 inset;
  background-color: #3f73c2;
}

.skills table.abilitytable .abilitytablefamname a.abilitytablefamily:hover,
.skills table.abilitytable .abilitytablefamname a.abilitytablefamily:active
{
  text-shadow: 0 0 1px silver;
  color: white;
}


.skills table.abilitytable .abilitytablefamname a.abilitytablefamily.cunning:hover,
.skills table.abilitytable .abilitytablefamname a.abilitytablefamily.cunning:active
{
  border: 1px solid #158d09;
  box-shadow: 0 0 3px 1px #1d8913 inset;
  background-color: #2ada1a;
}

.skills table.abilitytable .abilitytablefamname a.abilitytablefamily.ferocity:hover,
.skills table.abilitytable .abilitytablefamname a.abilitytablefamily.ferocity:active
{
  border: 1px solid #b30000;
  background: #ff0e0e;
  box-shadow: 0 0 3px 1px #b60000 inset;
}

.skills table.abilitytable .abilitytablefamname a.abilitytablefamily.tenacity:hover,
.skills table.abilitytable .abilitytablefamname a.abilitytablefamily.tenacity:active
{
  border: 1px solid #0054db;
  box-shadow: 0 0 3px 1px #0a4bae inset;
  background-color: #1470fb;
}

.skills table.abilitytable td.abilitytablefootnote
{
  font-size: 80%;
  color: #02004a;
  padding: 1em 2em;
  font-weight: bold;
  background-color: #658d65;
  box-shadow: 0 0 4px 1px #a4b9a0 inset;
  color: white;
}

.abilitytablefamname a
{
  color: white;
}

.abilitytablefamname a:hover,
.abilitytablefamname a:active
{
}

.abilitytablefamname a.cunning
{
  color: white;
}

.abilitytablefamname a.cunning:hover,
.abilitytablefamname a.cunning:active
{
}

.abilitytablefamname a.ferocity
{
  color: white;
}

.abilitytablefamname a.ferocity:hover,
.abilitytablefamname a.ferocity:active
{
}

.abilitytablefamname a.tenacity
{
  color: white;
}

.abilitytablefamname a.tenacity:hover,
.abilitytablefamname a.tenacity:active
{

}


.skills table.abilitytable div.abilitytableentry:hover .abilitytableabil
{
  opacity: 1;
}

.abilitytableabil
{
  opacity: 0;
  transition: opacity 0.5s;
  text-align: center;
}

.abilitytableabil a
{
}

.abilitytableabil a:hover,
.abilitytableabil a:active
{
}

.skills table.abilitytable td .abilityitem
{
  font-size: 90%;
}



.abilnamecell .effectname
{
  font-weight: bold;
  line-height: 1.55em;
}

.abilnamecell .effectdesc
{
  font-size: 80%;
  color: #030320;
  line-height: 1.4em;
  margin-top: 0.3em;
}

.skills table.abilitytable td.abilitytablefamnamecell
{
  vertical-align: middle;
}

.abilityitemorlink
{
  color: #001bae;
  font-weight: bold;
  font-style: italic;
  font-size: 110%;
  text-align: center;
}

a.abilitytablefamilyname.cunning
{
  color: var(--family-color-cunning-darker);
}

a.abilitytablefamilyname.ferocity
{
  color: var(--family-color-ferocity-darker);
}

a.abilitytablefamilyname.tenacity
{
  color: var(--family-color-tenacity-darker);
}


/* CHOOSE A PET */

body.choose #content2 ol li ul { margin: 0 0 0 45px; }
body.choose #content2 ol li ul li { list-style-type: circle; }



/* DIET CHART */

body.dietchart table
{
  margin-top: 50px;
}

body.dietchart h2
{
  margin-top: 30px;
}

body.dietchart table
body.dietchart table th,
body.dietchart table td
{
  margin: 10px 0 5px 0;
  padding: 5px;
  text-align: center;
  border: 1px solid #232D23;
}

body.dietchart table { width: 100%; }
body.dietchart table td.label { text-align: left; }
body.dietchart table td.yes { background: #bbffbb; }

body.dietchart table th .foodLabel
{
  transform: rotate(315deg) translate(9px, -9px) ;
  display:block;
  width: 50px;
  line-height: 16px;
}

body.dietchart table img.family_icon
{
  display: inline;
  width: 40px;
  vertical-align: middle;
  margin-right: 10px;
}

/* STABLE LIST */

body.stablelist h2 { margin-top: 30px; }
body.stablelist h3 { margin-top: 15px; }

body.stablelist table.toc
{
  width: 100%;
  margin: 20px 0;
}

body.stablelist table.toc td.icon { width: 80px; }
body.stablelist table.toc ul { margin: 0; }
body.stablelist table.toc ul li { list-style-type: none; }

body.stablelist table.stables,
body.stablelist table.stables th,
body.stablelist table.stables td
{
  border: 1px solid #232D23;
  vertical-align: top;
}

body.stablelist table.stables
{
  width: 100%;
  margin-top: 30px;
}

body.stablelist table.stables th { padding: 5px; }
body.stablelist table.stables td { padding: 3px 5px; }

body.stablelist table.stables td.zone { width: 205px; }
body.stablelist table.stables td.area { width: 205px; }
body.stablelist table.stables td.name { width: 205px; }
body.stablelist table.stables td.links { width: 20px; }


/* Gallery */

.gallery #subheading
{
  width: 80%;
}

.gallery #gallerynumbers
{
  margin: 0;
  font-size: 95%;
  font-style: italic;
  padding-right: 1em;
}

.gallery p#gallerykey
{
  margin: 0;
  font-size: 80%;
}

.gallery a#othergallerylink
{
  color: #307e00;
  text-shadow: #cadbc0;
  font-style: normal;
  font-weight: bold;
  font-size: 80%;
  display: inline-block;
}

.gallery a#othergallerylink.othergallerylink.classic
{
  color: #fff;
}

.gallery .othergallerytype
{
  font-weight: bold;
  font-style: italic;
}

.gallery .gallerypanel
{
  margin-bottom: 40px;
  display: inline-flex;
  flex-wrap: wrap;
}

h2.gallery.familyname
{
  padding: 0.2em 1em;
  background-color: #587758;
  color: white;
  border: 1px solid #bcd9bc;
}

h3.gallery.modelname
{
  background-color: #8eb38e;
  color: #fff;
  padding: 0.2em 1em;
  box-shadow: 0 0 1px 0px #cff2cf;
  border: 1px solid #d4e1d4;
  margin-left: 1em;
  margin-top: 0.5em;
}


.gallery a.look_thumb_link
{
  padding: 1px 1px 6px 1px;
  text-decoration: none;
  font-weight: bold;
  color: #1b4b1b;
  font-size: 85%;
  width: 120px;
  line-height: 120%;
  text-align: center;
  margin: 10px;
}

.gallery a.look_thumb_link:hover,
.gallery a.look_thumb_link:active
{
  color: #0a8702;
}

.gallery img.look_thumb_image
{
  margin-bottom: 3px;
  margin-left: auto;
  margin-right: auto;
}

.gallery a.gallerylook .gallerylooksubname
{
  font-weight: normal;
  font-style: italic;
  display: block;
  color: #00a500;
}

.gallery #galleryindexheading
{
  margin-bottom: 3px;
  text-align: center;
  font-size: 100%;
  margin-bottom: 0.6em;
}

.gallery .galleryindex
{
  column-count: 3;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  line-height: 155%;
  font-size: 85%;
  margin: 0 0 0 2.4em;
}

.gallery .galleryindex li
{
  list-style-type: none;
  color: #662914;
}

.gallery .galleryindex > li:hover:before
{
  /*
  content: "\27a4";
  padding-right: 0.2em;
  margin-left: -0.8em;
  */
}

.gallery .gallerysubindex
{
  margin-bottom: 0.5em;
  margin-left: 0.5em;
  margin-top: 0;
  line-height: 1.4em;
}

.gallery .gallerysubindex li
{
  list-style-type: disc;
  list-style-position: inside;
  color: #15458c;
}

.gallery .gallerysubindex li a:active,
.gallery .gallerysubindex li a:hover
{
  color: #6aa0f0;
}

.gallery .galleryindex.classic li:hover:before
{
  content: "";
  padding-right: 0;
  margin-left: 0;
}

.gallery a
{
  text-decoration: none;
  color: inherit;
}

.gallery a:active,
.gallery a:hover
{
  color: #871902;
}

.gallery #galleryindexdiv
{
  margin: 2em 0 4em 0;
  border: 1px solid black;
  border-radius: 5px;
  padding: 0.5em 0 0.8em;
  color: #1d0808;
  background-color: rgb(237, 255, 237);
}

.gallery #galleryindexdiv.galleryindexdiv.classic
{
  background-color: #7f987d4d;
  border: 2px solid #FFF;
}

.gallery #galleryindexheading.galleryindexheading.classic
{
  background: white;
  margin: 0.1em 1em 1em;
  color: #303e30;
}

.gallery .galleryindex.classic li
{
  list-style-type: disc;
  color: white;
}

.gallery .model_notes
{
  font-style: italic;
  margin-left: 1em;
  font-size: 95%;
  line-height: 1.6em;
}



.gallery .othermodelskintag
{
  font-size: 180%;
  font-weight: bold;
  color: #2475b0;
  text-shadow: 0 0 2px #6f6f6f;
  margin-right: 2px;
}

.petopia_wrapper.classic .galleryindex.classic a,
.petopia_wrapper.classic .galleryindex.classic a:visited
{
  font-weight: bold;
  /* color: #FFD596; */
}

.petopia_wrapper.classic .galleryindex.classic a:hover,
.petopia_wrapper.classic .galleryindex.classic a:active
{
  color: #FF7C7C;
}

/* FAQS */

#titlePaneToggle
{
  font-size: 75%;
  display: none;
}
.js #titlePaneToggle { display: block; }

.nihilo .dijitTitlePane
{
  margin-top: 5px;
}

.nihilo .dijitTitlePaneTitle
{
  margin: 0;
	padding: 0;
	background: #bbffbb;
	background-image: none;
	border: 1px solid #232D23;
	color: black;
}

.nihilo .dijitTitlePaneTitle img
{
  display: inline;
  vertical-align: bottom;
  margin-left: 5px;
  margin-bottom: 3px;
}
.nihilo .dijitTitlePaneTitleHover {	background-image: none; }

.nihilo .dijitTitlePaneContentOuter
{
	background: #dcffdc;
	border: 1px solid #232D23;
	border-top: 0px;
}

.nihilo .dijitTitlePaneContentInner
{
	padding: 15px;
  padding-bottom: 5px;
}

.feathermaneguide img#feathermanebanner
{
  width: 650px;
  margin: 1em auto 2em;
}

.feathermaneguide a,
.feathermaneguide a:visited
{
  text-decoration: none;
  font-size: 10pt;
  font-weight: bold;
  color: #8646E1;
  font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}

.feathermaneguide a:hover,
.feathermaneguide a:active
{
  color: #58289C;
}

.feathermaneguide p,
.feathermaneguide ul
{
  line-height: 1.5em;
  font-size: 90%;
}

.feathermaneguide li
{
  margin-bottom: 1em;
}

.feathermaneguide h2
{
  margin-top: 2.5em;
  margin-bottom: 1em;
  line-height: 1.4em;
}



/* CATACLYSM PAGES */

/* General Formating */
body.cataclysm #content2 h1 { margin-top: 15px; }
body.cataclysm #content2 h2 { margin-top: 30px; }
body.cataclysm #content2 ul { margin: 5px 30px 15px 30px; }
body.cataclysm #content2 li strong { color: blue; }
body.cataclysm p.breadcrumb_btm { margin: 5px 0 30px 0; }

/* Overview Page */
body.cat_overview #content2 h1
{
  margin-top: 0;
  font-size: 170%;
}
body.cataclysm table.icons { margin-bottom: 0; }

/* New Families */
body.cataclysm table.families { margin-bottom: 0; }
body.cataclysm table.families th { text-align: center; }
body.cataclysm table.families td
{
  padding: 10px 5px 5px 5px;
  width: 90px;
  text-align: center;
  vertical-align: top;
}
body.cataclysm table.families td img { margin: 0 auto; }
body.cataclysm table.families td.diet { width: 130px; }
body.cataclysm table.families td.diet img
{
  display: inline;
  width: 48px;
}

/* New Looks */
body.cataclysm table.looks { margin: 15px 0 0 0; }

/* MIA Returned */
body.cataclysm table.mia table.pets,
body.cataclysm table.mia table.pets th,
body.cataclysm table.mia table.pets td
{
  border: 1px solid #232D23;
  padding: 3px 5px;
  font-weight: normal;
}
body.cataclysm table.mia table.pets { margin: 0 0 15px 15px; }
body.cataclysm table.mia table.pets th.name { width: 250px; }
body.cataclysm table.mia table.pets th.zone { width: 250px; }

/* Transformed Pets */
body.cataclysm table.transformed
{
  margin: 5px 0;
  width: 100%;
}
body.cataclysm  table.transformed,
body.cataclysm  table.transformed th,
body.cataclysm  table.transformed td
{
  padding: 5px;
  border: 1px solid #232D23;
  text-align: center;
}
body.cataclysm  table.transformed td img
{
  display: inline;
  vertical-align: middle;
}

/* New Rares Pets */
body.cataclysm table.rares
{
  margin: 5px 0;
  width: 100%;
}
body.cataclysm  table.rares,
body.cataclysm  table.rares th,
body.cataclysm  table.rares td
{
  padding: 5px;
  border: 1px solid #232D23;
  text-align: center;
}
body.cataclysm  table.rares td img { margin: 0 auto;}

body.extinct table.look .image img
{
  margin-right: 20px;
}

body.extinct table.look
{
  margin-bottom: 40px;
}

body.extinct table.look table.pets
{
  margin-bottom: 0;
}

/* MoP */
/* Special case much? */

body#menu_id_mop_abilities table.data td { vertical-align: top; }
body#menu_id_mop_abilities table.data td.label
{
  font-weight: bold;
  text-align: center;
}
body#menu_id_mop_abilities table.data td.label img { margin: 0 auto; }
body#menu_id_mop_abilities table.data table.ability,
body#menu_id_mop_abilities table.data table.ability tr,
body#menu_id_mop_abilities table.data table.ability td { border: 0; }
body#menu_id_mop_abilities table.data table.ability td { margin: 0; padding: 0; }
body#menu_id_mop_abilities table.data table.ability td.icon { padding-right: 7px; }
body#menu_id_mop_abilities table.data table.ability td.desc { padding: 3px 0; }
body#menu_id_mop_abilities table#new table.ability td.desc { width: 490px; }

body#menu_id_mop_talents table.data td { vertical-align: top; }
body#menu_id_mop_talents table.data td.label
{
  font-weight: bold;
  text-align: center;
}
body#menu_id_mop_talents table.data td.label img { margin: 0 auto; }
body#menu_id_mop_talents table.data table.ability,
body#menu_id_mop_talents table.data table.ability tr,
body#menu_id_mop_talents table.data table.ability td { border: 0; }
body#menu_id_mop_talents table.data table.ability td { margin: 0; padding: 0; }
body#menu_id_mop_talents table.data table.ability td.icon { padding-right: 7px; }
body#menu_id_mop_talents table.data table.ability td.desc { padding: 3px 0; }


/* Warlords of Draenor Page - Wayne */

img.wodthumb
{
  display: inline-block;
}

span.wodthumb
{
  display: inline-block;
  margin: 30px;
}

span.wodthumb img
{
  margin: 0 auto;
}

img.wodthumb2
{
  display: inline-block;
}

span.wodthumb2
{
  display: inline-block;
  margin: 30px;
  line-height: 120%;
  font-size: 95%;
  text-align: left;
  vertical-align: top;
  color: #090839;
}

span.wodthumb2 .lookavail
{
  color: darkgreen;
}

span.wodthumb2 .lookalert
{
  color: darkred;
  font-style: italic;
}


span.wodthumb2 img
{
  margin: 0 auto;
}

body.wod_overview h2
{
  color: #7D1F1F;
  text-align: center;
  margin-top: 60px;
  font-size: 140%;
}

body.wod_overview #wodindexbox
{
  margin: 10px 0;
  padding: 7px 0 20px 35px;
  display: block;
  border-radius: 8px;
  border: 2px solid grey;
}

body.wod_overview p#update
{
  font-weight: bold;
  font-size: 85%;
  line-height: 140%;
  margin-top: -5px;
  font-style: italic;
}



body.wod_overview #wodindexbox p
{
  text-align: left;
  margin-bottom: 8px;
  font-size: 95%;
}

body.wod_overview h2.wodindextitle
{
  margin-top: 0;
  margin-left: -35px;
}

body.wod_overview h2.wodindex
{
  margin: 2px 0 0 -10px;
  font-size: 110%;
  color: #451C1C;
  text-align: left;
}



body.wod_overview ul.wodlist
{
  margin-top: -4px;
  margin-bottom: 5px;
  column-count: 3;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  line-height: 140%;
  font-size: 95%;
}


body.wod_overview ul.wodlist li
{
  color: #780800;
  list-style-position: inside;
}

body.wod_overview ul.wodlist ul
{
  margin: 0 0 0 15px;
}

body.wod_overview ul.wodlist ul li
{
  color: #2B377E;
}

body.wod_overview ul.wodlist li a,
body.wod_overview ul.wodlist li a:visited
{
  color: #2A065F;
  text-decoration: none;
  font-size: 95%;
}

body.wod_overview ul.wodlist li a:hover,
body.wod_overview ul.wodlist li a:active
{
  color: #BC0404;
}

body.wod_overview ul.wodlist li .listappend
{
  font-size: 90%;
}

body.wod_overview p a,
body.wod_overview .wodgallery a
{
  font-weight: bold;
  color: #162978;
  text-decoration: none;
}

body.wod_overview p a:hover,
body.wod_overview p a:active,
body.wod_overview .wodgallery a:hover,
body.wod_overview .wodgallery a:active
{
  color: #3451CC;
}

body.wod_overview #indexfamilies
{
  margin-right: 50px;
  margin-left: 20px;
}

body.wod_overview #indexmodels
{
}

body.wod_overview h2 span.newtag
{
  font-style: italic;
  font-family: Georgia,serif;
  color: #451C1C;
}

body.wod_overview p
{
  text-align: center;
  margin: 0 0 15px 0;
}

body.wod_overview .wodgallery
{
  display: block;
  text-align: center;
}

body.wod_overview .wodgallery2
{
  display: block;
  text-align: center;
}

body.wod_overview .wodgallery#last
{
  margin-bottom: 40px;
}

body.wod_overview p#wodnote
{
  text-align: justify;
  display: inline-block;
  margin-top: 20px;
  font-style: italic;
  font-size: 90%;
  line-height: 160%;
}

body.wod_overview img#wodbanner
{
//  padding: 40px 0 50px 0;
  display: block;
  margin: -15px auto 0;
}

body.wod_overview p#wodtag
{
  text-align: center;
  color: #681717;
  font-weight: bold;
  font-style: italic;
  font-family: Georgia, serif;
  font-size: 120%;
}

body.wod_overview p#wodtag2
{
  font-weight: bold;
  font-size: smaller;
  color: #232356;
}

body.wod_overview p.status
{
}

body.wod_overview p.status span.confirmed
{
  color: green;
}

body.wod_overview p.status span.unconfirmed
{
  color: #C55C10;
}

body.wod_overview p.status span.denied
{
  color: #CF2222;
}

p#wodlink
{
  text-align: center;
}

p#wodlink a img
{
  width: 170px;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 7px;
}

p#wodlink a
{
  text-decoration: none;
  font-weight: bold;
  color: maroon;
  vertical-align: middle;
}

/* Legion Pages - Wayne */

.legion #content2 h1
{
  color: #0c560d;
  font-size: 150%;
  margin-top: 80px;
  text-align: center;
}

.legion #content2 .titleappend
{
  font-weight: normal;
  font-size: 85%;
}

.legion #content2 .legionsubtitle
{
  color: #1b2016;
  text-align: center;
}

.legion #content2 h2
{
  color: #2A8D11;
  margin-top: 35px;
  font-size: 130%;
}

.legion #content2 h2 span.untameheading
{
  color: #560D0D;
  font-size: 90%;
  font-style: italic;
  font-variant: small-caps;
}

.legion #content2 h3
{
  color: #224519;
  font-size: 140% !important;
}

.legion #content2 a
{
  text-decoration: none;
  font-weight: bold;
  color: #272C25;
  font-size: 95%;
}

.legion #content2 a:active,
.legion #content2 a:hover
{
  color: #0a8702;
}

.legion #content2 .legionlogo
{
  width: 300px;
  margin: 0 auto;
}

.legion .legionsubheading
{
  font-size: 95%;
  line-height: 170%;
  font-style: italic;
  color: #1B222D;
}

.legion .legionindex
{
  column-count: 3;
  -moz-column-count: 3;
  -webkit-column-count: 3;
}

.legion .unusedselector
{
  margin: 10px 0 20px 0;
}

.legion .unusedLabelExtra
{
  color: #131413;
}

.legion .model_looks_subheading
{
  color: #006C00;
  opacity: 1.0;
  margin-top: 2em;
}

.legion .legionsubsubheading
{
  font-size: 90%;
  line-height: 170%;
  font-style: italic;
  color: #1B222D;
  margin-left: 15px;
}

.legion .legionsubpaneltext
{
  font-size: 90%;
  line-height: 170%;
  color: #0B0F09;
  margin-left: 15px;
  margin-top: 0;
  text-shadow: 0 0 1px #D4D8D3;
}

.legion .replacementtable
{
  font-weight: bold;
  color: #212121;
  text-align: center;
  margin: auto;
}

.legion .replacementtable td
{
  width: 120px;
}

.legion .replacementtable .rightarrow
{
  font-size: 50px;
  color: #233c41;
  margin-right: 20px;
  display: inline-block;
  padding-bottom: 10px;
}

.legion h3
{
  font-size: 120%;
}

hr.familydivide
{
  width: 100%;
  margin: 2.5em auto 3em;
  border: 0;
  border-bottom: 3px double #7D9575;
}

/* Patch Preview Pages */

.patch h1
{
  /*
  color: #0e0d4d;
  font-size: 160%;
  */
  margin-top: 1em;
  text-align: center;
  font-size: 170%;
  color: #fff;
  border-radius: 2px;
  background: #6da66d;
}

.patch .titleappend
{
  font-weight: normal;
  font-size: 85%;
}

.patch .patchsubtitle,
.patchguidesubtitle
{
  color: #427742;
  text-align: center;
  font-size: 100%;
  line-height: 1.5;
  font-weight: bold;
}

.patchguidesubtitle .strongnote
{
  font-weight: bold;
  color: #0e78d5;
}

.patch .patchsubtitle a,
.patch .patchsubtitle a:hover
{
  color: #0a53c5;
}

.patch h2
{
  color: #0b3b83;
  margin-top: 35px;
  font-size: 130%;
}

.patch h2.patchfamilyheading
{
  font-size: 140%;
  margin-top: 0;
  background: #659b65;
  color: white;
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

.patch .patchfamilyheadingsection
{
  margin-bottom: 1.5em;
}


.patch h2.patchfamilyheading.hasnote
{
  margin-bottom: 0.5em;
}

.patch h2.patchfamilyheading .familynewtag
{
  font-size: 90%;
  color: #a72300;
  font-variant: all-petite-caps;
  font-style: italic;
}

.patch h2.patchfamilyheading .familynotamestag
{
  font-size: 90%;
  color: #902604;
  font-variant: all-petite-caps;
}

.patch h2 img.patchfamilyicon
{
  display: inline-block;
  margin-right: 0.2em;
  vertical-align: middle;
  width: 2em;
}


.patch h2 span.untameheading
{
  color: #560D0D;
  font-size: 90%;
  font-style: italic;
  font-variant: small-caps;
}

.patch h3
{
  color: #15458c;
  font-size: 130% !important;
}

.patch p a
{
  text-decoration: none;
  font-weight: bold;
  color: #2f72d8;
  font-size: 95%;
}

.patch #content2 a:active,
.patch #content2 a:hover
{
  color: #4bd0fb;
}

.patch #content2 .patchlogo
{
  width: 450px;
  margin: 0 auto;
  background: radial-gradient(ellipse, white 10%, #edfbed 30%, #dcffdc 80%);
}

.patch #content2 .patchlogo.patch81
{
  width: 650px;
}

.patch .patchsubheading
{
  font-size: 95%;
  line-height: 170%;
  font-style: italic;
  color: #1B222D;
}

.patch .patchindex,
.patch .patchindex2
{
  column-count: 3;
}

.patch .patchindexcontainer.onecol .patchindex,
.patch .patchindexcontainer.onecol .patchindex2
{
  column-count: 1;
}

.patch .patchindexcontainer.twocol .patchindex,
.patch .patchindexcontainer.twocol .patchindex2
{
  column-count: 2;
}

img.tinythumbinlinelist
{
  display: inline-block;
  vertical-align: middle;
  width: 80px;
  margin-right: 0.2em;
}


.patch ul.patchindex li.headingli
{
  list-style-type: none;
  color: black;
}

.patch ul.patchindex2 li
{
  list-style-type: none;
  display: inline-block;
}

.patch .patchsubindex
{
  margin-left: 0;
}

.patch .patchsubindex li
{
  list-style-type: none;
}

.patch .patchsubindex li a
{
  font-weight: normal;
}

.patch img.patchindexicon
{
  width: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

.patch .unusedselector
{
  margin: 10px 0 20px 0;
}

.patch .unusedLabelExtra
{
  color: #131413;
}

.patch .model_looks_subheading
{
  color: #1550aa;
  opacity: 1.0;
  margin-top: 2em;
  font-size: 120%;
}

.patch .patchsubsubheading
{
  font-size: 90%;
  line-height: 170%;
  font-style: italic;
  color: #1B222D;
  margin-left: 15px;
}

.patch .patchlist
{
  color: #404040;
  font-size: 90%;
}

.patch .patchlist li
{
  margin-bottom: 0.5em;
  color: #404040;
}

.patch .patchlist ul
{
  margin-left: 2em;
}

.patch .patchsubpaneltext
{
  font-size: 90%;
  line-height: 170%;
  color: #0B0F09;
  margin-left: 15px;
  margin-top: 0;
  text-shadow: 0 0 1px #D4D8D3;
}

.patch .replacementtable
{
  font-weight: bold;
  color: #212121;
  text-align: center;
  margin: auto;
}

.patch .replacementtable td
{
  width: 120px;
}

.patch .replacementtable .rightarrow
{
  font-size: 50px;
  color: #233c41;
  margin-right: 20px;
  display: inline-block;
  padding-bottom: 10px;
}

.patch h3
{
  font-size: 120%;
}

.patch h3.changingfamilieslist
{
  font-size: 90%;
  color: #032306;
}

.patch .patchfamilyheading1
.patch .patchfamilysubheading,
.patch .patchfamilysubheadingright
{
  display: inline-block;
  vertical-align: middle;
}

.patch h2.patchmodelheading
{
  color: white;
  background: #96bbc8;
  padding: 0.2em 0.5em;
  border-radius: 4px;
  line-height: 1.2;
}

.modelsubnotes
{
  font-style: italic;
  font-size: 90%;
  margin-top: 0;
}


.patch .patchfamilysubheadingright
{
  float: right;
}

.patch .patchmodelheading1
{
  display: inline-block;
  line-height: 2.5em;
  vertical-align: middle;
}

.patch .patchmodelheadingsection
{
  margin-bottom: 1em;
}

.patch .patchmodelheadingfamilylink
{
  float: right;
}

.patch .patchfamilysubheading
{
  line-height: 1.6;
  font-style: italic;
}

.patch .taming_skill_notes
{
  width: auto;
  background: #a4afb3;
}

h4.indexsubheading
{
  font-size: 100%;
  margin-left: 2em;
  font-weight: normal;
  color: #013787;
  font-style: italic;
  margin-top: -0.5em;
}

h4.available
{
  color: #00bd15;
}

h4.otherfamily
{
  color: green;
}

h4.unavailable
{
  color: #d0691d;
}

h4.unused
{
  color: #a80000;
}

h1.patchchangesheading
{
}

h2.patchchangesheading
{
  color: #2f0202;
  font-size: 120%;
  margin-top: 1.5em;
}

.patchchangelist
{
  font-size: 90%;
}

.patchchangelist li
{
  margin-bottom: 0.8em;
  line-height: 1.7em;
}

.patchchangelist li strong
{
  color: #010f74;
  font-style: italic;
  display: block;
}

.patchchangelist li a
{
  color: #4612bd;
}


.patch .patchindex
{
  text-align: left;
  margin-bottom: 0.5em;
  font-size: 95%;
}

.patch .patchindex.patch81
{
  margin-left: 1.5em;
  column-count: 2;
}

.patchindexcontainer
{
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 2em;
}

.patchindexdiv
{
  display: block;
  margin: auto;
  background-color: #75b375;
  padding: 0.5em 1.5em;
  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);
  */
  box-shadow: 1px 1px 5px 0px #373a41;
  font-size: 90%;
  max-width: 90%;
  background: #90a7bd;
}

.patch .patchindexdiv h2
{
  margin-top: 0.5em;
  margin-bottom: 1.2em;
  text-align: center;
  /*
  color: white;
  */
  color: #90a7bd;
  background: white;
}

.patchindexdiv.patch81
{
  text-align: left;
}

.patchindexheading
{
  font-weight: bold;
  font-size: 120%;
  text-align: center;
  color: #25247d;
  text-shadow: 1px 1px 1px #dadada;
  margin: 0.3em auto 0.5em;
}

.patchindexcontainer.slim  .patchindexheading
{
  text-align: left;
}

.patchindexsubheading
{
  font-size: 100%;
  font-style: italic;
  color: black;
  margin-top: -0.7em;
}

.patchindexheading.patch81
{
  text-align: left;
}


ul.patchindex li
{
  list-style-type: none;
  margin-bottom: 0.1em;
}

.patch ul.patchindex a
{
  /* color: #662914; */
  color: #ffe0bf;
}

.patch ul.patchindex a:hover,
.patch ul.patchindex a:active
{
  color: orange;
}
 
span.patchindexblock
{
  display: table;
}

span.patchindexblock.breakable
{
  display: block;
}


.patch ul.patchsubindex
{
  margin-bottom: 0.5em;
  margin-left: 0.5em;
  margin-top: 0;
  line-height: 1.4em;
}

.patch ul.patchsubindex li
{
  list-style-type: disc;
  list-style-position: inside;
  /* color: #9f9f9f; */
  color: #fff;
}

.patch ul.patchsubindex a
{
  /* color: #001a74; */
  font-weight: bold;
  color: #fff;
}

.patch ul.patchsubindex a:hover,
.patch ul.patchsubindex a:active
{
  color: orange;
}

.patchindexkey
{
  text-align: center;
  font-style: italic;
  font-size: 85%;
  /* color: #8a7819; */
  color: #ffef98;
}

.patch .model_looks_big_thumb img
{
  width: 150px;
}

.patch .model_looks_big_thumb .look_thumb_label img
{
  width: 14px;
  margin-right: 0.2em;
}


a.smalliconlink
{
  white-space: nowrap;
}

.patchchangelist li a:hover,
.patchchangelist li a:active
{
}

.patchlogopet,
.patchlogo.petflanked
{
  display: inline-block;
}

.patchlogopet
{
  height: 200px;
}

img.patchchangesfamilyicon,
img.patchchangesspellicon
{
  display: inline-block;
  height: 1.2em;
  vertical-align: text-bottom;
  margin-right: 0.15em;
}

/* for home page: */

.index .indexpatchpagelink
{
  text-decoration: none;
  font-weight: bold;
  color: #201e8f;
}

.index .indexpatchpagelink.updates
{
  color: #4b3030;
}

.index .indexpatchpagelink.updates.nzoth
{
  color: #641588;
}

.index .indexpageslogo
{
  margin-left: auto;
  margin-right: auto;
}

.index a.indexpatchpagelink:hover,
.index a.indexpatchpagelink:active
{
  color: #a4a4a4;
  text-decoration: underline;
}

.patchnew:hover,
.patchnew:active
{
  color: #3d6bed;
}

.patchindextext
{
  line-height: 100%;
}

.patchnew
{
  font-size: 110%;
  margin-right: 0.2em;
  color: #515581;
}

.patchtag
{
  width: 42px;
  display: inline-block;
  margin-right: 0.2em;
  vertical-align: bottom;
}


.index .patchlink
{
  vertical-align: top;
  line-height: 15pt;
  text-align: center;
  font-size: 115%;
  width: 100%;
  display: block;
  line-height: 15pt;
  vertical-align: top;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
}

p.homeintro.classic
{
  text-align: center;
  margin: 2em 1em 3em;
}

img.indexpagepatchlogo
{
  margin: 0 auto 0;
  width: 52%;
}

.patch .patchreplacementtable,
.patch .patchreplacementtable th,
.patch .patchreplacementtable td
{
  font-weight: bold;
  color: #212121;
  text-align: center;
  margin: auto;
  padding-top: 30px;
  padding-bottom: 15px;
  color: #13314a;
}

.patch .patchreplacementtable tr
{

}

.patch .patchreplacementtable th.patchoriginallook,
.patch .patchreplacementtable th.patchreplacementlook
{

}

.patch .patchreplacementtable td.patchreplacementarrowcell
{
  border-top: 3px double rgb(170, 204, 170);
}

.patch .patchreplacementtable tr:nth-child(2) td.patchreplacementarrowcell
{
  border-top: none;
}

.patch #content2 h2.patchreplacementfamilyheading
{
  font-size: 160%;
  text-align: center;
  font-family: "Arial Black","Arial Bold",Gadget,sans-serif;
  color: #29378a;
  text-shadow: 1px 1px 1px #b6c0e0;
}

.patch #content2 h3.patchreplacementmodelheading
{
  font-size: 130% !important;
  color: #32456f;
}

.patch .patchreplacementtable td
{
}

.patch .patchreplacementtable td a img
{
  width: 200px;
}

.patch .patchreplacementtable div.modellooksbigthumb
{
  width: 150px;
}


.patch #content2 .patchreplacementtable a
{
  display: inline-block;
  padding: 5px;
}

.patch #content2 .patchreplacementtable a:active,
.patch #content2 .patchreplacementtable a:hover
{
  color: #266fe1;
  box-shadow: 0px 0px 4px #acb1bc;
  border-radius: 10px;
}

.patch #content2 .patchreplacementtable .patchreplacementarrowcell a:active,
.patch #content2 .patchreplacementtable .patchreplacementarrowcell a:hover
{
  box-shadow: none;
}

.patch .patchreplacementtable .patchreplacementarrow
{
  font-size: 600%;
  color: #1c4f9c;
  display: block;
  padding: 35px;
  text-shadow: 2px 2px 4px #9a9da2;
}

.patch .patchreplacementtable .patchreplacementgifpointer
{
  font-size: 200%;
  display: block;
  padding: 0 5px;
  border: 2px solid transparent;
}


.patch #content2 .patchreplacementtable .patchreplacementarrowcell:active .patchreplacementgifpointer,
.patch #content2 .patchreplacementtable .patchreplacementarrowcell:hover .patchreplacementgifpointer
{
  border: 2px solid #c92e5f;
  box-shadow: 0 0 2px #ff0036;
}


.patch #content2 .patchreplacementtable tr.replacementlooknotes td
{
  font-weight: normal;
  font-style: italic;
  font-size: 90%;
  padding-top: 0;
  padding-bottom: 30px;
}

hr.indexdivide
{
  width: 100%;
  margin: 2.5em auto 1.5em;
  border: 0;
  border-bottom: 3px double #7D9575;
}

.patch #content2 hr.familydivide.replacementtable
{
  margin-top: 1.5em;
}

.patch #content2 h2.indexheading
{
  text-align: center;
  margin-top: 1em;
}


/* Battle for Azeroth Pages */

.bfa h1
{
  color: #0e0d4d;
  font-size: 160%;
  margin-top: 1em;
  text-align: center;
}

.bfa .titleappend
{
  font-weight: normal;
  font-size: 85%;
}

.bfa .bfasubtitle
{
  color: #1b2016;
  text-align: center;
  font-size: 90%;
  line-height: 1.5;
}

.bfa .bfasubtitle a,
.bfa .bfasubtitle a:hover
{
  color: #0a53c5;
}

.bfa h2
{
  color: #0b3b83;
  margin-top: 35px;
  font-size: 130%;
}

.bfa h2.bfafamilyheading
{
  font-size: 140%;
  margin-top: 0;
  margin-bottom: 1.5em;
}

.bfa h2.bfafamilyheading.hasnote
{
  margin-bottom: 0.5em;
}

.bfa h2.bfafamilyheading .familynewtag
{
  font-size: 90%;
  color: #a72300;
  font-variant: all-petite-caps;
  font-style: italic;
}

.bfa h2.bfafamilyheading .familynotamestag
{
  font-size: 90%;
  color: #902604;
  font-variant: all-petite-caps;
}

.bfa h2 img.bfafamilyicon
{
  display: inline-block;
  margin-right: 0.2em;
  vertical-align: middle;
  width: 2em;
}


.bfa h2 span.untameheading
{
  color: #560D0D;
  font-size: 90%;
  font-style: italic;
  font-variant: small-caps;
}

.family_notes
{
  font-style: italic;
  font-weight: bold;
  font-size: 95%;
  line-height: 1.5em;
  /* color: #5b36a4; */
  color: #322c3c;
}

.family_notes img.abilityicon
{
  width: 1.1em;
  height: 1.1em;
  vertical-align: text-bottom;
  margin-right: 0.1em;
}

.updates_append
{
  font-style: italic;
  font-weight: bold;
  font-size: 95%;
  line-height: 1.5em;
  color: #5b36a4;
}



.petopiaindexcontainer
{
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 2em;
}

.petopiaindexcontainer.slim
{
  width: max-content;
  text-align: left;
}

.petopiaindexdiv
{
  display: block;
  margin: auto;
  background-color: #75b375;
  padding: 0.5em 1.5em;
  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);
  font-size: 90%;
  max-width: 90%;
  margin-bottom: 3em;
}
.petopiaindexcontainer.slim .petopiaindexdiv
{
  width: max-content;
  max-width: inherit;
}

.petopiaindexdiv h2
{
  margin-top: 1em;
  margin-bottom: 0.7em;
  text-align: center;
}

.petopiaindexheading
{
  font-weight: bold;
  font-size: 100%;
  text-align: center;
  color: white;
  background-color: #659365;
  margin: 0.3em auto 0.5em;
  padding: 0 0.5em;
  border: 1px solid #b0bfb0;
}

.petopiaindexcontainer.slim  .petopiaindexheading
{
  text-align: left;
}

.petopiaindexsubheading
{
  font-size: 100%;
  font-style: italic;
  color: black;
  margin-top: -0.7em;
}

.petopiaindex
{
  font-size: 90%;
  column-count: 3;
  margin-left: 20px;
}

.petopiaindexcontainer.slim  .petopiaindex
{
  text-align: left;
}

.petopiaindexcontainer.onecol .petopiaindex
{
  column-count: 1;
}

.petopiaindexcontainer.twocol .petopiaindex
{
  column-count: 2;
}

.petopiaindexcontainer.threecol .petopiaindex
{
  column-count: 3;
}

ul.petopiaindex a
{
  color: #1f4357;
}

ul.petopiaindex li
{
  list-style-type: disc;
  margin-bottom: 0.1em;
}

ul.petopiaindex li.headingli
{
  list-style-type: none;
  color: black;
}

ul.petopiaindex li.headingli a
{
  color: #511802;
}

ul.petopiasubindex
{
  margin-bottom: 0.5em;
  margin-left: 0.5em;
  margin-top: 0;
  line-height: 1.4em;
}

ul.petopiasubindex li
{
  list-style-type: disc;
  list-style-position: inside;
  color: #9f9f9f;
}

ul.petopiasubindex a
{
  color: #001a74;
  font-weight: bold;
}

ul.petopiasubindex a:hover,
ul.petopiasubindex a:active
{
  color: orange;
}

.petopiasubindex li a
{
  font-weight: normal;
}

ul.petopiaindex a:hover,
ul.petopiaindex a:active
{
  color: orange;
}

span.petopiaindexblock
{
  display: table;
}

span.petopiaindexblock.breakable
{
  display: block;
}

img.petopiaindexicon
{
  width: 25px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

.petopiaindexkey
{
  text-align: center;
  font-style: italic;
  font-size: 85%;
  color: #8a7819;
}


.bfa h3
{
  color: #15458c;
  font-size: 130% !important;
}

.bfa p a
{
  text-decoration: none;
  font-weight: bold;
  color: #2f72d8;
  font-size: 95%;
}

.bfa #content2 a:active,
.bfa #content2 a:hover
{
  color: #4bd0fb;
}

.bfa #content2 .bfalogo
{
  width: 450px;
  margin: 0 auto;
  background: radial-gradient(ellipse, white 10%, #edfbed 30%, #dcffdc 80%);
}

.bfa #content2 .bfalogo.patch81
{
  width: 650px;
}

.bfa .bfasubheading
{
  font-size: 95%;
  line-height: 170%;
  font-style: italic;
  color: #1B222D;
}

.bfa .bfaindex,
.bfa .bfaindex2
{
  column-count: 3;
}

.bfa .bfaindexcontainer.onecol .bfaindex,
.bfa .bfaindexcontainer.onecol .bfaindex2
{
  column-count: 1;
}

.bfa .bfaindexcontainer.twocol .bfaindex,
.bfa .bfaindexcontainer.twocol .bfaindex2
{
  column-count: 2;
}

img.tinythumbinlinelist
{
  display: inline-block;
  vertical-align: middle;
  width: 80px;
  margin-right: 0.2em;
}


.bfa ul.bfaindex li.headingli
{
  list-style-type: none;
  color: black;
}

.bfa ul.bfaindex2 li
{
  list-style-type: none;
  display: inline-block;
}

.bfa .bfasubindex
{
  margin-left: 0;
}

.bfa .bfasubindex li
{
  list-style-type: none;
}

.bfa .bfasubindex li a
{
  font-weight: normal;
}

.bfa img.bfaindexicon
{
  width: 25px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

.bfa .unusedselector
{
  margin: 10px 0 20px 0;
}

.bfa .unusedLabelExtra
{
  color: #131413;
}

.bfa .model_looks_subheading
{
  color: #1550aa;
  opacity: 1.0;
  margin-top: 2em;
  font-size: 120%;
}

.bfa .bfasubsubheading
{
  font-size: 90%;
  line-height: 170%;
  font-style: italic;
  color: #1B222D;
  margin-left: 15px;
}

.bfa .bfasubpaneltext
{
  font-size: 90%;
  line-height: 170%;
  color: #0B0F09;
  margin-left: 15px;
  margin-top: 0;
  text-shadow: 0 0 1px #D4D8D3;
}

.bfa .replacementtable
{
  font-weight: bold;
  color: #212121;
  text-align: center;
  margin: auto;
}

.bfa .replacementtable td
{
  width: 120px;
}

.bfa .replacementtable .rightarrow
{
  font-size: 50px;
  color: #233c41;
  margin-right: 20px;
  display: inline-block;
  padding-bottom: 10px;
}

.bfa h3
{
  font-size: 120%;
}

.bfa h3.changingfamilieslist
{
  font-size: 90%;
  color: #032306;
}

.bfa .bfafamilyheading1,
.bfa .bfafamilysubheading,
.bfa .bfafamilysubheadingright
{
  display: inline-block;
  line-height: 2.5em;
  vertical-align: middle;
}

.modelsubnotes
{
  font-style: italic;
  font-size: 90%;
  margin-top: 0;
}

hr.familydivide.prebfa
{
  border-bottom: 3px double #9FC992;
}

.bfa .prebfaindex
{
  column-count: 2;
  text-align: left;
}



.prebfaindexcontainer
{
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 2em;
}

.prebfaindexdiv
{
  display: inline-block;
  margin: auto;
  background-color: #75b375;
  color: #F5FEEE;
  padding: 0.5em 1.5em;
  border: 2px solid #E4E7ED;
  border-radius: 7px;
  padding: 0.5em 1em;
  box-shadow: 1px 1px 5px 0px #373a41, 1px 1px 5px 0px #404144 inset;
  font-size: 90%;
}

.prebfaindexheading
{
  font-weight: bold;
  font-size: 120%;
  text-align: center;
  color: #390000;
  text-shadow: 1px 1px 1px #dadada;
  margin: 0;
}

ul.prebfaindex
{
  column-count: 2;
  column-gap: 5em;
  margin-bottom: 0.5em;
}

ul.prebfaindex li
{
  list-style-type: none;
  margin-bottom: 0.5em;
}

.prebfaindeximg
{
  display: inline;
  vertical-align: middle;
  margin-right: 0.3em;
  width: 50px;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 0 0px 2px #99ce99;
}

h2.prebfanotes
{
  font-size: 120%;
  color: #1641bc;
  text-shadow: 1px 1px 0 #b6c3e9;
}

ul.prebfanotes
{
  font-size: 90%;
  width: 80%;
}

ul.prebfanotes li
{
  margin-bottom: 0.5em;
}

ul.prebfanotes li a
{
  color: #0042ff;
  text-shadow: 1px 1px 1px #e6e6e9;
}

ul.prebfanotes li a:hover,
ul.prebfanotes li a:active
{
}

.bfa ul.prebfaindex a
{
  color: #420c0c;
}

.bfa ul.prebfaindex a:hover,
.bfa ul.prebfaindex a:active
{
  color: orange;
}

.bfa .bfafamilysubheadingright
{
  float: right;
}

.bfa .bfamodelheading1
{
  display: inline-block;
  line-height: 2.5em;
  vertical-align: middle;
}

.bfa h1.prebfa
{
  margin-top: 1em;
  line-height: 1.5em;
  text-shadow: 1px 1px 1px #c6c6e9;
}

.bfa h3.prebfa
{
  color: #0f52b6;
  font-size: 150%;
}


.bfa .bfamodelheadingfamilylink
{
  float: right;
}

.bfa .bfafamilysubheading
{
  line-height: 1.6;
  font-style: italic;
}

h4.indexsubheading
{
  font-size: 100%;
  margin-left: 2em;
  font-weight: normal;
  color: #013787;
  font-style: italic;
  margin-top: -0.5em;
}

h4.available
{
  color: #00bd15;
}

h4.otherfamily
{
  color: green;
}

h4.unavailable
{
  color: #d0691d;
}

h4.unused
{
  color: #a80000;
}

h1.bfachangesheading
{
}

h2.bfachangesheading
{
  color: #2f0202;
  font-size: 120%;
  margin-top: 1.5em;
}

.bfachangelist
{
  font-size: 90%;
}

.bfachangelist li
{
  margin-bottom: 0.8em;
  line-height: 1.7em;
}

.bfachangelist li strong
{
  color: #010f74;
  font-style: italic;
  display: block;
}

.bfachangelist li a
{
  color: #4612bd;
}


.bfa .bfaindex
{
  text-align: left;
  margin-bottom: 0.5em;
  font-size: 95%;
}

.bfa .bfaindex.patch81
{
  margin-left: 1.5em;
  column-count: 2;
}

.bfaindexcontainer
{
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 2em;
}

.bfaindexdiv
{
  display: block;
  margin: auto;
  background-color: #75b375;
  padding: 0.5em 1.5em;
  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);
  font-size: 90%;
  max-width: 90%;
}

.bfa .bfaindexdiv h2
{
  margin-top: 1em;
  margin-bottom: 0.7em;
  text-align: center;
}

.bfaindexdiv.patch81
{
  text-align: left;
}

.bfaindexheading
{
  font-weight: bold;
  font-size: 120%;
  text-align: center;
  color: #25247d;
  text-shadow: 1px 1px 1px #dadada;
  margin: 0.3em auto 0.5em;
}

.bfaindexcontainer.slim  .bfaindexheading
{
  text-align: left;
}

.bfaindexsubheading
{
  font-size: 100%;
  font-style: italic;
  color: black;
  margin-top: -0.7em;
}

.bfaindexheading.patch81
{
  text-align: left;
}


ul.bfaindex li
{
  list-style-type: none;
  margin-bottom: 0.1em;
}

.bfa ul.bfaindex a
{
  color: #662914;
}

.bfa ul.bfaindex a:hover,
.bfa ul.bfaindex a:active
{
  color: orange;
}

span.bfaindexblock
{
  display: table;
}

span.bfaindexblock.breakable
{
  display: block;
}


.bfa ul.bfasubindex
{
  margin-bottom: 0.5em;
  margin-left: 0.5em;
  margin-top: 0;
  line-height: 1.4em;
}

.bfa ul.bfasubindex li
{
  list-style-type: disc;
  list-style-position: inside;
  color: #9f9f9f;
}

.bfa ul.bfasubindex a
{
  color: #001a74;
  font-weight: bold;
}

.bfa ul.bfasubindex a:hover,
.bfa ul.bfasubindex a:active
{
  color: orange;
}

.bfaindexkey
{
  text-align: center;
  font-style: italic;
  font-size: 85%;
  color: #8a7819;
}

.bfa div.model_looks_big_thumb img
{
  width: 150px;
}


a.smalliconlink
{
  white-space: nowrap;
}

.bfachangelist li a:hover,
.bfachangelist li a:active
{
}

.bfalogopet,
.bfalogo.petflanked
{
  display: inline-block;
}

.bfalogopet
{
  height: 200px;
}

img.bfachangesfamilyicon,
img.bfachangesspellicon
{
  display: inline-block;
  height: 1.2em;
  vertical-align: text-bottom;
  margin-right: 0.15em;
}

/* for home page: */

.index .indexpatchpagelink
{
  text-decoration: none;
  font-weight: bold;
  color: #201e8f;
}

.index .indexpatchpagelink.updates
{
  color: #4b3030;
}

.index .indexpatchpagelink.updates.nzoth
{
  color: #641588;
}

.index .indexpageslogo
{
  margin-left: auto;
  margin-right: auto;
}

.index a.indexpatchpagelink:hover,
.index a.indexpatchpagelink:active
{
  color: #a4a4a4;
}

.bfanew:hover,
.bfanew:active
{
  color: #3d6bed;
}

.bfaindextext
{
  line-height: 100%;
}

.bfanew
{
  font-size: 110%;
  margin-right: 0.2em;
  color: #515581;
}

.bfatag
{
  width: 42px;
  display: inline-block;
  margin-right: 0.2em;
  vertical-align: bottom;
}


.index .patchlink
{
  vertical-align: top;
  line-height: 15pt;
  text-align: center;
  font-size: 115%;
  width: 100%;
  display: block;
  line-height: 15pt;
  vertical-align: top;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
}

p.homeintro.classic
{
  text-align: center;
  margin: 2em 1em 3em;
}

img.indexpagebfalogo
{
  margin: 0 auto 0;
  width: 52%;
}

.bfa .bfareplacementtable,
.bfa .bfareplacementtable th,
.bfa .bfareplacementtable td
{
  font-weight: bold;
  color: #212121;
  text-align: center;
  margin: auto;
  padding-top: 30px;
  padding-bottom: 15px;
  color: #13314a;
}

.bfa .bfareplacementtable tr
{

}

.bfa .bfareplacementtable th.bfaoriginallook,
.bfa .bfareplacementtable th.bfareplacementlook
{

}

.bfa .bfareplacementtable td.bfareplacementarrowcell
{
  border-top: 3px double rgb(170, 204, 170);
}

.bfa .bfareplacementtable tr:nth-child(2) td.bfareplacementarrowcell
{
  border-top: none;
}

.bfa #content2 h2.bfareplacementfamilyheading
{
  font-size: 160%;
  text-align: center;
  font-family: "Arial Black","Arial Bold",Gadget,sans-serif;
  color: #29378a;
  text-shadow: 1px 1px 1px #b6c0e0;
}

.bfa #content2 h3.bfareplacementmodelheading
{
  font-size: 130% !important;
  color: #32456f;
}

.bfa .bfareplacementtable td
{
}

.bfa .bfareplacementtable td a img
{
  width: 200px;
}

.bfa .bfareplacementtable div.modellooksbigthumb
{
  width: 150px;
}


.bfa #content2 .bfareplacementtable a
{
  display: inline-block;
  padding: 5px;
}

.bfa #content2 .bfareplacementtable a:active,
.bfa #content2 .bfareplacementtable a:hover
{
  color: #266fe1;
  box-shadow: 0px 0px 4px #acb1bc;
  border-radius: 10px;
}

.bfa #content2 .bfareplacementtable .bfareplacementarrowcell a:active,
.bfa #content2 .bfareplacementtable .bfareplacementarrowcell a:hover
{
  box-shadow: none;
}

.bfa .bfareplacementtable .bfareplacementarrow
{
  font-size: 600%;
  color: #1c4f9c;
  display: block;
  padding: 35px;
  text-shadow: 2px 2px 4px #9a9da2;
}

.bfa .bfareplacementtable .bfareplacementgifpointer
{
  font-size: 200%;
  display: block;
  padding: 0 5px;
  border: 2px solid transparent;
}


.bfa #content2 .bfareplacementtable .bfareplacementarrowcell:active .bfareplacementgifpointer,
.bfa #content2 .bfareplacementtable .bfareplacementarrowcell:hover .bfareplacementgifpointer
{
  border: 2px solid #c92e5f;
  box-shadow: 0 0 2px #ff0036;
}


.bfa #content2 .bfareplacementtable tr.replacementlooknotes td
{
  font-weight: normal;
  font-style: italic;
  font-size: 90%;
  padding-top: 0;
  padding-bottom: 30px;
}

hr.indexdivide
{
  width: 100%;
  margin: 2.5em auto 1.5em;
  border: 0;
  border-bottom: 3px double #7D9575;
}

.bfa #content2 hr.familydivide.replacementtable
{
  margin-top: 1.5em;
}

.bfa #content2 h2.indexheading
{
  text-align: center;
  margin-top: 1em;
}

.showuntameables
{
  display: none;
}

.showuntameableslabel
{
  font-weight: bold;
  font-size: 85%;
  display: block;
  width: 17em;
  margin: 0 auto;
  line-height: 2em;
  position: relative;
  padding: 0em 0.72em 0em 2.5em;
  border: 2px solid #fff;
  border-radius: 7px;
  color: #3e5a3e;
  background-color: #73a773;
  box-shadow: 0 0 15px 1px #b3cbb3;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, box-shadow .2s;
  vertical-align: middle;
}

.showuntameableslabel::before
{
  content: '';
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  width: 1em;
  height: 1em;
  background-color: #b1ccb1;
  border: 2px solid #e9e9e9;
  border-radius: 5px;
  transition: background-color .2s;
  line-height: 1em;
  color: white;
  font-size: 150%;
  text-align: center;
  box-shadow: 0 0 2px 1px #9bbc9b inset;
}

.showuntameables:checked + .showuntameableslabel::before
{
  background-color: #fff;
  content: "\2713";
  font-weight: bold;
  color: #d10000;
  text-shadow: 0 0 1px #f00;
  box-shadow: none;
}

.showuntameableslabel:hover,
.showuntameables:focus + .showuntameableslabel
{
  box-shadow: 0 0 15px 1px #ddeddd;
}

.showuntameables:checked + .showuntameableslabel
{
  background-color: #73a773;
  color: white;
}

.showuntameables:not(:checked)  + .showuntameableslabel .showuntameableslabelincl
{
  display: none;
}

.showuntameables:checked  + .showuntameableslabel .showuntameableslabelexcl
{
  display: none;
}


.showuntameables:not(:checked)  ~ .petmodelgallery.unavailable
{
  display: none;
}

div.matchingpanel
{
  margin-bottom: 40px;
  display: inline-grid;
  grid-template-columns: auto auto auto auto;
  gap: 0.7em;
  margin-left: 2em;
}

div.petmatchpanel
{
  margin-bottom: 2em;
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 1em 3em;
  margin-left: 2em;
}

div.petmatchitem
{
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 0 2px #589758;
}

a.matchingtable_matchthumb,
a.matchingtable_lookthumb
{
  width: 120px;
  font-size: 80%;
  display: inline-block;
  text-align: center;
  line-height: 1.3;
  padding: 0.6em 0.6em;
  border: 1px solid #d5f2d5;
  font-size: 75%;
  line-height: 1.2;
  box-sizing: border-box;
  height: 100%;
  vertical-align: top;
}

a.matchingtable_matchthumb
{
  background-color: white;
  color: #3E4CB9;
}

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

a.matchingtable_lookthumb
{
  color: #48032a;
}

a.matchingtable_lookthumb:active,
a.matchingtable_lookthumb:hover
{
  color: #b72f47 !important;
}

a.matchingtable_matchthumb img,
a.matchingtable_lookthumb img
{
  width: 100px;
  margin-left: auto;
  margin-right: auto;
}

.companionsubname,
.mountsubname
{
  display: block;
  font-size: 95%;
}

.matchsubnameprefix
{
  width: 100%;
  display: block;
  font-size: 80%;
  padding: 1px;
  color: #515151;
  font-style: italic;
}

/* ------------------------------------------- */

.familyicon
{
  display: block;
  position: relative;
}

.familyicon .exotictag
{
  font-weight: bold;
  font-size: 7pt;
  color: #24F2EA;
  text-shadow: -1px -1px 2px black, 2px 2px 2px black;
  position: absolute;
  top: 7px;
  left: 59px;
  transform: rotate(45deg);
}

.familylink,
.familylink:visited
{
  text-decoration: none;
  font-size: 10pt;
  font-weight: bold;
  color: #301C1C;
  font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}

.familylink:hover,
.familylink:active
{
  color: #008000;
}

/* These pages are not linked anywhere, but remain live until they are old enough to be decrepit. */

/* Patch 4.0 */

body.patch40_abilities h2 { margin: 20px 0 5px 0; }
body.patch40_abilities table.ability_details th
{
  padding: 5px;
  font-weight: normal;
}


/* New Navigation Bar */


#navbar
{
 /* position: fixed; */
  top: 0;
  width: 100%;
  background-color: rgb(114, 168, 114);
  color: #FDFDFD;
  z-index: 9999;
  text-align: center;
}

#navbar #navmenu
{
  display: inline-table;
  border-collapse: collapse;
  margin: 0;
}

#navbar #navmenu:after
{
  content: "";
  clear: both;
  display: block;
}

#navbar #navmenu a,
#navbar #navmenu a:visited
{
  color: inherit;
  display: block;
  text-decoration: none;
}

#navbar #navmenu > li
{
  display: table-cell;
  position: relative;
  vertical-align: middle;
  border: none;
  text-align: center;
  padding: 0 1.3em;
}

#navbar #navmenu > li .navlabel
{
  display: inline-block;
  line-height: 3.0em;
  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;
  margin: 0;
}

#navbar #navmenu li ul li
{
  border-bottom: 1px solid rgb(189, 216, 189);
  width: 150%;
  background-color: inherit;
  line-height: 1.5em;
  padding: 10px;
  list-style-type: none;
}

#navbar #navmenu li ul li.menusubtitle
{
  font-style: italic;
  color: #FFF86C;
}

#navbar #navmenu li:hover,
#navbar #navmenu li:focus,
#navbar #navmenu li:active
{
  background-color: rgb(72, 120, 72);
}

#navbar #navmenu li:hover ul,
#navbar #navmenu li:focus ul,
#navbar #navmenu li:active ul
{
  visibility: visible;
  background-color: rgb(114, 168, 114);
  width: 100%;
}

#navbar #navmenu li:hover ul li,
#navbar #navmenu li:focus ul li,
#navbar #navmenu li:active ul li
{
  visibility: visible;
}

#navbar #navmenu .headermenuarrow
{
  margin-left: 5px;
  vertical-align: middle;
  position: relative;
  top: 3px;
  font-size: 80%;
}

#navbar #navmenu .headerbrokenrightarrow
{
  margin-left: 5px;
  font-size: 150%;
  vertical-align: middle;
  position: relative;
  bottom: 2px;
}

#navbar img
{
  display: inline;
  height: 2.3em;
  vertical-align: middle;
}


#navbar img .homeicon
{
}




#adBannerLeft,
#adBannerRight
{
  display: inline-block;
  vertical-align: top;
  position: relative;
  top: 130px;
  /* border: 3px solid #ADC0AD; */
  border: 3px solid #C7DDC7;
  padding: 5px;
  border-radius: 7px;
  white-space: normal;
  width: 160px;
  height: 600px;
  border-color: #5f865f;
}

#adBannerLeft
{
}

#adBannerRight
{
}


.petopia_wrapper
{
  position: relative;
  width: 750px;
  text-align: left;
  margin: 0 20px;
  border: 3px solid #232D23;
  border-top: none;
  border-bottom: none;
  background: #dcffdc;
  font-size: 0.9em;
  display: inline-block;
  white-space: normal;
  box-shadow: 0 0 10px 3px #659765;
  border-color: #82b382;
}

.petopia_wrapper.classic
{
  background: #232D22;
  color: #EFD3AE;
  border: 1px solid #EFD3AE;
}

.petopia_wrapper #ad_footer_leaderboard
{
  display: block;
  clear: both;
  margin: 15px auto;
  width: 728px;
  height: 90px;
}

.petopia_wrapper #ad_footer_gallery,
.petopia_wrapper #ad_footer_short
{
  display: none;
}

#ad_header_leaderboard
{
  display: none;
}

#content2
{
  width: 670px;
  margin: 15px auto 140px auto;
}

body[rel='body2']
{
  color: black;
  /* font-family: Verdana, sans-serif; */
  font-family: Arial, sans-serif;
  line-height: 1.75;
  text-align: center;
  overflow-x: scroll;
  white-space: nowrap;
  background: url(../images/petopia_background_tile3.png);
}

body.petopia_body.classic
{
  background: none;
}

#content2 .icons a
{
  text-decoration: none;
  font-size: 90%;
  color: #272C25;
}

#content2 .icons a:hover,
#content2 .icons a:active
{
  color: green;
}

@media (max-width: 640px)
{
  #ad_header_leaderboard
  {
    display: block;
    text-align: center;
    width: 728px;
    height: 90px;
  }

  #adBannerLeft,
  #adBannerRight
  {
    display: none;
  }
}



#navbar2
{
 /* position: fixed; */
  top: 0;
  width: 100%;
  background-color: rgb(114, 168, 114);
  color: #FDFDFD;
  z-index: 9999;
  text-align: center;
  position: relative;
}

.petopia_navbar.classic#navbar2
{
  background-color: #3f573f66;
  color: #FFCC94;
}

#navbar2 #navmenu2
{
  display: inline-table;
  border-collapse: collapse;
  margin: 0;
  width: 100%;
}

.navmenu.classic
{
  table-layout: fixed;
}

#navbar2 #navmenu2:after
{
  content: "";
  clear: both;
  display: block;
}

#navbar2 #navmenu2 a,
#navbar2 #navmenu2 a:visited
{
  color: inherit;
  display: block;
  text-decoration: none;
}

#navbar2 #navmenu2 input
{
  display: none;
}

#navbar2 #navmenu2 .navmenuitem
{
  display: table-cell;
  position: relative;
  vertical-align: middle;
  border: none;
  text-align: center;
}

#navbar2 #navmenu2 .navmenuitem.classic
{
  width: 100%;
}
#navbar2 #navmenu2 .navmenuitem.link.classic
{
  display: table-cell;
}

#navbar2 #navmenu2 input + .navlabel
{
  display: inline-block;
  visibility: visible;
  line-height: 3.0em;
  vertical-align: middle;
  cursor: default;
  width: 100%;
  /* text-align: left; */
  /* margin: 0 1.3em; */
  text-align: center;
}


#navbar2 #navmenu2 input:checked + .navlabel
{
  display: none;
  visibility: hidden;
}

#navbar2 #navmenu2 input + .navlabel + input + .navdummy
{
  display: none;
  visibility: hidden;
}

#navbar2 #navmenu2 input:checked + .navlabel + input + .navdummy
{
  display: inline-block;
  visibility: visible;
}

#navbar2 #navmenu2 #home
{
  width: 180px;
  border: none;
  background: none;
  background-color: white;
  padding: 0;
}

#navbar2 #navmenu2 .navmenuitem ul
{
  display: block;
  visibility: hidden;
  position: absolute;
  text-align: left;
  padding: 0;
  left: 0;
  margin: 0;
  width: 100%;
}

#navbar2 #navmenu2 .navmenuitem ul li
{
  border-bottom: 1px solid rgb(189, 216, 189);
  width: 150%;
  background-color: rgb(114, 168, 114);
  line-height: 1.2;
  padding: 10px;
  list-style-type: none;
}

#navbar2 #navmenu2 .navmenuitem.classic ul li
{
  background-color: #466346;
  border-bottom: 1px solid #678667;
}

#navbar2 #navmenu2 li ul li.menusubtitle
{
  font-style: italic;
  color: #FFF86C;
}

#navbar2 #navmenu2 .navmenuitem:hover,
#navbar2 #navmenu2 .navmenuitem:focus,
#navbar2 #navmenu2 .navmenuitem:active,
#navbar2 #navmenu2 .navmenuitem ul li:hover,
#navbar2 #navmenu2 .navmenuitem ul li:focus,
#navbar2 #navmenu2 .navmenuitem ul li:active
{
  background-color: rgb(72, 120, 72);
}


#navbar2 #navmenu2 .navlabel:hover + input + .navdummy + ul li,
#navbar2 #navmenu2 .navlabel:focus + input + .navdummy + ul li,
#navbar2 #navmenu2 .navlabel:active + input + .navdummy + ul li,
#navbar2 #navmenu2 .navlabel + input + .navdummy + ul:hover li,
#navbar2 #navmenu2 .navlabel + input + .navdummy + ul:focus li,
#navbar2 #navmenu2 .navlabel + input + .navdummy + ul:active li,
#navbar2 #navmenu2 input:checked + .navdummy:hover + ul li
{
  visibility: visible;
  transition-delay: 0.2s;
}

#navbar2 #navmenu2 .navdummy:hover + ul li,
#navbar2 #navmenu2 .navdummy:focus + ul li,
#navbar2 #navmenu2 .navdummy:active + ul li,
#navbar2 #navmenu2 input:checked + .navlabel:hover + input + .navdummy + ul li
{
  visibility: hidden;
}

#navbar2 #navmenu2 .headermenuarrow
{
  margin-left: 5px;
  vertical-align: middle;
  position: relative;
  top: 3px;
  font-size: 80%;
}

#navbar2 #navmenu2 .headerlinkarrow
{
  margin-left: 5px;
  font-size: 80%;
}

#navbar2 #navmenu2 .headerbrokenrightarrow
{
  margin-left: 5px;
  font-size: 150%;
  vertical-align: middle;
  position: relative;
  bottom: 2px;
}

#navbar2 img
{
  display: inline;
  height: 2.3em;
  vertical-align: middle;
}


#navbar2 img .homeicon
{
}

#navbar2 img.bfamenutag
{
  width: 53px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 1px;
}

#navbar2 img.navbarimage.forumlogo
{
  display: inline-block;
  height: 23px;
  margin-right: 0.3em;
}

#navbar2 img.navbarimage.mainsitelogo
{
  display: inline-block;
  height: 16px;
  margin-right: 0.1em;
  margin-bottom: 2px;
}

label#menu_classic_link
{
  color: #F8D4A6;
  text-shadow: 1px 1px 1px #467a46;
}

label#menu_forum_link
{
  color: #f5fbff;
  text-shadow: 1px 1px 1px #4a864a;
}

.npc .npcheading h1
{
  color: white;
  border-radius: 4px;
  padding: 0.5em;
  line-height: 1;
  background: #3e733e;
}

.npc .petstatus
{
  font-weight: bold;
  color: #2b312b;
  background: #fffc;
  display: block;
  padding: 0.2em 0.5em;
  margin-top: 0;
}

.npc .npcheading .familyheading
{
  display: inline;
}

.npc .npcimagecheckbox
{
  display: none;
}

.npc .npc_looks_portrait
{
  display: block;
}

.npc .npc_portrait
{
  width: 95%;
  padding: 1%;
  border: 3px solid #6aa06a;
  border-radius: 7px;
  box-shadow: 0px 0px 1px 1px #afd7af;
}

.npc .npc_portrait_label
{
  text-align: center;
  display: none;
}

/*
.npc #npcimagecheckbox1:checked ~ .npc_looks_portraits .npc_portrait_container #npc_portrait1,
.npc #npcimagecheckbox1:checked ~ .npc_looks_portraits .npc_portrait_container #npc_portrait_label1,
.npc #npcimagecheckbox2:checked ~ .npc_looks_portraits .npc_portrait_container #npc_portrait2,
.npc #npcimagecheckbox2:checked ~ .npc_looks_portraits .npc_portrait_container #npc_portrait_label2,
.npc #npcimagecheckbox3:checked ~ .npc_looks_portraits .npc_portrait_container #npc_portrait3,
.npc #npcimagecheckbox3:checked ~ .npc_looks_portraits .npc_portrait_container #npc_portrait_label3,
.npc #npcimagecheckbox4:checked ~ .npc_looks_portraits .npc_portrait_container #npc_portrait4,
.npc #npcimagecheckbox4:checked ~ .npc_looks_portraits .npc_portrait_container #npc_portrait_label4
{
  display: block;
}
*/

.npc .npc_data_div
{
  display: inline-block;
  width: 40%;
  vertical-align: top;
}

.npc .npc_data_panel
{
  display: block;
  font-size: 85%;
  line-height: 1.3;
  vertical-align: top;
  margin-top: 0.7em;
  border-radius: 7px;
  padding-right: 1em;
  background: #578c57;
  color: white;
  border: 1px solid white;
  width: 95%;
}

.npc .npc_data_panel tr
{
}

.npc .npc_data_panel td
{
  padding: 1em 0 1em 0.5em;
}

.npc .npcdataheading
{
  font-weight: bold;
  color: #fff;
  vertical-align: top;
  text-align: right;
}

.npc .npc_data_panel .npcdataheading
{
  color: white;
}

.npc .npcappearanceheading
{
  font-weight: bold;
  background: #639363;
  color: white;
  padding: 0.2em 0.5em;
  display: block;
  border-radius: 4px;
  margin-top: 0.5em;
  margin-bottom: 1em;
}

.npc .npc_data_panel a:link,
.npc .npc_data_panel a:visited
{
  color: #fdffce;
}

.npc .npc_data_panel a:hover,
.npc .npc_data_panel a:active
{
  color: #fbff7e;
}

.npc .npcdatavalue
{
}

.npc span.statustext
{
  font-variant: none;
  font-weight: bold;
}

.npc .npc_looks_panel
{
  display: inline-block;
  width: 60%;
}

.npc a.npc_portrait_container
{
}

.npc div.model_looks_thumb
{
  padding: 0em 0.1em;
  margin: 0.1em 0.1em;
  width: 72px;
  font-size: 65%;
  font-weight: bold;
  color: #3e3e3e;
  line-height: 1.1;
}

.npc div.model_looks_thumb img
{
  border: 2px solid grey;
  border-radius: 2px;
  width: 70px
}

.npc div.model_looks_thumb  .look_thumb_label_section
{
  width: 100%;
}


.npc .npcimagecheckbox:checked  + .npcimagecheckboxlabel div.model_looks_thumb 
{
  color: #009300;
  text-shadow: 1px 1px 0px #e4f6e4;
}

.npc .npcimagecheckbox:checked  + .npcimagecheckboxlabel div.model_looks_thumb img
{
  border: 2px solid #01a801;
  border-radius: 5px;
  border-bottom: none;
}

.npc .npcimagecheckbox:checked  + .npcimagecheckboxlabel div.model_looks_thumb  .look_thumb_label_section
{
  border-left: 2px solid #01a801;
  border-right: 2px solid #01a801;
}

.npc .model_looks_thumb .look_thumb_label
{
}

.npc .npcimagecheckbox:checked  + .npcimagecheckboxlabel div.model_looks_thumb .look_thumb_label
{
  display: none;
}


.npc_looks_portraits
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.5em 1.5em;
}

.npc .npc_notes_div
{
  margin-top: 2em;
  padding: 1em;
  border: 1px solid white;
  border-radius: 4px;
  color: white;
  background: #639363;
}

.npc .npc_notes_div .pet_notes
{
  font-size: 90%;
  line-height: 145%;
  width: 90%;
  margin: 0 1em;
}

.npctable,
.npctable th,
.npctable td
{
  border: 1px solid white;
  padding: 0.2em 0.4em;
  font-size: 95%;
  line-height: 1.5;
}

.npctable td.othernpcs a,
.npctable td.othernpcs a:visited
{
  color: #4a18bd;
}

.npctable td.othernpcs a:hover,
.npctable td.othernpcs a:active
{
  color: #9741e7;
}

.npctable td.npcid,
.npctable td.npczone,
.npctable td.othernpcs
{
  font-size: 90%;
}

.npctable td.npcid
{
  color: #23236b;
}

.npctable
{
  border: solid 2px #aed7ae;
  box-shadow: 1px 1px 15px 1px #a4bda4;
  margin-top: 15px;
}

.npctable a
{
  text-decoration: none;
  font-weight: bold;
  color: #066306;
  white-space: nowrap;
}

.npctable a:hover,
.npctable active
{
  color: #0b9f0b;
}

.npctable th
{
  background-color: #5c9b67;
  color: white;
}

.npctable th.npclook
{
  background-color: #8ebd8e;
  border-left: none;
  border-right: none;
  border-top: 2px solid white;
  text-shadow: 1px 1px 0px #95ad95;
}

.npctable th.npclook.image
{
  vertical-align: top;
}

.npctable th.npcfamilyname
{
  background-color: #50849c;
}

.npctable th .npclookimage
{
  width: 60px;
  display: inline;
  vertical-align: middle;
}

.npctable tr
{
  background-color: #dcffdc;
}

.npctable tr:nth-child(even)
{
  background-color: #c6e4c6;
}

.npctable.tamecheck tr:nth-child(even)
{
  background-color: inherit;
}


.npcstatusvalue
{
  margin-left: 0.2em;
}

.npc .wowheadlinkicon
{
  display: inline;
  vertical-align: middle;
  margin-right: 0.2em;
}

.npctable th.familyheading
{
  background-color: #1f4fc0;
  line-height: 1;
}

.npc .taming_skill_notes
{
  margin-left: 0;
}

.npc .npc_data_div .taming_skill_notes
{
  box-sizing: border-box;
  width: 95%;
  font-size: 85%;
  border: 1px solid white;
  padding-bottom: 1em;
  line-height: 1.55;
}

.petopiatable,
.petopiatable th,
.petopiatable td
{
  border: 1px solid white;
  padding: 0.5em 1em;
}

.petopiatable
{
  border: solid 2px #aed7ae;
  box-shadow: 1px 1px 15px 1px #a4bda4;
  margin-top: 15px;
}

.petopiatable a
{
  text-decoration: none;
  font-weight: bold;
  color: #066306;
  white-space: nowrap;
}

.petopiatable a:hover,
.petopiatable active
{
  color: #0b9f0b;
}

.petopiatable th
{
  background-color: #68ab68;
  color: white;
  padding: 5px;
}

.petopiatable.zebra tr:nth-child(even),
.petopiatable.dark tr
{
  background-color: #c6e4c6;
}

.starterchart .petopiatable
{
  font-size: 120%;
  color: #272f80;
}

.starterchart .petopiatable img.raceicon
{
  width: 25px;
  border: 1px solid #fcfcfc;
  margin-left: 3px;
}

.starterchart .petopiatable img.raceicon:first
{
  margin-left: 0;
}

.npctable td.tamecheckheading
{
  font-weight: bold;
  background-color: #8349a5;
  color: #fff;
  font-size: 105%;
  margin-top: 2em !important;
  line-height: 1em;
  padding: 0.5em 0.4em;
}

.npctable td.tamecheckheading .tamechecksubheading
{
  color: inherit;
  margin: 0;
  font-style: italic;
  font-size: 80%;
}

.npctable.tamecheck
{
  margin-top: 0.5em;
}

.npctable th.familyheading.tamecheck
{
  background-color: #6d89c9;
}

h2.tamecheck
{
  margin-top: 1.3em !important;
  color: #4a4acf;
  margin-left: 0.1em;
  font-size: 125%;
}