Uderc programming article aggregator sites

Adding template break box model and font

Tags:
Answers: Have 5 answers
Advertisement
I have been working on this one for a few hours now and I can't figure it out. I am working with the HTML5 Boilerplate and recreating the home page for our company. When I do not include the template, the file works fine in IE. But the second I apply a template the whole page becomes broken and the IE box model applies and my font sizing gets messed up.
I have included a link to the files on a testing server, if this is not allowed, let me know and I can put up the code.
Excuse the cupcakes from FlexSlider, I have not yet finished that piece.
Working (no template): http://www.qa.mpay.com/index.asp
Not working (template): http://www.qa.mpay.com/copy.asp
Do I just need to rework my entire code so that it is more compliant with the IE Box Model qualifications, ie. div inside of a div with width on one and padding/margin on the other?
Advertisement
The best answer: Alright here's the code for the one that's not working. After posting last night, I realized the links were probably only viewable internally.
UPDATE: Just added <html> after <!doctype html> like I've seen you post about in another forum discussion. That seems to have fixed it. Why is that needed? Isn't it the html tag being opened in the line <html class="no-js" lang="en"> What I mean by this, is why does it work fine in other browsers when that is missing, but it messes up with IE?
P.S. I'm starting to blame H5BP for poor documentation, but I'm learning a lot in the process.
TEMPLATE: (without <html>)
templates>template_page_home_new.dwt
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/b/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>MPAY Inc.</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="tags" -->
<meta name='description' content='Payroll Software/Services- Business Process Outsourcing, Reseller and Referral Programs for Payroll Providers, Brokers, CPAs, and more offered by MPAY Inc'/>
<meta name='keywords' content='MPAY, payroll, payentry.com, millennium, millennium payroll, payroll processing, payroll software, online payroll, outsourcing, business process outsourcing,  timekeeping, Boston, MA, Charlotte, NC, work comp, workers comp, SecureView, online tax forms'/>
<!-- TemplateEndEditable -->
  <!-- Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
  <!-- CSS: implied media=all -->
  <!-- CSS concatenated and minified via ant build script-->
  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="../css/flexslider.css" type="text/css" media="screen" />
  <!-- end CSS-->
    <!-- FlexSlider pieces -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  <!-- All JavaScript at the bottom, except for Modernizr / Respond.
       Modernizr enables HTML5 elements & 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/ -->
  <script src="../js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body>
<div id="container">
    <!-- Header Start -->
  <div id="navigation">
    <div id="logoregion">
          <div id="logo">
              <a href="default.asp"><img src="../images/logo.gif" alt="mpay_logo" /></a>
          </div>
          <div id="headerlink">
              <ul>
                      <li><a href="../client-login.asp"><p class="new">NEW!</p>  <img src="../images/blue_bullet_line.gif" alt=""> Client Login  </a></li>
                      <li><a href="contact_us.asp"><img src="../images/blue_bullet_line.gif" alt=""> Contact Us  </a></li>
                      <li><a href="careers.asp"><img src="../images/blue_bullet_line.gif" alt=""> Careers  </a></li>
                      <li><a href="about_us.asp"><img src="../images/blue_bullet_line.gif" alt=""> About Us</a></li></ul>
          </div>
          <div id="contact">
          (781) 810-9000<br />
          <a href="mailto:s[email protected]">[email protected]</a>
          </div>
      </div>
      <div id="mainnav">
          <ul class="navigation-controls">
                  <li><a href="../index.html"><p class="navigation-text">Home</p></a></li>
                  <li><a href="../services.html"><p class="navigation-text">Services</p></a></li>
                  <li><a href="../products.html"><p class="navigation-text">Products</p></a></li>
                  <li><a href="../solutions.html"><p class="navigation-text">Solutions</p></a></li>
                  <li><a href="../support.html"><p class="navigation-text">Client Support</p></a></li>
                  <li class="nav-border-right"><a href="../resources.html"><p class="navigation-text">Resources</p></a></li>
           </ul>
      </div>
    </div> 
    <!-- Header End -->
  <!-- TemplateBeginEditable name="EditRegionContent" --><!-- TemplateEndEditable -->
    <!-- Footer Start -->
        <div id="footer">
          <div id="footercontent">
              <div id="legal">
              <a href="../index.html">MPAY Inc.</a>  |  
              <a href="../legal.html">Legal Notices</a>  |  
              <a href="../privacy.html">Your Privacy</a>
              </div>
              <div id="copyright">
               <script type="text/javascript">
      now=new Date();
      year=now.getFullYear();
          </script>
               &copy; Copyright
               <script type="text/javascript">
      document.write (year);
               </script>
               MPAY, Inc. All Rights Reserved.</div>
         </div>
       </div>
  <!-- Footer End -->
   </div>
