/* Library Styles */
/******************/

#panels {height:100%; width:100%;}

#left, #library, #right {
	position:absolute; top:36px; bottom:0;
	}
	#left .panelheader {
		right:-8px;
		}

	#left {
		background-color:#ecf0f1;
		left:0;
		width:215px;
		}
		
		#left .button {			
			background-color:#dce1e2;
			background-image: linear-gradient(top, rgb(231,236,237) 10%, rgb(215,221,223) 100%);
			background-image: -o-linear-gradient(top, rgb(231,236,237) 10%, rgb(215,221,223) 100%);
			background-image: -moz-linear-gradient(top, rgb(231,236,237) 10%, rgb(215,221,223) 100%);
			background-image: -webkit-linear-gradient(top, rgb(231,236,237) 10%, rgb(215,221,223) 100%);
			background-image: -ms-linear-gradient(top, rgb(231,236,237) 10%, rgb(215,221,223) 100%);	
			background-image: -webkit-gradient(
				linear,
				left top,
				left bottom,
				color-stop(0.1, rgb(231,236,237)),
				color-stop(1, rgb(215,221,223))
				);	
			border-color:#aab7ba;
			display:inline-block;
			margin:7px 0 0 7px;
			padding:5px 10px 5px 27px;
			position:relative;
			}
			#left .button:hover {			
				background-color:#dce1e2;
				background-image: linear-gradient(top, rgb(221,229,232) 10%, rgb(196,206,208) 100%);
				background-image: -o-linear-gradient(top, rgb(221,229,232) 10%, rgb(196,206,208) 100%);
				background-image: -moz-linear-gradient(top, rgb(221,229,232) 10%, rgb(196,206,208) 100%);
				background-image: -webkit-linear-gradient(top, rgb(221,229,232) 10%, rgb(196,206,208) 100%);
				background-image: -ms-linear-gradient(top, rgb(221,229,232) 10%, rgb(196,206,208) 100%);	
				background-image: -webkit-gradient(
					linear,
					left top,
					left bottom,
					color-stop(0.1, rgb(221,229,232)),
					color-stop(1, rgb(196,206,208))
					);	
				border-color:#929fa2;
				color:#868d90;
				}
			#left .button:after {			
				background:url(../images/icon-folder_add.png) 0 0 no-repeat;
				content:'';
				display:block; height:15px; width:32px;
				position:absolute; top:3px; left:-12px;
				}
	
		#folders, #collections {
			background-image: linear-gradient(bottom, rgb(220,226,228) 10%, rgb(235,239,240) 100%);
			background-image: -o-linear-gradient(bottom, rgb(220,226,228) 10%, rgb(235,239,240) 100%);
			background-image: -moz-linear-gradient(bottom, rgb(220,226,228) 10%, rgb(235,239,240) 100%);
			background-image: -webkit-linear-gradient(bottom, rgb(220,226,228) 10%, rgb(235,239,240) 100%);
			background-image: -ms-linear-gradient(bottom, rgb(220,226,228) 10%, rgb(235,239,240) 100%);			
			background-image: -webkit-gradient(
				linear,
				left bottom,
				left top,
				color-stop(0.1, rgb(220,226,228)),
				color-stop(1, rgb(235,239,240))
				);
			}
			#folders {
				border-bottom:1px solid #cfd5d6;
				border-top:1px solid #fff;
				display:block; height:50%;
				padding:0 15px;
				overflow:auto;
				}
				#folders ul {
					font-size:13px;
					padding:5px 0;
					}
					#folder_tree > ul {padding-top:10px; margin-left:-10px;}
					/*#folder_tree ul ul {
						margin-left:-15px;
						}*/
					#folder_tree li.open > ul {
						display:block;
						}
						
     #collections {
        border-top:1px solid #fff;
        display:block; height:50%;
		margin-top:-3px;
        padding:0 15px;
        overflow:auto;
        }
        #collections h2 {
          padding-top:15px;
          }
		#collections ul {
		font-size:13px;
		padding:5px 0;
		}
	
	#library {
		background-color:#f3f7f7;
		display:block; width:auto;
		left:215px; right:215px;
		margin-left:8px;
		z-index:3;
		}		
		#library > div {
			overflow-y:scroll;
			height:100%; width:100%;
			overflow-y:scroll;
			}
			
			#collect {
				background:#3c83c9 url(../images/collect-bg.jpg) 0 0 repeat-x;
				display:none;
				}
				#collect h1, #collect h2 {text-align:center;}
				#collect h1 {
					color:#5dbcff;
					font-size:25px;
					padding-top:20px;
					letter-spacing:-1;					
					}
				#collect h2 {
					color:#1c3c6c;
					padding-bottom:20px;
					}
					
				#collection_options {
					padding:0 50px;
					}
				#collect li {
					float:left;
					min-width:300px;
					width:50%;
					}
				
				#collect li a {
					background-position:0 0;
					background-repeat:no-repeat;
					color:#78c7ff;
					display:block; 
					font-size:12px;
					margin:15px 0 0 15px;
					min-height:107px;
					padding:20px 20px 0 145px;
					}
					#collect li a#upload {background-image:url(../images/collect-upload.png)}
					#collect li a#dropbox {background-image:url(../images/collect-dropbox.png)}
					#collect li a#evernote {background-image:url(../images/collect-evernote.png)}
					#collect li a#citations {background-image:url(../images/collect-citations.png)}
					#collect li a#rss {background-image:url(../images/collect-rss.png)}
					#collect li a#web {background-image:url(../images/collect-web.png)}
					#collect li a#email {background-image:url(../images/collect-email.png)}
					
					#collect li a:hover {background-position:0 -127px; color:#fff;}
					
					#collect li a h3 {color:#fff; font-size:18px; margin-left:-5px;}
			
			
			#edit-window {display:none;}
			
				#library .panelheader h2 {
					float:left;
					padding:0;
					}
				#library .panelheader nav {
					float:right; margin-left:15px;
					}
					#library .panelheader ul.view {
						position:absolute; top:7px; right:16px;
						}
						#library .panelheader ul.view li {
							display:inline;
							}
							#library .panelheader .button {						
								display:inline-block; height:20px; width:27px;
								position:relative;
								text-indent:-9999px;
								}
								#library .panelheader .button:after {
									background:url(../images/icon-views.png) 0 0 no-repeat;			
									content:'';
									display:block; height:12px; width:14px;
									position:absolute; top:4px; left:6px;
									}
									#library .panelheader #list_view:after {
										background-position:0 0;			
										}
										#library .panelheader #list_view:hover:after, #library .panelheader #list_view.active:after {
											background-position:0 -12px;			
											}
									#library .panelheader #icon_view:after {
										background-position:-14px 0;			
										}
										#library .panelheader #icon_view:hover:after {
											background-position:-14px -12px;			
											}
								
					#fileupload {
						padding:15px;
						}
						
			#files header {
				background-color:#f2f5f5;
				padding:7px 15px;
				}
				#files header h3, #files header abbr {
					font-size:11px;
					font-weight:bold;
					line-height:11px;
					}
					#files header h3 {
						width:100px;
						padding:0;
						}
						#files abbr {float:right;}
						#files header abbr.filetype {
							width:80px;
							}
						#files header abbr.size {
							width:70px;
							text-align:right;
							}
						#files header abbr.modified {
							width:150px;
							}
			#files ol {
				font-size:14px;
				font-weight:bold;
				}
				#files li {
					}
					#files li a {
						display:block;
						padding:7px 15px;
						position:relative;
						}
						#files li a.selected {
							background-color:#fff;
							box-shadow: 0px 0px 3px #79c8dc;
							z-index:10;
							}
							#files li a.selected abbr {color:#333;}
						
						#files li a {
							background-color:#fafcfc;
							margin-bottom:1px;
							}
						#files li a:hover {
							background-color:#fff;
							}
						#files li a h3, #files li a abbr {
							font-size:13px;
							font-weight:bold;
							padding:0;
							}
							#files li a abbr {
								color:#6C6C6C;
								float:right;
								font-weight:normal;
								}
								#files li a abbr.filetype {
									width:80px;
									}
								#files li a abbr.size {
									font-size:10px;
									text-align:right;
									width:70px;
									}
								#files li a abbr.modified {
									width:150px;
									}

					#library-items #fileicons img {
						width: 64px;
						height: 64px;
					}
					#library-items #fileicons li, div#jstree-iconview-dnd  {
						display: block;
						width: 72px;
						height: 72px;
						padding: 28px;
						text-align: center;
					}

					#library-items #fileicons li a h3, div#jstree-iconview-dnd a h3{
						margin-bottom: 20px;
					}
							#library-items #zen-reflections{
								float:left;
							}
						#library-items #zen-reflections h2{
							padding-left:12px;
						}
					#library-items #zen-reflections #reflections_editor #reflection-form label{
						display:none;
					}
					#library-items #zen-reflections #reflections_editor #reflection-form input[type=text]{
						width:634px;
					}
					
					#library-items #zen-reflections #reflections_editor #reflection-form textarea{
						height:600px;
					}
					
					ul#collection_preview{
						float:left;
						margin:6px 24px;
						padding:16px;
						height: 820px;
					}
					ul#collection_preview li{
						background: #DCE0DC;
						border: 1px solid #cdcdcd;
						display:block;
						width: 500px;
						margin: 12px 0;
						/*border: 1px solid #999;*/
						box-shadow: 0 4px 4px #666;
						-moz-box-shadow: 0 4px 4px #666;
					}
					ul#collection_preview li iframe{
						padding:0;
						margin: 0;
					}
					ul#collection_preview li.generic_word{
						width:96px;
						height:96px;
						margin:0;
						padding-left:104px;
						padding-top:24px;
						vertical-align:middle;
						background:url("../images/word_96.png") no-repeat;
						border:none;
						box-shadow:none;
						-moz-box-shadow:none;
					}
						ul#collection_preview li.generic_pdf{
							width:64px;
							height:64px;
							padding-left:72px;
							padding-top:4px;
							margin:0;
							vertical-align:middle;
							background:url("../images/pdf_64.png") no-repeat;
							border:none;
							box-shadow:none;
							-moz-box-shadow:none;
						}
			
			.document {
				background-color:#fff;
				border:1px solid #bdbdbd;
				margin:20px 50px;
				padding:30px 50px;
				}
				.document p {
					font-size:12px;
					line-height:26px;
					padding-top:15px;
					}
				.document h3 {
					padding-top:15px;
					text-align:center;
					}
							
	#right {
		background-image: linear-gradient(bottom, rgb(220,226,228) 10%, rgb(235,239,240) 100%);
		background-image: -o-linear-gradient(bottom, rgb(220,226,228) 10%, rgb(235,239,240) 100%);
		background-image: -moz-linear-gradient(bottom, rgb(220,226,228) 10%, rgb(235,239,240) 100%);
		background-image: -webkit-linear-gradient(bottom, rgb(220,226,228) 10%, rgb(235,239,240) 100%);
		background-image: -ms-linear-gradient(bottom, rgb(220,226,228) 10%, rgb(235,239,240) 100%);			
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.1, rgb(220,226,228)),
			color-stop(1, rgb(235,239,240))
			);
		right:0;
		width:210px;
		}
		.meta {
			overflow-y:scroll;
			height:100%; width:100%;
			}
			.meta.default {
				display:block;
				}
			.meta .preview {
				background-color:#dedede;
				border:3px dashed #c9c9c9;
				border-radius:10px;
				box-shadow:none;
				color:#b2b2b2;
				margin:15px;
				padding:10px 0;
				text-align:center;
				}
				.meta .preview images {
					height:130px; width:100px;
					}
			.meta .empty {
				padding:70px 0;
				}
			#metadata-details li, #tag-details li {
				clear:both;
				}
				#metadata-details h4 {
					display:block; width:50px;
					float:left;
					font-size:10px;
					padding-top:7px;
					text-transform:uppercase;
					vertical-align:top;
					}
				#metadata-details p {
					display:block;
					float:left;
					font-size:11px;
					margin-left:10px;
					padding-top:5px;
					}
			.meta .data {
				padding:10px 10px 10px 20px;
				}
				.annotations {padding-top:10px;}
					.annotations ul {margin-left:15px;}
						.annotations li {
							font-size:12px;
							list-style-type:square;
							padding-top:10px;
							}
					.annotations textarea {
						display:none;
						height:100px; width:100%;
						margin-top:10px;
						}
			#metadata-form,
			#tag-form {
				text-align:right;
				}
				#metadata-form textarea {
					height:60px;
					}
				#metadata-form input,
				#metadata-form textarea,
				#tag-form input {
					text-align:left;
					display:block;
					width:auto;
					}
					#metadata-form input[type=submit], #tag-form input[type=submit]  {width:auto;}
					
				#metadata-form label,
				#tag-form label {
					display:none;
					}
			
			#tag-details {
				padding-top: 10px;
				}

			.tags-edit a{
				font-size: 11px;
				color: #999;
				}


