body {
	font-family:Arial, Helvetica, sans-serif;
}

article{
	display:flex;	
}

article >* {
	border: 1px solid #666;
	padding: 10px;
	margin: 10px;
}

section section {
	min-height: 200px;	
}

.bsp1 {
	background-image: linear-gradient(top, #C00, #FC0); /* W3C Standard */
	background-image: -moz-linear-gradient(top, #C00, #FC0); /* Mozilla */
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#C00), to(#FC0)); /* Chrome , Safafi u.a. */
}
.bsp2 {
	background-image: radial-gradient(center, #C00, #FC0); /* W3C Standard */
	background-image: -moz-radial-gradient(center, #C00, #FC0); /* Mozilla */
	background-image: -webkit-radial-gradient(center, #C00, #FC0); /* Chrome , Safafi u.a. */
}

.bsp4 {
	background-image: linear-gradient(left, purple, blue, green, yellow, red, purple);	/* W3C Standard */
	background-image: -moz-linear-gradient(left, purple, blue, green, yellow, red, purple);	/* Mozilla */
	background-image: -webkit-gradient(linear, 90% 0, 0 100%, from(purple), color-stop(20%, blue), color-stop(40%, green), color-stop(60%, yellow), color-stop(80%, red), to(purple)); /* Chrome , Safafi u.a. */
}

.bsp-button {
background: -moz-linear-gradient(270deg, rgba(66,66,66,1) 0%, rgba(66,66,66,1) 10%, rgba(255,255,255,1) 12%, rgba(84,84,84,1) 86%, rgba(0,20,20,1) 89%, rgba(0,20,20,1) 100%); /* ff3.6+ */
background: -webkit-linear-gradient(270deg, rgba(66,66,66,1) 0%, rgba(66,66,66,1) 10%, rgba(255,255,255,1) 12%, rgba(84,84,84,1) 86%, rgba(0,20,20,1) 89%, rgba(0,20,20,1) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(270deg, rgba(66,66,66,1) 0%, rgba(66,66,66,1) 10%, rgba(255,255,255,1) 12%, rgba(84,84,84,1) 86%, rgba(0,20,20,1) 89%, rgba(0,20,20,1) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(270deg, rgba(66,66,66,1) 0%, rgba(66,66,66,1) 10%, rgba(255,255,255,1) 12%, rgba(84,84,84,1) 86%, rgba(0,20,20,1) 89%, rgba(0,20,20,1) 100%); /* ie10+ */
background: linear-gradient(180deg, rgba(66,66,66,1) 0%, rgba(66,66,66,1) 10%, rgba(255,255,255,1) 12%, rgba(84,84,84,1) 86%, rgba(0,20,20,1) 89%, rgba(0,20,20,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#424242', endColorstr='#001414',GradientType=0 ); /* ie6-9 */

}
.bsp-button:hover {
background: -moz-linear-gradient(270deg, rgba(66,66,66,1) 0%, rgba(66,66,66,1) 10%, rgba(207,207,207,1) 13%, rgba(84,84,84,1) 86%, rgba(0,20,20,1) 89%, rgba(0,20,20,1) 100%); /* ff3.6+ */
background: -webkit-linear-gradient(270deg, rgba(66,66,66,1) 0%, rgba(66,66,66,1) 10%, rgba(207,207,207,1) 13%, rgba(84,84,84,1) 86%, rgba(0,20,20,1) 89%, rgba(0,20,20,1) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(270deg, rgba(66,66,66,1) 0%, rgba(66,66,66,1) 10%, rgba(207,207,207,1) 13%, rgba(84,84,84,1) 86%, rgba(0,20,20,1) 89%, rgba(0,20,20,1) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(270deg, rgba(66,66,66,1) 0%, rgba(66,66,66,1) 10%, rgba(207,207,207,1) 13%, rgba(84,84,84,1) 86%, rgba(0,20,20,1) 89%, rgba(0,20,20,1) 100%); /* ie10+ */
background: linear-gradient(180deg, rgba(66,66,66,1) 0%, rgba(66,66,66,1) 10%, rgba(207,207,207,1) 13%, rgba(84,84,84,1) 86%, rgba(0,20,20,1) 89%, rgba(0,20,20,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#424242', endColorstr='#001414',GradientType=0 ); /* ie6-9 */


}