@charset "utf-8";
/* CSS Document */
body { 
	background-color:#D7D7D7;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	margin: 8 5 0 5;
}
a:link    {text-decoration: none; color:#FFF;}
a:visited {text-decoration: none; color:#FFF;}
a:hover   {text-decoration: none; color:#FFF;}
a:active  {text-decoration: none; color:#FFF;}
.centrar{
	width:900px;
	margin: auto;
}
.centrar_body{
	width:900px;
	margin: auto;
	background-color:#FFF;
	padding: 15px 0px 0px 15px;
	/*min-height:500px;*/
}
.footer{
	width:100%;
	color:#666;
    height:80px;
    position: relative;
    bottom:0;
    left:0;
	background-color:#D7D7D7;
	padding-top:15px;
	z-index:0;
}

.footer_link{
	width:900px;
	font-size:14px;
}
.footer_copy{
	font-size:10px;
	text-align:left;
}


.input_search {
      background-image: url(../img/ico_search.gif);
      background-position: 0 1px;
      background-repeat: no-repeat;
	  padding-left: 20px;
    }


/*MENU HORIZONTAL*/
#menu {
	list-style:none;
	width:100%;
}

#menu li {
	float:right;
	display:block;
	text-align:center;
	border:none;
	padding: 0px 10px 10px 0px;
}

#menu li:hover {
	padding: 0px 10px 10px 0px;
}

#menu li a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px; 
	color: #FFFFFF;
	display:block;
	font-weight:bold;
	outline:0;
	text-decoration:none;
	text-shadow: 1px 1px 1px #000000;
}

#menu li:hover a {
	color:#161616;
	text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
	padding-right:21px;
	background:url(../img/drop.png) no-repeat right 6px;
}
#menu li:hover .drop {
	background:url(../img/drop.png) no-repeat right 6px;
}

.dropdown_1column, 
.dropdown_4columns {
	margin:4px auto;
	float:left;
	position:absolute;
	z-index:100;
	left:-999em; /* Hides the drop down */
	
	text-align:left;
	padding:10px 5px 2px 5px;
	border:1px solid #777777;
	
	/* Gradient background */
	background:#F4F4F4;
	background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

	/* Rounded Corners */
	-moz-border-radius: 0px 5px 5px 5px;
	-webkit-border-radius: 0px 5px 5px 5px;
	border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_4columns {width: 560px;}

#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_4columns{
	left:-1px;
	top:auto;
}

.col_1,
.col_4{
	display:inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}
.col_1 {width:130px;}
.col_4 {width:550px;}

#menu .menu_right {
	float:right;
	margin-right:0px;
}
#menu li .align_right {
	/* Rounded Corners */
	-moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}

#menu li:hover .align_right {
	left:auto;
	right:-1px;
	top:auto;
}

#menu p, #menu h2, #menu h3, #menu ul li {
	font-family:Arial, Helvetica, sans-serif;
	line-height:21px;
	font-size:12px;
	text-align:left;
	text-shadow: 1px 1px 1px #FFFFFF;
}



#menu li:hover div a {
	font-size:12px;
	color:#015b86;
}
#menu li:hover div a:hover {
	color:#029feb;
}

#menu li ul {
	list-style:none;
	padding:0;
	margin:0 0 12px 0;
}
#menu li ul li {
	font-size:12px;
	line-height:24px;
	position:relative;
	text-shadow: 1px 1px 1px #ffffff;
	padding:0;
	margin:0;
	float:none;
	text-align:left;
	width:130px;
}
#menu li ul li:hover {
	background:none;
	border:none;
	padding:0;
	margin:0;
}


/*FIN MENU HORIZONTAL*/

.titles{
	font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; color:#333333; text-align:left;
}
.text{
	font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; text-align:left; 
}
.subjects_roll {
	background:url(../img/subjects_play.png) center center no-repeat #FFF;
	height: 380px;
	position: absolute;
	width: 660px;
	z-index: 10;	
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px  #000;
	box-shadow: 0px 0px 4px  #000; 
}
.subjects_img {
	z-index: 10;	
	-webkit-box-shadow: 0px 0px 14px #000;
	-moz-box-shadow: 0px 0px 14px  #000;
	box-shadow: 0px 0px 14px  #000; 
}

