/*********************************************************************************************************************************************
 *  default UI 
 ********************************************************************************************************************************************/

.gridster li .meta-label span.delete-post,  
.gridster li .meta-label span.move-handle,
#adminmenu #menu-posts-gridster div.wp-menu-image,
#icon-edit.icon32-posts-gridster,
body.settings_page_gridster_default_options #icon-options-general,
.gridster_edit:before,
.gridster_edit-area:before,
.wp_themeSkin .mceIcon.mce_gridster_shortcode {
    background-image: url('../images/gridster_sprite.png');
    background-repeat: no-repeat;
}
/******************************************************************************************************************
 *  ICONS (overwritten from WP defaults) 
 ******************************************************************************************************************/
 
#adminmenu #menu-posts-gridster div.wp-menu-image {
    background-position: 7px -42px;
}
#adminmenu #menu-posts-gridster:hover div.wp-menu-image, 
#adminmenu #menu-posts-gridster.wp-has-current-submenu div.wp-menu-image {
    background-position: 7px -71px;
}
#icon-edit.icon32-posts-gridster,
body.settings_page_gridster_default_options #icon-options-general {
    background-position: 0 -114px;
}
.wp_themeSkin .mceIcon.mce_gridster_shortcode {
    background-position: 2px -46px;
}
.wp_themeSkin .mceIcon.mce_gridster_shortcode:hover,
.wp_themeSkin .mceIcon.mce_gridster_shortcode:active,
.wp_themeSkin .mceIcon.mce_gridster_shortcode:focus {
    background-position: 2px -75px;
}

/******************************************************************************************************************
 *  TINYMCE Edit & Delete Handler Buttons
 ******************************************************************************************************************/
#gridster_sr_btns {
	padding: 2px;
	position: absolute;
	display: none;
	z-index: 155000;
}
    #gridster_changeShortcode,
    #gridster_editShortcode,
    #gridster_delShortcode {
    	border-color: #999;
    	background-color: #eee;
    	margin: 2px;
    	padding: 2px;
    	border-width: 1px;
    	border-style: solid;
    	-webkit-border-radius: 3px;
    	border-radius: 3px;
    }
    
    #gridster_changeShortcode:hover,
    #gridster_editShortcode:hover,
    #gridster_delShortcode:hover {
    	border-color: #555;
    	background-color: #ccc;
    }

/*********************************************************************************************************************************************
 *  CPT Gridster edit.php 
 ********************************************************************************************************************************************/
.gridster_shortcode-in-list-table {
    min-width: 75%;
    font-family: Consolas, monaco, monospace;
    border: none; 
} 
 
 
/*********************************************************************************************************************************************
 *  CPT Gridster post.php - workbench METABOX common UI
 ********************************************************************************************************************************************/
#gridster_workbench_metabox {
    background: none;
    border: none;
}
#gridster_workbench_metabox:after {
    content: '';
    clear: both;
    display: block;
}

/*********************************************************************************************************************************************
 *  CPT Gridster post.php - METABOX 1-column layout
 ********************************************************************************************************************************************/

    #gridster_workbench_metabox.one-column #gridster_content_blocks {
        width: 100%;
    }
        #gridster_workbench_metabox.one-column #gridster_content_blocks > div {
            width: 48.5%;
            float: left;
        }
        #gridster_workbench_metabox.one-column #gridster_content_blocks > div:nth-child(even) {
            margin-left: 3%;
        } 
            #gridster_workbench_metabox.one-column .gridster_widget-block .inside li span {
                max-width: 74%;
            }            
    #gridster_workbench_metabox.one-column #gridster_workbench_wrap {
        margin-left: -280px;
        margin-bottom: 20px;
    } 

/*********************************************************************************************************************************************
 *  CPT Gridster post.php - METABOX 2-columns layout
 ********************************************************************************************************************************************/

    #gridster_workbench_metabox.two-columns #gridster_content_blocks {
        width: 280px;
    }
    #gridster_workbench_metabox.two-columns #gridster_workbench_wrap {
        margin-left: -280px;
    } 
        #gridster_workbench_metabox.two-columns #gridster_workbench,
        #gridster_workbench_metabox.two-columns #gridster_workbench_wrap noscript div,
        #gridster_workbench_metabox.two-columns #gridster_loader  {
            margin-left: 300px;
        }
