style.css

@import url('https://fonts.googleapis.com/css?family=Bangers');
@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
@import url('https://fonts.googleapis.com/css?family=Raleway:200');

* {
	margin: 0;
	padding: 0;
	border: none;
}

body {
	background: #f9f9f9;
	font-family: 'Bangers', cursive;
}

#container {
	width: 960px;
	margin: 0 auto;
}

.top {
	width: 100%;
	height: 50px;
	background: #fff;
	border-bottom: 1px solid #d4d8d9;
}

.top #container h1 {
	text-transform: uppercase;
	color: #00aeef;
	text-align: center;
	font-weight: 600;
	line-height: 50px;
	letter-spacing: 2px;
}

.top #container h1 span {
	font-size: 12px;
	color: #d4d8d9;
	text-transform: none;
	font-family: 'Indie Flower', cursive;
	letter-spacing: 1px;
}

p.total {
    display: inline-block;
    padding: 5px;
    font-family: 'Raleway', sans-serif;
}

input.free{
    background: #fff;
    outline: none;
    border: 1px solid #ccc;
    padding: 5px 10px;
    margin-top: 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    display: block;
}

 input[type=time]::-webkit-clear-button {
   -webkit-appearance: none;
   -moz-appearance: none;
   -o-appearance: none;
   -ms-appearance:none;
   appearance: none;
   margin: -10px; 
 }

 .without_ampm::-webkit-datetime-edit-ampm-field {
   display: none;
 }

input.time {
    background: #ccc;
    border: 1px solid #ccc;
    color: #000;
    padding: 5px 10px;
    outline: none;
    margin-top: 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.controlBtn {
	outline: none;
	padding: 10px;
	border-radius: 10px;
	background-color: green;
	color: white;
	font-family: arial;
}

.controlBtn.started {
	background-color: red;
}

.timeBtn {
	outline: none;
	padding: 10px;
	border-radius: 10px;
	background-color: yellow;
}

.timeBtn.hide {
	display: none;
}