/* 
	Default layout 
	everything must be within .gspark namespace
*/

* { outline:none; }

body { margin:0; padding:0; font-size:62.5%; background-color:#333; }

button::-moz-focus-inner { border:none }

a { color:#3af }

/* DEBUG */
iframe#_void {
	position:fixed;
	top:0px;
	left:0px;
	width:400px;
	height:500px;
	
}

/*-----------------------------------------------------------*/
#gspark { min-width:1024px; }

.gspark {
	font-family: lucida grande, verdana, arial;
	font-size:1.3em;
	background-color:#555;
}



.gspark .header {
	background:#333 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkEAQAAAC9tU6oAAAAAmJLR0T//xSrMc0AAAAJcEhZcwAAAEgAAABIAEbJaz4AAAAJdnBBZwAAAAEAAABkAN8fwA8AAAA7SURBVBjTY3Bw+P+fiYHhXxYTA8PfLBws0iX+ZVOglwJ7STM0e7A5CJtENpl6mRUUWB6iSTAwMDAwAACPkYybomgMzAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMC0wMS0xM1QxNDo1MzozOCswMjowMNNKvYgAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTAtMDEtMTNUMTQ6NTM6MzgrMDI6MDCiFwU0AAAAAElFTkSuQmCC') repeat-x;
	color:#fff;
	border-bottom:solid 1px #000;
}

	.gspark .header ul {
		margin:0;
		padding:0;
		list-style-type:none;
	}
	
		.gspark .header ul li {
			margin:0;
			padding:0;
			display:inline-block;
		}
		
			.gspark .header ul li a {
				color:#999;
				display:block;
				text-decoration:none;
				padding:1em;
			}
	
	
	.gspark .header .row1 {
		border-bottom:solid 1px #111;
	}
	
		.gspark .header .row1b {
			position:relative;
			width:1024px;
			margin:auto;
		}
		
		.gspark .header ul.nav1 li {
			border-left:solid 1px #555;
			border-right:solid 1px #111;
		}
		
		.gspark .header ul li.logo {
			border-left:none;
		}

			.gspark .header ul.nav1 li a {
				color:#aaa;
				padding:1.5em 2em 2em 2em;
				text-shadow:0px 0px 5px #000000;
				font-size:1.2em;
			}
			
			.gspark .icon.sparkLogo span {
				display:block;
				text-indent:-2000px;
				width:66px;
				height:24px;
			}
			
		.gspark .header ul li.icon {
			border:none;
			font-size:0.8em;
		}
		
	.gspark .header .row2 {
		border-top:solid 1px #555;
	}
		
	.gspark .header ul.nav2 {
		text-align:right;
		margin:auto;
		width:1024px;
		/* width:90% for strechy layout */
	}
	
		.gspark .header ul.nav2 li.user img {
			border:solid 1px #555;
			padding:1px;
			background-color:#000;
			width:24px;
			height:24px;
			margin-bottom:-8px;
			margin-right:8px;
		}
		
	.gspark .header ul.nav3 {
		position:absolute;
		top:1em;
		right:25%;
	}
	
		.gspark .header ul.nav3 li.icon span {
			padding-left:2.4em;
			height:22px;
			display:block;
		}

/*-----------------------------------------------------------*/	
/* HEADER SEARCH                                             */
/*-----------------------------------------------------------*/	
	.gspark .header .search {
		position:absolute;
		display:block;
		top: 2em;
		right: 1em;
		font-size:0.8em;
	}
		.gspark .header .search fieldset {
			display:block;
			border:solid 1px #111;
			margin:0;
			padding:0;
			
			background:#555 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYEAQAAADBVYMSAAAAAmJLR0T//xSrMc0AAAAJcEhZcwAAAEgAAABIAEbJaz4AAAAJdnBBZwAAAAEAAAAYAFyV9vUAAAAoSURBVAjXY0hL+/+fiYHh630mBoav9+AsLNwvOGWJVQfhMjAwMDAAAJX5KyUV6xRtAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDEwLTAxLTEzVDE0OjUxOjUwKzAyOjAwIj8qVQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxMC0wMS0xM1QxNDo1MTo1MCswMjowMFNikukAAAAASUVORK5CYII=') repeat-x;
			text-shadow:0px 0px 3px #000000;
		}
	
			.gspark .header .search label {
				color:#aaa;
				padding:.5em;
			}
			
			.gspark .header .search input {
				border:none;
				background-color:transparent;
				color:#fff;
			}
			
			.gspark .header .search button {
				margin:0;
				padding:0;
				border:none;
				color:#888;
				background-color:#000;
				text-indent:-2000px;
				width:26px;
				height:22px;
				border-left:solid 1px #000;
				overflow:hidden;
			}
			

/*-----------------------------------------------------------*/
	.gspark .layout {
		background-color:#666;
		position:relative;
		/* width:90% for strechy layout */
		width:1024px;
		margin:auto;
		border:solid 1px #444;
		border-left:solid 4px #444;
		-moz-border-left-colors:#4f4f4f #4b4b4b #484848 #424242;
		border-right:solid 4px #444;
		-moz-border-right-colors:#4f4f4f #4b4b4b #484848 #424242;
	}
/*-----------------------------------------------------------*/
/* Side navigations
/*-----------------------------------------------------------*/

		.gspark .layout .navi {
			border-top:solid 2px #555;
			position:absolute;
			width:20%;
			top:0;
		}
		
		.gspark .layout .navi.left {
			left:0;
		}
	
		.gspark .layout .navi.right {
			right:0;
		}
		
			.gspark .layout .navi ul {
				list-style-type:none;
				margin:2em 1em;
				padding:0;
			}
			
				.gspark .layout .navi li {
					padding:.2em;
				}
			
				.gspark .layout .navi li.title {
					border-bottom:groove 2px;
				}
				
				
				.gspark .layout .navi li a {
					color:#fff;
					text-decoration:none;
					display:block;
					padding:.4em .8em;
					border-left:solid 1px transparent;
					border-radius:3px;
					-webkit-border-radius:3px;
					-moz-border-radius:3px;
				}
				
				.gspark .layout .navi li a.selected:hover, 
				.gspark .layout .navi li a:hover {
					background:transparent url(img/naviBg.png) top right;
					border-left:solid 1px #444;
					display:block;
				}
								
				.gspark .layout .navi li a.selected {
					background:transparent url(img/naviBg2.png) top right;

				} 
				
				
				.gspark .layout .navi li.title a:hover {
					background:transparent none;
					border-left:solid 1px transparent;
				}
				
					.gspark .layout .navi li.icon span {
						padding-left:1.8em;
					}
				
					.gspark .layout .navi li a b {
						float:right;
						display:inline-block;
						background-color:#444;
						padding:2px 6px;
						font-size:0.7em;
						border:solid 1px #111;
						border-color:#222 #777 #777 #222;
						border-radius:3px;
						-webkit-border-radius:3px;
						-moz-border-radius:3px;
					}
					
					.gspark .layout .navi li.title a:hover b,
					.gspark .layout .navi li a:hover b,
					.gspark .layout .navi li a.selected b
					{
						background-color:transparent;
						border:solid 1px transparent;
						box-shadow:none;
						-webkit-box-shadow:none;
						-moz-box-shadow:none;
					}
				
					.gspark .layout .navi li.title a b {
						background-color:#0ae;
						border-color:#0fe #0a9 #0a9 #0a9;
						text-shadow:0px 0px 3px #048;
						box-shadow:0px 0px 2px #000;
						-webkit-box-shadow:0px 0px 2px #000;
						-moz-box-shadow:0px 0px 2px #000;
					}
				
				.gspark .layout .navi li.user {
					position:relative;
					padding:0;
					margin:.2em 0em;

				}
				
					.gspark .layout .navi li.user a {
						padding:0;
						border:solid 1px transparent;
						height:26px;
					}
					
					.gspark .layout .navi li.user.hover a,
					.gspark .layout .navi li.user:hover a {
						background-image:none;
						background-color:#444;
						border:solid 1px #333;
						border-color:#333 #333 #888 #333;
					}
					
						.gspark .layout .navi li.user a img {
							border:solid 1px #000;
							margin-right:.5em;
							float:left;
							width:24px;
							height:24px;
						}
						
						.gspark .layout .navi li.user a span {
							background-image:none;
							padding:0;
						}
						
						.gspark .layout .navi li.user span.arrow { display:none }
					
						.gspark .layout .navi li.user.hover span.arrow,
						.gspark .layout .navi li.user:hover span.arrow {
							padding:0;
							position:absolute;
							top:0px;
							right:0px;
							overflow:hidden;
							display:block;
							width:16px;
							height:26px;
							text-indent:-1000px;
						}
						
						
	
					
					
					
				
				.gspark .layout .navi li.tool a {
					font-size:0.8em;
					color:#aaa;
					padding-bottom:.25em;
					border:none;
				}
				
				
				.gspark .layout .navi li.tool a:hover {
					border:none;
					background-image:none;
					background-color:transparent;
					color:#0ae;
				}
				
				.gspark .layout .navi li.tool.sparkViewall {
					border-top:groove 2px;
				}
/*-----------------------------------------------------------*/
		.gspark .layout .content {
			border-top:solid 2px #ccc;
			border-left:solid 1px #ccc;
			border-right:solid 1px #ccc;
			background-color:#fff;
			margin:0 20%;
			min-height:800px;
			padding-bottom:0.5em;
		}
/*-----------------------------------------------------------*/
		
.gspark .footer {
	border-top:solid 1px #111;
	background-color:#333;
	text-align:center;
	color:#aaa;
	font-size:0.8em;
	padding:1em;
}
	.gspark .footer p {
		margin:0;
		padding:.5em;
	}

	.gspark .footer a {
		margin:0 0.7em;
		text-decoration:none;
		color:#aaa;
	}
/*-----------------------------------------------------------*/
/* GROUPS page												 */
/*-----------------------------------------------------------*/
.gspark .layout .content .pagePart { display:none }

	.gspark .layout .content .groups h1 {
		font-size:1.5em;
		padding-bottom:.5em;
		border-bottom:solid 1px #aaa;
		margin:15px;
	}

	.gspark .layout .content .groups h1 a {
		font-size:.6em;
		float:right;
		text-decoration:none;
	}
	
		.gspark .layout .content .groups h1 a span {
			padding-left:1.5em;
		}
		
		
	
			.gspark .layout .content .group {
				border:solid 1px #aaa;
				width:178px;
				padding:5px 10px 5px 85px;
				position:relative;
				float:left;
				margin:10px 15px 10px 15px;
				background-color:#fff;
				height:100px;
				overflow:hidden;
			}
			
				.gspark .layout .content .group img {
					width:70px;
					height:70px;
					position:absolute;
					top:5px;
					left:5px;
				}
				
				.gspark .layout .content .group h2 {
					padding:0;
					margin:0 0 .5em 0;
					font-size:1em;
				}
				
				.gspark .layout .content .group p {
					height:40px;
					overflow:hidden;
				}
				
				.gspark .layout .content .group .featured {
					text-align:right;
					font-size:.8em;
					color:#fff;
					background-color:#79ceeb;
					padding:2px 8px;
					margin:0 -10px 0 -85px;
				}
				
/*-----------------------------------------------------------*/
/* GROUPS page tabs											 */
/*-----------------------------------------------------------*/

.gspark .ui-widget-content {
	background:transparent none;
	border:none;
	margin:0;
	padding:0;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}

.gspark .ui-widget-content .group a {
	color:#09c;
	
}

.gspark .ui-corner-top {
	border-radius-topleft:3px;
	border-radius-topright:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-topright:3px;
	-webkit-border-radius-topleft:3px;
	-webkit-border-radius-topright:3px;
}

.gspark .ui-tabs {
	padding:0;
	margin:15px;
	
}

.gspark .ui-tabs-nav {
	padding:0;
}

.gspark .layout .content .ui-tabs .group {
	margin:10px 7px 10px 8px;
}

	.gspark .ui-tabs-nav.ui-widget-header {
		background:transparent none;
		border:none;
		color:#000;
		padding-right:1em;
	}
	
	.gspark .ui-tabs .ui-tabs-nav li {
		border:none;
		float:right;
		margin:0 2px;
	}
	
	.gspark .ui-tabs .ui-tabs-nav li a {
		padding:.3em 1em;	
	}

	.gspark .ui-tabs .ui-tabs-nav li.ui-state-default {
		background:#09c none;
	}

	.gspark .ui-tabs .ui-tabs-nav li.ui-state-active {
		background:#d0d0d0 none;
	}
	
	.gspark .ui-tabs .ui-tabs-nav li.ui-state-active a {
		color:#000;
	}

.gspark .ui-tabs-panel {
	background:#fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACAEAQAAAAwYBc8AAAAAmJLR0T//xSrMc0AAAAJcEhZcwAAAEgAAABIAEbJaz4AAAAJdnBBZwAAAAEAAACAAOUN9ucAAAAmSURBVCjPY7hw4f9/JgaGf3/oRfymq210IP4OOx/RJ44YGBgYGAClzv2jqEXiPwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMC0wMS0xM1QxNDo0MzoyOSswMjowMHgZaWIAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTAtMDEtMTNUMTQ6NDM6MjkrMDI6MDAJRNHeAAAAAElFTkSuQmCC') repeat-x;
	color:#000;
}

/*-----------------------------------------------------------*/
/* POPUP window mods										 */
/*-----------------------------------------------------------*/
.gspark.ui-dialog {
	background:#000 none;
}

.gspark .ui-dialog-titlebar {
	background:transparent none;
}

.gspark .ui-dialog-content {
	padding:.5em 1em;
}

.gspark .addspark.ui-dialog-content {
	background:transparent none;
}

.gspark.ui-dialog .addspark div.recipients  {
	border-top:solid 1px #666;
}


/*-----------------------------------------------------------*/
.gspark .layout .content .settings {
	margin:1em;
}	

	.gspark .settings.ui-tabs .ui-tabs-nav li {
		float:left;
		background:transparent none;
		font-size:1.2em;
		margin-right:1em;
		font-weight:bold;
	}

	.gspark .settings.ui-tabs .ui-tabs-nav li a {
		padding:0;
	}

	.gspark .settings.ui-tabs .ui-tabs-nav li.ui-state-default a {
		color:#09c;
	}
	
	.gspark	.settings.ui-tabs .ui-tabs-nav li.ui-state-active a {
		color:#000;
	}
	
	.gspark .settings.ui-tabs .ui-tabs-nav li.back {
		font-size:.8em;
		float:right;
		margin:.4em 0;
	}
	
	.gspark .settings .ui-tabs-panel {
		margin-top: 1em;
		background:transparent none;
		border-top:solid 1px #aaa;
	}
	
		.gspark .settings fieldset {
			display:block;
			padding: 1em;
			border:none;
			border-bottom:solid 1px #aaa;
		}
		
			.gspark .settings fieldset label {
				font-size:.8em;
				text-align:left;
				display:block;
				width:12em;
				float:left;
				padding:0;
			}
			
			.gspark .settings fieldset a {
				color:#09c;
				text-decoration:none;
				font-weight:bold;
				display:block;
				font-size:.9em;
			}
			
			.gspark .settings fieldset input {
				width:18em;
			}
			
			.gspark .settings fieldset input[type=radio] {
				width:auto;
				
			}
			
			.gspark .settings fieldset .picture {
				float:left;
			}
			
			.gspark .settings fieldset img {
				border:solid 1px #aaa;
				padding:4px;
				width:100px;
				height:100px;
				display:block;
				float:left;
				margin-right:1em;
			}
			
			.gspark .settings fieldset small {
				color:#888;
			}
			
			.gspark .settings fieldset p,
			.gspark .settings fieldset table {
				margin-left:10em;
			}
			
			.gspark .settings fieldset table input {
				width:auto;
			}
			
	.gspark .settings button {
		color:#fff;
		background-color:#007aa3;
		padding:.5em 2em;
		border:none;
		margin:2em;
		border-radius:3px;
		-webkit-border-radius:3px;
		-moz-border-radius:3px;
	}

/*-----------------------------------------------------------*/

.gspark	.busy {
	position:absolute;
	background-color:#fff;
	cursor:progress;
}

	.gspark .busy div {
		color:#000;
		font-size:15px;
		margin:6px;
		text-align:center;
	}
	
	.gspark .busy button {
		background-color:#000;
		color:#fff;
		border:solid 1px #888;
		display:inline-block;
		padding:6px 10px;
		font-size:15px;
		font-weight:bold;
		margin-right:6px;
		border-radius:3px;
		-webkit-border-radius:3px;
		-moz-border-radius:3px;
	}
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/

.gspark .addspark {
	border:solid 1px #aaa;
	border-top:none;
	background:#fefefe url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkEAQAAAC9tU6oAAAAAmJLR0T//xSrMc0AAAAJcEhZcwAAAEgAAABIAEbJaz4AAAAJdnBBZwAAAAEAAABkAN8fwA8AAABWSURBVBjTY3jw4P9/JgaGf1lMDAx/sxAshgcPPgvCxJAlUJQ8+I5NgomB4V82fr34JIhQQiVDswebg7BJZDNhBLs8Bza9DA8eCEnBWDzvsEYZAwMDAwCdBZP1JIKprwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMC0wMS0xM1QxNTo1Mjo1NyswMjowMNE5dl0AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTAtMDEtMTNUMTU6NTI6NTcrMDI6MDCgZM7hAAAAAElFTkSuQmCC') repeat-x;
	margin:0 1em 3em 1em;
	padding:1em;
	border-radius:0 0 1em 1em;
	-webkit-border-radius:0 0 1em 1em;
	-moz-border-radius:0 0 1em 1em;
}

.gspark #sharespark.addspark {
	background-color:transparent;
	margin:0;
	padding:0;
	border:none;
}

	.gspark .addspark .activate {
		border:solid 1px #aaa;
		background-color:#fff;
		padding:.2em 1em;
		cursor:pointer;
	}
	
	.gspark .addspark .create {
		background-color:#ccc;
		border:solid 1px #888;
		border-radius:0 0 .7em .7em;
		-webkit-border-radius:0 0 .7em .7em;
		-moz-border-radius:0 0 .7em .7em;
	}
	
	.gspark input.idle,
	.gspark textarea.idle {
		color:#aaa;
	}
	
		.gspark .addspark textarea#description {
			border:none;
			width:530px;
			height:120px;
			padding:1em;
			border-bottom:solid 1px #888;
			font-family:helvetica;
			font-size:1em;
		}
		
		.gspark .addspark div.toolbar,
		.gspark .addspark div.link,
		.gspark .addspark div.recipients {
			border-top:solid 1px #fff;
			padding:1em;
			position:relative;
		}
		
		.gspark .addspark div.toolbar {
			padding:0;
			border-bottom:solid 1px #888;
			
		}
		
			.gspark .addspark div.toolbar .txtBtn {
				float:right;
				text-transform:uppercase;
				border:none;
				background-color:transparent;
				color:#888;
				padding:3px 1em;
			}
			
			.gspark .addspark div.toolbar .txtBtn.private {
				border-right:solid 1px #888;
				border-left:solid 1px #888;
			}
			
			.gspark .addspark div.toolbar .txtBtn.preview {
				border-left:solid 1px #fff;
			}
			
		.gspark .addspark fieldset {
			border:none;
			margin:0;
			padding:0;
		}
		
		.gspark .addspark fieldset.input {
			border:solid 1px #888;
			background-color:#fff;
			padding:.2em 0em .2em .4em;
		}

	
			.gspark .addspark fieldset.input input {
				border:none;
				margin:0;
				padding:0;
			}
			
		.gspark .addspark div.link fieldset.input {
			width:520px;
		}
	
			.gspark .addspark div.link fieldset.input input {
				width:492px;
			}
		
		.gspark .addspark .recipients fieldset.input {
			width:490px;
		}
			
			.gspark .addspark .recipients fieldset.input input {
				width:462px;
			}
			
			.gspark .addspark .recipients fieldset.friends {
				position:absolute;
				right:1em;
				top:1em;
			}
							
			.gspark .addspark button.icon {
				border:none;
				background-color:transparent;
				display:inline-block;
				padding:2px;				
			}
			
				.gspark .sharespark button.icon:hover,
				.gspark .addspark button.icon:hover {
					background-color:#555;
				}
			
				.gspark .sharespark button.icon span,
				.gspark .addspark button.icon span { 
					width:16px;
					height:16px;
					overflow:hidden;
					text-indent:-1000px;
					display:inline-block;
				}
			
			.gspark .sharespark fieldset.input button.icon span,
			.gspark .addspark fieldset.input button.icon span {
				width:12px;
				height:12px;
			}
			
			.gspark .addspark fieldset.submission {
				border-top:solid 1px #888;
			}
			
			.gspark .addspark ul {
				list-style-type:none;
				padding:0;
				margin:.5em 0;
			}
			
				.gspark .addspark ul li {
					border:solid 1px #888;
					display:block;
					color:#fff;
					background-color:#aaa;
					padding:.2em .5em;
					margin:.5em 0;
					position:relative;
				}
				
				.gspark .addspark ul li span {
					padding-left:2em;
				}
				
					.gspark .addspark ul li.user span
					{
						padding:0;
					}
				
					.gspark .addspark ul li b {
						margin-left:1em;
						color:#6cd8fc;
					}
				
					.gspark .addspark ul li a.sparkRemove {
						position:absolute;
						top:.2em;
						right:.5em;
						display:block;
						padding:.2em;
					}
						.gspark .addspark ul li a.sparkRemove span {
							padding:0;
							display:block;
							width:8px;
							height:8px;
							overflow:hidden;
							text-indent:-1000px;
						}


		.gspark .addspark div.submit {
			position:relative;
		}

		.gspark .addspark button.submit {
			border:none;
			padding:0;
			position:absolute;
			color:#0ae;
			background:transparent url(img/sparkArrow.png) no-repeat;
			text-transform:uppercase;
			text-align:center;
			font-size:1.2em;
			width:142px;
			height:41px;
			top:0px;
			left:207px;
		}

	.gspark .addspark .uploader { 
		padding:1em 0;
		display:none;
	}

