/* XXXarielb why is this here in this file? */
.fbs-pane, .fbs-flyout-pane { z-index: 1000; }

/*
--------------------------------------
GLOBAL RESET
--------------------------------------
 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption, th, td {
    text-align: left;
    font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}

blockquote, q {
    quotes: "" "";
}

strong { font-weight: bold; }

/*
--------------------------------------
GLOBAL TYPE SIZES
--------------------------------------
 */

/*
    Default browser types size is 16px (assuming the user has not customized their settings).
    Assuming this default, we set the body to a font size of 62.5%, which effectively
    resets our default type size to 10px. From here, we can think of font-size in terms of
    pixels, but set font-size in ems. For example, 1em = 10px, 0.9em = 9px, 1.2em = 12px.
*/

body { font-size: 62.5%; line-height: 1.5; } /* 10px */

h1, h2, h3, h4, h5, h6 {font-weight:normal;}

/*#content { font-size: 1.2em };
*/

p  {font-size: 1.2em;}
h1 {font-size:2em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}

/*
--------------------------------------
PAGE STRUCTURE
--------------------------------------
*/

body {
    background: #fff;
    font-family: "Lucida Grande", Tahoma, Verdana, Arial, Helvetica, sans-serif;
    color: #666;
    min-width: 850px;
    _width: 100%;
}

/* #content is a required element on every template.
   We use it to determine positioning of various pop-up
   elements, as well as use it to insure grid integrity.
   for the visual design.
*/

#content {
  background: #fff;
    padding: 35px 30px 0px;
    min-height: 400px;
}

#container { background: #fff; }

#modal-dialog { display: none; }

