/*		layout.css  /  February 2008  /  by Ben Wnuk   	*/
/*		Seattle Bike Supply template style sheet      	*/
/*		These styles specific to the template						*/


#body-wrapper { /* min-height very important, holds footer at bottom of page */
	position:							relative;
	min-height:						100%;
	min-width:						756px;
	border-left:					12px solid #5d5d5d;
	border-right:					12px solid #5d5d5d;
}
.headnav {
	position:							relative;
	width:								100%;
	margin:								0 -12px;
	border-bottom:				1px solid white;
	background-color:			#525252;
	background-image:			url(/images/layout/button-combo2.png);
	background-position:  -4002px center; 
}
.headnav div {
	padding:							0 2px 0 0;
	margin-left:					-1px;
	background-image: 		url(/images/layout/button-combo2.png);
	background-position:  right center;
}
.headnav table {
	width:								100%;
}
.headnav td {
	color:								#ffffff;
	height:								24px;
}
.headnav td.wide {
	width:								25%;
}
.headnav td.narrow {
	width:								12.5%;
}
.headnav a {
	color:								#ffffff;
	text-align:						center;
	display:							block;
	padding:							0 6px;
	background-image:			url(/images/layout/button-combo2.png);
	background-position:  -4000px center;
	text-decoration:			none;
	line-height:					24px;
	height:								100%;
}
.headnav a:link, 
.headnav a:hover, 
.headnav a:visited, 
.headnav a:active {
	color:								#ffffff;
}
.headnav a:hover {
	background-position:  left center;
}
.headnav a:active {
	background-position:  -2000px center;
}

/* !NAV BAR SEARCH FORM */

#search_box {
	color:								#ffffff;
	display:							block;
	background-image:			url(/images/layout/button-combo2.png);
	background-position:  -4000px center;
	text-decoration:			none;
	line-height:					24px;
	height:								100%;
}
#search_box form {
	display:							block;
	padding:							2px 48px 0 8px;
}
#search_box form #f {
	display:							block;
	padding:							2px;
	border:								1px solid white;
	background-image:			url(/images/layout/black_trans.png);
	background-color:			transparent;
	color:								#dddddd;
	width:								100%;
	height:								14px;
}
#search_box form .go_button {
	background-color:			transparent;
	color:								white;
	display:							block;
	position:							absolute;
	top:									2px;
	right:								6px;
	width:								26px;
	height:								18px;
	font-weight:					bold;
	cursor:								pointer;
}

/* !HEADER */

#header { /* contains SBS logo and decorative background image. */
	position:							relative;
	margin:								0 -12px 0 -12px;
	padding:							0 12px 0 12px;
	width:								100%;
	height:								96px;
	border-bottom:				1px solid #ffffff;
	background-position:	left top;
	background-repeat:		repeat-x;
	background-color:			#22458A;
	background-image:			url(/images/layout/header-stripes.png);
	z-index:							8;
}
#header #sbs {
	position:							absolute;
	top:									8px;
	left:									27px;
	width:								160px;
	height:								80px;
	z-index:							50;
}
#flash { /* flash notification box, positioned by headnav to be below any decending nav buttons */
	position:							absolute;
	bottom:								12px;
	left:									190px;
	margin-right:					34%;
	display:							block;
	color:								#FFFFFF;
	text-align:						left;
	font-size:						15px;
}
#user_nav {
	padding:							8px 12px 0px 0px;
	margin-left:					180px;
	color:								#ffffff;
	overflow:							hidden;
	text-align:						right;
}
#user_nav table {
	width:								auto;
	margin:								0 0 0 auto;
}
#user_nav table a {
	color:								#ffffff;
	display:							block;
	padding-left:					6px;
	padding-bottom:				6px;
	width:								130px;
	letter-spacing:				.7px;
	font-size:						10px;
	text-align:						left;
}
#user_nav table img {
	vertical-align:				middle;
	top:									-1px;
}
#alive_chat {
	float:right;
}

/* !TITLE CONTAINER */

