/*
 Document   : skin
 Created on : Oct 9, 2015, 6:18:52 PM
 Author     : Harsh
 Description:
 Purpose of the stylesheet follows.
 */
ul, ol {
	padding: 0px;
}
.heading h3 {
	display: block;
	padding-bottom: 25px;
	background: url(../images/line.png) no-repeat bottom;
	background-size: 40%;
	text-align: center;
}

img {
	width: 100%;
	margin-top: 3px;
}
.video {
	background: #D8DBF0;
	padding: 50px 0px 70px;
}

.btn {
	font-size: 15px;
}
.banner {
	background: url(../images/banner-2.jpg) no-repeat;
	background-size: 100%;
	padding: 40px 0px;
	text-align: center;
	color: #ffffff;
	background-attachment: fixed;
	background-size: cover;
}
.banner h1 {
	text-transform: capitalize;
	font-family: 'Roboto', sans-serif;
	padding-bottom: 20px;
}
.banner form {
	margin: 30px auto 40px;
	padding: 25px 0px;
	background: rgba(53, 84, 105, 0.46);
	border-radius: 10px;
}
.banner form h2 {
	display: inline;
	font-size: 25.6px;
	font-family: 'Roboto', sans-serif;
}
.navbar-nav > li > a {
	font-size: 13.5px;
	/*padding: 23px 20px;*/
	padding-bottom: 15px;
	color: #131313;
}
.head-main .head-left h4 a::before {
/*    content: "\f095";*/
    font-family: fontawesome;
    left: 0;
 
    position: absolute;
}

.head-main .head-left h4 a {
	padding-top: 10px;
	position:relative;
	display: inline-block;
	font-size: 16px;
	color: #131313;
	/*text-shadow: 0 0 1px #123569, 0 0 1px #123569;*/
	font-weight: bolder;
	/*padding-left:25px;*/
}

.banner form h2 span {
	padding: 0px 5px;
}
.banner input {
	font-size: 14px;
	border: 0px;
}
.banner form input[type="text"] {
	width: 40%;
	padding-left: 40px;
}
.banner form span.input-text {
	position: relative;
}
.banner form select {
	position: relative;
	padding-left: 40px;
}
.banner form span.form-place {
	position: relative;
}
.banner form span.input-text:before, .banner form span.form-place:before {
	position: absolute;
	color: rgba(0, 0, 0, 0.4);
	content: "\f002";
	font-family: FontAwesome;
	top: 7px;
	font-size: 19px;
	left: 18px;
	z-index: 2;
}

.banner form span.form-place:before {
	content: "\f1d8";
}

