/**
 *
 * CartXE BASE CSS File
 *
 * Map of document structure:
 *
 * #xe
 *   #xe-menu
 *   #xe-discount-announcements
 *   #xe-welcome
 *   #xe-billing
 *   #xe-shipping
 *   #xe-catalog
 *   #xe-programs
 *   #xe-ordernotices
 *   #xe-shipselection
 *   #xe-ordersummary
 *   #xe-payment
 *   #xe-orderoptions
 *   #xe-registration
 *   #xe-finalize
 *
 * Panels
 * jqModal
 * 
**/




.xe-clear {
	clear:both;
}
.xe-hidden {
	display:none;
}





/* =General XE Styles ---------------------------------------- */

#xe {
	display: none;
}

#xe h4 {
	background-color:#EEE;
	margin:0;
	padding:1px;
	font-size:120%;
	font-weight:normal;
	border-bottom:3px solid #666;
}

#xe div {
	/* position:relative;					this assumption will KILL the slideUp slideDown effects in IE! */
	margin-bottom:10px;
}


div.xe-error-message {
	border:3px double #900;
	background-color:#FFFFF2;
	color:#900;
	padding:10px;
	font-weight:bold;
	margin-bottom:18px;
}
div.xe-error-message a {
	color:#900;
	font-weight:bold;
}
div.xe-error-message ul li {
	font-weight:normal;
	margin-bottom:12px;
}




/* =Form General Styles ---------------------------------------- */

.xe-asterisk {
	font-weight:bold;
	padding-left:2px;
}
.xe-fielderror, .kds-formfield-not-valid-highlight {
	background-color:#990000;
	color:white;
}


#xe fieldset {
	padding: 0.35em 0.625em 0.75em;
}
#xe fieldset legend {
	padding-left: 2px;
	padding-right: 2px;
}


#xe fieldset label {
	float:left;
	display:inline;
	clear:both;
}

#xe fieldset input {
	float:left;
	display:inline;
}
input.xe-radiooption {
	margin-right:5px;	
}
#xe #xe-submit-container {
	padding:12px 0;
	margin:0;
}

span#xe-submit-notice {
	color:#C00;
	background-color:#fff;
	padding-left:10px;
	font-weight:bold;
	font-style:italic;
}



/* =Loader Styles ---------------------------------------- */

#xe p.xe-loader {
	margin:24px 0;
	text-align:center;
}

/* Remember that the following class is NOT contained within #xe div ... */
p.xe-spinner {
	margin-top:50px;
	margin-left:50px;
	padding-left:50px;
	padding-bottom:100px;
	/* background:url(/xe/img/ajax-loader.gif) no-repeat left 10px; */
	color:green;
	font-weight:bold;
	font-size:150%;
}




/* =Welcome ----------------------------------- */

#xe-welcome {
	padding-bottom:4px;
}



/* =Menu ----------------------------------- */

#xe-menu {
	/* note, if set to initially diplay:none, then must be sure when revealing to set display to inline...? (IE6 double-margin bug!?)  */
	float:right;
	display:inline;
	display:NONE;
	width:200px;
	border:1px solid #CCC;
	padding:10px;
	background-color:#DDD;
	margin-left:10px;
	margin-bottom:10px;
}

#xe-menu p {
	margin:0;
	padding:0;
	font-size:85%;
}



/* =Login -- not shown by default? (Note, not using anymore. See the login panel instead.) -------------------------- */
/*
#xe-login { 
	display:none;
	margin:0;
}
*/




/* =Discount Announcements ----------------------------------- */
/*
This div should start out hidden, let script show it if being used.
Note, this style will ideally want to be customized on a per-client basis.
*/
#xe-discount-announcements {

	margin-bottom:12px;
	/* float right? style similar to xe-menu? */
	float:right;
	display:inline;
	
	display:NONE;
	
	clear:right;
	width:200px;
	margin-left:10px;
	margin-bottom:10px;
	
	/* provide more defaults? */
	padding: 10px;
	border:1px dashed #888;
}
#xe-discount-announcements li, #xe-discount-announcements p {
	font-size:85%;
	margin:3px 0;
}
#xe-discount-announcements ul {
	padding:0 5px;
	margin:0 5px;
	list-style-type:square;
}
#xe-discount-announcements li {
	margin-left:5px;
	padding:0;

}




