/* General Markup Styles
---------------------------------------- */

* {
	/* Reset browsers default margin, padding and font sizes */
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
	height: 100%;
	background-color: #000000;
}

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #DDDDDD;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
}

h1 {
	/* Forum name */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-right: 200px;
	color: #FFFFFF;
	margin-top: 15px;
	font-weight: bold;
	font-size: 2em;
}

h2 {
	/* Forum header titles */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #3f3f3f;
	font-size: 2em;
	margin: 0.8em 0 0.2em 0;
}

h2.solo {
	margin-bottom: 1em;
}

h3 {
	/* Sub-headers (also used as post headers, but defined later) */
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	border-bottom: 1px solid #555;
	margin-bottom: 3px;
	padding-bottom: 2px;
	font-size: 1.05em;
	color: #989898;
	margin-top: 20px;
}

h4 {
	/* Forum and topic list titles */
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Sans-serif;
	font-size: 1.3em;
}

p {
	line-height: 1.3em;
	font-size: 1.1em;
	margin-bottom: 1.5em;
}

img {
	border-width: 0;
}

hr {
	/* Also see tweaks.css */
	border: 0 none #FFFFFF;
	border-top: 1px solid #555;
	height: 1px;
	margin: 5px 0;
	display: block;
	clear: both;
}

hr.dashed {
	border-top: 1px dashed #CCCCCC;
	margin: 10px 0;
}

hr.divider {
	display: none;
}

p.right {
	text-align: right;
}

/* Main blocks
---------------------------------------- */

#background {
	/* background-image: url('{IMG_USER_ICON1_SRC}'); */
	position: fixed;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: -999;
	background-image: url('/public/backgrounds/current.png');
	background-repeat: no-repeat;
	background-position: top center;
}

#wrap {
	width: 1000px;
	margin: 0px auto;
	box-shadow: 0px 0px 10px #000000;
	border: 2px solid #444;
}

#simple-wrap {
	padding: 6px 10px;
}

#page-body {
	padding: 10px;
	background-color: rgba(34, 34, 34, 0.7);
	border-bottom: 2px solid #444;
	clear: both;
}

#page-footer {
	clear: both;
}

#page-footer h3 {
	margin-top: 20px;
}

/* Search box
--------------------------------------------- */
#search-box {
	position: absolute;
	bottom: 8px;
	right: 7px;
	text-align: right;
	white-space: nowrap; /* For Opera */
}

#search-box #keywords {
	width: 95px;
}

#search-box div {
	margin-bottom: 2px;
}

/* .button1 style defined later, just a few tweaks for the search button version */
#search-box input.button1 {
	padding: 1px 5px;
}

#search-box li {
	text-align: right;
	margin-top: 4px;
}

#search-box img {
	vertical-align: middle;
	margin-right: 3px;
}

/* Site logo */
#logo-container, #header-fill-container {
	vertical-align: top;
	display: inline-block;
	height: 80px;
	background-color: #232323;
	border-bottom: 2px solid #444;
}

#header-fill-container {
	width: 100%;
}

#logo img {
	padding: 4px;
}

a#logo:hover {
	text-decoration: none;
}

/* Site name and navigation */
#nav-container {
	vertical-align: top;
	display: inline-block;
}

#site-name {
	background-color: #232323;
	height: 55px;
}

#site-name span {
	display: block;
	position: relative;
	top: 10px;
	left: 8px;
	background-image: url('{IMG_USER_ICON2_SRC}');
	width: {IMG_USER_ICON2_WIDTH}px;
	height: {IMG_USER_ICON2_HEIGHT}px;
}

#nav-bar {
	font-size: 12px;
	height: 27px;
}

