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

Name: 				JJ FlexPhotosLite
Date: 				2007-04-17
Description: 		A dark and lite flexi 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 - Info
----------------------------------------------------------------------------*/

/*This calls the other css files!!*/
@import url(customise.css);
@import url(menu.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
----------------------------------------------------------------------------*/
body {
    margin: 0;
    padding: 0;
	font-family: Lucida Grande, Verdana, Arial;
	font-color: #000000;
	line-height: 135%;
	background: #FFFFFF;
}
.titleCell {
    width: 200px !important;
}
/* Do NOT change these 2 styles, column2 and column1 for 
necessary structural purposes */

div#top {
	background: #202020 url(../images/top.jpg) repeat-x;
    height: 120px;
    margin: 0;
	position: relative;
}

#top h1 a {
	position: absolute;
	left: 30px;
	top: 28px;
	width: 287px;
	height: 62px;
	margin: 0;
	padding: 0;
	text-indent: -7887px;
	z-index: 100;
}

#top h1 {
	margin: 0;
	padding: 0;
}

#top form {
        margin: 0;
}

#top p.login-btn {
	background:url(../images/login-button.jpg) no-repeat;
	position: absolute;
	right: 171px;
	top: 0;
	width: 141px;
	height: 25px;
	margin: 0;
	padding: 0;
	text-indent: -7887px;
	z-index: 100;
	outline: 0;
	cursor: pointer;
}

#banner{
	position: absolute;
	bottom: 16px; 
	right: 20px;
}
div#menu {
	background:url(../images/menu.jpg) repeat-x;
	position: relative;
    height: 47px;
    margin: 0;
}

div#top_shelf {
    margin: 0;
    padding: 0;
	overflow: hidden;
	padding: 0 20px;
}

div.pathway {
	background: #fff url(../images/pathway.jpg) repeat-x top left;
	height: 28px;  
	line-height: 27px;
	margin: 0;
	padding: 0 0 0 20px;
	z-index: 3;
	overflow: hidden;
}

div#footer_shelf {
	background: #131919 url(../images/footer-shelf.jpg) repeat-x;
    margin: 0;
    padding: 0;
	overflow: hidden;
}

#contentwrap {
	background-color:#fff;
	overflow: hidden;
	height: 1%;
}

#left { 
	float:left;
	width:190px;
	margin: 20px 0 0 20px;
	display:inline;
}

#right { 
	float:right;
	width:190px;
	margin: 20px 20px 0 0;
	display:inline;
	height: 1%;
}

#center { 
	margin-right:215px;
	margin-left:215px;
	padding: 20px;
	height: 1%;
}
 
div#footer{
	overflow: hidden;
	color: white;
	height: 150px;
	padding: 0 20px;
	clear: both;
}

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

div#footer a{
	color: gray;
	text-decoration: underline;
}

div#footer a:hover{
	text-decoration: none;
}

}

.credits {
	width: 300px;
	float: right;
	text-align: right;
}

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

/* User control Panel */
#top a.logout-link {
	background:url(../images/logout.jpg) no-repeat;
	position: absolute;
	right: 171px;
	top: 0;
	width: 141px;
	height: 25px;
	margin: 0;
	padding: 0;
	text-indent: -7887px;
	z-index: 100;
	outline: 0;
	display:  block;
}

.greeting{
	position: absolute;
	right: 320px;
	top: 7px;
	text-align:right;
	width:300px;
	text-transform: capitalize;
	font: normal 12px Arial;
	color: #FAE08B;
}

.user-account{
	font: normal 12px Arial;
	color: #ccc;
	background: url(../images/account.png) no-repeat right center;
	text-indent: -7998px;
	padding-right: 18px;
}

/* $3 - Display Options
----------------------------------------------------------------------------*/
/* Generic Options Defaults */
div#options-wrap{
	height:25px;
	position: absolute;
	top: 0;
	right: 17px;
	z-index: 10000;
}

#displayOptions {
	height:25px;
	float:left;
	width: 154px;
	background:url(../images/optionsbar.jpg) no-repeat right top;
}

.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:25px;
	margin:0;
	padding:0;
	padding-left: 4px;
}

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

#displayOptions a {
	padding-top:25px;
	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:12px; outline: 0;}
#displayOptions li a#colorRed {background-image:url(../images/option-red.jpg); width:12px; outline: 0;}
#displayOptions li a#colorOrange {background-image:url(../images/option-orange.jpg); width:12px; outline: 0;}
#displayOptions li a#colorGreen {background-image:url(../images/option-green.jpg); width:12px; outline: 0;}
/* Text Sizes */
#displayOptions li a#textMedium {background-image:url(../images/option-font-small.jpg); width:12px; outline: 0;}
#displayOptions li a#textLarge {background-image:url(../images/option-font-medium.jpg); width:12px; outline: 0;}
#displayOptions li a#textXLarge {background-image:url(../images/option-font-large.jpg); width:12px; outline: 0;}

