.F-popUpLayer {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.F-popUpLayer>* {
    pointer-events: auto;
}

.F-popUpLayer>.modal {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.F-popUpLayer.basic {
    z-index: 1000;
}

.F-popUpLayer.top {
    z-index: 1001;
}

.F-popUpLayer.periphery {
    z-index: 1002;
}

/********************************/

.disabled {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

*.disabled .hover {
    display: none;
}

/************* F-Button ***********/
.F-Button {
    display: inline-block;
    position: relative;
    font-size: 20px;
    font-weight: bold;
    vertical-align: middle;
    width: 160px;
    height: 66px;
    background-image: url("../imgs/main_ui/btn_green_s.png");
	text-decoration: none;
}

.F-Button>.label, .F-PageCtrl>.label {
    display: block;
    line-height: 60px;
    white-space: nowrap;
    text-align: center;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8)
}

.F-Button.norm {
    -webkit-border-image: url("../imgs/btn_normal.png") 5 5 7 5 stretch;
    -moz-border-image: url("../imgs/btn_normal.png") 5 5 7 5 stretch;
    -o-border-image: url("../imgs/btn_normal.png") 5 5 7 5 stretch;
    border-image: url("../imgs/btn_normal.png") 5 5 7 5 stretch;
    border-style: solid;
    border-width: 10px 10px 14px 10px;
    width: auto;
    height: 28px;
    font-size: 16px;
    background-color: #576036;
    background-image: none;
    background-clip: padding-box;
}

.F-Button.norm > .label {
    line-height: 25px;
    vertical-align: middle;
    padding: 0 20px;
    color: #d0d897;
}

.F-Button.norm > .hover {
    left : -10px;
    top: -10px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
}

.F-Button.norm.green {
    -webkit-border-image: url("../imgs/btn_green.1.png") 5 5 7 5 stretch;
    -moz-border-image: url("../imgs/btn_green.1.png") 5 5 7 5 stretch;
    -o-border-image: url("../imgs/btn_green.1.png") 5 5 7 5 stretch;
    border-image: url("../imgs/btn_green.1.png") 5 5 7 5 stretch;
    border-style: solid;
    border-width: 10px 10px 14px 10px;
    width: auto;
    height: 20px;
    font-size: 16px;
    background-color: #414622;
    background-image: none;
    background-clip: padding-box;
}

.F-Button.norm.green > .label {
    line-height: 16px;
    vertical-align: middle;
    padding: 0 20px;
    color: #ffe63e;
}

.F-Button.norm.green > .hover {
    left: -10px;
    top: -10px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
}

.F-Button.norm.blue {
    -webkit-border-image: url("../imgs/main_ui/btn_fb_lite.png") 5 5 7 5 stretch;
    -moz-border-image: url("../imgs/main_ui/btn_fb_lite.png") 5 5 7 5 stretch;
    -o-border-image: url("../imgs/main_ui/btn_fb_lite.png") 5 5 7 5 stretch;
    border-image: url("../imgs/main_ui/btn_fb_lite.png") 5 5 7 5 stretch;
    border-style: solid;
    border-width: 10px 10px 14px 10px;
    width: auto;
    height: 28px;
    font-size: 16px;
    background-color: #344b82;
    background-image: none;
    background-clip: padding-box;
}

.F-Button.norm.blue .label {
    color: rgba(255, 255, 255, 0.8);
}

.F-Button.norm.blue.fb {
    background-image: url("../imgs/icons/fb.png");
    background-size: 18px 32px;
    background-position: 5px -4px;
    padding: 0 30px;
}

.F-Button.yellow {
    background-image: url("../imgs/main_ui/btn_yellow_s.png");
}

.F-Button.green>.label {
    color: #c4cb9e;
}

.F-Button.yellow>.label {
    color: #fff8c8;
}

.F-Button.red>.label {
    color: #f48d8d;
}

.F-Button.brown>.label {
    color: #efe652;
}

.F-Button.blue>.label {
    color: #8d8df4;
}

.F-Button.green.large, .F-Button.yellow.large {
    width: 240px;
    height: 66px;
}

.F-Button.green.large {
    background-image: url("../imgs/main_ui/btn_green_b.png");
}

.F-Button.yellow.large {
    background-image: url("../imgs/main_ui/btn_yellow_b.png");
}

.F-Button.brown.large{
    background-image: url("../imgs/main_ui/btn_brown_b.png");
    width: 286px;
    height: 68px;
}

.F-Button.light {
    width: 278px;
    height: 48px;
}

.F-Button.light>.label {
    font-size: 18px;
    line-height: 46px;
}

.F-Button.light:not(.disabled) {
    background-image: url("../imgs/main_ui/btn_green_lite.png");
}

.F-Button.light:not(.disabled)>.label {
    color: rgba(255, 255, 255, 0.8);
}

.F-Button.light.darkGreen:not(.disabled) {
    background-image: url("../imgs/main_ui/btn_darkgreen_lite.png");
}

.F-Button.light.darkGreen:not(.disabled)>.label {
    color: rgba(255, 255, 255, 0.8);
}

.F-Button.light.disabled {
    background-image: url("../imgs/main_ui/btn_disabled_lite.png");
}

.F-Button.light.disabled>.label {
    color: #949494;
}

.F-Button.small {
    background-image: url("../imgs/main_ui/btn_normal_s.png");
    width: 88px;
    height: 50px;
}

.F-Button.small>.label {
    color: #c4cb9e;
    font-size: 18px;
    line-height: 48px;
}

.F-Button.large {
    background-image: url("../imgs/main_ui/btn_normal_b.png");
    width: 206px;
    height: 54px;
}

.F-Button.large>.label {
    color: #c4cb9e;
    font-size: 22px;
    line-height: 52px;
}

.F-Button.huge {
    background-image: url("../imgs/main_ui/btn_normal_h.png");
    width: 246px;
    height: 54px;
}

.F-Button.huge>.label {
    color: #c4cb9e;
    font-size: 20px;
    line-height: 52px;
}

.F-Button.tiny, .F-PageCtrl {
    background-image: url("../imgs/main_ui/btn_green_tiny.png");
    width: 168px;
    height: 46px;
    font-size: 16px;
    color: #bcbc77 ;
}

.F-Button.tiny.dark {
    background-image: url("../imgs/main_ui/btn_dark_green_tiny.png");
}

.F-Button.tiny>.label, .F-PageCtrl>.label {
    font-size: 20px;
    line-height: 44px;
}

.F-Button.tiny.red {
    background-image: url("../imgs/main_ui/btn_red_tiny.png");
}

.F-Button.medium {
    width: 220px;
    height: 66px;
}

.F-Button.medium.red {
    background-image: url("../imgs/btn_m_red.png");
}

.F-Button.medium.blue {
    background-image: url("../imgs/btn_m_blue.png");
}

.F-Button.medium.green {
    background-image: url("../imgs/btn_m_green.png");
}

.F-Button.medium.yellow {
    background-image: url("../imgs/btn_m_yellow.png");
}

.F-Button.search {
    background-image: url("../imgs/button_search.png");
    width: 46px;
    height: 48px;
}

.F-Button.spread {
    background-image: url("../imgs/spread.png");
    width: 34px;
    height: 34px;
}

.F-Button.back {
    background-image: url("../imgs/btn_back.png");
    width: 48px;
    height: 46px;
}

.F-Button.info {
    background-image: url("../imgs/button_i.png");
    width: 46px;
    height: 48px;
}

.F-Button.gold {
    background-image: url("../imgs/btn_gold.png");
    width: 248px;
    height: 64px;
    color: #f6ffc2;
    text-shadow: 1px 2px 0 #363d32;
}

.F-Button.socialMedia {
    position: relative;
    display: inline-block;
    image-rendering: pixelated;
    margin: 0 5px;
    width: 46px;
    height: 50px;
    background-size: 46px 50px;
    background-repeat: no-repeat;
    vertical-align: top;
}

.F-Button.socialMedia.fb {
    background-image: url("../imgs/main_ui/icon_social_fb.png");
}

.F-Button.socialMedia.tw {
    background-image: url("../imgs/main_ui/icon_social_tw.png");
}

.F-Button.socialMedia.ln {
    background-image: url("../imgs/btn_link.png");
}

.F-Button.link {
    background-image: url("../imgs/main_ui/icon_social_link.png");
    width: 156px;
    height: 50px;
    background-size: 156px 50px;
    font-size: 18px;
    color: #dde69d;
}

.F-Button.link span {
    position: relative;
    left: 14px;
    line-height: 45px;
    letter-spacing: -1px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8), 1px -1px 0 rgba(0, 0, 0, 0.8), -1px 1px 0 rgba(0, 0, 0, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.8)
}

    /************* F-Window ***********/
.F-Window {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.F-Window>.bg {
    position: absolute;
    z-index: -1000;
    pointer-events: none;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-border-image: url("../imgs/main_ui/frame_popup.png") 50 25 50 25 repeat;
    -moz-border-image: url("../imgs/main_ui/frame_popup.png") 50 25 50 25  repeat;
    -o-border-image: url("../imgs/main_ui/frame_popup.png") 50 25 50 25 repeat;
    border-image: url("../imgs/main_ui/frame_popup.png") 50 25 50 25  repeat;
    background-color: #262626;
    border-style: solid;
    border-width: 100px 50px 100px 50px;
    border-radius: 30px;
    box-sizing: border-box;
}

.F-Window>.title {
    position: absolute;
    display: block;
    left: 50%;
    transform: translate(-50%, -56px);
    height: 58px;
    text-align: center;
    -webkit-border-image: url("../imgs/main_ui/frame_wnd_title.png") 0 13 0 13 repeat;
    -moz-border-image: url("../imgs/main_ui/frame_wnd_title.png") 0 13 0 13 repeat;
    -o-border-image: url("../imgs/main_ui/frame_wnd_title.png") 0 13 0 13 repeat;
    border-image: url("../imgs/main_ui/frame_wnd_title.png")  0 13 0 13 repeat;
    background: url("../imgs/bg_title3.png") repeat-x;
    background-size: 2px 58px;
    border-style: solid;
    border-width: 0 26px;
    background-clip: padding-box;
    padding: 0 40px;
    color: #8d8e7f;
    white-space: nowrap;
    font-size: 32px;
    font-weight: bold;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}

.F-Window>.F-Button.close {
    position: absolute;
    right: -10px;
    top: -25px;
    background-image: url("../imgs/main_ui/icon_close_tabbed.png");
    width: 58px;
    height: 60px;
}

.F-Window>.content {
    position: relative;
    margin: 21px;
}

.F-Window.light>.title:not(.ribbon) {
    position: static;
    transform: none;
    border: none;
    background: transparent;
    height: auto;
    margin-bottom: -20px;
    color: #818a4a;
    font-size: 18px;
    text-align: center;
}

.F-Window.light>.bg {
    -webkit-border-image: url("../imgs/main_ui/frame_popup_light.png") 3 4 6 4 repeat;
    -moz-border-image: url("../imgs/main_ui/frame_popup_light.png") 3 4 6 4 repeat;
    -o-border-image: url("../imgs/main_ui/frame_popup_light.png") 3 4 6 4 repeat;
    border-image: url("../imgs/main_ui/frame_popup_light.png") 3 4 6 4 repeat;
    background-color: #1c1816;
    border-width: 6px 8px 12px 8px;
    border-radius: 10px;
}

.F-Window.light>.F-Button.close {
    background-image: url("../imgs/main_ui/icon_close.png");
    width: 26px;
    height: 20px;
    right: 10px;
    top: 10px;
}

.close:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.F-Window.light>.F-Button.close:hover>.hover {
    display: none;
}

.F-Window>.title.ribbon {
    transform: translate(-50%, -10px);
    -webkit-border-image: url("../imgs/bg_title.png") 0 42 0 42 repeat;
    -moz-border-image: url("../imgs/bg_title.png") 0 42 0 42 repeat;
    -o-border-image: url("../imgs/bg_title.png") 0 42 0 42 repeat;
    border-image: url("../imgs/bg_title.png") 0 42 0 42 repeat;
    background-image: url("../imgs/bg_title1.png");
    background-size: 2px 84px;
    background-clip: padding-box;
    border-width: 0 84px;
    border-style: solid;
    padding: 0;
    font-size: 24px;
    line-height: 50px;
    height: 84px;
}

#dailyQuest .ribbon{
	min-width: 184px;
}

#newGame .ribbon{
	min-width: 290px;
}

