/*
 * OWNER: composer.css
 * Post / comment / attachment composers (ui_composer, ui_comment_composer).
 * Shared fake_textarea / commentbox chrome that historically lived with composer.
 * Not for general form labels/inputs (forms) or feed chrome (forum).
 * Includes viewport @media for ui_composer (peeled from responsive.css).
 */

/* COMPOSER */

.ui_composer { border: 0; margin-bottom: 15px; }

.ui_composer .ui_composer_actions {
    background: #eee;
    display: none;
}

.ui_composer_file .ui_composer_actions { display: block; }
.ui_composer_post .ui_action_bar select { max-width: 100px; }

  .ui_composer .ui_group_img.face-wrap { 
    display: none;
    width: 55px;
  }

  .ui_composer .ui_composer_items {
  background: #eee;
  border-bottom: 1px solid #ddd;
  height: 42px;
  padding: 0 10px 0 5px;
}

.composer_identity_wrap img.pic {
  border-radius: 3px;
  box-shadow: rgba(0,0,0,.2) 0px 1px 2px;
  float: left;
  margin-right: 10px;
  width: 58px;
  
}

.composer_identity_wrap .ui_composer {
  margin-left: 67px;
  overflow: hidden;
}

.ui_composer_items .ui_button.transparent-btn {
  color: #777;
  font-weight: bold;
	padding: 10px 7px;
}

  .ui_composer_items .ui_button.transparent-btn:hover { color: #496ba4; }
  .ui_composer_items li.active .ui_button.transparent-btn { color: black; }
  .ui_composer_items span.label { 
    display: block;
    padding: 10px 13px 10px 8px; 
  }

	.ui_composer_items span.cnub {
		background: url('/foundation_static/images/comp_nub.png') no-repeat -18px 0;
		bottom: -1px;
		display: none;
		left: 20px;
		position: absolute;
		height: 5px;
		width: 9px;
	}

	.ui_composer_items li.active span.cnub { display: block; }

.ui_composer_form {
	background: #fafafa;
	border: 1px solid #ddd;
	padding: 5px;
}

  .ui_composer_form.ui_composer_link { background: #fff; }

  .ui_composer .input_wrap .taggables { display: none; }
  .ui_composer .input_wrap.open .taggables { display: block; }

  .ui_composer_form.ui_composer_post .input_wrap { border: 0; }
  
  .ui_composer_form .input_wrap .fake_textarea.nopad { padding: 0px; }
  
  .ui_composer_form.ui_composer_post.ui_composer_notes .input_wrap { border: 0; }
  
  .ui_composer .input_wrap .fake_textarea { border: 0; }
  .ui_composer_post .input_wrap .fake_textarea { padding: 0px; }
  .ui_composer_post .input_wrap .fake_textarea textarea { padding: 10px; }
	.ui_composer_form.focus { background: #eee; }

	.ui_composer_form span#count {
		color: #999;
		float: right;
		font-size: 12px;
	}

	.ui_composer_form span#count.red {
		color: red;
		font-weight: bold;
	}

	.attach {
		border-top: 1px dashed #cbd4df;
		display: none;
		padding: 10px;
		position: relative;
	}
  
  .ui_composer_form .input_wrap .attach { padding: 0; }
  .ui_group .ui_composer_form .link_attachments { border: 0; }
  
  .commentbox .attach {
    background: #fff;
  }

	textarea {
		background: white;
		border: 1px solid #cbd4df;
		font-size: 13px;
		height: 55px;
		overflow: auto;
		outline: none;
		padding: 0;
		width: 100%;
	}
	
	#popup textarea {
	  box-sizing: border-box;
	}

	.ui_composer_form textarea {
	  box-sizing: border-box;
    font-size: 13px;
		height: 78px;
    width: 100%;
		margin: 0px;
		overflow: hidden;
    padding: 0px;
	}
  
	.ui_composer.single_type .ui_composer_form textarea { height: 53px; }
  
  .ui_composer.single_type .ui_composer_form .open textarea,
	.ui_composer_form .open textarea { height: 90px; }
      
  .ui_composer.inline_feed.multi_type .ui_composer_form textarea:not(.open),
  .ui_composer_form #photosubmitbox textarea:not(.open) {
      height: 50px;
  }

	div.fake_textarea {
	  box-sizing: border-box;
		background: white;
		border: 1px solid #cbd4df;
		padding: 5px;
	}
  
  div.reply_wrapper .attach {
    background: #fff;
    border: 1px dashed #ccc;
    margin-top: 5px;
  }
	
	.ui_composer_form div.fake_textarea { padding: 10px; }
	
	.ui_comment_composer .input_wrap { background: #fff; border: 1px solid rgba(0,0,0,.2); }
	.incontext .ui_comment_composer .input_wrap { border-color: rgba(0,0,0,.1); }
	.ui_comment_composer .input_wrap div.fake_textarea { border: 0; }
	
  .incontext div.commentbox .ui_action_bar {
    background-color: #eee;
    border: 1px solid rgba(0,0,0,.04);
    border-top: 0;
    padding: 5px;
  }
	
	div.fake_textarea.nopad,
	.ui_composer_form div.fake_textarea.nopad { padding: 0; }
	
	div.tiny_mce .taggables div.fake_textarea { margin-top: -1px; }
	div.tiny_mce .taggables div.fake_textarea span.mentionsInput { border: 0; }

		div.fake_textarea textarea,
		div.fake_textarea input {
			border: 0 !important;
			outline: none;
			resize: none;
		}
    
    div.fake_textarea .dashed {
      border-bottom: 1px dashed #cbd4df;
      display: block;
    }
    
    #photosubmitbox .title_area div.fake_textarea .dashed {
      border-bottom: 0;
      border-top: 1px dashed #cbd4df;
    }
    
		div.fake_textarea span.tokenizer_wrap {
			display: block;
		}
    
    .commentbox.input div.fake_textarea span.tokenizer_wrap {
      border-top: 1px dashed #ddd;
    }
		
		div.commentbox.input textarea {
		  height: 15px;
      padding: 0;
      width: 100%;
		}
    
    #sidebar div.commentbox.input textarea,
    #sidebar ul.token-input-list li input {
      font-size: 11px;
      line-height: 1.3;
    }

    .feedback:not(.incontext) div.commentbox.input .fake_textarea textarea { 
      padding: 5px 0px 6px 0px;
    }

		div.fake_textarea ul.token-input-list {
			border: 0;
      box-shadow: none;
			box-sizing: border-box;
		}

	.ui_composer_form .box_white.bal { border: 1px solid #cbd4df; }
	.ui_composer_form .ui_button {
    line-height: 20px;
    margin: 0;
    text-transform: uppercase;
  }

	.ui_composer_form input.text {
		border: 1px solid #cbd4df;
		height: 19px;
		overflow: auto;
		outline: none;
		padding: 3px;
		width: 600px;
		-webkit-appearance: none;
	}
  
  .ui_composer_form .post_wrap .form_detail {
    font-size: 11px;
    line-height: 30px;
  }
		  
    .ui_composer_form .post_wrap input.text {
  	  border: 0;
  	  box-sizing: border-box;
  	  height: 30px;
      line-height: 30px;
  	  width: 65%;
  	}
  		
	  .ui_composer_form input.text { 
	    box-sizing: 
	    border-box; width: 100%;
	    height: auto;
      line-height: 1.5;
	    padding: 0 5px;
	  }
    
    .ui_composer_form .fake_textarea input.text {
      padding: 5px 10px;
    }
	  
	  .ui_composer_form input.text.fluid { 
	    padding: 8px 0;
	    width: 100%; 
	    -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
	  }
  
    .ui_composer_form ul.token-input-list,
		.ui_composer_form input.text.tokenize {
      box-shadow: none;
		  display: inline-block;
		  padding: 3px;
			width: 100%;
		}
        
        .ui_composer_link input.text {
            display: inline-block;
            width: 80%;
        }
		
		.ui_composer_form ul.token-input-list {
		  display: block;
		  padding: 2px;
		}
		
		/* INLINE COMPOSER ... looks like comments */
		
		.ui_composer.inline_feed {
		  border: 0;
          margin-bottom: 20px;
		  padding: 0;
		}
		
		.ui_composer.inline_feed.single_type {
		  background: none;
		  border: 0;
		  padding: 0;
		}
		
		.ui_composer.inline_feed .ui_group_content {
      border-color: #ddd;
		  border-width: 1px;
      overflow: visible;
		}
		
    .ui_composer.inline_feed.single_type .face-wrap {
      display: block;
    }

    .ui_composer.inline_feed.single_type .ui_group_content {
      border: 0;
      margin-left: 65px;
    }
    
    .ui_composer.inline_feed.single_type .ui_composer_items {
      display: none;
    }
		
		.ui_composer.inline_feed.single_type .post_wrap,
		.ui_composer.inline_feed.single_type .ui_group_content .main_form {
  		border: 1px solid #dadada;
  	}
  	
		.ui_composer.inline_feed.single_type .post_wrap {
  		border-top: 0;
		}
    
    .ui_composer.inline_feed.single_type .link_attachment .post_wrap {
      border: 0;
      padding: 0;
    }
		
		.ui_composer.inline_feed.single_type .file_attachment .post_wrap,
    .ui_composer.inline_feed.single_type .post_wrap {
      background: #fff;
      padding: 5px;
    }
		
    .ui_composer.inline_feed.single_type .ui_composer_items {
      background: #f6f7f8;
      border: 1px solid #dadada;
    }
    
    .ui_composer.inline_feed.single_type .ui_composer_form {
      background: none;
      padding: 0;
    }
    
    .ui_composer.inline_feed.single_type .ui_action_bar {
      background: #eee;
      border: 1px solid #dadada;
      border-top: 0;
      padding: 5px;
    }
		
		
		/* PHOTOS COMPOSER */
		
		.ui_composer_form.ui_composer_file { padding: 0; }
		
		.ui_composer_form.ui_composer_file #photoform,
		.ui_composer_form.ui_composer_file .fake_textarea,
		.ui_composer_form.ui_composer_file #photosubmitbox {
		  border-width: 0;
		  margin: 0;
		}
		
		.ui_composer_form.ui_composer_file .post_body {
		  padding: 10px;
		}
		
		.ui_composer_form .bordertop,
		.ui_composer_form.ui_composer_file .post_body,
		.ui_composer_form .taggables .fake_textarea {
      border-top-color: #cbd4df;
		  border-top-width: 1px;
		  border-top-style: dashed;
		}
		
		/* NOTES COMPOSER */
		
		.ui_composer_form.ui_composer_notes .fake_textarea {
		  padding: 0;
		}
		
		@-moz-document url-prefix(){
			.token-input-list input {
				border: 0px !important;
			}
			
			.ui_composer_form input.text.tokenize,
			.ui_composer_form.ui_composer_link input.text {
				width: 530px;
			}
		}
		
	.ui_composer .field_link,
	.ui_comment_composer .field_link {
	  border: 1px solid transparent;
	  margin-right: 0px;
	  padding: 6px;
	}
	
	.ui_composer .field_link:hover,
	.ui_comment_composer .field_link:hover {
	  background: #ddd;
	  border-color: #bbb;
	}
	
	.ui_composer .field_link:active,
	.ui_comment_composer .field_link:active {
	  background: #d0d0d0;
	}

