PokerStrategy.com Newsguide

Typography

Headline H2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis cum veniam libero voluptas doloremque perspiciatis, temporibus. Ad animi saepe molestias quaerat.

Headline H3

Headline H4

Headline H5

Headline H6

Headlines besides an image

Headline H4

Headline H4

Floating left


<!-- Only for h2, h3, h4, h5 and h6 tags -->
<h3 class="left">Headline</h3>

Floating right


<!-- Only for h2, h3, h4, h5 and h6 tags -->
<h3 class="right">Headline</h3>

This is a paragraph

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

Status Icons next to a link

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, Username Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Username with Basic status

Username with Bronze status

Username with Silver status

Username with Gold status

Username with Platinum status

Username with Diamond status

Username with Black status

Editor, Moderator, Coach, ... status


<!-- Basic -->
<a href="#" class="profileStatus--icon xs-basic">Username</a>

<!-- Bronze -->
<a href="#" class="profileStatus--icon xs-bronze">Username</a>

<!-- Silver -->
<a href="#" class="profileStatus--icon xs-silver">Username</a>

<!-- Gold -->
<a href="#" class="profileStatus--icon xs-gold">Username</a>

<!-- Platinum -->
<a href="#" class="profileStatus--icon xs-platinum">Username</a>

<!-- Diamond -->
<a href="#" class="profileStatus--icon xs-diamond">Username</a>

<!-- Black -->
<a href="#" class="profileStatus--icon xs-black">Username</a>

<!-- Editor -->
<a href="#" class="profileStatus--icon xs-editor">Username</a>

<!-- Moderator -->
<a href="#" class="profileStatus--icon xs-editor">Username</a>

<!-- Admin -->
<a href="#" class="profileStatus--icon xs-admin">Username</a>

<!-- Super Moderator -->
<a href="#" class="profileStatus--icon xs-SuperModerator">Username</a>

<!-- Head Admin -->
<a href="#" class="profileStatus--icon xs-headadmin">Username</a>

<!-- Coach -->
<a href="#" class="profileStatus--icon xs-coach">Username</a>

Lists

This is a ul-List

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet


<ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
</ul>

This is a ul-List with links


<ul>
    <li><a href="#">Listpoint</a></li>
    <li><a href="#">Listpoint</a></li>
    <li><a href="#">Listpoint</a></li>
    <li><a href="#">Listpoint</a></li>
</ul>

This is a ol-List

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet


<ol>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
</ol>

This is a ol-List with links


<ol>
    <li><a href="#">Listpoint</a></li>
    <li><a href="#">Listpoint</a></li>
    <li><a href="#">Listpoint</a></li>
    <li><a href="#">Listpoint</a></li>
</ol>

Poker Room List

If you want to change the poker room images in the list, you only have to change the class name, e.g. circle-sm-poker770.

You can find the corresponding class names in the table below.

Image	Class name
888 Poker	`circle-sm-888`
bet365	`circle-sm-bet365`
betclic	`circle-sm-betclic`
Betfair Poker	`circle-sm-betfair`
Betfred	`circle-sm-betfred`
Coral Poker	`circle-sm-coral`
Dafa Poker	`circle-sm-dafa`
Everest Poker	`circle-sm-everest`
Gala Poker	`circle-sm-gala`
Ladbrokes Poker	`circle-sm-ladbrokes`
Mansion Poker	`circle-sm-mansion`
Netbet	`circle-sm-netbet`
PaddyPower Poker	`circle-sm-paddy`
PKR	`circle-sm-pkr`
PokerStars	`circle-sm-stars`
Titan Poker	`circle-sm-titan`
Turbo Poker fr	`circle-sm-turbo`
Unibet Poker	`circle-sm-unibet`
William Hill	`circle-sm-hill`
Winamax	`circle-sm-winamax`
Winner Poker	`circle-sm-winner`
WPT	`circle-sm-wpt`


<div class="pokerRoomList">
    <ul>
        <li class="pokerRoomList--provider circle-sm-poker770">
            <a href="#">Poker770</a>
        </li>
    </ul>
</div>

Social Media List

If you want to change the poker room images in the list, you have to change the class name, e.g. circle-sm-facebook.

You can find the corresponding class names in the table below.

How to use the 'onclick' attribute

Example:
<a title="" href="" onclick="eShare.facebook('uWCHSN'); return false;">

Fill onclick="" with this content: eShare.facebook('uWCHSN'); return false;

Replace only the name 'facebook' with the a new social media name from the list below, if you want to use another social media link, e.g. for Twitter. Change it from: eShare.facebook to eShare.twitter

The title attribute

Use e.g.:
title="Invite Facebook friends"
title="Invite Twitter followers"
title="Invite Google friends"
title="Invite via Digg.com"

Invite your friends now on social media

Image	Class name
Baidu	`circle-sm-baidu`
Digg	`circle-sm-digg`
Facebook	`circle-sm-facebook`
Google+	`circle-sm-googleplus`
Gree.jp	`circle-sm-gree-jp`
Gree.jp	`circle-sm-gree-jp`
Hyves.nl	`circle-sm-hyves-nl`
Link	`circle-sm-link`
Linked in	`circle-sm-linkedin`
Mail.ru	`circle-sm-mail-ru`
Odnoklassniki	`circle-sm-odnoklassniki`
Orkut	`circle-sm-orkut`
Qzone	`circle-sm-qzone`
Reddit	`circle-sm-reddit`
Ren Ren	`circle-sm-ren-ren`
Skyrock	`circle-sm-skyrock`
Sonico	`circle-sm-sonico`
StudiVZ	`circle-sm-studi-vz`
Stumbleupon	`circle-sm-stumbleupon`
Tumblr	`circle-sm-tumblr`
Tuenti	`circle-sm-tuenti`
Twitter	`circle-sm-twitter`
vKontakte	`circle-sm-vkontakte`
Weibo	`circle-sm-weibo`


