@-webkit-viewport{width:device-width;zoom:1;user-zoom:fixed;}
@-moz-viewport{width:device-width;zoom:1;user-zoom:fixed;}
@-ms-viewport{width:device-width;zoom:1;user-zoom:fixed;}
@-o-viewport{width:device-width;zoom:1;user-zoom:fixed;}
@viewport{width:device-width;zoom:1;user-zoom:fixed;}


body {
    font: 16px "Segoe UI",Helvetica,Tahoma,Arial,Verdana,sans-serif;
    min-width: 280px;
    min-height: 700px;
    color: #495555;
}

a {
    text-decoration: none;
}

html, body, h1, h2, h3, h4, p, ul, span, dl {
    padding: 0;
    margin: 0;
    line-height: auto;
}

body {

    background: #1f2e2c; /* Old browsers */

background: 
    url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMGMxMTExIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAlIiBzdG9wLWNvbG9yPSIjMGMxMTExIiBzdG9wLW9wYWNpdHk9IjAuNyIvPgogICAgPHN0b3Agb2Zmc2V0PSIzMSUiIHN0b3AtY29sb3I9IiMwYzExMTEiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI4OCUiIHN0b3AtY29sb3I9IiMwYzExMTEiIHN0b3Atb3BhY2l0eT0iMC4wMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMGMxMTExIiBzdG9wLW9wYWNpdHk9IjAuNyIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+),
    url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI4NSUiIHN0b3AtY29sb3I9IiMxNjIwMWYiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMTYyMDFmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==),
    url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE2MjAxZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE1JSIgc3RvcC1jb2xvcj0iIzE2MjAxZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=),
    url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBjMTExMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1jb2xvcj0iIzMzNDk0NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzMzNDk0NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iIzMzNDk0NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwYzExMTEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: 
    -moz-linear-gradient(-45deg, rgba(12,17,17,1) 0%, rgba(12,17,17,0.7) 10%, rgba(12,17,17,0) 31%, rgba(12,17,17,0.01) 88%, rgba(12,17,17,0.7) 100%),
    -moz-linear-gradient(top, rgba(22,32,31,0) 85%, rgba(22,32,31,1) 100%),
    -moz-linear-gradient(top, rgba(22,32,31,1) 0%, rgba(22,32,31,0) 15%),
    -moz-linear-gradient(left, rgba(12,17,17,1) 0%, rgba(51,73,71,1) 30%, rgba(51,73,71,1) 70%, rgba(12,17,17,1) 100%); /* FF3.6+ */

background: 
    -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(12,17,17,1)), color-stop(10%,rgba(12,17,17,0.7)), color-stop(31%,rgba(12,17,17,0)), color-stop(88%,rgba(12,17,17,0.01)), color-stop(100%,rgba(12,17,17,0.7))),
    -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(22,32,31,1)), color-stop(15%,rgba(22,32,31,0))),
    -webkit-gradient(linear, left top, left bottom, color-stop(85%,rgba(22,32,31,0)), color-stop(100%,rgba(22,32,31,1))),
    -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(12,17,17,1)), color-stop(30%,rgba(51,73,71,1)), color-stop(70%,rgba(51,73,71,1)), color-stop(100%,rgba(12,17,17,1))); /* Chrome,Safari4+ */

background: 
    -webkit-linear-gradient(-45deg, rgba(12,17,17,1) 0%,rgba(12,17,17,0.7) 10%,rgba(12,17,17,0) 31%,rgba(12,17,17,0.01) 88%,rgba(12,17,17,0.7) 100%),
     -webkit-linear-gradient(top, rgba(22,32,31,1) 0%,rgba(22,32,31,0) 15%),
    -webkit-linear-gradient(top, rgba(22,32,31,0) 85%,rgba(22,32,31,1) 100%),
    -webkit-linear-gradient(left, rgba(12,17,17,1) 0%,rgba(51,73,71,1) 30%,rgba(51,73,71,1) 70%,rgba(12,17,17,1) 100%); /* Chrome10+,Safari5.1+ */

background: 
    -o-linear-gradient(-45deg, rgba(12,17,17,1) 0%,rgba(12,17,17,0.7) 10%,rgba(12,17,17,0) 31%,rgba(12,17,17,0.01) 88%,rgba(12,17,17,0.7) 100%),
    -o-linear-gradient(top, rgba(22,32,31,1) 0%,rgba(22,32,31,0) 15%),
    -o-linear-gradient(top, rgba(22,32,31,0) 85%,rgba(22,32,31,1) 100%),
    -o-linear-gradient(left, rgba(12,17,17,1) 0%,rgba(51,73,71,1) 30%,rgba(51,73,71,1) 70%,rgba(12,17,17,1) 100%); /* Opera 11.10+ */

background: 
    -ms-linear-gradient(-45deg, rgba(12,17,17,1) 0%,rgba(12,17,17,0.7) 10%,rgba(12,17,17,0) 31%,rgba(12,17,17,0.01) 88%,rgba(12,17,17,0.7) 100%),
    -ms-linear-gradient(top, rgba(22,32,31,1) 0%,rgba(22,32,31,0) 15%),
    -ms-linear-gradient(top, rgba(22,32,31,0) 85%,rgba(22,32,31,1) 100%),
    -ms-linear-gradient(left, rgba(12,17,17,1) 0%,rgba(51,73,71,1) 30%,rgba(51,73,71,1) 70%,rgba(12,17,17,1) 100%); /* IE10+ */

background: 
    linear-gradient(135deg, rgba(12,17,17,1) 0%,rgba(12,17,17,0.7) 10%,rgba(12,17,17,0) 31%,rgba(12,17,17,0.01) 88%,rgba(12,17,17,0.7) 100%),
    linear-gradient(to bottom, rgba(22,32,31,1) 0%,rgba(22,32,31,0) 15%),
    linear-gradient(to bottom, rgba(22,32,31,0) 85%,rgba(22,32,31,1) 100%),
    linear-gradient(to right, rgba(12,17,17,1) 0%,rgba(51,73,71,1) 30%,rgba(51,73,71,1) 70%,rgba(12,17,17,1) 100%); /* W3C */

}


/* Getting Started Page */

article.help-content section.igsb-help {
    padding-bottom: 20px;
}

article.help-content h1,
article.help-content h2,
article.help-content h3,
article.help-content h4 {
    font-family: 'Open Sans',sans-serif;
    font-style: normal;
}
article.help-content h2 {
    font-size: 36px;
    line-height: 62px;
    font-weight: 300;
}
article.help-content h3 {   
    color: #F8653A;
    font-size: 24px;
    line-height: 36px;
    font-weight: 400;
    margin-top: 20px;
}
article.help-content h4 {  
    font-size: 18px;
    line-height: 32px;
    font-weight: 600;
}

article.help-content dt {
    margin-top: 5px;
    font-weight: 600;
}


.igsb-highlight {
    color: #F8653A;
}

#gettingStartedFooter {
    background-color: #FFFFFF;
    padding-top: 20px;
}

.prodNavContainer {
}

.help-content {
    margin-right: 50px;
    padding-top: 10px;
}

.prodNavTabs {
    position: relative;
    width: 60%;
}


.headerIcon {
    display: block;
    margin: 12px auto 8px;    
    max-width: 450px;    
}
        
    .headerIcon img {
        width: 100%;
        border: none;
    }

    .headerIcon:hover {
        cursor: pointer;
    }

    .tablet-size-logo, 
    .phone-size-logo {
         display: none;
    }

table.headerArea {
    margin-left:33%; 
    margin-right:33%; 
    display: inline-block !important;
    width: 33%;
    height: 100px;
    text-transform: uppercase;
}

.headerDesc {
    font-family: Verdana;
    font-size: 9px !important;
    width: 100%;
    text-align: left;
}

.headerTitle {
    font-size: 30px !important;
    width: 100%;
}

.footerIcon img {
    width: 100%;
    border:none;
}

.footerIcon {
    text-align: center;
    display: block !important;
    margin: 0 auto 20px;   
    max-width: 250px !important;  
}


.footerNav {
    text-align: center;
}

#sampleBrowserContainer {
    margin: 0 auto;
    max-width: 1400px;
    overflow: hidden;
}

#mainContainer {
    /*float: left;*/
    margin: 0 auto;
    max-width: 1100px;
    padding: 0;
    z-index: 2;
}

    #mainContainer > header {
        height: 177px;
    }

        #mainContainer > header > div {
            padding-left: 20px;
            /*display:inline;*/
        }

        #mainContainer > header > h1 {
            color: lightgrey;
            margin: 8px 0;
            padding-right: 20px;
            text-align: center;
        }
    #mainContainer .main-content {
        background: #ffffff;
        min-height: 1100px;
    }

    #mainContainer .main-error-content {
        background: #ffffff;     
    }

/* Min-width for OldIE */
.OldIE body  {
    min-width: 1100px!important;
}

.sbContainerError {
    width: 80%;
}
.showcaseSamplesLink {
    color: #F8653A;
    font-weight: bold;
}
.showcaseSamplesLink:hover {
    text-decoration: underline;
}

