/* BEGIN gallery image rolls */
/* Note the overlays used to use absolute positioning, but IE doesn't seem to allow
scrolling of absolutely positioned stuff within a table */

div.rolloverTrigger {
width: 133px;
height: 100px;
margin: 0;
padding: 0;
font-size: 10px;
}


div.bigRolloverTrigger {
height: 206px; /* same as above but "double height" */
}

/* this A tag wraps everything else and hosts the image as its background */
div.rolloverTrigger a {
display: block;
width: 100%;
height: 100%;
/* the borders below are placeholders that prevent the image jiggling on hover */
border-left: 1px solid white;
border-right: 1px solid white;
}


/* when a product is selected, we show a "sniper" constructed of these two: */
.sniperLeft {
margin-top: -100%;
width:15px;
height:98px;
border-bottom:1px solid #FFA800;
border-top:1px solid #FFA800;
border-left:1px solid #FFA800;
}
.sniperRight {
/* TODO */
width:15px;
height:98px;
border-bottom:1px solid #FFA800;
border-top:1px solid #FFA800;
border-right:1px solid #FFA800;
}

/* display headers and footers absolute over the top, initially hidden */
.imageRolloverHeader {
margin-top: -100px;
z-index: 1;
display: none;
width:128px; 
height:15px;
padding:3px 0 0 5px;
border: 1px #FFA800 solid;
border-left: none;
border-right: none;
background-color: #FFD200;
color:#DE5901;
font-weight:bold;
position: absolute;
}

.imageRolloverFooter {
margin-top: -20px;
display: none;
width:128px;
height:15px;
padding:3px 0 0 5px;
border: 1px #FFA800 solid;
border-left: none;
border-right: none;
background-color: #203A54;
color:#FFFFFF;
position: absolute;
}

div.bigRolloverTrigger .imageRolloverHeader {
/* needs to be a bit higher */
	margin-top: -206px;	
}

div.rolloverTrigger:hover .imageRolloverHeader,
div.rolloverTrigger:hover .imageRolloverFooter {
display: block;
}

div.rolloverTrigger:hover a {
border-left: 1px solid #FFA800;
border-right: 1px solid #FFA800;
}


/* only works in browsers that support it */
div.rolloverTrigger img {
opacity: 0.8;
}
div.rolloverTrigger:hover img {
opacity: 1.0;
}
div.rolloverActive img {
opacity: 1.0;
}

/* END gallery image rolls */

/*
.imageRolloverContainer{
margin-top:-206px;
position:relative;
font-size:10px;
}
.imageRolloverContainer2{
margin-top:-103px;
position:relative;
font-size:10px;
}

.rolloverTrigger .imageRolloverContainer { 
display: none;
}
.rolloverTrigger .imageRolloverContainer2 {
display: none;
}
.rolloverTrigger:hover .imageRolloverContainer {
display: block;
}
.rolloverTrigger:hover .imageRolloverContainer2 {
display: block;
}



.imageRolloverHeader {
width:126px; 
height:15px;
padding:3px 0 0 5px;
border: 1px #FFA800 solid;
background-color: #FFD200;
color:#DE5901;
font-weight:bold;
}
.imageRolloverImage {
width:131px;
height: 167px;
border-left: 1px #FFA800 solid;
border-right: 1px #FFA800 solid;
}
.imageRolloverImage2 {
width:131px;
height: 62px;
border-left: 1px #FFA800 solid;
border-right: 1px #FFA800 solid;
}
.imageRolloverFooter {
width:126px;
height:15px;
padding:3px 0 0 5px;
border: 1px #FFA800 solid;
background-color: #203A54;
color:#FFFFFF;
}

#imageHalfRolloverContainer{
left:178px;
top: 195px;
position: absolute;
display: inline;
width:137px; 
}

#imageRolloverPrice {
width:45px; 
height:17px;
padding-right: 3px;
float:right;
background-color: #FFD200;
color:#DE5901;
}

.sniper{
margin-top:-100px;
position:relative;
height:100px;
}
.sniperL{
position:absolute;
width:15px;
height:98px;
border-bottom:1px solid #FFA800;
border-top:1px solid #FFA800;
border-left:1px solid #FFA800;
}
.sniperR{
position:absolute;
left:121px;
width:15px;
height:98px;
border-bottom:1px solid #FFA800;
border-top:1px solid #FFA800;
border-right:1px solid #FFA800;
}
*/
.clickable {
cursor: pointer;
}

#imageHalfRolloverImage {
width:137px;
height: 78px;
border-left: 1px #FFA800 solid;
border-right: 1px #FFA800 solid;
}

#imageRolloverText{
padding: 3px 5px 6px 5px;
}

#swatchRolloverHeader{
width: 115px;
height: 15px; 
margin-top: 1px;
border-bottom: 1px #FFA800 solid;
}
#swatchRolloverArea{
padding-left: 2px;
width: 115px;
margin-top: 2px;
height: 15px; 
}

/* for draggable products in compare gallery */
div.draggable {
	cursor: move;
}

.dropTarget {
	background: #eee;
}
.dropTarget img {
	display: none; /* hide the dropping instructions on drag */
}

div.swatchRolloverContainer{
z-index:1000;
position: absolute;
width:115px;
height: 70px; 
border: 2px #FFA800 solid;
background-color:#FFFFFF;
display: none;
}
.swatchRolloverPointRight{
position:absolute;
top:70px;
left:100px;
}
.swatchRolloverPointLeft{
position:absolute;
top:70px;
left:1px;
}

.swatchHeaderTitle{
color:#FFA800;
font-weight:bold;
padding:1px 0 1px 5px;
border-bottom:1px solid #FFA800;
}
.swatchContent{
padding:5px;
}
.swatchContent P{
margin:0;
color:#5C85C4;
font-size:10px;
}
.swatchContent P A{
color:#FFA800;
}
.swatchContent P A:visited{
color:#FFA800;
}
.swatchTitle{
color:#FFA800;
font-weight:bold;
border-bottom:1px solid #FFA800;
height:13px;
padding-left:5px;
overflow:hidden;
}
.swatchTitle IMG{
float:right;
}

div#compareHint {
z-index:1000;
position: absolute;
width:105px;
height: 110px; 
border: 2px #203A54 solid;
background-color: #5C85C4;
display: none;
padding: 5px;
top: 300px;
left: 15px;
color: white;
font-size: 1.2em;
font-weight: bold;
}
img.hintPoint{
position:absolute;
top:120px;
left:1px;
}
div#cartHint {
z-index:1003;
position: absolute;
width:150px;
height: 110px; 
border: 2px #203A54 solid;
background-color: #5C85C4;
display: none;
padding: 5px;
top: 520px;
left: 750px;
color: white;
font-size: 1.2em;
font-weight: bold;
}

/* for cart */
.errmsg {
color: red;
}

#cartBar input {
position: absolute;
top: 0;
right: 0;
}