@charset "utf-8";
/* CSS Document */

Body {
	color:#342512;
	background-color:#CCC;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 15px;
	

	
}
 
 .pnumbers {
	width:20px;
	height:17px;
	background-color:#900;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFF;
	background-position: center center;
	text-align: center;
	padding-top:3px;	 
	 
 }
 
  .pnumbers:hover {
	width:20px;
	height:17px;
	background-color:#fff;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight: bold;
	color: #900;
	background-position: center center;
	text-align: center;
	padding-top:3px;	 
	 
 }
 
 


.col {
	width:900px;
	height:auto;
	padding-top: 20px;
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
	
	-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
	

}
.col2 {
	width:900px;
	height:auto;
	padding-top: 10px;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
	
	-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
	

}
.col3 {
	width:350px;
	height:auto;
	padding-top: 10px;
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
	-moz-column-count: 2; /* Firefox */
	column-count: 2;
	-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
	-moz-column-gap: 40px; /* Firefox */
	column-gap: 40px;
	font-size: 18px;
	color: #FFF;
	line-height: 1.5;
}


.col4 {
	width:900px;
	height:auto;
	padding-top: 5px;
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
	
	-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
	

}



.body-text  {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	line-height: normal;
	font-weight: normal;}	
	
#scroll {
	width:500px;
	height:200px;
	overflow:scroll;
		
	
}


/*Headers*/

.header {
	width:100%;
	height: 220px;
	margin: 0px auto 0px auto;
	background-color:#231f20;
	background-image:url(images/background.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	box-shadow: 0px 3px 10px rgba(0,2,2,2)
	
	}
	
	.header-box{
		width:960px;
		height:220px;
		margin: 0 auto 0 auto;
		padding-top:0px;
	}
	.header-top {
		Width:960px;
		height:0px;
		
		margin: 0px auto 0px auto;
	}
	
.header-left {
	width: 210px;
	height:200px;
	padding-top:0px;
	float:left;
}
.header-right {
	width:750px;
	height:160px;
	padding-top: 0px;
	float:right;
}

.header-text {
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 45px;
	font-weight: bolder;
	color: #003;	
}

.header-text2 

{
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 15px;
	font-weight: bolder;
	color: #003;	
}


/*Shapes*/


#circle {
	width: 180px;
	height: 180px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	border: #fff med solid;
	background-image:url(images/logo.jpg);
	box-shadow: 0px 0px 20px rgba(0,2,2,2);
	background-color: white;
	background-position: center center;
	background-repeat:no-repeat;
}
#triangle-down {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 20px solid #003;
}

#triangle-down2 {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 20px solid #900;
}

/*social media links */

#facebook {
	
	width: 38px;
	height: 38px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	border-radius: 100px;
	border: #355495 med solid;
	background-image:url(images/facebook_hover.jpg);
	box-shadow: 0px 0px 20px rgba(0,2,2,2);
	background-color: white;
	background-position: center center;
	background-repeat:no-repeat;
}

#flicker {
	
	width: 38px;
	height: 38px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	border-radius: 100px;
	border: #355495 med solid;
	background-image:url(images/Flickr-logo.png);
	box-shadow: 0px 0px 20px rgba(0,2,2,2);
	background-color: white;
	background-position: center center;
	background-repeat:no-repeat;
}

#linkedin {
	
	width: 38px;
	height: 38px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	border-radius: 100px;
	border: #355495 med solid;
	background-image:url(images/linkedin.jpg);
	box-shadow: 0px 0px 20px rgba(0,2,2,2);
	background-color: white;
	background-position: center center;
	background-repeat:no-repeat;
}


/*Effects*/



.grow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover, .grow:focus, .grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}




/*navigation*/

.nav-left {
	width:230px;
	height:260px;
	float:left;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	line-height: 1px;
	color: #FFF;
	padding-top:0px;
	padding-left:0px;
	

}

.nav-left:hover {
	width:230px;
	height:260px;
	float:left;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	line-height: 1px;
	color: #FFF;
	padding-top:0px;
	padding-left:0px;
	background-color:#003;
	

}

.nav-center {
	width:230px;
	height:260px;
	float:left;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	line-height: 1px;
	color: #FFF;
	padding-top:0px;
	padding-left: 0px;
	
}

