@mixin verticalGradient($topColor, $bottomColor) {
	background-color: mix($topColor, $bottomColor);
	background-image: -webkit-gradient(linear, left top, left bottom, from($topColor), to($bottomColor)); 
	background-image: -webkit-linear-gradient(top, $topColor, $bottomColor); 
	background-image:    -moz-linear-gradient(top, $topColor, $bottomColor); 
	background-image:     -ms-linear-gradient(top, $topColor, $bottomColor); 
	background-image:      -o-linear-gradient(top, $topColor, $bottomColor); 
	background-image:         linear-gradient(top, $topColor, $bottomColor);
}

@mixin imageOnVerticalGradient($src, $topColor, $bottomColor) {
	background-color: mix($topColor, $bottomColor);
	background-image: url($src); /* fallback */
	background-image: url($src), -webkit-gradient(linear, left top, left bottom, from($topColor), to($bottomColor)); /* Saf4+, Chrome */
	background-image: url($src), -webkit-linear-gradient(top, $topColor, $bottomColor); /* Chrome 10+, Saf5.1+ */
	background-image: url($src), -moz-linear-gradient(top, $topColor, $bottomColor); /* FF3.6+ */
	background-image: url($src), -ms-linear-gradient(top, $topColor, $bottomColor); /* IE10 */
	background-image: url($src), -o-linear-gradient(top, $topColor, $bottomColor); /* Opera 11.10+ */
	background-position: center;
	background-repeat: no-repeat;
}

@mixin buttonImage($image-url, $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom) {
	@include imageOnVerticalGradient($image-url, $idle-color-top, $idle-color-bottom);
	&:active, &.selected {
		@include imageOnVerticalGradient($image-url, $active-color-top, $active-color-bottom);
	}
}

$nonselected-gradient-top: white;
$nonselected-gradient-bottom: #BBB;
$selection-color: #cdcdff;
$selected-gradient-top: $selection-color;
$selected-gradient-bottom: white;

@mixin button {
	cursor: pointer;
	-moz-user-select: none;
	-webkit-user-select: none;
	display: inline-block;
	border-style: solid;
	border-color: #aaa;
	border-width: 1px;
	padding: 3px;
}

@mixin roundedBox($radius) {
	-moz-border-radius: $radius;
	border-radius: $radius;
}

@mixin leftRoundedBox($radius) {
	-moz-border-radius-topleft: $radius;
	-moz-border-radius-bottomleft: $radius;
	border-top-left-radius: $radius;
	border-bottom-left-radius: $radius;
}
@mixin rightRoundedBox($radius) {
	-moz-border-radius-topright: $radius;
	-moz-border-radius-bottomright: $radius;
	border-top-right-radius: $radius;
	border-bottom-right-radius: $radius;
}

@mixin roundedButton($radius) {
	@include button;
	@include roundedBox($radius);
}

/*--------------------------------------
 *
 * G L O B A L
 *
 *--------------------------------------*/

html {
	margin: 0;
	padding: 0;
}

body {
	font: 11px Helvetica, Arial, sans-serif;
	background: #FFF;
	text-align: center;
	margin: 0;
	padding: 0;
	width: 100%;
	overflow-x: hidden;
	img { border: none; }
	a { outline: 0; }
	-webkit-text-size-adjust: none;

	div#torrent_container { min-height: 328px; }
	div.dialog_container { min-height: 326px; }
	div#torrent_inspector { min-height: 329px; }
	&.landscape div#torrent_container {	min-height: 147px; }
	&.landscape div#dialog_container,
	&.landscape div#torrent_inspector {	min-height: 143px; }
}

body.inspector_showing #torrent_filter_bar, body.inspector_showing #torrent_container,
body.dialog_showing #torrent_filter_bar, body.dialog_showing #torrent_container, body.dialog_showing #torrent_inspector,
body.prefs_showing #torrent_inspector, body.prefs_showing #torrent_filter_bar, body.prefs_showing #torrent_container,
body.open_showing #torrent_filter_bar, body.open_showing #torrent_container {
	display: none !important;
}

