/* ------ fonts ------ */ 

@font-face{font-family:open_sanslight; src:local(open_sanslight)} 
@font-face{font-family:"Segoe UI Semibold"; src:local("Segoe UI Semibold")} 

@font-face {
    font-family: 'open_sansbold';
    src: url('fonts/opensans/opensans-bold-webfont.eot');
    src: url('fonts/opensans/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans/opensans-bold-webfont.woff') format('woff'),
         url('fonts/opensans/opensans-bold-webfont.ttf') format('truetype'),
         url('fonts/opensans/opensans-bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sanslight';
    src: url('fonts/opensans/opensans-light-webfont.eot');
    src: url('fonts/opensans/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans/opensans-light-webfont.woff') format('woff'),
         url('fonts/opensans/opensans-light-webfont.ttf') format('truetype'),
         url('fonts/opensans/opensans-light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ------ resets ------ */

html, body, div, span, object, iframe,
blockquote, pre, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, 
fieldset, form, label, legend, table, caption, 
tbody, tfoot, thead, tr, th, td, 
canvas, details, figcaption, figure, footer, header,
hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;  
}

/* ------ HTML 5 elements for < IE9 ------ */

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
    margin: 0; 
    padding: 0;
}

/* ------ chrome progress bar ------ */

progress.xp::-webkit-progress-value { 
    background: #31B5F4; 
}

/* ------ layout ------ */

header, footer, main, section, article, .i-row  { float: left; width: 100%; }

.i-col-1, .i-col-2, .i-col-3, .i-col-4, .i-col-5, .i-col-6, .i-col-7, .i-col-8, .i-col-9, .i-col-10, .i-col-11, .i-col-12 { 
    float: left;
    width: 100%;  
    position: relative;   
}

@media (min-width: 1024px) {
    .i-col-12 { width: 100%; }
    .i-col-11 { width: 91.66666667%; }
    .i-col-10 { width: 83.33333333%; }
    .i-col-9 { width: 75%; }
    .i-col-8 { width: 66.66666667%; }
    .i-col-7 { width: 58.33333333%; }
    .i-col-6 { width: 50%; }
    .i-col-5 { width: 41.66666667%; }
    .i-col-4 { width: 33.33333333%; }
    .i-col-3 { width: 25%; }
    .i-col-2 { width: 16.66666667%; }
    .i-col-1 { width: 8.33333333%; }
    .i-col-pull { width: 98%; }
}

/* ------ global ------ */

.h1, .h2, .h3, .h4, .h5, .h6 { -webkit-font-smoothing: subpixel-antialiased; margin: 0; padding: 0; font-weight: normal; -webkit-font-smoothing: antialiased; }

.h1 { line-height: 1.2em; }
.h2 { line-height: 1.1em; }

.i-center { display: block; margin: 0 auto; width: 80%; text-align: left; }

.i-break { float: left; width: 100%; line-height: normal;  }

.i-spacing-tiny { margin: 4px 0; }
.i-spacing-small { margin: 24px 0; }
.i-spacing { margin: 42px 0; }
.i-spacing-2x { margin: 62px 0; }
.i-spacing-3x { margin: 82px 0; }

.i-clear { clear:both; } 
.i-float-left { float: left; }
.i-float-right { float: right; }

.i-list, .i-clear-list { float: left; width: 100%; list-style: none; margin: 0; padding: 0; }
.i-list li { margin: 0; padding: 0; display: block; }
.i-clear-list li { margin: 0; padding: 0; display: inline; }

.i-dimmed { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }
.i-dimmed:hover, 
.i-dimmed a:hover  { opacity: 1.0; }

.i-margin { margin: 12px; padding: 0; }
.i-margin-small { margin: 6px; }
.i-margin-top { margin-top: 12px; }
.i-margin-top-small { margin-top: 6px; }
.i-margin-bottom { margin-bottom: 12px; }
.i-margin-bottom-small { margin-bottom: 6px; }
.i-margin-left { margin-left: 12px; }
.i-i-margin-left-small { margin-left: 6px; }
.i-margin-right { margin-right: 12px; }
.i-margin-right-small { margin-right: 6px; }

.i-align-middle { vertical-align: middle; }
.i-text-align-right { text-align: right; }

.i-inline { display: inline; }
.i-relative { position: relative; }
.i-centered  { text-align: center; }
.i-fixed { position: fixed !important; }
.i-to-upper { text-transform: uppercase; }

.i-pull-in-4x { width: 96%; }
.i-pull-in-3x { width: 97%; }
.i-pull-in-2x { width: 98%; }
.i-pull-in-1x { width: 99%; }

.i-body { line-height: 24px; min-width:480px;}
.i-body a { text-decoration: none; }
.i-body a:hover { text-decoration: underline; }

/* ------ user bar ------ */

.i-user-bar { border-bottom-width: 1px; border-style: solid; line-height: 50px;}
.i-user-bar a { text-decoration: none; }
.i-user-bar .i-margin { padding: 6px 0; margin: 0;  }
.i-user-bar .icon { line-height: normal; }
.i-user-bar .icon .fa { font-size: 16pt; }
.i-user-bar ul { float: right; margin: 0 12px 0 0; padding: 0; list-style: none; }
.i-user-bar ul li { float: right; margin: 0; padding: 0; padding-left: 9px; list-style: none;  }
.i-user-bar ul li.username {  }
.i-user-bar ul li.spacer { float: left; display: block; width: 100%; }
.i-user-bar .mobile-nav li { padding-left: 6px; }
.i-user-bar .mobile-nav .icon .fa { font-size: 18pt; }

/* ------ banner ------ */

.i-banner { border-bottom-width: 1px;  border-style: solid; display:block;}
.i-banner .i-logo { float: left; width: 244px; height: 75px; margin-left: 6px; background-position: center center; background-repeat: no-repeat; }
.i-banner .i-logo-product { float: left; width: 244px; height: 75px; margin-left: 6px; background-position: center center; background-repeat: no-repeat; }
.i-banner .i-logo-customer { float: right; width: 256px; height: 75px; margin-right: 6px; background-position: center right; background-repeat: no-repeat; }
.i-banner .i-logo-spiels { float: right; width: 500px; height: 75px; margin-left: 6px; margin-right: 6px; background-position: center right; background-repeat: no-repeat; }
.i-banner .i-spacing { margin: 42px 0;}

.i-banner-tabs { float: left; margin: 0; padding: 0;  }
.i-banner-tabs li { float: left; display: inline; white-space: nowrap; margin: 0; padding: 0; margin-left: 3px; }
.i-banner-tabs a { float: left; font-weight: bold; text-transform: uppercase; border-width: 1px; border-style: solid; }
.i-banner-tabs a .padding { float: left; padding: 12px 14px; }
.i-banner-tabs a i { font-size: 10pt; }

.i-banner .i-search-input { float: right; width: 600px; margin-top: 12px; }

.i-banner-search {display: inline-block; width: 100%;}
.i-banner-search-wrapper { float: left; width: 100%; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; padding: 12px; background-color:#F0F9FF; margin: 0 0 24px 0; }

/* ------ TabStrip CSS ------ */

.i-tabs { float: left; margin: 0; padding: 0; line-height: normal;  }
.i-tabs li { float: left; display: inline; white-space: nowrap; margin: 0; padding: 0; }
.i-tabs li a { float: left; font-weight: bold; border-width: 1px; border-style: solid; }
.i-tabs li a .padding { display: inline-block; padding: 12px; }
.i-tabs li a:hover, 
.i-tabs  li a.selected { text-decoration:none; }
.i-tabs .btn-group { margin-right: 6px; }
.i-tabs .btn-group a { margin-right: 0; }
.i-tabs .menu-arrow i { width: 10px; }
.i-tabs .menu-arrow {  margin-left: -1px; border-style: solid; }

/* additional tabbed navigation*/

.i-tabs-o { float: left; width: 100%; border: 0; border-bottom-width: 1px; border-style:solid; margin: 0; padding: 0; }
.i-tabs-o li { float: left; display: inline; white-space: nowrap; margin: 0; padding: 0; }
.i-tabs-o li.float-right { float: right; }
.i-tabs-o a { float: left; font-weight: bold; border:0; border-bottom-width: 3px; border-style:solid; border-color:transparent; padding: 0; text-decoration: none; margin: 0 12px; }
.i-tabs-o a .padding { display: inline-block; padding: 14px; }
.i-tabs-o a:hover { text-decoration: none; }
.i-tabs-o li.i-tabs-o-menu { display: none; }
.i-tabs-o .btn-group { margin-right: 6px; }
.i-tabs-o .btn-group a { margin-left:0; margin-right: 0; }

/* ------ PanelBar CSS ------ */  

.i-panel { float: left; width: 100%; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;  }
.i-panel-collapsed { opacity: .6; }

/* -- header - */

.i-panel .i-panel-header { float: left; position: relative; border-style: solid; border-width: 1px; width: 100%; min-width: 100px; transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in;  }
.i-panel .i-panel-header-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-repeat: repeat;}

/* header layout */

.i-panel-header-left { float: left;  position: relative; margin: 12px 9px; }
.i-panel-header-right { float: right; position: relative; margin: 12px 9px; }

/* title text */

.i-panel-header h2 { display: inline-block; margin: 0; padding: 0; }
.i-panel-header a {  text-decoration: none; }
.i-panel-header a:hover { text-decoration: none; }
.i-panel-header h2, 
.i-panel-header h2 a { margin: 0; padding: 0; line-height:normal; }
.i-panel-header a.rss { padding: 0; margin: 12px; filter: alpha(opacity=50); opacity: 0.5; }
.i-panel-header a.rss:hover { filter: alpha(opacity=100); opacity: 1.0;   }

/* expand / collapse button */

.i-panel-header-expand { float: left; opacity: 0.4; cursor:pointer; }
.i-panel-header-expand i {  }
.i-panel-header-expand:hover { opacity: 1; }

/* menus & link collections */

.i-panel-header-options { float: left; line-height:normal; }
.i-panel-header-options a { float: left; padding:9px 12px; border-radius: 2px; margin-left: 6px; border-width: 1px; border-style: solid; }
.i-panel-header-options a .sm-caret { margin-left: 6px; }
.i-panel-header-options a:hover { text-decoration: none; }

/* -- content -- */

.i-panel-content-box { float: left; width: 100%; position: relative; height: auto; border-left-width: 1px; border-top-width: 0; border-right-width: 1px; border-bottom-width: 0; border-style: solid; }
.i-panel-content { float: left; width: 100%; position: relative; margin: 0; padding: 0;  }
.i-panel--content .i-table { float: left; }

/* -- footer -- */

.i-panel .i-panel-footer { float: left; position: relative; height: 6px; width: 100%; border-left-width: 1px; border-top-width: 0; border-bottom-width: 1px; border-right-width: 1px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-style:solid; min-width: 100px;}
.i-panel .i-panel-footer-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0;  }
.i-panel-collapsed .i-panel-footer { display: none; }

