.handlettering {
font-family: "MV Boli",
"Segoe Script",
"Lucida Handwriting",
"Comic Sans MS",
"Brush Script MT",
cursive;
}
.inlineblock,
.inject-icn:before
{
/* display: inline-block for any browser */
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: top;
}
/* the complete card deck with 2 requests */
/* card deck */
.card {
width:30px;
height:40px;
background-image:url(http://resources.pokerstrategy.com/Strategy/images/kartendeck/card-deck.png);
background-repeat:no-repeat;
margin-right:2px;
margin-left:2px;
}
/*
.a => Ace
.k => king
.q => queen
.j => jack
.n10 (css class names must start with a-Z)
.n9
...
.n2
.s => spade
.c => club
.d => diamonds
.h => hearts
*/
/* Aces ------------------------ */
.card.a.s
{
background-position: 0 0;
}
.card.a.c
{
background-position: 0 -40px;
}
.card.a.d
{
background-position: 0 -80px;
}
.card.a.h
{
background-position: 0 -120px;
}
/* Kings ------------------------ */
.card.k.s
{
background-position: -30px 0;
}
.card.k.c
{
background-position: -30px -40px;
}
.card.k.d
{
background-position: -30px -80px;
}
.card.k.h
{
background-position: -30px -120px;
}
/* Queens ------------------------ */
.card.q.s
{
background-position: -60px 0;
}
.card.q.c
{
background-position: -60px -40px;
}
.card.q.d
{
background-position: -60px -80px;
}
.card.q.h
{
background-position: -60px -120px;
}
/* Jacks ------------------------- */
.card.j.s
{
background-position: -90px 0;
}
.card.j.c
{
background-position: -90px -40px;
}
.card.j.d
{
background-position: -90px -80px;
}
.card.j.h
{
background-position: -90px -120px;
}
/* 10 ---------------------------- */
.card.n10.s,
.card.t.s
{
background-position: -120px 0;
}
.card.n10.c,
.card.t.c
{
background-position: -120px -40px;
}
.card.n10.d,
.card.t.d
{
background-position: -120px -80px;
}
.card.n10.h,
.card.t.h
{
background-position: -120px -120px;
}
/* 9 ----------------------------- */
.card.n9.s
{
background-position: -150px 0;
}
.card.n9.c
{
background-position: -150px -40px;
}
.card.n9.d
{
background-position: -150px -80px;
}
.card.n9.h
{
background-position: -150px -120px;
}
/* 8 ----------------------------- */
.card.n8.s
{
background-position: -180px 0;
}
.card.n8.c
{
background-position: -180px -40px;
}
.card.n8.d
{
background-position: -180px -80px;
}
.card.n8.h
{
background-position: -180px -120px;
}
/* 7 ----------------------------- */
.card.n7.s
{
background-position: -210px 0;
}
.card.n7.c
{
background-position: -210px -40px;
}
.card.n7.d
{
background-position: -210px -80px;
}
.card.n7.h
{
background-position: -210px -120px;
}
/* 6 ----------------------------- */
.card.n6.s
{
background-position: -240px 0;
}
.card.n6.c
{
background-position: -240px -40px;
}
.card.n6.d
{
background-position: -240px -80px;
}
.card.n6.h
{
background-position: -240px -120px;
}
/* 5 ----------------------------- */
.card.n5.s
{
background-position: -270px 0;
}
.card.n5.c
{
background-position: -270px -40px;
}
.card.n5.d
{
background-position: -270px -80px;
}
.card.n5.h
{
background-position: -270px -120px;
}
/* 4 ----------------------------- */
.card.n4.s
{
background-position: -300px 0;
}
.card.n4.c
{
background-position: -300px -40px;
}
.card.n4.d
{
background-position: -300px -80px;
}
.card.n4.h
{
background-position: -300px -120px;
}
/* 3 ----------------------------- */
.card.n3.s
{
background-position: -330px 0;
}
.card.n3.c
{
background-position: -330px -40px;
}
.card.n3.d
{
background-position: -330px -80px;
}
.card.n3.h
{
background-position: -330px -120px;
}
/* 2 ----------------------------- */
.card.n2.s
{
background-position: -360px 0;
}
.card.n2.c
{
background-position: -360px -40px;
}
.card.n2.d
{
background-position: -360px -80px;
}
.card.n2.h
{
background-position: -360px -120px;
}
/* // card deck */
/* [end] complete card deck with 2 requests */
/* sprited videothumbs */
a.videothumb {
text-decoration: none;
margin:.7em;
position:relative;
}
a.videothumb img {
width:200px;
height:152px;
border:1px solid #d0d0d0;
}
a.videothumb.fl img {
background:url(http://resources.pokerstrategy.com/Editorial/elements/videothumbs_new/video-thumbnail-fl.png) left top no-repeat;
}
a.videothumb.nl img {
background:url(http://resources.pokerstrategy.com/Editorial/elements/videothumbs_new/video-thumbnail-nl.png) left top no-repeat;
}
a.videothumb.omaha img {
background:url(http://resources.pokerstrategy.com/Editorial/elements/videothumbs_new/video-thumbnail-omaha.png) left top;
}
a.videothumb.seven img {
background:url(http://resources.pokerstrategy.com/Editorial/elements/videothumbs_new/video-thumbnail-seven.png) left top;
}
a.videothumb.sng img {
background:url(http://resources.pokerstrategy.com/Editorial/elements/videothumbs_new/video-thumbnail-sng.png) left top;
}
a.videothumb:hover img {
background-position: left -152px;
}
a.videothumb:active img {
background-position: left -304px;
}
/* //sprited videothumbs */
.clear {
clear:both;
display:block;
}
/* Buttons -- als inline-block-Elemente f�r mehr Flexibilit�t */
/* ~~~~~~~~~~~~~~~~~ library buttons v2 (090619) ~~~~~~~~~~~~~~~~~ */
/*
Anforderungen:
* einerseits grafisch totale Kontrolle
* und andererseits in Sachen Textfluss so flexibel wie m�glich
==> man ben�tigt ein inline-block Element.
da die Eigenschaft inline-block nicht fl�chendeckend unterst�tzt wird, muss man zus�tzlich zwei weitere Eigenschaften definieren:
display:table-cell;
display:inline-table;
display:inline-block;
[siehe: http://www.spartanicus.utvinternet.ie/centered_image_gallery_with_captions.htm]
Der Aufbau der Buttons ist hier skizziert:
... 1_3_Projekte\Buttons\library-buttons-v3\schema.png
A- und Button-Tag basierte Buttons unterscheiden sich hinsichtl. Aufbau nur durch die Verschachtelung: span ist beim button au�erhalb, da innerhlab nicht erlaubt.
Die zweizeiligen Buttons haben noch ein weiteres Tag (b oder strong) innerhalb des spans, um auch hier nocheinmal ein inline-block element einzuf�deln -- hier wird der text noch einmal linksb�ndig ausgerichtet. Will man das nicht, muss man dies einfach entfernen und den Text direkt in .. bzw einf�gen
Wenn zu den Icon-Buttons neue hinzugef�gt werden sollen, am besten die Pixmap erweitern
(100px breiter und da nach dem vorhandenen Schema fortfahren)
pixmap: http://resources.pokerstrategy.com/library/button/v2/neutral-btn-sml-icons.png
Verwendung von Pixmaps:
* nur eine einzelne Grafik pro Button-typ n�tig (Ausnahme: die iconisierten Buttons haben noch eine zus�tzlich)
* der Button kann maximal so breit sein, wie die pixmap-Grafik
Konventionen in den Klassennamen:
lib - library
gfx - graphical
btn - button
sml - small
xl - large
iconbtn - icon button
historisch bedingt sind die standard-buttons die gelben.
zus�tzliche Klassen f�r *neutral* und *download* sind:
lib-neutral-btn
lib-download-btn
die (gelben) basics:
lib-gfx-btn-sml
lib-gfx-btn-sml-twolines
lib-gfx-btn-xl
lib-gfx-btn-xl-twolines
lassen sich kombinieren mit
lib-neutral-btn (grau)
lib-download-btn (gr�n)
F�r die Icon-Buttons:
nur auf die grauen, kleinen, einzeiligen anwenden.
normaler Button ohne Icon:
mit Icon:
die Klasse:
lib-iconbtn-a5
baut das Icon ein. Das Schema a1 bis b7 ergibt sich aus den Koordinaten im Pixmap:
_a_ _b_
1 |___|___|
2 |___.___|
: ___:___
7 |___|___|
*/
/* hand-cursor f�r die