<div id="theme_preview_container">
    <div id="theme_preview"></div>
    <span id="rightblock-example" style="display:none;"></span>
    <span id="dialog-example" style="display:none;"></span>
    <span id="ledger-example" style="display:none;"></span>
    <span id="blue-example" style="display:none;"></span>
    <span id="red-example" style="display:none;"></span>
    <span id="calendar_state70-example" style="display:none;"></span>
    <span id="calendar_state60-example" style="display:none;"></span>
    <span id="calendar_state50-example" style="display:none;"></span>
    <span id="calendar_state40-example" style="display:none;"></span>
    <span id="calendar_state30-example" style="display:none;"></span>
    <span id="calendar_other-example" style="display:none;"></span>

    <p>
        {include file='r/select-only.tpl' name="theme"
            list=$user_options_themes id="key" text="text"
            noempty=1 default="untermStrich_default"}
        <span class="dialog_make_btn16 ok ui-corner-all smallbtns" title="{$i.useroptions_use_theme}"
            onclick="userOptions.themes.use('{$user_options_my_id}');"></span>
    </p>
</div>

<fieldset class="borderbottom theme_settings_container" style="margin-top: 0;">
    {include file='r/select_font.tpl' name="font" title='useroptions_font'
        list=$user_options_fonts id="item" text="key"
        default=$user_options_font
        noempty=1 add_iconsleft_file='user_option_all'}

    {include file='r/checkbox.tpl' name="font_smoothing" title="useroptions_font_smoothing"  checknobrk=true
        default=$user_options_font_smoothing 
        add_iconsleft_file='user_option_all'}

    {include file='r/select_font_size.tpl' name="font_size" title='useroptions_font_size'
        list=$user_options_font_sizes id="item" text="key"
        default=$user_options_font_size
        noempty=1 add_iconsleft_file='user_option_all'}

    {include file='r/select_font_size.tpl' name="font_size_mobile" title='useroptions_font_size_mobile'
        list=$user_options_font_sizes id="item" text="key"
        default=$user_options_font_size_mobile
        noempty=1 add_iconsleft_file='user_option_all'}

    {include file='r/input.tpl' name="colour_font" title='useroptions_colour_font' default=$user_options_colour_font add_iconsleft_file='user_option_all'}

    {include file='r/input.tpl' name="colour_blue" title='useroptions_colour_blue' default=$user_options_colour_blue add_iconsleft_file='user_option_all'}

    {include file='r/input.tpl' name="colour_red" title='useroptions_colour_red' default=$user_options_colour_red add_iconsleft_file='user_option_all'}

</fieldset>
    
<fieldset class="borderbottom theme_settings_container">
    {include file='r/input.tpl' name="colour_content" title='useroptions_colour_content' default=$user_options_colour_content add_iconsleft_file='user_option_all'}

    {include file='r/input.tpl' name="colour_dialog" title='useroptions_colour_dialog' default=$user_options_colour_dialog add_iconsleft_file='user_option_all'}

    {include file='r/input.tpl' name="colour_ledger" title='useroptions_colour_ledger' default=$user_options_colour_ledger add_iconsleft_file='user_option_all'}

    {include file='r/input.tpl' name="colour_side" title='useroptions_colour_side' default=$user_options_colour_side add_iconsleft_file='user_option_all'}

    {include file='r/input.tpl' name="colour_bg" title='useroptions_colour_bg' default=$user_options_colour_bg add_iconsleft_file='user_option_all'}

    {include file='r/input.tpl' name="colour_border" title='useroptions_colour_border' default=$user_options_colour_border add_iconsleft_file='user_option_all'}
</fieldset>
    
<fieldset class="borderbottom theme_settings_container">
    {include file='r/input_range.tpl' name="bg_opacity" title='useroptions_bg_opacity' default=$user_options_bg_opacity 
        min='5' max='100' step='1' add_icons_file='warning' past_span_text='%'
        add_iconsleft_file='user_option_all'}

    {include file='r/input_range.tpl' name="rightblock_width" title='useroptions_rightblock_width' default=$user_options_rightblock_width
        min='5' max='40' step='1' add_icons_file='warning' past_span_text='%'
        add_iconsleft_file='user_option_all'}
</fieldset>
    
<fieldset class="borderbottom theme_settings_container">
    {include file='r/input.tpl' name="colour_calendar_state70" title='useroptions_calendar_state70' default=$user_options_calendar_state70 add_iconsleft_file='user_option_all'}
    {include file='r/input.tpl' name="colour_calendar_state60" title='useroptions_calendar_state60' default=$user_options_calendar_state60 add_iconsleft_file='user_option_all'}
    {include file='r/input.tpl' name="colour_calendar_state50" title='useroptions_calendar_state50' default=$user_options_calendar_state50 add_iconsleft_file='user_option_all'}
    {include file='r/input.tpl' name="colour_calendar_state40" title='useroptions_calendar_state40' default=$user_options_calendar_state40 add_iconsleft_file='user_option_all'}
    {include file='r/input.tpl' name="colour_calendar_state30" title='useroptions_calendar_state30' default=$user_options_calendar_state30 add_iconsleft_file='user_option_all'}
    <hr />
    {include file='r/input.tpl' name="colour_calendar_other" title='useroptions_calendar_other' default=$user_options_calendar_other add_iconsleft_file='user_option_all'}
    <hr />
    {include file='r/input.tpl' name="colour_calendar_font" title='useroptions_colour_font' default=$user_options_calendar_font add_iconsleft_file='user_option_all'}
</fieldset>
