/********************************/
/* FORM DEFAULTS */
/********************************/
form, form td, .viewBasket td, .viewBasket th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px !important; /* Font size reference for all nested elements */
}
fieldset legend, form h2, form .grayBox, form .grayBoxAndPadding8, form .grayBoxAndPadding13 {
font-family:"Trebuchet MS", Arial, Helvetica;
}

form small, form .smallFont {
font-size: 10px !important; /* If % value, font size will be based on the parent tag. We do not want that in a form. */
}
form .smallFont {
line-height:1.2em;
}

form h4 {
font-size:120%;
}
form h5 {
font-size:110%;
}

fieldset { 
/* round corners and gray background are shared values with the gray boxes (in default.css) */
/* to allow for correct background behavior in IE, conditional comments have been added in files */
clear: both;
padding: 12px;
margin: 15px 0 0 0;
/*background:#FFF;*/
color: #444444;
}

fieldset legend {
font-size: 140%;
font-weight: normal;
color: #000000;
margin: 0;
padding: 0 5px 5px 5px;
line-height: 100%;
font-weight: bold;
}

label {
font-size: 110%;
}

p label {
font-size: 100% !important;
}

input, select, textarea {
font-size: 11px; /* If % value, font size will be based on the parent tag. We do not want that. */
color: #000000;
}

input, select {
background-color:#F1F1F1;
}

textarea {
overflow: auto;
background-color:#F1F1F1;
}

.buttSubmit {
}

fieldset input,
fieldset select,
fieldset textarea,
.grayBox input, 
.grayBoxAndPadding8 input, 
.grayBoxAndPadding13 input,
.grayBox select, 
.grayBoxAndPadding8 select, 
.grayBoxAndPadding13 select,
.grayBox textarea, 
.grayBoxAndPadding8 textarea, 
.grayBoxAndPadding13 textarea,
.viewBasket input,
.viewBasket select {
background-color:#FFFFFF;
}

fieldset .TabbedPanels input,
fieldset .TabbedPanels select,
fieldset .TabbedPanels textarea {
background-color: #F1F1F1;
}

/* added for POST transaction support on product pages; jnc */
form .buttGraphic,
fieldset .buttGraphic {
background: none;
clear: none;
padding: 0px;
margin: 0 0 0 0;
border: none;
}



/********************************/
/* VIEW BASKET TABLE */
/********************************/
.viewBasket {
width:100%;
background-color:#F5F5F5;
border:1px solid #D0D0D0;
}
.viewBasket td, .viewBasket th {
font-size:110% !important;
padding:5px;
border-top:1px solid #D0D0D0;
}
.viewBasket th {
font-size:100% !important;
background-color:#F0F0F0;
}
.viewBasket td.total, 
.viewBasket th.total, 
.viewBasket td.grandTotal {
background-color:#E9E9E9;
color:#000000;
}
.viewBasket td.grandTotal {
background-color: #4D4D4D; 
border-top:1px solid #4D4D4D;
font-weight:bold;
color:#FFFFFF;
}
.viewBasket td.grandTotalRow {
border-top:1px solid #4D4D4D;
color:#000000;
}

/********************************/
/* DATA TABLE */
/********************************/
/* Exceptions when used in a form */
form .tableData td, form .tableData th {
font-size:110% !important;
}





/********************************/
/* ACCOUNT-TYPE FORMS */
/********************************/
/* 1: Account and Checkout Applications */
/* To be placed in container ID="oneColContainerForm" */
/* All width measurements are based on a fieldset internal width of 674px (Container width of 698px minus fieldset padding of 12px) */

/* 2: Editorial Page Applications */
/* Can also be placed in container ID="colLeftContainer" on editorial pages. Fieldset internal width will then be 665px. (Container width of 677px minus fieldset padding of 12px) */
/* Under this application, the right note should use the ".narrowNotes" class  */


.formAccount {
margin: 0;
padding: 0;
}

/* DIV CONTAINERS FOR ALL FIELDS */
.formAccount div.required, 
.formAccount div.optional, 
.formAccount div.submit, 
.formAccount div.checkMark {
clear: left;
display: block;
width: 430px;
zoom: 1;
margin: 0;
padding: 1px 0px;
}

/* NOTE BOX */
/* Right placement (Account/Checkout pages): .notes */
/* Right placement (Editorial pages): .narrowNotes */
/* Top placement (Account/Checkout): .topNotes */