/*-----------------------------------------------------------*
 * Recipient list in ADD SPARK								 *
 *-----------------------------------------------------------*/

		.gspark .addspark div.recipients ul li {
			width:auto;
			float:left;
			margin:.5em;
			padding-right:4em;
			background-color:#555;
			border-color:#444;
			border-radius:3px;
			-webkit-border-radius:3px;
			-moz-border-radius:3px;
		}
		
			.gspark .addspark div.recipients ul li img {
				float:left;
				margin-right:.5em;
				width:32px;
				height:32px;
			}
		
/*-----------------------------------------------------------*
 * MENU														 *
 *-----------------------------------------------------------*/

		.gspark ul.menu {
			list-style-type:none;
			position:absolute;
			padding:1px;
			background-color:#fff;
			border:solid 1px #888;
			margin:0;
		}
		
			.gspark ul.menu li {
				margin:1px;
				padding:.2em 1em;
				display:block;
				cursor:pointer;
				height:36px;
			}
			
				.gspark ul.menu li a {
					min-height:24px;
				}
				
				.gspark ul.menu li:hover {
					background-color:#b6d9e6;
				}
			
				.gspark ul.menu li img {
					border:solid 3px #fff;
					float:left;
				}
			
				.gspark ul.menu li span {
					display:block;
					padding-left:3em;
				}

