title: Strange border on fixed postition elements in firefox 7.0.1
body: <p>There is a strange border on my fixed header and footer elements in firefox..</p>
  
  <p>Does anyone know how to get rid of this or is it a bug?</p>
  
  <p><img src="https://i.stack.imgur.com/4zDTI.jpg" alt="Firefox error"></p>
  
  <p><img src="https://i.stack.imgur.com/3D9SF.jpg" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/mXXLs.jpg" alt="enter image description here"></p>
  
  <p><strong>HTML</strong>
  This is the html for the home page..</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --&gt;
  &lt;!--[if lt IE 7]&gt; &lt;html class="no-js ie6 oldie" lang="en"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 7]&gt;    &lt;html class="no-js ie7 oldie" lang="en"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 8]&gt;    &lt;html class="no-js ie8 oldie" lang="en"&gt; &lt;![endif]--&gt;
  &lt;!-- Consider adding an manifest.appcache: h5bp.com/d/Offline --&gt;
  &lt;!--[if gt IE 8]&gt;&lt;!--&gt; &lt;html class="no-js" lang="en"&gt; &lt;!--&lt;![endif]--&gt;&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
  
      &lt;!-- Use the .htaccess and remove these lines to avoid edge case issues.
          More info: h5bp.com/b/378 --&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
  
      &lt;title&gt;my Sitelocker!&lt;/title&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
      &lt;base href="http://sitelocker.local/" /&gt;
  
      &lt;!-- Mobile viewport optimized: j.mp/bplateviewport --&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
  
      &lt;!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons --&gt;
  
      &lt;!-- CSS: implied media=all --&gt;
      &lt;!-- CSS concatenated and minified via ant build script--&gt;
      &lt;link rel="stylesheet" type="text/css" href="resource/css/grid.css"/&gt;
      &lt;!--[if IE 6]&gt;&lt;link rel="stylesheet" type="text/css" href="resource/css/ie6.css" /&gt;&lt;![endif]--&gt;
      &lt;!--[if IE 7]&gt;&lt;link rel="stylesheet" type="text/css" href="resource/css/ie.css" /&gt;&lt;![endif]--&gt;
      &lt;link rel="stylesheet" type="text/css" href="resource/css/style.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="resource/css/uniform.default.css"&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Yellowtail' rel='stylesheet' type='text/css'&gt;
  
      &lt;link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'&gt;
      &lt;link type="text/css" rel="stylesheet" href="resource/css/smoothness/jquery-ui-1.8.2.custom.css" /&gt;
      &lt;!-- end CSS--&gt;
  
      &lt;!-- More ideas for your &lt;head&gt; here: h5bp.com/d/head-Tips --&gt;
  
      &lt;!-- All JavaScript at the bottom, except for Modernizr / Respond.
      Modernizr enables HTML5 elements &amp; feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
      For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ --&gt;
      &lt;script src="resource/js/libs/modernizr-2.0.6.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;header id="masthead" class="clearfix"&gt;
  
      &lt;div id="masthead-inner" class="container_12 clearfix"&gt;
  
          &lt;div id="logo" class="grid_6"&gt;
  
              &lt;img src="resource/img/logo.jpg"/&gt;
  
          &lt;/div&gt;&lt;!--/#logo--&gt;
  
  
          &lt;div id="tools" class="grid_6"&gt;
                  &lt;a href="#" id="add-site-modal"&gt;Add Site&lt;/a&gt;
  
              &lt;ul id="top_menu"&gt;
                  &lt;li&gt;Welcome, &lt;strong&gt;lemonfreshdesign&lt;/strong&gt;.&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://sitelocker.local/account/account_settings"&gt;Account&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://sitelocker.local/account/sign_out"&gt;Sign out&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;&lt;!--/#top_menu--&gt;
  
  
          &lt;/div&gt;&lt;!--/#tools--&gt;
  
      &lt;/div&gt;&lt;!--/#masthead-inner--&gt;
  
  &lt;/header&gt;&lt;!--/#masthead--&gt;
  
  &lt;div id="main" role="main" class="container_12 clearfix"&gt;
  
      &lt;div id="main_inner"&gt;    
  
          &lt;div id="ajaxLoadAni"&gt;
              &lt;img src="resource/img/ajax-loader.gif" alt="Ajax Loading Animation" /&gt;
              &lt;span&gt;Loading...&lt;/span&gt;
          &lt;/div&gt;&lt;!--/#ajaxLoadAni--&gt;
  
          &lt;div id="siteholder" class="column grid_12 clearfix"&gt;
  
          &lt;/div&gt;&lt;!--/#siteholder--&gt;
  
          &lt;div id="delConfDialog" title="Confirm"&gt;
              &lt;p&gt;Are you sure?&lt;/p&gt;
          &lt;/div&gt;&lt;!--/#siteholder--&gt;
  
  
          &lt;div id="msgDialog"&gt;
              &lt;p&gt;&lt;/p&gt;
          &lt;/div&gt;&lt;!--/#siteholder--&gt;
  
          &lt;div id="myModal" class="reveal-modal"&gt;
  
              &lt;form action="http://sitelocker.local/usersites/insert_site" method="post" accept-charset="utf-8" class="addsite_form"&gt; &lt;input id="account_id" type="hidden" value="1"/&gt;
                  &lt;label for="site_title"&gt;&lt;strong&gt;Site Name:&lt;/strong&gt;&lt;/label&gt; 
                  &lt;input id="site_title" type="text" maxLength="25" tabindex="1" name="site_title" /&gt; 
                  &lt;label for="site_url"&gt;&lt;strong&gt;Site Address:&lt;/strong&gt;&lt;/label&gt; 
                  &lt;input id="site_url" type="text" tabindex="2" name="site_url" /&gt; 
                  &lt;label for="site_description"&gt;&lt;strong&gt;Site Description:&lt;/strong&gt;&lt;/label&gt; 
                  &lt;input id="site_description" type="text" tabindex="3" name="site_description" /&gt; 
                  &lt;label for="site_category"&gt;&lt;strong&gt;Site Category:&lt;/strong&gt;&lt;/label&gt; 
                  &lt;input id="site_category" type="text" tabindex="4" name="site_category" /&gt; 
                  &lt;input id="addsite_form_submit" type="submit" value="Add Site" name="submit" class="addsite_form_submit" tabindex="5" /&gt; 
              &lt;/form&gt;
  
          &lt;/div&gt;&lt;!--/#myModal--&gt;
  
      &lt;/div&gt;&lt;!--/#main_inner --&gt;
  
  &lt;/div&gt;&lt;!--/#main --&gt;
  
  &lt;footer id="footer" class="clearfix"&gt;
  
      &lt;div id="footer-container" class="container_12 clearfix"&gt;
  
          &lt;div id="copyright" class="grid_4"&gt;
  
          &amp;copy; my SiteLocker 2011 | All Rights Reserved
  
          &lt;/div&gt;&lt;!--/#copyright --&gt;
  
          &lt;div id="benchmarking" class="grid_4"&gt;
  
          Page rendered in 0.0533 seconds
  
          &lt;/div&gt;&lt;!--/#benchmarking --&gt;
  
          &lt;div id="category-select" class="grid_4"&gt;
  
              &lt;form&gt;
                  &lt;select style="opacity: 0;"&gt;
                      &lt;option value="option1"&gt;Category&lt;/option&gt;
                      &lt;option value="option2"&gt;Option 2&lt;/option&gt;
                      &lt;option value="option3"&gt;Option 3&lt;/option&gt;
                  &lt;/select&gt;
  
              &lt;/form&gt;
  
          &lt;/div&gt;&lt;!--/#category-select --&gt;
  
      &lt;/div&gt;&lt;!--/#footer-container --&gt;
  
  &lt;/footer&gt;&lt;!--/#footer --&gt;
  
  &lt;!-- JavaScript at the bottom for fast page loading --&gt;
  
  &lt;!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline --&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;window.jQuery || document.write('&lt;script src="resource/js/libs/jquery-1.6.2.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
  
  &lt;!-- scripts concatenated and minified via ant build script--&gt;
  &lt;script defer src="resource/js/libs/jquery-ui-1.7.2.custom.min.js"&gt;&lt;/script&gt;
  
  &lt;script defer src="resource/js/plugins.js"&gt;&lt;/script&gt;
  &lt;script type="text/template" id="readTemplate"&gt;
  
  &lt;div class="scroll-content-item dragbox clearfix" id="dragbox${site_id}"&gt;
  
      &lt;h2 class="h2handle"&gt;&lt;a href="${site_url}"&gt;${site_title}&lt;/a&gt;&lt;span class="close"&gt;&lt;a href="http://sitelocker.local/usersites/delete_site/${site_id}" id="${site_id}" class="deleteBtn"&gt;&lt;img src="resource/img/closepanel.png"&gt;&lt;/a&gt;&lt;/span&gt;&lt;/h2&gt;
  
      &lt;div class="dragbox-content"&gt;
  
          &lt;p&gt;&lt;a class="sitelink" href="${site_url} ?&gt;" title="${site_title}"&gt;&lt;img src="http://immediatenet.com/t/l?Size=1024x768&amp;URL=${site_url}" alt="${site_title}" title="${site_title}"/&gt;&lt;/a&gt;&lt;/p&gt;
  
      &lt;/div&gt;
      &lt;div class="dragbox-footer"&gt;
      &lt;p&gt;in: ${site_category}&lt;/p&gt; 
      &lt;/div&gt;
  
  &lt;/div&gt; 
  &lt;/script&gt;
  &lt;script defer src="resource/js/script.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      //display ajax loader animation
      $( '#ajaxLoadAni' ).fadeIn( 'slow' );
      $('a#viewqr').click(function(e) {
          e.preventDefault();
          $('div#qr').reveal({
              animation: 'fadeAndPop',                   //fade, fadeAndPop, none
              animationspeed: 300,                       //how fast animtions are
              closeonbackgroundclick: true,              //if you click background will modal close?
          });
      });
  
  &lt;/script&gt;   
  &lt;!-- end scripts--&gt;
  
  &lt;!-- Change UA-XXXXX-X to be your site's ID --&gt;
  &lt;script&gt;
      window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
      Modernizr.load({
          load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
      });
  
  &lt;/script&gt;
  
  
  &lt;!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
      chromium.org/developers/how-tos/chrome-frame-getting-started --&gt;
  &lt;!--[if lt IE 7 ]&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})&lt;/script&gt;
  &lt;![endif]--&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong>
  This is the main layout css file for the main page</p>
  
  <pre><code>/* 
   * HTML5 ✰ Boilerplate
   *
   * What follows is the result of much research on cross-browser styling. 
   * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
   * Kroc Camen, and the H5BP dev community and team.
   *
   * Detailed information about this CSS: h5bp.com/css
   * 
   * ==|== normalize ==========================================================
   */
  
  
  /* =============================================================================
     HTML5 display definitions
     ========================================================================== */
  
  article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
  audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
  audio:not([controls]) { display: none; }
  [hidden] { display: none; }
  
  /* =============================================================================
     Base
     ========================================================================== */
  
  /*
   * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
   * 2. Force vertical scrollbar in non-IE
   * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
   */
  
  html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
  
  body { margin: 0; font-size: 13px; line-height: 1.231; }
  
  body, button, input, select, textarea { font-family: sans-serif; color: #222; }
  
  /* 
   * Remove text-shadow in selection highlight: h5bp.com/i
   * These selection declarations have to be separate
   * Also: hot pink! (or customize the background color to match your design)
   */
  
  ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
  ::selection { background: #fe57a1; color: #fff; text-shadow: none; }
  
  
  /* =============================================================================
     Links
     ========================================================================== */
  
  a { color: #00e; }
  a:visited { color: #551a8b; }
  a:hover { color: #06e; }
  a:focus { outline: thin dotted; }
  
  /* Improve readability when focused and hovered in all browsers: h5bp.com/h */
  a:hover, a:active { outline: 0; }
  
  
  /* =============================================================================
     Typography
     ========================================================================== */
  
  abbr[title] { border-bottom: 1px dotted; }
  
  b, strong { font-weight: bold; }
  
  blockquote { margin: 1em 40px; }
  
  dfn { font-style: italic; }
  
  hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
  
  ins { background: #ff9; color: #000; text-decoration: none; }
  
  mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
  
  /* Redeclare monospace font family: h5bp.com/j */
  pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
  
  /* Improve readability of pre-formatted text in all browsers */
  pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
  
  q { quotes: none; }
  q:before, q:after { content: ""; content: none; }
  
  small { font-size: 85%; }
  
  /* Position subscript and superscript content without affecting line-height: h5bp.com/k */
  sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
  sup { top: -0.5em; }
  sub { bottom: -0.25em; }
  
  
  /* =============================================================================
     Lists
     ========================================================================== */
  
  ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
  dd { margin: 0 0 0 40px; }
  nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
  
  
  /* =============================================================================
     Embedded content
     ========================================================================== */
  
  /*
   * 1. Improve image quality when scaled in IE7: h5bp.com/d
   * 2. Remove the gap between images and borders on image containers: h5bp.com/e 
   */
  
  img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
  
  /*
   * Correct overflow not hidden in IE9 
   */
  
  svg:not(:root) { overflow: hidden; }
  
  
  /* =============================================================================
     Figures
     ========================================================================== */
  
  figure { margin: 0; }
  
  
  /* =============================================================================
     Forms
     ========================================================================== */
  
  form { margin: 0; }
  fieldset { border: 0; margin: 0; padding: 0; }
  
  /* Indicate that 'label' will shift focus to the associated form element */
  label { cursor: pointer; }
  
  /* 
   * 1. Correct color not inheriting in IE6/7/8/9 
   * 2. Correct alignment displayed oddly in IE6/7 
   */
  
  legend { border: 0; *margin-left: -7px; padding: 0; }
  
  /*
   * 1. Correct font-size not inheriting in all browsers
   * 2. Remove margins in FF3/4 S5 Chrome
   * 3. Define consistent vertical alignment display in all browsers
   */
  
  button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
  
  /*
   * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
   * 2. Correct inner spacing displayed oddly in IE6/7
   */
  
  button, input { line-height: normal; *overflow: visible; }
  
  /*
   * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
   */
  
  table button, table input { *overflow: auto; }
  
  /*
   * 1. Display hand cursor for clickable form elements
   * 2. Allow styling of clickable form elements in iOS
   */
  
  button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
  
  /*
   * Consistent box sizing and appearance
   */
  
  input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
  input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
  input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
  
  /* 
   * Remove inner padding and border in FF3/4: h5bp.com/l 
   */
  
  button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
  
  /* 
   * 1. Remove default vertical scrollbar in IE6/7/8/9 
   * 2. Allow only vertical resizing
   */
  
  textarea { overflow: auto; vertical-align: top; resize: vertical; }
  
  /* Colors for form validity */
  input:valid, textarea:valid {  }
  input:invalid, textarea:invalid { background-color: #f0dddd; }
  
  
  /* =============================================================================
     Tables
     ========================================================================== */
  
  table { border-collapse: collapse; border-spacing: 0; }
  td { vertical-align: top; }
  
  
  /* ==|== primary styles =====================================================
     Author: 
     ========================================================================== */
  
  body {
      background:url(../img/background.png) repeat;
      font-size:100%;
  }
  
  /* =============================================================================
     header
     ========================================================================== */
  #masthead {
      background: url(../img/header.gif) repeat-x;
      -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
      -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
      height:54px;
      position:fixed;
      width:100%;
      top:0;
      z-index:1000;
      text-shadow: 1px 1px 2px #000000;
      filter: dropshadow(color=#000000, offx=1, offy=1); 
  }
  /*------------------------------------------------------------------------------*/
      #logo {
          height:54px;
          line-height:50px;
      }
          #logo img {
              padding:0px 15px 0px 0;
              background: url(../img/header-sep.png) no-repeat right;
  
          }
  /*------------------------------------------------------------------------------*/
      #tools {
       text-align:right;
      }
          #tools ul {
              float:right;
          }
              #tools ul li {
                  display:inline;
              }
  /* =============================================================================
     main
     ========================================================================== */
  
  #main .dragbox{
      margin:20px 15px;
      padding:10px;
      width:207px;
      background-color: rgba(0, 0, 0, .2);
      position:relative;
      border:1px solid #4e4e4e;
  
      -webkit-box-shadow: 0px 0px 10px 0px #000000;
      -moz-box-shadow: 0px 0px 10px 0px #000000;
      box-shadow: 0px 0px 10px 0px #000000; 
      float:left;
  }
  /*------------------------------------------------------------------------------*/
      #main .dragbox h2 {
          border-bottom: 1px solid #CCCCCC;
          font-size: .8em;
          padding: 0;
          margin: 0;
          background: #7b7b7b; /* Old browsers */
          background: -moz-linear-gradient(top, #515151 0%, #303030 100%); /* FF3.6+ */
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#515151), color-stop(100%,#303030)); /* Chrome,Safari4+ */
          background: -webkit-linear-gradient(top, #515151 0%,#303030 100%); /* Chrome10+,Safari5.1+ */
          background: -o-linear-gradient(top, #515151 0%,#303030 100%); /* Opera11.10+ */
          background: -ms-linear-gradient(top, #515151 0%,#303030 100%); /* IE10+ */
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515151', endColorstr='#303030',GradientType=0 ); /* IE6-9 */
          background: linear-gradient(top, #515151 0%,#303030 100%); /* W3C */
          padding: 0px 12px;
          cursor: move;
          font-family:'cabin';
          border-top: thin solid #777777;
          border-left: thin solid rgba(255, 255, 255, .25);
          border-right: thin solid rgba(255, 255, 255, .25);
          border-bottom:solid thin #1a1a1a;
          text-shadow: 1px 1px 0px #606060;
          color:#000000;
          font-weight:bold;
          text-transform:uppercase;
          line-height:2.4em;
      }
          #main .dragbox h2 a {
              text-decoration:none;
              color:#000000;
          }
              #main .dragbox h2 a:hover {
                  text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
                  color:#aadb02;
              }
                  #main .dragbox h2 span.close {
                      float:right;
                  }
  /*------------------------------------------------------------------------------*/
      .dragbox-content{
          background:#fff;
          min-height:100px;
          border-left: 1px solid #a3a3a3;
          border-right: 1px solid #a3a3a3;
  
      }
          .dragbox-content p {
              margin:0;
          }
  /*------------------------------------------------------------------------------*/
      #main .dragbox-footer {
          border-bottom: 1px solid #CCCCCC;
          font-size: 0.8em;
          padding: 0;
          margin: 0;
          background: #7b7b7b; /* Old browsers */
          background: -moz-linear-gradient(top, #7b7b7b 0%, #4d4d4d 100%); /* FF3.6+ */
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7b7b7b), color-stop(100%,#4d4d4d)); /* Chrome,Safari4+ */
          background: -webkit-linear-gradient(top, #7b7b7b 0%,#4d4d4d 100%); /* Chrome10+,Safari5.1+ */
          background: -o-linear-gradient(top, #7b7b7b 0%,#4d4d4d 100%); /* Opera11.10+ */
          background: -ms-linear-gradient(top, #7b7b7b 0%,#4d4d4d 100%); /* IE10+ */
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b7b7b', endColorstr='#4d4d4d',GradientType=0 ); /* IE6-9 */
          background: linear-gradient(top, #7b7b7b 0%,#4d4d4d 100%); /* W3C */
          padding: 6px 12px;
          cursor: move;
          font-family:'cabin';
          border-bottom: thin solid rgba(255, 255, 255, .25);
          border-left: thin solid rgba(255, 255, 255, .25);
          border-right: thin solid rgba(255, 255, 255, .25);
          border-top:none;
          text-shadow: 1px 1px 0px rgba(255, 255, 255, .25);
          color:#0c0c0c;
          font-weight:normal;
      }
          #main .dragbox-footer p {
              margin:0;
          }
  /*------------------------------------------------------------------------------*/
      #ajaxLoadAni {
          background: #3A3A3A;
          color: #fff;
          display: none;
          font-weight: bold;
          position: fixed;
          top: 0;
          left: 40%;
          padding: 8px;
          width: 106px;
          z-index: 9999;
      }
          #ajaxLoadAni span {
              float: right;
              margin: 2px 0 0 0;
          }
  /*------------------------------------------------------------------------------*/
  .ui-widget-content {
      font-size: .8em;
  }
  #delConfDialog, #msgDialog {
      font-size: 1em;
  }
  
  
  
  /* =============================================================================
     footer
     ========================================================================== */
  footer {
      background:url(../img/footer.png) repeat-x;
      -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
      -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
      position:fixed;
      bottom:0;
      z-index:1000;
      height:75px;
      width:100%;
  
  }
  /*------------------------------------------------------------------------------*/
      #footer-top {
          height:50px;
      }
  /*------------------------------------------------------------------------------*/
      #footer-bottom {
          height:24px;
          color:#999;
          text-decoration: none;
          text-shadow: 1px 1px 0px #000;
          font-family:'Yellowtail';
          line-height:24px;
          color:#aadb02;
      }
          #copyright {
              float:left;
              line-height:30px;
              font-family: 'Play', sans-serif;
              text-shadow: 1px 1px 0px rgba(255, 255, 255, .75);
              filter: dropshadow(color=#000000, offx=0, offy=1);
              color:#212121;
          }
              #category-select form {
                  float:right;
              }
  
  /*------------------------------------------------------------------------------*/
  
  input:focus, select:focus {
      outline: none;
  }
  
  .InputGroup {
      display: inline-block;
      padding: 3px 4px;
      border: 1px solid #FFF;
      border-radius: 7px;
      -moz-border-radius: 7px;
  }
  
  .ErrorField {
      border-color: #D00;
      color: #D00;
      background: #FFFFFE;
  }
  
  span.ValidationErrors {
      display: inline-block;
      font-size: 12px;
      color: #D00;
      padding-left: 10px;
      font-style: italic;
  }
  
  
  /*  --------------------------------------------------
      Reveal Modals
      -------------------------------------------------- */
  
      .reveal-modal-bg { 
          position: fixed; 
          height: 100%;
          width: 100%;
          background: #000;
          background: rgba(0,0,0,.8);
          z-index: 100;
          display: none;
          top: 0;
          left: 0; 
          }
  
      .reveal-modal {
          visibility: hidden;
          top: 100px; 
          left: 50%;
          margin-left: -300px;
          width: 520px;
          background: #eee url(../resource/img/modal-gloss.png) no-repeat -200px -80px;
          position: absolute;
          z-index: 101;
          padding: 30px 40px 34px;
          -moz-border-radius: 5px;
          -webkit-border-radius: 5px;
          border-radius: 5px;
          -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
          -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
          -box-shadow: 0 0 10px rgba(0,0,0,.4);
          }
  
      .reveal-modal.small         { width: 200px; margin-left: -140px;}
      .reveal-modal.medium        { width: 400px; margin-left: -240px;}
      .reveal-modal.large         { width: 600px; margin-left: -340px;}
      .reveal-modal.xlarge        { width: 800px; margin-left: -440px;}
  
      .reveal-modal .close-reveal-modal {
          font-size: 22px;
          line-height: .5;
          position: absolute;
          top: 8px;
          right: 11px;
          color: #aaa;
          text-shadow: 0 -1px 1px rbga(0,0,0,.6);
          font-weight: bold;
          cursor: pointer;
          } 
  
  /* ==|== non-semantic helper classes ========================================
     Please define your styles before this section.
     ========================================================================== */
  
  /* For image replacement */
  .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
  .ir br { display: none; }
  
  /* Hide from both screenreaders and browsers: h5bp.com/u */
  .hidden { display: none !important; visibility: hidden; }
  
  /* Hide only visually, but have it available for screenreaders: h5bp.com/v */
  .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
  
  /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
  .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
  
  /* Hide visually and from screenreaders, but maintain layout */
  .invisible { visibility: hidden; }
  
  /* Contain floats: h5bp.com/q */ 
  .clearfix:before, .clearfix:after { content: ""; display: table; }
  .clearfix:after { clear: both; }
  .clearfix { zoom: 1; }
  
  
  
  /* ==|== media queries ======================================================
     PLACEHOLDER Media Queries for Responsive Design.
     These override the primary ('mobile first') styles
     Modify as content requires.
     ========================================================================== */
  
  @media only screen and (min-width: 480px) {
    /* Style adjustments for viewports 480px and over go here */
  
  }
  
  @media only screen and (min-width: 768px) {
    /* Style adjustments for viewports 768px and over go here */
  
  }
  
  
  
  /* ==|== print styles =======================================================
     Print styles.
     Inlined to avoid required HTTP connection: h5bp.com/r
     ========================================================================== */
  
  @media print {
    * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
    a, a:visited { text-decoration: underline; }
    a[href]:after { content: " (" attr(href) ")"; }
    abbr[title]:after { content: " (" attr(title) ")"; }
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; } /* h5bp.com/t */
    tr, img { page-break-inside: avoid; }
    img { max-width: 100% !important; }
    @page { margin: 0.5cm; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3 { page-break-after: avoid; }
  }
  </code></pre>