cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>

<div id="global-header">
  <div class="site-content">
    <div class="site-navigation all-in cf row">
      <ul class="primary-nav-menus col col9">
        <li>
          <a id="primary-nav-home" href="/app?continuationClass=com.egencia.frontend.air.workflow.AirShoppingContinuation&amp;service=ContinuationService&amp;sp=SWelcome" class="first">
            <img src="https://assets.egencia.com/uitoolkit/4/53a55978dd5f0561bd95a70e4fc7a834de5135ea/images/full-color-egencia-logo.png">
          </a>
        </li>

        <li>
          <a id="primary-nav-book" href="#" data-control="tooltip" data-content-id="book-menu" data-js-theme="menu">Book</a>
          <div id="book-menu" class="visuallyhidden">
            <ul class="site-navigation-tooltip list">

              <li><a id="book-flight" href="/app?continuationClass=com.egencia.frontend.air.workflow.AirShoppingContinuation&amp;service=ContinuationService" class="medium">Flights</a></li>

              <li><a id="book-car" href="mvc/car/shop?execution=e1s1" class="medium">Cars</a></li>

              <li><a id="book-hotel" href="/site/travel/hotel/hotelsearchpage" class="medium">Hotels</a></li>

              <li><a id="book-train" href="/NewJourney.f?subAction=train" class="medium">Trains</a></li>

            </ul>
          </div>
        </li>


        <li>
          <a id="primary-nav-trips" href="/app?page=DossiersListPage&amp;service=page">Trips</a>
        </li>


        <li>
          <a id="primary-nav-tools" href="#" data-control="tooltip" data-content-id="tool-menu" data-js-theme="menu">Tools</a>
          <div id="tool-menu" class="visuallyhidden">
            <div class="site-navigation-tooltip multi-list">

              <dl class="site-navigation-tooltip multi-list ">
                <dt class="category-title">General</dt>

                <dd><a id="online-checkIn" href="/app?service=page&amp;page=OnlineCheckIn">Online Check-in</a></dd>

                <dd><a id="travel-news" href="/site/travellertool/latesttravelnewspage">Travel news</a></dd>

                <dd><a id="maps-directions" href="/app?page=MapsAndDirectionsPage&amp;service=page">Maps and directions</a></dd>

                <dd><a id="visa-passport" href="/app?page=Visas&amp;service=page">Visas</a></dd>

                <dd><a id="country-watch" href="app?page=CountryWatch&amp;service=page">Country watch</a></dd>

                <dd><a id="currency-converter" href="/app?page=Currency&amp;service=page">Currency conversion</a></dd>

                <dt></dt>

                <dt>Travel Management</dt>

                <dd><a id="awaiting-approval-trips" href="/app?page=ApproListPage&amp;service=external&amp;sp=Srequested">Trips waiting for approval</a></dd>

                <dd><a id="refused-trips" href="/app?page=ApproListPage&amp;service=external&amp;sp=Srefuses">Trips refused</a></dd>

              </dl>
              <dl class="site-navigation-tooltip multi-list ">
                <dt>Travel Policy</dt>

                <dd><a id="preferred-hotel" href="/site/travelmanagement/travelpolicy/preferredhotels">Preferred hotels</a></dd>

                <dd><a id="custom-location" href="/mvc/travelmanagement/travelpolicy/customLocations">Custom location</a></dd>

                <dd><a id="custom-reason" href="/mvc/travelmanagement/travelpolicy/customReasonsCodes">Custom Reason codes</a></dd>

                <dd><a id="hotel-preferences" href="/site/travelmanagement/travelpolicy/HotelDisplayPreferencePage">Display preferences</a></dd>

                <dd><a id="supplier-policy" href="/app?page=SupplierPolicy&amp;service=page">Supplier Policy</a></dd>

                <dd><a id="flight-display" href="/app?page=InfluenceOnDisplay&amp;service=page">Flight results display</a></dd>

                <dt>User Management</dt>

                <dd><a id="user-creation" href="/app?page=CreateUser&amp;service=external">Create User</a></dd>

                <dd><a id="user-search" href="/app?page=SearchUser&amp;service=external">User Management</a></dd>

              </dl>
              <dl class="site-navigation-tooltip multi-list ">
                <dt>Company Management</dt>

                <dd><a id="communication" href="/app?page=ProductCommunicationPage&amp;service=page">Communication</a></dd>

                <dd><a id="customization" href="/app?page=Customisation&amp;service=page">Company Management</a></dd>

                <dd><a id="company-address" href="/app?page=CompanyAddress&amp;service=page">Company address list</a></dd>

                <dd><a id="geographic-msg" href="/mvc/companyManagement/springControllers/geographicMessages">Geographic messages</a></dd>

                <dd><a id="cost-center" href="/app?page=CostCenters&amp;service=page">Cost Centre(s)</a></dd>

                <dt>Reporting</dt>

                <dd><a id="reporting" href="/app?page=GlobalReporting&amp;service=page">Reports</a></dd>

                <dd><a id="trav-tracking" href="/site/travelmanagement/reporting/travellertrackingpage">Traveller Tracking</a></dd>

              </dl>

            </div>
          </div>
        </li>


        <li>
          <a id="primary-nav-admin" href="#" data-control="tooltip" data-content-id="admin-menu" class="agent-only" data-js-theme="menu">Admin</a>
          <div id="admin-menu" class="visuallyhidden">
            <ul class="site-navigation-tooltip list">

              <li>
                <a id="incident-guidelines" href="/app?page=HelpPopup&amp;service=external&amp;sp=Sother&amp;sp=1&amp;sp=S125.jsp" class="medium">Incident Guidelines</a>
              </li>

              <li>
                <a id="new-incident" href="/app?component=%24BaseTemplate.%24HelpComponent.%24CustomerCareComponent.%24DirectLink_0&amp;page=Welcome&amp;service=direct&amp;session=T" class="medium">Declare an incident</a>
              </li>

              <li>
                <a id="billback" href="/mvc/billback/airlcc/index" class="medium">Billback </a>
              </li>

            </ul>
          </div>
        </li>


      </ul>
      <div class="col col3">
        <!-- data-pos-offset to be kept in sync with Tooltip's "menu" theme -->
        <a id="primary-nav-account" href="#" class="last nav-item" data-control="tooltip" data-content-id="account-menu" data-pos="bc" data-prevent-flip="true">
          <div class="left">
            <div>Ben Wyatt</div>
            <div class="secondary">Pawnee Dept. of Parks and Rec...</div>
          </div>
          <i class="icon icon-toggle180"></i>
        </a>
        <div id="account-menu" class="visuallyhidden">
          <div class="user-control-bar cf">
            <div id="user-menu-username" class="left secondary">
              <div id="user-name">
                <b>Mr. Laurent Greter</b>
                <span>(FR)</span>
              </div>
              <div id="company-name">Starbucks North America Inc.</div>
            </div>
            <div class="secondary right">
              <a id="user-profile" href="/app?page=MyProfile&amp;service=page">Profile</a>
            </div>
          </div>

          <ul id="user-menu-profiles">

            <li class="user-menu-profile"><span>P&amp;G Canada</span><a id="60004" href="https://www.egencia.ca/pub/agent.dll?qscr=susr&amp;tuid=4992513">Switch User</a></li>

            <li class="user-menu-profile"><span>Proctor &amp; Gamble South America HQ</span><a id="60004" href="https://www.egencia.ca/pub/agent.dll?qscr=susr&amp;tuid=4992513">Switch User</a></li>

            <li class="user-menu-profile"><span>P&amp;G</span><a id="60000" href="https://www.egencia.com/pub/agent.dll?qscr=susr&amp;tuid=4992513">Switch User</a></li>

          </ul>

          <div class="cf">

            <div class="input-group select left ">
              <select id="locale-chooser" name="egencia_locale">

                <option value="zh_CN">Chinese</option>

                <option value="en_CN" selected="">English</option>

              </select>
              <div class="input-message"></div>
            </div>


            <a id="" href="" class="btn btn-no-margin btn-action btn-small right">
              <span class="btn-label">Logout</span>
            </a>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="site-content site-content-small-screen">
  <div class="row">
    <div class="col col-3">
      <div class="box">
        <div class="map" id='gmap_canvas'></div>
        <h5 class="align-center"><i>Approx. 30min to City Center</i></h5>
      </div>
      <br/>
      <script type='text/javascript'>
                    function init_map(){var myOptions = {
                      zoom:8,
                      center:new google.maps.LatLng(49.0096906,2.5457358),
                      mapTypeId: google.maps.MapTypeId.ROADMAP};
                                        map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
                                        marker = new google.maps.Marker({
                                          map: map,
                                          position: new google.maps.LatLng(49.0096906,2.5457358)});
                                        google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});
                                        infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);
                  </script>
      <section>
        <h5 class="sub-header">Airlines</h5>
        <div id="div-search-result-filter-marketing-carriers" class="input-group">
          <dl>
            <dd>
              <div class="right">$432</div>
              <input id="checkbox-search-result-marketing-carriers-0" type="checkbox" name="checkbox-search-result-marketing-carriers-groups" value="AC">
              <label for="checkbox-search-result-marketing-carriers-0">Air Canada</label>
            </dd>
            <dd>
              <div class="right">$145</div>
              <input id="checkbox-search-result-marketing-carriers-1" type="checkbox" name="checkbox-search-result-marketing-carriers-groups" value="AF">
              <label for="checkbox-search-result-marketing-carriers-1">Air France</label>
            </dd>
            <dd>
              <div class="right">$180</div>
              <input id="checkbox-search-result-marketing-carriers-2" type="checkbox" name="checkbox-search-result-marketing-carriers-groups" value="AA">
              <label for="checkbox-search-result-marketing-carriers-2">American Airlines</label>
            </dd>
            <dd>
              <div class="right">$350</div>
              <input id="checkbox-search-result-marketing-carriers-3" type="checkbox" name="checkbox-search-result-marketing-carriers-groups" value="BA">
              <label for="checkbox-search-result-marketing-carriers-3">British Airways</label>
            </dd>
            <dd>
              <div class="right">$225</div>
              <input id="checkbox-search-result-marketing-carriers-4" type="checkbox" name="checkbox-search-result-marketing-carriers-groups" value="DL">
              <label for="checkbox-search-result-marketing-carriers-4">Delta</label>
            </dd>
            <dd>
              <div class="right">$400</div>
              <input id="checkbox-search-result-marketing-carriers-5" type="checkbox" name="checkbox-search-result-marketing-carriers-groups" value="AY">
              <label for="checkbox-search-result-marketing-carriers-5">Finnair</label>
            </dd>
            <dd>
              <div class="right">$336</div>
              <input id="checkbox-search-result-marketing-carriers-6" type="checkbox" name="checkbox-search-result-marketing-carriers-groups" value="IB">
              <label for="checkbox-search-result-marketing-carriers-6">Iberia</label>
            </dd>
            <dd>
              <div class="right">$154</div>
              <input id="checkbox-search-result-marketing-carriers-7" type="checkbox" name="checkbox-search-result-marketing-carriers-groups" value="LH">
              <label for="checkbox-search-result-marketing-carriers-7">Lufthansa</label>
            </dd>

          </dl>
        </div>
      </section>
      <section>
        <h5 class="sub-header">Connection Airport</h5>
        <div id="div-search-result-filter-connecting-airports" class="input-group">
          <dl>
            <dd>
              <div class="right">$225</div>
              <input id="check-search-result-filter-connecting-airports-0" type="checkbox" name="check-search-result-filter-connecting-airports-groups" value="CLT">
              <label for="check-search-result-filter-connecting-airports-0">Charlotte (CLT)</label>
            </dd>
            <dd>
              <div class="right">$225</div>
              <input id="check-search-result-filter-connecting-airports-1" type="checkbox" name="check-search-result-filter-connecting-airports-groups" value="DFW">
              <label for="check-search-result-filter-connecting-airports-1">Dallas (DFW)</label>
            </dd>
            <dd>
              <div class="right">$225</div>
              <input id="check-search-result-filter-connecting-airports-2" type="checkbox" name="check-search-result-filter-connecting-airports-groups" value="FRA">
              <label for="check-search-result-filter-connecting-airports-2">Frankfurt (FRA)</label>
            </dd>
            <dd>
              <div class="right">$225</div>
              <input id="check-search-result-filter-connecting-airports-3" type="checkbox" name="check-search-result-filter-connecting-airports-groups" value="JFK">
              <label for="check-search-result-filter-connecting-airports-3">New York (JFK)</label>
            </dd>
            <dd>
              <div class="right">$225</div>
              <input id="check-search-result-filter-connecting-airports-4" type="checkbox" name="check-search-result-filter-connecting-airports-groups" value="LHR">
              <label for="check-search-result-filter-connecting-airports-4">London (LHR)</label>
            </dd>
            <dd>
              <div class="right">$225</div>
              <input id="check-search-result-filter-connecting-airports-5" type="checkbox" name="check-search-result-filter-connecting-airports-groups" value="MIA">
              <label for="check-search-result-filter-connecting-airports-5">Miami (MIA)</label>
            </dd>
            <dd>
              <div class="right">$225</div>
              <input id="check-search-result-filter-connecting-airports-6" type="checkbox" name="check-search-result-filter-connecting-airports-groups" value="ORD">
              <label for="check-search-result-filter-connecting-airports-6">Chicago (ORD)</label>
            </dd>
            <dd>
              <div class="right">$225</div>
              <input id="check-search-result-filter-connecting-airports-7" type="checkbox" name="check-search-result-filter-connecting-airports-groups" value="PHL">
              <label for="check-search-result-filter-connecting-airports-7">Philadelphia (PHL)</label>
            </dd>
            <dd>
              <div class="right">$225</div>
              <input id="check-search-result-filter-connecting-airports-8" type="checkbox" name="check-search-result-filter-connecting-airports-groups" value="SFO">
              <label for="check-search-result-filter-connecting-airports-8">San Francisco (SFO)</label>
            </dd>
            <dd>
              <div class="right">$225</div>
              <input id="check-search-result-filter-connecting-airports-9" type="checkbox" name="check-search-result-filter-connecting-airports-groups" value="YUL">
              <label for="check-search-result-filter-connecting-airports-9">Montreal (YUL)</label>
            </dd>
            <dd>
              <div class="right">$225</div>
              <input id="check-search-result-filter-connecting-airports-10" type="checkbox" name="check-search-result-filter-connecting-airports-groups" value="YVR">
              <label for="check-search-result-filter-connecting-airports-10">Vancouver (YVR)</label>
            </dd>
          </dl>
        </div>
      </section>
    </div>
    <div class="col col-9">
      <div class="sticky">
        <div class="box">
        <div class="box-padded">
          <div id="search-bar" data-control="search-bar">
            <div id="search-bar-display">
              <div class="right">
                <button id="search-bar-change-search" class="btn btn-text-action btn-secondary btn-no-margin">
                  <span id="search-bar-change-search-btn" class="btn-label">Change Search</span>
                  <span id="search-bar-change-search-icon" class="btn-label"><i class="icon icon-searchalt"></i></span>
                </button>
              </div>
              <div id="search-bar-responsive-wrap-outer" class="text">
                <h2 id="search-bar-content-primary">Location A<i class="icon icon-arrow90 text-embedded-icon"></i>Location B</h2>
                <div id="search-bar-responsive-wrap-inner">
                  <h5 id="search-bar-content-secondary" class="text-shade1">Date A, Time A - Date B, Time B</h5>
                  <h5 id="search-bar-content-tertiary" class="text-shade2">Tertiary Content</h5>
                </div>
              </div>
            </div>
            <div id="search-bar-edit" class="hidden">
              <form class="form-group">
                <div class="input-group">
                  <label>primary</label>
                  <input type="text">
                </div>
                <div class="input-group">
                  <label>secondary</label>
                  <input type="text">
                </div>
                <div class="input-group">
                  <label>tertiary</label>
                  <input type="text">
                </div>
                <div class="input-group">
                  <label></label>
                  <button id="submit-change" class="btn btn-action btn-secondary btn-no-margin">
                    <span class="btn-label">Search</span>
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      </div>
      <br/>
      <div class="box">
        <div class="selected-header">
          <h5><b>Depart</b> Mon, Mar 21
          <div class="right">
            <i class="icon icon-close"></i>
          </div>
          </h5>
        </div>
        <div class="box-padded">
          <div class="left logo">
            <img src="https://wwwegenciaeu.int-maui.sb.karmalab.net/images/logos/smAF.gif">
          </div>
          <div class="results-wrapper text">
            <div class="col col-12">
              <h4 class="bold">12:35 <i class="icon icon-arrow90 small"></i> 4:40p</h4>
              <p class="truncate">Paris (CDG) – London (LHR)</p>
              <p class="truncate text-shade2">Air France  443 |  Economy  |  Boeing 737-800  |  Baggage Fees</p>
              <br/>
              <div class="truncate">40 min layover in London (LHR)</div>
            </div>
          </div>
        </div>
        <div class="box-padded">
          <div class="left logo">
            <img src="https://wwwegenciaeu.int-maui.sb.karmalab.net/images/logos/smBA.gif">
          </div>
          <div class="results-wrapper text">
            <div class="col col-12">
              <h4 class="bold">4:35p <i class="icon icon-arrow90 small"></i> 12:24a </h4>
              <p class="truncate">London (LHR) – Seattle (SEA)</p>
              <p class="truncate text-shade2">Air France  443 |  Economy  |  Boeing 737-800  |  Baggage Fees</p>
            </div>
          </div>
        </div>
      </div>
      <br/>
      <h3><i class="icon icon-arrow135"></i> Select an outbound flight</h3>
      <div class="box">
        <div class="box-padded box-section">
          <div class="left logo">
            <img src="https://wwwegenciaeu.int-maui.sb.karmalab.net/images/logos/smAF.gif">
          </div>
          <div class="results-wrapper">
            <div class="col col-4 col-medium-screen-12 text">
              <h3>10:20a <i class="icon icon-arrow90 small"></i> 4:40p</h3>
              <p class="truncate text-shade2">Alaska Airlines, Horizon Airlines</p>
            </div>
            <div class="col col-3 col-medium-screen-4 col-small-screen-6 text">
              <h5>5h 22m</h5>
              <p class="truncate text-shade2">SEA – PDX</p>
            </div>
            <div class="col col-2 col-medium-screen-4 col-small-screen-6 text">
              <h5>2 stops</h5>
              <p class="truncate text-shade2">SEA,SFO</p>
            </div>
            <div class="col col-3 col-medium-screen-4 text align-center align-right-small-screen">
              <h3>$145</h3>
              <p class="truncate secondary text-shade2">Round-trip</p>
            </div>
