.colorwrap
{
height: 0px;
padding-left: 12px;
padding-right: 12px;
padding-bottom: 0px;
padding-top: 0px;
background: rgba(255, 255, 255, 1);
color: rgba(25,25,25,1);
position: relative;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.colorwrap.colorwrapopen
{
height: 24px;
padding-left: 12px;
padding-right: 12px;
padding-bottom: 12px;
padding-top: 12px;
background: rgba(255, 255, 255, 1);
color: rgba(25,25,25,1);
font-size: 13px;
font-weight: inherit;
font-family: Verdana, Geneva, sans-serif;
font-style: inherit;
text-decoration: inherit;
text-align: left;
line-height: 1.25em;
z-index : 2;
position: relative;
}

#color1
{
position: relative;
border: 2px rgba(255,255,255,1) solid;
float:left;
width: 22%;
height:100%;
background-color: #369ab3;	
}

#color2
{
position: relative;
border: 2px rgba(255,255,255,1) solid;
float:left;
width: 22%;
height:100%;
background-color: #244166;	
}

#color3
{
position: relative;
border: 2px rgba(255,255,255,1) solid;
float:left;
width: 22%;
height:100%;
background-color: #f4f2f0;	
}

#color4
{
position: relative;
border: 2px rgba(255,255,255,1) solid;
float:left;
width: 22%;
height:100%;
background-color: #000000;	
}