*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

::selection {
	background: transparent; 
}

::-moz-selection {
	background: transparent; 
}

body {
	margin: 0px;
}
img {
	border: none;
}
	
.dropdownlist {
    /* Size & position */
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 3px 6px 4px 6px;

    /* Styles */
    background: transparent;
    border-radius: 0px;
    box-shadow: 0 0px 0 rgba(0,0,0,0.2);
    cursor: pointer;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
	
	color: #FFFFFF;
	font-family: Verdana, 新細明體;
	text-shadow: 1px 2px 1px rgba(26, 26, 26, 0.75);
}
.dropdownlist.widget1 { font-size: 14px; }
.dropdownlist.widget2 { font-size: 13px; }
.dropdownlist.widget3 { font-size: 14px; }
.dropdownlist.widget4 { font-size: 22px; }
.location {
	display: block;
	white-space: nowrap;
    text-overflow: ellipsis;
	overflow: hidden;
    padding-bottom: 3px;
}
.location.widget1 { width: 126px; }
.location.widget2 { width: 216px; }
.location.widget3 { width: 126px; }
.location.widget4 { width: 266px; }

.dropdownlist:after { /* Little search */
	content: "";
	width: 21px;
	height: 20px;
	background: url(../images/widget/search.png) no-repeat;
	right: 2px;
	position: absolute;
	display: inline-block;
}
.dropdownlist.widget1:after { top: 8px; }
.dropdownlist.widget2:after { top: 3px; }
.dropdownlist.widget3:after { top: 8px; }
.dropdownlist.widget4:after { top: 14px; }

