@charset "utf-8";
body,h1,h2,h3,p,ul,li,h4{
	margin: 0; /* es recomendable ajustar a cero el margen y el relleno del elemento body para lograr la compatibilidad con la configuración predeterminada de los diversos navegadores */
	padding: 0;

    }

	
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	text-align: center; /* esto centra el contenedor en los navegadores IE 5*. El texto se ajusta posteriormente con el valor predeterminado de alineación a la izquierda en el selector #container */
	}
#login a:link,#login a:visited {
	text-decoration:none;
	
}


    .oneColFixCtrHdr #container {
	width: 780px;
	margin: 0px auto;
	text-align: left;
    }
    .oneColFixCtrHdr #header {
	padding: 0 10px 0 20px;  /* este relleno coincide con la alineación izquierda de los elementos de los divs que aparecen bajo él. Si se utiliza una imagen en el #header en lugar de texto, es posible que le interese quitar el relleno. */
	height: 102px;
	background-repeat: no-repeat;
    }
    .oneColFixCtrHdr #header h1 {
	margin: 0; /* el uso de relleno en lugar de margen le permitirá mantener el elemento alejado de los bordes del div */
	font-size: 30px;
	text-align: center;
	padding-top: 32px;
    }
    .oneColFixCtrHdr #mainContent {
	padding: 0 10px; /* recuerde que el relleno es el espacio situado dentro del cuadro div y que el margen es el espacio situado fuera del cuadro div */
	background: #FFFFFF;
    }
.oneColFixCtrHdr #container #nav {
	height: 50px;
	width: 780px;
}
#footer {
	background-repeat: no-repeat;
	height: 53px;
	width: 780px;
}

.fltright {
	float: right;
}
#innerwrapper {
	background-repeat:  repeat-y;
	width: 780px;
	margin: 0;
	padding: 0;
}
/***************** AUXILIARY CLASSES  **************************/
.clearfloat {  /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	font-size: 1px;
	line-height:0;
	clear:both;
	width: 0px;
}
.right_img {
	text-align: center;
	float: right;
	padding: 5px;
}
#mainContent p {
	font-size: 80%;
	padding: 5px 0px 5px 10px;
}
#mainContent p a{
font-size:100%;

}

#mainContent table a {
	font-size: 100%;
}

#mainContent table p, #mainContent table table {
	font-size: 100%;
}
#mainContent a {
	font-size: 80%;
}
#mainContent ul li a {
	font-size: 100%;
}

.warning {
	color: #CC3333;
	font-size: 80%;
}
#footer p {
	padding-top: 26px; /* Pads the footer paragraph text so that it starts in the soft, rounded, green rectangle. */
	font-size: 70%;
	text-align: center;
}
h2, h3, h4, h5 {
	padding: 5px 5px 0px 5px;

}
/* getting ul li and a tags behave differently from the ul, li tags of the tabbed_panel widget*/
.oneColFixCtrHdr #container #innerwrapper #mainContent .TabbedPanelsContent ul {
	margin-left: 20px;
	font-size: 90%;
	list-style-type: none;
	font-weight: normal;
}
.oneColFixCtrHdr #container #innerwrapper #mainContent .TabbedPanelsContent li {
	/*font-size: 90%;*/
	margin-bottom: 10px;
}
/* Tables and cells*/
.oneColFixCtrHdr #table {
	border: 1px solid #000000;
}

th {
	background-color: #79a5ff;

}
.centered {
	text-align: center;
}
.centered_text_left{
	width:400;
	margin:0 auto;
}
td {
	text-align:left;
	border: 1px solid #000000;
}
.centered table, .centerd table tr table {
	border: 1px solid #000000;
	margin: auto;
}
.fltleft {
	float: left;
}
/* make tabbed panels content have a different look depending on the id*/
.oneColFixCtrHdr #container #innerwrapper #mainContent #TabbedPanels1 .TabbedPanelsContentGroup #n3 {
	background-color: #CCCC99;
}
.oneColFixCtrHdr #container #innerwrapper #mainContent #TabbedPanels1 .TabbedPanelsContentGroup #n4 {
	background-color: #FFFFCC;
}
.oneColFixCtrHdr #container #innerwrapper #mainContent #TabbedPanels1 .TabbedPanelsContentGroup #n5 {
	background-color: #CCFFCC;
}
.oneColFixCtrHdr #container #innerwrapper #mainContent #TabbedPanels1 .TabbedPanelsContentGroup #n6 {
	background-color: #CCFF99;
}
/* Formatting for "button" trigger, the one giving access to "nota_legal"*/

.oneColFixCtrHdr #container #innerwrapper #mainContent .trigger {
	color: #FF3300;
	text-decoration: underline;
	cursor: pointer;
}
/* DON'T KNOW, so comment it out
.oneColFixCtrHdr #container #innerwrapper #mainContent #TabbedPanels1 .TabbedPanelsContentGroup #long {
	height: 800px;
}
*/

