Joomla Templates Club 406,261 posts

[guru2085 Friend guru2085Join date: March 2008Posts: 50Downloads:0Uploads:1 Thanks: 9]

#126844

i have implemented the RokFlow from rockettheme into Joomlart template, but unfortunately the flyers are not flowing if anyone has any ideas please let me know check my site out for the flyers here http://www.xtrahype.com/main… i have been woorking on this for a while now. and still can’t get it t flow. check my previous post Templates RokFlow for tutorial

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#242918

First i would have unpublised FPSS and the product scroller modules.
Then give us a FULL list over each step you have done to make it work

[guru2085 Friend guru2085Join date: March 2008Posts: 50Downloads:0Uploads:1 Thanks: 9]

#242967

<em>@Menalto 45442 wrote:</em><blockquote>First i would have unpublised FPSS and the product scroller modules.
Then give us a FULL list over each step you have done to make it work</blockquote>
Template RokFlow Tutorial
————————————–
Files needed to get rokflow to work

I Have made it easy to Prepare the files for you guys on my site go here
http://xtrahype.com/main/component/option,com_afm/Itemid,62/
–or go to http://www.xtrahype.com/main = scroll to features | downloads | Free FIles….

-rokflow.js
-mootools-release-1.11.js
-loader.gif
-bot_rokzoom2.0.zip.
-also get the covers folder from my free files download directory on my site. the covers folder is zipped up and it has the pics like what u see on my site. or if u have your rockettheme template u can get it from your images folder.

-Add loader.gif to your /templates/ja_quillaja/images/ Folder
-Add mootools-release-1.11.js to your /templates/ja_quillaja/scripts Folder
-Add rokflow.js to your /templates/ja_quillaja/scripts Folder

-Add this Block of Code to your Template Index.php, you want to add this code where it see your files linked to your scripts folder….
——————————————————————————————————————————————
<script language=”javascript” type=”text/javascript” src=”<?php echo $ja_template_path;?>/scripts/mootools-release-1.11.js”></script>
<script type=”text/javascript”>
<?php if($enable_rokzoom==”true”) :?>
<script language=”javascript” type=”text/javascript” src=”<?php echo $ja_template_path;?>/rokzoom/rokzoom.js”></script>
<script type=”text/javascript”>
window.addEvent(‘load’, function() {
RokZoom.init({
imageDir: ‘templates/<?php echo $ja_template_path;?>/rokzoom/images/’,
resizeFX: {
duration: 700,
transition: Fx.Transitions.Cubic.easeOut,
wait: true
},
opacityFX: {
duration: 500,
wait: false
}
});
});
</script>
<?php endif; ?>

Add This Block of Code to your template.css
————————————————————

/* @group RokFlow */

#rokflow, #rokflow #loader {
overflow: hidden;
position: relative;
width: 800px;
height: 170px;
background: 50% 50% no-repeat url(../images/loader.gif);
}

#rokflow, #rokflow * {
margin:0; padding:0; border:0;
}

#rokflow div {
float: left;
position: relative;
}

#rokflow img {
width: 124px;
height: 194px;
border: 0;
top: 40px;
margin-top: 15px;
}

#rokflow div h3 {
display: block;
position: absolute;
white-space: nowrap;
text-align: center;
font-size: 10px;
font-weight: normal;
}

.moduletable #rokflow h3 {
background: none;
margin: 0;
padding: 0;
line-height: 100%;
height: auto;
}

#rokflow a {
text-decoration: none;
}

#rokflow #loader {
position: absolute;
top: 0; left: 0;
z-index: 1000;
}

/* @end */
———————————————————————————————————————————–
Make a New Module Position in the user2 Position or what i did is made a new module position called Inset…to add a new inset positions.

Go to your Template.css
————————————
go to this section in your template MAIN LAYOUT DIVS

/* MAIN LAYOUT DIVS
——————————————————— */
#ja-wrapper {
}

#ja-headerwrap,
#ja-topslwrap,
#ja-botslwrap,
#ja-mainnavwrap1,
#ja-inset, ——————– ADD THIS LINE TO THAT SECTION
#ja-subnavwrap,
#ja-footerwrap,
#ja-hpwrap {
clear: both;
width: 100%;
}
#ja-header,
#ja-topsl,
#ja-botsl,
#ja-mainnavwrap2,
#ja-inset, ——————– ADD THIS PART ALSO
#ja-mainnav-inner,
#ja-mnshadow,
#ja-subnav,
#ja-slwrap,
#ja-containerwrap,
#ja-containerwrap-c1,
#ja-containerwrap-c2,
#ja-containerwrap-f,
#ja-footer,
#ja-hp {
margin: 0 auto;
width: 750px;
text-align: left;
}

div.ja-w1 {
width: 770px;
margin: 0 auto;
clear: both;
}

.wide #ja-header,
.wide #ja-topsl,
.wide #ja-botsl,
.wide #ja-mainnavwrap2,
.wide #ja-inset, ———————- ADD IT HERE ALSO
.wide #ja-mainnav-inner,
.wide #ja-mnshadow,
.wide #ja-subnav,
.wide #ja-slwrap,
.wide #ja-containerwrap,
.wide #ja-containerwrap-c1,
.wide #ja-containerwrap-c2,
.wide #ja-containerwrap-f,
.wide #ja-footer,
.wide #ja-hp {
margin: 0 auto;
width: 950px;
text-align: left;

/* PRIMARY COLUMN ——————— AT THIS SECTION
——————————————————— */
#ja-content {
float: left;
width: 60%;
}

ADD THIS BLOCK OF CODE FOR THE INSET
#ja-inset div.innerpad-bg {
clear: both;
margin: 0;
height: 150px;
padding: 10px 15px 15px 10px;
display: block;
text-align: center;
}

MAKE A NEW MODULE
———————————
-make the new module and called it Rokflow add it to the new inset position and add this code in your module…

<center>
<script src=”templates/ja_quillaja/scripts/rokflow.js” type=”text/javascript” charset=”utf-8″>
</script>
<script type=”text/javascript” charset=”utf-8″>
window.addEvent(‘load’, function() {
new RokFlow(‘rokflow’);
});
</script>
<div id=”rokflow”>
<div id=”loader”></div>
<div>
<a href=”images/covers/1.png” title=”Pink Floyd”>
<img src=”images/covers/1.png” title=”Pink Floyd” alt=”Pink Floyd” />
</a>
</div>
<div>
<img src=”images/covers/2.png” title=”Bon Jovi” alt=”Bon Jovi” />
</div>
<div>
<a href=”images/covers/3.png” title=”Rihanna”>
<img src=”images/covers/3.png” title=”Rihanna” alt=”Rihanna” />
</a>
</div>
<div>
<a href=”images/covers/4.png” title=”Smashing Pumpkins”>
<img src=”images/covers/4.png” title=”Smashing Pumpkins” alt=”Smashing Pumpkins” />
</a>
</div>
<div>
<a href=”images/covers/5.png” title=”Iron Maiden”>
<img src=”images/covers/5.png” title=”Iron Maiden” alt=”Iron Maiden” />
</a>
</div>
<div>
<a href=”images/covers/6.png” title=”Evan Almighty”>
<img src=”images/covers/6.png” title=”Evan Almighty” alt=”Evan Almighty” />
</a>
</div>
<div>
<a href=”images/covers/7.png” title=”Kelly Clarkson”>
<img src=”images/covers/7.png” title=”Kelly Clarkson” alt=”Kelly Clarkson” />
</a>
</div>
<div>
</center>

NOTES:
—————
IF IT FLOWS WITH YUR EDITOR ON THATS GOOD, IF NOT TURN IT OFF, IT IS SAID THAT FLOW WORKS BETTER WITH THE EDITOR OFF, I HAVE DONE THIS AND THIS IS WHERE AM STUK AT IT WON’T FLOW HERE IS AN EXAMPLE OF WHAT SHOULD HAPEN.

Go to the link below.
——————————
http://www.xtrahype.com/xhype/

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#242971

Change this:

<?php if($enable_rokzoom=="true") :?>
<script language="javascript" type="text/javascript" src="<?php echo $ja_template_path;?>/rokzoom/rokzoom.js"></script>
<script type="text/javascript">
window.addEvent('load', function() {
RokZoom.init({
imageDir: 'templates/<?php echo $ja_template_path;?>/rokzoom/images/',
resizeFX: {
duration: 700,
transition: Fx.Transitions.Cubic.easeOut,
wait: true
},
opacityFX: {
duration: 500,
wait: false
}
});
});
</script>
<?php endif; ?>
Into this:


