charset "utf-8";

/* UPDATED HEADER STRUCTURE STYLES" */

<style>
  .table-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .table_buttons {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 950px;
    background-color: #006699;
    color: #ffffff;
    display: flex;
    flex-direction: column; /* Switch to a vertical layout */
  }
  .table_buttons tr {
    display: flex;
    flex-direction: row; /* Revert to a horizontal layout for table rows */
    text-align: center;
  }
  .table_buttons td {
    flex: 1; /* Distribute equal width to table cells within a row */
    padding: 10px;
  }
  .table_buttons a {
    text-decoration: none;
    color: #ffffff;
  }

  /* Media Query for small screens */
  @media (max-width: 768px) {
    .table_buttons {
      width: 100%;
    flex-direction: column; /* Keep a vertical layout for smaller screens */
    align-items: center; /* Center-align the content */
  }

  .table_buttons tr {
    flex-direction: column; /* Switch to vertical layout for table rows on smaller screens */
  }
}
</style>





/*TestInput
---------------------------------------------------------------------------*/
/*overall tabbed search container*/
div.simpleTabs { 
	width:240px;
	position:relative;
	
	
	border-radius: 5px;
	padding:5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;	
/*	

div.simpleTabsSearch { 
	width:750px;
	position:relative;
	
	
	border-radius: 5px;
	padding:5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;

*/
	height:auto;	
	
	font:8pt Tahoma;
	border:2px double #EFEFEF;
	background-color:#FFFFFF	
}
ul.simpleTabsNavigation { 
	margin:0 0px; 
	padding:0; 
	text-align:left;
	position:relative; 
}
ul.simpleTabsNavigation li {
	list-style:none; 
	display:inline; 
	margin:0; 
	padding:0;
	position:relative;
}
ul.simpleTabsNavigation li a {
	border:1px solid #E0E0E0; 
	padding:3px 3px; 
	background:#FFFFFF; 
	font-weight: bold; 
	font-size: 12px;
	text-decoration:none;
	position:relative;
	margin-bottom:-7px;
	border-radius: 5px 5px 0 0;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
}
ul.simpleTabsNavigation li a:hover {
	background-color:#0168B3;
	color:#FFFFFF; 
}
ul.simpleTabsNavigation li a.current {
	background:#0168B3;  
	color:#FFFFFF;
	border-bottom:1px solid #0168B3; 
}
div.simpleTabsContent { 
	border:1px solid #E0E0E0; 
	padding:5px 5px; 
	margin-top:3px; 
	display:none;
	border-radius: 0 5px 5px 5px;
/*


*/
}
div.simpleTabsContent.currentTab { 
	display:block;}
/*全体の設定
---------------------------------------------------------------------------*/
body {
	color: #333;	/*全体の文字色*/
	background-color: #e6e6e6;	/*全体の背景色*/
	font-family: Helvetica, sans-serif;	
}

div {
	 vertical-align:top;
	 }
	 
div .blue{
	background-color: #0168B3;
	color:white;
	width:100%;
	height:45px;
	}

p, li {
	font-size: 12pt;
	text-align: left;
}

td {
	font-size: 12pt;
	text-align: left;
}

li.body {
	font-size: 12pt;
	text-align: left;
}

p.space {
	font-size: 12pt;
	text-align: left;
	padding-left:5px;
}

p.ind {
	font-size: 12pt;
	text-align: left;
	padding-left:30px;
}

h1 {
    font-size: 18pt;
    text-align: center;
    color: #235BA8;
}

h2 {
    font-size: 16pt;
    text-align: center;
    color: #235BA8;
}

h3 {
    font-size: 16pt;
    text-align: left;
    color: #235BA8;
}

h4 {
	font-size: 12pt;
	font-weight:bold;
	}
h5 {
	font-size: 12pt;
	font-weight:bold;
	text-align: center;
}

#hr {
	background-color:#34B449;
	height: 15px;
}