<div class="socialMediaBox">
    <h4>Invite your friends now on social media</h4>
        <ul>
            <li class="socialMediaBox--provider circle-sm-facebook">
                <a title="" href="#" onclick="">...</a>
            </li>
        </ul>
</div>

Links

Links inside of an paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Link in a paragraph Vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis cum veniam libero voluptas doloremque perspiciatis temporibus.


<a href="#"></a>

Image as a link

                
<!-- Standard and Header Image -->
<a href="#"><img class="modulFull" title="" alt="" src=""></a>

<!-- Image Left -->
<a href="#"><img class="modulLeft" title="" alt="" src=""></a>

<!-- Image Right -->
<a href="#"><img class="modulRight" title="" alt="" src=""></a>

Stand alone links

Example 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores dignissimos quidem a dolorem provident odio, omnis sit officia assumenda.

Stand alone link

Example 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit asperiores dignissimos quidem a dolorem provident odio, omnis sit officia assumenda.

Stand alone link as list point


<!-- Stand alone link | Example 1 -->
<p>
    <a href="#"></a>
</p>

<!-- Stand alone link as list point | Example 2 -->
<ul>
    <li><a href="#">Listpoint</a></li>
</ul>

Link list


<ul>
    <li><a href="#">Listpoint</a></li>
    <li><a href="#">Listpoint</a></li>
    <li><a href="#">Listpoint</a></li>
    <li><a href="#">Listpoint</a></li>
</ul>

Images

Image dimensions

If you search for images or get images from our partners please consider that the images have the corresponding dimensions which are mentioned in the yellow boxes below.

Without any text elements in an image the minimum size works fine on mobile devices.

If you want to use an image without losing quality especially if it contains text then the image must have the ideal dimension.

Images with left or right orientation

Minimum dimension (without text inside the image)
width: 400px / height: variable

Ideal dimension (especially with text inside)
width: 530px / height: variable

Standard (full view) and Header images

Minimum dimension (without text inside the image)
width: 500px / height: variable

Ideal dimension (especially with text inside)
width: 690px / height: variable

Image in a paragraph with right orientation

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores dignissimos quidem a dolorem provident odio, omnis sit, officia assumenda, unde nam quisquam illo facilis reiciendis placeat tenetur quae architecto. Vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis cum veniam libero voluptas doloremque perspiciatis, temporibus. Ad animi saepe molestias quaerat. Eaque, laboriosam voluptate in saepe cupiditate? Nobis, nesciunt.Vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis cum veniam libero voluptas doloremque perspiciatis, temporibus. Ad animi saepe molestias quaerat. Eaque, laboriosam voluptate in saepe cupiditate? Nobis, nesciunt.Vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis cum veniam libero voluptas doloremque perspiciatis, temporibus. Ad animi saepe molestias quaerat. Eaque, laboriosam voluptate in saepe cupiditate? Nobis, nesciunt.


<img class="modulRight" title="" alt="" src="">

Image in a paragraph with left orientation

                
<img class="modulLeft" title="" alt="" src="">

Standard image

                
<img class="modulFull" title="" alt="" src="">

Header image

                
<img class="modulFull" title="" alt="" src="">

Image FullView with caption

aaron — Lorem ipsum dolor sit amet, consectetur adipiscing elit.

                
<figure class="modulFull">
    <img title="" alt="" src="">
    <figcaption>Lorem ipsum dolor sit amet.</figcaption>
</figure>

Image left or right with caption

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

                
<figure class="modulLeft">
    <img title="" alt="" src="">
    <figcaption>Lorem ipsum dolor sit amet.</figcaption>
</figure>

General Tables

Hints for Tables

Here you will find some useful links which will help you to style your tables.

Including Image

If you want to insert an image next to an text element, then use the class element class="textAdjacent" in the <img> tag

Including usernames

If you want to put a link to show the name of the user then insert the tag snippets of the status icons.

Example: <a href="#" class="profileStatus--icon xs-basic">Username</a>

Text alignment

Use it only in exception! If you need a different table cell alignment then use this corresponding classes class="orientationLeft" class="orientationCenter" class="orientationRight" in the <th> or <td>

Example:
<tr>
<td class="orientationRight">Text</td>
</tr>

Only Body

Text	Text	Text
Text	Text	Text
Text	Text	Text


<div class="tableWrapper">
    <div class="tableWrapper--responsive">
        <table class="tableDefault">
            <tbody>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

With Header

Title	Title	Title
Text	Text	Text
Text	Text	Text
Text	Text	Text


<div class="tableWrapper">
    <div class="tableWrapper--responsive">
        <table class="tableDefault">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Title</th>
                    <th>Title</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

With Table Caption

Title
Text	Text	Text
Text	Text	Text
Text	Text	Text

                
<div class="tableWrapper">
    <div class="tableWrapper--responsive">
        <table class="tableDefault">
            <caption>Title</caption>
                <tbody>
                    <tr>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                    </tr>
                    <tr>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                    </tr>
                    <tr>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                    </tr>
            </tbody>
        </table>
    </div>
</div>

With Table Caption and Footer

Title
Text	Text	Text
Text	Text	Text
Text	Text	Text
Footer

                
<div class="tableWrapper">
    <div class="tableWrapper--responsive">
        <table class="tableDefault">
            <caption>Title</caption>
            <tbody>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">Footer</td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

With Table Caption, Subtitle Row and Footer

