/* ****************************************** */
/* GENERAL TAGS                               */
/* ****************************************** */

    :root {
        --core-red                          : #660000;
        --main-near-black                   : #330000;
        --main-dark-color                   : #660000;
        --main-mid-color                    : #993333;
        --main-light-color                  : #FFFFFF;
        --main-light-color-dimmed           : #FFCCCC;
        --main-text-color                   : black;
        --main-text-dark                    : #662222;
        --main-darken                       : rgba(0,0,0,0.2);
        --main-darken-heavy                 : rgba(0,0,0,0.4);
        
        --main-title-decoration             : url('http://www.grophland.com/images/title_band.GIF');
        
        --main-msg-back                     : #FFE6C4;
        --main-msg-border                   : #000000;
        --main-msg-text                     : var(--main-text-color);
        
        --main-panel-back                   : #FFEEDD;
        --main-panel-border                 : #330000;
        --main-main-panel-text              : var(--main-text-color);
        --main-panel-light                  : white;
        --main-panel-alt-back               : #A6D4EC; /* lookup page boxes */
        --main-panel-alt-border             : #457E9B;
        --main-panel-title-text             : white;
        
        --main-info-panel-back              : #BBE;
        --main-info-panel-border            : #999;
        --main-info-panel-text              : var(--main-text-color);
        
        --main-vdark-grey                   : #333333;
        --main-dark-grey                    : #666666;
        --main-mid-grey                     : #999999;
        --main-pale-grey                    : #bbbbbb;
        --main-light-grey                   : #dddddd;
        --main-vlight-grey                  : #ededed;
        
        --main-hilighted-positive           : #AFA; /* e.g. selected rows, positive buttons */
        --main-hilighted-negative           : #FF9999; /* e,g. locked threads, warning buttons */
        --main-hilighted-attention          : darkorange; /* e.g. alerts, current table row */
        --main-hilighted-inactive           : var(--main-pale-grey);
        --main-hilighted-positive-hover     : #9D9;
        --main-hilighted-negative-hover     : #D99;
        --main-hilighted-attention-hover    : orange;
        --main-hilighted-glow               : #FF9;
        --main-hilighted-positive-text      : var(--main-text-color); 
        --main-hilighted-negative-text      : var(--main-text-color); 
        --main-hilighted-attention-text     : var(--main-text-color);
        --main-hilighted-inactive-text      : var(--main-text-color);
        
        --form-field-hilight                : #EEEEFF;
        --form-field-back                   : var(--main-light-color);
        --form-field-text                   : var(--main-text-color);
        --form-field-border                 : var(--main-dark-color);
        
        --main-button-back                  : var(--main-vlight-grey);
        --main-button-shadow                : var(--main-pale-grey);
        --main-button-text-shadow           : var(--main-light-grey);
        --main-button-glow                  : white;
        --main-button-border                : black;
        --main-button-text                  : black;
        --main-button-disabled              : var(--main-dark-grey);
        
        --error-background                  : #FF3333;
        --warning-background                : #FFFF33;
        --link-visited                      : #CCCCFF;
        
        --item-background                   : white;
        --item-box-back                     : var(--item-background);
        --item-box-border                   : #444;
        --item-name-back                    : #AAA;
        --item-name-text                    : white;
        
        --user-list-table-back              : var(--main-dark-color);
        --user-list-table-row               : var(--main-light-color);
        --user-list-table-odd               : var(--user-list-table-row);
        --user-list-table-text              : var(--main-text-color);

        --groph-health-bar                  : var(--main-hilighted-positive);
    }

    @font-face {
        font-family: 'ZethacMedium';
        src: url('/fonts/zethac-webfont.eot');
        src: url('/fonts/zethac-webfont.eot?#iefix') format('eot'),
             url('/fonts/zethac-webfont.woff') format('woff'),
             url('/fonts/zethac-webfont.ttf') format('truetype'),
             url('/fonts/zethac-webfont.svg#webfontYS1qVsXh') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    .zethac {
        font-family: 'ZethacMedium';
    }

    .curved, .msg.curved {
        border-radius                       : 10px;
    }

    .curved_left, .msg.curved_left {
        border-top-left-radius              : 10px;
        border-bottom-left-radius           : 10px;
    }

    .curved_top, .msg.curved_top {
        border-top-left-radius              : 10px;
        border-top-right-radius             : 10px;
    }

   .darker {
        background                          : rgba(0,0,0,0.2);
   }
   .darker.heavy {
        background                          : rgba(0,0,0,0.4);
   }

    .shadow {
        box-shadow                          : 6px 6px 5px rgba(0,0,0,0.6);
        -webkit-box-shadow                  : 6px 6px 5px rgba(0,0,0,0.6);
    }
    .ie8 .shadow, .ie7 .shadow {
        filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=6, OffY=6, Color='#999', Positive='true')
    }

    .glow {
      box-shadow                          : 0px 0px 5px var(--main-hilighted-glow);
    }
    
    .appear, .flash, .hidden {
        display: none;
    }

    .centered {
       text-align: center;
    }

    .vspaced, .msg.vspaced, .panel .vspaced {
      margin-top: 1em;
      margin-bottom: 1em;
    }

    .selected {
       background: var(--main-hilighted-positive) !important;
    }
    .hilighted {
       background: var(--main-hilighted-attention) !important;
    }
    .larger {
       font-size: 120%;
    }
    
    .aria-hidden {
        position: absolute;
        height: 1px;
        width: 1px;
        overflow: hidden;
        top: 0px;
        left: -5000px;
    }
    
    .pre_n {
         max-height:400px;
         width: calc(100vw - 35px);
         box-sizing:border-box;
         overflow:scroll;
         background:white;
         color:black;
         text-align: left;
         max-width: 100%;
    }
    
    .overlay_box {
         --bottom: 8px;
         --right: 8px;
         font-weight:bold;
         font-size:20px;
         position:absolute;
         bottom: var(--bottom);
         right: var(--right);
         background:rgba(255,255,255,0.8);
         border-radius:5px;padding:5px;
         border:2px solid rgba(0,0,0,0.5);
         color: black;
     }

