/******************/
/* GENERAL STYLES */
/******************/
html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  word-wrap: break-word;
}
body {
  color: silver;
  font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
  font-size: 12px;
}
form { border: none; }
ul {
  margin: 0;
  padding: 0;
}
li {
  margin-left: 17px;
}
a {
  color: #c37e00;
  text-decoration: none;
}
a:active,
a:visited {
  color: #c37e00;
  text-decoration: none;
}
a:hover {
  color: #F0E80A;
  text-decoration: underline;
}
img {
  border: none
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  color: orange;
  font-family: 'Trebuchet MS';
}
h1 {
  margin-bottom: 14px;
  font-size: 28px;
}
h2 {
  margin-bottom: 10px;
  font-size: 20px;
  color: silver;
}
h3 {
  height: 28px;
  line-height: 28px;
  font-size: 16px;
}
h4 {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 8px;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: orange !important; }
p {
  padding: 0;
  margin: 0 0 12px 0;
}
th { vertical-align: middle; }
td { vertical-align: top; }
table.background { 
  border-left: 1px solid #000000;
  border-right: 1px solid #121212;
}
table.background th {
  padding: 0;
	border-left: solid 1px #d98e01;
	border-right: solid 1px #845500;
  background: #ffa500 linear-gradient(#ffa500, #ad7000);
  color: white;
  font-size: 11px;
}
table.background td {
  padding: 0;
  border-color: #3C3C3C #121212 #131313 #404040;
  border-left: 1px solid #404040;
  border-right: 1px solid #121212;
  border-style: solid;
  border-width: 1px;
  background: #313131 linear-gradient(#272727, #313131);
}
.hr {
  height: 1px;
  margin: 4px 0 6px 0;
  background-color: silver;
}
.hr-small {
  height: 1px;
  margin: 4px 0 6px 0;
  background-color: #555;
  clear: both;
}
input[type='checkbox'] {
  margin: 0;
  padding: 0;
}
input, button, textarea, select {
  margin-bottom: 6px;
  border: 1px solid #c37e00;
  background-color: #222;
  color: silver;
  font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
  font-size: 13px;
  outline: none;
}
input[type='text'], input[type='password'], input[type='email'], input[type='number'], textarea {
  background-color: #111;
}
input:hover, button:hover, textarea:hover, select:hover, button:hover { border-color: orange; }
input:focus, button:focus, textarea:focus, select:focus, button:focus { border-color: silver; }
button, input[type='button'], input[type='submit'] {
  padding: 1px 5px;
  cursor: pointer;
}
button:active, input[type='button']:active, input[type='submit']:active { color: white; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.underline { font-style: underline; }
.hide { display: none; }
.member-name, a.member-name, a.member-name:hover { color: orange; }
.officer-name, a.officer-name, a.officer-name:hover { color: red; }

#tooltip-wrapper {
  display: none;
  position: absolute;
  border: 1px solid #000000;
  border-radius: 3px 3px 3px 3px;
  box-shadow: 4px 4px 15px #000000;
  z-index: 1000;
}
#tooltip-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 0.8; /* everything but IE */
  -ms-filter: "alpha(opacity=80)"; /* IE8 */
  filter: alpha(opacity=80);  /* <IE8 */
  z-index: -1;
}
#tooltip {
  padding: 10px;
  border: 1px solid orange;
  border-radius: 1px 1px 1px 1px;
}
.tooltip-content { display: none; }
.image-wrapper { text-align: center; }
.border-right-none { border-right: none !important; }
.border-left-none { border-left: none !important; }

.hover-replace {}
.hover-replace-hide { display: block; }
.hover-replace-show { display: none; }
.hover-replace:hover .hover-replace-hide { display: none; }
.hover-replace:hover .hover-replace-show { display: block; }

