/*----------------------------------------------------------------------------
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:14px;  //12px;
	font-family: Lucida Grande, Geneva, Arial, Helvetica, sans-serif;
	color: #333;
}

/****** BASE FONT STYLES *******/
body.mediumText {
font-size:11px;
}

body.largeText {
font-size:13px; //12px;
}

body.xLargeText {
font-size:15px; //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;
}

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