@charset "UTF-8";
/* CSS Document FOR EAFA WEBSITE - EASTSIDE ASSOCIATION OF FINE ARTS */
/* This is for the new site templates 11-23-2009 - Scott Moore */
/* OPEN SOURCE  - COPYLEFT - */

body {
	background-image: url(); /* We can change this but it's helping me program right now */ 
	background-color:#787878;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 14px;
	text-align: center;
}

a:visited {
	color: #333;
	text-decoration: none;
}
 
a:link {
	color: #d1d0cf;
	text-decoration: underline;
}
 
a:hover {
	text-decoration: none;
	color: #FC0;
	font-weight: normal;
}

h1 {
	color: #000000;
	font-size: 22px;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

h2 {
	color: #000000;
	font-size: 20px;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}
 
h3 {
	color: #000000;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

h4 {
	color: #000000;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

h5 {
	color: #000000;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

h6 {
	color: #000000;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

p {
	margin: 5px 0px 12px 0px;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #000000;
}
 
 
ul {

	margin: 2px 0px 5px 10px;
}

table {
	margin: 0px 0px 0px 0px; 
}

/* This is the text underneath the top left logo */
p.logo {
	margin: 5px 0px 12px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
}

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

 *******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
	padding: 0;
	list-style-type: none;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-style:normal;
	cursor: default;
	width: auto;
	background-color:#FFF;
	
	
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
cursor:pointer;
float:left;
font-size:14px;
font-family: Arial, Helvetica, sans-serif;
font-style:normal;
list-style-type:none;
margin:0;
padding:0;
position:relative;
text-align:left;
text-indent: 5;
width:auto;
background-color:#FFF;

}
.home{
background:url(../images/icons/eafa-home-off.jpg) center no-repeat;
height:105px;
width:100px;
display:block;
margin: 0px 0px 0px 0px;
}
.home:hover{
background:url(../images/icons/eafa-home-on.jpg) center no-repeat;
height:105px;
width:100px;
display:block;
margin: 0px 1px 0px 0px;
}
.meetings{
background:url(../images/icons/eafa-meetings-off.jpg) center no-repeat;
height:105px;
width:100px;
display:block;
margin: 0px 0px 0px 0px;
}

.meetings:hover{
background:url(../images/icons/eafa-meetings-on.jpg) center no-repeat;
height:105px;
width:100px;
display:block;
margin: 0px 0px 0px 0px;
} 
.events{
background:url(../images/icons/eafa-shows-events-off.jpg) center no-repeat;
height:105px;
width:100px;
display:block;
margin: 0px 0px 0px 0px;
}
.events:hover{
background:url(../images/icons/eafa-shows-events-on.jpg) center no-repeat;
height:105px;
width:100px;
display:block;
margin: 0px 0px 0px 0px;
}
.news{
background:url(../images/icons/eafa-news-off.jpg) center no-repeat;
height:105px;
width:100px;
display:block;
margin: 0px 0px 0px 0px;
}
.news:hover{
background:url(../images/icons/eafa-news-on.jpg) center no-repeat;
height:105px;
width:100px;
display:block;
margin: 0px 0px 0px 0px;
}
.artist{
background:url(../images/icons/eafa-artist-center-off.jpg) center no-repeat;
height:105px;
width:100px;
display:block;
}
.artist:hover{
background:url(../images/icons/eafa-artist-center-on.jpg) center no-repeat;
height:105px;
width:100px;
display:block;
}
.join{
background:url(../images/icons/eafa-join-now-off.jpg) center no-repeat;
height:105px;
width:100px;
display:block;
}
.join:hover{
background:url(../images/icons/eafa-join-now-on.jpg) center no-repeat;
height:105px;
width:100px;
display:block;
}
.calender{
background:url(../images/icons/eafa-calendar-off.jpg) center no-repeat;
height:105px;
width:100px;
display:block;
margin: 0px 0px 0px 0px;
}
.calender:hover{
background:url(../images/icons/eafa-calendar-on.jpg) center no-repeat;
height:105px;
width:100px;
display:block;
margin: 0px 0px 0px 0px;
}
.about{
background:url(../images/icons/eafa-about-off.jpg) center no-repeat;
height:105px;
width:100px;
display:block;
margin: 0px 0px 0px 0px;
}
.about:hover{
background:url(../images/icons/eafa-about-on.jpg) center no-repeat;
height:105px;
width:100px;
display:block;
margin: 0px 0px 0px 0px;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
	
	
	margin: 0px 0px 0px 0px;
	padding: 0;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	width: 13.2em;
	position: absolute;
	left: -1000em;
}


/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
	background-color: #B1E9F0;
	
	
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	min-width:180px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style:normal;
	margin: 1px;
	width: 13.2em;
	
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0;
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
	border: 0px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #B1E9F0;
	color: #333;
	padding:0px; /* The padding here controls the space between the menu images */
	text-decoration: none;
	border-bottom:1px solid #CCC; /* Note that you can't have a line separator between menu items without having it under the images. hmmmmmm */
	
	
}
/* Menu items that have mouse over or focus have a light  blue background and white text   - Firefox is misbehaving here and displaying in gray */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	background-color: #B1E9F0;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style:normal;
	margin: 0;
	
}

/* Menu items that have mouse over or focus have a light  blue background and white text   -this is for IE but then the rollover doesn't work 
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:visited
{
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style:normal;
	margin: 0;
	text-decoration:none;
	
} */


/* Menu items that are open with submenus open are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	background-color: #ffffff;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style:normal;
	margin: 0;
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	background-repeat: no-repeat;
	background-position: 95% 50%;
	
	
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	background-image: url(../images/icons/right.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-image: url(../images/icons/right.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert
 It's unfortunate but IE does require continual hacks to function correctly

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
	position: absolute;
	z-index: 1000;
	
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarHorizontal li.MenuBarItemIE
	{
		display: inline;
		f\loat: left;
		background: #FFF;
	}
}
/* END Spy Menu classes 




/* Begin DIV specific definitions here - everything above this is default behavior before DIV classes are applied*/ 

/* left gutter div class definitions here id=leftgutter */ 
#leftgutter h1 {
	font-size: 30px;
	color: #ffffff;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

#leftgutter h2 {
	font-size: 25px;
	margin-bottom: 5px; 
	color: #ffffff ;
	font-family: Arial, Helvetica, sans-serif;
} 

#leftgutter h3 {
	font-size: 22px;
	color: #ffffff;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
	
}
	
	#leftgutter h3.nav {
	font-size: 22px;
	color: #fbf3a9;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

