/* COLORS:
Green:
#99FF33;
Dark Blue:
#000066;
Light Blue:
#9999FF;
*/

body
{
background-color: #202020;
background-image: url(images/bg.gif);
font-family: Verdana, Times, Helvetica, Arial, sans-serif;
font-size: 11px;
margin: 0px;
padding: 0px;
}

#publicity ul {
	line-height: 12px;
}

#publicity li {
  margin-top: 10px;
}

a:link, a:visited
{
color: #000066;
}

a:hover
{
color: #000066;
background-color: #99FF33;
}

#redLinks a:link, #redLinks a:visited
{
color: red;
}

#redLinks a:hover
{
background-color: #99FF33;
}

#main
{
width: 680px;
margin-left: auto;
margin-right: auto;
border: 1px solid white;
}

#horizontalnavcontainer
{
position: relative;
height:45px;
width: 680px;
background-color: #9999FF;
border-bottom: 1px solid white;
}

#horizontalnavcontainer a
{
font-size: 16px;
padding: 5px;
}

#verticalnavcontainer
{
background-color: #9999FF;
text-align: left;
font-size: 12px;
font-weight: bold;
line-height: 36px;
margin-bottom: 0px;
}

p.justify
{
text-align: justify;
}

#verticalnavlist li
{
display: block;
padding: 1px;
}

#hero
{
margin: 0px;
border-bottom: 1px solid white;
width: 680px;
height: 200px;
background-image: url(../images/hero.jpg);
}

#logo
{
margin: 0 auto;
border: 2px solid black;
}

#header
{
background-color: #99FF33;
height: 70px;
position: relative;
}

#header h1
{
position: absolute;
text-align: center;
left: 115px;
top: 10px;
color: #000066;
font-size: 48px;
font-family: arial;
margin: 0px;
}

.upcoming h1
{
text-align: center;
font-size: 12px;
line-height: 12px;
padding-top: 15px;
}

.upcoming li
{
font-size: 12px;
line-height: 12px;
text-align: left;
padding-bottom: 15px;
}

.upcoming ul
{
list-style: none;
}

.upcoming a:link, .upcoming a:visited
{
color: red;
}

.upcoming a:hover
{
background-color: #99FF33;
}


#body
{
	padding-top: 1px;
	background-color: white;
	position: relative;
	border-right: 200px solid #eeeeee;
	z-index: 0;
}

#sidebar
{
	position: absolute;
	right: -200px;
	_right: 0px;
	width: 180px;
	padding: 10px;
	background-color: #9999FF;
	top: 0px;
	margin-bottom: 0px;
	bottom: 0px;
}

#sidebar h3
{
	font-size: 13px;
	border-bottom: 1px solid black;
	margin-bottom: 4px;
	margin-top: 16px;
	clear: both;
	color: #000066;
}

#sidebar ul
{
	margin-left: 1em;
	padding-left: 0px;
}

#sidebar p
{
	margin-bottom: 8px;
}

#content
{
	padding: 20px;
	border-right: 1px solid #b0b0b0;
	border-left: 1px solid #b0b0b0;
	color: #000066;
}

#content h2
{
	font-size: 18px;
	/* 18px is the default minimum font size for which anti-aliasing will occur. */
	margin: 0px;
	border-bottom: 1px solid black;	
}

#content .date
{
	float: right;
}

#content .postedBy
{
	float: left;
}

#content .meta
{
	height: 1em;
}

#content p
{
	text-align: justify;
	text-indent: 3em;
	line-height: 1.3em;
}

.pullout
{
	background-color: #eeeeee;
	padding: 5px;
	float: right;
	margin: 8px;
}

#footer
{
	width: 678px;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #b0b0b0;
	background-color: #eeeeee;
	color: #b0b0b0;

}

.left
{
	float: left;
}

.right
{
	float: right;
}

small.super
{
	vertical-align: top;
	font-size: 0.75em;
	line-height: 1.3em;
}

.nodisplay
{
	display: none;
}

#centeredtextsmall
{
text-align: center;
font-size: 10px;
}

.centeredtext{
	text-align: center;
}

h4.workshoptitle
{
background-color: #99FF33;
font-size: 16px;
text-align: center;
line-height: 25px;
}

h5.contact
{
border: 1px dotted black;
padding: 5px;
font-size: 10px;
text-align: center;
}

h5.instructions
{
border: 1px dotted black;
padding: 10px;
font-size: 12px;
text-align: center;
color: red;
}

h5.cbar
{
text-align: center;
font-size: 12px;
color: red;
}

#mainSideBar
{
text-align: center;
line-height: 12px;
border: 1px dotted black;
}

#mainSideBar h1
{
color: red;
font-size: 12px;
}

#mainSideBar h2
{
color: #000066;
font-size: 11px;
}

#mainSideBar a, #mainSideBar a:visited
{
color: red;
}

#mainSideBar a:hover
{
color: red;
background-color: #99FF33;
}

#upcomingWorkshops
{
text-align: center;
line-height: 12px;
border: 1px dotted black;
}

#upcomingWorkshops h2
{
color: #000066;
font-size: 11px;
}

#upcomingWorkshops a, #upcomingWorkshops a:visited
{
color: red;
}

#upcomingWorkshops a:hover
{
color: red;
background-color: #99FF33;
}

#linkSection a:link, #linkSection a:visited
{
color: #000066;
}

#linkSection a:hover
{
color: red;
background-color: #99FF33;
}

#linkSection
{
padding: 5px;
line-height: 13px;
font-size: 11px;
}



/*MENU*/


/*FUNCTIONALITY*/

.topmenuul{
	list-style-type:none;
	margin:0;
	padding:0;
}

.topmenuli{
	list-style-type:none;
	float:left;
}

.topmenutitle{
	display:block;
	width:100px;
}

.submenuul
{
	list-style-type:none;
	position:absolute;
	margin: 0;
	padding:0;
	display:none;
}

.submenuli a{
	display:block;
	width:250px;
}

li:hover ul , li.over ul{ /* lists nested under hovered list items */
	display: block;
}

#dmenu li>ul { 
	top: auto;
	left: auto;
}


/*MAKE PRETTY*/

#dmenu
{
	text-align: center;
	clear: both;
	font-size:12px;
	position: absolute;
	left: -24px;
}


.topmenutitle {
	text-decoration: none;
	padding: 3px;
	font-size: 12px;
	line-height:14px;
	width: 100px;
	font-weight: bold;
}

.submenuul {
	background-color: #9999FF;
	padding: 10px;
	border:1px solid #FFFFFF;
	line-height:36px;
	width: 218px;
	text-align: left;
}

.submenuli a, a:link, a:visited
{
	color: #000066;
	text-decoration: none;

}

.submenuli a:hover
{
	color: #FFFFFF;
	background:#336699;
}


/* LOGO
					<br><hr><br><br><br>
					
					<div id="logo">
						<img alt="SSNYC Logo" src="./images/SsNycLogo.png" width="176" height="176">
					</div>
					
*/