@charset "utf-8";
/*
============================================
	Ashampoo® Web Upload Frontend V.2

	25. März 2015 DHE
============================================
*/

*{outline:none;}

a{text-decoration:none;}

.spritesheet{
	background-image:url(../img/snap-spritesheet.png);
	background-repeat:no-repeat;
}

.svg-spritesheet{

	/*
	background-image:url(../img/svg-spritesheet.svg);
	*/

/*	Fallback, wheeeee!	*/
	background: transparent url(../img/snap-spritesheet.png);
	background-image: linear-gradient(transparent, transparent), url(../img/svg-spritesheet.svg);
	
	
	background-size: 1050px 60px;
	background-repeat:no-repeat;
}

.text-select{
	cursor:text;	
}

.text-select:hover{
	color:#3e9bd5;
}


.bg-blur{
	filter: blur(5px);
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
}

body{
	margin:0;
	padding:0;
	height:100%;
	background-color:#1c1c1c;	
	font-family:'open_sansregular', 'Segoe UI', Arial, Helvetica, sans-serif;		
}

.ie6-body{
	background-color:#303030;
	padding:0;
	margin:0;
	color:#FFFFFF;
	text-align:center;	
	font-family:'open_sansregular', 'Segoe UI', Arial, Helvetica, sans-serif;	
}
/*
.ie6-body div{
	width:600px;
	margin:auto auto 50px;
}
*/

.ash-bar{
	position:absolute;
	bottom:0px;
	width:100%;
	height:50px;
	background-color:#FFFFFF;
	outline:1px solid #666666;
	text-align:center;
	overflow:hidden;	
}

.ash-bar-link{
	position:relative;
	display:inline-block;
	width:300px;
	height:50px;
}

.ash-bar-img{
/*	display:block;*/
}

.top-row{
	position:absolute;
	top:0px;
	width:100%;
	height:60px;
	background-color:#1c1c1c;
	overflow:hidden;
}

.top-row-btn{
	position:absolute;
	display:block;

	top:0px;
	width:60px;
	height:60px;

	cursor:pointer;
	
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

.top-row-btn:hover{
	top:-5px;
	/*transform:scale(1.2);*/
}

.top-row-btn-logo{
	width:150px;
	background-position:-840px 0;	
}

.top-row-btn-download{
	right:0px;
	background-position:-300px 0;
}

.top-row-btn-report{
	right:80px;
	background-position:-240px 0;	
}


.content-box-holder{
	position:absolute;
	background-color:#303030;
}

/*ie hack*/
.content-box-holder-ie{
	overflow:hidden; 		
}

.content-box{
	position:absolute;
	overflow:hidden;
}

.content-box-video{
	width:100%;
	height:100%;
}

.content-box-video video{
	position:absolute;
	max-width:100%;
	max-height:100%;	
	left:50%;
	top:50%;

	-ms-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);	
	-webkit-transform:translate(-50%,-50%);	
	-o-transform:translate(-50%,-50%);	
	transform:translate(-50%,-50%);

}

.content-box-small{
	width:100%;
	height:100%;
}

.content-box-full{
/*	overflow:hidden;*/
	max-width:100%;
	max-height:100%;	
	left:50%;
	top:50%;

	-ms-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);	
	-webkit-transform:translate(-50%,-50%);	
	-o-transform:translate(-50%,-50%);	
	transform:translate(-50%,-50%);	
}

/* Haxx0r!!1 */
.content-box-video-ie{
	width:100%;
	height:100%;
	text-align:center;
}

.content-box-video-ie video {
	max-width:100%;
	max-height:100%;
}

		video:fullscreen{
			position:static;
			left:0% !important;
			top:0% !important;
			transform:none !important;
			-ms-transform:none !important;	
			-webkit-transform:none !important;	
			-moz-transform:none !important;
			-o-transform:none !important;			
		} 

		video:-webkit-full-screen{
			position:static;			
			left:0% !important;
			top:0% !important;
			transform:none !important;
			-webkit-transform:none !important;	
		} 

		video:-ms-full-screen{
			position:static;			
			left:0% !important;
			top:0% !important;
			transform:none !important;
			-ms-transform:none !important;	
		} 

		video:-o-full-screen {
			position:static;			
			left:0% !important;
			top:0% !important;
			transform:none !important;
			-o-transform:none !important;	
		} 
		
		video:-moz-full-screen{
			position:static;			
			left:0% !important;
			top:0% !important;
			background-color:#000000 !important;
			transform:none !important;
			-moz-transform:none !important;
		} 

.content-link{
	position:absolute;
	top:10px;
	right:10px;
	bottom:10px;
	left:10px;
	
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center center;	

	cursor:url(../img/magnify.cur), url(../img/magnify.gif), pointer;
}

