/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
body{
	
}
a{
	text-decoration:none;
}
strong{
	font-weight:bold;
}
html{
	min-width:980px;
	background:url(../img/bg.jpg?v=2) 50% 0px no-repeat;
	font-family:'Alegreya', serif;
	color:#323131;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	html{
		margin-left: 1px;
		overflow-x: hidden;
	}
}

#main_wrapper{
	display:none;
	width: 1000px;
	position:relative;
	background: url(../img/scroll.png) 3px 4px;
	height: 512px;
	margin: 110px auto 0px;
}
#inner_content{
	padding:45px 105px;
}

.header{
	text-align:center;
}
.sides, #play_button, .form_container, h2 .h2_bg, .images .imagebox, .input_bg, .gender_row .radio_bg, .s_value .bg, .s_option .bg{
	display:block;
	background-image:url(../img/sprite-landingpage2.png?v=4);
}
.header .sides{
	position: absolute;
	top:18px;
	width: 95px;
	height: 26px;
	background-position: -200px -43px;
}
.header .sides.h1_right{
	right:0px;
	background-position: -200px -70px;
}
.header h1{
	position:relative;
	width:585px;
	margin:0px auto;
	padding:4px;
	font-weight:bold;
	font-size:40px;
	color:#438221;
	text-shadow:0px -1px 5px #000, 0px 1px 1px #000, 1px 0px 1px #000, -1px 0px 1px #000;
}
.header p{
	padding: 5px 30px;
	font-size: 18px;
	line-height: 1.1em;
	font-weight: bold;
}
#play_button{
	position: absolute;
	right: 17px;
	display: inline-block;
	top: 200px;
	vertical-align: middle;
	line-height: 106px;
	width: 123px;
	text-align: center;
	height: 112px;
	background-position: -170px -352px;
}
#play_button a{
	z-index:1;
	display:block;
	position:absolute;
	right:0px;
	top:0px;
	width:100%;
	height:100%;
}
#play_button .stars{
	position:absolute;
	width:123px;
	height:217px;
	top: -45px;
	left: 17px;
	background:url(../img/gwiazdki.png);
}
#play_button .stars.hover{
	background-position:0px -219px;
}
#play_button span{
	color:#d8351a;
	font-size:25px;
	font-weight:bold;
	text-shadow:0px 2px 0px #000;
}
#play_button span.hover{
	text-shadow:0px 2px 0px #000, 0px 0px 20px #fff, 0px 0px 5px #fff;
}
#main_page_button a{
	display:block;
	width: 79px;
	height: 62px;
	position: absolute;
	top: 383px;
	left: 902px;
}
#main_page_button a:hover{
	background: url(../img/sprite-landingpage2.png?v=4) -325px 0px;
}
.sides_container{
	overflow:hidden;
}
h2{
	width:324px;
	position:relative;
	margin:0px auto;
	color:#e8b61e;
	text-shadow:0px -1px 5px #000, 0px 1px 1px #000, 1px 0px 1px #000, -1px 0px 1px #000;
	font-size:26px;
	line-height:26px;
	text-align:center;
	font-weight:bold;
}
h2 .h2_bg{
	width:324px;
	height:42px;
	position:absolute;
	top:15px;
}
.content{
	width:790px;
	margin-top:5px;
	font-size:15px;
}
.content .left_side{
	width:440px;
	float:left;
}
.content .right_side{
	width:350px;
	float:right;
}
#register_form{
	padding:50px 0px 0px;
	margin:0px auto;
	width:250px;
	color:#505050;
}
input{
	background:none;
	border:0px;
	outline:0px;
	width:163px;
	padding:0px;
	display: inline-block;
	font-size:14px;
	font-family:Alegreya;
	vertical-align: middle;
	line-height:16px;
}
.reg_step2 .row{
	width:250px;
}
.reg_step2 .row p{
	margin-top:5px;
	font-size:12px;
	line-height:15px;
	text-align:center;
}
.row label{
	font-weight:bold;
	line-height:22px;
	display:inline-block;
	vertical-align: middle;
	text-align:right;
	width:63px;
	float:left;
}
.row label span{
	display: inline-block;
	vertical-align: middle;
	line-height:12px;
	font-size:14px;
}
.row .input_wrapper{
	float:right;
	height:22px;
	width:180px;
}
.input_bg{
	background-position: 0px -375px;
	height: 22px;
	width: 164px;
	padding-left:5px;
}
.row.accept_terms a, .s_option a{
	color: black;
	border-bottom:1px dotted black;
}
.row.accept_terms .input_wrapper{
	float:left;
	width: 26px;
	cursor:pointer;
	height: 20px;
	margin:2px 0px 0px 5px;
}
.row.accept_terms .input_bg{
	background-position:-296px -43px;
	height:20px;
	width:21px;
}
.row.accept_terms .input_bg.active{
	background-position:-330px -63px
}
.row.accept_terms .input_wrapper .checked{
	width: 26px;
	height: 20px;
}
#accept_terms{
	display:none;
}

