View difference between Paste ID: ejYu9d1h and 06Z7MSEa

        					!!!!!!!!!!!!Read It!!!!!!!!!!!!
 
                                                 (⊙.⊙(☉_☉)⊙.⊙)
 
 CAN'T EMPHASIZE THIS ENOUGH:  There are div ids/classes, tables (table, tr, td) and img classes in this layout.  Be VERY, VERY, VERY careful not to drop off any of the coding.
 
 ............................
 
 IMAGES
 
 For the sake of simplicity, make all of your images 265px width by 265px height.  The layout will re-size them for you.
 
 ............................
 
 MUSIC PLAYER
 
 REPLACE MY MUSIC PLAYER WITH YOUR OWN.
 
 ............................
 
 
 FOR ROLEPLAYER.ME USERS:
 
 For the below text font classes and all of the headers (1, 2, 3, etc) and lyrics, please note the following:
 I code for ALL sites.  Not every website will allow headers to be placed as <h1>Header 1</h1>.  For that reason, I turn them into font classes with a period in front (.h1) in About Me and script them in the tables as I have done below.
 
 <font class="h1">Header 1</font>
 
 If you are on a website like RPer.me that allows regular header, underline, strong, etc coding, you can just use regular header coding for all of the header, lyric, special text labels like so:
 <h1>Header</h1> <strike>Strike</strike> etc..
 
 OR just leave them as they are.  They will work for you either way.
 
 
 ///////////////////////////////////////////////////
 
 
 
                         Don't forget to replace the XXXXX with your friend ID number.
 
                                                      (>‿◠)✌
 
 
                 *****************************SAVE YOUR WORK AS YOU GO.*******************************
 
 
