Προς το περιεχόμενο

Αλλαγή width σε side column απο joomla template

A7X.

Από τον A7X.
στο Web Design - Development

Προτεινόμενες αναρτήσεις

A7X. Veteran

A7X.

Δημοσ.
Δημοσ.

Στήνω ένα site σε joomla και δυστυχώς το μόνο template που είναι Free και με ικανοποιεί έχει 3 columns. Ένα μεγαλύτερο κεντρικό και δύο πλάγια τα οποία έχουν μικρότερο πλάτος απο ότι θα ήθελα. Βασικά το site στην τωρινή του μορφή είναι αυτό:

 

http://mmasitetest.cloudaccess.net/

 

και θέλω να επέμβω στο HTML ή το CSS του template να μεγαλώσω το πλάτος του δεξιού column. α γίνει δηλαδή πιο κοντά σε αυτά τα site:

http://sports.yahoo.com/

http://www.mmafighting.com/

 

όταν πατάω edit CSS το template μου βγάζει τις εξής επιλογές:

 

template.css

typo.css

ie-rtl.css

ie8-rtl.css

ie.css

ie7minus.css

print.css

addons.css

template_rtl.css

layout.css

 

Διαλέγω το πρώτο και ο κώδικας είναι αυτός:

 

>/*
#------------------------------------------------------------------------
 CA BASE for Joomla 1.5
#------------------------------------------------------------------------
#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
#------------------------------------------------------------------------
*/


/* COMMON STYLE
--------------------------------------------------------- */
body {
background: #fff;
color: #000;
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
line-height: 1.5;
}

body#bd { background: url(../images/background.jpg) center top repeat-x #efefef; color: #333; }

body.fs1 { font-size: 10px; }
body.fs2 { font-size: 11px; }
body.fs3 { font-size: 12px; }
body.fs4 { font-size: 13px; }
body.fs5 { font-size: 14px; }
body.fs6 { font-size: 15px; }

