@charset "utf-8";
/* CSS Document */

#mp_layout_wrap {font-size:100%; text-align:left;}

/* ---- TOP ADMIN/FOLDER AREA ----- */
#admin { position:relative; padding:10px 10px 5px 10px; margin-top:2px;  margin-bottom:2px; -webkit-border-radius: 5px; 
	-moz-border-radius: 5px; border-radius: 5px;}
#LibraryMessages {font-weight:bold;}
#LibraryBreadcrumb {margin:0px 0px 5px 0px;}
#folderadmin {width:48%; float:right; margin:10px 0px 10px 0px; text-align:right;}
#foldertitle {width:48%; float:left; margin:10px 0px 10px 0px;}
#foldertitle .title {font-size:24px; font-weight:bold;}

#folderlist {position:relative; padding-left:55px;}
#folderlist .folder {position:relative; display:block; float:left; width:153px; height:175px; margin: 0px 45px 35px 0px; overflow:hidden;}
#folderlist .folder .folderimage {position:absolute; top:48px; left:27px; width:100px; height:75px;}
#folderlist .title {position:absolute; top: 143px; left:15px; width:132px; height:32px; overflow:hidden;}
#folderlist .options {position:absolute; top:48px; right:8px; width:23px;}

/*On pages with files, folders are smaller*/
#subfolderlist {position:relative; padding: 0px 0px 0px 25px;}
#subfolderlist .folder {position:relative; display:block; float:left; width:100px; height:110px; margin: 0px 25px 5px 0px; overflow:hidden;}
#subfolderlist .folder .folderimage {position:relative; width:50px; height:38px; margin:19px 0px 0px 10px;}
#subfolderlist .title {position:absolute; width:100px; height:38px; margin:0px 0px 0px 0px; overflow:hidden; top:72px;}
#subfolderlist .options {position:relative; float:right; width:30px; margin:12px 0px 0px 0px;}


/* ----- PLAYER ------ */
#player_wrap { position:relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding:10px;}
#player_wrap #player_container {position:relative; float:left; width:250px; height:250px; margin:0px 10px 10px 0px;}
#player_container #player_overlay { position:absolute; top:25px; left:0px; z-index:30; }
#player_container #player { position:absolute; top:0px; left:0px; z-index:10; width:250px; height:30px; display:block; text-align:center;}



.player_overlay_audio 
{ 

	width:250px; height:250px; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat; 
	background-position: center center;
	
	margin:10px 0px 10px 0px; 
	-webkit-border-radius: 5px; j
	-moz-border-radius: 5px; 
	border-radius: 5px;
	
}


#player_wrap .info {
	position:relative; 
	margin-left: 0px;
	margin-top: 8px;
}


.info .nowplaying {position:relative; display: inline-block; width:200px; padding:3px 8px 3px 8px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-transform:uppercase; font-weight:bold; letter-spacing:0.2em; text-align:center; vertical-align: middle; }
.info .download { display: inline-block; margin-left: 10px; vertical-align: middle; }
.info .launch {position:absolute; top:0px; right:0px;}
.info #file_addfile1 { position:relative; float:left; padding:0px 5px 0px 0px; height:22px; overflow:hidden; font-size:13px;}
.info #file_addfile2 { position:relative; float:left; padding:0px 5px 0px 0px; height:22px; overflow:hidden; font-size:13px;}
.info .hidden {background-image:url();}

/*Search*/
#mediasearch {position:absolute; right:10px; top:10px; width:150px; z-index:10;}
#mediasearch .searchfield {position:absolute; top:0px; left:0px; width:110px; height:16px; padding:3px 6px 3px 8px; border:0px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; font-size:15px;}
#mediasearch .go {position:absolute; top:0px; right:0px;}
#mediasearch_searchingFor {position: absolute; top: 10px; left: 10px; z-index:10;}
#mediasearch_searchingFor a {padding-left: 10px;}
#goButton {display: block; cursor: pointer; width: 22px; height: 22px;}
.directoryFilterTitle { padding-top: 10px; }
.filterByWording { padding-bottom: 10px; font-size: 14px; }


/*Download Button*/
#downButton { /*position:absolute; top: 0px; left:140px;*/ display:block; width:24px; height:23px; }
#downButton a:hover { position:absolute; top: -23px; left:140px; display:block; width:24px; height:23px;}


/* ----- PLAYER FILE DETAILS ------ */
.info .detail { position:relative; min-height:230px; padding:10px; margin:10px 0px 10px 0px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.info .detail .title {font-size:24px; font-weight:bold; padding-bottom:3px;}
.info .detail .date {font-size:15px; padding-bottom:3px;}
.info .detail .size {font-size:15px; padding-bottom:3px;}
.info .detail .custom1 {font-size:15px; padding-bottom:3px;}
.info .detail .custom2 {font-size:15px; padding-bottom:3px;}
.info .detail .description {}


/* ----- FILE DISPLAY -----*/
#filelist { position:relative; padding:30px 10px 20px 10px; margin-top:2px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#filelist .row { position:relative; margin-top:2px; margin-bottom:1px; padding:5px;}
#filelist .libheading { position:relative; text-transform:uppercase; letter-spacing:0.2em; font-weight:bold; height:14px; font-size:100%; border:0px; overflow:hidden;}
#filelist .row .column1 { position:relative; float:left; width:45px; padding:0px 0px 0px 5px;}
#filelist .row .column2 { position:relative; float:left; width:35%; padding:5px 0px 5px 15px;}
#filelist .row .column3 { position:relative; float:right; width:135px; padding:5px 0px 5px 0px;}
#filelist .row .column4 { position:relative; float:right; width:110px; padding:5px 0px 5px 15px;}
#filelist .row .column5 { position:relative; float:right; width:110px; }
#filelist .libheading .column1 {width:50px; padding:0px;}
#filelist .libheading .column2, #filelist .libheading .column3, #filelist .libheading .column4 {padding:0px 15px 5px 0px;}
#filelist .rowcontainer { height:210px; overflow:auto; }


/* -- Styles to help clean up the layout --*/
.clearfloat {clear:both;}
.hidden {display:none;}
img.scale {width: 100%; height:100%;}



#file_image {
	float: left;
	width: 230px;
	height: 230px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat; 
	background-position: center center;
	margin-right: 15px;
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}






#audio { width:100%; }

@media (max-width: 756px)
{
	/* Hide the icon and custom columns because the page is too narrow to show them nicely. */
	#player_wrap .info {position:relative; margin-left:0px; /*margin-top:290px;*/ }
	
	#filelist .row .column1 { display:none; }
	#filelist .row .column2 { position:relative; float:left; width:55%; padding:5px 0px 0px 15px;}
	#filelist .row .column3 { display:none; }
	#filelist .row .column5 { position:relative; float:right; width:50px; overflow:none; }
	#filelist .row .options { position:relative; float:right; width:50px; overflow:none; }
}

@media (max-width: 450px)
{
	/* Hide everything we can, and place the info box UNDER the image. */
	#player_wrap .info {position:relative; margin-left:0px; /*margin-top:290px;*/ }
	.libheading { display:none; }
	.mediasearch { margin-bottom:6px; }
	#filelist .row .column1 { display:none; }
	#filelist .row .column2 { position:relative; float:left; width:80%; padding:5px 0px 0px 15px;}
	#filelist .row .column3 { display:none; }
	#filelist .row .column4 { display:none; }
	#filelist .row .column5 { position:relative; float:right; width:50px; overflow:none; }
	#filelist .row .options { position:relative; float:right; width:50px; overflow:none; }
	#file_image { float: left; }
		
}