@charset "utf-8";

	body
	{
		font-family: Helvetica, Arial, sans-serif;
		background-color: #c5ccd3;
		font-weight: bold;
		font-size: 17px;
		width: 302px;
    margin-left:auto;
    margin-right:auto;
	}

	a
	{
		text-decoration: none;
	}

	.main-txt, .city-btn, #credits { color: #4c566c; }
	.secondary-txt, #credits { font-weight: normal; }
	.min-tmp { color: blue; }
	.max-tmp { color: red; }

	#obs-condition, #obs-extremes, #obs-tmp, #obs-wind, #obs-humidity, #obs-obstime, #obs-rainfall,
	.fcst-extremes, #main-box-header, #main-box-footer, #main-box-footer-extendable, #obs,
	.fcst-weather, #city, .city-btn, .btm-btn, #obs-icon-box, .fcst-weather-icon-box, .fcst-day { float: left; }

	#extend-forecast, #add-city, #current-time { float: right; }

	#main-box-header, #main-box-footer, #main-box-footer-extendable
	{
		width: 302px;
		height: 8px;
	}

	#main-box-header { background: white url(img/box-top.gif) no-repeat scroll center top; }
	#main-box-footer { background: white url(img/box-bottom.gif) no-repeat scroll center bottom; }
	#main-box-footer-extendable { background: white url(img/box-bottom-extd.gif) no-repeat scroll center bottom; }

	#obs, #selected-weather, #credits
	{
		width: 300px;
		background-color: white;
		border: 1px solid #d9d9d9;
		border-top-style: none;
		border-bottom-style: none;
	}

	#credits
	{
		width: 280px;
		height: 103px;
		padding: 10px;
		font-size: 14px;
	}

	#obs
	{
		border-top: 1px solid #d9d9d9;
		padding-top: 1px;
		padding-bottom: 5px;
	}

	#selected-weather { height: 30px; }
	#obs { height: 70px; position:relative; }

	.fcst-weather
	{
		width: 300px;
		height: 40px;
		background-color: white;
		border: 1px solid #d9d9d9;
		border-bottom-style: none;
		padding-top: 5px;
		padding-bottom: 5px;

		position:relative;
	}

	#city
	{
		margin-left: 10px;
		margin-top: -3px;
		width: 128px;
		white-space: nowrap;
		text-overflow:ellipsis;
		overflow:hidden;
	}

	#current-time
	{
		margin-right: 20px;
		font-size: 14px;
	}

	#obs-txt { margin-left: 10px; }

	#obs-icon-box, .fcst-weather-icon-box
	{
		padding: 0 8px 8px;
		text-align: center;
	}

	#obs-icon-box
	{
		width: 48px;
		height: 48px;
		background: white url(img/weather-icon-box.gif) no-repeat scroll center center;
	}

	.obs-icon { margin-top: 10px; }

	#obs-condition
	{
		width: 225px; height: 22px; white-space: nowrap; overflow: hidden;
	}

	#obs-condition-m
	{
		width: 225px; height: 22px; white-space: nowrap; overflow: hidden;
		overflow-x:-webkit-marquee;
		-webkit-marquee-direction: backwards;
		-webkit-marquee-style: alternate;
		-webkit-marquee-speed: normal;
		-webkit-marquee-increment: small;
		-webkit-marquee-repetition: 4;
	}

	#obs-extremes, #obs-tmp, #obs-wind, #obs-humidity, #obs-obstime, #obs-rainfall, .fcst-extremes
	{
		width: 75px;
		font-size: 14px;
	}

	#obs-tmp
	{
		font-size: 17px;
		margin-top: 1px;
	}

	#obs-obstime
	{
		width: 132px;
		margin-top: -12px;
		margin-left: 8px;
	}

	#obs-wind, #obs-humidity, #obs-rainfall { width: 150px; }

	.fcst-weather-icon-box
	{
		width: 33px;
		height: 33px;
		background: white url(img/weather-frc-icon-box.gif) no-repeat scroll center center;
	}

	.fcst-extremes { width: 55px; height: 30px;}

	.fcst-day
	{
		width: 245px;
		color: #4c566c;
		font-weight: normal;

	}

	.fcst-condition
	{
		position:absolute;
		left:105px;
		top:25px;
		width: 190px;
		font-size: 14px;
		color: #4c566c;
		white-space: nowrap;
		overflow:hidden;
	}

	.fcst-condition-m
	{
		position:absolute;
		left:105px;
		top:25px;
		width: 190px;
		font-size: 14px;
		color: #4c566c;
		white-space: nowrap;
		overflow:hidden;
		overflow-x:-webkit-marquee;
		-webkit-marquee-direction: backwards;
		-webkit-marquee-style: alternate;
		-webkit-marquee-speed: normal;
		-webkit-marquee-increment: small;
		-webkit-marquee-repetition: 4;
	}

	.city-btn, .btm-btn
	{
		text-align: center;
		margin-right: 5px;
		margin-bottom: -5px;
		padding-top: 10px;
	}

	.city-btn
	{
		width: 62px;
		height: 33px;
		background: #c5ccd3 url(img/city-btn-box.gif) no-repeat scroll center center;
	}

	.btm-btn
	{
		color: white;
		width: 130px;
		height: 33px;
		background: #c5ccd3 url(img/btm-btn-box.gif) no-repeat scroll center center;
	}

	#add-city { margin-top: 5px; }

	.email
	{
		width: 300px;
		height: 33px;
		text-align: center;
		font-size: 12px;
		margin-top: 10px;
	}

  #OutputCityList select
  {
    width:264px;
    font-family: Helvetica, Arial, sans-serif;
    font-size:17px;
    font-weight:bold;
    margin-top:10px;
    margin-bottom:5px;
    border-width:5px;
    border-style:solid;
    border-color:white;
    color:#4c566c;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
  }