/* Normal links ---*/
a { color: #069; text-decoration: underline; }

a:hover, a:active, a:focus { color: #333; text-decoration: none; }

/* Readon links ---*/
a.readon {
background: url(../images/button.png) repeat-x top #30abe8;
border: 1px solid #40b1ea;
color: #fff;
font-weight: bold;
padding: 4px 5px;
cursor: pointer;
text-decoration: none;
text-shadow: 0px 1px 0px #3296c8;
}

a.readon:hover, a.readon:active, a.readon:focus { 
color: #fff;
border: 1px solid #000;
}

/* Content spacing ---*/
.column p, .column pre, .column blockquote,
.column h1, .column h2, .column h3, .column h4, .column h5, .column h6,
.column ol, .column ul { margin: 5px 0; padding: 0; }

/* Headings & Titles ---*/
h1 { font-size: 180%; }
h2 { font-size: 150%; }
h3 { font-size: 125%; }
h4 { font-size: 100%; text-transform: UPPERCASE; }
h5 { font-size: 100%; }

.contentheading, .componentheading, h1, h2, h3, h4, h5 {
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
font-weight: bold;
line-height: 1.2;
}

h1.componentheading, .componentheading { margin: 0; padding: 0 0 7px; }

.componentheading {
font-size: 180%;
}

h2.contentheading, .contentheading { margin: 0; padding: 0 0 7px; }

.contentheading { font-size: 200%; }

.blog .contentheading { font-size: 125%; }

a.contentpagetitle,
a.contentpagetitle:hover,
a.contentpagetitle:active,
a.contentpagetitle:focus { text-decoration: none; }

.category { font-size: 110%; font-weight: bold; }

/* Small text ---*/
small, .small, .smalldark, .createby, .createdate, .modifydate, .img_caption, .contenttoc,
p.site-slogan, a.readon, .ja-navhelper, #ja-footer { font-size: 92%; }

small, .small { color: #999; }

.smalldark { text-align: left; }

/* List ---*/
.column ul li {
background: url(../images/bullet.gif) no-repeat 20px 7px;
margin-bottom: 5px;
padding-left: 30px;
}

.column ol li { line-height: 180%; margin-left: 30px; }

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

td { font-size: 100%; padding: 5px; }

fieldset { border: none; padding: 10px 5px; }

fieldset a { font-weight: bold; }

fieldset.input { padding: 0; }

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

/* FORM
--------------------------------------------------------- */
form label { cursor: pointer; }

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

.inputbox { background: #fff; border: 1px solid #ccc; }

.inputbox:hover, .inputbox:focus { background: #FFFFCC; }

.button {
background: url(../images/button.png) repeat-x top #30abe8;
border: 1px solid #40b1ea;
color: #fff;
font-weight: bold;
padding: 4px 5px;
cursor: pointer;
text-decoration: none;
text-shadow: 0px 1px 0px #3296c8;
font-size: 92%;
}

.button:hover, .button:focus {
border: 1px solid #000;
color: #fff;
}

.radio { margin: 0 5px; }

/* Login ---*/
.login_form fieldset { padding: 15px 0 0; }
.login_form fieldset p { margin: 0 0 5px; }

.login_form label {
font-weight: bold;
text-align: right;
display: block;
float: left;
width: 130px;
}

.login_form .inputbox { margin-left: 10px; width: 150px; }

.login_form .remember .inputbox {
width: 20px;
}

.login_form .button { margin-left: 140px; }

/* Register ---*/
.form-register fieldset { padding: 0 0 10px; }

.form-register p { margin: 0 0 5px; }

.form-register p.form-des { margin: 15px 0; }

.form-register label {
font-weight: bold;
text-align: right;
display: block;
float: left;
width: 130px;
}

.form-register .inputbox { margin-left: 10px; width: 200px; }

.form-register .button { margin-left: 140px; }

/* User ---*/
.user-details { padding: 10px 0; }

.user-details p { margin: 0 0 5px; }

.user-details label {
font-weight: bold;
text-align: right;
display: block;
float: left;
width: 130px;
}

.user-details .inputbox { margin-left: 10px; width: 200px; }

.user-details .button { margin-left: 140px; }

.user-details .paramlist .paramlist_key {
width: 130px !important;
padding: 0 0 5px !important;
}

.user-details .paramlist .paramlist_value {
padding: 0 0 5px !important;
}

.user-details .user_name span {
padding-left: 10px;
font-weight: bold;
}

/* Search ---*/
form#searchForm {
border-top: 1px solid #ccc;
padding: 15px 0; 
}

.searchintro {
border-bottom: 1px solid #ccc;
}

.results h4 {
text-transform: none;
font-size: 110%;
margin: 15px 0 0;
}

.results p { margin: 0 0 10px; }

/* Contact ---*/
#component-contact address { font-style: normal; }

#component-contact #emailForm { border-top: 1px solid #ddd; padding-top: 15px; }

.contact_email { margin: 0 0 10px; }

.contact_email label { font-weight: bold; display: block; }

.contact_email_checkbox { margin: 15px 0; }

/* JOOMLA STYLE
--------------------------------------------------------- */
/* Layout Deco ---*/
.article_separator,
.leading_separator,
.row_separator,
.column_separator { display: none; }

.leading {
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
padding-top: 10px;
}

.article_row { padding-bottom: 10px; padding-top: 10px; }

.article_column { }

.column_separator { padding: 0 25px; }

/* Meta ---*/
.article-tools {
border-bottom: 1px solid #e0e0e0;
clear: both;
color: #000000
display: block;
line-height: normal;
margin: 0 0 10px;
padding: 5px;
position: relative;
}

.article-meta { float: left; padding: 0; width: 70%; }

.article-section, .article-category { color: #999; }

.createby {
background: url(../images/icon-user.gif) no-repeat 0 2px;
padding: 3px 3px 3px 20px;
}

.createdate {
background: url(../images/icon-date.gif) no-repeat 0 2px;
padding: 3px 3px 3px 20px;
}

.modifydate { color: #999; display: block; margin: 10px 0; }

.contentdescription {
border-bottom: 1px solid #ccc;
display: block;
margin: 0 -15px;
padding: 10px 15px;
}

.contentdescription p { margin: 0; }

.buttonheading { float: right; }

.buttonheading img { border: 0; float: right; margin: 0 5px 0 0; }

/*Inline images ---*/
img.caption { margin-top: 5px; }

.img_caption { color: #999; margin-bottom: 10px; }


#ja-current-content .img_caption img { margin: 5px 0 0; }

.img_caption p {
background: #333;
border-top: 1px solid #fff;
color: #ccc;
margin: 0;
padding: 1px 0;
text-align: center;
}

/* Tables ---*/
.sectiontableheader {
background: #333;
border: 1px solid #ccc;
color: #fff;
padding: 5px;
}

.sectiontableheader a,
.sectiontableheader a:hover,
.sectiontableheader a:focus,
.sectiontableheader a:active { color: #fff; }

.sectiontableentry,
.sectiontableentry0,
.sectiontableentry1,
.sectiontableentry2 {
background: url(../images/dot2.gif) repeat-x bottom;
padding: 5px 5px 6px;
}

.sectiontableentry:hover,
.sectiontableentry0:hover,
.sectiontableentry1:hover,
.sectiontableentry2:hover { /* background-color: #fffff0; */ background:none; }

.sectiontableentry2 { background-color: #f6f6f6; }

table.contentpane, table.tablelist { width: 100%; }

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

/* Content Toc */
table.contenttoc {
border: 1px solid #ddd;
float: right;
margin: 0 0 10px 12px;
padding: 0;
width: 30%;
}

table.contenttoc a { color: #333; }

table.contenttoc td { border-bottom: 1px dotted #ccc; padding: 5px 10px; }

table.contenttoc th {
background: #f6f6f6;
border-bottom: 1px solid #ddd;
padding: 5px 10px;
text-transform: uppercase;
}

/* Poll */
div.poll { padding: 15px 0; }

form#poll {
border-bottom: 1px dotted #ccc;
font-weight: bold;
margin-bottom: 10px;
padding-bottom: 10px;
}

dl.poll {
border-bottom: 1px dotted #ccc;
font-size: 92%;
margin-bottom: 10px;
padding-bottom: 10px;
}

dl.poll dt, dl.poll dd { float: left; }

dl.poll dt { clear: left; width: 100px; }

dl.poll dd { clear: right; }

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

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

table.pollstableborder td {
background: #f6f6f6;
border-bottom: 1px solid #ccc;
font-weight: bold;
padding: 5px !important;
}

table.pollstableborder tr.sectiontableentry0 td,
table.pollstableborder tr.sectiontableentry1 td { background: #fff; font-weight: normal; }

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

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

/* Misc. */
table.contentpaneopen, table.contentpane, table.blog { width: 100%; }

/* Pagination ---*/
ul.pagination { margin: 10px 0; }

ul.pagination li {
background: none;
display: inline;
margin: 0;
padding: 0;
overflow: hidden;
}

ul.pagination li span { 
padding: 4px 8px; 
line-height: 20px;
border: 1px solid #dcdcdc; 
color: #381704;
}

ul.pagination a {
background: #f6f6f6;
border: 1px solid #ccc;
color: #000;
line-height: 20px;
padding: 4px 8px;
text-decoration: none;
cursor: pointer;
}

ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus {
background: #2482B0;
border: 1px solid #000;
color: #fff;
text-decoration: none;
}

.sortby { font-size: 92%; margin: 10px 0 5px; }

.sortby .filter, .sortby .display { float: left; width: 40%; }

.sortby .display { float: right; text-align: right; }

.pagenavbar { font-weight: bold; }

.pagenavcounter { margin: 15px 0 !important; text-align: center; }

.counter {
line-height: 1;
margin: 15px 0 !important;
text-align: center;
}

.counter span {
background: url(../images/counter.png) right bottom no-repeat;
border: 1px solid #4aa2cf;
border-right: 0px;
border-bottom: 0px;
color: #fff;
padding: 4px 25px 4px 5px;
font-size: 90%;
}

.blog_more {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 15px 0 5px;
}

.blog_more h2 {
font-size: 115% !important;
margin: 0 0 5px;
text-transform: uppercase;
color:#646464;
}

.blog_more ul li {
background: url(../images/bullet.gif) no-repeat 5px 6px;
padding-left: 15px;
}

div.back_button a,
div.back_button a:hover,
div.back_button a:active { display: block; margin: 10px 0; }

/* Messages ---*/
#system-message { margin: 0 0px 10px; }

#system-message dd.message ul,
#system-message dd.error ul,
#system-message dd.notice ul { margin: 0; padding: 0; }

#system-message dd.message ul li,
#system-message dd.error ul li,
#system-message dd.notice ul li {
background: none;
color: #fff;
margin: 0;
padding: 5px;
}

/* System Standard Messages */
#system-message dd.message ul { background: #069; border: 0; }

/* System Error Messages */
#system-message dd.error ul { background: #bf0000; border: 0; }

/* System Notice Messages */
#system-message dd.notice ul { background: #333; border: 0; }

/* Tooltips --- */
.tool-tip {
background: #ffffcc;
border: 1px solid #D4D5AA;
float: left;
max-width: 300px;
padding: 5px;
z-index: 1000;
}

.tool-title {
background: url(../../system/images/selector-arrow.png) no-repeat;
font-size: 100%;
font-weight: bold;
margin: 0;
margin-top: -15px;
padding: 0;
padding-bottom: 5px;
padding-top: 15px;
}

.tool-text { font-size: 100%; margin: 0; }

.hasTip img { border: none; margin: 0 5px 0 0; }

.contentpaneopen_edit img { vertical-align: middle; }

/* MODULE STYLES
--------------------------------------------------------- */
div.ja-moduletable h3, div.moduletable h3 {
background: url(../images/dot2.gif) repeat-x bottom;
color: #333;
font-size: 115%;
margin: 0 0 0px;
padding: 1px 0 8px;
overflow: hidden;
}

div.moduletable_menu h3 { margin-bottom: 0; }

div.ja-moduletable, div.moduletable {
border-bottom: 1px solid #ccc;
margin-top: 8px;
margin-bottom: 15px;
padding: 0px;
position: relative;
}
#ja-left div.ja-moduletable, #ja-left div.moduletable , #ja-right div.ja-moduletable, #ja-right div.moduletable{
background: #fff;
border: 1px solid #d9d9d9;
margin: 0px 13px 10px 0px;
}
#ja-left div.ja-moduletable h3, #ja-left div.moduletable h3 , #ja-right div.ja-moduletable h3, #ja-right div.moduletable h3{
background: url(../images/blueModuleHeader.png) left top repeat-x #2daae8;
text-transform: none;
color: #fff;
padding: 10px 10px;
text-shadow: 0px 1px 0px #9d9d9d;
border: 1px solid #2daae8;
margin-left: -1px;
margin-top: -1px;
margin-right: -1px;
}
#ja-left div.moduletable_menu , #ja-right div.moduletable_menu{
padding-bottom: 0px;
}
#ja-left div.ja-moduletable .ja-box-ct, #ja-left div.moduletable .ja-box-ct , #ja-right div.ja-moduletable .ja-box-ct, #ja-right div.moduletable .ja-box-ct{
background: url(../images/boxGradient.png) left top repeat-x #fefefe;
padding: 5px;
border: 2px solid #fff;
}
#ja-left div.ja-moduletable .ja-box-ct .menu, #ja-left div.moduletable .ja-box-ct .menu , #ja-right div.ja-moduletable .ja-box-ct .menu, #ja-right div.moduletable .ja-box-ct .menu{
margin: -7px;
}

#ja-right div.ja-moduletable .moduletable_blue 
{
border:1px solid #d9d9d9 ;	
}
#ja-right .moduletable_noborder
{
border:none;
background:none;
margin-bottom:0px;
}
#ja-left div.ja-moduletable_noborder .ja-box-ct, #ja-left div.moduletable_noborder .ja-box-ct, #ja-right div.ja-moduletable_noborder .ja-box-ct, #ja-right div.moduletable_noborder .ja-box-ct{
background: none;
border: 0px;
padding: 0px;
margin-bottom: 15px;
}
#ja-left div.moduletable_noborder, #ja-right div.moduletable_noborder{
border: 0px;
background: none;
}
#ja-left div.ja-moduletable_blank .ja-box-ct, #ja-left div.moduletable_blank .ja-box-ct, #ja-right div.ja-moduletable_blank .ja-box-ct, #ja-right div.moduletable_blank .ja-box-ct{
background: none;
border: 0px;
padding: 0px;
margin-bottom: 15px;
}
#ja-left div.moduletable_blank, #ja-right div.moduletable_blank{
border: 0px;
background: none;
}
/* Badge Module ---*/
.badge {
height: 46px;
position: absolute;
right: -1px;
top: -1px;
width: 45px;
background-image: url(../images/icon-badge.png);
background-repeat: no-repeat;
}

.badge-hot 	.badge { background-position: 0 0; }
.badge-new 	.badge { background-position: 0 -46px; }
.badge-pick .badge { background-position: 0 -92px; }
.badge-top 	.badge { background-position: 0 -138px; }

/* Search Module ---*/

#searchWrapper
{
float: right;
padding: 15px;
margin-top: 14px;
width: 305px;
}
#ja-search {
padding-left: 25px;
background: url(../images/icon-search.png) no-repeat center left;
}

