/* ================ The Timeline ================ */
#word-cloud {
 width: 400px;
 height: 300px;
 margin: 0 auto;
 padding: 2em 0;
 font: 100% 'Yanone Kaffeesatz', Arial, sans-serif;
 position: relative;
}

#word-cloud span {
 position: absolute;
}

/*Purple*/
#word-cloud .word-1 {
 top: 1em;
 left: 1.5em;
 font-size: 100px;
 color: #660066;
}

/* Yellow */
#word-cloud .word-2 {
 top: 0;
 left: 2em;
 font-size: 80px;
 color: #ffcc00;
}

/* Blue */
#word-cloud .word-3 {
 top: 1em;
 left: 1.5em;
 font-size: 60px;
 color: #66ccff ;
}

/* Pink */
#word-cloud .word-4 {
 top: 1em;
 left: 0;
 font-size: 40px;
 color: #ff0066;
 -moz-transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
}

/* Red */
#word-cloud .word-5 {
 top: 1.5em;
 right: -0.3em;
 color: #ff0000;
 font-size: 70px;
 -moz-transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
}

/* Green */
#word-cloud .word-6 {
 bottom: 0;
 right: 1em;
 color: #009933;
 font-size: 120px;
}

/* Orange */
#word-cloud .word-7 {
 bottom: 0.6em;
 left: 0;
 color: #ff9933;
 font-size: 90px;
 -moz-transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
}

/* Blue*/
#word-cloud .word-8 {
 top: 4em;
 right: 0.4em;
 color: #0066ff;
 font-size: 70px;
 -moz-transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
}