/*
	Stylesheet for examples by DevHeart.
	http://devheart.org/

	Article title:	jQuery: Collapsible sidebar layout
	Article URI:	http://devheart.org/articles/jquery-collapsible-sidebar-layout/

	Example title:	4. Adding style and usability
	Example URI:	http://devheart.org/examples/jquery-collapsible-sidebar-layout/4-adding-style-and-usability/index.html
*/

/*
	Alignment
------------------------------------------------------------------- */

/* Floats */

.left {float: left;}
.right {float: right;}

.clearer {
	clear: both;
	display: block;
	font-size: 0;
	height: 0;
	line-height: 0;
}


/*
	Misc
------------------------------------------------------------------- */

.hidden {display: none;}


/*
	Example specifics
------------------------------------------------------------------- */

/* Layout */

#center-wrapper {
	margin: 0 auto;
	width: 920px;
}


/* Content & sidebar */

#content,#sidebar {
	/* line-height: 300px;*/
	text-align: left;
	border: 1px solid;
}

#sidebar {
	/* background-color: #DEF;*/
	border-color: #BCD;
	border:0px;
	display: none;
	width:203px;
}
#content {
	/* background-color: #EFE;*/
	border-color: #CDC;
	border:0px;
	width:97%;
}

.use-sidebar #content {width: 74%;}
.use-sidebar #sidebar {
	display: block;
	width: 22%;
}

.sidebar-at-left #sidebar {margin-right: 1%;}
.sidebar-at-right #sidebar {margin-left: 1%;}

.sidebar-at-left #content, .use-sidebar.sidebar-at-right #sidebar, .sidebar-at-right #separator {float: right;}
.sidebar-at-right #content, .use-sidebar.sidebar-at-left #sidebar, .sidebar-at-left #separator {float: left;}

#separator {
	/*background-color: #EEE;*/
	background: url('images/left_arrow.gif') no-repeat;
	border: 1px solid #CCC;
	display: block;
	outline: none;
	width: 10px;
}
.use-sidebar #separator {
	background: url('images/right_arrow.gif') no-repeat;
	/*background-color: #EEE;
	border-color: #FFF;*/
}
#separator:hover 
{
	background: url('images/right_arrow.gif') no-repeat;
	/*border-color: #ABC;
	background: #DEF;/*
}