#ja-search label { display: none; }

#ja-search .inputbox {
width: 200px;
border: 1px solid #c4c4c4;
padding: 3px 5px;
color: #000;
background: url(../images/searchField.png) left top repeat-x #fff;
font-size: 100%;
}

#ja-search .inputbox:hover, #ja-search .inputbox:focus { }

#ja-search .button {
font-size: 100%;
font-weight: bold;
text-shadow: 0px 1px 0px #2395e2;
margin-left: 5px;
text-transform: none;
padding-top: 1px;
padding-bottom: 1px;
}

/* Login Module ---*/
#form-login-username .inputbox,
#form-login-password .inputbox {
background-position: 5px center;
background-repeat: no-repeat;
font-weight: bold;
}

#form-login-username .inputbox, #form-login-password .inputbox { width: 90%; }

#form-login ul { margin: 0 !important; padding: 0; }

#form-login p { margin: 0 0 5px; }

#form-login .button { margin: 10px 0; }

/* Poll Module ---*/
h4.poll-title { margin: 0; padding: 0; }

a.poll-result { font-size: 92%; text-transform: uppercase; text-decoration:none;}

form.poll .button { margin-right: 5px; }

/* Advertisement ---*/
div.bannergroup_text div.banneritem_text { border-bottom: 1px dotted #ccc; padding: 5px 0; }

div.bannergroup_text div.banneritem_text a { font-weight: bold; }

div.bannergroup_text div.bannerheader,
div.bannergroup_text div.bannerfooter_text a { color: #999; font-size: 92%; }

div.bannergroup_text div.bannerfooter_text { padding: 5px 0 0; text-align: right; }

div.bannergroup { margin-bottom: 10px; }

/* Rounded Module --- */
div.ja-module h3, div.module h3 {
border-bottom: 1px solid #ccc;
color: #7ba566;
font-size: 115%;
font-weight: bold;
margin: 0 -15px 10px;
padding: 8px 15px;
text-transform: uppercase;
}

div.ja-module, div.module { margin-bottom: 20px; position: relative; overflow: hidden; }

.ja-box-br {
background: url(../images/b-br.gif) no-repeat bottom right #fff;
}

.ja-box-bl {
background: url(../images/b-bl.gif) no-repeat bottom left;
}

.ja-box-tr {
background: url(../images/b-tr.gif) no-repeat top right;
}

.ja-box-tl {
background: url(../images/b-tl.gif) no-repeat top left;
padding: 0 15px 10px;
}

/* text */
div.module_text h3 {
clear: both;
display: block;
margin: 0 0 10px;
padding: 0;
overflow: hidden;
width: 100%;
border-bottom: 0;
}

div.module_text span {
clear: both;
display: block;
float: left;
font-weight: bold;
padding: 0 3px;
background: #fff;
}

div.module_text {
background: url(../images/bt-br.gif) no-repeat bottom right #f6f6f6;
}

div.module_text .ja-box-bl {
background: url(../images/bt-bl.gif) no-repeat bottom left;
}

div.module_text .ja-box-tr {
background: url(../images/bt-tr.gif) no-repeat top right;
}

div.module_text .ja-box-tl {
background: url(../images/bt-tl.gif) no-repeat top left;
}

/* Blank */
div.module_noborder,
div.module_noborder .ja-box-bl,
div.module_noborder .ja-box-tr,
div.module_noborder .ja-box-tl {
background: none;
padding: 0;
}

/* Green Module */
#ja-topsl .moduletable_green h3, 
#ja-botsl .moduletable_green h3,
#ja-left div.moduletable_green h3,
#ja-right div.moduletable_green h3,
.moduletable_green h3{
background: url(../images/greenModuleHeader.jpg) left top repeat-x #7b9d4c !important;
border: 1px solid #b4d685 !important;
color: #fff !important;
text-shadow: 0px 1px 0px #759050 !important;
}
.green #ja-topsl .moduletable h3, 
.green #ja-botsl .moduletable h3,
.green #ja-left div.ja-moduletable h3, 
.green #ja-left div.moduletable h3, 
.green #ja-right div.ja-moduletable h3, 
.green #ja-right div.moduletable h3{
background: url(../images/greenModuleHeader.jpg) left top repeat-x #7b9d4c;
border: 1px solid #b4d685;
color: #fff;
text-shadow: 0px 1px 0px #759050;
} 
#ja-topsl .moduletable_green a, 
#ja-botsl .moduletable_green a,
.ja-moduletable_green a, 
#ja-left div.moduletable_green a, 
#ja-right div.moduletable_green a{
color: #456a11;
}
#ja-topsl .moduletable_green a:hover, 
#ja-botsl .moduletable_green a:hover,
.moduletable_green a:hover, 
#ja-left div.ja-moduletable_green a:hover, 
#ja-right div.ja-moduletable_green a:hover{
color: #395d07;
}

/* Brown Module */
#ja-topsl .moduletable_brown h3, 
#ja-botsl .moduletable_brown h3,
#ja-left div.moduletable_brown h3,
#ja-right div.moduletable_brown h3,
.moduletable_brown h3{
background: url(../images/brownModuleHeader.jpg) left top repeat-x #908a71 !important;
border: 1px solid #c3bb9a !important;
color: #fff !important;
text-shadow: 0px 1px 0px #7e7863 !important;
}
.brown #ja-topsl .moduletable h3, 
.brown #ja-botsl .moduletable h3,
.brown #ja-left div.ja-moduletable h3, 
.brown #ja-left div.moduletable h3, 
.brown #ja-right div.ja-moduletable h3, 
.brown #ja-right div.moduletable h3{
background: url(../images/brownModuleHeader.jpg) left top repeat-x #908a71;
border: 1px solid #c3bb9a;
color: #fff;
text-shadow: 0px 1px 0px #7e7863;
}
#ja-topsl .moduletable_brown a, 
#ja-botsl .moduletable_brown a,
.moduletable_brown a, 
#ja-left div.ja-moduletable_brown a,
#ja-right div.ja-moduletable_brown a{
color: #7e7142;
}
#ja-topsl .moduletable_brown a:hover, 
#ja-botsl .moduletable_brown a:hover,
.moduletable_brown a:hover, 
#ja-left div.ja-moduletable_brown a:hover,
#ja-right div.ja-moduletable_brown a:hover{
color: #6b4d32;
}