.page_title { /* contains page title section */
	position:							relative;
	width:								100%;
	height:								3px;
	margin-bottom:				-3px;
	border-top:						6px solid #5d5d5d;
	z-index:							500;
}
.page_title h1 { /* page title, floats left so right side corners can be positioned */                                                                
	position:							absolute;
	top:									-6px;
	left:									0px;
	padding:							3px 24px 3px 24px;
	background-image:			url(/images/layout/title-br.png);
	background-repeat: 		no-repeat;
	background-position: 	bottom right;
	background-color:			#5d5d5d;
	float:								left;
	color:								white;
	overflow:							visible;
}
.page_title .c1, 
.page_title .c2, 
.page_title .c3 {
	position:							absolute;
	display:							block;
	background-image:			url(/images/layout/corners-greycombo.png);
	width:								3px;
	height:								3px;
}
.page_title .c1 { /* rounded corner where h1 tab meets upper border */
	top:									6px;
	right:								-3px;
	background-position:	0px 0px;
}
.page_title .c2 { /* rounded corner where h1 tab meets far left border */
	top:									18px;
	left:									0px;
	background-position:	0px 0px;
}
.page_title .c3 {
	top:									0px;
	right:								0px;
	background-position:	3px 0px;
	z-index:							5001;
}

/* !CONTENT CONTAINER > SEE SECTIONS AND STYLE SHEETS */

#content { /* all site content goes within this container */
	position:							relative;
	padding:							0 0 32px 0;
}

/* !FOOTER CONTAINER */

#footer { /* pushed below content-wrapper, moved to bottom of page with negative margin */
	position:							relative;
	width:								100%;
	min-width:						780px;
	height:								25px;
	margin:								-25px 0 0 0;
	background-color:			#5d5d5d;
}
#footer p {
	position:							relative;
	display:							block;
	top:									6px;
	color: 								#b3bbcc;
	border-top:						1px solid white;
	text-align:						center;
	background-image:			url(/images/layout/header-stripes.png);
	background-position:	center;
}
#footer a {
	color: 								#b3bbcc;
}
#footer .corner-bl, 
#footer .corner-br {
	position:							absolute;
	top:								  -3px;
	width:								3px;
	height:								3px;
	background-image:			url(/images/layout/corners-greycombo.png);
	background-repeat:		no-repeat;
}
#footer .corner-bl { /* bottom left rounded corner for content box */
	left:									12px;
	background-position:	bottom left;
}
#footer .corner-br { /* bottom right rounded corner for content box */
	right:								12px;
	background-position:	bottom right;
}

/* !COLUMNT AND LAYOUT STYLES START HERE */

.column_12,
.column_15,
.column_20,
.column_25,
.column_33,
.column_36,
.column_40,
.column_44,
.column_50,
.column_60,
.column_65,
.column_66,
.column_75,
.column_85 {
	position:							relative;
	float:								left;
	margin-right: 				-1px;
	margin-left: 					-1px;
}
.column_85 {
	width:								85%;
}
.column_75 {
	width:								75%;
}
.column_66 {
	width:								65%;
}
.column_65 {
	width:								65%;
}
.column_60 {
	width:								60%;
}
.column_50 {
	width:								50%;
}
.column_44 {
	width:								44%;
}
.column_40 {
	width:								40%;
}
.column_36 {
	width:								36%;
}
.column_33 {
	width:								33%;
}
.column_25 {
	width:								25%;
}
.column_20 {
	width:								20%;
}
.column_15 {
	width:								15%;
}
.column_12 {
	width:								12%;
}
.column_center50 {
	width:								50%;
	margin:								0 auto;
}
.divide {
	border-left:					1px dashed #a2c4ea;
	margin-right:					-1px;
}

.main_column {
	position:							relative;
	width:								66%;
	margin-right:					34%;
	float:								left;
}
.center720 {
	position:							relative;	
	width:								auto;
	max-width:						720px;
	margin:								0 auto;
	float: 								none;
}
.right_pane {
	position:							relative;
	width:								34%;
	margin-left:					-34%;
	float:								left;
}
.column_left260 {
	position:							relative;
	width:								260px;
	margin-right:					-260px;
	float:								left;
	z-index:							100;
}
.column_rest260 {
	position:							relative;
	padding-left:					260px;
	z-index:							90;
}
.column_left180 {
	position:							relative;
	width:								180px;
	margin-right:					-180px;
	float:								left;
	z-index:							100;
}
.column_rest180 {
	position:							relative;
	padding-left:					180px;
	z-index:							90;
}