10 Replies Latest reply on Aug 19, 2016 12:32 PM by brandond63742483

    Footer whitespace appears after calling getPicture

    brandond63742483

      The issue does not appear in a new project until getPicture is called and the application returns from the camera. The size in pixels of the issue area at the bottom of the screen corresponds to the size of the status bar. Once the issue is triggered for the first time in the project in PhoneGap, the issue exists for any other device opening the application for the first time without calling getPicture. Even clearing cache or restarting device or server does not get rid of the whitespace once caused.

        • 1. Re: Footer whitespace appears after calling getPicture
          VectorP Level 4

          You didn't say anything about the device and the OS.

          May I assume this happens in iOS, only? If so, I would believe that you didn't include the splashscreen and statusbar plugins (correctly) and/or you didn't specify the correct splashscreen file and -dimensions.

           

          If this also happens in other Operating Systems, then it might have something to do with your viewport settings in the META html element.

           

          Without seeing your config, your splashscreen files and your html/css, it's just a matter of guessing.

          • 2. Re: Footer whitespace appears after calling getPicture
            simon.macdonald Adobe Employee

            Can you give us some more details, for instance:

             

            Reproduce Scenario (including but not limited to)

             

            Steps to Reproduce

             

            Platform and Version (eg. Android 5.0 or iOS 9.2.1)

             

            (Android) What device vendor (e.g. Samsung, HTC, Sony...)

             

            Cordova CLI version and cordova platform version

             

            cordova --version

            cordova platforms

            Plugin version

             

            cordova plugins

            • 3. Re: Footer whitespace appears after calling getPicture
              brandond63742483 Level 1

              This pertains to iOS, 9.3.3 and 9.3.4. As for replication, I'm not sure how else to describe other than what I mentioned above.

              screenshot.png

              • 4. Re: Footer whitespace appears after calling getPicture
                VectorP Level 4

                I would guess that the proper splashscreen images are missing. But you see to refuse to give the proper information.

                - what devices

                - what splash images do you have (file type and exact dimensions)

                - how did you configure (in config.xml)

                • 5. Re: Footer whitespace appears after calling getPicture
                  brandond63742483 Level 1

                  Certainly not a refusal. Devices are iPhone 6, iPad Air and iPad 2. Apparently I cannot attach these files in this forum, so here are copy/pastes:

                   

                  config.xml:

                   

                  <widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.phonegap.helloworld" version="1.0.0">

                    <name>Equipment Images</name>

                    <description>Equipment Images</description>

                    <author href="http://phonegap.com" email="support@phonegap.com">PhoneGap Team</author>

                    <content src="index.html"/>

                    <preference name="DisallowOverscroll" value="true"/>

                    <preference name="android-minSdkVersion" value="14"/>

                    <plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1"/>

                    <plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1"/>

                    <plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0"/>

                    <plugin name="cordova-plugin-console" source="npm" spec="~1.0.2"/>

                    <plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1"/>

                    <plugin name="cordova-plugin-device" source="npm" spec="~1.1.1"/>

                    <plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0"/>

                    <plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2"/>

                    <plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0"/>

                    <plugin name="cordova-plugin-file" source="npm" spec="~4.1.1"/>

                    <plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0"/>

                    <plugin name="cordova-plugin-geolocation" source="npm" spec="~2.1.0"/>

                    <plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3"/>

                    <plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0"/>

                    <plugin name="cordova-plugin-media" source="npm" spec="~2.2.0"/>

                    <plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0"/>

                    <plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1"/>

                    <plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2"/>

                    <plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0"/>

                    <plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1"/>

                    <icon src="icon.png"/>

                    <platform name="android">

                      <icon src="www/res/icon/android/drawable-ldpi-icon.png" density="ldpi"/>

                      <icon src="www/res/icon/android/drawable-mdpi-icon.png" density="mdpi"/>

                      <icon src="www/res/icon/android/drawable-hdpi-icon.png" density="hdpi"/>

                      <icon src="www/res/icon/android/drawable-xhdpi-icon.png" density="xhdpi"/>

                      <icon src="www/res/icon/android/drawable-xxhdpi-icon.png" density="xxhdpi"/>

                      <icon src="www/res/icon/android/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>

                      <splash src="www/res/screen/android/drawable-land-ldpi-screen.png" density="land-ldpi"/>

                      <splash src="www/res/screen/android/drawable-land-mdpi-screen.png" density="land-mdpi"/>

                      <splash src="www/res/screen/android/drawable-land-hdpi-screen.png" density="land-hdpi"/>

                      <splash src="www/res/screen/android/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>

                      <splash src="www/res/screen/android/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>

                      <splash src="www/res/screen/android/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>

                      <splash src="www/res/screen/android/drawable-port-ldpi-screen.png" density="port-ldpi"/>

                      <splash src="www/res/screen/android/drawable-port-mdpi-screen.png" density="port-mdpi"/>

                      <splash src="www/res/screen/android/drawable-port-hdpi-screen.png" density="port-hdpi"/>

                      <splash src="www/res/screen/android/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>

                      <splash src="www/res/screen/android/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>

                      <splash src="www/res/screen/android/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>

                    </platform>

                    <platform name="ios">

                      <icon src="www/res/icon/ios/icon.png" platform="ios" width="57" height="57"/>

                      <icon src="www/res/icon/ios/icon@2x.png" platform="ios" width="114" height="114"/>

                      <icon src="www/res/icon/ios/icon-40.png" platform="ios" width="40" height="40"/>

                      <icon src="www/res/icon/ios/icon-40@2x.png" platform="ios" width="80" height="80"/>

                      <icon src="www/res/icon/ios/icon-50.png" platform="ios" width="50" height="50"/>

                      <icon src="www/res/icon/ios/icon-50@2x.png" platform="ios" width="100" height="100"/>

                      <icon src="www/res/icon/ios/icon-60.png" platform="ios" width="60" height="60"/>

                      <icon src="www/res/icon/ios/icon-60@2x.png" platform="ios" width="120" height="120"/>

                      <icon src="www/res/icon/ios/icon-60@3x.png" platform="ios" width="180" height="180"/>

                      <icon src="www/res/icon/ios/icon-72.png" platform="ios" width="72" height="72"/>

                      <icon src="www/res/icon/ios/icon-72@2x.png" platform="ios" width="144" height="144"/>

                      <icon src="www/res/icon/ios/icon-76.png" platform="ios" width="76" height="76"/>

                      <icon src="www/res/icon/ios/icon-76@2x.png" platform="ios" width="152" height="152"/>

                      <icon src="www/res/icon/ios/icon-small.png" platform="ios" width="29" height="29"/>

                      <icon src="www/res/icon/ios/icon-small@2x.png" platform="ios" width="58" height="58"/>

                      <icon src="www/res/icon/ios/icon-small@3x.png" platform="ios" width="87" height="87"/>

                      <splash src="www/res/screen/ios/Default-568h@2x~iphone.png" platform="ios" width="640" height="1136"/>

                      <splash src="www/res/screen/ios/Default-667h.png" platform="ios" width="750" height="1334"/>

                      <splash src="www/res/screen/ios/Default-736h.png" platform="ios" width="1242" height="2208"/>

                      <splash src="www/res/screen/ios/Default-Landscape-736h.png" platform="ios" width="2208" height="1242"/>

                      <splash src="www/res/screen/ios/Default-Landscape@2x~ipad.png" platform="ios" width="2048" height="1536"/>

                      <splash src="www/res/screen/ios/Default-Landscape~ipad.png" platform="ios" width="1024" height="768"/>

                      <splash src="www/res/screen/ios/Default-Portrait@2x~ipad.png" platform="ios" width="1536" height="2048"/>

                      <splash src="www/res/screen/ios/Default-Portrait~ipad.png" platform="ios" width="768" height="1024"/>

                      <splash src="www/res/screen/ios/Default@2x~iphone.png" platform="ios" width="640" height="960"/>

                      <splash src="www/res/screen/ios/Default~iphone.png" platform="ios" width="320" height="480"/>

                    </platform>

                    <platform name="wp8">

                      <icon src="www/res/icon/wp8/ApplicationIcon.png" platform="wp8" width="99" height="99"/>

                      <icon src="www/res/icon/wp8/Background.png" platform="wp8" width="159" height="159"/>

                      <splash src="www/res/screen/wp8/screen-portrait.jpg" platform="wp8" width="768" height="1280"/>

                    </platform>

                    <platform name="windows">

                      <icon src="www/res/icon/windows/Square150x150Logo.scale-100.png" platform="windows" width="150" height="150"/>

                      <icon src="www/res/icon/windows/Square30x30Logo.scale-100.png" platform="windows" width="30" height="30"/>

                      <icon src="www/res/icon/windows/StoreLogo.scale-100.png" platform="windows" width="50" height="50"/>

                      <splash src="www/res/screen/windows/SplashScreen.scale-100.png" platform="windows" width="620" height="300"/>

                      <icon src="www/res/icon/windows/StoreLogo.scale-240.png" platform="windows" width="120" height="120"/>

                      <icon src="www/res/icon/windows/Square44x44Logo.scale-100.png" platform="windows" width="44" height="44"/>

                      <icon src="www/res/icon/windows/Square44x44Logo.scale-240.png" platform="windows" width="106" height="106"/>

                      <icon src="www/res/icon/windows/Square70x70Logo.scale-100.png" platform="windows" width="70" height="70"/>

                      <icon src="www/res/icon/windows/Square71x71Logo.scale-100.png" platform="windows" width="71" height="71"/>

                      <icon src="www/res/icon/windows/Square71x71Logo.scale-240.png" platform="windows" width="170" height="170"/>

                      <icon src="www/res/icon/windows/Square150x150Logo.scale-240.png" platform="windows" width="360" height="360"/>

                      <icon src="www/res/icon/windows/Square310x310Logo.scale-100.png" platform="windows" width="310" height="310"/>

                      <icon src="www/res/icon/windows/Wide310x150Logo.scale-100.png" platform="windows" width="310" height="150"/>

                      <icon src="www/res/icon/windows/Wide310x150Logo.scale-240.png" platform="windows" width="744" height="360"/>

                      <splash src="www/res/screen/windows/SplashScreenPhone.scale-240.png" platform="windows" width="1152" height="1920"/>

                    </platform>

                    <access origin="*"/>

                    <allow-intent href="http://*/*"/>

                    <allow-intent href="https://*/*"/>

                    <allow-intent href="tel:*"/>

                    <allow-intent href="sms:*"/>

                    <allow-intent href="mailto:*"/>

                    <allow-intent href="geo:*"/>

                    <platform name="android">

                      <allow-intent href="market:*"/>

                    </platform>

                    <platform name="ios">

                      <allow-intent href="itms:*"/>

                      <allow-intent href="itms-apps:*"/>

                    </platform>

                  </widget>

                   

                  index.html:

                   

                  <!DOCTYPE html>
                  <html>

                  <head>
                      <meta charset="utf-8" />
                      <meta name="format-detection" content="telephone=no" />
                      <meta name="msapplication-tap-highlight" content="no" />
                      <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
                       <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
                    

                      <link rel="stylesheet" type="text/css" href="css/index.css" />
                      <link rel="stylesheet" type="text/css" href="profoundui/profoundui.css" />
                      <link rel="stylesheet" type="text/css" href="profoundui/sbmobile.css" />
                      <script type="text/javascript" src="profoundui/runtime.js"> </script>
                      <script type="text/javascript" src="profoundui/app.js"> </script>

                   

                      <title>Equipment Images</title>
                  </head>

                  <body>
                      <div id="pui"></div>
                      <div class="app">
                          <h1>PhoneGap</h1>
                          <div id="deviceready" class="blink">
                              <p class="event listening">Connecting to Device</p>
                              <p class="event received">Device is Ready</p>
                          </div>
                      </div>
                      <script type="text/javascript" src="cordova.js"></script>
                      <script type="text/javascript" src="js/index.js"></script>
                      <script type="text/javascript">
                          app.initialize();
                      </script>
                  </body>

                  </html>

                   

                  index.css:

                   

                  * {
                      -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
                  }

                  body {
                      -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
                      -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
                      -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
                      background-color:#E4E4E4;
                      background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
                      background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
                      background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
                      background-image:-webkit-gradient(
                          linear,
                          left top,
                          left bottom,
                          color-stop(0, #A7A7A7),
                          color-stop(0.51, #E4E4E4)
                      );
                      background-attachment:fixed;
                      font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
                      font-size:12px;
                      height:100%;
                      margin:0px;
                      padding:0px;
                      text-transform:uppercase;
                      width:100%;
                  }

                  /* Portrait layout (default) */
                  .app {
                      background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
                      position:absolute;             /* position in the center of the screen */
                      left:50%;
                      top:50%;
                      height:50px;                   /* text area height */
                      width:225px;                   /* text area width */
                      text-align:center;
                      padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
                      margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
                                                     /* offset horizontal: half of text area width */
                  }

                  /* Landscape layout (with min-width) */
                  @media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
                      .app {
                          background-position:left center;
                          padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
                          margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                                        /* offset horizontal: half of image width and text area width */
                      }
                  }

                  h1 {
                      font-size:24px;
                      font-weight:normal;
                      margin:0px;
                      overflow:visible;
                      padding:0px;
                      text-align:center;
                  }

                  .event {
                      border-radius:4px;
                      -webkit-border-radius:4px;
                      color:#FFFFFF;
                      font-size:12px;
                      margin:0px 30px;
                      padding:2px 0px;
                  }

                  .event.listening {
                      background-color:#333333;
                      display:block;
                  }

                  .event.received {
                      background-color:#4B946A;
                      display:none;
                  }

                  @keyframes fade {
                      from { opacity: 1.0; }
                      50% { opacity: 0.4; }
                      to { opacity: 1.0; }
                  }

                  @-webkit-keyframes fade {
                      from { opacity: 1.0; }
                      50% { opacity: 0.4; }
                      to { opacity: 1.0; }
                  }

                  .blink {
                      animation:fade 3000ms infinite;
                      -webkit-animation:fade 3000ms infinite;
                  }

                   

                  profoundui.css:

                   

                  #pui {
                    position: relative;
                  }

                  /* Push Button */
                  INPUT.button {
                  color: #335588;
                  font-weight: bold;
                  font-size: 12px;
                  cursor: default;
                  }

                  /* Calendar Classes */
                  .calendar {
                  font-size:11px;
                  font-weight:bold;
                  cursor:pointer;
                  }
                  .brndrow1 {
                  background-color: #5588BB;
                  }
                  .brndrow1 A {
                    border: 0px;
                  }
                  .brndrow1 A:hover {
                    border: 0px;
                  }

                  .brndrow2
                  {
                  background-color: #5588BB;
                  }

                   

                  body {
                    margin: 0px 0px 0px 0px;
                    text-align: center;
                    vertical-align: middle;
                    background-repeat: repeat-y;
                    background-color: #FFFFFF;
                    font-family: Trebuchet MS;
                    font-size: 14px;
                    overflow: auto;
                    text-transform: none;
                  }

                  A {
                    color: #0066cc;
                  }

                  div {
                    padding: 1px;
                    z-index: 10;
                    text-align: left;
                    white-space: nowrap;
                    outline: none;
                  }

                  img {
                    z-index: 10;
                  }

                   

                  .input {
                    font-family: Monospace;
                    font-size: 13px;
                    z-index: 20;   
                    margin: 0;
                    padding-left: 0;
                    padding-right: 1;
                    padding-top: 0;
                    padding-bottom: 0;
                    border: 1px solid #7eadd9;
                    background-image: url(/profoundui/proddata/images/input-background.gif);
                    background-repeat: repeat-x;
                  }

                  INPUT.enhanced-input {
                    font-family: Consolas, Monospace;
                    font-size: 14px;
                    z-index: 20;   
                    margin: 0;
                    padding-left: 0;
                    padding-right: 1;
                    padding-top: 0;
                    padding-bottom: 0;
                    border: 1px solid #7eadd9;
                    background-image: url(/profoundui/proddata/images/input-background.gif);
                    background-repeat: repeat-x;
                  }

                  SELECT.enhanced-input {
                    font-family: Sans-Serif;
                    font-size: 13px;
                    z-index: 20;   
                    margin: 0;
                    padding-left: 0;
                    padding-right: 1;
                    padding-top: 0;
                    padding-bottom: 0;
                    border: 1px solid #7eadd9;
                    background-image: url(/profoundui/proddata/images/input-background.gif);
                    background-repeat: repeat-x;
                  }

                  INPUT.hybrid-input {
                    font-family: Consolas, Monospace;
                    font-size: 14px;
                    z-index: 20;   
                    margin: 0;
                    padding-left: 0;
                    padding-right: 1;
                    padding-top: 0;
                    padding-bottom: 0;
                    border: 1px solid #7eadd9;
                    background-image: url(/profoundui/proddata/images/input-background.gif);
                    background-repeat: repeat-x;
                  }

                  SELECT.hybrid-input {
                    font-family: Sans-Serif;
                    font-size: 12px;
                    z-index: 20;   
                    margin: 0;
                    padding-left: 0;
                    padding-right: 1;
                    padding-top: 0;
                    padding-bottom: 0;
                    border: 1px solid #7eadd9;
                    background-image: url(/profoundui/proddata/images/input-background.gif);
                    background-repeat: repeat-x;
                  }

                  .focusInp {
                  background: #ffffdd;
                    font-weight: bold;
                    font-family: Monospace;
                    font-size: 13px;
                    z-index: 20;
                    margin: 0;
                    padding-left: 0;
                    padding-right: 1;
                    padding-top: 0;
                    padding-bottom: 0;
                    border: 1px solid #7eadd9;
                    background-repeat: repeat-x;
                  }

                   

                  .label {
                    text-align: right;
                    font-weight: bold;
                  }

                  .heading {
                    color: #105184;
                    font-weight: bold;
                    font-size: 20px
                  }

                  SELECT {
                    z-index: 20;
                  }

                  BUTTON {
                    z-index: 20;
                  }

                  INPUT {
                    z-index: 20;
                  }

                  TEXTAREA {
                    z-index: 20;
                    resize: none;
                    white-space: pre-wrap; 
                  }

                  FieldSet {
                    margin: 0;
                    padding: 0;
                  }

                   

                  .autocomplete-item {

                  border-style: solid;
                  border-width: 1px;
                  border-color: #FFFFFF rgb(255, 255, 255) rgb(238, 238, 238);
                  font-size: 10px;
                  font-family: tahoma, arial, helvetica, sans-serif;
                  color: #555555;
                  background-color: #FFFFFF;
                  cursor: pointer;
                  margin: 0px;
                  padding: 4px 4px 4px 4px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-align: left;

                  }

                  .autocomplete-selected {

                  background-color: #DFE8F6;
                  border: 1px dotted #A3BAE9 !important;

                  }

                  .autocomplete-col {

                  overflow: hidden;
                  white-space: nowrap;

                  }

                   

                  .link1 A {
                    font-family: Verdana;
                    color: #009999;
                    text-decoration: none;
                    border-bottom: 1px dotted #888888;
                  }
                  .link1 A:hover {
                    border: 1px solid #cccccc;
                  }

                  .link2 A {
                    font-family: Arial;
                    text-decoration: none;
                    border-bottom: 1px dotted #c1b6b6; 
                  }
                  .link2 A:hover {
                    border: 1px solid #999999;
                    font-weight: bold;
                    font-size: 15px;
                    color: white;
                    background-color: #5588BB;
                  }

                  .link3 A {
                    text-decoration: none;
                    border-bottom: 1px dotted #c1b6b6;
                    color: #333333;
                  }
                  .link3 A:hover {
                    border: 2px solid #c23c00;
                    background-color: #ffd7b2;
                  }

                  .link4 A {
                    text-decoration: none;
                  }
                  .link4 A:hover {
                    text-decoration: underline;
                  }

                  .link5 A {
                    font-weight: bold;
                    text-decoration: none;
                  }
                  .link5 A:hover { 
                    border-top: 1px dashed #4866d5;
                    border-bottom: 1px dashed #4866d5;
                  }

                  .link6 A {
                    font-family: Arial;
                    font-size: 14px;
                    color: blue;
                    text-decoration: none;
                  }
                  .link6 A:hover { 
                    font-weight: bold;
                  }

                  .invalid {
                    background-image: url(/profoundui/proddata/images/invalid-underline.gif);
                    background-repeat: repeat-x;
                    background-position: bottom;
                    border-color: #924949;
                  }

                  .grid-mask {
                    z-index: 250;
                    background-color: #CCCCCC;
                    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
                    opacity: 0.3;
                   
                  }

                  .grid-hline, .grid-vline {

                    border-color: #ccccff;

                  }

                  .paging-bar {
                    background-image: url('/profoundui/proddata/images/grids/pagingBar.gif');
                    vertical-align: top;
                    font-size: 12px;
                    border: 1px solid #CCCCFF;
                  }

                  .paging-link {
                    color: #0C51CE;
                    cursor: pointer;
                    text-decoration: underline;
                   
                  }

                  .crystal-grid .paging-link {
                  }

                  .paging-link-hover {
                    color: #2C71EE;
                  }

                  .paging-link-disabled {
                    color: #666666;
                    cursor: default;
                    text-decoration: none;
                  }

                  .prev-image-icon {
                    background-image: url('/profoundui/proddata/images/grids/prev.gif');
                    cursor: pointer;
                  }

                  .prev-image-icon-disabled {
                    background-image: url('/profoundui/proddata/images/grids/prev-disabled.gif');
                    cursor: default;
                  }

                  .next-image-icon {
                    background-image: url('/profoundui/proddata/images/grids/next.gif');
                    cursor: pointer;
                  }

                  .next-image-icon-disabled {
                    background-image: url('/profoundui/proddata/images/grids/next-disabled.gif');
                    cursor: default;
                  }

                  .export-image-icon{
                    background-image: url('/profoundui/proddata/images/grids/excel.gif');
                  }

                  .RTL {
                    direction: rtl;
                  }

                   

                  INPUT.PR {
                    border: 0px solid #ffffff;
                    background-image: none;
                    background-color: transparent;
                  }
                  INPUT[type="password"].PR {
                    visibility: hidden;
                  }
                  INPUT.PR-UL {
                    border: 0px solid #ffffff;
                    background-image: none;
                    background-color: transparent;
                    text-decoration: underline;
                  }
                  INPUT[type="password"].PR-UL {
                    visibility: hidden;
                  }

                  INPUT.ND {
                    display: none;
                  }

                  DIV.ND {
                    display: none;
                  }

                  DIV.BLU { color: blue; }
                  INPUT.BLU { color: blue; }

                  DIV.GRN {  }
                  INPUT.GRN { color: #009900; }

                  DIV.PNK { color: fuchsia; }
                  INPUT.PNK { color: fuchsia; }

                  DIV.RED { color: red; }
                  INPUT.RED { color:red; }

                  DIV.TRQ { color: #00BBBB; }
                  INPUT.TRQ { color: #00BBBB; }

                  DIV.WHT { font-weight: bold; color: black; }
                  INPUT.WHT { font-weight: bold; }

                  DIV.YLW { color: #EBA334; font-weight: bold }
                  INPUT.YLW { color: #ff9900; }

                  DIV.RI { background-color: yellow; }
                  INPUT.RI { background-color: yellow; background-image: none; }

                  DIV.HI { font-weight: bold;  }
                  INPUT.HI { font-weight: bold; }

                  DIV.UL { text-decoration: underline }
                  INPUT.UL { text-decoration: none }

                  DIV.BL { color: red; }
                  INPUT.BL { color: red; }

                  /* For file upload widget */
                  div.pui-file-upload {

                  font-family: verdana, sans-serif;
                    border: 1px inset #CCCCCC;
                    overflow-y: auto;
                    overflow-x: hidden;
                    background-color: white;
                    vertical-align: baseline;

                  }

                  div.pui-file-upload div.control-box {

                    padding-left: 5px;
                  font-size: 14px; 

                  }

                  div.pui-file-upload a {

                  color: #3867B1;
                  cursor: pointer;
                  text-decoration: underline;
                  border-style: none;

                  }

                  div.pui-file-upload a:visted {

                  color: #3867B1;

                  }

                  .design div.pui-file-upload a:hover, div.pui-file-upload a:hover {

                    border-style: none;
                    background-color: inherit;
                   
                  }

                  div.pui-file-upload a.control-proxy {

                    display: inline-block;
                    overflow: hidden;
                    position: relative;

                  }

                  div.pui-file-upload a.clear, div.pui-file-upload a.upload {

                    display: inline-block;
                    overflow: hidden;
                    margin-left: 20px;

                  }

                  div.pui-file-upload input.control {

                    position: absolute;
                    top: 0px;
                    left: -900px;
                    margin: 0px;
                    font-size: 70px;
                    opacity: 0;
                    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
                    filter: alpha(opacity=0);
                    cursor: pointer;

                  }

                  div.pui-file-upload div.list-box {

                    margin-top: 10px;
                  font-size: 10px;
                  padding-left: 5px;
                  padding-right: 5px; 

                  }

                  div.pui-file-upload table.list {

                    width: 100%;
                    table-layout: fixed;
                    border-collapse: collapse;

                  }

                  div.pui-file-upload table.list tr.row {

                    height: 23px;
                    width: 100%;

                  }

                  div.pui-file-upload table.list td {

                    border-top: 1px solid #CCCCCC;
                    white-space: nowrap;
                    overflow: hidden;

                  }

                  div.pui-file-upload table.list td.name-col {

                  }

                  div.pui-file-upload table.list td.remove-col {

                    width: 65px;
                    padding-left: 10px;

                  }

                  div.pui-file-upload a.remove {

                  }

                   

                  /* CSS for Simple Grids */
                  .simple-grid {
                    z-index: 9;
                  }
                  .simple-grid .cell {
                    font-family: Verdana;
                    font-size: 13px;
                    text-align: center;
                  }
                  .simple-grid .cell {
                    text-align: center;
                  }
                  .simple-grid .header-cell {
                    font-size: 13px;
                    color: #ffffff;
                    background-color: #6699ff;
                    text-align: center;
                    font-weight: bold;
                  }
                  .simple-grid .header-cell div {
                    text-align: center;
                  }
                  .simple-grid .odd {
                    color: #555555;
                    background-color: #efefef;
                  }
                  .simple-grid .even {
                    color: #555555;
                    background-color: #fcfcfc;
                  }
                  .simple-grid .selected {
                    color: #ffffff;
                    background-color: #6699cc; 
                  }
                  .simple-grid .hover {
                    color: #555555;
                    background-color: #dfe8f6;
                  }

                  /* CSS for Crystal Grids */
                  .crystal-grid {
                    z-index: 9;
                  }
                  .crystal-grid .cell {
                    font-family: Verdana;
                    font-size: 13px;
                    text-align: center;
                  }
                  .crystal-grid .cell {
                    text-align: center;
                  }
                  .crystal-grid .header-cell {
                    font-size: 11px;
                    color: #1641af;
                    background-color: #cddef3;
                    background-image: url('/profoundui/proddata/images/grids/crystal/header.png');
                    background-repeat: repeat-x;
                    text-align: center;
                    font-weight: bold;
                  }
                  .crystal-grid .header-cell div {
                    text-align: center;
                  }
                  .crystal-grid .odd {
                    color: #555555;
                    background-color: #efefef;
                  }
                  .crystal-grid .even {
                    color: #555555;
                    background-color: #fcfcfc;
                  }
                  .crystal-grid .odd INPUT.PR {
                    color: #555555;
                  }
                  .crystal-grid .odd INPUT.PR-UL {
                    color: #555555;
                  }
                  .crystal-grid .even INPUT.PR {
                    color: #555555;
                  }
                  .crystal-grid .even INPUT.PR-UL {
                    color: #555555;
                  }
                  .crystal-grid .selected {
                    color: #ffffff;
                    background-color: #6699cc; 
                  }
                  .crystal-grid .hover {
                    color: #555555;
                    background-color: #cbe2ff;
                    background-image: url('/profoundui/proddata/images/grids/crystal/hover.png');
                    background-repeat: repeat-x;
                  }

                  /* CSS for Contemporary Grids */
                  .contemporary-grid {
                    z-index: 9;
                  }
                  .contemporary-grid .cell {
                    font-family: Verdana;
                    font-size: 13px;
                    text-align: center;
                  }
                  .contemporary-grid .cell {
                    text-align: center;
                  }
                  .contemporary-grid .header-cell {
                    font-family: Sans-Serif;
                    font-size: 16px;
                    color: #ffffff;
                    background-color: #0888f5;
                    background-image: url('/profoundui/proddata/images/grids/contemporary/header.png');
                    background-repeat: repeat-x;
                    text-align: center;
                    font-weight: bold;
                  }
                  .contemporary-grid .header-cell div {
                    text-align: center;
                  }
                  .contemporary-grid .odd {
                    color: #555555;
                    background-color: #ffffff;
                  }
                  .contemporary-grid .even {
                    color: #555555;
                    background-color: #f5fafa;
                  }
                  .contemporary-grid .odd INPUT.PR {
                    color: #555555;
                  }
                  .contemporary-grid .odd INPUT.PR-UL {
                    color: #555555;
                  }
                  .contemporary-grid .even INPUT.PR {
                    color: #555555;
                  }
                  .contemporary-grid .even INPUT.PR-UL {
                    color: #555555;
                  }
                  .contemporary-grid .selected {
                    color: #ffffff;
                    background-color: #6699cc; 
                  }
                  .contemporary-grid .hover {
                    color: #555555;
                    background-color: #cddef3;
                    background-image: url('/profoundui/proddata/images/grids/contemporary/hover.png');
                    background-repeat: repeat-x;
                  }

                  /* CSS for Ice Blue Grids */
                  .ice-blue-grid {
                    z-index: 9;
                  }
                  .ice-blue-grid .cell {
                    font-family: Verdana;
                    font-size: 13px;
                    text-align: center;
                  }
                  .ice-blue-grid .cell {
                    text-align: center;
                  }
                  .ice-blue-grid .header-cell {
                    font-size: 12px;
                    color: #000000;
                    background-color: #92c0f4;
                    background-image: url('/profoundui/proddata/images/grids/ice blue/header.png');
                    background-repeat: repeat-x;
                    text-align: center;
                    font-weight: bold;
                  }
                  .ice-blue-grid .header-cell div {
                    text-align: center;
                  }
                  .ice-blue-grid .odd {
                    color: #555555;
                    background-color: #e8efff;
                  }
                  .ice-blue-grid .even {
                    color: #555555;
                    background-color: #e8efff;
                  }
                  .ice-blue-grid .odd INPUT.PR {
                    color: #555555;
                  }
                  .ice-blue-grid .odd INPUT.PR-UL {
                    color: #555555;
                  }
                  .ice-blue-grid .even INPUT.PR {
                    color: #555555;
                  }
                  .ice-blue-grid .even INPUT.PR-UL {
                    color: #555555;
                  }
                  .ice-blue-grid .selected {
                    color: #ffffff;
                    background-color: #6699cc; 
                  }
                  .ice-blue-grid .hover {
                    color: #555555;
                    background-color: #ffe088;
                    background-image: url('/profoundui/proddata/images/grids/ice blue/hover.png');
                    background-repeat: repeat-x;
                  }

                  /* CSS for Evergreen Grids */
                  .evergreen-grid {
                    z-index: 9;
                  }
                  .evergreen-grid .cell {
                    font-family: Verdana;
                    font-size: 13px;
                    text-align: center;
                  }
                  .evergreen-grid .cell {
                    text-align: center;
                  }
                  .evergreen-grid .header-cell {
                    font-size: 11px;
                    color: #ffffff;
                    background-color: #47c444;
                    background-image: url('/profoundui/proddata/images/grids/evergreen/header.png');
                    background-repeat: repeat-x;
                    text-align: center;
                    font-weight: bold;
                  }
                  .evergreen-grid .header-cell div {
                    text-align: center;
                  }
                  .evergreen-grid .odd {
                    color: #555555;
                    background-color: #ffffff;
                  }
                  .evergreen-grid .even {
                    color: #555555;
                    background-color: #f2f2f2;
                  }
                  .evergreen-grid .odd INPUT.PR {
                    color: #555555;
                  }
                  .evergreen-grid .odd INPUT.PR-UL {
                    color: #555555;
                  }
                  .evergreen-grid .even INPUT.PR {
                    color: #555555;
                  }
                  .evergreen-grid .even INPUT.PR-UL {
                    color: #555555;
                  }
                  .evergreen-grid .selected {
                    color: #ffffff;
                    background-color: #6699cc; 
                  }
                  .evergreen-grid .hover {
                    color: #ffffff;
                    background-color: #a0c985;
                  }

                  /* CSS for Midnight Grids */
                  .midnight-grid {
                    z-index: 9;
                  }
                  .midnight-grid .cell {
                    font-family: Verdana;
                    font-size: 13px;
                    text-align: center;
                  }
                  .midnight-grid .cell {
                    text-align: center;
                  }
                  .midnight-grid .header-cell {
                    font-size: 11px;
                    color: #cae8e8;
                    background-color: #5e84bd;
                    background-image: url('/profoundui/proddata/images/grids/midnight/header.png');
                    background-repeat: repeat-x;
                    text-align: center;
                    font-weight: bold;
                  }
                  .midnight-grid .header-cell div {
                    text-align: center;
                  }
                  .midnight-grid .odd {
                    color: #555555;
                    background-color: #d9d9d9;
                  }
                  .midnight-grid .even {
                    color: #555555;
                    background-color: #d9d9d9;
                  }
                  .midnight-grid .odd INPUT.PR {
                    color: #555555;
                  }
                  .midnight-grid .odd INPUT.PR-UL {
                    color: #555555;
                  }
                  .midnight-grid .even INPUT.PR {
                    color: #555555;
                  }
                  .midnight-grid .even INPUT.PR-UL {
                    color: #555555;
                  }
                  .midnight-grid .selected {
                    color: #ffffff;
                    background-color: #6699cc; 
                  }
                  .midnight-grid .hover {
                    color: #ffffff;
                    background-color: #3f639b;
                    background-image: url('/profoundui/proddata/images/grids/midnight/hover.png');
                    background-repeat: repeat-x;
                  }

                  /* CSS for Silver Grids */
                  .silver-grid {
                    z-index: 9;
                  }
                  .silver-grid .cell {
                    font-family: Verdana;
                    font-size: 13px;
                    text-align: center;
                  }
                  .silver-grid .cell {
                    text-align: center;
                  }
                  .silver-grid .header-cell {
                    font-size: 11px;
                    color: #969591;
                    background-color: #e7e7e7;
                    background-image: url('/profoundui/proddata/images/grids/silver/header.png');
                    background-repeat: repeat-x;
                    text-align: center;
                    font-weight: normal;
                    font-family: Arial;
                  }
                  .silver-grid .header-cell div {
                    text-align: center;
                  }
                  .silver-grid .odd {
                    color: #555555;
                    background-color: #f9f9f9;
                  }
                  .silver-grid .even {
                    color: #555555;
                    background-color: #eeeeee;
                  }
                  .silver-grid .odd INPUT.PR {
                    color: #555555;
                  }
                  .silver-grid .odd INPUT.PR-UL {
                    color: #555555;
                  }
                  .silver-grid .even INPUT.PR {
                    color: #555555;
                  }
                  .silver-grid .even INPUT.PR-UL {
                    color: #555555;
                  }
                  .silver-grid .selected {
                    color: #ffffff;
                    background-color: #6699cc; 
                  }
                  .silver-grid .hover {
                    color: #555555;
                    background-color: #cbe2ff;
                    background-image: url('/profoundui/proddata/images/grids/silver/hover.png');
                    background-repeat: repeat-x;
                  }

                  /* CSS for Sapphire Grids */
                  .sapphire-grid {
                    z-index: 9;
                  }
                  .sapphire-grid .cell {
                    font-family: Verdana;
                    font-size: 13px;
                    text-align: center;
                  }
                  .sapphire-grid .cell {
                    text-align: center;
                  }
                  .sapphire-grid .header-cell {
                    font-size: 11px;
                    color: #ffffff;
                    background-color: #4985fd;
                    background-image: url('/profoundui/proddata/images/grids/sapphire/header.png');
                    background-repeat: repeat-x;
                    text-align: center;
                    font-weight: bold;
                  }
                  .sapphire-grid .header-cell div {
                    text-align: center;
                  }
                  .sapphire-grid .odd {
                    color: #555555;
                    background-color: #ffffff;
                  }
                  .sapphire-grid .even {
                    color: #555555;
                    background-color: #f2f2f2;
                  }
                  .sapphire-grid .odd INPUT.PR {
                    color: #555555;
                  }
                  .sapphire-grid .odd INPUT.PR-UL {
                    color: #555555;
                  }
                  .sapphire-grid .even INPUT.PR {
                    color: #555555;
                  }
                  .sapphire-grid .even INPUT.PR-UL {
                    color: #555555;
                  }
                  .sapphire-grid .selected {
                    color: #ffffff;
                    background-color: #6699cc; 
                  }
                  .sapphire-grid .hover {
                    color: #ffffff;
                    background-color: #ffe088;
                    background-image: url('/profoundui/proddata/images/grids/sapphire/hover.png');
                    background-repeat: repeat-x;
                  }

                  /* CSS for Coral Grids */
                  .coral-grid {
                    z-index: 9;
                  }
                  .coral-grid .cell {
                    font-family: Verdana;
                    font-size: 13px;
                    text-align: center;
                  }
                  .coral-grid .cell {
                    text-align: center;
                  }
                  .coral-grid .header-cell {
                    font-size: 11px;
                    color: #cc3333;
                    background-color: #ffc113;
                    background-image: url('/profoundui/proddata/images/grids/coral/header.png');
                    background-repeat: repeat-x;
                    text-align: center;
                    font-weight: bold;
                  }
                  .coral-grid .header-cell div {
                    text-align: center;
                  }
                  .coral-grid .odd {
                    color: #555555;
                    background-color: #ffffff;
                  }
                  .coral-grid .even {
                    color: #555555;
                    background-color: #f2f2f2;
                  }
                  .coral-grid .odd INPUT.PR {
                    color: #555555;
                  }
                  .coral-grid .odd INPUT.PR-UL {
                    color: #555555;
                  }
                  .coral-grid .even INPUT.PR {
                    color: #555555;
                  }
                  .coral-grid .even INPUT.PR-UL {
                    color: #555555;
                  }
                  .coral-grid .selected {
                    color: #ffffff;
                    background-color: #6699cc; 
                  }
                  .coral-grid .hover {
                    color: #555555;
                    background-color: #ffe088;
                    background-image: url('/profoundui/proddata/images/grids/coral/hover.png');
                    background-repeat: repeat-x;
                  }

                  /* CSS for Polished Grids */
                  .polished-grid {
                    z-index: 9;
                  }
                  .polished-grid .cell {
                    font-family: Verdana;
                    font-size: 13px;
                    text-align: center;
                  }
                  .polished-grid .cell {
                    text-align: center;
                  }
                  .polished-grid .header-cell {
                    font-size: 11px;
                    color: #000000;
                    background-color: #f2f5fb;
                    background-image: url('/profoundui/proddata/images/grids/polished/header.png');
                    background-repeat: repeat-x;
                    text-align: left;
                    font-weight: bold;
                    font-family: Arial;
                  }
                  .polished-grid .header-cell div {
                    text-align: left;
                  }
                  .polished-grid .odd {
                    color: #555555;
                    background-color: #ffffff;
                  }
                  .polished-grid .even {
                    color: #555555;
                    background-color: #f2f2f2;
                  }
                  .polished-grid .odd INPUT.PR {
                    color: #555555;
                  }
                  .polished-grid .odd INPUT.PR-UL {
                    color: #555555;
                  }
                  .polished-grid .even INPUT.PR {
                    color: #555555;
                  }
                  .polished-grid .even INPUT.PR-UL {
                    color: #555555;
                  }
                  .polished-grid .selected {
                    color: #ffffff;
                    background-color: #6699cc; 
                  }
                  .polished-grid .hover {
                    color: #ffffff;
                    background-color: #39698a;
                  }

                  /* CSS for Mobile Grids */
                  .mobile-grid {
                    z-index: 9;
                    border-radius: 35px;
                  }
                  .mobile-grid .cell {
                    font-family: Helvetica;
                    font-size: 1em;
                    text-align: center;
                  }
                  .mobile-grid .cell {
                    text-align: center;
                  }
                  .mobile-grid .header-cell {
                    font-size: 1em;
                    color: #9fa4aa;
                    background-color: #ECECEC;
                    background: -moz-linear-gradient(center top , #FFFFFF, #E0E0E0) repeat scroll 0 0 transparent;
                    background: -webkit-linear-gradient(#FFFFFF, #E0E0E0) repeat scroll 0 0 transparent;
                    text-align: center;
                    font-weight: bold;
                  }
                  .mobile-grid .header-cell div {
                    text-align: center;
                  }
                  .mobile-grid .odd {
                    color: #555555;
                    background: -moz-linear-gradient(center top , #FFFFFF, #F3F3F3) repeat scroll 0 0 transparent;
                    background: -webkit-linear-gradient(#FFFFFF, #F3F3F3) repeat scroll 0 0 transparent;
                  }
                  .mobile-grid .even {
                    color: #555555;
                    background: -moz-linear-gradient(center top , #FFFFFF, #F3F3F3) repeat scroll 0 0 transparent;
                    background: -webkit-linear-gradient(#FFFFFF, #F3F3F3) repeat scroll 0 0 transparent;
                  }
                  .mobile-grid .selected {
                    color: #ffffff;
                    background-color: #0071EB;
                    background: -moz-linear-gradient(center top , #00A0F6, #0071EB) repeat scroll 0 0 transparent;
                    background: -webkit-linear-gradient(#00A0F6, #0071EB) repeat scroll 0 0 transparent;
                  }
                  .mobile-grid .hover {
                    color: #555555;
                    background-color: #ffffff;
                  }

                   

                  /* Default CSS for Styled Buttons */
                  /* This can be overriden using specific styled button classes, such as ice-blue-button */
                  .styled-button {
                    font-family: Sans-serif;
                    color: #335588;
                    font-size: 12px;
                    font-weight: bold;
                    cursor: default;

                  }

                  /* Default CSS for Panels */
                  .panel {
                    font-family: Sans-serif;
                    color: #ffffff;
                    font-size: 12px;
                    font-weight: bold;

                  }
                  /* Override CCSS for specific panels */
                  .evergreen-panel {
                    font-size: 14px;
                    text-align: center;
                  }
                  .sapphire-panel {
                    text-align: center;
                  }
                  .polished-panel {
                    text-align: center;
                    font-size: 14px;
                  }
                  .contemporary-panel {
                    font-size: 14px;
                  }
                  .slate-panel {
                    text-align: center;
                    font-size: 14px;
                  }
                  .smoke-panel {
                    font-size: 14px;
                  }
                  .pine-panel {
                    font-size: 14px;
                  }
                  .ice-blue-panel {
                    text-align: center;
                    font-size: 14px;
                  }
                  .glass-panel {
                    text-align: center;
                    font-size: 14px;
                    color: #0050b0;
                  }
                  .navy-panel {
                    text-align: center;
                    font-size: 14px;
                  }
                  .steel-blue-panel {
                    text-align: center;
                    font-size: 14px;
                  }
                  .harvest-panel {
                    text-align: center;
                    font-size: 14px;
                  }
                  .professional-dialog-panel {
                    font-size: 14px;
                  }
                  .classic-dialog-panel {
                    font-size: 14px;
                  }
                  .simple-dialog-panel {
                    color: #15428b;
                    text-align: center;
                  }
                  .polished-dialog-panel {
                    color: #666666;
                    text-align: center;
                    font-size: 13px;
                  }
                  .modern-dialog-panel {
                    text-align: center;
                    font-size: 14px;
                  }
                  .glass-dialog-panel {
                    color: #15428b;
                    font-size: 13px;
                  }
                  .crimson-dialog-panel {
                    text-align: center;
                    font-size: 14px;
                  }

                  .constant {
                    font-family: Trebuchet MS;
                  }

                  .outputField {
                    font-family: Trebuchet MS;
                  }

                  DIV.top-line {
                    color: #ffffff;
                  }

                  .subfile-heading {
                    font-size: 11px;
                    color: #1641af;
                    font-weight: bold;
                    z-index: 100  /* above grid lines */
                  }
                  DIV.subfile-heading {
                    color: #1641af;
                  }

                  .enhanced-constant {
                    font-family: Consolas, Monospace;
                    font-size: 14px;
                  }

                  .enhanced-output-field {
                    font-family: Consolas, Monospace;
                    font-size: 14px;
                  }

                  .enhanced-subfile-heading {
                    font-family: Consolas, Monospace;
                    font-size: 14px;
                    color: #1641af;
                    font-weight: bold;
                    z-index: 100  /* above grid lines */
                  }
                  DIV.enhanced-subfile-heading {
                    color: #1641af;
                  }

                  INPUT.empty-text, TEXTAREA.empty-text {
                    color: gray;
                    border: 1px solid #B5B8C8;
                  }

                  @media print {
                    .pui-scrollbar {
                      display: none;
                    }
                  }

                  body.hybrid {
                    font-family: Consolas, Monospace;
                  }

                  .hybrid-link {
                    font-family: sans-serif; 
                    font-weight: bold;
                    cursor: pointer;
                    font-size: 12px;
                    color: #0067C3; 
                  }
                  .hybrid-link :hover {
                    text-decoration: underline;
                  }

                  DIV.hybrid-crumb {
                    font-family: sans-serif; 
                    font-weight: bold;
                    font-size: 12px;
                    color: #333333;
                  }

                  A.hybrid-crumb {
                    font-family: sans-serif; 
                    font-weight: bold;
                    cursor: pointer;
                    font-size: 12px;
                    color: #0067C3; 
                  }
                  A.hybrid-crumb :hover {
                    text-decoration: underline;
                  }

                  .hybrid-required {
                    font-family: sans-serif; 
                    font-weight: bold;
                    font-size: 12px;
                    color: #ff0000; 
                  }

                   

                  /* Hybrid Theme */

                  INPUT.hybrid-button {
                  color: #335588;
                  font-weight: bold;
                  font-size: 12px;
                  }

                  .hybrid-constant {
                    font-family: Consolas, Monospace;
                    font-size: 14px;
                    color: #333333;
                  }
                  .hybrid-constant2 {
                    font-family: sans-serif; 
                    font-weight: bold;
                    font-size: 12px;
                    color: #333333;
                  }

                  .hybrid-output-field {
                    font-family: Consolas, Monospace;
                    font-size: 14px;
                    color: #666666;
                  }

                  .hybrid-subfile-heading {
                    font-family: Consolas, Monospace;
                    font-size: 14px;
                    color: #333333;
                    font-weight: bold;
                    z-index: 100  /* above grid lines */
                  }
                  DIV.hybrid-subfile-heading {
                    color: #333333;
                  }

                  /* CSS for Hybrid Grid */
                  .hybrid-grid {
                    z-index: 9;
                  }
                  .hybrid-grid .cell {
                    font-family: Verdana;
                    font-size: 13px;
                    text-align: center;
                  }
                  .hybrid-grid .cell {
                    text-align: center;
                  }
                  .hybrid-grid .header-cell {
                    font-size: 11px;
                    color: #ffffff;
                    background-color: #0b72a9;
                    background-repeat: repeat-x;
                    text-align: center;
                    font-weight: bold;
                  }
                  .hybrid-grid .header-cell div {
                    text-align: center;
                  }
                  .hybrid-grid .odd {
                    color: #555555;
                    background-color: #efefef;
                  }
                  .hybrid-grid .even {
                    color: #555555;
                    background-color: #fcfcfc;
                  }
                  .hybrid-grid .odd INPUT.PR {
                    color: #555555;
                  }
                  .hybrid-grid .odd INPUT.PR-UL {
                    color: #555555;
                  }
                  .hybrid-grid .even INPUT.PR {
                    color: #555555;
                  }
                  .hybrid-grid .even INPUT.PR-UL {
                    color: #555555;
                  }
                  .hybrid-grid .selected {
                    color: #ffffff;
                    background-color: #6699cc; 
                  }
                  .hybrid-grid .hover {
                    color: #555555;
                    background-color: #cbe2ff;
                    background-image: url('/profoundui/proddata/images/grids/hybrid/hover.png');
                    background-repeat: repeat-x;
                  }

                   

                  .hybrid INPUT.PR {
                    border: 0px solid #ffffff;
                    background-image: none;
                    background-color: transparent;
                    color: #666666;
                  }

                  .hybrid INPUT.PR-UL {
                    border: 0px solid #ffffff;
                    background-image: none;
                    background-color: transparent;
                    text-decoration: underline;
                    color: #666666;
                  }

                  .hybrid DIV.RI { background-color: yellow; }
                  .hybrid INPUT.RI { background-color: yellow; background-image: none; }

                   

                  .hybrid DIV.TRQ { color: #335588; }
                  .hybrid INPUT.TRQ { color: #000000; }

                   

                  .hybrid INPUT.invalid {
                    background-image: url(/profoundui/proddata/images/invalid-underline.gif);
                    background-repeat: repeat-x;
                    background-position: bottom;
                    border-color: #924949;
                  }

                   

                  .hybrid-heading1 {
                    height: 122px;
                    background-color: #005079;
                    background-image: url("/profoundui/userdata/genie skins/Hybrid/background.gif");
                    background-position: center top;
                    background-repeat: no-repeat;
                    position: absolute;
                    width: 100%;
                    top: 0px;
                    left: -2px;
                    z-index: 4;
                  }

                  body.hybrid-signon {
                    background-color: #005079;
                    background-image: url("/profoundui/userdata/genie skins/Hybrid/background.gif");
                    background-position: center top;
                    background-repeat: no-repeat; 
                  }

                  .hybrid-heading2 {
                    position: absolute;
                    top: 75px;
                    left: -4px;
                    border-top: 1px solid #18638A;
                    border-bottom: 1px solid #18638A;
                    background-image: url('/profoundui/userdata/genie skins/Hybrid/heading_strip.png');
                    background-repeat: repeat-x;
                    z-index: 5;
                    width: 100%;
                  }

                  .hybrid-actions {
                    background: #e7f1f3; /* Old browsers */
                    background: -moz-linear-gradient(top,  #e7f1f3 38%, #ffffff 100%); /* FF3.6+ */
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(38%,#e7f1f3), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
                    background: -webkit-linear-gradient(top,  #e7f1f3 38%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
                    background: -o-linear-gradient(top,  #e7f1f3 38%,#ffffff 100%); /* Opera 11.10+ */
                    background: -ms-linear-gradient(top,  #e7f1f3 38%,#ffffff 100%); /* IE10+ */
                    background: linear-gradient(top,  #e7f1f3 38%,#ffffff 100%); /* W3C */
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7f1f3', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
                  }

                  .hybrid .top-line {
                    font-family: sans-serif;
                    font-size: 15px;
                  }

                  div.mobile-device-layout {
                    z-index: 8;
                  }
                  div.mobile-device-layout table {
                    empty-cells: show;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                  }
                  div.mobile-device-layout td.top-bar, div.mobile-device-layout div.top-bar {
                    background-color: #2175af;
                    background-image: url(/profoundui/proddata/images/layouts/mobilebar3.png);
                    background: -moz-linear-gradient(top, #4a9aea 42%, #2179e5 100%) repeat scroll 0 0 transparent);
                    background: -webkit-linear-gradient(top, #4a9aea 42%,#2179e5 100%) repeat scroll 0 0 transparent;
                    background-repeat: repeat-x;
                  }
                  div.mobile-device-layout td.top-bar, div.mobile-device-layout div.top-bar {
                    height: 55px;
                  }
                  div.mobile-device-layout td.content-section, div.mobile-device-layout div.content-section {
                    background-color: #eeeeee;
                  }
                  div.mobile-device-layout div.content-section {
                    position: relative;
                    width: 100%;
                    overflow: hidden;
                  }
                  div.mobile-device-layout td.bottom-bar, div.mobile-device-layout div.bottom-bar {
                    background-color: #000000;
                    background-image: url(/profoundui/proddata/images/layouts/mobilebar4.png);
                    background: -moz-linear-gradient(center top , #45484D, #000000) repeat scroll 0 0 transparent;
                    background: -webkit-linear-gradient(#45484D, #000000) repeat scroll 0 0 transparent;
                    background-repeat: repeat-x;
                  }
                  div.mobile-device-layout td.bottom-bar, div.mobile-device-layout div.bottom-bar {
                    height: 55px;
                  }
                  .transparent-textbox {
                    font-family: Helvetica,Arial,sans-serif;
                    font-size: 16px;
                    border: medium none;
                    margin: 0;
                    background: transparent;
                    line-height: 1.4em;
                    min-height: 1.4em;
                    outline: 0 none;
                    color: #333333;
                    text-shadow: 0 1px 0 #FFFFFF;
                  }
                  .mobile-textbox {
                    font-family: Helvetica,Arial,sans-serif;
                    font-size: 16px;
                    border: 1px solid #cccccc;
                    margin: 0;
                    background-color: #ffffff;
                    line-height: 1.4em;
                    min-height: 1.4em;
                    outline: 0 none;
                    color: #333333;
                    text-shadow: 0 1px 0 #FFFFFF;
                    border-radius: 8px;
                    padding-left: 8px;
                    padding-right: 8px;
                    padding-top: 4px;
                    padding-bottom: 4px;
                  }
                  div.mobile-device-layout div.content-section div.label {
                    color: #222222;
                    font-weight: bold;
                    text-shadow: 0 1px 0 #FFFFFF;
                    font-size: 16px;
                    font-family: Helvetica,Arial,sans-serif;
                    text-align: left;
                    text-overflow: ellipsis;
                  }
                  div.mobile-device-layout div.top-bar div.label {
                    color: #FFFFFF;
                    font-weight: bold;
                    text-shadow: 0 1px 0 #222222;
                    font-size: 16px;
                    font-family: Helvetica,Arial,sans-serif;
                    text-align: center;
                    text-overflow: ellipsis;
                  }

                  div.onoff-switch {
                    position: relative;
                    height: 27px;
                    min-height: 27px;
                    max-height: 27px;
                    min-width: 50px;
                    max-width: 550px;
                    cursor: pointer;
                    overflow: hidden;
                  }
                  .onoff-switch label {
                    white-space: nowrap;
                    font-size: 17px;
                    line-height: 17px;
                    font-weight: bold;
                    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
                    cursor: pointer;
                    display: block;
                    height: 27px;
                    position: absolute;
                    width: auto;
                    top: 0;
                    padding-top: 5px;
                    overflow: hidden;
                  }
                  .onoff-switch, .onoff-switch label {
                    user-select: none;
                    -moz-user-select: none;
                    -khtml-user-select: none;
                  }
                  .onoff-switch-disabled {
                    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
                    opacity: 0.5;
                  }
                  label.on-label {
                    color: white;
                    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6);
                    left: 0;
                    padding-top: 5px;
                  }
                  label.on-label span {
                    padding-left: 8px;
                  }
                  label.off-label {
                    color: #8b8b8b;
                    text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.6);
                    text-align: right;
                    right: 0;
                  }
                  label.off-label span {
                    padding-right: 8px;
                  }
                  .onoff-handle-left {
                    display: block;
                    height: 27px;
                    cursor: pointer;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 0;
                    padding-left: 3px;
                    padding-right: 0px;
                    padding-top: 0px;
                    padding-bottom: 0px;
                  }
                  .onoff-handle-right {
                    height: 100%;
                    width: 100%;
                    padding-right: 3px;
                    padding-left: 0px;
                    padding-top: 0px;
                    padding-bottom: 0px;
                  }
                  .onoff-handle-center {
                    height: 100%;
                    width: 100%;
                    padding: 0px;
                  }

                  div.ace_editor, .ace_editor div {
                    padding: 0px;
                  }
                  div.ace_gutter-cell {
                    padding-left: 19px;
                    padding-right: 6px;
                  }
                  div.ace_gutter-cell {
                    padding-left: 19px;
                    padding-right: 6px;
                  }
                  div.ace_gutter-tooltip {
                    padding: 4px;
                  }
                  div.ace_folding-enabled > div.ace_gutter-cell {
                      padding-right: 13px;
                  }

                   

                   

                   

                  .ui-btn { display: block; text-align: center; cursor:pointer; position: relative; margin: .5em 0; padding: 0; }
                  .ui-mini { margin-top: .25em; margin-bottom: .25em; }
                  .ui-btn-left, .ui-btn-right, .ui-input-clear, .ui-btn-inline,
                  .ui-grid-a .ui-btn, .ui-grid-b .ui-btn, .ui-grid-c .ui-btn, .ui-grid-d .ui-btn, .ui-grid-e .ui-btn, .ui-grid-solo .ui-btn { margin-right: 5px; margin-left: 5px; }
                  .ui-btn-inner { font-size: 16px; padding: .6em 20px; min-width: .75em; display: block; position: relative; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; zoom: 1; }
                  .ui-btn input, .ui-btn button { z-index: 2; }
                  .ui-btn-left, .ui-btn-right, .ui-btn-inline { display: inline-block; vertical-align: middle; }
                  .ui-mobile .ui-btn-left, .ui-mobile .ui-btn-right, .ui-btn-left > .ui-btn, .ui-btn-right > .ui-btn { margin: 0; } /* .ui-mobile to increase specificity level */
                  .ui-btn-block { display: block; }

                  .ui-header > .ui-btn,
                  .ui-footer > .ui-btn { display: inline-block; margin: 0; }
                  .ui-header .ui-btn-block,
                  .ui-footer .ui-btn-block { display: block; }

                  .ui-header .ui-btn-inner,
                  .ui-footer .ui-btn-inner,
                  .ui-mini .ui-btn-inner { font-size: 12.5px; padding: .55em 11px .5em; }

                  .ui-fullsize .ui-btn-inner,
                  .ui-fullsize .ui-btn-inner { font-size: 16px; padding: .6em 20px; }

                  .ui-btn-icon-notext { width: 24px; height: 24px; }
                  .ui-btn-icon-notext .ui-btn-inner { padding: 0; height: 100%; }
                  .ui-btn-icon-notext .ui-btn-inner .ui-icon { margin: 2px 1px 2px 3px; float: left; }

                  .ui-btn-text { position: relative; z-index: 1; width: 100%; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
                  div.ui-btn-text { width: auto; }
                  .ui-btn-icon-notext .ui-btn-text { position: absolute; left: -9999px; }

                  .ui-btn-icon-left .ui-btn-inner { padding-left: 40px; }
                  .ui-btn-icon-right .ui-btn-inner { padding-right: 40px; }
                  .ui-btn-icon-top .ui-btn-inner { padding-top: 40px; }
                  .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 40px; }

                  .ui-header .ui-btn-icon-left .ui-btn-inner,
                  .ui-footer .ui-btn-icon-left .ui-btn-inner,
                  .ui-mini.ui-btn-icon-left .ui-btn-inner,
                  .ui-mini .ui-btn-icon-left .ui-btn-inner { padding-left: 30px; }
                  .ui-header .ui-btn-icon-right .ui-btn-inner,
                  .ui-footer .ui-btn-icon-right .ui-btn-inner,
                  .ui-mini.ui-btn-icon-right .ui-btn-inner,
                  .ui-mini .ui-btn-icon-right .ui-btn-inner { padding-right: 30px; }
                  .ui-header .ui-btn-icon-top .ui-btn-inner,
                  .ui-footer .ui-btn-icon-top .ui-btn-inner { padding: 30px 3px .5em 3px; }
                  .ui-mini.ui-btn-icon-top .ui-btn-inner,
                  .ui-mini .ui-btn-icon-top .ui-btn-inner { padding-top: 30px; }
                  .ui-header .ui-btn-icon-bottom .ui-btn-inner,
                  .ui-footer .ui-btn-icon-bottom .ui-btn-inner { padding: .55em 3px 30px 3px; }
                  .ui-mini.ui-btn-icon-bottom .ui-btn-inner,
                  .ui-mini .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 30px; }

                  /* Corner styling inheritance */
                  .ui-btn-inner {
                  -webkit-border-radius: inherit;
                  border-radius: inherit;
                  }

                  /*btn icon positioning*/
                  .ui-btn-icon-notext .ui-icon { display: block; z-index: 0;}
                  .ui-btn-icon-left > .ui-btn-inner > .ui-icon, .ui-btn-icon-right > .ui-btn-inner > .ui-icon { position: absolute; top: 50%; margin-top: -9px; }
                  .ui-btn-icon-top .ui-btn-inner .ui-icon, .ui-btn-icon-bottom .ui-btn-inner .ui-icon { position: absolute; left: 50%; margin-left: -9px; }
                  .ui-btn-icon-left .ui-icon { left: 10px; }
                  .ui-btn-icon-right .ui-icon { right: 10px; }
                  .ui-btn-icon-top .ui-icon { top: 10px; }
                  .ui-btn-icon-bottom .ui-icon { top: auto; bottom: 10px; }

                  .ui-header .ui-btn-icon-left .ui-icon,
                  .ui-footer .ui-btn-icon-left .ui-icon,
                  .ui-mini.ui-btn-icon-left .ui-icon,
                  .ui-mini .ui-btn-icon-left .ui-icon { left: 5px; }
                  .ui-header .ui-btn-icon-right .ui-icon,
                  .ui-footer .ui-btn-icon-right .ui-icon,
                  .ui-mini.ui-btn-icon-right .ui-icon,
                  .ui-mini .ui-btn-icon-right .ui-icon { right: 5px; }
                  .ui-header .ui-btn-icon-top .ui-icon,
                  .ui-footer .ui-btn-icon-top .ui-icon,
                  .ui-mini.ui-btn-icon-top .ui-icon,
                  .ui-mini .ui-btn-icon-top .ui-icon { top: 5px; }
                  .ui-header .ui-btn-icon-bottom .ui-icon,
                  .ui-footer .ui-btn-icon-bottom .ui-icon,
                  .ui-mini.ui-btn-icon-bottom .ui-icon,
                  .ui-mini .ui-btn-icon-bottom .ui-icon { bottom: 5px; }

                  /*hiding native button,inputs */
                  .ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: none; cursor: pointer; background: #fff; background: rgba(255,255,255,0); filter: Alpha(Opacity=0); opacity: .1; font-size: 1px; border: none; text-indent: -9999px; }
                  /* Fixes IE/WP filter alpha opacity bugs */
                  .ui-disabled .ui-btn-hidden { display: none; }
                  .ui-disabled { z-index: 1; }

                  .ui-field-contain .ui-btn.ui-submit { margin: 0; }
                  label.ui-submit { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; }
                  @media all and (min-width: 28em){
                  .ui-field-contain label.ui-submit { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
                  .ui-field-contain .ui-btn.ui-submit { width: 78%; display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
                  .ui-hide-label .ui-btn.ui-submit { width: auto; display: block; }
                  }

                  /* some unsets - more probably needed */
                  .ui-mobile, .ui-mobile body { height: 99.9%; }
                  .ui-mobile fieldset, .ui-page { padding: 0; margin: 0; }
                  .ui-mobile a img, .ui-mobile fieldset { border-width: 0; }

                  /* responsive page widths */
                  .ui-mobile-viewport { margin: 0; overflow-x: visible; -webkit-text-size-adjust: 100%; -ms-text-size-adjust:none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
                  /* Issue #2066 */
                  body.ui-mobile-viewport,
                  div.ui-mobile-viewport { overflow-x: hidden; }

                  /* "page" containers - full-screen views, one should always be in view post-pageload */
                  .ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0; }
                  .ui-mobile .ui-page-active { display: block; overflow: visible; }

                  /* on ios4, setting focus on the page element causes flashing during transitions when there is an outline, so we turn off outlines */
                  .ui-page { outline: none; }

                  /*orientations from js are available */
                  @media screen and (orientation: portrait){
                  .ui-mobile .ui-page { min-height: 420px; }
                  }
                  @media screen and (orientation: landscape){
                  .ui-mobile .ui-page { min-height: 300px; }
                  }

                  /* loading screen */
                  .ui-loading .ui-loader { display: block; }
                  .ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; left: 50%; border:0; }
                  .ui-loader-default { background: none; filter: Alpha(Opacity=18); opacity: .18; width: 46px; height: 46px; margin-left: -23px; margin-top: -23px; }
                  .ui-loader-verbose { width: 200px; filter: Alpha(Opacity=88); opacity: .88; box-shadow: 0 1px 1px -1px #fff; height: auto; margin-left: -110px; margin-top: -43px; padding: 10px; }
                  .ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; }
                  .ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; }
                  .ui-loader .ui-icon { background-color: #000; display: block; margin: 0; width: 44px; height: 44px; padding: 1px; -webkit-border-radius: 36px; border-radius: 36px; }
                  .ui-loader-verbose .ui-icon { margin: 0 auto 10px; filter: Alpha(Opacity=75); opacity: .75; }
                  .ui-loader-textonly { padding: 15px; margin-left: -115px; }
                  .ui-loader-textonly .ui-icon { display: none; }
                  .ui-loader-fakefix { position: absolute; }
                  /*fouc*/
                  .ui-mobile-rendering > * { visibility: hidden; }

                  /*headers, content panels*/
                  .ui-bar, .ui-body { position: relative; padding: .4em 15px; overflow: hidden; display: block; clear:both; }
                  .ui-bar { font-size: 16px; margin: 0; }
                  .ui-bar h1, .ui-bar h2, .ui-bar h3, .ui-bar h4, .ui-bar h5, .ui-bar h6 { margin: 0; padding: 0; font-size: 16px; display: inline-block; }

                  .ui-header, .ui-footer { position: relative; zoom: 1; }
                  .ui-mobile .ui-header, .ui-mobile .ui-footer { border-left-width: 0; border-right-width: 0; }
                  .ui-header .ui-btn-left,
                  .ui-header .ui-btn-right,
                  .ui-footer .ui-btn-left,
                  .ui-footer .ui-btn-right,
                  .ui-header-fixed.ui-fixed-hidden .ui-btn-left,
                  .ui-header-fixed.ui-fixed-hidden .ui-btn-right { position: absolute; top: 3px; }
                  .ui-header-fixed .ui-btn-left,
                  .ui-header-fixed .ui-btn-right { top: 4px;}
                  .ui-header .ui-btn-left,
                  .ui-footer .ui-btn-left { left: 5px; }
                  .ui-header .ui-btn-right,
                  .ui-footer .ui-btn-right { right: 5px; }
                  .ui-footer > .ui-btn-icon-notext,
                  .ui-header > .ui-btn-icon-notext,
                  .ui-header-fixed.ui-fixed-hidden > .ui-btn-icon-notext { top: 6px; }
                  .ui-header-fixed > .ui-btn-icon-notext { top: 7px;}
                  .ui-header .ui-title, .ui-footer .ui-title { min-height: 1.1em; text-align: center; font-size: 16px; display: block; margin: .6em 30% .8em; padding: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0 !important; }
                  .ui-footer .ui-title { margin: .6em 15px .8em; }

                  /* content area*/
                  .ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }

                  /* corner styling for dialogs and popups */
                  .ui-corner-all > .ui-header:first-child,
                  .ui-corner-all > .ui-content:first-child,
                  .ui-corner-all > .ui-footer:first-child {
                  -webkit-border-top-left-radius: inherit;
                  border-top-left-radius: inherit;
                  -webkit-border-top-right-radius: inherit;
                  border-top-right-radius: inherit;
                  }
                  .ui-corner-all > .ui-header:last-child,
                  .ui-corner-all > .ui-content:last-child,
                  .ui-corner-all > .ui-footer:last-child {
                  -webkit-border-bottom-left-radius: inherit;
                  border-bottom-left-radius: inherit;
                  -webkit-border-bottom-right-radius: inherit;
                  border-bottom-right-radius: inherit;
                  }

                  /* icons sizing */
                  .ui-icon { width: 18px; height: 18px; }

                  /* non-js content hiding */
                  .ui-nojs { position: absolute; left: -9999px; }

                  /* accessible content hiding */
                  .ui-hide-label label.ui-input-text, .ui-hide-label label.ui-select, .ui-hide-label label.ui-slider, .ui-hide-label label.ui-submit, .ui-hide-label .ui-controlgroup-label,
                  .ui-hidden-accessible { position: absolute !important; left: -9999px; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }

                  .ui-controlgroup, fieldset.ui-controlgroup { padding: 0; margin: .5em 0; zoom: 1; }
                  .ui-controlgroup.ui-mini, fieldset.ui-controlgroup.ui-mini { margin: .25em 0; }
                  .ui-field-contain .ui-controlgroup, .ui-field-contain fieldset.ui-controlgroup { margin: 0; }
                  .ui-bar .ui-controlgroup { margin: 0 5px; }

                  .ui-controlgroup-label { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .4em; }
                  .ui-controlgroup-controls label.ui-select,
                  .ui-controlgroup-controls label.ui-submit { position: absolute; left: -9999px; }
                  .ui-controlgroup li { list-style: none; }

                  .ui-controlgroup .ui-btn { margin: 0; }
                  .ui-controlgroup .ui-btn-icon-notext { width: auto; height: auto; top: auto; }
                  .ui-controlgroup .ui-btn-icon-notext .ui-btn-inner { height: 20px; padding: .6em 20px .6em 20px }
                  .ui-controlgroup-horizontal .ui-btn-icon-notext .ui-btn-inner { width: 18px; }
                  .ui-controlgroup.ui-mini .ui-btn-icon-notext .ui-btn-inner,
                  .ui-header .ui-controlgroup .ui-btn-icon-notext .ui-btn-inner,
                  .ui-footer .ui-controlgroup .ui-btn-icon-notext .ui-btn-inner { height: 16px; padding: .55em 11px .5em 11px; }
                  .ui-controlgroup .ui-btn-icon-notext .ui-btn-inner .ui-icon { position: absolute; top: 50%; right: 50%; margin: -9px -9px 0 0; }
                  .ui-controlgroup-horizontal .ui-btn-inner { text-align: center; }
                  .ui-controlgroup-horizontal.ui-mini .ui-btn-inner { height: 16px; line-height: 16px; }
                  .ui-controlgroup .ui-checkbox label, .ui-controlgroup .ui-radio label { font-size: 16px; }

                  .ui-controlgroup-horizontal .ui-controlgroup-controls:before,
                  .ui-controlgroup-horizontal .ui-controlgroup-controls:after { content: ""; display: table; }
                  .ui-controlgroup-horizontal .ui-controlgroup-controls:after { clear: both; }
                  .ui-controlgroup-horizontal .ui-controlgroup-controls { display: inline-block; vertical-align: middle; zoom: 1; }
                  .ui-controlgroup-horizontal .ui-controlgroup-controls > .ui-btn, .ui-controlgroup-horizontal .ui-controlgroup-controls li > .ui-btn,
                  .ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio,
                  .ui-controlgroup-horizontal .ui-select { float: left; clear: none; margin: 0; }
                  /* On IE7 the floating selects will be displayed as block if .ui-btn-text has width 100% */
                  .ui-controlgroup-horizontal .ui-select .ui-btn-text { width: auto; }

                  .ui-controlgroup-vertical .ui-btn { border-bottom-width: 0; }
                  .ui-controlgroup-vertical .ui-btn.ui-last-child { border-bottom-width: 1px; }
                  .ui-controlgroup-horizontal .ui-btn { border-right-width: 0; }
                  .ui-controlgroup-horizontal .ui-btn.ui-last-child { border-right-width: 1px; }

                  .ui-controlgroup .ui-btn-corner-all {
                  -webkit-border-radius: 0;
                  border-radius: 0;
                  }
                  .ui-controlgroup .ui-controlgroup-controls,
                  .ui-controlgroup .ui-radio,
                  .ui-controlgroup .ui-checkbox,
                  .ui-controlgroup .ui-select,
                  .ui-controlgroup li {
                  -webkit-border-radius: inherit;
                  border-radius: inherit;
                  }
                  .ui-controlgroup-vertical .ui-btn.ui-first-child {
                  -webkit-border-top-left-radius: inherit;
                  border-top-left-radius: inherit;
                  -webkit-border-top-right-radius: inherit;
                  border-top-right-radius: inherit;
                  }
                  .ui-controlgroup-vertical .ui-btn.ui-last-child {
                  -webkit-border-bottom-left-radius: inherit;
                  border-bottom-left-radius: inherit;
                  -webkit-border-bottom-right-radius: inherit;
                  border-bottom-right-radius: inherit;
                  }
                  .ui-controlgroup-horizontal .ui-btn.ui-first-child {
                  -webkit-border-top-left-radius: inherit;
                  border-top-left-radius: inherit;
                  -webkit-border-bottom-left-radius: inherit;
                  border-bottom-left-radius: inherit;
                  }
                  .ui-controlgroup-horizontal .ui-btn.ui-last-child {
                  -webkit-border-top-right-radius: inherit;
                  border-top-right-radius: inherit;
                  -webkit-border-bottom-right-radius: inherit;
                  border-bottom-right-radius: inherit;
                  }

                  .ui-controlgroup .ui-shadow:not(.ui-focus) {
                  -moz-box-shadow: none;
                  -webkit-box-shadow: none;
                  box-shadow: none;
                  }

                  @media all and (min-width: 28em){
                  .ui-field-contain .ui-controlgroup-label { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
                  .ui-field-contain .ui-controlgroup-controls { width: 78%; display: inline-block; }
                  .ui-field-contain .ui-controlgroup .ui-select { width: 100%; display: block; }
                  .ui-field-contain .ui-controlgroup-horizontal .ui-select { width: auto; }
                  .ui-hide-label .ui-controlgroup-controls { width: 100%; }
                  }

                  .ui-checkbox, .ui-radio { position: relative; clear: both; margin: 0; z-index: 1; }
                  .ui-checkbox .ui-btn, .ui-radio .ui-btn { text-align: left; z-index: 2; }
                  .ui-controlgroup .ui-checkbox .ui-btn, .ui-controlgroup .ui-radio .ui-btn { margin: 0; }
                  .ui-checkbox .ui-btn-inner, .ui-radio .ui-btn-inner { white-space: normal; }

                  .ui-checkbox .ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-btn-icon-left .ui-btn-inner { padding-left: 45px; }
                  .ui-checkbox .ui-mini.ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-mini.ui-btn-icon-left .ui-btn-inner { padding-left: 36px; }
                  .ui-checkbox .ui-btn-icon-right .ui-btn-inner, .ui-radio .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; }
                  .ui-checkbox .ui-mini.ui-btn-icon-right .ui-btn-inner, .ui-radio .ui-mini.ui-btn-icon-right .ui-btn-inner { padding-right: 36px; }
                  .ui-checkbox .ui-btn-icon-top .ui-btn-inner, .ui-radio .ui-btn-icon-top .ui-btn-inner { padding-right: 0; padding-left: 0; text-align: center; }
                  .ui-checkbox .ui-btn-icon-bottom .ui-btn-inner, .ui-radio .ui-btn-icon-bottom .ui-btn-inner { padding-right: 0; padding-left: 0; text-align: center; }
                  .ui-checkbox .ui-icon, .ui-radio .ui-icon { top: 1.1em; }
                  .ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon { left: 15px; }
                  .ui-checkbox .ui-mini.ui-btn-icon-left .ui-icon, .ui-radio .ui-mini.ui-btn-icon-left .ui-icon { left: 9px; }
                  .ui-checkbox .ui-btn-icon-right .ui-icon, .ui-radio .ui-btn-icon-right .ui-icon { right: 15px; }
                  .ui-checkbox .ui-mini.ui-btn-icon-right .ui-icon, .ui-radio .ui-mini.ui-btn-icon-right .ui-icon { right: 9px; }
                  .ui-checkbox .ui-btn-icon-top .ui-icon, .ui-radio .ui-btn-icon-top .ui-icon { top: 10px; }
                  .ui-checkbox .ui-btn-icon-bottom .ui-icon, .ui-radio .ui-btn-icon-bottom .ui-icon { top: auto; bottom: 10px; }
                  .ui-checkbox .ui-btn-icon-right .ui-icon, .ui-radio .ui-btn-icon-right .ui-icon { right: 15px; }
                  .ui-checkbox .ui-mini.ui-btn-icon-right .ui-icon, .ui-radio .ui-mini.ui-btn-icon-right .ui-icon { right: 9px; }

                  .ui-controlgroup-horizontal .ui-checkbox .ui-icon,
                  .ui-controlgroup-horizontal .ui-radio .ui-icon { display: none; }
                  .ui-controlgroup-horizontal .ui-checkbox .ui-btn-inner,
                  .ui-controlgroup-horizontal .ui-radio .ui-btn-inner { padding: .6em 20px; }
                  .ui-controlgroup-horizontal .ui-checkbox .ui-mini .ui-btn-inner,
                  .ui-controlgroup-horizontal .ui-radio .ui-mini .ui-btn-inner { padding: .55em 11px .5em; }

                  /* input, label positioning */
                  .ui-checkbox input,.ui-radio input { position:absolute; left:20px; top:50%; width: 10px; height: 10px; margin:-5px 0 0 0; outline: 0 !important; z-index: 1; }

                   

                  /* Swatches */

                  /* A
                  ------------------------------------------------------------------------------------------ -----------------*/

                  .ui-bar-a {
                  border: 1px solid   #333 /*{a-bar-border}*/;
                  background:    #111 /*{a-bar-background-color}*/;
                  color:      #fff /*{a-bar-color}*/;
                  font-weight: bold;
                  text-shadow: 0 /*{a-bar-shadow-x}*/ -1px /*{a-bar-shadow-y}*/ 0 /*{a-bar-shadow-radius}*/ #000 /*{a-bar-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #3c3c3c /*{a-bar-background-start}*/), to( #111 /*{a-bar-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/);
                  }
                  .ui-bar-a,
                  .ui-bar-a input,
                  .ui-bar-a select,
                  .ui-bar-a textarea,
                  .ui-bar-a button {
                  font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
                  }
                  .ui-bar-a .ui-link-inherit {
                  color: #fff /*{a-bar-color}*/;
                  }

                  .ui-bar-a a.ui-link {
                  color: #7cc4e7 /*{a-bar-link-color}*/;
                  font-weight: bold;
                  }

                  .ui-bar-a a.ui-link:visited {
                      color: #2489ce /*{a-bar-link-visited}*/;
                  }

                  .ui-bar-a a.ui-link:hover {
                  color: #2489ce /*{a-bar-link-hover}*/;
                  }

                  .ui-bar-a a.ui-link:active {
                  color: #2489ce /*{a-bar-link-active}*/;
                  }

                  .ui-body-a,
                  .ui-overlay-a {
                  border: 1px solid   #444 /*{a-body-border}*/;
                  background:    #222 /*{a-body-background-color}*/;
                  color:      #fff /*{a-body-color}*/;
                  text-shadow: 0 /*{a-body-shadow-x}*/ 1px /*{a-body-shadow-y}*/ 0 /*{a-body-shadow-radius}*/ #111 /*{a-body-shadow-color}*/;
                  font-weight: normal;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #444 /*{a-body-background-start}*/), to( #222 /*{a-body-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #444 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #444 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #444 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #444 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #444 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/);
                  }
                  .ui-overlay-a {
                  background-image: none;
                  border-width: 0;
                  }
                  .ui-body-a,
                  .ui-body-a input,
                  .ui-body-a select,
                  .ui-body-a textarea,
                  .ui-body-a button {
                  font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
                  }
                  .ui-body-a .ui-link-inherit {
                  color:  #fff /*{a-body-color}*/;
                  }

                  .ui-body-a .ui-link {
                  color: #2489ce /*{a-body-link-color}*/;
                  font-weight: bold;
                  }

                  .ui-body-a .ui-link:visited {
                      color: #2489ce /*{a-body-link-visited}*/;
                  }

                  .ui-body-a .ui-link:hover {
                  color: #2489ce /*{a-body-link-hover}*/;
                  }

                  .ui-body-a .ui-link:active {
                  color: #2489ce /*{a-body-link-active}*/;
                  }

                  .ui-btn-up-a {
                  border: 1px solid   #111 /*{a-bup-border}*/;
                  background:    #333 /*{a-bup-background-color}*/;
                  font-weight: bold;
                  color:      #fff /*{a-bup-color}*/;
                  text-shadow: 0 /*{a-bup-shadow-x}*/ 1px /*{a-bup-shadow-y}*/ 0 /*{a-bup-shadow-radius}*/ #111 /*{a-bup-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #444 /*{a-bup-background-start}*/), to( #2d2d2d /*{a-bup-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #444 /*{a-bup-background-start}*/, #2d2d2d /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #444 /*{a-bup-background-start}*/, #2d2d2d /*{a-bup-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #444 /*{a-bup-background-start}*/, #2d2d2d /*{a-bup-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #444 /*{a-bup-background-start}*/, #2d2d2d /*{a-bup-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #444 /*{a-bup-background-start}*/, #2d2d2d /*{a-bup-background-end}*/);
                  }
                  .ui-btn-up-a:visited,
                  .ui-btn-up-a a.ui-link-inherit {
                  color:      #fff /*{a-bup-color}*/;
                  }
                  .ui-btn-hover-a {
                  border: 1px solid   #000 /*{a-bhover-border}*/;
                  background:    #444 /*{a-bhover-background-color}*/;
                  font-weight: bold;
                  color:      #fff /*{a-bhover-color}*/;
                  text-shadow: 0 /*{a-bhover-shadow-x}*/ 1px /*{a-bhover-shadow-y}*/ 0 /*{a-bhover-shadow-radius}*/ #111 /*{a-bhover-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #555 /*{a-bhover-background-start}*/), to( #383838 /*{a-bhover-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #555 /*{a-bhover-background-start}*/, #383838 /*{a-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #555 /*{a-bhover-background-start}*/, #383838 /*{a-bhover-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #555 /*{a-bhover-background-start}*/, #383838 /*{a-bhover-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #555 /*{a-bhover-background-start}*/, #383838 /*{a-bhover-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #555 /*{a-bhover-background-start}*/, #383838 /*{a-bhover-background-end}*/);
                  }
                  .ui-btn-hover-a:visited,
                  .ui-btn-hover-a:hover,
                  .ui-btn-hover-a a.ui-link-inherit {
                  color:      #fff /*{a-bhover-color}*/;
                  }
                  .ui-btn-down-a {
                  border: 1px solid   #000 /*{a-bdown-border}*/;
                  background:    #222 /*{a-bdown-background-color}*/;
                  font-weight: bold;
                  color:      #fff /*{a-bdown-color}*/;
                  text-shadow: 0 /*{a-bdown-shadow-x}*/ 1px /*{a-bdown-shadow-y}*/ 0 /*{a-bdown-shadow-radius}*/ #111 /*{a-bdown-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #202020 /*{a-bdown-background-start}*/), to( #2c2c2c /*{a-bdown-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #202020 /*{a-bdown-background-start}*/, #2c2c2c /*{a-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #202020 /*{a-bdown-background-start}*/, #2c2c2c /*{a-bdown-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #202020 /*{a-bdown-background-start}*/, #2c2c2c /*{a-bdown-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #202020 /*{a-bdown-background-start}*/, #2c2c2c /*{a-bdown-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #202020 /*{a-bdown-background-start}*/, #2c2c2c /*{a-bdown-background-end}*/);
                  }
                  .ui-btn-down-a:visited,
                  .ui-btn-down-a:hover,
                  .ui-btn-down-a a.ui-link-inherit {
                  color:      #fff /*{a-bdown-color}*/;
                  }
                  .ui-btn-up-a,
                  .ui-btn-hover-a,
                  .ui-btn-down-a {
                  font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
                  text-decoration: none;
                  }

                  /* B
                  ------------------------------------------------------------------------------------------ -----------------*/
                  .ui-bar-b {
                  border: 1px solid   #456f9a /*{b-bar-border}*/;
                  background:    #5e87b0 /*{b-bar-background-color}*/;
                  color:      #fff /*{b-bar-color}*/;
                  font-weight: bold;
                  text-shadow: 0 /*{b-bar-shadow-x}*/ 1px /*{b-bar-shadow-y}*/ 0 /*{b-bar-shadow-radius}*/ #3e6790 /*{b-bar-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #6facd5 /*{b-bar-background-start}*/), to( #497bae /*{b-bar-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #6facd5 /*{b-bar-background-start}*/, #497bae /*{b-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #6facd5 /*{b-bar-background-start}*/, #497bae /*{b-bar-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #6facd5 /*{b-bar-background-start}*/, #497bae /*{b-bar-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #6facd5 /*{b-bar-background-start}*/, #497bae /*{b-bar-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #6facd5 /*{b-bar-background-start}*/, #497bae /*{b-bar-background-end}*/);
                  }
                  .ui-bar-b,
                  .ui-bar-b input,
                  .ui-bar-b select,
                  .ui-bar-b textarea,
                  .ui-bar-b button {
                  font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
                  }
                  .ui-bar-b .ui-link-inherit {
                  color:  #fff /*{b-bar-color}*/;
                  }

                  .ui-bar-b a.ui-link {
                  color: #ddf0f8 /*{b-bar-link-color}*/;
                  font-weight: bold;
                  }

                  .ui-bar-b a.ui-link:visited {
                      color: #ddf0f8 /*{b-bar-link-visited}*/;
                  }

                  .ui-bar-b a.ui-link:hover {
                  color: #ddf0f8 /*{b-bar-link-hover}*/;
                  }

                  .ui-bar-b a.ui-link:active {
                  color: #ddf0f8 /*{b-bar-link-active}*/;
                  }

                  .ui-body-b,
                  .ui-overlay-b {
                  border: 1px solid   #999 /*{b-body-border}*/;
                  background:    #f3f3f3 /*{b-body-background-color}*/;
                  color:      #222 /*{b-body-color}*/;
                  text-shadow: 0 /*{b-body-shadow-x}*/ 1px /*{b-body-shadow-y}*/ 0 /*{b-body-shadow-radius}*/ #fff /*{b-body-shadow-color}*/;
                  font-weight: normal;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #ddd /*{b-body-background-start}*/), to( #ccc /*{b-body-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #ddd /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #ddd /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #ddd /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #ddd /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #ddd /*{b-body-background-start}*/, #ccc /*{b-body-background-end}*/);
                  }
                  .ui-overlay-b {
                  background-image: none;
                  border-width: 0;
                  }
                  .ui-body-b,
                  .ui-body-b input,
                  .ui-body-b select,
                  .ui-body-b textarea,
                  .ui-body-b button {
                  font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
                  }
                  .ui-body-b .ui-link-inherit {
                  color:  #333 /*{b-body-color}*/;
                  }

                  .ui-body-b .ui-link {
                  color: #2489ce /*{b-body-link-color}*/;
                  font-weight: bold;
                  }

                  .ui-body-b .ui-link:visited {
                      color: #2489ce /*{b-body-link-visited}*/;
                  }

                  .ui-body-b .ui-link:hover {
                  color: #2489ce /*{b-body-link-hover}*/;
                  }

                  .ui-body-b .ui-link:active {
                  color: #2489ce /*{b-body-link-active}*/;
                  }

                  .ui-btn-up-b {
                  border: 1px solid   #044062 /*{b-bup-border}*/;
                  background:    #396b9e /*{b-bup-background-color}*/;
                  font-weight: bold;
                  color:      #fff /*{b-bup-color}*/;
                  text-shadow: 0 /*{b-bup-shadow-x}*/ 1px /*{b-bup-shadow-y}*/ 0 /*{b-bup-shadow-radius}*/ #194b7e /*{b-bup-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #5f9cc5 /*{b-bup-background-start}*/), to( #396b9e /*{b-bup-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #5f9cc5 /*{b-bup-background-start}*/, #396b9e /*{b-bup-background-end}*/);
                  }
                  .ui-btn-up-b:visited,
                  .ui-btn-up-b a.ui-link-inherit {
                  color:      #fff /*{b-bup-color}*/;
                  }
                  .ui-btn-hover-b {
                  border: 1px solid   #00415e /*{b-bhover-border}*/;
                  background:    #4b88b6 /*{b-bhover-background-color}*/;
                  font-weight: bold;
                  color:      #fff /*{b-bhover-color}*/;
                  text-shadow: 0 /*{b-bhover-shadow-x}*/ 1px /*{b-bhover-shadow-y}*/ 0 /*{b-bhover-shadow-radius}*/ #194b7e /*{b-bhover-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #6facd5 /*{b-bhover-background-start}*/), to( #4272a4 /*{b-bhover-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #6facd5 /*{b-bhover-background-start}*/, #4272a4 /*{b-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #6facd5 /*{b-bhover-background-start}*/, #4272a4 /*{b-bhover-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #6facd5 /*{b-bhover-background-start}*/, #4272a4 /*{b-bhover-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #6facd5 /*{b-bhover-background-start}*/, #4272a4 /*{b-bhover-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #6facd5 /*{b-bhover-background-start}*/, #4272a4 /*{b-bhover-background-end}*/);
                  }
                  .ui-btn-hover-b:visited,
                  .ui-btn-hover-b:hover,
                  .ui-btn-hover-b a.ui-link-inherit {
                  color:      #fff /*{b-bhover-color}*/;
                  }
                  .ui-btn-down-b {
                  border: 1px solid   #225377 /*{b-bdown-border}*/;
                  background:    #4e89c5 /*{b-bdown-background-color}*/;
                  font-weight: bold;
                  color:      #fff /*{b-bdown-color}*/;
                  text-shadow: 0 /*{b-bdown-shadow-x}*/ 1px /*{b-bdown-shadow-y}*/ 0 /*{b-bdown-shadow-radius}*/ #194b7e /*{b-bdown-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #295b8e /*{b-bdown-background-start}*/), to( #3e79b5 /*{b-bdown-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #295b8e /*{b-bdown-background-start}*/, #3e79b5 /*{b-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #295b8e /*{b-bdown-background-start}*/, #3e79b5 /*{b-bdown-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #295b8e /*{b-bdown-background-start}*/, #3e79b5 /*{b-bdown-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #295b8e /*{b-bdown-background-start}*/, #3e79b5 /*{b-bdown-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #295b8e /*{b-bdown-background-start}*/, #3e79b5 /*{b-bdown-background-end}*/);
                  }
                  .ui-btn-down-b:visited,
                  .ui-btn-down-b:hover,
                  .ui-btn-down-b a.ui-link-inherit {
                  color:      #fff /*{b-bdown-color}*/;
                  }
                  .ui-btn-up-b,
                  .ui-btn-hover-b,
                  .ui-btn-down-b {
                  font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
                  text-decoration: none;
                  }

                  /* C
                  ------------------------------------------------------------------------------------------ -----------------*/

                  .ui-bar-c {
                  border: 1px solid   #b3b3b3 /*{c-bar-border}*/;
                  background:    #eee /*{c-bar-background-color}*/;
                  color:      #3e3e3e /*{c-bar-color}*/;
                  font-weight: bold;
                  text-shadow: 0 /*{c-bar-shadow-x}*/ 1px /*{c-bar-shadow-y}*/ 0 /*{c-bar-shadow-radius}*/  #fff /*{c-bar-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #f0f0f0 /*{c-bar-background-start}*/), to( #ddd /*{c-bar-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #f0f0f0 /*{c-bar-background-start}*/, #ddd /*{c-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #f0f0f0 /*{c-bar-background-start}*/, #ddd /*{c-bar-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #f0f0f0 /*{c-bar-background-start}*/, #ddd /*{c-bar-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #f0f0f0 /*{c-bar-background-start}*/, #ddd /*{c-bar-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #f0f0f0 /*{c-bar-background-start}*/, #ddd /*{c-bar-background-end}*/);
                  }
                  .ui-bar-c .ui-link-inherit {
                  color:  #3e3e3e /*{c-bar-color}*/;
                  }

                  .ui-bar-c a.ui-link {
                  color: #7cc4e7 /*{c-bar-link-color}*/;
                  font-weight: bold;
                  }

                  .ui-bar-c a.ui-link:visited {
                      color: #2489ce /*{c-bar-link-visited}*/;
                  }

                  .ui-bar-c a.ui-link:hover {
                  color: #2489ce /*{c-bar-link-hover}*/;
                  }

                  .ui-bar-c a.ui-link:active {
                  color: #2489ce /*{c-bar-link-active}*/;
                  }

                  .ui-bar-c,
                  .ui-bar-c input,
                  .ui-bar-c select,
                  .ui-bar-c textarea,
                  .ui-bar-c button {
                  font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
                  }
                  .ui-body-c,
                  .ui-overlay-c {
                  border: 1px solid   #aaa /*{c-body-border}*/;
                  color:      #333 /*{c-body-color}*/;
                  text-shadow: 0 /*{c-body-shadow-x}*/ 1px /*{c-body-shadow-y}*/ 0 /*{c-body-shadow-radius}*/ #fff /*{c-body-shadow-color}*/;
                  background:    #f9f9f9 /*{c-body-background-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #f9f9f9 /*{c-body-background-start}*/), to( #eee /*{c-body-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eee /*{c-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eee /*{c-body-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eee /*{c-body-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eee /*{c-body-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eee /*{c-body-background-end}*/);
                  }
                  .ui-overlay-c {
                  background-image: none;
                  border-width: 0;
                  }
                  .ui-body-c,
                  .ui-body-c input,
                  .ui-body-c select,
                  .ui-body-c textarea,
                  .ui-body-c button {
                  font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
                  }
                  .ui-body-c .ui-link-inherit {
                  color:  #333 /*{c-body-color}*/;
                  }

                  .ui-body-c .ui-link {
                  color: #2489ce /*{c-body-link-color}*/;
                  font-weight: bold;
                  }

                  .ui-body-c .ui-link:visited {
                      color: #2489ce /*{c-body-link-visited}*/;
                  }

                  .ui-body-c .ui-link:hover {
                  color: #2489ce /*{c-body-link-hover}*/;
                  }

                  .ui-body-c .ui-link:active {
                  color: #2489ce /*{c-body-link-active}*/;
                  }

                  .ui-btn-up-c {
                  border: 1px solid   #ccc /*{c-bup-border}*/;
                  background:    #eee /*{c-bup-background-color}*/;
                  font-weight: bold;
                  color:      #222 /*{c-bup-color}*/;
                  text-shadow: 0 /*{c-bup-shadow-x}*/ 1px /*{c-bup-shadow-y}*/ 0 /*{c-bup-shadow-radius}*/ #fff /*{c-bup-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #fff /*{c-bup-background-start}*/), to( #f1f1f1 /*{c-bup-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #fff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #fff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #fff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #fff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #fff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/);
                  }
                  .ui-btn-up-c:visited,
                  .ui-btn-up-c a.ui-link-inherit {
                  color:      #2f3e46 /*{c-bup-color}*/;
                  }
                  .ui-btn-hover-c {
                  border: 1px solid   #bbb /*{c-bhover-border}*/;
                  background:    #dfdfdf /*{c-bhover-background-color}*/;
                  font-weight: bold;
                  color:      #222 /*{c-bhover-color}*/;
                  text-shadow: 0 /*{c-bhover-shadow-x}*/ 1px /*{c-bhover-shadow-y}*/ 0 /*{c-bhover-shadow-radius}*/ #fff /*{c-bhover-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #f6f6f6 /*{c-bhover-background-start}*/), to( #e0e0e0 /*{c-bhover-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #f6f6f6 /*{c-bhover-background-start}*/, #e0e0e0 /*{c-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #f6f6f6 /*{c-bhover-background-start}*/, #e0e0e0 /*{c-bhover-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #f6f6f6 /*{c-bhover-background-start}*/, #e0e0e0 /*{c-bhover-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #f6f6f6 /*{c-bhover-background-start}*/, #e0e0e0 /*{c-bhover-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #f6f6f6 /*{c-bhover-background-start}*/, #e0e0e0 /*{c-bhover-background-end}*/);
                  }
                  .ui-btn-hover-c:visited,
                  .ui-btn-hover-c:hover,
                  .ui-btn-hover-c a.ui-link-inherit {
                  color:      #2f3e46 /*{c-bhover-color}*/;
                  }
                  .ui-btn-down-c {
                  border: 1px solid   #bbb /*{c-bdown-border}*/;
                  background:    #d6d6d6 /*{c-bdown-background-color}*/;
                  font-weight: bold;
                  color:      #222 /*{c-bdown-color}*/;
                  text-shadow: 0 /*{c-bdown-shadow-x}*/ 1px /*{c-bdown-shadow-y}*/ 0 /*{c-bdown-shadow-radius}*/ #fff /*{c-bdown-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #d0d0d0 /*{c-bdown-background-start}*/), to( #dfdfdf /*{c-bdown-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #d0d0d0 /*{c-bdown-background-start}*/, #dfdfdf /*{c-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #d0d0d0 /*{c-bdown-background-start}*/, #dfdfdf /*{c-bdown-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #d0d0d0 /*{c-bdown-background-start}*/, #dfdfdf /*{c-bdown-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #d0d0d0 /*{c-bdown-background-start}*/, #dfdfdf /*{c-bdown-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #d0d0d0 /*{c-bdown-background-start}*/, #dfdfdf /*{c-bdown-background-end}*/);
                  }
                  .ui-btn-down-c:visited,
                  .ui-btn-down-c:hover,
                  .ui-btn-down-c a.ui-link-inherit {
                  color:      #2f3e46 /*{c-bdown-color}*/;
                  }
                  .ui-btn-up-c,
                  .ui-btn-hover-c,
                  .ui-btn-down-c {
                  font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
                  text-decoration: none;
                  }

                  /* D
                  ------------------------------------------------------------------------------------------ -----------------*/

                  .ui-bar-d {
                  border: 1px solid   #bbb /*{d-bar-border}*/;
                  background:    #bbb /*{d-bar-background-color}*/;
                  color:      #333 /*{d-bar-color}*/;
                  font-weight: bold;
                  text-shadow: 0 /*{d-bar-shadow-x}*/ 1px /*{d-bar-shadow-y}*/ 0 /*{d-bar-shadow-radius}*/ #eee /*{d-bar-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #ddd /*{d-bar-background-start}*/), to( #bbb /*{d-bar-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #ddd /*{d-bar-background-start}*/, #bbb /*{d-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #ddd /*{d-bar-background-start}*/, #bbb /*{d-bar-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #ddd /*{d-bar-background-start}*/, #bbb /*{d-bar-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #ddd /*{d-bar-background-start}*/, #bbb /*{d-bar-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #ddd /*{d-bar-background-start}*/, #bbb /*{d-bar-background-end}*/);
                  }
                  .ui-bar-d,
                  .ui-bar-d input,
                  .ui-bar-d select,
                  .ui-bar-d textarea,
                  .ui-bar-d button {
                  font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
                  }
                  .ui-bar-d .ui-link-inherit {
                  color:  #333 /*{d-bar-color}*/;
                  }

                  .ui-bar-d a.ui-link {
                  color: #2489ce /*{d-bar-link-color}*/;
                  font-weight: bold;
                  }

                  .ui-bar-d a.ui-link:visited {
                      color: #2489ce /*{d-bar-link-visited}*/;
                  }

                  .ui-bar-d a.ui-link:hover {
                  color: #2489ce /*{d-bar-link-hover}*/;
                  }

                  .ui-bar-d a.ui-link:active {
                  color: #2489ce /*{d-bar-link-active}*/;
                  }

                  .ui-body-d,
                  .ui-overlay-d {
                  border: 1px solid   #bbb /*{d-body-border}*/;
                  color:      #333 /*{d-body-color}*/;
                  text-shadow: 0 /*{d-body-shadow-x}*/ 1px /*{d-body-shadow-y}*/ 0 /*{d-body-shadow-radius}*/  #fff /*{d-body-shadow-color}*/;
                  background:    #fff /*{d-body-background-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #fff /*{d-body-background-start}*/), to( #fff /*{d-body-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #fff /*{d-body-background-start}*/, #fff /*{d-body-background-end}*/);
                  }
                  .ui-overlay-d {
                  background-image: none;
                  border-width: 0;
                  }
                  .ui-body-d,
                  .ui-body-d input,
                  .ui-body-d select,
                  .ui-body-d textarea,
                  .ui-body-d button {
                  font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
                  }
                  .ui-body-d .ui-link-inherit {
                  color:  #333 /*{d-body-color}*/;
                  }

                  .ui-body-d .ui-link {
                  color: #2489ce /*{d-body-link-color}*/;
                  font-weight: bold;
                  }

                  .ui-body-d .ui-link:visited {
                      color: #2489ce /*{d-body-link-visited}*/;
                  }

                  .ui-body-d .ui-link:hover {
                  color: #2489ce /*{d-body-link-hover}*/;
                  }

                  .ui-body-d .ui-link:active {
                  color: #2489ce /*{d-body-link-active}*/;
                  }

                  .ui-btn-up-d {
                  border: 1px solid   #bbb /*{d-bup-border}*/;
                  background:    #fff /*{d-bup-background-color}*/;
                  font-weight: bold;
                  color:      #333 /*{d-bup-color}*/;
                  text-shadow: 0 /*{d-bup-shadow-x}*/ 1px /*{d-bup-shadow-y}*/ 0 /*{d-bup-shadow-radius}*/ #fff /*{d-bup-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #fafafa /*{d-bup-background-start}*/), to( #f6f6f6 /*{d-bup-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #fafafa /*{d-bup-background-start}*/, #f6f6f6 /*{d-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #fafafa /*{d-bup-background-start}*/, #f6f6f6 /*{d-bup-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #fafafa /*{d-bup-background-start}*/, #f6f6f6 /*{d-bup-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #fafafa /*{d-bup-background-start}*/, #f6f6f6 /*{d-bup-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #fafafa /*{d-bup-background-start}*/, #f6f6f6 /*{d-bup-background-end}*/);
                  }
                  .ui-btn-up-d:visited,
                  .ui-btn-up-d a.ui-link-inherit {
                  color:      #333 /*{d-bup-color}*/;
                  }
                  .ui-btn-hover-d {
                  border: 1px solid   #aaa /*{d-bhover-border}*/;
                  background:    #eee /*{d-bhover-background-color}*/;
                  font-weight: bold;
                  color:      #333 /*{d-bhover-color}*/;
                  cursor: pointer;
                  text-shadow: 0 /*{d-bhover-shadow-x}*/ 1px /*{d-bhover-shadow-y}*/ 0 /*{d-bhover-shadow-radius}*/  #fff /*{d-bhover-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #eee /*{d-bhover-background-start}*/), to( #fff /*{d-bhover-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #eee /*{d-bhover-background-start}*/, #fff /*{d-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #eee /*{d-bhover-background-start}*/, #fff /*{d-bhover-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #eee /*{d-bhover-background-start}*/, #fff /*{d-bhover-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #eee /*{d-bhover-background-start}*/, #fff /*{d-bhover-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #eee /*{d-bhover-background-start}*/, #fff /*{d-bhover-background-end}*/);
                  }
                  .ui-btn-hover-d:visited,
                  .ui-btn-hover-d:hover,
                  .ui-btn-hover-d a.ui-link-inherit {
                  color:      #333 /*{d-bhover-color}*/;
                  }
                  .ui-btn-down-d {
                  border: 1px solid   #aaa /*{d-bdown-border}*/;
                  background:    #eee /*{d-bdown-background-color}*/;
                  font-weight: bold;
                  color:      #333 /*{d-bdown-color}*/;
                  text-shadow: 0 /*{d-bdown-shadow-x}*/ 1px /*{d-bdown-shadow-y}*/ 0 /*{d-bdown-shadow-radius}*/  #fff /*{d-bdown-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #e5e5e5 /*{d-bdown-background-start}*/), to( #f2f2f2 /*{d-bdown-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #e5e5e5 /*{d-bdown-background-start}*/, #f2f2f2 /*{d-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #e5e5e5 /*{d-bdown-background-start}*/, #f2f2f2 /*{d-bdown-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #e5e5e5 /*{d-bdown-background-start}*/, #f2f2f2 /*{d-bdown-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #e5e5e5 /*{d-bdown-background-start}*/, #f2f2f2 /*{d-bdown-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #e5e5e5 /*{d-bdown-background-start}*/, #f2f2f2 /*{d-bdown-background-end}*/);
                  }
                  .ui-btn-down-d:visited,
                  .ui-btn-down-d:hover,
                  .ui-btn-down-d a.ui-link-inherit {
                  color:      #333 /*{d-bdown-color}*/;
                  }
                  .ui-btn-up-d,
                  .ui-btn-hover-d,
                  .ui-btn-down-d {
                  font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
                  text-decoration: none;
                  }

                  /* E
                  ------------------------------------------------------------------------------------------ -----------------*/

                  .ui-bar-e {
                  border: 1px solid   #f7c942 /*{e-bar-border}*/;
                  background:    #fadb4e /*{e-bar-background-color}*/;
                  color:      #333 /*{e-bar-color}*/;
                  font-weight: bold;
                  text-shadow: 0 /*{e-bar-shadow-x}*/ 1px /*{e-bar-shadow-y}*/ 0 /*{e-bar-shadow-radius}*/  #fff /*{e-bar-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #fceda7 /*{e-bar-background-start}*/), to( #fbef7e /*{e-bar-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #fceda7 /*{e-bar-background-start}*/, #fbef7e /*{e-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #fceda7 /*{e-bar-background-start}*/, #fbef7e /*{e-bar-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #fceda7 /*{e-bar-background-start}*/, #fbef7e /*{e-bar-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #fceda7 /*{e-bar-background-start}*/, #fbef7e /*{e-bar-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #fceda7 /*{e-bar-background-start}*/, #fbef7e /*{e-bar-background-end}*/);
                  }
                  .ui-bar-e,
                  .ui-bar-e input,
                  .ui-bar-e select,
                  .ui-bar-e textarea,
                  .ui-bar-e button {
                  font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
                  }
                  .ui-bar-e .ui-link-inherit {
                  color:  #333 /*{e-bar-color}*/;
                  }

                  .ui-bar-e a.ui-link {
                  color: #2489ce /*{e-bar-link-color}*/;
                  font-weight: bold;
                  }

                  .ui-bar-e a.ui-link:visited {
                      color: #2489ce /*{e-bar-link-visited}*/;
                  }

                  .ui-bar-e a.ui-link:hover {
                  color: #2489ce /*{e-bar-link-hover}*/;
                  }

                  .ui-bar-e a.ui-link:active {
                  color: #2489ce /*{e-bar-link-active}*/;
                  }

                  .ui-body-e,
                  .ui-overlay-e {
                  border: 1px solid   #f7c942 /*{e-body-border}*/;
                  color:      #222 /*{e-body-color}*/;
                  text-shadow: 0 /*{e-body-shadow-x}*/ 1px /*{e-body-shadow-y}*/ 0 /*{e-body-shadow-radius}*/  #fff /*{e-body-shadow-color}*/;
                  background:    #fff9df /*{e-body-background-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #fffadf /*{e-body-background-start}*/), to( #fff3a5 /*{e-body-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #fffadf /*{e-body-background-start}*/, #fff3a5 /*{e-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #fffadf /*{e-body-background-start}*/, #fff3a5 /*{e-body-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #fffadf /*{e-body-background-start}*/, #fff3a5 /*{e-body-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #fffadf /*{e-body-background-start}*/, #fff3a5 /*{e-body-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #fffadf /*{e-body-background-start}*/, #fff3a5 /*{e-body-background-end}*/);
                  }
                  .ui-overlay-e {
                  background-image: none;
                  border-width: 0;
                  }
                  .ui-body-e,
                  .ui-body-e input,
                  .ui-body-e select,
                  .ui-body-e textarea,
                  .ui-body-e button {
                  font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
                  }
                  .ui-body-e .ui-link-inherit {
                  color:  #222 /*{e-body-color}*/;
                  }

                  .ui-body-e .ui-link {
                  color: #2489ce /*{e-body-link-color}*/;
                  font-weight: bold;
                  }

                  .ui-body-e .ui-link:visited {
                      color: #2489ce /*{e-body-link-visited}*/;
                  }

                  .ui-body-e .ui-link:hover {
                  color: #2489ce /*{e-body-link-hover}*/;
                  }

                  .ui-body-e .ui-link:active {
                  color: #2489ce /*{e-body-link-active}*/;
                  }

                  .ui-btn-up-e {
                  border: 1px solid   #f4c63f /*{e-bup-border}*/;
                  background:    #fadb4e /*{e-bup-background-color}*/;
                  font-weight: bold;
                  color:      #222 /*{e-bup-color}*/;
                  text-shadow: 0 /*{e-bup-shadow-x}*/ 1px /*{e-bup-shadow-y}*/ 0 /*{e-bup-shadow-radius}*/  #fff /*{e-bup-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #ffefaa /*{e-bup-background-start}*/), to( #ffe155 /*{e-bup-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #ffefaa /*{e-bup-background-start}*/, #ffe155 /*{e-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #ffefaa /*{e-bup-background-start}*/, #ffe155 /*{e-bup-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #ffefaa /*{e-bup-background-start}*/, #ffe155 /*{e-bup-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #ffefaa /*{e-bup-background-start}*/, #ffe155 /*{e-bup-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #ffefaa /*{e-bup-background-start}*/, #ffe155 /*{e-bup-background-end}*/);
                  }
                  .ui-btn-up-e:visited,
                  .ui-btn-up-e a.ui-link-inherit {
                  color:      #222 /*{e-bup-color}*/;
                  }
                  .ui-btn-hover-e {
                  border: 1px solid   #f2c43d /*{e-bhover-border}*/;
                  background:    #fbe26f /*{e-bhover-background-color}*/;
                  font-weight: bold;
                  color:      #111 /*{e-bhover-color}*/;
                  text-shadow: 0 /*{e-bhover-shadow-x}*/ 1px /*{e-bhover-shadow-y}*/ 0 /*{e-bhover-shadow-radius}*/  #fff /*{e-bhover-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #fff5ba /*{e-bhover-background-start}*/), to( #fbdd52 /*{e-bhover-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #fff5ba /*{e-bhover-background-start}*/, #fbdd52 /*{e-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #fff5ba /*{e-bhover-background-start}*/, #fbdd52 /*{e-bhover-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #fff5ba /*{e-bhover-background-start}*/, #fbdd52 /*{e-bhover-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #fff5ba /*{e-bhover-background-start}*/, #fbdd52 /*{e-bhover-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #fff5ba /*{e-bhover-background-start}*/, #fbdd52 /*{e-bhover-background-end}*/);
                  }
                  .ui-btn-hover-e:visited,
                  .ui-btn-hover-e:hover,
                  .ui-btn-hover-e a.ui-link-inherit {
                  color:      #333 /*{e-bhover-color}*/;
                  }
                  .ui-btn-down-e {
                  border: 1px solid   #f2c43d /*{e-bdown-border}*/;
                  background:    #fceda7 /*{e-bdown-background-color}*/;
                  font-weight: bold;
                  color:      #111 /*{e-bdown-color}*/;
                  text-shadow: 0 /*{e-bdown-shadow-x}*/ 1px /*{e-bdown-shadow-y}*/ 0 /*{e-bdown-shadow-radius}*/  #fff /*{e-bdown-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #f8d94c /*{e-bdown-background-start}*/), to( #fadb4e /*{e-bdown-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #f8d94c /*{e-bdown-background-start}*/, #fadb4e /*{e-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #f8d94c /*{e-bdown-background-start}*/, #fadb4e /*{e-bdown-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #f8d94c /*{e-bdown-background-start}*/, #fadb4e /*{e-bdown-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #f8d94c /*{e-bdown-background-start}*/, #fadb4e /*{e-bdown-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #f8d94c /*{e-bdown-background-start}*/, #fadb4e /*{e-bdown-background-end}*/);
                  }
                  .ui-btn-down-e:visited,
                  .ui-btn-down-e:hover,
                  .ui-btn-down-e a.ui-link-inherit {
                  color:      #333 /*{e-bdown-color}*/;
                  }
                  .ui-btn-up-e,
                  .ui-btn-hover-e,
                  .ui-btn-down-e {
                  font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
                  text-decoration: none;
                  }

                  .ui-btn-up-f {
                  border: 1px solid #3b6e22 /*{f-bup-border}*/;
                  background: #3b6e22 /*{f-bup-background-color}*/;
                  font-weight: bold;
                  color: #ffffff /*{f-bup-color}*/;
                  text-shadow: 0 /*{f-bup-shadow-x}*/ 1px /*{f-bup-shadow-y}*/ 0 /*{f-bup-shadow-radius}*/ #444444 /*{f-bup-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #67ae55 /*{f-bup-background-start}*/), to( #578843 /*{f-bup-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #67ae55 /*{a-bup-background-start}*/, #578843 /*{f-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #67ae55 /*{a-bup-background-start}*/, #578843 /*{f-bup-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #67ae55 /*{a-bup-background-start}*/, #578843 /*{f-bup-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #67ae55 /*{a-bup-background-start}*/, #578843 /*{f-bup-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #67ae55 /*{a-bup-background-start}*/, #578843 /*{f-bup-background-end}*/);
                  }
                  .ui-btn-up-f:visited,
                  .ui-btn-up-f a.ui-link-inherit {
                  color: #ffffff /*{a-bup-color}*/;
                  }
                  .ui-btn-hover-f {
                  border: 1px solid #3b6e22 /*{a-bhover-border}*/;
                  background: #3b6e22 /*{a-bhover-background-color}*/;
                  font-weight: bold;
                  color: #ffffff /*{a-bhover-color}*/;
                  text-shadow: 0 /*{a-bhover-shadow-x}*/ 1px /*{a-bhover-shadow-y}*/ 0 /*{a-bhover-shadow-radius}*/ #444444 /*{a-bhover-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #79bc64 /*{a-bhover-background-start}*/), to( #578843 /*{a-bhover-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #79bc64 /*{f-bhover-background-start}*/, #578843 /*{f-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #79bc64 /*{f-bhover-background-start}*/, #578843 /*{f-bhover-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #79bc64 /*{f-bhover-background-start}*/, #578843 /*{f-bhover-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #79bc64 /*{f-bhover-background-start}*/, #578843 /*{f-bhover-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #79bc64 /*{f-bhover-background-start}*/, #578843 /*{f-bhover-background-end}*/);
                  }
                  .ui-btn-hover-f:visited,
                  .ui-btn-hover-f:hover,
                  .ui-btn-hover-f a.ui-link-inherit {
                  color: #ffffff /*{a-bhover-color}*/;
                  }
                  .ui-btn-down-f {
                  border: 1px solid #3b6e22 /*{a-bdown-border}*/;
                  background: #3b6e22 /*{a-bdown-background-color}*/;
                  font-weight: bold;
                  color: #ffffff /*{a-bdown-color}*/;
                  text-shadow: 0 /*{a-bdown-shadow-x}*/ 1px /*{a-bdown-shadow-y}*/ 0 /*{a-bdown-shadow-radius}*/ #444444 /*{a-bdown-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #578843 /*{a-bdown-background-start}*/), to( #79bc64 /*{f-bdown-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #578843 /*{f-bdown-background-start}*/, #79bc64 /*{f-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #578843 /*{f-bdown-background-start}*/, #79bc64 /*{f-bdown-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #578843 /*{f-bdown-background-start}*/, #79bc64 /*{f-bdown-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #578843 /*{f-bdown-background-start}*/, #79bc64 /*{f-bdown-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #578843 /*{f-bdown-background-start}*/, #79bc64 /*{f-bdown-background-end}*/);
                  }
                  .ui-btn-down-f:visited,
                  .ui-btn-down-f:hover,
                  .ui-btn-down-f a.ui-link-inherit {
                  color: #ffffff /*{a-bdown-color}*/;
                  }
                  .ui-btn-up-f,
                  .ui-btn-hover-f,
                  .ui-btn-down-f {
                    font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
                  text-decoration: none;
                  }

                  .ui-btn-up-g {
                  border: 1px solid #c1272d /*{g-bup-border}*/;
                  background: #c1272d /*{g-bup-background-color}*/;
                  font-weight: bold;
                  color: #ffffff /*{g-bup-color}*/;
                  text-shadow: 0 /*{g-bup-shadow-x}*/ 1px /*{g-bup-shadow-y}*/ 0 /*{g-bup-shadow-radius}*/ #444444 /*{g-bup-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #d42a31 /*{g-bup-background-start}*/), to( #ad2328 /*{g-bup-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #d42a31 /*{g-bup-background-start}*/, #ad2328 /*{g-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #d42a31 /*{g-bup-background-start}*/, #ad2328 /*{g-bup-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #d42a31 /*{g-bup-background-start}*/, #ad2328 /*{g-bup-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #d42a31 /*{g-bup-background-start}*/, #ad2328 /*{g-bup-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #d42a31 /*{g-bup-background-start}*/, #ad2328 /*{g-bup-background-end}*/);
                  }
                  .ui-btn-up-g:visited,
                  .ui-btn-up-g a.ui-link-inherit {
                  color: #ffffff /*{g-bup-color}*/;
                  }
                  .ui-btn-hover-g {
                  border: 1px solid #dd2c33 /*{g-bhover-border}*/;
                  background: #dd2c33 /*{g-bhover-background-color}*/;
                  font-weight: bold;
                  color: #ffffff /*{g-bhover-color}*/;
                  text-shadow: 0 /*{g-bhover-shadow-x}*/ 1px /*{g-bhover-shadow-y}*/ 0 /*{g-bhover-shadow-radius}*/ #444444 /*{g-bhover-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #f33038 /*{g-bhover-background-start}*/), to( #c6272d /*{g-bhover-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #f33038 /*{g-bhover-background-start}*/, #c6272d /*{g-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #f33038 /*{g-bhover-background-start}*/, #c6272d /*{g-bhover-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #f33038 /*{g-bhover-background-start}*/, #c6272d /*{g-bhover-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #f33038 /*{g-bhover-background-start}*/, #c6272d /*{g-bhover-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #f33038 /*{g-bhover-background-start}*/, #c6272d /*{g-bhover-background-end}*/);
                  }
                  .ui-btn-hover-g:visited,
                  .ui-btn-hover-g:hover,
                  .ui-btn-hover-g a.ui-link-inherit {
                  color: #ffffff /*{g-bhover-color}*/;
                  }
                  .ui-btn-down-g {
                  border: 1px solid #dd2c33 /*{g-bdown-border}*/;
                  background: #dd2c33 /*{g-bdown-background-color}*/;
                  font-weight: bold;
                  color: #ffffff /*{g-bdown-color}*/;
                  text-shadow: 0 /*{g-bdown-shadow-x}*/ 1px /*{g-bdown-shadow-y}*/ 0 /*{g-bdown-shadow-radius}*/ #444444 /*{g-bdown-shadow-color}*/;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #c6272d /*{g-bdown-background-start}*/), to( #f33038 /*{g-bdown-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #c6272d /*{g-bdown-background-start}*/, #f33038 /*{g-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #c6272d /*{g-bdown-background-start}*/, #f33038 /*{g-bdown-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #c6272d /*{g-bdown-background-start}*/, #f33038 /*{g-bdown-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #c6272d /*{g-bdown-background-start}*/, #f33038 /*{g-bdown-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #c6272d /*{g-bdown-background-start}*/, #f33038 /*{g-bdown-background-end}*/);
                  }
                  .ui-btn-down-g:visited,
                  .ui-btn-down-g:hover,
                  .ui-btn-down-g a.ui-link-inherit {
                  color: #ffffff /*{g-bdown-color}*/;
                  }
                  .ui-btn-up-g,
                  .ui-btn-hover-g,
                  .ui-btn-down-g {
                    font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
                  text-decoration: none;
                  }

                   

                  /* Structure */

                  /* links within "buttons"
                  ------------------------------------------------------------------------------------------ -----------------*/

                  a.ui-link-inherit {
                  text-decoration: none !important;
                  }

                  /* Active class used as the "on" state across all themes
                  ------------------------------------------------------------------------------------------ -----------------*/
                  .ui-btn-active {
                  border: 1px solid   #2373a5 /*{global-active-border}*/;
                  background:    #5393c5 /*{global-active-background-color}*/;
                  font-weight: bold;
                  color:      #fff /*{global-active-color}*/;
                  cursor: pointer;
                  text-shadow: 0 /*{global-active-shadow-x}*/ 1px /*{global-active-shadow-y}*/ 0 /*{global-active-shadow-radius}*/ #3373a5 /*{global-active-shadow-color}*/;
                  text-decoration: none;
                  background-image: -webkit-gradient(linear, left top, left bottom, from( #5393c5 /*{global-active-background-start}*/), to( #6facd5 /*{global-active-background-end}*/)); /* Saf4+, Chrome */
                  background-image: -webkit-linear-gradient( #5393c5 /*{global-active-background-start}*/, #6facd5 /*{global-active-background-end}*/); /* Chrome 10+, Saf5.1+ */
                  background-image:    -moz-linear-gradient( #5393c5 /*{global-active-background-start}*/, #6facd5 /*{global-active-background-end}*/); /* FF3.6 */
                  background-image:     -ms-linear-gradient( #5393c5 /*{global-active-background-start}*/, #6facd5 /*{global-active-background-end}*/); /* IE10 */
                  background-image:      -o-linear-gradient( #5393c5 /*{global-active-background-start}*/, #6facd5 /*{global-active-background-end}*/); /* Opera 11.10+ */
                  background-image:         linear-gradient( #5393c5 /*{global-active-background-start}*/, #6facd5 /*{global-active-background-end}*/);
                  font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
                  }
                  .ui-btn-active:visited,
                  .ui-btn-active:hover,
                  .ui-btn-active a.ui-link-inherit {
                  color:      #fff /*{global-active-color}*/;
                  }

                  /* button inner top highlight
                  ------------------------------------------------------------------------------------------ -----------------*/

                  .ui-btn-inner {
                  border-top: 1px solid  #fff;
                  border-color:    rgba(255,255,255,.3);
                  }

                  /* corner rounding classes
                  ------------------------------------------------------------------------------------------ -----------------*/

                  .ui-corner-all {
                  -webkit-border-radius:     .6em /*{global-radii-blocks}*/;
                  border-radius:       .6em /*{global-radii-blocks}*/;
                  }

                  /* Form field separator
                  ------------------------------------------------------------------------------------------ -----------------*/
                  .ui-br {
                  border-color: rgb(130,130,130);
                  border-color: rgba(130,130,130,.3);
                  border-style: solid;
                  }

                  /* Interaction cues
                  ------------------------------------------------------------------------------------------ -----------------*/
                  .ui-disabled {
                  filter: Alpha(Opacity=30);
                  opacity: .3;
                  zoom: 1;
                  }
                  .ui-disabled,
                  .ui-disabled a {
                  cursor: default !important;
                  pointer-events: none;
                  }

                  /* Icons
                  ------------------------------------------------------------------------------------------ -----------------*/

                  .ui-icon,
                  .ui-icon-searchfield:after {
                  background-color:       #666 /*{global-icon-color}*/;
                  background-color:       rgba(0,0,0,.4) /*{global-icon-disc}*/;
                  background-image: url(images/icons-18-white.png) /*{global-icon-set}*/;
                  background-repeat: no-repeat;
                  -webkit-border-radius:     9px;
                  border-radius:       9px;
                  }

                  /* Alt icon color
                  ------------------------------------------------------------------------------------------ -----------------*/

                  .ui-icon-alt .ui-icon,
                  .ui-icon-alt .ui-icon-searchfield:after {
                  background-color:       #fff;
                  background-color:       rgba(255,255,255,.3);
                  background-image: url(images/icons-18-black.png);
                  background-repeat: no-repeat;
                  }

                  /* No disc
                  ------------------------------------------------------------------------------------------ -----------------*/

                  .ui-icon-nodisc .ui-icon,
                  .ui-icon-nodisc .ui-icon-searchfield:after,
                  .ui-icon-nodisc .ui-icon-alt .ui-icon,
                  .ui-icon-nodisc .ui-icon-alt .ui-icon-searchfield:after {
                  background-color: transparent;
                  }

                  /* Icon sprite
                  ------------------------------------------------------------------------------------------ -----------------*/

                  /* plus minus */
                  .ui-icon-plus {
                  background-position:  -1px -1px;
                  }
                  .ui-icon-minus {
                  background-position:  -37px -1px;
                  }
                  /* delete/close */
                  .ui-icon-delete {
                  background-position:  -73px -1px;
                  }
                  /* arrows */
                  .ui-icon-arrow-r {
                  background-position:  -108px -1px;
                  }
                  .ui-icon-arrow-l {
                  background-position:  -144px -1px;
                  }
                  .ui-icon-arrow-u {
                  background-position:  -180px -1px;
                  }
                  .ui-icon-arrow-d {
                  background-position:  -216px -1px;
                  }
                  /* misc */
                  .ui-icon-check {
                  background-position:  -252px -1px;
                  }
                  .ui-icon-gear {
                  background-position:  -288px -1px;
                  }
                  .ui-icon-refresh {
                  background-position:  -323px -1px;
                  }
                  .ui-icon-forward {
                  background-position:  -360px -1px;
                  }
                  .ui-icon-back {
                  background-position:  -396px -1px;
                  }
                  .ui-icon-grid {
                  background-position:  -432px -1px;
                  }
                  .ui-icon-star {
                  background-position:  -467px -1px;
                  }
                  .ui-icon-alert {
                  background-position:  -503px -1px;
                  }
                  .ui-icon-info {
                  background-position:  -539px -1px;
                  }
                  .ui-icon-home {
                  background-position:  -575px -1px;
                  }
                  /* search */
                  .ui-icon-search,
                  .ui-icon-searchfield:after {
                  background-position:  -611px -1px;
                  }
                  /* checkbox radio */
                  .ui-icon-checkbox-on {
                  background-position:  -647px -1px;
                  }
                  .ui-icon-checkbox-off {
                  background-position:  -683px -1px;
                  }
                  .ui-icon-radio-on {
                  background-position:  -718px -1px;
                  }
                  .ui-icon-radio-off {
                  background-position:  -754px -1px;
                  }
                  /* menu edit */
                  .ui-icon-bars {
                  background-position:  -788px -1px;

                  }
                  .ui-icon-edit {
                  background-position:  -824px -1px;
                  }

                  /* HD/"retina" sprite
                  ------------------------------------------------------------------------------------------ -----------------*/

                  @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
                         only screen and (min--moz-device-pixel-ratio: 1.3),
                         only screen and (min-resolution: 200dpi) {

                  .ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
                  .ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
                  .ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
                  .ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-bars, .ui-icon-edit,
                  .ui-icon-search, .ui-icon-searchfield:after,
                  .ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on {
                    background-image: url(images/icons-36-white.png);
                    -moz-background-size: 864px 18px;
                    -o-background-size: 864px 18px;
                    -webkit-background-size: 864px 18px;
                    background-size: 864px 18px;
                  }

                  .ui-icon-alt .ui-icon {
                    background-image: url(images/icons-36-black.png);
                  }

                  .ui-icon-plus {
                    background-position:  0 50%;
                  }
                  .ui-icon-minus {
                    background-position:  -36px 50%;
                  }
                  .ui-icon-delete {
                    background-position:  -72px 50%;
                  }
                  .ui-icon-arrow-r {
                    background-position:  -108px 50%;
                  }
                  .ui-icon-arrow-l {
                    background-position:  -144px 50%;
                  }
                  .ui-icon-arrow-u {
                    background-position:  -179px 50%;
                  }
                  .ui-icon-arrow-d {
                    background-position:  -215px 50%;
                  }
                  .ui-icon-check {
                    background-position:  -252px 50%;
                  }
                  .ui-icon-gear {
                    background-position:  -287px 50%;
                  }
                  .ui-icon-refresh {
                    background-position:  -323px 50%;
                  }
                  .ui-icon-forward {
                    background-position:  -360px 50%;
                  }
                  .ui-icon-back {
                    background-position:  -395px 50%;
                  }
                  .ui-icon-grid {
                    background-position:  -431px 50%;
                  }
                  .ui-icon-star {
                    background-position:  -467px 50%;
                  }
                  .ui-icon-alert {
                    background-position:  -503px 50%;
                  }
                  .ui-icon-info {
                    background-position:  -538px 50%;
                  }
                  .ui-icon-home {
                    background-position:  -575px 50%;
                  }
                  .ui-icon-search,
                  .ui-icon-searchfield:after {
                    background-position:  -611px 50%;
                  }
                  .ui-icon-checkbox-on {
                    background-position:  -647px 50%;
                  }
                  .ui-icon-checkbox-off {
                    background-position:  -683px 50%;
                  }
                  .ui-icon-radio-on {
                    background-position:  -718px 50%;
                  }
                  .ui-icon-radio-off {
                    background-position:  -754px 50%;
                  }
                  .ui-icon-bars {
                    background-position:  -788px 50%;

                  }.ui-icon-edit {
                    background-position:  -824px 50%;
                  }
                  }

                  /* checks,radios */
                  .ui-checkbox .ui-icon,
                  .ui-selectmenu-list .ui-icon {
                  -webkit-border-radius: 3px;
                  border-radius: 3px;
                  }
                  .ui-icon-checkbox-off,
                  .ui-icon-radio-off {
                  background-color: transparent;
                  }
                  .ui-checkbox-on .ui-icon,
                  .ui-radio-on .ui-icon {
                  background-color: #4596ce /*{global-active-background-color}*/; /* NOTE: this hex should match the active state color. It's repeated here for cascade */
                  }

                  /* loading icon */
                  .ui-icon-loading {
                  background: url(images/ajax-loader.gif);
                  background-size: 46px 46px;
                  }

                  /* Button corner class
                  ------------------------------------------------------------------------------------------ -----------------*/
                  .ui-btn-corner-all {
                  -webkit-border-radius:     1em /*{global-radii-buttons}*/;
                  border-radius:       1em /*{global-radii-buttons}*/;
                  }

                  /* radius clip workaround for cleaning up corner trapping */
                  .ui-corner-all,
                  .ui-btn-corner-all {
                  -webkit-background-clip: padding;
                  background-clip: padding-box;
                  }

                  /* Overlay / modal
                  ------------------------------------------------------------------------------------------ -----------------*/

                  .ui-overlay {
                  background: #666;
                  filter: Alpha(Opacity=50);
                  opacity: .5;
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  }
                  .ui-overlay-shadow {
                  -moz-box-shadow: 0 0 12px    rgba(0,0,0,.6);
                  -webkit-box-shadow: 0 0 12px   rgba(0,0,0,.6);
                  box-shadow: 0 0 12px     rgba(0,0,0,.6);
                  }
                  .ui-shadow {
                  -moz-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/    rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
                  -webkit-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/   rgba(0,0,0,.2) /*{global-box-shadow-color}*/;
                  box-shadow: 0 1px 3px /*{global-box-shadow-size}*/     rgba(0,0,0,.2) /*{global-box-shadow-color}*/
                  }
                  .ui-bar-a .ui-shadow,
                  .ui-bar-b .ui-shadow ,
                  .ui-bar-c .ui-shadow  {
                  -moz-box-shadow: 0 1px 0     rgba(255,255,255,.3);
                  -webkit-box-shadow: 0 1px 0    rgba(255,255,255,.3);
                  box-shadow: 0 1px 0      rgba(255,255,255,.3);
                  }
                  .ui-shadow-inset {
                  -moz-box-shadow: inset 0 1px 4px   rgba(0,0,0,.2);
                  -webkit-box-shadow: inset 0 1px 4px  rgba(0,0,0,.2);
                  box-shadow: inset 0 1px 4px    rgba(0,0,0,.2);
                  }
                  .ui-icon-shadow {
                  -moz-box-shadow: 0 1px 0     rgba(255,255,255,.4) /*{global-icon-shadow}*/;
                  -webkit-box-shadow: 0 1px 0    rgba(255,255,255,.4) /*{global-icon-shadow}*/;
                  box-shadow: 0 1px 0      rgba(255,255,255,.4) /*{global-icon-shadow}*/;
                  }

                  /* Focus state - set here for specificity (note: these classes are added by JavaScript)
                  ------------------------------------------------------------------------------------------ -----------------*/

                  .ui-btn:focus, .ui-link-inherit:focus {
                  outline: 0;
                  }
                  .ui-btn.ui-focus {
                  z-index: 1;
                  }
                  .ui-focus,
                  .ui-btn:focus {
                  -moz-box-shadow: inset 0 0 3px   #387bbe /*{global-active-background-color}*/, 0 0 9px   #387bbe /*{global-active-background-color}*/;
                  -webkit-box-shadow: inset 0 0 3px  #387bbe /*{global-active-background-color}*/, 0 0 9px   #387bbe /*{global-active-background-color}*/;
                  box-shadow: inset 0 0 3px    #387bbe /*{global-active-background-color}*/, 0 0 9px   #387bbe /*{global-active-background-color}*/;
                  }
                  .ui-input-text.ui-focus,
                  .ui-input-search.ui-focus {
                  -moz-box-shadow: 0 0 12px    #387bbe /*{global-active-background-color}*/;
                  -webkit-box-shadow: 0 0 12px   #387bbe /*{global-active-background-color}*/;
                  box-shadow: 0 0 12px      #387bbe /*{global-active-background-color}*/;
                  }

                  /* unset box shadow in browsers that don't do it right
                  ------------------------------------------------------------------------------------------ -----------------*/

                  .ui-mobile-nosupport-boxshadow * {
                  -moz-box-shadow: none !important;
                  -webkit-box-shadow: none !important;
                  box-shadow: none !important;
                  }

                  /* ...and bring back focus */
                  .ui-mobile-nosupport-boxshadow .ui-focus,
                  .ui-mobile-nosupport-boxshadow .ui-btn:focus,
                  .ui-mobile-nosupport-boxshadow .ui-link-inherit:focus {
                  outline-width: 1px;
                  outline-style: auto;
                  }

                   

                  .no-shadow {
                    text-shadow: none;
                  }

                   

                  ::-ms-clear {
                    width: 0;
                    height: 0;
                  }
                  ::-ms-reveal {
                    width: 0;
                    height: 0;
                  }

                   

                  sbmobile.css:

                   

                  .ui-simple-container {

                          background-color: #AAAAAA;

                  }

                  .mobile-msg-text .ui-field-contain {

                          background: transparent;

                          vertical-align: middle;

                          margin: 0px;

                          border: 0px;

                          outline: 0px;

                  }

                  .mobile-error .ui-btn-up-c {

                          border: 0px;

                          border-radius: 0px;

                          border-top: 0px;

                          border-width: 0px;

                          outline: 0px;

                          box-shadow: none;

                          -moz-box-shadow: none;

                          -webkit-box-shadow: none;

                          background: transparent;

                  }

                  .mobile-error .ui-shadow {

                          border: 0px;

                          border-radius: 0px;

                          border-top: 0px;

                          border-width: 0px;

                          outline: 0px;

                          box-shadow: none;

                          -moz-box-shadow: none;

                          -webkit-box-shadow: none;

                          background: transparent;

                  }

                  .ui-btn-inner {

                          padding-left: 1px;

                          padding-right: 1px;

                          text-transform: none;

                  }

                  • 6. Re: Footer whitespace appears after calling getPicture
                    VectorP Level 4

                    Some feedback:

                     

                    1. You have

                    <splash src="www/res/screen/android/drawable-land-ldpi-screen.png" density="land-ldpi"/> (etc)

                    Instead, you should use the qualifier attribute (instead of 'density') for Android, whenever you specify compound qualifiers.

                     

                    2. Some of your splashes are specified for portrait only, not for landscape

                     

                    3. Apple seems to define other required splash screen sizes than those you specified.

                    Please compare with this official doc: Launch Screen - Graphics - iOS Human Interface Guidelines

                     

                    [In iOS, the splash screens (launch images) determine the way the device will scale; that's why it's important to have the correct splashes. So, please add specifications where necessary, and double check if the actual graphiscs dimensions are exactly as specified in config]

                     

                    4. Your 'viewport' META element is OK and should not be cause for trouble.

                    • 7. Re: Footer whitespace appears after calling getPicture
                      brandond63742483 Level 1

                      Considering the fact that I have not altered any splashes resulting from the PhoneGap create command, if any of these were indeed the root cause, would this not be a more widespread issue than just mine?

                      • 8. Re: Footer whitespace appears after calling getPicture
                        VectorP Level 4

                        I understand your point. But could you see it this way?:

                        - only a minority will test with these devices, because they are either expensive or still quite new.

                        - of that minority, a majority will understand that 'phonegap create' only creates a template, which still should be tailored to the developer's needs.

                         

                        That leaves a small number of 'problem cases', of which again a small percentage finds its way to this forum. They might first search the forum and find similar questions, which are answered in the way I did.

                        And that leaves you... :-)

                        • 9. Re: Footer whitespace appears after calling getPicture
                          kerrishotts Adobe Community Professional

                          brandond63742483,

                           

                          Next time, please post a link to a gist or a repo. That was hard to read through. And I didn't notice any JavaScript there -- and it would certainly help to see how you're calling getPicture.

                           

                          Some thoughts:

                           

                          1. Do you really need all those plugins? Try removing them all (except the camera plugin) and then start adding back the ones you know you will need. It's plausible by removing them all, your particular issue will go away, and then by adding plugins back you'll discover if a plugin is getting in the way. You'll probably need status bar and splash screen plugins, but I'd start with as few plugins as you possibly can.

                           

                          2. Please post a screenshot. I'm guessing at what your screen ends up looking like, but I might not be guessing correctly.

                           

                          3. After you add the status bar plugin back, try adding this to your config.xml (so that instead of overlaying your content, it pushes the content down):

                           

                              <preference name="StatusBarOverlaysWebView" value="false" />

                              <preference name="StatusBarBackgroundColor" value="#000000" />

                           

                          The idea here being that this might at least mitigate the problem you're seeing.

                           

                          4. Make sure you're on the newest version of the plugins

                           

                          5. Conversely, it might also help to go back a few point releases on plugins in case what you're seeing is a regression.

                           

                          6. As far as splashes go -- don't concern yourself with iPad Pro 12.9 splashes yet. Cordova doesn't support it at native resolution yet. I'm working on fixing that, but it will require a whole new set of splash screens and changes to the core platform. If you want to contribute, you can look at my PoC at GitHub - kerrishotts/cordova-plugin-ios-launch-screen at 2.0.0

                           

                          Edit: changed link in #6

                          • 10. Re: Footer whitespace appears after calling getPicture
                            brandond63742483 Level 1

                            Kerri,

                             

                            Thank you so much for your input. I tried everything you suggested, and at no point could I get this issue to go away even temporarily.

                             

                            To disprove the notion previously presented by a wonderful human being that this is somehow related to "new expensive phones", iPhone 4 does the same.

                             

                            Here is the screenshot. The area underneath the black footer is the issue. In PhoneGap it does not actually overlay the display, it's just that it thinks this is all of the available real estate.

                             

                            example.PNG