body {
  background: #F7F7F7;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

#video-container {
  width: 280px;
  padding: 8px;
  background: white;
  -webkit-box-shadow: 0 1px 10px #D9D9D9;
  -moz-box-shadow: 0 1px 10px #D9D9D9;
  -ms-box-shadow: 0 1px 10px #D9D9D9;
  -o-box-shadow: 0 1px 10px #D9D9D9;
  box-shadow: 0 1px 10px #D9D9D9;
}
#logo_container img{
	height: 80px;
}
#footer_container{
    width: 100%;
}
#image-url-input{
	display: none;
}
#header{
	margin-top:20px;
}
#footer{
	height: 55px;
	background-color: #333333;
	color: white;
	padding-top: 15px;
	text-align: center;
	font-size: 14px;
}
#id_entry{
	margin-top: 30px;
}
#clock_form{
	width: 275px;
}
#clock_form .text_input{
	width: 248px;
	display: inline;
}
#clock_form [name='note']{
	width: 228px;
}
#clock_form .select_input{
	width: 235px;
	display: inline;
}
#login_link{
	color: white;
}
#clock_in{
	width: 110px;
	height: 70px;
	background-color: #4cad29;
	font-weight: bold;
	font-size: 20px;
	padding: 5px 10px 5px 10px;
}
#clock_out{
	width: 110px;
	height: 70px;
	background-color: #c03939;
	margin-left: 30px;
	font-weight: bold;
	font-size: 18px;
	padding: 5px 10px 5px 10px;
	float: right;
}
#punch_good{
	font-size: 24px;
	color: red;
}
#punch_result label{
	color: red;
	font-size: 20px;
	font-weight: bold;
}