body {
   font: 24px Helvetica;
   background: #999999;
  }

  #main {
   min-height: 800px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 
  #main > article {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
   background: #dddd88;
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
   }
  
  #main > nav {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #000;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;
   }
  
  #main > aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #f0f0f0;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
   }
 
  header{
	display: block;
	margin: 4px;
	padding: 5px;
	min-height: 100px;
	border: 1px solid #000000;
	border-radius: 7pt;
	background-image: url(header-bg.jpg);
	width: auto;
	background-repeat: repeat;
	background-position: right center;
   }
 
 footer {
	display: block;
	margin: 4px;
	padding: 5px;
	min-height: 100px;
	border: 1px solid #000000;
	border-radius: 7pt;
	background: #000;
	width: auto;
   }
   
   
  /* Too narrow to support three columns */
  @media all and (max-width: 640px) {
  
   #main, #page {
    -webkit-flex-flow: column;
            flex-flow: column;
   }

   #main > article, #main > nav, #main > aside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }
  
   #main > nav, #main > aside, header, footer {
    min-height: 50px;
    max-height: 50px;
   }
  }


 /* logotipo */
.logo {
	width: 320px;
	height: 70px;
	-webkit-flex-flow: column;
	flex-flow: column;
	background-image: url(header.png);
	padding: 1px;
   }
   
    /* Menu de navegación */

nav { width:100%;
-webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;

}

ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-bottom-width: 3px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-bottom-style: solid;
	border-top-color: #900;
	border-right-color: #900;
	border-left-color: #900;
	border-bottom-color:#333;
}

a {
	font-family:Verdana, Geneva, sans-serif;
	color:#000;
	text-decoration:none;
	font-size:11px;
	display:block;
	padding:5px;
	border-bottom-width:thin;
	border-bottom-style:solid;
	border-bottom-color:#000;
	background-color:#900;
}

a:hover {
	color: #FFF;
	background-color: #C00;
	border-right-widht: 5px;
	border-right-style: solid;
	border-right-color: #C00;
	}

.texto-aside {
	color:#900;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	text-align:justify;}



.flex
   {
      /* basic styling */
      width: 620px;
      height: 200px;
      border: 1px solid #555;
      font: 14px Arial;

      /* flexbox setup */
      display: -webkit-flex;
      -webkit-flex-direction: row;

      display: flex;
      flex-direction: row;
   }

   .flex > div
   {
      -webkit-flex: 1 1 auto;
      flex: 1 1 auto;

      width: 80px; /* To make the transition work nicely.  (Transitions to/from
                      "width:auto" are buggy in Gecko and Webkit, at least.
                      See http://bugzil.la/731886 for more info.) */

      -webkit-transition: width 0.7s ease-out;
      transition: width 0.7s ease-out;
   }

   /* colors */
   .flex > div:nth-child(1){ background:url(images/addicts.jpg);}
   .flex > div:nth-child(2){ background:url(images/ramones.jpg);}
   .flex > div:nth-child(3){ background:url(images/rancid.jpg);}
   .flex > div:nth-child(4){ background:url(images/sw.jpg);}
   .flex > div:nth-child(5){ background:url(images/sexpistols.jpg);}
   .flex > div:nth-child(6){ background:url(images/badbrains.jpg);}
   .flex > div:nth-child(7){ background:url(images/descendents.jpg);}
   .flex > div:nth-child(8){ background:url(images/blackflag.jpg);}
   .flex > div:nth-child(9){ background:url(images/socialdistortion.jpg);}
   .flex > div:nth-child(10){ background:url(images/clash.jpg);}

   .flex > div:hover
   {
        width: 310px;
   }