Title
Sub Header	Sub Header	Sub Header
Text	Text	Text
Text	Text	Text
Text	Text	Text
Footer

                
<div class="tableWrapper">
    <div class="tableWrapper--responsive">
        <table class="tableDefault">
            <caption>Title</caption>
                <thead>
                    <tr>
                        <th>Sub Header</th>
                        <th>Sub Header</th>
                        <th>Sub Header</th>
                    </tr>
                </thead>
            <tbody>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">Footer</td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

With Image and Header

Title	Title	Title
Text	Text	Text
Text	Text	Text
Text	Text	Text


<div class="tableWrapper">
    <img src="http://resources.pokerstrategy.com/2014/07/21/sou-top.png" alt="" />
    <div class="tableWrapper--responsive">
        <table class="tableDefault">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Title</th>
                    <th>Title</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

With vertical and horizontal Heading

Title	Title	Title
Sub Header	Text	Text
Sub Header	Text	Text
Sub Header	Text	Text


<div class="tableWrapper">
    <div class="tableWrapper--responsive">
        <table class="tableDefault tableDefault--subColumn">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Title</th>
                    <th>Title</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Sub Header</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                <tr>
                    <td>Sub Header</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                <tr>
                    <td>Sub Header</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Extended Tables

With Header

Title	Title	Title
Text	Text	Text
Text	Text	Text
Text	Text	Text


<div class="tableWrapper">
    <div class="tableWrapper--responsive">
        <table class="tableDefault tableExtended">
            <thead>
                <tr>
                    <th>Text</th>
                    <th>Text</th>
                    <th>Text</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

With Caption and Sub title

Title
Sub title	Sub title	Sub title
Text	Text	Text
Text	Text	Text
Text	Text	Text


<div class="tableWrapper">
    <div class="tableWrapper--responsive">
        <table class="tableDefault tableExtended">
            <caption>Title</caption>
                <thead>
                    <tr>
                        <th>Sub title</th>
                        <th>Sub title</th>
                        <th>Sub title</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                    </tr>
                    <tr>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                    </tr>
                    <tr>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                    </tr>
                </tbody>
            </table>
</div>
</div>

With Caption, Sub title and Footer

Title
Sub title	Sub title	Sub title
Text	Text	Text
Text	Text	Text
Text	Text	Text
Footer


<div class="tableWrapper">
    <div class="tableWrapper--responsive">
        <table class="tableDefault tableExtended">
            <caption>Title</caption>
                <thead>
                    <tr>
                        <th>Sub title</th>
                        <th>Sub title</th>
                        <th>Sub title</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                    </tr>
                    <tr>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                    </tr>
                    <tr>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3">Footer</td>
                    </tr>
                </tfoot>
        </table>
    </div>
</div>

Nested Table

Title
Sub title	Sub title	Sub title	Sub title	Sub title	Sub title
Text	Text	Text	Text	Text	Text
Text	Text	Text	Text	Text	Text
Text	Text	Text	Text	Text	Text

col class

If you have more or less columns as shown in the table above you have to move the class class="tableExtended--divider" only to the corresponding <col>. Because this class will make the right throughout border for all cells in this dedicated column.

Example: If you have 8 columns the throughout line has to be after the 4th column
<colgroup>
<col>
<col>
<col>
<col class="tableExtended--divider"> ← 4. Col
<col>
<col>
<col>
<col>
</colgroup>


<div class="tableWrapper">
    <div class="tableWrapper--responsive">
        <table class="tableDefault tableExtended">
            <caption>Title</caption>
                <colgroup>
                    <col>
                    <col>
                    <col class="tableExtended--divider">
                    <col>
                    <col>
                    <col>
                </colgroup>
                <thead>
                    <tr>
                        <th>Sub title</th>
                        <th>Sub title</th>
                        <th>Sub title</th>
                        <th>Sub title</th>
                        <th>Sub title</th>
                        <th>Sub title</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                    </tr>
                    <tr>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                    </tr>
                </tbody>
        </table>
    </div>
</div>

Nested Table with Footer

Title
Sub title	Sub title	Sub title	Sub title	Sub title	Sub title
Text	Text	Text	Text	Text	Text
Text	Text	Text	Text	Text	Text
Text	Text	Text	Text	Text	Text
Footer


<div class="tableWrapper">
    <div class="tableWrapper--responsive">
        <table class="tableDefault tableExtended">
            <caption>Title</caption>
                <colgroup>
                    <col>
                    <col>
                    <col class="tableExtended--divider">
                    <col>
                    <col>
                    <col>
                </colgroup>
                <thead>
                    <tr>
                        <th>Sub title</th>
                        <th>Sub title</th>
                        <th>Sub title</th>
                        <th>Sub title</th>
                        <th>Sub title</th>
                        <th>Sub title</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                        <td>Text</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="6">Text</td>
                    </tr>
                </tfoot>
        </table>
    </div>
</div>

Special ranking Table

	SCOOP Event #24-H $1.050 PLO Rebuy 6-max Turbo
Rank	Text	Text
1.	Text	Text
2.	Text	Text
	Player: 298 \| Award pool: $888.000


<div class="tableWrapper">
    <div class="tableWrapper--responsive">
        <table class="tableDefault tableExtended tableExtended--subHead">
            <thead>
                <tr>
                    <th class="orientationLeft" ><img alt="" src=""></th>
                    <th colspan="2" class="orientationCenter">Text</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
                <tr>
                    <td>Text</td>
                    <td>Text</td>
                    <td>Text</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td class="orientationLeft"><img alt="" src=""></td>
                    <td colspan="2">Text</td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

Progress Bar

If you want to adapt the green bar to your values, you only have to change the width value style="width: 10%;" in percent.

Please follow this link to get the file pathes for the flags

$300.000 Challenge progress

$13.104

$90.000

$210.000


<h4>...</h4>

<div class="progressElement clearfix">

