/* BODY CODES */

/* This body image is better for the main page with the large logo */
.body1 {
	margin:0;
	background-image:url('Images/background-seamless3-30percent-opacity.jpg');
	background-size: 100%;
}

/* This body image is better for pages with smaller logo */
.body2 {
	margin:0;
	background-image:url('Images/background-seamless-4-30percent-opacity.jpg');
	background-size: 100%;
}



/* NAVIGATION BAR CODES - includes bar for keeping Navigation bar fixed and background color bar */

/* Added for strip of color to go alone the entire length of the Navigation Bar */
#topbar-inner, #footer-inner {
	height:38px;
		/* 49px */
	background: #E1F2FA;  /* Darker Color #051842; */
/*	background-image: url("images/Logo-DarkerBlueArea.jpg");  */
	margin:0 auto; /* margin above - only affects top row */
	padding: 0; /* at left - only affects first at left in each row */
/*  box-shadow: 10px 8px 16px 3px #131A43;  */
			/* added -- original settings: -->  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  <-- */ 
			/* Alternate colors for shadow: colors: white, #E6F1F7 = light blue, 131A43 = dark blue */
}


#top-bar {
	position:fixed;
	top:0px;
	left:0px;
	z-index:999;
    width: 100%; 
        /* EXCEPTION to the below comments on the "wdith:100%" tag:
              IF the div tags are used as they are here to create the color behind the bar, then
              the width is necessary for the color to appear. The menu stayed to the left. May be because the 168px are still not available,
              OR because the overflow is not there - or a combination.  /*
       /* DO NOT use this. THIS is what centers the menu
        	/* overflow:visible;  This was removed. It has the same impact as "width: 600px" in the "ul" tag. 
	     It prevents the menu from looping around on a smaller screen. 
	     Good feature, except it has no scroll bars, and it makes it inaccessible for smaller screens. 
	     Other problem is, without tag, text is covered by looping menu. 
	     See comments for "width: 600px" under "ul" */
	     
	/* New changes! made width:100% available so that the <div> tags for "topbar-nner" would work.
	It was necessay for that to work. 
	AND, somehow, the menu collapses */
}

/* Required to make space under menu bar so First paragraph / text / full logo image appears 
       Otherwise, it ends up behind the menu bar 
       */
.spacer {
	height:38px 
}





/* Actual NAVIGATION BAR Code */

ul.nav {
	margin:0 auto;
	padding: 0;
	list-style-type:none;
	/*  width:600px;  
		This has been hidden as it keeps the width at 600px with no scroll bar for smaller screens,
		thus making it inaccessible for smaller screens 
		Unfortunatley, without tag, text is covered by looping menu. 
		Same effect with "overflow:visilbe" in "ul" "top-bar" tag. 	*/
}

ul.nav li {
	position: relative; 
	float: left; 
	width:95px;   
		/* Sets width for each list - w/o auto adjusts */
		/* 149px */
}

 li ul.nav {
	position: absolute; 
	left: 0;
	top: auto;
	display: none; 
	z-index:999;
	width:auto
} 

/* Styles for Menu Items - sets Main menu appearance - not submenu */
ul.nav li a {
	display: block;
	text-decoration: none;
	font-family: Arial;
	font-size: 14px;	
	color: #051842;
	background: #E1F2FA; /* For Chrome, not just IE6 Bug */
	border-right: 2px ridge #FFFFFF;
		/* #E12FA or #FFFFFF */ 
		/* ridge or groove */
		/* rgba(5,24,66,0.5); */ /* border-right: 1px solid #051842 */
		/* padding: 5px; */
		/* border: 1px solid #ccc; */
	text-align: center;	  /* centers the text on the main bar of the menu */
	padding: 10px 10px;
		/* 15px 15px;  */
		/* changed from 20px 16px */
}

/* this sets all hovered lists colors */
	/* without, the entire menu stays "white" or possibly transparent */
		/* additional needed for 3rd and 4th sub-levels of menu */
ul.nav li:hover a, ul.nav li.over a, ul.nav li:hover li:hover a, ul.nav li.over li.over a, ul.nav li:hover li a:hover, ul.nav li.over li a:hover, ul.nav li.over li li a:hover {
	color: #E1F2FA;
	background-color: #051842;
}

/* set dropdown to default */
	/* without, the entire drop down has a background of red when not hovering */
		/* additional needed for 3rd and 4th sub-levels of menu */
