=== Side Panel Information ===
Info messages can be displayed during one month or during several months.
Each info message must be preceded by a line with the month number or the range 
of month numbers between ~ characters in the following format: ~4~ (one month: 
April) or ~8-10~ (range of months: August, September and October).

~1~
<h2>Demo Message - January</h2>
<h3>This is an example of a long message:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

~2~
<h2>Demo Message - February</h2>
<br>
<h3>Don't forget: February 14 Valentine's Day</h3>
<div style="text-align:center; color:red; font-size:6.0em">❤</div>

~3~
<h2>Demo Message - March</h2>
<br>
<h3>A wise proverb colored red:</h3>
<br>
<p style="color:red; font-size:1.4em">One fool can ask more questions than seven wise men can answer</p>

~4~
<h2>Demo Message - April</h2>
<br>
<h3>An example of a big blue message:</h3>
<br>
<p style="color:blue; font-size:4em">Hello World</p>

~5~
<h2>Demo Message - May</h2>
<h3>A message with various HTML tags:</h3>
<p>Some Text<br>Here we have a longer text which spans several lines of the Side Panel<br>Some Text<br><b>Some Bold Text</b><br>Some Text<br>Some Text<br><u>Some Underlined Text</u><br>Some Text<br>This is a link to <a href="https://www.luxsoft.eu/" target="_blank">LuxSoft</a><br>Some Text<br><s>Strike through</s><br>Some Text<br><br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text<br>Some Text</p>

~6~
<h2>Demo Message - June</h2>
<h3>Our wish for all of you:</h3>
<br>
<p>This will be my lucky month!</p>
<div style="text-align:center; color:red; font-size:8.0em">&#128516;</div>

~7-10~
<h2>Demo Message July - October</h2>
<p>This message will be shown during four months</p>

~7~
<h2>Demo Message July</h2>
<br>
<h3>Middle of the year. <u>Time for a little break!</u></h3>
<br><br>
<div style="text-align:center;"><img src="./thumbnails/holidays.jpg" alt="Me on the beach" width="200"></div>
<br>
<p style="text-align:center;">This month you can find me here!</p>

~8~
<h2>Demo Message - August</h2>
<br>
<p>In case of <span style="font-size:1.4em">emergency</span> scroll down to the end of this message!</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="text-align:center; color:red; font-size:1.4em"><span style="display:inline-block; padding:6px 12px; border:2px solid grey;">Only in case of EMERGENCY!</span></div>
<br><br><br>
<div style="text-align:center;">============</div>

~9~
<h2>Demo Message - September</h2>
<br>
<h3>Month Number 9</h3>
<br>
<div style="text-align:center;"><img src="./thumbnails/september.jpg" alt="sep" width="70"> <img src="./thumbnails/september.jpg" alt="sep" width="70"> <img src="./thumbnails/september.jpg" alt="sep" width="70"></div>
<div style="text-align:center;"><img src="./thumbnails/september.jpg" alt="sep" width="70"> <img src="./thumbnails/september.jpg" alt="sep" width="70"> <img src="./thumbnails/september.jpg" alt="sep" width="70"></div>
<div style="text-align:center;"><img src="./thumbnails/september.jpg" alt="sep" width="70"> <img src="./thumbnails/september.jpg" alt="sep" width="70"> <img src="./thumbnails/september.jpg" alt="sep" width="70"></div>

~10~
<h3>Demo Message - October</h3>
<br>
<h3>Autumn, time for some outdoor activity!</h3>
<br>
<div style="text-align:center;"><img src="./thumbnails/walking.gif" alt="sep"></div>

~11-12~
<h2>Demo November and December </h2>
<script>
var today=new Date();
var cmas=new Date(today.getFullYear(), 11, 25);
var oneDay=1000*60*60*24;
if (today.getMonth() < 11 || today.getDate() <= 25) {
	document.write('<p style="text-align:center; color:purple; font-size:1.2em">' + Math.ceil((cmas.getTime()-today.getTime())/oneDay) + ' days left until Christmas!</p>');
} 
</script>

~11~
<h2>Demo Message - November</h2>
<h3>Example of an embedded mp4 video</h3>
<br>
<div style="text-align:center;">
<video width="220" autoplay controls>
  <source src="thumbnails/bear.mp4" type="video/mp4">
</video>
</div>

~12~
<h2>Demo Message - December</h2>
<h3>A month to think of other people</h3>
<p>Please put your presents under these</p>
<div style="text-align:center;"><img src="./thumbnails/xmas.png" alt="Christmas Tree" width="33"></div>
<div style="text-align:center;"><img src="./thumbnails/xmas.png" alt="Christmas Tree" width="63"></div>
<div style="text-align:center;"><img src="./thumbnails/xmas.png" alt="Christmas Tree" width="93"></div>
