/*
    http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap

    Kendo UI uses the default content-box box model (box-sizing CSS property), while Bootstrap uses the non-default border-box model and applies it
    to all elements on the page, including the ones that are unrelated to Bootstrap. This breaks the layout of the Kendo UI widgets, which are 
    placed inside a Bootstrap grid layout, leading to the overriding of the Bootstrap CSS and reapplying the content-box box model to the widgets. 
    As a result, a Bootstrap grid layout, placed inside a Kendo UI widget, is not going to work as expected. 
    In general, the multiple-level nesting of the two products is bound to break the one that is on the inside, unless an additional CSS rule is used 
    for each new level of nesting.

    A possible easy workaround is to override the Bootstrap CSS, apply the content-box box model to all elements on the page and use a border-box box model 
    only to the Bootstrap elements which need it. These are all .col-... classes, .row, .container, .container-fluid and form-control.

    You can add the following CSS rules after the Bootstrap and Kendo UI stylesheets.

*/


/* reset everything to the default box model */

*, :before, :after
{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/* set a border-box model only to elements that need it */

.form-control, /* if this class is applied to a Kendo UI widget, its layout may change */
.container,
.container-fluid,
.row,
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/*

    The form-control Bootstrap CSS class is normally added to textboxes to apply borders, padding, background, and font styles. 
    However, some Kendo UI widgets copy the custom CSS classes of their originating <input> elements to the widget wrapper element. 
    This results in an incorrect padding style applied to a widget element that is not intended to have such. 
    Also, .form-control defines a 100% width style, which the widgets may override. 
    Finally, the .form-control class applies height, border and other styles that may interfere with the Kendo UI styling.

    To resolve this issue, follow some of the possible solutions below.

    Solution 1: Place the Bootstrap stylesheet before the Kendo UI stylesheet, so that same-specificity Kendo UI selectors can take precedence.
    Solution 2: Use custom CSS to fix any other outstanding issues, as demonstrated in the example below.

*/

.form-control.k-widget
{
    padding: 0;
    width: 100%;
    height: auto;
}

.form-control.k-widget:not(.k-autocomplete)
{
    border-width: 0;
}