/* body = Sets styles for the main body of the document.

In the Classic skin, the image pageBg.jpg specified here makes a gray area to each side and at the bottom of the skin. */

body {
	background:#FFFFFF repeat-x center 50%; margin:13px;
}

/* #pageSurround = The Page Surround defines the active area of the store.
In the Classic skin, this area is 748 pixels wide, and has a narrow, near-black line, or border, surrounding it. (Color #333333)
The background image, contentBg.jpg, is a blue & white image resembling rays, and this image also contains the CubeCart™ logo
in the top, left-hand corner. Edit or replace this image to get your logo there. */

#pageSurround {
	width: 1000px;
	margin: 0px auto;
	padding: 5px;
	border: 2px solid #333333;
	background-color: #FFFFFF;
	background-image: url(../styleImages/backgrounds/contentBg.jpg);
	background-repeat: no-repeat;
	background-position: left top;	
}

/* #topHeader =  This defines the big empty space that is invisible, and lies over the area which contains the CubeCart™ logo.
The logo, etc. can be seen through #topHeader because it is invisible - no background has been specified for it. The
only things contained in #topHeader in the Classic skin are the search form and sessions info.  */
#topHeader {
	text-align: right;
	height: 70px;
	margin-bottom: 20px;
	padding-right: 0px;
	padding-top: 90px;	
}

/* .boxTitleLeft, .boxTitleRight = Sets the styles for the Title bars and Title text above each side box.
In the Classic skin, these title bars have the image boxTitleBg.gif providing a background that give the bar a look fading from
Navy to Dark or Medium Blue. color = font color, originally white, and font-family and font-size are also specified here.  */
.boxTitleLeft, .boxTitleRight {

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 75%;
	height: 15px;
	border-top: px solid #000000;
	border-left: 0px solid #000000;
	border-right: 0px solid #000000;
	padding-left: 5px;
}

/* .boxContentLeft, .boxContentRight = These are classes that set the style of the left and right column side boxes. Each box is surrounded
by a 1 pixel wide, solid line, black color border (color #000000). Each box contains a background color which is very, very light blue (color #EBEDFE). 
The margin and padding values keep everything spaced correctly. */

.boxContentLeft, .boxContentRight {
	border: 0px solid #000000;
	padding-left: 5px;
	margin-bottom: 10px;
	padding-top: 3px;
	padding-bottom: 5px;
	width: 165px; 
}

/* .colLeft = Notice there is no background specified? .colLeft sets the position and properties of the entire invisible column 
that contains all the left side boxes. */
.colLeft {
	
	position: relative;
	left: 0px;
	width: 165px; 
	padding-left: 5px;
	padding-right: 5px;
	float: left;
}

/*  .colMid = Notice there is no background specified? .colMid sets the position and properties of the entire invisible column that 
contains all the center page content.  */
.colMid {

	position: relative;
	width: 403px;
	float: left;
}

/*  .colRight = Notice there is no background specified? .colRight sets the position and properties of the entire invisible column 
that contains all the right side boxes.  */
.colRight {

	position: relative;
	width: 165px; 
	padding-left: 5px;
	right: 0px;
	float: right;
}

/* .boxContent  =  This class sets the styles for the center page content. Stock skin has black borders, font family, size and color is set here, 
and a background color of white is set (color #FFFFFF). */
.boxContent {

	border: 0px solid #000000;
	padding-right: 20px;
	padding-left: 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 75%;
	color: #333333;
	margin-bottom: 5px;

}

/* CHECKOUT PAGES */
/*  .colLeftCheckout =  This sets the styles for the left column link box that appears in the shopping cart. It's stock properties are identical
the .colLeft class above. */

.colLeftCheckout {
	left: 0px;
	width: 165px; 
	padding-left: 0px;
	float: left;
}

/* .colMainCheckout = The large, right-side, shopping cart column - it is set to 568px wide, since there is no small, right-side column in the cart. */

.colMainCheckout {

	position: relative;

	width: 67%;

	float: left;

}


/* END CHECK OUT PAGES */



/* .siteDocs = These are the site document links that appear near the bottom of the page. This code causes them to center, 

and adds a little space between the links and the centerborder above them.  The styles of the text itself are set in another stylesheet,

"style.css" */
.siteDocs {
	text-align:center;
	margin-top: 10px;
}


/* .pagination = This sets the position of pagination, when more than one page of items is involved. The styles of the text itself 

are set in another stylesheet, "style.css"  */

.pagination {

	text-align: right;

	padding-top: 5px;

	padding-bottom: 5px;

}

/* #subCats = This is a main i.d. selector that sets background color, border and other properties of the entire area that displays

subcategories, when present.   */

#subCats {

	position: relative;

	text-align: center;

	border: 0px solid #C9CEFC;

	margin: 0px;

	padding: 3px;

	float: left;


}

/* .subCat = This is the class selector that sets the properties for each individual, invisible box holding each individual subcategory 

displayed in the larger area of #subCats.  */

.subCat {

	position: relative;

	text-align: center;

	padding: 8px;

	float: left;


}

/* .regSep  =   */

.regSep{

	padding: 10px 0px 10px 0px;

	margin: 10px 0px 10px 0px;

	border-top: 1px solid #cccccc;

	border-bottom: 1px solid #cccccc;

}