340717 HTML+CSS rework layout + flash

My client has a current site at [login to view URL] They want the home page redesigned with Flash added. I have the revised home page concept (including the 4 Flash "slides") in a layered Photoshop file. The two deliverables (to be uploaded to [login to view URL], which is not a live site) are: 1 - Home page redesigned and tested with Flash included (one HTML file, one CSS file, images, .fla and .swf). 2 - Interior page template (one HTML tested HTML file, images, and accompanying CSS), saved as [login to view URL] I will personally be building out the other pages of the site. FLASH PORTION SPECIFICATIONS: - Only the portion of the page that changes -- the part in the dark gray box (including the box itself) -- should be done in Flash. The rest of the page should be done in HTML+CSS. - I will provide the font and I want the text to be done in Flash -- not as a static image -- so that it can be edited on an ongoing basis. So I will want both the .fla and .swf files. - The version of Flash required for the site visitor should be version 8 or lower. - The order of the Flash sequence is as follows: 1. Business 2. Individual 3. Associations & Affiliates 4. Insurance and Financial Pros - Each slide should stand still for 20 seconds before changing to the next slide. - Transition effect should be a fade between slides. - There is a Flash control needed -- the user will need to be able to mouse over each of the four slide names at the bottom of the big gray box and click on the name they want. Upon mousing over any of the names, the name turns yellow and the white triangle slides to move below it. On click, it turns white. The "on page" state is shown, which is yellow. Once the user clicks on one of these names, the slide stays fixed on his selection and no more transitions happen unless he reloads the page. - When the user clicks on the "details" word or icon next to the word within the Flash gray box, the word "Details" will change to white, and it will take the user to a page link that is dependent upon the slide the user is on at the time. In addition, if the user clicks ANYWHERE on the slide EXCEPT the "controls" area described above, he should be taken to one of the pages listed below (dependent upon which slide he is currently seeing). Here are the slides and what each page's link should be: 1. Business - business/[login to view URL] 2. Individual - individual/[login to view URL] 3. Associations & Affiliates - associations/[login to view URL] 4. Insurance and Financial Pros - insurance/[login to view URL] - If the end user doesn't have Flash, the first slide ("Business") should appear as a static graphic that when clicked on, goes to business/main.htm. SITE-WIDE HTML+CSS specifications (see attached interior page template for look and feel): - Default font site-wide should change to Arial. - All copy on interior pages remains the same. - To make your job easier, the width of the pages and width of the navigation is the same as the current site. - I need the new top navigation "tabs" look implemented site-wide (site is less than 20 pages, all done as static HTML). The on page state and mouse-over state should look like the "Insurance & Financial Pros" tab does in the navigation on the attached mock up. - Navigation tabs should be done as <li>s for easy ongoing editing. - Navigation tab size should look as they do on the mockup -- each tab has a width specific to it. - Page needs to validate with W3C. - Page needs to be tested in IE and other major browsers (I can provide access to a fast testing system if you want to use mine) to ensure that navigation works and the page design does not degrade. - Page background on all pages (outside of white area for main page content) should change to yellow as shown in mockup. - Positioning of elements and styling should be done within the style sheet whenever possible, not in the HTML. - Copy existing Meta data and page titles. - Page needs to scale taller if more text is entered in ANY of the three columns. - Middle column needs to expand to fill space where right column is now if there is no right column content. - Link color, bullet style and h1, h2 and h3 styles should be done as shown in attached file. - In the sidebar, the the twitter icon and text next to it should link to [login to view URL] - Also in the sidebar, the LinkedIn icon and text next to it should link to [login to view URL] HOME PAGE HTML+CSS Specifications: - Navigation tabs should be done as described in the section above. - The current little slideshow feature on the existing [login to view URL] page should be moved to the bottom right corner of the home page and made shorter (as shown in mockup), but not so short that any of the images are cropped (cropping white space is o.k., cropping the colored part of an image is not). - The "Join this list" and "Associations & Affiliates" in the bottom right corner box on the home page need to be links to associations/main.htm. - The About Us box header (lower half of home page) should be a link to about/[login to view URL] - The Latest News box header (also lower half of home page) should be a link to about/[login to view URL] - All the boxes' bottom lines need to line horizontally -- so they should be fixed heights. - In the "Follow us Online" box, the the twitter icon should link to [login to view URL] - Also in the "Follow us Online" box, the LinkedIn icon should link to [login to view URL] - Also plug in the twitter feed in the "Follow us Online" box: the RSS source is [login to view URL] - Text that is in blue anywhere on the page should be links.