.formAccount div.notes, 
.formAccount div.narrowNotes {
float: right;
width: 220px;
height: auto;
margin: 0 0 0 0;
padding:0 0 0 12px;
border-left:1px dotted #999999;
/*border-top:1px solid #D0D0D0;*/
}
.formAccount div.narrowNotes {
width: 198px;
}
.formAccount div.topNotes {
clear: left;
width: 280px;
height: auto;
margin: 8px 0 0 150px;
}
.formAccount div.notes h4, .formAccount div.narrowNotes h4, .formAccount div.topNotes h4 {
color: #000000;
font-size: 11px;
margin-bottom:.5em;
}
.formAccount div.notes p, .formAccount div.notes li, 
.formAccount div.narrowNotes p, .formAccount div.narrowNotes li,
.formAccount div.topNotes p, .formAccount div.topNotes li {
margin: 0em 0em 8px 0em;
font-size: 10px;
line-height:1.3em;
}
.formAccount div.notes li, .formAccount div.narrowNotes li, .formAccount div.topNotes li {
margin-bottom: 4px;
}
.formAccount div.notes ul, .formAccount div.narrowNotes ul, .formAccount div.topNotes ul {
margin-left:0px;
margin-bottom:0;
}

/* NOTE BELOW FIELD */
.formAccount div small {
display: block;
margin: 0 0 5px 150px;
padding: 1px 0px;
zoom: 1;
line-height: 1.3em;
}


/* LABELS */
.formAccount div.required {
}

.formAccount div label {
display: block;
float: left;
width: 145px;
padding: 3px 5px 5px 0;
margin: 0 0 5px 0;
text-align: right;
}

.formAccount div.optional label {
font-weight: normal;
}

.formAccount div.required label {
font-weight: bold;
}

.formAccount div label.labelCheckbox, 
.formAccount div label.labelRadio {
float: none;
display: block;
width: 280px;
zoom: 1;
padding: 0;
margin: 3px 0 5px 150px;
text-align: left;
}


/* FIELDS */
.formAccount div select, 
.formAccount div textarea,
.formAccount div input.inputText, 
.formAccount div input.inputTextArea, 
.formAccount div input.inputPassword {
width: 200px;
padding: 1px 3px;
margin: 0 0 0 0;
}

/* To hide the field border when no editing is allowed */
.formAccount .noField {
border:0;
background: none;
}

.formAccount div input.inputFile {
width: 211px;
}

.formAccount div select.selectOne, 
.formAccount div select.selectMultiple {
width: 211px;
padding: 1px 3px;
}

.formAccount div input.inputCheckbox, 
.formAccount div input.inputRadio, 
input.inputCheckbox, 
input.inputRadio {
display: inline;
height: auto;
width: auto;
background-color: transparent;
/*border-width: 0;*/
padding: 0;
margin: 0 4px 0 0;
}

/* SUBMIT */
/*.formAccount div.submit {
width: 280px;
padding: 0 0 0 150px;
margin-top: 12px;
}*/
.formAccount .buttSubmit {
margin-left:150px;
margin-top: 12px;
}


/* WHEN LABEL AND FIELD SHOULD BE STACKED TO USE THE MAX WIDTH */
.formAccount div label.wide {
width: 420px;
text-align:left;
}
.formAccount div.wide label {
float: none;
display: block;
margin-bottom:0;
}
.formAccount div.wide label.labelCheckbox, 
.formAccount div.wide label.labelRadio,
.formAccount div.wide input.inputText, 
.formAccount div.wide input.inputTextArea, 
.formAccount div.wide input.inputPassword, 
.formAccount div.wide input.inputFile, 
.formAccount div.wide select, 
.formAccount div.wide select.selectOne, 
.formAccount div.wide select.selectMultiple,
.formAccount div.wide textarea {
width: 420px;
margin-left: 0;
}
.formAccount div.wide .buttSubmit {
margin-left: 0;
}
.formAccount div.wide small {
margin: 0 0 5px 0;
}

/********************************/
/* HELP BUTTON */
/********************************/
form .buttHelp {
margin-bottom:-2px;
}



/********************************/
/* ALERTS */
/********************************/
.alertPanel { /* shared values with .grayBox class */
margin:13px 0;
padding:13px;

}
.alertPanel img {
float:left;
margin-right:4px;
}
.alertPanel div {
margin-left:68px;
}
.alertPanel ul {
margin-left:0px;
}
.alert {
background-image:url(images/ui_misc/bg_alert.gif);
background-position:top right;
background-repeat:no-repeat;
background-color:#FFECD9 !important;
}
.alertColor {
color:#FF8205;
}
p.smallNote {
font-size:90% !important;
line-height:1.1em;
margin:4px 0 0 0;
}
.formAccount div.alert {
padding:12px 0 12px 0;
margin-bottom:8px;
border:1px solid #DBDBDB;
}


/********************************/
/* SPRY TABBED PANEL */
/********************************/

/* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* Horizontal Tabbed Panels
 *
 * The default style for a TabbedPanels widget places all tab buttons
 * (left aligned) above the content panel.
 */

/* This is the selector for the main TabbedPanels container. For our
 * default style, this container does not contribute anything visually,
 * but it is floated left to make sure that any floating or clearing done
 * with any of its child elements are contained completely within the
 * TabbedPanels container, to minimize any impact or undesireable
 * interaction with other floated elements on the page that may be used
 * for layout.
 *
 * If you want to constrain the width of the TabbedPanels widget, set a
 * width on the TabbedPanels container. By default, the TabbedPanels widget
 * expands horizontally to fill up available space.
 *
 * The name of the class ("TabbedPanels") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabbedPanels container.
 */
