/* ****************************************** */
/* SALT USAGE                                 */
/* ****************************************** */

    .salt {
        margin-top      : 8px;
        background-color: #a5edf1;
        box-shadow     : 0px 0px 9px #FF9;
        -o-box-shadow     : 0px 0px 9px #FF9;
        -moz-box-shadow     : 0px 0px 9px #FF9;
        -webkit-box-shadow  : 0px 0px 9px #FF9;
        filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#FF9', Positive='true');
    }

/* ****************************************** */
/* GENERAL STYLES                             */
/* ****************************************** */
    
	.groph_box_inner {
		position        : relative;
	}
	#inline_pet {
		position        : absolute;
		display         : block;
		text-decoration : none;
		width           : 40px;
		height          : 40px;
		bottom          : -5px;
		left            : -5px;
	}
	#inline_pet img {
		width           : 40px;
	}
	#inline_pet:hover, #inline_pet:hover img {
		width           : 100px;
		height          : 100px;
	}
	.groph_item_block {
		max-width       : 600px;
		margin			: auto;
	}
	.inline_grid_item {
		display			: inline-block;
		margin			: 3px;
		vertical-align	: top;
	}

    .groph_title, #combat_rank {
        cursor          : pointer;
    }

/* ****************************************** */
/* DRAG AND DROP CLOTHING                     */
/* ****************************************** */

    #clothing_info_box .child_list {
        height      : 250px;
        width       : 170px;
        overflow    : auto;
    }
    #clothing_info_box.split .child_list {
        height      : 110px;
    }
    #clothing_info_box.split .child_list.hog {
        height      : 230px;
    }

    .clothing_item {
        margin      : 0px;
    }
    .clothing_item:hover, .clothing_item.moved:hover {
        background-color    : rgba(162,250,147,1);
    }
    .clothing_item.moved {
        background-color    : rgba(251,195,0,0.7);
        margin              : 0px 0px 1px 0px;
    }
    .clothing_item.locked {
        background-color    : rgba(210,210,210,1) !important;
        background-position : center right;
        background-repeat   : no-repeat;
        background-image    : url('/images/icons/lock.13.png');
        margin              : 0px 0px 1px 0px;
    }
    .ignore.note {
        font-size   : 85%;
    }

/* ****************************************** */
/* COMBAT PLACINGS                            */
/* ****************************************** */

    .at_top {
        position    : absolute;
        top			: 102px;
        right		: 5px;
    }
    .chat_open .at_top {
        position    : absolute;
        top			: 152px;
        left		: 5px;
        right		: auto;
    }
    .at_top h2 {
        display		: none;
    }

/* ****************************************** */
/* COMBAT RANK                                */
/* ****************************************** */

    #combat_rank {
        display         : block;
        position        : absolute;
        width           : 79px;
        height          : 79px;
        text-align      : center;
        font-size       : 50px;
        color           : white;
        background-image: url('/images/icons/combat_shield.png');
        background-repeat: no-repeat;
        top             : 72px;
        right           : 5px;
        line-height     : 79px;
        z-index         : 10;
    }

    .chat_open #combat_rank {
        right           : 222px;
    }

/* ****************************************** */
/* DRESSING ROOM                              */
/* ****************************************** */

    #add_clothing {
        position        : absolute;
        width           : 210px;
        overflow        : hidden;
        text-align      : left;
        color           : black;
    }

    #add_clothing.wide {
        left            : 185px;
    }

    #add_clothing.narrow {
        left            : 303px;
    }

    #add_clothing #list {
        border          : 1px solid #666;
        width           : 120px;
        padding         : 5px;
        background      : #FCFCFC;
        float           : left;
        height          : 292px;
        overflow-x      : hidden;
        overflow-y      : auto;
        margin-left     : 0px;
        -moz-transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        transition      : all 0.5s ease-in-out;
    }

    #list p {
        font-size       : 11px;
        margin          : 2px 0px;
        background      : white;
        padding         : 1px;
        border          : 1px solid #F1F1F1;
    }

    #list p img {
        vertical-align  : middle;
    }

    #list h3 {
        margin          : 0px;
    }

    #list h4.container {
        margin          : 0px 0px 5px 5px;
        text-align      : right;
    }

    #add_clothing #list.closed {
        margin-left     : -190px;
        -moz-transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        transition      : all 0.5s ease-in-out;
    }

    #add_clothing .tab {
        background-image: url('/images/icons/tab_dressing_minus.png');
        background-repeat: no-repeat;
        width           : 17px;
        height          : 145px;
        float           : left;
        cursor          : pointer;
    }

    #add_clothing .tab.closed {
        background-image: url('/images/icons/tab_dressing_plus.png');
    }

    .remove_link {
        color           : red !important;
        font-weight     : bold;
        text-decoration : none;
    }

    .groph_item_block .item_box_cell {
        position        : relative;
        height          : 110px;
        padding         : 4px;
    }
    .item_box_cell > a {
        display         : block;
    }
    .item_box_cell.with_desc {
        height          : auto;
    }

    .remove_link.in_box {
        position        : absolute;
        top             : 2px;
        right           : 2px;
        padding         : 0px;
    }