<script language="javascript" type="text/javascript" src="<?php echo $ja_template_path;?>/rokzoom/rokzoom.js"></script>
<script type="text/javascript">
window.addEvent('load', function() {
RokZoom.init({
imageDir: 'templates/<?php echo $ja_template_path;?>/rokzoom/images/',
resizeFX: {
duration: 700,
transition: Fx.Transitions.Cubic.easeOut,
wait: true
},
opacityFX: {
duration: 500,
wait: false
}
});
});
</script>


[guru2085 Friend guru2085Join date: March 2008Posts: 50Downloads:0Uploads:1 Thanks: 9]

#242973

<em>@Menalto 45509 wrote:</em><blockquote>Change this:

<?php if($enable_rokzoom=="true") :?>
<script language="javascript" type="text/javascript" src="<?php echo $ja_template_path;?>/rokzoom/rokzoom.js"></script>
<script type="text/javascript">
window.addEvent('load', function() {
RokZoom.init({
imageDir: 'templates/<?php echo $ja_template_path;?>/rokzoom/images/',
resizeFX: {
duration: 700,
transition: Fx.Transitions.Cubic.easeOut,
wait: true
},
opacityFX: {
duration: 500,
wait: false
}
});
});
</script>
<?php endif; ?>
Into this:


<script language="javascript" type="text/javascript" src="<?php echo $ja_template_path;?>/rokzoom/rokzoom.js"></script>
<script type="text/javascript">
window.addEvent('load', function() {
RokZoom.init({
imageDir: 'templates/<?php echo $ja_template_path;?>/rokzoom/images/',
resizeFX: {
duration: 700,
transition: Fx.Transitions.Cubic.easeOut,
wait: true
},
opacityFX: {
duration: 500,
wait: false
}
});
});
</script>

</blockquote>

i made that change to the code IT STILL NOT FLOWIN if u want to see my index.php and template.css i can show u

INDEX.PHP
————-<?php
/*————————————————————————
# JA Quillaja – June, 2007
# ————————————————————————
# Copyright (C) 2004-2007 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
# @license – Copyrighted Commercial Software
# Author: J.O.O.M Solutions Co., Ltd
# Websites: http://www.joomlart.com – http://www.joomlancers.com
————————————————————————-*/
defined( ‘_VALID_MOS’ ) or die( ‘Restricted access’ );
$iso = split( ‘=’, _ISO );
/*echo “<?xml version=”1.0″ encoding=”‘. $iso[1] .'”?’ .’>”;*/
global $ja_color_themes, $ja_header_images, $ja_width_default, $ja_color_default, $ja_font_size_default, $ja_tool, $ja_menutype, $ja_template_path, $ja_template_absolute_path, $ja_headerimg, $ja_color, $ja_width, $ja_font_size, $ja_template_name, $ja_header_toggle;

$ja_template_name = ‘ja_quillaja’;

# BEGIN: TEMPLATE CONFIGURATIONS ##########
####################################
#support extra color themes
$ja_color_themes = array(‘default’,’green’,’blue’); // You can add more color array if needed
####################################
# Change the width of the template
$ja_width_default = ‘wide’; // ‘narrow’: 800×600; ‘wide’: 1024×768; ‘auto’: fluid width
# default color
$ja_color_default = ‘blue’; //blank for default, else pick one of in extra color themes $ja_color_themes
#font size default
$ja_font_size_default = 3;
# Enable users option
$ja_tool = 7; // 0: disable all; 1: Screen tool; 2: font tool; 3: screen + font; 4: color tool; 5: screen + color; 6: font + color; 7: all;
# Choose your prefer Menu Type
$ja_menutype = 3; // 1: Split Menu; 2: Son of Suckerfish Dropdown Menu; 3: Transmenu; 4: Dropline menu

# END: TEMPLATE CONFIGURATIONS ##########

# Define the template path ##########
$ja_template_path = $mosConfig_live_site.’/templates/’.$ja_template_name;
$ja_template_absolute_path = $mosConfig_absolute_path.’/templates/’.$ja_template_name;
include ($ja_template_absolute_path.”/ja_templatetools.php”);

$topnav = “”;
$subnav = “”;
if ($ja_menutype == 1) {
require($ja_template_absolute_path.”/ja_splitmenu.php”);
$subnav = $jasplmenu->hasSubMenu (1);
} else if ($ja_menutype == 4) {
require($ja_template_absolute_path.”/ja_scriptdlmenu.php”);
$topnav = $jamenu->menuObj->main;
$subnav = $jamenu->menuObj->sub;
}

# Auto Collapse Divs Functions ##########
$ja_left = mosCountModules( ‘left’ );
$ja_right = mosCountModules( ‘right’ );
if ( $ja_left && $ja_right ) {
//2 columns on the right
$divid = ”;
} elseif ( $ja_left ) {
//One column left
$divid = ‘-c1′;
} elseif ( $ja_right ){
//One column right
$divid=’-c2′;
} else {
//No column in right
$divid = ‘-f’;
}

$msie=’/msies(5.[5-9]|[6].[0-9]*).*(win)/i’;
$supported_browsers = !isset($_SERVER[‘HTTP_USER_AGENT’]) ||
!preg_match($msie,$_SERVER[‘HTTP_USER_AGENT’]) ||
preg_match(‘/opera/i’,$_SERVER[‘HTTP_USER_AGENT’]);

?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>
<?php mosShowHead(); ?>
<meta http-equiv=”Content-Type” content=”text/html; <?php echo _ISO; ?>” />
<meta http-equiv=”Content-Style-Type” content=”text/css” />

<link href=”<?php echo $ja_template_path;?>/css/template_css.css” rel=”stylesheet” type=”text/css” />
<link href=”<?php echo $ja_template_path;?>/css/ja-news.css” rel=”stylesheet” type=”text/css” />

<script language=”javascript” type=”text/javascript” src=”<?php echo $ja_template_path;?>/scripts/ja.script.js”></script>
<script language=”javascript” type=”text/javascript” src=”<?php echo $ja_template_path;?>/scripts/ja.hiddenpanel.js”></script>
<script language=”javascript” type=”text/javascript” src=”<?php echo $ja_template_path;?>/scripts/mootools.bgiframe.js”></script>
<script language=”javascript” type=”text/javascript” src=”<?php echo $ja_template_path;?>/scripts/rokfade.js”></script>
<script language=”javascript” type=”text/javascript” src=”<?php echo $ja_template_path;?>/scripts/mootools-release-1.11.js”></script>
<script language=”javascript” type=”text/javascript” src=”<?php echo $ja_template_path;?>/rokzoom/rokzoom.js”></script>
<script type=”text/javascript”>
window.addEvent(‘load’, function() {
RokZoom.init({
imageDir: ‘templates/<?php echo $ja_template_path;?>/rokzoom/images/’,
resizeFX: {
duration: 700,
transition: Fx.Transitions.Cubic.easeOut,
wait: true
},
opacityFX: {
duration: 500,
wait: false
}
});
});
</script>

<?php genMenuHead(); ?>

<?php
if ( $my->id ) {
initEditor();
}
mosShowHead();

?>

<!–>
<style type=”text/css”>
.clearfix { height: 1%;}
</style>
<!–>

<!–>
<style type=”text/css”>
.clearfix { display: inline-block;}
</style>
<!–>

<script type=”text/javascript”>
/*<!]>*/
</script>

<link href=”<?php echo $ja_template_path;?>/css/colors/<?php echo $ja_color; ?>.css” rel=”stylesheet” type=”text/css” />

</head>

<body id=”bd” class=”<?php echo “$ja_width fs”.$ja_font_size;?>”>

<ul class=”accessibility”>
<li><a href=”<?php echo getCurrentURL();?>#ja-content” title=”Skip to content”>Skip to content</a></li>
<li><a href=”<?php echo getCurrentURL();?>#ja-col1″ title=””>Skip to 1st column</a></li>
<li><a href=”<?php echo getCurrentURL();?>#ja-col2″ title=””>Skip to 2nd column</a></li>
</ul>

<div id=”ja-wrapper”>
<a name=”Top” id=”Top”></a>