#levelUp .ribbon {
	min-width: 172px;
}

/****** F-TabPage ***********/
.F-Window>.content.F-TabPage {
    margin-top: 0;
}

.F-TabPage>.F-TabSubPage {
    position: absolute;
    left: 0;
    top: 10px;
    width: 100%;
    bottom: 0;
}

.F-TabPage>.F-TabSubPage>.title {
    background-image: url("../imgs/main_ui/btn_tab_dark.png");
    width: 170px;
    text-align: center;
    display: inline-block;
    margin-bottom: -8px;
    margin-left: -3px;
    margin-right: -3px;
}

.F-TabPage>.F-TabSubPage>.title>.label {
    color: #a5a990;
    font-size: 20px;
    line-height: 51px;
    white-space: nowrap;
    text-align: center;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
}

.F-TabPage>.F-TabSubPage.selected>.title {
    background-image: url("../imgs/main_ui/btn_tab_light.png");
    background-size: contain;
}

.F-TabPage>.F-TabSubPage.selected>.title .label {
    color: #d0d4bd;
}
.F-TabPage>.F-TabSubPage.selected>.title>.hover {
    display: none;
}

.F-TabPage>.F-TabSubPage>.content {
    position: relative;
    top: 0;
    width: 530px;
    border-top: 2px solid #4e4f46;
    background-color: #262626;
}

