/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;


vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
	
	
	/* ---------------------  GLOBAL STYLES ----------------------  */



			/***In the HTML in step one we placed the large image inside a <span>, now we move it off the page until it's required***/
ul.enlarge span{
position:absolute; /*see support section for more info on positioning*/
left: -9999px; /*moves the span off the page, effectively hidding it from view*/
}

     
	
	/***Style the unordered list with the class 'enlarge'***/
ul.enlarge{
list-style-type:none; /*remove the bullet point*/
}
ul.enlarge li{
display:inline-block; /*places the images in a line*/
position: a; /*allows precise positioning of the popup image when used with position:absolute - see support section */
z-index: 0; /*resets the stack order of the list items - we'll increase in step 4. See support section for more info*/
margin:4px 4px 4px 4px; /*space between the images*/
}
	
	
/***Note: This styling will apply to both the thumbnail and popup image, unless you override these styles in step five***/
ul.enlarge img{
/*give the thumbnails a frame*/
background-color:#000; /*frame colour*/
padding: 6px; /*frame size*/
/*add a drop shadow to the frame*/
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
/*and give the corners a small curve*/
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}	
	
	
	ul.enlarge li:hover{
z-index: 50; /*places the popups infront of the thumbnails, which we gave a z-index of 0 in step 1*/ 
cursor:pointer; /*changes the cursor to a hand*/
}
/***We bring the large image back onto the page by reducing left from -9999px (set in step 2) to figures below***/ 
ul.enlarge li:hover span{ /*positions the <span> when the <li> (which contains the thumbnail) is hovered*/ 
top: 200px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: 200px; /*distance from the left of the thumbnail to the left of the popup image*/
}
/***To make it look neater we used :nth-child to set a different left distance for each image***
ul.enlarge li:hover:nth-child(2) span{
left: -100px; 
}
ul.enlarge li:hover:nth-child(3) span{
left: -200px; 
}
	/ 
	/***Override the styling of images set in step 3 to make the frame smaller and the background darker***/
ul.enlarge span img{
padding: 2px; /*size of the frame*/
background: #ccc; /*colour of the frame*/
}
/***Style the <span> containing the framed images and the caption***/
ul.enlarge span{
/**Style the frame**/
padding: 10px; /*size of the frame*/
background:#ccddff; /*colour of the frame*/
/*add a drop shadow to the frame*/
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
/*give the corners a curve*/
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius:1px;
/**Style the caption**/
font-family: "sans-serif"; /*Droid Sans is available from Google fonts*/
font-size:.6em;
text-align: center;
color: #495a62;
}


@media screen and (min-width: 00px) 
{    

a        {text-decoration: none; }

a:link  {color: #0055ff;
		}

a:visited {color:  #9F81F7;
		}

.archeangalleryBGimage {background-image: url("AG_IMG_4258b.jpg");
			background-size: cover;
			background-repeat:no-repeat;
			
			overflow-x: hidden;
}

article h1   {text-align: center;
}
article h3  {text-align: center;}

article p    {text-align: left;
			  max-width: 100%;
			  font-family: "Roboto","Verdana","Courier New", "Charlemagne Std","serif";
			  font-size: .9em;
			
}

article     {height: 600px;
			
}

#aboutMePic		{padding-bottom: 1%;
				 padding-top: 2%;
				 float: right;
				 max-width: 50%;
}

#aboutMePicWeb	{padding-bottom: 1%;
				 padding-top: 2%;
				 float: right;
				 max-width: 40%;
}

#aboutMeSection h1, h2, h3  {color: #0055ff;}

#aboutMeSection		{margin-top: 10%;
					padding: 8%;
					height: 100%;
					max-width: 100%;
					float: left;
					text-align: left;
					background-color: #ffffff;
					min-width: 700px;
					color: #2E2E2E;}
					}

#aboutMeSectionWeb	{margin-top: 9%;
					padding: 8%;
					padding-top: 12%;
					padding-bottom: 10%;
					height: 100%;
					max-width: 100%;
					float: left;
					text-align: left;
					background-color: #ffffff;
					
					text-overflow: scroll;
					}

.Archean_Logo    {margin-top: 10%;
				  background-color:black ;
				  height: 88%;		  
}

.background_Img  {width: 100%; 
				background-size: cover;         
							
}

body  	{
		background-color: black;
		width: 100%;
		height: 100%;
		overflow-x: hidden;
		}
	
@media screen and (min-width: 500px){
body  {background-color:  black;
		
}
}