<!-- Progress bar One  -->
<div class="progressElement--content">
<img src=""/>
<div class="progressElement--content-progressBar">
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" style="width: 0%;"></div>
</div>
<p>...</p>
</div>
</div>

<!-- Progress bar Two -->
<div class="progressElement--content">
<img src=""/>
<div class="progressElement--content-progressBar">
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" style="width: 0%;"></div>
</div>
<p>...</p>
</div>
</div>

</div>

Monthly Pokerroom Overview

This is a small overview with 4 pokerrooms, but of course you can add more.
You can find the images of the pokerrooms in the table below.

6.000 in Turnieren fuer neue Spieler
MPN Poker Tour Malta
2x5.000-Ersteinzahler-Freerolls
3.000 Sunday Freeroll

6.000 in Turnieren fuer neue Spieler
MPN Poker Tour Malta
2x5.000-Ersteinzahler-Freerolls
3.000 Sunday Freeroll
2x5.000-Ersteinzahler-Freerolls

6.000 in Turnieren fuer neue Spieler
MPN Poker Tour Malta
2x5.000-Ersteinzahler-Freerolls
3.000 Sunday Freeroll

6.000 in Turnieren fuer neue Spieler
MPN Poker Tour Malta
2x5.000-Ersteinzahler-Freerolls
3.000 Sunday Freeroll
2x5.000-Ersteinzahler-Freerolls

Image	Link
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/box/24h.jpg
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/box/770.jpg
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/box/888.jpg
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/box/bet365.jpg
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/box/betfair.jpg
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/box/betfred.jpg
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/box/cake.jpg
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/box/coral.jpg
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/box/everest.jpg
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/box/gala.jpg
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/box/heaven.jpg
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/box/hill.jpg
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/box/ladbrokes.jpg
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/box/mansion.jpg
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/box/paddy.jpg
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/box/pkr.jpg
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/box/stars.jpg
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/box/titan.jpg
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/box/unibet.jpg
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/box/winner.jpg


<!-- First Row -->
<div class="pokerroomPromotionBox">
<!-- Left Pokerroom -->
    <div class="pokerroomPromotionBox--content">
        <img alt="" src="">
        <ul>
            <li><a> </a></li>
            <li><a> </a></li>
        </ul>
    </div>
<!-- Right Pokerroom -->
    <div class="pokerroomPromotionBox--content">
        <img alt="" src=" ">
        <ul>
            <li><a> </a></li>
            <li><a> </a></li>
        </ul>
    </div>
</div>

<!-- Second Row -->
<div class="pokerroomPromotionBox">
<!-- Left Pokerroom -->
    <div class="pokerroomPromotionBox--content">
        <img alt="" src=" ">
        <ul>
            <li><a> </a></li>
            <li><a> </a></li>
        </ul>
    </div>
<!-- Right Pokerroom -->
    <div class="pokerroomPromotionBox--content">
        <img alt="" src="">
        <ul>
            <li><a> </a></li>
            <li><a> </a></li>
        </ul>
    </div>
</div>

Billboards and Boxes

Question of the day

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Question of the Day

Quos blanditiis cum veniam libero voluptas doloremque perspiciatis, temporibus. Ad animi saepe molestias quaerat.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


<div class="questionBox--content">
    <blockquote>
        <h2>Question of the Day</h2>
        <p>Quos blanditiis cum veniam libero.</p>
    </blockquote>
</div>

Coaching Box with image

Game type

SNG

Coach:

likandoo

Status:

Gold

Date:

07. May, 20:00 PM

Language:

Englisch

Coaching

Image dimensions

Minimum dimension (without text inside the image)
width: 400px / height: variable

Ideal dimension (especially with text inside)
width: 530px / height: variable

                
<div class="modulLeft">
    <div class="coachingBox">
    <img title="" alt="" src="...">
        <div class="coachingBox--content">
            <p>Game type</p>
            <h4>...</h4>
            <p>Coach:</p>
            <h4>...</h4>
            <p>Status:</p>
            <h4>...</h4>
            <p>Date:</p>
            <h4>...</h4>
            <p>Language:</p>
            <h4>...</h4>
            <a href="#" class="button blue">Coaching</a>
        </div>
    </div>
</div>

Coaching Box without image

Game type

SNG

Coach:

likandoo

Status:

Gold

Date:

07. May, 20:00 PM

Language:

Englisch

Coaching

                
<div class="modulLeft">
    <div class="coachingBox">
        <div class="coachingBox--content">
            <p>Game type</p>
            <h4>...</h4>
            <p>Coach:</p>
            <h4>...</h4>
            <p>Status:</p>
            <h4>...</h4>
            <p>Date:</p>
            <h4>...</h4>
            <p>Language:</p>
            <h4>...</h4>
            <a href="#" class="button blue">Coaching</a>
        </div>
    </div>
</div>

Coaching Box full view

Minimum list entries should be 5. If you have only 4 use the small box below.

Restriction

Only landscape formats are allowed.

Image dimensions

Minimum dimension (without text inside the image)
width: 400px / height: max. 320px

Ideal dimension (especially with text inside)
width: 530px / height: max. 420px

Game type:
SNG
Coach:
likandoo
Status:
Gold
Date:
07. May, 20:00 PM
Language:
Englisch

Coaching

                
<div class="coachingBoxFull">
    <img title="" alt="" src="">
    <ul class="coachingBox--content">
        <li>Game type:</li>
        <li>...</li>
        <li>Coach:</li>
        <li>...</li>
        <li>Status:</li>
        <li>...</li>
        <li>Date:</li>
        <li>...</li>
        <li>Language:</li>
        <li>...</li>
    </ul>
    <div class="center">
        <a class="button blue" href="#">Coaching</a>
    </div>
</div>

