#clockwrap {
	background-color: #07183d;
	border: 1px solid #000;
	padding: 10px;
	margin: 0;
}

#clockwrap a,
#clockwrap a:link,
#clockwrap a:visited {
	color: #f32;
}

#clockwrap a:hover,
#clockwrap a:focus {
	color: #fff;
}

#clockwrap .clockheadline {
	padding-top: 0;
	text-align: center;
	text-shadow: 1px 1px 3px rgba(0, 10, 35);
}

#clockwrap .clockheadline h3 {
	margin: 0;
	padding: 0;
	font-weight: bold;
	color: #fff;
	font-size: 22px;
	line-height: 25px;
}

#clockwrap .clockheadline p {
	color: #ddd;
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 18px;
}

#clockdiv {
	font-family: sans-serif;
	color: #fff;
	display: block;
	font-weight: 100;
	text-align: center;
	font-size: 24px;
	line-height: 26px;
	margin: 10px auto 0 auto;
}

#clockdiv > div {
	padding: 5px 5px 4px 5px;
	border-radius: 3px;
	background: #1a3884;
	display: inline-block;
	border: 1px solid #23438c;
	box-shadow: 1px 1px 5px #081842;
}

#clockdiv div > span {
	padding: 4px 12px 2px 12px;
	border-radius: 3px;
	background: #091d4d;
	display: inline-block;
	border: 1px solid #081842;
}

#clockdiv .smalltext {
	padding-top: 5px;
	font-size: 12px;
	line-height: 14px;
}

#clockwrap #clockinfo {
	text-align: center;
	margin: 0;
	padding: 0;
}

#clockwrap #clockinfo p {
	font-size: 12px;
	line-height: 15px;
	color: #8dafeb;
	margin: 0;
	padding: 10px 0 0 0;
}

#clockwrap .clearfix {
	margin: 0;
	padding: 0;
	clear: both;
}

@media (min-width: 800px) {
  
  #clockwrap .clockheadline {
  	float: left;
  	text-align: left;
  }
  
  #clockdiv {
  	float: right;
  	display: inline-block;
  	margin: 0;
  }
  
  #clockwrap #clockinfo {
  	float: right;
  	text-align: right;
  	margin: 0;
  	padding: 0;
  }
  
  #clockwrap #clockinfo p {
	  padding: 24px 8px 0 0;
  }
  
}

@media (min-width: 1024px) {
  
  #clockwrap {
    padding-left: 15px;
  }

}