/* RANKER 
 *
 * Allows users to rank and sort a list.
 *
 */
 
/* 

	.ranker_slot
	


 */

/* NEW SITE FURNITURE 
   ============================== */
   
.sortable_handle {
	width: 15px;
	height: 26px;
	float: left;
	border: 1px solid #ccc;
	border-left: none;
	cursor:pointer;
	background: #eee url(/universal/site_graphics/drag_bars.png) -3px no-repeat;
}

.thumbnail_list .sortable_handle {
	height: 40px;
}

.clean_white_button {
	border: 1px solid #999;
	background-color: white;
	text-align: center;
	padding: 5px;
	height: 28px;
	background-image: url(/universal/site_graphics/shiny_button_bg.gif);
	cursor: pointer;
	margin: 0;
}	

.clean_white_button.active {
	background: #ddd;
}

/* BASE LIST AND ELEMENT
 =============================== */

#ranker {
	float: left;
}

#ranker_container {
	float: left;
	width: 100%;
}

/* Base sortable list */			
.ranker_list {
	padding: 0;
	margin: 0;
	-webkit-padding-start: 0;
}

/* Base sortable element */
.ranker_item {
	border: 1px solid #ccc;
	width: 211px;
	font-size: 11px;
	text-align: left;
	cursor: pointer;
	margin: 0 0 5px 0;
	height: 12px;
}

.thumbnail_list .ranker_item {
	height: 40px;
	font-size: 13px;
	font-weight: bold;
}

.ranker_thumbnail {
	width: 40px;
	float: left;
	margin-right: 5px;
}

.ranker_headline_box {
	height: 60px;
}

.ranker_headline {
	font-size: 21px;
}

h3.ranker_pick_headline {
	padding: 3px 0 0 0;
	font-size: 21px;
	height: 30px;
}

.ranker_list_headline {
	font-size: 26px;
}

.ranker_list_deck {
	font-family: Georgia;
	color: #333;
	font-size: 14px;
	margin: 8px 0;
}

.ranker_small_item {
	font-size: 10px;
}

.ranker_item_name {
	margin: 5px 0 0 5px;
	font-weight: normal;
}

.ranker_item_title {
	color: #666;
	font-size: 11px;
	font-weight: normal;
	margin: 2px 0 0 5px;
}

/* OPTION ELEMENTS (LEFT SIDE)
 ================================ */

.ranker_options_container {
	float: left;
	width: 444px;
	margin-top: 21px;
}

.ranker_option_category {
	float: left;
	margin-bottom: 10px;
}

.ranker_option_column {
	float: left;
	width: 216px;
	margin-right: 10px;
}

.ranker_option_column.last {
	margin-right: 0;
}

/* Option element  */
.ranker_option {
	background-color: white;
	list-style: none;
}

/* Option placeholder (what's left behind while dragging) */
.ui-sortable-placeholder.ranker_option, .ranker_option_disabled {
	cursor: default;
	color: #CCC;
}

.ranker_option_disabled .ranker_item_title {
	color: #CCC;
}

.ranker_option_disabled .ranker_item, .ranker_item.ranker_option_disabled  {
	border: 1px solid #eee;
}

.ranker_option_disabled img {
	opacity: 0.25;
}

.ranker_add_container {
	float: left;
	width: 400px;
	margin: 20px 0 0 0;
	padding: 15px;
	border-top: 1px dotted #999;
	background-color: #eee;
	text-align: left;
}

/* Clean IE's mess */
#ranker_option_name {
	border: 1px solid #ddd;
	width: 201px;
	padding: 7px;
	font-size: 11px;
	text-align: left;
	cursor: pointer;
	height: 12px;
}

#ranker input#ranker_add_option {
	
}

/* SLOT ELEMENTS (RIGHT SIDE)
 ================================ */

.ranker_form_container {
	background-color: #E9E9E9;
	border: 1px solid #CCC;
	float: left;
	margin: 0px 20px 0px 0px;
	padding: 20px;
	width: 223px;
}

.ranker_form_container.number_list {
	width: 243px;
}

.ranker_slot_list {
	margin: 0;
	padding: 0;
	float: left;
}

.rank_slot_header {
	font-size: 15px;
	margin: 0px 0px 10px;
}

.ranker_slot_list .rank_slot_header {
	float: left;
	width: 100%;
}

/* Slot element */
.ranker_slot {
	width: 290px;
	float: left;
	position: relative;
	list-style: none;
	margin: 0 0 7px 0;
}

.ranker_slot_number {
	width: 20px;
	float: left;
	padding: 5px;
	font-weight: bold;
	color: #999;
}

.thumbnail_list .ranker_slot_number {
	font-size: 21px;
}

.ranker_slot_name {
	float: left;
	width: 211px;
	background-color: white;
	margin: 0;
}

