.weather_wrapper .cat14 ul#tabmenu  { margin-top: 0em; }
.weather_wrapper .cat14 #tabmenu li a { width: 32.6%; }
/*.weather_wrapper .cat14 #tabmenu { border-bottom: 1px solid #61A534; }*/
.weather_wrapper .cat14 #tabmenu li.active a { background: #96d0b6 url(../image/search-result_tabarrow.gif) no-repeat bottom center; }
.weather_wrapper .cat14 .incontent { background: url(../image/weather_bg.png) repeat-y top left; width: 97%; padding: 1em 1.5%;}
.weather_wrapper .cat14 .incontent h2 { font-size :1em; color: #96d0b6;}

.weather_wrapper .cat14 .content { *margin-top: 0px;}

.boxset1 {background: #FFF url(../image/weather_boxbg1.jpg) repeat-y top left; width: 100%; padding-bottom: 1em; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-bottom: 1em;
  -moz-box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.25);
  /* For IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=150, Color='#9B9FA3')";
  /* For IE 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=150, Color='#9B9FA3');
}
.boxset1:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
.boxset1 .header{ background: url(../image/greyline2.gif) repeat-x bottom left; width: 95%; padding: 0.5em 2.5% 1em;}

.boxset2 {background: #FFF url(../image/weather_boxbg2.jpg) repeat-x top left; width: 94%; padding: 1em 3%;
	border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-bottom: 1em;
  -moz-box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.25);
  /* For IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=150, Color='#9B9FA3')";
  /* For IE 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=150, Color='#9B9FA3');
}
.boxset2:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}

#currentweather { width: 50%; float: left;}
#currentweather .temperature { width: 94%; padding:1em 3% 1em; clear: both; border-bottom: 1px solid #E8E8E8;}
#currentweather .temperature:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
#currentweather .temperature figure{ width: 38%; float: left;}
#currentweather .temperature .info{ width: 60%; float: left; margin-left: 2%}
#currentweather .temperature .amount{ font-size: 2.5em; margin-top: 0.3em;}
#currentweather .temperature .amount .unit{ font-size: 0.8em;}
#currentweather .temperature .description{ /*font-size: 1em; */float: left; font-weight: bold;word-wrap:break-word;line-height: 130%; margin-top: 0.3em;}

#currentweather .humidity { width: 40%; padding:0.5em 3%; middle; border-right: 1px solid #E8E8E8; float: left;}
#currentweather .humidity h2{ float: left; padding: 10px 0 10px 20px; background: url(../image/wxicon_humidity.gif) no-repeat center left; color: #50B3F8; font-size: 0.8125em; margin-right: 5px;}
#currentweather .humidity .amount{ font-size: 1.5em; margin-top: 5px; font-weight: bold; color: #666; text-align: center;}
#currentweather .humidity .amount .unit{ font-size: 0.8em;}

#currentweather .ultra-violet { width: 47%; padding:0.5em 3%; float: left;}
#currentweather .ultra-violet h2{ float: left; padding: 10px 0 10px 20px; background: url(../image/wxicon_ultraviolet.gif) no-repeat top left; color: #AC8BFF; font-size: 0.8125em; margin-right: 5px;}
#currentweather .ultra-violet .amount{ font-size: 1.5em; margin-top: 5px; font-weight: bold; text-align: center;}
#currentweather .ultra-violet .amount .unit{ font-size: 0.4em; margin-left: 2px;}
#currentweather .ultra-violet .lvl1{ color: #4EB400;}
#currentweather .ultra-violet .lvl2{ color: #F7E400;}
#currentweather .ultra-violet .lvl3{ color: #F85900;}
#currentweather .ultra-violet .lvl4{ color: #FF0000;}
#currentweather .ultra-violet .lvl5{ color: #998CFF;}

#forecast { width: 46%; float: left; padding: 0.3em 0 0 3%; margin-bottom:1em;}
#forecast:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
#forecast .amount { text-align: center; font-size: 1.5em; font-weight: bold; color: #666; padding: 0.5em 0;}

