/* ################### general formats ################### */
body {
  font-family:'Open Sans';
  margin:0;
  padding:0;
  line-height: 1.2;
}
div {
  margin:0;
  padding:0;
}
div[data-role="page"] {
  background-color: #333;
}
.ui-header {
  min-height: 50px;
}
.ui-header .ui-title {
  padding-top:15px;
}
.footer {
  text-align: center;
  background-image: linear-gradient( #444 , #222 );
}
.contentpic {
  width:100%;
  height:auto;
  max-width:200px;
}
.clearer {
  clear:both;
}
.error {
  color:red;
}
.center{
  text-align: center;
}

.cardoptions p {
  font-size: 0.9em;
  cursor:default;
}

.settings {
  font-size:0.9em;
  font-family: "Open Sans";
}

.dd-option, .dd-selected { padding:1px !important; }

.dd-option-image, .dd-selected-image {
  width: auto !important;
  max-width:none !important;
}

.ui-icon-ruler:after {
	background-image: url("../img/icons/icon_format.svg"); color:#fff;
}

.ui-icon-palette:after {
  background-image: url("../img/icons/icon_palette.svg"); color:#fff;
}
.ui-icon-font:after {
  background-image: url("../img/icons/icon_font.svg"); color:#fff;
}
.ui-icon-contact:after {
  background-image: url("../img/icons/icon_contact.svg"); color:#fff;
}
.ui-icon-save:after {
  background-image: url("../img/icons/icon_save.svg"); color:#fff;
}
.ui-icon-image:after {
  background-image: url("../img/icons/icon_image.svg"); color:#fff;
}
.ui-btn-icon-left { padding-left:4em; }


/* ################### navigation ################### */
.settings { font-weight: normal; }
html .ui-body-b a { font-weight: normal; }
.li-placeholder { cursor:default; font-size:0.9em; padding-left:1em; font-weight:bold !important; }
/* ################### card preview ################### */
div#card {
  background:transparent;
  color:#333;
  margin: 1em auto 0 auto;
  text-shadow: none;
  overflow:hidden;

}
div#bigCan #card {
  margin:0;
  z-index: -99;
}

/* ################### card edit form ################### */
#cardform input {
  border: #999 solid 1px;
}

ul li.test { font-weight:bold; color:fuchsia;}

form.ui-filterable {
  display:none;
}

/* ################### templates ################### */
/* ----- standard 01 -----*/
div#card #standard01 {
  background-repeat:no-repeat;
  background-position:center;
  background-color:transparent;
  background-size: cover;
  color:#333;
  position:relative;
}
div#card #standard01 .trim {
  position: relative;
  top: 9px;
  left: 22px;
  box-sizing:border-box;
}
div#card #standard01 div.name {
  font-size:0.8em;
  font-weight:bold;
  padding:10px 0 5px 0;
}
div#card #standard01 div.position{
  padding-bottom:3px;
  border-bottom:1px solid #000;
  width:80%;
}
div#card #standard01 div.company {
  font-size:0.7em;
  padding:4px 0 2px 0;
}
div#card #standard01 div.address {
  padding-top:2px;
}
div#card #standard01 div.phone {
  clear:both;
  text-decoration: none;
}
div#card #standard01 div.mobile, div#card #standard01 div.mail, div#card #standard01 div.fax,
div#card #standard01 div.web, div#card #standard01 div.position, div#card #standard01 div.address,
div#card #standard01 div.phone {
  font-size:0.5em;
}
div#card #standard01 div.web, div#card #standard01 div.address {
  line-height:1.4;
}

/* ----- standard 02 -----*/
div#card #standard02 {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color:#333;
  position:relative;
}
div#card #standard02 .trim {
  position: relative;
  top: 9px;
  left:50px;
  box-sizing: border-box;
}
div#card #standard02 div.name {
  font-size:0.8em;
  font-weight:bold;
  padding:10px 0 5px 0;
}
div#card #standard02 div.position{
  padding-bottom:3px;
  border-bottom:1px solid #5f5d59;
  width:75%;
}
div#card #standard02 div.company {
  font-size:0.7em;
  padding:4px 0 2px 0;
}
div#card #standard02 div.address {
  padding-top:2px;
}
div#card #standard02 div.phone {
  clear:both;
  text-decoration: none;
}
div#card #standard02 div.mobile, div#card #standard02 div.mail, div#card #standard02 div.fax,
div#card #standard02 div.web, div#card #standard02 div.position, div#card #standard02 div.address,
div#card #standard02 div.phone {
  font-size:0.5em;
}
div#card #standard02 div.web, div#card #standard02 div.address {
  line-height:1.4;
}

