﻿/*
    BrickPile CMS
    Custom property Virtual path selector

    -------------------------------------------------------------------
    Changes made to this file may affect multiple parts of the website.
    DO NOT CHANGE IF YOU DON'T KNOW WHAT YOU ARE DOING!
    -------------------------------------------------------------------

    TABLE OF CONTENTS
    -----------------

    FONT SIZE CONVERSIONS
    ---------------------
    10px: 83.3%
    11px: 91.7%
    12px: 100%
    13px: 108.3%
    14px: 116.7%
    15px: 125%
    16px: 133.3%
    17px: 141.7%
    18px: 150%
    20px: 166.7%
    24px: 200%

    PSEUDO SELECTORS ORDER
    ----------------
    :link, :visited, :hover, :focus, :active

*/

/* =============================================================================
   Base
   ========================================================================== */

input[type=text].alttext {
    width: 387px;
    margin-right: 5px;
}

.editor-field .btn-group { position: absolute;margin-top: .2em; }

.editor-field .btn-group a { text-decoration: none; }



.modal-backdrop {
    position: fixed;
    opacity: 0.6;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    z-index: 100;
}


#asset-dialog {
    background-color: #fff;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
       -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
            box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-background-clip: padding-box;
       -moz-background-clip: padding-box;
            background-clip: padding-box;
            
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -300px 0 0 -500px;
    z-index: 999999;
    width: 1000px;
}

#asset-dialog-header {
    -webkit-border-radius: 5px 5px 0 0;
       -moz-border-radius: 5px 5px 0 0;
            border-radius: 5px 5px 0 0;
    background: -webkit-linear-gradient(top, #f1f2ef 0%,#e5e7e1 100%);
              background: -moz-linear-gradient(top, #f1f2ef, #e5e7e1);
    padding: 15px 0;
}

#asset-dialog #files { padding-left: 190px; }

#asset-dialog #files li {
    
    width: 120px;
    border: 0;
    
    /* flexbox, por favor */
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: end;
    -webkit-box-align: center;
 
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    -moz-box-pack: end;
    -moz-box-align: center;
          
    background-clip: padding-box;
    -moz-background-clip: padding;
    -webkit-background-clip: padding;          
  
    display: inline-box;
    box-orient: vertical;
    box-pack: end;
    box-align: center;

    text-align: center;
    position: relative;
    
    margin: 0 28px 2em 0;

    overflow: hidden;

    min-height: 115px;
}

#asset-dialog .thumbnail div {
    position: relative;
}

#asset-dialog #files li button {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.9);
    border: 0;
    border-radius: 2px 0 0 0;
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 3px 3px 1px;
}

#asset-dialog #files li .dropdown-menu {
    background: -moz-linear-gradient(top, rgba(40,53,61,1) 0%, rgba(34,44,51,1) 20%);
    background: -webkit-linear-gradient(top, rgba(40,53,61,1) 0%,rgba(34,44,51,1) 100%);
    border:solid 1px #28353d;
    border-radius: 4px;
    box-shadow: 0 1px 0 #4b5a63 inset, 0 0 20px rgba(0,0,0,0.5);
    opacity: 0.98;
    width: 150px;
}

#asset-dialog #files li .dropdown-menu ul {
    background:url(../images/dialog-top.png) no-repeat 66% 0;
    margin: -12px 0 0;
    padding: 12px 0 0;        
}

#asset-dialog #files li .dropdown-menu li {
    display: block;
    margin: 0;
    text-align: left;
    width: auto;
    padding: 0 3px;
}
#asset-dialog #files li .dropdown-menu a {
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 1);
    font-size: 12px;
    display: block;
    padding: 5px 4px 4px;
}

