/* Reset */

td, th {
    padding: 1px;
}

td {
    font-size: 11px !important;
}

caption {
    font-size: 11px !important;
}

body, form, div, li,
h1, h2, h3, h4, h5, h6,
pre, form, fieldset,
p, blockquote {
    padding: 0;
}

fieldset, img {
    border: 0;
}

ol, ul {
    list-style: none;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

/* Common */

html {
    overflow-y: scroll;
}

body {
    background-color: white;
    font: 11px Verdana;
    padding: 10px 5px 0px 5px;
    margin: 0;
}

.TextContent {
    line-height: 14px;
}

.DescriptionTitle {
    clear: both;
    padding: 45px 0 8px;
    margin: 0 0 10px;
    font-size: 16px;
    background: url(PageTitleBack.png) no-repeat left bottom;
    color: #711e82;
}

.TextContent p,
.TextContent ul li,
.TextContent ol li,
.TextContent code {
    margin-bottom: 10px;
}

.TextContent ul,
.TextContent ol {
    list-style: outside;
    padding: 0;
    margin-left: 32px;
}

.TextContent ul {
    list-style-type: disc;
}

.TextContent ol {
    list-style-type: decimal;
}

.TextContent a {
    color: #1b3f91;
    text-decoration: none;
}

    .TextContent a:hover {
        text-decoration: underline;
    }



/* Core Layout */

.MainBackground {
    background: url(bodyback.png) #ffffff;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #999;
}

.MainBackgroundATH {
    background: url(bodybackath.png) #ffffff;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #999;
}

.Wrapper {
    text-align: center;
    background: url(WrapperBack.png) repeat-x bottom;
}

.Content {
    margin: 0 auto;
    text-align: left;
}

.ContentLeft {
    float: left;
    width: 1032px;
    background: url(ContentLeftBack.png) no-repeat left bottom;
}

.ContentLeftInner,
.ContentLeftInner_Intro {
    float: left;
    width: 266px;
}

.ContentLeftInner {
    background: url(ContentLeftInnerBack.png) no-repeat left top;
}

.ContentLeftInner_Intro {
    background: url(ContentLeftInnerBack_Intro.png) no-repeat left top;
}


.FooterLeft {
    float: left;
    width: 1032px;
    background: url(FooterLeftBack.png) no-repeat left bottom;
}

.FooterLeftInner {
    float: left;
    width: 266px;
    text-align: center;
    padding-top: 83px;
}

.ContentCenter {
    float: right;
    width: 766px;
}

.FooterCenter {
    float: right;
    width: 766px;
    height: 206px;
    background: url(FooterCenterBack.png) repeat-x bottom;
}

.ContentRight {
    float: left;
    width: 100%;
}

.ContentRightInner,
.ContentRightInner_Intro {
    float: right;
    width: 48px;
}

.ContentRightInner {
}

.ContentRightInner_Intro {
}

.FooterRight {
    clear: both;
    float: left;
    width: 100%;
    background: url(FooterRightBack.png) no-repeat right bottom;
}


/* Title */

.TitleLogo {
    /*height: 56px;*/
    padding: 13px 0 0 23px;
}

    .TitleLogo img {
        position: relative;
    }

/* Navigation bar */

.Navigation {
    padding: 0px 0 0 25px;
    /*width: 239px;*/
}

.NavigationBar {
    padding: 0;
}

    .NavigationBar .dxnb-header {
        font-weight: bold;
        padding: 3px 0 31px;
        background: url(NavigationBarGroupTop.png) no-repeat center bottom;
    }

    .NavigationBar .dxnb-headerCollapsed {
        padding: 3px 0;
        cursor: pointer;
    }

    .NavigationBar .dxnb-header,
    .NavigationBar .dxnb-headerCollapsed {
        padding-left: 21px;
        line-height: 15px;
    }

    .NavigationBar .dxnb-headerCollapsedHover {
        background: url(NavigationBarHover.png) repeat-y top left;
    }

    .NavigationBar .dxnb-header a,
    .NavigationBar .dxnb-headerCollapsed a {
        color: #2e3139;
        text-decoration: none;
    }

        .NavigationBar .dxnb-header a:hover {
            text-decoration: none;
            cursor: default;
        }

    .NavigationBar .dxnb-header .dxnb-btn,
    .NavigationBar .dxnb-headerCollapsed .dxnb-btn {
        background-image: url(Sprite.png);
        background-repeat: no-repeat;
        width: 7px;
        height: 7px;
        margin-top: 5px;
        margin-left: -14px;
        float: left;
        cursor: pointer;
    }

    .NavigationBar .dxnb-header .dxnb-btn {
        background-position: -367px -1px;
    }

    .NavigationBar .dxnb-headerCollapsed .dxnb-btn {
        background-position: -359px -1px;
    }

    .NavigationBar .dxnb-content {
        padding: 0 0 28px 6px;
        margin-bottom: 1px;
        background: url(NavigationBarGroupBottom.png) no-repeat center bottom;
    }

    .NavigationBar .dxnb-item {
        padding: 3px 0 3px 15px;
        line-height: 15px;
    }

        .NavigationBar .dxnb-item a {
            color: #1b3f91;
            text-decoration: none;
        }

            .NavigationBar .dxnb-item a:hover {
                color: #1b3f91;
                text-decoration: underline;
            }

    .NavigationBar .dxnb-itemSelected {
        font-weight: bold;
        background: url(Sprite.png) no-repeat -375px 6px;
    }

        .NavigationBar .dxnb-itemSelected a,
        .NavigationBar .dxnb-itemSelected a:hover {
            color: Black;
            text-decoration: none;
            cursor: default;
        }

    .NavigationBar .NewImage,
    .NavigationBar .UpdatedImage {
        background-image: url(Sprite.png);
        background-repeat: no-repeat;
        width: 15px;
        height: 15px;
        border: 0;
        float: right;
        margin-left: 5px;
        margin-right: 8px;
    }

    .NavigationBar .NewImage {
        background-position: -207px -309px;
    }

    .NavigationBar .UpdatedImage {
        background-position: -207px -326px;
    }


/* Tabs */

.TabsArea {
    height: 0px;
}

.TabControl {
    float: right;
}

    .TabControl .dxtc-strip {
        list-style: none outside none;
        float: left;
        padding: 0;
        margin: 0;
    }

        .TabControl .dxtc-strip li {
            display: block;
            margin: 0;
            float: left;
        }

.ActiveTab, .Tab {
    width: 68px;
    float: left;
}

    .ActiveTab div {
        padding: 6px 0 10px;
        float: left;
    }

    .ActiveTab .Left {
        width: 3px;
        overflow: hidden;
        background: url(Sprite.png) no-repeat 0px 0px;
    }

    .ActiveTab .Center {
        color: #343841;
        text-align: center;
        width: 62px;
        background: url(Sprite.png) repeat-x -3px 0px;
    }

    .ActiveTab .Right {
        width: 3px;
        overflow: hidden;
        background: url(Sprite.png) no-repeat -269px 0px;
    }

.Tab {
    text-align: center;
    padding: 6px 0 10px;
}

/* Intro Banner */

.BannerArea {
    height: 312px;
}

.BannerScreens {
    float: right;
}

.BannerLeft {
    float: left;
    width: 380px;
    padding: 40px 0 0 29px;
}

.BannerText {
    height: 109px;
    padding-left: 8px;
}

    .BannerText h1 {
        font-size: 20px;
    }

    .BannerText h3 {
        font-size: 12px;
        margin-top: 10px;
    }

/* Banner Buttons */

.BannerButtons ul {
    padding: 0;
}

.BannerButtons li {
    float: left;
}

.BannerButton_LearnMore,
.BannerButton_LearnMoreHover,
.BannerButton_Download,
.BannerButton_DownloadHover,
.BannerButton_BuyNow,
.BannerButton_BuyNowHover,
.BannerButton_Videos,
.BannerButton_VideosHover {
    background: url(Sprite.png) no-repeat;
}


.BannerButton_LearnMore {
    background-position: -4px -171px;
}

.BannerButton_LearnMoreHover {
    background-position: -4px -43px;
}

.BannerButton_Download {
    background-position: -99px -171px;
}

.BannerButton_DownloadHover {
    background-position: -99px -43px;
}

.BannerButton_BuyNow {
    background-position: -177px -171px;
}

.BannerButton_BuyNowHover {
    background-position: -177px -43px;
}

.BannerButton_Videos {
    background-position: -255px -171px;
}

.BannerButton_VideosHover {
    background-position: -255px -43px;
}

/* Intro Hightlight Area */

.HilightArea {
    height: 157px;
}

    .HilightArea h2 {
        font-size: 16px;
        color: #40444f;
        text-align: center;
        padding: 16px 0 11px;
    }

/* Highlighted Accesos Lite Menu */

.HilightedAccesosMenu {
    padding-left: 40px;
}

    .HilightedAccesosMenu ul {
        padding: 0;
    }

    .HilightedAccesosMenu li {
        float: left;
    }

    .HilightedAccesosMenu .dxm-content {
        width: 150px;
        margin-right: 28px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
    }

    .HilightedAccesosMenu a {
        color: #909298;
        font-style: italic;
        text-decoration: none;
    }

        .HilightedAccesosMenu a:hover {
            text-decoration: underline;
        }

    .HilightedAccesosMenu img {
        display: block;
        border: solid 1px #c0c0c0 !important;
        margin-bottom: 6px;
    }

/* Intro Main Area */

.IntroArea {
    padding: 28px 37px 50px;
}

    .IntroArea h2 {
        font-size: 16px;
        margin-bottom: 10px;
    }

/* Intro Features */

.FeaturesArea {
    padding: 11px 0 0;
}

.FeatureImageArea {
    float: left;
    clear: both;
    width: 41px;
}

.FeatureTextArea {
    float: left;
    width: 300px;
}

    .FeatureTextArea h4 {
        font-weight: bold;
        padding: 5px 0;
    }

    .FeatureTextArea div {
        margin-bottom: 20px;
        margin-right: 31px;
    }

/* Demo pages */

.PageTitle {
    padding: 0px 40px 0px;
    font-size: 22px;
    background: url(PageTitleBack.png) no-repeat left bottom;
}

#DemoArea,
#CodeArea {
    padding: 30px 27px 50px;
}