image100 img{width:100%;}

image98 img{width:98%;
		
 }
			
image90 img{width:90%;}
image80 img{width:80%;}
image70 img{width:70%;}
image60 img{width:60%;}
image50 img{width:50%;}
image40 img{width:40%;
		   padding:3px 3px;
}
image30 img{width:30%;}


image98, image90 img, image80 img, image70 img, image60 img, image50 img, image40 img, image30 img{min-width:300px;}



#popup {
		display: block;
		position: absolute;	
		
		
		top: 10px;
		left: 10px;
		right: 10px;
		margin: auto;		


				
		text-align: Center; 
		font-size: 18px; 
		color: #0168B3;
		width: 550px; 
		height:300;  
		background-color: white; 


		filter:alpha(opacity=90);
		-moz-opacity: 0.9;
		opacity: 0.9;			
}



/*コンテナー（HPを囲むブロック）
---------------------------------------------------------------------------*/
#container {
	margin: 0px auto;
	background-color: white;	
}


/* 	display:block;	
	width:100%; 
	max-width: 950px; 
	
	*/
#container td{
	
	}
	
	topnav{	
 	display:block;

	padding-top:3px;
	padding-left:10px;
	padding-right:10px;	
	margin:0px auto;
	background-color: #0168B3;
	color: #FFF; 
 	font-size: 10pt;
	font-family: Helvetica, sans-serif;	
	}

/*
	height:19px;

*/
	
	topnav a:link {
	color:yellow;	 
	text-decoration:none;	}

	topnav a:visited {
		color: yellow;
	
	}

	/* mouse over link */
	topnav a:hover {
		color: white;
		text-decoration:underline;	
	}

enewslink {float:right;}	

	
/*ヘッダー（サイト名ロゴが入ったブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
	header {
		
		display:block;
	
	/*
	background-color: #0168B3;
	background:url(../images/waveheader.jpg) no-repeat;
	*/
	
	}
	header div{ 
		float:none;
		text-align:center;
		padding-right:5%;
		}

	#announcements td{
		padding-top: 10px;
		padding-bottom:40px;				
	}

	#headernav{
		padding-top: 10px;
		padding-bottom:40px;		
		font-size: 14px;	
		color: #000;		
		font-weight: bold;		
	}
	
	#espanol{
		align: center;
		padding-top: 20px;
		padding-bottom:10px;		
		font-size: 20px;	
		color: #0067B1;		
		font-weight: bold;		
	}

	#catsrch {
		font-size: 14px;
		color: #FFF;			
	}
	
	
	
	header a:link {
		color: #000000;
		text-decoration:none;
	}
	
	/* visited link */
	header a:visited {
		color: #000000;
	
	}

	/* mouse over link */
	header a:hover {
		color: #000000;
		text-decoration:underline;	
	}

/***************************************************************************/
/*****************************Branch Address********************************/
#address{
		padding-left: 10px;	
		padding-right: 20px;	
	}
/*****************************branch Video********************************/
#video{
		vertical-align: middle;
	}
/***************************************************************************/

	#toggle{display:none;}
	
	hidemenu{display:none;}
	
	#nav li.hidden {display:block;}
	
	#nav li.active{display:block;}
