/* CSS for top menu, larger viewports */				
	#container {
		margin: 0 auto;
		max-width: 890px;
	}
				
	.copyright_top {
		width: 100%;
		margin:0;
		padding: 0;
		padding-top: 3px;
		text-align: center;
	}
	.copyright_topSmall {
		width: 100%;
		margin:0;
		padding: 0;
		padding-top: 3px;
		text-align: center;
	}
	.largeTable{
		width: 100%;
		margin:0;
		padding: 0;
	}
	.leftLinks{
		width: 90%;
		margin:0;
		padding: 0;
	}
	.smallTextDiv{
		width: 90%;
		margin:0;
		padding: 0;
	}
	.picSmall{
		width: 90%;
		max-width:300px;
		margin:0;
		padding: 0;
	}
				
	.toggle, .toggleMenu, [id^=drop] {
		display: none;
	}

	/* Giving a background-color to the nav container. */
	nav { 
		/*width:100%;*/
		margin:0;
		padding: 0;
		background-color: #000000;
		text-align:center;
	}
				
	/* Since we'll have the "ul li" "float:left"
				 * we need to add a clear after the container. */
	nav:after {
					content:"";
					display:table;
					clear:both;
	}
				
	/* Removing padding, margin and "list-style" from the "ul",
				 * and adding "position:reltive" */
	nav ul {
					padding:0;
					margin:0;
					list-style: none;
					position: relative;
	}
					
	/* Positioning the navigation items inline ... main links */
	nav ul li {
		margin: 0px;
		display:inline-block;
		background-color: #000000;
	}
				
				
	/* Styling the links */
	nav a {
		display:block;
		padding:6px 12px;					/* 1st #: top&btm  ...  spaces the links: 2nd #:  right&left */
		color:#FFD700;
		font-size:12px;						/* Main menu font size */	
		text-decoration:none;
		z-index: 10;
	}
				
				
	nav ul li ul li:hover { background: #0000ff; }
				
	/* Background color change on Hover */
	nav a:hover { 
		color: #ffffff ;
		background-color: #555555; 								/* All menu backgrounds on hover, main and sub */
		z-index: 10;
	}
	
	/* Hide Dropdowns by Default
				 * and giving it a position of absolute */
	nav ul ul {
		display: none;
		position: absolute; 
		/* has to be the same number as the "line-height" of "nav a" */
		top: 24px; 			/* vertical distance between main menu and dropdowns when not collapsed */
	}
					
	/* Display Dropdowns on Hover */
	nav ul li:hover > ul {
		display: block;
		z-index: 10;
	} 
				

					
	/* First Tier Dropdown */
	nav ul ul li {
		width:111px;         /* width of the main menu dropdown links */
		display:list-item;
		position: relative;
		background-color: #666666;  								/* Main menu sub backgrounds when hovering on main link */
		z-index: 10;
	}
				
	/* Second, Third and more Tiers	
				 * We move the 2nd and 3rd etc tier dropdowns to the left
				 * by the amount of the width of the first tier.
				*/
	nav ul ul ul li {
		position: relative;
		top:-60px;
		/* has to be the same number as the "width" of "nav ul ul li" */ 
		left:100px; 
	}
					
	/* Change ' +' in order to change the Dropdown symbol */
		li > a:after { content:  ' +'; }
		li > a:only-child:after { content: ''; }
				
				
				
	/* CSS for side menu, smaller viewports */							

	/* Media Queries
				--------------------------------------------- */

			
	@media all and (min-width : 561px) {
	   .copyright_top {display: block;}
		.copyright_topSmall {display: none;}	
	   .copyright_btm {display: none;}
	   .largeTable {display: block;}
	   .leftLinks {display: none;}
	   .picSmall {display: none;}
	   .smallTextDiv {display: none;}
	}


	@media all and (max-width : 560px) {
	   .copyright_top {display: none;}
		.copyright_topSmall {display: block;}
	   .largeTable {display: block;}
	   .leftLinks {display: none;}
	   .picSmall {display: none;}
	   .smallTextDiv {display: none;}
					
					nav {
						margin: 0;
						text-align:left;
					}
				
					/* Hide the navigation menu by default */
					/* Also hide the  */
					.toggle + a,
					.menu {
						display: none;
					}
				
					/* Styling the toggle label */
					.toggle {
						display: block;
						background-color: #000000;
						padding: 10px 16px;							/* adjusts line height of toggle menu label ... 1st #: top&btm  ...  2nd #:  right&left */
						color:#FFD700;
						font-size:14px;
						text-decoration:none;
						border:none;
					}
					
					/* Styling the toggle Menu label (hamberger symbol) */
					.toggleMenu {
						display: block;
						background-color: #000000;
						padding: 10px 20px;							/* 1st #: top&btm  ...  2nd #:  right&left */
						color:#FFD700;
						font-size:24px;
						text-decoration:none;
						border:none;
					}
				
					.toggle:hover {
						color: #ffffff ;
						background-color: #555555;
					}
				
					/* Display Dropdown when clicked on Parent Lable */
					[id^=drop]:checked + ul {
						display: block;
					}
				
					/* Change menu item's width to 100% */
					nav ul li {
						display: block;
						width: 100%;
					}
				
					nav ul ul .toggle,
					nav ul ul a {
						padding: 0 40px;						/* 1st #: top&btm  ...  2nd #:  right&left */
					}
				
					nav ul ul ul a {
						padding: 0 80px;						/* 1st #: top&btm  ...  2nd #:  right&left */
					}
				
					nav a:hover,
				 	nav ul ul ul a {
						color: #ffffff ;
						background-color: #555555;
					}
				  
					nav ul li ul li .toggle,
					nav ul ul a,
				   nav ul ul ul a{
						padding:10px 40px;					/* offset of 1st dropdowns: 1st #: top&btm  ...  2nd #:  right&left */
						color:#FFD700;
						font-size:14px; 
					}
				  
				  
					nav ul li ul li .toggle,
					nav ul ul a {
						color: #ffffff ;
						background-color: #000000; 
					}
				
					/* Hide Dropdowns by Default */
					nav ul ul {
						float: none;
						position:static;
						color: #23561F;
						/* has to be the same number as the "line-height" of "nav a" */
					}
						
					/* Hide menus on hover */
					nav ul ul li:hover > ul,
					nav ul li:hover > ul {
						display: none;
					}
						
					/* First Tier Dropdown */
					nav ul ul li {
						display: block;
						width: 100%;
					}
				
					nav ul ul ul li {
						position: static;
						/* has to be the same number as the "width" of "nav ul ul li" */ 
				
					}
				
	}
				
	@media all and (max-width : 480px) {
		.largeTable {display: none;}
		.leftLinks {display: block;}
		.picSmall {display: block;}
	   .smallTextDiv {display: block;}
	}
				
	@media all and (max-width : 330px) {
	   .copyright_top {display: none;}
		.copyright_topSmall {display: block;}	
		.largeTable {display: none;}
		.leftLinks {display: block;}
		.picSmall {display: block;}
	   .smallTextDiv {display: block;}

		nav ul li {
		   display:block;
			width: 94%;
		}
	}