/* refuge.tokyo */

A { text-decoration:none; outline:none; }
	A:link { color:#f7f7f7; }
	A:visited { color:#f7f7f7; }
	A:active { color:#f7f7f7; }
	A:hover { color:#f7f7f7; }


@font-face {
	font-family: 'CascadiaCode';
	src: url("../font/CascadiaCode/CascadiaMono.woff2");
	font-display: swap;
}
/*
 * "Cascadia Code" licensed under the SIL Open Font License Version 1.1
 * http://scripts.sil.org/OFL
 * https://fonts.google.com/specimen/Cascadia+Code
*/
@font-face {
	font-family: 'Arimo';
	src: url("../font/Arimo/Arimo-Bold.woff2");
	font-display: swap;
}
/*
 * "Arimo" licensed under the Apache License version 2.0
 * http://www.apache.org/licenses/LICENSE-2.0.html
 * https://fonts.google.com/specimen/Arimo
*/
@font-face {
	font-family: 'Noto';
	src: url("../font/Noto/NotoSansJP-Bold.woff2");
	font-display: swap;
}
/*
"Noto" https://www.google.com/get/noto/

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL

*/

HTML {
	font-family: "Noto"; color:#f7f7f7; font-size: 14px;
	width:100%; height:100%; padding:0; margin:0;
}
BODY {
	background-color:#2849a2; white-space:nowrap; overflow-y:scroll; padding:0; margin:0;
	background-image: url('../img/background001.png');
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 100% 100%;
}
BODY#simple {
	background-color:#2849a2; white-space:nowrap; overflow-y:scroll; padding:0; margin:0;
	background-image: none;
}



.draggable-element { cursor: grab; }
.draggable-element:active { cursor: grabbing; }

.undraggable-element { cursor: default; }
.undraggable-element:active { cursor: default; }

#alternate {
	position: fixed; z-index: 1; left: 40px; bottom: 50px;
}
.font1 { font-family: "Noto"; font-size: 25px;}
#icon_phone { width: 50px; height: auto; }
#pacman { margin: 15px  0 30px 30px; white-space: pre; }
#list {
	margin: 10px 0 0 50px; padding: 0 0 100px 0;
}
.list_td1 { padding: 0 10px 0 10px; }
.list_td2 { margin: 7px 0 0 0px; padding: 0 10px 0 10px; border-radius: 5px;}


#mobile_nintendo { margin: 7px 0 0 0px; padding: 0 10px 0 10px; border-radius: 5px;}

.window_ss-title {
	font-family: "Arimo"; color: #000000; font-size: 13px; padding: 2px 0px 2px 10px;
}
#mobile {
	margin: 60px 0 0 40px; padding: 0 0 100px 0; display: none;
}
.folder { vertical-align: middle; margin: 0 5px 0 0;}
#filemanager {
		top: 50px; left: 50px; z-index: 70;
		position: absolute; border: solid 2px #000000; box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.16);
}

