/*
* Stylesheet for the Facebook Open Graph Actions plugin
*/


/* 
	=== General styles ===
	
	Your theme might contain this already, but added for safe measure.
 */

.clear {
	clear:both;
}


/* 
	=== Sidebar === 
	
	Shows the application sidebar. Three main elements:
		1. #fbLogin - shows a login button and message for people to sign up for your application
		2. #fbPublish - an option that allows users to toggle on/off publishing their reads to Facebook
		3. #fbRead - where all recent articles that have been read are shown, and can be removed.
*/

#fbLogin {
	display:none;
	text-align:center;
	margin-top:20px;
	margin-bottom:10px;
}
#fbLogin .loginPromo {
	color:#c10b0b;
	font-weight:bold;
	margin-bottom:15px;
	font-size:14px
}
#fbLogin img {
	cursor:pointer;
}
#fbPublish {
	margin-left:11px;
	margin-top:20px;
	margin-bottom:5px;
	min-height:85px;
}
#fbPublish img {
	float:left;
	margin-right:10px;
}
#fbPublish .name {
	font-weight:bold;
	margin-bottom:4px;
	font-size:14px;
}
#fbPublish a {
	color:#3B5998;
	font-weight:bold;
	cursor:pointer;
}
#fbPublish a:hover {
	text-decoration:underline;
}
#fbPublish a.fbPublishing {
	margin-right:10px;
}
#fbPublish .meta {
	color:#777;
	font-size:12px;
}
#fbPublish .fbToggle {
	margin-top:15px;
}	
#fbPublish .fbToggle a {
	display:inline;
}
#fbPublish .fbToggle a span.icon {
	background:url(images/icons.png) no-repeat;
	width:16px;
	height:16px;
	display:block;
	float:left;
	margin-right:7px;
}
#fbPublish #fbToggleOff a.fbPublishing span.icon {
	background-position:-16px 0;
}
#fbRead {
	border-top:1px solid #ddd;
	padding:5px 0 0 0;
	margin:5px 0 0 0;
	text-align:center;
}
#fbRead img.loading {
	display:none;
	margin:10px 0;
}
#fbRead .meta {
	color:#777;
	font-size:11px;
	margin-bottom:10px;
}
#fbRead ul {
	text-align:left;
	padding:0px;
	margin:0px;
	list-style-type:none;
}
#fbRead ul li {
	padding:7px 0;
	border-bottom:1px solid #eee;
}
#fbRead ul li a.fbReadItem {
	font-weight:bold;
	display:block;
	width:255px;
}
#fbRead ul li a.fbDelete {
	float:right;
	display:block;
	cursor:pointer;
	opacity:0.4;
	margin-top:3px;
	width:16px;
	height:16px;
	background:url(images/icons.png) no-repeat;
	background-position:-32px 0;
}
#fbRead ul li a.fbDelete:hover {
	opacity:0.8;
}


/* 
	=== Single page === 
	
	Which of your friends have read an article. 
	An html div is hidden, and then shown once the Facebook API has confirmed that we're logged in.
	This corresponds to the php function: <?php fb_og_put_read_friends(); ?>
*/ 


.fb-og-reads {
	display:none;
	margin-bottom:20px;
	font-size:13px;
}
.fb-og-reads-show {
	display:block;
}
.fb-og-reads  .fb-og-read-names  {
	margin:0px 0 3px 0;
	padding:0px;
	font-size:12px;
}
.fb-og-reads .fb-og-read-thumbs a {
	line-height:1 !important;
	font-size:11px !important;
}
.fb-og-reads a {
	position:relative;
	cursor:pointer;
	display:inline-block;
	margin:0px;
	font-weight:bold;
}
.fb-og-reads a img {
	margin:3px 4px 0 0;
	border:none;
}
.fb-og-reads a span.tooltip {
	background:url(images/tooltip_n.png) no-repeat 7px 0;
	display:none;
	position:absolute;
	color:#fff;
	font-size:11px;
	z-index:1;
	padding-top:5px;
	font-weight:normal;
	line-height:140% !important;
}
.fb-og-reads a span.tooltip_others {
	margin-top:-2px;
}
.fb-og-reads a span.tooltip span {
	background:#282828;
	padding:2px 6px;
	font-size:11px !important;

}
.fb-og-reads a:hover span {
	display:block;
}
.fb-og-reads img.loading {
	margin-left:200px;
}


/* 
	=== Admin === 
	
	Used for the design of the admin section. You can edit this if you'd like, but there's no need as it is not public-facing.
*/

#fb-og-wrap h2 {
	margin-bottom:15px;
}
#fb-og-left {
	width:77%;
	float:left;
}
#fb-og-right {
	width:21%;
	float:right;
}
.fb-og-notice {
	background-color: #FFEBE8;
	border: 1px solid #C00c00;
	padding:5px 10px;
}
.fb-og-admin-box {
	border:1px solid #ccc;
	margin-top:20px;
	margin-bottom:30px;
	-webkit-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border-radius: 3px;
}
.fb-og-admin-box h3 {
	font-size: 15px;
	font-weight: normal;
	font-family:georgia;
	padding: 7px 10px;
	margin: 0;
	line-height: 1;
	background-color: #F1F1F1;
	background-image: -ms-linear-gradient(top,#F9F9F9,#ECECEC);
	background-image: -moz-linear-gradient(top,#F9F9F9,#ECECEC);
	background-image: -o-linear-gradient(top,#F9F9F9,#ECECEC);
	background-image: -webkit-gradient(linear,left top,left bottom,from(#F9F9F9),to(#ECECEC));
	background-image: -webkit-linear-gradient(top,#F9F9F9,#ECECEC);
	background-image: linear-gradient(top,#F9F9F9,#ECECEC);
}
.fb-og-admin-box .fb-og-inner {
	padding:10px;
}
.fb-og-admin-box .fb-og-inner ul, .fb-og-admin-box .fb-og-inner  ol {
	padding-left:15px;
	margin-left: 2em;
}
.fb-og-admin-box .fb-og-inner ul {
	list-style-type:disc;
}
.fb-og-admin-box input[type=text] {
	width:240px;
}
.fb-og-admin-box .fb-og-inner code.block {
	display:block !important;
}
.fb-og-admin-box .fb-og-screenshots {
	margin:20px 0 40px 0;
}
.fb-og-admin-box .fb-og-screenshots a img {
	padding:2px;
	border:1px solid #ccc;
	margin-right:5px;
	margin-bottom:5px;
}
.fb-og-admin-box .fb-og-screenshots a img:hover {
	border:1px solid #999;
}
.fb-og-admin-box .fb-og-inner .fb-og-faq {	
	margin-bottom:15px;	
	padding-bottom:15px;	
	border-bottom:1px solid #eee;
}
.fb-og-admin-box .fb-og-inner  a.fb-og-button {
	background:url(images/probuttongrad.png) repeat-x;
	display:block;
	padding:10px 15px;
	border:1px solid #f5702f;
	text-decoration:none;
	color:#fff;
	text-align:center;
	font-size:18px;
	width:120px;
	margin:20px auto 15px auto;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.fb-og-admin-box .fb-og-inner  a.fb-og-button:hover {
	-moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px#888;
	box-shadow: 0 0 5px #888;
}
.fb-og-admin-box .fb-og-inner .pds-box {
	width:auto !important;
}
.fb-og-admin-box .fb-og-inner  .pds-input-label {
	width:auto !important;
	float:none !important;
}