.nav-center:hover {
	width:230px;
	height:260px;
	float:left;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	line-height: 1px;
	color: #FFF;
	padding-top:0px;
	padding-left:0px;
	background-color:#003;
	

}

.nav-right {
	width:230px;
	height:260px;
	float:right;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	line-height: 1px;
	color: #FFF;
	padding-top:0px;
	padding-left:0px;
	

}
.nav-right:hover {
	width:230px;
	height:260px;
	float:left;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	line-height: 1px;
	color: #FFF;
	padding-top:0px;
	padding-left:0px;
	background-color:#003;
	

}

.nav-box{
	width:960px;
	height:40px;
	margin: 0px auto 0px auto;
	text-align: left;
	background: #990000; /* Old browsers */
background: -moz-linear-gradient(top,  #990000 0%, #8f0222 44%, #660001 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#990000), color-stop(44%,#8f0222), color-stop(100%,#660001)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #990000 0%,#8f0222 44%,#660001 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #990000 0%,#8f0222 44%,#660001 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #990000 0%,#8f0222 44%,#660001 100%); /* IE10+ */
background: linear-gradient(to bottom,  #990000 0%,#8f0222 44%,#660001 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#990000', endColorstr='#660001',GradientType=0 ); /* IE6-9 */


	
}
.nav ul ul {
	display: none;
	color:#900;
	margin: 0px auto 0px auto;
	
	
}

	.nav ul li:hover > ul {
		display: block;
		margin: 0 auto 0 auto;
	}
.nav ul {
	
	background-color:#900;
	

	padding: 0 0px;
	
	list-style: none;
	
	display: inline-table ;
	
	width:100%;color:color:#Fff;
	margin: 0px auto 0px auto;
	text-align: left;	
	z-index:1;
	background: #990000; /* Old browsers */
background: -moz-linear-gradient(top,  #990000 0%, #8f0222 44%, #660001 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#990000), color-stop(44%,#8f0222), color-stop(100%,#660001)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #990000 0%,#8f0222 44%,#660001 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #990000 0%,#8f0222 44%,#660001 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #990000 0%,#8f0222 44%,#660001 100%); /* IE10+ */
background: linear-gradient(to bottom,  #990000 0%,#8f0222 44%,#660001 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#990000', endColorstr='#660001',GradientType=0 ); /* IE6-9 */

	
	
	
}
	.nav ul:after {
		content: ""; clear: both; display: block;
	}

.nav ul li {
	float: left;
	
}
	.nav ul li:hover {
	background-color:#660001;
	color:fff;
	font-family: Georgia, "Times New Roman", Times, serif;
	  

	}
		.nav ul li:hover a {
			color: #fff;
		}
	
	.nav ul li a {
		display: block; padding: 15px 10px;
		color: #Fff; text-decoration: none;
	}
.nav ul ul {
	background-color:#900;
	border-radius: 0px;
	padding: 0;
	position: absolute;
	
	width:230px;
	
	text-align: left;
	background: #990000; /* Old browsers */
background: -moz-linear-gradient(top,  #990000 0%, #8f0222 44%, #660001 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#990000), color-stop(44%,#8f0222), color-stop(100%,#660001)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #990000 0%,#8f0222 44%,#660001 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #990000 0%,#8f0222 44%,#660001 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #990000 0%,#8f0222 44%,#660001 100%); /* IE10+ */
background: linear-gradient(to bottom,  #990000 0%,#8f0222 44%,#660001 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#990000', endColorstr='#660001',GradientType=0 ); /* IE6-9 */
opacity: 0.9;
filter: alpha
(opacity=20);
	
}
	.nav ul ul li {
		float: none; 
		
		
		position: relative;
	}
		
			
			
			.nav ul ul li a:hover {
				background-color:900;
			}
.nav ul ul ul {
	position: absolute; left: 100%; top:0;
}


/*Wrappers*/

#wrapper {

width: 910px;
height:820px;
background:#fff;
margin: 0 auto 0 auto;
	padding-left:15px;
	padding-top:25px;
	padding-right:35px;
box-shadow: 0px 3px 10px rgba(0,2,2,2) ;
 }

#wrapper2 {

width: 910px;
height:1070px;
background:#fff;
margin: 0 auto 0 auto;
	padding-left:15px;
	padding-top:25px;
	padding-right:35px;
box-shadow: 0px 3px 10px rgba(0,2,2,2) ;
 }

#wrapper3 {

width: 910px;
height:auto;
background:#fff;
margin: 0 auto 0 auto;
	padding-left:15px;
	padding-top:25px;
	padding-right:35px;
box-shadow: 0px 3px 10px rgba(0,2,2,2) ;
 }


 
#moh {

width: 910px;
height:500px;
background:#fff;
margin: 0 auto 0 auto;
	padding-left:15px;
	padding-top:25px;
	padding-right:35px;
box-shadow: 0px 3px 10px rgba(0,2,2,2) ;
 }
 
 
#hymn {

width: 910px;
height:400px;
background:#fff;
margin: 0 auto 0 auto;
	padding-left:15px;
	padding-top:25px;
	padding-right:35px;
box-shadow: 0px 3px 10px rgba(0,2,2,2) ;
 }
  
  
#medals {

width: 910px;
height:auto;
background:#fff;
margin: 0 auto 0 auto;
	padding-left:15px;
	padding-top:25px;
	padding-right:35px;
	padding-bottom:15px;
box-shadow: 0px 3px 10px rgba(0,2,2,2) ;
 }
 
 
