/********************************************************** ** ** Filename: main.css ** Desc: Contains all general Ramius.net styles ** Version: 1.0 ** Last Updated: September 22, 2008 ** **********************************************************/ /*=general styles ----------------------*/ body { background: #DBDBDB; margin: 15px 0 0; font-family: arial, helvetica, sans-serif; font-size: 13px; text-align: center; color:#393939; padding-bottom: 20px; } img { border: none; } h1, h2, h3, p { margin:0; padding:0; width: 480px; } h1, h2, h3, { font-weight: normal; font-family: arial, helvetica, sans-serif; } h1 { margin: 0 0 20px 0; font-size: 20px; color: #336600; font-weight: normal; } h2 { padding:0 0 8px 0; border-bottom: 1px solid #EDEDED; margin:0 0 10px 0; color:#336600; width:375px; font-size:17px; } h3 { margin: 0 0 15px 0; line-height: 15px; font-size: 13px; color: #999999; font-weight: normal; } p { margin: 0 0 20px 0; font-size: 12px; line-height: 21px; } a { color: #c00; text-decoration: none; outline-style: none; font-size: 13px; } a:hover { text-decoration: underline; } blockquote { background: transparent url(../_images/icons/quoleft.png) 13px top no-repeat; width:250px; margin:0; height:137px; } blockquote div { background: transparent url(../_images/icons/quoright.png) right 70px no-repeat; text-align:centre; width:250px; } blockquote p { padding: 5px 0 8px 0; margin:0; color:#418E09; font-weight:bold; font-size:22px; width:250px; } ul { list-style-image: none; list-style:none; padding:0; margin:0 0 5px 0; width:375px; } li { font-size:12px; color:#333333; padding:0 0 3px 0; line-height:21px; } .features li { background:url('../_images/icons/arrows.png') 0px 8px no-repeat; padding-left:15px;} @media screen and (-webkit-min-device-pixel-ratio:0) { .features li { background:url('../_images/icons/arrows.png') 0px 6px no-repeat; } } .arrow { background:transparent url(../_images/icons/red-arrows.png) no-repeat scroll right center; padding-right:15px; } /*=skip navigation -------------------*/ #skipnav { position: absolute; top: -9999px; left: -9999px; } /*=page wrappers ----------------------*/ #page-wrapper { clear: both; margin: 15px 0; position: relative; min-height: 89px; padding:12px 40px; } #page-body { width: 917px; background: url(../_images/topgraphic-bottombg-subpage.png) 0 0 repeat-x; position:relative; top:-17px; left:2px; padding:9px 0 0 0; } div#outer { width: 954px; margin: 0 auto; padding: 0; text-align: left; } #page-header-print{ display:none; } #page-header { postion: relative; height: 49px; padding: 0 17px 16px; font-size: 11px; background: url(../_images/main_top_border.gif) 0 100% no-repeat; } #page-header-image { float:left; width: 186px; height: 44px; } #page-header-image a { display: block; width: 186px; height: 44px; background: url(../_images/header-ramius.gif) 0 0 no-repeat; text-decoration: none; text-indent: -9999px; } #page-header ul { float: right; list-style:none; margin: 20px 0 0; padding: 0; width:auto; } #page-header ul li { float: left; padding: 0 10px; } #page-header ul li a { color: #333; text-decoration: none; font-weight: normal; font-size:11px; } #page-header ul li a:hover { color: #c00; text-decoration: underline; font-size:11px; } /*=banners ----------------------*/ /*#page-toparea-graphic { width: 920px; height: 305px; background: url(../_images/_banners/homepage-banner-notext.jpg) 50% 50% no-repeat; margin-top:10px; _margin-top:0; }*/ #page-toparea-graphic { width: 920px; height: 256px; padding-top:10px;} #page-toparea-menu { width: 920px; height: 53px; margin-top: 1px; position: relative; z-index: 2; } #page-toparea-graphic-sixent { width: 920px; height: 172px; background: url(../_images/_banners/banner-green.jpg) 50% 50% no-repeat; margin-top:37px; position: relative; z-index:1; } #page-toparea-graphic-sixent-com { width: 920px; height: 172px; background: url(../_images/_banners/banner-green.jpg) 50% 50% no-repeat; margin-top:37px; position: relative; z-index:5000; } #page-toparea-graphic-cz { width: 920px; height: 172px; background: url(../_images/_banners/banner-blue-cz.jpg) 50% 50% no-repeat; margin-top:43px; position: relative; top:-5px; z-index:5000; #height:173px; } #page-toparea-graphic-company { width: 920px; height: 192px; background: url(../_images/_banners/banner-green.jpg) 50% 50% no-repeat; position: relative; } #page-toparea-graphic-resources { width: 920px; height: 192px; background: url(../_images/_banners/banner-green.jpg) 50% 50% no-repeat; position: relative; } #page-toparea-graphic-support { width: 920px; height: 192px; background: url(../_images/_banners/banner-green.jpg) 50% 50% no-repeat; position: relative; } #page-toparea-graphic-contact_us { width: 920px; height: 124px; background: url(../_images/_banners/banner-green-sm.jpg) 50% 50% no-repeat; position: relative; } #page-toparea-graphic-sitemap { width: 920px; height: 124px; background: url(../_images/_banners/banner-green-sm.jpg) 50% 50% no-repeat; position: relative; } #page-toparea-graphic-privacy { width: 920px; height: 124px; background: url(../_images/_banners/banner-green-sm.jpg) 50% 50% no-repeat; position: relative; } #page-toparea-graphic-tos { width: 920px; height: 124px; background: url(../_images/_banners/banner-blue-sm.jpg) 50% 50% no-repeat; position: relative; } #page-toparea-graphic-clients { width: 920px; height: 192px; background: url(../_images/_banners/banner-green.jpg) 50% 50% no-repeat; position: relative; } #page-toparea-graphic-error { width: 920px; height: 124px; background: url(../_images/_banners/banner-green-sm.jpg) 50% 50% no-repeat; position: relative; } #page-toparea-graphic-landing { width: 920px; height: 100px; background: url(../_images/_banners/banner-green-sm.jpg) 50% 50% no-repeat; position: relative; } #page-toparea-graphic-sixent-customer-support { width: 920px; height: 172px; background: url(../_images/_banners/banner-green.jpg) 50% 50% no-repeat; margin-top:-3px; position: relative; } #page-toparea-graphic-solutions { width: 920px; height: 192px; background: url(../_images/_banners/banner-green.jpg) 50% 50% no-repeat; position: relative; } #page-toparea-graphic-solutions-productivity { width: 920px; height: 192px; background: url(../_images/_banners/banner-red.jpg) 50% 50% no-repeat; position: relative; } #page-toparea-graphic-solutions-demand { width: 920px; height: 192px; background: url(../_images/_banners/banner-yellow.jpg) 50% 50% no-repeat; position: relative; } #page-toparea-graphic-solutions-innovation { width: 920px; height: 192px; background: url(../_images/_banners/banner-purple.jpg) 50% 50% no-repeat; position: relative; } #page-toparea-graphic-solutions-support { width: 920px; height: 192px; background: url(../_images/_banners/banner-blue.jpg) 50% 50% no-repeat; position: relative; } .top-banner { _left:0px; } /*=main navigation --------------------*/ .tab-menu { width: 920px; height: 33px; position: relative; z-index: 200; } #page-toparea-menu ul#mainNav { list-style: none; margin: 0; padding: 0; width: 857px; height: 58px; } #mainNav li { position: absolute; top: 0; height: 54px; cursor: pointer; } #mainNav li a { display: block; text-decoration: none; height: 54px; text-indent: -9999px;} #mainNav li#navProducts { width: 174px; left: 0; } #mainNav li#navProducts a { width: 174px; background: url(../_images/_menu/products.png) 0 0 no-repeat; } #mainNav li#navProducts a:hover, #mainNav li:hover#navProducts a, #mainNav li.hover#navProducts a { background-position: 0 -53px; } #mainNav li#navSolutions { width: 176px; left: 174px; } #mainNav li#navSolutions a { width: 176px; background: url(../_images/_menu/solutions.png) 0 0 no-repeat; } #mainNav li#navCompany { width: 179px; left: 350px; } #mainNav li#navCompany a { width: 179px; background: url(../_images/_menu/company.png) 0 0 no-repeat; } #mainNav li#navResources { width: 196px; left: 529px; } #mainNav li#navResources a { width: 196px; background: url(../_images/_menu/resources.png) 0 0 no-repeat; } #mainNav li#navSupport { width: 199px; left: 725px; } #mainNav li#navSupport a { width: 199px; background: url(../_images/_menu/support.png) 0 0 no-repeat; } #mainNav li#navCompany a:hover, #mainNav li:hover#navCompany a, #mainNav li.hover#navCompany a, #mainNav li#navResources a:hover, #mainNav li:hover#navResources a, #mainNav li.hover#navResources a, #mainNav li#navSupport a:hover, #mainNav li:hover#navSupport a, #mainNav li.hover#navSupport a, #mainNav li#navSolutions a:hover, #mainNav li:hover#navSolutions a, #mainNav li.hover#navSolutions a { background-position: 0 -53px; } #mainNav li#navProducts a.current, #mainNav li#navCompany a.current, #mainNav li#navResources a.current, #mainNav li#navSupport a.current, #mainNav li#navSolutions a.current { background-position: 0 -106px; } #page-mainarea { background: url(../_images/page-mainarea_bg.gif) 0 0 repeat-y #fff; padding: 0 16px 20px; float: left; } #page-bottomarea { background: url(../_images/topgraphic-bottombg.png) 0 0 no-repeat; margin: 10px 0 0 2px; padding: 30px 45px; min-height: 100px; } #page-bottomarea-wrapper { width:830px; } #page-footer { font-size: 11px; background: url(../_images/main_bottom_border.gif) 0 0 no-repeat; padding: 0 5px 30px; margin: 0; clear: both; } #page-footer ul { float: right; list-style: none; margin: 22px 15px 20px; padding:0; width:auto; } #page-footer ul li { float: left; margin: 0 10px; font-size:11px; } #page-footer ul li a { color: #333333; text-decoration:none; font-weight: normal; font-size:11px; } #page-footer ul li a:hover { text-decoration:underline; color: #c00; } /*------------------ Box Styles --------------------*/ .box { margin: 0 0 42px 0; width:253px; } .box div { width:253px; } .box .top-light { background:url('../_images/box/box-top.png'); _background:url('../_images/box/box-top.gif') no-repeat; height:8px; } .box .bottom-light { background:url('../_images/box/box-bottom.png') no-repeat; _background:url('../_images/box/box-bottom.gif') no-repeat !important; height:8px; } .box .body-light { background:url('../_images/box/gray.png'); } .box .top-dark { background:url('../_images/box/box-dark-top.png'); _background:url('../_images/box/box-dark-top.gif') no-repeat; height:41px; } .box .bottom-dark { background:url('../_images/box/box-dark-bottom.png'); _background:url('../_images/box/box-dark-bottom.gif') no-repeat; height:41px; } .box .top-green { background:url('../_images/box/box-top_green.png'); _background:url('../_images/box/box-top_green.gif') no-repeat; height:8px; } .box .body-green { background:url('../_images/box/green_bg.png') !important; _background:url('../_images/box/green_bg.gif') !important; } .box h1 { font-size:16px; color:#FFFFFF; padding:15px; margin:0; width:200px !important; } .box p { font-size:12px; color:#333333; padding:0 15px 15px 15px; margin:0; width:auto; max-width:253px; } .body-light ul { padding:10px 0 0 0; list-style-image: none; width:223px } .body-light li { background:url('../_images/icons/arrows_gray.png') 15px 8px no-repeat; padding-left:30px;} @media screen and (-webkit-min-device-pixel-ratio:0) { .body-light li { background:url('../_images/icons/arrows_gray.png') 15px 6px no-repeat; } } .body-light img { margin:15px; } .more-link { list-style: none; list-style-image:none; width: 130px; position:relative; top:-12px; left:5px; _left:10px !important; _top:-342px; _margin-left:43px; } @media all and (min-width: 0px){ .more-link { left:5px !important; } } .more-link li { height: 1px; width: auto; padding:10px 15px; background:none; } .more-link li a { font-size:15px; display: block; text-decoration: none; height: 18px; width: 110px; background: url(../_images/box/box-arrow.gif) right 16px no-repeat; _background: url(../_images/box/box-arrow.gif) right 14px no-repeat; color:#E9E9E9 !important; padding-top:12px; #background-position-y: 16px; } .more-link li a:hover { color:#CC0000; background: url(../_images/box/box-arrow-green-hot.gif) right 16px no-repeat; _background: url(../_images/box/box-arrow-green-hot.gif) right 14px no-repeat; text-decoration:none; #background-position-y: 16px;} .box .gallery { _top:-363px; margin: 0 auto; width:150px; left:0; _margin-left:0px;} .box .gallery li { padding-left:0; padding-right:0; } .box .gallery li a { width:150px; } .learn-more { list-style: none; list-style-image:none; width: 130px; position:relative; top:-22px; #top:5px; right:20px; _top:-17px; } .learn-more li { height: 1px; width: 130px !important; padding:10px 15px; background:none; _position:absolute; } .learn-more li a { font-size:15px; display: block; text-decoration: none; height: 18px; width: 130px; background: url(../_images/box/arrow-light.png) 105px 16px no-repeat; _background: url(../_images/box/arrow-light.gif) 105px 14px no-repeat; color:#333333 !important; padding-top:12px; #background-position-y: 16px; } .learn-more li a:hover { color:#CC0000; background: url(../_images/box/box-arrow-hot.png) 105px 16px no-repeat; _background: url(../_images/box/box-arrow-hot.gif) 105px 14px no-repeat; text-decoration:none; #background-position-y: 16px;} /*=largeIconList --------------------*/ .largeIconList { width: 180px; display: inline-block; *float: left; margin-bottom: 20px; } .largeIconList h1 { padding-top: 100px; width: auto; text-align: center; margin-left:-30px; } .largeIconList.find h1 { background: transparent url(../_images/icons/Search_90x90.png) no-repeat center top; } .largeIconList.connect h1 { background: transparent url(../_images/icons/Group_90x90.png) no-repeat center top; } .largeIconList.communicate h1 { background: transparent url(../_images/icons/Chat_90x90.png) no-repeat center top; } .largeIconList ul { width: auto; list-style-type: disc; list-style-position: inside; } .largeIconList.communicate ul { margin-left: 10px; } .largeIconList li { font-size: 11px; } /*=largeOrderedList --------------------*/ .largeOrderedList { width: 440px; padding-left: 40px; *margin-left: -10px; *margin-top: -10px; } .largeOrderedList li { height: 63px; list-style-position: outside; position: relative; } .largeOrderedList li.one { list-style-image: url(../_images/icons/one.png); } .largeOrderedList li.two { list-style-image: url(../_images/icons/two.png); } .largeOrderedList li.three { list-style-image: url(../_images/icons/three.png); } .largeOrderedList li.four { list-style-image: url(../_images/icons/four.png); } .largeOrderedList li.five { list-style-image: url(../_images/icons/five.png); } .largeOrderedList li span { position: relative; top: -25px; left: 10px; *top: 10px; *left: 15px; } @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .largeOrderedList { margin-left:-10px;} .largeOrderedList li span { top:-5px; left: 15px; } } .largerOL { width: 460px; } .largerOL li { height: 80px; } /*=Contact Ramius --------------------*/ ul#contactramius { list-style: none;width: 179px; height: 50px; position:absolute; right:0; } #contactramius li { position: absolute; height: 50px; cursor: pointer; right:35px; top:35px; } #contactramius li a { display: block; text-decoration: none; height: 50px; text-indent: -9999px; } #contactramius { width:179px; } #contactramius a { width:179px; background:url(../_images/_banners/contactramius.png) 0 0 no-repeat; _background:url(../_images/_banners/contactramius.gif) 0 0 no-repeat; } #contactramius a:hover, .contact_cz a:hover { background-position: 0 -50px !important; } .contact-green a { background:url(../_images/_banners/contactramius.png) 0 0 no-repeat !important; _background:url(../_images/_banners/contactramius.gif) 0 0 no-repeat !important; } .contact-red a { background:url(../_images/_banners/contactramius_red.png) 0 0 no-repeat !important; _background:url(../_images/_banners/contactramius_red.gif) 0 0 no-repeat !important; } .contact-yellow a { background:url(../_images/_banners/contactramius_yellow.png) 0 0 no-repeat !important; _background:url(../_images/_banners/contactramius_yellow.gif) 0 0 no-repeat !important; } .contact-purple a { background:url(../_images/_banners/contactramius_purple.png) 0 0 no-repeat !important; _background:url(../_images/_banners/contactramius_purple.gif) 0 0 no-repeat !important; } .contact-blue a { background:url(../_images/_banners/contactramius_blue.png) 0 0 no-repeat !important; _background:url(../_images/_banners/contactramius_blue.gif) 0 0 no-repeat !important; } .rm-formError{ color: #CC0000; font-weight: bold; font-style: italic; margin: 0 0 10px 0; width:auto; } .right-image { float:right; } .full { width:100% !important; clear: both; } .f-left { float:left !important; } .f-right { float:right !important; } #ramius-clients img { float:left; } #ramius-clients { clear:both; width:100%; padding-top:30px; text-align:center; } #inq_form { width:400px; } #inq_form h3 { padding:0; margin:0 0 2px 0; } #inq_form p { margin: 0 0 5px 0; font-size: 12px; line-height: 21px; width:200px; font-weight:bold; } #inq_form input { margin-bottom:5px; } .required { color:#cc0000 !important; font-size: 11px; font-weight:bold; margin-left:10px !important; } .req { color:#cc0000; margin-left:5px;} #sixent-enterprise-community .body-light { padding-bottom:5px; text-align:center; padding:10px 0; } #sixent-enterprise-community .bottom-light { background:url('../_images/box/box-bottom.png') !important; height:8px; } #sixent-enterprise-community .more-link a { width:170px !important; } #sixent-enterprise-community p { font-size:19px; padding:12px 0; } #communityzero .body-light { text-align:center; padding:10px 0; height:155px !important; } #communityzero .body-light img { margin:5px 0 10px 0; } #communityzero .body-light p { text-align:left; } #support-questions .body-light { padding-bottom:5px; text-align:center; padding:10px 0; height:145px; text-align:left; } #support-questions .bottom-light { background:url('../_images/box/box-bottom.png') !important; height:8px; } #support-questions p{ font-size:19px; padding:5px 0 5px 30px; font-weight:bold; width:100px; } #support-questions .dark-bottom { clear:both; } .rm-screenShotTitle{ padding: 0px; text-align: center; margin: 0px 0px 10px 0px; } .rm-screenShotDesc{ color: #666; font-size: 10px; margin: 15px 0px 10px 15px; height: 30px; text-align: center; } .rm-screenShotLink{ display: block; padding: 5px 0px; border: 1px solid #FFFFFF; } .rm-screenShotLink:hover{ text-decoration: none; border: 1px solid #cccccc; } .rm-screenShots p { width:auto; } .rm-screenShots a { width:250; float:left; } .features, .features li, .features p { width:365px;} .features p { margin:0 0 10px; } .features td { padding:0 0 20px 0; vertical-align:top; } .invisible { display:none; } .regmark { position:relative; top:-3px; font-size:11px; } .enlarge { width:100px; margin:0 auto; text-align:center; background: url(../_images/icons/enlarge.png) left no-repeat; padding-left:8px; margin-top:5px; color:#666666; } .screenshot-sm { float:right; margin-bottom:15px; width:200px; } .screenshot { float:right; margin-bottom:15px; width:325px; } .screenshot:hover, .screenshot-sm:hover { text-decoration:none; } #homepage-banner-container { position:absolute; z-index:0; left:4px; #width:915px; #overflow:hidden; } .home-banner-text,.tabbed-banner-text, .short-banner-text { position:relative; z-index:1001; } .tabbed-banner-text h1 { font-size:30px; color:#ffffff; position:relative; top:20px; _top:-38px; #top:10px; left:41px; line-height:32px; } .tabbed-banner-text p { font-weight:bold; font-size:16px; color:#BFFF7F; position:relative; left:41px; top:11px; _top:-49px; #top:0; width:900px; } .short-banner-text h1 { font-size:30px; color:#ffffff; position:relative; top:20px; left:41px; line-height:32px; } .tm { font-size:15px; font-weight:normal; position:relative; top:-12px; } .sub p { width:375px !important; } /* BENEFITS */ .benefitList { margin-bottom: 20px; } .benefitList li{ background:transparent url(../_images/icons/arrows.png) no-repeat scroll 0 8px; padding-left:15px; } /* FAQS */ .faqList h3 { color: #000; } .faqs h2, .faqs p { width: 600px; } .faqList li { margin-left: 10px; } .callout { float:right; clear:both;} .callout .body-light { padding-bottom:5px; } .callout .bottom-light { background:url('../_images/box/box-bottom.png') !important; _background:url('../_images/box/box-bottom.gif') bottom !important; height:8px; } .framedBox { background-color: #336600; clear: both; color: #000000; float: right; margin-bottom: 42px; width: 253px; } .framedBox .portrait { border: 10px solid #FFF; border-top-color:#F0F1F0; border-left: none; border-right: none; margin: 0 30px; width: auto; } .framedBox.noGradient .portrait { border-top-color:#fff; } .framedBox .portrait p, .framedBox .portrait ul { margin: -5px -25px; padding: 1em; background: #fff url(../_images/icons/gray-bg.jpg) top left repeat-x; color: #000; width: auto; font-size: 12px; } .framedBox.noGradient .portrait p, .framedBox.noGradient .portrait ul { background-image: none; } .framedBox .portrait p { font-style: italic; text-align: center; } .framedBox .portrait p .quote { color: #999999; font-size: 10px; font-style: normal; } .framedBox .portrait ul li { list-style-image: url(../_images/icons/apply.png); _list-style-image: url(../_images/icons/apply.gif); list-style-position: outside; margin-left: 25px; *margin-left: 15px; *padding-left: 10px; *vertical-align: top; } .framedBox .portrait ul .comingSoon { list-style-image: none; font-weight: bold; margin-left: 0; color: #336600; margin: 5px 0; } /*=HOW, WHY, TRY IT PAGES ----------------------*/ .contentLeft { float: left; width: 400px; margin-right: 30px; margin-bottom: 30px; } .contentLeft .warpedImage { _display: none; } #betaProgram .warpedImage { display: inline; } .contentRight { width: 400px; float: left; margin-bottom: 30px; } .contentRight h1 { width: auto; } .galleryWrap { position: relative; left: 9px; top: 8px; } .galleryWrap .grow { position: absolute; background: transparent url(mootools/images/enlarge.png) no-repeat 0 0; width: 27px; height: 27px; top: -14px; left: -14px; z-index: 5; _display: none; } .remoozGallery { float: left; width: auto; } .remoozGallery li { float: left; padding: 4px 4px; margin-right: 5px; border: 1px solid #ebebeb; line-height: 0; } .remoozGallery a { line-height: 0; } .remoozGallery img { width: 86px; } .phoneNumbers { margin-bottom: 25px; } .phoneNumbers h2 { padding: 0; border: none; } .phoneNumbers h2 span { font-size: 12px; color: #000; margin-left: 5px; }