/* ****************************************** */
/* SKILLS                                     */
/* ****************************************** */

    #skills {
        position        : absolute;
        width           : 200px;
        overflow        : hidden;
        text-align      : left;
        pointer-events	: none;
        color           : black;
    }

    #skills.wide {
        left            : -685px;
    }

    #skills.narrow {
        left            : -375px;
    }

    #skills #list {
        border          : 1px solid #666;
        width           : 120px;
        padding         : 5px;
        background      : #FCFCFC;
        float           : right;
        height          : 292px;
        overflow-x      : hidden;
        overflow-y      : auto;
        margin-left     : 0px;
        -moz-transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        transition      : all 0.5s ease-in-out;
        pointer-events	: auto;
    }

    #list p {
        font-size       : 11px;
        margin          : 2px 0px;
        background      : white;
        padding         : 1px;
        border          : 1px solid #F1F1F1;
        pointer-events	: auto;
        white-space     : nowrap;
        overflow        : hidden;
    }

    #skills #list.closed {
        margin-right     : -190px;
        -moz-transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        transition      : all 0.5s ease-in-out;
        pointer-events	: auto;
    }

    #skills #list span {
        width           : 80px;
        display         : inline-block;
        pointer-events	: auto;
    }

    #skills.wide #list span {
        width           : 60px;
    }

    #skills .tab {
        background-image: url('/images/icons/tab_skills_minus.png');
        background-repeat: no-repeat;
        width           : 17px;
        height          : 145px;
        float           : right;
        cursor          : pointer;
        pointer-events	: auto;
    }

    #skills .tab.closed {
        background-image: url('/images/icons/tab_skills_plus.png');
        pointer-events	: auto;
    }
	
/* ****************************************** */
/* GROPH DISPLAY RULES                        */
/* ****************************************** */

	#groph_display_area, #groph_info_display_area {
		width			: 656px;
		margin			: 15px auto 15px auto;
		position		: relative;
	}
	
	#groph_main_row {
		display			: flex;
        flex-direction	: row;
        /* flex-wrap       : wrap; */
	}
	
	#groph_main_row > div {
		position		: relative;
	}
	
	#groph_stats, #groph_clothing {
		height			: 304px;
		width			: 170px;
		padding			: 6px;
		box-sizing		: border-box;
		flex			: none;
		overflow		: hidden; 
	}
	
	#groph_image {
		margin-left		: 6px;
		margin-right	: 6px;
	}
	
	#groph_main_row #skills.narrow {
		left			: -200px;
	}
	
	#groph_main_row #add_clothing {
		left			: inherit;
	}
	
	#groph_main_row #clothing_info_box .child_list {
		width			: inherit;
	}
	
	.groph_info_block, .nature {
		margin-bottom	: 6px;
    }
    
    #groph_effects_display_area {
        flex-basis: 100%;
        order: 1;
        pointer-events: none; 
        & > .flex_grid {
            height: 100%;
            align-content: flex-end;
        }
        & .item_box_cell.inline {
            pointer-events: auto;
        }
    }


/* ****************************************** */
/* QUICK CHARMS                               */
/* ****************************************** */

    #add_items {
        overflow        : hidden;
        text-align      : center;
        margin-bottom   : -3px;
    }

    #add_items #list {
        border          : 1px solid #666;
        width           : 580px;
        padding         : 5px;
        background      : #FCFCFC;
        max-height      : 292px;
        overflow-x      : hidden;
        overflow-y      : auto;
        margin-left     : auto;
        margin-right    : auto;
        text-align      : left;
        color           : var(--main-dark-color);
    }

    #add_items #list h4.container {
        margin          : 0px 0px 5px 0px;
        text-align      : left;
        clear           : both;
        padding-top     : 5px;
    }

    #add_items #list.closed {
        display         : none;
    }

    #add_items #list p {
        width           : 49%;
        float           : left;
        margin-right    : 5px;
        box-sizing      : border-box;
    }

    #add_items .tab {
        background-image: url('/images/icons/tab_up_minus.png');
        background-repeat: no-repeat;
        background-position:top center;
        width           : 590px;
        height          : 17px;
        margin-left     : auto;
        margin-right    : auto;
    }

    #add_items .tab.closed {
        background-image: url('/images/icons/tab_up_plus.png');
    }

