@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400italic,700italic,400,700');
@import url('http://fonts.googleapis.com/css?family=Exo:100,300,500,700,900');

.clear{
	clear: both;
}

#guide {
	width: 736px;
	background: #010005;
	color: #FFF;
	margin: auto;
	padding-bottom: 30px;
}

#guide #header{
	background-image: url('http://www.teamliquid.net/staff/shiroiusagi/herosofthestorm/guide/newbie/header.jpg');
	background-repeat: no-repeat;
	height: 480px;
}

#guide #title {
	color: #FFF;
	font-family: Exo;
	font-size: 4.5em;
	font-weight: 900;
	text-transform: uppercase;
	text-align: center;
	line-height: 1em;
	margin-bottom: -10px;
}

#guide #subtitle {
	color: #EDA5FF;
	font-family: Exo;
	font-size: 1.3em;
	font-weight: 100;
	text-transform: uppercase;
	text-align: center;
}

#guide h1 {
	color: #FFF;
	font-family: Exo;
	font-size: 3.2em;
	font-weight: 700;
	text-transform: uppercase;
	margin: 40px 0 0 40px;
}

#guide h2 {
	color: #FFF;
	font-family: Exo;
	font-size: 2.5em;
	font-weight: 300;
	text-transform: uppercase;
	margin: 30px 0 10px 40px;
}

#guide h3 {
	color: #FFF;
	font-family: Exo;
	font-size: 2em;
	font-weight: 300;
	text-transform: uppercase;
	margin: 10px 0 20px 0;
}

#guide h4 {
	color: #FFF;
	font-family: Exo;
	font-size: 1.2em;
	font-weight: 300;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
}

#guide .text{
	color: #d0c0d6;
	font-family: Open Sans;
	font-weight: 300;
	line-height: 1.4em;
	font-size: 1.1em;
	margin: 0 40px;
}


/* HERO CLASSES */

#guide .heroclass {
	width: 40%;
}

#guide .warriorpanel{
	background: url('warriors_panel.jpg');
	background-repeat: no-repeat;
	height: 230px;
}


#guide .assassinpanel{
	background: url('assassins_panel.jpg');
	background-repeat: no-repeat;
	height: 230px;
}

#guide .supportspanel{
	background: url('supports_panel.jpg');
	background-repeat: no-repeat;
	height: 230px;
}

#guide .specialistspanel{
	background: url('specialists_panel.jpg');
	background-repeat: no-repeat;
	height: 230px;
}

/* CHOSING YOUR HERO*/


#guide .herowrap h1{
	color: #FFF;
	font-family: Exo;
	font-size: 3.2em;
	font-weight: 300;
	text-transform: uppercase;
	margin: 0 0 -20px 40px;
}

#guide .herowrap .herodisc{
	color: #d0c0d6;
	font-family: Open Sans;
	font-size: 1.1em;
	font-weight: 300;
	margin: 40px 0 0 40px;
	width: 350px;
	line-height: 1.4em;
}

#guide .herowrap h5 {
	color: #FFF;
	font-family: Exo;
	font-size: 1.5em;
	font-weight: 500;
	text-transform: uppercase;
	margin-bottom: 10px;
	text-shadow: 0 0 10px #010005, 0 0px #010005;
}

#guide .herowrap .abilities{
	margin: 20px 0 40px 40px;
}

#guide .herowrap .abilities td{
	padding: 0 5px;
}

#guide .herowrap .abilities .filler{
	width: 20px;
	height: 60px;
}

#guide .herowrap h2{
	color: #FFF;
	font-family: Exo;
	font-size: 1.5em;
	font-weight: 500;
	text-transform: uppercase;
	margin: 0 0 10px 40px;
}

#guide .herowrap .talents{
	margin-left: 40px;
	margin-bottom: 0;
}

#guide .herowrap .talents td{
	color: #FFF;
	text-align: center;
	padding: 0 5px;

}



#guide #nexus{
	background-image: url(http://i.imgur.com/2ndPZi3.jpg);
	background-position: center bottom;
	background-repeat: no-repeat;

}

#guide #pfooter{
	color: #c1a5c8;
	font-family: Open Sans;
	font-size: .9em;
	font-weight: 300;
	line-height: .8em;
	letter-spacing: .05em;
	text-align: center;
	text-transform: uppercase;
	margin-top: 100px;
}


/*------------*/

#guide .list-wrap>div>h1{
	margin:0
}

#guide .hero{
	display:inline-block;
	vertical-align:top;
	background:url(http://www.teamliquid.net/staff/shiroiusagi/herosofthestorm/guide/newbie/class_iconmap.png) no-repeat;
	height:80px;
	width:80px;
	margin: 0 20px;
}

#guide .hero:hover div.ondiv{
	display:block;
	width:100%;
	height:100%;
}

#guide .hero.warrior{
	background-position:0px 0px
}

#guide .hero.warrior:hover{
	background-position:0px -80px
}

#guide .hero.assassin{
	background-position:-80px 0px;
}

#guide .hero.assassin:hover{
	background-position:-80px -80px;
}

#guide .hero.support{
	background-position:-160px 0px;
}

#guide .hero.support:hover{
	background-position:-160px -80px;
}

#guide .hero.specialist{
	background-position:-240px 0px;
}

#guide .hero.specialist:hover{
	background-position:-240px -80px;
}