#database {
	background-color: #ffffff; padding: 0;
}
.label {
	font-family: "Arimo"; color: #000000; font-size: 12px; border: solid 1px #000000;
	background: -webkit-linear-gradient(top, #F7F2E7 0%, #F7F2E7 49%,#f1e4d5 50%,#f1e4d5);
	background: -moz-linear-gradient(top, #F7F2E7 0%, #F7F2E7 49%,#f1e4d5 50%,#f1e4d5);
}
.machine_a {
		background-color: #e6a47c; font-family: "Arimo"; color: #000000; font-size: 13px;
		min-width: 350px; border: solid 1px #000000;
}
.machine_b {
		background-color: #f0cc71; font-family: "Arimo"; color: #000000; font-size: 13px;
		min-width: 350px; border: solid 1px #000000;
}

.size,.type,.date {
	font-family: "Arimo"; color: #2a2a2a; font-size: 12px; padding: 0 10px 0 5px;
	border: solid 1px #000000; background-color: #b6f2ff;
}
.machine-link { color: #2e2e2e; }
.machine-link:hover { background-color: #99cc33; }

	A.machine-link:link { color:#0d0d0d; }
	A.machine-link:visited { color:#0d0d0d; }
	A.machine-link:active { color:#0d0d0d; }
	A.machine-link:hover { color:#0d0d0d; }


#terminal {
		bottom: 80px; right: 100px; z-index: 70; position: absolute;
		border: solid 2px #000000; box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.16);
}
#terminal_b {
		top: 30px; left: 30px; z-index: 100; position: absolute;
		border: solid 2px #000000; box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.16);
}
#filemanager-title-bg,#terminal-title-bg {
	background-color: #99cc33; border-bottom: solid 2px #000000;
	background-image: url("../img/img_bg_a.png");
	background-repeat: no-repeat;
	background-position: top 0 right 0;
}
#filemanager-title-bg {
	background-color: #99cc33; border-bottom: solid 2px #000000; padding: 0 0 0 15px;
	background-image: url("../img/img_bg_b.png"),url("../img/img_bg_a.png");
	background-repeat: no-repeat;
	background-position: top 1px left 5px,top 0 right 0;
}

#filemanager-menu-bg,#terminal-menu-bg,#mailer-menu-bg,.texteditor-menu-bg {
	background-color: #F7F2E7; border-bottom: solid 2px #000000; height: 25px; z-index: 1;
}

#terminal-menu-bg {
	background-color: #F7F2E7; border-bottom: solid 2px #000000; height: 25px; z-index: 1;
}
#filemanager-menu,#terminal-menu,#mailer-menu,.texteditor-menu {
	font-family:"Arimo"; color: #000000; font-size: 13px; padding: 3px 0 0 10px; white-space: pre;
}
.text_ul { text-decoration: underline; }

#filemanager-search-bg {
	color: #000000; background-color: #F7F2E7; border-bottom: solid 2px #000000; height: 35px; z-index: 1;
	padding: 5px 0 5px 10px;
}
#custom-search {
	width: 400px;
}

#filemanager-tab {
	background-color: #F7F2E7; border-bottom: solid 2px #000000; z-index: 1;
	padding: 5px 0 0px 5px;
}
.tab-s {
		font-family: "Arimo"; display: inline-block; background-color: #F7F2E7; min-width: 100px;
		color: #000000; font-size: 13px; text-align: center;
		border-top: solid 1px #000000; border-right: solid 1px #000000; border-left: solid 1px #000000;
		padding: 3px 0 3px 0;
}
.tab {
		font-family: "Arimo"; display: inline-block; min-width: 100px;
		color: #000000; font-size: 13px; text-align: center;
		border-top: solid 1px #000000; border-right: solid 1px #000000; border-left: solid 1px #000000;
		padding: 3px 0 3px 0;
}
	.tab:hover { background-color: #F7F2E7; cursor: pointer; }
	.tab-s:hover { cursor: pointer; }

#tab_sega, #tab_pc, #tab_misc {
		background-color: #bebbb4;
}