/* bulleted navigation list within panel bar control */
.i-panel-nav-list { float: left; width: 100%; margin: 0; padding: 0; }
.i-panel-nav-list li { float: left; width: 100%; margin: 0; padding: 0; display: inline; }
.i-panel-nav-list li a { float: left; width: 100%; }
.i-panel-nav-list li a img { vertical-align: middle; }
.i-panel-nav-list li a .padding { display: block; padding: 9px; }
.i-panel-nav-list li a.selected { font-weight: bold; }
.i-panel-nav-list li a:hover { text-decoration: none; }
.i-panel-nav-list li a i { vertical-align: middle; }
.i-panel-nav-list li a i.arrow { float: right; margin: 6px; opacity: 0.3; }
.i-panel-nav-list li a:hover i { opacity: 1.0; }

/* ------ Menu CSS ------ */

.i-menu-link { display: inline-block; margin: 0; padding: 0; }
.i-menu-group div { float: left; }

.i-menu-box { position: absolute; display: none; z-index: 999998; }
.i-menu-arrow { content: '-'; position: absolute; z-index: 999998; text-indent: -40000px; width: 0; height: 0; display: inline-block; padding: 0; top: -12px; border-left-color: transparent !important; border-top-color: transparent !important; border-right-color: transparent !important; border-style: solid; border-left-width: 12px; border-right-width: 12px; border-bottom-width: 12px }

.i-menu { float: left; width: 100%; border-style: solid; border-width: 1px; padding: 0; margin: 0; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px;  }
.i-menu .menu { float: left; width: 100%; text-align: left; margin: 0; padding: 0; }
.i-menu .menu ul { float: left; width: 100%; margin: 0; padding: 0; text-align: left; }
.i-menu .menu .loading { float: left; display: inline; padding: 9px 0 12px 9px; white-space: nowrap; }
.i-menu .menu li { float: left; width: 100%; display: block;margin: 0; padding: 0; white-space: nowrap; }
.i-menu .menu ul .seperator { float: left; width: 100%; height: 1px; margin: 6px 0;  }
.i-menu .menu .title { float: left; width: 100%; font-weight: bold; }
.i-menu .menu ul li a { float: left; width: 100%; line-height:normal;  text-decoration: none; }
.i-menu .menu li a .padding, 
.i-menu .title .padding { display: block; padding: 11px; overflow: hidden; text-overflow:ellipsis; }
.i-menu .menu li a:hover { text-decoration: none; }
.i-menu .menu-frame { float: left; width: 100%; }
.i-menu .menu-frame iframe { background:transparent; float: left; margin: 0; padding: 0; width: 100%; }
.i-menu .menu li a.close { float: right; width: auto !important; }
.i-menu .menu ul li a.i-btn { float: none; width: auto; }