/* Orange Module */
#ja-topsl .moduletable_orange h3, 
#ja-botsl .moduletable_green h3,
#ja-left div.moduletable_orange h3,
#ja-right div.moduletable_orange h3,
.moduletable_orange h3{
background: url(../images/orangeModuleHeader.jpg) left top repeat-x #f5a73d !important;
border: 1px solid #f4a63d !important;
color: #fff !important;
text-shadow: 0px 1px 0px #ce9036 !important;
}
.orange #ja-topsl .moduletable h3, 
.orange #ja-botsl .moduletable h3,
.orange #ja-left div.ja-moduletable h3, 
.orange #ja-left div.moduletable h3, 
.orange #ja-right div.ja-moduletable h3, 
.orange #ja-right div.moduletable h3{
background: url(../images/orangeModuleHeader.jpg) left top repeat-x #f5a73d;
border: 1px solid #f4a63d;
color: #fff;
text-shadow: 0px 1px 0px #ce9036;
}
#ja-topsl .moduletable_orange a, 
#ja-botsl .moduletable_orange a,
.moduletable_orange a, 
#ja-left div.ja-moduletable_orange a,
#ja-right div.ja-moduletable_orange a{
color: #cf8123;
}
#ja-topsl .moduletable_orange a:hover, 
#ja-botsl .moduletable_orange a:hover,
.moduletable_orange a:hover, 
#ja-left div.ja-moduletable_orange a:hover, 
#ja-right div.ja-moduletable_orange a:hover{
color: #ac6816;
}

/* Purple Module */
#ja-topsl .moduletable_purple h3, 
#ja-botsl .moduletable_purple h3,
#ja-left div.moduletable_purple h3,
#ja-right div.moduletable_purple h3,
.moduletable_purple h3{
background: url(../images/purpleModuleHeader.jpg) left top repeat-x #62224e !important;
border: 1px solid #863b71 !important;
color: #fff !important;
text-shadow: 0px 1px 0px #551643 !important;
}
.purple #ja-topsl .moduletable h3, 
.purple #ja-botsl .moduletable h3,
.purple #ja-left div.ja-moduletable h3, 
.purple #ja-left div.moduletable h3, 
.purple #ja-right div.ja-moduletable h3, 
.purple #ja-right div.moduletable h3{
background: url(../images/purpleModuleHeader.jpg) left top repeat-x #62224e;
border: 1px solid #863b71;
color: #fff;
text-shadow: 0px 1px 0px #551643;
}
#ja-topsl .moduletable_purple a, 
#ja-botsl .moduletable_purple a,
.moduletable_purple a, 
#ja-left div.ja-moduletable_purple a,
#ja-right div.ja-moduletable_purple a{
color: #b54690;
}
#ja-topsl .moduletable_purple a:hover, 
#ja-botsl .moduletable_purple a:hover,
.moduletable_purple a:hover, 
#ja-left div.ja-moduletable_purple a:hover,
#ja-right div.ja-moduletable_purple a:hover{
color: #913572;
}

/* Red Module */
#ja-topsl .moduletable_red h3, 
#ja-botsl .moduletable_red h3,
#ja-left div.moduletable_red h3,
#ja-right div.moduletable_red h3,
.moduletable_red h3{
background: url(../images/redModuleHeader.jpg) left top repeat-x #971c14 !important;
border: 1px solid #b4625c !important;
color: #fff !important;
text-shadow: 0px 1px 0px #8e2018 !important;
}
.red #ja-topsl .moduletable h3, 
.red #ja-botsl .moduletable h3,
.red #ja-left div.ja-moduletable h3, 
.red #ja-left div.moduletable h3, 
.red #ja-right div.ja-moduletable h3, 
.red #ja-right div.moduletable h3{
background: url(../images/redModuleHeader.jpg) left top repeat-x #971c14;
border: 1px solid #b4625c;
color: #fff;
text-shadow: 0px 1px 0px #8e2018;
}
#ja-topsl .moduletable_red a, 
#ja-botsl .moduletable_red a,
.moduletable_red a, 
#ja-left div.ja-moduletable_red a,
#ja-right div.ja-moduletable_red a{
color: #a3231b;
}
#ja-topsl .moduletable_red a:hover, 
#ja-botsl .moduletable_red a:hover,
.moduletable_red a:hover, 
#ja-left div.ja-moduletable_red a:hover,
#ja-right div.ja-moduletable_red a:hover{
color: #881a13;
}
/* Blue Module */
#ja-topsl .moduletable_blue h3, 
#ja-botsl .moduletable_blue h3,
#ja-left div.moduletable_blue h3,
#ja-right div.moduletable_blue h3,
.moduletable_blue h3{
background: url(../images/blueModuleHeader.jpg) left top repeat-x #20a9e3 !important;
border: 1px solid #2daae8 !important;
color: #fff !important;
text-shadow: 0px 1px 0px #459dca !important;
}
.blue #ja-topsl .moduletable h3, 
.blue #ja-botsl .moduletable h3,
.blue #ja-left div.ja-moduletable h3, 
.blue #ja-left div.moduletable h3, 
.blue #ja-right div.ja-moduletable h3, 
.blue #ja-right div.moduletable h3{
background: url(../images/blueModuleHeader.jpg) left top repeat-x #20a9e3;
border: 1px solid #2daae8;
color: #fff;
text-shadow: 0px 1px 0px #459dca;
}
#ja-topsl .moduletable_blue a, 
#ja-botsl .moduletable_blue a,
.moduletable_blue a, 
#ja-left div.moduletable_blue a,
#ja-right div.moduletable_blue a{
color: #2482b0;
}
#ja-topsl .moduletable_blue a:hover, 
#ja-botsl .moduletable_blue a:hover,
.moduletable_blue a:hover, 
#ja-left div.moduletable_blue a:hover,
#ja-right div.moduletable_blue a:hover{
color: #155270;
}

/* Grey Module */
#ja-topsl .moduletable_grey h3, 
#ja-botsl .moduletable_grey h3,
#ja-left div.moduletable_grey h3,
#ja-right div.moduletable_grey h3,
.moduletable_grey h3{
background: url(../images/greyModuleHeader.jpg) left top repeat-x #E0E0E0 !important;
border: 1px solid #DBDBDB !important;
color: #575757 !important;
text-shadow: 0px 1px 0px #fff !important;
}
.grey #ja-topsl .moduletable h3, 
.grey #ja-botsl .moduletable h3,
.grey #ja-left div.ja-moduletable h3, 
.grey #ja-left div.moduletable h3, 
.grey #ja-right div.ja-moduletable h3, 
.grey #ja-right div.moduletable h3{
background: url(../images/greyModuleHeader.jpg) left top repeat-x #E0E0E0;
border: 1px solid #DBDBDB;
color: #575757;
text-shadow: 0px 1px 0px #fff;
}
#ja-topsl .moduletable_grey a, 
#ja-botsl .moduletable_grey a,
.moduletable_grey a, 
#ja-left div.moduletable_grey a,
#ja-right div.moduletable_grey a{
color: #2482b0;
}
#ja-topsl .moduletable_grey a:hover, 
#ja-botsl .moduletable_grey a:hover,
.moduletable_grey a:hover, 
#ja-left div.moduletable_grey a:hover,
#ja-right div.moduletable_grey a:hover{
color: #155270;
}

/* White Module */
#ja-topsl .moduletable_white h3, 
#ja-botsl .moduletable_white h3,
.moduletable_white h3, 
#ja-left div.ja-moduletable_white h3,
#ja-right div.ja-moduletable_white h3,
#ja-left div.moduletable_white h3,
#ja-right div.moduletable_white h3{
background: url(../images/whiteModuleHeader.jpg) left top repeat-x #E0E0E0;
border: 1px solid #DBDBDB;
color: #575757;
text-shadow: 0px 1px 0px #fff;
} 

/* text color for high contrast module */
div.module_black *, div.module_green *, div.module_blue *, div.module_red * { color: #fff !important; }

div.module_black .inputbox, div.module_green .inputbox, div.module_blue .inputbox, div.module_red .inputbox {
color: #333 !important;
}

/* Module list ---*/
div.ja-moduletable ul, div.ja-module ul {
margin: 15px 0 0;
}

div.ja-moduletable ul li, div.ja-module ul li {
padding-left: 12px;
background-position: 2px 8px;
}

/* Collapsible h3 ---*/
h3.show {
background: url(../images/icon-show.png) no-repeat 100% 60%;
cursor: pointer;
}

h3.hide {
background: url(../images/icon-hide.png) no-repeat 100% 60%;
cursor: pointer;
}

/* Uncomment the following lines if you want collapsible modules with badges still show arrows */
/* 
.badge-hot h3.show,.badge-new h3.show,.badge-pick h3.show,.badge-top h3.show,
.badge-hot h3.hide,.badge-new h3.hide,.badge-pick h3.hide,.badge-top h3.hide {
background-position: 15px 60%;
text-indent: 15px;
}
*/

/* MAIN LAYOUT DIVS
--------------------------------------------------------- */
.wrap { }
.main { }
.ja-box { padding-bottom: 10px; padding-top: 10px; }

#ja-wrapper { }

#ja-container {
position: relative;
z-index: 5;
}

