pre {
	width:60%;
	float:right;
}
.clear{clear:both;}
.space {
	height:20px;
}
#circle { 
   width: 140px;
   height: 140px;
   background: blue; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
   float:left;
}
#square {
   width: 140px; 
   height: 140px; 
   background: blue;
   float:left; 
}
#oval {
   width: 155px; 
   height: 80px; 
   background: blue; 
   -moz-border-radius: 80px / 40px; 
   -webkit-border-radius: 80px / 40px; 
   border-radius: 80px / 40px;
   float:left;
}
#up-triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid blue; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
   float:left; 
}
#down-triangle { 
   width: 0; 
   height: 0;
   border-top: 120px solid blue;
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
   float:left; 
}
#left-triangle {
   width: 0;
   height: 0;
   border-right: 100px solid blue;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
   float:left; 
}
#right-triangle {
   width: 0;
   height: 0;
   border-left: 100px solid blue;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
   float:left; 
}
#trapezium {
   height: 0; 
   width: 80px;
   border-bottom: 80px solid blue;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
   float:left; 
   margin-top:20px;
}
#diamond {
   width: 80px; 
   height: 80px; 
   background: blue;
   margin: 3px 0 0 30px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /* Rotate Origin */
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
   float:left; 
   margin-top:40px;
   margin-left:60px;
}
#rectangle {
   width: 140px; 
   height: 80px;
   background: blue;
   float:left; 
}
#parallelogram {
   width: 130px; 
   height: 75px;
   background: blue;
   /* Skew */
   -webkit-transform: skew(20deg); 
   -moz-transform: skew(20deg); 
   -o-transform: skew(20deg);
   transform: skew(20deg);
   float:left; 
   margin-left:20px;
}
#twelve-point-star {
   height: 100px;
   width: 100px;
   background: blue;
   position: absolute;
   float:left; 
   margin-top:20px;
   margin-left:20px;
}
#twelve-point-star:before {
   height: 100px;
   width: 100px;
   background: blue;
   content:"";
   position: absolute;
   /* Rotate */
   -moz-transform: rotate(30deg);
   -webkit-transform: rotate(30deg);
   -ms-transform: rotate(30deg);
   -o-transform: rotate(30deg);
   transform: rotate(30deg);
   float:left; 
}
#twelve-point-star:after {
   height: 100px;
   width: 100px;
   background: blue;
   content:"";
   position: absolute;
   /* Rotate */
   -moz-transform: rotate(-30deg);
   -webkit-transform: rotate(-30deg);
   -ms-transform: rotate(-30deg);
   -o-transform: rotate(-30deg);
   transform: rotate(-30deg);
}
#six-point-star {
   position: absolute;
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-bottom: 80px solid blue;
   float:left; 
}
#six-point-star:after {
   content:"";
   position: absolute;
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-top: 80px solid blue;
   margin: 30px 0 0 -50px;
}
#octagon {
   width: 100px; 
   height: 100px; 
   background: blue;
   float:left; 
   position:relative;
}
#octagon:before {
   height: 0;
   width: 40px;
   content:"";
   position: absolute; 
   border-bottom: 30px solid blue;
   border-left: 30px solid white; 
   border-right: 30px solid white; 
}
#octagon:after {
   height: 0;
   width: 40px;
   content:"";
   position: absolute; 
   border-top: 30px solid blue; 
   border-left: 30px solid white;  
   border-right: 30px solid white; 
   margin: 70px 0 0 0;
}

#speech-bubble {
   width: 120px; 
   height: 80px; 
   background: blue;
   position: absolute;
   -moz-border-radius: 10px; 
   -webkit-border-radius: 10px; 
   border-radius: 10px;
   float:left; 
   margin-left:20px;
}
#speech-bubble:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid blue;
   border-bottom: 13px solid transparent;
   margin: 13px 0 0 -25px;
}
#egg {
   display:block;
   width:126px; 
/* width has to be 70% of height */
/* could use width:70%; in a square container */
   height:180px;
   background-color:blue;

/* beware that Safari needs actual
 px for border radius (bug) */
   -webkit-border-radius:63px 63px 63px 63px/
   108px 108px 72px 72px;
   /* fails in Safari, but overwrites in Chrome */
   border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
   float:left; 
}
#eq-triangle {
  width: 0;
  height: 0;
  border-bottom: 104px solid blue;
  /* 104 = 120 * 0.866 */
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
   float:left; 
}
#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid blue;
  border-left: 60px solid blue;
  border-bottom: 60px solid blue;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
   float:left; 
}
#biohazard {
  width: 0;
  height: 0;
  border-bottom: 60px solid black;
  border-top: 60px solid black;
  border-left: 60px solid yellow;
  border-right: 60px solid yellow;
  -moz-border-radius: 60px; 
  -webkit-border-radius: 60px; 
  border-radius: 60px;
   float:left; 
}
#heart { 
	position: relative;
   float:left; 
}
#heart:before, #heart:after {
	position: absolute;
  content: "";
	left: 70px; top: 0;
	width: 70px;
	height: 115px;
	background: blue;
	-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: 164px; 
	height: 80px; 
	float:left;
} 
#infinity:before, #infinity:after {
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 40px; 
    height: 40px; 
    border: 20px solid blue; 
    -moz-border-radius: 50px 50px 0 50px; 
    border-radius: 50px 50px 0 50px; 
    -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: 50px 50px 50px 0; 
	border-radius: 50px 50px 50px 0; 
	-webkit-transform: rotate(45deg); 
	-moz-transform: rotate(45deg); 
	-ms-transform: rotate(45deg); 
	-o-transform: rotate(45deg); 
	transform: rotate(45deg); 
} 
#triangle-topleft { 
	width: 0; 
	height: 0; 
	border-top: 100px solid blue; 
	border-right: 100px solid transparent; 
	float:left;
}
#triangle-topright { 
	width: 0; 
	height: 0; 
	border-top: 100px solid blue; 
	border-left: 100px solid transparent; 
	float:left;
}
#triangle-bottomleft { 
	width: 0; 
	height: 0; 
	border-bottom: 100px solid blue; 
	border-right: 100px solid transparent;
	float:left; 
}
#triangle-bottomright { 
	width: 0; 
	height: 0; 
	border-bottom: 100px solid blue; 
	border-left: 100px solid transparent; 
	float:left;
}
#yin-yang {
	width: 96px;
	height: 48px;
	background: #eee;
	border-color: red;
	border-style: solid;
	border-width: 2px 2px 50px 2px;
	border-radius: 100%;
	position: relative;
	float:left;
	display:inline-block;
}

#yin-yang:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	background: #eee;
	border: 18px solid red;
	border-radius: 100%;
	width: 12px;
	height: 12px;
}

#yin-yang:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: red;
	border: 18px solid #eee;
	border-radius:100%;
	width: 12px;
	height: 12px;
}
iframe {width:150px!important;height:150px !important;float:left !important}