/* =Billing and =Shipping ----------------------------------- */

#xe-billing {

	clear:both;				/* new assumption */
	float:left;
	display:inline;			/* <3 I.E.! */
	width:48%;
	padding-bottom:6px;
}
#xe-shipping {
	float:right;
	display:inline;			/* <3 I.E.! */
	width:48%;
	padding-bottom:11px;
}
#xe-billing br, #xe-shipping br {
	clear:both;
}
#xe-billing h4, #xe-shipping h4 {
	margin-bottom:12px;
}
#xe-billing label, #xe-shipping label {
	width:110px;
	float:left;
	display:inline;			/* <3 I.E.! */
	margin:0px 0 0px 5px;
	clear:both;
}
#xe-billing input, #xe-billing select, #xe-shipping input, #xe-shipping select {
	margin:2px 0;
	width:120px;
}
#xe-billing select, #xe-shipping select {

}

/* Styling for checkboxes in the shipping div. Could use these perhaps for checkboxes in any div? */
#xe-shipping input.xe-checkbox {
	width:auto;
	margin-right:5px;
}
#xe-shipping label.xe-label-for-checkbox {
	width:auto;
	margin-bottom:2px;
}




/* =Catalog ----------------------------------- */

#xe-catalog {
	/*
	background-color:#EEE;
	border:1px solid #999;
	*/
}

#xe-catalog div {
	/*
	border:0;
	margin:25px 15px;
	padding:0;
	*/
}
#xe-catalog div div {
	margin:10px 0;
}

#xe-catalog h4 { display:none; }
#xe-catalog div h4 { display:block; }

/* These are the disabled ExtPrice inputs */
#xe-catalog input {
	width:55px;
	margin-left:5px;
	text-align:right;
}

/* Top level cat names. If you don't define, they will inherit from #xe h4 defined at top of this file. */
#xe-catalog div h4 {
	/*
	background-color:transparent;
	color:#000;
	border-top:0;
	border-bottom:1px solid #666;
	font-size:138%;
	*/
}

/* Second level cat names */
#xe-catalog div div h4 {
	background-color:transparent;
	color:#666;
	border-top:0;
	border-bottom:1px solid #BBB;
	font-size:100%;
	margin-bottom:9px;
}

/* third level cat names */
#xe-catalog div div div h4 {

}



#xe-catalog .xe-product div {
	margin:0;
}

#xe-catalog .xe-product p {
	margin:0 0;
}

#xe-catalog .xe-product-title {
	font-weight:bold;
}

#xe-catalog span.xe-product-thumb img {
 float:left;
 display:inline;
 margin-right:10px;
}

#xe-catalog div.xe-product-description {
 padding-top:3px;
}



/* CatalogProduct styles when using TABLES in template ... */


#xe-catalog tr.xe-product td {
	padding-top:7px;
	padding-bottom:3px;
}



/* CatalogProduct styles when using DIVs in template instead of table rows...
div.xe-product {
	position: relative;
	height: 2em;
}
div.xe-product-qty {
	position: absolute;
	top: 0;
	left: 0;
	width: 10em;
}
div.xe-product-title {
	position: absolute;
	top: 0;
	left: 10em;
	width: 20em;
}
div.xe-product-price {
	position: absolute;
	top: 0;
	left: 30em;
	width: 10em;
}
div.xe-product-extprice {
	position: absolute;
	top: 0;
	left: 40em;
	width: 10em;
}
*/




/* =ProductNotices ----------------------------------- */

#xe-catalog .xe-product-notices ul {
	margin:0;
	padding:0;
	list-style-type:none;

}
#xe-catalog .xe-product-notices li {
	margin:0;
	padding:0;
	padding-bottom: 4px;
	font-style: italic;
}




