/* Admin CSS
   ========================================================================== */

#social-metrics-tracker .wp-list-table #views,
#social-metrics-tracker .wp-list-table #comments {
	width: 15%;
}

#social-metrics-tracker .wp-list-table #social {
	width: 25%;
}

#dashboard-widgets {
	#social-metrics-tracker .wp-list-table #social {
		width: auto;
	}
}

/* Align thead lables
   ========================================================================== */

#social-metrics-tracker .wp-list-table #views a,
#social-metrics-tracker .wp-list-table #social a,
#social-metrics-tracker .wp-list-table #comments a {
	width: 90%;
}

#social-metrics-tracker .wp-list-table thead .column-views a span,
#social-metrics-tracker .wp-list-table thead .column-social a span,
#social-metrics-tracker .wp-list-table thead .column-comments a span,
#social-metrics-tracker .wp-list-table tfoot .column-views a span,
#social-metrics-tracker .wp-list-table tfoot .column-social a span,
#social-metrics-tracker .wp-list-table tfoot .column-comments a span {
	float: right;
}

#social-metrics-tracker .wp-list-table tfoot .column-social a,
#social-metrics-tracker .wp-list-table tfoot .column-comments a {
	float: right;
	padding-right: 17px;
}

#social-metrics-tracker .wp-list-table #views .sorting-indicator,
#social-metrics-tracker .wp-list-table #social .sorting-indicator,
#social-metrics-tracker .wp-list-table #comments .sorting-indicator {
	margin: 7px;
}

#social-metrics-tracker .wp-list-table td.date {
	color: #666;
	font-size: 10px;
}

#social-metrics-tracker .wp-list-table td.views,
#social-metrics-tracker .wp-list-table td.social,
#social-metrics-tracker .wp-list-table td.comments {
	padding: 10px;
	text-align: right;
}

#social-metrics-tracker .wp-list-table .bar,
#social-metrics-tracker .wp-list-table .total {
	border-radius: 2px;
	display: inline-block;
	float: right;
}

#social-metrics-tracker .wp-list-table .bar {
	height: 20px;
	margin-left: 5px;
	overflow: visible;
}

#social-metrics-tracker .wp-list-table .bar span {
	float: left;
	font-size: 9px;
	font-weight: 300;
	height: 20px;
	line-height: 21px;
	overflow: hidden;
	text-align: center;
	text-indent: -9999px;
}

#social-metrics-tracker .wp-list-table td.social .bar {
	overflow: hidden;
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

#social-metrics-tracker .wp-list-table td.social .bar span { display: inline-block; }

#social-metrics-tracker .wp-list-table td.social .bar .facebook 	{ background-color: #3b5998; color: #EEE; }
#social-metrics-tracker .wp-list-table td.social .bar .twitter 		{ background-color: #00aced; color: #EEE; }
#social-metrics-tracker .wp-list-table td.social .bar .googleplus 	{ background-color: #dd4b39; color: #EEE; }
#social-metrics-tracker .wp-list-table td.social .bar .linkedin 	{ background-color: #4875B4; color: #EEE; }
#social-metrics-tracker .wp-list-table td.social .bar .pinterest 	{ background-color: #cb2027; color: #EEE; }
#social-metrics-tracker .wp-list-table td.social .bar .diggs 		{ background-color: #444444; color: #EEE; }
#social-metrics-tracker .wp-list-table td.social .bar .delicious 	{ background-color: #222222; color: #EEE; }
#social-metrics-tracker .wp-list-table td.social .bar .reddit 		{ background-color: #CEE3F8; color: #111; }
#social-metrics-tracker .wp-list-table td.social .bar .stumbleupon 	{ background-color: #EA4B24; color: #EEE; }
#social-metrics-tracker .wp-list-table td.social .bar .xing         { background-color: #006567; color: #EEE; }
#social-metrics-tracker .wp-list-table td.social .bar .flattr       { background-color: #66b115; color: #EEE; }
#social-metrics-tracker .wp-list-table td.social .bar .other 		{ background-color: #666666; color: #EEE; }

#social-metrics-tracker .wp-list-table tr:hover td.social .bar {
	min-width: 80%;
	opacity: 0.9;
}

#social-metrics-tracker .wp-list-table tr:hover td.social .bar span {
	text-indent: 0;
}

#social-metrics-tracker .wp-list-table td.social .bar {
	max-width: 190px;
	min-width: 5px;
}

#social-metrics-tracker .wp-list-table td.views .bar {
	background-color: #A9243B;
	color: #EEE;
	max-width: 80%;
	min-width: 18px;
}

#social-metrics-tracker .wp-list-table td.comments .bar {
	background-color: #02BAC1;
	color: #EEE;
	max-width: 80%;
	min-width: 18px;
}