/* ****************************************** */
/* MAIN LAYOUT                                */
/* ****************************************** */

    body {
        font-family     : Arial, Verdana, sans-serif;
        background      : var(--main-light-color);
        margin          : 0px;
        color           : var(--main-text-color);
        min-height      : 100vh;
    }

    #body_decorative {
        display         : flex;
        flex-direction  : column;
        min-height      : 100vh;
    }

    .main_body {
        position        : relative;
        flex-grow       : 1;
     }

	 .main_body a[href ^='http']:not([href *='grophland.com']) {
   		padding-right   : 18px;
   		background      : transparent url('/images/icons/external.gif') no-repeat center right;
     }


    #tod_holder {
        position            : absolute;
        right               : 8px;
        top                 : 63px;
        width               : 100px;
        z-index             : 110;
    }
    #tod_tab {
        background          : #000000;
        background-image    : url('/images/icons/3_arrow_down_white.gif');
        background-position : center center;
        background-repeat   : no-repeat;
        cursor              : pointer;
        height              : 7px;
        border-bottom-left-radius              : 5px;
        border-bottom-right-radius             : 5px;
    }
    #tod {
        background          : white;
        color               : black;
        text-align          : center;
        border              : 2px solid var(--main-near-black );
        border-top          : none;
        padding             : 4px;
        display             : none;
    }

    #tod p.period {
        font-weight         : bold;
        margin              : 0px;
    }

    #tod p.date, #tod p.calendar, #tod p.calendar a {
        font-weight         : normal;
        font-style          : italic;
        font-size           : 9px;
        color               : var(--main-mid-color);
        margin              : 0px;
    }

    .subhead th, .subhead .role_th, .subhead > div {
        background      : var(--main-darken-heavy);
        color           : var(--main-light-color-dimmed);
        font-size       : 80%;
        text-align      : left;
        font-weight		: bold;
    }

    form {
        margin          : 0px;
    }

    th, .role_th {
        background      : var(--main-dark-color);
        color           : var(--main-light-color-dimmed);
        font-size       : 90%;
        font-weight		: bold;
    }

    th a, th a:visited, .role_th a, .role_th a:visited, .subhead > div a, .subhead > div a:visited {
        color           : var(--link-visited);
    }

     td > img:first-child, .role_td > img:first-child {
        display         : block;
     }

     a img {
        text-decoration : none !important;
     }

     .note {
        color                 : var(--main-dark-grey);
        font-style            : italic;
     }

    .character {
        text-align            : center;
        position              : relative;
    }

    .pill {
        text-decoration       : none;
        background-color      : var(--main-mid-grey);
        display               : inline-block;
        border-radius         : 3px;
        padding               : 2px 4px;
        color                 : white;
        font-weight           : bold;
    }
    .pill.action {
        cursor                : pointer;
        background-color      : var(--main-near-black);
    }

    .groph_box, .groph_info_box {
        border                : 2px solid #222;
        margin                : auto;
    }

    .groph_busy {
    	display				  : none;
    	position			  : absolute;
    	background			  : rgb(198, 237, 255);
    	border-radius		  : 4px;
    	text-align			  : center;
    	color				  : black;
    }
    .groph_box_300 .groph_busy {
    	display				  : block;
    	bottom				  : 10px;
    	left				  : 10px;
    	min-width		      : 150px;
    	font-weight			  : bold;
    	font-size             : 25px;
    	text-decoration		  : none;
    	height				  : 35px;
		padding				  : 0px 10px;
		box-shadow			  : 3px 3px 3px rgba(0,0,0,0.7);
    }

    .groph_box_150 .groph_busy {
    	display				  : block;
    	bottom				  : 5px;
    	left				  : 3px;
    	font-size             : 13px;
		padding				  : 0px 7px;
    	min-width		      : 80px;
    	height				  : 17px;
    }

    .groph .groph_name, .groph_name.damaged {
    	margin-bottom		  : 5px;
      padding: 3px 2px;
    }
    .groph_name_300 {
       width: 300px;
    }
    
    .groph .groph_owner_name {
    	font-weight			  : bold;
    	margin-top			  : 10px;
    }
    .groph .groph_owner_name a {
    	/*color				  : #000066;*/
    	text-decoration		  : none;
    }
    .groph .groph_owner_name.small a {
    	font-size			  : 11px;
    }
    
    .groph .groph_stud_fee {
    	margin-top			  : 10px;
    	font-size			  : 85%;
    	color				  : #333333;
    }

    .post_groph_box {
      border            : 2px solid #999;
      background        : white;
      width             : 300px;
      text-align        : center;
      margin-bottom     : 4px;
      border-radius     : 4px;
      max-width         : 100%;
    }
    .post_groph_box .post_groph_name {
      display           : block;
      background        : #ccc;
      color             : black;
      font-weight       : bold;
      padding           : 1px;
    }
	 @media screen and (min-width: 400px) {
      .post_groph_box {
         margin-left       : 20px;
      }
    }

    .activities, own {
        font-style      : italic;
        background      : #FFF963;
        border-radius   : 8px;
        padding         : 5px;
        color           : #444;
        display         : block;
    }

    .hide_toggle.closed{
        background-image    : url('/images/icons/14_arrow_right_black.gif');
        background-position : 0px 2px;
        background-repeat   : no-repeat;
        padding-left        : 16px !important;
        cursor              : pointer;
    }

    .hide_toggle {
        background-image    : url('/images/icons/14_arrow_down_black.gif');
        background-position : 0px 2px;
        background-repeat   : no-repeat;
        padding-left        : 16px !important;
        cursor              : n-resize;
    }

    .hide_toggle_plain {
        cursor              : pointer;
    }

    .hide_toggle.title_link {
        background          : none;
        padding-left        : 4px !important;
    }
    
    ul.row {
        --divider           : '|';
        list-style-type     : none;
        margin              : 0px;
    }
    ul.row li {
        display             : inline;
    }
    ul.row li + li:before {
        content             : var(--divider);
        padding             : 0px 0.5em;
    }