#warnings {margin-bottom:1em;}
#warnings .header{ width: 15%; float: left; margin-right: 3%;}
#warnings .detail{ width: 79%; border-left:1px dotted #999; padding-left: 2%; float: right; clear: none;}
#warnings .alert{ width: 100%; margin-bottom: 0.5em;}
#warnings .alert:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
#warnings figure { width: 26px; border:1px solid #999; line-height: 0; margin-right: 0.5em;}

#regional {width: 100%; margin-bottom:1em;}
#regional:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
#regional .places{ width: 100%; padding: 1em 0.1% 0;}
#regional .places:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
#regional .places .col{ width: 23%;}
#regional .places .col.deco{ padding-right: 0.3%; border-right:1px solid #CCC; margin-right: 0.3%; }
#regional .place {margin-bottom: 0.5em}
#regional .place:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}

#weeklyforecast { width: 100%; margin-bottom:1em;}
#weeklyforecast .content{ width: 94%; margin:0 3%; padding-top: 0.5em}
#weeklyforecast .row{ border-bottom: 1px solid #E8E8E8; margin-bottom:0.5em; padding-bottom: 0.5em}
#weeklyforecast .row:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
#weeklyforecast .forecastdate{ width: 14%; margin-right: 3%; float: left; text-align: center; padding-top: 0.5em;}
#weeklyforecast .info{ width: 43%;  margin-right: 3%; float: left;}
#weeklyforecast .info figure{ width: 25%; float: left; margin-right: 3%}
#weeklyforecast .info .description{ width: 72%; float: left; padding-top: 0.2em;}
#weeklyforecast .statistic{ width: 37%; float: left;}
#weeklyforecast .statistic .temperature{ width: 38%; margin-right: 5%; float: left; padding: 10px 0 10px 20px; background: url(../image/wxicon_temp.gif) no-repeat center left; font-weight: bold;}
#weeklyforecast .statistic .humidity{ width: 37%; float: left; padding: 10px 0 10px 20px; background: url(../image/wxicon_humidity.gif) no-repeat center left; font-weight: bold;}
#weeklyforecast .unit{ font-weight: normal;}


