/* the div that contains the "spinner" graphic while data is being loaded */
div#smileWidget_loading {
	position:absolute;
	top:1%;
	left:1%;
	width:98%;
	height:98%;
	background-image:url(../images/ajax-loader.gif);
	background-repeat: no-repeat;
	background-position: center;
	z-index:3;
	display:block;
}

/* style for the above div when no data operation is happening--just don't show it */
div#smileWidget_loading.hid {
	display:none;
}

/* #smileWidget_container is the div that wraps the whole widget */
div#smileWidget_container {
	border:1px solid #666;
	height:650px;
	position:relative;
	width:200px;
	font:11px Arial;
	background-color:#3F97B8;
	overflow:hidden;
}

/** header styles */
div#smileWidget_header_topStripe {
	background-color:#22607E; /* it is a blue stripe! */
	height:9px;
	width:100%;
	font-size:1px; /* IE in quirks mode makes this div tall even when there's no content without a short font-size */
}

/* the header image */
div#smileWidget_header_logo {
	height:66px;
	width:100%;
	background-image:url("../images/logo.jpg");
	background-position:center;
	background-repeat: no-repeat;
	border-bottom:1px solid #7FB7CA;
}

/** search bar  */
div#smileWidget_search {
	display:none; /* not shown by default, display changed to block via JS when it is shown */
	position:relative;
	height:33px;
	width:100%;
}
div#smileWidget_searchbg1{
	background:url(../images/searchsprite.png);
	display:block;
	height:100%;
	position:absolute;
	width:12px;
	z-index:2;
}
div#smileWidget_searchbg2{
	background:url(../images/searchsprite.png) repeat 0 -33px;
	height:100%;
	left:0;
	position:absolute;
	width:100%
}
div#smileWidget_searchbg3{
	background:url(../images/searchsprite.png) no-repeat 0 -66px;
	height:100%;
	position:absolute;
	right:0;
	width:40px;
	z-index:2;
}
form#smileWidget_searchform {
	margin:0;
}

/* text input area of search form */
input#smileWidget_searchterm {
	position:absolute;
	left:12px;
	top:7px;
	width:150px; /* resized via JS if non-standard widget width is used */
	font-size:10px;
	margin:0;
	border:none;
	background:none;
}

/* search button (empty, just fits over area of background graphic that has the maginfying glass icon */
a#smileWidget_searchbtn {
	text-decoration:none;
	position:absolute;
	top:6px;
	right:7px; /* this 7px plus the 33px width puts this in the right place to overlap */
	width:33px;  /* the right part of the bg image of smileWidget_searchbg3 */
	height:20px;
	margin:0;
	padding:0;
	display:block;
	z-index:3;
}


/* #smileWidget_result is the div that contains the result list */
div#smileWidget_result {
	padding:0;
	margin:0;
	position: relative;
	overflow:hidden;
}

div#smileWidget_resultcount {
	position:relative;
	background-color: #3F97B8;
	height:17px;
	padding-top:3px;
	width:100%;
	border-bottom:1px solid #7fb7ca;
	text-align: center;
	color: #fff;
	z-index:2;
}

/* shared class on both scroll buttons */
div.smileWidget_scroll {
	width:100%;
	height:27px;
	z-index:2;
	position:relative;
}
/* up-arrow scroll button */
div.smileWidget_scroll.smileWidget_scrollbackward {
	background:url(../images/scroll_up.png) repeat center;
}
/* down-arrow scroll button */
div.smileWidget_scroll.smileWidget_scrollforward {
	background:url(../images/scroll_down.png) repeat center;
}

/* fixed size div around results list */
/* smileWidget_list_holder height = 
	  650px smileWidget_container height
	-   9px smileWidget_header_topStripe height
	-  66px smileWidget_header_logo height
	-   1px smileWidget_header_logo bottom border thickness
	-  17px smileWidget_resultcount height
	-   3px smileWidget_resultcount top padding
	-   1px smileWidget_resultcount bottom border thickness
	-  27px smileWidget_scrollbackward height
	-  27px smileWidget_scrollforward height
	-  20px smileWidget_pagination height
	= 479px
*/
div#smileWidget_list_holder {
	overflow:hidden;
	height:479px; /* resized  by JS to be shorter if search bar is displayed or if non-standard height is used */
	width:100%;
	background-color: #f6f2eb;
	z-index:0;
}