/******************/
/** BASIC LAYOUT **/
/******************/
html {
  background-color: #171717;
  background: #000 url('https://i.imgur.com/Jlmrp2N.jpg') no-repeat top left;
  background-attachment: fixed;
}
#wrapper {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  z-index: 2;
}
#header {
  margin-bottom: 10px;
  border-radius: 0 0 10px 10px;
  background: url('https://i.imgur.com/lYQcoJe.png') no-repeat center top;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  overflow: hidden; /* This is needed because margin-top in #menu will push down the element */
}
#home-link {
  display: block;
  float: left;
  height: 90px;
  width: 190px;
  color: transparent;
}
#menu {
  display: table;
  table-layout: fixed;
  width: 780px;
  margin: 40px 0 10px 210px;
}
#menu li {
  display: table-cell;
  list-style: none;
  text-align: center;
}
#menu li a {
  display: block;
  height: 39px;
  line-height: 39px;
  border-left: 1px solid #303030;
  border-top: 1px solid #303030;
  border-right: 1px solid #131313;
  background-color: #333;
  background: url('/images/layout/content-bg.png') top left repeat;
  color: silver;
}
#menu li a:hover {
  background-image: url('/images/layout/content-bg-bright.png');
  text-decoration: none;
}
#menu li:first-child a { border-radius: 10px 0 0 10px; }
#menu li:last-child a { border-radius: 0 10px 10px 0; }

.content-box {
  padding: 10px;
  border-left: 1px solid #303030;
  border-top: 1px solid #303030;
  border-right: 1px solid #131313;
  border-bottom: 1px solid #131313;
  border-radius: 10px;
  margin-bottom: 10px;
  background: url('/images/layout/content-bg.png') top left repeat;
}

#content-wrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-radius: 10px 10px 0 0 ;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  background: url('/images/layout/black-opaque-bg.png') repeat top left;
}

#sidebar {
  display: table-cell;
  table-layout: fixed;
  width: 190px;
  padding: 10px 0 0 10px;
  vertical-align: top;
}
#content {
  display: table-cell;
  padding: 10px 10px 0 10px;
  vertical-align: top;
  overflow: hidden;
}


/******************/
/****** INDEX *****/
/******************/
#login-wrapper, #mumble-users-wrapper, #streamers-wrapper, #index-recruitment-wrapper, #index-progression-wrapper { margin-bottom: 12px; }
#login-wrapper #login, #mumble-users, #streamers, #index-recruitment, #index-progression { }
#mumble-users, #streamers { }
#mumble-users ul, #mumble-users li, #streamers li { list-style-type: none; }
#mumble-users li {
  position: relative;
  line-height: 17px;
}
li.mumble-channel-name {
  margin: 0;
}
.mumble-channel-icon {
  position: absolute;
  left: 0;
  top: 5px;
  width: 6px;
  height: 6px;
  background: url('/images/layout/sprite.png?v=14') -48px -105px no-repeat;
}
li.mumble-user {
  margin: 0 0 0 14px;
  color: orange;
}
li.mumble-user-officer { color: red; }
.mumble-user-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 14px;
  background: url('/images/layout/sprite.png?v=14') -24px -105px no-repeat;
}
.mumble-user-officer .mumble-user-icon {
  background: url('/images/layout/sprite.png?v=14') -36px -105px no-repeat;
}
.streamer {
  margin: 0;
}
.streamer-character {
  font-size: 0.9em;
  text-indent: 14px;
}
#index-recruitment { width: 100%; }
#index-progression { padding: 0; }

/******************/
/****** NEWS *****/
/******************/
.news { margin-bottom: 30px; }
.news-title { margin-bottom: 4px; }
.news-info, .news-comment-info { font-size: 10px; }
.news-hidden { 
  opacity: 0.5; /* everything but IE */
  -ms-filter: "alpha(opacity=50)"; /* IE8 */
  filter: alpha(opacity=50);  /* <IE8 */
}
.news-content img {
  display: block;
  margin: 0 auto;
}
.news-comments-link, .news-edit-link {
  float: right;
  font-size: 12px;
}
#news-comments {}
.news-comment {
  margin-bottom: 20px;
  overflow: hidden;
}
.news-comment-toolbar { float: right;}
.news-comment-delete-btn {
  display: inline-block;
  width: 20px;
  height: 13px;
  border: none;
  background: url('/forum/styles/qe/imageset/icon_post_delete.gif') no-repeat left top;
  cursor: pointer;
}
.news-comment-edit-btn {
  display: inline-block;
  width: 35px;
  height: 13px;
  margin-left: 3px;
  border: none;
  background: url('/forum/styles/qe/imageset/en/icon_post_edit.gif') no-repeat left top;
  cursor: pointer;
}
.news-comment-text { margin-bottom: 10px; }
.news-comment-last-modified {
  margin-top: 15px;
  font-size: 10px;
  font-style: italic;
}
.news-comment-edit-form textarea, #news-comment-post-reply-form textarea { width: 99%; }
#news-comment-reply { margin-top: 20px; }
#news-comment-reply-btn {
  width: 103px;
  height: 20px;
  border: none;
  background: url('/forum/styles/qe/imageset/en/button_topic_reply.gif') no-repeat left top;
  cursor: pointer;
}
#news-comment-post-form { display: none; }

