/* HTML elements based on Zen Drupal html-reset.css file */
/* http://drupal.org/project/zen */

/*
 * Fonts
 *
 * Our font size and line height declarations are based on the following ALA
 * article:
 *   http://www.alistapart.com/articles/howtosizetextincss
 *
 * All modern browsrs use a 16px default font size. Specifying the font-size
 * and line-height in ems (relative to the 16px default font) allows the user
 * to resize the font in the browser and produces the most consistent results
 * across different browsers.
 */

body {
  font-size: 100%; /* Fixes exaggerated text resizing in IE6 and IE7 */

  /* font-size: 16px; */
  line-height: 1.5em; /* 16px x 1.5 = 24px */

    /* line-height: 1.5625em; */ /* 16px x 1.5625em = 25px */
    /* line-height: 1.625em; */ /* 16px x 1.625em = 26px */

/*
 * px/em reference table

   32px = 2em
   31px = 1.9375em
   30px = 1.875em
   29px = 1.8125em
   28px = 1.75em
   27px = 1.6875em
   26px = 1.625em
   25px = 1.5625em
   24px = 1.5em
   23px = 1.4375em
   22px = 1.375em
   21px = 1.3125em
   20px = 1.25em
   19px = 1.1875em
   18px = 1.125em
   17px = 1.0625em

   16px = 1em
   15px = 0.9375em
   14px = 0.875em
   13px = 0.8125em
   12px = 0.75em
   11px = 0.6875em
   10px = 0.625em
   9px  = 0.5625em
   8px  = 0.5em
   7px  = 0.4375
   6px  = 0.375em
   5px  = 0.3125em

   1px = 0.0625em

*/
}

body,
caption,
th,
td,
input,
textarea,
select,
option,
legend,
fieldset {

  /* The following font family declarations are based on the Microsoft core web
   * fonts which are common fonts available on most computer systems. The DejaVu
   * fonts are commonly available on Linux systems where the MS fonts are less
   * common. Tahoma and Helvetica are also widely available.
   *
   * A user's web browser will look at the comma-separated list and will
   * attempt to use each font in turn until it finds one that is available
   * on the user's computer. The final "generic" font (sans-serif or serif)
   * hints at what type of font to use if the web browser doesn't find any
   * of the fonts in the list.

  font-family: "Times New Roman", Times, Georgia, "DejaVu Serif", serif;
  font-family: Times, "Times New Roman", Georgia, "DejaVu Serif", serif;
  font-family: Georgia, "Times New Roman", "DejaVu Serif", serif;

  font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif;
  font-family: Tahoma, Verdana, "DejaVu Sans", sans-serif;
  font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif;
  font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;

  font-family: "Courier New", "DejaVu Sans Mono", monospace;

   * Liberation Fonts are free software fonts, and are metric-compatible 
   * with Monotype Corporation's Arial, Times New Roman, and Courier New 
   * http://en.wikipedia.org/wiki/Liberation_fonts

  font-family: "Liberation Sans", Arial, sans-serif;
  font-family: "Liberation Serif", Times, "Times New Roman", serif;
  font-family: "Liberation Mono", "Courier New", "DejaVu Sans Mono", monospace;

   */

  font-family: "Liberation Sans", Arial, sans-serif;
}

pre,
code {
  font-size: 1.125em; /* Monospace fonts can be hard to read */
  font-family: "Liberation Mono", "Courier New", "DejaVu Sans Mono", monospace;
}

/*
 * Headings
 */
h1 {
  font-size: 2em;
  line-height: 1.3em;
  margin-top: 0;
  margin-bottom: 0.5em; /* 0.5em is equavalent to 1em in the page's base font.
                           Remember, a margin specified in ems is relative to
                           the element's font-size, not to the pages' base
                           font size. So, for example, if we want a 1em margin
                           (relative to the base font), we have to divide that
                           length by the element's font-size:
                           1em / 2em = 0.5em */
}

h2 {
  font-size: 1.5em;
  line-height: 1.3em;
  margin-top: 0.667em; /* Equivalent to 1em in the page's base font: 1 / 1.5 = 0.667em */
  margin-bottom: 0.667em;
}