.loaderCss {
    position: fixed;
    width: 100%;
    height: 50px;
    background: url(../images/loading.gif) 30% 30% no-repeat;
}

footer {
}
/* --- ShowCase Sample Page*/
#showCaseSampleList {
    margin-top: 50px;
}
.showCaseSampleDiv {
    width: 100%; 
    display: inline-block;  
    padding-bottom: 40px;
}
.showCaseSampleImg {
    /*width: 37%; 
    padding-left: 2%;
    padding-right: 1%;*/
    float: left; 
    display: inline-block;
    max-width: 420px;
    margin-left: -5px;
    margin-right: 20px;
}
.scSampleTitle {
    font-family: 'Open Sans',sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 36px;
}
.showCaseSampleDetails {
    /*width: 38%; 
    padding-left: 2%;*/
    max-width: 380px;
    display: inline-block; 
    float: left;
    border-right: 1px solid #d2d6d5;
    padding-right: 15px;
    margin-right: 15px;
    margin-bottom: 20px;
}
.showCaseSampleDetails .appSamplesDesc {
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 20px;
}
.scSampleDetailsLinks {
    float: left; 
    display: inline-block;
}
.scSampleDetailsQR {
    width: 170px; 
    font-size: 12px;
    float: right; 
    display: inline-block;
}
.scSampleQRText {
    margin-left: 10px;
    float:left;
    width: 80px;
}
.scSampleDetailsLinksUL {
    list-style-type: none;
}

.showcase-QRcode,
.scSampleQRText {
    float: left;
}

img[id*='scSampleQRZone_Image'] {
    width: 70px !important;
    height: 70px !important;
    border: 0;
}

.scSampleControls {
    max-width: 160px; 
    float: left; 
    display: inline-block;
}
.scSampleControls .scSampleTitle {
    line-height: 24px;
}
.scSampleControlsUL {
    list-style-type: none;
}
.scSampleControlsUL a {
    color: #495555;
    font-size: 13px;
    line-height: 26px;

}
.scSampleControlsUL a:hover {
    color: #F8653A;
}


/* --- END ShowCase Sample Page*/

/* BEGIN Theme Selector Section*/

/*#igsb-mobileThemes {
    text-align: center;
}*/

#igsb-themeButton { 
    width: 300px;
    height: 44px;
    background: none #ffffff;
    border: 1px solid #E1E1E1;
    padding: 0;
    margin: 0;
    font-size: 20px;
    line-height: 44px;
    color: #555555;
    text-align: left;
    position: relative;
    overflow: hidden;
}
.igsb-mobileThemes-dropdown {
    float: right;
    height: 44px;
    width: 44px;
    background-image: url(../images/OtherIcons-lowres.png);
    background-size: 240px 300px;
    background-position: -176px -196px;
    position: absolute;
    top: 0;
    right: 0;
}
.igsb-themeName {
    margin-left: 10px;
}

#igsb-themeSelector {
    width: 851px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #E1E1E1;
    margin-top: -1px;
    display: none;
}

.igsb-themeItem {
    display: block;
    float: left;
    height: 44px;
    font-size: 14px;
    color: #555555;
    padding: 0 15px 0 0;
}

    .igsb-themeItem:hover {
        color: #F8653A;
        cursor: pointer;
    }

    .igsb-themeSelected {
        color: #111A19 ;
    }

.igsb-list-image {
    height: 44px;
    width: 44px;
    background-image: url(../images/OtherIcons-lowres.png);
    background-size: 240px 300px;
    float: left;
}

.igsb-list-image.ios {
    background-position: 0 -196px;
}
.igsb-list-image.android-hololight {
    background-position: -44px -196px;
}
.igsb-list-image.android-hololightdark {
    background-position: -88px -196px;
}
.igsb-list-image.android-holodark {
    background-position: -132px -196px;
}
.igsb-list-image.wp7-light {
    background-position: 0 -240px;
}
.igsb-list-image.wp7-dark {
    background-position: -44px -240px;
}

.mobileTheme {
    float: left;
    margin: 0 0 0 10px;
}
.igsb-list-text {
    display: block;
    float: none;
}

.igsb-list-version {
    display: block;
}

/* END Theme Selector Section*/

/* BEGIN Hamburger Section */
#wrapperDiv {
    overflow-x: hidden;
}

.menu-bar {
    background: #334947;
    width: 100%;
    height: 36px;
    font-family: 'Open Sans', sans-serif;
    line-height: 36px;
    font-size: 18px;
    color: #d0d0d0;
    width: 100%;
}

#hamburger_click {
    cursor: pointer;
    position: relative;
    float: left;
    display: inline-block;
}
#hamburger_click label {
    cursor: pointer;
}
#hamburger_click:hover {
    color: #ffffff;
}
#hamburger {
    cursor: pointer;
    height: 36px;
    position: relative;
    width: 55px;
    float: left;
    margin-right: 13px;
    box-shadow: 0 0 0 2px #B7352D inset;

    
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkYTU0MmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYjczNTJkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -webkit-radial-gradient(center bottom, ellipse cover, rgba(218,84,45,1) 0%,rgba(183,53,45,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -ms-radial-gradient(center bottom, ellipse cover, rgba(218,84,45,1) 0%,rgba(183,53,45,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center bottom, rgba(218,84,45,1) 0%,rgba(183,53,45,1) 100%); /* W3C */
}

#hamburger:hover {
    background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNiNzM1MmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZGE1NDJkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -webkit-radial-gradient(center bottom, ellipse cover, rgba(183,53,45,1) 0%,rgba(218,84,45,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -ms-radial-gradient(center bottom, ellipse cover, rgba(183,53,45,1) 0%,rgba(218,84,45,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center bottom, rgba(183,53,45,1) 0%,rgba(218,84,45,1) 100%); /* W3C */

}

/* OldIE */
.no-cssgradients #hamburger {
    background: #DA542D;
}
.no-cssgradients #hamburger:hover {
    background: #B7352D;
}

#hamburger img {
     width: 55px;
     height: 36px;
}

.hamburgerMenu {
    float: left;
    display: none;
    width: 300px;
    min-width: 270px;
    max-width: 300px;
    height: 100%;
    position: relative;
    z-index: 0;
    top: 0;
    left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: hidden;
    background: #283130;


    -webkit-box-shadow: inset -6px 0px 16px 0px #0C1111;
    box-shadow: inset -6px 0px 16px 0px #0C1111;
    
    font-family: 'Open Sans',sans-serif;

}

    .hamburgerMenu .navCategoryTitle a[href*="download"] {
        display: none;
    }

   .no-svg .hamburgerMenu  { 
       background: #1a2424; /*OldIE*/
   }


    .hamburgerMenu ul {
        list-style: none;
        width: 100%;
        padding: 0;
    }

    .hamburgerMenu .navCategory {
        font-weight: 400;       
        font-size: 22px;
        border-bottom: 1px dotted #4e6664;
    }
 .hamburgerMenu .navCategoryTitle { 
        line-height: 51px;
        padding-left: 19px;
 }
        .hamburgerMenu .navCategoryTitle,
        .hamburgerMenu .navCategory a {
            color: #66a284;
            font-weight: 400;
            cursor: pointer;
        }

     .hamburgerMenu .nav-icon {
        background-image: url(../images/OtherIcons-lowres.png);
         background-size: 240px 300px;
        height: 22px;
        width: 22px;
     }
         .igsb-expanded .nav-icon,
         .igsb-collapsed .nav-icon {
             float: right;
             margin: 15px 15px 0 0;
             background-position: -88px -108px;
         }

        .igsb-collapsed .nav-icon {
            background-position: -88px -130px;
        }

    .hamburgerMenu .navControlHeader {
        color: #c3c6c5;
        font-size: 18px;
        font-weight: 300;
        cursor: pointer;
        line-height: 44px;
        padding-left: 19px;
    }

.searchContainer {
	width: 100%;
	font-size: 16px;
}
.searchFieldContainer {
	display: block;
	position: relative;
	width: 240px;
	margin: 0 0 10px 20px;
	white-space: nowrap;
	background: #182323;
	border: 1px solid #263b38;
    height: 42px;
}
#searchField {
	display: block;
	width: 180px;
	color: #ffffff;
	background: transparent;
	border: 0 none;
	font-size: 1em;
    line-height: 42px;
    height: 42px;
	margin: 0 30px;
	padding: 0;
	outline: none;
	position: relative;
}
#searchField::-ms-clear {
	display: none;
}
#searchField:focus {
	outline: none;
}
/*
.searchFieldContainer:hover, #searchField:hover {
	background: #504040;
}
*/
.searchHint {
	color: #909090;
	background: transparent;
	position: absolute;
	border: 0 none;
	font-size: 1em;
	margin-left: 30px;
	padding: 0;
    line-height: 42px;
}
.searchIcon {
    background-image: url(../images/OtherIcons-lowres.png);
    background-size: 240px 300px;
	background-position: -110px -108px;
	display: inline-block;
	position: absolute;
	width: 22px;
	height: 22px;
	left: 5px;
	top: 10px;
	border: 0 none;
}
.searchClearIcon {
    background-image: url(../images/OtherIcons-lowres.png);
    background-size: 240px 300px;
	background-position: -110px -130px;
	display: none;
	position: absolute;
	width: 22px;
	height: 22px;
	right: 5px;
	top: 10px;
	border: 0 none;
}
.searchClearIcon:hover {
	background-position: -132px -130px;
}
.searchClearIconValue {
	display: inline-block;
}
.searchToggleContainer {
	display: block;
	font-size: 12px;
	width: 240px;
	margin: 0 0 10px 20px;
	background: transparent;
	white-space: nowrap;
    text-align: right;
}
.searchToggleLabel {
	display: inline-block;
	font-size: 13px;
	color: #a0a0a0;
}
.searchButtonContainer {
	display: inline-block;
	font-size: 13px;
	margin-left: 3px;
	white-space: nowrap;
}
.searchToggleButton {
	background-color: #33694e;
    line-height: 30px;
    padding: 0 7px;
	text-align: center;
	display: inline-block;
    color: #ffffff;
    margin-left: 2px;

}
.searchToggleAll {
}
.searchToggleNew {
}
.searchToggleButton:hover {
	background-color: #27513c;
    cursor: pointer;
}
.searchToggleSelected,
.searchToggleSelected:hover
 {
	background-color: #f9663b;
}
.searchHighlightItem, .searchHighlightItem a {
	background: #804040 !important;
}
.displayNone {
	display: none;
}
.displayBlock {
	display: block !important;
}
.sampleCtpLabel {
	color: #c0c0c0;
	font-style: italic;
}

        .navControlHeader:hover {
            color: #FFFFFF;
        }

     .navControlHeader .nav-icon {
         float: left;
         margin: 11px 10px 0 0;
     }

     .igsb-data-grids .nav-icon {
         background-position: 0 -108px;
     }
     .igsb-olap-pivot .nav-icon {
         background-position: -22px -108px;
     }
     .igsb-data-visualization .nav-icon {
         background-position: -44px -108px;
     }
     .igsb-layout .nav-icon {
         background-position: -66px -108px;
     }
     .igsb-editors .nav-icon {
         background-position: 0 -130px;
     }
     .igsb-frameworks .nav-icon {
         background-position: -22px -130px;
     }
     .igsb-interactions .nav-icon {
         background-position: -44px -130px;
     }
     .igsb-mobile-phone .nav-icon {
         background-position: -66px -130px;
     }
     .igsb-theming .nav-icon {
         background-position: -132px -108px;
     }


    .hamburgerMenu .navSampleGroupTitle {
        cursor: pointer;
        color: #e9b173;
        text-transform: uppercase;
        font-size: 13px;
        padding-left: 30px;
    }

    .hamburgerMenu .navControlTitle {
        cursor: pointer;
        padding-left: 19px;
    }

    .hamburgerMenu .navControl {
        color: #5e957a;
        font-size: 15px;
        font-weight: 300;
    }
    .hamburgerMenu .navControl:hover {
        color: #99bab7;
    }

        .hamburgerMenu .navControl span {
            margin: 3px 0px 0px 0px;
        }

    .hamburgerMenu .navControl,
    .hamburgerMenu .navSampleGroup,
    .hamburgerMenu .navSamplesList,
    .hamburgerMenu .navSampleGroupTitle
    .hamburgerMenu .navSample {
        line-height: 30px;    
        background: none #161f1e; 
    }

    
        .hamburgerMenu .navSample a {
            color: #778980;
            font-size: 14px;
            padding-left: 30px;
            display: block;
        }
        .hamburgerMenu .navSample.listItemHover a {
            color: #FFFFFF;
        }
        .hamburgerMenu .navSample.listItemSelected a {
            color: #ffa139;
        }

        
        
        
        .hamburgerMenu .igsb-status-upd {
            background-color: #4c5b5a;
        }
        .hamburgerMenu .igsb-status-new {
            background-color: #e3481b;
        }
        .hamburgerMenu .igsb-status-ctp {
            background-color: #33694e;
        }