/*************F-List************/

.F-List:not(table,tbody) {
    background-image: url("../imgs/main_ui/list_bg.png");
}

/*************F-ViewStack*************/

.F-ViewStack {
    position: relative;
}

.F-ViewStack>.subView {
    display: none;
}

.F-ViewStack>.subView.selected {
    display: block;
}

/************F-PageCtrl**************/

.F-PageCtrl {
    display: inline-block;
    position: relative;
}

.F-PageCtrl.tiny {
    position: relative;
    width: 50px;
    height: 54px;
}

.F-PageCtrl.tiny.prevPage {
    background-image: url("../imgs/main_ui/switch_left.png");
}

.F-PageCtrl.tiny.nextPage {
    background-image: url("../imgs/main_ui/switch_right.png");
}

.F-PageLabel {
    display: inline-block;
    color: #898c5f;
    width: 100px;
}

/************F-CheckBox************/

.F-SelectAllCtrl, .F-CheckBox, .F-List>.F-ItemRenderer>.checkbox {
    display: inline-block;
    position: relative;
    text-indent: 50px;
    line-height: 38px;
    height: 42px;
    min-width: 40px;
    background-image: url("../imgs/checkbox.png");
    background-size: 40px, 41px;
    color: #91915b;
    font-size: 16px;
}