h3 {
  font-size: 1.3em;
  line-height: 1.3em;
  margin-top: 0.769em; /* Equivalent to 1em in the page's base font: 1 / 1.3 = 0.769 */
  margin-bottom: 0.769em;
}

h4,
h5,
h6 {
  font-size: 1.1em;
  line-height: 1.3em;
  margin-top: 0.909em; /* Equivalent to 1em in the page's base font: 1 / 1.1 = 0.909 */
  margin-bottom: 0.909em;
}


/*
 * Block-level elements
 */
p,
ul,
ol,
dl,
pre,
table,
fieldset {
  margin: 1em 0;
}

blockquote {
  margin: 1em 2em;
}

/*
 * Lists
 *
 * We need to standardize the list item indentation.
 */
ul,
ol {
  margin-left: 0;
  padding-left: 2em; /* LTR */
}

ul ul, ul ol,
ol ol, ol ul,
.block ul ul, .block ul ol,
.block ol ol, .block ol ul,
.item-list ul ul, .item-list ul ol,
.item-list ol ol, .item-list ol ul {
  margin: 0;
}

li {
  margin: 0;
  padding: 0;
}

ul          { list-style-type: disc; }
ul ul       { list-style-type: circle; }
ul ul ul    { list-style-type: square; }
ul ul ul ul { list-style-type: circle; }
ol          { list-style-type: decimal; }
ol ol       { list-style-type: lower-alpha; }
ol ol ol    { list-style-type: decimal; }

dt {
  margin: 0;
  padding: 0;
}

dd {
  margin: 0 0 0 2em;
  padding: 0;
}

/*
 * Links
 *
 * The order of link states are based on Eric Meyer's article:
 * http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
 */
a:link,
a:visited,
a:active {
 text-decoration: none;
 outline: none;
}

 {
}

a:hover,
a:focus {
  text-decoration: underline;
}


/*
 * Tables
 *
 * Drupal provides table styling which is only useful for its admin section
 * forms, so we override this default CSS. (We set it back in forms.css.)
 */
table {
  border-collapse: collapse;
  /* width: 100%; */ /* Prevent cramped-looking tables */
}

th,
thead th,
tbody th {
  text-align: left; /* LTR */
  padding: 0;
  border-bottom: none;
}

tbody {
  border-top: none;
}

/*
 * Abbreviations
 */
abbr {
  border-bottom: 1px dotted #666;
  cursor: help;
  white-space: nowrap;
}

abbr.created /* Date-based "abbreviations" show computer-friendly timestamps which are not human-friendly. */ {
  border: none;
  cursor: auto;
  white-space: normal;
}

/*
 * Images
 */
img {
  border: 0;
}

/*
 * Horizontal rules
 */
hr {
  height: 1px;
  border: 1px solid gray;
}

/*
 * Forms
 */
form {
  margin: 0;
  padding: 0;
}

fieldset {
  margin: 1em 0;
  padding: 0.5em;
}









/* font-size sections base */

#content_container {
}

#right_sidebar, #left_sidebar, #footer_container {
 font-size: 0.875em; /* 16px X 0.875em = 14px */
 line-height: 1.5em;
}

#footer_separator {
 margin-bottom: 3em;
}





/* sidebar  */

#left_sidebar .regionview,
#right_sidebar .regionview {
 margin-bottom: 2em;
 padding: 0;
 border: 1px solid gray;
}

#right_sidebar .regionview {
 margin-right: 0;
 padding: 0.5em 1em;
}

#right_sidebar .teaser_icon {
 width: 90px;
}

#right_sidebar .picture-teaser .teaser_icon{
 width: 90%;
}

#right_sidebar .labeled_icon_list,
#left_sidebar .labeled_icon_list {
 border: none;
}


/* left sidebar */

#searchbox,
#tags,
#rss,
#banners {
 margin-bottom: 2em;
 font-size: 0.875em; /* 16px X 0.875em = 14px */
 line-height: 1.5em;
 border: 1px solid gray;
 padding: 0.5em 1em;
}

