/* COLUMN WIDTHS
        left margin         16
        left                375
        padding             10
        center              450
        padding             10
        right               355
        right margin        16
            all three       1232
            mid + right     847     16 + 450 + 10 + 355 + 16
            right           387
    */

    #page_content {
        position        : relative;
    }

    .logo {
        overflow-x      : hidden;
    }

    #three_column_holder {
        margin-left     : auto;
        margin-right    : auto;
        position        : relative;
    }

    .home_col {
        position        : absolute;
        top             : 16px;
    }

    #left_column {
        width           : 375px;
        height          : 555px; /* 32 (title) + 376 (news) + 5 + 32 (title) + 110 (items) */
    }

    #center_column {
        width           : 450px;
        height          : 557px;
    }

    #right_column {
        width           : 355px;
    }

    #center_column_content {
        background      : url("/images/maps/front_world.png");
        background-position: top center;
        background-repeat : no-repeat;
        position        : relative;
        width           : 450px;
        height          : 557px;
        margin-left     : auto;
        margin-right    : auto;
    }


    #speech {
        opacity         : 0.8;
        max-width       : 500px;
        margin-left     : auto;
        margin-right    : auto;
    }
    #speech .msg {
        margin-left     : 12px;
        margin-right    : 12px;
    }
    #speech .bubble {
        margin-left     : 20px;
    }

    #center_groph {
        position        : absolute;
        width           : 300px;
        height          : 300px;
        bottom          : 0px;
        right           : 0px;
    }

    .curved_bottom {
        border-bottom-left-radius              : 10px;
        border-bottom-right-radius             : 10px;
    }

    #latest_items {
        width           : 375px;
        margin-top      : 5px;
    }

    #itembody {
              height: 110px;
              overflow: none;
              background-color: #EFD6D6;
          border-left : 1px #660000 solid;
          border-right : 1px #660000 solid;
          border-bottom : 1px #660000 solid;
     }

    #itembody table {
        margin-left     : auto;
        margin-right    : auto;
    }

/* ****************************************** */
/* LINK ROW                                   */
/* ****************************************** */

    #welcome_link_bar a {
        display             : inline-block;
        background-color    : rgb(102, 0, 0);
        padding             : 2px 4px;
        border-radius       : 2px;
        text-decoration     : none;
        margin-top          : 1px;
    }
    #welcome_link_bar a:hover, #welcome_link_bar a.selected {
        background-color    : rgb(255, 204, 204);
        color               : rgb(102, 0, 0);
    }
    #welcome_link_bar span {
        display             : none;
    }

/* ****************************************** */
/* Reminder                                   */
/* ****************************************** */

    .home_login_link a {
        display             : inline-block;
        background-color    : rgb(153, 51, 51);
        padding             : 2px 4px;
        border-radius       : 2px;
        text-decoration     : none;
        margin-top          : 1px;
        color               : rgb(255, 249, 238);
    }
    .home_login_link a:hover {
        background-color    : rgb(102, 0, 0);
    }

/* ****************************************** */
/* PLAY NOW                                   */
/* ****************************************** */

    #play_now {
        display         : block;
        position        : absolute;
        background-image: url('/welcome/play_now2.png');
        background-repeat: no-repeat;
        width           : 218px;
        height          : 65px;
        top             : 6px;
        right           : 20px;
        z-index         : 100;
    }

    #play_now a {
        text-decoration : none;
        display         : block;
        width           : 218px;
        height          : 65px;
    }

    #play_now a span {
        display         : none;
    }

