﻿@import '../default.less';
@import '../mixins.less';
//DON'T ADD IMPORTS, ABOVE ARE TO MAKE INTELLISENSE WORK

div.api-explorer
{
	font-size: 10.5pt;
	display: none;

	h2
	{
		font: bold 14.5pt @title-font;
	}

	a
	{
		color: @accent-color;
	}

	a.item
	{
		padding: 0px 10px;
	}

	textarea#post-data
	{
		display: none;
		margin-bottom: 10px;
		border: 1px solid #CCC;
		width: 903px;
		max-width: 903px;
		min-width: 903px;
		font-size: 12px;
		font-family: monospace;
	}

	table
	{
		width: 100%;
		margin-bottom: 20px;

		.apps
		{
			margin-bottom: 10px;
			text-align: right;

			label
			{
				font: bold 10.5pt @title-font;
				color: gray;
			}
		}

		.apps select#apps
		{
			width: 140px;
			padding: 5px;
		}

		.access-token-panel
		{
			td
			{
				padding-top: 10px;
			}

			label
			{
				font: bold 10.5pt @title-font;
				color: gray;
			}

			input#access-token
			{
				width: 100%;
				padding: 5px 0;
				border: 1px solid #C0C0C0;
			}

			input#get-access-token
			{
				float: right;
				color: white;
				background-color: @accent-color;
				text-align: center;
				width: 97%;
				padding: 5px 0;
				border: none;
				font: bold 10pt @title-font;

				html[dir='rtl'] &
				{
					float: left;
				}
			}

			div#get-access-token-dialog
			{
				display: none;
			}
		}

		.request-panel
		{
			td
			{
				padding-top: 5px;
			}

			select#request-type
			{
				.margin-left-right(0, 5px);
				vertical-align: top;
				text-align: center;
				padding: 4px;
				width: 97%;

				html[dir='rtl'] &
				{
					.margin-left-right(5px, 0);
				}
			}

			span#url-container
			{
				border: 1px solid #c0c0c0;
				background-color: white;
				padding: 4px 0 5px 0;
				width: 100%;
				display: inline-block;
			}

			span#base-url
			{
				color: silver;
				margin-left: 5px;
			}

			html[dir='rtl'] span#base-url
			{
				unicode-bidi: bidi-override;
			}

			input#request-url
			{
				border: 0px;
				padding-top: 0px;
				padding-bottom: 0px;
			}

			html[dir='rtl'] input#request-url
			{
				unicode-bidi: bidi-override;
			}

			input#submit-request
			{
				float: right;
				color: white;
				background-color: @accent-color;
				width: 97%;
				padding: 5px 0;
				border: none;
				font: bold 10pt @title-font;

				html[dir='rtl'] &
				{
					float: left;
				}
			}
		}
	}
	/*#Region api-examples*/
	div#api-examples-panel
	{
		height: 472px;
	}

	div.api-examples
	{
		display: inline-block;
		vertical-align: top;
		width: 178px;
		overflow: auto;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	div.api-examples ul
	{
		margin: 10px 0 20px 0px;
		padding: 2px 0 2px 0px;
		list-style-type: none;
	}

	div.api-examples ul li
	{
		margin: 0px 0 12px 0px;
		font-size: 14px;

		span
		{
			font: bold 14.5pt @title-font;
		}
	}

	div.api-examples span
	{
		font-size: 22px;
	}

	div.api-examples ul li a.shifted
	{
		margin-left: 10px;
	}
	/*End Region api-examples*/
	div#description
	{
		height: 413px;
		overflow: auto;
		padding: 0 5px 5px 5px;
	}


	div#description-panel
	{
		display: inline-block;
		vertical-align: top;
		background-color: white;
		height: 470px;
		width: 235px;
		border: 1px solid #CCC;
		margin-left: 10px;
		position: relative;
	}

	html[dir='rtl'] div#description-panel
	{
		margin-left: 0px;
		margin-right: 10px;
	}

	div#description-panel hr
	{
		margin: 5px 0 0 0;
	}

	div#description-title
	{
		padding-top: 8px;
		padding-left: 15px;
		font-weight: bold;
		color: gray;
	}

	html[dir='rtl'] div#description-title
	{
		padding-left: 0px;
		padding-right: 15px;
	}

	span.title-string
	{
		font-weight: bold;
	}

	html[dir='rtl'] span.title-string
	{
		float: right;
	}

	div#description-unavailable
	{
		margin-top: 5px;
		font-size: 14px;
		padding-left: 15px;
		display: none;
	}

	a#show-reference
	{
		position: absolute;
		bottom: 3px;
		font-size: 11px;
		padding-left: 5px;
	}

	div#output-panel
	{
		display: inline-block;
		vertical-align: top;
		background-color: white;
		height: 470px;
		width: 656px;
		border: 1px solid #CCC;
		overflow: auto;
		font-family: monospace;
		font-size: 12px;
	}

	span.output-panel-string
	{
		color: green;
	}

	span.output-panel-string a
	{
		color: #04F;
	}

	span.output-panel-number
	{
		color: #04F;
		white-space: pre;
	}

	span.output-panel-number a
	{
		color: #04F;
	}

	span.output-panel-null
	{
		color: Gray;
	}

	div#output-panel ul
	{
		list-style-type: none;
		padding: 0px;
		margin: 0px 0px 0px 26px;
	}

	html[dir='rtl'] div#output-panel ul
	{
		margin: 0px 26px 0px 0px;
	}

	ul.api-description li
	{
		padding-bottom: 5px;
	}

	ul.api-description
	{
		padding-left: 10px;
		list-style: none;
		margin-top: 8px;
		margin-bottom: 8px;
	}

	html[dir='rtl'] ul.api-description
	{
		padding-right: 10px;
	}

	ul.api-description li span.property-name
	{
		font-size: 14px;
		font-weight: bold;
	}

	html[dir='rtl'] ul.api-description li span.property-name
	{
		float: right;
		margin-top: 3px;
	}

	ul.api-description li span.property-description
	{
		font-size: 12px;
	}

	html[dir='rtl'] ul.api-description li span.property-description
	{
		margin-right: 3px;
	}
	/*#region collapse on output-panel */
	div.collapser
	{
		position: absolute;
		left: -1.2em;
		cursor: pointer;
		padding-right: 10px;
		padding-left: 6px;
	}

	html[dir='rtl'] div.collapser
	{
		padding-right: 6px;
		padding-left: 10px;
	}

	div.collapser:after
	{
		content: "-";
	}

	div.collapsed > .collapser:after
	{
		content: "+";
	}

	div.hoverable
	{
		display: inline-block;
	}

	ul.collapsable li
	{
		position: relative;
	}

	div.hovered
	{
		background-color: #EBEEFC;
	}

	div.collapsed > .collapsable
	{
		display: none;
	}

	div.collapsed > .ellipsis
	{
		display: inherit;
		padding-left: 3px;
		padding-right: 3px;
	}

	span.ellipsis
	{
		display: none;
	}

	span.ellipsis:after
	{
		content: " … ";
	}
	/*#end region collapse on output-panel */
}

div#access-token-permissions
{
	margin-top: 15px;
}

div#access-token-permissions input[type="checkbox"]
{
	margin-right: 5px;
}

div#access-token-permissions div
{
	margin: 5px;
}