.ranker_slot_delete {
	background-image: url(http://cache.boston.com/universal/newsprojects/rank/images/light_gray_close.png);
	background-position: 8px 10px;
	background-repeat: no-repeat;
	color: red;
	cursor: pointer;
	font-size: 15px;
	font-weight: bold;
	height: 35px;
	position: absolute;
	right: 45px;
	top: 4px;
	width: 30px;
}

.ranker_slot_delete.hover {
	background-image: url(http://cache.boston.com/universal/newsprojects/rank/images/dark_blue_close.png);
}

.ui-sortable-helper .ranker_slot_number {
	visibility: hidden;			
}

/* Placeholder for slots */
.rank_slot_placeholder {
	float: left;
	width: 211px;
	list-style: none;
	margin: 0 0 5px 29px;
	height: 28px;
}

.thumbnail_list .rank_slot_placeholder {
	height: 41px;
}

.ranker_headline_text {
	margin: 5px 0;
	color: #666;
}

/* FORM ELEMENTS
 ================================ */

.ranker_form {
	text-align: left;
	margin: 0px 0 0 0px;
	float: left;
}

.ranker_form_input {
	width: 195px;
	padding: 7px;
}

.ranker_comment_label {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 14px;
}

.ranker_comment {
	height: 100px;
}

.ranker_input_label {
	text-transform: uppercase;
	font-size: 11px;
}

.ranker_submit {
	width: 213px;
}

.ranker_add {
	width: 100px;
}

.ranker_add_headline {
	font-weight: bold;
	font-size: 14px;
	margin: 0 0 0px 0;
}

.ranker_add_deck {
	font-family: Georgia, "Times New Roman";
	font-size: 14px;
	padding: 0 0 5px 0;
	margin: 5px 0;
}

.hidden {
	display: none;
}


/* RANKER "THANK YOU" NOTE
 ============================= */
 
#ranker_thanks {
	float: left;
	margin-top: 20px;
	text-align: center;
	width: 100%;
}

h4.ranker_thanks_headline {
	font-size: 16px;
	margin-bottom: 20px;
	display: none;
}

.ranker_thanks_deck {
	font-size: 15px;
}

.ranker_thanks_submission {
	text-align: left;
	width: 300px;
	background-color: #f9f9f9;
	padding: 20px;
	margin: 20px auto 20px auto;
	border: 1px solid #ccc;
}

.ranker_thanks_list {
	text-align: left;
	width: 165px;
	background-color: #f9f9f9;
	padding: 20px;
	border: 1px solid #ccc;
	float: left;
	margin-right: 15px;
}

.ranker_thanks_block {
	padding: 0 0 10px 0;
	margin: 0 0 10px 0;
}

.rank_comment_header {
	font-size: 14px;
	margin-bottom: 15px;
}

.ranker_thanks_list.last {
	margin-right: 0;
}

.ranker_thanks_list.expanded {
	width: 255px;
}

.ranker_thanks_explanation {
	font-size: 14px;
}

.ranker_list_container.no_user {
	margin-left: 125px;
}

/* HOVER STATES
 ====================== */


/* Option placeholder (what's left behind while dragging) */
.rank_slot_placeholder {
	float: left;
	list-style: none;
	margin: 0 0 5px 29px;
	height: 28px;
	border: 1px solid #2851A2;
	background-color: #FFFFFF;
}

/* Option helper (what's active while dragging) */
.ui-sortable-helper.ranker_item.band_sorter_item,
.ranker_option_hover {
	border: 1px solid #2851A2;
	color: #2851A2;
	background-color: #EBF4FB;
}


.ranker_option_hover {
	font-weight: normal;
}

.rank_drop_hover.band_sorter_slot .ranker_slot_name {
	border: 1px solid #eee;
	color: #ccc;
	background-color: #eee;
}


/* Hover state for slot - Specific to Top 25 Bands */
.ranker_slot_empty.rank_drop_hover.band_sorter_slot .ranker_slot_name {
	border: 1px solid #2851A2;
	background-color: #EBF4FB;
}

.ranker_slot_empty.rank_drop_hover.band_sorter_slot .ranker_slot_number {
	color: #2851A2;
}

.ranker_slot_list .ranker_slot.ui-sortable-helper .ranker_slot_name {
	background-color: #EBF4FB;
	border: 1px solid #2851A2;
}

/* COMMENT LIST */

.rank_comment_list_item, .rank_comment_list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rank_comment_list_item {
	float: left;
	font-size: 13px;
	line-height: 1.4;
	width: 100%;
}

.rank_comment_list {
	margin: 10px 0;
	float: left;
	width: 100%;
}

.rank_comment_category_header {
	font-size: 13px;
}

.simple_comment_header_tools {
	display: none;
}

.rank_comment_list_item_number {
	float: left;
	margin-right: 10px;
	width: 20px;
}

.rank_comment_list_item .pct, .rank_comment_list_item .name {
	float: left;
	width: 77px;
}

.rank_comment_list_item .name {
	width: 145px;
}

.rank_comment_list_item .border {
	float: left;
	width: 40px;
}

.rank_comment_list_item .line {
	float: left;
	background-color: #ffa800;
	height: 10px;
}