#ja-container .main { padding: 20px 0 0 0; background: url(../images/containerBg.png) left top repeat-x; }

/* 3 Columns - Classic Layout ---*/
#ja-container.ja-l1r1  {}

/* Full */
#ja-container {
padding-bottom: 10px;
}

/* Full left */
#ja-container.ja-r1 {}

/* Full right */
#ja-container.ja-l1 {}

/* Mass ---*/
.ja-mass-top {}
.ja-mass-top .ja-moduletable, .ja-mass-top .ja-module { margin-left: 0; margin-right: 0; }

.ja-mass-bottom {}
.ja-mass-bottom .ja-moduletable, .ja-mass-bottom .ja-module { margin-left: 0; margin-right: 0; }

/* MAIN COLUMN
--------------------------------------------------------- */
#ja-mainbody {
}

#ja-main .inner{ 
border: 1px solid #d9d9d9;
background: url(../images/componentGradient.png) left top repeat-x #fff;
min-height: 300px;
}
.ja-r1 #ja-main .inner, .ja-l1r1 #ja-main .inner, .ja-l2r2 #ja-main .inner,
.ja-r2 #ja-main .inner, .ja-l1r2 #ja-main .inner, .ja-l2r2 #ja-main .inner,
.ja-l2r1 #ja-main .inner{
margin-right: 13px;
}
.ja-l1 #ja-main .inner{ 
margin-right: 0px;
}

#ja-contentwrap { }

/* Content Top ---*/
.ja-content-top { }
.ja-content-top .ja-moduletable, .ja-content-top .ja-module { margin-left: 0; margin-right: 0;  }

/* Content Main ---*/
.ja-content-main { }

/* Content Bottom ---*/
.ja-content-bottom { }
.ja-content-bottom .ja-moduletable, .ja-content-bottom .ja-module { margin-left: 0; margin-right: 0;  }

/* @end */

/* SIDE COLUMNS
--------------------------------------------------------- */
.ja-colswrap { }

.ja-col { }

/* Left Columns ---*/
#ja-left .ja-l2 { }

/* Right Columns ---*/
#ja-right .ja-r2 { }

/* HEADER
--------------------------------------------------------- */
#ja-header { position: relative; z-index: 10; }

#ja-header .main {

}

h1.logo, div.logo-text h1 { font-size: 250%; line-height: 1;}

h1.logo, div.logo-text { float: left; z-index: 1; position: relative; overflow: hidden;}

/* Logo Image ---*/

/* Logo Text ---*/
div.logo-text { margin-top: 8px; }

div.logo-text h1 a {
color: #878787;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}

p.site-slogan {
background: #2da1e1;
color: #FFFFFF;
display: block;
font-size: 85%;
letter-spacing: 1px;
margin: 8px 0 0;
padding: 0 5px;
text-align: center;
}

/* Header mask ---*/
.ja-headermask {
display: block;
height: 80px;
position: absolute;
right: -1px;
top: 0;
width: 602px;
z-index: 0;
}

/* NAVIGATION
--------------------------------------------------------- */
/* Main Nav ---*/
#ja-mainnav {
position: relative;
z-index: 11;
margin-bottom: 12px;
}

#ja-mainnav .main { 
font-size: 12px; 
background: url(../images/mainnavBg.png) repeat-x top #1a191a;
}

span.has-image {
padding-left: 25px;
display: block;
overflow: hidden;
background-repeat: no-repeat;
background-position: left 2px;
}

span.menu-title { display: block; }

span.menu-desc {
display: block;
font-weight: normal;
font-size: 92%;
color: #999;
}

/* Sub Nav ---*/
#ja-subnav {  z-index: 9; margin-top: -12px; margin-bottom:12px; }

#ja-subnav .main {
line-height: 1;
z-index: 10;
background: #333; 
position: relative;
}
#ja-subnav .main #jasdl-subnav{
border-top: 1px solid #666; 
border-left: 1px solid #666; 
border-bottom: 1px solid #666; 
}

#ja-subnav ul {
background: #333;
overflow: hidden;
padding: 10px 0;
min-height: 24px;
}

#ja-subnav ul.active { background: #333; }

#ja-subnav li {
background: none;
border-left: 1px dotted #999;
display: block;
float: left;
padding: 0 10px 0 11px;
}

#ja-subnav li.first-item { border-left: 0; }

#ja-subnav ul li a { color: #ccc; display: block; text-decoration: none; }

#ja-subnav ul li a:hover { color: #fff; }

#ja-subnav ul li.active a,
#ja-subnav ul li.active a:hover,
#ja-subnav ul li.active a:active,
#ja-subnav ul li.active a:focus {
color: #fff;
font-weight: bold;
text-decoration: underline;
}

#ja-subnav ul.active li a { color: #ccc; }

#ja-subnav ul.active li a:hover { color: #fff; }

#ja-subnav ul li.empty { visibility: hidden }

/* Sub Nav (lv2) ---*/
#ja-subnav ul li ul {
background: #ddd;
border: 1px solid #ccc;
display: block;
height: auto;
left: -999em;
padding: 0;
position: absolute;
}

#ja-subnav ul li.hover ul {
display: block;
height: auto;
left: auto;
position: absolute;
margin-top: 3px;
margin-left: 5px;
}

#ja-subnav ul li.haschild a {
background: url(../images/arrow.png) no-repeat right center;
padding-right: 12px;
}

#ja-subnav ul li.haschild a:hover {
background: url(../images/arrow3.png) no-repeat right center;
}

#ja-subnav ul li.haschild li a, #ja-subnav ul li.hover li a { background: none; padding-right: 0; }

#ja-subnav ul li ul li {
border-bottom: 1px solid #ccc;
border-left: 0;
display: block;
float: none;
overflow: hidden;
padding: 5px;
text-align: left;
}

#ja-subnav ul li ul li a {
background-image: none !important;
border: 0 !important;
color: #333 !important;
font-weight: normal !important;
text-decoration: none !important;
}

#ja-subnav ul li ul li a span.menu-title { padding-top: 3px; padding-bottom: 3px; }

#ja-subnav ul li ul li a:hover {
background-image: none !important;
color: #069 !important;
text-decoration: underline !important;
}

#ja-subnav ul li ul li a.active {
color: #069 !important;
font-weight: bold !important;
}

/* Breadcrumbs */
.ja-navhelper { text-transform: uppercase; }
.ja-navhelper .main { padding: 5px 0; }