/*.subjects_title {
	font-family:Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; color:#333333; text-align:left;
}*/
.subjects_description{
	font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333;
}
.forum_text {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#006; font-weight:bold;}
.button{
	/* estilos tipograficos */
	
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	/*text-transform: uppercase;
	
	/* padding, margin y borde */
	
    padding: 3px 15px 4px 15px;
	margin-right: 3px;
	cursor: pointer;
	border: 0;
    border-radius: 10px;

	/* propiedades para la animacion  */
	
	transition: all 0.20s linear;
	-webkit-transition: all 0.20s linear;
	-moz-transition: all 0.20s linear;
	position: relative;
	bottom: 0;
}
.azul{
	background: #04a8bf;
	box-shadow: 0px 5px 0 #0491a5;
}
.beige{
	background: #8A5115;
	box-shadow: 0px 2px 0 #CCC;	
}
.orange{
	background: #FFAF27;
	box-shadow: 0px 2px 0 #FF7C24;	
}
.button:active{
	bottom: -5px;
}
.azul:active{
	box-shadow:0 0 0 #0491a5, inset 0 0 5px rgba(0, 0, 0, 0.4);			
}
.beige:active{
	box-shadow:0 0 0 #7e8783, inset 0 0 5px rgba(0, 0, 0, 0.4);		
}
.orange:active{
	box-shadow:0 0 0 #9a1604, inset 0 0 5px rgba(0, 0, 0, 0.4);		
	
}


/*
	Coin Slider jQuery plugin CSS styles
	http://workshop.rs/projects/coin-slider
*/


.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }

.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }

.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; text-align:left;}

.cs-prev, 
.cs-next { /*background-color: #000000; color: #FFFFFF;*/ padding: 0px 10px; }

/*      END SLIDER    */

/*.roll {
	background:url(img/play.png) center center no-repeat #FFF;
	height: 100px;
	position: absolute;
	width: 150px;
	z-index: 10;	
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px  #000;
	box-shadow: 0px 0px 4px  #000; 
}*/
.img {
	z-index: 10;	
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px  #000;
	box-shadow: 0px 0px 4px  #000; 
}
.subjects { font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; text-align:left;}
.subjects_title { font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#E56344; text-align:left;}
.subjects_description { font-family:Arial, Helvetica, sans-serif; font-size:11px;}
.subjects_url { font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#E56344;}

#makeMeScrollable
{
	width:100%;
	height: 186px;
	position: relative;
	text-align:left;
}

/* Replace the last selector for the type of element you have in
   your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
   if you have links use #makeMeScrollable div.scrollableArea a and so on. */
#makeMeScrollable div.scrollableArea img
{
	position: relative;
	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;
}

.trigger{ font-weight:bold;}
.toggle_container {
	color:#666; 
	text-align:justify; 
	padding-right:15px;
	padding-bottom:15px;
	clear: both;
	font-size:12px;
}


/*AUTOCOMPLETE*/

.ac_results {
        padding: 0px;
        border: 1px solid #999;
        background-color: white;
        overflow: hidden;
        z-index: 99999;
		text-align:left;
}

.ac_results ul {
        width: 100%;
        list-style-position: outside;
        list-style: none;
        padding: 0;
        margin: 0;
}

.ac_results li {
        margin: 0px;
        padding: 2px 5px;
        cursor: default;
        display: block;
		font-family:Arial, Helvetica, sans-serif;
        /* 
        if width will be 100% horizontal scrollbar will apear 
        when scroll mode will be used
        */
        /*width: 100%;*/
        font: menu;
        font-size: 12px;
        /* 
        it is very important, if line-height not setted or setted 
        in relative units scroll will be broken in firefox
        */
        line-height: 16px;
        overflow: hidden;
}

.ac_loading {
        background: white url('img/indicator.gif') right center no-repeat;
}

.ac_odd {
        background-color: #eee;
}

.ac_over {
        background-color: #0A246A;
        color: white;
}

/*END AUTOCOMPLETE*/

/*SCROLL*/
/* You can alter this CSS in order to give Smooth Div Scroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
	min-width: 75px;
	max-width: 100px;
	width: 10%;
	height: 100%;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background-image: url(../img/scroll/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 400;
	left: 0;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(../img/scroll/cursors/cursor_arrow_left.png), url(../img/scroll/cursors/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background-image: url(../img/scroll/arrow_left.gif);				
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 75px;
	max-width: 100px;
	width: 10%;
	height: 100%;
	background-image: url(../img/scroll/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(../img/scroll/cursors/cursor_arrow_right.png), url(../img/scroll/cursors/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background-image: url(../img/scroll/arrow_right.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}
/* END SCROLL*/

.error{
	background-color:#ffebe8;
	border:1px solid #dd3c10;
	padding:7px 3px;
	text-align:center;
	margin-top:10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}