diff --git a/demos/demos.css b/demos/demos.css index 2e38e031d..556c4bef8 100644 --- a/demos/demos.css +++ b/demos/demos.css @@ -27,3 +27,1093 @@ body { font-size: 62.5%; } background: #eaeaea; border-bottom: 1px solid #bbb; } + + + +/* Site + -------------------------------- */ + +body { + margin: 0; + padding: 0 0 20px; + min-height: 100%; + /* font-family: "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif"; */ + font-family: "Arial", "Helvetica", "Verdana", "sans-serif"; + font-size: 10px; +} + +#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: bold 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: 20px; + line-height: 20px; + margin-left: 10px; + 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 10px 0px 10px; + background: url('/images/icon_liferay.gif'); + width: 98px; + height: 22px; + border: 0; +} +#footer .filamentgroup { +background: url('/images/icon_filamentgroup.gif'); +width: 180px; +height: 28px; +border: 0; +margin: 3px 22px 0px 3px; +} + +#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; +} + + + +/* Specific code from former individual files */ + +.jquery-safari-checkbox {display: inline;} +.jquery-safari-checkbox-box {display: inline; font-size: 16px; line-height: 16px; cursor: pointer; cursor: hand;} +.jquery-safari-checkbox .mark {display: inline;} + +.jquery-safari-checkbox img {vertical-align: middle; width: 16px; height: 16px;} +.jquery-safari-checkbox img{background: transparent url(/images/safari-checkbox.png) no-repeat;} + +.jquery-safari-checkbox img{ + background-position: 0px 0px; +} +.jquery-safari-checkbox-hover img{ + background-position: -16px 0px; +} +.jquery-safari-checkbox-checked .jquery-safari-checkbox img{ + background-position: 0px -16px; +} +.jquery-safari-checkbox-checked .jquery-safari-checkbox-hover img { + background-position: -16px -16px; +} + +.jquery-safari-checkbox-disabled img{ + background-position: 0px -32px; +} +.jquery-safari-checkbox-checked .jquery-safari-checkbox-disabled img{ + background-position: 0px -48px; +} + + +.jquery-checkbox-box {display: inline; font-size: 20px; line-height: 20px; cursor: pointer; cursor: hand;} +.jquery-checkbox {display: inline;} +.jquery-checkbox .mark {display: inline;} + +.jquery-checkbox img {vertical-align: middle; width: 60px; height: 20px;} +.jquery-checkbox img{background: transparent url(/images/checkbox.png) no-repeat;} + +.jquery-checkbox img{ + background-position: 0px 0px; +} +.jquery-checkbox-hover img{ + background-position: 0px 0px; +} +.jquery-checkbox-checked .jquery-checkbox img{ + background-position: 0px -40px; +} +.jquery-checkbox-checked .jquery-checkbox-hover img { + background-position: 0px -40px; +} + +.jquery-checkbox-disabled img{ + background-position: 0px -80px; +} +.jquery-checkbox-checked .jquery-checkbox-disabled img{ + background-position: 0px -100px; +} + + +div.selectbox-wrapper { + position:absolute; + width:158px; + background-color: #fff; + border:1px solid #6c6c6c; + margin:0px; + margin-top: -1px; + padding:0px; + font-size:0.8em; + text-align:left; + max-height:200px; + overflow:auto; +} +div.selectbox-wrapper ul { + list-style-type:none; + margin:0px; + padding:0px; +} +div.selectbox-wrapper ul li.selected { + /*background-color: #D2D2D2;*/ +} +div.selectbox-wrapper ul li.current { + background-color: #CFCFCF; +} +div.selectbox-wrapper ul li { + list-style-type:none; + display:block; + margin:0; + padding:2px; + cursor:pointer; +} + +.selectbox /* look&fell of select box*/ +{ + padding: 4px 0 0 4px; + _padding: 0 0 0 4px; + font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; + font-size:12px; + width : 150px; + display : block; + text-align:left; + background: url('/images/select-bg.png') right no-repeat; + height:22px; + cursor: pointer; + border:0px solid #6c6c6c; + color:#CECECE; +} + +/* ie7 */ +html>body .selectbox { + *padding: 0 0 0 4px; +} + +/* opera9, webkit */ +@media all and (min-width:0px) { + head~body .selectbox { padding: 0 0 0 3px; } +} + +input.selectbox { + line-height: 21px; + vertical-align: middle !important; +} diff --git a/demos/index.html b/demos/index.html index ee0c629ee..3fd32b610 100644 --- a/demos/index.html +++ b/demos/index.html @@ -72,7 +72,7 @@ if(isset($_GET['load'])) { //Preload the demo page here - echo "

".$_GET['load']."

"; + echo '

'.$_GET['load'].'

'; } else {