#leftgutter h4 {
	font-size: 20px;
	color: #ffffff;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

#leftgutter h5 {
	font-size: 18px;
	color: #ffffff;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

#leftgutter h6 {
	font-size: 16px;
	color: #ffffff;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

#leftgutter p {
	font-size: 12px;
	margin: 5px 0px 12px 0px;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #000000;
}

#leftgutter a:visited {
	color: #000000; 
	text-decoration: underline;
}

#leftgutter a:link {
	color: #000000; 
	text-decoration: underline;
}

#leftgutter a:hover {
	text-decoration: none;
	color: #FC0;
	font-weight: normal;
}

#leftgutter ul {
	margin: 0px 0px 0px 0px;
	list-style:none;
}

#leftgutter ul li {
	margin: 0px 0px 0px 0px;
	list-style:none;
}


#body h1 {
	color: #000000;
	font-size: 30px;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

#body h2 {
	margin-bottom: 5px;
	font-size: 25px ; 
	color: #000000 ;
	font-family: Arial, Helvetica, sans-serif;
} 

#body h3 {
	color: #000000;
	font-size: 22px;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

#body h4 {
	font-size: 20px;
	color: #000000;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

#body h5 {
	font-size: 18px;
	color: #000000;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

#body h6 {
	font-size: 16px;
	color: #000000;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

