@import url("reset.css");

.clearfix:after {
     content: "."; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* ---- Basic Elements ---- */
body { background-color: #0e0d0e; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 75%; height: 100%; width: 100%; } /* Global Font Size -> 12px */

a { color: #009fe4; text-decoration: none; }
a:hover { text-decoration: underline; }
em { font-style: oblique; }
strong { font-weight: bold; }
img { display: inline-block; }
sup { font-size: 45%; position: relative; top: -3px; vertical-align: top; }

/* ---- Generic Classes ---- */
.clear { clear: both; height: 0; line-height: 1; margin: 0; padding: 0; width: auto; }
.leftAlign { float: left; width: auto; }
.rightAlign { float: right; width: auto; }
.button { /* display: -moz-inline-box; display: inline-block; */ display: block; height: 24px; text-indent: -9999px; width: auto; }
.buyNow { background: url(../images/btn_buyNow.gif) 0 0 no-repeat; width: 153px; }
.buyNow:hover { background-position: 0 -24px; }
.downloadNow { background: url(../images/btn_downloadNow.gif) 0 0 no-repeat; width: 200px; }
/*.downloadNow:hover { background-position: 0 -24px; }*/

/* ---- Basic Layout ---- */
#mainContainer { background: #FFFFFF url(../images/bg_page.jpg) 50% 0 no-repeat; margin: 22px 0 0; position: relative; left: 0; width: 100%; z-index: 2; }
#container { background: url(../images/bg_pageBottom.gif) 50% 100% no-repeat; min-height: 610px; height: auto !important; height: 610px; width: 100%; }
#container #header { margin: 0 auto; width: 1000px; }
#container #content { margin: 0 auto; padding: 0 29px 40px; width: 942px; }

#leftCol { float: left; width: auto; }
#rightCol { float: right; width: auto; }

/* ---- Header ---- */
#container #header { padding: 18px 29px 14px; width: 942px; }
#container #header .logo { background:url(../images/logo_dymo.gif); height:44px; margin-bottom: 14px; text-indent: -9999px; width:134px; }
#container #header .nav { background: url(../images/bg_nav.gif) 0 0 no-repeat; height: 30px; padding: 17px 0 0 0; text-align: right; width: 939px; }
#container #header .nav span { line-height: 1.2; padding-right: 20px; }
#container #header .nav a { background: url(../images/arrow_navBlueRight.gif) 98% 4px no-repeat; color: #999999; font-size: 13px; padding-right: 12px; }
#container #header .nav a:hover, #container #header .nav a.on { background: url(../images/arrow_navBlueDown.gif) 100% 6px no-repeat; color: #ffffff; text-decoration: none; }

/* ---- Footer ---- */
#footer { background: url(../images/bg_footer.gif) 0 0 repeat-x; position: relative; width: 100%; z-index: 1; }
#footerContent { color: #333333; font-size: 11px; height: 71px; margin: 0 auto; padding: 46px 16px 0; text-align: right; width: 968px; }
#footerContent a { color: #cccccc; padding: 0 12px; }

/* ---- Homepage ---- */
#leftCol.homeLeft { background: url(../images/bg_labelManagers.jpg) 0 0 no-repeat; float: left; height: 425px; width: 458px; position: relative; }
#rightCol.homeRight { background: url(../images/bg_labelWriterPrinters.jpg) 0 0 no-repeat; float: right; height: 425px; width: 484px; position: relative; }
.homeLeft h2, .homeRight h2, .homeLeft p, .homeRight p { visibility: hidden; }
.homeLeft .homeBtn, .homeRight .homeBtn { display: -moz-inline-box; display: inline-block; padding: 0 0 11px; position: absolute; }
.homeLeft .homeBtn { background: url(../images/bg_buttonShadowLeft.jpg) 0 100% no-repeat; padding-left: 2px; width: 185px; left: 257px; top: 367px; }
.homeRight .homeBtn { background: url(../images/bg_buttonShadowRight.jpg) 0 100% no-repeat; padding-left: 1px; width: 160px; left: 301px; top: 367px; }
.homeLeft .homeBtn a { background: url(../images/btn_labelManagers.gif) 0 0 no-repeat; display: block; height: 23px; text-indent: -9999px; width: 177px; }
.homeRight .homeBtn a { background: url(../images/btn_labelWriters.gif) 0 0 no-repeat; display: block; height: 23px; text-indent: -9999px; width: 158px; }
.homeLeft .homeBtn a:hover, .homeRight .homeBtn a:hover { background-position: 0 -23px; }

/* ---- Content ---- */
#flashCarousel { margin: 0; padding: 0; }
#flashVideo { margin: 0 0 7px; padding: 0; }
#mainCallout { clear: both; width: 942px; }

#leftCol.prodLeft { margin-left: -4px; width: 312px; }
#rightCol.prodRight { margin-right: -6px; width: 630px; }

.leftCallout { background: url(../images/bg_leftModBottom.gif) 0 100% no-repeat; margin-left: 4px; padding: 0 0 9px; width: 308px; }
.leftCallout h3 { background: url(../images/bg_leftModTop.gif) 0 0 no-repeat; color: #ffffff; font-size: 15px; font-weight: normal; height: 27px; padding: 9px 0 0 15px; width: 293px; }
.leftCallout .calloutCopy { background: url(../images/bg_leftModFill.gif) 0 0 repeat-y; padding: 13px 15px 2px; }
.leftCallout .calloutCopy p { color: #333333; line-height: 1.25; padding: 0 0 8px; }
.calloutLink { background: url(../images/arrow_right.gif) 100% 5px no-repeat; padding: 0 8px 0 0; }

#productContainer { background: url(../images/bg_rightColBottom.gif) 0 100% no-repeat; margin: 0 0 50px; padding: 0 0 16px; width: 633px; }
#productContainer .top { background: url(../images/bg_rightColTop.gif) 0 0 no-repeat; height: 11px; width: 633px; }
#productContainer .mid { background: url(../images/bg_rightColFill.gif) 0 0 repeat-y; padding-left: 13px; }
/*
#productContainer .productLM { background: url(../images/bg_rightColTopLM.jpg) 0 0 no-repeat; }
#productContainer .productLW { background: url(../images/bg_rightColTopLW.gif) 0 0 no-repeat; }
*/

.productModule { background: url(../images/bg_rightModBottom.gif) 0 100% no-repeat; padding: 0 0 24px; width: 605px; }
.productModule h3 { background: url(../images/bg_rightModTop.gif) 0 0 no-repeat; color: #009fe4; font-size: 21px; font-weight: normal; height: 40px; margin-top: 9px; padding: 18px 0 0 25px; width: 580px; }
.productModule.first h3 { margin: 0; }
.productModule .modContent { background: url(../images/bg_rightModFill.gif) 0 0 repeat-y; padding: 15px 18px 0; }
.productModule .prodDetails { float: left; margin-left: 17px; padding: 10px 0 0; text-align: center; width: 168px; }
.productModule .prodDetails h4, .productModule .prodDetails p { text-align: left; }
.productModule .prodDetails h4 { color: #333333; font-size: 21px; font-weight: bold; padding: 8px 0 6px; }
.productModule .prodDetails p { padding: 0 0 12px; }
.productModule .prodInfo { float: right; line-height: 1.4; margin-right: 14px; width: 356px; }
.productModule .prodInfo p { color: #333333; padding: 0 0 20px; }
.productModule .prodInfo ul { padding: 0 0 6px; }
.productModule .prodInfo li { background: url(../images/bullet.gif) 0 6px no-repeat; margin: 0 0 8px; padding: 0 0 0 13px; }

#mainCallout.software { background: url(../images/softwareHero.jpg) 0 0 no-repeat; height: 374px; position: relative; }
#mainCallout.software h2 { font-size: 35px; font-weight: normal; visibility: hidden; }
#mainCallout.software h2 span { font-size: 18px; font-weight: bold; }
#mainCallout.software p { color: #ffffff; font-size: 13px; line-height: 1.3; width: 255px; position: absolute; left: 61px; top: 140px; }
#mainCallout.software .heroBtn {display: block; position: absolute; left: 55px; top: 274px; width: 131px; }

.softDirectTable { padding: 4px 0 10px 21px !important; }
.softDirections { width: 584px; }
.softDirections td { padding: 6px 0; vertical-align: middle; }
.softDirections p { line-height: 1.4; padding: 0 4px 0 19px; }

.contentModule { width: 600px; }
.contentModule .greyModuleSM { background: url(../images/greyModule_bottom.gif) 0 100% no-repeat; padding: 0 0 19px; width: 600px; }
.contentModule .greyModuleSM .top { background: url(../images/greyModule_top.gif) 0 0 no-repeat; height: 8px; width: 600px; }
.contentModule .greyModuleSM .mid { background: url(../images/greyModule_fill.gif) 0 0 repeat-y; margin: 0; padding: 0 9px 0 8px; }
.contentModule .greyModuleSM .innerContent { padding: 21px 36px 0; }
.contentModule .greyModuleSM h3 { background: url(../images/bg_blueHdr.gif) 100% 0 no-repeat; color: #ffffff; font-size: 22px; height: 36px; padding: 11px 0 0 17px; width: auto; }
.contentModule .greyModuleSM h4 { border-bottom: 1px solid #dcdcdc; color: #666666; font-size: 27px; margin: 0 0 22px; padding: 0 0 23px; }
.contentModule .greyModuleSM p { color: #000000; font-size: 13px; line-height: 1.4; padding: 0 0 18px; }
.contentModule .greyModuleSM a { font-size: 12px; }
.contentModule .greyModuleSM ol { list-style: decimal outside; margin-left: 16px; padding-bottom: 16px; }
.contentModule .greyModuleSM ol li { line-height: 1.4; margin-bottom: 6px; }
.contentModule .greyModuleSM ul { list-style: circle outside; padding: 6px 0 0 16px; }
.contentModule .greyModuleSM ul li { line-height: 1.4; margin-bottom: 6px;}

.rightCallout { margin: 8px 3px 0 0; width: 312px; }
.rightCallout .callouts { background: url(../images/calloutBottom.gif) 0 100% no-repeat; margin: 0 1px; padding: 0; width: 309px; }
.rightCallout .callouts .top { background: url(../images/calloutTop.gif) 0 0 no-repeat; height: 38px; padding: 0; width: 309px; }
.rightCallout .callouts .top h4 { color: #ffffff; font-size: 15px; padding: 11px 0 0 16px; }
.rightCallout .callouts .mid { font-size: 13px; padding: 16px 6px; position: relative; }
.rightCallout .callouts .modLink { display: -moz-inline-box; display: inline-block; }
.rightCallout .callouts p { color: #666666; line-height:1.4; padding: 0 6px 10px 0; }
.rightCallout .callouts p strong { color: #666666; font-size: 13px; }
.rightCallout .leftImg .bdrAttached { position: absolute; bottom: 0; left: 0; }
.rightCallout .leftImg p, .rightCallout .leftImg a { margin-left: 97px; }

#downloadForm input, #downloadForm select, #downloadForm span, #downloadForm label { float: left; width: auto; }
#downloadForm input, #downloadForm select { clear: left; }
#downloadForm input, #downloadForm span, #downloadForm label { margin: 3px 0; }
#downloadForm input { margin: 3px 6px; *margin: 2px 6px; }

#downloadForm label { margin-top: 5px; vertical-align: middle; }
#downloadForm input.textBox, #downloadForm input[type="text"] { margin: 0; width: 375px; }
#downloadForm .submitFormBtn { background: url(../images/btn_submitToDownload.gif) 0 0 no-repeat; border: none; cursor: pointer; display: -moz-inline-box; display: inline-block; height: 24px; margin: 0 0 6px; width: 297px; }
#downloadForm .submitFormBtn:hover { background-position: 0 -24px; }
#downloadForm p { overflow: hidden; padding-bottom: 12px; }
#downloadForm .formLabel { clear: both; display: block; float: none; margin: 0; }
#downloadForm .error { clear: both; color: #ff0000; display: block; float: none; font-weight: bold; margin: 0; padding-left: 5px; }
#downloadForm hr { background: none; border: none; border-top: 1px solid #dcdcdc; clear: both; margin: 0 0 18px; padding: 0; }
#downloadForm table { margin-top: -5px; }
#downloadForm table td { clear: both; overflow: hidden; }


.imgCallout { margin-bottom: 8px; text-align: center; }