/*********************************************************************************************************************************************
 *  CPT Gridster post.php - METABOX left column with widget-blocks of posts
 ********************************************************************************************************************************************/
    #gridster_workbench_metabox > .handlediv, 
    #gridster_workbench_metabox > h3 {
        display: none;
    }
    
    #gridster_workbench_metabox > .inside {
        padding: 0;
        margin: 0;
    }     

    #gridster_content_blocks {
        float: left;
        position: relative;
        z-index: 1;
    }
        .gridster_widget-block {
            margin-bottom: 1em;
            position: relative;
            border: 1px solid #DFDFDF;
            background-color: whitesmoke;
            -webkit-border-radius: 3px;
                    border-radius: 3px;
            -webkit-background-clip: padding-box; 
                    background-clip: padding-box;
            -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
                    box-shadow: inset 0px 1px 0px 0px #ffffff;
        } 
        .js .gridster_widget-block h3 {
            cursor: pointer;
        }
        #gridster_workbench_metabox:hover .gridster_widget-block .handlediv {
            background: none;
        }
        .js #gridster_workbench_metabox .gridster_widget-block:hover .handlediv {
            background: url('/wp-admin/images/arrows.png') no-repeat scroll 6px 7px transparent;
        }
        .js #gridster_workbench_metabox .gridster_widget-block.trigger_active .handlediv {
            background: url('/wp-admin/images/arrows.png') no-repeat scroll 6px -29px transparent;
        }
        #gridster_workbench_metabox .gridster_widget-block .inside {
            margin: 0;
            display: none;
            padding: 0;
        }
            .gridster_widget-block .inside div.error {
                margin: 10px;
            }            
            .gridster_widget-block .inside li {
                clear: both;
                margin: 0;
                padding: 3px 10px;
            }
            .gridster_widget-block .inside li:hover {
                cursor: move;
                background-color: #fff; 
            }
                .gridster_widget-block .inside li span {
                    display: inline-block;
                    max-width: 82%;
                    color: #21759B;
                }                                    
                .gridster_widget-block .inside li:hover span {
                    color: #d54e21;
                }
                .gridster_widget-block .inside li abbr {
                    border: none;
                } 
            .gridster_widget-block .inside li.ui-draggable-dragging {
                z-index: 999!important;
                display: list-item;
                padding: 3px 6px;
                width: 70%;
                background-color: #FFFFE0!important;
                border: 1px dotted #E6DB55;
                -webkit-transform: scale(1.5); 
                   -moz-transform: scale(1.5); 
                    -ms-transform: scale(1.5); 
                     -o-transform: scale(1.5); 
                        transform: scale(1.5); 
            }
                .gridster_widget-block .inside li.ui-draggable-dragging > span { 
                    max-width: 100%;
                }           
                .gridster_widget-block .inside li.ui-draggable-dragging small.howto {
                    display: none;
                }                        
            .gridster_widget-block .inside .widget-block-paginav {
                height: 30px;
                padding: 0 10px;
                position: relative;
            }
            .gridster_widget-block .inside .widget-block-paginav .gridster_search-posts-by-type {
                display: block;
                left: 20%;
                position: absolute;
                top: 0;
                width: 60%;          
            }
            .gridster_widget-block .spinner {
                background-position: 50%;
                left: 0;
                position: absolute;
                top: 0;
                width: 100%;
                height: 100%;
                margin: 0;
                background-color: rgba(255,255,255,.5);           
            }