#asset-dialog #files li .dropdown-menu a:hover {
    background: #67bce0;
    background: -moz-linear-gradient(top,  #67bce0 0%, #60abf8 50%, #43acd9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#67bce0), color-stop(50%,#60abf8), color-stop(100%,#43acd9));
    background: -webkit-linear-gradient(top,  #67bce0 0%,#60abf8 50%,#43acd9 100%);
    background: -o-linear-gradient(top,  #67bce0 0%,#60abf8 50%,#43acd9 100%);
    background: -ms-linear-gradient(top,  #67bce0 0%,#60abf8 50%,#43acd9 100%);
    background: linear-gradient(to bottom,  #67bce0 0%,#60abf8 50%,#43acd9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67bce0', endColorstr='#43acd9',GradientType=0 );
    box-shadow: 0 1px 0px #99d2eb inset;
    text-shadow: 0 1px 0 #187cbe;
    border-radius: 1px;
}
.modal-header h1 {
    color:#6b6f64;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:100%;
    text-shadow:0 1px 0 rgba(255,255,255,1);    
    margin: 0;
    padding: 0;
}

.modal-header button {
    position: absolute;
    right: 10px;
    top: 10px;
}

.modal a {
    text-decoration: none;
}
.modal a.close {
    position:absolute;
    right:14px;
    top:17px;
}
.modal a.close:hover {
    cursor: pointer;
}
.modal-body {
    max-height: 500px;
    min-height: 500px;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.modal-body #directories {
    background-color: #f3f7f8;
    border-right: solid 1px #e7e8e4;
    float: left;
    bottom: 0;
    top: 0;
    position: absolute;
    width: 191px;
    overflow: auto;
    z-index: 100;
}
.modal-body #directories ul {
    margin: 0;
    padding: 35px 0 0;
    overflow: auto;
    height: 353px;
}
.modal-body #directories ul ul { padding: 0;margin-left: 10px;height: auto; }
.modal-body #directories li {
    list-style: none;
}
.modal-body #directories ul a {
    font-size: 12px;
    color: #333;
    display: inline-block;
    padding: 5px 5px 5px 24px;
    cursor: pointer;
}
.modal-body #directories ul a.selected { font-weight: bold;}
.modal-body #directories ul a:hover,
.modal-body #directories ul a:focus,
.modal-body #directories ul a:active {
    text-decoration: underline;
}
.modal-body #directories .newDirectory,
.modal-body #directories .deleteDirectory {
    display: inline-block;
    padding: 5px;
}
.modal-body #directories ul li i { margin-right: 5px;}
.modal-body #files > ul {
    margin: 25px 0 0;
    margin-left: 0;
    padding-left: 23px;
}
.modal-body #files li.asset-list-item {
    margin: 0 28px 2em 0;
}
.modal-body #files li.asset-list-item  {
    /* basic styling */
    width: 120px;
    /*height: 135px;*/
    border: 0;

    /* flexbox, por favor */
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: end;
    -webkit-box-align: center;
 
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    -moz-box-pack: end;
    -moz-box-align: center;
          
    background-clip: padding-box;
    -moz-background-clip: padding;
    -webkit-background-clip: padding;          
  
    display: inline-box;
    box-orient: vertical;
    box-pack: end;
    box-align: center;

    text-align: center;
    position: relative;
}

.modal-body #files li:hover {
    cursor: pointer;
}
.modal-body #files li img {
    display: block;
    border: 1px solid #ccc;
    border-radius: 2px;
    background-color : #fff;
    padding: 4px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1)
    
    
}

.modal-body #files a.selected img {
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0;
    outline: thin dotted \9;
    /* IE6-9 */

    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
          
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
       -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
        -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
         -o-transition: border linear 0.2s, box-shadow linear 0.2s;
            transition: border linear 0.2s, box-shadow linear 0.2s;
}

.modal-footer {
    padding: 14px 15px 15px;
    margin-bottom: 0;
    text-align: right;
    background-color: whiteSmoke;
    border-top: 1px solid #DDD;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    -webkit-box-shadow: inset 0 1px 0 white;
    -moz-box-shadow: inset 0 1px 0 #ffffff;
    box-shadow: inset 0 1px 0 white;
}

.centerbox {
    /* basic styling */
    border: 1px solid #ccc;
    border-radius: 2px;
    background : #fff url("/areas/ui/images/ajax-loader.gif") no-repeat center center;
    display: inline-block;
    padding: 3px;    
    vertical-align: top;
    margin-top: .2em;
}
.centerbox img {
    display: block;
}

