/* CSS for menu gophercreek */
				
	body {
		background: #000000;
		font-size:12px;
		line-height: 12px;        					/* menu link height by padding */
		color: #0099FF;                        /* blue text color - gold: #0099FF*/
		margin: 0;
		padding: 0;										/* 1st #: top&btm  ...  2nd #:  right&left */
		word-wrap:break-word !important;
		font-family: 'Open Sans', sans-serif;
	}
	.paleblu {
		background-color: #B7CDFD;
	}
	        
	table { 
		width: 100%; 
		max-width:800px;
		border-collapse: separate; 
		border-spacing: 1em;
		z-index: 1;
	}
				
				
				
	@media all and (min-width: 561px) {
		.topstrip {
			background-image: url('../gcrf_files/gcrf_topstrip.gif');
			background-repeat: repeat-x;
			height:80px;
			z-index: 1;
		}
		.topstripSmall{display: none;}
		.topSpacer {height: 5em;}
		z-index: 1;
	}

				
	@media all and (max-width: 560px) {
		.topSpacer {height: 5em;}
		.topstrip {display: none;}
		.topstripSmall{
			background-image: url('../gcrf_files/gcrf_topstrip_small.gif');
			background-repeat: repeat-x;
			z-index: 1;
		}
					
	}





/* CSS for Author.cgi */				
   /* ************************************************************************************************ */	

	.inputBoxes{
   	padding-left:6px; 
      max-width:260px; 
      padding-right:6px;
      background-color: #292929;
      color: #ADD8E6;
   }
   .textArea{
   	width:100%;
      max-width: 600px;
      height: 6em;
      padding-left:2%; 
      padding-right:2%;
      background-color: #292929;
      color: #ADD8E6;
   }
   .submitButton{
   	max-width:200px;
      text-align:center;
      background-color: #292929;
      color: #ADD8E6;
   }

	@media all and (min-width: 541px) {
		.textArea{
			height:6em;
         max-width: 600px;
		}
		.captchaNarrow	{display: none;}
		.inputNarrow	{display: none;}
		.msgFormNarrow {display: none;}
	}
   @media all and (max-width: 540px) {
		.textArea{
			width:80%;
			height:6em;
			max-width: 460px;
		}
		.captchaWide {display: none;}
		.inputWide  {display: none;}
		.msgFormWide {display: none;}
	}
	@media all and (max-width: 400px) {
		.textArea{
			width:90%;
			height:10em;
			max-width: 360px;
		}
		.captchaWide {display: none;}
		.inputWide  {display: none;}
		.msgFormWide {display: none;}
	}
	@media all and (max-width: 360px) {
		.textArea{
			width:90%;
			height:12em;
			max-width: 320px;
		}
		.captchaWide {display: none;}
		.inputWide  {display: none;}
		.msgFormWide {display: none;}
	}









	/* CSS for top menu, larger viewports */				
   /* ************************************************************************************************ */	
   				
	#container {
					margin: 0 auto;
					max-width: 890px;
	}

	.copyright_top {
					width: 100%;
					margin:0;
					padding: 0;
					text-align: center;
	}
				
	.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:10px 12px;					/* 1st #: top&btm  ...  spaces the links: 2nd #:  right&left */
		color:#0099FF;
		font-size:14px;						/* 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: 32px; 			/* 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 all and (min-width : 431px) {
		.copyright_btm {display: none;}
	}
				
	@media all and (max-width : 330px) {
		nav ul li {
			display:block;
			width: 94%;
		}
	}
				
	@media all and (max-width : 430px) {
		.copyright_top {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:#0099FF;
			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:#0099FF;
			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:#0099FF;
			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" */ 
		}
				
	}