Yhteiset Värit

• #FFFFFF
• #F0F0F0
• #E3E3E3
• #444444
• #0089F2
• #FF0000
• #2FC090

Otakantaa

• #17CEE4
• #D4DC3F

Lausuntopalvelu

• #F16521
• #12C4AE

Kansalaisaloite

• #077480
• #BB448E

Kuntalaisaloite

• #ADAD2D
• #E2A31C

									
										<h3>Yhteiset Värit</h3>
<ul class="sg-colors global-colors">
	<li>
		<span class="sg-swatch color--a"></span>
		<span class="sg-label">#FFFFFF</span>
	</li>
	<li>
		<span class="sg-swatch color--b"></span>
		<span class="sg-label">#F0F0F0</span>
	</li>
	<li>
		<span class="sg-swatch color--c"></span>
		<span class="sg-label">#E3E3E3</span>
	</li>
	<li>
		<span class="sg-swatch color--d"></span>
		<span class="sg-label">#444444</span>
	</li>
	<li>
		<span class="sg-swatch color--e"></span>
		<span class="sg-label">#0089F2</span>
	</li>
	<li>
		<span class="sg-swatch color--f"></span>
		<span class="sg-label">#FF0000</span>
	</li>
	<li>
		<span class="sg-swatch color--g"></span>
		<span class="sg-label">#2FC090</span>
	</li>

</ul>

<h3>Otakantaa</h3>
<ul class="sg-colors otk-colors">
	<li>
		<span class="sg-swatch color--a"></span>
		<span class="sg-label">#17CEE4</span>
	</li>
	<li>
		<span class="sg-swatch color--b"></span>
		<span class="sg-label">#D4DC3F</span>
	</li>
</ul>

<h3>Lausuntopalvelu</h3>
<ul class="sg-colors lap-colors">
	<li>
		<span class="sg-swatch color--a"></span>
		<span class="sg-label">#F16521</span>
	</li>
	<li>
		<span class="sg-swatch color--b"></span>
		<span class="sg-label">#12C4AE</span>
	</li>
</ul>

<h3>Kansalaisaloite</h3>
<ul class="sg-colors kaa-colors">
	<li>
		<span class="sg-swatch color--a"></span>
		<span class="sg-label">#077480</span>
	</li>
	<li>
		<span class="sg-swatch color--b"></span>
		<span class="sg-label">#BB448E</span>
	</li>
</ul>

<h3>Kuntalaisaloite</h3>
<ul class="sg-colors kua-colors">
	<li>
		<span class="sg-swatch color--a"></span>
		<span class="sg-label">#ADAD2D</span>
	</li>
	<li>
		<span class="sg-swatch color--b"></span>
		<span class="sg-label">#E2A31C</span>
	</li>
</ul>

									
								

Primary font: "PT Sans", "Helvetica", "Arial", sans-serif;

Primary font italic: "PT Sans", "Helvetica", "Arial", sans-serif;

Primary font bold: "PT Sans", "Helvetica", "Arial", sans-serif;

									
										<p>Primary font: "PT Sans", "Helvetica", "Arial", sans-serif;</p>
<p><em>Primary font italic: "PT Sans", "Helvetica", "Arial", sans-serif;</em></p>
<p><strong>Primary font bold: "PT Sans", "Helvetica", "Arial", sans-serif;</strong></p>
									
								

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

									
										<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>  
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5> 
<h6>Heading Level 6</h6>
									
								

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

									
										<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
									
								

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non nulla eget massa faucibus egestas. Aenean nec pretium purus. In faucibus tortor at sem molestie, ut commodo tellus placerat. Nam vel lectus felis. Integer id auctor dui, eget consectetur mauris. Pellentesque ipsum mauris, euismod non leo id, auctor lobortis dui. Integer et eros mattis, vestibulum neque ut, lacinia nisl.

									
										<p class="ingressi">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non nulla eget massa faucibus egestas. Aenean nec pretium purus. In faucibus tortor at sem molestie, ut commodo tellus placerat. Nam vel lectus felis. Integer id auctor dui, eget consectetur mauris. Pellentesque ipsum mauris, euismod non leo id, auctor lobortis dui. Integer et eros mattis, vestibulum neque ut, lacinia nisl.
