/**
 * components.css
 *
 * Buttons, inputs, tab bars. Basically everything that can appear in multiple blocks.
 *
 * @author  Gabor Babicz
 * @version 1.0
 * @see     http://neoatlantica.com/
 */



/**
 * Icons
 *
 */
.ui-icon { text-indent: -9999px; width: 25px; height: 25px; border: none; vertical-align: middle; display: inline-block; *display: inline; *zoom: 1; background-position: center center; background-repeat: no-repeat; background-color: transparent; }
button.ui-icon { cursor: pointer; }

.ui-icon.cross { width: 20px; height: 20px; background-image: url(icon.cross.png); }
.ui-icon.cross.small { margin-left:7.5px;width: 15px; height: 15px; background-image: url(icon.cross-small.png); }
.ui-icon.cross.filled { background-image: url(icon.cross-filled.png); }

.ui-icon.stat { background-image: url(icons.apps.png); background-position: left top; }
.ui-icon.diary { background-image: url(icons.apps.png); background-position: left -50px; }
.ui-icon.media { background-image: url(icons.apps.png); background-position: left -100px; }

.ui-icon.search { width: 17px; height: 17px; background-image: url(icon.search.png); }

.ui-icon.in_button { width: 25px; height: 25px; background-image: url(icons.button.png); background-position: left top; }

.ui-icon.in_button.checkmark { background-position: left top; }
.ui-icon.in_button.cross { background-position: left -23px; }
.ui-icon.in_button.warning { background-position: left -49px; }
.ui-icon.in_button.message { background-position: left -73px; }
.ui-icon.in_button.list { background-position: left -123px; }



/**
 * Inputs
 *
 */