.F-SelectAllCtrl>.hover, .F-CheckBox>.hover, .F-List>.F-ItemRenderer>.checkbox>.hover {
    width: 15px;
    height: 15px;
    -webkit-border-image: url("../imgs/main_ui/hover_light_lite.png") 6 6 6 6 repeat;
    -moz-border-image: url("../imgs/main_ui/hover_light_lite.png") 6 6 6 6 repeat;
    -o-border-image: url("../imgs/main_ui/hover_light_lite.png") 6 6 6 6 repeat;
    border-image: url("../imgs/main_ui/hover_light_lite.png") 6 6 6 6 repeat;
    border-width: 12px 12px 12px 12px;
}

.F-SelectAllCtrl.selected, .F-CheckBox.selected, .F-List>.F-ItemRenderer.selected>.checkbox {
    background-position-y: -42px;
}

/*****************F-RadioButton****************/

.F-RadioButton {
    display: inline-block;
    position: relative;
    -webkit-border-image: url("../imgs/toggle_button.png") 2 3 3 3 repeat;
    -moz-border-image: url("../imgs/toggle_button.png")  2 3 3 3 repeat;
    -o-border-image: url("../imgs/toggle_button.png")  2 3 3 3 repeat;
    border-image: url("../imgs/toggle_button.png") 2 3 3 3 repeat;
    border-width: 4px 6px 6px 6px;
    border-style: solid;
    background: #373f25;
    background-clip: padding-box;
    padding: 3px 3px;
    color: #888c44;
    text-align: center;
    white-space:nowrap;
}
.F-RadioButton>.hover {
    top: -3px;
    left: -5px;
    width: calc(100% - 17px);
    height: calc(100% - 18px);
    -webkit-border-image: url("../imgs/main_ui/hover_light_lite.png") 6 6 6 6 repeat;
    -moz-border-image: url("../imgs/main_ui/hover_light_lite.png") 6 6 6 6 repeat;
    -o-border-image: url("../imgs/main_ui/hover_light_lite.png") 6 6 6 6 repeat;
    border-image: url("../imgs/main_ui/hover_light_lite.png") 6 6 6 6 repeat;
    border-width: 12px 12px 12px 12px;
}
.F-RadioButton.selected {
    -webkit-border-image: url("../imgs/toggle_button_selected.png") 2 3 3 3 repeat;
    -moz-border-image: url("../imgs/toggle_button_selected.png")  2 3 3 3 repeat;
    -o-border-image: url("../imgs/toggle_button_selected.png")  2 3 3 3 repeat;
    border-image: url("../imgs/toggle_button_selected.png") 2 3 3 3 repeat;
    background: #23251d;
}

