@charset "UTF-8";

#plugin_container {
	width: 370px;
	height: 300px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, sans-serif;
	color: #FFF;
	position: relative;
	background: url("/common/asset/img/htc_hero_wallpaper_02.jpg") 0 50% no-repeat;
	overflow: hidden;
		-moz-border-radius: 5px; 
		-webkit-border-radius: 5px; 
	}	

#plugin_container p {
	margin: 0;
	padding: 0;
	line-height: 1.4;
	}

#left_arrow, #right_arrow {
	position: absolute;
	top: 140px;
	z-index: 88;
	cursor: pointer;
	}

#left_arrow {
	left: 5px;
	}

#right_arrow {
	right: 5px;
	}

#digital_container {
	width: 308px;
	height: 252px;
	background: url("/common/asset/img/background.png") 0 28px no-repeat;
	position: absolute;
	top: 28px;
	left: 31px;
	z-index: 98;
	}


#clock {
	float: left;
	margin-left: 13px;
	}

#hours, #minutes {
	width: 140px;
	height: 140px;
	float: left;
	position: relative;
	}

#minutes {
	margin-left: 3px;
	}

#hours_bg, #minutes_bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
	}

.first_digit {
	width: 56px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 14px;
	z-index: 100;
	}

.second_digit {
	width: 56px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 70px;
	z-index: 100;
	}

.line {
	width: 122px;
	height: 1px;
	background: #efefef;
	position: absolute;
	top: 68px;
	left: 9px;
	z-index: 101;
	font-size: 1px;
	}

#am_pm {
	position: absolute;
	top: 110px;
	left: 91px;
	z-index: 110;
	}

#weather {
	width: 100%;
	height: 145px;
	position: absolute;
	top: 98px;
	left: 0;
	z-index: 105;
	color: #FFF;
	}

#weather #local, #weather .loading {
	float: left;
	margin: 45px 0 0 10px;
	}

.city {
	font-size: 14px;
	}

.temp {
	font-size: 28px;
	padding: 0;
	}

.temp .metric {
	margin-left: -3px;
	}

#weather #temp {
	float: right;
	margin: 45px 10px 0 0;
	text-align: right;
	}

#weather #date {
	font-size: 11px;
	padding-right: 2px;
	}

#forecast_container {
	width: 280px;
	height: 280px;
	background: url("/common/asset/img/background_forecast.png") 0 100% no-repeat;
	position: absolute;
	top: 0;
	left: 430px;
	z-index: 98;
	}

#forecast_container #current {
	width: 100%;
	height: 168px;
	}

#forecast_container .loading {
	margin: 91px 0 0 10px;
	}

#forecast_container #current .temp, #forecast_container #current .high_low {
	width: 82px;
	text-align: center;
	}

#forecast_container #current .temp {
	font-size: 23px;
	margin-top: 74px;
	float: left;
	}

#forecast_container #current .high_low {
	font-size: 12px;
	clear: both;
	}

#forecast_container #current .city, #forecast_container #current .text {
	width: 100%;
	text-align: center;
	}

#forecast_container #current .text {
	margin-top: 4px;
	}

#forecast_container #forecast {
	width: 100%;
	height: 86px;
	list-style: none;
	margin: 0;
	padding: 0;
	}

#forecast_container #forecast li {
	width: 25%;
	height: 100%;
	float: left;
	text-align: center;
	}

#forecast_container #forecast li p {
	width: 100%;
	height: 21px;
	margin: 0;
	padding: 0;
	font-size: 11px;
	line-height: 21px;
	text-align: center;
	}

#forecast_container #forecast li img {
	width: 63px;
	}

#forecast_container #update {
	text-align: center;
	margin-top: 7px;
	font-size: 11px;
	}

#forecast_container #update img {
	margin: -2px 4px 0 0;
	vertical-align: middle;
	cursor: pointer;
	}