/* Global Styles */ body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; text-align: left; color: #3d4a4c; background-color: #fff; /* color: #263c3f;*/ font-size: .8em; } a { color: #3a7de1; text-decoration: underline; } a:hover { text-decoration: none; } a:visited { color: #536a8b; } a img { border: none; } h1 { color: #397ce1; font-size: large; text-align: left; margin: 0 0 0 0; } h2 { color: #397ce1; font-size: medium; font-weight: normal; text-align: left; margin: 0 0 0 0; } p { padding: 0; margin: .5em 0 .5em 0; } .content p { text-align: justify; } hr { height: 1px; margin: 15px 0 15px 0; border: 0; background-color: #cbcbcb; color: #cbcbcb; } ul { padding: 0; margin: .85em 0 .85em 0; } ul li { position: relative; text-align: left; list-style: none; background: url(http://imgfarm.fotoflexer.com/web/bullet.gif) no-repeat 0 3px; padding: 0 0 3px 24px; margin-left: 14px; } p.small { color: #555; font-size: x-small; text-align: center; } p.code { padding: 15px; margin: 0 20px; border: 1px solid #ccc; background-color: #efefef; font-family: Courier; } #lang { margin-bottom: 1.5em; } #lang a { font-weight: normal; } /* Layout */ .wrapper { width: 760px; margin: 0 auto; padding: 10px; } #home .wrapper { width: 780px; margin: 0 auto; padding: 5px 0 0 0; position: relative; background-color: #fff; } .header { width: 780px; height: 32px; background: url(http://imgfarm.fotoflexer.com/web/header_bar.gif) no-repeat top left; padding: 0; margin: 10px auto 0 auto; text-align: left; position: relative; } .header h1 { width: 155px; height: 22px; position: relative; top: 3px; left: 5px; margin: 0; padding: 0; } .header h1 a { width: 100%; height: 0; display: block; overflow: hidden; padding-top: 24px; } /* Homepage */ #home #left_col { width: 494px; height: 343px; float: left; background: url(http://imgfarm.fotoflexer.com/web/col_left.jpg) no-repeat 0 0; } #home #right_col { width: 276px; height: 343px; position: relative; background: url(http://fotos.fotoflexer.com/300c74002e7a82e254a811ed1e0391d9.jpg) no-repeat 0 0; } #tagline { width: 365px; height: 0; padding-top: 34px; overflow: hidden; background: url(http://imgfarm.fotoflexer.com/web/tagline_new.gif) no-repeat 0 0; position: absolute; top: 9px; left: 11px; } a#demo_button { display: block; width: 104px; height: 0; padding-top: 19px; overflow: hidden; background: url(http://imgfarm.fotoflexer.com/web/demo_button_new.gif) no-repeat 0 0; position: absolute; top: 34px; left: 355px; } a#demo_button:hover { background-position: 0 -19px; } /* Homepage Integration Buttons */ #button_box { position: absolute; top: 226px; left: 20px; width: 236px; } #button_box a { display: block; width: 115px; height: 0; overflow: hidden; padding-top: 34px; margin-bottom: 4px; float: left; clear: left; } #button_box a:hover { background-position: 0 -34px; } a#photobucket_button { background: url(http://imgfarm.fotoflexer.com/web/buttons/photobucket_button.gif) no-repeat 0 0; margin-right: 6px; } a#picasa_button { background: url(http://imgfarm.fotoflexer.com/web/buttons/picasa_button.gif) no-repeat 0 0; margin-right: 6px; } a#facebook_button { background: url(http://imgfarm.fotoflexer.com/web/buttons/facebook_button.gif) no-repeat 0 0; margin-right: 6px; } a#myspace_button { background: url(http://imgfarm.fotoflexer.com/web/buttons/myspace_button.gif) no-repeat 0 0; float: none; clear: none; } a#flickr_button { background: url(http://imgfarm.fotoflexer.com/web/buttons/flickr_button.gif) no-repeat 0 0; float: none; clear: none; } a#moreplaces_button { background: url(http://imgfarm.fotoflexer.com/web/buttons/moreplaces_button.gif) no-repeat 0 0; float: none; clear: none; } /* Homepage Features Box */ #features { margin: 15px 0 0 15px; } #features_box { width: 764px; padding: 25px 0 0 16px; height: 237px; background: url(http://imgfarm.fotoflexer.com/web/features_panel.jpg) no-repeat 0 0; } .features_button { display: block; width: 170px; height: 0; padding-top: 105px; overflow: hidden; float: left; margin: 0 24px 20px 0; } #doodling_button, #advanced_button { margin-right: 0; } #distortions_button, #retouch_button, #layers_button, #advanced_button { margin-bottom: 0; } .left_col { width: 345px; padding: 0; margin: 0; float: left; text-align: center; } .right_col { padding: 0; margin: 0 0 0 0; text-align: left; } body#startPage .left_col { width: 400px; text-align: left; } body#startPage .right_col { margin-left: 406px; width: 288px; } body#tutorials .left_col { width: 238px; } body#tutorials .right_col { margin-left: 248px; } .top_curve { width: 720px; height: 5px; background: url(http://imgfarm.fotoflexer.com/web/curve_top.gif) no-repeat bottom left; padding: 0; margin: 5px auto 0 auto; } .bottom_curve { width: 720px; height: 5px; background: url(http://imgfarm.fotoflexer.com/web/curve_bottom.gif) no-repeat top left; padding: 0; margin: 0 auto 0 auto; } .clear { clear: both; } .mini_columns { position: relative; margin-top: 1em; margin-bottom: 0; } .mini_col { width: 220px; float: left; padding: 0 9px; } #mini_col_1 { padding-left: 0; border-left: 0; } #mini_col_2 { border-left: 0; } #mini_col_3 { padding-right: 0; border-right: 0; border-left: 0; } .more { position: absolute; bottom: 0; margin-top: 0; width: 219px; text-align: right; } .start_columns { overflow: hidden; padding-top: 1em; } .start_col { width: 190px; float: left; padding: 0 9px 10000px 9px; margin-bottom: -10000px; border-right: 1px #cbcbcb solid; height: 100%; } #start_col_1, #start_col_3 { padding-left: 0; } #start_col_2, #start_col_4 { padding-right: 0; border-right: 0; } /* Inset Box */ .insetBox { width: 288px; background: url(http://imgfarm.fotoflexer.com/web/insetBox/insetBox_bg.gif) repeat-y top left; } .insetBox .inner { background: url(http://imgfarm.fotoflexer.com/web/insetBox/insetBox_top.gif) no-repeat top left; padding: 10px; } .insetBox .bottomBox { background: url(http://imgfarm.fotoflexer.com/web/insetBox/insetBox_bottom.gif) no-repeat bottom left; } /* top navigation */ ul.nav { width: 177px; height: 19px; margin: 0; padding: 0; position: absolute; top: 6px; right: 10px; } ul.nav li { float: right; height: 19px; width: 54px; display: block; padding: 0; margin: 0 5px 0 0; list-style: none; display: block; } ul.nav li a { width: 100%; height: 0; padding-top: 19px; overflow: hidden; display: block; } ul.nav li#nav_login a { background: url(http://imgfarm.fotoflexer.com/web/login_button2.gif) no-repeat 0 0; } ul.nav li#nav_login a:hover { background-position: 0px -19px; } ul.nav li#nav_demos a { background: url(http://imgfarm.fotoflexer.com/web/demo_button.gif) no-repeat 0 0; } ul.nav li#nav_demos a:hover { background-position: 0 -19px; } ul.nav li#nav_home a { background: url(http://imgfarm.fotoflexer.com/web/home_button.gif) no-repeat 0 0; } ul.nav li#nav_home a:hover { background-position: 0 -19px; } #free_sticker { position: absolute; display: block; width: 100px; height: 100px; top: 100px; right: -30px; z-index: 99; } /* Typography */ .img_text { height: 0; overflow: hidden; position: absolute; } #login_box { background-color: #f2f2ed; color: #2e7ae2; padding: 7px; margin: 0; position: absolute; bottom: 17px; right: 20px; font-size: x-small; } #login_box a { color: #2e7ae2; font-weight: normal; } #freeEasy { width: 173px; height: 0; padding-top: 14px; overflow: hidden; background: url(http://imgfarm.fotoflexer.com/web/freeEasy_text.gif) no-repeat 0 0; position: absolute; top: 152px; right: 24px; } h3 a { display: block; } h2, h3, h4 { margin: 0; padding: 0; } h3, h4 { margin-top: 1em; } h4 { margin-top: 12px; } img.replacement { margin: 0; padding: 0; } table { border-collapse: collapse; } table .small { font-size: x-small; font-weight: normal; padding-left: 2px; } table td { padding: 0 10px 0 0; } table .input { width: 100%; } div.news { border-top: 1px solid #ddd; padding: 1em 0; margin: 2em auto 2em; width: 75%; } div.news img { float: left; } div.news .full_review { font-size: x-small; } div.news p { margin-left: 160px; } div.news p.author { text-align: right; font-size: small; font-weight: bold; margin: 0; } /* Buttons */ #landing_buttons { width: 232px; margin: 0 auto; } #center_button { position: absolute; top: 38px; left: 38px; } a#see_a_demo { display: block; margin: 0 auto; background: url(http://imgfarm.fotoflexer.com/web/button_see_a_demo.gif) no-repeat 0 0; width: 102px; height: 0; padding-top: 33px; overflow: hidden; } a#see_a_demo:hover { background-position: 0 -33px; } a#getStarted { display: block; background: url(http://imgfarm.fotoflexer.com/web/getStarted_button.gif) no-repeat 0 0; width: 202px; height: 0; padding-top: 59px; overflow: hidden; position: absolute; top: 91px; right: 10px; } a#getStarted:hover { background-position: 0 -59px; } a#getStarted_white { display: block; background: url(http://imgfarm.fotoflexer.com/web/getStarted_button_white.gif) no-repeat 0 0; width: 202px; height: 0; padding-top: 57px; overflow: hidden; } a#getStarted_white:hover { background-position: 0 -57px; } a#start_flexing { display: block; background: url(http://imgfarm.fotoflexer.com/web/button_get_started.gif) no-repeat 0 0; width: 114px; height: 0; padding-top: 33px; overflow: hidden; } a#start_flexing:hover { background-position: 0 -33px; } a#launch_button { display: block; width: 283px; height: 0; padding-top: 50px; overflow: hidden; margin: 0 auto; background: url(http://imgfarm.fotoflexer.com/web/launch_button2.gif) no-repeat 0 0; } a#launch_button:hover { background-position: 0 -50px; } a#upload_button { display: block; background: url(http://imgfarm.fotoflexer.com/web/upload_button.gif) no-repeat 0 0; width: 114px; height: 0; padding-top: 33px; overflow: hidden; } a#upload_button:hover { background-position: 0 -33px; } a#webcam_button { display: block; background: url(http://imgfarm.fotoflexer.com/web/webcam_button.gif) no-repeat 0 0; width: 129px; height: 0; padding-top: 33px; overflow: hidden; } a#webcam_button:hover { background-position: 0 -33px; } a#login_button_big { display: block; background: url(http://imgfarm.fotoflexer.com/web/login_button_big.gif) no-repeat 0 0; width: 64px; height: 0; padding-top: 22px; overflow: hidden; } a#login_button_big:hover { background-position: 0 -22px; } a.play_button { display: block; /*float: right;*/ margin-right: 1px; margin-top: 10px; margin-left: auto; background: url(http://imgfarm.fotoflexer.com/web/play_button.gif) no-repeat 0 0; width: 54px; height: 0; padding-top: 19px; overflow: hidden; } a.play_button:hover { background-position: 0 -19px; } a#close_button { display: block; float: right; background: url(http://imgfarm.fotoflexer.com/web/close_button.gif) no-repeat 0 0; width: 54px; height: 0; padding-top: 19px; overflow: hidden; } a#close_button:hover { background-position: 0 -19px; } a.widget_button { display: block; background: url(http://imgfarm.fotoflexer.com/web/add_widget_button.gif) no-repeat 0 0; width: 115px; height: 0; padding-top: 33px; overflow: hidden; } a.widget_button:hover { background-position: 0 -33px; } p#samples { position: absolute; top: 128px; left: 43px; width: 195px; } a.sample { display: block; float: left; width: 60px; margin-left: 5px; height: 0; padding-top: 60px; overflow: hidden; } a#butterfly_sample { background: url(http://imgfarm.fotoflexer.com/web/samples/butterfly_sprite.jpg) no-repeat 0 0; margin-left: 0; } a#campanile_sample { background: url(http://imgfarm.fotoflexer.com/web/samples/campanile_sprite.jpg) no-repeat 0 0; } a#moon_sample { background: url(http://imgfarm.fotoflexer.com/web/samples/moon_sprite.jpg) no-repeat 0 0; } a#lilies_sample { background: url(http://imgfarm.fotoflexer.com/web/samples/lilies_sprite_new.gif) no-repeat 0 0; margin-left: 0; } a#bridge_sample { background: url(http://imgfarm.fotoflexer.com/web/samples/bridge_sprite_new.gif) no-repeat 0 0; } a#friends_sample { background: url(http://imgfarm.fotoflexer.com/web/samples/friends_sprite_new.gif) no-repeat 0 0; } a#butterfly_sample:hover, a#campanile_sample:hover, a#moon_sample:hover, a#lilies_sample:hover, a#bridge_sample:hover, a#friends_sample:hover { background-position: 0 -60px; } /* Typography */ .right { text-align: right; } .center { text-align: center; } .left { text-align: left; } .f_right { float: right; } .f_left { float: left; } .small { font-size: small; font-weight: normal; } a.small { font-size: x-small; font-weight: normal; } .announcement { background: url(http://imgfarm.fotoflexer.com/web/announcement_body.gif) repeat-y top left; margin: 0; padding: 0; position: relative; } .announcement .top { background: url(http://imgfarm.fotoflexer.com/web/announcement_top.gif) no-repeat top left; padding: 1px 10px 0 10px; margin: 0; position: relative; top: 0; left: 0; } .announcement .bottom { background: url(http://imgfarm.fotoflexer.com/web/announcement_bottom.gif) no-repeat top left; height: 5px; line-height: 1px; font-size: 1px; margin: 0; padding: 0; } .announcement_title { background: url(http://imgfarm.fotoflexer.com/web/new_icon.gif) no-repeat top left; padding-left: 35px; } .mini_col p { margin: 1em 0 0 0; } table { margin: 0 auto; padding: 0; border-collapse: collapse; } table td { padding: 3px; } table#demo { margin: 0; padding: 0; border-collapse: collapse; } table#demo td { text-align: center; /*padding: 0;*/ margin: 0; border: 0; } /* Footer */ .footer { font-size: xx-small; padding-top: 5px; color: #777; text-align: center; margin-bottom: 10px; }