<!– BEGIN: MAIN NAVIGATION –>
<div id=”ja-mainnavwrap1″>

<div id=”ja-hpwrap”>
<div id=”ja-hp”>
<?php if (mosCountModules(‘ja-hpanel’)) { ?>
<div class=”ja-hpmodule”>
<?php mosLoadModules(‘ja-hpanel’,-1); ?>
</div>
<?php } ?>
<?php if ($ja_tool) { ?>
<div id=”ja-usertools”>
<?php genToolMenu($ja_tool); ?>
</div><div class=”clr”></div>
<?php } ?>
</div>
</div>

<div id=”ja-mainnavwrap2″ class=”clearfix”>
<div id=”ja-search”>
<?php if ( mosCountModules(‘user4’) ) {
echo mosLoadModules ( ‘user4’,-1 ); }
else {
echo ‘ ‘;
}
?>
</div>

<span id=”ja-hp-switch”>Member Area</span>
</div>

</div>

<!– END: MAIN NAVIGATION –>

<!– BEGIN: HEADER –>
<div id=”ja-headerwrap”>
<div id=”ja-header” class=”clearfix”>

<h1>
<a href=”index.php”>
<?php echo $mosConfig_sitename?>
</a>
</h1>
</div>
</div>
<!– END: HEADER –>

<!– BEGIN: MAIN NAVIGATION –>
<div id=”ja-mainnavwrap”>
<div id=”ja-mainnav-inner” class=”clearfix”>

<div id=”ja-mainnav”>
<?php
switch ($ja_menutype) {
case 1:
//echo $topnav;
$jasplmenu->genMenu (0);
break;
case 2:
echo “<div class=”sfmenu-inner”>”;
include($ja_template_absolute_path.”/ja_cssmenu.php”);
echo “</div>”;
break;
case 3:
echo “<div class=”transmenu-inner”>”;
include($ja_template_absolute_path.”/ja_transmenu.php”);
echo “</div>”;
break;
case 4:
echo $topnav;
break;
}
?>
</div>

</div>
</div>

<?php if (!$subnav) {?>
<div id=”ja-mnshadow-wrap”>
<div id=”ja-mnshadow”>
</div>
</div>
<?php } ?>

<?php if ($subnav) {?>
<div id=”ja-subnavwrap”>
<div id=”ja-subnav” class=”clearfix”>
<?php
if ($ja_menutype == 1) $jasplmenu->genMenu (1);
else echo $subnav;
?>
</div>
</div>
<?php } ?>
<!– END: MAIN NAVIGATION –>

<!– begin inset –>
<div id=”ja-inset”>
<?php mosLoadModules(‘inset’,-1); ?>
</div>
<!– end inset –>

<?php
$topspotlight = array (‘user1’, ‘user2′,’user5′,’user6’);
$topsl = calSpotlight ($topspotlight);
if( $topsl ) {
?>
<!– BEGIN: TOP SPOTLIGHT –>
<div id=”ja-topslwrap”>
<div id=”ja-topsl”><div id=”innerpad” class=”clearfix”>

<?php if( mosCountModules(‘user1’) ) {?>
<div class=”ja-box<?php echo $topsl[‘modules’][‘user1’]; ?>” style=”width: <?php echo $topsl[‘width’]; ?>;”>
<div class=”innerpad1″><div class=”innerpad2″>
<?php mosLoadModules(‘user1’, -2); ?>
</div></div>
</div>
<?php } ?>

<?php if( mosCountModules(‘user2’) ) {?>
<div class=”ja-box<?php echo $topsl[‘modules’][‘user2’]; ?>” style=”width: <?php echo $topsl[‘width’]; ?>;”>
<div class=”innerpad1″><div class=”innerpad2″>
<?php mosLoadModules(‘user2’, -2); ?>
</div></div>
</div>
<?php } ?>

<?php if( mosCountModules(‘user5’) ) {?>
<div class=”ja-box<?php echo $topsl[‘modules’][‘user5’]; ?>” style=”width: <?php echo $topsl[‘width’]; ?>;”>
<div class=”innerpad1″><div class=”innerpad2″>
<?php mosLoadModules(‘user5’, -2); ?>
</div></div>
</div>
<?php } ?>

<?php if( mosCountModules(‘user6’) ) {?>
<div class=”ja-box<?php echo $topsl[‘modules’][‘user6’]; ?>” style=”width: <?php echo $topsl[‘width’]; ?>;”>
<div class=”innerpad1″><div class=”innerpad2″>
<?php mosLoadModules(‘user6’, -2); ?>
</div></div>
</div>
<?php } ?>

</div></div>
</div>
<!– END: TOP SPOTLIGHT –>
<?php } ?>

<div class=”ja-w1″><div class=”ja-w2″><div class=”ja-w3 clearfix”>
<div id=”ja-containerwrap<?php echo $divid ?>”>
<div id=”ja-container” class=”clearfix”>

<!– BEGIN: CONTENT –>
<div id=”ja-content”>
<?php if ( mosCountModules(“ja-news”) ) {?>
<div class=”innerpad-bg”>
<?php } else { ?>
<div class=”innerpad”>
<?php } ?>

<div id=”ja-pathway”>
<strong>You are here:</strong> <?php mosPathway(); ?>
</div>

<div id=”ja-current-content”>
<?php
global $mainframe, $option;
$m_menu = $mainframe->get( “menu” );
$m_params = new mosParameters( $m_menu->params );

$m_intro = $m_params->def( “intro”, 4 );
$m_leading = $m_params->def( “leading”, 1 );
if ( $option != “com_frontpage” || $m_intro || $m_leading) {
?>
<?php mosMainBody(); ?>
<?php } ?>

<?php if ( mosCountModules(“ja-news”) ) { ?>
<div id=”ja-newswrap”>
<?php mosLoadModules ( “ja-news”, -1 ); ?>
</div>
<?php } ?>
</div>

<?php if ( mosCountModules(“banner”) ) { ?>
<div class=”ja-banner”>
<?php mosLoadModules ( “banner”, -1 ); ?>
</div>

<?php } ?>

</div>
</div>
<!– END: CONTENT –>

<?php if ($ja_left || $ja_right) { ?>
<!– BEGIN: COLUMNS –>
<div id=”ja-colwrap”>

<?php if ($ja_left) { ?>
<div id=”ja-col1″>
<?php if ($ja_menutype == 1 && $jasplmenu->hasSubMenu (2)) {
echo ‘<div class=”moduletable” id=”leftspmenu”>’;
echo ‘<h3>’.$jasplmenu->getParentText (2).'</h3>’;
$jasplmenu->genMenu (2);
echo ‘</div>’;
} ?>
<?php echo mosLoadModules ( ‘left’,-2 ); ?>
</div>
<?php } ?>

<?php if ($ja_right) { ?>
<div id=”ja-col2″>
<?php echo mosLoadModules ( ‘right’,-2 ); ?>
</div>
<?php } ?>

</div><br />
<!– END: COLUMNS –>
<?php } ?>

</div>
</div>
</div></div></div>

<?php
$spotlight = array (‘user10’, ‘user11′,’user12′,’user13’);
$botsl = calSpotlight ($spotlight);
if( $botsl ) {
?>
<!– BEGIN: BOTTOM SPOTLIGHT –>
<div id=”ja-botslwrap”>
<div class=”ja-w1″><div class=”ja-w2″>
<div id=”ja-botsl”>
<div class=”ja-botsl-inner clearfix”>

<?php if( mosCountModules(‘user10’) ) {?>
<div class=”ja-box<?php echo $botsl[‘modules’][‘user10’]; ?>” style=”width: <?php echo $botsl[‘width’]; ?>;”>
<?php mosLoadModules(‘user10’, -2); ?>
</div>
<?php } ?>

<?php if( mosCountModules(‘user11’) ) {?>
<div class=”ja-box<?php echo $botsl[‘modules’][‘user11’]; ?>” style=”width: <?php echo $botsl[‘width’]; ?>;”>
<?php mosLoadModules(‘user11’, -2); ?>
</div>
<?php } ?>

<?php if( mosCountModules(‘user12’) ) {?>
<div class=”ja-box<?php echo $botsl[‘modules’][‘user12’]; ?>” style=”width: <?php echo $botsl[‘width’]; ?>;”>
<?php mosLoadModules(‘user12’, -2); ?>
</div>
<?php } ?>

<?php if( mosCountModules(‘user13’) ) {?>
<div class=”ja-box<?php echo $botsl[‘modules’][‘user13’]; ?>” style=”width: <?php echo $botsl[‘width’]; ?>;”>
<?php mosLoadModules(‘user13′, -2); ?>
</div>
<?php } ?>

</div>
</div>
</div></div>
</div>
<!– END: BOTTOM SPOTLIGHT –>
<?php } ?>

