body {
	margin: auto;
	padding: 0;
	width: 738px;
	font: 14px/21px Helvetica, sans-serif;
}
pre {
	overflow: auto;
}
#article-shapes th {
	text-align: left;
}
#article-shapes td {
	height: 50px;
}
.shape {
	display: block;
}
.square {
	width: 100px;
	height: 100px;
	background: #b30;
}
.rectangle {
	width: 100px;
	height: 50px;
	background: #b30;
}
.circle {
	background: #b30;
	border-radius: 25px;
	width: 100px;
	height: 100px;
}
.oval {
	background: #b30;
	width: 100px;
	height: 50px;
	border-radius: 50px / 25px;
}
.triangle {
	width: 0;
	height: 0;
}
.triangle.up {
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid #b30;
}
.triangle.down {
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid #b30;
}
.triangle.left {
	border-top: 50px solid transparent;
	border-right: 100px solid #b30;
	border-bottom: 50px solid transparent;
}
.triangle.right {
	border-top: 50px solid transparent;
	border-left: 100px solid #b30;
	border-bottom: 50px solid transparent;
}
.triangle.topleft {
	border-top: 100px solid #b30; 
	border-right: 100px solid transparent;
}
.triangle.topright {
	border-top: 100px solid #b30; 
	border-left: 100px solid transparent;
}
.triangle.bottomleft {
	border-bottom: 100px solid #b30; 
	border-right: 100px solid transparent; 
}
.triangle.bottomright {
	border-bottom: 100px solid #b30; 
	border-left: 100px solid transparent;
}
.shortcut {
	position: relative;
	width: 0;
	height: 0;
	border-top: 9px solid transparent;
	border-right: 9px solid #b30;
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
	-o-transform: rotate(10deg);
}
.shortcut:after {
	content: '';
	position: absolute;
	border: 0 solid transparent;
	border-top: 3px solid #b30;
	border-radius: 20px 0 0 0;
	top: -12px;
	left: -9px;
	width: 12px;
	height: 12px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}
.trapez {
	border-bottom: 50px solid #b30;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	height: 0;
	width: 50px;
}
.parallelogram {
	width: 100px;
	height: 60px;
	-webkit-transform: skew(20deg);
	-moz-transform: skew(20deg);
	-o-transform: skew(20deg);
	background: #b30;
}
.star-six {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid #b30;
	position: relative;
}
.star-six:after {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid #b30;
	position: absolute;
	content: '';
	top: 30px;
	left: -50px;
}
.star-five {
	margin: 25px 0;
	position: relative;
	display: block;
	color: #b30;
	width: 0px;
	height: 0px;
	border-right: 100px solid transparent;
	border-bottom: 70px  solid #b30;
	border-left: 100px solid transparent;
	-moz-transform: rotate(35deg);
	-webkit-transform: rotate(35deg);
	-ms-transform: rotate(35deg);
	-o-transform: rotate(35deg);
}
.star-five:before {
	border-bottom: 80px solid #b30;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	position: absolute;
	height: 0;
	width: 0;
	top: -45px;
	left: -65px;
	display: block;
	content: '';
	-webkit-transform: rotate(-35deg);
	-moz-transform: rotate(-35deg);
	-ms-transform: rotate(-35deg);
	-o-transform: rotate(-35deg);
}
.star-five:after {
	position: absolute;
	display: block;
	color:#b30;
	top: 3px;
	left: -105px;
	width: 0px;
	height: 0px;
	border-right: 100px solid transparent;
	border-bottom: 70px solid #b30;
	border-left: 100px solid transparent;
	-webkit-transform: rotate(-70deg);
	-moz-transform: rotate(-70deg);
	-ms-transform: rotate(-70deg);
	-o-transform: rotate(-70deg);
	content: '';
}
.pentagon {
	position: relative;
	width: 54px;
	border-width: 50px 18px 0;
	border-style: solid;
	border-color:#b30 transparent;
}
.pentagon:before {
	content: "";
	position: absolute;
	height: 0;
	width: 0;
	top: -85px;
	left: -18px;
	border-width: 0 45px 35px;
	border-style: solid;
	border-color: transparent transparent#b30;
}
.hexagon {
	width: 100px;
	height: 55px;
	background: #b30;
	position: relative;
}
.hexagon:before {
	content: "";
	position: absolute;
	top: -25px; 
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 25px solid #b30;
}
.hexagon:after {
	content: "";
	position: absolute;
	bottom: -25px; 
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 25px solid #b30;
}
.octagon {
	width: 100px;
	height: 100px;
	background: #b30;
	position: relative;
}
.octagon:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;    
	border-bottom: 29px solid #b30;
	border-left: 29px solid #fff;
	border-right: 29px solid #fff;
	width: 42px;
	height: 0;
}
.octagon:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;    
	border-top: 29px solid #b30;
	border-left: 29px solid #fff;
	border-right: 29px solid #fff;
	width: 42px;
	height: 0;
}     
.heart {
	position: relative;
	width: 100px;
	height: 90px;
}
.heart:before,
.heart:after {
	position: absolute;
	content: "";
	left: 50px;
	top: 0;
	width: 50px;
	height: 80px;
	background: red;
	-moz-border-radius: 50px 50px 0 0;
	border-radius: 50px 50px 0 0;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transform-origin: 0 100%;
	-moz-transform-origin: 0 100%;
	-ms-transform-origin: 0 100%;
	-o-transform-origin: 0 100%;
	transform-origin: 0 100%;
}
.heart:after {
	left: 0;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-ms-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin :100% 100%;
}      
.infinity {
	position: relative;
	width: 100px;
	height: 48px;
}
.infinity:before,
.infinity:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 28px;
	height: 28px;    
	border: 9px solid #b30;
	-moz-border-radius: 23px 23px 0 23px;
	border-radius: 23px 23px 0 23px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.infinity:after {
	left: auto;
	right: 0;
	-moz-border-radius: 23px 23px 23px 0;
	border-radius: 23px 23px 23px 0;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}     