/* ****************************************** */
/* GROPH PARENT SECTION                       */
/* ****************************************** */

	#groph_parent_box {
		display			: flex;
		width			: 420px;
		margin			: auto;
		flex-direction	: row;
		justify-content : space-between;
	}

	#groph_parent_box > div {
		text-align		: center;
	}
	
    .no_parent {
        color           : #999999;
        font-weight     : bold;
        font-size       : 130%;
    }

/* ****************************************** */
/* MEDIA RULES                                */
/* ****************************************** */

    @media all and (min-width: 1300px) {

        .chat_open #add_clothing #list {
            width           : 148px;
        }
        
    }

    @media all and (min-width: 1190px) {

        #skills #list, #add_clothing #list {
            width           : 148px;
        }

    }
    
    @media all and (max-width: 1300px) {
    
    	.chat_open #groph_main_row #add_clothing #list, .chat_open #groph_main_row #skills #list {
            transition      : none;
            pointer-events  : all;
    	}
    	.chat_open #groph_main_row #add_clothing.open {
    		top				: 0px;
    		left			: -170px;
            z-index         : 1;
    	}
    	.chat_open #groph_main_row #add_clothing.open #list {
    		width			: 158px;
    	}
    
    	.chat_open #groph_main_row #skills.open {
    		top				: 0px;
    		left			: -30px;
            z-index         : 1;
    	}
    	.chat_open #groph_main_row #skills.open #list {
    		width			: 158px;
    	}

    }
    
    @media all and (max-width: 1000px) {
    
    	#groph_main_row #add_clothing #list, .chat_open #groph_main_row #skills #list {
            transition      : none;
            pointer-events  : all;
    	}
    	#groph_main_row #add_clothing.open {
    		top				: 0px;
    		left			: -170px;
            z-index         : 1;
    	}
    	#groph_main_row #add_clothing.open #list {
    		width			: 158px;
    	}
    
    	#groph_main_row #skills.open {
    		top				: 0px;
    		left			: -30px;
            z-index         : 1;
    	}
    	#groph_main_row #skills.open #list {
    		width			: 158px;
    	}
        
        #combat_rank {
        	position		: initial;
        	margin-top		: 8px;
        	margin-bottom	: 8px;
        }
    
    }
	
	@media screen and (max-width: 736px) {
	
		#groph_display_area, #groph_info_display_area, #groph_parent_box {
			width			: 100%;
			position		: relative;
			background		: rgba(0,0,0,0.4);
			border-radius	: 6px;
			padding			: 6px;
			box-sizing		: border-box;
		}
		
		#groph_main_row {
			display			: flex;
			flex-direction	: column;
		}
		#groph_main_row > div {
			width			: 100%;
			margin-bottom	: 6px;
		}
		#groph_main_row .tab {
			display			: none;
		}
		#groph_main_row #skills, #groph_main_row #skills.narrow, #groph_main_row #add_clothing {
			display			: block;
			position		: relative;
			left			: inherit;
			width			: auto;
		}
		#groph_main_row #skills       #list.closed, #groph_main_row #skills       #list,
		#groph_main_row #add_clothing #list.closed, #groph_main_row #add_clothing #list {
			display			: block;
			position		: relative;
			margin			: 0px;
			float			: none;
			width			: auto;
			border-width	: 2px;
		}
		
		#groph_image    {  
			order 			: 1; 
			margin			: 0px 0px 10px 0px;
		}
		#groph_stats    {  order : 2; height: auto; }
		#groph_skills   {  order : 3; height: auto; }
		#groph_clothing {  order : 4; height: auto; }
		#groph_dressing {  order : 5; height: auto; }
		
		#groph_image .groph_box {
			margin			: auto;
		}
		
		#groph_skills h4, #groph_dressing h3 {
			color			: #FFF;
			font-weight		: bold;
			text-align		: center;
			background-color: #666;
			padding			: 4px !important;
			margin-bottom	: 5px;
			margin-top		: 0px;
			font-size		: 1em;
		}
		#groph_main_row #skills #list {
			height			: auto;
		}
		#groph_main_row #groph_stats table, #groph_main_row #groph_stats tbody {
			display			: block;
		}
		#groph_main_row #groph_stats tr {
			display			: block;
			font-size		: 11px;
			margin			: 2px 0px;
			background		: white;
			padding			: 1px;
			border			: 1px solid #F1F1F1;
			pointer-events	: auto;
			box-sizing		: border-box;

		}
		#groph_main_row #groph_stats td {
			display			: inline-block;
		}
		#groph_main_row #groph_stats td:first-child {
			width			: 80px;
			text-align		: left;
		}
	
		#add_items #list {
			width				: auto;
		}
		#add_items #list p {
			width				: auto;
			float				: none;
		}
		#add_items .tab {
			background-position	: 8px top;
		}
		#add_items .tab, #add_items .tab.closed {
			width				: 100%;
		}
	
	}
	
	@media screen and (max-width: 420px) {
		#groph_parent_box {
			flex-direction		: column;
		}
		#groph_parent_box > div {
			background			: #ccc;
			border-radius		: 6px;
		}
		#father {
			margin-bottom		: 10px;
		}
		#groph_parent_box > div .groph_box {
			margin				: auto;
		}
	}
	
	@media screen and (max-width: 331px) {
		#groph_image .groph_box.groph_box_300 {
			margin-left			: -6px;
		}
	}

