@font-face {
font-family:"websaz";
src: url( "../font/websaz.eot" );
src: local( "?" ),
url( "../font/websaz.woff" )
format( "woff" ),
url( "../font/websaz.ttf" )
format( "truetype" );
}

body {
    background:#59b6ce url('../image/img/bg1.jpg');
    font-family:websaz, Tahoma;
    font-size:13pt;
    direction:rtl;
    
    
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    background-color: #C5DAB9;
}

a {text-decoration:none;}

#wrap {
    margin:50px auto;
    width:905px;
    background:#fff;
    border:8px rgba(0,0,0,.1) solid;
    padding:20px;
}
#header {
    height:90px;
    background:url('../image/img/logo.png') 95% center no-repeat;
    position:relative;
}
#header .hlink {
    position:absolute;
    right:0;
    width:250px;
    height:100%;
    display:block;
}
#header #support {
    background:url('../image/img/support-online.png') 0 0 no-repeat;
    width:216px;
    height:54px;
    float:left;
    margin:15px;
    cursor:pointer;
}
.tbtn .btn {
    float:left;
    background:#f2f2f2;
    height:67px;
    width:180px;
    position:relative;
    margin-right:10px;
}
.tbtn .btn:hover {
    background:#e2e2e2;
}
.btn .support {
    background:url('../image/img/icons.png') right center no-repeat;
    width:225px;
    height:85px;
    position:absolute;
    top:-10px;
    right:-40px;
}
.btn .contactus {
    background:url('../image/img/icons.png') -114px center no-repeat;
    width:73px;
    height:80px;
    position:absolute;
    top:-5px;
    left:12px;
}
.btn .refund {
    background:url('../image/img/icons.png') left 0px no-repeat;
    width:74px;
    height:67px;
    position:absolute;
    top:-5px;
    left:20px;
}
.form label {
    padding:6px 15px 6px 6px;
    display:inline-block;
    width:180px;
    border-right:2px #eee solid;
    margin-right:10px;
    line-height:25px;
}
.form input,.form select {
    background:#eee;
    border:0;
    padding:7px;
    font-family:Tahoma;
    font-size:9pt;
    min-width:170px;
}
.form button {
    margin-right:215px;
    font-family:Tahoma;
    font-size:9pt;
    padding:10px 20px;
}
.form textarea {
    background:#eee;
    border:0;    
    padding:7px;
    font-family:Tahoma;
    font-size:9pt;
    width:570px;
}
.levels .level {
    float:right;
    width:200px;
    margin:20px 20px 20px 0;
    border-right: 1px #b7b7b7 dashed;
    text-align:right;
    padding:0 20px;
}
li.footerlink 			{
	padding:0px 5px;
	color: #13c3d3;
	text-decoration: none;
	-webkit-transition-duration: 0.5s; 
	-moz-transition-duration: 0.5s;  
	transition-duration: 0.5s;
	}
li:hover.footerlink 	{
	background-color: #13c3d3;
	color:#000;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-right: 45px;
	background-position:95% -15px;
	}

.selection {
    list-style:none;
    margin:0;
    padding:0;
	border-radius:5px;

}
.selection li {
    padding:0px 35px 0px 6px;
    background:url('../image/img/selection1.png') 95% 15px no-repeat;
    cursor:pointer;
    margin-bottom:8px;
	padding-top: 8px;
	padding-bottom: 8px;
	border-radius:5px;
}
.selection li.active {
    background-position:95% -45px;
	background-color: #13c3d3;
	color:#ffffff;	
}
.selection .disabled {
    color:#bbb;
    cursor:default;
}
.levels .level > p {
    color:#aaa;
}
.levels .level .title {
    background:url('../image/img/levels.png') 0 0 no-repeat;
    height:30px;
}
.levels .level .level1 {
    background-position:right 5px;
}
.levels .level .level2 {
    background-position:right -36px;
}
.levels .level .level3 {
    background-position:right -73px;
}
.fields input,.fields select {
    width:90%;
    background:#eee;
    border:0;
    padding:8px;
    font-family:Tahoma;
    font-size:8pt;
    margin:0;
}
.fields select {
    width:auto;
}
.fields label {
    display:block;
    padding:6px;
    font-weight:600;
    line-height:23px;
}
.submit {
    margin-top:20px;
    width:154px;
    height:45px;
    background:url('../image/img/submit.png') 0 0 no-repeat;
    border:0;
    cursor:pointer;
}
.box-n {
    padding:10px;
    margin:10px 0;
    width:90%;
    background:#e7ff93;
    float:right;
    font-weight:600;
}
.footer {
    padding:10px 40px 20px 40px;
    color:#555;
    text-align:right;
}
.wait {
    padding:10px 40px;
    margin:0 40px;
    background:#fdffd1;
    font-weight:600;
    display:none;
}
.error {
    padding:10px 40px;
    margin:0 40px;
    background:#fb0808;
    display:none; 
    border-radius: 10px 10px 10px 10px;   
}
.error:hover {
    border-radius: 20px 0 20px 0;
    color: #fff;
}