</p>
									
								

• Esimerkkiministeriö
• Espoo
• Vantaa
• Turvallisuus
• Esimerkki

									
										<ul class="tag-list">
	<li class="tag-with-icon"><i class="fa fa-university"></i>Esimerkkiministeriö</li>
	<li>Espoo</li>
	<li>Vantaa</li>
	<li>Turvallisuus</li>
	<li>Esimerkki</li>
</ul>
									
								

Iconit

• om-share
• om-_422
• om-_423
• om-_424
• om-_425
• om-_426
• om-_427
• om-_428
• om-_429
• om-angle_down_circle
• om-angle_down
• om-angle_left_circle
• om-angle_left
• om-angle_right_circle
• om-angle_right
• om-angle_up_circle
• om-angle_up
• om-avatar_circle
• om-avatar_outline
• om-avatar_shield
• om-avatar
• om-bars
• om-box_blank
• om-business
• om-caret_down_sign
• om-caret_down
• om-caret_left_sign
• om-caret_left
• om-caret_right_sign
• om-caret_right
• om-caret_up_sign
• om-caret_up
• om-chat_circle
• om-chat
• om-circle_arrow_down
• om-circle_arrow_left
• om-circle_arrow_right
• om-circle_arrow_up
• om-circle_blank
• om-circle_search
• om-clock
• om-code
• om-copy
• om-discussion_circle
• om-document_circle
• om-double_angle_down
• om-double_angle_left
• om-double_angle_right
• om-double_angle_up
• om-edit
• om-enter_sign
• om-enter
• om-exclamation_circle
• om-facebook_sign
• om-facebook
• om-file_alt
• om-file_small_circle
• om-file_small
• om-file_text
• om-file
• om-gallup_circle
• om-gallup
• om-group_circle
• om-group
• om-household
• om-info_circle
• om-info
• om-institution
• om-iteration_circle
• om-kansalaisaloite
• om-keskustelu_circle
• om-keskustelu
• om-kuntalaisaloite
• om-kysely_circle
• om-kysely
• om-lausuntopalvelu_circle
• om-legal_circle
• om-legal
• om-light_bulb
• om-linkedin_sign
• om-linkedin
• om-lock
• om-mail_sign
• om-mail
• om-muu_verkkopalvelu_circle
• om-muu_verkkopalvelu
• om-ok_sign
• om-ok
• om-otakantaa
• om-paste
• om-pencil_circle
• om-pencil
• om-phone
• om-plus_circle
• om-plus
• om-print
• om-question_circle
• om-question_default
• om-question_ring
• om-reload_sign
• om-remove_sign
• om-ring_left
• om-ring_outline
• om-ring_right
• om-rss_sign
• om-rss
• om-search
• om-save
• om-sign_blank
• om-signin
• om-signout
• om-small_arrow_down
• om-small_arrow_left
• om-small_arrow_right
• om-small_arrow_up
• om-spinner
• om-star
• om-tasks
• om-trash
• om-twitter_box
• om-twitter
• om-uniF1C1
• om-warning_sign_outline
• om-warning_sign
• om-youtube_box
• om-youtube

Esimerkki iconien eri koista

• Pieni iconi
• Normaali iconi
• Suuri iconi
• Erittäin suuri iconi

									
										<!-- GENERATED IN ICONS.PHP -->