.medals-box {
 width: 910px;
height:auto;
background:#fff;
margin: 0 auto 0 auto;
	padding-left:15px;
	padding-top:25px;
	padding-right:35px;
	padding-bottom:15px;
 }
  
.medals-left {
	 width: 15%;
	 height:200px;
	 float:left;}
	 
.medals-middle {
	 width: 15%;
	 height:200px;
	 float:left;}
	 
.medals-right {
	width: 68%;
	height:200px;
	float:right;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	line-height: normal;
	 }
 
 
#intro {

width: 910px;
height:auto;
background:#fff;
margin: 0 auto 0 auto;
	padding-left:15px;
	padding-top:25px;
	padding-right:35px;
	padding-bottom: 15px;
box-shadow: 0px 3px 10px rgba(0,2,2,2) ;
 }

 
#creed {
width: 910px;
height:auto;
background:#fff;
margin: 0 auto 0 auto;
	padding-left:15px;
	padding-top:25px;
	padding-right:35px;
	padding-bottom: 15px;
box-shadow: 0px 3px 10px rgba(0,2,2,2) ;
 }


#Okinawa {
width: 910px;
height:auto;
background:#fff;
margin: 0 auto 0 auto;
	padding-left:15px;
	padding-top:25px;
	padding-right:35px;
	padding-bottom: 15px;
box-shadow: 0px 3px 10px rgba(0,2,2,2) ;
 }
 
 
#poetry {

width: 910px;
height:auto;
background:#fff;
margin: 0 auto 0 auto;
	padding-left:15px;
	padding-top:25px;
	padding-right:35px;
	padding-bottom: 15px;
box-shadow: 0px 3px 10px rgba(0,2,2,2) ;
 }
 
 		
.media {
	
background-image:url(images/image1.jpg);
  width:500px;
  height:217px;
box-shadow: 0px 3px 10px rgba(0,2,2,2)
  background-repeat:no-repeat;
 

}


	
/*Headlines*/

.headline {
	width:510px;
	height:32px;
	background-color:#003;
	padding-top:8px;
	padding-left:15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bolder;
	color:#FC0;
	}
		
	.link-text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333;		
	}
	
.headline2 {
	width:310px;
	height:32px;
	background-color:#003;
	padding-top:8px;
	padding-left:15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bolder;
	color:#FC0;
	}
	
.headline3 {
	width:900px;
	height:32px;
	background-color:#003;
	padding-top:8px;
	padding-left:15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bolder;
	color:#FC0;
	}
	
.headline4 {
	width:315px;
	height:32px;
	background-color:#900;
	padding-top:8px;
	padding-left:15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bolder;
	color:#fff;
	}
	
.headline5 {
	width:300px;
	height:32px;
	background-color:#900;
	padding-top:8px;
	padding-left:15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bolder;
	color:#fff;
	}

.headline6 {
	width:380px;
height:32px;
background-color:#003;
	padding-top:8px;
	padding-left:15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bolder;
	color:#FC0;
	}




