Zeukkari/Star Wars 3D Scrolling Text in CSS3 (with music).markdown

## index.html
<!-- ALL CREDIT FOR THE SCROLLING TEXT GOES TO
     Craig Buckler
     http://www.sitepoint.com/css3-starwars-scrolling-text/

Blame me for the music via embedded video bit
-->

<div style="overflow:hidden; position:absolute; left:0; top:0; width:50px; height:25px;">
  <div style="margin-top:-290px;">
  <object width="420" height="315">
    <param name="movie" value="http://www.youtube.com/v/EjMNNpIksaI?version=3&amp;hl=en_US&autoplay=1&amp;autohide=2"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/EjMNNpIksaI?version=3&amp;hl=en_US&autoplay=1&amp;autohide=2" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
  </object>
  </div>
</div>

<p id="start">A short time ago in a browser very, very close&hellip;</p>

<h1>STAR WARS<sub>titles in CSS3</sub></h1>

<div id="titles">
  <div id="titlecontent">

<h1><a id="Siviilipalveluksen_alkaminen_0"></a>Siviilipalveluksen alkaminen</h1>
<p>Siviilipalvelus alkaa hakemuksen hyväksymisvuoden tai kahden sitä seuraavan kalenterivuoden kuluessa, ellei siviilipalvelusvelvolliselle ole myönnetty lykkäystä. Siviilipalveluskeskus toimittaa kirjallisen määräyksen astua palvelukseen noin kolme kuukautta ennen palveluksen alkua. Suostumuksen perusteella tai iän (yli 29 vuotta) vuoksi palvelukseen voidaan määrätä myös kaksi kuukautta lyhyemmällä varoitusajalla.</p>
<h1><a id="Siviilipalveluksen_pituus_6"></a>Siviilipalveluksen pituus</h1>
<p>Yleisesti ottaen 347 päivää.</p>
<h2><a id="Kertoimet_11"></a>Kertoimet</h2>
<p>Jos palveluksen kestoksi on määrätty 165 vrk, on kerroin 2,10. Jos palveluksen kesto on 255 vrk, kerroin on 1,36, ja jos palveluksen kestoksi on määrätty 347 vrk, joka on myös siviilipalveluksen kesto, on kerroin 1,00.</p>
<p>Esimerkki: olet suorittanut varusmiespalvelusta 8 vrk, ja palvelusajaksi määräytyi 165 vrk. 8 x 2,10= 16,80.
Siviilipalveluksesi lyhenee 17 vrk: 347-17=330 vrk</p>
<h2><a id="Palvelusajan_laskeminen_20"></a>Palvelusajan laskeminen</h2>
<p>Siviilipalvelusvelvollisen palvelusaika lasketaan siitä päivästä, jolloin siviilipalvelusvelvollinen saapuu palvelukseen. Palvelusaikaan lasketaan palveluksen aloittamispäivä ja kotiuttamispäivä.</p>
<p>Palvelusaikaan ei lasketa päiviä, jotka siviilipalvelusvelvollinen on:</p>
<ol>
<li>
<p>luvattomasti poissa palveluksesta;</p>
</li>
<li>
<p>40 §:n 2 momentissa tarkoitetulla henkilökohtaisista syistä annetulla lomalla;</p>
</li>
<li>
<p>tahallisesti itse aiheuttamansa vamman tai sairauden vuoksi palvelukseen kykenemätön;</p>
</li>
<li>
<p>rikoksesta epäiltynä pidätettynä tai vangittuna.</p>
</li>
</ol>
<h1><a id="Siviilipalveluksen_kotiuttaminen_ja_keskeyttminen_36"></a>Siviilipalveluksen kotiuttaminen ja keskeyttäminen</h1>
<p>Kotiuttaminen</p>
<p>Siviilipalveluspaikan on kotiutettava siviilipalvelusvelvollinen, kun:</p>
<ol>
<li>
<p>hän on kokonaan suorittanut tämän lain mukaisen palveluksensa;</p>
</li>
<li>
<p>hän on täyttänyt 30 vuotta ja hänen palvelusvelvollisuutensa on päättynyt tämän lain 5 §:n 2 momentin perusteella;</p>
</li>
<li>
<p>hänet on 26–28 §:n perusteella vapautettu siviilipalveluksen suorittamisesta;</p>
</li>
<li>
<p>hän on menettänyt Suomen kansalaisuuden;</p>
</li>
<li>
<p>hänelle on palvelusaikana myönnetty lykkäystä;</p>
</li>
<li>
<p>häntä vastaan on tehty rikosilmoitus siviilipalveluksesta kieltäytymisestä tai siviilipalvelusrikoksesta; tai</p>
</li>
<li>
<p>hänelle muusta kuin siviilipalveluksesta kieltäytymisestä tai siviilipalvelusrikoksesta tuomitun vankeusrangaistuksen täytäntöönpano alkaa.</p>
</li>
</ol>
<p>Siviilipalveluskeskus voi harkintansa mukaan kotiuttaa siviilipalvelusvelvollisen, jos:</p>
<ol>
<li>
<p>hän on lääkärinlausunnon mukaan pitkähkön ajan palvelukseen kykenemätön; taikka</p>
</li>
<li>
<p>hän on tehnyt siviilipalveluspaikkaan, sen henkilökuntaan, asiakkaaseen tai omaisuuteen kohdistuvan vakavan rikoksen tai käyttäytyy tavalla, joka osoittaa, että hän vakavasti vaarantaa palvelusturvallisuutta tai työturvallisuutta.</p>
</li>
</ol>
<p>Ennen 2 momentissa tarkoitetun perusteen mukaista kotiuttamista siviilipalveluskeskuksen on kuultava siviilipalvelusvelvollista ja siviilipalveluspaikkaa.</p>
<p>Siviilipalveluspaikan tai siviilipalveluskeskuksen on annettava siviilipalvelusvelvolliselle kotiuttamispäätös, josta ilmenee suoritettu palvelusaika ja kotiuttamisperuste.</p>
    </div>
