html	{ background: #000; }
body	{ background: url(http://images-cdn.perfectworld.com/en/woi/redesign2012/titansfury/bg-main.jpg) no-repeat center top; }
.hidden { display: none; } 
.main-container { margin: 15px auto 0; width: 1000px; }

/** header **/ 
.header { height: 200px; } 
#lnkHome { background: url(http://images-cdn.perfectworld.com/en/woi/redesign2012/titansfury/bg-logo.png) no-repeat center top; width: 279px; height: 168px; display: inline-block; float: left; margin-left: 127px;} 
.top-links { float: right; } 

/** col1 **/ 
.col1 { background: url(http://images-cdn.perfectworld.com/en/woi/redesign2012/titansfury/bg-left.png) top center no-repeat; width: 500px; height: 785px; padding: 25px 20px 0; float: left; }
.option-contents { height: 242px; overflow: hidden;  } 

/** Scroller **/ 
.option-story { width: 467px; margin: 0 auto; height: 234px; overflow: hidden; } 
.option-story p { font: 14px/22px Verdana; color: #c7b299; } 

.scrollerFrame { background: url(http://images-cdn.perfectworld.com/en/woi/redesign2012/titansfury/spr-scroller.png) top left no-repeat; width: 438px; height: 224px; display: inline-block; float: left; overflow: hidden; padding-top: 10px; } 
#scrollerContainer { width: 438px; height: 214px;  overflow: hidden; } 
#scrollerControls { background: url(http://images-cdn.perfectworld.com/en/woi/redesign2012/titansfury/spr-scroller.png) -438px 0; width: 29px; height: 234px; display: inline-block; float: right;} 
#scrollerScrollBar { background: url(http://images-cdn.perfectworld.com/en/woi/redesign2012/titansfury/spr-scroller.png) -467px 0 no-repeat; width: 14px; height: 200px; margin-top: 20px; } 
#scrollerContents { width: 390px; margin: 0 0 0 30px; overflow: hidden; min-height: 220px; padding-top: 20px; } 
#scrollerScrollBlock { width: 14px; height: 40px; background: url(http://images-cdn.perfectworld.com/en/woi/redesign2012/titansfury/spr-scroller.png) -481px 0;} 

/** video **/
.option-trailer	{ width: 393px; height: 218px;  margin: 0 auto; margin-top: 10px; }
#bg-trailer-overlay { width: 403px; height: 228px; position: absolute; background: url(http://images-cdn.perfectworld.com/en/woi/redesign2012/titansfury/video-frame.png); margin: -10px 0 0 -7px;}

.lbcontent .video	{ margin: 0 0 10px; }
.lbcontent .video embed	{ clear: both; }
.lbcontent .close	{ clear: both; float: right; }

/** Features **/ 
.features .page { height: 375px; overflow: hidden; } 
.feature { width: 460px; margin: 0 auto; height: 125px; overflow: hidden; } 
.feature .img { width: 170px; height: 122px; float: left; background: url(http://images-cdn.perfectworld.com/en/woi/redesign2012/titansfury/spr-features.png) no-repeat; } 
.feature-1 .img { background-position: 0 0; } 
.feature-2 .img { background-position: 0 -122px; } 
.feature-3 .img { background-position: 0 -244px; } 
.feature-4 .img { background-position: 0 -366px; } 
.feature-5 .img { background-position: 0 -488px; } 
.feature-6 .img { background-position: 0 -610px; } 

.feature .right { width: 280px; float: right;  } 
.feature h2 { font: 16px/24px Verdana; color: #ffcb7a; margin-top: 4px;} 
.feature p { font: 12px/14px Arial; color: #c7b299; } 


.pager { width: 95px; margin: 0 auto; height: 28px; margin-top: 15px;} 
.pager ul { display: inline-block; vertical-align: top; } 
.pager ul li { display: inline-block; font: 11px/14px Tahoma; margin: 6px; color: #c7b299; } 
.pager ul li:hover { cursor: pointer;} 
.pager ul li.selected { color: #ffcb7a; } 
.pager .left, .pager .right { display: inline-block; width: 25px; height: 28px; background: url(http://images-cdn.perfectworld.com/en/woi/redesign2012/titansfury/spr-arrows.png) no-repeat;} 
.pager .left { background-position: 0 0; float: left; } 
.pager .left:hover { background-position: 0 -28px; cursor: pointer; } 
.pager .right { background-position: -25px 0; float: right; } 
.pager .right:hover { background-position: -25px -28px; cursor: pointer;  } 

/** col2 **/ 
.col2 { background: url(http://images-cdn.perfectworld.com/en/woi/redesign2012/titansfury/bg-right.png) bottom center no-repeat; width: 420px; height: 202px; padding: 608px 20px 0; float: right; }

.col2 .social { height: 34px; overflow: hidden; padding-right: 35px; } 
.col2 .social span { float: right; } 

.col2 .social a { display: inline-block; height: 34px; width: 32px; background: url(http://images-cdn.perfectworld.com/en/woi/redesign2012/titansfury/spr-social.png) no-repeat;} 
.col2 .social .facebook { background-position: 0 0; } 
.col2 .social .facebook:hover { background-position: 0 -34px; } 
.col2 .social .twitter { background-position: -32px 0; } 
.col2 .social .twitter:hover { background-position: -32px -34px; } 
.col2 .social .youtube { background-position: -64px 0; } 
.col2 .social .youtube:hover { background-position: -64px -34px; } 

.screenshots-header a { background: url(http://images-cdn.perfectworld.com/en/woi/redesign2012/titansfury/spr-arrows.png) no-repeat; width: 36px; height: 30px; display: inline-block; margin-top: 8px; } 
.screenshots-header a.left { background-position: 0 -100px;  float: left; margin-left: 8px;} 
.screenshots-header a.left:hover { background-position: 0 -130px; cursor: pointer;  } 
.screenshots-header a.right { background-position: -36px -100px;  float: right; margin-right: 8px;} 
.screenshots-header a.right:hover { background-position: -36px -130px; cursor: pointer;   } 

.screenshots { width: 390px; margin: 0 auto; overflow: hidden; height: 79px; } 
.screenshots a { width: 130px; height: 79px; display: inline-block; background: url(http://images-cdn.perfectworld.com/en/woi/redesign2012/titansfury/spr-thumb.png) no-repeat; } 
.screenshots a.t1 { background-position: 0 0;  } 
.screenshots a.t2 { background-position: 0 -79px;  } 
.screenshots a.t3 { background-position: 0 -158px;  } 
.screenshots a.t4 { background-position: 0 -237px;  } 
.screenshots a.t5 { background-position: 0 -316px;  } 
.screenshots a.t6 { background-position: 0 -395px;  } 


/** Text sprites **/ 
.options { text-align: center; } 
.options a { display: inline-block; } 
.options .trailer 	{ background: url(http://images-cdn.perfectworld.com/en/woi/redesign2012/titansfury/spr-text.png) 0 -3px; width: 169px; height: 43px; }
.options .trailer:hover, .options .trailer.selected  	{ background: url(http://images-cdn.perfectworld.com/en/woi/redesign2012/titansfury/spr-text.png) 0 -47px;  cursor: pointer; }
.options .story { background: url(http://images-cdn.perfectworld.com/en/woi/redesign2012/titansfury/spr-text.png) -169px -47px; width: 169px; height: 43px; }
.options .story:hover, .options .story.selected 	{ background: url(http://images-cdn.perfectworld.com/en/woi/redesign2012/titansfury/spr-text.png) -169px -3px;  cursor: pointer; }
.features-header { background: url(http://images-cdn.perfectworld.com/en/woi/redesign2012/titansfury/spr-text.png) 0 -92px; width: 472px; height: 46px; margin: 0 auto 3px; }
.screenshots-header { background: url(http://images-cdn.perfectworld.com/en/woi/redesign2012/titansfury/spr-text.png) 0 -138px; width: 392px; height: 46px; margin: 0 auto; }
.top-links a { display: inline-block; height: 35px; background: url(http://images-cdn.perfectworld.com/en/woi/redesign2012/titansfury/spr-text.png); } 
.top-links.en .website  { background-position: 0 -184px; width: 196px; }
.top-links.en .website:hover  { background-position: 0 -230px;  }
.top-links.en .forum  { background-position: -196px -184px; width: 79px; }
.top-links.en .forum:hover  { background-position: -196px -230px;  }
.top-links.en .register  { background-position: -275px -184px; width: 185px; }
.top-links.en .register:hover  { background-position: -275px -230px;  }

.top-links.de .website  { background-position: 0 -184px; width: 227px; }
.top-links.de .website:hover  { background-position: 0 -227px;  }
.top-links.de .forum  { background-position: -227px -184px; width: 79px; }
.top-links.de .forum:hover  { background-position: -227px -227px;  }
.top-links.de .register  { background-position: -306px -184px; width: 182px; }
.top-links.de .register:hover  { background-position: -306px -227px;  }

.top-links.fr .website  { background-position: 0 -184px; width: 263px; }
.top-links.fr .website:hover  { background-position: 0 -227px;  }
.top-links.fr .forum  { background-position: -263px -184px; width: 80px; }
.top-links.fr .forum:hover  { background-position: -263px -227px;  }
.top-links.fr .register  { background-position: -343px -184px; width: 172px; }
.top-links.fr .register:hover  { background-position: -343px -227px;  }