<!– BEGIN: FOOTER –>
<div id=”ja-footerwrap”>
<div id=”ja-footer” class=”clearfix”>

<small>
<div align=”center”>
<div class=”moduletable-hilite3 c3 c3″><a href=”index.php” class=”mainlevel-hilite2″>Advertise</a> <span class=”mainlevel-hilite2″>|</span> <a href=”index.php?option=com_jobline&Itemid=89″ class=”mainlevel-hilite2″>Careers</a> <span class=”mainlevel-hilite2″>|</span> <a href=”index.php” class=”mainlevel-hilite2″>Site Map</a> <span class=”mainlevel-hilite2″>|</span> <a href=”index.php?option=com_content&task=view&id=49&Itemid=” class=”mainlevel-hilite2″>About Us</a> <span class=”mainlevel-hilite2″>|</span> <a href=”index.php?option=com_content&task=view&id=48&Itemid=” class=”mainlevel-hilite2″>Disclaimer</a> <span class=”mainlevel-hilite2″>|</span> <a href=”index.php” class=”mainlevel-hilite2″>Site Credits</a> <span class=”mainlevel-hilite2″>|</span> <a href=”index.php?option=com_contact&Itemid=3″ class=”mainlevel-hilite2″>Contact Us</a> <span class=”mainlevel-hilite2″><span class=”mainlevel-hilite2″>|</span> <a href=”index.php?option=com_wrapper&Itemid=66″ class=”mainlevel-hilite2″>Affiliates</a> <span class=”mainlevel-hilite2″> <span class=”mainlevel-hilite2″>|</span> <a href=”index.php?option=com_content&task=view&id=47&Itemid=” class=”mainlevel-hilite2″>Privacy Policy</a> <span class=”mainlevel-hilite2″>| <a href=”index.php” class=”mainlevel-hilite2″>Send Feedback</a> <span class=”mainlevel-hilite2″>|<a href=”index.php?option=com_content&task=view&id=46&Itemid=” class=”mainlevel-hilite2″>Terms & Conditions</a> <span class=”mainlevel-hilite2″><span class=”mainlevel-hilite2″>|<a href=”index.php?option=com_content&task=view&id=45&Itemid=” class=”mainlevel-hilite2″>Company</a> <span class=”mainlevel-hilite2″>|</span></span></span></span></span></div>
</div>
<div align=”center”>
<font color=”#221FFF”>
Template by <a href=”http://www.xtrahype.com” target=”_blank”>Xtra Hype Inc!</a> | <a target=”_blank” href=”http://www.bluehost.com”>Hosted on BlueHost.com</a> | Copyright © 2007 – 2008 <a href=”http://www.www.xtrahype.com” target=”_blank”>Xtra Hype Inc!</a></font>
<div class=”c18″><span class=”footerinc”><a href=”http://www.iwebtool.com/pagerank_checker?domain=http%3A%2F%2Fwww.xtrahype.com/main/” target=”_blank”><img src=’http://www.xtrahype.com/images/button-pagerank.png’ title=”Google Page Rank” alt=”Google Page Rank” width=’80’ height=’15’ border=’0′ /></a> <a href=”https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=donate%40bestofjoomla%2ecom&item_name=Best%20of%20Joomla%21%20Donation&page_style=boj&no_shipping=1&no_note=1&tax=0&currency_code=USD&lc=US&bn=PP%2dDonationsBF&charset=UTF%2d8″ target=”_blank”><img src=’http://www.xtrahype.com/images/button-donate.png’ title=”DONATE Best of Joomla” alt=”DONATE Best of Joomla” width=’80’ height=’15’ border=’0′ /></a> <a href=”http://www.joomla.org” target=”_blank”><img src=’http://www.xtrahype.com/images/button-joomla.png’ title=”Joomla!” alt=”Joomla!” width=’80’ height=’15’ border=’0′ /></a> <a href=”http://validator.w3.org/check/referer” target=”_blank” title=”Our site is valid XHTML 1.0 Transitional”><img src=’http://www.xtrahype.com/images/button-xhtml.png’ title=”Our site is valid XHTML 1.0 Transitional” alt=”Our site is valid XHTML 1.0 Transitional” width=’80’ height=’15’ border=’0′ /></a> <a href=”http://jigsaw.w3.org/css-validator/validator?uri=http://www.xtrahype.com/main” target=”_blank” title=”Our site is valid CSS”><img src=’http://www.xtrahype.com/images/button-css.png’ title=”Our site is valid CSS” alt=”Our site is valid CSS” width=’80’ height=’15’ border=’0′ /></a></span></div></a>

<?php include_once( $ja_template_absolute_path.’/footer.php’ ); ?>
</small>

</div>

</div>
</div>
<!– END: FOOTER –>

</div>

<?php mosLoadModules( ‘debug’, -1 );?>
</body>

</html>

TEMPLATE.CSS
————————-

/*————————————————————————
# JA Quillaja – June, 2007
# ————————————————————————
# Copyright (C) 2004-2007 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
# @license – Copyrighted Commercial Software
# Author: J.O.O.M Solutions Co., Ltd
# Websites: http://www.joomlart.com – http://www.joomlancers.com
————————————————————————-*/

/* COMMON STYLE
——————————————————— */
html, body, form, fieldset {
margin: 0;
padding: 0;
}

body {
background: #FFFFFF;
color: #000000;
font-family: Tahoma, Arial, Verdana, sans-serif;
line-height: 150%;
}

body#bd {
background: #FCF3EE;
color: #333333;
text-align: center;
}

body.contentpane {
margin: 1em 2em;
width: auto; /* Printable Page */
background: #FFFFFF;
color: #000000;
}

body.fs1{
font-size: 9px;
}

body.fs2{
font-size: 10px;
}

body.fs3{
font-size: 11px;
}

body.fs4{
font-size: 12px;
}

body.fs5{
font-size: 13px;
}

body.fs6{
font-size: 14px;
}

/* Normal link */
a {
color: #FF9A48;
text-decoration: none;
border-bottom: 1px solid;
}

a:hover, a:active, a:focus {
color: #FF9A48;
text-decoration: none;
border-bottom: none;
}

/* Title text */
.contentheading, .componentheading, .blog_more strong, h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
letter-spacing: -1px;
}

/* Small text */
small, .small, .smalldark, .mosimage_caption {
font-size: 100%;
color: #999999;
}

/* Heading */
h1 {
font-size: 225%;
}

h2 {
font-size: 200%;
}

h3 {
font-size: 175%;
}

h4 {
font-size: 125%;
text-transform: uppercase;
}

p, pre, blockquote, ul, ol, h1, h2, h3, h4, h5, h6 {
margin: 10px 0;
padding: 0;
}

ul {
list-style: none;
}

ul li {
padding-left: 35px;
line-height: 170%;
background: url(../images/bullet-list.gif) no-repeat 25px 8px;
}

ol li {
margin-left: 35px;
line-height: 170%;
}

th {
padding: 5px;
font-weight: bold;
text-align: left;
}

fieldset {
border: none;
}

fieldset a {
font-weight: bold;
}

hr {
border-bottom: 0;
border-left: 0;
border-right: 0;
border-top: 1px solid #CCCCCC;
height: 1px;
}

a img {
border: none;
}

td, div {
font-size: 100%;
}

/* FORM
——————————————————— */
form {
margin: 0;
padding: 0;
}

form label {
cursor: pointer;
}

input, select, textarea, .inputbox {
padding: 1px;
font-family: Tahoma, Arial, sans-serif;
font-size: 100%;
}

select, textarea, .inputbox {
background: #FFFFFF;
color: #333333;
}

.button, .button:hover {
}

.button:active, .button:focus {
}

.inputbox {
border: 1px solid #999999;
margin-bottom: 1px;
}

.inputbox:hover, .inputbox:focus {
border-color: #333333;
}

