/*--MAIN------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----- this is very important be careful when tweeking this!!! make sure that the body is set relative to the zeroed out wildcard* from here all content can be set relative to the body. Plus then you can absolute position items that will not scale or change in size in relation to there relatively positioned parent-very important... ------*/ *{margin:0; padding:0;} body {color:#444444; font: 85%/1.6em "Helvetica, Verdana, Arial", sans-serif; min-width: 900px; width: 920px; margin:0 auto; text-align:center; position:relative;} #content {text-align:left;} ul li img {vertical-align: middle;} li.bullet, ul.bullet {list-style: disc outside;} h1 {font-size:146%;} h2 {font-size:131%;} h3 {font-size:116%;} h4 {font-size:100%;} h1, h2, h3, h4{padding:0; margin:0; color: #146fc1; font-weight:bold;} h1 img, h2 img, h3 img, h4 img {vertical-align: middle;} a {color: #4981CE; text-decoration:none;} a:hover {color:#000000;} a:visited {color:#888888;} a:visited:hover {color:#444444;} /*--endMAIN----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #nav_wrapper { background: url(/images-new/nav/cloud_72.jpg) no-repeat; height:190px; position:relative; z-index:2;} #nav, #nav li ul {list-style-type: none;} /*---------- This is the invisible menu inside the #nav_wrapper -it creates a hot spot over the acoustica logo on every page ----------*/ #menu a { height: 97px; width: 220px; border:none; text-decoration: none; position:absolute; left:8px;} #menu a i { visibility: hidden;} #menu a:hover {text-decoration: none;} /*---------- Absolute position the ul#nav (this is the ul wrapped in the #nav_wrapper), float and apply img replacement to the #nav li#id, hide visibility ----------*/ #nav { position:absolute; top:99px; left: 22px; } #nav #solutions, #nav #products, #nav #products, #nav #download, #nav #store, #nav #company, #nav #support, #nav slogan {float:left;} #nav #solutions a i, #nav #products a i, #nav #products a i, #nav #download a i, #nav #store a i, #nav #company a i, #nav #support a i, #nav #slogan a i { visibility: hidden;} #nav #solutions a {display:block; background: url(/images-new/nav/menu/static/solutions.jpg) no-repeat; width:105px; height:68px;} #nav #products a {display:block; background: url(/images-new/nav/menu/static/products.jpg) no-repeat; width:108px; height:68px;} #nav #download a {display:block; background: url(/images-new/nav/menu/static/download.jpg) no-repeat; width:110px; height:68px;} #nav #store a {display:block; background: url(/images-new/nav/menu/static/store.jpg) no-repeat; width:83px; height:68px;} #nav #company a {display:block; background: url(/images-new/nav/menu/static/company.jpg) no-repeat; width:95px; height:68px;} #nav #support a {display:block; background: url(/images-new/nav/menu/static/support.jpg) no-repeat; width:104px; height:68px;} #nav #slogan { display:block; background: url(/images-new/nav/menu/static/slogan.jpg) no-repeat; width:204px; height:48px; float: left; } #nav #solutions a, #nav #products a, #nav #products a, #nav #download a, #nav #store a, #nav #company a, #nav #support a, #slogan a {border:none; text-decoration: none;} /*---------- #nav li#id :hover img replace----------*/ #nav #solutions a:hover {display:block; background: url(/images-new/nav/menu/hover/solutions.jpg) no-repeat; width:105px; height:68px; } #nav #products a:hover {display:block; background: url(/images-new/nav/menu/hover/products.jpg) no-repeat; width:108px; height:68px; } #nav #download a:hover {display:block; background: url(/images-new/nav/menu/hover/download.jpg) no-repeat; width:110px; height:68px; } #nav #store a:hover {display:block; background: url(/images-new/nav/menu/hover/store.jpg) no-repeat; width:83px; height:68px; } #nav #company a:hover {display:block; background: url(/images-new/nav/menu/hover/company.jpg) no-repeat; width:95px; height:68px; } #nav #support a:hover {display:block; background: url(/images-new/nav/menu/hover/support.jpg) no-repeat; width:104px; height:68px; } #nav #solutions a:hover, #nav #products a:hover, #nav #products a:hover, #nav #download a:hover, #nav #store a:hover, #nav #company a:hover, #nav #support a:hover, #nav #slogan a:hover {border:none; text-decoration: none;} /*---------- Hide the nested drop lists ----------*/ #nav li ul {position:absolute; left:-999em;} #nav li:hover ul {background: #FFF; border-right: medium solid #CCC; border-left: medium solid #CCC; border-bottom: medium solid #CCC; left:auto; } #nav li:hover ul, li.over ul { display: block; } #nav li:hover ul, #nav li.sfhover ul {left:auto; margin:-4px 0 0 0; padding:0;} /*---------- Style the nested drop lists also give the size for each nested drop lists. ----------*/ #nav #solutions .hide a, #nav #products .hide a, #nav #download .hide a, #nav #store .hide a, #nav #support .hide a, #nav #company .hide a { height:20px; color:#146fc1; background:#FFF; padding:5px 10px 0 10px; line-height:15px; font-size:13px;} #nav #solutions .hide a {width:175px;} #nav #products .hide a, #nav #download .hide a, #nav #store .hide a, #nav #support .hide a {width:135px;} /*---------- Drop lists :hover ----------*/ #nav #solutions .hide a:hover, #nav #products .hide a:hover, #nav #download .hide a:hover, #nav #store .hide a:hover, #nav #support .hide a:hover, #nav #company .hide a:hover {line-height:15px; color:#FFF; background:#146fc1; height:20px; font-size:13px; } /*---------- Cookie trail, has a slight negative margin to pull it up.----------*/ #cookie_trail { text-align:left; margin-top:-15px; } #cookie_trail a {color: #ABABAB; text-decoration: none;} #cookie_trail p a span {color: #477FC9; text-decoration: underline;} #cookie_trail p em {color: #CCCCCC; padding-left:20px;} /*--GLOBALWRAPPER + SUBNAV-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------This is the content wrapper. The wrapper is floated left to accomodate all of the stetching content it contains. Width is set on the floated wrapper so that it fills the appropriate space. The position is set to relative in order to set any of it's children to relative.----------*/ #wrapper { width: 920px; float: left; margin-top:-5px; position:relative;} /*----------This styles the inside of the wrapper, the wrapperHeader contains the top image, the wrapperMiddle contains the repeating y axis image and wrapperBottom has the bottom closing image. The wrapperMiddle is floated left and a width set. By setting a width that matches the body, the individual floated div will still occupy the normal document flow. The div has been floated to accomodate the expanding wrapperMiddle's content. The wrapperBottom needs to clear the float above it, so it has a clear:both set to bring it back into the normal document flow. There is a slight 1-3 pixel gap I can fix it with a negative bottom margin in Mozilla but in IE 6 and 7 it doesn't work?? wrapperBottom is set to position relative so that it's child div.subnav can be absolutly positioned inside it.----------*/ #wrapperHeader { display: block; background: url(http://www.acoustica.com/images-new/backrounds/rotate_object_top_cloud.jpg ) no-repeat -10px top; height:125px; float:left; width:940px;} #wrapperMiddle { background: url(http://www.acoustica.com/images-new/backrounds/rotate_object_center.jpg) repeat-y -10px 0; float: left; width: 100%; } #wrapperBottom { background: url(/images-new/backrounds/bottom.jpg) repeat-y -10px -1px; height:158px; padding:0 5%; clear:both; position:relative;} /*----------This is for the wrapperHeader. This will need to be for the product page templates that have larger headers. ----------*/ #wrapperHeader h1, #wrapperHeader h2 {} /*----------This is the div.subnav nested in the wrapperBottom it has been absolutly positioned inside. ----------*/ #wrapperBottom div.subnav { width:652px; position:absolute; top:50px; left:30%; font-size:12px;} #wrapperBottom div.subnav span { padding:0 10px; color: #CCC;} /*--endGLOBALWRAPPER---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*--TEMPLATES------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------\\NESTED-2colfixed// Both columns have been floated left and widths set to a percentage, so if the parent element is resized they will accomodate the change. ----------*/ #wrapperMiddle div#colLeft { width:52%; padding-right:10px; float: left; } #wrapperMiddle div#colRight { float: left; width: 41%; } /*----------This ensures that any div in the div#colRight will have an em based bottom margin (this will allow the divs to expand without overlapping the content the follows it in the document flow. ----------*/ #wrapperMiddle div#colRight div { margin-bottom:2em; } /*GLOBAL CLASSES------------------------------------------------------------------------------------------------------------------------------------------------*/ /*Give various paddings*/ #wrapperMiddle .padLeft, #wrapperMiddle div#colLeft .padLeft, #wrapperMiddle div#colRight .padLeft {padding-left:0;} #wrapperMiddle .padRight, #wrapperMiddle div#colLeft .padRight, #wrapperMiddle div#colRight .padRight {padding-right:0;} #wrapperMiddle .padLeftRight, #wrapperMiddle div#colLeft .padLeftRight, #wrapperMiddle div#colRight .padLeftRight {padding:0;} /*Reset various paddings*/ #wrapperMiddle .nopadLeft, #wrapperMiddle div#colLeft .nopadLeft, #wrapperMiddle div#colRight .nopadLeft {padding-left:0;} #wrapperMiddle .nopadRight, #wrapperMiddle div#colLeft .nopadRight, #wrapperMiddle div#colRight .nopadRight {padding-right:0;} #wrapperMiddle .nopadLeftRight, #wrapperMiddle div#colLeft .nopadLeftRight, #wrapperMiddle div#colRight .nopadLeftRight {padding:0;} /*Give various margins*/ #wrapperMiddle .marTop, #wrapperMiddle div#colLeft .marTop, #wrapperMiddle div#colRight .marTop {margin-top:2em;} #wrapperMiddle .marLeft, #wrapperMiddle div#colLeft .marLeft, #wrapperMiddle div#colRight .marLeft {margin-left: 2em;} /*Reset various margins*/ #wrapperMiddle .nomarTop, #wrapperMiddle div#colLeft .nomarTop, #wrapperMiddle div#colRight .nomarTop { margin-top: -2em;} #wrapperMiddle .nomarLeft, #wrapperMiddle div#colLeft .nomarLeft, #wrapperMiddle div#colRight .nomarLeft {margin-left:-2em;} /*Set various floats with 100% width.*/ #wrapperMiddle .float, #wrapperMiddle div#colBoth .float, #wrapperMiddle div#colRight .float {float:left; width:100%;} #wrapperMiddle .floatRight, #wrapperMiddle div#colLeft .floatRight, #wrapperMiddle div#colRight .floatRight {float:right;} #wrapperMiddle .floatNone {} /*Clear various floats*/ #wrapperMiddle .clear, #wrapperMiddle div#colLeft .clear, #wrapperMiddle div#colRight .clear {clear:left;} #wrapperMiddle .clearRight, #wrapperMiddle div#colLeft .clearRight, #wrapperMiddle div#colRight .clearRight {clear:right;} #wrapperMiddle .clearBoth, #wrapperMiddle div#colBoth .clearBoth, #wrapperMiddle div#colRight .clearBoth {clear:both;} /*Set bold*/ #wrapperMiddle .bold, #wrapperMiddle div#colLeft .bold, #wrapperMiddle div#colRight .bold {font-weight:bold;} /*Remove bold*/ #wrapperMiddle .nobold, #wrapperMiddle div#colLeft .nobold, #wrapperMiddle div#colRight .nobold {font-weight:normal;} /*Remove list style*/ #wrapperMiddle .none, #wrapperMiddle div#colLeft .none, #wrapperMiddle div#colRight .none {list-style:none;} /*endGLOBAL TEMPLATE CLASSES-------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*----------\\endNESTED-2colfixed// Both columns have been floated left and widths set to a percentage, so if the parent element is resized they will accomodate the change. ----------*/ /*--endTEMPLATES------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*---wrapperHeader div#IMENU------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*This styles an invisible menu found in the wrapperHeader of the different product sections-each product section links to an included file*/ div#wrapperHeader div#iMenu { position:relative; top:28px; left: 10px; display:block; width:200px; height:75px; float:left;} div#wrapperHeader div#iMenu a { height:75px; display:block; width:200px;} /*---endwrapperHeader invisible Menu------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*---wrapperHeader div#edition------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*This styles the edition*/ div#wrapperHeader div#edition { position:relative; top:50px; display:block; width:400px; height:3em; float:right; right:30px; } div#wrapperHeader div#edition h1 {height:30px; display:block; width:200px; color:#EEEEEE;} div#wrapperHeader div#edition a { } div#wrapperHeader div#edition a:visited {color:#EEEEEE;} /*---endwrapperHeader invisible Menu------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*This styles the template for this month*/ /*colLeft style*/ #wrapperMiddle div#colLeft div.index {padding-left:30px;} #wrapperMiddle div#colLeft div.index p {margin:0 0 2em 0;} #wrapperMiddle div#colLeft div.index h1, #wrapperMiddle div#colLeft div.index h2 {margin:0 0 .5em 0; border-top:5px solid #DDDDDD;} /*colRight style*/ #wrapperMiddle div#colRight div.keyboard {float:left; padding:1em 0; border-top:1px dotted #DDDDDD;} #wrapperMiddle div#colRight div.keyboard h3{margin-bottom:1em; } #wrapperMiddle div#colRight div.keyboard h3 i {background:url(http://www.acoustica.com/images-new/newsletter/2008/mar/keyboard-logo.jpg) no-repeat left top; display:block; width:145px; height:40px; margin:1em 0 0 0; float:left; padding-left:10px;} #wrapperMiddle div#colRight div.keyboard blockquote{}