@import url(http://fonts.googleapis.com/css?family=Roboto);
@import url(http://fonts.googleapis.com/css?family=Cabin+Condensed);
body {
	background: #FFF url('../img/bg.png'); font-family: 'Roboto', sans-serif;	
}
.bold{
  font-weight: 700;
  color: red;
}
.div-cat{
  position:relative;border:1px solid #ddd;float:left;height:200px;width:30%;margin:10px 5px;
  cursor:pointer;
}
.div-cat .div-img{
  position:relative;float:right;overflow: hidden;height:80%;border-bottom:1px solid #ccc;
}
.div-cat .div-img img{
    float:right;width:100%;
}
.div-cat .lbl_count{
  background-color:#eee;position:absolute;bottom:0;left:0;border:1px solid #aaa;padding:1px
}
.div-cat .lbl_title{
  width:100%;text-align:center;padding:5px;float:right
}
.div-cat .div-action{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(200,200,200,.9);
  text-align: center;
  display: none;
  
}
.div-cat .div-action .btn{
    margin-top: 10px;
   padding:10px 25px;
   width:60px;;
}
#parent-product{
  margin:0;border:0px solid;padding:5px;float:right;width:99%;
  display: none;
}
#ziwrap {width:800px; min-height:565px; margin:10px auto; background-color:#F2F3F4; padding:25px; border-bottom:#E52B50 solid 10px; overflow:hidden;}
#zititle {background-color:#E52B50; color:#fff; margin-left:-25px; margin-top:-25px; padding:25px; width:800px; font-size:25px;}
#zititle span {font-size:15px; float:right; margin-top:10px;}
#content {width:800px; min-height:400px; margin:0px auto; margin-top:25px;}
#left {width:300px; height:500px; background-color:#e6e6e6; float:left;}
#right {width:495px; min-height:500px; background-color:#FFF; float:right; margin-right:5px;}
#zistep1,#zistep2,#zistep3,#zistep4,#zistep5,#zistep6,#zistep7 {margin-left:-290px; opacity:0; position:absolute; margin-top:25px; font-family: font-family: 'Cabin Condensed', sans-serif; text-align:center; width:275px; transition: all .7s ease-in-out;}
#zistep1 span,#zistep2 span,#zistep3 span,#zistep4 span,#zistep5 span,#zistep6 span,#zistep7 span{display:block; width:100px; height:100px; background-color:#E52B50;; border:10px solid #f6f6f6; margin:0px auto; border-radius:50%; box-shadow:0px 0px 20px #333; color:#FFF; font-weight:bold; line-height:95px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
#zistep2 li,#zistep3 li,#zistep4 li {text-align:left; font-size:12px; line-height:20px;}
#slides {
    padding: 0;
    width: 495px;
    height: 400px;
    display: block;
    margin: 0 auto;
    position: relative;
}
#slides input { display: none; }
#slides #zinstall input {display:block;}
#slide-container { display: block; }
#slide {
    top: 0;
    opacity: 0;
  	visibility:hidden;
    width: 495px;
    height: 400px;
    display: block;
    overflow: auto;
    position: absolute;
    transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -webkit-transition: all .7s ease-in-out;
}
#nav label {    
    display: none;
    position: absolute;   
    z-index: 9;
    cursor: pointer;
    transition: opacity .2s;
    -moz-transition: opacity .2s;
    -webkit-transition: opacity .2s;
    color: #E52B50;
    font-size:65px;
    text-align: center;
    line-height: 380px;
  	margin-top:250px;
  	margin-left:-300px;
}
#nav #next { right: 0; }
#slides input:checked + #slide-container  #slide {
    opacity: 1;
  	visibility:visible;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
