#topic_app_index{

	position:absolute;
	top:40px;
	left:0px;
	right:0px;
	bottom:0px;
	background:white;


	#left{
		background:rgba(0,0,0,0.8);
		position:absolute;
		top:0px;
		left:0px;
		width:300px;
		bottom:0px;
		
	}
	
	#topic_show{
		position:absolute;
		top:0px;
		left:300px;
		right:0px;
		bottom:0px;
		background:rgba(250,250,250,0.9);
		
		overflow:auto;
	
	}
	
	
	.note{
		//@include border-radius(5px);
		//@include box-shadow(0px 0px 5px rgba(0,0,0,0.5) inset);
		position:relative;
		margin-bottom:1em;
		min-height:120px;

		.left{
			//@include box-shadow(0px 0px 5px rgba(0,0,0,0.5));
			//@include border-radius(3px 0px 0px 3px);
			position:absolute;
			top:0px;
			left:0px;
			bottom:0px;
			width:100px;
			background:rgba(0,0,0,0.8);
			text-align:center;
			padding:10px;
		
			color:rgba(255,255,255,0.9);
		
			*{
				text-align:center;
			}
		
			.avatar{
				width:70px;
				height:70px;
				//@include border-radius(50%);
				margin:auto;
			}
	
		}

		.right{
			min-height:150px;
			margin-left:120px;
			padding:10px;
			line-height:1.1em;		
			float:none;	
			
			img{
			max-width:100%;
			max-height:99%;
			
			}
			p,ul, h1,h2,h3{
			max-width:600px;
			margin-left:5%;
			
			p,ul{
			margin-left:0px;
			max-width:inherit;
			
			}
			}
			
			.large{
			max-width:100%;
			margin-left:0px;
			
			
			}
		
			.links{
				float:right;
		
			}
		}
	
		.bottom{
			background:rgb(255, 255, 204);
			position:relative;
			margin-left:120px;
			//@include border-radius(0px 0px 3px 0px);
			//@include box-shadow(0px 0px 2px rgba(0,0,0,0.3),-1px -1px 5px rgba(0,0,0,0.2) inset);
			padding:10px;
			padding-top:2px;
			
			min-height:75px;
		
			.note_file{
				margin:8px 0px;
				position:relative;
				top:-4px;
				.icon{
				height:28px;
				position:relative;
				top:8px;
				}
			}
		
			.note_file_queue{
				position:absolute;
				top:1em;
				right:0em;
		
				.file_upload_progress{
					width:100px;
			
			
			
				}
		
			}
			.fileupload{
				
			.upload{
				position:absolute;
				right:10px;
				top:-24px;
				z-index:1000;
				
					.add_files{
						background:black;
						color:white;
						padding:5px 10px;
						//@include border-radius(5px 5px 0 0);
					
					}
				
					.progress{
						
			
				
					}
				}
				input[type=file]{
					display:none;
			
				}
		
			}
		
	
		}
	
	
	

	}



	#file_prev{
		position:absolute;
		top:10px;
		bottom:10px;
		background:rgba(0,0,0,0.9);
		width:98%;
		right:-50%;

		//@include border-radius(5px);
	
		//@include transition(all 1s ease);
	

		&:hover{

			right:1%;
	
		}
		iframe{
			position:absolute;
			width:96%;
			height:95%;
			top:20px;
			left:0px;
			right:0px;
			bottom:0px;
			margin:auto;
	
		}

	}





}
	
	
	
textarea.markdown{
	display:block;
	width:97%;
	margin:1% auto;
		
	min-height:400px;
	
}
	



#add_topic{
	
	display:block;
	color:rgba(250,250,250,0.8);
	text-decoration:none;
	margin-left:5px;
	margin-top:2px;
	padding:5px 10px;
	
	

}

#topics{
	margin-top:5px;
	border-top:1px solid rgba(250,250,250,0.1);
	overflow:auto;
	position:absolute;
	top:2em;
	bottom:5px;
	left:0px;
	right:0px;
	a{
		color:white;
		display:block;
		padding:6px 10px;
		border-bottom:1px solid rgba(250,250,250,0.1);
		color:rgba(250,250,250,0.8);
		text-decoration:none;
		margin-left:5px;
		margin-top:2px;
		//@include border-radius(5px 0px 0px 5px);
		
		&.active, &:hover{
			background:rgba(250,250,250,0.9);
			color:rgba(0,0,0,0.7);
			
		
		}
	
	}


}


#topic_show{
	padding:10px;

	.topic_links{
		float:right;
	
	}

	h1{
		margin-top:0px;
		margin-bottom:0.2em;
		padding-bottom:0px;
	
	}


}