/******************/
/*** PROGRESSION **/
/******************/
#progression .instance-progression {
  width: 100%;
  table-layout: fixed;
  margin-bottom: 40px;
}
#progression .instance-progression th {
  height: 24px;
}
#progression .instance-progression td {
  vertical-align: middle;
}
#progression .instance-progression .instance-difficulty {
  width: 200px;
}
#progression .instance-boss {
  position: relative;
  width: 266px;
  height: 70px;
  margin: 0 10px 10px 10px;
  background: url('/images/layout/sprite.png?v=14') no-repeat 0 -429px;
}
#progression .instance-boss img {
  position: absolute;
  left: 0;
  bottom: 0;
}
#progression .instance-boss div {
  display: table;
  position: absolute;
  left: 110px;
  top: 27px;
  width: 150px;
  height: 38px;
}
#progression .instance-boss div span {
  display: table-cell;
  vertical-align: middle;
  font-size: 16px;
  color: #ffa500;
}

#progression .instance-boss-status-alive, #progression .instance-boss-status-killed { width: 150px; }
.instance-boss-status-alive img, .instance-boss-status-killed img { margin-top: 3px; }
.instance-boss-status-alive, .instance-boss-status-killed { text-align: center; }
.instance-boss-status-alive { color: red; }
.instance-boss-status-killed { color: #00ff00; }


/******************/
/*** PROGRESSION **/ /* INDEX */
/******************/
#index-progression-wrapper {
}
#instances {
  padding-top: 9px;
  text-align: center;
}
.instance-icon {
  display: inline-block;
  position: relative;
  width: 164px;
  height: 51px;
  margin-bottom: 8px;
  opacity: 0.75; /* everything but IE */
  -ms-filter: "alpha(opacity=75)"; /* IE8 */
  filter: alpha(opacity=75);  /* <IE8 */
  background: url('/images/layout/sprite.png?v=14') top left no-repeat;
}
.instance-icon:hover {
  opacity: 1; /* everything but IE */
  -ms-filter: "alpha(opacity=100)"; /* IE8 */
  filter: alpha(opacity=100);  /* <IE8 */
}
.instance-icon span {
  display: block;
  margin-top: 4px;
  margin-left: 6px;
  font-size: 11px;
  font-weight: bold;
  text-align: left;
  color: #ffffff;
}
.instance-bot { background-position: 0 -128px; }
.instance-bwd { background-position: -164px -128px; }
.instance-totfw { background-position: -328px -128px; }
.instance-fl { background-position: -492px -128px; }
.instance-ds { background-position: -656px -128px; }
.instance-mv { background-position: 0 -179px; }
.instance-hof { background-position: -164px -179px; }
.instance-toes { background-position: -328px -179px; }
.instance-pan { background-position: -492px -179px; }
.instance-tot { background-position: -656px -179px; }
.instance-soo { background-position: -820px -179px; }
.instance-hm { background-position: 0 -230px; }
.instance-bf { background-position: -164px -230px; }
.instance-hfc { background-position: -328px -230px; }
.instance-en { background-position: 0 -281px; }
.instance-tov { background-position: -164px -281px; }
.instance-nh { background-position: -328px -281px; }
.instance-tos { background-position: -492px -281px; }
.instance-abt { background-position: -656px -281px; }
.instance-uld { background-position: 0 -332px; }
.instance-progression { width: 100%; }
.instance-name, .instance-difficulty { padding-bottom: 8px; }
.instance-name {
  font-size: 14px;
  font-weight: bold;
  color: orange;
}
.instance-difficulty, .instance-boss-status {
  padding-left: 15px;
  text-align: center;
}

