@media only screen and (max-width: 1665px)
{
#pb { width: 100%; height: 90%; min-height: 300px; padding-top: 10px; }
#pb #pd { margin-left: auto; margin-right: auto; width: 100%; }
#pb #pd .gauge { width: 10%; margin: 5px; text-align: center; float: left; }
#pb #pd .graph { width: 46%; text-align: center; float: left; }
#pb #pd .windrose { width: 20%; text-align: center; float: left; }
#pb #pd .text { font-size: 10pt; }
#pf { position: fixed; bottom: 0; padding: 10px; width: 100%; text-align:center; }
#pf img { width: 12px; height: 10px; }
}
@media only screen and (max-width: 1205px)
{
#pb { width: 100%; height: 90%; min-height: 300px; padding-top: 10px; }
#pb #pd { margin-left: auto; margin-right: auto; width: 100%; }
#pb #pd .gauge { width: 46%; margin: 5px; text-align: center; float: left; }
#pb #pd .graph { width: 66%; text-align: center; float: left; }
#pb #pd .windrose { width: 20%; text-align: center; float: left; }
#pb #pd .text { font-size: 10pt; }
#pf { position: fixed; bottom: 0; padding: 10px; width: 100%; text-align:center; }
#pf img { width: 12px; height: 10px; }
}
@media only screen and (max-width: 855px)
{
#pb { width: 100%; height: 90%; min-height: 300px; padding-top: 10px; }
#pb #pd { margin-left: auto; margin-right: auto; width: 100%; }
#pb #pd .gauge { width: 46%; margin: 5px; text-align: center; float: left; }
#pb #pd .graph { width: 100%; text-align: center; float: left; }
#pb #pd .windrose { width: 100%; text-align: center; float: left; }
#pb #pd .text { font-size: 10pt; }
#pf { position: fixed; bottom: 0; padding: 10px; width: 100%; height: 10px; text-align:center; }
#pf img { width: 12px; height: 10px; }
}