body {font-family: sans-serif;    font-size: 100%; max-width: 1200pt; margin: 0 auto; }
h1{ font-family:sans-serif; color:#191919; font-weight: 400;}
h1.letterpress{color:#191919; font-weight: 700; text-shadow: 0px 1px 1px rgba(255,255,255,0.2);}
a {    text-decoration:none;    text-align:left;}
p {    color: #000000;    text-align:left;}
p.footnote {    font-size: 60%;	color: #CCCCCC; text-align: center }
p.quote {  font-family:serif;  font-size: 90%;	color: #BBBBBB; text-align: left }
img.roundedCorner6px{    border-radius:6px;    overflow:hidden;	}
img.Round {    border-radius:50%;    overflow:hidden;} 
img.fit {  max-width: 100%;/*   max-height: 100%; */}
img.fit70 {  max-width: 70%;  max-height: 70%;}
img.inlineblock{  vertical-align: middle;}
img.dropshadow{ box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5);}
img.bevel{ 
box-shadow: inset 0px -10px 10px 13px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0px -10px 10px 13px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0px -10px 10px 13px rgba(0, 0, 0, 0.5);
box-shadow: 0px 1px 1px rgba(249,249,249,0.5);
-moz-box-shadow: 0px 1px 1px rgba(249,249,249,0.5);
-webkit-box-shadow: 0px 1px 1px rgba(249,249,249,0.5);
}
#ratioWidth{	margin-left: 10%;	margin-right: 10%;}
#ratioWidth10{	margin-left: 10%;	margin-right: 10%;}
#ratioWidth12{	margin-left: 12%;	margin-right: 12%;}
#ratioWidth5{	margin-left: 5%;	margin-right: 5%;}
#ratioWidth2{	margin-left: 2%;	margin-right: 2%;}
#fixWidthBlockRound {    border-radius: 4px; background: #f0f0ed; padding: 20px; width: 100%; height: 100%; box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5);}
#ratioWidthBlockRound {  border-radius: 4px;  background: #f0f0ed; padding-bottom: 20pt;  margin-left: 10%;  margin-right: 10%;  height: 100%; box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5);}
#verticalAlignMiddle{ vertical-align: middle;}
.on_light_bk {  color: #000000;}
.center {  margin: auto;  padding: 70px 0; width: 100%;}


A:link {	text-decoration: none; color: #374385;}
A:active { text-decoration: underline; }
A:visited {text-decoration: none;color: #773f7c;} 
A:hover {text-decoration:none; color: #375750;}
.comment {  color:#879681;}
.file {  color: #72706e; font-size:20;}
.folder {  color: #330205;  font-weight:200;  font-size:24;}
.menu div {display:none; margin-left: 30px;}


/* == Collapse settings==*/
.collapsible{
	font-family:sans-serif;
	display: block;
	background-color: rgba(255,255,255,0);
	color: #191919;
	cursor: pointer;
	padding-left: 28px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-weight: bold;
	margin-top: 40px;
  }
button[name="menuButton"]{
	font-size: 1.3em;
 }
button[name="characterButton"]{
	font-size: 1.1em;
	color: darkslategray;
	background-color: rgb(216, 215, 215);
 }

.active, .collapsible:hover {
	background-color: rgba(255,255,255,0);
  }
#main div{
	display:block;
}
  
.characterContent {
	padding-top: 1%;
	display: none;
	overflow: hidden;
	background-color: #f1f1f1;
  }

#characterimg{
	width: 100%;
	height: auto;
}

#Novellist{
	list-style-type: none;
	padding-left:5%;
}
#Novellist li{
	padding-top:1%;
	padding-bottom:1%;
}
#Novellist li a{
	font-size:1em;
}
#Novellist li a:hover{
	background-color: rgb(167, 182, 163);
}




  #myBtn {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	font-size: 18px;
	border: none;
	outline: none;
	background-color: rgb(207, 207, 207);
	color: white;
	cursor: pointer;
	padding: 15px;
	border-radius: 4px;
  }
  
  #myBtn:hover {
	background-color: rgb(167, 182, 163);
  }






/* == NAVIGATION MENU==*/
#access {
	background: #222; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#252525, #0a0a0a);
	background: -o-linear-gradient(#252525, #0a0a0a);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
	background: -webkit-linear-gradient(#252525, #0a0a0a);
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	clear: both;
	display: block;
	float: left;
	margin: 0 auto 6px;
	width: 100%;
}
#access ul {
	font-size: 13px;
	list-style: none;
	margin: 0 0 0 -0.8125em;
	padding-left: 0;
}
#access li {
	float: left;
	position: relative;
}
#access a {
	color: #eee;
	display: block;
	line-height: 3.333em;
	padding: 0 1.2125em;
	text-decoration: none;
}
#access ul ul {
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	display: none;
	float: left;
	margin: 0;
	position: absolute;
	top: 3.333em;
	left: 0;
	width: 188px;
	z-index: 99999;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access ul ul a {
	background: #f9f9f9;
	border-bottom: 1px dotted #ddd;
	color: #444;
	font-size: 13px;
	font-weight: normal;
	height: auto;
	line-height: 1.4em;
	padding: 10px 10px;
	width: 168px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
	background: #efefef;
}
#access li:hover > a,
#access a:focus {
	background: #f9f9f9; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
	color: #373737;
}
#access ul li:hover > ul {
	display: block;
}
#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
	font-weight: bold;
}

#gameIntroduction p{
	padding-left: 5%
}

#DownloadPage p{
	padding-left: 5%
}


#QA {
	padding-left: 5%;
}
#QAList li{
	list-style: none;
}
#Question{
	font-weight: bold;
}

#staffList p{
	padding-left: 5%
}

#l-navi2{
	list-style-type: none;
	padding-left:0;
}
#l-navi2 li{
	float: left;
	width:20%;
	height:5%;
	background-color: rgba(0,0,0,0);
	vertical-align: baseline;
}
#l-navi2 li a{
	color: #666666;
	font-size: 1.2em;
	display: block;
	text-align: center;
	line-height: 100%;
	padding-top: 3%;
	padding-bottom:3%;
	margin-top:0.5%;
	margin-bottom:0.5%;
	
}
#l-navi2 li a:hover{
	color: #EEEEEE;
	background-color: rgba(0,0,0,0.8);
}

/* For small screen: */
@media all and (max-width: 700px){
	#ratioWidth{	margin-left: 2%;	margin-right: 2%;}
	#ratioWidthBlockRound {  border-radius: 4px;  background: #f0f0ed; padding-bottom: 20pt;  margin-left: 2%;  margin-right: 2%;  height: 100%; box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5);}
}
@media only screen and (max-width: 700px){
	#l-navi2 li{
		float: none;
		width: 100%
	}
}
@media only screen and (min-width: 1800px){
	#characterimg{
		height:700px;
		width: auto;
	}
}