/******************/
/*** RECRUITMENT **/
/******************/
#recruitment {
  margin-bottom: 10px;
  border-left: 1px solid #000000;
  border-right: 1px solid #121212;
}
#recruitment td { vertical-align: middle; }
#recruitment th {
  height: 24px;
}
.class-icon-wrapper {
  width: 40px;
  padding: 4px !important;
}
.class-icon {
  width: 34px;
  height: 34px;
  background: url('/images/layout/sprite.png?v=14') top left no-repeat;
}
.class-icon-warrior { background-position: -64px -84px; }
.class-icon-paladin { background-position: -98px -84px; }
.class-icon-hunter { background-position: -132px -84px; }
.class-icon-rogue { background-position: -166px -84px; }
.class-icon-priest{ background-position: -200px -84px; }
.class-icon-deathknight{ background-position: -234px -84px; }
.class-icon-shaman { background-position: -268px -84px; }
.class-icon-mage   { background-position: -302px -84px; }
.class-icon-warlock{ background-position: -336px -84px; }
.class-icon-druid  { background-position: -370px -84px; }
.class-icon-monk { background-position: -404px -84px; }
.class-icon-demonhunter { background-position: -438px -84px; }

.class-color-warrior, .class-color-warrior a { color: #C79C6E; }
.class-color-paladin, .class-color-paladin a { color: #F58CBA; }
.class-color-hunter, .class-color-hunter a  { color: #ABD473; }
.class-color-rogue, .class-color-rogue a  { color: #FFF569; }
.class-color-priest, .class-color-priest a  { color: #FFFFFF; }
.class-color-deathknight, .class-color-deathknight a  { color: #C41F3B; }
.class-color-shaman, .class-color-shaman a  { color: #0070DE; }
.class-color-mage, .class-color-mage a  { color: #69CCF0; }
.class-color-warlock, .class-color-warlock a  { color: #9482C9; }
.class-color-druid, .class-color-druid a  { color: #FF7D0A; }
.class-color-monk, .class-color-monk a  { color: #00FF96; }
.class-color-demonhunter, .class-color-demonhunter a  { color: #A330C9; }

.recruitment-status {
  width: 150px;
  padding-left: 16px;
}
.recruitment-status-high { color: #0c0; }
.recruitment-status-medium { color: #fd0; }
.recruitment-status-low { color: #f60; }
.recruitment-status-closed { color: red; }


/******************/
/*** RECRUITMENT **/ /* INDEX */
/******************/
#index-recruitment td { vertical-align: middle; }
#index-recruitment .recruitment-status { width: auto; }


/******************/
/***** STREAMS ****/
/******************/
.stream-online {
  display: inline-block;
  position: relative;
  width: 320px;
  height: 200px;
  margin: 0 20px 20px 0;
  border: 2px solid black;
}
.stream-offline {
  display: inline-block;
  width: 160px;
  margin: 0 20px 20px 0;
}

.stream-overlay, .stream-overlay-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 312px;
  height: 36px;
  padding: 4px;
  overflow: hidden;
}
.stream-overlay {
  z-index: 100;
}
.stream-overlay-bg {
  background-color: black;
  opacity: 0.45;
  z-index: 50;
}
.stream-offline .class-icon, .stream-online .class-icon {
  float: left;
  margin-right: 6px;
}
.class-icon {
  margin-top: 1px;
}
.stream-channel {
  font-size: 17px;
  color: orange;
}
.stream-game {
  display: block;
}
.stream-status {
  display: block;
  font-style: italic;
}

/******************/
/** AUCTION HOUSE */
/******************/
#auction-house-menu-wrapper { margin-bottom: 12px; }
#auction-house-menu {
  padding: 10px;
  border: 1px solid red;
  border-top: none;
  background: url("/images/layout/page-bg.gif") repeat scroll 0 0 #242424;
}
#auction-house-wrapper { position: relative; }
#auction-house-wrapper #last-updated {
  position: absolute;
  top: 3px;
  right: 0;
  font-style: italic;
}
.auction-list {
  table-layout: fixed;
  margin-bottom: 40px;
  border-left: 1px solid #000000;
  border-right: 1px solid #121212;
  background: url("/images/layout/page-bg.gif") repeat scroll 0 0 #242424;
}
.auction-list th {
  height: 24px;
  line-height: 24px;
  padding: 0;
  border-color: #C33D39 #7D1916 #7D1916 #C23631;
  border-left: 1px solid #C23631;
  border-right: 1px solid #7D1916;
  border-style: solid;
  border-width: 1px;
  vertical-align: middle;
  background: url("/images/layout/sprite.png?v=14") repeat-x left top;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
}
.auction-list td {
  height: 22px;
  padding: 2px 4px;
  border-color: #3C3C3C #121212 #131313 #404040;
  border-left: 1px solid #404040;
  border-right: 1px solid #121212;
  border-style: solid;
  border-width: 1px;
  vertical-align: middle;
}
.auction-list td img { vertical-align: middle; }
.auction-list .item-header { width: 290px; }
.auction-list .undercut-header { width: 250px; }
.auction-list .owner-header { width: 90px; }
.auction-list .quantity-header { width: 70px; }
.auction-list .item-cell {
  width: 290px;
  text-align: left;
  vertical-align: middle;
}
.undercutter-cell {
  padding-left: 10px !important;
  border-right: none !important;
}
.auction-list .quantity-cell { text-align: right; }
.auction-list .price-gold {
  width: 60px;
  border-right: none;
  text-align: right;
}
.auction-list .price-silver {
  width: 20px;
  border-left: none;
  border-right: none;
  text-align: right;
}
.auction-list .price-copper {
  width: 20px;
  border-left: none;
  text-align: right;
}
.price-gold { color: #ffff00; }
.price-silver { color: #cccccc; }
.price-copper { color: #f16304; }

.auction-house-settings-table {
  width: 100%;
  margin-bottom: 16px;
}
.auction-house-settings-table td {
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
}

/******************/
/***** BB CODE ****/
/******************/
.quotetitle, .attachtitle, .codetitle, .spoilertitle {
  margin: 10px 5px 0px 5px;
  padding: 2px 4px;
  border: solid 1px #090909;
  background-color: #2E2E2E;
  font-size: 0.85em;
  font-weight: bold;
}
.quotetitle .quotetitle { font-size: 1em; }
.quotecontent, .attachcontent, .spoilercontent {
  margin: 0px 5px 10px 5px;
  padding: 5px;
  border-color: #090909;
  border-width: 0px 1px 1px 1px;
  border-style: solid;
  font-weight: normal;
  font-size: 1em;
  line-height: 1.4em;
  background-color: #2E2E2E;
}
.attachcontent { font-size: 0.85em; }
.codecontent {
  direction: ltr;
  margin: 0px 5px 10px 5px;
  padding: 5px;
  border-color: #090909;
  border-width: 0px 1px 1px 1px;
  border-style: solid;
  font-weight: normal;
  font-size: 11px;
  font-family: Monaco, 'Courier New', monospace;
  background-color: #2E2E2E;
}
.quotewrapper, .codewrapper, .attachwrapper, .spoilerwrapper {
  clear: both;
  margin: 10px 5px;
  background: #B62A26 url(images/code_header.gif) top left no-repeat;
  padding-left: 19px;
  border: solid 1px #090909;
}
.quotewrapper { background-image: url(images/quote_header.gif); }
.quotewrapper .quotetitle, .codewrapper .codetitle, .attachwrapper .attachtitle, .spoilerwrapper .spoilertitle { 
  margin: 0; 
  border-width: 0 0 1px 1px;
}
.spoilerwrapper .spoilertitle { border-bottom: 0; }
.spoilerwrapper:hover .spoilertitle { border-bottom: solid 1px #090909; }
.quotewrapper .quotecontent, .codewrapper .codecontent, .attachwrapper .attachcontent, .spoilerwrapper .spoilercontent {
  margin: 0; 
  border-width: 0 0 0 1px;
}
.spoilerwrapper .spoilercontent { display: none; }
.spoilerwrapper:hover .spoilercontent { display: block; }
.attachcontent, .codecontent {
  overflow: auto;
  overflow-x: auto;
}
.syntaxcomment { color: #AAA; }
.syntaxdefault { color: #FFF; }
.syntaxhtml { color: #FFF; }
.syntaxkeyword { color: #F0E80A; }
.syntaxstring { color: #B62723; }

/******************/
/****** ITEMS *****/
/******************/
.item-icon-small {
  width: 18px;
  height: 18px;
  padding-right: 6px;
}
.item-quality-grey { color: #9d9d9d !important; }
.item-quality-common { color: #ffffff !important; }
.item-quality-uncommon { color: #1eff00 !important; }
.item-quality-rare { color: #0070dd !important; }
.item-quality-epic { color: #a335ee !important; }
.item-quality-legendary { color: #ff8000 !important; }
.item-quality-heirloom  { color: #e5cc80 !important; }
.item-quality-artifact { color: #e5cc80 !important; }