xp-dev.com Git - namibia/blob - public/css/ie/layout.css

   1 /* This one will target Internet Explorer 9 and Internet Explorer 10 */
   2 @media screen and (min-width:0\0) {
   3
   4 /* ------------------------------------------------------- Generic Font Styles */
   5 a {
   6   color : #8bb8ea;
   7 }
   8
   9
  10 /* ------------------------------------------------------- Generic Top Level Styles */
  11 .container-fluid{
  12   max-width : 910px;
  13   margin    : 0 auto;
  14 }
  15
  16 /* ------------------------------------------------------- Layout Styles */
  17 #Header {
  18   -webkit-transition: all 0.3s ease;
  19   -moz-transition: all 0.3s ease;
  20   -ms-transition: all 0.3s ease;
  21   -o-transition: all 0.3s ease;
  22   transition: all 0.3s ease;
  23   -webkit-box-shadow : 0 2px 5px rgba(0,0,0,0.5);
  24   -moz-box-shadow    : 0 2px 5px rgba(0,0,0,0.5);
  25   box-shadow         : 0 2px 5px rgba(0,0,0,0.5);
  26   padding-top        : 22px;
  27   border-bottom      : 4px solid #8bb8ea;
  28   position           : fixed;
  29   width              : 100%;
  30   z-index            : 10000;
  31   background         : #FFF;
  32   height             : 90px;
  33   overflow           : hidden;
  34   }
  35
  36   #Header .container-fluid {
  37     padding   : 0;
  38     max-width : 950px;
  39   }
  40
  41   #SearchBar {
  42     -webkit-transition: margin-top 0.35s ease;
  43     -moz-transition: margin-top 0.35s ease;
  44     -ms-transition: margin-top 0.35s ease;
  45     -o-transition: margin-top 0.35s ease;
  46     transition: margin-top 0.35s ease;
  47     margin-bottom : 0;
  48   }
  49
  50   #SearchBarInput {
  51     -webkit-border-radius : 3px 0 0 3px;
  52     -moz-border-radius    : 3px 0 0 3px;
  53     border-radius         : 3px 0 0 3px;
  54     height                : 26px;
  55     line-height           : 26px;
  56     padding               : 0 10px;
  57     border                : 1px solid #CECECE;
  58     vertical-align        : top;
  59     float                 : left;
  60   }
  61
  62   #SearchBarSubmit {
  63     -webkit-border-radius : 0 3px 3px 0;
  64     -moz-border-radius    : 0 3px 3px 0;
  65     border-radius         : 0 3px 3px 0;
  66     background            : url('/img/app/icons/search-submit-magnify-glass.png') no-repeat center #E9E9E9;
  67     height                : 28px;
  68     line-height           : 28px;
  69     border                : 1px solid #CECECE;
  70     border-left           : 0;
  71     vertical-align        : top;
  72     float                 : left;
  73     width                 : 36px;
  74     padding               : 0;
  75   }
  76
  77   #Header .nav,
  78   #Footer .nav {
  79     font-family    : 'universLTStd_cn';
  80     font-size      : 14px;
  81     text-transform : uppercase;
  82     margin         : 13px 0 0;
  83     }
  84
  85     #Header .nav li,
  86     #Footer .nav li {
  87       margin-left : 26px;
  88     }
  89
  90     #Header .nav a,
  91     #Footer .nav a{
  92       -webkit-transition  : background-position 0.1s linear;
  93       -moz-transition     : background-position 0.1s linear;
  94       -ms-transition      : background-position 0.1s linear;
  95       -o-transition       : background-position 0.1s linear;
  96       transition          : background-position 0.1s linear;
  97       color               : #808a90;
  98       padding             : 0 0 25px;
  99       margin              : 0;
 100       background          : url('/img/app/bgs/menu-item-arrow.png') no-repeat;
 101       background-position : center 40px;
 102       }
 103
 104       #Header .nav a:hover,
 105       #Header .nav a:focus,
 106       #Footer .nav a:hover,
 107       #Footer .nav a:focus {
 108         text-decoration : underline;
 109       }
 110
 111       #Header .nav a:hover,
 112       #Header .nav a:focus,
 113       #Header .nav a.active {
 114         background-position : center bottom;
 115         outline             : none;
 116       }
 117
 118 #Header.compressed {
 119   overflow    : hidden;
 120   height      : 50px;
 121   padding-top : 5px;
 122   }
 123
 124   #Header.compressed #SearchBar {
 125     margin-top : -50px;
 126   }
 127
 128   #Header.compressed .nav {
 129     margin-top : 15px;
 130   }
 131
 132 #HeroBar {
 133   -webkit-transition : height 0.5s ease;
 134   -moz-transition    : height 0.5s ease;
 135   -ms-transition     : height 0.5s ease;
 136   -o-transition      : height 0.5s ease;
 137   transition         : height 0.5s ease;
 138   height             : 170px;
 139   background         : #8BB8EA;
 140   padding-top        : 116px;
 141   position           : relative;
 142   z-index            : 7000;
 143   width                          : 100%;
 144   }
 145
 146 .hero-nav{
 147          z-index            : 7000;
 148 }
 149
 150  #HeaderLogo {
 151         padding-left:70px;
 152  }
 153
 154 #BodyContent {
 155   position      : relative;
 156   z-index       : 8000;
 157   margin-top    : -60px;
 158   background    : #FFF;
 159   min-height    : 350px;
 160   margin-bottom : 80px;
 161   }
 162
 163   .homepage {
 164     display: block;
 165     float: left;
 166     padding: 0 11px 0 10px;
 167     width: 930px;
 168 }
 169
 170 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
 171     border: 0 none;
 172     margin: 0;
 173     outline: 0 none;
 174     padding: 0;
 175     vertical-align: baseline;
 176 }
 177 body {
 178     background: url("../../images/bdy_bg.png") repeat scroll 0 0 #FFFFFF;
 179     font-family: Arial,Helvetica,sans-serif;
 180     font-size: 12px;
 181 }
 182 ul {
 183     list-style: none outside none;
 184 }
 185 img, fieldset {
 186     border: medium none;
 187 }
 188 a {
 189     text-decoration: none;
 190 }
 191 .hidden {
 192     left: -9999px;
 193     position: absolute;
 194 }
 195 .clear {
 196     clear: both;
 197 }
 198 #mainContent.IE {
 199     margin: 0 auto;
 200     width: 960px;
 201 }
 202 .homepage {
 203     padding: 0 11px 0 10px;
 204     width: 930px;
 205 }
 206 .slideshow {
 207     background: url("/images/slideshow.png") repeat-x scroll center bottom transparent;
 208     padding: 0 0 2px;
 209     width: 100%;
 210 }
 211 .slidecon {
 212     height: 266px;
 213     width: 100%;
 214 }
 215 .slidecon_r {
 216     float: right;
 217     width: 554px;
 218 }
 219 .slidecon_l {
 220     color: #000000;
 221     float: left;
 222     font-size: 42px;
 223     font-weight: bold;
 224     padding: 30px 0 0 10px;
 225     width: 330px;
 226 }
 227 .slidecon_l span {
 228     color: #D52E31;
 229 }
 230 .slidecon_l h2 {
 231     font-size: 58px;
 232 }
 233 .heading-two-wrapper {
 234     font-size: 23px;
 235     font-weight: normal;
 236     line-height: 26px;
 237 }
 238 .iconDiv ul {
 239     overflow: hidden;
 240 }
 241 .icon {
 242     float: left;
 243     width: 86px;
 244 }
 245 .iconText {
 246     color: #1B1B1B;
 247     float: right;
 248     font-size: 23px;
 249     line-height: 25px;
 250     padding: 3px 0 0;
 251     width: 145px;
 252 }
 253 /*.btnDiv {
 254     overflow: hidden;
 255     padding: 8px 0;
 256     width: 100%;
 257 }
 258 .btnDiv .btnDiv_lft {
 259          background: url("/images/btnDiv_lft.png") no-repeat scroll 0 0 transparent;
 260     float: left;
 261     height: 64px;
 262     padding: 18px 76px 16px 4px;
 263     width: 400px;
 264 }
 265 .btnDiv .btnDiv_lft .div260 {
 266     color: #FFFFFF;
 267     float: left;
 268     font-size: 53px;
 269     font-weight: bold;
 270     height: 64px;
 271     line-height: 64px;
 272     padding-left: 40px;
 273     text-align: center;
 274     width: 111px;
 275 }*/
 276
 277 .homepage .iconDivn .iconText {
 278     color: #1B1B1B;
 279     float: right;
 280     font-size: 23px;
 281     line-height: 25px;
 282     padding: 3px 0 0;
 283 }
 284
 285 .homepage .iehr {
 286         background: url("/images/slideshow.png") repeat-x scroll 0 0 transparent;
 287         width: 100%;
 288     display: block;
 289     float: left;
 290         height: 5px;
 291 }
 292 .homepage .iconDiv  {
 293
 294         width: 100%;
 295     display: block;
 296     float: left;
 297         height: 215px;
 298         overflow:hidden;
 299 }
 300 #PageContent {
 301         width: 100%;
 302 }
 303
 304 #PageContent.home, #PageContent.about_us, #PageContent.faq, #PageContent.contact_us  {
 305         width: 100%;
 306 }
 307
 308
 309 .homepage .iconDiv ul {
 310     width: 100%;
 311     display: block;
 312     float: left;
 313         height: 215px;
 314 }
 315
 316 .home {
 317     color: #413E3E;
 318     line-height: 16px;
 319     padding: 30px 0 0;
 320     width: 100%;
 321 }
 322
 323
 324   #BodyContent.loading {
 325     background : url('/img/app/anims/loading.gif') no-repeat center #FFF;
 326   }
 327
 328   #BodyContent .content-frame-shadow-left,
 329   #BodyContent .content-frame-shadow-right {
 330     background : url('/img/app/bgs/content-frame-shadow-sprite.png') no-repeat top left;
 331     min-height : 350px;
 332     width      : 14px;
 333     position   : absolute;
 334     top        : 0;
 335     left       : -14px;
 336   }
 337
 338   #BodyContent .content-frame-shadow-right {
 339     background-position : top right;
 340     left : 100%;
 341   }
 342
 343 .container-fluid:before, .container-fluid:after {
 344     display: table;
 345     line-height: 0;
 346 }
 347
 348 #Footer {
 349   position    : relative;
 350   z-index     : 9000;
 351   padding-top : 40px;
 352   }
 353
 354   #Footer .shadowed-border {
 355     -webkit-box-shadow : 0 1px 4px rgba(0,0,0,0.5);
 356     -moz-box-shadow    : 0 1px 4px rgba(0,0,0,0.5);
 357     box-shadow         : 0 1px 4px rgba(0,0,0,0.5);
 358
 359         /* For IE 8 */
 360         -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
 361     background         : #FFF;
 362     height             : 4px;
 363     position           : absolute;
 364     top                : 0;
 365     left               : 0;
 366     width              : 100%;
 367   }
 368
 369   #FooterLogo {
 370     position : absolute;
 371     left     : 50%;
 372     margin   : -35px 0 0 -35px;
 373     top      : 0;
 374   }
 375
 376   #Footer .copyright {
 377     text-align : center;
 378     font-size  : 11px;
 379     color      : #A5A8AD;
 380   }
 381
 382 /* ------------------------------------------------------- Hero Icons */
 383
 384   .hero-icon {
 385           -webkit-transition : all 0.2s ease;
 386           -moz-transition    : all 0.2s ease;
 387           -ms-transition     : all 0.2s ease;
 388           -o-transition      : all 0.2s ease;
 389           transition         : all 0.2s ease;
 390           -webkit-transform  : translate3d(0, 0, 0);
 391           -moz-transform     : translate3d(0, 0, 0);
 392           -ms-transform      : translate3d(0, 0, 0);
 393           -o-transform       : translate3d(0, 0, 0);
 394           transform          : translate3d(0, 0, 0);
 395           float              : left;
 396           margin             : 15px 30px;
 397     cursor             : pointer;
 398   }
 399
 400   .hero-icon.fadeOut {
 401     -webkit-transform : translate3d(0, 60px, 0);
 402     -moz-transform    : translate3d(0, 60px, 0);
 403     -ms-transform     : translate3d(0, 60px, 0);
 404     -o-transform      : translate3d(0, 60px, 0);
 405     transform         : translate3d(0, 60px, 0);
 406   }
 407
 408   .hero-icon.slideOut {
 409     -webkit-transform : translate3d(0, -100px, 0);
 410     -moz-transform    : translate3d(0, -100px, 0);
 411     -ms-transform     : translate3d(0, -100px, 0);
 412     -o-transform      : translate3d(0, -100px, 0);
 413     transform         : translate3d(0, -100px, 0);
 414     -ms-filter        : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 415     filter            : alpha(opacity=0);
 416   }
 417
 418   .hero-icon .icon {
 419     float      : left;
 420     width      : 60px;
 421     height     : 60px;
 422     background : url('/img/app/icons/hero-icons-sprite.png') no-repeat left top;
 423     margin     : 0 auto;
 424   }
 425
 426   .hero-icon .hero-label {
 427     float          : left;
 428     clear          : left;
 429     font-family    : 'universLTStd_lightcn';
 430     font-size      : 14px;
 431     line-height    : 20px;
 432     text-transform : uppercase;
 433     color          : #FFF;
 434     font-weight    : normal;
 435   }
 436
 437   .hero-icon:hover {
 438     text-decoration : none;
 439   }
 440
 441   .hero-icon:hover .hero-label, .hero-icon.active .hero-label{
 442     color           : #29506F;
 443   }
 444
 445   .hero-icon .icon.overview {
 446     background-position : 0 0;
 447   }
 448
 449   .hero-icon:hover .icon.overview, .hero-icon.active .icon.overview {
 450     background-position : 0 -60px;
 451   }
 452
 453 .hero-icon .icon.team {
 454     background-position : -60px 0;
 455   }
 456
 457   .hero-icon:hover .icon.team, .hero-icon.active .icon.team  {
 458     background-position : -60px -60px;
 459   }
 460
 461   .hero-icon .icon.quick-search {
 462     background-position : -120px 0;
 463   }
 464
 465   .hero-icon:hover .icon.quick-search, .hero-icon.active .icon.quick-search {
 466     background-position : -120px -60px;
 467   }
 468
 469   .hero-icon .icon.vision {
 470     background-position : -180px 0;
 471   }
 472
 473   .hero-icon:hover .icon.vision, .hero-icon.active .icon.vision {
 474     background-position : -180px -60px;
 475   }
 476
 477   .hero-icon .icon.mission {
 478     background-position : -240px 0;
 479   }
 480
 481   .hero-icon:hover .icon.mission, .hero-icon.active .icon.mission {
 482     background-position : -240px -60px;
 483   }
 484
 485   .hero-icon .icon.star {
 486     background-position : -300px 0;
 487   }
 488
 489   .hero-icon:hover .icon.star, .hero-icon.active .icon.star {
 490     background-position : -300px -60px;
 491   }
 492
 493   .hero-icon .icon.strategic {
 494     background-position : -360px 0;
 495   }
 496
 497   .hero-icon:hover .icon.strategic, .hero-icon.active .icon.strategic {
 498     background-position : -360px -60px;
 499   }
 500
 501   .hero-icon .icon.gallery {
 502     background-position : -420px 0;
 503   }
 504
 505   .hero-icon:hover .icon.gallery, .hero-icon.active .icon.gallery {
 506     background-position : -420px -60px;
 507   }
 508
 509   .hero-icon .icon.investment {
 510     background-position : -480px 0;
 511   }
 512
 513   .hero-icon:hover .icon.investment, .hero-icon.active .icon.investment {
 514     background-position : -480px -60px;
 515   }
 516
 517   .hero-icon .icon.microphone {
 518     background-position : -540px 0;
 519   }
 520
 521   .hero-icon:hover .icon.microphone, .hero-icon.active .icon.microphone {
 522     background-position : -540px -60px;
 523   }
 524
 525   .hero-icon .icon.documentation {
 526     background-position : -600px 0;
 527   }
 528
 529   .hero-icon:hover .icon.documentation, .hero-icon.active .icon.documentation {
 530     background-position : -600px -60px;
 531   }
 532
 533 /* ------------------------------------------------------- Generic Helper Classes */
 534
 535         .page-sub-nav {
 536           font-family : 'universLTStd_lightcn';
 537           margin      : 10px;
 538           overflow    : hidden;
 539         }
 540
 541   .page-sub-nav a {
 542     -webkit-transition  : background-position 0.1s linear;
 543     -moz-transition     : background-position 0.1s linear;
 544     -ms-transition      : background-position 0.1s linear;
 545     -o-transition       : background-position 0.1s linear;
 546     transition          : background-position 0.1s linear;
 547     background          : url('/img/app/bgs/page-sub-nav-arrow.png') no-repeat;
 548     background-position :  -10px center;
 549     padding             : 10px 20px;
 550     float               : left;
 551     font-size           : 16px;
 552     cursor              : pointer;
 553   }
 554
 555   .page-sub-nav a:hover,
 556   .page-sub-nav a.active {
 557     background-position : left center
 558   }
 559 /* ------------------------------------------------------- Generic Helper Classes */
 560
 561 .clear-right {
 562   clear : right;
 563 }
 564
 565 .inline-block {
 566   display  : inline-block;
 567   *display : inline;
 568   *zoom    : 1;
 569 }
 570
 571 .hide {
 572   display : none;
 573 }
 574
 575 .fadeOut {
 576   opacity : 0;
 577   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 578 }
 579
 580 hr {
 581   border-color : #99b8cf;
 582   border-width : 1px 0 0;
 583 }
 584
 585 .hr-dashed
 586 {
 587   border-color : #99b8cf;
 588   border-width : 1px 0 0;
 589   border-style: dashed;;
 590 }
 591 .frame-vid767, .frame-vid480, .frame-vid577{
 592         float:left;
 593 }
 594 .frame-vid577 {
 595     background-image: url("../../imgs/frame-vid525.png");
 596     background-repeat: no-repeat;
 597     display: block;
 598     min-height: 300px;
 599     padding-left: 17px;
 600     padding-right: 20px;
 601     padding-top: 19px;
 602 }
 603 .frame-vid480 {
 604     background-image: url("../../imgs/frame-vid425.png");
 605     background-repeat: no-repeat;
 606     display: block;
 607     min-height: 268px;
 608     padding-left: 14px;
 609     padding-right: 20px;
 610     padding-top: 14px;
 611 }
 612
 613
 614
 615 }