base.css

body {
    font-family: Trebuchet MS;
    font-size: 13px;
}
a { outline:0;}
#header {
    background-color: #dfe3ee;
    position:relative;
    border-bottom:1px solid #bfc3ce;
}
#header h1 {
    color: #333;
    font-size: 2em;
    padding: 10px 10px 10px 50px;
    background: url("f_logo.jpg") no-repeat scroll 10px center transparent;
}
#header #fb-like{
    left: 410px;
    position: absolute;
    top: 14px;
}
h2 {
    margin: 0 0 5px 10px;
    padding-top: 10px;
    font-size:1.4em;
    font-weight:bold;
}
h3 {
    margin: 10px 0 5px 10px;
    font-size:1.2em;
    font-weight:bold;
    color: #999;
    clear:left;
}

#access_token_label {
    margin-left:10px;

}
#access_token {
    width: 500px;
}

#perms {
    background: none repeat scroll 0 0 #EEEEEE;
    margin: 5px;
    overflow: auto;
    padding: 5px;
}
#perms_pub,
#perms_user,
#perms_friends {
    float:left;
    width:30%;
}
#perms fieldset legend {
    margin: 10px 0 0px 10px;
    font-size:1.4em;
    font-weight:bold;
}
#perms label {
    width:38%;
    display:inline-block;
} 
#perms input {
    width:7%;
}
#auth_actions{
    padding:10px 0 0 10px;
}


#auth-panel{
    padding-bottom: 20px;  
}

/* tabs */
#tabs {}
#tabs ul {
    border-bottom: 1px solid gray;
}
#tabs ul li {
    display: inline-block;
    height: 36px;
}
#tabs ul li a {
       border-style: solid solid none;
       border-width: 1px 1px medium;
       display: inline-block;
       height: 35px;
       line-height: 31px;
       margin-left: 10px;
       padding: 0 18px;
}
#tabs ul li a.active {
    background-color: #dfe3ee;
    height:36px;
    background-image:-moz-linear-gradient(top, #dfe3ee 0%, #eceff5 100%);
    background-image:linear-gradient(top, #dfe3ee 0%, #eceff5 100%);
    background-image:-webkit-gradient(linear, right top, right bottom, color-stop(0%,#dfe3ee), color-stop(100%,#eceff5));
}

#request-panel, #fql-panel {
    background-image:-moz-linear-gradient(top, #eceff5 0%, #fff 50%);
    background-image:linear-gradient(top, #eceff5 0%, #fff 50%);
    background-image:-webkit-gradient(linear, right top, right bottom, color-stop(0%,#eceff5), color-stop(50%,#fff));
    
}

/* request panel */
#request-panel{
    border-bottom: 1px solid #bbb;
    padding-bottom: 20px;
    clear:left;
}
#request-panel #request_form{
    margin: 0px 10px 0 10px;
}
#select_method {
    width:90px;
}
#request_submit {
    width:50px;
    position:absolute;
    right:20px;
}
#request_url {
    margin-right: 80px;
    position: absolute;
    width: 60%;
    width: -moz-available;
}
#post_fields{
    display:none;
    padding:5px 0;
}

#post_fields ul li {
    padding:5px 0;
}

#post_fields ul li.post_field {
    display:none;
}

#post_fields ul li.post_field input[type=text]{
    width:300px;
}
 
 
/* FQL */

#fql-panel{
    padding-bottom: 20px;  
    border-bottom: 1px solid #bbb;
    overflow:auto;
    clear:left;
    display:none;
}
#fql_form{
    margin: 0px 10px;
    float:left;
}
#fql_query{
    display: block;
    font-family: monospace;
    height: 100px;
    padding: 5px;
    position: relative;
    width: 600px;
}
#fql_submit{
    margin-top:5px;
    font-size:1.2em;
}
#fql-examples {
    float:left;
}
#fql-examples ul li a span {
    display:none;
}

/* RESPONSE  PANEL */

#response-panel {
    overflow:auto;
    background-image:-moz-linear-gradient(top, #f9fafc 0%, #fff 50%);
    background-image:linear-gradient(top, #f9fafc 0%, #fff 50%);
    background-image:-webkit-gradient(linear, right top, right bottom, color-stop(0%,#f9fafc), color-stop(50%,#fff));
}
#response-body {
    float: left;
    width: 70%;
}
#response-meta {
    float: left;
    width: 30%;
}
#response-meta #connections {
    margin-left:10px;
}
#response-meta #connections ul {
    overflow:auto;
}
#response-meta #connections ul li{
    float: left;
    font-size: 0.8em;
    margin-right: 10px;
}
#response-meta #fields {
    clear: both;
    font-size: 0.8em;
    margin-left: 10px;
    overflow: auto;
}
#response-meta #fields dl dt {
    float:left;
    width:25%;
    font-weight:bold;
}
#response-meta #fields dl dd {
    float:left;
    width:70%;
}

#response-meta #headers {}
#response-meta #headers dl {
    margin: 0 10px;
    font-size:0.8em;
}
#response-meta #headers dl dt {
    width:100px;
    float: left;
}
#response-meta #headers dl dd {}

#response {
    border: 1px solid #DDDDDD;
    font-family: monospace;
    overflow: auto;
    padding: 10px;
    white-space: pre;
    height:450px;
    margin-left:10px;
    margin-bottom: 10px;
    background: none repeat scroll 0 0 #FCFCFC;
}
#response.error {
    background: #FFE3E3;
}
#response.loading {
    opacity: 0.5;
    background: url(spinner.gif) no-repeat center 20%;
}

span.int {
    color:red;
}
span.bool {
    color:blue;
}
span.string {
    color:green;
}