.formAccount .TabbedPanels {
	margin: 0px;
	padding: 0px;
	float: left;
	clear: none;
	width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}

/* This is the selector for the TabGroup. The TabGroup container houses
 * all of the tab buttons for each tabbed panel in the widget. This container
 * does not contribute anything visually to the look of the widget for our
 * default style.
 *
 * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabGroup container.
 */
.formAccount .TabbedPanelsTabGroup {
	margin: 0px;
	padding: 0px;
}

/* This is the selector for the TabbedPanelsTab. This container houses
 * the title for the panel. This is also the tab "button" that the user clicks
 * on to activate the corresponding content panel so that it appears on top
 * of the other tabbed panels contained in the widget.
 *
 * For our default style, each tab is positioned relatively 1 pixel down from
 * where it wold normally render. This allows each tab to overlap the content
 * panel that renders below it. Each tab is rendered with a 1 pixel bottom
 * border that has a color that matches the top border of the current content
 * panel. This gives the appearance that the tab is being drawn behind the
 * content panel.
 *
 * The name of the class ("TabbedPanelsTab") used in this selector is not
 * necessary to make the widget function. You can use any class name you want
 * to style this tab container.
 */
.formAccount .TabbedPanelsTab {
	position: relative;
	top: 1px;
	float: left;
	padding: 5px 8px;
	margin: 0px 4px 0px 0px;
	font-weight:bold;
	font-size:10px;
	text-transform:uppercase;
	background-color: #F1F1F1;
	background-image:none;
	list-style: none;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	border-left: solid 1px #D0D0D0;
	border-bottom: solid 1px #D0D0D0;
	border-top: solid 1px #D0D0D0;
	border-right: solid 1px #D0D0D0;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
}

/* This selector is an example of how to change the appearnce of a tab button
 * container as the mouse enters it. The class "TabbedPanelsTabHover" is
 * programatically added and removed from the tab element as the mouse enters
 * and exits the container.
 */
.formAccount .TabbedPanelsTabHover {
	color: #000000;
	background-color:#F8F8F8;
}

/* This selector is an example of how to change the appearance of a tab button
 * container after the user has clicked on it to activate a content panel.
 * The class "TabbedPanelsTabSelected" is programatically added and removed
 * from the tab element as the user clicks on the tab button containers in
 * the widget.
 *
 * As mentioned above, for our default style, tab buttons are positioned
 * 1 pixel down from where it would normally render. When the tab button is
 * selected, we change its bottom border to match the background color of the
 * content panel so that it looks like the tab is part of the content panel.
 */
.formAccount .TabbedPanelsTabSelected {
	background-color: #FFF;
	border-bottom: 1px solid #FFF;
	background-image:url(images/ui_misc/bg_marker_top.gif);
	background-position:center 18px;
	background-repeat:no-repeat;
	color: #000000;
}

/* This selector is an example of how to make a link inside of a tab button
 * look like normal text. Users may want to use links inside of a tab button
 * so that when it gets focus, the text *inside* the tab button gets a focus
 * ring around it, instead of the focus ring around the entire tab.
 */
.formAccount .TabbedPanelsTab a {
}

/* This is the selector for the ContentGroup. The ContentGroup container houses
 * all of the content panels for each tabbed panel in the widget. For our
 * default style, this container provides the background color and borders that
 * surround the content.
 *
 * The name of the class ("TabbedPanelsContentGroup") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the ContentGroup container.
 */
.formAccount .TabbedPanelsContentGroup {
	clear: both;
	border-left: solid 1px #D0D0D0;
	border-bottom: solid 1px #D0D0D0;
	border-top: solid 1px #D0D0D0;
	border-right: solid 1px #D0D0D0;
	background-color: #FFF;
	width:100%;
}

/* This is the selector for the Content panel. The Content panel holds the
 * content for a single tabbed panel. For our default style, this container
 * provides some padding, so that the content is not pushed up against the
 * widget borders.
 *
 * The name of the class ("TabbedPanelsContent") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the Content container.
 */
.formAccount .TabbedPanelsContent {
	padding: 12px 0;
}

/* This selector is an example of how to change the appearnce of the currently
 * active container panel. The class "TabbedPanelsContentVisible" is
 * programatically added and removed from the content element as the panel
 * is activated/deactivated.
 */
.formAccount .TabbedPanelsContentVisible {
}

/* FORM ACCOUNT ELEMENTS: EXCEPTIONS WHEN INSIDE A TAB */
/* (Padding is added on left and right. Widths are changed in proportion.) */
.formAccount .TabbedPanelsContent div.notes { 
width: 212px;
padding-right:8px;
}
.formAccount .TabbedPanelsContent div label {
width: 141px;
padding-left:4px;
}