.i-menu header { border-bottom: 1px solid #444444 !important; margin: 0 0 9px 0 !important; padding: 0 !important; }
.i-menu header h2 { float: left; padding: 12px 0 12px 10px; margin: 0; font: bold 10pt Arial !important; color:#fff !important; }

.i-menu .i-text-box { outline: 0; }

/* menu scrollbar */
.i-menu-box::-webkit-scrollbar { background:#242424; width: 12px; }
.i-menu-box::-webkit-scrollbar-thumb:vertical { margin: 0 12px; background-color: #888; -webkit-border-radius: 0; }
.i-menu-box::-webkit-scrollbar-button:start:decrement,
.i-menu-box::-webkit-scrollbar-button:end:increment { height: 0; display: block; }

/* menu frame scrollbars */
.i-menu-box iframe::-webkit-scrollbar { background:#242424; width: 12px; }
.i-menu-box iframe::-webkit-scrollbar-thumb:vertical { margin: 0 12px; background-color: #888; -webkit-border-radius: 0; }
.i-menu-box iframe::-webkit-scrollbar-button:start:decrement,
.i-menu-box iframe::-webkit-scrollbar-button:end:increment { height: 0; display: block; }

.i-menu-box-animate {     
    -webkit-animation: sm-animate 0.1s ease-out; /* Safari 4+ */
    -moz-animation:    sm-animate 0.1s ease-out; /* Fx 5+ */
    -o-animation:      sm-animate 0.1s ease-out; /* Opera 12+ */
    animation:         sm-animate 0.1s ease-out; /* IE 10+ */
}

@-webkit-keyframes sm-animate {
    0% { margin-top: -10px; opacity: 0;   }
    100% { margin-top: 0;opacity: 1; }
}
@-moz-keyframes sm-animate {
    0% { margin-top: -10px;  opacity: 0;  }
    100% { margin-top: 0; opacity: 1; }
}
@-o-keyframes sm-animate {
    0% { margin-top: -10px;  opacity: 0;  }
    100% { margin-top: 0;opacity: 1; }
}
@keyframes sm-animate {
    0% { margin-top: -10px;  opacity: 0;  }
    100% { margin-top: 0;opacity: 1; }
}

/* ------ Paging ------ */

.i-pager { display: inline-block; }
.i-pager, .i-pager div, .i-pager span { display: inline-block;  } 
.i-pager a { float: left; position: relative; margin: 0 0 0 6px; text-decoration: none; line-height: normal; border-width: 1px; border-style: solid; font-weight: bold;  -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; } 
.i-pager a span { padding: 11px; position: relative; }
.i-pager a .i-pager-bg, 
.i-pager a .i-pager-active-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 0; }
.i-pager a:hover { text-decoration: none; } 
.i-pager a.selected { font-weight: bold; border-width: 1px; border-style: solid; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } 
.i-pager .dots { float: left; position: relative; margin: 0 0 0 6px; text-decoration: none; line-height: normal; border-width: 1px; border-style: solid; border-radius: 2px; transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; }
.i-pager .dots span { padding: 11px 12px 14px 12px; }
.i-pager a.info { border: 0; }

/* jump to page menu shown in some pagers */

.i-jump-to-page-menu { text-align: left; }
.i-jump-to-page-menu .i-text-box, 
.i-jump-to-page-menu .i-text-box:focus { width: 105px !important; }
.i-jump-to-page-menu .i-btn { margin-left: 6px; }
.i-jump-to-page-menu .i-btn span {  padding: 8px 12px; }

/* ------ Bread Crumb CSS ------ */

.i-bread-crumb { float: left;  position: relative; border-width: 1px; border-style: solid; width: 100%; line-height: normal; border-radius: 0; transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in;  }
.i-bread-crumb div { display: inline; }
.i-bread-crumb .i-bread-crumb-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 2px;  background-repeat: repeat; }
.i-bread-crumb ul li.sep { float: left; padding: 0; margin: 0 9px;  }
.i-bread-crumb ul { float: left; width: 100%; position: relative; margin: 0; padding: 0; list-style: none; }
.i-bread-crumb ul li { float: left; margin: 0; padding: 0; list-style: none; }
.i-bread-crumb ul li.first a:before { font-family: 'FontAwesome'; content: '\f015'; font-size: 8pt; margin-right: 6px; display: none; vertical-align: middle; }
.i-bread-crumb ul a { float: left; padding: 0; }
.i-bread-crumb ul a:hover { text-decoration: none; }

.i-mobile-bread-crumb { display: none; line-height: normal; margin-left: 13px; }    
.i-mobile-bread-crumb .bc-bg { display: none; }    
.i-mobile-bread-crumb ul { float: left !important; margin-left: 15px !important; margin-top: 1px; position: relative; }
.i-mobile-bread-crumb ul li { float: left; display: none; margin: 0 !important; padding: 0 !important;  }
.i-mobile-bread-crumb ul li.loading { display: inline; }
.i-mobile-bread-crumb ul li.sep { display: none; }    
.i-mobile-bread-crumb ul li a { float: left; color:#fff; padding: 9px !important; font-size: 8pt; max-width: 85px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-top-right-radius: 2px; border-bottom-right-radius: 2px; }
.i-mobile-bread-crumb ul li a:hover { text-decoration: none;  }
.i-mobile-bread-crumb ul li:nth-last-child(3) { display: inline !important; }              
.i-mobile-bread-crumb ul li:before { position: absolute; top:-4px; left: -15px; font-family: 'FontAwesome'; content: '\f060'; font-size: 36px; width: 15px; overflow: hidden; text-shadow: none; }

/* ------ TreeView CSS ------ */

.i-tree { float: left; width: 100%; white-space: nowrap; line-height: 26px; }
.i-tree ul { width: 100%; list-style: none; margin: 0; padding: 0; }
.i-tree ul li { float: left; width: 100%; margin: 0; padding: 0; line-height: normal; display: flex;}
.i-tree ul li img { display: inline-block; width: 18px; height: 18px; cursor:pointer; vertical-align: middle; margin: 4px 2px; }
.i-tree ul li a  { display: flex; line-height: 26px;  width: auto !important; padding: 0;cursor: pointer; text-decoration: none !important; border: solid 1px transparent; vertical-align: middle; white-space: nowrap; border-radius: 2px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; flex: 1;}
.i-tree ul li a span { float: left; padding: 0 3px;  border-radius: 2px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; flex: 1;}
.i-tree ul li a.prnnode { text-decoration: none;border: solid 1px transparent; } 
.i-tree ul li a.selnode { }
.i-tree ul li a.selprnnode {  }
.i-tree ul li .check { float: left; width: 18px; margin: 6px 6px; vertical-align: middle; }
.i-tree ul li .toggle-icon {  }

/* node edit input & drag gesture */
.i-tree-edit { z-index: 10; font-size: 10pt; color: #666; width: 200px; border: solid 1px #7F9DB9;position: absolute;padding:4px;text-decoration: none; }
.i-tree-gesture { border:#f0f0f0 1px solid; }

/* ------ TreeView Context Menu CSS ------ */

.i-tree-context-menu { padding: 1px; font-family: Verdana, Arial, Tahoma;font-size: 10pt;border: #aaa 1px solid; z-index: 6; position: absolute;  background-color: #f6f6f6;box-shadow: 0px 0px 40px #aaa; }
.i-tree-context-menu .ctxtext { cursor: pointer; color: #444; text-decoration: none; }
.i-tree-context-menu .ctxitem { width: 100%;line-height: normal;cursor: pointer; background-color: #ffffff; }
.i-tree-context-menu .ctxitem a { float: left; line-height: normal; margin: 0; padding: 0px 9px 9px 9px; text-decoration: none; }
.i-tree-context-menu .ctxitem a:hover { color: #fff !important; text-decoration: none; background-color: #A7A8AA;border-radius: 6px; }
.i-tree-context-menu .ctxtextdisable { cursor: pointer; color: #999999; text-decoration: none}
.i-tree-context-menu .ctxtextoverdisable { cursor: pointer;  color: #999999; text-decoration: none}
.i-tree-context-menu .ctxseparator { border-top: solid #aaa 1px; font-size: 1px;line-height: normal; }

/* ------ Accordion CSS ------ */

.i-accordion { float: left; line-height:normal; margin:0; padding:0; list-style:none; border-radius: 4px; border-width: 1px; border-style: solid; }
.i-accordion li { float: left; margin:0;  padding:0; list-style:none; }
.i-accordion li > a { float: left; width: 100%; cursor:pointer; margin-top: -1px; border-width:0; border-top-width: 1px; border-bottom-width: 1px; border-style: solid; padding: 14px 0; font: normal 10pt Arial, Tahoma, Verdana; color: #333; outline:none; text-decoration: none; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }
.i-accordion li:first-child > a { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.i-accordion li:last-child > a { border-bottom-width: 0; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.i-accordion li > a .padding { display: inline-block; padding: 0 9px 0 9px; }
.i-accordion li > a .img { float: left; margin-right: 6px; width: 16px; height: 16px; background: url(../Images/Common/Accordian/accord-expand.png) no-repeat 0 0;} 
.i-accordion li > a:hover, .i-accordion li a.button:hover { background:rgba(175, 175, 175, .1); text-decoration: none; }
.i-accordion li > a.item-on { background: rgba(200, 200, 200, .1); text-decoration: none; }
.i-accordion li > a.item-on .img { float: left; width: 16px; height: 16px; background: url(../Images/Common/Accordian/accord-collapse.png) no-repeat 0 0;} 
.i-accordion li > a.item-on:hover { background: rgba(200, 200, 200, .1); text-decoration: none;  }
.i-accordion li ul { float: left; width: 100%; display: none; list-style: none; margin: 0; padding: 0;}
.i-accordion li ul li { border: 0 !important; }

.i-accordion-full { width: 100%; }
.i-accordion-full li { width: 100%; }
.i-accordion-full li > a { width: 100%; }

.i-accordion { border-color: rgba(125, 125, 125, .1); }
.i-accordion li > a { border-color:rgba(125, 125, 125, .1);; }

/* ------ ToolTip Css ------ */

/* wrapper */

.i-tooltip {  margin: 0; padding: 0; display: inline-block; }
.i-tooltip-icon { cursor: help; opacity:.5; font-size: 14pt !important; padding: 0; line-height:normal !important; }
.ie7 .i-tooltip, .ie6 .i-tooltip { display: inline; }

.i-text-box + .i-tooltip,
.i-select + .i-tooltip,
.i-slider + .i-tooltip { vertical-align: middle; }

/* tip box */

.i-tt { background: #000; position: absolute; display: none; left: -1000px; top: -1000px; z-index: 999999; }
.i-tt p { font-family: Arial, Tahoma, sans-serif; font-size: 10pt; font-weight: normal; line-height: 24px; color: #fff; float: left; margin: 0; padding: 9px; }
.i-tt a { color: #fff; }
.i-tt a:hover { color: #fff; }

/* tip arrow */

.i-tt-arrow  { content: '-'; position: absolute; z-index: 999999; text-indent: -40000px; width: 0; height: 0; display: none; padding: 0;  border:0; border-color:#000; border-style: solid;  }
.i-tt-arrow-top  { top: -8px; border-left-color: transparent !important; border-top-color: transparent !important; border-right-color: transparent !important; border-left-width: 8px; border-right-width: 8px; border-bottom-width: 8px; }
.i-tt-arrow-bottom { bottom: -8px; border-left-color: transparent !important; border-bottom-color: transparent !important; border-right-color: transparent !important; border-left-width: 8px; border-right-width: 8px; border-top-width: 8px;  } 
.i-tt-arrow-left  { left: -8px; border-bottom-color: transparent !important; border-top-color: transparent !important; border-left-color: transparent !important; border-bottom-width: 8px; border-top-width: 8px; border-right-width: 8px; }
.i-tt-arrow-right  { border-bottom-color: transparent !important; border-top-color: transparent !important; border-right-color: transparent !important;  border-bottom-width: 8px; border-top-width: 8px; border-left-width: 8px; }

/* tip box (achievements) */

.i-achievement-tooltip { display: none; display: inline-block; position: absolute; color: #fff; width: 350px; z-index: 999999; cursor: help;  border-radius: 3px; background-color: #252525; border: 0;   }
.i-achievement-tooltip p { float: left; line-height: 26px; font: normal 10pt Arial, Verdana, Sans-Serif; color: #fff; margin: 0;  }
.i-achievement-tooltip .title { float: left; width: 80%;  font: normal 14pt open_sanslight, Tahoma, Verdana; color: #fff; padding: 9px 0 6px 9px; }
.i-achievement-tooltip .awarded { float: left;  padding: 0 9px 9px 9px; }
.i-achievement-tooltip .desc { float: left; line-height: 22px;  white-space: normal !important; border-top: 1px solid #444; padding: 9px; }
.i-achievement-tooltip .rep { float: right;  text-align: right; color: #aaa; margin-top: 26px; font-size: 18pt; font-weight: normal; margin: 12px; font: normal 16pt open_sanslight, Tahoma, Verdana; margin-top: 12px; color: #aaa;  padding: 0 9px;  }

/* ------ Summary CSS ------ */

.i-summary { float: left;width: 100%; border-width: 1px; background-color:#F4F5F6; border-color: #ddd; border-left-width: 3px; border-style: solid; }
.i-summary .margin { display: inline-block; margin: 14px;  }
.i-summary .i-summary-header { font-family:Arial;font-size:10pt; font-weight: bold; background:#f8f8f8; }
.i-summary .i-summary-header i { margin-right: 9px; }
.i-summary .i-summary-body { background: #ffffff; color: #000; }
.i-summary .i-summary-body a { text-decoration: underline; color: #000; }

.i-summary-success { border-left-color: #26BB09; }
.i-summary-success .i-summary-header {color:#26BB09; }
.i-summary-caution { border-left-color: #CC7300; }
.i-summary-caution .i-summary-header { color:#CC7300; }
.i-summary-failure { border-left-color: #ff0000; }
.i-summary-failure .i-summary-header {color:#ff0000; }
.i-summary-info { border-left-color: #73A7FB; }
.i-summary-info .i-summary-header { color: #3D71C5; }

/* ------ Label CSS ------ */

.i-label { display: inline-block; padding: 4px; line-height:normal; font-size: 8pt; -moz-border-radius: 2px; -webkit-border-radius: 2px; font-weight: bold; border-radius: 2px; }

/* ------ auto complete ------ */

.i-auto-complete { position: absolute; font-family: Arial, Tahoma;font-size: 10pt; color: #ddd;z-index: 999999 !important; border: 1px solid #242424; padding: 0; margin: -2px 0 0 0; background-color: #242424; }
.i-auto-complete-item { cursor:pointer; display: block; margin: 0; padding: 9px; width: 100%; }
.i-auto-complete-item-over { color: #fff;background-color: #444; margin: 0; padding: 9px; cursor:pointer; }

/* ------ Table CSS ------ */

.i-table { width: 100%; border-spacing: 0; }
.i-table td { padding: 1px;  }

/* table headers */

.i-col-header { position: relative; border-width: 0; border-style: solid; text-transform:uppercase; }
.i-col-header span, .i-col-header a, .i-col-header img, .i-col-header input { position: relative; text-transform:uppercase;  }
.i-col-header-bg { width: 100%; height: 100%; position: absolute !important; top: 0; left: 0; }
.i-col-header .i-sort-arrow-desc { background: url(../Images/Misc_SortArrowDesc.gif) no-repeat top left; padding:4px; }
.i-col-header .i-sort-arrow-asc { background: url(../Images/Misc_SortArrowAsc.gif) no-repeat top left; padding:4px; }

/* used to reset padding within tables */
.i-table-reset { width: 100%; margin: 0 !important; border-spacing: 0 !important; }
.i-table-reset td { margin: 0 !important; padding: 0 !important;}

/* ------ Text CSS ------ */

.i-type-bold { font-weight: 600; }
.i-type-sego { font-family: open_sanslight, "open_sanslight" !important; font-weight: normal !important; font-weight: normal !important; }
.i-type-open { font-family: "open_sansbold", Trebuchet MS, Arial; }
.i-type-open-light { font-family: "open_sanslight", Trebuchet MS, Arial; }
.i-type-white { color:#fff !important; }
.i-type-validation { color:#ff0000 !important; }

/* highlighted keywords */
.i-type-highlighted { background-color: #F8FF40;font-weight: bold; }

/* ------ Tag CSS ------ */

.i-tags { line-height: normal;  }
.i-tags a.tag { font-size: 10pt; opacity: 0.8;  white-space:nowrap; max-width: 140px; display: inline-block; text-overflow: ellipsis; overflow: hidden; border-radius: 2px; text-decoration: none !important; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }
.i-tags a.tag span { float: left; padding: 9px; }
.i-tags a.tag:hover { opacity: 1; text-decoration: none; }
.i-tags a.selected { opacity: 1.0; }
.i-tags span.tag-count { opacity: .7; display: inline-block; padding: 9px; }
.i-tags .comma { display: none; }
.i-tags a.i-btn { margin-left: 3px; }

.i-tags a.tag, 
.i-tags span.tag-count, 
.i-tags a.i-btn { float: left; margin-bottom: 9px; }

/* column layout for tags */
.i-tags-100 { float: left; width: 100%; }
.i-tags-50 { float: left; width: 50%; }
.i-tags-33 { float: left; width: 33%; }
.i-tags-25 { float: left; width: 25%; }

/* ------ Dialog CSS ------ */

.i-dialog {   -moz-transform:scale(.8); -ms-transform:scale(.8); -o-transform:scale(.8); -webkit-transform:scale(.9); transform:scale(.8);  z-index: 99999; opacity: 0; position: fixed; visibility: hidden; -webkit-box-orient: vertical; border-width: 10px; border-style: solid; border-color: rgba(0,0,0,0.2); }
.i-dialog-transition { -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;  }
.i-dialog-visible { 
    -webkit-animation: i-dialog-bounce .15s linear;
    -moz-animation: i-dialog-bounce .15s linear;
    -o-animation: i-dialog-bounce .15s linear; 
    animation: i-dialog-bounce .15s linear;    
    visibility: visible; 
    opacity: 1;  
    -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); -webkit-transform:scale(1); transform:scale(1);
}

@-webkit-keyframes i-dialog-bounce { 
    1% { -moz-transform:scale(.8);-ms-transform:scale(.8); -o-transform:scale(.8); -webkit-transform:scale(1); transform:scale(.8); }    
    100% { -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); -webkit-transform:scale(1); transform:scale(1); }
}
@-moz-keyframes i-dialog-bounce { 
    1% { -moz-transform:scale(.8);-ms-transform:scale(.8); -o-transform:scale(.8); -webkit-transform:scale(1); transform:scale(.8); }    
    100% { -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); -webkit-transform:scale(1); transform:scale(1); }
}
@-o-keyframes i-dialog-bounce { 
    1% { -moz-transform:scale(.8);-ms-transform:scale(.8); -o-transform:scale(.8); -webkit-transform:scale(1); transform:scale(.8); }    
    100% { -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); -webkit-transform:scale(1); transform:scale(1); }
}
@keyframes i-dialog-bounce {     
    1% { -moz-transform:scale(.8);-ms-transform:scale(.8); -o-transform:scale(.8); -webkit-transform:scale(1); transform:scale(.8); }    
    100% { -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); -webkit-transform:scale(1); transform:scale(1); }
}

.i-dialog .i-dialog-loader { float: left; width: 100%; text-align: center; }

/* pop-up main */
.i-dialog .mb { float: left; width: 100%; -webkit-overflow-scrolling: touch; overflow-y: auto; background:#fff; }

.i-dialog iframe { float: left; width: 100%; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }
.i-dialog iframe::-webkit-scrollbar { background:#eee; width: 8px; }
.i-dialog iframe::-webkit-scrollbar-thumb:vertical { margin: 0 12px; border-radius: 12px;  background-color: #888; }
.i-dialog iframe::-webkit-scrollbar-button:start:decrement,
.i-dialog iframe::-webkit-scrollbar-button:end:increment { height: 0; display: block; }
   
/* content */

.i-dialog-content  { position: relative; }
.i-dialog-content .margin { margin: 12px; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }
.i-dialog-content header { float: left; width: 100%; border-width: 0;  margin: 0; padding: 0; border-bottom-width: 1px; border-style:solid; }
.i-dialog-content header .margin { margin: 18px 12px; }
.i-dialog-content header h5 { display: inline !important; margin: 0; padding: 0; }
.i-dialog-content header a.close { float: right; position: relative; }
.i-dialog-content footer { float: left; width: 100%; padding: 0; border: 0; }
.i-dialog-content .footer-pull-bottom { float: left; width: 100%; position: fixed; left:0; z-index: 700; bottom: 0; }
.i-dialog-content .i-table { float: left; width: 100%; }
.i-dialog-content .i-table td { padding: 12px; }
.i-dialog-content .i-toolbar { border-top-width: 0; border-left-width: 0; border-right-width: 0; }

.i-dialog-content .i-loader-overlay { width: 100%; height: 100%; }

/* ------ SlideOut CSS ------ */

.i-slide-out .button { position: fixed; right: 350px; top: 0;  }
.i-slide-out .button a { float: left; padding: 0; margin: 0; width: 100%; text-align: center; line-height: normal; color: #fff; background: #000; opacity: .3; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in;  transition: all 0.2s ease-in; }
.i-slide-out .button a span { float: left; padding: 6px 8px; }
.i-slide-out .button a:hover { opacity: 1; }
.i-slide-out .close { float: right; display: none; cursor: pointer; margin: 13px 13px 0 0; width: 24px; height: 29px; background: url(../Images/Common/SlideOutBar/close.gif) no-repeat 0 0; }
.i-slide-out iframe { display: none; height: 220px; width: 109%; margin: 0; padding: 0; background: #262626; }

.i-slide-out .so-wrapper { display: none; z-index: 100; top: 0; position: fixed; width: 100%; background: #000; border-bottom: 1px solid #444; left: 0; margin-top: -300px;  }
.i-slide-out .so-wrapper h2 { float: left; font: normal 14pt open_sanslight, Tahoma, Verdana; color: #fff; margin: 3px 12px 6px 12px; padding: 0; }
.i-slide-out .so-content { float: left; width: 100%; } 
.i-slide-out .so-loader { float: left; width: 100%;  height: 250px; background: url(../Images/Common/Loaders/large-white-snake.gif) no-repeat center center; } 
.i-slide-out .main-content { float: left; width: 100%; height: 230px; padding-bottom: 12px; background: #262626; }

/* ------ AJAX loader CSS ------ */

/* pop-out loader */

.i-async-loader { opacity: 0; visibility: hidden; -webkit-transform: scale(0); position: absolute; z-index: 999999;  width: 300px; background-color: #333; border-radius: 6px; color:#fff; text-align: center; font: bold 10pt Arial; padding:12px;  }
.i-async-loader-visible { cursor:wait; opacity: .9; visibility: visible; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s;  }
.i-async-loader .i-row { margin: 24px 0; }

.i-async-loader-bars { margin: 0 auto; width: 50px; height: 30px; text-align: center; font-size: 10px; }
.i-async-loader-bars > div { background-color: #ddd; height: 30px; width: 5px; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; margin-right: 2px; }
.i-async-loader-bars .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.i-async-loader-bars .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
.i-async-loader-bars .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.i-async-loader-bars .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

/* loader */

.i-loader {
    display: inline-block;
    position: relative;    
    width: 20px;
    height: 20px;
    vertical-align: middle;
    border-radius: 50%; 
}
.i-loader:after {
    position: absolute;
    content: '-';
    z-index:2;
    text-indent: -5000px;
    top: 0;
    left: 0; 
    width: 20px;
    height: 20px; 
    overflow:hidden;    
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 1);  
    -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
    clip: rect(0,10px,20px,0);
    border-radius: 50%;
    -webkit-transform-origin: 10px 10px;
    -moz-transform-origin: 10px 10px;
    -o-transform-origin: 10px 10px;
    -ms-transform-origin: 10px 10px;      
    -webkit-animation: i-rotate .8s infinite linear;
    -moz-animation: i-rotate .8s infinite linear;
    -o-animation: i-rotate .8s infinite linear; 
    animation: i-rotate .8s infinite linear;    
}

.i-loader-2x {
    width: 40px;
    height: 40px;
}
.i-loader-2x:after  {
    width: 40px;
    height: 40px; 
    box-shadow: inset 0 0 0 5px rgba(100, 100, 100, 1);  
    clip: rect(0,20px,40px,0);
    -webkit-transform-origin: 20px 20px;
    -moz-transform-origin: 20px 20px;
    -o-transform-origin: 20px 20px;
    -ms-transform-origin: 20px 20px;   
}

.i-loader-3x {
    width: 60px;
    height: 60px;
}
.i-loader-3x:after  {
    width: 60px;
    height: 60px; 
    clip: rect(0,30px,60px,0);
    -webkit-transform-origin: 30px 30px;
    -moz-transform-origin: 30px 30px;
    -o-transform-origin: 30px 30px;
    -ms-transform-origin: 30px 30px;   
}

@-webkit-keyframes i-rotate { 
    0% { -webkit-transform: rotate(0);} 
    100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes i-rotate { 
    0% { -moz-transform: rotate(0);} 
    100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes i-rotate { 
    0% { -o-transform: rotate(0); } 
    100% { -o-transform: rotate(360deg); }
}
@keyframes i-rotate { 
    0% {-webkit-transform: rotate(0);-moz-transform: rotate(0);-ms-transform: rotate(0);transform: rotate(0); } 
    100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg); }
}

/* in-line loader within menus */
.i-menu .i-loader:after {
    box-shadow: inset 0 0 0 5px rgba(175, 175, 175, .7);
}

/* disable content overlay */
.i-loader-overlay { float: left; width: 100%; z-index:10; position: absolute; text-align:center; overflow:hidden; cursor: wait; }
.i-loader-overlay-bg { opacity: .5; position: absolute; width: 100%; height: 100%; }
.i-loader-overlay .i-loader { margin: 100px 0; } 

/* center loader with no effects within container */
.i-loader-jumbo { float: left;  width: 100%; text-align: center; cursor: wait;  }
.i-loader-jumbo .i-loader { margin: 100px 0; } 

/* disable body overlay */
.i-async-dimmer { position: fixed; width:100%; opacity: 0; visibility: hidden; height:100%; z-index: 1000; background-color: #000; -webkit-transition: all .15s linear; -moz-transition: all .15s linear; -o-transition: all .15s linear; transition: all .15s linear; top: 0; left:0; }
.i-async-dimmer-visible { opacity: 0.7; visibility: visible;  }

/* ------ Percentage Bar Css ------ */

.i-percentage-bar  { background-color: #fff;border: solid 1px #ccc;line-height: normal; text-align:left; }
.i-percentage-bar-filled { background-color: #ccc;border: solid 1px #fff; line-height: normal; }

/* ------ Captcha Css ------ */

.i-captcha-image-wrapper { border: #7F9DB9 1px solid; }
.i-captcha-image-wrapper img { display: block; }

/* ------ Member Picture / Photo CSS ------ */

.i-photo { display: inline-block; position:relative; text-align: center; }
.i-photo a { float: left; margin: 0; padding: 0; }
.i-photo img { float: left; border: 0; }

.i-photo span { float: left; border: 1px solid transparent; padding: 0; margin: 0; text-transform:uppercase; font-family: open_sanslight; }
.i-photo-small span { line-height: 28px; font-size: 10pt; }
.i-photo-medium span { line-height: 38px; font-size: 12pt;}
.i-photo-large span {  line-height: 72px; font-size: 22pt; }
.i-photo-xlarge span {  line-height: 122px; font-size: 38pt; }

.i-photo-small, .i-photo-small img, .i-photo-small span { width: 28px; height: 28px; border: 0; }
.i-photo-medium, .i-photo-medium img, .i-photo-medium span { width: 38px; height: 38px; border: 0; }
.i-photo-largem, .i-photo-large img, .i-photo-large span { width: 72px; height: 72px; border: 0; }
.i-photo-xlarge, .i-photo-xlarge img, .i-photo-xlarge span { width: 122px; height: 122px; border: 0; }

.i-photo-edit { display:inline-block; position: relative; text-decoration: none;  }
.i-photo-over { display: none; border: 0 solid transparent; position: absolute; z-index: 50; top: 0; left: 0;  color:#fff; background:rgba(0,0,0,0.5); }
.i-photo-over span { float: left; width: 100%; font-size: 10pt; text-align: center; line-height:124px; }
.i-photo-edit:hover .i-photo-over { display: inline-block;  }

/* ------ User Card CSS ------ */

.i-user-card { position:absolute; margin-top: -140px; padding:0; z-index:20; display:none; top: -1000px; left: -1000px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 0 10px #888; -webkit-box-shadow: 0 0 10px #888; box-shadow: 0 0 10px #888; }
.i-user-card .i-loader { margin: 180px auto; }
.i-user-card .h5 { display: inline-block; font-size: 20pt; }
.i-user-card .photo-row { float: left; text-align: center; width: 100%; margin-top: -50px; }
.i-user-card .photo-row .photo-large img { width: 88px !important; height: 88px !important; }

.i-user-card-content { float: left; width: 363px; overflow:hidden; margin: 0; padding: 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.i-user-card-content .i-user-card-inner { float: left; margin: 14px; text-align: center; }

/* ------ Buttons ------ */

.i-btn {  border-width: 1px; border-style: solid; line-height: normal; font-weight: bold; position: relative; display: inline-block; text-align:center; text-decoration: none; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }
.i-btn .i-btn-bg { float: none; padding:0; width: 100%; height: 100%; position: absolute; top: 0; left: 0;  }
.i-btn span {  font-size: 8pt; display: inline-block; padding: 8px; position: relative; white-space: nowrap; }
.i-btn-2x span { font-size: 10pt; padding: 11px 16px; }
a.i-btn:hover { text-decoration: none; }

.i-btn .fa { font-size: 10pt !important; }
.i-btn-2x .fa { font-size: 12pt !important; }

/* reset pip padding within buttons */
.i-btn .i-pip { margin-left: 12px; padding: 0; }
.i-btn .i-pip span { padding: 0; }

/* ------ Rating Css ------ */

.i-rating-wrapper { margin: 0; padding: 0;  }
.i-rating { vertical-align: middle !important; margin: 0; padding: 0; display: inline-block; } 

/* ------ BlockUI notification box CSS ------ */

.i-notify { font-family: Arial, Verdana, Tahoma; font-weight: bold; font-size: 10pt; display: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
.i-notify div { padding: 6px 16px; }

.i-notify-primary { color: #fff; background-color:#000; }
.i-notify-primary a { font-weight:bold; color:#62C55A !important; }

.i-notify-error { color: #333; background-color: #F9EDBE; }

/* ------ RichTextBox CSS ------ */

.i-rtb { float: left; overflow: hidden; width: 100%; line-height: normal; border-radius: 3px; border-width: 1px; border-style: solid; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }

.i-rtb-toolbar-wrapper { float: left; width: 100%; padding: 0; margin: 0; font-size: 10pt; }
.i-rtb-toolbar { float: left; position: relative; width: 100%; padding: 4px 0; border-left-width: 0; border-top-width: 1px; border-bottom-width: 0; border-right-width: 0; border-style: solid; }
.i-rtb-mobile-toolbar { display: none; }
.i-rtb-toolbar-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } 
.i-rtb-seperator { float: left; position: relative; width: 1px; height: 23px; vertical-align: middle; margin: 5px 4px 0px 4px; border-left-width: 0; border-top-width: 0; border-bottom-width: 0; border-right-width: 1px; border-style: solid; }

.i-rtb-attachments-wrapper { float: left; line-height: 28px; width: 100%; background-color: #FFFFD9; border-top: solid 1px #ddd; }
.i-rtb-attachments { float: left; width: 80%; padding: 12px 6px;  color: #888 !important; }
.i-rtb-attachments .rtb_Attachment { float: left;  }
.i-rtb-attachments a { color: #666 !important; text-decoration: none; }
.i-rtb-attachments img, .i-rtb-attachments i { margin: 0 4px; vertical-align: middle; }
.i-rtb-attachments .size { margin-right: 18px;  }
.i-rtb-attachments a:hover { text-decoration: none; }
.i-rtb-spell-preview { float: left; font-style: normal; padding: 0 8px; }
.i-rtb-spell-preview .if-quote-wrapper { opacity: 0.5; }

.i-rtb-button { float: left; border: 1px solid transparent; position: relative; cursor: pointer; }
.i-rtb-button span { float: left; position: relative; padding: 6px; text-align: center; }
.i-rtb-button i { position: relative; vertical-align: middle; }
.i-rtb-button:hover { border-width: 1px; border-style: solid; }
.i-rtb-button:hover .i-rtb-button-bg { display: block; }
.i-rtb-button-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; opacity: 0.5;  }

.i-rtb-dropdown { float: left; position: relative; height: 26px; background-color: rgba(255,255,255,0.8); border: solid 1px transparent; margin: 6px 4px 0 0; cursor: pointer; }
.i-rtb-dropdown-over { float: left; position: relative; height: 26px; background: rgba(255,255,255,0.8);  border: solid 1px transparent; cursor: pointer; margin: 6px 4px 0 0; cursor: pointer;}
.i-rtb-dropdown-text { float: left; font-family: sans-serif, arial, tahoma, verdana; color: #666666; padding: 3px 0 3px 4px; }
.i-rtb-dropdown-icon { float: right; margin-top: 1px; width: 25px; text-align: right; }

.i-rtb-emots-menu { width: 100%; }
.i-rtb-emots-menu li { width: auto !important; }
.i-rtb-emots-menu li a {  width: auto !important; text-align: center; padding: 6px; }

.i-rtb-textbox { float: left; width: 100%; margin: 0; background-color: #fff; }
.i-rtb-textbox body img, .i-rtb-textbox html img { cursor: move }
.i-rtb-html-textbox { float: left; width: 100%; z-index: 20; cursor: text; background-color: #fff; }

.i-rtb-reize { float: left; width: 100%; height: 7px; text-align: center; border-top: solid 1px #dddddd; border-bottom: solid 0px #ddd; cursor: n-resize; line-height: normal; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }
.i-rtb-reize-over { float: left; width: 100%; height: 7px; text-align: center; background-color: #B3B3B3; border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; cursor: n-resize; }
.i-rtb-reize img, .i-rtb-reize-over img {  float: left; margin: 0; margin-left: 50%; padding: 0; cursor: n-resize; line-height: normal; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }

/* wrapper for plain text editor (no iframee) */
.i-rtb-plain-text-wrapper { float: left; width: 100%; background-color: #ffffff !important; border: 1px solid #ddd; border-radius: 2px; }
.i-rtb-plain-text-margin { margin: 6px; }
.i-rtb-plain-text-margin .i-text-area { margin: 0; float: left; width: 100% !important; padding: 0 !important; border-width: 0 !important; color:#222 !important; outline: none !important; background-color: transparent !important; }

.i-rtb-plain-text-button { line-height: 28px; }
.i-rtb-plain-text-button iframe { padding: 0; height: 38px; margin: 0; float: left; }
.i-rtb-plain-text-button:hover { background-color: transparent !important; border-color: transparent !important; } 

/* ------ color picker ------ */

.i-color-picker { width: 356px; height: 176px; overflow: hidden;position: absolute;background: url(../Images/RichTextBox/ColorPicker/custom_background.png);font-family: Arial, Helvetica, sans-serif;display: none;z-index: 999; }
.i-color-picker-color { width: 150px; height: 150px; left: 14px; top: 13px; position: absolute;background: #f00;overflow: hidden;cursor: crosshair; }
.i-color-picker-color div { position: absolute;top: 0;left: 0;width: 150px;height: 150px;background: url(../Images/RichTextBox/ColorPicker/colorpicker_overlay.png); }
.i-color-picker-color div div { position: absolute;top: 0;left: 0;width: 11px;height: 11px;overflow: hidden;background: url(../Images/RichTextBox/ColorPicker/colorpicker_select.gif); margin: -5px 0 0 -5px; }
.i-color-picker-hue { position: absolute;top: 13px;left: 171px;width: 35px;height: 150px;cursor: n-resize; }
.i-color-picker-hue div  { position: absolute;width: 35px;height: 9px;overflow: hidden;background: url(../Images/RichTextBox/ColorPicker/colorpicker_indic.gif) left top;margin: -4px 0 0 0;left: 0; }
.i-color-picker-new-color { position: absolute;width: 60px;height: 30px;left: 213px;top: 13px;background: #f00; }
.i-color-picker-current-color  { position: absolute;width: 60px;height: 30px;left: 283px;top: 13px;background: #f00; }
.i-color-picker input  { background-color: transparent;border: 1px solid transparent;position: absolute;font-size: 10px;font-family: Arial, Helvetica, sans-serif;color: #898989;top: 4px;right: 11px;text-align: right;margin: 0;padding: 0;height: 11px; }
.i-color-picker-hex  { position: absolute;width: 72px;height: 22px;background: url(../Images/RichTextBox/ColorPicker/custom_hex.png) top;left: 212px;top: 142px; }
.i-color-picker-hex input  { right: 6px; }
.i-color-picker-field  { height: 22px;width: 62px;background-position: top;position: absolute; }
.i-color-picker-field span  { position: absolute;width: 12px;height: 22px;overflow: hidden;top: 0;right: 0;cursor: n-resize; }
.i-color-picker-rgb-r { background-image: url(../Images/RichTextBox/ColorPicker/custom_rgb_r.png);top: 52px;left: 212px; }
.i-color-picker-rgb-g { background-image: url(../Images/RichTextBox/ColorPicker/custom_rgb_g.png);top: 82px;left: 212px; }
.i-color-picker-rgb-b { background-image: url(../Images/RichTextBox/ColorPicker/custom_rgb_b.png);top: 112px;left: 212px; }
.i-color-picker-hsb-h { background-image: url(../Images/RichTextBox/ColorPicker/custom_hsb_h.png);top: 52px;left: 282px; }
.i-color-picker-hsb-s { background-image: url(../Images/RichTextBox/ColorPicker/custom_hsb_s.png);top: 82px;left: 282px; }
.i-color-picker-hsb-b { background-image: url(../Images/RichTextBox/ColorPicker/custom_hsb_b.png);top: 112px;left: 282px; }
.i-color-picker-submit { position: absolute;width: 22px;height: 22px;background: url(../Images/RichTextBox/ColorPicker/custom_submit.png) top;left: 322px;top: 142px;overflow: hidden; }
.i-color-picker-focus { background-position: center; }
.i-color-picker-hex.i-color-picker-focus  { background-position: bottom; }
.i-color-picker-submit.i-color-picker-focus  { background-position: bottom; }
.i-color-picker-slider  { background-position: bottom; }

/* preview for color selection drop down lists */
.i-color-drop-down-preview { background:transparent; display: inline-block; border-radius: 0px; line-height: normal;  padding: 14px 32px; border: 1px solid #ddd; }

/* ------ time picker ------ */

.i-time-picker { float: left; color:#fff; background:#333333;  }
.i-time-picker .hour,
.i-time-picker .minutes,
.i-time-picker .period { float: left; width: 100%; }

.i-time-picker-header { float: left; width: 100%; background:#444; }
.i-time-picker-header span { float: left; padding: 6px; text-transform: uppercase; font-weight: bold; font-size: 8pt; color:#888; }

.i-time-picker input { opacity: 0; position: absolute; visibility: hidden; }
.i-time-picker input + label { float: left; width: 38px; height: 38px; line-height: 40px; text-align:center; margin: 1px 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; cursor:pointer; }
.i-time-picker input + label:hover { background:#555; color:#fff; }
.i-time-picker input:checked + label,
.i-time-picker input:checked + label:hover { background:#62C55A; color:#fff; }

/* ------ spell checker / suggestion box ------ */

.i-spell-suggest-box {position: absolute; display: none; z-index: 9999; overflow: hidden; padding: 0px; color: #000; font: normal 10pt arial; border: 1px solid #ddd; box-shadow: 0 0 10px #999; background: #fff;}
.i-spell-suggest-box em {padding: 4px 32px 8px 4px; display: block; margin: 0; text-decoration: none; color: #000; font-style: normal;}
.i-spell-suggest-box a, 
.i-spell-suggest-box a:visited { padding: 4px 32px 4px 4px; display: block; margin: 0; text-decoration: none; color: #000; outline: none;}
.i-spell-suggest-box a.first, 
.i-spell-suggest-box a.first:visited{border-top: 0 solid transparent;}
.i-spell-suggest-box a:hover {color: #000; background: #ddd;}
.i-spell-suggest-box-words {background: #fff;}
.i-spell-suggest-box-foot {background: #fff; border-top: 1px solid #999;}
.i-spell-suggest-box-foot a, 
.i-spell-suggest-box-foot a:visited {outline: none;} 
.i-spell-change-box{display: block; margin: 4px;}
.i-spell-change-box input{border: 1px solid #666; background-color: #eee; padding: 2px;}
.i-spell-words {margin-bottom: 2em; margin-top: -0.5em; font-size: 10pt; border: 1px solid #aaa; padding: 4px 6px;}
.i-spell-sep {padding-right: 0.5em; border-top: 1px solid #555;}
.i-spell-sep-last {display: none;}
.i-spell-error { color: #d70303; text-decoration: underline; background-color: #FFFF00; cursor: pointer;}

/* ------ form CSS ------ */

.i-text-area, 
.i-text-box, 
.i-select { border-width: 1px; border-style: solid; }

.i-text-area, 
.i-text-box { padding: 9px !important; width: 70%; }
.i-select { padding: 7px; }

.i-text-area { line-height: 20px; }

/* IE 10+ pseudo elements to style file upload inputs */
.i-text-box::-ms-value { border: 0px solid #aaa; background:#fff; background: #fff; }
.i-text-box::-ms-browse { background: #fff; }

/* used to overlay a hidden file element over the top of some other element */
.i-fake-file { position: relative; display: inline-block; overflow:hidden; width: 100%; }
.i-fake-file .i-fake-file-visible { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; outline: hidden; background:transparent; }
.i-fake-file .i-fake-file-visible a { width: 100%; }
.i-fake-file input { position: relative; overflow: hidden; width: 100%; height: 46px; margin: 0; z-index: 2; cursor:pointer; background: transparent; -moz-opacity:0 ;filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -khtml-opacity: 0.0; -moz-opacity: 0.0; opacity: 0; }

/* used to overlay ghosted placeholders over text boxes for IE */
.i-ie-placeholder-shiv { display: inline; height: 33px; }
.i-ie-placeholder-shiv input {float: left; display: inline; }
.i-ie-placeholder-shiv input.ghosted-input { background-color:transparent !important;border-color: transparent !important; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); margin-top: -33px; opacity: 0.4; }

/* invalid field - used to indicated required fields */
.i-input-error { border-width: 1px; border-style: solid; }

/* CSS for row selection check-boxes within lists - referenced by editableGrid control */
.i-row-select, .i-row-select-all { cursor: pointer; text-align: center; }

/* --------- check box --------- */

.i-check-box { position: relative; display: inline-block; }
.i-check-box input { opacity:0; width: 24px; display: inline-block; margin: 0; cursor: pointer; }
.i-check-box input + label { position: relative; cursor: pointer; }

/* filler */
.i-check-box input + label:after { 
    content: '-';
    text-indent: -5000px;
    -webkit-user-select: none; 
    -webkit-transition: background-color .2s cubic-bezier(0.4,0,0.2,1);
    transition: background-color .2s cubic-bezier(0.4,0,0.2,1);
    -webkit-tap-highlight-color: transparent;
    background-color: rgba(255,255,255,0);
    -webkit-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;  
    border: 2px solid rgba(126,126,126,.5);    
    height: 16px;
    width: 16px; 
    margin-left: -24px;
    position: absolute; 
    z-index:1;
    left: 0;
    top: -2px;
}
.i-check-box input:checked + label:after {
    background-color:#00A900;
    border-color:#00A900;
}
.i-check-box input:active + label:after {
    border-color:#444;
}

/* icon */
.i-check-box input + label::before {
    position: absolute;
    z-index: 2;  
    left: 4px;
    top: 1px;
    margin-left: -24px;
    color: #fff;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 10pt;
    content: '\f00c';   
    opacity: 0;
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);   
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.i-check-box input:checked + label::before {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

/* tap overlay */
.i-check-box input + label + span {
    position: absolute !important;
    z-index:1;
    display: inline;
    left: 0;
    top: 0;
}
.i-check-box input + label + span::before {
    content: '-';
    text-indent: -50000px;
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5);
    -webkit-transform: scale(2.5);
    transform: scale(2.5);
    background-color: rgba(0,0,0,.2);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    height: 16px;
    width: 16px;   
    outline: 0;
    left: 2px;
    top: 2px;
    pointer-events: none;     
    position: absolute !important;
    opacity: 0; 
    z-index:1;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: -webkit-transform .1s cubic-bezier(0.4,0,0.2,1);
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
.i-check-box input:checked + label + span::before {
    -webkit-animation: tap-animate 0.2s ease-in; /* Safari 4+ */
    -moz-animation:    tap-animate 0.2s ease-in; /* Fx 5+ */
    -o-animation:      tap-animate 0.2s ease-in; /* Opera 12+ */
    animation:         tap-animate 0.2s ease-in; /* IE 10+ */
}

/* --------- radio button --------- */

.i-radio-button { position: relative; display: inline-block;  }
.i-radio-button span {  position: relative;  }
.i-radio-button input { opacity:0; width: 24px; display: inline-block; margin: 0; cursor: pointer; }
.i-radio-button input + label { position: relative; cursor: pointer; }

/* filler */
.i-radio-button input + label:after { 
    content: '-';
    text-indent: -5000px;
    -webkit-user-select: none; 
    -webkit-transition: background-color .2s cubic-bezier(0.4,0,0.2,1);
    transition: background-color .2s cubic-bezier(0.4,0,0.2,1);
    -webkit-tap-highlight-color: transparent;
    background-color: rgba(255,255,255,0);
    -webkit-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;  
    border: 2px solid rgba(126,126,126,.5);    
    height: 16px;
    width: 16px; 
    margin-left: -26px;
    position: absolute; 
    z-index:1;
    left: 0;
    top: -4px;
}
.i-radio-button input:checked + label:after {
    background-color:#00A900;
    border-color:#00A900;
}
.i-radio-button input:active + label:after {
    border-color:#444;
}

/* icon */
.i-radio-button input + label::before {
    position: absolute;
    z-index: 2;  
    left: 4px;
    top: 0;
    margin-left: -26px;
    color: #fff;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 10pt;
    content: '\f00c';   
    opacity: 0;
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);   
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.i-radio-button input:checked + label::before {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

/* tap overlay */
.i-radio-button input + label + span {
    position: absolute !important;
    z-index:1;
    display: inline;
    left: 0;
    top: 2px;
}
.i-radio-button input + label + span::before {
    content: '-';
    text-indent: -50000px;
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5);
    -webkit-transform: scale(2.5);
    transform: scale(2.5);
    background-color: rgba(0,0,0,.2);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    height: 16px;
    width: 16px;   
    outline: 0;
    left: 0;
    top: 2px;
    pointer-events: none;     
    position: absolute !important;
    opacity: 0; 
    z-index:1;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: -webkit-transform .1s cubic-bezier(0.4,0,0.2,1);
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
.i-radio-button input:checked + label + span::before {
    -webkit-animation: tap-animate 0.2s ease-in; /* Safari 4+ */
    -moz-animation:    tap-animate 0.2s ease-in; /* Fx 5+ */
    -o-animation:      tap-animate 0.2s ease-in; /* Opera 12+ */
    animation:         tap-animate 0.2s ease-in; /* IE 10+ */
}

/* disabled */
.i-radio-button input:disabled + label:before { cursor: default; display: none; }
.i-radio-button input:disabled + label:after { cursor: default; opacity: 0; }

/* tap animation */

@-webkit-keyframes tap-animate {
    0% { opacity: 1; -webkit-transform: scale(2.5); transform: scale(2.5); }
    50% { -webkit-transform: scale(3.5); transform: scale(3.5);   }
    100% { -webkit-transform: scale(2.5); transform: scale(2.5); }
}
@-moz-keyframes tap-animate {
    0% { opacity: 1; -webkit-transform: scale(2.5); transform: scale(2.5); }
    50% { -webkit-transform: scale(3.5); transform: scale(3.5);   }
    100% { -webkit-transform: scale(2.5); transform: scale(2.5); }
}
@-o-keyframes tap-animate {
    0% { opacity: 1; -webkit-transform: scale(2.5); transform: scale(2.5); }
    50% { -webkit-transform: scale(3.5); transform: scale(3.5);   }
    100% { -webkit-transform: scale(2.5); transform: scale(2.5); }
}
@keyframes tap-animate {
    0% { opacity: 1; -webkit-transform: scale(2.5); transform: scale(2.5); }
    50% { -webkit-transform: scale(3.5);transform: scale(3.5);   }
    100% { -webkit-transform: scale(2.5);  transform: scale(2.5); }
}

/* radio button sliders */

.i-radio-group { border-spacing: 0; line-height:normal; margin: 0; padding: 0; display: inline-block; }
.i-radio-group td { padding: 0 !important; margin: 0 !important; }
.i-radio-group input { display: none; }
.i-radio-group input + label { display: inline-block; padding: 9px 9px 9px 24px; cursor: pointer; border-radius: 2px; }
.i-radio-group input + label i { margin-right: 6px; }
.i-radio-group input:checked + label { background:#00A900; color:#fff; }
.i-radio-group input + label::before { top: 12px; opacity: .5; color:#888; margin: 0; -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
.i-radio-group input:checked + label::before { color:#fff; }
.i-radio-group input + label::after { display: none; }

/* Move Up / Move Down Buttons */

.i-button-move-up { display: inline-block; background: #fff url(../Images/Misc_ArrowUp.gif) no-repeat center center; padding: 0 4px; height: 28px; width: 28px; cursor: pointer; border: 1px #ddd solid; }
.i-button-move-up:hover { background: #eee url(../Images/Misc_ArrowUp.gif) no-repeat center center; border-color:#aaa; }

.i-button-move-down { display: inline-block; background: #fff url(../Images/Misc_ArrowDown.gif) no-repeat center center; padding: 0 4px; height: 28px; width: 28px; cursor: pointer; border: 1px #ddd solid; }
.i-button-move-down:hover { background: #eee url(../Images/Misc_ArrowDown.gif) no-repeat center center;  border-color:#aaa; }

/* button */
.i-button { display: inline-block; cursor: pointer;  padding: 9px; border-width: 1px; border-style:solid; border-radius: 2px; }
.i-button-2x { padding: 12px; }

/* disabled input elements */
.disabled, .aspNetDisabled { cursor: default; opacity: 0.3 !important; }

/*  ----- slider (yes / no radio buttons) ----- */

.i-slider { line-height: 25px; display: inline-block; border: 1px solid #bbb; border-radius: 2px; overflow: hidden; white-space: nowrap; width: 50px; vertical-align:middle; cursor:pointer; }
.i-slider input { position: absolute; z-index: 2; opacity: 0; border: none; margin: 0; background: none; cursor:pointer; }
.i-slider input[type=radio] + label { cursor:pointer !important; float: left; position: relative; text-indent: -500000px; background:#fff; width: 25px;  }
.i-slider input[type=radio] + label:before { text-indent: 0; display:inline-block; position: absolute; z-index: 1; top: 6px; text-align: center; width: 25px; font-size: 8pt; height: 100%; left: 0; color:#ddd; font: normal normal normal 14px/1 FontAwesome; content: '\f0c9'; }
.i-slider input[type=radio]:checked + label { background:#bbb; }
.i-slider input[type=radio]:checked + label:before { text-indent: 0; display:inline-block; position: absolute; z-index: 1; top: 6px; text-align: center; width: 25px; height: 100%; left: 0; color:#fff; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; content: '\f00d'; }
.i-slider input[type=radio]:first-child:checked + label {  background:#00A900;}
.i-slider input[type=radio]:first-child:checked + label:before { content: '\f00c'; }

/* ----- call out validation ----- */

.i-validator-callout { border-spacing: 0 !important; }
.i-validator-callout div, 
.i-validator-callout td { padding: 4px !important; margin: 0 !important; border:solid 1px transparent; background-color: none !important; font-size: 10pt; color: #ffffff; }

.ajax__validatorcallout_callout_arrow_cell_bottomleftpos, .ajax__validatorcallout_callout_cell { display: none; }
.ajax__validatorcallout_popup_table:before {
    content: '-';
    position: absolute;
    text-indent: -40000px;  
    width: 0;
    height: 0;  
    display: inline-block;
    padding: 0;
    top: -6px;
    left: 45%;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #242424;
}
.ajax__validatorcallout_popup_table {  position: absolute; z-index:999999; opacity: 1.0 !important; border:solid 1px #ffffff !important; background-color: #242424 !important; }
.ajax__validatorcallout_popup_table table { display: none; }
.ajax__validatorcallout_icon_cell { vertical-align: top; width: 30px; }
.ajax__validatorcallout_icon_cell img { margin: 12px; }
.ajax__validatorcallout_arrow_cell div, .ajax__validatorcallout_close_button_cell { height: 0; width: 0; display: none; }
.ajax__validatorcallout_innerdiv { display : none; }
.ajax__validatorcallout_error_message_cell { line-height:26px; padding:6px 6px 6px 0 !important; }

/* ----- search input ----- */

.i-search-input { float: left; position: relative; border-width: 1px; border-style: solid; height: 38px; width: 100%; overflow:hidden; }
.i-search-input input { border-width: 0 !important; border: none !important; display: block; height: 28px; width: 100%; margin: 0; padding: 5px; outline: none; }

.i-search-button { position: absolute; top: 1px; overflow: hidden; display: block; right: 1px; text-align: center; margin: 0; cursor: pointer; }
.i-search-button span { display:inline-block; width: 36px; height: 36px; border-style: solid; border-width: 0; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in;  transition: all 0.2s ease-in; }
.i-search-button i { text-align: center; line-height: 32px; }
.i-search-button-filter { right: 38px !important; }
.i-search-button .i-btn-bg { display: none; }

/* ----- drop down replacement - JQ plug-in ----- */

.ddcommon { outline: 0; position:relative; vertical-align: middle; display:inline-block; line-height:normal; margin-right: 6px; }
.ddcommon.borderRadiusTp ul li:last-child{border-bottom:0 none #c3c3c3; }
.ddcommon.borderRadiusBtm ul li:first-child{border-bottom: 1px solid #c3c3c3; }
.ddcommon .disabled img, .ddcommon .disabled span, .ddcommon.disabledAll{ -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); color:#999999; opacity: .5; }
.ddcommon .clear{clear:both}

.ddcommon input.text{ position:absolute; outline:none; display:block; width:98%; height:98%; left:0; top:0; }
.ddOutOfVision { height: 0; overflow: hidden; }

.ddcommon .divider{width:0; height:100%; position:absolute;}
.ddcommon .ddTitle .arrow{display:inline-block; position:absolute; top:4px; right:2px;}

.ddcommon .ddTitle { outline: 0; padding:0; position:relative; height: 30px; overflow:hidden; display:inline-block; }
.ddcommon .ddTitle .ddTitleText{ display:block; position:relative; }
.ddcommon .ddTitle .ddTitleText .ddTitleText{padding:0; }
.ddcommon .ddTitle .ddTitleLabel { position: absolute; width: auto; display: inline-block; }

.ddcommon .ddTitle .description{display:block;}
.ddcommon .ddTitle .ddTitleText img{position:relative; margin: 0; padding: 0; vertical-align:middle; background:#ff0000; float:left }

.ddcommon .ddChild{position:absolute; display:none;width:100%; overflow-y:auto; overflow-x:hidden; top:0; z-index:9999; transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in;}
.ddcommon .ddChild li{clear:both; white-space:nowrap; }
.ddcommon .ddChild li .description{display:block;}
.ddcommon .ddChild li img{border:0 none; position:relative;vertical-align:middle;float:left}
.ddcommon .ddChild li.optgroup{padding:0;}
.ddcommon .ddChild li.optgroup .optgroupTitle{padding:0 5px; font-weight:bold; font-style:italic}
.ddcommon .ddChild li.optgroup ul li{padding:5px 5px 5px 15px}
.ddcommon .noBorderTop{border-top:none 0  !important; padding:0; margin:0;}

.dd .i-text-box { padding: 0 !important; }
.dd .divider{ border-left-width:1px; border-right-width: 0; border-top-width: 0; border-bottom-width: 0; border-style: solid; right:24px;}
.dd .ddTitle  .ddTitleText img, .dd .ddTitleActive  .ddTitleText img {vertical-align: middle; margin: 0; margin-right: 9px; }

.dd .ddTitle {text-align: left; cursor: pointer; padding: 0; border-width: 1px; border-style:solid; }
.dd .ddTitle .ddTitleText { padding: 6px 2px; }
.dd .ddTitle .arrow{width:16px;height:16px; margin-top: 3px; font-size: 14px;}

.dd .ddChild{ text-align: left; border-width: 1px; border-style: solid; left:0; }
.dd .ddChild li{padding:9px; cursor: pointer; }

.dd .ddChild li.hover{border: 0; }
.dd .ddChild li img{margin:0 12px 0 0;}
.dd .ddChild li.optgroup{padding:0;}
.dd .ddChild li.optgroup .optgroupTitle{padding:0 5px; font-weight:bold; font-style:italic}
.dd .ddChild li.optgroup ul li{padding:5px 5px 5px 15px}

.dd .ddChild::-webkit-scrollbar { background:#dddddd; width: 6px; }
.dd .ddChild::-webkit-scrollbar-thumb:vertical { margin: 0 6px; background-color: #aaaaaa; -webkit-border-radius: 8px; }
.dd .ddChild::-webkit-scrollbar-button:start:decrement,
.dd .ddChild::-webkit-scrollbar-button:end:increment {
  height: 0; display: block;
}

.ddTitleTextAnimate {    
    -webkit-animation: dd-title-animate .2s ease-in-out; /* Safari 4+ */
    -moz-animation:    dd-title-animate .2s ease-in-out; /* Fx 5+ */
    -o-animation:      dd-title-animate .2s ease-in-out; /* Opera 12+ */
    animation:         dd-title-animate .2s ease-in-out; /* IE 10+ */
}

@-webkit-keyframes dd-title-animate {
    0% { margin-top:0; }
    49% { margin-top: 50px; }
    50% { opacity: 0; }
    51% { margin-top: -50px; opacity: 1;  }
    100% { margin-top: 0; }
}
@-moz-keyframes dd-title-animate {
    0% { margin-top:0; }
    49% { margin-top: 50px; }
    50% { opacity: 0; }
    51% { margin-top: -50px; opacity: 1;  }
    100% { margin-top: 0; }
}
@-o-keyframes dd-title-animate {
    0% { margin-top:0; }
    49% { margin-top: 50px; }
    50% { opacity: 0; }
    51% { margin-top: -50px; opacity: 1;  }
    100% { margin-top: 0; }
}
@keyframes dd-title-animate {
    0% { margin-top:0; }
    49% { margin-top: 50px; }
    50% { opacity: 0; }
    51% { margin-top: -50px; opacity: 1;  }
    100% { margin-top: 0; }
}

.ddVisible {     
    -webkit-animation: dd-animate .2s ease-out; /* Safari 4+ */
    -moz-animation:    dd-animate .2s ease-out; /* Fx 5+ */
    -o-animation:      dd-animate .2s ease-out; /* Opera 12+ */
    animation:         dd-animate .2s ease-out; /* IE 10+ */
}

@-webkit-keyframes dd-animate {
    0% { margin-top: -30px; opacity: 0;   }
    100% { margin-top: 0; opacity: 1; }
}
@-moz-keyframes dd-animate {
    0% { margin-top: -30px; opacity: 0;  }
    100% { margin-top: 0; opacity: 1; }
}
@-o-keyframes dd-animate {
    0% { margin-top: -30px; opacity: 0;  }
    100% { margin-top: 0; opacity: 1; }
}
@keyframes dd-animate {
    0% { margin-top: -30px; opacity: 0;  }
    100% { margin-top: 0; opacity: 1; }
}

/* ----- asides navigation ----- */

.i-asides-dimmer { position: fixed; visibility: hidden; width: 100%; height: 100%; z-index: 2; opacity: 0; background-color:rgba(0,0,0,.7); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.i-asides-dimmer-visible { opacity: 1; visibility: visible; }

.i-asides { opacity: 0; border: 0; border-style: solid; border-right-width: 1px; border-color:#333; border-left-width: 0; position: fixed; line-height: 20px !important; z-index:3; overflow: hidden; height: 100%; overflow-y:auto; width: 260px; left: -260px; top: 0; float: left; background:#242424; color:#fff; font: normal 10pt Arial;  -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.i-asides-right { border-left-width: 1px; border-right-width:0; left: auto !important; right: -260px; }
.i-asides-visible { opacity: 1; visibility: visible; }
.i-asides-visible-left { left: 0 !important; }
.i-asides-visible-right { right: 0 !important; }

.i-asides a { color: #ddd;  }
.i-asides a:hover { text-decoration: none; }
.i-asides header { border:0; border-style:solid; border-bottom-width: 1px; !important; margin: 0 !important; padding: 0 !important; }

.i-asides header h2.title { float: left; padding: 14px 0 14px 10px; margin: 0; font: bold 10pt Arial !important; }
.i-asides header a.close { float: right; width: 32px; height: 32px; text-align: center; margin: 6px 5px; line-height:32px; border-radius:2px; }
.i-asides header a.close:hover { background:#444; }
.i-asides header a.close i { color:#fff;  }
.i-asides section.i-asides-body { float: left; margin: 12px; width: 236px; }
.i-asides nav ul { float: left; width: 100%; list-style: none; padding: 0; margin: 0;}
.i-asides nav li { display: block; width: 100%; }      
.i-asides nav a { color:#ddd; text-decoration:none; border: 0 !important; display: block; margin: 0; background:transparent; width: 100%; }
.i-asides nav a .padding { display: inline-block; padding: 12px 9px; }
.i-asides nav a i { vertical-align: middle; margin-right: 6px; }
.i-asides nav a:hover { color: #fff; background:#444 !important; }
.i-asides nav a.selected { color:#fff; background: #444 !important; }
.i-asides hr { height: 0;  border: 1px solid #444; border-bottom: 0 solid transparent; }
.i-asides-fill-left { left: -100%; width: 100%; }
.i-asides-fill-right { right: -100%; width: 100%; }

.i-asides::-webkit-scrollbar { background:#242424; width: 6px; }
.i-asides::-webkit-scrollbar-thumb:vertical { margin: 0 6px; background-color: #555; border-radius: 12px;  }
.i-asides::-webkit-scrollbar-button:start:decrement,
.i-asides::-webkit-scrollbar-button:end:increment { height: 0; display: block; }

.i-responsive-asides-toggle { display: none; margin-bottom: 16px; }

.i-asides .i-asides-search { float: none; display: block; width: 97%; margin: 12px auto; }

.i-asides a.i-btn-asides { color:#FFFFFF; background-color:#333;border-color:#333; }
.i-asides a.i-btn-asides:hover {color:#FFFFFF;background-color:#444;border-color:#444;}


/* ----- photo & user banner radio button image lists ----- */

.i-image-radio-buttons { width:100%; }
.i-image-radio-buttons label { float: left; position: relative; padding: 0; margin: 0; margin: 24px 24px 24px 0; cursor: pointer; background: none; height: 80px; }
.i-image-radio-buttons input[type=radio] { display: none; }
.i-image-radio-buttons input[type=radio]:checked + label:before,
.i-image-radio-buttons input[type=radio] + label.selected:before { position: absolute; z-index: 20; top: 5px; right: 0; padding: 6px; background:#00A900; color:#fff; border: 2px solid #fff; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; content: '\f00c'; border-radius: 50%; }
.i-image-radio-buttons-photos img { border-radius: 50%; width: 72px; height: 72px; border: 3px solid transparent; box-shadow: 0 0 3px #888; }
.i-image-radio-buttons-photos img:hover { box-shadow: 0 0 3px #777; opacity: 1.0; }
.i-image-radio-buttons-banners img { border-radius: 4px; width: 174px; height: 66px; border: 3px solid transparent; box-shadow: 0 0 3px #888; }
.i-image-radio-buttons-banners img:hover { box-shadow: 0 0 3px #777; opacity: 1.0; }

/* controls the icon & no results text shown when views have no data */
.i-no-results { text-align: center; }
.i-no-results h2 { color:#ccc; font-family:open_sanslight; font-weight: normal !important; margin: 12px 0;  }
.i-no-results i { font-size: 100px; color:#ddd; }

/* ----- Pip / Badge CSS ----- */

.i-pip { display: inline-block; position: relative; vertical-align: middle; border-radius: 50%; line-height: 26px; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }
.i-pip .i-pip-bg { float: none; padding:0; width: 100%; height: 100%; position: absolute; top: 0; left: 0;  }
.i-pip span { float: left; text-align: center; width: 26px; height: 26px; position: relative; }
.i-pip span i {font-size: 8pt;  }

.i-pip-2x { line-height: 60px; }
.i-pip-2x span { width: 52px; height: 52px; }
.i-pip-2x span i {font-size: 18pt;  }

.i-pip-3x { line-height: 100px; }
.i-pip-3x span { width: 82px; height: 82px; }
.i-pip-3x span i {font-size: 36pt;  }

.i-pip-group .i-pip { float: left; margin-right: 9px; }

/* ----- Footer CSS ----- */

.i-footer { line-height: 22px; text-align: center; width: 100%; font-size: 8pt; margin: 24px 0 48px 0; padding-top: 24px; border-top: 1px solid #ddd;  }

/********** New common elements for InstantKB 2016 ******************* */

/* photo & name shown in user profile main */

.i-user-menu { width: 95%; overflow:hidden; margin: 6px 9px 0 9px; }
.i-user-menu .i-tooltip { float: left; }
.i-user-menu .i-username { float: left; padding: 0; margin: 0; font-weight: normal; max-width: 175px; overflow:hidden; text-overflow:ellipsis; margin: 3px 0 0 9px; font: normal 14pt open_sanslight, Tahoma, Verdana; line-height:normal; }
.i-user-menu .i-photo a:hover { background: transparent !important; }

/* navigation bar for smaller screen sizes */

.i-mobile-nav { float: left;border: 0; width: 100%; display: none; border: 0; border-bottom-width: 1px; border-style: solid; }
.i-mobile-nav .left { float: left; width: 25%; padding: 0; margin: 0; }
.i-mobile-nav .left .btn { float: left; }
.i-mobile-nav .middle { color: #222; float: left; width: 50%; padding: 0; margin: 4px 0px; text-align: center; white-space:nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; }
.i-mobile-nav h1 { font-family:open_sanslight; font-weight: normal; font-size: 13pt !important; margin: 0; line-height: 34px; display: inline;  }
.i-mobile-nav .right { float: left; width: 25%; padding: 0; margin: 0; }
.i-mobile-nav .right .btn { float: right; }
.i-mobile-nav a.btn { float: left; border: 0 !important; }
.i-mobile-nav a.btn span { float: left; margin:0; padding: 12px 20px; }
.i-mobile-nav a.btn i, .mobile-menu a.btn i { font-weight: normal; font-size: 16pt; }

/* new common toolbar for InstantKB 2016 */

.i-toolbar { float: left; width: 100%; border-width: 1px; border-style: solid; line-height: normal; border-radius: 2px;  }
.i-toolbar .i-tooltip, 
.i-toolbar .i-menu-link { float: left;  }
.i-toolbar .i-tabs-o { background: transparent !important; border-width: 0 !important; }
.i-toolbar .i-tabs-o a { margin: 0; text-transform:uppercase; }
.i-toolbar .i-tabs-o a .padding { padding: 12px 14px; }
.i-toolbar .i-tabs-o img { display: inline; margin: 0; max-height: 14px;  }
.i-toolbar li.seperator { float: left; width: 1px; margin: 0; height: 44px; background:#ddd; border:0; }

.i-toolbar .i-float-left a.i-btn {  margin: 4px 0 4px 9px; }
.i-toolbar .i-float-right a.i-btn {  margin: 4px 9px 4px 0; }
.i-toolbar a .fa { font-size: 10pt; min-height: 16px; vertical-align:middle;  }
.i-toolbar .i-pip-group { float: left; margin-left: 12px; margin-top: 7px; }

/* poll bar */

.i-poll-bar-wrapper { float: left;  width: 100%; vertical-align: middle; line-height: normal; background:rgba(125,125,125,.3); }
.i-poll-bar { float: left; line-height: normal;  height: 32px; }
.i-poll-bar img { float: left;  margin: 0; height: 32px; border-width: 0; padding: 0; }
.i-poll-bar span { display: inline-block; padding: 6px; }

/* user level image */
.i-user-level {display: inline-block; white-space:nowrap; margin: 0; padding:0; }
.i-user-level .pip { width: 13px; height: 13px; margin-left: 2px;}

/* search rank image */

.i-search-rank { display: inline-block; vertical-align: middle; }
.i-search-rank img { width: 68px; height: 11px; margin: 0 6px; }

/* rotates */
.i-rotate-45 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-45);
    -webkit-transform: rotate(-45deg) !important;
    -ms-transform: rotate(-45deg) !important;
    -moz-transform: rotate(-45deg) !important;
    -o-transform: rotate(-45deg) !important;
    transform: rotate(-45deg) !important;
}
.i-rotate-90 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-45);
    -webkit-transform: rotate(-90deg) !important;
    -ms-transform: rotate(-90deg) !important;
    -moz-transform: rotate(-90deg) !important;
    -o-transform: rotate(-90deg) !important;
    transform: rotate(-90deg) !important;
}
.i-rotate-180 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-45);
    -webkit-transform: rotate(-180deg) !important;
    -ms-transform: rotate(-180deg) !important;
    -moz-transform: rotate(-180deg) !important;
    -o-transform: rotate(-180deg) !important;
    transform: rotate(-180deg) !important;
}
.i-rotate-270 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-45);
    -webkit-transform: rotate(-270deg) !important;
    -ms-transform: rotate(-270deg) !important;
    -moz-transform: rotate(-270deg) !important;
    -o-transform: rotate(-270deg) !important;
    transform: rotate(-270deg) !important;
}

.i-rotate-45-forward {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-45);
    -webkit-transform: rotate(45deg) !important;
    -ms-transform: rotate(45deg) !important;
    -moz-transform: rotate(45deg) !important;
    -o-transform: rotate(45deg) !important;
    transform: rotate(45deg) !important;
}

/* ------- attachment space image ------- */

.i-available-space-bar { display:inline-block; max-width: 350px; width: 100%; text-align: center; }
.i-available-space-bar img { display:inline-block; border: 1px solid #ccc; width: 100%; }

/* ------- paged auto complete suggestion list ------- */

.i-suggest { float: left; display: none;  z-index: 1; left: 0; top: 0;  -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out; }
.i-suggest ul { float: left; width: 100%; display: block; padding: 0; margin: 0; }
.i-suggest li { float: left; width: 100%; list-style: none; padding: 0; margin: 0; }
.i-suggest li a { float: left; width: 100%; }
.i-suggest li a:hover { text-decoration: none; }
.i-suggest li span.padding { float: left; padding: 9px; overflow: hidden; text-overflow:ellipsis; }
.i-suggest li span.left { float: left; white-space:nowrap; max-width: 400px; overflow: hidden; -ms-text-overflow:ellipsis; -o-text-overflow:ellipsis; text-overflow:ellipsis; }
.i-suggest li span.right { float: right; }

.i-suggest li.pager .pager-left { float: left; width: 25%; }
.i-suggest li.pager .pager-center { float: left; width: 50%; text-align:center; }
.i-suggest li.pager .pager-center span { display: inline-block; padding: 9px; }
.i-suggest li.pager .pager-right { float: left; width: 25%; }
.i-suggest li.pager div { text-align: center; }
.i-suggest li.pager a span { width: 100%; padding-left: 0; padding-right: 0; text-align: center; }

/* ------ Validation Icon CSS ------ */

.i-required-field-icon { text-indent:-5000px; }
.i-required-field-icon:after { font: normal normal normal 18px/1 FontAwesome; color:#ff0000; font-size: 10pt; content: '\f05a'; }

/* ------ Top Navigation CSS ------ */

.i-top-nav {overflow: hidden; background-color: #fff;}
.i-top-nav a {float: left; color: #f2f2f2; text-align: center; padding-left: 30px; padding-right: 30px; text-decoration: none; font-size: 17px;}
.i-top-nav a:hover {background-color: #fff; color: white; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #4BC1F2; text-decoration:none;}
.i-top-nav a.active {background-color: #fff; color: #000; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #4BC1F2;}