/* ----- standard 03 -----*/
div#card #standard03 {
  background-repeat:no-repeat;
  background-position: center;
  background-size: cover;
  color:#333;
  position:relative;
}
div#card #standard03 .trim {
  position: relative;
  top: 9px;
  left: 22px;
  box-sizing:border-box;
}
div#card #standard03 div.name {
  font-size:0.8em;
  font-weight:bold;
  padding:10px 10px 5px 0;
  text-align:right;
}
div#card #standard03 div.position{
  font-size:0.5em;
  padding: 0 10px 3px 0;
  text-align: right;
}
div#card #standard03 div.company {
  font-size:0.7em;
  padding:4px 0 2px 0;
}
div#card #standard03 div.address {
  padding-top:2px;
}
div#card #standard03 div.phone {
  clear:both;
  text-decoration: none;
}
div#card #standard03 div.mobile, div#card #standard03 div.mail, div#card #standard03 div.fax,
div#card #standard03 div.web, div#card #standard03 div.position, div#card #standard03 div.address,
div#card #standard03 div.phone {
  font-size:0.5em;
}
div#card #standard03 div.web, div#card #standard03 div.address {
  line-height:1.4;
}

/* ----- standard 04, 05, 06, 07, 08, 09 -----*/
div#card #standard04, div#card #standard05, div#card #standard06, div#card #standard07, div#card #standard08,
div#card #standard09 {
  background-repeat:no-repeat;
  background-position:center;
  background-color:transparent;
  background-size: cover;
  color:#333;
  position:relative;
}
div#card #standard04 .trim, div#card #standard05 .trim, div#card #standard06 .trim,
div#card #standard07 .trim, div#card #standard08 .trim, div#card #standard09 .trim {
  position: relative;
  top: 9px;
  left: 15px;
  box-sizing:border-box;
}
div#card #standard04 div.name, div#card #standard05 div.name, div#card #standard06 div.name,
div#card #standard07 div.name, div#card #standard08 div.name, div#card #standard09 div.name {
  font-size:0.8em;
  font-weight:bold;
  padding:15px 10px 5px 0;
}
div#card #standard04 div span, div#card #standard05 div span, div#card #standard06 div span,
div#card #standard07 div span, div#card #standard08 div span, div#card #standard09 div span {
  padding:0 10px 0 2px;
  background:#fff;
  opacity:0.8;
}
div#card #standard04 div.position, div#card #standard05 div.position, div#card #standard06 div.position,
div#card #standard07 div.position, div#card #standard08 div.position, div#card #standard09 div.position {
  padding-bottom:3px;
  border:0;
}
div#card #standard04 div.company, div#card #standard05 div.company, div#card #standard06 div.company,
div#card #standard07 div.company, div#card #standard08 div.company, div#card #standard09 div.company {
  font-size:0.7em;
  margin:4px 0 2px 0;
}

