/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */
html,
button,
input,
select,
textarea{
	color: #222;
}

input[type=text],
textarea{
	border       : 1px solid #D4D4D4 !important;
	border-radius: 2px;
}

body{
	line-height: 1.4;
}

::-moz-selection{
	background : #b3d4fc;
	text-shadow: none;
}

::selection{
	background : #b3d4fc;
	text-shadow: none;
}

/* LOGIN */
.formularioLogin{
	font-family: arial,verdana,sans-serif;
	font-weight: normal;
	/*
    left       : 50%;
	margin     : -200px 0 0 -166px;
	position   : absolute;
	top        : 40%;
    */
}

.formation{
	padding              : 10px;
	border               : 1px solid #cccccc;
	background-color     : #EEE;
	-pie-background      : #EEE;
	font-size            : 12px !important;
	width                : 310px;
	margin               : 0 auto;
}

.formation_title{
	background-color     : #778899;
	border               : 1px solid #778899;
	color                : #FFF;
	font-size            : 14px;
	font-weight          : bold;
	height               : 20px !important;
	margin               : -13px -11px 0px -11px;
	padding-top          : 0px;
	padding-left         : 10px;
}

.formation p{
	color         : #666666;
	margin-bottom : 20px;
	border-bottom : solid 1px #778899;
	padding-bottom: 10px;
}

.formation a:link{
	font-size      : 12px;
	color          : #0064AC;
	margin-bottom  : 20px;
	text-decoration: none;
}

.formation a:hover{
	color      : red !important;
	font-weight: bold;
}

.formation a:visited{
	color      : #777;
	font-weight: bold !important;
}

.formation label{
	display    : inline;
	font-weight: normal;
	text-align : right;
	width      : 170px;
	float      : left;
}

.formation input, .stylized select, .formation textarea, .formation fieldset{
	font-size            : 12px;
	padding              : 4px 9px;
	border               : solid 1px #cccccc;
	width                : 250px;
	margin               : 2px 0 2px 0px;
	display              : inline;
	-webkit-border-radius: 3px;
	-moz-border-radius   : 3px;
	border-radius        : 3px;
}

.formation fieldset{
	padding: 3px;
}

.formation fieldset ul li{
	margin-bottom: 2px;
	padding      : 3px;
}

.formation ul li{
	text-align: center;
	padding   : 3px 0 3px 0;
}

.formation ul li label{
	float       : left;
	text-align  : left;
	margin-right: 3px;
}

.formation .button, .formation button{
	clear      : both;
	width      : 100px;
	height     : 25px;
	text-align : center;
	color      : #000;
	font-size  : 12px;
	font-weight: normal;
	background : url('../imag/background_button_default.png') repeat transparent;
	border     : 1px solid #BBB;
	cursor     : pointer;
}

.formation .button:hover, .formation button:hover{
	background: url('../imag/background_button_hover.png') repeat transparent;
	color     : #FFF;
	border    : 1px solid #778899;
}

.formation .button:active, .formation button:active{
	background: url('../imag/background_button_active.png') repeat transparent;
	color     : #000;
	border    : 1px solid #000;
}

.formation ul{
	margin    : 0;
	padding   : 0;
	list-style: none;
}

.formation li{
	margin : 0;
	padding: 0;
}

.formation .error{
	border-color: #cc3300 !important;
}

.formation span.error{
	color : #cc3300 !important;
	border: none !important;
}

.formation p.error{
	color        : #cc3300 !important;
	border-bottom: 1px solid #b7ddf2 !important;
}
/* LOGIN */

div.addtagsX
{
	overflow-y: auto;
	overflow-x: hidden;
	height: 310px;
}

div.addtagsX div
{
	border-bottom: 1px solid #CCCCCC;
	float: left;
	font-size: 10px;
	margin-bottom: 5px;
	margin-left: 20px;
	padding: 0px 5px;
}

.addtagsX span
{
	background-color: #FFFFFF !important;
	color: red;
	cursor: pointer;
	float: right;
	font-size: 15px;
	font-weight: bold;
}

hr{
	display   : block;
	height    : 1px;
	border    : 0;
	border-top: 1px solid #ccc;
	margin    : 1em 0;
	padding   : 0;
}

img{
	vertical-align: middle;
}

fieldset{
	border  : 0;
	display : inline-block;
	margin  : 0;
	padding : 0;
}

legend{
	color      : #006CB7;
	font-weight: bolder;
}

div.container{
	background-color: #75B2DD;
	border-radius   : 5px;
	padding         : 10px;
}

textarea{
	resize: none;
}

.chromeframe{
	background: #ccc;
	color     : #000;
	margin    : 0.2em 0;
	padding   : 0.2em 0;
}

/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body{
	font: 11px/22px arial,verdana,sans-serif; /*gobCl, Helvetica, Helvetica Neue, Arial;*/
}

.wrapper{
	margin: 0 1%;
	width : 98%;
}

