1. /* clean */
  2.  
  3. *
  4.         { margin: 0; padding: 0; font-family: Tahoma, Arial, FreeSans, Helvetica, sans-serif; font-size: 1em; }
  5. a
  6.         { outline: none; color: #fff; font-weight: bold; background: transparent; }
  7. a:hover
  8.         { color: #7AC67C; text-decoration: underline; }
  9. #testimonials a:hover,
  10. #footer #footer_content p a:hover
  11.         { color: #fff; }
  12. strong
  13.         { color: #fff; font-weight: bold; }
  14. #submain a.stronga
  15.         { color: #fff; font-weight: bold; }
  16. #submain a.stronga:hover, #submain a:hover
  17.         { color: #282E4D; }
  18. ul,li
  19.         { list-style-type: none; }
  20.  
  21. /* body */
  22.  
  23. body
  24.         { background: #26464d url("images/back.png") repeat-x center top; color: #e2e2e2; }
  25. #header
  26.         { width: 990px; height: 148px; background: transparent url("images/header.png") no-repeat center top; margin: 0 auto; }
  27. #header #logo
  28.         { float: left; display: block; width: 340px; height: 65px; margin: 15px 0 0 32px; text-indent: -5000px; display: inline; }
  29. #menu_wrapper
  30.         { height: 40px; background: #000; }
  31. ul#menu
  32.         { width: 926px; margin: 0 auto; padding: 7px 0 0 0; clear: both; }
  33. ul#menu li
  34.         { float: left; }
  35. #header a:hover, #menu_wrapper a:hover
  36.         { background: transparent; }
  37. ul#menu li a,ul#menu li a:hover
  38.         { display: block; height: 27px; text-indent: -5000px; border-right: 20px solid #000; background-image: url("images/topMenu.png"); }
  39. a#menu_home
  40.         { width: 71px; background-position: 0 0; }
  41. a#menu_order
  42.         { width: 70px; background-position: -71px 0; }
  43. a#menu_showcase
  44.         { width: 103px; background-position: -141px 0; }
  45. a#menu_contact
  46.         { width: 86px; background-position: -244px 0; }
  47. a#menu_blog
  48.         { width: 63px; background-position: -330px 0; }
  49. a#menu_home:hover
  50.         { background-position: 0 -27px; }
  51. a#menu_order:hover
  52.         { background-position: -71px -27px; }
  53. a#menu_showcase:hover
  54.         { background-position: -141px -27px; }
  55. a#menu_contact:hover
  56.         { background-position: -244px -27px; }
  57. a#menu_blog:hover
  58.         { background-position: -330px -27px; }
  59. .active a#menu_home
  60.         { background-position: 0 -54px; }
  61. .active a#menu_order
  62.         { background-position: -71px -54px; }
  63. .active a#menu_showcase
  64.         { background-position: -141px -54px; }
  65. .active a#menu_contact
  66.         { background-position: -244px -54px; }
  67. .active a#menu_blog
  68.         { background-position: -330px -54px; }
  69. #content
  70.         { width: 934px; margin: 0 auto; padding: 0 30px 10px 30px; font-size: .8em; overflow: auto; clear: both; }
  71. #main
  72.         { float: left; width: 520px; padding-right: 30px; }
  73. #main p
  74.         { margin: 0 0 15px 2px; }
  75. .new
  76.         { padding: 10px; margin: 0 0 15px 2px; background: #1b3136; }
  77. .new span
  78.         { font-weight: bold; color: #6bc67c; }
  79. .new .ja
  80.         { width: 100%; overflow: auto; }
  81. .new .ja span
  82.         { width: 155px; display: block; float: left; margin-right: 14px; text-align: center; }
  83. .new .ja span.last
  84.         { margin-right: 0; }
  85. .new .ja span img
  86.         { display: block; margin-bottom: 5px; border: 2px solid #fff; }
  87. .new .ja span a:hover img
  88.         { border-color: #6bc67c; }
  89. #main .new p
  90.         { margin: 0 0 10px 2px; }
  91. #main ul
  92.         { margin: 5px 0 15px 15px; }
  93. #main ul li
  94.         { background: transparent url("images/bullet.gif") no-repeat top left; padding: 0 0 0 25px; margin-bottom: 2px; line-height: 1.4em; }
  95. #submain ul
  96.         { margin: 5px 0 15px 15px; }
  97. #submain ul li
  98.         { background: transparent url("images/bullet.gif") no-repeat top left; padding: 0 0 0 25px; margin-bottom: 2px; line-height: 1.4em; }
  99. #submain a
  100.         { color: #d2c0ff; text-decoration: none; font-weight: normal; }
  101. #main h2, #order_here h2, #examples h2
  102.         { height: 27px; margin: 30px 0 10px 0; text-indent: -5000px; }
  103. h2#xhtmlmagic
  104.         { height: 39px; background: transparent url("images/xhtmlmagic_h2.png") no-repeat left top; margin-top: 18px; }
  105. h2#you_send
  106.         { background: transparent url("images/you_send_h2.png") no-repeat left top; }
  107. h2#you_get
  108.         { background: transparent url("images/what_can_you_get_h2.png") no-repeat left top; }
  109. #submain
  110.         { float: right; width: 364px; padding-bottom: 50px; }
  111. #submain p
  112.         { color: #beffcc; margin: 5px 10px 10px 10px; }
  113. #submain h3
  114.         { width: 306px; height: 29px; margin: 15px 0 10px 0; padding-left: 10px; text-indent: -5000px; }
  115. #submain #four_hours h3, #submain #how h3
  116.         { margin-top: 35px; }
  117. #submain #customer_service h3
  118.         { margin-top: 65px; }
  119. #submain #four_hours
  120.         { background: transparent url("images/four_little.png") no-repeat top left; }
  121. #submain #money_back
  122.         { background: transparent url("images/dollar_little.png") no-repeat top left; }
  123. #submain #nda
  124.         { background: transparent url("images/nda_little.png") no-repeat top left; }
  125. #submain #four_hours h3
  126.         { background: transparent url("images/four_title.png") no-repeat top left; }
  127. #submain #money_back h3
  128.         { background: transparent url("images/dollar_title.png") no-repeat top left; }
  129. #submain #nda h3
  130.         { background: transparent url("images/nda_title.png") no-repeat top left; }
  131. #submain #four_hours, #money_back, #nda, #customer_service, #media, #how, #submain_prices, #preferred, #payment
  132.         { padding: 0 0 5px 65px; }
  133. #submain #order
  134.         { width: 240px; margin: 5px 0; padding: 10px 0 5px 65px; }
  135. #submain #order a
  136.         { display: block; width: 230px; height: 68px; background: transparent url("images/order_button.png") no-repeat top left; text-indent: -5000px; }
  137. #submain #order p
  138.         { margin-top: 15px; font-size: 1.1em; line-height: 1.4em; color: #fff; }
  139. #submain #order p strong
  140.         { font-size: 1.6em; }
  141. #submain .bookmark_us
  142.         { margin: 15px 0 0 70px; }
  143. #submain #info
  144.         { width: 297px; background: #1b3136 url("images/info_background.png") no-repeat top left; margin: 5px 0 10px 65px; padding-top: 10px; font-size: .9em; line-height: 1.6em; font-weight: bold; clear: both; }
  145. #submain #info p
  146.         { margin: 10px; }
  147. #submain #info p
  148.         { width: 239px; background: #1b3136 url("images/info_background_bottom.png") no-repeat bottom left; margin: 0; padding: 10px 20px 20px 38px; line-height: 1.4em; font-weight: normal; color: #d2c0ff; }
  149. #submain #info p strong
  150.         { color: #7ac67c; }
  151.  
  152. /* order page */
  153.  
  154. #content .order_page
  155.         { width: 550px; padding-right: 0; }
  156. #order_here h2
  157.         { background: transparent url("images/order_here_h2.png") no-repeat left top; }
  158. #submain #how
  159.         { background: transparent url("images/how.png") no-repeat top left; }
  160. #submain #submain_prices
  161.         { background: transparent url("images/dollar_little.png") no-repeat top left; }
  162. #submain #preferred
  163.         { background: transparent url("images/preferred.png") no-repeat top left; }
  164. #submain #payment
  165.         { background: transparent url("images/payment.png") no-repeat top left; }
  166. #submain #how h3
  167.         { background: transparent url("images/how_title.png") no-repeat top left; }
  168. #submain #submain_prices h3
  169.         { background: transparent url("images/prices_title.png") no-repeat top left; }
  170. #submain #preferred h3
  171.         { background: transparent url("images/preferred_title.png") no-repeat top left; }
  172. #submain #payment h3
  173.         { background: transparent url("images/payment_title.png") no-repeat top left; }
  174. #link_2checkout
  175.         { float: right; width: 97px; height: 149px; padding: 0; margin: 7px 0 20px 20px; background: transparent url("images/2coccs.jpg") no-repeat left top; text-indent: -5000px; }
  176.  
  177. /* order form on order page */
  178.  
  179. #main .form
  180.         { float: left; width: 550px; background: #1b3136 url("images/form_box_top.gif") no-repeat center top; overflow: auto; margin: 35px 0 0 0; padding: 0; display:inline; }
  181. .form form
  182.         { width: 500px; background: transparent url("images/form_box_bottom.gif") no-repeat left bottom; overflow: auto; padding: 15px 25px 25px 25px; color: #26464d; }
  183. .form form h2
  184.         { display: none; }
  185. #main .form form p
  186.         { margin: 0; padding: 0; font-size: 1.1em; color: #fff; }
  187. .order_page .form form .one_of_two
  188.         { float: left; }
  189. .form form a:hover
  190.         { float: none; display: inline; }
  191. label
  192.         { display: block; padding: 5px 0px 3px 0px; color: #fff; }
  193. label span
  194.         { color: #fff; }
  195. form span
  196.         { color: #6c896d; }
  197. .input
  198.         { width: 225px; background: #6c896d; border: 1px solid #26464d; margin: 0px 0 5px 0px; padding: 5px 3px; font-size: 1.1em; color: #fff; }
  199. #main .form form .first
  200.         { padding-right: 33px; width: 233px; }
  201. #case_link
  202.         { width: 233px; }
  203. #case_upload
  204.         { width: 233px; }
  205. .input_file
  206.         { width: 225px; background: #6c896d; border: 1px solid #26464d; margin: 0px 0 10px 0px; padding: 5px 3px; font-size: 1.1em; color: #fff; }
  207. #case_upload div
  208.         { cursor: pointer !important; }
  209. #case_upload div:hover
  210.         { background: transparent url("images/upload_button.png") no-repeat right top !important; }
  211. .select
  212.         { width: 234px; background: #6c896d; border: 1px solid #26464d; margin: 0px 0px 10px 0px; padding: 5px 3px; font-size: 1.1em; color: #fff; }
  213. .select option
  214.         { padding: 0 5px 0 5px; font-style: normal; background: #6c896d; color: #fff; }
  215. .select_pages
  216.         { background: #6c896d; border: 1px solid #26464d; margin: 0px 0px 10px 0px; padding: 5px 3px; font-size: 1.1em; color: #fff; }
  217. .form form textarea
  218.         { width: 492px; height: 60px; background: #6c896d; border: 1px solid #26464d; margin: 0px; padding: 5px 3px; font-size: 1.1em; color: #fff; overflow: auto; }
  219. .form_additional_textarea
  220.         { clear: both; }
  221. #main .form form p.allow_showcase
  222.         { padding: 10px 0 0 0; }
  223. .form form .allow_showcase input
  224.         { vertical-align: middle; }
  225. .form form .allow_showcase label
  226.         { display: inline; padding: 0 0 0 5px; vertical-align: middle; }
  227. .form form .allow_showcase label strong
  228.         { color: #fff; }
  229. #main .form form p.need_wordpress
  230.         { padding: 10px 0 0 0; }
  231. .form form .need_wordpress input
  232.         { vertical-align: middle; }
  233. .form form .need_wordpress label
  234.         { display: inline; padding: 0 0 0 5px; vertical-align: middle; }
  235. .form form .need_wordpress label strong
  236.         { color: #fff; }
  237. #send
  238.         { display: block; width: 125px; height: 67px; background: transparent url("images/send.png") no-repeat left top; border: 0; margin: 30px 0 10px 0; padding: 0; text-indent: -5000px; cursor: pointer; }
  239. #send:hover
  240.         { background: transparent url("images/send.png") no-repeat right top; }
  241. #calculated_price
  242.         { float: right; width: 200px; margin: 25px 10px 0 0; padding: 0px; font-size: 1.4em; font-weight: normal; text-align: center; color: #fff; }
  243. #calculated_price strong
  244.         { display: block; margin: 0; color: #fff; font-size: 2.4em; font-weight: bold; }
  245. #how_many_pages
  246.         { width: 233px; margin: 5px 0 0 0; overflow: auto; }
  247. .form form .one_of_two span
  248.         { display: block; padding: 2px 0 3px 0; white-space: nowrap; }
  249. #main_pages
  250.         { float: left; }
  251. #main_pages label, #subpages label
  252.         { padding: 3px 0 0 0; }
  253. #main_pages select
  254.         { width: 113px; margin-right: 7px; }
  255. #subpages
  256.         { float: left; }
  257. .form form #form_design_upload
  258.         { font-size: 14px; }
  259. #subpages select
  260.         { width: 113px; }
  261.  
  262. /* ordering */
  263.  
  264. #main .message, #main .error_message
  265.         { display: inline; float: left; width: 550px; background: #1b3136 url("images/form_box_top.gif") no-repeat center top; margin: 35px 0 0 0; padding: 0; overflow: auto; }
  266. .ordered_message, .not_ordered_message, .contacted_message, .not_contacted_message
  267.         { width: 500px; background: transparent url("images/form_box_bottom.gif") no-repeat left bottom; padding: 15px 25px 25px 25px; overflow: auto; color: #D2C0FF; }
  268. #content #main .contacted
  269.         { margin-top: 65px; }
  270. .error_message strong
  271.         { font-size: 1.6em; font-weight: bold; color: #D2C0FF; }
  272. #main .message p, #main .error_message p
  273.         { margin: 20px 0px 10px 0px; }
  274. #main .error_message .not_ordered_message ul.text li, #main .error_message .not_contacted_message ul.text li
  275.         { background: transparent url("images/bullet2.gif") no-repeat 2px 2px; }
  276.  
  277. /* about us */
  278.  
  279. #more_questions h2
  280.         { background: transparent url("images/contact_us_h2.png") no-repeat left top; }
  281. #submain #customer_service
  282.         { background: transparent url("images/support.png") no-repeat top left; }
  283. #submain #media
  284.         { background: transparent url("images/ads.png") no-repeat top left; }
  285. #customer_service h3
  286.         { background: transparent url("images/customer_title.png") no-repeat left top; }
  287. #media h3
  288.         { background: transparent url("images/media_title.png") no-repeat left top; }
  289. #media span, #customer_service span
  290.         { font-weight: bold; color: #fff; }
  291.  
  292. /* examples */
  293.  
  294. #examples h2
  295.         { background: transparent url("images/client_showcase_h2.png") no-repeat left top; }
  296. #examples_subtitle
  297.         { margin: 20px 0; padding: 0 0 0 0;
  298. /*border-bottom: 1px dashed #435053; */
  299.  
  300. }
  301.  
  302. /* showcase scroll */
  303.  
  304. #eHolder
  305.         { width: 934px; height: 300px; position: relative; overflow: hidden; padding: 25px 0; background: transparent url("images/showcase_bg.png") no-repeat 0 0; }
  306. #eScroller
  307.         { width: 934px; height: 300px; padding: 0 0 0 28px; }
  308. #ePrev
  309.         { position: absolute; top: 25px; left: 0; width: 43px; height: 296px; border: 0; text-indent: -5000px; background: transparent url("images/left_inner.png") no-repeat left top; }
  310. #ePrev:hover
  311.         { background: transparent url("images/left_inner_hover.png") no-repeat left top; }
  312. #eNext
  313.         { position: absolute; top: 25px; right: 0; width: 43px; height: 296px; border: 0; text-indent: -5000px; background: transparent url("images/right_inner.png") no-repeat right top; }
  314. #eNext:hover
  315.         { background: transparent url("images/right_inner_hover.png") no-repeat right top; }
  316. .exampleHolder
  317.         { float: left; position: relative; width: 302px; height: 300px; overflow: hidden; }
  318. .exampleScroller
  319.         { width: 302px; height: 300px; }
  320. .eHidden
  321.         { display: none; }
  322. .example
  323.         { padding: 0; width: 302px; height: 310px; }
  324. .example h3
  325.         { padding: 24px 28px 4px 28px; height: 20px; text-align: left; background: transparent url("images/showcase_title_bg.png") no-repeat 14px 18px; }
  326. .example h3 a
  327.         { color: #7f7f7f; font-size: 1.2em; text-decoration: none; font-family: Arial; letter-spacing: -1px; font-weight: normal; font-size: 16px; }
  328. .example h3 a:hover
  329.         { color: #7AC67C; background: transparent; }
  330. .example p.code_links
  331.         { text-align: right; padding: 6px 56px 0 28px; height: 29px; background: transparent url("images/showcase_title_bg.png") no-repeat 14px bottom; color: #7f7f7f; }
  332. .example p.code_links a
  333.         { padding: 0 2px; font-size: 14px; color: #7f7f7f; text-decoration: none; font-weight: normal; }
  334. .example p.code_links a:hover
  335.         { color: #7AC67C; text-decoration: none; }
  336. .example p.code_links span
  337.         { color: #7f7f7f; float: left; display: block; height: 18px; padding-right: 45px; background: transparent url("images/subpages_bg.gif") no-repeat right top; position: relative; }
  338. .eScroll
  339.         { position: absolute; display: block; width: 20px; height: 18px; background: transparent url("images/subpages_arrows.gif") no-repeat 0 0; text-indent: -5000px; text-align: left; padding: 0 !important; }
  340. .example .eDown
  341.         { top: 0; right: 18px; background-position: 3px -15px; }
  342. .example .eUp
  343.         { top: 0; right: 0px; background-position: -15px -15px; }
  344. .example .eDownNot
  345.         { background-position: 3px -35px; }
  346. .example .eUpNot
  347.         { background-position: -15px -35px; }
  348. .example .eDown:hover
  349.         { background-position: 3px 5px; }
  350. .example .eUp:hover
  351.         { background-position: -15px 5px; }
  352. .example .eDownNot:hover
  353.         { background-position: 3px -35px; cursor: default; }
  354. .example .eUpNot:hover
  355.         { background-position: -15px -35px; cursor: default; }
  356. .example a.example_image, .example_small a.example_image
  357.         { font-size: 0; }
  358. .example a img
  359.         { border: 2px solid #000; font-size: 0; width: 270px; height: 198px; display: block; }
  360. .example a:hover img
  361.         { border: 2px solid #7AC67C; }
  362.  
  363. .example a.online
  364.         { position: absolute; top: 12px; left: 220px; display: block; text-indent: -5000px; width: 25px; height: 31px; background: transparent url('images/online.png') no-repeat 0 0; }
  365. .example a.online:hover
  366.         { top: 10px; background-position: 0 -31px; }
  367.  
  368. /* privacy policy */
  369.  
  370. #privacy_policy h2
  371.         { background: transparent url("images/privacy_h2.png") no-repeat left top; }
  372. #non_disclosure_agreement h2
  373.         { background: transparent url("images/nda_h2.png") no-repeat left top; }
  374. #money_back_policy h2
  375.         { background: transparent url("images/money_back_h2.png") no-repeat left top; }
  376.  
  377. /* browsers and valids */
  378.  
  379. #browsers_valids
  380.         { width: 580px; height: 148px; background: #26464d url("images/satisfaction.png") no-repeat top left; margin-top: 20px; padding-right: 348px; clear: both; }
  381. #browsers_valids p
  382.         { padding: 30px 0 0 5px; font-weight: bold; color: #7ac67c; }
  383. #browsers_valids ul
  384.         { margin: 10px 0 0 0; padding: 0; }
  385. #browsers
  386.         { float: left; margin: 0 auto; overflow: auto; width: 320px; }
  387. #browsers a
  388.         { display: block; width: 38px; height: 38px; padding: 0 7px; text-indent: -5000px; }
  389. #valids
  390.         { float: right; margin: 0 auto; overflow: auto; width: 210px; }
  391. #valids a
  392.         { display: block; width: 91px; height: 35px; margin: 0; padding: 0 14px 0 0; text-indent: -5000px; }
  393. #link_firefox, #link_ie7, #link_ie6, #link_safari, #link_opera, #link_chrome, #link_xhtml, #link_css
  394.         { display: inline; float: left; }
  395. #link_firefox a
  396.         { background: transparent url("images/firefox.gif") no-repeat left top; }
  397. #link_ie7 a
  398.         { background: transparent url("images/ie7.gif") no-repeat left top; }
  399. #link_ie6 a
  400.         { background: transparent url("images/ie6.gif") no-repeat left top; }
  401. #link_safari a
  402.         { background: transparent url("images/safari.gif") no-repeat left top; }
  403. #link_opera a
  404.         { background: transparent url("images/opera.gif") no-repeat left top; }
  405. #link_chrome a
  406.         { background: transparent url("images/chrome.gif") no-repeat left top; }
  407. #link_xhtml a
  408.         { background: transparent url("images/valid_xhtml.gif") no-repeat left top; }
  409. #link_css a
  410.         { background: transparent url("images/valid_css.gif") no-repeat left top; }
  411.  
  412. /* testimonials */
  413.  
  414. #testimonials
  415.         { width: 878px; background: #282e4d url("images/testimonials_bottom.png") no-repeat left bottom; padding: 15px 35px 25px 15px; clear: both; }
  416. #testimonials ul li
  417.         { background: #282e4d url("images/quotes.png") no-repeat left 2px; padding: 0 0 15px 50px; }
  418. #testimonials ul li span
  419.         { font-weight: normal; font-style: italic; color: #7ac67c; }
  420. #testimonials ul li a
  421.         { font-weight: normal; color: #7ac67c; }
  422.  
  423. /* footer */
  424.  
  425. #footer
  426.         { min-width: 995px; background-color: #263a48; margin-top: 30px; clear: both; }
  427. #footer #footer_content
  428.         { width: 935px; margin: 0 auto; padding: 20px 30px 50px 30px; font-size: .7em; font-weight: bold; color: #7b9094; }
  429. #footer #footer_content a
  430.         { color: #68aa70; }
  431. #legal_information
  432.         { float: left; width: 310px; }
  433. #company_information
  434.         { float: left; width: 315px; text-align: center; }
  435. #validate_this_site
  436.         { float: left; width: 310px; text-align: right; }