@font-face { font-family: FSMatthew;
             src: url('font/FSMatthew-Regular.ttf') format('truetype');
			  font-style: normal;
			  font-weight: normal;
}
@font-face { font-family: 'FSMatthew-Light';
             src: url('font/FSMatthew-Light.ttf') format('truetype');
			  font-style: normal;
			  font-weight: normal;
}
@font-face { font-family: 'FSMatthew-Italic';
             src: url('font/FSMatthew-Italic.ttf') format('truetype');
             font-style: italic; }

@font-face { font-family: 'FSMatthew-Bold';
             src: url('font/FSMatthew-Bold.ttf') format('truetype');
             font-weight: bold;
}

@font-face { font-family: 'FSMatthewBold-Italic';
             src: url('font/FSMatthew-BoldItalic.ttf') format('truetype');
             font-weight: bold;
             font-style: italic;
}
html,body   {height:100%; width:100%; position:relative; padding: 0; margin:0;}
body		{font-family: FSMatthew; line-height:140%; color: #434a4f; background: #fff;}
img			{border:0;}
img.icon	{cursor:pointer}
ul			{list-style:none; margin:0; padding:0}
fieldset	{border:0; padding:0; margin:0}
iframe		{-webkit-overflow-scrolling:touch!important; border:0; width:100%; height:100%}
select		{border-radius:0; background-color: white;}
a, a:visited		{color:#434a4f; text-decoration:none; font-family: FSMatthew}

.hidden		{display:none}
.visible	{display:block}
.block		{display:block}
.inline		{display:inline}

.alignleft  {text-align:left}
.aligncenter  {text-align:center}
.alignright  {text-align:right}
.valignTop  {vertical-align:top}
.valignBottom  {vertical-align:bottom}

.left, .floatleft	{float:left}
.right, .floatright	{float:right}
.clearboth      {clear:both!important; float:none!important; margin:0; padding:0}
.interactive	{cursor:pointer}

.underline	{border-bottom:1px solid #999; padding:0 0 10px 0; margin:0 0 10px 0}
.background	{width:100%; height:100%; position:absolute;}

.touchable select, .touchable button, .touchable input	{font-size:110%}



.transition {transition: all .4s ease-in-out; webkit-transition: all .4s ease-in-out}


h1, .h1	{font-size:200%; line-height:120%; margin:0; padding:0; font-weight:normal; font-family:FSMatthew}
h1.small	{font-size:120%; margin-bottom:10px}
h2, .h2	{font-size:170%; line-height:120%; margin:0; padding:0; font-weight:normal;  font-family:FSMatthew}
h3, .h3	{font-size:150%; line-height:120%; margin:0; padding:0; font-weight:normal;  font-family:FSMatthew}
h4, .h4	{font-size:24px; line-height:140%; margin:0; padding:0; font-weight:normal; font-family:FSMatthew}
h5, .h5	{font-size:20px !important;  margin:0; padding:0; font-weight:normal;}

p	{margin-bottom:10px}
.tablet .slots.solo  p.textblock	{margin-right:25%!important}
.tablet .slots.solo div.teaserIcon	{margin-right:25%!important}
.tablet .slots.solo div.liste	{margin-right:25%!important}

hr	{margin:20px 0; border:0; border-bottom:1px solid #ccc}
hr.dotted	{border-bottom: 2px dotted #999}

span.betrag	{color:#4c808b; font-size:180%; font-weight:bold}

.spalte > .layout > .wrapper > *	{margin-left:10px; margin-right:10px; position:relative;}
.klappliste > div.content > div > .slots	{margin-left:-10px; margin-right:-10px}
.klappliste > div.content > div.farbfeld	{padding-left: 20px; padding-right: 20px;}
.klappliste .spalte.frame > .layout > .wrapper > *	{margin-left:15px; margin-right:15px;}

a.button, input.button, button {
	all:unset;
	background:#FE5000 !important;
	color: white !important;
	padding: 10px 16px !important;
	cursor: pointer;
}

a.button:disabled, input.button:disabled, button:disabled {
	background:#E3E4E5 !important;
	color: #8E9295 !important;
}


#header 	{position:relative;}
#header img	{width:100%;}
#header div.imgContainer	{position:relative; padding:0}
.mobile #header > div.imgContainer > img	{width:200%;}
.desktop #header div.text	{position:absolute; top:0}
#header div.text.dark	{color:#222}
#header p	{font-size:120%; font-family:FSMatthew; margin:0}
#header p.big	{font-size:180%; line-height:110%}
#header div.video	{width:50%; height:100%; position:absolute; top:0;left:0; background:url('bilder/ic_video.png') 50% 50% no-repeat; z-index:1; visibility:visible; opacity:.7}
.mobile #header div.video	{display:none}

#header div.text a.button	{padding:5px 30px 5px 5px;}


.desktop #header div.text	{position:absolute; z-index:2}
.mobile #header 	{margin-bottom:15px}
.mobile #header div.text	{margin-top:10px}


div.autocomplete				{background-color:#fff; border:1px solid #999; overflow-y:auto; overflow-x:hidden;}
.desktop div.autocomplete, .tablet div.autocomplete			{max-height:400px; margin-top:23px}
.mobile div.autocomplete				{height:60%; margin-top:73px}

a.text			{text-decoration:none; margin-right:0; font-weight:bold; position:relative; width:auto!important; height:auto!important}

a.text.download	{padding:2px 4px 2px 15px}
a.text.download:before {background:url(Universal-Sprite.png) -70px -245px no-repeat; top:4px; left:4px; content:" "; position:absolute; width:9px; height:15px; }
a.text.download.c2:before, .text.download.c3:before, .text.download:hover:before {background-position:-105px -245px}
a.text.download.c3:hover:before {background-position:-70px -245px}

.text.link	{padding:2px 4px 2px 15px; position:relative; display:inline-block; font-weight:bold;}
.text.link:hover	{background-color:#67a2ad}
.text.link:before {background:url(Universal-Sprite.png) 0 -245px no-repeat; top:8px; left:6px; content:" "; position:absolute; width:9px; height:15px; }
.text.link.c2:before, .text.link.c3:before, .text.link:hover:before {background-position:-35px -245px}
.text.link.c3:hover:before {background-position:-0px -245px}

a.email			{position:relative; padding-left:10px; display:inline-block}
a.email:hover	{text-decoration:underline}
a.email:before {background: url('Universal-Sprite.png') no-repeat 0 -245px; content: " "; width: 9px; height: 15px; position: absolute; left: 0; top: 6px;}

/* FLEX-CONFIG */



div.abstand	{position:relative;}

div.contentbild	{margin:0 10px 20px 10px; overflow:hidden}
div.contentbild.noMarginBottom	{margin-bottom:0!important}
.spalte.frame div.contentbild	{margin-left:0; margin-right:0;}
div.slots.solo div.contentbild	{margin:0 -10px 20px -10px!important;}
div.contentbild div	{width:100%}
div.contentbild.center div	{width:auto; margin:0 auto}
#page.Landingpage #header > div.teaser > div.col1 div.contentbild	{margin-left:0; margin-right:0}

div.bildfeld	{padding:1px 0 1px 0; margin:0 0 -2px 0 ; background-repeat: no-repeat;}
.desktop div.bildfeld > div	{margin-top:22px!important}

div.download 	{margin-bottom:15px;}
div.download div.button				{position:relative; padding:2px 5px 2px 18px; margin:0; background-color:#f9ed43; display:inline-block; font-weight:bold}
div.download div.button:hover		{color:#fff; background:#67a2ad;}
div.download div.button:before		{background:url(Universal-Sprite.png) no-repeat -70px -245px; content:" "; position:absolute; width:9px; height:15px;  left:5px; top:6px }
div.download div.button:after		{display:none }
div.download div.button:hover:before		{background-position:-105px -245px;}
div.download span	{padding:0 3px}

div.newBox			{padding:10px 0}
div.newBox > span		{background-color:#f9ed43; font-weight:bold; line-height:30px; white-space:pre-wrap; padding:4px; display:inline; left:10px; position:relative; margin-bottom:20px}

div.klappliste				{border-bottom:2px dotted #000; position:relative;}
div.klappliste.borderTop	{border-top:2px dotted #000;}
.mobile div.klappliste				{margin-left:0!important; margin-right:0!important; padding 0 5px}
.mobile #content > div > div.klappliste		{margin:-15px 0px 15px 0px;}
#content > div > div.klappliste		{margin:-15px 20px 15px 20px; padding:0}
div.klappliste > div.content	{margin-left:50px}
.mobile div.klappliste > div.content	{margin-right:10px}
div.klappliste > div.head		{cursor:pointer; padding-top:10px; position:relative}
div.klappliste > .head h2	{font-size:180%; line-height:140%; margin-bottom:0px; padding:5px 0 10px 50px}
div.klappliste > .head h4	{padding-left:50px; line-height:35px}

div.klappliste > div.head:after	{background:url(Universal-Sprite.png) -140px -490px; position:absolute; margin:10px 0 0 5px; width:29px; height:29px; left:0; top:0; content:" "}
.notTouchable div.klappliste > div.head:hover:after	{background-position:-210px -490px}
div.klappliste.open > div.head:after	{background-position: -175px -490px;}
.notTouchable div.klappliste.open > div.head:hover:after	{background-position: -245px -490px;}

div.klappliste.H2 > div.head:after	{margin:15px 0 0 5px; background-position: 0px -490px; width: 35px; height: 35px;}
.notTouchable div.klappliste.H2 > div.head:hover:after	{background-position: -70px -490px;}
div.klappliste.H2.open > div.head:after	{background-position: -35px -490px;}
.notTouchable div.klappliste.H2.open > div.head:hover:after	{background-position: -105px -490px;}


#content > div > div.klappliste > div.head:after	{margin:15px 0 0 5px; background-position: 0px -490px; width: 35px; height: 35px;}
.notTouchable #content > div > div.klappliste > div.head:hover:after	{background-position: -70px -490px;}
#content > div > div.klappliste.open > div.head:after	{background-position: -35px -490px;}
.notTouchable #content > div > div.klappliste.open > div.head:hover:after	{background-position: -105px -490px;}

div.lazyImage		{position:relative;overflow:hidden; background:url(/layout/script/aragscript/css/res/ajaxified.gif) center no-repeat }
div.lazyImage img	{position:absolute; width:100%; height:100%}

div.link		{margin-bottom:10px}
div.link.lined	{border-bottom:1px solid #ccc}
div.link p 		{display:inline-block; background-color:#fbed42; padding:1px 5px 1px 16px; border:0; margin:0 0 5px 0; font-weight:bold; position:relative;}
div.link p:hover	{background:#67a2ad; color:#fff}
div.link p:after {background:url(Universal-Sprite.png) 0 -245px no-repeat; content:" "; position:absolute; top:6px; left:5px; width:6px; height:9px;}
div.link p:hover:after {background-position:-35px -245px}
div.link.jump p:after	{-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);-webkit-transform: rotate(90deg);transform: rotate(90deg);}
div.link div.icon{background:#94b494; position:absolute; right:0px; top:0; height:22px; width:22px;}
div.link div.icon:before{background-position:-31px -312px;}
.mobile div.link div.icon	{width:25px; height:25px}
div.link a:hover div.icon	{background-color:#67a2ad}

div.liste	{margin-bottom:10px; padding-left:20px; position:relative}
div.liste div.icon	{position:absolute; top:3px; left:0}
div.liste.text	{padding:0 0 0 35px}
div.liste.icon	{padding:0 0 0 55px;}
div.liste div.label	{position:absolute; width:30px; text-align:right; top:0;left:0;  font-family:TisaWeb; font-size:160%; color:#99b199}

.mskeml > img	{margin:2px 2px -2px 2px!important; width:auto!important}

.siteactive 			{font-size:90%}
.siteactive > div		{padding:5px 150px 5px 100px; position:relative; border-bottom:1px solid #ddd;}
.mobile .siteactive > div		{padding:5px 10px 5px 80px; position:relative; border-bottom:1px solid #ddd;}
.siteactive > div h5			{font-weight:bold; font-size:110%}
.siteactive > div h5:hover			{text-decoration:underline}
.siteactive > div > p			{margin:0}
.siteactive > div > a.link:before			{top:7px}
.desktop .siteactive > div > a.link			{position:absolute; right:0; bottom:5px}
.mobile .siteactive > div > a.link			{margin:10px 0;}
.siteactive > div > label			{position:absolute; left:0; top:5px}

.mobile .siteactiveFilter	{display:none}
.siteactiveFilter		{padding:15px; background-color:#dfe9e0; height:34px;}
.siteactiveFilter > div		{font-size:16px; line-height:34px}
.siteactiveFilter select		{font-size:16px; line-height:34px}
.siteactiveFilter > button 	{margin-left: 15px}

.siteactivePager		{text-align:center; line-height:22px; margin-top:15px}
.siteactivePager div	{padding:0 15px; margin:0; background-color:transparent; display:inline-block; cursor:pointer; position:relative; vertical-align:middle}
.mobile .siteactivePager div	{padding:0 10px;}
.siteactivePager div.divide	{border-left:1px solid #000;}
.siteactivePager div.aktiv	{font-weight:bold}
.desktop .siteactivePager label	{position:absolute; left:0px; top:10px}
.mobile .siteactivePager label	{display:block}
.siteactivePager .but	{background-color:#f9ed43; height:32px; width:32px; margin:5px 10px; padding:0; display:inline-block}
.mobile .siteactivePager .but	{margin:5px; padding:0}
.siteactivePager .but.inaktiv	{background-color:#ccc; cursor:auto}
.siteactivePager .but:after {content:""; background:url(Universal-Sprite.png) no-repeat; position:absolute; left:10px; top:8px;width: 15px;height: 15px;}
.siteactivePager .but.start:after	{background-position:-286px -175px; left:10px;}
.mobile .siteactivePager .but.start	{display:none}
.siteactivePager .but.prev:after	{background-position:-210px -175px; left:14px;}
.siteactivePager .but.next:after	{background-position:0 -175px; left:14px;}
.siteactivePager .but.ende:after	{background-position:-245px -175px; left:10px;}
.mobile .siteactivePager .but.ende	{display:none}

.subueberschrift	{margin-bottom:10px;}
.subueberschrift.back	{padding:0 5px; display:inline;}

.switch				{margin-bottom:15px; position:relative; border:1px solid #ccc; border-left-width:0px }
.switch > a > div		{float:left; border-left:1px solid #ccc; width:calc(50% - 1px); position:relative; padding:10px 0}
.switch > a:after		{clear:both; content:""; display:block}
.desktop .switch div div.ico		{float:left; margin:2px 10px 0 10px;}
.mobile .switch div		{text-align:center}
.switch div.s3 p			{padding:5px 10px; font-size:110%!important; line-height:120%}
.switch.col1 .col1, .switch.col2 .col2			{background-color:#fbed42}

.switch div.ico.s2	{width:35px; height:35px;}
.switch div.ico.s2.no:before	{background-image:url('bilder/sprite-rm-gruen.png')}
.switch.col1 .col1 div.ico.s2:before, .switch.col2 .col2 div.ico.s2:before	{background-image:url('bilder/sprite-rm-schwarz.png')}
.switch.col1 .col1 div.ico.s2:after, .switch.col2 .col2 div.ico.s2:after	{border:2px solid #fbed42}

div.tabelle				{margin: 0 0 15px 0}
.mobile div.tabelle				{width:100%; overflow:auto;-webkit-overflow-scrolling:touch!important; margin:0!important; padding:0 0 25px 0;}
.mobile div.tabelle table		{width:auto; margin:0px;}
div.tabelle table		{table-layout:fixed; width:100%; border:1px solid #b4cab4; border-collapse:collapse}
div.tabelle.yellow table		{border:1px solid #f9ed43;}
div.tabelle table thead	{background-color:#dee8df; line-height:130%}
div.tabelle.yellow table thead	{background-color:#f9ed43;}
div.tabelle table thead td	{font-weight:bold}
div.tabelle table thead td.first {padding-left:40px;}
div.tabelle table thead	td.aligncenter {padding:0;}
div.tabelle table td {padding:12px 5px; vertical-align:top; position:relative;}
div.tabelle table td.first {padding-left:40px;}
div.tabelle table td.headline {font-weight:bold; font-size:110%; padding-left:30px;}
div.tabelle table td.checked		{text-align:center}
div.tabelle table td.checked:before {content:" "; background:url('Universal-Sprite.png') no-repeat -35px -525px; width:34px ; height:25px; display:inline-block}
div.tabelle table td.option			{text-align:center}
div.tabelle table td.option:before {content:" "; background:url('Universal-Sprite.png') no-repeat -210px -525px; width:34px ; height:25px; display:inline-block}
div.tabelle table tbody	{margin:0 15px; position:relative;}
div.tabelle table tbody	 tr {border-bottom:2px dotted #000}
//div.tabelle table tbody	 tr {background:url('bilder/trenner_dott.png') repeat-x center calc(100% + 2px);}
div.tabelle table tbody	 tr.green {background:none; border-bottom:1px solid #dee8df;}
div.tabelle table tbody	 tr.yellow {background:none; border-bottom:1px solid #f9ed43;}
div.tabelle table tbody	 tr.noborder {background:none;}
div.tabelle table tfoot	{text-align:center}
div.tabelle table tfoot button	{margin-bottom:-1px; font-size:100%}
div.tabelle	div.tabInfoOpener {background:url('Universal-Sprite.png') no-repeat 0 -385px; width:19px; height:19px; position:absolute; top:15px; left:10px;}
div.tabelle td div.tabInfoOpener:hover {background-position:-35px -385px}
div.tabelle td.dark		{background-color:#dee8df!important}
div.tabelle td.light		{background-color:#eff4ef!important}
div.tabelle.yellow td.dark		{background-color:#f9ed43!important}
div.tabelle.yellow td.light		{background-color:#fbf9db!important}

div.tabelle	td.open div.tabInfoOpener {background-position:-70px -385px}
div.tabelle	td.open div.tabInfoOpener:hover {background-position:-105px -385px}
div.tabelle	div.tabInfo {display:none}
div.tabelle	td.open div.tabInfo {display:block}
div.tabelle td.prozent div.skala	{border:1px solid #ccc; position:relative; padding:3px; margin:5px 25px 5px 0}
div.tabelle td.prozent div.skala div.relevanz	{background:url('bilder/bg-schraffur-gruen.png'); height:16px; }

div.tabelle div.legende	{line-height:50px; color:#9ebb9e}
div.tabelle div.legende span	{margin-right:20px}
div.tabelle div.legende div.icon	{margin:0 5px}

div.tabelle div.footer	{line-height:20px; color:#9ebb9e}
div.tabelle div.footer span	{margin-right:20px}
div.tabelle div.footer div.icon	{margin:0 5px}

p.textblock		{margin:0 0 15px 0; position:relative;}
p.textblock.datum	{margin-bottom:10px; color:#b3b3b3}
p.textblock.intro	{font-size: 125%; line-height:125%;}
p.textblock.zitat	{font-size: 130%; line-height:130%; margin-bottom:10px; padding:0 10px; color:#94b494; font-family: TisaWeb;}
p.textblock.zitat:before	{content:"\""; position:absolute; left:0}
p.textblock.zitat:after	{content:"\"";}

div.trenner	{border-bottom:1px solid #9fad9e; margin:20px 0 20px 0}
div.trenner.dotts	{background:url('bilder/trenner_dott.png') repeat-x 50% 50%; padding:2px 0; border:0px solid}

/* FORMULARE */

input[type=text]			{display:inline-block; width:calc(100% - 20px);
 line-height:21px; font-size:16px; margin:0 2px; padding:10px 16px;
		border:1px solid #434A4F; }


div.info		{background:url('Universal-Sprite.png') no-repeat 0 -385px; width:19px; height:19px; position:relative}
div.info:hover		{background-position:-35px -385px}
div.info > div	{display:none; line-height:20px; font-size:13px; padding:10px; border: 1px solid #bdd7db; background-color: #bed7dc; -moz-box-shadow: 3px 4px 5px rgba(0,0,0,.4); -webkit-box-shadow: 3px 4px 5px rgba(0,0,0,.4); box-shadow: 3px 4px 5px rgba(0,0,0,.4); position:absolute; bottom:calc(100% + 8px); right:-150px; width:300px; z-index:25;}
div.info > div.right	{right:-50px}
div.info > div.left	{right:-250px}
div.info.down > div	{top:calc(100% + 8px); bottom:auto }
.notTouchable div.info:hover:after	{position:absolute; left:calc(50% - 6px); top:-16px; content:" "; z-index:26; width: 0; height: 0; width:15px; height:15px; background-color: #bed7dc; -moz-box-shadow: 3px 4px 5px rgba(0,0,0,.4); -webkit-box-shadow: 3px 4px 5px rgba(0,0,0,.4); box-shadow: 3px 4px 5px rgba(0,0,0,.4); transform: rotate(45deg);}
.notTouchable div.info.down:hover:after	{bottom:-16px; top:auto; z-index:24}
div.info.max > div	{width:600px; right:-300px}
div.info.max > div.right	{right:-50px}
div.info.max > div.left	{right:-550px!important}

.notTouchable div.info:hover > div	{display:block}
div.info > div h5	{margin:0 0 5px 0}
div.info ul		{margin:8px 0}
div.info li		{padding:2px 0 2px 20px; position:relative}
div.info li:before		{width:5px; height:12px; left:0; top:7px; background:url('Universal-Sprite.png') no-repeat -70px -560px;position:absolute; content:" "; display:inline-block}



div.scrollable.tabelle div.xStaticContainer.head	{background:url('tabelle/scrolltable/shadow_bottom.png') repeat-x bottom; padding-bottom:4px}
div.scrollable.tabelle div.xStaticContainer.foot	{background:url('tabelle/scrolltable/shadow_top.png') repeat-x top; padding-top:4px; margin:0 0 -1px 0}
div.scrollable.tabelle div.xStaticContainer table	{position:relative;}

div.scrollable.tabelle div.yStaticContainer.left	{background:url('tabelle/scrolltable/shadow_right.png') repeat-y right; padding-right:4px}
div.scrollable.tabelle div.yStaticContainer.right	{background:url('tabelle/scrolltable/shadow_left.png') repeat-y left; padding-left:4px}


.sortable div.sorter div.up		{background-image:url('tabelle/icon/sort_up.gif');}
.sortable div.sorter div.down	{background-image:url('tabelle/icon/sort_down.gif');}


div.slider.left  {top:0; left:0;height:100%; padding-right:8px; background:url('slider/left.png') right repeat-y;}
div.slider.right  {top:0; right:0;height:100%; padding-left:8px; background:url('slider/right.png') left repeat-y;}
div.slider.top  {top:0; left:0;width:100%; padding-bottom:8px; background:url('slider/top.png') bottom repeat-x;}
div.slider.bottom  {bottom:0; left:0;width:100%; padding-top:8px; background:url('slider/bottom.png') top repeat-x;}

div.slider.left div.icon  {top:50%; right:0; background:url('slider/openLeft.png') no-repeat;}
div.slider.right div.icon  {top:50%; left:0; background:url('slider/openRight.png') no-repeat;}
div.slider.top div.icon  {bottom:0; left:50%; background:url('slider/openTop.png') no-repeat;}
div.slider.bottom div.icon  {top:0; left:50%; background:url('slider/openBottom.png') no-repeat;}

.jforms div.select			{margin:0 6px 0 2px}
div.select p	{display:block; padding:3px 30px 3px 3px; background-color: #fff; white-space:nowrap; margin:0; border:1px solid #ccc; color:#000; line-height:20px; -moz-box-shadow: inset 0 1px 2px rgba(178,178,178,.3);-webkit-box-shadow: inset 0 1px 2px rgba(178,178,178,.3);box-shadow: inset 0 1px 2px rgba(178,178,178,.3);}
div.select:after	{position:absolute; right:0px; top:0; height:28px; width:100%; background:url('tarifrechner/select/opener.png') center right no-repeat; content:" "}
div.select.open:after	{width:30px;}

.notTouchable select.styled	{display:none; visibilty:hidden}
div.select	{display:inline-block; position:relative; padding:0; cursor:pointer}
div.select > div	{display:none; z-index:10; position:absolute; max-height:200px; overflow:auto; top:calc(100% - 1px); min-width:calc(100% - 2px); box-shadow:2px 2px 4px rgba(0,0,0,.3);overflow-x: hidden;}
div.select.open > div	{display:block; }
div.select ul	{background-color:#fff; border:1px solid #ccc; min-width:70px;}
div.select.open ul	{display:block; }
div.select li			{padding:3px 10px; border-bottom:1px solid #ddd; cursor:pointer; line-height:34px; white-space:nowrap; display:block}
div.select li:hover	{background-color:#fbed42!important; color:#333}
div.select li.selected	{background-color:#fbed42;}


#dialog	{ background-color:rgba(0,0,0,.5)}
#dialog div.container.message.warning	{border:2px solid #f00}
#dialog div.container.message.error	{border:2px solid #f00}
#dialog p.buttonbar button	{display:inline-block; float:right; margin:0 0 0 10px; padding:0 5px}
.desktop #dialog div.container.message > div.content > div	{width:400px; line-height:150%}


#dialog div.container	{background-color:#fff; padding:0; box-shadow: 1px 1px 10px #000; max-height:80%; overflow:auto; -webkit-overflow-scrolling:touch!important;}
#dialog div.container.noback	{background-color:transparent}
.mobile #dialog div.container	{width:100%;}
#dialog div.content	{padding:25px}
#dialog div.container.noback div.content	{padding:0}

#dialog div.closer	{width:31px; height:31px; margin:0 20px 0 0; background-color:#f9ed43; cursor:pointer; border-color:#f9d602; position:absolute}
#dialog div.closer:before	{background:url('Universal-Sprite.png') no-repeat; content:""; position:absolute; background-position:-0px -210px; width:15px; height:15px; margin:8px 0 0 8px}
#dialog div.container p.buttonbar	{border-top:1px solid #ccc; padding-top:15px}

#dialog button:after	{display:none}
#dialog ul, #dialog p	{margin-bottom:10px}
#dialog h3	{color:#777; font-size:15pt; font-weight:100 ;margin:0 0 10px 0}
#dialog li		{padding:2px 0 2px 20px; position:relative}
#dialog li:before		{width:5px; height:12px; left:0; top:7px; background:url('Universal-Sprite.png') no-repeat -70px -560px;position:absolute; content:" "; display:inline-block}

.dialogMessage	{display:none}
#dialog .dialogMessage	{display:block}

#cloak		{display:none; position:fixed; width:100%; height:100%; top:0; left:0; opacity:.5; background:#000; z-index:10}
#cloak.active		{display:block}