/* IMPORTS */

@import 'icons.css';

/* GENERAL */

html, body
{
	min-width: 876px;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	font-family: 'proxima-nova', 'Proxima Nova', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	font-size: 16px;
	line-height: 1;
	color: #505c63;
	-webkit-text-size-adjust: none;
}

#page
{
	position: relative;
	min-height: 100%;
}

a
{
	font-weight: 600;
	text-decoration: none;
	
	-webkit-transition: all 0.25s linear;
	   -moz-transition: all 0.25s linear;
		-ms-transition: all 0.25s linear;
		 -o-transition: all 0.25s linear;
		 	transition: all 0.25s linear;
}

hr.clearer
{
  visibility:hidden;
  clear:both;
}

/* HEADER SECTION */

#header
{
	height: 104px;
	margin-bottom: 36px;
	border-bottom: 2px solid #eff1f0;
	background: #f6f7f7;
}

#header div.frame, #footer div.frame
{
	max-width: 1100px;
	min-width: 800px;
	margin: 0 auto;
	padding: 0 38px;
}

#header div.appicon /* App icon */
{
	float: left;
	width: 64px;
	height: 104px;
	margin-left: -6px;
	background: url('../images/tower.png') center no-repeat;
  background-size: 64px 64px;
}

#header div.title /* Title & platform switch */
{
	float: left;
	margin-left: 12px;
	font-weight: 700;
	color: #a7adb1;
}

#header div.title h1
{
	margin: 29px 0 4px;
	font-size: 24px;
	color: #505c63;
}

#header div.title span
{
	color: #505c63;
	margin-right: 9px;
}

#header div.title a
{
	color: #505c63;
}

#header div.title a:hover, div.navigation a:hover, #footer a
{
	color: #eb9e34;
}

#footer a:hover
{
	color: #212c33;
}

#header div.navigation /* Navigation & search field */
{
	float: right;
	position: relative;
	margin-top: 20px;
	text-align: right;
	line-height: 1.4em;
	color: #a7adb1;
}

#header div.navigation span
{
	font-size: 20px;
}

#header div.navigation a
{
	margin: 0 10px;
	color: #505c63;
}

#header div.navigation a:last-of-type
{
	margin-right: 0;
}

#header div.navigation input
{
	outline: none;
	color: #505c63;
	-webkit-appearance: none;
}

#header div.navigation input[type='text']
{
	position: relative;
	width: 190px;
	margin: 6px 0 0 0;
	padding: 6px 30px 6px 9px;
	border: 2px solid #e9ebeb;
	border-radius: 3px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
}

#header div.navigation input[type='submit']
{
	position: absolute;
	opacity: 0;
	visibility: hidden;
	bottom: 2px;
	right: -8px;
	margin: 0;
	padding: 6px 7px 7px;
	border: 0;
	border-radius: 0 1px 1px 0;
	font-family: 'help-icons';
	font-size: 16px;
	background: transparent;
	cursor: pointer;
	
	-webkit-transition: opacity 0.15s linear, visibility 0.15s linear, right 0.15s linear, background 0.15s linear;
	   -moz-transition: opacity 0.15s linear, visibility 0.15s linear, right 0.15s linear, background 0.15s linear;
		-ms-transition: opacity 0.15s linear, visibility 0.15s linear, right 0.15s linear, background 0.15s linear;
		 -o-transition: opacity 0.15s linear, visibility 0.15s linear, right 0.15s linear, background 0.15s linear;
		 	transition: opacity 0.15s linear, visibility 0.15s linear, right 0.15s linear, background 0.15s linear;
}

#header div.navigation input[type='submit']:hover, #header div.navigation input[type='text'].filled + input[type='submit']:focus
{
	background: #e9ebeb;
}

#header div.navigation input[type='text']:focus + input[type='submit'], #header div.navigation input[type='text'].filled + input[type='submit']
{
	opacity: 1;
	visibility: visible;
	right: 2px;
}

#header ::-webkit-input-placeholder
{
	color: #a7adb1;
}

#header :-moz-placeholder
{
	color: #737d82;
}

#header ::-moz-placeholder
{
	color: #737d82;
}

#header :-ms-input-placeholder
{
	color: #737d82;
}

/* MAIN SECTION */

div.fluid
{
  position:relative;
	max-width: 1100px;
	min-width: 800px;
	margin: 0 auto;
	padding: 0 38px 116px;
}

div.fluid:after
{
	/* CLEARFIX */
	content: '';
	display: table;
	clear: both;
}

/* SIDEBAR */

#sidebar
{
	float:left;
	width: 297px;
	margin: 4px 0 10px;
	border: 2px solid #505c63;
	border-radius: 5px;
}

#sidebar ul /* First level */
{
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 18px;
}