<!-- JavaScript at the bottom for fast page loading -->
  <!-- TemplateBeginEditable name="JavaCode" --><!-- TemplateEndEditable -->
  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/libs/jquery-1.6.2.min.js"><\/script>')</script>
  <!-- scripts concatenated and minified via ant build script-->
  <script defer src="../js/plugins.js"></script>
  <script defer src="../js/script.js"></script>
  <!-- end scripts-->
    <!-- Act-On Analytics Code -->
     <script type="text/javascript">
       /* <![CDATA[ */
       document.write (
          '<img src="http://marketing.mpay.com/acton/bn/1170/visitor.gif?ts='+
          new Date().getTime()+
          '&ref='+escape(document.referrer) + '">'
       /* ]]> */
       </script>
  <!-- Google Analytics Code -->
  <script>
    window._gaq = [['_setAccount','UA-12607129-1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
  </script>
</body>
</html>
File it's being applied to:
copy.asp
<!-- InstanceBegin template="/Templates/template_page_home_new.dwt" codeOutsideHTMLIsLocked="false" --><!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/b/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- InstanceBeginEditable name="doctitle" -->
<title>MPAY Inc.</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="tags" -->
<meta name='description' content='Payroll Software/Services- Business Process Outsourcing, Reseller and Referral Programs for Payroll Providers, Brokers, CPAs, and more offered by MPAY Inc'/>
<meta name='keywords' content='MPAY, payroll, payentry.com, millennium, millennium payroll, payroll processing, payroll software, online payroll, outsourcing, business process outsourcing,  timekeeping, Boston, MA, Charlotte, NC, work comp, workers comp, SecureView, online tax forms'/>
<style type="text/css">
<!--
.style1 {color: #00274c}
-->
</style>
<!-- InstanceEndEditable -->
  <!-- Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
  <!-- CSS: implied media=all -->
  <!-- CSS concatenated and minified via ant build script-->
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
  <!-- end CSS-->
    <!-- FlexSlider pieces -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  <!-- All JavaScript at the bottom, except for Modernizr / Respond.
       Modernizr enables HTML5 elements & 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/ -->
  <script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body>
<div id="container">
    <!-- Header Start -->
  <div id="navigation">
    <div id="logoregion">
          <div id="logo">
              <a href="default.asp"><img src="images/logo.gif" alt="mpay_logo" /></a>
          </div>
          <div id="headerlink">
              <ul>
                      <li><a href="client-login.asp"><p class="new">NEW!</p>  <img src="images/blue_bullet_line.gif" alt=""> Client Login  </a></li>
                      <li><a href="contact_us.asp"><img src="images/blue_bullet_line.gif" alt=""> Contact Us  </a></li>
                      <li><a href="careers.asp"><img src="images/blue_bullet_line.gif" alt=""> Careers  </a></li>
                      <li><a href="about_us.asp"><img src="images/blue_bullet_line.gif" alt=""> About Us</a></li></ul>
          </div>
          <div id="contact">
          (781) 810-9000<br />
          <a href="mailto:[email protected]">[email protected]</a>
          </div>
      </div>
      <div id="mainnav">
          <ul class="navigation-controls">
                  <li><a href="index.html"><p class="navigation-text">Home</p></a></li>
                  <li><a href="services.html"><p class="navigation-text">Services</p></a></li>
                  <li><a href="products.html"><p class="navigation-text">Products</p></a></li>
                  <li><a href="solutions.html"><p class="navigation-text">Solutions</p></a></li>
                  <li><a href="support.html"><p class="navigation-text">Client Support</p></a></li>
                  <li class="nav-border-right"><a href="resources.html"><p class="navigation-text">Resources</p></a></li>
           </ul>
      </div>
    </div> 
    <!-- Header End -->
  <!-- InstanceBeginEditable name="EditRegionContent" --><!--! start of #container -->
    <div id="slideshow">
        <!--=============================
        Markup for FADE animation
        =================================-->
        <div class="flexslider">
        <ul class="slides">
            <li>
                <a href="#"><img src="img/planet_hollywood.jpg" />
                <div class="flex-caption">
                    <div id="slideone">
                        <h2 class="gold" >MPAY Sales &amp; Product <br />Roadmap Workshop</h2><br />
                        <h3 class="white">
                        March 2, 2012 / Las Vegas
                        <br />
                        </h3>
                         <br /> <br /> <br />
                        <p class="gold underline">
                        Learn more about IPPA Event
                        </p>
                    </div>
                </div></a>
            </li>
            <li>
                <a href="#"><img src="img/inacup_samoa.jpg" />
                <div class="flex-caption">
                    <h2 >Our Products</h2><br />
                    <h3 >Payentry.com
                    <br />Secure and reliable online solution for payroll and human resource management
                    Millennium
                    <br />User-friendly PC solution provides a flexible system with robust functionality
                    </h3>
                </div></a>
            </li>
            <li>
                <a href="#"><img src="img/inacup_donut.jpg" />
                <div class="flex-caption">
                    <h2 >Our Solutions</h2><br />
                    <h3 >Business Process Outsourcing<br />
                Reseller Program<br />
                Referral Program<br />
                Direct Services
                    </h3>
                </div></a>
            </li>
            <li>
                <a href="#"><img src="img/inacup_pumpkin.jpg" />
                <div class="flex-caption">
                    <h2 >Compliance &amp; Security</h2><br />
                    <h3 >Payroll Processing and Tax Management<br />
                Employee Management<br />
                New Hire Reporting<br />
                Workers’ Compensation<br />
                Wage Garnishment<br />
                COBRA Administration
                    </h3>
                </div></a>
            </li>
            <li>
                <a href="#"><img src="img/inacup_donut.jpg" />
                <div class="flex-caption">
                    <h2 >Paperless Solutions</h2><br />
                    <h3 >Secure Document Delivery via SecureView<br />
                Employee Self Service with Online Tax Forms<br />
                Money Network Payroll Distribution Service
                    </h3>
                </div></a>
            </li>
        </ul>
        <div >
        <ul class="custom-controls">
                <li><a href="#">Upcoming Events</a></li>
                <li><a href="#">Our Products</a></li>
                <li><a href="#">Our Solutions</a></li>
                <li><a href="#">Compliance & Security</a></li>
                <li><a href="#">Paperless Solutions</a></li>
         </ul>
         </div>           
      </div>
    </div>
    <div id="main" role="main">
        <div id="banner">
          <div id="leftbanner" class="bluedropshadow">Learn how MPAY can find a <br />solution that’s right for you.</div>
          <div id="bannerdivision">
          <img src="img/banner_division.png" alt="" />
          </div>
          <div id="rightbanner">
            <div id="emailbutton">
            <a href="#"><img src="img/email_us_button.png" alt="Email Us!" /></a></div>
            <div id="or" class="bluedropshadow">or</div>
            <div id="callus">
            Call us today at<br />
            781-810-9000</div>
          </div>
        </div>
      <div id="bannerbottom">
          </div>
        <div id="leftcol">
          <div id="introduction">
          <p>MPAY Inc. is a <a href="#">payroll software</a> and <a href="#">services</a> company providing strategic <a href="#">business solutions</a> to employers and business partners nationwide. MPAY presents a variety of programs, including <a href="#">business process outsourcing</a>, to a wide range of <a href="#">industries</a>. MPAY’s offerings streamline processes, improve productivity, and simplify administration, allowing clients to get the most out of their workday.</p>
          </div>
          <div id="twitterfeed">
              <div id="twitterlogo">
              <h4>Twitter<br />Feed</h4>
              </div>
              <div id="twitter">  
              </div>
            <p class="viewall"><a href="#">View All</a></p>
          </div>
        </div>
        <div id="rightcol">
          <div id="mediacenter">
            <div>
            <h4>Media Center</h4>
            </div>
            <div id="medialinks">
            <p class="medialinks"><a href="#"><img class="mediaicons" src="img/news_icon.png" alt="News Icon" />News</a></p>
            <p class="medialinks"><a href="#"><img class="mediaicons" src="img/press_icon.png" alt="Press Release Icon" />Press Releases</a></p>
            <p class="medialinks"><a href="#"><img class="mediaicons" src="img/calendar_icon.png" alt="Calendar Icon" />Calendar</a></p>
            <p class="medialinks"><a href="#"><img class="mediaicons" src="img/client_icon.png" alt="Client Testimonials Icon" />Client Testimonials</a></p>
            </div>
          </div>
          <div id="affandawards">
            <div id="affandawardstitle">
            <h4>Affiliates &amp; Awards</h4>
            </div>
            <div id="affandawardsframe">
              <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="200" height="150" title="sponsors_small">
                <param name="movie" value="sponsors_small.swf">
                <param name="quality" value="high">
                <embed src="sponsors_small.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="150"></embed>
              </object>
            </div>
          </div>
          <div id="socialmedia">
            <div id="reachout">
            Reach <br />Out To Us!
            </div>
            <div id="socialarrow">
            <img src="img/social_arrow.gif">
            </div>
            <div id="socialicons">
            <a href="#"><img class="socialmediaicons" src="img/facebook_30px.gif" alt="Facebook Icon" /></a>
            <a href="#"><img class="socialmediaicons" src="img/twitter_30px.gif" alt="Twitter Icon" /></a>
            <a href="#"><img class="socialmediaicons" src="img/linkedin_30px.gif" alt="LinkedIn Icon" /></a>
            </div>
          </div>
        </div>
    </div>
<!--! end of #container -->
<!-- InstanceEndEditable -->
    <!-- Footer Start -->
        <div id="footer">
          <div id="footercontent">
              <div id="legal">
              <a href="index.html">MPAY Inc.</a>  |  
              <a href="legal.html">Legal Notices</a>  |  
              <a href="privacy.html">Your Privacy</a>
              </div>
              <div id="copyright">
               <script type="text/javascript">
      now=new Date();
      year=now.getFullYear();
          </script>
               &copy; Copyright
               <script type="text/javascript">
      document.write (year);
               </script>
               MPAY, Inc. All Rights Reserved.</div>
         </div>
       </div>
  <!-- Footer End -->
   </div>
<!-- JavaScript at the bottom for fast page loading -->
  <!-- InstanceBeginEditable name="JavaCode" -->
        <!-- Hook up the FlexSlider -->
    <script type="text/javascript">
        $(window).load(function() {
            $('.flexslider').flexslider({
                manualControls: '.custom-controls li a'
    </script>
    <!-- Twitter Feed -->
<script type="text/javascript">
$(document).ready(function(){
    $.getJSON('http://twitter.com/status/user_timeline/MPAYInc.json?count=3&callback=?', function(data){
        $.each(data, function(index, item){
            $('#twitter').append('<div class="tweet"><p>' + item.text.linkify() + '</p><p class="timestamp">' + relative_time(item.created_at) + '</p></div>');
    function relative_time(time_value) {
      var values = time_value.split(" ");
      time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
      var parsed_date = Date.parse(time_value);
      var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
      var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
      delta = delta + (relative_to.getTimezoneOffset() * 60);
      var r = '';
      if (delta < 60) {
        r = 'a minute ago';
      } else if(delta < 120) {
        r = 'couple of minutes ago';
      } else if(delta < (45*60)) {
        r = (parseInt(delta / 60)).toString() + ' minutes ago';
      } else if(delta < (90*60)) {
        r = 'an hour ago';
      } else if(delta < (24*60*60)) {
        r = '' + (parseInt(delta / 3600)).toString() + ' hours ago';
      } else if(delta < (48*60*60)) {
        r = '1 day ago';
      } else {
        r = (parseInt(delta / 86400)).toString() + ' days ago';
      return r;
    String.prototype.linkify = function() {
        return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) {
            return m.link(m);
</script><!-- InstanceEndEditable -->
  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/libs/jquery-1.6.2.min.js"><\/script>')</script>
  <!-- scripts concatenated and minified via ant build script-->
  <script defer src="js/plugins.js"></script>
  <script defer src="js/script.js"></script>
  <!-- end scripts-->
    <!-- Act-On Analytics Code -->
     <script type="text/javascript">
       /* <![CDATA[ */
       document.write (
          '<img src="http://marketing.mpay.com/acton/bn/1170/visitor.gif?ts='+
          new Date().getTime()+
          '&ref='+escape(document.referrer) + '">'
       /* ]]> */
       </script>
  <!-- Google Analytics Code -->
  <script>
    window._gaq = [['_setAccount','UA-12607129-1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
  </script>
</body>
<!-- InstanceEnd --></html>
CSS
css>style.css
* 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: 100%; line-height: 150%; }
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: #496793; color: #fff; text-shadow: none; }
::selection { background: #496793; 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: 0em 0; padding: 0 0 0 0px; }
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; }
/* =============================================================================
   Eric Meyer Reset Snippet
   ========================================================================== */
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;   
/* ==|== primary styles =====================================================
   Author:
   ========================================================================== */
body {
    max-width: 49.6875em;
    text-align: center;
    margin: auto;
    #container{
    text-align: left;
    margin: auto;
a {
        color: #6699CC;
        text-align:left;
        text-decoration:underline;
        border: none;   
    a:link { color: #6699CC;}
    a:visited { color: #6699CC;}   
    a:hover { color: #496793;}   
    a:active { color: #496793;}
/* ==|== text styles ====================================================== */
p{
    color:#444444;
    font-family:Verdana, sans-serif;
h2{
    font-size:2.5em;
    line-height:1.25em;
    letter-spacing:.02em;
    color:#00274c;
    font-weight:bold;
    font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;   
h3{
    font-size:1.5em;
    line-height:1.25em;
    letter-spacing:.02em;
    color:#00274c;
    font-weight:bold;
    font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;   
h4{
    font-size:1.3125em;
    line-height:1.25em;
    letter-spacing:.02em;
    color:#00274c;
    font-weight:normal;
    font-family:Verdana, sans-serif;   
h5{
    font-size:1.3125em;
    line-height:1.25em;
    letter-spacing:.02em;
    color:#00274c;
    font-weight: bold;
    font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;   
/* ==|== navigation styles ====================================================== */
/* Custom Nav */
#navigation{
    margin:10px 20px 5px 20px;
    width:775px;
#headerlink a:link { color: #666;}
#headerlink a:visited { color: #666;}   
#headerlink a:hover { color: #00274C;}   
#headerlink a:active { color: #00274C;}   
#headerlink li{
    font: .625em "Arial Narrow", sans-serif;
    display: inline;
    text-decoration: none;
    list-style-image:url(../images/blue_bullet.gif);
    letter-spacing:.08em;
#headerlink a{
    text-decoration: none;
#headerlink {
    padding: 2px 135px 0px 0px;
    float: right;
.new {
    text-align:right;
    font: bold 1.175em "Arial Narrow", sans-serif;
    color:#8f9d4e;
    display:inline;
#header {
    margin: 15px auto 0 auto;
    width:775px;
#logoregion {
    width:775px;
    height: 91px;
    background:url(../images/header_small.gif) no-repeat 0 0;
#contact{
    font: bold .75em/1.35em sans-serif;
    color: #919194;
    padding: 10px 135px 0 0px;
    float: right;
    text-align:right;
.nav-border-right{
    border-right: 1px solid #6699cc;
#logo {
    padding: 32px 0 0px 8px;
    float: left;
#mainnav {
    width: 100%; width: 775px;
    height: 28px;
.navigation-text{
    text-align: center;
    font-weight:bold;
    font-size:.75em;
    font-family: sans-serif;
    letter-spacing:.01em;
    padding-top:2px;}
.navigation-controls {width: 100%;}
.navigation-controls li {margin: 0 0 0 0px; float:left; display: inline-block; zoom: 1; *display: inline; list-style:none;}
.navigation-controls li:first-child {margin: 0;}
.navigation-controls li a {color: #00274c; text-align:center; width: 129px; height: 28px; display: block; background: url(../img/main_navigation_tab.gif) no-repeat 0 0; cursor: pointer; text-decoration:none;}
.navigation-controls li a:hover {background-position: 0 -28px; color: #00274c; }
.navigation-controls li a.active {background-position: 0 -28px; color: #00274c;  cursor: default; }
#nav a:link { color: #000000;}
#nav a:visited { color: #00274C;}   
#nav a:hover { color: #919194;}   
#nav a:active { color: #919194;}   
#nav li{
    list-style-type: none;
    display: inline;
div#nav a{
float: left;
text-decoration:none;
padding-top: 2px;
padding-right: 15px;
/* ==|== slideshow styles ====================================================== */
#slideshow {width: 100%; width: 775px; margin: 0 16px; }
#slideone{
    width:60%;}
.gold{
    color:#d79b00;}
.white{
    color:#fff;}
.underline{
    text-decoration:underline;}
/* ==|== main styles =========================================================== */
/* ==|== main content column styles ======================================================= */
#main{
    background:url(../img/body_bg.jpg) no-repeat 0 0;
    width: 775px;
    height: 885px;
    display:inline-block;
    margin-top: 90px;
    padding: 30px 20px 0px 20px;
    background:url(../img/body_bg.jpg) no-repeat 0 0;
    width: 795px;
    display:inline-block;
    margin-top: 90px;
    padding: 30px 0px 0px 0px;
#maincontent{
    height: 885px;
    padding: 0px 20px;
/* ==|== banner styles ====================================================== */
#banner{
    font-size:1.3125em;
    line-height:1.25em;
    letter-spacing:.02em;
    font-weight: bold;
    font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;
    height: 70px;
    width: 755px;
    margin: 0px 0px 0px -10px;
    padding: 0px 20px 20px 20px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    -khtml-border-top-left-radius: 2px;
    -khtml-border-top-right-radius: 2px;
    background-color: #496793;
    background-image: url(../img/banner_bg.gif);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#496793), to(#2c5079));
    background-image: -webkit-linear-gradient(top, #496793, #2c5079);
    background-image:    -moz-linear-gradient(top, #496793, #2c5079);
    background-image:     -ms-linear-gradient(top, #496793, #2c5079);
    background-image:      -o-linear-gradient(top, #496793, #2c5079);
#leftbanner{
    float: left;
    padding-top:20px;}
.bluedropshadow {
    color:#00274c;
    text-align:left;
    text-shadow: 1px 1px 1px #6882a4;}
#bannerdivision{
    float: left;
    padding: 16px 20px 0 30px;}
#rightbanner{
    float: right;
    padding-top:20px;
#emailbutton{
    float: left;
    padding: 5px 0px 0px 0px;
#or{
    float: left;
    padding: 13px 25px 10px 20px;}
#callus{
    color:#ffffff;
    width: 180px;
    text-align:right;
    text-shadow: 1px 1px 1px #00274c;
    float: right;}
#bannerbottom{
    height: 20px;
    background:url(../img/banner_bottom.jpg) no-repeat 0 0;
    width: 795px;
    margin: 0px 0px 0px -10px;
/* ==|== left column styles ======================================================= */
#leftcol{
    float: left;
    width: 485px;
#introduction{
    padding: 15px;
    margin: 10px 30px 30px 30px;
    width: 390px;
    background-color:#FFFFFF;
    border: 1px solid #ededed;}
#twitterfeed{
    text-align:right;
    margin: 30px;
    width: 415px;
#twitterlogo{
    text-align:left;
    padding:37px 0 0 160px;
    height: 78px;
    background:url(../img/mpay_twitter_bird.png) no-repeat 0 0;
.tweet {
    padding: 1px 0px 1px 0px;
    margin: 7px 0;
    text-align:left;
    font-family: Verdana, sans-serif;
    font-size:.75em;
    line-height:1.75em;
.timestamp {
    text-align:right;
    font-weight: normal;
    color:#8f9d4e;
.viewall {
    padding: 12px 0 0 0;
/* ==|== right column styles ====================================================== */
#rightcol{
    float: right;
    width: 290px;
#mediacenter{
    margin: 10px 30px 50px 30px;
#medialinks{
    padding: 10px 0 0 0;
.mediaicons{
    vertical-align:middle;
    padding: 0px 10px 0 0;
.medialinks{
    vertical-align:middle;
    padding: 10px 0 0 0;
#viewall {
    padding: 12px 0 0 0;
#affandawards{
    margin: 50px 5px 23px 14px;
#affandawardstitle{
    margin: 0px 25px 0px 16px;
#affandawardsframe{
    margin: 20px 0 0 0;
    padding: 27px 40px 50px 29px;
    background:url(../img/flash_bg.png) no-repeat 0 0;
#socialmedia{
    margin: 23px 30px 30px 30px;
#reachout{
    float:left;
    font-size:1.875em;
    line-height:1.25em;
    color:#8f9d4e;
    font-weight:bold;
    font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;   
#socialarrow{
    float: right;
    padding: 20px 0 0 0;
#socialicons{
    float: left;
    padding: 15px 0 0 0;
.socialmediaicons{
    padding: 0 5px 0 0;
/* ==|== footer styles =