.stacktable { width: 100%; }
.st-head-row { padding-top: 0.5em; border-top: 1px solid #E8E8E8; border-collapse: separate; border-spacing: 1em;}
.st-head-row.st-head-row-main { font-size: 1.5em; padding-top: 0; display: none;}
.st-key { width: 49%; text-align: right; padding-right: 1%; }
.st-val { width: 49%; padding-left: 1%; }

/* RESPONSIVE EXAMPLE */

.stacktable.large-only { display: table; }
#chinaforecast tr, #chinaforecast td{  text-align: center;}
#chinaforecast .large-only tr.header {height: 3.5em;}
#chinaforecast .large-only tr.header th {width: 25%;}
#chinaforecast .large-only tr { border-bottom: 1px solid #E8E8E8;}
#chinaforecast .large-only td { padding: 0.5em 0;}

#worldforecast tr, #worldforecast td{  text-align: center;}
#worldforecast .large-only tr.header {height: 3.5em;}
#worldforecast .large-only tr.header th {width: 25%;}
#worldforecast .large-only tr { border-bottom: 1px solid #E8E8E8;}
#worldforecast .large-only td { padding: 0.5em 0;}

.small-only { display: none; }

@media only screen and (min-width : 10em) and (max-width: 30em) {
  .large-only { display: table; }
  .stacktable.small-only { display: table; }
}


/******************************320px to 468px*****************************/
@media only screen and (min-width : 10em) and (max-width: 30em) {
.boxset1 { background: none; background-color: #FFF;}
.weather_wrapper .cat14 #tabmenu li a { padding: 2% 0 2%; }
.weather_wrapper .cat14 .incontent h2 { font-size: 1.25em;}
#currentweather { width: 100%; float:none; margin-bottom:1em;}
#currentweather .temperature .description { font-size: 1.125em;}
#currentweather .humidity h2, #currentweather .ultra-violet h2{ font-size :1.125em; /*18*/}
#currentweather .humidity .amount, #currentweather .ultra-violet .amount, #forecast .amount {font-size: 2em;}
#currentweather .ultra-violet .amount .unit {font-size: 0.5em;}

#forecast { width: 94%; margin-right: 3%; float: none;}
#forecast p { font-size: 1.125em;}

#warnings .header { width: 100%; float: none; margin-right: 0;}
#warnings .detail { width: 100%; border-left: none; margin-top: 0.5em; padding-left: 0; float: none; }
#warnings .alert { font-size: 1.125em;}

#regional .places .col.deco { padding-right: 0; border-right: none; margin-right: 0; }
#regional .places .col { width: 80%; padding: 0 10%;}
#regional .place { font-size: 1.125em;}

#weeklyforecast .forecastdate { width: 100%; margin-right: 0; float: none; font-size: 1.125em; margin-left: 0.5em; text-align: left; padding-top: 0em; margin-bottom: 0.5em;}
#weeklyforecast .forecastdate:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
#weeklyforecast .forecastdate div{ float: left; margin-right: 0.5em;}
#weeklyforecast .row { margin-bottom: 1em; border-bottom: 1px solid #ccc;}
#weeklyforecast .info {width: 100%;margin-right: 0;float: none;}
#weeklyforecast .info:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
#weeklyforecast .statistic { width: 100%; float: none; clear: both; font-size: 1.25em; border-top: 1px solid #E8E8E8; margin-top: 1em;}
#weeklyforecast .info .description {padding-top: 0em; font-size: 1.125em;}
#weeklyforecast .statistic .temperature, #weeklyforecast .statistic .humidity { padding-left: 25px;}
#weeklyforecast .statistic .temperature {border-right: 1px solid #E8E8E8; margin-left: 0.5em;}
#weeklyforecast .statistic .humidity { width: 35%; }
}

/******************************592px to 768px*****************************/
@media only screen and (min-width : 30.1em) and (max-width :50em) {
#weeklyforecast .forecastdate { width: 100%; margin-right: 0; float: none; font-size: 1.125em; margin-left: 0.5em; text-align: left; padding-top: 0em; margin-bottom: 0.5em;}
#weeklyforecast .forecastdate:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
#weeklyforecast .forecastdate div{ float: left; margin-right: 0.5em;}
#weeklyforecast .statistic .temperature, #weeklyforecast .statistic .humidity { width: 80%; float: none; margin-right: 0;}
#weeklyforecast .info { width: 72%;}
#weeklyforecast .statistic { width: 25%;}
#weeklyforecast .info figure { width: 35%;}
#weeklyforecast .info .description { width: 62%;}
}

/*****************************landspace**************************************/
@media only screen and (min-width : 30.01em) and (max-width: 40em) {
.boxset1 { background: none; background-color: #FFF;}
.weather_wrapper .cat14 #tabmenu li a { padding: 2% 0 2%; }
.weather_wrapper .cat14 .incontent h2 { font-size: 1.25em;}
#currentweather { width: 100%; float:none; margin-bottom:1em;}
#currentweather .temperature .description { font-size: 1.125em;}
#currentweather .humidity h2, #currentweather .ultra-violet h2{ font-size :1.125em; }
#currentweather .humidity .amount, #currentweather .ultra-violet .amount, #forecast .amount {font-size: 2em;}
#currentweather .ultra-violet .amount .unit {font-size: 0.5em;}

#forecast { width: 94%; margin-right: 3%; float: none;}
#forecast p { font-size: 1.125em;}

#warnings .header { width: 100%; float: none; margin-right: 0;}
#warnings .detail { width: 100%; border-left: none; margin-top: 0.5em; padding-left: 0; float: none; }
#warnings .alert { font-size: 1.125em;}

#regional .places .col.deco { padding-right: 0; border-right: none; margin-right: 0; }
#regional .places .col { width: 80%; padding: 0 10%; margin-left: 0;}
#regional .place { font-size: 1.125em;}

#weeklyforecast .forecastdate { width: 100%; margin-right: 0; float: none; font-size: 1.125em; margin-left: 0.5em; text-align: left; padding-top: 0em; margin-bottom: 0.5em;}
#weeklyforecast .forecastdate:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
#weeklyforecast .forecastdate div{ float: left; margin-right: 0.5em;}
#weeklyforecast .row { margin-bottom: 1em; border-bottom: 1px solid #ccc;}
#weeklyforecast .info {width: 100%;margin-right: 0;float: none;}
#weeklyforecast .info:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
#weeklyforecast .statistic { width: 100%; float: none; clear: both; font-size: 1.25em; border-top: 1px solid #E8E8E8; margin-top: 1em;}
#weeklyforecast .info .description {padding-top: 0em; font-size: 1.125em;}
#weeklyforecast .statistic .temperature { padding-left: 25px; width: 37%; float: left; margin-right: 0;}
#weeklyforecast .statistic .temperature {border-right: 1px solid #E8E8E8; margin-left: 0.5em;}
#weeklyforecast .statistic .humidity { width: 35%; float: left; margin-left: 0.5em;}
}


/******************************801px to 1008px*****************************/
@media screen and (min-width:50.01em) and (max-width:63em) {
#weeklyforecast .statistic .temperature, #weeklyforecast .statistic .humidity { width: 80%; float: none; margin-right: 0;}
#weeklyforecast .info { width: 60%;}
#weeklyforecast .statistic { width: 20%;}
#weeklyforecast .info figure { width: 35%;}
#weeklyforecast .info .description { width: 62%;}
}

/************************************** iPhone 5 320px to 568px landscape*************************************************/
@media only screen and (min-width: 20em) and (max-width: 35.5em) and (orientation : landscape){
/*.weather_wrapper .cat14 #tabmenu li a { padding: 2% 0 2%; }
.weather_wrapper .cat14 .incontent h2 { font-size: 1.25em;}
#currentweather { width: 100%; float:none; margin-bottom:1em;}
#currentweather .temperature .description { font-size: 1.125em;}
#currentweather .humidity h2, #currentweather .ultra-violet h2{ font-size :1.125em; }
#currentweather .humidity .amount, #currentweather .ultra-violet .amount, #forecast .amount {font-size: 2em;}
#currentweather .ultra-violet .amount .unit {font-size: 0.5em;}

#forecast { width: 94%; margin-right: 3%; float: none;}
#forecast p { font-size: 1.125em;}

#warnings .header { width: 100%; float: none; margin-right: 0;}
#warnings .detail { width: 100%; border-left: none; margin-top: 0.5em; padding-left: 0; float: none; }
#warnings .alert { font-size: 1.125em;}

#regional .places .col.deco { padding-right: 0; border-right: none; margin-right: 0; }
#regional .places .col { width: 80%; padding: 0 10%; margin-left: 0;}
#regional .place { font-size: 1.125em;}

#weeklyforecast .forecastdate { width: 100%; margin-right: 0; float: none; font-size: 1.125em; margin-left: 0.5em; text-align: left; padding-top: 0em; margin-bottom: 0.5em;}
#weeklyforecast .forecastdate:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
#weeklyforecast .forecastdate div{ float: left; margin-right: 0.5em;}
#weeklyforecast .row { margin-bottom: 1em; border-bottom: 1px solid #ccc;}
#weeklyforecast .info {width: 100%;margin-right: 0;float: none;}
#weeklyforecast .info:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
#weeklyforecast .info .description {padding-top: 0em; font-size: 1.125em;}

#weeklyforecast .statistic { width: 100%; float: none; clear: both; font-size: 1.25em; border-top: 1px solid #E8E8E8; margin-top: 1em;}
#weeklyforecast .statistic .temperature, #weeklyforecast .statistic .humidity { padding-left: 25px;}
#weeklyforecast .statistic .temperature {border-right: 1px solid #E8E8E8; margin-left: 0.5em;}
#weeklyforecast .statistic .humidity { width: 35%; }*/
}