/*****************F-TextInput******************/
.F-TextInput {
    -webkit-border-image: url("../imgs/main_ui/standard_field_standard.png") 3 3 5 3 repeat;
    -moz-border-image: url("../imgs/main_ui/standard_field_standard.png") 3 3 5 3 repeat;
    -o-border-image: url("../imgs/main_ui/standard_field_standard.png") 3 3 5 3 repeat;
    border-image: url("../imgs/main_ui/standard_field_standard.png") 3 3 5 3 repeat;
    border-width: 6px 6px 10px 6px;
    display: inline-block;
    border-style: solid;
    height: 30px;
    width: 220px;
}

.F-TextInput input, .F-TextInput textarea {
    height: calc(100%);
    width: calc(100% - 15px);
    font-size: 18px;
    line-height: 18px;
    background: #2C2721;
    padding: 4px;
    color: #898c5f;
}

.F-TextInput.shadowed {
    -webkit-border-image: url("../imgs/main_ui/standard_field.png") 3 4 6 3 repeat;
    -moz-border-image: url("../imgs/main_ui/standard_field.png") 3 4 6 3 repeat;
    -o-border-image: url("../imgs/main_ui/standard_field.png") 3 4 6 3 repeat;
    border-image: url("../imgs/main_ui/standard_field.png") 3 4 6 3 repeat;
    background-color: #2c2721;
    border-width: 6px 8px 12px 6px;
}

