/* Eric Meyer's Reset CSS v2.0 */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}/*HTML5display-roleresetforolderbrowsers*/article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}

/*
min-width: 601px
min-width: 993px
min-width: 1201px

max-width: 600px
max-width: 992px
max-width: 1200px
*/

html { height: 100%; overflow-y: scroll }
body { background:#f1f4f7; color:#777 }


/*INDEX*/
.bg_index { background:url('../img/index.jpg') 50% 50% fixed; width: 100%; height: 100% }
.bg_moon { background:url('../img/index_moon.jpg') 50% 50% fixed; width: 100%; height: 100% }

.mod_index { width: 360px; height: 360px; box-shadow:0 0 2px 2px #000; padding: 75px 50px 25px; border-radius: 50%; }
@media only screen and ( max-width: 480px ) { .mod_index { width: 100%; height: 100%; padding:50px 0; border-radius: 0 } }


/*NAV*/
nav { position:fixed; z-index: 1000; top:0; width:100%; background: #fff }

.nav_search div.input-field { margin-top: 0.2rem; width:250px }
.nav_search div.input-field input { font-size: 1.2rem; height: 1.5rem; margin: 0 }

#nav_display { z-index: 250; background: #fff; border: 1px #dee0e8 solid; margin-top: 44px }
#nav_display a { display: block; padding:10px; width: 100%; height: 100% }
#nav_search_done { z-index: 250; background: #fff; border: 1px #dee0e8 solid; margin-top: 33px; width: 250px }
#nav_search_done div.truncate { width: 180px }

@media only screen and ( min-width: 761px ) {
	.nav_search div.input-field { width: 300px }
	#nav_search_done { width: 300px }
	#nav_search_done div.truncate { width: 220px }
}

.navbtn { font-size: 0.80rem; font-weight: 300; display: inline-block }
.navbtn div { padding: 5px 0 0 0 }
@media only screen and ( min-width: 481px ) {
	.navbtn { font-size: 1.16rem; font-weight: 500; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
	.navbtn div { padding: 0 0 0 10px }
}

/*input*/
.w2 { width: 240px }

/*button*/
.btn, .btns, .btnm, .btnl, .btnx { border-radius: 3px; cursor:pointer }
.btnx:hover { background: #f1f4f7; }

.btns { padding: 5px 7px; }
.btnm { padding: 8px 10px; }
.btnl { padding: 11px 13px; }