/*----------------------------------------------------------------------------

Customise Style Sheet



Name: 				JJ FlexPhotos

Date: 				2007-04-17

Description: 		A dark 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(custom.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;

	line-height: 135%;

	background: #131919;

}



/* 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: 30px;

	width: 287px;

	height: 62px;

	margin: 0;

	padding: 0;

	text-indent: -7887px;

	z-index: 100;

}



#top h1 {

	margin: 0;

	padding: 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: #222D2D url(../images/pathway.jpg) repeat-x top left;

	height: 28px;  

	line-height: 27px;

	margin: 0;

	padding: 0 0 0 20px;

	overflow:hidden;

	z-index: 3;

}



div#footer_shelf {

	background: #131919 url(../images/footer-shelf.jpg) repeat-x;

    margin: 0;

    padding: 0;

	overflow: hidden;

}



#contentwrap {

	background-color:#222D2D;

	overflow: hidden;

	height: 1%;

}



#left { float:left; width:180px; margin-top: 20px; margin-left: 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: 58px;

	line-height: 58px;

	padding: 0 20px;

	clear: both;

}



div#footer p{

	margin:0;

	padding:5px 10px

}



.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: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%;

}



table.nospace td {

	margin: 0;

	padding: 0;

}



/* 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: #000 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;

}