Coaching Box full view small

Restriction

Only landscape formats are allowed.

Image dimensions

Minimum dimension (without text inside the image)
width: 400px / height: max. 320px

Ideal dimension (especially with text inside)
width: 530px / height: max. 420px

Game type:
SNG
Coach:
likandoo
Status:
Gold
Date:
07. May, 20:00 PM

Coaching

                
<div class="coachingBoxFullSmall">
<img title="" alt="" src="">
<ul class="coachingBox--content">
<li>Game type:</li>
<li>...</li>
<li>Coach:</li>
<li>...</li>
<li>Status:</li>
<li>...</li>
<li>Date:</li>
<li>...</li>
</ul>
<div class="center">
<a class="button blue" href="#">Coaching</a>
</div>
</div>

Video Box with quick summary

Game type:

SNG

Coach:

likandoo

Status:

Gold

Date:

07. May, 20:00 PM

Language:

Englisch

Video

adipisicing elit. Quos blanditiis cum veniam libero voluptas doloremque perspiciatis, temporibus. Ad animi saepe molestias quaerat. Eaque, laboriosam voluptate in saepe cupiditate? Nobis, nesciunt.Vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis cum veniam libero voluptas doloremque perspiciatis, temporibus. Ad animi saepe molestias quaerat adipisicing elit. Quos blanditiis cum veniam libero voluptas doloremque perspiciatis, temporibus. Ad animi saepe molestias quaerat. Eaque, laboriosam voluptate in saepe cupiditate? Nobis, nesciunt.Vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis cum veniam libero voluptas doloremque perspiciatis, temporibus. Ad animi saepe molestias quaeratadipisicing elit. Quos blanditiis cum veniam libero voluptas doloremque perspiciatis, temporibus. Ad animi saepe molestias quaerat. Eaque, laboriosam voluptate in saepe cupiditate? Nobis, nesciunt.Vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis cum veniam libero voluptas doloremque perspiciatis, temporibus. Ad animi saepe molestias quaerat

Video thumbnail dimensions

Minimum dimension (without text inside the image)
width: 400px / height: variable

Ideal dimension (especially with text inside)
width: 530px / height: variable

                
<div class="modulLeft">
    <div class="videoBox">
        <a href="#">
        <div class="videoBox--teaser-thumb">
            <i class="icon icon-play"></i>
            <figure>
            <img title="" alt="" src=""/>
            </figure>
        </div>
        </a>
        <div class="videoBox--content">
            <p>Game type:</p>
            <h4>...</h4>
            <p>Coach:</p>
            <h4>...</h4>
            <p>Status:</p>
            <h4>Gold</h4>
            <p>Date:</p>
            <h4>...</h4>
            <p>Language:</p>
            <h4>...</h4>
            <a class="button blue" href="#">Video</a>
        </div>
    </div>
</div>

Video Teaser Full view

Video teaser images

Minimum dimension (without text inside the image)
width: 500px / height: variable

Ideal dimension (especially with text inside)
width: 690px / height: variable

                
<a href="#">
    <div class="videoBox--teaser-fullView">
        <i class="icon icon-play"></i>
        <figure>
            <img title="aaron" alt="aaron" src="" />
        </figure>
    </div>
</a>

Video Preview Elements for primary and secondary videos

Headline consectetur adipisicing

Headline consectetur adipisicing

Headline consectetur adipisicing

Headline consectetur adipisicing

                
<!-- Primary Video Left -->
<div class="videoPreview left">
    <a href="#">
        <div class="videoPreview--teaser-thumb">
            <i class="icon icon-play"></i>
            <figure>
                <img src="" alt="" />
            </figure>
        </div>
    </a>
    <div class="videoPreview--content primary">
        <h4>Headline</h4>
        <p>...</p>
    </div>
</div>

<!-- Primary Video Right -->
<div class="videoPreview">
    <a href="#">
        <div class="videoPreview--teaser-thumb">
            <i class="icon icon-play"></i>
            <figure>
                <img src="" alt="" />
            </figure>
        </div>
    </a>
    <div class="videoPreview--content primary">
            <h4>Headline</h4>
        <p>...</p>
    </div>
</div>

<!-- Secondary Video Left -->
<div class="videoPreview left">
    <a href="#">
        <div class="videoPreview--teaser-thumb">
            <i class="icon icon-play"></i>
            <figure>
                <img src="" alt="" />
            </figure>
        </div>
    </a>
    <div class="videoPreview--content secondary withExtraMargin">
        <h4>Headline</h4>
    </div>
</div>

<!-- Secondary Video Right -->
<div class="videoPreview">
    <a href="#">
        <div class="videoPreview--teaser-thumb">
        <i class="icon icon-play"></i>
            <figure>
                <img src="" alt="" />
            </figure>
        </div>
    </a>
    <div class="videoPreview--content secondary withExtraMargin">
        <h4>Headline</h4>
    </div>
</div>

Video Preview Elements for primary videos

Headline

Headline

                
<!-- Primary Video Left -->
<div class="videoPreview left">
    <a href="#">
        <div class="videoPreview--teaser-thumb">
            <i class="icon icon-play"></i>
            <figure>
                <img src="" alt="" />
            </figure>
        </div>
    </a>
    <div class="videoPreview--content primary withExtraMargin">
        <h4 class="profileStatus--icon xs-basic">Headline</h4>
    <p>...</p>
    </div>
</div>

<!-- Primary Video Right -->
<div class="videoPreview">
    <a href="#">
        <div class="videoPreview--teaser-thumb">
            <i class="icon icon-play"></i>
            <figure>
                <img src="" alt="" />
            </figure>
        </div>
    </a>
    <div class="videoPreview--content primary withExtraMargin">
        <h4 class="profileStatus--icon xs-basic">Headline</h4>
    <p>...</p>
    </div>