.dropdownlist .dropdown {
    /* Size & position */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    /* Styles */
    background: #EEEEEE;
    border-radius: 0px;
    border: 1px solid rgba(0,0,0,0.2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* Hiding */
    max-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
	
	font-size: 12px;
}

.dropdownlist .dropdown li {
    padding: 0 2px ;
}

.dropdownlist .dropdown li a {
    display: block;
    text-decoration: none;
    color: #555555;
    padding: 4px 4px;
    /*transition: all 0.3s ease-out;*/
    border-bottom: 1px solid #e0e0e0;
	text-shadow: none;
}

.dropdownlist .dropdown li:last-of-type a {
    border: none;
}

.dropdownlist .dropdown li:hover a { /* Hover state */
    color: #FFFFFF;
}
.dropdownlist .dropdown.color1 li:hover { background-color: #f49422; }
.dropdownlist .dropdown.color1 li:hover a { background-color: #f49422; border-bottom: 1px solid #f49422; }
.dropdownlist .dropdown.color2 li:hover { background-color: #2c7dbb; }
.dropdownlist .dropdown.color2 li:hover a { background-color: #2c7dbb; border-bottom: 1px solid #2c7dbb; }
.dropdownlist .dropdown.color3 li:hover { background-color: #00c2a5; }
.dropdownlist .dropdown.color3 li:hover a { background-color: #00c2a5; border-bottom: 1px solid #00c2a5; }

.dropdownlist.active { /* Active state */
    border-radius: 0px;
    /*background: #4cbeff;*/
    background: transparent;
    box-shadow: none;
    border-bottom: none;
    color: #ffffff;
}

.dropdownlist.active:after {
    border-color: #82d1ff transparent;
}

.dropdownlist.active .dropdown {
    border-bottom: 1px solid rgba(0,0,0,0.2);
}
.dropdownlist.active .dropdown.widget1 { max-height: 63px; }
.dropdownlist.active .dropdown.widget2 { max-height: 104px; }
.dropdownlist.active .dropdown.widget3 { max-height: 143px; }
.dropdownlist.active .dropdown.widget4 { max-height: 163px; }

#widget {
						/*margin-left: 60px;*/
	position: absolute;
	/*width: 100%;*/
	display: none;
}
#widget.widget1 { min-width: 160px; height: 90px; }
#widget.widget2 { min-width: 250px; height: 130px; }
#widget.widget3 { min-width: 160px; height: 170px; }
#widget.widget4 { min-width: 300px; height: 200px; }
#widget.color1 { background-color: #f28300; } /* Orange */
#widget.color2 { background-color: #0866b0; } /* Blue */
#widget.color3 { background-color: #2aa48b; } /* Green */
.gradient_mask {
	position: absolute;
	z-index: 0;
	width: 100%;
	height: 50px;
	background: url(../images/widget/widget_white_bg.png) repeat-x;
}
.footer {
	position: absolute;
	z-index: 0;
	width: 250px;
	height: 40px;
	bottom: 0px;
	background: url(../images/widget/footer.png) no-repeat;
}
.selection_area {
	position: absolute;
	z-index: 4;
	width: 100%;
}
.wx_content {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: transparent;
}
.wx_content>table {
	width: 100%;
	color: #FFFFFF;
	font-family: Verdana, 新細明體;
	text-shadow: 1px 2px 1px rgba(26, 26, 26, 0.75);
}
.wx_content.widget1>table { margin-top: 21px; }
.wx_content.widget2>table { margin-top: 29px; }
.wx_content.widget3>table { margin-top: 21px; }
.wx_content.widget4>table { margin-top: 29px; }
.wx_content table td {
	padding: 0px 4px;
}
.wwis_link {
	display: block;
    position: absolute;
    z-index: 2;
    left: 7px;
    bottom: 13px;
    font-family: Verdana, 新細明體;
    color: #FFF;
    font-size: 11px;
    letter-spacing: -0.5px;
    text-decoration: none;
}
.wwis_link:focus, .wwis_link:hover {
	text-decoration: underline;
}
.wmo_logo {
	position: absolute;
    z-index: 2;
    right: 2px;
    bottom: 0px;
    width: 20px;
    height: 30px;
    display: block;
}
	
.block1 {
	float: left;
}
.block1.widget1 { width: 82px; height: 64px; margin-top: 2px; }
.block1.widget2 { width: 96px; height: 64px; margin-top: 1px; }
.block1.widget3 { width: 96px; height: 56px; margin-top: 5px; }
.block1.widget4 { width: 186px; height: 56px; margin-top: 6px; }
.block1 table {
	width: 100%;
	height: 100%;
}
.block1 table td {
	font-family: Verdana, 新細明體;
	padding: 0px;
	margin: 0px;
}
.curr_temp { display: block; }
.curr_temp.widget1 { font-size: 18px; }
.curr_temp.widget2 { font-size: 21px; }
.curr_temp.widget3 { font-size: 28px; width: 148px; }
.curr_temp.widget4 { font-size: 32px; width: 186px; }

.curr_temp.widget1>.temp_unit { font-size: 16px; }
.curr_temp.widget2>.temp_unit { font-size: 18px; }

.curr_date.widget1 { font-size: 10px; }
.curr_date.widget2 { font-size: 12px; }
.curr_date.widget3 { font-size: 10px; }
.curr_date.widget4 { font-size: 12px; }

.curr_date {
	font-style: italic;
}

.other_temp { display: block; }
.other_temp.widget2 { font-size: 12px; }
.other_temp.widget4 { font-size: 16px; }

.block2 {
	float: left;
	margin-top: 2px;
}
.block2.widget1 { width: 64px; height: 64px; }
.block2.widget2 { width: 64px; height: 64px; margin-left: -2px; }
.block2.widget3 { width: 148px; height: 86px; /*padding-top: 0px;*/ padding-top: 12px; text-align: center; }
.block2.widget4 { width: 90px; height: 90px; /*margin-top: 0px;*/ margin-top: 6px; text-align: center; }
.curr_wxicon { /*width: 66px;*/ width: 74px; }
.block2.widget3>.curr_wxicon { /*width: 88px;*/ width: 80px; }
.block2.widget4>.curr_wxicon { /*width: 90px;*/ width: 80px; }
.other_block {
	float: left;
	width: 56px;
	text-align: center;
	margin: -5px 11px;
}
.other_block.widget4 {
	width: 95px;
	/*margin-top: -6px;*/
	margin-top: -18px;
}
.clear {
	clear: both;
}

.other_wxicon {
	vertical-align: bottom;
}
.other_wxicon.widget2 { /*width: 35px;*/ width: 45px; }
.other_wxicon.widget4 { /*width: 44px;*/ width: 62px; }
.day_name {
	font-family: Verdana, 新細明體;
    color: #FFF;
    padding: 1px 0px;
    background-color: #2a425a;
    border-radius: 12px;
	margin: 2px auto;
}
.day_name.widget2 { width: 42px; font-size: 10px; }
.day_name.widget4 { width: 48px; font-size: 12px; }

.search_box {
	display: block;
	width: 230px;
	height: 25px;
	background-color: #FFF;
	float: left;
}
.btn_close {
	display: block;
	width: 20px;
	height: 25px;
	float: right;
	background-color: #FFF;
}
.search_area {
	position: absolute;
	width: 250px;
	height: 130px;
	z-index: 6;
	background-color: rgba(255, 255, 255, 0.75);
	display: none;
}
.searchbox {
	width: 99%;
	height: 22px;
	margin: 2px 0px 1px 2px;
	font-size: 12px;
	padding-left: 6px;
	color: #909090;
	background-color: #f0f2f5;
	border: 1px solid #429db6;
	border-right: 0px solid #429db6;
}
.sbox_x {
	display: block;
	width: 95%;
	height: 22px;
	cursor: pointer;
	background: #f0f2f5 url(../images/widget/delete.png) 3px 4px no-repeat;
	border: 1px solid #429db6;
	border-left: 0px solid #429db6;
	margin-top: 2px;
}

.results {
	border: none;
	position: absolute;
	right: 0px;
	top: 24px;
	z-index: 1;
	width: 250px;
	max-height: 106px;
	overflow-y: auto;
	overflow-x: hidden;
	font-size: 12px;
}
.results a.odd {
	display: block!important;
	padding: 0.2em 6px!important;
	text-decoration: none;
	color: #000000;
	background-color: #FFFFFF;
	font-family: Verdana, 新細明體;
}
.results a.even {
	display: block!important;
	padding: 0.2em 6px!important;
	text-decoration: none;
	color: #000000;
	background-color: #F0F0F0;
	font-family: Verdana, 新細明體;
}
.results a:hover, .results a:focus {
	color: #FFFFFF;
	background-color: #2c7dbb;
}
.no_forecast {
	display: none;
	float: left;
	font-size: 12px;
	margin-top: 12px;
}