<h3>Iconit</h3>
<ul class='icons'>
	<li> <i class='icon-search'></i></li>
	<li> <i class='icon-play'></i></li>
	<li> <i class='icon-ok'></i></li>
	<li> <i class='icon-notify'></i></li>
	<li> <i class='icon-warning'></i></li>
	<li> <i class='icon-close'></i></li>
	<li> <i class='icon-add'></i></li>
	<li> <i class='icon-delete'></i></li>
	<li> <i class='icon-tip'></i></li>

	<li> <i class='om-share'></i>om-share</li>
	<li> <i class='om-_422'></i>om-_422</li>
	<li> <i class='om-_423'></i>om-_423</li>
	<li> <i class='om-_424'></i>om-_424</li>
	<li> <i class='om-_425'></i>om-_425</li>
	<li> <i class='om-_426'></i>om-_426</li>
	<li> <i class='om-_427'></i>om-_427</li>
	<li> <i class='om-_428'></i>om-_428</li>
	<li> <i class='om-_429'></i>om-_429</li>
	<li> <i class='om-angle_down_circle'></i>om-angle_down_circle</li>
	<li> <i class='om-angle_down'></i>om-angle_down</li>
	<li> <i class='om-angle_left_circle'></i>om-angle_left_circle</li>
	<li> <i class='om-angle_left'></i>om-angle_left</li>
	<li> <i class='om-angle_right_circle'></i>om-angle_right_circle</li>
	<li> <i class='om-angle_right'></i>om-angle_right</li>
	<li> <i class='om-angle_up_circle'></i>om-angle_up_circle</li>
	<li> <i class='om-angle_up'></i>om-angle_up</li>
	<li> <i class='om-avatar_circle'></i>om-avatar_circle</li>
	<li> <i class='om-avatar_outline'></i>om-avatar_outline</li>
	<li> <i class='om-avatar_shield'></i>om-avatar_shield</li>
	<li> <i class='om-avatar'></i>om-avatar</li>
	<li> <i class='om-bars'></i>om-bars</li>
	<li> <i class='om-box_blank'></i>om-box_blank</li>
	<li> <i class='om-business'></i>om-business</li>
	<li> <i class='om-caret_down_sign'></i>om-caret_down_sign</li>
	<li> <i class='om-caret_down'></i>om-caret_down</li>
	<li> <i class='om-caret_left_sign'></i>om-caret_left_sign</li>
	<li> <i class='om-caret_left'></i>om-caret_left</li>
	<li> <i class='om-caret_right_sign'></i>om-caret_right_sign</li>
	<li> <i class='om-caret_right'></i>om-caret_right</li>
	<li> <i class='om-caret_up_sign'></i>om-caret_up_sign</li>
	<li> <i class='om-caret_up'></i>om-caret_up</li>
	<li> <i class='om-chat_circle'></i>om-chat_circle</li>
	<li> <i class='om-chat'></i>om-chat</li>
	<li> <i class='om-circle_arrow_down'></i>om-circle_arrow_down</li>
	<li> <i class='om-circle_arrow_left'></i>om-circle_arrow_left</li>
	<li> <i class='om-circle_arrow_right'></i>om-circle_arrow_right</li>
	<li> <i class='om-circle_arrow_up'></i>om-circle_arrow_up</li>
	<li> <i class='om-circle_blank'></i>om-circle_blank</li>
	<li> <i class='om-circle_search'></i>om-circle_search</li>
	<li> <i class='om-clock'></i>om-clock</li>
	<li> <i class='om-code'></i>om-code</li>
	<li> <i class='om-copy'></i>om-copy</li>
	<li> <i class='om-discussion_circle'></i>om-discussion_circle</li>
	<li> <i class='om-document_circle'></i>om-document_circle</li>
	<li> <i class='om-double_angle_down'></i>om-double_angle_down</li>
	<li> <i class='om-double_angle_left'></i>om-double_angle_left</li>
	<li> <i class='om-double_angle_right'></i>om-double_angle_right</li>
	<li> <i class='om-double_angle_up'></i>om-double_angle_up</li>
	<li> <i class='om-edit'></i>om-edit</li>
	<li> <i class='om-enter_sign'></i>om-enter_sign</li>
	<li> <i class='om-enter'></i>om-enter</li>
	<li> <i class='om-exclamation_circle'></i>om-exclamation_circle</li>
	<li> <i class='om-facebook_sign'></i>om-facebook_sign</li>
	<li> <i class='om-facebook'></i>om-facebook</li>
	<li> <i class='om-file_alt'></i>om-file_alt</li>
	<li> <i class='om-file_small_circle'></i>om-file_small_circle</li>
	<li> <i class='om-file_small'></i>om-file_small</li>
	<li> <i class='om-file_text'></i>om-file_text</li>
	<li> <i class='om-file'></i>om-file</li>
	<li> <i class='om-gallup_circle'></i>om-gallup_circle</li>
	<li> <i class='om-gallup'></i>om-gallup</li>
	<li> <i class='om-group_circle'></i>om-group_circle</li>
	<li> <i class='om-group'></i>om-group</li>
	<li> <i class='om-household'></i>om-household</li>
	<li> <i class='om-info_circle'></i>om-info_circle</li>
	<li> <i class='om-info'></i>om-info</li>
	<li> <i class='om-institution'></i>om-institution</li>
	<li> <i class='om-iteration_circle'></i>om-iteration_circle</li>
	<li> <i class='om-kansalaisaloite'></i>om-kansalaisaloite</li>
	<li> <i class='om-keskustelu_circle'></i>om-keskustelu_circle</li>
	<li> <i class='om-keskustelu'></i>om-keskustelu</li>
	<li> <i class='om-kuntalaisaloite'></i>om-kuntalaisaloite</li>
	<li> <i class='om-kysely_circle'></i>om-kysely_circle</li>
	<li> <i class='om-kysely'></i>om-kysely</li>
	<li> <i class='om-lausuntopalvelu_circle'></i>om-lausuntopalvelu_circle</li>
	<li> <i class='om-legal_circle'></i>om-legal_circle</li>
	<li> <i class='om-legal'></i>om-legal</li>
	<li> <i class='om-light_bulb'></i>om-light_bulb</li>
	<li> <i class='om-linkedin_sign'></i>om-linkedin_sign</li>
	<li> <i class='om-linkedin'></i>om-linkedin</li>
	<li> <i class='om-lock'></i>om-lock</li>
	<li> <i class='om-mail_sign'></i>om-mail_sign</li>
	<li> <i class='om-mail'></i>om-mail</li>
	<li> <i class='om-muu_verkkopalvelu_circle'></i>om-muu_verkkopalvelu_circle</li>
	<li> <i class='om-muu_verkkopalvelu'></i>om-muu_verkkopalvelu</li>
	<li> <i class='om-ok_sign'></i>om-ok_sign</li>
	<li> <i class='om-ok'></i>om-ok</li>
	<li> <i class='om-otakantaa'></i>om-otakantaa</li>
	<li> <i class='om-paste'></i>om-paste</li>
	<li> <i class='om-pencil_circle'></i>om-pencil_circle</li>
	<li> <i class='om-pencil'></i>om-pencil</li>
	<li> <i class='om-phone'></i>om-phone</li>
	<li> <i class='om-plus_circle'></i>om-plus_circle</li>
	<li> <i class='om-plus'></i>om-plus</li>
	<li> <i class='om-print'></i>om-print</li>
	<li> <i class='om-question_circle'></i>om-question_circle</li>
	<li> <i class='om-question_default'></i>om-question_default</li>
	<li> <i class='om-question_ring'></i>om-question_ring</li>
	<li> <i class='om-reload_sign'></i>om-reload_sign</li>
	<li> <i class='om-remove_sign'></i>om-remove_sign</li>
	<li> <i class='om-ring_left'></i>om-ring_left</li>
	<li> <i class='om-ring_outline'></i>om-ring_outline</li>
	<li> <i class='om-ring_right'></i>om-ring_right</li>
	<li> <i class='om-rss_sign'></i>om-rss_sign</li>
	<li> <i class='om-rss'></i>om-rss</li>
	<li> <i class='om-search'></i>om-search</li>
	<li> <i class='om-save'></i>om-save</li>
	<li> <i class='om-sign_blank'></i>om-sign_blank</li>
	<li> <i class='om-signin'></i>om-signin</li>
	<li> <i class='om-signout'></i>om-signout</li>
	<li> <i class='om-small_arrow_down'></i>om-small_arrow_down</li>
	<li> <i class='om-small_arrow_left'></i>om-small_arrow_left</li>
	<li> <i class='om-small_arrow_right'></i>om-small_arrow_right</li>
	<li> <i class='om-small_arrow_up'></i>om-small_arrow_up</li>
	<li> <i class='om-spinner'></i>om-spinner</li>
	<li> <i class='om-star'></i>om-star</li>
	<li> <i class='om-tasks'></i>om-tasks</li>
	<li> <i class='om-trash'></i>om-trash</li>
	<li> <i class='om-twitter_box'></i>om-twitter_box</li>
	<li> <i class='om-twitter'></i>om-twitter</li>
	<li> <i class='om-uniF1C1'></i>om-uniF1C1</li>
	<li> <i class='om-warning_sign_outline'></i>om-warning_sign_outline</li>
	<li> <i class='om-warning_sign'></i>om-warning_sign</li>
	<li> <i class='om-youtube_box'></i>om-youtube_box</li>
	<li> <i class='om-youtube'></i>om-youtube</li>
