*{
	font: normal 12px Trebuchet MS;
}

img{
	border:0;
}

body{
	background:#fff;
}

#main-size-overflow {
    position: relative;
    width: 1230px;
    left: 50%;
    margin-left: -615px;
}

#main-overflow {
    width: 1230px;
    overflow: hidden;
}


#main{
	margin: 0 auto;
	width: 1275px;
	height: 751px;
	background:url('../graphic/tlo.jpg');
	position: relative;
    margin-left: -12px;
}

#main div#header{
	position:absolute;
	left:552px;
	top:16px;
	width:165px;
	height:120px;
	margin:0;
}

#main div#header a{}

ul#tabs{
	margin:0;
	list-style:none;
	width:495px;
	background-position:0px 30px;
	position:absolute;
	top:139px;
	left:390px;
	height:35px;
	padding:0;
}

ul#tabs li{
	display:inline;
	list-style:none;
	padding:0;
	margin:0;
}

ul#tabs li div{
	position:relative;
	width:165px;
	float:left;
}

ul#tabs li div div{
	/*position:absolute;*/
	width:167px;
	height:35px;
	background:url("../graphic/sprite.png") no-repeat;
	line-height:41px;
	text-align:center;
	cursor:pointer;
}

#tab1over{
	cursor:pointer;
	background:none;
	height:30px;
	left:413px;
	position:absolute;
	top:143px;
	width:107px;
	z-index:4000;
}
ul#tabs li div div#tab1{ left: 17px;}
ul#tabs li div div#tab2{ left:  0px;}
ul#tabs li div div#tab3{ left:-17px;}

ul#tabs li div div.on{
	background-position:-162px -776px;
	font-weight:bold;
	color:#0a2a61;
	font-size:14px;
	z-index:100;
}

ul#tabs li div div.off{
	 background-position:-162px -734px;
	font-weight:bold;
	font-size:12px;
	color:#104f66;
	z-index:1;
}

#center{
	width:570px;
	height:480px;
	position:absolute;
	top:176px;
	left:381px;
	background:none;
	overflow:hidden;
}

.text{
	color:#062948;
	font-weight:bold;
	font-size:12px;
}

table{
	font-size:12px;
	font-weight:bold;
	color:#225886;
}

td.tdKey{
	text-align:right;
	width:130px;
	font-weight:bold;
}

td.tdKey span{
	font-weight:bold;
}

td.tdVal{
	width:253px;
}

td.tdKey2{
	width:122px;
	text-align:right;
	padding-right:12px;
}

.tableContainer{
	width:472px;
}

.tableContainer2 {
	 position: relative; 
}

.tableContainer2 table{
	width: 472px;
}

#fbconnect-login {
	position: absolute;
	top: 5px;
	right: 10px;
}

.tableContainer table{
	margin-left:-20px;;
	width:466px;
}

.liniaDol{
	width:656px;
	height:10px;
	background:no-repeat url("../graphic/linia_dol.png");
}

.liniaDolLogin{	margin-top:30px;}
.liniaDolRegister{	margin-top:10px;}
.liniaDolRegisterFB{margin-top:20px;}
.liniaDolRetrPassword{margin-top:20px;}


.loginButton{
	cursor:pointer;
	margin:0 auto;
	line-height:50px;
	text-align:center;
	font-size:18px;
	font-weight:bold;
	color:#351d00;
	width:160px;
	height:47px;
	background:url('../graphic/sprite.png') no-repeat 0px -627px;
}

.loginButton.offsetLogin{	margin-top:30px;	}

.loginButton.offsetCreateAccount{float:left;	margin-top:20px;	}
.loginButton.offsetRegister{margin-top:20px;	}
.loginButton.offsetSkip	{	margin-top:20px;float:left;	}
.loginButton.offsetSend	{	margin-top:20px;	}
.loginButton.offsetRepassword{margin-top:20px;	}

#center #inner #contentChooseServer{display:none; }
#center #inner #contentTrailer{ display:block;}
#center #inner #contentTutorial{ display:none;}
#center #inner #contentRaces{ display:none; }
#center #inner #contentLogin{ display:none; width:448px; z-index:3000; position:relative; }
#center #inner #contentRegister  { display:none; width:448px;z-index:3000; position:relative;}
#center #inner #contentRedirect  { display:none; width:448px;}
#center #inner #contentRegisterFB{ display:none; width:448px;}
#center #inner #contentRetrPassword{display:none; width:448px;}
#center #inner #contentRepassword{  display:none; width:448px;}

