/** MAIN GUIDE PAGE 
********************************************************/

article.guide_article {
	height: 250px;
    border-top: 1px solid black;
	margin: 0 auto;
	position: relative;
}

article.guide_article:last-child{
	border-bottom: 1px solid black;
}

a.guide_button{
	width: 100%;
	height: 100%;
}

.guide_img_shell{
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color:transparent;
	transition: background-color 0.6s;
}

a.guide_button:hover .guide_img_shell{
	background-color: #c0840a;
}

.guide_img{
	background-size: cover;
	width: 100%;
	height: 100%;
	transition: transform 1s;
}

#guide_img_skills{
	background-image: url("../img/PNG/SkillsBanner.png");
}

#guide_img_combat{
	background-image: url("../img/PNG/CombatBanner.png");
}

a.guide_button:hover .guide_img{
	transform: scale(1.05);
}
	
aside.guide_aside{
	position: absolute;
	width: 40%;
	height: 100%;
	top: 0;
	right: 0;
	padding: 10px;
}

aside.guide_aside_left{
	left: 0;
	background-image: url("../img/PNG/CombatBanner.png");
}

h2.guide_title{
	height: 30px;
	margin: 0 0 10px auto;
	color: #ffde00;
}

a.guide_button:hover h2.guide_title{
	color: #ffffff;
}

p.guide_description{
	font-size: 18px;
	margin: 0 0 10px auto;
	height: 136px;
}

div.guide_breadcrumbs{
	display: flex;
	border: 2px solid black;
	border-bottom: none;
	background-color: #979aa5;
}

a.guide_breadcrumb{
	font-size: 18px;
	padding: 0.2em;
}

a.guide_breadcrumb:hover{
	color: #FFFFFF;
}

/** SKILL GUIDE PAGE 
********************************************************/

article.skillguide{
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	background-color:rgba(198, 144, 14, 1);
	padding: 0.5em;
}

header.guide_header{
	margin-bottom: 0.5em;
}