.nav-link {
	vertical-align: top;
	display: inline-block;
	background: linear-gradient(#232323, rgba(34, 34, 34, 0.7));
	border: 2px solid #444;
	border-bottom: 0px;
	height: 25px;
}

.nav-link:hover {
	background-image: none;
	background-color: rgba(34, 34, 34, 0.7);
}

.nav-link a {
	display: block;
	padding: 5px 10px;
}

.nav-link a:link { text-decoration: none; }
.nav-link a:visited { text-decoration: none; }
.nav-link a:hover { text-decoration: none; }
.nav-link a:active { text-decoration: none; }

.nav-sep {
	vertical-align: top;
	display: inline-block;
	width: 5px;
	background-color: #232323;
	height: 25px;
	border-bottom: 2px solid #444;
}

/* User login box */
#user-box {
	position: absolute;
	top: 7px;
	right: 7px;
	border: 1px solid #444;
	background-color: #333;
	padding: 5px;
}

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
	position: relative;
	height: 82px;
	color: #FFFFFF;
	overflow: hidden;
	white-space: nowrap;
}

.navbar {
	position: relative;
	background-color: rgba(34, 34, 34, 0.7);
	border-bottom: 2px solid #444;
	padding: 5px 10px;
	overflow: auto;
}

.forabg {
	border: 1px solid #555;
	margin-bottom: 10px;
	clear: both;
	box-shadow: 0px 0px 20px black;
}

.forumbg {
	border: 1px solid #555;
	margin-bottom: 10px;
	clear: both;
	box-shadow: 0px 0px 20px black;
}

.panel {
	margin-bottom: 4px;
	padding: 5px 10px;
	border: 1px solid #555;
	color: #DDDDDD;
	overflow: auto;
	box-shadow: 0px 0px 20px black;
}

.post {
	border: 1px solid #555;
	padding: 0 10px;
	margin-bottom: 10px;
	background-repeat: no-repeat;
	background-position: 100% 0;
	box-shadow: 0px 0px 20px black;
}

.rowbg {
	margin: 5px 5px 2px 5px;
}

.ucprowbg {
	background-color: #e2e2e2;
}

.fieldsbg {
	/*border: 1px #DBDEE2 solid;*/
	background-color: #eaeaea;
}

/* Horizontal lists
----------------------------------------*/
#page-body .linklist {
	margin-bottom: 5px;
}

ul.linklist {
	display: block;
	margin: 0;
}

ul.linklist li {
	display: block;
	list-style-type: none;
	float: left;
	width: auto;
	margin-right: 5px;
	font-size: 1.1em;
}

ul.linklist li.rightside, p.rightside {
	float: right;
	margin-right: 0;
	margin-left: 5px;
	text-align: right;
}

ul.navlinks {
	font-weight: bold;
}

ul.leftside {
	margin-left: 0;
	margin-right: 5px;
	text-align: left;
	float: left;
}

ul.rightside {
	margin-left: 5px;
	margin-right: -5px;
	text-align: right;
	float: right;
}

/* Table styles
----------------------------------------*/
table.table1 {
	/* See tweaks.css */
}

#ucp-main table.table1 {
	padding: 2px;
}

table.table1 thead th {
	font-weight: normal;
	text-transform: uppercase;
	color: #FFFFFF;
	line-height: 1.3em;
	font-size: 1em;
	padding: 0 0 4px 3px;
}

table.table1 thead th span {
	padding-left: 7px;
}

table.table1 tbody tr {
	border: 1px solid #cfcfcf;
}

table.table1 tbody tr:hover, table.table1 tbody tr.hover {
	background-color: #f6f6f6;
	color: #000;
}

table.table1 td {
	color: #6a6a6a;
	font-size: 1.1em;
}

table.table1 tbody td {
	padding: 5px;
	border-top: 1px solid #FAFAFA;
}

table.table1 tbody th {
	padding: 5px;
	border-bottom: 1px solid #000000;
	text-align: left;
	color: #333333;
	background-color: #FFFFFF;
}

/* Specific column styles */
table.table1 .name		{ text-align: left; }
table.table1 .posts		{ text-align: center !important; width: 7%; }
table.table1 .joined	{ text-align: left; width: 15%; }
table.table1 .active	{ text-align: left; width: 15%; }
table.table1 .mark		{ text-align: center; width: 7%; }
table.table1 .info		{ text-align: left; width: 30%; }
table.table1 .info div	{ width: 100%; white-space: normal; overflow: hidden; }
table.table1 .autocol	{ line-height: 2em; white-space: nowrap; }
table.table1 thead .autocol { padding-left: 1em; }

table.table1 span.rank-img {
	float: right;
	width: auto;
}

table.info td {
	padding: 3px;
}

