/****** Stylesheet for CSS Ninja Garden Web site by Jolene Belanger ******
* Based on Version 1.5, modified by Jon Ippolito to add comments and extract stylesheet.
*/
/* ________ Containers, Headings, and Navigation. ________ */
body {
	background-color: hsla(180,30%,50%, 1) ;
	text-align: left;
    font-family: Gill Sans, Arial ;
    font-size: 1em;
    color: hsla(180, 45%, 30%, 1); 
}
a {
	text-transform: uppercase;
    text-decoration:  none ;
  	color: hsla(180, 50%, 55%, 1) ;
}
a:hover {
    text-decoration:  underline ;
    color: hsla(180,50%,30%, 1);
}
#main-container {
	width: 90%;
	position: relative;
	margin: 0 auto;
	background-color: hsla(180, 10%, 15%, 1);
}
	#logo {
		position: relative ;
		margin-bottom: 0px;
		background-repeat: no-repeat;
		background-position: top;
		background-size: 100%;
		background-image: url(../media/NinjaStory.jpg);
		padding-top: 100px;
		top: -100px;
		padding-bottom: 300px;
	}
	/*#watermark {
	    position: absolute ;
        background-color:  DarkKhaki;
        margin-top: 190px;
        margin-left: 10px;
	    height: 340px ;
	    width: 205px ;
		background-image: url(../media/cleanmark.png) ;
	    background-repeat: no-repeat ;
	    -moz-opacity:.50;
	    _filter: alpha(opacity=50) ; /* Hack for IE. 
	}*/
	.global-navigation {
	    position: absolute;
        top: -8px ; 
	    height: 35px ;
	    width: 100% ;
	    background-color: hsla(180, 23%, 33%, 1); ;
	    vertical-align: bottom;
	    overflow: auto;

	}
		.navigation-link, .navigation-link-over {
		    position: relative;
		    width: 25% ;
		    float: left;
		    right: -65px;
		    margin-left: 2%;
		    margin-right: 2%;
			margin-top: 3px ;
			padding:  .3em;
		    border: solid 1px hsla(180, 70%, 90%, 1) ;
		    text-align: center ;
			font-size:  15px ;
			color: azure ;
		}
		.navigation-link-over {
			cursor:  pointer ;
			background-color:  hsla(180, 35%, 80%, 1);	
		}

		
		
	/* ________ Description ________ */
	#description-container {
	    position: relative;
        left: 350px;
        top: -80px;
	    width: 64%;
	    height: 600px;
		padding: 1em 1.5em ;
	    font-family: Gill Sans, Verdana ;
	    border:3px solid teal;
	    background-color: azure;
	    background-image: url(../media/ninja-pounce.jpg);
	    background-repeat: no-repeat;
	    background-size: 100%;

	    font-size: 16px ;
		_font-size: 16px ; /* Hack for IE (Windows fonts are bigger). */
	}
		#description-container p {
			margin-top: 1em ;
			margin-bottom: .5em;
			padding-top: 3px;
			margin-left: 30%;
			margin-right: 3%;
		
		}
		#description-container em {
			font-style:  normal ;
			
		}
/* ________ Links to Other Projects ________ */
	#other-projects {
		position:  absolute ;
		top: 320px;
		width: 250px;
		padding-left: 2px;
		padding-right: 22px;
		padding-top: 2px;
		padding-bottom: 2px;
		margin-left: 2%;
		margin-right: 70%;
		border-left: dotted 1px azure;
		border-width: 2px; 
		font-size:  16px ;
		text-align: center ;
		_height: 116px ; /* Hack for IE. */
		

	}
		.other-project, .other-project-over {
			position:  relative; 
			width: 100% ;
			height:  40px ;
			margin: 2% ;
			padding: 2%;
			background-repeat: no-repeat;
			background-color: hsla(180,50%,30%, 1) ;
			color:  hsla(180, 40%, 60%, 1) ;
			
		}
		.other-project-over {
			background-color:  hsla(180, 30%, 10%, 1) ;
			color:  hsla(180,50%,30%,1) ;
		}

.footer{
position: absolute;
bottom: 0px;
left: -27px;
top: 715px;
width: 468%;
height: 100px;
background-color: hsla(180, 30%, 30%, 1) ;   
}