#social-metrics-tracker .wp-list-table td .total {
	height: 16px;
	overflow: hidden;
}

#social-metrics-tracker .wp-list-table td.social .total {
	padding: 2px 5px;
}

#social-metrics-tracker .wp-list-table td.views .total {
	background-color: #A9243B;
	padding: 2px 5px;
}

#social-metrics-tracker .wp-list-table td.comments .total {
	background-color: #02BAC1;
	padding: 2px 5px;
}



/* Chart 2
   ========================================================================== */

#social-metrics-tracker .wp-list-table td.decayed .bar {
	background-color: #555;
	color: #EEE;
	line-height: 19px;
	max-width: 80%;
	min-width: 32px;
	padding-right: 5px;
}

#social-metrics-tracker .wp-list-table td.aggregate .bar .social {
	background-color: #3B5998;
	color: #CCC;
	display: inline-block;
}

#social-metrics-tracker .wp-list-table td.aggregate .bar .views {
	background-color: #A9243B;
	color: #EEE;
	display: inline-block;
}

#social-metrics-tracker .wp-list-table td.aggregate .bar .comments {
	background-color: #02BAC1;
	color: #CCC;
	display: inline-block;
}

#social-metrics-tracker .wp-list-table tr:hover td.aggregate .bar.stats span {
	text-indent: 0;
}

#social-metrics-tracker .wp-list-table td.aggregate .bar {
	-webkit-transition: all 0.1s ease-out;
	       -moz-transition: all 0.1s ease-out;
	         -o-transition: all 0.1s ease-out;
	            transition: all 0.1s ease-out;
}

#social-metrics-tracker .wp-list-table td.aggregate .bar:hover {
	min-width: 80%;
	opacity: 0.9;
}

#social-metrics-tracker .wp-list-table td.aggregate .bar:hover span {
	text-indent: 0;
}



/* Dashboard
   ========================================================================== */

#dashboard-widgets #social-metrics-tracker .inside {
	margin: 0;
	padding: 0;
}

#dashboard-widgets #social-metrics-tracker .tablenav.top {
	display: none;
}

#dashboard-widgets #social-metrics-tracker .tablenav.bottom {
	height: auto;
}

#dashboard-widgets #social-metrics-tracker .tablenav.bottom p {
	color: #AAA;
	font-style: italic;
}

#dashboard-widgets #social-metrics-tracker .tablenav-pages {
	display: none;
}

#dashboard-widgets #social-metrics-tracker .wp-list-table {
	border-left: none;
	border-right: none;
	border-top: none;
}

#dashboard-widgets #social-metrics-tracker th {
	padding-right: 10px;
	text-align: right;
}

#dashboard-widgets #social-metrics-tracker th:first-of-type {
	text-align: left;
}

#dashboard-widgets #social-metrics-tracker tfoot {
	display: none;
}


/* Configuration page CSS
   ========================================================================== */

#smt-settings-connections-page {

	table {
		border: none;
		border-spacing: 0;


		th {
			text-align: left;
			font-weight: bold;
			background-color: #DDD;

			&:first-child {
				border-radius: 3px 0 0 3px;
			}
			&:last-child {
				border-radius: 0 3px 3px 0;
			}
		}

		td, th {
			padding: 8px 10px;
		}

		tr:nth-child(odd) {
			background-color: #EEE;
		}
	}

}

.social-metrics_page_social-metrics-tracker-settings .wrap,
.settings_page_social-metrics-tracker .wrap {
	max-width: 900px;
}

#smt_gapi_steps {
	display: block;
	width: 100%;
	min-width:850px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	border:1px solid #AAA;
	background: #C1C1C1;
}

#smt_gapi_steps li {
	display: block;
	float: left;
	margin:0;

}

#smt_gapi_steps li .btn {
	display: block;
	position: relative;
	padding: 10px 0 10px 45px;
	text-decoration: none;
	background:#C1C1C1;
	color:#666666;
	cursor: default;
}

#smt_gapi_steps li a.btn:hover {
	text-decoration: underline;
	cursor: pointer;
}

#smt_gapi_steps li:first-child .btn {
	padding-left: 15px;
}

#smt_gapi_steps li .btn:after {
	content: " ";
	display: block;
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 30px solid #C1C1C1;
	position: absolute;
	top: 50%;
	margin-top: -50px;
	left: 100%;
	z-index: 2;
}

#smt_gapi_steps li .btn:before {
	content: " ";
	display: block;
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	border-left: 30px solid white;
	position: absolute;
	top: 50%;
	margin-top: -50px;
	margin-left: 1px;
	left: 100%;
	z-index: 1;
}