.ja-navhelper a { padding: 3px 4px; color: #069; text-decoration: none; border: 1px solid transparent;	 }
.ja-navhelper a:hover, .ja-navhelper a:active, .ja-navhelper a:focus { color: #fff; text-decoration: none; background-color: #000;border: 1px solid #fff;}

.ja-breadcrums {
border:1px solid #d9d9d9;
background: #e6e6e6;
padding: 6px;
margin-bottom: 20px;
text-shadow: 0px 1px 0px #fff;
}

.ja-breadcrums strong { margin-right: 5px; }

.ja-breadcrums img { margin: 1px 5px; }

.ja-breadcrums a{
color: #1f98d4;
text-decoration: none;
}
.ja-breadcrums a:hover{
text-decoration: underline;
}

/* Extras ---*/
.ja-links { float: right; margin-top: 2px; }

.ja-links li { background: none; padding: 0; display: inline; }

.ja-links li.top a {
background: url(../images/arrow2.png) no-repeat 5px center;
padding-left: 17px;
padding-right: 5px;
}

.ja-links li.top a:hover { background-color: #069; }

.ja-links li.layout-switcher a {
background: #069;
color: #fff;
text-decoration: none;
}

.ja-links li.layout-switcher a:hover { background: #666; color: #fff; text-decoration: none; }

.ja-links li.user-reset a {
background: #bf0000;
color: #fff;
text-decoration: none;
}

.ja-links li.user-reset a:hover { background: #666; color: #fff; text-decoration: none; }

/* Default Joomla! Menu ---*/
#ja-container ul.menu { margin: 0; padding: 0; }

#ja-container ul.menu li {
background: none;
margin: 0;
overflow: hidden;
padding: 0;
border-bottom: 1px solid #d9d9d9;
}
#ja-container ul.menu li:last-child{
border-bottom: 0px;
}

#ja-container ul.menu li a {
color: #333;
display: block;
outline: none;
padding: 6px 15px 6px 5px;
text-decoration: none;
text-indent: 5px;
border: 1px solid #fff;
background: url(../images/sideMenuSprite.jpg) 100% 0px no-repeat #fff;
}

#ja-container ul.menu li.parent a{
background: url(../images/sideMenuSprite.jpg) 100% -50px no-repeat #fff;
}

#ja-container ul.menu li a:hover,
#ja-container ul.menu li a:active,
#ja-container ul.menu li a:focus { 
color: #fff; 
background: url(../images/sideMenuSprite.jpg) 100% -100px no-repeat #fff;
}
#ja-container ul.menu li.parent a:hover,
#ja-container ul.menu li.parent a:active,
#ja-container ul.menu li.parent a:focus{
background: url(../images/sideMenuSprite.jpg) 100% -150px no-repeat #fff;
}

#ja-container ul.menu li.active a { 
color: #fff; 
background: url(../images/sideMenuSprite.jpg) 100% -100px no-repeat #fff;
}

#ja-container ul.menu li ul { 
margin: 0px; 
}

#ja-container ul.menu li li a:hover,
#ja-container ul.menu li li a:active,
#ja-container ul.menu li li a:focus { color: #fff !important;}

#ja-container ul.menu li.active > a { color: #fff !important; font-weight: bold !important; }

#ja-container ul.menu span.separator { display: none; }


#ja-container ul.menu li a 
{
color:#6b6a6a !important;
}
#ja-container ul.menu li a:hover
{ 
color:#FFFFFF !important;
}
#ja-container ul.menu li a span
{
background:url("../images/arrow.png") no-repeat scroll 0 50% transparent;
padding-left:15px;
}
#ja-container ul.menu li a:hover span,
#ja-container ul.menu li a:active span,
#ja-container ul.menu li a:focus  span , #ja-container ul.menu li.active > a span{ 
background:url("../images/arrowHover.png") no-repeat scroll 0 50% transparent;
}
/* Level 2 */
#ja-container ul.menu li li {
background: url(../images/arrow.png) no-repeat left 11px;
border-bottom: 0;
}
#ja-container ul.menu li.active li a {
text-indent: 10px;
background: url(../images/sideMenuSprite.jpg) 100% 0px no-repeat #fff;
}
#ja-container ul.menu li.active li a:hover{
background: url(../images/sideMenuSprite.jpg) 100% -100px no-repeat #fff;
}
#ja-container ul.menu li.active li.parent a{
background: url(../images/sideMenuSprite.jpg) 100% -50px no-repeat #fff;
}
#ja-container ul.menu li.active li.parent a:hover{
background: url(../images/sideMenuSprite.jpg) 100% -150px no-repeat #fff;
}
#ja-container ul.menu li.active li.active a{
background: url(../images/sideMenuSprite.jpg) 100% -100px no-repeat #fff;
color: #fff;
}
#ja-container ul.menu li li a span{
margin-left: 10px;
}
/* Level 3 */
#ja-container ul.menu li.active li.active li a{
background: url(../images/sideMenuSprite.jpg) 100% 0px no-repeat #FFFFFF;
}
#ja-container ul.menu li.active li.active li a:hover{
background: url(../images/sideMenuSprite.jpg) 100% -100px no-repeat #FFFFFF;
}
#ja-container ul.menu li.active li.active li.parent a{
background: url(../images/sideMenuSprite.jpg) 100% -50px no-repeat #fff;
}
#ja-container ul.menu li.active li.active li.parent a:hover{
background: url(../images/sideMenuSprite.jpg) 100% -150px no-repeat #fff;
}
#ja-container ul.menu li.active li.active li.active a{
background: url(../images/sideMenuSprite.jpg) 100% -100px no-repeat #FFFFFF;
}
#ja-container ul.menu li li li a span{
margin-left: 20px;
}
/* Level 4 */
#ja-container ul.menu li.active li.active li.active li a{
background: url(../images/sideMenuSprite.jpg) 100% 0px no-repeat #FFFFFF;
}
#ja-container ul.menu li.active li.active li.active li a:hover{
background: url(../images/sideMenuSprite.jpg) 100% -100px no-repeat #FFFFFF;
}
#ja-container ul.menu li.active li.active li.active li.parent a{
background: url(../images/sideMenuSprite.jpg) 100% -50px no-repeat #fff;
}
#ja-container ul.menu li.active li.active li.active li.parent a:hover{
background: url(../images/sideMenuSprite.jpg) 100% -150px no-repeat #fff;
}
#ja-container ul.menu li.active li.active li.active li.active a{
background: url(../images/sideMenuSprite.jpg) 100% -100px no-repeat #FFFFFF;
}
#ja-container ul.menu li li li li a span{
margin-left: 30px;
} 
/* Level 5 */
#ja-container ul.menu li.active li.active li.active li.active li a{
background: url(../images/sideMenuSprite.jpg) 100% 0px no-repeat #FFFFFF;
}
#ja-container ul.menu li.active li.active li.active li.active li a:hover{
background: url(../images/sideMenuSprite.jpg) 100% -100px no-repeat #FFFFFF;
}
#ja-container ul.menu li.active li.active li.active li.active li.parent a{
background: url(../images/sideMenuSprite.jpg) 100% -50px no-repeat #fff;
}
#ja-container ul.menu li.active li.active li.active li.active li.parent a:hover{
background: url(../images/sideMenuSprite.jpg) 100% -150px no-repeat #fff;
}
#ja-container ul.menu li.active li.active li.active li.active li.active a{
background: url(../images/sideMenuSprite.jpg) 100% -100px no-repeat #FFFFFF;
}
#ja-container ul.menu li li li li li a span{
margin-left: 40px;
}
/* Level 6 */
#ja-container ul.menu li.active li.active li.active li.active li.active li a{
background: url(../images/sideMenuSprite.jpg) 100% 0px no-repeat #FFFFFF;
}
#ja-container ul.menu li.active li.active li.active li.active li.active li a:hover{
background: url(../images/sideMenuSprite.jpg) 100% -100px no-repeat #FFFFFF;
}
#ja-container ul.menu li.active li.active li.active li.active li.active li.parent a{
background: url(../images/sideMenuSprite.jpg) 100% -50px no-repeat #fff;
}
#ja-container ul.menu li.active li.active li.active li.active li.active li.parent a:hover{
background: url(../images/sideMenuSprite.jpg) 100% -150px no-repeat #fff;
}
#ja-container ul.menu li.active li.active li.active li.active li.active li.active a{
background: url(../images/sideMenuSprite.jpg) 100% -100px no-repeat #FFFFFF;
}
#ja-container ul.menu li li li li li li a span{
margin-left: 50px;
}

/* SPOTLIGHT
--------------------------------------------------------- */
#ja-topsl .ja-box, #ja-botsl .ja-box { 
padding: 0;
}

#ja-topsl .ja-box-right, #ja-botsl .ja-box-right,
#ja-topsl .ja-box-full, #ja-botsl .ja-box-full { 
background: none;
}