div#card #standard04 div.address, div#card #standard05 div.address, div#card #standard06 div.address,
div#card #standard07 div.address, div#card #standard08 div.address, div#card #standard09 div.address {
  margin-top:5px;
}
div#card #standard04 div.phone, div#card #standard05 div.phone, div#card #standard06 div.phone,
div#card #standard07 div.phone, div#card #standard08 div.phone, div#card #standard09 div.phone {
  clear:both;
  text-decoration: none;
}
div#card #standard04 div.mobile, div#card #standard04 div.mail, div#card #standard04 div.fax,
div#card #standard04 div.web, div#card #standard04 div.position, div#card #standard04 div.address,
div#card #standard04 div.phone, div#card #standard05 div.mobile, div#card #standard05 div.mail, div#card #standard05 div.fax,
div#card #standard05 div.web, div#card #standard05 div.position, div#card #standard05 div.address,
div#card #standard05 div.phone, div#card #standard06 div.mobile, div#card #standard06 div.mail, div#card #standard06 div.fax,
div#card #standard06 div.web, div#card #standard06 div.position, div#card #standard06 div.address,
div#card #standard06 div.phone, div#card #standard07 div.mobile, div#card #standard07 div.mail, div#card #standard07 div.fax,
div#card #standard07 div.web, div#card #standard07 div.position, div#card #standard07 div.address,
div#card #standard07 div.phone, div#card #standard08 div.mobile, div#card #standard08 div.mail, div#card #standard08 div.fax,
div#card #standard08 div.web, div#card #standard08 div.position, div#card #standard08 div.address,
div#card #standard08 div.phone, div#card #standard09 div.mobile, div#card #standard09 div.mail, div#card #standard09 div.fax,
div#card #standard09 div.web, div#card #standard09 div.position, div#card #standard09 div.address,
div#card #standard09 div.phone {
  font-size:0.5em;
}


/* ----- custom 01 -----*/
div#card #custom01 {
  background-repeat:no-repeat;
  background-position:center;
  background-color:transparent;
  background-size: cover;
  color:#333;
  position:relative;
}
div#card #custom01 .trim {
  position: relative;
  top: 9px;
  left: 15px;
  box-sizing:border-box;
}
div#card #custom01 div.name {
  font-size:0.8em;
  font-weight:bold;
  padding:15px 10px 5px 0;

}
div#card #custom01 div span {
  padding:0 10px 0 2px;
  background:#fff;
  opacity:0.8;
}
div#card #custom01 div.position{
  padding-bottom:3px;
  border:0;
}
div#card #custom01 div.company {
  font-size:0.7em;
  margin:4px 0 2px 0;
}

div#card #custom01 div.address {
  margin-top:3px;
}
div#card #custom01 div.phone {
  clear:both;
  text-decoration: none;
}
div#card #custom01 div.mobile, div#card #custom01 div.mail, div#card #custom01 div.fax,
div#card #custom01 div.web, div#card #custom01 div.position, div#card #custom01 div.address,
div#card #custom01 div.phone {
  font-size:0.5em;
}
/* ----- custom 02, standard 04a, 05a, 06a, 07a, 08a, 09a -----*/
div#card #custom02, div#card #standard04a, div#card #standard05a, div#card #standard06a, div#card #standard07a,
div#card #standard08a, div#card #standard09a {
  background-repeat:no-repeat;
  background-position:center;
  background-color:transparent;
  background-size: cover;
  color:#333;
  position:relative;
}
div#card #custom02 .trim, div#card #standard04a .trim, div#card #standard05a .trim,div#card #standard06a .trim,
div#card #standard07a .trim, div#card #standard08a .trim, div#card #standard09a .trim {
  position: relative;
  top: 9px;
  left: 15px;
  box-sizing:border-box;
}
div#card #custom02 div.name, div#card #standard04a div.name, div#card #standard05a div.name, div#card #standard06a div.name,
div#card #standard07a div.name, div#card #standard08a div.name, div#card #standard09a div.name {
  font-size:0.8em;
  font-weight:bold;
  padding:15px 0 5px 0;
  text-align: right;

}
div#card #custom02 div span, div#card #standard04a div span, div#card #standard05a div span,
div#card #standard06a div span, div#card #standard07a div span, div#card #standard08a div span, div#card #standard09a div span {
  padding:0 2px 0 10px;
  background:#fff;
  opacity:0.8;
}
div#card #custom02 div.position, div#card #standard04a div.position, div#card #standard05a div.position,
div#card #standard06a div.position, div#card #standard07a div.position, div#card #standard08a div.position,
div#card #standard09a div.position {
  padding-bottom:3px;
  text-align: right;
  border:0;
}
div#card #custom02 div.company, div#card #standard04a div.company, div#card #standard05a div.company,
div#card #standard06a div.company, div#card #standard07a div.company, div#card #standard08a div.company,
div#card #standard09a div.company {
  font-size:0.7em;
  margin:4px 0 2px 0;
  text-align: right;
}