/***************************************************************************/	
	#nav span {display: none;}
	
	#nav {
		font-size: 15px;
		text-align:justify;
		
		z-index:10;
		color: white;
		position:relative;
		list-style: none outside none;
		margin: 0;
		padding-top: 10px;
	}
	
	#nav ul{

		list-style: none outside none;
	}	

	#nav ul.subs {
		display:none;
		left:0;
		padding:2px;
		position:absolute;
		width: 99.7%;		
	}
	
	#nav > li {
		float:left;
		margin-bottom:-5px;
		text-align:left;
		width:auto;
		padding-right:10px;
		padding-bottom:15px;
	}
	
	#nav li a{
		
		display:block;
		text-decoration:none;
		white-space:normal;
		color:white;
	}
	
	#nav > li:hover > a, #nav > a:hover{
		background-color: #2ECC71;
	}
	
	/* submenu
	
	float somenail
	 */
	#nav li:hover ul.subs{
		display:block;
		background-color:#000000;
		
		filter:alpha(opacity=80);
		-moz-opacity: 0.8;
		opacity: 0.8;
	}
	
	
	#nav ul.subs > li{
		display: inline-block;
		float: none;
		padding: 0px 1%;
		vertical-align: top;
		width: 33%;
			
	}
	
	#nav ul.subs > li a{
    color: white;
    line-height: 20px;

	}
	
	#nav ul li a:hover {
		background-color:#2ECC71;
	}
	
	#nav ul.subs >li >a {
	margin-bottom:10px;
	
	}
	
	#nav ul.subs >li li{
		float:none;
		
	}
	#nav ul.subs > li li:hover{
		padding-left:5px;
	}
/***************************************************************************/
/***************************************************************************/
middle {
	width: 100%;		
}

middle div{ 
	display:inline-block;
}

/***************************************************************************/
/***************************************************************************/
/* Contetns Section */
	#contents{
		width: 700px;	
		
		padding-left:10px;
		padding-right:9px;		

		font-size: 10pt;
	}
/**********************************

		max-width: 700px;

*****************************************/		
	.center{
		text-align:center;
	}		

/***************************************************************************/
/***************************************************************************/	
/* BookList Section */

/*
		background-color:#0F6;
*/
booklist {
		text-align:center;	
		}

	
booklist th, booklist td{
		max-width:300px;
		text-align:left;
		}

		
	.clearfix h1
	{
		background:white;
		font-size:22px;
		}
	.table-bordered{
		font-size:13px;
		}	
	.noPrint{
		font-size:13px;
		}	
	


/***************************************************************************/
/***************************************************************************/
/* Right Side Ad*/
	#rightad{
	font-size: 15px;		
	width: 220px;	
	float:right;
	text-align:center;
	vertical-align:top;
	}
	
	#rightad img{width: 220px;}

	


/***************************************************************************/
/***************************************************************************/

Slide img{
	width : 100%;
	}

TrioBox img { 
	
max-width:311.7p;

	position:relative;
	display: inline-block;
	width:33%;
	
	

	}

LineBox img { 

	width:24.5%;
	min-width:200px;
	
	}
	

halfwide {
	vertical-align:top;
	display:inline-block;
	padding-bottom: 10px;
	width:345px;

	}
	
halfwidecenter {
	vertical-align:top;
	display:inline-block;
	align: center;
	padding-bottom: 10px;
	width:345px;

	}
	
quarterwide {
	vertical-align:top;
	display:inline-block;
	
	width:170px;

	}
	
threequarterwide {
	vertical-align:top;
	display:inline-block;
	
	width:500px;

	}
	
triplewide {
	vertical-align:top;
	display:inline-block;
	padding-bottom: 10px;
	

	}

triplewide img {
	width: 100%;
	height: auto;
}

half {
	vertical-align:top;
	display:inline-block;
	padding-bottom: 10px;
	width:300px;

	}

	
	
footer {
	padding-top:10px;
	padding-bottom:5px;
	font-size: 15px;
	width: 100%;	
	background-color: #0168B3;
	color:white;
	/*position: relative;*/
	text-align:center;	

	
}

footer div{ float:none;
	text-align:center;
	display:inline-block;
	vertical-align:middle;
	padding-right:5%;
	background-color: #0168B3;

}



/***************************************************************************/
/***************************************************************************/	
/* responsive rules */
@media all and (min-width : 950px) {
	#container {
	width: 950px;	
	}
}

@media all and (max-width : 949px) {
	#container {
	width: auto;	
}	
}





