.TituloCabezal {
  font-family: Verdana;
  font-weight: bold;
  color: white;
  font-size: 24pt;
  line-height: 110%;
  text-align: left;
}

#Logo {
	width:170px;
	height:143px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 24px;
}
#cabezal {
	width:1000px;
	margin:0px auto;
}
.fb{
    padding-left: 750px;
    padding-top: 10px;
}
#TituloPrincipal {
	width:810px;
	height:140px;
    margin-top: -143px;
	background-color: #4c9b26;
	font-weight: bold;
	text-align: center;
	float:right;
    text-align: left;
}
.MenuPrincipal {
  width: 130px;
  background-color:white;
  float: left;
  margin: 0px 0px 0px 10px;
  padding: 10px 0px 10px 20px;
}
.TextoMenuPrincipal {
  font-family: arial;
  font-weight: bold;
  line-height: 250%;
}
.footer{
    width:1040px;
    margin:10px auto 20px auto;
    color:black;
    font-family: verdana;
    font-size:14pt;
    text-align:center;
    padding-left:30px;
    padding-right:100px;
    padding-top:10px ;
    
}
h2 {
    text-align: center;
    color:red;
    }
 p    {color:green
    }
hr.subnov {
  background-color:#005C00; 
  height: 1px; 
  border: 4px;
  margin-top: 2px;
  margin-right: 2px;
}
#botones {
	position: absolute;
	width: 240px;
	height: 48px;
	z-index: 1;
	left: -250px;
	top:145px;
	background-color:white;
	padding: 0px;
	border: 2px solid #60932e;
	border-radius: 8px;
	box-shadow: 0px 7px 10px #95BA70;
	text-align: center;
	color: #FFFFFF;
	font-size: 14pt;
}
#botones01 {
	position: absolute;
	width: 240px;
	height: 48px;
	z-index: 1;
	left: -250px;
	top: 310px;
	background-color:white;
	padding:10px;
	border: 2px solid #60932e;
	border-radius: 8px;
	box-shadow: 0px 7px 10px #95BA70;
	text-align: center;
	color: #000;
	font-size: 14pt;
	margin-top: 5px;
}
#botones02 {
	position: absolute;
	width: 240px;
	height: 48px;
	z-index: 1;
	left: -250px;
	top: 255px;
	background-color:white;
	padding:10px;
	border: 2px solid #60932e;
	border-radius: 8px;
	box-shadow: 0px 7px 10px #95BA70;
	text-align: center;
	color: #000;
	font-size: 14pt;
	margin-top: 5px;
}
#botones03 {
	position: absolute;
	width: 240px;
	height: 52px;
	z-index: 1;
	left: -250px;
	top: 198px;
	background-color:white;
	padding:10px;
	border: 2px solid #60932e;
	border-radius: 8px;
	box-shadow: 0px 7px 10px #95BA70;
	text-align: center;
	color: #000;
	font-size: 13pt;
	margin-top: 5px;
}
div.BoxTit {
  margin-top: 10px;
  left: 10px;
  width: 980px;
  height:30px;
  background-color: #ffffff;
  color: black;
  font-family: verdana;
  font-size: 12pt;
  font-weight: bold;
  text-align: left;
  border-width: 2px;
  border-color: #ffffff;  
  padding-top: 10px;  
}
.BoxTit {
  margin: 10px auto 0px auto;
  width: 940px;
  height: 40px;
  background-color: #FF9900;
}
.divInvisibleFinal {
  width:990px;
  height: 20px;
  margin: 0px auto;
  border:0px;
}
.subTit {
  font-family: verdana;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  padding-top: 4px;
  padding-right: 10px;
  padding-bottom: 4px;
  padding-left: 20px;
  line-height: 190%;
}
a:link {
	text-decoration : none;
	color: #7A7A59;
}
a:visited {
	text-decoration : none;
	color: #7A7A59;
    text-decoration: none;
}
a:hover {
	color: black;
    text-decoration: none;
}
#ContInformacion {
   width: 850px;
   text-align: justify;
   font-family: Arial;
   font-size: 14pt;
   color: black;
   right: 5px;
   padding-right: 5px;
      
}
#diario60diciembre2015 {
    background-color: white;
	width: 415px;
	height: 580px;
    left: 0px;
	z-index: 1;
	margin: 0 10px 20px 20px;
	padding: 0px;	
	border-radius: 8px;
	box-shadow: 0px 7px 10px #95BA70;
	text-align:justify;
	color: #003300;
	font-size: 14pt;
 }
 #diario60 {
	position: absolute;
	height: 40px;
    left: 0px;
	z-index: 1;
	left: 20px;
	top: 900px;
		    
    background-color: #5a8bba;
  color: white;
  font-weight: bold;
  letter-spacing: 4px;
  width: 595px;
  margin-top: 32px;
  padding: 5px;
 }
 #Fotodiario {
    width: 227px;
    height:280px ;
    padding:0px;

           
}
.Noticias {
	position: absolute;
	left: 50px;
	z-index: 1;
	left: 500px;
	top: 500px;
	font-size: 14pt;    
    width:430px;
	height:540px;
	background-color: white;
	padding: 0px;
	 border: 2px solid #60932e;
     border-radius: 8px;
     box-shadow: 0px 7px 10px #95BA70;
     color: black;
    font-family: arial;
  font-size: 18px;
  text-align: left;
  border:1px solid #FE0000;
  padding:0px 20px;
  margin-top: 20px;
}
 
 #diario60junio {
	position: absolute;
	width: 300px;
	height: 500px;
    left: 0px;
	z-index: 1;
	left: 15px;
	top: 1100px;
	background-color:#ADADD6;
	padding: 5px;
	border: 2px solid #686880;
	border-radius: 8px;
	box-shadow: 0px 7px 10px #95BA70;
	text-align:justify;
	color: #003300;
	font-size: 14pt;
 }
 #diario60marzo {
	position: absolute;
	width: 300px;
	height: 320px;
    left: 50px;
	z-index: 1;
	left: 335px;
	top: 1110px;
	background-color:#FFFFCC;
	padding: 0px;
	border: 2px solid #686880;
	border-radius: 8px;
	box-shadow: 0px 7px 10px #95BA70;
	text-align:justify;
	color: #003300;
	font-size: 14pt;
}
#Boxcalendario2016 {
	position: absolute;
	width: 300px;
	height: 320px;
    z-index: 1;
	left: 325px;
	top: 1110px;
	background-color:#FFFFCC;
	padding: 0px;
	border: 2px solid #686880;
	border-radius: 8px;
	box-shadow: 0px 7px 10px #95BA70;
	text-align:justify;
	color: #003300;
	font-size: 14pt;
}

 #box1 {
    margin: 0 auto -60px auto;
	width:1040px;
	height:930px;
	background-color:#f5f5f0;
    text-align: center;
     padding-left: 40px;
}
#box2 {
	width:1040px;
	height:770px;
	background-color:#f5f5f0;
    padding-top:0px;
}
#entrevista {
	width:1040px;
	height:450px;
