/**

 * Social comments styles

 * @package social-comments

 * ================================================ */

/** @section Basics

 * Covers resets and typography

 * a #social id is used to namespace our styles and create enough

 * specificity to make sure they take work.

 *

 * Always use a social- prefix on classes and IDs to prevent naming conflicts

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

/* Override default theme line-height */

#social {

	background: #fff;

	line-height: 1.5;

	margin: 40px 0;

}

/**

 * Browser/theme style reset

 * This gives us a reliable foundation for our styles, regardless of theme

 * but scoped to our comments.

 *

 * Based on work by Eric Meyer

 * @see http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

 */

#social * {

	margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	font: inherit;

	vertical-align: baseline;

}

#social a {

	text-decoration: none;

	outline: 0;

}

#social a:hover {

	text-decoration: underline;

}

/** @section Utility

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

/**

 * Updated super safe clearfix

 * Taken from CSS section of HTML5 Boilerplate http://html5boilerplate.com/. Thanks guys!

 */

#social .social-clearfix:before,

#social .social-clearfix:after {

	content: "\0020";

	display: block;

	height: 0;

	visibility: hidden;

}

#social .social-clearfix:after {

	clear: both;

}

#social .social-clearfix {

	zoom: 1;

}

#social .social-imr {

	font-size: 0;

	line-height: 0;

	overflow: hidden;

	text-indent: -32000px;

}

/**

 * Subtext, help text, etc

 */

#social .social-help,

#social .social-psst {

	color: #999;

	font-family: Helvetica, Arial, sans-serif;

	font-size: 12px;

}

#social .social-help {

	font-style: italic;

}

/** @section Sign-in and forms

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

#social #commentform {

	overflow: hidden;

}

/* Threaded respond form */

#social .social-commentlist #respond {

	margin: 6px 0;

	padding: 0 0 0 7px;

}

#social .social-commentlist #reply-title {

	background-position: 0 -400px;

}

#social .social-commentlist #commentform {

	border-left: 1px solid #e1e1e1;

	padding-left: 10px;

}

/* Specificity of selector is dialed to

override TwentyEleven's treatment of text inputs in

the respond form */

#social input.social-input,

#social textarea.social-input,

#social .social-select {

	background: #f8f8f8;

	border: 1px solid #ccc;

	-moz-border-radius: 3px; /* FF1+ */

	-webkit-border-radius: 3px; /* Saf3+, Chrome */

	-khtml-border-radius: 3px; /* Konqueror */

	border-radius: 3px; /* Standard. IE9 */

	/**

	 * @bugfix border-radius background bleed

	 * @see http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed

	 */

	-webkit-background-clip: padding-box;

	-moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1); /* FF3.5+ */

	-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1); /* Saf3+, Chrome */

	box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1); /* Standard. Opera 10.5, IE9 */

	font-family: Helvetica, Arial, sans-serif;

	font-size: 14px;

	padding: 2px 4px;

	text-indent: 0;

}

/**

 * Line-height fix

 */

#social input.social-input,

#social .social-select {

	height: 22px;

	padding-bottom: 1px;

	padding-top: 3px;

}

#social .social-select {

	margin-top: 2px;

}

#social .social-select optgroup {

	padding: 2px;

	font-weight: bold;

}

#social .social-select option {

	font-weight: normal;

}

#social .social-post {

	font-family: Helvetica, Arial, sans-serif;

}

/* Input row styles */

#social .social-input-row,

#social .form-submit {

	clear: left;

	margin: 0 0 10px;

	overflow: hidden;

	padding-left: 80px;

	position: relative;

	zoom: 1;

}

/* Override TwentyEleven

Remove float from para wrapping submit button. */

#social .form-submit {

	float: none;

}

#social .form-submit,

#social .social-input-row-submit {

	height: 30px;

	margin-bottom: 0;

}

#social .social-input-row .social-label {

	color: #333;

	cursor: pointer;

	font-size: 14px;

	display: block;

	left: 7px;

	position: absolute;

	top: 4px;

	width: 70px;

}

#social #submit,

#social .social-input-row .social-input {

	/* Bypasses vertical alignment issues.

	only effects social-input-row inputs */

	float: left;

	/* Specifically here to counteract issues with margins in TwentyTen,

	but good to have either way */

	margin: 0;

}

#social .social-input-row .social-help {

	float: left;

	line-height: 28px;

	margin-left: 7px;

}

#social #respond {

	/* Override TwentyEleven theme

	Remove grey background */

	background: transparent;

	margin-bottom: 30px;

	width: auto;

}