-@import url(http://fonts.googleapis.com/css?family=Abel|Quicksand:700|IM+Fell+English:400,400italic|Alfa+Slab+One|Playfair+Display:400,700italic|Shadows+Into+Light|Raleway:400,900|Yanone+Kaffeesatz:400,300|Oswald|Roboto+Condensed:400,700);
+
 
 -----------------------------ABOUT ME---------------------------------
 
 <style type="text/css">
 @import url(http://fonts.googleapis.com/css?family=Abel|Quicksand:700|IM+Fell+English:400,400italic|Alfa+Slab+One|Playfair+Display:400,700italic|Anton:400|Shadows+Into+Light|Raleway:400,900|Yanone+Kaffeesatz:400,300|Oswald|Dynalight|Roboto+Condensed:400,700);
 
-body {
+
-background-color:f4f4f4;
+
-background-image:url(http://i58.tinypic.com/90oh3r.jpg);
+
 .vicarious { Structure }
 
 body {
 background-color:242424;
 background-image:url();
 background-repeat:repeat;
 background-attachment:fixed;
 background-position:center center;
 }
 
 table, tr, td {background-color:transparent;}
 
  .vicarious{ Google Chrome Scrollbar }
 ::-webkit-scrollbar {width: 10px;}
 ::-webkit-scrollbar-track {border: 1px solid #222222;background-color:transparent;}
 ::-webkit-scrollbar-thumb {border: 1px solid #222222;background-color:dadada;}
 
 .vicarious { text }
 
-color:212121;
+
 font-family:tahoma;
 font-size:7pt;
 line-height:100%;
 color:464646;
 padding:0px;
 margin:0px;
 text-decoration:none;
 text-transform:none;
-p:first-letter { font-size: 9pt; }
+
 
 p {text-align:justify;}
 p:first-line {  }
 p:first-letter { font-size: 9pt; }
-font-family:courier new;
+
-letter-spacing:-1pt;
+
-color:424242;
+
 font-family: 'Roboto Condensed', sans-serif;
 color:777777;
-i {
+
-font-family: 'Jolly Lodger', cursive;
+
 i {
 color:444444;
 }
 
 .u, u {
 color:666666;
 text-decoration:underline;
 }
 
-color:red;
+
 color:ffffff;
 text-decoration:line-through;
 }
 
-font-family:courier new;
+
 font-family:courier new;
-font-size: 8pt;
+font-size: 9pt;
 text-transform:uppercase;
-color:ffffff;
+color:F8F8F8;
-line-height:120%;
+text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
-padding:0px 7px 0px 7px;
+
 
 em {
 font-family:brush script mt;
 font-size:11pt;
- }
+color:F8F8F8;
 }
 
 .h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6, .h7, h7, .h8, h8, .h9, h9, .h10, h10, .h11, h11, .h12, h12, .one, one, .two, two, .three, three. small, big  {
-em {}
+
 margin:0px;
 }
 
 .cite {font-size:0px; color:transparent;display:block; height:0px;}
 
 .vicarious { Divs }
 
 #back, #back1, #back2, #linx, #namefield1, #namefield2, #bx1, #bx2,  #c1-5, #c6-7, #c8-10 {
-.blockquote {
+
 top:0%;
-text-align:justify;
+
-margin:5px 5px 5px 10px;
+
-padding: 5px 5px 5px 10px;
+
-border-left:2px solid #000000;
+background-color:transparent;
-height:auto;
+
-background: rgba(0, 0, 0, 0.1);
+
--moz-border-radius-topleft: 90px;
+
--webkit-border-top-left-radius: 90px;
+#back  {
- border-top-left-radius: 90px;
+
--moz-border-radius-topright: 5px;
+height:1090px;
--webkit-border-top-right-radius: 5px;
+
-border-top-right-radius: 5px;
+margin-left:-555px;
--moz-border-radius-bottomright: 5px;
+border-left:0px solid # ;
--webkit-border-bottom-right-radius: 5px;
+border-right:0px solid # ;
-border-bottom-right-radius: 5px;
+
--moz-border-radius-bottomleft: 90px;
+
--webkit-border-bottom-left-radius: 90px;
+#back1 {
-border-bottom-left-radius: 90px;
+background-image:url(http://i58.tinypic.com/4rx66w.jpg);
 background-repeat:no-repeat;
 margin-left:-524px;
 margin-top:110px;
 width:1033px;
 height:762px;
 }
 
 #back2 {
 margin-left:-484px;
-#links {
+margin-top:150px;
 width:946px;
-height:auto;
+height:675px;
 -webkit-border-radius: 15px;
-margin-left:525px;
+
 border-radius: 15px;
 border:4px solid #f3f3f3;
-bottom:0%;
+
 
 #linx {
-position:fixed;
+margin-left:-455px;
-overflow:none;
+margin-top:55px;
 width:500px;
 height:235px;
-#links a {
+transform: rotate(315deg) ;
 -webkit-transform: rotate(315deg) ;
-font-family: 'Oswald', sans-serif;
+-moz-transform: rotate(315deg) ;
-background-color:000000;
+-o-transform: rotate(315deg) ;
 -ms-transform: rotate(315deg) ;
 text-align:left;
 }
 
 #linx a {
 padding-right:5px;
 text-align:right;
-font-size:0pt;
+
 height:29px;
 line-height:29px;
-margin-bottom:5px;
+
-border-left:0px solid #000000;
+-moz-border-radius-topright: 90px;
 -webkit-border-top-right-radius: 90px;
 border-top-right-radius: 90px;
 -moz-border-radius-bottomright: 90px;
 -webkit-border-bottom-right-radius: 90px;
 border-bottom-right-radius: 90px;
 font-weight:light;
 font-size:7pt;
-#links:hover a {
+letter-spacing:1pt;
 font-family: 'Oswald', sans-serif;
 text-decoration:none;
 text-transform:uppercase;
 transition:All .6s ease-in-out .2s;
-#links a:hover {
+
-border-left:50px solid #000000;
+
 -o-transition:All .6s ease-in-out .2s;
 border-width: 4 4 4 15;
-#links a.mix1 {
+border-style:solid;
-background-color:626262;
+border-color:f3f3f3;
-border-left:0px solid #626262;
+color:C8C8C8 ;
 text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
 text-decoration:none;
-#links a.mix1:hover {
+
-border-left:50px solid #626262;
+
 #linx a.LK1 {width:300px; background-color:101010 ;}
 #linx a.LK2 {width:325px; background-color:202020 ;}
-#links a.mix2 {
+#linx a.LK3 {width:350px; background-color:303030 ;}
-background-color:4e4e4e;
+#linx a.LK4 {width:375px; background-color:404040 ;}
-border-left:0px solid #4e4e4e;
+#linx a.LK5 {width:400px; background-color:505050 ;}
 #linx a.LK6 {width:425px; background-color:606060 ;}
 
-#links a.mix2:hover {
+#linx a:hover {border-width: 4px 4px 4px 50px;}
-border-left:50px solid #4e4e4e;
+
 #namefield1, #namefield2 {
 margin-left: 45px;
-#links a.mix3 {
+width:415px;
-background-color:3a3a3a;
+
-border-left:0px solid #3a3a3a;
+
 background-color:transparent;
 padding-right:6px;
-#links a.mix3:hover {
+color:dedede;
-border-left:50px solid #3a3a3a;
+
 
 #namefield1 {
 margin-top:60px ;
-#links a.mix4 {
+padding-top:5px;
-background-color:272727;
+
-border-left:0px solid #272727;
+
 text-transform:none;
 font-size:35px;
-#links a.mix4:hover {
+font-family: 'Dynalight', cursive;
-border-left:50px solid #272727;
+font-style:italic;
 }
 
-#links a.mix5 {
+#namefield2 {
-background-color:111111;
+margin-top:85px ;
-border-left:0px solid #111111;
+padding-top:0px;
 height:55px;
 line-height:55px;
-#links a.mix5:hover {
+
-border-left:50px solid #111111;
+-webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 border: none;
 font-size:55px;
-#back, #name, #row1a, #row1b, #row2a, #row2b, #row3, #row4, #breaker1, #breaker2 {
+font-family: "Anton", Helvetica, sans-serif;
 color:ffffff;
 -o-text-overflow: clip;
 text-overflow: clip;
 text-shadow: 3px 3px 0 rgb(223,223,223) , 6px 6px 0 rgb(89,89,89) , 8px 8px 0 rgb(231,232,231) , 12px 12px 0 rgb(89,89,89) ;
 }
 
-background-color:f4f4f4;
+#bx1, #bx2 {
 width:528px;
 height:250px;
-#back {
+
 margin-left:-85px;
-height:3305px;
+
 
-margin-left:-555px;
+#bx1 {margin-top:225px;}
-background-color:f4f4f4;
+#bx2 {margin-top:485px;}
-border-left:5px solid #f4f4f4;
+
-border-right:5px solid #f4f4f4;
+#bx1 .img1, #bx2 .img1, #bx1 .title, #bx2 .title, #bx1 .about, #bx2 .about {
 position:absolute;
 background-color:transparent;
 }
-/* ROW1 */
+
 #bx1 .img1, #bx2 .img1, #bx1 .title, #bx2 .title {
-#row1a  {
+
-width:825px;
+
-height:750px;
+
-margin-left:-550px;
+
 
-border-right:4px double #000000;
+#bx1 .img1, #bx2 .img1 {
 margin-left:0px;
 width:50px;
-#name  {
+background-size: 50px 50px;
 }
-height:80px;
+
-margin-left:-550px;
+#bx1:hover .img1, #bx2:hover .img1 {
-margin-top:600px;
+-webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease;
-#name .h1, #name h1 {
+-webkit-filter: blur(10px);
-font-size:25px;
+
 
 #bx1 .title, #bx2 .title {
 margin-left:55px;
-font-style:italic;
+width:468px;
-padding-left:200px;
+
 display:block;
 text-align:right;
 padding:left:5px;
 line-height:50px;
 text-transform:none;
-#name .h2, #name h2 {
+
 color:e8e8e8;
 background-color:000000;
-line-height:35px;
+
 
-padding-left:5px;
+#bx1 .about, #bx2 .about {
 margin-left:55px;
 margin-top:55px;
 width:473px;
 height:195px;
-#row1b {
+
-width:271px;
+
-height:750px;
+
-margin-left:279px;
+.circle1, .circle2, .circle3, .circle4, .circle5, .circle6, .circle7, .circle8, .circle9, .circle10 {
 border:4px solid #f3f3f3;
 position:absolute;
-#row1a, #row1b {
+background-color:fafafa;
 overflow:hidden;
 }
 
-#row1b .title {
+.circle6:hover, .circle7:hover, .circle8:hover, .circle9:hover, .circle10:hover{
-height:60px;
+z-index:1000;
-margin:0px 3px;
+
 
 .circle1, .circle2, .circle3, .circle4, .circle5, .circle6, .circle7, .circle8, .circle9, .circle10, .circle1 .mask, .circle2 .img, .circle3 .img, .circle4 .img, .circle5 .img, .circle6 .img, .circle6 .mask {
 -webkit-border-radius: 360px;
-#row1b .h1, #row1b h1 {
+
-font-size: 14pt ;
+
-line-height:70%;
+
 
-color:121212;
+
 #c1-5 {
 margin-left:-545px;
 margin-top:170px;
-padding-top:15px;
+height:380px;
-font-style:italic;
+width:365px;
 }
 
-#row1b .h2, #row1b h2 {
+.circle1  {
-font-size:10pt;
+
-line-height:90%;
+
 background-size: 245px 245px;
-color:121212;
+margin-left:40px;
 margin-top:60px;
 }
-font-family: 'Quicksand', sans-serif;
+
-letter-spacing:5pt;
+.circle1  {
 -webkit-animation: cssAnimation 2s  ease-out 1.5s;
 -moz-animation: cssAnimation 2s ease-out 1.5s;
-#row1b .h3, #row1b h3 {
+-o-animation: cssAnimation 2s ease-out 1.5s;
-font-size:9pt;
+
-line-height:90%;
+@-webkit-keyframes cssAnimation {
 from { -webkit-transform: rotate(0deg);}
-color:efefef;
+to { -webkit-transform: rotate(2880deg);}
 }
 @-moz-keyframes cssAnimation {
 from { -moz-transform: rotate(0deg);}
-background-color:000000;
+to { -moz-transform: rotate(2880deg);}
-letter-spacing:2pt;
+
-padding:2px 0px;
+@-o-keyframes cssAnimation {
 from { -o-transform: rotate(0deg;);}
 to { -o-transform: rotate(2880deg);}
-#row1b img {
+
 
-height:265px;
+.circle1:hover {
-margin:5px 3px;
+
 -webkit-transition:All .6s ease-in-out .2s;
 -moz-transition:All .6s ease-in-out .2s;
 -o-transition:All .6s ease-in-out .2s;
-#row1b .about {
+
-height:375px;
+
-margin:0px 3px;
+.circle1:hover, .circle1:hover .inner  {
-padding:5px;
+-moz-transform: rotate(2880deg);
 -o-transform: rotate(0deg;);
 -webkit-transform: rotate(2880deg) ;
 }
 
-#row1b .music {
+.circle1 .inner, .circle1 .mask  {
 position:absolute;
 margin-left:0px;
-margin:0px 3px;
+
 opacity:0;
-text-align:center;
+transition:All 1s ease-in-out ;
 -webkit-transition:All 1s ease-in-out ;
 -moz-transition:All 1s ease-in-out ;
-/* BREAKER1 */
+-o-transition:All 1s ease-in-out ;
 overflow:hidden;
-#breaker1 {
+
-margin-left:-550px;
+
-margin-top:760px;
+.circle1 .inner {
 width:145px;
-height:205px;
+height:145px;
-border-bottom:5px solid #000000;
+padding:50px;
 }
 
-#breaker1 .h1, #breaker1 h1 {
+.circle1 .mask {
 background-color:242424;
-font-size:60px;
+
 height:245px;
 }
-padding-right:15px;
+
 .circle1:hover .mask, .circle1:hover .inner {opacity:1;}
 .circle1:hover .mask {}
 .circle1:hover .inner {overflow:auto;}
 
 .circle1, .circle1 p {
-#breaker1 .liner1, #breaker1 .liner2 {
+color:E8E8E8 ;
 text-align:center;
-font-size:0px;
+
-height:5px;
+
-background-color:000000;
+.circle1 .h1, .circle1 h1 {
 background-color:efefef;
 color:000000;
-#breaker1 .liner1 {
+
-width:800px;
+
-margin:0px 0px 5px 300px;
+
 padding:3px 4px 2px 0px;
 margin:5px 0px;
 border-bottom:4px solid #ffffff;
-#breaker1 .liner2 {
+
-margin:15px 700px 0px 0px;
+overflow:none;
 font-size:14pt;
 }
 
 .circle1 .strong, .circle1strong   {
-/* ROW2 */
+
 font-size:2pt;
-#row2a, #row2b {
+margin-top:15px;
-margin-top:975px;
+
 color:transparent;
 transition:All .6s ease-in-out 0.2s;
-#row2a {
+-webkit-transition:All .6s ease-in-out 0.2s;
-width:825px;
+-moz-transition:All .6s ease-in-out 0.2s;
-height:750px;
+-o-transition:All .6s ease-in-out 0.2s;
-margin-left:-550px;
+
 
 .circle1:hover .strong, .circle1:hover strong {
-#row2b {
+color:F8F8F8;
-width:275px;
+
-height:750px;
+transition:All 1.6s ease-in-out 2.2s;
-margin-left:275px;
+-webkit-transition:All 1.6s ease-in-out 2.2s;
 -moz-transition:All 1.6s ease-in-out 2.2s;
 -o-transition:All 1.6s ease-in-out 2.2s;
-#row2a .bx1, #row2a .bx2, #row2a .bx3 {
+
-height:255px;
+
-width:255px;
+.circle2:hover, .circle3:hover, .circle4:hover, .circle5:hover   {
 z-index:1000;
 width:245px;
 height:245px;
--webkit-box-shadow: 2px 2px 4px 0px rgba(50, 50, 50, 0.6);
+margin-left:40px;
--moz-box-shadow:    2px 2px 4px 0px rgba(50, 50, 50, 0.6);
+margin-top:60px;
-box-shadow:         2px 2px 4px 0px rgba(50, 50, 50, 0.6);
+
 
 .circle2, .circle5 {width:45px;height:45px;}
-#row2a .bx1 {
+.circle2 {margin-left:80px;margin-top:0px;}
-margin-left:5px;
+.circle3 {margin-left:0px;margin-top:25px;width:75px;height:75px;}
 .circle4 {margin-left:270px;margin-top:245px;  width:80px;height:80px;}
 .circle5 {margin-left:240px;margin-top:325px; }
-#row2a .bx2{
+
-margin-left:280px;
+.circle2, .circle3, .circle4, .circle5 {
 background-repeat: no-repeat;
 overflow:hidden;
-#row2a .bx3 {
+transition:All 1.6s ease-in-out 0s;
-margin-left:555px;
+-webkit-transition:All 1.6s ease-in-out 0s;
 -moz-transition:All 1.6s ease-in-out 0s;
 -o-transition:All 1.6s ease-in-out 0s;
-#row2a .img_350width_350height {
+
-height:350px;
+
-width:350px;
+
-margin-top:275px;
+.circle2:hover, .circle3:hover, .circle4:hover, .circle5:hover { }
-margin-left:5px;
+
 .circle2 .img, .circle5 .img {width:45px;height:45px;  background-size: 45px 45px;}
-background-color:999999;
+.circle3 .img {width:75px;height:75px;  background-size: 75px 75px;}
 .circle4 .img {width:80px;height:80px;  background-size:80px 80px;}
 
 .circle2 .img, .circle3 .img, .circle4 .img, .circle5 .img {
-#row2a .bottomlines {
+
 margin-top:0px;
-margin-left:5px;
+
-margin-top:625px;
+background-repeat: no-repeat;
-height:125px;
+transition:All 1.6s ease-in-out 0s;
-width:825px;
+-webkit-transition:All 1.6s ease-in-out 0s;
 -moz-transition:All 1.6s ease-in-out 0s;
 -o-transition:All 1.6s ease-in-out 0s;
 }
-#row2a .h1, #row2a h1, #row2a .h2, #row2a h2 {
+
 .circle2:hover .img, .circle3:hover .img,.circle4:hover .img,.circle5:hover .img {
 margin-top:0px;
 margin-left:0px;
-font-size:40px;
+
-line-height:60px;
+height:245px;
-height:60px;
+background-size: 245px 245px;
 }
 
-padding-right:15px;
+.circle2 .about, .circle3 .about,.circle4 .about, .circle5 .about {
 width:145px;
-background-color:000000;
+height:145px;
 border:50px solid #242424;
 margin-top:-500px;
 margin-left:-500px;
-#row2a .h2, #row2a h2 {
+background-color:242424;
-font-size:43px;
+opacity:0;
 overflow:hidden;
 transition:All .4s ease-in-out 0s;
 -webkit-transition:All .4s ease-in-out 0s;
 -moz-transition:All .4s ease-in-out 0s;
-#row2a .toplines {
+-o-transition:All .4s ease-in-out 0s;
 }
-margin-top:275px;
+
-margin-left:360px;
+.circle2 .h1, .circle3 .h1, .circle4 .h1, .circle5 .h1, .circle2 h1, .circle3 h1, .circle4 h1, .circle5 h1 {
-width:465px;
+
 font-size:12pt;
 text-align:right;
 display:block;
 margin:5px 0px 2px 0px;
-#row2a .h3, #row2a h3 {
+padding:0px 5px 5px 0px;
-border:1px dashed #7a7a7a;
+color:e8e8e8;
 border-left:5px solid #e8e8e8;
-padding-left:15px;
+border-bottom:2px solid #e8e8e8;
 overflow:none;
 line-height:95%;
-height:48px;
+
-font-size:44px;
+
-letter-spacing:4pt;
+.circle2:hover .about, .circle3:hover .about, .circle4:hover .about, .circle5:hover .about {
 position:absolute;
 margin-top:0px;
-font-family: 'Abel', sans-serif;
+
 padding:0px;
 opacity:1;
-#row2a .bx4 {
+
-border-left:5px solid #000000;
+-webkit-border-radius: 0px;
 -moz-border-radius: 0px;
-margin-top:335px;
+border-radius: 0px;
-margin-left:360px;
+transition:All 1s ease-in-out 1s;
-width:460px;
+-webkit-transition:All 1s ease-in-out 1s;
-height:290px;
+-moz-transition:All 1s ease-in-out 1s;
 -o-transition:All 1s ease-in-out 1s;
 }
 
-.bx4 .qts {
+#c6-7 {
 margin-left:-500px;
 margin-top:585px;
 height:300px;
-width:255px;
+
-height:135px;
+
 }
 
 .circle6, .circle6 .img, .circle6 .mask, .circle6 .conns {position:absolute;}
-#row2a .h4, #row2a h4 {
+
-color:660000;
+.circle6 {
-height:100px;
+z-index:2;
-line-height:90%;
+margin-left:50px;
-font-size:25pt;
+margin-top:55px;
 width:145px;
 height:145px;
 background-repeat: no-repeat;
-font-family: 'Shadows Into Light', cursive;
+
 transition:All .6s ease-in-out 1.2s;
-padding:2px 0px 0px 5px;
+-webkit-transition:All .6s ease-in-out 1.2s;
-letter-spacing:2pt;
+-moz-transition:All .6s ease-in-out 1.2s;
 -o-transition:All .6s ease-in-out 1.2s;
 }
-#row2a .h5, #row2a h5 {
+
-color:2e2e2e;
+.circle6:hover, .circle6:hover .img {
-height:35px;
+
-font-size:34px;
+
-line-height:35px;
+
 -o-transition:All .6s ease-in-out .2s;
 }
 
 .circle6:hover {
 margin-left:25px;
 margin-top:20px;
 width:265px;
 height:265px;
-#row2a .about {
+
 
-margin-top:140px;
+.circle6 .img {
 margin-top:0px;
 margin-left:0px;
-height:135px;
+width:145px;
 height:145px;
 background-size: 145px 145px;
-text-align:justify;
+background-repeat: no-repeat;
 transition:All .6s ease-in-out 1.2s;
 -webkit-transition:All .6s ease-in-out 1.2s;
-#row2a .img_200width_290height {
+-moz-transition:All .6s ease-in-out 1.2s;
 -o-transition:All .6s ease-in-out 1.2s;
-margin-left:260px;
+
 
-height:290px;
+.circle6:hover .img {
-background-color:green;
+
 margin-left:0px;
 width:265px;
 height:265px;
 background-size: 265px 265px
 }
 
-/* BREAKER2 */
+.circle6 .mask {
 width:257px;
-#breaker2 {
+height:257px;
-margin-left:-550px;
+margin-top:129px;
-margin-top:1735px;
+margin-left:-129px;
 background-color:242424;
-height:255px;
+opacity:0;
-background-color:white;
+border:4px dashed #f3f3f3;
 }
 
-#breaker2 .img1 {
+.circle6 .mask, .circle6 .conns {
 transition:All 1s ease-in-out .2s;
 -webkit-transition:All 1s ease-in-out .2s;
-margin-left:840px;
+-moz-transition:All 1s ease-in-out .2s;
 -o-transition:All 1s ease-in-out .2s;
 }
 
-background-color:000000;
+.circle6:hover .mask {
--webkit-box-shadow: 5px 5px 8px 0px rgba(50, 50, 50, 0.9);
+
--moz-box-shadow:    5px 5px 8px 0px rgba(50, 50, 50, 0.9);
+
-box-shadow:         5px 5px 8px 0px rgba(50, 50, 50, 0.9);
+opacity:1;
 }
 
-#breaker2 .liner1, #breaker2 .liner2 {
+.circle6 .conns {
 margin-top:129px;
-font-size:0px;
+margin-left:-129px;
 opacity:0;
-background-color:000000;
+width:170px;
 height:170px;
 padding:5px;
 background-color:transparent;
-#breaker2 .liner1 {
+
-margin-top:100px;
+
 
 .circle6:hover .conns {
 opacity:1;
-#breaker2 .liner2 {
+
-margin-top:135px;
+
-width:950px;
+margin-left:40px;
-margin-left:150px;
+
 
 .circle6 .h1, .circle6 h1 {
-#breaker2 .qts {
+background-color:121212;
-width:830px;
+color:D8D8D8;
 font-size:13pt;
-margin-top:165px;
+
 text-align:center;
 font-family: 'IM Fell English', serif;
 padding:5px 0px;
 margin:5px 0px;
-#breaker2 .h1, #breaker2 h1 {
+
-font-size:80px;
+
-line-height:80px;
+
-letter-spacing:2pt;
+.conns a {
 font-size:6pt;
 font-weight:light;
-padding:0px 10px 10px 0px;
+
 margin-bottom:1px;
-color:171717;
+
-font-family: 'Yanone Kaffeesatz', sans-serif;
+
 text-decoration:none;
 letter-spacing:0pt;
 text-transform:uppercase;
 font-family: 'Raleway', sans-serif;
-/* ROW3 */
+background-color:282828  ;
 color:B8B8B8  ;
-#row3  {
+transition:All 1.6s ease-in-out 0s;
 -webkit-transition:All 1.6s ease-in-out 0s;
-height:510px;
+-moz-transition:All 1.6s ease-in-out 0s;
-margin-left:-550px;
+-o-transition:All 1.6s ease-in-out 0s;
-margin-top:2000px;
+
 height:10px;
 line-height:10px;
-#row3 .bx1, #row3 .bx2, #row3 .bx3, #row3 .bx4 {
+
 
 .conns a:hover {color:D8D8D8 ;text-decoration:line-through;text-transform:lowercase;letter-spacing:4pt;}
 .conns a.LK1 {border-left:15px solid #080808 ;border-right:5px solid #080808 ;}
-background-color:000000;
+.conns a.LK1:hover {border-left:45px solid #080808 ;border-right:5px solid #080808 ;}
 .conns a.LK2  {border-left:5px solid #080808 ;border-right:15px solid #080808;}
 .conns a.LK2:hover {border-left:5px solid #080808 ;border-right:45px solid #080808;}
 
-#row3 .bx1  {
+
 .circle7 {
 z-index:1;
 background-color:black;
 overflow:hidden;
-#row3 .bx2  {
+background-image:url(http://i61.tinypic.com/2cymogl.jpg);
-background-position:bottom left;
+background-size: 45px 45px;
 background-repeat: no-repeat;
 margin-left:180px;
 margin-top:175px;
-#row3 .bx3  {
+width:45px;
-background-position:top right;
+height:45px;
 line-height:45px;
 text-align:center;
 transition:All .6s ease-in-out 0s;
-#row3 .bx4  {
+-webkit-transition:All .6s ease-in-out 0s;
-background-position:bottom right;
+-moz-transition:All .6s ease-in-out 0s;
 -o-transition:All .6s ease-in-out 0s;
 }
 
-#row3 .bx1, #row3 .bx3 {margin-top:5px;}
+.circle7 embed, .circle7 object{opacity:0;}
-#row3 .bx3, #row3 .bx4 {margin-left:260px;}
+.circle7:hover embed, .circle7:hover object{opacity:1;}
-#row3 .bx1, #row3 .bx2 {margin-left:5px;}
+
-#row3 .bx2, #row3 .bx4 {margin-top:260px;}
+.circle7:hover {
-.bx4 .wrd1, .bx4 .wrd2 {position:absolute;}
+background-image:url(/clear.gif);
 width:200px;
-.bx4 .wrd1 {
+
 padding:20px 0px 0px 10px;
 }
-background: rgba(235, 220, 209, 0.5);
+
 #c8-10 {
 margin-top:745px;
-.bx4 .wrd2 {
+margin-left:-85px;
-margin-top:90px;
+width:546px;
-margin-left:205px;
+height:170px;
 background-color:transparent;
 }
-#row3 .h1, #row3 h1 {
+
-text-shadow: 4px 4px 0px rgba(0, 0, 0, 1);
+.circle8, .circle9, .circle10 {
 width:162px;
-letter-spacing:-2pt;
+height:162px;
 background-size: 162px 162px;
 margin-top:0px;
-line-height:245px;
+
-font-size:140px;
+
 transition:All .6s ease-in-out 0s;
-color:white;
+-webkit-transition:All .6s ease-in-out 0s;
 -moz-transition:All .6s ease-in-out 0s;
-font-family: 'Oswald', sans-serif;
+-o-transition:All .6s ease-in-out 0s;
 }
 
-#row3 .h2, #row3 h2 {
+.circle8 {margin-left:0px; z-index:2;}
-text-shadow: 4px 4px 0px rgba(0, 0, 0, 1);
+.circle9 {margin-left:180px; z-index:1;}
 .circle10 {margin-left:370px; z-index:3;}
-letter-spacing:3pt;
+
 .circle8:hover, .circle9:hover, .circle10:hover {
 width:538px;
-line-height:15px;
+background-color:fafafa;
-font-size:15px;
+
 -webkit-border-radius: 0px;
-color:white;
+-moz-border-radius:0px;
-font-family: 'Oswald', sans-serif;
+border-radius:0px;
 z-index:1000;
 }
-.vbox {
+
-width: 245px;
+.circle8 .about, .circle9 .about, .circle10 .about {
-height: 245px;
+
-float: left;
+margin-left:172px;
-overflow: hidden;
+margin-top;0px;
-position: relative;
+width:356px;
-text-align: center;
+height:152px;
 padding:5px;
 background-color:242424;
-.vbox  .mask, .vbox  .content {
+
-width: 245px;
+
-height: 245px;
+
-position: absolute;
+
-overflow: hidden;
+.circle8:hover .about, .circle9:hover .about, .circle10:hover .about{
-top: 0;
+
-left: 0
+
 }
 
-.vbox-inner .mask {
+.circle8 .h1, .circle9 .h1, .circle10 .h1, .circle8 h1, .circle9 h1, .circle10 h1 {
-background: rgba(255, 255, 255, 0.8);
+font-family: 'Dynalight', cursive;
-width: 300px;
+font-size:16pt;
-padding:60px;
+
-height: 300px;
+display:block;
-opacity: 0;
+
-transform: translate(265px, 145px) rotate(45deg);
+
-transition: all 0.2s ease-in-out;
+border-bottom:2px solid #e8e8e8;
 color:e8e8e8;
 width:0px;
-.vbox-inner .about {
+height:0px;
-text-align: justify;
+
-position: relative;
+
-background-color: transparent;
+
-margin: 20px;
+
 .circle8:hover .h1, .circle9:hover .h1, .circle10:hover .h1, .circle8:hover h1, .circle9:hover h1, .circle10:hover h1 {
 opacity:1;
-width:195px;
+
 height:20px;
-transform: translate(250px, -250px);
+line-height:20px;
-transition: all 0.2s ease-in-out;
+margin:5px 0px 2px 0px;
 padding:0px 5px 5px 0px;
 transition:All .6s ease-in-out 1s;
-.vbox-inner:hover .mask {
+-webkit-transition:All .6s ease-in-out 1s;
-opacity:1;
+-moz-transition:All .6s ease-in-out 1s;
-transform: translate(-80px, -125px) rotate(45deg);
+-o-transition:All .6s ease-in-out 1s;
-}
+
-
+
-.vbox-inner:hover .about {
+
-transform: translate(0px,0px);
+
-transition-delay: 0.3s;
+.profileInfo, .userProfileURL, .friendsComments, .blurbs, .blacktext12, .friendSpace, .contactTable, .extendedNetwork, .latestBlogEntry, .interestsAndDetails, .userProfiledetail,  .userAlbums, .whitetext12, .orangetext15, .lightbluetext8, .blacktext12, .navigationBar, tr#groups,  .navigationBar, .profile, table tr td[id='footerWarpper'] { display:none !important;visibility:hidden!important; }
 table table table table td {width:0px;}
 .contactTable td, table table td.text table td,table table table table table td {width:auto;}
-#row3 .info {
+
 select { visibility:hidden!important; WIDTH:0px!important;}
-margin-top:5px;
+table div {display:none;}
-margin-left:515px;
+table table div {display:block;}
-width:480px;
+.clearfix {display:none !important;position:absolute!important;}
-height:490px;
+div[id="googlebar"],div div select{opacity:0;filter:alpha(opacity=0);display:none !important;position:absolute !important; bottom:2000px !important;}
 .profileInfo tr tr td { visibility:hidden; }
 .profileInfo td.text { visibility:visible; }
 .vicarious {Layouts available @ http://vicarious-hs.tumblr.com/}
 </style></td></tr></table><table style="display:none"><tr><td>
-.info, .info p {
+
 
-font-size:10pt;
+
-line-height:100%;
+
 -----------------------------LIKE TO MEET-------------------------
 
-.info .h4, .info h4 {
+
 LEAVE THIS ARE BLANK
-font-size: 80px;
+IMAGE INSTRUCTIONS:  For the sake of simplicity, make all of your images 265px width by 265px height.  The layout will re-size them for you.
-height:90px;
+
-line-height:90px;
+
-width:90px;
+
 
-margin:0px 2px 0px 0px;
+
-background-color:0a0a0a;
+
-color:ffffff;
+
 <div id="back"></div>
-border:5px dashed #ffffff;
+<div id="back1"></div>
 <div id="back2"></div>
 
-#row3 .frame {
+<div id="namefield1">FirstName</div>
 <div id="namefield2">LastName</div>
-margin-top:5px;
+
-margin-left:1015px;
+<div id="linx">
-width:76px;
+<a class="LK1" href="/logincomplete.php">Home</a>
-height:496px;
+<a class="LK2" href="/invite_friend.php?friend_id=xxxxxx">Add</a>
-border:2px solid #d3d3d3;
+<a class="LK3" href="/send_message.php?member_id=xxxxxx">Message</a>
-background-color:000000;
+<a class="LK4" href="/add_testimonial.php?member_id=xxxxxx">Comment</a>
--webkit-box-shadow: 2px 2px 4px 0px rgba(50, 50, 50, 0.6);
+<a class="LK5" href="/gallery.php?member_id=xxxxxx">Photos</a>
--moz-box-shadow:    2px 2px 4px 0px rgba(50, 50, 50, 0.6);
+<a class="LK6" href="/view_member_blog.php?member_id=xxxxxx">Blogs</a>
-box-shadow:         2px 2px 4px 0px rgba(50, 50, 50, 0.6);
+
 
 -----------------------------MUSIC---------------------------------
-#row3 em {
+
 </td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">
 
-padding:10px 0px;
+<div id="bx1">
 
 <div class="img1" style="background-image:url(http://i62.tinypic.com/345k75w.jpg);"></div>
 
-line-height:110%;
+<div class="title">History/Origins ░</div>
-color:4f4f4f;
+
 <div class="about">
 
 <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
 
-/* ROW4 */
+<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
 
-#row4 {
+
-height:700px;
+
-width:1100px;
+
-margin-left:-550px;
+<div id="bx2">
-margin-top:2520px;
+
-border-top:35px dashed #000000;
+<div class="img1" style="background-image:url(http://i59.tinypic.com/2ahu0so.jpg);"></div>
-border-bottom:50px solid #000000;
+
 <div class="title">Present Day ░</div>
 
 <div class="about">
-#row4 .circle {
+
 <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-margin-top:75px;
+
 <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-height:500px;
+
 
-background-color:000000;
+
 </div></div>
 
 -----------------------------MOVIES--------------------------------
--webkit-box-shadow: 2px 2px 4px 0px rgba(50, 50, 50, 0.6);
+
--moz-box-shadow:    2px 2px 4px 0px rgba(50, 50, 50, 0.6);
+
-box-shadow:         2px 2px 4px 0px rgba(50, 50, 50, 0.6);
+
 <div id="c1-5">
 
 <div class="circle1" style="background-image:url(http://i61.tinypic.com/n6okzo.jpg);">
- .ribbonR {
+
 <div class="mask"></div><div class="inner">
-margin-top:275px;
+
-margin-left:485px;
+<p><font class="h1">Verses</font>
-  -webkit-box-sizing: content-box;
+Verse, Verse, Verse, Verse
-  -moz-box-sizing: content-box;
+
-  box-sizing: content-box;
+<p><font class="h1">Dues</font>
-  width: 0;
+S: 0 ║ C: 0 ║ M: 0
-  height: 100px;
+
-  border: 50px solid #000000;
+<BR><font class="strong">♛</font>
-  border-top: 0 solid;
+
- border-bottom: 35px solid rgba(0,0,0,0);
+</div></div><div class="circle2">
-  font: normal 100%/normal Arial, Helvetica, sans-serif;
+<div class="img" style="background-image:url(http://i59.tinypic.com/1256ve8.jpg);"></div>
-  color: rgba(0,0,0,1);
+
-  -o-text-overflow: clip;
+<div class="about">
-  text-overflow: clip;
+<font class="h1">Legal & Physical</font>
-  background-color:transparent;
+<BR><b>NAME:</b> Input info
-  -webkit-transform: rotateZ(-90deg)   ;
+<BR><b>NICKNAMES:</b> Input info
-  transform: rotateZ(-90deg)   ;
+<BR><b>ALIASES:</b> Input info
 <BR><b>DATE OF BIRTH:</b> Input info
 <BR><b>PLACE OF BIRTH:</b> Input info
-.ribbonL {
+<BR><b>CURRENT RESIDENCE:</b> Input info
 <BR><b>ETHNICITY:</b> Input info
-margin-top:275px;
+<BR><b>HAIR COLOR:</b> Input info
 <BR><b>EYE COLOR:</b> Input info
-  -webkit-box-sizing: content-box;
+<BR><b>HEIGHT:</b> Input info
-  -moz-box-sizing: content-box;
+<BR><b>WEIGHT:</b> Input info
-  box-sizing: content-box;
+<BR><b>BIRTHMARKS/SCARS:</b> Input info
-  width: 0;
+
-  height: 100px;
+
-  border: 50px solid #000000;
+</div></div><div class="circle3">
-  border-top: 0 solid;
+
- border-bottom: 35px solid rgba(0,0,0,0);
+<div class="img" style="background-image:url(http://i60.tinypic.com/2zswa5f.jpg);"></div>
-  font: normal 100%/normal Arial, Helvetica, sans-serif;
+
-  color: rgba(0,0,0,1);
+
-  -o-text-overflow: clip;
+<font class="h1">Family & Relationships</font>
-  text-overflow: clip;
+<BR><b>MOTHER:</b> Input info
-  background-color:transparent;
+<BR><b>FATHER:</b> Input info
-  -webkit-transform: rotateZ(450deg)   ;
+<BR><b>SISTER(S):</b> Input info
-  transform: rotateZ(450deg)   ;
+<BR><b>BROTHER(S):</b> Input info
 <BR><b>Other Family:</b> Input info
 <BR><b>STATUS:</b> Input info
 <BR><b>ORIENTATION:</b> Input info
-#row4 .title{
+<BR><b>CURRENT:</b> Input info
-margin-left:610px;
+<BR><b>FORMER:</b> Input info
 
 </div></div><div class="circle4">
-width:255px;
+
-height:600px;
+<div class="img" style="background-image:url(http://i60.tinypic.com/2h31zd0.jpg);"></div>
-font-size:135px;
+
-letter-spacing:-10px;
+
-line-height:110%;
+<font class="h1">Education & Employment</font>
 <br><b>High School</b> Input Info
 <br><b>College</b> Input Info
 <br><b>Major</b> Input Info
-text-align:right;
+<br><b>Degree</b> Input Info
 <br><b>OCCUPATION:</b> Input info
 <BR><b>JOB DESCRIPTION:</b> Input info
 <BR><b>EMPLOYER:</b> Input info
-.exc {
+<BR><b>SKILLSET:</b> Input info
-padding-top:25px;
+
 </div></div><div class="circle5">
-margin-left:870px;
+
-margin-top:50px;
+<div class="img" style="background-image:url(http://i58.tinypic.com/11vtrep.jpg);"></div>
-font-family: 'Alfa Slab One', cursive;
+
-font-size:700px;
+
-height:580px;
+<font class="h1">Personality</font>
-line-height:580px;
+<br><b>Type</b> Input Info
-width:225px;
+<br><b>Traits</b> Input Info
 <br><b>Quirks</b> Input Info
 
-padding-right:15px;
+<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-color:000000;
+
 </div></div></div>
 
-.peeps {
+
 
 </td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">
-margin-top:75px;
+
-height:700px;
+<div id="c6-7"><div class="circle6">
-width:1100px;
+
-color:000000;
+<div class="img" style="background-image:url(http://i60.tinypic.com/2wptppg.jpg);"></div>
 
-text-align:justify;
+<div class="mask"></div><div class="conns">
 
 <font class="h1">Connections</font>
-.peeps p {text-align:justify;}
+
 <a class="LK1" href="/#">Name Here</a>
-.inst {
+<a class="LK2" href="/#">Name Here</a>
-color:ffffff;
+<a class="LK1" href="/#">Name Here</a>
-width:160px;
+<a class="LK2" href="/#">Name Here</a>
 
-height:auto;
+<a class="LK1" href="/#">Name Here</a>
 <a class="LK2" href="/#">Name Here</a>
 <a class="LK1" href="/#">Name Here</a>
-margin-left:1200px;
+<a class="LK2" href="/#">Name Here</a>
-margin-top:-200px;
+
 <a class="LK1" href="/#">Name Here</a>
 <a class="LK2" href="/#">Name Here</a>
 <a class="LK1" href="/#">Name Here</a>
-.peeps:hover .inst {
+<a class="LK2" href="/#">Name Here</a>
 
-margin-top:240px;
+</div></div><div class="circle7">
-margin-left:910px;
+
-transition:All 1s ease-in-out 3s;
+<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=http://k007.kiwi6.com/hotlink/jeig1st9wu/eels_-_fresh_blood_www.mp3fiber.com_.mp3&t0=Fresh Blood&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
--webkit-transition:All 1s ease-in-out 3s;
+
--moz-transition:All 1s ease-in-out 3s;
+
--o-transition:All 1s ease-in-out 3s;
+
 -----------------------------BOOKS--------------------------------
 
 
-.pp1, .pp2, .pp3, .pp4, .pp5, .pp6, .pp7, .pp8, .pp9, .pp10, .pp11, .pp12, .pp1i, .pp2i, .pp3i, .pp4i, .pp5i, .pp6i, .pp7i, .pp8i, .pp9i, .pp10i, .pp11i, .pp12i {
+
 
-height:50px;
+<div id="c8-10">
 
 <div class="circle8" style="background-image:url(http://i57.tinypic.com/30u9rtl.jpg);">
-font-size:0pt;
+
 <div class="about">
 <font class="h1">Connection Name</font>
 <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
 
-.pp1, .pp2, .pp3, .pp1i, .pp2i, .pp3i {margin-top:0px; }
+
-.pp4, .pp5, .pp6, .pp4i, .pp5i, .pp6i {margin-top:55px; }
+
-.pp7, .pp8, .pp9, .pp7i, .pp8i, .pp9i {margin-top:110px; }
+<div class="circle9" style="background-image:url(http://i58.tinypic.com/2ijpuvt.jpg);">
-.pp10, .pp11, .pp12, .pp10i, .pp11i, .pp12i {margin-top:165px; }
+
 <div class="about">
-.pp1, .pp4, .pp7, .pp10, .pp1i, .pp4i, .pp7i, .pp10i {margin-left:910px;  }
+<font class="h1">Connection Name</font>
-.pp2, .pp5, .pp8, .pp11, .pp2i, .pp5i, .pp8i, .pp11i {margin-left:965px;  }
+<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-.pp3, .pp6, .pp9, .pp12, .pp3i, .pp6i, .pp9i, .pp12i {margin-left:1020px;  }
+
 
-.pp1, .pp2, .pp3, .pp4, .pp5, .pp6, .pp7, .pp8, .pp9, .pp10, .pp11, .pp12 {
+
-transition:All 1s ease-in-out 3s;
+
--webkit-transition:All 1s ease-in-out 3s;
+<div class="circle10" style="background-image:url(http://i61.tinypic.com/30xk4s0.jpg);">
--moz-transition:All 1s ease-in-out 3s;
+
--o-transition:All 1s ease-in-out 3s;
+
 <font class="h1">Connection Name</font>
-border:50px dashed #000000;
+<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
 
 </div></div></div>