/* BONUS TYPOGRAPHY STYLES
————————————————————————-*/
/* Code text */
pre, .code {
margin: 15px 0;
padding: 15px 25px 15px 15px;
background: #F7F7F7;
border-top: 3px solid #CCCCCC;
font: 1em/1.5 monospace;
}

/* Quote */
blockquote {
padding: 15px 40px 15px 60px;
background: url(../images/open_quotes.gif) 20px 10px no-repeat;
font: 12px/1.5 Georgia, Times, serif;
}

p.quote {
margin: 0;
padding: 0;
background: url(../images/close_quotes.gif) bottom right no-repeat;
}

/* Quote hilight */
div.quote-grey {
background: url(../images/q1_std.gif) no-repeat 20px 10px #F7F7F7;
padding : 0;
margin: 0;
border: 1px dotted #999999;
}

div.quote-grey blockquote {
background: url(../images/q2_std.gif) no-repeat right bottom;
margin: 0;
}

div.quote-hilite {
color: #FFFFFF;
background: url(../images/q1_std_hl.gif) no-repeat 10px 10px #FF9A48;
margin-top: 20px;
padding-right : 5px;
padding-bottom: 10px;
}

div.quote-hilite blockquote {
background: url(../images/q2_std_hl.gif) no-repeat right bottom;
margin: 0;
}

/* Dropcap */
.dropcap {
float: left;
padding: 0 5px 0 0;
display: block;
color: #333333;
font: 50px/40px Georgia, Times, serif;
}

.dropcap-hilite {
float: left;
padding: 4px 3px 0 3px;
margin: 0 4px 0 0;
display: block;
color: #FFFFFF;
background: #FF9A48;
font: 50px/40px Georgia, Times, serif;
}

/* Tips, Error, Message, Hightlight*/
.error {
padding: 5px 5px 5px 25px;
background: url(../images/bullet-error.gif) no-repeat center left;
color: #CC0000;
}

.message {
padding: 5px 0 5px 25px;
background: url(../images/bullet-info.gif) no-repeat center left;
color: #006DA3;
}

.tips {
padding: 5px 5px 5px 25px;
background: url(../images/bullet-tips.gif) no-repeat center left;
}

.highlight {
border-bottom: 1px dotted #FF9A48;
padding: 0 1px;
background: #FFF0E4;
font-weight: bold;
}

a.watch-video {
padding: 5px 0 5px 20px;
background: url(../images/bt_play_o.gif) no-repeat left center;
border: none;
text-decoration: none;
}

a.headphone {
padding: 5px 0 5px 25px;
background: url(../images/img_headphones.gif) no-repeat left center;
border: none;
text-decoration: none;
}

/* Note Style */
p.pinnote {
background: url(../images/pin-bg.gif) no-repeat top left #FFF8F2;
padding: 10px 10px 10px 50px;
border: 1px dotted #F2CAB7;
}

p.clipnote {
background: url(../images/clip-bg.gif) no-repeat top left #FFF8F2;
padding: 10px 10px 10px 50px;
border: 1px dotted #F2CAB7;
}

p.newspaper {
background: url(../images/newspaper-bg.gif) no-repeat top left #FFF8F2;
padding: 10px 10px 10px 50px;
border: 1px dotted #F2CAB7;
}

/* Check list */
ul.checklist {
list-style: none;
}

ul.checklist li {
margin-left: 3px;
padding: 0 0 5px 20px;
background: url(../images/checklist-bg.gif) no-repeat 0px 2px;
}

/* Big number list */
.bignumber {
float: left;
margin-right: 8px;
padding: 7px 7px;
display: block;
color: #FFFFFF;
background: url(../images/ol-bg.gif) no-repeat top left;
font: normal 20px/normal Arial, sans-serif;
}

.blocknumber {
clear: both;
margin: 5px 0;
padding: 10px 15px;
position: relative;
}

/* Small number list */
ol.smallnumber {
margin: 0;
padding: 0;
list-style: none;
}

ol.smallnumber li {
margin: 10px 0 0 0;
padding: 2px 0 0 30px;
line-height: normal;
}

ol.smallnumber li.one {
background: url(../images/li-01.gif) no-repeat 0px 3px;
}

ol.smallnumber li.two {
background: url(../images/li-02.gif) no-repeat 0px 3px;
}

ol.smallnumber li.three {
background: url(../images/li-03.gif) no-repeat 0px 3px;
}

ol.smallnumber li.four {
background: url(../images/li-04.gif) no-repeat 0px 3px;
}

ol.smallnumber li.five {
background: url(../images/li-05.gif) no-repeat 0px 3px;
}

ol.smallnumber li.six {
background: url(../images/li-06.gif) no-repeat 0px 3px;
}

ol.smallnumber li.seven {
background: url(../images/li-07.gif) no-repeat 0px 3px;
}

ol.smallnumber li.eight {
background: url(../images/li-08.gif) no-repeat 0px 3px;
}

ol.smallnumber li.nine {
background: url(../images/li-09.gif) no-repeat 0px 3px;
}

ol.smallnumber li.ten {
background: url(../images/li-10.gif) no-repeat 0px 3px;
}

/* Talking box. Thinking box. */
div.bubble1, div.bubble2, div.bubble3, div.bubble4 {
margin: 15px 0;
}

div.bubble1 div {
margin: 0;
width: 100%;
background: url(../images/bub1-br-bg.gif) no-repeat bottom right;
}

div.bubble1 div div {
background: url(../images/bub1-bl-bg.gif) no-repeat bottom left;
}

div.bubble1 div div div {
background: url(../images/bub1-tr-bg.gif) no-repeat top right;
}

div.bubble1 div div div div {
background: url(../images/bub1-tl-bg.gif) no-repeat top left;
}

div.bubble1 div div div div div {
margin: 0;
padding: 15px 15px 30px 15px;
width: auto;
}

div.bubble2 div {
margin: 0;
width: 100%;
background: url(../images/bub2-br-bg.gif) no-repeat bottom right;
}

div.bubble2 div div {
background: url(../images/bub2-bl-bg.gif) no-repeat bottom left;
}

div.bubble2 div div div {
background: url(../images/bub2-tr-bg.gif) no-repeat top right;
}

div.bubble2 div div div div {
background: url(../images/bub2-tl-bg.gif) no-repeat top left;
}

div.bubble2 div div div div div {
margin: 0;
padding: 15px 15px 35px 15px;
width: auto;
}

div.bubble3 div {
margin: 0;
width: 100%;
background: url(../images/bub3-br-bg.gif) no-repeat bottom right;
}

div.bubble3 div div {
background: url(../images/bub3-bl-bg.gif) no-repeat bottom left;
}

div.bubble3 div div div {
background: url(../images/bub3-tr-bg.gif) no-repeat top right;
}

div.bubble3 div div div div {
background: url(../images/bub3-tl-bg.gif) no-repeat top left;
}

div.bubble3 div div div div div {
margin: 0;
padding: 15px 15px 50px 15px;
width: auto;
}

div.bubble4 div {
margin: 0;
width: 100%;
background: url(../images/bub4-br-bg.gif) no-repeat bottom right;
}

div.bubble4 div div {
background: url(../images/bub4-bl-bg.gif) no-repeat bottom left;
}

div.bubble4 div div div {
background: url(../images/bub4-tr-bg.gif) no-repeat top right;
}

div.bubble4 div div div div {
background: url(../images/bub4-tl-bg.gif) no-repeat top left;
}

div.bubble4 div div div div div {
margin: 0;
padding: 15px 15px 55px 15px;
width: auto;
}

/* Caption Box */
.caption {
border: 1px solid #CCCCCC;
padding: 15px 10px 10px 10px;
margin: 20px 0 19px 0;
position: relative;
line-height: normal;
}

.caption span.title {
position: absolute;
top: -7px;
left: 10px;
margin: 0 0 0 -2px;
padding: 0 2px;
line-height: 14px;
background: #FFFFFF;
color: #999999;
}

/* Box style */
.box-grey,
.box-hilite {
border: 1px solid #CCCCCC;
background-color: #F7F7F7;
margin: 20px 0 0 0;
padding: 10px;
}

.box-hilite {
border: 1px dotted #F2CAB7;
background: #FFF8F2;
}

.comment, .comment:hover, .comment:active {
background: url(../images/comment-icon.gif) no-repeat top left;
margin: 0;
padding: 0 0 0 25px;
border-bottom: none;
}