#files li span.name {
    color: #28353d;
    font-size: 0.857em;
    display: inline-block;
    margin-top: 8px;
    position: relative;
    width: 120px;
}
#files li span.name span:after {
    content: "";
    pointer-events: none;
    position: absolute;
    width: 10px;
    height: 100%;
    top: 0;
    right: 0;
    background: -webkit-gradient( linear, 0 0, 100% 0, from(rgba(255, 255, 255, 0)), to(white) );
    background: -moz-linear-gradient( 0, rgba(255, 255, 255, 0), white );
}

/* =============================================================================
   Drop area
   ========================================================================== */
   
#droparea {
    
    background: -moz-linear-gradient(top, rgba(40,53,61,1) 0%, rgba(34,44,51,1) 20%);
    background: -webkit-linear-gradient(top, rgba(40,53,61,1) 0%,rgba(34,44,51,1) 100%);
    border:solid 1px #28353d;
    border-radius: 4px;
    box-shadow: 0 1px 0 #4b5a63 inset, 0 0 20px rgba(0,0,0,0.5);
    right:3px;
    position: absolute;
    top: 53px;
    width: 224px;
    z-index:200;
    padding: 9px 5px;
}

#droparea > div {
    background-color: #fff;
    position: relative;
    border-radius: 3px;
    text-align: center;
    padding: 5px 10px;
    color: #aaa;
    font-size: 0.786em;
    
}

#droparea h1 {
    background:url(../images/dialog-top.png) no-repeat 75% 0;
    margin: -17px 0 0;
    padding: 16px 0 0;        
}
    
#droparea h1 {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color:#dcf5c3;
    font-size:100%;
    font-weight:bold;
    height:29px;
    text-align:center;
    text-shadow:0 1px 0 rgba(0,0,0,1);
}

#droparea > div > span {
    background: url(../images/upload.png) no-repeat 0 center;
    display: block;
    border-radius: 3px;
    padding: 2em .5em 2em 28px;
    color: #aaa;
}

#droparea ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
 
}

#droparea li {
    padding: .5em 0;
}

#droparea li span.size {
    background: none;
    position: absolute;
    right: 10px;
}

#droparea .ui-progress {
    display: none;
    width: 0;
}
#droparea a.remove {
    display: none;
    opacity: 0.5;
    cursor: pointer;
}

#droparea button {
    margin-top: 1em;
}

#files-status {
    text-align: left;
    position: relative;
}

#files-status span {
    position: absolute;
    right: 0;
}

#droparea .manual-file-chooser {
    position: absolute;
    width: 240px;
    margin-left: -80px;
    opacity: 0.0001;
    cursor: pointer;    
}

#droparea .manual-file-chooser-txt {
    color: #333;
}

#droparea .upload-error {
    color:#B94A48;
    background: url(../images/error.png) no-repeat 0 center;
    padding-left: 15px;
}

/** initial setup **/
.nano {
  position : relative;
  width    : 100%;
  height   : 100%;
  overflow : hidden;
}
.nano .content {
  position      : absolute;
  overflow      : scroll;
  overflow-x    : hidden;
  top           : 0;
  right         : 0;
  bottom        : 0;
  left          : 0;
}
.nano .content:focus {
  outline: thin dotted;
}
.nano .content::-webkit-scrollbar {
  visibility: hidden;
}
.has-scrollbar .content::-webkit-scrollbar {
  visibility: visible;
}
.nano > .pane {
  background : rgba(0,0,0,.25);
  position   : absolute;
  width      : 8px;
  right      : 0;
  top        : 0;
  bottom     : 0;
  visibility : hidden\9; /* Target only IE7 and IE8 with this hack */
  opacity    : .01; 
  -webkit-transition    : .2s;
  -moz-transition       : .2s;
  -o-transition         : .2s;
  transition            : .2s;
  -moz-border-radius    : 5px;
  -webkit-border-radius : 5px;  
  border-radius         : 5px;
    margin: 5px;
}
.nano > .pane > .slider {
  background: #444;
  background: rgba(0,0,0,.5);
  position              : relative;
  margin                : 0 1px;
  -moz-border-radius    : 3px;
  -webkit-border-radius : 3px;  
  border-radius         : 3px;
}
.nano:hover > .pane, .pane.active, .pane.flashed {
  visibility : visible\9; /* Target only IE7 and IE8 with this hack */
  opacity    : 0.99;
}