/* =Programs ----------------------------------- */

div#xe-programs {
	padding-bottom:1px;    /* this is critical to prevent IE from squashing layout */
}

#xe-programs div,
#xe-programs div div,
#xe-programs div div div {
	margin:0;
}

#xe-programs p, #xe-programs .xe-program p {
	margin:0;
	padding-bottom:1em;
}

fieldset#orderoption-order-enrollment-action-fieldset {
	border:0;
	padding:8px 5px 12px 5px;
}
fieldset#orderoption-order-enrollment-action-fieldset legend {
	margin-top:3px;
	margin-bottom:3px;
}


/* Program styles using DIVS in template ... */
#xe-programs {
	padding-bottom:15px;
}
#xe-programs h4 {
	margin-top:18px;
	margin-bottom:12px;
}


#xe-programs div.xe-programs  {
	margin-left:35px;
}
#xe-programs div.xe-program  {
	clear:both;
	margin-bottom:16px;
}

#xe-programs div.xe-program label {

}
#xe-programs div.xe-program input {
	margin-right:4px;
}

#xe-programs div.xe-program span.xe-program-name {
	font-weight:bold;
}
#xe-programs div.xe-program div.xe-program-description,
#xe-programs div.xe-program div.xe-program-resource {
	margin-left:25px;
}



/* Program styles when using TABLES in template ... */
/*
#xe-programs tr.xe-program td {
	padding-top:7px;
	padding-bottom:3px;
}
#xe-programs div.xe-program-name {
	font-weight:bold;
}
*/




/* =ShipSelection -------------------------------------- */

#xe-shipselection {
	position:absolute;
	top:20px;
	left:20px;
	width:280px;
}
#xe-shipselection fieldset {
	border:1px solid #CCCCCC;
}
#xe-shipselection label {
	float:right;
	width:250px;
	text-align:left;
	margin:0;
	top:0;
}
#xe-shipselection input {
	float:left;
	width:20px;
	margin:0;
	clear:left;
	top:3px;
}




/* =ShippingNotices -------------------------------------- */

#xe-shippingnotices {
	margin:0;
	background-color:#FFFF77;
}
#xe-shippingnotices p {
	margin:2px 0 0 0;
	line-height:1;
	padding:4px;
}
#xe-shippingnotices ul {
	margin:0; padding:0; list-style-type:none;
}
#xe-shippingnotices li {
	margin:0; padding:0; 
	padding-top:4px; padding-bottom:4px;
}



/* =OrderSummary Section -------------------------------------- */

#xe-ordersummary {
	position:relative;
	clear:both;
	margin:10px 0;
	padding:0;
	width:420px;
	float:right;
	display:inline;
}
#xe-ordersummary h4 {
	margin-bottom:12px;
}
#xe-ordersummary br {
	clear:both;
}
#xe-ordersummary .xe-ordersummary-label {
	float:left;
	display:inline;			/* <3 I.E.! */
	clear:left;
	width:300px;
	text-align:right;
	position:relative;
	top:3px;
	margin:1px 0;
}
#xe-ordersummary .xe-ordersummary-value {
	position:relative;
	border:none;
	border-bottom:1px solid #AAA;
	background:none;
	/* color:black;		???  */
	right:0px;
	float:right;
	text-align:right;
	display:inline;			/* <3 I.E.! */
	clear:right;
	width:75px;
	height:1.3em;
	margin:1px 15px 1px 0;
}
#xe-summary-grandtotal-value {
	font-weight:bold;
	font-size:110%;
}




/* =Payment Section -------------------------------------- */

/* we need to add a <div class="clear"></div> just before each main section closing div, */
/* or dump a <br class="clear" /> after each input, to appease our floats */
#xe-payment {
	clear:both;
	padding-bottom:10px;
}

#xe-payment h4{
	margin-bottom:10px;
}