.content-box-info{
	z-index:50;
	position:absolute;
	display:none;
	
	left:50%;
	bottom:20px;
	padding:10px;
	
	background-color:#1c1c1c;
	color:#FFFFFF;
	font-size:18px;

	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 5px;

	-ms-transform:translateX(-50%);
	-moz-transform:translateX(-50%);	
	-webkit-transform:translateX(-50%);	
	-o-transform:translateX(-50%);	
	transform:translateX(-50%);
	
	-moz-box-shadow: 0px 5px 5px RGBA(0,0,0,0.6);
	-webkit-box-shadow: 0px 5px 5px RGBA(0,0,0,0.6);
	box-shadow: 0px 5px 5px RGBA(0,0,0,0.6);

}

.content-box-btn-close{
	z-index:50;
	position:absolute;
	display:none;
	
	right:20px;
	top:20px;
	width:60px;
	height:60px;

	background-position:-180px 0;
	
	opacity:0.6;
	cursor:pointer;
	
	-moz-box-shadow: 0px 5px 5px RGBA(0,0,0,0.6);
	-webkit-box-shadow: 0px 5px 5px RGBA(0,0,0,0.6);
	box-shadow: 0px 5px 5px RGBA(0,0,0,0.6);	

	-webkit-transition: opacity 200ms ease;
	-moz-transition: opacity 200ms ease;
	-ms-transition: opacity 200ms ease;
	-o-transition: opacity 200ms ease;
	transition: opacity 200ms ease;
	
}

.content-box-btn-close:hover{opacity:1;}

.small-content-picture{
	position:absolute;
	max-width:100%;
	max-height:100%;	
	left:50%;
	top:50%;

	-ms-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);	
	-webkit-transform:translate(-50%,-50%);	
	-o-transform:translate(-50%,-50%);	
	transform:translate(-50%,-50%);	
}

.full-content-picture{
/*	cursor:drag;
	cursor:url(../img/minify.cur), url(../img/minify.gif), pointer;*/
}

.sidebar{
	position:absolute;
	background-color:#1c1c1c;
	overflow:auto;
}

.sidebar-headline{
	padding-left:30px;	
	color:#999999;
	font-size:36px;
	font-family:'open_sanslight', 'Segoe UI', Arial, Helvetica, sans-serif;
}

.sidebar-infobox{
	padding: 0 20px 40px 30px;	
	color:#FFFFFF;
	font-size:12px;
	line-height:2em;
}

.sidebar-list, .sidebar-list-element, .minibar-list, .minibar-list-element{
	margin:0;
	padding:0;
	list-style:none;
}

.sidebar-list{
	padding: 0 20px 40px;
}

.sidebar-list-element{
	height:60px;
	width:320px;
	margin-bottom:0px;
	-webkit-transition: background-color 200ms ease;
	-moz-transition: background-color 200ms ease;
	-ms-transition: background-color 200ms ease;
	-o-transition: background-color 200ms ease;
	transition:background-color 200ms ease;		
/*	outline:1px solid red;*/
}

.sidebar-list-element:hover{
	background-color:#666666;	
}

.sidebar-list-element:hover .sidebar-icon{
	/*left:-3px;	*/
	-webkit-transform:scale(1.2);
	transform:scale(1.2);
}

.sidebar-link{
	display:block;
	height:60px;
	width:100%;
	position:relative;
	cursor:pointer;
}

.sidebar-icon{
	position:absolute;
	left:0;
	top:0;
	display:block;
	width:60px;
	height:60px;
	
	-webkit-transition: all 200ms ease-out;
	-moz-transition: all 200ms ease-out;
	-ms-transition: all 200ms ease-out;
	-o-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}

.sidebar-icon-qrcode{
	background-position:-990px 0;	
}

.sidebar-icon-mail{
	background-position:-360px 0;	
}

.sidebar-icon-bf{
	background-position:-420px 0;	
}

.sidebar-icon-twitter{
	background-position:-480px 0;	
}

.sidebar-icon-google{
	background-position:-540px 0;	
}

.sidebar-icon-pinterest{
	background-position:-600px 0;	
}

.sidebar-icon-snapwindows{
	background-position:-720px 0;	
}

.sidebar-icon-snapandroid{
	background-position:-660px 0;	
}

.sidebar-icon-download{
	background-position:-300px 0;	
}

.sidebar-icon-report{
	background-position:-240px 0;	
}

.sidebar-icon-legal{
	background-position:-780px 0;	
}

.mini-icon{
	display:inline-block;
	width:20px;
	height:20px;
	vertical-align:middle;
}

.mini-icon-view{
	background-position:-120px 0;
}

.mini-icon-delete{
	background-position:-140px 0;
}

.mini-icon-time{
	background-position:-160px 0;
}

.mini-icon-size{
	background-position:-120px -20px;
}

.mini-icon-file{
	background-position:-140px -20px;
}

