div.blue {
    margin: 0px;
    padding: 10px;
    border: 1px solid #bbb;
    display: inline-block;
    /* older browsers */
    background: #D0FFFF;
    box-shadow: 0px 0px 3px 3px #dddddd;
    border-radius: 5px;
    background: -webkit-linear-gradient(left, #D0FFFF, #F0FFFF);
    width: 100%;
    margin-bottom: 10px;
}
/*@media (min-width: 768px) {
div.blue{margin:5px;}
div.yellow{margin:5px;}
div.pink{margin:5px;}
div.green{margin:5px;}
}*/
div.yellow {
    margin: 0px;
    padding: 10px;
    border: 1px solid #bbb;
    display: inline-block;
    background: #FFFFD0;
    box-shadow: 0px 0px 3px 3px #dddddd;
    border-radius: 5px;
    background: -webkit-linear-gradient(left, #FFFFD0, #FFFFF0);
    width: 100%;
    margin-bottom: 10px;
}
div.red {
    margin: 5px;
    padding: 10px;
    border: 1px solid #800517;
    display: inline-block;
    color: White;
    /* older browsers */
    background: #800517;
    /* CSS3 */
    box-shadow: 0px 0px 3px 3px #dddddd;
    border-radius: 5px;
    /* Webkit (Chrome etc) */
    background: -webkit-linear-gradient(left, #800517, #800517);
    -webkit-box-shadow: 0px 0px 3px 3px #dddddd;
    -webkit-border-radius: 5px;
    /* Opera */
    background-image: -o-linear-gradient(left,#800517, #800517);
    /* FF3.6+ */
    background: -moz-linear-gradient(left, #800517, #800517);
    -moz-box-shadow: 0px 0px 3px 3px #dddddd;
    -moz-border-radius: 5px;
    /* IE6-8 */
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#800517', endColorstr='#800517', GradientType=1) progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=#dddddd);
    width: 100%;
}
div.green {
    margin: 0px;
    padding: 10px;
    border: 1px solid #eee;
    display: inline-block;
    background: #BBFFBB;
    box-shadow: 0px 0px 3px 3px #dddddd;
    border-radius: 5px;
    background: -webkit-linear-gradient(left, #BBFFBB, #FFFFFF);
    width: 100%;
    margin-bottom: 10px;
}
div.pink {
    margin: 0px;
    padding: 10px;
    border: 1px solid #bbb;
    display: inline-block;
    background: #F0CBFE;
    box-shadow: 0px 0px 3px 3px #dddddd;
    border-radius: 5px;
    background: -webkit-linear-gradient(left, #F0CBFE, #FFFFFF);
    width: 100%;
    margin-bottom: 10px;
}
div.white {
    margin: 0px;
    padding: 10px;
    border: 1px solid #bbb;
    display: inline-block;
    background: White;
    box-shadow: 0px 0px 3px 3px #dddddd;
    border-radius: 5px;
    width: 100%;
    margin-bottom: 10px;
}
div.sharp{-webkit-box-shadow:0px 0px 3px 3px #ccc; 
/*    margin:5px; padding:10px;*/border: 1px solid #bbb;
    /*display:inline-block;*/}
div.fuzzy{-webkit-box-shadow:0px 0px 3px 3px #ddd; 
    /*margin:5px;padding:10px;*/
    border: 1px solid #eee;
    /*display:inline;*/
}
div.interactive:hover{}

div.responsiveWithChildren{
    display: flex;
    flex-wrap: wrap;
}
div.responsiveWithChildren > div{
    padding: 2px;
}