ul.guide_header_breadcrumbs{
	display:flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

a.guide_header_breadcrumb{
	margin: 0 0.3em 0 0;
}

a.guide_header_breadcrumb:hover{
	color:#FFFFFF;
}

span.guide_header_title{
	display:flex;
	margin-top: 5px;
}

img.guide_header_img{
	margin: auto 10px auto 0;
	width: 80px;
	height: 80px;
}

h1.guide_header_title{
	margin: auto 0.2em auto 0;
	font-size: 80px;
}

p.skillguide_header_text{
	margin: 0 0 1em 0;
}

article.skillguide_category{
	border-bottom: 2px solid black;
	margin-bottom: 1em;
}

h2.skillguide_category_title{
	margin: 0 auto;
}

p.skillguide_category_description{
	margin: 0 0 0.5em 0;
}

table.skillguide_skills{
	margin: 0;
	width: 100%;
	border-spacing: 0;
}

tr.skillguide_skill{
	width: 100%;
	height: 70px;
	display: flex;
	border-bottom: 1px solid black;
	border-top: none;
}

tr.skillguide_skill:first-child {
	border-top: 1px solid black;
}

tr.skillguide_skill:hover {
	background-color:rgba(255, 255, 255, 1);
}

th.skillguide_skill_header{
	display: flex;
	width: 25%;
	padding: 0;
}

td.skillguide_skill_data{
	display: flex;
	width: 75%;
	padding: 0;
}
		
img.skillguide_skillicon{
	width: 50px;
	height: 50px;
	margin: auto 0 auto 10px;
}

h3.skillguide_skill_title{
	text-align: left;
	margin: auto 0 auto 20px;
}	

p.skillguide_skill_description{
	width: 100%;
	font-size: 18px;
	margin: auto 10px auto 10px;
}

a.skillguide_skill_button{
	text-align: center;
	font-size: 18px;
	width: 160px;
	padding: 10px 0;
	border: 2px solid black;
	margin: auto 10px auto 0;
	background-color: #72757d;
}

a.skillguide_skill_button:hover{
	color: #005BBB;
	background-color: #979aa5;
}

article.specificskill_main{
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	padding: 0.5em;
	background-color:rgba(198, 144, 14, 1);
}

header.specificskill_header{
	display: flex;
	margin: 0 auto 10px auto;
	background-color: #72757d;
	border-bottom: 2px solid black;
}

h2.specificskill_header_title{
	color: #FFFFFF;
}

button.specificskill_top{
	position:fixed;
	bottom: 70px;
	right: 70px;
	min-height: 45px;
	min-width: 45px;
}

div.specificskill_grid_div{
	margin: 0 auto 0.5em auto;
}

h3.specificskill_grid_title{
	margin:  auto 10px;
	width: 100%;
	color: #FFFFFF;
	height: 22px;
	vertical-align: middle;
}

header.skillguide_section_header{
	display: flex;
	width: 100%;
}

button.specificskill_grid_dropdown{
	display: flex;
	margin: 5px 5px 5px auto;
	min-width: 30px;
	min-height: 30px;
}

header.weapon_grid_header{
	display: grid;
	height: 2.5em;
	border: 1px solid black;
	background-color: #72757d;
	grid-template-areas: 'weapon_grid_header_item weapon_grid_header_level weapon_grid_header_damage';
	grid-template-columns: 60% 15% 25%;
}

div.weapon_grid_header_item{
	display: flex;
	border-right: 1px solid black;
	margin-bottom: 1px;
	grid-area: weapon_grid_header_item;
}

div.weapon_grid_header_level{
	display: flex;
	border-right: 1px solid black;
	margin-bottom: 1px;
	grid-area: weapon_grid_header_level;
}

div.weapon_grid_header_damage{
	display: flex;
	grid-area: weapon_grid_header_damage;
}
	
p.weapon_grid_header_title{
	margin: auto 5px;
}

div.weapon_grid_row{
	width: 100%;
	margin: 0;
	border: 1px solid black;
	border-top: none;
	display: grid;
	grid-template-areas:'weapon_grid_item weapon_grid_level weapon_grid_damage';
	grid-template-columns: 60% 15% 25%;
}

div.weapon_grid_item{
	display: flex;
	border-right: 1px solid black;
	grid-area: weapon_grid_item;
}

img.weapon_grid_item_img{
	height: 35px;
	width: 35px;
	margin: 2px 0 2px 5px;
}

p.weapon_grid_item_name{
	margin: auto 5px;
}

div.weapon_grid_level{
	display: flex;
	border-right:1px solid black;
	grid-area: weapon_grid_level;
}

p.weapon_grid_level{
	margin: auto 5px;
}

div.weapon_grid_damage{
	display: flex;
	grid-area: weapon_grid_damage;
}

p.weapon_grid_damage{
	margin: auto 5px;
}


/** COMBAT GUIDE PAGE
********************************************************/
article.combatguide{
	border: 2px solid black;
}

p.combatguide_header_text{
	font-size: 18px;
}

article.combatguide_article{
	border: 2px solid black;
	padding: 0 10px 10px 10px;
	margin: 10px 10px 0 10px;
}

h3.combatguide_article_title{
	margin: 0 auto;
}

p.combatguide_article_description{
	font-size: 18px;
}

/** WORLD GUIDE PAGE 
********************************************************/

article.worldguide{
	border: 2px solid black;
}

p.worldguide_header_text{
	font-size: 18px;
}

article.worldguide_article{
	border: 2px solid black;
	padding: 0 10px 10px 10px;
	margin: 10px 10px 0 10px;
}

h3.worldguide_article_title{
	margin: 0 auto;
}

p.worldguide_article_description{
	font-size: 18px;
}

/** QUEST GUIDE PAGE 
********************************************************/

article.questguide{
	border: 2px solid black;
}

p.questguide_header_text{
	font-size: 18px;
}

article.questguide_article{
	border: 2px solid black;
	padding: 0 10px 10px 10px;
	margin: 10px 10px 0 10px;
}

h3.questguide_article_title{
	margin: 0 auto;
}

p.questguide_article_description{
	font-size: 18px;
}