Issue with ie9 and compiled LESS CSS

Question

This is the LESS CSS I'm currently using.

ie9 stops after this

#oo-terms, #oo-privacy, #fbpage, #termrewards, #panelerrorpage{
      #wrapper{
          height:100%;
          @media only screen and (max-width : 1020px) { width:95%; padding: 0 2.5%;}
          #content-wrapper{
              background:@light-grey;
              width:100%;
              max-width:1000px;
              margin-left:auto;
              margin-right:auto;
              -moz-box-shadow: 0px 0px 15px #636363;
              -webkit-box-shadow: 0px 0px 15px #636363;
              box-shadow: 0px 0px 15px #636363;
              -webkit-border-radius: 0px; 
              -moz-border-radius: 0px; 
              border-radius: 0px;
              position:inherit;
              margin-top:30px;
              display:block;
              @media only screen and (max-width : 1020px) {width:95%; padding: 5% 2.5%; }
              #facebookRegister, #facebookThankYou{
                  padding: 2.5%;
                  width: 95%;
                  color:@dark-blue;
                  clear:both;
                  .welcome{color:@dark-blue;}
                  div{
                      color:@dark-blue !important;
                      position:inherit !important;
                      top:0px;
                      left:0px;
                      h2{color:@dark-blue !important;}
                  }
                  .facebook-login-button{
                                    width:280px;
                                    float:none;
                                    position:inherit;
                                    margin:0px;
                                    padding:0px;
                                    background:#3b5999;
                                    height:36px;
                                    -webkit-border-radius: 0px; 
                                    -moz-border-radius: 0px; 
                                    border-radius: 0px;
                                    .facebook-login-mid{
                                        width:100%;
                                        padding: 0 0 0 0px;
                                        font-size:14px;
                                        line-height:36px;
                                        height:36px;
                                        -webkit-border-radius: 0px; 
                                        -moz-border-radius: 0px; 
                                        border-radius: 0px;
                                        background:url('/App_Presentation/panel/OpinionOutpost/img/oo-new-fbbg.png') no-repeat;
                                        background-position: 6px 0px;
                                        a{
                                            width: 237px;
                                            padding: 0 0 0 35px;
                                            display: block;
                                            background: 0;
                                            text-align: center;
                                            cursor: pointer;
                                            height: 36px;
                                        }
                                    }
                                }
                  .left{
                      width:45%; 
                      margin-right:5%; 
                      float:left; 
                      margin-top:50px;
                      @media only screen and (max-width : 700px) {width:100%; float:none; margin-right:0px;}

                  }
                  .right{
                      width:46%; 
                      float:right; 
                      margin-top:50px;
                      @media only screen and (max-width : 700px) {width:100%; float:none; margin-right:0px;}
                      input{
                        width:216px;
                        padding:0 10px 0 10px;
                        -webkit-border-radius: 0px; 
                        -moz-border-radius: 0px; 
                        border-radius: 0px; 
                        border: 1px solid #cdcdcd;
                        height:36px;
                        line-height:36px;
                        color:#cdcdcd;
                        margin-top:10px;
                        font-weight:normal;
                        margin-left:0px;
                        }
                        label{
                            display:none;
                        }
                        #fbSyncAccount{
                            background:@light-blue;
                            margin: 10px auto;
                            border:none;
                            color:#ffffff;
                        }
                      }
                  .right:after{clear:both;}
              }

          }
      }
}

I do not see any issues with this css, I'm wondering if IE9 has any conflicts with any of these classes...

Heres the real kicker... IE8 continues reading the CSS til the bottom of the document.

Here is what comes after

#termrewards, #panelerrorpage{
    #content-wrapper{
        width:95%;
        padding:2.5%;
    }
}
input[type="text"], input[type="password"]{
    @media only screen and (max-width : 1024px) {font-size:16px !important; }
}
#rewardpage #wrapper #large-right p a{color:@light-blue;}
#modal-container .red-button-mid{background:@light-blue;}
#modal-container .red-button-mid:hover{background:@light-blue;}
.facebook-login-button{
    position:relative;
    img{
        position:absolute;
        right:6px;
        top:6px;
    }
}

Answer 1

If you're dealing with a lot of selectors, you could be experiencing this:

Internet Explorer 9 and below cannot process more than 4,095 selectors from a single CSS file. Any additional selectors are ignored.

Your solution could potentially be this: http://blesscss.com/