.rss, .rss:hover, .rss:active {
background: url(../images/rss.gif) no-repeat top left;
margin: 0;
padding: 0 13px 3px;
border-bottom: none;
}

img.border {
padding: 1px;
border: 1px solid #CCCCCC;
margin: 5px 0 2px 2px;
}

/* MODULE
——————————————————— */
div.moduletable-hilite2 h3,
div.moduletable h3 {
margin: 0 0 10px;
padding: 0;
color: #333333;
font-size: 130%;
letter-spacing: normal;
text-transform: uppercase;
}

div.moduletable-hilite2,
div.moduletable {
margin: 0;
padding: 5px 1px 10px;
}

#ja-col1 div.moduletable h3 {
margin: 0 -10px 10px -12px;
padding: 5px 0 5px 10px;
background: #F7F7F7;
}

div.moduletable-hilite2 h3,
#ja-col2 div.moduletable h3 {
background: url(../images/col2-h3-bg1.gif) no-repeat bottom right #F0F0F0;
padding: 5px 0 5px 5px;
margin: 0 -5px 10px;
border: 1px solid #E8E8E8;
}

div.moduletable-hilite2 h3 {
padding-left: 10px;
}

#ja-col1 div.moduletable {
padding-bottom: 10px;
margin: 0 10px;
color: #333333;
}

div.moduletable-hilite2,
#ja-col2 div.moduletable {
padding: 0 10px 10px;
}

/* Hilite module */
div.moduletable-hilite1 h3 {
margin: 0;
padding: 0;
color: #FF9A48;
font-size: 130%;
text-transform: uppercase;
}

div.moduletable-hilite1 {
background: #000000;
padding: 5px 12px 10px;
}

div.moduletable-hilite2 h3 {
margin: 30px -10px 0 -12px;
background: #000000;
color: #FF9A48;
border-bottom: 5px solid #FF9A48;
}

/* JOOMLA STYLE
——————————————————— */
.article_seperator {
display: block;
background: url(../images/sep.gif) repeat-x center;
height: 20px;
}

table.blog .article_seperator {
}

#ja-col1 .article_seperator,
#ja-col2 .article_seperator,
#ja-topsl .article_seperator,
#ja-botsl .article_seperator {
display: none;
}

table.contentpane {
border: none;
width: 100%;
border-collapse: collapse;
}

table.contentpaneopen {
border: none;
border-collapse: collapse;
}

table.contenttoc {
margin: 0 0 10px 10px;
padding: 0 0 5px;
width: 35%;
border: 1px solid #CCCCCC;
}

table.contenttoc a {
font-weight: bold;
}

table.contenttoc td {
padding: 5px 5px 2px 20px;
background: url(../images/bullet-list.gif) no-repeat 10px 12px;
}

table.contenttoc th {
text-indent: 5px;
border-bottom: 1px solid #CCCCCC;
background: #F7F7F7;
text-transform: uppercase;
}

table.poll {
padding: 0;
width: 100%;
border-collapse: collapse;
}

table.pollstableborder {
border: none;
padding: 0;
width: 100%;
text-align: left;
}

table.pollstableborder img {
vertical-align: baseline;
}

table.pollstableborder td {
padding: 2px !important;
}

table.pollstableborder tr.sectiontableentry1 td {
border: none;
background: #EFEFEF;
}

table.pollstableborder tr.sectiontableentry2 td {
border: none;
}

table.searchintro {
padding: 10px 0;
width: 100%;
}

table.searchintro td {
padding: 5px !important;
}

table.adminform {
width: 400px!important; /*Control the Frontend Editor area width*/
}

.adminform .inputbox {
}

.blog_more {
margin: 15px 0;
}

.blog_more strong {
margin: 0 0 5px;
display: block;
font-size: 150%;
}

.blog_more ul {
margin: 0;
padding: 0;
}

.blog_more ul li {
padding-left: 13px;
background: url(../images/bullet-list.gif) no-repeat 2px 8px;
margin: 0;
}

td.buttonheading {
padding: 0 0 0 5px!important;
text-align: center;
}

td.buttonheading a {
border: none;
}

.category {
font-weight: bold;
text-transform: uppercase;
}

.clr {
clear: both;
}

.componentheading {
margin-bottom: 15px;
padding-bottom: 5px;
background: url(../images/sep.gif) repeat-x bottom;
color: #333333;
font-size: 200%;
font-weight: bold;
line-height: normal;
text-transform: uppercase;
}

.contentdescription {
padding-bottom: 30px;
}

table.blog .contentheading {
font-size: 150%;
font-weight: bold;
line-height: normal;
}

.contentheading {
font-size: 200%;
font-weight: bold;
line-height: normal;
color: #FF9A48;
}

a.contentpagetitle {
border-bottom: none;
}

a.contentpagetitle:hover,
a.contentpagetitle:active,
a.contentpagetitle:focus {
border-bottom: none;
}

a.readon {
border-bottom: none;
font-weight: bold;
}

a.readon:hover, a.readon:active, a.readon:focus {
border-bottom: none;
}

table.contentpaneopen td, table.contentpane td {
}

table.contentpaneopen, table.contentpane, table.blog {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}

.createdate {
margin: 5px 0 10px;
color: #999999;
}

.modifydate {
color: #999999;
height: 15px;
}

.moduletable {
padding: 0;
}

.mosimage {
margin: 15px 10px 10px 0!important;
margin: 15px 5px 10px 0;
padding: 0;
}

.mosimage img {
}

.mosimage_caption {
margin-top: 5px;
padding: 1px 2px;
color: #999999;
}

.pagenav, .pagenav_prev, .pagenav_next, .pagenavbar {
padding: 0 2px;
}

a.pagenav, .pagenav_prev a, .pagenav_next a, .pagenavbar a {
}

.pagenavbar {
}

.pagenavcounter {
padding: 8px 14px 0 14px;
background: url(../images/pages.gif) no-repeat 0 11px;
}

.sectiontableheader {
padding: 5px;
background: #333333;
color: #FFFFFF;
font-weight: bold;
}

tr.sectiontableentry1 td {
padding: 5px 5px;
border-bottom: 1px solid #DDDDDD;
background: #FFFFFF;
}

tr.sectiontableentry2 td {
padding: 5px 5px;
border-bottom: 1px solid #DDDDDD;
background: #EFEFEF;
}

tr.sectiontableentry1:hover td,
tr.sectiontableentry2:hover td {
background: #FFF0E4;
}

.small {
}

.smalldark {
text-align: left;
}

div.syndicate div {
text-align: center;
}

.pollstableborder tr.sectiontableentry1 td,
.pollstableborder tr.sectiontableentry2 td {
background: none;
}

/* MAIN LAYOUT DIVS
——————————————————— */
#ja-wrapper {
}

#ja-headerwrap,
#ja-topslwrap,
#ja-botslwrap,
#ja-mainnavwrap1,
#ja-inset,
#ja-subnavwrap,
#ja-footerwrap,
#ja-hpwrap {
clear: both;
width: 100%;
}

#ja-header,
#ja-topsl,
#ja-botsl,
#ja-mainnavwrap2,
#ja-inset,
#ja-mainnav-inner,
#ja-mnshadow,
#ja-subnav,
#ja-slwrap,
#ja-containerwrap,
#ja-containerwrap-c1,
#ja-containerwrap-c2,
#ja-containerwrap-f,
#ja-footer,
#ja-hp {
margin: 0 auto;
width: 750px;
text-align: left;
}

div.ja-w1 {
width: 770px;
margin: 0 auto;
clear: both;
}

.wide #ja-header,
.wide #ja-topsl,
.wide #ja-botsl,
.wide #ja-mainnavwrap2,
.wide #ja-inset,
.wide #ja-mainnav-inner,
.wide #ja-mnshadow,
.wide #ja-subnav,
.wide #ja-slwrap,
.wide #ja-containerwrap,
.wide #ja-containerwrap-c1,
.wide #ja-containerwrap-c2,
.wide #ja-containerwrap-f,
.wide #ja-footer,
.wide #ja-hp {
margin: 0 auto;
width: 950px;
text-align: left;
}

.wide div.ja-w1 {
width: 970px;
margin: 0 auto;
}
/* PRIMARY COLUMN
——————————————————— */
#ja-content {
float: left;
width: 60%;
}

#ja-inset div.innerpad-bg {
clear: both;
margin: 0;
height: 150px;
padding: 10px 15px 15px 10px;
display: block;
text-align: center;
}