.meta li.reflection, #jstree-dnd.reflection{
  cursor:pointer;
  list-style-type:none;
  -moz-user-select:none;
  -webkit-user-select:none;
  font-size:10px;
  padding:2px;
	text-transform:uppercase;
	vertical-align:top;
	border:1px solid transparent;
}
	
#left.collapsed,
#right.collapsed {
	background: #ecf0f1; /* Old browsers */
	background: -moz-linear-gradient(top,  #ecf0f1 0%, #d3dadc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ecf0f1), color-stop(100%,#d3dadc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ecf0f1 0%,#d3dadc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ecf0f1 0%,#d3dadc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ecf0f1 0%,#d3dadc 100%); /* IE10+ */
	background: linear-gradient(top,  #ecf0f1 0%,#d3dadc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecf0f1', endColorstr='#d3dadc',GradientType=0 ); /* IE6-9 */
	width:22px;
	}
	#right.collapsed {width:30px}
	
	#left.collapsed #folders,
	#left.collapsed #collections,
	#left.collapsed header h2,
	#right.collapsed .meta,
	#right.collapsed header h2 {
		display:none;
		}
	.collapsed .handle .expand {
		background: #e9eced; /* Old browsers */
		background: -moz-linear-gradient(left,  #e9eced 0%, #ffffff 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,#e9eced), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(left,  #e9eced 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(left,  #e9eced 0%,#ffffff 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(left,  #e9eced 0%,#ffffff 100%); /* IE10+ */
		background: linear-gradient(left,  #e9eced 0%,#ffffff 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9eced', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
		border:1px solid #d1d6d7;
		border-left: 0 none;
		cursor:e-resize;
		display:block; height:52px; width:18px;
		margin-top:-26px;
		position:absolute; top:50%; left:-22px;
		text-indent:-9999px;
		}
		.collapsed .handle .expand:hover {background:#fff;}
		.collapsed .handle .expand:after {			
			content: ''; 
			background: url(../images/expand.png) 0 0 no-repeat; 
			height:17px;  width:9px;
			margin-top:-4px;
			position: absolute; top:22px; left:4px; 
			}	
		#right.collapsed .handle .expand {
			background: #e9eced; /* Old browsers */
			background: -moz-linear-gradient(right,  #e9eced 0%, #ffffff 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, right top, left top, color-stop(0%,#e9eced), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(right,  #e9eced 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(right,  #e9eced 0%,#ffffff 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(right,  #e9eced 0%,#ffffff 100%); /* IE10+ */
			background: linear-gradient(right,  #e9eced 0%,#ffffff 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9eced', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
			border:1px solid #d1d6d7;
			border-right: 0 none;
			cursor:w-resize;
			left:auto; right:-22px;
			}
			#right.collapsed .handle .expand:after {			
				content: ''; 
				background-position:-9px 0; 
				}	
				#right.collapsed .handle .expand:hover {background:#fff;}	


.ui-droppable{
  border:1px solid white;
}

/* these classes seem to be nec to correctly size the editor, as the width/formWidth height/formHeight params don't seem to work. */
.wysiwyg{
  width:640px;
  height:401px;
}

.wysiwyg-frame{
  width:640px;
  height:380px;
}