/*
 * Código para expandir una caja de texto, tal y como aparece en:
 * http://www.alistapart.com/articles/expanding-text-areas-made-elegant/
 */
/* a tiny reset */
textarea, 
pre {
	margin: 0;
	padding: 0;
	outline: 0;
	border: 0;
}

.expandingArea {
	position: relative;
	
	border: 1px solid black;
	
	background: #fff;
	width: 40%;
	display: inline-block;
}

/* Recuerda: ">" es el "CSS **immediate (direct) child** selector", por tanto, sólo afecta al primer hijo */
/* You can set any padding, line height, and font styles you like, just make sure they're the same for both the textarea and the pre element */
.expandingArea > textarea,
.expandingArea > pre {
	/*
	padding: 5px;
	*/
	background: transparent;
	/*font: 400 13px/16px helvetica, arial, sans-serif;*/
	/* Make the text soft-wrap */
	white-space: pre-wrap;
	word-wrap: break-word;
}

.expandingArea > textarea {
	/* The border-box box model is used to allow
	 * padding whilst still keeping the overall width
	 * at exactly that of the containing element.
	 */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	/*
	box-sizing: border-box;
	*/
	/* The textarea is positioned absolutely and given a width and height of 100% to make it fill the div (expandingArea). */
	width: 100%;
	/* This height is used when JS is disabled */
	height: 100px;
}

/*
 * La función JavaScript "makeExpandingArea" establece la clase de "container" a ".active". Además, en nuestro caso "container" también es ".expandingArea". Para escribir un CSS selector que sólo se aplique a elementos que tengan AMBAS clases, las escribimos seguidas y sin espacios.
 * http://anvilstudios.co.za/blog/css/how-to-target-an-element-with-multiple-classes-in-css/
 * All elements containing class XX AND class YY AND …
 * Note that with whitespace between class names and class selectors, you’ll be selecting descendants. So do not have any whitespace if you’re trying to select an element specifically containing multiple classes.
 */
.expandingArea.active > textarea {
	/* Hide any scrollbars */
	overflow: hidden;
	/*  
	 * http://www.hellosquare.co.za/website-development/want-to-master-css-absolute-positioning/
	 *...that when you set an element’s position as absolute it now positions relative to the nearest parent element that has its own position set to relative.
	 * el padre más cercano es .expandingArea, y está puesto a relative.
	 */
	position: absolute;
	top: 0;
	left: 0;
	/* The textarea is positioned absolutely and given a width and height of 100% to make it fill the div (expandingArea). */
	height: 100%;
	/* Remove WebKit user-resize widget */
	resize: none;
}

.expandingArea > pre {
	display: none;
}

.expandingArea.active > pre {
	/*
	 * Sobre textarea:
	 *   "Despite the ubiquity of this control, there’s no way to create it using only HTML and CSS. While normal block-level elements (like a div, for example) expand to fit their content, the humble textarea does not, even if you style it as display: block. Since this is the only way to accept multi-line user input (other than using contenteditable, a whole world of pain I’m not going to dive into today), a little JavaScript is needed to make it resize as desired".
	 */
	/* Un elemento tipo block ocupa todo el ancho disponible, al alto variará conforme vayamos añadiendo líneas de texto. */
	display: block;
	/* Hide the text; just using it for sizing
	 * Si lo pongo como visible, las letras aparecen más negras, por la superposición de pre y textarea.
	 * "The trick is to position the textarea on top of the mirror element, both inside a relatively-positioned containing div. The textarea is positioned absolutely and given a width and height of 100% to make it fill the div. The mirror is positioned statically so it will expand to fit its contents. The containing div will then expand to fit the height of the mirror and this in turn will make the absolutely positioned textarea resize to fill the container, thus making it the perfect height to fit its contents".
	 */
	visibility: hidden;
}