/* ****************************************** */
/* SIGNUP                                     */
/* ****************************************** */

    #back_panel #error_box {
        margin-top          : -28px;
    }
    #back_panel.home_panel #error_box {
        margin-top          : -8px;
    }


    #signup_header {
        text-align          : center;
        margin-top          : 0px;
        padding-top         : 10px;
    }

    #signup_box {
        background      : #FFFFF9;
        padding         : 8px;
        width           : 70%;
        margin-left     : auto;
        margin-right    : auto;
    }

    #signup_box h2 {
        background      : #990000;
        color           : white;
        margin          : 0px;
        padding         : 6px;
        border          : 1px solid #660000;
    }

    #signup_box .signup_section {
        border          : 1px solid #660000;
        padding         : 0px;
        overflow        : hidden;
    }

    #instructions {
        margin-top      : 10px;
    }
    .instructions_body p, .instructions_body h3 {
        padding         : 7px;
    }
    .instructions_body li {
        font-size: 85%;
    }

    #note {
        color           : #999;
        font-size       : 80%;
    }

    .submit {
        margin-left     : 158px;
    }
    .submit input {
        font-size       : 16px;
    }

    .form_item {
        margin          : 6px 0px;
        min-height      : 30px;
    }

    .form_item label {
        font-size       : 18px;
        font-weight     : bold;
        display         : inline-block;
        width           : 154px;
        text-align      : right;
        margin-right    : 6px;
        margin          : 0px;
        vertical-align  : middle;
    }

    .form_item input {
        height          : 28px;
        font-size       : 16px;
        border          : 1px solid #633;
        padding         : 4px;
        color           : #555;
        width           : 220px;
        margin          : 0px;
        display         : inline-block;
        vertical-align  : middle;
        -moz-border-radius : 6px;
        -webkit-border-radius : 6px;
        border-radius    : 6px;
    }

    .form_item input:focus {
        background      : #FFCCCC;
        border-color    : black;
        -moz-border-radius-topright : 0px;
        -moz-border-radius-bottomright : 0px;
        -webkit-border-radius-topright : 0px;
        -webkit-border-radius-bottomright : 0px;
        border-top-right-radius : 0px;
        border-bottom-right-radius  : 0px;
    }

    .form_item .dyn.show {
        height          : 28px;
        font-size       : 16px;
        line-height     : 28px;
        border          : 1px solid #999;
        background      : #EEEEE9;
        padding         : 4px;
        color           : #222;
        width           : 350px;
        display         : inline-block;
        margin          : 0px;
        border-left-width : 0px;
        vertical-align  : middle;
        -moz-border-radius-topright : 6px;
        -moz-border-radius-bottomright : 6px;
        -webkit-border-radius-topright : 6px;
        -webkit-border-radius-bottomright : 6px;
        border-top-right-radius : 6px;
        border-bottom-right-radius  : 6px;
    }

    .form_item input:focus-visible {
        outline: none;
    }

    .form_item.serror input {
        border-color    : red;
        -moz-border-radius-topright : 0px;
        -moz-border-radius-bottomright : 0px;
        -webkit-border-radius-topright : 0px;
        -webkit-border-radius-bottomright : 0px;
        border-top-right-radius : 0px;
        border-bottom-right-radius  : 0px;
    }

    .form_item.serror .dyn {
        border-color    : red;
        background      : #FF9999;
    }

    .form_item.full label {
        width: auto;
        margin-left: 158px;
    }
    .form_item.full input {
        width: auto;
    }
    .form_item.full input[type=checkbox] {
        width: 1.5em;
    }

    .explanation {
        margin-left     : 160px;
        font-size       : 90%;
        color           : #999;
        display         : none;
    }

    .cookie_ico {
        font-size       : 85%;
        font-style      : italic;
        color           : #999;
        padding-left    : 6px;
        padding-right   : 6px;
    }

    @media all and (max-width: 1000px) {
        .form_item .dyn.show {
            width           : auto;
        }
    }
    @media all and (max-width: 850px) {
        #signup_box {
            width           : 100%;
            box-sizing      : border-box;
            border          : none;
            box-shadow      : none;
            border-radius   : 0px;
        }
        .form_item .dyn.show {
            height          : 20px;
            border-radius   : 6px;
            border-width    : 1px;
            line-height     : inherit;
            display         : block;
            margin-top      : 5px;
        }
        .form_item label {
            width           : auto;
            display         : block;
            text-align      : left;
        }
        .form_item input, .form_item input:focus {
            width           : 100%;
            display         : block;
            border-radius   : 6px;
            box-sizing      : border-box;
            height          : 38px;
        }
        .form_item.serror input {
            border-radius   : 6px;
        }
        .explanation {
            margin-left     : 0px;
        }
        .submit {
            margin-left     : 0px;
            text-align      : center;
            margin-bottom   : 15px;
        }
        .submit input {
            border          : 0px;
            background      : #600;
            color           : white;
            font-weight     : bold;
            border-radius   : 4px;
            padding         : 6px;
        }
    }