.navSampleGroupsList {
    display: none;
}


/*
The Layer that will be layed over the content
so that the content is unclickable while menu is shown
*/
#contentLayer {
    display: none;
    cursor: pointer;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 5;
    min-height: 1062px;
    background: rgba(0,0,0,0);
}

/* END Hamburger Section */

/* --- PRODUCT NAV jQuery UI Tab Overrides --- */

    #prodNav section  {
        min-height: 360px;
		min-width: 287px;
        padding-top: 10px;
    }
    #prodNav section,
    .help-content .pageTitle {
        margin-left: 55px;

    }

        #prodNav section.igsb-help {
            min-height: 0;
        }

        #prodNav section.igsb-help ul {
            margin-top: 20px;
            list-style:none;
        }

            #prodNav section.igsb-help li {
            }

    #prodNav > #learning
    {
        margin-left: 55px;
        padding-left: 20px;
    }

	.control-group0 {
		margin-left: 64px;
	}

#learning .igsb-ctrl-app-txt {
    padding: 0;
    margin-bottom: 20px;
}

.tempContainer {
    min-width: 1100px; 
    width: 1100px; /* sync this with 'width' css of #mainContainer since it is used in sb.js */
    line-height: 30px; /* sync this with 'line-height' css of .hamburgerMenu .navSample since it is used in sb.js */   
    display: none;
}

.downloadButton {
    text-align: center;
    white-space: normal;
    width:252px;
    height: 50px;
    position: relative;
    top: -6px;
    float: right; 
    margin-right: 55px;
    margin-bottom: -50px;
    cursor: pointer;

    border-radius: 6px;
    padding: 0!important;
    box-shadow: inset 0 1px 0 1px rgba(255, 255, 255, 0.1),  0 0 7px 0 #222222;


    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkYTU0MmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYjczNTJkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -webkit-radial-gradient(center bottom, ellipse cover, rgba(218,84,45,1) 0%,rgba(183,53,45,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -ms-radial-gradient(center bottom, ellipse cover, rgba(218,84,45,1) 0%,rgba(183,53,45,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center bottom, rgba(218,84,45,1) 0%,rgba(183,53,45,1) 100%); /* W3C */

}
   .no-svg .downloadButton { 
       background: #B7352D; /*OldIE*/
   }

.downloadButton a {
    background: url(../images/download-now.png) no-repeat right top transparent;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 600;
    width: 252px;
    display: block;
    text-align: left;
    margin-top: -7px;
    line-height: 60px;
    text-indent: 15px;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);

}
.svg .downloadButton a {
   background-image: url(../images/download-now.svg);
}

.downloadButton span {
    color: #F8BB49;
    font-size: 18px;
    font-weight: 600;
    margin-top: -34px;
    display: block;
    text-align: left;
    text-indent: 15px;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.3); 
}

    .downloadButton > input {
        height: 81px;
        width:280px;
        font-size: 1em;
        background: transparent;
        border: none;
        margin: -7px 0 0 -12px;
    }


/* --- END PRODUCT NAV jQuery UI Tab Overrides --- */

#gettingStartedFooter header {
    background-color: lightgrey;
}

.footerArea {
}

footer {
    margin: 40px 0;
}

    footer .made-by {
        color: white;
        text-align: center;
        text-transform: uppercase;
    }

    footer p {
        padding-bottom: .5em;
    }

    footer nav {
        padding-top: 8px;
        padding-bottom: 8px;
    }

        footer nav a {
            color: #5d6b64;
            text-decoration: none;
            text-transform: uppercase;
            padding: 0 5px;
            font-size: 12px;
            font-family: 'Open Sans', sans-serif;
            font-weight: 400;
        }

            footer nav a:visited {
                color: #99BAB7;
            }
            footer nav a:hover {
                color: #FFFFFF;
            }

.row {
	min-width: 280px;
}

#sampleContainer {
    /*background-color: #EEEEEE;*/
    position: relative;
    padding-bottom: 10px;
}

#controlNav {
    margin: 20px 20px 0;
    padding: 20px;
    /*background-color: lightblue;*/
}

#sampleNav {
    margin-top: 20px;
    /*float: left;*/
    /*width: 25%;*/
}

#sampleNav > nav {
   margin-left: 20px;
   padding: 0px 20px 0px;
   /*background-color: lightblue;*/
}

#sample {
    /*margin-top: 20px;*/
    /*float: right;*/
    /*width: 75%;*/
}

#sample > section > * {
   /* margin: 20px 20px 0;*/
}

.sample-page {
    padding:10px 0
}
.sample-page #controlInfo,
.sample-page #sample {
    margin-left:55px;
    margin-right:50px;
}
#controlInfo {
    color: #f8653a;
    font-family: 'Open Sans',sans-serif;
    font-size: 18px;
    margin-top: 25px;
}
#control-title {
    line-height: 30px;
}
/* making the sample's font-size smaller */
.igsb-running-sample,
.ui-iggrid-filterdd,
.ui-igedit-dropdown,
.ui-igpivot-metadatadropdown,
.ui-igpivot-filterdropdown,
.ui-iggrid-summaries-dialog,
.ui-iggrid-hiding-dropdown-dialog,
.ui-dialog {
    font-size: 12px;
}