#sidebar > ul > li
{
	border-bottom: 1px solid #505c63;
	
	-webkit-transition: background 0.2s linear;
	   -moz-transition: background 0.2s linear;
		-ms-transition: background 0.2s linear;
		 -o-transition: background 0.2s linear;
			transition: background 0.2s linear;
}

#sidebar > ul > li:first-child, #sidebar > ul > li:first-child > a
{
	border-radius: 3px 3px 0 0;
}

#sidebar > ul > li:last-child, #sidebar > ul > li:last-child > a, #sidebar > ul > li:last-child ul
{
	border-radius: 0 0 3px 3px;
}

#sidebar ul li:last-child
{
	border-bottom: 0;
}

body #sidebar ul li.active
{
	background: #e5e7e8;
}

#sidebar ul li a
{
	display: block;
	padding: 16px 44px 16px 20px;
	font-weight: inherit;
	text-decoration: none;
	line-height: 1.3em;
	color: inherit;
	
	-webkit-transition: background 0.15s linear;
	   -moz-transition: background 0.15s linear;
		-ms-transition: background 0.15s linear;
		 -o-transition: background 0.15s linear;
			transition: background 0.15s linear;
}

#sidebar ul li > a
{
	position: relative;
}

#sidebar ul li.active > a
{
	padding-top: 15px;
}

#sidebar ul li ul li:first-child.secondLevelPage
{
	border-top: 1px dashed #cfd3d6;
}

#sidebar ul li.active ul li:first-child.secondLevelPage
{
	border-top: 1px dashed #b1b9bd;
}

#sidebar > ul > li > a:hover, #sidebar ul li.expanded
{
	background: #f6f7f7;
}

#sidebar > ul > li.active > a:hover
{
	background: transparent;
}

#sidebar > ul > li > a:after
{
	position: absolute;
	display: block;
	content: '\e601';
	width: 16px;
	height: 16px;
	top: 19px;
	right: 16px;
	font-family: 'help-icons';
	font-size: 16px;
	line-height: 1;
	
	-webkit-transition: -webkit-transform 0.2s linear;
	   -moz-transition: -moz-transform 0.2s linear, transform 0.2s linear;
		-ms-transition: -ms-transform 0.2s linear, transform 0.2s linear;
		 -o-transition: -o-transform 0.2s linear, transform 0.2s linear;
			transition: transform 0.2s linear;
}

#sidebar > ul > li.expanded > a:after
{
	-webkit-transform: rotate(180deg);
	   -moz-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		 -o-transform: rotate(180deg);
			transform: rotate(180deg);
}

#sidebar ul li ul /* Second Level */
{
	display: none;
	font-size: 16px;
	background: #f6f7f7;
}

#sidebar ul li.active ul
{
	display: block;
	background: #e5e7e8;
}

#sidebar ul li ul li
{
	box-shadow: none;
}

#sidebar ul li ul li.sectionHeader /* Section heading */
{
	margin-top: 10px;
	padding: 18px 0 6px 20px;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 700;
	border-top: 1px dashed #cfd3d6;
}

#sidebar ul li.active ul li.sectionHeader
{
	border-top: 1px dashed #b1b9bd;
}

#sidebar ul li ul li.sectionHeader:first-child
{
	margin-top: 0;
}

#sidebar ul li ul li a
{
	position: relative;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 30px;
  padding-right: 18px;
	left: 0;
	
	-webkit-transition: left 0.15s linear, color 0.15s linear;
	   -moz-transition: left 0.15s linear, color 0.15s linear;
		-ms-transition: left 0.15s linear, color 0.15s linear;
		 -o-transition: left 0.15s linear, color 0.15s linear;
		 	transition: left 0.15s linear, color 0.15s linear;
}

#sidebar ul li ul li a:hover
{
	left: 6px;
	color: #e59422;
}

#sidebar ul li.active ul li a:hover
{
	color: #e59422;
}

#sidebar ul li ul li.current a
{
	font-weight: 600;
	color: #e59422;
}

#sidebar ul li:first-child.secondLevelPage a
{
	padding-top: 16px;
}

#sidebar ul li ul li:last-child a
{
	padding-bottom: 16px;
}

#sidebar ul li ul li a:before
{
	position: absolute;
	display: block;
	content: '›';
	padding: 0 10px 0 0;
	top: 4px;
	left: 20px;
}

#sidebar ul li:first-child.secondLevelPage a:before
{
	top: 15px;
}

/* ARTICLE SECTION */

#article
{
  position:relative;
	margin-left: 340px;
	line-height: 1.6;
}

#article h1, #article h2
{
	margin: 0;
	line-height: 1;
}

#article h1
{
	margin-bottom: 14px;
	font-size: 32px;
}

#article h2
{
	margin: 50px 0 15px;
}

#article h3
{
  margin: 20px 0 5px;
}

#article h4
{
  margin: 10px 0 5px;
}

