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

	STANDARDIZE DEFAULTS

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

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

html,body
	{
	height:100%;
	}

body
	{
    font-family: myriad-pro, Arial, Helvetica, sans-serif;
	font-size:12px;
	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
	{
	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: 12px;
	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;}



.nowrap { white-space:nowrap; }

*:focus {outline: none;}       /* this removes the default orange/blue outline in input boxes in Chrome and Safari */
/*-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~

	ANCHORS

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


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

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

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

a:hover
	{
    color:#99cc33;
    background-color:transparent;
	}

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{
font-size:25px;
display:inline;
color:#444444;
line-height:1.1;
}

h2{
font-size:16px;
font-weight:bold;
color:#444444;
}

/*Bold subheading*/
h3{
font-size:14px;
font-weight:bold;
color:#444444;
}

/*Regular text behind blue bars*/
h4{
font-size:16px;
font-weight:bold;
color:#ffffff;
}
h5{
font-size:12px;
font-weight:normal;
margin: 0;
}

/*Large text behind blue bars*/
h6{
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    margin: 0;
}


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


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

	Classes used on form formatting

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

button {
	margin:0;
	padding:0;
}

/* these are used on user/order_status_body.jsp */
label.labelOnLeft
    {
    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 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.thumbnailRecords { width:164px; height:164px; }
img.giftWrapThumb { width:50px; height:50px; }
img.giftWrapSwatch { width:88px; height:88px; }

a.thumbLink { width:164px; 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;
}