html { 
  background: #304b92; 
}


/* main */
.pageCentering {width: 1010px; margin: 0px auto; padding: 0px 0px; -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.15); box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);}
.desktopOnly {display: block;}    
.mobileOnly {display: none;} 
.logoContainer {position: absolute; z-index: 1000; width: 220px; margin-left: 25px;}   
.wrapper {width: 1010px; background: #405da9 url(images/bg-wrapper.jpg) repeat-y ;}	
.footer {background: #fff url(images/bg-bottomstrip.png) repeat-x; width: 1010px; margin-bottom: 20px;}
.footerPad {padding: 10px 0px 10px 0px;}
.leftColumn {float: left; width: 220px; padding : 40px 0px 30px 0px;}
.rightColumn {background: #fff; float: left; width: 590px;}
.rightColumnPad {padding: 40px 50px 50px 50px;}
.quicklinksCol {float: right; width: 200px; padding: 40px 0px 40px 0px;}
.quicklinks {font-family: arial, Helvetica, sans-serif; font-size: 12px; line-height: 17px; color: #fff; padding : 0px 0px 10px 20px; }

.directoryPad {padding:50px 25px 50px 0px;}
.whitePanel {background: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
.whitePanelPad {padding: 15px 20px;}
.MMlogo {float: right; width: 491px;}
.productImage {max-width: 216px;}
.productGridBox {width: 160px; height: 350px; float: left; border: 1px solid #000000; margin: 0px 7px 10px 0px;}
#mobileMenuHeader {background: #232323; border-top: 2px solid #000; border-bottom: 2px solid #000; border-left: 2px solid #000; }
#mobileMenu {display: none; background: #fff; margin: 0px 0px;}
.pagePic {float: right; margin-left: 35px; margin-bottom: 20px;}
.thumbBox {display: inline-block; margin-top: 20px;}
.awardWinnerTag {position: absolute; z-index: 1000; background: #1f3667; top: 10px; left: -5px; padding: 3px 15px; color: white; font-size: 12px; font-weight: bold; letter-spacing: 3px;}

A.pdfLink {
	display: block; width: 280px; cursor: pointer; margin: 5px; padding: 2px 8px 2px 12px;
	background: #7d7d7d url(images/bg-pdfLink.jpg) repeat-x bottom; border: 2px solid #666666;
	font-family: verdana, Geneva, sans-serif; font-size: 13px; font-weight: normal; line-height: 13px; color: #ffffff; text-decoration : none;
	-webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px;
}
A:hover.pdfLink {
	display: block; width: 280px; cursor: pointer; margin: 5px; padding: 2px 8px 2px 12px;
	background: #7d7d7d url(images/bg-pdfLink.jpg) repeat-x bottom; border: 2px solid #000000;
	font-family: verdana, Geneva, sans-serif; font-size: 13px; font-weight: normal; line-height: 13px; color: #ffffff; text-decoration : none;
}
/* Buttons
====================================*/
.button,
input[type="button"] {outline: none; padding: 4px 11px; display: inline-block; border: 0px; font-family: Arial, helvetica, sans-serif; font-weight: normal; text-decoration: none; text-transform: none; cursor: pointer; width: auto;
-webkit-transition: all 0.1s ease-in-out;-moz-transition: all 0.1s ease-in-out;-o-transition: all 0.1s ease-in-out;-ms-transition: all 0.1s ease-in-out;transition: all 0.1s ease-in-out;}

.buttonMobTopnav {height: 34px; padding: 15px 11px 0px 11px; margin-right: 2px; display: inline-block; vertical-align: top; font-size: 14px; line-height: 20px; font-family: Arial, helvetica, sans-serif; font-weight: normal; text-decoration: none; text-transform: none; cursor: pointer; width: auto; text-transform: uppercase; outline: none;}

.buttonMobNav {margin: 0px 0px; border-top: 1px solid #fff; padding:14px 16px; display: block; vertical-align: top; font-family: Arial, helvetica, sans-serif; font-weight: normal; text-decoration: none; text-transform: none; cursor: pointer; width: auto; -webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;-webkit-transition: }


.buttonMobTopnav.gray {color: #fff; background: #333;}
.buttonMobTopnav.gray:hover {background:#4b4b4b;}

.buttonMobTopnav.color {color:#fff; background:#424242;}
.buttonMobTopnav.color:hover {background:#333;}

.buttonMobNav.gray {color: #fff; background: #aeaeae;}
.buttonMobNav.gray:hover {background:#0093d2;}





/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
.pageCentering {width: 767px; margin: 0px auto; padding: 0px 0px; }
.desktopOnly {display: block;}    
.mobileOnly {display: none;}
.noTablet {display: none;}    
.wrapper {width: 767px;}	
.logoContainer {position: absolute; z-index: 1000; width: 176px; margin-left: 20px;}   
.footer {width: 767px; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #949494; text-align: center;}
.leftColumn {float: left; width: 200px; padding : 30px 0px 30px 0px;}
.rightColumn {float: right; width: 567px;}
.rightColumnPad {padding: 40px 50px 50px 50px;}
.directoryPad {padding:40px 25px 40px 0px;}
.whitePanel {background: white; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;}
.whitePanelPad {padding: 15px 15px;}
.MMlogo {float: right; width: 400px;}
.productImage {max-width: 200px;}
.productGridBox {width: 160px; height: 350px; float: none; border: 1px solid #000000; margin: 0px 7px 10px 0px;}
A.pdfLink {width: 250px; padding: 12px 8px 12px 12px;}
A:hover.pdfLink {width: 250px; padding: 12px 8px 12px 12px;}

    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
.pageCentering {width: 320px; margin: 0px auto; padding: 0px 0px; }
.desktopOnly {display: none;}    
.mobileOnly {display: block;}    
.wrapper {width: 320px; background: #fff;}	
.logoContainer {position: relative; z-index: 1000; width: 100px; margin-left: 110px; margin-bottom: -30px;}   
.footer {width: 320px; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #949494; text-align: center;}
.leftColumn {float: none; width: 320px; margin: 0px; text-align: left;}
.rightColumn {float: none; width: 320px;}
.rightColumnPad {padding:20px 20px 20px 20px}
.directoryPad {padding:20px 0px 20px 0px;}
.whitePanel {background: white; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;}
.whitePanelPad {padding: 15px 10px;}
.MMlogo {float: none; width: 275px; margin: 12px 0px;}
.productGridBox {width: 160px; height: 350px; float: none; border: 1px solid #000000; margin: 0px 7px 10px 0px;}
A.pdfLink {width: 250px; padding: 12px 8px 12px 12px;}
A:hover.pdfLink {width: 250px; padding: 12px 8px 12px 12px;}


    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
.pageCentering {width: 479px; margin: 0px auto; padding: 0px 0px; }
.desktopOnly {display: none;}    
.mobileOnly {display: block;}    
.wrapper {width: 479px; background: #fff;}	
.logoContainer {position: absolute; z-index: 1000; width: 96px; margin-left: 0px;}   
.footer {width: 479px; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #949494; text-align: center;}
.leftColumn {float: none; width: 479px; margin: 0px; text-align: left;}
.rightColumn {float: none; width: 479px;}
.rightColumnPad {padding:30px 30px 30px 30px}
.directoryPad {padding:30px 0px 30px 0px;}
.whitePanel {background: white; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;}
.whitePanelPad {padding: 15px 10px;}
.MMlogo {float: none; width: 370px; margin: 12px 0px;}
.productGridBox {width: 160px; height: 350px; float: none; border: 1px solid #000000; margin: 0px 7px 10px 0px;}
A.pdfLink {width: 280px; padding: 2px 8px 2px 12px;}
A:hover.pdfLink {width: 280px; padding: 2px 8px 2px 12px;}

    }