{% extends "base.html" %}

{% block content %}
<div style="width:100%; margin:0; padding:0">
	<div class="main_content_left">
		<div style="padding-left:12px; padding-right:12px; padding-top:12px">
			<h2 class="sectionhead_wide">Compass Almanac</h2>
		</div>
<div style="border:0px; margin:0px; padding-left: 8px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; text-align:center">
{% load almanac_tags %}
{% current_tide_state isle-au-haut-stonington-dock as tide %}
<p class="dirservindexhead">Tides</p>
<p class="dirservfeatured">Currently the tide in Stonington is {{tide.status}}</p>
<p>It will change at {{tide.time|time:"TIME_FORMAT"}}</p>
<p><a href="{% url al-tide-index %}">Click here to view the complete tide information.</a></p>
<p class="dirservindexhead">Weather</p>
    <p class="divservfeatured"> 
    
    {% for cam in webcams %}
	<dl style="{% if forloop.first %}margin-left:8em;{%endif%}display:inline; float:left; clear:both:"> 
		<dt><a href="{% if forloop.first %}http://islandadvantages.com/{% else %}http://weeklypacket.com/{% endif %}{{cam.get_absolute_url}}">{{cam}}</dt> 
		<dd style="margin-left:0; padding-top:0.5em;"><img src="{{cam.thumb_file}}" alt="{{cam}}" name="myCam" width="120" border="0"></a></dd>
        </dl>

    {% if forloop.first %}<p style="display:inline; float:left; padding:1em; padding-top:3.5em;"><span class="bullet">&bull;</span></p>{% endif %}
    {% endfor %}
    </p>
{% for w in town_weather %}
<p class="dirservfeatured" style="clear:both;">The weather in <b>{{w.location.city}}</b> is {{w.condition.text}} and {{w.condition.temp}}&deg;F</p>
{% for f in w.forecasts %}
<p><strong>For {{f.date}}</strong> &mdash; High: {{f.high}} / Low: {{f.low}} and {{f.text}}</p>
{% endfor %}
{% endfor %}
<hr size="1">
</div>
<div style="border:0px; margin:0px; padding-left: 8px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; text-align:center">
<p><em>Tides and astronomical data provided by <a href="http://www.noaa.gov/">NOAA</a><br>
Weather information provided by <a href="http://weather.yahoo.com/">Yahoo Weather</a></em></p>
</div>
</div>
</div>
	<div class="sidebar_right_media">
		<!-- Google AdSense BEGIN -->
		<div style="clear:both; text-align:center">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- Square ad for right of pages -->
			<ins class="adsbygoogle"
			style="display:inline-block;width:250px;height:250px"
			data-ad-client="ca-pub-7616595738812584"
			data-ad-slot="7790117357"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		<!-- Google AdSense END -->
		<br>
		<!-- Google AdSense BEGIN -->
		<div style="clear:both; text-align:center">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- Square ad for right of pages -->
			<ins class="adsbygoogle"
			style="display:inline-block;width:250px;height:250px"
			data-ad-client="ca-pub-7616595738812584"
			data-ad-slot="7790117357"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		<!-- Google AdSense END -->
	</div>

<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis.com/get/smart-layers to customize -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=penbaypress"></script>
<script type="text/javascript">
addthis.layers({
'theme' : 'transparent',
'share' : {
'position' : 'right',
'services' : 'facebook,twitter,email,print,gmail,tumblr,more',
}   
});
</script>
<!-- AddThis Smart Layers END -->

{% endblock %}k