body {background: #fff;}
.main {max-width:1100px; padding:0 2%; margin:0 auto;}
.main .ayuda {font-size: 13px; color:#898989; font-style:italic; text-align: center; display: block; width:60%; margin:10px auto 0;}
.main .ayuda a {width:10%; display:block; margin:8px auto; text-align: center; font-size: 12px; font-style: italic; color:#a67038; border:1px #a67038 solid; padding:3px 6px;}

.col1 .sombra {position:absolute; top: 0; width:19px; height: 100%; z-index: 20;}
.col1 .sombra.left {left:0; background:url(/memoria2013/stat/directorio/imag/auxi/sombra-19x266_1.png) no-repeat left top; background-size:auto 100%;}
.col1 .sombra.right {right:0; background:url(/memoria2013/stat/directorio/imag/auxi/sombra-19x266_2.png) no-repeat right top; background-size:auto 100%;}

.col1 {position: relative;}
.col1 #makeMeScrollable {position:relative; width: 100%;}
.col1 .makeMeScrollable {overflow-x: hidden; overflow-y: hidden; position: relative; white-space: nowrap; padding:40px 0;}
.col1  .makeMeScrollable .scrollingHotSpotLeft {position: absolute; left:0; top:10%; width:10%; height: 80%; z-index: 200; overflow: hidden; text-indent: -9999px; background: url(../imag/auxi/go-left-40x40.png) no-repeat center center #fff; opacity: 0;}
.col1  .makeMeScrollable .scrollingHotSpotRight {position: absolute; right:0; top:10%; width:10%; height: 80%; z-index: 200; overflow: hidden; text-indent: -9999px; background: url(../imag/auxi/go-right-40x40.png) no-repeat center center #fff; opacity: 0;}
.col1 #makeMeScrollable div.scrollableArea * {
	position: relative; display: block; float: left; margin: 0; padding: 0;
	/* If you don't want the images in the scroller to be selectable, try the following
		block of code. It's just a nice feature that prevent the images from
		accidentally becoming selected/inverted when the user interacts with the scroller. */
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.col1 #makeMeScrollable .scrollWrapper {height: 100%; overflow: hidden; position: relative; width: 100%;}
.col1 #makeMeScrollable .scrollWrapper .scrollableArea {height: 100%; position: relative; width: auto;}
.col1 #makeMeScrollable .articulo {width:120px; height:120px; border:5px #ffffff solid; display: block; margin:0 5px !important; overflow: hidden; float: left;}
.col1 #makeMeScrollable .articulo:hover {border:5px #d9d9d9 solid;}
.col1 #makeMeScrollable .articulo.ui-tabs-active {border:5px #d28100 solid;}

.col2 {width:80%; margin: 15px auto 0; position: relative;}
.col2 .flecha {background:url(/memoria2013/stat/directorio/imag/auxi/28x21_1.png) no-repeat center center; width:28px; height: 21px; position: absolute; top:-21px; left:49%;}
.col2 .foto {border-top:5px #DC9300 solid;}
.col2 .foto img {display:block; margin: 0 auto; width:100%; height: auto;}
.col2 .info {background:#e4e4e4; border:1px #b5b5b5 solid; border-top:0; text-align: center; padding:3%;}
.col2 .info .titular {color:#2b2b2b; font-size: 39px; font-weight: lighter;}
.col2 .info .bajada {font-size: 14px; color:#565656; font-weight: lighter; font-style: italic; margin:10px 0;}
.col2 .info .cargo {color:#d28100; font-size: 22px; font-weight: bold; font-style: italic; max-width: 50%; background:url(/memoria2013/stat/directorio/imag/auxi/linea_separadora-8x25.png) repeat-x center center; text-align: center; margin:15px auto; line-height: 120%;}
.col2 .info .cargo span {background:#e4e4e4; padding:0 5px;}
.col2 .info .rut {font-size: 22px; color:#393939; font-weight: lighter; display: block;}