@charset "utf-8";

/*Main style sheet for Hpotter*/

A.text:link {color: #000099; text-decoration: none; }
A.text:active {color: #FF6633; text-decoration: none; }
A.text:hover {color: #CC0066; text-decoration: none; }
A.text:visited {color: #996699; text-decoration: none; }

A:link {text-decoration:none;color:#0066FF;}
A:visited {text-decoration:none;color:#996699;}
A:active {text-decoration:none;color:#FF9933;}
A:hover {text-decoration:none;color:#CC0066;}

A.a04:link {text-decoration:none;color:#00007f;}
A.a04:visited {text-decoration:none;color:#00007f;}
A.a04:active {text-decoration:none;color:#ff0000;}
A.a04:hover {text-decoration:none;color:#ff0000;}

.small {font-size: 11px}

A.small:link {color: #00007f; text-decoration: none; }
A.small:active {color: #00007f; text-decoration: none; }
A.small:hover {color: #ff0000; text-decoration: none; }
A.small:visited {color: #ff0000; text-decoration: none; }

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}

body {background-color: #ffffff;
    width: 100%;
	margin: 10px; 
	padding: 10px; 
	background-image: url(../images/faintglass.jpg);
	color: #333;
	line-height: 170%;
	font-size: 1.0em;
	font-style: normal;
}

body,td,th {
	font-family: Optima, sans-serif;
}


/* fluid images */
img
{
	max-width: 100%;
	display: block;
	border: 0;
	-ms-interpolation-mode: bicubic;
	image-rendering: optimizeQuality;
	_width: 100%;
}


.chimg
{
	max-width: 25%;
	display: block;
	border: 0;
	float: right;
	-ms-interpolation-mode: bicubic;
	image-rendering: optimizeQuality;
	_width: 25%;
	
}



.top {
	position: absolute;
	left: 5px;
	top: 5px;
	right: 0px;
	visibility: visible;
	padding: 0px;
	}

.photo {
	position: absolute;
	left: 10px;
	top: 77px;
	padding: 5px;	
}

.navig {
   font-size: small;
   position: absolute;
   right: 5px;
   top: 75px;
   visibility: visible;
   padding: 0px;
	}
	


.envelope {
   position: absolute;
   right: 15px;
   top: 103px;
   visibility: visible;
   padding: 0px;
   z-index:900;
    }
 
	 

.breadcrumb {
   display: none;
	}


.title1 {
	font-size: x-large;
	font-style: normal;
	line-height: normal;
	font-variant: normal;
}


.toptitle {
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-variant: normal;
	color: #00007F;}
	
.content {
	position: absolute;
	left: 5px;
	top: 150px;
	visibility: visible;
	z-index: 3;
	padding: 5px;
	max-width: 50em;
	margin: 0 auto;
}


h1 {width: 100%;
    position:absolute;
    top: 140px;
    margin: auto;
	line-height: 130%;
	font-size: 130%;
	text: center;
     }
     
h2 {line-height: 110%;
	font-size: 110%;
     }
     
.secttitle {
    width: 100%;
    min-height: 50px;
    font-size: 20px !important;
	font-style: normal;
	line-height: normal;
	font-variant: normal;
	text-align: center;
	}
	
.pagetitle {
    width: 100%;
    min-height: 50px;
	font-size: 120%;
	font-style: 600;
	line-height: 120%;
	font-variant: normal;
	text-align: center;
	}
	
.subhead {
    width: 100%;
    min-height: 50px;
    margin-top: 40px;
    margin-bottom: 10px;
	font-size: 110%;
	font-style: normal;
	line-height: normal;
	font-variant: normal;
	}

	
nav {position:absolute;
	 top:100px;
	 width:100%;}
	 
navhi {position:absolute;
	 top:80px;
	 width:100%;}

	 
.nav {
	position: relative;
	float: left;
	left: 0px;
	font-size: 65%;
	line-height: 130%;
	width: 45%;
}
	
.navr {
	position: relative;
	float: right;
	text-align: right;
	margin-right: 10px;
	font-size: 65%;
	line-height: 130%;
	width: 45%;
}

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 1000;
}

table.padded-table td 
{font-size:17px; 
line-height:140%; 
padding-top:20px; 
padding-right:5px; 
padding-bottom:10px; 
padding-left:5px; }	 
	
.infotable {
    position: relative;
	top: 5px;
    font-size: 85%;
	font-style: normal;
	line-height: normal;
	font-variant: normal;
	overflow: auto;
	margin-top: 10px;
	margin-bottom: 20px;
	border-radius: 5%;
	}
	
.infotablelow {
    position: relative;
	top: 40px;
    font-size: 85%;
	font-style: normal;
	line-height: normal;
	font-variant: normal;
	overflow: auto;
	margin-top: 10px;
	margin-bottom: 100px;
	border-radius: 5%;
	}
	
td {border-radius: 3%;
    box-shadow: 0 0 1vw 1vw white;
	}
	
	
.foot  {
    font-size: 80%;
	font-style: normal;
	line-height: normal;
	font-variant: normal;
	overflow: auto;
	}

figcaption {text-align: center;}
	
.table {
    font-size: 100%;
	font-style: normal;
	line-height: normal;
	font-variant: normal;
	overflow: auto
	}
	
.red {
	color: #FF0000;
}

.quotesection {background-color: white;
               border: solid thin #60C;
			   padding: 3px;
			   width:99%}


.yellowquote {
	width: 100%;
	min-height: 80px;
	margin-top: 20px;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 30px;
	padding-top: 20px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #fff295;
	border-radius: 7%;
	clear: right;
}

.clearleft {
clear: left;
}

div.floatright
{
float:right;
background: white;
margin: 0 1em 0 0;
padding: 10px;
font-size: 80%;
text-align:center;
}

.lbluequote {
	background-color: #DEF4FF;
	margin-top: -30px;
	margin-left: -20px;
	margin-bottom: 10px;
	min-height: 40px;
	padding: 5px;
	bottom-margin: -20px;
}

.pageHeader {color: #3366CC; text-decoration: none; font-weight: 800; font-size: 150%; display: block;}

.dict {
    position: absolute;
	top: 1000px;
	left: 5px;
	width: 180px;
	visibility: visible;
	padding: 0px;
	}
	
.mn {
	margin: 0px;
	padding: 0px;
	font-family: 'Mongolian White', Serif;
	font-size : 24px;
	-moz-writing-mode: vertical-lr;
	-webkit-writing-mode: vertical-lr;
	-o-writing-mode: vertical-lr;
	-ms-writing-mode: tb-lr;
	writing-mode: tb-lr;
    text-justify: inter-ideograph;
	text-align:justify;
}


.style2 {font-size: 80%;
         color: #000099}
.style1 {color: #000099}
.style3 {font-size: small}

.style4 {color: #CCCCFF}
.style5 {font-size: 9px;
         color: #CCCCFF}
.style6 {font-style: italic}
.style7 {color: #990000}
.style8 {color: #CCCCFF}
.style9 {color: #666600}
.style10 {color: fuchsia;}
		 
.style12 {color: red;}

.style13 {color :blue;}

.style14 {
color: purple;}

.style15 { 
color: black;}

.blue {color: #00007F}

.redback {
    background-color: #ffd4bb;
    
}

.redbox {padding: 0px;
        background-color: transparent;
		border: 2px solid red;
		border-radius:5px;
		display: inline;}
		
.redtrans {background-color: transparent;
              box-shadow: inset 0 0 7px 9px #ffd4bb;
              margin:1px;
              border-color: white;
              border-radius: 5px;}

.yelloback {
    background-color: #FFFF99;
}

.lyelloback {
    background-color: #FFFFCC;
    }
    
.lgreenback {
    background-color: #ebf6e1;
    }

.greenback {
	background-color: #33CC33;
}

.greentrans {background-color: transparent;
              box-shadow: inset 0 0 7px 9px #33CC33;
              margin:1px;
              border-color: white;
              border-radius: 5px;}

.bluetrans {background-color: transparent;
              box-shadow: inset 0 0 7px 9px #00CCFF;
              margin:1px;
              border-color: white;
              border-radius: 5px;}
              
.blueback {
	background-color:#00CCFF;
}

.pinkback {
   background-color:#FFCCCC;
}

.purpleback {    
    background-color: #CCCCFF;}
    
.orangeback {    
    background-color: #FFE79F;}
    

.pinkyback {
background-color: #FFCCFF;}

.khakiback {
background-color: #CCCC00;}


.greyback {
background-color: #CCCCCC;}


.garishpback {    
    background-color: #CC99FF;}
    
.palegrey {    
    background-color: #EEEEEE;}
    
.yukgreen {
    background-color: #CCFFCC;}

.sctext {
    color: #000099;
    font-family:  MS Song, Song;
	text-decoration: none;
}

.tctext {
    color: #000099;
    font-family: MingLiU, Apple LiGothic;
	text-decoration: none;
}

.jtext {
    color: #000099;
    font-family:  平成角ゴシック, ＭＳ ゴシック;
	text-decoration: none;
}

.vtext {
    color: #000099;
    font-family:  lucida grande, Arial MS Unicode;
	text-decoration: none;
}

.style2j {
	font-color: #000099;
	font-size: 25px;
	font-family: 平成角ゴシック, ＭＳ ゴシック;
	font-style: normal;
    font-variant: normal;
}

.style2j:link{text-decoration:none;color:#000066;}
.style2j:visited{text-decoration:none;color:#00007f;}
.style2j:active{text-decoration:none;color:#ff0000;}
.style2j:hover{text-decoration:none;color:#CC0066;}

.style2sc {
	font-color: #000099;
	font-size: 25px;
    font-family:  Hei;
}

.style2sc:link{text-decoration:none;color:#000066;}
.style2sc:visited{text-decoration:none;color:#00007f;}
.style2sc:active{text-decoration:none;color:#ff0000;}
.style2sc:hover{text-decoration:none;color:#CC0066;}

.style2tc {
	font-color: #000099;
	font-size: 25px;
    font-family:  MingLiU, Apple LiGothic;
}

.style2tc:link{text-decoration:none;color:#000066;}
.style2tc:visited{text-decoration:none;color:#00007f;}
.style2tc:active{text-decoration:none;color:#ff0000;}
.style2tc:hover{text-decoration:none;color:#CC0066;}

.style2v {
	font-color: #000099;
	font-size: 20px;
    font-family: lucida grande, Arial MS Unicode;
	link: text-decoration:none;color:#000066;
	visited: text-decoration:none;color:#00007f;
	active: text-decoration:none;color:#ff0000;
	hover: text-decoration:none;color:#CC0066;
}

.style2v:link{text-decoration:none;color:#000066;}
.style2v:visited{text-decoration:none;color:#00007f;}
.style2v:active{text-decoration:none;color:#ff0000;}
.style2v:hover{text-decoration:none;color:#CC0066;}

p#intro{line-height:100%}

.style3j {font-weight: normal;
         color: #000099;
    font-family: : 平成角ゴシック, ＭＳ ゴシック;}
		 
.style3sc {font-weight: normal;
         color: #000099;
    font-family: 华文黑体, Hei;}
		 
.style3tc {font-weight: normal;
         color: #000099;
    font-family:   MingLiU, Apple LiGothic;}
		 
.style3v {font-weight: normal;
         color: #000099;}

.brown {
	color: #666600;
	font-family: Helvetica, Arial, sans serif;
	font-size: 85%;
	line-height: 110%;
}

.gloss 
{font-family: Helvetica, Arial, sans serif;
	font-size: 87%;
	line-height: 100%;
}

.ajp {font-weight: normal;
    color: #000099;
    font-family: 平成角ゴシック, ＭＳ ゴシック;
	line-height: 130%;
	}
	
.ako {font-weight: normal;
    color: #000099;
    font-family: Noto Sans;
	line-height: 130%;
	text-decoration: none;
	}
	
.asc {font-weight: normal;
    color: #000099;
    font-family: 华文黑体, Hei;
	line-height: 130%;
	}
		 
.atc {font-weight: normal;
    color: #000099;
    font-family: "儷黑 Pro", "Apple LiGothic Medium";
	line-height: 130%;
	}
		 
.avn {font-weight: normal;
      font-family: Helvetica, Arial, sans serif;
      color: #000099;
	  line-height: 130%;
		}
		 
.mon {font-weight: normal;
    font-family: Helvetica, Arial, sans serif;
    color: #000099;
	line-height: 130%;
	text-decoration: none;
	}
	


@media (min-width: 600px)
{

.toptitle {
	font-size: 20px;
	font-style: normal;
	line-height: normal;
	font-variant: normal;
	color: #00007F;}


.photo {
	position: absolute;
	left: 10px;
	top: 40px;
	padding: 5px;	
}

.content {
	position: absolute;
	left: 5px;
	top: 100px;
	visibility: visible;
	z-index: 3;
	padding: 5px;
	max-width: 50em;
	margin: 0 auto;
}


	

nav {position:absolute;
	 top:100px;
	 width:100%;}
	
	 
.nav {
	position: relative;
	float: left;
	left: 0px;
	font-size: 65%;
	line-height: 130%;
	width: 45%;
}
.navr {
	position: relative;
	float: right;
	text-align: right;
	margin-right: 10px;
	font-size: 65%;
	line-height: 130%;
	width: 45%;
}

	
.navig {
   font-size: small;
   position: absolute;
   right: 5px;
   top: 40px;
   visibility: visible;
   padding: 0px;
	}
	
.envelope {
   font-size: small;
   position: absolute;
   right: 5px;
   top: 77px;
   visibility: visible;
   padding: 0px;
	}
	
.text {
	color: #333;
	line-height: 170%;
	font-size: 100%;
	font-style: normal;
}

.quotesection {background-color: white;
               border: solid thin #60C;
			   padding: 3px;
			   width:99%}

	
.leftcol {
	display:inherit;
	position: absolute;
	left: 10px;
	top: 820px;
	width: 100px;
	visibility: visible;
	z-index: 3;
	padding: 5px;
}



h2 {
	line-height: 160%;
	font-size: 150%;
}

.small {
	font-size: 14px;
	}
	

}

@media (min-width: 750px)

{
	
body {position:relative;
	margin-left:auto;
    margin-right:auto;
    width:750px;}
							
}