вот с моими знаниями цсс это будет сложно подъемная задача(( Коллеги, если кто-то сможет объяснить новичку "на пальцах", помогите пожалуйста!
/*
# ------------------------------------------------------------------------
# JA Social Template
# ------------------------------------------------------------------------
# Copyright (C) 2004-2010 JoomlArt.com. All Rights Reserved.
# @license - PHP files are GNU/GPL V2. CSS / JS are Copyrighted Commercial,
# bound by Proprietary License of JoomlArt. For details on licensing,
# Please Read Terms of Use at http://www.joomlart.com/terms_of_use.html.
# Author: JoomlArt.com
# Websites: http://www.joomlart.com - http://www.joomlancers.com
# Redistribution, Modification or Re-licensing of this file in part of full,
# is bound by the License applied.
# ------------------------------------------------------------------------
*/
/* COMMON STYLE
--------------------------------------------------------- */
body {
color: #333;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.7;
}
body#bd { background: url(../images/header-bg2.gif); color: #333; }
/* Normal links ---*/
a { color: #238db4; text-decoration: none; }
a:hover, a:active, a:focus { color: #333; }
.ja-module dd,
.ja-content-main dd,
.ja-content-main dd { margin-left: 0px; }
/* Readon links ---*/
p.readmore {
background: url(../images/readon-bg.gif) repeat-x left bottom;
border: 1px solid #ddd;
font-weight: bold;
float: left;
padding: 2px 6px;
}
p.readmore a {
color: #666;
text-shadow: 0 1px 1px #fff;
}
p.readmore a:hover,
p.readmore a:focus,
p.readmore a:active {
color: #238db4;
text-decoration: none;
}
.contentheading, .componentheading {display:none !important}, h1, h2, h3, h4, h5 {
font-family: "Segoe UI", Arial, Hevetica, sans-serif;
font-size: 17px;
}
h1.componentheading, .componentheading {
background: url(../images/heading-bg.gif) repeat-x left top #f0f0f0;
border-bottom: 1px solid #E4E4E4;
color: #4A4A4A;
font-weight: bold;
font-size: 110%;
margin: 0 -15px;
padding: 0 15px 10px;
text-transform: uppercase;
text-shadow: 0 1px 2px #fff;
}
h2.contentheading, .contentheading {
font-weight: bold;
}
.contentheading { font-size: 100%; }
.contentpaneopen_edit {
position: absolute;
left: 0;
top: 0;
}
.blog-featured .contentheading { color: #238db4; font-size: 170%; }
.jitem-title { font-size: 110%; font-weight: bold; }
.contentpagetitle {display:none}
/* Others ---*/
hr { border-top: 1px solid #ccc; }
/* FORM
--------------------------------------------------------- */
input, select, textarea, .inputbox {
padding: 4px 5px;
font-family: Arial, Helvetica, sans-serif;
}
input[type="checkbox"] {
vertical-align: middle;
padding: 0;
margin: 0;
}
.inputbox { border: 1px solid #d6e4ec; background: #fff; }
.inputbox:hover, .inputbox:focus { background: #ffffcc; }
.login_form .remember .inputbox,
.ja-weblinks .checkbox .inputbox {
border: none;
}
.josForm .inputbox {
margin-right: 5px;
}
.button, button {
background: url(../images/readon-bg.gif) repeat-x left bottom;
border: 1px solid #ddd;
font-weight: bold;
padding: 2px 5px;
text-shadow: 0 1px 1px #fff;
}
/* Search ---*/
form#searchForm { }
.searchintro { border-bottom: 1px solid #ccc; }
.results h4 { text-transform: none; font-size: 110%; }
/* Contact ---*/
#component-contact #emailForm {}
.contentpane form p { margin-bottom: 10px; }
/* Joomla STYLE
--------------------------------------------------------- */
/* Layout Deco ---*/
.items-leading { border-bottom: 1px solid #ccc; }
.items-row { border-bottom: 1px solid #E8EDF0; }
/* Meta ---*/
.article-tools {
border: 1px solid #e1ebf1;
background: #f6f6f6;
margin-top: 3px;
padding: 5px 5px 3px;
}
dl.article-info { color: #999; margin: 0; }
dd.create,
dd.createdby,
dd.category {
background: url(../images/icon-date.png) no-repeat 0px 0px;
margin-right: 8px;
padding: 2px 0 0 20px !important;
text-transform: capitalize;
}
dd.createdby { background: url(../images/icon-user.png) no-repeat 0px 0px; }
dd.category { background: url(../images/icon-folder.png) no-repeat 0px 0px; }
.contentdescription { border-bottom: 1px solid #ccc; margin-bottom: 10px; }
.modifydate { color: #666; font-size: 92%; }
/*Inline images ---*/
div.img_caption { margin-top: 20px; }
.img_caption.left { margin-right: 20px; }
div.img_caption img {
background: #d6e4ec;
border: 1px solid #90CAE0;
padding: 4px;
}
p.img_caption { color: #999; padding-top: 2px; text-transform: uppercase; }
.article-image {
float: left;
width: 130px;
}
.article-image img {
background: #d6e4ec;
border: 1px solid #90CAE0;
clear: both;
display: block;
padding: 4px;
margin: 20px 0 0;
}
.article-image .img_caption { margin: 0; }
.article-image .ja-retweet-normal-home { margin-right: 15px; }
.article-image .ja-facebookshare-box_count-home { margin-right: 0; margin-bottom: 0; }
/* Tables ---*/
thead tr th {
background: #333;
color: #fff;
padding: 5px;
}
thead tr th a,
thead tr th a:hover,
thead tr th a:focus,
thead tr th a:active { color: #fff; }
.cat-list-row1,
.cat-list-row12,
tr.cat-list-row1 td,
tr.cat-list-row2 td { border-bottom: 1px solid #ccc; padding: 5px; }
.cat-list-row1:hover,
.cat-list-row2:hover { background: #ffffcc; }
.cat-list-row2,
tr.cat-list-row2 td { background-color: #f6f6f6; }
/* Content Toc */
table.contenttoc { border: 1px solid #ccc; }
table.contenttoc td { border-bottom: 1px dotted #ccc; }
table.contenttoc th {
background: #f6f6f6;
border-bottom: 1px solid #ccc;
text-transform: uppercase;
}
/* Poll */
form#poll {
border-bottom: 1px dotted #ccc;
font-weight: bold;
}
dl.poll { border-bottom: 1px dotted #ccc; }
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; }
/* Pagination ---*/
.pagination li span,
.pagination li strong { line-height: 20px; }
.items-more { border-bottom: 1px solid #ccc; }
.items-more h3 { font-size: 125%; }
/* Tool Tip ---*/
.tool-title {
padding-top: 15px;
}
/* MODULE STYLES
--------------------------------------------------------- */
div.ja-moduletable h3, div.moduletable h3 {
background: url(../images/grad-d1.gif) repeat-x left top #238db4;
color: #fff;
font-size: 110%;
font-family: "Segoe UI", Helvetica, sans-serif;
font-weight: bold;
margin: 0;
padding: 10px 15px;
text-transform: uppercase;
}
div.ja-moduletable, div.moduletable {
background: #fff;
margin-top: 0;
margin-bottom: 15px;
padding: 0;
}
div.ja-moduletable .ja-box-ct, div.moduletable .ja-box-ct {
padding: 10px 15px;
}
/* Advertisement ---*/
div.bannergroup_text div.banneritem_text { border-bottom: 1px dotted #ccc; }
/* MAIN LAYOUT DIVS
--------------------------------------------------------- */
#ja-wrapper { }
#ja-container {
background: url(../images/container-bg.gif) repeat-x left top #d6e4ec;
padding-bottom: 20px;
}
#ja-container .main { padding: 20px 0 0; }
.main .main-inner1 { margin-left: 0; margin-right: 0; }
.article-content { overflow: visible; }
.fp-article-content {
padding-left: 145px;
}
/* Content Main ---*/
.ja-content-main {
background: #fff;
margin-bottom: 20px;
padding: 10px 15px 20px;
}
.ja-social .ja-content-main,
.ja-agora .ja-content-main {
background: none;
padding-top: 0;
padding-left: 0;
padding-right: 0;
}
/* HEADER
--------------------------------------------------------- */
#ja-header { border-top: 1px solid #4FAED2; margin-top: 29px; z-index: 13; }
#ja-header .main { padding: 15px 0; }
h1.logo, div.logo-text h1 { font-size: 250%; line-height: 1; margin-left: 15px;}
/* Logo Image ---*/
h1.logo { width: 220px; height: 80px; }
h1.logo a {
background: url(../images/logo.png) no-repeat left;
display: block;
width: 400px;
height: 80px;
}
/* Logo Text ---*/
div.logo-text h1 {
font-size: 280%;
font-family: Arial, sans-serif;
font-weight: bold;
margin: 0;
padding: 0 0 0 15px;
}
div.logo-text h1 a {
color: #fff;
text-decoration: none;
text-shadow: 0 1px 1px #0367A6;
}
p.site-slogan {
color: #d6e4ec;
display: block;
font-size: 85%;
margin: 3px 0 0;
padding: 0 15px;
}
#ja-top-header {
margin-top:-5px;
position:absolute;
right:180px;
text-align:right;
width:50%;
}
/* Search ---*/
#ja-search {
background: url(../images/search-bg.png) no-repeat left top;
bottom: 50px;
height: 29px;
right: 10px;
width: 215px;
}
#ja-search .inputbox {
background: none;
border: none;
color: #fff;
height: 29px;
line-height: 29px;
padding: 0 10px;
width: 125px;
text-transform: capitalize;
}
#ja-search .button {
background: none;
border: 0;
color: #666;
height: 29px;
line-height: 29px;
text-transform: uppercase;
text-shadow: 0 1px 1px #fff;
}
/* Top bar ---*/
#ja-topbar {
border-bottom: 1px solid #2985A8;
color: #BAE1EF;
font-size: 11px;
position: absolute;
top: 0;
z-index: 16;
background: url(../images/header-bg2.gif);
}
#ja-topbar .main {
height: 28px;
line-height: 28px;
}
#ja-topbar .ja-day {
background: url(../images/sep-w.gif) no-repeat right center;
display: block;
float: left;
margin-left: 15px;
padding-right: 10px;
}
#ja-topbar .ja-updatetime {
float: left;
padding: 0 10px;
}
#ja-topbar .ja-updatetime em {
margin-left: 5px;
font-style: normal;
color: #fff;
}
/* Headtools ---*/
#ja-headtools {
position: absolute;
right: 15px;
top: 5px;
}
#ja-headtools ul {
float: left;
margin: 0;
padding: 0;
white-space: nowrap;
}
#ja-headtools li {
background: none;
display: inline;
line-height: normal;
margin: 0;
padding: 0;
}
#ja-headtools li a {
display: block;
float: left;
color: #fff;
margin-left: 5px;
padding-bottom: 4px;
}
#ja-headtools li a span { display: block; padding: 2px 5px 2px 24px; }
#ja-headtools li a.login-switch span { background: url(../images/icons/icon-user.png) no-repeat 5px 2px; }
#ja-headtools li a.register-switch span { background: url(../images/icons/icon-register.png) no-repeat 5px 2px; }
#ja-headtools li a.login-switch.show span { background-image: url(../images/icons/icon-user-show.png); }
#ja-headtools li a.register-switch.show span { background-image: url(../images/icons/icon-register-show.png); }
#ja-headtools li a:hover {
background: url(../images/arrow-hover-90cw.png) no-repeat 10px center;
text-decoration: none;
}
#ja-headtools li a.show {
background: url(../images/arrow-up.gif) no-repeat center bottom;
color: #FFFFFF;
position: relative;
z-index: 1000;
}
#ja-headtools li a.show span {}
#ja-headtools li a.show span { display: block; }
#ja-user-register, #ja-user-login {
background: url(../images/ja-login-bg.gif) repeat-x left bottom #fff;
border: 1px solid #A1D5E9;
color: #333;
display: none;
height: auto;
overflow: hidden;
padding: 10px 15px;
position: absolute;
right: -15px;
text-align: left;
top: 21px;
z-index: 999;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0 3px 5px rgba(0,0,0,.4);
-moz-box-shadow: 0 3px 5px rgba(0,0,0,.4);
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,.4);
}
#ja-user-login .ja-login-user,
#ja-user-login .ja-login-password,
#ja-user-login .mod_login_remember {
float: left;
width: 145px;
display: block;
}
#ja-user-login .button,
#ja-user-register .button {
color: #fff;
background: url(../images/button_bg.png) 0 50% repeat-x #238db4;
border: 1px solid #238db4;
text-shadow: 0 1px 1px #4a4a4a;
}
#ja-user-login .button:hover,
#ja-user-register .button:hover {
border: 1px outset #fff;
}
.ja-login-links {
margin-top: 10px;
}
#ja-headtools .ja-login-links a {
color: #238db4;
padding: 0;
}
#ja-headtools li a.logout-switch {
display: inline;
float: none;
margin-left: 3px;
}
/* NAVIGATION
--------------------------------------------------------- */
/* Main Nav ---*/
#ja-mainnav { background: url(../images/trans-bg.png); border-top: 1px solid #4FAED2; }
#ja-mainnav .main-inner1 { padding: 0 10px 0 }
/* Breadcrumbs ---*/
#ja-navhelper { background: url(../images/trans-bg.png); }
#ja-navhelper .main { color: #fff; text-transform: uppercase; padding: 8px 0px; }
.ja-breadcrums { text-indent: 10px; }
#ja-navhelper a {
color: #fff;
}
/* Extras ---*/
.ja-links { padding-right: 10px; }
.ja-links li { padding: 0 10px; }
/* Default Joomla! Menu ---*/
#ja-container .moduletable_menu ul.menu {
margin: -5px -15px -5px;
}
#ja-container ul.menu li { border-bottom: 1px dotted #e8edf0; padding-left: 0; }
#ja-container ul.menu li a {
background: url(../images/bullet-grey.png) no-repeat 15px 12px;
color: #666;
text-indent: 27px;
width: 100%;
}
#ja-container ul.menu li a:hover,
#ja-container ul.menu li a:active,
#ja-container ul.menu li a:focus {
background-image: url(../images/bullet-blue.png);
color: #238db4;
text-decoration: none;
}
#ja-container ul.menu li li { background: none; border-bottom: 0; border-top: 1px solid #E1EBF1; }
#ja-container ul.menu li li a,
#ja-container ul.menu li.active li a { text-indent: 27px; color: #666; }
#ja-container ul.menu li li a:hover,
#ja-container ul.menu li li a:active,
#ja-container ul.menu li li a:focus {
background: url(../images/bullet-blue.png) no-repeat 15px 12px;
color: #238db4;
}
#ja-container ul.menu li.active a { color: #238db4; }
/* MASS TOP
--------------------------------------------------------- */
#ja-content-mass-top { margin-bottom: 15px; }
#ja-content-top { position: relative; }
/* JA Content top ---*/
#ja-content-top .ja-moduletable {
background: #fff !important;
margin-left: 10px;
margin-right: 10px;
}
#ja-content-top .ja-box-left .ja-moduletable { margin-left: 0; }
#ja-content-top .ja-box-right .ja-moduletable { margin-right: 0; }
/* SPOTLIGHT
--------------------------------------------------------- */
#ja-topsl .ja-box, #ja-botsl .ja-box { }
#ja-topsl .ja-box-right, #ja-botsl .ja-box-right {
background: 0;
}
#ja-topsl .ja-moduletable, #ja-botsl .ja-moduletable {
background: none;
border: 0;
margin-top: 0;
margin-bottom: 10px;
}
#ja-topsl div.ja-moduletable h3,
#ja-botsl div.ja-moduletable h3 {
background: none;
border-bottom: 0;
padding-bottom: 0;
}
/* Top spotlight ---*/
#ja-topsl .main { padding: 0; }
#ja-topsl .main-inner1 { padding: 10px 0; }
/* Bot spotlight ---*/
#ja-botsl { border-top: 1px solid #fff; }
#ja-botsl .main { padding: 0; color: #fff; font-size: 92%; }
#ja-botsl .main-inner1 { padding: 10px 0 20px; }
#ja-botsl div.ja-moduletable h3 {
text-transform: none;
font-size: 150%;
padding: 10px 0 0 0;
}
#ja-botsl .ja-box-ct { padding: 0; }
#ja-botsl a {
color: #B9E0EE;
border-bottom: 1px dotted #B9E0EE;
}
#ja-botsl a:hover,
#ja-botsl a:focus,
#ja-botsl a:active {
border-bottom: 1px dotted #fff;
color: #fff;
text-decoration: none;
}
#ja-botsl ul li {
background: none;
border-bottom: 1px dotted #85c4dc;
padding: 0;
margin: 0;
}
#ja-botsl ul li a {
color: #fff;
display: block;
padding: 5px 5px 5px 17px;
background: url(../images/bullet-arrow.gif) no-repeat 5px 10px;
border: 0;
}
#ja-botsl ul li a:hover,
#ja-botsl ul li a:hover,
#ja-botsl ul li a:focus {
color: #fff;
border: 0;
background-color: #238db4;
}
#ja-botsl .img-border {
background: #fff;
border: 3px solid #238db4;
margin: 0 0 5px 10px;
}
/* FOOTER
--------------------------------------------------------- */
#ja-footer {
padding: 10px 0 30px;
color: #9AD0E5;
}
#ja-footer .main {
text-align: left;
}
#ja-footer a {
color: #fff;
}
#ja-footer .ja-footnav {
margin: 10px 0 5px 0;
padding: 0;
}
#ja-footer .ja-footnav ul li {
padding: 0 10px;
}
#ja-footer .ja-footnav a { color: #fff; font-weight: bold; }
#ja-footer .ja-footnav a:hover,
#ja-footer .ja-footnav a:focus,
#ja-footer .ja-footnav a:active {
color: #fff;
}
#ja-footer .ja-copyright {
padding: 0 10px;
}
#ja-poweredby {
position: absolute;
top: 0px;
right: 0px;
}
/* MISCELLANOUS
----------------------------------------------------------- */
/* Others ---*/
#ja-banner { border-top: 1px solid #ccc; }
div.ja-innerdiv { border-bottom: 1px dotted #ccc; }
div.ja-innerdiv h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 92%;
font-weight: normal;
text-transform: uppercase;
}
/* Custom gallery ---*/
.small-gallery {
float: left;
margin-bottom: 5px;
margin-right: 5px;
}
.last-item { margin-right: 0; }
.small-gallery .img-border {
border: 1px solid #d6e4ec;
padding: 1px;
width: 45px;
}
/* JA Twitter ---*/
.ja-twitter {
padding-left: 0;
padding-right: 0;
}
/* Social list ---*/
#ja-wrapper ul.social-list li { }
#ja-wrapper ul.social-list li a {
background-position: 5px 5px;
background-repeat: no-repeat;
padding-left: 28px;
}
#ja-wrapper ul.social-list li.ja-facebook a { background-image: url(../images/icons/icon-facebook.png); }
#ja-wrapper ul.social-list li.ja-twitter a { background-image: url(../images/icons/icon-twitter.png); }
#ja-wrapper ul.social-list li.ja-linkedin a { background-image: url(../images/icons/icon-linkedin.png); }
#ja-wrapper ul.social-list li.ja-rss a { background-image: url(../images/icons/icon-rss.png); }
/* Contact list ---*/
#ja-wrapper ul.contact-list li {
background-position: 5px 4px;
background-repeat: no-repeat;
padding: 5px 5px 5px 28px;
}
#ja-wrapper ul.contact-list li.add { background-image: url(../images/icons/icon-home.png); }
#ja-wrapper ul.contact-list li.tel { background-image: url(../images/icons/icon-phone.png); }
#ja-wrapper ul.contact-list li.email { background-image: url(../images/icons/icon-email.png); }
/* Facebook button ---*/
.fb-button {
background: #e8f1fa;
border: 1px solid #d6e5ec;
margin: 10px 0 !important;
padding: 5px 10px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
div.ja-facebookshare-box_count-home,
div.ja-facebookshare-box_count {
float: left;
margin-right: 10px;
}
.fb_share_no_count { display: block !important; }
.fb_share_no_count .fb_share_count_inner {
background: url(../images/zero-bg.png) no-repeat center center #E8EBF2 !important;
}
.jacomment-count {
background: url(../images/readon-bg.gif) repeat-x left bottom #fff;
border: 1px solid #ddd;
float: left;
font-weight: bold;
margin: 0 10px 0 0;
padding: 2px 6px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.jacomment-count a { color: #666; }
.jacomment-count a:hover,
.jacomment-count a:focus,
.jacomment-count a:active { color: #238DB4; text-decoration: none; text-shadow: 0 1px 1px #fff; }
/* JOMSOCIAL'S MODULES STYLE
----------------------------------------------------------- */
/* Top users ---*/
ul#modTopMembers {
margin: 0 -15px !important;
padding: 0;
list-style: none;
}
ul#modTopMembers li {
background: none;
border-bottom: 1px solid #e7edf1;
margin: 0;
padding: 5px 15px;
}
ul#modTopMembers li img.avatar {
margin-right: 8px;
padding: 3px;
}
ul#modTopMembers li a:hover img.avatar {
background: #238db4;
}
/* Latest Discussion ---*/
.modLatestDiscussion {
margin: 0 -15px;
}
.modLatestDiscussion ul {
margin: 0;
padding: 0;
list-style: none;
}
.modLatestDiscussion ul li {
border-bottom: 1px solid #e7edf1;
margin: 0;
padding: 10px 15px !important;
}
.modLatestDiscussion ul li img.avatar {
margin: 2px 10px 0 0;
padding: 1px;
width: 40px;
}
.modLatestDiscussion ul li small,
.modLatestDiscussion ul li small a {
color: #999;
}
.modLatestDiscussion ul li small {
padding: 5px 0 0 12px;
display: block;
}
/* Active group ---*/
ul#modActiveGorups {
padding: 0;
margin: 0 -15px;
list-style: none;
}
ul#modActiveGorups li {
background: none;
border-bottom: solid 1px #e7edf1;
padding: 5px 15px;
}
ul#modActiveGorups li img {
width: 40px;
float: left;
display: inline;
margin: 0 8px 0 0;
padding: 1px;
}
ul#modActiveGorups li span {
line-height: normal;
padding: 0;
margin: 0;
}
ul#modActiveGorups a small {
color: #999;
}
ul#modActiveGorups li div { clear: left; height: 1px; }
/* Who's online ---*/
div.js-user-online ul {
margin: 0 0 10px;
padding: 0;
list-style: none;
}
div.js-user-online ul li {
display: block;
float: left;
margin: 0;
padding: 0 5px 5px 0;
}
div.js-user-online ul li a {
display: block;
margin: 0;
padding: 0;
}
div.js-user-online ul li img {
border: 1px solid #ccc;
padding: 2px;
}
/* Override Disqus comment ---*/
#dsq-global-toolbar { position: relative; z-index: 12; }
.dsq-post-area { position: relative; z-index: 9; }
#dsq-content .dsq-trackback-url {
width: 80%;
}
.dsq-popup .dsq-subscribe-submit button {
margin-left: 10px;
}
#dsq-content .dsq-comment-footer-left {
visibility: visible !important;
float: none !important;
}
#dsq-content .dsq-comment-footer-right {
float: none;
}
/* Override Online Module ---*/
.agorians_online_hor {
width: 45% !important;
}
.agorians_online_avatar {
float: none;
text-align: center;
}
.agorians_online_username {
clear: both;
}
#community-wrap #community-banlists-news-items {
width: 98% !important;
}