@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic|Roboto+Condensed:300italic,400italic,700italic,400,300,700|Roboto+Mono|Roboto+Slab:400,100,300);

#container {
	width: 822px;
	margin:0 auto;
  background: white;
}

#sub-container {
	margin-top:-12px;
	height:330px;
	background: white;

	-moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

article {
  background: #ececec;
  position: relative;
}

article p {
  margin-left: 7px;
  font-size: 10px;
  font-family:'Roboto-Light';
}

article h1,h4 {
  margin-left:7px;
  margin-top: 7px;
  font-family: 'Roboto-Bold';
  line-height: 0.9em;
}

#inscripciones {
  width: 150px;
  height:313px;
  left:5px;
  top:12px;
  float:left;
  
}

#tinsc {
  height:130px;
  padding-top:6px;
  font-size: 20px;
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}


#masinfo {
  height:20px;
  position: absolute;
  top:293px;
  left:100px;
}

#tinsc, #masinfo {
  background: #fde688; 
  color:white; 
  transition:background  0.4s ;
    -moz-transition:background 0.4s ;
    -webkit-transition:background 0.4s;
    -ms-transition:background 0.4s ;   
}

#tinsc:hover, #masinfo:hover {
  cursor:pointer;
  background: #ffc620;
}

#galeria {
  width:266px;
  height:313px;
  top:12px;
  left:11px;
  float:left;
  
}

#tgale {
  background:#0093d3;
  color: white;
  height:46px;
  margin-top: -12px;
  padding-top:15px;

  transition:background  0.4s ;
    -moz-transition:background 0.4s ;
    -webkit-transition:background 0.4s;
    -ms-transition:background 0.4s ;
  
}

#tgale:hover {
  cursor:pointer;
  background:#0069aa; 
}

#agenda {
  width:383px;
  height:130px;
  top:12px;
  left:17px;  
  float:left;

}

#tagenda {
  background: #fab742;
  color:white;
  width:140px;
  height:85px;
  padding-top:45px;
    decoration: none;

  transition:background  0.4s ;
  -moz-transition:background 0.4s ;
  -webkit-transition:background 0.4s;
  -ms-transition:background 0.4s ;

}

#tagenda:hover {
  cursor: pointer;
  background: #f69020;
}

#talleres {
  width:140px;
  height:177px;
  top:18px;
  left:17px;
  float:left;

  transition:background  0.4s ;
  -moz-transition:background 0.4s ;
  -webkit-transition:background 0.4s;
  -ms-transition:background 0.4s ;
}

#ttalleres {
  background:#53b594;
  color: white;
  width:140px;
  height:45px; 
  padding-top:10px;
}

#ttalleres:hover {
  cursor: pointer;
  background: #22aa55;
}

#sumate {
  width:236px;
  height:177px;
  top:18px;
  left:24px;
  float:left;
}

#tsumate {
  background:#be2a26;
  color:white;
  width:225px;
  height:70px;
  margin-top: 6px;
  margin-left:6px; 

   transition:background  0.4s ;
  -moz-transition:background 0.4s ;
  -webkit-transition:background 0.4s;
  -ms-transition:background 0.4s ;
}

#tsumate:hover {
  cursor: pointer;
  background: #DD1100;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}
 
@font-face {
    font-family: 'Roboto-Bold';
    src: url('../fonts/Roboto-Bold.ttf');
    font-weight: bolder;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto-italic';
    src: url('../fonts/Roboto-Italic.ttf');
    font-weight: normal;
    font-style: italic;
}
 
 
@font-face {
    font-family: 'Roboto-thin';
    src: url('../fonts/Roboto-Thin.ttf');

    font-weight: 200;
    font-style: normal;
}

 
@font-face {
    font-family: 'Roboto-light';
    src: url('../fonts/Roboto-Light.ttf');
    font-weight: lighter;
    font-style: normal;
}

@font-face {
    font-family:'Roboto-MediumItalic';
    src: url('../fonts/Roboto-MediumItalic.ttf');
    font-weight: normal;
    font-style: normal;
}


body{
	background: #b7dce2;
	margin:0;
	padding:0;
}

body,p,h1,h2,h3,h4,h5,h6 {
  font-family: 'Roboto';
}

h1 {
  font-family: 'Roboto';
}

.barraWide {
    height: 13px;
    width:380px;
    background: #7b1e42;
    margin-left:-10px;    
}

a {
    text-decoration:none;
}

#horizontalmenu {
    text-align: center;
    background: #b55481;
    height:85px;
    -moz-box-sizing: boerder-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    
}

#horizontalmenu img{
    float:left; 
    width: 180px;
    height: 60px;
    margin-left: -30px;
    position:relative;
    top:5px;
    right:15px;
}

#imgylogo {
    width:915px;
    margin:0 auto;   
    text-align: center;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

#menu{
    text-align: center;
    list-style-type:none;
    padding:0;
    margin:0 auto;
    overflow:hidden;
    z-index:999;
}

#menu li{
    width:150px;
    float:left;
    height:70px;
    text-align:center;
    font-family: 'Roboto-thin';
    font-size:15.5px;

    background: #b55481;
    transition:background  0.4s ;
    -moz-transition:background 0.4s ;
    -webkit-transition:background 0.4s;
    -ms-transition:background 0.4s ;
}

#menu li:hover{
    background:#7a1e45;
}


#menu li a{
    padding-top:40px;
    color:#DDD;
    display:block;
    height:50px;
}



#menu li ul {
   list-style-type: none;  
   display:none; 
   position:absolute;
   top:70px;
   /*top:6em;*/
   /*left:0;*/
   /*margin-left:20px;*/  
   padding:0;
  /* right:auto; resets del ul superior */
   /*width:5em;  ancho de los dropdown */
}

#menu ul li {
    clear:both;
    height: 30px;
    width: 150px;
    margin:0 auto;
    padding:0;
    text-align: center; 
}


#menu ul li a { 
    padding:0;
    margin: auto auto;
    padding-top: 6px;!important 
    height: 30px;
    width: 150px;
    font-size:.9em;
   /*line-height:1.6em; */
  /* height: 10px;*/

}

 
#menu li:hover ul{
   display:block; 
}

#container {
    width: 822px;
    margin:0 auto;
    background: white;
}


footer {
    text-align: center;
    padding-top: 5px;
    margin:0 auto;
    height:80px;
    background: #b55481;
  

}

footer p {
    font-size: 9px;
    color:#CCC;
}

footer img {
    text-align: center;
    width: 100px;
    height: 30px;
    /*margin-left: 600px;
    margin-top: 8px;*/
    

}