html {
    overflow-y: scroll;
}
body {
    /* harmaa #2b2f34, tumman punainen #190a09 */
    
    font-family: Arial;
    max-width: 1000px;
    xbackground: -webkit-linear-gradient(#190a09, #150e0c, #190a09);
    /* For Safari 5.1 to 6.0 */
    
    xbackground: -o-linear-gradient(#190a09, #150e0c, #190a09);
    /* For Opera 11.1 to 12.0 */
    
    xbackground: -moz-linear-gradient(#190a09, #150e0c, #190a09);
    /* For Firefox 3.6 to 15 */
    
    xbackground: linear-gradient(#190a09, #150e0c, #190a09, #150e0c, #190a09);
    /* Standard syntax */
    
    margin: auto;
    xbackground: #1e0000;
    /* For browsers that do not support gradients */
    
    background-image: url("pics/arreat/arreat_background.jpg");
}
.build-container {
    xpadding: 10px;
    xmargin-top: 10px;
    height: auto;
    xbackground-image: url("pics/texture/huge_stone3.jpg");
    xbackground-color: #333333;
    xborder: 1px solid #fff0e5;
	display:none;
}
.source-credits {
    font-style: italic;
    font-size: 16px;
    float: right;
    xborder: 1px solid white;
}
.skill-container {
    xmargin-left: 80px;
    margin-left: 7%;
    xmargin-right: 5%;
    xmargin-top: -10px;
}
ul.skill-list {
    list-style-type: none;
}
.skill-item {
    position: relative;
    margin: 5px;
    width: 218px;
    height: 59px;
    float: left;
    background-image: url("pics/texture/stone_tex_1_border1.jpg");
    border: 3px solid #4d4d4d;
    /* harmaa  */
    
    border-style: inset;
    moz-box-shadow: inset 0 0 100px #000000;
    /*sisäänpäin tuleva varjo*/
    
    webkit-box-shadow: inset 0 0 100px #000000;
    /*sisäänpäin tuleva varjo*/
    
    box-shadow: inset 0 0 15px #000000;
    /*sisäänpäin tuleva varjo*/
}
.skill-item:before {
    /* toinen border; saadaan hieno efekti inset/outset tyyleillä*/
    
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 3px solid #4d4d4d;
    border-style: outset;
}
.skill-icon {
    width: 55px;
    height: 55px;
    margin-left: 2px;
    margin-top: 2px;
    xborder: 1px solid gray;
    box-shadow: 0px 0px 8px black;
    float: left;
}
.skill-icon-small {
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: -2px;
    margin-left: 1px;
    xmargin-top: 2px;
    xborder: 1px solid gray;
    xbox-shadow: 0px 0px 8px black;
    xfloat: left;
}
.skill-name {
    float: left;
    padding: 5px;
    text-shadow: 0px 0px 3px black;
    color: #F3E6D0;
}
.skill-name-text {
    color: #c4ca9b;
    text-decoration: none;
}
.item-icon-small {
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: -2px;
    margin-left: 1px;
    xmargin-top: 2px;
    xborder: 1px solid gray;
    xbox-shadow: 0px 0px 8px black;
    xfloat: left;
}
.item-legendary {
    color: #d27a46;
    text-decoration: none;
    xtext-shadow: -0.5px 0 black, 0 0.5px black, 0.5px 0 black, 0 -0.5px black;
}
.item-magical {
    color: #4169e1;
    text-decoration: none;
    xtext-shadow: -0.5px 0 black, 0 0.5px black, 0.5px 0 black, 0 -0.5px black;
}
.right-icon {
    float: right;
    padding: 3px;
    text-shadow: 0px 0px 3px black;
    color: #ebb16c;
}
.mouse-icon {
    width: 17px;
    height: 17px;
}
.rune-icon {
    width: 20px;
    height: 20px;
    float: left;
    padding: 3px;
    margin-top: -5px;
}
.rune-name {
    float: left;
    color: #ca850d;
    margin-top: 0px;
    text-shadow: 0px 0px 3px black;
}
.passive-container {
    xmargin-left: 200px;
    margin-left: 21%;
    width: 580px;
    text-align: center;
    xborder: 1px solid white;
}
.passive-container a {
    text-decoration: none;
}
.passive-list {
    text-align: center;
    xborder: 1px solid white;
}
.passive-list img {
    xdisplay: inline-block;
}
.passive-list:after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 0;
}
.passive-item {
    float: left;
    margin: 5px;
    padding: 5px;
    xborder: 1px solid white;
}
.passive-icon {
    display: inline-block;
    margin: auto;
    width: 55px;
}
.passive-name {
    text-align: center;
    color: #e3e6d0;
}
h1 {
    font-size: 50px;
    margin-bottom: 10px;
    font-family: Arial;
    margin-top: 10px;
}
h2 {
    font-size: 30px;
    margin-bottom: 10px;
    font-family: Arial;
}
h3 {
    font-size: 20px;
    margin-bottom: 3px;
    margin-top: 0px;
	display:inline;
}
.changelog {
    font-style: italic;
    font-size: 15px;
	display:none;
}
.alablokki {
    xtext-align: center;
    color: #8D9196;
    font-size: 11px;
    font-family: ;
    background-color: #0d0d0d;
    width: 24px;
    margin: auto;
    padding: 3px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.italix {
    font-style: italic;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.content {
    font-size: 16px;
    padding: 30px;
    padding-left: 48px;
    padding-right: 35px;
    color: #afafaf;
    /* vanha vaalea #DCEBDD  */
    
    letter-spacing: 0.1px;
    margin-top: 50px;
    xmargin-left: 60px;
    xbox-shadow: 0px 0px 0px #1C1C1C;
    xbackground: -webkit-linear-gradient(#190a09, #260f0d);
    /* For Safari 5.1 to 6.0 */
    
    xbackground: -o-linear-gradient(#190a09, #260f0d);
    /* For Opera 11.1 to 12.0 */
    
    xbackground: -moz-linear-gradient(#190a09, #260f0d);
    /* For Firefox 3.6 to 15 */
    
    xbackground: linear-gradient(#190a09, #191009);
    /* Standard syntax */
    /* Bodyn background: #260f0d Note: voit lisätä vären määrää gradienttissa, erota värit vain pilkuilla */
    
    xborder: 1px solid black;
    xbackground: #370608;
    /* For browsers that do not support gradients */
    
    background-color: #0d0d0d;
    /* #304345 */
    
    background-color: rgba(0, 0, 0, 0.75);
}
}
/* ARREAT */

.arreat-top {
	xz-index: 5;
    border: 1px solid white;
    margin-top: -40px;
    margin-left: -25px;
    margin-right: -35px;
    background-image: url("pics/arreat/mid-textboxtop-back.png");
    height: 20px;
    width: 980px;
    position: absolute;
}
.arreat-top-left {
    xborder: 1px solid white;
    margin-top: -40px;
    xmargin-right: -35px;
    background-image: url("pics/arreat/mid-textboxtop-left.png");
    height: 20px;
    width: 36px;
    position: absolute;
}
.arreat-left {
    xborder: 1px solid white;
    margin-top: -20px;
    margin-right: -35px;
    background-image: url("pics/arreat/mid-textboxleft.png");
    width: 22px;
    position: absolute;
}
.arreat-bottom-left {
    position: absolute;
    xborder: 1px solid white;
    margin-top: -55px;
    margin-right: -35px;
    background-image: url("pics/arreat/mid-textboxbot-left2.png");
    height: 98px;
    width: 132px;
}
.arreat-bottom {
    xborder: 1px solid white;
    margin-top: 18px;
    margin-left: -35px;
    margin-right: -35px;
    background-image: url("pics/arreat/mid-textboxbot-back2.png");
    height: 25px;
    width: 1000px;
    position: absolute;
}
.arreat-bottom-right {
    position: absolute;
    xborder: 1px solid white;
    margin-top: -55px;
    margin-left: 835px;
    margin-right: -35px;
    background-image: url("pics/arreat/mid-textboxbot-right2.png");
    height: 98px;
    width: 132px;
}
.arreat-right {
    xborder: 1px solid white;
    margin-top: -20px;
    margin-left: 946px;
    margin-right: -35px;
    background-image: url("pics/arreat/mid-textboxright.png");
    width: 22px;
    position: absolute;
}
.arreat-top-right {
    xborder: 1px solid white;
    margin-top: -40px;
    margin-left: 931px;
    xmargin-right: -35px;
    background-image: url("pics/arreat/mid-textboxtop-right.png");
    height: 20px;
    width: 36px;
    position: absolute;
}
.arreat-side-borders {
    height: 2300px;
}
.arreat-left-sides {
    margin-left: -55px;
    /* -35px */
}
.arreat-header-middle {
    background-image: url("pics/arreat/header-back.png");
    height: 35px;
    width: 900px;
    xmargin-top: 5px;
    position: absolute;
}
.arreat-header-left {
    background-image: url("pics/arreat/header-left2.png");
    width: 80px;
    height: 47px;
    margin-top: -7px;
    margin-left: -20px;
    position: absolute;
}
.arreat-header-right {
    background-image: url("pics/arreat/header-right2.png");
    width: 80px;
    height: 47px;
    position: absolute;
    margin-top: -7px;
    xfloat: right;
    margin-left: 850px;
}
.header-spacer-upper {
    height: 5px;
    margin-top: 20px;
    xmargin-bottom: 20px;
}
.header-spacer-lower {
    height: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
}
/* END ARREAT */

.viewBuild{
	xdisplay:inline;
	}
.guide-container{
	display:none;
	}