.banner .fa-input {
	font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	background: rgb(111, 196, 255);
	padding: 1px 30px;
}
footer ul {
	list-style: none;
	padding: 0px;
}
.trymytutor-subject-list {
	background: #ededeb;
}
.services {
	padding-top: 30px;
}
.services strong {
	display: block;
	padding-bottom: 10px;
}
.services p {
	text-indent: 10px;
}
.how-it-work {
	text-align: center;
	padding: 60px 0px;
	background: #f0f0f0;
	box-shadow: 1px 1px 5px 5px rgba(0, 0, 0, 0.3);
}
h2.tmt-heading {
	color: #131313;
	border-bottom: 1px solid #000;
	padding: 7px 0px;
	margin-bottom: 10px;
	display: inline-block;
	font-weight: bold;
	font-size: 25.6px;
	font-family: 'Roboto', sans-serif;
}
.how-it-work h3 {
	font-size: 20px;
	color: #2B2F3A;
	text-transform: uppercase;
}
.how-it-work i {
	font-size: 98px;
	padding: 25px 0px;
	/*display: block;*/
}
.how-it-work h3 span {
	padding: 3px 10px;
	background: #6EC3FF;
	color: #FFFFFF;
	margin-left: 3px;
	border-radius: 50px;
}
.how-it-work .tmt-step p {
	padding: 3px 30px;
}
.why-trymytutor {
	text-align: center;
	padding: 50px 0px;
}
.hvr-float-shadow {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}
.hvr-float-shadow:before {
	pointer-events: none;
	position: absolute;
	z-index: -1;
	content: '';
	top: 100%;
	left: 5%;
	height: 10px;
	width: 90%;
	opacity: 0;
	background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
	/* W3C */
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform, opacity;
	transition-property: transform, opacity;
}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
	-webkit-transform: translateY(-5px);
	transform: translateY(-5px);
	/* move the element up by 5px */
}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
	opacity: 1;
	-webkit-transform: translateY(5px);
	transform: translateY(5px);
	/* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

.why-trymytutor h2 {
	color: #131313;
	border-bottom: 1px solid #000;
	padding: 7px 0px;
	margin-bottom: 10px;
	display: inline-block;
	font-weight: bold;
	font-size: 25.6px;
	font-family: 'Roboto', sans-serif;
}
.why-trymytutor .icon i {
	font-size: 98px;
	padding: 25px 0px;
	/*display: block;*/
}
.why-trymytutor .icon i.fa-users {
	color: #6EC3FF;
}
.why-trymytutor .icon i.fa-check-circle-o {
	color: #1fa67a;
}
.why-trymytutor .icon i.fa-leaf {
	color: #7C1C56;
}
.why-trymytutor .icon i.fa-laptop {
	color: #007DBC;
}
footer {
	background: #313233;
	text-align: left;
	color: #FFFFFF;
	padding: 50px 0px 0px;
}
footer h3 {
	font-size: 22px;
	color: #007DBC;
	font-weight: bold;
	text-shadow: 0 0 1px #FFF, 0 0 1px #FFF;
}
footer .item p {
	padding: 20px 30px;
	padding-left: 0px;
}
footer .item img {
	width: 60%;
}
footer ul li {

}
footer ul li a {
	color: #FFFFFF;
	font-size: 18px;
}
footer .footer-copyright {
	margin-top: 100px;
	text-align: center;
	background: #1F1F1F;
	padding: 40px 0px 20px;
}
.hvr-skew {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}
.hvr-skew:hover, .hvr-skew:focus, .hvr-skew:active {
	-webkit-transform: skew(-10deg);
	transform: skew(-10deg);
}

/*archive page*/

#contactable {
	background-color: #4c90fe;
	border: 1px solid #4c90fe;
	color: #ffffff;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	height: 40px;
	margin-right: -5px;
	overflow: hidden;
	padding: 10px;
	position: fixed;
	right: 0;
	top: 245px;
	width: 150px;
	z-index: 100000;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
#contactable:hover {
	background-color: #ffffff;
	border: 1px solid #4c90fe;
	color: #4c90fe;
}
.banner.archive {
	padding: 0px;
}
.banner.archive form input[type="text"] {
	width: 76%;
}
.banner.archive form span.input-text::before {
	top: -4px;
}
.header-layout-2 {
	/*margin-right: 150px;*/
	border-bottom: 1px solid #012345;
	padding-bottom:15px;
	padding-top:10px;
}
.tutorlist {
	padding: 60px 0px;
}
.tutorlist img {
	border-radius: 6px;
}
.tutorlist span {
	display: block;
	font-size: 16px;
	padding: 5px 0px;
}
.tutorlist span i {
	width: 25px;
}
.tutorlist span i.fa-star {
	color: red;
}
.tutorlist p {
	padding-right: 30px;
}
.tutorlist .tutor {
	padding: 15px 15px;
	border: 1px solid #012345;
	box-shadow: 1px 1px 15px 2px;
	margin: 20px 0px;
}
.tutor-subject {
	border-top: 1px solid #012345;
	margin-top: 20px;
	padding: 10px 0px;
	text-align: center;
}
.tutor-subject span {
	display: block;
}
.tutor-subject .dtl-btn {
	text-transform: uppercase;
	padding: 8px 15px;
	border: 2px solid #337ab7;
	margin: 5px 10px;
	color: #337ab7;
	font-weight: bold;
	display: inline-block;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
.tutor-subject .dtl-btn:hover {
	color: #fff;
	background: #337ab7;
	text-decoration: none;
}
.tutor-subject h5 {
	text-transform: uppercase;
	color: #012345;
	font-weight: bold;
}

.no-of-student {
	margin: 50px;
	padding: 30px;
	font-size: 22px;
}
strong.breadcrum {
	display: block;
	padding: 0px 0px 15px;
}
.request-demo-class {
	background: #337ab7;
	padding: 7px 10px;
	border: 2px solid #337ab7;
	 border-radius: 5px;
	color: #ffffff;
	font-weight:800;
	font-size:18px;
	text-transform:uppercase;
	margin:15px 0px;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
.request-demo-class:hover{
	background: transparent;
	color:#337ab7;
}
/*
 profile page*/
.profile-img {
	background: #fff none repeat scroll 0 0;
	margin: -50px 0 0;
	padding: 5px;
}
.tutor-info h3 {

	padding: 10px 0px;
	text-transform: uppercase;
}
.tutor-info span {
	display: block;
	padding: 5px 0px;
}
.reating {
	padding: 10px;
}
.reating  i {
	color: yellow;
}
.total-student h4 {
	padding: 50px 0px;
	font-size: 24px;
}
.total-student span{
	display:block;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  
}

#header h1 {
   display: block;
    font-size: 50px;
    margin: 195px auto 0 223px;
}

h1>small {
  color: #aaaaaa;
  font-size: .5em;
}

#header {
  box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
  margin:   25px auto 80px;
  height:   190px;
  position: relative;

}

