/*  nacion.cl
  
   _ |\___/| CSS   Documento para diagramacion de elementos de UX
  | |) ^Y^ ( DEV   Octavio Astudillo y Pablo Valenzuela
  | |\  ^  /
  \ ()    (  Maneki Neko - Nacion.cl
   \   (º) \
    )      | 
   /  )  | |\
   \  |  |_|/\
    //__// __/
        \_)

*/

.rojodestacado { color:#F00;}
.azuldestacado { color:#00F;}

.scrollable {
  position:relative;
  overflow:hidden;
  width: 380px;
  height:220px;
  margin:0;
}

.scrollable .items {
  position:absolute;
  width:4000px;
  float:left;
}

.items div {
  float:left;
}

#navi {
  margin: 5px 0 0 0;
  width:340px;
  height:20px;
  padding:0 20px;
}

#navi a {
  width:8px;
  height:8px;
  float:left;
  margin:3px;
  background: url(scrollable/arrow/navigator.png) 0 0 no-repeat;
  display:block;
  font-size:1px;
}

#navi a:hover {
  background-position:0 -8px;      
}

#navi a.active {
  background-position:0 -16px;     
}

/* ---------------------------------
  ESPECIAL
----------------------------------*/

.espscrollable {
  position:relative;
  overflow:hidden;
  width: 940px;
  height:80px;
  margin:0;
}

.espscrollable .espitems {
  position:absolute;
  width:10000px;
  float:left;
}

.espitems div {
  float:left;
}

.espitems div img { margin:0; padding:0 0 10px 0; background:url(img/matrix-orange.png) bottom left no-repeat; }

#espnavi {
  margin: 5px 0 0 0;
  width:940px;
  height:5px;
  padding:0 5px;
}

#espnavi a {
  width:8px;
  height:8px;
  float:left;
  margin:3px;
  background: url(scrollable/arrow/navigator.png) 0 0 no-repeat;
  display:block;
  font-size:1px;
}

#espnavi a:hover {
  background-position:0 -8px;      
}

#espnavi a.active {
  background-position:0 -16px;     
}


/*------------------------------
  HOROSCOPO SCROLLABLE
-------------------------------*/

.horoscrollable {
  position:relative;
  overflow:hidden;
  width: 280px;
  height:130px;
  margin:0;
}

.horoscrollable .horoitems {
  position:absolute;
  width:5000px;
  float:left;
}

.horoitems div {
  width: 280px;
  float:left;
  padding:0 10px;
}

#horonavi {
  margin: 5px 0 0 0;
  width:300px;
  height:40px;
  padding:0 20px;
}

#horonavi a {
  width:8px;
  height:8px;
  float:left;
  margin:3px;
  background: url(scrollable/arrow/navigator.png) 0 0 no-repeat;
  display:block;
  font-size:1px;
}

#horonavi a:hover {
  background-position:0 -8px;      
}

#horonavi a.active {
  background-position:0 -16px;     
}

/* -----------------------------
    SLIDE TRIUNFO
------------------------------*/

.triscrollable {
    position:relative;
    overflow:hidden;
    width:460px;
    height:360px;
    margin:0;
}

.triscrollable .tritems {
    position:absolute;
    width:3800px;
    float:left;
}

.tritems div {
    float:left;
}

#trinavi {
    margin: 5px 0 0 0;
    width:460px;
    height:25px;
    padding:0 5px;
}

#trinavi a {
    width:8px;
    height:8px;
    float:left;
    margin:3px;
    background: url(scrollable/arrow/navigator.png) 0 0 no-repeat;
    display:block;
    font-size:1px;
}

#trinavi a:hover {
    background-position:0 -8px;      
}

#trinavi a.active {
    background-position:0 -16px;     
}

/* -----------------------------
  ZOOM EFECT
------------------------------*/

.zoom-section { margin:0 auto; text-align:center; }

/* This is the moving lens square underneath the mouse pointer. */
.cloud-zoom-lens {
  border: 4px solid #888;
  margin:-4px;  /* Set this to minus the border thickness. */
  background-color:#fff;  
  cursor:move;    
}

