@bgAction: #444;
@ActionColor: #fff;
@MenuBorder: #999;
@disabled:#7CBE03;
@bottomMenu: 50px;
@rightMenu: 50px;

.fleft {float:left}
.boxShadow() { box-shadow: 3px 4px 9px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(0, 0, 0, 0.05);}
.overlay {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index:-1;background: #fff;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)!important";filter: alpha(opacity=80)!important;-moz-opacity: 0.3 !important;-khtml-opacity: 0.3 !important;opacity: 0.3 !important;}


@font-face {
    font-family: 'ElegantIcons';
    src: url('/templates/base/admin/fonts/ElegantIcons.eot');
    src: url('/templates/base/admin/fonts/ElegantIcons.eot?#iefix') format('embedded-opentype'), url('/templates/base/admin/fonts/ElegantIcons.woff') format('woff'), url('/templates/base/admin/fonts/ElegantIcons.ttf') format('truetype'), url('/templates/base/admin/fonts/ElegantIcons.svg#ElegantIcons') format('svg');
    font-weight: normal;
    font-style: normal;
}

.navbar-nav > li > a{line-height:31px;}
.nav > li > a{padding:10px;}

.header.navbar {
    #navbarPagePublish, #navbarPageMoreDetails, #navbarPageSave, #navbarPageClose {display:none}
}
.header.navbar.page-active {
    background:@bgAction;
    #navbarMenu, #navbarToolbar, #navbarMoreMenu, #navbarMenu {display:none!important}
    #navbarToolbarActions, #navbarToolbarActions a {color:#fff;}
    #navbarPagePublish, #navbarPageMoreDetails, #navbarPageSave, #navbarPageClose {display:block}
    #navbarPageSave {color: #fff; height: 50px; min-width: 200px; padding: 0 10px;}
    #navbarPageMoreDetails {float: left; border-left:1px solid @MenuBorder; padding: 0 10px; color:#fff; height:50px; }
    #navbarPagePublish a, #navbarPageClose a { color: #efefef; display: block; line-height: 50px; padding: 0 15px; font-size:16px; border-right:1px solid @MenuBorder; border-left:1px solid @MenuBorder; }
    #navbarPagePublish a {background:#6ea703; display:table; float:left;}
    #navbarPagePublish.disabled a, #navbarPagePublish.disabled .more-options,  #navbarPagePublish.disabled a:hover  {color:@disabled!important;}
    #navbarPageClose a {background:#666; display:table;}

    #navbarPagePublishList {list-style:none;display:none; position: absolute;top: 50px; margin: 0; padding: 0; .boxShadow()}
    #navbarPagePublishList li a{ color: #333; display: table; line-height: 50px; padding: 0 10px; font-size:16px; border-right:none; border-left:none; background:#fff; min-width:148px;}
    #navbarPagePublishList li a .icon{font-size: 30px; padding-right: 0px;}
    #navbarPagePublishList.active{display:block;}
    
}

#PageTitle {font-size: 16px; font-weight: bold; min-width:200px}
#PageUrl {font-size: 12px;}

#navbarPagePublish a .icon {font-size: 24px; line-height: 28px; display:table-cell; vertical-align:middle; padding-right: 10px;}
#navbarPageClose a .icon {font-size:32px;line-height: 32px; display:table-cell; vertical-align:middle; padding-right: 10px;}
#navbarPageMoreDetails .more-options,  #navbarPagePublish .more-options{font-family: 'ElegantIcons'; padding:0 2px; height:50px; font-size:20px; float:left; margin-left: 5px; line-height: 50px;}
#navbarPagePublish .more-options{background:#6ea703; border-left: 1px solid #bbb; margin-left:-1px; color:#efefef;}

#navbarPageMoreDetails [contenteditable="true"]:hover, #navbarPageMoreDetails [contenteditable="true"]:focus { /*outline: 1px dotted #fff;*/ color: #000;background: #fff;}

#navbarPagePublish a:hover, #navbarPageClose a:hover, #navbarPageMoreDetails .more-options:hover, #navbarToolbarActions a:hover{ color: #fff!important; background: rgba(255, 255, 255, 0.5); cursor:pointer}
#navbarPagePublish .more-options:hover{background: rgba(118, 181, 2, 1); cursor:pointer}

.floating-menu-box {
    position: fixed;
    bottom: @bottomMenu;
    right: @rightMenu;
    text-align: right;

    #floating-action {
        background: @bgAction;
        border-radius: 25px;
        display: block;
        height: 50px;
        width: 50px;
        float: right;
        border: 1px solid #fff;
        .boxShadow();
        font-family: 'ElegantIcons';
        font-size: 49px;
        line-height: 50px;
        color: #fff;
        position:relative;
    }
    #floating-action-menu li {
        list-style:none;
        margin:15px 0;
        a {background:@bgAction; color:@ActionColor; padding:5px 10px; }
    } 
    #floating-action-menu { display: none; }
    #floating-action .new { display: block; position: absolute;top: -2px;left: -2px;}
    #floating-action .edit { display: none; position: absolute;top: 0;left: 10px;font-size: 30px;}
}

.floating-menu-box:hover {
    #floating-action-menu { display: block; }
    #floating-action .new { display: none; }
    #floating-action .edit { display: block; }
}

#PageLoading {display:none;.overlaybox(); background:rgba(255, 255, 255, 0.8);}
#PageLoading  .bl-loading {position:fixed; top:50%; left:50%; width:107px; height:149px; margin-left:-54px; margin-top:-75px;}
#PageLoading.visible {display:block;}



.overlaybox() { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index:1010; }

.overlay-tutorial {
    .overlaybox();
    background: rgba(0, 0, 0, 0.8);
    .arrow-style { font-family:'ElegantIcons'; font-size:48px; line-height:48px }
    #step1 { position: fixed; bottom: @bottomMenu + 50; right: @rightMenu + 50px; font-size:24px; color:#fff;}
    #step2 {position: fixed; bottom: @bottomMenu; right: @rightMenu + 80px; font-size:24px; color:#fff; }
}



.pop-up{top: 20%;max-width: 700px;position: fixed;z-index: 1003;margin-left: auto;margin-right: auto;left: 10px;right: 10px; width:100%; display:none; background:#fff; min-height:500px; border-radius:10px;} 
.pop-up.active{display:block;}
.pop-up .close-pop{font-family:ElegantIcons; color:#777; font-size: 25px;position: absolute;right: 5px; cursor:pointer;}