/* html5 fixes for IE */
header, article, footer {display: block;}

body {
padding: 0px;
margin: 0px;
font-family: verdana;
font-size: 14px;
line-height: 0px;
color: #000;
text-align: justify;
background-image: url(images/tile.gif);
}
a:link      { color: #112233; text-decoration: none; font-size: 15px; font-weight: bold; }
a:active    { color: #112233; text-decoration: none; font-size: 15px; font-weight: bold; }
a:visited   { color: #112233; text-decoration: none; font-size: 15px; font-weight: bold; }
a:hover     { color: #223355; text-transform: none; text-shadow: 0 0 0.2em #ccc, 0 0 0.2em #ccc}

h1, h2      { font-family: Arial; font-weight: bold; }
h1          { font-size:19px; color:#04a0a8; }
h2          { font-size:17px; color:#000;    }
img         { max-width: 100%; border: none;}

#content{
z-index: 0;
background-color: #EDEDED;
margin: auto;
width: 960px;
max-width: 90%;
padding: 20px;
}

/*
 * the header is actually pretty complicated,
 * so we manually position all the parts; this
 * block is a placeholder so that all the normal
 * elements avoid the header zone
 */
#header {
display: block;
height: 225px;
}

/*
 * 2 overlapping full-page containers,
 * with content centered
 */
#title, #nav {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
text-align: center;
}
#title  {z-index: 1;}
#nav    {z-index: 2;}

/*
 * contents of the above containers are all centered,
 * so if we want the content to move right 120px, we
 * can add a 240px margin-left and it balances
 */
#title  IMG {max-width: 100%;}
#nav    DIV {margin: auto; width: 1000px; max-width: 100%; margin-top: 62px; text-align: right;}

/*
 * appearance of the nav bar
 */
#bar {
position: relative;
top: -4px;
margin-right: 20px;
padding: 10px;
line-height: 40px;
background-image: url(images/bar.gif);
border-width: 1px;
border-color: #000;
border-style: solid;
border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;
font-family: arial;
font-size: 18px;
text-align: center; 
}
#bar a       {color: #34C9CF; font-size: 18px; font-weight:normal; text-decoration: none; text-shadow:1px 1px 2px #000; -webkit-transition: color .15s linear;}
#bar a:hover {color: #EEF772;}

#show{
z-index: 4;
position: relative;
padding: 20px;
line-height: 20px;
background-image: url(images/tiny.png);
border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
}
#upcoming{
background-color: #eaeaea;
background-image: url();
width: 60%;
text-align: center;
padding: 10px;
margin: auto;
border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px;
}
#upcoming H1 {
margin-top: 0px;
}
#demo{
background-color: #eaeaea;
background-image: url();
width: 90%;
text-align: center;
padding: 10px;
margin: auto;
border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px;
}
#footer{
display: block;
width: 400px;
max-width: 70%;
padding: 10px;
line-height: 20px;
background-image: url(images/bar.gif);
border-width: 1px;
border-color: #000;
border-style: solid;
border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;
font-family: arial;
font-size: 12px;
text-align: center; 
color: #34C9CF;
text-shadow:1px 1px 2px #000;
margin: auto;
margin-top: 20px;
}
.events TH   { border: 2px #ccc solid; padding: 8px; background-color: #fff; font-weight:bold; font-size: 18px; color: #34C9CF; text-shadow: -1px 0 2px #101010, 0 1px 2px #101010, 1px 0 1px #101010, 0 -1px 2px #101010;}
.events TD   { border: 1px #ccc solid; padding: 5px; border-spacing: 40px 10px; background-color: #fff;}
.atmark      { margin: -4px -4px -6px -4px; }


.chat-top {
	position: relative;
}
.chat-top .chat-bot {
	display: none;
}
.chat-top:hover .chat-bot {
	display: none;
	position: absolute;
	top: -40px;
	left: -30px;
	width: 100px;
	text-align: center;
	z-index: 10;
	background: black;
	border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;
}