</div>
<iframe style="visibility:hidden" width="560" height="315" src="http://www.youtube.com/embed/1KAOq7XX2OY" frameborder="0" allowfullscreen></iframe>

## script.js
/**
 * ALL CREDIT GOES TO
 * Craig Buckler
 * http://www.sitepoint.com/css3-starwars-scrolling-text/
 *
 * Blame me for the music via embedded video bit.
 * Aug 2015 - ...which probably doesn't work anymore and likely hasn't for some time...
 */

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

## Star Wars 3D Scrolling Text in CSS3 (with music).markdown

      
    Raw
  

              Star Wars 3D Scrolling Text in CSS3 (with music).markdown
            
          
    Star Wars 3D Scrolling Text in CSS3 (with music)

http://www.sitepoint.com/css3-starwars-scrolling-text/
Forked from Scott Bram's Pen Star Wars 3D Scrolling Text in CSS3 (with music).
Forked from Scott Bram's Pen Star Wars 3D Scrolling Text in CSS3 (with music).
A Pen by Captain Anonymous on CodePen.
License.

  
## style.css
/*
** ALL CREDIT GOES TO
** Craig Buckler
** http://www.sitepoint.com/css3-starwars-scrolling-text/
**
** Blame me for the music via embedded video bit
*/

@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);

* { padding: 0; margin: 0; }

body, html
{
  width: 100%;
  height: 100%;
  font-family: "Droid Sans", arial, verdana, sans-serif;
	font-weight: 700;
	color: #ff6;
	background-color: #000;
	overflow: hidden;
}

p#start
{
	position: relative;
	width: 16em;
	font-size: 200%;
	font-weight: 400;
	margin: 20% auto;
	color: #4ee;
	opacity: 0;
	z-index: 1;
	-webkit-animation: intro 2s ease-out;
	-moz-animation: intro 2s ease-out;
	-ms-animation: intro 2s ease-out;
	-o-animation: intro 2s ease-out;
	animation: intro 2s ease-out;
}

@-webkit-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-moz-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-ms-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@-o-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}

h1
{
	position: absolute;
	width: 2.6em;
	left: 50%;
	top: 25%;
	font-size: 10em;
	text-align: center;
	margin-left: -1.3em;
	line-height: 0.8em;
	letter-spacing: -0.05em;
	color: #000;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index: 1;
	-webkit-animation: logo 5s ease-out 2.5s;
	-moz-animation: logo 5s ease-out 2.5s;
	-ms-animation: logo 5s ease-out 2.5s;
	-o-animation: logo 5s ease-out 2.5s;
	animation: logo 5s ease-out 2.5s;
}

