Return                I did this. Next Lesson please
A Basic CSS Page

W E L C O M E

  Works in;

firefox Google chrome opera
safari rockmelt comodo
seamonkey Download dooble

Fails in -> IE
NATURALLY !
bullet gif  Very good CSS3 site
   w3schools.com

bullet gif  w3.org validator
   validator.w3.org

Make a basic css page, css2, css3, html with css.
(IE) Internet Explorer wont show you rounded corners, shadows or moving elements. Please use Firefox or one from the list at the left.
Lets make a simple CSS page. CSS works with HTML to create your whole page with style and decoration. CSS is responsible for adding presentational aspects to the page while HTML tells the system were to put it all. First you need to create a blank text file like Notepad or wordpad on your desktop. copy the codes you see here into the text file and save it as "test.HTML" or something like that. Start all pages like this just to get you started.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Basic CSS Page</title>
<meta name="description "content="css3, basic css page, css code">
<meta name="keywords"content="CSS code page, basic css page, css code, how to code css, html with css">
<style type="text/css">
</style>
</head>
<body>
</body>
</html>


Between the <style type="text/css"> and the </style> is were your CSS will go.
If you put this code to work now, you wont see anything on the page yet. This is just to set you up to get started. We'll add elements late as we go. We'll need some things to put on the page so lets decide how that is to happen. Lets start with the body of the page and the colors we want. You can change the colors to whatever you like best but for now lets start with the dark background and lighter words that are kinder to the brain in terms of eye strain. Like on this site.

<style type="text/css">
html, body {
background:#003 url('images\IMAGE.jpg') repeat fixed;
color:#ff0;
font:bold 100% comic sans ms, arial, helvetica;
}
</style>

OK this looks good but what is it that we have here? Looks like a bunch of mumbo jumbo doesn't it? Lets start with html, body {. This lets the browser know we'll talk about what we want for the body portion of our page. Described is the background and the color you want for it. As well the font or text color you'd like being #ff0 . Three Characters. Work the three numbers (ff0) to adjust the RED, GREEN, BLUE, to a color you like. The last "0" is the blue factor. Try changing it to a "7". You get more blue. The range of color values goes from 0 to 9 then A-F. Like this; 0123456789ABCDEF. 0= dark and F= light. Play around with it and see what happens. Continuing on that line you see url('images\IMAGE.jpg') repeat fixed; .
This is for the image if you want one as the background instead of a color. Notice we still put the background color indicator in there in case the background image we want cant be found by the browser. The color we seleted for this is also what others will see if the image you selected for the background is so big, that it takes longer to load. People will see the background color first. Then we see that if you selected an icon or small graphic to repeat all across and down the page, it will do so with the REPEAT command. And lastly, the backgroundimage is in a FIXED possition.

color:#ff0;
font:bold 100% comic sans ms, arial, helvetica;
}

This is our text styling. color:#ff0; indicates that the text on the page will be yellow. The rest says its BOLD text and 100% of the browsers "nrmal" font size, and last is the type of text font. Each font type is separated by a coma and one space. Its a nice thing to add helvetica as a font because thats a MAC font. Lets include all the MAC users in the fun of the page layout. After all,, MACsters are people too.
See how much ground is covered in just this short CSS bit put right into the
<head> portion? Now we dont have to put ANY of these details throughout the html page itself which saves a lot of coding.
Next I'll be giving you chunks of CSS code to paste right into your page where discribed earlier so you can get moving with all the fun that CSS has to offer.

#border01{ /*Main border atributes. */
width:300px;
height:33px;
margin:0 auto;
text-align:center;
font-size:23px;
border:13px groove;
border-color:#609 #609 #00c #00c;
}


This is a border like the ones used on this site. Insert this under the last } as a new chunk of instructions like this;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Basic CSS Page</title>
<meta name="description "content="css3, basic css page, css code">
<meta name="keywords"content="CSS code page, basic css page, css code, html with css">
<style type="text/css">
html, body {
background:#003 url('images\IMAGE.jpg') repeat fixed;
color:#ff0;
font:bold 100% comic sans ms, arial, helvetica;
}
#border01{ /*Main border atributes. */
width:300px;
height:33px;
margin:0 auto;
text-align:center;
font-size:23px;
border:13px groove;
border-color:#609 #609 #00c #00c;
}
</style>
</head>
<body>
</body>
</html>

Now in the HTML <body> portion where you want the border to go, use this;