/* ****************************************** */
/* HOME PAGE                                  */
/* ****************************************** */

     p {
        font-size       : 90%;
     }

     .little_images {
        text-align      : center;
        background      : #600;
        width           : 819px;
        border-top      : 1px solid #600;
        border-bottom   : 1px solid #600;
     }

     .little_images img {
        height          : 55px;
        width           : 55px;
        padding-right   : 3px;
     }

     .little_images img.last {
        padding-right   : 0px;
     }

     .logo {
        background-color        : transparent;
        padding-bottom          : 0px;
        background-image        : url('/images/icons/logo.gif');
        background-position     : 0px 0px;
        background-repeat       : no-repeat;
        height                  : 32px;
        padding-left            : 39px;
        display                 : block;
        font-size               : 26px;
        line-height             : 32px;
     }

     .main_body {
        background      : url("/welcome/home_background.gif");
        background-repeat : repeat-x;
     }

     .main_tools {
        padding         : 8px;
     }

     .mbbw {
        background      : url("/welcome/home_back_bw.gif");
        background-repeat : repeat-x;
     }

     .mbbl {
        /* background      : url("/welcome/home_back_bl.gif");
        background-repeat : repeat-x;
        padding         : 1px; */
        background      : linear-gradient(to bottom,rgb(214, 214, 249) 0px,rgb(214, 214, 249) 33px, rgba(214, 214, 249,0));
     }

     .home_panel {
        padding         : 7px;
     }

     #back_panel {
        padding         : 0px;
        border          : none;
        background      : transparent;
     }

     .mb {
        background      : white;
     }

     #error_box {
        width           : 700px;
        border          : 2px solid black;
        background      : #FF0000;
        padding         : 10px;
        margin-bottom   : 0px;
        border-top		: 0px none;
		border-bottom-left-radius : 8px;
		border-bottom-right-radius: 8px;
     }

     #error_box h2, #error_box h3 { padding :5px; margin : 0px; }

/* ****************************************** */
/* TOP-LEFT INFO AREA                         */
/* ****************************************** */

     .home_title_box {
        width           : 430px;
        height          : 163px;
        padding         : 0px;
        background-image   : url("/welcome/top_box_plain.gif");
        background-repeat  : no-repeat;
        background-color   : #fff9ee;
        border             : 1px solid #660000;
        -moz-box-shadow    : inset 0px 0px 5px 0px #660000;
        -o-box-shadow      : inset 0px 0px 5px 0px #660000;
        -webkit-box-shadow : inset 0px 0px 5px 0px #660000;
        box-shadow         : inset 0px 0px 5px 0px #660000;
        margin-bottom   : 13px;
        overflow        : hidden;
     }

     .home_title_inner {
        padding         : 15px;
        margin          : 0px;
     }

     .home_title_inner h1 {
        margin-top      : 0px;
        margin-bottom   : 5px;
        font-variant    : small-caps;
        font-size       : 32px;
        line-height     : 38px;
        padding         : 0px;
     }

     .home_title_inner p {
        margin-top      : 0px;
        margin-bottom   : 5px;
        font-size       : 16px;
        line-height     : 18px;
        padding         : 0px;
     }