/* log */
#texteditor_a {
		top: 95px; left: 150px; z-index: 85;
		position: absolute; border: solid 2px #000000; box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.16);
}
#texteditor_b {
		top: 185px; left: 700px; z-index: 80;
		position: absolute; border: solid 2px #000000; box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.16);
}
#texteditor_c {
		top: 75px; left: 120px; z-index: 85;
		position: absolute; border: solid 2px #000000; box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.16);
}
#texteditor_d {
		top: 85px; left: 140px; z-index: 85;
		position: absolute; border: solid 2px #000000; box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.16);
}
#texteditor_e {
		top: 85px; left: 140px; z-index: 85;
		position: absolute; border: solid 2px #000000; box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.16);
}
.texteditor-title-bg, #texteditor_a-title-bg, #texteditor_c-title-bg, #texteditor_d-title-bg, #texteditor_e-title-bg{
	background-color: #99cc33; border-bottom: solid 2px #000000; padding: 0 0 0 15px;
	background-image: url("../img/img_bg_d.png"),url("../img/img_bg_a.png");
	background-repeat: no-repeat;
	background-position: top 1px left 5px,top 0 right 0;
}
.text_a {
	background-color: #298e6e; width: 530px; padding: 10px 10px 10px 40px; height: 350px; overflow-x: scroll;
	background-image: url("../img/img_bg_h.png");
	background-repeat: repeat-y;
	background-position: top 0px left 5px;
}
.text_b {
	background-color: #298e6e; width: 250px; padding: 10px 10px 10px 40px; height: 350px; overflow-x: scroll;
	background-image: url("../img/img_bg_h.png");
	background-repeat: repeat-y;
	background-position: top 0px left 5px;
}
.text_c {
	background-color: #298e6e; width: 780px; padding: 10px 10px 80px 40px; height: 350px; overflow-x: scroll;
	background-image: url("../img/img_bg_h.png");
	background-repeat: repeat-y;
	background-position: top 0px left 5px;
}
.text_d {
	background-color: rgb(56, 84, 159); width: 750px; padding: 10px 10px 80px 40px; height: 450px; overflow-x: scroll;
	background-image: url("../img/img_bg_h.png");
	background-repeat: repeat-y;
	background-position: top 0px left 5px;
}

.hline_log {
	border-bottom: solid 1px #f7f7f7;
}
.quote {
	padding:0 0 0 30px; font-size: 13px;
}
.log {
	 color: #ededed; font-family: "Noto"; font-size: 13px;
	margin:0px 0 100px 0; top: 120px; left:70px; white-space:pre; z-index:1;
}
	.log A { padding: 0px 10px 0 3px; border-radius: 5px; }
	.log A:hover  { background-color: rgba(0, 0, 0, 0.45); }


#ai {
		top: 320px; left: 450px; z-index: 99;
		position: absolute;
}
#snoopy {
		top: 320px; left: 450px; z-index: 99;
		position: absolute;
}
#marcie {
		top: 450px; left: 580px; z-index: 100;
		position: absolute;
}

.site {
	padding: 0px 2px 0 3px; border-radius: 5px;
}
.site_dead {
	padding: 0px 2px 0 3px; border-radius: 5px; opacity: 0.6;
}
	.site:hover { background-color: rgba(0, 0, 0, 0.45); }
	.site_dead:hover { background-color: rgba(0, 0, 0, 0.45); }

#archive {
	color: #ededed; font-family: "Noto"; font-size: 14px; white-space: pre;
}
.server {
	margin: 20px 0 0 0;
}
.pl {
	padding:0 10px 3px 4px; border-radius: 5px;
}
	.pl:hover { background-color: rgba(0, 0, 0, 0.45);  }