/* ****************************************** */
/* PAGE TITLES                                */
/* ****************************************** */


     .page_title {
        text-align      : center;
        color           : var(--main-text-color);
     }

     h1.page_title {
        margin-bottom   : 6px;
     }

     .page_title a {
        color           : #550000;
     }

     p.page_title {
        margin-top      : 0px;
     }

     .title_band {
        background      : var(--core-red);
    	background-position: center center;
    	background-repeat: repeat-y;
        color           : var(--main-light-color);
        font-size       : 20px;
        font-weight     : bold;
        text-align      : center;
        padding         : 8px;
        border          : 1px solid var(--main-near-black );
        border-bottom   : 2px solid var(--main-near-black );
        margin-top      : 0px;
        margin-bottom   : 10px;
        position        : relative;
     }

     .title_band h1, .title_band h2, .title_band h3 {
        padding         : 0px;
        margin          : 0px 0px 5px 0px;
        font-family     : 'IM Fell Great Primer', arial, serif;
        font-size       : 20px;
     }

     h1.title_band, h2.title_band {
        font-family     : 'IM Fell Great Primer', arial, serif;
     }

     .title_band p {
        padding         : 0px;
        font-size       : 15px;
        margin          : 0px 0px 0px 0px;
     }

     .title_band a {
        color           : var(--main-light-color);
     }

     .title_band_sub {
        position        : absolute;
        bottom          : -10px;
        left            : 10px;
        background      : black;
        padding         : 3px 5px;
        border-radius   : 5px;
        color           : white;
        font-size       : 12px;
        z-index         : 10;
     }
     .title_band_sub.right {
        right           : 10px;
        left            : inherit;
     }

     .title_band_sub ul {
        margin          : 0px;
        padding         : 0px;
        display         : inline-block;
     }
     .title_band_sub ul + ul {
        margin-left     : 20px;
     }

     .title_band_sub li {
        display         : inline;
        list-style-type : none;
        margin          : 0px 2px 0px 2px;
        padding         : 0px;
     }
     .title_band_sub li.sep::before {
        content         : "- ";
     }

     .title_band_sub a {
        text-decoration : none;
        color           : var(--main-light-color) !important;
     }

     div.title_band > a, .title_band p a, .title_band form a {
        font-size       : 15px;
     }

     th > *:first-child, td > *:first-child {
        margin-top      : 0px;
     }

     th > *:last-child, td > *:last-child {
        margin-bottom   : 0px;
     }

/* ****************************************** */
/* TOOLTIPS                                   */
/* ****************************************** */


    #tooltip {
        position        : absolute;
        border          : 1px solid #ccc;
        background      : #333;
        padding         : 5px;
        display         : none;
        color           : #fff !important;
        width           : 200px;
        border-radius   : 6px;
        z-index         : 800;
    }

    .tooltip {
        border          : 1px solid #ccc;
        background      : #333;
        padding         : 5px;
        color           : #fff !important;
        width           : 200px;
        border-radius   : 6px;
    }

    #tooltip h4, .tooltip h4 {
        margin-top      : 0px;
        margin-bottom   : 5px;
        color           : #fff !important;
    }

    #tooltip p, .tooltip p {
        font-size       : 85%;
        color           : #fff !important;
    }

    #tooltip p.description, .tooltip p.description {
        margin-bottom   : 3px;
        font-style      : italic;
        color           : #fff !important;
    }

    #tooltip p.price, .tooltip p.price {
        margin-bottom   : 1px;
        font-style      : italic;
        text-align      : right;
        color           : #fff !important;
        font-size       : 90%;
    }

    #tooltip p.price.smaller, .tooltip p.price.smaller { font-size: 0.7rem; }

    #tooltip p.activities {
        background      : #444 !important;
    }

    #tooltip .stat {
    	  position		   : absolute;
    	  bottom			   : 4px;
     	  left			   : 4px;
        font-size       : 85%;
        color           : #fff !important;
        font-style      : italic;
    }

    #tooltip.map {
        background      : var(--main-light-color-dimmed);
        color           : black;
        border          : 2px solid var(--main-dark-color);
        padding         : 0px;
    }
    #tooltip.map h4 {
        background      : var(--main-dark-color);
        padding         : 5px
    }
    #tooltip.map p {
        color           : black !important;
        margin          : 5px;
    }