/*-----------------------------------------------------------*
 * DROPDOWN													 *
 *-----------------------------------------------------------*/

	.gspark ul.dropdown {
		list-style-type:none;
		position:absolute;
		padding:1px;
		background-color:#555;
		border:solid 1px #444;
		margin:0;
		z-index:500;
	}
	
		.gspark ul.dropdown li a {
			width:160px;
			padding:.5em;
			display:block;
			color:#eee;
			text-decoration:none;
		}

		.gspark ul.dropdown li a:hover {
			background-color:#333;
		}
		
/*-----------------------------------------------------------*/
/* SPARK													 */
/*-----------------------------------------------------------*/

.gspark .empty {
	margin:2em;
	font-size:1.2em;
	text-align:center;
}

.gspark .sparks {
	padding:1em;
	
}

.gspark .spark {
	border-bottom:solid 1px #aaa;
	position:relative;
	padding:1em 5em 1em 1em;	
}

#preview_spark {
	border:solid 1px #aaa;
	box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	-moz-box-shadow:0px 0px 2px #000;
}


.gspark .spark.delete {
	border:solid 3px #faa;
}

	.gspark .spark small {
		color:#888;
	}

	.gspark .spark a.icon {
		display:inline-block;
		margin:0 0 0 .5em;
		float:right;
	}

	.gspark .spark a.icon span {
		overflow:hidden;
		text-indent:-1000px;
		width:16px;
		height:16px;
		display:block;
	}

	.gspark .spark a.btn {
		display:block;
		border:solid 1px #aaa;
		padding:4px;
		position:absolute;
		right:1em;
		border-radius:3px;
		-webkit-border-radius:3px;
		-moz-border-radius:3px;
	}
	
		.gspark .spark a.sparkRemove {
			padding:3px 0px 0px 0px;
		}
	
		.gspark .spark a.btn.sparkFollow {
			top:1em;	
		}
		
			.gspark .spark a.btn.sparkFollow span {}
		
		.gspark .spark a.btn.sparkShare {
			top:3.6em;
		}
		
		.gspark .spark .title {
			position:relative;
			background-color:#bdf;
			padding:3px;
			border-radius:3px;
			-webkit-border-radius:3px;
			-moz-border-radius:3px;
		}
		
			.gspark .spark .title img {
				background-color:#bdf;
				float:left;
				width:48px;
				height:48px;
				padding:0 3px 3px 3px;
				margin-left:-3px;
			}
			
			.gspark .spark div.title a.user {
				margin:0 1em;
				text-decoration:none;
				font-weight:bold;
			}
		
		.gspark .spark div.message {
			margin:0 0 0 4.4em;
			padding:.6em;
			font-size:1.2em;
		}
		