#ja-topsl .ja-moduletable, #ja-botsl .ja-moduletable  {
border-bottom: 0;
margin: 7px;
border: 1px solid #d9d9d9;
}
#ja-topsl .ja-box-full .ja-moduletable, #ja-botsl .ja-box-full .ja-moduletable{
margin: 7px 0px;
}
#ja-topsl .ja-moduletable .ja-box-ct, #ja-botsl .ja-moduletable .ja-box-ct{
background: url(../images/boxGradient.png) left top repeat-x #fefefe;
padding: 5px;
border: 2px solid #fff;
}

#ja-topsl li, #ja-botsl li {
background-image: url(../images/bullet2.gif);
background-position: 1px 8px;
padding-left: 10px;
}

#ja-topsl ol li, #ja-botsl ol li { margin-left: 25px; padding: 0 !important; }

#ja-topsl ul, #ja-topsl p, #ja-topsl ol,
#ja-botsl ul, #ja-botsl p, #ja-botsl ol { padding: 0; margin: 0 !important; }

#ja-topsl a, #ja-botsl a {
text-decoration: none;
border-bottom: 1px dotted #ccc;
}

#ja-topsl a:hover, #ja-topsl a:active, #ja-topsl a:focus,
#ja-botsl a:hover, #ja-botsl a:active, #ja-botsl a:focus {
color: #000;
text-decoration: none;
border-bottom: 1px solid #fff;
}

/* Top and Bottom spotlight ---*/

#ja-topsl .main { padding: 10px 0; }

#ja-topsl h3, #ja-botsl h3{
color: #575757;
background: url(../images/usersHeadline.jpg) left top repeat-x #e0e0e0;
border: 1px solid #dbdbdb;
margin: -1px -1px 0px -1px;
text-shadow: 0px 1px 0px #fff;
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
padding: 8px;
}
#ja-botsl .main { padding: 0px 0 10px 0px; }

#ja-botsl .ja-moduletable, #ja-botsl .moduletable {
margin-bottom: 0;
}

/*.ja-box-right .ja-moduletable, .ja-box-right .moduletable,*/
.ja-box-full .ja-moduletable, .ja-box-full .moduletable { border: 0 !important; background: 0 !important; }

.ja-box-left .ja-moduletable, .ja-box-left .moduletable{
margin-left: 0px !important;
}
.ja-box-right .ja-moduletable, .ja-box-right .moduletable{
margin-right: 0px !important;
}

/* FOOTER
--------------------------------------------------------- */
#ja-footer {
clear: both;
padding: 0px;
}

#ja-footer .main {
background: url(../images/footerBackground.png) left top repeat-x #323232;
color: #fff;
padding: 0px;
position: relative;
}
#ja-footer .main .inFooter{
padding: 16px 12px;
border: 1px solid #282828;
position: relative;
min-height: 18px;
margin-bottom: 10px;
}
#ja-footer .inner { float: right; padding: 0; width: 75%; }

#ja-footer small { color: #fff; font-size: 100%; }

/* Foot Links ---*/
#ja-footer .ja-footnav {
float: right;
font-size: 100%;
margin: 0 0 10px;
overflow: hidden;
position: relative;
width: 75%;
}

.ja-footnav ul { float: left; line-height: normal; }

.ja-footnav li {
border-left: 1px solid #999;
display: block;
float: left;
padding: 0 10px;
}

.ja-footnav li a {
color: #fff;
display: block;
font-weight: bold;
line-height: 1;
text-decoration: none;
text-transform: uppercase;
}
.ja-copyright a{
color: #fff;
}
.ja-footnav li a:hover, .ja-footnav li a:active, .ja-footnav li a:focus, .ja-copyright a:hover { 
color: #ccc; 
text-decoration: none; 
}

.ja-footnav .ja-firstitem { border-left: 0; padding-left: 0; }

.ca-footerleft
{
position: absolute;
left: 10px;
top: 10px;
width: 187px;
}
.ca-footerleft a{
background: url(../images/caLogo.png) left top no-repeat;
display: block;
width: 187px;
height: 35px;
text-indent: -10000px;
}
.ca-footerleft a:hover{
background: url(../images/caLogo.png) left -38px no-repeat;
}
.ca-footermiddle
{
text-align:center;
margin: 0px auto;
padding: 0px 210px 0px 210px;
overflow: hidden;
}
.ca-footerright
{
position: absolute;
right: 10px;
top: 10px;
width: 187px;
}
.ca-footerright a{
background: url(../images/t3.png) left top no-repeat;
display: block;
width: 187px;
height: 37px;
text-indent: -10000px;
}
.ca-footerright a:hover{
background: url(../images/t3.png) left -38px no-repeat;
}
.ca-footerleft p , .ca-footermiddle p , .ca-footerright p
{
color:#A8A8A8;
display:inline;
font-family:arial;
font-weight:bold;
margin-top:5px;
}
.ca-footerright p{
margin-top: 0px;
}
.ca-footerleft p , .ca-footerright p
{	float:left;	}
.ca-copyright , .ca-copyright a , .ca-footermiddle p 
{
color:#FFF;
text-decoration:none;
}


/* Copyright Info. ---*/
.ja-copyright small { display: block; }

/* MISCELLANOUS
----------------------------------------------------------- */
/* User Tools ---*/
div#usertoolWrapper
{ 
background-position: 0px 29px;
background-repeat: no-repeat;
float: right;
overflow: hidden;
padding: 32px 15px 12px 15px;
width: 55px;
}
ul.ja-usertools-font {
font-size: 11px;
float: left;
}

ul.ja-usertools-font li, ul.ja-usertools-screen li {
padding: 0;
margin: 0px 3px 0px 0px;
display: inline; 
background: none;
}

ul.ja-usertools-screen  {
font-size: 11px;
float:left;
margin-right:15px;
margin-top:5px;

}
ul.ja-usertools-screen li
{ margin: 0 5px; }

/* Others ---*/
#ja-banner {
border-top: 1px solid #ccc;
margin: 0;
overflow: hidden;
padding-top: 15px;
text-align: center;
width: 100%;
}

div.ja-innerdiv {
border-bottom: 1px dotted #ccc;
clear: both;
margin-bottom: 10px;
padding-bottom: 12px;
}

div.ja-innerdiv h4 {
font-family: Arial, sans-serif;
font-size: 92%;
font-weight: normal;
margin: 5px 0;
padding: 0;
text-transform: uppercase;
}

.cufon-canvas { padding: 1px 0 3px; }

/* ROTATOR MODULE */
#ja-rotator div.ja-moduletable, #ja-rotator div.moduletable{
border: 0px;
padding: 0px;
margin: 0px 0px 12px 0px;
}

/* CATEGORY BLOG LAYOUT */
h1.componentheading
{
font-size:185% !important;
}
div.blog .contentheading 
{
font-size:160%;
font-weight:normal;
color:#646464;
}
div.blog .leading
{
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #D9D9D9;
margin-top:10px;
padding-bottom:10px;
padding-top:0;
}
div.blog .leading .contentpaneopen
{
background:url("../images/leadingBg.jpg") repeat-x scroll left top transparent;
margin:0 2px;
padding:10px 5px 0 10px;
}

.cols2 .article_column 
{
width:49%;
}

div.blog div.article_row 
{
margin-left:0;
}
div.blog div.article_row .column1
{
margin-right:5px;
}
div.blog div.cols2 .column1 {
margin-right: 2%;
}

div.blog div.article_row .article_column
{
background:none repeat scroll 0 0 #FFFFFF;
}
div.blog div.article_row .article_column .contentpaneopen
{
background:url("../images/leadingBg.jpg") repeat-x scroll left top transparent;
margin:0px;
padding:10px;
border:1px solid #D9D9D9;
}
div.blog div.article_row .createby {
display:block;
margin-top:5px;
}


/* CATEGORY TABLE LAYOUT */

table.tablelist 
{
border:1px solid #D9D9D9;
}
table.tablelist th.sectiontableheader 
{
background:none;
padding:5px 5px 2px;
border:none;
}
table.tablelist a
{
text-decoration:none;
}
table.tablelist tr /* .sectiontableheader */
{
background:url("../images/sectiontableheaderBg.jpg") repeat-x scroll left top #3f3d3e;
}
table.tablelist tr.sectiontableentry
{
background: #fff;
}
table.tablelist tr.sectiontableentry td{
background: none;
}
table.tablelist .sectiontableentry0
{
background:#f5f5f5 !important;
}
table.tablelist .sectiontableentry1
{
background:#FFF;
}
table.tablelist .sectiontableentry2
{
background:#f5f5f5;
}

