redesign the footer with better spacing

This commit is contained in:
jorge 2022-07-12 22:28:05 +02:00
parent e343a4b04e
commit 59828039a3
2 changed files with 154 additions and 115 deletions

View File

@ -1,72 +1,77 @@
<?php <?php
/** /**
* The template for displaying the footer. * The template for displaying the footer.
* *
* Contains the closing of the id=main div and all content * Contains the closing of the id=main div and all content
* after. Calls sidebar-footer.php for bottom widgets. * after. Calls sidebar-footer.php for bottom widgets.
* *
* @package Hangar * @package Hangar
* @subpackage template * @subpackage template
* @since Twenty Ten 1.0 * @since Twenty Ten 1.0
*/ */
?> ?>
</div><!-- #main --> </div><!-- #main -->
</div><!-- #wrapper --> </div><!-- #wrapper -->
<div id="footer" role="contentinfo"> <div id="footer" role="contentinfo">
<div id="wrapfooter"> <main class="wrapfooter">
<div class="col logo"> <p class="col logo">
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php echo get_template_directory_uri(). '/images/logogris.png'; ?>" width="105" height="40" alt="Hangar org" /></a> <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php echo get_template_directory_uri(). '/images/logogris.png'; ?>" width="105" height="40" alt="Hangar org" /></a>
</div> </p>
<div class="col org"> <p class="col org">
<?php _e( 'Fundació AAVC Hangar', 'hangar' ); ?> <br /> Fundació AAVC Hangar<br />
<?php _e( 'Emilia Coranty 16', 'hangar' ); ?><br /> Emilia Coranty 16<br />
<?php _e( '08018 Barcelona Espanya', 'hangar' ); ?> 08018 Barcelona Espanya<br />
CIF: G-63157655<br />
</p>
<p class="col tels">
Tel.+34 93 308 4041<br />
Fax +34 93 307 1211<br />
info(at)hangar.org<br />
</p>
<p class="col inf">
<?php _e( '
[:en]Office: Monday to Thursday from 10&nbsp;am to 2&nbsp;pm and from 4&nbsp;pm to 6&nbsp;pm. Friday from 10&nbsp;am to 2&nbsp;pm.[:]
[:es]Oficina: de lunes a jueves de 10 a 14&nbsp;h y de 16 a 18&nbsp;h. Viernes de 10 a 14&nbsp;h.[:]
[:ca]Oficina: dilluns a dijous de 10 a 14&nbsp;h i de 16 a 18&nbsp;h. Divendres de 10 a 14&nbsp;h.[:]
' ); ?>
</p>
<!-- <p class="col legal">
</p> -->
<p class="alignright credits">
<a href="https://wordpress.org/">Powered by Wordpress</a><br />
<?php _e( 'Original Design:', 'hangar' ); ?><a href="https://folchstudio.com/">Folch Studio</a><br />
<?php _e( 'Original Development:', 'hangar' ); ?> <a href="https://www.enfusion.es/">Enfusión</a>
<?php _e( 'Development and design:', 'hangar' ); ?> <a href="https://git.hangar.org/">Hangar</a>
<br />
<a href="<?php echo get_permalink(275); ?>"><?php _e( 'Legal advice', 'hangar' ); ?></a><br />
</p>
</div> </div><!-- .fwrapfooter -->
<div class="col tels"> </div><!-- #footer -->
CIF: G-63157655<br /> <script type="text/javascript">
Tel.+34 93 308 4041<br /> jQuery('#logoslider').cycle({
Fax +34 93 307 1211<br /> fx: 'scrollLeft',
</div> delay: -1000
<div class="col inf"> });
info(at)hangar.org<br /> jQuery('#logoslider2').cycle({
<?php _e( '[:en]Office: Monday to Thursday from 10&nbsp;am to 2&nbsp;pm and from 4&nbsp;pm to 6&nbsp;pm. Friday from 10&nbsp;am to 2&nbsp;pm.[:es]Oficina: de lunes a jueves de 10 a 14&nbsp;h y de 16 a 18&nbsp;h. Viernes de 10 a 14&nbsp;h.[:ca]Oficina: dilluns a dijous de 10 a 14&nbsp;h i de 16 a 18&nbsp;h. Divendres de 10 a 14&nbsp;h.[:]' ); ?> fx: 'scrollLeft',
</div> delay: -1000
<div class="col legal"> });
<a href="<?php echo get_permalink(275); ?>"><?php _e( 'Legal advice', 'hangar' ); ?></a> jQuery('#logoslider3').cycle({
</div> fx: 'scrollLeft',
<div class="alignright credits"> delay: -1000
<a href="http://wordpress.org/">Powered by Wordpress</a><br /> });
<?php _e( 'Design:', 'hangar' ); ?><a href="http://folchstudio.com/">Folch Studio</a><br /> </script>
<?php _e( 'Development:', 'hangar' ); ?> <a href="http://www.enfusion.es/">Enfusión</a>
</div>
</div><!-- #fwrapfooter -->
</div><!-- #footer -->
<script type="text/javascript">
jQuery('#logoslider').cycle({
fx: 'scrollLeft',
delay: -1000
});
jQuery('#logoslider2').cycle({
fx: 'scrollLeft',
delay: -1000
});
jQuery('#logoslider3').cycle({
fx: 'scrollLeft',
delay: -1000
});
</script>
<?php <?php
/* Always have wp_footer() just before the closing </body> /* Always have wp_footer() just before the closing </body>
* tag of your theme, or you will break many plugins, which * tag of your theme, or you will break many plugins, which
* generally use this hook to reference JavaScript files. * generally use this hook to reference JavaScript files.
*/ */
wp_footer(); wp_footer();
?> ?>
</body> </body>
</html> </html>

146
style.css
View File

@ -12,6 +12,18 @@ Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-backgr
--------------------------------------------- ---------------------------------------------
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold|Droid+Serif:regular,italic,bold,bolditalic&subset=latin); */ @import url(http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold|Droid+Serif:regular,italic,bold,bolditalic&subset=latin); */
/* variables
--------------------------------------------- */
html {
--hangar-body-font-size: 12px;
--hangar-body-font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
--sherif-font-family: 'Droid Serif', Times, serif;
--sans-sherif-font-family:'Droid Sans',arial,sans-serif;
}
/* Reset /* Reset
--------------------------------------------- */ --------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
@ -47,7 +59,7 @@ body {
background-image: url('images/motiufons.gif'); background-image: url('images/motiufons.gif');
background-repeat:repeat-x repeat-y; background-repeat:repeat-x repeat-y;
background-color: transparent; background-color: transparent;
font-size: 0.8rem /*12px*/; font-size: var(--hangar-body-font-size);
font-family:'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-family:'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
letter-spacing: 1px; letter-spacing: 1px;
} }
@ -122,22 +134,16 @@ body {
#footer { #footer {
padding: 0px 0px 30px 0px; padding: 20px 0px 30px 0px;
clear: both; clear: both;
font-size: 1rem;
background-color: #f1f1f1; background-color: #f1f1f1;
bottom: 0; bottom: 0;
position: relative; position: relative;
height:50px; /* abans 120px */ min-height:50px;
letter-spacing:0.5px; letter-spacing:0.5px;
color:#888888; color:#888888;
} }
#wrapfooter {
max-width: 1237px;
padding: 20px 0px 0px 20px;
z-index: 0; font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
}
.aligncenter { .aligncenter {
margin:0 auto; margin:0 auto;
@ -294,7 +300,7 @@ ul.sidebar a, p.meta a, p.logged-in-as a, a.post-edit-link, #footer a {
/* Lists /* Lists
--------------------------------------------- */ --------------------------------------------- */
#content ul li {font-size:12px;} #content ul li {font-size:var(--hangar-body-font-size);}
#content #page ul, #content .post ul { #content #page ul, #content .post ul {
padding:20px 0px 10px 25px; padding:20px 0px 10px 25px;
@ -411,7 +417,7 @@ ul.menu ul.sub-menu li a:hover {text-decoration: underline;}
text-decoration:none; text-decoration:none;
} }
#sidebar-primary .logo p { #sidebar-primary .logo p {
font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-family: var(--hangar-body-font-family);
font-style:italic; font-style:italic;
font-size:13px; font-size:13px;
} }
@ -459,7 +465,7 @@ ul.sidebar li.widget_pages ul li.page_item ul.children {
max-width: 100%; max-width: 100%;
width: 130px; width: 130px;
margin:4px; margin:4px;
font-size:12px; font-size:var(--hangar-body-font-size);
float:right; float:right;
border: 1px solid #ababab; border: 1px solid #ababab;
background-color:#e5e5e5; background-color:#e5e5e5;
@ -471,8 +477,8 @@ ul.sidebar li.widget_pages ul li.page_item ul.children {
float:right; float:right;
background:#666666; background:#666666;
border:none; border:none;
font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-family: var(--hangar-body-font-family);
font-size:12px; font-size:var(--hangar-body-font-size);
color:#fff; color:#fff;
cursor:pointer; cursor:pointer;
-webkit-border-radius: 15px; -webkit-border-radius: 15px;
@ -503,8 +509,8 @@ ul.sidebar li.widget_recent_comments ul#recentcomments li.recentcomments a {
} }
/* --- Calendar Widget --- */ /* --- Calendar Widget --- */
table#wp-calendar caption { table#wp-calendar caption {
font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-family: var(--hangar-body-font-family);
font-size:12px; font-size:var(--hangar-body-font-size);
line-height:18px; line-height:18px;
font-style:italic; font-style:italic;
text-align:left; text-align:left;
@ -572,12 +578,12 @@ ul.sidebar li.widget_sociallinks a.delicious {
#content.mix #lateca {display:inline-block; height:58px;margin-bottom:10px; width:200px;overflow:hidden;} #content.mix #lateca {display:inline-block; height:58px;margin-bottom:10px; width:200px;overflow:hidden;}
#content.unic p{ padding:0px 0px 15px 0px; #content.unic p{ padding:0px 0px 15px 0px;
font-size: 12px; font-size: var(--hangar-body-font-size);
line-height:17px;} line-height:17px;}
#content .post p { #content .post p {
padding:0px 0px 15px 0px; padding:0px 0px 15px 0px;
font-size: 12px; font-size: var(--hangar-body-font-size);
line-height:17px; line-height:17px;
} }
#content .post p small { #content .post p small {
@ -591,7 +597,7 @@ ul.sidebar li.widget_sociallinks a.delicious {
margin:10px 0px 20px 0px; margin:10px 0px 20px 0px;
padding:0px 0px 0px 16px; padding:0px 0px 0px 16px;
background:url(images/blockquote-border.jpg) 0 0 repeat-y; background:url(images/blockquote-border.jpg) 0 0 repeat-y;
font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-family: var(--hangar-body-font-family);
line-height:21px; line-height:21px;
font-style:italic; font-style:italic;
} }
@ -600,7 +606,7 @@ ul.sidebar li.widget_sociallinks a.delicious {
} }
#content blockquote p cite { #content blockquote p cite {
padding:5px 0px 0px 0px; padding:5px 0px 0px 0px;
font-size:12px; font-size:var(--hangar-body-font-size);
font-weight:bold; font-weight:bold;
} }
#content address { #content address {
@ -649,8 +655,8 @@ ul.sidebar li.widget_sociallinks a.delicious {
display: block; display: block;
} }
#content p.wp-caption-text { #content p.wp-caption-text {
font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-family: var(--hangar-body-font-family);
font-size:12px; font-size:var(--hangar-body-font-size);
font-style:italic; font-style:italic;
line-height:18px; line-height:18px;
padding:7px 0px 10px 0px; padding:7px 0px 10px 0px;
@ -669,7 +675,7 @@ ul.sidebar li.widget_sociallinks a.delicious {
} }
#content .post p.meta span, #content .page p.meta span, #content p.meta span { #content .post p.meta span, #content .page p.meta span, #content p.meta span {
padding:0px 0px 0px 0px; padding:0px 0px 0px 0px;
font-size:12px; font-size:var(--hangar-body-font-size);
line-height:14px; line-height:14px;
} }
@ -686,7 +692,7 @@ ul.sidebar li.widget_sociallinks a.delicious {
} }
#content.resultats p{ #content.resultats p{
font-size:12px; font-size:var(--hangar-body-font-size);
line-height:17px; line-height:17px;
padding-bottom:10px; padding-bottom:10px;
} }
@ -704,7 +710,7 @@ ul.sidebar li.widget_sociallinks a.delicious {
#content.resultats div#navi {display:block; height:30px;} #content.resultats div#navi {display:block; height:30px;}
a.post-edit-link { a.post-edit-link {
font-size:12px; font-size:var(--hangar-body-font-size);
} }
#content p.previous { #content p.previous {
float:left; float:left;
@ -725,7 +731,11 @@ a.post-edit-link {
p.blue {color: #0043F6;} p.blue {color: #0043F6;}
p.curt {padding-bottom:1px!important;line-height:12px!important;font-size:12px!important; } p.curt {
padding-bottom:1px!important;
line-height:var(--hangar-body-font-size)!important;
font-size:var(--hangar-body-font-size)!important;
}
p.peullarg {padding-bottom:20px;} p.peullarg {padding-bottom:20px;}
@ -824,7 +834,13 @@ span.cat a{text-transform: uppercase; letter-spacing:normal}
#sidebar-secondary .boxentry {margin-right: 0px; margin-left:0px;} #sidebar-secondary .boxentry {margin-right: 0px; margin-left:0px;}
#sidebar-secondary .boxentry p.meta{clear:both;overflow:hidden;font-size:12px; line-height:14px;padding-bottom:14px;} #sidebar-secondary .boxentry p.meta{
clear:both;
overflow:hidden;
font-size:var(--hangar-body-font-size);
line-height:14px;
padding-bottom:14px;
}
#content.mix .boxentry {margin-right:4px; margin-left:4px;} #content.mix .boxentry {margin-right:4px; margin-left:4px;}
@ -872,9 +888,9 @@ a.peutots {margin-bottom:15px;}
.nofons {background-color:transparent!important;} .nofons {background-color:transparent!important;}
.nopadding {padding-bottom:0px!important;} .nopadding {padding-bottom:0px!important;}
p.carrec{ font-size: 12px; line-height:14px; padding-bottom:20px;} p.carrec{ font-size: var(--hangar-body-font-size); line-height:14px; padding-bottom:20px;}
p.carrec:before {content: " - ";} p.carrec:before {content: " - ";}
p.boxcurta{font-size:12px; line-height:12px; padding-bottom:2px;} p.boxcurta{font-size:var(--hangar-body-font-size); line-height:var(--hangar-body-font-size); padding-bottom:2px;}
span.categ a{text-transform:uppercase; color: #666666;} span.categ a{text-transform:uppercase; color: #666666;}
span.categ a:after {content: " ─ ";} span.categ a:after {content: " ─ ";}
/* breadcrum */ /* breadcrum */
@ -907,8 +923,8 @@ p#sidebarr {display: inline-block; height:16px; overflow:hidden; margin: 2px 0
} }
#content .post #author-description h2 { #content .post #author-description h2 {
padding:0px; padding:0px;
font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-family: var(--hangar-body-font-family);
font-size:12px; font-size:var(--hangar-body-font-size);
font-weight:normal; font-weight:normal;
} }
#content .post #author-description h2 span { #content .post #author-description h2 span {
@ -917,7 +933,7 @@ p#sidebarr {display: inline-block; height:16px; overflow:hidden; margin: 2px 0
letter-spacing:0.1em; letter-spacing:0.1em;
} }
#content .post #author-description p, .page-link { #content .post #author-description p, .page-link {
font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-family: var(--hangar-body-font-family);
font-size:13px; font-size:13px;
line-height:18px; line-height:18px;
font-style:italic; font-style:italic;
@ -958,8 +974,8 @@ p.cf-sb {clear:both; }
color: #FFFFFF; color: #FFFFFF;
cursor: pointer; cursor: pointer;
float: right; float: right;
font-family: 'Helvetica Neue',Helvetica,Arial,'Liberation Sans',FreeSans,sans-serif; font-family: var(--hangar-body-font-family);
font-size: 12px; font-size: var(--hangar-body-font-size);
margin: 4px; margin: 4px;
padding: 2px; padding: 2px;
width: 55px; } width: 55px; }
@ -994,8 +1010,8 @@ ul.catlist li {display:inline}
line-height:19px; line-height:19px;
} }
#comments-content p.moderation { #comments-content p.moderation {
font-family:'Droid Serif', Times, serif; font-family:var(--sherif-font-family);
font-size:12px; font-size:var(--hangar-body-font-size);
font-style:italic; font-style:italic;
color:#999; color:#999;
} }
@ -1019,7 +1035,7 @@ ul.catlist li {display:inline}
} }
.comment-meta { .comment-meta {
padding:0px 0px 10px 0px; padding:0px 0px 10px 0px;
font-size:12px; font-size:var(--hangar-body-font-size);
} }
.comment-gravatar { .comment-gravatar {
margin:1px 15px 0px 0px; margin:1px 15px 0px 0px;
@ -1034,12 +1050,12 @@ ul.catlist li {display:inline}
float:right; float:right;
} }
a.comment-reply-link { a.comment-reply-link {
font-size:12px; font-size:var(--hangar-body-font-size);
font-weight:bold; font-weight:bold;
} }
p.logged-in-as { p.logged-in-as {
font-family:'Droid Serif', Times, serif; font-family:var(--sherif-font-family);
font-size:12px; font-size:var(--hangar-body-font-size);
font-style:italic; font-style:italic;
} }
#comments-content ol li.post.pingback { #comments-content ol li.post.pingback {
@ -1056,7 +1072,7 @@ span.fn {color: #0043f6;}
a#cancel-comment-reply-link { a#cancel-comment-reply-link {
padding:3px 0px 0px 0px; padding:3px 0px 0px 0px;
float:right; float:right;
font-size:12px; font-size:var(--hangar-body-font-size);
} }
#content .post #comments-content #respond h3#reply-title { #content .post #comments-content #respond h3#reply-title {
padding:30px 0px 6px 0px; padding:30px 0px 6px 0px;
@ -1068,18 +1084,18 @@ a#cancel-comment-reply-link {
} }
form#commentform p.comment-notes { form#commentform p.comment-notes {
padding:5px 0px 15px 0px; padding:5px 0px 15px 0px;
font-family:'Droid Serif', Times, serif; font-family:var(--sherif-font-family);
font-size:12px; font-size:var(--hangar-body-font-size);
font-style:italic; font-style:italic;
} }
form#commentform input#author, form#commentform input#email, form#commentform input#url { form#commentform input#author, form#commentform input#email, form#commentform input#url {
font-family:'Droid Sans', arial, sans-serif; font-family:var(--sans-serif-font-family);
height:22px; height:22px;
} }
form#commentform textarea#comment { form#commentform textarea#comment {
width:90%; width:90%;
padding:3px; padding:3px;
font-family:'Droid Sans', arial, sans-serif; font-family:var(--sans-serif-font-family);
} }
form#commentform p.comment-form-author, form#commentform p.comment-form-email, form#commentform p.comment-form-url, form#commentform p.comment-form-comment { form#commentform p.comment-form-author, form#commentform p.comment-form-email, form#commentform p.comment-form-url, form#commentform p.comment-form-comment {
padding:10px 0px 0px 0px; padding:10px 0px 0px 0px;
@ -1089,8 +1105,8 @@ form#commentform p.form-submit input#submit {
padding:6px 8px 6px 8px; padding:6px 8px 6px 8px;
background:#333333; background:#333333;
border:none; border:none;
font-family:'Droid Sans', arial, sans-serif; font-family:var(--sans-serif-font-family);
font-size:12px; font-size:var(--hangar-body-font-size);
color:#fff; color:#fff;
cursor:pointer; cursor:pointer;
} }
@ -1116,8 +1132,8 @@ form#commentform p.form-submit input#submit {
.gallery .gallery-caption { .gallery .gallery-caption {
margin-left: 0; margin-left: 0;
padding: 5px 0px 8px 0px; padding: 5px 0px 8px 0px;
font-family:'Droid Serif', Times, serif; font-family:var(--sherif-font-family);
font-size: 12px; font-size: var(--hangar-body-font-size);
font-style: italic; font-style: italic;
line-height: 16px; color: #03F; line-height: 16px; color: #03F;
display: block!important; display: block!important;
@ -1125,13 +1141,30 @@ form#commentform p.form-submit input#submit {
/* Footer /* Footer
--------------------------------------------- */ --------------------------------------------- */
#footer p { .wrapfooter {
line-height:19px; max-width: 1237px;
font-size:11px; padding: 20px 0px 0px 20px;
color: #808080; z-index: 0;
font-size: var(--hangar-body-font-size);
font-family: var(--hangar-body-font-family);
display:flex;
justify-content: space-between;
} }
.wrapfooter p {
line-height:19px;
font-size:var(--hangar-body-font-size);
color: #808080;
}
.center {text-align:center;} .center {text-align:center;}
/* .col {float: left; } */
.logo { width:140px; margin:0;}
.org,.tels,.inf,.legal,.credits {
width: calc((100% - 140px)/5)
}
.credits a{color: #A3A7A5!important;}
/* .center {text-align:center;}
.col {float: left; } .col {float: left; }
.logo { width:140px; margin:0;} .logo { width:140px; margin:0;}
.org { width:278px;} .org { width:278px;}
@ -1139,7 +1172,8 @@ form#commentform p.form-submit input#submit {
.inf{width: 267px;} .inf{width: 267px;}
.legal {width:68px;padding-top:30px;padding-left: 30px;} .legal {width:68px;padding-top:30px;padding-left: 30px;}
.credits {width:150px; font-size:9px; color: #A3A7A5; margin-top:9px;} .credits {width:150px; font-size:9px; color: #A3A7A5; margin-top:9px;}
.credits a{color: #A3A7A5!important;} .credits a{color: #A3A7A5!important;} */
/* Archives /* Archives
--------------------------------------------- */ --------------------------------------------- */
@ -1147,8 +1181,8 @@ h1.archive {
margin:0px 0px 25px 0px; margin:0px 0px 25px 0px;
padding: 0px 0px 10px 0px; padding: 0px 0px 10px 0px;
border-bottom:1px dotted #333333; border-bottom:1px dotted #333333;
font-family:'Droid Serif', Times, serif; font-family:var(--sherif-font-family);
font-size:12px; font-size:var(--hangar-body-font-size);
font-weight:normal; font-weight:normal;
font-style:italic; font-style:italic;
letter-spacing:0.1em; letter-spacing:0.1em;