/* This is for the title text. */
.cloud-zoom-title {
  font-family:Arial, Helvetica, sans-serif;
  position:absolute !important;
  background-color:#000;
  color:#fff;
  padding:3px;
  width:100%;
  text-align:center;  
  font-weight:bold;
  font-size:10px;
  top:0px;
}

/* This is the zoom window. */
.cloud-zoom-big {
  border:4px solid #ccc;
  overflow:hidden;
}

/* This is the loading message. */
.cloud-zoom-loading {
  color:white;  
  background:#222;
  padding:3px;
  border:1px solid #000;
}

/* -----------------------------
    SLIDE TRIUNFO MUNDIAL
------------------------------*/

.triscrollablem {
    position:relative;
    overflow:hidden;
    width:460px;
    height:360px;
    margin:0;
    border-color: #b8181d; border-style: solid; border-width: 2px;
}

.triscrollablem .tritems {
    position:absolute;
    width:4800px;
    float:left;
}

.tritems div {
    float:left;
}

#trinavim {
    margin: 5px 0 0 0;
    width:460px;
    height:25px;
    padding:0 5px;
}

#trinavim a {
    width:8px;
    height:8px;
    float:left;
    margin:3px;
    background: url(scrollable/arrow/navigator.png) 0 0 no-repeat;
    display:block;
    font-size:1px;
}

#trinavim a:hover {
    background-position:0 -8px;      
}

#trinavim a.active {
    background-position:0 -16px;     
}

/* -----------------------------
    SLIDE NACION.CL NUEVO
------------------------------*/

.triscrollablenew {
    position:relative;
    overflow:hidden;
    width:620px;
    height:226px;
    margin:0;
}

.triscrollablenew .tritemsnew {
    position:absolute;
    width:5500px;
    float:left;
}

.tritemsnew div {
    float:left;
}

#trinavinew {
    margin: -20px 0 0 0;
    width:620px;
    height:25px;
    padding:0 20px;
    z-index:1000;
    position:relative;
}

#trinavinew a {
    width:8px;
    height:8px;
    float:left;
    margin:3px;
    background: url(scrollable/arrow/navigator2.png) 0 0 no-repeat;
    display:block;
    font-size:1px;
}

#trinavinew a:hover {
    background-position:0 -8px;      
}

#trinavinew a.active {
    background-position:0 -16px;     
}


/*NUEVO SLIDE PORTADA*/
#new-slide img { margin:0; padding:0; border: 2px solid #FFF; width:320px; height:180px; margin-top:20px; margin-right:20px; }

#new_port{ background-color:#ff8e00; width:620px;  height:226px; }
#new_port-sport{ background-color:#b8181d; width:620px; height:226px; }

.overtt_new { position: relative; top:-200px;  z-index:2000; left:0px;  padding:10px 5px 0 0px;}

.overtt_new h2 a { width:250px; height;90px; margin:0; padding:2px; font: 22px 'MuseoSans', Arial, Helvetica, sans-serif; text-decoration:none; color:#FFF;float:left;}
.overtt_new h2 a:hover { text-decoration:underline; color:#FFEBC9; }
.overtt_new p a { font-weight:400; width:240px; height;90px; float:left; margin:2px; padding:2px; color:#FFEBC9; }
.overtt_new p a:hover { color:#FFF; }
.leer {position:relative; top:-30px; right:10px;background: url(scrollable/icono_periodico.png) right top; z-index:60000;}

.overtt_new .tit a { font-weight:400; width:250px; height;100px; float:left; margin:0px; padding-left:20px;padding-top:5px; color:#FFEBC9; }
.overtt_new .tit a:hover { color:#FFF; }

.overtt_new .tit2 a { font-weight:400; width:250px; height;100px; float:left; margin:0px; padding-left:20px;padding-top:5px; color:#FFEBC9; }
.overtt_new .tit2 a:hover { color:#FFF; }