@media screen and (orientation:landscape){

  .mobile{display:none;}

  body{background-color: black;width: 100%; height: 850px; background-image: url(images/hbs9.jpg); background-repeat: no-repeat; background-position: center -150px;}
  #container{display:none;width: 960px; height: 750px; margin: auto; margin-top: 20px; z-index:102;}
  #head{width: 100%; height: 140px;}
  #logoBox{cursor: pointer; width: 275px; height: 140px; float: left;position: relative;}
  #logoTopBox{width: 275px; height: 90px;}
  #byline{float:left; position: relative; width: 275px; color: #fff; font-family: 'Roboto', sans-serif; text-shadow: 0px 0px 1px #f9d77b; left: -5px;}
  /*#navigation{float: right; height: 140px; width: 580px; z-index: 102;}*/
  #navigation{float: right; height: 140px; width: 650px; z-index: 102;}
  #navigationText{float:right; line-height: 270px; color: #d7d7d7; font-weight: bold;font-family: 'Roboto', sans-serif; text-shadow: 0px 0px 2px #222;}
  .links{padding-left: 30px;}
  .links:hover{line-height: 239px; color: white; cursor: pointer;}
  #logo{background-image: url(images/bgInset.png);background-repeat: no-repeat; width: 960px; height: 800px; background-size: 100%;}
  #byline:hover{cursor:pointer;}
  #content{width: 890px; height:400px; margin: 40px 15px 15px 35px;}
  #footer{width: 100%; height: 150px;}
  .footerSection{float: left; position: relative;width: 32%; height: 145px;}
  #footerLeft{color: white;}
  #footerMiddle{color: white; padding-top: 55px;}
  #footerLogo{background-image: url(images/logoSmall.png); background-repeat: no-repeat; background-position: center top; height: 55px;}
  .footerText{text-align: center;font-family: 'Open Sans Condensed', sans-serif;font-weight: bold; font-size: 16px; text-shadow: 0px 0px 3px #555;}
  .footerTextSmall{font-size: 12px; text-shadow: 0px 0px 3px #555;}
  #footerRight{background-image: url(images/footer.png); background-size: 60%; background-repeat: no-repeat; background-position: center; color: white; font-family: 'Roboto', sans-serif; text-align: center; padding-top: 20px;}
  #disclosure{}
  #disclosure:hover{ color: #ffff00; cursor: pointer;}

  /* index.php content */
  #iContent{background-color: #1e5983; width: 870px; height: 375px; padding: 10px;}
  #iLeft{float: left; position: relative; width: 140px; height: 375px; background-color: black;}
  #iRight{float: left; position: relative; width: 730px; height: 375px; background-color:white; background-image: url(images/bgMiddle.jpg); background-repeat:no-repeat; background-position:center left; }
  .iNav{width: 100%; height: 90px; color: white; padding-top:35px; font-size: 20px; cursor: pointer; opacity: 1;}
  .iNav:hover{opacity: 0.9;}
  #iLtop{background-color: #1e5983; background-position: center left; background-repeat: no-repeat;}
  #iLmiddle{background-image: url(images/wood.jpg); background-position: center left; background-repeat: no-repeat;}
  #iLbottom{background-image: url(images/greyBrush.png); background-position: center left; background-repeat: no-repeat;}
  .indexInfo{display: none; width: 705px; height: 375px; margin-left: 25px; background-color: white;}
  #certified{display: none; background-image: url(images/slide/kauri.jpg); background-repeat: no-repeat; overflow-x: hidden;}
  #building{display:block; overflow-y: auto;}
  #concrete{display:none; overflow-y: auto;}
  .iHead{font-family: 'Roboto', sans-serif; padding: 20px;}
  .iHead a{text-decoration: none; color: #0f4164;}
  .iHead a:visited{text-decoration: none; color: #0f4164;}
  .iHead a:hover{text-decoration: underline; color: #0e3053;}
  .indexTitle{font-family: 'Oswald', 'Roboto', sans-serif; font-size: 20px; color: #333;}
  .indexTitle img{vertical-align: middle; height: 35px; margin-top: -9px;}

  .indexTitle h1{font-family: 'Oswald', 'Roboto', sans-serif; font-size: 20px; color: #333;}
  .indexTitle img{vertical-align: middle; height: 35px; margin-top: -9px;}

  .iHead p{font-family: sans-serif; font-size: 13px;}
  #blackBar{z-index: 105; bottom: 0; margin-top: 325px;height: 50px; color: white; background-color:  #111; font-family: 'Roboto', sans-serif; padding-right: 50px;line-height: 50px; cursor: pointer; text-align: right;}
  #blackBar:hover{color: #ccf; background-color: #000;}
  .disCont li{font-family: sans-serif; font-size: 13px; list-style-image: url(images/hammer.png); vertical-align: middle;}
  .licensing{height: 50px;}
  #lbp img{vertical-align: middle; float: right; height :100%; }
  #cba img{vertical-align: bottom; float: right; height :150%; margin-top: -10px;}
  #iag img{vertical-align: bottom; float: right; height :100%; padding-left:20px;}

  /* contact.php content */

  #contactContent{height: 395px; width: 890px; box-shadow: 0 0 5px white; background-color: white;}
  #contactLeft{height: 355px; width: 310px; float: left;position: relative; padding: 20px; font-family: sans-serif;}
  #contactRight{height: 395px; width: 540px; float: left;position: relative; font-family: sans-serif;}
  #contactRight{background-size:540px 1611px; background-image: url(images/trucks.png); background-repeat:  no-repeat;
                transition-property: background-position; transition-duration: 3s; transition-timing-function:ease-out;
               }
  .scrollVert{background-position: 0px -1216px;}
  #loading2{position:relative; float:left; width: 100%; text-align: center; padding-top: 20px; font-size: 30px; font-family: 'Stardos Stencil', cursive;}
  #contactLeft h1{color: #292526; font-family: 'Stardos Stencil', cursive; margin: 0 0 20px 0;text-shadow: 0px 0px 1px #bda460;}
  #contactLeft h2{font-family: 'Roboto'; margin: 0; font-size: 16px; text-shadow: 2px 2px 2px #eee;}
  #contactLeft li{list-style-type: none;}
  #contactLeft img{vertical-align: middle;}
  #contactRight h2{font-family: 'Roboto'; margin: 0; font-size: 16px; margin-top: 90px; text-shadow: 2px 2px 2px #eee;}
  #contactRight li{list-style-type: none;}
  #rightContent{background-color: white; margin: -10px 0 10px 0; opacity: 0.9;}

  /* plans.php content */

  #gradedCover{display: none; z-index: 110; position: absolute; background-color: black; opacity:1; top:0; left: 0;}
  #controlBox{width: 1000px; height: 500px; margin: auto; margin-top: 100px; background-color: white; background-image: url();}
  #outer{width: 120px; height: 50px; border: 1px solid #444; background-color: #eee; position: relative; float: left; top: -25px;}
  #middle{width: 116px; height: 46px; border: 2px solid #eee; background-color: #eee; margin: auto;}
  #inner{width: 112px; height: 42px; border: 2px solid #444; background-color: #eee;}
  #closeContent{text-align: center; padding-top: 6px; font-family: 'Stardos Stencil', cursive; font-size: 22px; height:36px; cursor: pointer;}
  #closeContent:hover{color:white; background-color: red;}

  #plansContent{height: 355px; width: 850px; box-shadow: 0 0 5px white; background-color: white; padding: 20px; overflow-y: auto;}
  #plansContent h1{color: #292526; font-family: 'Stardos Stencil', cursive; margin: -5px 0 -5px 0;text-shadow: 0px 0px 1px #bda460;}
  #plansContent p{font-family: sans-serif; font-size: 13px; margin-top: 5px;}
  .plan{width: 800px; height: 525px; border: 4px solid #ddd; margin: auto; margin-top: 30px; margin-bottom: 5px;}
  .planTitle{font-family: 'Oswald', sans-serif;text-transform: uppercase; left:20px; top: -15px; width: 120px; padding-left: 20px; height: 25px; background-color: white; position: relative; border: 4px solid #ddd; }
  .planImg{float: right; margin-left: 20px; height: 80px;}
  .planHouse{height: 239px;}
  .pohutukawa{background-image: url(images/coastal_pohutukawa.jpg); background-size: 800px; margin-top: -33px;  cursor:pointer;  }
  .fantail{background-image: url(images/urban_fantail.jpg); background-size: 800px; margin-top: -33px;  cursor:pointer;  }
  .kauri{background-image: url(images/rural_kauri.jpg); background-size: 800px; margin-top: -33px;  cursor:pointer;  }
  .housePlansBlurb{width: 340px; height: 224px; float: left; position: relative; padding: 30px;}
  .tS{font-family: 'Oswald', sans-serif; margin: 0;}
  .housePlans{width: 400px; height: 284px; float: left; position: relative;}
  .plans1{background-image: url(images/coastal_pohutukawa_plan.jpg);  cursor:pointer; }
  .plans2{background-image: url(images/urban_fantail_plan.jpg);  cursor:pointer; }
  .plans3{background-image: url(images/rural_kauri_plan.jpg);  cursor:pointer; }
  .more{background-image: url(images/arrow_white_right.png);  background-repeat: no-repeat; background-position: 97% 50%; float: right; font-family: 'Oswald',sans-serif; font-size: 16px;  width: 210px; height: 25px; color: white; background-color:#015A84; padding: 5px 0 5px 10px; cursor:pointer; margin-top: 10px;}
  .bedroom{background-image: url(images/icon_bedrooms.png);}
  .bathroom{background-image: url(images/icon_bathrooms.png);}
  .garage{background-image: url(images/icon_garage.png);}
  .homePics{height: 30px; width: 30px; padding: 5px; background-repeat: no-repeat; background-position: center center; margin-top: -8px;}
  .inlinePics{position: relative; float: left; font-family: 'Oswald', sans-serif;}
  .titleSingle{width: 340px; height: 30px;}
  .firstPic{margin-left: 40px;}
  .planHeadPics{height: 30px; width: 30px; background-size: 30px 30px; background-repeat: no-repeat; position: relative; float:left; margin-right: 10px;}
  .p1{background-image: url(images/plan.jpg);}
  .p2{background-image: url(images/house.jpg);}
  .bigger{font-size: 26px;}
  .i1{background-image: url(images/plan.jpg);}
  .i2{background-image: url(images/quality.jpg);}
  .i3{background-image: url(images/calendar.jpg);}
  .i4{background-image: url(images/knowledge.jpg);}

  .c1{background-image: url(images/concrete.jpg);}
  .c2{background-image: url(images/repair.jpg);}

  /* latest.php content */
  .latest{font-family: 'Roboto', sans-serif; }
  .latestItem img{vertical-align: top;}
  .latestItem > h2{font-size: 1.2em;}
  .latestImage{border: 6px solid black;}
  .imgRight{float: right; margin-left: 20px;}
  .imgLeft{float:left; margin-right: 20px;}

  /* testimonials.php content */

  #testimonialContent{height: 355px; width: 850px; box-shadow: 0 0 5px white; background-color: white; padding: 20px;}
  #testimonialContent h1{font-family: 'Roboto'; margin: 0 0 20px 0;text-shadow: 2px 2px 2px #eee;}

  /* disclosure.php content */
  .disCont li{font-family: sans-serif; font-size: 13px; list-style-image: url(images/hammer.png); vertical-align: middle;}
  .disLink{cursor: pointer;}
  .disLink:hover{color: #002; text-decoration: underline;}
  .disLink img{margin: 0 10px 0 15px;}
  .d1{background-image: url(images/check.png);}

  /* Loading Section */
  #logoTopCont{background-image: url(images/grain.jpg); height: 124px; width: 892px;  border-top-left-radius: 14px; border-top-right-radius: 14px;}
  #logoHead{width: 892px; height: 124px; background-image: url(images/logo363x124.png); background-repeat: no-repeat; background-position: center center;}
  #loadContainer{width: 900px; height: 450px; position: absolute; z-index: 101;}
  #hiddenTopBox{width: 900px; height: 450px; position: relative; top: 150px; display:none;}
  #loadText{color: black;background-image: url(images/grain2.jpg); height: 67px; width: 892px; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; background-position: center -15px; font-weight: bold;}
  #loading{display:none; position: relative; width: 900px; height: 450px; left:0; top: 150px; background-color: black; opacity: 0.9; border-radius: 20px;
           background: -webkit-linear-gradient(5deg, #000, #555); /* For Safari 5.1 to 6.0 */
           background: -o-linear-gradient(5deg, #000, #555); /* For Opera 11.1 to 12.0 */
           background: -moz-linear-gradient(5deg, #000, #555); /* For Firefox 3.6 to 15 */
           background: linear-gradient(5deg, #000, #555); /* Standard syntax */
           border: 1px solid #777;
          }
  #specialists{color: #ddd; text-shadow: 1px 1px 2px #ccc; font-size: 48px; font-family: 'Roboto', sans-serif;}
  .specialists{color: white; text-shadow: 1px 1px 2px #ccc; font-size: 40px; font-family: 'Roboto', sans-serif;}
  #spinner{background-image: url(images/loading.gif); height: 80px; opacity: 0.9; background-repeat: no-repeat; background-position: center;}
  #loadLight{width: 898px; height: 448px; border: 1px solid #888; border-radius: 19px;}
  #loadDark{width: 892px; height: 442px; border: 3px solid #555; border-radius: 18px; text-align: center;}
  /* End  Loading Section */


}

/*  Portrait Mode - index.php*/

@media screen and (orientation:portrait)  {

  .mobile{display:block;}
  .notMobile{display:none;}
  a{text-decoration: none;}
  body{background-color: black; font-size: 1.3em; margin-top:0px;}
  #head{display:block; clear:both; width: 100%;}
  #logo{text-align: center; width: 100%;}
  #logoBox{width: 100%}
  #logoTopBox img{width: 90%; background-image:url(images/grain.jpg); background-size: 100% 33%; padding:5%;}
  #byline{color: white; font-weight: bold; background-color: #4b1d0e; opacity: 0.8; }
  #navigation{color: white;}
  #navigationText{display: none;  font-size: 210%; }
  #menu{cursor: pointer; text-align: left; width: 100%; font-weight: bold; font-size: 210%; margin: 10px 0 10px 0;}
  .links{width: 95%; float: left; clear: left;text-align: left; padding: 10px 0 10px 30px; border-bottom: 2px solid white; background-color: black;}
  .links:hover{cursor: pointer; background-color: #222;}
  #content{clear: both; background-color: white; padding-top:5px; border-radius: 2px;padding-bottom:20px;}
  .bookingText{text-align: center;}
  .dialMe, .mobDialMe{padding: 5% 0; font-size: 150%; color:white; font-weight:bold; line-height:40px; border: 2px solid #4b1d0e; border-radius: 5px; text-shadow: 2px 2px 2px #444; box-shadow: 2px 2px 2px #333; margin: 5% 10px 5% 10px; background-image: url(images/grain.jpg); background-size: 100% 100%; text-align: center;}
  .dialMe:hover{color:#eee; cursor: pointer;}
  .indexTitle{text-align: left; margin-left:20px;font-family: 'Oswald', 'Roboto', sans-serif; margin-top: 20px;}
  .indexTitle img{vertical-align: middle;}
  p{font-size: 0.8em; margin: 0 20px 0 20px; text-align: justify;}
  h1{font-size:1.2em; font-family: 'Oswald', 'Roboto', sans-serif;}
  #iag img{float: right; margin-left:20px;}
  #cba img{float: right; margin-left:20px;width:15%;}
  #lbp {margin-top:20px;}
  #lbp img{float: left; margin-right:20px;width:50%;}
  .planHeadPics{margin-top:20px; height: 40px;}
  .disCont li{font-family: sans-serif; font-size: 13px; list-style-image: url(images/hammer.png); vertical-align: middle;}
  .planImg{width: 20%; position: relative; float:left; margin: 0 20px 0 20px;}
  .planHeadPics{width:50px; height: 50px; background-size: 100% 100%; position: relative; float: left; margin: 0; padding: 0;}
  h1{position: relative;}

  .i1{background-image: url(images/plan.jpg);}
  .i2{background-image: url(images/quality.jpg);}
  .i3{background-image: url(images/calendar.jpg);}
  .i4{background-image: url(images/knowledge.jpg);}

  .c1{background-image: url(images/concrete.jpg);}
  .c2{background-image: url(images/repair.jpg); margin-top: -10px;}
  .p1{background-image: url(images/plan.jpg);}
  .p2{background-image: url(images/house.jpg);}

  .firstLetter{margin-left:20px;}
  #plansContent > .planImg {float:right;}

  .plan{margin: 20px 20px 0 20px;}
  .bedroom{background-image: url(images/icon_bedrooms.png); background-size: 60px 60px;}
  .bathroom{background-image: url(images/icon_bathrooms.png); background-size: 60px 60px;}
  .garage{background-image: url(images/icon_garage.png); background-size: 60px 60px;}
  .inlinePics{position: relative; float: left; font-family: 'Oswald', sans-serif;}
  .homePics{height: 60px; width: 60px; padding: 5px; background-repeat: no-repeat; background-position: center center; margin-top: -8px;}
  #plansContent > p {display:block;}
  .titleSingle{height:80px; font-size: 200%;}
  .more{cursor: pointer; color: #0000aa;}
  .housePlansBlurb{margin-top:20px;}
  .planTitle{font-family: 'Oswald', 'Roboto', sans-serif;}

  /* latest.php content */
  .latest{font-family: 'Roboto', sans-serif; margin-top: -20px; display:none }
  #plansContent h1{ margin: 10px 0 10px 20px; font-size: 1.5em;color: #292526; font-family: 'Stardos Stencil', cursive; text-shadow: 0px 0px 1px #bda460;}

  .latestItem img{vertical-align: top;}
  .latestItem > h2{font-size: 1.2em; text-align: center;}
  .latestImage{border: 6px solid black;}
  .imgRight{float: right; margin-left: 20px; width:52%; margin-top:20px;}
  .imgLeft{float:left; margin-right: 20px; margin-bottom: 10px;width:52%;}

  /*  Contact */
  #contactContent{margin: 0 20px 0 20px;}
  h2{font-family: 'Roboto'; margin: 0;  text-shadow: 2px 2px 2px #eee;}
  #contactLeft li, #contactRight li{list-style-type: none; margin-left:-30px;}
  .mobDialMe img{opacity: 0.9; background-color: #543210; padding: 5px; vertical-align: middle; border-radius: 25px; border: 2px solid #a98765;}
  .mobDialMe{cursor: pointer;line-height: 30px; padding:5% 0 5% 0;}
}
/* End Portrait */