API tools faq
paste
Advertisement
rhandom

Tabs CSS

rhandom
Aug 11th, 2015
523
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 60.80 KB | None | 0 0
raw download clone embed print report
  1. @charset "utf-8";
  2. /*
  3. Theme Name: DeCondo Child
  4. Description: Child theme for the DeCondo theme
  5. Author: Jasper Frumau
  6. Template: decondo
  7. */
  8.  
  9.  
  10. @import url("../decondo/style.css");
  11. @import url("../decondo/lib/scripts/superfish/superfish.css");
  12.  
  13.  
  14.  
  15. /*  ##################################
  16.     HEADERS
  17.     ################################## */
  18.  
  19. h3, h4, h5, h6{
  20.     font-size:18px;
  21.     text-transform:uppercase;
  22. }
  23.  
  24. .page-fiji-facts #content h3,
  25. .page-fiji-facts #content h4,
  26.  .page-fiji-facts #content h5,
  27.  .page-fiji-facts #content h6 {
  28.     background: url('images/fiji-facts-bullet.jpg') no-repeat bottom left;
  29.     padding:0 0 0 25px;
  30.     color:#2d6dbf;
  31. }
  32.  
  33. .sidepostbox h3 {
  34.     font-size:1.17em;
  35. }
  36. /*  ##################################
  37.     DESTINATIONS TOP TEXT BOX
  38.     ################################## */
  39.  
  40. #toplinksdestinations .textwidget {
  41.     color:#424242;
  42. }
  43.  
  44. #toplinksdestinations h3 {
  45.     text-transform:uppercase;
  46.     font-size:20px;
  47. }
  48.  
  49. /*  ##################################
  50.     HEADER ADDITIONS
  51.     ################################## */
  52.  
  53.  
  54. #top-margin{
  55.     height:10px;
  56.     position:relative;
  57.     z-index:10;
  58.     margin:0;
  59.     background:#fff;
  60. }
  61.  
  62. .ts-menu {
  63.     position:absolute;
  64.     left:0;
  65.     width:860px;
  66.     margin:0 0 0 200px;
  67.     top:0px;
  68.     z-index:10;
  69. }
  70.  
  71.  
  72. .sf-menu li {
  73.     float:left;
  74.     position:relative;
  75.     top:5px;
  76.     width:auto;
  77. }
  78.  
  79. /*  ##################################
  80.     FOOTER ADDITIONS
  81.     ################################## */
  82.  
  83. .footer-menu .sf-menu li {
  84.     top:0px;
  85. }
  86.  
  87. #menu-footer {
  88.     margin: 0 auto;
  89.     width:720px;
  90. }
  91.  
  92. #footercopyright a {
  93.     color:#f6ea6a;
  94. }
  95.  
  96. /*  ##################################
  97.     SUPERFISH ADJUSTMENTS
  98.     ################################## */
  99.  
  100. #header .ts-menu .sf-menu li:hover ul,
  101. #header .ts-menu .sf-menu li.sfHover ul {
  102.     left:           20px;
  103.     top:            38px; /* 50 BEFORE match top ul list item height */
  104.     z-index:        100;
  105.    
  106. }
  107.  
  108.  
  109.  
  110.  
  111. #header .ts-top .sf-menu li:hover ul,
  112. #header .ts-top .sf-menu li.sfHover ul {
  113.     left:           0px;
  114.     top:            38px; /* match top ul list item height */
  115.     z-index:        100;
  116. }
  117.  
  118. .sf-sub-indicator {
  119.     display:none;
  120. }
  121.  
  122. #header .ts-menu .sf-menu li li a, #header .ts-menu .sf-menu li li a:visited {
  123. background:url('images/menu/drop-down-bg.jpg') repeat-x scroll 0 0 transparent;
  124. }
  125.  
  126. /*  ##################################
  127.     END SUPERFISH ADJUSTMENTS
  128.     ################################## */
  129.  
  130.  
  131. #header {
  132.     padding:50px 0 50px;
  133.     position:relative;
  134.     z-index:10;
  135. }
  136.    
  137. #logo{
  138.     border:none;
  139. }
  140. #header h1 {
  141.     /*border-left:1px solid #FFFFFF; */
  142.     color:#C5C5C5;
  143.     float:right;
  144.     font-size:13px;
  145.     font-style:italic;
  146.     font-weight:normal;
  147.     line-height:50px;
  148.     margin:0;
  149.     padding:0 0 0 0px;
  150.     text-shadow:1px 1px 0 #FFFFFF;
  151.     background:url('images/title-block.jpg');
  152.     background-repeat:no-repeat;
  153.     width:785px;
  154.     height:50px;
  155.     text-indent:-3000px;
  156.     white-space:nowrap;
  157. }
  158.  
  159. .sidepostcontent p {
  160.     margin:0 10px 5px 0px;
  161. }
  162.  
  163.  
  164.  
  165. /*  ##################################
  166.     SLOGAN
  167.     ################################## */
  168.  
  169. #slogan-bar {
  170.     margin:0px;
  171.     position:absolute;
  172.     left:0px;
  173.     top:110px;
  174.     z-index:5;
  175.     width:100%;
  176.     height:27px;
  177.     background:url('images/slogan-bar.jpg');
  178.     background-repeat:repeat-x;
  179. }
  180.  
  181. #header h2 {
  182.     background:url('images/site-slogan-24.png');
  183.     background-repeat:no-repeat;
  184.     color:#C5C5C5;
  185.     float:right;
  186.     font-size:13px;
  187.     font-style:italic;
  188.     font-weight:normal;
  189.     line-height:27px;
  190.     margin:10px 180px 0 0px;
  191.     padding:0 0 0 0px;
  192.     text-shadow:1px 1px 0 #FFFFFF;
  193.     width:600px;
  194.     height:25px;
  195.     text-indent:-9999px;
  196. }
  197.  
  198. #h2-page {
  199.     background:none;
  200.     color:#424242;
  201.     text-transform:uppercase;
  202.     font-size:20px;
  203. }
  204.  
  205. .h2-section {
  206. background:none;
  207. }
  208.  
  209. #header h2 span{
  210.     display:none;
  211. }
  212.  
  213.  
  214.  
  215.  
  216. /*  ##################################
  217.     SUBNAV
  218.     ################################## */
  219.  
  220. #subnav {
  221. /*padding:50px 0 50px;*/
  222. /*  z-index:5;*/
  223.     color:#00F;
  224.     font-size:13px;
  225.     width:830px;
  226.     position:relative;
  227.     left:210px;
  228. /*  top:120px;
  229. */
  230. }
  231.  
  232. #dummyblock
  233. {
  234.  
  235. height:20px;
  236. width:100%;
  237. }
  238. #phone-button, #email-button, #book-button, #ultimate-shark-button {
  239.     float:left;
  240.     text-transform:uppercase;
  241.     margin:0 10px 0 0;
  242.     font-size:12px;
  243.     color: #1a68b2;
  244.    
  245. }
  246.  
  247. #phone-button {
  248.     width:240px;
  249. }
  250.  
  251. #email-button {
  252.     width:180px;
  253. }
  254.  
  255. #book-button {
  256.     width:80px;
  257. }
  258.  
  259. #ultimate-shark-button {
  260.     width:245px;
  261. }
  262.  
  263. .sub-button{
  264.     float:left;
  265.     margin: 0 0 5px 5px;
  266. }
  267.  
  268. .sub-button a {
  269.     text-decoration:none;
  270.     color:#1A68B2;
  271. }
  272.  
  273. #phone-button img, #email-button img, #book-button img, #ultimate-shark-button img {
  274.     float:left;
  275. }
  276. /*  ##################################
  277.     MAIN NEW
  278.     ################################## */
  279.  
  280. #main {
  281.     margin:0 auto;
  282.     width:1000px;
  283. }
  284.  
  285. .category-specials #main {
  286.     min-height: 750px;
  287. }
  288.  
  289. /*  ##################################
  290.     CONTENT / SIDEBAR
  291.     ################################## */
  292.  
  293. #content {
  294.         display: block;
  295.         float: right;
  296.         width: 640px;
  297.         z-index: 1;
  298.         min-height: 550px; /*was 700 */
  299.     }
  300. #sidebar {
  301.     float: left;
  302.     width: 300px;
  303.     padding: 0 0 20px;
  304. }
  305.  
  306. /*  ##################################
  307.     CONTENT` / SIDEBAR BOTTON LEFT
  308.     ################################## */
  309.  
  310.  
  311. #sidebar-bottom {
  312.     float: left;
  313.     width: 300px;
  314.     padding: 0 0 0px; /*bottom 20 */
  315. }
  316.  
  317. #sidebar-bottom ul {
  318.     margin-bottom:0;
  319. }
  320.  
  321. #sidebar-bottom h2 {
  322. font-size:16px;
  323. letter-spacing:0.5px;
  324. margin:0 0 20px;
  325. padding:5px 0 0;
  326. }
  327.  
  328. #sidebar-bottom h2 {
  329. font-size:16px;
  330. letter-spacing:0.5px;
  331. margin:0 0 20px;
  332. padding:5px 0 0;
  333. }
  334.  
  335. #sidebar-bottom h2 {
  336.     margin: 0 0 0px 0;
  337.     padding: 5px 0 0 0;
  338.     font-size: 16px;
  339.     letter-spacing: .5px;
  340. }
  341.  
  342. #sidebar-bottom h3 {
  343.     text-transform:uppercase;
  344.     line-height:15px;
  345.     margin:0;
  346. }
  347.  
  348. #sidebar-bottom p {
  349.     line-height:15px;
  350. }
  351.  
  352. #sidebar-bottom  .box2 {
  353.     margin: 0;
  354. }
  355.  
  356. .slidedeck_frame {
  357.     margin: 10px 0 0 0;
  358. }
  359.  
  360.  
  361. /*  ##################################
  362.     DECONDO FOOTER MENU
  363.     ################################## */
  364.  
  365. .footer-menu .sf-menu a, .ts-menu .sf-menu a:visited  {
  366.     font-size:12px;
  367.     /*letter-spacing: .5px;*/
  368.        
  369. }
  370.  
  371. #footer a {
  372.     display: block;
  373.     float: left;
  374.     margin: 0 0 0 20px;
  375.     line-height: 50px;
  376.     color: #fff;
  377.     text-decoration: none;
  378.     text-transform: uppercase;
  379.     text-shadow: 1px 1px 1px #000;
  380.     letter-spacing: .5px;
  381.     outline: none;
  382. }
  383.  
  384. .ts-menu .sf-menu a:hover,
  385. .footer-menu .sf-menu a:hover {
  386.     color: #69c5ff!important;
  387. }
  388.  
  389. .footer-menu .sf-menu li li a,
  390. .footer-menu .sf-menu li li a:visited {
  391.     margin: 0px!important;
  392.     padding: 2px 10px;
  393.     line-height: 20px;
  394.     background: #555;
  395.     color: #c5c5c5;
  396.     border-bottom: 1px dotted #8a8a8a;
  397.     font-weight: normal;
  398.     text-transform: none;
  399. }
  400.  
  401. .footer-menu .sf-menu li li a:hover {
  402.     background: #252525;
  403.     color: #fff;
  404. }
  405.  
  406. #footercopyright
  407. {
  408.         height:100px;  
  409.         background:#1b51ba;
  410.         color: #dbff33;
  411. }
  412.  
  413. #footer-center {
  414.     margin:0 auto;
  415.     width:300px;
  416.     text-align:center;
  417. }
  418.  
  419.  
  420. #footer {
  421.     background:url("images/menu/menu-bar-bg.jpg") repeat-x;
  422.     width:100%;
  423. }
  424.  
  425. /* Feature content start */
  426.  
  427. #featured {  
  428.     width:500px;  
  429.     padding:15px 0 0 5px; /* 180 left */  
  430.     margin: 0px 0 0 5px ;
  431.     position:relative;  
  432.     height:00px;  
  433.     background:#fff;  
  434. /*    border:3px solid #ccc;
  435. */     
  436.     }  
  437.  
  438.  
  439. /*  ##################################
  440.       DECONDO TABBED SLIDER BOX
  441. ################################## */
  442.  
  443. #featured ul.ui-tabs-nav {  
  444.     position:absolute;  
  445.     top:15px;
  446.     left:15px;
  447.     z-index:5;  
  448.     list-style:none;  
  449.     padding:0; margin:0;  
  450.     width:180px;  
  451. }
  452.  
  453. #featured ul.ui-tabs-nav li {  
  454.      padding:1px 0; padding-right:23px;  
  455.      font-size:12px;  
  456.      color:#666;  
  457. }
  458.  
  459. #featured ul.ui-tabs-nav li span {  
  460.     font-size:12px;
  461.     font-family:Georgia;  
  462.     line-height:18px;
  463.     color:#f6ea6a;
  464.     font-weight:bolder;
  465.     text-transform:uppercase;
  466. }  
  467.  
  468.  
  469. #featured .ui-tabs-panel{ /* main image panel*/  
  470.     width:600px;
  471.     height:500px;
  472.     margin:0px 0 0 8px;  
  473.   background:#fff;
  474.     position:relative;
  475.     z-index:2;  
  476.     overflow:hidden;  
  477. }
  478.  
  479. #featured .ui-tabs-hide {  
  480.     display:none;  
  481. }  
  482.  
  483. #featured li.ui-tabs-nav-item a { /*On Hover Style*/  
  484.   display:block;  
  485.   height:45px;  
  486.   color:#f6ea6a;
  487.     font-size:8px;
  488.     text-decoration:none;
  489.     text-transform:uppercase;
  490.     background: #434d4d;
  491.     filter:alpha(opacity=50);
  492.     -moz-opacity:0.5;
  493.     -khtml-opacity: 0.5;
  494.     opacity: 0.5;
  495.   line-height:20px;  
  496.   outline:none;  
  497.  }
  498.  
  499. #featured li.ui-tabs-nav-item a:hover {  
  500.     background:#404040;  
  501. }
  502.  
  503. #featured li.ui-tabs-selected{ /*Selected tab style*/  
  504.     background:url('images/slider-arrow.png') top left no-repeat transparent;
  505.     height:45px;
  506.     /*background:#404040; solution for arrow ending needed*/
  507. }  
  508.  
  509. #featured li.ui-tabs-selected a {
  510.     display:block;  
  511.     height:45px;  
  512.     color:#333;
  513.     background:none;
  514.    
  515. }
  516.  
  517. #featured li.ui-tabs-selected ui-state-active a {
  518.     display:block;  
  519.      height:45px;  
  520.      color:#333;
  521.     background:#404040;
  522.    
  523. }
  524.  
  525. #featured li.ui-tabs-selected ui-state-hover a {
  526.     display:block;  
  527.     height:45px;  
  528.     color:#333;
  529.     background:#404040;
  530. }
  531.  
  532.  
  533. #featured ul.ui-tabs-nav li img{  
  534.       float:left; margin:2px 5px;  
  535.       background:#fff;  
  536.       padding:2px;  
  537.       border:1px solid #eee;  
  538. }
  539.  
  540. #featured .ui-tabs-panel .info{  
  541.     position:absolute;  
  542.     bottom:0px;
  543.     left:0;  
  544.     height:70px;
  545.     width: 600px;  
  546.     background: url('images/main-slide-desc-bg.jpg');
  547.     background-repeat:repeat-x;
  548.    
  549. }
  550.  
  551. #featured .info h2{  
  552.       font-size:18px; font-family:Georgia, serif;  
  553.       color:#fff; padding:5px; margin:0;  
  554.       overflow:hidden;  
  555. }  
  556.  
  557. #featured .info p{  
  558.     margin:0 5px;  
  559.     font-family:Verdana;
  560.     font-size:11px;
  561.     color:#69c5ff;
  562.     line-height:15px;  
  563. }  
  564.  
  565. #featured .info a {  
  566.     text-decoration:none;  
  567.     color:#f6ea6a;
  568.     font-family: "Myriad Pro";
  569.     text-transform:uppercase;
  570.     font-size:12px;
  571.   }  
  572. #featured .info a:hover {  
  573.     text-decoration:underline;
  574.     color:#f6ea6a;  
  575. }  
  576.  
  577. .slide-readmore {
  578.     width:95px;
  579.     height:25px;
  580.     float:right;
  581.     margin:0 20px 0 0;
  582. }
  583.  
  584. .slide-excerpt, #slide-excerpts {
  585.     width:450px;
  586.     float:left;
  587. }
  588.  
  589. /* Tabbed slider Background ShadowBox */
  590.  
  591. img.source-image {
  592.     position: absolute;
  593.     top: 0;
  594.     left: 0;
  595. }
  596.  
  597. #img.source-image {
  598.     width: 100%;
  599.     position: absolute;
  600.     top: 0;
  601.     left: 0;
  602. }
  603.  
  604. /* Feature content end */
  605.  
  606. /* Top links start */
  607.  
  608. #toplinks {  
  609.         width:360px;  
  610.         height:320px;  
  611.         background-repeat:no-repeat;
  612.         float:left;
  613. }
  614.  
  615. .category-specials #toplinks {
  616.     height:100%;
  617. }
  618.  
  619. #toplinksdestinations {  
  620.         width:360px;  
  621.         height:460px;  
  622.         background-repeat:no-repeat;
  623.         float:left;
  624. }
  625.  
  626. #toplinkscategory {  
  627.         width:360px;  
  628.         height:460px;  
  629.         background-repeat:no-repeat;
  630.         float:left;
  631. }
  632.  
  633. #toplinkspage {  
  634.         width:360px;  
  635.         height:320px;  
  636.         background-repeat:no-repeat;
  637.         float:left;
  638. }
  639. #toplinkscontacts {  
  640.         width:360px;  
  641.         height:570px;  
  642.         background-repeat:no-repeat;
  643.         float:left;
  644. }
  645.  
  646. #topl-specials {
  647.     width:350px;
  648.     height:130px;
  649.   background-image: url("images/shadowboxes/fiji-specials-box.jpg");
  650.   background-color: white;
  651. }
  652.  
  653. #contactdetails {
  654.     width:350px;
  655.     height:200px;
  656.     background: url('images/shadowboxes/contact-bg.jpg') no-repeat;
  657.     font-weight:bold;
  658.     font-size:15px;
  659.    
  660.     padding:0px;
  661. }
  662.  
  663. #contactdetailsheading
  664. {
  665.     color:#226AC6;
  666.     font-weight:bold;
  667.     margin-left:15px;
  668.     font-size:20px;
  669.     width:100px;
  670.     float:left;
  671.    
  672. }
  673. #adddetails
  674. {
  675. margin-bottom:5px;
  676. }
  677. #emaildetails
  678. {
  679. margin-top:5px;
  680. height:20px;
  681. }
  682. #contactdetailsheadingadd
  683. {
  684.     color:#226AC6;
  685.     font-weight:bold;
  686.     margin-left:15px;
  687.     font-size:20px;
  688.     width:100px;
  689.     float:left;
  690.     height:100px;
  691. }
  692. #contactdetailsheadingaddex
  693. {
  694.     color:#000000;
  695.     font-weight:bold;
  696.    
  697.     font-size:12px;
  698.     width:220px;
  699.     float:left;
  700.     height:100px;
  701.     margin:0px 0px 15px 30px;
  702. }
  703. #contactdetailsmail
  704. {
  705. color:#000000;
  706.     font-weight:bold;
  707.    
  708.     font-size:12px;
  709.     width:220px;
  710.     float:left;
  711.     margin:0px 0px 15px 30px;
  712. }
  713. #topl-booknow {
  714.     width:350px;
  715.     height:182px;
  716.   background: url('images/shadowboxes/book-now-box.jpg') no-repeat;
  717. }
  718.  
  719. #topl-booknow a{
  720.     width:350px;
  721.     height:182px;
  722. }
  723. #links-trans {
  724.     float:left;
  725.     width:350px;
  726. }
  727.  
  728. /*#links-trans div.textwidget, #links-trans p {
  729.     height:135px;
  730. }*/
  731.  
  732. #translation_bar {
  733.     width:150px;
  734.     height:50px;
  735.     padding:30px 0 0 35px;
  736.     margin:0 0 0 10px;
  737.     background: url('images/shadowboxes/translation-box.jpg') no-repeat;
  738. }
  739.  
  740. #fiji-map-box{  
  741.         width:175px;  
  742.         float:left;
  743.  
  744. }
  745.  
  746. #toptranslate{  
  747.         width:175px;  
  748.         float:right;
  749. }
  750.  
  751. #trans-inner{
  752.         border: 5px solid #fff;
  753.         padding:10px 0 0 10px;
  754.         height:60px;
  755.         background:#e5e5e5;
  756. }
  757.  
  758. #translation_bar a{
  759.     padding-right:5px;
  760. }
  761.    
  762. #topslider
  763. {
  764.     height:520px;
  765.     float:left;
  766.     margin:0 0 5px 0;
  767. }
  768.  
  769.  
  770. #content h2, #sidebar h2 {
  771. font-size:20px;
  772. letter-spacing:0.5px;
  773. margin:0 0 20px;
  774. padding:5px 0 0;
  775. }
  776.  
  777. #toptranslate .sidepostheading {
  778.     display:none;
  779. }
  780.  
  781.  
  782. /*  ##################################
  783.     DESTINATIONS MAPS
  784.     ################################## */
  785.  
  786. #topdestination {
  787.     width:638px;
  788.     height:575px;
  789.     margin:0 0 0 10px;
  790.     float:left;
  791. }
  792.  
  793. #topgallery {
  794.     width:638px;
  795.     height:575px;
  796.     /*background:url("images/shadowboxes/gallery-bg-box.jpg") ;*/
  797.  
  798.     margin:0 0 30px 10px;
  799.     float:left;
  800. }
  801.  
  802. #placeframe {
  803. background:url("maps/images/back_map.png") repeat-y scroll 0 0 transparent;
  804. float:left;
  805. height:446px;
  806. width:605px;
  807. }
  808.  
  809. #ullegend-top li, #ullegend-bottom li {
  810.     display: inline;
  811. }
  812.  
  813. /*  ##################################
  814.     LEGEND HEADER
  815.     ################################## */
  816.  
  817. #legend-header {
  818.     width:620px;
  819.     height:15px;
  820.     margin:0 0 0 20px;
  821.     padding:0;
  822.     font-family:Georgia;
  823.     font-weight:bold;
  824. }
  825.  
  826. /*  ##################################
  827.     DESTINATIONS LEGEND
  828.     ################################## */
  829. #destinations-legend {
  830.     width:640px;
  831.     height:95px;
  832.     background: url("images/legend-destinations.jpg") no-repeat;
  833.     margin:0;
  834.     padding:0;
  835. }
  836.  
  837. #dest-legendlist-top-box {
  838.     padding:20px 0 0 10px;
  839.     width:620px;
  840. }
  841.  
  842. #dest-legendlist-bottom-box {
  843.     padding:5px 0 0 10px;
  844.     width:620px;
  845. }
  846.  
  847. ul#dest-legendlist-top, ul#dest-legendlist-bottom {
  848.     /*display: inline; made width collapse and is not needed*/
  849.     height:30px;
  850.     margin:0;
  851.     padding:0;
  852.     width:620px;
  853. }
  854.  
  855.  
  856. #coral-coast-button, #nadi-and-denauru-button, #yasawa-button, #vanua-levu-button, #liveaboards-button  {
  857.     width:100px;
  858.     height:25px;
  859.     margin:0 0 0 11px;
  860.     padding:7px 0 5px 0;
  861.     display:inline;
  862.     cursor: pointer;
  863. }
  864.  
  865. #liveaboards-button {
  866.     cursor: default;
  867. }
  868.  
  869. #coral-coast-button a, #nadi-and-denauru-button a, #yasawa-button a, #vanua-levu-button a, #liveaboards-button a {
  870.     padding:5px 20px;
  871.     visibility:hidden;
  872. }
  873.  
  874. #sun-coast-button, #mamanuca-button, #taveuni-button, #kadavu-button, #zoom-out-button {
  875.     width:100px;
  876.     height:25px;
  877.     margin:0 0 0 15px;
  878.     padding:5px 0;
  879.     display:inline;
  880.     cursor: pointer;
  881. }
  882.  
  883. #sun-coast-button a, #mamanuca-button a, #taveuni-button a, #kadavu-button a, #zoom-out-button a {
  884.     padding:5px 20px;
  885.     visibility:hidden;
  886. }
  887.  
  888. #zoom-out-button {
  889.     margin:0 0 0 50px;
  890. }
  891. #zoom-out-button  a {
  892.     padding:5px 0 5px 20px;
  893. }
  894.  
  895. #nadi-and-denauru-button  a {
  896.     padding:5px 15px 5px 15px;
  897. }
  898.  
  899. #yasawa-button {
  900.     padding:7px 0 5px 5px;
  901.     margin:0;
  902. }
  903. /*  ##################################
  904.     VACATIONS LEGEND
  905.     ################################## */
  906.  
  907. #vacations-legend {
  908.     width:640px;
  909.     height:95px;
  910.     background: url("images/legend-vacations.jpg") no-repeat;
  911.     margin:0;
  912.     padding:0;
  913. }
  914.  
  915. #vac-legendlist-top-box {
  916.     padding:20px 0 0 10px;
  917.     width:480px;
  918.     float:left; /* added */
  919.     height:30px; /* ie7 */
  920. }
  921.  
  922. #vac-legendlist-bottom-box {
  923.     padding:0px 0 0 10px;
  924.     width:480px;
  925.     float:left; /* added */
  926. }
  927.  
  928. ul#vac-legendlist-top, ul#vac-legendlist-bottom {
  929.     /*display: inline; made width collapse and is not needed*/
  930.     height:30px;
  931.     margin:0;
  932.     padding:0;
  933.     width:480px;
  934. }
  935.  
  936.  
  937. #diving-button, #adventure-button, #spa-button, #eco-button, #liveaboard-button  {
  938.         width:100px;
  939.         height:25px;
  940.         display:inline-block;
  941.         zoom:1; /* IE 7 DIE */
  942.         *display:inline;
  943.         /*cursor: pointer;*/
  944.         border:0;
  945.     }
  946.  
  947. #diving-button {
  948.     width:120px;
  949. }
  950.  
  951. #adventure-button {
  952.         width:120px;
  953. }
  954.  
  955. #spa-button {
  956.     width:80px;
  957.     /*padding:7px 7px 7px 7px;*/
  958.     /*margin:5px 0 0 25px;*/
  959. }
  960.  
  961. #eco-button {
  962.     /*padding:7px 7px 7px 7px;*/
  963.     /*margin:5px 0 0 25px;*/
  964. }
  965.  
  966. #liveaboard-button {
  967.     padding:7px 10px 7px 10px;
  968.     /*margin:0px 0 0 50px;*/
  969. }
  970.  
  971. #liveaboard-button a {
  972.     visibility: visible;
  973.     display:block;
  974.     /*padding:15px 30px;*/
  975. }
  976.  
  977. #diving-button a, #adventure-button a, #spa-button a, #eco-button a {
  978.         padding:5px 50px;
  979.         /*visibility:hidden;*/
  980.         margin:0;
  981.         border:0;
  982.         height:20px; /*IE 7 issue*/
  983.         /*width:100px;*/
  984.         display:block
  985. }
  986.  
  987. #surfing-button, #romance-button, #luxury-button, #family-button {
  988.     width:100px;
  989.     height:25px;
  990.     display:inline-block;
  991.     zoom:1; /* IE 7 DIE */
  992.     *display:inline;
  993.     /*cursor: pointer;*/
  994. }
  995.    
  996. #surfing-button {
  997.         width:120px;
  998. }
  999.  
  1000. #romance-button {
  1001.         width:125px;
  1002. }
  1003.  
  1004. #luxury-button {
  1005.         width:80px;
  1006. }
  1007. #family-button {
  1008.         width:80px;
  1009. }
  1010.  
  1011. #surfing-button a, #romance-button a, #luxury-button a, #family-button a {
  1012.     padding:5px 50px;
  1013.     height:20px; /*IE 7 issue*/
  1014.     /*width:100px;*/
  1015.     display:block;
  1016.     /*visibility:hidden;*/
  1017. }
  1018.  
  1019. #liveaboard-vacations-field {
  1020.     float:left;
  1021.     width:100px;
  1022.     height:25px;
  1023. }
  1024.  
  1025. #liveaboard-vacations-field a {
  1026.     padding:15px 50px;
  1027.     display:block;
  1028. }
  1029. /*  ##################################
  1030.     END VACATIONS LEGEND
  1031.     ################################## */
  1032.  
  1033.  
  1034. #singlesearch .search-text {
  1035.     width:780px;
  1036. }
  1037.  
  1038. /* Top links End */
  1039.  
  1040. /* Side Posts Front */
  1041.  
  1042. .sidepost {
  1043.     position: relative;
  1044.     padding: 0; /*top was ten */
  1045.     background: #fff;
  1046.    
  1047.  
  1048. }
  1049.  
  1050.  
  1051. .sidepostbox
  1052. {
  1053.     position: relative;
  1054.     width:280px;
  1055.     height:150px;
  1056.     display:block;
  1057.     background:url("images/shadowboxes/featured-box-bg.jpg") no-repeat scroll 0 0 transparent;
  1058. }
  1059.  
  1060. .sidepostbox h2 {
  1061.     font-size:12px;
  1062.     letter-spacing:0.5px;
  1063.     color:#306295;
  1064.     margin:0 0 0 0;
  1065.     padding:0 0 0 0;
  1066. }
  1067.  
  1068. .sidepostbox h1 {
  1069.     font-size:12px;
  1070.     letter-spacing:0.5px;
  1071.     color:#000000;
  1072.     margin:0 0 0 0;
  1073.     padding:0 0 0 0;
  1074.  
  1075. }
  1076.  
  1077. .sidepostimg {
  1078.     width:85px;
  1079.     height:75px;
  1080.     float: left;
  1081.     margin-left:10px;
  1082.     margin-top:20px;
  1083.     margin-right:5px;
  1084.    
  1085. }
  1086.  
  1087. .box2
  1088. {
  1089.     width:275px;
  1090. }
  1091.  
  1092. .box2 img {
  1093.     margin: 5px;
  1094. }
  1095.  
  1096. .sidepostcontent {
  1097.     width:150px;
  1098.     height:120px;
  1099.     float: right;
  1100.     overflow:hidden;
  1101.     margin:23px 10px 5px 5px;
  1102.  
  1103. }
  1104.  
  1105. .sidepostcontent ul {
  1106.    
  1107. }
  1108.  
  1109. /* Side Posts  End*/
  1110.  
  1111. /* Heading */
  1112. .sidepostheading
  1113. {
  1114.     color:#5a98d2;
  1115.     font-size:25px;
  1116.     margin: 0 0 20px 0;
  1117.     font-weight:bold;
  1118.     margin:20px 0 0;
  1119. }
  1120.  
  1121.  
  1122. /* Heading */
  1123.  
  1124. /* Destination Start */
  1125.  
  1126. #destinationcontent
  1127. {
  1128.     float:left;
  1129.     width:1000px;
  1130.     padding: 10px 0 0 0 ;
  1131. }
  1132.  
  1133. .destinationblock
  1134. {
  1135.     float:left;
  1136.     width:310px;
  1137.     height:200px;
  1138.     padding: 10px 10px 10px 10px ;
  1139.     background:url("images/destinationblock-bg.jpg") no-repeat scroll 0 0 transparent;
  1140. }
  1141. .destimage
  1142. {
  1143. width:310px;
  1144. height:100px;
  1145. float:left;
  1146. display:block;
  1147. }
  1148.  
  1149. .destimagelink
  1150. {
  1151.     margin:0px 0 0 0px !important;
  1152. }
  1153. .destinationdetails
  1154. {
  1155. width:310px;
  1156. height:100px;
  1157. float:left;
  1158. }
  1159. .destinationblock img {
  1160.     margin:5px 0 0 5px;
  1161. }
  1162. .destinationblock h2 {
  1163.     font-size:14px;
  1164.     text-transform:uppercase;
  1165.     line-height:15px;
  1166.     margin:15px 0 5px 0;
  1167. }
  1168. .destinationblock h3
  1169. {
  1170. font-size:12px;
  1171. letter-spacing:0.5px;
  1172. color:#306295;
  1173. margin:0 0 0 0;
  1174. padding:0 0 0 0;
  1175. /*text-transform:uppercase;*/
  1176. }
  1177.  
  1178. .destinationblock a
  1179. {
  1180. position:absolute;
  1181. bottom:0px;
  1182. }
  1183.  
  1184. .destinationgo
  1185. {
  1186.     width:40px;
  1187.     height:20px;
  1188.     position:relative;
  1189.     bottom:0;
  1190. }
  1191.  
  1192. .destinationblock a {
  1193.  
  1194.     position:relative;
  1195.     bottom:0;
  1196.     margin: 0px 0px 0px 220px;
  1197. }
  1198.  
  1199. .destdesttitle
  1200. {
  1201. font-size:12px;
  1202. letter-spacing:0.5px;
  1203. color:#306295 !important;
  1204. margin:0 0 0 0 !important;
  1205. padding:0 0 0 0;
  1206. text-decoration:none;
  1207.     font-weight:bold;
  1208. text-transform:uppercase;
  1209. }
  1210. /* Destination End */
  1211.  
  1212.  
  1213. .alignrightwithmargin {
  1214.     float:right;
  1215.     margin:0 30px 20px 20px !important;
  1216.     width:auto;
  1217. }
  1218.  
  1219. .anchor1 {
  1220.     display:block;
  1221.     color:transparent;
  1222.     width:80px;
  1223.     height:20px;
  1224.     background:url("images/gothere.png") no-repeat scroll 0 0 ;
  1225. }
  1226.  
  1227. .anchor1:hover {
  1228.     display:block;
  1229.     width:80px;
  1230.     height:20px;
  1231.     color:transparent;
  1232.     background:url("images/gothere2.png") no-repeat scroll 0 0 ;
  1233. }
  1234.  
  1235. .dummyanchor1
  1236. {
  1237. background-image: url("images/gothere2.png");
  1238. background-repeat: no-repeat;
  1239. background-position: -1000px -1000px;
  1240. }
  1241.  
  1242. #logo {
  1243.     float: left;
  1244.     width: auto;
  1245.     padding: 0 20px 0 0;
  1246.     position: absolute;
  1247.     top: 0px;
  1248.     left: 0px;
  1249.     z-index: 150;
  1250. }
  1251.  
  1252.  
  1253.  
  1254. /*  ##################################
  1255.     SEARCH PANEL
  1256.     ################################## */
  1257.  
  1258. #searchpanel {
  1259.     float:left;
  1260.     width:980px;
  1261.     margin: 5px 0 0 0;
  1262.     background: url("images/slim-searchbar.jpg") no-repeat;
  1263.  
  1264. }
  1265.  
  1266. #searchpanel .box1 {
  1267.     padding:0;
  1268.     height:60px;
  1269. }
  1270.  
  1271. #panel
  1272. {
  1273.     /*background: #EAEFF8;  for non-css3 browsers
  1274.     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EAEFF8');  for IE
  1275.     background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EAEFF8));  for webkit browsers
  1276.     background: -moz-linear-gradient(top,  #FFFFFF,  #EAEFF8); for firefox 3.6+ */
  1277.     margin:0;
  1278.     height:40px;
  1279. }
  1280.  
  1281. #panel #keyword-search {
  1282.     left: 20px;
  1283.     position: absolute;
  1284.     top: 11px;
  1285. }
  1286.  
  1287. #panel ul {
  1288.     margin: 0;
  1289.     position: absolute;
  1290.     right: 220px;
  1291.     top: 11px;
  1292. }
  1293.  
  1294.  
  1295. #panel button
  1296. {
  1297.     background: #3A70BD;
  1298.     height:27px;
  1299. }
  1300.  
  1301. #panel .text, #panel .select {
  1302.     padding:5px;
  1303. }
  1304.  
  1305. #panel .select {
  1306.     height:27px;
  1307. }
  1308.  
  1309. /*  ##################################
  1310.     SEARCH PANEL HOME
  1311.     ################################## */
  1312.  
  1313. .home #searchpanel {
  1314.     width:350px;
  1315.     background:none;
  1316. }
  1317.  
  1318. .home #searchpanel .box1 {
  1319.     height:100px;
  1320.     padding:0;
  1321. }
  1322.  
  1323. .home #panel {
  1324.     /*background: #EAEFF8;  for non-css3 browsers
  1325.     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EAEFF8');  for IE
  1326.     background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EAEFF8));  for webkit browsers
  1327.     background: -moz-linear-gradient(top,  #FFFFFF,  #EAEFF8); for firefox 3.6+*/
  1328.     margin:10px 0 10px 0;
  1329.     height:40px;
  1330. }
  1331.  
  1332. .home #panel #keyword-search {
  1333.     width:300px;
  1334.     position: static;
  1335.     padding:0 0 3px 0;
  1336. }
  1337.  
  1338. .home #panel #search-text {
  1339.     width:300px;
  1340. }
  1341.  
  1342. .home #panel li {
  1343.     margin:0;
  1344. }
  1345.  
  1346. .home #panel ul {
  1347.     position: static;
  1348. }
  1349.  
  1350. /*  ##################################
  1351.     MENU EXTRAS
  1352.     ################################## */
  1353.  
  1354. .current_page_item a, li.current-category-ancestor a { color: #69c5ff!important; }
  1355. .current_page_item a:visited, li.current-category-ancestor a:visited {  color: #69c5ff!important; }
  1356. .current-cat a { color: #69c5ff!important;}
  1357. .current-cat a:visited{ color: #69c5ff!important;}
  1358.  
  1359. .black #footer-wrap {
  1360.    
  1361. }
  1362.  
  1363.  
  1364. #black-bar {
  1365.     margin:0px;
  1366.     position:absolute;
  1367.     left:0px;
  1368.     top:0px;
  1369.     z-index:5;
  1370.     width:100%;
  1371.     height:50px; /* image 55px */
  1372.     /*background: #000; /* for non-css3 browsers */
  1373.  
  1374.     /*  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#000000');  for IE */
  1375.     /*  background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#000)); /* for webkit browsers */
  1376.     /*  background: -moz-linear-gradient(top,  #999,  #000); /* for firefox 3.6+ */
  1377.     background:url('images/menu/menu-bar-bg.jpg');
  1378.     background-repeat:repeat-x;
  1379. }
  1380.  
  1381. .gothere-button{
  1382.     margin: 0 5px 0 0;
  1383. }
  1384.  
  1385. /*  ##################################
  1386.     RESORT PAGE
  1387.     ################################## */
  1388.  
  1389.  
  1390. #resort-info {
  1391.     position:absolute;
  1392.     bottom:0;
  1393.     background:url("images/main-slide-desc-bg.jpg") repeat-x;
  1394.     left:0;
  1395.     width:100%;
  1396.     height:50px;
  1397. }
  1398.  
  1399.  
  1400.    
  1401.  
  1402. #pic-title {
  1403.     color:#f6ea6a;
  1404.     text-transform:uppercase;
  1405.     margin:0 5px;
  1406. }
  1407.  
  1408. #pic-caption {
  1409.     color:#69c5ff;
  1410.     margin:0 5px;
  1411. }
  1412.  
  1413. .pic {
  1414.     position:relative;
  1415.     color:#69c5ff;
  1416.    
  1417.    
  1418.     width:100%;
  1419.     height:100%;
  1420.     overflow:hidden;
  1421. }
  1422.  
  1423. #resortpic
  1424. {
  1425. display:block;
  1426.     height:450px;
  1427.     background:url("images/shadowboxes/gallery-bg-box.jpg") ;
  1428. }
  1429. #picborder
  1430. {
  1431.     margin: 0px 10px 10px 10px;
  1432.     height:420px;
  1433.     padding:15px 5px 10px 5px;
  1434. }
  1435. .ngg-gallery-list li img {
  1436.     width:110px;
  1437.     height:80px;
  1438. }
  1439.  
  1440. li.ngg-next, .ngg-next a.next, li.ngg-next a.next img {
  1441.     height:80px;
  1442.     width:15px;
  1443.     padding:0;
  1444. }
  1445.  
  1446. .ngg-gallery-list li.ngg-prev, .ngg-next a.prev, li.ngg-prev a.prev img {
  1447.     height:80px;
  1448.     width:15px;
  1449.     padding:0;
  1450. }
  1451.  
  1452. .ngg-gallery-list li.selected a
  1453. {
  1454.     background:#FFFFFF;
  1455. }
  1456. li.ngg-next a, li.ngg-prev a {
  1457.     padding:0;
  1458. }
  1459.  
  1460. #content ul, #content ol {
  1461. padding:0 0 0 20px;
  1462. }
  1463.  
  1464. .ngg-gallery-list {
  1465.     margin: 10px 0 0 0;
  1466. }
  1467.  
  1468. .ngg-galleryoverview {
  1469.  
  1470.     margin-top: 0px !important;
  1471. /*  width:97%;*/
  1472.    
  1473. }
  1474.  
  1475. #ngglist
  1476. {
  1477.     height:80px;
  1478. }
  1479.  
  1480. #nggpanel
  1481. {
  1482.     display:block;
  1483.     width:100%;
  1484.     height:30px;
  1485.     background: #EAEFF8; /* for non-css3 browsers */
  1486.     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EAEFF8');
  1487.     background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EAEFF8));
  1488.     background: -moz-linear-gradient(top,  #FFFFFF,  #EAEFF8);
  1489.     margin:15px 0 0px 0;
  1490.     text-align:center;
  1491.     color:#226EB6;
  1492. }
  1493. #nggpanel a
  1494. {
  1495.     color:#226EB6;
  1496.     text-decoration:none;
  1497. }
  1498.  
  1499. /*  ##################################
  1500.     CONTACT US PAGE
  1501.     ################################## */
  1502.  
  1503. .page-contact label{
  1504.  
  1505.         width:145px;
  1506.         margin:0px 10px 0 0;
  1507.         padding:2px 4px;
  1508.         display:-moz-inline-box; /*for mozilla*/
  1509.         display:inline-block; /*for Opera & IE*/
  1510.         text-align:left;
  1511.         vertical-align:top;
  1512.         color: #fff;
  1513.         font:0.9em Trebuchet MS,sans-serif;
  1514.         background-color: #1b68b1;
  1515.         font-size:14px;
  1516. }
  1517.  
  1518. #h2-contact {
  1519.     text-transform: uppercase;
  1520.     font-size:20px;
  1521.     color:#424242;
  1522.     background:none;
  1523. }
  1524.  
  1525. #contactform input.text, #contactform textarea {
  1526.     width:400px;
  1527. }
  1528.  
  1529. #contactform #contact_captcha {
  1530.     float:left;
  1531.     width:200px;
  1532.    
  1533. }
  1534.  
  1535. .page-contact .black submit,
  1536. .page-contact .button {
  1537.     background:#3a70be;
  1538.     margin: 0px 30px 0px 0px;
  1539. }
  1540.  
  1541. #contactform .p-submit {
  1542.     margin: 0px 0px 5px 0px;
  1543. }
  1544.  
  1545. .page-contact .button span {
  1546.     font-size:20px;
  1547.     text-transform:uppercase;
  1548.     font-style: normal;
  1549. }
  1550.  
  1551. .page-contact .box3 {
  1552.     background:url('images/contact-form-bg.jpg') repeat-x bottom left;
  1553.     border:5px solid #fff;
  1554. }
  1555.  
  1556. /*  ##################################
  1557.     BOXES
  1558.     ################################## */
  1559.    
  1560. .box1, .box2, .box3 {
  1561.     position: relative;
  1562.     background: none;
  1563.     padding: 10px 10px 0 10px;
  1564.     box-shadow: none;
  1565.     -moz-box-shadow: none;
  1566.     -webkit-box-shadow: none;
  1567.     -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#c5c5c5')";
  1568.     filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#c5c5c5');
  1569.  
  1570. }
  1571.  
  1572. /*  ##################################
  1573.     DYNAMIC SIDEBAR MENUS
  1574.     ################################## */
  1575.  
  1576.  
  1577. ul#menu-fiji-facts li a, ul#menu-book-online li a
  1578. {
  1579.     display:block; 
  1580.     text-decoration:none;
  1581.     color:#FFFFFF !important;
  1582.     font-weight: bold;
  1583.     width:330px;
  1584.     height:30px;
  1585.     background: #3f73b5 url(images/details-tab-not-selected.jpg) 50% 50% repeat-x;
  1586.     margin-top:3px;
  1587.     padding:5px 5px 0px 5px;
  1588. }
  1589.  
  1590. ul#menu-fiji-facts li a:hover, ul#menu-fiji-facts li.current-menu-item a,
  1591. ul#menu-book-online li a:hover, ul#menu-book-online li.current-menu-item a
  1592. {
  1593.     display:block; 
  1594.     text-decoration:none;
  1595.     color:#0E365C !important;
  1596.     font-weight: bold;
  1597.     width:330px;
  1598.     height:30px;
  1599.     background: #d9e6f1 url(images/details-tab-selected.jpg) 50% 50% repeat-x;
  1600.     padding:5px 5px 0px 5px;
  1601. }
  1602.  
  1603. ul#menu-fiji-facts li a:active, ul#menu-book-online li a:active
  1604. {
  1605.     display:block; 
  1606.     text-decoration:none;
  1607.     color:#0E365C !important;
  1608.     font-weight: bold;
  1609.     width:330px;
  1610.     height:30px;
  1611.     background: #d9e6f1 url(images/details-tab-selected.jpg) 50% 50% repeat-x;
  1612.     padding:5px 5px 0px 5px;
  1613. }
  1614.  
  1615. #bookonlinesidebar {
  1616.     margin:1px;
  1617. }
  1618.  
  1619. .bookonlinesidebarelementdisplay
  1620. {
  1621.     display:block; 
  1622.     text-decoration:none;
  1623.     color:#FFFFFF !important;
  1624.     font-weight: bold;
  1625.     width:330px;
  1626.     height:30px;
  1627.     background: #3f73b5 url(images/details-tab-not-selected.jpg) 50% 50% repeat-x;
  1628.     margin-top:3px;
  1629.     padding:5px 5px 0px 5px;
  1630. }
  1631.  
  1632. .bookonlinesidebarelementdisplay:hover
  1633. {
  1634.     display:block; 
  1635.     text-decoration:none;
  1636.     color:#0E365C !important;
  1637.     font-weight: bold;
  1638.     width:330px;
  1639.     height:30px;
  1640.     background: #d9e6f1 url(images/details-tab-selected.jpg) 50% 50% repeat-x;
  1641.     padding:5px 5px 0px 5px;
  1642. }
  1643.  
  1644. .bookonlinesidebaractive
  1645. {
  1646.     display:block; 
  1647.     text-decoration:none;
  1648.     color:#0E365C !important;
  1649.     font-weight: bold;
  1650.     width:330px;
  1651.     height:30px;
  1652.     background: #d9e6f1 url(images/details-tab-selected.jpg) 50% 50% repeat-x;
  1653.     padding:5px 5px 0px 5px;
  1654. }
  1655.  
  1656. .vvqbox {  margin: 10px 10px 10px 10px !important; }
  1657.  
  1658.  
  1659. .paypalimage
  1660. {
  1661.     width:100px !important;
  1662.     margin: 7px 10px 10px 5px !important;
  1663. }
  1664.  
  1665. .previmage
  1666. {
  1667.     top:10%;
  1668.     position: relative;
  1669.     /*margin:5px 0px 0px 0px;*/
  1670. }
  1671. #homedown
  1672. {
  1673.     float:left;
  1674. }
  1675.  
  1676. .sidebardesttitle
  1677. {
  1678.     color:#306295 !important;
  1679.     text-decoration:none;
  1680.     font-size:16px;
  1681.     font-weight:bold;
  1682.     letter-spacing:0.5px;
  1683.     margin:0 0 0;
  1684.     padding:5px 0 0;
  1685. }
  1686.  
  1687. /* Bullets for UI Tabs on Resort Pages*/
  1688.  
  1689. .demo .ui-tabs .ui-tabs-panel ul li {list-style-type: disc;}
  1690.  
  1691. #loacatethis
  1692. {
  1693.     float:left;
  1694.     height:45px;
  1695.     width:350px;
  1696. }
  1697.  
  1698. #locate-resort {
  1699.     float:left;
  1700.     margin: 0 10px 0 0;
  1701.     width:165px;
  1702.     padding:0 0 0 5px;
  1703. }
  1704.  
  1705. #backto-subdest {
  1706.     float:left;
  1707.     margin: 0 0 0 0;
  1708.     width:165px;
  1709.     padding:0 0 0 5px;
  1710. }
  1711.  
  1712. #loacatethis a
  1713. {
  1714.     text-decoration:underline;
  1715.     font-size:14px;
  1716.     font-weight:bold;
  1717. }
  1718.  
  1719. #trip-adviser-button
  1720. {
  1721.     float:left;
  1722.     width:160px;
  1723.     height:35px;
  1724. }
  1725.  
  1726. /************************************************************
  1727. * RESPONSIVE For TABLETS Portrait  1000px or less
  1728. ************************************************************/
  1729.  
  1730. @media only screen and (max-width : 1000px) {
  1731.    
  1732. /*************************************************************************
  1733. Top Header and Top Bar Fix for Slicknav Addition
  1734. *************************************************************************/
  1735.  
  1736. body.black {
  1737.     background: none;
  1738. }
  1739.   #top-header {
  1740.   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  1741.   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  1742.   display: -ms-flexbox;      /* TWEENER - IE 10 */
  1743.   display: -webkit-flex;     /* NEW - Chrome */
  1744.   display: flex
  1745.   -webkit-flex-direction:column;
  1746.   flex-direction:column;
  1747.   -webkit-flex-wrap:wrap;
  1748.   flex-wrap:wrap;
  1749. }
  1750.  
  1751.  
  1752. .slicknav_menu {
  1753.   margin-top: 7px;
  1754.   background: #222222;
  1755.   background: -moz-linear-gradient(top, #222222 0%, #383838 0%, #383838 0%, #5c5c5c 0%, #383838 100%);
  1756.   background: -webkit-gradient(left top, left bottom, color-stop(0%, #222222), color-stop(0%, #383838), color-stop(0%, #383838), color-stop(0%, #5c5c5c), color-stop(100%, #383838));
  1757.   background: -webkit-linear-gradient(top, #222222 0%, #383838 0%, #383838 0%, #5c5c5c 0%, #383838 100%);
  1758.   background: -o-linear-gradient(top, #222222 0%, #383838 0%, #383838 0%, #5c5c5c 0%, #383838 100%);
  1759.   background: -ms-linear-gradient(top, #222222 0%, #383838 0%, #383838 0%, #5c5c5c 0%, #383838 100%);
  1760.   background: linear-gradient(to bottom, #222222 0%, #383838 0%, #383838 0%, #5c5c5c 0%, #383838 100%);
  1761.   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#383838', GradientType=0 );
  1762. }
  1763.  
  1764. .slicknav_btn {
  1765.     background: none;
  1766. }
  1767. .slicknav_btn {
  1768.     background: none;
  1769. }
  1770. /*************************************************************************
  1771. HIDE CERTAIN BLOCKS FOR TABLET
  1772. **************************************************************************/
  1773.  
  1774. #black-bar {
  1775.   display: none;
  1776. }
  1777. #slogan-bar {
  1778.   display:none;
  1779.   }
  1780. #logo {
  1781.     display:none;
  1782. }
  1783.  
  1784. .single #toplinks, .single #fiji-map-box, .single #toptranslate,
  1785. .single #loacatethis, .single-post #sidebar-bottom,
  1786.  .category #links-trans, .category #sidebar-bottom {
  1787.     display:none;
  1788.     }
  1789.  
  1790. .category #links-trans, .category #searchpanel {
  1791.   display: none;
  1792. }
  1793.  
  1794. /**************************************************************************
  1795. * GENERAL PAGE LIKE CONTACT AND ABOUT TABLET HIDDEN ITEMS
  1796. ***************************************************************************/
  1797.  
  1798. .page #links-trans {
  1799.   display:none;
  1800. }
  1801.  
  1802. .page #searchpanel {
  1803.   display:none;
  1804. }
  1805.  
  1806. .page-news #content {
  1807.   min-height: 0px;
  1808. }
  1809. /**************************************************************************
  1810. * RESORT PAGE OR SINGLE PAGE TABLET HIDDEN ITEMS
  1811. ***************************************************************************/
  1812.  
  1813. /*.single-post .ui-tabs .ui-tabs-nav {
  1814.   display:none;
  1815. }*/
  1816.  
  1817.  
  1818. .single #links-trans {
  1819.     float: left;
  1820.     width: 90%;
  1821.     padding-left: 15px;
  1822. }
  1823.  
  1824. /*************************************************************************
  1825. GENERAL TABLET HEADER SETTINGS
  1826. **************************************************************************/
  1827.  
  1828. #header h1 {
  1829.      float: left;
  1830.      width:100%;
  1831. }
  1832.  
  1833. #header h2 {
  1834.     margin: 10px 0 0 0;
  1835.     width:100%;
  1836. }
  1837.  
  1838. /**************************************************************************
  1839. * CONTACT PAGE TABLET
  1840. ***************************************************************************/
  1841. #contactform input.text, #contactform textarea {
  1842.     width: 300px;
  1843. }
  1844.  
  1845. .page-contact .box3 {
  1846.     background: none;
  1847.     border: 5px solid #fff;
  1848. }
  1849. /*********************************************************************************
  1850.  HOME & CATEGORY FLEX BOX MAIN CONTAINER TABLET
  1851. *******************************************************************************/
  1852.      
  1853. .home #main, .category #main, .single #main, .page #main {
  1854.     display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  1855.     display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  1856.     display: -ms-flexbox;      /* TWEENER - IE 10 */
  1857.     display: -webkit-flex;     /* NEW - Chrome */
  1858.     display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  1859.     -webkit-flex-direction:column;
  1860.     flex-direction:column;
  1861.     -webkit-flex-wrap:wrap;
  1862.     flex-wrap:wrap;
  1863.     padding:5px;
  1864.     width:640px;
  1865.     }
  1866.    
  1867. /* FLEX BOX HOME & CATEGORY MAIN BOX ITEMS *****************************/
  1868.    
  1869. .home #header, .category #header {
  1870.   webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
  1871.   -moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
  1872.   -ms-flex-order: 1;              /* TWEENER - IE 10 */
  1873.   -webkit-order: 1;               /* NEW - Chrome */
  1874.   order: 1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  1875.   }
  1876.  
  1877. .home #subnav, .category #subnav {
  1878.   webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
  1879.   -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
  1880.   -ms-flex-order: 2;              /* TWEENER - IE 10 */
  1881.   -webkit-order: 2;               /* NEW - Chrome */
  1882.   order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  1883.   padding:0;
  1884.   }
  1885. .home #dummyblock, .category #dummyblock {
  1886.   webkit-box-ordinal-group: 3;   /* OLD - iOS 6-, Safari 3.1-6 */
  1887.   -moz-box-ordinal-group: 3;      /* OLD - Firefox 19- */
  1888.   -ms-flex-order: 3;              /* TWEENER - IE 10 */
  1889.   -webkit-order: 3;               /* NEW - Chrome */
  1890.   order: 3;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  1891. }
  1892.  
  1893. .home #topslider, .category #topslider {
  1894.   webkit-box-ordinal-group: 4;   /* OLD - iOS 6-, Safari 3.1-6 */
  1895.   -moz-box-ordinal-group: 4;      /* OLD - Firefox 19- */
  1896.   -ms-flex-order: 4;              /* TWEENER - IE 10 */
  1897.   -webkit-order: 4;               /* NEW - Chrome */
  1898.   order: 4;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  1899.   margin: 0 auto 10px auto;
  1900.   width: 630px;
  1901.     }        
  1902.  
  1903. /**************************************************
  1904. * Links-trans  Flexbox Home + CATEGORY
  1905.   **************************************************/
  1906.  
  1907. .home  #links-trans {
  1908.   webkit-box-ordinal-group: 5;   /* OLD - iOS 6-, Safari 3.1-6 */
  1909.   -moz-box-ordinal-group: 5;      /* OLD - Firefox 19- */
  1910.   -ms-flex-order: 5;              /* TWEENER - IE 10 */
  1911.   -webkit-order: 5;               /* NEW - Chrome */
  1912.   order: 5;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  1913.   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  1914.   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  1915.   display: -ms-flexbox;      /* TWEENER - IE 10 */
  1916.   display: -webkit-flex;     /* NEW - Chrome */
  1917.   display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  1918.   -webkit-flex-direction:column;
  1919.   flex-direction:column;
  1920.   width:100%;
  1921.  
  1922. }
  1923.  
  1924.  
  1925. .home #topl-specials, .category #topl-specials {
  1926.   webkit-box-ordinal-group: 6;   /* OLD - iOS 6-, Safari 3.1-6 */
  1927.   -moz-box-ordinal-group: 6;      /* OLD - Firefox 19- */
  1928.   -ms-flex-order: 6;              /* TWEENER - IE 10 */
  1929.   -webkit-order: 6;               /* NEW - Chrome */
  1930.   order: 6;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  1931.   background: url('images/shadowboxes/fiji-specials-box-tablet.jpg') no-repeat;
  1932.   width:300px;
  1933.   height:120px;
  1934.   margin-right: 30px;
  1935. }
  1936. .home #toplinks, .category #toplinks {
  1937.   webkit-box-ordinal-group: 7;   /* OLD - iOS 6-, Safari 3.1-6 */
  1938.   -moz-box-ordinal-group: 7;      /* OLD - Firefox 19- */
  1939.   -ms-flex-order: 7;              /* TWEENER - IE 10 */
  1940.   -webkit-order: 7;               /* NEW - Chrome */
  1941.   order: 7;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  1942.   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  1943.   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  1944.   display: -ms-flexbox;      /* TWEENER - IE 10 */
  1945.   display: -webkit-flex;     /* NEW - Chrome */
  1946.   display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  1947.   -webkit-flex-direction:row;
  1948.   flex-direction:row;
  1949.   height:200px;
  1950.   width: 630px;
  1951.   margin:0 auto;
  1952. }
  1953.  
  1954. /*   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] */
  1955.  
  1956. /********Links and Map Flex Box ************/
  1957.  
  1958. .home #links-map-trans, .category #links-map-trans  {
  1959.   webkit-box-ordinal-group: 8;   /* OLD - iOS 6-, Safari 3.1-6 */
  1960.   -moz-box-ordinal-group: 8;      /* OLD - Firefox 19- */
  1961.   -ms-flex-order: 8;              /* TWEENER - IE 10 */
  1962.   -webkit-order: 8;               /* NEW - Chrome */
  1963.   order: 8;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  1964.   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  1965.   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  1966.   display: -ms-flexbox;      /* TWEENER - IE 10 */
  1967.   display: -webkit-flex;     /* NEW - Chrome */
  1968.   display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  1969.   -webkit-flex-direction:row; /* Safari 6.1+ */
  1970.   flex-direction:row;
  1971.   margin: 0 auto;
  1972.   width: 630px;
  1973. }
  1974. .home #fiji-map-box, .category #fiji-map-box {
  1975.   webkit-box-ordinal-group: 9;   /* OLD - iOS 6-, Safari 3.1-6 */
  1976.   -moz-box-ordinal-group: 9;      /* OLD - Firefox 19- */
  1977.   -ms-flex-order: 9;              /* TWEENER - IE 10 */
  1978.   -webkit-order: 9;               /* NEW - Chrome */
  1979.   order: 9;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  1980. }
  1981. .home #toptranslate, .category #toptranslate {
  1982.   webkit-box-ordinal-group: 10;   /* OLD - iOS 6-, Safari 3.1-6 */
  1983.   -moz-box-ordinal-group: 10;      /* OLD - Firefox 19- */
  1984.   -ms-flex-order: 10;              /* TWEENER - IE 10 */
  1985.   -webkit-order: 10;               /* NEW - Chrome */
  1986.   order: 10;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  1987. }
  1988. .home  #topl-booknow, .category #topl-booknow  {
  1989.   webkit-box-ordinal-group: 11;   /* OLD - iOS 6-, Safari 3.1-6 */
  1990.   -moz-box-ordinal-group: 11;      /* OLD - Firefox 19- */
  1991.   -ms-flex-order: 11;              /* TWEENER - IE 10 */
  1992.   -webkit-order: 11;               /* NEW - Chrome */
  1993.   order: 11;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  1994.   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  1995.   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  1996.   display: -ms-flexbox;      /* TWEENER - IE 10 */
  1997.   display: -webkit-flex;     /* NEW - Chrome */
  1998.   display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  1999.   -webkit-flex:2;
  2000.   flex: 2;
  2001.   background: url('images/shadowboxes/book-now-box-tablet.jpg') no-repeat;
  2002.   width:300px;
  2003. }
  2004.  
  2005. .home #searchpanel {
  2006.   webkit-box-ordinal-group: 12;   /* OLD - iOS 6-, Safari 3.1-6 */
  2007.   -moz-box-ordinal-group: 12;      /* OLD - Firefox 19- */
  2008.   -ms-flex-order: 12;              /* TWEENER - IE 10 */
  2009.   -webkit-order: 12;               /* NEW - Chrome */
  2010.   order: 12;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2011.   width: 630px;
  2012.   margin: 0 auto;
  2013. }
  2014. /* END links-trans  flexbox */
  2015.  
  2016. .home #content, .category #content {
  2017.   webkit-box-ordinal-group: 13;   /* OLD - iOS 6-, Safari 3.1-6 */
  2018.   -moz-box-ordinal-group: 13;      /* OLD - Firefox 19- */
  2019.   -ms-flex-order: 13;              /* TWEENER - IE 10 */
  2020.   -webkit-order: 13;               /* NEW - Chrome */
  2021.   order: 13;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2022.   margin: 0 auto;
  2023. }
  2024. .home #sidebar-bottom, .category  #sidebar-bottom, .page-news #sidebar-bottom {
  2025.     -webkit-box-ordinal-group: 14;   /* OLD - iOS 6-, Safari 3.1-6 */
  2026.     -moz-box-ordinal-group: 14;      /* OLD - Firefox 19- */
  2027.     -ms-flex-order: 14;              /* TWEENER - IE 10 */
  2028.     -webkit-order: 14;               /* NEW - Chrome */
  2029.     order: 14;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2030.   width: 630px;
  2031.   margin: 0 auto;
  2032. }
  2033.  
  2034.  
  2035. .home #sidebar-bottom ul, .category #sidebar-bottom ul, .page-news #sidebar-bottom ul {
  2036.   webkit-box-ordinal-group: 15;   /* OLD - iOS 6-, Safari 3.1-6 */
  2037.   -moz-box-ordinal-group: 15;      /* OLD - Firefox 19- */
  2038.   -ms-flex-order: 15;              /* TWEENER - IE 10 */
  2039.   -webkit-order: 15;               /* NEW - Chrome */
  2040.   order: 15;      
  2041.   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  2042.   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  2043.   display: -ms-flexbox;      /* TWEENER - IE 10 */
  2044.   display: -webkit-flex;     /* NEW - Chrome */
  2045.   display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2046.   flex-direction: row;
  2047.   height:auto;
  2048.   -webkit-flex-wrap:wrap; /* Safari 6.1+ */
  2049.   flex-wrap:wrap;
  2050.   width:88%;
  2051. }
  2052.  
  2053. .home #sidebar-bottom .box2, .category #sidebar-bottom .box2,
  2054. .page-news #sidebar-bottom .box2 {
  2055.   width: 100%;
  2056. }
  2057.  
  2058.  
  2059. .home .sidepost, .category .sidepost, .page-news .sidepost {
  2060.   -webkit-box-flex:45% 1;
  2061.    -moz-box-flex:45% 1;
  2062.   -webkit-flex:45% 1;
  2063.   ms-flex:45% 1;
  2064.   flex:45% 1;
  2065. }
  2066.  
  2067. /**********************************************************
  2068. * NEWS PAGE STUFF
  2069. ************************************************************/
  2070.  
  2071. /**********************************************************
  2072. * General Styling of TABLET ITEMS
  2073. *********************************************************/
  2074.  
  2075. #header h1 {
  2076.   background-image: url("images/title-block-tablet.jpg");
  2077. }
  2078.  
  2079.  
  2080.  
  2081. #searchpanel {
  2082.   background-image: none;
  2083.   background-color:white;
  2084.   background: -webkit-linear-gradient(top, #CCDFEC, white); /* For Safari 5.1 to 6.0 */
  2085.   background: -o-linear-gradient(top, #CCDFEC, white); /* For Opera 11.1 to 12.0 */
  2086.   background: -moz-linear-gradient(top, #CCDFEC, white); /* For Firefox 3.6 to 15 */
  2087.   background: linear-gradient(top, #CCDFEC, white); /* Standard syntax */
  2088.   box-shadow:0 0 7px silver;
  2089.   webkit-box-shadow:0 0 7px silver;
  2090.   border: solid 6px white;
  2091.  /* height:40px;*/
  2092.   width:95%;
  2093.   }
  2094.  
  2095.  
  2096. .ts-menu, #subnav, #main {
  2097.   width: 100%;
  2098. }
  2099.  
  2100. .ts-menu {
  2101.   position: static;
  2102.   margin: 0 auto;
  2103.   top: 0px;
  2104. }
  2105. #phone-button, #email-button, #book-button, #ultimate-shark-button {
  2106.   width: 100%;
  2107.   float: none;
  2108. }
  2109.  
  2110. /**********************************************************************
  2111. * FLEX BOX ORDER CATEGORY PAGE TABLET
  2112. **********************************************************************/
  2113.  
  2114.  
  2115. #topdestination {
  2116.   width: 100%;
  2117.   height: 575px;
  2118.   margin: 0 auto;
  2119.   webkit-box-ordinal-group: 3;   /* OLD - iOS 6-, Safari 3.1-6 */
  2120.   -moz-box-ordinal-group: 3;      /* OLD - Firefox 19- */
  2121.   -ms-flex-order: 3;              /* TWEENER - IE 10 */
  2122.   -webkit-order: 3;               /* NEW - Chrome */
  2123.   order: 3;
  2124. }
  2125.  
  2126. #destinationcontent {
  2127.   width: 100%;
  2128.   webkit-box-ordinal-group: 3;   /* OLD - iOS 6-, Safari 3.1-6 */
  2129.   -moz-box-ordinal-group: 3;      /* OLD - Firefox 19- */
  2130.   -ms-flex-order: 3;              /* TWEENER - IE 10 */
  2131.   -webkit-order: 3;               /* NEW - Chrome */
  2132.   order: 3;
  2133.   display: -webkit-box;
  2134.   display: -moz-box;
  2135.   display: -ms-flexbox;
  2136.   display: -webkit-flex;
  2137.   display: flex;
  2138.   flex-direction: row;
  2139.   height: auto;
  2140.   -webkit-flex-wrap: wrap;
  2141.   flex-wrap: wrap;
  2142. }
  2143.  
  2144. .destinationblock {
  2145.   -webkit-box-flex:45% 1;
  2146.    -moz-box-flex:45% 1;
  2147.   -webkit-flex:45% 1;
  2148.   ms-flex:45% 1;
  2149.   flex:45% 1;
  2150. }
  2151.  
  2152. /*************************************************
  2153. * Only one destination item in a row fix
  2154. **************************************************/
  2155.  
  2156. #destinationcontent div:last-child {
  2157.   -webkit-box-flex:0 auto;
  2158.   -moz-box-flex:0 auto;
  2159.   -webkit-flex:0 auto;
  2160.   ms-flex:0 auto;
  2161.   flex: 0 auto;
  2162.   width:100%;
  2163. }
  2164.  
  2165.  
  2166.  
  2167. /*************************************************
  2168. * Only one destination item in a row exceptions
  2169. * where there are two item
  2170. **************************************************/
  2171.  
  2172. .category-luxury #destinationcontent div:last-child,
  2173. .category-spa #destinationcontent div:last-child,
  2174. .category-sunshine-coast #destinationcontent div:last-child,
  2175. .category-nadi-and-denarau #destinationcontent div:last-child,
  2176. .category-mamanuca #destinationcontent div:last-child,
  2177. .category-yasawa #destinationcontent div:last-child,
  2178. .category-vanua-levu #destinationcontent div:last-child,
  2179. .category-kadavu #destinationcontent div:last-child {
  2180.   -webkit-box-flex:45% 1;
  2181.    -moz-box-flex:45% 1;
  2182.   -webkit-flex:45% 1;
  2183.   ms-flex:45% 1;
  2184.   flex:45% 1;
  2185. }
  2186.  
  2187. /****************************************
  2188. SOME MORE GENERAL TABLET STYLING
  2189. ****************************************/
  2190.  
  2191. #subnav {
  2192.   padding: 50px 0 50px;
  2193.   color: #00F;
  2194.   font-size: 13px;
  2195.   width: 100%;
  2196.   position: static;
  2197. }
  2198.  
  2199. }
  2200.  
  2201. /************************************************************
  2202. * RESPONSIVE VIEW FOR SMARTPHONES PORTRAIT  
  2203. ************************************************************/
  2204.  
  2205. @media only screen and (max-width : 650px) {
  2206.    
  2207.  
  2208. /* **********************************************************
  2209. * Top Header and Top Bar Fix for Slicknav Addition
  2210. *************************************************************/
  2211.  
  2212. #top-header {
  2213.   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  2214.   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  2215.   display: -ms-flexbox;      /* TWEENER - IE 10 */
  2216.   display: -webkit-flex;     /* NEW - Chrome */
  2217.   display: flex
  2218.   -webkit-flex-direction:column;
  2219.   flex-direction:column;
  2220.   -webkit-flex-wrap:wrap;
  2221.   flex-wrap:wrap;
  2222. }
  2223.  
  2224.  
  2225. /************************************************************
  2226. * SMARTPHONES HIDDEN ITEMS
  2227. ************************************************************/
  2228.  
  2229. #black-bar {
  2230.   display: none;
  2231. }
  2232. #slogan-bar {
  2233.   display:none;
  2234.   }
  2235. #logo {
  2236.     display:none;
  2237. }
  2238.  
  2239. .footer-menu li:nth-last-child(-n+1) {
  2240.   display:none;
  2241. }
  2242.  
  2243.  
  2244. single #toplinks, .single #fiji-map-box, .single #toptranslate,
  2245. .single #loacatethis, .single-post #sidebar-bottom,
  2246.  .category #links-trans, .category #sidebar-bottom {
  2247.     display:none;
  2248.     }
  2249.  
  2250. #resortpic {
  2251.   background-size: 100% 100%;
  2252.   background-repeat: no-repeat;
  2253. }
  2254. .category #links-trans, .category #searchpanel {
  2255.   display: none;
  2256. }
  2257.  
  2258. .home #links-map-trans {
  2259.   display:none;
  2260.  
  2261. }
  2262.  
  2263. #nggpanel {display:none;
  2264. }
  2265.  
  2266. /****** GALLERY FIXES RESORT PAGES *********/
  2267.  
  2268. #topgallery {
  2269.     width: 100%;
  2270.     height:100%;
  2271.     margin-left:0px;
  2272. }
  2273.  
  2274. .ngg-galleryoverview div.pic img {
  2275.   width: 100%;
  2276.   height: 100%;
  2277. }
  2278.  
  2279. #topgallery #resortpic {
  2280.     display: block;
  2281.     height: 100%;
  2282. }
  2283.  
  2284. #topgallery #picborder {
  2285.   margin: 0px 10px 10px 10px;
  2286.   height: 100%;
  2287.   width:93%;
  2288.   padding: 15px 5px 10px 5px;
  2289. }
  2290.  
  2291.  
  2292. #ngglist {
  2293.     display:none;
  2294. }
  2295.  
  2296.  
  2297. /** FIJI MAP FIX SMARTPHONE **/
  2298.  
  2299. .box3 img {
  2300.     width: 100%;
  2301.     height: 100%;
  2302. }
  2303.  
  2304. img.ui-datepicker-trigger {
  2305.     width: 20px;
  2306. }
  2307.  
  2308. /**************************************************************************
  2309. * RESORT PAGE OR SINGLE PAGE SMARTPHONE FIXES
  2310. ***************************************************************************/
  2311.  
  2312. /*.single-post .ui-tabs .ui-tabs-nav {
  2313.   display:none;
  2314. }
  2315. */
  2316.  
  2317. .single #links-trans {
  2318.     float: left;
  2319.     width: 90%;
  2320.     padding-left: 15px;
  2321. }
  2322.  
  2323.  
  2324. /**************************************************************************
  2325. * CONTACT PAGE SMARTPHONE
  2326. ***************************************************************************/
  2327. #contactform input.text, #contactform textarea {
  2328.     width: 150px;
  2329. }
  2330.  
  2331. .page-contact .box3 {
  2332.     background: none;
  2333.     border: 5px solid #fff;
  2334. }
  2335.  
  2336. /**************************************************************************
  2337. * SEARCH PANEL SMARTPHONE
  2338. ***************************************************************************/
  2339.  
  2340. #searchpanel {
  2341.   display:none;
  2342.   background-image: none;
  2343.   background-color:white;
  2344.   background: -webkit-linear-gradient(top, #CCDFEC, white); /* For Safari 5.1 to 6.0 */
  2345.   background: -o-linear-gradient(top, #CCDFEC, white); /* For Opera 11.1 to 12.0 */
  2346.   background: -moz-linear-gradient(top, #CCDFEC, white); /* For Firefox 3.6 to 15 */
  2347.   background: linear-gradient(top, #CCDFEC, white); /* Standard syntax */
  2348.   box-shadow:0 0 7px silver;
  2349.   webkit-box-shadow:0 0 7px silver;
  2350.   border: solid 6px white;
  2351.  /* height:40px;*/
  2352.   width:95%;
  2353. }
  2354.  
  2355. /************************************************************
  2356. * SMARTPHONES PORTRAIT  HEADERS
  2357. ************************************************************/
  2358.  
  2359. #header h1 {
  2360.      float: left;
  2361.      width:100%;
  2362. }
  2363.  
  2364. #header h2 {
  2365.     margin: 10px 0 0 0;
  2366.     width:100%;
  2367. }
  2368.  
  2369. /**********************************************************
  2370. * HOME AND CATEGORY Flex Box Main Container SMARTPHONES
  2371. ***********************************************************/
  2372.      
  2373. .home #main, .category #main, .single #main, .page #main {
  2374.     display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  2375.     display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  2376.     display: -ms-flexbox;      /* TWEENER - IE 10 */
  2377.     display: -webkit-flex;     /* NEW - Chrome */
  2378.     display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2379.     -webkit-flex-direction:column;
  2380.     flex-direction:column;
  2381.     -webkit-flex-wrap:wrap;
  2382.     flex-wrap:wrap;
  2383.     padding:5px;
  2384.     width: 450px;
  2385.     }
  2386.    
  2387. /*************************************************************
  2388. * Flex Box Main Box Items SMARTPHONES
  2389. *************************************************************/
  2390.    
  2391. .home #header {
  2392.   webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
  2393.   -moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
  2394.   -ms-flex-order: 1;              /* TWEENER - IE 10 */
  2395.   -webkit-order: 1;               /* NEW - Chrome */
  2396.   order: 1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2397.   margin: auto;
  2398.   width: 350px;
  2399.   }
  2400.  
  2401. .home #subnav {
  2402.   webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
  2403.   -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
  2404.   -ms-flex-order: 2;              /* TWEENER - IE 10 */
  2405.   -webkit-order: 2;               /* NEW - Chrome */
  2406.   order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2407.   margin: auto;
  2408.   width: 350px;
  2409.   padding:0;
  2410.   }
  2411. .home #dummyblock {
  2412.   webkit-box-ordinal-group: 3;   /* OLD - iOS 6-, Safari 3.1-6 */
  2413.   -moz-box-ordinal-group: 3;      /* OLD - Firefox 19- */
  2414.   -ms-flex-order: 3;              /* TWEENER - IE 10 */
  2415.   -webkit-order: 3;               /* NEW - Chrome */
  2416.   order: 3;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2417. }
  2418.  
  2419. .home #topslider {
  2420.   display:none;
  2421.   webkit-box-ordinal-group: 4;   /* OLD - iOS 6-, Safari 3.1-6 */
  2422.   -moz-box-ordinal-group: 4;      /* OLD - Firefox 19- */
  2423.   -ms-flex-order: 4;              /* TWEENER - IE 10 */
  2424.   -webkit-order: 4;               /* NEW - Chrome */
  2425.   order: 4;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2426.   margin: 0 auto 10px auto;
  2427.   width: 630px;
  2428.     }        
  2429.  
  2430. /******************************************************************
  2431. * Links-trans  Flexbox SMARTPHONES
  2432. *******************************************************************/
  2433.  
  2434. .home  #links-trans {
  2435.   webkit-box-ordinal-group: 5;   /* OLD - iOS 6-, Safari 3.1-6 */
  2436.   -moz-box-ordinal-group: 5;      /* OLD - Firefox 19- */
  2437.   -ms-flex-order: 5;              /* TWEENER - IE 10 */
  2438.   -webkit-order: 5;               /* NEW - Chrome */
  2439.   order: 5;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2440.   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  2441.   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  2442.   display: -ms-flexbox;      /* TWEENER - IE 10 */
  2443.   display: -webkit-flex;     /* NEW - Chrome */
  2444.   display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2445.   -webkit-flex-direction:column;
  2446.   flex-direction:column;
  2447.   margin: auto;
  2448.   width: 350px;
  2449.  
  2450. }
  2451.  
  2452. .home #topl-specials {
  2453.   webkit-box-ordinal-group: 6;   /* OLD - iOS 6-, Safari 3.1-6 */
  2454.   -moz-box-ordinal-group: 6;      /* OLD - Firefox 19- */
  2455.   -ms-flex-order: 6;              /* TWEENER - IE 10 */
  2456.   -webkit-order: 6;               /* NEW - Chrome */
  2457.   order: 6;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2458.   background: url('images/shadowboxes/fiji-specials-box-tablet.jpg') no-repeat;
  2459.   width:300px;
  2460.   height:120px;
  2461.   margin-right: 30px;
  2462. }
  2463. .home #toplinks {
  2464.   webkit-box-ordinal-group: 7;   /* OLD - iOS 6-, Safari 3.1-6 */
  2465.   -moz-box-ordinal-group: 7;      /* OLD - Firefox 19- */
  2466.   -ms-flex-order: 7;              /* TWEENER - IE 10 */
  2467.   -webkit-order: 7;               /* NEW - Chrome */
  2468.   order: 7;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2469.   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  2470.   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  2471.   display: -ms-flexbox;      /* TWEENER - IE 10 */
  2472.   display: -webkit-flex;     /* NEW - Chrome */
  2473.   display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2474.   -webkit-flex-direction:column;
  2475.   flex-direction:column;
  2476.   height:275px;
  2477.   width: 100%;
  2478.   margin:0 auto;
  2479. }
  2480.  
  2481. /*************************************************************************
  2482. * Links and Map Flex Box SMARTPHONES
  2483. **************************************************************************/
  2484.  
  2485.  
  2486. .home #fiji-map-box {
  2487.   webkit-box-ordinal-group: 9;   /* OLD - iOS 6-, Safari 3.1-6 */
  2488.   -moz-box-ordinal-group: 9;      /* OLD - Firefox 19- */
  2489.   -ms-flex-order: 9;              /* TWEENER - IE 10 */
  2490.   -webkit-order: 9;               /* NEW - Chrome */
  2491.   order: 9;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2492. }
  2493. .home #toptranslate {
  2494.   webkit-box-ordinal-group: 10;   /* OLD - iOS 6-, Safari 3.1-6 */
  2495.   -moz-box-ordinal-group: 10;      /* OLD - Firefox 19- */
  2496.   -ms-flex-order: 10;              /* TWEENER - IE 10 */
  2497.   -webkit-order: 10;               /* NEW - Chrome */
  2498.   order: 10;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2499. }
  2500. .home  #topl-booknow {
  2501.   webkit-box-ordinal-group: 11;   /* OLD - iOS 6-, Safari 3.1-6 */
  2502.   -moz-box-ordinal-group: 11;      /* OLD - Firefox 19- */
  2503.   -ms-flex-order: 11;              /* TWEENER - IE 10 */
  2504.   -webkit-order: 11;               /* NEW - Chrome */
  2505.   order: 11;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2506.   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  2507.   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  2508.   display: -ms-flexbox;      /* TWEENER - IE 10 */
  2509.   display: -webkit-flex;     /* NEW - Chrome */
  2510.   display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2511.   -webkit-flex:2;
  2512.   flex: 2;
  2513.   background: url('images/shadowboxes/book-now-box-tablet.jpg') no-repeat;
  2514.   width:300px;
  2515. }
  2516.  
  2517. .home #searchpanel {
  2518.   display:none;
  2519.   webkit-box-ordinal-group: 12;   /* OLD - iOS 6-, Safari 3.1-6 */
  2520.   -moz-box-ordinal-group: 12;      /* OLD - Firefox 19- */
  2521.   -ms-flex-order: 12;              /* TWEENER - IE 10 */
  2522.   -webkit-order: 12;               /* NEW - Chrome */
  2523.   order: 12;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2524.   width: 530px;
  2525.   margin: 0 auto;
  2526. }
  2527. /*********************************************************************************
  2528. * END links-trans  flexbox SMARTPHONES
  2529. **********************************************************************************/
  2530.  
  2531. .home #content {
  2532.   display:none;
  2533.   webkit-box-ordinal-group: 13;   /* OLD - iOS 6-, Safari 3.1-6 */
  2534.   -moz-box-ordinal-group: 13;      /* OLD - Firefox 19- */
  2535.   -ms-flex-order: 13;              /* TWEENER - IE 10 */
  2536.   -webkit-order: 13;               /* NEW - Chrome */
  2537.   order: 13;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2538.   margin: 0 auto;
  2539. }
  2540. .home  #sidebar-bottom, .page-news #sidebar-bottom {
  2541.     -webkit-box-ordinal-group: 14;   /* OLD - iOS 6-, Safari 3.1-6 */
  2542.     -moz-box-ordinal-group: 14;      /* OLD - Firefox 19- */
  2543.     -ms-flex-order: 14;              /* TWEENER - IE 10 */
  2544.     -webkit-order: 14;               /* NEW - Chrome */
  2545.     order: 14;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2546.   width: 100%;
  2547.   margin: 0 auto;
  2548. }
  2549.  
  2550. .home #sidebar-bottom ul, .page-news #sidebar-bottom ul {
  2551.   webkit-box-ordinal-group: 15;   /* OLD - iOS 6-, Safari 3.1-6 */
  2552.   -moz-box-ordinal-group: 15;      /* OLD - Firefox 19- */
  2553.   -ms-flex-order: 15;              /* TWEENER - IE 10 */
  2554.   -webkit-order: 15;               /* NEW - Chrome */
  2555.   order: 15;      
  2556.   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  2557.   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  2558.   display: -ms-flexbox;      /* TWEENER - IE 10 */
  2559.   display: -webkit-flex;     /* NEW - Chrome */
  2560.   display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
  2561.   flex-direction: column;
  2562.   height:auto;
  2563.   -webkit-flex-wrap:wrap; /* Safari 6.1+ */
  2564.   flex-wrap:wrap;
  2565.   width:88%;
  2566. }
  2567.  
  2568. .home #sidebar-bottom .box2, .page-news #sidebar-bottom .box2 {
  2569.   width: 100%;
  2570. }
  2571.  
  2572. .home .sidepost, .page-news .sidepost {
  2573.   -webkit-box-flex:45% 1;
  2574.    -moz-box-flex:45% 1;
  2575.   -webkit-flex:45% 1;
  2576.   ms-flex:45% 1;
  2577.   flex:45% 1;
  2578. }
  2579.  
  2580. /* General Styling of Mobile Items *************/
  2581.  
  2582. #header h1 {
  2583.   background-image: url("images/title-block-mobile.jpg");
  2584. }
  2585.  
  2586.  
  2587. .page #content {
  2588.   width:98%;
  2589. }  
  2590. .page .box3 {
  2591.   width:100%;
  2592. }
  2593.  
  2594.   .ts-menu, #subnav, #main {
  2595.     width: 100%;
  2596.   }
  2597.  
  2598.   .ts-menu {
  2599.     position: static;
  2600.     margin: 0 auto;
  2601.     top: 0px;
  2602.   }
  2603.   #phone-button, #email-button, #book-button, #ultimate-shark-button {
  2604.     width: 100%;
  2605.     float: left;
  2606.   }
  2607.  
  2608. /* General Styling of Mobile Items Still *************/
  2609.  
  2610.   #destinationcontent {
  2611.     width: 100%;
  2612.   }
  2613.   #topdestination {
  2614.     display:none;
  2615.     width: 100%;
  2616.     height: 575px;
  2617.     margin: 0 auto;
  2618.     float: left;
  2619.   }
  2620.   #subnav {
  2621.     padding: 50px 0 50px;
  2622.     color: #00F;
  2623.     font-size: 13px;
  2624.     width: 100%;
  2625.     position: static;
  2626.   }
  2627.  
  2628.  
  2629. #header h2 {
  2630.     background:url('images/site-slogan-24-mobile.png');
  2631.     background-repeat:no-repeat;
  2632. }
  2633.  
  2634. #menu-footer {
  2635.     width: 90%;
  2636. }
  2637.  
  2638. }
  2639.  
  2640. /*************************************************************************
  2641. * SMARTPHONE FOOTER MENU AND MAIN TWEAKS DIFFERENT BREAKPOINTS
  2642. **************************************************************************/
  2643.  
  2644. @media only screen and (max-width : 950px) {
  2645.  
  2646. .footer-menu li:nth-last-child(-n+1) {
  2647.   display:none;
  2648. }
  2649. }
  2650. @media only screen and (max-width : 795px) {
  2651.  
  2652. .footer-menu li:nth-last-child(-n+3) {
  2653.   display:none;
  2654. }
  2655. }
  2656.  
  2657. /** END MEDIA QUERY ***/
  2658.  
  2659. @media only screen and (max-width : 625px) {
  2660.  
  2661. .home #main, .category #main, .single #main, .page #main {
  2662.   width:350px;
  2663. }
  2664.  
  2665. .footer-menu li:nth-last-child(-n+4) {
  2666.   display:none;
  2667. }
  2668. }
  2669.  
  2670. /** END MEDIA QUERY ***/
  2671.  
  2672. @media only screen and (max-width : 530px) {
  2673.  
  2674. .footer-menu li:nth-last-child(-n+5) {
  2675.   display:none;
  2676. }
  2677.  
  2678. #topgallery #picborder {
  2679.   width:92%;
  2680. }
  2681. }
  2682.  
  2683. /** END MEDIA QUERY ***/
  2684.  
  2685. @media only screen and (max-width : 450px) {
  2686.  
  2687. .footer-menu li:nth-last-child(-n+6) {
  2688.   display:none;
  2689. }
  2690.  
  2691. #topgallery #picborder {
  2692.   width:91%;
  2693. }
  2694.  
  2695. }
  2696.  
  2697. /************************************************
  2698. * TINY DEVICES LESS THAN 360px
  2699. *************************************************/
  2700. @media only screen and (max-width : 360px) {
  2701.  
  2702. .home #main, .category #main, .single #main, .page #main {
  2703.   width:300px;
  2704. }
  2705.  
  2706. #topgallery #picborder {
  2707.   width:90%;
  2708. }
  2709.  
  2710. .destimage {
  2711.     width: 100%
  2712. }
  2713.  
  2714. .destinationblock {
  2715.   float: left;
  2716.   width: 280px;
  2717. }
  2718.  
  2719. .destinationblock img {
  2720.     margin: 5px 0 0 5px;
  2721.     width: 100%;
  2722. }
  2723.  
  2724. .destinationdetails {
  2725.   width: 280px;
  2726. }
  2727.   #header h2 {
  2728.     background: url('images/site-slogan-24-small-mobile.png');
  2729.     background-repeat: no-repeat;
  2730. }
  2731. #header h1 {
  2732.     background-image: url("images/title-block-small-mobile.jpg");
  2733. }
  2734. .footer-menu li:nth-last-child(-n+7) {
  2735.   display:none;
  2736. }
  2737.  
  2738. }
  2739. #menu-footer {
  2740.     width: 70%;
  2741. }
  2742. }
  2743.  
  2744. /** END MEDIA QUERY ***/
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!