table.tablelist #count , table.tablelist #tableOrdering , table.tablelist #author , table.tablelist #hits
{
background:url("../images/thSeparator.jpg") no-repeat scroll right top transparent;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
}
table.tablelist #count
{
border-left:1px solid #000000;
}
table.tablelist #tableOrdering
{

}
table.tablelist #author
{

}
table.tablelist #hits
{
background:none;
border-right:1px solid #000000;
}

table.tablelist td
{
border-bottom:1px solid #D9D9D9;
color:#585858;
}
table.tablelist td a
{
color:#1d94d0;
font-weight:bold;
font-size:1em;
}
table.tablelist td a:hover
{
color:#333;
}

/* Table Blog layout */

/* Table Blog */
ul.oddeven
{
border:1px solid #e3e3e3;
}
ul.oddeven li.odd , ul.oddeven li.even
{
border-bottom:1px solid #e3e3e3;
margin-bottom:0px !important;
padding-bottom:5px;
padding-top:5px;
background:url("../images/bullet.gif") no-repeat scroll 20px 15px transparent;
}
ul.oddeven li.odd
{
background-color:#f8f8f8;
}
ul.oddeven li.even
{
background-color:#f3f3f3;
}

/* 404 page */
.s404Wrapper
{
background:#eeeeee !important;
text-align:center !important;
}
#outline{
background: #eee;
}
#errorboxoutline{
border: 1px solid #c5c5c5;
}
#errorboxheader{
background: url(../images/404Gradient.jpg) left top repeat-x #38aae8;
text-shadow: 0px 1px 0px #000;
font-size: 14px;
line-height: 40px;
border-bottom: 0px;
margin: -1px -1px 0px -1px;
border: 1px solid #00ace4;
border-bottom: 0px;
}
#errorboxbody{
background: url(../images/404.jpg) 99% 14px no-repeat #fff;
}
#errorboxbody a{
color: #04a3d8;
font-weight: bold;
text-decoration: none;
}
#errorboxbody a:hover{
text-decoration: underline;
}
/* Login page fixes */
#ja-current-content  .login_form p{
padding-left:140px;
}
#ja-current-content  .login_form fieldset p{
padding-left:0;
}

 

τί αλλάζω;

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες
infestedGR Proficient

infestedGR

Δημοσ.
Δημοσ.

To template είναι της joomlart οπότε σε συμβουλεύω να πας: template manager -> cloudbase και να δεις αν αλλαζουν οι παράμετροι του πλάτους. Λογικά υποστηρίζεται μέσω του Ja-T3 Framework.

Καθαρά προγραμματιστικά, το div#ja-mainbody πρέπει να έχει πλάτος μικρότερο από 78% που έχει τώρα και το div#ja-right μεγαλύτερο από 22% που έχει τώρα. Ο λόγος που αποφεύγω να σου πω σε ποιο αρχείο γίνονται αυτές οι αλλαγές είναι γιατί στο template.css δεν υπάρχει οριοθέτηση του πλάτους του div, αλλά γίνεται "καρφωτά" μέσω του Τ3 Framework που ανέφερα παραπάνω.

 

Προσοχή! αν επιλέξεις να πειράξεις το width των divs τότε πρόσεξε να έχουν άθροισμα 100%

 

Ελπίζω να βοήθησα!

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες
A7X. Veteran

A7X.

Δημοσ.
  • Μέλος
Δημοσ.

Ευχαριστώ, θα κάνω τις δοκιμές μου αλλά δεν ξέρω καν τί είναι το Ja3-framework :/

 

Στο HTML Edit πάλι είναι έτσι μήπως αλλάζω κάτι εδώ;

 

>/*
#------------------------------------------------------------------------
 JA Purity II for Joomla 1.5
#------------------------------------------------------------------------
#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
#------------------------------------------------------------------------
*/


/* MAIN LAYOUT DIVS
--------------------------------------------------------- */
.wrap { width: 100%; clear: both; }
.main { width: 980px; margin: 0 auto; position: relative;}

.column { overflow: hidden; float: left; }

.ja-mass { clear: both; }

/* Gutter ---*/
.main .inner {
/* We use liquid layout, so we need to insert a div which will create margin if need */
padding-left: 10px;
padding-right: 10px;
padding-top: 6px;
padding-bottom: 5px; 
}

.column div.ja-moduletable, .column div.moduletable, .column div.ja-module, .column div.module { 
/* for side columns and spotlight, we only need to add margin or padding to Module */
margin-left: 10px;
margin-right: 10px;
margin-top:0;
border:1px solid #d9d9d9;
background:#FFFFFF;
}

#ja-left .column div.ja-moduletable{
/* margin-left: 0px; */
}

#ja-right .column div.ja-moduletable{
/* margin-right: 0px; */
}
.ja-l1r1 #ja-right .ja-r1 .column div.ja-moduletable , .ja-l1r1 #ja-right .ja-r1 .moduletable 
{
margin-right: 0px;
}
#ja-right2  .ja-moduletable , #ja-right2  .moduletable  
{
 margin-right: 0px;
}
#ja-right .ja-mass-top .ja-moduletable, #ja-right .ja-mass-top .moduletable
{
/* margin-left: 13px !important; */
   margin-right: 0 !important;
}
.ja-l1r2 .ja-right2 .ja-moduletable ,.ja-l1r2 .ja-right2 .moduletable,
.ja-l2r2 .ja-right2 .ja-moduletable ,.ja-l2r2 .ja-right2 .moduletable
{
margin-right:0px !important;
}
.ja-inset2 div.ja-moduletable, .ja-inset2 .div.moduletable, .ja-inset2 div.ja-module, .ja-inset2 div.module {
margin-right: 0;
margin-left: 20px;
}

.ja-inset1 div.ja-moduletable, .ja-inset1 .div.moduletable, .ja-inset1 div.ja-module, .ja-inset1 div.module {
margin-right: 20px;
margin-left: 0;
}

.article_column .contentpaneopen {
/* for article columns, we only need to add margin or padding to this div  */
padding-left: 10px;
padding-right: 10px;
}

.leading { }

.article_row {
/* minus the spacing of the article row to macth with the Gutter & global grid */
/*
margin-left: -10px;
margin-right: -10px; 
*/
}

/* MAIN COLUMN
--------------------------------------------------------- */
#ja-mainbody { float: left; }
#ja-current-content, #ja-main { float: right; }

/* SIDE COLUMNS
--------------------------------------------------------- */
.ja-colswrap {}
.ja-col {}

/* Left Column ---*/
#ja-left .ja-l2 .ja-left1, #ja-left .ja-l2 .ja-left2 { width: 50%; }
#ja-left .ja-l1 .ja-col { width: 100%; }

/* Right Column ---*/
#ja-right { float: right; }
#ja-right .ja-r2 .ja-right1, #ja-right .ja-r2 .ja-right2 { width: 50%; }
#ja-right .ja-r1 .ja-col { width: 100%; }

/* HEADER
--------------------------------------------------------- */
#ja-header {}

/* FOOTER
--------------------------------------------------------- */
#ja-footer { clear: both; }

/* CONTENT'S GRIDS
--------------------------------------------------------- */
.article_column { float: left; position: relative; }

.cols1 .article_column { width: 100%; }
.cols2 .article_column { width: 50%; }
.cols3 .article_column { width: 33.33%; }
.cols4 .article_column { width: 25%; }
.cols5 .article_column { width: 20%; }

/* SPOTLIGHT
--------------------------------------------------------- */
#ja-topsl {}
#ja-botsl {}

.ja-box { float: left; overflow: hidden; }

Συνδέστε για να σχολιάσετε
Κοινοποίηση σε άλλες σελίδες

Αρχειοθετημένο

Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.

Προς την λίστα θεμάτων
  • Δημιουργία νέου...