/* ****************************************** */
/* SIZE RELATED ITEMS                         */
/* ****************************************** */

    @media all and (max-width: 1250px) {
        .chat_open .small_hide {
            display          : none;
        }
    }

    @media all and (max-width: 1050px) {
        .small_hide {
            display          : none;
        }
        .chat_open .vsmall_hide {
            display          : none;
        }
    }

    @media all and (max-width: 900px) {
        .vsmall_hide {
            display          : none;
        }
    }

    @media screen and (max-device-width: 768px) {
    	.small_hide, .vsmall_hide {
    		display: none;
    	}
     
       .no-float-if-small {
          position: relative !important;
          float: none !important;
          margin: auto !important;
       }
    }

/* ****************************************** */
/* FRIEND NOTIFICATION                        */
/* ****************************************** */

     #notification {
        position              : fixed;
        bottom                : 4px;
        left                  : 4px;
        z-index               : 999;
     }

     #notification .msg {
        padding               : 4px;
        font-size             : 80%;
        border                : 1px solid;
        width                 : 300px;
        margin                : 5px 0px 0px 0px;
        opacity               : 0.95;
        border-radius         : 7px;
     }

     #notification .motd_news {
        -webkit-box-shadow    : 0px 0px 10px rgba(240, 240, 180, 0.75);
        box-shadow            : 0px 0px 10px rgba(240, 240, 180, 0.75);
     }


/* ****************************************** */
/* HOME PAGE MAPS AND TOOLBAR                 */
/* ****************************************** */

     .toolbar {
        position        : relative;
        display         : flex;
        flex-flow       : row wrap;
    }
    
     .toolbar.plain {
        background      : none;
        border          : none;
        margin-top      : none;
     }

     .main_map, .xmain_map {
        text-align      : center;
        margin-top      : 4px;
        position        : relative;
        margin-left     : auto;
        margin-right    : auto;
     }
     .main_map img, .xmain_map img {
        display         : block;
        margin-left     : auto;
        margin-right    : auto;
        outline         : none;
        max-width       : 100%;
     }
	 .xmain_map, .main_map{
		max-width		: 100%;
		height			: auto;
	 }
	 .xmain_map img[usemap], .main_map img[usemap] {
		max-width		: 100%;
		height			: auto;
	 }
	 .wurld_map:first-child {
	    margin-top      : -10px;
	 }

    .xwurld_map, .wurld_map {
      background        : radial-gradient(circle at 250px 314px, rgb(81, 198, 255) 0%, rgba(255, 255, 255, 0.15) 55%, transparent 60%);
    }

     area {
        outline         : none;
     }
     .logo {
        color           : var(--main-light-color-dimmed);
     }

     .main_body {
        padding         : 8px;
        background-image: url('http://www.grophland.com/images/layout/background.gif');
    	background-position: right top;
    	background-repeat: no-repeat;
    	/*padding-bottom  : 400px;*/
    	min-height  : 555px;
     }

     .flat_table {
        border-collapse : collapse;
     }

     .flat_table.noback > tbody > tr > td {
        border          : 1px solid var(--main-near-black );
        background      : white;
        color           : black;
     }

     .flat_row th, .flat_row td {
        border          : 1px solid var(--main-near-black );
     }

     .main_footer {
        color           : var(--main-text-dark);
        text-align      : center;
        padding         : 45px 4px 4px 4px;
        font-size       : 11px;
     }

     .main_footer a {
        color           : #662222;
     }

     #footer_button_table {
     	max-width		: 468px;
     	margin			: auto;
     }

     #footer_button_table .footer_button {
     	display			: inline-block;
     	margin			: 4px;
     }

     .main_footer #pw_add {
     	max-width	    : 468px;
     }

     .main_footer #pw_add div {
     	margin			: auto;
     }

     .main_footer #google_add {
     	width			: 468px;
     	height			: 60px;
     	margin-top		: 3px;
     }

    @media all and (min-width: 468px) {
		#pw_add div {
     		height			: 78px;
		}
    }
    @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;
		}
    }

     .main_tools {
        background      : var(--main-dark-color);
        color           : var(--main-light-color);
        font-size       : 20px;
        font-weight     : bold;
        padding         : 8px;
     }

     .main_tools table {
        color           : var(--main-light-color);
        font-size       : 20px;
        font-weight     : bold;
     }

     .exp_row {
        background      : var(--main-mid-color);
        color           : var(--main-light-color);
        padding         : 3px 8px 4px 8px;
        border-bottom   : 2px solid rgba(0,0,0,0.3);
        max-width       : 100%;
        overflow        : hidden;
     }

     .exp_td {
        font-size       : 13px;
        font-weight     : bold;
        color           : var(--main-light-color-dimmed);
        overflow-x      : hidden;
        white-space     : nowrap;
     }

     .exp_td a {
        color           : var(--main-light-color-dimmed);
     }

     .exp_row_alt {
        background      : var(--main-mid-color);
        color           : var(--main-light-color);
        padding         : 3px 8px 4px 8px;
        border-bottom   : 2px solid rgba(0,0,0,0.3);
     }

     .exp_td_alt {
        font-size       : 13px;
        font-weight     : bold;
        color           : var(--main-light-color-dimmed);
        overflow-x      : hidden;
        white-space     : nowrap;
     }

     .exp_td_alt a {
        color           : var(--main-light-color-dimmed);
     }

     .grped_row {
        background      : #5870cC;
        color           : var(--main-light-color);
        padding         : 2px 8px 4px 8px;
        border-bottom   : 2px solid #000033;
     }

     .grped_td {
        font-size       : 90%;
        font-style      : italic;
        color           : var(--main-light-color);
     }

     .grped_td a {
        color           : var(--main-light-color);
     }

     .main_tools a {
        color           : var(--main-light-color);
        text-decoration : none;
     }

     .main_tools a:hover {
        color           : var(--main-light-color-dimmed);
     }

	.item_box {
		border			        : 1px solid var(--item-box-border);
        background-color        : var(--item-box-back);
	}
    .item_name {
        box-sizing      : border-box;
        width           : 150px;
        height          : 24px;
        margin-top      : 0px;
        margin-left     : auto;
        margin-right    : auto;
        padding         : 5px 2px 2px 2px;
        background      : var(--item-name-back);
        color           : var(--item-name-text);
        border-bottom-left-radius              : 5px;
        border-bottom-right-radius             : 5px;
        overflow        : hidden;
        white-space     : nowrap;
        font-size       : 11px;
    }
    .item_name_long, .breed_div p.item_name_long, .panel p.item_name_long {
        font-size       : 9px;
        padding         : 2px 2px 5px 2px;
        white-space     : normal;
    }
    .item_name a {
        color           : var(--item-name-text);
        text-decoration : none;
    }
    
    .inline_item_name {
        margin-top      : 10px;
    }