#guide #articletabs>ul {
	list-style:none;
	width:100%;
	padding-left:0;
	text-align:center;
}

#guide #articletabs>ul>li{
	display:inline-block;
}

#guide .hide {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

#guide .pane1{
	text-align:left;
}

/*Talent tooltipd*/

#guide .tooltip {
	outline:none;
}

#guide .tooltip strong {
	line-height:30px;
}

#guide .tooltip:hover img{
	outline: 5px solid #46abe4;
}

#guide .tooltip:hover {
	text-decoration:none;
} 

#guide .tooltip span {
    z-index:20;
    display:none;
    padding:14px 14px;
    margin-top: 30px;
    margin-left: -30px;
    width:200px;
    line-height:16px;
    text-align: left;
}

#guide .tooltip:hover strong{
	font-family: Exo;
	font-size: 1.2em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	overflow: visible;

}

#guide .tooltip:hover span{
    display:inline;
    position:absolute;
    color:#d2e2e4;
    background:#181818;
    font-family: Open Sans;
    font-size: .9em;
}

#guide .callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;
}

#guide .mechanictitle{
	color: #FFF;
	font-family: Exo;
	font-size: 2.5em;
	font-weight: 300;
	text-transform: uppercase;
	padding: 110px 0 0 10px;
}

/* CHOOSE YOOUR HERO MENU*/

#guide .cheroes{
	display:inline-block;
	vertical-align:top;
	background:url(http://www.teamliquid.net/staff/shiroiusagi/herosofthestorm/guide/newbie/heroes_map.png) no-repeat;
	height:117px;
	width:100px;
	margin: 0 10px;
}

#guide .cheroes:hover div.ondiv{
	display:block;
	width: 108px;
	height: 125px;
	background: url('http://www.teamliquid.net/staff/shiroiusagi/herosofthestorm/guide/newbie/heroes_map_outline.png');
	position: relative;
	top: -4px;
	left: -4px;
}

#guide .cheroes.one{
	background-position:0px 0px;
}

#guide .cheroes.one:hover{
	background-position: -100px 0;
}

#guide .cheroes.two{
	background-position: 0px -116px;
}

#guide .cheroes.two:hover{
	background-position: -100px -116px;
}

#guide .cheroes.three{
	background-position: 0px -232px;
}

#guide .cheroes.three:hover{
	background-position: -100px -232px;
}

#guide .cheroes.four{
	background-position: 0px -348px;
}

#guide .cheroes.four:hover{
	background-position: -100px -348px;
}

#guide .cheroes.five{
	background-position: 0px -464px;
}

#guide .cheroes.five:hover{
	background-position: -100px -464px;
}

#guide .cheroes.six{
	background-position: 0px -580px;
}

#guide .cheroes.six:hover{
	background-position: -100px -580px;
}

#guide .cheroes.seven{
	background-position: 0px -696px;
}

#guide .cheroes.seven:hover{
	background-position: -100px -696px;
}

/* MAP MAP SELECTION*/

#guide .maps{
	display:inline-block;
	vertical-align:top;
	background:url(http://www.teamliquid.net/staff/shiroiusagi/herosofthestorm/guide/newbie/battlegrounds_map.jpg) no-repeat;
	height:114px;
	width:140px;
	margin: 10px;
}

#guide .maps:hover div.ondiv{
	display:block;
	width: 140px;
	height: 117px;
	background: url('http://www.teamliquid.net/staff/shiroiusagi/herosofthestorm/guide/newbie/map_outline.png');

}

#guide .maps.one{
	background-position: 0px 0px;
}

#guide .maps.one:hover{
	background-position: -140px 0px;
}

#guide .maps.two{
	background-position: 0px -120px;
}

#guide .maps.two:hover{
	background-position: -140px -120px;
}

#guide .maps.three{
	background-position: 0 -240px;
}

#guide .maps.three:hover{
	background-position: -140px -240px;
}

#guide .maps.four{
	background-position: 0 -360px;
}

.maps.four:hover{
	background-position: -140px -360px;
}

#guide .maps.five{
	background-position: 0 -480px;
}

#guide .maps.five:hover{
	background-position: -140px -480px;
}

#guide .maps.six{
	background-position: 0 -600px;
}

#guide .maps.six:hover{
	background-position: -140px -600px;
}

#guide .maps.seven{
	background-position: 0 -720px;
}

#guide .maps.seven:hover{
	background-position: -140px -720px;
}

/* Terminology */

#guide .term{
	display:inline-block;
	vertical-align:top;
	background:url(http://www.teamliquid.net/staff/shiroiusagi/herosofthestorm/guide/newbie/terms_map.png) no-repeat;
	height:50px;
	width:100px;
}

#guide .term:hover div.ondiv{
	display:block;
	width:100%;
	height:100%;
}

#guide .term.one{
	background-position:0px 0px;
}

#guide .term.one:hover{
	background-position:0px -50px;
}

#guide .term.two{
	background-position:-100px 0px;
}

#guide .term.two:hover{
	background-position:-100px -50px;
}

#guide .term.two:hover a.current{
	background-position:-100px -50px;
}

#guide .term.three{
	background-position:-200px 0px;
}

#guide .term.three:hover{
	background-position:-200px -50px;
}

#guide a:link, #guide a:visited{
	color: #FFF;
	text-decoration: none;
}

#guide a:hover{
	color: #46abe4;
}