#reference {
	margin: 40px 0 50px 0; font-size: 12px; font-family: "Noto";
}
#classical {
	margin: 0px 0 100px 0px; white-space:pre;
}
.music { font-size: 40px; margin: 15px 0 0 20px; }
.song { margin: 0 0 0 30px; }
.artist { border-left: solid 8px #ededed; padding: 0 0 0 5px; }
.composer { border-bottom: solid 1px #ededed; padding: 0 0 2px 0;}
.youtube {
	margin: 10px 0 0 30px; padding: 0 0 0 5px; border-radius: 5px;
}
	.youtube:hover { background-color: #237bbc; }
.log_td1 {
	padding: 0 30px 0 3px; border: solid 1px transparent; font-size: 12px;
}
.log_td1:hover { border: solid 1px #ededed; }
.log_td2 {
	padding: 0 0 0 10px; font-size: 12px;
}
.asmr { border: solid 1px #ededed; }

#switch {
	width:500px; margin: 0px 0 40px 0px; white-space: normal;
}
	#switch:after { clear:both; }


.genre {
	display: inline-block; min-width:85px; height: 19px; font-family: "Noto";
	text-align:center; background-color: #ededed;
	padding:3px 4px 3px 4px; margin-right:5px;
	color: #38549f; border-radius: 5px;
}

#bing-cahn { right: 50px; position: absolute; }
#bing-bg {
	top: 75px; left: 20%; position: absolute;
	border-top: solid 1px #606060; border-left: solid 1px #606060;
	border-bottom: solid 1px #101010; border-right: solid 1px #101010;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}
#bing-menu-bg {
	background-color: #F7F2E7; border-bottom: solid 2px #000000; height: 22px; z-index: 1;
}
#bing-menu {
	font-family:"Arimo"; color: #000000; font-size: 12px; padding: 3px 0 0 10px; white-space: pre;
}
#bing-title-bg {
	font-family: "Noto"; color: #f9f9f9; font-size: 12px; padding: 1px 0px 1px 25px; height: 22px;
	text-shadow: 2px 2px 1px rgba(0,0,0,0.5); background-color: #202020;
	background-image: url("../img/img_bg_k.png"),url("../img/img_bg_j.png");
	background-repeat: no-repeat;
	background-position: top 4px left 5px,top 6px right 5px;
}
#bing-main {
	font-family: "Noto"; color: #f9f9f9; font-size: 13px; padding: 5px 0px 105px 35px;
	position: relative;  white-space: pre; overflow-y: scroll; height: 5px; width: 5px;
	background-color: rgba(0, 0, 0, 1); border: solid 5px #f7f2e7;

}

	.thumbnail { filter: brightness(0.90); background-color: #f7f2e7; padding: 2px; box-shadow: 1px 1px 4px rgba(0,0,0,0.6);}
	.thumbnail:hover { filter: brightness(0.50);}
	.thumbnail-b { filter: brightness(0.90); background-color: #f7f2e7; padding: 2px; box-shadow: 1px 1px 4px rgba(0,0,0,0.6);}
	.thumbnail-b:hover { filter: brightness(0.50);}

.headline {
	border-bottom: 1px solid #f7f7f7; margin: 0 0 0 -15px;
}
.prompt { font-family: "Noto"; white-space: normal; width: 470px;}
.bingimg { margin: 6px 0 2px 0; }
.editor-table { margin: 0px 10px -10px 0; }
.td2 { padding: 10px 0 0 5px; text-align: center;}
.color1 { font-family: "Noto"; color: #f29f05; }
.color2 { font-family: "Noto"; color: #5bb4fc; }
.color3 { font-family: "Noto"; color: #b5ed7e; }


#zoombg {
	z-index: 100; top: 0; left: 0; width: 100%; height: 100%; position: fixed;
}
#zoom {
	z-index: 105; display: none;
	top: 50%; left: 50%; position: absolute; width: 100%; height: 100%;
}
#zoomimg {
	z-index: 110; border: solid 5px #f7f2e7; transform: translate(-50%, -50%);
	white-space: pre; max-width: 80%; max-height: 80%; transition: transform 0.2s; user-select: none;
}

#zoomimg-nex {
    font-family: "Noto"; color: #ffffff; font-size: 50px; bottom: 45px; left: 57%; position: fixed;
    filter: drop-shadow(5px 5px 1px #000000); z-index: 105; user-select: none; cursor: pointer;
}
#zoomimg-pre {
    font-family: "Noto"; color: #ffffff; font-size: 50px; bottom: 45px; left: 37%; position: fixed;
    filter: drop-shadow(5px 5px 1px #000000); z-index: 105; user-select: none; cursor: pointer;
}
#zoomimg-res {
    font-family: "Noto"; color: #ffffff; font-size: 50px; bottom: 45px; left: 48%; position: fixed;
    filter: drop-shadow(5px 5px 1px #000000); z-index: 105; user-select: none; cursor: pointer;
}


#zoomimg:hover { cursor: pointer; }

/* mail */


#mailer {
		top: 120px; left: 180px; z-index: 85;
		position: absolute; border: solid 2px #000000; box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.16);
}
#mailer-title-bg {
	background-color: #99cc33; border-bottom: solid 2px #000000; padding: 0 0 0 15px;
	background-image: url("../img/img_bg_c.png"),url("../img/img_bg_a.png");
	background-repeat: no-repeat;
	background-position: top 1px left 5px,top 0 right 0;
}
#mail-form {
	background-color: #298e6e; width: 500px; padding: 10px;
	background-image: url("../img/marcie.png");
	background-repeat: no-repeat;
	background-position: bottom 5px right 10px;
}

