/* Thank you for showing interest in my style sheet. You are free to adapt these styles to your specific needs. However, these particular combinations of styles are the property of blinded by design. */ /* General style declarations */ body { margin: 0; padding: 0; text-align: center; font-size: 100%; } /* Centered content container */ #container { margin: 0 auto; width: 770px; position: relative; text-align: left; } /* Logo image holder for top of pages */ div.logo { float: left; position: relative; } /* Classes for the top navigation links */ #topnav { width: 429px; height: 38px; margin: 0; padding: 0; position: absolute; top: 0; left: 220px; } #topnav ul { list-style-type: none; margin: 0; padding: 0; } #topnav ul li { float: left; margin: 0; padding: 0; } #topnav ul li a { background-image: url(../i/topnav.gif); height: 38px; display: block; } a#work { background-position: 0 0; width: 65px; } a#about { background-position: -65px 0; width: 75px; } a#clients { background-position: -140px 0; width: 84px; } a#recognition { background-position: -224px 0; width: 122px; } a#contact { background-position: -346px 0; width: 83px; } a#work:hover, a#workon { background-position: 0 -36px; width: 65px; } a#about:hover, a#abouton { background-position: -65px -36px; width: 75px; } a#clients:hover, a#clientson { background-position: -140px -36px; width: 84px; } a#recognition:hover, a#recognitionon { background-position: -224px -36px; width: 122px; } a#contact:hover, a#contacton { background-position: -346px -36px; width: 83px; } /* This is the version with the same color for all rollovers in a section #topnav ul li.work a { background-image: url(../i/topnav_o.gif); height: 38px; display: block; } #topnav ul li.about a { background-image: url(../i/topnav_b.gif); height: 38px; display: block; } #topnav ul li.clients a { background-image: url(../i/topnav_r.gif); height: 38px; display: block; } #topnav ul li.recognition a { background-image: url(../i/topnav_g.gif); height: 38px; display: block; } #topnav ul li.contact a { background-image: url(../i/topnav_p.gif); height: 38px; display: block; } Default button states with segmentation a#work, a#workb, a#workr, a#workg, a#workp { background-position: 0 0; width: 65px; } a#about, a#aboutb, a#aboutr, a#aboutg, a#aboutp { background-position: -65px 0; width: 75px; } a#clients, a#clientsb, a#clientsr, a#clientsg, a#clientsp { background-position: -140px 0; width: 84px; } a#recognition, a#recognitionb, a#recognitionr, a#recognitiong, a#recognitionp { background-position: -224px 0; width: 122px; } a#contact, a#contactb, a#contactr, a#contactg, a#contactp { background-position: -346px 0; width: 83px; } Hover states with segmentation a#work:hover, a#workb:hover, a#workr:hover, a#workg:hover, a#workp:hover, a#workon { background-position: 0 -36px; width: 65px; } a#about:hover, a#aboutb:hover, a#aboutr:hover, a#aboutg:hover, a#aboutp:hover, a#abouton { background-position: -65px -36px; width: 75px; } a#clients:hover, a#clientsb:hover, a#clientsr:hover, a#clientsg:hover, a#clientsp:hover, a#clientson { background-position: -140px -36px; width: 84px; } a#recognition:hover, a#recognitionb:hover, a#recognitionr:hover, a#recognitiong:hover, a#recognitionp:hover, a#recognitionon { background-position: -224px -36px; width: 122px; } a#contact:hover, a#contactb:hover, a#contactr:hover, a#contactg:hover, a#contactp:hover, a#contacton { background-position: -346px -36px; width: 83px; } */ /* Classes for the left navigation links */ #leftnav { width: 82px; position: absolute; top: 0; left: 0; margin: 117px 0 0 0; padding: 0; } #leftnav ul { list-style-type: none; margin: 0; padding: 0; } #leftnav ul li { list-style-type: none; margin: 0; padding: 0; } #leftnav ul li.work a { background-image: url(../i/leftnav_o.gif); height: 27px; display: block; } #leftnav ul li.about a { background-image: url(../i/leftnav_b.gif); height: 27px; display: block; } #leftnav ul li.clients a { background-image: url(../i/leftnav_r.gif); height: 27px; display: block; } #leftnav ul li.recognition a { background-image: url(../i/leftnav_g.gif); height: 27px; display: block; } #leftnav ul li.contact a { background-image: url(../i/leftnav_p.gif); height: 27px; display: block; } /* Default button states */ a#identity, a#identityb, a#identityr, a#identityg, a#identityp { background-position: 0 0; } a#posters, a#postersb, a#postersr, a#postersg, a#postersp { background-position: 0 -27px; } a#publication, a#publicationb, a#publicationr, a#publicationg, a#publicationp { background-position: 0 -54px; } a#web, a#webb, a#webr, a#webg, a#webp { background-position: 0 -82px; } a#whatever, a#whateverb, a#whateverr, a#whateverg, a#whateverp { background-position: 0 -109px; } /* Hover states */ a#identity:hover, a#identityb:hover, a#identityr:hover, a#identityg:hover, a#identityp:hover, a#identityon { background-position: -83px 0; } a#posters:hover, a#postersb:hover, a#postersr:hover, a#postersg:hover, a#postersp:hover, a#posterson { background-position: -83px -27px; } a#publication:hover, a#publicationb:hover, a#publicationr:hover, a#publicationg:hover, a#publicationp:hover, a#publicationon { background-position: -83px -54px; } a#web:hover, a#webb:hover, a#webr:hover, a#webg:hover, a#webp:hover, a#webon { background-position: -83px -82px; } a#whatever:hover, a#whateverb:hover, a#whateverr:hover, a#whateverg:hover, a#whateverp:hover, a#whateveron { background-position: -83px -109px; } /* Body content for non-Flash sections */ #flashcontent { position: relative; left: 80px; top: -68px; text-align: left; padding: 0; height: 550px; } #intro { height: 667px; } #content { height: 550px; margin: 0 0 0 108px; padding: 0; text-align: left; font: 12px/18px Georgia, "Times New Roman", Times, serif ; } #content ul { margin: 0; padding: 0; } #content ul li { margin: 0; padding: 0; list-style-type: none; } #content a:link, a:visited { color: #000; text-decoration: none; } #content a.purple:hover { color: #AC0B88; } #content a.inline:link, a.inline:visited { font-family: Verdana, Arial, Helvetica, sans-serif; color:#008BC9; text-decoration: none; font-size: 11px; } #content #left { float: left; width: 43.5%; padding: 0 15px 0 0; margin: 0; } #content img.visual { position: relative; left: -6px; } #content #right { float: left; width: 45%; } #content ul { padding: 0; margin: 0; } #content ul li { padding: 0; margin: 0; height: 18px; } #content p { margin: 0 0 10px 0; padding: 0; } #content td.label { width: 40px; font-style: italic; } #content .text { margin: 0; padding: 0; } /* Home Footer */ #footerhome { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #666; float: left; padding: 0; margin-left: 108px; text-align: left; } #footerhome a:link, a:visited { color: #666; text-decoration: none; } #footerhome a:hover { color: #FFF; } /* Footer */ #footer { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000; padding: 0; margin-left: 108px; text-align: left; } #footer a:link, a:visited { color: #000; text-decoration: none; } #footer a.orange:hover { color: #E47407; } #footer a.blue:hover { color: #0A8CBE; } #footer a.red:hover { color: #E60000; } #footer a.green:hover { color: #99CC00; } #footer a.purple:hover { color: #AC0B88; }