/* Generic stylesheet as used by SB3D
Note: 
Some of the tools that are part of SB3D's XF framework have their own stylesheets so you can customize their look.
Names in those stylesheets always (in theory) begin with "xf" 
*/


	
/* I prefer to get rid of most of the default whitespace so I have a better idea of what I'm starting with */
form, div {
	margin:0;
	padding:0;
	}
h1,h2,h4{
	margin:0;
	}
	

h1.pageSubtitle{
	color:white;
	font-size:small;
	font-weight:600;
	padding: 0 7px 0 7px;
}	
/* These h examples are totally arbitrary */
h2 {
	font-size:18px;
	}
h4 {
	color:#b8860b;
	padding-left:10px;
}

/* Paragraphs (mostly)
Some class names I use a lot (not all of them implemented here)
explain - For a sentence or two of instruction, advice, etc. 
about - Kind of like explain.
note - Very general purpose, blends in (no font properties)
ack - for an message of acknowledgement (kind of low key)
*/
p {			/* usually best to establish a default paragraph style rather than leaving it to chance */
	margin: 0 5px 10px 0px;
	padding: 0;
	line-height:160%;
}
p.note {
	margin:0 0 0 10px;
	padding:4px 0 6px 0;
}
p.explain, .ack {
	font-size:14px;
	font-family: georgia,serif;
	margin:30px 15px 10px 0;
	padding:10px 10px 10px 15px;
}
p.explain{
	margin:0;
}
.explain {
	background-color: #f7f7ff;
}
p.addrText {
	font-size:11px;
	font-family: georgia,serif;
	margin:5px 0 0 0;
	padding:10px;
}
p.ack {		/* because these will often be empty, I set a height so the layout doesn't bounce up and down. */
	margin:0;
	padding:0;
	height:20px;
	color:#b0c4de;
}

/* bar and barA - used in forms as labels for the form elements */
p.bar, p.barA, .addr p.bar, .addr p.barA {
	font-size:12px;
	font-family: arial,sans-serif;
	background-color: #ffffcc;
	margin:0;
}
p.barA, .addr p.barA {
	margin-top:10px;
}
.requireForApproval {
	background:url("/images/triBlkRts.gif") no-repeat left 3px;
	background-color:#ffcf31;
	padding-left:12px;
	margin:0;
}


p.indentSans {
	font-size:12px;
	font-family: arial,sans-serif;
	margin:0;
	padding:5px 0 0 30px;
}


/* convenient way to have an icon at the front of some text */
p.arrow{	/* the usual image is an 11x13 pixel black triangle aimed to the right */
	background:url("/images/triBlkRts.gif") no-repeat left 3px;
	margin:0 5px 0 0px;
	text-indent:12px;
}
p.arrowBright,p.arrowBrightPad,p.arrowLoud{	/* the usual image is an 11x13 pixel black triangle aimed to the right */
	background:url("/images/triBlkRts.gif") no-repeat left 3px;
	margin:0 5px 0 0px;
	text-indent:12px;
	color:#8a2be2;
}
p.arrowBrightPad{
	background:url("/images/triBlkRts.gif") no-repeat 10px 3px;
	padding-left:10px;
}
p.arrowLoud{
	background:url("/images/triBlkRts.gif") no-repeat 5px 3px;
	font-size: 16px;
	line-height: 18px;
	text-indent:1px;
}
.bright{
	color:#8a2be2;	/*0099ff;*/
}
p.arrowRed{
	background:url("/images/redmarker.gif") no-repeat left 3px;
	margin:0 0 0 5px;
	text-indent:17px;
}

/* Simple text
errors in 2 sizes, always red.	"required"
sm for smaller text.				"Enter a daytime phone number"
clue for a less visible color.		"If outside US & Canada include country code"
*/
.err, .errSm, .ajax_err{
	color:red;
}
.errSm .sm{
	font-size:9px;
}
.clue {
	font-size:12px;
	color:#666;
}

.ajax_err{
	display:inline;
}

/* containers for XF forms. 
These divs etablish whitespace and medium-scale composition.
Typically we add whitespace to the left edge of the form via padding not margin because IE is defective.

IE 5 and 6: When using a margin on a parent container with a child container inside and child contains form elements then the margin of the parent container gets inherited to the form elements, and it can't be removed by a margin 0. The affected form elements are input types, checkboxes, radiobuttons and textareas
Some say the solution is to put an OVERFLOW: HIDDEN on the child container but that causes other problems (e.g. paragraph backgrounds) and doesn't necessarily work either.
*/
div.formWrapper, div.formWrapperOver, div.formWrapperIn, cartWrapper, div.sidebar,  div.topLine, div.headerAdds {
	/*clear:left;*/
	margin:0;
	padding:0 0 0 0;
}
div.formWrapperSide {		/* used in checkout pages */
	padding:15px 0 0 10px;
}
div.formWrapperIn {		/* for nesting inside the ones above - division into sections */
	border-bottom:thin solid #b8860b;
	/*margin-right:10px; 	 MK's CSS adds padding on right already */
	padding:0 0 5px 0;
}
div.cartWrapper {		/* for each cart in a MultiCart */
	border-bottom:thin solid #b8860b;
	padding:0;
}