table.info tbody th {
	padding: 3px;
	text-align: right;
	vertical-align: top;
	color: #000000;
	font-weight: normal;
}

.forumbg table.table1 {
	margin: 0;
}

.forumbg-table > .inner {
	margin: 0 -1px;
}

/* Misc layout styles
---------------------------------------- */
/* column[1-2] styles are containers for two column layouts 
   Also see tweaks.css */
.column1 {
	float: left;
	clear: left;
	width: 49%;
}

.column2 {
	float: right;
	clear: right;
	width: 49%;
}

/* General classes for placing floating blocks */
.left-box {
	float: left;
	width: auto;
	text-align: left;
}

.right-box {
	float: right;
	width: auto;
	text-align: right;
}

dl.details {
	/*font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;*/
	font-size: 1.1em;
}

dl.details dt {
	float: left;
	clear: left;
	width: 30%;
	text-align: right;
	color: #000000;
	display: block;
}

dl.details dd {
	margin-left: 0;
	padding-left: 5px;
	margin-bottom: 5px;
	color: #828282;
	float: left;
	width: 65%;
}

/* Pagination
---------------------------------------- */
.pagination {
	height: 1%; /* IE tweak (holly hack) */
	width: auto;
	text-align: right;
	margin-top: 5px;
	float: right;
}

.pagination span.page-sep {
	display: none;
}

li.pagination {
	margin-top: 0;
}

.pagination strong, .pagination b {
	font-weight: normal;
}

.pagination span strong {
	padding: 0 2px;
	margin: 0 2px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #bfbfbf;
	border: 1px solid #bfbfbf;
	font-size: 0.9em;
}

.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active {
	font-weight: normal;
	text-decoration: none;
	color: #747474;
	margin: 0 2px;
	padding: 0 2px;
	background-color: #eeeeee;
	border: 1px solid #bababa;
	font-size: 0.9em;
	line-height: 1.5em;
}

.pagination span a:hover {
	border-color: #d2d2d2;
	background-color: #d2d2d2;
	color: #FFF;
	text-decoration: none;
}

.pagination img {
	vertical-align: middle;
}

/* Pagination in viewforum for multipage topics */
.row .pagination {
	display: block;
	float: right;
	width: auto;
	margin-top: 0;
	padding: 1px 0 1px 15px;
	font-size: 0.9em;
	background: none 0 50% no-repeat;
}

.row .pagination span a, li.pagination span a {
	background-color: #FFFFFF;
}

.row .pagination span a:hover, li.pagination span a:hover {
	background-color: #d2d2d2;
}

/* Miscellaneous styles
---------------------------------------- */
#forum-permissions {
	float: right;
	width: auto;
	padding-left: 5px;
	margin-left: 5px;
	margin-top: 10px;
	text-align: right;
}

.copyright {
	padding: 5px;
	text-align: center;
	color: #555555;
}

.small {
	font-size: 0.9em !important;
}

.titlespace {
	margin-bottom: 15px;
}

.headerspace {
	margin-top: 20px;
}

.error {
	color: #bcbcbc;
	font-weight: bold;
	font-size: 1em;
}

div.rules {
	border: 1px solid #900;
	background-color: rgba(100, 0, 0, 0.2);
	color: #bcbcbc;
	padding: 10px;
	margin-bottom: 5px;
	font-size: 1.1em;
}

div.rules ul, div.rules ol {
	margin-left: 20px;
}

p.rules {
	background-color: #ececec;
	background-image: none;
	padding: 5px;
}

p.rules img {
	vertical-align: middle;
	padding-top: 5px;
}

p.rules a {
	vertical-align: middle;
	clear: both;
}

#top {
	position: absolute;
	top: -20px;
}

.clear {
	display: block;
	clear: both;
	font-size: 1px;
	line-height: 1px;
	background: transparent;
}

/* Portal styles
------------------------------------------ */
.portalbody .postbody {
	border: 1px solid #555;
	margin: 10px auto 20px auto;
	float: none;
	width: 960px;
	box-shadow: 0px 0px 20px black;
}

.portalbody .announcement-header {
	padding: 7px 0px 5px 10px;
	border-bottom: 1px solid #555;
}