</div>

Video Preview Elements for secondary videos

Headline

Headline

Headline

                
<!-- Secondary Video Left -->
<div class="videoPreview left">
    <a href="#">
        <div class="videoPreview--teaser-thumb">
            <i class="icon icon-play"></i>
            <figure>
                <img src="" alt="" />
            </figure>
        </div>
    </a>
    <div class="videoPreview--content secondary">
        <h4 class="profileStatus--icon xs-basic">Headline</h4>
    </div>
</div>

<!-- Secondary Video Right -->
<div class="videoPreview">
    <a href="#">
        <div class="videoPreview--teaser-thumb">
            <i class="icon icon-play"></i>
            <figure>
                <img src="" alt="" />
            </figure>
        </div>
    </a>
    <div class="videoPreview--content secondary">
        <h4 class="profileStatus--icon xs-basic">Headline</h4>
    </div>
</div>

<!-- Secondary Video Right -->
<div class="videoPreview left">
    <a href="#">
        <div class="videoPreview--teaser-thumb">
            <i class="icon icon-play"></i>
            <figure>
                <img src="" alt="" />
            </figure>
        </div>
    </a>
    <div class="videoPreview--content secondary withExtraMargin">
        <h4 class="profileStatus--icon xs-basic">Headline</h4>
    </div>
</div>

<!-- Use this div hence the next elements (e.g. links or paragraph) float below the odd video preview boxes -->
<div class="clearfix"></div>

Promotion Box left

General Image dimensions

Maximum width: 200px / height: variable

Poker Room Icons in circle form

Maximum width: 80px / height: 80px

100% up to $600 Bonus

PokerStars

Get your bonus now

Promotion Box left

Discount: 40% off in April!

Upgrade to HM2

Get me upgraded

                
<div class="modulLeft">
    <div class="promotionBox">
        <img title="" alt="" src="">
        <div class="promotionBox--content">
            <h4>...</h4>
            <p>...</p>
            <a href="#" class="button blue">...</a>
        </div>
    </div>
</div>

Promotion Box right

Upgrade auf PT4

Upgrade now

                
<div class="modulRight">
    <div class="promotionBox">
        <img title="" alt="" src="">
            <div class="promotionBox--content">
            <h4>...</h4>
            <a href="#" class="button blue">...</a>
        </div>
    </div>
</div>

Promotion Box left

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus earum, iusto suscipit quas maxime ut ullam, et eum recusandae dicta esse aut voluptatibus, aliquid sit. Ea quod deleniti ad, commodi.

Jetzt upgraden

Beim WSOP Main Event geht es in Richtung Finaltisch, denn Tag 6 ist Geschichte. Daumen drücken heißt es vor allem für Maximilian Mutardet Senft, der als einziger deutschsprachiger Spieler noch Chancen auf den Titel und das Preisgeld in Höhe von $10 Millionen hat.

                
<div class="modulLeft">
    <div class="promotionBox">
        <img title="" alt="" src="">
        <div class="promotionBox--content">
            <p>...</p>
            <a href="#" class="button blue">...</a>
        </div>
    </div>
</div>

Top Winner and top loser Box

TOP WINNER

Viktor Blom

Profit:$582.793

Mikael Thuritzi$286.637

Ilari Sahamies$266.427

TOP LOSERS

'Sanlker'

Verlust:$713.574

'samrostan'$200.009

'BedoliFE'$184.574

                
<div class="modulFull">
<div class="winnersLosersBox">
<div class="winnersLosersBox--winners">
<h2>TOP <span>WINNER</span></h2>
<div class="winnersLosersBox--big winner">
<img title="" alt="" src="">
<div><span class="winnersLosersBox--name">Viktor Blom</span>
<div class="winnersLosersBox--profit">Profit:<span class="winnersLosersBox--figure">$582.793</span></div>
</div>
</div>
<div class="winnersLosersBox--small winner">
<div>Mikael Thuritzi<span class="winnersLosersBox--figure">$286.637</span></div>
<div>Ilari Sahamies<span class="winnersLosersBox--figure">$266.427</span></div>
</div>
</div>
<div class="winnersLosersBox--losers">
<h2>TOP <span class="red">LOSERS</span></h2>
<div class="winnersLosersBox--big loser">
<img title="" alt="" src="">
<div><span class="winnersLosersBox--name">'Sanlker'</span>
<div class="winnersLosersBox--profit">Verlust:<span class="winnersLosersBox--figure">$713.574</span></div>
</div>
</div>
<div class="winnersLosersBox--small loser">
<div>'samrostan'<span class="winnersLosersBox--figure">$200.009</span></div>
<div>'BedoliFE'<span class="winnersLosersBox--figure">$184.574</span></div>
</div>
</div>
</div>
</div>

Teaser box in full width

Headline

Headline:

Lorem ipsum dolor sit amet consetetur
Lorem ipsum dolor
Lorem ipsum dolor sit amet consetetur
Lorem ipsum dolor sit amet

Image dimensions

Minimum dimension (without text inside the image)
width: 400px / height: variable

Ideal dimension (especially with text inside)
width: 530px / height: variable

                
<div class="modulFull">
    <div class="teaserBoxFull">
        <h3>Headline</h3>
        <img class="modulRight" title="" alt="" src="">
        <p>...</p>
        <h4>Headline:</h4>
        <ul>
            <li>...</li>
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
    </div>
</div>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Teaser box right side

Headline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Headline:

Lorem ipsum dolor sit amet consetetur
Lorem ipsum dolor
Lorem ipsum dolor sit amet consetetur
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Image dimensions

Minimum dimension (without text inside the image)
width: 400px / height: variable

