/********************************************************************************************** CSS on Sails Title: Flashized Author: XHTMLized Date: May 2009 *********************************************************************************************** 1. BASE 1.1 Reset 1.2 Accessibility navigation 1.3 Default styles 1.3 Basic styles 2. LAYOUT 2.1 Header 2.2 Content 2.3 Secondary content ***********************************************************************************************/ /* 1. BASE ----------------------------------------------------------------------------------------------- ===============================================================================================*/ /* 1.1 Reset -----------------------------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1;} ol, ul { list-style: none;} blockquote, q { quotes: none;} blockquote:before, blockquote:after, q:before, q:after { content: '';content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } /* 1.2 Accessibility navigation -----------------------------------------------------------------------------------------------*/ #accessibility-nav { position: absolute; left: -1000em; text-align: left; } /* 1.3 Default styles -----------------------------------------------------------------------------------------------*/ body { margin: 0 0 55px 0; background-color: #d7d7d7; font: 62.5% Arial, Helvetica, sans-serif; text-align: center; padding-top: 62px; } hr { display: none; } strong { font-weight: bold; } em { font-style: italic; } abbr, acronym { border: none; cursor: help; } input, textarea, select { font: 1em Arial, Helvetica, sans-serif; } input:focus { outline: none; } a { color: #f63740; } a:hover, a:active { color: #f63740; text-decoration: none; } img { vertical-align: bottom; } /* 1.4 Basic styles -----------------------------------------------------------------------------------------------*/ .hidden { display: none;} .highlight { background-color: #fff8bc; } .link { padding: 0 16px 0 0; background: url(../images/bull/buy_link_arrow.gif) no-repeat 100% 60%; } .text-left, .img-left { float: left; } .text-right, .img-right { float: right; } /* selection list */ ul.selection-list { overflow: hidden; padding: 0 20px 20px 20px; background: #dfdfdf url(../images/bg/selection_list.gif) repeat-x; } ul.selection-list li { float: left; display: inline; margin: 0 2px 0 0; padding: 10px 0 0 0; } ul.selection-list li.ui-state-active { background: url(../images/bull/selection_list.gif) no-repeat 50% 0; } .ui-tabs-hide { display: none; } /* back to top */ .top { margin: 0 24px 0 0; } .top a { padding: 0 16px 0 0; background: url(../images/ico/top.gif) no-repeat 100% 50%; color: #000; text-decoration: none; float: right; } .top a:hover, .top a:active { text-decoration: underline; } /* flashized dude */ .flashizer { position: absolute; z-index: 998; } /* 2. LAYOUT ----------------------------------------------------------------------------------------------- ===============================================================================================*/ .container { width: 988px; margin: 0 auto; overflow: hidden; text-align: left; font-size: 1.3em; position: relative; } #header { background: #fff url(../images/bg/header.gif) no-repeat 50% 0; } #header .container { padding: 34px 0 16px 0; z-index: 2999; } #branding { background: #fff url(../images/bg/branding.gif) repeat-x;} #main .container { background: url(../images/bg/main.gif) no-repeat; padding: 15px 0 14px 0; position: relative; } #main .container #content { width: 432px; position: relative; float: left; padding: 30px 26px; background-color: #fff; } #main .container #secondary-content { width: 488px; float: right; } /* 2.1 Header -----------------------------------------------------------------------------------------------*/ /* logo */ #header h1, #header h1 span, #header a.logo, #header a.logo span { display: block; overflow: hidden; text-align: center; } #header h1, #header h1 span, #header a.logo, #header a.logo span{ width: 133px; height: 22px; text-indent: -999em; } #header h1, #header a.logo { float: left; position: relative; } #header h1 span, #header a.logo span { position: absolute; top: 0; left: 0; z-index: 10; background-repeat: no-repeat; } #header h1 span, #header a.logo span { background-image: url(../images/logo/flashized.png); cursor: pointer; } /* navigation */ #navigation { position: relative; z-index: 2999; float: right; padding: 9px 0 0 90px; } #navigation ul { width: 446px; height: 13px; float: left; position: relative; } #navigation ul li { float: left; display: inline; } #navigation ul li a { color: #000; text-align: center; line-height: 13px; } #navigation ul li a:hover, #navigation ul li a:active { color: #d7d7d7; } #navigation ul li a, #navigation ul li a span { height: 13px; float: left; position: relative; cursor: pointer; overflow: hidden; text-indent: -999em;} #navigation ul li a span { background: url(../images/nav/flashized.png) no-repeat left top; position: absolute; left: 0; top: 0; } #navigation ul li.nav-why-flashized a, #navigation ul li.nav-why-flashized a span { width: 102px; } #navigation ul li.nav-why-flashized a span { background-position: 0 0; } #navigation ul li.nav-why-flashized a:hover span, #navigation ul li.nav-why-flashized a.current span { background-position: 0 -13px; } #navigation ul li.nav-tools-and-technologies { margin-left: 47px; } #navigation ul li.nav-tools-and-technologies a, #navigation ul li.nav-tools-and-technologies a span { width: 133px; } #navigation ul li.nav-tools-and-technologies a span { background-position: -149px 0; } #navigation ul li.nav-tools-and-technologies a:hover span, #navigation ul li.nav-tools-and-technologies a.current span { background-position: -149px -13px; } #navigation ul li.nav-browse-projects { margin-left: 49px; } #navigation ul li.nav-browse-projects a, #navigation ul li.nav-browse-projects a span { width: 102px; } #navigation ul li.nav-browse-projects a span { background-position: -331px 0; } #navigation ul li.nav-browse-projects a:hover span, #navigation ul li.nav-browse-projects a.current span { background-position: -331px -13px; } #navigation ul li.nav-browse-people { margin-left: 48px; } #navigation ul li.nav-browse-people a, #navigation ul li.nav-browse-people a span { width: 94px; } #navigation ul li.nav-browse-people a span { background-position: -481px 0; } #navigation ul li.nav-browse-people a:hover span, #navigation ul li.nav-browse-people a.current span { background-position: -481px -13px; } #navigation ul li.start-now { position: absolute; right: 0; top: -13px; z-index: 100;} #navigation ul li.start-now a, #navigation ul li.start-now a span { width: 131px; height: 35px; background: url(../images/btn/start_now.gif) } #navigation ul li.start-now a:hover span, #navigation ul li.start-now a.current span { background-position: 0 -35px; } #twitter-feed{ z-index: 999; width: 360px; height: 63px; position: absolute; top: 5px; left: 136px; background: url(../images/bg/twitter_bg.png) no-repeat left top; } #twitter-feed ul{ font-size: 0.866em; margin: 7px 10px 0 63px; color: #007292; line-height: 1.2;} #twitter-feed ul a{ color: #911;} #twitter-feed #follow-button{ display: none;} #twitter-feed:hover #follow-button{position: absolute; bottom: 1px; right: 6px; width: 158px; height: 19px; display: block;background: url(../images/btn/follow.png) no-repeat left top;} #twitter-feed:hover #follow-button span, #follow-button:hover span{position: absolute; top: 0px; left: 0; width: 158px; height: 19px; display: block;background: url(../images/btn/follow.png) no-repeat left top;} #twitter-feed #twitter-timeline{ color: #80CDE3; display: block; text-decoration: none; text-align: right; margin-right: 15px;} /* 2.2 Branding -----------------------------------------------------------------------------------------------*/ #branding .quick-as-a-flash { background: url(../images/bg/x.jpg) no-repeat 50% 0; } #branding .quick-as-a-flash .container { height: 303px; padding: 205px 0 0 0; overflow: visible; position: relative; } #branding .quick-as-a-flash .container .panel { width: 400px; height: 237px; padding: 28px 140px 0 30px; position: absolute; color: #f63740; } #branding .quick-as-a-flash .container .panel h2 { width: 306px; font-size: 68px; font-weight: normal; } #branding .quick-as-a-flash .container .panel p { margin: -10px 0 0 0; font-size: 14px; } #branding .quick-as-a-flash .container #carousel{ position: absolute; left: 0px; top: 3px; width:985; height: 495px; z-index: 3; } /* flash services */ #branding .quick-as-a-flash .container .flash-services { width: 984px; height: 161px; background: #de1717; border-top: 128px solid #f63740; border-bottom: 2px solid #f63740; } #branding .quick-as-a-flash .container .flash-services a { color: #fff; text-decoration: none; } #branding .quick-as-a-flash .container .flash-services a:hover, .flash-services a:active { color: #eee; } #branding .quick-as-a-flash .container .flash-services .scroller { width: 984px; text-align: center; } #branding .quick-as-a-flash .container .flash-services ul { position: relative; z-index: 999; width: 865px; overflow: hidden; margin: 0 auto; padding: 30px 0; } #branding .quick-as-a-flash .container .flash-services ul li { float: left; display: inline; margin: 0 15px; padding: 0 0 18px 0; background-repeat: no-repeat; font-weight: bold; } #branding .quick-as-a-flash .container .flash-services ul li a strong { display: block; padding-top: 10px;} #branding .quick-as-a-flash .container .flashizer { background: url(../images/flashizer.png); width: 796px; height: 496px; right: -74px; bottom: 91px; z-index: 2;} /* 2.3 Content -----------------------------------------------------------------------------------------------*/ #main .panel { width: 985px; background: #dfdfdf url(../images/bg/main_panel.gif) repeat-y; margin: 0 0 12px 0; } #main .panel .inner { width: 985px; padding: 0 0 3px 0; background: url(../images/bg/main_panel_bottom.gif) no-repeat 0 100%; } #main .panel .inner .content { width: 982px; padding: 30px 1px 0 3px; background: url(../images/bg/main_panel_top.jpg) no-repeat; } #content h2 { clear: both; width: 220px; margin: 0 0 0 20px; font-weight: normal; font-size: 16px; color: #000; } #content h2, #content p { position: relative; z-index: 999; margin: 0 0 8px 20px; } #content p.buy-now { margin-bottom: 30px; } #content div.text-left, #content div.text-right { width: 240px; margin-bottom: 30px; } #content div.text-left h2 { width: 220px; } #content div.text-left p.buy-now, #content div.text-right p.buy-now { margin-bottom: 0; } #content div.text-right h2, #content div.text-right p { margin-left: 0; } #content img.img-left { margin: 10px 0 0 0; } #content img.img-right { margin: 10px 10px 0 0; display: inline; } #content .flashizer { right: -60px; top: -60px; background:url(../images/flashizer2.png) no-repeat; width: 333px; height: 379px; } /* featured projects */ #featured-projects { margin: 0 0 14px 0; width: 985px; height: 480px;} /* glow effect overlay */ #glow { position: absolute; left: 350px; top: -150px; background: url(../images/bg/glow.png) no-repeat; width: 475px; height: 729px; z-index: 10; } /* 2.4 Secondary content -----------------------------------------------------------------------------------------------*/ #secondary-content .panel { width: 487px; background: #dfdfdf url(../images/bg/secondary_content_panel.gif) repeat-y; margin: 0 0 10px 0; } #secondary-content .panel .inner { width: 487px; padding: 0 0 2px 0; background: url(../images/bg/secondary_content_panel_bottom.gif) no-repeat 0 100%; } #secondary-content .panel .inner .content { width: 480px; padding: 24px 2px 0 4px; background: url(../images/bg/secondary_content_panel_top.gif) no-repeat; } #secondary-content .panel .inner .content h2, #secondary-content .panel .inner .content p { margin-left: 20px; margin-right: 20px; } #secondary-content .panel .inner .content li h2, #secondary-content .panel .inner .content li p { margin: 0; } /* why flashized */ #why-flashized { margin: 0 0 14px 0; padding: 0; background: #5a5a5a url(../images/bg/why_flashized_gradient.png) repeat-x; border-bottom: 1px solid #9b9b9b; } #why-flashized h2, p, ol { position: relative; z-index: 999; } #why-flashized .highlight { background-color: #8c4f4f; } #why-flashized .stronger { margin: -4px 0 10px 0; color: #d4d4d4; } #why-flashized .stronger, #why-flashized h2 { margin-left: 50px; } #why-flashized ol { width: 488px; padding: 0 0 14px 0; } #why-flashized li { width: 350px; overflow: hidden; margin: 0 0 0 50px; padding: 8px 0 6px 8px; border-bottom: 1px solid #6e6e6e; } #why-flashized li h3 { margin: 0 0 0 22px; } #why-flashized li h3 a { color: #000; text-decoration: none; } #why-flashized li p { display: none; } #why-flashized li span.item-number { font-weight: bold; color: #b1b0b0; width: 26px; float: left; } #why-flashized li.selected { width: 442px; margin: -1px 0 -16px 0; padding: 18px 30px 36px 16px; border-bottom: 0; border-top: 1px solid #6e6e6e; background: #696969 url(../images/bg/why_flashized_bottom_shadow.gif) repeat-x 0 100%;} #why-flashized li.selected h3, #why-flashized li.selected p { margin: 0 0 0 64px; } #why-flashized li.selected p { display: block; } #why-flashized li.selected span.item-number { width: 64px; font-size: 4em; color: #f63740; } /* tools and technologies */ #tools-and-technologies h2 { margin: 0 0 10px 0;} #tools-and-technologies img { position: absolute; left: 0; top: 0; } #tools-and-technologies ul { width: 440px; margin: 0 20px; padding: 0 0 10px 0; } #tools-and-technologies ul li { width: 388px; padding: 0 0 16px 52px; position: relative; background-repeat: no-repeat; } #tools-and-technologies ul li.adobe-flash { background-image: url(../images/ico/adobe_flash.gif); } #tools-and-technologies ul li.adobe-flex { background-image: url(../images/ico/adobe_flex.gif); } #tools-and-technologies ul li.adobe-air { background-image: url(../images/ico/adobe_air.gif); } #tools-and-technologies ul li.actionscript { background-image: url(../images/ico/actionscript.gif);} #tools-and-technologies ul li.flash-to-javascript { background-image:url(../images/ico/flash_to_js_communication.gif)} #tools-and-technologies ul li.oop { background-image: url(../images/ico/oop.gif);} #tools-and-technologies ul li.swfobject { background-image: url(../images/ico/swfobject.gif);} #tools-and-technologies ul li.swfaddress { background-image: url(../images/ico/swfaddress.gif);} /* flash components for sale */ #flash-components-for-sale h2 { margin: 0 0 10px 0; padding-left: 24px; background-image: url(../images/ico/cart.gif); background-repeat: no-repeat; } #flash-components-for-sale a.img-left { margin: 10px 0 0 10px; display: inline; } #flash-components-for-sale div.text-left { width: 290px; padding: 0 0 0 6px; } #flash-components-for-sale div.text-left p { margin: 0 0 16px 0; } #flash-components-for-sale ul.selection-list { clear: both; width: 440px; } #flash-components-for-sale h3 { margin: 0 0 5px 20px; } #flash-components-for-sale ul.features{ margin: 0 0 15px 15px; padding-left: 25px; list-style: circle;} #flash-components-for-sale a.img-left strong{clear: left; display: block; margin-top: 5px; text-align: center;} #flash-components-for-sale a.img-left img{border: 1px solid #ccc;} #flash-components-for-sale ul.selection-list li a{margin-right: 5px;} #flash-components-for-sale ul.selection-list li a img{border: 2px solid #ccc;} #flash-components-for-sale ul.selection-list li.ui-state-active a img{border: 2px solid #c00;} #flashized-process { clear: both;} /* 2.5 Footer -----------------------------------------------------------------------------------------------*/ /* our other sites */ #our-other-sites { margin: 0 0 10px 0; } #our-other-sites ul { width: 988px; overflow: hidden; } #our-other-sites ul li { float: left; display: inline; text-align: center; line-height: 40px; } #our-other-sites ul li a, #our-other-sites ul li a span { width: 324px; height: 90px; float: left; position: relative; cursor: pointer; overflow: hidden; background-repeat: no-repeat; } #our-other-sites ul li a span { position: absolute; left: 0; top: 0; } #our-other-sites ul li#site-xhtmlized a { color: #ff7a00; } #our-other-sites ul li#site-xhtmlized a span { background-image: url(../images/banner/site_xhtmlized.gif);} #our-other-sites ul li#site-mockingboard { margin: 0 8px; } #our-other-sites ul li#site-mockingboard a { color: #0b7fef; } #our-other-sites ul li#site-mockingboard a span { background-image: url(../images/banner/site_mockingboard.gif);} #our-other-sites ul li#site-3dized a { color: #7db623; } #our-other-sites ul li#site-3dized a span { background-image: url(../images/banner/site_3dized.gif);} /* company information */ #company-information { width: 987px; padding: 30px 0 0 0; background: #e5e5e5 url(../images/bg/company_information.gif) no-repeat;overflow: hidden; border-bottom: 2px solid #bbb; } #company-information h2 { margin: 0 0 5px 63px; font-size: 12px; color: #7b7b7b; } #company-information #offices { width: 615px; padding: 0 0px 34px 49px; overflow: hidden; float: left; background: none;} #company-information #offices li { float: left; display: inline; padding-left: 14px; background: url(../images/bull/company_information_arrow.gif) no-repeat 0 4px; } #company-information #offices li.office-aus { width: 160px; } #company-information #offices li.office-us { width: 136px; } #company-information #offices li.office-eu { width: 132px; } #company-information #offices li.office-asia { width: 130px; } #company-information address { width: 256px; float: left; margin: 0 0 0 25px; padding-left: 14px; font-style: normal; background: url(../images/bull/company_information_arrow.gif) no-repeat 0 4px; } #company-information address, #company-information address a { color: #8f8f8f; } #company-information ul.legal{ width: 256px; float: left; margin: 0 0 0 39px;display: inline; overflow: hidden;} #company-information ul.legal li{float: left; border-left: 1px solid #aaa; margin-left: -2px; padding-right: 7px; display: inline;} #company-information ul.legal a { color: #8f8f8f; margin-left: 6px; float: left;display: inline;}