#mail input {
	 font-size: 13px; color: #e2e2e2;
	background-color: #ffffff; border: solid 1px #e2e2e2;
}

#mail textarea {
	 font-size: 13px; color: #e2e2e2;
	background-color: #ffffff; border: solid 1px #e2e2e2;
}

#form-name {
	padding:5px 0 5px 0; margin: 0px 0 3px 0px; color:#ffffff; font-size: 14px;
}

#form-message {
	padding:5px 0 5px 0; margin: 10px 0 3px 0px; color:#ffffff; font-size: 14px
}

#form-submit {
	padding:10px 0 5px 0;
}
#sub_but {
	font-family: "Arimo"; background-color:#ffffff; color: rgb(56, 159, 127); width:70px; border:solid 1px #e2e2e2; padding:2px 5px 2px 5px;
	margin: 25px 0 50px 0;
}
#form-mface {
	padding:15px 5px 5px 0px; color:#f7f7f7; font-family: "Arimo"; font-size: 14px;
}
	#form-mface A:link { color:#f7f7f7; }
	#form-mface A:visited { color:#f7f7f7; }
	#form-mface A:active { color:#f7f7f7; }
	#form-mface A:hover { color:#f7f7f7; }

#googleform-link {
	background-color: #ffffff; color: #298e6e; text-align: center; padding: 1px 5px 1px 5px; width: 100px;
	margin: -20px 0 0 280px; font-family: "Arimo"; font-size: 13px;
	border-radius: 10px;
}
.guidance {
	font-family: "Noto"; font-size: 12px;
}
	#googleform-link A:link, #googleform-link A:visited, #googleform-link A:active, #googleform-link A:hover { color:#298e6e; }



#command {
	font-family:"Arimo"; background-color: #000000; min-width: 500px; padding: 5px 0 15px 5px;
	font-size: 13px;
	background-image: url("../img/pacman.png");
	background-repeat: no-repeat;
	background-position: bottom 3px right 15px;
}
#command_ai {
	font-family:"Arimo"; background-color: #000000; min-width: 500px; padding: 5px 0 15px 5px;
	font-size: 13px;
	background-image: url("assets/ai/pic/img_bg_h.png");
	background-repeat: no-repeat;
	background-position: top 5px right 10px;
}
#command_b {
	font-family:"Noto"; background-color: #000000; min-width: 500px; padding: 5px 0 15px 5px;
	font-size: 13px;
	background-image: url("../img/pacman.png");
	background-repeat: no-repeat;
	background-position: top 30px right 15px;
}
	#title_jp {
		font-family:"Noto"; color:#d87c7b; font-size: 13px; margin: 10px 0 5px 0;
	}
	#title_en {
		font-family:"Noto"; color:#e7a37a; font-size: 12px;
	}
	#publisher {
		font-family:"Noto"; color:#e8c367; font-size: 14px;
	}
	.pickup {
		font-family:"Noto"; color:#e7a37a; font-size: 11px; white-space: pre;
	}

	.pickup A:link { color:#e8c367; }
	.pickup A:visited { color:#e8c367; }
	.pickup A:active { color:#e8c367; }
	.pickup A:hover { color:#e8c367; opacity: 0.5;}

#minigame_window {
	position: absolute; border: solid 2px #000000; font-family:"Noto";
	box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.16);
	top: 470px; left: 140px; z-index: 6;
	overflow: hidden; width: fit-content;
}

#window_ss-a,#window_ss-b,#window_ss-c,#window_ss-d,#window_ss-e,#window_ss-f,
#window_ss-g {
	position: absolute; border: solid 2px #000000;
	box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.16);
}
#window_ss-a { top: 120px; left: 540px; z-index: 5; }
#window_ss-b { top: 350px; left: 100px; z-index: 3; }
#window_ss-c { top: 270px; left: 650px; z-index: 4; }
#window_ss-d { top: 100px; left: 900px; z-index: 1; }
#window_ss-e { top: 450px; left: 380px; z-index: 2; }
#window_ss-f { top: 400px; left: 900px; z-index: 1; }
#window_ss-g { top: 300px; left: 1100px; z-index: 0; }


