/*----------------------------------------------------------------------------
Customise Style Sheet

Name: 			JJ Ario
Date: 			13 September 2007
Description: 	A dark Web 2.0 two-column template.
Author: 		JoomlaJunkie
URL: 			http://www.joomlajunkie.com

Stylesheet Index:
	$1 - Structural CSS
	$2 - Live Search CSS

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 - Info
----------------------------------------------------------------------------*/


/***This css file is usually used by Joomla,
however we structure our templates a little
differently for optimized use, we have seperated
out the structural css with the colors etc:
This css file must not be edited unless you want
to change the structure of the template


**For STRUCTURAL CSS, please edit this layout!
(this contains the dimensions and main page
layout, only to be edited if you want to change
the page structure)

**For all graphical elements, typography, colors,
fonts and main joomla styles, edit the customise.css
and or color.css (could be yellow.css if using
multiple themes)
***/

/*TIP
**Use the (editor_css.css) css document to add
styles that will be used in the backend editor when
adding or editing content, this will help you maintain
a consistent look and feel throughout your website
for more information, please email info@joomlajunkie.com
or read the readme file that came with your template*/

/* $1 - Structural CSS
----------------------------------------------------------------------------*/
body {
    margin: 0;
    padding: 0;
	background: #202020 url(/@/images/body-bg.png);
}

body.contentpane {
	background-image:none;
	background-color:white;
}

#top, #user3, #shadow {
    width:994px;
}

#top {
	height:68px;
}

#top h1, #top h1 a {
	display:block;
	padding:0;margin:0;
	width:205px;
	height:49px;
	text-indent: -7998px;
	cursor:pointer;
}

#top h1 {
	background: transparent url(/@/images/logo.png) no-repeat;
	float:left;
	margin:15px 0 0 20px;
}

#toolbar {
	text-align:right;
	padding-top:33px;
	padding-right:20px;
}

#shadow {
	background: transparent url(/@/images/shadow-spacer.png) repeat-y;
}

#user3 {
	height:47px;
	text-align:left;
	background: transparent url(/@/images/user3.png) top left no-repeat;
}

#rss {
	position:absolute;
	top:-193px;
	left:895px;
	text-align:right;
    width:100px;
}

#header, #pathway, #btm-mods, #footer {
	width:960px;
}

#header img {
	display:block;
}
.header {
	height:163px;
	width:960px;
	overflow:hidden;
	background: transparent url(/@/images/header.jpg) top left no-repeat;
}
/*this removes an unwanted break in the
Joomla header rotator and can be removed if
you are not using it*/

#header br {
display: none;
}
#pathway {
    height:35px;
    text-align:left;
    font:normal 12px/130% Arial ;
    background:#222 url(/@/images/pathway.png) repeat-x;
}
#pathway_inner {
    padding:11px 0 0 15px;
}
div.search {
	float: right;
	margin-top: -19px;
	margin-right: 10px;
}
#mod_search_searchword {
	width:150px;margin:0;
}

#left, #right, #content {
	float:left;
	display:inline;
	margin-top:5px;
	text-align:left;
	overflow:hidden;
}

#left, #right {
	width:194px;
}

#content {
	width:552px;
}
#mainbody {
	margin:10px;overflow:hidden;
	position:relative;
	width:532px;
}

.scheme_2 #content {
	width:751px;
}

.scheme_2 #mainbody {
	width:731px;
}

.scheme_1 #content {
	width:950px;
}

.scheme_1 #mainbody {
width: auto;
}

.first-in-scheme {margin:5px 5px 0 22px;}
.second-in-scheme {margin-right:5px;}
.third-in-scheme {}

#btm-mods {
	background:#F8F8E1;
	border-top:1px solid #E7D5B0;
	padding-top:10px;
	text-align:left;
}

#footer {
	height:34px;
	border-top:1px solid #E7D5B0;
}

#footer a {
	color:#333;
	text-decoration:none;
}

#footer a:hover {
	text-decoration:underline;
}

