Typography code

Hello

I am trying to add some typography code in articles, but it does not appear.

Do I need to activate a plugin? Why the code is not appearing?

Thank you

Andy

Could you provide url to your website with article where typography code is used and it doesn't appear ?

Hello

This is the page: http://new.newsmilecostarica.com/living ... tures.html

I have using RokTabs to display articles from a specific category.

Thank you for you time and help.

Andy

Hi

It's pretty normal, because content inside Roktabs uses own classes.
The typography embedded on the template is for joomla component content display.
So, if you want to make it effect inside Roktabs, you can open typo.css file and copy all code, paste at the end of the page and ONLY on this new lines, replace

Code: Select all

.article-content

with

Code: Select all

div.roktabs-wrapper

For example, on this lines:

Code: Select all

.article-content p.info1,
.article-content p.info2,
.article-content p.info3,
.article-content p.info4{background:transparent url('../images/icons/info.gif') no-repeat left center}


it should be (only for Roktabs)

Code: Select all

div.roktabs-wrapper p.info1,
div.roktabs-wrapper p.info2,
div.roktabs-wrapper p.info3,
div.roktabs-wrapper p.info4{background:transparent url('../images/icons/info.gif') no-repeat left center}


or like this way also will work, besides joomla articles, Roktabs.

Code: Select all

p.info1,p.info2,p.info3,p.info4{background:transparent url('../images/icons/info.gif') no-repeat left center}


You need also to find the color classes for typography on style1.css, style2.css and so on. Naturally, make the same process.

Cheers

Hello

I did what you recommended, but when I replaced code ".article-content" with "div.roktabs-wrapper" in typo.css, I could add to roktabs, but I coulg not add typo code on my articles.


I replace ALL lines with .article-content with div.roktabs-wrapper yn typo.css... I think this is the problem... do you now what specific lines I must change?

Thank you

Andy

you can connect rules for articles and rocktabs:

Code: Select all

.article-content p.info1,
.article-content p.info2,
.article-content p.info3,
.article-content p.info4,
div.roktabs-wrapper p.info1,
div.roktabs-wrapper p.info2,
div.roktabs-wrapper p.info3,
div.roktabs-wrapper p.info4{background:transparent url('../images/icons/info.gif') no-repeat left center}


Hello dzludek

This is what I understood, but I can not achieve tito reflect this changes in roktabs. This typo.css

Thank you

Andy

/*
#------------------------------------------------------------------------
# memovie - February 2010 (for Joomla 1.5)
#
# Copyright (C) 2007-2010 Gavick.com. All Rights Reserved.
# License: Copyrighted Commercial Software
# Website: http://www.gavick.com
# Support: [email protected]
#------------------------------------------------------------------------
# Based on T3 Framework
#------------------------------------------------------------------------
# Copyright (C) 2004-2009 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
# @license - GNU/GPL, http://www.gnu.org/copyleft/gpl.html
# Author: J.O.O.M Solutions Co., Ltd
# Websites: http://www.joomlart.com - http://www.joomlancers.com
#------------------------------------------------------------------------
*/
/*
* Typography
*/
/* Code */
.article-content pre,
.article-content .code1,
.article-content .code2{margin:10px 0 15px!important; padding:10px 15px!important; font-size:0.92em!important; font-family:'Curier New',monospace!important}
.article-content .code2{padding-left:20px!important}
.article-content .code3{padding:0 0 5px 20px!important}
.article-content .code3 h4{width:35px; position:relative; top:-10px; margin:0 0 -10px 11px!important; padding:0 5px; font-size:1.17em; font-weight:normal}
/* Warnings */
.article-content p.info1,
.article-content p.info2,
.article-content p.info3,
.article-content p.info4,
div.roktabs-wrapper p.info1,
div.roktabs-wrapper p.info2,
div.roktabs-wrapper p.info3,
div.roktabs-wrapper p.info4{background:transparent url('../images/icons/info.gif') no-repeat left center}

.article-content p.warning1,
.article-content p.warning2,
.article-content p.warning3,
.article-content p.warning4{background:transparent url('../images/icons/warning.gif') no-repeat left center}

.article-content p.tips1,
.article-content p.tips2,
.article-content p.tips3,
.article-content p.tips4{background:transparent url('../images/icons/tips.gif') no-repeat left center}

.article-content p.info1,
.article-content p.info3,
.article-content p.warning1,
.article-content p.warning3,
.article-content p.tips1,
.article-content p.tips3{padding-left:30px}