.headline7 {
	width:350px;
	height:32px;
	background-color:#003;
	padding-top:8px;
	padding-left:15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bolder;
	color:#FC0;
	}


.article {
	width:520px;
	height:auto;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	font-weight: normal;
	color: #333;
	float:left;
	
	padding-right:50px;
	
}

.article2 {
	width:520px;
	height:1070px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 13.5px;
	font-weight: normal;
	color: #333;
	float:left;
	border-right:#F00 thin solid;
	padding-right:50px;
	
}

 
 .aside {
	 width:320px;
	 height:auto;
	color:#342512;
	
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	float:right;
	
	
 }


.aside2 {
	 width:320px;
	 height:1070px;
	color:#342512;
	
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	float:right;
	
	
 }

 
.footer {
	width:100%;
	height:500px;
	background-color:#003;
}

.footer-box {
	width:960px;
	height:350px;
	margin: 0px auto 0px auto;
	
}

.footer-left {
	width: 25%;
	height: 350px;
	padding-top:30px;
	
	float:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	
	color: #FFF;
	text-align: left;
}
.footer-center {
	width:35%;
	height:350px;
	float:left;
	font-family: "Arial ", Gadget, sans-serif;
	font-size: 18px;
	color: #FFF;
	background-color: #003;
	text-align: left;
	padding-left: 40px;
	padding-right:15px;
	padding-top:30px;
}
.footer-right {
	width:30%;
	height:350px;
	background-color:#FF0;
	float:right;
	font-family: "Arial ", Gadget, sans-serif;
	font-size: 15px;
	color: #FFF;
	background-color: #003;
	text-align: right;
	padding-left: 0px;
	padding-right:25px;
	padding-top:30px;
}

.footer-text {
	font-family: "Arial ", Gadget, sans-serif;
	font-size: 10px;
	color: #FFF;
	text-align:center;}
	
	
	
/*  Basic stucture
=====================*/
#accordion{margin:50px auto;width:900px;}
#accordion ul{list-style:none;margin:0;padding:0;}
.accordion{display:none;}
.accordion:target{display:block;}
#accordion ul li a{text-decoration:none;display:block;padding:10px;}
.accordion{padding:4px;}





/*  Colors 
====================*/
#accordion ul{
/*box-shadow*/
-webkit-box-shadow:0 4px 10px #BDBDBD;
   -moz-box-shadow:0 4px 10px #BDBDBD;
        box-shadow:0 4px 10px #BDBDBD;
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
}
#accordion ul li a{
background:#fff;
border-bottom:1px solid #900;
color:#333;
}
.accordion{
background:#fff;
color:#333;
}
.accordion:target{
border-top:3px solid #900;
}

.bold {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 18px;
	font-weight: bolder;
	color: #FFF;	
	
}


 a.tooltip {outline:none;text-decoration:none;}
    a.tooltip strong {line-height:30px;}
    a.tooltip > span 
    {
	width:70px;
	padding: 10px 20px;
	margin-top: 20px;
	margin-left: -85px;
	opacity: 0;
	visibility: hidden;
	z-index: 10;
	position: absolute;
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition-property:opacity, margin-top, visibility, margin-left;
	-webkit-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;
	-webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
	-moz-transition-property:opacity, margin-top, visibility, margin-left;
	-moz-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;
	-moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
	-o-transition-property:opacity, margin-top, visibility, margin-left;
	-o-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;
	-o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
	transition-property:opacity, margin-top, visibility, margin-left;
	transition-duration:0.4s, 0.3s, 0.4s, 0.3s;
	transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
	text-align: center;
    }
    
    /*a.tooltip > span:hover,*/
	a.tooltip:hover > span
	{
		opacity: 1;
		text-decoration:none;
		visibility: visible;
		overflow: visible;
		margin-top:50px;
		display: inline;
		margin-left: -60px;		
	}

	a.tooltip span b {
    
		width: 15px;
		height: 15px;
		margin-left: 20px;
		margin-top: -19px;
			
		display: block;
		position: absolute;

		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
			
	
			
		display: none\0/;
		*display: none;
	}
    
a.tooltip > span {
	color: #FFFFFF; 

	background: #333333;
	background: -moz-linear-gradient(top, #333333 0%, #000000 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#000000));
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#000000',GradientType=0 );
	    
	border: 1px solid transparent;