* {padding:0; margin:0}
html, body {height:100%}
ul {margin:0}
ul li
{
	list-style:none;
	padding:0;
	background:none
}

body
{
	background-color:#dcfca9;
	font:12px Tahoma, Arial, Helvetica, sans-serif
}
#Container
{
	background:url(../../../images/pet/start/bg.jpg) #29d4ff 50% -30px no-repeat;
	width:1000px;
	min-height:100%;
	position:relative;
	margin:0 auto;
	border-left:#82622a solid 3px;
	border-right:#82622a solid 3px;
	overflow:hidden;
}
#petsListFlash
{
	width:1000px;
    margin-top: 30px;
	padding-top:0px;
	position:relative;
	z-index:1
}
#petsList
{
	width:960px;
    padding-left:0px;
	overflow:hidden;
	padding-top:109px
}
#petsList li
{
	position:relative;
	list-style:none;
	float:left;
	width:160px
}
#petsList a
{
	background:url(../../../images/pet/start/pets.png) 0 0 no-repeat;
	width:170px;
	height:175px;
	display:block;
	position:relative
}
#petsList #petRaccoon a
{
	background-position:0 0;
	left:30px
}
#petsList #petRaccoon a:hover, #petsList #petRaccoon a.active {background-position:0 -175px}
#petsList #petDog a
{
	background-position:-170px 0;
	left:30px
}
#petsList #petDog a:hover, #petsList #petDog a.active {background-position:-170px -175px}
#petsList #petKitty a
{
	background-position:-340px 0;
	left:20px
}
#petsList #petKitty a:hover, #petsList #petKitty a.active {background-position:-340px -175px}
#petsList #petRabbit a
{
	background-position:-510px 0;
	left:25px
}
#petsList #petRabbit a:hover, #petsList #petRabbit a.active {background-position:-510px -175px}
#petsList #petCat a {background-position:-680px 0}
#petsList #petCat a:hover, #petsList #petCat a.active {background-position:-680px -175px}
#petsList #petPanda a {background-position:-850px 0}
#petsList #petPanda a:hover, #petsList #petPanda a.active {background-position:-850px -175px}

#petsList .msg-balloon
{
	bottom:170px;
	left:120px;
	width:200px;
}
#petsList #petDog .msg-balloon, #petsList #petKitty .msg-balloon {bottom:150px}
#petsList #petRabbit .msg-balloon {bottom:135px}
#petsList #petCat .msg-balloon {left:90px}
#petsList #petPanda .msg-balloon
{
	left:-50px;
	bottom:180px;
}

#Container h1
{
	font-size:31px;
	font-weight:normal;
	width:500px;
	position:absolute;
	top:160px;
	left:270px;
	color:#3d6203
}
#Container h1 small {font-size:19px}
.info
{
	position:absolute;
	top:15px;
	left:15px;
	padding:15px;
	width:600px;
	color:#3d6203;
	line-height:22px;
	font-size:17px;
}
.info .bg
{
	background-color:#fff;
	opacity:.75;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}
.info div {position:relative}
.info .user
{
	float:left;
	width:107px;
}
.info .user img
{
	display:block;
	width:97px;
	height:97px;
	margin:0 0 2px;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
}
.info .userName
{
	display:block;
	width:97px;
	text-align:center;
	font-size:13px;
	font-weight:bold
}
h2, h3
{
	font-size:21px;
	font-weight:normal;
	margin-bottom:.5em
}
h2 {margin-left:-2px}
h3
{
	font-size:17px;
	font-weight:normal;
}
.jsLink
{	
	border-bottom:1px dotted #332d59;	
	font-size:11px;
	text-decoration:none;
	color:#332d59;
	cursor:pointer
}
.jsLink:hover {color:#d61b51; border-color:#d61b51}

.petstepDialog
{
	padding-top:160px;
	margin-left:420px;
	width:500px;
}
#petImageContainer
{
	width:200px;
	position:absolute;
	top:200px;
	left:200px;
	z-index: 2;
}

#petImageContainer.hidden {
	display: none;
}

#petImageContainer .changeLink {
	margin: 10px 0 0;
	text-align: center;
}

#petImageContainer .changeLink.hidden {
	display: none;
}

#petImageContainer .changeLink a, #petImageContainer .changeLink a:hover {
	color: #4C4C4C;
	text-decoration: none;
	display: -moz-inline-box;
	display: inline-block;
	overflow: hidden;
	font-weight: bold;
	//zoom: 1;
	//display: inline;
	//position: relative;
}

#petImageContainer .changeLink a .l {
	display: block;
	float: left;
	width: 15px;
	height: 20px;
	background: url(../img/button_change_pet.png);
}

#petImageContainer .changeLink a .r {
	display: block;
	float: right;
	width: 10px;
	height: 20px;
	background: url(../img/button_change_pet.png) -15px 0;
	//position: absolute;
	//right: 0;
	//top: 0;
}