#sampleContainer fieldset {
    border: none;
    margin: 1em;
}
#sampleContainer fieldset legend {
    color: #5F6564;
    font-family: 'Open Sans',sans-serif;
    font-size: 16px;
    font-weight: 300;
}
    #sampleContainer fieldset label {
        display: block;
        margin: 0.5em 0;
    }
#sampleContainer fieldset select {
    margin-bottom: 0.5em;
}
#sampleContainer .api-explorer fieldset span.ui-igedit {
    margin-left: 0;
}

/* Control Icons in Sample page */
.igsb-sampleControlIcon {
    display: block;
    float: left;
    background-image: url(../images/SB-icons-lowres.png);
    background-size: 480px 360px;
    height: 30px;
    width: 30px;
}
.no-backgroundsize .igsb-sampleControlIcon{
    background-image: url(../images/SB-icons-lowres-small.png);
}

.igsb-sampleControlIcon.igsb-grid { background-position: 0 0; }
.igsb-sampleControlIcon.igsb-hierarchicalgrid { background-position: -30px 0; }
.igsb-sampleControlIcon.igsb-pivotdataselector { background-position: -60px 0; }
.igsb-sampleControlIcon.igsb-pivotgrid { background-position: -120px 0; }
.igsb-sampleControlIcon.igsb-pivotview { background-position: -90px 0; }
.igsb-sampleControlIcon.igsb-datachart { background-position: -150px 0; }
.igsb-sampleControlIcon.igsb-piechart { background-position: -180px 0; }
.igsb-sampleControlIcon.igsb-doughnutchart { background-position: -210px 0; }
.igsb-sampleControlIcon.igsb-funnelchart { background-position: -240px 0; }
.igsb-sampleControlIcon.igsb-radialgauge { background-position: -270px 0; }
.igsb-sampleControlIcon.igsb-sparkline { background-position: -300px 0; }
.igsb-sampleControlIcon.igsb-bulletgraph { background-position: -330px 0; }
.igsb-sampleControlIcon.igsb-lineargauge { background-position: -360px 0; }
.igsb-sampleControlIcon.igsb-map { background-position: -390px 0; }
.igsb-sampleControlIcon.igsb-barcode { background-position: -420px 0; }
.igsb-sampleControlIcon.igsb-layoutmanager { background-position: -450px 0; }
.igsb-sampleControlIcon.igsb-splitter { background-position: 0 -90px; }
.igsb-sampleControlIcon.igsb-tilemanager { background-position: -30px -90px; }
.igsb-sampleControlIcon.igsb-combo { background-position: -60px -90px; }
.igsb-sampleControlIcon.igsb-datepicker { background-position: -90px -90px; }
.igsb-sampleControlIcon.igsb-editors { background-position: -120px -90px; }
.igsb-sampleControlIcon.igsb-htmleditor { background-position: -150px -90px; }
.igsb-sampleControlIcon.igsb-loader { background-position: -180px -90px; }
.igsb-sampleControlIcon.igsb-datasource { background-position: -210px -90px; }
.igsb-sampleControlIcon.igsb-tree { background-position: -240px -90px; }
.igsb-sampleControlIcon.igsb-dialogwindow { background-position: -270px -90px; }
.igsb-sampleControlIcon.igsb-fileupload { background-position: -300px -90px; }
.igsb-sampleControlIcon.igsb-popover { background-position: -360px -180px; }
.igsb-sampleControlIcon.igsb-rating { background-position: -330px -90px; }
.igsb-sampleControlIcon.igsb-videoplayer { background-position: -360px -90px; }
.igsb-sampleControlIcon.igsb-mobilelistview { background-position: -390px -90px; }
.igsb-sampleControlIcon.igsb-mobilerating { background-position: -330px -90px; }
.igsb-sampleControlIcon.igsb-mobilebutton { background-position: -420px -90px; }
.igsb-sampleControlIcon.igsb-mobilecheckbox { background-position: 0 -180px; }
.igsb-sampleControlIcon.igsb-mobilecheckboxgroup { background-position: 0 -180px; }
.igsb-sampleControlIcon.igsb-mobilecollapsible { background-position: -30px -180px; }
.igsb-sampleControlIcon.igsb-mobilecollapsibleset { background-position: -60px -180px; }
.igsb-sampleControlIcon.igsb-mobileradiobuttongroup { background-position: -90px -180px; }
.igsb-sampleControlIcon.igsb-mobileselectmenu { background-position: -120px -180px; }
.igsb-sampleControlIcon.igsb-mobileslider { background-position: -150px -180px; }
.igsb-sampleControlIcon.igsb-mobiletoggleswitch { background-position: -180px -180px; }
.igsb-sampleControlIcon.igsb-mobiletextbox { background-position: -210px -180px; }
.igsb-sampleControlIcon.igsb-mobilepage { background-position: -240px -180px; }
.igsb-sampleControlIcon.igsb-mobilepagecontent { background-position: -270px -180px; }
.igsb-sampleControlIcon.igsb-mobilepagefooter { background-position: -300px -180px; }
.igsb-sampleControlIcon.igsb-mobilepageheader { background-position: -330px -180px; }
.igsb-sampleControlIcon.igsb-mobilepopup { background-position: -360px -180px; }
.igsb-sampleControlIcon.igsb-mobilelink { background-position: -390px -180px; }
.igsb-sampleControlIcon.igsb-mobilenavbar { background-position: -420px -180px; }
.igsb-sampleControlIcon.igsb-templatingengine { background-position: -30px -270px; }
.igsb-sampleControlIcon.igsb-infragisticsdocuments { background-position: 0 -270px; }
.igsb-sampleControlIcon.igsb-infragisticsexcel { background-position: -60px -270px; }
.igsb-sampleControlIcon.igsb-infragisticsword { background-position: -90px -270px; }
.igsb-sampleControlIcon.igsb-zoombar { background-position: -120px -270px; }
.igsb-sampleControlIcon.igsb-radialmenu { background-position: -150px -270px; }
.igsb-sampleControlIcon.igsb-themes { background-position: -180px -270px; }

.igsb-sample-desc {
    margin-top: 20px;
}

.igsb-bold {
    font-weight: bold;
    margin: 12px 0;
}
.igsb-bold a {
    color: #4B956B;
}
.igsb-bold a:hover {
    color: #F8653A;
}

.igsb-code-snippet {
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px;
    border: 1px solid rgb(193, 200, 199);
    overflow: auto;
}

.sample-page .pageTitle {
    font-family: 'Open Sans',sans-serif;
    font-weight: 300;
    color: #5f6564;
    font-size: 42px;
}
.sample-page h1 {
    /*display: inline;*/
    clear: both;
    float:left;
    margin-bottom: 25px;
    margin-right: 100px;
}
.sample-page h2 {
    margin-top: 40px;
}

#sbPrevNextButtons {
    float: right;
    margin-top: -36px;
    margin-bottom: -44px;
}
#sampleNavigatePrev,
#sampleNavigateNext {
    background-image: url(../images/OtherIcons-lowres.png);
    background-size: 240px 300px;
    height: 44px;
    width: 44px;
    float: left;
    background-position: 0 -152px;
}

#sampleNavigatePrev:hover {
    background-position: -44px -152px;
}
#sampleNavigateNext {
    background-position: -88px -152px;
}
#sampleNavigateNext:hover {
    background-position: -132px -152px;
}
.featuredControlsList{   

}
.allControlsList{
    display: none;      
}
.featuredControlsTitle {
    cursor: default;
    color: #5f6564;
    font-size: 44px;
    line-height: 60px;
	font-family:  'Open Sans', sans-serif;
	font-weight: 300;
	font-style: normal;
}
.allControlsTitle {
    display: none;
    cursor: pointer;
    color: #f09a50;
	font-size: 1.2em;
	font-family: Verdana;
}


#sampleFeatures {
	padding: 3px 5px;
	margin-left: -10px;
	position: relative;
}

#samplesList {
	position: absolute;
	display: none;
	border: 1px solid #a0a0a0;
	background: #f8f8f8;
	width: 230px;
	overflow: auto;
	z-index: 1000001;/*get around 1000000 used by fallback CSS*/
	margin-top: -1px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	border-top-left-radius: 0px;
	-moz-border-top-left-radius: 0px;
	-webkit-border-top-left-radius: 0px;
}

#samplesList ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#samplesList img {
    border: none;
}
#sampleNavigateNext, #sampleNavigatePrev {
	 padding: 0px 3px;
	 font-family: Courier New;
	 cursor: pointer;
}
#sampleNavigateNext:hover, #sampleNavigatePrev:hover {
	 color: red;
}

.sampleNavigateDisabled, .sampleNavigateDisabled:hover {
	 cursor: default !important;
     opacity: 0.5;
     filter: alpha(opacity=50);
}

