Your IP : 216.73.216.201
/*----------------------------------------------------------------------------
Customise Style Sheet
Name: JJ Ario Lite
Date: 13 September 2007
Description: A dark Web 2.0 two-column template.
Author: JoomlaJunkie
URL: http://www.joomlajunkie.com
Stylesheet Index:
$1 - Global Resets
$2 - Typography
$3 - Lists Styling
$4 - Horizontal Rules
$5 - Quotations
$6 - Sitewide Links
$7 - Joomla Specific
$7a - Joomla Content Styles
$8 - Forms Styling
$9 - Modules
NOTE: Always make a backup of your stylesheets before editing!
NB!! Use the search function to find a section, eg: search for $10 for Modules
----------------------------------------------------------------------------*/
/* $1 - Global Resets eliminates cross browser inconsistancies
-----ONLY EDIT IF YOU KNOW WHAT YOU ARE DOING-----
----------------------------------------------------------------------------*/
* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,ul,ol,dl,fieldset,address {
margin:0.5em 0;
}
fieldset {
padding:.5em;
}
img {
border:0;
}
a img {
border:0;
}
label {text-align:left;}
/*
Fixes FireFox select list option padding after full reset
* {
margin:0;
padding:0;
}
*/
select option {
padding:0 3px;
}
/* This helps fix the relative font sizing problem with tables in internet explorer */
table {
font-size:1em;
border-collapse: collapse;
border-spacing: 0;
}
.hidden {
display:none;
}
.clearer {clear: both;}
.left {float: left;}
.right {float: right;}
/* End global resets */
/* $2 - Typography
----------------------------------------------------------------------------*/
body {
line-height: 160%;
font-size:12px;
font-family: Lucida Grande, Geneva, Arial, Helvetica, sans-serif;
color: #333;
}
/****** BASE FONT STYLES *******/
body.mediumText {
font-size:11px;
}
body.largeText {
font-size:12px;
}
body.xLargeText {
font-size:13px;
font-weight:100;
}
/* These control the general, asthetic, typographical/text
elements of the css */
h1, h2, h3, h4, h5, h6 {
font-family: Lucida Grande, Geneva, Arial, Helvetica, sans-serif;
font-weight:bold;
}
h1 {
font-size: 215%;
}
h2 {
font-size: 200%;
}
h3 {
font-size: 160%;
}
h4 {
font-size: 130%;
}
h5 {
font-size: 115%;
}
h6 {
font-size: 110%;
}
p {
margin-bottom: 1.2em;
}
/* $3 - Lists Styling
----------------------------------------------------------------------------*/
ul {
padding:0;
list-style: none;
}
ul li {
background: url(../images/li.gif) no-repeat 0 5px;
padding: 2px 0 2px 18px;
}
#mainbody ul li {
background-position: 5px 5px;
padding-left: 23px;
}
ul.style1 li {
background-image: url(../images/li-1.png);
}
ul.style2 li {
background-image: url(../images/li-2.png);
}
ol {
padding:0;
list-style-position:inside;
}
ol li {
padding: 2px 0 2px 5px;
}
#btm-mods ul {
border-top: 1px solid #E7D5B0;
border-bottom: 1px solid #fff;
margin:0;
}
#btm-mods li {
padding: 0;
border-bottom: 1px solid #E7D5B0;
border-top: 1px solid #fff;
background:none;
}
/* $4 - Horizonal Rules
----------------------------------------------------------------------------*/
hr {
/* Many components use this as a seperator line */
border:none;
height:1px;
margin:10px 0;
border-top: 1px dotted #666;
}
.article_seperator {
/*Article Seperator for Published News Items */
display: block;
margin-top: 15px;
height: 1px;
clear: both;
background: url(../images/sidenav-sep.png) repeat-x ;
}
#sidebar .article_seperator, #btm-mods .article_seperator,
#advert1 .article_seperator, #advert2 .article_seperator {
display: none;
}
/* $5 - Quotations
----------------------------------------------------------------------------*/
blockquote {
padding: 1em;
line-height:160%;
color: #333;
background:#F8F0E0;
border-bottom: 4px solid #F0DBAE;
}
blockquote.quote {
background:transparent url(../images/quote.png) 0 10px no-repeat;
padding: 1em;
line-height:180%;
color: #666;
padding-left: 45px;
padding-right: 0;
border: none;
font-style:italic;
}
pre {
padding:1em;
background:#F0DBAE;
color:#444;
margin:0.5em 0;
font-size:1em;
}
pre.code {
background: #F8F0E0 url(../images/code.png) 0 0 no-repeat;
padding-left:34px;
}
/* $6 - Sitewide Links and Custom Message Styling
----------------------------------------------------------------------------*/
a {
color:#C2BE23;
text-decoration: none;
}
#btm-mods li a {
display: block;
padding-left: 5px;
text-decoration: none;
font:normal 1.1em/27px Arial;
color:#444;
}
#btm-mods li a:hover {
background: url(../images/stripedgb.png) repeat;
display: block;
color:#666;
}
.error {
color: #b40300;
background: #ffcfab;
padding: 5px 7px;
border-left: 5px solid #b40300;
}
.message {
color:#7e8e50;
background: #daf7d4;
padding: 5px 7px;
border-left: 5px solid #c1ee71;
}
.tips {
color: #f90;
background: #ffc;
padding: 5px 7px;
border-left: 5px solid #ffe78b;
}
.help {
color: #69f;
background: #dee8ff;
padding: 5px 7px;
border-left: 5px solid #b8d9ff;
}
.alert {
color: #CC0000;
display: block;
padding: 10px 10px 10px 50px;
margin: 10px 0;
border-top: 3px solid #FF9999;
border-bottom: 3px solid #FF9999;
background: #FFD9D9 url(../images/status-alert.png) 10px 50% no-repeat;
}
.info {
color: #0055BB;
display: block;
padding: 10px 10px 10px 50px;
margin: 10px 0;
border-top: 3px solid #9CC0EE;
border-bottom: 3px solid #9CC0EE;
background: #D7E5F6 url(../images/status-info.png) 10px 50% no-repeat;
}
.note {
color: #B79000;
display: block;
padding: 10px 10px 10px 50px;
margin: 10px 0;
border-top: 3px solid #FFEB99;
border-bottom: 3px solid #FFEB99;
background: #FFF7D9 url(../images/status-note.png) 10px 50% no-repeat;
}
.download {
color: #57861A;
display: block;
padding: 10px 10px 10px 50px;
margin: 10px 0;
border-top: 3px solid #D1E9A4;
border-bottom: 3px solid #D1E9A4;
background: #EEF7DD url(../images/status-download.png) 10px 50% no-repeat;
}
span.highlight {
font-weight: bold;
padding: 2px 3px;
color: #fff;
}
.lightgreen, .lightorange, .lightblue, .lightgrey, .whitedotted,
.lushgreen, .lushorange, .lushblue, .lushgrey {
padding: 5px 7px;
}
.lightgreen {
color:#999900;
background: #D3FA92;
border: 1px solid #999900;
}
.lightorange {
color: #f90;
background: #ffffed;
border: 1px solid #ffe78b;
}
.lightblue {
color: #69f;
background: #dee8ff;
border: 1px solid #b8d9ff;
}
.lightgrey {
color: #999;
background: #eee;
border: 1px solid #ccc;
}
.whitedotted {
color: #a6ba69;
background: #fff;
border: 1px dashed #9c0;
}
.lushgreen {
background: #999900 url(../images/lushgreen.png) top repeat-x;
border: 1px solid #a6d712;
color:white;
}
.lushorange {
background: #f60 url(../images/lushorange.png) top repeat-x;
border: 1px solid #f5bc6c;
color:white;
}
.lushblue {
background: #7eb6fc url(../images/lushblue.png) top repeat-x;
border: 1px solid #c1defe;
color:white;
}
.lushgrey {
background: #612020 url(../images/lushgrey.png) repeat-x;
border: 1px solid #8b3735;
color:white;
}
.step1, .step2, .step3 {
background: transparent url(../images/step1.png) top left no-repeat;
color:#b1db30;
padding: 0 0 0 45px;
font:bold 20px/33px Arial;
}
.step2 {
background-image:url(../images/step2.png);
}
.step3 {
background-image:url(../images/step3.png);
}
/* $7 - Joomla Specific
----------------------------------------------------------------------------*/
.pagenav,
.pagenav_prev,
.pagenav_next {
padding:0 4px;
}
a.pagenav,.pagenav_prev a,
.pagenav_next a,
.pagenavbar a {
text-decoration:none;
}
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 {
text-decoration:none;
}
.back_button {
margin:5px 0 15px;
}
.back_button a, .back_button a:hover {
color:#666;
text-decoration:none !important;
}
.small {
/* A symantic style to allow you to add text with this class, that
is used for small text, like date/written by etc */
font-size: 100%;
}
td.createdate {
/* Styling the date the content was created on*/
color: #B71E00;
font-size: 0.9em;
margin-bottom: 6px;
padding: 6px 0 6px 20px;
background: url(../images/createdate.gif) 0 50% no-repeat;
}
.modifydate, td.modifydate {
color: #666;
font-size: 0.9em;
margin-bottom: 6px;
padding: 10px 0 10px 20px;
background: url(../images/lastupdated.gif) 0 50% no-repeat;
}
a.readon {
/* Formatting the "Read on..." link on blog layout pages */
text-decoration:none !important;
text-transform:lowercase;
font-size: 100%;
color: #000;
float: left;
display: inline;
text-align: center;
width: 95px;
height:18px;
font: bold 11px/16px Tahoma;
background: url(../images/readmoreicon.png) no-repeat;
margin-top: 10px;
}
a.readon:hover {
/* Formatting the "Read on..." link on blog layout pages */
text-decoration: underline !important;
color: #000;
}
span.pathway a {
background: url(../images/arrow.png) no-repeat 100% 50%;
padding-right: 20px;
color: #333;
text-decoration: none;
}
span.pathway img {
display: none;
}
span.pathway a:hover {
color: #999;
text-decoration: underline;
}
/* $8a - Joomla Content Styles
----------------------------------------------------------------------------*/
/* These are all the styles for content, this is used for joomla content
output in the main content area */
td.contentdescription {width:100%;}
table.contentpaneopen, table.contentpane {
padding:0;
margin:0;
width:100%;
border-collapse:collapse;
}
.blog table.contentpaneopen {
border-collapse:separate;
border-spacing: 3px;
}
.moduletable table.contentpaneopen td {
background:none;
margin-top:0;
background:none;
border:none;
padding:0;
}
.header .moduletable table.contentpaneopen td {
font-size: 100%;
}
.contentheading {
/* Used as the Title of the content, article, etc. being displayed,
it is also used for Section's heading*/
}
td.buttonheading{
padding:0;
}
.contentheading,
.blog .contentheading,
.contentpane .contentheading {
/* Title of articles */
font-size: 1.6em;
font-weight:bold;
text-align:left;
padding:0.5em 0 0.5em 0;
}
.componentheading {
/* Used to format a components heading or title */
font-size: 1.95em;
font-weight: bold;
color:#B71E00;
padding:0.6em 0 0.9em 0;
}
a.contentpagetitle {
}
table.contenttoc {
margin:10px;
padding:0;
float:right;
}
.buttonheading img {
padding:0 2px;
}
.sectiontableheader,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
padding:3px 4px;
border-top:1px solid #fff;
}
.sectiontableheader {
font-weight:700;
padding:5px;
background: #333 url(../images/h3striped.png);
color:#fff;
}
.sectiontableentry1 {
background-color: #F8F0E0;
}
.sectiontableentry2 {
background: #F9E9CA;
}
.sectiontableentry1 a, .sectiontableentry2 a {
}
.sectiontableentry1 a:hover, .sectiontableentry2 a:hover {
}
/* Polls */
.poll, .poll-ario {
/* Polls text */
}
.poll td, .poll-ario td {
text-align:left;
padding:0.5em 0 0 0;
vertical-align:top;
font-weight: 400;
}
.moduletable .poll input, .moduletable-ario .poll-ario input {
margin:0 0.5em 0 0;
}
/* This helps make the poll look better as it removes the
section and table entry lines */
.poll .sectiontableentry1,
.poll .sectiontableentry2,
.poll-ario .sectiontableentry1,
.poll-ario .sectiontableentry2 {
background: none;
border: none;
text-align:left;
}
.pollstableborder {
/* Set the border properties of the polls voting table */
border:none;
}
/* Search Results */
table.contentpaneopen fieldset{
border:0;
border-bottom:1px solid #333;
padding:10px;
margin:0.5em 0;
width:96%;
overflow:hidden;
}
table.contentpaneopen fieldset a{
font-size:1.1em;
}
table.contentpaneopen fieldset span.small{
color:#999;
}
table.contentpaneopen fieldset span.highlight{
}
/* $9 - Forms Styling
----------------------------------------------------------------------------
These styles control the appearance of forms */
.inputbox {
/* The look of input boxes in forms */
background: #fff;
border:1px solid #CCCCCC;
padding:1px 5px;
margin: 6px;
font-size: 100%;
color:#777;
font-size:1em;
}
div.search .inputbox {
background: #FDFEF5 url(../images/inputbg.png) repeat-x
}
.button {
/* Button style for Joomla component, form and module buttons
specifically in the sidebar */
text-align:center;
padding:2px 10px;
line-height: 100%;
color:#fff;
cursor: pointer;
margin: 1px;
font:bold 12px/100% Arial;
}
select.inputbox {
padding: 0 !important;
margin: 0 6px;
}
textarea {
/* The look of the large text area on forms */
font-size:100%;
background: white;
border:1px solid #3d3d3d;
padding:1px 3px;
margin:0;
overflow: auto;
}
label, input {
vertical-align: middle;
}
#mod_login_password, #mod_login_username {
width:161px;
margin-left:0;
}
/* $10 - Modules
----------------------------------------------------------------------------*/
/* If you have a module that you want to display without any
default styling, set the suffix to -nopadding */
.moduletable, .moduletable-ario, .moduletable_menu {
font-size: 100%;
padding: 10px;
margin: 0 0 5px 0;
display: inline-block;
width:100%;
}
.moduletable-ario h3, .moduletable h3, .moduletable_menu h3 {
color:#444;
font-size:140%;
line-height:100%;
margin:0 0 10px 0;
padding:0;
}
/* div's effects*/
div.h3striped {padding-top:0;}
div.stripedbg {
background: url(../images/stripedgb.png) repeat;
}
div.horzlines {
border-top:4px solid #EDEFD4;
border-bottom:4px solid #EDEFD4;
}
div.insetinfo {
font-size: 0.9em;
border:1px solid #EFDEC1;
padding-left:44px;
padding-top:10px;
background:#F6F4D1 url(../images/inseftinfo.gif) 15px 20px no-repeat;
}
.moduletable-ario.insetinfo.countin1 {
width: 494px;
}
div.litebg {
background-color: #F8F8E1;
}
/* h3 effects */
div.h3striped h3 {background: #E2DEAB url(../images/h3striped.png);}
div.h3striped h3,
div.h3solidcolor h3,
div.h3stripeddark h3 {
height:29px;
line-height:29px!important;
padding:0 0 0 16px;
margin: 0 -10px 10px -10px;
color: #fff;
width: 194px;
}
div.h3stripeddark h3 {background: #333 url(../images/h3stripeddark.png);}
div.h3dark h3 {color:#222;}
div.h3blue h3 {color:#6793c0;}
div.alert h3, div.info h3 {
color:#B71E00;
padding-left:22px;
background: url(../images/alert.gif) 0 50% no-repeat;
}
div.info h3 {
color:#6793c0;
background-image: url(../images/info.gif);
}
div.h3solid h3 {
background: #E2DEAB url(../images/h3solid.png);
padding: 4px 10px;
margin: -10px;
height:21px;
line-height:20px!important;
margin-bottom: 10px;
}
#content div.h3solid h3 {
font-size: 1.1em;
}
#btm-mods .moduletable, #btm-mods .moduletable-ario {
padding: 15px;
margin: 0 0 20px 20px;
color:#666;
}
#btm-mods h3 {
font-size: 16px;
}
/* GeSHi stlying */
pre.php, pre.php-brief, pre.javascript,
pre.mysql, pre.css {
margin: 1em 0 0 0;
padding: 1em;
border: 1px solid #222;
background-repeat: repeat-x;
background-position: top;
background-color: #111;
background-image: none;
width: 94%;
font-family: Courier New, courier, mono;
white-space: nowrap;
}
pre.php ol, pre.javascript ol,
pre.mysql ol, pre.css ol {
padding: 5px;
white-space: pre;
min-height: 4em;
background-color: #fff;
border: 1px solid #EFCE77;
display: block;
overflow: auto;
list-style-position: outside;
padding-left: 1.8em;
}
pre.php li, pre.javascript li,
pre.mysql li, pre.css li {
margin-left: 1em;
padding-left: 0;
background: #eee;
list-style-type: decimal-leading-zero;
line-height: 1em;
color: #ccc;
}
pre.php div.head, pre.javascript div.head,
pre.mysql div.head, pre.css div.head {
padding-bottom: 0.2em;
padding: 0.5em;
background: #000 url(../images/code-header.png) no-repeat 98% center;
font-size: 1.5em;
font-family: arial;
font-weight: normal;
border: 1px solid #666;
margin: 0;
color: #fff;
}
pre.php div.foot, pre.javascript div.foot,
pre.mysql div.foot, pre.css div.foot {
padding-top: 0.7em;
}
/****control styles*****/
ul#2colfloat {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.floatleftcol {
background: none;
float: left;
padding: 0px;
width: 40%;
padding-top: 20px;
}
li.floatrightcol {
background: none;
float: left;
padding: 0px;
width: 60%;
line-height: 17px;
}