.article-content p.info2,
.article-content p.info4{padding:3px 3px 3px 30px; border-top:#39f solid 1px; border-bottom:#39f solid 1px; background-position:3px center}

.article-content p.info3,
.article-content p.info4{background-color:#f0f6fe; background-position:7px center; min-height:14px; padding:12px 0 14px 30px}

.article-content p.warning2,
.article-content p.warning4{border-top:#f71212 solid 1px; border-bottom:#f71212 solid 1px; padding:3px 3px 3px 30px; background-position:3px center}

.article-content p.warning3,
.article-content p.warning4{background-color:#ffeeea; background-position:7px center; min-height:14px; width:auto; padding:12px 0 14px 30px}

.article-content p.warning4{border-top:#f71212 solid 1px; border-bottom:#f71212 solid 1px}

.article-content p.tips2,
.article-content p.tips4{border-top:#fde647 solid 1px; border-bottom:#fde647 solid 1px; padding:3px 3px 3px 30px; background-position:3px center}

.article-content p.tips3,
.article-content p.tips4{display:block; background-color:#fdffca; background-position:7px center; min-height:14px; padding:12px 0 14px 30px}

.article-content p.tips4{border-top:#fde647 solid 1px; border-bottom:#fde647 solid 1px}

/* Dropcaps */
.article-content span.Dropcap1,
.article-content span.Dropcap2,
.article-content span.Dropcap3{font-size:5.0em; display:block; float:left; line-height:1.0em; font-family:'Times New Roman',serif}

.article-content span.Dropcap1{height:61px; margin:-4px 5px -3px 0}

.article-content p.Dropcap2{padding:0 0 0 50px}

.article-content span.Dropcap2{height:61px; margin:-4px 0 0 -50px}

.article-content p.Dropcap3{margin-top:32px}

.article-content span.Dropcap3{height:61px; margin:-32px 5px 0 0}

/* Blockquotes */
.article-content blockquote{font-style:italic; margin:20px 0; float:left}

.article-content blockquote div.blockquote1 div{padding:0 17px}

.article-content blockquote div.blockquote2 div{padding:0 17px}

.article-content blockquote div.blockquote3{padding-bottom:5px}

.article-content blockquote div.blockquote3 div{padding:5px 27px 0 27px}

.article-content blockquote div.blockquote4{padding-top:2px}

.article-content blockquote div.blockquote4 div{padding:5px 27px 0 27px}

/* Floated blocks */
.article-content .blockTextLeft,
.article-content .blockTextRight,
.article-content .blockTextCenter{display:block; width:30%; padding:15px; font-style:italic}

.article-content .blockTextLeft{float:left; text-align:left}

.article-content .blockTextRight{float:right; text-align:right}

.article-content .blockTextCenter{margin:0 auto; text-align:center}

/* Legends */
.article-content div.legend1 h4,
.article-content div.legend2 h4,
.article-content div.legend3 h4,
.article-content div.legend4 h4,
.article-content div.legend5 h4,
.article-content div.legend6 h4{width:auto; float:left; background:#fff; position:relative; top:-9px; left:11px; margin:0 0 -9px 0!important; padding:0 3px; font-size:1.17em; font-weight:normal}

.article-content div.legend3 h4:first-child,
.article-content div.legend5 h4:first-child{background:#e7e7e7}

.article-content div.legend4 h4:first-child,
.article-content div.legend6 h4:first-child{border:solid 1px #666}

.article-content div.legend1,
.article-content div.legend5,
.article-content div.legend6{border:solid 1px #666; margin:25px 0}

.article-content div.legend2,
.article-content div.legend3,
.article-content div.legend4{border-top:solid 1px #666; border-bottom:solid 1px #666; margin:25px 0}

.article-content div.legend1 p,
.article-content div.legend2 p,
.article-content div.legend3 p,
.article-content div.legend4 p,
.article-content div.legend5 p,
.article-content div.legend6 p{margin:7px; clear:both}

/* icons */
.article-content .audio, .article-content .creditcard, .article-content .feed, .article-content .help, .article-content .webcam, .article-content .images, .article-content .lock, .article-content .printer, .article-content .report, .article-content .script, .article-content .time, .article-content .user, .article-content .world, .article-content .camera, .article-content .brick, .article-content .box, .article-content .cart, .article-content .cd, .article-content .chart_bar, .article-content .chart_line, .article-content .chart_pie, .article-content .clock, .article-content .cog, .article-content .coins, .article-content .compress, .article-content .computer, .article-content .cross, .article-content .disk, .article-content .error, .article-content .email, .article-content .accept, .article-content .add, .article-content .calendar, .article-content .group, .article-content .exclamation, .article-content .film, .article-content .folder, .article-content .heart, .article-content .house, .article-content .image, .article-content .information, .article-content .magnifier, .article-content .money, .article-content .new, .article-content .note, .article-content .page, .article-content .page_white, .article-content .plugin{padding:0 0 2px 30px!important}
.article-content .audio{background:transparent url('../images/icons/audio.gif') no-repeat left top}
.article-content .creditcard{background:transparent url('../images/icons/credit.gif') no-repeat left top}
.article-content .feed{background:transparent url('../images/icons/feed.gif') no-repeat left top}
.article-content .help{background:transparent url('../images/icons/help.gif') no-repeat left top}
.article-content .webcam{background:transparent url('../images/icons/webcam.gif') no-repeat left top}
.article-content .images{background:transparent url('../images/icons/images.png') no-repeat left top}
.article-content .lock{background:transparent url('../images/icons/lock.png') no-repeat left top}
.article-content .printer{background:transparent url('../images/icons/printer.png') no-repeat left top}
.article-content .report{background:transparent url('../images/icons/report.png') no-repeat left top}
.article-content .script{background:transparent url('../images/icons/script.png') no-repeat left top}
.article-content .time{background:transparent url('../images/icons/time.png') no-repeat left top}
.article-content .user{background:transparent url('../images/icons/user.png') no-repeat left top}
.article-content .world{background:transparent url('../images/icons/world.png') no-repeat left top}
.article-content .cart{background:transparent url('../images/icons/cart.png') no-repeat left top}
.article-content .cd{background:transparent url('../images/icons/cd.png') no-repeat left top}
.article-content .chart_bar{background:transparent url('../images/icons/chart_bar.png') no-repeat left top}
.article-content .chart_line{background:transparent url('../images/icons/chart_line.png') no-repeat left top}
.article-content .chart_pie{background:transparent url('../images/icons/chart_pie.png') no-repeat left top}
.article-content .clock{background:transparent url('../images/icons/clock.png') no-repeat left top}
.article-content .cog{background:transparent url('../images/icons/cog.png') no-repeat left top}
.article-content .coins{background:transparent url('../images/icons/coins.png') no-repeat left top}
.article-content .compress{background:transparent url('../images/icons/compress.png') no-repeat left top}
.article-content .computer{background:transparent url('../images/icons/computer.png') no-repeat left top}
.article-content .cross{background:transparent url('../images/icons/cross.png') no-repeat left top}
.article-content .disk{background:transparent url('../images/icons/disk.png') no-repeat left top}
.article-content .error{background:transparent url('../images/icons/error.png') no-repeat left top}
.article-content .email{background:transparent url('../images/icons/email.gif') no-repeat left top}
.article-content .exclamation{background:transparent url('../images/icons/exclamation.png') no-repeat left top}
.article-content .film{background:transparent url('../images/icons/film.png') no-repeat left top}
.article-content .folder{background:transparent url('../images/icons/folder.png') no-repeat left top}
.article-content .group{background:transparent url('../images/icons/group.png') no-repeat left top}
.article-content .heart{background:transparent url('../images/icons/heart.png') no-repeat left top}
.article-content .house{background:transparent url('../images/icons/house.png') no-repeat left top}
.article-content .image{background:transparent url('../images/icons/image.png') no-repeat left top}
.article-content .information{background:transparent url('../images/icons/information.png') no-repeat left top}
.article-content .magnifier{background:transparent url('../images/icons/magnifier.png') no-repeat left top}
.article-content .money{background:transparent url('../images/icons/money.png') no-repeat left top}
.article-content .new{background:transparent url('../images/icons/new.png') no-repeat left top}
.article-content .note{background:transparent url('../images/icons/note.png') no-repeat left top}
.article-content .page{background:transparent url('../images/icons/page.png') no-repeat left top}
.article-content .page_white{background:transparent url('../images/icons/page_white.png') no-repeat left top}
.article-content .plugin{background:transparent url('../images/icons/plugin.png') no-repeat left top}
.article-content .accept{background:transparent url('../images/icons/accept.png') no-repeat left top}
.article-content .add{background:transparent url('../images/icons/add.png') no-repeat left top}
.article-content .camera{background:transparent url('../images/icons/camera.png') no-repeat left top}
.article-content .brick{background:transparent url('../images/icons/brick.png') no-repeat left top}
.article-content .box{background:transparent url('../images/icons/box.png') no-repeat left top}
.article-content .calendar{background:transparent url('../images/icons/calendar.png') no-repeat left top}

/* Highlights */
.article-content .highlight-1,
.article-content .highlight-2,
.article-content .highlight-3,
.article-content .highlight-4{padding:1px 5px}

/* Colors for spans */
.article-content span.clear,
.article-content span.clear-1,
.article-content span.clear-2,
.article-content span.color,
.article-content span.color-1,
.article-content span.color-2,
.article-content span.color-3,
.article-content span.color-4,
.article-content span.color-5,
.article-content span.color-6,
.article-content span.color-7{display:block; padding:5px 10px; margin-bottom:10px}

/* ordered lists */
.article-content ol{padding-left:28px; list-style-position:inside}

.article-content ol.dec{list-style-type:decimal; list-style-position:inside}

.article-content ol.roman{list-style-type:upper-roman; list-style-position:inside}

.article-content ol.alpha{list-style-type:lower-alpha; list-style-position:inside}

.article-content ol.decimalLeadingZero{list-style-type:decimal-leading-zero; list-style-position:inside}

/* unordered lists */
.article-content ul.bullet1,
.article-content ul.bullet2,
.article-content ul.bullet3,
.article-content ul.bullet4,
.article-content ul.circle1,
.article-content ul.circle2,
.article-content ul.square1,
.article-content ul.square2,
.article-content ul.square3{padding-left:18px}

.article-content ul.bullet1 li,
.article-content ul.bullet2 li,
.article-content ul.bullet3 li,
.article-content ul.bullet4 li,
.article-content ul.circle1 li,
.article-content ul.circle2 li,
.article-content ul.square1 li,
.article-content ul.square2 li,
.article-content ul.square3 li{margin:10px 0!important; line-height:0.83em!important; list-style-position:inside; overflow:inherit}

.article-content ul.circle2{list-style-type:circle}

.article-content ul.square1{list-style-type:square}

/* Numbers */
.article-content div.number1 span{padding:4px}

.article-content div.number2 span{padding:4px; color:#fff}

/* Definition lists */
.article-content dl.def1 dt,
.article-content dl.def2 dt,
.article-content dl.def3 dt{margin:10px 0 5px 0}

.article-content dl.def1 dd,
.article-content dl.def2 dd,
.article-content dl.def3 dd{padding-left:25px}

.article-content dl.def2 dt{text-decoration:underline}

.article-content dl.def3 dt{font-weight:bold}

/* acronyms and abbrs */
.article-content acronym,
.article-content abbr{border-bottom-width:1px; border-bottom-style:dotted}

.article-content acronym:hover,
.article-content abbr:hover{border-bottom-style:solid; cursor:pointer}

/*
* typography.css
*/

.article-content pre,
.article-content .code1,
.article-content .code2{background:#f7f7f7}

.article-content pre,
.article-content .code1{border-left:5px solid #005689!important}

.article-content .code2{border-top:5px solid #005689; border-bottom:5px solid #005689}

.article-content .code3{border-top:1px solid #005689; border-bottom:1px solid #005689}

.article-content .code3 h4{background:#fff}

.article-content p.info1,
.article-content p.info2,
.article-content p.info3,
.article-content p.info4{background:transparent url('../images/icons/info.gif') no-repeat left center}

.article-content p.warning1,
.article-content p.warning2,
.article-content p.warning3,
.article-content p.warning4{background:transparent url('../images/icons/warning.gif') no-repeat left center}

.article-content p.tips1,
.article-content p.tips2,
.article-content p.tips3,
.article-content p.tips4{background:transparent url('../images/icons/tips.gif') no-repeat left center}

.article-content p.info2,
.article-content p.info4{border-top:#d1e8f5 solid 1px; border-bottom:#d1e8f5 solid 1px; background-position:3px center}

.article-content p.info3,
.article-content p.info4{background-color:#f4fbff; background-position:7px center}

.article-content p.warning2,
.article-content p.warning4{border-top:#f5d1d1 solid 1px; border-bottom:#f5d1d1 solid 1px; background-position:3px center}

.article-content p.warning3,
.article-content p.warning4{background-color:#f6eeee; background-position:7px center}

.article-content p.tips2,
.article-content p.tips4{border-top:#f5f4aa solid 1px; border-bottom:#f5f4aa solid 1px; background-position:3px center}

.article-content p.tips3,
.article-content p.tips4{background-color:#fffff3; background-position:7px center}
.article-content blockquote div.blockquote1{background:transparent url(../images/style1/typography/open1.png) no-repeat left bottom}
.article-content blockquote div.blockquote1 div{background:transparent url(../images/style1/typography/close1.png) no-repeat right top}
.article-content blockquote div.blockquote2{background:transparent url(../images/style1/typography/open1.png) no-repeat left top}
.article-content blockquote div.blockquote2 div{background:transparent url(../images/style1/typography/close1.png) no-repeat right top}
.article-content blockquote div.blockquote3{background:transparent url(../images/style1/typography/open2.png) no-repeat left bottom}
.article-content blockquote div.blockquote3 div{background:transparent url(../images/style1/typography/close2.png) no-repeat right top}
.article-content blockquote div.blockquote4{background:transparent url(../images/style1/typography/open2.png) no-repeat left top}
.article-content blockquote div.blockquote4 div{background:transparent url(../images/style1/typography/close2.png) no-repeat right top}

.article-content div.legend1 h4,
.article-content div.legend2 h4,
.article-content div.legend3 h4,
.article-content div.legend4 h4,
.article-content div.legend5 h4,
.article-content div.legend6 h4{background:#f5f5f5}

.article-content div.legend3 h4:first-child,
.article-content div.legend5 h4:first-child{background:#e7e7e7}

.article-content div.legend4 h4:first-child,
.article-content div.legend6 h4:first-child{border:solid 1px #666}

.article-content div.legend1,
.article-content div.legend5,
.article-content div.legend6{border:solid 1px #666}

.article-content div.legend2,
.article-content div.legend3,
.article-content div.legend4{border-top:solid 1px #666; border-bottom:solid 1px #666}
.article-content .highlight-1{background:#ffffda}
.article-content .highlight-2{background:#005689; color:#fff}
.article-content .highlight-3{background:#890000; color:#fff}
.article-content .highlight-4{background:#333; color:#fff}
.article-content span.clear{border-top:1px solid #005689; border-bottom:1px solid #005689; color:#005689}
.article-content span.clear-1{border-top:1px solid #890000; border-bottom:1px solid #890000; color:#014b94}
.article-content span.clear-2{border-top:1px solid #333; border-bottom:1px solid #333; color:#333}
.article-content span.color{color:#005689}
.article-content span.color-1{color:#890000}
.article-content span.color-2{color:#005689; border-left:2px solid #005689}
.article-content span.color-3{color:#333; border-left:2px solid #333}
.article-content span.color-4{color:#005689; background:#f4fbff}
.article-content span.color-5{color:#fff; background:#890000}
.article-content span.color-6{color:#d48d1c; background:#ffe; border-top:1px solid #e9e9a1; border-bottom:1px solid #e9e9a1}
.article-content span.color-7{background:#333; color:#fff}
.article-content ul.circle1{list-style-image:url(../images/style1/typography/bullet3ul.png)!important}
.article-content ul.circle2{list-style-type:circle}
.article-content ul.bullet1{list-style-image:url(../images/style1/typography/bullet_ol_1_dark.png)!important}
.article-content ul.bullet2{list-style-image:url(../images/style1/typography/bullet1ul.png)!important}
.article-content ul.bullet3{list-style-image:url(../images/style1/typography/bullet2ul.png)!important}
.article-content ul.bullet4{list-style-image:url(../images/style1/typography/bullet_ol_1_color.png)!important}
.article-content ul.square1{list-style-type:square}
.article-content ul.square2{list-style-image:url(../images/style1/typography/bullet_squ1_dark.png)!important}
.article-content ul.square3{list-style-image:url(../images/style1/typography/bullet_squ1_color.png)!important}
.article-content div.number1 span{background:transparent url(../images/style1/typography/bullet_ol_2.png) no-repeat center center; color:#fff}

.article-content div.number2 span{background:transparent url(../images/style1/typography/bullet_ol_2_color.png) no-repeat center center; color:#fff}


/* Light Theme */

.roktabs-wrapper {padding: 0;}
.roktabs-wrapper .light {position: relative;border: 1px solid #DCDCDC;}
.roktabs-wrapper .light .roktabs-container-inner {position:relative;overflow: hidden;}
.roktabs-wrapper .light .roktabs-container-wrapper {clear: both;position: relative;overflow: hidden;}
.roktabs-wrapper .light .roktabs-container-wrapper div {float: left;/*width: 450px;*//*width: 220px;*/}
.roktabs-wrapper .light .roktabs-container-wrapper div.wrapper {padding: 14px;width: auto;}
.roktabs-wrapper .light .roktabs-links {overflow: hidden;margin:0;}
.roktabs-wrapper .light .active-arrows .roktabs-links {margin:0 21px;}
.roktabs-wrapper .light .roktabs-links ul {text-align: left;font-weight: bold;list-style-type: none;padding: 0;overflow:hidden;}
.roktabs-wrapper .light .roktabs-links ul.roktabs-top {margin: 0;background: url(../Documents/Joomla%201.5.x/Templates/Gavick/Memovie/QUICKSTART_FEB2010/templates/gk_memovie/css/tabbg-light.png) 0 0 repeat-x;height: 32px;}
.roktabs-wrapper .light .roktabs-links ul.roktabs-bottom {margin: 0;background: url(../Documents/Joomla%201.5.x/Templates/Gavick/Memovie/QUICKSTART_FEB2010/templates/gk_memovie/css/tabbg-bottom-light.png) 0 0 repeat-x;height: 32px;}
.roktabs-wrapper .light .roktabs-links ul li {float: left;padding: 0;margin: 0;text-decoration: none;border-right: 1px solid #DCDCDC;border-bottom: none;color: #666;position: relative;height: 31px;line-height: 31px;}
.roktabs-wrapper .light .roktabs-links ul li span {padding: 0 10px;}
.roktabs-wrapper .light .roktabs-links ul li.first {border-left: 0;}
.roktabs-wrapper .light .roktabs-links ul li.active.last {border-right: 1px solid #DCDCDC;}
.roktabs-wrapper .light .roktabs-links ul li.last {border-right: 0;}
.roktabs-wrapper .light .roktabs-links ul li.hover {color: #000;}
.roktabs-wrapper .light .roktabs-links ul.roktabs-top li.active {background: url(../Documents/Joomla%201.5.x/Templates/Gavick/Memovie/QUICKSTART_FEB2010/templates/gk_memovie/css/tabbg-active-light.png) 0 0 repeat-x;color: #000;height: 31px;border-bottom: 1px solid #fff;}
.roktabs-wrapper .light .roktabs-links ul.roktabs-bottom li.active {background: url(../Documents/Joomla%201.5.x/Templates/Gavick/Memovie/QUICKSTART_FEB2010/templates/gk_memovie/css/tabbg-active-bottom-light.png) 0 0 repeat-x;color: #000;height: 31px;border-top: 1px solid #fff;margin-top: -1px;}
.roktabs-wrapper .light .roktabs-links ul li.active.first {border-left: 0;}
.roktabs-wrapper .light .roktabs-scroller {position: absolute;bottom: 0;right: 0;height: 32px;}
.roktabs-wrapper .light .arrow-next, .roktabs-wrapper .light .arrow-prev {line-height: 29px;margin: 1px;text-align: center;float: left;cursor: pointer;border: 1px solid #DCDCDC;z-index: 2;width:17px;position:absolute;top:0;height:29px;}
.roktabs-wrapper .light .arrow-next {right:0;background: url(http://new.newsmilecostarica.com/module ... -light.png) 50% 0 no-repeat;}
.roktabs-wrapper .light .arrow-prev {left:0;background: url(http://new.newsmilecostarica.com/module ... -light.png) 50% 0 no-repeat;}
.roktabs-wrapper .light .arrow-next-hover {background-position: 50% -29px;}
.roktabs-wrapper .light .arrow-prev-hover {background-position: 50% -29px;}
.roktabs-wrapper .light .arrow-prev span, .roktabs-wrapper .light .arrow-next span {display: none;}
.roktabs-wrapper .light .roktabs-container-tr, .roktabs-wrapper .light .roktabs-container-inner, .roktabs-wrapper .light .active-arrows {background: #fff;}
.clear {clear: both;}
.roktabs-wrapper .icon-left .tab-icon {vertical-align:middle;margin-right:5px;}
.roktabs-wrapper .icon-right .tab-icon {vertical-align:middle;margin-left:5px;}

because you have to duplicate all CSS rules for roktabs - without it you have defined styles only for first info paragraphs.