#sampleNavigatePrev[class*="sampleNavigateDisabled"]:hover {
    background-position: 0 -152px !important;
}

#sampleNavigateNext[class*="sampleNavigateDisabled"]:hover {
	 background-position: -88px -152px !important;
}

#sampleFeaturesDropDownButton {
	display: inline-block;
	padding: 0px 0px 0px 10px;
}
.sampleFeaturesButton {
	background: #f0f0f0;
	padding: 1px 3px 1px 4px;
	border: 1px solid #d0d0d0;
	cursor: pointer;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}
.sampleFeaturesButtonSelected {
	border-color: #a0a0a0;
	border-bottom-left-radius: 0px;
	-moz-border-bottom-left-radius: 0px;
	-webkit-border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	-moz-border-bottom-right-radius: 0px;
	-webkit-border-bottom-right-radius: 0px;
}
#sampleFeaturesButton:hover {
	background: #e0e0e0;
}

.listItem {
	/* white-space: nowrap; */
    margin:2px 0 2px;
    padding: 8px 0 8px 5px;
    font-size: 0.9em;
}
.navSample:hover, 
.navSample a:hover, 
.navSampleApp:hover, 
.navSampleApp a:hover, 
.navCategory .navCategoryTitle:hover,
.navCategory .navCategoryTitle:focus {
	color: #ffffff;
}

.listItemSelected, .listItemSelected a {
    color: #ffa139 !important; 
}

.code-example {
    overflow:auto;
}

/* --- JsFiddle Settings --- */
/* JSFiddle button */
#JSFiddle input {
    color: #FFFFFF;
    border: none;
    padding: 10px 10px 10px 50px;
    box-shadow: 0 10px 10px rgba(255, 255, 255, 0.1) inset;
    background: url(../images/JSFiddle-img.png) no-repeat 10px center #3D6AA2;
}

#JSFiddle input:hover {
    box-shadow: 0 -10px 10px rgba(255, 255, 255, 0.1) inset;
}



#JSFiddle a {
    background: url(../images/JSFiddle-img.png) no-repeat 10px center #3D6AA2;
    color: #FFFFFF;
    border: none;
    padding: 0 10px 0 50px;
    box-shadow: 0 10px 10px rgba(255, 255, 255, 0.1) inset;
    position: relative;
    float: right;
    line-height: 40px;
    font-size: 16px;
}

#JSFiddle a:hover {
    box-shadow: 0 -10px 10px rgba(255, 255, 255, 0.1) inset;
}
/* --- End JsFiddle Settings --- */

#learning {
    margin-top: 20px;
}

    #learning ul {
        list-style: none;
    }

    #learning div {  
        display: block; 
        float: left;
        margin: 20px 20px 40px 0px;
        width: 290px;
        vertical-align: top;
        list-style: none;
    }
    
    #learning h3, 
    .igsb-control-apps h3 {
        color: #5F6564;
        font-family: 'Open Sans',sans-serif;
        font-size: 36px;
        font-weight: 300;
    }

    #learning p {
        padding: 20px 20px 0;
    }



/*Anchors and lists in help pages and overview */
.igsb-control-apps a,
.igsb-sample-desc a,
article.help-content a {
    color: #4B956B;
}

.igsb-control-apps a:hover,
.igsb-sample-desc a:hover,
article.help-content a:hover {
    color: #F8653A;
}

.igsb-control-apps ul li:before,
.igsb-sample-desc ul li:before {
    content: "■";
    font-size: 10px;
    margin-right: 8px;
    color: #4B956B;
}
.igsb-control-apps {
    margin-top: 20px;
}


.igsb-control-apps ul,
.igsb-sample-desc ul{
    list-style: none outside none;
    margin-left: 1.6em;
        margin-top: 10px;
}




.contents-list-control {
    word-wrap: break-word;
}
.contents-list-control a:hover,
.igsb-control-apps a:hover {
    color: #F8653A;
}
.contents-list-control a,
.igsb-control-apps a {
    color: #4B956B;
    font-size: 16px;
    line-height: 26px;
}

.phone {
    position: relative;
    margin: 0 auto -15px;
    width: 464px;
    height: 806px;
}

    .phone.ios {
        background: url("../images/phones/ios.png") no-repeat;
    }
    .phone.android {
        background: url("../images/phones/android.png") no-repeat;
    }
    .phone.wp7 {
        background: url("../images/phones/wp7.png") no-repeat;
    }

    .phone.ios .screen {
        width: 320px;
        height: 460px;
        padding-top: 137px;
        margin-left: 74px;
        overflow: hidden;
        position: relative;
    }

    .phone.android .screen {
        width: 320px;
        height: 562px;
        padding-top: 111px;
        margin-left: 65px;
        overflow: hidden;
        position: relative;
    }

    .phone.wp7 .screen {
        width: 320px;
        height: 532px;
        padding-top: 123px;
        margin-left: 64px;
        overflow: hidden;
        position: relative;
    }

    .phone.ios .screen iframe {
        margin: -1px 0 0;
        width: 320px;
        height: 100%;
        overflow: hidden;
    }

    .phone.android .screen iframe {
        margin: -1px 0 0;
        width: 320px;
        height: 100%;
        overflow: hidden;
    }

    .phone.wp7 .screen iframe {
        margin: -1px 0 0;
        width: 320px;
        height: 100%;
        overflow: hidden;
    }

.phoneie7 {
    margin: 0 0 -15px;
}

/* BEGIN Mobile Samples on Phone Section */
.phoneContainerPhone {
    background: none !important;
    width: 100% !important;
    height: 100% !important;
}

.mobileContentPhone,
.mobileMainContainerPhone {
    width: 100% !important;
}

.screenPhone {
    width: 100% !important;
    padding: 0 !important;
    margin: 20px 0 !important;
}

.popoutSamplePhone {
    border-radius: 10px;
}

.qrCodePhone {
    display: none;
}

.uipagePhone {
    width: 100% !important;
}

/* END Mobile Samples on Phone Section */

.theme-selector-container {
    padding-right: 63px;
    margin-top: 5px;
}

.mobileMainContainer {
    width: auto;
    display: inline-block;
    vertical-align: middle;
    margin-top: 20px;
}

.popout-container {
    position: relative;
    top: 25%;
    width: 180px;
}

.info-area {
    width: 200px;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    margin-top: 10px;
}

.qr-code {
    background-color: #eeeeee;
    color: #656565;
    padding: 15px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: center;
    font: normal normal 0.9em Arial, Tahoma, Helvetica, Verdana, sans-serif;
}

#qrcodeImage {
    width: 141px;
    height: 141px;
}

.popout-sample {
    color: #FFFFFF;
    padding: 16px 16px 16px 50px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: url("../images/zoomIn48.png") no-repeat scroll 3% 50% #00AEEF;
    font-size: 16px;
}

    .popout-sample:after {
        border-color: transparent #00AEEF;
        border-width: 20px 24px 20px 0;
        bottom: auto;
        left: -14px;
        top: 7px;
        border-style: solid;
        content: "";
        display: block;
        position: absolute;
        width: 0;
    }

.left {
    float: left;
}

/*.sb-layout .row [class*='col']{
    float:left;
    display: block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}*/

.sb-layout .row {
    width: 100%;
}

#prodNavCollapse {
    display:none;
    color: black;
    margin: 12px 0;
    max-width: 300px;
}

#controlInfo {
    /*display: block;
    font-size: 1.5em;
    text-transform:uppercase;*/
}

      /*  #controlInfo div {
        display: block;
        padding: 20px 0 0 20px;
    }

#controlInfo span {
        display: none;
    }*/

.controlsTitleMajor {
	 color: #050505;
	 font-size: 1.4em;
	 font-family: Verdana;
	 text-align: center;
}
.controlsTitleMinor {
	 font-size: 0.65em;
	 width: 350px;
	 display: inline-block;
}
.controlListHeader {
    margin-top: 20px;
}

.controlItem {
	color: #626c6b;
	font-size: 16px;
    line-height: 26px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
	white-space: nowrap;
    display: inline;
    text-transform: capitalize;
}
.controlItem:hover {
    color: #111a19;
}
.controlItemStatus {
	color: #FFFFFF;
	font-size: 9px;
    line-height: 13px;
    padding: 0 3px;
    display: inline-block;
    vertical-align: text-top;
    font-weight: bold;
    text-transform: uppercase;
}
.igsb-status-upd {
	 background-color: #a0aba6;
}
.igsb-status-ctp {
	 background-color: #66a284;
}
.igsb-status-new {
	 background-color: #f9663b;
}
.controlItemStatusLegend {
	 margin: 5px;
    overflow: hidden;
    display: none;
	 font-size: 0.7em;
}
.controlIcon {
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: 0px 5px 0px 0px !important;
    display: inline-block !important;
    background-image: url("../images/sprite.png");
}

.controlGroupIcon {
    width: 24px;
    height: 24px;
    display: inline-block !important;
    background-image: url("../images/spritesheet.png");
}

.controlGroupIcon2 {
    width: 24px;
    height: 24px;
    min-height: 24px !important;
    margin: 0px 5px 0px 0px !important;
    display: inline-block !important;
    background-image: url("../images/spritesheet.png");
}