/***
****
****  TOOLBAR
****
***/

$toolbar-gradient-top: #ddd;
$toolbar-gradient-bottom: #bbb;
$toolbar-height: 39px;

div#toolbar
{
	width: 100%;
	height: $toolbar-height;
	margin: 0px;
	padding: 2px;
	border-bottom: 1px solid #AAA;
	@include verticalGradient($toolbar-gradient-top, $toolbar-gradient-bottom);

	$idle-color-top: $nonselected-gradient-top;
	$idle-color-bottom: $nonselected-gradient-bottom;
	$active-color-top: $selected-gradient-top;
	$active-color-bottom: $selected-gradient-bottom;

	> * {
		@include button;
		margin-top: 5px;
		width: 34px;
		height: 34px;
		float: left;
		border: none;
		padding: 0px 3px;
		background-position: center center;
		background-repeat: no-repeat;
	}

	>div#toolbar-separator {
		height: 25px;
		margin-top: 8px;
		margin-bottom: 8px;
		border-left: 1px solid #aaa;
		width: 3px;
	}

	> div#toolbar-open {
		background-image: url('images/toolbar-folder.png');
	}
	> div#toolbar-remove {
		background-image: url('images/toolbar-close.png');
	}
	> div#toolbar-start {
		background-image: url('images/toolbar-start.png');
	}
	> div#toolbar-pause {
		background-image: url('images/toolbar-pause.png');
	}
	> div#toolbar-start-all {
		background-image: url('images/toolbar-start-all.png');
	}
	> div#toolbar-pause-all {
		background-image: url('images/toolbar-pause-all.png');
	}

	> div#toolbar-inspector {
		background-image: url('images/toolbar-info.png');
		float: right;
	}

	> *.disabled {
		opacity: 0.25;
	}
}

/***
****
****  STATUSBAR
****
***/

$statusbar-gradient-top: #ddd;
$statusbar-gradient-bottom: #bbb;
$statusbar-height: 24px;

#statusbar
{
	height: $statusbar-height;
	width: 100%;
	border-bottom: 1px solid #AAA;
	overflow: hidden;
	position: relative;
	@include verticalGradient($statusbar-gradient-top, $statusbar-gradient-bottom);

	#filter
	{
		float: left;
		margin-left: 5px;

		input#torrent_search {
			display: none;
		}

		#filter-count { margin-left: 8px; }
	}

	#speed-info
	{
		float: right;
		margin-top: 5px;
		margin-right: 10px;

		* {
			display: inline-block;
		}

		#speed-up-icon {
			margin-left: 8px;
			width: 8px;
			height: 8px;
			background: url('images/arrow-up.png') bottom no-repeat;
		}

		#speed-dn-icon {
			width: 8px;
			height: 8px;
			background: url('images/arrow-down.png') bottom no-repeat;
		}

		#speed-up-container, #speed-dn-container {
			display: inline;
		}
	}
}

/***
****
****  TORRENT CONTAINER
****
***/

