body {  background: #F4EED7; font-family: Futura,Trebuchet MS,Arial,sans-serif; overflow-y: hidden; -webkit-font-smoothing: antialiased!important; font-smoothing: antialiased;}
select {background:transparent;}
hr.silent { border-top: none; }
hr { border-top: 1px solid rgba(255,255,255,0.2); }
.flaticon { font-size: 16px; }

[ng-click],
[ng-really-click] { cursor: pointer; }

.topstrip { background: #F4EED7; color: #2CA05A; padding: 24px 0; position: fixed; left: 0; right: 0; z-index: 1; }
.topstrip ul { margin: 0; padding: 0;  text-align: center; list-style: none; }
.topstrip  a {  color: #2Ca05A; }
.topstrip a:hover {  color: #333; text-decoration: none; }
.topstrip  li  a {  color: #2Ca05A;  text-transform: uppercase; font-size: 120%; margin-left: 1.5em; }
.topstrip  li  a.magnify { margin-left: .5em; color: #2c2f3d; transition: all ease .3s; }
.topstrip  li  a.magnify:hover { color: #2CA05A; }
.topstrip  li  a.magnify.zoomin { margin-left: 2em !important; }
.topstrip a.link-home { margin-left: 1em; }
.topstrip a.link-options { margin-right: 1em; }
.topstrip a.link-help { margin-right: 1em; }
.topstrip a.link-upgrade { margin-right: 1em; }

body.v3-1 .topstrip { margin: 0 0 0 0; padding: 0; background: transparent; position: absolute; top: 1em; left: 1em; z-index: 1; width: 300px; }
body.v3-1 .topstrip a { display: inline-block; padding-right: 1em; }

/* .page { min-height: 60vh; margin-top: -55px; } */
.logo img { width: 100%; }
.tab-content { padding: 2em 0; }
.padding { padding: 0 1em; }
.sidebar { background: #2ca05a; color: #fff; position: fixed; overflow-y: auto; height: 100%; width: 440px; margin: 30px 0 0 10px; padding: 1em 0 5em 0; border-top-left-radius: 5px; }
.sidebar a { color: #fff; }
body.builder .sidebar { background: #53676C; }
body.v3-1 .sidebar { margin-top: 50px; }

.preview { margin-left: 450px; margin-top: 25px; border-radius: 5px;  border: none; border-radius: 5px; height: auto; display: block; }
body.v3-1 .preview { margin-top: 0px; }
.preview.pdf { width: 812px; }
.preview.pdf .page { min-height: 1056px; }
.sidebar form.sideFormMain { display: block; padding-bottom: 10em; }
.preview-area { background: #4d4d4d; margin-top: -10px; border-top-left-radius: 5px;}
div.toolbar { padding: 0; width: 100%; margin: 0; border-top-left-radius: 5px; position: relative; }
div.toolbar ul { margin: 0; padding: 0; display: flex; }
div.toolbar ul.right { position: absolute; top: 0; right: 0; }
div.toolbar ul li { display: inline-block; margin: 0; padding: 0; }
div.toolbar ul li a { color: #fff; padding: 1em; margin: 0;  display: inline-block; vertical-align: middle;}
div.toolbar ul li a:hover { cursor: pointer; text-decoration: none; background: rgba(255,255,255,0.1); }
div.toolbar ul.right a.right { border: none; }

.modal-content.dstyles{padding:0;}
.modal-header.dstyles h4{color:#2ca05a; font-size: 2em;}
.modal-header.dstyles p{font-size: 1.2em; text-align: center; }
.modal-body.dstyles ul.colors img{border:1px solid #ececec;}

.no-select { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.nav-tabs { border: none; margin: -1em 0 1em 0; border-radius: 5px; position: fixed; z-index: 1; width: auto; display: inline-block; z-index: 1054; }
.nav-tabs li { text-align: center; border-right:1px solid #525873;}
/* .nav-tabs li:after { */
/* position: absolute; top: 0; right: -9px; */
/* z-index: 1; */
/* content: ' '; */
/* width: 0; */
/* height: 0; */
/* border-style: solid; */
/* border-width: 30px 0 30px 9px; */
/* border-color: transparent transparent transparent #2c2f3d; */
/*  */
/* } */

.nav-tabs li:after { display: none; }
/* .nav-tabs li:hover:after {   */
/* cursor: pointer; */
/* border-color: transparent transparent transparent #2ca05a; */
/* } */
/* .nav-tabs li.active:after {   */
/* cursor: pointer; */
/* border-color: transparent transparent transparent #2ca05a; */
/* } */
/* .nav-tabs li.active:hover:after {   */
/* cursor: pointer; */
/* border-color: transparent transparent transparent #fff; */
/* } */

/* .nav-tabs li.tab-4:after { content: ''; border: none;} */
/* .nav-tabs li { display: none; } */
.nav-tabs li { background: #2c2f3d; width: 106px; font-size: 95%; position: relative; }
.nav-tabs li:first-child { border-top-left-radius: 5px;}
.nav-tabs li a { margin: 0; color: #b3b3b3; padding: 20px 15px; }
.nav-tabs li a:hover { color: #FFCC33; background-color: #2C2F3D;}
.nav-tabs li.active,
.nav-tabs li.active a { background: #2ca05a; color: #FFCC33; }
body.builder .nav-tabs li.active,
body.builder .nav-tabs li.active a { background: #53676C; color: #FFCC33; }

.nav-tabs li:first-child a:hover { color: #FFCC33; border-top-left-radius: 5px; }
.tab-0.active:hover a  { background-color: #2CA05A !important; border-bottom-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; cursor: pointer; }
.nav-tabs > li > a { border: none; 
border-radius: 0; }
.nav-tabs li.active:hover a { border-color: transparent; }
.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:hover, 
.nav-tabs > li.active > a:focus {border: none;}
.nav-tabs > li.active:first-child > a, 
.nav-tabs > li.active:first-child > a:hover, 
.nav-tabs > li.active:first-child > a:focus {
border-radius: 5px;
}
.nav-tabs > li.active > a:hover{background: #2ca05a; color:#ffcc33;}
body.builder .nav-tabs > li.active > a:hover{background: #53676C !important; color:#ffcc33 !important;}

.tab-pane { margin-top: 3em; }

.help { margin: 0 0 2em 0; padding: 1em; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); font-size: 110%; }
.help { display: none; }


.nav-stacked > li + li { margin-top: 0; }
.nav-pages li {  font-size: 16px; width: 100%; display: block; clear: both;  position: relative; }
.nav-pages li a { border-radius: 0!important; border-bottom: 1px solid rgba(0,0,0,0.1);}
.nav-pages li a { margin: 0; text-indent: 0 !important; width: 100%; display: block; clear: both;  }
.nav-pages li span.page-title { display: block; width: 85%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-pages li.active a { background: transparent; color: #FFCC33; font-weight: normal;  }
.nav-pages li:hover a { background: rgba(0,0,0,0.1); }
.nav-pages li.active a { background: rgba(0,0,0,0.05); }
.nav-pages li.active:hover a { background: rgba(0,0,0,0.1); color: #FFCC33; }
.nav-pages span.icon-delete { color: rgba(0,0,0,0.2); position: absolute; top: .5em; right: 1em; }
.nav-pages span.icon-delete:hover { color: #c9302c; }
.nav-pages span.icon-duplicate{ color: rgba(0,0,0,0.2); position: absolute; top: .5em; right: 2em;  }
.nav-pages span.icon-duplicate:hover { color: rgba(0,0,0,0.7); }
.nav-pages span.icon-duplicate { margin-right: 10px; }

.news-list { margin: 2em 0; }
.nav-news li { padding: 0; font-size: 90%; }

.btn { font-size: 110%; border-radius: 5px; }
.btn:hover { color: #2ca05a; }
.btn-add { background: #ffcc33; color: #2c2f3d; margin-bottom: 1em; text-transform: uppercase; width: 100%; margin: 2em 0 0 1em; text-align: left; border-top-right-radius: 0; border-bottom-right-radius: 5px; }
.btn-dismiss { background: #ffcc33; color: #2c2f3d; }
.btn-beacon { background: #ffcc33; color: #2c2f3d; margin-bottom: 0em; }
.btn-focus { margin-top: 10px; color: #2c2f3d; background: #fff; border: 0; font-size: 90%; padding: 3px 1em; border-radius: 5px; }
.btn.selected { border: 1px solid #fc3; }

.font { width: 170px; display: inline-block; background-repeat: no-repeat; background-position: top left; text-align: center;  margin: 0 1px 10px 0; }
.font .thumb { width: 165px; height: 98px; margin-bottom: 5px; border: 1px solid #2ca05a; }
body.builder .font .thumb { border: 1px solid transparent; }
body.builder .font.active .thumb { border: 1px solid #fc3; }
.font.active .thumb { border: 1px solid #fc3; }

.colorscheme { display: inline-block; width: 180px; margin: 0 0px 16px 0; text-align: left; }
.colorscheme:nth-child(odd){margin-right: 18px;}
body.builder .colorscheme:nth-child(odd){margin-right: 12px;}
.colorscheme .thumb { display: block; width: 180px; height: 45px; margin-bottom: 5px; border: 1px solid transparent; }
.colorscheme.active .thumb { border: 1px solid #fc3; }

.bgcolor { height: 2em; width: 1em; display: inline-block; border: 2px solid #fff; }
.bgcolor:hover { border: 2px solid #666; }
.bgcolor.active { border: 2px solid #222; }

.theme-wrap { text-align: center; margin-bottom: 1em;}
.theme { border: 2px solid #2ca05a; margin-bottom: .4em;  font-weight: normal; }
body.builder .theme { border: 2px solid transparent; }
.theme-wrap.active .theme,
.theme-wrap.active .theme:hover { border: 2px solid #ffcc33; color: orange; }
.theme-wrap:nth-child(3n) {
clear: right;
}
.reorder { opacity: 0.3; }
.reorder:hover { cursor: move; }

p.toggle-menu { margin-bottom: 2em; font-size: 110%; }
p.toggle-menu a { color: #fff; padding: .3em .8em; border-radius: 4px; }
p.toggle-menu a.active { background: rgba(0,0,0,0.5); position: relative; }
p.toggle-menu a.active:after { position: absolute; bottom: -9px; left: 40%; content: ''; 
width: 0;
height: 0;
border-style: solid;
border-width: 10px 7px 0 7px;
border-color: rgba(0,0,0,0.5) transparent transparent transparent;
}

[data-ng-click]:hover,
[ng-click]:hover { cursor: pointer; }

.preview { position: relative; padding-top: 20px;}
.controls { position: fixed; font-size: 130%; top: 75px; right: 0px; display: block;  margin: 0; z-index: 1000000;}
.controls a { display: inline-block; background: #2c2f3d; color: #fff; margin: 0; width: 50px; height: 50px; position: relative;  }
.controls a .flaticon { font-size: 26px; position: absolute; top: 8px; left: 8px; }
.controls a.left { border-right: 1px solid rgba(255,255,255,0.2); margin-right: -5px; }
.controls a:hover { cursor: pointer; background: #666; text-decoration: none; }

/* .magnify {  position: fixed; font-size: 130%; top: 120px; right: 0px; display: block;  margin: 0; z-index: 1000000; } */

.redactor-editor { color: #000;  padding: 5px 10px; }
/* @deprecated, redactor <10 */
.redactor_editor div, .redactor_editor p, .redactor_editor ul, .redactor_editor ol, .redactor_editor table, .redactor_editor dl, .redactor_editor blockquote, .redactor_editor pre {
color: #000;
}
/* .redactor-toolbar.black { background: #000; color: #fff; } */
/* .redactor-toolbar.black a { color: #fff; } */

.form-group { margin-bottom: 1.5em; }
.form-group label { font-size: 18px; font-weight: normal; }
.form-group.color label { font-size: 14px; font-weight: normal; }
.form-control { border: none; border-radius: 0; color: #808080; font-size: 16px; }

.redactor_box { width: 100%; color: #000; }
.redactor_box a { color: #000; }

img.thumbnail { border-radius: 0; margin: 1em 0 .5em 0; float: left; max-width: 150px; }
img.thumbnail.logo { border: none; background: transparent; }
.fadein { opacity: 0.5; transition: all 0.4s linear; }
.fadein:hover { opacity: 1;  }
.change-focus { margin: 1em 0 0 1em;  display: inline-block; }
.tooltip-inner { font-size: 120%; padding: .5em; }

.modal-dialog { width: 800px; }
.modal-content { padding: 0; }
.modal-body, .modal-footer { background-color: #fff; }
.modal-footer {
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}
.modal-dialog.modal-lg { width: 98% !important; margin: 1em auto; }
.modal-dialog.modal-lg .modal-content { width: 98% !important; margin: 1em auto; }
.modal-content { box-shadow: none !important; border: none !important; }
.modal-content h3 { font-weight: normal; font-size: 26px; color: #fff; }
.modal-content h4 { font-weight: normal; font-size: 20px; color: #808080; }
.modal-content .form-group  { margin: 2em 0; padding: 22px 12px; }
.modal-content .form-group input { border: 1px solid #ccc; }
.modal-content .form-group input:focus { border: 1px solid #ccc;  }
.modal-content .modal-controls { margin-bottom: 3em; display: block; width: 100%;}
.modal-content a.control .flaticon { font-size: 26px; color: #b3b3b3; }
.modal-content a.control:hover { text-decoration: none; color: #2ca05a; }
.modal-content a.control:hover .flaticon { text-decoration: none; color: #2ca05a; }
.modal-content form { margin-bottom: 2em; }

.modal-dialog.modal-sm { background: transparent; width: 816px; margin: 1em auto; padding: 0;  }
.modal-dialog.modal-sm .modal-content { border: none; padding: 0; background: transparent; width: 816px; margin: 1em auto; }
.modal-dialog.modal-sm .modal-content a.close { color: #fff; opacity: 1; margin-bottom: 10px; }

.settings-modal { background: #53676C; height: 100vh; width: 100%; margin: 0; }
body.builder.settings .modal.fade { background: #53676C; }
.settings-modal p.lg { color: #fff; font-size: 130%; }
body.builder p.lg { font-size: 130%; }


.settings-modal .modal-header { background: #53676C; border-bottom: none; }
.settings-modal .modal-header .close {color: #fff; }
.settings-modal .modal-header h3 { color: #fc3; }
.settings-modal .modal-body { background: #53676C; color: #fff; }

.settings-modal .form-group { padding: 2px; margin: 0 0 2em 0; }
.settings-modal .form-group.pull-left { width: 40%; margin-right: 5px; }
.settings-modal li.dropdown a { background: #fff; color: #000; border-radius: 5px; width: 300px; }

.settings-modal a.remove-logo { display: block; margin-top: 1em; color: #fff; }

img.point-of-focus:hover { cursor: crosshair; }
.image-wrap { position: relative; }
.image-wrap .focus { position: absolute; top: -50%; left: -50%; width: 26px; height: 26px; background: #f00; border-radius: 100px; border: 2px solid #fff; opacity: 0.5; }

input.checkbox { width: 20px; float: left; margin: -3px .5em 0 0; }

/* add page modal specific */
.add-page { padding: 20px 50px; border-radius: 5px; }
.add-page a { color: #333; }
/* .add-page h3 { font-weight: normal; font-size: 200%; } */
.add-page .step1 h3 { text-align: center; }
.step2 { padding-bottom: 2em; }
.add-page ul.page-types  { margin:20px 0 0 0; padding:0; display: inline-block; }
.add-page ul.page-types li { display: inline-block; }
.add-page ul.page-types li a { display: inline-block; text-align: center; width: 120px; margin-right: 40px; color: #2CA05A; float: left;position: relative; }
.add-page ul.page-types li img { width: 130px; height: 120px; }
.add-page ul.page-types li a .description { position: absolute; top: 0; left: 0; width: 130px; height: 120px; opacity: 0; background: #2ca05a; color: #fff; transition: .2s linear all;  }
.add-page ul.page-types li a .description p { text-align: left; padding: 1em; }
.add-page ul.page-types li a:hover > .description { opacity: 1; }
.add-page ul.page-types li a span { display: inline-block; padding-top: .7em; }
.add-page form { padding: 0; }
.page-desc { float: right; margin-left: 2em; background: #fc3; padding: 1em; height: 120px; width: 300px; }

.document-style {}
.document-style li { width: 18.5%; margin: 0 1% 1em 0; border: 1px solid rgba(0,0,0,0.1); padding: 3px; }
.document-style.colors li { border-color: #fff; }
.document-style li.active { border-color: #ffcc33 !important; }
.document-style li b { display: block; clear: both; text-align: left; }

.nav.style-cats { font-size: 150%; display: inline-block;}
.nav.style-cats li a { background-color: #eee; color: #000; }
.nav.style-cats li.active a { background-color: #2CA05A; color: #fff; }
p a.active { color: yellow; }

.ui-notification{position:fixed;z-index:9999;top:-100px;right:10px;width:300px; cursor:pointer;-webkit-transition:all ease .5s;-o-transition:all ease .5s;transition:all ease .5s;color:#fff;background:#428bca;box-shadow:5px 5px 10px rgba(0,0,0,.3)}
.ui-notification.killed{-webkit-transition:opacity ease 1s;-o-transition:opacity ease 1s;transition:opacity ease 1s;opacity:0}
.ui-notification>h3{font-size:14px;font-weight:700;display:block;margin:10px 10px 0;padding:0 0 5px;text-align:left;border-bottom:1px solid rgba(255,255,255,.3)}
.ui-notification a{color:#fff}
.ui-notification a:hover{text-decoration:underline}
.ui-notification>.message{margin:10px}.ui-notification.warning{color:#fff;background:#f0ad4e}
.ui-notification.error{color:#fff;background:#d9534f}
.ui-notification.success{color:#fff;background:#5cb85c}
.ui-notification.info{color:#fff;background:#5bc0de}
.ui-notification:hover{opacity:.7}

.redactor-editor a { color: #15c; text-decoration: underline; }
.half { width: 50%; float: left;  }

.toggle-title { color: #000; }


.login-modal .modal-dialog { position: relative;  }
.login-modal .modal-dialog { margin-top: 80px; padding: 0; width: 400px; }
.login-modal .modal-content { background: #fc3; padding 0 !important; }
.login-modal .modal-body { padding 0; }
.login-modal .modal-header { border: none; }
.login-modal .modal-footer { border: none; padding-bottom: 3em; }
.login-modal .error { font-weight: bold; color: #c20; }
.login-modal .form { font-size: 80% !important; }
.login-modal .form-group { margin: 0 0 1em 0; padding: 0; }
.login-modal button { background: #333; color: #fff; border: #000; margin-bottom: 2em; font-size: 140%; }
.login-modal button:hover { background: #000; color: #fff; border: #000; }
.login-modal h4 { text-transform: uppercase; color: #000; }
.login-modal input { width: 90%; padding: 8px 5px; border-radius: 3px; border: none; color: #666; font-size: 90%; }
.login-modal hr { border-top: 1px solid #000; }
.login-modal a, .login-modal p a { color: #000; }

.share-modal .modal-dialog { position: relative;  }
.share-modal .modal-dialog .arrow { width: 30px; height: 30px; top: -15px; left: 45%; background: #fc3; display: block; position: absolute;   transform: rotate(45deg);}
.share-modal .modal-dialog { margin-top: 80px; padding: 0; width: 800px; }
.share-modal .modal-content { background: #fc3; padding 0 !important; }
.share-modal .modal-body { padding 0; }
.share-modal .modal-header { border: none; }
.share-modal .modal-footer { border: none; padding-bottom: 3em; }
.share-modal h4 { text-transform: uppercase; color: #000; }
.share-modal input { width: 90%; padding: 8px 5px; border-radius: 3px; border: none; color: #666; font-size: 90%; }
.share-modal hr { border-top: 1px solid #000; }
.share-modal a, .share-modal p a { color: #000; }

.styles-modal .modal-dialog {
width: 900px; margin: 1em auto;
}

ul.social { list-style: none; margin: 0; padding: 0; }
ul.social li { margin: 0; padding: 0; display: inline-block; }
ul.social li a { padding: 7px 6px; margin: 0 5px 10px 0; display: inline-block; width: 120px; background: #333; color: #fff; text-align: center; border-radius: 2px; }
ul.social li.twitter a { background: #00ccff; }
ul.social li.facebook a { background: #2c5aa0; }
ul.social li.linkedin a { background: #2a7fff; }
ul.social li.googleplus a { background: #333333; }

.background-settings { margin-top: 2em; display: block; }
.background-settings label { font-size: 120%; padding-left: 0.5em; font-weight: normal; }

input[type="radio"]:checked + label { color:#fc3; }

.palette { display: inline-block; clear: none; margin: 0 0 16px 0; position: relative; }
.palette .options { display: none; position: absolute; bottom: 0; right: 0; }
.palette:hover .options { display: block; }
.palette:nth-child(odd) { margin-right: 18px; }
.palette ul { list-style: none; margin: 0; padding: 0; display: block; float: left; border: 1px solid transparent; }
.palette.active ul { border: 1px solid #fc3; }
.palette ul li { display: inline-block; float: left; width: 45px; height: 45px; margin: 0; padding: 0; }
.form-group.color { position: relative; }
/* .edit-cols {} */
/* .edit-cols input { display: inline-block; margin: 0; border: 0; padding: 2px; height: 35px; } */
/* input.preview-box { width: 35px; text-indent: -999em; } */
/* input.preview-box:hover { cursor: pointer; } */
/* input.edit-box {width: 130px; margin-left: -5px; padding-left: 10px; } */
/* input.edit-box:hover { cursor: text; } */
/*  */
/* .form-group.color input.black { color: #000; } */
/* .form-group.color input.white { color: #fff; } */
/* .form-group.color span { position: absolute; display:block; top: 30px; left: 0; width: 30px; height: 34px; } */
.font-size { font-size: 120%; margin-bottom: 1.5em;  }
.font-size .input-wrap { position: relative; display: inline-block; }
.font-size .input-wrap span { position: absolute; top: 3px; right: 10px; color: #999; }
.font-size input { color: #000; width: 60px; border: 3px solid #fff; }
.btn-palette { background-color: rgba(0,0,0,0.2); vertical-align: top; height: 45px; }
.btn-palette.creating-palette { background: #fff url(../i/loading.gif) 5px 50% no-repeat; color: #000;  padding-left: 50px; }
.btn-palette.creating-palette .glyphicon { display: none; }

.btn-font-size { color: #000; background: #fff; padding: 5px; border: none; }
.btn-change-font-size { border: none; padding: 5px 10px; background: rgba(0,0,0,0.2); font-weight: bold; }

.sp-block {  }
.sp-block label { clear: both; width: 100%; font-size: 90%; }
.sp-block.normal label { font-size: 130% !important; }
.sp-block .sp-replacer { clear: both; width: 100%; border: none; background: #fff; padding: 5px; border-radius: 3px; }
body.builder .sp-block .sp-replacer { width: 170px; }
.sp-block .sp-preview { width: 140px; border: none; }
.sp-block .sp-preview-inner { border: none; border-radius: 3px; }
.sp-container { border: 1px solid rgba(0,0,0,0.1); border-radius: 5px; background: #fff; }
.sp-choose { background: #fc3 !important; border: none !important; text-shadow: none !important; }

#jquery-colour-picker { width: 250px !important; }

.btn-save {}
.btn-save.saving-palette { background: #fff url(../i/loading.gif) 5px 50% no-repeat; padding-left: 50px; }

.font-custom { position: relative; width: 170px; display: inline-block; float: left; margin: 0 10px 20px 0; }
.font-custom .options { position: absolute; top: 1px; right: 1px; display: none; background: #000; padding: 3px; }
.font-custom:hover > .options { display: block; }
.font-preview { background: #fff; color: #000; position: relative; padding: 1.3em 1em; border: 1px solid transparent; }
.font-preview.active { border-color: #fc3;  }
.font-custom b { text-align: center; width: 100%; display: block; padding-top: .3em; font-weight: normal; }

.font-selector { display: block; }
.font-selector label { margin-top: 1em; }
.font-selector label:first-letter { text-transform: uppercase; }
.font-selector li { display: block; }
.font-selector li.dropdown a { background: #fff; color: #000; width: 350px; font-size: 120%; display: block; border-radius: 3px; position: relative; }
.font-selector li.dropdown a span.flaticon { position: absolute; right: 5px; top: 12px; font-size: 30px; opacity: 0.3; }
.font-selector li.dropdown li a { margin: 0; border-radius: 0; }
.font-selector li.dropdown li.active a { color: #2ca05a; }
.font-selector li.dropdown li a:hover { background: #ececec; color: #000; }


a.bg-position { display: block; }
a.bg-position.active { color: #fc3; }


/* fixes issue with modal bg not appearing in bootstrap 3.3.1 */
html { height: 100%; }
body { min-height: 100%; }

.modal-backdrop { bottom: 0; min-height: 200vh; }
.modal-backdrop.fade.in { opacity: .7; }

.fader.ng-hide-add {
  opacity: 1.0;
  display: block !important;
  transition: opacity 1s;
}

.fader.ng-hide-add-active {
  opacity: 0;
}

/* http://codepen.io/MattIn4D/pen/LiKFC */
/* Absolute Center CSS Spinner */
.saving.inactive { display: none; }
.saving {
  position: fixed;
  z-index: 9999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #fff;
  font-size: 300%;
}

/* Transparent Overlay */
.saving:before {
  content: 'SAVING';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  padding: 1em 0 0 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
}

/* :not(:required) hides these rules from IE9 and below */
.saving:not(:required) {
}

.saving:after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: 0;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(255, 255, 255, 255.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.5) -1.5em 0 0 0, rgba(255, 255, 255, 0.5) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(255, 255, 255, 255.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.5) -1.5em 0 0 0, rgba(255, 255, 255, 0.5) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/*  */

/* when hiding the thing */
.form-frag.ng-hide-add         { 
  /* -webkit-animation:0.1s fadeOut ease;  */
  /* animation:0.1s fadeOut ease;  */
}

/* when showing the thing */
.form-frag.ng-hide-remove      { 
  -webkit-animation:0.5s bounceInRight ease; 
  animation:0.5s bounceInRight ease; 
}

/* when hiding the thing */
.list-frag.ng-hide-add         { 
  /* -webkit-animation:0.1s fadeOut ease;  */
  /* animation:0.1s fadeOut ease;  */
}

/* when showing the thing */
.list-frag.ng-hide-remove      { 
  -webkit-animation:0.5s bounceInLeft ease; 
  animation:0.5s bounceInLeft ease; 
}