#center #inner #contentFirstSteps{   
	display:none; 
	width:448px;
	left:-42px;
	position:relative;
	z-index:3000;
}

#contentFirstSteps .leftScroll,
#contentRaces .leftScroll {
	position:absolute;
	left:0px;
	top:149px;
	width:36px;
	height:34px;
	background:url('../graphic/sprite.png') no-repeat -531px -628px;
	z-index:50000;
}

#contentRaces .leftScroll{
	left:0px;
	top:212px;
}

#contentFirstSteps .rightScroll,
#contentRaces .rightScroll {
	position:absolute;
	left:404px;
	top:149px;
	width:36px;
	height:34px;
	background:url('../graphic/sprite.png') no-repeat -560px -628px;
	z-index:50000;
}

#contentRaces .rightScroll{
	left:452px;
	top:212px;
}



#contentAdventures .leftScroll{
	position:absolute;
	left:0px;
	top:149px;
	width:36px;
	height:34px;
	background:url('../graphic/sprite.png') no-repeat -531px -628px;
	z-index:50000;
}

#contentAdventures .stepsButtons{
	padding-left:33px;
}

#contentAdventures .rightScroll{
	position:absolute;
	left:404px;
	top:149px;
	width:36px;
	height:34px;
	background:url('../graphic/sprite.png') no-repeat -560px -628px;
	z-index:50000;
}

#contentChooseServer .upScroll{
	position:absolute;
	left:177px;
	top:43px;
	width:32px;
	height:30px;
	background:url('../graphic/sprite.png') no-repeat -465px -628px;
}

#contentChooseServer .downScroll{
	position:absolute;
	left:177px;
	top:323px;
	width:32px;
	height:30px;
	background:url('../graphic/sprite.png') no-repeat -498px -628px;
}

.inpLong{
	background:url('../graphic/inplong.png') no-repeat;
	position:relative;
	width:330px;
	height:31px;
}

.inpLongText .text{
	height:31px;
	line-height:38px;
}

.inpLong a{
	text-decoration:none;
}

.inpLong img{
	position:relative;
	top:7px;
	margin-left:10px;
}

.inpLong span{
	margin-left:10px;
	color:#062948;
	font-size:12px;
	font-weight:bold;
	position:relative;
	top:6px;
}

.chooseButton{
	cursor:pointer;
	background:url('../graphic/sprite.png') no-repeat -333px -628px;
	position:absolute;
	right:0px;
	top:-3px;
	width:90px;
	height:30px;
	color:#351D00;
	font-size:15px;
	font-weight:bold;
	line-height:29px;
	text-align:center;
}

#center #inner #contentAdventures{   
	display:none;
	width:448px;
	left:-42px;
	position:relative;
	z-index:3000;
}

#contentTrailer .playNow{
	position:absolute;
	top:328px;
	left:72px;
}

#contentTutorial .playNow{
	position:absolute;
	top:364px;
	left:72px;
}

#contentAdventures .playNow{
	margin-left:40px;
}

#contentFirstSteps .playNow{
	margin-left:40px;
}

#contentFirstSteps .text{
	padding:0 7px;
}

.leftScroll{
	display:none;
}

#steps{
	width:448px;
	height:286px;
}

#steps .items{
	
	height:281px;
}

#steps .items div{
	width:441px;
	height:55px;
	float:left;
}

#steps .items div .text{
    width:434px;
}

#steps .items div img{
	left:51px;
	margin-top:10px;
	position:relative;
}

#adventures{
	width:448px;
	height:286px;
}

#adventures .items{
	height:281px;
}

#adventures .items div{
	width:448px;
	height:55px;
	float:left;
}

#adventures .items div img{
	left:51px;
	margin-top:10px;
	position:relative;
}

#server{
	margin-left:22px;
	margin-top:28px;
	width:400px;
	height:246px;
}

.stepsButtons{
	width:400px;
	left:28px;
	position:relative;
	height:54px;
}

div.step{
	cursor:pointer;
	width:65px;
	height:35px;
	background:url('../graphic/sprite.png') no-repeat -345px -741px;
	text-align:center;
	color:#A9b9c6;
	font-size:12px;
	font-weight:bold;
	float:left;
	line-height:34px;
}

div.stepOn{
	color:#2E4E69;
	line-height:34px;
}