#footer a.copyright {
	float:left;
	display:inline;
	background: url(/@/images/template-by.gif) 0 50% no-repeat;
	padding-left:10px;
	margin:9px 0 0 12px;
}

#footer a.w3c-valid {
    float:right;
    display:inline;
    background: url(/@/images/tick.gif) 0 50% no-repeat;
	padding-left:20px;
	margin:9px 12px 0 0;
}

.clear {
    clear: both;
    display: block;
    height: 0px;
    font-size:1px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

#advert1, #advert2 {
	height:1%;
	width:100%;
	padding-bottom:5px;
}

div.moduletable.first, div.moduletable.middle,
div.moduletable-ario.first, div.moduletable-ario.middle {
	float:left;
	display:inline;
}
div.moduletable.last,div.moduletable-ario.last {
	float:right;
	display:inline;
}

/* narrow mode */
div.countin3 {width:161px;overflow:hidden;}
div.countin2 {width:253px;overflow:hidden;}
div.countin1 {width:532px;clear:both;overflow:hidden;}
div.middle {margin-left:5px;width:160px}
.scheme_3 div.first.countin2 {width:254px;}

/* No Left or Right */
.scheme_2 div.countin3 {width:227px;}
.scheme_2 div.countin2 {width:353px;}
.scheme_2 div.countin1 {width:731px;clear:both;}
.scheme_2 div.middle {margin-left:5px;}

/* No Left and Right */
.scheme_1 div.countin3 {width:293px;}
.scheme_1 div.countin2 {width:453px;}
.scheme_1 div.countin1 {width:930px;clear:both;}
.scheme_1 div.middle {margin-left:5px;width:294px;}

#btm-mods div.countin3 {width:263px;}
#btm-mods div.countin2 {width:420px;}
#btm-mods div.countin1 {width:890px;}
#btm-mods div.last {margin-left:0;margin-right:20px;}
/* $3 - Display Options
----------------------------------------------------------------------------*/
/* Generic Options Defaults */

.menu,
.menu li,
.menu li a{
	list-style-type:none;
}

.horizontal li,
.horizontal li a{
	display:block;
	float:left;
}

/* Clear Fix */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	overflow:hidden;
}

.clearfix {display: inline-table;}
/* Hides From IE Mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End Hide from IE Mac */

#displayOptions li {
	height:20px;
	overflow:hidden;
	display:inline;
	background: none;
	margin: 0;
	padding: 0 5px;
}

#displayOptions a {
	padding-top:20px;
	height:0;
	overflow:hidden;
	background-position: 0 0;
	background-repeat:no-repeat;
	font-size:10px;
}

#displayOptions li a:hover {
	background-color:transparent;
}


/************* OFF STATES *************/
/* Text Sizes */
#toolbar li a#textMedium {background-image:url(../images/small.png); width:11px; outline: 0;}
#toolbar li a#textLarge {background-image:url(../images/medium.png); width:11px; outline: 0;}
#toolbar li a#textXLarge {background-image:url(../images/large.png); width:11px; outline: 0;}

/************* HOVER STATES *************/
#toolbar li a#textMedium:hover,
#toolbar li a#textLarge:hover,
#toolbar li a#textXLarge:hover {
background-position: 0 -22px; }

/************* ACTIVE STATES *************/
#toolbar li a#textMedium.active-option,
#toolbar li a#textLarge.active-option,
#toolbar li a#textXLarge.active-option {
background-position: 0 -22px; }


/*----------------------------------------------------------------------------
Customise Style Sheet

Name: 			JJ Ario
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: 120%;
	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%;
	color:#999900;
}

h2 {
	font-size: 200%;
	color:#B71E00;
}

h3 {
	font-size: 160%;
	color:#999900;
}

h4 {
	font-size: 130%;
}

h5 {
	font-size: 115%;
	color:#B71E00;
}

h6 {
	font-size: 110%;
	color:#999900;
}

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

a:hover {
	color: #999000;
}

#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;
	background: #aba91e;
}

.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*/
color: #999900;
}

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 {
	color:#999900;
}