@media screen and (min-width: 800px){
body  {background-color: black;
	  
}
}

#clear   {width: 130px;
}

.clipShowsBGimage {background-image: url("");
			background-size: cover;
			background-repeat:no-repeat;
			
			overflow-x: hidden;
}

#commentsBox   {height: 30%;
				width: 100%;
				color: black;
				}



#editingJobListTable    {  font-family: "Courier New", "Charlemagne Std", "Trajan Pro", serif;
							font-size: 1.1em;
				}

#editingJobListTable2    {  font-family: "Courier New", "Charlemagne Std", "Trajan Pro", serif;
							font-size: 1.1em;
				}

#editReelSection {
	       			max-width: 100%;
	       			padding: 5%;
		/*	border: 4px double ;*/
					width: 90%;
					height:100%;
					padding-top: 13%;
					background-color: black;
		}

.editReelBGimage { background-image:url("");
					background-size: cover;
					background-repeat:no-repeat;
					
					overflow-x: hidden;
}

#editReelSection h1 {color: #CED8F6;
					font-weight: 300;
	}

#EDITheaderBg h1    {
			padding-top: 0%; 
			text-decoration: none; 
}

#EDITheaderBg h2 {color: #CED8F6;
			padding-top: 6px; 			
}

#EDITheaderBg  {	width: 250px;
			text-decoration: none;
			padding-top: .8%;
			/* display: inline;  */
 			opacity: .8;
			float:left;
		}

#EDITheaderBg img {float: left;
			   padding-bottom: 0%;
			   padding-right: 20px;
			   padding-left: 30px;
			   padding-top: 0%;
			}

#EDITmenu {width: 100%;
			   height: 20px;
			padding-top: .9%;
			margin-left: 30%;
			text-decoration: none;
			text-align: center;
			background-color: transparent; 
	}
	
#EDITfooterContainer {width: 200px;
			height: 100%;
			text-align: right;
			padding-left: 20%;
			padding-right: 10%;
			padding-top: 45px;
			padding-bottom: 0%;
			margin-top: 0%;
			margin-left: 640px;
		}

#EDITfooterContainer img {padding-right: 10%;			  
}

.fancybox-iframe   {
					height: 100%;
					width: 100%;
					background-color: #00FF00;
					z-index: 7;
}

.fancybox-slide--iframe .fancybox-content {
					width  : 80%;
					height : 80%;
					font: "Trajan pro regular"; 
					background-color: #00FF00;
					text-align: center;
}   

.fancybox {
					width  :100%;
					height : 100%;
					margin: 0;
					position: relative;
					z-index: 5;
}

.fancybox-bg {background-color: #00FF00;
					
}
.fancybox-caption__body {font-family: "Courier New", "Charlemagne Std", "Trajan Pro", serif;
						 color: #D8D8D8;
}

.formBGimage  {  background-image:url("Telescope Window Web Dark.jpg");
	     		background-size: cover;
				background-repeat:no-repeat;
				
				}

#formContainer  { 
				width: 30%;
				height: 100%;
				text-align: left;
				padding-top: 40%;
				margin-left: 27%;
				margin-right: 4%;
				padding: 20px;
				padding-bottom: 0px;
				padding-left: 120px;
				border: 0px solid #000;	
				overflow: hidden;
		}

#formContainer h2  {text-align: center;
					color: #848484;
}

#footerContainer {width: 20%;
				padding-left: 48%;
				padding-top: 66%;
				padding-bottom:1%;
				position: sticky;
				z-index: 3;
				bottom: 0;
				}	
		
#footerContainer img {padding-right: 00%;
					  filter: saturate(.0) drop-shadow(1px 1px 1px black);	
}

#gallery  {float: left;
			height:100%;
			width: 100%;
	        padding-top: 12%;
			border: 0px double ;
			background-color: black;		
}

#gallery h1 {color: #848484;
			font-weight:400;
}

.ghostsBGimage  {background-image: url("GHOSTS_NEB_BW2.png");
			background-color: #000;
			background-size: cover;
			background-repeat:no-repeat;
			}

#GhostsGallery  {float: left;
			height:100%;
			width: 100%;
	        padding-top: 15%;
			border: 0px double ;				
}

#ghostsSection {
		   
	       max-width: 100%;
	       padding: 5%;
		/*	border: 4px double ;*/
			background-color: #ffffff;
			background: url("Telescope Blue.jpg") ;
			width: 90%;
			height:550px;
			padding-top: 10%;
		}
		