<!--             <div class="col col-12 text">
              <p class="truncate text-shade2 details-link"><a href="">Flight details</a></p>
            </div> -->
          </div>
        </div>
        <div class="box-padded box-section">
          <div class="left logo">
            <img src="https://wwwegenciaeu.int-maui.sb.karmalab.net/images/logos/smAA.gif">
          </div>
          <div class="results-wrapper">
            <div class="col col-4 col-medium-screen-12 text">
              
              <h3>10:20a <i class="icon icon-arrow90 small"></i> 4:40p</h3>
              <p class="truncate text-shade2"><i class="icon icon-briefcasealt"></i> Alaska Airlines, Horizon Airlines</p>
            </div>
            
            <div class="col col-3 col-medium-screen-4 col-small-screen-6 text">
              
              <h5>5h 22m</h5>
              <p class="truncate text-shade2">SEA – PDX</p>
              
            </div>
            <div class="col col-2 col-medium-screen-4 col-small-screen-6 text">
              <h5>1 stop</h5>
              <p class="truncate text-shade2">2h 44m SFO</p>
            </div>
            <div class="col col-3 col-medium-screen-4 align-center text">
              
              <p class="truncate secondary text-shade2">No pricing avaialbe</p>
            </div>
            <div class="col col-12 text">
              <p class="truncate text-shade2 details-link"><a href="">Flight details</a></p>
            </div>
          </div>
        </div>
        <div class="box-padded box-section">
          <div class="left logo">
            <img src="https://wwwegenciaeu.int-maui.sb.karmalab.net/images/logos/smDL.gif">
          </div>
          <div class="results-wrapper">
            <div class="col col-4 col-medium-screen-12 text">
              <h3>10:20a <i class="icon icon-arrow90 small"></i> 4:40p</h3>
              <p class="truncate text-shade2">Alaska Airlines, Horizon Airlines</p>
            </div>
            <div class="col col-3 col-medium-screen-4 col-small-screen-6 text">
              <h5>5h 22m</h5>
              <p class="truncate text-shade2">SEA – PDX</p>
            </div>
            <div class="col col-2 col-medium-screen-4 col-small-screen-6 text">
              <h5>1 stop</h5>
              <p class="truncate text-shade2">2h 44m SFO</p>
            </div>
            <div class="col col-3 col-medium-screen-4 text align-center">
              <h3>$145</h3>
              <p class="truncate secondary text-shade2">Round-trip</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
            
          
!
            
              .selected-header {
  padding: 6px 18px 0 18px; 
}

.results-wrapper {
  overflow: hidden;
}
.logo {
  width: 12%;
  text-align: center;
}

.box-section {
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  transition: all 150ms;
  &:last-of-type {
    border-bottom: none;
  }
  .details-link {
    opacity: 0;
  }
  &:hover {
    cursor: pointer;
    z-index: 10;
    margin-left: -6px;
    margin-right: -6px;
    box-shadow: 0 1px 6px rgba(0,0,0,.2);
    .details-link {
      opacity: 1;
    }
  }
}

.map {
  height:150px;
  width:100%;
}
#gmap_canvas {
  max-width:none!important;
  background:none!important
}


@media only screen and (max-width: 540px) and (min-width: 0px) {
  .align-right-small-screen {
    text-align: right !important;
  }
}

            
          
!
999px
Loading ..................

Console