.F-TextInput.light {
    -webkit-border-image: url("../imgs/main_ui/standard_field_light.png") 3 3 3 3 repeat;
    -moz-border-image: url("../imgs/main_ui/standard_field_light.png") 3 3 3 3 repeat;
    -o-border-image: url("../imgs/main_ui/standard_field_light.png") 3 3 3 3 repeat;
    border-image: url("../imgs/main_ui/standard_field_light.png") 3 3 3 3 repeat;
    background-color: #403519;
    border-width: 6px 6px 6px 6px;
}

.F-TextInput.light input, .F-TextInput.light textarea {
    color: #edd347;
}

.F-TextInput.dark {
    -webkit-border-image: url("../imgs/main_ui/standard_field_dark.png") 3 3 3 3 repeat;
    -moz-border-image: url("../imgs/main_ui/standard_field_dark.png") 3 3 3 3 repeat;
    -o-border-image: url("../imgs/main_ui/standard_field_dark.png") 3 3 3 3 repeat;
    border-image: url("../imgs/main_ui/standard_field_dark.png") 3 3 3 3 repeat;
    border-width: 6px 6px 6px 6px;
}

.F-TextInput.dark input, .F-TextInput.dark textarea {
    color: #676740;
}

.F-TextInput input::-webkit-input-placeholder,
.F-TextInput textarea::-webkit-input-placeholder,
.F-TextInput input::-moz-placeholder,
.F-TextInput textarea::-moz-placeholder,
.F-TextInput input:-ms-input-placeholder,
.F-TextInput textarea:-ms-input-placeholder {
    color: #555540;
}

.F-Tooltip {
    position: absolute;
    font-size: 16px;
    font-weight: normal;
    max-width: 300px;
    color: #676740;
    padding: 5px 5px 3px;
    background-clip: border-box;
    border-radius: 8px;
    -webkit-border-image: url("../imgs/main_ui/tip_frame.png") 3 3 3 3 repeat;
    -moz-border-image: url("../imgs/main_ui/tip_frame.png") 3 3 3 3 repeat;
    -o-border-image: url("../imgs/main_ui/tip_frame.png") 3 3 3 3 repeat;
    border-image: url("../imgs/main_ui/tip_frame.png") 3 3 3 3 repeat;
    border-style: solid;
    border-width: 6px 6px 6px 6px;
    background-color: #251e1a;
}

/**
* drop down list
*/

.F-DropDownList {
    display: inline-block;
    position: relative;
    -webkit-border-image: url("../imgs/main_ui/standard_field_standard.png") 3 3 5 3 repeat;
    -moz-border-image: url("../imgs/main_ui/standard_field_standard.png") 3 3 5 3 repeat;
    -o-border-image: url("../imgs/main_ui/standard_field_standard.png") 3 3 5 3 repeat;
    border-image: url("../imgs/main_ui/standard_field_standard.png") 3 3 5 3 repeat;
    border-style: solid;
    border-width: 6px 6px 10px 6px;
    -webkit-background-image: url("../imgs/main_ui/dropdown_toggle.png");
    -moz-background-image: url("../imgs/main_ui/dropdown_toggle.png");
    -o-background-image: url("../imgs/main_ui/dropdown_toggle.png");
    background-image: url("../imgs/main_ui/dropdown_toggle.png");
    background-repeat: no-repeat;
    background-position: center right 10px;
    background-color: #2c2721;
    background-clip: padding-box;
    background-size: 14px 10px;
}

.F-DropDownList>.label {
    display: block;
    min-width: 180px;
    height: 28px;
    font-size: 16px;
    color: #898c5f;
    line-height: 30px;
    text-align: left;
    text-indent: 10px;
}