/*-----------------------------------------------------------*/
/* SPARK : COMMENTING										 */
/*-----------------------------------------------------------*/	
		
		
		.gspark .spark div.comments {
			margin:0 0 0 5em;
		}
		
			.gspark .spark div.comments div.title a {
				font-size:.8em;
				font-weight:bold;
				text-decoration:none;
				margin-right:1em;
				float:none;
			}
		
				.gspark .spark div.comments div.title a span {
					text-indent:2em;
					width:auto;
				}
		
			.gspark .spark div.comments ul {
				list-style-type:none;
				margin:0;
				padding:0;
			}
			
				.gspark .spark div.comments ul li {
					margin-top:4px;
					background-color:#fafafa;
					border: solid 1px #ddd;
					position:relative;
					padding:8px;
					border-radius:3px;
					-webkit-border-radius:3px;
					-moz-border-radius:3px;
				}
				
				.gspark .spark div.comments ul li.newComment {
					padding:4px;
					
				}
				
					.gspark .spark div.comments ul li img {
						width:36px;
						height:36px;
						padding: 1px;
						background-color:#fff;
						border:solid 1px #aaa;
						position:absolute;
						left: -50px;
						top:0px;
					}
			
					.gspark .spark div.comments ul li a.user {
						float:none;
						text-decoration:none;
						margin:0 .5em 0 0;
					}
					
					.gspark .spark div.comments .icon.sparkBubble.user span {
						display:block; 
						width:8px;
						height:11px;
						position:absolute;
						left:-7px;
						top:5px;
					}
					
					.gspark .spark div.comments ul li.newComment a {
						color:#ccc;	
					}
					
					.gspark .spark div.comments ul li form {
						text-align:right;
					}
					
					.gspark .spark div.comments ul li textarea {
						width:95%;
						padding:.5em;
						margin:3px 0px;
					}
					
					.gspark .spark div.comments ul li button {
						border:solid 1px #aaa;
						padding:.5em 1em;
						font-weight:bold;
						margin-left:3px;
					}
					
					.gspark .spark div.comments ul li button span {
						display:block;
						padding:0px;
					}
					
					.gspark .spark div.comments ul li button.sparkAdd span  {
						text-indent:-1000px;
						width:12px;
						height:14px;
					}