#article p
{
	margin: 0 0 22px;
}
#article .steps p
{
	clear: none;
	margin: 0 0 22px;
}

#article a
{
	color: #eb9e34;
	
	-webkit-transition: color 0.15s linear;
	   -moz-transition: color 0.15s linear;
		-ms-transition: color 0.15s linear;
		 -o-transition: color 0.15s linear;
		 	transition: color 0.15s linear;
}

#article a:hover
{
	color: #212c33;
}

#article a[target^='_blank'] /* Outgoing link */
{
	position: relative;
	padding-left: 22px;
}

#article a[target^='_blank']:before
{
	position: absolute;
	display: block;
	content: '\e600';
	width: 16px;
	height: 16px;
	top: -2px;
	left: 2px;
	font-family: 'help-icons';
	font-size: 16px;
	font-weight: normal;
}

#article p a.image /* Floating image */
{
	position: relative;
	float: left;
	margin: 6px 22px 8px 0;
	text-align: center;
	font-size: 14px;
	font-weight: inherit;
	font-style: italic;
	line-height: 1.2em;
	color: #737d82;
}

#article .image.right
{
	float: right;
	margin: 6px 0 8px 22px;
}
#article .image.left
{
	float: left;
	margin: 6px 22px 8px 0px;
}

#article a.image:after
{
	position: absolute;
	display: block;
	content: '\e604';
	width: 28px;
	height: 28px;
	border-radius: 2px;
	font-family: 'help-icons';
	font-size: 16px;
	font-style: normal;
	top: 10px;
	right: 4px;
	line-height: 28px;
	background: #505c63;
	color: #fff;
	pointer-events: none;
	
	-webkit-transition: background 0.15s linear;
	   -moz-transition: background 0.15s linear;
		-ms-transition: background 0.15s linear;
		 -o-transition: background 0.15s linear;
		 	transition: background 0.15s linear;
}

#article a.image:hover:after
{
	background: #eb9e34;
}

#article a img
{
	display: block;
	margin-bottom: 6px;
	border: 2px solid #505c63;
	border-radius: 5px;
	
	-webkit-transition: border-color 0.15s linear;
	   -moz-transition: border-color 0.15s linear;
		-ms-transition: border-color 0.15s linear;
		 -o-transition: border-color 0.15s linear;
		 	transition: border-color 0.15s linear;
}

#article a.image:hover img
{
	border-color: #eb9e34;
}

#article ul /* Regular list */
{
  margin:0px 0px 25px 0px;
	padding-left: 20px
}

#article ul li
{
	position: relative;
	list-style: none;
}

#article ul li:before
{
	position: absolute;
	display: block;
	content: '';
	width: 10px;
	height: 10px;
	top: 7px;
	left: -20px;
	background: #505c63;
}

#article ul li h6, #article ol li h6
{
	margin: 0;
	font-size: inherit;
	font-weight: 700;
}

#article ol /* Step-by-step list */
{
	counter-reset: li;
	margin: 0;
	padding: 0;
}

#article ol li
{
	position: relative;
	list-style: none;
	margin-left: 44px;
}

#article ol li:not(:first-child)
{
	margin-top: 10px;
}

#article ol > li:before
{
	position: absolute;
	display: block;
	content: counter(li);
	counter-increment: li;
	width: 32px;
	height: 32px;
	top: 12px;
	margin-top: -16px;
	left: -46px;
	border-radius: 100%;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
	background: #505c63;
	color: #fff;
}
#article ol.alpha > li:before
{
	content: counter(li, upper-alpha);
}

#article span.note, #article span.tip, #article span.beta /* Special boxes */
{
	position: relative;
	display: block;
	clear: right;
	margin-bottom: 26px;
	padding: 12px 18px 12px 63px;
	border-radius: 5px;
	border: 2px solid #f5c1bc;
	background: #fbe8e6;
	color: #555859;
}

body #article span.tip
{
	border-color: #c7e4b9;
	background: #eaf5e5;
}

body #article span.beta
{
	border-color: #FFE5AA;
	background: #FFF4CA;
}

#article span.note a
{
	color: #e34d40;
}

#article span.tip a
{
	color: #61b03f;
}

#article span.beta a
{
	color: #e59422;
}

#article span.note a:hover, #article span.tip a:hover, #article span.beta a:hover
{
	color: #212c33;
}

#article span.note:before, #article span.tip:before, #article span.beta:before
{
	position: absolute;
	display: block;
	content: '\e605';
	width: 32px;
	height: 32px;
	top: 16px;
	left: 16px;
	border-radius: 100%;
	font-family: 'help-icons';
	font-size: 32px;
	line-height: 32px;
	color: #fff;
	background: #e34d40;
}

body #article span.tip:before
{
	content: '\e606';
	background: #61b03f;
}

