UI DashBoard Layout Bootstrap and HTML5 POC
HTML Code-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-sca;e=1" charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="myCss/myCss.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45
}
},
series: [{
name: 'Delivered amount',
data: [
['Bananas', 15],
['Apples', 7],
['Pears', 14],
]
}]
});
});
</script>
<body>
<div class="container-fluid colored">
<div class="panel panel-default box-shadow--6dp img">
<div class="panel-heading header text-center">
<strong>Login</strong>
</div>
<div class="panel-body">
<div class="row equal">
<div class="col-md-1"></div>
<div class="col-md-5">
<div class="panel panel-default box-shadow--6dp">
<div class="panel-heading panel1 text-center">
<strong>Break vs Adjustment Pi</strong>
</div>
<div class="panel-body">
<div id="container" style="height: 400px"></div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="panel panel-default box-shadow--6dp">
<div class="panel-heading panel2 text-center">
<strong>Break vs Adjustment Histogram</strong>
</div>
<div class="panel-body">
<img src="myCss/Capture1.JPG"/>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
<div class="row equal">
<div class="col-md-1"></div>
<div class="col-md-5">
<div class="panel panel-default box-shadow--6dp">
<div class="panel-heading panel3 text-center">
<strong>3rd Panel</strong>
</div>
<div id="container" style="height: 400px"></div>
</div>
</div><!--/col-->
<div class="col-md-5">
<div class="panel panel-default box-shadow--6dp">
<div class="panel-heading panel4 text-center">
<strong>4th Panel </strong>
</div>
<div class="panel-body">
<img src="myCss/Capture1.JPG"/>
</div>
</div>
</div><!--/col-->
<div class="col-md-1"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS-
.img {
background: url(bck5.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*
*Jumbotron compoment
*/
.jumbotron {
position: relative;
background: #000 url("bck3.jpg") center center;
width: 100%;
height: 30%;
background-size: cover;
overflow: hidden;
}
.remove-padding {
padding: 0 auto;
margin: 0 auto;
}
.card-container .card{
max-width: 350px;
padding: 40px 40px;
}
.btn{
font-weight: 700;
height: 36px;
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
cursor: default;
}
/*
* Card component
*/
.card {
background-color: #F7F7F7;
/* just in case there no content*/
padding: 20px 25px 30px;
margin: 0 auto 25px;
margin-top: 50px;
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.profile-img-card {
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
/*
* Form styles
*/
.profile-name-card {
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 10px 0 0;
min-height: 1em;
}
/*
* Adjusting the size of the container in login page
*/
@media (min-width: 768px) {
.my-custom-container{
width:200px;
}}
@media (min-width: 992px) {
.my-custom-container{
width:320px;
}}
@media (min-width: 1200px) {
.my-custom-container{
width:400px;
}}
/*
* Arrival Form CSS Goes Here !!!!
*/
/*
* Adjusting the size of the container in Arival page
*/
@media (min-width: 768px) {
.my-custom-container-arrival{
width:900px;
}}
@media (min-width: 992px) {
my-custom-container-arrival{
width:1020px;
}}
@media (min-width: 1200px) {
my-custom-container-arrival{
width:1100px;
}}
.card-container-arrival .card-arrival{
max-width: 150px;
padding: 40px 40px;
}
.centered{
position: fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
.container-background{
background-color:aliceblue;
}
/*
* CSS FOR SHADOW ELEMENT
*/
.box-shadow--2dp {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
.box-shadow--3dp {
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12)
}
.box-shadow--4dp {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2)
}
.box-shadow--6dp {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .2)
}
.box-shadow--8dp {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2)
}
.box-shadow--16dp {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2)
}
/*
* SHADOW ELEMENTS ENDS HERE
*/
/*
* CSS FOR STAR ELEMENTS
*/
.stars {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars input[type="radio"].star-5:checked ~ span { width: 100%; }
.stars input[type="radio"].star-4:checked ~ span { width: 80%; }
.stars input[type="radio"].star-3:checked ~ span { width: 60%; }
.stars input[type="radio"].star-2:checked ~ span { width: 40%; }
.stars input[type="radio"].star-1:checked ~ span { width: 20%; }
.stars label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars label:hover ~ span { background-position: 0 -30px; }
.stars label.star-5:hover ~ span { width: 100% !important; }
.stars label.star-4:hover ~ span { width: 80% !important; }
.stars label.star-3:hover ~ span { width: 60% !important; }
.stars label.star-2:hover ~ span { width: 40% !important; }
.stars label.star-1:hover ~ span { width: 20% !important; }
.stars span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*------------------Star-11-(1-5)--------------------------------------*/
.stars-11 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-11 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-11 input[type="radio"].star-11-5:checked ~ span { width: 100%; }
.stars-11 input[type="radio"].star-11-4:checked ~ span { width: 80%; }
.stars-11 input[type="radio"].star-11-3:checked ~ span { width: 60%; }
.stars-11 input[type="radio"].star-11-2:checked ~ span { width: 40%; }
.stars-11 input[type="radio"].star-11-1:checked ~ span { width: 20%; }
.stars-11 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-11 label:hover ~ span { background-position: 0 -30px; }
.stars-11 label.star-11-5:hover ~ span { width: 100% !important; }
.stars-11 label.star-11-4:hover ~ span { width: 80% !important; }
.stars-11 label.star-11-3:hover ~ span { width: 60% !important; }
.stars-11 label.star-11-2:hover ~ span { width: 40% !important; }
.stars-11 label.star-11-1:hover ~ span { width: 20% !important; }
.stars-11 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-12-(1-5)--------------------------------------*/
.stars-12 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-12 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-12 input[type="radio"].star-12-5:checked ~ span { width: 100%; }
.stars-12 input[type="radio"].star-12-4:checked ~ span { width: 80%; }
.stars-12 input[type="radio"].star-12-3:checked ~ span { width: 60%; }
.stars-12 input[type="radio"].star-12-2:checked ~ span { width: 40%; }
.stars-12 input[type="radio"].star-12-1:checked ~ span { width: 20%; }
.stars-12 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-12 label:hover ~ span { background-position: 0 -30px; }
.stars-12 label.star-12-5:hover ~ span { width: 100% !important; }
.stars-12 label.star-12-4:hover ~ span { width: 80% !important; }
.stars-12 label.star-12-3:hover ~ span { width: 60% !important; }
.stars-12 label.star-12-2:hover ~ span { width: 40% !important; }
.stars-12 label.star-12-1:hover ~ span { width: 20% !important; }
.stars-12 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-13-(1-5)--------------------------------------*/
.stars-13 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-13 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-13 input[type="radio"].star-13-5:checked ~ span { width: 100%; }
.stars-13 input[type="radio"].star-13-4:checked ~ span { width: 80%; }
.stars-13 input[type="radio"].star-13-3:checked ~ span { width: 60%; }
.stars-13 input[type="radio"].star-13-2:checked ~ span { width: 40%; }
.stars-13 input[type="radio"].star-13-1:checked ~ span { width: 20%; }
.stars-13 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-13 label:hover ~ span { background-position: 0 -30px; }
.stars-13 label.star-13-5:hover ~ span { width: 100% !important; }
.stars-13 label.star-13-4:hover ~ span { width: 80% !important; }
.stars-13 label.star-13-3:hover ~ span { width: 60% !important; }
.stars-13 label.star-13-2:hover ~ span { width: 40% !important; }
.stars-13 label.star-13-1:hover ~ span { width: 20% !important; }
.stars-13 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-31-(1-5)--------------------------------------*/
.stars-31 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-31 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-31 input[type="radio"].star-31-5:checked ~ span { width: 100%; }
.stars-31 input[type="radio"].star-31-4:checked ~ span { width: 80%; }
.stars-31 input[type="radio"].star-31-3:checked ~ span { width: 60%; }
.stars-31 input[type="radio"].star-31-2:checked ~ span { width: 40%; }
.stars-31 input[type="radio"].star-31-1:checked ~ span { width: 20%; }
.stars-31 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-31 label:hover ~ span { background-position: 0 -30px; }
.stars-31 label.star-31-5:hover ~ span { width: 100% !important; }
.stars-31 label.star-31-4:hover ~ span { width: 80% !important; }
.stars-31 label.star-31-3:hover ~ span { width: 60% !important; }
.stars-31 label.star-31-2:hover ~ span { width: 40% !important; }
.stars-31 label.star-31-1:hover ~ span { width: 20% !important; }
.stars-31 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-32-(1-5)--------------------------------------*/
.stars-32 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-32 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-32 input[type="radio"].star-32-5:checked ~ span { width: 100%; }
.stars-32 input[type="radio"].star-32-4:checked ~ span { width: 80%; }
.stars-32 input[type="radio"].star-32-3:checked ~ span { width: 60%; }
.stars-32 input[type="radio"].star-32-2:checked ~ span { width: 40%; }
.stars-32 input[type="radio"].star-32-1:checked ~ span { width: 20%; }
.stars-32 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-32 label:hover ~ span { background-position: 0 -30px; }
.stars-32 label.star-32-5:hover ~ span { width: 100% !important; }
.stars-32 label.star-32-4:hover ~ span { width: 80% !important; }
.stars-32 label.star-32-3:hover ~ span { width: 60% !important; }
.stars-32 label.star-32-2:hover ~ span { width: 40% !important; }
.stars-32 label.star-32-1:hover ~ span { width: 20% !important; }
.stars-32 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-33-(1-5)--------------------------------------*/
.stars-33 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-33 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-33 input[type="radio"].star-33-5:checked ~ span { width: 100%; }
.stars-33 input[type="radio"].star-33-4:checked ~ span { width: 80%; }
.stars-33 input[type="radio"].star-33-3:checked ~ span { width: 60%; }
.stars-33 input[type="radio"].star-33-2:checked ~ span { width: 40%; }
.stars-33 input[type="radio"].star-33-1:checked ~ span { width: 20%; }
.stars-33 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-33 label:hover ~ span { background-position: 0 -30px; }
.stars-33 label.star-33-5:hover ~ span { width: 100% !important; }
.stars-33 label.star-33-4:hover ~ span { width: 80% !important; }
.stars-33 label.star-33-3:hover ~ span { width: 60% !important; }
.stars-33 label.star-33-2:hover ~ span { width: 40% !important; }
.stars-33 label.star-33-1:hover ~ span { width: 20% !important; }
.stars-33 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-34-(1-5)--------------------------------------*/
.stars-34 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-34 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-34 input[type="radio"].star-34-5:checked ~ span { width: 100%; }
.stars-34 input[type="radio"].star-34-4:checked ~ span { width: 80%; }
.stars-34 input[type="radio"].star-34-3:checked ~ span { width: 60%; }
.stars-34 input[type="radio"].star-34-2:checked ~ span { width: 40%; }
.stars-34 input[type="radio"].star-34-1:checked ~ span { width: 20%; }
.stars-34 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-34 label:hover ~ span { background-position: 0 -30px; }
.stars-34 label.star-34-5:hover ~ span { width: 100% !important; }
.stars-34 label.star-34-4:hover ~ span { width: 80% !important; }
.stars-34 label.star-34-3:hover ~ span { width: 60% !important; }
.stars-34 label.star-34-2:hover ~ span { width: 40% !important; }
.stars-34 label.star-34-1:hover ~ span { width: 20% !important; }
.stars-34 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-35-(1-5)--------------------------------------*/
.stars-35 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-35 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-35 input[type="radio"].star-35-5:checked ~ span { width: 100%; }
.stars-35 input[type="radio"].star-35-4:checked ~ span { width: 80%; }
.stars-35 input[type="radio"].star-35-3:checked ~ span { width: 60%; }
.stars-35 input[type="radio"].star-35-2:checked ~ span { width: 40%; }
.stars-35 input[type="radio"].star-35-1:checked ~ span { width: 20%; }
.stars-35 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-35 label:hover ~ span { background-position: 0 -30px; }
.stars-35 label.star-35-5:hover ~ span { width: 100% !important; }
.stars-35 label.star-35-4:hover ~ span { width: 80% !important; }
.stars-35 label.star-35-3:hover ~ span { width: 60% !important; }
.stars-35 label.star-35-2:hover ~ span { width: 40% !important; }
.stars-35 label.star-35-1:hover ~ span { width: 20% !important; }
.stars-35 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-36-(1-5)--------------------------------------*/
.stars-36 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-36 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-36 input[type="radio"].star-36-5:checked ~ span { width: 100%; }
.stars-36 input[type="radio"].star-36-4:checked ~ span { width: 80%; }
.stars-36 input[type="radio"].star-36-3:checked ~ span { width: 60%; }
.stars-36 input[type="radio"].star-36-2:checked ~ span { width: 40%; }
.stars-36 input[type="radio"].star-36-1:checked ~ span { width: 20%; }
.stars-36 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-36 label:hover ~ span { background-position: 0 -30px; }
.stars-36 label.star-36-5:hover ~ span { width: 100% !important; }
.stars-36 label.star-36-4:hover ~ span { width: 80% !important; }
.stars-36 label.star-36-3:hover ~ span { width: 60% !important; }
.stars-36 label.star-36-2:hover ~ span { width: 40% !important; }
.stars-36 label.star-36-1:hover ~ span { width: 20% !important; }
.stars-36 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-37-(1-5)--------------------------------------*/
.stars-37 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-37 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-37 input[type="radio"].star-37-5:checked ~ span { width: 100%; }
.stars-37 input[type="radio"].star-37-4:checked ~ span { width: 80%; }
.stars-37 input[type="radio"].star-37-3:checked ~ span { width: 60%; }
.stars-37 input[type="radio"].star-37-2:checked ~ span { width: 40%; }
.stars-37 input[type="radio"].star-37-1:checked ~ span { width: 20%; }
.stars-37 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-37 label:hover ~ span { background-position: 0 -30px; }
.stars-37 label.star-37-5:hover ~ span { width: 100% !important; }
.stars-37 label.star-37-4:hover ~ span { width: 80% !important; }
.stars-37 label.star-37-3:hover ~ span { width: 60% !important; }
.stars-37 label.star-37-2:hover ~ span { width: 40% !important; }
.stars-37 label.star-37-1:hover ~ span { width: 20% !important; }
.stars-37 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-38-(1-5)--------------------------------------*/
.stars-38 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-38 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-38 input[type="radio"].star-38-5:checked ~ span { width: 100%; }
.stars-38 input[type="radio"].star-38-4:checked ~ span { width: 80%; }
.stars-38 input[type="radio"].star-38-3:checked ~ span { width: 60%; }
.stars-38 input[type="radio"].star-38-2:checked ~ span { width: 40%; }
.stars-38 input[type="radio"].star-38-1:checked ~ span { width: 20%; }
.stars-38 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-38 label:hover ~ span { background-position: 0 -30px; }
.stars-38 label.star-38-5:hover ~ span { width: 100% !important; }
.stars-38 label.star-38-4:hover ~ span { width: 80% !important; }
.stars-38 label.star-38-3:hover ~ span { width: 60% !important; }
.stars-38 label.star-38-2:hover ~ span { width: 40% !important; }
.stars-38 label.star-38-1:hover ~ span { width: 20% !important; }
.stars-38 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-39-(1-5)--------------------------------------*/
.stars-39 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-39 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-39 input[type="radio"].star-39-5:checked ~ span { width: 100%; }
.stars-39 input[type="radio"].star-39-4:checked ~ span { width: 80%; }
.stars-39 input[type="radio"].star-39-3:checked ~ span { width: 60%; }
.stars-39 input[type="radio"].star-39-2:checked ~ span { width: 40%; }
.stars-39 input[type="radio"].star-39-1:checked ~ span { width: 20%; }
.stars-39 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-39 label:hover ~ span { background-position: 0 -30px; }
.stars-39 label.star-39-5:hover ~ span { width: 100% !important; }
.stars-39 label.star-39-4:hover ~ span { width: 80% !important; }
.stars-39 label.star-39-3:hover ~ span { width: 60% !important; }
.stars-39 label.star-39-2:hover ~ span { width: 40% !important; }
.stars-39 label.star-39-1:hover ~ span { width: 20% !important; }
.stars-39 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-40-(1-5)--------------------------------------*/
.stars-40 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-40 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-40 input[type="radio"].star-40-5:checked ~ span { width: 100%; }
.stars-40 input[type="radio"].star-40-4:checked ~ span { width: 80%; }
.stars-40 input[type="radio"].star-40-3:checked ~ span { width: 60%; }
.stars-40 input[type="radio"].star-40-2:checked ~ span { width: 40%; }
.stars-40 input[type="radio"].star-40-1:checked ~ span { width: 20%; }
.stars-40 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-40 label:hover ~ span { background-position: 0 -30px; }
.stars-40 label.star-40-5:hover ~ span { width: 100% !important; }
.stars-40 label.star-40-4:hover ~ span { width: 80% !important; }
.stars-40 label.star-40-3:hover ~ span { width: 60% !important; }
.stars-40 label.star-40-2:hover ~ span { width: 40% !important; }
.stars-40 label.star-40-1:hover ~ span { width: 20% !important; }
.stars-40 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-41-(1-5)--------------------------------------*/
.stars-41 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-41 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-41 input[type="radio"].star-41-5:checked ~ span { width: 100%; }
.stars-41 input[type="radio"].star-41-4:checked ~ span { width: 80%; }
.stars-41 input[type="radio"].star-41-3:checked ~ span { width: 60%; }
.stars-41 input[type="radio"].star-41-2:checked ~ span { width: 40%; }
.stars-41 input[type="radio"].star-41-1:checked ~ span { width: 20%; }
.stars-41 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-41 label:hover ~ span { background-position: 0 -30px; }
.stars-41 label.star-41-5:hover ~ span { width: 100% !important; }
.stars-41 label.star-41-4:hover ~ span { width: 80% !important; }
.stars-41 label.star-41-3:hover ~ span { width: 60% !important; }
.stars-41 label.star-41-2:hover ~ span { width: 40% !important; }
.stars-41 label.star-41-1:hover ~ span { width: 20% !important; }
.stars-41 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-42-(1-5)--------------------------------------*/
.stars-42 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-42 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-42 input[type="radio"].star-42-5:checked ~ span { width: 100%; }
.stars-42 input[type="radio"].star-42-4:checked ~ span { width: 80%; }
.stars-42 input[type="radio"].star-42-3:checked ~ span { width: 60%; }
.stars-42 input[type="radio"].star-42-2:checked ~ span { width: 40%; }
.stars-42 input[type="radio"].star-42-1:checked ~ span { width: 20%; }
.stars-42 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-42 label:hover ~ span { background-position: 0 -30px; }
.stars-42 label.star-42-5:hover ~ span { width: 100% !important; }
.stars-42 label.star-42-4:hover ~ span { width: 80% !important; }
.stars-42 label.star-42-3:hover ~ span { width: 60% !important; }
.stars-42 label.star-42-2:hover ~ span { width: 40% !important; }
.stars-42 label.star-42-1:hover ~ span { width: 20% !important; }
.stars-42 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-43-(1-5)--------------------------------------*/
.stars-43 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-43 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-43 input[type="radio"].star-43-5:checked ~ span { width: 100%; }
.stars-43 input[type="radio"].star-43-4:checked ~ span { width: 80%; }
.stars-43 input[type="radio"].star-43-3:checked ~ span { width: 60%; }
.stars-43 input[type="radio"].star-43-2:checked ~ span { width: 40%; }
.stars-43 input[type="radio"].star-43-1:checked ~ span { width: 20%; }
.stars-43 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-43 label:hover ~ span { background-position: 0 -30px; }
.stars-43 label.star-43-5:hover ~ span { width: 100% !important; }
.stars-43 label.star-43-4:hover ~ span { width: 80% !important; }
.stars-43 label.star-43-3:hover ~ span { width: 60% !important; }
.stars-43 label.star-43-2:hover ~ span { width: 40% !important; }
.stars-43 label.star-43-1:hover ~ span { width: 20% !important; }
.stars-43 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-44-(1-5)--------------------------------------*/
.stars-44 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-44 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-44 input[type="radio"].star-44-5:checked ~ span { width: 100%; }
.stars-44 input[type="radio"].star-44-4:checked ~ span { width: 80%; }
.stars-44 input[type="radio"].star-44-3:checked ~ span { width: 60%; }
.stars-44 input[type="radio"].star-44-2:checked ~ span { width: 40%; }
.stars-44 input[type="radio"].star-44-1:checked ~ span { width: 20%; }
.stars-44 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-44 label:hover ~ span { background-position: 0 -30px; }
.stars-44 label.star-44-5:hover ~ span { width: 100% !important; }
.stars-44 label.star-44-4:hover ~ span { width: 80% !important; }
.stars-44 label.star-44-3:hover ~ span { width: 60% !important; }
.stars-44 label.star-44-2:hover ~ span { width: 40% !important; }
.stars-44 label.star-44-1:hover ~ span { width: 20% !important; }
.stars-44 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-45-(1-5)--------------------------------------*/
.stars-45 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-45 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-45 input[type="radio"].star-45-5:checked ~ span { width: 100%; }
.stars-45 input[type="radio"].star-45-4:checked ~ span { width: 80%; }
.stars-45 input[type="radio"].star-45-3:checked ~ span { width: 60%; }
.stars-45 input[type="radio"].star-45-2:checked ~ span { width: 40%; }
.stars-45 input[type="radio"].star-45-1:checked ~ span { width: 20%; }
.stars-45 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-45 label:hover ~ span { background-position: 0 -30px; }
.stars-45 label.star-45-5:hover ~ span { width: 100% !important; }
.stars-45 label.star-45-4:hover ~ span { width: 80% !important; }
.stars-45 label.star-45-3:hover ~ span { width: 60% !important; }
.stars-45 label.star-45-2:hover ~ span { width: 40% !important; }
.stars-45 label.star-45-1:hover ~ span { width: 20% !important; }
.stars-45 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-46-(1-5)--------------------------------------*/
.stars-46 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-46 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-46 input[type="radio"].star-46-5:checked ~ span { width: 100%; }
.stars-46 input[type="radio"].star-46-4:checked ~ span { width: 80%; }
.stars-46 input[type="radio"].star-46-3:checked ~ span { width: 60%; }
.stars-46 input[type="radio"].star-46-2:checked ~ span { width: 40%; }
.stars-46 input[type="radio"].star-46-1:checked ~ span { width: 20%; }
.stars-46 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-46 label:hover ~ span { background-position: 0 -30px; }
.stars-46 label.star-46-5:hover ~ span { width: 100% !important; }
.stars-46 label.star-46-4:hover ~ span { width: 80% !important; }
.stars-46 label.star-46-3:hover ~ span { width: 60% !important; }
.stars-46 label.star-46-2:hover ~ span { width: 40% !important; }
.stars-46 label.star-46-1:hover ~ span { width: 20% !important; }
.stars-46 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-47-(1-5)--------------------------------------*/
.stars-47 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-47 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-47 input[type="radio"].star-47-5:checked ~ span { width: 100%; }
.stars-47 input[type="radio"].star-47-4:checked ~ span { width: 80%; }
.stars-47 input[type="radio"].star-47-3:checked ~ span { width: 60%; }
.stars-47 input[type="radio"].star-47-2:checked ~ span { width: 40%; }
.stars-47 input[type="radio"].star-47-1:checked ~ span { width: 20%; }
.stars-47 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-47 label:hover ~ span { background-position: 0 -30px; }
.stars-47 label.star-47-5:hover ~ span { width: 100% !important; }
.stars-47 label.star-47-4:hover ~ span { width: 80% !important; }
.stars-47 label.star-47-3:hover ~ span { width: 60% !important; }
.stars-47 label.star-47-2:hover ~ span { width: 40% !important; }
.stars-47 label.star-47-1:hover ~ span { width: 20% !important; }
.stars-47 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-48-(1-5)--------------------------------------*/
.stars-48 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-48 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-48 input[type="radio"].star-48-5:checked ~ span { width: 100%; }
.stars-48 input[type="radio"].star-48-4:checked ~ span { width: 80%; }
.stars-48 input[type="radio"].star-48-3:checked ~ span { width: 60%; }
.stars-48 input[type="radio"].star-48-2:checked ~ span { width: 40%; }
.stars-48 input[type="radio"].star-48-1:checked ~ span { width: 20%; }
.stars-48 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-48 label:hover ~ span { background-position: 0 -30px; }
.stars-48 label.star-48-5:hover ~ span { width: 100% !important; }
.stars-48 label.star-48-4:hover ~ span { width: 80% !important; }
.stars-48 label.star-48-3:hover ~ span { width: 60% !important; }
.stars-48 label.star-48-2:hover ~ span { width: 40% !important; }
.stars-48 label.star-48-1:hover ~ span { width: 20% !important; }
.stars-48 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-49-(1-5)--------------------------------------*/
.stars-49 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-49 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-49 input[type="radio"].star-49-5:checked ~ span { width: 100%; }
.stars-49 input[type="radio"].star-49-4:checked ~ span { width: 80%; }
.stars-49 input[type="radio"].star-49-3:checked ~ span { width: 60%; }
.stars-49 input[type="radio"].star-49-2:checked ~ span { width: 40%; }
.stars-49 input[type="radio"].star-49-1:checked ~ span { width: 20%; }
.stars-49 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-49 label:hover ~ span { background-position: 0 -30px; }
.stars-49 label.star-49-5:hover ~ span { width: 100% !important; }
.stars-49 label.star-49-4:hover ~ span { width: 80% !important; }
.stars-49 label.star-49-3:hover ~ span { width: 60% !important; }
.stars-49 label.star-49-2:hover ~ span { width: 40% !important; }
.stars-49 label.star-49-1:hover ~ span { width: 20% !important; }
.stars-49 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-50-(1-5)--------------------------------------*/
.stars-50 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-50 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-50 input[type="radio"].star-50-5:checked ~ span { width: 100%; }
.stars-50 input[type="radio"].star-50-4:checked ~ span { width: 80%; }
.stars-50 input[type="radio"].star-50-3:checked ~ span { width: 60%; }
.stars-50 input[type="radio"].star-50-2:checked ~ span { width: 40%; }
.stars-50 input[type="radio"].star-50-1:checked ~ span { width: 20%; }
.stars-50 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-50 label:hover ~ span { background-position: 0 -30px; }
.stars-50 label.star-50-5:hover ~ span { width: 100% !important; }
.stars-50 label.star-50-4:hover ~ span { width: 80% !important; }
.stars-50 label.star-50-3:hover ~ span { width: 60% !important; }
.stars-50 label.star-50-2:hover ~ span { width: 40% !important; }
.stars-50 label.star-50-1:hover ~ span { width: 20% !important; }
.stars-50 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*------------------Star-51-(1-5)--------------------------------------*/
.stars-51 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-51 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-51 input[type="radio"].star-51-5:checked ~ span { width: 100%; }
.stars-51 input[type="radio"].star-51-4:checked ~ span { width: 80%; }
.stars-51 input[type="radio"].star-51-3:checked ~ span { width: 60%; }
.stars-51 input[type="radio"].star-51-2:checked ~ span { width: 40%; }
.stars-51 input[type="radio"].star-51-1:checked ~ span { width: 20%; }
.stars-51 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-51 label:hover ~ span { background-position: 0 -30px; }
.stars-51 label.star-51-5:hover ~ span { width: 100% !important; }
.stars-51 label.star-51-4:hover ~ span { width: 80% !important; }
.stars-51 label.star-51-3:hover ~ span { width: 60% !important; }
.stars-51 label.star-51-2:hover ~ span { width: 40% !important; }
.stars-51 label.star-51-1:hover ~ span { width: 20% !important; }
.stars-51 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*------------------Star-52-(1-5)--------------------------------------*/
.stars-52 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-52 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-52 input[type="radio"].star-52-5:checked ~ span { width: 100%; }
.stars-52 input[type="radio"].star-52-4:checked ~ span { width: 80%; }
.stars-52 input[type="radio"].star-52-3:checked ~ span { width: 60%; }
.stars-52 input[type="radio"].star-52-2:checked ~ span { width: 40%; }
.stars-52 input[type="radio"].star-52-1:checked ~ span { width: 20%; }
.stars-52 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-52 label:hover ~ span { background-position: 0 -30px; }
.stars-52 label.star-52-5:hover ~ span { width: 100% !important; }
.stars-52 label.star-52-4:hover ~ span { width: 80% !important; }
.stars-52 label.star-52-3:hover ~ span { width: 60% !important; }
.stars-52 label.star-52-2:hover ~ span { width: 40% !important; }
.stars-52 label.star-52-1:hover ~ span { width: 20% !important; }
.stars-52 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*------------------Star-53-(1-5)--------------------------------------*/
.stars-53 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-53 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-53 input[type="radio"].star-53-5:checked ~ span { width: 100%; }
.stars-53 input[type="radio"].star-53-4:checked ~ span { width: 80%; }
.stars-53 input[type="radio"].star-53-3:checked ~ span { width: 60%; }
.stars-53 input[type="radio"].star-53-2:checked ~ span { width: 40%; }
.stars-53 input[type="radio"].star-53-1:checked ~ span { width: 20%; }
.stars-53 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-53 label:hover ~ span { background-position: 0 -30px; }
.stars-53 label.star-53-5:hover ~ span { width: 100% !important; }
.stars-53 label.star-53-4:hover ~ span { width: 80% !important; }
.stars-53 label.star-53-3:hover ~ span { width: 60% !important; }
.stars-53 label.star-53-2:hover ~ span { width: 40% !important; }
.stars-53 label.star-53-1:hover ~ span { width: 20% !important; }
.stars-53 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*------------------Star-54-(1-5)--------------------------------------*/
.stars-54 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-54 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-54 input[type="radio"].star-54-5:checked ~ span { width: 100%; }
.stars-54 input[type="radio"].star-54-4:checked ~ span { width: 80%; }
.stars-54 input[type="radio"].star-54-3:checked ~ span { width: 60%; }
.stars-54 input[type="radio"].star-54-2:checked ~ span { width: 40%; }
.stars-54 input[type="radio"].star-54-1:checked ~ span { width: 20%; }
.stars-54 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-54 label:hover ~ span { background-position: 0 -30px; }
.stars-54 label.star-54-5:hover ~ span { width: 100% !important; }
.stars-54 label.star-54-4:hover ~ span { width: 80% !important; }
.stars-54 label.star-54-3:hover ~ span { width: 60% !important; }
.stars-54 label.star-54-2:hover ~ span { width: 40% !important; }
.stars-54 label.star-54-1:hover ~ span { width: 20% !important; }
.stars-54 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*
* STAR COMPONENTS ENDS HERE
*/
/*------------------Star-55-(1-5)--------------------------------------*/
.stars-55 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-55 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-55 input[type="radio"].star-55-5:checked ~ span { width: 100%; }
.stars-55 input[type="radio"].star-55-4:checked ~ span { width: 80%; }
.stars-55 input[type="radio"].star-55-3:checked ~ span { width: 60%; }
.stars-55 input[type="radio"].star-55-2:checked ~ span { width: 40%; }
.stars-55 input[type="radio"].star-55-1:checked ~ span { width: 20%; }
.stars-55 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-55 label:hover ~ span { background-position: 0 -30px; }
.stars-55 label.star-55-5:hover ~ span { width: 100% !important; }
.stars-55 label.star-55-4:hover ~ span { width: 80% !important; }
.stars-55 label.star-55-3:hover ~ span { width: 60% !important; }
.stars-55 label.star-55-2:hover ~ span { width: 40% !important; }
.stars-55 label.star-55-1:hover ~ span { width: 20% !important; }
.stars-55 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*------------------Star-56-(1-5)--------------------------------------*/
.stars-56 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-56 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-56 input[type="radio"].star-56-5:checked ~ span { width: 100%; }
.stars-56 input[type="radio"].star-56-4:checked ~ span { width: 80%; }
.stars-56 input[type="radio"].star-56-3:checked ~ span { width: 60%; }
.stars-56 input[type="radio"].star-56-2:checked ~ span { width: 40%; }
.stars-56 input[type="radio"].star-56-1:checked ~ span { width: 20%; }
.stars-56 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-56 label:hover ~ span { background-position: 0 -30px; }
.stars-56 label.star-56-5:hover ~ span { width: 100% !important; }
.stars-56 label.star-56-4:hover ~ span { width: 80% !important; }
.stars-56 label.star-56-3:hover ~ span { width: 60% !important; }
.stars-56 label.star-56-2:hover ~ span { width: 40% !important; }
.stars-56 label.star-56-1:hover ~ span { width: 20% !important; }
.stars-56 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*------------------Star-57-(1-5)--------------------------------------*/
.stars-57 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-57 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-57 input[type="radio"].star-57-5:checked ~ span { width: 100%; }
.stars-57 input[type="radio"].star-57-4:checked ~ span { width: 80%; }
.stars-57 input[type="radio"].star-57-3:checked ~ span { width: 60%; }
.stars-57 input[type="radio"].star-57-2:checked ~ span { width: 40%; }
.stars-57 input[type="radio"].star-57-1:checked ~ span { width: 20%; }
.stars-57 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-57 label:hover ~ span { background-position: 0 -30px; }
.stars-57 label.star-57-5:hover ~ span { width: 100% !important; }
.stars-57 label.star-57-4:hover ~ span { width: 80% !important; }
.stars-57 label.star-57-3:hover ~ span { width: 60% !important; }
.stars-57 label.star-57-2:hover ~ span { width: 40% !important; }
.stars-57 label.star-57-1:hover ~ span { width: 20% !important; }
.stars-57 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*------------------Star-58-(1-5)--------------------------------------*/
.stars-58 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-58 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-58 input[type="radio"].star-58-5:checked ~ span { width: 100%; }
.stars-58 input[type="radio"].star-58-4:checked ~ span { width: 80%; }
.stars-58 input[type="radio"].star-58-3:checked ~ span { width: 60%; }
.stars-58 input[type="radio"].star-58-2:checked ~ span { width: 40%; }
.stars-58 input[type="radio"].star-58-1:checked ~ span { width: 20%; }
.stars-58 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-58 label:hover ~ span { background-position: 0 -30px; }
.stars-58 label.star-58-5:hover ~ span { width: 100% !important; }
.stars-58 label.star-58-4:hover ~ span { width: 80% !important; }
.stars-58 label.star-58-3:hover ~ span { width: 60% !important; }
.stars-58 label.star-58-2:hover ~ span { width: 40% !important; }
.stars-58 label.star-58-1:hover ~ span { width: 20% !important; }
.stars-58 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*------------------Star-59-(1-5)--------------------------------------*/
.stars-59 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-59 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-59 input[type="radio"].star-59-5:checked ~ span { width: 100%; }
.stars-59 input[type="radio"].star-59-4:checked ~ span { width: 80%; }
.stars-59 input[type="radio"].star-59-3:checked ~ span { width: 60%; }
.stars-59 input[type="radio"].star-59-2:checked ~ span { width: 40%; }
.stars-59 input[type="radio"].star-59-1:checked ~ span { width: 20%; }
.stars-59 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-59 label:hover ~ span { background-position: 0 -30px; }
.stars-59 label.star-59-5:hover ~ span { width: 100% !important; }
.stars-59 label.star-59-4:hover ~ span { width: 80% !important; }
.stars-59 label.star-59-3:hover ~ span { width: 60% !important; }
.stars-59 label.star-59-2:hover ~ span { width: 40% !important; }
.stars-59 label.star-59-1:hover ~ span { width: 20% !important; }
.stars-59 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*------------------Star-60-(1-5)--------------------------------------*/
.stars-60 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-60 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-60 input[type="radio"].star-60-5:checked ~ span { width: 100%; }
.stars-60 input[type="radio"].star-60-4:checked ~ span { width: 80%; }
.stars-60 input[type="radio"].star-60-3:checked ~ span { width: 60%; }
.stars-60 input[type="radio"].star-60-2:checked ~ span { width: 40%; }
.stars-60 input[type="radio"].star-60-1:checked ~ span { width: 20%; }
.stars-60 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-60 label:hover ~ span { background-position: 0 -30px; }
.stars-60 label.star-60-5:hover ~ span { width: 100% !important; }
.stars-60 label.star-60-4:hover ~ span { width: 80% !important; }
.stars-60 label.star-60-3:hover ~ span { width: 60% !important; }
.stars-60 label.star-60-2:hover ~ span { width: 40% !important; }
.stars-60 label.star-60-1:hover ~ span { width: 20% !important; }
.stars-60 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -60px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*------------------Star-61-(1-5)--------------------------------------*/
.stars-61 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-61 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-61 input[type="radio"].star-61-5:checked ~ span { width: 100%; }
.stars-61 input[type="radio"].star-61-4:checked ~ span { width: 80%; }
.stars-61 input[type="radio"].star-61-3:checked ~ span { width: 60%; }
.stars-61 input[type="radio"].star-61-2:checked ~ span { width: 40%; }
.stars-61 input[type="radio"].star-61-1:checked ~ span { width: 20%; }
.stars-61 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-61 label:hover ~ span { background-position: 0 -30px; }
.stars-61 label.star-61-5:hover ~ span { width: 100% !important; }
.stars-61 label.star-61-4:hover ~ span { width: 80% !important; }
.stars-61 label.star-61-3:hover ~ span { width: 60% !important; }
.stars-61 label.star-61-2:hover ~ span { width: 40% !important; }
.stars-61 label.star-61-1:hover ~ span { width: 20% !important; }
.stars-61 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -61px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*------------------Star-62-(1-5)--------------------------------------*/
.stars-62 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-62 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-62 input[type="radio"].star-62-5:checked ~ span { width: 100%; }
.stars-62 input[type="radio"].star-62-4:checked ~ span { width: 80%; }
.stars-62 input[type="radio"].star-62-3:checked ~ span { width: 60%; }
.stars-62 input[type="radio"].star-62-2:checked ~ span { width: 40%; }
.stars-62 input[type="radio"].star-62-1:checked ~ span { width: 20%; }
.stars-62 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-62 label:hover ~ span { background-position: 0 -30px; }
.stars-62 label.star-62-5:hover ~ span { width: 100% !important; }
.stars-62 label.star-62-4:hover ~ span { width: 80% !important; }
.stars-62 label.star-62-3:hover ~ span { width: 60% !important; }
.stars-62 label.star-62-2:hover ~ span { width: 40% !important; }
.stars-62 label.star-62-1:hover ~ span { width: 20% !important; }
.stars-62 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -62px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*------------------Star-63-(1-5)--------------------------------------*/
.stars-63 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-63 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-63 input[type="radio"].star-63-5:checked ~ span { width: 100%; }
.stars-63 input[type="radio"].star-63-4:checked ~ span { width: 80%; }
.stars-63 input[type="radio"].star-63-3:checked ~ span { width: 60%; }
.stars-63 input[type="radio"].star-63-2:checked ~ span { width: 40%; }
.stars-63 input[type="radio"].star-63-1:checked ~ span { width: 20%; }
.stars-63 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-63 label:hover ~ span { background-position: 0 -30px; }
.stars-63 label.star-63-5:hover ~ span { width: 100% !important; }
.stars-63 label.star-63-4:hover ~ span { width: 80% !important; }
.stars-63 label.star-63-3:hover ~ span { width: 60% !important; }
.stars-63 label.star-63-2:hover ~ span { width: 40% !important; }
.stars-63 label.star-63-1:hover ~ span { width: 20% !important; }
.stars-63 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -63px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*------------------Star-90-(1-5)--------------------------------------*/
.stars-90 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-90 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-90 input[type="radio"].star-90-5:checked ~ span { width: 100%; }
.stars-90 input[type="radio"].star-90-4:checked ~ span { width: 80%; }
.stars-90 input[type="radio"].star-90-3:checked ~ span { width: 60%; }
.stars-90 input[type="radio"].star-90-2:checked ~ span { width: 40%; }
.stars-90 input[type="radio"].star-90-1:checked ~ span { width: 20%; }
.stars-90 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-90 label:hover ~ span { background-position: 0 -30px; }
.stars-90 label.star-90-5:hover ~ span { width: 100% !important; }
.stars-90 label.star-90-4:hover ~ span { width: 80% !important; }
.stars-90 label.star-90-3:hover ~ span { width: 60% !important; }
.stars-90 label.star-90-2:hover ~ span { width: 40% !important; }
.stars-90 label.star-90-1:hover ~ span { width: 20% !important; }
.stars-90 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -63px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*------------------Star-91-(1-5)--------------------------------------*/
.stars-91 {
background: url("stars.png") repeat-x 0 0;
width: 150px;
margin: 0 auto;
}
.stars-91 input[type="radio"] {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.stars-91 input[type="radio"].star-91-5:checked ~ span { width: 100%; }
.stars-91 input[type="radio"].star-91-4:checked ~ span { width: 80%; }
.stars-91 input[type="radio"].star-91-3:checked ~ span { width: 60%; }
.stars-91 input[type="radio"].star-91-2:checked ~ span { width: 40%; }
.stars-91 input[type="radio"].star-91-1:checked ~ span { width: 20%; }
.stars-91 label {
display: block;
width: 30px;
height: 30px;
margin: 0!important;
padding: 0!important;
text-indent: -999em;
float: left;
position: relative;
z-index: 10;
background: transparent!important;
cursor: pointer;
}
.stars-91 label:hover ~ span { background-position: 0 -30px; }
.stars-91 label.star-91-5:hover ~ span { width: 100% !important; }
.stars-91 label.star-91-4:hover ~ span { width: 80% !important; }
.stars-91 label.star-91-3:hover ~ span { width: 60% !important; }
.stars-91 label.star-91-2:hover ~ span { width: 40% !important; }
.stars-91 label.star-91-1:hover ~ span { width: 20% !important; }
.stars-91 span {
display: block;
width: 0;
position: relative;
top: 0;
left: 0;
height: 30px;
background: url("stars.png") repeat-x 0 -63px;
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
#map_container{
position: relative;
}
#map{
height: 0;
overflow: hidden;
padding-bottom: 22.25%;
padding-top: 30px;
position: relative;
}
.equal {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
div[class*='col-'] {
flex:1 1 auto;
display: flex;
}
.panel {
flex:1 0 100%;
}
.bckclr{
background-color: #D8F781 !important;
}
/*------------------Panel Heading Color -------------------------------*/
.header{
background-color: #39b1cc !important;
height: 50px
}
.panel1 {
background-color: #6FEAEC !important;
/*background: #39b1cc;*/
background: -moz-linear-gradient(top, #6FEAEC 0%, #79FDFF 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6FEAEC), color-stop(100%, #79FDFF));
background: -webkit-linear-gradient(top, #6FEAEC 0%, #79FDFF 100%);
background: -o-linear-gradient(top, #6FEAEC 0%, #79FDFF 100%);
background: -ms-linear-gradient(top, #6FEAEC 0%, #79FDFF 100%);
background: linear-gradient(to bottom, #6FEAEC 0%, #79FDFF 100%);
color: #ffffff;
padding: 5px 17px 8px;
height: 80px
/**/
}
.panel2 {
background-color: #BDE36C !important;
/*background: #39b1cc;*/
background: -moz-linear-gradient(top, #BDE36C 0%, #D4FF79 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #BDE36C), color-stop(100%, #D4FF79));
background: -webkit-linear-gradient(top, #BDE36C 0%, #D4FF79 100%);
background: -o-linear-gradient(top, #BDE36C 0%, #D4FF79 100%);
background: -ms-linear-gradient(top, #BDE36C 0%, #D4FF79 100%);
background: linear-gradient(to bottom, #BDE36C 0%, #D4FF79 100%);
color: #ffffff;
padding: 5px 17px 8px;
height: 80px
/**/
}
.panel3 {
background-color: #E16A41 !important;
/*background: #39b1cc;*/
background: -moz-linear-gradient(top, #E16A41 0%, #FF916B 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #E16A41), color-stop(100%, #FF916B));
background: -webkit-linear-gradient(top, #E16A41 0%, #FF916B 100%);
background: -o-linear-gradient(top, #E16A41 0%, #FF916B 100%);
background: -ms-linear-gradient(top, #E16A41 0%, #FF916B 100%);
background: linear-gradient(to bottom, #E16A41 0%, #FF916B 100%);
color: #ffffff;
padding: 5px 17px 8px;
height: 80px;
/**/
}
.panel4 {
background-color: #CAAFFF !important;
/*background: #39b1cc;*/
background: -moz-linear-gradient(top, #E0D0FF 0%, #CAAFFF 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #E0D0FF), color-stop(100%, #CAAFFF));
background: -webkit-linear-gradient(top, #E0D0FF 0%, #CAAFFF 100%);
background: -o-linear-gradient(top, #E0D0FF 0%, #CAAFFF 100%);
background: -ms-linear-gradient(top, #E0D0FF 0%, #CAAFFF 100%);
background: linear-gradient(to bottom, #E0D0FF 0%, #CAAFFF 100%);
color: #ffffff;
padding: 5px 17px 8px;
height: 80px
/**/
}
/*---------------------------------------------------------------------*/
/*------------------Length of textbox size increase --------------------*/
.textlen{
width: 80%;
}
.textlen2{
width: 50%;
}
.textlen3{
width: 50%;
padding:3px;
}
.inner
{
display: inline-block;
}
#outer
{
width:100%;
text-align: center;
}
/*----------------------------------------------------------------------*/
/*------------------lebel text align------------------------------------*/
.textalign{
padding-left: 40px;
padding-top: 13px;
}
/*----------------------------------------------------------------------*/
/*------------------lebel text align------------------------------------*/
.textalign2{
padding-left: 40px;
padding-top: 0px;
}
/*----------------------------------------------------------------------*/
/*------------------Increasing Button Size -----------------------------*/
.btn-xlarge {
padding: 12px 22px;
font-size: 18px;
line-height: normal;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background-color: dodgerblue;
}
/*----------------------------------------------------------------------*/
/*------------------Increasing Button Size for navigation page -----------------------------*/
.btn-xlarge-departure {
padding: 12px 150px;
width:100%;
font-size: 18px;
line-height: normal;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background-color: dodgerblue;
}
/*----------------------------------------------------------------------*/
/*------------------Increasing Button Size for navigation page -----------------------------*/
.btn-xlarge-Arrival {
padding: 12px 170px;
width:100%;
font-size: 18px;
line-height: normal;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background-color: dodgerblue;
}
/*----------------------------------------------------------------------*/
/*----------------------------------------------------------------------*/
@media (max-width: 768px) {
.btn-responsive {
padding:2px 4px;
font-size:80%;
line-height: 1;
border-radius:3px;
}
}
@media (min-width: 769px) and (max-width: 992px) {
.btn-responsive {
padding:4px 9px;
font-size:90%;
line-height: 1.2;
}
}
/*----------------------------------------------------------------------*/
.card-header{
width:100%;
color:#329cf0;
border-bottom:3px solid #BBB;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
font-family: 'Roboto', sans-serif;
padding:0px;
margin-top:0px;
overflow:hidden;
-webkit-transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-header-blue{
background-color:#2196F3;
color:#FFFFFF;
border-bottom:3px solid #BBB;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
font-family: 'Roboto', sans-serif;
padding:20px;
margin-top:40px;
overflow:hidden;
-webkit-transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-heading {
display: block;
font-size: 24px;
text-align: center;
line-height: 28px;
margin-bottom: 20px;
margin-left:1em;
margin-top: 80px;
border-bottom: 1px #2196F3;
color:#fff;
}
.card-content {
padding: 16px;
border-radius: 0 0 2px 2px;
background-clip: padding-box;
box-sizing: border-box;
}
.card-details {
background-color: #ffffff;
/* just in case there no content*/
box-sizing: content-box
width: 50%;
align-items: center
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.card-body{
margin:0px;
}
.card-size{
width: 50px
}
input[type=text]{
margin-bottom: 10px;
margin-top: 10px
}
.margi{
margin-bottom: 10px;
margin-top: 10px
}
/**
** CSS for ARRIVAL FORM INPUT FIELDS
**/
.form-all{
font-family: sans-serif;
font-size: 16px;
}
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
.label-size{
font-size: 48px
}
/**
** CSS for ARRIVAL FORM INPUT FIELDS
**/
/*
* Arrival Form CSS ENDS here
*/
.user-auth-email {
display: block;
color: #404040;
line-height: 2;
margin-bottom: 10px;
font-size: 14px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin #inputEmail,
.form-signin #inputPassword {
direction: ltr;
height: 44px;
font-size: 16px;
}
.form-signin input[type=email],
.form-signin input[type=password],
.form-signin input[type=text],
.form-signin button {
width: 100%;
display: block;
margin-bottom: 10px;
z-index: 1;
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin .form-control:focus {
border-color: rgb(104, 145, 162);
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162);
}
.btn.btn-signin {
/*background-color: #4d90fe; */
background-color: rgb(104, 145, 162);
/* background-color: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));*/
padding: 0px;
font-weight: 700;
font-size: 14px;
height: 36px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
-o-transition: all 0.218s;
-moz-transition: all 0.218s;
-webkit-transition: all 0.218s;
transition: all 0.218s;
}
.btn.btn-signin:hover,
.btn.btn-signin:active,
.btn.btn-signin:focus {
background-color: rgb(12, 97, 33);
}
.forgot-password {
color: rgb(104, 145, 162);
}
.forgot-password:hover,
.forgot-password:active,
.forgot-password:focus{
color: rgb(12, 97, 33);
}
Comments
Post a Comment