.form_container{
	margin-top: -11px;
	background-position: -4px -155px;
	width: 350px;
	height: 196px;
}
.row{
	position:relative;
	height:26px;
}
.row.error{
	color:red;
}
.row.error input{
	color:red;
}
.error_message{
	font-size:0.8em;
	position:absolute;
	bottom: 0px;
	z-index:3;
	left:-110px;
	width:100px;
	padding:3px;
	border-radius:3px;
	border: 1px solid bisque;
	background-color:#d8351a;
	box-shadow:0px 0px 5px red;
	color:bisque;
}
.two_column_container{
	margin-top:32px;
}

.two_column_container .column{
	width:50%;
	float:left;
	line-height:15px;
}
.column ul li:before {
	content: "* ";
}
.column ul li{
	margin-bottom:1px;
	padding:0px 10px;
}
.images .imagebox{
	background-position:0px -43px;
	width: 195px;
	height: 111px;
	display:inline-block;
}
.imagebox a{
	display:block;
	padding:7px 11px;
}
.reg_step2 .row.nickname{
	height:70px;
}
.reg_step2 .row.nickname .input_bg{
	background-position:0px -352px;
}
.reg_step2 .row.nickname input{
	width:112px;
}
.reg_step2{
	
}
.reg_step2 .side_left{
	width:250px;
	float:left;
	padding:0px 30px;
}
.gender_row{
	height:22px;
}
.row.gender{
	height:70px;
}
.radio{
	cursor:pointer;
	overflow:hidden;
	width:100px;
}
.radio .radio_bg{
	height:16px;
	width:16px;
	margin-right:3px;
	float:left;
	background-position:-313px -64px;
	
}
.row.gender .input_wrapper{
	width:175px;
	padding-top:4px;
}
.radio.active .radio_bg{
	background-position:-296px -64px;
}
.radio.active .radio_label{
	font-weight:bold;
}
.radio .radio_label{
	cursor:pointer;
	line-height:16px;
	display: block;
	vertical-align: auto;
	text-align: left;
	float:left;
}
.select_wrapper{
	cursor:pointer;
}
.s_value{
	font-weight:bold;
}
.s_value, .s_option{
	line-height:22px;
	padding-left:1px;
}
.s_value .bg, .s_option .bg{
	width:16px;
	margin-top:3px;
	display:block;
	float:left;
	height:16px;
	margin-right:3px;
}
.s_value .bg{
	background:none;
}
.s_option .bg{
	background-position:-313px -64px;
}
.s_option:hover .bg{
	background-position:-296px -64px;
}
.s_option:hover{
	font-weight:bold;
}
.select_wrapper:hover .s_list{
	display:block;
}
.s_list{
	display:none;
	background:url(../img/scroll.png) 50% 50%;
	max-height:140px;
	overflow:hidden;
	box-shadow:0px 0px 3px #000;
	border-radius:5px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}
.randomize_button{
	width:50px;
	line-height:22px;
	text-align:center;
	font-size:14px;
	font-weight:bold;
	position:absolute;
	top:0px;
	cursor:pointer;
	color:black;
	right:12px;
}
.randomize_button:hover{
	text-shadow:0px 0px 5px #fff;
}

.row.world .input_bg{
	background-position:0px -398px;
}
.step2-top-bg, .step2-bottom-bg{
	background-image: url(../img/sprite-landingpage2.png?v=4);
	width: 324px;
	height: 42px;
	margin:0px auto;
}
.step2_inner_wrapper{
	padding:5px 0px 0px;
	position:relative;
	z-index:10;
	height:230px;
}
.reg_step2 .side_right{
	float:right;
	margin-right:35px;
	width:400px;
}
.side_right .header{
	margin-bottom:5px;
	font-weight: bold;
	text-align:center;
}
.prof_wrapper{
	cursor:pointer;
	padding:1px;
	border:1px solid #444;
	border-radius:10px;
	overflow:hidden;
	text-align:center;
}
.prof.active .prof_name, .prof:hover .prof_name{
	font-weight:bold;
	font-size:14px;
}

.prof_icon{
	width:32px;
	height:48px;
	display:inline-block;
	margin-top:3px;
	margin-bottom:10px;
}
.prof_wrapper .prof{
	width:66px;
	float:left;
}
.prof_name{
	text-align:center;
	line-height:26px;
	font-size:13px;
}
.dancer .prof_name{
	line-height:13px;
}