#petImageContainer .changeLink a .c {
	display: block;
	line-height: 20px;
	background: #fff !important;
	margin: 0 10px 0 15px;
	padding: 0 5px;
}

.petstepDialog #petImage
{
	margin-top:100px;
	margin-left:50px;
	float:left;
}
.petstepDialog form
{
	padding-left:150px;
}
.petstepDialog .textField
{
	font:17px Tahoma, Geneva, sans-serif;
	border:#999999 solid 2px;
	padding:4px;
	margin-bottom:5px;
	width:270px;
	*margin-left:10px;
}
.radio {padding-top:10px}
#Container label {font-weight:bold}
#Container label input
{
	font-size:12px;
	margin-right:4px;
	margin-top:-2px;
	vertical-align:middle
}

.h, #petsList .text {display:none}
/* balloons */
.msg-balloon
{
	position:absolute;
	z-index:3000;
	max-width:600px;
	zoom:1
}
.viewport-bottom {margin-top:-20px}
.msg-balloon .block, .msg-balloon .block .wrap
{
	position:relative;
	background-color:#fff
}
.msg-balloon .block .wrap
{
	padding:10px 20px;
	margin:0 -10px;
	border:#e80000 solid 2px;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	*zoom:1
}
* html .msg-balloon {width:180px}
.msg-balloon p
{
	line-height:1.2em;
	margin:0
}

.msg-balloon .source
{
	position:absolute;
	background:url(../../../images/basic/source.png) 0 0 no-repeat;
	width:32px;
	height:23px;
	top:-23px;
	left:18px
}
.viewport-bottom .source
{
	height:46px;
	clip:rect(23px 46px 46px 0px);
	top:auto;
	margin-top:-15px
}
.msg-balloon .color_grey, .msg-balloon .color_grey .wrap {border-color:#717171}
/* .msg-balloon .color_grey .ctl
{
	width:90px;
	left:-90px;
	clip:rect(0px 90px 10px 80px)
}
.msg-balloon .color_grey .ctr
{
	width:100px;
	left:-90px;
	clip:rect(0px 100px 10px 90px)
}
.msg-balloon .color_grey .cbl
{
	width:90px;
	left:-90px;
	clip:rect(10px 90px 20px 80px)
}
.msg-balloon .color_grey .cbr
{
	width:100px;
	left:-90px;
	clip:rect(10px 100px 20px 90px)
} */
.msg-balloon .color_green, .msg-balloon .color_green .wrap {border-color:#247e07}
.msg-balloon .color_green .ctl
{
	width:30px;
	left:-30px;
	clip:rect(0px 30px 10px 20px)
}
.msg-balloon .color_green .ctr
{
	width:40px;
	left:-30px;
	clip:rect(0px 40px 10px 30px)
}
.msg-balloon .color_green .cbl
{
	width:30px;
	left:-30px;
	clip:rect(10px 30px 20px 20px)
}
.msg-balloon .color_green .cbr
{
	width:40px;
	left:-30px;
	clip:rect(10px 40px 20px 30px)
}
.msg-balloon .color_green .source
{
	width:64px;
	left:-14px;
	clip:rect(0px 64px 23px 32px)
}
.viewport-bottom .color_green .source {clip:rect(23px 64px 46px 32px)}
.sourceRight .block .wrap, .sourceLeft .block .wrap {min-height:23px; overflow: hidden}
.sourceRight .source, .sourceLeft .source
{
	background:url(../../../images/basic/source1.png) 0 0 no-repeat;
	width:46px;
	height:32px;
	top:10px;
	left:-15px;
	margin-left:100%;
	clip:rect(0px 46px 32px 23px)
}
.sourceLeft .source
{
	width:23px;
	top:85px;
	left:-31px;
	margin:0;
	clip:rect(0px 46px 32px 0px)
}
#petsList #petPanda .msg-balloon .source {left:130px}
#fslogo {
	background:url(../../../images/pet/start/quest/fslogo.png) 0 0 no-repeat;
	width:215px;
	height:150px;
	position:relative;
	top:445px;
	left:15px;
	margin-bottom:-150px;
}
#fsad {
	background:url(../img/ru_bbck.png) 0 0 no-repeat;
	width:773px;
	height:232px;
	position:relative;
	float:right;
}
.en #fsad {background-image:url(../img/en_bbck.png)}

#choosePetClass {height:auto}
#fants {
	position:relative;
	width:200px;
	height:200px;
	left:179px;
	top:92px;
	margin-bottom:-200px;
	color:#3d6203;
	font-size:14px;
}
#fsad #flash {
	position:relative;
	left:437px;
	top:46px;
	width:336px;
	height:150px;
	margin-bottom:-150px;
}
.noflash {
	margin-top:150px;
	padding:50px;
	text-align:center;
	font-size:15px;
	background:#fff;
}
.petstepDialog .msg-balloon {
	position:relative;
	left:0px;
	top:0px;
	width:330px;
}
.continueButton {
	margin-top:11px;
}
.fieldButtom
{
	font-size:24px;
	padding:5px 10px 5px 10px;
	background:#d81b52;
	color:#fff;
	border-left:2px solid #ffa8c1;
	border-top:2px solid #ffa8c1;
	border-right:2px solid #b00134;
	border-bottom:2px solid #b00134;
	cursor:pointer;
	left:0px;
}

