/* CSS Reset - Copyright (c) 2011, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 2.9.0	*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}
/* CSS Tricks  - some handy css fixes */
.hide {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}
.clearfix:after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
* html .clearfix { zoom:1; } /* IE6 */
*:first-child+html .clearfix { zoom:1; } /* IE7 */

html,
body {
	background: #fff;
}
body {
	font-family: 'Source Sans Pro', sans-serif;
	color:#333;
	font-size:100%;
}

a {color:#25769c; text-decoration:underline;}
a:hover {color:#114862; text-decoration:none;}
	#container {
		width:829px;
		margin:0 auto;
		position:relative;
		padding:60px 15px;
	}
		#header h1 {
			background:url(../png/title-3.png) no-repeat 0 0;
			width:597px;
			height:33px;
			margin:0 auto 20px;
		}
		#header p {
			text-align:center;
			margin:40px 0;
		}
		.bookend {
			text-align:center;
			font-size:24px;
			/*
			font-weight:700;
			*/
		}
		#outer {
			display:block;
		}
			.groupContainer {
				clear:both;
				background-image:url(../png/linesprite.png);
				background-repeat:no-repeat;
				background-position:0 -477px;
				padding:40px 0 0;
			}
				.groupContainer h4 {
					display:inline;
					color:#5e8dae;
					padding:0 8px;
					background:#fff;
					margin-left:68px;
					height:27px;
					line-height:25px;
					font-size:19px;
					text-transform:uppercase;
					letter-spacing:0.04em;
				}
				.group {
					clear:both;
					padding-left:5px;
				}
					.item {
						float:left;
						width:250px;
						width:178px;
						margin-left:72px;
						height:224px;
						position:relative;
					}
					.rowTwo {
						top:3px;
						height:214px;
					}
						.query {
							position:absolute;
							top:8px;
							right:0px;
							color:#fff;
							font-size:16px;
							background:#5e8dae;
							-webkit-box-shadow:inset 0 0 40px rgba(0,0,0,0.2);
							-moz-box-shadow:inset 0 0 40px rgba(0,0,0,0.2);
							box-shadow:inset 0 0 40px rgba(0,0,0,0.2);
							-webkit-border-radius: 10px;
							-moz-border-radius: 10px;
							border-radius:10px;
							border:1px solid #326988;
							text-align:center;
							display:table-row;
							behavior: url(../pie-2.html);
						}
						/*.item:hover .query  {
							box-shadow:inset 0 0 40px rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.4);
						}*/
							.query h5 {
								display:table-cell;
								vertical-align:middle;
								width:162px;
								height:127px;
								padding:0 7px;
								font-weight:600;
							}
							.ie7 .query h5 {
								padding-top:45px;
								vertical-align:top;
								margin-bottom:-45px;
							}
							.query.active h5 {
								padding-top:6px;
								vertical-align:top;
								line-height:1.15em;
							}
						.proceed {
							position:absolute;
							top:67px;
							right:-52px;
							color:#333;
							text-transform:uppercase;
							background:#fff;
							padding:0 6px;
							font-weight:bold;
							font-size:14px;
							line-height:15px;
						}
						.rowTwo .proceed {
							top:65px;
						}
						a.button {
							position:absolute;
							right:0px;
							top:158px;
							display: inline-block;
							*display: inline;
							*zoom: 1;
							margin-bottom: 0;
							padding: 4px 0;
							font-size: 16px;
							line-height: 20px;
							*line-height: 22px;
							width:176px;
							color: #777;
							text-align: center;
							text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
							vertical-align: middle;
							cursor: pointer;
							background-color: #f5f5f5;
							background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
							background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
							background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
							background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
							background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
							background-image: linear-gradient(top, #ffffff, #e6e6e6);
							background-repeat: repeat-x;
							filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
							border: 1px solid #e6e6e6;
							border-color: #e6e6e6 #e6e6e6 #bfbfbf;
							border-color: rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.15);
							*background-color: #e6e6e6;
							filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
							-webkit-border-radius: 10px;
							-moz-border-radius: 10px;
							border-radius: 10px;
							*margin-left: .3em;
							-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
							-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
							box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
							text-transform:uppercase;
							text-decoration:none;
							font-weight:bold;
							behavior: url(../pie-2.html);
						}
						.no-cssgradients .button {
							background-image:url(../buttongradient-2.html);
							background-repeat:repeat-x;
							background-position:0 0;
						}
						.button:hover,
						.button:active {
							background-color: #e6e6e6;
							*background-color: #d9d9d9;
						}
						.button:active {
							background-color: #cccccc \9;
						}
						.button:hover {
							color: #444;
							text-decoration: none;
							background-color: #e6e6e6;
							*background-color: #d9d9d9;
							background-position: 0 -15px;
							-webkit-transition: background-position 0.1s linear;
							-moz-transition: background-position 0.1s linear;
							-ms-transition: background-position 0.1s linear;
							-o-transition: background-position 0.1s linear;
							transition: background-position 0.1s linear;
						}
						.button:focus {
							outline:none;
						}
						.button:active {
							background-color: #e6e6e6;
							background-color: #d9d9d9 \9;
							background-image: none;
							outline: 0;
							-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
							-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
							box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
						}
						.item:hover .button  {
							box-shadow:0 1px 4px rgba(0,0,0,0.2);
						}
						.response {
							display:none;
							text-align:center;
							position:absolute;
							right:0;
							top:58px;
							width:176px;
							height:129px;
							background:#fff;
							border: 1px solid #e6e6e6;
							border-color: #e6e6e6 #e6e6e6 #bfbfbf;
							border-color: rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.15);
							-webkit-border-radius: 10px;
							-moz-border-radius: 10px;
							border-radius: 10px;
							*margin-left: .3em;
							-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
							-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
							box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
							behavior: url(../pie-2.html);
						}
							.closeResponse {
								display:block;
								position:absolute;
								top:2px;
								right:2px;
								width:11px;
								height:11px;
								background:url(../closegrey.html) no-repeat 4px 4px;
								padding:4px;
								border-radius:20px;
							}
							.closeResponse:hover {
								background-color:#fff;
								-moz-box-shadow:0 0 1px #333;
								-webkit-box-shadow:0 0 1px #333;
								box-shadow:0 0 1px #333;
							}
							.response h6 {
								min-height:40px;
								padding:25px 5px 10px;
								text-shadow:0 1px 0 #fff;
								line-height:1.2em;
							}
							.resource {
								padding:0 5px 10px 36px;
								background:url(../icons.html) no-repeat 5px -239px;
								display:block;
								text-align:left;
								font-size:13px;
								min-height:20px;
							}
							.screencast {background-position:5px -239px;}
							.guide {background-position:5px -104px;}
							.plugin {background-position:5px 0;}
			#setup {
				background-position:0 0;
				padding:42px 0 0;
			}
					#setup .rowTwo {
						top:14px;
					}
						#setup .query {
							top:19px;
						}
						#setup .response {
							top:69px;
						}
							#setup0 .response h6 { padding:12px 30px 5px; }
							#setup4 .response h6 { padding-bottom:0; }
							#design8 .response h6 { padding:16px 20px 10px; }
						#setup .proceed {
							top:78px;
						}
						#setup a.button {
							top:170px;
						}
	#behind {
		padding-bottom:70px;
	}
	#f {
		text-align:center;
		padding:15px 0;
	}
	#further {
		padding:140px 0 60px;
		background:url(../png/linesprite.png) no-repeat 0 -1077px;
	}
		#further .item {
			height:130px;
		}
			#further .button {
				padding:40px 15px;
				width:146px;
				top:0;
				height:40px;
				text-transform:none;
			}
			#further .response {
				height:auto;
				top:0;
				padding:25px 0 15px;
				height:80px;
			}
				#further1 .resource,
				#further3 .resource {
					margin-top:20px;
				}
	#sbLink {
		display:block;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		-o-border-radius:5px;
		border-radius:5px;
		-moz-outline-radius:5px;
		outline-radius:5px;
		width:385px;
		height:46px;
		margin:0 auto;
		padding:6px;
		border:none solid steelblue;
		background:url(../png/sblogo-5.png) no-repeat 6px 6px;
	}
	#sbLink:hover {
		margin:-1px auto;
		border:1px solid steelblue;
	}
	#horizontalShare {
		text-align:center;
		margin:0 0 50px;
	}
		.socialBtn {
			display:inline-block;
			position:relative;
		}
		#facebook {
			top:-3px;
		}
		#twitter, #linkedin, #pinterest {
			top:2px;
		}
		#stumbleupon {
			top:1px;
		}
		#facebook,
		#linkedin {
			padding:0 20px;
		}
		#horizontalShare .socialLink {
			display:inline-block;
			position:relative;
			font-size:12px;
			text-align:center;
			padding:1px 6px;
			background:#eee;
			border:1px solid #ddd;
			color:#333;
			text-decoration:none;
			-moz-border-radius:3px;
			-webkit-border-radius:3px;
			-o-border-radius:3px;
			border-radius:3px;
			margin:0 20px 0 5px;
			top:-4px;
		}
		#horizontalShare .socialLink:hover {
			background:#ddd;
			border:1px solid #ccc;
			color:#000;
		}

	#overlay {
		width:100%;
		height:100%;
		position:fixed;
		background:rgba(0,0,0,0.7);
		z-index:999998;
		top:0;
		left:0;
		display:none;
		cursor:pointer;
	}
	#screencastWindow {
		width:853px;
		min-height:480px;
		position:fixed;
		background:#fff;
		top:70px;
		left:50%;
		margin-left:-447px;
		padding:16px 20px;
		-moz-border-radius:4px;
		border-radius:4px;
		box-shadow:0 1px 4px rgba(0,0,0,0.5);
		border:1px solid rgba(0,0,0,0.3);
		z-index:999999;
		display:none;
	}
		#closeOverlay {
			overflow:hidden;
			cursor:pointer;
			position:absolute;
			display:block;
			width:16px;
			height:16px;
			padding:3px;
			border-radius:20px;
			-moz-outline-radius:20px;
			-webkit-outline-radius:20px;
			background:url(../png/close-6.png) no-repeat 3px 3px;
			top:-13px;
			right:-13px;
			background-color:#fff;
			border:1px solid rgba(0,0,0,0.3);
		}
		#closeOverlay:hover {
			border:1px solid rgba(0,0,0,0.5);
			box-shadow:0 1px 3px rgba(0,0,0,0.3);
		}
		#video iframe {
			display:block;
		}
		#video p {
			padding:15px 0 5px;
		}
	#socialFloater {
		position:fixed;
		top:20px;
		right:15px;
		width:50px;
		padding:8px;
		background:none;
		background:rgba(255,255,255,0.3);
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
		-o-border-radius:4px;
		border-radius:4px;
	}
	@media only all and (max-width: 1140px) {
		#socialFloater {
			display:none;
		}
	}
		#socialFloater .fb-like {
			margin-left:2px;
			padding-bottom:10px;
		}
		#socialFloater .twitter-share-button {
			margin-left:-3px;
			padding-bottom:7px;
		}
		#stumbleVert {
			display:block;
			padding:7px 0 0;
			margin-left:-5px;
		}
		#pinterestVert {
			display:block;
			padding:7px 3px;
		}
		#socialFloater .embedLink,
		#return {
			font-size:12px;
			display:block;
			text-align:center;
			padding:1px 6px;
			background:#eee;
			border:1px solid #ddd;
			color:#333;
			text-decoration:none;
			-moz-border-radius:3px;
			-webkit-border-radius:3px;
			-o-border-radius:3px;
			border-radius:3px;
			margin:15px 0 0 -2px;
			position:relative;
			top:-6px;
		}
		#socialFloater .embedLink:hover,
		#return:hover {
			background:#ddd;
			border:1px solid #ccc;
			color:#000;
		}
	#embed {
		width:600px;
		height:190px;
		left:50%;
		margin-left:-300px;
		bottom:-200px;
		background:#f8f8f8;
		-moz-box-shadow:0 0 10px rgba(0,0,0,0.2);
		-webkit-box-shadow:0 0 10px rgba(0,0,0,0.2);
		box-shadow:0 0 10px rgba(0,0,0,0.2);
		border-top:5px solid #555;
		position:fixed;
		text-align:center;
	}
		#embed h5 {
			font-weight:bold;
			font-size:22px;
			margin:15px 0;
			color:#333;
		}
		#close {
			cursor:pointer;
			position:absolute;
			top:8px;
			right:8px;
			display:block;
			width:16px;
			height:16px;
			padding:3px;
			border-radius:20px;
			background:url(../png/close-6.png) no-repeat 3px 3px;
		}
		#close:hover {
			background-color:#fff;
			-moz-box-shadow:0 0 1px #000;
			-webkit-box-shadow:0 0 1px #000;
			box-shadow:0 0 1px #000;
		}
		#embed textarea {
			border:1px #999 solid;
			color:#111;
			font-size:11px;
			font-family:monospace;
			-moz-border-radius:3px;
			-webkit-border-radius:3px;
			border-radius:3px;
			padding:5px;
			width:450px;
			height:90px;
		}

#signature {
	text-align: center;
}