/*
########################### anthrazit ag ############################
### +-----------------------------------------------------------+ ###
### |      Project Name: moPage, CSS for new moPage Design      | ###
### |      Author: Stalder, Lukas                               | ###
### |      Datum: 29.05.2012                                    | ###
### |      (c) anthrazit ag, Zuerich                            | ###
### +-----------------------------------------------------------+ ###
#####################################################################
*/




body                   { color:#333!important; background-color: white; }
.online .small         { font-size:15px;}
.light                 { color:inherit; opacity:0.6;}
a, a.intern            { color:#2696C5;}
.cmsAnchor             { position:absolute; margin-top:-330px;}
.cmsAnchorTpl          { position:absolute; margin-top:-200px;}

h1, h2, .h2, .mopagecms .pguideViewDetails h1  { font-family:ZurichB, Arial, sans-serif; font-weight:bold; margin:0 0 0 0; padding:0; color:#3f3f3f!important; font-size:44px; line-height:130%; letter-spacing: -0.04em;}
h2 a                   { color:#3f3f3f!important;}
h2, .h2                      { font-size:24px; }


/*header*/
div#header             { z-index:10; position:fixed; top:0; left:0;  height:122px; width:100%; }
div#header .bg         { height:66px; background: url(/appl/grfx/mopage/bg_header.png) repeat-x top left; }

/* gray mopage subheader*/
div#header .bgMopageBar{ height:56px; background: url(/appl/grfx/mopage/bg_mopagebar.png) #ccc repeat-x top left;}
div#header .bgMopageBar h1 { font-size:22px; margin:0; padding:0; line-height:120%; letter-spacing: -0.04em; }
div#header .bgMopageBar .domain { font-size:12px; margin:-1em 0 0 0; padding:0; line-height:120%; font-weight:normal; font-family: Zurich, Sans-Serif; letter-spacing: 0; }
div#header .bgMopageBar .withdomain img + .domain {  margin:-1em 0 0 27px;  }
div#header .bgMopageBar .left { float:left; width:815px; }
div#header .bgMopageBar .left h1 { line-height: 50px;  }
div#header .bgMopageBar .left h1.withdomain { margin-top:-6px;  }
div#header .bgMopageBar .right { float:right; width:280px; text-align: left; color:#666; position:relative; }
div#header .bgMopageBar .right a {color:#666;}
div#header .bgMopageBar .right select { width:100%; }
div#header .bgMopageBar .right .user { position: absolute; width:400px; left:0; z-index:1;  }
div#header .bgMopageBar .right .user h3 { margin:0.35em 0 0 0;  font-size: 100%; padding:0;}
div#header .bgMopageBar .right .user h3.small { font-size:11px; margin-top:0.8em;  }
div#header .bgMopageBar .right .user .admintype {  padding-top:2px; opacity:0.6;  }
div#header .bgMopageBar .right .nomopage { left:0;  }
div#header .bgMopageBar .user .profileImg { float:left; width:40px; height:40px; margin:8px 10px 0 5px; border-top:1px solid #888; border-left:1px solid #999; border-bottom:1px solid #ccc; border-radius:6px  }
div#header .bgMopageBar .right .user .small { display:block; font-size:11px; line-height:110%; margin-top:-0.1em;}
.bgMopageBar .caption     { color:#444!important; text-shadow: 0 0.6px 0 #f8f8f8; }
.bgMopageBar .caption a { color:inherit;}
.bgMopageBar .icon     { height:20px; width:auto; vertical-align: -0.4em; border-radius: 3px; }
.bgMopageBar h1 .domain .lite { color:inherit!important; opacity: 0.5 }
.bgMopageBar h1 .domain .gi {font-size:80%; vertical-align: 5% }

div#header .wrapper    { width:1324px; margin-left:auto; margin-right:auto; }
div#header .logo       { display:inline-block; margin:12px 0px 0 -3px;}

div#header .funcs      { float:right; width:822px;  margin-top:15px; position:relative; }
div#header .func       { float:left; display:inline-block; color:#fff!important; font-size: 10px; margin-right:16px; opacity:0.6; position:relative;}
div#header .funcs .selected, div#header .func:hover { opacity:1;}
div#header .right      { float:right; width:auto;margin-right:0; }
div#header .support     { margin-right:20px;}
div#header .func img   { display:block; margin:0 auto 8px auto;  width:20px; height:17px; }
div#header .versionSwitch {   color: #555; }
div#header .versionSwitch .row {margin:0 0 2px 0; padding:2px; display:inline-block;}
.mobile .versionSwitch { padding-top:0.3em; padding-bottom:0.3em;;}
.mobile .versionSwitch .row { display:inline-block; font-size:80%; width:50%; }

/* mopage portait search*/
div#header .mopageSiteSearch {  }
div#header .mopageSiteSearch input { background-color: white!important;  }
div#header .mopageSiteSearch input::placeholder { color: #708091; font-size:85%;  }
div#header #theMatches a  { text-transform: initial; }
#theMatches .icon img   { border-radius: 2px;}
#theMatches a:focus     { background-color: #f0f6ff; outline: 0;}
.typeIndicator { height:10px; width:auto; vertical-align: -0.08em; opacity: 0.5;}

/* mopage switch for sysadmins */
div#header .elementMopageSwitch { position:absolute; left:220px; top: 13px; padding:4px 5px 4px 5px; width:160px; border-radius:6px; z-index:2; }

/* mopage search*/
div#header .mopageSearch { position:absolute;  left: 2px; top:-48px; width:130px;  }
div#header input::placeholder { color:#666; font-size:85%; }
div#header input        { border:0;  border-radius:6px;}

.loginDecoImg           { margin:-20px 0 10px 0;}
h1.inverse              { color:white!important; margin-top:-65px; padding-left:10px;}

/*main wrappers/blocks*/
.blockMid		        { width:1324px; margin-left:auto; margin-right:auto; text-align:left; margin-top:142px; }
.online .wrapperContent { width:100%; min-height:655px;  }
.online .hasPreviewFrame .wrapperContent { width: 915px; float:left; }
.paddingMain            { padding:0 43px 0 43px; }
.online .wrapperWhite   { background-color:inherit; padding:0;}

/*right col*/
.columnRight			{ float:right; width:290px; text-align:left; overflow:hidden;}


/* cms sitemap */
#treecontrol .pseudoButton { min-width:0.6em;}
.mopagecms h1           { margin-bottom:0.2em;}
.mopagecms h3           { margin:0; padding:0; font-size:100%;}
.navList                { font-size:15px;  }
.navList .left          {  }
.navList .icon          { float:left; width:18%; border-radius:10px; }
/*.mobile .navList .icon  { width:15%; }*/
.navList .minRow        { padding:0.5em 0 0.5em 0; }
.mopageType             { font-size:11px; color:#888;}
.elementAddPage img     { float:left; height:30px; width:auto; margin:0.3em 1em 0.5em 0; opacity: 0.6; }

.elementServiceDescription ul { margin-top:0.3em; padding:0 0 0 1.2em;}
.elementServiceDescription h2 { margin-bottom:0.3em;}
.elementServiceWrapper  { }
.elementServiceWrapper .icon { float:left;  width:80px;}
.elementServiceDescription { width: calc(100% - 100px); float:right;}

/* existing mopage listing */
.elementMopageHome .mopageicon { width:auto; height:34px;  line-height:34px; }

/*.elementMyMopages .lite, .elementMopageHome .lite { color:inherit; opacity: 0.5;}*/

/* cms */
.qrCodeFull             { width:100%; border:0.5px solid #666;}
.elementIconSets .rowInner   { border:none!important; }
.elementIconSets h3     { margin:0.5em 0 0.3em 0; }
.elementIconSets .wrapper  { display:inline-block; text-align: center;  padding:4px; line-height:0; border-bottom:1px solid #eee; }
.elementIconSets img    { width:24px; opacity:1;}
.set_helveticons  img    { opacity:0.8; }
.elementIconSets a:hover, .elementIconSets .selected   { background-color: #ccc; }

#iconUl                 { margin:1em 0 1em 0; z-index:1003; }
#iconContainer img      { width:30px; height:auto;}

.elementSitemap .icon   { position: relative;}
.flagObjeky             { position:absolute; right:22px; top:8px; z-index:5; width:auto; padding: 13px 10px; background-color: white;  font-size: 12px; border:0.5px solid #ccc; box-shadow: 2px 2px 7px -7px #000; font-family: "Courier New", Courier, monospace; }

.submitButtonsTop input { vertical-align: middle;}

/* forms */
.transGrid                { background: url(/appl/grfx/transparent.gif) repeat;  background-size:90px 90px; }
.tableHeader td           { font-size:85%; color: #999;}

/* link rows */
.online .elementLinkRow            { width:100%; max-width:290px;  }
.fullwidth .elementLinkRow          { max-width: 100%;}
.online .elementLinkRow a, .elementDeeplink a.rowInner  { color:#222!important; font-weight:normal;  }
.online .elementLinkRow a, .online .elementLinkRow .dummyRow          { font-size:14px;  }

/* element titelbar*/
.online .elementTitleBar, .online .elementTitleBarSub   { background: none; padding:0 0 0 0!important; margin:0 0 2em 0!important; border:none; }
.online .elementTitleBar .title     { background-image: none!important; padding:0; margin:0; font-family:ZurichB, Arial, sans-serif; font-weight:bold;  font-size:34px; color:#3f3f3f; }
.online .elementTitleBar .linkRight { margin-top:0.6em;}
.mopage .thumbFullWidth { margin-top:-22px;}

/* misc */
.bold               { font-weight: bold; font-family: ZurichB; }
.strong               { font-weight: bold;  }
.tdSmall            { width:30%;}
.sum                { font-weight:bold; font-style:italic;}
dl dt               { display:inline-block; width:16%;  font-weight:bold; padding:0; margin:0; vertical-align: middle }
dl dd               { display:inline-block; width:84%;  padding:0.1em 0 0.1em 0; margin:0; border-top:1px dotted #aaa; vertical-align: middle; }
dl dd:last-of-type  { border-bottom:1px dotted #aaa;}
.multiSelect .even  { background-color: #dedede;}

/* duplicates */
.elementDuplicateList .buttonChars { margin-right:1em; }
.elementDuplicateList .row { padding:0.4em 0 0.4em 0!important; }
.elementDuplicateList .row:first-of-type { border-top: 1px solid #aaa;}
.elementDuplicateList .subRow:first-of-type { border-top:none;}
.elementDuplicateList .subRow { padding:0.2em 0 0.2em 0;}
.elementDuplicateList .row:last-child { border-bottom: 1px solid #aaa!important;}
.elementDuplicateList .row .count { width:1.5em; }
.elementDuplicateList .row .icon { padding-left:0.3em; width:2em; }
.elementDuplicateList .row .icon img { height:auto; width:18px; margin:0 0 -2px 0; padding:0; }
.elementDuplicateList .row .title { font-size:85%; width:40%; font-weight:normal; }
.elementDuplicateList .row .edit { width:30px; text-align: left; }
.elementDuplicateList .row .origin {  opacity: 0.7; font-size:85%; }
.elementDuplicateList .row .funcs  {  text-align: right; width:25%;}
.elementDuplicateList .row .funcs .buttonSmall { width:auto; min-width:70px; }
.elementDuplicateList h2 .buttonSmall { width:auto; min-width:3em; vertical-align:middle; }
.label              { background-color: #bbb; color:white; padding: 0.1em 0.4em; border:0.5px solid #fff; border-radius: 2px; font-size:68%;  letter-spacing: 0.05em; }
.matrixTableConf   { width:100%; background-color: white;}
.matrixTableConf td   { padding:0.3em 0.3em 0.3em 0.3em; line-height:115%;}
.matrixTableConf td.field   { text-align: center; }
.matrixTableConf td.field input   { width:3em; text-align: center;}
.matrixTableConf .caption   { vertical-align:top; text-align:center; font-size:80%; word-break: break-all; width:7.5%; }
.matrixTableConf .lite { color:#888!important;}
	/*.elementDuplicateList .objediticon {  vertical-align:-0.2em; margin-left:1em; }*/

.elementDuplicateList .master a, .elementDuplicateList .master .partner { color: #75b500; }
.elementDuplicateList .new { background-color: #dcedc4; }
.elementDuplicateList .dropped { background-color: #e8d1b2; }
.elementDuplicateList .anchor { position:absolute; margin-top:-140px;}
.elementDuplicateList .absBadge { top:-2px;}

.elementMatrix .tableCell { font-size:80%; vertical-align: top;  }
.elementMatrix .partnerIcon    { height:16px; width:auto; vertical-align:top;}
.elementMatrix .partner    {  font-size:10px; color:#555; vertical-align: top; display:inline-block; width:50%; margin-left:0.5em; }
.elementMatrix .master a .origin {color: #888; }
body .elementDuplicateList .elementMatrix div.contentBlockRow  { padding:5px 0 0 0!important; margin-bottom:1em;  border:0.5px solid #ddd!important; background-color: #f6f6f6; }


/* hover preview */
/*.elementMatrix .preview {  z-index:100; display:none; padding:0.5em; font-size:11px; width:200px; height:auto; background-color: white; box-shadow: 1px 1px 5px -3px #000; position:absolute; border:0.5px solid #aaa; margin:-0.5em 0 0 0; }*/
.elementMatrix .preview {background-color: white; border-radius:5px; }
.elementMatrix .preview .row {padding:0.5em!important; border:none; border-bottom:5px solid #f6f6f6!important; }
.elementMatrix .preview .row:last-of-type { border:none!important;}
.elementMatrix .preview img { width:100%; }
.elementMatrix .preview img.star { width:auto; height:9px; }
.elementMatrix .elementMapCanvas { width:100%!important; height:auto!important; }
.elementMatrix .elementMapCanvas img { width:100%!important; height:auto!important; }
.elementMatrix .titleToggleContainer { margin:0; padding:0 }
.elementMatrix .toggleContainer { margin:0 0 0.3em 0; padding:0 0 0.3em 0; border-bottom:1px dotted #ccc;}
.elementMatrix .toggleContainer:last-of-type { border:none;}


/* edit images */
.elementEditImages .img { margin:0 1em 0 0; display: block; float:left; }

.grayBg                { background-color: #f0f0f0;}
.whiteBg                { background-color: #fff;}

/* emergency nr edit */
/*.editEmergency .draggable { margin-top:1.4em; display:block; float:left; width:30px; }*/
/*.editEmergency .delete { margin-top:1.4em; display:inline; float:right;  text-align: right; }*/
.editEmergency textarea { min-height: 0!important;}
.editEmergency .td  { padding-right: 1em;}
.editEmergency .td.delete  { padding-right: 0; width:1.5em;}
.editEmergency .td.drag, .td.drag   { width:3em; text-align:center; padding-right: 0;}


/* fieldsets */
.elementForm fieldset   { border:1px solid #999; padding:0.5em;}
.elementForm fieldset legend { font-size:90%;}

/* rating overvieww */

.elementRatingOverview .th { font-weight:bold;  }
.elementRatingOverview .td { }
.elementRatingOverview .title { width:62%; padding-right:1em; font-weight:normal;}


/* cms subnav */
.elementHoverNav    { z-index:1; position:absolute; width: 400px;  left:-100px; color:#333; padding: 10px; }
.elementHoverNav #subNavWrapper   { background-color: white; }
.elementHoverNav h2 { font-size: 15px;  font-family: Zurich, Arial, Helvetica, sans-serif; letter-spacing: 0; color: #aaa!important; }
.elementHoverNav .wizard { font-size: 12px;}
.elementHoverNav .button { height:30px; font-size: 12px; line-height: 30px; width:80px;min-width: 0;}
.elementHoverNav .navList img.icon { display:none!important;}

@media screen and ( max-width: 600px ) {
	.elementMopageSettings .left, .elementMopageSettings .right, .elementMopageSettings .basicInfo, .elementMopageSettings .qrCodeFull { float:none; width: 100%!important; text-align: left; }
}
@media screen and ( max-width: 600px ) {
	.elementMopageSettings .basicInfo, .elementMopageSettings .qrCodeFull { float:none; width: 100%;  }
	.elementMopageSettings .qrCodeFull { width: 80px!important;  }
}

.elementMopageSettings .icon { width:35px; height:35px; margin:0 1em 1em 0;}

/* dropdown list */
.elementDropdown    { position:absolute; background-color: white; padding:6px; font-size:12px; z-index:2; }
.elementDropdown a  { display:block; color:#333; background-color: #eee; margin-bottom: 1px; padding:3px 10px 5px 7px;}
.elementDropdown a:hover { background-color: white;}
.elementDropdown a .gi, .elementDropdown a .fa  { margin-right:5px;}
.elementDropdown .subCaption { padding:7px 0 7px 28px; letter-spacing:1px;}

.elementPaging span.button, .elementPaging span.buttonSmall { background: none; background-color: #ccc; cursor: default;}

.stepBadge          { width:48px; height:48px; border-radius: 24px; background-color: #0a98cd; color:white; font-size: 32px; line-height: 44px; font-family:ZurichB, Arial, sans-serif; font-weight:bold; text-align: center; float:left; margin-right:10px;}


/* elementDataSources */
.elementDataSources .tdSmall { width: 90px; }
.elementDataSources .lastimport { margin-left:1.55em; }


/*
MOBILE  specific
****************
*/
#tabbar             { height:43px; overflow:hidden; }
.bgTabbar           {background-color: #525252;  }
.mobile .blockTop   { height:43px!important; z-index:100; }

#tabbar .logo       { float:left; margin:11px 0 0 0; width:20px; height:20px; background: url(/appl/grfx/mopage/a.png) no-repeat top left; background-size: contain;}

#tabbar .funcs      { float:right; margin:6px 0 0 0; width:100%; display: flex; justify-content: space-between; }
#tabbar .func       { float:left; display:inline-block; color:#fff!important; font-size:10px; margin:0 5px 0 5px; opacity:0.55; alpha(opacity = 55); position:relative;}
#tabbar .func:nth-last-child(2) { margin:0 0 0 0; }
#tabbar .last       { margin-right:0;}
#tabbar .funcs .selected, #tabbar .func:hover { opacity:1;}
#tabbar .func img   { display:block; margin:0 auto 1px auto; width:19px; height:16px; }

.mobile .bgMopageBar    { min-height:40px; background:url(/appl/grfx/bg_titlebar.png) repeat-x top center #c1c1c1; margin-bottom:0.5em; padding-top:0; padding-bottom:0; }
.mobile .bgMopageBar .buttonSmall    {  box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
.mobile .bgMopageBar h1 { font-size:20px; line-height:35px;}
.mobile .bgMopageBar  { }
.mobile .bgMopageBar .buttonSmall  { margin:7px 0 0 0!important; }

.moapp .bgMopageBar .buttonSmall    { width:24%; margin-right:2px!important;}
.moapp .bgMopageBar .fullSize    { width:100%; padding-left:0; padding-right:0; }
.moapp .bgMopageBar .buttonSmall:last-of-type    { margin-right:0!important;}

.mobile .elementMopageSwitch    { height:35px; line-height: 35px;}
.mobile .elementMopageSwitch .pseudoButtonSmall   { line-height: 150%; vertical-align: middle;}
.mobile .elementMopageSwitch select { width:100%; }
.mobile .elementMopageSwitch { width:48%; float:left; vertical-align:middle;}
/*.moapp .elementMopageSwitch select { width:85%; vertical-align: middle; }*/




/*
 tablets portrait and screen small
 *********************************
*/
@media screen and ( max-width: 768px ) {

	div#header .wrapper    { width:768px;  }
	div#header .funcs      { float:right; width:450px;  margin-top:15px; }
	.blockMid		        { width:768px;}
	.online .hasPreviewFrame .wrapperContent { width: 100%; float:none; }
	.columnRight			{ float:none; width:290px; text-align:left; overflow:hidden;}
	.online .innerColLeft           { float:left; width:100%;}
}


/* image retina display */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio : 1.5),
only screen and (max--moz-device-pixel-ratio: 1.5) {
	#tabbar .logo       { background: url(/appl/grfx/mopage/a.png); background-size:20px 20px;}
}