#ja-content div.innerpad {
clear: both;
margin: 0;
padding: 20px 15px 15px 10px;
display: block;
height: 400px;
}

#ja-content div.innerpad-bg {
clear: both;
margin: 0;
padding: 10px 15px 15px 10px;
display: block;
height: 400px;
}

html>body #ja-content div.innerpad-bg,
html>body #ja-content div.innerpad {
height: auto;
min-height: 400px;
}

/* SECONDARY COLUMNS
——————————————————— */
#ja-colwrap {
float: right;
width: 40%;
}

#ja-col1 {
float: left;
width: 50%;
color: #FFFFFF;
overflow: hidden;
padding-bottom: 10px;
}

#ja-col2 {
float: right;
width: 49.9%;
overflow: hidden;
padding-bottom: 10px;
background: url(../images/col2-bg.gif) no-repeat top left;
}

#ja-col1 table, #ja-col2 table {
border-collapse: collapse;
border-spacing: 0;
}

#ja-col1 ul, #ja-col2 ul {
margin: 0;
padding: 0;
}

#ja-col1 ul li, #ja-col2 ul li {
padding-left: 13px;
background: url(../images/bullet-list.gif) no-repeat 2px 8px;
}

/* COLLAPSIBLE LAYOUT
——————————————————— */
div.ja-w1 {
padding: 11px 0;
background: url(../images/cwrap-bg.gif) no-repeat bottom center;
}

.wide div.ja-w1 {
padding: 11px 0;
background: url(../images/cwrap-wide-bg.gif) no-repeat bottom center;
}

div.ja-w2 {
background: url(../images/cwrap-right-bg.gif) repeat-y top right;
}

div.ja-w3 {
background: url(../images/cwrap-left-bg.gif) repeat-y top left;
}

#ja-containerwrap {
background: url(../images/mainwrap-bg1.gif) repeat-y 60% 0;
}

#ja-container {
background: url(../images/mainwrap-bg2.gif) repeat-y 80% 0;
}

#ja-containerwrap,
#ja-containerwrap-c1,
#ja-containerwrap-c2,
#ja-containerwrap-f {
border: 1px solid #999999;
}

/* full */
#ja-containerwrap-f, #ja-containerwrap-f #ja-container {
background: #FFFFFF;
}

#ja-containerwrap-f #ja-content {
width: 100%;
}

/* content + col1 */
#ja-containerwrap-c1 {
background: url(../images/mainwrap-bg3.gif) repeat-y 80% 0;
}

#ja-containerwrap-c1 #ja-container,
#ja-containerwrap-c2 #ja-container {
background: none;
}

#ja-containerwrap-c1 #ja-content,
#ja-containerwrap-c2 #ja-content {
width: 80%;
}

#ja-containerwrap-c1 #ja-colwrap,
#ja-containerwrap-c2 #ja-colwrap {
width: 20%;
}

#ja-containerwrap-c1 #ja-col1,
#ja-containerwrap-c1 #ja-col2,
#ja-containerwrap-c2 #ja-col1,
#ja-containerwrap-c2 #ja-col2 {
width: 100%;
}

/* content + col2 */
#ja-containerwrap-c2 {
background: url(../images/mainwrap-bg2.gif) repeat-y 80% 0;
}

/* HEADER
——————————————————— */
#ja-headerwrap {
background: url(../images/header-bg.gif) repeat-x center bottom #000000;
}

#ja-header {
padding: 15px 0;
line-height: normal;
text-align: left;
position: relative;
height: 117px;
background: url(../images/header-narrow-bg.jpg) no-repeat left bottom #000000;
}

.wide #ja-header {
background: url(../images/header-bg.jpg) no-repeat left bottom #000000;
}

#ja-header h1 {
position: absolute;
margin: 0;
padding: 0;
top: 50px;
left: 40px;
float: left;
font-size: 2.5em;
text-indent: -1000px;
}

#ja-header h1 a {
width: 250px;
height: 60px;
display: block;
border: none;
}

#ja-header h1 img {
float: left;
}

#ja-header a {
}

/* MAIN NAVIGATION
——————————————————— */
#ja-mainnavwrap1 {
background: #000000;
font-family: Tahoma, Arial, sans-serif;
border-bottom: 1px solid #323232;
}

#ja-mainnavwrap2 {
padding: 7px 10px 7px 0;
background: url(../images/ma-bg.gif) no-repeat top right;
}

#ja-mainnavwrap {
background: url(../images/mainnav-wrap-bg1.gif) repeat-x top left;
}

#ja-mainnav-inner {
padding-left: 3px;
background: url(../images/mainnav-left-bg.gif) no-repeat top left;
}

#ja-mainnav {
float: left;
background: url(../images/mainnav-right-bg.gif) no-repeat top right;
padding: 6px 0 7px 0;
width: 100%;
}

#ja-mainnavwrap1 a,
#ja-mainnavwrap1 a:hover,
#ja-mainnavwrap1 a:active,
#ja-mainnavwrap1 a:focus {
border-bottom: none;
}

#ja-mainnav ul {
margin: 0;
padding: 0;
list-style: none;
}

#ja-mnshadow-wrap {
background-color: #F7EAE0;
}

#ja-mnshadow {
margin: 0 auto;
height: 10px;
background: url(../images/mn-sd-bg.gif) repeat-x top left #F7EAE0;
}

#ja-subnavwrap {
background: #F7EAE0;
padding-bottom: 10px;
}

#ja-subnav {
background: url(../images/subnav-bg.gif) no-repeat top center;
padding-left: 20px;
}

.wide #ja-subnav {
background: url(../images/subnav-wide-bg.gif) no-repeat top center;
padding-left: 20px;
}

#ja-search {
float: right;
}

#ja-search div.search {
margin: 0 0 5px 5px;
}

#ja-search div.search .inputbox {
width: 150px;
border: 1px solid #EFEFEF;
padding-left: 4px;
background: url(../images/icon-search.gif) no-repeat 95% 50% #EFEFEF;
margin-bottom: 0;
}

/* Default Joomla! Menu */
a.mainlevel {
margin: 0;
padding: 3px 5px 3px 14px;
width: 99.9%;
border: none;
display: block;
color: #333333;
background: url(../images/bullet-list.gif) no-repeat 3px 10px;
}

a.mainlevel:hover,
a.mainlevel:active,
a.mainlevel:focus {
border: none;
color: #FF9A48;
}

a.mainlevel#active_menu {
color: #FF9A48;
}

a.sublevel {
padding: 3px 3px 3px 14px;
border-bottom: none;
display: block;
background: url(../images/sublevel-bg.gif) no-repeat top left;
}

a.sublevel:hover,
a.sublevel:active,
a.sublevel:focus {
border-bottom: none;
}

#active_menu {
color: #000000;
font-weight: bold;
}

/* SPOTLIGHT
——————————————————— */
/* Spotlight Box Style */
.ja-box-left, .ja-box-center, .ja-box-right {
float: left;
overflow: hidden;
}

.ja-box-full {
float: none;
overflow: hidden;
}

.ja-box-left div.moduletable {
padding: 0 15px 0 0;
}

.ja-box-right div.moduletable {
padding: 0 0 0 15px;
}

.ja-box-center div.moduletable {
padding: 0 15px;
}

/* Top Spotlight */
#ja-topslwrap {
border-bottom: 1px solid #E3D1C3;
padding: 0;
background: #F7EAE0;
}

#ja-topsl {
}

#ja-topsl div.moduletable {
padding: 10px 10px 15px;
background: none;
}

#ja-topsl div.ja-box-left,
#ja-topsl div.ja-box-center {
}

#ja-topsl h3 {
margin: 0 0 5px;
padding: 0;
color: #FF9A48;
}

#ja-topsl div#innerpad {
padding: 0 1px;
}
#ja-topsl div.ja-box-left div.innerpad1,
#ja-topsl div.ja-box-center div.innerpad1,
#ja-topsl div.ja-box-right div.innerpad1 {
padding-bottom: 10px;
background: url(../images/topsl-sd-bg.gif) repeat-x bottom left;
}

#ja-topsl div.ja-box-center div.innerpad1 {
margin: 0 0 0 5px;
}

#ja-topsl div.ja-box-right div.innerpad1 {
margin: 0 0 0 5px;
}

