A bigger logo

Forums    Joomla Templates Club    JA Hedera    A bigger logo
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • beniaminqb Friend
    October 10, 2008 at 4:40 pm #134270

    Hei, guys, I need a little help with the hedera header background image ( header-bg.jpg ). Default it is 980 X 125 pixels. But I need it higher: 980 X 200, in order to fit my logo there. I made a new image, higher, and changed the image dimensions in template.css, but the image and the top menu just overlaped the slide module.

    any help?
    thanks in advance.

    wooohanetworks Friend
    October 10, 2008 at 10:17 pm #274676

    <em>@sabbens 85006 wrote:</em><blockquote>Hei, guys, I need a little help with the hedera header background image ( header-bg.jpg ). Default it is 980 X 125 pixels. But I need it higher: 980 X 200, in order to fit my logo there. I made a new image, higher, and changed the image dimensions in template.css, but the image and the top menu just overlaped the slide module.

    any help?
    thanks in advance.</blockquote>

    Can you show the template.css how it looks now, paste it inhere?

    beniaminqb Friend
    October 11, 2008 at 12:44 am #274690

    /*------------------------------------------------------------------------
    # $JA#PRODUCT_NAME$ - Version $JA#VERSION$ - Licence Owner $JA#OWNER$
    # ------------------------------------------------------------------------
    # Copyright (C) 2004-2008 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
    # This file may not be redistributed in whole or significant part.
    -------------------------------------------------------------------------*/

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

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

    body#bd {
    color: #666666;
    background: #E6E6E6;
    }

    body.contentpane {
    width: auto; /* Printable Page */
    margin: 1em 2em;
    background: #FFFFFF;
    color: #000000;
    font-size: 12pt;
    font-family: serif;
    line-height: 140%;
    }

    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: #3172B4;
    text-decoration: none;
    }

    a:hover, a:active, a:focus {
    color: #3172B4;
    text-decoration: underline;
    }

    /* Title text */
    .contentheading, .componentheading, .blog_more strong, h1, h2, h3 {
    font-family: "Segoe UI", "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
    font-weight: normal;
    }

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

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

    h2 {
    font-size: 155%;
    }

    h3 {
    font-size: 125%;
    font-weight: bold;
    }

    h4 {
    font-size: 100%;
    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: 33px;
    background: url(../images/arrow.png) no-repeat 18px 5px;
    line-height: 180%;
    }

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

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

    fieldset {
    border: none;
    }

    fieldset a {
    font-weight: bold;
    }

    hr {
    border-top: 1px solid #DDDDDD;
    border-right: 0;
    border-left: 0;
    border-bottom: 0;
    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: #666666;
    }

    .button {
    padding: 2px 5px;
    border: 1px solid #6E9DCD;
    color: #FFFFFF;
    background: url(../images/but-bg.gif) repeat-x center #6E9DCD;
    }

    * html .button, *+html .button {
    padding: 2px 3px !important;
    border: 1px solid #FFFFFF;
    }

    .inputbox {
    margin-bottom: 1px;
    padding: 3px 2px;
    border: 1px solid #DDDDDD;
    background: #FFFFFF;
    }

    .inputbox:hover, .inputbox:focus {
    }

    /* BONUS TYPOGRAPHY STYLES
    --------------------------------------------------------- */
    pre, .code {
    padding: 10px 15px;
    margin: 5px 0 15px;
    border-left: 5px solid #999999;
    background: #F0F5FB;
    }

    blockquote {
    padding: 1em 40px 1em 15px;
    }

    blockquote span.open {
    padding: 0 0 0 20px;
    background: url(../images/so-q.gif) no-repeat left top;
    }

    blockquote span.close {
    padding: 0 20px 0 0;
    background: url(../images/sc-q.gif) no-repeat bottom right;
    }

    /* Small quote */
    .small-quote {
    margin: 0;
    padding: 0;
    background: none;
    }

    .small-quote span.open-quote {
    margin: 0;
    padding-left: 20px;
    background: url(../images/so-q.gif) no-repeat center left;
    }

    .small-quote span.close-quote {
    margin: 0;
    padding-right: 20px;
    background: url(../images/sc-q.gif) no-repeat center right;
    }

    .small-quote span.author {
    padding: 2px 5px 2px 20px;
    border-top: 1px solid #DDDDDD;
    margin: 0.5em 0 0;
    display: block;
    background: url(../images/author.gif) no-repeat 5px 4px #DDDDDD;
    font-size: 90%;
    text-transform: uppercase;
    }

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

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

    .message {
    padding-left: 25px;
    color: #FF7705;
    background: url(../images/bullet-info.gif) no-repeat top left;
    }

    .tips {
    padding-left: 25px;
    color: #3172B4;
    background: url(../images/bullet-tips.gif) no-repeat top left;
    }

    .highlight {
    padding: 1px 5px;
    background: #F0F5FB;
    font-weight: bold;
    }

    /* Note Style */
    p.stickynote {
    padding: 10px 0px 10px 50px;
    border: 1px solid #DDDDDD;
    background: url(../images/sticky-bg.gif) no-repeat 5px 10px #FFFFFF;
    }

    p.download {
    padding: 10px 0px 10px 50px;
    border: 1px solid #DDDDDD;
    background: url(../images/download-bg.gif) no-repeat 5px 10px #FFFFFF;
    }

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

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

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

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

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

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

    ol.smallnumber li {
    margin: 10px 0 10px 30px;
    padding: 3px 0 5px 30px;
    line-height: 150%;
    }

    ol.smallnumber li.number-1 {
    background: url(../images/n-1.gif) no-repeat left top;
    }

    ol.smallnumber li.number-2 {
    background: url(../images/n-2.gif) no-repeat left top;
    }

    ol.smallnumber li.number-3 {
    background: url(../images/n-3.gif) no-repeat left top;
    }

    ol.smallnumber li.number-4 {
    background: url(../images/n-4.gif) no-repeat left top;
    }

    ol.smallnumber li.number-5 {
    background: url(../images/n-5.gif) no-repeat left top;
    }

    ol.smallnumber li.number-6 {
    background: url(../images/n-6.gif) no-repeat left top;
    }

    ol.smallnumber li.number-7 {
    background: url(../images/n-7.gif) no-repeat left top;
    }

    ol.smallnumber li.number-8 {
    background: url(../images/n-8.gif) no-repeat left top;
    }

    ol.smallnumber li.number-9 {
    background: url(../images/n-9.gif) no-repeat left top;
    }

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

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

    div.bubble1 span.author,
    div.bubble2 span.author,
    div.bubble3 span.author,
    div.bubble4 span.author {
    padding-left: 15px;
    margin-left: 15px;
    background: url(../images/author.gif) no-repeat center left;
    font-weight: bold;
    }

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

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

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

    div.bubble1 div div div div {
    background: url(../images/bub1-tl.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.gif) no-repeat bottom right;
    }

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

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

    div.bubble2 div div div div {
    background: url(../images/bub2-tl.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.gif) no-repeat bottom right;
    }

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

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

    div.bubble3 div div div div {
    background: url(../images/bub3-tl.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.gif) no-repeat bottom right;
    }

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

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

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

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

    /* Rating */
    .rating {
    width: 66px;
    float: left;
    margin: 10px 10px 0 0;
    background: url(../images/rating-bg.gif) no-repeat top left;
    height: 65px;
    }

    div.rate-1 {
    font-size: 11px;
    text-align: center;
    line-height: 20px;
    height: 20px;
    }

    div.rate-2 {
    color: #CC0000;
    font-size: 200%;
    font-weight: bold;
    text-align: center;
    }

    div.rate-3 {
    font-size: 11px;
    text-align: center;
    }

    /* JOOMLA STYLE
    --------------------------------------------------------- */
    table.blog {
    }

    .article_seperator {
    display: block;
    background: url(../images/sep.gif) no-repeat center bottom;
    height: 50px;
    }

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

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

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

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

    table.contenttoc a {
    }

    table.contenttoc td {
    padding: 3px 5px 3px 25px;
    background: url(../images/arrow.png) no-repeat 10px 7px;
    }

    table.contenttoc th {
    padding: 5px;
    background: url(../images/grad2.gif) repeat-x center #EFEFEF;
    text-indent: 5px;
    }

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

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

    table.pollstableborder .sectiontableheader {
    padding: 8px 5px !important;
    }

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

    table.pollstableborder td {
    padding: 2px!important;
    border-collapse: collapse;
    border-spacing: 0;
    }

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

    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: 10px 0;
    }

    .blog_more strong {
    margin: 0 0 5px;
    display: block;
    background: url(../images/h3-bg.gif) no-repeat center left;
    font-size: 150%;
    line-height: 30px;
    text-indent: 10px;
    }

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

    .blog_more ul li {
    margin: 0;
    padding: 0 0 0 24px;
    background: url(../images/arrow.png) no-repeat 10px 6px;
    }

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

    .category {
    font-weight: bold;
    }

    .clr {
    clear: both;
    }

    .componentheading {
    padding: 0 0 15px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #DDDDDD;
    font-size: 250%;
    }

    .contentdescription {
    padding-bottom: 30px;
    }

    table.blog .contentheading {
    font-size: 170%;
    }

    .contentheading {
    padding-bottom: 5px;
    font-size: 200%;
    }

    a.contentpagetitle,
    a.contentpagetitle:hover,
    a.contentpagetitle:active,
    a.contentpagetitle:focus {
    }

    a.readon {
    float: left;
    width: 120px;
    display: block;
    background: url(../images/readon.gif) no-repeat top left;
    font-size: 11px;
    line-height: 20px;
    text-indent: 27px;
    height: 20px;
    }

    a.readon:hover, a.readon:active, a.readon:focus {
    background: url(../images/readon.gif) no-repeat bottom left;
    color: #666666;
    text-decoration: none;
    }

    table.contentpaneopen td, table.contentpane td {
    }

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

    .createdate {
    padding: 2px;
    color: #999999;
    }

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

    .moduletable {
    padding: 0;
    }

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

    * html .mosimage {
    padding: 5px 0 !important; /*IE 6*/
    margin: 15px 10px 10px 0;
    }

    *+html .mosimage {
    padding: 5px 0 !important; /*IE 7*/
    }

    .mosimage img {
    padding: 0 !important;
    margin: 0 !important;
    }

    .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 {
    }

    a.pagenav:hover, a.pagenav:active, a.pagenav:focus,
    .pagenav_prev a:hover, .pagenav_prev a:active, .pagenav_prev a:focus,
    .pagenav_next a:hover, .pagenav_next a:active, .pagenav_next a:focus,
    .pagenavbar a:hover, .pagenavbar a:active, .pagenavbar a:focus {
    }

    .pagenavbar {
    padding-left: 14px;
    background: url(../images/pages.gif) no-repeat center left;
    }

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

    .sectiontableheader {
    padding: 7px 5px;
    border-top: 1px solid #EFEFEF;
    border-bottom: 1px solid #EFEFEF;
    background: url(../images/grad2.gif) repeat-x center #F7F7F7;
    font-weight: bold;
    }

    tr.sectiontableentry1 td {
    padding: 7px 5px;
    background: url(../images/dot.gif) repeat-x bottom;
    }

    tr.sectiontableentry2 td {
    padding: 7px 5px;
    background: url(../images/dot.gif) repeat-x bottom;
    }

    tr.sectiontableentry1:hover td,
    tr.sectiontableentry2:hover td {
    background: url(../images/dot.gif) repeat-x bottom #F0F5FB;
    }

    .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-header, ja-topslwrap, #ja-container, #ja-footer {
    width: 980px;
    margin: 0 auto;
    clear: both;
    }

    .narrow #ja-header, .narrow ja-topslwrap, .narrow #ja-container, .narrow #ja-footer {
    width: 770px;
    margin: 0 auto;
    clear: both;
    }

    #ja-containerwrap {
    }

    #ja-container {
    background: url(../images/grad1.gif) repeat-x top #FFFFFF;
    }

    div.shadow1 {
    padding-right: 20px;
    background: url(../images/shadow-right.gif) repeat-y top right;
    overflow: hidden;
    }

    div.shadow2 {
    padding-left: 20px;
    background: url(../images/shadow-left.gif) repeat-y top left;
    overflow: hidden;
    }

    #ja-mainbody, #ja-mainbody-fl {
    float: left;
    width: 78%;
    }

    #ja-mainbody #ja-contentwrap {
    float: left;
    width: 69.9%;
    }

    #ja-mainbody-fr {
    float: left;
    width: 100%;
    }

    #ja-mainbody-fr #ja-contentwrap {
    float: left;
    width: 75%;
    background: none;
    }

    #ja-mainbody-fr #ja-col1 {
    float: right;
    width: 24%;
    }

    #ja-mainbody-f {
    float: none;
    width: 100%;
    }

    #ja-content {
    padding: 25px 10px 10px 20px;
    margin: 0;
    clear: both;
    display: block;
    }

    #ja-mainbody-f #ja-content, #ja-mainbody-fl #ja-content {
    padding: 25px 20px 10px;
    }

    /* HEADER
    --------------------------------------------------------- */
    #ja-headerwrap {
    background: #999999;
    line-height: normal;
    height: 110px;
    }

    #ja-header {
    background: url(../images/header-bg.jpg) no-repeat #3172B4;
    height: 110px;
    position: relative;
    z-index: 10;
    }

    .narrow #ja-header {
    background: url(../images/header-narrow-bg.jpg) no-repeat #3172B4;
    }

    h1.logo {
    margin: 0;
    padding: 0;
    width: 262px;
    font-size: 300%;
    position: absolute;
    top: 0;
    left: 30px;
    height: 60px;
    }

    h1.logo a {
    width: 262px;
    float: left;
    display: block;
    background: url(../images/logo.png) no-repeat;
    text-transform: uppercase;
    text-indent: -5000px;
    height: 80px;
    outline: none;
    }

    #ja-pathway {
    padding: 0 3px 5px;
    display: block;
    color: #999999;
    }

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

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

    /* MAIN NAVIGATION
    --------------------------------------------------------- */
    #ja-mainnav {
    position: absolute;
    bottom: 0;
    left: 30px;
    }

    #ja-mainnav a,
    #ja-mainnav a:hover,
    #ja-mainnav a:active,
    #ja-mainnav a:focus,
    #ja-subnav a,
    #ja-subnav a:hover,
    #ja-subnav a:active,
    #ja-subnav a:focus {
    font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
    outline: none;
    }

    /* Default Joomla! Menu */
    ul.menu li{
    background: none!important;
    }

    ul.menu a {
    padding: 5px 0 5px 18px;
    width: 90%;
    border-top: 1px solid #EFEFEF;
    display: block;
    color: #666666;
    background: url(../images/arrow.png) no-repeat 3px 9px;
    }

    ul.menu a:hover,
    ul.menu a:active,
    ul.menu a:focus {
    color: #3172B4;
    background: url(../images/arrow2.png) no-repeat 3px 9px;
    text-decoration: none;
    }

    ul.menu a#active_menu {
    color: #666666;
    background: url(../images/arrow2.png) no-repeat 3px 9px #EFEFEF;
    font-weight: bold;
    }

    li.parent a {
    padding: 5px 4px 5px 15px;
    display: block;
    }

    li.parent a:hover,
    li.parent a:active,
    li.parent a:focus {
    }

    li.active a{
    color: #3172B4;
    font-weight: bold;
    }
    li.active li a {
    font-weight: normal;
    }

    /* Default Joomla! Menu */
    a.mainlevel {
    padding: 5px 0 5px 18px;
    width: 90%;
    border-top: 1px solid #EFEFEF;
    display: block;
    color: #666666;
    background: url(../images/arrow.png) no-repeat 3px 9px;
    }

    a.mainlevel:hover,
    a.mainlevel:active,
    a.mainlevel:focus {
    color: #3172B4;
    background: url(../images/arrow2.png) no-repeat 3px 9px;
    text-decoration: none;
    }

    a.mainlevel#active_menu {
    color: #666666;
    background: url(../images/arrow2.png) no-repeat 3px 9px #EFEFEF;
    font-weight: bold;
    }

    a.sublevel {
    padding: 5px 4px 5px 15px;
    display: block;
    }

    a.sublevel:hover,
    a.sublevel:active,
    a.sublevel:focus {
    }

    #active_menu {
    color: #3172B4;
    font-weight: bold;
    }

    /* MODULE
    --------------------------------------------------------- */
    div.moduletable_menu h3,
    div.moduletable h3 {
    padding: 0 2px 10px;
    margin: 0 -2px 10px;
    font-size: 100%;
    font-weight: bold;
    }

    div.moduletable_menu,
    div.moduletable {
    padding: 0 10px 10px;
    margin-bottom: 30px;
    }

    #ja-col1 div.moduletable_menu,
    #ja-col1 div.moduletable {
    padding: 0 25px;
    margin-bottom: 10px;
    }

    #ja-col1 div.moduletable_menu h3,
    #ja-col1 div.moduletable h3 {
    margin: 0 -12px 10px;
    padding: 7px 15px;
    border-top: 1px solid #EFEFEF;
    border-bottom: 1px solid #EFEFEF;
    background: url(../images/grad2.gif) repeat-x center #F7F7F7;
    font-size: 125%;
    }

    .narrow #ja-col1 div.moduletable_menu h3,
    .narrow #ja-col1 div.moduletable h3 {
    margin: 0 -14px 10px;
    }

    #ja-col2 div.moduletable_menu,
    #ja-col2 div.moduletable {
    padding-right: 0;
    margin-bottom: 15px;
    }

    #ja-col2 div.moduletable_menu h3,
    #ja-col2 div.moduletable h3 {
    margin: 0 -10px 10px;
    padding: 0 10px;
    background: url(../images/h3-bg.gif) repeat-y center left;
    font-size: 125%;
    line-height: 30px;
    }

    /* 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;
    }

    /* Bottom Spotlight */
    #ja-botsl {
    width: 100%;
    clear: both;
    margin-top: 15px;
    border-top: 2px solid #EFEFEF;
    background: url(../images/grad5.gif) repeat-x top;
    }

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

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

    #ja-botsl h3 {
    margin: 0 0 5px;
    padding: 3px 0;
    font-size: 125%;
    }

    #ja-botsl ul {
    margin: 0;
    padding: 0;
    }

    #ja-botsl li {
    padding-left: 17px;
    margin: 0;
    background: url(../images/arrow.png) no-repeat 2px 6px;
    }

    #ja-botsl td {
    padding: 0;
    }

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

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

    /* LEFT COLUMN + RIGHT COLUMN
    --------------------------------------------------------- */
    #ja-col1 {
    float: left;
    width: 30%;
    padding: 0;
    background: url(../images/col1-center-bg.gif) repeat-y center bottom;
    overflow: hidden;
    }

    .narrow #ja-col1 {
    background: url(../images/col1-center-narrow-bg.gif) repeat-y center bottom;

    }

    #ja-col1 div.shadow1 {
    padding: 0;
    background: url(../images/col1-bot-bg.gif) no-repeat center bottom;
    }

    .narrow #ja-col1 div.shadow1 {
    background: url(../images/col1-bot-narrow-bg.gif) no-repeat center bottom;
    }

    #ja-col1 div.shadow2 {
    padding: 0;
    background: url(../images/col1-top-bg.gif) no-repeat center top;
    }

    .narrow #ja-col1 div.shadow2 {
    background: url(../images/col1-top-narrow-bg.gif) no-repeat center top;
    }

    #ja-col1 div.ja-innerpad {
    padding: 25px 0 10px;
    }

    #ja-mainbody-fr #ja-col1 div.ja-innerpad {
    padding: 25px 3px 10px;
    }

    #ja-col2 {
    float: right;
    width: 22%;
    overflow: hidden;
    }

    #ja-col2 div.ja-innerpad {
    padding: 25px 20px 10px 0;
    }

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

    #ja-col1 ul li,
    #ja-col2 ul li {
    padding-left: 15px;
    margin: 0;
    background: url(../images/arrow.png) no-repeat 3px 9px;
    }

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

    /* USER TOOLS
    --------------------------------------------------------- */
    #ja-usercolorswrap {
    font-size: 11px;
    position: absolute;
    top: 20px;
    right: 15px;
    }

    #ja-usertoolswrap {
    font-size: 11px;
    position: absolute;
    top: 28px;
    right: 230px;
    }

    #ja-usertools {
    margin: 0;
    padding: 10px 0 4px 0;
    float: left;
    }

    #ja-usercolors ul,
    #ja-usertools ul {
    margin: 0;
    padding: 0 0 0 10px;
    float: left;
    }

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

    #ja-usercolors img,
    #ja-usertools img {
    padding: 0;
    margin: 0;
    }

    #ja-usercolors {
    float: left;
    padding: 10px 5px 4px;
    }

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

    #ja-footer {
    color: #AAAAAA;
    background: url(../images/footer-bg.gif) repeat-x top #666666;
    position: relative;
    }

    #ja-footer div.shadow2 {
    padding: 30px 0 25px 20px;
    }

    #ja-footer h1.logo {
    margin: 0;
    padding: 0;
    width: 175px;
    font-size: 200%;
    position: absolute;
    top: 0;
    left: 30px;
    height: 69px;
    }

    #ja-footer h1.logo a {
    width: 175px;
    float: left;
    display: block;
    background: url(../images/logo-footer.gif) no-repeat;
    text-transform: uppercase;
    text-indent: -5000px;
    height: 69px;
    outline: none;
    }

    #ja-footer small, #ja-footer address,
    #ja-footer div.powerby {
    padding: 0 0 0 200px;
    float: left;
    display: block;
    color: #AAAAAA;
    font-style: normal;
    }

    #ja-footer a {
    color: #E6E6E6;
    }

    #ja-footer a:hover, #ja-footer a:active, #ja-footer a:focus {
    color: #FFFFFF;
    }

    #ja-footer ul {
    margin: 0 0 5px 200px;
    padding: 0;
    }

    #ja-footer li {
    margin: 0;
    padding: 0;
    display: inline;
    background: none;
    }

    #ja-footer li a {
    padding: 0 20px 0 0;
    display: inline;
    font-weight: bold;
    line-height: normal;
    }

    /* Search */
    #ja-search {
    width: 162px;
    background: url(../images/search-bg.gif) no-repeat;
    position: absolute;
    bottom: 45px;
    right: 50px;
    height: 29px;
    }

    #ja-search .inputbox {
    width: 130px;
    padding: 3px 5px 0;
    border: none;
    margin-left: 2px;
    color: #3172B4;
    background: #FFFFFF;
    }

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

    #ja-banner {
    text-align: center;
    }

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

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

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

    #form-login-username, #form-login-password {
    padding: 0;
    margin: 0;
    }

    /* 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 News 1.1.3 - 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
    -------------------------------------------------------------------------*/

    .ja-newsblock {
    margin: 0;
    display: block;
    padding: 8px 0;
    }

    .ja-newsitem,
    .ja-newsitem-left,
    .ja-newsitem-right,
    .ja-newsitem-center {
    float: left;
    padding: 0;
    text-align: center;
    }

    .ja-newsitem-left,
    .ja-newsitem-center {
    background: url(v-seperator.gif) repeat-y top right;
    }

    .ja-newsitem-left div.ja-newsitem-inner,
    .ja-newsitem-center div.ja-newsitem-inner,
    .ja-newsitem-right div.ja-newsitem-inner,
    .ja-newsitem div.ja-newsitem-inner {
    text-align: left;
    float: left;
    }

    .ja-newsitem-center div.ja-newsitem-inner {
    float: none;
    margin: 0 auto;
    }

    .ja-newsitem-right div.ja-newsitem-inner {
    float: right;
    }

    .ja-newscat {
    color: #333333;
    display: block;
    font-weight: bold;
    font-size: 100%;
    text-decoration: none;
    margin: 0 0 10px;
    position: relative;
    background: url(ci-right.gif) no-repeat top right;
    text-transform: uppercase;
    height: 32px;
    line-height: 32px;
    }

    .ja-newscat:hover, .ja-newscat:active, .ja-newscat:focus {
    text-decoration: none;
    outline: none;
    }

    .ja-newscat span {
    display: block;
    font-weight: bold;
    padding: 0 5px 0 30px;
    background: url(ci-left.gif) no-repeat top left;
    color: #403C3A;
    height: 32px;
    line-height: 34px;
    }

    .ja-newstitle {
    display: block;
    font-size: 100%;
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 2px;
    }

    .ja-newscontent {
    padding: 0;
    }

    .ja-newscontent img {
    margin: 5px 10px 10px 0;
    padding: 0;
    }

    .ja-newscontent p {
    margin: 5px 0;
    }

    wooohanetworks Friend
    October 11, 2008 at 1:58 am #274694

    <em>@sabbens 85082 wrote:</em><blockquote>
    /*------------------------------------------------------------------------
    # $JA#PRODUCT_NAME$ - Version $JA#VERSION$ - Licence Owner $JA#OWNER$
    # ------------------------------------------------------------------------
    # Copyright (C) 2004-2008 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
    # This file may not be redistributed in whole or significant part.
    -------------------------------------------------------------------------*/

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

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

    body#bd {
    color: #666666;
    background: #E6E6E6;
    }

    body.contentpane {
    width: auto; /* Printable Page */
    margin: 1em 2em;
    background: #FFFFFF;
    color: #000000;
    font-size: 12pt;
    font-family: serif;
    line-height: 140%;
    }

    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: #3172B4;
    text-decoration: none;
    }

    a:hover, a:active, a:focus {
    color: #3172B4;
    text-decoration: underline;
    }

    /* Title text */
    .contentheading, .componentheading, .blog_more strong, h1, h2, h3 {
    font-family: "Segoe UI", "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
    font-weight: normal;
    }

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

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

    h2 {
    font-size: 155%;
    }

    h3 {
    font-size: 125%;
    font-weight: bold;
    }

    h4 {
    font-size: 100%;
    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: 33px;
    background: url(../images/arrow.png) no-repeat 18px 5px;
    line-height: 180%;
    }

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

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

    fieldset {
    border: none;
    }

    fieldset a {
    font-weight: bold;
    }

    hr {
    border-top: 1px solid #DDDDDD;
    border-right: 0;
    border-left: 0;
    border-bottom: 0;
    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: #666666;
    }

    .button {
    padding: 2px 5px;
    border: 1px solid #6E9DCD;
    color: #FFFFFF;
    background: url(../images/but-bg.gif) repeat-x center #6E9DCD;
    }

    * html .button, *+html .button {
    padding: 2px 3px !important;
    border: 1px solid #FFFFFF;
    }

    .inputbox {
    margin-bottom: 1px;
    padding: 3px 2px;
    border: 1px solid #DDDDDD;
    background: #FFFFFF;
    }

    .inputbox:hover, .inputbox:focus {
    }

    /* BONUS TYPOGRAPHY STYLES
    --------------------------------------------------------- */
    pre, .code {
    padding: 10px 15px;
    margin: 5px 0 15px;
    border-left: 5px solid #999999;
    background: #F0F5FB;
    }

    blockquote {
    padding: 1em 40px 1em 15px;
    }

    blockquote span.open {
    padding: 0 0 0 20px;
    background: url(../images/so-q.gif) no-repeat left top;
    }

    blockquote span.close {
    padding: 0 20px 0 0;
    background: url(../images/sc-q.gif) no-repeat bottom right;
    }

    /* Small quote */
    .small-quote {
    margin: 0;
    padding: 0;
    background: none;
    }

    .small-quote span.open-quote {
    margin: 0;
    padding-left: 20px;
    background: url(../images/so-q.gif) no-repeat center left;
    }

    .small-quote span.close-quote {
    margin: 0;
    padding-right: 20px;
    background: url(../images/sc-q.gif) no-repeat center right;
    }

    .small-quote span.author {
    padding: 2px 5px 2px 20px;
    border-top: 1px solid #DDDDDD;
    margin: 0.5em 0 0;
    display: block;
    background: url(../images/author.gif) no-repeat 5px 4px #DDDDDD;
    font-size: 90%;
    text-transform: uppercase;
    }

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

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

    .message {
    padding-left: 25px;
    color: #FF7705;
    background: url(../images/bullet-info.gif) no-repeat top left;
    }

    .tips {
    padding-left: 25px;
    color: #3172B4;
    background: url(../images/bullet-tips.gif) no-repeat top left;
    }

    .highlight {
    padding: 1px 5px;
    background: #F0F5FB;
    font-weight: bold;
    }

    /* Note Style */
    p.stickynote {
    padding: 10px 0px 10px 50px;
    border: 1px solid #DDDDDD;
    background: url(../images/sticky-bg.gif) no-repeat 5px 10px #FFFFFF;
    }

    p.download {
    padding: 10px 0px 10px 50px;
    border: 1px solid #DDDDDD;
    background: url(../images/download-bg.gif) no-repeat 5px 10px #FFFFFF;
    }

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

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

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

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

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

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

    ol.smallnumber li {
    margin: 10px 0 10px 30px;
    padding: 3px 0 5px 30px;
    line-height: 150%;
    }

    ol.smallnumber li.number-1 {
    background: url(../images/n-1.gif) no-repeat left top;
    }

    ol.smallnumber li.number-2 {
    background: url(../images/n-2.gif) no-repeat left top;
    }

    ol.smallnumber li.number-3 {
    background: url(../images/n-3.gif) no-repeat left top;
    }

    ol.smallnumber li.number-4 {
    background: url(../images/n-4.gif) no-repeat left top;
    }

    ol.smallnumber li.number-5 {
    background: url(../images/n-5.gif) no-repeat left top;
    }

    ol.smallnumber li.number-6 {
    background: url(../images/n-6.gif) no-repeat left top;
    }

    ol.smallnumber li.number-7 {
    background: url(../images/n-7.gif) no-repeat left top;
    }

    ol.smallnumber li.number-8 {
    background: url(../images/n-8.gif) no-repeat left top;
    }

    ol.smallnumber li.number-9 {
    background: url(../images/n-9.gif) no-repeat left top;
    }

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

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

    div.bubble1 span.author,
    div.bubble2 span.author,
    div.bubble3 span.author,
    div.bubble4 span.author {
    padding-left: 15px;
    margin-left: 15px;
    background: url(../images/author.gif) no-repeat center left;
    font-weight: bold;
    }

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

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

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

    div.bubble1 div div div div {
    background: url(../images/bub1-tl.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.gif) no-repeat bottom right;
    }

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

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

    div.bubble2 div div div div {
    background: url(../images/bub2-tl.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.gif) no-repeat bottom right;
    }

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

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

    div.bubble3 div div div div {
    background: url(../images/bub3-tl.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.gif) no-repeat bottom right;
    }

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

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

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

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

    /* Rating */
    .rating {
    width: 66px;
    float: left;
    margin: 10px 10px 0 0;
    background: url(../images/rating-bg.gif) no-repeat top left;
    height: 65px;
    }

    div.rate-1 {
    font-size: 11px;
    text-align: center;
    line-height: 20px;
    height: 20px;
    }

    div.rate-2 {
    color: #CC0000;
    font-size: 200%;
    font-weight: bold;
    text-align: center;
    }

    div.rate-3 {
    font-size: 11px;
    text-align: center;
    }

    /* JOOMLA STYLE
    --------------------------------------------------------- */
    table.blog {
    }

    .article_seperator {
    display: block;
    background: url(../images/sep.gif) no-repeat center bottom;
    height: 50px;
    }

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

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

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

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

    table.contenttoc a {
    }

    table.contenttoc td {
    padding: 3px 5px 3px 25px;
    background: url(../images/arrow.png) no-repeat 10px 7px;
    }

    table.contenttoc th {
    padding: 5px;
    background: url(../images/grad2.gif) repeat-x center #EFEFEF;
    text-indent: 5px;
    }

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

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

    table.pollstableborder .sectiontableheader {
    padding: 8px 5px !important;
    }

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

    table.pollstableborder td {
    padding: 2px!important;
    border-collapse: collapse;
    border-spacing: 0;
    }

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

    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: 10px 0;
    }

    .blog_more strong {
    margin: 0 0 5px;
    display: block;
    background: url(../images/h3-bg.gif) no-repeat center left;
    font-size: 150%;
    line-height: 30px;
    text-indent: 10px;
    }

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

    .blog_more ul li {
    margin: 0;
    padding: 0 0 0 24px;
    background: url(../images/arrow.png) no-repeat 10px 6px;
    }

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

    .category {
    font-weight: bold;
    }

    .clr {
    clear: both;
    }

    .componentheading {
    padding: 0 0 15px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #DDDDDD;
    font-size: 250%;
    }

    .contentdescription {
    padding-bottom: 30px;
    }

    table.blog .contentheading {
    font-size: 170%;
    }

    .contentheading {
    padding-bottom: 5px;
    font-size: 200%;
    }

    a.contentpagetitle,
    a.contentpagetitle:hover,
    a.contentpagetitle:active,
    a.contentpagetitle:focus {
    }

    a.readon {
    float: left;
    width: 120px;
    display: block;
    background: url(../images/readon.gif) no-repeat top left;
    font-size: 11px;
    line-height: 20px;
    text-indent: 27px;
    height: 20px;
    }

    a.readon:hover, a.readon:active, a.readon:focus {
    background: url(../images/readon.gif) no-repeat bottom left;
    color: #666666;
    text-decoration: none;
    }

    table.contentpaneopen td, table.contentpane td {
    }

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

    .createdate {
    padding: 2px;
    color: #999999;
    }

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

    .moduletable {
    padding: 0;
    }

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

    * html .mosimage {
    padding: 5px 0 !important; /*IE 6*/
    margin: 15px 10px 10px 0;
    }

    *+html .mosimage {
    padding: 5px 0 !important; /*IE 7*/
    }

    .mosimage img {
    padding: 0 !important;
    margin: 0 !important;
    }

    .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 {
    }

    a.pagenav:hover, a.pagenav:active, a.pagenav:focus,
    .pagenav_prev a:hover, .pagenav_prev a:active, .pagenav_prev a:focus,
    .pagenav_next a:hover, .pagenav_next a:active, .pagenav_next a:focus,
    .pagenavbar a:hover, .pagenavbar a:active, .pagenavbar a:focus {
    }

    .pagenavbar {
    padding-left: 14px;
    background: url(../images/pages.gif) no-repeat center left;
    }

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

    .sectiontableheader {
    padding: 7px 5px;
    border-top: 1px solid #EFEFEF;
    border-bottom: 1px solid #EFEFEF;
    background: url(../images/grad2.gif) repeat-x center #F7F7F7;
    font-weight: bold;
    }

    tr.sectiontableentry1 td {
    padding: 7px 5px;
    background: url(../images/dot.gif) repeat-x bottom;
    }

    tr.sectiontableentry2 td {
    padding: 7px 5px;
    background: url(../images/dot.gif) repeat-x bottom;
    }

    tr.sectiontableentry1:hover td,
    tr.sectiontableentry2:hover td {
    background: url(../images/dot.gif) repeat-x bottom #F0F5FB;
    }

    .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-header, ja-topslwrap, #ja-container, #ja-footer {
    width: 980px;
    margin: 0 auto;
    clear: both;
    }

    .narrow #ja-header, .narrow ja-topslwrap, .narrow #ja-container, .narrow #ja-footer {
    width: 770px;
    margin: 0 auto;
    clear: both;
    }

    #ja-containerwrap {
    }

    #ja-container {
    background: url(../images/grad1.gif) repeat-x top #FFFFFF;
    }

    div.shadow1 {
    padding-right: 20px;
    background: url(../images/shadow-right.gif) repeat-y top right;
    overflow: hidden;
    }

    div.shadow2 {
    padding-left: 20px;
    background: url(../images/shadow-left.gif) repeat-y top left;
    overflow: hidden;
    }

    #ja-mainbody, #ja-mainbody-fl {
    float: left;
    width: 78%;
    }

    #ja-mainbody #ja-contentwrap {
    float: left;
    width: 69.9%;
    }

    #ja-mainbody-fr {
    float: left;
    width: 100%;
    }

    #ja-mainbody-fr #ja-contentwrap {
    float: left;
    width: 75%;
    background: none;
    }

    #ja-mainbody-fr #ja-col1 {
    float: right;
    width: 24%;
    }

    #ja-mainbody-f {
    float: none;
    width: 100%;
    }

    #ja-content {
    padding: 25px 10px 10px 20px;
    margin: 0;
    clear: both;
    display: block;
    }

    #ja-mainbody-f #ja-content, #ja-mainbody-fl #ja-content {
    padding: 25px 20px 10px;
    }

    /* HEADER
    --------------------------------------------------------- */
    #ja-headerwrap {
    background: #999999;
    line-height: normal;
    height: 110px;
    }

    #ja-header {
    background: url(../images/header-bg.jpg) no-repeat #3172B4;
    height: 110px;
    position: relative;
    z-index: 10;
    }

    .narrow #ja-header {
    background: url(../images/header-narrow-bg.jpg) no-repeat #3172B4;
    }

    h1.logo {
    margin: 0;
    padding: 0;
    width: 262px;
    font-size: 300%;
    position: absolute;
    top: 0;
    left: 30px;
    height: 60px;
    }

    h1.logo a {
    width: 262px;
    float: left;
    display: block;
    background: url(../images/logo.png) no-repeat;
    text-transform: uppercase;
    text-indent: -5000px;
    height: 80px;
    outline: none;
    }

    #ja-pathway {
    padding: 0 3px 5px;
    display: block;
    color: #999999;
    }

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

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

    /* MAIN NAVIGATION
    --------------------------------------------------------- */
    #ja-mainnav {
    position: absolute;
    bottom: 0;
    left: 30px;
    }

    #ja-mainnav a,
    #ja-mainnav a:hover,
    #ja-mainnav a:active,
    #ja-mainnav a:focus,
    #ja-subnav a,
    #ja-subnav a:hover,
    #ja-subnav a:active,
    #ja-subnav a:focus {
    font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
    outline: none;
    }

    /* Default Joomla! Menu */
    ul.menu li{
    background: none!important;
    }

    ul.menu a {
    padding: 5px 0 5px 18px;
    width: 90%;
    border-top: 1px solid #EFEFEF;
    display: block;
    color: #666666;
    background: url(../images/arrow.png) no-repeat 3px 9px;
    }

    ul.menu a:hover,
    ul.menu a:active,
    ul.menu a:focus {
    color: #3172B4;
    background: url(../images/arrow2.png) no-repeat 3px 9px;
    text-decoration: none;
    }

    ul.menu a#active_menu {
    color: #666666;
    background: url(../images/arrow2.png) no-repeat 3px 9px #EFEFEF;
    font-weight: bold;
    }

    li.parent a {
    padding: 5px 4px 5px 15px;
    display: block;
    }

    li.parent a:hover,
    li.parent a:active,
    li.parent a:focus {
    }

    li.active a{
    color: #3172B4;
    font-weight: bold;
    }
    li.active li a {
    font-weight: normal;
    }

    /* Default Joomla! Menu */
    a.mainlevel {
    padding: 5px 0 5px 18px;
    width: 90%;
    border-top: 1px solid #EFEFEF;
    display: block;
    color: #666666;
    background: url(../images/arrow.png) no-repeat 3px 9px;
    }

    a.mainlevel:hover,
    a.mainlevel:active,
    a.mainlevel:focus {
    color: #3172B4;
    background: url(../images/arrow2.png) no-repeat 3px 9px;
    text-decoration: none;
    }

    a.mainlevel#active_menu {
    color: #666666;
    background: url(../images/arrow2.png) no-repeat 3px 9px #EFEFEF;
    font-weight: bold;
    }

    a.sublevel {
    padding: 5px 4px 5px 15px;
    display: block;
    }

    a.sublevel:hover,
    a.sublevel:active,
    a.sublevel:focus {
    }

    #active_menu {
    color: #3172B4;
    font-weight: bold;
    }

    /* MODULE
    --------------------------------------------------------- */
    div.moduletable_menu h3,
    div.moduletable h3 {
    padding: 0 2px 10px;
    margin: 0 -2px 10px;
    font-size: 100%;
    font-weight: bold;
    }

    div.moduletable_menu,
    div.moduletable {
    padding: 0 10px 10px;
    margin-bottom: 30px;
    }

    #ja-col1 div.moduletable_menu,
    #ja-col1 div.moduletable {
    padding: 0 25px;
    margin-bottom: 10px;
    }

    #ja-col1 div.moduletable_menu h3,
    #ja-col1 div.moduletable h3 {
    margin: 0 -12px 10px;
    padding: 7px 15px;
    border-top: 1px solid #EFEFEF;
    border-bottom: 1px solid #EFEFEF;
    background: url(../images/grad2.gif) repeat-x center #F7F7F7;
    font-size: 125%;
    }

    .narrow #ja-col1 div.moduletable_menu h3,
    .narrow #ja-col1 div.moduletable h3 {
    margin: 0 -14px 10px;
    }

    #ja-col2 div.moduletable_menu,
    #ja-col2 div.moduletable {
    padding-right: 0;
    margin-bottom: 15px;
    }

    #ja-col2 div.moduletable_menu h3,
    #ja-col2 div.moduletable h3 {
    margin: 0 -10px 10px;
    padding: 0 10px;
    background: url(../images/h3-bg.gif) repeat-y center left;
    font-size: 125%;
    line-height: 30px;
    }

    /* 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;
    }

    /* Bottom Spotlight */
    #ja-botsl {
    width: 100%;
    clear: both;
    margin-top: 15px;
    border-top: 2px solid #EFEFEF;
    background: url(../images/grad5.gif) repeat-x top;
    }

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

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

    #ja-botsl h3 {
    margin: 0 0 5px;
    padding: 3px 0;
    font-size: 125%;
    }

    #ja-botsl ul {
    margin: 0;
    padding: 0;
    }

    #ja-botsl li {
    padding-left: 17px;
    margin: 0;
    background: url(../images/arrow.png) no-repeat 2px 6px;
    }

    #ja-botsl td {
    padding: 0;
    }

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

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

    /* LEFT COLUMN + RIGHT COLUMN
    --------------------------------------------------------- */
    #ja-col1 {
    float: left;
    width: 30%;
    padding: 0;
    background: url(../images/col1-center-bg.gif) repeat-y center bottom;
    overflow: hidden;
    }

    .narrow #ja-col1 {
    background: url(../images/col1-center-narrow-bg.gif) repeat-y center bottom;

    }

    #ja-col1 div.shadow1 {
    padding: 0;
    background: url(../images/col1-bot-bg.gif) no-repeat center bottom;
    }

    .narrow #ja-col1 div.shadow1 {
    background: url(../images/col1-bot-narrow-bg.gif) no-repeat center bottom;
    }

    #ja-col1 div.shadow2 {
    padding: 0;
    background: url(../images/col1-top-bg.gif) no-repeat center top;
    }

    .narrow #ja-col1 div.shadow2 {
    background: url(../images/col1-top-narrow-bg.gif) no-repeat center top;
    }

    #ja-col1 div.ja-innerpad {
    padding: 25px 0 10px;
    }

    #ja-mainbody-fr #ja-col1 div.ja-innerpad {
    padding: 25px 3px 10px;
    }

    #ja-col2 {
    float: right;
    width: 22%;
    overflow: hidden;
    }

    #ja-col2 div.ja-innerpad {
    padding: 25px 20px 10px 0;
    }

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

    #ja-col1 ul li,
    #ja-col2 ul li {
    padding-left: 15px;
    margin: 0;
    background: url(../images/arrow.png) no-repeat 3px 9px;
    }

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

    /* USER TOOLS
    --------------------------------------------------------- */
    #ja-usercolorswrap {
    font-size: 11px;
    position: absolute;
    top: 20px;
    right: 15px;
    }

    #ja-usertoolswrap {
    font-size: 11px;
    position: absolute;
    top: 28px;
    right: 230px;
    }

    #ja-usertools {
    margin: 0;
    padding: 10px 0 4px 0;
    float: left;
    }

    #ja-usercolors ul,
    #ja-usertools ul {
    margin: 0;
    padding: 0 0 0 10px;
    float: left;
    }

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

    #ja-usercolors img,
    #ja-usertools img {
    padding: 0;
    margin: 0;
    }

    #ja-usercolors {
    float: left;
    padding: 10px 5px 4px;
    }

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

    #ja-footer {
    color: #AAAAAA;
    background: url(../images/footer-bg.gif) repeat-x top #666666;
    position: relative;
    }

    #ja-footer div.shadow2 {
    padding: 30px 0 25px 20px;
    }

    #ja-footer h1.logo {
    margin: 0;
    padding: 0;
    width: 175px;
    font-size: 200%;
    position: absolute;
    top: 0;
    left: 30px;
    height: 69px;
    }

    #ja-footer h1.logo a {
    width: 175px;
    float: left;
    display: block;
    background: url(../images/logo-footer.gif) no-repeat;
    text-transform: uppercase;
    text-indent: -5000px;
    height: 69px;
    outline: none;
    }

    #ja-footer small, #ja-footer address,
    #ja-footer div.powerby {
    padding: 0 0 0 200px;
    float: left;
    display: block;
    color: #AAAAAA;
    font-style: normal;
    }

    #ja-footer a {
    color: #E6E6E6;
    }

    #ja-footer a:hover, #ja-footer a:active, #ja-footer a:focus {
    color: #FFFFFF;
    }

    #ja-footer ul {
    margin: 0 0 5px 200px;
    padding: 0;
    }

    #ja-footer li {
    margin: 0;
    padding: 0;
    display: inline;
    background: none;
    }

    #ja-footer li a {
    padding: 0 20px 0 0;
    display: inline;
    font-weight: bold;
    line-height: normal;
    }

    /* Search */
    #ja-search {
    width: 162px;
    background: url(../images/search-bg.gif) no-repeat;
    position: absolute;
    bottom: 45px;
    right: 50px;
    height: 29px;
    }

    #ja-search .inputbox {
    width: 130px;
    padding: 3px 5px 0;
    border: none;
    margin-left: 2px;
    color: #3172B4;
    background: #FFFFFF;
    }

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

    #ja-banner {
    text-align: center;
    }

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

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

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

    #form-login-username, #form-login-password {
    padding: 0;
    margin: 0;
    }

    /* 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 News 1.1.3 - 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
    -------------------------------------------------------------------------*/

    .ja-newsblock {
    margin: 0;
    display: block;
    padding: 8px 0;
    }

    .ja-newsitem,
    .ja-newsitem-left,
    .ja-newsitem-right,
    .ja-newsitem-center {
    float: left;
    padding: 0;
    text-align: center;
    }

    .ja-newsitem-left,
    .ja-newsitem-center {
    background: url(v-seperator.gif) repeat-y top right;
    }

    .ja-newsitem-left div.ja-newsitem-inner,
    .ja-newsitem-center div.ja-newsitem-inner,
    .ja-newsitem-right div.ja-newsitem-inner,
    .ja-newsitem div.ja-newsitem-inner {
    text-align: left;
    float: left;
    }

    .ja-newsitem-center div.ja-newsitem-inner {
    float: none;
    margin: 0 auto;
    }

    .ja-newsitem-right div.ja-newsitem-inner {
    float: right;
    }

    .ja-newscat {
    color: #333333;
    display: block;
    font-weight: bold;
    font-size: 100%;
    text-decoration: none;
    margin: 0 0 10px;
    position: relative;
    background: url(ci-right.gif) no-repeat top right;
    text-transform: uppercase;
    height: 32px;
    line-height: 32px;
    }

    .ja-newscat:hover, .ja-newscat:active, .ja-newscat:focus {
    text-decoration: none;
    outline: none;
    }

    .ja-newscat span {
    display: block;
    font-weight: bold;
    padding: 0 5px 0 30px;
    background: url(ci-left.gif) no-repeat top left;
    color: #403C3A;
    height: 32px;
    line-height: 34px;
    }

    .ja-newstitle {
    display: block;
    font-size: 100%;
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 2px;
    }

    .ja-newscontent {
    padding: 0;
    }

    .ja-newscontent img {
    margin: 5px 10px 10px 0;
    padding: 0;
    }

    .ja-newscontent p {
    margin: 5px 0;
    }
    </blockquote>

    On the first look I think it is the following:

    Regularly it always works to only change the values in the CSS to fit the new logo width/height as the header or the region it is placed in is empty to the side/op/bottom meaning is not made of a picture file/module or there is no other picture/module file in the same region to the side/top/bottom of the logo. So in this case I think, that you have here the issue that next to the logo is another picture/module or somewhere next to the logo…that also needs to be adjusted before the everything will be displayed correctly. What you add to the logo in pixels you have to take from somewhat else away, add 1 in the logo, take 1 from another modules height/width.

    I mean when you here change value 1 from 15 to 20px you have to subtract 5 from the other picture with subtracting 5px from value 2 for gaining 5px for value 1.

    You maybe also have the problem that the header in the CSS has values in two lines of the file. But, most important, when you size the header, the region below is overlapping as you went into the region of the other module with your header. Meaning you have to adjust another value in the CSS that gives you more space for the header.

    But what happens when you resize the slider height minus 5 pixels in the admin, so what you give the top logo/header in 5 px more of space you take from the slider. Than the slider is slighty smaller but the things should not overlap no more when you did this….

    In Joomla things whether overlap or are not displayed in full when the values total amount go over the total amount possible, but when you resize anything to fit the mainwrapper than all is displayed correctly.

    When this works great, when not, name it please.

    beniaminqb Friend
    October 11, 2008 at 11:17 am #274741

    thanks for your answer, wooohanetworks.

    even if I resize the slide module, the header image is still overlapped.

    see the image.

    thanks for all your help

    1. biggerheader
    jwellman Friend
    October 11, 2008 at 1:23 pm #274746


    I’m not sure what you’ve tried already. Are you adjusting the height in both positions?

    /* HEADER
    ——————————————————— */
    #ja-headerwrap {
    background: #999999;
    line-height: normal;
    height: 110px;
    }

    #ja-header {
    background: url(../images/header-bg.jpg) no-repeat #3172B4;
    height: 110px;
    position: relative;
    z-index: 10;

    1 user says Thank You to jwellman for this useful post

    1. beniaminqb
    wooohanetworks Friend
    October 11, 2008 at 2:13 pm #274751

    <em>@jwellman 85161 wrote:</em><blockquote>
    I’m not sure what you’ve tried already. Are you adjusting the height in both positions?

    /* HEADER
    ——————————————————— */
    #ja-headerwrap {
    background: #999999;
    line-height: normal;
    height: 110px;
    }

    #ja-header {
    background: url(../images/header-bg.jpg) no-repeat #3172B4;
    height: 110px;
    position: relative;
    z-index: 10;</blockquote>

    BINGO!!!! THIS SHOULD WORK OUT! I just wanted to add this but already had it in my first previous posting on the side mentioned:

    You must adjust both CSS values to the new px size… But what when this is not solving the problem?

    “””””””But, most important, when you size the header, the region below is overlapping as you went into the region of the other module with your header. Meaning you have to adjust another value in the CSS that gives you more space for the header.”””””””

    1 user says Thank You to wooohanetworks for this useful post

    1. beniaminqb
    beniaminqb Friend
    October 11, 2008 at 3:21 pm #274764

    <em>@wooohanetworks 85167 wrote:</em><blockquote>BINGO!!!! THIS SHOULD WORK OUT! I just wanted to add this but already had it in my first previous posting on the side mentioned:

    You must adjust both CSS values to the new px size… But what when this is not solving the problem?

    “””””””But, most important, when you size the header, the region below is overlapping as you went into the region of the other module with your header. Meaning you have to adjust another value in the CSS that gives you more space for the header.”””””””</blockquote>

    thanks, jwellman, wooohanetworks, you solved my problem.
    thanks again

    wooohanetworks Friend
    October 11, 2008 at 3:32 pm #274767

    <em>@wooohanetworks 85167 wrote:</em><blockquote>BINGO!!!! THIS SHOULD WORK OUT! I just wanted to add this but already had it in my first previous posting on the side mentioned:

    You must adjust both CSS values to the new px size… But what when this is not solving the problem?

    “””””””But, most important, when you size the header, the region below is overlapping as you went into the region of the other module with your header. Meaning you have to adjust another value in the CSS that gives you more space for the header.”””””””</blockquote>

    Jwellman too!;)

    I can’t thank you back, the thank you button does not appear, seems I thanked too much over the last days and have to wait for some time….;)

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)

This topic contains 9 replies, has 3 voices, and was last updated by  wooohanetworks 15 years, 7 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum

Important Notice :

New Unified Portal is live

Must Read

Jump to forum

Categories