h1		{font: inherit;
		font-size: 18px;
		font-family: "New Times Roman","Courier New", "Charlemagne Std", "Trajan Pro", "serif";
		color:  #BDBDBD;
		text-decoration: none;
		text-shadow: -1px 1px 0 #000;
		}
			
h2   	{color: #0055ff;
		font: inherit;
		font-size: 20px;
		font-family: "New Times Roman","Courier New", "Charlemagne Std", "Trajan Pro", "serif";
		text-decoration: none;
		}
			
h2:visited  {color: #4B088A;
		font: inherit;
		font-size: 20px;
		font-family: "New Times Roman","Courier New", "Charlemagne Std", "Trajan Pro", "serif";
		text-decoration: none;
		}

h3, li  {font: inherit;
		font-size: 14px;
		font-family: "New Times Roman","Courier New", "Charlemagne Std", "Trajan Pro", "serif";
		color: #A4A4A4;
		text-decoration: none;
		}

h4   	{color: #848484;
		font: inherit;
		font-size: 30px;
		font-family:"Courier New", "Charlemagne Std", "Trajan Pro", "serif";
		text-decoration: none;
		}

h5   	{color: #6E6E6E;
		font: inherit;
		font-size: 30px;
		font-family: "New Times Roman","Courier New", "Charlemagne Std", "Trajan Pro", "serif";
		text-decoration: none;
		}

h6   	{color: #BDBDBD;
		font: inherit;
		font-size: 18px;
		font-family: "Courier New", "Charlemagne Std", "Trajan Pro", "serif";
		text-decoration: none;
		text-shadow: -1px 1px 0 #000;
		}

h7   	{color: #F2F2F2;
		font: inherit;
		font-size: 15px;
		font-family: "New Times Roman","Courier New", "Charlemagne Std", "Trajan Pro", "serif";
		text-decoration: none;
		text-shadow: -1px 1px 0 #000;
		}

h8   	{color: #F2F2F2;
		font: inherit;
		font-size: 18px;
		font-family: "New Times Roman","Courier New", "Charlemagne Std", "Trajan Pro", "serif";
		}

h8:link {color: #0055ff;}

h9   	{color: #E6E6E6;
		font: inherit;
		font-size: 18px;
		font-family: "Open Sans","Courier New", "Charlemagne Std", "Trajan Pro", "serif";
		text-decoration: none;
		text-shadow: -1px 1px 0 #000;
		}

header {
	    width: 100%;
	    height: 10%;
		padding-right: 0%;
		padding-left: 0px;
		padding-top: 2%;
		padding-bottom:3%;
		position:absolute;
		z-index: 6;
		
		}

#headerBg img {float: left;
			   padding-bottom: 0%;
			   padding-right: 20px;
			   padding-left: 30px;
			   padding-top: 0%;
			}

#headerBg  {
			width: 250px;
			text-decoration: none;
			padding-left: 0%;
			/* display: inline; */
			opacity: .8;
			float:left;
		}
		
#headerBg h1    {
			padding-top: 0%;  
}			

.headingStripe   {background-color: #6E6E6E;
	color: #000000;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	font-weight: bold; 
			}

#homepageBackground  {	
	
		text-align: center;
		width: 100%;
		height: 100%;
		margin-top: 0%;
		padding: 0%;
		padding-top:0%;
		padding-left: 0%;
		padding-bottom: 0%;
		border: 0px double #000;
		text-decoration: none;
		}		

#homepageBackground div {
    	position:absolute;
		z-index: 0;
}
#homepageBackground div.previous {
		z-index: 1;
		
}
#homepageBackground div.current {
						z-index: 2;
						background-color: black;
						
						}

hr     {font-size: 7em;
		color: #FF8000;
		}

#iframeContainer {
				width:60%;
				height:60%;
				padding:05%;
				background-color:#000;
				z-index: 2;
				margin: auto;
	    }

.indexBGimages  {width: 100%;          /* got rid of .background_Img here */
				height: 100%;
				background-size: cover;
				background-attachment: fixed;
				}
input {
    float: right;
}

.jditeBGimage {background-image: url("JDITE_REDCAMb.jpg");
			background-size: cover;
			background-repeat:no-repeat;
			
			overflow-y: auto;
}

#jdate_DVD  {color: #424242;}

#jdite_gallery  {float: left;
			height:100%;
			width: 100%;
	        padding-top: 10%;
			border: 0px double ;
		}
		