#body p {
	font-size: 14px;
	margin: 5px 0px 12px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
	font-family:Verdana, Geneva, sans-serif;
}

#body a:visited {
	color: #000000;
	text-decoration: underline;
}

#body a:link {
	color: #000000;
	text-decoration: underline;
}

#body a:hover {
	text-decoration: none;
	color: #FC0;
	font-weight: normal;
}

#body ul {
	margin: 2px 0px 5px 26px;
	font-family:Verdana, Geneva, sans-serif;
}

#body li {
	margin: 2px 0px 5px 26px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
}


#body th.contactlist {background-color:#CCC;}
#body td.contactlist {background-color:#fbf3a9;}
#body td.rightguttercolor {background-color:#fbf3a9;
							background-image:none}
#body td.leftguttercolor {background-color:#a9dfe8;
							background-image:none}	
#body td.weblinks	 {background-color:;
							background-image:none; font-size:16px; color:#006; font-style:strong}							
#body table.weblinks {align: center;}							


/* Right Gutter definitions here */ 
#rightgutter h1 {
	color: #000000;
	font-size: 30px;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
	
} 

#rightgutter h2 {
	font-size: 25px;
	margin-bottom: 5px;
	color: #000000 ;
	font-family: Arial, Helvetica, sans-serif;
}

#rightgutter h3 {
	font-size: 22px;
	color: #000000;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

#rightgutter h4 {
	font-size: 20px;
	color: #000000;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
} 

#rightgutter h5 {
	font-size: 18px;
	color: #000000;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

#rightgutter h6 {
	font-size: 16px;
	color: #000000;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

#rightgutter p {
	font-size: 12px;
	margin: 5px 0px 12px 0px;
	font-family:Verdana, Geneva, sans-serif;
	color: #000000;
} 

#rightgutter a:visited {
	color: #000000;
	text-decoration: underline;
}

#rightgutter a:link {
	color: #000000;
	text-decoration: underline;
}

#rightgutter a:hover {
	text-decoration: none;
	color: #9fd5e2;
	font-weight: normal;
}

#rightgutter ul {
	margin: 2px 0px 5px 10px;
}

#footer p {
	font-size: 12px;
	margin: 5px 0px 12px 0px;
	font-family:Verdana, Geneva, sans-serif;
	color: #c7c7c8;
} 

#footer a:visited {
	color: #c7c7c8; 
	text-decoration: underline;
}

#footer a:link {
	color: #c7c7c8;
	text-decoration: underline;
}

#footer a:hover {
	text-decoration: none;
	color: #FC0;
	font-weight: normal;
}

#footer ul {
	margin: 2px 0px 5px 10px;
}

/* This is the input box for the google search function that's not really being used right now, but we can incorporate it later   
   This affects all input fields. When it's enabled, the background for input fields is purple, and the cursor and input are white. 
   But in IE there is a bug and the cursor does not blink, indicating focus when you have an input cell selected. This makes it 
   difficult to undersand if you have focus. 
   
#body input  {
	background-color: #7F7FB2;
	 border: 1px solid #000000;
	color: #FFFFFF;
	font-weight: bold;
	cursor: blink;
}*/

/* These are the links at the bottom of the page */ 
.footer {
	margin: 2px 0px 2px 0px;
	color: #CCC;
	text-align:center;
	font-size: 12px;
}

.copyright {
	margin: 2px 0px 8px 0px;
	color: #ffffff;
	text-align:center;
	font-size: 12px;
	font-family:Verdana, Geneva, sans-serif;
}

/* The next three TD specs control the site body cells - in particular the background and width of the gutters and main body content cell. 
   Note that the body cell is on auto align, so if the right gutter is turned off it will extend to the right until the end of the window 
   size defined by the .window class    IF YOU WANT TO CHANGE THE BACKGROUND OF THE GUTTERS AND BODY YOU DO IT HERE. IF YOU WANT A BACKGROUND 
   IMAGE IN THOSE THEN YOU DO IT HERE */ 

table.body { width: 1000px; }