#social #respond input.social-input {

	width: 314px;

}

#social #respond textarea.social-input {

	height: 83px;

	max-width: 464px;

}

/* Specificity of this selector is dialed in to

override submit styles in TwentyEleven theme */

#social input#submit {

	background: #e9e9e9 url(sprite-y-24.png) 0 0 no-repeat;

	border: 1px solid #ccc;

	-moz-border-radius: 4px; /* FF1+ */

	-webkit-border-radius: 4px; /* Saf3+, Chrome */

	-khtml-border-radius: 4px; /* Konqueror */

	border-radius: 4px; /* Standard. IE9 */

	/* Workaround for TwentyEleven theme

	Remove box shadow */

	-moz-box-shadow: none; /* FF3.5+ */

	-webkit-box-shadow: none; /* Saf3+, Chrome */

	box-shadow: none; /* Standard. Opera 10.5, IE9 */

	color: #0867ab;

	cursor: pointer;

	font: bold 14px/13px Helvetica, Arial, sans-serif;

	height: 24px;

	margin: 0;

	/**

	 * @bugfix input width issue

	 * @affected IE7

	 * IE7 likes to make buttons with CSS applied WIDE, unless you apply overflow:visible

	 */

	overflow: visible;

	padding: 4px 13px;

	/* Override TwentyEleven theme styles

	Remove left offset */

	position: static;

	text-shadow: #fff 0 1px 0;

}

/* Specificity of this selector is dialed in to

override submit styles in TwentyEleven theme */

#social input#submit:active {

	background: #dedede url(sprite-y-24.png) 0 -100px no-repeat;

	color: #0867ab;

}

/**

 * @bugfix invisible hidden element

 * FF adds an invisible pseudo element to inputs. Reset it here.

 * @affected Firefox

 * @valid no

 */

#social #submit::-moz-focus-inner {

	border: 0;

	margin: 0;

	padding: 0;

}

#social .social-twitter-icon,

#social .social-facebook-icon,

#social .social-facebook-like-icon {

	background: url(sprite-y-24-icons.png) 0 -99px no-repeat;

	display: block;

	padding-left: 21px;

	/**

	 * @bugfix hasLayout fix

	 * @affected	IE6

	 * Keeps background from showing up twice.

	 */

	zoom: 1;

}

#social .social-facebook-icon,

#social .social-facebook-like-icon {

	background-position: 0 -199px;

}

#social .social-sign-in-links {

	margin: 0 auto 9px;

	width: 360px;

}

#social .social-sign-in-links a {

	display: inline;

	float: left;

	height: 22px;

	margin: 0 15px;

	width: 150px;

}

#social .social-sign-in-links .social-twitter {

	background: url('social.png') 0 0 no-repeat;

}

#social .social-sign-in-links .social-twitter:hover {

	background-position: 0 -22px;

}

#social .social-sign-in-links .social-twitter:active {

	background-position: 0 -44px;

}

#social .social-sign-in-links .social-facebook {

	background: url('social.png') -150px 0 no-repeat;

}

#social .social-sign-in-links .social-facebook:hover {

	background-position: -150px -22px;

}

#social .social-sign-in-links .social-facebook:active {

	background-position: -150px -44px;

}

/* Logged in form */

.logged-in #social .social-input-row-comment .social-label {

	/* Hide visually, but remain readable by screen readers */

	left: -999em;

	position: absolute;

}

.logged-in #social #respond .form-submit,

.logged-in #social .social-input-row {

	/* Override TwentyEleven theme

	remove float:right */

	float: none;

	padding-left: 50px;

}

/** @section Tabs

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

/**

 * Work around Javascript FOUC accessibly

 * Prevent flash before tabs init...

 * Relies on snippet in master.js

 */

.social-js .social-tabs-panel {

	display: none;

}

.social-js .social-tabs-first-panel {

	display: block;

}

#social .social-heading {

	background: url('background-strikethrough.gif') 0 13px repeat-x;

	font-family: Helvetica, Arial, sans-serif;

	margin-bottom: 10px;

}

#social .social-title {

	margin: 0 0 0 9px;

	zoom: 1;

}

#social .social-title span {

	display: block;

}

#social .social-divider {

	background: url('background-strikethrough.gif') center repeat-x;

	clear: both;

	font: italic 13px/1.5 Helvetica, Arial, sans-serif;

	margin: 0 7px 10px;

	text-align: center;

}

#social .social-divider span {

	background-color: #fff;

	padding: 0 10px;

}

#social .must-log-in {

	text-align: center;

}