gistfile1.txt

<style>
.tiempo .weather_info{
    position: absolute;
    width: 122px;
    right: 10px;
    top: 15px;
}
.tiempo .weather_info_btn{
    background: url(../images/weather_info_btn.png) no-repeat;
    width: 13px;
    height: 12px;
    margin: 3px 0 0 8px!important;
}
/* image retina display */
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (max--moz-device-pixel-ratio: 2) {
    .tiempo .weather_info_btn {
        background: url(../images/weather_info_btn_rd.png) no-repeat;
        background-size:13px 12px;
    }
}
.tiempo .weather_info li{
    list-style: none;
    float: left;
    border: none;
    margin: 0 0 0 8px;
    padding: 0;
    font-weight: bold;
}
.tiempo .title p{
    font-size: 13px;
    font-weight: bold;
    float: left;
}
.tiempo .info h2{
    font-size: 11px;
    font-weight: bold;
    padding: 10px 0 0 0;
    margin: 0;
}
.tiempo .weather_info .details{
    background: none!important;
}
.tiempo .place{
    font-size: 10px;
    padding: 3px 0 0 0!important;
    float: left;
    margin: 0!important;
}
.tiempo .degrs{
    font-size: 15px;
    float: left;
    margin: 0 0 0 5px;
    padding: 0;
}
.tiempo .zip{
    display: none;
    width: 100px;
    position: absolute;
    right: 0;
}
.tiempo .weather_info .zip input, .tiempo .weather_info .zip .enter_btn{
    float: left;
}
.tiempo .weather_info .zip input{
    width: 60px;
    border: 1px solid #D9D9D9;
    border-radius:5px;
    outline: none;
    -webkit-appearance: listbox;
}
.tiempo .weather_info .zip .enter_btn{
    color: #fff;
    background: #D31313;
    border-radius: 5px;
    padding: 3px 5px 3px 5px;
    margin: 0 0 0 5px;
}
</style>
<script>
$(document).ready(function(){
     $('.weather_info_btn') .click(function(){
          $('.zip').show();
          $('.weather_info .details').hide();
          $('.weather_info_btn').hide();
     });
});
</script>
<div class="module">
     <h1>El Tiempo</h1>

     <!--DE aqui-->

     <div class="weather_info">
          <ul>
               <li class="details">
                    <p class="place">San Juan</p>
                    <p class="degrs">77 &deg;F</p>
               </li>
               <li class="weather_info_btn">
                    <a href="#"></a>
               </li>
               <li class="zip">
                    <input type="text" value="Zip Code"/>
                    <div class="enter_btn">▶</div>
               </li>
          </ul>
      </div>

      <!--Hasta aqui-->

      <div class="border"></div>
                    <div class="pic">
                        <img src="assets/images/weatherman_fpo.jpg" width="185" height="88" alt="#"/>
                    </div>
                    <ul>
                        <li style="height: 45px;">
                            <div class="title" style="height: 45px;">
                                <p style="font-size: 13px;">Cápsula del tiempo</p>
                            </div>
                        </li>
                        <li style="height: 230px; border: none;">
                            <div class="info">
                                <h2>Pronóstico</h2>
                                <p>SALUDOS AMIGO(A)S DE WAPA.TV</p>
                                <p>La mañana inició con cielos despejados, aunque con algo de bruma en el ambiente. Sin embargo, el índice de calidad de aire se mantiene Bueno en un nivel 32. Se anticipa otro día bastante soleado, estable y caluroso en municipios de la mitad norte del país.</p>
                                <p>En horas de la tarde no se descartan algunas lluvias en el interior y noroeste con hasta 40% de probabilidad de precipitación, pero esas lluvias deben disiparse rápido, justo antes de la puesta del sol. Mientras, el resto del país debe permanecer con apenas 20% de probabilidad de lluvias.</p>
                            </div>
                        </li>
                    </ul>
                </div>