</ul>

<h4>Esimerkki iconien eri koista</h4>
<ul class='icons icons-compare'>
	<li><i class='icon-ok size-s'></i>Pieni iconi</li>
	<li><i class='icon-ok'></i>Normaali iconi</li>
	<li><i class='icon-ok size-l'></i>Suuri iconi</li>
	<li><i class='icon-ok size-xl'></i>Erittäin suuri iconi</li>
</ul>

									
								

Painikkeet, eli buttonit

Tumma tyyli

Button

Disabled Button

Button

ButtonLisäinfoa tässä kentässä

Vaalea tyyli

Button

Button

Otakantaa-tyylit

Button

Alt Button

Lausuntopalvelu-tyylit

Button

									
										<h3>Painikkeet, eli buttonit</h3>

<h4>Tumma tyyli</h4>
<p><a href="#" class="btn">Button</a></p>
<!-- <p><a href="#" class="btn alt">Alt Button</a></p> -->
<p><a href="#" class="btn disabled">Disabled Button</a></p>
<p><a href="#" class="btn"><i class="icon-search"></i>Button</a></p>
<p><a href="#" class="btn sub-text">Button<span>Lisäinfoa tässä kentässä</span></a></p>

<h4>Vaalea tyyli</h4>
<p><a href="#" class="btn light">Button</a></p>
<p><a href="#" class="btn light"><i class="icon-search"></i>Button</a></p>