.F-DropDownList.active {
    -webkit-background-image: url("../imgs/main_ui/dropdown_toggle_active.png");
    -moz-background-image: url("../imgs/main_ui/dropdown_toggle_active.png");
    -o-background-image: url("../imgs/main_ui/dropdown_toggle_active.png");
    background-image: url("../imgs/main_ui/dropdown_toggle_active.png");
}

.F-List.forDropDownList {
    position: absolute;
}

.F-ItemRenderer > .info > .amountLabel {
	height: 24px;
	overflow: hidden;
}

.F-List.forDropDownList>.F-ItemRenderer {
    -webkit-border-image: url("../imgs/main_ui/standard_field_dark.png") 3 3 3 3 repeat;
    -moz-border-image: url("../imgs/main_ui/standard_field_dark.png") 3 3 3 3 repeat;
    -o-border-image: url("../imgs/main_ui/standard_field_dark.png") 3 3 3 3 repeat;
    border-image: url("../imgs/main_ui/standard_field_dark.png") 3 3 3 3 repeat;
    border-style: solid;
    background-clip: padding-box;
    border-width: 6px 6px 6px 6px;
    background-color: #2c2721;
    color: #676740;
    font-size: 16px;
    text-indent: 10px;
    line-height: 30px;
    position: relative;
	overflow: hidden;
}

.F-List.forDropDownList>.F-ItemRenderer>.hover {
    left: -6px;
    top: -6px;
    width: calc(100% - 18px);
    height: calc(100% - 18px);
}

.F-List.forDropDownList>.F-ItemRenderer.selected {
    -webkit-border-image: url("../imgs/main_ui/standard_field_light.png") 3 3 3 3 repeat;
    -moz-border-image: url("../imgs/main_ui/standard_field_light.png") 3 3 3 3 repeat;
    -o-border-image: url("../imgs/main_ui/standard_field_light.png") 3 3 3 3 repeat;
    border-image: url("../imgs/main_ui/standard_field_light.png") 3 3 3 3 repeat;
    background-color: #403519;
    color: #edd347;
}

.F-List.forDropDownList>.F-ItemRenderer.selected>.hover {
    display: none;
}

.F-List.forDropDownList>.F-ItemRenderer:hover {
    color: #d1bd4d;
}

/***** F-Prompt *******/

.F-Prompt {
    width: 500px;
    padding: 20px;
    -webkit-border-image: url("../imgs/main_ui/frame_popup_light.png") 3 4 6 4 repeat;
    -moz-border-image: url("../imgs/main_ui/frame_popup_light.png") 3 4 6 4 repeat;
    -o-border-image: url("../imgs/main_ui/frame_popup_light.png") 3 4 6 4 repeat;
    border-image: url("../imgs/main_ui/frame_popup_light.png") 3 4 6 4 repeat;
    -webkit-backface-visibility: hidden;
    background-clip: border-box;
    background-color: #1c1816;
    border-style: solid;
    border-width: 6px 8px 12px 8px;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.F-Prompt>.title, .F-Prompt>.titleText {
    width: 100%;
    text-align: center;
    color: #979846;
    font-size: 20px;
    line-height: 20px;
    margin: 0 0 20px;
}

.F-Prompt>.content {
    text-align: center;
    font-size: 16px;
    color: #ffff87;
    line-height: 24px;
    width: 100%;
}
.F-Prompt>.buttonBar {
    width: 100%;
    margin: 20px 0 0;
    text-align: center;
}

.F-ProgressBar {
    position: relative;
    border: 1px solid #000;
    border-right: 2px solid #383d21;
    border-bottom: 2px solid #383d21;
    background-color: #24260f;
    height: 16px;
    width: 100px;
    display: inline-block;
}

.F-ProgressBar .indicator {
    position: absolute;
    background: url("../imgs/progress_indicator.png") repeat-x;
    background-size: contain;
    left: 0;
    height: 100%;
}

.F-ProgressBar .indicator.second {
    background-image: url("../imgs/progress_indicator.1.png");
}