﻿body {
font-family:Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
font-size:14px;
background:#000 url(/windsofchange/images/en/header-bg.jpg) no-repeat top center;
}

a, a:visited {
    color:#c96d00;
    text-decoration:none;
}

a:hover, a:active {
    color:#c94c00;
    text-decoration:underline;
}

a.back-to-top {
    display:block;
    width:30px;
    height:30px;
    background:url(/windsofchange/images/backtotop.png);
    position:absolute;
    left:-45px;
    margin-top:-30px;
}

a.back-to-top:hover {
    background-position:-30px 0;
}

a.back-to-top span {
    display:none;
}

p{
    color:#fff;
    padding:10px 0;
}

p.primary {
    
    color:#d2965c;
    font-size:125%;
    margin:10px 55px 30px 55px;


}

p.secondary {
    position:relative;
    color:#fff;

    padding:0px 55px 15px 55px;

}

h1.primary {
    font-size:140%;
    text-transform:uppercase;
    font-weight:normal;
    text-align:center;
    color:#fff;
    letter-spacing:.25em;
    margin:0 0 15px 0;
}

h1.secondary {
    font-size:100%;
    text-transform:uppercase;
    font-weight:normal;
    text-align:center;
    letter-spacing:.15em;
    margin:20px 0 20px 0;
}

h2 {
    color:#8b8479;
    font-size:150%;
    font-weight:normal;
}

.language {

    position:absolute;
    top:0;
    left: 0;
    right: 0;
    z-index:5;
    display:block;
    width:200px;
    margin:20px auto;
}

#container{ position:relative; width:608px; margin:0 auto; padding:1px 0 0 0; }

#home-button{
    display:block;
    position:absolute;
    width:92px;
    height:77px;
    background:url(/windsofchange/images/en/back-btn.png) no-repeat 0 0;
    top:10px;
    margin-left:-131px;
    z-index:6;
}

#home-button:hover{
    background-position: 0 -77px;

}

#costumes-callout{
    display:block;
    position:absolute;
    width:147px;
    height:178px;
    background:url(/windsofchange/images/en/costumes-btn.png) no-repeat 0 0;
    top:436px;
    margin-left:-131px;
    z-index:7;
}

#costumes-callout:hover{
    background-position: 0 -178px;

}

#intro {
    position:relative;
    top:300px;
    margin:0 auto;
    width: 608px;
    z-index:4;
}

#intro-bottom {

    margin:-200px auto 0 auto;
    width: 608px;
    height: 296px;
    background: url(/windsofchange/images/card-btm.png) no-repeat;
     
}

#getting-started {
    margin:300px auto 0 auto;
    width: 608px;
    background: url(/windsofchange/images/bio-bg.jpg) no-repeat;

}



#getting-started .content {
    margin:0 0 30px;
    width:300px;
    float:left;
}

#getting-started .learn-more {
    display:block;
    background:url(/windsofchange/images/en/faq-button.png) no-repeat 0 0;
    text-align:center;
    padding:0;
    width: 275px;
    height: 59px;
    margin-top:15px;
}

#getting-started .learn-more:hover {
 
    background-position: 0px -59px;
  
}

#getting-started .learn-more a {
    display:block;
    width:300px;
    height:40px;
    padding:7px 0;
}

#getting-started .learn-more span {
    display:none;
}

#faq { width: 565px;  margin:250px 0 30px 0; background: url(/windsofchange/images/box-bg.png) repeat-y; padding:15px; border: 1px solid #666;}

#faq h3 { color:#f99d4a; margin:30px 0 0 0;}

#keiran {
    margin:60px 0 30px 50px;
    width:270px;
    float:left;
}

#character1, #character2, #character3 {
    margin:0 auto;
    width:820px;
    
    background:url(/windsofchange/images/char1-bg.jpg) no-repeat;
}

#character1 p.one-col, #character2 p.one-col, #character3 p.one-col {
    width:380px;
}


#character2 {
    padding-top:25px;
    background:url(/windsofchange/images/char2-bg.jpg) no-repeat;
    
}

#character3 {
    padding-top:25px;
    background:url(/windsofchange/images/char3-bg.jpg) no-repeat;
    
}

#character1 p.primary, #character2 p.primary, #character3 p.primary {
    margin:0;

}


hr.top{
    height:1px;
    background:url(/windsofchange/images/horz-line.png) no-repeat;
    margin-bottom:20px;
}

#costumes hr.bottom{
    height:1px;
    background:url(/windsofchange/images/horz-line.png) no-repeat;
    margin-top:20px;
}

.costume-column{
    text-align:center;
    width:290px;
    float:left;
    margin-right:12px;
}

.costume-column h3{
    height:30px;
    margin-top:5px;
    color:#808080;
    font-size:115%;
    font-weight:normal;

    text-transform:uppercase;
}

#wallpaper {
    margin:20px auto 40px auto;
    width:608px;
}

.wallpaper-left{
    width:280px;
    float:left;
    margin:10px 15px 0 0;
}

.wallpaper-right{
    width:280px;
    float:right;
    margin:10px 15px 0 0;
}

#wallpaper select{
    width:280px;
    margin-top:10px;
}

.footer {
background: black url(http://www.guildwars.com/images/warinkryta/sb/footer-content.jpg) no-repeat top center;
padding: 10px 0 20px 0;
margin:0 auto;
text-align: center;

}

.footer img{
    padding:0 10px;
    border: 0;
}





.tooltip { position: absolute; padding:5px 10px; background:#333; border:1px solid #333; color:#fff; z-index:999; display:none; opacity:0;
            filter: alpha(opacity=0); -moz-opacity: 0; -moz-box-shadow: 1px 1px 4px rgba(0,0,0,.5); -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,.5);
            box-shadow: 1px 1px 4px rgba(0,0,0,.5);}

.tooltip a { color: #fff;}

.hover { position: absolute; opacity:0 ;filter: alpha(opacity=0); -moz-opacity: 0; z-index:3; }
                  
.hover a { display:block; width: 100%; height: 100%; }
                  
.character1 { background:url(/windsofchange/images/character1.jpg) no-repeat 0 0; top:0; left:-173px; width:319px; height:520px; }
.character2 { background:url(/windsofchange/images/character2.jpg) no-repeat 0 0; top:67px; left:598px; width:259px; height:596px; }
.character3 { background:url(/windsofchange/images/character3.jpg) no-repeat 0 0; top:0; left:467px; width:155px; height:268px;}
                  

.hover span { display:none; }

.clear{clear:both;}




/*Interactive Timeline*/


#contentWrapper{ }


#timeline-left{ float:left; height:500px; margin-right:20px; border-right:1px solid #333; }

ul#date{ padding:0; width:130px; margin:0; }

ul#date li{ list-style:none; margin:0; padding:10px; color:#c96d00; }

ul#date li.active{ color:#fff; }

ul#date li:not(.active):hover{ color:#c94c00; text-decoration:underline; cursor:pointer; background:#151515; }

.tooltip{ z-index:9999; display:none; opacity:0.95; position:absolute; background:#000; color:#fff; left:120px; }

.tooltip ul{ padding:0 20px 0 30px; }

.tooltip ul li{ padding:0; margin:0; }