Ideal dimension (especially with text inside)
width: 530px / height: variable

Teaser box right side with image

                
<div class="modulRight">
    <div class="teaserBox">
        <h3>Headline</h3>
        <img title="" alt="" src="">
        <p>...</p>
        <h4>Headline:</h4>
        <ul>
            <li>...</li>
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
    </div>
</div>

Teaser box right side without image and list

                
<div class="modulRight">
    <div class="teaserBox">
        <h3>Headline</h3>
        <p>...</p>
    </div>
</div>

Teaser box left side

Headline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.

Image dimensions

Minimum dimension (without text inside the image)
width: 400px / height: variable

Ideal dimension (especially with text inside)
width: 530px / height: variable

Teaser box left side with image

                
<div class="modulLeft">
    <div class="teaserBox">
        <h3>Headline</h3>
        <img title="" alt="" src="">
        <p>...</p>
    </div>
</div>

Teaser box left side without image

                
<div class="modulLeft">
    <div class="teaserBox">
        <h3>Headline</h3>
        <p>...</p>
    </div>
</div>

Hand history box

BN: $105
SB: $191
BB: $174.02
UTG: $263.57 (Hero)
HJ: $347.84
CO: $205.29

BTN has fishy looking stats over a smallish sample and given his stack size he is probably bad.

Preflop

($3.00) (6 Players)

Hero was dealt A A

Hero raises to $7, CO folds, BN calls $7, SB folds, BB calls $5 (Hero)

Flop

(16,5 BB) (2 players) A A Q

BB checks, Hero checks

Turn

($54.00) J 9 9 6 (2 Players)

Hero checks, BN bets $25.78, Hero calls $25.78

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

River

($105.56) (2 players) J 9 9 6 5

Hero checks, BN bets $56.22, and is all in, Hero folds

Hand history box elements

Position Box

                
<div class="handhistoryBox">
    <!-- Positions -->
    <div class="handhistoryBox--positions">
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </div>
</div>

Board element

                
<div class="handhistoryBox">
<!-- Preflop -->
<div class="handhistoryBox--board">
<h4>Preflop</h4>
<p>...</p>
</div>
<!-- Flop -->
<div class="handhistoryBox--board">
<h4>Flop</h4>
<p>...</p>
</div>
<!-- Turn -->
<div class="handhistoryBox--board">
<h4>Turn</h4>
<p>...</p>
</div>
</div>

Last or single Board element

                
<div class="handhistoryBox">
    <div class="handhistoryBox--board-last">
        <h4>River</h4>
        <p>...</p>
    </div>
</div>

Hand history style elements

You can place the style elements between the <p> tags.

If you want to make a line break you have to place the style elements between the <p> tags.

Emphasize style

                
<strong>Hero</strong>

Pot style

                
<span class="pot">($105.56)</span>

Player style

                
<span class="player">(2 players)</span>

Raise and Bet style

                
<span class="raise-bet">Hero raises to $7</span>

Fold style

                
<span class="fold">CO folds</span>

Card symbols style

                
J<span class="icon icon-club deck4"></span>
9<span class="icon icon-spade deck4"></span>
9<span class="icon icon-heart deck4"></span>
A<span class="icon icon-diamond deck4"></span>

Hint box

Headline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


<div class="hintBox">
    <h4>Headline</h4>
    <p>...</p>
</div>

Video and audio embedding

Flickr Gallery embedding

How to change the Flickr slideshow to the show you want

Your link contains an user id and a set id. You have to replace your numbers whith the one in our code snippent.

Your link example:
https://www.flickr.com/photos/92461035@N07/sets/72157647131993466

User_id= Set_id=

Our code snippet:
https://www.flickr.com/slideShow/index.gne?group_id=&user_id=63467551@N08&set_id=72157633224885477

                
<div class="flickr">
<iframe width="585" height="585" align="middle" frameborder="0" scrolling="no" src="https://www.flickr.com/slideShow/index.gne?user_id=63467551@N08&amp;set_id=72157633224885477"></iframe>
</div>

Instagram embedding

                
<div class="instagram">
<iframe src="https://instagram.com/p/rGTtB6v_O-/embed/" scrolling="no" allowtransparency="true" frameborder="0" height="679" width="585"></iframe>
</div>

Soundcloud embedding

                
<div class="soundcloud">
<iframe width="100%" height="166" frameborder="no" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/125710774&amp;color=ff6600&amp;auto_play=false&amp;show_artwork=false">
</iframe>
</div>

Twitter embedding

Get your $50,000 KickTipp predictions in now for the final: There is still time to bet on the final and make i... http://t.co/tthTAl5za1
— PokerStrategy.com (@enPokerStrategy) July 10, 2014

                
<blockquote class="twitter-tweet" lang="en"><p>Get your $50,000 KickTipp predictions in now for the final: There is still time to bet on the final and make i... <a href="http://t.co/tthTAl5za1">http://t.co/tthTAl5za1</a></p>&mdash; PokerStrategy.com (@enPokerStrategy) <a href="https://twitter.com/enPokerStrategy/statuses/487148591413067777">July 10, 2014</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Youtube embedding

                
<div class="youtube">
<iframe width="960" height="540" src="https://www.youtube.com/embed/Qx3fq37CMVY" frameborder="0" allowfullscreen></iframe>
</div>

Vimeo embedding

                
<div class="vimeo">
<iframe src="https://player.vimeo.com/video/66717124?byline=0&amp;portrait=0" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

Invite a friend Widget

                
[INVITE_FRIENDS_VIA_EMAIL]

Author Box

SEO optimized link for Social media

Please insert always rel="me" into the <a> tag.

Example:
<a rel="me" target="_blank" href="https://twitter.com/josh_log">

Linking to the author profile page