/* Theme Selector */

#FiltersSelectorArea {
    float: right;
    margin: -11px 30px 0 0;
}

#FiltersSelectorButton {
    border: 1px white solid;
    cursor: pointer;
    float: right;
    width: 126px;
    height: 32px;
    margin-top: 1px;
    margin-left: 34px;
    background: url(ApplyChanges.png);
}



    #FiltersSelectorButton:hover,
    #FiltersSelectorButton.selected {
        border: 1px #B8BBC4 solid;
    }

#FiltersSelectorButtonBorder {
    background-color: white;
    width: 126px;
    height: 1px;
    overflow: hidden;
    position: absolute;
    z-index: 20000;
}

.FiltersSelectorPopup {
    border: 1px #B8BBC4 solid;
    background: white;
    padding: 0 12px;
}


#FiltersContainer {
    font-size: 16px;
    padding: 6px 3px;
    width: 480px;
}

.ThemeGroup {
    clear: both;
    padding: 8px 4px 2px;
}

.ThemeGroupMenu {
}

    .ThemeGroupMenu ul {
        padding: 0;
    }

    .ThemeGroupMenu li {
        float: left;
    }

    .ThemeGroupMenu .dxm-item {
        color: #909298;
        cursor: pointer;
        font-size: 11px;
        padding: 5px;
        text-align: center;
        font-style: italic;
    }

        .ThemeGroupMenu .dxm-item img {
            margin-bottom: 4px;
        }

    .ThemeGroupMenu .dxm-hovered {
        background-color: #E2EAFD;
        border: 1px #C7CFE0 solid;
        padding: 4px;
    }

    .ThemeGroupMenu .dxm-selected {
        background-color: #EEF0F3;
        border: 1px #909090 solid;
        color: #2E3139;
        cursor: default;
        font-weight: bold;
        padding: 4px;
    }