#jdite_gallery h1 {color: #848484;
}

#jobListSection {
		   max-width: 100%;
		   padding-top: 10px;
		/*	border: 4px double ;*/
		   background-color: #000000;
		   height:770px;
			position:static;
		}
		
#jobListSection h2 {color: #000000;
				}
.jobListBGimage {background-color: #000000;
			background-size: cover;
			background-repeat:no-repeat;
			
			overflow-y: auto;
}

#ghostsSection h1 {color: #000;
					font-weight: 300;
					}

.label     {color: #BDBDBD;
			font-family: "Courier New";
}

.list::-webkit-scrollbar {
    -webkit-appearance: scrollbartrack-vertical;
}    

nav iframe  {text-decoration: none;
}

#menu {width: 100%;
	   height: 20px;
		margin-left: 30%;
		text-decoration: none;
		text-align: center;
		background-color: transparent; 
	}

#middleTable    {  font-family: "Courier New", "Charlemagne Std", "Trajan Pro", serif;
							font-size: 1.1em;
				}

#middleTable2    {  font-family: "Courier New", "Charlemagne Std", "Trajan Pro", serif;
							font-size: 1.1em;
				}

nav	{
		text-align: center;
		max-width:100%;
		height: 100%;
		margin-top: .5%;
		padding: 0%;
		padding-left: 0%;
		padding-bottom: 0%;
		background-color: transparent; 
		border: 0px double;
		text-decoration: none;
		position: relative;
		
		background-color: black;
		}

nav:link {color: #0055ff;
}

#naviBar ul, #naviBar li {    /*this is menu background not hover bg*/
				padding: 0px;
				list-style-type: none;
				text-align: center;
				width: 60%;
				}

#naviBar li:hover a, #navibar ul:hover a {background-color: #000;}

#naviBar a {
				text-decoration: none;
				border-top: 0px solid ;
				border-left:0px solid ;
				border-right:0px solid ;
				border-bottom:0px solid ;
				width: 60%;
				color: #848484;
				}
#naviBar a:hover {color: #A9BCF5;
				background-color: #000;
				border-top: 0px #ffd9b3;
				border-left:0px #ffd9b3;
				border-right:0px #ffd9b3;
				border-bottom:0px #ffd9b3;
				opacity: 0.8;
				padding: 0px;
				}

#oracleSection {
	       max-width: 100%;
	       padding: 5%;
		/*	border: 4px double ;*/
			background-color: #ffffff;
			background: url("Rome Web.jpg") ;
			width: 90%;
			height:550px;
		}

#oracleSection h1 {color: #000;
				   font-weight: 300;
			}



#realityBody {
		background-color: #000;
		background-repeat: no-repeat;
		width: 100%;
		height: 900px;
		z-index: 2;
}

.scriptedBGimage {background-image: url("");
			background-size: cover;
			background-repeat:no-repeat;
			
			overflow-y: auto;
}

section  { text-align: center;
		position: absolute;
		clear: both;
		float: left;
		height: 100%;
		width:100%;
		margin-top: 0%;
		padding: 0%;
		padding-left: 0%;
		padding-bottom: 13%;
		border: 0px double ;
		text-decoration: none;
	    background-size: cover;
		background-repeat:no-repeat;
		 
		}

.stripe     {background-color: #FAFAFA;
			color: #000000;
			border-top: 1px solid #000000;
			border-bottom: 1px solid #000000;
			width: 90%;
			}

.stripe2     {background-color: #6E6E6E;
			color: #000000;
			border-top: 1px solid #000000;
			border-bottom: 1px solid #000000;
			width: 90%;
			}

#style4  {text-decoration: underline;}

			#submit   {width: 130px;		
}

td  {padding-left: 10px;}

table {
	width:90%;
	margin-left: auto;
	margin-right: auto;
	background-color: #A4A4A4;
}


tr.stripe {
	background-color: #FAFAFA;
	color: #000000;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	width: 90%;	
}

.VoicesBGimage  {background-image: url("");
			background-color: #000;
			background-size: cover;
			background-repeat:no-repeat;
			}

#VoicesGallery  {float: left;
			height:100%;
			width: 100%;
	        padding-top: 15%;
			border: 0px double ;				
}

#webDev_gfx_links  {position:static;
					height: 100px;
					font-family: "Courier New", "Charlemagne Std", "Trajan Pro", serif;
					font-size: 1.1em;
					;
				}

}