/* ****************************************** */
/* RIGHT HAND BAR                             */
/* ****************************************** */

     .home_box {
        height             : 555px;
        padding            : 0px;
        background-color   : #fff9ee;
        border             : 1px solid #660000;
        -moz-box-shadow    : inset 0px 0px 5px 0px #660000;
        -o-box-shadow      : inset 0px 0px 5px 0px #660000;
        box-shadow         : inset 0px 0px 5px 0px #660000;
        text-align         : center;
        overflow           : hidden;
     }

     .home_box_inner {
        padding-top     :  5px;
        padding-left    : 15px;
        padding-bottom  :  5px;
        padding-right   : 15px;
        margin          :  0px;
        height          : 330px;
     }

     .home_box_inner h1 {
        margin-top      : 0px;
        text-align      : center;
     }

     .home_image_big {
        margin-top      : 10px;
        width           : 300px;
        height          : 300px;
        border          : 1px solid #B99;
        background      : white;
     }

     .home_image_small {
        width           : 150px;
        height          : 150px;
        border          : 1px solid #B99;
     }

     .home_image_title {
        text-align      : center;
        margin-top      : 0px;
        margin-bottom   : 5px;
        padding         : 0px;
        font-size       : 14px;
        font-variant    : small-caps;
        color           : #9F9988;
     }

     .home_image_title_small {
        width           : 150px;
     }

     .image_box {
        margin-top      : 5px;
        position        : relative;
        height          : 326px;
        width           : 308px; /* 308 */
        margin-left     : auto; /* 18 */
        margin-right    : auto;
     }

     .home_box .cookie_ico {
        font-size       : 11px;
     }

     #home_image_flex_single, #form_preamble {
        display     : none;
     }

     #big {
        display         : block;
        width           : 300px;
        height          : 300px;
        position        : absolute;
        z-index         : 10000;
        top : 18px;
        left : 0px;
        border : 4px solid #B99;
     }

     #ttl {
        position        : absolute;
        z-index         : 5;
        top             : 0px;
        left            : 0px;
     }

     #ttr {
        position        : absolute;
        z-index         : 5;
        top             : 0px;
        left            : 156px;
     }

     #tl {
        position        : absolute;
        z-index         : 5;
        top             : 18px;
        left            : 0px;
     }

     #tr {
        position        : absolute;
        z-index         : 5;
        top             : 18px;
        left            : 156px;
     }

     #bl {
        position        : absolute;
        z-index         : 5;
        top             : 174px;
        left            : 0px;
     }

     #br {
        position        : absolute;
        z-index         : 5;
        top             : 174px;
        left            : 156px;
     }


/* ****************************************** */
/* LOGIN BOX                                  */
/* ****************************************** */

    .display_table.login_box.solid.home_login {
        border-color    : #C89B9B;
    }

     .login_box_outer {
        border-right    : 3px solid #CCC9BB;
        border-bottom   : 3px solid #CCC9BB;
        padding         : 0px;
        background      : #FFFFF9;
     }

     .login_box_inner {
        margin-bottom   : 0px;
        border          : 1px solid #660000;
     }

     .login_box_inner th {
        background      : #660000;
        color           : #FFFFF9;
        border-bottom   : 2px solid #999993;
        font-size       : 120%;
        margin-bottom   : 5px;
     }

     .home_login {
        margin-top      : 10px;
     }

     .home_login_link {
        padding         : 0px;
        margin          : 3px;
        text-align      : center;
     }

     .home_login_link a {
        text-align      : center;
        font-size       : 12px;
     }


/* ****************************************** */
/* NEWS AREA                                  */
/* ****************************************** */

     #news {
        width           : 375px; /* 430 */
        position : relative;
        padding-bottom : 25px;
     }

     #newstitle {
        background-color  : #660000;
        padding           : 5px;
        background        : url("/welcome/news.gif");
        background-repeat : no-repeat;
        font-size         : 20px;
        margin            : 0px;
        line-height       : 22px;
     }

     #newstitle h4 {
           margin: 0px;
           font-size: 20px;
           color: #fff;
     }

     #newsbody {
        height: 351px; /* 347 */
        overflow: auto;
        background-color: #EFD6D6;
        border-left : 1px #660000 solid;
        border-right : 1px #660000 solid;
        border-bottom : 1px #660000 solid;
     }

     #newsbody h3 {
          background-color: rgba(153,51,51,0.2) ;
          /* color: #fff; */
          margin: 0px;
          padding: 5px;
     }

     #newsbody h4 {
         margin-left   : 5px;
         margin-right  : 5px;
         margin-top    : 15px;
         margin-bottom : 15px;
         font-size     : 15px;
     }

     #newsbody p {
         font-size: 12px;
         margin: 5px 5px 10px 5px;
     }

     #newsbody img {
        max-width       : 400px;
     }

     #newsbody img[width="100"] {
        background-color    : white;
     }

     #newsbody .items {
        text-align          : center;
     }
     #newsbody .items img {
        display             : inline-block;
        border              : 1px solid #bbb;
        margin              : 3px;
        padding             : 2px;
        background-color    : white;
     }