.control-group0 ,
.control-group1 {
    width: 215px;
    display: inline-block;
    vertical-align: top;
}
.OldIE .control-group0 ,
.OldIE .control-group1 {
    display: block;
    float: left;
}
.OldIE .controlListHeader {
    clear: both;
}

.control-group0 > ul,
.control-group1 > ul {
    display:inline-block;
    list-style:none;
}

.control-group0 > ul > li,
.control-group1 > ul > li {
    line-height: 26px;
}

.control-group1 > ul > li > a{
    line-height: 26px;
    /*padding: 3px 10px 3px 10px !important;*/
}

.pageTitle {
    color: #334947;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 52px;
}
.pageTitle span {
    font-weight: 600;
    color: #F8653A;
}
.pageDesc {
    font-family: 'Open Sans', sans-serif;
    color: #6d7776;
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    margin-right: 25px;
}

.pageDesc a {
    font-weight: 600;
    color: #F8653A;
}
.pageDesc a:hover {
    text-decoration: underline;
}


span.combobox {background-position: 0px -0px;}
span.datachart {background-position: 0px -24px;}
span.datasource {background-position: 0px -48px;}
span.datepicker {background-position: 0px -72px;}
span.dialogwindow {background-position: 0px -96px;}
span.editors {background-position: 0px -120px;}
span.fileupload {background-position: 0px -144px;}
span.funnelchart {background-position: 0px -168px;}
span.grid {background-position: 0px -192px;}
span.hierarchicalgrid {background-position: 0px -216px;}
span.htmleditor {background-position: 0px -240px;}
span.map {background-position: 0px -264px;}
span.piechart {background-position: 0px -288px;}
span.pivotdataselector {background-position: 0px -312px;}
span.pivotgrid {background-position: 0px -336px;}
span.pivotview {background-position: 0px -936px;}
span.rating {background-position: 0px -360px;}
span.sparkline {background-position: 0px -384px;}
span.splitter {background-position: 0px -408px;}
span.tree {background-position: 0px -432px;}
span.videoplayer {background-position: 0px -456px;}
span.radialgauge {background-position: 0px -960px}
span.tilemanager {background-position: 0px -1008px;}
span.infragisticsloader {background-position: 0px -1056px;}
span.layoutmanager {background-position: 0px -1032px;}
span.doughnutchart {background-position: 0px -1080px;}

span.mobilebutton {background-position: 0px -480px;}
span.mobilecheckbox {background-position: 0px -504px;}
span.mobilecheckboxgroup {background-position: 0px -528px;}
span.mobilecollapsible {background-position: 0px -552px;}
span.mobilecollapsibleset {background-position: 0px -576px;}
span.mobilelink {background-position: 0px -600px;}
span.mobilelistview {background-position: 0px -624px;}
span.mobilenavbar {background-position: 0px -648px;}
span.mobilepage {background-position: 0px -672px;}
span.mobilepagecontent {background-position: 0px -696px;}
span.mobilepagefooter {background-position: 0px -720px;}
span.mobilepageheader {background-position: 0px -744px;}
span.mobilepopup {background-position: 0px -768px;}
span.mobileradiobuttongroup {background-position: 0px -792px;}
span.mobilerating {background-position: 0px -816px;}
span.mobileselectmenu {background-position: 0px -840px;}
span.mobileslider {background-position: 0px -864px;}
span.mobiletextbox {background-position: 0px -888px;}
span.mobiletoggleswitch {background-position: 0px -912px;}

/*.sprite {
    background-image: url(spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}*/
.homeControlsList .controlGroupIcon {
    width: 60px;
    height: 60px;
    background-image: url(../images/SB-icons-lowres.png);
    background-size: 960px 720px;
}
.igsb-data-grids {
    background-position: 0 0;
}
.igsb-olap-pivot {
    background-position: -180px 0;
}
.igsb-data-visualization {
    background-position: -300px 0;
}
.igsb-layout {
    background-position: -900px 0;
}
.igsb-editors {
    background-position: -120px -180px;
}
.igsb-frameworks {
    background-position: -420px -180px;
}
.igsb-interactions {
    background-position: -540px -180px; 
}
.igsb-mobile-phone {
    background-position: -900px -360px;
}
.igsb-theming {
    background-position: -360px -540px;
}
 /* getting started */

 #gettingStartedFooter {
     

 }
    #gettingStartedFooter .help-item {
        margin: 20px 40px 40px 0;
        float: left;
        width: 300px;
    }
        #gettingStartedFooter .help-item:first-child {
            margin-left:50px;
        }

 #gettingStartedFooter .pageTitle,
 #gettingStartedFooter .pageDesc
  {
     margin-left: 55px;
 }
.helpNavTitle {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 44px;
    text-transform: lowercase;
}
.help-item a {
    color: #5f6564;
}
.helpNavDesc {
    font-family: 'Open Sans', sans-serif;
    color: #5f6564;
    font-size: 14px;
    line-height: 21px;
    font-weight: 300;
    margin-left: 70px;
    display: block;
}

.sprite-apiicon,
.sprite-forumicon,
.sprite-blogsicon {
    margin-right: 10px;
    width: 60px;
    height: 60px;
    background-image: url(../images/OtherIcons-lowres.png);
    background-size: 240px 300px;
}
.sprite-apiicon {
    background-position: -60px 0;
}
.sprite-blogsicon
 {
    background-position: -180px 0;
}
.sprite-forumicon {
    background-position: -120px 0;
}


/* third party frameworks */

#ExternalJS {
    padding: 15px 0 5px;    
    width: 100%;
    background: #c1c8c7;
    border: 1px solid #b3b9b8;
    border-width: 1px 0;
    margin-top: 20px;
}

.JSFrameworksInfo,
#ExternalJS a {
    color: #334947;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}
.JSFrameworksInfo {
    margin-left: 55px;
    font-size: 18px;
    display: block;
}
.framework-links {
     margin-left: 55px;
    margin-top: 10px;
}
.externalSites {
    font-size: 14px;
    line-height: 24px;
    display: inline-block;
    white-space: nowrap;
    text-transform:uppercase;
    margin-right: 30px;
    margin-bottom: 10px;
}

.sprite-knockouticon, 
.sprite-backboneicon, 
.sprite-angularicon, 
.sprite-ember, 
.sprite-twittericon,
.sprite-zurb
{
    width: 24px;
    height: 24px;
    background-image: url(../images/OtherIcons-lowres.png);
    background-size: 240px 300px;
    margin-right: 10px;
}
.sprite-twittericon {
    background-position: 0 -84px;
}
.externalSites:hover .sprite-twittericon {
    background-position: 0 -60px;
}
.sprite-zurb {
    background-position: -24px -84px;
}
.externalSites:hover .sprite-zurb {
    background-position: -24px -60px;
}
.sprite-angularicon {
    background-position: -48px -84px;
}
.externalSites:hover .sprite-angularicon {
    background-position: -48px -60px;
}
.sprite-backboneicon {
    background-position: -72px -84px;
}
.externalSites:hover .sprite-backboneicon {
    background-position: -72px -60px;
}
.sprite-knockouticon {
    background-position: -96px -84px;
}
.externalSites:hover .sprite-knockouticon {
    background-position: -96px -60px;
}
.sprite-ember {
    position: relative;
    width: 62px;    
    top: -5px;
    background-position: 120px -84px;
}
.externalSites:hover .sprite-ember {
    width: 62px;
    background-position: 120px -60px;
}

/* Showcases */

.sprite-launchicon,
.sprite-downloadicon,
.sprite-giticon {
    width: 30px;
    height: 30px;
    background-image: url(../images/OtherIcons-lowres.png);
    background-size: 240px 300px;
}
.sprite-giticon {
    background-position: -182px -60px;
}
.sprite-downloadicon {
    background-position: 0 0;
}
.appDownloadLink:hover .sprite-downloadicon {
    background-position: 0 -30px;
}

.sprite-launchicon {
    background-position:-30px 0;
}
.appLaunchLink:hover .sprite-launchicon {
    background-position:-30px -30px;
}

.banner-img {
    width:100%;
}

.row35 {
   /* height: 30%;
    padding: 10px 30px 1px 10px;*/
}

.appSamplesTitle { 
    color: #334947;
    font-family: 'Open Sans',sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height:20px;
    margin-top: 20px;
}

.appSamplesDesc {
    color: #495555;
    font-family: 'Open Sans',sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height:26px;
    margin-bottom: 40px;
}

.appSamplesImage img {
    width: 100%;
    box-sizing: border-box;
    display: block;
}

.appSamplesImage {
    width: 100%;
    box-sizing: border-box;
    border: none;
}

.appSamplesLinks {
    font-family: 'Open Sans', sans-serif;
}

.appLaunchLink,
.appDownloadLink,
.appGitLink {
    color: #2c3437;
    font-size: 15px;
    line-height: 30px;
    
}

