@font-face {
	font-family: text_font;
	src: url('../fonts/text_font.ttf'),
		 url('../fonts/text_font.eot'); /* IE9 */
}

.clock{
	/* The .clock div. Created dynamically by jQuery */
	background-color:transparent;
	height:30px;
	width:30px;
	position:relative;
	overflow:hidden;
	float:left;
}

.clock .rotate{
	/* There are two .rotate divs - one for each half of the background */
	position:absolute;
	width:30px;
	height:30px;
	top:0;
	left:0;
}

.rotate.right{
	display:none;
	z-index:11;
}

.clock .bg, .clock .front{
	width:15px; /* add */
	height:30px;
	background-color:#0A3069;
	position:absolute;
	top:0;
}

.clock .display {
    color: #F5F5F5;
    font-size: 11px;
    left: 0;
    position: absolute;
    text-align: center;
    text-shadow: 4px 4px 5px #333333;
    top: 4px;
    width: 30px;
    z-index: 20;
}

/* The left part of the background: */

.clock .bg.left{ left:0; }

/* Individual styles for each color: */
.orange .bg.left{ background:url(img/bg_orange.png) no-repeat left top; }
.green .bg.left{ background:url(img/bg_green.png) no-repeat left top; }
.blue .bg.left{	background:url(img/bg_blue.png) no-repeat left top; }

/* The right part of the background: */
.clock .bg.right{ left:15px; }

.orange .bg.right{ background:url(img/bg_orange.png) no-repeat right top; }
.green .bg.right{ background:url(img/bg_green.png) no-repeat right top; }
.blue .bg.right{ background:url(img/bg_blue.png) no-repeat right top; }

.clock .front.left{
	left:0;
	z-index:10;
}

.am_pm {
    background: url("img/am_pm.png") no-repeat scroll right top transparent;
    float: right;
    height: 30px;
    position: relative;
    width: 30px;
}

.am_pm span {
    display: block;
    color: #F5F5F5;
    font-size: 11px;
    left: 0;
    position: absolute;
    text-align: center;
    text-shadow: 4px 4px 5px #333333;
    top: 4px;
    width: 30px;
    z-index: 20;
}

body.loginpage #fancyClock {
	right:inherit;
    background: none repeat scroll 0 0 transparent;
    border-radius: 5px 5px 5px 5px;
    float: left;
    padding: 2px;
}

#fancyClock {
    background: none repeat scroll 0 0 transparent;
    border-radius: 5px;
    float: left;
}

#date {
    color: #FAFAFA;
    float: left;
    font-size: 13px;
    padding: 4px 5px;
    text-align: center;
}

@media screen and (max-width: 480px) {
	#date {
		font-size: 12px;
	}
}
@media screen and (max-width: 360px) {
	#date {
		float: none;
		font-size: 12px;
	}
	#fancyClock {
		float: none;
		display: inline-block;
	}	
}
@media screen and (max-width: 320px) {
	#date {
		font-size: 10px;
		float: none;
	}
	#fancyClock {
		float: none;
		display: inline-block;
	}	
}
@media screen and (max-width: 240px) {
	#date {
		font-size: 10px;
		float: none;
	}
	#fancyClock {
		float: none;
		display: inline-block;
	}	
}