/* ****************************************** */
/* LOGIN PAGE                                 */
/* ****************************************** */

     .display_table {
        background-color: var(--main-panel-light);
     }

     .display_table th, .login_box_inner th {
        background      : var(--main-dark-color);
        color           : #FFFFF9;
        border-bottom   : 2px solid #999993;
        font-size       : 120%;
        margin-bottom   : 5px;
     }

     .display_table.login_box {
        background      : var(--main-panel-back);
     }

     .display_table.login_box.solid {
        border          : 1px solid var(--main-dark-color);
     }

    .tip_box {
        margin-left     : 20px;
        margin-right    : 10px;
        margin-bottom   : 20px;
        width           : 250px;
        border          : 2px solid var(--main-dark-color);
        background      : #FFEEEE;
        padding         : 10px;
    }

    .tip_box h3 {
        padding         : 0px;
        margin-left     : 0px;
        margin-right    : 0px;
        margin-bottom   : 5px;
        margin-top      : 0px;
    }

    .tip_box p {
        padding         : 0px;
        margin-left     : 0px;
        margin-right    : 0px;
        margin-bottom   : 5px;
        margin-top      : 0px;
    }

/* ****************************************** */
/* LIST USERS                                 */
/* ****************************************** */

     .user_list_table {
        padding         : 0px;
        background      : var(--user-list-table-back);
        border          : 2px solid var(--user-list-table-back);
        color           : var(--user-list-table-text);
     }
     .user_list_table table tr {
        background      : var(--user-list-table-row);
     }
     /* .user_list_table tr:nth-child(odd), */
     .user_list_table table tr:nth-child(odd) {
        background      : var(--user-list-table-odd);
     }

/* ****************************************** */
/* CONTAINERS                                 */
/* ****************************************** */

     a.remove_x {
        font-weight     : bold;
        color           : black;
        text-decoration : none;
     }