/*
--------------------------------------------------
LINKS
--------------------------------------------------
*/
a:link {
    color: #1170a3;
    text-decoration: none;
    cursor: pointer;
}
a:visited {
    color: #5c8aa3;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

a.stublink {
    color: #a32100;
    text-decoration: none;
}

a.stublink:hover {
    text-decoration: underline;
}

a.stublink:visited {
    color: #c45032;
    text-decoration: none;
}

a.disabled {
    color: #898989;
}
a.disabled:hover {
    text-decoration: none;
    cursor: default;  
}

.button-link a {
    color: #557abb;
}

/*
--------------------------------------
GLOBAL CLASSES
--------------------------------------
 */

/*  Generic class for self-clearing block level elements with floated children */
.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clear { min-height: 1%; zoom: 1; }

/* Global hide class */
.hide,
.hidden { display: none !important; }

/* this class allows the elements' display to be toggled */
.toggle { display: none; }

/* used when we want an object to occupy space but not actually be shown */
.invisible { visibility: hidden !important; }
.show-tablecell { display: tablecell; }

.ghost-text { color: #999; }

/* 
   Generic class for hiding/show more results inline
   **Note: use .browse-more for links designed to take you to another page.
*/
.more-toggle,
.less-toggle {
    padding-right: 13px;
    background: url(/resources/images/chrome/freebase-arrows.png) no-repeat right -66px;
}
.less-toggle { background-position: right -94px; }


/* browse-more is global class used to
   style links bring users to further info
   about a given subject. It can be extended
   with additional classes to affect
   color choices (eg. "browse-more-loud")

*/

a.browse-more {
    font-size: 11px;
    line-height: 1.2;
    padding: 0.2em 0.4em;
    background: #ebf5fc;
    color: #004970;
}

a.browse-more, a.browse-more:hover { text-decoration: none; }
a.browse-more:hover { background-color: #dfedf6; }

a.browse-more-loud {
    background-color: #ecf5fc;
    color: #ff822e;
}

.unicode-character {
    font-family: monospace;
    font-size: 0.8em;
}

/*
-----------------------------------------
GENERIC FORM CONTROLS
-----------------------------------------
*/

select,
textarea,
input {
    border: 1px solid #9a9a9a;
}

input {
    margin: 0px;
    padding: 2px 2px 2px 4px;
    font-weight: normal;
}

textarea {
    font-family: "Lucida Grande", Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;
}

input:focus { outline: 1px solid #006ee9; }

.disabled input { border: 1px solid #bcbcbc; }

/* Default button appearance */
button {
    background: #e2e3e4 url(/resources/images/chrome/sprite-1px-vert.png) 0 -1149px repeat-x;
    border: 1px solid #9a9a9a;
    color: #000;
    font-size: 12px;
    padding-left: 0.3em;
    padding-right: 0.3em;
    margin-left: 0.5em;
    line-height: 12px;
    *line-height: 15px; /* ie7 hack */
    text-transform: capitalize;
    cursor: pointer;
}
button:hover { background-position: 0 -1141px; }

/* 

Active but currently is used to for buttons which are the primary call to action.
This should be updated so that .active represents the state of a button, not it's
relative importance in a workflow. Suggested class name would be .primary, which
may or may not be .active

*/

/* must inculde body in button.active class for IE6 */
body button.active {
    background: #f06010 url(/resources/images/chrome/sprite-1px-vert.png) 0 -1183px repeat-x;
    color: #fff;
    border: 1px solid #dc5800;
    text-shadow: 1px 1px 1px #c15900;
}
body button.active:hover { background-position: 0 -1174px; }

/* Disabled button state */
button.disabled,
button.disabled.active {
    background: #eee url(/resources/images/chrome/button_bkd.gif) bottom left repeat-x;
    text-shadow: 0 0 0;
    color: #ccc;
    border: 1px solid #d0d0d0;
}

button.disabled:hover { 
    cursor: default;
}

/* Essentially used to wrap a label/input element */
.form-field {
    display: block;
    margin-bottom: 1em;
}


/*
--------------------------------------
HEADER
--------------------------------------
This is our site-wide header
*/

#header {
    position: relative;
    background: #fff url(img_sprite_1px_vert) repeat-x left -1050px;
    height: 5em;
    min-width: 95em;
}

#logo {
    position: absolute;
    left: 30px;
    top: 1.25em;
}

.site-search {
    float: right;
    display: inline; /* ie6 */
    margin-right: 3em;
    margin-top: 1.1em;
    background: #fff;
    border: 1px solid #f0f8ff;
    _width: 279px;
}

#header .focused { border-color: #fff1e7; }

.site-search form { border: 1px solid #cbe6ff; }
.focused form { border-color: #ffd4b7;}


.site-search fieldset {
    position: relative;
    border: 1px solid #bcbcbc;
}

#global-search-input {
    margin: 2px 0;
    border: 0;
    width: 240px;
    width:185px;
    padding: 3px 0 3px 3px;
    font-size: 11px;
    color: #454545;
    float: left;
}

#global-search-input:focus {
    outline: 0;
}

.btn-site-search {
    float: left;
    display: inline; /* ie6 */
    padding: 0.2em 0.3em 0.4em;
    margin: 1px 1px 1px 0;
    cursor:pointer;
    text-align:center;
    background: #b3b3b3 url(/resources/images/chrome/sprite-1px-vert.png) repeat-x 0 -600px;
    color: #fff;
    border: 0;
    font-size: 12px;
    line-height: 12px;
    text-shadow: 1px 1px 1px #555;
}

.btn-site-search {
    width: 4.4em;
    height: 1.9em;
}

.btn-site-search {
    *padding-top: 0.3em;
    *height: 1.7em;
}

.btn-site-search:hover {
    background-position: 0 -699px;
    outline: none;
}

#nav-global {
    float: left;
    display: inline;
    margin: 0.5em 0 4px 18.7em;
    list-style-type: none;
    border-left: 1px solid #e5e5e5;
}

.nav-global-item {
    float: left;
    border-right: 1px solid #e5e5e5;
    border-left: 1px solid #fff;
    font-size: 12px;
}

.nav-global-item a {
    display: block;
    padding: 1em 10px;
    color: #1c709e;
    font-weight: bold;
}

.nav-global-item a:hover {
    text-decoration: none;
    background: #fff;
}

#nav-account {
    float: left;
    display: inline;
    margin-left: 2em;
    margin-top: 0.7em;
}

#mini-header #nav-account {
    margin-top: 0;
}

#header .profile-thumb,
#mini-header .profile-thumb {
    float: left;
    display: inline;
    margin-right: 10px;
}

#mini-header .profile-thumb {
    margin-top: 0.4em;
}

.nav-user-controls {
    float: left;
}

#mini-header .nav-user-controls {
    margin-top: 0.9em;
}

#header .nav-user-controls {
    margin-top: 1.2em;
}

/* we have this to compensate for spacing when no user image is present */
#header #anonymous-user-controls {
    display: block;
    margin-top: 1.2em;
}

#mini-header #anonymous-user-controls {
    display: block;
    margin-top: 0.2em;
}