body #article span.beta:before
{
	background: #f0ad4e;
}

#article div.related /* Related articles */
{
	margin-top: 30px;
	padding-top: 30px;
	border-top: 2px solid #737d82;
	font-weight: 700;
}

#article div.related ul
{
	margin: 0;
	padding: 0;
}

#article div.related ul li
{
	margin-left: 10px;
	list-style: none;
}

#article div.related ul li:before
{
	display: none;
}

#article div.related ul li a
{
	position: relative;
	
	-webkit-transition: color 0.15s linear, margin 0.15s linear;
	   -moz-transition: color 0.15s linear, margin 0.15s linear;
		-ms-transition: color 0.15s linear, margin 0.15s linear;
		 -o-transition: color 0.15s linear, margin 0.15s linear;
		 	transition: color 0.15s linear, margin 0.15s linear;
}

#article div.related ul li a:hover
{
	margin-left: 6px;
}

#article div.related ul li a:before
{
	position: absolute;
	display: block;
	content: '›';
	padding: 0 10px 0 0;
	top: -3px;
	left: -10px;
}

/* ARTICLE CONTENT EXPANDER */

.expandingcontent__begin {
  position:relative;
}

.expandingcontent__toggle {
  margin-left:38px;
}

#article a.expandingcontent__toggle.expandingcontent__toggle--visible {
color:#505c63;
}

.expandingcontent__toggle:before {
  font-stretch:expanded;
  display:block;
  position:absolute;
  left:0;
  top:-4px;
  float:left;
  border:1px solid #eb9e34; 
  color:#eb9e34;
  border-radius:999px;
  width:28px;
  height:28px;
  text-align:center;
  margin-right:6px;
}

.expandingcontent__toggle.expandingcontent__toggle--hidden:before {
  content:'+';
  line-height:30px;
}

.expandingcontent__toggle.expandingcontent__toggle--visible:before {
  content:'–';
  line-height:26px;
}


/* ARTICLE TEXT FORMATTING DETAILS */

span.keyboard, span.menu-option  
{
	font-size:14px;
	background:#eceeef;
	padding:2px 6px;
	border-radius: 6px;
  white-space: nowrap;
}

span.button 
{
	background-image: -moz-linear-gradient(bottom, #d0d0d0 0%, #e9e9e9 100%);
	background-image: -o-linear-gradient(bottom, #d0d0d0 0%, #e9e9e9 100%);
	background-image: -webkit-linear-gradient(bottom, #d0d0d0 0%, #e9e9e9 100%);
	background-image: linear-gradient(bottom, #d0d0d0 0%, #e9e9e9 100%);
	text-shadow: 0 1px 0 #fff;
	border: 1px solid #d3d3d3;
	font-size:14px;
	padding:2px 6px;
	border-radius: 6px;
  white-space: nowrap;
}

/* FOOTER */

#footer
{
  position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 16px 0;
	background: #f6f7f7;
	border-top: 2px solid #eff1f0;
	line-height: 1.6em;
}

#footer div.frame a.imprint
{
	float: right;
	color: #737d82;
}

#footer div.frame a.imprint:hover
{
	color: #eb9e34;
}

/* MISCELLANEOUS */

::selection
{
	background-color: #505c63;
	color: #fff;
}

::-moz-selection
{
	background-color: #505c63;
	color: #fff;
}

:focus
{
	outline: none;
}

::-moz-focus-inner
{
	border: 0;
}



/* FAQ */

.faq-item-content 
{
  display:none;
}



/* WORKFLOW STEPS */
.workflow
{
  position:relative;
  width:100%;
}

a.steps-nav
{
  margin-top:160px;
  height: 50px;
  width: 50px;
  border-radius: 25px;
  text-align: center;
  border: solid 1px #e5e5e5;
  line-height:52px;
  font-size:32px;
  color:#e59422;
  transition: all 0.15s ease !important;
  -webkit-transition : all 0.25s ease; 
  -moz-transition : all 0.25s ease;
  -o-transition : all 0.25s ease;
}

a.steps-nav:hover 
{
  border: solid 1px #000000;
  transition: all 0.25s ease !important;
  -webkit-transition : all 0.25s ease; 
  -moz-transition : all 0.25s ease;
  -o-transition : all 0.25s ease;
}

a.steps-nav.prev
{
  float:left;
}
a.steps-nav.prev:before 
{
	font-family: 'help-icons';
  content:'\E607';
}
a.steps-nav.next
{
  float:right;
}
a.steps-nav.next:before 
{
	font-family: 'help-icons';
  content:'\E608';
}

.steps
{
  margin:0px 75px;
  position:relative;
}

.step-visual
{
  text-align:center;
}

.cf:after {
    clear: both;
}

.step-content
{
  position:relative;
  left:0px;
  width:100%;
}

.step-description
{
  margin-top:25px;
}