/*-----------------------------------------------------------*/
/* Friend list and search									 */
/*-----------------------------------------------------------*/

.gspark .friendList {
	background-color:#151515;
}

	.gspark .friendList form {
		padding:1px 3px;
		margin:0 0 6px 0;
		background-color:#fff;
		border:inset 2px;
	}
	
		.gspark .friendList form label {
			margin-right:.5em;
			color:#666;
		}
		
		.gspark .friendList form input {
			background-color:transparent;
			border:none;
		}

	.gspark .friendList ul {
		list-style-type:none;
		margin:0;
		padding:0;
		height:225px;
		overflow:auto;
	}
	
	.gspark .friendList ul li {
		display:block;
		position:relative;
		padding:0;
		margin:.2em 0em;
		height:32px;
	}
	
		.gspark .friendList ul li.odd {
			background-color:#222;
		}
		
		.gspark .friendList ul li:hover {
			background-color:#112;
		}
		
		.gspark .friendList ul li.odd:hover {
			background-color:#223;
		}
	
		.gspark .friendList ul li img {
			margin-right:1em;
			float:left;
			border:none;
			width:24px;
			height:24px;
		}
	
		.gspark .friendList ul li a {
			color:#6cd8fc;
			text-decoration:none;
			display:block;
			font-weight:bold;
		}
		
		.gspark .friendList ul li input {
			position:absolute;
			top:.5em;
			right:.5em;
		}

		.gspark .paging {
			position:relative;
			text-align:center;
			margin:1em auto 1em auto;
		}
		
			.gspark .paging a {
				color:#fff;
				background-color:#aaa;
				padding:.2em .5em;
				margin:.2em;
				display:inline-block;
				font-weight:bold;
				text-decoration:none;
			}
			
			.gspark .paging a.selected {
				background-color:#007aa3;
			}
			
			