#figure.profile-banner {
  left:     0;
  overflow: hidden;
  position: absolute;
  top:      0;
  z-index:  1;
}

figure.profile-picture {
  background-position: center center;
  background-size: cover;
  border: 5px #efefef solid;
  border-radius: 50%;
  bottom: -50px;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2), 1px 1px 4px rgba(0,0,0,0.3);
  height: 180px;
  left: 100px;
  position: absolute;
  width: 180px;
  z-index: 3;
}

div.profile-stats {
  bottom: 0;
  border-top: 1px solid rgba(0,0,0,0.5);
  left: 0;
  padding: 15px 15px 15px 350px;
  position: absolute;
  right: 0;
  z-index: 2;
  
  /* Generated Gradient */
  background: -moz-linear-gradient(top,  rgba(255,255,255,0.5) 0%, rgba(0,0,0,0.51) 3%, rgba(0,0,0,0.75) 61%, rgba(0,0,0,0.5) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(3%,rgba(0,0,0,0.51)), color-stop(61%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,0.5)));
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(0,0,0,0.51) 3%,rgba(0,0,0,0.75) 61%,rgba(0,0,0,0.5) 100%);
 background: -o-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(0,0,0,0.51) 3%,rgba(0,0,0,0.75) 61%,rgba(0,0,0,0.5) 100%);
  background: -ms-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(0,0,0,0.51) 3%,rgba(0,0,0,0.75) 61%,rgba(0,0,0,0.5) 100%);
  background: linear-gradient(to bottom,  rgba(255,255,255,0.5) 0%,rgba(0,0,0,0.51) 3%,rgba(0,0,0,0.75) 61%,rgba(0,0,0,0.5) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80000000',GradientType=0 );

}

div.profile-stats ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

div.profile-stats ul li {
  color: #efefef;
  display: block;
  float: left;
  font-size: 24px;
  font-weight: bold;
  margin-right: 50px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7)
}

div.profile-stats li span {
  display: block;
  font-size: 16px;
  font-weight: normal;
}