<body>
<div id="border01">Welcome To My Site</div>
</body>

Now have fun making changes to the values in the code like width, height. Change GROOVE to dotted, inset, outset, ridge, solid. Change the border colors too. The order of # colors is top, right, bottom, left.

Next Lesson New In CSS3.



View from the back of the room.

S@r7X@B@802MZ00B0W2@B@8@0@0B0B0@0@W@0@0@0MWB2@B@8@8B0M@M@M@M@@0MB@0@B@B@8BBM@@S02BBM00Z@0@ZB0@0B8@0@0@0@0@8BZ@8B208@0@ZW8B0B20S02;.XSa;802.i00;888.;XX
XSS7Z0M@@0MBM0W2S2@BM0BZB0@@M@M@M@M@M@M@M@M@M@M@M@M@M@M087aSM@M@@ZB0@0@@MBW2M@M@M@M@M@MB@0M@M@MBM@MBMBM@M@M@MBM@MBMB@0@0@B@0@0@@M02S8rZ0BWM8B8MBB@MrZ;
r7X@S2802BZSS00BX@Z8aZ7ZaWZW2B0B0@0@0@W00@Z@0Z2M@MB0i;.. . . .:Srr.;;X.:.:   .:a:rS@0@0M@M002WBMBB0@0@0@0B8WZW80SZX02W0@8B202028aM@W::;S:a@B;2WBr80SrS
2a@@@782WZZXS0@78a2SB282B0@0@0@0@W@B@BM0M@@0@BMBX.. . ..;:;.: . ::Xi: ..i.i.:.. :.   .SX@@M@M0@0@W@W@W@0@0B80ZB2ZX2S0Z0SZS08@WBZ8;.;@ii.Sri:2XZ0@;XX0;
7M2ZZ8rZZ2S@S8SSSBW@ZW20ZB8@@M0@0@0@W@0MW@0WBMW:   ..iiX;r:i.: :..   ;.. .:r::.:.;:i.. ..7r@@M008M0W0BB@B@0@0@0@8B80S220aZX00@208W:70M02iSXSXa:;X2S882
Z@S.Z2a28r82S.;ZW0WS8ZB0@80ZB0@0@W@W@B@BW0MBW@X ..i:;.i.i.:.;.: ..:.:.:.::i.: ::i.. :.;.:   ;0M@0ZB0B8@0@802@WBZ0ZB80S8ZWS2rZ2BaZBMZ@BB20;7rX00:rrS;8r
r;7@;;20;riSSa8@S0r28B0@0M@MWB0@W@B@B@B@0@@M@0...r:;.:.:.. ;ir.: ..:.r:r;X.. ... ..i   ..: i  .M@00@W@S8ZBW@2ZSB002028S2rSrS;SS8rSrS;SSBWB;riS20XS;Xrr
ri28S;S;XS0Z0SWB0272MWWS08@WBBM@@B@W@BM@M8@BB..::.:.:.:.: ..: . :.i...::;.. :.i::.:.. . ..;.i   2@@2@0@002M@BZB0@ZW0@W@Z028XSr7702Z;X78S7XBrXiXr27X:7:
;02ZrXirX0iZXSiri8BBr2SW0@BM0@B@W@0@0@0M@@BM.  i...ri; . ... :.. . . . . ..;:: :...:.;i;.i::.7.  :@M08BMB@@0@M@@8@0@0@W@8B8Wa2r7:228XZ20Xa7SrSi7;Xii:i
SXr.7XZiriXSS7Zra72;7788BZWZ@0@WMBMB@B@W0@Mi  :.. :.;.:.:.. ..:.. ..:.:.: :.;.::r:;.i.7:;.:i. ii. ;BM0ZZB@B 8BBSZ2WSZS8SZa020X27aXS:7rZXX;2rXiriX;7.i.
iZrSXZXSiSB@:;iSS2i0@@8B20ZB@MB@W@W@0@@@BMS: ..: . . ..i.. : . :.;.: . :.. ..;::.:.i.i:;.:.: ii: r .XMB@ZZi::08W2@80Z@0@0@BMB@BM@@Z8X2X00WrS7a:::XrX;;
SSZrr;XXS:SXSrXiXS@8ZraX2r2X0ZB0@Z020802M2.   . . . :.:.: . . :.: :.:.:.:.:.i.:.: :.i.;.. :.i.:.r.: :XM@W.ii:iMW0ZWSW00SW0B28SWa22B82:i.;;Sr27Sir:riX:
i7;X:S;Z7Xi;iXiX;ZrSS2Z@8ZSBZW8@@@BM@M2MW:   :.. :.:.:.i.: . :.:   :...: . ..: . . :...:.:.i.:.. . . ;7M2i.r.;rB2ZSSSBaZ2BZ2r2rXSWZ0ZWSSrriZS2XZ;;:;r7
r;r7Zra;X;2X27SX2SWBM@B0BS80ZWM0@ZB@M0M@i .:i.;...:.:.i:i.:.. . . :.:.. ..:.:.. :.:.:.i.:.:.. . . ..i.rr2;S22.;BMW@a228Xa;SZB22X00@SZS0S8r;:;:XX2;r.i.
:Xr2rXiX77.7;7;Xir2BZB;S2WZM2X;2Z0X02B@i ..r.. ;:: ..:.:.i.;.. :.:.. : . :.:.:.:.i.;.:.: . . :.i.:.i  r@Z; r7;iMB0@MZ88@Xri27X;X;2XS;S7SrX:;.:.;ir:;i;
r:7::;77X:2r7;28WS2S0SS7BB@Z0208MBM@MWS .:i :   : . . :.:.:ii.:.: . . . . :.:.:.: . . :.:.:.:.i.i.. : X7Si;.i iiS7ZX8ZB0Wrri7:7i;i;.i:7;S;Xr2r7:;:r:7:
XZ727S;S;SXSXBS7:X0@XSB@ZMWS8@8M@WBB0@  .i . : . . . . . . . ..:.:.: . .   ... . ..i.::: ..:.i.i.:.: ..7;02:.8Zr:W0B88S08@0BBMB0XSi;:7iriS7SXZ;;:7ii.:
i:Xra;:.rir:SrX:X0B7220702i @@ZZ@XBSW@; . . . . . . : : .   . i.: :.:.i.:..   . ..i.i.: :.;:i.. :::.i..:. Xr7;r.ii@0820;8W@2@0@BMaSrXi;:;iSr2rr.i:;.;.
;SiriX:7ir;2rri@BMXXS2;S8@;;:Z28B@@@WM::.: : . . . :.:.i.;.7i7r2:..: r::.i:;...;.:.: . i.:.:.:.:.:.: . X0WrX.ii2@BX2XZ0B0@S22B@MXSX2r;.;.;:r;X:i.:.i::
SSX;S:7;X70X7iB@r:ZW2:222r8r.iM8@B@0M@S ..: . ..:.;iXiX;SX222rX;7iS72r80@20BMrXrX;r:;.i.i.. ..:...: :.;.Xr: :XX:X;i8MW@8S7MWr.XZWrr.:.:...i.i:r:i...r.
.X:r;7r2S2r222;;:2rSZ8Z0;r:;;S700MW@@B:. :.. ..r;X;SrS72SZX8X2XZa0a0200M@M8BB@202B0@22;r72i:.:.:.;.i.:.;.ri.:r...SBM8Z8M02S@Z077ii . :.i .:i.  ..;.:..
Xr;.r;Z2S;S:7;7:rXXi2rar2rr.XXa8M@M@Mr:.:.: ..r;SrS;7iXrZSZ20aZX8Z2782ZSB0Ba2XZ28ZB0@0W0@Z2rr::.:...i :i7r2:MZM@M@M8;X@@@00SXii.:.i.: ..r...: ..i...;.
:X;7:7:S;r;S;;r2iXrSi7a0r7:;rr.S@@0M@8::.:.:.rr2XX;SrX;Sr2XZSWSS2@r22220X0ZZ;S20208@80ZB8B2Sii.: . . ..:77 X;::2.:..iMBZ8MS;...i ::7.:.i.i.. iii...;::
;iX::ir:X72rSX0XXiZZZ7a2S :rr.7SSrB@X ..: ..iiSrSrSrSrSrSXZ2ZSZ72XZS028X2XZS0S0Z08B0B8020227X...: . ::r:i.:.. :.rX@@M0SBMZ;.i.i:rr7.iii.i.ii; .:;.i.:.
:r;XiSr7.iiXr2XZS08@W8:;:ii2.i;; 28Mi  . . :.r;S;8a2Xa7S7ZS8S2S828S27ZXZ7aXZZ@008B0B0BZ020rXii ..i.:.. :7Br.r07a2M0B0@0@Xr.::: : :.iiX .:i i:i.:.:.i.i
SiSXXi;:r:Xr2;r;ZaS7B8Si;:;;r.:;@WM@X : . :.i:X;7raX2X2XZ20S8SZS8S8SZS0a8XS708Ba08B0@8020Za::.i.. . .   ;XZr@@a.Z0: XXS:;:i.i.;:;:i i:;:.:2...:...:.;.
87.riS;SXa:riS207r.;iSrSrr.:ir:;i:iM0i :.. ..7rS;X;2X2X27SrXrZSZ7S7ZXar272XZSZaW2WZBZ0S2S@BX.:.: ... ..i:;.:X:iB;.:X .:i.r:i.::;.i :.i:i i7: :.i.i.:.:
WXr:;rSiriX:r;ZXS;X;;:r;S;r:rir:iX000:..: ..rrSrS7Z28rSrS;XrSrZ202ZX2X2XZ2B0B2028a820Z0Z8X0aX.. ... :.. ::7::.: iii.r:i.;:i:X;;.;...r.:.2i..;:;:i.;:;.
iM@Z i;Sir;XrarS;X;7:rir:;ir:;:r:7r;:X ... ;;S;XrSr27Sr2SZX2rX;SS0aar2ra7ararX;S;X;XX82W8Z;SZZi:...:.::i.::r.Xi:.r.:.: .:r.i:7.::7:;::.: .:2i:.i.: :.:
.iM@@.;iX;7;S;riS7Z7Sr;:SXX..;S.:.7rZS. :..ir:7;X;r:;:ri7i7rS;X;XrSrS;i.r::.: ..:.;:7;2X2ZBXSS2i: . :;B8B7i.::X;;.i.:.:.;.:::.;:r.;ii.ii:.;.:.i.:.i.;.
::.@@MS.:aiX;X;Xr2XS;S;rir:;iSirSZX2i:.: ..X:rir:;.:.: . . :.:.;i7;S;i.i.. . i:;:r;X;X;Srr;MXX8a ... ;:..r.;.. ::7::.;.i.i.;.;:;.:.i.::X:;:: ..:.;:i.:
Z;i i@M0i.riXrSrX;Xir;S;r:i.;:;;2;7i: ... 7i::r:riXr27X:;.. . ..i:7rSi;...Xr7;2S8ZW80S2X2i7ZX:0X. i..:: ;;:.i.;.:.;:i.i:;:i.i.:.i.i.:.:.:.;::.:.iiXir:
;M..:.0M@r.riX;X:i.rr7i7iriX;:.r...i.: : .;7:r:;:r:r:;.i.: :.. :.r;ZSa;;...i .   . :.riSr2S2XZ2Zi.  :Zr;;X.;:;:;:i.:.r.i.;:i:;.:.;:: . :.i:i.Xr; ..i:i
0;2Zr .WM@Wi;.r;;:i:r.;;riar:iS:7:ii; ....7:r:: .       :.. . ..77Z20aS;r...i:;.. . . . :iX;8ZZrS..i022;Sii;;.rir:i.i:i:;:;.i:;.::;.i.;.i...:.:.:::.;.
;700i2. ;M@8 ::7SSX7 ;.:iX:;.r:::X:X:  r:iii:: . :.riX7ZS2r2;;.iiS8@8S;2Sa;X;Xr2raXZXSir:i:S22r8X7 irarZSX.:.ii;.:.i ..i.... ..; :...i.. ... ..i.: . .
SaS;SS0:  M@Mr..SrS;X77.ri::B:.:::i:X.:.:.7:;.i.i.;:;:i.:.i:r:riXSB0BS0SZrr.::7i7;X;S;SrZXXS8;X28;: iXaZ2:i.:.:.:.:.: ..: :ii ..i.i.:...;...: . :.: :.
X0iXS0r2ri B@Mri.;.;;i;S.:::.riXi;.i.::: :;7;X:;.. :.:.i:riSrX;XrZS8SZ7Z2@Z2ii.i.i.;:X;SSB80XSrSrX77:XS0i. :.:.:.:.:...:.. ::;...:.i.: ..i::.: . :.. .
2XXrS;SX0ri:r@M@i.r:rii:r:; :;X.;:2i..X  .XiS7S;S:;:;:riS72rXi7;SXZSZSS;XrZS2XS:r:riXr2a2X@2ZSZ;riZXr;Z7r.i:i.i.:.:.:.;.:.: :.: :.i.::i.. :.. .     i.
rSS0rXr7;87r.;@M@B;:.ZiXSS.i:: ;;ri;.;i: ;i;;SrSX8a8SZX2XS;XiriXr82BZSrX;X;2S020ZB0B0B8WX2S2;27S;2rSrS7r.;:i.:.:.. ..: . i:i ..i.:.. ;:;       ..XS@@M
SBr:282XZrSr2..2M@8rX.r:;.i.. i.:.7i;.:.rir.r;7;SrSrSrSrXiX;r.iiSXZ287ZSZS020SZ2B0@8B80X2XSrSrS;XrX2B28...i :...i.i.;:..: .:;.;:. . .   . ::2BM@M@MWMZ
;WXaS2;X7SrZ20. ;M@B2S:: ;;r:Xi::i.r:ii7:;:i:ri7;XiXrS;2XS:..:.r;2S8X2X2rXiX;ZXaX020S8XaXa;X;SrX;XX2XW2; :.:.:.i::.. .:r:;.:.:.. :.. ;i8Z@@M@M0WZZrZ@W
SXSXSr2X2ra2X.aa. M@;SS:7;i:X::.X:iiXi2:i.i:;:riX;riXrS;Xi;.r7ZXaX0BBi2SZrXiXrSr2SZ7arS;X;XiX;X;XrSirX8::.:.;.: : ..;i: ..:   r:i7M@M@M@M0ZXSr0@M@M0MZ
;ZrSrS72r27728;SSX ;@M@S.iir...r;S;;.;:r:;.i.i.;iriri7r7.iiZXSrXrSS08BZ0SS;7iriX;X;X;7;ri7iX;Xir;S;2W@27:;:r:r:. : ..7.. i7BBM@M@M0MB2X88@008M@MSa20@0
SXSrarSrSrSi8raS;XX iBM@S.Xii.XrXra:;i;:r:i.i.i:;:7;;.ri;.;.: ::X7Sirr7:7r8SS:;:r:ri7iXiX;X;X;X;S7X;@@SXX:r.. : ::r:2@MW@@M@M@0a0SZB@S@@BWMWM@0...iZM8
r8r2rSrSrSr0iSXXX0rr:iX@@@.72S:X:7i;.i.i:i.i.i.;:i:r:i:ri;.. . . ..i.  ..XZBSX:;:;:riri7;Xi7i7;SrS72a2.      iiS8M@M@MB@W@8@@M@@BM@MSr;0ZB8W8a.. r8@@0
SXSr2727a7X;B7X2Xi22a:.rMB: SSa72X2r7.:.i.i.i.:.i:i.;;X;X::.:.. . . ..;iSX2X228rXi7;7:;:;.riX;Xra7X.  : i0MWM@M@M80ZS:B0@@Bi;;@B@W@XXX7X@BM0S.  i0B2MZ
rZrSX272rS7S;SrSX2r2XS:..M@2  70;SS27Z;r.::7...i.i:;:riri7i;.i.. . i;ZS8XSr8Z2;a7S;;:;:r:;i7;S;X;X;Sa@@M@M0MB8ZBZ0@M0MBM8277 .r@X0ii .ii;M2..::8@M00@0
SXSra727arSrSrSrSrSXS;BX  B@@. .7rS;SrZ0Z:..; :.:.;:riX;XrS.:.i.:.;rSiXrSrSS0;SX2;7:rir:;:riX;X;X;7ZM@rZ0.X@@0M8B@M2W@W0@0S.r :iri;.i.;.rXS;0@M@M0B2M8
rZrSrSrS7SrS7SrSrSrX;ZXS2S ZBMr. rS0;rX@@S ::i.: i.i.i.i:X7ZSZ20Z0SZXZS0a2X27XiX;X;X;7i;:7iririX;XXr.r.;7M@0ZM@MBS...@W028..;7.::ii;.: . W@@0B0@ZZZ@@@
SSSrSrS7arS7S7SrSrS7ZirrX;a :BM8. XX22Z.XX: :.:.:.;.i.. ..::i.iiSX2rX;XiX:rir.:.;iXrXir:;ir:riX;S;XiX;r :XBBMXia@:r;X:r.iZMS. r::.r.:iX2@BM8B2BW@Z@0MZ
rZrSrSrSrSrS7ararSrS;Xi7ir;8..r@7;.;XW:;rZri.: ..i.;.: . .         .   . . i:r.i.iiX;7:;:;:ririX;X::.:;2i..M.  X8X;Zr72XiX;7 ::. :r08M@M@MS0@MZ80@8B@0
SXSrSrSrSrSrS7a7SrSra7r:XS8:2;..B@r.rrr7SXWr;.. i.:.: . ::r:7r27S;aS8S27S;XrarS;;.ii7;r:;:r:;:7;Xi;.:ii.i:7::.;iX...ri;:22028i..S:XBM@@ZBZ2ZM@@2M@BBMB
rZrSrSrS727SrSrSrSrSrX:Srr;ar2r: @@8.:00iXS2...i.: : . ..:.i.riSr2X2XS7S;X;SrS;ri;.i:;:;:riX.r;r:i.r;X.:.i.;.i.:.r::.; r:  MSX:rr7@M0M0M80@M8.aMBMB0X;
SXSrSrSrarSrSrararSrarrrS;SrX;27r 8@M: .8Z8S0S;  .i . ..:.. . . . ..:.:.;:r:rir:;:;:;:7ir:7ir;7i7 :.i:r:i.:i;:;.::7ii.;   ;..:M@Xir:ii00@B0;W..iZ27:;.
rZ;SrarSrSrSrara7SrSrSiS;Xra;XrX;7.r@M;..ZZZ:: ;i. . : . :.. . . .     ..;:i.;:Xir:;:riXiriri7:XX. i.:.;i;.i.i.: . :.: ;;X:  ;;S;i ..;70@MWX.i :SX :;i
SSSrSrSrSrSrSrSrSrarX;rrS;SrSraS8;;.:BM@S..   :...:.:.i.: . . . . . :.:.i:r:7;SrXir:r:7;r:Xir;X;2   i.. :.:.r:i.:.: :.::r :r0;. ::r;arM@@i:.  : iS8::.
;Z7ZXS;S7arSrXrSrS727X:arr;S72rSrX;: ;7X.  . . ..i.: :.i.:.;.;:riSX2S0SZ7Sra7SrS;7:;:riXi7;X:7rS;i   ..r.. i.;:i.i.i.:.: :.:rrra :rM8r:0;:.r;i.i.i.i;;
XSarSrSrSX2rSrSrSrS72;r787XrS;r:iXX0Mr  :   .   i.......i:r:riX;X;SrS;2X2r2XX:r:i.:.;:r:Xrrir;2rS7Z7: . . ..::X:: ..ri: :.:.. i:i.;XZ...;:7;ai:.r.7;7.
;ZrSr87r.7XSSZ;S;S;XrXiXrXiXi;;B8@@M. .. . . .:X:i.: . ..i:;:rir:;:riX;X;XrarX:i.i.i:ririr:r;S;rr2rW@M7  i...i.;i; . : i::.r.. ::X ..;;;.ri  ..i.i.. .
SSSraXSii:2;SrSrSXS;SrSrS;XZM@M@M@B:. :   : .:0S:.:.:.. . :.:.i.i.i.:.i.;:rii.::;:ririr:riS7S;SX2r7 :0M@:  ii.i.;:;.:.:XS ..;ir.i::.i : ..r:X:: :.: r;
rZ;Xra72r77SrSrS;2;r;XiXrX;2rZiiX2   : ...  :8S;.:.:.:.: :.:.:.:.i.:.:.;:;.i...riXiririr:riXrSrSrZ;r  2M@. :.i:i.iiS::.Z:  ..i ..i.i.::: :.... ii;.:ir
XaXrZ7X7r:2XS;SrXXr:2;;.i.:.. ::i ..: : :   Z@r ;.:.:.: : :.:.:.:.: . ... ..iir:;:;:;:riXrXr2XS;SSZXX:MWM@X :.:.;i;.;..:r.:.: ::i:r:. ..r.. : ..: :.r.
r0;S7Xi2;i72rX72;8:;;Xi;:;iS;S77.. :..  .. i2@i:.i.:.i.: :.: . . ..:.:.:.i:;i7i;:;:i:7;SrSra;XrZSaX0r2@M@M@..;.i.:.i:7:::: ri::2i;:: :.:.;:;.::r...:.i
X77;S;7XXiSrSiXrXXSi27Xi;:X;Si: . . :.... .XMSr..:;::.:.:.:.:.:.:.:.:.:.;:r:;.i:i.;iX;S7arZ7X;228r0Z22M@M@@ ::;.i.i:i.;:;..:r.i.:.;.: . :.i:27r:ri0i:.
r8r2X2ra;XS2SZXa;2;riXiSrX;:.. ..:.: . :  i2Z0i:.i.i...:.i...i.i.i.:.r:i.i.:.;:i:7rarSrSrX;SX02ZX2882M@M@MS..i.i.;.;:i.;:;.i.;:;.i:7i;.. : .:7..iS .:i
2SaX2rSrXiSrar2SS22rZXZSS.: :.i.i.: . :  .Z7282.i:;.:.:.:.:.:.:.i.i.i.:.i.i.;:riXr27Sr22ZrS702Zr80SSM@M@MB:.i.i.i.i.;:i.iir...:.r.i.:.::r:: :i; :;:.r:
.:.: . . . . . . i.;;: . . ..:.:.i.:.:  .Xr820a7 i:i.i.:...i.:.:.i.i.:.i.;:;ir;S;Sr2X27Z;7X0S2X08@X@@M@M@2 :.i.;.i.i.i::.rii.. ..i.rii.;...: .:: ;r;.i
. . . ..: . . :   . . ..i.:.:.i.:.i.:.. i;7XWS0r. :.i.:.i.:.i.i.i.i.::i:;:;:7rSrS72aZ7XiXSB0B20Z8rM@M@M@B.:.i.i.i.i.:.i.i.;:;.: . ::X:i;; :.: ..; . r.
 . i ..: . . :.. : ..:.r.:...;:i.:.:.i.i.r72S@0S:  ;:: :::.:.i.:.:.i.:.;iX;X;SrSrS;Xi7;a8@Z0ZWXZZM@M@M@M:.:;.i.i.i.;.:.;::.rii.i.i.;:. r ....i .:i.:.:
. . . . . ..: . . ..;.i.:.i.:.;.:.:.i.i rX;r2XB8X ..i.;:;:i.i.:.:.i:r:ri7;XrSrSrX;X;SXZ202080S@@M@M@M@MS. ;.i.i.i.i.i.i.;.i:r:i.:.:.:.iii ..ri; . : :.
.: . . ... . . :.i:;.i.i.i.: :.:.:.:.i.::X;SXBZZS7.:.;:i.::r.i.;:;:i:S;X;Xi7iriX;SrZa0ZW2ZS0a0@M@M@M@M@: ;::.i.i.i.i:i.i.i.i:;:: . :.:.r:: :.;:;.: ..:
. . :.: . . ..i:;:i.i.;.i.i...:.i.:.:.i.77X;XX08M0r ..;:r:i.i.;:ri7ir:r:7iX;XrSr2S8282ZS8S2a8ZM@M@M@MWi..:7.i:i.i.i.i.i.i.i.i:r:i.. : ....;.. :.;:X.i.
 . : . ..:.:.;:i.:.:.i.i.i.i.:.:.i.:.;..7M2Z;r8M@M@B.  :ir.;:ri7i7;SrXrS7a7ZS8S0S0SZX2X2202B0M@M@M@M@; :::.i.i.i.i.i.i.i.;.i.;.;i: . ..:.:.:.:.:.: ...
