| |
| @CHARSET "UTF-8"; |
| |
| html { |
| height: 100%; /* gives layout 100% height */ |
| overflow: inherit; /* triggers 100% height in Opera 9.5 */ |
| } |
| |
| /* HEADER */ |
| |
| #header-bar { |
| background-color: #31619c; |
| } |
| |
| #header { |
| position: relative; |
| margin: 0 auto; |
| top: 0; |
| left: 0; |
| width: 980px; |
| height: 140px; |
| } |
| |
| #rap-logo, #rap-logo-deco { |
| position: absolute; |
| left: 29px; |
| top: 33px; |
| width: 196px; |
| height: 83px; |
| background: url( "/rap/images/RAP-logo.png" ) no-repeat; |
| } |
| |
| #rap-logo-deco { |
| background-image: none; |
| height: 100%; |
| top: 0px; |
| } |
| |
| #rap-logo-deco.active { |
| background-image: url( /rap/images/nav-selection.png ); |
| background-position: center bottom; |
| background-repeat: no-repeat; |
| } |
| |
| #rap-search-box { |
| position: absolute; |
| bottom: 70px; |
| right: 40px; |
| height: 40px; |
| z-index: 1100; |
| } |
| |
| /* TOP LEVEL NAVIGATION */ |
| |
| #navigation { |
| position: absolute; |
| bottom: 0; |
| right: 37px; |
| width: 660px; |
| height: auto; |
| z-index: 1000; |
| } |
| |
| #navigation > ul { |
| text-align: right; |
| padding: 0; |
| margin: 0; |
| } |
| |
| #navigation > ul > li { |
| position: relative; |
| display: inline-block; |
| list-style-type: none; |
| margin-left: 38px; |
| padding-bottom: 23px; |
| } |
| |
| #navigation > ul > li > a { |
| display: block; |
| font-weight: bold; |
| font-size: 14pt; |
| color: white; |
| border: none; |
| padding: 0; |
| margin: 0; |
| } |
| |
| #navigation > ul > li > a:hover { |
| text-decoration: none; |
| } |
| |
| #navigation > ul > li.active { |
| background-image: url( /rap/images/nav-selection.png ); |
| background-position: center bottom; |
| background-repeat: no-repeat; |
| } |
| |
| /* NAVIGATION BAR */ |
| |
| #nav-bar { |
| background-color: #34332f; |
| } |
| |
| #nav-container { |
| width: 980px; |
| margin: 0 auto; |
| display: block; |
| height: 33px; |
| } |
| |
| div#nav-container ul { |
| display: inline-block; |
| height: 33px; |
| padding-top: 7px; |
| margin: 0; |
| } |
| |
| #nav-container li { |
| display: block; |
| list-style-type: none; |
| padding: 0; |
| margin: 0; |
| float: left; |
| } |
| |
| #nav-container a:hover { |
| text-decoration: none; |
| color: white; |
| } |
| |
| ul#nav { |
| padding-right: 14px; |
| padding-top: 2px; |
| float: right; |
| } |
| |
| ul#nav-home { |
| padding-left: 27px; |
| padding-top: 2px; |
| float: left; |
| } |
| |
| ul#nav li > a, ul#nav-home li > a { |
| color: #BDBDBD; |
| font-size: 14px; |
| font-weight: normal; |
| height: 24px; |
| padding: 9px 20px 10px 10px; |
| } |
| |
| ul#nav li > a.active, ul#nav-home li > a.active { |
| color: white; |
| text-shadow: 0 0 5px white; |
| } |
| |
| ul#links { |
| float: right; |
| } |
| |
| ul#links li { |
| padding: 0 15px 0 0; |
| } |
| |
| /* INFO BOX */ |
| |
| div#info-box { |
| z-index: 1000; |
| position: fixed; |
| overflow: hidden; |
| top: 50%; |
| right: 0; |
| margin-top: -44px; |
| width: 45px; |
| background-color: #e5e5e5; |
| border: 1px solid #bdbdbd; |
| border-right: none; |
| padding: 10px; |
| } |
| |
| div#info-box > div { |
| width: 200px; |
| display: table; |
| } |
| |
| div#info-box a { |
| width: 200px; |
| display: table-cell; |
| vertical-align: middle; |
| } |
| |
| div#info-box img { |
| padding: 0 20px 10px 0; |
| display: table-cell; |
| vertical-align: middle; |
| } |
| |
| /* CONTENT */ |
| |
| body { |
| height: 100%; /* gives layout 100% height */ |
| color: #34332f; |
| width: 100%; |
| background-color: #ffffff; |
| font-family: 'Open Sans', sans-serif; |
| text-align: center; |
| } |
| |
| ul p { |
| padding: 0 0 15px 0; |
| } |
| |
| #novaWrapper { |
| min-height: 100%; /* gives layout 100% height */ |
| width: 978px; /* centered div must be given a width */ |
| margin: 0 auto; /* centers #wrapper */ |
| } |
| |
| #novaContent { |
| position: relative; |
| min-height: 100%; /* gives layout 100% height */ |
| padding-top: 25px; |
| background: white; |
| } |
| |
| li { |
| list-style-image: url( "/rap/images/list-bullet.png" ); |
| list-style-position: outside; |
| margin-left: 10px; |
| padding: 5px 10px 5px 0; |
| } |
| |
| dt { |
| margin-top: 10px; |
| font-weight: bold; |
| } |
| |
| dd { |
| margin-left: 20px; |
| padding: 5px 10px 5px 0; |
| } |
| |
| * html #wrapper { |
| height: 100%; /* IE6 treats height as min-height */ |
| } |
| |
| #clearFooter { |
| clear: both; |
| height: 34px; /* provides space for the #footer */ |
| background: #E0E5E9; |
| } |
| |
| #footer { |
| color: #34332F; |
| width: 978px; /* centered div must be given a width */ |
| border: 1px solid #bdbdbd; |
| background: #e5e5e5; |
| padding: 25px 0 10px 0; |
| margin: 60px 0 0 0; |
| } |
| |
| #footer * { |
| text-decoration: none; |
| font-size: 12px; |
| } |
| |
| #footer img { |
| position: relative; |
| top: 5px; |
| width: 120px; |
| padding-left: 60px; |
| } |
| |
| #footer ul { |
| position: relative; |
| top: 7px; |
| padding-left: 20px; |
| float: left; |
| } |
| |
| #footer ul li { |
| display: inline; |
| padding-right: 15px; |
| } |
| |
| #copyright { |
| width: 200px; |
| padding-right: 20px; |
| clear: none; |
| float: right; |
| } |
| |
| img.framed { |
| border: 1px solid #bdbdbd; |
| box-shadow: 0 0 4px #adadad; |
| margin-top: 15px; |
| margin-bottom: 15px; |
| max-width: 100%; |
| } |
| |
| a { |
| color: #31619c; |
| font-weight: normal; |
| text-decoration: none; |
| font-size: inherit; |
| } |
| |
| a:hover { |
| text-decoration: underline; |
| } |
| |
| div, p, blockquote, pre, code, em, sub, sup, dl, dt, dd, ol, ul, li, |
| fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td { |
| color: #34332F; |
| font-size: 14px; |
| line-height: 18px; |
| } |
| |
| code { |
| word-wrap: break-word; |
| } |
| |
| del { |
| color: #880000; |
| text-decoration: line-through; |
| } |
| |
| ins { |
| color: #005500; |
| font-weight: bold; |
| } |
| |
| em { |
| font-style: italic; |
| } |
| |
| h1, h2, h3, h4 { |
| line-height: normal; |
| font-weight: bold; |
| } |
| |
| h1 { |
| font-size: 28px; |
| font-weight: bold; |
| margin-bottom: 25px; |
| } |
| |
| h2 { |
| font-size: 20px; |
| margin-top: 35px; |
| margin-bottom: 8px; |
| } |
| |
| h2.section { |
| font-size: 24px; |
| margin-bottom: 5px; |
| border-bottom: 1px solid #eaeaea; |
| padding-bottom: 5px; |
| } |
| |
| h2.withTagline { |
| font-size: 21px; |
| margin-bottom: 0px; |
| } |
| |
| h3 { |
| font-size: 16px; |
| margin-top: 20px; |
| margin-bottom: 8px; |
| } |
| |
| h4 { |
| font-size: 14px; |
| font-style: italic; |
| margin-top: 1px; |
| margin-bottom: 2px; |
| } |
| |
| h4.tagline { |
| font-style: normal; |
| margin-top: 0px; |
| margin-bottom: 8px; |
| font-weight: normal; |
| font-size: 13px; |
| } |
| |
| .refs { |
| font-size: 14px; |
| font-weight: bold; |
| } |
| |
| #popup { |
| display: none; |
| width: 650px; |
| position: fixed; |
| top: 50px; |
| left: 50%; |
| margin-left: -325px; |
| padding: 20px; |
| border-radius: 2px; |
| box-shadow: 0 0 8px #333; |
| background: white; |
| opacity: 0.93; |
| z-index: 1000000 |
| } |
| |
| #popup-close { |
| position: absolute; |
| top: 20px; |
| right: 20px; |
| cursor: pointer; |
| } |
| |
| .popup-content { |
| display: none; |
| } |
| |
| .overlay { |
| display: none; |
| opacity: 0; |
| filter: alpha(opacity = 0); |
| position: fixed; |
| z-index: 999999; |
| top: 0; |
| width: 100%; |
| height: 100%; |
| background: #666; |
| background-image: -webkit-radial-gradient(center 300px, circle, #E5E5E5, #111); |
| background-image: -moz-radial-gradient(center 300px, circle, #E5E5E5, #111); |
| background-image: radial-gradient(center 300px, circle, #E5E5E5, #111); |
| } |
| |
| html { |
| background: transparent; |
| } |
| |
| ol > li { |
| list-style-image: none !important; |
| list-style-type: decimal; |
| } |
| |
| strong { |
| font-weight: bold; |
| } |
| |
| td { |
| padding: 3px; |
| } |
| |
| sub { |
| vertical-align: sub; |
| font-size: 80%; |
| } |
| |
| sup { |
| vertical-align: super; |
| font-size: 80% |
| } |
| |
| #content { |
| background: #E0E5E9; |
| } |
| |
| #fullcolumn { |
| padding-top: 20px; |
| width: 978px; |
| } |
| |
| #fullcolumn #midcolumn { |
| margin-left: 20px; |
| width: 640px; |
| } |
| |
| #fullcolumn #rightcolumn { |
| width: 280px; |
| } |
| |
| #midcolumn { |
| background: transparent; |
| float: left; |
| margin-right: 20px; |
| width: 495px; |
| } |
| |
| #midcolumn ul, #midcolumn ol { |
| margin-left: 20px; |
| padding-bottom: 10px; |
| } |
| |
| #rightcolumn { |
| background: transparent; |
| float: left; |
| width: 240px; |
| padding: 34px 27px 20px 26px; |
| } |
| |
| /* SLIDESHOW */ |
| |
| #slideshow { |
| position: relative; |
| padding: 29px; |
| margin-bottom: 10px; |
| } |
| |
| img#eclipse-icon { |
| height: 60px; |
| } |
| |
| div#heading-eclipse-icon { |
| position: absolute; |
| right: 20px; |
| top: 40px; |
| } |
| |
| div#slideshowWindow { |
| position: absolute; |
| right: 20px; |
| top: 40px; |
| } |
| |
| div#heading-eclipse-icon img { |
| height: 43px; |
| width: 180px; |
| } |
| |
| #slideshow > h1 { |
| color: #34332F; |
| font-size: 40px; |
| line-height: normal; |
| } |
| |
| #slideshow > p { |
| color: #34332F; |
| font-size: 23px; |
| line-height: normal; |
| } |
| |
| span.important { |
| color: #e95a35; |
| } |
| |
| /* FEATURES OVERVIEW */ |
| |
| div#features > div.feature > div.feature-description { |
| padding: 0 0 0 70px; |
| } |
| |
| div#features > div.feature { |
| display: block; |
| font-weight: normal; |
| background-color: transparent; |
| list-style: none; |
| float: left; |
| width: 280px; |
| min-height: 200px; |
| padding: 20px 23px; |
| } |
| |
| div#features > div.feature p { |
| margin: 0; |
| padding: 0; |
| margin-bottom: 5px; |
| } |
| |
| div#features > div.feature h2, |
| div#popup h2 { |
| color: #34332F; |
| font-size: 28px; |
| font-weight: normal; |
| padding: 0 0 20px 0; |
| } |
| |
| div#popup h2 { |
| margin-top: 0; |
| } |
| |
| div#features > div.feature > div.icon { |
| float: left; |
| width: 52px; |
| height: 63px; |
| } |
| |
| div#features > div.feature > div.icon { |
| background-image: url( /rap/images/features-sprite.png ); |
| } |
| |
| div#features > div.feature#ui-kit > div.icon { |
| background-position: 0 0; |
| } |
| |
| div#features > div.feature#tooling > div.icon { |
| background-position: -52px 0; |
| } |
| |
| div#features > div.feature#integration > div.icon { |
| background-position: -104px 0; |
| } |
| |
| div#features > div.feature#clustering > div.icon { |
| background-position: -156px 0; |
| } |
| |
| div#features > div.feature#cross-browser > div.icon { |
| background-position: -208px 0; |
| } |
| |
| div#features > div.feature#open-source > div.icon { |
| background-position: -260px 0; |
| } |
| |
| /* BLOGS RSS FEED ON FIRST PAGE */ |
| |
| div#blog-posts-container { |
| border: 1px solid #d9d9d9; |
| margin: 40px 0 0 0; |
| padding: 30px 0 30px 0; |
| background: -moz-radial-gradient(left 45deg, circle farthest-side, white, #e5e5e5); |
| background: -webkit-gradient(radial, center center, 80, center center, 400, from(#fff), to(#e5e5e5)); |
| background: -webkit-radial-gradient(center, #fff, #e5e5e5); /* new webkit syntax */ |
| background: -o-radial-gradient(center, #fff, #e5e5e5); |
| background: -ms-radial-gradient(center, #fff, #e5e5e5); |
| background: radial-gradient(center, circle farthest-side, #fff, #e5e5e5); /* W3C Standard */ |
| } |
| |
| div#blog-posts-container > a.rssIcon { |
| position: relative; |
| float: left; |
| left: 30px; |
| top: -4px; |
| opacity: 0.6; |
| } |
| |
| div#blog-posts-container > a.rssIcon > img { |
| height: 25px; |
| } |
| |
| div#blog-posts-container > a.rssIcon:hover { |
| opacity: 1; |
| } |
| |
| div#blog-posts-container > h2 { |
| font-size: 30px; |
| font-weight: normal; |
| color: #34332F; |
| padding: 0 0 30px 93px; |
| margin-top: 0; |
| padding-top: 0; |
| line-height: inherit; |
| } |
| |
| div#blog-posts > .rssBody > ul > li { |
| list-style: none; |
| width: 210px; |
| float: left; |
| padding: 0 22px 0 93px; |
| margin: 0; |
| } |
| |
| div#blog-posts > .rssBody > ul > li > h3 { |
| font-size: 14px; |
| font-weight: normal; |
| padding: 0 0 10px 0; |
| margin: 0; |
| } |
| |
| div#blog-posts > .rssBody > ul > li > h3 > a { |
| font-weight: normal; |
| } |
| |
| div#blog-posts > .rssBody > ul > li > p { |
| padding: 0; |
| margin: 0; |
| } |
| |
| /* SIDE BOXES */ |
| |
| .sideitem { |
| margin-bottom: 40px; |
| clear: both; |
| } |
| |
| .sideitem h6 { |
| font-size: 14px; |
| padding: 8px 5px 8px 0; |
| border-bottom: 1px solid #31619C; |
| } |
| |
| .sideitemcontent { |
| border-top: none; |
| padding-top: 20px; |
| } |
| |
| .sideitem .modal { |
| background: #FFF url('/eclipse.org-common/themes/Nova/images/thinModalBg.png') repeat-x; |
| padding: 5px; |
| } |
| |
| /* Lists in side boxes */ |
| |
| #novaContent .sideitem ul { |
| margin: 0; |
| padding: 0; |
| } |
| |
| #novaContent .sideitem ul li { |
| list-style-image: none; |
| margin: 0; |
| padding: 0 0 20px 0; |
| } |
| |
| #novaContent .sideitem ul li:last-child { |
| border-bottom: none; |
| padding-bottom: 0; |
| margin-bottom: 0; |
| } |
| |
| /* --- */ |
| |
| small { |
| font-size: 10px; |
| } |
| |
| #maincontent { |
| clear: both; |
| } |
| |
| div.stop { |
| clear: both; |
| } |
| |
| /* BOXES */ |
| |
| div.box { |
| margin-top: 35px; |
| } |
| |
| div.box div.images { |
| float: left; |
| margin: 0 25px 0 0; |
| } |
| |
| div.box img { |
| border: none; |
| margin: 0 0 25px 0; |
| -moz-box-shadow: 4px 4px 5px #cecece; |
| -webkit-box-shadow: 4px 4px 5px #cecece; |
| box-shadow: 4px 4px 5px #cecece; |
| } |
| |
| div.box h3 { |
| margin-top: 0; |
| padding-top: 0; |
| } |
| |
| div.box div { |
| margin: 0 0 0 280px; |
| } |
| |
| /* * */ |
| |
| #midcolumn { |
| width: 627px; |
| padding: 28px 20px 20px 27px; |
| margin-right: 11px; |
| } |
| |
| /* Customize margin for paragraphs */ |
| |
| p, ul, ol, dl, table, pre { |
| margin-top: 5px; |
| margin-bottom: 8px; |
| } |
| |
| /* code blocks */ |
| |
| pre { |
| border: 1px solid #bdbdbd; |
| border-radius: 3px; |
| background-color: #fafafa; |
| padding: 12px 18px; |
| overflow-x: auto; |
| } |
| |
| /* Enable Quotes */ |
| |
| q:before { content: '\201C'; } |
| q:after { content: '\201D'; } |
| q q:before { content: '\2018'; } |
| q q:after { content: '\2019'; } |
| |
| /* Small navigation icons */ |
| |
| span.download-icon { |
| display: inline-block; |
| position: relative; |
| top: 6px; |
| width: 24px; |
| height: 24px; |
| background: url( /rap/images/button-icons-small.png ) 0 0; |
| } |
| |
| /* Expand areas on download page */ |
| |
| div.expand-head { |
| margin: 0; |
| } |
| |
| div.expand-link, |
| div.download-button { |
| display: inline-block; |
| cursor: pointer; |
| background-color: #f5f4e9; |
| border-radius: 5px; |
| -moz-border-radius: 5px; |
| -webkit-border-radius: 5px; |
| padding: 5px; |
| } |
| |
| div.expand-link { |
| padding: 1px 10px 8px 5px; |
| margin-right: 10px; |
| } |
| |
| div.download-button.hover { |
| background-color: #e8e7dd; |
| } |
| |
| div.expand-link.selected { |
| background-color: #e8e7dd; |
| border-radius: 5px 5px 0 0; |
| -moz-border-radius: 5px 5px 0 0; |
| -webkit-border-radius: 5px 5px 0 0; |
| padding-bottom: 11px; |
| } |
| |
| div.expand-body { |
| display: none; |
| border: 2px solid #e8e7dd; |
| padding: 5px; |
| border-radius: 0 0 5px 5px; |
| -moz-border-radius: 0 0 5px 5px; |
| -webkit-border-radius: 0 0 5px 5px; |
| } |
| |
| /* BUILD TERMINAL */ |
| |
| div.terminal { |
| margin-top: 10px; |
| padding: 5px; |
| color: white; |
| background-color: gray; |
| border-radius: 0 0 3px 3px; |
| -moz-border-radius: 0 0 3px 3px; |
| -webkit-border-radius: 0 0 3px 3px; |
| } |
| |
| div.terminal-row { |
| margin: 5px 0; |
| } |
| |
| span.terminal-field { |
| position: relative; |
| display: inline-block; |
| background-color: #222; |
| padding: 2px 4px; |
| width: 98px; |
| margin-left: 4px; |
| border-radius: 2px; |
| -moz-border-radius: 2px; |
| -webkit-border-radius: 2px; |
| } |
| |
| span.terminal-text { |
| position: relative; |
| display: inline-block; |
| background-color: #333333; |
| padding: 0 4px; |
| color: white; |
| width: 90px; |
| text-alignment: center; |
| font: 14px sans-serif; |
| } |
| |
| span.terminal-arrived { |
| color: #88ff88; |
| } |
| |
| span.terminal-landing { |
| color: #f2fa73; |
| } |
| |
| span.terminal-overlay { |
| position: absolute; |
| display: inline-block; |
| border-top: 1px solid #444; |
| z-index: 10; |
| opacity: 0.5; |
| width: 98px; |
| height: 2px; |
| left: 4px; |
| top: 10px; |
| } |
| |
| /* RSS icon in side bar item */ |
| |
| div.sideitem .rssIcon { |
| float: right; |
| margin-right: 8px; |
| margin-top: 2px; |
| } |
| |
| /* Animations */ |
| |
| .attention { |
| animation: yellowfade 2s; |
| -moz-animation: yellowfade 2s; |
| -webkit-animation: yellowfade 2s; |
| } |
| |
| @keyframes yellowfade { |
| from { background-color: transparent;} |
| 10% { background-color: #ff5; } |
| to {background-color: transparent;} |
| } |
| |
| @-moz-keyframes yellowfade { |
| from { background-color: transparent;} |
| 10% { background-color: #ff5; } |
| to {background-color: transparent;} |
| } |
| |
| @-webkit-keyframes yellowfade { |
| from { background-color: transparent;} |
| 10% { background-color: #ff5; } |
| to {background-color: transparent;} |
| } |
| |
| .nav-redirect { |
| padding-right: 14px; |
| background: url(../images/nav-redirect.png) center right no-repeat; |
| } |
| |
| *:hover > .nav-redirect { |
| background: url(../images/nav-redirect-hover.png) center right no-repeat; |
| } |
| |
| /* pre-loading */ |
| |
| body:after { |
| content: url(../images/nav-redirect.png) url(../images/nav-redirect-hover.png); |
| display: none; |
| } |