a.contentpagetitle:hover {
	color:#bcf219;
}

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
}
.inputbox:hover, .inputbox:focus {
	border-color: #BFEE28;
}

.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;
	border: 1px solid #96c210;
	cursor: pointer;
    margin: 1px;
    font:bold 12px/100% Arial;
    background: #b8b800 url(/@/images/buttonbg.png) top left repeat-x;
}

select.inputbox {
	background:#333 !important;
	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 {
	font-size: 100%;
	padding: 10px;
	margin: 0 0 5px 0;
	display: inline-block;
}

.moduletable-ario h3, .moduletable 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.h3stripedgreen h3,
div.h3stripeddark h3 {
	height:29px;
	line-height:29px!important;
	padding:0 0 0 10px;
	margin: 0 -10px 10px -10px;
        color: #fff;
}

div.h3stripedgreen h3 {background: #809E1B url(/@/images/h3stripedgreen.png);}
div.h3stripeddark h3 {background: #333 url(/@/images/h3stripeddark.png);}

div.h3green h3 {color:#666600;}
div.h3red h3 {color:#920000;}
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;
}

/*----------------------------------------------------------------------------
Customise Style Sheet

Name: 				JJ iLuv
Date: 				2007-06-30
Description: 		A dark Web 2.0 two-column template.
Author: 			JoomlaJunkie
URL: 				http://www.joomlajunkie.com

Stylesheet Index:
	$1 - Top Tools Menu
	$2 - Top Menu / Suckerfish menu

NOTE: Always make a backup of your stylesheets before editing!
NB!! Use the search function to find a section, eg: search for $2 for Sidebar menu
----------------------------------------------------------------------------*/

/* Common CSS
----------------------------------------------------------------------------*/

/* $1 - Top Tools Menu
----------------------------------------------------------------------------*/

ul#mainlevel-top, ul#text-size {
	float:right;
	width:auto;
	display:inline;
	margin:0;
	padding:0;
}

ul#mainlevel-top li {
	background: none;
	width:11px;	height:19px;
	margin-right:25px;
	padding:0;
	float:left;
	display:inline;
	overflow:hidden;
	position:relative;
}

ul#mainlevel-top a {
	display:block;
	position:absolute;
	text-indent: 7998px;
	top:0;left:0;
	width:11px;	height:19px;
	overflow:hidden;
	cursor:pointer;
}

/* $2 - Top Suckerfish Menu
----------------------------------------------------------------------------*/

ul#mainmenu-nav {
	bottom: 0;
	margin: 0;
	border: 0 none;
	padding: 0;
	list-style: none;
	display:inline;
	height: 36px;
	z-index: 100;
	float: left;
	margin: 11px 0 0 17px;
}

ul#mainmenu-nav li {
	margin: 0;
	border: 0 none;
	padding: 0 1px 0 0;
	float: left;
	background: url(/@/images/menu-seperator.png) no-repeat bottom right;
	/*For Gecko*/
	display: inline;
	list-style: none;
	position: relative;
	text-indent: 0px;
}

ul#mainmenu-nav li ul {
	border: 1px solid #000;
	border-bottom:0;
	z-index: 100;
}

ul#mainmenu-nav li ul {
	margin: 0;
	padding: 0;
	width: 200px;
	list-style: none;
	display: none;
	position: absolute;
	top: 36px;
	left: -1px;
}

ul#mainmenu-nav ul:after

/*From IE 7 lack of compliance*/ {
	clear: both;
	display: block;
	font: 1px/0px serif;
	content: ".";
	height: 0;
	visibility: hidden;
}

ul#mainmenu-nav ul li {
	position: relative;
	top: 0;
	padding: 0;
	bottom: 0;
	z-index: 100;
	width: 200px;
	float: left;
	border-bottom: 1px solid #111;

	/*For IE 7 lack of compliance*/
	display: block !important;
	display: inline;
	/*For IE*/
}

ul#mainmenu-nav ul li {
	background: transparent url(/@/images/nav-ul-transp.png);
}

ul#mainmenu-nav ul li:hover {
	background: transparent url(/@/images/nav-ul-transp-hover.png);
}