.fbconnect{
	height:40px;
	margin-left: 53px;
}

.fbconnect div{
	float:left;
	margin-top:10px;
}

.fbButtons{
	padding-left:22px;
	width:100%;
}

#fbconnect{
	cursor:pointer;
	margin-left:10px;
	margin-top:10px;
	float:left;
	width:107px;
	height:25px;
	background:url('../graphic/sprite.png') no-repeat -439px -41px;
}

#fbconnect-login {
	cursor:pointer;
	margin-left:10px;
	margin-top:10px;
	float:left;
	width:107px;
	height:25px;
	background:url('../graphic/sprite.png') no-repeat -439px -41px;
}

input.short{
	font-weight:bold;
	color:#062948;
	font-size:11px;
	border:0;
	width:237px;
	height:25px;
	background:none;
	padding-top:6px\9;/*hack na ie*/
}

div.inpShort{
	width:260px;
	border:0;
	background:url("../graphic/inpshort.png") no-repeat 7px 0px;
	height:26px;
	padding: 0 0 0 15px;
	overflow:visible;
}

div.inpShortRed{
	background:url("../graphic/inpshortred.png") no-repeat 7px 0px;
}

div.checkboxText{
	color:#062948;
	height:27px;
	float:right;
	margin-top:4px;
}

.checkbox{
	position:relative;
	width:27px;
	height:27px;
	background:none;
	float:left;
	margin-left: 9px;
}

.checkboxRed{
	position:relative;
	width:27px;
	height:27px;
	background:url("../graphic/check.png") no-repeat;
	float:left;
	margin-left: 9px;
}

.checkbox input,
.checkboxRed input{
	position:absolute;
	top:4px;
	left:4px;
	top:2px\9;
	left:2px\9;
}

.checkbox input,
.checkboxRed input{
	margin:7%\9 !important;
}

#contentRedirect #outer{
	margin-top:120px;
	width:357px;;
}

#contentRedirect #outer .text{
	text-align:center;
}

#loader{
	margin-left:96px;
	margin-top:12px;
	position:relative;
	width:181px;
	height:21px;
	background:url("../graphic/loader.png") no-repeat;
}

#loaderBar{
	position:absolute;
	top:4px;
	left:4px;
	width:100px;
	height:13px;
	background:#bbd5e6;
}

#center #inner{
	width:490px;
	height:480px;
	position:relative;
	left:62px;
	padding-left:17px;
	
}

#center #inner h1{
	font-size:36px;
	font-weight:bold;
	color:#113656;
	margin:25px 0;
}

#center #inner #races{
	height:210px;
	width:1470px;
}

#center #inner #races .items{
	height:190px;
}

#center #inner #races .race{
	width:461px;
	font-size:12px;
	color:#225886;
	float:left;
	padding-right:30px;
}

#center #inner #racesButtons{
	width:500px;
	left:-24px;
	margin:34px auto 0 auto;
	position:relative;
	height:100px;
}

#center #inner #racesButtons div{
	float:left;
	width:165px;
	height:90px;
	background:url('../graphic/sprite.png') no-repeat;
	position:relative;
	cursor:pointer;
}
#center #inner #racesButtons #elf{ background-position:-24px -366px;}
#center #inner #racesButtons #orc{ background-position:-240px -366px;}
#center #inner #racesButtons #hum{ background-position:-456px -366px;}

#center #inner #racesButtons div span{
	position:absolute;
	left:81px;
	top:52px;
	width:73px;
	font-size:12px;
	font-weight:bold;
	color:#2e4e69;
	text-align:center;
}

#center .playNow{
	width:100%;
	height:84px;
	overflow:hidden;
}

#center .playNow div{
	cursor:pointer;
	background:url('../graphic/sprite.png') no-repeat;
	width:210px;
	height:90px;
	margin-left:70px;
}

#center .playNow div.playEn{ background-position: 0px -120px;}
#center .playNow div.playDe{ background-position: -216px -120px;}
#center .playNow div.playPl{ background-position: -432px -120px;}

#main div.topElems{
	position:absolute;
	top:58px;
}

#main #lang{
	cursor:pointer;
	color:#4E748F;
	font-size:12px;
	font-weight:bold;
	width:215px;
	height:35px;
	left:162px;
	background:url("../graphic/sprite.png") no-repeat;
	background-position:-218px -2px;
	z-index:20000;
}