/* ===================
	ALL: Orange Theme
   =================== */

.logoSernac{
	background        : url('../imag/logo-web.png') no-repeat;
	-webkit-box-shadow: 0 0px 0px #000;
	-moz-box-shadow   : 0 0px 0px #000;
	box-shadow        : 0 0px 0px #000;
	float             :left;
	height            : 72px;
	margin-right      : 10px;
	width             : 170px;
	/* behavior          : url('./PIE.htc'); */
}

.header-logo {
    background-image: url(../imag/logo-header.png);
    background-repeat: no-repeat;
    float: left;
    height: 70px;
    width: 540px;
}

.band-logo{
	background-image : url('../imag/logo_footer.png');
	background-repeat: no-repeat;
	float            : right;
	height           : 14px;
	width            : 168px;
}

.main aside{
	border          : 1px dotted #D6D6D6;
}

.footer-container{
	background-color: #EEE;
	-pie-background : #EEE;
	border-top      : 2px solid #D4D4D4;
	margin-top      : 0px;
	/* behavior        : url('./PIE.htc'); */
}

.header-container{
	border-bottom   : 2px solid #D4D4D4;
	background-color: #EEE;
	-pie-background : #EEE;
	/* behavior        : url('./PIE.htc'); */
}

.title{
    color         : #006CB7;
	font-size     : 12px;
	line-height   : 17px;
	margin-top    : 20px;
    margin-right  : 20px;
}

#mainPanel{
	/*  */
}
/* ==============
	MOBILE: Menu
   ============== */

nav ul{
	margin : 0;
	padding: 0;
}

nav ul li.selected{
	background-color: #EE4144;
	text-decoration : underline;
}

