﻿/************/
/* source: http://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap

    Nesting Kendo UI widgets and Bootstrap Grid layout
    
    Kendo UI uses the default content-box box model (box-sizing CSS property), while Bootstrap uses the non-default bordex-box model and applies it to all 
    elements on the page, including ones that are unrelated to Bootstrap. This breaks the layout of the Kendo UI widgets, which are placed inside a Bootstrap 
    grid layout, forcing us to override the Bootstrap CSS and reapply the content-box box model to Kendo UI widgets. As a result, a Bootstrap grid layout 
    placed inside a Kendo UI widget will not work as expected. In general, 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.

/************/

/* 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;
}