.window_ss-title-bg {
	background-color: rgb(255, 135, 90); border-bottom: solid 2px #000000; height: 18px;
	background-image: url("../img/img_bg_a.png");
	background-repeat: no-repeat;
	background-position: top 0 right 0;
}
.ss { vertical-align:bottom;  filter: brightness(0.90); -webkit-filter:brightness(0.90); }
.santa { image-rendering: pixelated; width: 256px; height: 256px;  vertical-align:bottom;  filter: brightness(0.90); -webkit-filter:brightness(0.90); }


.window_ss_border {
	height: 7px;
	background-image: url("../img/ss_bg_right.png"),url("../img/ss_bg_left.png"),url("../img/ss_bg.png");
	background-repeat: no-repeat,no-repeat,repeat-x;
	background-position: bottom 0 right 0,bottom 0 left 0,bottom 0px left 0px;
}

#taskbar {
	position: fixed; top: 0px; left: 10px; width: 100%; height: 30px; z-index: 50;
	padding: 0 0 0 25px; user-select: none;
}
#taskbar_m {
	position: fixed; top: 0px; left: 0px; height: 30px; z-index: 50;
	padding: 0 0 0 25px; display: none;
}
.task {
		display: inline-block;  overflow: hidden; font-family:"CascadiaCode";
		color: #f7f7f7; font-size: 13px; margin: 7px 0 0 7px; padding: 0 5px 0 5px;
}
.task:hover { background: #f9f9f9; color: #000000; border-radius: 5px; cursor: pointer; }

#clock {
	position: fixed; bottom: 0px; right: 0px; width: 62px; height: 35px; z-index: 50;
	background-color: #076073; border-left: solid 3px #222222;
}

	#db {
		bottom: 0px; right: 110px; position: fixed;
		color:#a9caff; font-size: 46px; z-index: 50;
	}
	#icon {
		top: 180px; left: 40px; position: fixed;
	}


/* Background */

#frame_top {
	top: 0px; right: 0px; width: 100%; height: 30px; position: fixed; z-index: 5;
	background-color: #000000;
}
#frame_top-log {
	top: 0px; right: 0px; width: 100%; height: 78px; position: fixed; z-index: 4;
	background-color: #000000;
	background-image: url("../img/img_bg_e.png"),url("../img/img_bg_g.png"),url("../img/img_bg_f.png");
	background-repeat: no-repeat,no-repeat,repeat-x;
	background-position: top 30px left 35px,top 30px right 35px,top 30px right 0px;
}
#frame_bottom {
	bottom: 0px; right: 0px; width: 100%; height: 30px; position: fixed; z-index: 100;
	background-color: #000000;
}
#frame_left {
	top: 0px; left: 0px; width: 30px; height: 100%; position: fixed; z-index: 100;
	background-color: #000000;
}
#frame_right {
	top: 0px; right: 0px; width: 30px; height: 100%; position: fixed; z-index: 100;
	background-color: #000000;
}