body { color: #505050; font-size: 12px; font-family: Arial; line-height: 14px; background-color: white; margin: 0; padding: 0; width: 100%; height: 100% } #sitecontainer { background-image: url("../special_images/bg.jpg"); background-repeat: repeat-x; background-position: center 0; width: 100%; height: 100% } #shadowcontainer { width: 878px } #innercontainershadr { background-image: url(../special_images/bg_shadow_plain_right.png); background-repeat: repeat-y; background-position: right 0 } #innercontainershadl { background-image: url(../special_images/bg_shadow_plain_left.png); background-repeat: repeat-y; background-position: left 0 } #shake { background-color: white; background-image: url(../special_images/shake_csi.jpg); background-repeat: no-repeat; width: 864px } #maincontent { position: relative; width: 764px; height: 100%; clear: both; overflow: hidden }/* Added overflow:hidden; in order to eliminate most of the HUGE white-space at the bottom of the page in all browsers */ #logobox { } .logobox-table { width: 744px; height: 120px; border-style: none; border-color: }/*New table class created in order to style height property (deprecated as inline styling) and other properties in the HTML in keeping with "best practices" */ #new_menubox { padding-top: 5px; position: relative; top: 230px } #contentbox { } h1 { color: #505050; font-size: 12px; font-family: Arial, FontName; font-weight: lighter; line-height: 14px; text-align: left; padding-top: 10px } #flashbox { position: relative; clear: right } #flashbox_right { background-image: url(../special_images/index_logo_stuff.png); background-repeat: no-repeat; background-position: 3px 40px; width: 200px; height: 225px; float: left; clear: none; vertical-align: bottom } #flashbox_left { width: 550px; height: 225px; float: right; clear: none; vertical-align: bottom } #leftindexbox { padding-top: 10px; padding-bottom: 25px; position: relative; width: 545px; float: left } #index_box { } .front { color: #2d2d2d; font-size: 13px; font-family: Arial; font-weight: bolder; line-height: 15px; text-align: left; position: relative; top: 20px } /* positioning relative to its containing box, #contentbox, then scooted the top up 7px to line up with the background image */ .rightindexbox { text-align: left; position: relative; top: 50px; width: 200px; float: right } /* Changed from id (#) to class. Id calls are allowed only once per page. Whenever you think you may be using a style multiple times, make it a class. It's just generally better to use classes, rather than id's in most cases, anyway. */ #rightcontentbox { background-repeat: no-repeat; text-align: left; padding-top: 20px; left: -20px; width: 200px; float: right } .box-top { background-image: url(../special_images/prodbox-top.png); background-repeat: no-repeat; background-position: center top; position: inherit; height: 13px }/* Changed from id (#) to class. Id calls are allowed only once per page. Whenever you think you may be using a style multiple times, make it a class. It's just generally better to use classes, rather than id's in most cases, anyway. */ .formtext { color: #505050; font-size: 10px; font-family: Arial } #box-mid { background-image: url(../special_images/prodbox-cross.png); background-repeat: repeat-y; background-position: center top; position: inherit; height: 368px } .box-midnewsletter { background-image: url(../special_images/box180-cross.png); background-repeat: repeat-y; background-position: center top; position: inherit; height: 200px } .box-midproducts { background-image: url(../special_images/prodbox-cross.png); background-repeat: repeat-y; background-position: center top; position: inherit; height: 285px } #box-midproductsblend { background-image: url(../special_images/box180-blend285.png); background-repeat: no-repeat; background-position: center 0; height: 285px } .midproducts-space { padding-top: 2px } /* Changed from id (#) to class. Id calls are allowed only once per page. Whenever you think you may be using a style multiple times, make it a class. It's just generally better to use classes, rather than id's in most cases, anyway. */ #box-midblend { background-image: url(../special_images/prodbox-blend368.jpg); background-repeat: no-repeat; background-position: center top; position: inherit; height: 368px } #box-midblendnewsletter { background-image: url(../special_images/box_blend200.png); background-repeat: no-repeat; background-position: center top; position: inherit; height: 200px } #box-midblendnewsletter2 { background-image: url(../special_images/box_blend200.png); background-repeat: no-repeat; background-position: center top; position: inherit; height: 200px; }/* Created a unique id(#). An id can only be called once per html document. */ .midblendnewsletter-table { width:64px; border:none; }/*New table class created in keeping with CSS/HTML "best practices" */ .box-bottom { background-image: url(../special_images/prodbox-bottom.png); background-repeat: no-repeat; background-position: center top; position: inherit; height: 19px }/* Changed from id (#) to class. Id calls are allowed only once per page. Whenever you think you may be using a style multiple times, make it a class. It's just generally better to use classes, rather than id's in most cases, anyway. */ #footer { background-image: url(../special_images/footerbg2.png); background-repeat: repeat-x; position: relative; top: -100px; bottom: 0; left: 0; width: 864px }/* Changed positioning to relative. Now the box sits relative to its containing box, div#shake */ .footertext { color: white; font-size: 11px; font-family: Arial, sans-serif; line-height: 14px; text-align: center; vertical-align: middle; padding:8px 0; }/* Added padding top and bottom so there's space between the text and the top and bottom edges of the footer image box. Padding puts space between the element and its containing box.*/ .indent { color: #232323; font-size: 12px; font-family: Arial, helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 15px; margin-right: 190px } .indent130 { color: #232323; font-size: 12px; font-family: Arial, helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 15px; margin-right: 130px } .indent145 { color: #232323; font-size: 12px; font-family: Arial, helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 15px; margin-right: 145px } .products { color: #313131; font-size: 11px; font-family: Arial; line-height: 14px; text-align: left; list-style-type: disc; padding-right: 20px; padding-left: 30px } #footertype { color: white; font-size: 11px; font-family: Arial; line-height: 12px; text-align: center; list-style-type: disc; padding-top: 20px } .footer { background-image: url(../special_images/footbg.jpg); background-repeat: repeat-x; top: 520px; width: 864px; height: 65px } .spaceafter { padding-bottom: 10px } .clear { background-image: url(../special_images/innovation_small.png); background-repeat: no-repeat; background-position: 0 0 } .logo { background-image: url(../special_images/csi_logo_shadow_small.png); background-repeat: no-repeat; background-position: 0 0 } .buttontype { text-align: left; padding-top: 130px; padding-right: 10px } .leftmenuclass { padding-top: 8px } #leftmenubox1 { width: 160px; float: left } #leftmenubox2 { width: 300px; float: left } #leftmenubox-pic { width: 100px; float: right; clear: both } #leftbutton1 { background-image: url(../special_images/brand_owner.png); background-repeat: no-repeat; background-position: 0 15px; width: 135px; float: left } #leftbutton1 a { position: relative; top: 0; right: 20px; left: 0; width: 120px; height: 130px; float: left } .brandtext { visibility: hidden } #leftbutton2 { background-image: url("../special_images/retailer_button.png"); background-repeat: no-repeat; background-position: 0 15px; width: 135px; float: left } #leftbutton2 a { position: relative; top: 0; right: 20px; left: 0; width: 120px; height: 130px; float: left } .retailtext { visibility: hidden } #leftbutton3 { background-image: url("../special_images/packagers2.png"); background-repeat: no-repeat; background-position: 0 15px; width: 135px; float: left } #leftbutton3 a { position: relative; top: 0; right: 20px; left: 0; width: 120px; height: 130px; float: left } .packagetext { visibility: hidden } #leftbutton4 { background-image: url("../images/libraries2.png"); background-repeat: no-repeat; background-position: 0 15px; width: 135px; float: left } #leftbutton4 a { position: relative; top: 0; right: 20px; left: 0; width: 120px; height: 130px; float: left } .distributortext { visibility: hidden } .p-form { }/* Added new class in order to be able to position the form higher in the form container box in IE7 (so there's room for the Submit button). Even though nothing is done HERE (empty declaration), the IE stylesheet contains the conditional fix. */ .submit-button { }/* Added new class in order to be able to position the Submit button above the bottom of the form container box. */ .newsimage { }/* Added new class in order to be able to style image above the bottom of the container box in IE7. Even though nothing is done HERE (empty declaration), the IE stylesheet contains the conditional fix. */ .formstyle { color: navy; font-size: 10px; font-family: Arial; background-color: #e6e6fa; width: 125px; height: 1.5em }/* This styles the input box font size, as well as the color, height and width of the input box itself */