#ja-topsl div.innerpad2 {
color: #FFFFFF;
border: 1px solid #999999;
background: #000000;
}

/* Bottom Spotlight */
#ja-botslwrap {
background: #F7EAE0;
border-top: 1px solid #E3D1C3;
}

#ja-botslwrap div.ja-w1 {
padding: 8px 0;
background: url(../images/botsl-bg.gif) no-repeat bottom center;
}

.wide #ja-botslwrap div.ja-w1 {
padding: 8px 0;
background: url(../images/botsl-wide-bg.gif) no-repeat bottom center;
}

#ja-botslwrap div.ja-w2 {
background: url(../images/botsl-right-bg.gif) repeat-y top right;
}

#ja-botsl {
border: 1px solid #999999;
background: #FFFFFF;
padding: 10px 0;
}

#ja-botsl div.moduletable {
padding: 0 10px;
background: none;
}

#ja-botsl div.ja-box-left,
#ja-botsl div.ja-box-center {
background: url(../images/h-sep.gif) repeat-y top right;
}

#ja-botsl h3 {
margin: 0 0 10px;
padding: 0;
}

#ja-botsl div.ja-botsl-inner {
margin: 0;
padding: 0 1px;
}

/* Common Styles for both Spotlight Area */
#ja-topsl ul,
#ja-botsl ul {
margin: 0;
padding: 0;
}

#ja-topsl li,
#ja-botsl li {
padding-left: 12px;
margin: 0;
background: url(../images/bullet-list.gif) no-repeat 2px 8px;
}

#ja-topsl td,
#ja-botsl td {
padding: 0;
}

#ja-botsl .article_seperator,
#ja-topsl .article_seperator {
display: none;
}

#ja-botsl table,
#ja-topsl table {
border-collapse: collapse;
border-spacing: 0;
}

/* PATHWAY
———————————————————*/
#ja-pathway {
margin: -10px 0 7px 0;
display: block;
line-height: normal;
font-size: 11px;
text-indent:-10000px; add this line
}

#ja-pathway img {
margin: 0 5px 1px;
}

#ja-pathway strong {
margin-right: 5px;
}

#ja-pathway a {
font-weight: bold;
}

/* FOOTER
——————————————————— */
#ja-footerwrap {
border-top: 1px solid #E3D1C3;
background: #FFFFFF;
}

#ja-footer {
clear: both;
padding: 10px 0;
color: #999999;
text-align: left;
overflow: hidden;
position: relative;
}

#ja-footer a {
color: #999999;
font-weight: bold;
}

#ja-footer a:hover,
#ja-footer a:active,
#ja-footer a:focus {
color: #333333;
font-weight: bold;
}

#ja-cert {
position: absolute;
right: 0;
top: 18px;
}

#ja-cert a {
padding-left: 2px;
border-bottom: none;
}

/* MISCELLANOUS
———————————————————– */
ul.accessibility {
position: absolute;
top: -100%;
}

#ja-hp-switch {
float: right;
color: #CCCCCC;
display: none;
font-weight: bold;
cursor: pointer;
padding: 0 5px;
}

.ja-hp-active {
color: #FFFFFF !important;
background: #FF9A48;
border-bottom: 1px solid #000000;
}

#ja-hpwrap {
background: #EFEFEF;
font-size: 11px;
}

#ja-hp {
line-height: normal;
}

div.ja-hpmodule {
float: right;
padding: 3px 0 2px;
}

html>body div.ja-hpmodule {
float: right;
padding: 5px 0 5px;
}

div.ja-hpmodule form {
float: left;
}

div.ja-hpmodule form label {
float: left;
padding: 0 5px;
}

div.ja-hpmodule form input.button {
padding: 0px 3px;
background: #333333;
border: 1px solid #333333;
color: #CCCCCC;
font-size: 11px !important;
}

div.ja-hpmodule form #mod_login_username,
div.ja-hpmodule form #mod_login_password {
background: #F7F7F7;
border: 1px solid #CCCCCC;
width: 70px;
margin-bottom: 0;
}

div.ja-hpmodule form #mod_login_remember {
margin-bottom: 0;
}

div.ja-hpmodule form a {
padding-left: 5px;
border-left: 1px solid #CCCCCC;
}

/* User Tools */
#ja-usertools {
padding: 7px 0 0;
font-size: 11px;
float: left;
}

#ja-usertools ul {
margin: 0 15px 0 0;
padding: 0;
float: left;
}

#ja-usertools ul li {
margin: 0;
padding: 0;
list-style: none;
background: none;
display: inline;
}

#ja-usertools img {
padding: 0 3px 0 0;
}

div.innerpad {
padding: 0 10px;
}

.ja-banner {
margin-top: 10px;
padding: 10px 0;
text-align: center;
background: url(../images/sep.gif) repeat-x top;
}

.ja-banner a, .ja-banner a:hover, .ja-banner a:active, .ja-banner a:focus {
border-bottom: none;
}

.ja-content-module {
margin-top: 15px;
padding: 10px 0;
text-align: center;
background: url(../images/sep.gif) repeat-x top;
}

div.back_button a,
div.back_button a:hover,
div.back_button a:active,
div.back_button a:focus {
border-bottom: none;
float: left;
margin: 10px 0;
display: block;
font-weight: bold;
text-transform: uppercase;
}

#mod_login_password, #mod_login_username {
width: 90%;
}

#mod_login_remember {
border: none;
background: none;
}

/* Clearfix */
.clearfix:after {
clear: both;
display: block;
content: “.”;
height: 0;
visibility: hidden;
}

* html > body .clearfix {
width: 100%;
display: block;
}

* html .clearfix {
height: 1%;
}

/* Firefox Scrollbar Hack – Do not remove */
html {
margin-bottom: 1px;
height: 100%!important;
height: auto;
}

/* JA Newsflash */
div.nftitle {
font-size: 150%;
font-weight: bold;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
}

div.nftitle a:link {
text-decoration: none;
border: none;
}

div.nfimages {
text-align: center;
}

div.nfcontent {
margin: 0;
padding-right: 20px;
}

/* @group RokFlow */

#rokflow, #rokflow #loader {
overflow: hidden;
position: relative;
width: 800px;
height: 170px;
background: 50% 50% no-repeat url(../images/loader.gif);
}

#rokflow, #rokflow * {
margin:0; padding:0; border:0;
}

#rokflow div {
float: left;
position: relative;
}

#rokflow img {
width: 124px;
height: 194px;
border: 0;
top: 40px;
margin-top: 15px;
}

#rokflow div h3 {
display: block;
position: absolute;
white-space: nowrap;
text-align: center;
font-size: 10px;
font-weight: normal;
}

.moduletable #rokflow h3 {
background: none;
margin: 0;
padding: 0;
line-height: 100%;
height: auto;
}

#rokflow a {
text-decoration: none;
}

#rokflow #loader {
position: absolute;
top: 0; left: 0;
z-index: 1000;
}

/* @end */

/* @group RokSlide */

#rokslide-wrapper .tab-pane .padding {
padding: 10px;
}

#rokslide-wrapper {
background: #121212 url(../images/bottom-bg.png) 0 0 repeat-x;
}

#rokslide-toolbar li.active {
color: #fff;
}

#rokslide-toolbar li.current {
background: url(../images/tab-active-r.png) 100% 0 no-repeat;
color: #ccc;
}

#rokslide-toolbar li.current span {
background: url(../images/tab-active-l.png) 0 0 no-repeat;
}

#rokslide-toolbar li {
background: url(../images/tab-r.png) 100% 0 no-repeat;
color: #999;
}

#rokslide-toolbar li span {
background: url(../images/tab-l.png) 0 0 no-repeat;
}

div#frame {
text-align: left;
}

div#frame div.button#left {
background: url(../images/tabs-prev.png) 0 0 no-repeat;
}

div#frame div.button#right {
background: url(../images/tabs-next.png) 0 0 no-repeat;
}

#frame div.module {
float: left;
}

#frame .module div {
padding-right: 10px;
}

#frame .module div div {
padding: 0;
}

#frame .mmpr-1 .module {
width: 100%;
}

#frame .mmpr-2 .module {
width: 50%;
}

#frame .mmpr-3 .module {
width: 33%;
}

#frame .mmpr-4 .module {
width: 25%;
}

#frame .mmpr-5 .module {
width: 20%;
}

/* @end */

[Author]

Posts