td.leftgutter {
	background-color: #9fd5e2;
	width: 180px;
	height: 100%;
	vertical-align:top;
	text-align:left;
	margin: 0px 5px 0px 5px; 
}   
 
td.content {
	background-color: #ffffff;
	width: auto; 
	height: 100%;
	vertical-align:top;
	text-align:left;
	margin: 10px 5px 10px 5px;
	padding-left:25px;
	padding-right:25px;
}

td.rightgutter {
	background-color: #fbf3a9;
	width: 180px;
	height: 100%;
	vertical-align:top;
	text-align:left;
	cellpadding: 5;
	margin: 0px 5px 0px 5px; 
}

/* This is the logo at the top left */ 
td.logo {
	background-image: url(../images/icons/eafa-logo-final-180.jpg); 
	background-repeat:no-repeat;
	background-color: #ffffff;
	background-size: 180px; /* this isn't working */ 
	width: 180px;
	height: 100%;
	vertical-align:top;
	text-align:left;
	cellpadding: 0;
} 
/* This is writing next to the logo at the top left. We could put this in the banner include and make it linkable, but then 
   the site wouldn't be totally css driven. Or we could overlay a transparent image over the logo and make it linkable, thus 
   giving the impression of being a hot linked logo. Then we could really play with css styles and keep all global changes here in the css. */
td.topbannerright {
	background-image: url(../images/eafa-new-horizontal-320.png) ;
	background-repeat:no-repeat;
	background-color: #ffffff;
	background-size: ; /* this isn't working */ 
	width:auto; 
	height: auto;
	vertical-align:top;
	text-align:left;
	cellpadding: 0;
	
}


/* This is the members LOGIN RENEW at the top right */ 
td.topnav {
	vertical-align:bottom; 
	font-size:12px;
	font-weight:bold;

}

/* This is the cell where the main menu resides. The font in the menu is controlled here, or it overrides it... */ 
td.mainnav {
	vertical-align:bottom;
	font-size:12px;
	border-bottom:0px;
	text-indent: 2;
	margin:2;

}

 
#topnav a:visited {
	color: #000000;
	text-decoration: underline;
}

#topnav  a:link {
	color: #000000;
	text-decoration: underline;
}

#topnav  a:hover {
	text-decoration: none;
	color: #a9dfe8;
}

/* The top banner area resides here . IF YOU WANT TO CHANGE THE BACKGROUND COLOR OF THE HEADER AREA, YOU DO IT HERE. IF YOU 
WANT TO ADD A BACKGROUND IMAGE IN THE HEADER AREA, YOU DO IT HERE*/ 

.header {
	background-color: #ffffff; 
	/* overflow: hidden; */
	margin-top: 10px;
	width: 1000px;
	border: 0px solid #000000;
	float: center;
	margin: 0 auto;padding: 0 auto;
	
}

/* The entire window resides here - this is the box that floats inside the entire browser window THIS CONTROLS HOW THE CONTENT 
    WINDOW FLOATS IN THE BROWSER. YOU CAN SET WIDTH TO AUTO AND TAKE THE WHOLE WINDOW. THE GUTTERS WOULD STILL STAY FIXED 
	WIDTH, BUT THE BODY WOULD EXTEND. YOU CAN DO ALL KINDS OF NIFTY THINGS HERE TO THE WHOLE WINDOW BEHAVIOR */ 
.window {
	background-image: url();
	background-position: left;
	background-repeat: repeat-y;
	background-color: #ffffff;
	/* border: 1px solid #000000; */
	width: 1000px;
	float: center;
	margin-top:0;
	margin: 0 auto;
	padding: 0 auto;
}

/* div clear with a single underline puts an underline through the page where you want it. it's a marker */ 
.clear {
	clear: both;
	font-size: 1px;
	height: 1px;
	overflow: hidden;
	width: 1px;
}
/* Not actually being used but it's a good example */ 
.hidden {
	visibility: hidden;
}
/* Not actually being used but it's a good example */ 
.visible {
	visibility: hidden;
}