/* ****************************************** */
/* MISC                                       */
/* ****************************************** */

    .groph_info_box {
        background      : white;
        color           : black;
    }

     .groph_title {
        background      : #993333;
        color           : #FFFFFF;
        padding         : 6px;
        border          : 1px solid #330000;
        margin          : 0px 0px 1px 0px;
     }

     .groph_title a {
        color           : #FFFFFF;
        text-decoration : none;
     }

     .child_list_head {
        color                   : var(--main-light-color);
        font-weight             : bold;
        text-align              : center;
        padding                 : 4px !important;
        margin-bottom           : 5px;
        margin-top              : 0px;
        background              : var(--main-darken-heavy);
     }
     .child_list_head.closed {
        padding                 : 4px !important;
     }
     .child_list_head.open {
        background-position     : 4px 4px;
     }
     .child_list_head.mid {
        margin-top              : 6px;
     }

     .child_list_candle {
        color           : var(--main-light-color);
        font-weight     : bold;
        font-style      : italic;
        text-align      : center;
        background      : #6666CC;
        padding         : 4px;
        margin-bottom   : 5px;
        margin-top      : 0px;
     }

     .child_list {
        font-size       : 11px;
     }
     .element {
        display                 : inline-block;
        padding-left            : 12px;
        background-position     : center left;
        background-size         : 10px 10px;
        background-repeat       : no-repeat;
     }
     .element_void  { background-image : url('/images/fight/elements/void.20.png');  }
     .element_earth { background-image : url('/images/fight/elements/earth.20.png'); }
     .element_air   { background-image : url('/images/fight/elements/air.20.png');   }
     .element_water { background-image : url('/images/fight/elements/water.20.png'); }
     .element_fire  { background-image : url('/images/fight/elements/fire.20.png');  }
     .element_wood  { background-image : url('/images/fight/elements/wood.20.png');  }

    .groph_info_block {
        background-color        : #FFEEDD;
        font-size               : 85%;
        border                  : 1px solid #444;
        padding                 : 6px;
        color                   : black;
    }

    .groph_info_block *:first-child {
        margin-top              : 0px;
    }

    .groph_info_block span.div {
        color                   : #DD9999;
        padding                 : 0px 4px;
    }

    .groph_form_block {
        background-color        : #FFEEDD;
        color                   : black;
        border                  : 1px solid #444;
        padding                 : 6px;
        text-align              : right;
    }

    .nature .description {
        background-color        : #FFEEDD;
        color                   : black;
        font-size               : 85%;
        border                  : 1px solid #444;
        padding                 : 6px;
    }

    .nature p {
        margin                  : 0px;
    }

    .nature p.effect {
        margin-top              : 5px;
        font-style              : italic;
    }

    .nature h3 {
        margin                  : 2px 0px 0px 0px;
        cursor                  : pointer;
    }

    .nature h3 span {
        background-color        : #ECB;
        border                  : 1px solid #444;
        border-bottom           : 1px solid #ECB;
        padding                 : 2px 6px 0px 6px;
        cursor                  : pointer;
        color                   : black;
    }

    .nature h3.collapsed {
        background-color        : #ECB;
        border                  : 1px solid #444;
        padding                 : 2px 6px;
        cursor                  : pointer;
    }

    .nature h3.collapsed span {
        border                  : none;
        padding                 : 0px;
        cursor                  : pointer;
    }

    .header {
        background-color        : #ECB;
        border                  : 1px solid #444;
        border-bottom           : none;
        padding                 : 2px 6px;
    }

    .header h3 {
        margin                  : 2px 0px 0px 0px;
    }

    .item_placeholder {
        border                  : 3px dashed #888;
        height                  : 100px;
        width                   : 100px;
        padding                 : 4px;
        text-align              : center;
        color                   : #888;
        background              : rgba(210,210,210,0.6);
        text-transform          : uppercase;
        font-size               : 20px;
        font-weight             : bold;
        line-height             : 100px;
    }

    .item_placeholder span {
        display                 : inline-block;
        line-height             : 22px;
        vertical-align          : middle;
        color                   : white;
    }