/* ****************************************** */
/* ABOUT PAGE                                 */
/* ****************************************** */

     .info_panel {
        margin-left         : 10px;
        display             : flex;
        gap                 : 1em;
        align-items         : flex-start;
     }

     .info_panel p {
        margin-left         : 5px;
     }

     .info_panel img {
        max-width           : 100%;
        height              : auto;
     }

     .about {
        color               : #000000;
        font-size           : 140%;
        background          : rgb(235,235,255);
        box-shadow          : inset 0px 0px 4px 0px rgb(195,195,230);
        padding             : 4px 6px;
        border-radius       : 4px;
        border              : 1px solid #777799;
     }

     .example_box {
        padding             : 7px;
        border              : 1px solid #993333;
        background          : #FFF9EE;
        border-radius       : 4px;
        margin              : auto;
        text-align          : center;
     }

     .example_box .item {
        display         : inline-block;
        margin          : 4px;
        text-align      : center;
        max-width       : 110px;
        vertical-align  : top;
     }

     .example_box .item img {
        background      : white;
        border          : 1px solid black;
        border-radius   : 4px;
        padding         : 3px;
     }

     .example_box .item p {
        margin-left     : 0px;
     }

     .example_box .avatar {
        display         : inline-block;
        margin          : 4px;
        text-align      : center;
        max-width       : 60px;
        vertical-align  : top;
     }

	 #info_sidebar {
	 	width				: 355px;
        order               : 2;
	 }
     #info_main {
        padding             : 1em;
        vertical-align      : top;
     }

     ul.example_box {
     }
     ul.example_box li {
        list-style-type     : none;
        display             : inline-block;
        margin              : 0px 2px;
        text-align          : center;
        width               : 112px;
     }
     ul.example_box li img {
        border              : 1px solid #999999;
        background          : white;
        display             : block;
        margin              : auto;
     }
     ul.example_box li span {
        display             : block;
        font-size           : 10px;
        margin-top          : 5px;
     }
     
     #pw_add {
     	clear				: both;
     	margin-top			: 40px;
     }
     #pw_add div {
     	margin				: auto;
     	max-width			: 468px;
     }

/* ****************************************** */
/* SEO                                        */
/* ****************************************** */

	#seo {
		margin				: 40px 10%;
		font-size			: 80%;
		background-color	: #EFD6D6;
    	border				: 1px #660000 solid;
    	padding				: 10px;
	}

/* ****************************************** */
/* MOSAIC                                     */
/* ****************************************** */

    #mosaic_holder {
        margin: 100px auto auto auto;
        padding: 16px;
        box-sizing: border-box;
        --rows: 2;
        --cols: 8;
    }
    .mosaic {
        display: grid;
        grid-template-columns: repeat(var(--cols),150px);
        grid-template-rows: repeat(var(--rows),150px);
        border-radius: 10px;
        overflow: hidden;
        outline: 1px solid #600;
    }
    .mosaic .items {
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        place-items: center;
        background: white;
    }
    .mosaic .items img {
        width: 70px;
        height: 70px;
    }
    .mosaic > * {
        outline: 1px solid #600;
        width: 150px;
        height: 150px;
    }
    .mosaic > *:hover {
        width: 300px;
        height: 300px;
        z-index: 1;
        grid-row: 1 / 2;
    }