div#card #custom02 div.address, div#card #standard04a div.address, div#card #standard05a div.address,
div#card #standard06a div.address, div#card #standard07a div.address, div#card #standard08a div.address,
div#card #standard09a div.address {
  margin-top:3px;
  text-align: right;
}
div#card #custom02 div.phone, div#card #standard04a div.phone, div#card #standard05a div.phone,
div#card #standard06a div.phone, div#card #standard07a div.phone, div#card #standard08a div.phone,
div#card #standard09a div.phone {
  clear:both;
  text-decoration: none;
}
div#card #custom02 div.mobile, div#card #custom02 div.mail, div#card #custom02 div.fax,
div#card #custom02 div.web, div#card #custom02 div.position, div#card #custom02 div.address,
div#card #custom02 div.phone, div#card #standard04a div.mobile, div#card #standard04a div.mail, div#card #standard04a div.fax,
div#card #standard04a div.web, div#card #standard04a div.position, div#card #standard04a div.address,
div#card #standard04a div.phone, div#card #standard05a div.mobile, div#card #standard05a div.mail, div#card #standard05a div.fax,
div#card #standard05a div.web, div#card #standard05a div.position, div#card #standard05a div.address,
div#card #standard05a div.phone, div#card #standard06a div.mobile, div#card #standard06a div.mail, div#card #standard06a div.fax,
div#card #standard06a div.web, div#card #standard06a div.position, div#card #standard06a div.address,
div#card #standard06a div.phone, div#card #standard07a div.mobile, div#card #standard07a div.mail, div#card #standard07a div.fax,
div#card #standard07a div.web, div#card #standard07a div.position, div#card #standard07a div.address,
div#card #standard07a div.phone, div#card #standard08a div.mobile, div#card #standard08a div.mail, div#card #standard08a div.fax,
div#card #standard08a div.web, div#card #standard08a div.position, div#card #standard08a div.address,
div#card #standard08a div.phone, div#card #standard09a div.mobile, div#card #standard09a div.mail, div#card #standard09a div.fax,
div#card #standard09a div.web, div#card #standard09a div.position, div#card #standard09a div.address,
div#card #standard09a div.phone
{
  font-size:0.5em;
}

div#card #standard04a_bgimg, div#card #standard05a_bgimg, div#card #standard06a_bgimg, div#card #standard07a_bgimg,
div#card #standard08a_bgimg, div#card #standard09a_bgimg  {
   -ms-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}



.template {
  width:100%;
  height:100%;
}

/* ################### slider ################### */
.owl-carousel .owl-item {
  background-color:#ccc;
  max-width:200px !important;
}
button.owl-dot {
  width:auto;
}
.owl-item div.active {
  background-color: #22aadd;
  padding-bottom:3px;
}

div.ui-slider .ui-slider-input{
  display: none;
}
div.ui-slider .ui-slider-track {
  margin: 0 15px 0 15px !important;
}

div.dl-button-bar {
  text-align:center;
  border-bottom:1px solid #1b1b1b;
  padding-bottom:0.5em;



}

div.dl-button-bar a, div.dl-button-bar span {
  font-size:0.6em; padding-top:4.5em; font-weight: normal;
}
.ui-mobile label {
font-size:1em;
text-align: center;
font-weight:500;
padding:0.5em 0.3em 0.3em 0.3em;
}

.ui-mobile #page_edit label {
  text-align: left;
}

.ui-footer a.ui-btn-icon-notext { margin: 0.2em; font-size:20px; }
.ui-header a.ui-btn-icon-notext { margin: 0.2em; font-size:16px; }

.ui-loader-verbose {
  box-shadow: none;
}

.colour_table {
  margin:0 auto;
}

.colour_table td { text-align: center; padding:1px 5px; width:90px; }

 .ui-page-theme-b .colour_table .ui-body-inherit {
  border-color:#333;
}
.colour_table .ui-input-text { margin:0; }

.sp-replacer { border-radius:5px; }

.icon_table a.ui-btn {
  margin:0;
}