#searchbox input[type="text"]{
 width: 100%;
}


/* menus */

.menu,
.categories_hierarchy {
  border: none !important;
}

.menu ul,
.categories_hierarchy ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
}

.menu ul li,
.categories_hierarchy ul li {
 margin: 0 0 0.5em 0;
 padding: 0.5em 1em;
 border: 1px solid gray;
}

.menu ul li:empty,
.categories_hierarchy ul li:empty {
 padding: 0;
 margin-bottom: 0;
 border: none;
}



#header .menu ul {
 /* text-align: right; */
 width: 845px;
 list-style-type: none;
 margin: 0 auto;
 padding: 0;
}

#header .menu ul li{
 margin: 0 0.5em 0 0;
 padding: 0.5em 1em;
 display: inline-block;
}





/* ##### categories teasers #### */

/* TODO !! */
.category_title {
 display: block;
 font-size: 1.5em;
 text-transform: uppercase;
 margin-bottom: 0.5em;
}

#categories_navigation {
 font-size: 1em;
 font-weight: bold;
 margin-bottom: 2em;
 padding: 0.5em 2em 0.5em 1em;
 border: 1px solid gray;
 display: inline-block;
}

/* region-views content */

.labeled_icon_list {
 padding: 0 4px 0 16px;
}

/* ##### .content-view ##### */

/* labeled_icon */

.labeled_icon {
 position: relative;
 width: 124px;
 height: 124px;
 margin-left:5px;
 margin-right:5px;
 float: left;
 padding: 12px !important;
 margin: 0 12px 12px 0;
  border: 1px solid gray;
}

.labeled_icon .label {
 display: block;
}

.labeled_icon img.type_icon {
  position: absolute;
  top: 16px !important; left: 16px !important;
}

/* teaser & detail */

#content_container .content-view,
.categories_navigation {
 padding: 12px 16px;
}
.teaser {
  margin-bottom: 2em;
}

.detail {
}

.content-view img.type_icon {
  /* float: left; */
  margin-right: 0.5em;
  /* vertical-align: middle; */
  position: absolute;
  top 0; left: 0;
}

.article-teaser img.type_icon {
  display: none !important;
}

.content-view > div {
 margin-top: 1em;
}

.content-view div.first, 
.content-view div:first-child {
  margin-top: 0;
}

.content-view h1.title {  /* detail & ...? */
 font-size: 2em; /* 16px X 2em = 32px */
 margin-top: 0;
}

.content-view h2.title { /* teaser */
 position: relative;
 padding-left: 38px;
 /* text-indent: -48px; */
 font-size: 1.5em; /* 16px X 1.5em = 24px */
 margin-top: 0;
}

.content-view .article-teaser h2.title {
  padding-left: 0;
}


 /* .content-view elements inside */

.content-view .categories,
.content-view .tags,
.content-view .comments_count,
.content-view .pretitle,
.content-view .date,
.content-view .tools,
.content-view .author,
.content-view .source,
.content-view .download_link,
.content-view .socialnetworks,
.content-view .related_contents > ul {
 font-size: 15px; /* 16px X 0.75em = 12px */
}

/* misc html inside .content-view */

.content-view .download_link,
.content-view .author {
 font-weight: bold;
}

.content-view .pretitle-container {
 margin-bottom: 0;
}

.content-view #gallery ul,
.content-view .categories ul,
.content-view .tools ul {
 list-style-type: none;
 padding-left: 0;
}

.related_contents > span {
 font-size: 11px; /* 16px X 0.75em = 12px */
 line-height: 1.5em; 
 font-weight: bold;
}

.related_contents ul {
 list-style-type: none;
 padding-left: 0;
}

.related_contents > ul {
 padding-left: 1em;
 margin-top: 0;
}

.content-view .tools ul li,
.content-view .categories ul li, 
.content-view .categories ul,
.related_contents ul li{
 display: inline;
}

.content-view .tools ul li,
.content-view .categories ul li, 
.related_contents ul li{
 margin-left: 0.1em;
}

.content-view .categories ul li:before,
.content-view .tools ul li:before {
 /*  content: "|"; */
}

.content-view .categories ul li.first:before,
.content-view .tools ul li.first:before {
 content: "";
}

{
content:url(smiley.html);
}
.content-view #gallery ul li p {
 margin-top: 0; /* image description */
 font-size: 0.875em;
}

.content-view .description {
 font-size: 0.875em;
 line-height: 1.5em;
}

.content-view .socialnetworks {
 text-align: right;
}

.content-view .socialnetworks img {
 vertical-align: middle;
}

.content-view .tags h3 {
 font-size: 1em; 
}

.detail .summary
{
 font-size: 0.875em;
 font-weight: bold;
}

/* standarize html inside text */

/* NOTA: excepto por static-pages el resto de las vistas de contenido 
   debe tener su contenido html dentro en la clase "html-text" 
   para controlar y acotar el efecto del html que pueda introducir el usuario
*/

.content-view .html-text, {
}

.content-view .html-text h1,
.content-view .html-text h2,
.content-view .html-text h3 {
 font-size:  0.9375em ; /* 15px */
}

.content-view .html-text h4,
.content-view .html-text h5,
.content-view .html-text h6 {
 font-size: 0.875em; /* 16px X 0.875em = 14px */
}


/* images */

.content-view img.teaser_icon {
 float: left;
 margin-right: 1em;
}


.html-content img {
 margin: 1em 0;
 max-width: 98%;
 height: auto;
}

.html-content img.normal,
.html-content img.default {
 float: none;
}

.html-content img.full {
 width: 98%; 
}

.html-content img.center {
 display: block;
 margin-right: auto;
 margin-left: auto;
}
.html-content img.right {
 float: right;
}

.content-view .detail_picture img {
 /* width: 100%; */
}


/* document teasers */

.floating-img-clear {
 clear: both;
 margin-top:-0.6em;
}


/* multiemdia teasers */

.picture-teaser img.teaser_icon, 
.movieclip-teaser img.teaser_icon,
.soundtrack-teaser img.teaser_icon{
width: 200px;
float: none;
margin-bottom: 1em;
}

.picture-teaser img.teaser_icon, 
.detail_picture img,
.video_player {
  border: 1px solid gray;
  padding: 8px;
}

.movieclip-detail .video_player{
  width: 470px;
  height: 320px;
}

.picture-teaser .description,
.movieclip-teaser .description,
.soundtrack-teaser .description{
 display: inline;
}

.picture-teaser .author_container, 
.movieclip-teaser .author_container,
.soundtrack-teaser .author_container{
 display: inline;
}

/* teasers in sidebars */

#right_sidebar .content-view .title,
#left_sidebar .content-view .title {
 font-size: 1.3em;
}

/* comments & user_input separator */

.content-view hr {
 margin: 1em 0 2em;
}


/* comments & user_input form */

.user_input {
}

.comment {
}

.comment .when_who {
 font-size: 0.875em; /* 16px X 0.875em = 14px */
}

.comment p {
 margin-left: 1em;
 margin-top: 0;
}

.comment p br:first-child {
 display: none; /* fix <br> */
}

.user_input .box-top {
 margin-top: 1em;
}

.user_input box {
}

.user_input form{
 padding: 1em 2em; 
 border: 1px solid black; /* colors_and_borders */
}

.user_input img.captcha {
 display: block;
 margin: 1em 0;
}

.user_input label {
 font-size: 0.875em;
 display: block;
}

.user_input input,
.user_input textarea,
.user_input form > small {
 display: block;
 margin-left: 1em;
 margin-bottom: 1em;
}


/* ##### footer #####*/

#footer_container {
 text-align: center; 
}

/*
TODO: en los templates de las vistas
para todos las vistas agregar clases
- div.media-content para imagenes, flash, video
- div.meta-content para tools, categorias, tags etc
- div.html-content cuando el contenido tiene tags html
- div.main-content para marcar el contenido mas importante de la vista
*/