.step {
	position:relative;
	height:600px
}

.confirmLinks {
	margin: 20px 0 0;
	text-align: center;
	font-size: 20px;
}

.confirmLinks a {
	text-decoration: none;
	border-bottom: #363D40 1px dotted;
}

.confirmLinks a.left {
	margin-right: 20px;
}
#buttons{
    position: relative;
    top: 165px;
    margin-left: 170px;
}
#mailruLogin{
    position: relative;
    margin: 1px 0 0 129px;
}
#vkLogin{
    position: relative;
    float:left;
}

.night #Container
{
	background:url(../pets/img/bg_night.jpg) #005529 50% 0 no-repeat;
}
.night .info {
	color:#fff
}
.night .info .bg {
	background-color:#005529;
	opacity:.75;
}
.night #Container h1 {color:#fff}
.night #petsListFlash{padding-top:190px}
.night #fsad, .night #fslogo {display:none}
.night .petstepDialog {padding-top:250px}
.night #petImageContainer {top:230px}
.night .footer,.night .footer a{color:#fff;}


.sweet #Container
{
	background:url(../pets/img/bg_sweet.jpg) #ffd050 50% 0 no-repeat;
}
.sweet .info {
	color:#ea0600
}
.sweet .info .bg {
	background-color:#fff;
	opacity:.75;
}
.sweet #Container h1 {color:#000;background:rgba(255,255,255,0.7);padding:4px 20px; border-radius:15px;-moz-border-radius:15px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff,endColorstr=#99ffffff)}
.sweet #petsListFlash{padding-top:190px}
.sweet #fsad, .sweet #fslogo {display:none}
.sweet .petstepDialog {padding-top:250px}
.sweet #petImageContainer {top:230px}

.village #Container
{
	background:url(../pets/img/bg_village.jpg) #43d802 50% 0 no-repeat;
}
.village .info {
	color:#fff
}
.village .info .bg {
	background-color:#43d802;
	opacity:.75;
}
.village #Container h1 {color:#000;background:rgba(255,255,255,0.7);padding:4px 20px; border-radius:15px;-moz-border-radius:15px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff,endColorstr=#99ffffff)}
.village #petsListFlash{padding-top:190px}
.village #fsad, .village #fslogo {display:none}
.village .petstepDialog {padding-top:250px}
.village #petImageContainer {top:230px}

.affImg{float:left;margin:5px}
.info.aff{padding:5px}
body.userPet{padding-top:29px}

body.questpet-8 #Container { background-position: 50% 39px; }
body.questpet-8 #choose-pet-wrapper { padding-top: 41px; }
body.questpet-8 #footer, body.questpet-11 #footer, body.questpet-12 #footer { display: block; }
body.questpet-8 .footer, body.questpet-11 .footer,  body.questpet-12 .footer { clear: both; padding-bottom: 15px; position: relative; text-align: center; margin-top: -43px; }
body.questpet-8 #fsad { padding-bottom: 15px; }
body.questpet-12 #petsListFlash, body.questpet-11 #petsListFlash { padding-bottom: 108px; }
.petstepDialogPoint{
    background:url(/images/pet/pitomec/tooltipPointer.png) no-repeat;
    width:31px;
    height:32px;
    float:left;
    position:relative;
    z-index:2;
    left: 2px;
    top:80px;;
}
.petstepDialogTooltip{
    background: #d9d9d9;
    background: rgba(0, 0, 0, 0.2);
    padding:2px;
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
    border-radius: 17px;
    float:left;

}
.petstepDialogCont{
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    padding: 15px 20px 10px 30px;
    background:#fff;
    float:left;
}
.petstepDialogCont dt{
    float:left;
    width:315px;
    padding:15px 10px 0 7px;
    line-height:19px;
}
.petstepDialogCont dd{
    float:left;
    background:url(/images/pet/pitomec/petMail.jpg) no-repeat;
    width:404px;
    height:175px;
    margin-right:-10px;
}
#emailConfirm{
    font:15px "Trebuchet Ms", Arial;
    color:#363636;
}
#emailConfirm h3{
    font-size:17px;
    color:#363636;
    font-weight:bold;
    display: block;
}
#emailConfirm .otherEmail{
    color:#7f7f7f;
    text-decoration:underline;
    font-size:13px;
    white-space: nowrap;
    line-height:25px;
    cursor: pointer;
}
#emailConfirm .btn-orange{
    font-size:15px;
    margin:0 10px 5px 0;
}