
﻿#collage hr{
    border:none;
    border-top:2px solid #f5f2f2;
    height:1px;
}

#collage #playPanel {
  
    padding:10px 0px;
    margin: 10px auto;
    max-width:800px;
    width:95%;
}

#collage #actualImageBox {
    display: inline-block;
    font-size:0.8em;
    margin: 10px 10px;
    vertical-align: top;
    width:280px;
}

#collage #stepBox, #collage #timeBox {
    display:inline-block;
    width:48%;
}

#collage #stepBox div {
  
    display:inline-block;
    padding:1px 4px;
    margin: 0px auto;
    max-width:800px;
}

#collage img#actualImage{
    border:2px solid #a46;
    height:280px;
    width:280px;
}

#collage #sortable {
    
    list-style-type: none;
    display: inline-block;
    margin: 10px;
    padding: 0;
    width: 600px;
}

    #collage #sortable li {
        background-size: 600% 600%;
        border: none;
        cursor: pointer;
        margin: 0;
        padding: 0;
        float: left;
        
    }

#collage button  {

    border:1px solid #cce;
    display: inline;
    font-size: 14px;
    height: auto;
    width: auto;
    padding: 3px 8px;
}

#container {
	text-align: justify;
	}
#container > div {
	width: 100px; /* Declare your value. Can be in relative units. */
	display: inline-block;
	vertical-align: top;

	/* IE fix. */
	*display: inline;
	zoom: 1;
	}
#container:after {
	content: "";
	width: 100%;
	display: inline-block;
    }
    


.row{
    height: auto;
    overflow: auto;
}

.row>.col{
    
    float:left;
    width:45%;
}
#pi {
    
    margin: 0 auto; 
}

.row2>.col{
    
    padding-left:50px;
      float: left;
      width: 45%;
}
.row3>.col{
    padding-left:30px;
      float: left;
      width: 30%;
}
.row4>.col{
    padding-left:10px;
      float: left;
      width: 23%;
}

.row5>.col2{
	display:inline-block;
    *display:inline; /* for IE7*/
    *zoom:1;/* for IE7*/
    margin-right:10px;
    
      float: left;
    
}


div#o0,div#o1, div#o2,div#o3{
border-radius: 25px;
    
    background-position: left top;
    background-repeat: no-repeat;
    background-size:contain;
    
    
    padding: 20px; 

    
}    



.pi{
    border-radius: 25px;
    
    background-position: left top;
    background-repeat: no-repeat;
    background-size:contain;
    
    
    width: 400px;
    height: 400px; 
    
}


.lugares{
    border-radius: 25px;
    background: url("../images/lugars.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size:cover;
    padding: 20px; 
    width: 400px;
    height: 210px; 
    align: center;
     -moz-opacity: 0.60;
    opacity:.60;
    filter: alpha(opacity=60);
}
.personajes{
    border-radius: 25px;
    background: url("../images/personajes.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size:cover;
    padding: 20px; 
    width: 400px;
    height: 210px;
     -moz-opacity: 0.60;
    opacity:.60;
    filter: alpha(opacity=60);
}

.personalizado{
    border-radius: 25px;
    background: url("../images/figuras.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size:cover;
    padding: 20px; 
      width: 400px;
    height: 210px; 
     -moz-opacity: 0.60;
    opacity:.60;
    filter: alpha(opacity=60);
}

.animals{
    border-radius: 25px;
    background: url("../images/animales.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size:cover;
    padding: 20px; 
      width: 400px;
    height: 210px; 
     -moz-opacity: 0.60;
    opacity:.60;
    filter: alpha(opacity=60);
}


.animals:hover {
    opacity:1;   
    -moz-opacity: 1.00;
    
    filter: alpha(opacity=100);

}
.lugares:hover {
    opacity:1;   
    -moz-opacity: 1.00;
    
    filter: alpha(opacity=100);

}
.personalizado:hover {
    opacity:1;   
    -moz-opacity: 1.00;
    
    filter: alpha(opacity=100);

}
.personajes:hover {
    opacity:1;   
    -moz-opacity: 1.00;
    
    filter: alpha(opacity=100);

}

.space { height: 1px; width: 100%;margin-top: 15px;}
#space { width: 50px; margin-top: 15px;}
    
.p1{


    
}

p{
    text-align: center;
    vertical-align: middle;
    line-height: 150px;
    /*color:#428bf7;*/
    font-size:50px;
	color:#00c3ff;
    
}