/*-----------------------------------------------------------*/
/* USER PROFILE								                 */
/*-----------------------------------------------------------*/		
			
.gspark	.profile {}
			
	.gspark	.profile .info {
		background-color:#444;
		color:#fff;
		margin:1em;
	}
	
		.gspark	.profile .info img {
			margin:1em 0 .25em 1em;
			width:11.8em;
		}
	
		.gspark	.profile .info h2 {
			margin:0 .8em;
			padding:0;
			text-indent:0;
			font-size:1.2em;
		}
		
		.gspark	.profile .info h3,
		.gspark	.profile .info h4 
		{
			margin:0 1em;
			padding:0;
			font-size:1em;
			font-weight:normal;
		}
		
		.gspark	.profile .info h4 {
			margin-bottom:1em;
		}
		
		.gspark	.profile .info a {
			display:block;
			text-decoration:none;
			margin:0;
			text-align:left;
			border:none;
			background-color:#444;
			border-top:solid 1px #666;
			color:#fff;
			padding:.5em 1em;
		}
		
		.gspark	.profile .info a.on:hover,
		.gspark	.profile .info a:hover {
			background-color:#456;
		}
	
		.gspark	.profile .info a.on {
			background-color:#222;
		}
	
	.gspark .profile h1 {
		background-color:#444;
		margin:0;
		padding:.4em 1em;
		font-size:1.1em;
		color:#fff;
	}
	
		.gspark .profile h1 b {
			float:right;
			display:inline-block;
			background-color:#666;
			padding:2px 6px;
			font-size:0.7em;
			border-radius:3px;
			-webkit-border-radius:3px;
			-moz-border-radius:3px;
		}
	
	.gspark .profile .box {
		color:#fff;
		margin:.2em .8em;
	}
		
		.gspark .layout .navi .profile .box li a img {
			width:32px;
			height:32px;
			border:0;
			padding:0;
			margin:0;
		}
		
		.gspark .profile .box ul {
			list-style-type:none;
			margin:0;
			padding:0;
		}
		
		.gspark .profile .box li.user,
		.gspark .profile .box li.group
		{
			display:inline-block;
			padding:0;
			margin:4px;
			border:solid 1px #444;
		}
		.gspark .layout .navi  .profile .box li a:hover,
		.gspark .layout .navi  .profile .box li a {
			background-color:transparent;
			background-image:none;
			width:32px;
			height:32px;
			margin:0;
			padding:0;
			display:block;
		}
		
			.gspark .profile .box a span { display:none }
		