#xe-payment label {
	position:relative;
	float:left;
	display:inline;			/* <3 I.E.! */
	/*clear:left;*/
	width:270px;
	top:3px;
	margin:1px 10px;
}
#xe-payment label.xe-custom-label { /* targets for="CardExpireYear" */
	/*clear:none;*/
	width:10px;
}
#xe-payment input, #xe-payment select {
	position:relative;
	float:left;
	display:inline;			/* <3 I.E.! */
	/*right:0px;*/
	zzzclear:right;
	zzzwidth:75px;
	margin:1px 2px 1px 0;
}
#xe-payment br {
	clear:both;
}




/* =OrderOptions Section -------------------------------------- */

#xe-orderoptions, #xe-programoptions {
	clear:both;
}

#xe-orderoptions h4, #xe-programoptions h4 {
	margin-bottom:12px;
}

#xe-orderoptions label, #xe-programoptions label {
	float:left;
	clear:both;
}
#xe-orderoptions input, #xe-programoptions input {
	float:left;
}
#xe-orderoptions textarea, #xe-programoptions textarea {
	display:block;
	clear:both;
}
#xe-orderoptions fieldset, #xe-programoptions fieldset {
	display:block;
	clear:both;
 margin-top:12px;			/* note, fieldsets not being followed by a BR? */
 margin-bottom:12px;
}


/* These may need to be resized in order to suit unique client site */
#orderoption-order-gift-message {
	width:280px;
	height:40px;
}
#orderoption-order-comments {
	width:320px;
	height:65px;
}


/* =OrderNotices Styles ---------------------------------------- */

/* was: div#xe-ordernotices, and was: !important on border and margin */
#xe-ordernotices {
	margin:20px;
	padding:5px;
	background-color:#FFFFF0;
	border:4px double #888;
	clear:both;
	
	display:none;
	
	padding-top:15px;
	padding-bottom:15px;
	
}

#xe-ordernotices ul {
	list-style-type:none;
}
div#xe-ordernotices ul, div#xe-ordernotices li {
	/* Important! kill any margins so that the margins don't kill our smooth animations! */
	margin:0;
}




/* =Registration Section -------------------------------------- */

#xe-registration {
	margin-bottom:14px;
}
#xe-registration label {
	float:left;
	display:inline;
	width:13em;
}
#xe-registration input {
	width:120px;
}




/* =Finalize Section -------------------------------------- */

#xe-finalize p {
	margin:12px 0;
}
#xe-finalize p.center {
	text-align:center;
	padding:20px;
}
#xe-finalize input.xe-checkbox {
	float:left;
	display:inline;
}
#xe-finalize label {
	float:left;
	display:inline;
}
#xe-finalize br {
	clear:both;
}




/* =Panels (jqModals) - General Styling ---------------------------------------- */

a.xe-paneltrigger-to-be {
	/*
	This style is initially applied to links that will be acting as a trigger to open a panel
	that is not yet ready to be opened. This style intended to "hide" the normal link-styling
	by appearing with same color and underlining as regular text. At runtime, when the panel
	becomes available, these link classes will be changed to just "xe-paneltrigger".
	The default is black text with no underlining.
	This style is to be overridden or customized on a per-client basis to match the site text.
	*/
	text-decoration:none;
	color:#000;
}

.jqmWindowToBe {
	/*
	TEMPORARY STYLING ONLY - Give some love to Dreamweaver!
	Add this temporary "to be" class, so we can see what we're working on in Dreamweaver design mode!
	At runtime, "jqmWindowToBe" will be changed to "jqmWindow"!!
	*/
	border:3px solid #666;
	margin:20px;
	padding:12px;
	background-color:#EEE;
}

.jqmWindow {
	/*
	This class is reserved for base styling by the jqModal installation.
	Use .xe-panel to apply any additional or custom styling
	*/
}

.xe-panel {

}

.xe-panel form fieldset {
	margin-bottom:12px;
}
.xe-panel form legend {
	font-weight:bold;
	font-size:120%;
}