/* div that contains the whole results list, (scrolled up and down by JS) */
div#smileWidget_list {
	position:relative;
	z-index:1;
}

/* div that wraps each short record view on the results list */
div.smileWidget_listrec {
	border-bottom: 1px solid #D4CCBD;
	padding:7px;
}

/* wrapper div around title of short and full record view */
div.smileWidget_titlewrap {
	clear: both;
	width:100%;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	color:#22607E;
}
/* title is only a link on the short record view */
a.smileWidget_title, a.smileWidget_title:active, a.smileWidget_title:visited{
	text-decoration:none;
	color:#22607E;
}

/* thumbnail image on short and long record view */
img.smileWidget_thumb {
	width:84px; /* actual full size of thumbnails = 100x75px */
	height:63px;
	border:2px solid #E2DFD8;
	float:left;
	position:relative;
	margin-bottom:10px;
	margin-top:10px;
}

/* wrapper around stars and more-info button on short record */
div.smileWidget_listrec_inner2 {
	float:right;
	width:80px;
	margin-top:7px;
	position:relative;
}
a.smileWidget_moreinfo {
	background-image:url(../images/btn_moreinfo.png);
	width:74px;
	height:23px;
	margin-bottom: 2px;
	margin-left: 2px;
	display:block;
	text-indent: -1000em;
	overflow:hidden;
	clear: both;
}
a.smileWidget_getactivity {
	background-image:url(../images/btn_getactivity.png);
	width:74px;
	height:23px;
	margin-bottom: 2px;
	margin-left: 2px;
	display:block;
	text-indent: -1000em;
	overflow:hidden;
	clear: both;
}

/* description DIV on both short and long record view */
div.smileWidget_desc {
	clear:both;
	color:#333;
}

div#smileWidget_pagination {
	position:relative;
	width:100%;
	height:20px;
	color: #fff;
	background-color: #3F97B8;
	text-align: center;
	z-index:2;
}
div#smileWidget_pagination a {
	color: #fff;
	text-decoration: none;
}

/*   #smileWidget_result_record is the div that contains the single-record result view */
div#smileWidget_result_record {
	width:100%;
	left: 101%; /* the "default" state of #smileWidget_result_record is to be hidden off to the right of the rest of the content (overflow is hidden on the parent) */
	top: 0;
	height:100%;
	overflow:auto;
	position: absolute;
	z-index: 50;
	background-color: #f6f2eb;
	padding:0;
	margin:0;
}
/* when showing a single record, the div should be positioned all the way left in its parent so 
it is in the visible area */
div#smileWidget_result_record.showing {
	left:0;
}

/** back to results button */
div#smileWidget_result_record a#smileWidget_back {
	width:100%;
	height:27px;
	display:block;
	text-indent: -1000em;
	background:url(../images/back_to_results.png) no-repeat #22607E;
	position: relative;
}

/* wrapper around full record contents below the "back to results" button */
div#smileWidget_record_inner {
	padding:6px;
	margin:0;
	background-color: #f6f2eb;
}

/* wrapper div around the link buttons on full record */
div.smileWidget_fullrec_inner2 {
	float:right;
	width:96px;
	margin-top:14px;
}
/** SMILE Details button */
a.smileWidget_smiledetails {
	width: 96px;
	height: 23px;
	display: block;
	text-indent: -1000em;
	background-image:url(../images/btn_smile_details.png);
}
/** GO TO ACTIVITY button */
a.smileWidget_goactivity {
	width: 96px;
	height: 23px;
	display: block;
	text-indent: -1000em;
	background-image:url(../images/btn_goto_activity.png);
	margin-top:8px;
}

div.smileWidget_keywords {
	margin:10px 0;
	color: #22607E;
}


/* Stuff for the "star" ratings */
div#smileWidget_container div.stardiv ul.star { LIST-STYLE: none; MARGIN: 3px 0; PADDING:0; WIDTH: 75px; HEIGHT: 15px; POSITION: relative; FLOAT: left; BACKGROUND: url('../images/stars.png') repeat-x; }
div#smileWidget_container div.stardiv li { PADDING: 0; MARGIN: 0; FLOAT: left; DISPLAY: block; WIDTH: 75px; HEIGHT: 15px; TEXT-DECORATION: none; text-indent: -9000px; Z-INDEX: 20; POSITION: absolute; PADDING: 0; }
div#smileWidget_container div.stardiv li.curr { BACKGROUND: url('../images/stars.png') left 30px; FONT-SIZE: 1px; }