ul.torrent_list
{
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
	cursor: pointer;

	li.torrent
	{
		border-bottom: 1px solid #ccc;
		padding: 4px 30px 5px 14px;
		color: #666;
		background-color: white;

		&.compact { padding: 4px; }
		&.even { background-color: #F7F7F7; }
		&.selected { background-color: $selection-color; }
		&.compact { div.torrent_name { color: black; } }

		// start-stop button
		a {
			display: none;
		}

		div.torrent_name
		{
			font-size: 1.3em;
			font-weight: bold;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #222;
			margin-top: 2px;
			margin-bottom: 2px;

			&.compact { font-size: 1.0em; font-weight: normal; }
			&.paused { font-weight: normal; color: #777; }
		}

		div.torrent_progress_details,
		div.torrent_peer_details {
			clear: left;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		div.torrent_progress_details.error,
		div.torrent_peer_details.error {
			color: #F00;
		}

		&.selected div.torrent_progress_details.error,
		&.selected div.torrent_peer_details.error {
			color: #FFF;
		}
	}

	/**
	 * Progressbar
	 *
	 * Each progressbar has three elemens: a parent container and two children,
	 * complete and incomplete.
	 *
	 * The only thing needed to set the progressbar percentage is to set
	 * the complete child's width as a percentage. This is because incomplete
	 * is pinned to the full width and height of the parent, and complete
	 * is pinned to the left side of the parent and has a higher z-index.
	 *
	 * The progressbar has different colors depending on its state, so there
	 * are five 'decorator' classNames: paused, queued, magnet, leeching, seeding.
	 */
	div.torrent_progress_bar_container
	{
		height: 10px;
		position: relative;

		&.compact {
			width: 50px;
			position: absolute;
			right: 10px;
			margin-top: 2px;
			/*float: right;*/
		}
		&.full {
			margin-top: 2px;
			margin-bottom: 5px;
		}
	}
	div.torrent_peer_details.compact
	{
		margin-top: 2px;
		margin-right: 65px; /* leave room on the right for the progressbar */
		float: right; /* pins it next to progressbar & forces torrent_name to ellipsize when it bumps up against this div */
	}
	div.torrent_progress_bar
	{
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		background-image: url('images/progress.png');
		background-repeat: repeat-x;
		border: 1px solid #888;

		&.complete                   { z-index: 2; }
		&.complete.paused            { background-position: left -30px; border-color: #989898; }
		&.complete.magnet            { background-position: left -20px; border-color: #CFCFCF; }
		&.complete.leeching          { background-position: left   0px; border-color: #3D9DEA; }
		&.complete.leeching.queued   { background-position: left -70px; border-color: #889CA5; }
		&.complete.seeding           { background-position: left -40px; border-color: #269E30; }
		&.complete.seeding.queued    { background-position: left -60px; border-color: #8A998D; }
		&.incomplete                 { z-index: 1; width: 100%; }
		&.incomplete.paused          { background-position: left -20px; border-color: #CFCFCF; }
		&.incomplete.magnet          { background-position: left -50px; border-color: #D47778; }
		&.incomplete.leeching        { background-position: left -20px; border-color: #CFCFCF; }
		&.incomplete.leeching.queued { background-position: left -80px; border-color: #C4C4C4; }
		&.incomplete.seeding         { background-position: left -10px; border-color: #29AD35; }
	}
}

/***
****
****  PREFERENCES
****
***/

#prefs-dialog.ui-tabs .ui-tabs-panel {
	padding: 0px;
	-moz-user-select: none;
	-webkit-user-select: none;
}

.prefs-section
{
	margin: 10px;
	text-align: left;

	> * {
		padding-top: 8px;
		padding-left: 8px;
	}

	.title {
		font-weight: bold;
		font-size: larger;
		padding-left: 0px;
	}

	.row {
		.key {
			float: left;
			padding-top: 3px;
			> * { margin-left: 0px; }
		}
		.value {
			margin-left: 150px;
			> * { width: 100%; }
		}
	}

	.checkbox-row {
		> input { margin: 0px; }
		> label { margin-left: 5px; }
	}

	#alternative-speed-limits-title {
		padding-left: 18px;
		background: transparent url('images/blue-turtle.png') no-repeat;
	}
}

/***
****
****  TORRENT INSPECTOR
****
***/

div#torrent_inspector
{
	overflow: auto;
	text-align: left;
	padding: 15px;
	top: 0;
	position: relative;
	width: 100%;
	z-index: 2;

	$idle-color-top: $nonselected-gradient-top;
	$idle-color-bottom: $nonselected-gradient-bottom;
	$active-color-top: $selected-gradient-top;
	$active-color-bottom: $selected-gradient-bottom;


	#inspector-tabs-wrapper
	{
		width: 100%;
		overflow: hidden;
		text-align: center;

		#inspector-tabs
		{
			$border-radius: 5px;

			display: inline-block;

			> * {
				@include button;
				width: 30px;
				height: 20px;
			}

			> #inspector-tab-info {
                                @include leftRoundedBox($border-radius);
				@include buttonImage('images/inspector-info.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
                                border-left-width: 1px;
			}

			> #inspector-tab-peers {
				@include buttonImage('images/inspector-peers.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
			}

			> #inspector-tab-trackers {
				@include buttonImage('images/inspector-trackers.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
			}

			> #inspector-tab-files {
                                @include rightRoundedBox($border-radius);
				@include buttonImage('images/inspector-files.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
			}
		}
	}

	#inspector_header
	{
		margin-top: 8px;

		#torrent_inspector_name
		{
			font-weight: bold;
			font-size: large;
		}
	}

	ul.tier_list
	{
		margin: 2px 0 8px 0;
		width: 100%;
		padding-left: 0px;
		text-align: left;
		display: block;
		cursor: default;
		list-style-type: none;
		list-style: none;
		list-style-image: none;
		clear: both;

		li {
			overflow: hidden;
		}
		.tracker_activity {
			float: left;
			color: #666;
			width: 200px;
			display: table;
			margin-top: 1px;
		}
		.tracker_activity div {
			padding: 2px;
		}
		table {
			float: right;
			color: #666;
		}
		th {
			text-align: right;
		}
	}

	li.inspector_tracker_entry {
		padding: 3px 0 3px 2px;
		display: block;

		&.odd {
			background-color: #EEEEEE;
		}
	}

	div.tracker_host {
		font-size: 1.2em;
		font-weight: bold;
		color: #222;
	}

	/* Files Inspector Tab */
	#inspector_file_list {
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		text-align: left;
		cursor: default;
		overflow: hidden;
	}
	#inspector_file_list {
		border-top: 1px solid #888;
		width: 100%;
		margin: 6px 0 0 0;
		padding-top: 6px;
		padding-bottom: 10px;
		text-align: left;
		display: block;
		cursor: default;
		list-style-type: none;
		list-style: none;
		list-style-image: none;
		clear: both;
	}
	li.inspector_torrent_file_list_entry {
		padding: 3px 0 3px 2px;
		display: block;
		&.skip { color: #666; }
		&.even { background-color: #F7F7F7; }
	}

	div.inspector_torrent_file_list_entry_name {
		font-size: 1.2em;
		color: black; 
		display: inline;
		margin-left: 0px;
	}
	li.inspector_torrent_file_list_entry.skip>.inspector_torrent_file_list_entry_name {
		color: #999;
	}
	div.inspector_torrent_file_list_entry_progress {
		color: #999;
		margin-left: 20px;
	}

	ul.single_file li.inspector_torrent_file_list_entry>.file_wanted_control,
	li.inspector_torrent_file_list_entry.complete>.file_wanted_control {
		cursor: default;
	}
}

/* Peers Inspector Tab */
#inspector_peers_list {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	text-align: left;
	cursor: default;
	overflow: hidden;

	> div.inspector_group {
		padding-bottom: 0;
		margin-bottom: 0;
	}
}

table.peer_list {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	cursor: default;
	clear: both;
	table-layout: fixed;

	.encryptedCol { width: 16px; }
	.upCol { width: 70px; }
	.downCol { width: 70px; }
	.percentCol { width: 30px; padding-right: 5px; text-align: right; }
	.statusCol { width: 40px; padding-right: 5px; }
	.addressCol { width: 180px; }
	.clientCol { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

tr.inspector_peer_entry
{
	div.encrypted-peer-cell
	{
		width: 16px;
		height: 16px;
		background: transparent url('images/lock_icon.png') no-repeat;
	}

	&.odd
	{
		background-color: #EEEEEE;
	}
}

/***
****  File Priority Buttons
***/

div.file-priority-radiobox
{
	$border-radius: 5px;

	display: inline;
	float: right;
	margin: 4px;
	margin-top: 2px;

	> * {
		@include button;
		width: 20px;
		height: 12px;
	}

	// We have row after row of these buttons, so the flashy colors used in the inspector tabs look harsh here.
	// Keep the same basic color theme, but look less harsh, by cutting the gradient's color range.
	$idle-color-top:      mix( $nonselected-gradient-top, $nonselected-gradient-bottom, 80% );
	$idle-color-bottom:   mix( $nonselected-gradient-top, $nonselected-gradient-bottom, 20% );
	$active-color-top:    mix( $selected-gradient-top,    $selected-gradient-bottom,    80% );
	$active-color-bottom: mix( $selected-gradient-top,    $selected-gradient-bottom,    20% );

	> div.low {
		@include leftRoundedBox($border-radius);
		@include buttonImage('images/file-priority-low.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
		border-right-width: 0px;
	}

	> div.normal {
		@include buttonImage('images/file-priority-normal.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
	}

	> div.high {
		@include rightRoundedBox($border-radius);
		@include buttonImage('images/file-priority-high.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
		border-left-width: 0px;
	}
}


/****
*****
*****  MAIN WINDOW FOOTER
*****
****/

div.torrent_footer
{
	height: 22px;
	border-top: 1px solid #555;
	position: relative;
	width: 100%;
	z-index: 3;

	@include verticalGradient($statusbar-gradient-top, $statusbar-gradient-bottom);

	> div {
		position: relative;
		float: left;
		margin: 2px 4px;
		width: 18px;
		height: 12px;
		padding: 2px 8px;
		float: left;
		border: 1px solid #888;
		-moz-user-select: none;
		-webkit-user-select: none;
	}

	$idle-color-top: $nonselected-gradient-top;
	$idle-color-bottom: $nonselected-gradient-bottom;
	$active-color-top: $selected-gradient-top;
	$active-color-bottom: $selected-gradient-bottom;

	#settings_menu {
		display: none;
	}

	#prefs-button {
		@include roundedBox(5px);
		@include buttonImage('images/wrench.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
	}

	#turtle-button {
		@include roundedBox(5px);
		@include buttonImage('images/turtle.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
		&:active, &.selected {
			@include imageOnVerticalGradient('images/blue-turtle.png', $active-color-top, $active-color-bottom);
		}
	}

	#compact-button {
		@include roundedBox(5px);
		@include buttonImage('images/compact.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
	}

	#freespace-info	{
		float: right;
                text-align: right;
                border: 0px;
                width: 100px;
	}
}

/****
*****
*****  DIALOGS
*****
****/

div#dialog_message.dialog_message {
	width: 280px;
	margin: 10px auto 25px;
	font-size: 13px;
	line-height: 14px;
	word-wrap: break-word;
	overflow: hidden;
	padding-bottom: 0;
}

#torrent_upload_file, label[for="torrent_upload_file"]{
	display:none;
}

h2.dialog_heading {
	text-align: center;
	width: 300px;
	margin: 0 auto;
	font-size: 17px;
}

div.dialog_container a {
	color: white;
	padding: 7px 0;
	background: #222;
	text-decoration: none;
	border: 2px solid white;
	margin: 5px 5px 0;
	font-weight: bold;
	-webkit-border-radius: 16px;
	display: inline-block;
	width: 90px;
	font-size: 12px;
	text-align: center;
}

#dialog_container div.dialog_window img {
	margin: 5px auto 12px;
}

.landscape {
	div.dialog_container {
		a#dialog_cancel_button { left: 155px; }
		a#dialog_confirm_button { right: 110px; }
		img { float: left !important; margin: 0 0 0 50px; }
	}
	h2#dialog_heading.dialog_heading {
		margin: 5px auto 0;
		margin-left: 150px;
		text-align: left;
	}
	div#dialog_message.dialog_message {
		width: 300px;
		margin: 10px 0 20px 150px;
		text-align: left;
	}
}


.ui-menu-item {
  text-align: left;
  white-space: nowrap;
}

#torrent_context_menu {
  font-size: 1em;
  z-index: 3;
}

iframe#torrent_upload_frame {
	display: block; /* Don't change this : safari forms won't target hidden frames (they open a new window) */
	position: absolute;
	top: -1000px;
	left: -1000px;
	width: 0px;
	height: 0px;
	border: none;
	padding: 0;
	margin: 0;
}