/* for a sidebar these two containers are used */
/*
div.sidebarLeft {
	position: absolute;
	left: 0px;
	width: 200px;
	height: 500px;
	margin-right: 10px; 
	padding: 0 0 0 10px; 
	border-right:thin solid gray;
}
*/
div.topLine {
	border-top:thin solid black;
	padding-top:10px;
}
/*
div.header {
	border:thin solid blue;
	padding-top:10px;
	height:60px;
}
*/
div.headerAdds {
	height:60px;
}
/* the main content area, next to the sidebar 
div.contentRight {
	padding-left:210px;
}
*/
div.clear {
	clear:both;
}
div.clearRight {
	clear:right;
}

div.tipBox {	/* for help info to do with template markup like editMe */
	color:blue;
	background-color:white;
	border:thin solid red;
	padding:0 5px 0 5px;
}

/* a form is able to make the labels for a required form element use a different class
It doesn't have to be this one */
.reqIndicator {
	color:#b8860b;
	font-size:9px;
	font-family: arial,sans-serif;
	margin-left:10px;
}
/* sometimes I have the forms generate labels in <label> </label> tags having this class 
then I can use the class to make them either be block or inline */
label {
	display: inline;
	padding: 0 15px 0 5px;
}

/* Something you click to launch a form (AJAX), e.g. for a toolbar 
Doesn't matter what it looks like but good to make them uniform so people learn it */
.formLaunch {
}

/* Floats
For stacking things up in rows like bricks - used a lot in forms. 
groups of these always have a containing div - usually one of the "wrappers"
I often set explicit widths individually using style attribute (on the template) but 
if there is enough call for it I make named variations of these classes */
div.left, div.merchbrick{
	float:left;
	margin:0;
	padding:0 15px 0 0;
}
div.merchbrick{
	height:400px;
	width:300px;
}
/* this will stay glued to the right, used more in stretchy layouts  */
div.right {
	float:right;
	margin:0;
	padding:0 15px 0 0;
}
div.addr{
	float:left;
	margin:0;
	padding:0 5px 0 0;
}
/* A standard look for stuff we always stick in the upper right */
.urCorner {
	margin:0;
	padding:0 10px 2px 25px;
	float:right;
	color:#b8860b;
}

/* Pseudo-links
In an AJAXy app there are often things you click that look and act like links but aren't A tags */
.clicky, .clickyPad, .clicky4bg	{
	color:blue;
	font-size:12px;
	font-family:arial,sans-serif;
	word-spacing:2px;
}
.clicky4bg {		/* alternate color to look nice in paces where you are using a background */
	color:#b8860b;
}
.clickyPad {		
	margin-left:15px;
}


.usedMark{
	font-size:10px;
	font-weight:bold;
}

/* Don't forget to make classes for the A tags and all their states (hover etc)

a {
	color: #0000cd;
}
a:visited {
	color: #00008b;
}
a:hover {
	color: #0000ff;
}
 */
 
/* images */
/* moved to qbkExport -Peter, 13 Nov 06*/

/* A few styles used by SB3D utilities and the like */
.technote {
	background-color:#ffff99;
	border: thin solid #ffcc66;
	font-size: 75%;
	color: #404040;
	margin:0;
	padding:5px;
}
.tech {
	color: #AE7600;
	font-size: 85%;
	margin:0;
}

a.quaffItemPicker, a.quaffGroupPicker, a.quaffLink {
	margin:0 10px;
	padding:2px;
	background-color:aqua;
	color:black;
	border: 1px	solid navy;
	white-space:nowrap;
}
a.quaffLink {
	margin:0;
}
a.quaffItemPicker:hover, a.quaffGroupPicker:hover, a.quaffLink:hover {
	color:#0000C0;	
}
a.quaffItemPicker:active, a.quaffGroupPicker:active, a.quaffLink:active {
	/* background-color:#00D4FF;	*/
	background-color:#0000C0;
	color:#00D4FF;	
}
div.quaffMenu {
	float:right;
	margin:0 10px;
	padding:8px;
	background-color:white;
	color:black;
	border: 1px	solid navy;
	text-align: left;
	font-size:10px;
	width:130px;
}

#edit-submitted---wrapper {
	display:none;
}