<h4>Otakantaa-tyylit</h4>
<p><a href="#" class="btn btn-otk">Button</a></p>
<p><a href="#" class="btn btn-otk alt">Alt Button</a></p>


<h4>Lausuntopalvelu-tyylit</h4>
<p><a href="#" class="btn btn-lap">Button</a></p>

									
								

Painikeryhmä inputeista

• Peruttu
• Suunnitteilla
• Julkaistu

									
										<div class="btn-group">
	<a href="#" class="active">Painike 1</a>
	<a href="#">Painike 2</a>
	<a href="#">Painike 3</a>
	<a href="#">Painike 4</a>
	<a href="#">Painike 5</a>
	<a href="#">Painike 6</a>
</div>

<h4>Painikeryhmä inputeista</h4>

<div class="btn-group">
	<input class="active" type="submit" value="Muokkaa perustietoja">
	<input type="submit" value="Kirjoita yhteenveto">
	<input type="submit" value="Lisää kieliversio">
	<input type="submit" value="Osallistumisraportti">
</div>

<!-- Muutokset 2.7.2014: Lisätty luokka btn-group-wrapper, jota tulee käyttää enlarged button groupin kanssa. Lisäksi enlargedin sisällä voi käyttää inline-row luokkaa, joka sitoo sen sisällä olevat sanat samalle riville.  -->

<div class="btn-group-wrapper">
	<div class="btn-group enlarged">
		<a href="#" class="active">Painike 1<span class="count">A</span></a>
		<a href="#"><span class="inline-row">Painike 2</span><span class="count">B</span></a>
		<a href="#">Painike 3<span class="count">C</span></a>
		<a href="#">Painike 4<span class="count">D</span></a>
		<a href="#">Painike 5<span class="count">E</span></a>
		<a href="#">Painike 6<span class="count">F</span></a>
	</div>
</div>



<div class="btn-group sorting">
	<a href="#" class="active">Lajittelu 1</a>
	<a href="#">Lajittelu 2</a>
	<a href="#">Lajittelu 3</a>
</div>