/*********************************************************************************************************************************************
 *  CPT Gridster post.php - METABOX right column with gridster.js workbench
 ********************************************************************************************************************************************/
    #gridster_workbench_wrap {
        width: 100%;
        float: right;
        position: relative;
    } 
        .js #gridster_workbench  {
            overflow-x: hidden;
            min-height: 400px;
            border: 1px dashed #ccc;
            -webkit-border-radius: 3px;
                    border-radius: 3px;
            -webkit-background-clip: padding-box; 
                    background-clip: padding-box;
            background: #F8F8F8;
            -webkit-box-shadow: inset 1px 1px 5px #ccc;    
               -moz-box-shadow: inset 1px 1px 5px #ccc; 
                    box-shadow: inset 1px 1px 5px #ccc;                
        }
        #gridster_workbench_wrap noscript div {
            text-align: center;
            min-height: 200px;
            padding: 100px 0;
            margin: 0;
            font-size: 1.5em;
            line-height: 1.25em;
        }
        #gridster_load-wrap {
            height: 100%;
            left: 0;
            position: absolute;   
            top: 0;
            width: 100%;
            display: none;
            z-index: 1000;                                        
        }
            #gridster_loader {        
                background-color: rgba(228, 228, 228, 0.85);
                -webkit-border-radius: 3px;
                        border-radius: 3px;
                -webkit-background-clip: padding-box; 
                        background-clip: padding-box;            
                cursor: not-allowed;
                padding: 0 30px;
                font-size: 1.5em;
                height: 100%;
                text-align: center;
                text-shadow: 1px 1px 0 #FFF, 0 0 35px #000;
                border: 1px dashed #CCCCCC;
            }
            #gridster_loader.error {        
                background-color: rgba(255, 0, 0, 0.85);
                text-shadow: 1px 1px 0 #000, 0 0 35px #f00;
                border-color: #f00;
                margin-top: 0;
            }            
                #gridster_loader p {
                    padding: 180px 0;
                    margin: 0;
                } 
                #gridster_loader.error p{
                    color: #fff;                
                }                       
                    #gridster_load-wrap p img {
                        vertical-align: middle;
                        margin-right: 5px;
                    }        
        
        .gridster .content_width-border {
            border-left: 2px dotted #FFCFC9;
            height: 100%;
            position: absolute;
            top: 0;
            padding-left: 2px;
            cursor: help;        
        }


/*********************************************************************************************************************************************
 *  CPT Gridster post.php - METABOX right column with gridster.js widgets       #D54E21
 ********************************************************************************************************************************************/
        .gridster {
        
        }
            .gridster > ul > li.gs_w {
                margin: 0;
                background-color: #ECECEC;
                outline: 1px dotted grey; 
                overflow: hidden; 
                z-index: 1;
            }
            .gridster > ul > li.preview-holder {
                background-color: #fff;
                border: 1px dotted #CCC; 
                opacity: .75
            }            
            .gridster > ul > li .admin-html-holder {
                padding: 30px 0;
            }
            #gridster_workbench > ul > li h1,
            #gridster_workbench > ul > li h2,
            #gridster_workbench > ul > li h3,
            #gridster_workbench > ul > li h4,
            #gridster_workbench > ul > li h5,
            #gridster_workbench > ul > li h6 {
                margin: 0 0 .25em;
            }             
            .gridster li img {
                border: 0 none;
                left: 0;
                opacity: 0.25;
                position: absolute;
                top: 0;
                height: 100%;
                width: auto;            
            }            
            .gridster li.ui-resizable-resizing {
                z-index: 9999999 !important;
            }
            .gridster li.isUpdated {
                background: #ECECEC url('/wp-admin/images/wpspin_light.gif') 50% no-repeat;
            }        
            .gridster li.isUpdated > * {
                opacity: .3;
            }
                .gridster li .admin-html-holder a {
                    text-decoration: none!important;
                    outline: none!important;
                }
/******************************************************************************
 *  CPT Gridster post.php - METALABELS of gridster widgets 
/******************************************************************************/
	
        .gridster li .meta-label {
            padding: 5px 5px 5px 10px;
            position: absolute;
            top: 0;
            right: 0;
            z-index:10;
            background: whitesmoke;
            border-bottom-left-radius: 6px;
            -moz-box-shadow:-1px 1px 3px #333; 
            -webkit-box-shadow: -1px 1px 3px #333; 
            box-shadow: -1px 1px 3px #333; 
            -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
            display: none;                       
        }
        .gridster li:hover .meta-label {   
             display: block; 
        }        
             
            .gridster li .meta-label label,
            .gridster li .meta-label span.ir {
                width: 18px;
                display: inline-block;
                height: 18px;
                margin-right: 4px;
                cursor: pointer;
                vertical-align: top;
                opacity: .5;
                margin-top: 2px;
            }
            .gridster li .meta-label label:hover,
            .gridster li .meta-label span:hover {
                opacity: 1;
            }            
            .gridster li .meta-label span.move-handle {
                background-position: 0 -1px;
            } 
            .gridster li .meta-label span.delete-post {
                background-position: 0 -22px;                
            }  
            .gridster .meta-label select.dynamic-classes-chosen.chzn-done,
            .gridster .meta-label div.chzn-container {
                margin-right: 5px;
                font-size: 11px;
                width: auto !important;
                max-width: 85%;
            }
                .gridster .meta-label .chzn-container-multi .chzn-choices .search-field input {
                    font-size: 11px;
                    height: 14px;
                    padding: 0 5px;
                    xwidth: 1px!important;
                }
                .gridster .meta-label .chzn-container-multi .chzn-choices .search-choice {
                    padding: 0 20px 0 5px;
                }  
                .gridster .meta-label .chzn-container-multi .chzn-choices .search-choice .search-choice-close {
                    top: 1px;
                }                              
