/*------------------------------------------------------------------

  [Layout]
   
  Project:     CAS Campus V5
  Version:     1.0
  Last change: 20/04/12
  Assigned to: Thomas Gehrig
  
  Primary use: 
  
  
  Table of contents
  -----------------
  
  +Basic
  +Pagelayout
    +Header
    +Content
  
-------------------------------------------------------------------*/



/* +Basic
-------------------------------------------------------------------*/



html {
  overflow: hidden; /* IE < 8 */
}  

html, body {
  height: 100%;
}

body {
  background: #fff;
  font: normal 100.01%/1.125em arial,helvetica,sans-serif; /* 18 px */
  /*color: #2b2e2e;*/
}

body {
  /*font: normal 12px/18px arial,helvetica,sans-serif;*/
  /*color: #2b2e2e;*/
}



.form {
  height: 100%;
}

.page {
	position: relative;
  border-right: 1px solid #ddd;
  min-width: 960px;
  height: 100%;
  /*background: #f9f9f9;*/
  -moz-box-shadow: 2px 0px 5px #eee;
  -webkit-box-shadow: 2px 0px 5px #eee;
  box-shadow: 2px 0 5px #eee;  
}

.body-rendered .page {
  max-width: 100%;
}


/* +Pagelayout
-------------------------------------------------------------------*/

  
  
/* +Header
-------------------------------*/


/* TODO: Umbenennen: .header */
.header-container {
  font-size: 0.875em; /* 14 px */
  border-bottom: 1px solid;
  padding: 5px 0;
  /*line-height: 1.6em;*/ /* 22.4 px */
}

.global-search-container {
  margin-left: 330px; /* logo + term selection */
  margin-right: 255px; /* header-menu */
  overflow: visible; /* overwrite the float property */
}



 
 
/* +Sidebar
-------------------------------*/


/* TODO: Problem: Konflikt mit Unterseiten, da gleiches Element!!! */
/* TODO: Klasse umbenennen: module-col */ 

.module-container,
.module-container-large {
  font-size: 0.875em; /* 14 px */
}

.module-container,
.module-container-large {
  border-right: 1px solid #b4b4b4;
}

.module-container-large { /* cockpit */
  background: #d5e4e8;
  width: 17.5em; /* 245px */
  max-width: 300px;
  min-width: 170px;
}

.module-container {	/* subpages */
  background: #eaf2f4;
  height: 100vh;
}



/* +Content
-------------------------------*/


.work-area {
  height: 100%;
  font-size: 0.75em; /* 12px */
}

@-moz-document url-prefix() { /* Fx-Hack: Avoid miscalculation for content container (JS) */
  .work-area {
    display: block;
  } 
}

.subheader { /* element wraps breadcrumb + content title */
  padding: 10px 10px 0;
  line-height: 1.867em; /* 22.4 px */
}

.navigator-toolbar {
  padding: 0 10px 3px;
}

.nav-container { /* context nav */
  background: #d5e4e8;
  font-size: 1.167em; /* 14px */
  border-top: 1px solid #c4d2d6;
  border-right: 1px solid #c4d2d6;
  overflow: auto;
}

/* .body-rendered */.nav-container {
  width: 13.5em;
}

.nav-container:hover { /* show scrollbar only on :hover */
  overflow-y: auto; 
}

.content-column {
  width: 54em; /* avoid line break whithin float layout */
}

.body-rendered .content-column {
  width: auto;
}

.content-container {
  border-top: 1px solid #ebebeb;  
  background: #fff;
}

.content {
  padding-bottom: 20px;
  color: #333;
  /* word-wrap */
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  width: fit-content;
  min-width: 100%;
}

.content th,
.content td { /* cjk */
/* deactivated: responsible for bad formatted column headers // do not delete, rule can cause side effects 
  word-break: break-all; 
*/
}

.content > .columnlayout > .layoutcolumn > .layoutelement-inner { /* col-layout */
  padding: 25px 20px 0; 
}










/*------------------------------------------------------------*/
/* TODO: Nachfolgende Klassen löschen, sobald überarbeitet */


/*----------löschen--------------*/

.breadcrumb .first a {
  display: none;
}

/*----------löschen--------------*/







.border-loginframe {
  border: 1px solid #dadada;
  padding: 1em;
  margin: 5em;
  width: 800px;
}

.border-loginframe .link {
  text-decoration: underline;
  color: #072D61;
  cursor: pointer;
}

.border-loginframe .action {
  background: #f2f2f2;
}


