Hi guys, I took this HTML and CSS from an online site and wanted to change the menu around so that it could allow sub-menus that popped out to the right when hovered over, as well as sub-sub menus. I can't seem to figure out how to do that. I have put my current HTML and CSS from the online site here: HTML: <!DOCTYPE html> <!--[if IE 7]><html class="lt-ie10 ie7" lang="en"><![endif]--> <!--[if IE 8]><html class="lt-ie10 ie8" lang="en"><![endif]--> <!--[if IE 9]><html class="lt-ie10 ie9" lang="en"><![endif]--> <!--[if gt IE 9]><!--> <html lang="en"> <!--<![endif]--> <head id="Head1"><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title> Grant Thornton - Grant Thornton </title> <meta name="description" content="Founded in Chicago in 1924, Grant Thornton LLP is the U.S. member firm of Grant Thornton International Ltd, one of the world’s leading organizations of independent audit, tax and advisory firms. " /> <meta name="keywords" content="Grant Thornton, Grant, Thornton, Accounting, Advisory, Audit, Tax, Business consulting, health care, not-for-profit, manufacturing, " /> <link rel="stylesheet" href="statis css app gt" /> <link rel="stylesheet" media="print" href="statis css app gt2.htm" /> <script src="http://code.google.com/r/sirluolin-html5rocks/source/browse/www.html5rocks.com/static/js/modernizr-1.6.min.js?r=fb720528e2e36502473a031fb7cc8085cc3df61d"></script> <META NAME="WT.cg_n" CONTENT="Grant Thornton"> <META NAME="WT.cg_s" CONTENT="Grant Thornton"> <META NAME="WT.ti" CONTENT="Grant Thornton"> <META NAME="WT.sv" CONTENT="DevServer"></META><META NAME="DCSext.wtprod" CONTENT="Webtrends"></META></head> <body> <form method="post" action="/" id="mainLayoutForm"> <div class="aspNetHidden"> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTg5NDUzNDAwNQ9kFgICAxBkZBYCAgEPZBYEZg9kFgJmD2QWBAIDDxYCHgtfIUl0ZW1Db3VudAIGZAIHDxYCHwACBhYMZg9kFgICAQ9kFgJmDxUCCS9hYm91dC11cwhBYm91dCB1c2QCAQ9kFgICAQ9kFgJmDxUCBy9ldmVudHMGRXZlbnRzZAICD2QWAgIBD2QWAmYPFQIQL2NvbnRhY3QtdXMuYXNweApDb250YWN0IHVzZAIDD2QWAgIBD2QWAmYPFQIGL2xvZ2luBUxvZ2luZAIED2QWAgIBD2QWAmYPFQIdaHR0cDovL25ld3MuZ3JhbnR0aG9ybnRvbi5jb20FUHJlc3NkAgUPZBYCAgEPZBYCZg8VAhNodHRwOi8vd3d3Lmd0aS5vcmcvDUludGVybmF0aW9uYWxkAgEPZBYCZg9kFgICAQ9kFggCAQ9kFgJmD2QWAmYPFgQeCWRhdGEtaWRsZQUEMzAwMB4TZGF0YS1hbmltYXRpb25TcGVlZAUDNTAwFgICAQ8WAh8AAgQWCGYPZBYCAgEPFgIeBWNsYXNzBRNjYXJvdXNlbC10ZW1wbGF0ZS1hFgICAQ9kFgRmDxUDEkNoYW5nZSBpcyB1bmRlcndheQBpTWFya2V0U3BoZXJlJ3MgT3JhY2xlIGJ1c2luZXNzIHNvbHV0aW9ucyBwcmFjdGljZSBpcyBub3cgcGFydCBvZiBHcmFudCBUaG9ybnRvbiBCdXNpbmVzcyBDb25zdWx0aW5nIHRlYW0uZAIBDxYGHgRocmVmBUkvc2VydmljZXMvYWR2aXNvcnktc2VydmljZXMvYnVzaW5lc3MtY29uc3VsdGluZy90ZWNobm9sb2d5LXNvbHV0aW9ucy5hc3B4HgZ0YXJnZXQFBV9zZWxmHhRkYXRhLXdlYnRyZW5kcy1tdWx0aQWZAVsnRENTLmRjc3VyaScsICcvc2VydmljZXMvYWR2aXNvcnktc2VydmljZXMvYnVzaW5lc3MtY29uc3VsdGluZy90ZWNobm9sb2d5LXNvbHV0aW9ucy5hc3B4J10sIFsnV1QudGknLCAnVmlzaXQlMjBUZWNobm9sb2d5JTIwU29sdXRpb25zX0Nhcm91c2VsU2xpZGVDVEEnXRYCAgEPFgIeBFRleHQFGlZpc2l0IFRlY2hub2xvZ3kgU29sdXRpb25zZAIBD2QWAgIBDxYCHwMFE2Nhcm91c2VsLXRlbXBsYXRlLWEWAgIBD2QWBGYPFQMXQnVzaW5lc3MgaW50ZXJydXB0aW9uczodSG93IHRvIG1hbmFnZSB0aGUgdW5hdm9pZGFibGWyAUEgZGlzYXN0ZXIgY2FuIHN0cmlrZSBpbmRpcmVjdGx5IC0gYW5kIHN0aWxsIGFmZmVjdCB5b3VyIGJ1c2luZXNzLiBPdXIgYXJ0aWNsZSBleHBsYWlucyB3aGF0IGFyZSB0aGUgMyBtaXN0YWtlcyB0byBhdm9pZCBhbmQgdGhlIDUgc2ltcGxlIHN0ZXBzIHRoYXQgd2lsbCBzYXZlIHlvdXIgY29tcGFueSBtb25leS5kAgEPFgYfBAVJL2lzc3Vlcy9saWJyYXJ5L2FydGljbGVzL2NvbnN0cnVjdGlvbi8yMDEzLzA4LWJ1c2luZXNzLWludGVycnVwdGlvbnMuYXNweB8FBQZfYmxhbmsfBgWJAVsnRENTLmRjc3VyaScsICcvaXNzdWVzL2xpYnJhcnkvYXJ0aWNsZXMvY29uc3RydWN0aW9uLzIwMTMvMDgtYnVzaW5lc3MtaW50ZXJydXB0aW9ucy5hc3B4J10sIFsnV1QudGknLCAnR2V0JTIwaW5zaWdodHNfQ2Fyb3VzZWxTbGlkZUNUQSddFgICAQ8WAh8HBQxHZXQgaW5zaWdodHNkAgIPZBYCAgEPFgIfAwUTY2Fyb3VzZWwtdGVtcGxhdGUtYRYCAgEPZBYEZg8VAwxIZWRnZSBmdW5kcyAKZmlnaHQgYmFja2dUaGUgcmF0ZSBvZiBuZXcgZnVuZCBsYXVuY2hlcyBkZW1vbnN0cmF0ZXMgdGhlIHJlc2lsaWVuY3kgb2YgZnVuZCBtYW5hZ2VycyBhbmQgdGhlaXIgYWJpbGl0eSB0byBhZGFwdC4gZAIBDxYGHwQFUi9pc3N1ZXMvbGlicmFyeS9hcnRpY2xlcy9maW5hbmNpYWwtc2VydmljZXMvMjAxMy9BTS0wNy1IZWRnZS1mdW5kcy1maWdodC1iYWNrLmFzcHgfBQUFX3NlbGYfBgWdAVsnRENTLmRjc3VyaScsICcvaXNzdWVzL2xpYnJhcnkvYXJ0aWNsZXMvZmluYW5jaWFsLXNlcnZpY2VzLzIwMTMvQU0tMDctSGVkZ2UtZnVuZHMtZmlnaHQtYmFjay5hc3B4J10sIFsnV1QudGknLCAnR2V0JTIwdGhlJTIwZnVsbCUyMHJlcG9ydF9DYXJvdXNlbFNsaWRlQ1RBJ10WAgIBDxYCHwcFE0dldCB0aGUgZnVsbCByZXBvcnRkAgMPZBYCAgEPFgIfAwUTY2Fyb3VzZWwtdGVtcGxhdGUtYRYCAgEPZBYEZg8VAx1SZWFzb24gc2F5czogYmlnZ2VyIGlzIGJldHRlcipJbnN0aW5jdCBzYXlzOiBuaW1ibGUgaXMgYmV0dGVyIGZvciBncm93dGgAZAIBDxYGHwRkHwUFBV9zZWxmHgdWaXNpYmxlaBYCAgEPFgIfB2VkAgIPZBYCZg9kFgICAQ9kFgICAQ8WAh8AAgQWCGYPZBYCAgEPFgIfAwUgcHJpbWFyeS1jdGEtYmFyLWl0ZW0gZmlyc3QtY2hpbGQWAgIBD2QWAmYPZBYCZg9kFgQCAQ8WAh8HBRBJbmZvcm1hdGlvbiBmb3I6ZAIDDxYCHwACAxYGZg9kFgICAQ9kFgICAQ8WAh8HBQtKb2Igc2Vla2Vyc2QCAQ9kFgICAQ9kFgICAQ8WAh8HBQVQcmVzc2QCAg9kFgICAQ9kFgICAQ8WAh8HBRBDRU8gR3Jvd3RoIEZvcnVtZAIBD2QWAgIBD2QWAgIBD2QWAmYPZBYCZg9kFgJmDxYCHwMFE3NtYWxsLWltYWdlLWNhcHRpb24WBAIBDxYCHwcFD0hlYWx0aCBjYXJlIE0mQWQCBQ8WBh8EBVQvaXNzdWVzL2xpYnJhcnkvd2hpdGVwYXBlcnMvaGVhbHRoLWNhcmUvMjAxMy85LUhlYWx0aC1jYXJlLU0tYW5kLUEtaGlkZGVuLXJpc2tzLmFzcHgfBQUFX3NlbGYfBgWkAVsnRENTLmRjc3VyaScsICcvaXNzdWVzL2xpYnJhcnkvd2hpdGVwYXBlcnMvaGVhbHRoLWNhcmUvMjAxMy85LUhlYWx0aC1jYXJlLU0tYW5kLUEtaGlkZGVuLXJpc2tzLmFzcHgnXSwgWydXVC50aScsICdSZWFkJTIwdGhlJTIwZnVsbCUyMHJlcG9ydF9Qcm9tb0Jsb2NrNENvbHVtbkNUQSddFgICAQ8WAh8HBRRSZWFkIHRoZSBmdWxsIHJlcG9ydGQCAg9kFgICAQ9kFgICAQ9kFgJmD2QWAmYPZBYCZg8WAh8DBRNzbWFsbC1pbWFnZS1jYXB0aW9uFgQCAQ8WAh8HBRZTZXB0IFdhc2hpbmd0b24gVXBkYXRlZAIFDxYGHwQFSC9hYm91dC11cy9wdWJsaWMtcG9saWN5L3dhc2hpbmd0b24tdXBkYXRlL3dhc2hpbmd0b24tdXBkYXRlLWZhbGwtMTMuYXNweB8FBQVfc2VsZh8GBZsBWydEQ1MuZGNzdXJpJywgJy9hYm91dC11cy9wdWJsaWMtcG9saWN5L3dhc2hpbmd0b24tdXBkYXRlL3dhc2hpbmd0b24tdXBkYXRlLWZhbGwtMTMuYXNweCddLCBbJ1dULnRpJywgJ1RyYWNrJTIwRlkxNCUyMGFwcHJvcHJpYXRpb25zX1Byb21vQmxvY2s0Q29sdW1uQ1RBJ10WAgIBDxYCHwcFGVRyYWNrIEZZMTQgYXBwcm9wcmlhdGlvbnNkAgMPZBYCAgEPFgIfAwUfcHJpbWFyeS1jdGEtYmFyLWl0ZW0gbGFzdC1jaGlsZBYCAgEPZBYCZg9kFgJmD2QWAmYPFgIfAwUTc21hbGwtaW1hZ2UtY2FwdGlvbhYEAgEPFgIfBwUVTGVhcm4gZnJvbSB5b3VyIHBlZXJzZAIFDxYGHwQFKi9pc3N1ZXMvZHJpdmluZy1ncm93dGgvZ3Jvd3RoLXN0b3JpZXMuYXNweB8FBQVfc2VsZh8GBX9bJ0RDUy5kY3N1cmknLCAnL2lzc3Vlcy9kcml2aW5nLWdyb3d0aC9ncm93dGgtc3Rvcmllcy5hc3B4J10sIFsnV1QudGknLCAnUmVhZCUyMHRoZWlyJTIwZ3Jvd3RoJTIwc3Rvcmllc19Qcm9tb0Jsb2NrNENvbHVtbkNUQSddFgICAQ8WAh8HBRlSZWFkIHRoZWlyIGdyb3d0aCBzdG9yaWVzZAIDD2QWAmYPZBYCAgEPFgIfBwXjAUhlYWx0aCBjYXJlIHJlZm9ybTogMyBjaGFsbGVuZ2VzIGZvciA8YSBocmVmPSJodHRwOi8vc2VhcmNoLnR3aXR0ZXIuY29tL3NlYXJjaD9xPSUyM25vbnByb2ZpdHMiIHRhcmdldD0iX2JsYW5rIj4jbm9ucHJvZml0czwvYT4gYW5kIGhvdyB0byBhZGRyZXNzIHRoZW0gPGEgaHJlZj0iaHR0cDovL3QuY28vWmRPc1RiRWthYiIgdGFyZ2V0PSJfYmxhbmsiPmh0dHA6Ly90LmNvL1pkT3NUYkVrYWI8L2E+ZAIED2QWAmYPZBYEAgEPZBYEZg9kFgJmD2QWCGYPFgIfBwUYV2h5IG5vbnByb2ZpdHMgY2hvb3NlIHVzZAIDDxYCHwcFJkZyYW5rIEt1cnJlLCBOYXRpb25hbCBNYW5hZ2luZyBQYXJ0bmVyZAIEDxYCHwdlZAIFDxYGHwQFHC9hYm91dC11cy9wdWJsaWMtcG9saWN5LmFzcHgfBQUFX3NlbGYfBgVaWydEQ1MuZGNzdXJpJywgJy9hYm91dC11cy9wdWJsaWMtcG9saWN5LmFzcHgnXSwgWydXVC50aScsICdMZWFybiUyMG1vcmUlMjBfTGFyZ2VWaWRlb0NUQSddFgICAQ8WAh8HBQtMZWFybiBtb3JlIGQCAQ9kFgJmD2QWBAIBDxYCHwcFEEZlYXR1cmVkIGxlYWRlcnNkAgMPZBYEZg9kFgJmD2QWCmYPDxYEHgtOYXZpZ2F0ZVVybAUiL3Blb3BsZS9iaW9zL2wvbHVrZW5zLXN0ZXBoZW4uYXNweB4GVGFyZ2V0BQVfc2VsZmRkAgIPFgIfBwURU3RlcGhlbiBKLiBMdWtlbnNkAgMPFgIfBwUuTmF0aW9uYWwgTWFuYWdpbmcgUHJpbmNpcGFsLCBBZHZpc29yeSBTZXJ2aWNlc2QCBA8WAh8HZWQCBQ8PFgYfCQUiL3Blb3BsZS9iaW9zL2wvbHVrZW5zLXN0ZXBoZW4uYXNweB8KBQVfc2VsZh8IZ2QWAmYPFgIfBwURTWVldCBTdGV2ZSBMdWtlbnNkAgEPZBYCZg9kFgpmDw8WBB8JBSAvcGVvcGxlL2Jpb3MvaC9odWRzb24ta2V2aW4uYXNweB8KBQVfc2VsZmRkAgIPFgIfBwUNS2V2aW4gIEh1ZHNvbmQCAw8WAh8HBSpOYXRpb25hbCBNYW5hZ2luZyBEaXJlY3RvciwgUHJpdmF0ZSBFcXVpdHlkAgQPFgIfB2VkAgUPDxYGHwkFIC9wZW9wbGUvYmlvcy9oL2h1ZHNvbi1rZXZpbi5hc3B4HwoFBV9zZWxmHwhnZBYCZg8WAh8HBRFNZWV0IEtldmluIEh1ZHNvbmQCAw9kFgJmD2QWAmYPZBYCZg8WAh8AAgMWBgIBD2QWAgIBD2QWAmYPZBYCZg9kFgICAQ9kFggCAw8WAh8HBQ9DSU8gc3VydmV5IDIwMTNkAgcPFgIfBwUdQ0lPcyBmZWVsaW5nIGRpc3J1cHRpb24td2VhcnlkAgkPFgIfBwVdRGlzcnVwdGl2ZSB0ZWNobm9sb2dpZXMgYXJlIG5vdGhpbmcgbmV3LCBidXQgQ0lPcyBzdGlsbCB3cmVzdGxlIHdpdGggaG93IHRvIGFjaGlldmUgYmVuZWZpdHMuZAILDxYGHwQFSC9pc3N1ZXMvbGlicmFyeS9zdXJ2ZXktcmVwb3J0cy9hZHZpc29yeS8yMDEzL0JBUy1CQy0yMDEzLUNJTy1TdXJ2ZXkuYXNweB8FBQVfc2VsZh8GBZ4BWydEQ1MuZGNzdXJpJywgJy9pc3N1ZXMvbGlicmFyeS9zdXJ2ZXktcmVwb3J0cy9hZHZpc29yeS8yMDEzL0JBUy1CQy0yMDEzLUNJTy1TdXJ2ZXkuYXNweCddLCBbJ1dULnRpJywgJ1JlYWQlMjB0aGUlMjBleGVjdXRpdmUlMjBzdW1tYXJ5X1Byb21vQmxvY2szQ29sdW1uQ1RBJ10WAgIBDxYCHwcFGlJlYWQgdGhlIGV4ZWN1dGl2ZSBzdW1tYXJ5ZAICD2QWAgIBD2QWAmYPZBYCZg9kFgICAQ9kFggCAw8WAh8HBS1TRUMgbGF1bmNoZXMgbmV3IHJlcG9ydGluZywgYXVkaXQgdGFzayBmb3JjZSBkAgcPFgIfBwUbU3RyZW5ndGhlbmluZyBlbmZvcmNlbWVudCAgZAIJDxYCHwcFWlRoZSBTRUMgaXMgbWFraW5nIGEgY29uY2VydGVkIGVmZm9ydCB0byBlbnN1cmUgaW50ZXJuYWwgY29udHJvbHMgYXJlIGluIHBsYWNlIGFuZCB3b3JraW5nLmQCCw8WBh8EBUMvaXNzdWVzL2xpYnJhcnkvYWxlcnRzL2Fkdmlzb3J5LzIwMTMvRklEUy1TRUMtdGFzay1mb3JjZS1hbGVydC5hc3B4HwUFBV9zZWxmHwYFiwFbJ0RDUy5kY3N1cmknLCAnL2lzc3Vlcy9saWJyYXJ5L2FsZXJ0cy9hZHZpc29yeS8yMDEzL0ZJRFMtU0VDLXRhc2stZm9yY2UtYWxlcnQuYXNweCddLCBbJ1dULnRpJywgJ1JlYWQlMjB0aGUlMjBhbGVydF9Qcm9tb0Jsb2NrM0NvbHVtbkNUQSddFgICAQ8WAh8HBQ5SZWFkIHRoZSBhbGVydGQCAw9kFgICAQ9kFgJmD2QWAmYPZBYCAgEPZBYIAgMPFgIfBwUoRm9jdXMgb24gZ292ZXJuYW5jZSwgcmlzayBhbmQgY29tcGxpYW5jZWQCBw8WAh8HBRdFbnN1cmluZyBhY2NvdW50YWJpbGl0eWQCCQ8WAh8HBWhZb3VyIG9yZ2FuaXphdGlvbiBpcyBhY2NvdW50YWJsZSBmb3IgYWNjdXJhY3kgYW5kIGludGVncml0eS4gRWZmZWN0aXZlIGdvdmVybmFuY2UgYW5kIGNvbXBsaWFuY2UgaXMga2V5LmQCCw8WBh8EBT8vc2VydmljZXMvYWR2aXNvcnktc2VydmljZXMvZ292ZXJuYW5jZS1yaXNrLWFuZC1jb21wbGlhbmNlLmFzcHgfBQUFX3NlbGYfBgWBAVsnRENTLmRjc3VyaScsICcvc2VydmljZXMvYWR2aXNvcnktc2VydmljZXMvZ292ZXJuYW5jZS1yaXNrLWFuZC1jb21wbGlhbmNlLmFzcHgnXSwgWydXVC50aScsICdMZWFybiUyMG1vcmVfUHJvbW9CbG9jazNDb2x1bW5DVEEnXRYCAgEPFgIfBwUKTGVhcm4gbW9yZWRkMCMqpB8a4om/5PbKp41EiHmgHrjePv8GlTUue76WQXA=" /> </div> <div class="aspNetHidden"> <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKXlPuVDwK0rpedAwLw0uDLDpU7BX9OhaVlKEwQ1FQrHd31z1t+XLhGOUbLldRVXUY1" /> </div> <div class="wrapper"> <div class="primary-nav-panel" style="left: 0px; top: 0px"> <div class="left-mobile-wrapper"> <nav class="primary-nav"> <ul> <li><a href="/issues.aspx">By Business Issue</a><div class="primary-nav-sub-menu-2"><ul class="column"><li><a href="/issues/driving-growth.aspx"> Strategy</a></li><li><a href="/issues/bankruptcy-and-restructuring.aspx"> Cost Reduction</a></li><li><a href="/issues/compensation-and-benefits.aspx"> Supply Chain Solutions</a></li><li><a href="/issues/health-care-reform.aspx"> Mergers and Acquisitions / Business Combinations / Divestitures</a></li><li><a href="/issues/managing-risk.aspx"> Employee Retention</a></li><li></ul><ul class="column"><li><a href="/issues/mergers-and-acquisitions.aspx"> Litigation and Fraud</a></li><ul class="productnav"><li>Menu 1</li><li>Menu 2</li></ul></li><li> </ul></div></li> <li><a href="#">By Service Line</a><div class="primary-nav-sub-menu-3"><ul class="column"><li><a href="/services/advisory-services.aspx"> Advisory</a><ul><li><a href="/services/advisory-services/business-consulting.aspx"> Business Advisory Services</a></li></ul><ul><li><a href="/services/advisory-services/forensic-investigative-and-dispute-services.aspx"> Corporate Advisory and Restructuring</a></li></ul><ul><li><a href="/services/advisory-services/governance-risk-and-compliance.aspx"> Forensic and Valuation Services</a></li></ul><ul><li><a href="/services/advisory-services/restructuring-and-turnaround.aspx"> Transaction Services </a></li></ul><li></ul><ul class="column"><li><a href="/services/audit-services.aspx"> Audit</a><ul><li><a href="/services/audit-services/employee-benefit-plan-audits.aspx"> Employee Benefit Plan Audit</a></li></ul><ul><li><a href="/services/audit-services/financial-statement-audit-services.aspx"> Government Audit</a></li></ul><ul><li><a href="/services/audit-services/fresh-start-accounting.aspx"> IFRS </a></li></ul><li></ul><ul class="column"><li><a href="http://ksource.gt.com/cop/ServiceLine/Tax/Pages/Home.aspx"> Tax</a><ul><li><a href="http://ksource.gt.com/cop/ServiceLine/Tax/CompensationandBenefitsConsulting/Pages/Home.aspx"> Compensation and Benefits Consulting</a></li></ul><ul><li><a href="/services/tax-services/international-tax-services.aspx"> Corporate SFTS </a></li></ul><ul><li><a href="/services/tax-services/international-tax-services.aspx"> International Tax Services</a></li></ul><ul><li><a href="/services/tax-services/private-wealth-services.aspx"> Private Wealth Tax Services</a></li></ul><ul><li><a href="/services/tax-services/state-and-local-tax-services.aspx"> State and Local Tax </a></li></ul><ul><li><a href="/services/tax-services/tax-accounting-and-risk-advisory-services.aspx"> Tax accounting and Risk Advisory </a></li></ul><li></ul></div></li><li> <li><a href="#">By Industry Sector</a><div class="primary-nav-sub-menu-2"><ul class="column"><li><a href="/issues/driving-growth.aspx"> Consumer and Industrial Products</a></li><li><a href="/issues/bankruptcy-and-restructuring.aspx"> Technology</a></li><li><a href="/issues/compensation-and-benefits.aspx"> Financial Services</a></li><li><a href="/issues/health-care-reform.aspx"> Health Care</a></li><li><a href="/issues/managing-risk.aspx"> Construction</a></li><li></ul><ul class="column"><li><a href="/issues/mergers-and-acquisitions.aspx"> Real Estate</a></li><li><a href="/issues/compensation-and-benefits.aspx"> Energy</a></li><li> </ul></div></li> </ul> </nav> <div class="body-wrapper"> <div class="view-pane-handler"> </div> <header> <div class="header-wrapper"> <div class="bp-top-bar bp-fluid"> <a class="main-logo" href="/"> <img src="logodesktop%20455%20x%2049.png"> </a> </header> </select> </div> </div> <a href="/" class="main-logo"> </a><nav class="secondary-nav"></nav></div> </header> <div id="main_1_maincontainer_1_IDCarousel" class="carousel carousel-infinite carousel-wide" data-idle="3000" data-animationSpeed="500"> <div class="carousel-wrapper"> <div class="carousel-master"> <ul class="carousel-slide-container"> <li class="carousel-slide"> <div id="main_1_maincontainer_1_CarouselRepeater_slideDiv_0" class="carousel-template-a"> <div id="main_1_maincontainer_1_CarouselRepeater_slideTextDiv_0" class="text" style="left: 0px; top: 0px"> <h1> <div class="line-1"> Change is underway </div> <div class="line-2"> </div> </h1> </div> </div> </li> <li class="carousel-slide"> <div id="main_1_maincontainer_1_CarouselRepeater_slideDiv_1" class="carousel-template-a"> <div id="main_1_maincontainer_1_CarouselRepeater_slideTextDiv_1" class="text"> <h1> <div class="line-1"> Business interruptions: </div> <div class="line-2"> How to manage the unavoidable </div> </h1> <p> A disaster can strike indirectly - and still affect your business. Our article explains what are the 3 mistakes to avoid and the 5 simple steps that will save your company money. </p> <div> <a href="/issues/library/articles/construction/2013/08-business-interruptions.aspx" id="main_1_maincontainer_1_CarouselRepeater_CTALink_1" class="links-text-box green" target="_blank" data-webtrends-multi="['DCS.dcsuri', '/issues/library/articles/construction/2013/08-business-interruptions.aspx'], ['WT.ti', 'Get%20insights_CarouselSlideCTA']"> Get insights </a> </div> </div> </div> </li> <li class="carousel-slide"> <div id="main_1_maincontainer_1_CarouselRepeater_slideDiv_2" class="carousel-template-a"> <div id="main_1_maincontainer_1_CarouselRepeater_slideTextDiv_2" class="text"> <h1> <div class="line-1"> Hedge funds </div> <div class="line-2"> fight back </div> </h1> <p> The rate of new fund launches demonstrates the resiliency of fund managers and their ability to adapt. </p> <div> <a href="/issues/library/articles/financial-services/2013/AM-07-Hedge-funds-fight-back.aspx" id="main_1_maincontainer_1_CarouselRepeater_CTALink_2" class="links-text-box green" target="_self" data-webtrends-multi="['DCS.dcsuri', '/issues/library/articles/financial-services/2013/AM-07-Hedge-funds-fight-back.aspx'], ['WT.ti', 'Get%20the%20full%20report_CarouselSlideCTA']"> Get the full report </a> </div> </div> </div> </li> <li class="carousel-slide"> <div id="main_1_maincontainer_1_CarouselRepeater_slideDiv_3" class="carousel-template-a"> <div id="main_1_maincontainer_1_CarouselRepeater_slideTextDiv_3" class="text"> <h1> <div class="line-1"> Reason says: bigger is better </div> <div class="line-2"> Instinct says: nimble is better for growth </div> </h1> <p> </p> <div> </div> </div> </div> </li> </ul> <div class="carousel-controls-wrapper"> <div class="carousel-controls"> <a href="#" class="carousel-arrow-left"></a> <ul class="carousel-controls-dot-list"> </ul> <a href="#" class="carousel-arrow-right"></a> </div> </div> </div> </div> </div> <!-- Component: Primary Call to Action Bar (Container) --> <!-- End Component: Primary Call to Action Bar --> <div class="content-wrapper"> <!-- DROPZONE AREA 1 START --> <div class="feature-area"> </div> <!-- DROPZONE AREA 1 END --> </div> <footer> <div class="footer-wrapper"> <div class="footer-links"> <nav> <div class="title"> </nav> <nav> <div class="title">Popular links</div> <ul> <li><a href="http://ksource.gt.com/cop/ICS/ClientExperience/Pages/Home.aspx">Contact us</a></li> </ul> </nav> </div> <div class="footer-legal"> </div> </div> </footer> </div> </div> </footer> </div> </div> <script type="text/javascript"> //<![CDATA[ var theForm = document.forms['mainLayoutForm']; if (!theForm) { theForm = document.mainLayoutForm; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } //]]> </script> <script src="/WebResource.axd?d=1gD8F5qPVa0LvNMQUnk6L4E9Z6TAB6ASHtlXH8MhkvMxFFymI1PxR5uiV2KDdqTOibzU0FLOQZBV8LVBvD4GpFW-sPvxvjODSX7AZ0Vr5xc1&t=634940402065912398" type="text/javascript"></script> </form> <script src="/static/js/gt.libs.min.js"></script> <script src="/static/js/gt.app.js"></script> <script src="/static/scripts/webtrends.load.js"></script> <script src="/static/js/init.homepage.js"></script> </body> </html> HTML:
Here's the CSS (part 1): body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0 none; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; } ol, ul { list-style: none outside none; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } q:before, q:after { content: ""; } abbr, acronym { border: 0 none; font-variant: normal; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; } input, textarea, select { } legend { color: #000000; } #yui3-css-stamp.cssreset { display: none; } html { background: none repeat scroll 0 0 #FFFFFF; } a { color: #8E9300; text-decoration: none; } a img { border: 0 none; } a, input { outline: medium none; } p { color: #444444; font: 13px/18px helvetica,arial,sans-serif; } p a { text-decoration: underline; } strong { font-weight: bold; } em { font-style: italic; } h1 { color: #563783; font: bold 20px/26px georgia,serif; } h1 .alt-1 { color: #8E9300; } h1.x-large { font: 33px/38px georgia,serif; } h1.x-large.standalone { padding-bottom: 20px; padding-top: 20px; } h2 { font: bold 16px/18px georgia,serif; } h2.light { color: #FFFFFF; } h3 { color: #FFFFFF; font: 16px/20px georgia,serif; } h4 { color: #444444; font: bold 13px/18px helvetica,arial,sans-serif; } h5 { color: #444444; font: bold 15px/24px helvetica,arial,sans-serif; } h6 { color: #FFFFFF; } h1.grey, h2.grey, h3.grey, h4.grey, h5.grey, h6.grey { color: #444444; } h1.purple, h2.purple, h3.purple, h4.purple, h5.purple, h6.purple { color: #563783; } h1.green, h2.green, h3.green, h4.green, h5.green, h6.green { color: #8E9300; } .sans-serif { font-family: helvetica,arial,sans-serif; } .lineheight-20 { line-height: 20px; } .inline-icon { display: inline-block; position: relative; } .inline-single { display: block; } .normalize-links a { color: #444444; text-decoration: none; } .normalize-links a:hover { color: #8E9300; text-decoration: underline; } .third-party-iframe { border: 0 none; display: block; height: 600px; margin: 0 auto; max-width: 980px; width: 100%; } .bp-mobile, .bp-mobile-only { display: none; } .bp-ignore-mobile { display: block; } .ie7, .ie8, .ie9 { min-width: 1024px; } .content-wrapper, .header-wrapper, .primary-nav-panel, .footer-wrapper { margin: 0 auto; width: 980px; } header { border-bottom: 1px solid #DFDFDF; height: 143px; } .ie7 header { position: relative; z-index: 10; } .primary-nav-panel { position: relative; } .ie7 .primary-nav-panel { z-index: 10; } } .main-logo { display: block; float: left; margin: 28px 0 0; } .main-logo img { display: block; } .ie7 .primary-nav-panel { height: 0; } .primary-nav { position: absolute; top: 100px; } .primary-nav > ul { background: url("/images/nav.desktop.sprite.png") no-repeat scroll 100% 5px rgba(0, 0, 0, 0); float: left; padding: 0 2px 0 0; width: auto; } .primary-nav > ul > li { background: url("/images/nav.desktop.sprite.png") no-repeat scroll 0 5px rgba(0, 0, 0, 0); float: left; padding: 0 3px 0 5px; width: auto; } .primary-nav > ul > li > a { color: #563783; display: block; font: bold 16px/43px helvetica,arial,sans-serif; padding: 0 13px; text-transform: uppercase; } .primary-nav > ul > li:hover > a, .primary-nav > ul > li.active > a { background: url("/images/nav.desktop.sprite.png") repeat-x scroll 0 -40px rgba(0, 0, 0, 0); color: #8E9300; } .touch-nav-wrapper { display: none; } .secondary-mobile-nav { display: none; } .secondary-nav > ul { position: absolute; right: 6px; top: 53px; } .secondary-nav > ul > li { border-left: 1px solid #999999; display: inline-block; float: left; font: 11px/10px helvetica,arial,sans-serif; height: 10px; margin: 0 0 0 10px; padding: 0 0 0 10px; } .secondary-nav > ul > li:first-child { border-left: 0 none; padding-left: 0; } } .secondary-nav > ul > li > a { color: #999999; display: block; float: left; width: auto; } .secondary-nav > ul > li.active a, .secondary-nav > ul > li a:hover { color: #8E9300; text-decoration: underline; } .ie7 .secondary-nav > ul { top: -25px; } .content-wrapper { padding: 50px 0; } footer { background: none repeat scroll 0 0 #563783; border-top: 7px solid #5E3B91; } footer nav { color: #FFFFFF; display: block; font: bold 14px/22px helvetica,arial,sans-serif; overflow: hidden; padding: 0 0 14px; } footer nav a, footer nav .title, footer nav li { float: left; width: auto; } footer nav ul { float: left; padding: 0 0 0 20px; width: 640px; } footer nav a { margin: 0 16px 0 0; } footer nav a:hover { text-decoration: underline; } footer nav .title { text-align: right; width: 135px; } footer nav a { color: #A271CC; display: block; } .footer-links { border-bottom: 1px solid #351D58; padding: 10px 0 15px; } .mobile-breadcrumb { display: none; } @[USER=124521]media[/USER] only screen and (max-width: 979px) { html { } html, body { min-width: 100%; } .bp-desktop { display: none; } .bp-fluid { background: none repeat scroll 0 0 #FF0000; display: block; } .header-wrapper { width: 100%; } .content-wrapper { padding: 30px 20px; width: auto; } h2 { font: bold 14px/18px georgia,serif; } .bp-mobile { display: block; } html { background: none repeat scroll 0 0 #140627; } html, body { width: 100%; } html, body, .wrapper { overflow-x: hidden; } .wrapper { height: 100%; margin-left: -100%; position: relative; width: 200%; } .primary-nav-panel, .body-wrapper { width: 50%; } .primary-nav { display: none; } .touch-nav-wrapper { display: block; } .view-pane-state-1 { height: 1000px; } .view-pane-state-1 body { height: 100%; } .view-pane-state-1 body > form { height: 100%; } .view-pane-state-1 .body-wrapper { height: 700px; min-height: 100%; overflow: hidden; position: relative; } .view-pane-state-1 .view-pane-handler { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 5; } .secondary-mobile-nav { display: block; padding: 10px 0 0; } .secondary-mobile-nav a { color: #FFFFFF; display: block; font: 14px/40px helvetica,arial,sans-serif; padding: 0 28px; } .secondary-mobile-nav a:hover { text-decoration: underline; } .left-mobile-wrapper { float: right; width: 270px; } .primary-nav-panel { overflow: hidden; } .body-wrapper { background: none repeat scroll 0 0 #FFFFFF; position: relative; } .primary-nav-panel { position: static; } .primary-nav-panel, .body-wrapper { float: left; } .secondary-nav { display: none; } header { height: auto; width: 100%; } .bp-top-bar { background: none repeat scroll 0 0 #4F2D7F; height: 55px; overflow: hidden; } .main-logo { display: block; float: none; margin: 0 auto; padding: 18px 0 14px; width: 60%; } .main-logo img { display: block; margin: 0 auto; max-height: 55px; max-width: 445px; width: 90%; } .primary-actions-trigger.icon { background: url("/images/tmp/icon.png") no-repeat scroll 17px 50% rgba(0, 0, 0, 0); display: inline-block; float: left; height: 100%; width: 60px; } .page-title { color: #8E9300; font: bold 18px/42px helvetica,arial,sans-serif; height: 42px; margin: 0 auto; overflow: hidden; text-transform: uppercase; width: 93%; } .page-title span { background: url("/images/tmp/green-arrow.png") no-repeat scroll 0 50% rgba(0, 0, 0, 0); display: inline-block; margin: 0 0 0 8px; padding: 0 0 0 25px; } footer { padding: 0 20px; } footer nav { font: bold 13px/22px helvetica,arial,sans-serif; padding: 15px 0 0; } footer nav .title { display: block; float: none; text-align: left; } footer nav ul { float: none; padding: 0; width: 100%; } footer nav li { float: left; margin: 0; min-width: 140px; } .footer-wrapper { padding: 0; width: auto; } .footer-links { padding: 0 0 12px; } .mobile-breadcrumb { background-image: url("/images/gt.icons.sprite.png"); background-position: 17px -1172px; background-repeat: no-repeat; border-bottom: 1px solid #DFDFDF; box-shadow: 0 0 20px #AAAAAA; display: block; font: bold 18px/36px helvetica,arial,sans-serif; padding: 10px 0 8px 40px; text-transform: uppercase; } } @[USER=124521]media[/USER] only screen and (min-width: 0px) and (max-width: 599px) { .main-logo { height: 32px; width: auto; } .main-logo img { max-height: 32px; width: auto; } .content-wrapper { padding: 15px 20px; } .bp-mobile-only { display: block; } } .grid-span-container { overflow: hidden; } .grid-3col-span { float: left; padding-left: 3%; width: 31.33%; } .ie7 .grid-3col-span { width: 31.3%; } .grid-3col-span:first-child { border-top: 0 none; margin-top: 0; padding-left: 0; padding-top: 0; } .grid-2col-span-widget { overflow: hidden; } .grid-2col-span-widget-left { float: left; width: 227px; } .grid-2col-span-widget-right { float: left; width: 753px; } .grid-site-width { margin: 0 auto; width: 980px; } @[USER=124521]media[/USER] only screen and (max-width: 979px) { .grid-2col-span-widget-left { display: none; } .grid-2col-span-widget-right { float: none; width: 100%; } .grid-site-width { margin: 0 auto; width: 100%; } } .column-control + .grid-span-container, .text-callout-block + .comments-block, .text-callout-block + .grid-span-container, .large-text-callout-block + .grid-span-container, .large-text-callout-block + .comments-block, .large-video + .comments-block, .large-video + .rich-text-block, .large-video + .media-list, .large-audio + .media-list, .rich-text-block + .form-block, .media-list + .comments-block, .media-list + .rich-text-block, .comments-block + .grid-span-container, .comments-block + .tabbed-content-block, .bio-author + .comments-block, .bio-author + .tabbed-content-block, .bio-author + .grid-span-container, .bio-industry-leader + .comments-block, .bio-industry-leader + .tabbed-content-block, .bio-industry-leader + .grid-span-container, .tabbed-content-block + .grid-span-container, .grid-span-container + .tabbed-content-block, .grid-span-container + .carousel-image, .rich-text-block + .grid-span-container, .rich-text-block + .comments-block, .rich-text-block + .tabbed-content-block, .rich-text-block + .search-filters, .rich-text-block + .small-three-column, .rich-text-block + .two-column, .rich-text-block + .people-search-form, .rich-text-block + .tab-col-2, .rich-text-block + .blog-groups, .login-block + .login-block, .login-block + .rich-text-block, .login-block + h1, .login-block + h2, .login-block + p, h1 + .login-block, h2 + .login-block, p + .login-block, .tab-col-2 + .search-results, .people-search-form ~ .feature-spotlight, .people-search-form ~ .people-search-form-results, .feature-spotlight + .people-quote, .read-full-article + .grid-span-container, .read-full-article + .comments-block, .read-full-article + .tabbed-content-block, .search-filters + .search-results, .small-three-column + .small-three-column { border-top: 1px solid #999999; margin-top: 24px; padding-top: 24px; } h1.x-large + .login-block { margin-top: 0; } } .carousel + .primary-cta-bar { padding-top: 20px; } } @[USER=124521]media[/USER] only screen and (max-width: 979px) { .touch-nav-wrapper { overflow: hidden; width: 100%; } .touch-nav-wrapper ul { width: 100%; } .touch-nav-wrapper a { background-color: #220D3F; border-bottom: 1px solid #140627; color: #FFFFFF; display: block; font: bold 14px/20px helvetica,arial,sans-serif; padding: 10px 28px; } .touch-nav-wrapper a:hover { background: none repeat scroll 0 0 #15062B; } .touch-nav-wrapper a.hasChildren { background-image: url("/images/gt.icons.sprite.png"); background-position: 97% -1273px; background-repeat: no-repeat; padding-right: 50px; } .touch-nav-wrapper .touch-nav { position: relative; } .touch-nav-wrapper .touch-nav > li > a { background-color: #351D58; font: bold 18px/20px helvetica,arial,sans-serif; text-transform: uppercase; } .touch-nav-wrapper .touch-nav > li > a:hover { background-color: #220D3F; } .touch-nav-wrapper .touch-nav > li ul { left: 100%; position: absolute; top: 0; } .touch-nav-wrapper .touch-nav-back-items a { background-color: #351D57; background-image: url("/images/gt.icons.sprite.png"); background-position: 28px -1362px; background-repeat: no-repeat; color: #8E9300; font: bold 18px/20px helvetica,arial,sans-serif; padding-left: 47px; } .touch-nav-wrapper .touch-nav-back-items a:hover { background-color: #220D3F; } } .small-wide-bar { background: none repeat scroll 0 0 #351D58; border-top: 2px solid #8E9300; } .small-wide-bar .outer { border-left: 1px solid #1B0B2D; } .small-wide-bar .inner { border-left: 1px solid #4E386C; overflow: hidden; } .small-wide-bar-wrapper { margin: 0 auto; width: 980px; } } @-moz-keyframes buffering-stripes { 0% { background-position: 0 0; } 100% { background-position: 30px 0; } } @-moz-keyframes buffering-stripes { 0% { background-position: 0 0; } 100% { background-position: 30px 0; } } .global-reach-desktop { background: none repeat scroll 0 0 #351D58; border: 2px solid #824BB0; height: 208px; padding: 8px 10px; width: 275px; } .global-reach-continents { float: left; width: 220px; } .global-reach-continents a { color: #B0AFAF; font: bold 13px/23px helvetica,arial,sans-serif; } .global-reach-continents a:hover, .global-reach-continents a.active { color: #FFFFFF; } .global-reach-countries { background: none repeat scroll 0 0 #4F2D7F; display: none; height: 206px; overflow: auto; position: absolute; right: 10px; top: 16px; width: 150px; } .global-reach-countries li { padding: 0 5px; } .global-reach-countries a { border-top: 1px solid #824BB0; color: #999999; display: block; font: 11px/23px helvetica,arial,sans-serif; padding: 0 3px; } .global-reach-countries a:hover { background: none repeat scroll 0 0 #824BB0; color: #FFFFFF !important; } .global-reach-countries li:first-child a { border: 0 none; } .global-reach-desktop-wrapper { margin-top: 10px; padding-top: 6px; position: absolute; right: 0; width: 295px; z-index: 3; } .carousel { height: 391px; overflow: hidden; } .carousel-slide-container { overflow: hidden; position: relative; width: 100%; } .carousel-slide { float: left; height: 391px; overflow: hidden; width: 100%; } .carousel-wide .carousel-wrapper { overflow: hidden; width: 100%; } .carousel-master { overflow: hidden; position: relative; width: 100%; } [class*="carousel-template"] { height: 391px; margin: 0 auto; padding-left: 30px; padding-right: 30px; position: relative; width: 920px; } .carousel-controls-wrapper { bottom: 15px; height: 25px; left: 0; position: absolute; text-align: center; width: 100%; z-index: 2; } .carousel-controls { background: none repeat scroll 0 0 #FFFFFF; border-radius: 5px 5px 5px 5px; display: inline-block; margin: 0 auto; padding: 5px; } .ie7 .carousel-controls { display: none; float: left; overflow: hidden; } [class*="carousel-arrow"] { cursor: pointer; float: left; height: 15px; width: 15px; } [class*="carousel-arrow"]:hover { background-color: #F5F5F5; } .carousel-arrow-left { background-image: url("/images/gt.icons.sprite.png"); background-position: 0 -586px; background-repeat: no-repeat; } .carousel-arrow-right { background-image: url("/images/gt.icons.sprite.png"); background-position: -15px -586px; background-repeat: no-repeat; } .carousel-controls-dot-list { float: left; width: auto; } .carousel-controls-dot-list a { background-image: url("/images/gt.icons.sprite.png"); background-position: 0 -601px; background-repeat: no-repeat; cursor: pointer; display: block; height: 15px; width: 15px; } .carousel-controls-dot-list li { float: left; padding: 0 6px; } .carousel-controls-dot-list li.active a { background-image: url("/images/gt.icons.sprite.png"); background-position: -14px -601px; background-repeat: no-repeat; } .carousel-template-a h1, .carousel-template-b h1 { font: 50px/56px georgia,serif; padding: 52px 0 0; } .carousel-template-a h1 span, .carousel-template-b h1 span { color: #563783; } .carousel-template-a p, .carousel-template-b p { display: inline-block; padding: 12px 0 20px; width: 500px; } .carousel-template-a .text, .carousel-template-b .text { position: relative; z-index: 2; } .carousel-template-a .image, .carousel-template-b .image { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .carousel-template-a .image img, .carousel-template-b .image img { display: block; height: 100%; position: absolute; } .ie7 [class*="carousel-template"] .image, .ie8 [class*="carousel-template"] .image { overflow: hidden; } .carousel-template-a .image img { right: 0; } .carousel-template-b .image img { left: 0; } .carousel-template-a h1 { padding-right: 40%; } .carousel-template-b { text-align: right; } .carousel-template-b h1 { padding-left: 40%; } .carousel-template-b a { float: right; } .carousel-reduced [class*="carousel-template"] { width: auto; } .carousel-reduced [class*="carousel-template"] p { width: 380px; } @[USER=124521]media[/USER] only screen and (max-width: 979px) { .carousel-master { position: static; } .carousel-controls-wrapper { bottom: auto; margin-top: -14px; } .carousel-controls { background: none repeat scroll 0 0 #F5F5F5; } .carousel-controls-dot-list li { padding: 0 3px; } [class*="carousel-arrow"] { display: none; } [class*="carousel-template"] { overflow: hidden; width: auto; } .carousel-template-a p { width: 350px; } } @[USER=124521]media[/USER] only screen and (min-width: 768px) and (max-width: 979px) { .carousel-template-a h1 { padding-right: 40%; } .carousel-template-a p { min-width: 400px; width: 50%; } .carousel-template-b h1 { padding-left: 40%; } .carousel-template-a h1, .carousel-template-b h1 { font: 41px/49px georgia,serif; } } @[USER=124521]media[/USER] only screen and (max-width: 767px) { .carousel, .carousel-slide, [class*="carousel-template"] { height: 300px; } [class*="carousel-template"] h1 { font-size: 30px; line-height: 37px; } [class*="carousel-template"] p { display: none; } .carousel-template-a h1, .carousel-template-b h1 { padding: 45px 0; } .carousel-template-a .image, .carousel-template-b .image { max-height: 300px; } .carousel-template-a { padding-right: 40%; } .carousel-template-b { padding-left: 40%; } } @[USER=124521]media[/USER] only screen and (min-width: 0px) and (max-width: 599px) { .carousel p { display: none; } .carousel h1 { font-size: 26px; line-height: 29px; padding: 30px 0 25px; } .carousel, .carousel-slide, [class*="carousel-template"] { height: 229px; } [class*="carousel-template"] { padding-left: 19px; } .carousel-template-a { padding-right: 32%; } .carousel-template-b { padding-left: 32%; } } .nav > ul > li { position: relative; } .nav > ul > li:hover { padding-bottom: 3px; z-index: 3; } .nav > ul > li:hover [class*="nav"] { display: block; } [class*="nav"] { background: none repeat scroll 0 0 #351D58; border: 2px solid #A486D1; display: none; margin: 3px 0 0 -5px; padding: 13px 17px; position: absolute; z-index: 3; } [class*="nav"] a { color: #FFFFFF; display: inline; float: left; font: 14px/16px helvetica,arial,sans-serif; padding: 11px 0; } [class*="nav"] li { overflow: hidden; } [class*="nav"] > ul > li { border-top: 1px solid #A486D1; margin-top: 5px; padding-top: 5px; } [class*="nav"] > ul > li > a { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAKCAYAAACXDi8zAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2RjEwNEIwMDVGMEIxMUUyQjgzQzgxNUQ5MDc4NDMyOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2RjEwNEIwMTVGMEIxMUUyQjgzQzgxNUQ5MDc4NDMyOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkJBMjM4OTAzNUVFODExRTJCODNDODE1RDkwNzg0MzI5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkJBMjM4OTA0NUVFODExRTJCODNDODE1RDkwNzg0MzI5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+A2fY6QAAAGZJREFUeNpi+P///04gTgBiBmQMIhSB+DYQ56NLgLAUEF8G4jp0CRAWAeKTQNwLxIyMYFkE4APijUB8l4kBFXADsQgQ30E2SgbqiEJkO+SggpnIlqsA8UMgTkN37m4gjkb3IECAAQCGp5+tF8JYPgAAAABJRU5ErkJggg=="); background-position: 100% 50%; background-repeat: no-repeat; padding-right: 15px; } [class*="nav"] > ul > li > a:hover { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAKCAYAAACXDi8zAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2RjEwNEIwNDVGMEIxMUUyQjgzQzgxNUQ5MDc4NDMyOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2RjEwNEIwNTVGMEIxMUUyQjgzQzgxNUQ5MDc4NDMyOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjZGMTA0QjAyNUYwQjExRTJCODNDODE1RDkwNzg0MzI5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjZGMTA0QjAzNUYwQjExRTJCODNDODE1RDkwNzg0MzI5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+1PQuCgAAAIxJREFUeNpiWFR4ZicQJ/z//58BGTMxMDBkAHH14qKz+QxIgBEkCxSUArJ3AvHq2D7jJrgECAAlRYDUViA+AsQlcAmoJB+Q2gjEd5kYUAE3EIN03mFBUi0DpPYD8TSgPf0sUEE5ILUXiPuAgtNBYszKn3xVgPQBIO4ACs6EmQDSAVJRBRRcimwZQIABAGwgO8KhhhghAAAAAElFTkSuQmCC"); } [class*="nav"] > ul > li:first-child { border: 0 none; margin-top: 0; padding-top: 0; } [class*="nav"] ul ul { margin-bottom: 6px; } [class*="nav"] li li { float: left; width: 207px; } [class*="nav"] li li:first-child a { padding-top: 0; } [class*="nav"] li li a { color: #999999; font: 12px/14px helvetica,arial,sans-serif; padding: 5px 0; } [class*="nav"] li li a:hover { text-decoration: underline; } [class*="nav"] .column { float: left; padding-left: 38px; width: 207px; } [class*="nav"] .column:first-child { padding-left: 0; } [class*="nav"] a:hover { color: #A486D1; } .nav-1 { width: 452px; } .nav-2 { width: 697px; } .nav-3 { width: 942px; } } .rich-text-block { font: 13px/18px helvetica,arial,sans-serif; overflow: hidden; padding-top: 15px; } .rich-text-block ul, .rich-text-block ol { color: #444444; font-size: 13px; line-height: 18px; } .rich-text-block ul a, .rich-text-block ol a { text-decoration: underline; } .rich-text-block ul { list-style: disc outside none; } .rich-text-block ol { list-style: decimal outside none; } .rich-text-block li { margin-left: 20px; } .rich-text-block li + li { padding-top: 6px; } .rich-text-block.sans-serif { font-family: helvetica,arial,sans-serif; } .tpl-landing .rich-text-block ul, .tpl-landing .rich-text-block ol { font: 16px/24px georgia,serif; } .tpl-landing .rich-text-block ul li, .tpl-landing .rich-text-block ol li { margin-left: 28px; } .rich-text-block.standalone p { line-height: 24px; } .read-full-article { background: none repeat scroll 0 0 #8E9300; color: #FFFFFF; cursor: pointer; display: block; font: bold 13px/30px helvetica,arial,sans-serif; height: 30px; padding-left: 12px; width: 120px; } Code (markup):
CSS (part 2): @[USER=124521]media[/USER] only screen and (min-width: 0px) and (max-width: 599px) { h1.x-large.standalone { padding: 0; } } .rich-text-block * + table, .rich-text-block * + cite, .rich-text-block * + ul, .rich-text-block * + ol, .rich-text-block * + p, .rich-text-block * + [class*="-background"] { margin-top: 10px; } .rich-text-block strong, .rich-text-block .bold { } .rich-text-block em, .rich-text-block .italic { font-style: italic; } .rich-text-block .purple { color: #563783; } .rich-text-block .gray { color: #444444; } .rich-text-block h3, .rich-text-block .h3 { color: #563783; font: bold 33px/38px georgia,serif; } .rich-text-block h4, .rich-text-block .h4 { color: #444444; font: bold 17px/22px helvetica,arial,sans-serif; } .rich-text-block h5, .rich-text-block .h5 { color: #444444; font: bold 15px/18px helvetica,arial,sans-serif; } .rich-text-block p, .rich-text-block .p { font: 13px/24px helvetica,arial,sans-serif; } .rich-text-block small, .rich-text-block .small, .rich-text-block .disclaimer { display: block; font: italic 12px/22px helvetica,arial,sans-serif; } .rich-text-block * + small, .rich-text-block * + .small { padding-top: 5px; } .rich-text-block [class^="pull-quote"] { color: #8E9300; font: 16px/24px georgia,serif; } .rich-text-block cite, .rich-text-block .cite, .rich-text-block .citation { color: #444444; font: italic 13px/24px helvetica,arial,sans-serif; } .rich-text-block ul { list-style: disc outside none; } .rich-text-block ol { list-style: decimal outside none; } .rich-text-block ul, .rich-text-block ol { font: 13px/24px helvetica,arial,sans-serif; } .rich-text-block [class*="-background"] { padding: 10px; } .rich-text-block .purple-background { background: none repeat scroll 0 0 #B9ABCC; } .rich-text-block .gray-background { background: none repeat scroll 0 0 #EEEFD9; } .rich-text-block ul.dash-list { list-style: none outside none !important; } .rich-text-block ul.dash-list li { margin-left: 0; padding-left: 0; } .rich-text-block ul.dash-list li:before { content: "- "; } .rich-text-block table { width: 100%; } .rich-text-block table td { padding: 10px; } .rich-text-block table td:first-child { padding-left: 0; } .rich-text-block table td:last-child { padding-right: 0; } .rich-text-block .in-copy { color: #444444; } .text-callout-block { padding-top: 10px; } .text-callout-block h2 { color: #563783; } .text-callout-content { background: none repeat scroll 0 0 #EEEFD9; color: #444444; font: 13px/18px helvetica,arial,sans-serif; padding: 20px; } .text-callout-content h2 { padding-bottom: 5px; } .text-callout-cta { overflow: hidden; padding-top: 10px; } .large-text-callout-block { background: url("/images/icon.purple-arrow.large.png") no-repeat scroll 100% 50% #804CAD; color: #FFFFFF; display: block; padding: 17px 56px 17px 17px; text-decoration: none; } .large-text-callout-block .title { display: block; font: bold 16px/18px helvetica,arial,sans-serif; padding-bottom: 4px; } .large-text-callout-block .text { font: 13px/18px helvetica,arial,sans-serif; } .large-text-callout-block:hover { background-color: #351D58; background-image: url("/images/icon.white-arrow.large.png"); color: #FFFFFF; } .is-row .large-text-callout-block { min-height: 60px; } } .carousel-image h1 { padding-bottom: 29px; } .carousel-image .root-wrapper { overflow: hidden; position: relative; width: 100%; } .carousel-image-wrapper { width: 9000px; } [class*="carousel-image-trigger"] { display: block; height: 200px; position: absolute; width: 47px; z-index: 3; } .carousel-image-trigger-right { background: url("/images/ic-arrow-right.png") no-repeat scroll 50% 50% #F5F5F5; margin-left: 734px; } .carousel-image-trigger-left { background: url("/images/ic-arrow-left.png") no-repeat scroll 50% 50% #F5F5F5; margin-left: -51px; } .carousel-container { overflow: hidden; width: 739px; } .carousel-image-item { float: left; padding-right: 5px; position: relative; width: 242px; } .carousel-image-item .image { width: 100%; } .carousel-image-item .image img { display: block; width: 100%; } .carousel-image-item .text { display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; } .carousel-image-item .text p { color: #DDDDDD; font-size: 13px; padding: 38px 13px 10px; } .carousel-image-item .text > div { overflow: hidden; padding-left: 13px; } .carousel-image-item .text > div a { bottom: 25px; position: absolute; } .carousel-image-item .background { background: none repeat scroll 0 0 #000000; display: none; height: 100%; left: 0; opacity: 0.7; position: absolute; top: 0; width: 100%; } .carousel-image-item:hover .background, .carousel-image-item:hover .text { display: block; } .carousel-image-modal { display: none; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 15; } .carousel-image-modal .background { background: none repeat scroll 0 0 #000000; height: 100%; left: 0; opacity: 0.7; position: absolute; top: 0; width: 100%; z-index: 1; } .carousel-image-modal .carousel-image-modal-wrapper { background: none repeat scroll 0 0 #FFFFFF; font: 13px/18px helvetica,arial,sans-serif; margin: 30px auto 0; padding: 15px; position: relative; width: 520px; z-index: 2; } .carousel-image-modal .carousel-image-modal-wrapper img { display: block; width: 100%; } .carousel-image-modal .carousel-image-modal-wrapper p { padding: 10px 0; } .carousel-image-modal .carousel-image-modal-wrapper .slideshow-controls { overflow: hidden; } .carousel-image-modal .carousel-image-modal-wrapper .slideshow-controls .modal-left { float: left; } .carousel-image-modal .carousel-image-modal-wrapper .slideshow-controls .modal-right { float: right; } .carousel-image-modal .carousel-image-modal-close { background: url("/images/modal-close.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); display: block; height: 58px; position: absolute; right: -28px; top: -28px; width: 58px; } @[USER=124521]media[/USER] only screen and (max-width: 979px) { .carousel-image-trigger-right, .carousel-image-trigger-left { display: none; } .carousel-container { overflow-x: scroll; } .carousel-container { width: auto; } } @[USER=124521]media[/USER] only screen and (max-width: 767px) { .carousel-image, .carousel-image-modal { display: none; } } .split-rich-text-block { overflow: hidden; } .split-rich-text-block .left, .split-rich-text-block .right { float: left; width: 46%; } .split-rich-text-block .left { padding-right: 3%; } .split-rich-text-block .right { border-left: 1px solid #C3C3C3; padding-left: 3%; } .split-rich-text-block .rich-text-block { padding-top: 0; } @[USER=124521]media[/USER] only screen and (max-width: 767px) { .split-rich-text-block { overflow: hidden; } .split-rich-text-block .left, .split-rich-text-block .right { float: none; width: auto; } .split-rich-text-block .left { padding-right: 0; } .split-rich-text-block .right { border-left: 0 none; padding-left: 0; } .split-rich-text-block .rich-text-block { padding-top: 0; } .split-rich-text-block.light-divider .right { padding-top: 35px; } } } .tpl-basic-internal .content-wrapper { margin: 0; padding-left: 23px; padding-top: 25px; width: auto; } .ie7 .tpl-basic-internal [class*="carousel-template"] h1, .ie7 .tpl-careers [class*="carousel-template"] h1, .ie8 .tpl-basic-internal [class*="carousel-template"] h1, .ie8 .tpl-careers [class*="carousel-template"] h1 { font: 40px/45px georgia,serif; padding-top: 30px; } @[USER=124521]media[/USER] only screen and (min-width: 980px) { .tpl-basic-internal [class*="carousel-template"] h1, .tpl-careers [class*="carousel-template"] h1 { font: 40px/45px georgia,serif; padding-top: 30px; } } @[USER=124521]media[/USER] only screen and (max-width: 979px) { .tpl-basic-internal .content-wrapper { padding-left: 20px; } } Code (markup):