/* ****************************************** */
/* MESSAGE BOX STYLES                         */
/* ****************************************** */

     .msg {
        margin-left     : 17%;
        margin-right    : 17%;
        border          : 2px solid var(--main-msg-border);
        background      : var(--main-msg-back);
        text-align      : center;
        margin-top      : 5px;
        margin-bottom   : 5px;
        padding         : 6px 6px 8px 6px;
        color           : var(--main-msg-text);
        box-sizing		: border-box;
     }
     .panel.msg_width {
        margin-left     : 17%;
        margin-right    : 17%;
        width           : 66%;
     }

     .msg.pop_up_notification {
        position            : absolute;
        top                 : 100px;
        left                : 50%;
        margin-left         : -200px;
        width               : 400px;
        border              : 4px solid #010;
        padding             : 15px;
        z-index             : 2000;
        box-shadow          : 0px 0px 9px #FF9;
        box-sizing          : content-box;
     }
     .panel.pop_up_notification {
         z-index            : 2000;
         position           : relative;
         border             : 4px solid #010;
         box-shadow         : 0px 0px 9px #FF9;
         box-sizing         : content-box;
     }
     .chat_open .msg.pop_up_notification {
        /*margin-left         : -305px;*/
        left                : calc((100vw - 205px) * 0.5);
     }
     html.mobile .chat_open .msg.pop_up_notification, html.ipad .chat_open .msg.pop_up_notification {
        margin-left         : -200px;
     }
     .msg.pop_up_notification .close {
        height              : 25px;
        width               : 25px;
        position            : absolute;
        top                 : -13px;
        right               : -13px;
        cursor              : pointer;
        background-image    : url("/images/icons/black_close.25.png");
     }
     .msg.pop_up_notification .close a {
        display             : block;
        height              : 25px;
        width               : 25px;
     }
     #popiupholder.msg.pop_up_notification.pop_up_full {
        box-sizing          : border-box;
        left                : 50px;
        width               : calc(100% - 100px);
        max-width           : 100%;
        margin              : 0px;
     }
     
     .msg.fixed {
        position            : fixed;
        top                 : 20px;
        width               : 66vw;
        left                : 15vw;
        margin              : 0px;
     }
     .chat_open .msg.pop_up_notification.fixed,  html.mobile .chat_open .msg.pop_up_notification.fixed, html.ipad .chat_open .msg.pop_up_notification.fixed {
        width : calc((100vw - 200px) *0.66);
        left: calc((100vw - 200px) * 0.15);
        margin-left         : 0px;
     }

     .msg > h1, .msg > h2, .msg > form, .msg > input,
     .msg_body h1, .msg_body h2, .msg_body form, .msg_body input,
     .msg_top h1, .msg_top h2, .msg_top form, .msg_top input {
        margin          : 5px;
     }
     .msg > p {
        margin-left: 5px;
        margin-right: 5px;
     }

     .msg h3, .msg_body h3, .msg_top h3 {
        margin          : 3px;
     }

     .centered {
        text-align      : center;
     }

     .left {
        text-align      : left;
     }


     .red {
        background      : var(--error-background);
     }

     .error, .msg.error {
        background      : var(--error-background);
        text-align      : left;
        padding-left    : 10px;
        border-left     : 7px solid black;
     }

     .warning {
        background      : var(--warning-background);
        text-align      : left;
        padding-left    : 10px;
        border-left     : 7px solid black;
     }

     .blank {
        background      : transparent !important;
        border          : none !important;
        box-shadow      : none !important;
     }

     .wider {
        margin-left     : 10%;
        margin-right    : 10%;
     }
     
     .msg.speech, .msg.speech_right, .msg.speech_left {
        position            : relative;
        margin-bottom       : 25px;
     }

     .bubble, .speech:after {
        margin-left         : 17%;
        background          : url('../images/icons/tail.png');
        background-repeat   : no-repeat;
        margin-top          : -7px;
        width               : 60px;
        height              : 25px;
        background-position : 20px top;
     }

     .bubble_right, .speech_right:after {
        margin-left         : 17%;
        margin-right        : 19%;
        background          : url('../images/icons/tail_right.png');
        background-repeat   : no-repeat;
        margin-top          : -7px;
        width               : 60px;
        height              : 25px;
        background-position : right top;
     }

     .bubble_left, .speech_left:after {
        margin-left         : 17%;
        background          : url('../images/icons/tail_right.png');
        background-repeat   : no-repeat;
        margin-top          : -7px;
        width               : 60px;
        height              : 25px;
        background-position : 20px top;
     }
     
     .speech:after, .speech_right:after, .speech_left:after {
        position            : absolute;
        display             : block;
        content             : '';
        bottom              : -25px;
        margin-left         : auto;
     }
     
     .speech_right:after {
        right               : 26px;
     }

/* ********************************************************** */
/* BREED DIV (MAIN LAYOUT BOX)                                */
/* ********************************************************** */

     .breed_div, .panel {
        margin-left         : auto;
        margin-right        : auto;
        margin-top          : 20px;
        padding             : 10px;
        width               : 90%;
        border              : 1px solid var(--main-panel-border);
        background          : var(--main-panel-back);
        box-sizing		    : border-box;
        color               : var(--main-main-panel-text);
     }
     table.panel, table.breed_div {
        padding             : 0px;
     }

     .breed_div.shadow, .panel.shadow {
        margin-bottom       : 10px;
     }
     .breed_div.separated, .panel.separated, .user_list_table.separated {
        margin-bottom       : 20px;
     }
     .breed_div.stacked, .panel.stacked {
        margin-bottom       : 0px;
        margin-top          : 0px;
     }
     .breed_div.stacked + .breed_div.stacked, .panel.stacked + .panel.stacked {
        border-top-width    : 0px;
     }
     .breed_div.callout, .panel.callout {
        box-shadow          : 0px 0px 9px rgba(255,255,255,0.4),
                              0px 0px 100vw rgba(255,255,255,0.6) inset;
     }
     .breed_div.callout.solid, .panel.callout.solid {
        border-width        : 2px;
     }
     .breed_div .callout, .panel .callout {
        padding             : 5px;
        background-color    : rgba(255,255,255,0.4);
        box-shadow          : 0px 0px 9px rgba(255,255,255,0.4);
     }
     table.solid {
        border              : 2px solid black;
     }

     .breed_div h1, .panel h1 {
        margin-top          : 0px;
        margin-bottom       : 9px;
        padding             : 0px;
     }

     .breed_div h2, .panel h2 {
        margin-top          : 0px;
        margin-bottom       : 6px;
        padding             : 0px;
     }

     .breed_div h3, .panel h3 {
        margin-top          : 0px;
        margin-bottom       : 3px;
        padding             : 0px;
     }
     .breed_div.padded_para h3, .breed_div.spaced h3, .panel.padded_para h3, .panel.spaced h3 {
        margin-bottom       : 10px;
     }

     .breed_div form, .breed_div input:not(.button) {
        margin-top          : 0px;
        margin-bottom       : 0px;
        padding             : 0px;
     }
     .breed_div input[type=text] {
        padding             : 2px;
     }
     .breed_div input[type=submit], .breed_div button, .breed_div .button.small {
        padding             : 0px 1em;
     }

     .breed_div p, .panel p {
        margin-top          : 0px;
        margin-bottom       : 3px;
        font-size           : 85%;
     }

     .breed_div.padded_para p, .breed_div.spaced p, .panel.spaced p, .panel.padded_para p {
        margin-top          : 0px;
        margin-bottom       : 8px;
     }

     .breed_div p:last-child, .spaced p:last-child {
        margin-bottom       : 0px;
     }

     .breed_div hr, .panel hr {
        border-top          : 1px solid var(--main-panel-border);
        border-bottom       : none;
        margin              : 1em -10px;
     }

     .breed_row {
        border              : 2px solid var(--main-near-black);
        margin-top          : 3px;
        background          : var(--main-panel-back);
     }

     .breed_div_blank {
        margin-left         : auto;
        margin-right        : auto;
        margin-top          : 20px;
        width               : 90%;
        padding             : 10px;
     }

     .page_section h2, .page_section h3 {
        margin              : 0px;
     }

     span.grp_search {
        background-image    : url('/images/icons/search.gif');
        background-position : 2px 3px;
        background-repeat   : no-repeat;
        padding             : 1px 4px 1px 15px;
        display             : inline;
        background-color    : var(--main-darken);
     }

     .info-panel, .panel.info-panel {
        background          : var(--main-info-panel-back);
        border              : 2px solid var(--main-info-panel-border);
        color               : var(--main-info-panel-text);
     }

     .title_band + .info-panel.tight {
        margin-top          : -10px;
     }
     
     .panel.light {
        background          : var(--main-panel-light);
     }
     
     .panel.alt {
        background          : var(--main-panel-alt-back);
        border-color        : var(--main-panel-alt-border);
     }
     
     /* titles attached to the top of panels, like on news */
     .panel-title {
        background          : var(--main-panel-border);
        color               : var(--main-panel-title-text);
        margin-bottom       : 0px;
        margin-left         : auto;
        margin-right        : auto;
        width               : 90%;
        padding             : 7px 12px;
        box-sizing          : border-box;
     }
     .panel-title.alt {
        background          : var(--main-panel-alt-border);
        color               : var(--main-panel-title-text);
     }
     .panel-title + .panel {
        margin-top          : 0px;
     }
     
     /* modifiers for both panels and panel-title */
     .full-width {
        width               : 100%;
     }
     .solid {
        border-style        : solid;
     }
     .panel.narrow, .breed_div.narrow, .panel-title.narrow {
        max-width           : 550px;
     }
     .panel.blank {
        padding: 0px;
        border: none;
        background: none;
     }

     .hscroller {
        width: 100%;
        overflow-x: auto;
     }

