/*----------------------------------------------------------------------------
Style Sheet for all layout styles
Template Name:
JJ Flex
Version:
1.0
Author:
JoomlaJunkie
Support:
http://forum.joomlajunkie.com
Template Guide:
http://guides.joomlajunkie.com
Stylesheet Index:
$1 - Info
$2 - Structural CSS
$3 - Display Options
$4 - Collapsible Columns
$5 - Search box
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
----------------------------------------------------------------------------*/
/* $1 - Info
----------------------------------------------------------------------------*/
/*This calls the other css files!!*/

@import url(menu.css);
@import url(blue.css);
@import url(customise.css);
/***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
----------------------------------------------------------------------------*/
div#content2{
margin-left:200px;
padding: 0;
border-left: 1px solid #ccc;
}
div#contentsidebar{
float:left;
width:200px;
margin-left:-100%;
padding-top: 10px;
border-right: 1px solid #ccc;
}
body2{
background: #090909;
margin:0;padding:0
}
.padding {
padding: 5px 5px;
}
#content .padding {
padding: 5px 15px;
}
div#colorbar {
background: url(../images/colorbar.jpg) repeat-x;
height: 3px;
overflow: hidden;
}
div#navbar{
position: relative;
background: #242424;
height:144px;
line-height:92px;
margin:0;
padding-left:10px;
color: #79B30B
}
div#navbar h2 {
background: url(../images/branding.jpg) no-repeat;
position: absolute;
left: 40px;
top: 35px;
width: 197px;
height: 85px;
margin: 0;
padding: 0;
color: #79B30B;
text-indent: -7887px;
}
div#top-seperator {
height: 6px;
border-bottom: 5px solid white;
overflow: hidden;
}
div#bottom-seperator {
height: 9px;
overflow: hidden;
}
div#content p{
line-height:1.4
}
/*styles for first content area in white*/
#contentfaux {
background: white;
overflow: auto;
}
div#contentwrapper{
float:left;
width:100%;
}
/*end content area*/
/*styles for footer shelf*/
#footerfaux {
background: #242424;
overflow: hidden;
color: #efefef;
}
div#footerwrapper{
float:left;
width:100%;
}
div#footercontent{
padding: 0;
margin: 0;
}
/*end footer shelf*/
#shelf-bt {
height:18px;
margin-top:-20px;
position:absolute;
}
div#footer{
background: url(../images/footer-bg.jpg) repeat-x;
color: #FFF;
height: 52px;
line-height: 52px;
padding: 0 10px;
}
div#footer p{
margin:0;padding:5px 10px
}
/* $3 - Display Options
----------------------------------------------------------------------------*/
/* Generic Options Defaults */
div#options-wrap{
height:18px;
position: absolute;
top: 9px;
right: 123px;
overflow:hidden;
}
#displayOptions {
height:18px;
float:left;
}
.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 h3,
#displayOptions h4 {
position:absolute;
top:-1000em;
}
#displayOptions ul {
float:left;
display:inline;
height:18px;
margin:0;
padding:0;
}
#displayOptions li {
height:18px;
overflow:hidden;
display:inline;
background: none;
margin: 0;
padding: 0 4px;
}
#displayOptions a {
padding-top:18px;
height:0;
overflow:hidden;
background-position: 0 0;
background-repeat:no-repeat;
font-size:10px;
}
#displayOptions li a:hover {
background-color:transparent;
}
/************* OFF STATES *************/
/* Color Swatches */
#displayOptions li a#colorBlue {background-image:url(../images/option-blue.jpg); width:18px}
#displayOptions li a#colorRed {background-image:url(../images/option-red.jpg); width:18px}
#displayOptions li a#colorGreen {background-image:url(../images/option-green.jpg); width:18px}
#displayOptions li a#colorOrange {background-image:url(../images/option-orange.jpg); width:18px}
/* Text Sizes */
#displayOptions li a#textMedium {background-image:url(../images/option-font-sml.jpg); width:18px}
#displayOptions li a#textLarge {background-image:url(../images/option-font-medium.jpg); width:18px}
#displayOptions li a#textXLarge {background-image:url(../images/option-font-large.jpg); width:18px}
/************* HOVER STATES *************/
#displayOptions li a#colorBlue:hover,
#displayOptions li a#colorRed:hover,
#displayOptions li a#colorGreen:hover,
#displayOptions li a#colorOrange:hover,
#displayOptions li a#textMedium:hover,
#displayOptions li a#textLarge:hover,
#displayOptions li a#textXLarge:hover,
#displayOptions li a#sidebarLeft:hover,
#displayOptions li a#sidebarRight:hover {
background-position: 0 -21px; }
/************* ACTIVE STATES *************/
#displayOptions li a#colorBlue.active-option,
#displayOptions li a#colorRed.active-option,
#displayOptions li a#colorGreen.active-option,
#displayOptions li a#colorOrange.active-option,
#displayOptions li a#textMedium.active-option,
#displayOptions li a#textLarge.active-option,
#displayOptions li a#textXLarge.active-option {
background-position: 0 -41px; }
/* $4 - Collapsible Columns
----------------------------------------------------------------------------*/
table.nospace {
border:0;
margin-bottom:10px;
padding:0;
width:100%;
}
#footer_shelf table.nospace {
border:0;
margin:0;
padding:0;
width:100%;
}
table.nospace td {
margin:0;
padding: 0 12px;
}
/*Allows columns at the top and footer shelf to collapse*/
table.nospace td.shelf_left {
width:33%;
}
table.nospace td.shelf_center {
width:33%;
}
table.nospace td.shelf_right {
width:33%;
}
/* $5 - Search box
----------------------------------------------------------------------------*/
#navbar .inputbox {
background-image:url(../images/search-bg.jpg);
width: 92px;
height: 18px;
border: none;
color: #fff;
font-size: 80%;
margin: 0;
padding: 2px 0 0 18px;
}
#navbar .search{
position: absolute;
top: 9px;
right: 10px;
line-height: 0px;
}