.ui_composer .comp_link,
.ui_composer ul li span.label { padding: 8px; }

.ui_composer_form input.text.tokenize { width: 532px; }

.grid_7 .ui_composer_form input.text.tokenize,
.grid_7 .ui_composer_form.ui_composer_link input.text { width: 457px; }

.ui_composer .ui_composer_items span.label { display: none; }

.ui_composer.inline_feed.single_type .ui_composer_content,
.ui_composer.inline_feed.single_type .ui_composer_content {
  background: rgba(0,0,0,.06);
  border: 0;
  border-radius: 3px;
  padding: 5px;
}

.ui_composer.inline_feed.single_type .ui_composer_form textarea:not(.open) {
  height: 43px;
  line-height: 24px;
}

.ui_composer.inline_feed.single_type .ui_composer_content::before {
  border-bottom: 9px solid transparent;
  border-right: 9px solid rgba(0,0,0,.06);
  border-top: 9px solid transparent;
  content: '';
  display: inline-block;
  left: -9px;
  position: absolute;
  top: 18px;
}

.ui_composer .ui_composer_content {
  background: #fff;
  border: 1px solid #ddd;
  border-top: 2px solid #555;
  border-bottom: 2px solid #ccc;
  overflow: visible;
}

.ui_composer .ui_composer_form {
  background: #fff;
  border: 0;
}