/* ****************************************** */
/* FORMS                                      */
/* ****************************************** */

     textarea:focus {
         background         : var(--form-field-hilight);
     }

     input.money {
        width               : 6em;
        margin-right        : 2px;
        text-align          : right;
     }

     input[readonly] {
        background          : var(--main-hilighted-inactive);
        border              : 1px solid var(--main-vdark-grey);
        padding             : 4px;
     }

     .button {
        box-shadow          : inset 0px 1px 0px 0px var(--main-button-glow);
        border              : 1px solid var(--main-button-border);
        background          : var(--main-button-back);
        background          : linear-gradient(var(--main-button-back) 95%, var(--main-button-shadow) 100% );
        padding             : 3px 12px 3px 12px;
        text-decoration     : none;
        font-size           : 12px;
        font-weight         : bold;
        font-family         : Arial, sans-serif;
        line-height         : 18px;
        color               : var(--main-button-text);
        cursor              : pointer;
	     text-shadow         : 1px 1px 0px var(--main-button-text-shadow);
	     white-space         : nowrap;
	     display             : inline-block;
	     -webkit-appearance  : none;
	     -moz-appearance     : none;
	     appearance          : none;
     }

     /*.gecko input.button, .gecko button.button {
        padding         : 2px 12px 1px 12px;
     }*/

     a.button, span.button {
        color               : var(--main-button-text);
     }

     .button:hover {
        background          : linear-gradient(var(--main-button-shadow) 0%, var(--main-button-back) 100% );
        -webkit-box-shadow  : inset 1px 1px 0px 0px var(--main-button-shadow);
        box-shadow          : inset 1px 1px 0px 0px var(--main-button-shadow);
        text-shadow         : 1px 1px 0px var(--main-button-shadow);
     }

     .button.disabled, .button[disabled], .button.disabled:hover,  .button[disabled]:hover {
        border              : 1px solid var(--main-button-disabled);
        color               : var(--main-button-disabled);
     }

     a.button:visited {
        color               : var(--main-button-text);
     }

     .g_button {
        --main-button-back  : var(--main-hilighted-positive);
        color               : var(--main-hilighted-positive-text);
     }
     .g_button:hover {
        background          : var(--main-hilighted-positive-hover);
     }

     .r_button {
        --main-button-back  : var(--main-hilighted-negative);
        color               : var(--main-hilighted-negative-text);
     }
     .r_button:hover {
        background          : var(--main-hilighted-negative-hover);
     }
     
     .button.large {
        padding             : 6px 20px 6px 20px;
        font-size           : 16px;
     }

     .button.small {
        padding             : 1px 5px;
     }

     .button.light {
        border-width        : 0.5px;
        font-weight         : normal;
     }

     .button.linked {
        border-right-style  : dotted; 
     }
     .button.linked + .button {
        border-left         : none;
     }
     
     #popupcontent {
         text-align		    : left;
         overflow-x         : auto;
     }   
     #popupmask {   
         position           : fixed;
         width              : 100%;
         height             : 100%;
         background         : rgba(0,0,0,0.6);
         top                : 0px;
         left               : 0px;
         z-index            : 1999;
     }

     .fade {
        animation: fade 5s linear 5s forwards;
     }
     @keyframes fade {
        from { opacity: 1 }
        to   { opacity: 0 }
     }


