@charset "utf-8";

/*======================= CSS Reset ===========================*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, section, main, footer, header, figure, aside, input, textarea, i, mark, *:before, *:after { margin : 0; padding : 0; border : 0; outline : 0; font-weight : inherit; font-style : inherit; font-size : 100%; font-family : inherit; vertical-align: top; background:transparent; line-height: 1; -webkit-font-smoothing: antialiased;@include boxSizing(border-box)}
* {margin: 0;}
html, body {height: 100%; width:100%;}
html {overflow-y: auto;overflow-x: hidden }
ol, ul { list-style: none; }
:focus { outline:0; }
table, table td tr {
	border:none; border-collapse: collapse;
}
a { @include transition(all $transitionDuration ease); text-decoration: none}

/*======================= Clearfix ===========================*/
.clearfix  {
	display: block; height: 1%;
	&:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0 }
}

#dossier { height: 100%}

.#{$namespace}-wrapper {
	height: 100%; position: relative;
	.#{$namespace}-header {
		.#{$namespace}-actions {
			padding: 10px 0; border-bottom: 1px solid $border;
			.#{$namespace}-logo {
				display: inline-block; padding: 5px 10px;
			}
			.#{$namespace}-group {
				display: inline-block; border-left: 1px solid $borderLight;
				p { text-align: center; display: block;}
				> ul {
					display: block;
					> li {
						display: inline-block;
						a {
							display: block; padding: 10px 20px;
						}
						&.#{$namespace}-dropdown {
							position: relative;
							> a {
								padding-right: 40px;
								&:after {
									 content:""; position: absolute; right: 0; top: 50%; @include transform(translate(-50%, 0)); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid $border;
								}

							}
							> ul {
								position: absolute; left: 0; width: auto; border: 1px solid $border; opacity: 0; @include transition(all $transitionDuration ease); z-index: 2;
								li {
									height: 0; overflow: hidden; @include transition(all $transitionDuration ease); opacity: 0; background: $white;
									> * { padding: 7px 20px; }
									a {}
									em {}
									&.#{$namespace}-separator {
										position: relative;
										&:after { content: ""; position: absolute; left: 0; top: 50%; height: 1px; background: $border; width: 100%}
									}
								}
								&.#{$namespace}-dropdown-active {
									opacity: 1;
									li { height: 30px; opacity: 1;}
								}
							}
						}
					}
				}
			}
		}
		.#{$namespace}-breadcrumbs {
			border-bottom: 1px solid $border; padding: 10px ; position: relative;
			.#{$namespace}-path {
				opacity: 0; position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px; z-index: 0;
				input { border: 1px solid $border; padding: 5px 20px; background: $white; width: 100%}
				&.#{$namespace}-path-active { background: $white;opacity: 1; z-index: 1}
			}
			ul {
				padding: 7px 20px;
				li {
					display: inline-block;
					a {
						display: block; padding: 0 20px 0 0; position: relative;
						&:after {content:""; position: absolute; right: 10px; top: 5px; width: 0; height: 0; border-bottom: 4px solid transparent; border-top: 4px solid transparent; border-left: 4px solid $border;}
					}
					p {}
				}
			}

		}
	}
	.#{$namespace}-body {
		position: absolute; left: 0; right: 0; bottom: 0; @include transition(all $transitionDuration ease);
		.#{$namespace}-aside {
			display: inline-block; width: 20%; height: 100%;
			.#{$namespace}-tree-wrapper {
				height: 50%; @include transition(all $transitionDuration ease);overflow-y: scroll;
				&.#{$namespace}-preview-hidden {
					height: 100%; padding: 0 0 50px 0;
				}
			}
			.#{$namespace}-preview {
				height: 50%; @include transition(all $transitionDuration ease); position: relative;
				.#{$namespace}-preview-toggle {
					position: absolute; top: 0; left: 0; width: 100%; padding: 10px; text-align: center;
				}
				.#{$namespace}-preview-wrapper {
					overflow: hidden; height: 100%; opacity: 1;
					h5 { padding: 50px 30px 0 30px; text-align: center; @include transition(all $transitionDuration ease);}
					.#{$namespace}-preview-media{
						padding: 30px; height: 60%; text-align: center; @include transition(all $transitionDuration ease);
						img { max-width: 100%; max-height: 100%;}
						video, audio { width: 100%;height: auto; min-height: 200px; }
					}
					.#{$namespace}-preview-info{
						padding: 30px; height: 20%; text-align: left; @include transition(all $transitionDuration ease);
					}
				}
				&.#{$namespace}-preview-hidden {
					height: 0;
					h5,	.#{$namespace}-preview-media, .#{$namespace}-preview-info{
						opacity: 0;
					}
					.#{$namespace}-preview-toggle {
						top: -40px;
					}
				}
			}
		}

		.#{$namespace}-main {
			float: right; width: 80%; height: 100%;
			.#{$namespace}-content {
				padding: 20px;
				&:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0 }
				&.#{$namespace}-grid {
					display: block;
					article {
						float: left; padding: 20px; @include transition(all $transitionDuration ease);
						.#{$namespace}-asset {
							background: $white; border: 3px solid $border;
							img { max-width: 100%;}
						}
					}
					&.#{$namespace}-grid-small {
						article {
							width: 5%; padding: 10px;
							.#{$namespace}-asset {
							}
						}
					}

					&.#{$namespace}-grid-medium {
						article {
							width: 12.5%;
							.#{$namespace}-asset {
								padding: 3px;
							}
						}
					}
					&.#{$namespace}-grid-large {
						article {
							width: 20%;
							.#{$namespace}-asset {
								padding: 5px;
							}
						}
					}

					&.#{$namespace}-grid-inactive {
						display: none;
					}
				}

				&.#{$namespace}-list {
					display: none;
                    overflow: auto;

					&.#{$namespace}-list-active {
						display: block;
					}
					table {
						width: 100%;
						tr {
							td {
								border-bottom: 1px solid $border; padding: 10px;
								&.#{$namespace}-table-checkbox {
									width: 50px;
								}
							}
						}
						thead {
							tr {
								td {
									border-bottom: 3px solid $border; font-weight: bold;

								}
							}
						}
						tbody {
							tr {
								td {
								}
							}

						}
					}
				}
			}
		}
	}
}

.#{$namespace}-popup {
	position: fixed; top: 50%; left: 50%; @include transform(translate(-50%, -50%)); width: 768px; max-width: 90%;
}


