@font-face {
  font-family: 'visiblecontrol';
  src: url('visiblecontrol.woff') format('woff'),
       url('visiblecontrol.woff2') format('woff2');
  unicode-range: U+0020;
}

/**********************
*  		TRANSITION	  *
**********************/

a, a:link, a:visited, a:focus, a:hover, a:active, .blox, .link, button, .button, .tab-button, input, .control-group, .sidebar-menu, .sidebar-menu--content, .menu-action, .button-arrow{
	-webkit-transition: color 0.2s ease,
						background-color 0.2s ease,
						border-color 0.2s ease;
	-moz-transition: 	color 0.2s ease,
						background-color 0.2s ease,
						border-color 0.2s ease;
	-o-transition: 		color 0.2s ease,
						background-color 0.2s ease,
						border-color 0.2s ease;
	-ms-transition: 	color 0.2s ease,
						background-color 0.2s ease,
						border-color 0.2s ease;
	transition: 		color 0.2s ease,
						background-color 0.2s ease,
						border-color 0.2s ease;
}
.navi-item a, 
.navi-item.file a .iconwrapper,
.navi-item.folder a .iconwrapper,
.navi-item.file a .movewrapper,
.navi-item.folder a .movewrapper{
	-webkit-transition: all 0.1s ease;
	-moz-transition: all 0.1s ease;
	-o-transition: all 0.1s ease;
	-ms-transition: all 0.1s ease;
	transition: all 0.1s ease;	
}
/********************
*  	TACHYONS 	    *
********************/

.tm-red{
	color:#e0474c;
}
.bg-tm-red{
	background:#e0474c;
}
.b--tm-red{
	border-color: #e0474c;
}
.hover-tm-red:hover{
	color:#e0474c;
}
.hover-bg-tm-red:hover{
	background:#e0474c;
}
.hover-b--tm-red:hover{
	border-color:#e0474c;
}
.tm-green{
	color:#66b0a3;
}
.bg-tm-green{
	background:#66b0a3;
}
.b--tm-green{
	border-color:#66b0a3;
}
.hover-tm-green:hover{
	color:#66b0a3;
}
.hover-bg-tm-green:hover{
	background:#66b0a3;
}
.hover-b--tm-green:hover,.hover-b--tm-green.active{
	border-color:#66b0a3;
}
.hover-bg-white.active{
	background-color: #fff;
}
.tm-gray{
	color:#f9f8f6;
}
.bg-tm-gray{
	background:#f9f8f6;
}
.b--tm-gray{
	border-color:#f9f8f6;
}
.hover-tm-gray:hover{
	color:#f9f8f6;
}
.hover-bg-tm-gray:hover{
	background:#f9f8f6;
}
.hover-b--tm-gray:hover,.hover-b--tm-gray.active{
	border-color:#f9f8f6;
}

