/* horiz menu for Sutherland Page */





/*--------------- xjames portfolio table ------------------------*/

div.subcontent {
		position:relative;
		float:left;
		top:150px;
        	width: 800px;
        	margin-right:40%;
		border: none;


    
}

table.contained {
        width: 800px;
		margin: 20px 40% 5% 5%;
        border-collapse: collapse;
		font-family: 'Shadows Into Light Two', cursive;
  		font-weight: normal;
  		font-style: normal;
  		font-size: 1.0em;
    		color: #333;
   
}

table td {
            	border: 0px solid #999;
        
}

		





/*--------------- xjames pages ------------------------*/

td, th, caption { 

font-weight: normal; text-align: left; 

}

.folio { 

font-weight: normal; text-align: left; 
font-family: Shadows Into Light Two, cursive;
font-weight: normal;
font-style: normal;
font-size: 1.0em;
color: #333

}

.email-title{ 

font-weight: bold; text-align: left; 
font-family: Shadows Into Light Two, cursive;
font-weight: normal;
font-style: normal;
font-size: 1.3em;
color: #333

}


.email{ 

font-weight: bold; text-align: left; 
font-family: "Lucida Console", monospace;
font-weight: normal;
font-style: normal;
font-size: 1.0em;
color: darkred;

}


img, fieldset { 
/*position: sticky;
float:right;
top: 200px;*/
border: 0; 

}





/*-------------- fresh start --------------------*/

/*@media (min-width: 40em) {*/

* {
	font-family:  'Shadows Into Light Two', cursive
	}





body {

margin: 0px 0px 0px 0px ;

font-style: normal; 

background: #fff; /*#2d3c1f; leave as #fff for testing*/

}



#container {


position: relative;
font-family: Shadows Into Light Two, cursive;
text-align: left;
width: 100%;
padding: 0 0 0 0;
overflow: visible;

}

#subcontainer {

margin-left: 5%;
position: relative;
font-family: Shadows Into Light Two, cursive;
text-align: left;
width: 850px;
top:-75px;

}

#homecontainer {
max-width: 1600px;
height: 900px;
margin-right: auto;
margin-left: auto;
position: relative;
text-align: left;
overflow: hidden;
background-color: #060407;

}

#homecontainer img {
	width: 300px;

}




#header {
margin: 0px; 
height: 120px; /*aligns dark green menu tabs and banner border band */
width: 100%; 
margin: 0px 0px 0px 0px ;
padding: 0px;
float:left; /*to hold background top & left */
font-family: cursive; 
/*background: url(./horizontalmenu_banner.jpg) norepeat-x ; top logo space image */
text-align: center; /*header text: left, right, or center */



}


/* menu style */
#menu .top{
	z-index:1000;
	position: sticky; /*relative*/
	float:right;
	margin-right:5%;
	width:40%;
	top: 35px;
	right: 3%;
	padding: 0px;
	font-family: Shadows Into Light Two, cursive;
	font-size: 1.7em;
	font-weight:bold;
	/*color: #111;*/

}



#menu a{
	text-transform: uppercase;
	text-decoration: none;
    list-style-type: none;
	margin-top: 0px;
	margin-left: 10px;
    margin-right: 10px;
    padding-top: 5px;
	color: rgba(256,200,100,1); /* menu text color */
	border-style: solid;
	border-width: 3px;
	border-width-bottom:2px;
	border-padding:0px;
	border-color: rgba(120,120,120,0);
}

#menu .index a {
	text-transform: uppercase;
	text-decoration: none;
    list-style-type: none;
	margin-top: 0px;
	margin-left: 10px;
    margin-right: 10px;
    padding-top: 5px;
	color: #fff; /* menu text color */
	border-style: solid;
	border-width: 3px;
	border-width-bottom:5px;
	border-padding:0px;
	border-color: rgba(120,120,120,0);
}




#menu li {
    display: inline;
	padding: 20px;
	}
	
#menu .thispage a {
	color:#904606; /*this page text color*/
	background-color:rgba(0,0,0,0); /*no background surrounding menu items*/
	border-bottom-color: pink; /*border underline only*/
}


#menu a:hover {

	text-decoration: none; /*no css underline;*/
	/*background: rgba(150,140,130,0.1); shaded background*/
	background-color: rgba(0,0,0,0); /*no background*/
	/*color: white;*/
	color: rgba(134,141,0,1);
	border-width: 3px; /*full border keeps items from shifting on hover*/ 
	border-bottom-color: pink; /*border underline only*/
}

#menu #index a:hover {

	text-decoration: none; /*no css underline;*/
	/*background: rgba(150,140,130,0.1); shaded background*/
	background-color: rgba(0,0,0,0); /*no background*/
	/*color: white;*/
	color: rgba(240,240,200,1);
	border-width: 3px; /*full border keeps items from shifting on hover*/ 
	border-bottom-color: blue; /*border underline only*/
}


#menu .active {
	/* not used */
}	







#maincontent {
position: sticky; /*relative;	
float: left;*/
top:0;
left:0;
/*width: 1600px;*/
height: 800px;
padding: 50px 12px 12px 50px;
background-color: #060409;
background: url(images/background.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
color: #fff;
font-size: xx-large;
}




div.jamesbio {
position: relative;
float: left;
top: 85px;
left: 5%;
/*margin-left: auto;
margin-right: auto;*/
margin-top:20px;
width: 820px;
height: auto;
padding: 0px 12px 12px 100px;
background-color: #fff;
font-family: Shadows Into Light Two, cursive;
font-weight:normal;
font-size: large;

}

div.jamesbio p{

    line-height: 1.8;
}


div.jamespic {
	width:57%; /*100% of div width*/
	top:50%;
	margin-top:10px;
	margin-left: auto;
	margin-right: auto;
}	


#lady{
position:absolute; 
right: 20px;
top: 200px;

}





#maincontent h2{
position:relative;
top:200px;
left:150px;
font-family: sans-serif;
font-size: 1.5em;
font-weight:bold;
text-shadow: 2px 2px #472936;
}

#searching {
	position:relative;
	float:left;
	top:-40px;
	left: 50%;
}


#content img.select{
position: absolute;
z-index: 20;
left: 181px;
top: -21px;

}


#mailform{
	position:relative;
	left: 20px;
	width:60%;
	margin-left:auto;
	margin-right:auto;
	
}



 #footer {

position: relative;
top:80%;
margin-right: auto;
margin-left: auto;
height: 50px;
width:400px; 
clear:both;
text-align: center; 
font-size: 1.3em;  
line-height: 4em; 
font-family: 'Give You Glory', cursive;
color: #D14825; /*orange*/
 }
	
/*.notes{ 
z-index=1000;
    max-width: 600px;
    margin-top: 0px ;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0;
    position: relative;
	color:#fff;
}*/
	
.bio-grey{

top:200px;

font-family: 'Give You Glory', cursive;
color: #333; /*dk grey*/
 }


a .bio-orange{

font-family: 'Give You Glory', cursive;
color: #D14825; /*orange*/
 }






h1, h2, h3, h4, h5 {

font-family: Shadows Into Light Two, cursive;

}

.intelligent{

font-family: Shadows Into Light Two, cursive;

}





p {

font-family: Shadows Into Light Two, cursive; 

}



p.contact {

text-align: center; 

font-size: 1.50em;  

font-family: Shadows Into Light Two, cursive;

}







/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}