.homeControlsList {
    width: 500px;
    float:left;
    display: block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.homeAppSamples {
    width: 420px;
    float: right;
    margin-right: 50px;
    padding: 0;
}

.homeAppSamples .appSamplesImage img {
    max-width: 420px;
    margin-left: -5px;
}

.appSamplesImage a,
.appSamplesImage img {
     outline: none;
    border: none;
}

.gs-row {
    margin: 0px 0 0;
}

    .gs-row .vid-container {
        position: relative;
        padding-bottom: 75%;
        padding-top: 30px;
    }

    .gs-row iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-width: 0;
        border-style:none;      
    }

.igsb-gs-tog {
    margin-right: 55px;
    margin-top: 40px;
    float: right;
}

.igsb-gs-tog-btn, .igsb-gs-tog-btn-active {
    display: inline;
    padding: 5px 10px;    
    margin-left: -5px;
    color: #495555;
}
    .igsb-gs-tog-btn {
        background: #d0d7d6;
    }

    .igsb-gs-tog-btn:hover {
        background-color: #C1C8C7;
    }

.igsb-gs-tog-btn-active {
    background-color: #334947;
    border-color: #888888;
    color: #FFFFFF;
}

.igsb-lft-bord-rnd {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.igsb-rgt-bord-rnd {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

/*Responsive Sample CSS*/
.igsb-width-msg {
    display: none;
    visibility: hidden;
    /*background-repeat: no-repeat;*/
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjQiLz4KICAgIDxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzUlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjQiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0.4) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, rgba(255,255,255,0.4) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.4)), color-stop(25%,rgba(255,255,255,1)), color-stop(75%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0.4))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.4) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 75%,rgba(255,255,255,0.4) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,0.4) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 75%,rgba(255,255,255,0.4) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,0.4) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 75%,rgba(255,255,255,0.4) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,0.4) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 75%,rgba(255,255,255,0.4) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66ffffff', endColorstr='#66ffffff',GradientType=0 ); /* IE6-8 */
    padding: 100px 0;    
    z-index: 1000000; /* gets around 999999 used by igSplitter*/
    position: absolute;
    top:0;
    left:0;
    width: 100%;    
    height: 120px;
}

.igsb-width-msg-inner {
    background-color: #FFFFFF;
    width: 100%;
}

    .igsb-width-msg p {
        width: 280px;
        margin: 0 auto;
        line-height: 26px;
    }
    
.igsb-width-msg p a {
    color: #4B956B;
}
.igsb-width-msg p a:hover {
    color: #F8653A;
}

@media screen and (min-width: 1400px) {
    #contentLayer {
        display: none;
    }

    #sampleBrowserContainer {
        width: 1400px;
    }

    #mainContainer {
        width: 1100px;
    }
}

@media screen and (max-width: 999px) { 
    .igsb-width-msg.sb-min-desktop {
        display: block;
        visibility: visible;
    }

    .igsb-running-sample.sb-min-desktop {
        height: 320px;
        overflow: hidden;
    }

    .ui-igdialog.sb-min-desktop {
        display: none;
        visibility:hidden;
    }
    .hamburgerMenu .navControl,
    .hamburgerMenu .navControlHeader,
    .hamburgerMenu .navSampleGroupTitle,
    .hamburgerMenu .navSample {
        line-height: 44px;
    }
    .hamburgerMenu .navSample {
        font-size: 15px;
    }

    body div[class*="ui-igpivot-overlay"] {
        width: auto !important;
    }
}

@media screen and (max-width: 800px) {
    .igsb-width-msg.sb-min-tablet-landscape {
        display: block;
        visibility: visible;
    }

    .igsb-running-sample.sb-min-tablet-landscape {
        height: 320px;
        overflow: hidden;
    }

    .ui-igdialog.sb-min-tablet-landscape {
        display: none;
        visibility:hidden;
    }
}

@media screen and (max-width: 599px) {
    .downloadButton {
        margin: 0;
    }

    .igsb-width-msg.sb-min-tablet-portrait {
        display: block;
        visibility: visible;
    }

    .igsb-running-sample.sb-min-tablet-portrait {
        height: 320px;
        overflow: hidden;
    }

    .ui-igdialog.sb-min-tablet-portrait {
        display: none;
        visibility:hidden;
    }
}

@media screen and (max-width: 470px) {
    .igsb-width-msg.sb-min-phone-landscape {
        display: block;
        visibility: visible;
    }

    .igsb-running-sample.sb-min-phone-landscape {
        height: 320px;
        overflow: hidden;
    }

    .ui-igdialog.sb-min-phone-landscape {
        display: none !important;
        visibility:hidden;
    }

}
/*End Responsive Sample CSS*/

/*For Tablets*/
@media screen and (max-width: 1100px) { /*changed it to 1024 so that it would apply to iPads*/ 
    #prodNav section,
    .JSFrameworksInfo,
    .framework-links,
    #gettingStartedFooter .pageTitle,
    #gettingStartedFooter .pageDesc,
    .sample-page #controlInfo, 
    .sample-page #sample,
    .help-content .pageTitle,
    .page.script-combiner {
        margin-left: 25px;
    }
    #gettingStartedFooter .help-item
    {
        margin: 20px 0 40px 25px;
    }
    #gettingStartedFooter .help-item:first-child {
        margin-left: 20px;
    }
    .downloadButton, 
    .homeAppSamples,
    .sample-page #controlInfo, 
    .sample-page #sample,
    .help-content,
    .igsb-gs-tog {
        margin-right: 25px;
    }
    .igsb-gs-tog {
        margin-top: 75px;
    }

    .sbHeader {
        display: none;
    }
    
    #prodNav section.igsb-help li,
    .igsb-control-apps li, 
    .igsb-sample-desc li,
    #learning li  {
        line-height: 30px;
    }

    /* hiding header logo and adding the type only version inside the menu bar */ 
    .sbHeader { height: 0;}
   .sbContainerError {
        width: 100%;
    }
    .menu-bar label,
    .headerIcon img{
        display:none;
    } 
    .menu-bar {
        height: 60px;
        width: 100%;
        position: relative;
    }

    #hamburger {
        background: transparent;
        box-shadow: none;
        height: 60px;
    }
    #hamburger img {
        margin-top: 12px;
    } 
    .tablet-size-logo{
         display: block;
    }

    .tablet-size-logo:after {
        content: url(../images/ignite-ui.png);
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -150px;
        margin-top: -23px;
    }
    .svg .tablet-size-logo:after {
        content: url(../images/ignite-ui.svg);
    }


    .downloadButton {
        margin-top: 45px;
    }


      /* smaller homepage control icons */
        .homeControlsList .controlGroupIcon {
            width: 30px;
            height: 30px;
            background-image: url(../images/SB-icons-lowres.png);
            background-size: 480px 360px;
        }
        .igsb-data-grids {
            background-position: 0 0;
        }
        .igsb-olap-pivot {
            background-position: -90px 0;
        }
        .igsb-data-visualization {
            background-position: -150px 0;
        }
        .igsb-layout {
            background-position: -450px 0;
        }
        .igsb-editors {
            background-position: -60px -90px;
        }
        .igsb-frameworks {
            background-position: -210px -90px;
        }
        .igsb-interactions {
            background-position: -270px -90px;
        }
        .igsb-mobile-phone {
            background-position: -450px -180px;
        }

        .featuredControlsTitle {
            font-size: 26px;
            line-height: 30px;
            margin-bottom: 10px;
        }


    .control-group0,
    .control-group1 {
    margin-left: 0;
    }

    .control-group0 > ul > li > a,
    .control-group1 > ul > li > a {
        padding-left:33px;
    }
    
     #mainContainer > header {
        height: auto !important;
    }

    .prodNavTabs {
        width: 100%;
    }

    table.headerArea {
        width: 43%;
    }
    /* --- ShowCase Sample Page*/
    .showCaseSampleDetails
    {
        max-width: 50%;
        display: block;
        border: none;
        padding-right: 0;
        margin-right: 0;
    }
    .showCaseSampleImg {
        max-width: 45%;
        display: block;
    }
    /* move featured controls below the description */ 
    .scSampleControls{
        max-width: 50%;
        display: block;
        float: left;
        margin-left: 45%;
        padding-left: 20px;
    }
    .scSampleControlsUL li {
        display: inline-block;
        padding-right: 10px;
    }

    /* --- End ShowCase Sample Page*/
    #prodNavCollapse {
        display: inline-block;
    }

    #prodNav.sample-view {
        display: none;
    }

    #controlNav {
        display: none;
    }

     #sbPrevNextButtons  {
        margin-top: -15px;
     }

    #sampleNav {
        float: none;
        display: inline-block;
        width: auto;
    }

        #sampleNav nav {
            padding: 0px 10px;
        }
    
    #sampleFeatures {
		margin-left: -10px;
	}
	#samplesList {
		position: absolute;
		display: none;
		border: 1px solid #a0a0a0;
		background: #f8f8f8;
		width: 230px;
		overflow: auto;
		z-index: 1000001;/*get around 1000000 used by fallback CSS*/
		margin-top: -1px;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		border-radius: 6px;
		border-top-left-radius: 0px;
		-moz-border-top-left-radius: 0px;
		-webkit-border-top-left-radius: 0px;
	}

    #prodNavCollapseDropDown {
        display: none;
        z-index: 1000001;/*get around 1000000 used by fallback CSS*/
        position: absolute;
        background-color: lightgray;
        padding: 10px;
        width: 300px;
    }
    #desktopIndexNav{
        height: 30px;
        cursor: pointer;
    }
    #mobileIndexNav{
        height: 30px;
        padding-top: 10px;
        cursor: pointer;
    }
    #showCaseIndexNav{
        height: 30px;
        padding-top: 10px;
    }
    #prodNavCollapseButton {
        background-color: lightgrey;
        display: inline-block;
        padding: 5px 10px;
    }
    #desktopControls {
        background-color: white;
        height: 300px;
        overflow: auto;
        display: none;
    }
    #mobileControls {
        background-color: white;
        height: 300px;
        overflow: auto;
        display: none;
    }
   
    .desktopIndex{
        float: left;
    }
    .desktopIndexButton{
        float: right;
        width: 15px;
        height: 15px;
    }
    .desktopIndexButtonCollapsed{
        background: url(../images/productNavDownBtn.png) no-repeat;
        border: none;
        padding: 5px 5px 5px 5px;        
    }
    .desktopIndexButtonExpanded{
        background: url(../images/productNavUpBtn.png) no-repeat;
        border: none;
        padding: 5px 5px 5px 5px;        
    }
    .mobileIndex{
        float: left;
    }
    .mobileIndexButton{
        float: right;
        width: 15px;
        height: 15px
    }
    .mobileIndexButtonCollapsed{
        background: url(../images/productNavDownBtn.png) no-repeat;
        border: none;
        padding: 5px 5px 5px 5px;        
    }
    .mobileIndexButtonExpanded{
        background: url(../images/productNavUpBtn.png) no-repeat;
        border: none;
        padding: 5px 5px 5px 5px;        
    }
}

