/* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net
   This file is licensed under the Affero General Public License version 3 or later.
   See the COPYING-README file. */
  
  /* FILE MENU */

  .actions { padding:5px; height:32px; display: inline-block; float: left; }

  .actions input, .actions button, .actions .button { margin:0; float:left; }

  .actions .button a { color: #555; }
  .actions .button a:hover, .actions .button a:active { color: #333; }

  .actions.hidden { display: none; }

  
  #new {

  	z-index: 1010;
  	float: left;
  	padding: 0 !important; /* override default control bar button padding */
  }
  #trash {
  	margin-right: 8px;
  	float: right;
  	z-index: 1010;
  	padding: 10px;
  	font-weight: normal;
  }

  #new > a {

  	padding: 14px 10px;
  	position: relative;
  	top: 7px;
  }
  #new.active {
  	border-bottom-left-radius: 0;
  	border-bottom-right-radius: 0;
  	border-bottom: none;

  }

  #new > ul {

  	display: none;
  	position: fixed;

  	min-width: 112px;

  	z-index: 10;

  	padding: 8px;

  	padding-bottom: 0;
  	margin-top: 14px;
  	margin-left: -1px;

  	text-align: left;

  	background: #f8f8f8;
  	border: 1px solid #ddd;
  	border-radius: 5px;
  	border-top-left-radius: 0;

  	box-shadow: 0 2px 7px rgba(170,170,170,.4);
  }
  #new > ul > li {
  	height: 36px;
  	margin: 5px;
  	padding-left: 42px;
  	padding-bottom: 2px;
  	background-position: left center;
  	cursor: pointer;
  }
  #new > ul > li > p {
  	cursor: pointer;
  	padding-top: 7px;
  	padding-bottom: 7px;

  }

  
  #new .error, #fileList .error {
  	color: #e9322d;
  	border-color: #e9322d;
  	-webkit-box-shadow: 0 0 6px #f8b9b7;
  	-moz-box-shadow: 0 0 6px #f8b9b7;
  	box-shadow: 0 0 6px #f8b9b7;
  }

  /* FILE TABLE */

  #filestable {
  	position: relative;
  	top: 44px;
  	width: 100%;

  }

  /* make sure there's enough room for the file actions */
  #body-user #filestable {

  	min-width: 688px; /* 768 (mobile break) - 80 (nav width) */

  }

  #body-user #controls {

  	min-width: 688px; /* 768 (mobile break) - 80 (nav width) */

  }

  #filestable tbody tr { background-color:#fff; height:51px; }
  
  /* fit app list view heights */
  .app-files #app-content>.viewcontainer {
  	min-height: 100%;
  }
  
  /* move Deleted Files to bottom of sidebar */
  .nav-trashbin {
  	position: absolute !important;
  	bottom: 0;
  }
  
  #filestable tbody tr { background-color:#fff; height:40px; }

  #filestable tbody tr:hover, tbody tr:active {
  	background-color: rgb(240,240,240);

  }

  #filestable tbody tr.selected {
  	background-color: rgb(230,230,230);

  }

  #filestable tbody tr.searchresult {
  	background-color: rgb(240,240,240);

  }

  tbody a { color:#000; }

  
  span.extension, span.uploading, td.date {
  	color: #999;
  }
  span.extension {
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  	filter: alpha(opacity=70);
  	opacity: .7;
  	-webkit-transition: opacity 300ms;
  	-moz-transition: opacity 300ms;
  	-o-transition: opacity 300ms;
  	transition: opacity 300ms;
  	vertical-align: top;
  }
  tr:hover span.extension {
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  	filter: alpha(opacity=100);
  	opacity: 1;
  	color: #777;
  }
  
  table tr.mouseOver td {
  	background-color: #eee;
  }
  table th, table th a {
  	color: #999;
  }
  table.multiselect th a {
  	color: #000;
  }
  table th .columntitle {
  	display: block;
  	padding: 15px;
  	height: 50px;
  	box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	vertical-align: middle;
  }
  table th .columntitle.name {
  	padding-left: 5px;
  	padding-right: 80px;
  	margin-left: 50px;
  }
  
  .sort-indicator.hidden { visibility: hidden; }
  table th .sort-indicator {
  	width: 10px;
  	height: 8px;
  	margin-left: 10px;
  	display: inline-block;
  }
  table th:hover .sort-indicator.hidden {
  	width: 10px;
  	height: 8px;
  	margin-left: 10px;
  	visibility: visible;

  }

  table th, table td { border-bottom:1px solid #ddd; text-align:left; font-weight:normal; }

  table td {

  	padding: 0 15px;

  	border-bottom: 1px solid #eee;
  	font-style: normal;
  	background-position: 8px center;
  	background-repeat: no-repeat;
  }
  table th#headerName {
  	position: relative;

  	width: 9999px; /* not really sure why this works better than 100% … table styling */

  	padding: 0;
  }
  #headerName-container {
  	position: relative;
  	height: 50px;
  }
  table th#headerSize, table td.filesize {

  	text-align: right;
  }

  table th#headerDate, table td.date,
  table th.column-last, table td.column-last {

  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	position: relative;

  	/* this can not be just width, both need to be set … table styling */
  	min-width: 176px;
  	max-width: 176px;

  }

  
  /* Multiselect bar */

  #filestable.multiselect {
  	top: 95px;
  }
  table.multiselect thead {
  	position: fixed;
  	top: 89px;
  	z-index: 10;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;

  	left: 250px; /* sidebar */

  }

  table thead th {
  	background-color: #fff;
  }

  table.multiselect thead th {
  	background-color: rgba(220,220,220,.8);
  	color: #000;
  	font-weight: bold;
  	border-bottom: 0;
  }
  table.multiselect #headerName {
  	position: relative;

  	width: 9999px; /* when we use 100%, the styling breaks on mobile … table styling */

  }

  table td.selection, table th.selection, table td.fileaction { width:32px; text-align:center; }

  table td.filename a.name {
  	position:relative; /* Firefox needs to explicitly have this default set … */
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	display: block;
  	height: 50px;

  	line-height: 50px;

  	padding: 0;
  }

  table tr[data-type="dir"] td.filename a.name span.nametext {font-weight:bold; }

  table td.filename input.filename {

  	width: 70%;
  	margin-top: 1px;
  	margin-left: 48px;

  	cursor: text;
  }

  table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete { padding:3px 8px 8px 3px; }
  table td.filename .nametext, .uploadtext, .modified, .column-last>span:first-child { float:left; padding:15px 0; }

  .modified, .column-last>span:first-child {

  	position: relative;

  	overflow: hidden;
  	text-overflow: ellipsis;
  	width: 90%;
  }
  /* ellipsize long modified dates to make room for showing delete button */
  #fileList tr:hover .modified, #fileList tr:hover .column-last>span:first-child,
  #fileList tr:focus .modified, #fileList tr:focus .column-last>span:first-child {
  	width: 75%;

  }

  /* TODO fix usability bug (accidental file/folder selection) */

  table td.filename .nametext {
  	position: absolute;

  	left: 55px;
  	padding: 0;
  	overflow: hidden;
  	text-overflow: ellipsis;
  	max-width: 800px;

  	height: 100%;
  }
  
  table td.filename .nametext .innernametext {
  	text-overflow: ellipsis;
  	overflow: hidden;
  	position: relative;
  	display: inline-block;
  }
  
  @media only screen and (min-width: 1366px) {
  	table td.filename .nametext .innernametext {
  		max-width: 760px;
  	}
  
  	table tr:hover td.filename .nametext .innernametext {
  		max-width: 480px;
  	}
  }
  
  @media only screen and (min-width: 1200px) and (max-width: 1366px) {
  	table td.filename .nametext .innernametext {
  		max-width: 600px;
  	}
  
  	table tr:hover td.filename .nametext .innernametext {
  		max-width: 320px;
  	}
  }
  
  @media only screen and (min-width: 1000px) and (max-width: 1200px) {
  	table td.filename .nametext .innernametext {
  		max-width: 400px;
  	}
  
  	table tr:hover td.filename .nametext .innernametext {
  		max-width: 120px;
  	}
  }
  
  @media only screen and (min-width: 768px) and (max-width: 1000px) {
  	table td.filename .nametext .innernametext {
  		max-width: 320px;
  	}
  
  	table tr:hover td.filename .nametext .innernametext {
  		max-width: 40px;
  	}
  }
  
  /* for smaller resolutions - see mobile.css */
  
  table td.filename .uploadtext {
  	font-weight: normal;
  	margin-left: 8px;

  }

  .ie8 input[type="checkbox"]{
  	padding: 0;
  }

  /* File checkboxes */

  #fileList tr td.filename>input[type="checkbox"]:first-child {
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  	filter: alpha(opacity=0);
  	opacity: 0;
  	float: left;

  	top: 0;

  	margin: 32px 0 4px 32px; /* bigger clickable area doesn’t work in FF width:2.8em; height:2.4em;*/
  }
  /* Show checkbox when hovering, checked, or selected */
  #fileList tr:hover td.filename>input[type="checkbox"]:first-child,
  #fileList tr td.filename>input[type="checkbox"]:checked:first-child,
  #fileList tr.selected td.filename>input[type="checkbox"]:first-child {
  	opacity: 1;
  }
  .lte9 #fileList tr:hover td.filename>input[type="checkbox"]:first-child,
  .lte9 #fileList tr td.filename>input[type="checkbox"][checked=checked]:first-child,
  .lte9 #fileList tr.selected td.filename>input[type="checkbox"]:first-child {
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  	filter: alpha(opacity=100);
  }
  
  /* Use label to have bigger clickable size for checkbox */
  #fileList tr td.filename>input[type="checkbox"] + label,

  .select-all + label {

  	height: 50px;

  	position: relative;

  	width: 50px;
  	z-index: 5;
  }

  #fileList tr td.filename>input[type="checkbox"]{

  	position: relative;
  	z-index: 4;

  }

  #fileList tr td.filename>input[type="checkbox"] + label {
  	left: 0;

  	top: 0;

  }

  .select-all + label {

  	top: 0;
  }

  .select-all {

  	position: absolute;
  	top: 18px;
  	left: 18px;
  }

  #fileList tr td.filename {

  	position: relative;
  	width: 100%;
  	padding-left: 0;

  	-webkit-transition:background-image 500ms; -moz-transition:background-image 500ms; -o-transition:background-image 500ms; transition:background-image 500ms;
  }

  
  #fileList tr td.filename a.name label {
  	position: absolute;

  	width: 80%;

  	height: 50px;
  }

  #uploadsize-message,#delete-confirm { display:none; }
  
  /* File actions */
  .fileactions {

  	position: absolute;

  	right: 0;

  	font-size: 11px;

  }

  #fileList img.move2trash { display:inline; margin:-8px 0; padding:16px 8px 16px 8px !important; float:right; }

  #fileList a.action.delete {
  	position: absolute;
  	right: 0;

  	padding: 17px 14px;
  }
  
  #fileList .action.action-share-notification span, #fileList a {
  	cursor: default !important;
  }
  
  a.action>img {
  	max-height:16px;
  	max-width:16px;
  	vertical-align:text-bottom;
  	margin-bottom: -1px;

  }

  
  /* Actions for selected files */
  .selectedActions {

  	position: absolute;

  	top: 0;

  	right: 0;

  }
  .selectedActions a {
  	display: inline;

  	font-size: 11px;
  	line-height: 50px;
  	padding: 18px 5px;
  }
  .selectedActions a.delete-selected {
  	padding-right: 15px;
  }
  .selectedActions a.hidden {
  	display: none;

  }
  .selectedActions a img {
  	position:relative;

  	vertical-align: text-bottom;
  	margin-bottom: -1px;

  }

  #fileList a.action {

  	display: inline;

  	padding: 18px 8px;
  	line-height: 50px;

  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  	filter: alpha(opacity=0);
  	opacity: 0;
  	display:none;
  }

  
  #fileList a.action[data-action="Rename"] {
  	padding: 16px 14px 17px !important;
  	position: relative;
  	top: -21px;
  }

  #fileList tr:hover a.action, #fileList a.action.permanent {

  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  	filter: alpha(opacity=50);

  	opacity: .5;
  	display:inline;
  }
  #fileList tr:hover a.action:hover {

  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  	filter: alpha(opacity=100);

  	opacity: 1;
  	display:inline;
  }

  .summary {
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  	filter: alpha(opacity=30);
  	opacity: .3;
  	height: 70px;
  }

  .summary:hover, .summary, table tr.summary td {
  	background-color: transparent;
  }
  
  .summary td {

  	padding-top: 20px;
  	padding-bottom: 250px;

  	border-bottom: none;
  }
  .summary .info {

  	margin-left: 40px;

  }
  
  #scanning-message{ top:40%; left:40%; position:absolute; display:none; }

  
  table.dragshadow {
  	width:auto;
  }
  table.dragshadow td.filename {

  	padding-left:60px;

  	padding-right:16px;

  	height: 36px;

  }
  table.dragshadow td.size {
  	padding-right:8px;
  }
  #upgrade {
  	width: 400px;
  	position: absolute;
  	top: 200px;
  	left: 50%;
  	text-align: center;
  	margin-left: -200px;
  }

  .mask {
  	z-index: 50;

  	position: absolute;

  	top: 0;
  	left: 0;
  	right: 0;
  	bottom: 0;
  	background-color: white;
  	background-repeat: no-repeat no-repeat;
  	background-position: 50%;
  	opacity: 0.7;
  	filter: alpha(opacity=70);
  	transition: opacity 100ms;
  	-moz-transition: opacity 100ms;
  	-o-transition: opacity 100ms;
  	-ms-transition: opacity 100ms;
  	-webkit-transition: opacity 100ms;
  }
  .mask.transparent{
  	opacity: 0;

  }