#main #lang #list{
	cursor:default;
	position:absolute;
	top:30px;
	left:-3px;
	/*background:url("../graphic/dropdown.png") no-repeat;*/
	width:218px;
	/*height:140px;*/
	padding-top:2px;
	display:none;
}

.list-top {
	background:url("../graphic/list_top.png") no-repeat;
    width: 214px;
    height: 12px;
}
.list-middle {
	background:url("../graphic/list_middle.png") repeat-y;
    width: 214px;
}
.list-bottom {
	background:url("../graphic/list_bottom.png") no-repeat;
    width: 214px;
    height: 12px;
}

#main #lang img{
	margin-right:6px;
}

#main #lang #list div#scroll{
	/*overflow-y:hidden; [> zmienic na wartosc "scroll" kiedy bedzie wiecej jezykow - ilosc bedzie wymagała scrolla <];*/
	/*overflow-x:hidden;*/
    overflow-x: hidden;
    overflow-y: auto;
	width:200px;
	height:114px;
    border: 0px;
}

#main #lang #first{
	margin-left:16px;
	width:166px;
	height:19px;
	margin-top:11px;
}

#main #lang #list div div{
	margin-left:9px;
	width:166px;
	height:19px;
	border-bottom:#cad8e3 solid 1px;
}

#main div#logButtons{
	right:162px;
	width:305px;
	height:38px;
	padding:0;
}

#main div#logButtons div{
	color:#4e748f;
	font-size:12px;
	font-weight:bold;
	float:left;
	text-align:center;
	height:34px;
	line-height:36px;
}

#main div#logButtons #login{
	width:151px;
	margin-left:3px;
	background:url("../graphic/sprite.png") no-repeat;
	background-position:0px -4px;
}

#v{
	float:left;
	height:20px;
	width:1px;
	background:url("../graphic/kreska.png") 0px 10px no-repeat;
}

#main div#logButtons #register{
	width:150px;
	background:url("../graphic/sprite.png") no-repeat;
	background-position:-66px -4px;
}

#main div#logButtons #register.logout{
	width:150px;
	color:#274356;
	background:url("../graphic/sprite.png") no-repeat;
	background-position:-66px -4px;
}

#main ul#menu
{
	list-style:none;
	position:absolute;
	right:163px;
	top:201px !important;
	top:280px;
	padding:0px 0 0 0 !important;
	padding:10px 0 0 0;
}

#main ul#menu li{
	list-style:none;
}

#main ul#menu li a{
	text-decoration:none;
}

#main ul#menu li div{
	width:158px;
	height:21px;
	background:url('../graphic/sprite.png') no-repeat;
	background-position:-167px -628px;
	line-height:37px;
	padding-left:8px;
	padding-top:10px;
	margin-bottom:10px;
	position:relative;
	cursor:pointer;
}

.watchPl{
	background:url('../graphic/player_button_pl.png') no-repeat;
}

.watchEn{
	background:url('../graphic/player_button_en.png') no-repeat;
}

.watchDe{
	background:url('../graphic/player_button_de.png') no-repeat;
}

#playMovieYT{
	position:relative;
	left:1px;
	top:1px;
	width:500px;
	height:320px;
	background-position:1px 1px;
}

#movieTrailer,
#movieTutorial{
	position:absolute;
	top:15px;
	left:15px;
}

#main ul#menu li span,
#playMovieYT span{
	color:#2e4e69;
	font-family:Trebuchet MS;
	font-size:12px;
	font-weight:bold;
	width:158px;
}

#movie{
	width:501px;
	height:327px;
	background:url('../graphic/playerN.png') no-repeat;
	position:relative;
	z-index:3000;
}

#movieTut{
    width:501px;
    height:327px;
    background:url('../graphic/playerN.png') no-repeat;
    position:relative;
    z-index:3000;
}

#main ul#menu li div div{ 
	width:26px;
	height:23px;
	background:url('../graphic/sprite.png') no-repeat;
	position:absolute;
	right:14px;
	top:2px;
}
#main ul#menu li div div#but1{ background-position:-432px 0px; }
#main ul#menu li div div#but2{ background-position:-564px 0px; }
#main ul#menu li div div#but3{ background-position:-465px 0px; }
#main ul#menu li div div#but4{ background-position:-531px 0px; }
#main ul#menu li div div#but5{ background-position:-498px 0px; }

#footer{
	z-index:7000;
	width:100%;
	position:absolute;
	bottom:0px;
}