h1 sub
{
	display: block;
	font-size: 0.3em;
	letter-spacing: 0;
	line-height: 0.8em;
}

@-webkit-keyframes logo {
	0% { -webkit-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -webkit-transform: scale(0.1); opacity: 0; }
}

@-moz-keyframes logo {
	0% { -moz-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -moz-transform: scale(0.1); opacity: 0; }
}

@-ms-keyframes logo {
	0% { -ms-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -ms-transform: scale(0.1); opacity: 0; }
}

@-o-keyframes logo {
	0% { -o-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -o-transform: scale(0.1); opacity: 0; }
}

@keyframes logo {
	0% { transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { transform: scale(0.1); opacity: 0; }
}

/* the interesting 3D scrolling stuff */
#titles
{
	position: absolute;
	width: 18em;
	height: 50em;
	bottom: 0;
	left: 50%;
	margin-left: -9em;
	font-size: 350%;
	text-align: justify;
	overflow: hidden;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transform: perspective(300px) rotateX(25deg);
	-moz-transform: perspective(300px) rotateX(25deg);
	-ms-transform: perspective(300px) rotateX(25deg);
	-o-transform: perspective(300px) rotateX(25deg);
	transform: perspective(300px) rotateX(25deg);
}

#titles:after
{
	position: absolute;
	content: ' ';
	left: 0;
	right: 0;
	top: 0;
	bottom: 60%;
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	pointer-events: none;
}

#titles p
{
	text-align: justify;
	margin: 0.8em 0;
}

#titles p.center
{
	text-align: center;
}

#titles a
{
	color: #ff6;
	text-decoration: underline;
}

#titlecontent
{
	position: absolute;
	top: 100%;
	-webkit-animation: scroll 100s linear 4s infinite;
	-moz-animation: scroll 100s linear 4s infinite;
	-ms-animation: scroll 100s linear 4s infinite;
	-o-animation: scroll 100s linear 4s infinite;
	animation: scroll 100s linear 4s infinite;
}

/* animation */
@-webkit-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

@-moz-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

@-ms-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

@-o-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

@keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}
	<!-- ALL CREDIT FOR THE SCROLLING TEXT GOES TO
	Craig Buckler
	http://www.sitepoint.com/css3-starwars-scrolling-text/

	Blame me for the music via embedded video bit
	-->

	<div style="overflow:hidden; position:absolute; left:0; top:0; width:50px; height:25px;">
	<div style="margin-top:-290px;">
	<object width="420" height="315">
	<param name="movie" value="http://www.youtube.com/v/EjMNNpIksaI?version=3&hl=en_US&autoplay=1&autohide=2"></param>
	<param name="allowFullScreen" value="true"></param>
	<param name="allowscriptaccess" value="always"></param>
	<embed src="http://www.youtube.com/v/EjMNNpIksaI?version=3&hl=en_US&autoplay=1&autohide=2" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
	</object>
	</div>
	</div>

	<p id="start">A short time ago in a browser very, very close…</p>

	<h1>STAR WARS<sub>titles in CSS3</sub></h1>

	<div id="titles">
	<div id="titlecontent">

	<h1><a id="Siviilipalveluksen_alkaminen_0"></a>Siviilipalveluksen alkaminen</h1>
	<p>Siviilipalvelus alkaa hakemuksen hyväksymisvuoden tai kahden sitä seuraavan kalenterivuoden kuluessa, ellei siviilipalvelusvelvolliselle ole myönnetty lykkäystä. Siviilipalveluskeskus toimittaa kirjallisen määräyksen astua palvelukseen noin kolme kuukautta ennen palveluksen alkua. Suostumuksen perusteella tai iän (yli 29 vuotta) vuoksi palvelukseen voidaan määrätä myös kaksi kuukautta lyhyemmällä varoitusajalla.</p>
	<h1><a id="Siviilipalveluksen_pituus_6"></a>Siviilipalveluksen pituus</h1>
	<p>Yleisesti ottaen 347 päivää.</p>
	<h2><a id="Kertoimet_11"></a>Kertoimet</h2>
	<p>Jos palveluksen kestoksi on määrätty 165 vrk, on kerroin 2,10. Jos palveluksen kesto on 255 vrk, kerroin on 1,36, ja jos palveluksen kestoksi on määrätty 347 vrk, joka on myös siviilipalveluksen kesto, on kerroin 1,00.</p>
	<p>Esimerkki: olet suorittanut varusmiespalvelusta 8 vrk, ja palvelusajaksi määräytyi 165 vrk. 8 x 2,10= 16,80.
	Siviilipalveluksesi lyhenee 17 vrk: 347-17=330 vrk</p>
	<h2><a id="Palvelusajan_laskeminen_20"></a>Palvelusajan laskeminen</h2>
	<p>Siviilipalvelusvelvollisen palvelusaika lasketaan siitä päivästä, jolloin siviilipalvelusvelvollinen saapuu palvelukseen. Palvelusaikaan lasketaan palveluksen aloittamispäivä ja kotiuttamispäivä.</p>
	<p>Palvelusaikaan ei lasketa päiviä, jotka siviilipalvelusvelvollinen on:</p>
	<ol>
	<li>
	<p>luvattomasti poissa palveluksesta;</p>
	</li>
	<li>
	<p>40 §:n 2 momentissa tarkoitetulla henkilökohtaisista syistä annetulla lomalla;</p>
	</li>
	<li>
	<p>tahallisesti itse aiheuttamansa vamman tai sairauden vuoksi palvelukseen kykenemätön;</p>
	</li>
	<li>
	<p>rikoksesta epäiltynä pidätettynä tai vangittuna.</p>
	</li>
	</ol>
	<h1><a id="Siviilipalveluksen_kotiuttaminen_ja_keskeyttminen_36"></a>Siviilipalveluksen kotiuttaminen ja keskeyttäminen</h1>
	<p>Kotiuttaminen</p>
	<p>Siviilipalveluspaikan on kotiutettava siviilipalvelusvelvollinen, kun:</p>
	<ol>
	<li>
	<p>hän on kokonaan suorittanut tämän lain mukaisen palveluksensa;</p>
	</li>
	<li>
	<p>hän on täyttänyt 30 vuotta ja hänen palvelusvelvollisuutensa on päättynyt tämän lain 5 §:n 2 momentin perusteella;</p>
	</li>
	<li>
	<p>hänet on 26–28 §:n perusteella vapautettu siviilipalveluksen suorittamisesta;</p>
	</li>
	<li>
	<p>hän on menettänyt Suomen kansalaisuuden;</p>
	</li>
	<li>
	<p>hänelle on palvelusaikana myönnetty lykkäystä;</p>
	</li>
	<li>
	<p>häntä vastaan on tehty rikosilmoitus siviilipalveluksesta kieltäytymisestä tai siviilipalvelusrikoksesta; tai</p>
	</li>
	<li>
	<p>hänelle muusta kuin siviilipalveluksesta kieltäytymisestä tai siviilipalvelusrikoksesta tuomitun vankeusrangaistuksen täytäntöönpano alkaa.</p>
	</li>
	</ol>
	<p>Siviilipalveluskeskus voi harkintansa mukaan kotiuttaa siviilipalvelusvelvollisen, jos:</p>
	<ol>
	<li>
	<p>hän on lääkärinlausunnon mukaan pitkähkön ajan palvelukseen kykenemätön; taikka</p>
	</li>
	<li>
	<p>hän on tehnyt siviilipalveluspaikkaan, sen henkilökuntaan, asiakkaaseen tai omaisuuteen kohdistuvan vakavan rikoksen tai käyttäytyy tavalla, joka osoittaa, että hän vakavasti vaarantaa palvelusturvallisuutta tai työturvallisuutta.</p>
	</li>
	</ol>
	<p>Ennen 2 momentissa tarkoitetun perusteen mukaista kotiuttamista siviilipalveluskeskuksen on kuultava siviilipalvelusvelvollista ja siviilipalveluspaikkaa.</p>
	<p>Siviilipalveluspaikan tai siviilipalveluskeskuksen on annettava siviilipalvelusvelvolliselle kotiuttamispäätös, josta ilmenee suoritettu palvelusaika ja kotiuttamisperuste.</p>
	</div>
	</div>
	<iframe style="visibility:hidden" width="560" height="315" src="http://www.youtube.com/embed/1KAOq7XX2OY" frameborder="0" allowfullscreen></iframe>
	/**
	* ALL CREDIT GOES TO
	* Craig Buckler
	* http://www.sitepoint.com/css3-starwars-scrolling-text/
	*
	* Blame me for the music via embedded video bit.
	* Aug 2015 - ...which probably doesn't work anymore and likely hasn't for some time...
	*/
	/*
	** ALL CREDIT GOES TO
	** Craig Buckler
	** http://www.sitepoint.com/css3-starwars-scrolling-text/
	**
	** Blame me for the music via embedded video bit
	*/

	@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);

	* { padding: 0; margin: 0; }

	body, html
	{
	width: 100%;
	height: 100%;
	font-family: "Droid Sans", arial, verdana, sans-serif;
	font-weight: 700;
	color: #ff6;
	background-color: #000;
	overflow: hidden;
	}

	p#start
	{
	position: relative;
	width: 16em;
	font-size: 200%;
	font-weight: 400;
	margin: 20% auto;
	color: #4ee;
	opacity: 0;
	z-index: 1;
	-webkit-animation: intro 2s ease-out;
	-moz-animation: intro 2s ease-out;
	-ms-animation: intro 2s ease-out;
	-o-animation: intro 2s ease-out;
	animation: intro 2s ease-out;
	}

	@-webkit-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
	}

	@-moz-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
	}

	@-ms-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
	}

	@-o-keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
	}

	@keyframes intro {
	0% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
	}

	h1
	{
	position: absolute;
	width: 2.6em;
	left: 50%;
	top: 25%;
	font-size: 10em;
	text-align: center;
	margin-left: -1.3em;
	line-height: 0.8em;
	letter-spacing: -0.05em;
	color: #000;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index: 1;
	-webkit-animation: logo 5s ease-out 2.5s;
	-moz-animation: logo 5s ease-out 2.5s;
	-ms-animation: logo 5s ease-out 2.5s;
	-o-animation: logo 5s ease-out 2.5s;
	animation: logo 5s ease-out 2.5s;
	}

	h1 sub
	{
	display: block;
	font-size: 0.3em;
	letter-spacing: 0;
	line-height: 0.8em;
	}

	@-webkit-keyframes logo {
	0% { -webkit-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -webkit-transform: scale(0.1); opacity: 0; }
	}

	@-moz-keyframes logo {
	0% { -moz-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -moz-transform: scale(0.1); opacity: 0; }
	}

	@-ms-keyframes logo {
	0% { -ms-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -ms-transform: scale(0.1); opacity: 0; }
	}

	@-o-keyframes logo {
	0% { -o-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -o-transform: scale(0.1); opacity: 0; }
	}

	@keyframes logo {
	0% { transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { transform: scale(0.1); opacity: 0; }
	}

	/* the interesting 3D scrolling stuff */
	#titles
	{
	position: absolute;
	width: 18em;
	height: 50em;
	bottom: 0;
	left: 50%;
	margin-left: -9em;
	font-size: 350%;
	text-align: justify;
	overflow: hidden;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transform: perspective(300px) rotateX(25deg);
	-moz-transform: perspective(300px) rotateX(25deg);
	-ms-transform: perspective(300px) rotateX(25deg);
	-o-transform: perspective(300px) rotateX(25deg);
	transform: perspective(300px) rotateX(25deg);
	}

	#titles:after
	{
	position: absolute;
	content: ' ';
	left: 0;
	right: 0;
	top: 0;
	bottom: 60%;
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	pointer-events: none;
	}

	#titles p
	{
	text-align: justify;
	margin: 0.8em 0;
	}

	#titles p.center
	{
	text-align: center;
	}

	#titles a
	{
	color: #ff6;
	text-decoration: underline;
	}

	#titlecontent
	{
	position: absolute;
	top: 100%;
	-webkit-animation: scroll 100s linear 4s infinite;
	-moz-animation: scroll 100s linear 4s infinite;
	-ms-animation: scroll 100s linear 4s infinite;
	-o-animation: scroll 100s linear 4s infinite;
	animation: scroll 100s linear 4s infinite;
	}

	/* animation */
	@-webkit-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
	}

	@-moz-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
	}

	@-ms-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
	}

	@-o-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
	}

	@keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
	}