Please insert always ?rel=author into the <a> tag.

Example:
<a href="/poker/josh-logan/" rel="author">

Author Name

                
<div class="authorBox--full">
    <img title="" alt="" src=""/>
        <div class="authorBox--full-content">
        <h3>Author name</h3>
        <p>...</p>
            <footer>
                <ul>
                    <li><a href="#">Web</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Google+</a></li>
                    <li><a href="#">More Posts (565)</a></li>
                </ul>
            </footer>
        </div>
</div>

Icons

Poker Room Icon in circle form

Image	Link
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/24h.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/770.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/888.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/allinbet.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/bet365.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/betclic.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/betfair.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/betfred.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/cake.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/coral.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/dafa.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/euro.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/everest.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/fulltilt.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/gala.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/heaven.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/ladbrokes.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/mansion.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/netbet.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/party.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/paddypower.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/pkr.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/stars.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/titan.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/stars.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/turbo.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/unibet.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/william.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/winamax.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/winner.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/wpt.png

Software Icons in circle form

Image	Link
	http://static.pokerstrategycdn.com/article/images/icons/sidekick/circle/sidekick.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/hm2.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/neteller.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/ps.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/pt4.png
	http://static.pokerstrategycdn.com/article/images/icons/pokerroom/circle/skrill.png

Poker Room Icons in square form 24px x 24px


<i title="" class="[class name] pokerroom-logo icon-stand-alone gap"></i>

Image	Class name
24h Poker	`icon-pf_euro`
770 Poker	`icon-pf_770`
888 Poker	`icon-pf_888`
Allinbet IT	`icon-pf_allinbet_it`
bet365	`icon-pf_bet365`
betclic it	`icon-pf_betclic_it`
betclic fr	`icon-pf_betclic_fr`
Betfair Poker	`icon-pf_betfair`
Betfred	`icon-pf_betfred`
Win Cake	`icon-pf_cake`
Coral Poker	`icon-pf_coral`
Dafa Poker	`icon-pf_dafa`
Euro Poker	`icon-pf_euro`
Everest Poker	`icon-pf_everest`
Gala Poker	`icon-pf_gala`
Poker Heaven	`icon-pf_heaven`
Ladbrokes Poker	`icon-pf_ladbrokes`
Mansion Poker	`icon-pf_mansion`
Netbet	`icon-pf_netbet`
Party Poker	`icon-pf_party`
PaddyPower Poker	`icon-pf_paddy`
PKR	`icon-pf_pkr`
PokerStars	`icon-pf_stars`
Titan Poker	`icon-pf_titan`
Turbo Poker fr	`icon-pf_turbo_fr`
Unibet Poker	`icon-pf_unibet`
William Hill	`icon-pf_hill`
Winamax	`icon-pf_winamax`
Winner Poker	`icon-pf_winner`
WPT	`icon-pf_wpt`

Flags

Class attribute

Please insert this attribute class="borderImageFlag" inside the img tag. This styling gives the flags a nice border with it the white surface in some flags don´t merge with the white background of the article.

CAUTION!!!! This class attribute is only for this flag image with the .svg ending.

You can use the flags with this attribute exclusive in: tables, teaser boxes and as images next to a paragraph. Examples below.

List flag pathes

Image	Text
	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat

How it will look like in the img tag:
<img width="50" height="32" class="borderImageFlag" src="http://static.pokerstrategycdn.com/front/images/flags/bg.svg"/>

Usage in Paragraph with the classes 'modulRight' and 'modulLeft'

How it will look like in the img tag:
<img class="modulRight borderImageFlag" src="http://static.pokerstrategycdn.com/front/images/flags/bg.svg"/>

Usage in Teaserbox

Lorem ipsum dolor sit amet

How it will look like in the img tag:
<img class="borderImageFlag" src="http://static.pokerstrategycdn.com/front/images/flags/bg.svg"/>

Flag pathes

Image	Link
	http://static.pokerstrategycdn.com/front/images/flags/bg.svg
	http://static.pokerstrategycdn.com/front/images/flags/cs.svg
	http://static.pokerstrategycdn.com/front/images/flags/de.svg
	http://static.pokerstrategycdn.com/front/images/flags/en.svg
	http://static.pokerstrategycdn.com/front/images/flags/es.svg
	http://static.pokerstrategycdn.com/front/images/flags/fr.svg
	http://static.pokerstrategycdn.com/front/images/flags/hu.svg
	http://static.pokerstrategycdn.com/front/images/flags/it.svg
	http://static.pokerstrategycdn.com/front/images/flags/ja.svg
	http://static.pokerstrategycdn.com/front/images/flags/nl.svg
	http://static.pokerstrategycdn.com/front/images/flags/pl.svg
	http://static.pokerstrategycdn.com/front/images/flags/pt.svg
	http://static.pokerstrategycdn.com/front/images/flags/ro.svg
	http://static.pokerstrategycdn.com/front/images/flags/ru.svg
	http://static.pokerstrategycdn.com/front/images/flags/zh.svg

Status Icons Large

Image	Link
	http://static.pokerstrategycdn.com/article/images/icons/statusicons/status-lg-basic.png
	http://static.pokerstrategycdn.com/article/images/icons/statusicons/status-lg-bronze.png
	hhttp://static.pokerstrategycdn.com/article/images/icons/statusicons/status-lg-silver.png
	hhttp://static.pokerstrategycdn.com/article/images/icons/statusicons/status-lg-gold.png
	http://static.pokerstrategycdn.com/article/images/icons/statusicons/status-lg-platinum.png
	http://static.pokerstrategycdn.com/article/images/icons/statusicons/status-lg-diamond.png
	http://static.pokerstrategycdn.com/article/images/icons/statusicons/status-lg-black.png