/************* HOVER STATES *************/
#displayOptions li a#colorBlue:hover,
#displayOptions li a#colorRed:hover,
#displayOptions li a#colorOrange:hover,
#displayOptions li a#colorGreen:hover,
#displayOptions li a#textMedium:hover,
#displayOptions li a#textLarge:hover,
#displayOptions li a#textXLarge:hover {
background-position: 0 -26px; }

/************* ACTIVE STATES *************/
#displayOptions li a#colorBlue.active-option,
#displayOptions li a#colorRed.active-option,
#displayOptions li a#colorOrange.active-option,
#displayOptions li a#colorGreen.active-option,
#displayOptions li a#textMedium.active-option,
#displayOptions li a#textLarge.active-option,
#displayOptions li a#textXLarge.active-option {
background-position: 0 -52px; }

/* $4 - Collapsible Columns
----------------------------------------------------------------------------*/
table.nospace {
	border: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	font-color: #000000;
}

table.nospace td {
	margin: 0;
	padding: 0;
	font-color: #000000;
}

/* Signals out only top shelf */
table.nospace td.tsl,
table.nospace td.tsc,
table.nospace td.tsl {
	width: 33%;
}

.userboxes table.nospace td {
	margin:0;
	padding: 0;
}

/* Login Box Styling */
#LoginWrap{
	position:absolute;
	top: 19px;
	right: 19px;
	width: 293px;
}

#LoginBox{
	width: 293px;
	height: 88px;
	background: #212121 url(../images/login-bg.jpg) repeat-x;
	position: relative;
	font: normal 11px Lucida Sans;
	color: #999;
	border: 1px solid #000;
	visibility: hidden;
}

#LoginBox input#mod_login_username,
#LoginBox input#mod_login_password{
	width: 114px;
	height: 16px;
	background: #000;
	border: 1px solid #333;
	color: #999;
	font: normal 11px Lucida Sans;
	padding: 0 4px;
	padding-top: 2px;
}

#LoginBox input#mod_login_username,
#LoginBox input#mod_login_password,
#LoginBox input#mod_login_remember,
#LoginBox .label-username,
#LoginBox .label-password,
#LoginBox .label-remember,
#LoginBox .btn-login,
#LoginBox .login-register,
#LoginBox .login-close{
	position: absolute;
}

#LoginBox .label-username,
#LoginBox .label-password{
	text-indent: -7998px;
}

#LoginBox input#mod_login_username{
	top: 2px;
	left: 5px;
}

#LoginBox input#mod_login_password{
	top: 28px;
	left: 5px;
}

#LoginBox input#mod_login_remember{
	top: 5px;
	left: 144px;
}

#LoginBox .label-remember{
	top: 9px;
	left: 170px;
}

#LoginBox .login-register{
	top: 28px;
	left: 149px;

}

#LoginBox .btn-login{
	top: 64px;
	left: 10px;
	background: #000;
	border: 1px solid #333;
	color: #999;
	font: normal 11px Lucida Sans;
	width: 70px;
}

#LoginBox .login-close{
	top: 10px;
	right: 10px;
	background: url(../images/login-close.jpg) no-repeat;
	width: 19px;
	height: 15px;
	display: block;
	text-indent: -7998px;
	outline: none;
}

/* This is the styling for the top and bottom shelf toggle */
#toggle_shelf_top {
	background: #ccc url(../images/open_close_shelf.png) no-repeat;
	height: 27px;
	width: 94px;
	text-indent: -7998px;
	margin-top: -27px;
	margin-right: 20px;
	float: right;
	cursor: pointer;
	outline: 0;
	display:inline;
	z-index:10;
}

/* forces safari to position the button correctly */
body:last-child:not(:root:root) #toggle_shelf_top { 
	margin-top: 0;
}

#toggle_shelf_bottom {
    background: #000 url(../images/open_close_shelf.png) no-repeat;
    height: 25px;
    width: 94px;
    text-indent: -7998px;
    cursor: pointer;
    position: absolute;
    right: 10px;
    margin: 0;
    top: 1px;
    padding: 0;
    display: block;
}

.infobar {
    background: #222D2D url(../images/pathway.jpg) repeat-x top left;
    height: 28px;  
    line-height: 27px;
    margin: 0;
    padding: 0 0 0 20px;
    overflow:hidden;
        position: relative;
}

/*Community Builder Bug Fixes */

.dynamic-tab-pane-control.tab-pane {
        overflow: hidden;
}

.cbPosTop    {
        overflow: hidden;
}

/*REmository Builder Bug Fixes */

#remositorypageheading, #remositorycredits {
clear:none;
}

#remositoryfooter {
clear:none;
}
div#footer td{
text-align: center;
}
div#footer tr td a{

margin-right: 20px;

}