ul.nav li:hover li a, li.over li a {
	color: #051842;
	background-color: #E1F2FA;
		min-width: 165px;
    		/* or width: 165 */
    		/* auto keeps it at matching size width of main menu = too small */
    		/* adjust to fit "Comic Book Fans United" across */
    	height: 35px;
    	padding: 15px 7px 0px 7px;  /* top right bottom left */
	border-right: none;   /* this MUST come before the box-shadow to override the border-right for the "ul li a" settings for *this* drop down */
	box-shadow: 10px 8px 16px 3px #131A43;  /* added -- original settings: -->  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  <-- */ 
			/* Alternate colors for shadow: colors: white, #E6F1F7 = light blue, 131A43 = dark blue */
}


ul.nav li ul li a {
	padding: 2px 5px;
} 

/* Required for Drop down to work. */
	/* Drop down does not work if this code is removed */
ul.nav li:hover ul, ul.nav li li:hover ul, ul.nav li.over ul, ul.nav li li.over ul {
	display: block;
}

/** END NAVIGATION BAR CODES **/

/* CODES CONTENT (div, margins, h2, text, etc */

.bodymain {
	margin:50px 50px 50px 50px;  /* top, right, bottom, left */
}

.bodymain2 {
	margin:10px 10px 10px 10px;   /* top, right, bottom, left */
}

/* Code for positioning text in Member's Only area, below fixed menu, logo, and button */
/* originally (better if scoll code repaired for transparent background 5px 1px 1px 1px */
.bodymain3 {
 		margin: 0px 1px 1px 1px;
}


/* For Upcoming Events - "Additional" section with ul list of potential upcoming events */
.bodymain4 {
	text-indent: 150px
/*	margin:0px 0px 0px 150px; */  /* top, right, bottom, left */
}


.margin2{
	margin-left: 15px;
	}

/* For Upcoming Events - center table list area */
.bodycenter {
	margin: auto;
	width: 50%;
	border: 0px;
	pading: 0px;
	}

	
p {
	margin-top:0
}

/* TEXT - FONTS */

.main {
	color: red;
	/* color: #051842; */
	text-align: center;
	font-family: Arial;
	font-weight: bold;
	}



p.text1 {
	color: red;

	}
	
p.text1-2 {
	color: red;
	text-align: left;
	font-size: 15px;
	font-family: Arial;
	}	
	
p.text1-3 {
	color: red;
	text-align: center;
	font-size: 20px;
	font-family: Arial;
	font-weight: bold;
	}	
	
.text2 {
	color: black;
	text-align: center;
	font-size: 15px;
	font-family: Arial;
	}
	
p.text2-2 {
	color: black;
	text-align: center;
	font-size: 20px;
	font-family: Arial;
	}

p.text2-3 {
	color: black;
	text-align: left;
	font-size: 15px;
	font-family: Arial;
	}

p.text3 {
	color: black;
	text-align: center;
	font-size: 18px;
	font-family: Arial;
	font-weight: bold;
	font-style: italic;
	}	

/* used for Upcoming Events list of to be scheduled */	
.text4 {
	color: black;
	font-size: 16px;
	font-family: Verdana, Arial, Times New Roman, times
	}




/* Table Codes */


/* Code to indent page for Upcoming Events List */
.table3 {
 		margin: 1px 0px 1px 200px;    /* top right bottom left */
}



/* Table code for Members Only Pages for Mini-Logo / Button area */	
.tablebanner1 {
	background-image: url('Images/background-banner.jpg');
	background-size: 100%;
	/* alternate url('Images/BGColor-E1F2FA.jpg') */
	/* alternate ('Images/background-seamless-4-30percent-opacity.jpg') */
	}
	
/* Table for Dining Venue */

.table4 {
 <!--	margin: 1px 10px 1px 10px;  -->  /* No longer needed - div bodymain 2 used - top right bottom left */
 <!-- 		border: 2px;  -->
 		border: 2px;
 		border: 2px #051842; 
 		border-collapse: collapse;		
}