#nav-username {
    font-size: 1.1em;
    line-height: 1.2;
}

#header .profile-thumb img,
#mini-header .profile-thumb img {
    border: 1px solid #d5d5d5;
    background: #fff;
    padding: 1px;
}

#site-search-toggle {
    display: none;
    position: absolute;
    right: 0;
    top: 2.25em;
    width: 15em;
    min-height: 1%;
    z-index: 3;
    background: #c1c1c1;
    padding: 1em 0.5em;
    border: 1px solid #fff;
    border-top:0px;
    list-style-type: none;
}

#site-search-toggle li a {
    display: block;
    padding: 0.25em 0 0.25em 20px;
    color: #333;
    font-size: 1.1em;
}

#site-search-toggle li a.selected {
    background: url(/resources/images/chrome/fb-icons.png) no-repeat -608px -612px;
}

#site-search-toggle li a.selected:hover {
    cursor: default;
    background-color: transparent;
}

#site-search-toggle li a:hover {
    background-color: #f5f5f5;
    text-decoration: none;
}

/*
--------------------------------------------------
MINI-HEADER 
--------------------------------------------------
This is our site-wide header that is served when
viewing content in the context of a user-domain.
It replaces #header.
*/

#mini-header {
    position: relative;
    z-index: 99;
    min-height: 32px;
    _height: 32px;
    background: #f2f2f2 url(/resources/images/chrome/sprite-1px-vert.png) repeat-x 0 -775px;
}

#mini-header #logo {
    top: -1px;
    min-height: 32px;
    border-left: 1px solid #e5e5e5;
}

#mini-header #logo a {
    display: block;
    margin-top: 7px;
    border-left: 1px solid #fff;
    padding-left: 22px;
    padding-right: 3px;
}

#mini-header #logo:hover,
#mini-header #logo a:hover {
    background: #fff;
}

#mini-header .site-search {
    margin: 1px 3em 1px 0;
}

#mini-header #nav-global {
    margin: 0 0 0 10.2em;
}

#mini-header .nav-global-item a {   
    padding: 0.6em 15px;
}

#mini-header #nav-username {
    display: inline;
}

#mini-header .site-search {
    _width: 304px;
}

/*
--------------------------------------
FOOTER
--------------------------------------
Site-wide footer. Present at the bottom
of all templates.
*/

#footer {
    background: #fbfbfb url(/resources/images/chrome/sprite-1px-vert.png) repeat-x 0 -850px;
    clear: both;
    margin-top: 30px;
    overflow: hidden;
}

#nav-footer {
    margin: 0 0 0 15px;
    padding-top: 1.4em;
}

.nav-footer-item {
    float: left;
    display: inline;
    list-style: none;
    margin: 0px;
    padding: 0px 0px 0px 15px;
    font-size: 1.1em;
}

#metaweb-attribution {
    margin-top: 1.5em;
    float: right;
    margin-right: 30px;
}

#copyright {
    float: left;
    margin-right: 10px;
    font-size: 1.1em;
    color: #1d709c;
}

#footer-categories {
    clear: both;
    border-top: 1px dotted #c4c4c4;
    margin: 1em 0;
    padding: 1em 0 0 30px;
    color: #333;
}

#categories-header,
#footer-categories-list {
    float: left;
}

#footer-categories-list {
    margin-bottom: 2em;
}

.category-list-item {
    display: inline;
    border-right: 1px solid #a9a9a9;
    padding: 0 0.75em;
}

.category-list-item-last {
    border: 0;
}


/*
------------------------------
BREADCRUMBS
------------------------------
*/

#simple-breadcrumb {
    font-weight:bold;
    height:24px;
    line-height:24px;
    overflow:hidden;
    background: #efefef;
    border: 1px solid #e0e0e0;
    padding-left: 17px;
}

.crumb {
    float:left;
    margin-left:-10px;
    padding:0pt 10px;
    position:relative;
}

.crumb a {
    color: #7c7273;
    font-weight: normal !important;
}

.crumb-divider {
    background:url(/resources/images/chrome/breadcrumb-separator.png) no-repeat 0 0;
    float:left;
    height:0pt;
    margin: 0 10px 0pt 0pt;
    overflow:hidden;
    padding-top:24px;
    position:relative;
    width:11px;
}