/* ****************************************** */
/* GRIDS                                      */
/* ****************************************** */

      .layout_grid .layout_grid_cell {
         display         : inline-block;
      }
     
      /* FLEX */

      .flex_grid {
         display         : flex;
         flex-wrap       : wrap;
         flex-direction  : row;
      }
      .flex_grid .layout_grid_cell {
         margin          : 5px;
      }
      .flex_grid.flex_grid_items .layout_grid_cell {
         width           : 70px;
         text-align      : center;
         margin          : 5px 0px;
         cursor          : action;
      }

      .flex_center {
         align-items           : center;
         justify-content       : center;
      }
      
      .flex_row {
         --gap           : 5px;
         display         : flex;
         flex-direction  : row;
         align-items     : center;
         gap             : var(--gap);
      }

      .flex_top {
         align-items     : flex-start;
      }

      @media screen and (max-width: 600px) {
         .flex_col_when_small {
            flex-direction  : column;
         }
         .flex_top {
            align-items     : center;
         }
      }
      

      /* GRID */

      .two_column_grid {
         --small-col           : 200px;
         --gap                 : 10px;
         --small-col-mobile    : 50px;
         display               : grid;
         grid-template-columns : var(--small-col) 1fr;
         grid-gap              : var(--gap);
         margin-left           : auto;
         margin-right          : auto;
      }
      .mobile_image_grid > *:nth-child(odd) a {
         height: 100%;
         display: flex;
         align-items: center;
         width: 100%;
         justify-content: center;
      }
      @media screen and (max-width: 600px) {
         .collapsing_grid {
            grid-template-columns: 1fr;
         }
         .mobile_image_grid {
            --small-col: var(--small-col-mobile) !important;
         }
         .mobile_image_grid > *:nth-child(odd) img {
            width: 50px;
            height: auto;
         }
      }

      .item_preview_grid, .regular_grid {
         --size                : 125px;
         --gap                 : 10px;
         display               : grid;
         grid-template-columns : repeat( auto-fill, var(--size) );
         grid-gap              : var(--gap);
         margin-left           : auto;
         margin-right          : auto;
         justify-content       : center;
      } 
      .full_regular_grid {
         --gap                 : 0px;
         grid-template-columns : repeat( auto-fit, minmax(var(--size), 1fr) );
      }
      .item_preview_grid .item {
         text-align            : center;
         margin                : auto;
         display               : block;
      }
      .custom_grid {
         --gap                 : 10px;
         display               : grid;
         grid-template-columns : var(--cols);
         grid-gap              : var(--gap);
         margin-left           : auto;
         margin-right          : auto;
         justify-content       : center;
      }


      /* LIST */

      .flat_list {
         list-style-type: none;
         margin: 0px;
         padding: 0px;
      }
      .flat_list li {
         border: 1px solid var(--main-dark-color);
         background: var(--main-light-color);
         color: var(--main-dark-color);
      }
      .flat_list li + li {
         border-top: none;
      }
      .flat_list li > a {
         display: block;
         text-decoration: none;
         color: var(--main-dark-color);
         padding: 10px;
      }
      .flat_list li.selected > a {
         color: var(--main-text-color);
      }


/* ****************************************** */
/* Boo Boo King in Header                     */
/* ****************************************** */

    #bbking_header {
        position        : absolute;
        top             : -5px;
        right           : 121px;
        width           : 131px;
        z-index         : 799;
    }
    #bbking_header a {
        display         : block;
        text-decoration :none;
        color           : black;
    }
    #bbking_header img {
        position        : absolute;
        top             : 0px;
        left            : 0px;
        width           : 131px;
        height          : 99px;
    }
    #bbking_header div {
        position        : absolute;
        top             : 76px;
        left            : 5px;
        font-size       : 10px;
        text-align      : center;
        width           : 116px;
        height          : 13px;
        overflow        : hidden;
        color           : black;
    }

	@media screen and (max-width: 400px) {
	    #bbking_header {
	        right       : 70px;
	    }
        #bbking_header img {
            width       : 80px;
            height      : inherit;
        }
        #bbking_header div {
            top         : 44px;
            left        : 0px;
            font-size   : 8px;
            width       : 80px;
            height      : 10px;
        }
	}

/* ****************************************** */
/* Inline Items                               */
/* ****************************************** */

   .item_box_cell.inline {
        display         : inline-block;
        position        : relative;
   }
	.item_box_cell img {
	    background      : var(--item-box-back);
	    border-color    : var(--item-box-border);
	}
	.item_box_cell.border img {
	    border          : 1px solid var(--item-box-border);
   }
   .item_box_cell .item_overlay_icon {
       width           : 15px;
       background      : transparent;
       border          : none !important;
       position        : absolute;
       bottom          : 2px;
       right           : 2px;
       z-index         : 1;
   }
   
   .item_box_cell.padded img {
      padding          : 10px;
   }

/* ****************************************** */
/* SelectBoxIt                                */
/* ****************************************** */

   .selectboxit-container .selectboxit.button {
      -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
      box-shadow:inset 0px 1px 0px 0px #ffffff;
      border          : 1px solid #000000;
      background      : #ededed;
      background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
      background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
      padding         : 3px 0px 3px 0px;
      text-decoration : none;
      font-size       : 12px;
      font-weight     : bold;
      font-family     : Arial, sans-serif;
      color           : #000000;
      cursor          : pointer;
      text-shadow:1px 1px 0px #ffffff;
      white-space     : nowrap;
      -webkit-appearance: none;
  }
  .selectboxit.button span, .selectboxit-container span.selectboxit-btn {
      height          : 21px;
      line-height     : 21px;
  }
  .button.select {
      height: 29px;
  }