: . . :.:.;.i.:.:.i.:.i.:.i.:.:.:.i.i.i 2@MW0XW@MBM@MS. .:XrSra7SrSrZX2XZXZSZ28XZS8SZS082rM@M@M@M@M@X.:.r.:.;.i.i.i.i.i.i.i.i.i.r:;.. : . . :.:.:.:.:.
 . :.;.;:i.:.:.i:i.:.i.:.:.:.:.:.:.i.:..:M@M0@X70M@M@M@@.:.7rXr2XSrZX2X2X272XZSZXZS8a020BM@M@M@M@M@8 i.r.::..;.i.i.:.i:i.:.:.i.i.;;; ....i.:.:.:.:.:.:
..;i; :.:.:.;:i.:.:.:.:.:.i.:.i.:.:.i.:. :M@M@B70@M@M@M@M0r.7X2;XrZS2;aS8XZX82W20ZB802@@M@M@M@M@M@S.: i:;.i.:.i.i.i.i.i.i.i.i.:.i.i:r.. . :.:.:.:.:.:.
 ::i .i: ::i.i.:.i.i.i.i.:.:.:.:.:.i.i.i :@M@@@MZ@@M@@@M@M@2.r7S;2SX;8SZS020282B202@@M@M@M@M@M@M@: ..;.:.;:i.i.i.i.i.i.i.i.i.i.i.i.;:;:: . . . . :.:.:
..  ;:  r...:.:.:.i.i.i.i.i.:.:.:.:.i.i.i :@MBM@B0M@M@M@M@M@M..8B.SZZa8XZS02WZ8X@@M@M@M@M@M@M@M.  :.ri;.:.;.i.i.i.i.i.i.i.i.i.:.i.i.:.r:;.. ..:.: . : 
 ... ::i.i.i.i:i.:.:.i.i.i.i.:.:.:.i.i.i.. M@M@M@M@8ir:ii0@M@M7irZ;22SX0ZBZ0S270@M@M7i.:.. r22...r:: :.;.i.i.i.i.i.i.i.i.i.i.i.:.i.i.i.;:; . . :.: ...
  8S. i :::.:.:.i.i.i.;.:.i.:.i.:.:.i.i.;.:rM@M@0.: ..i.: .:0@M:.28r2r0Z0SSiZZM@@r.   . XXr.. ..i.i.i.;:i:i.i.i.i.i.i.i.i.:.:.i.;.i.;.:.::7:: . . :.. 
  .Si: :.:.i.i.:.:.;:i.i.i.:.i.i.:.i.i.i.: : .     :.;.i.;::.B@MSii0Z0S0SXX@@M@8SXXW0M@M@M@M:i:i.i.;.;.:.;:i.i.i.i.i.i.i.i.i.i.i.i.:.;.i.:.;:r.. ... .
