@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;
	height: 100%;
}

body {
	font: 62.5% "lucida grande", Tahoma, Verdana, Arial, Helvetica, sans-serif; /* Resets 1em to 10px */
	color: #222;/* !important; */
	background: #FFF;
	text-align: center;
	margin: 0 0 30px;
	overflow: hidden;
	img { border: none; }
	a { outline: 0; }
}

/***
****
****  ABOUT DIALOG
****
***/

#about-dialog
{
	> * {
		text-align: center;
	}
	> #about-logo {
		background: transparent url('images/logo.png') top left no-repeat;
		width: 64px;
		height: 64px;
		margin-left: 100px;
	}
	> #about-title {
		font-size: 1.3em;
		font-weight: bold;
	}
}

/***
****
****  TOOLBAR
****
***/
$toolbar-gradient-top: #ddd;
$toolbar-gradient-bottom: #bbb;
$toolbar-height: 36px;

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;
		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: 5px;
                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;
		margin-right: 4px;
	}

	> *.disabled {
		opacity: 0.25;
	}
}

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

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

#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 {
			height: 18px;
			width: 100px;
			border-radius: 6px;
			&.blur { color: #999; }
		}

		#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
****
***/

$torrent-container-top: $toolbar-height + $statusbar-height + 6px;

div#torrent_container {
	position: fixed;
	top: $torrent-container-top;
	bottom: 22px;
	right: 0px;
	left: 0px;
	padding: 0px;
	margin: 0px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

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 {
			float: right;
			position: relative;
			right: -22px;
			top: 1px;

			img {
				position: relative;
				right: -10px;
			}

			div {
				background: url('images/buttons/torrent_buttons.png');
				height: 14px;
				width: 14px;
			}
	
			div.torrent_pause { background-position: left top; }
			div.torrent_resume { background-position: center top; }
	
			&:active {
				div.torrent_pause { background-position: left bottom; }
				div.torrent_resume { background-position: center bottom; }
			}
			&:hover {
				div.torrent_pause { background-position: left center; }
				div.torrent_resume { background-position: center center; }
			}
		}

		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;
	}

	#alternative-speed-limits-desc {
		font-size: smaller;
		padding-bottom: 4px;
	}

	#blocklist-info {
		font-size: smaller;
		margin-top: 3px;
	}
}

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

$inspector-width: 570px;

div#torrent_inspector
{
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	text-align: left;
	padding: 15px;
	top: $torrent-container-top;
	position: fixed;
	width: $inspector-width;
	z-index: 5;
	border-left: 1px solid #888;
	bottom: 22px;
	right: 0px;

	$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-close
	{
		display: none;
	}

	#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: 330px;
			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 {
		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;
	bottom: 0;
	position: fixed;
	width: 100%;
	z-index: 3;

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

	> div {
		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 {
		@include roundedBox(5px);
		@include buttonImage('images/settings.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom);
	}

	#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_container {
	position: absolute;
	top: 0;
	left: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
	text-align: center;
	color: black;
	font-size: 1.1em;
}

div.dialog_container div.dialog_window {
	background-color: #eee;
	margin: 0 auto;
	opacity: .95;
	border-top: none;
	text-align: left;
	width: 420px;
	z-index: 10;
	overflow: hidden;
	position: relative;
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.7);
	top: 80px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	div.dialog_container div.dialog_window {
		top: 0;
		margin-top: 71px;
	}
}

div.dialog_container .dialog_logo {
	width: 64px;
	height: 64px;
	margin: 20px 20px 0 20px;
	float: left;
	background: transparent url('images/logo.png') top left no-repeat;
}

div.dialog_container div.dialog_window h2.dialog_heading {
	display: block;
	float: left;
	width: 305px;
	font-size: 1.2em;
	color: black;
	margin-top: 20px;
}

div.dialog_container div.dialog_window div.dialog_message {
	float: left;
	padding-left: 3px;
	margin-left: -3px;
	width: 305px;
	overflow: hidden;
}

div.dialog_container div.dialog_window a {
	display: block;
	float: right;
	margin: 10px 20px 10px -8px;
	padding: 5px;
	background-color: #EEE;
	border: 1px solid #787878;
	width: 50px;
	height: 15px;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	color: #323232;
	-webkit-appearance: button;
	font: -webkit-control;
	cursor: default;
}

div.dialog_container div.dialog_window a:hover,
div.dialog_container div.dialog_window a:active {
	background: #C0C8D6 url('images/filter_bar.png') bottom repeat-x;
}

div#upload_container div.dialog_window div.dialog_message label {
	margin-top: 15px;
	display: block;
}

div#upload_container div.dialog_window div.dialog_message input {
	width: 249px;
	margin: 3px 0 0 0;
	display: block;
}

div#upload_container div.dialog_window div.dialog_message input[type=text] {
	width: 245px;
	padding: 2px;
}

div#upload_container div.dialog_window div.dialog_message input[type=checkbox] {
	margin: 15px 3px 0 0;
	display: inline;
	width: auto;
}

div#upload_container div.dialog_window div.dialog_message #auto_start_label {
	display: inline;
}

div.dialog_container div.dialog_window form {
	margin: 0;
	padding: 0px;
}

div#move_container input#torrent_path {
	width: 286px;
	padding: 2px;
}


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;
}

/****
*****
*****  POPUP MENU
*****
****/

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

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