#smt_gapi_steps li:last-child .btn {
	padding-right:15px;
}
#smt_gapi_steps li:last-child .btn:after,
#smt_gapi_steps li:last-child .btn:before {
	display: none;
}

#smt_gapi_steps li.done .btn {
	background:#008000;
	color:#94C692;
}
#smt_gapi_steps li.done .btn:after {
	border-left-color:#008000;
}
#smt_gapi_steps li.current .btn {
	background:#043D50;
	color:#FFFFFF;
}
#smt_gapi_steps li.current .btn:after {
	border-left-color:#043D50;
}

#smt_gapi_steps.ready {
	background:#008000;
}
#smt_gapi_steps.ready .current .btn {
	background:#008000;
}

#gapi-sign-in {
	display: block;
	max-width: 350px;
	margin:0 auto;
	text-align: center;
}

.blue-box {
	background:#CDE0FF;
	border:1px solid #96BFFF;
}

.blue-box th {
	padding-left:20px;
}

.yellow-box {
	background:#FFF7E7;
	border:1px solid #C6C1B3;
	margin-bottom:15px;
}

.yellow-box th {
	padding-left:20px;
}

div.yellow-box {
	padding:0 15px; margin:15px 0;
}


/* Status indicator on dashboard
   ========================================================================== */

#smt-connection-status {
	display: block;
	clear: both;
	background: #FFF;
	border: 1px solid #DDD;
	padding: 5px 10px;
	margin: 15px 0 30px 0;
	overflow: auto;

	.smt-debug-box {
		width: 100%;
		min-height: 300px;

		font-family: monospace;
		font-size: 12px;
		border: 1px solid #DDD;
		padding: 10px;
	}
}

#smt-connection-status small {
	color: #AAA;
	font-size: 11px;
}

.smt-connection-item {
	display: block;
	position: relative;
	/*float: left;*/
	padding: 10px 20px 10px 28px;
	color: #666;
}

.smt-connection-item:before {
	content:"";
	position: absolute;
	left:10px;
	top:13px;
	display: block;
	background: black;
	border-radius: 100%;
	height: 12px;
	width: 12px;
	margin: 0;
}

.smt-connection-item.online:before {
	background: radial-gradient(circle at 3px 3px, rgb(0,180,100), rgba(80,80,80,0.9));
}
.smt-connection-item.offline:before {
	background: radial-gradient(circle at 3px 3px, rgb(180,50,0), rgba(80,80,80,0.9));
}

button.smt-connection-item {
	float: right;
	background: none;
	border:none;
	cursor: pointer;
	padding-right: 0;
}

button.smt-connection-item:hover {
	text-decoration: underline;
}

button.smt-connection-item:focus {
	outline: none;
}



/* Stat Details Pane
   ========================================================================== */
.toplevel_page_social-metrics-tracker {
	.smt-stat-details {

		ol {
			margin-top:0;
		}
		li {
			color: #999;
			font-size: 11px;
			margin-bottom: 0;
		}

		.detail-heading {
			font-weight: bold;
			margin: 12px 0 6px 0;
		}

		.smt-url-box {
			cursor: text;
			font-size: 11px;
			border: 1px solid #E7E7E7;
			background: #FFFFFF;
			width: 50%;
		}

		.info {
			margin-left: 6px;
			color: #ddd;
		}

		.more-info {
			margin-left: 6px;
			color: #CCC;
			&:hover {
				color: #2ea2cc;
			}
		}

		.smt-stat-row {
			margin-bottom: 15px;
		}
	}
}


/* Stat Details Pane
   ========================================================================== */
.social-metrics_page_social-metrics-tracker-settings,
.settings_page_social-metrics-tracker {
	.smt-url-box {
		color: #333;
		width: 90%;
	}

	.more-info {
		margin-left: 6px;
		color: #CCC;
		&:hover {
			color: #2ea2cc;
		}
	}

	.box {
		background: #f9f9f9;
		border: 1px solid #e1e1e1;
		padding: 30px;

		.label {
			display: block;
			color: #999;
			margin-top:8px;

			h3 {
				display: inline-block;
			}
		}

		h1:first-child,
		h2:first-child,
		h3:first-child,
		h4:first-child,
		h5:first-child,
		h6:first-child,
		p:first-child {
			margin-top: 0;
		}

		h1:last-child,
		h2:last-child,
		h3:last-child,
		h4:last-child,
		h5:last-child,
		h6:last-child,
		p:last-child {
			margin-bottom: 0;
		}

		blockquote {
			border-left: 5px solid #DDD;
			margin-left: 0;
			padding: 11px;
			background: #F2F2F2;
			color: #626262;
		}

	}

	.invalid {
		background: #FFF0F0;
	}

	.valid {
		background: #F0FFF0;
	}
}