<form>
	<h4>Checkbox-painikkeet</h4>
	<div class="form-element">
		<label>Kannatusilmoitusten keräystavat</label>
	</div>
	<div class="form-element">
		<label class="label-as-button">
			<input type="checkbox" checked="checked">Kansalaisaloite.fi
		</label>
	</div>
	<div class="form-element">
		<label class="label-as-button">
			<input type="checkbox" disabled>Muu verkkopalvelu
		</label>
	</div>
	<div class="form-element">
		<label class="label-as-button">
			<input type="checkbox">Paperilomakkeet
		</label>
	</div>
	<h4>Radio-painikkeet</h4>
	<div class="form-element">
		<label>Aloitteen muoto</label>
	</div>
	<div class="form-element">
		<label>
			<input name="example" type="radio" checked="checked">Lakiehdotus
		</label>
	</div>
	<div class="form-element">
		<label>
			<input name="example" type="radio">Ehdotus lainvalmisteluun ryhtymisestä
		</label>
	</div>
</form>

<ul class="btn-group radiogroup">
	<li>
		<input id="rbl0" type="radio" value="0" name="example2" />
		<label for="rbl0">Peruttu</label>
	</li>
	<li>
		<input id="rbl1" type="radio" value="1" name="example2"/>
		<label for="rbl1">Suunnitteilla</label>
	</li>
	<li>
		<input id="rbl2" type="radio" value="2" name="example2"/>
		<label for="rbl2">Julkaistu</label>
	</li>
</ul>
									
								

Floated list

									
										<div class="lift-button-b participation btn transparent om-keskustelu icon-as-bg">
	<p class="count-number" href="//www.foo.bar">17</p>
	<p class="info-text">Miten nyt kerättävä rahoitus tulisi sijoittaa?</p>
	<a href="//www.foo.bar" class="lift-button-link">Osallistu</a>
</div>

<h4>Floated list</h4>
<div id="showParticipations" class="participations cf">
	<h2 class="ongoing">
		Menossa olevat osallistumiset
	</h2>
	<div class="lift-button-b participation float-left btn transparent om-keskustelu icon-as-bg">
		<p class="count-number" href="//www.foo.bar">17</p>
		<p class="info-text">Miten nyt kerättävä rahoitus tulisi sijoittaa?</p>
		<span class="date">26.5. asti</span>
	</div>
	<div class="lift-button-b participation float-left btn transparent om-keskustelu icon-as-bg">
		<p class="count-number" href="//www.foo.bar">17</p>
		<p class="info-text">Miten nyt kerättävä rahoitus tulisi sijoittaa?</p>
		<span class="date">26.5. asti</span>
	</div>
	<div class="lift-button-b participation float-left btn transparent om-keskustelu icon-as-bg">
		<p class="count-number" href="//www.foo.bar">17</p>
		<p class="info-text">Miten nyt kerättävä rahoitus tulisi sijoittaa?</p>
		<span class="date">26.5. asti</span>
	</div>
	<div class="lift-button-b participation float-left btn transparent om-keskustelu icon-as-bg">
		<p class="count-number" href="//www.foo.bar">17</p>
		<p class="info-text">Miten nyt kerättävä rahoitus tulisi sijoittaa?</p>
		<span class="date">26.5. asti</span>
	</div>
	<div class="lift-button-b participation float-left btn transparent om-keskustelu icon-as-bg">
		<p class="count-number" href="//www.foo.bar">17</p>
		<p class="info-text">Miten nyt kerättävä rahoitus tulisi sijoittaa?</p>
		<span class="date">26.5. asti</span>
	</div>
	<div class="lift-button-b participation float-left btn transparent om-keskustelu icon-as-bg">
		<p class="count-number" href="//www.foo.bar">17</p>
		<p class="info-text">Miten nyt kerättävä rahoitus tulisi sijoittaa?</p>
		<span class="date">26.5. asti</span>
	</div>
</div>
									
								

Edellinen ja seuraava -painikkeet, joiden välissä mahdollista käyttää tallenna-painiketta

									
										<div class="process-nav dummmy-container scroll--shadow">
	<ul>
		<li class="process-item">
			<a href="" class="process-button past">
				<i class="icon-register"></i>Luo/Muokkaa</a>
		</li>
		<li class="process-item">
			<a href="" class="process-button active">
				<i class="icon-mail"></i>Lähetä</a>
		</li>
		<li class="process-item">
			<a href="" class="process-button">
				<i class="icon-people"></i>Lausunnonantajat</a>
		</li>
		<li class="process-item">
			<a href="" class="process-button">
				<i class="icon-chart"></i>Yhteenveto</a>
		</li>
	</ul>