.mini-icon-link{
	background-position:-160px -20px;
}

.sidebar-link-text{
	position:absolute;
	display:block;
	left:70px;
	top:10px;
	font-size:18px;
	line-height:36px;
	color:#FFFFFF;
}


.minibar{
	position:absolute;
	background-color:#1c1c1c;
	display:none;
	
	width:100%;
	height:60px;
	bottom:50px;
	overflow:hidden;	

}

.minibar-list{
	position:relative;
	display:block;
	width:100%;
	min-width:300px;
	height:100%;

}

.minibar-list-element{
	position:absolute;
	display:inline-block;
	width:20%;
	height:60px;
	padding:0;
	margin:0;
	text-align:center;
}

.minibar-list-element-mail{
	left:0%;
}

.minibar-list-element-bf{
	left:20%;
}

.minibar-list-element-twitter{
	left:40%;
}

.minibar-list-element-google{
	left:60%;
}

.minibar-list-element-pinterest{
	left:80%;
}

.minibar-link{
	padding:0;
	margin:0;
}

.minibar-icon{
	display:inline-block;
	width:60px;
	height:60px;
}


.dialog-fullscreen-holder{
	position:absolute;
	z-index:100;
	top:0;
	right:0;
	bottom:0;
	left:0;
	height:100%;
	background-color:RGBA(0,0,0,0.6);
}

.dialog-holder-wide{
	position:absolute;
	width:100%;
	top:50%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	background-color:#0099CC;
}

.dialog-holder-content{
	position:relative;
	left:50%;
	width:400px;
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
	padding:80px;
	
	color:white;
	font-size:20px;
/*	font-family:'open_sansregular', 'Segoe UI', Arial, Helvetica, sans-serif;*/
	
}

.dialog-text{
	margin-bottom:25px;
}

.dialog-textarea{
	font-family:'open_sansregular', 'Segoe UI', Arial, Helvetica, sans-serif;
	width:100%;
	height:100px;
	min-width:100%;
	min-height:100px;
	max-width:100%;
	max-height:100px;
	padding:10px;
	margin-bottom:25px;	
	background-color:RGB(255,255,255);
	border:none;
	outline:none;
	color:#333333;
}

.dialog-button-holder{
	margin-top:25px;
}

.dialog-btn{
	border:1px solid white;
	padding:10px 30px;
	margin-right:20px;	
	color:#FFFFFF;
	text-decoration:none;
	cursor:pointer;
}

.dialog-btn:hover{
	background-color:RGBA(255,255,255,0.5);
}

.smaller-font{
	font-size:16px !important;
	line-height:36px !important;
}


@media all and (orientation: portrait){
	.content-box-holder{
		top:60px;
		bottom:270px;
		width:100%;
	}
	
	.sidebar{
		width:100%;
		height:220px;
		bottom:50px;
		padding-top:20px;
	}
}

@media all and (max-width: 480px){
		
	.dialog-holder-content{
		width:220px;
		padding:20px;
		color:white;
		font-size:14px;
	}

	.dialog-button-holder{
		margin-top:0px;
	}

	.dialog-btn{
		padding:5px 10px;
		margin-right:0px;
	}
}

@media all and (orientation: portrait) and (max-width: 480px){
	.content-box-holder{
		top:60px;
		bottom:110px;
		width:100%;
	}
	
	.sidebar{
		display:none;
	}

	.minibar{
		display:block;
	}
	
/*	
	.sidebar{
		width:100%;
		height:160px;
		bottom:50px;
	}
	
	.sidebar-headline{
		padding-left:10px;	
	}

	.sidebar-infobox{
		padding: 0 10px 40px;	
	}
	
	.sidebar-list{
		padding: 0 0 40px;
	}
	
	.sidebar-list-element-snapandroid .smaller-font{
		font-size:13px;
	}
	*/

}

@media all and (orientation: landscape){
	.content-box-holder{
		top:60px;
		bottom:50px;
		left:0;
		right:360px;
		-webkit-border-radius: 0 20px 0 0;
		border-radius: 0 20px 0 0;
	}
	
	.sidebar{
		width:360px;
		top:60px;
		right:0;
		bottom:50px;
	}
	
	
}

@media all and (orientation: landscape) and (max-width: 640px){
	.content-box-holder{
		top:60px;
		bottom:50px;
		left:0;
		right:100px;
	}

	.sidebar{
		width:100px;
		top:60px;
		right:0;
		bottom:50px;

	}

	.sidebar-list{
		padding: 0 20px;
	}	
	
	.sidebar-list-element{
		height:60px;
		width:60px;
		margin-bottom:0px;
	/*	outline:1px solid red;*/
	}	
	
	.sidebar-link-text{
		display:none;
	}
	
	.sidebar-headline{
		display:none;
	}
	
	.sidebar-infobox{
		display:none;
	}
}