#footer #up{
	margin:0 auto 15px auto;
	text-align:center;
	width:350px;
	font-size:11px;
	color:#2f383f;
}

#footer #up a:visited,
#footer #up a:active,
#footer #up a:hover{
	color:#2F383F;
	font-size:11px;
	font-weight:bold;
	position:relative;
}
	
#footer #down{
	margin:0 auto 15px auto;
	width:350px;
	height:20px;
	position:relative;
	text-align:center;
	color:#2a6e93;
	font-size:11px;
}

#footer #down a{
	position:relative;
}

#footer #down a img{
	position:relative;
	top:7px;
}

#main #blenda{
	position:absolute;
	top:177px;
	left:191px;
	width:920px;
	height:281px;
	background:url('../graphic/blenda.png') no-repeat;
}

#main #tabLine{
	position:absolute;
	top:170px;
	left:213px;
	width:849px;
	height:10px;
	background:url('../graphic/linia_menu.png') no-repeat;
	z-index:1000;
}

#main img#image{
	position:absolute;
	/*width:480px;
	height:626px;*/
	bottom:0px;
	left:0px;
	z-index:2000;
}

#image01{
	position:absolute;
	top:125px;
	left:0px;
	display:block;
	width:480px;
	height:304px;
	background:url('../graphic/postacie/elfka_01.png') no-repeat;
	z-index:2000;
}
	
#image02{
	width:392px;
	height:50px;
	position:absolute;
	top:429px;
	left:0px;
	display:block;
	background:url('../graphic/postacie/elfka_02.png') no-repeat;
}

#cloud1{
	width:283px;
	height:383px;
	position:absolute;
	top:370px;
	left:0px;
	background:url('../graphic/postacie/chmurka_1.png') no-repeat;
	z-index:2200;
}

#cloud2{
	width:197px;
	height:239px;
	position:absolute;
	top:515px;
	left:283px;
	background:url('../graphic/postacie/chmurka_2.png') no-repeat;
	z-index:2200;
}

#contentTrailer{
	margin-left:-71px;
	position:relative;
}

#contentTutorial{
	margin-left:-71px;
	position:relative;
}

#contentTutorial .stepsButtons{
	padding-left:90px;
	position:absolute;
	top:324px;
}

.blendaL{
	position:absolute;
	top:0px;
	left:0px;
	width:113px;
	height:295px;
	background:url('../graphic/blenda_nowa_01.png') no-repeat;
	background-position:-115px 0px;
}

.blendaR{
	position:absolute;
	top:0px;
	left:426px;
	width:79px;
	height:295px;
	background:url('../graphic/video_3.png') no-repeat;
}

.blendaT{
	position:absolute;
	top:0px;
	left:57px;
	width:398px;
	height:57px;
	background:url('../graphic/video_2.png') no-repeat;
}

/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 
div.scrollable { 
 
    /* required settings */ 
    position:relative; 
    overflow:hidden; 
    width: 660px; 
    height:90px; 
} 
 
/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a extremely large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable div.items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
} 
 
/* root element for scrollable items */ 
div.scrollable div.items22 { 
    position:absolute; 
 
    /* this time we have very large space for the height */ 
    height:20000em; 
}
 
/* 
    a single item. must be floated in horizontal scrolling. 
    typically, this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable div.items div { 
    float:left; 
}  

div.scrollable div.items div.vertical { 
    float:none; 
	clear:both;
} 
 
/* you may want to setup some decorations to active the item */ 
div.items div.active { 
    border:1px inset #ccc; 
    background-color:#fff; 
}

.hand{
	cursor:pointer;
}

/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 59000;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 60000;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}

#fb-like {
    position: absolute;
	left: 935px;
	top: 385px;
	background: #ffffff;
}
.rightJusty {
    float: right;
    display: inline;
    margin-left: 7px;
}
.leftJusty {
    float: left;
    width: 100px;
    overflow: hidden;
    padding-top: 8px;

}
.top-menu {
    position: relative;
    width: 1000px;
    left: 50%;
    margin-left: -500px;
}
.main-frame {
    position: relative;
    width: 1038px;
    left: 50%;
    margin-left: -519px;  
}
#login-error {
    display: none; 
    color: red;
    font-weight: bold;
    text-align: center;
}

.error-message {
    display: none; 
    color: red;
    font-weight: bold;
    text-align: center;
}