.ThemeDefaultImage {
    background-position: 0 0;
}

.ThemeDevExImage {
    background-position: -150px 0;
}

.ThemeOffice2010BlueImage {
    background-position: 0 -150px;
}

.ThemeOffice2010BlackImage {
    background-position: -150px -150px;
}

.ThemeOffice2010SilverImage {
    background-position: -300px -150px;
}

.ThemeOffice2003BlueImage {
    background-position: 0 -200px;
}

.ThemeOffice2003OliveImage {
    background-position: -150px -200px;
}

.ThemeOffice2003SilverImage {
    background-position: -300px -200px;
}

.ThemeAquaImage {
    background-position: -300px 0;
}

.ThemeGlassImage {
    background-position: 0 -50px;
}

.ThemeBlackGlassImage {
    background-position: -150px -50px;
}

.ThemePlasticBlueImage {
    background-position: -300px -50px;
}

.ThemeRedWineImage {
    background-position: 0 -100px;
}

.ThemeSoftOrangeImage {
    background-position: -150px -100px;
}

.ThemeYouthfulImage {
    background-position: -300px -100px;
}

#WorkArea {
    padding-left: 33px;
    padding-right: 33px;
    overflow: hidden;
}

    #WorkArea h1 {
        font-size: 24px;
    }

    #WorkArea h2 {
        font-size: 20px;
    }

    #WorkArea h3 {
        font-size: 18px;
    }

    #WorkArea h4 {
        font-size: 16px;
    }

    #WorkArea h5 {
        font-size: 14px;
    }

    #WorkArea h6 {
        font-size: 12px;
    }

    #WorkArea p {
        margin-bottom: 10px;
    }

