* { margin:0; padding:0;}
html, body {width:100%; height:100px; background:#edeff0}


header { width:100%; height:80px; background:#2d3b40;text-align:center;position:relative;}

#upload-btn {
	float:right;
	width:85px;
	height:40px;
	background:#45b4e4;
	border-radius:30px;	
	color:white;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	line-height:40px;
	text-align:center;	
	margin:20px 50px 0 0;
}

#profile-pic {
	float:right;
	width:40px;
	height:40px;
	background:white;
	border-radius:40px;
	margin:20px 50px 0 0;
}
#title {
	width:100%;
	height:52px;
	background-color:#fff;
	clear:both;	
}

#vid-container {
	width:100%;
	height:480px;
	background-color:#1d2123;	
}
#container {
	width:853px;
	height:480px;
	position:relative;
	margin:0 auto;	
}



#vidlink {
  display: block;
  font-size: 14px;
  width:540px;
  padding: 10px 8px 10px 8px;
  border-radius: 5px;
  border: none;
  background:#1e2a2f;
  color:white;
  float:left;
  margin:20px 0 0 300px;
  box-sizing:border-box;
}

#vidlink {
  opacity: 0.5;
}



#vidlink[type="text"]:focus,
#vidlink[type="password"]:focus {
  box-shadow: none;
  outline: none;
}

  #pro {
      width: 785px;
	  float:left;
	  height:34px;
    }
    #ytplayer {
      float:left;
    }
    #like ,#plyBtn {
	  width:34px;
	  height:34px;
	  float:left;
	  background:#45b3e4;
	  border:none;
	  color:white;	
    }
    #time {
     float:left;
	 list-style-type:none;
    }
	
	.timepoint {
		float:left;
		padding:10px 10px;
		box-sizing:border-box;
	}	

    .timepoint input{
      	width: 100%;
  		height: 25px;
  		font-size: 16px;
  		transition: 0.6s;
  		border: none;
  		border-bottom: 1px solid #CCC;
  		background-color: transparent;
		}
	.timepoint input:focus {
    outline: none;
    border-bottom: 1px solid #28a2a2;
  }
	

    .timepoint p {
      color:#a2adb2;
	  font-size:12px;
	  
    }
    
progress {
	background-color:white;	
}

progress::-webkit-progress-bar-value {
	background:yellow !important;	
}