.prof.hunter .prof_icon{background:url(http://img.margonem.pl/obrazki/postacie/hun/70/m_hun04.gif);}
.prof.mag .prof_icon{background:url(http://img.margonem.pl/obrazki/postacie/mage/100/m_mag04.gif);}
.prof.warrior .prof_icon{background:url(http://img.margonem.pl/obrazki/postacie/woj/30/m_woj07.gif);}
.prof.paladyn .prof_icon{background:url(http://img.margonem.pl/obrazki/postacie/pal/90/m_pal25.gif);}
.prof.tracker .prof_icon{background:url(http://img.margonem.pl/obrazki/postacie/trop/90/m_tr27.gif);}
.prof.dancer .prof_icon{background:url(http://img.margonem.pl/obrazki/postacie/bd/100/m_bd07.gif);}

.prof_wrapper.female .prof.hunter .prof_icon{background:url(http://img.margonem.pl/obrazki/postacie/hun/70/f_hun02.gif);}
.prof_wrapper.female .prof.mag .prof_icon{background:url(http://img.margonem.pl/obrazki/postacie/mage/90/f_mag20.gif);}
.prof_wrapper.female .prof.warrior .prof_icon{background:url(http://img.margonem.pl/obrazki/postacie/woj/60/f_woj11.gif);}
.prof_wrapper.female .prof.paladyn .prof_icon{background:url(http://img.margonem.pl/obrazki/postacie/pal/90/f_pal18.gif);}
.prof_wrapper.female .prof.tracker .prof_icon{background:url(http://img.margonem.pl/obrazki/postacie/trop/90/f_tr20.gif);}
.prof_wrapper.female .prof.dancer .prof_icon{background:url(http://img.margonem.pl/obrazki/postacie/bd/80/f_bd01.gif);}

.prof_description{
	display:none;
	padding:5px;
	border:1px solid #444;
	border-radius:10px;
	overflow:hidden;
	margin-top:10px;
	text-align:justify;
}
.footer{
	position:absolute;
	bottom:28px;
	width:790px;
	text-align:center;
}

#nickname_generator{
	padding:5px;
	border-radius:3px;
	display:none;
	box-shadow:0px 0px 10px #000;
	z-index:10;
	background:url(../img/scroll.png) 50% 50%;
	position:absolute;
	width:512px;
}
#nickname_generator .types{
	width:150px;
	float:left;
}
#nickname_generator .names{
	width:357px;
	float:right;
}
.types li{
	height:20px;
	line-height:20px;
	cursor:pointer;
	margin-bottom:1px;
	background-color:rgba(0,0,0,0.1);
	font-size:13px;
	padding:0px 5px;
}
#nickname_generator .header{
	font-size:16px;
	line-height:22px;
	background-color:rgba(0,0,0,0.3);
	padding:2px;
	font-weight:bold;
	color: white;
	margin-bottom:3px;
}
#generator_close{
	float:right;
	background-color:black;
	color:white;
	cursor:pointer;
	font-size:13px;
	font-weight:normal;
	line-height:22px;
	padding:0px 3px;
	border-radius:3px;
}
.types li:hover{
	background-color:rgba(0,0,0,0.2);
}
#step2{
	display:none;
}

.bigAlert{
	position:absolute;
	z-index:100;
	width:300px;
	padding:5px;
	text-align:center;
	border-radius:3px;
	border: 1px solid bisque;
	background-color:#d8351a;
	box-shadow:0px 0px 5px red;
	color:bisque;
}
.bigAlert .but_wrapper{
	margin-top:20px;
}
.bigAlert .but_wrapper .closeBut{
	display:inline-block;
	padding:2px 5px;
	background-color:black;
	border-radius:3px;
	border:1px solid white;
	box-shadow:0px 0px 2px #000;
	cursor:pointer;
}
.list{
	margin-top:10px;
}
.list a{
	color:black;
	display:inline-block;
	padding:2px 3px;
	font-size:16px;
	margin-bottom:2px;
	background-color:rgba(0,0,0,0.1);
}
.list a:hover{
	background-color:rgba(0,0,0,0.2);
}
/*scrollbar*/
.__scrollBarWrapper{
  position:absolute;
  width:8px;
  right:0px;
  top:0px;
  overflow:hidden;
  background-color:rgba(0,0,0,0.2);
}
.__scrollBarWrapper div{
  position:absolute;
  background-color:rgba(255,255,255,0.3);
  width:100%;
  top:0px;
  cursor:pointer;
}