/* ****************************************** */
/* RESPONSIVE                                 */
/* ****************************************** */

    /* COLUMN WIDTHS
        left margin         16
        left                375
        padding             10
        center              450
        padding             10
        right               355
        right margin        16
            all three       1232
            mid + right     847     16 + 450 + 10 + 355 + 16
            right           387
    */

    /* LARGER, CAN HOLD A WHOLE COLUMN, BUT ONLY IF PORTRAIT */

    @media all and (min-width: 387px) {
        #three_column_holder {
            width            : 387px;
        	height			 : 555px;
        }
        #left_column {
            display          : none;
        }
        #center_column {
            display          : none;
        }
        #right_column {
            right            : 16px;
        }
        #mosaic_holder {
            width            : 332px;
            --rows: 8;
            --cols: 2;
        }
    }

    @media all and (min-width: 847px) {
        #three_column_holder {
            width            : 847px;
        	height			 : 555px;
        }
        #left_column {
            display          : none;
        }
        #center_column {
            left             : 16px;
            display          : block;
        }
        #right_column {
            right            : 16px;
        }
        #mosaic_holder {
            width            : 632px;
            --rows: 4;
            --cols: 4;
        }
    }

    @media all and (min-width: 1232px) {
        #three_column_holder {
            width            : 1232px;
       		height			 : 555px;
        }
        #left_column {
            left             : 16px;
            display          : block;
        }
        #center_column {
            left             : 401px; /* 16 (left margin) + 375 (left col) + 10 (padding) */
            display          : block;
        }
        #right_column {
            right            : 16px;
        }
        #mosaic_holder {
            width            : 1232px;
            --rows: 2;
            --cols: 8;
        }
    }

    @media all and (max-width: 847px) {
        .logo span {
            display          : none;
        }
    }

    @media all and (max-width: 974px) {
        #play_now {
            top          	 : -10px;
            right			 : 0px;
        }
    }

    @media all and (max-width: 500px) and (orientation : landscape), all and (max-height: 400px) and (orientation : landscape) {
        #left_column, #center_column, #info_sidebar {
            display          : none;
        }
        #info_main {
            padding-right    : 10px;
        }
    }

    /* SMALLEST POSSIBLE SIZE, VERTICAL COLUMN BOX */

    @media all and (max-width: 700px), all and (max-height: 400px) {
        #page_content {
            padding-bottom    : 80px;
        }
        #welcome_link_bar {
            -webkit-overflow-scrolling: touch;
            overflow-x: scroll;
            overflow-y: hidden;
        }
        #play_now {
            top              : inherit;
            bottom           : 10px;
            left             : 50%;
            right            : auto;
            margin-left      : -106px;
        }
        #three_column_holder {
            width            : 100%;
            padding          : 5px;
            box-sizing       : border-box;
        }
        #left_column {
            display          : none;
        }
        #center_column {
            display          : none;
        }
        #right_column {
            position         : relative;
            width            : 100%;
            box-sizing       : border-box;
            right			 : inherit;
        }
        #right_column .home_box {
            margin-top       : 0px;
            padding-top      : 10px;
            padding-bottom   : 10px;
            height           : auto;
        }
        #right_column .msg {
            margin           : 5px 0px;
            color            : black;
        }
        .home_box_inner, .home_box .cookie_ico {
            display          : none;
        }
        #home_image_flex_single {
            display          : block;
            text-align       : center;
            margin-top       : 10px;
        }
        #info_sidebar {
            display          : none;
        }
        #info_main {
        	margin-right	 : 10px;
        	padding-right	 : 0px;
        }

        .example_box.flex_row {
            flex-direction   : column;
        }
    }
    @media all and (max-width: 468px) {
		#pw_add div, #pw_add div table, #pw_add div table img {
			width 			 : 300px !important;
		}
		#pw_add div table img {
			height 			 : 38px !important;
		}
    }
    @media all and (max-height: 400px) {
        #right_column .home_box {
            margin-top       : 0px;
            max-width        : inherit;
        }
    }


@media (prefers-color-scheme: dark) {
    body {
        background: black;
    }
    .mbbl {
       background      : linear-gradient(to bottom,rgb(214, 214, 249) 0px,rgb(214, 214, 249) 33px, rgba(214, 214, 249,0));
    }
    #info_main {
        background: rgba(255,255,255,0.5);
        padding: 1em;
        border-radius: 1em;
    }
}