.ui_composer .ui_composer_form.ui_composer_post.ui_composer_posts,
.ui_composer .ui_composer_form.ui_composer_post { padding: 0; }

.ui_composer .ui_composer_form.ui_composer_post.rich_text,
.ui_composer .ui_composer_form.ui_composer_post.ui_composer_notes { padding: 5px 5px 0; }

.ui_composer_post .ui_action_bar,
.ui_composer_file .ui_action_bar,
.ui_composer_link .ui_action_bar { border-top: 1px solid #ddd; }

.ui_composer_link #link_ex {
  border: 0;
  border-bottom: 1px dashed #ddd;
  margin: 0;
}

.ui_composer .ui_composer_note #comp_share { background-color: transparent; }

.ui_composer .ui_composer_note .ui_action_bar { padding: 5px 0 0; }

.ui_composer_form.ui_composer_post.rich_text .ui_action_bar,
.ui_composer_form.ui_composer_post.ui_composer_notes .ui_action_bar {
  background: #e9e9e9;
  margin: 5px -5px 0;
}

.ui_composer_form.ui_composer_post .input_wrap .fake_textarea.nopad,
.ui_composer_form.ui_composer_post.ui_composer_notes .input_wrap .fake_textarea,
.ui_composer_form.ui_composer_post .taggables .fake_textarea { padding: 0px; }