background-color:#f5f5f0;
	 border-radius: 8px;
     box-shadow: 0px 7px 10px #95BA70;
     left: 325px;
	top: 1110px; 
      
}
#leermas {
    text-align:right;
    color:	#197519;
    
  
}
.ContenedorNoticiasMenu {
  width: 450px;
  margin: 0px auto;
  padding-top: 20px;
}

.Noticias1 h1 {
  width:730px;	
  height:600px;
  background-color: white;
  padding: 0px;
  border: 2px solid #60932e;
  border-radius: 8px;
  box-shadow: 0px 7px 10px #95BA70;
  font-family: arial;
  font-size: 18px;
  text-align:left;  
  border:1px solid #FE0000;
  padding:0px 20px;
}
.TituloNoticias {
  font-family: verdana;
  font-weight: bold;
  font-size: 24px;
  color: #66CC33;
}
.caminante {
  width: 290px;
  height: 355px;
  margin-top: 8px;
  font-family: verdana;
  font-size: 15px;
  line-height: 150%;
  font-weight: bold;
  background: -webkit-linear-gradient(#99CCFF, #CCFFFF); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#99CCFF, #CCFFFF); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#99CCFF, #CCFFFF); /* For Firefox 3.6 to 15 */
  background: -ms-linear-gradient(#99CCFF, #CCFFFF); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#99CCFF, #CCFFFF); /* Standard syntax */
}
.titulocaminante {
  width: 290px;
  margin-top: 5px;
  margin-bottom: 7px;
  font-weight: bold;
}
.piecaminante {
  width: 290px;
  margin-top: 5px;
  margin-bottom: 10px;
  background-color: #3399FF; 
  color: white;
}
.pie {
  width: 990px;
  margin-top: 5px;
  margin-bottom: 10px;
}
.titcalendario {
  width: 615px;
  height: 20px;
}
.calendariotitulo {
  background-color: #009933;
  color: white;
  font-weight: bold;
  letter-spacing: 4px;
  width: 595px;
  margin-top:10px;
  padding: 5px;
}
.calendariobox {
  width: 600px;
  height: 260px;
  margin-top: 9px;
}
.calendario {
  width: 290px;
  height: 320px;
  overflow: scroll;
  overflow-y: hidden;
  direction: rtl;
  float: left;
}
.numeros {
  width: 300px;
  float: right;
  direction: ltr;
  margin-top: 20px;
}
.mes {
  width: 300px;
  height: 230px;
  float: right;
  padding-top: 3px;
  margin: 0px auto;
}
.fechas {
  width: 305px;
  height: 331px;
  float: right;
  margin-top: 0px;
  overflow: scroll;
  overflow-x:hidden;
  padding: 0px 10px;
  text-align: left;
  direction: ltr;
}
.calend {
  width: 280px;
  margin: 0px auto;
}
.calend th {
  width: 40px;
  font-family: verdana;
  font-size: 14px;
}
.calend td {
  width: 40px;
  height: 30px;
  font-family: verdana;
  font-size: 16px;
  background-color: #DCDCD3;
  border-radius: 4px;
}
a.dia1:link{
  font-family: verdana;
  font-size: 16px;
  text-decoration : none;
  background-color: #B1B1A3;
  border-radius: 4px;
  padding: 7px 13px;
}
a.dia1:visited {
  font-family: verdana;
  font-size: 16px;
  text-decoration: none;
  background-color: #B1B1A3;
  border-radius: 4px;
  padding: 7px 13px;
}
a.dia1:hover {
  font-family: verdana;
  font-size: 16px;
  color: white;
  text-decoration: none;
  background-color: black;
  border-radius: 4px;
  padding: 7px 13px;
}
a.dia:link{
  font-family: verdana;
  font-size: 16px;
  text-decoration : none;
  background-color: #B1B1A3;
  border-radius: 4px;
  padding: 7px 9px;
  color: black;
}
a.dia:visited {
  font-family: verdana;
  font-size: 16px;
  text-decoration: none;
  background-color: #B1B1A3;
  border-radius: 4px;
  padding: 7px 9px;
}
a.dia:hover {
  font-family: verdana;
  font-size: 16px;
  color: white;
  text-decoration: none;
  background-color: black;
  border-radius: 4px;
  padding: 7px 9px;
}
a.ultimas:visited {
  color: white;
  text-decoration: none;
}
a.ultimas:hover {
  color: white;
  text-decoration: none;
}
a.ultimas:link{
color: white;
text-decoration: none;
}
a.pesquisas:link{
  background-color: black;
  color: white;
  font-family: verdana;
  font-size: 16px;
  text-decoration : none;
  padding: 2px 11px 4px 10px;
  margin-bottom: 2px;
}
a.pesquisas:visited {
  font-family: verdana;
  font-size: 16px;
  text-decoration: none;
  background-color: black;
  color: white;
  padding: 2px 11px 4px 10px;
  margin-bottom: 2px;
}
a.pesquisas:hover {
  font-family: verdana;
  font-size: 16px;
  color: white;
  text-decoration: none;
  background-color: #75c63b;
  color: white;
  padding: 2px 11px 4px 10px;
  margin-bottom: 2px;
}
.detallecalend {
  width: 305px;
}
.detallecalend td {
  width: 300px;
  background-color: #CCE6FF;
  padding: 10px;
  line-height: 150%;
}
.boxvertical2 {
  width: 290px;
  margin-top: 10px;
  margin-right: 30px;
  float: left;
  text-align: left;
}
.titulonovedades {
  width: 290px;
  font-family: verdana;
  font-size: 23px;
  font-weight: bold;
  color: #75c63b;
  margin-bottom: -4px;
}
.novedades {
  width: 290px;
  font-family: verdana;
  font-size: 14px;
}
.tarjeta {
  width: 600px;
  margin: 22px auto 0 auto;
  box-shadow: 5px 5px 15px #708265;
}
.triptico {
    width: 330px;
    margin-top: 30px;
    text-align: center;
    font-weight: bold;
    background-color: black;  
    opacity: 0.6;
    filter: alpha(opacity=60);
    -webkit-transition: opacity 0.3s linear;
}
.triptico:hover {
    width: 330px;
    margin-top: 30px;
    text-align: center;
    font-weight: bold;
    background-color: #75c63b; 
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
a.mail:link{
  font-size: 16px;
  text-decoration : none;
  color: #bf0411;
}
a.mail:visited {
  font-size: 16px;
  color: #bf0411;
  text-decoration: none;
}
a.mail:hover {
  font-size: 16px;
  color: #bf0411;
  text-decoration: none;
}
#radio {
  width: 290px;
  font-family: verdana;
  font-weight: bold;
  font-size: 1.04em;
  margin-top: 15px;
  -animation-: animarRadio 0.7s infinite;
  -moz-animation: animarRadio 0.7s infinite;
  -o-animation: animarRadio 0.7s infinite;
  -webkit-animation: animarRadio 0.7s infinite;
  -ms-animation: animarRadio 0.7s infinite;
}
#celeste {
  width: 990px;
  height: 70px;
  margin: 0px auto;
  background-color: #3399FF;
  font-family: verdana;
  font-weight: bold;
  font-size: 27px;
  -animation-: animarCeleste 3.9s infinite;
  -moz-animation: animarCeleste 3.9s infinite;
  -o-animation: animarCeleste 3.9s infinite;
  -webkit-animation: animarCeleste 3.9s infinite;
  -ms-animation: animarCeleste 3.9s infinite;
}
.textoceleste{
  width: 500px;
  height: 0px;  
}
/*---animacionesCeleste---*/
@keyframes animarCeleste {
   from {
   color: white;
   }
   to {
   color: black;
   } 
}
@-moz-keyframes animarCeleste {
   from {
   color: white;
   }
   to {
   color: black;
   } 
}
@-o-keyframes animarCeleste {
   from {
  color: white;
   }
   to {
   color: black;
   } 
}
@-webkit-keyframes animarCeleste {
   from {
   color: white;
   }
   to {
   color: black;
   } 
}
@-ms-keyframes animarCeleste {
   from {
   color: white;
   }
   to {
   color: black;
   } 
}
/*---animaciones---*/
@keyframes animarRadio {
   from {
   color: #bf0411;
   }
   to {
   color: #75c63b;
   } 
}
@-moz-keyframes animarRadio {
   from {
   color: #bf0411;
   }
   to {
   color: #75c63b;
   } 
}
@-o-keyframes animarRadio {
   from {
   color: #bf0411;
   }
   to {
   color: #75c63b;
   } 
}
@-webkit-keyframes animarRadio {
   from {
   color: #bf0411;
   }
   to {
   color: #75c63b;
   } 
}
@-ms-keyframes animarRadio {
   from {
   color: #bf0411;
   }
   to {
   color: #75c63b;
   } 
}

@keyframes animarPagos {
   from {
   color: black;
   }
   to {
   color: #75c63b;
   } 
}
@-moz-keyframes animarPagos {
   from {
   color: black;
   }
   to {
   color: #75c63b;
   } 
}
@-o-keyframes animarPagos {
   from {
   color: black;
   }
   to {
   color: #75c63b;
   } 
}
@-webkit-keyframes animarPagos {
   from {
   color: black;
   }
   to {
   color: #75c63b;
   } 
}
@-ms-keyframes animarPagos {
   from {
   color: black;
   }
   to {
   color: #75c63b;
   } 
}

hr.titnov {
  background-color: #75c63b; 
  height: 6px; 
  border: 0;
margin-top: -7px;
    margin-bottom: 19px;
}
hr.subnov {
  background-color: #bf0411; 
  height: 1px; 
  border: 1px;
  margin-top: 4px;
}
a.itemnovedades:link{
  font-family: verdana;
  font-size: 16px;
  text-decoration : none;
  color: black;
}
a.itemnovedades:visited {
  font-family: verdana;
  font-size: 16px;
  color: black;
  text-decoration: none;
}
a.itemnovedades:hover {
  font-family: verdana;
  font-size: 16px;
  color: #bf0411;
  text-decoration: none;
}
a.afap:link{
  font-family: verdana;
  font-size: 16px;
  text-decoration : none;
  color: white;
}
a.afap:visited {
  font-family: verdana;
  font-size: 16px;
  color: white;
  text-decoration: none;
}
a.afap:hover {
  font-family: verdana;
  font-size: 16px;
  color: #75c63b;
  text-decoration: none;
}
.titulovision {
  width: 283px;
  height: 22px;
  background-color: black;
  font-family: verdana;
  font-size: 14px;
  font-weight: bold;
  color: white;
  margin: 25px 0px 2px 0px;
  padding: 6px 0px 5px 8px; 
}

a.tituloafap:link {
color: white;
  width: 283px;
  height: 22px;
  background-color: black;
  font-family: verdana;
  font-size: 14px;
  font-weight: bold;
  margin: 40px 0px 12px 0px;
  padding: 6px 23px 10px 8px;
    text-decoration: none
}
a.tituloafap:visited {
    color: white;
  width: 283px;
  height: 22px;
  background-color: black;
  font-family: verdana;
  font-size: 14px;
  font-weight: bold;
  margin: 40px 0px 12px 0px;
  padding: 6px 23px 10px 8px;
    text-decoration: none
}
a.tituloafap:hover {
    color: white;
  width: 283px;
  height: 22px;
  background-color: #75c63b;
  font-family: verdana;
  font-size: 14px;
  font-weight: bold;
  margin: 40px 0px 12px 0px;
  padding: 6px 23px 10px 8px; 
}
a.pagos:link {
color: white;
  width: 393px;
  height: 22px;
  background-color: red;
  font-family: verdana;
  font-size: 14px;
  font-weight: bold;
  margin: 40px 0px 12px 0px;
  padding: 6px 23px 7px 8px;
    text-decoration: none
}
a.pagos:visited {
    color: white;
  width: 393px;
  height: 22px;
  background-color: red;
  font-family: verdana;
  font-size: 14px;
  font-weight: bold;
  margin: 40px 0px 12px 0px;
  padding: 6px 23px 7px 8px;
    text-decoration: none
}
a.pagos:hover {
    color: white;
  width: 393px;
  height: 22px;
  background-color: #75c63b;
  font-family: verdana;
  font-size: 14px;
  font-weight: bold;
  margin: 40px 0px 12px 0px;
  padding: 6px 23px 7px 8px; 
}
.ims {
    font-family: verdana;
    font-size: 16px;
  font-weight: bold;
  font-stretch: extra-condensed;
     width: 100%;
}
a.ims:link {
color: white;
  width: 500px;

  background-color:#75c63b;
  font-family: verdana;
  font-size: 16px;
  font-weight: bold;
  font-stretch: extra-condensed;
  margin: 40px 0px 12px 0px;
  padding: 6px 16px 7px 8px;
    text-decoration: none;
    text-align: center;
}
a.ims:visited {
  color: white;
  width: 100%;

  background-color: #75c63b;
  font-family: verdana;
  font-size: 16px;
  font-weight: bold;
   font-stretch: extra-condensed;
  margin: 40px 0px 12px 0px;
  padding: 6px 16px 7px 8px;
    text-decoration: none;
     text-align: center;
}
a.ims:hover {
    color: white;
  width: 100%;

  background-color:black;
  font-family: verdana;
  font-size: 16px;
  font-weight: bold;
   font-stretch: extra-condensed;
  margin: 40px 0px 12px 0px;
  padding: 6px 16px 7px 8px; 
      text-decoration: none;
     text-align: center;
}
.desafio {
  width: 290px;
  font-family: verdana;
  font-size: 13.5px;
  text-align: justify;
  margin: 5px auto 29px auto;
}
.vision {
  width: 270px;
  font-family: verdana;
  font-size: 15.5px;
  margin-bottom: 35px;
}
.Operaciones {
  color: black;
  width: 290px;
  font-family: verdana;
  font-size: 15.5px;
  text-align: justify;
  margin-bottom: 5px;
}
.boxvertical3 {
  width: 350px;
  height: 500px;
  float: left;
  margin-top: 10px;
  text-align: left;
}

.result_fail{
    width: 350px;
    background: none repeat scroll 0 0 #FF0000;
    color: white;
    font-size: 14px;
    padding: 0px;
    text-align: center;
    margin: 0px auto;
    
}
.result_ok{
    width: 350px;
    background: none repeat scroll 0 0 #1EA700;
    color: white;
    font-size: 14px;
    padding: 0px;
    text-align: center;
    margin: 0px auto;
}
.publicacionfondo {
  width: 350px;
  background-color: #bf0411;
  margin: 0px auto;
  padding-bottom: 5px;
}
.publicacion {
  width: 327px;
  background-color: white;
  margin: 0px auto;
  padding: 10px 6px;
}
.pie {
  width: 990px;
  margin:0 auto;
  font-family: verdana;
  font-size: 0.84em;
  letter-spacing: 0.10em;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.nav > li {
float:left;
}
.nav li a {
display:block;
}
 
.nav li ul {
display:none;
position:absolute;
min-width:149px;
}
li {
  float: left;
  position: relative;
  top: 0px;
  margin: 0px;
  }
li ul {
  display: none;
  position: absolute; 
  top: 0px;
  left: 0;
}
li ul li {
  display: none;
  position: absolute; 
  top: 0px;
  left: 0;
}
li > ul {
	top: 24px;
	left: auto;
}
li:hover ul, li.hover ul{
    display: none;
}
.nav li:hover > ul {
display:block;
}
.nav li ul li {
display:block;
position:relative;
}
.nav li ul li ul {
display: none;
margin: 0px 0px 0px 135px;
float: right;
top:0px;
}
.audio {
  margin-top: 0px;
  width: 290px;
  height: 205px;
  overflow-y: scroll;
  overflow-x: hidden;

}
.tituloaudio {
  width: 290px;
  font-family: verdana;
  font-size: 17px;
  font-weight: bold;
  margin: 2px 0px 10px 0px;
}
.audicion {
  background-color: #cfd8c8;
  margin-top: -5px;
  margin-bottom: 15px;
  width: 270px;
  padding-top: -8px;
  height: 60px;
   -ms-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
  text-align: center;
}
.audicion:hover {
  background-color: #75c63b;
  margin-top: -5px;
 margin-bottom: 15px;
  width: 270px;
  padding-top: -6px;
  height: 60px;
    text-align: center;
}
.audicion:visited {
  background-color: #cfd8c8;
  margin-top: -5px;
  margin-bottom: 15px;
  width: 270px;
  padding-top: -6px;
  height: 60px;
    text-align: center;
}
article.audicion p {
  font-size: 15px;
  margin-top: 5px;
}
audio#CAMINANTE-06914 {
margin-top: -10px;
margin-bottom: 20px;
width: 280px;
}


.titulo55 {
  font-family: verdana;
  font-size: 12px;
  text-align: center;
    line-height: normal;
}


#makeMeScrollable
		{
			width:100%;
			height: 280px;
            margin-top: -10px;
			position: relative;
		}
		
		/* 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: 5px;
			/* 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;
		}
/* 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;
	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(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(../images/cursors/cursor_arrow_left.png), url(../images/cursors/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background-image: url(../images/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;
	width: 10%;
	height: 100%;
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(../images/cursors/cursor_arrow_right.png), url(../images/cursors/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background-image: url(../images/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%;
}