<style>
.maintitle { margin-top: -10px; margin-right: -10px; }
.title img { vertical-align: middle; padding-right: 13px; }
.title { font-size: 15px; color: #fff; padding: 13px 20px; }
.content {  }
.content * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.first .grid { padding: 0 25px; }
.second .grid { padding: 0 30px; }
.grid { float: left; }
.grid.col-1 {}
.grid.col-2 { }
.grid.col-4 { }
.grid.col-4-1 {  }

.content input[type=text], .content input[type=number], .content textarea { margin:0 auto;border-radius: 0; text-align:center; margin-bottom: 15px; margin-top: 8px;  display: block; padding: 10px 7px; border: 2px solid #e9edf1;  }
.content input[type=number] { width: 50%; }
.content textarea { min-height: 270px; max-height: 500px; }

.content { font-size: 14px; color: rgb(121, 129, 141); }
.content span { color: #98a1b0; font-size: 10px; }

#content input[type=submit] {     opacity: 0.7;
    cursor: pointer;
    font-size: 15px;
    color: rgb(255, 255, 255);
    display: block;
    /* width: 100%; */
    text-align: center;
    padding: 10px;
    margin: 0 auto;
    background: #a52424;
    /* padding-top: 65px; */
    /* padding-bottom: 26px; */
    border: 2px solid #e9edf1; }
#content input[type=submit]:hover { opacity: 1.0; }

.sex { display: inline-block; margin-top: 8px; padding: 0 5px; }
.sex:last-child { border-left: 1px solid #cccfd3; padding-left: 6px; }
.sex > div{ width: 27px; height: 41px; }
.sex.men > div{ background: url({style_images_url}/gamecp_c_char_men.png) no-repeat center center; }
.sex.men.active > div{ background: url({style_images_url}/gamecp_c_char_men_active.png) no-repeat center center; }
.sex.girl > div{ background: url({style_images_url}/gamecp_c_char_girl.png) no-repeat center center; }
.sex.girl.active > div{ background: url({style_images_url}/gamecp_c_char_girl_active.png) no-repeat center center; }

.skins { display: none; text-align: center; }
.skins.active { display: block; }
.skins > img { margin-bottom: 6px; margin-right: 3px; cursor: pointer; }

.content.second { padding: 50px 90px; }
.second .image { cursor: pointer; position: relative; border: 5px solid #fff; height: 162px; width: 316px; background-repeat: no-repeat; background-size: cover; }

.second .image.market { background-image: url({style_images_url}/gamecp_c_char_market_hover.png); float:right; }
.second .image.market:hover, .second .image.market.active { background-image: url({style_images_url}/gamecp_c_char_market.png); }

.second .image.sc { background-image: url({style_images_url}/gamecp_c_char_sc_hover.png); }
.second .image.sc:hover, .second .image.sc.active { background-image: url({style_images_url}/gamecp_c_char_sc.png); }

.second .image .cover { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; }
.second .image.active .cover { background: url({style_images_url}/gamecp_c_char_cover.png) repeat-x center bottom; }
.second .image .cover .info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; text-align: center; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.41);}

.second .image .cover .info h2 { color: #fff; font-size: 30px; margin-bottom: 10px; }
.second .image .cover .info p { color: #fff; font-size: 11px; line-height: 20px; }
.maintitle_text {
    color: #225985;
    font-size: 22px;
}
</style>
<form action="" method="post">
	<div class="maintitle">Tworzenie postaci</div>
	<div class="ipsPad">
		<div class="maintitle_text " style="margin-bottom:40px;">
			Podstawowe informacje <p style="font-size:10px;">[Uzupełnij tabelki według opisów]</p>
		</div>
		<div class="content clearfix first">
			<div class="grid col-4">
				Imię<input type="text" name="firstname" required maxlength="24">
				Nazwisko<input type="text" name="surname" required maxlength="24">
				Rok urodzenia<input type="number" min="1900" max="2000" name="age" required>
				<input type="hidden" name="sex" value="1" />
				Płeć<br>
				<a href="#" class="sex men active"><div></div></a>
				<a href="#" class="sex girl"><div></div></a>
			</div>
<div class="content" style=" overflow-y: scroll; height:500px;">
			<input type="hidden" name="skin" value="0" />
			<div class="skins men active">
				<foreach loop="$men_skins as $index=>$value">
					<img src="{style_images_url}/skins/{$value}.png" data-id="{$value}" />
				</foreach>
			</div>
			<div class="skins girl">
				<foreach loop="$girl_skins as $index=>$value">
					<img src="{style_images_url}/skins/{$value}.png" data-id="{$value}" />
				</foreach>
			</div>
		</div>
			<div class="grid col-4-1" style="margin-top:40px;">
				<div class="maintitle_text ">
			Charakterystyka postaci [nieobowiazkowe]<p style="font-size:10px;">[W tej tabelce wpisz opis Twojej postaci, np. ile ma wzrostu, wagi, kolor oczu]</p>
		</div>
				<textarea name="desc" style="    margin: 8px 296.297px 15px 139.281px;
    width: 790px;
    height: 270px;"></textarea>
			</div>
		</div>

		<input type="submit" name="newchar" value="Kliknij tutaj aby utworzyć postać"/>
	</div>
</form>

<script>
jQuery(".second .image").click( function () {
	var id = jQuery(this).hasClass("sc") ? 2 : 1;
	jQuery(".second .image.active").removeClass("active");
	jQuery(this).addClass("active");
	jQuery("input[name=spawn]").val(id);
});
jQuery(".skins > img").click( function () {
	var id = jQuery(this).attr("data-id");
	if( jQuery("input[name=skin]").val() != id) {
		jQuery("input[name=skin]").val(id);
		jQuery(".skins > img").fadeTo("fast", 0.33);
		jQuery(this).fadeTo("fast", 1);
	} else {
		jQuery("input[name=skin]").val('0');
		jQuery(".skins > img").fadeTo("fast", 1);
	}
});

jQuery("a.sex").on("click", function(e) {
	var id = jQuery(this).hasClass("men") ? 1 : 0;
	jQuery("input[name=sex]").val(id);
	jQuery("a.sex.active").removeClass("active");
	jQuery(this).addClass("active");
	if(id && !jQuery(".skins.active").hasClass("men")) {
		jQuery(".skins.active").fadeOut(function() {
			jQuery(this).removeClass("active");
			jQuery("input[name=skin]").val('0');
			jQuery(".skins > img").fadeTo("fast", 1);
			jQuery(".skins.men").fadeIn(function() {
				jQuery(this).addClass("active");
			});
		});
	}
	else if(!id && jQuery(".skins.active").hasClass("men")) {
		jQuery(".skins.active").fadeOut(function() {
			jQuery(this).removeClass("active");
			jQuery("input[name=skin]").val('0');
			jQuery(".skins > img").fadeTo("fast", 1);
			jQuery(".skins.girl").fadeIn(function() {
				jQuery(this).addClass("active");
			});
		});
	}
	e.preventDefault();
});
</script>