body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #e1fafa;
}
.table-hover > tbody > tr:hover {
  background-color: #00ffff;
}
/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

#loading {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8);
    z-index: 1000;
}

#loadingcontent {
    display: table;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#loadingspinner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    text-align: center;
    font-size: larger;
    padding-top: 80px;
}



#menu h2 {
    font-size: 1em;
    text-transform: uppercase;
    padding: 5px 10px;
}

#template img {
    margin: 5px 20px 0 0;
    float: left;
}

#template {
    width: 380px;
}

    #template ol {
        float: left;
        margin: 0 0 0 30px;
        padding: 10px 10px 0 10px;
    }

    #template:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    #template .k-button {
        float: left;
        clear: left;
        margin: 5px 0 5px 12px;
    }