/* ==========================================================================
   RESPONSIVE — composer (from responsive.css)
   ========================================================================== */

/* Mobile phones */
@media screen and (max-width: 570px) {

.ui_composer_items .ui_button.transparent-btn { padding: 8px 5px; }
.commentbox .ui_group.table-group.xlg-group .ui_group_img {
    float: none;
    width: auto;
  }

}

/* Single column (phones + small tablets) */
@media screen and (max-width: 762px) {

.ui_composer.inline_feed.single_type .face-wrap { display: none; }
.ui_composer.inline_feed.single_type .ui_group_content {
    margin-left: 0;
  }
.ui_composer .ui_action_bar { padding: 5px; }
.commentbox .ui_action_bar { padding: 5px 0 0; }
.ui_composer.multi_type li a.c_file,
	.ui_composer.multi_type li a.c_files,
	.ui_composer.multi_type li a.c_note,
	.ui_composer.multi_type li a.c_notes {
		display: none;
	}
.ui_composer .comp_link { padding: 8px 4px; }

}

/* Large laptop / wide desktop */
@media screen and (min-width: 1200px) {

  .ui_composer .ui_group_img.face-wrap { width: 68px; }

  .ui_composer.inline_feed.single_type .ui_group_content { margin-left: 81px; }

}

/* Widescreen / large display */
@media screen and (min-width: 1360px) {

.ui_composer input.text,
  .ui_composer textarea,
  .ui_composer select, 
  .ui_composer ul.token-input-list li input {
    font-size: 14px;
    line-height: 1.333;
  }

}