/*
    Name: Reset Stylesheet
    Description: Resets browser's default CSS
    Author: Eric Meyer
    Author URI: http://meyerweb.com/eric/tools/css/reset/     
	MONKEYED WITH BY: dean cameron
*/

/* v1.0 | 20080212 */
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, font, 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 {
    background: transparent;
    border: 0;
    font-size: 100%;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

body {line-height: 1; position: relative;}

ol, ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* -------------------------------------
			MY STYLES FOR SELECTORS
---------------------------------------- */      
a,
a:visited,
a:active{                   
	color: teal;    
	font-size: 14px;      
	font-weight: 900;
	line-height: 1.4em;
}        

a:hover{
	color: #22A277;    
	font-size: 14px;
}

a:active{
	color: red;
}  

a.tt {
    position: relative;
    text-decoration: none;
    z-index: 24;
}
a.tt span {       
	display: none;
}
a.tt:hover {            
    z-index: 25;
}
a.tt:hover span.tooltip {      
	background: #fff;     
	border:1px solid #000;
    color: #000;
    display: block; 
	font-weight: normal;
    left: -35px;
    opacity: 1;
    padding: 5px;
    position: absolute;
    text-align: center;
    top: 40px;
    min-width: 300px;
}    

.second a.tt:hover span.tooltip,
.last a.tt:hover span.tooltip{
	left: -90px;
}  

body{
	font: 16px sans-serif;    
	background-color: #EEE8DA;
}

ul{
	width: 200px;
}                

li{                           
	margin: 3px;
	padding: 3px;
}     

header{     
	background:#EEE8DA url() 0 0 no-repeat;
	outline:0px solid #000;    
	height: 342px;
	overflow: visible;
} 

#explain{                      
	background: #8AAD65 url('../images/garyoldman.jpg') -10px -100px no-repeat;  
	border:1px solid #8AAD65;                                                 
	color: #fff;
	line-height: 1.1em;      
	margin: 0 auto;
	padding: 20px 10px 20px 5px;    
	position: relative;
	text-align: left;   
	width: 625px;
}      

#explain{
   	opacity: 0.7;
	-moz-opacity: 0.5;
	filter:alpha(opacity=50);   	
	border-radius: 9px 9px 0 0;
	-moz-border-radius: 9px 9px 0 0;
	-webkit-border-radius: 9px 9px 0 0;
	-o-border-radius: 9px 9px 0 0;
}

#explain p{        
	color: #fff;
	font-size: .9em;  
	margin-top: 1em;     
	opacity: 1;  
	text-emphasis:dot;  
	text-shadow: 1px 2px 2px #000;
	-moz-text-shadow:1px 5px 3px #999;
	-webkit-text-shadow:1px 5px 3px #999;
	-o-text-shadow:1px 5px 3px #000;
}    

#explain dd{               
	background-color: #8AAD65;  
	border:1px solid #fff;    
	bottom: -76px;             
	color: red;                     
	display: block;       
	outline: 5px solid #8AAD65;  
	padding-bottom: 15px;        
	position: relative;
	text-align: center;   
	width: 629px;
}         

#explain dd em{                       
	color: red;
	display: inline-block;     
	font-style: normal;
	padding-top: 15px;            
}             
      
#recapHolster{      
/*	border:1px solid #000;      */
	clear: both;          
	float: left;
	margin: 10px 10px 0 100px;   
	position: relative;
	width: 550px;
	
} 

#recapHolster h1{
	color: #8AAD65;
}                                       
ul.recap {                                
	float: left;                   	                               
	margin:20px 0;           
	width: 250px;
}         
ul.recap a{
	font-size: .80em;
}    
ul.recap:nth-of-type(3){    
	clear:both;           
	margin-top: 0;
}                 
ul.recap:last-of-type{     
	margin-top: 0;
	outline-right:0;    
}
.example{                            
	background-color: #cbe5f8;
	border: 1px solid #999;
}                                               
.exampleII{                            
	background-color: red;
	border: 1px solid #999;
}
   
hr.separating{   
	float: left;  
	height: 400px;
	margin: 40px 0 0 -30px;
	width: 1px;
	color: red;
}

div#Oldman{                     
	float: left;
	margin: 0 auto;      
	margin-top: 10px;
	padding-top: 30px;  
	width: 400px;       
}     

div.project{
	float: left;
	margin: 0 5px;      
}  

.project ul {
	width: 175px;         
}     

	.project ul li{
		height: 30px;  
		line-height: 30px;
	}
      
.project:last-of-type{      
	margin-right: 0px;   
}
h1{
	color: #444;   
	margin: 0 auto;
	margin-top: 10px;
	width: 600px;
}   

.note{    
	display: inline; 
	font-size: .6em;  
	font-weight: normal;
	margin: 0 0 0 5px;
}       
     
#myMessage{                   
	background-color: #78060B;
	border-radius:5px;        
	color:#fff;
	display:none;      
	font-size: 25px;       
	padding:10px; 
	text-align: center;            
	z-index:10;
}     

#return a{      
	background: #c1c1c1;   
    border: 1px solid #000;  
	color: blue;
	display: block;           
	height: 20px;
    left: -10px;         
	outline: 1px solid red;
    position: relative;
    text-align: center;
    top: -200px;
    width: 200px;        
	-webkit-transform: rotate(-90deg);	
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
}          

#return a:hover{
	color: #fff;
}
  
@media screen and (max-width: 1074px){
	#Oldman{
		border:0px solid #000;    
		left: 100px;
		position: relative;
	}     
	hr.separating{
		display: none;
	 } 
	
}  

@media screen and (max-width: 800px){
	#return a{      
	    left: -60px;                 
	    top: 150px;   
	}	
}   

@media screen and (max-width: 700px){  
	header{
		background:#EEE8DA url() 0 0 no-repeat;  
		margin-bottom: 50px;
	}   
   	#explain{                      
		background: #EEE8DA url('../images/garyoldman.jpg') -10px -100px no-repeat;  
		border:1px solid #EEE8DA;                                                 
		color: #fff;
		line-height: 1.1em;      
		margin: 0 auto;
		padding: 20px 10px 20px 5px;    
		position: relative;
		text-align: left;   
		width: 400px;
	}      

	#explain{
	   	opacity: 0.7;
		-moz-opacity: 0.5;
		filter:alpha(opacity=50);   	
		border-radius: 9px 9px 0 0;
		-moz-border-radius: 9px 9px 0 0;
		-webkit-border-radius: 9px 9px 0 0;
		-o-border-radius: 9px 9px 0 0;
	}
	#explain dd{ 
		width: 404px;
	}
	
 	hr.separating{
		display: none;
	}   
	
	#return a{      
	    left: -60px;                 
	    top: 150px;   
	} 

}

@media screen and (max-width: 500px){  
	#explain{           
		background: #EEE8DA url('../images/garyoldman.jpg') -75px -100px no-repeat; 
		width: 375px;
	}  
	#explain dd{
		width:379px;
	}      
	
	ul.recap{    
		clear:both;           
		margin-top: 0;
	} 
	
	#recapHolster h1 {       
		margin: 0;
		margin-left: 40px;
		width: 230px;  	   
	}                  
	
	#recapHolster h1 span{  
  	    clear: both;
		float: left;   
		margin-left: -30px;
    	width: 300px;
		}   
		
	.project ul li{      
		font-size: 12px;   
		height: 20px;
		line-height: 20px;
	}    
	
	.project h4{
		font-size: 13px;
	}   
	
	#return a{      
	    left: -40px;                 
	    top: 150px;   
	} 

}