/**
 * Less Stylesheet
 *
 * @project
 * P2534 OPE
 *
 * @version
 * 1.0 (May 2012), @author: Weber Lukas, PF52-22
 *
 * @copyright
 * Copyright (C) 2000 - 2012 by The Swiss Post, PostFinance - All rights reserved.
 * Adapted from Bootstrap, http://twitter.github.com/bootstrap
 */

// normalize
@import "../modules/reset.less";

// core variables and structure
@import "../modules/variables.less";
@import "../modules/mixins.less";
// @import "../modules/scaffolding.less";
@import "../modules/grid.less";
@import "../modules/layouts.less";
@import "../modules/pf-colors.less";

@import "../modules/tooltip.less";

#ope {
    // modules
    @import "../modules/forms.less";
    @import "../modules/accordion.less";
    @import "../modules/buttons.less";
    @import "../modules/checkboxes.less";
    // @import "../modules/slider.less";
    @import "../modules/tabs.less";
    @import "../modules/tiles.less";
    @import "../modules/radios.less";
    @import "../modules/representations.less";

    // OPE subfiles
    @import "ope-triage.less";
    @import "ope-buehne.less";
    @import "ope-karussell.less";
    @import "ope-tabelle.less";
}

/* ===== Theme Styles ================================== */

// OPE Colors
// -------------------------
@btnShadowYellow:    #D3A900;
@labelGray:          #888;
@btnShadowGrey:      #BBB;
@stepCompleted:      #DED5B1;

// Scaffolding
// -------------------------
@bodyBackground:        @pfWhite;
@textColor:             @pfBlack;
@focusColor:            @pfFocus;

// Typography
// -------------------------
/* base */
@baseFontSize:          11px;
@baseFontFamily:        Verdana, Arial, Helvetica, sans-serif;
@baseFontWeight:        400;
@baseLineHeight:        13px;

/* page headings */
@pageTitleFontSize:     15px;
@pageTitleFontWeight:   700;
@pageTitleFontColor:    @pfBlackFont;

/* paragraph headings */
@paragraphFontSize:     11px;
@paragraphFontColor:    @pfBlack;
@paragraphFontWeight:   700;


/* ===== Module settings ================================== */

// Forms
// -------------------------
@inputBackground:         @bodyBackground;
@inputBorder:             @pfGrayMedium02;
@inputBorderRadius:       0;
@inputDisabledBackground: #eee;
@inputDisabledBorder:     #ddd;

// Buttons
// -------------------------
@btnBackground:         @pfYellow;
@btnBackgroundHover:    @pfYellow;
@btnShadow:             @btnShadowYellow;
@btnColor:              @pfBlack;
@btnLabelWeight:        700;
@btnLabelSpacing:       0px;

// Checkboxes
// -------------------------
@checkboxBackground:    #fdfdfd;
@checkboxLabelColor:    @pfBlack;
@checkboxWidth:         350px;
@checkboxImgWidth:      19px;
@checkboxImgHeight:     19px;

// Slider
// -------------------------
@sliderThumbWidth:      30px;
@sliderThumbHeight:     16px;
@sliderWidth:           150px;
@sliderBorder:          @grayLighter;
@sliderShadow:          #ccc;

// Accordion Styles
// -------------------------
@accordionWidth:            796px;
@accordionBodyFontColor:    @pfBlack;
@accordionBodyFontSize:     12px;
@accordionTitleFontColor:   @pfBlack;
@accordionTitleFontSize:    12px;
@accordionHeadColor:        @pfYellowMedium;
@accordionHeadHColor:       @pfYellowMedium;
@accordionBodyColor:        @pfWhite;
@accordionShadow:           1px 1px 2px 0 rgba(200, 200, 200, 0.5);
@accordionBorder:           1px solid @grayLighter;

// Tabs
// -------------------------
@tabWidth:              150px;
@tabBackground:         @pfGrayLight01;
@tabHBackground:        @pfGrayLight01;
@tabBackgroundActive:   @pfWhite;
@tabContentBackground:  @tabBackgroundActive;
@tabBorder:             1px solid @pfGrayMedium01;
@tabContentBorder:      @tabBorder;
@tabTitleFontSize:      12px;
@tabTitleFontWeight:    400;
@tabTitleFontColor:     @pfBlack;
@tabBodyFontColor:      @pfBlack;

// Tooltips
// -------------------------
@tooltipBorderRadius:       0;
@tooltipBackgroundColor:    #ffea91;
@tooltipBorderColor:        #c90;
@tooltipBorder:             1px solid @tooltipBorderColor;
@tooltipFontColor:          @pfBlack;
@tooltipPadding:            5px;
@tooltipOpacity:            100;


// GRID
// --------------------------------------------------
// Default grid (796px)
@gridColumns:           5;
@gridColumnWidth:       119px;
@gridGutterWidth:       20px;
@gridRowWidth:          (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// Fluid grid
// -------------------------
@fluidGridColumnWidth:  19%;
@fluidGridGutterWidth:  1.25%;


/* ===== Custom styles ==================================== */

.tab-focus() {
  // outline: 2px solid @focusColor;
}


/* ===== OPE styles ==================================== */
#ope {
    
    width: 595px;
    height: auto;
    
    // table layout fix for IE
    th, td {
        text-align: left;
    }
    
    a {
        
        &:focus {
            outline: none;
            outline-offset: 0;
        }
        
        &.arrange-date, &.restart-ope {
            color: @pfGrayDark02;
            text-decoration: underline;
        }
    }
    
    .single-list-link {
        background: url("/img/icons.gif") no-repeat scroll 0 -11144px transparent;
        margin-bottom: 0.18em;
        margin-top: 13px;
        padding-left: 17px;
    }
    
    .totally-hidden {
        display: none !important;
    }
    
    .checkbox-postfinance {
        background-color: transparent;
        width: auto;
    }
    
    .tooltip-postfinance {
        & span, & a {
            background-image: url(../../img/ope/info.gif);
            background-position: 0 0;
            background-repeat: no-repeat;
            height: 13px;
            width: 13px;
            margin: 0 0 0 3px;
            padding: 0;
            position: relative;
            top: 1px;
        }
    }
}