title: Getting Orientation to work for media queries
body: <p>I am trying to specify css for ipad landscape and portrait mode, and for some reason, the landscape is not playing well. It looks like the landscape is just using the portrait mode. The website is <a href="http://darthvixcustomsabers.com/ascend.html" rel="nofollow">http://darthvixcustomsabers.com/ascend.html</a> and im using ipadpeek emulator to test it.</p>
  
  <p>Here is my CSS, the media queries are in the middle about. </p>
  
  <pre><code>body {background-image:url('../images/space1.jpg');
  background-repeat: no-repeat center center;
      background-position: center;
      background-size: cover;
      width: 100%;
      min-height: 100%;
      }
  
  
  body {color:white;}
  a, a:visited { 
      color:#3399FF; text-decoration:none;}
  
  div.header{
  text-align:right;
  font-size:200%;
  }
  div.header1 {
  text-align:right;
  font-size:125%;
  }
  div.logo{
  margin-top:-40px;
  }   
  #nav{
  width:85%;
  height:3%;
  font-size: 26px;
  font-weight: bold;
  border-radius: 8px;
  text-align: center;
  margin: 0 auto;
  position:absolute;
  top:100px;
  left:120px;
  }
  
  #nav ul {
  height: auto;
  padding: 0px 0px;
  margin: 0px;
  background-color: #f2f2f2;
  border-bottom: 1px solid #ccc; 
  display: inline-block;
      }
  
  #nav li { 
  display: inline-block;
  padding: 20px; 
  margin-left: auto;
  margin-right: auto;
  }
  
  #nav a {
  text-decoration: none;
  color: #3399FF;
  padding: 8px 8px 8px 8px;
  }
  
  #nav a:hover {
  color: #000000;
  background-color:#3399FF;
  }
  
  nav ul ul {
      display: none;
  }
  
  nav ul li:hover &gt; ul {
          display: block;
  }
  div.qui {
  text-align:center;
  font-size:200%;
  text-decoration:underline;
  }
  div.specs {
  text-align:center;
  font-size:175%;
  }
  ul.qui {
  text-align:center;
  font-size:150%;
  list-style-type: none;
  }
  .images {
      overflow: hidden;
  }
  
  .images img {
      float: left;
      margin: 0px;
  }
  div.glams {
    text-align: center;
  
  }
  .left {
    float: left;
    margin-left:20%;
    padding:10px;
     border:3px solid #585858 ;
  }
  .right {
    float: right;
    margin-right:20%;
    padding:10px;
     border:3px solid #585858 ;
  }
  p.v {
  text-align:center;
  }
  
  @media only screen and (min-width: 768px) and (max-width: 770px)
  and (orientation : portrait) {
  
      div.header{
          text-align:right;
          font-size:140%;
      }
  
      div.header1 {
          text-align:right;
          font-size:100%;
      }
  
      div.logo{
          margin-top:-40px;
      }
  
      div.logo 
      img {
          height:100px;
          width:200px;
      }   
  
      #nav{
          width:100%;
          height:3%;
          font-size: 100%;
          font-weight: bold;
          border-radius: 8px;
          margin:0;
          padding:0;
          text-align: center;
          margin-top:5%;
          margin-left:-14%;
      }
  
      #nav ul {
          height: auto;
          padding: 0px 0px;
          margin: 0;
          background-color: #f2f2f2;
          border-bottom: 1px solid #ccc; 
          display: inline-block;
      }
  
      #nav li { 
          display: inline
          padding: 5px; 
          margin-left: auto;
          margin-right: auto;
      }
  
      #nav a {
          text-decoration: none;
          color:#3399FF;
          padding: 8px 8px 8px 8px;
          display: inline-block;
      }
  
      #nav a:hover {
          color: #000000;
          background-color: #FFF;
      }
  
      li:hover ul { 
          display: block; 
      }
  
  
  
   nav ul ul {
          display: none;
      }
  
      nav ul li:hover &gt; ul {
              display: block;
      }
  
      div.qui {
          text-align:center;
          font-size:200%;
          text-decoration:underline;
          margin-top:15%;
      }
  
      div.specs {
          text-align:center;
          font-size:175%;
      }
  
      ul.qui {
          text-align:center;
          font-size:150%;
          list-style-type: none;
      }
  
      .images {
          overflow: hidden;
      }
  
      .images img {
          float: left;
          margin: 0px;
      }
  
      div.one {
        text-align: center;      
      }
  
      .left {
        float: left;
        margin-left:3%;
        padding:0px;
         border:3px solid #585858 ;
      }
  
      .right {
        float: right;
        margin-right:3%;
        padding:0px;
         border:3px solid #585858 ;
      }
  
      p.v {
          text-align:center;
      }
      div.glams 
      img {
      height:180px;
      width: 300px;
      }
  
  @media only screen 
  and (min-device-height : 768px) 
  and (min-device-width : 1024px) 
  and (orientation : landscape) {
  body { background: green; } 
  
  
      div.header{
          text-align:right;
          font-size:140%;
      }
  
      div.header1 {
          text-align:right;
          font-size:100%;
      }
  
      div.logo{
          margin-top:-40px;
      }
  
      div.logo 
      img {
          height:80px;
          width:150px;
      }   
  
      #nav{
          width:100%;
          height:3%;
          font-size: 100%;
          font-weight: bold;
          border-radius: 8px;
          margin:0;
          padding:0;
          text-align: center;
          margin-top:5%;
          margin-left:-14%;
      }
  
      #nav ul {
          height: auto;
          padding: 0px 0px;
          margin: 0;
          background-color: #f2f2f2;
          border-bottom: 1px solid #ccc; 
          display: inline-block;
      }
  
      #nav li { 
          display: inline
          padding: 5px; 
          margin-left: auto;
          margin-right: auto;
      }
  
      #nav a {
          text-decoration: none;
          color:#3399FF;
          padding: 8px 8px 8px 8px;
          display: inline-block;
      }
  
      #nav a:hover {
          color: #000000;
          background-color: #FFF;
      }
  
      li:hover ul { 
          display: block; 
      }
  
  
  
   nav ul ul {
          display: none;
      }
  
      nav ul li:hover &gt; ul {
              display: block;
      }
  
      div.qui {
          text-align:center;
          font-size:200%;
          text-decoration:underline;
          margin-top:15%;
      }
  
      div.specs {
          text-align:center;
          font-size:175%;
      }
  
      ul.qui {
          text-align:center;
          font-size:150%;
          list-style-type: none;
      }
  
      .images {
          overflow: hidden;
      }
  
      .images img {
          float: left;
          margin: 0px;
      }
  
      div.one {
        text-align: center;      
      }
  
      .left {
        float: left;
        margin-left:3%;
        padding:0px;
         border:3px solid #585858 ;
      }
  
      .right {
        float: right;
        margin-right:3%;
        padding:0px;
         border:3px solid #585858 ;
      }
  
      p.v {
          text-align:center;
      }
      div.glams 
      img {
      height:180px;
      width: 300px;
      }
  }
  </code></pre>