.   :.:.i.:.i.:.:.:.:.:.;.i.:.:.:.i.i.::i.;.@@M0@Z@@M@M8S:;ii S@M0XiZ2r;8ZM@M@@BM@M@M@MBM@M.:.i.i:i.i.i.i.i.i.i.i.i.:.;.i.i.i.:.i.: ..;:;...i.i.. . :.
 i   :.. :.:.:.i.i.i.i.i.i.:.:.i.i.i.i.i.:..BM@M@M@M@M@M@M00ii.XWM@Sr@rZBM@M@M@M@M@M@M0M@M. .i.;.r:i:;.:.:.i.i.i.i.:.i.i.i.i.i.:.::i.:.:.:.. . . . . .
  :.. ... :.:.:.i.;:;.i.:.i.;.;:;.i.i.;.i:i 7@M@M@@B@@M@M@M@MB0r;@MZar0BM@M@M@M@M@M@M0M@M ..;:;:;.i:i.i.:.i:i.i.:.:.i.:.:.i.;.i:i.i.:.:.:.: . . . . : 
.. : ..;  .: . . . :.:.i.;.:.: :.;:i.:.:.i.i:M@M@M@M@M@M@M@M@M@M@B@MZS@M@M@M@M@M@M@M@M@M...X.;.iii.:.:.:.i.:.i.i.i.:.i.i.i.:.:.: . ..:.:.. . . . . :.:
... ... . : . . . . . :.:.i.;...:.i:i.i.;::..XM@M@M@MBM@M@M@M@M@M8MS.2M@M@M@M@M@M@M@M@M ..:ii.;::.i.:.:.;.:.:.i.;.i.:.i.i.: ..i.:.;:;.. . . . . . . : 
 . . . . . . . :.: . . . ..:.i.:.i.;.;:i.i.r ;@M@M@M@M@M@M@M@M@M@M@. @@M@M@M@M@M@@@M@M...i.i.;:;.;.i.i.i.i.i.i.;:i.:.:.: :.i.:.: . . . . . . . . . ...
. . . . . . . . . . . . . . ..:.:.i.i.i.i.i:..@@M@M@M@M@M@M@M@M@M@MXS@M@M@M@M@M@M@M@M ..i:;:;.i.i.i.i.i.:.i.:.:.:.. . . . . .   .   . . . . . . . ..:.
.:.:.i.:.: : . . . . . . . . . ..:.i.i.i.i.i..;M@M@M@M@M@M@M@M@M@MXr0M@M@M@M@M@M@M@B ..i:;:;.i.i.:.i.i.i.:.: . . . . . . . . . . . . . . . . . . . ...
♠ ♦ ♣