.border-logindialog {
  border: 1px solid #dadada;
  padding: 1em;
  background: #ffffff;
  margin-bottom: 5px;
}

.border-loginframe .primary-action {
    border-radius: 4px;
    float: right;
}


.border-logindialog .gridlayoutcolumn2smallleft {
    width: 25%;
}

.border-logindialog .gridlayoutcolumn2largeright {
    width: 75%;
}



/*
 * Label
 */
.tiny-label {
  font-size: 0.917em; /* 11px */
}


/* TODO: Das ist der Titel eines Infoblocks. Klasse und HTML passt nicht! */
.large-label,
.heading-h2 {
  font-size: 1.167em; /* 14px */
  font-weight: bold;
}

.work-area .large-label,
.work-area .heading-h2 {
  padding: 7px 0 7px;
}

.label {
  display: inline;
}

.heading-applpage {
  font-size: 1.4em;
  font-weight: bold;
  color: #333;
  padding: 7px 0 4px;
}

























/*
 * Datepicker
 */
.ui-datepicker {
  z-index: 9000 !important;
}





/*
 * List pagination
 */
 /*
.list-pagination-container {
  margin: 0.5em 0;
}

.list-text-num {
  width: 3em;
  vertical-align: middle;
}

.list-select-items {
  vertical-align: middle;
}

.list-button-first,.list-button-prev,.list-button-next,.list-button-last
  {
  height: 16px;
  width: 16px;
  border: none;
  padding: 3px;
  cursor: pointer;
  vertical-align: middle;
}

.list-button-first:hover,
.list-button-prev:hover,
.list-button-next:hover,
.list-button-last:hover {
  border: none;
}

.list-button-first,.list-button-first:hover {
  background: url("../images/resultset_first.png");
}

.list-button-last,.list-button-last:hover {
  background: url("../images/resultset_last.png");
}

.list-button-next,.list-button-next:hover {
  background: url("../images/resultset_next.png");
}

.list-button-prev,.list-button-prev:hover {
  background: url("../images/resultset_previous.png");
}
*/



/* +login-container
-------------------------------------------------------------------*/



.loginpage-container {
  display: table;
  width: 100%;
  height: 100%;
}

.loginpage {
  display: table-cell;
  vertical-align: middle;
}

/* TODO: box-shadow angleichen !!! */

.loginpage-content {
  position: relative;
  margin: 0 auto;
  padding: 30px;
  border: 1px solid #ccc;
  width: 48em;
  min-height: 315px;
  font-size: .85em;
  border-radius: 7px;
	-webkit-box-shadow: 3px 4px 5px rgba(0,0,0,.1);
  -moz-box-shadow: 3px 4px 5px rgba(0,0,0,.1);
  box-shadow: 3px 4px 5px rgba(0,0,0,.1);
  background: url(../images/login-bg.png) repeat-x 0 bottom;
	background: -webkit-linear-gradient(bottom, #f3f3f3, #fff 25%);
  background: -moz-linear-gradient(bottom, #f3f3f3, #fff 25%);
  background: -o-linear-gradient(bottom, #f3f3f3, #fff 25%);
  background: -ms-linear-gradient(bottom, #f3f3f3, #fff 25%);
  background: linear-gradient(to top, #f3f3f3, #fff 25%);
  min-width: auto;
}

.loginpage-content .left-column {
  width: 49%;
}


.loginpage-content .right-column {
  float: right;
  width: 49%;
}

button.ui-multiselect.ui-widget.ui-state-default.ui-corner-all span {
  overflow: hidden;
  white-space: nowrap;
  display: block;
  text-overflow: ellipsis;
}

/**
Responsivness
**/
@media only screen and (device-width: 980px),
       only screen and (max-width: 980px) {

	.breadcrumb .menu-item > a {
		pointer-events: none;
		cursor: default;
	}

	div.content-column {
		width: 79%
	}

	.tabgroup.tabgroup-vertical {
		width: 90%;
	}

	div.ui-tabs-vertical div.ui-tabs-panel {
		width: auto !important;
	}

	div.tabgroupcontent div.data-row button {
		width: 90% !important;
	}

	div.tabgroupcontent div.data-row input {
		width: fit-content !important;
	}

	.layoutelement-inner .clearfix .boxlayout-horizontal.content-column.float-left .boxlayout-vertical.last-linebox.toolbar-container {
    	display:grid;
    }

    .content-container .layoutelement-inner {
    	min-width: fit-content;
    	width: auto;
    }

    div.col1 div.data-border {
    	width: auto;
    }
}