.table4 th {border: 2px solid #051842; border-bottom: 2px double #051842; text-align: center; font-size: 16px; font-family: Arial; font-weight: bold; padding: 5px;}
.table4 tr {border: 2px solid #051842;}
.table4 td {border: 1px solid #051842; padding: 5px;}


/* Outset border - this overrides any border in the .table4 solor above css code */
/* .table4 th {border: 2px outset #E1F2FA; text-align: center; font-size: 16px; font-family: Arial; font-weight: bold; padding: 5px;} */
/* .table4 tr {border: 2px outset #E1F2FA;} */
/* .table4 td {border: 2px outset #E1F2FA; padding: 5px;} */
/* End Outset border */

/* End Table for Dining Venue */




/* BUTTONS for SFFU and CBFU */
.button {
    background-color: #E1F2FA;
    border: 2px ridge #FFFFFF; /* border: none; */
    color: #051842;
	font-family: Arial;
    /* padding: 15px 32px; */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
	min-width: 165px;
    	height: 35px;
    	padding: 15px 7px 0px 7px;  /* top right bottom left */
        font-face: Arial;
}

.button:hover {
	color: #E1F2FA;
	background-color: #051842;
	box-shadow: 10px 8px 16px 3px #131A43;  /* added -- original settings: -->  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  <-- */ 
			/* Alternate colors for shadow: colors: white, #E6F1F7 = light blue, 131A43 = dark blue */
}

.buttonspacer {
	widtht:38px 
}





/* MEMBERS Only Button */

.button2 {
    background-color: #E1F2FA;     /* #E1F2FA = Light */
    border: 2px ridge #FFFFFF; /* border: none; */
    color: #051842;				   /* #051842 = Dark */
    /* padding: 15px 32px; */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
	min-width: 165px;
    	height: 55px;  /* 35px */
    	padding: 10px 7px 0px 7px;  /* top right bottom left */
        font-face: Arial;
        font-weight: bold;
}




/* This has no effect in Chrome. May in other browsers. Should keep drop down text under menu */
.button2drop {
	position: relative;
	display: inline-block;
	}


/* <div> tag before dropdown menu. Provides appearance of dropdown menu */
.button2drop-content {
	display: none;
	position: absolute;
	background-color: #E1F2FA;    /* #E1F2FA = Light */
	min-width: 165px;
	box-shadow: 10px 8px 16px 3px #131A43;
	z-index:1;
	}



.button2drop-content a {
	color: #051842;      			/* #051842 = Dark */
	font-family: Arial;
	font-size: 14px;
		background-color: #E1F2FA;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	border-bottom: 1px solid #051842; /* creates border bottom to separate drop down list items */
	}	


/* dropdown menu for button2drop will not appear without this code: */	
.button2drop:hover .button2drop-content { 
	display: block;  
	border-bottom: none /* this stops a bottom border from appearing at the end of the drop down menu when a border is created in -contet a tag as above */
	}

.button2drop-content a:hover {
	background-color: #051842;
	color: #E1F2FA;
	}
	
	
/* Mini Logo image positioning */
.minilogo {
	margin-left: 0px;
	padding: 0px;
	border: none;
	}
	
	


	

/* THE FOLLOWING IS TO BE USED WHEN OVERRIDING THE NAVIGATION UL CODES FOR ANOTHER UL LIST FOR ul TAGS AND li TAGS */	
	
/* List patterns for Members Only Area */
/* These codes are needed to override the Navigation ul codes */
/* to be input with ul tag class="eventslist" */
/* This list is designed so a large gif can be resized to be a bullet point */

/* begin - eventlist - without a number - is used to resize an image as a bullet point */

ul.eventlist,
ul.eventlist li {
  list-style-type: none;  /* removes bullet point so a large image can be used - this is done differently for a properly sized image */
  padding: 0;
  margin: 0;
  float: none; /* to overirde navigation bar's float - otherwise, list becomes horizontal */
}
ul.eventlist li {
  height: 1em;
  width: 100%;   /* to override navigation bar's ul li width - limited to 95px */
}
ul.eventlist li:before {
  content: "";
  background-image: url('Images/greenarrow.gif');  /* needed for large image */
  background-size: .5em .5em;                      /* needed for large image */
  background-repeat: no-repeat;                    /* needed for large image */
  display: inline-block;
  vertical-align: top;
  position: relative;
  top: 50%;
  margin-top: -.175em;
  width: .75em;  /* space between image and text */
  height: .5em
}

/* end - eventlist - without a number - is used to resize an image as a bullet point */

/* INSERT Image */	

/* Image for Upcoming Events Bullet */
.bullet2 {
  content: "";
  background-image: url('Images/greenarrow-15pxH.gif');  
  background-repeat: no-repeat;            
  display: inline-block;
  vertical-align: top;
  position: relative;
  top: 50%;
  margin-top: .175em; /* positions images - verticle -- use negative number if needed to go higher */
  width:  21px;  /* space between image and text */
  height: 15px
	}
/* End INSERT Image */


/* end - imagelist - provides an image as a bullet point */


/* Used to override unscheduled upcming events table */
	
	
/* END OF CODES TO OVERRIDE NAVIGATION BAR ul FOR AN ADDITIONAL ul LIST WITHIN DOCUMENT */