/*-----------------------------------------------------------*/
/* SHARE popup												 */
/*-----------------------------------------------------------*/

.gspark #sharespark .send.gspark {
	color:#fff;
	background-color:#007aa3;
	padding:.5em 2em;
	margin-right:1em;
	margin-bottom:1em;
	border:none;
	float:right;
}

.gspark #sharespark .extras {
	clear:both;
	border-top:solid 1px #666;
	padding:1em;
}

	.gspark #sharespark .extras input {
		color:#ccc;
		background-color:#444;
		border:none;
		padding:.5em 1em;
	}
	
	.gspark #sharespark .extras button {
		margin-left:1em;
	}


/*-----------------------------------------------------------*/
/* Widget Tool                                               */
/*-----------------------------------------------------------*/


#widgetTool h2,
#widgetTool h3 {
	color:#fff;
	margin:1em;
	font-size:1.2em;
}

#widgetTool fieldset {
	border:none;
	margin:1em;
	padding:0;
}

	#widgetTool fieldset label {
		color:#fff;
		display:block;
		clear:both;
	}

#widgetTool input.color {
	width:164px;
	text-align:center;
	padding:.5em;
}

#widgetTool textarea {
	width:160px;
	font-size:.7em;
	padding:1em;
}


/*-----------------------------------------------------------*/
/* ICONS split from sprite									 */
/*-----------------------------------------------------------*/