/*
--------------------------------------
headings
--------------------------------------
*/
.page-title,
#page-title,
#PageTitle,
#marketing-title {
    color: #333;
    padding: 0 0 5px 0px;
    font-size: 2.2em;
    margin-bottom: .2em;
    border-bottom: 1px solid #00bff3;
}

#username-title .template-label, 
.page-title .template-label {
    font-size: 0.8em;
    color: #999;
}

#marketing-title .template-label { color: #999; }

.redHeader {
    font-weight: normal;
    font-size: 1.2em;
    color: #354852;
    margin: 0;
}

/*
------------------------------------------------
ICON BUTTONS
------------------------------------------------

***

Icon buttons have the following markup pattern:

<a class="icon-button icon-XXX" href="...">
  <strong>Edit description</strong>
</a>

The .icon-button class holds an image sprite that has
*all* icon-based images. The <strong> tag includeds a 
repeating background-image that creates the gradient.

Specific icons are set by an extending class that sets
the background-position of the image sprite.

Common classes included .icon-add, .icon-edit, .icon-delete.

***

*/

/* ### Generic Icon Button properties */
.icon-button {
    display:block;
    background: #fff url(/resources/images/chrome/btn-icons.png) no-repeat 1px 1px;
    border: 1px solid #d1d1d1;
    min-height: 1%;
    padding-bottom:1px;
    padding-right: 1px;
    line-height: 1.25;
}
.icon-button:hover {
    text-decoration: none;
}

.icon-button strong {
    display: block;
    background:#E7E8E9 url(/resources/images/chrome/sprite-1px-vert.png) repeat-x scroll 0 -209px;
    margin-left: 21px;
    padding: 3px 7px 3px 5px;
    color: #69696a;
    font-size: 12px;
    font-weight: normal;
}
.icon-button-disabled strong {
    color: #ccc;
    background: #ddd;
}

/* EDIT icon */
.icon-edit { background-position:1px -449px; }
.icon-edit:hover {
    background-position: 1px -479px;
    border-color: #e6b08c;
}

/* VOTE Icon */

.icon-pipeline { background-position: 1px -1349px; }
.icon-pipeline:hover {
    background-position: 1px -1379px;
    border-color: #e6b08c;
}

/* DISCUSS Icon */

.icon-discuss { background-position: 1px -1499px; }
.icon-discuss:hover {
    background-position: 1px -1529px;
    border-color: #a1d8a5;
}


/* ### Disabled icon state */

.disabled .icon-button {
    background-color: #f8f8f8;
}

.disabled .icon-button:hover {
    border: 1px solid #d1d1d1 !important;
    cursor: default;
}

.disabled .icon-button strong {
    color: #bcbcbc;
    background-color: #ececec;
    font-weight: normal;
}

/*
------------------------------------------------
BUTTON Links
------------------------------------------------

This is a style class that closely mimics icon-button,
but does not have an icon, only the gradient.

*/
.button-link {
    float: left;
    width: auto;
    background: #fff;
    font-family: "Lucida Grande",Tahoma,Verdana,Arial,Helvetica,sans-serif; /* setting this to prevent overrride in user stylesheets */
    border: 1px solid #d3d3d3;
    padding: 1px 0;
    margin-right: 5px;
}

.button-link a, .button-link a:visited, .button-link button {
    font-size: 0.85em;
    border-top: 1px solid #fcfdfb;
    border-bottom: 1px solid #dfecfc;
    /*border-left 1px solid #fcfdfb;
    border-right: 1px solid #fcfdfb;*/
    font-weight: bold;
    margin: 0 !important;
    padding: 1px 4px;
    background: #fafafa url(/resources/images/chrome/button-class-background.gif) repeat-x 0 bottom;
    color: #5D5858 !important;
    cursor:pointer;
}

.button-link button {
    width:auto;
    overflow:visible;
    color: #3f6c96;
    border: 0;
    border-bottom: 1px solid #dfecfa;
}

.button-link a:hover, .button-link button:hover {
    background: #fafafa url(/resources/images/chrome/button-class-background-hover.gif) repeat-x 0 bottom;
    border-bottom: 1px solid #c5c8cc;
    text-decoration: none;
}

/*
--------------------------------------
BIG HONKIN ORANGE BUTTON
--------------------------------------
 */
a.big-action,
.big_button {
    font-size: 12px;
    border: 1px solid #ae4600;
    color: #fff;
    padding: 0.3em 0.8em 0.3em 0.8em;
    text-shadow:1px 1px 1px #b02d07;
    background: #fa7c0a url(/resources/images/chrome/sprite-1px-vert.png) repeat-x 0 -450px;
}