h2 {
    font-weight:600;
    font-size:16px;
}
.submit:hover{
    background:url('../image/img/submit.png') 0 -45px no-repeat;    
}
.clearfix {
    clear:both;
}
.dl{
	margin-right:-5px;
}

.set {
	width:164px;
	height:144px;
	background:#ffc600;
	float:left;
	margin-left:45px;
	margin-top:19px;
	border-radius:5px;
}
#setb {
	background:url(../image/img/sett.png) no-repeat scroll 160px 3px #676767;
	display:block;
	font-family:yekan,tahoma;
	text-shadow:10px 1px 15px #000;
}
.set span {
	height:37px;
	color:#ccc;
	padding:16px 90px 0 0;
	border-radius:5px 5px 0px 0px;
}
.setp{
	direction:ltr;
	margin:6px 1px 1px 13px;
	font-family:verdana,tahoma;
	line-height:20px;
}
.current-date {
	float: left;
	padding-top: 6px;
	text-align: center;
	font-size: 10px;
	color: #666;
}
.date-box {
	float: left;
	vertical-align: top;
	padding: 20px 0 0 15px;/*background: url(../images/date_time.jpg) 25% 100% no-repeat;*/
}




@@
#content {
 background: #eee url(../image/content.gif) repeat-y;
 padding: 1px 20px 20px;
}
#content .right-div {
 float: right;
 height: auto;
 position: relative;
 padding: 10px;
 width: 45%;
}
#content .left-div {
 float: left;
 height: auto;
 padding: 10px;
 width: 49%;
}
#content h2 {
    border-bottom: 1px dotted #CCCCCC;
    font-size: 18px;
    margin: 0 10px 10px;
    padding: 0 18px 7px 0;
    text-shadow: 2px 2px 1px #CCCCCC;
}
#content .box {
 padding: 10px 5px;
 border: 1px solid #C3C3C3;
}
#content .marg {
 margin: 15px 0;
}
#content ul {
 list-style-type: none;
}
#content .form {
 font-family: websaz;
 font-size: 14px;
 padding: 1px;
 border: 1px solid #C3C3C3;
}
#content label.left {
    float: right;
    margin: 0 0 0 5px;
    padding: 2px;
    width: 78px;
}
#content table{
 background: #F4F2F2;
 border-collapse: collapse;
 border-spacing: 0;
}
#content tr {
 border: 4px solid #FFFFFF;
}
#content td {
 padding: 1px 3px;
}
#content .banks {
    list-style: none outside none;
    margin: 1px;
    padding: 0 15px;
    width: 320px;
}
#content .banks li {
    float: right;
    margin: 3px;
    padding: 1px;
    height: 29px;
    width: 29px;
    border: 1px solid #C3C3C3;
    background-image: url("../image/banks.png");
}
#content .banks li:hover {
	border: 1px solid #000;
}
#content .info {
	padding: 10px 5px;
}


.cards {
 margin-left:auto;
 margin-right:auto;
 width: 80%;
}

.cards td.top {
 background: #CCCCCC;
 text-align: center;
 font-size: 18px;
 font-weight: bold;
}
.cards td {
 background: #EDEAEA;
 font-size: 16px;
}

.roll {display: inline-block; overflow: hidden;  vertical-align: top;    -webkit-perspective: 300px; -moz-perspective: 300px;  -ms-perspective: 300px;  perspective: 300px;    -webkit-perspective-origin: 50% 50%;  -moz-perspective-origin: 50% 50%;  -ms-perspective-origin: 50% 50%;  perspective-origin: 50% 50%;}
.roll:hover {background: none; text-shadow: none;}
.roll span {display: block; position: relative; padding: 0 2px;  pointer-events: none;    -webkit-transition: all 600ms ease; -moz-transition: all 400ms ease;        -ms-transition: all 400ms ease;      transition: all 400ms ease;    -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%;  -ms-transform-origin: 50% 0%;    transform-origin: 50% 0%;    -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;  -ms-transform-style: preserve-3d;  transform-style: preserve-3d;}
.roll:hover span {background: #D5D5F0;color:aqua;    -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );        -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );  transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );}
.roll span:after {content: attr(data-title);display: block;    position: absolute;    left: 0;    top: 0;    padding: 0 2px;    white-space: nowrap;    color: white;    background: #333399;     -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%;  transform-origin: 50% 0%;    -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );  -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );        -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );}