/*
   Seccion de declaracion de fuentes
*/

@font-face {
    font-family: 'OpenSansLight';
    src: url('fuentes/OpenSans-Light-webfont.eot');
    src: url('fuentes/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fuentes/OpenSans-Light-webfont.woff') format('woff'),
         url('fuentes/OpenSans-Light-webfont.ttf') format('truetype'),
         url('fuentes/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansRegular';
    src: url('fuentes/OpenSans-Regular-webfont.eot');
    src: url('fuentes/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fuentes/OpenSans-Regular-webfont.woff') format('woff'),
         url('fuentes/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fuentes/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open sans';
    src: url('fuentes/OpenSans-Regular-webfont.eot');
    src: url('fuentes/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fuentes/OpenSans-Regular-webfont.woff') format('woff'),
         url('fuentes/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fuentes/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansSemibold';
    src: url('fuentes/OpenSans-Semibold-webfont.eot');
    src: url('fuentes/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fuentes/OpenSans-Semibold-webfont.woff') format('woff'),
         url('fuentes/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('fuentes/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansBold';
    src: url('fuentes/OpenSans-Bold-webfont.eot');
    src: url('fuentes/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fuentes/OpenSans-Bold-webfont.woff') format('woff'),
         url('fuentes/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('fuentes/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AaarghNormal';
    src: url('fuentes/Aaargh-webfont.eot');
    src: url('fuentes/Aaargh-webfont.eot?#iefix') format('embedded-opentype'),
         url('fuentes/Aaargh-webfont.woff') format('woff'),
         url('fuentes/Aaargh-webfont.ttf') format('truetype'),
         url('fuentes/Aaargh-webfont.svg#AaarghNormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*
   Estilos comunes
*/

body {
  font-family: 'open sans', sans-serif;
  font-weight: 300;
  text-align: center;
  margin: 0;
}

#contenedor {
  width: 800px;
  margin: 0 auto;
  text-align: left;
}

.texto-izquierda {
  text-align: left;
}

.texto-derecha {
  text-align: right;
}

.blanco {
  color: #FFFFFF;
}

.fuente-regular {
  font-family: 'OpenSansRegular', sans-serif;
}

.fuente-semi {
  font-family: 'OpenSansSemibold', sans-serif;
}

/*
  Tamaños de fuente
*/

.fuente-32 {
  font-size: 32pt;
}

.fuente-24 {
  font-size: 24pt;
}

.fuente-20 {
  font-size: 20pt;
}

.fuente-18 {
  font-size: 18pt;
}

.fuente-16 {
  font-size: 16pt;
}

.fuente-14 {
  font-size: 14pt;
}

.fuente-12 {
  font-size: 12pt;
}

/*
  Espacios horizontales en blanco
*/

.blanco-100 {
  clear: both;
  height: 100px;
}

.blanco-60 {
  clear: both;
  height: 60px;	
}

.blanco-40 {
  clear: both;
  height: 40px;	
}

.blanco-30 {
  clear: both;
  height: 30px;
}

.blanco-20 {
  clear: both;
  height: 20px;
}

.blanco-10 {
  clear: both;
  height: 10px;
}

.blanco-5 {
  clear: both;
  height: 5px;
}

/*
  Espacios verticales en blanco
*/
.ancho-300 {
  width: 300px;
}

.ancho-200 {
  width: 200px;
}

.ancho-100 {
  width: 100px;
}

/*
  margen y relleno
*/

.margen-5 {
  margin: 5px;
}

.margen-0 {
  margin: 0px;
}

.relleno-5 {
  padding: 5px;
}

.relleno-0 {
  padding: 0px;
}

.relleno-inferior-3 {
  padding-bottom: 3px;
}

.borde {
  border: 1px solid #333;
}