.romb {
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-bottom-color:#b30;
	position: relative;
	top: -50px;
}
.romb:after {
	content: '';
	position: absolute;
	left: -50px; 
	top: 50px;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top-color:#b30;
}      
.shield {
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-bottom: 20px solid #b30;
	position: relative;
	top: -50px;
}
.shield:after {
	content: '';
	position: absolute;
	left: -50px; top: 20px;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top: 70px solid #b30;
}  
.diamond-cut {
	border-style: solid;
	border-color: transparent transparent#b30 transparent;
	border-width: 0 25px 25px 25px;
	height: 0;
	width: 50px;
	position: relative;
	margin: 20px 0 50px 0;
}
.diamond-cut:after {
	content: '';
	position: absolute;
	top: 25px;
	left: -25px;
	width: 0;
	height: 0;
	border-style: solid;
	border-color:#b30 transparent transparent transparent;
	border-width: 70px 50px 0 50px;
}
.egg {
	display: block;
	width: 100px; 
	height: 140px;
	background-color: #b30;
	-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.pacman {
	width: 0px;
	height: 0px;
	border-right: 60px solid transparent;
	border-top: 60px solid #b30;
	border-left: 60px solid #b30;
	border-bottom: 60px solid #b30;
	border-top-left-radius: 60px;
	border-top-right-radius: 60px;
	border-bottom-left-radius: 60px;
	border-bottom-right-radius: 60px;
}
.dymek {
	width: 120px; 
	height: 80px; 
	background: #b30;
	position: relative;
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border-radius: 10px;
}
.dymek:before {
	content: '';
	position: absolute;
	right: 100%;
	top: 26px;
	width: 0;
	height: 0;
	border-top: 13px solid transparent;
	border-right: 26px solid #b30;
	border-bottom: 13px solid transparent;
}
.badge-twelve {
	background: #b30;
	width: 80px;
	height: 80px;
	position: relative;
	text-align: center;
}
.badge-twelve:before, .badge-twelve:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 80px;
	width: 80px;
	background: #b30;
}
.badge-twelve:before {
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-o-transform: rotate(30deg);
}
.badge-twelve:after {
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	-o-transform: rotate(60deg);
}
.badge-eight {
	background: #b30;
	width: 80px;
	height: 80px;
	position: relative;
	text-align: center;
	-webkit-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	-ms-transform: rotate(20deg);
	-o-transform: rotate(20eg);
}
.badge-eight:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 80px;
	width: 80px;
	background: #b30;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-o-transform: rotate(135deg);
}
.badge-ribbon {
	position: relative;
	background: #b30;
	height: 100px;
	width: 100px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}