#WorkAreaScroll {
    overflow-x: scroll;
}

    #WorkAreaScroll > table {
        background-color: #eaeaea;
    }

    #WorkAreaScroll ul > li > div {
        padding: 1px 10px 8px 10px;
    }

/* Event monitor */

.EventLogPanel {
    float: left;
    padding: 0px 10px 0px 0px;
}

.EventListPanel {
    line-height: 200%;
    float: left;
    white-space: nowrap;
}

    .EventListPanel input {
        vertical-align: middle;
    }


#EventLog,
.EventLog {
    background-color: White;
    border: solid 1px #9d9d9d;
    color: Black;
    font-family: Tahoma, Sans-Serif;
    font-size: 11px;
    overflow: auto;
    padding: 5px;
    width: 550px;
    height: 200px;
    margin-bottom: 8px;
}

/* Code area */

#CodeArea {
    display: none;
}

.CodeNavBar {
    padding: 0;
}

    .CodeNavBar .dxnb-header,
    .CodeNavBar .dxnb-headerCollapsed {
        font-size: 16px;
    }

    .CodeNavBar .dxnb-header {
        padding-bottom: 4px;
    }

    .CodeNavBar .dxnb-headerCollapsed {
        padding-bottom: 32px;
    }

    .CodeNavBar .dxWeb_nbCollapse,
    .CodeNavBar .dxWeb_nbExpand {
        cursor: pointer;
        width: 13px;
        height: 13px;
        background: url(Sprite.png) no-repeat;
        margin-right: 6px;
        margin-top: 3px;
        float: left;
    }

    .CodeNavBar .dxWeb_nbCollapse {
        background-position: -340px 0;
    }

    .CodeNavBar .dxWeb_nbExpand {
        background-position: -326px 0;
    }

    .CodeNavBar .dxnb-header a,
    .CodeNavBar .dxnb-headerCollapsed a {
        text-decoration: none;
        float: left;
    }

    .CodeNavBar .dxnb-header a {
        color: #CB3535;
    }

    .CodeNavBar .dxnb-headerCollapsed a {
        color: #2e3139;
    }

    .CodeNavBar .PopupLinkContainer {
        float: right;
        font-size: 11px;
        color: #1B3F91;
        cursor: pointer;
        padding-top: 2px;
    }

        .CodeNavBar .PopupLinkContainer:hover {
            text-decoration: underline;
        }

    .CodeNavBar .dxnb-content {
        border: solid 1px #d1d1d6;
        background: #fbfbfb url(CodeBack.png) repeat-x top;
        max-height: 360px;
        overflow: auto;
        margin-bottom: 34px;
        padding: 25px;
        white-space: nowrap;
        font-family: Courier New, Monospace;
        font-size: 11px;
    }

/* Footer */

.FooterText {
    padding: 18px 37px 0;
    height: 148px;
}

    .FooterText .Version {
        font-size: 17px;
    }

    .FooterText a {
        color: #1b3f91;
        text-decoration: none;
    }

        .FooterText a:hover {
            text-decoration: underline;
        }

.FooterLogo {
    background: url(Copyright.png) no-repeat;
    width: 194px;
    height: 56px;
}

.Copyright {
    text-align: right;
    color: #a7abb2;
}


/* Aux */

.Clear {
    display: block;
    clear: both;
    overflow: hidden;
    width: 1px;
    height: 0;
}

.LeftPadding {
    padding-left: 12px;
}

.TopPadding {
    padding-top: 6px;
}

.BottomPadding {
    padding-bottom: 6px;
}

.TopMargin {
    margin-top: 6px;
}

.BottomMargin {
    margin-bottom: 6px;
}

.Note {
    margin: 10px 0;
}

div.Spacer {
    overflow: hidden;
    width: 1px;
    height: 1px;
}

.NoWrap {
    white-space: nowrap;
}