.portalbody .announcement-header div {
	display: inline-block;
	vertical-align: top;
	margin-left: 5px;
}

.portalbody .announcement-body {
	padding: 10px;
	font-size: 12px;
	line-height: 1.5em;
}

.portalbody .announcement-body img {
    max-width: 100%;
}

.portalbody ul, .portalbody ol {
    margin-bottom: 1em;
    margin-left: 3em;
}

.portalbody .pagination {
	float: none;
}

/* WoW styles */

.death-knight { color: #901B26 !important; }
.druid        { color: #D5690D !important; }
.hunter       { color: #789454 !important; }
.mage         { color: #4FA1BD !important; }
.monk         { color: #00FFBA !important; }
.paladin      { color: #BD5A86 !important; }
.priest       { color: #DDDDDD !important; }
.rogue        { color: #CDC548 !important; }
.shaman       { color: #2751AD !important; }
.warlock      { color: #5E5280 !important; }
.warrior      { color: #886B4C !important; }

.death-knight-bg { background-color: #901B26; }
.druid-bg        { background-color: #D5690D; }
.hunter-bg       { background-color: #789454; }
.mage-bg         { background-color: #4FA1BD; }
.monk-bg         { background-color: #00BB88; }
.paladin-bg      { background-color: #BD5A86; }
.priest-bg       { background-color: #959595; }
.rogue-bg        { background-color: #A8A23E; }
.shaman-bg       { background-color: #2751AD; }
.warlock-bg      { background-color: #5E5280; }
.warrior-bg      { background-color: #886B4C; }

/* warriors */
.wowclass1, .wowclass1:link, .wowclass1:visited, .wowclass1:active {
    font-weight:700;
    text-decoration:none;
    color:#886b4c;
    white-space:nowrap;
}
.wowclass1:link:hover {
    font-weight:700;
    text-decoration:underline;
    color:#886b4c;
    white-space:nowrap;
}

/* paladins */
.wowclass2, .wowclass2:link, .wowclass2:visited, .wowclass2:active {
    font-weight:700;
    text-decoration:none;
    color:#bd5a86;
    white-space:nowrap;
}

.wowclass2:link:hover {
    font-weight:700;
    text-decoration:underline;
    color:#bd5a86;
    white-space:nowrap;
}

/* hunters */
.wowclass3, .wowclass3:link, .wowclass3:visited, .wowclass3:active {
    font-weight:700;
    text-decoration:none;
    color:#789454;
    white-space:nowrap;
}
.wowclass3:link:hover {
    font-weight:700;
    text-decoration:underline;
    color:#789454;
    white-space:nowrap;
}

/* rogues */
.wowclass4, .wowclass4:link, .wowclass4:visited, .wowclass4:active {
    font-weight:700;
    text-decoration:none;
    color:#cdc548;
    white-space:nowrap;
}
.wowclass4:link:hover {
    font-weight:700;
    text-decoration:underline;
    color:#cdc548;
    white-space:nowrap;
}

/* priests */
.wowclass5, .wowclass5:link, .wowclass5:visited, .wowclass5:active {
    font-weight:700;
    text-decoration:none;
    color:#dddddd;
    white-space:nowrap;
}
.wowclass5:link:hover {
    font-weight:700;
    text-decoration:underline;
    color:#dddddd;
    white-space:nowrap;
}

/* death knight */
.wowclass6, .wowclass6:link, .wowclass6:visited, .wowclass6:active {
    font-weight:700;
    text-decoration:none;
    color:#901b26;
    white-space:nowrap;
}
.wowclass6:link:hover {
    font-weight:700;
    text-decoration:underline;
    color:#901b26;
    white-space:nowrap;
}

/*shaman*/
.wowclass7, .wowclass7:link, .wowclass7:visited, .wowclass7:active {
    font-weight:700;
    text-decoration:none;
    color:#2751ad;
    white-space:nowrap;
}
.wowclass7:link:hover {
    font-weight:700;
    text-decoration:underline;
    color:#2751ad;
    white-space:nowrap;
}

/* mage */
.wowclass8, .wowclass8:link, .wowclass8:visited, .wowclass8:active {
    font-weight:700;
    text-decoration:none;
    color:#4fa1bd;
    white-space:nowrap;
}
.wowclass8:link:hover {
    font-weight:700;
    text-decoration:underline;
    color:#4fa1bd;
    white-space:nowrap;
}

/* warlock */
.wowclass9, .wowclass9:link, .wowclass9:visited, .wowclass9:active {
    font-weight:700;
    text-decoration:none;
    color:#5e5280;
    white-space:nowrap;
}
.wowclass9:link:hover {
    font-weight:700;
    text-decoration:underline;
    color:#5e5280;
    white-space:nowrap;
}

/* druid */
.wowclass11, .wowclass11:link, .wowclass11:visited, .wowclass11:active {
    font-weight:700;
    text-decoration:none;
    color:#d5690d;
    white-space:nowrap;
}
.wowclass11:link:hover {
    font-weight:700;
    text-decoration:underline;
    color:#d5690d;
    white-space:nowrap;
}

/* monk */
.wowclass12, .wowclass12:link, .wowclass12:visited, .wowclass12:active {
    font-weight:700;
    text-decoration:none;
    color:#00ffba;
    white-space:nowrap;
}
.wowclass12:link:hover {
    font-weight:700;
    text-decoration:underline;
    color:#00ffba;
    white-space:nowrap;
}

.progress-bar {
    height: 16px;
    border: solid 1px #181818;
    border-right-color: #222222;
    border-bottom-color: #222222;
    background-color: rgba(0, 0, 0, 0.2);
    margin-bottom: 2px;
    width: 430px;
    float: left;
}

.progress-green-bar {
    height: 16px;
    background-color: green;
}

.progress-text {
    position: relative;
    bottom: 14px;
    left: 2px;
    text-align: center;
    height: 16px;
}

.title {
	font-size: 16px;
	width: 100%;
	text-align: center;
	margin: 5px 0px;
}

.raid {
	margin-bottom: 4px;
	margin-top: 10px;
	color: #DDDDDD;
	box-shadow: 0px 0px 20px black;
}

.raid .roster { width: 100px; }
.raid .description { width: 50%; }

.raid table {
	border-collapse: collapse;
}

.raid td {
	border: 1px solid #555;
	vertical-align: top;
}

.raid ul {
	margin-left: 18px;
}

.raid .raid-title {
	font-size: 12px;
}

.raid .raid-header {
	background-color: rgba(255, 255, 255, 0.05);
	border-bottom: 1px solid #555;
	padding: 5px;
}

.raid .raid-header:last-child {
	border-bottom: 0px;
}

.raid .raid-content {
	padding: 5px;
}

.raid .roster-header {
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid #555;
	padding: 3px 5px;
	margin: 5px 0px;
}

.raid .roster-header:first-child {
	margin-top: 0px;
}

.raid .roster-member {
	padding: 1px 5px;
}

.raid .roster-member a {
	font-weight: bold;
}

.apply-buttons {
	margin: 10px 0px 5px 0px;
	text-align: center;
}

.panel-screenshot {
	padding: 18px;
}

.application table {
	width: 100%;
	border-collapse: collapse;
}

.application .app-header {
	background-color: rgba(255, 255, 255, 0.05);
}

.application td {
	border: 1px solid #555;
	padding: 5px;
}

.app-desc {
	margin: 5px 0px 10px 0px;
}

.roster {
    border: 1px solid #555;
    font-size: 12px;
}

.roster #characters { width: 100%; }
.roster .roster-header { background-color: rgba(0, 0, 0, 0.2); }
.roster td, .roster th { padding: 1px 3px; }
.roster th { border-bottom: 1px solid #555; }
.roster .field-rank { width: 75px; }
.roster .field-name { width: 150px; }
.roster .field-level { width: 25px; }
.roster .field-spec { width: 120px; }
.roster .field-points { width: auto; }
.roster .spec-icon { width: 12px; padding-right: 5px; }
.roster tr.even { background-color: rgba(60, 60, 60, 0.3); }

.roster .outer-ach {
    position: relative;
    border-radius: 2px;
    overflow: hidden;
}

.roster .inner-ach {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    background-color: rgba(55, 175, 55, 0.4);
}

.roster .text-ach {
    z-index: 1;
    position: relative;
    text-align: center;
}