/******************************************************************************
 * JEDITABLE ELEMENTS
/******************************************************************************/
.gridster_edit,
.gridster_edit-area {
    position: relative;
    padding: 2px 20px!important;
    min-height: 1em;    
}
    .gridster_edit:hover,
    .gridster_edit-area:hover {
        background-color: rgba(255, 255, 224, .7);
        cursor: text;
    }
.gridster_edit.isEdited,
.gridster_edit-area.isEdited {
    background-color: transparent;
    display: block;
}
    /* edit buttons */
    .gridster_edit:before,
    .gridster_edit-area:before {
        position: absolute;
        top: 2px;
        left: 2px;
        background-position: 0 -164px;
        content: '';
        width: 16px;
        height: 16px;
        display: block;
        visibility: hidden;
        cursor: pointer;
    }
    .gridster li:hover .gridster_edit:before,
    .gridster li:hover .gridster_edit-area:before {
        visibility: visible;
    }
    .gridster_edit form input,
    .gridster_edit-area form textarea {
        line-height: 1em;
        margin: 0;
        width: 100%;
        padding: 2px 1px;
        min-height: 1em;
        resize: vertical;
    }
    .gridster .gridster_edit-area form button {
        margin: 5px 5px 0 0;
    }
    .gridster_edit-area form button.button-primary {
        height: 22px;
        line-height: 21px;    
    }


 
/*********************************************************************************************************************************************
 *  CPT Gridster post.php - options METABOX common UI
 ********************************************************************************************************************************************/
#gridster_options_metabox label.short-text-integer {
    display: block;
    position: relative;
    padding-right: 23px;
}
    #gridster_options_metabox label.short-text-integer:after {
        position: absolute;
        top: 0;
        right:0;
        width: 20px;
        color: #666;
        content: 'px';
    }    
    #gridster_options_metabox input.short-text-integer {
        width: 50px;
        text-align: right;
        position: relative;
        margin-top: -3px;
    }    
   
   
    
/******************************************************************************
 * TINYMCE MODAL
/******************************************************************************/

html#gridster_modal-content {
    font-family: sans-serif;
    font-size: 12px;
    line-height: 1.4em;
    color: #333333;
    background-color: #F1F1F1;
    height: 100%;
}
html#gridster_modal-content,
html#gridster_modal-content body {
    min-height: 95%;
    position: relative;
}
    #gridster_modal-content h2 {
        margin-bottom: .75em;
    }
    #gridster_modal-content p {
        margin: .25em 0 .75em;
        clear: both;
    }
    #gridster_modal-content label {
        display: inline-block;
        font-size:  14px;
        padding-left: 30px;
        padding-right: 5%;
        width: 65%;
        cursor: pointer;
        float: left;
        margin-bottom: .5em;
    }
        #gridster_modal-content label input {
            margin: 2px 0 0 -30px;
            width: 30px;
        }        
        #gridster_modal-content label .alignright{
            float: right;
            display: inline-block;
        }    
    
    #gridster_modal-content a:link,
    #gridster_modal-content a:visited {
        color: #21759B;
    }
    #gridster_modal-content a:hover, 
    #gridster_modal-content a:focus, 
    #gridster_modal-content a:active {
        color: #D54E21;
    }
    #gridster_modal-content div.error {
        margin: 3.5em 10%;
    }
    #gridster_modal-content div.mceActionPanel {
        bottom: 0;
        margin-top: 5px;
        position: absolute;
        width: 100%;
    }    


/******************************************************************************
 * HELPER
/******************************************************************************/
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }