button#VARIO-gallery-hide
{
    background-image: url(/vario/images/bg-gallery-hide.png?v=20160428);
    border-radius: 2rem;
}

button#VARIO-gallery-hide:hover
{
    background-position: left bottom;
}

div#VARIO-gallery-image
{
    -webkit-transition: all 500ms;
    transition: all 500ms;
    border-radius: 2rem;
}

div#VARIO-eshop-cart-add-info
{
	position: fixed;
	top: -1rem;
	left: 0;
	width: 100%;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
	z-index: 1500;
}

div.-pnl~div#VARIO-eshop-cart-add-info
{
	top: 36rem;
}

div#VARIO-eshop-cart-add-info>div
{
	display: block;
	height: 80rem;
	line-height: 80rem;
	width: 800rem;
	max-width: 96%;
	outline: 1rem solid #333;
	background: rgba(255,255,255,0.9);
	font-size: 16rem;
	font-style: italic;
	font-weight: bold;
	text-align: center;
	margin: 0 auto;
}

div#VARIO-eshop-cart-add-info[data-show='n']
{
	top: -102rem!important;
}

div#SWIF-shade.loading,
div#VARIO-gallery-image.loading
{
	cursor: wait;
    background-image: url(/vario/images/bg-loading-progress.gif);
}

button#VARIO-gallery-hide:hover
{
    background-position: left bottom!important;
}

div#VARIO-gallery-prev
{
	background-image: url(/vario/images/bg-gallery-prev.png)!important;
	opacity: 0;
	transition: opacity 500ms;
	-webkit-transition: opacity 500ms;
}

div#VARIO-gallery-next
{
	background-image: url(/vario/images/bg-gallery-next.png)!important;
	opacity: 0;
	transition: opacity 500ms;
	-webkit-transition: opacity 500ms;
}

body.mobile div#VARIO-gallery-prev,
div#VARIO-gallery-prev:hover
{
    opacity: 1!important;
}

body.mobile div#VARIO-gallery-next,
div#VARIO-gallery-next:hover
{
    opacity: 1!important;
}

div#VARIO-gallery-text
{
    width: auto;
    max-width: 25%;
    max-height: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.9);
    font-size: 12rem;
    text-align: left;
    padding: 5rem;
}

div#VARIO-gallery-text>strong
{
    font: bold 12rem Verdana;
    display: block;
    text-align: left;
}

div#VARIO-gallery-text.right-bottom
{
    right: 10rem;
    bottom: 10rem;
}

div#VARIO-gallery-text.right-top
{
    right: 10rem;
    top: 40rem;
}

div#VARIO-gallery-text.left-bottom
{
    left: 10rem;
    bottom: 10rem;
}

div#VARIO-gallery-text.left-top
{
    left: 10rem;
    top: 10rem;
}

/* sitemap */
ul.VARIO-sitemap,
ul.VARIO-sitemap ul
{
    list-style: disc;
    margin-left: 20rem;
}

ul.VARIO-sitemap li
{
    line-height: 25rem;
}

/* widget */
body>div.shp-widget
{
	padding-top: 30rem;
	display: block;
	width: calc(100vw - 40rem);
	height: calc(100vh - 70rem);
	position: fixed;
	z-index: 9999;
	left: 20rem;
	top: 20rem;
	background: #fff;
	outline: 20rem solid rgba(0,0,0,0.5);
}

body>div.shp-widget>div
{
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 30rem;
	height: 30rem;
	line-height: 30rem!important;
	text-align: center;
	cursor: pointer;
}

body>div.shp-widget>iframe
{
	width: 100%;
	height: 100%;
	border: none;
	overflow: auto;
	display: block;
}

/* forms */
html[data-form='y'],
html[data-form='y'] body
{
	overflow: hidden;
}

div#VARIO-form
{
	position: fixed;
	z-index: 1001;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
}