/* $1 - Top level menu items in their normal state
----------------------------------------------------------------------------*/

ul#mainmenu-nav a {
	padding: 0 16px;
	margin: 0;
	float: none !important;
	/*For Opera*/
	float: left;
	/*For IE*/
	display: block;
	color: #fff;
	font-weight: bold;
	font-size: 1em;
	text-decoration: none;
	font-family:Arial;

	/*For IE*/
	line-height: 29px;
	height: 36px;
}

ul#mainmenu-nav ul a {
	height: auto !important;
	height: 1%;
	color: #ccc;
}

ul#mainmenu-nav a.haschild {
	background: transparent url(/@/images/has-child.gif) no-repeat 50% 23px;
}

/* Active */
#mainmenu-nav #active_menu-nav {
	color: #fff;
	background-color: #0070ff;
	margin: 0;
}

#mainmenu-nav #active_menu-nav:hover {

}

#mainmenu-nav #active_menu-nav.haschild:hover {
	background: #9ccd0d url(/@/images/nav-hover-child.gif) no-repeat 51% 23px;
}
ul#mainmenu-nav li:hover a.haschild,
ul#mainmenu-nav li.iehover a.haschild {
	background:  url(/@/images/nav-hover-child.gif) no-repeat 51% 23px;
}

#mainmenu-nav li a#active_menu-nav.hassubchild {

}

#mainmenu-nav li a#active_menu-nav.haschild {
}

/* $1 - Top level menu items in their hover state
----------------------------------------------------------------------------*/

ul#mainmenu-nav a:hover,
ul#mainmenu-nav li:hover a,
ul#mainmenu-nav li.iehover a {
	color: #fff;
	background: transparent url(/@/images/nav-hover.gif) no-repeat 50% 31px;
}

ul#mainmenu-nav a.haschild:hover {
	background: #9ccd0d url(/@/images/nav-hover-child.gif) no-repeat 50% 23px;
	color: #fff;
}

/* $1 - Normal state on all levels with NO Child Elements
----------------------------------------------------------------------------*/

/* 2nd Menu Normal State*/

ul#mainmenu-nav li:hover li a,
ul#mainmenu-nav li.iehover li a,
/* 3rd Menu Normal State*/
ul#mainmenu-nav li:hover li:hover li a,
ul#mainmenu-nav li.iehover li.iehover li a,
/* 4th Menu Normal State*/
ul#mainmenu-nav li:hover li:hover li:hover li a,
ul#mainmenu-nav li.iehover li.iehover li.iehover li a {
	float: none;
	padding: 0 20px 0 10px;
	color: #ccc;
	display: block;
	border: none;
	margin: 0;
	line-height: 28px;
	font-weight: normal;
	cursor:pointer;
	font-family: Trebuchet MS;
	font-size: 1.1em;
	letter-spacing:0.06em;
	background-image:none;
}

/* $2 - Hover state on all levels with NO Child Elements
----------------------------------------------------------------------------*/
/* 2nd Menu Hover Persistence */
ul#mainmenu-nav li:hover li a:hover,
ul#mainmenu-nav li:hover li:hover a,
ul#mainmenu-nav li.iehover li a:hover,
ul#mainmenu-nav li.iehover li.iehover a,
/* 3rd Menu Hover Persistence */
ul#mainmenu-nav li:hover li:hover li a:hover,
ul#mainmenu-nav li:hover li:hover li:hover a,
ul#mainmenu-nav li.iehover li.iehover li a:hover,
ul#mainmenu-nav li.iehover li.iehover li.iehover a,
/* 4th Menu Hover Persistence */
ul#mainmenu-nav li:hover li:hover li:hover li a:hover,
ul#mainmenu-nav li:hover li:hover li:hover li:hover a,
ul#mainmenu-nav li.iehover li.iehover li.iehover li a:hover,
ul#mainmenu-nav li.iehover li.iehover li.iehover li.iehover a {
	color: #fff;
	margin: 0;
}