</div>

<h4>Edellinen ja seuraava -painikkeet, joiden välissä mahdollista käyttää tallenna-painiketta</h4>

<div class="process-actions">
	<ul>
		<li class="action-item previous-item"><a class="btn prev" rel="prev" href=""><i class="icon-arrow-back"></i>Edellinen</a></li>
		<li class="action-item next-item"><a class="btn next" rel="next" href="">Jatka<i class="icon-arrow-forward"></i></a></li>
		<li class="action-item middle-section">
			<input class="btn" href="" value="Tallenna ja keskeytä">
		</li>
	</ul>
</div>
									
								

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis.

Aliquam erat volutpat. Mauris vulputate scelerisque feugiat. Cras a erat a diam venenatis aliquam. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor, rutrum eu sollicitudin eu, commodo at leo. Suspendisse potenti. Sed eu nibh sit amet quam auctor feugiat vel et risus. Maecenas eu urna adipiscing neque dictum mollis suscipit in augue. Praesent pulvinar condimentum sagittis. Maecenas laoreet neque non eros consectetur fringilla. Donec vitae risus leo, vitae pharetra ipsum. Sed placerat eros eget elit iaculis semper. Aliquam congue blandit orci ac pretium.

Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui.

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.

Donec posuere fringilla nunc, vitae venenatis diam scelerisque vel. Nullam vitae mauris magna. Mauris et diam quis justo volutpat tincidunt congue nec magna. Curabitur vitae orci elit. Ut mollis massa id magna vestibulum consequat. Proin rutrum lectus justo, sit amet tincidunt est. Vivamus vitae lacinia risus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, suscipit repellendus nulla accusantium deserunt sed explicabo voluptate sapiente ratione inventore molestiae nihil earum repellat quia odit vitae perspiciatis aliquam amet?

									
										<p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis. </p>

<p><a href="#">Aliquam erat volutpat.</a> Mauris vulputate scelerisque feugiat. Cras a erat a diam venenatis aliquam. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor, rutrum eu sollicitudin eu, commodo at leo. Suspendisse potenti. Sed eu nibh sit amet quam auctor feugiat vel et risus. Maecenas eu urna adipiscing neque dictum mollis suscipit in augue. Praesent pulvinar condimentum sagittis. Maecenas laoreet neque non eros consectetur fringilla. Donec vitae risus leo, vitae pharetra ipsum. Sed placerat eros eget elit iaculis semper. Aliquam congue blandit orci ac pretium.</p>

<img src="../../images/fpo_16x9.png" alt="16x9 Image" />
<p>Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui.
</p>

<blockquote>
	<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p>
</blockquote>
<p>Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim.
</p>

<div class="text">
	<ul>
		<li>This is a list item in an unordered list</li>
		<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
		<li>
			Lists can be nested inside of each other
			<ul>
				<li>This is a nested list item</li>
				<li>This is another nested list item in an unordered list</li>
			</ul>
		</li>
		<li>This is the last list item</li>
	</ul>
</div>
<div class="text">
	<ol>
		<li>This is a list item in an ordered list</li>
		<li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
		<li>
			Lists can be nested inside of each other
			<ol>
				<li>This is a nested list item</li>
				<li>This is another nested list item in an ordered list</li>
			</ol>
		</li>
		<li>This is the last list item</li>
	</ol>
</div>
<p>Donec posuere fringilla nunc, vitae venenatis diam scelerisque vel. Nullam vitae mauris magna. Mauris et diam quis justo volutpat tincidunt congue nec magna. Curabitur vitae orci elit. Ut mollis massa id magna vestibulum consequat. Proin rutrum lectus justo, sit amet tincidunt est. Vivamus vitae lacinia risus.
</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, suscipit repellendus nulla accusantium deserunt sed explicabo voluptate sapiente ratione inventore molestiae nihil earum repellat quia odit vitae perspiciatis aliquam amet?</p>