input { font-family: Helvetica, Arial, sans-serif; color: #4d6d4e; }
input[type="text"], input[type="password"], textarea { font-size: 15px; font-family: Helvetica, Arial, sans-serif; color: #4d6d4e; }



/**
 * Inner label
 *
 */
.js-inner_label { position: relative; overflow: hidden; }
.js-inner_label label { cursor: text; width: 100%; height: 100%; left: 0; top: 0; display: block; position: absolute; z-index: 1; }



/**
 * Collapsable box
 *
 */
.js-collapsable { }
.js-collapsable .js-collapsable-controller { padding-bottom: 5px; background: transparent url(bg.js-collapsable-controller.png) no-repeat right 5px; }
.js-collapsable .js-collapsable-controller > * { margin-bottom: 0; }
.js-collapsable .js-collapsable-controller a { color: #507353; }
.js-collapsable .js-collapsable-content { padding-top: 10px; border-top: 1px solid #e6ede6; }
.js-collapsable.collapsed .js-collapsable-controller { background-position: right -48px; }
.js-collapsable.collapsed .js-collapsable-content { display: none; }



/**
 * System notification
 *
 */
.ui-systemnotification { position: relative; text-align: center; color: #90862a; }
.ui-systemnotification .cont { margin: -2px 0; position: relative; z-index: 1; background-color: #faf3b6; }
.ui-systemnotification .cont img { margin-right: 10px; vertical-align: -15%; }
.ui-systemnotification .icon a { right: 7px; top: 7px; width: 14px; height: 14px; overflow: hidden; z-index: 2; display: block; position: absolute; text-indent: -1000px; background: url(icon.cross-small-systemnotification.png); }
.ui-systemnotification .tl { margin-right: 7px; background: transparent url(bg.ui-systemnotification.png); }
.ui-systemnotification .tr { right: -7px; height: 7px; position: relative; background: transparent url(bg.ui-systemnotification.png) right top; }
.ui-systemnotification .bl { margin-right: 7px; background: transparent url(bg.ui-systemnotification.png) left bottom; }
.ui-systemnotification .br { right: -7px; height: 7px; position: relative; background: transparent url(bg.ui-systemnotification.png) right bottom; }



/**
 * Buttons
 *
 */

.ui-button { background: url(bg.ui-buttons.png) right top no-repeat; color: #fff; font-size: 18px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; margin: 0; border: 0; padding: 0 10px 0 0; cursor: pointer;text-decoration: none; text-align: center; outline: none; display: inline-block; }
.ui-button span { height: 40px; line-height: 40px; padding: 0 0 0 10px; background: url(bg.ui-buttons.png) left top no-repeat; position: relative; display: inline-block; white-space: nowrap; }
.bk_nli-home .intro .ui-button, .bk_nli-home .intro .ui-button span { background-image: url(bg.ui-buttons-black.png); }

.ui-button.small { background-position: right -50px; font-size: 15px; }
.bk_user-friends-view .friend .actions .ui-button, .bk_user-children-view .actions .ui-button { margin-bottom: 5px; text-align: left; }

/* GABOR PLEASE REPAIR, kisses, mom */
/* .bk_user-friends-view .friend .actions .ui-button span, .bk_user-children-view .actions .ui-button span { width: 190px; } */
.bk_user-children-view .actions .ui-button span { width: 190px; }
.bk_user-friends-view .friend .actions .ui-button span { width: 180px; }

.ui-button.small span { height: 30px; line-height: 30px; background-position: left -50px; }
.ui-button.small span.ui-icon.in_button { background-image: url(icons.button3.png); background-repeat: no-repeat; height: 30px; width: 20px; display: inline-block; float: left; }

.ui-button.smaller { background-position: right -100px; font-size: 15px; }
.ui-button.smaller span { height: 24px; line-height: 24px; background-position: left -100px; }

.ui-button.tiny { background-position: right -150px; font-size: 13px; }
.ui-button.tiny span { height: 20px; line-height: 20px; background-position: left -150px; }

.ff3 button.ui-button, .win.webkit button.ui-button { padding-right: 7px; }
.ff3 button.ui-button span, .win.webkit button.ui-button span { margin-top: -1px; }
.ie7 button.ui-button { position: relative; top: -2px; width: auto; overflow: visible; }
.ie7 button.ui-button span { position: relative; top: -1px; margin-top: 1px; }

.ui-switchbutton { position: relative; vertical-align: middle; display: inline-block; *display: inline; *zoom: 1; cursor: pointer; font-size: 18px; line-height: .9em; color: #fff; }
.ui-switchbutton { font-size: 15px; }
.ui-switchbutton > * { margin-right: 12px; display: block; text-decoration: none; cursor: pointer; color: #3cbcaf; background: url(bg.ui-switchbutton.png) no-repeat left top; }
.ui-switchbutton > * > strong { right: -12px; padding: 12px 12px 0 0; padding-top: 3px; height: 21px; line-height: normal; position: relative; text-align: center; display: block; background: url(bg.ui-switchbutton.png) no-repeat right top; }
.ui-switchbutton > * > strong, x:-moz-any-link, x:default { padding-top: 4px; *padding-top: 3px; height: 20px; *height: 21px; }

.ui-switchbutton.on > * { background-position: left -50px; }
.ui-switchbutton.on > * > strong { background-position: right -50px; }



/**
 * Tabs
 *
 */
.ui-tabs li { margin-right: 3px; padding-right: 10px; float: left; }
.ui-tabs a { display: block; text-decoration: none; font-weight: bold; cursor: pointer; color: #fff; background: url(bg.ui-tabs.png) no-repeat left top; }
.ui-tabs span { right: -10px; padding: 7px 10px 0 0; height: 23px; position: relative; display: block; background: url(bg.ui-tabs.png) no-repeat right top; }
.ui-tabs .active a { background-position: left -50px; }
.ui-tabs .active span { background-position: right -50px; }



/**
 * Single-line inputs
 *
 */
.ui-textinput { padding: 0; display: inline-block; vertical-align: middle; }
.ui-textinput span { margin-right: 20px; display: block; background: url(bg.ui-inputs.png) no-repeat left top; }
.ui-textinput input { right: -10px; *top: -1px; padding: 9px 10px 0 0; height: 25px; position: relative; display: block; width: 100%; font-weight: bold; border: none; background: url(bg.ui-inputs.png) no-repeat right top; }
html.gecko .ui-textinput input { padding-top: 5px; height: 29px; }
.bk_user-datasheet .ui-textinput input { *width: auto; }
.ui-textinput.error span { background-position: left -50px; }
.ui-textinput.error input { background-position: right -50px; }

.ui-textinput.large span { background-position: left -100px; }
.ui-textinput.large input { padding: 15px 10px 0 0; height: 29px; background-position: right -100px; }
html.gecko .ui-textinput.large input { padding-top: 4px; height: 40px; }
.ui-textinput.large.error span { background-position: left -150px; }
.ui-textinput.large.error input { background-position: right -150px; }

.ui-textinput.search span { margin-right: 10px; background-position: left -200px; }
.ui-textinput.search input { padding: 5px 10px 0 0; height: 20px; font-weight: normal; background-position: right -200px; }
html.gecko .ui-textinput.search input { padding-top: 2px; height: 23px; }
.ui-textinput.search.error span { background-position: left -150px; }
.ui-textinput.search.error input { background-position: right -150px; }



/**
 * Textarea
 *
 */
.ui-textarea { vertical-align: top; position: relative; display: inline-block; *display: inline; *zoom: 1; }
.ui-textarea .ui-textarea-tl { margin: 0 5px 0 0; display: block; background: url(bg.ui-textarea.png) left top; }
.ui-textarea .ui-textarea-tr { height: 5px; left: 5px; *margin-bottom: -1px; position: relative; display: block; background: url(bg.ui-textarea.png) right top; }
.ui-textarea .ui-textarea-bl { margin-right: 5px; display: block; background: url(bg.ui-textarea.png) left bottom; }
.ui-textarea .ui-textarea-br { height: 5px; left: 5px; *margin-top: -1px; position: relative; display: block; background: url(bg.ui-textarea.png) right bottom; }
.ui-textarea .ui-textarea-outerwrap { display: block; zoom: 1; overflow: hidden; background: #c7ddc7; }
.ui-textarea .ui-textarea-innerwrap { margin: 0 10px; display: block; overflow: hidden; zoom: 1; }
.ui-textarea textarea { margin: 0; *margin-left: -10px; padding: 5px 0; width: 100%; display: block; overflow: auto; resize: none; position: relative; border: none; background: none; background-color: #c7ddc7; }
.ui-textarea textarea { overflow-y: auto; border: 1px solid #c7ddc7; }
/*.bk_user-datasheet .ui-textarea .ui-textarea-tr, .bk_user-datasheet .ui-textarea .ui-textarea-br { *left: 135px; *width: 5px; }
.bk_invite .ui-textarea .ui-textarea-tr, .bk_invite .ui-textarea .ui-textarea-br { *width: 5px; *left: 505px; }
*/

/**
 * Pager
 *
 */
.ui-roundedrect .tl { margin-right: 20px; background: transparent url(bg.ui-roundedrect.png); }
.ui-roundedrect .tr { height: 20px; right: -20px; position: relative; background: transparent url(bg.ui-roundedrect.png) right top; }
.ui-roundedrect .bl { margin-right: 20px; background: transparent url(bg.ui-roundedrect.png) left bottom; }
.ui-roundedrect .br { height: 20px; right: -20px; position: relative; background: transparent url(bg.ui-roundedrect.png) right bottom; }
.ui-roundedrect .cont { border-left: 3px solid #e6ede6; border-right: 3px solid #e6ede6; padding-bottom: 1px; }
.ui-roundedrect .cont > * { top: -8px; margin-bottom: -17px; position: relative; z-index: 1; }



/**
 * Pager
 *
 */
.ui-pager { clear: both; margin: 10px 0; position: relative; text-align: center; font-weight: bold; }
.ui-pager a { padding: 3px 4px; text-decoration: none; color: #3bbcaf; }
.ui-pager > a { padding: 0; }
.ui-pager > a:hover { text-decoration: underline; }
.ui-pager span a:hover { color: #fff; background-color: #567556; }
.ui-pager .l { position: absolute; left: 0; }
.ui-pager .r { position: absolute; right: 0; }
.ui-pager .active { color: #fff; background-color: #567556; }
.bk_search-advanced .ui-pager { clear: both; margin: 10px 0; }

/** Forum bubble
*/
.ui-forum_bubble { padding: 7px 5px 0 0; width: 40px; height: 31px; text-align: center; font-size: 11px; line-height: 1.1em; color: #fff; background: transparent url(bg.ui-forum_bubble.png); }
.ui-forum_bubble strong { display: block; }
.ui-forum_bubble.orange { background-position: left top; }
.ui-forum_bubble.yellow { background-position: left -50px; }
.ui-forum_bubble.green { background-position: left -100px; }
.ui-forum_bubble.gray { background-position: left -150px; }


/**
 * Share this
 *
 */
.ui-sharethis { height: 45px; }
.ui-sharethis a { height: 45px; display: block; font-size: 13px; line-height: 13px; background: url(bg.outline.double_line.png) left; }
.ui-sharethis span { margin-left: 23px; padding: 8px 20px 0 0; height: 37px; display: block; background: url(bg.outline.double_line.png) right; }
.ui-sharethis strong { display: inline-block; zoom: 1; *display: inline; vertical-align: middle; }
.ui-sharethis img { margin-left: 10px; vertical-align: middle; }
.ui-sharethis.plain a { float: right; height: auto; background: none; }
.ui-sharethis.plain span { height: auto; background: none; }


/**
 * Badge
 *
 */
.ui-badge { right: -5px; top: -3px; height: 21px; width: 11px; z-index: 12; display: block; position: absolute; font-size: 13px; font-weight: bold; color: #fff; background: url(badge.bg.png) right top; }
.ui-badge ins { top: 0; right: 11px; padding: 3px 0 0 0; min-width: 11px; height: 18px; display: block; position: absolute; background: url(badge.bg.png) left top; }
.ui-badge b { margin-right: 4px; left: 7px; display: block; position: relative; }
:hover .ui-badge { color: #fff; }



/**
 * Profile heading
 *
 */
.pt-profile-heading-small { margin-bottom: 20px; padding-top: 10px; position: relative; }
.pt-profile-heading-small img { float: left; }
.pt-profile-heading-small .c { margin-left: 100px; }
.pt-profile-heading-small .ui-tabs { left: 100px; right: 0; bottom: 0; position: absolute; border-bottom: 1px solid #e6ede6; }