@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

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

  .bcsc-icon {
  	font-family: "bcscicons";
    display: inline-block;
    font: normal normal normal 14px/1 bcscicons;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

span.bcsc-icon.bcsc-bcorp:before {
	font: normal 20px/1 'bcscicons';
	padding: 0;
	vertical-align: top;
	margin-left: -2px;
	padding-right: 2px;
  content: '\e829';
}

.bcsc-placeholder { height:48px; margin-bottom:0; border: 1px dashed #b4b9be; }
.bcsc-editor-button {width:84px; height:64px; padding-top:4px; margin: 1px 1px 0 0; border:1px solid; color:black;  float:left; font-size:12px; line-height: 1em; background-color:white; text-align:center}
.bcsc-editor-button img {width:30px; height:30px;}
.bcsc-element-list, .bcsc-icon-list {padding-left:3px; position:absolute; top:49px; bottom:0; right:-14px; width:100%; font-size:50px; overflow-x:hidden; overflow-y:scroll;}
.bcsc-icon-list span { float:left; margin:2px; border:1px solid black; line-height:0.7em;}

[data-icon]:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[data-icon]:before { font-family: "FontAwesome"; content: attr(data-icon); }

.bcsc-header-icon { float:left; font-size:54px;}
.bcsc-select-icon {font-size:16px;}
.bcsc-select-icon-icon {font-size:36px;}
.bcsc-icon-placeholder {font-size:100px; line-height:.8em;}
.bcsc-image-selector { width:150px; text-align:center;}
.bcsc-image-placeholder { font-family: "bcscicons"; margin:3px auto; color: #888; text-align:center; font-size:75px; width:150px; height:150px; line-height:150px; display:block; border:2px; border-style:solid; border-color: #888; border-radius:5px;}
.bcsc-gallery-placeholder > img { width:75px; height:75px; }

.bcsc-code-area {width:100%; height:350px;}

.bcsc-color-picker { width:80px;}
.bcsc-iris-color-picker-container {position:relative; z-index:100;}
.bcsc-iris-color-picker-placeholder {position:absolute; top:5px; }
.bcsc-iris-color-picker-swatch {height:21px; width:25px; float:left; margin: 2px 5px 2px 0px; }
.bcsc-iris-color-picker-button {padding: 0 5px 0 0; margin:0; position:relative; bottom:2px;  line-height:1.8em !important; font-size:.9em !important;}
.bcsc-iris-color-picker-clear-color { margin:0; height:25px; position:relative; bottom:1px; padding:0 5px 0 5px; line-height:1.8em !important; font-size:.9em !important;}

/************************************************ Dialog ************************************************/

#bcsc-dialog-overlay { position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%; background: #000; display: none; }
.bcsc-dialog { overflow:hidden; display: none; position: fixed; opacity: 1; z-index: 11000;  height:80%; top:10%; background-color:white;
                               width:70%;  left:15%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border:1px solid #aaa;}
@media screen and (max-width: 1200px) { .bcsc-dialog { width:80%; left:10%; } }
@media screen and (max-width: 1024px) { .bcsc-dialog { width:90%; left:5%; } }
@media screen and (max-width: 767px) { .bcsc-dialog { width:96%; left:2%; top:50px; } }
.bcsc-dialog-tabbed {overflow-x:hidden; overflow-y:scroll; position:absolute; top:45px; bottom:51px; left:0px; right:-14px; padding:8px; }
.bcsc-dialog-tabbed label { font-weight:bold; }
.bcsc-dialog-tab ul { margin:0; }
.bcsc-dialog-tab li {display:inline; background-color:#f8f8f8; padding:15px; margin-top:10px; border-right:1px solid #ccc; border-bottom:1px solid #ccc;}
.bcsc-dialog-tab li.bcorp-active {background-color:white; border-bottom-color:white;}
.bcsc-dialog-buttons {position:absolute; bottom:0; background-color:#eee; left:0; right:0; text-align:right; padding:10px;
                      border-top:1px solid #ccc; }
.bcsc-dialog-buttons button {width:100px; }
.bcsc-dialog-tab {  background-color:#eee; height:33px;padding-top:12px; border-bottom:1px solid #ccc;}
.bcsc-dialog-tab a {text-decoration:none;}
.bcsc-dialog-textfield {width:100%;}
.bcsc-description { font-style:italic; color:#777}
.bcsc-dialog-cancel {position:absolute; right:10px; top:10px; font-size:2em; }
.bcsc-dialog-header {position:absolute; top:0; height:45px; background-color:#eee; left:0; right:0;border-bottom:1px solid #ccc; padding-left:10px;}

/************************************************ Animations ************************************************/

@-webkit-keyframes zoomIn {
  from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3);  }
  50% { opacity: 1; }
}

@keyframes zoomIn {
  from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3);  }
  50% { opacity: 1; }
}

.bcsc-element, .zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
  -webkit-animation-duration: 300ms;
  -moz-animation-duration: 300ms;
  -o-animation-duration: 300ms;
  animation-duration: 300ms;
}

.bcsc-element {
  -webkit-transition:width linear 200ms;
  -moz-transition:width linear 200ms;
  -ms-transition:width linear 200ms;
  -o-transition:width linear 200ms;
  transition:width linear 200ms;
}
.bcsc-helper {
  -webkit-transition:width linear 200ms;
  -moz-transition:width linear 200ms;
  -ms-transition:width linear 200ms;
  -o-transition:width linear 200ms;
  transition:width linear 200ms;
  -webkit-transition:height linear 200ms;
  -moz-transition:height linear 200ms;
  -ms-transition:height linear 200ms;
  -o-transition:height linear 200ms;
  transition:height linear 200ms;
}

@-webkit-keyframes zoomOut {
  from { opacity: 1; }
  50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); }
  to { opacity: 0; }
}

@keyframes zoomOut {
  from { opacity: 1; }
  50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); }
  to { opacity: 0; }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
  -webkit-animation-duration: 300ms;
  -moz-animation-duration: 300ms;
  -o-animation-duration: 300ms;
  animation-duration: 300ms;
}