/*
 * Base structure
 */

@import url('https://fonts.googleapis.com/css?family=Lato:400,700');

/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 0px;
  background: #f9f9f9;
}

a { color: #e65811; }

#minibody { padding-top: 0;}

#full-screen-background-image {
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

#breadcrumb { margin-bottom: 20px; font-size: 0.9em;}

#serachappselector { list-style:none;}
#serachappselector li { padding: 15px 5px; transition: all 0.5s ease;}
#serachappselector li:hover { background:#e65811; color:#fff;}

/*
 * Global add-ons
 */

.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/*
 * Top navigation
 * Hide default border to remove 1px line.
 */
.navbar-fixed-top {
  border: 0;
}
.navbar-brand { padding: 10px 20px; }
.navbar-light {
    background-color: #eee;
    border-bottom: 2px solid #e65811;
}
.navbar-light .navbar-form { border-color:transparent; }
.navbar-light .navbar-brand {
    color: #e65811;
}
.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover { color: #9449b1; }
.navbar-light .navbar-nav > li > a {
    color: #eee;
}
.navbar-light .navbar-nav > li:hover > a {
    color: #e65811;
}

.navbar-nav > li > .dropdown-menu {
  width:300px;
}
.navbar-nav > li > .dropdown-menu li ul {
    list-style:none;
}
.navbar-light .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
    color: #e65811;
}
.navbar-light .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover {
  background-color: #e65811;
}
.navbar-nav li.level-0 a { color:#e65811; }
.navbar-nav li.level-0:hover  { background-color: #fff;}

/* Top Right Navigation Dropdown Styles */

 .navbar-top-links li {
    display: inline-block;
    margin-top: 10px;
}

.navbar-top-links li:last-child {
    margin-right: 15px;
}

.navbar-top-links li a {
    padding: 10px;
}
.navbar-top-links li a i.fa {
    font-size:2em;
}
.navbar-top-links li ul.dropdown-menu a i.fa { font-size:1em;}

.navbar-top-links .dropdown i.fa {color:#e65811; }
.navbar-top-links .dropdown:hover {
  background-color: #fff !important;
}


.navbar-top-links .dropdown-menu li {
    display: block;
}

.navbar-top-links .dropdown-menu li:last-child {
    margin-right: 0;
}

.navbar-top-links .dropdown-menu li a {
    padding: 3px 20px;
    min-height: 0;
}
.navbar-top-links .dropdown-menu i.fa { color:#e65811; }

.navbar-top-links .dropdown-menu li a div {
    white-space: normal;
}

.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
    width: 310px;
    min-width: 0;
}

.navbar-top-links .dropdown-messages {
    margin-left: 5px;
}

.navbar-top-links .dropdown-tasks {
    margin-left: -59px;
}

.navbar-top-links .dropdown-alerts {
    margin-left: -123px;
}

.navbar-top-links .dropdown-user {
    right: 0;
    left: auto;
}
.navbar-toggle {
    margin-top: -40px;
}
.nav .open > a,
.nav .dropdown:hover > a {
 background-color:#fff !important;
}

.username-login-logo, .username-login { float:right; }


.panel-default { border-color: #e65811; }
.panel-primary { border-color: #e65811; }

.sitelogo { float:left; margin-right:20px;}
.sitelogo .sitemenu { display:none; position:absolute; margin-top:-4px;
                      margin-left: -5px; background:#fff; border: 1px solid #ccc;
                      z-index:30; padding:10px;}
.sitelogo .sitemenu ul { list-style: none; padding:0;}
.sitelogo .sitemenu li { padding:5px; margin-left:0; }
.sitelogo:hover .sitemenu { display:block;}
.sitelogo .sitemenu:hover { display:block;}

/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
  display: none;
}
@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
}

/* Sidebar navigation */
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
  margin-top: 20px;
}
.nav-sidebar > li > a {
  padding-right: 20px;
  padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #fff;
  background-color: #428bca;
}

.user-section { margin: 30px 0;}
.user-section .user-section-inner { float:left; }
.user-section .user-section-inner img { width:50px; height:50px; }
.user-section .user-info { margin-left:20px; }

/*
 * Main content
 */

.main .page-header {
  margin-top: 0;
}



h1, h2, h3 { color: #e65811; font-family: 'Lato', sans-serif; font-weight:700; }
h1 {font-size: 26px; }
h2 {font-size: 22px; }
h3 {font-size: 18px; }

#minibody h1 {font-size: 22px; }
#minibody h2 {font-size: 18px; }
#minibody h3 {font-size: 16px; }

.doclink span.fa { font-size:14px; float:left;}

.ambreadcrumb { background-color: #f5f5f5; margin-left:20px;}
.ambreadcrumb ul li { float:left; }

.grouplist li span.fa { margin-left:15px; }

.toggle-default .icon { font-size: 2em;
    float: left;
    margin-right: 10px;
    margin-top: -4px;
}
.toggle-default label {float: left;}


/* Tabellen
-------------------------------------------------- */
.cms-table { padding:8px; background:#fff; border-radius:5px; font-size:0.9em;}
.cms-table tr:nth-child(odd) { background: #fff;}
.cms-table tr:nth-child(even) { background: #eee;}
.cms-table th { border-bottom: 1px solid #e65811; padding:5px;}
.cms-table td { padding:5px; border-bottom: 1px solid #ccc;}

tr.rowlink:hover {cursor:pointer;}
.clickable:hover { cursor: pointer; }
tr.clickable:hover { background:#E297FF;}

/* FORMS + JFORM
-------------------------------------------------- */
#jform, .jform {
	width:100%;
	padding-top:10px;
}
#jform div.error, .jform div.error { font-size:0.9em;
                                     line-height:1.5em;padding: 2px 5px;background: #FBB; color:black;}
#jform textarea,
.jform textarea,
#jform input[type=text],
.jform input[type=text],
#jform input[type=password],
.jform input[type=password] {
  width:97%;
  border:solid 1px #ccc;
}
#jform div.left,
.jform div.left{
	padding:0px;
	width:25%;
	margin:3px;
  float:left;
	text-align:right;
 }
#jform div.right,
.jform div.right {
	float:right;
	text-align:left;
	width:72%;
}
#jform div.right input[type=radio],
.jform div.right input[type=radio] {
  margin-bottom:8px;
}
#jform div.newline,
.jform div.newline {
  padding-top:6px;
	clear:both;
}

#jform .required,
.jform .required,
.jform-stacked .required { font-weight: bold; color:#660000;}

.jform-stacked { width:100%;	padding-top:10px;}
.jform-stacked div.right { margin-bottom:20px;}

/* YES / NO PAGE
-------------------------------------------------- */
#yesnoform { display: inline-flex; } /* fix für Fancybox */
#yesno { margin: 0 5% 0 0; background: url('../images/fragezeichen.png') bottom right no-repeat; height:200px; min-width: 700px;}
#yesno p { padding-right: 100px; }
#yesno .btn { width:100px; margin-top:50px;}

/* LOGIN FORM
-------------------------------------------------- */
#loginform { max-width: 400px; margin-left: calc(50% - 200px); margin-top: 10%;
padding: 20px;
border: solid 1px #e65811;
border-radius: 10px;
background: #fbfbfb;
box-shadow: 3px 3px 3px #ddd;}
#loginform label { width:40%; text-align:right;padding:5px 10px;}

.am-start-login #loginform { margin-left: 0; margin-top: 0%;
padding: 20px; border: solid 1px #e65811;border-radius: 10px;background: rgba(0,0,0,0.8);
box-shadow: none; max-width: 100%; }
.am-start-login #loginform h1 { display:none; }
.am-start-login #loginform label { width:auto; text-align:right;padding:5px; }
.am-start-login #loginform .newline { display:inline; }


/* STATUS COLORS
-------------------------------------------------- */
.status-grey { color: #bbb; }
.status-green { color: #393; }
.status-red { color: #933; }
.status-orange { color: #FFA500; }
.status-yellow { color: #FFFF33; }
.status-blue { color: #003399; }

/* TOOLTIP
-------------------------------------------------- */
a.help,
a.help:link,
a.help:visited,
a.help:active { position:relative; text-decoration:none; font-weight:normal; }

a.help:hover { background:transparent; z-index:254;}

a.help span { display:none; font-size:14px; line-height:1.5em; text-decoration:none;
              background:rgb(255,255,255); border: 1px solid lightgrey; color: black;
              top:20px; margin-top:8px; margin-left:-150px; min-width:300px;
              padding:10px; text-align:left;
              -webkit-border-radius: 7px;
              -moz-border-radius: 7px;
              border-radius: 7px;
}

a.help:hover span { display:block; position:absolute; }

/* MESSAGES
-------------------------------------------------- */
#messages { width: auto;  z-index: 11;  white-space: nowrap; position:fixed; bottom:50px; right:0; }
#messages .ok, div.ok { background: rgba(170,255,170,0.9); border: solid 1px green; padding:10px; }
#messages .error,
div.error { background: rgba(255,170,255,0.9); color: #000000; font-weight:bold; padding:20px; }
#messages span.fa { color:red; margin-left:15px}
#messages .fr { float:right; }


/* Sheets
-------------------------------------------------- */
#sheetcontainer { width:100%; border-left:0; clear:both; padding-top:50px;
                   }
#sheetcontainer > ul { border-bottom:1px solid #ccc; margin-left:0; width: 100%;
                       display: inline-flex;}
#sheetcontainer > ul li { list-style:none; float:left;
                         border:1px solid #ccc;
                         min-width:100px;
                         height:26px;
                         border-radius: 6px 6px 0 0;
                         margin-top:-26px;
                         padding:3px 8px;
                         text-align:center;
                         background:#dddddd;}
#sheetcontainer .active {  height:31px; margin-top:-31px;
                           padding-top:3px;
                           border-bottom:0;
                           background:#ffffff;
                          }
#sheetcontainer .inner { padding: 10px;
                       background:#ffffff;
                       margin-top: -10px;
                       border-left:1px solid #ccc;
                       border-right:1px solid #ccc;
                       border-bottom:1px solid #ccc;
                      }

#sheetcontainer .inner div { border:0;
                           margin-top:2px;
                           padding-left:8px;
                           padding-top:8px;
                          }

/*
 * Placeholder dashboard ideas
 */

.placeholders {
  margin-bottom: 30px;
  text-align: center;
}
.placeholders h4 {
  margin-bottom: 0;
}
.placeholder {
  margin-bottom: 20px;
}
.placeholder img {
  display: inline-block;
  border-radius: 50%;
}

/*
 * Footer
 */
footer {
width: 100%;
text-align: right;
padding:15px 20px;
background: #e65811;
color:#fff;
position:absolute;
z-index:1001;
font-size:0.9em;
}
footer a { color: #fff; }

#setlanguage { display:inline-table; }


/*=========================================================================
 * Flipper
 =========================================================================*/
/* entire container, keeps perspective */
.flip-container {
	/** perspective: 1000px; */
	margin: 0 10px 20px 0;
}
	/* flip the pane when hovered */
	.___flip-container:hover .___flipper, .___flip-container.hover .____flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 340px;
	height: 480px;
}

/* flip speed goes here */
._____flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	/** transform: rotateY(0deg); */
	border: 1px solid #e65811;
  border-radius:10px; background: #fbfbfb;
}

/* back, initially hidden pane */
.___back {
	transform: rotateY(180deg);
	border: 1px solid #e65811;
  border-radius:10px; background: #eeeffb;
}

.flipper { padding:30px 20px; }




@media (min-width: 100px) {
  .main { padding: 0px; }
  .main-only { padding: 10px 0; }
  .container-fluid { padding:0 10px;}
  .navbar-top-links { margin-right:30px;}
  h1 {font-size: 22px; }
  h2 {font-size: 18px; }
  h3 {font-size: 14px; }

  .flip-container, .front, .back {
  	width: 340px;
  	min-height: 200px;
    margin: 10px 20px;
  }
}

@media (min-width: 768px) {
  .main { padding: 15px; }
  .main-only { padding: 15px 0.5%; }
  .navbar-top-links { margin-right:0px;}
  h1 {font-size: 26px; }
  h2 {font-size: 22px; }
  h3 {font-size: 18px; }
  
  .flip-container, .front, .back {
  	width: 340px;
  	height: 480px;
    margin: 10px;
  }
}

@media (min-width: 996px) {
  .main { padding: 20px; }
  .main-only { padding: 20px 1%; }

  .flip-container, .front, .back {
  	width: 340px;
  	height: 480px;
  }
}


/* SEBASTIAN HATTWICH - Maerial Design Forms */
#loginform {border-radius: 0; border:0; box-shadow:0 0 5px 5px #ddd;}
form { font-family: 'Lato', sans-serif; }
div.newline {margin-top: 5px;}

input[type=text].form-control:focus,
input[type=password].form-control:focus,
input[type=email].form-control:focus {
  box-shadow: none;
  background:#fff;
  border: 1px solid #e65811 !important;
}
select.form-control:focus,
textarea.form-control {
  border: 1px solid #ccc !important;
  border-radius:0;
}
input[type="checkbox"]:checked+label,
input[type="radio"]:checked+label { font-weight: bold; color:#e65811;}
select.form-control:focus,
textarea.form-control:focus {
  box-shadow:none;
  border: 1px solid #e65811 !important;
}
form label, #loginform label {
  font-weight: normal;
  text-align:left;
  position:relative;
  color:#999;
  font-size:16px;
  padding:0px 0;
  margin-top:20px;
}
form .label-checkbox,
form .label-radio { margin-top:0px; margin-left:5px;}
.btn { border:0; border-radius:0; }
.btn-primary { background:#e65811; }
.btn-primary:hover { background:#C63801;}

form input[type=checkbox],
form input[type=radio] {margin-left:12px;}

.nav-tabs > li.active > a {margin-top: 1px;}
.tab-pane { background:#fff; padding:20px; border: 1px solid #ccc;}