#container #header h2 {
	font-size: 24px;
	padding-top: 40px;
	text-align:center;
}

/* MAY GO OUT . Remove any em tags before*/
.oneColFixCtrHdr #container #innerwrapper #mainContent #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent  em {
	margin-left: 10px;
}

.oneColFixCtrHdr #container #login {
	text-align: center;

}
/* classes for popup effect on "nota legal". Have alook at javascript/tricks.js*/
.none {display:none;}
.block{display:block;}
/* MAY GO OUT . Remove any em tags before*/
#link {
	width: 330px;
}
img {
	border:none;
}

.caption {
	font-size: 70%;
	width: inherit;
}
/* Sidebar in a tabbed panel*/
.tabbed_pannel_sidebar {
	float: right;
	width: 240px;
	text-align: center;
}
/* There are a lot of things in the footer*/
/*footer links will look great*/
#container #footer ul {
	list-style-type: none;
	font-size: 70%;
	text-align: right;
	padding-top: 24px;
	padding-right: 10px;
}
#container #footer li {
	display: inline;
	margin: 0 auto;
}
#container #footer a:link, #container #footer a:visited {
	text-decoration:none;
}
#container #footer a:hover {
	text-decoration:overline; }
	
#container #footer a:active {
	text-decoration:overline;
}
/* Credits popup styling*/
#container #footer #credits {
	font-size:80%;
	position: relative;
	top:-200px;
	left:48%;
	width: 400px;
	border: 1px solid;
	border-color: #CCCCCC;
	background-color:#669999;
	text-align: left;
	display: none;
}
#container #nav #credits {
	font-size:80%;
	position: relative;
	top:-90px;
	left:28%;
	width: 400px;
	border: 1px solid;
	border-color: #CCCCCC;
	background-color:#669999;
	text-align: left;
	display: none;
}

#container #footer  #credits p,#container #nav #credits p{  
	color:#FFFFFF;
	text-align: left;
	font-size: 80%;
	padding:5px;

}
#container #footer  #credits a, #container #nav #credits a{
	color:#FFFFFF;
}

/* Again we have to style  an ul. This time for the hidden popup. Will a general rule, 
at least for the common features(no decoration) do? BE careful with the spry menu widget.
*/
#footer #credits ul, #nav #credits ul {
	padding-top: 5px;
	text-align:left;
	display:block;
	margin-left: 10px;
	font-size: 80%;
	list-style-type: none;
	color:#FFFFFF;
}
#footer #credits ul li {
	font-size:100%;
	display:block;
	color:#FFFFFF;
}
#footer #credits ul li ul{
	font-size:100%;
	display:block;
}

#footer #credits ul li ul li {
	font-weight:normal;
	display:block;
	margin:0px;
	margin-left: 10px;
	color:#FFFFFF;
	display:block;

}

#credits .close_button {
	text-align: right;
}

/* TWO COLS LAYOUT IS HERE. SHOULD BE TAKEN TO ANOTHER FILE?*/
.twoColFixCtrHdr #container #innerwrapper #sidebar {
	float: left;
	width: 300px;
}
.twoColFixCtrHdr #container #innerwrapper #mainContent {
	float: left;
	width: 440px;
	margin-right: 2px;
	padding-left: 10px;
}
.twoColFixCtrHdr #container{
	width: 440px;
	width: 780px;
	margin: 0 auto;
	text-align: left;
}
.twoColFixCtrHdr #container #nav {
	height: 50px;
}


.twoColFixCtrHdr #container #header {
	height: 102px;
}
.twoColFixCtrHdr #container #innerwrapper #sidebar {
	width: 320px;
}
.oneColFixCtrHdr #container #innerwrapper #mainContent #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent h3 {
	font-size: 18px;
}
.oneColFixCtrHdr #container #innerwrapper #mainContent #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent h4 {
	font-size: 14px;
}

.oneColFixCtrHdr #container #innerwrapper #mainContent ul {
	font-size: 80%;
	margin-left: 10px;
	list-style-type: none;
}
.ok {
	font-size: 70%;
	color: #009900;
}
table {
	margin: 0 auto;
	font-size:80%;
}
.oneColFixCtrHdr #container #header #main_header {
	position: absolute;
	left: -3000px;
}
.oneColFixCtrHdr #container #innerwrapper #mainContent ul li {
	font-weight:bold;
}

.oneColFixCtrHdr #container #innerwrapper #mainContent ul li ul  {
	font-size: 100%;
}
.oneColFixCtrHdr #container #innerwrapper #mainContent ul li ul li  {
	font-size: 100%;
	font-weight:normal;
}
#container .right_img .caption p {
	font-size: 100%;
	margin: 0px 5px;
}
.spanish {
	color:#FF00FF;
}
.correct {
	color: #009933;
}
.mistake {
	color: #FF0000;
}
.style {
color:#0000FF;
}