nav li{ /* li */
	background-color: #006CB7;
	color           : white;
	display         : block;
	margin-bottom   : 0px;
	padding         : 15px 0;
	text-align      : center;
	text-decoration : none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

nav li:hover,
nav li:visited{ /* li */
	color : white;
	cursor: pointer;
}

nav li:hover{ /* li */
	text-decoration: underline;
	cursor         : pointer;
}

/* ==============
	MOBILE: Main
   ============== */

.main{
	padding: 5px 0;
}

.main article h1{
	font-size: 2em;
}

.main aside{
	color                  : #444;
	padding                : 0px 1% 10px;
}

.main aside h3{
	color                  : #006CB7;
	margin-top             : 0px !important;
	margin-bottom          : 0px !important;
	padding                : 4px 1%;
	width                  : 98%;
	/* behavior               : url('./PIE.htc'); */
}

.main article header h3{
	color                  : #006CB7;
	margin-top             : 0px !important;
	margin-bottom          : 0px !important;
	padding                : 4px 1%;
	width                  : 98%;
	/* behavior               : url('./PIE.htc'); */
}

.footer-container footer{
	color         : #778899;
	padding-top   : 0.1px;
	padding-bottom: 0.1px;*/
}

.footer-container footer h3{
	color: #444444;
	font-size: 1em !important;
	font-weight: normal !important;
	margin: 5px 0 !important;
	text-align: center !important;
}

/* ===============
	ALL: IE Fixes
   =============== */

.ie7 .title{
	padding-top: 20px;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

.band-container{
	position     : relative;
	margin-bottom:-10px !important;
}
.blue-band{
	background-color: #006CB7;
	height          : 2px;
	left            : 0px;
	position        : absolute;
	width           : 25%;
}
.red-band{
	background-color: #E64246;
	height          : 2px;
	left            : 25%;
	position        : absolute;
	width           : 75%;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (max-width: 768px){
	.footer-container{display:none;}
	.title{height:55px;font-size:18px;}
	#mainPanel{background-position:center bottom;}
}

@media only screen and (min-width: 480px)
{
/* ====================
	INTERMEDIATE: Menu
   ==================== */
	nav li{ /* li */
		float        : left;
		margin       : 0 3px;
		margin-bottom: 0;
		padding      : 1px 10px; /* 2%;*/
		width        : auto; /* 6% */
	}

	nav li:first-child { /* a */
		margin-left: 0;
	}

	nav li:last-child { /* a */
		margin-right: 0;
	}

/* ========================
	INTERMEDIATE: IE Fixes
   ======================== */

	nav ul li{
		display: inline;
	}
	nav ul li.selected{
		background-color: #EE4144;
		text-decoration : underline;
	}
	.oldie nav li{ /* a */
		margin: 0 0.7%;
	}

	.main aside{
		height: auto;
	}
}

@media only screen and (min-width: 768px){

/* ====================
	WIDE: CSS3 Effects
   ==================== */

	.header-container,
	.main aside{
		-webkit-box-shadow: 0 0px 0px #aaa;
		   -moz-box-shadow: 0 0px 0px #aaa;
				box-shadow: 0 0px 0px #aaa;
	}
/* ============
	WIDE: Menu
   ============ */

	.title{
		float: left;

	}

	nav{
		float: left;
		width: 100%;
	}

/* ============
	WIDE: Main
   ============ */

	.main article{
		float: right;
		width: 83.4%;
	}

	.main aside{
		float     : left;
		overflow-x: hidden;
		overflow-y: auto;
		width     : 14%;
	}

	#mainPanel{
		overflow: auto;
	}
}

@media only screen and (min-width: 1140px)
{

/* ===============
	Maximal Width
   =============== */
	.main aside{
		overflow-x: hidden;
		overflow-y: auto;
	}
	#mainPanel{
		overflow: auto;
	}
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir{
	background-color: transparent;
	border          : 0;
	overflow        : hidden;
	*text-indent    : -9999px;
}

.ir:before{
	content: "";
	display: block;
	width  : 0;
	height : 100%;
}

.hidden{
	display   : none !important;
	visibility: hidden;
}

.visuallyhidden{
	border  : 0;
	clip    : rect(0 0 0 0);
	height  : 1px;
	margin  : -1px;
	overflow: hidden;
	padding : 0;
	position: absolute;
	width   : 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus{
	clip    : auto;
	height  : auto;
	margin  : 0;
	overflow: visible;
	position: static;
	width   : auto;
}

.invisible{
	visibility: hidden;
}

.clearfix:before,
.clearfix:after{
	content: " ";
	display: table;
}

.clearfix:after{
	clear: both;
}

.clearfix{
	*zoom: 1;
}

.right{
	text-align:right;
}

.center{
	text-align:center;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print
{
	*{
		background : transparent !important;
		box-shadow :none !important;
		color      : #000 !important; /* Black prints faster: h5bp.com/s */
		text-shadow: none !important;
	}

	a,
	a:visited{
		text-decoration: underline;
	}

	a[href]:after{
		content: " (" attr(href) ")";
	}

	abbr[title]:after{
		content: " (" attr(title) ")";
	}

	/*
	 * Don't show links for images, or javascript/internal links
	 */

	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after{
		content: "";
	}

	pre,
	blockquote{
		border           : 1px solid #999;
		page-break-inside: avoid;
	}

	thead{
		display: table-header-group; /* h5bp.com/t */
	}

	tr,
	img{
		page-break-inside: avoid;
	}

	img{
		max-width: 100% !important;
	}

	@page{
		margin: 0.5cm;
	}

	p,
	h2,
	h3{
		orphans: 3;
		widows : 3;
	}

	h2,
	h3{
		page-break-after: avoid;
	}
}

.no-display{
	display:none;
}

/* Mostrar información en Tablas */
table.tabInfo{
	border  :1px solid #ccc;
	margin  :10px auto 20px auto;
	position:relative;
	width   :600px;
}
table.tabInfo th{
	background-color:#eee;
	border-color    : #ccc;
	border-style    : solid;
	border-width    : 1px;
	padding         : 3px;
}
table.tabInfo td{
	border-width: 1px;
	border-color: #ccc;
	border-style: solid;
	padding     : 3px;
	width       :50%;
}
.rechazado{
	color      :red;
	font-weight:bold;
}
.aprobado{
	color      :green;
	font-weight:bold;
}
.informacion{
	color      :#01A9DB;
	font-weight:bold;
}
.highlight-info{
	border    :1px solid #A9E2F3 !important;
	background:#A9E2F3 !important;
}
.centered{
	text-align:center;
}
span.required{
	color      :#ff0000;
	font-weight:bold;
}
textarea.no-resize{
	resize: none;
}
a.link_to{
	color          :#006CB7;
	font-weight    :bold;
	text-decoration:none;
}
a.link_to:hover{
	text-decoration:underline;
}
table.dataTable td{
	vertical-align: top;
}

span.contador
{
	background-color     : red;
	border-radius        : 7px;
	-moz-border-radius   : 7px;
	-webkit-border-radius: 7px;
	color                : white;
	display              : inline-block;
	height               : 15px;
	margin               : 0px 3px 0px 7px;
	padding              : 0px 5px;
	text-align           : center;
	vertical-align       : middle;
}

span.requiredImg{
	background: url('../imag/icons/bullet_red.png') no-repeat; repeat scroll 0 0 rgba(0, 0, 0, 0)!Important;
	padding-right: 15px !important;
	width: 20px !important;
}

.labRequired{
	border-bottom: 1px dotted #AA2222;
	color: #AA2222;
}

input[type="radio"].cell-error,
input[type="checkbox"].cell-error {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  background-color: #FFFFFF;
  border: 2px solid #FFAAAA;
}

input[type="radio"].cell-error {
  border-radius: 50%;
}

select.cell-error,
textarea.cell-error,
input:not([type=checkbox]):not([type=radio]).cell-error{
	border: 2px solid #FFAAAA !Important;
}

span.cell-error{
	color: #FF0000;
}

h3#dashboard span
{
	margin: 0 5px;
	position: relative;
	top: -2px;
}