diff options
Diffstat (limited to 'demos/functional/css/base.css')
-rw-r--r-- | demos/functional/css/base.css | 961 |
1 files changed, 961 insertions, 0 deletions
diff --git a/demos/functional/css/base.css b/demos/functional/css/base.css new file mode 100644 index 000000000..3a9ca5931 --- /dev/null +++ b/demos/functional/css/base.css @@ -0,0 +1,961 @@ +/* Site + -------------------------------- */ + +html { + overflow-y: scroll; + background: #5f5f5f url('../images/html_bg.png') repeat-x scroll; +} + +body { + margin: 0; + padding: 0 0 20px; + background: transparent url('../images/body_bg.jpg') no-repeat center top; + min-height: 100%; + /* font-family: "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif"; */ + font-family: "Arial", "Helvetica", "Verdana", "sans-serif"; +} + +#wrapper { + margin: 0 auto; + width: 956px; + position: relative; + /* + background: url('../images/body_footer_bg.jpg') no-repeat center bottom; + padding-bottom: 365px; + */ +} + +#banner { + height: 125px; +} + +#content .bg { + opacity: 0; + -moz-opacity: 0; + filter: alpha(opacity=0); +} + +table.layout-grid a.disabled, table.layout-grid a.disabled:hover { + color: #aaa; + cursor: default; + text-decoration: line-through; +} + +div.notice { + background: #FFF1AF; + padding: 3px; + margin-bottom: 5px; + font-size: 12px; + border: 1px solid #EFD500; +} + + +/* Logo + -------------------------------- */ + +h1.logo { + position: absolute; + top: 55px; + left: 28px; + margin: 0; +} + +h1.logo, +h1.logo a { + width: 235px; + height: 55px; +} + +h1.logo a { + display: block; + background: url('../images/logo.gif') no-repeat; +} + +h1.logo a span { + display: none; +} + + +/* Dock + -------------------------------- */ + +#dock { + height: 25px; + float: left; + position: absolute; + top: 0; + right: 2px; +} + +#dock .left { + float: left; + width: 3px; + height: 25px; + background: url('../images/dock.png') no-repeat left top; +} + +#dock .right { + float: left; + width: 3px; + height: 25px; + background: url('../images/dock.png') no-repeat right top; +} + +#dock ul, +#dock ul li { + float: left; + list-style-type: none; + margin: 0; + padding: 0; +} + +#dock ul { + padding: 0 6px; + height: 25px; + background-color: #000; +} + +#dock ul li { + padding: 0 6px; + position: relative; +} + +#dock ul li a { + float: left; + display: block; + padding: 0 5px; + color: #ccc; + text-decoration: none; + font-size: 12px; + line-height: 22px; +} + +#dock ul li a:hover, +#dock ul li.selected a { + color: #fff; + border-bottom: 2px solid #ff9c08; +} + +#dock ul li.selected a { + font-weight: bold; +} + + +/* Navigation + -------------------------------- */ + +#navigation { + height: 41px; + float: left; + position: absolute; + top: 62px; + right: 0px; +} + +#navigation .left { + float: left; + width: 5px; + height: 41px; + /* background: url('../images/navigation.png') no-repeat left top; */ + background: url('../images/navigation_l.png') no-repeat left top; +} + +#ie6 #navigation .left { + background: transparent none; + filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/navigation_l.png', sizingMethod='scale'); + zoom: 1; +} + +#navigation .right { + float: left; + width: 3px; + height: 41px; + background: url('../images/navigation.png') no-repeat right top; +} + +#navigation ul, +#navigation ul li { + float: left; + list-style-type: none; + margin: 0; + padding: 0; + font-size: 13px; + line-height: 38px; +} + +#navigation ul { + height: 41px; + background: url('../images/navigation.png') repeat-x 0 -41px; +} + +#navigation ul li a { + float: left; + display: block; + height: 41px; + padding: 0 18px; + color: #ccc; + text-decoration: none; + background: url('../images/navigation_s.png') no-repeat right top; +} + +#navigation ul li.selected a { + color: #fff; +} + +#navigation ul li.last a{ + background-image: none; +} + +#navigation ul li a:hover { + color: #fff; +} + + +/* Content + -------------------------------- */ + +#content-wrapper { + background: #FFF url('../images/content_bg.png') repeat-y 0 0; +} + +#content { + background: url('../images/content_body_bg.png') no-repeat 0 13px; + zoom: 1; +} + +.content-top { + font-size: 1px; + height: 13px; + background: url('../images/content_top_bg.png'); +} + +.content { + padding: 0 3px 0 3px; + overflow: hidden; +} + +#content .content { + min-height: 380px; + background: url('../images/dot.png') repeat-y 203px 0; +} + +#home #content .content, +#download #content .content, +#demos #content .content { + background: none; +} + +#ie6 #content .content { + height: 380px; + overflow-y: visible; +} + +/* Layout */ + +.content-head { + height: 74px; + border-bottom: 1px solid #ccc; + background-color: #fff; +} + +.content-head h2 { + float: left; + margin: 0; + padding: 20px 0 20px 24px; + color: #ff9c08; + font: normal 29px/30px "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif"; + letter-spacing: .5px; +} + +.content-head h2 span { + padding-right: 16px; + border-right: 1px solid #ccc; +} + +.content-head p { + margin: 0; + padding: 28px 0 0 12px; + float: left; + font: normal 15px "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif"; + letter-spacing: .5px; +} + + +/* Layout + -------------------------------- */ + +.themes { + background: url('../images/themes_bg.png') repeat-x scroll 0 -1px; +} + + +/* Layout + -------------------------------- */ + +.layout-grid { + width: 100%; +} + +.layout-grid td { + vertical-align: top; +} + +.layout-grid td.home { + background: url('../images/home_bg.jpg') no-repeat scroll right top; + height: 412px; + padding: 0 600px 0 24px; +} + +.layout-grid td.left-nav { + width: 200px; +} + +.layout-grid td.normal { + border-left: 1px solid #ccc; + padding: 20px 24px; + font-family: "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif"; +} + +.layout-grid td.demos { + background: url('../images/demos_bg.jpg') no-repeat; + height: 337px; + overflow: hidden; +} + +.layout-grid td.download { + background: url('../images/demos_bg.jpg') no-repeat; + height: 337px; +} + + +/* Home + -------------------------------- */ + +.home h3 { + margin: 0; + padding: 17px 0 11px 0; + color: #ff9c08; + font: normal 30px "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif"; + letter-spacing: .5px; +} + +.home p.large { + padding-bottom: 15px; + color: #000; + font: bold 13px/19px "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif"; + letter-spacing: .2px; + line-height: 16px; +} + +.home p { + margin: 0; + padding-bottom: 14px; + color: #333; + font: normal 11px/14px 'Trebuchet MS', 'Arial', 'Helvetica', sans-serif; +} + +.teaserbox { + position: absolute; + top: 265px; + left: 452px; + width: 450px; +} + +.teaserbox ul { + list-style-type: square; +} + +.teaserbox p { + margin: 5px; + padding: 0px; +} + +.teaserbox h4 { + margin-bottom: 0px; + position: relative; + left: 1px; + top: 1px; + color: #fff; +} + +.teaserbox h4 span { + position: absolute; + top: -1px; + left: -1px; + color: #000; +} + + +/* Side Menu + -------------------------------- */ + +.section { + padding: 24px 23px 8px 22px; + border-bottom: 1px dashed #ccc; +} + + + +ul.side-menu, +ul.side-menu li, +p.side-menu-title { + list-style-type: none; + margin: 0; + padding: 0; + letter-spacing: 0.75pt; +} + +ul.side-menu li a { + font: normal 11px 'Arial', 'Helvetica', sans-serif; + text-decoration: none; + color: #000; +} + +ul.side-menu li a:hover { + color: #e87b10; +} + +p.side-menu-title { + font: bold 15px 'Arial', 'Helvetica', sans-serif; + color: #e87b10; +} + +ul.side-menu { + padding: 5px 2px 0; +} + + +/* Normal + -------------------------------- */ + +.normal h3, +.normal h4 { + margin: 0; + font-weight: normal; +} + +.normal h3 { + padding: 0 0 9px; +} + +.normal h4 { + padding-bottom: 21px; + border-bottom: 1px dashed #999; + font-size: 12px; + font-weight: bold; +} + +.normal .pull-quote { + padding: 6px 0; + line-height: 20px; + text-transform: uppercase; + font-size: 12px; +} + +.normal p { + font-size: 12px; +} + + +/* Download + -------------------------------- */ + +td.download { + /*height: 650px !important;*/ +} + +.download .click-to-download { + position: relative; + margin: 61px 3px 0; + padding: 0 19px; + background: url('../images/download-top.gif') no-repeat left top; + width: 270px; + height: 226px; + float: left; + font-family: "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif"; +} + +.download .click-to-download .bg-footer, +.download .click-to-download .bg { + position: absolute; + bottom: 0; + left: 0; + width: 308px; + height: 102px; + background: url('../images/download-bottom.png') no-repeat left top; +} + +.download .click-to-download .bg { + background-position: left bottom; +} + +.download .click-to-download h3 { + margin: 0; + padding: 14px 0 10px; + font-weight: normal; + font-size: 21px; +} + +.download .click-to-download h3 span { + font-size: 10px; +} + +.download .click-to-download p { + margin: 0; + padding: 12px 0 0; + font-size: 12px; +} + +.download .click-to-download a.download { + display: block; + position: absolute; + left: 65px; + top: 136px; + height: 38px !important; + width: 240px; + font-size: 16px; + font-weight: bold; +} + +.download .click-to-download a.download:link { + color: #333; + text-decoration: none; +} + +.download .click-to-download a.download:visited { + color: #333; + text-decoration: none; +} + +.download .builder { + position: absolute; + top: 475px; + right: 16px; + width: 612px; + font-family: "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif"; + font-size: 12px; + opacity: 0; + filter: alpha(opacity=0); +} + +.download .builder h3 { + margin: 0; + padding: 5px 10px 10px; + font-weight: normal; + font-size: 21px; +} + +.download .builder p { + margin: 0; + padding: 0 0 0 12px; + font-size: 12px; +} + +.download .builder .top { + height: 8px; + background-image: url('../images/builder_top.png'); +} + +.download .builder .bottom { + height: 8px; + background-image: url('../images/builder_bottom.png'); +} + +.download .builder .content { + background-image: url('../images/builder_bg.png'); +} + +.download .p { + padding: 5px 10px 10px; +} + +.components-list { + font-size: 12px; +} + +.components-list table { + width: 100%; +} + +.components-list th, +.components-list td { + text-align: left; + vertical-align: middle !important; + padding: 3px; +} + +.components-list th { + line-height: 22px; + padding: 0 0 4px 2px; + cursor: default; +} + +.components-list label { + padding-left: 5px; +} + +.list-section { + border-bottom: 1px dashed #bbb; + background: #EAEAEA; + padding: 10px 10px 10px 10px; + width: 715px; + line-height: 18px; +} + +.list-padding { + padding: 5px; + line-height: 18px; +} + +.list-component { + background-color: #F4F4F4; +} + +.list-component-selected { + font-weight: bold; +} + +.text-bg-up, +.text-bg-down { + background:#FFFFFF url(../images/text-bg-up.gif) repeat-x scroll 0pt; + background-position:0px 0px; +} + +.text-bg-down { background:#FFFFFF url(../images/text-bg-down.gif) repeat-x scroll 0pt !important; } + +.ui-transparent { + opacity:0; + filter:Alpha(Opacity=0); +} +.text-align-right { + text-align: right !important; +} +.text-align-left { + text-align: left !important; +} +.text-align-center { + text-align: center !important; +} +.label-files { + background: url(../images/group.png) no-repeat; + padding-left: 19px; + line-height: 20px; + cursor: pointer; +} + +.download #total-size { + width: 160px; + margin-left: 90px; + text-align: right; +} + +.big { + font-size: 13px; + font-weight: bold; +} + +.title-big { + font-size: 14px; + font-weight: bold; + letter-spacing: .3px; +} + + +/* Launch Pad + -------------------------------- */ + +#launch-pad { + height: 127px; + overflow: hidden; + background: url('../images/launch-pad_bg.png') repeat-y center top; + padding: 11px 0px 11px 16px; +} + +#launch-pad .launch-pad-button { + float: left; + width: 255px; + height: 106px; + background: url('../images/launch-pad_button.png') no-repeat; + padding: 21px 22px 0 23px; + margin: 0 6px; + cursor: pointer; + cursor: hand; + position: relative; +} + +#ie6 #launch-pad .launch-pad-button { + height: 106px; +} + +#launch-pad .launch-pad-button .bg { + position: absolute; + top: 0; + left: 0; + width: 310px; + height: 127px; + background: url('../images/launch-pad_button.png') no-repeat left bottom; +} + +#launch-pad .launch-pad-button h3, +#launch-pad .launch-pad-button p { + position: relative; +} + +#launch-pad .launch-pad-button.left { + margin-left: 0; +} + +#launch-pad .launch-pad-button.right { + margin-right: 0; +} + +#launch-pad .launch-pad-button h3 { + margin: 0; + padding: 0 0 4px; + color: #ff9c08; + font: normal 18px 'Arial', 'Helvetica', sans-serif; + letter-spacing: .8px +} + +#launch-pad .launch-pad-button h3 a, +#launch-pad .launch-pad-button h3 a:hover { + color: #ff9c08; + text-decoration: none; +} + +#launch-pad .launch-pad-button p { + margin: 0; + padding: 0 2px; + color: #cbcbcb; + font: normal 11px/15px 'Arial', 'Helvetica', sans-serif; + letter-spacing: .2px; +} + + +/* Footer + -------------------------------- */ + +#footer { + height: 45px; + padding: 10px 0; + position: relative; +} + +#footer .inner { + position: relative; + z-index: 2; +} + +#ie6 #footer .inner { + zoom: 1; +} + +#footer .bg { + background: url('../images/footer_bg.png') no-repeat left top; + width: 100%; + height: 65px; + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#ie6 #footer .bg { + background: transparent none; + filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/footer_bg.png', sizingMethod='scale'); + zoom: 1; +} + +#footer p { + margin: 0; + padding: 0; + color: #5e5e5e; + font: normal 9px 'Arial', 'Helvetica', sans-serif; + text-transform: uppercase; +} + +#footer p a { + color: #bbb; +} + +#footer span.first { + display: block; + float: left; + padding: 6px 0 0 16px; +} + +#footer .block { + display: block; + float: left; +} + +#footer .block span, +#footer span.empty { + display: none; +} + +#footer .liferay { + margin: 3px 22px 0px 3px; + background: url('../images/icon_liferay.gif'); + width: 98px; + height: 22px; + border: 0; +} + +#footer .adobe { + margin: 2px 0 0 0; + background: url('../images/icon_adobe.png'); + width: 28px; + height: 28px; +} + +/* Demoflow + -------------------------------- */ + +div.demoflow-button-left { + position: absolute; + left: -3px; + top: 371px; + background: url('../images/demos_arrows.png') no-repeat left top; + width: 52px; + height: 45px; + cursor: pointer; cursor: hand; + z-index: 999; +} + +div.demoflow-button-left .bg { + background: url('../images/demos_arrows.png') no-repeat left bottom; + width: 52px; + height: 45px; + position: absolute; + top: 0; + left: 0; +} + +div.demoflow-button-right { + position: absolute; + right: -4px; + top: 371px; + background: url('../images/demos_arrows.png') no-repeat right top; + width: 52px; + height: 45px; + cursor: pointer; cursor: hand; + z-index: 999; +} + +div.demoflow-button-right .bg { + position: absolute; + left: 0; + top: 0; + background: url('../images/demos_arrows.png') no-repeat right bottom; + width: 52px; + height: 45px; +} + +.demoflow { + position: relative; + top: 22px; + left: 0; + width: 950px; + height: 337px; +} + +.demoflow div { + float: left; + height: 100px; + width: 75px; + cursor: pointer; cursor: hand; +} + +.ie .demoflow div { + zoom: 1; +} + +.demoflow div { + border: 1px solid #666; +} + + +.demoflow div:hover { + border: 1px solid #666; + /*opacity: 1 !important;*/ +} + +.demoflow div img { + height: 100%; + width: 100%; +} + +.demoflow div.shadow { + height: 100%; + width: 100%; + position: absolute; + top: 0px; + left: 0px; + background-color: black; +} + +.ie .demoflow div.shadow { + display: none; +} + +/* Functional Demos */ + +#links { + float:left; + width:155px; + font-size: 13px; +} + +#functional ul { + list-style: none; + padding: 0; + margin: 0; +} + +#functional #links ul { + margin-top:10px; + line-height:1.2em; +} + +#functional #links ul li a{ + border-bottom: 1px solid #F4F4F4; + display:block; + padding: 3px 3px 3px 12px; + font-size: 95%; + text-decoration: none; + color: #000; + height: 15px; +} + +#functional #links ul li a:hover, +#functional #links ul li a:focus { + background: #EAEAEA; + border-color: #BBBBBB; +} + +/* About */ + +div.about ul { + list-style-type: square; + margin-bottom: 50px; +} + +div.about ul li h5 { + font-size: 16px; + margin-bottom: 10px; +} + +div.about ul li a:link, div.about ul li a:visited { + text-decoration: none; + color: #666; +} + +div.about ul li a:hover { + color: #000; +} + +div.about ul li p { + padding-right: 40px; + padding-left: 20px; +}
\ No newline at end of file |