#slides input:checked + #slide-container #nav label { display: block; }
#slides input:checked + #slide-container #nav #next span{font-size:30px; margin-top:0px; position:absolute; margin-left:-250px; display:block;}
#slides #zinavig-1:checked + #slide-container #zistep1 {opacity:1}
#slides #zinavig-2:checked + #slide-container #zistep2 {opacity:1}
#slides #zinavig-3:checked + #slide-container #zistep3 {opacity:1}
#slides #zinavig-4:checked + #slide-container #zistep4 {opacity:1}
#slides #zinavig-5:checked + #slide-container #zistep5 {opacity:1}
#finalinfo {width:90%; height:350px; margin:0px auto; text-align:left;}
#finalinfo #warning {display:block; padding:5px; width:70%; height:20px; background-color:#F00; color:#FFF;}
#finalinfo a {text-decoration:none; color:#E52B50;}
/* ---------- zinstall forms ---------- */
.clearfix { *zoom: 1; } /* For IE 6/7 */
.clearfix:before, .clearfix:after {
	display: table;
	content: "";
}
.clearfix:after { clear: both; }
#zinstall {
	width: 100%; margin-top:25px; margin-left:10px; float:right;
  direction: rtl;
}
#zinstall input ,#zinstall select {
	border: none;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5em;
	padding: 0;
	-webkit-appearance: none;
}
#zinstall fieldset {
	border:none;
}
#zinstall form span {
	background-color: #E52B50;
	border-radius: 0px 3px 3px 0px;
	-moz-border-radius: 3px 0px 0px 3px;
	-webkit-border-radius: 3px 0px 0px 3px;
	color: #FFFFFF;
	display: block;
	float: right;
	height: 50px;
	line-height: 50px;
	text-align: center;
	width: 50px;
	font-size:15px;
}
#zinstall form input ,#zinstall form select {
	height: 50px;
}
#zinstall form input[type="text"], input[type="password"],input[type="file"]  {
	background-color: #e6e6e6;
	border-radius: 3px 0px 0px 3px;
	-moz-border-radius: 0px 3px 3px 0px;
	-webkit-border-radius: 0px 3px 3px 0px;
	color: #606468;
	margin-bottom: 1em;
	padding: 0 10px;
	width: 80.5%;
  
}
#zinstall form select{
  background-color: #e6e6e6;
  border-radius: 3px 0px 0px 3px;
  -moz-border-radius: 0px 3px 3px 0px;
  -webkit-border-radius: 0px 3px 3px 0px;
  color: #606468;
  margin-bottom: 1em;
  padding: 0 10px;
  width: 84.5%;
}
#zinstall form select option{
  width: 100%;
  height: 50px;
  font-size: 20px;
}
#zinstall form input[type="submit"] {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background-color: #E52B50;
	color: #eee;
	font-weight: bold;
	margin-bottom: 2em;
	text-transform: uppercase;
	width: 100%;
}
.myButton {
  -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
  background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
  background-color:#f9f9f9;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  border:1px solid #dcdcdc;
  display:inline-block;
  cursor:pointer;
  color:#666666;
  font-family:Arial;
  font-size:15px;
  font-weight:bold;
  padding:6px 24px;
  text-decoration:none;
  text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
  background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
  background-color:#e9e9e9;
}
.myButton:active {
  position:relative;
  top:1px;
}
#zinstall form input[type="submit"]:hover {
	background-color: #999;
}
#zinstall form textarea {
	background-color: #e6e6e6;
	border-radius: 0px 3px 3px 0px;
	-moz-border-radius: 0px 3px 3px 0px;
	-webkit-border-radius: 0px 3px 3px 0px;
	color: #606468;
	margin-bottom: 1em;
	padding: 10px;
	width: 78.5%;
	border: none;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5em;	
	-webkit-appearance: none;
	height:100px;
}
#zinstall > p {
	text-align: center;
}
#zinstall > p span {
	padding-left: 5px;
}
/****** MESSAGES ****/
#message-info {
  display: block;
  visibility: hidden;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 0;
  margin-bottom: -8px;   
  padding: 4px 16px;  
  color: #E52B50;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
}
:focus + #message-info {
  margin-bottom: 0;
  height: auto;
  visibility: visible;
  -webkit-animation: zianimation ease-in 500ms;
  -moz-animation: zianimation ease-in 500ms;
  -o-animation: zianimation ease-in 500ms;
  animation: zianimation ease-in 500ms;
}
  ol.progtrckr {
    margin: 0;
    padding: 0;
    list-style-type none;
    direction: rtl;
}
ol.progtrckr li {
    display: inline-block;
    text-align: center;
    line-height: 3em;
}
ol.progtrckr[data-progtrckr-steps="2"] li { width: 49%; }
ol.progtrckr[data-progtrckr-steps="3"] li { width: 33%; }
ol.progtrckr[data-progtrckr-steps="4"] li { width: 24%; }
ol.progtrckr[data-progtrckr-steps="5"] li { width: 19%; }
ol.progtrckr[data-progtrckr-steps="6"] li { width: 16%; }
ol.progtrckr[data-progtrckr-steps="7"] li { width: 14%; }
ol.progtrckr[data-progtrckr-steps="8"] li { width: 12%; }
ol.progtrckr[data-progtrckr-steps="9"] li { width: 11%; }
ol.progtrckr li.progtrckr-done {
    color: black;
    border-bottom: 4px solid yellowgreen;
}
ol.progtrckr li.progtrckr-todo {
    
    border-bottom: 4px solid silver;
}
ol.progtrckr li:after {
    content: "\00a0\00a0";
}
ol.progtrckr li:before {
    position: relative;
    bottom: -2.5em;
    float: left;
    left: 50%;
    line-height: 1em;
}
ol.progtrckr li.progtrckr-done:before {
    content: "\2713";
    color: white;
    background-color: yellowgreen;
    height: 1.2em;
    width: 1.2em;
    line-height: 1.2em;
    border: none;
    border-radius: 1.2em;
}
ol.progtrckr li.progtrckr-todo:before {
    content: "\039F";
    color: silver;
    background-color: white;
    font-size: 1.5em;
    bottom: -1.6em;
}
@-webkit-keyframes zianimation {
  0% {
    margin-bottom: -8px;
    visibility: visible;
    line-height: 0;
    -webkit-transmessage-origin: 0 0 0;
    -moz-transmessage-origin: 0 0 0;
    -ms-transmessage-origin: 0 0 0;
    -o-transmessage-origin: 0 0 0;
    transmessage-origin: 0 0 0;
    -webkit-transform: rotate3d(1, 0, 0, -90deg);
    -moz-transform: rotate3d(1, 0, 0, -90deg);
    -ms-transform: rotate3d(1, 0, 0, -90deg);
    -o-transform: rotate3d(1, 0, 0, -90deg);
    transform: rotate3d(1, 0, 0, -90deg);
  }
  33.333% {
    margin-bottom: 4px;
    line-height: 16px;
    -webkit-transform: rotate3d(1, 0, 0, 0deg);
    -moz-transform: rotate3d(1, 0, 0, 0deg);
    -ms-transform: rotate3d(1, 0, 0, 0deg);
    -o-transform: rotate3d(1, 0, 0, 0deg);
    transform: rotate3d(1, 0, 0, 0deg);
  }
  66.667% {
    margin-bottom: 2px;
    -webkit-transform: rotate3d(1, 0, 0, 25deg);
    -moz-transform: rotate3d(1, 0, 0, 25deg);
    -ms-transform: rotate3d(1, 0, 0, 25deg);
    -o-transform: rotate3d(1, 0, 0, 25deg);
    transform: rotate3d(1, 0, 0, 25deg);
  }
  100% {
    margin-bottom: 0;
    visibility: visible;
    height: auto;
    -webkit-transmessage-origin: 0 0 0;
    -moz-transmessage-origin: 0 0 0;
    -ms-transmessage-origin: 0 0 0;
    -o-transmessage-origin: 0 0 0;
    transmessage-origin: 0 0 0;
    -webkit-transform: rotate3d(1, 0, 0, 0deg);
    -moz-transform: rotate3d(1, 0, 0, 0deg);
    -ms-transform: rotate3d(1, 0, 0, 0deg);
    -o-transform: rotate3d(1, 0, 0, 0deg);
    transform: rotate3d(1, 0, 0, 0deg);
  }
}
@-moz-keyframes zianimation {
  0% {
    margin-bottom: -8px;
    visibility: visible;
    line-height: 0;
    -webkit-transmessage-origin: 0 0 0;
    -moz-transmessage-origin: 0 0 0;
    -ms-transmessage-origin: 0 0 0;
    -o-transmessage-origin: 0 0 0;
    transmessage-origin: 0 0 0;
    -webkit-transform: rotate3d(1, 0, 0, -90deg);
    -moz-transform: rotate3d(1, 0, 0, -90deg);
    -ms-transform: rotate3d(1, 0, 0, -90deg);
    -o-transform: rotate3d(1, 0, 0, -90deg);
    transform: rotate3d(1, 0, 0, -90deg);
  }
  33.333% {
    margin-bottom: 4px;
    line-height: 16px;
    -webkit-transform: rotate3d(1, 0, 0, 0deg);
    -moz-transform: rotate3d(1, 0, 0, 0deg);
    -ms-transform: rotate3d(1, 0, 0, 0deg);
    -o-transform: rotate3d(1, 0, 0, 0deg);
    transform: rotate3d(1, 0, 0, 0deg);
  }
  66.667% {
    margin-bottom: 2px;
    -webkit-transform: rotate3d(1, 0, 0, 25deg);
    -moz-transform: rotate3d(1, 0, 0, 25deg);
    -ms-transform: rotate3d(1, 0, 0, 25deg);
    -o-transform: rotate3d(1, 0, 0, 25deg);
    transform: rotate3d(1, 0, 0, 25deg);
  }
  100% {
    margin-bottom: 0;
    visibility: visible;
    height: auto;
    -webkit-transmessage-origin: 0 0 0;
    -moz-transmessage-origin: 0 0 0;
    -ms-transmessage-origin: 0 0 0;
    -o-transmessage-origin: 0 0 0;
    transmessage-origin: 0 0 0;
    -webkit-transform: rotate3d(1, 0, 0, 0deg);
    -moz-transform: rotate3d(1, 0, 0, 0deg);
    -ms-transform: rotate3d(1, 0, 0, 0deg);
    -o-transform: rotate3d(1, 0, 0, 0deg);
    transform: rotate3d(1, 0, 0, 0deg);
  }
}
@-o-keyframes zianimation {
  0% {
    margin-bottom: -8px;
    visibility: visible;
    line-height: 0;
    -webkit-transmessage-origin: 0 0 0;
    -moz-transmessage-origin: 0 0 0;
    -ms-transmessage-origin: 0 0 0;
    -o-transmessage-origin: 0 0 0;
    transmessage-origin: 0 0 0;
    -webkit-transform: rotate3d(1, 0, 0, -90deg);
    -moz-transform: rotate3d(1, 0, 0, -90deg);
    -ms-transform: rotate3d(1, 0, 0, -90deg);
    -o-transform: rotate3d(1, 0, 0, -90deg);
    transform: rotate3d(1, 0, 0, -90deg);
  }
  33.333% {
    margin-bottom: 4px;
    line-height: 16px;
    -webkit-transform: rotate3d(1, 0, 0, 0deg);
    -moz-transform: rotate3d(1, 0, 0, 0deg);
    -ms-transform: rotate3d(1, 0, 0, 0deg);
    -o-transform: rotate3d(1, 0, 0, 0deg);
    transform: rotate3d(1, 0, 0, 0deg);
  }
  66.667% {
    margin-bottom: 2px;
    -webkit-transform: rotate3d(1, 0, 0, 25deg);
    -moz-transform: rotate3d(1, 0, 0, 25deg);
    -ms-transform: rotate3d(1, 0, 0, 25deg);
    -o-transform: rotate3d(1, 0, 0, 25deg);
    transform: rotate3d(1, 0, 0, 25deg);
  }
  100% {
    margin-bottom: 0;
    visibility: visible;
    height: auto;
    -webkit-transmessage-origin: 0 0 0;
    -moz-transmessage-origin: 0 0 0;
    -ms-transmessage-origin: 0 0 0;
    -o-transmessage-origin: 0 0 0;
    transmessage-origin: 0 0 0;
    -webkit-transform: rotate3d(1, 0, 0, 0deg);
    -moz-transform: rotate3d(1, 0, 0, 0deg);
    -ms-transform: rotate3d(1, 0, 0, 0deg);
    -o-transform: rotate3d(1, 0, 0, 0deg);
    transform: rotate3d(1, 0, 0, 0deg);
  }
}
@keyframes zianimation {
  0% {
    margin-bottom: -8px;
    visibility: visible;
    line-height: 0;
    -webkit-transmessage-origin: 0 0 0;
    -moz-transmessage-origin: 0 0 0;
    -ms-transmessage-origin: 0 0 0;
    -o-transmessage-origin: 0 0 0;
    transmessage-origin: 0 0 0;
    -webkit-transform: rotate3d(1, 0, 0, -90deg);
    -moz-transform: rotate3d(1, 0, 0, -90deg);
    -ms-transform: rotate3d(1, 0, 0, -90deg);
    -o-transform: rotate3d(1, 0, 0, -90deg);
    transform: rotate3d(1, 0, 0, -90deg);
  }
  33.333% {
    margin-bottom: 4px;
    line-height: 16px;
    -webkit-transform: rotate3d(1, 0, 0, 0deg);
    -moz-transform: rotate3d(1, 0, 0, 0deg);
    -ms-transform: rotate3d(1, 0, 0, 0deg);
    -o-transform: rotate3d(1, 0, 0, 0deg);
    transform: rotate3d(1, 0, 0, 0deg);
  }
  66.667% {
    margin-bottom: 2px;
    -webkit-transform: rotate3d(1, 0, 0, 25deg);
    -moz-transform: rotate3d(1, 0, 0, 25deg);
    -ms-transform: rotate3d(1, 0, 0, 25deg);
    -o-transform: rotate3d(1, 0, 0, 25deg);
    transform: rotate3d(1, 0, 0, 25deg);
  }
  100% {
    margin-bottom: 0;
    visibility: visible;
    height: auto;
    -webkit-transmessage-origin: 0 0 0;
    -moz-transmessage-origin: 0 0 0;
    -ms-transmessage-origin: 0 0 0;
    -o-transmessage-origin: 0 0 0;
    transmessage-origin: 0 0 0;
    -webkit-transform: rotate3d(1, 0, 0, 0deg);
    -moz-transform: rotate3d(1, 0, 0, 0deg);
    -ms-transform: rotate3d(1, 0, 0, 0deg);
    -o-transform: rotate3d(1, 0, 0, 0deg);
    transform: rotate3d(1, 0, 0, 0deg);
  }
}
/* share URL: http://www.20script.ir */