/*----------------------------------------------------------------------------
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(customise.css);
@import url(menu.css);
@import url(blue.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
----------------------------------------------------------------------------*/
html{
	background: #FFFFFF;
}
div#content{
	float: left;
	/*margin-left:140px;*/
	/*margin-left:285px;*/
	float: right;
	padding: 0;
	width:75%;
	height:100%;
}

div#contentsidebar{
	float:left;
	/*width:140px;*/
	width:200px;
	top:0px;
	/*padding-top: 10px;*/
}

body{
background: #090909;
margin:0;padding:0
}

.padding {
padding: 0px 0px;
}

#content .padding {
padding: 5px 15px;
}

div#colorbar {
background: url(../image/colorbar.jpg) repeat-x;
overflow: hidden;
height: 3px;
}

div#navbar{
	position: relative;
	/*background: #242424;*/
	background:url(./img/header.png) no-repeat left;
	height:121px;
	border-right: 1px solid gray;
	margin:0;
}
div#headertxt{padding:16px 0 0 0; margin:0 134px 0 0; width:270px; float:right; display:block; text-align:center;}
div#navbar_address{padding:0; margin:0; font:normal 12px Arial, Helvetica, sans-serif; color:#289FEB;}
div#navbar_address span{ text-transform:uppercase; font-weight:bold; font-size:16px;}
div a#sendto { padding:0; margin:0; font:normal 12px Arial, Helvetica, sans-serif; color:#289FEB; text-decoration:underline;}
div a#sendto:hover{text-decoration:none; color:#289FEB;}
div#header{
	background:white url(./img/header-bg.png) repeat-x ;
	height:121px;
}

div#body_header{
	height:75px;
	border-right: 1px solid gray;
	background:white url(./img/body_header.png) no-repeat right ;
}

/*div#navbar_address{
	float:right; 
        line-height:1.2;
        margin-top:10px; 
        margin-right:20px; 
        font-family:11px verdana; 
        padding-right: 7px; 
        text-align: right;
}
*/
div#navbar h2 {
	background: url(../image/branding_white.png) no-repeat;
	position: absolute;
	left: 40px;
	top: 15px;
	width: 400px;
	height:120px;
	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;
width:100%
}

div#content p{
line-height:1.4
}

/*styles for first content area in white*/
#contentfaux {
background: white;
/*background-image:url(../image/background.gif);*/
overflow: hidden;
background-repeat:repeat-x;
}

div#contentwrapper{
	float:left;
	width:100%;
	background-color: white;
}

/*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(../image/footer-bg.jpg) repeat-x;*/
	background-color: white;
	border-right: 1px solid gray;
}

div#footer p{
        margin:0;padding:5px 5px
}


/* $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(../image/option-blue.jpg); width:18px}
#displayOptions li a#colorRed {background-image:url(../image/option-red.jpg); width:18px}
#displayOptions li a#colorGreen {background-image:url(../image/option-green.jpg); width:18px}
#displayOptions li a#colorOrange {background-image:url(../image/option-orange.jpg); width:18px}
/* Text Sizes */
#displayOptions li a#textMedium {background-image:url(../image/option-font-sml.jpg); width:18px}
#displayOptions li a#textLarge {background-image:url(../image/option-font-medium.jpg); width:18px}
#displayOptions li a#textXLarge {background-image:url(../image/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(../image/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;
}
.products, .images, .categories {
	float: left;
	width: 33.3%; 
	text-align: center; 
	cursor: pointer;
	font-size: 10px; 
	height: 140px;
}

.categories a {
	text-decoration: none;
}

.images a {
	font-size: 10px;
}

.images img, .categories img {
	border: 0px;
	margin-bottom: 10px;
}
.heading .left {
	float: left;
	text-align: left;
}
 
.heading .right {
	float: right;
	text-align: right;
}

.results {
	clear: both;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
	height: 20px;
}

.results .left {
	float: left;
	padding-top: 4px;
}
 
.results .right {
	float: right;
} 
 
.buttons {
	border: 1px solid #EEEEEE;
	margin: 10px 0px;

	clear: both;
}

.buttons input {
	height: 24px;
	margin: 3px;
}

.buttons table {
	width: 100%;
}

div#ftpupload_button{
	width:280px;
	height: 60px;
	padding-bottom:0px;
	margin:0px;
	background:white url(./img/fileupload.jpg);
	background-repeat:no-repeat;
	background-position: bottom left;

}
div#home_button{
	width:280px;
	height:47px;
	padding-bottom:0px;
	margin:0px;
	background:white url(./img/home_button.jpg);
	background-repeat: no-repeat;
	background-position: bottom left;
}
div#services{
        width:280px;
        height:47px;
        padding:0px;
        margin:0px;
        background:white url(./img/services_button.jpg);
        background-repeat: no-repeat;
        background-position: bottom left;
}
div#promo{
	width:200px;
        height:47px;
        padding:0px;
        margin:0px;
        background:white url(./img/promo_button.jpg);
        background-repeat: no-repeat;
        background-position: bottom left;
}
div#special{
	width:200px;
        height:47px;
        padding:0px;
        margin:0px;
        background:white url(./img/special_button.jpg);
        background-repeat: no-repeat;
        background-position: bottom left;
}
div#fileupload{
  	width:200px;
        height:47px;
        padding:0px;
        margin:0px;
        background:white url(./img/fileupload_button.jpg);
        background-repeat: no-repeat;
        background-position: bottom left;
}

div#fileupload_2{
  	width:200px;
        height:47px;
        padding:0px;
        margin:0px;
        background:white url(./img/fileupload_button.jpg);
        background-repeat: no-repeat;
        background-position: bottom left;
}

div.info_menu_button{
        width:200px;
        height:47px;
        padding:0px;
        margin:0px;
        /*background:white url(./img/clientlogin.jpg);*/
        background-repeat: no-repeat;
        background-position: bottom left;
		text-align:center;
		vertical-align: middle;
		display:table-cell; 

}
table#slideshowtable{
	width: 400px;
	margin-top:0px;
	margin-left:0px;
	font-size: 0em;
}

table#cart_buttons{
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}