.searchResults h2{margin-bottom: 10px;}

/* help circle! */
.helpCircle{position: absolute; height: 18px; width:33px; right:-30px; top:50%; margin-top: -10px; background:url(../images/layout/icons/question-mark.gif) no-repeat top; text-decoration: none; display: block; border: none !important;}
.helpCircle:hover{background-position: 50% -18px;}

/* grouped by collection */
.searchWrapper {padding: 10px;}
.searchWrapper h3 {padding-bottom: 5px; }
.searchWrapper h4 {padding-top: 5px; color:#666;}
.searchWrapper h5 {border-bottom:1px solid #CCCCCC; padding-bottom: 5px; margin-bottom: 10px; color:#898989;}

/* thumbnails of products */
.searchResultsGrid {xpadding: 2px 10px; min-height: 240px; xborder-left:10px solid #EEEEEE;}
* html .searchResultsGrid {margin-right: -25px;}
.searchResultsGrid ul{}
.searchResultsGrid li{display: block; margin:5px; text-decoration: none; position: relative;}
.searchResultsGrid li .thumbNail{display: block; text-decoration: none; border: none; height: 58px;text-align:left;}
.searchResultsGrid li .thumbNail .smallThumbNail{display: block; border: 2px solid #ddd; height: 50px; width: 50px; background-position: center; background-repeat: no-repeat; margin: 0 15px 0 0; float: left; background-color:#fff;}
.searchResultsGrid li .thumbNail:hover .smallThumbNail {border-color: #ccc;}
.searchResultsGrid li .thumbNail strong{display: block; font-size: 11px; color: #666; text-align: center; padding: 5px;cursor: pointer;}

/* and now our image popup: */
.searchResultsGrid li .thumbNail .bigThumbNail{background: #fff; padding: 8px; border: 2px solid #ccc; position: absolute; top:-100px; right:-10px; float: none; z-index: 5000;}
.searchResultsGrid li .thumbNail .bigThumbNail b{display: block; xborder: 4px solid #ddd; width: 370px; height: 370px; background: no-repeat center;}
.searchResultsGrid li .thumbNail .bigThumbNail em{display: block; font-style: normal; font-size: 13px; padding: 10px 5px; text-align: center;}

/* the hover action */
.searchResultsGrid li .thumbNail .bigThumbNail{display: none;}
.searchResultsGrid li:hover .thumbNail .bigThumbNail{display: block;}

/* hide this */
.searchResultsGrid li span.whereItIsFrom{display: none;}

/* finishes */
.searchResultsGrid li span.finishes{text-align: center; display: block;font-size: 11px;}
.searchResultsGrid li span.finishes a{padding:0 2px; text-decoration: none; color: #888;}
.searchResultsGrid li span.finishes a:hover{color:#333;}

/* these are removed for grid view */
.searchResultsGrid li p,
.searchResultsGrid li span.finishes{display: none;}


/* this is the complex version */
.detailedSearchResults li{display: block; float: none; width:auto; height: 180px;}
.detailedSearchResults li .thumbNail{position: absolute; top:0; left:0;}
.detailedSearchResults li .thumbNail strong{position: absolute; top:0; left:170px; width:400px; text-align: left; font-size: 18px;}
.detailedSearchResults li .thumbNail .bigThumbNail{display: block; position: absolute; top:0; left: 0; padding: 0; border: none;}
.detailedSearchResults li .thumbNail .bigThumbNail em{display: none;}
.detailedSearchResults li span.finishes{position: absolute; top:32px; left:176px; width:520px; background:#f5f5f5 url(../images/advancedSearch/detailed/finishes-word.jpg) no-repeat 5px 50%; padding: 5px 3px 5px 65px; text-align: left;}
.detailedSearchResults li span.whereItIsFrom{position: absolute; top:30px; left:176px; width:520px; padding: 5px 3px; text-align: left; font-size: 11px; color: #777; display: block; text-transform: lowercase;}
.detailedSearchResults li span.whereItIsFrom a{text-decoration: none; color: #666;}
.detailedSearchResults li span.whereItIsFrom a:hover{color: #000;}
.detailedSearchResults li p{font-size: 12px; line-height: 14px; color: #666; width:520px; position: absolute; top:60px; left:180px; height: 80px; overflow: hidden; display: block;}
.detailedSearchResults li p a{color:#000; text-decoration: none;}
.detailedSearchResults li p a:hover{color:#444;}





/* this is the older, full-sized version:


.searchResults h2{margin-bottom: 10px;}

/* help circle! 
.helpCircle{position: absolute; height: 18px; width:33px; right:-30px; top:50%; margin-top: -10px; background:url(../images/layout/icons/question-mark.gif) no-repeat top; text-decoration: none; display: block; border: none !important;}
.helpCircle:hover{background-position: 50% -18px;}

/* thumbnails of products 
.searchResultsGrid {padding: 0; width:725px; min-height: 240px; }
* html .searchResultsGrid {margin-right: -25px;}
.searchResultsGrid ul{}
.searchResultsGrid li{display: block; width:160px; height: 200px; float: left; margin: 0 20px 0 0; text-decoration: none; position: relative;}
.searchResultsGrid li .thumbNail{display: block; text-decoration: none; border: none;}
.searchResultsGrid li .thumbNail img{display: block; border: 4px solid #ddd;}
.searchResultsGrid li .thumbNail:hover img{border-color: #ccc;}
.searchResultsGrid li .thumbNail strong{display: block; font-size: 13px; color: #000; text-align: center; padding: 10px;cursor: pointer;}

/* hide this 
.searchResultsGrid li span.whereItIsFrom{display: none;}

/* finishes 
.searchResultsGrid li span.finishes{text-align: center; display: block;font-size: 11px;}
.searchResultsGrid li span.finishes a{padding:0 2px; text-decoration: none; color: #888;}
.searchResultsGrid li span.finishes a:hover{color:#333;}

/* these are removed for grid view 
.searchResultsGrid li p,
.searchResultsGrid li span.finishes{display: none;}


/* this is the complex version 
.detailedSearchResults li{display: block; float: none; width:auto; height: 180px;}
.detailedSearchResults li .thumbNail{position: absolute; top:0; left:0;}
.detailedSearchResults li .thumbNail strong{position: absolute; top:0; left:170px; width:400px; text-align: left; font-size: 18px;}
.detailedSearchResults li span.finishes{position: absolute; top:32px; left:176px; width:520px; background:#f5f5f5 url(../images/advancedSearch/detailed/finishes-word.jpg) no-repeat 5px 50%; padding: 5px 3px 5px 65px; text-align: left;}
.detailedSearchResults li span.whereItIsFrom{position: absolute; top:30px; left:176px; width:520px; padding: 5px 3px; text-align: left; font-size: 11px; color: #777; display: block; text-transform: lowercase;}
.detailedSearchResults li span.whereItIsFrom a{text-decoration: none; color: #666;}
.detailedSearchResults li span.whereItIsFrom a:hover{color: #000;}
.detailedSearchResults li p{font-size: 12px; line-height: 14px; color: #666; width:520px; position: absolute; top:60px; left:180px; height: 80px; overflow: hidden; display: block;}
.detailedSearchResults li p a{color:#000; text-decoration: none;}
.detailedSearchResults li p a:hover{color:#444;}



*/