.big-action:hover,
.big_button:hover {
    text-decoration: none;
    background-position: 0 -475px;
    background-color: #ffa953;
}

/*
-----------------------------------------
Sign-in box
-----------------------------------------
*/

.signin-box {
    border: 1px solid #a9e9fb;
    background-color: #eefafe;
    padding: 1.5em;
}

.signin-box-header {
    color: #ff7700;
    font-weight: normal;
}

.signin-box fieldset { margin: 1em 0; }

.signin-box .inputset {
    font-size: 1.2em;
    margin: 1em 0em 1em 0;
    
}

.inputset label,
.inputset .Label {
    float:left;
    width: 14em;
    font-weight:bold;
    color: #333;
    margin-top: 0.3em;
}

/*
-----------------------------------------
Badges
-----------------------------------------
*/

.userImage {
    float: left;
    position: relative;
}

.userImage img {
    display: block;
    border: 1px solid #ececec;
    padding: 2px;
    background: #fff;
}

.badge-en-metaweb_staff,
.badge-freebase-badges-freebaseexpert {
    display: block;
    position: absolute;
    left: 3px; bottom: 3px;
    text-indent: -9999px;
    width: 40px;
    height: 7px;
    background: #ff8123 url(/resources/images/chrome/user-badges-new.png) no-repeat 0 0;
    line-height:0;
}

/* we don't want toshow top contributor badges in user thumbnails */
.userImage .badge-freebase-badges-topcontributor {
    display: none;
}

.badge-freebase-badges-freebaseexpert { background-position: -3px -7px; }

.badge-freebase-odesk {
    display: none;
}

.BadgeLabel {
  display: block;
  height: 13px;
  text-indent: -9999px;
  background: url(/resources/images/chrome/user-badges.png) no-repeat;
  overflow: hidden;
  margin-right: 5px;
} 

.Badge-freebase-mwstaff,
.Badge-en-metaweb_staff {
    width: 36px;
}

.Badge-freebase-badges-freebaseexpert {
    width: 43px;
    background-position: 0 -13px;
}

.Badge-freebase-badges-topcontributor {
    width: 50px;
    background-position: 0 -26px;
}

.Badge-pipeline-admin {
    display: none;
}

.vcard { 
    word-wrap: break-word; /* for long usernames */
}
/*
--------------------------------------
Content
--------------------------------------
*/

/* 
Currently being used on query.html, search.html, and domains.html.
Will remove when those templates are updated 
*/
#columnContainer {
    padding-left: 270px;
    padding-top: 10px;
}

/*Columns and gutters*/

#rightGutter {
    margin-left: 68%;
    position: relative;
    min-height: 400px;
    width: 30%;
}

* html #rightGutter {
    top: -1px;
    height: 400px;
}

/*for left gutter layout*/

#bigRightColumn,
#leftGutter {
    float: left;
    position: relative;
}

#leftGutter {
    width: 270px;
    right: 270px;
    margin-right: -100%;
}

#leftGutterContent {
    margin: 0 20px 10px 0;
    width: 250px;
}

#bigRightColumn { width: 100%; }

/*for fullpage layout*/
#redfullPage,
#fullPage {
    padding: .5em 40px 20px 0px;
    margin: 0px;
}

#redfullPage #messagesArea,
#fullPage #messagesArea {
    margin-top: 0px;
}

/* for three column layout*/

#leftColumn {
    float: left;
    position: relative;
    z-index: 3;
    width: 225px;
    margin-right: -100%;
    right: 244px;
}

#contentContainer {
    margin-right: 284px;
}

#centerColumn {
    float: left;
    position: relative;
    width: 100%;
    z-index: 2;
}

#rightColumn {
    float: left;
    position: relative;
    z-index: 1;
    width: 239px;
    left: 30px;
    margin-right: -100%;
}

.EmptyUserImage { background: #fff url(/resources/images/chrome/empty-user-image.png) no-repeat 2px 2px; }

.domain-label-header {
    position: relative;
    background: #ff8123;
    border-bottom: 1px solid #dc5800;
}

#domain-title {
    display: block;
    font-size: 2.1em;
    font-weight: normal;
    padding: 0.55em 30px;
    color: #fff;
    margin-bottom: 0;
}

#domain-header-link:hover {
    text-decoration: none;
}