/*
.w-100{
	width:100%!important;
}
*/
.w-100{
	width:100%;
}
.w-15{
	width: 15%;
}
.w-29{
	width: 29%;
}
.w-95{
	width:95%;
}
.w6{
	width: 22rem;
}
.h0{
	height: 0;
}
.h6{
	height: 22rem;
}
.mw6{
	max-width:22rem;
}
.max-h6{
	max-height: 22rem;
}
.shadow-tm{
	box-shadow: 0 0 2px 1px rgba(0,0,0,.1);
}
.bg-chess{
	background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
 	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
input.upload{
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
}
.top-3{
	top: 3rem;
}
.list-enter-active, .list-leave-active {
  transition: all .3s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.imgsizes::after{
	content: "px";
	margin-left: -30px;
	color: #ddd;
	font-weight: bold;
}

/* fix wrong text-align/family */
input, textarea, button {font-family: arial, sans-serif}

.shortcode-alert{
	color: red;
}

/****************************
*  	download-commponent		*
****************************/

a.tm-download
{
	line-height: 35px;
	margin-left: 40px;
}
a.tm-download::before{
	content: '\2193';
	position: absolute;
	margin-left: -40px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-family: Calibri, "Segoe UI", Roboto, Courier, Helvetica, -apple-system, BlinkMacSystemFont, sans-serif, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 1.3em;
	font-weight: 900;	
	border: 2px solid #e0474c;
	border-radius: 50%;
	text-align: center;
	text-decoration: none;
}
a.tm-download:hover::before{
	text-decoration: none;
	color: #fff;
	background: #e0474c;
}

a.tm-heading-anchor {
    display: none;
    position: absolute;
    top: 0;
    left: -1em;
    width: 1em;
    opacity: 0;
}

/********************
*  	COMMONS 	    *
********************/

html,body{
	padding: 0;
	margin:0;
}
body{
	background: #f9f8f6; 
	color: #444;
	font-size: 16px;
}
body,input,select,textarea{
	font-family: Helvetica, Calibri, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
}

header, nav, h1, h2, h3, h4, h5, h6{
	font-family: arial, sans-serif;
}
h1{ font-size: 1.8em; margin: 1em 0 0.8em; font-weight: 700; }
h2{ font-size: 1.6em; margin: 1em 0 0.8em; font-weight: 700; }
h3{	font-size: 1em; margin: 0.6em 0 0.6em; text-transform: uppercase; font-weight: 300; }
.main{
	margin: 0px auto;
	box-sizing:border-box;
	padding: 20px;
}
section{
	background: #FFFFFF; 
	box-shadow: 0 4px 4px #ddd; 
	position: relative;
	margin-bottom: 40px;
	padding: 20px 5px 40px;
	box-sizing: border-box;
}
article{
	width: 100%;
}
aside.sidebar{
	display: block;
	width: 100%;
	background: #fff;
	margin-bottom: 50px;
	box-sizing: border-box;
}
.right{
	float: right;
}

img, figure,figure img{
	max-width: 100%;	
}
figure{
	display: table;
	margin: 2em auto;
	padding: 0;
}
figure.left{
	float: none;
}
figure.right{
	float: none;
}
figure img{
	display: block;
	margin: auto;
}
figcaption{
	display: table-caption;
	caption-side: bottom;
}

button.note1{
    background-color: #d00;
	color: #fff;
}
button.note2{
    background-color: #fb0;
	color: #fff;
}
button.note3{
    background-color: #08e;
	color: #fff;
}
button.note4{
    background-color: #00ee67;
	color: #fff;	
}

.blox-editor textarea.pl-notice{
	padding-left: 40px;
}
.notice1 {
    margin: 1em 0;
    padding: 10px 1em;
    background-color: #fdf0f0;
    border-left: 10px solid #d00;
}
.notice2 {
    margin: 1em 0;
    padding: 10px 1em;
    background-color: #fffbf0;
    border-left: 10px solid #fb0;
}
.notice3{
    margin: 1em 0;
    padding: 10px 1em;
    background-color: #f0f8fe;
    border-left: 10px solid #08e;	
}
.notice4,
.notice5,
.notice6 {
    margin: 1em 0;
    padding: 10px 1em;
    background-color: #f1fff7;
    border-left: 10px solid #00ee67;
}

/********************
* 		NAVI 		*
********************/

.main-header{
	display: inline-block;
	width: 100%;
	border-bottom: 1px solid #eee;
}
.header-navi, .main{
	margin: auto;
	max-width: 1200px;
}
.header-navi .logo{
	display: inline-block;
	font-size: 1.6em;
	font-weight: 700;
	width: 18%;
	box-sizing: border-box;
}
.header-navi .logo a{
	color: #000;
	text-decoration: none;
	line-height: 2em;
	margin-left: 10px;
}
.header-navi ul{
	display: inline-block;
	width: 80%;
	box-sizing: border-box;
	text-align: right;
	list-style: none;
	padding:0px;
	margin:0px;
	font-size: 1.2em;
}
.header-navi li{
	display: inline-block;
	padding: 0px;
	margin: 0px;
}
.navi-items a{
	color: #000;
	font-size: 0.9em;
	text-transform: uppercase;
	text-decoration: none;
	margin: 0px 5px;
	padding: 20px 0px 10px 0px;
	line-height: 2em;
	border-bottom: 3px solid transparent;
}
.navi-items a:hover, .navi-items a:focus, .navi-items a:active, .navi-items a.active{
	border-bottom: 3px solid #66b0a3;
}
.navi-items .icon{
	color: #ccc;
}

.navi-items span{
	display: none;
}

/************************
*  		MENU			*
************************/

.sidebar-menu,.sidebar-menu--content{
	max-height: 40px;
	padding: 0px 20px;
	overflow: hidden;
	box-sizing: border-box;
	font-size: 0.9em;
	text-align: center;
}
.sidebar-menu.expand{
	max-height: 500px;
}
.sidebar-menu--content.expand{
	max-height: 3000px;
}
.menu-action{
	display: block;
	width: 100%;
	height: 40px;
	text-align: center;
	line-height: 40px;
	text-transform: uppercase;
	font-weight: 300;
	cursor: pointer;	
}
ul.menu-list{
	list-style: none;
	margin: 5px 0 30px;
	padding:0;
}
li.menu-item{
	padding: 0;
	margin: 8px 0;	
}
.menu-item a, .menu-item a:link, .menu-item a:visited{
	background: #f9f8f6;
	width: 100%;
	box-sizing: border-box;
	display: inline-block;	
	text-decoration: none;
	color: #444;
	border: 1px solid #eee;
	border-radius: 3px;
	line-height: 2.3em;
}
.menu-item a:hover, .menu-item a:focus, .menu-item a:active, .menu-item a.active{
	color: #fff;
	background: #70c1b3;
}

/********************
*   CONTENT-NAVI	*
********************/
.content-navi{
	background: transparent;
	padding: 0;
	position: relative;
	text-align: left;
}
.navi-list{
	padding: 0px;
}
.navi-item{
	list-style: none;
	padding: 0px;
	position: relative;
}
.navi-item .iconwrapper{
	display: none;
	position: absolute;
	top: 0px;
	background: transparent;
	color: #ccc;
	padding: 7px 2px 7px;
	left: -24px;
	width: 20px;
	height: 16px;
}

.navi-item .status{
	position: absolute;
	width: 4px;
	height: 100%;
	max-height: 32px;
	left: -10px;
	border-top: 1px solid #f9f8f6; 
	border-bottom: 1px solid #f9f8f6;
}
.status.published{
	background:#66b0a3;
}
.status.modified{
	background: #FFA500;
}
.status.unpublished{
	background:#cc4146;
}
.foldertoggle{
	position: absolute;
	left: -55px;
	padding: 8px 5px 5px;
	top: 1px;
	color: #ccc;
}
.navi-item .movewrapper {
	position: absolute;
	right: 4px;
	top: 8px;
	color: #f9f8f6;
	color: #444;
	background: transparent;
}
.navi-item a{
	display: block;
	padding: 7px 0;
	width: 100%;
	margin-bottom: 1px;
	margin-top: 1px;
	text-decoration: none;
	color: #444;
	background: transparent;
}
.navi-item.folder a{
	font-weight: 700;
}
.navi-item.file a{
	font-weight: 300;
}
.navi-item a:focus,
.navi-item a:hover, 
.navi-item a.active{
	background:#66b0a3;
	color: #fff;
}
[class^="level-"]{
	padding-left: 80px;
	display: block;
	box-sizing: border-box;	
}
span.level-1{ padding-left: 30px; }
span.level-2{ padding-left: 40px; }
span.level-3{ padding-left: 50px; }
span.level-4{ padding-left: 60px; }
span.level-5{ padding-left: 70px; }
span.level-6{ padding-left: 80px; }

.addBaseItem{
	margin-left: -10px;
}
.addNaviItem{
	padding: 5px;
	display: block;
}
.addNaviItem .hide{
	height: 0px;
	overflow: hidden;
}
.addNaviItem a, .addNaviItem a:link, .addNaviItem a:visited{
	padding: 3px 0;
	margin: 0;
	width: auto;
	background: transparent;
	color: #e0474c;
}
.addNaviItem a:focus,.addNaviItem a:hover,.addNaviItem a:active{
	text-decoration: underline;
	background: transparent;
	color: #e0474c;	
}
.addNaviForm input{
	min-height: 0px;
	width: 100%;
	background: #fff;
	padding: 7px;
	outline: 1px solid #efefef;
}
.addNaviForm button{
	display: inline-block;
	box-sizing: border-box;
	margin: 5px 0 10px;
	padding: 5px;
	background:#66b0a3;
	color: #f9f8f6;
	width: 50%;
	border: 0px;
	border-radius: 2px;
}
.addNaviForm button.fullWidth{
	width: 100%;
}
.addNaviForm button:hover{
	background: #4D978A;
}
.addNaviForm button.b-left{
	border-right: 1px solid #f9f8f6;
}
.addNaviForm button.b-right{
	border-left: 1px solid #f9f8f6;
}
.fade-enter-active {
  transition: opacity 0.25s ease-out;
}
.fade-leave-active{
  transition: opacity 0.1s ease-out;	
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

/********************
*   	CONTENT		*
********************/

header h1, header h2{
	display: inline-block;
}
header input[type="submit"]{
	margin-top: 1.5em;
	margin-right: 10px;
	float: right;
	width: 150px;
	box-sizing:border-box;
	border: 0px;
}
h1 .version-number{
	text-transform: uppercase;
	font-size: 0.5em;
	font-weight: 300;
}
footer{
	text-align: center;
	padding: 20px 0;
}
.math{
	white-space: pre;
}

/********************
*  	SETUP FORM 	    *
********************/
.authformWrapper{
	width: 100%;
	background: #fff;
	padding: 40px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
	border-radius: 3px;
	box-sizing: border-box;
}
.setupContent{
	width: 100%;
	text-align: center;
}
.setupWrapper{
	margin-top: 8%;
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
}
.setupWrapper.extrawidth{
	max-width: 500px;
}
.setupWrapper input[type="submit"]
{
	border-radius: 0px;
	margin-bottom: 0px;
}
.setupWrapper input[type="submit"]:disabled{
	cursor: default;
	background: #f9f8f6;
	border: 2px solid #f9f8f6;
}
.setupWrapper .formElement{
	margin: 0 0 30px 0;
}

/* honeypot field */
.personal-mail{ display:none; }

/* captcha image */
img.captcha{ margin: 10px 0; }


/************************
*  	OPEN-CLOSE BUTTON	*
************************/

.button-arrow{
  width: 0; 
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-top: 5px solid #000;
  display:inline-block;
  margin-left: 5px;
}
.active .button-arrow{
	border-top: 5px solid #fff;
}
.expand .button-arrow{
  border-bottom: 5px solid #000;
  border-top: 0px solid transparent;
  margin-bottom: 5px;
}
.expand.active .button-arrow{	
	border-bottom: 5px solid #fff;
}

/*************
**  MODAL	**
*************/

.modal, .modalWindow{
	position:fixed;
	display: block;
	z-index: 9999;
	width: 100%;
	height: 100%;
	padding: 20px;
	box-sizing: border-box;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.4);
}
.modal{
	display: none;
}
.modal.show{
	display: block;
}
.modalInner{
	position: relative;
	max-width: 350px;
	margin: 10% auto;
	background: #FFF;
	padding: 50px 50px 20px 50px;
	border-radius: 3px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
.modalInner h2{
	margin-top: 0px;
}
.modalInner.wide{
	max-width: 500px;
}
.closeModal{
	position: absolute;
	top: 0px;
	right: 0px;
	font-weight: 700; 
	padding: 0.6em;
	cursor: pointer;
}
.closeModal:focus, .closeModal:hover{
	background: #f9f8f6;
}
.modal .actionLink{
	display: block;
	width: 100%;
	text-align: center;
	margin-top: -20px;
	margin-bottom: 20px;
}
a.openModal:link,a.openModal:active,a.openModal:visited{
	color: #cc4146;
	padding: 0px 20px 20px;
	text-decoration: none;
	display: block;
	margin: auto;
	text-align: center;
	width: 30%;
}
a.openModal:focus,a.openModal:hover{
	text-decoration: underline;
}

/*****************
**  USER-LIST	**
*****************/

ul.userlist{
	padding: 0;
	margin: 10px 20px 30px;
	list-style: none;
}
li.row{
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
}
li.row.header{
	display:none;
}
li.row ul{
	background: #f9f8f6;
	margin: 5px 0;
	padding: 0px;
	width: 100%;
}
li.col{
	display: inline-block;
	padding: 15px 10px;
	box-sizing: border-box;
	margin: 0px;
}
li.col.username, li.col.email, li.col.userrole, li.col.edit{
	border: 1px solid #fff;
}
li.col.username{
	border-top: 2px solid #70c1b3;
}
li.col:before{
	width: 25%;
	font-weight:900;
	display:inline-block;
}
li.col.username:before{content:"User: ";}
li.col.userrole:before{content:"Role: ";}
li.col.email:before{content:"Mail: ";}
li.col.edit:before{content:"Link: ";}
.col.username,.col.email,.col.userrole, .col.edit{
	width: 100%;
}
.userlist a, .userlist a:link, .userlist a:visited{
	color: #e0474c;
	text-decoration: none;
}
.userlist a:hover, .userlist a:focus, .userlist a:active{
	text-decoration: underline;
}

ul.pagination{
	padding: 0;
	margin: 10px 20px 30px;
	list-style: none;	
}
li.userpage{
	display: inline-block;
}
button.pagebutton{
	border: 1px solid #eee;
	margin: 1px;
	background: #f9f8f6;
	border-radius: 0px;
	padding: 5px 8px;
	font-family: inherit;
	font-size: .9em;
}
button.filterbutton{
	background: #f9f8f6;
	border: 1px solid #f9f8f6;
	padding: 10px;
	margin-right: 2px;
	font-family: inherit;
	font-size: .9em;
}
button.pagebutton:hover,
button.pagebutton:focus,
button.pagebutton.active,
button.filterbutton:hover,
button.filterbutton:focus,
button.filterbutton.active{
	border: 1px solid #70c1b3;
	background: #70c1b3;
	color: #f9f8f6;
}

.usersearchbox{
	margin: 10px 20px 30px;
}
.usersearchrow{
	display: flex;
	background: #70c1b3;
	padding: 5px;
}
.usersearchrow input:focus{
	outline: none;
	box-shadow: none;
}
button.searchbutton{
	border: 5px solid #f9f8f6;
	color: #f9f8f6;
	border-radius: 0;
	outline: 0;
	width: 10em;
}
button.searchbutton.search{
	background: #70c1b3;
}
button.searchbutton.search:hover{
	background: #66b0a3;
}
button.searchbutton.clear{
	background: #e0474c;
}
button.searchbutton.clear:hover{
	background: #cc4146;
}


/*********************
**  WELCOME PAGE	**
*********************/

.formWrapper, .welcome{
	display: block;
	position: relative;
	max-width: 900px;
	margin: auto;
}
.welcome{
	padding: 30px 50px;
	box-sizing: border-box;
	background: #FFFFFF; 
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
.welcome .welcomeIntro a, .welcome .welcomeCard a:link, .welcome .welcomeCard a:visited{
	text-decoration: none;
	color: #e0474c;
}
.welcome .welcomeIntro a:hover, .welcome .welcomeCard a:focus, .welcome .welcomeCard a:active{
	text-decoration: underline;
}
.welcome p{
	line-height: 1.5em;
	padding: 0px;
}
.welcome a.button{
	margin: 40px auto;
	display: block;
	width: 200px;
	text-align: center;
	padding: 10px;
	border-radius: 3px;
	text-decoration: none;	
}
.welcome .welcomeCard{
	position: relative;
	margin-top: -1px;
	border-top: 1px solid #efece7;
	border-bottom: 1px solid #efece7;
	width: 100%;
}
.welcome .welcomeCard h3{
	font-weight: 700;
}
.welcome .welcomeCard a, .welcome .welcomeCard a:link, .welcome .welcomeCard a:visited{
	color: #444;
	text-decoration: none;
	width: 100%;
}
.welcome .welcomeCard a:hover, .welcome .welcomeCard a:focus, .welcome .welcomeCard a:active{
	color: #e0474c;
}
.welcome .welcomeCard a:after{
	content: '';
	display: block;
	position: absolute;
	left: 100%;
	top: 20px;
	bottom: 0;
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-right: 0px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 20px solid #efece7;
}
.welcome .welcomeCard a:hover:after{
	border-left: 20px solid #e0474c;	
}
.welcome .welcomeInner{
	margin-top: 20px;
	width: 90%;
	height: 120px;
}

header.headline
{
	padding: 0px 0px;
}
header a.button{
	float: right;
	margin: 1.5em 0.5em 0 0;	
}

/********************
*	Meta-Tabs 		*
********************/

.metanav{
	position: absolute;
	width: 100%;
	margin-top: -35px;
/*	z-index: 1;	*/
}
.tab-button{
	font-size: 0.9em;
	background: transparent;
	padding: 10px 10px;
	margin: 0px 5px 0px 0px;
	min-width: 120px;
	border: 0px;
}
.tab-button:focus,
.tab-button:hover,
.tab-button:active,
.tab-button.active{
	background: #fff;
	box-shadow: -2px -2px 4px #eee;
	outline: none;
}
section.tab{
/*	z-index: -1; */
	padding: 40px;
}
/* fix medium fields next together due to fieldset-logic */
.tab > form > div{
	display: inline;
}
.fs-formbuilder > div{
	padding: 18px 20px;
}
.tab .metasubmit{
	display: block;
	padding:  10px 20px;
}

/********************
*		Forms 		*
********************/

.large, .medium, .small{
	padding: 18px 0px;
	box-sizing:border-box;
	vertical-align: top;
}
.fullwidth{
	width: 100%;
}
form .large, form .medium, form .small{
	width: 100%;
	display: block;
}
form .hidden{
	display: none;
}
.large img{
	width: 100%;
}
.large.img-component img, .large .img-upload img{
	width: auto;
	max-width: 100%;
}
fieldset{
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	box-sizing: border-box;
	border: none;
	padding: 0;	
}
fieldset.fs-formbuilder{
    padding: 20px;
    border: 1px solid #ddd;
    margin: 20px;
    width: auto;
}
fieldset.fs-formbuilder legend{
	float: none;
    font-weight: bold;
    font-size: 1.2em;
}
label,.label{
	display: inline-block;
	width: 100%;
	font-size: 0.9em;
	font-weight: 300;
	padding: 0px;
	line-height: 1.5em;
}
input, select, textarea{
	display: inline-block;
	box-shadow: none;
	width: 100%;
	font-size: 1em;
	box-sizing: border-box;
	min-height: 42px;
	border: 1px solid #eee; 
	background: #f9f8f6;	
}
input:focus, select:focus, textarea:focus{
	border: 1px solid #FFF; 
	outline: none; 
	box-shadow: 0 0 2px #000; 
}
input, textarea{
	padding: 10px;
}
textarea{
	min-height: 84px;
}
select{
	padding: 14px 8px;
}
button,input[type="submit"]:hover{
	cursor: pointer;
}
input[type="submit"]{
	border-radius: 3px;
	margin-bottom: 40px;
	color: #f9f8f6;
	border: 2px solid #70c1b3; 
	background: #70c1b3; 
}
input[type="submit"]:hover{				
	border: 2px solid #66b0a3; 
	background: #66b0a3; 
}
input, select, button[type="button"]{
	min-height: 52px;
}
button[type="button"]{	
	background: #f9f8f6; 
	color: #444; 
	border-top: 1px solid #ddd; 
	width: 100%;
	text-align: center;
}
button[type="button"].active{
	background: #70c1b3; 
	color: #f9f8f6; 
	border-top: 1px solid #70c1b3; 
}
button[type="button"].no-settings:hover{
	cursor: default;
}
button[type="button"].has-settings:hover{ 
	background: #efece7;
}
button[type="button"].has-settings.active:hover{	
	background: #66b0a3; 
	border-top: 1px solid #66b0a3;
}
button[type="button"].plugin-button{
	border-left: 0px;
	border-right: 0px;
	border-bottom: 0px;
	margin-top: 10px;
	padding: 15px 0;
}
button[type="button"].theme-button{
	border: 0px;
	margin: 5px 0 20px;
	padding: 12px;
	border-radius: 3px;
	min-height: 52px;
	background: #FFF;
}
button[type="button"].theme-button.active{
	background: #70c1b3; 
	color: #f9f8f6; 
}
button[type="button"].theme-button:hover{
	border:0px;
	border-top: 0px;
}
.button{
	color: #fff;
	padding: 10px;
	border-radius: 3px;
}
a.button, a.button:link,a.button:visited{
	text-decoration: none;
	color: #fff;
	border: 2px solid #70c1b3; 
	background: #70c1b3; 
}
a.button:focus, a.button:hover, a.button:active{				
	border: 2px solid #66b0a3; 
	background: #66b0a3; 
}

input[type="submit"].danger{
	border: 2px solid #e0474c; 
	background: #e0474c; 	
}
input[type="submit"].danger:hover{				
border: 2px solid #cc4146; 
background: #cc4146; 
}


.settings .medium a.button{
	width: 100%;
	display: block;
	box-sizing:border-box;
	text-align: center;
}

/*****************
** CARDS		**
*****************/

fieldset.card{
	width: 100%;
	display: inline-block;
	padding: 15px 0px;
	box-sizing: border-box;
	vertical-align: top;
}
.card .medium{
	padding: 0px 20px;
}
.card img{
	width: 100%;
	background: #f9f8f6; 
}
.cardInner{
	box-sizing: border-box;
	position: relative;
	border: 1px solid #ddd;	
	background-color: #f9f8f6;
}
.cardInner .button-box{
	margin: 20px;
}
.cardHead h2{
	padding: 5px 0px;
	margin-bottom: 0px;
}
.cardHead header, .cardHead p, .cardHead ul{
	padding: 5px 0px;
}
.cardHead .cardActive{
	float: right;
}
.cardHead header{
	width: 100%;
	height: 52px;
	display: inline-block;
	box-sizing: border-box;
	padding: 20px;
	background: #f9f8f6; 
	color: #444;
}
.cardHead header legend{
	font-size: 1.2em;
	font-weight: 700;
	float:left;
}
.cardHead header label{
	display: inline-block;
	width: auto;
	line-height: 20px;
	margin: 0;
	padding: 0 25px 0 0;
}
.cardHead header .control-group .checkmark{
	right:-5px;
	left: auto;
}
.cardHead header input{
	width: auto;
	min-height: 0px;
	padding: 0;
	margin: 0;
	vertical-align: middle;
}
.cardContent{
	padding: 20px 40px 0;
}
.cardDescription{
	line-height: 1.5em;
}
.cardDescPlugin{
	padding: 0 20px;
}
ul.cardInfo{
	font-size: 0.8em;
	padding: 0px;	
}
.cardInfo a, .cardInfo a:link,.cardInfo a:visited{
	color: #70c1b3; 
	text-decoration: none;
}
.cardInfo a:focus,.cardInfo a:hover,.cardInfo a:active{	
	text-decoration: underline;
}
.cardInfo li{
	display: inline-block;
	box-sizing: border-box;
	vertical-align: top;
	padding: 0px 5px 0 0;
	margin: 0px 5px 0 0;
	color: grey;
	border-right: 1px solid grey;
}
.cardInfo li:last-child{
	border-right: 0px;
}
.cardFields{
	max-height: 0;
	transition: max-height 0.5s ease-out;
	overflow: hidden;
	padding: 0px 40px;
	border: 0px;
}
.cardFields.open{
	max-height: 20000px;
	transition: max-height 0.5s ease-in;
	overflow: hidden;
	border: 1px;
}
.description{
	font-size: .8em;
	font-style: italic;
}
.cardFields .cardField:first-child{
	margin-top: 50px;
}
.cardFields input, .cardFields select, .cardFields textarea, .cardFields .onoffswitch{
	margin-bottom: 6px;
}
.cardFields label{
	margin-top: 12px;
}
.cardFields fieldset.subfield legend{
	float:none;
	font-weight: bold;
	font-size: 1.2em;	
}
.cardField{
	position: relative;
	width: 100%;
	display: inline-block;
	margin: 26px 0 0;
}
.cardField.full{
	width: 100%;
}
.cardField.half{
	width: 49.5%;
	float: left;
	margin-right:0.5%;
}
.cardField.third{
	width: 32%;
	float:left;
	margin-right: 1%;
}
.cardField label{
	width: 100%;
	margin-top: 0px;
	margin-left: 0px;
	padding: 0px;
	background: transparent;
}
.cardField label.control-group{
	padding-left: 30px;
	margin: 10px 0 0;
}
.cardField input, .cardField select, .cardField textarea{
	background-color: #FFF;
}
textarea.codearea, .cardField textarea.codearea{
    font-family: visiblecontrol,monospace;
    background: #333;
    color: #fff;
}
textarea.codearea:focus, .cardField textarea.codearea:focus{
	border: 1px solid #333;
}

.cardFields fieldset.subfield{
	padding: 20px;
	border: 1px solid #ddd;
	margin: 20px 0 30px;
}

/********************
*	ALERT/ERRROR	*
********************/

.alert{
	color: #fff;
	width: 100%;
	line-height: 20px;
	display: block;
	margin:0px;
	text-align: center;
	padding: 5px 0px;
}
.alert-info{
	background: #70c1b3;
}
.alert-error{
	background: #e0474c;
}

.error input, 
.error select,
.error textarea{	
	border: 1px solid #e0474c;
}
.error,
.error label, 
.error small, 
.error p{
	color: #e0474c; 
}
.errors .cardHead header{
	background: #e0474c; 
	color: #fff; 
}
span.error{
	font-size: 0.8em;
	line-height: 1em;
}
.cardInner span.error{
	display: inline-block;	
	margin-top: -8px;
	margin-bottom: 8px;	
}
.metaLarge{
	box-sizing: border-box;
	width: 100%;
	padding: 18px 20px 0px;	
}
.metaErrors,.metaSuccess{
	width: 100%;
	padding: 4px 18px;
	color: #fff;
	border-radius: 1px;
	text-align:center;
	box-sizing: border-box;
}
.metaErrors{
	background: #e0474c; 
}
.metaSuccess{
	background: #70c1b3;
}

/********************
*	Customfields	*
********************/

.customkey{
	width: 29%;
}
.customvalue{
	width: 60%;
}

/********************
*	UPDATE-BANNER	*
********************/

.update-banner{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-top: 100px solid #e0474c;
	border-bottom: 100px solid transparent;
	border-right: 100px solid transparent;
}
.update-banner.show-banner{
	display: block;
}
.update-banner span{
	position: absolute;
	top: -85px;
	left: -20px;
	text-align: center;
	font-size: 0.9em;
	transform: rotate(-45deg);
	display: block;
	color: #fff;
	width: 100px;
}
.update-banner a{
	color: #fff;
	text-decoration: none;
}

/****************************************
* 			SELECT BUTTON				*
* https://codepen.io/vkjgr/pen/VYMeXp	*
****************************************/

select{
	/* reset */
	-webkit-appearance: none;
	-moz-appearance: none;
	
	/* style */
	background-image:
		linear-gradient(45deg, transparent 50%, #444 50%),
		linear-gradient(135deg, #444 50%, transparent 50%),
		linear-gradient(to right, #f9f8f6, #f9f8f6);
	background-position:
		calc(100% - 20px) calc(1em + 6px),
		calc(100% - 15px) calc(1em + 6px),
		100% 0;
	background-size: 
		5px 5px,
		5px 5px,
		2.8em 2.8em;
	background-repeat: no-repeat;
	cursor: pointer;
}
.cardField select{
	background-image:
		linear-gradient(45deg, transparent 50%, #444 50%),
		linear-gradient(135deg, #444 50%, transparent 50%),
		linear-gradient(to right, #fff, #fff);
}
/********************
* 	COLOR PICKER	*
********************/

.color-box{
	width: 100%;
	height: 36px;
	margin-top: 5px;
	margin-bottom: 12px;
	display: inline-block;
	border: 1px solid #ddd;
}
.color-box:hover{
	cursor: pointer;
}
.color-picker-control{
	width: 172px;
}
.color-picker-control input{
	margin-top: 0px;
}

/************************
* 	CHECKBOX / RADIO	*
************************/

.control-group input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	font-size: 0.1em;
	min-height: 0px;
}
.control-group {
	text-transform: none;
	display: block;
	position: relative;
	padding-left: 30px;
	margin-bottom: 7px;
	margin-top: 5px;
	cursor: pointer;
	font-size: 1em;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 16px;
	width: 16px;
	border: 2px solid #ccc; 
	background-color: #fff;	
	border-radius: 2px;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.control-group .checkmark:after {
	left: 5px;
	top: 0px;
	width: 5px;
	height: 10px;
	border: solid #fff; 
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.radiomark {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  border: 2px solid #ccc; 
  background-color: #fff;	
  border-radius: 50%;
}
.radiomark:after {
  content: "";
  position: absolute;
  display: none;
}
.control-group .radiomark:after {
  top: 5px;
  left: 5px;
  width: 6px;
  height: 6px;
  background: #fff; 
  border-radius: 50%;
}
.control-group:hover input ~ .checkmark,
.control-group:hover input ~ .radiomark { 
	background-color: #ccc;
	border: 2px solid #ccc;
}
.control-group input:checked ~ .checkmark,
.control-group input:checked ~ .radiomark {	
	border: 2px solid #70c1b3; 
	background-color: #70c1b3; 
}
.control-group input:checked ~ .checkmark:after,
.control-group input:checked ~ .radiomark:after {
  display: block;
}
.control-group input:disabled ~ .checkmark,
.control-group input:disabled ~ .radiomark {	
	border: 2px solid #eee; 
	background-color: #eee; 
}

/**** special alignment for image checkbox ****/
.control-group.imgcheckmark{
	padding-left:  0;
	font-size:  .9em;
}
.imgcheckmark .checkmark{
	left:  100%;
}


/********************
*	 TOOLTIP 		*
********************/

label .help, .label .help{
	float:right;
	width: 15px;
	height: 15px;
	line-height: 15px;
	border-radius: 50%;
	text-align: center;
	background: #fff;
	cursor: pointer;
}

.help {
    position: relative;
    display: inline-block;
    border-bottom: 0px dotted black;
}
.help .tooltip {
    visibility: hidden;
    width: 200px;
	top: -5px;
	right: 25px;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
	color: #fff; 
	background-color: #555;	
 
    position: absolute;
    z-index: 1;
	opacity: 0;
	transition: opacity .6s;
	
	text-transform: none;
}
.help .tooltip:after{
	content: "";
	position: absolute;
	top: 15px;
	left: 100%;
	margin-top: -5px;
	border-width: 5px;
	border-color: transparent transparent transparent #999;	
	border-style: solid;
}
.help:hover .tooltip{
    visibility: visible;
	opacity: 1;
}

/********************
*		LOGIN		*
********************/

.loginarea{
	position: relative;
	text-align: center;
	width: 100%;
}
.loginbutton{
	height: 34px;
}
.loginarea .counter{
	position: absolute;
	width: 100%;
	top: 16px;
	color: #444;
}
.loginarea .forgotpw{
	margin-top: 20px;
}
.loginarea .forgotpw a,.loginarea .forgotpw a:link,.loginarea .forgotpw a:visited{
	font-size: 0.8em;
	text-decoration: none;
	color: #cc4146;
}
.loginarea .forgotpw a:hover,.loginarea .forgotpw a:focus,.loginarea .forgotpw a:active{
	text-decoration: underline;
}

/********************
*		EDITOR		*
********************/

.editor .large{
	position: relative;	
}
.editor input[name="title"]{
	font-size: 1.8em;
	padding: 10px 20px;
}
.editor textarea{
	font-size: 1em;
	padding: 20px;
	line-height: 1.4em;
}
.editor span.error{
	position: absolute;
	left:20px;
	bottom: 0px;
}
.editor .message{
	display: inline-block;
	width: 70%;
}
.editor .message span.error{
	position: relative;
	left: 0;
	width: 100%;
	padding: 15px 20px;
	color: #e0474c;
}
.buttonset{
	position: fixed;
	display: block;
	bottom: 0;
	left: 0;
	right: 0;
	box-sizing: border-box;
	padding: 2px;
	max-width: 900px;
	background: #fff;
	box-shadow: 0 0 4px #ddd;
	z-index: 99;
}
.buttonset .message.error{
	position: absolute;
	background: #e0474c;
	color: #fff;
	font-size: 0.9em;
	width: 100%;
	left: 0;
	top: -25px;
	padding: 5px 40px;
	box-sizing: border-box;
	box-shadow: 0 0 2px #ddd;
}

.editor button, .editor a{
	position: relative;
	display: inline-block;
	min-width: 40px;
	margin: 4px 2px;
	padding: 10px;
	border-radius: 0px;
	font-size: 0.8em;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
}
.editor .secondary{
	display: inline-block;
	float: right;
}
.editor button.alert:enabled{
	border: 1px solid #e0474c;
	background: #e0474c;
	color: #fff;
}
.editor button.alert:enabled:focus,
.editor button.alert:enabled:hover,
.editor button.alert:enabled:active{
	border: 1px solid #e0474c;
	background: #cc4146;
}
.editor button.danger:enabled,
.editor button.danger[enabled],
.editor a.button--secondary,
.editor a.button--secondary:visited{
	border: 1px solid #eee;
	background: #fff;
	color: #444;
}
.editor button:enabled,
.editor button[enabled],
.editor a.button--secondary:focus,
.editor a.button--secondary:hover,
.editor a.button--secondary:active{
	border: 1px solid #66b0a3; 
	background: #66b0a3; 
	color: #fff;
}
.editor button:enabled:hover,
.editor button[enabled]:hover{
	border: 1px solid #4D978A; 
	background: #4D978A;
	color: #fff;
}
.editor button.danger:enabled:hover,
.editor button.danger[enabled]:hover{
	border: 1px solid #e0474c; 
	background:#e0474c;
	color: #fff;
}
button:disabled,
button[disabled]{
	border: 1px solid #eee;
	background: #eee;
	color: #444;
	cursor: default;
}

[v-cloak]{
	display: none;
}
.mobile{
	display: block;
}
.desktop{
	display: none;
}

/****************
** BLOX EDITOR **
****************/

.blox-body{
	position: relative;
	padding: 18px 20px			
}
.blox-overlay{
	position:absolute;
	display: block;
	z-index: 10;
	box-sizing: border-box;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #FFF;
	background: rgba(255,255,255,0.8);	
}
.blox{
	padding: 1px 20px;
	line-height: 1.5em;
	font-size: 16px;
}
.blox p{
	margin-top: 12px;
	margin-bottom: 12px;
}
.blox:hover{
	background: #f9f8f6;
}
.blox-editor{
	position: relative;
}
.blox-buttons{
	position: absolute;
    bottom: -15px;
	text-align: right;
    right: 25px;
    width: 200px;
	z-index: 99;
}
.blox-buttons button{
	display: inline-block;
	box-sizing: border-box;
	margin: 2px;
	padding: 3px 6px;
	width: 80px;
	text-align: center;
	color: #444;
	background: #f9f8f6;
	border: 2px solid #fff;
	border-radius: 2px;
	font-size: 0.9em;
}
.blox-buttons button.edit{
	background: #70c1b3;
	color: #fff;
}
.blox-buttons button.edit:hover{
	background: #4D978A;
}
.blox-buttons button.cancel:hover{
	background: #e0474c;
	color: #fff;
}
.blox-buttons button.edit:disabled, .blox-buttons button.cancel:disabled{
	background: #eee;
	color: #444;
	border: 1px solid #eee;
}


.sideaction{
	position: absolute;
	top: 0px;
	font-size: 0.8em;
	right: -22px;
}
.sideaction button{
	display: block;
	font-weight: 300;
	font-size: 0.9em;
	background: #fff;
	color: #fff;
	width: 20px;
	height: 20px;
	line-height: 25px;
	text-align: center;
	padding: 0px;
	margin: 1px;
	border: 0px;
	border-radius: 1px;
}
.blox-wrapper{
	position: relative;
}
.editactive .sideaction button, 
.blox-wrapper:hover button.add,
.blox-wrapper:hover button.delete{
	background-color: #f9f8f6;
	color: #666;
}
.sideaction:hover ~ .background-helper {
    background-color: #f9f8f6;
}
.editactive .background-helper{
	background-color: transparent!important;
}
.blox-wrapper button.add:hover{
	background: #66b0a3;
	color: #fff;
}
.blox-wrapper button.delete:hover{
	background: #e0474c;
	color: #fff;
}



.blox-editor textarea{
	font-family: arial;
	line-height: 1.5em;
	font-size: 16px;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
	min-height: 40px;
}
.blox-editor textarea:focus, .blox-editor input:focus{
	box-shadow: none;
	outline: none;
}
.blox-editor input.mdcontent.h2,.blox-editor input.mdcontent.h3,.blox-editor input.mdcontent.h4,.blox-editor input.mdcontent.h5,.blox-editor input.mdcontent.h6{
	padding-left: 35px;
	height: auto;
}
.blox-editor input.mdcontent.h2{
	font-size: 1.6em;
	font-weight: 700;
}
.blox-editor input.mdcontent.h3{
	font-size: 1.3em;
	font-weight: 700;
}
.blox-editor input.mdcontent.h4{
	font-size: 1.1em;
	font-weight: 700;
}
.blox-editor input.mdcontent.h5{
	font-size: 1em;
	font-weight: 700;
}
.blox-editor input.mdcontent.h6{
	font-size: 1em;
	font-weight: 300;
	font-style: italic;
}
button.hdown{
	position: absolute;
	padding: 8px;
	top: 1px;
	bottom: 1px;
	left: 0px;
	font-size: 1em;
	font-weight: 700;
	border: 0px solid #fff;
	border-right: 1px solid #fff;
}
button.hdown.headline{
	color: #f9f8f6;
	background: #66b0a3; 	
}
.blox-editor .contenttype {
	position: absolute;
	top: 15px;
	left: -25px;
	color: #666;
}
.visible{
	display: block;
}
.hidden{
	visibility: hidden;
}
.hidden .blox:hover{
	background: #fff;
}
.component{
	position: absolute;
	width: 100%;
	z-index:9;
}


.blog-post{

}
.blog-post svg{
	color: #ccc;
	margin-right: 5px;
}
.blog-post a,
.blog-post a:link,
.blog-post a:visited{
	color: #444;
	text-decoration: none;
	display: inline-block;
	width: 100%;
	padding: 0px 15px;
	margin: 5px 0;
	border-left: 3px solid;
	box-sizing: border-box;
	background-color: #f9f8f6;
}
.blog-post a:focus,
.blog-post a:hover,
.blog-post a:active{
	background-color: #f6f5f3;
}
.blog-post a.unpublished{
	border-color: #cc4146;
}
.blog-post a.published{
	border-color: #66b0a3;
}
.blog-post a.modified{
	border-color: #FFA500;
}
.blog-post .post-date{
	float: right;
	font-size: 0.8em;
	font-weight: 300;
	color: #444;
}
.posts.formWrapper{
	margin: 20px 0;
}
.posts input{
	width: 80%;
	float: left;
}
button.post-button{
	color: #f9f8f6;
	background: #66b0a3;
	border: 0px;
	width: 20%;
	text-align: center;
}
button.post-button:hover{
	background: #4D978A;
}


/* .format-bar at the bottom of the page */

/********************
* 	SVG ICONS 		*
********************/

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}
.icon.baseline{
  top: 0.125em;
  position: relative;	
}
.icon-file-text-o {
  width: 0.8571428571428571em;
}
.icon-bookmark-o {
  width: 0.7142857142857142em;
  margin-right: 10px;
}
.icon-upload {
  width: 0.9285714285714285em;
}
.format-bar .hidden{
	display: none;
}
.format-bar .component{
	position: relative;
}
.format-bar{
	padding: 20px;
	width:100%;
	box-sizing: border-box;
}
.format-bar .editactive{
	position: relative;
	margin-left: -20px;
	margin-right: -20px;
}
.format-bar.blox{
	width: auto;
	background: #f9f8f6;
}
.newblock{
	z-index: 20;
}
.newblock .sideaction{
	display: none;
}
.newblock-info{
	padding: 0 0 0 20px;
	font-size: 0.9em;
	line-height: 30px;
	height: 30px;
    background: #66b0a1;
    margin-bottom: 2px;
    color: #fff;
}
.newblock-close{
	line-height: 30px;
	height: 30px;
	border: 0px;
	color: #fff;
	background: #e0474c;
	float: right;
}
/* format line for each block */
.formatbuttons{
	margin: 5px 0px 2px;
	font-size: 0.7em;
	text-align: center;
}
.formatbuttons.hidden{
	display: none;
}
.formatbuttons button.format-item {
	width: 30px;
	height: 30px;
}
.fade-editor-enter-active{
  transition: opacity .5s;
}
.fade-editor-enter{
  opacity: 0.3;
}
button.format-item{
	margin: 2px;
	padding: 12px 5px;
	background: #f9f8f6;
	border: 1px solid #eee;
	color: #444;
	display: inline;
	border-radius: 2px;
	width: 40px;
	height: 40px;
	text-align: center;
}
button.format-item:hover{
	background: #66b0a3;
	border: 1px solid #66b0a3;
	color: #fff;
	cursor: pointer;
}
button.format-item.disabled, button.format-item.close{
	width: 90px;
}
button.format-item.disabled{
	background: #f9f8f6;
	color: #444;
	border: 1px solid #eee;
	cursor: initial;
}
button.format-item.close:hover{
	background: #cc4146;
	border: 1px solid #cc4146;
}

/************************
** INLINE FORMATG BAR  **
************************/

/* format menu */
.inlineFormatBar { 
	box-sizing:content-box; 
	height: 30px;  
	padding: 5px 10px;  
	background: #333;  
	border-radius: 3px;  
	position: absolute;  
	top: 0;  
	left: 0;  
	transform: translate(-50%, -100%);  
	display: flex;  
	justify-content: center;  
	align-items: center;
}
/* Triangle below format popup */
.inlineFormatBar:after {  
	content: '';  
	position: absolute;  
	left: 50%;  
	bottom: -5px;  
	transform: translateX(-50%);  
	width: 0;  
	height: 0;  
	border-left: 6px solid transparent;  
	border-right: 6px solid transparent;  
	border-top: 6px solid #333;
}
.inlineFormatItem {  
	color: #FFF;
	cursor: pointer;
	font-size: 0.9em;
	padding: 3px;
}
.inlineFormatItem:hover {  
	color: #1199ff;
}
.inlineFormatItem + .inlineFormatItem {  
	margin-left: 10px;
}
.inlineFormatItem.inlineFormatLink
{
	margin-left: 2px;
	margin-right: 2px;
}
.urlinput{
	width: 75%;
	min-height: auto;
	background: #555;
	color: #fff;
	border: 0px;
	padding: 5px;
}
.urlinput:focus{
	outline: 0px;
	border: 0px;
}
/************************
** BLOX EDITOR CONTENT **
************************/

.blox h1, .blox h2, .blox h3, .blox h4, .blox h5, .blox h6{ font-weight: 700; line-height: 1em; }
.blox h1{ font-size: 2.2em; margin: 0.6em 0 0.6em; }
.blox h2{ font-size: 1.6em; margin: 1.3em 0 0.6em; }
.blox h3{ font-size: 1.3em; text-transform: none; margin: 1.2em 0 0.6em; }
.blox h4{ font-size: 1.1em; margin: 1.2em 0 0.6em; }
.blox h5{ font-size: 1em; margin: 1.2em 0 0.6em; }
.blox h6{ font-size: 1em; font-style: italic; font-weight:300; margin: 1em 0 0.6em; }
.title input{
	font-size: 2.2em;
	font-weight: 700;
	padding: 20px;
}
.blox pre,.blox code{
	white-space: pre;
	color: #333; 
	background: #f9f8f6;
}
.blox code{
	display: inline-block;
	padding: 0 0.5em;
	font-size: 0.8em; 
	line-height: 1.4em;	
	border-radius: 3px;	
}
.blox code.hljs{ 
	background: transparent; 
}
.blox pre{
	padding: 10px;
	display: block;	
	max-width: 100%;
	overflow-x: auto;
	border-left: 4px solid #e0474c;
}
.blox code.language-pagebreak::after{
  	content: '---pagebreak with the eBook plugin---';
}

.blox table{
	width: 100%;
	border-collapse: collapse;
}
.blox thead{
	border-bottom: 1px solid #e0474c;
	border-top: 1px solid #e0474c;
	background: #f9f8f6;
	font-weight: 700;
}
.blox tbody{}
.blox th{ padding: 10px 0;}
.blox tr,.blox-editor tr{}
.blox tr:nth-child{ }
.blox tr:nth-child(even){ background-color:#f9f8f6; }
.blox td{ padding: 5px;}

.blox-editor table{ 
	display: inline-table;
	width: 100%;  
	border-collapse: collapse; 
	margin-bottom: 20px;
}
.blox-editor thead{}
.blox-editor tbody{}
.blox-editor tr{}
.blox-editor th{ border: 1px solid #ccc; padding: 5px; }
.blox-editor td{ border: 1px solid #ccc; padding: 5px; }
.blox-editor td.noteditable, .blox-editor th.noteditable{ 
	border: 1px solid #ccc; 
	text-align:center; 
	color: #ccc; 
	background: #f9f8f6; 
	font-weight: 300;
	padding: 5px 0 0;
}
.blox-editor tr:first-child:hover td.noteditable:first-child{
    cursor: default;
	color: #ccc; 
	background: #f9f8f6; 
}
.blox-editor td.noteditable{
	cursor: pointer;
}
.blox-editor td.noteditable:hover{
	background: #ccc;
	color: #fff;
}
.blox-editor .columnaction, .blox-editor .rowaction{
	position: absolute;
	background: #fff;
	width: 150px;
	font-size: 0.9em;
	color: #000;
	text-align: left;
	box-shadow: 0 0 2px #000;
	margin: 5px;
	z-index:999999;
}
.blox-editor .rowaction{
	margin-left: 53px;
	margin-top: -3px;
}
.blox-editor .actionline{
	padding: 5px 10px;
	cursor: pointer;
}
.blox-editor .actionline:hover{
	background: #70c1b3;
	color: #fff;
}
.blox dl{
	border-top: 1px solid #e0474c;
	border-bottom: 1px solid #e0474c;
	padding: 0.5em 0;
	box-sizing: border-box;
}
.blox dt, .blox dd{
	width: 100%;
	margin: 0;
	padding: 3px 5px;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
}
.blox dt{
	font-weight: 700;
}
.blox dt::after{
	content: ":";
}
.blox dd{
	padding-left: 40px;
}
.definitionList{
	background: #f9f8f6;
}
.definitionRow{
	width: 100%;
	display: block;
	padding: 20px 20px 0 20px;
	box-sizing: border-box;
}
.definitionRow .icon-arrows-v,
.definitionRow .icon-dots-two-vertical{
	display: inline-block;
	margin-top: 15px;
}
.definitionTerm{
	width: 29%;
	display: inline-block;
	vertical-align: top;
}
.definitionDescription{
	width: 60%;
	display: inline-block;
	vertical-align: top;
	background: #fff;
}
.definitionRow input, .definitionRow textarea{
	background: #fff;
}
button.addDL,
button.delDL{
	display: inline-block;
	vertical-align: top;
	font-weight: 300;
	font-size: 0.8em;
	height: 20px;
	line-height: 20px;
	border: 0px;
	background: transparent;
}
button.addDL .icon-plus,
button.delDL .icon-minus{
	width: 10px;
	height: 10px;
	border-radius: 1px;
	text-align: center;
	color:#f9f8f6;
	padding: 2px 1px 1px;
	line-height: 10px;
}
button.addDL{
	margin: 20px;
}
button.addDL i{
	background: #70c1b3;
}
button.addDL i:hover{
	background:#66b0a3;
}
button.delDL i{
	background: #e0474c;
}
button.delDL i:hover{
	background: #cc4146;
}
.definitionList .icon-arrows-v{
	color: #ddd;
}
.definitionList .icon-plus{
	background: #66b0a3;
	width: 10px;
	height: 10px;
}
.definitionList .icon-minus{
	background: #e0474c;
}
.blox ul, .blox ol{ 
	padding-left: 0px;
	margin-left: 18px;
}
.blox blockquote{
	border-left: 4px solid #e0474c;
	background: #f9f8f6;
	position: relative;
	font-style: italic;
	font-family: serif;
	border-left: 4px solid #e0474c;
	background: #f9f8f6;
	margin: 12px 0;
	padding: 5px;
}
.blox blockquote:before {
	position: absolute;
	left: 0px;
	top: 20px; 
	color: #ccc;
	content: open-quote;
	font-size: 4em;
}
.blox blockquote p{
	margin-left: 50px;
}
.imageupload{
	width: 50%;
	position: relative;
	display: inline-block;
	border-right: 1px dotted grey;
	box-sizing:border-box;
}
.imageselect{
	width: 50%;
	position: relative;
	display: inline-block;
	box-sizing:border-box;
	border:0px;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	min-height: 70px;
	background: #f9f8f6;
	font-family: Helvetica, Calibri, Arial, sans-serif;
}
.dropbox{
	min-height: 70px;
	background: #f9f8f6;
	padding: 0px;
	box-sizing: border-box;
	margin-bottom: 10px; 
}
.dropbox p{
	position: relative;
	cursor: pointer;
	line-height: 70px;
	width: 100%;
	text-align: center;
	box-sizing:border-box;
	padding: 0;
	margin: 0;
}
.dropbox input, .dropbox select{
	background-color: #fff;
	width: 80%;
	margin: 2px 0;
	display: inline-block;
}
.video input{
	width: 75%;
	margin: 15px 0;
}
.dropbox select{
	background-image: linear-gradient(45deg, transparent 50%, #444 50%), linear-gradient(135deg, #444 50%, transparent 50%), linear-gradient(to right, #fff, #fff);
}
.dropbox label{
	width: 20%;
	display: inline-block;
}
.video label{
	text-align: right;
	padding-right: 10px;
	box-sizing: border-box;
}
.dropbox .imgmeta{
	padding: 30px;
	box-sizing: border-box;	
}
.dropbox .input-file{
    opacity: 0;
    width: 100%;
    height: 70px;
    position: absolute;
    cursor: pointer;
	z-index: 1;
}
.blox img, img.uploadPreview{
	display: block;
	margin: auto;
	max-width: 100%;
	height: auto;
}
.blox img.youtube{
	position: relative;
}
.blox .video-container{
	position: relative;
	text-align: center;
}
.blox button.play-video { 
  position: absolute;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
  height: 100px;
  width: 100px;
  background: #e0474c;
  color: #FFFFFF;
  border-radius: 50%;
  border: 0px;
  padding: 0;
  text-align: center;
}
.blox button.play-video:hover {
  background: #cc4146;
}
.blox button.play-video::after {
  position: absolute;
  top: 50%;
  margin: -20px 0 0 -15px;
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 20px 0 20px 40px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.75);
  content: ' ';
}
.medialib{
	margin: auto;
	width: 100%;
	height: 80%;
	overflow: auto;
	background: #f9f8f6;
	max-width: 1200px;
}
.imagecard{
	margin: 10px;
	box-shadow:0 2px 5px rgba(22,23,26,.05);
	display: inline-block;
	vertical-align: top;
	background: #fff;
}

sup{}
cite{}
abbr{}
hr{
	background: #ddd;
	height: 2px;
	margin: 20px 0;
	border: 0px;
}
.blox ul.TOC,.blox .TOC ul{
	list-style: none;
	padding-left: 0px;
	margin-left: 0px;
}
.blox .TOC li:before{
	content: "\2192";
	margin-left: -7px;
	margin-right: 7px;
}
.blox .TOC li.h1:before{
	content: "";
}
.blox ul.TOC{
	background: #f9f8f6;
	width: 100%;
	padding: 20px;
	box-sizing:border-box;
}
.blox li.h1{
	font-weight: 700;
	height:auto;
}
.blox li.h2,.blox li.h3,.blox li.h4,.blox li.h5,.blox li.h6{
	font-weight: 400;
	padding-left: 25px;	
	height:auto;
}
.blox a, .blox a:link, .blox a:visited,
footer a, footer a:link, footer a:visited
{ 
	text-decoration: none; 
	color: #e0474c; 
}
.blox a:focus, .blox a:hover, .blox a:active,
footer a:focus, footer a:hover, footer a:active
{ 
	text-decoration: underline;
}
.setupWrapper a, .setupWrapper a:link, .setupWrapper a:visited
{
	text-decoration: none;
	color: #444;
}
.setupWrapper a:focus, .setupWrapper a:hover, .setupWrapper a:active
{
	color: #e0474c; 
}
.blox .TOC li:before{ color: #bbb; }

.mbfix{ margin-bottom: 0px!important; }

.slugbutton{
    right: 20px;
    height: 52px;
    width: 150px;
}

@media only screen and (min-width: 600px) {
	section{
		padding: 20px 20px 40px;
	}
	header.headline{
		padding: 0px 20px;
	}
	.large, .medium, .small{
		padding: 18px 20px;
	}
	form .medium{
		width: 49.5%;
		display: inline-block;
	}
	form .small{
		width: 33.3%;
		display: inline-block;
	}
	fieldset.card{
		padding: 15px 20px;
	}
	.settings .medium a.button{
		display: inline-block;
		width: auto;
	}
	.editor button, .editor a.button--secondary{
		min-width: 150px;
		font-size: 0.9em;
	}
	
	.blox-editor .loadwrapper{
		display: block;
		position: relative;
		width: 40px;
		height: 40px;
		margin: auto;
		text-align: center;
	}
	.blox-editor .loadoverlay{
		display: block;
		position: absolute;
		z-index: 999;
		left: 0px;
		right: 0px;
		top: 0px;
		bottom: 0px;
		background: rgba(255,255,255,0.4);
	}
	/* load design editor button */
	.editor button.load:after, .blox-editor .load:after,
	.editor button.success:after,
	.editor button.fail:after{
		position: absolute;
		right: 8px;
		top: 6px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		content: '';
	}
	.editor button.load:after, .blox-editor .load:after{
		border: 8px solid #fff;
		border-top: 8px solid #ccc;
		background: #ccc;
		animation: spin 2s linear infinite;	
	}
	.blox-editor .loadoverlay .load:after{
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -10px;
		margin-left: -10px;		
	}
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	.editor button.success:after,
	.editor button.fail:after{
		border: 8px solid #eee;
	}
	.editor button.success:after{
		background: #00cc00;
	}
	.editor button.fail:after{
		background: #e0474c;
	}
	
	/* load design navi buttons */
	.navi-item.load:after
	{
		position: absolute;
		right: 6px;
		top: 6px;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		content: '';
		border: 8px solid #eee; /* background */
		border-top: 8px solid #ccc; /* moving border */
		background: #ccc; /* dot in the middle */
		animation: spin 2s linear infinite;
	}
	.editor button.button--secondary, .editor a.button--secondary{
		width: auto;
		min-width: auto;
		max-width: inherit;
	}
	
	.mobile{
		display: none;
	}
	.desktop{
		display: inline-block;
	}	
}
@media only screen and (min-width: 900px) {
	.main{
		margin: 30px auto;
		padding: 20px 30px;
	}
	.infoline{
		min-height: 30px;
		width: 100%;
		display: block;
		color: #bbb;
		font-size: 0.9em;
	}
	.infoline .help{
		float: right;
		text-align: center;
		width: 20px;
		height: 20px;
		line-height: 20px;
		border-radius: 50%;
		background: #fff;
		cursor: pointer;
	}
	span.level-1{ padding-left: 5px; }
	span.level-2{ padding-left: 20px; }
	span.level-3{ padding-left: 35px; }
	span.level-4{ padding-left: 50px; }
	span.level-5{ padding-left: 65px; }
	fieldset.plugin{
		width: 49.5%;
	}
	.welcome .medium{
		width: 66%;
		display: inline-block;
	}
	.welcome .small{
		width: 33.3%;
		display: inline-block;		
	}
	.header-navi ul{
		font-size: 1em;
	}
	article{
		width: 80%;
		display: inline-block;
		vertical-align: top;
	}
	article a{
		text-decoration: none;
		color: #e0474c;
	}
	aside.sidebar{
		width: 19%;
		display: inline-block;
		vertical-align: top;
		background: transparent;
	}
	.sidebar-menu, .sidebar-menu--content{
		max-height: 2000px;
		padding: 0 0 0 0;
		overflow: visible;
		box-sizing: border-box;
		font-size: 1em;
		text-align: left;
	}
	.sidebar-menu{
		max-height: 2000px;
	}
	.sidebar-menu--content{
		max-height: 3000px;
	}
	.menu-action{
		display: none;
		width: 0px;
		height: 0px;
	}	
	ul.menu-list{
		margin: 5px 0 0 20px;
	}
	.navi-items a{
		padding: 20px 5px 10px 0px;
	}	
	.navi-item .status{
		left: -30px;
	}
	.navi-item .iconwrapper{
	    display: block;
	 }		
	.navi-item a .movewrapper, 
	.navi-item a:link .movewrapper, 
	.navi-item a:visited .movewrapper{
		color: #f9f8f6;
		background: transparent;
	}
	.navi-item a:focus, 
	.navi-item a:focus .iconwrapper, 
	.navi-item a:focus .movewrapper, 
	.navi-item a:hover, 
	.navi-item a:hover .iconwrapper, 
	.navi-item a:hover .movewrapper, 
	.navi-item a.active, 
	.navi-item a.active .iconwrapper,
	.navi-item a.active .movewrapper
	{
		background:#fff;
		color: #444;
	}
	.navi-items span{
		display: inline;
	}	
	.level-1 > ul.menu-list{
		margin-bottom: 30px;
	}
	.menu-list li{
		font-weight: 300;
	}
	.sidebar-menu, .sidebar-menu--content{
		font-size: 0.9em;
	}
	.sidebar-menu--content li.level-1, .sidebar-menu--content li.level-0 {
		font-weight: 700;
	}
	.menu-list.margin-bottom{
		margin-bottom: 40px;
	}	
	.menu-item a, .menu-item a:link, .menu-item a:visited{
		position: relative;
		width: auto;		
		padding: 1px 0px;
		line-height: 1.2em;
		border: 0px;
	}
	.menu-item a:hover, .menu-item a:focus, .menu-item a:active, .menu-item a.active, .active > a{
		color: #fff;
		color: #e0474c;
		background: transparent;
	}
	.menu-item a::before{
		position: absolute;
		left: -15px;
		content:"\A";
		border-style: solid;
		border-width: 8px 0px 8px 8px;
		border-color: transparent transparent transparent #fff;
	}
	.menu-item a:hover:before, .menu-item a:focus:before, .menu-item a:active:before, .menu-item a.active:before{
		border-left-color: #e0474c;
	}
	.addNaviItem a:focus,.addNaviItem a:hover,.addNaviItem a:active{
		text-decoration: underline;
		background: transparent;
		color: #e0474c;	
	}	
	.card .medium{
		padding: 0px 20px;
	}
	.card .medium button[type="button"]{
		margin-top: 10px;
		margin-bottom: 40px;
	}
	.card .medium input[type="submit"]{
		margin-top: 10px;
		margin-bottom: 40px;
	}
	li.row.header{
		display: block;
	}
	li.row.header ul{
		color: #fff;
		background: #70c1b3;
	}
	li.col.username, li.col.email, li.col.userrole, li.col.edit{
		border: 1px solid #fff;
	}
	li.col.username{
		border-top: 2px solid #70c1b3;
	}
	li.col:before{
		width: 0%;
		display:none;
	}
	li.row ul{
		margin: 0px;
	}
	.col.username,.col.email,.col.userrole{
		width: 28%;
	}
	.col.edit{
		width: 16%;
	}
	li.col.username{
		border-top: 0px;
		border-left: 0px solid #70c1b3;
	}
	.buttonset{
		width: 76%;
		padding: 10px 40px;
		left: auto;
		right: auto;
		max-width: 900px;
	}	
	.editor button, .editor a{
		border-radius: 3px;
	}	
}