div#VARIO-form-content
{
	height: 100vh;
    padding: 5rem 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.-pnl~div#VARIO-form div#VARIO-form-content
{
	padding: 40rem 0 5rem 0;
}

div#VARIO-form-list,
div#VARIO-form-record
{
	position: relative;
	max-height: 100%;
    text-align: center;
}

div#VARIO-form-list.loading,
div#VARIO-form-record.loading
{
    background-image: url(/vario/images/bg-loading-progress.gif);
    min-height: 300rem!important;
}

div.VARIO-datalist,
div#VARIO-datalist,
div#VARIO-record
{
    margin: 0 auto;
    position: relative;
	max-width: calc(100% - 10rem);
	max-height: calc(100vh - 10rem);
    text-align: left;
	background: #fff;
    display: inline-block!important;
	-webkit-box-shadow: 0 0 40rem #999;
	-moz-box-shadow: 0 0 40rem #999;
	box-shadow: 0 0 40rem #999;
	overflow: auto;
}

div.-pnl~div#VARIO-form div#VARIO-datalist,
div.-pnl~div#VARIO-form div#VARIO-record
{
	max-height: calc(100vh - 45rem);
}

body[data-device='phone'] div.VARIO-datalist,
body[data-device='phone'] div#VARIO-datalist,
body[data-device='phone'] div#VARIO-record
{
	max-height: calc(100vh - 130rem)!important;
}

body[data-device='phone'] div.-pnl~div#VARIO-form div#VARIO-datalist,
body[data-device='phone'] div.-pnl~div#VARIO-form div#VARIO-record
{
	max-height: calc(100vh - 165rem)!important;
}

body[data-device='phone'][data-client='firefox'] div.VARIO-datalist,
body[data-device='phone'][data-client='firefox'] div#VARIO-datalist,
body[data-device='phone'][data-client='firefox'] div#VARIO-record
{
	max-height: calc(100vh - 10rem)!important;
}

body[data-device='phone'][data-client='firefox'] div.-pnl~div#VARIO-form div#VARIO-datalist,
body[data-device='phone'][data-client='firefox'] div.-pnl~div#VARIO-form div#VARIO-record
{
	max-height: calc(100vh - 45rem)!important;
}

div#VARIO-record div.VARIO-datalist
{
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	margin: 0 0 0 5rem;
	max-height: none!important;
}

div.VARIO-datalist-title,
div#VARIO-datalist-title,
div#VARIO-record-title
{
    background: #fff;
    position: sticky!important;
	top: 0!important;
	left: 0!important;
	z-index: 3!important;
	-webkit-box-shadow: 0 2rem 5rem rgba(0,0,0,0.1);
	-moz-box-shadow: 0 2rem 5rem rgba(0,0,0,0.1);
	box-shadow: 0 2rem 5rem rgba(0,0,0,0.1);
}

body[data-device='phone'] div.VARIO-datalist-title,
body[data-device='phone'] div#VARIO-datalist-title,
body[data-device='phone'] div#VARIO-record-title
{
	position: relative!important;
}

body[data-device='phone'][data-client='firefox'] div.VARIO-datalist-title,
body[data-device='phone'][data-client='firefox'] div#VARIO-datalist-title,
body[data-device='phone'][data-client='firefox'] div#VARIO-record-title
{
	position: sticky!important;
}

div.VARIO-datalist-title>div.VARIO-datalist-content,
div#VARIO-datalist-title>div.VARIO-datalist-content,
div#VARIO-record-title>div.VARIO-record-content
{
    margin: 0 15rem;
    padding: 10rem 35rem 10rem 0;
    display: block;
    color: #333;
    font-size: 16rem;
    font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.5rem;
	z-index: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

button.VARIO-datalist-hide,
button#VARIO-datalist-hide,
button#VARIO-record-hide
{
    width: 30rem;
    height: 30rem;
    position: absolute;
    right: 10rem;
    top: 8rem;
    background: #fff;
	background-size: 100% auto;
    z-index: 1000;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
}

button.VARIO-datalist-hide:before,
button#VARIO-datalist-hide:before,
button#VARIO-record-hide:before
{
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
	position: absolute;
	left: 5rem;
	width: 20rem;
	height: 6rem;
	top: 12rem;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	background: #999;
	content: "";
}

button.VARIO-datalist-hide:after,
button#VARIO-datalist-hide:after,
button#VARIO-record-hide:after
{
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
	position: absolute;
	left: 5rem;
	width: 20rem;
	height: 6rem;
	top: 12rem;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	background: #999;
	content: "";
}

button.VARIO-datalist-hide:hover:before,
button.VARIO-datalist-hide:hover:after,
button#VARIO-datalist-hide:hover:before,
button#VARIO-datalist-hide:hover:after,
button#VARIO-record-hide:hover:before,
button#VARIO-record-hide:hover:after
{
    background: var(--sys-controls);
}

div#VARIO-record-controls div.VARIO-record-content
{
    padding: 0 10rem;
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
}

div.VARIO-datalist,
div#VARIO-datalist
{
    position: relative;
    height: auto;
    min-height: 100%;
    background: #fff;
}

fieldset div.VARIO-datalist
{
	background: transparent!important;
}

div#VARIO-record-controls
{
	display: block;
	position: relative;
	z-index: 0!important;
	padding-bottom: 10rem;
}

div#VARIO-record-controls div#shp-order-items
{
	max-width: calc(100vw - 40rem);
}

div#VARIO-record-toolbar,
div.VARIO-datalist-toolbar
{
	display: block;
	position: sticky!important;
	bottom: 0!important;
	left: 0!important;
	z-index: 2;
	background: var(--sys-background);
	min-height: 43rem;
}

body:not([data-os='windows']) div#VARIO-record-toolbar,
body:not([data-os='windows']) div.VARIO-datalist-toolbar
{
	bottom: -80rem!important;
	padding-bottom: 80rem;
}

div#VARIO-record-toolbar.hidden,
div.VARIO-datalist-toolbar.hidden
{
	display: none!important;
}

div.VARIO-datalist-toolbar div.VARIO-datalist-content,
div#VARIO-datalist-toolbar div.VARIO-datalist-content,
div#VARIO-record-toolbar div.VARIO-record-content
{
    height: auto;
    text-align: center;
	padding-bottom: 6rem;
	min-height: 0rem;
}

div.VARIO-datalist-grid,
div#VARIO-datalist-grid
{
    display: block!important;
    padding: 0 8rem 15rem 15rem;
    position: relative;
}

div#VARIO-record div.VARIO-datalist div.VARIO-datalist-grid
{
	padding: 0;
}

table.VARIO-datalist-headers
{
	position: sticky;
	top: 44rem;
}

body[data-device='phone'] table.VARIO-datalist-headers
{
	top: 0;
	position: relative;
}

body[data-device='phone'][data-client='firefox'] table.VARIO-datalist-headers
{
	top: 44rem;
	position: sticky;
}

div.VARIO-record-content table.VARIO-datalist-headers
{
	top: 0!important;
	position: relative!important;
}

table.VARIO-datalist-headers,
table#VARIO-datalist-headers
{
    width: inherit;
    table-layout: fixed;
    border-left: 1rem solid #999;
    border-top: 1rem solid #999;
    z-index: 1;
}

table.VARIO-datalist-headers td.VARIO-datalist-header,
table#VARIO-datalist-headers td.VARIO-datalist-header
{
    border-right: 1rem solid #999;
    border-bottom: 1rem solid #999;
    overflow: hidden;
    background: var(--sys-background);
    padding: 5rem 0;
}

table.VARIO-datalist-headers td.VARIO-datalist-header.eraser,
table#VARIO-datalist-headers td.VARIO-datalist-header.eraser
{
    text-align: center;
}

table.VARIO-datalist-headers td.VARIO-datalist-header div,
table#VARIO-datalist-headers td.VARIO-datalist-header div
{
    display: block;
    height: 13rem;
    line-height: 13rem!important;
    padding: 0 3rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 10rem;
    overflow: hidden;
    text-align: center;
}

tr.VARIO-datalist-filter td,
tr#VARIO-datalist-filter td
{
    border-right: 1rem solid #999;
    border-bottom: 1rem solid #999;
    overflow: hidden;
    position: relative;
    line-height: 18rem;
    background: #eee!important;
}

tr.VARIO-datalist-filter td.filtering,
tr#VARIO-datalist-filter td.filtering
{
	background: #fff!important;
}

tr.VARIO-datalist-filter input,
tr.VARIO-datalist-filter select,
tr#VARIO-datalist-filter input,
tr#VARIO-datalist-filter select
{
    font-size: 10rem;
    border: 1rem solid #fff;
    height: 16rem;
    line-height: 16rem;
    width: 100%;
    background: #fff;
    position: relative;
    z-index: 0;
    outline: none;
}

tr.VARIO-datalist-filter select,
tr#VARIO-datalist-filter select
{
    display: block;
    line-height: 18rem;
    height: 18rem;
}

body.safari tr.VARIO-datalist-filter select,
body.safari tr#VARIO-datalist-filter select
{
    line-height: 14rem;
    height: 14rem;
}

tr.VARIO-datalist-filter option,
tr#VARIO-datalist-filter option
{
    font-size: 10rem;
}

tr.VARIO-datalist-filter input,
tr#VARIO-datalist-filter input
{
    cursor: text;
}

div.VARIO-datalist-data,
div#VARIO-datalist-data
{
    display: block;
    background: #fff;
	position: relative;
	width: auto;
}

div.VARIO-datalist-data table,
div#VARIO-datalist-data table
{
    color: #fff;
    font-size: 11rem;
    table-layout: fixed;
    border-left: 1rem solid #ccc;
	border-right: 7rem solid #fff;
	position: relative;
}

div#VARIO-record div.VARIO-datalist div.VARIO-datalist-data table
{
	border-right: none;
}

div.VARIO-datalist-data table tr:nth-of-type(odd),
div#VARIO-datalist-data table tr:nth-of-type(odd)
{
    background: #f5f5f5;
}

div.VARIO-datalist-data table tr:hover,
div#VARIO-datalist-data table tr:hover
{
    background: #FFE4B2!important;
}

div.VARIO-datalist-data table td,
div#VARIO-datalist-data table td
{
    padding: 0rem;
    height: 30rem;
    border-right: 1rem solid #ccc;
    border-bottom: 1rem solid #ccc;
    text-align: left;
    overflow: hidden;
}

div.VARIO-datalist-data table td span,
div#VARIO-datalist-data table td span
{
    padding: 2rem 4rem;
    white-space: normal;
	overflow: hidden;
    display: block;
    line-height: 15rem;
    font-size: 11rem;
}

div.VARIO-datalist-data table td span *,
div#VARIO-datalist-data table td span *
{
    line-height: 16rem;
    font-size: 11rem;
}

div.VARIO-datalist-results,
div#VARIO-datalist-results
{
    position: absolute;
    left: 15rem;
    top: 13rem;
    width: auto;
    height: 16rem;
	white-space: nowrap;
}

div.VARIO-datalist-results div,
div#VARIO-datalist-results div
{
    font-size: 11rem;
    color: #fff;
    height: 16rem;
    line-height: 16rem;
    margin-left: 5rem;
    margin-right: 5rem;
	display: inline-block;
	vertical-align: top;
	position: relative;
	top: 1rem;
}

button.VARIO-datalist-prev,
button#VARIO-datalist-prev
{
    width: 16rem;
    height: 16rem;
    line-height: 16rem;
	color: #fff;
	background: transparent;
	display: inline-block;
	vertical-align: top;
}

button.VARIO-datalist-next,
button#VARIO-datalist-next
{
    width: 16rem;
    height: 16rem;
	line-height: 16rem;
	color: #fff;
	background: transparent;
	display: inline-block;
	vertical-align: top;
}

img.VARIO-datalist-edit,
img.VARIO-datalist-remove
{
    width: 20rem;
    height: 20rem;
    margin: 5rem 2rem 0 2rem;
    cursor: pointer;
}

button.VARIO-datalist-erase,
button#VARIO-datalist-erase
{
    width: 30rem;
    height: 30rem;
    border: none;
    background: url(/vario/images/bg-list-erase.png) left top no-repeat;
	background-size: 100% 100%;
}

button.VARIO-datalist-prev:hover,
button.VARIO-datalist-next:hover,
button#VARIO-datalist-prev:hover,
button#VARIO-datalist-next:hover
{
    background-position: left bottom;
}

div.VARIO-imagebox
{
    display: inline-block;
    margin: 5rem;
    position: relative;
    background: #7F7F7F;
    border-radius: 2rem;
    overflow: hidden;
	vertical-align: top;
	text-align: left!important;
}

div.VARIO-imagebox>div.wrap
{
	display: block;
	position: relative;
	overflow: hidden;
	background: #fff url(/vario/images/bg-imagebox-image.png);
	padding: 40rem;
}

div.VARIO-imagebox>div.wrap[data-removed='y']
{
	background-color: red!important;
}

div.VARIO-imagebox>div.wrap>div
{
	width: 100%;
	position: relative;
}

div.VARIO-imagebox label
{
	color: #fff!important;
}

div.VARIO-imagebox>div.SWIF-control
{
	left: 0;
	bottom: 0;
}

div.VARIO-imagebox div.VARIO-imagebox-layer
{
    position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	bottom: 0;
}

div.VARIO-imagebox img.VARIO-imagebox-image
{
    /*border: 2000rem solid transparent;*/
    position: absolute;
    z-index: 0;
}

div.VARIO-imagebox div.VARIO-imagebox-layer div.VARIO-imagebox-shade-left
{
    position: absolute;
    left: -40rem;
    top: -40rem;
    height: calc(100% + 80rem);
    z-index: 1;
    background: rgba(0,0,0,0.25);
	border-right: 1rem solid rgba(255,0,0,0.5);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 40rem;
}

div.VARIO-imagebox div.VARIO-imagebox-layer div.VARIO-imagebox-shade-right
{
    position: absolute;
    right: -40rem;
	top: -40rem;
    height: calc(100% + 80rem);
    z-index: 1;
    background: rgba(0,0,0,0.25);
	border-left: 1rem solid rgba(255,0,0,0.5);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 40rem;
}

div.VARIO-imagebox div.VARIO-imagebox-layer div.VARIO-imagebox-shade-top
{
    position: absolute;
    top: -40rem;
	left: -40rem;
	width: calc(100% + 80rem);
    z-index: 1;
    background: rgba(0,0,0,0.25);
	border-bottom: 1rem solid rgba(255,0,0,0.5);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: 40rem;
}

div.VARIO-imagebox div.VARIO-imagebox-layer div.VARIO-imagebox-shade-bottom
{
    position: absolute;
    left: -40rem;
	bottom: -40rem;
	width: calc(100% + 80rem);
    z-index: 1;
    background: rgba(0,0,0,0.25);
	border-top: 1rem solid rgba(255,0,0,0.5);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: 40rem;
}

div.VARIO-imagebox div.VARIO-imagebox-layer div.VARIO-imagebox-cut
{
    position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
    z-index: 2;
    background: transparent;
    font-size: 0!important;
}

div.VARIO-imagebox div.VARIO-imagebox-layer div.VARIO-imagebox-mover
{
    position: absolute;
    left: 0rem;
    top: 0rem;
    width: 100%;
    height: 100%;
    z-index: 3;
}

div.VARIO-imagebox img.VARIO-imagebox-zoom-in,
div.VARIO-imagebox img.VARIO-imagebox-zoom-out,
div.VARIO-imagebox img.VARIO-imagebox-remove
{
    position: absolute;
    right: 5rem;
    bottom: 5rem;
    width: 27rem;
    height: 27rem;
    cursor: pointer;
}

div.VARIO-imagebox img.VARIO-imagebox-zoom-out
{
	margin-right: 47rem!important;
}

div.VARIO-imagebox img.VARIO-imagebox-zoom-in
{
    right: 37rem;
	margin-right: 47rem!important;
}

div.VARIO-imagebox img.VARIO-imagebox-remove.hidden~img.VARIO-imagebox-zoom-in,
div.VARIO-imagebox img.VARIO-imagebox-remove.hidden~img.VARIO-imagebox-zoom-out
{
	margin-right: 0!important;
}

button#VARIO-cover-hide
{
    background-image: url(/vario/images/bg-form-hide.png);
}

button#VARIO-cover-hide:hover
{
    background-position: left bottom!important;
}

div.VARIO-html-editor
{
    display: block;
    margin-top: 63rem;
    position: relative;
    background: #999;
    border-radius: 2rem;
}

div.VARIO-html-editor>span
{
	position: absolute;
	top: -43rem;
	right: 10rem;
	z-index: 2;
	background: url(/vario/images/ico/resize.png) left top no-repeat;
	width: 32rem;
	height: 32rem;
	cursor: pointer;
}

div.VARIO-html-editor div.VARIO-html-editor-panel
{
    border-radius: 2rem;
    border-bottom-left-radius: 0rem;
    border-bottom-right-radius: 0rem;
    background: #999;
    border: 1rem solid #999;
    display: block;
    height: 32rem;
    padding: 5rem 0;
    position: absolute;
    z-index: 1;
    top: -53rem;
}

div.VARIO-html-editor div.VARIO-html-editor-panel span
{
    margin: 0 10rem;
    height: 32rem;
    line-height: 32rem;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    font-style: italic;
}

div.VARIO-html-editor div.VARIO-html-editor-panel img
{
    cursor: pointer;
    margin-left: 5rem;
    margin-right: 5rem;
}

div.VARIO-html-editor div.VARIO-html-editor-content
{
    display: block;
    overflow: hidden;
    resize: vertical;
    min-height: 300rem;
    position: relative;
    z-index: 0;
    border: 1rem solid #999;
    background: #fff;
    border-bottom-left-radius: 4rem;
    border-bottom-right-radius: 4rem;
}

div.VARIO-html-editor iframe.VARIO-html-editor-frame
{
    background: #fff;
    height: 100%;
    display: block;
    overflow: hidden;
    margin-top: -1rem;
    border-bottom-right-radius: 22rem;
    resize: none!important;
}

div.VARIO-html-editor div.VARIO-html-editor-dialog
{
    border-bottom-left-radius: 4rem;
    border-bottom-right-radius: 4rem;
    background: url(/vario/images/bg-hted-shade.png);
    display: none;
    overflow: auto;
    overflow-x: hidden;
    height: 100%;
    position: absolute;
    z-index: 3;
    left: 1rem;
    top: -1rem;
    border-bottom: 1rem solid #999;
}

div.VARIO-html-editor div.VARIO-html-editor-dialog table
{
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

div.VARIO-html-editor div.VARIO-html-editor-dialog td
{
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}

div.VARIO-html-editor div.VARIO-html-editor-dialog fieldset.SWIF-fieldset
{
    width: 600rem;
    padding: 0 20rem 20rem 20rem;
    background: #f9f9f9;
    border-radius: 2rem;
    margin-left: 50%;
    position: relative;
    left: -320rem;
}

div.VARIO-html-editor div.VARIO-html-editor-dialog fieldset.SWIF-fieldset legend
{
    padding-right: 0rem;
    padding-left: 0rem;
    text-indent: 5rem;
    border-radius: 2rem;
    border-right-width: 1rem;
    margin-top: -13rem;
}

/* rich text editor */
div.VARIO-rich-text-editor
{
    display: block;
    margin: 5rem;
    position: relative;
    background: #999;
	width: calc(100% - 10rem);
}

div.VARIO-rich-text-editor div.VARIO-rich-text-editor-panel
{
    background: #ccc;
    border: 1rem solid #999;
    border-bottom: none;
    display: block;
    width: 100%;
    height: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.VARIO-rich-text-editor div.VARIO-rich-text-editor-panel img
{
    display: inline-block;
	vertical-align: middle;
    cursor: pointer;
    margin: 2rem;
    width: 36rem;
}

div.VARIO-rich-text-editor div.VARIO-rich-text-editor-content
{
    display: block;
    overflow: hidden;
    position: relative;
    z-index: 0;
    border: 1rem solid #999;
    background: #fff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
}

div.VARIO-rich-text-editor iframe.VARIO-rich-text-editor-frame
{
    background: #fff;
    height: 100%;
    display: block;
}

div.VARIO-rich-text-editor div.VARIO-rich-text-editor-dialog
{
    border-bottom-left-radius: 4rem;
    border-bottom-right-radius: 4rem;
    background: url(/vario/images/bg-hted-shade.png);
    display: none;
    overflow: auto;
    overflow-x: hidden;
    height: 100%;
    position: absolute;
    z-index: 3;
    left: 1rem;
    top: -1rem;
    border-bottom: 1rem solid #999;
}

div.VARIO-rich-text-editor div.VARIO-rich-text-editor-dialog table
{
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

div.VARIO-rich-text-editor div.VARIO-rich-text-editor-dialog td
{
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}

div.VARIO-rich-text-editor div.VARIO-rich-text-editor-dialog fieldset.SWIF-fieldset
{
    width: 600rem;
    padding: 10rem;
    background: #fff;
    position: relative;
    left: calc(50% - 310rem);
}

div.VARIO-rich-text-editor div.VARIO-rich-text-editor-dialog fieldset.SWIF-fieldset>legend
{
	top: 20rem;
}

/* user panel */
@media all
{
	div.-pnl
	{
		position: fixed;
		left: 0;
		top: -4rem;
		width: 100%;
		height: 40rem;
		z-index: 2500;
		text-align: center;
		background: #000;
	}

	div.-pnl>div
	{
		padding: 0 2rem;
		height: auto;
		width: auto;
		max-width: 100%;
		display: inline-block;
		margin: 0 auto;
		white-space: nowrap;
		font-size: 0;
	}

	div.-pnl div.-btn
	{
		width: auto;
		display: inline-block;
		height: 18rem;
		line-height: 18rem;
		font-size: 11rem;
		padding: 7rem;
		border: 1rem solid #ccc;
		background: #eee;
		font-weight: bold;
		cursor: pointer;
		color: #000;
		position: relative;
		margin: 2rem;
		letter-spacing: 0.5rem;
		vertical-align: bottom;
	}

	div.-pnl div.-btn span
	{
		height: 100%;
		line-height: 100%;
		font-size: inherit;
		font-weight: inherit;
		display: inline-block;
		cursor: inherit;
	}

	div.-pnl div.-grp span
	{
		font-weight: bold;
		cursor: pointer;
		color: #000;
		letter-spacing: 1rem;
		font-size: 13rem;
		line-height: 18rem;
	}

	div.-pnl div.-btn.-img
	{
		padding-left: 45rem;
	}

	div.-pnl div.-btn img,
	div.-pnl div.-grp>img
	{
		width: 28rem;
		height: 28rem;
		position: absolute;
		left: 0;
		top: 0;
		cursor: pointer;
		padding: 2rem;
		background: #eee;
		border-right: 1rem solid #ccc;
		border-bottom: 1rem solid #ccc;
		z-index: 2;
	}

	div.-pnl div.-btn:hover
	{
		background-color: #fff;
	}

	div.-pnl div.-grp
	{
		display: inline-block;
		height: 18rem;
		line-height: 18rem;
		padding: 7rem 10rem 7rem 45rem;
		border: 1rem solid #ccc;
		background: #eee left bottom repeat-x;
		font-weight: bold;
		cursor: pointer;
		color: #000;
		position: relative;
		margin: 2rem;
		letter-spacing: 0.5rem;
		font-size: 11rem;
		white-space: normal;
		vertical-align: bottom;
	}

	div.-pnl div.-grp div.-itm
	{
		height: auto;
		position: absolute;
		top: 41rem;
		left: -1rem;
		width: 350rem;
		border: 1rem solid #ccc;
		background: #eee;
		display: none;
		padding: 0 0 4rem 0;
		text-align: left;
		z-index: 0;
	}

	div.-pnl div.-grp div.-bdg
	{
		position: absolute;
		background: #eee;
		border-left: 1rem solid #ccc;
		border-right: 1rem solid #ccc;
		display: block;
		width: 100%;
		height: 10rem;
		bottom: -10rem;
		left: -1rem;
		display: none;
		z-index: 1;
	}

	div.-pnl div.-grp.-hvr div.-bdg,
	div.-pnl div.-grp.-hvr div.-itm
	{
		display: block;
	}

	div.-pnl div.-grp div.-itm div.-btn
	{
		margin: 4rem 0 0 4rem;
		width: 115rem!important;
	}
}

@media all and (max-width: 960px)
{
	div.VARIO-imagebox
	{
		min-width: calc(50% - 10rem)!important;
	}

	div.-pnl div.-grp
	{
		font-size: 0!important;
		padding-right: 0!important;
		padding-left: 0!important;
		width: 32rem!important;
	}
}

@media all and (max-width: 640px)
{
	div.VARIO-imagebox
	{
		display: block;
		width: calc(100% - 10rem)!important;
	}
}


@media all and (max-width: 480px)
{
	div.-pnl>div>div.-btn.-img
	{
		font-size: 0!important;
		padding-right: 0!important;
		padding-left: 0!important;
		width: 32rem!important;
	}

	div.-pnl div.-grp div.-itm
	{
		width: 177rem;
		max-height: calc(100vh - 53rem);
		overflow: auto;
	}

}