.gspark .header .search button,
.gspark .icon span {
	background-image:url(img/icons.png);
	background-repeat:no-repeat;
}
.gspark .icon.sparkAdd span{ background-position: 0 0; } 
.gspark .icon.sparkArrowdown span{ background-position: 0 -81px; } 
.gspark .icon.sparkAttachment span{ background-position: 0 -179px; } 
.gspark .icon.sparkBubble span{ background-position: 0 -263px; } 
.gspark .icon.sparkComment span{ background-position: 0 -344px; } 
.gspark .icon.sparkCreategroup span{ background-position: 0 -430px; } 
.gspark .icon.sparkDocument span{ background-position: 0 -509px; } 
.gspark .icon.sparkFollow span{ background-position: 0 -595px; } 
.gspark .icon.sparkFollow:hover span{ background-position: 0 -681px; } 
.gspark .icon.sparkFollowed span{ background-position: 0 -767px; } 
.gspark .icon.sparkFollowed:hover span{ background-position: 0 -853px; }
.gspark .icon.sparkFriends span{ background-position: 0 -939px; } 
.gspark .icon.sparkHelp span{ background-position: 0 -1024px; } 
.gspark .icon.sparkHelpHover span{ background-position: 0 -1114px; } 
.gspark .icon.sparkHighLight.off span{ background-position: 0 -1204px; } 
.gspark .icon.sparkHighLight span{ background-position: 0 -1290px; } 
.gspark .icon.sparkImage span{ background-position: 0 -1376px; } 
.gspark .icon.sparkLanguage span{ background-position: 0 -1461px; } 
.gspark .icon.sparkLanguage:hover span{ background-position: 0 -1551px; } 
.gspark .icon.sparkLogo span{ background-position: 0 -1641px; } 
.gspark .icon.sparkMusic span{ background-position: 0 -1735px; } 
.gspark .icon.sparkNotifications span{ background-position: 0 -1821px; } 
.gspark .icon.sparkNotificationsActive span{ background-position: 0 -1907px; } 
.gspark .icon.sparkOpen span{ background-position: -136px 0; } 
.gspark .icon.sparkOpen:hover span{ background-position: -136px -86px; } 
.gspark .icon.sparkPrivate span{ background-position: -136px -172px; } 
.gspark .icon.sparkPrivateActive span{ background-position: -136px -258px; } 
.gspark .icon.sparkPrivateOff span{ background-position: -136px -344px; } 
.gspark .icon.sparkPrivateOn span{ background-position: -136px -430px; } 
.gspark .icon.sparkRemove span{ background-position: -136px -516px; } 
.gspark .icon.sparkSearch { background-position: -136px -596px; } 
.gspark .icon.sparkSent span{ background-position: -136px -688px; } 
.gspark .icon.sparkSent:hover span{ background-position: -136px -774px; } 
.gspark .icon.sparkShare span{ background-position: -136px -860px; } 
.gspark .icon.sparkShare:hover span{ background-position: -136px -946px; } 
.gspark .icon.sparkStream span{ background-position: -136px -1032px; } 
.gspark .icon.sparkStream:hover span{ background-position: -136px -1118px; } 
.sparkVideo span{ background-position: -136px -1204px; } 
.gspark .icon.sparkViewall span{ background-position: -136px -1289px; }