/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~

	STANDARDIZE DEFAULTS

-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

html,body,form,fieldset
	{
/*	clear-padded-elements */
	margin:0;
	padding:0;
	}

html,body
	{
	height:100%;
	}

body
	{
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size:11px;
	line-height:1.2;
	text-align:center;
	color:#606060;
	}

form label
	{
/*	accessibility friendly */
	cursor:pointer;
	}

fieldset
	{
/*	quirky because of Opera */
	border:0 solid;
	}

br	{
    clear:both;
    font-size: 0px; /*for IE*/
    }

table,thead,tbody,tfoot,tr,td
	{
	font-size:11px;
	margin:0;
	padding:0;
/*	quirky because of Opera */
	border:0 solid;
	}

ul,ol,li,dl,dt,dd
	{
	padding:0;
	margin:0;
	}

table	{ border-spacing:0; border-collapse: collapse; }

td	{ vertical-align:top; }

img 	{ border:0px none; }

strong	{ font-weight:bold; }

ul	{ list-style:none; }

ul.bullet	{ list-style:square; margin-left:1.2em; }
ul.bullet li	{ margin-bottom:.4em; }

ul.horiz li
    {
    display:inline;
    }

input,select,textarea
	{
	font-family: Arial, Helvetica, Verdana, sans-serif; /* needed for textarea */
	font-size: 9px;
	color: #606060;
	}

input.alignWithImage
	{
	margin-bottom: 4px; /* this helps align the search box with the graphics on the left and right of it */
	}

.clear	{ clear:both;}

.hilite	{ color:#bc492a; }

.nowrap { white-space:nowrap; }


/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~

	ANCHORS

-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */


a	{
	cursor:pointer;
	background-color:transparent;
	font-weight:bold;
	}

a:link
	{
	background-color:transparent;
	text-decoration:none;
	}

a:visited
	{
	background-color:transparent;
	text-decoration:none;
	}

a:hover
	{
	background-color:transparent;
	text-decoration:underline;
	}

a:active
	{
	background-color:transparent;
	text-decoration:none;
	}

a img
	{
	border:none;
	}


hr {
    height: 1px;
    width:100%;
    border:0;
    color:#e1e1e1;
    background-color:#e1e1e1;
    border-style:none;
    padding:0;
    margin:0;
    clear:both;
    }

hr.spaced { margin:10px 0; }

/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~

	Headlines for graduated semantic markup

-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */


h1,h2,h3,h4,h5,h6,p
	{
	margin:0;
	padding:0;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	}


h1	{ font-size: 155%; }
h2	{ font-size: 155%; }
h3	{ font-size: 150%; }
h4	{ font-size: 130%; }
h5	{ font-size: 120%; }
h6	{ font-size: 110%; font-weight:bold; }


p	{ margin-bottom:5px; }
p.intro { margin-bottom:10px; }

small { font-size:85%; }

big { font-size:110%; }


/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~

	Classes used on form formatting

-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

button {
	margin:0;
	padding:0;
}

/* these are used on user/order_status_body.jsp */
label.labelOnLeft
    {
    font-size:10px;
    font-weight:bold;
    text-align:right;
    float:left;
    color:#000;
    width:90px;
    padding-top:2px;
    }

input.labelOnLeft,
select.labelOnLeft
    {
    display:block;
    clear:right;
	margin-left:95px;  /*5px more than the label width */
	margin-bottom:5px;
    }

p.labelOnLeft,
div.labelOnLeft
    {
    clear:right;
	margin-left:95px;  /*5px more than the label width */
	margin-bottom:5px;
    }

/* I don't think p.radio or checkboxes are used */
p.radio,
p.checkbox
    {
    clear:both;
    margin-bottom:5px;
    }

p.radio input,
p.checkbox input
    {
    float:left;
    }

p.radio label,
p.checkbox label
    {
    float:left;
    clear:right;
    display:block;
    padding-top:2px;
    margin-left:.8em;
    }

dl.formInputs {
    margin:0 0 20px 0;
    }

div.shaded dl.formInputs { margin:0; }

dl.formInputs dt
	{
	font-size:10px;
	font-weight:bold;
	text-align:right;
	float:left;
	color:#000;
	width:115px;
	padding-top:2px;
	}

dl.formInputs dd
	{
	display:block;
	clear:right;
	margin-left:120px;  /*5px more than the label width */
	margin-bottom:8px;
	}

dl.formInputs dd.textOnly /* sets the top padding to match the dt if the dd contains only text and not a form element */
	{
	padding-top:2px;
	}

dl.formInputs dd.buttonRow
	{
	padding-top:10px;
	}

/* nested is used when a dl.checkbox or dl.radio sits inside of a dl.formInputs dd,
it clears some settings that would be inherited from formInputs (see billing.jsp) */
dl.nested dt,
dl.nested dd
	{
	margin:auto;
	width:auto;
	text-align:left;
	}

dl.formInputs dl.checkbox,
dl.formInputs dl.checkbox
	{
	padding-top:5px;
	}

/* refer to create_registry_include for example */
dl.checkbox,
dl.radio
    {
	font-size:90%;
	clear:both;
    }

dl.checkbox dd,
dl.radio dd
    {
    clear:none;
    float:left;
    width:20px;
    /*margin-top:-2px; */
    margin-left:-2px;
    }

dl.checkbox dt,
dl.radio dt
    {
	padding-top:3px;
	margin-left:22px;  /*2px more than the dd width */
	margin-bottom:7px;
	float:none;
	clear:right;
    }

dl.checkbox dt a
    {
	display:block;
    }

p.nextToLabel { padding-top:2px; }

/* formInputs class is generally only used as a table if the form consists of just one input with the button to the right of the input
	 */

table.formInputs td.col1 {
    padding-top:2px;
    font-size:10px;
    font-weight:bold;
    text-align:right;
    color:#000;
    }

table.formInputs td.col2 {
	padding:0 5px 8px 5px;
	}


/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~

	Default Image Sizes

-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

img#prodDetailImg { width:250px; height:250px; cursor:pointer; }
img.zoomThumbnail { width:53px; height:53px; cursor:pointer; }
img.zoomPopThumbnail { width:53px; height:53px; cursor:pointer; }
img.thumbnailImg { width:88px; height:88px; }
img.giftWrapThumb { width:50px; height:50px; }
img.giftWrapSwatch { width:88px; height:88px; }

a.thumbLink { width:88px; position:relative; }
/* used as a link around thumbnail images, setting the width on the anchor prevents the alt tag from breaking the layout in mozilla if the image were not to load */

table.checkout_table a.thumbLink { float:left; margin-right:10px; }

img.exclusiveThumb {
	display:none;
	position:absolute;
	bottom:0px;
	margin:4px;
}