.xe-panel .xe-panel-title {
	color:#FFFFFF;
	background-color:#444;
	padding: 2px 10px;
}
.xe-panel .xe-panel-content {
	padding: 5px 10px 5px 10px;
}
.xe-panel .xe-panel-buttons {
	padding: 5px 10px 10px 10px;
}


.xe-panel input.xe-panelbutton {
	border:1px solid #444;
	background-color:#FFF;
	padding:3px 5px;
	outline:0;
	cursor:pointer;
	margin-right:9px;
}
.xe-panel input.xe-panelbutton:hover {
	background-color:#FFFFF2;
}


.xe-panel input.xe-panelbutton.xe-primary-action {

}
.xe-panel input.xe-panelbutton.xe-secondary-action {
	color:#0000FF;
	border:0;
	padding:4px 6px;
	background-color:transparent;
}





/* =jqModals base styling ---------------------------------------- */

/*
jqModal base Styling courtesy of Brice Burgess <bhb@iceburg.net>
Minor changes to jqModal base style by KDS.
The Window's CSS z-index value is respected (takes priority). If none is supplied,
the Window's z-index value will be set to 3000 by default (in jqModal.js). 
KDS NOTE: THIS VALUE IS REQUIRED TO BE SET IN ORDER TO "NEST" OR STACK MODALS PROPERLY!
ALSO NOTE: The "zIndex" property of the jqmConfig plugin was DEPRECATED AND REMOVED
Thus, be sure to specify a zIndex in this stylesheet, or via code.
 */
	
.jqmWindow {
    display: none;
    position: fixed;
    top: 17%;
    left: 50%;
    margin-left: -300px;
    width: 600px;
    background-color: #EEE;
    color: #333;
    border: 1px solid black;
	padding:0;
}

.jqmOverlay {
	background-color: #FFF;
}

/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */
* iframe.jqm {position:absolute;top:0;left:0;z-index:-1;
	width: expression(this.parentNode.offsetWidth+'px');
	height: expression(this.parentNode.offsetHeight+'px');
}

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}




/* =Panels (jqModal) - Unique Styling  ------------------------------- */

/*
Define size, zIndex, and position for each individual panel!
Maybe we could define a few common "shapes and sizes" for our windows?
Or create unique style for each unique window? or provide both?
NOTE: IT IS NECESSARY TO OVERRIDE "TOP" PERCENTAGES FOR I.E. BY USING CSS EXPRESSIONS!!
*/

#xe-panel-alert {
    top: 21%;
    margin-left: -325px;
    width: 650px;
	z-index:9000;
}
* html #xe-panel-alert {
	top: expression(Math.round(21 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + (document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#xe-panel-message {
    top: 22%;
    margin-left: -300px;
    width: 600px;
	z-index:9002;
}
* html #xe-panel-message {
	top: expression(Math.round(22 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + (document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#xe-panel-loginform {
    top: 17%;
    margin-left: -275px;
    width: 550px;
	z-index:4000;
}
* html #xe-panel-loginform {
	top: expression(Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + (document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#xe-panel-loginreset {
	top:23%;
	margin-left:-320px;
	width:640px;
	z-index:5000;
}
* html #xe-panel-loginreset {
	top: expression(Math.round(19 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + (document.documentElement.scrollTop || document.body.scrollTop) + 'px');
	}

#xe-panel-loginwhy {
    top: 14%;
    margin-left: -50px;
    width: 300px;
	z-index:6000;
}
* html #xe-panel-loginwhy {
	top: expression(Math.round(14 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + (document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}





/* --- Define some generic panels? --- */

.xe-panelstyle-wide.jqmWindow {

}
.xe-panelstyle-medium.jqmWindow {

}
.xe-panelstyle-narrow.jqmWindow {

}

/* Custom panels? */

#xe-panel-loginform label {
	float:left;
	display:inline;
	clear:both;
	width:125px;
}





/* =END OF STYLESHEET ---------------------------------------- */