@media all and (min-width : 769px) {
	#logo{
		vertical-align: middle;
		float:left;	
	}
	header div{ 
		float:right;
	}
	topnav{	
 	height:19px;
	}
}	
/***************************************************************************/
/***************************************************************************/

@media all and (max-width : 768px) {
	
	
header div{ 
	float:none;

}


    #nav > li {		
	    float: none;
        border-bottom: 0;
        margin-bottom: 0;
    }

	#contents{
		width: 100%;	
	}
/***************************************************************************/	
	#toggle{display:block;}
	#nav li.hidden {display:none;}
	
	hidemenu {display:block;
	text-align:right;
	}


/***************************************************************************/	

    #nav ul.subs {
        position: relative;
        top: 0;
    }
    #nav li:hover ul.subs {
		
		filter:alpha(opacity=100);
		-moz-opacity: 1.0;
		opacity: 1.0;
    
	    display: none;
    }

    #nav li #catalog:target + ul.subs,
    #nav li #programs:target + ul.subs,
	#nav li #research:target + ul.subs,
	#nav li #account:target + ul.subs,
	#nav li #support:target + ul.subs,
	#nav li #about:target + ul.subs,
	#nav li #foryou:target + ul.subs	
	 {
        display: block;
    }

    #nav ul.subs > li {
        display: block;
        width: auto;
    }
	
	
}

@media all and (max-width: 907px) and (min-width: 601px){
	TrioBox img { 
	width:32.83%;
	}	
}


@media all and (max-width: 600px) and (min-width: 401px){
	TrioBox img { 
	width:49.4%;
	}	
}

@media all and (max-width : 400px) {
	
	TrioBox img { 
	width:100%;
	}

}

@media all and (max-width : 470px) {
	topnav{	
 	height:36px;
	}
	
	enewslink {float:left;}		

}

@media all and (max-width: 856px){
	LineBox img { 
	width:49.4%;
	}	
}


/*************************Pre Loader******************************************/
/***************************************************************************/

/***************************************************************************/
/***************************************************************************/

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}


#consumerreportssearch {
  border: thin solid #bdbdbd;
  box-shadow: 0px 0px 3px #616161;
  padding: 12px;
  width: 650px;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size: 10px;
  }

#consumerreportssearch .cr_logo {
  float: left;
  }

#consumerreportssearch .sailor_logo {
  max-height: 50px;
  float: right;
  }

#consumerreportssearch form {
  margin: 0;
  padding: 12px 0 0;
  clear:both;
  }

#consumerreportssearch form input[type=text] {
  height: 28px;
  padding: 4px;
  vertical-align: top;
  width: 600px;
  }

#consumerreportssearch form input[type=submit] {
  height: 28px;
  padding: 4px;
  vertical-align: top;
  }

#consumerreportssearch form input[type=checkbox] {
  height: 10px;
  vertical-align: middle;
  }

#consumerreportssearch form div.limiter {
  padding-top: 4px;
  vertical-align: middle;
  }





/******************************home page web boxes**********************************/



/* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 650px) {
  .webbox {
    width: 100%;
    display: block;
  }
}



.title {
  color: grey;
}

.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background-color: #555;
}

.webboxcontainer {
  width: 940px;
}
webbox {
  width: 24.5%;
  padding-left: 1px;
  display: inline-block;
  float: left;
}


/* Style the buttons that are used to open agrnd close the accordion panel */
.accordion {
  background-color: #33C1FF;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

.scgrid {
	display: grid;
	align-items: center;
	justify-content: center;
	grid-gap: 10px;
	grid-template-columns: 225px 225px 225px;
	grid-template-rows: auto;
	grid-auto-flow: row;
}
	
.sponsor {
	align: center;
	
}

.triple {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
}

.triple img {
	width: 200px;
}

@media (max-width: 500px) {
  .triple {
    flex-direction: column;
	justify-content: center;
  }
  .triple img {
	align: center;
	}

}