Facebook Styles
From Facebook Developer Wiki
This page contains styles that are used by Facebook that can't be created using standard FBML alone.
Contents |
[edit] Introduction to Facebook Styles
[edit] Text Styles
Facebook uses the following fonts for standard text on the page.
p {
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:11px;
color: #0F17FF; /* don't use just black, it won't look good */
}
It would be good idea to use gray font for some extra info: date published, author. Here is the example of the header that may be used in an article.
<style type="text/css">
.some_div h3
{
border-bottom:1px solid #CCCCCC;
font-size:13px;
font-weight:bold;
color: #999999;
padding-top: 15px;
display:block;
margin:0;
}
.some_div .upd_on
{
color: gray;
margin: 0 0 0px 5px;
font-size:10px;
font-weight:normal;
padding:0;
text-align: right;
}
</style>
<div class="some_div">
<h3>Downloads</h3>
<p class="upd_on">Updated on 1 June, 2008</p>
</div>
Don't use an italic font (it is hard to recognize), colorful or too big letters on your pages.
[edit] Blockquotes
Use this element to mark out some text, quotes or opinions of other people:
<style type="text/css">
blockquote {
background:transparent url(http://www.facebook.com/images/start_quote_small.gif) no-repeat scroll -1px 0;
color:#0F17FF;
line-height:14px;
margin:14px 0;
padding:0 0 0 16px;
}
blockquote span {
background:transparent url(http://www.facebook.com/images/end_quote_small.gif) no-repeat scroll right bottom;
padding:0 15px 0 0;
}
</style>
<blockquote>
<span>With MyGreatApp you can share anything on the internet by posting it to your profile!
You can post anything, as well as content, like something. Great!</span>
</blockquote>
[edit] Formatting Tables
[edit] Cell Separation
Table may be used to separate items of some kind: text, images, form items. Use this code to do so:
<style type="text/css">
.some_div table {
margin-left:20px;
margin-top:17px;
width:370px;
text-align:center;
}
.some_div th.name_heading {
color:#333333;
font-size:11px;
font-weight:bold;
}
.some_div table th {
border-color:#C7CFE0;
border-bottom:1px solid #E2E6EF;
margin:0;
padding:3px;
color:#777777;
font-size:9px;
}
.some_div td {
border-bottom:1px solid #E2E6EF;
margin:0;
padding:3px;
color:#555555;
font-size:11px;
}
.some_div table .even_colomn {
background:#F8F8F8 none repeat scroll 0 0;
}
.some_div td.action_text {
width:230px;
}
</style>
<div class="some_div">
<table cellspacing="0"><tbody>
<tr>
<th class="name_heading even_colomn"><strong>Table</strong></th>
<th nowrap="nowrap">haha</th>
<th nowrap="nowrap">lala</th>
</tr>
<tr>
<td class="action_text even_colomn">Cell1</td>
<td>Some text</td>
<td>More text</td>
</tr>
<tr>
<td class="action_text even_colomn">Cell2</td>
<td>Some text</td>
<td>More text</td>
</tr>
<tr>
<td class="action_text even_colomn">Cell3</td>
<td>Some text</td>
<td>More text</td>
</tr>
</tbody></table>
</div>
[edit] Row Colors
Rows can be separated not only with borders, but by alternating the fill color for each row.
<style type="text/css">
.forum table { width:200px; }
.forum table tr { background-color:#FFFFFF; }
.forum table tr.odd { background-color:#F0F0FF; }
.forum table td { padding:3px 3px 3px 9px; }
.forum table .subheader { color:gray; font-size:9px; }
.forum table h4 { font-weight:bold;margin:0;font-size:11px; }
</style>
<div class="forum">
<table cellspacing="0">
<tr class="odd">
<td> <h4>Forum @ Topic</h4> <div class="subheader">by me - 1 June 2008</div> </td>
</tr> <tr>
<td> <h4>Forum @ Topic</h4> <div class="subheader">by me - 1 June 2008</div> </td>
</tr> <tr class="odd">
<td> <h4>Forum @ Topic</h4> <div class="subheader">by me - 1 June 2008</div> </td>
</tr> <tr>
<td> <h4>Forum @ Topic</h4> <div class="subheader">by me - 1 June 2008</div> </td>
</tr>
</table>
</div>
[edit] Organizing Your Page
[edit] Boxes
Most Facebook pages are divided into content boxes. The easiest way to do this is to divide your page using tables.
<style type="text/css">
table td { width:100px;height:100px;padding:10px;text-size:11px; }
/* Facebook Box Header */
td h2
{
background-color:#D8DFEA;
border-top:1px solid #3B5998;
color:#3B5998;
font-size:11px;
padding:1px 6px;
margin:0;
font-weight:bold;
}
/* Subheader, e.g. "Displaing 10 of 100 items" */
.subtitle {
background-color:#EEEEEE;
border-bottom:1px solid #CCCCCC;
color:#000000;
font-size:11px;
font-weight:normal;
padding:3px 5px 2px;
}
</style>
<table cellspacing="0">
<tr>
<td> <h2>cell1</h2> Hello, world </td>
<td> <h2>cell2</h2> Something </td>
</tr>
<tr>
<td> <h2>cell3</h2> foo<br>bar </td>
<td> <h2>cell4</h2> <div class="subtitle">cell with subtitle</div> and text </td>
</tr>
</table>
As you'll see neighboring boxes (on the right and on the left), regardless of their content are the same height, so it is better to use <div> elements for separation.
<style type="text/css">
div.wide
{
float:left;
margin:0;
padding:0 0 0 20px;
width:396px;
}
div.narrow
{
float:right;
margin:0;
padding:0 0 0 20px;
width:200px;
}
</style>
<div class="wide">
<h2>cell big</h2>
<div class="subtitle">cell with many many items</div>
long<br>long<br>long<br>text<br>lala
</div>
<div class="narrow">
<h2>cell narrow 1</h2>
123
<h2>cell narrow 2</h2>
345
</div>
Note: Use clear:both property for header and footer divs.
[edit] Sidebars
You can also designate some part of your page for tips or boxes. A sidebar is used on the top, bottom, right or in the center of the page.
Use float property, borders and background.
[edit] Navigation
[edit] Menu box
You can create a menu with links to some pages of your application.
.menu {
background:#F7F7F7 none repeat scroll 0 0;
border:1px solid #BDC7D8;
padding:5px;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:11px;
width: 330px;
}
.menu h3 {
margin-bottom:10px;
padding:5px 0 0 5px;
font-size:13px;
}
.menu ul {
color:#3B5998;
padding:0 10px 5px;
}
.menu li {
font-weight:bold;
list-style-image:none;
list-style-position:inside;
list-style-type:square;
padding:0 0 5px;
}
.menu .descrip {
color:#444444;
font-weight:normal;
padding:3px 0 0 15px;
}
</style>
<div class="menu">
<h3>Welcome to Myapp. Here are some links:</h3>
<ul>
<li>
<a href="#">Invite</a>
<div class="descrip">Why wait? Invite your friends to join Myapp</div>
</li>
<li>
<a href="#">View</a>
<div class="descrip">Look up profile information on the go.</div>
</li>
<li>
<a href="#">Something</a>
<div class="descrip">Looking for something? Find it here.</div>
</li>
<li>
<a href="#">Browse</a>
<div class="descrip">Find out more interesting things by browsing our directory.</div>
</li>
<li>
<a href="#">Help</a>
<div class="descrip">What's this all about? Find out in a single click.</div>
</li>
</ul>
</div>
[edit] Actions Pro
You can use actions pro as a sidebar menu.
<style type="text/css">
.actionspro {
list-style: none;
margin: 0px;
padding: 0px; }
.actionspro li { border-bottom: 1px solid #D8DFEA; }
.actionspro a {
background: transparent;
display: block;
margin: 0px;
padding: 2px 3px;
text-decoration: none; }
.actionspro a:hover {
background: #3b5998;
color: white;
text-decoration: none; }
.actionspro .inactive {
padding: 2px 3px;
color: gray; }
</style>
<ul class="actionspro">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Action2</a>
</li>
</ul>
[edit] Tabs for Ajax (ftab)
These tabs are alternatives to standard ones and are often used for navigation through Ajax.
<style type="text/css">
.ftabs
{
border-bottom:1px solid #CCCCCC;
padding:0 10px 0 8px;
}
.ftabs a.first {
border-left:1px solid #CCCCCC;
margin-left:0;
}
.ftabs #ftabs a {
background:#F0F0F0 none repeat scroll 0 0;
border-left:1px solid #E5E5E5;
border-right:1px solid #CCCCCC;
border-top:1px solid #CCCCCC;
color:#666666;
display:block;
float:left;
margin-top:1px;
padding:4px 8px;
position:relative;
}
.ftabs #ftabs a.active {
background:#FFFFFF none repeat scroll 0 0;
border-bottom:1px solid #FFFFFF;
border-left:1px solid #CCCCCC;
color:#333333;
margin-bottom:-1px;
margin-left:-1px;
margin-top:0;
padding-bottom:4px;
padding-top:5px;
}
.ftabs #ftabs a.last { border-right:1px solid #CCCCCC; }
.ftabs img#friends_loading {
display:none;
float:right;
margin:7px 16px 0 0;
}
.ftabs #ftabs a:hover
{
background:#fff;color:#444;text-decoration:none;
}
.ftabs #ftabs a:focus{outline:0px;}
</style>
<div class="ftabs">
<div id="ftabs">
<a id="fmpt_status" class="first" onclick="Friends.refreshView('status');return false;" href="#status">Status Updates</a>
<a id="fmpt_recent" onclick="Friends.refreshView('recent');return false;" href="#recent">Recently Updated</a>
<a id="fmpt_everyone" class="active" onclick="Friends.refreshView('everyone');return false;" href="#everyone">Everyone</a>
<a id="fmpt_advanced" class="last" onclick="Friends.refreshView('advanced');return false;" href="#advanced">More...</a>
</div>
<img id="friends_loading" style="height: 8px; width: 28px;" alt="loading"
src="static.ak.fbcdn.net/images/upload_progress.gif?1:25923"/>
</div>
[edit] Displaying Poll Results
This code prints poll results.
<style type="text/css">
.poll_results { width:420px; }
.poll_results h2 {
background-color:#6D84B4;
color:white;
font-size:11px;
padding:5px;
margin:0;
}
.poll_results div.poll_answers {
background:white none repeat scroll 0 0;
border-color:#CCCCCC;
border-style:solid;
border-width:0 1px 1px;
padding:5px;
}
.poll_results .poll_answers p {
margin:0;
font-weight:bold;
}
.poll_results .poll_answers table { margin:10px 0 10px 0; }
.poll_results .poll_answers table .label {
padding-right:10px;
text-align:right;
font-size:11px;
}
.poll_results .poll_answers table div.bar
{
background-attachment:scroll;
background-color:#D8DFEA;
background-image:none;
background-position:0 0;
background-repeat:repeat;
float:left;
height:18px;
margin-right:5px;
color:white;
text-align:left;
font-weight:bold;
font-size:13px;
padding:1px 1px 1px 3px;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
}
.poll_results .poll_answers table div.active { background-color:#3B5998; }
</style>
<div class="poll_results">
<h2>Poll: Will BMW win this year?</h2>
<div class="poll_answers">
<table><tbody>
<tr><td class="label"><b>No, they're not quite there yet</b></td>
<td class="bar"><div class="bar" style="width: 120px;">51%</div></td>
</tr>
<tr><td class="label"><b>YesYesYesYesYesYesYesYesYesYesYesYesYesYes, but only under unusual circumstances</b></td>
<td class="bar"><div class="bar" style="width: 65px;">28%</div></td>
</tr>
<tr><td class="label"><b>Yes, definitely</b></td>
<td class="bar"><div class="bar active" style="width: 49px;">21%</div></td>
</tr>
</tbody></table>
<p><b><a onclick="">Discuss this poll</a></b></p>
</div>
</div>
[edit] Displaying Div Based Tableless Poll Results
This is Div Based Poll results.
<style type="text/css">
.poll-results {
width: 458px;
}
.poll-results h1 {
font-size: 22px;
padding: 0 0 10px 0;
margin: 0;
}
.poll-results h2 {
background-color: #6D84B4;
color: white;
font-size: 11px;
padding: 5px;
margin: 0;
}
.poll-results .poll-answers {
border-color: #ccc;
border-style: solid;
border-width: 0 1px 1px;
padding: 1px 10px 10px 10px;
margin: 0;
}
.poll-results .poll-answers .poll-question {
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #d4dae8;
}
.poll-results .poll-answers .poll-question h3 {
margin: 0;
padding: 10px;
color: #3b5998;
font-size: 14px;
text-align: left;
font-weight: bold;
}
.poll-results .poll-answers .poll-question .row {
width: 436px;
padding-bottom: 10px;
}
.poll-results .poll-answers .poll-question .answer {
float: left;
width: 200px;
padding: 3px 10px 0 0;
text-align: right;
font-size: 11px;
font-weight: bold;
}
.poll-results .poll-answers .poll-question .bar-outter {
float: left;
height: 20px;
color: white;
width: 200px;
background-color: #d4dae8;
border: 1px solid #d4dae8;
}
.poll-results .poll-answers .poll-question .bar-outter .bar {
float: left;
height: 20px;
background-color: #3b5998;
}
.poll-results .poll-answers .poll-question .bar p {
margin: 0;
padding: 0px 1px 0px 5px;
text-align: left;
font-size: 13px;
font-weight: bold;
line-height: 20px;
}
.poll-results .poll-answers .poll-question .discuss-poll {
display: block;
width: 436px;
font-weight: bold;
}
<style;>
<div class="poll-results">
<h1>Poll Result</h1>
<h2>Poll Question Name</h2>
<div class="poll-answers">
<div class="poll-question">
<h3>Q1. LEGO House: How many nights will James May sleep in the house ?. </h3>
<div class="row">
<div class="answer">A1. Sleeps one night</div>
<div class="bar-outter">
<div class="bar" style="width: 50%"><p>51%</p></div>
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="answer">A2. Sleeps one night</div>
<div class="bar-outter">
<div class="bar" style="width: 43%"><p>43%</p></div>
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="answer">A3. Three nights or more</div>
<div class="bar-outter">
<div class="bar" style="width: 44%"><p>44%</p></div>
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="answer">A4. Doesnt sleep there/ house falls apart etc.</div>
<div class="bar-outter">
<div class="bar" style="width: 45%"><p>45%</p></div>
</div>
<div class="clear"></div>
</div>
<a class="discuss-poll" href="#">Discuss this poll</a>
</div><!-- poll-question -->
</div><!-- poll-answers -->
</div><!-- poll-result -->
[edit] Forms
The following form contains a search box, a textarea, and submit and cancel buttons.
<style type="text/css">
input.search {
background:white url(facebook.com/images/magglass.png) no-repeat scroll 3px 4px;
padding-left:17px;
}
input, textarea, select {
border:1px solid #BDC7D8;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:11px;
padding:3px;
}
input:focus, textarea:focus, select:focus {border-color:#687FB0}
.field {border:1px solid #bdc7d8; padding:2px}
.field:focus {border-color:#687FB0}
textarea.field {width:98.5%;height:100px}
button {
padding:1px 3px 1px 4px;
font-size:1em; cursor:pointer;
background:#3b5998; color:#fff;
border:1px solid #0e1f5b;
border-left-color:#D9DFEA;
border-top-color:#D9DFEA;
}
button.next, button.cancel {
background:#ddd;
color:#111;
border:1px solid #666;
border-left-color:#ddd;
border-top-color:#ddd
}
</style>
<form method="get" action="#">
<input type="text" class="search"/>
<textarea class="field">Some text</textarea>
<input type="submit"/>
<button class="cancel">Cancel</button>
</form>
[edit] Tooltips
Use this CSS for tooltips.
.tooltip_pro {
position: absolute;
z-index: 35;
display:none;
}
.tooltip_pro .tooltip_text {
padding: 3px 8px 3px 9px;
text-align: center;
white-space: nowrap;
left: 0px;
color: white;
font-size: 11px;
background: #282828;
position: relative;
}
.tooltip_pro .tooltip_pointer {
height: 4px;
width: 7px;
font-size: 1px;
margin: 0px auto 0px;
padding: 0px;
background: transparent url(/images/dark-pointer.gif) top center no-repeat;
}
[edit] Two List Table
Example of Two List Table
[edit] Base Code
This is the HTML that should be placed on your page.
<div>
<table class="lists" cellspacing="0" border="0">
<tr>
<th>
<h4>List 1</h4>
<a href="#">See All</a>
</th>
<th class="spacer"></th>
<th>
<h4>List 2</h4>
<a href="#">See All</a>
</th>
</tr>
<tr>
<td class="list">
'''''INSERT ITEMS HERE'''''
</td>
<td class="spacer"></td>
<td class="list">
'''''INSERT ITEMS HERE'''''
</td>
</tr>
<tr>
<td class="see_all"><div><a href="#">See all List 1's</a></div></td>
<td class="spacer"></td>
<td class="see_all"><div><a href="#">See all List 2's</a></div></td>
</tr>
</table>
</div>
[edit] Item Code
This is the code for one item. It should replace the instances in the base code that say INSERT ITEMS HERE.
First item:
<div class="list_item first clearfix">
</div>
Subsequent items:
<div class="list_item clearfix">
</div>
[edit] CSS Code
This is the CSS code that should be placed on your page in style tags.
.lists th {
text-align: left;
padding: 5px 10px;
background: #6d84b4;
}
.lists .spacer {
background: none;
border: none;
padding: 0px;
margin: 0px;
width: 10px;
}
.lists th h4 { float: left; color: white; }
.lists th a { float: right; font-weight: normal; color: #d9dfea; }
.lists th a:hover { color: white; }
.lists td {
margin:0px 10px;
padding:0px;
vertical-align:top;
width:306px;
}
.lists .list {
background:white none repeat scroll 0%;
border-color:-moz-use-text-color #BBBBBB;
border-style:none solid;
border-width:medium 1px;
}
.lists .list .list_item { border-top:1px solid #E5E5E5; padding: 10px; }
.lists .list .list_item.first { border-top: none; }
.lists .see_all {
background:white none repeat scroll 0%;
border-color:-moz-use-text-color #BBBBBB rgb(187, 187, 187);
border-style:none solid solid;
border-width:medium 1px 1px;
text-align:left;
}
.lists .see_all div { border-top:1px solid #E5E5E5; padding:5px 10px; }
[edit] Search Results Navigator
This is the HTML code that may be used to show items, sorted by categories or search results with options and actions. It links itself as "search.php", that uses following parameters:
- p - the number of the page to be displayed.
- n - network, a group of items. it is selected in select box.
- c - category, chosen by following a link.
<!-- All CSS required for this example is static facebook CSS. We will include it using <link> statement -->
<!-- Note, that you must include this files, even if they are alredy included by facebook -->
<link type="text/css" rel="stylesheet" media="screen" href="static.ak.fbcdn.net/rsrc.php/v1/64826/css/filters.css">
<link type="text/css" rel="stylesheet" media="screen" href="static.ak.fbcdn.net/rsrc.php/v1/108104/css/ubersearch.css">
<link type="text/css" rel="stylesheet" media="screen" href="static.ak.fbcdn.net/rsrc.php/v1/pkg/77/118975/css/common.css.pkg.php">
*Main Code:
<div id="page_body" class="pagebody ubersearch">
<div id="content_shadow">
<div class="bar clearfix summary_bar">
<!-- Change the number of the items displayed, total number of the items and current page(using <li style="current" ...) -->
<div class="summary"><strong>Displaying 4 of 100 items.</strong></div>
<ul class="pagerpro" id="pag_nav_links">
<li class="current"><a href="search.php?p=1">1</a></li>
<li><a href="search.php?p=2">2</a></li>
<li><a href="search.php?p=3">3</a></li>
<li><a href="search.php?p=2">Next</a></li>
</ul>
</div>
<div id="search_results" class="search_results clearfix filters_active">
<div class="column results">
<!-- Place your results here -->
<!-- Start of example result item -->
<div class="result clearfix">
<div class="image">
<a href="search_redirect.php?q=1">
<img src="profile.ak.facebook.com/object2/1194/26/s2205007948_5657.jpg" alt="Facebook" class="photo">
</a>
</div>
<!-- This is list of Options and Values that are shown near the image -->
<div class="info">
<dl class="clearfix">
<dt>Option1:</dt> <dd class="result_name fn"><a href="search_redirect.php?link=1" class="url fn">Value1</a></dd>
<dt>Option2:</dt> <dd><a href="search_redirect.php?link=2">Value2</a></dd>
<dt>Option3:</dt> <dd><a href="search_redirect.php?link=3">Value3</a></dd>
<dt>Option4:</dt> <dd class="info_diff"><span>Hilighted Value</span></dd>
</dl>
</div>
<!-- This is the list of actions that go next to the options -->
<ul class="actionspro">
<li><a href="#" onclick="some_ajax_function({'option':'value','and':'so','on':'...'});return false">Action1</a></li>
<li><a href="#" onclick="some_ajax_function({'option':'value','and':'so','on':'...'});return false">Action2</a></li>
<li><a href="#" onclick="some_ajax_function({'option':'value','and':'so','on':'...'});return false">Action3</a></li>
<li><a href="#" onclick="some_ajax_function({'option':'value','and':'so','on':'...'});return false">Action4</a></li>
</ul>
</div>
<!-- End of example result item -->
'''''PLACE ITEMS HERE'''''
</div>
<div class="column filters">
<div id="filters">
<div id="object_filters"><h2>Filter groups by:</h2>
<form method="get" action="search.php" name="groups_form" id="groups_form">
<label for="n" id="label_n">Network</label>
<select class="select" onchange="this.form.submit()" id="n" name="n">
<!-- Place networks or any othe group types here -->
<option value="-1">All My Networks</option>
<option value="67109339">Russia</option>
<option selected="selected" value="0">Global Search</option>
</select>
<div id="type_filters">
<div class="subtype_filters"><div class="subtype_label">Types</div>
<!-- Another parameter of search: items go here -->
<div class="subtype"><a href="search.php" class="current">All</a></div>
<div class="subtype"><a href="search.php?c=1">Type1</a></div>
<div class="subtype"><a href="search.php?c=2">Type2</a></div>
<div class="subtype"><a href="search.php?c=3">Type3</a></div>
<div class="subtype"><a href="search.php?c=4">Type4</a></div>
<div class="subtype"><a href="search.php?c=5">Type5</a></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
[edit] Flag Navigator
You can use Flag Navigator as an alternative to group some of your pages.
<link type="text/css" rel="stylesheet" media="screen" href="static.ak.fbcdn.net/rsrc.php/v1/pkg/77/118975/css/common.css.pkg.php">
<style type="text/css">
#content{padding:0;width:655px;}
.content_no_sidebar{background-color:#f7f7f7;border-top:1px solid #ccc;}
.dev_applications{margin:0 0 13px 0;padding:10px 10px 0px 10px;}
.dev_application_msg{padding:20px 80px;border:1px solid #ccc;background-color:#fff;margin:10px 0 10px 0;font-size:12px;text-align:center;line-height:18px;}
.dev_app_infos_shadow{float:left;display:block;width:469px;border-right:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;padding:0;margin:0;}
.dev_app_infos{width:468px;display:block;border:1px solid #ccc;background-color:#fff;padding:0;margin:0;left:-1px;top:-1px;margin:0 0 -1px 0;position:relative;z-index:1;}
.app_hide{display:none;}
.dev_application_header{padding:15px 20px 10px 20px;}
.dev_application_header img{float:left;width:75px;margin:0 10px 0 0;}
.dev_application_header h3{width:340px;float:left;font-size:18px;font-weight:bold;color:#444;margin:0 0 3px 0;padding:0;}
.dev_application_header .dev_app_submit{width:340px;float:left;display:block;margin:0;padding:0;}
.dev_app_submit h6{font-size:12px;font-weight:bold;color:#666;margin:0 0 1px 0;padding:0;}
.dev_app_submit p{margin:0;padding:0;font-size:10px;color:#999;line-height:14px;}
.dev_app_submit span .dev_pending{color:#666;}
.dev_app_submit span .dev_approved{color:green;}
.dev_app_submit span .dev_unsubmitted{color:#666;}
.dev_app_submit span .dev_denied{color:#a00;}
.dev_application_data{background-color:#fff;clear:both;padding:0 20px 0 20px;overflow:hidden;}
.dev_app_insights{border-top:1px solid #eee;border-bottom:1px solid #eee;padding:10px 0px 7px 0px;margin:0 0 10px 0;}
.dev_app_insight{width:32%;float:left;display:block;}
.dev_app_insight h4{font-weight:bold;color:#333;font-size:28px;display:block;margin:0 0 2px 0;padding:5px 0px 0px 0px;border:none;text-align:left;font-family:'Helvetica', 'Lucida Grande', 'Tahoma', sans-serif;}
.dev_app_insight p{font-size:11px;font-weight:normal;padding:0;margin:0;text-align:left;color:#666;}
.dev_app_list{padding-left:0px;padding-top:0px;}
.dev_application_info{width:275px;overflow:hidden;padding-bottom:10px;float:left;}
.dev_application_other{width:147px;float:left;}
.dev_application_info dl{margin:0;padding:0;}
.dev_application_info dt{color:#777;font-weight:normal;font-size:11px;margin:0 0 2px 0;display:block;}
.dev_application_info dd{color:#333;font-weight:normal;margin:0 0 8px 0;font-size:11px;display:block;}
.dev_app_footer{background-color:#f0f2f7;text-align:right;padding:7px 20px 8px 20px;clear:both;}
.dev_app_summary{padding:0 0 3px 3px;font-size:11px;font-weight:bold;}
.dev_quick_start{border-top:1px solid #ccc;background-color:#fff;padding:15px;}
.dev_quick_start h3{font-size:13px;font-weight:bold;border-bottom:1px solid #ccc;margin-bottom:8px;}
.dev_qs_info{margin-bottom:20px;}
.dev_qs_info p{margin:0;padding:0;color:#333;font-size:11px;line-height:16px;margin-bottom:10px;width:500px;}
.dev_qs_section{width:290px;float:left;padding-right:15px;}
.dev_qs_section p{font-size:13px;line-height:18px;width:290px;}
.download h4{background:url(/images/icons/fbfile .gif) 0 2px no-repeat;font-size:15px;font-weight:bold;margin:0 0 4px 0;padding:0 0 0 20px;}
.install h4{background:url(/images/icons/install_app .gif) 0 2px no-repeat;font-size:15px;font-weight:bold;margin:0 0 4px 0;padding:0 0 0 22px;}
.dev_qs_more_info{}
.dev_qs_more_info h4{font-size:13px;font-weight:bold;margin:0 0 6px 0;padding:0;}
.dev_mi_section{width:290px;float:left;padding-right:15px;}
.dev_mi_section p{margin:0;padding:0 20px 0 0;color:#333;font-size:11px;line-height:16px;margin-bottom:10px;}
.dev_client{margin-bottom:15px;}
.dev_client img{float:left;}
.dev_client .dev_client_info{float:left;margin:0 0 0 5px;}
.dev_client h5{font-size:12px;font-weight:bold;margin-bottom:2px;}
.dev_client h5 span{font-weight:normal;}
.dev_client p{font-size:10px;font-weight:normal;padding:0;margin:0;color:#666;}
.dev_client .client_contents{display:none;border:1px solid #ccc;padding:10px;background-color:#f7f7f7;margin:10px 0 0 0;width:245px;}
.dev_client .client_contents ul{margin:6px 0 0 0;padding:0;line-height:16px;}
.dev_client .client_contents li{list-style:none;margin:0 0 6px 0px;}
.dev_client .client_contents li li{list-style-type:disc;margin:0 0 6px 18px;}
.dev_ext_libs{margin-left:20px;}
.dev_ext_libs h6{font-size:10px;font-weight:bold;margin:0 0 6px 0;padding:0;}
.dev_ext_libs h6 span{font-weight:normal;}
.dev_ext_libs ul{list-style:none;width:280px;margin:0;padding:0;}
.dev_ext_libs li{width:75px;float:left;font-size:10px;padding-left:16px;margin-bottom:7px;background:url(/images/icons/external_link .gif) left top no-repeat;}
.example_code table .pop_dialog_table{width:600px;}
.flag_nav{width:155px;float:left;padding:10px 0px 0px 0px;}
.flag_nav .flag_nav_container{margin:0;padding:10px 0 0 0;}
.flag_nav .flag_nav_container .flag_nav_item_selected a{border:1px solid #3b5998;background-color:#6d84b4;color:#fff;position:relative;z-index:97;}
.flag_nav .flag_nav_container .flag_nav_item a .flag_nav_li_title{float:left;width:136px;padding:1px 0px 2px 3px;margin:0px;overflow:hidden;}
.flag_nav_has_icon .flag_nav_container .flag_nav_item a .flag_nav_li_title{width:120px;padding-left:6px;padding-bottom:0px;}
.flag_nav_has_icon .flag_nav_container .flag_nav_item a .flag_nav_li_icon{ width:16px; height:16px; padding:0px; margin:0px; float:left; background-position:16px 0px; overflow:hidden; background-color:transparent;}
.flag_nav .flag_nav_container .flag_nav_item_selected a .flag_nav_li_icon{background-position:0px 0px;}
.flag_nav .flag_nav_item{width:154px;list-style:none;position:relative;z-index:97;display:block;margin:0px;padding:0px;}
.flag_nav .flag_nav_item a{font-size:11px;padding:3px 0px 3px 5px;display:block;background-color:#f7f7f7;border-top:1px solid #f7f7f7;border-bottom:1px solid #eee;margin:0px;}
.flag_nav .flag_nav_item a:hover{background-color:#d8dfea;text-decoration:none;border-top:1px solid #d8dfea;border-bottom:1px solid #d8dfea;}
.flag_nav .flag_nav_item a .flag_nav_top_mask{display:none;height:1px;width:154px;border-top:1px solid #d8dfea;position:absolute;padding:0px;margin:0px;left:0px;top:-1px;}
.flag_nav .flag_nav_item a:hover .flag_nav_top_mask{display:block;}
.flag_nav .flag_nav_item_selected a:hover{background-color:#6d84b4;border-top:1px solid #3b5998;border-bottom:1px solid #3b5998;}
.flag_nav .flag_nav_item_selected a:hover .flag_nav_top_mask{display:none;}
.flag_nav .flag_nav_item a:focus{outline:0px;}
.flag_nav .flag_nav_item_selected{width:155px;top:-1px;}
.flag_nav .flag_nav_border_hack{display:none;}
</style>
<div id="content" class="mywidth clearfix">
<div class="dashboard_header">
<div class="dh_titlebar clearfix"><!-- Any your text goes here --></div>
</div>
<div class="content_no_sidebar">
<div class="dev_applications clearfix">
<div class="flag_nav flag_nav_has_icon dev_app_list" id="dev_app_list">
<div class="flag_nav_container">
<!-- Start selected nav link -->
<div class="flag_nav_item flag_nav_item_selected" id="24003877170_li">
<a href="#" onclick="ajax_func(); return false;" class="clearfix">
<div class="flag_nav_li_icon" style="background-image: url(www.facebook.com/images/icons/fbfile.gif);"></div>
<div class="flag_nav_li_title">Category1</div>
<div class="flag_nav_top_mask"></div>
</a>
<span class="flag_nav_border_hack"> </span>
</div>
<!-- Unselected link -->
<div class="flag_nav_item" id="29757401366_li">
<a href="#" onclick="ajax_func(); return false;" class="clearfix">
<div class="flag_nav_li_icon" style="background-image: url(www.facebook.com/images/icons/fbfile.gif);"></div>
<div class="flag_nav_li_title">Category2</div>
<div class="flag_nav_top_mask"></div>
</a>
<span class="flag_nav_border_hack"> </span>
</div>
<!-- End Nav links -->
</div>
</div>
<div class="dev_app_infos_shadow">
<div class="dev_app_infos" id="dev_app_infos">
<!-- If you decided to use Ajax, Create divs like shown below and show and hide them, so that
it won't be necessary to reload them. -->
<div class="dev_application app_show" id="24003877170_info">
<div class="dev_application_header clearfix">
<img src="photos-c.ak.facebook.com/photos-ak-sctm/v43/210/24003877170/app_1_24003877170_8499.gif">
<h3>Header</h3>
<div id="app_id_24003877170_submit">
<div class="dev_app_submit">
<h6>Subheader</h6>
<p>Description</p>
</div>
</div>
</div>
<div class="dev_application_data">
<div class="dev_app_insights clearfix">
<p>Some text here</p>
</div>
<div class="dev_application_info"> and here </div>
<div class="dev_application_other">
<ul class="actionspro">
<li><a href="www.facebook.com/developers/dsadmin.php?app_id=24003877170">Action1</a></li>
<li><a href="www.facebook.com/pages/edit/?id=24003877170">Action2</a></li>
<li><a href="www.facebook.com/developers/editapp.php?edit&app_id=24003877170">Action3</a></li>
</ul>
</div>
</div>
<div class="dev_app_footer"><a href="www.facebook.com/">Action1</a> | <a href="www.facebook.com/">Action2</a></div>
</div>
<!-- End Of Active Page. Other pages go here. -->
</div>
</div>
</div>
</div>
</div>