div.profile-stats a.follow {
  display: block;
  float: right;color: #ffffff;
  margin-top: 5px;
  text-decoration: none;
  
  /* This is a copy and paste from Bootstrap */
  background-color: #49afcd;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #49afcd;
  background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
  background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
  background-repeat: repeat-x;
  border-color: #2f96b4 #2f96b4 #1f6377;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

div.profile-stats a.follow.followed {
  
  /* Once again copied from Boostrap */
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #5bb75b;
  background-image: -moz-linear-gradient(top, #62c462, #51a351);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
  background-image: -webkit-linear-gradient(top, #62c462, #51a351);
  background-image: -o-linear-gradient(top, #62c462, #51a351);
  background-image: linear-gradient(to bottom, #62c462, #51a351);
  background-repeat: repeat-x;
  border-color: #51a351 #51a351 #387038;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

#header>h1 {
  bottom: -50px;
  color: #354B63;
  font-size: 40px;
  left: 350px;
  position: absolute;
  z-index: 5;
}


.card .info dt::after {
    background-color: #e0e0e0;
    content: "";
    display: block;
    height: 0.5rem;
    width: 100%;
}
.card .info dt {
  margin: 0;
  padding: 1rem 0;
}
.card .info dt:first-child {
  padding-top: 0;
}
.card .info dt:after {
  width: 100%;
  background-color: #e0e0e0;
  height: 0.5rem;
  content: "";
  display: block;
}
.card .info dd {
  width: 100%;
  height: 0.5rem;
  position: relative;
  right: 0;
  margin: -1.5rem 0 0;
  /* background-color: nth($colors, 1); */
  overflow: hidden;
  text-indent: -1000px;
}
.card .info dd:nth-child(2) {
  background-color: #E89B35;
}
.card .info dd:nth-child(4) {
  background-color: #36CBE9;
}
.card .info dd:nth-child(6) {
  background-color: #A137E7;
}
.card .info dd:nth-child(8) {
  background-color: #E83568;
}
.card .info dd:nth-child(10) {
  background-color: #012345;
}
.card .info dd:nth-child(12) {
  background-color: #E83568;
}
.profile-info{
	
background: rgba(147,175,219,0.53);
background: -moz-linear-gradient(top, rgba(147,175,219,0.53) 0%, rgba(158,183,230,0.53) 6%, rgba(168,189,240,0.51) 11%, rgba(199,212,237,0.31) 51%, rgba(195,231,232,0.16) 83%, rgba(228,235,239,0.09) 98%, rgba(232,235,240,0.09) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(147,175,219,0.53)), color-stop(6%, rgba(158,183,230,0.53)), color-stop(11%, rgba(168,189,240,0.51)), color-stop(51%, rgba(199,212,237,0.31)), color-stop(83%, rgba(195,231,232,0.16)), color-stop(98%, rgba(228,235,239,0.09)), color-stop(100%, rgba(232,235,240,0.09)));
background: -webkit-linear-gradient(top, rgba(147,175,219,0.53) 0%, rgba(158,183,230,0.53) 6%, rgba(168,189,240,0.51) 11%, rgba(199,212,237,0.31) 51%, rgba(195,231,232,0.16) 83%, rgba(228,235,239,0.09) 98%, rgba(232,235,240,0.09) 100%);
background: -o-linear-gradient(top, rgba(147,175,219,0.53) 0%, rgba(158,183,230,0.53) 6%, rgba(168,189,240,0.51) 11%, rgba(199,212,237,0.31) 51%, rgba(195,231,232,0.16) 83%, rgba(228,235,239,0.09) 98%, rgba(232,235,240,0.09) 100%);
background: -ms-linear-gradient(top, rgba(147,175,219,0.53) 0%, rgba(158,183,230,0.53) 6%, rgba(168,189,240,0.51) 11%, rgba(199,212,237,0.31) 51%, rgba(195,231,232,0.16) 83%, rgba(228,235,239,0.09) 98%, rgba(232,235,240,0.09) 100%);
background: linear-gradient(to bottom, rgba(147,175,219,0.53) 0%, rgba(158,183,230,0.53) 6%, rgba(168,189,240,0.51) 11%, rgba(199,212,237,0.31) 51%, rgba(195,231,232,0.16) 83%, rgba(228,235,239,0.09) 98%, rgba(232,235,240,0.09) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93afdb', endColorstr='#e8ebf0', GradientType=0 );

	padding:20px 30px;
	margin-bottom: 30px;

}
.profile-info h3{
	color: #012345;
    font-weight: 800;
    /*text-shadow: -2px 2px 6px #012345;*/
    text-transform: uppercase;
}
.profile-info p{
	 font-size: 18px;
    text-align: justify;
	}
.profile-info ul li{
	margin:0px 0px 5px 20px;
}
.profile-info ul.area, .profile-info ul.subject{
	height: 100px;
	overflow: auto;
}
.comment-section{
	margin-top:20px;
	margin-bottom:20px;	
}
.usercomment textarea{
	 border: 1px solid #012345;
    height: 120px;
    padding: 20px;
    resize: none;
    width: 100%;
    margin:20px 0px;
}
.userimage img{
	border-radius: 60px;
	max-width: 100px;
}
.profile-inormation-page{
	padding-top:30px;
}
/* audio */




/** audio player styles **/
.audio-player, .audio-player div, .audio-player h2, .audio-player a, .audio-player span, .audio-player button {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

div.audio-player {
  position: relative;
  width: 250px;
  height: 70px;
  margin: 0 auto;
 
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.audio-player h2 {
  position: absolute;
  top: 7px;
  left: 10px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #ececec;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

/* play/pause control */
.mejs-controls .mejs-button button {
  cursor: pointer;
  display: block;
  position: absolute;
  text-indent: -9999px;
}

.mejs-controls .mejs-play button, .mejs-controls .mejs-pause button {
  width: 34px;
  height: 34px;
  top: 32px;
  left: 7px;
  background: transparent url('playpause.png') 0 0 no-repeat;
}
.mejs-controls .mejs-pause button { background-position: 0 -35px; }
 
 
/* mute/unmute control */
.mejs-controls .mejs-mute button, .mejs-controls .mejs-unmute button {
  width: 18px;
  height: 19px;
  top: 9px;
  right: 142px;
  background: transparent url('audio.png') 0 0;
}
.mejs-controls .mejs-unmute button { background-position: 0 -19px; }


/* volume scrubber bar */
.mejs-controls div.mejs-horizontal-volume-slider {
  position: absolute;
  top: 13px;
  right: 15px;
  cursor: pointer;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
  width: 120px;
  height: 11px;
  background: #212227;
  -webkit-box-shadow: inset 0px 1px 0px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.25);
  -moz-box-shadow: inset 0px 1px 0px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.25);
  box-shadow: inset 0px 1px 0px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.25);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
  position: absolute;
  width: 0;
  height: 9px;
  top: 1px;
  left: 1px;
  background: #4C90FE;
  background: -webkit-linear-gradient(top, #4C90FE 0%, #D7E0F7 100%);
  background: -moz-linear-gradient(top, #4C90FE 0%, #D7E0F7 100%);
  background: -o-linear-gradient(top, #4C90FE 0%, #D7E0F7 100%);
  background: -ms-linear-gradient(top, #4C90FE 0%, #D7E0F7 100%);
  background: linear-gradient(top, #4C90FE 0%, #D7E0F7 100%);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}


/* time scrubber bar */
.mejs-controls div.mejs-time-rail { width: 380px; }
 
.mejs-controls .mejs-time-rail span {
  position: absolute;
  display: block;
  width: 180px;
  height: 12px;
  top: 40px;
  left: 55px;
  cursor: pointer;
  -webkit-border-radius: 0px 0px 2px 2px;
  -moz-border-radius: 0px 0px 2px 2px;
  border-radius: 0px 0px 2px 2px;
}
 
.mejs-controls .mejs-time-rail .mejs-time-total { 
  background: #565860; 
  width: 180px !important; /* fixes display bug using jQuery 1.8+ */
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
  top: 0;
  left: 0;
  width: 0;
  background: #7b7d82;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
  top: 0;
  left: 0;
  width: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background: #4C90FE;
  background: -webkit-linear-gradient(top, #4C90FE 0%, #D7E0F7 100%);
  background: -moz-linear-gradient(top, #4C90FE 0%, #D7E0F7 100%);
  background: -o-linear-gradient(top, #4C90FE 0%, #D7E0F7 100%);
  background: -ms-linear-gradient(top, #4C90FE 0%, #D7E0F7 100%);
  background: linear-gradient(top, #4C90FE 0%, #D7E0F7 100%);
}

/* metallic sliders */
.mejs-controls .mejs-time-rail .mejs-time-handle {
  position: absolute;
  display: block;
  width: 20px;
  height: 22px;
  top: -6px;
  background: url('handle-lg.png') no-repeat;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
  position: absolute;
  display: block;
  width: 12px;
  height: 14px;
  top: -1px;
  background: url('handle-sm.png') no-repeat;
}


/* time progress tooltip */
.mejs-controls .mejs-time-rail .mejs-time-float {
  position: absolute;
  display: none;
  width: 33px;
  height: 23px;
  top: -26px;
  margin-left: -17px;
  z-index: 9999;
  background: url('time-box.png');
}
 
.mejs-controls .mejs-time-rail .mejs-time-float-current {
  width: 33px;
  display: block;
  left: 0;
  top: 4px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  color: #666;
  text-align: center;
  z-index: 9999;
}