.badge-ribbon:before,
.badge-ribbon:after {
	content: '';            
	position: absolute;            
	border-bottom: 70px solid #b30;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	top: 70px;
	left: -10px;
	-webkit-transform: rotate(-140deg);
	-moz-transform: rotate(-140deg);
	-ms-transform: rotate(-140deg);
	-o-transform: rotate(-140deg); 
}
.badge-ribbon:after {
	left: auto;
	right: -10px;
	-webkit-transform: rotate(140deg);
	-moz-transform: rotate(140deg);
	-ms-transform: rotate(140deg);
	-o-transform: rotate(140deg); 
}  
.ying-yang{
	width: 96px;
	height: 48px;
	background: #fff;
	border-color:#b30;
	border-style: solid;
	border-width: 2px 2px 50px 2px;
	border-radius: 100%;
	position: relative;
}
.ying-yang:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	background: #fff;
	border: 18px solid #b30;
	border-radius: 100%;
	width: 12px;
	height: 12px;
}
.ying-yang:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: #b30;
	border: 18px solid #fff;
	border-radius:100%;
	width: 12px;
	height: 12px;
} 
.space-invader{
	box-shadow:
		0 0 0 1em #b30, 
		0 1em 0 1em #b30, 
		-2.5em 1.5em 0 .5em #b30, 
		2.5em 1.5em 0 .5em #b30, 
		-3em -3em 0 0 #b30, 
		3em -3em 0 0 #b30, 
		-2em -2em 0 0 #b30, 
		2em -2em 0 0 #b30, 
		-3em -1em 0 0 #b30, 
		-2em -1em 0 0 #b30, 
		2em -1em 0 0 #b30, 
		3em -1em 0 0 #b30, 
		-4em 0 0 0 #b30, 
		-3em 0 0 0 #b30, 
		3em 0 0 0 #b30, 
		4em 0 0 0 #b30, 
		-5em 1em 0 0 #b30, 
		-4em 1em 0 0 #b30, 
		4em 1em 0 0 #b30, 
		5em 1em 0 0 #b30, 
		-5em 2em 0 0 #b30, 
		5em 2em 0 0 #b30, 
		-5em 3em 0 0 #b30, 
		-3em 3em 0 0 #b30, 
		3em 3em 0 0 #b30, 
		5em 3em 0 0 #b30, 
		-2em 4em 0 0 #b30, 
		-1em 4em 0 0 #b30, 
		1em 4em 0 0 #b30, 
		2em 4em 0 0 #b30; 
	background: #b30;
	width: 1em;
	height: 1em;
	overflow: hidden;
	margin: 50px 0 70px 65px;
}
.tv-screen {
	position: relative;
	width: 100px;
	height: 75px;
	margin: 20px 0;
	background: #b30;
	border-radius: 50% / 10%;
	color: white;
	text-align: center;
	text-indent: .1em;
}
.tv-screen:before {
	content: '';
	position: absolute;
	top: 10%;
	bottom: 10%; 
	right: -5%; 
	left: -5%;
	background: inherit;
	border-radius: 5% / 50%;
}  
.shape.diamond {
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-bottom-color: #b30;
	position: relative;
	top: -50px;
}
.shape.diamond:after {
	content: '';
	position: absolute;
	left: -50px; 
	top: 50px;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top-color: #b30;
}
#logo {
	width: 500px;
	height: 500px;
	padding: 25px;
	position: relative;
	background: #b30;
}
#logo * {
	display: block;
	position: absolute;
	background: #fff;
}
#logo .star-five {
	background: #b30;
	margin: 25px 0;
	width: 0;
	height: 0;
	top: 50px;
	border-right: 100px solid transparent;
	border-bottom: 70px  solid #fff;
	border-left: 100px solid transparent;
	-moz-transform: rotate(35deg);
	-webkit-transform: rotate(35deg);
	-ms-transform: rotate(35deg);
	-o-transform: rotate(35deg);
}
#logo .star-five:before {
	content: '';
	height: 0;
	left: -60px;
	position: absolute;
	top: -44px;
	width: 0;
	border-bottom: 80px solid #fff;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	-moz-transform: rotate(-35deg);
}
#logo .star-five:after {
	content: '';
	height: 0;
	left: -105px;
	position: absolute;
	top: 4px;
	width: 0;
	border-right: 100px solid transparent;
	border-bottom: 70px solid #fff;
	border-left: 100px solid transparent;
	-webkit-transform: rotate(-70deg);
	-moz-transform: rotate(-70deg);
	-ms-transform: rotate(-70deg);
	-o-transform: rotate(-70deg);
}
#logo .star-five .circle {
	background: #b30;
	height: 70px;
	width: 70px;
	border-radius: 35px;
	z-index: 1;
	left: -36px;
	top: 3px;
}
#logo .bar {
	width: 500px;
	height: 35px;
}
#logo .p-letter.column {
	left: 275px;
	width: 35px;
	height: 300px;
}
#logo .p-letter.horseshoe {
	-moz-transform: rotate(-90deg);
	height: 226px;
	right: 46px;
	top: 4px;
	width: 185px;
}
#logo .p-letter.horseshoe:after {
	background: #b30;
	content: '';
	height: 183px;
	position: absolute;
	right: 30px;
	top: 12px;
	width: 123px;
}
#logo .n-letter.column {
	bottom: 25px;
	left: 25px;
	height: 200px;
	width: 35px;
}
#logo .n-letter.bar {
	bottom: 225px;
}
#logo .n-letter.bar + .n-letter.column {
	right: 25px;
	left: auto;
}