/* $3 - Normal state on all levels with Child Elements
----------------------------------------------------------------------------*/
/* 2nd Menu Normal State - With Child Elements */
ul#mainmenu-nav li:hover li a.hassubchild,
ul#mainmenu-nav li.iehover li a.hassubchild,
/* 3rd Menu Normal State - With Child Elements */
ul#mainmenu-nav li:hover li:hover li a.hassubchild,
ul#mainmenu-nav li.iehover li.iehover li a.hassubchild,
/* 4th Menu Normal State - With Child Elements */
ul#mainmenu-nav li:hover li:hover li:hover li a.hassubchild,
ul#mainmenu-nav li.iehover li.iehover li.iehover li a.hassubchild {
	float: none;
	padding: 0 20px 0 10px;
	background: url(/@/images/hassubchild.gif) no-repeat 97% 10px;
	color: #ccc;
	border-right: none;
	margin: 0;
}

/* $4 - Hover state on all levels with Child Elements
----------------------------------------------------------------------------*/
/* 2nd Menu Hover Persistence - With Child Elements */
ul#mainmenu-nav li:hover li a.hassubchild:hover,
ul#mainmenu-nav li:hover li:hover a.hassubchild,
ul#mainmenu-nav li.iehover li a.hassubchild:hover,
ul#mainmenu-nav li.iehover li.iehover a.hassubchild,
/* 3rd Menu Hover Persistence - With Child Elements */
ul#mainmenu-nav li:hover li:hover li a.hassubchild:hover,
ul#mainmenu-nav li:hover li:hover li:hover a.hassubchild,
ul#mainmenu-nav li.iehover li.iehover li a.hassubchild:hover,
ul#mainmenu-nav li.iehover li.iehover li.iehover a.hassubchild {
	color: #fff;
}

/* $4 - Active state on all levels with Child Elements
----------------------------------------------------------------------------*/

#mainmenu-nav ul #active_menu-nav {
	font-weight: normal;
	background-color: #111 !important;
}

/* $4 - Active state on all levels with Child Elements
----------------------------------------------------------------------------*/
ul#mainmenu-nav ul ul,
ul#mainmenu-nav ul ul ul {
	display: none;
	position: absolute;
	top: 5px;
	left: 200px;
	margin: 0;
}

ul#mainmenu-nav ul {
	font-size: 10px;
}

ul#mainmenu-nav ul ul li {
	width: 200px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#mainmenu-nav li:hover ul ul,
ul#mainmenu-nav li:hover ul ul ul,
ul#mainmenu-nav li.iehover ul ul,
ul#mainmenu-nav li.iehover ul ul ul {
	display: none;
}

ul#mainmenu-nav li:hover ul,
ul#mainmenu-nav ul li:hover ul,
ul#mainmenu-nav ul ul li:hover ul,
ul#mainmenu-nav li.iehover ul,
ul#mainmenu-nav ul li.iehover ul,
ul#mainmenu-nav ul ul li.iehover ul {
	display: block;
}

ul#mainmenu-nav li ul a {
	border-left: 10px solid green;
}

/* $3 - Side menu
----------------------------------------------------------------------------*/

ul#mainlevel {
	margin:-9px -10px 0 -10px;
}

ul#mainlevel li {
	background: transparent url(/@/images/sidenav-sep.png) bottom repeat-x;
	padding:0 0 1px 0;
}

ul#mainlevel li a {
    display: block;
    padding-left: 25px;
    text-decoration: none;
    font:normal 1.1em/29px Arial;
    color:#333;
	text-decoration:none;
	background: url(/@/images/mbg.gif) 9px 10px no-repeat;
}

ul#mainlevel li a:hover {
	display: block;
	color:#333;
	text-decoration:none;
	background-color:#FDFEF1;
}

ul#mainmenu-nav .submenu { position:absolute; z-index:10; white-space:nowrap; width:auto; background:#2686ff; padding:0 6px }
ul#mainmenu-nav .submenu a { padding:6px 10px; height:auto; line-height:1.6; width:auto; display:inline-block; zoom:1; }
ul#mainmenu-nav .submenu a:hover {color:#c8ff51; }