@media screen and (max-width: 990px) {
     .downloadButton { display: none;}
    .hamburgerMenu .navCategoryTitle a[href*="download"] {
        display: block;
    }

     .igsb-gs-tog {
        margin-top: 25px;
    }
     .homeControlsList {
          width: 270px;
     }
     .homeAppSamples { 
        width: 420px;
        margin-right: 10px;

     }
     #prodNav section, 
    .JSFrameworksInfo, 
    .framework-links, 
    #gettingStartedFooter .pageTitle,
    #gettingStartedFooter .pageDesc,
    .sample-page #controlInfo, 
    .sample-page #sample,    
     .help-content .pageTitle,
    .page.script-combiner   
    {
        margin-left: 10px;
    }
     /* optical corrections */
     #gettingStartedFooter .help-item,
     #gettingStartedFooter .help-item:first-child {
         margin: 20px 10px 40px 5px;
     }
     .helpNavDesc {
         margin-left: 5px;
     }

     #controlInfo {
         margin-top: 10px;
     }
     
     #sbPrevNextButtons  {
        margin-top: -36px;
     }
     #controlInfo {
         margin-right: 100px;
     }

     
    #igsb-themeSelector {
        width: 300px;
        border: 1px solid #E1E1E1;
    }

    .igsb-themeItem {
        display: block;
        width: 246px;
        padding: 0;
        margin: 1px 0 0 0;
    }
    .igsb-list-text,
    .igsb-list-version {
        float: left;
        line-height: 44px;
        font-size: 16px;
    }
    .igsb-list-version {
        margin-left: 5px;
    }
     
}

@media screen and (max-width: 730px) {

        /* This makes the apps go on top of the page */
    .homeAppSamples {
        float: none !important;
        display: table-header-group !important;
    }

    .homeControlsList {
        float: none !important;
        display: table-footer-group !important;
    }
    
    
    .pageTitle,
    .sample-page .pageTitle {
        font-size: 30px;
    }
    article.help-content h2 {
        font-size: 24px;
        line-height: 36px;
    } 
    article.help-content h3 {
        font-size: 18px;
        line-height: 24px;
    }, 
    article.help-content h4 {
        font-size: 16px;
        line-height: 24px;
    }
    .headerDesc {
        font-size: 12px;
    }
    
    .externalSites {
        font-size: 12px;
    }
    
    .igsb-gs-tog {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .igsb-gs-tog-btn,
    .igsb-gs-tog-btn-active {
        padding: 5px 10px;
    }
    
     .help-content .pageTitle {
         padding-top: 10px;
     }
    .helpNavTitle {
        font-size: 26px;
        line-height: 60px;
    }
    #gettingStartedFooter .help-item {
         display: block;
        width: auto;
    }
    
    #learning h3 {
        font-size: 26px;
    }
    .footerNav {
        padding: 8px;
    }
    

    /* Small logo */
    .menu-bar,
    #hamburger {

        height: 44px;
    }
    #hamburger img {
        margin-top: 4px;
    }
    .tablet-size-logo {
         display: none;
    }
    .phone-size-logo {
        display: block;
    }
    .phone-size-logo:after {
        content: url(../images/ignite-ui-small.png);
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -80px;
        margin-top: -13px;
    }
    .svg .phone-size-logo:after {
        content: url(../images/ignite-ui-small.svg);
    }

    

    /* This makes the apps image go on top of the page */
    .showCaseSampleImg {
        float: none;
        display: table-header-group;
    }
    
    .appSamplesImage {
         max-width: 420px;
    }

    .showCaseSampleDetails {
        float: none;
        display: table-footer-group;
    }

    .scSampleControls {
        float: none;
        display: inline;
    }

    .showCaseSampleDetails .appSamplesDesc,
    .showCaseSampleDetails .scSampleDetailsLinksQR {
        margin-right: 10px;
    }
    .igsb-tabs.ui-tabs li a {
        padding: 0 0.6em !important;
    }
}    

@media screen and (max-width: 541px) {

    .homeAppSamples {
    }

    table.headerArea {
        width: 53%;
        margin-left:26%;
    }
    .igsb-tabs.ui-tabs li a {
        padding: 0 0.2em !important;
    }

}

@media screen and (max-width: 460px) {

    /* --- ShowCase Sample Page*/
    .showCaseSampleDetails
    {
        width: 100%;
        display: block;
        box-sizing: border-box;
    }
    .showCaseSampleImg {
        width: 100%;
        display: block;
        box-sizing: border-box;
    }
    .scSampleControls{
        width: 100%;
        display: block;
        box-sizing: border-box;
    }    
    .scSampleDetailsLinksQR {
        display: none;
    }
    /* --- END ShowCase Sample Page*/

    .empty-li {
        display: inline-block;
    }

    table.headerArea {
        width: 53%;
    }

    .row35 {
        padding: 10px 10px 0px 10px !important;
    }

    .homeControlsList {
        width: 100% !important;  
        min-height: 100% !important;      
        float: left !important;
    }

    /* This makes the apps go on top of the page */
    .homeAppSamples {
        float: none !important;
        display: table-header-group !important;
    }

    .homeControlsList {
        float: none !important;
        display: table-footer-group !important;
    }
    
    .igsb-gs-tog {
        margin: 20px 0;
        width: 90%;
        text-align: center;
    }
    .igsb-tabs.ui-tabs li a {
        padding: 0 0.1em !important;
    }
}

@media screen and (max-width: 380px) {
    .control-group0 > ul > li > a
    .control-group1 > ul > li > a {       
        margin: 0 !important;
    }
	.controlListHeader {
		 margin-left: 0;
	}
	#prodNav section a {
		padding-right: 0px;
		margin-left: 0;
		margin-right: 0px;
	}
	.controlItemWidth {
		 overflow: hidden;
		 width: 150px;
	}
}

/*For Phones - Portrait and Landscape*/
@media screen and (max-width: 470px) {    
    #controlInfo div {
        padding-left: 10px;
    }

    #sampleNav Nav {
        margin-left: 10px;
        padding-left: 10px;
    }

    #JSFiddle,
    .downloadButton {
        display: none !important;
    }

	#sampleNav {
		margin-top: 5px;
	}

    .controlsTitleMinor {
        width: 287px;
    }
}


/* Retina Display images */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
  
  /* Retina-specific stuff here */

    .homeControlsList .controlGroupIcon {
        background-image: url(../images/SB-icons.png);
    }
    .sprite-blogsicon, 
    .sprite-forumicon, 
    .sprite-faqicon,
    .sprite-knockouticon, 
    .sprite-backboneicon, 
    .sprite-angularicon, 
    .sprite-ember, 
    .sprite-twittericon, 
    .sprite-zurb,
    .sprite-launchicon,
    .sprite-downloadicon,
    .sprite-giticon,
    .hamburgerMenu .nav-icon,
    #sampleNavigatePrev,
    #sampleNavigateNext,
    .searchIcon,
    .searchClearIcon,
    .igsb-list-image,
    .igsb-mobileThemes-dropdown {
        background-image: url(../images/OtherIcons.png);
  }
 
}