/***************************************/ /* (c) 2007 Alexander & Associates LTD */ /* PROGRAMMING: */ /* Arlo Bryan Guthrie */ /* arlo/at/arlodesign.com */ /***************************************/ /*************/ /* STRUCTURE */ /*************/ body { margin: 0; background: #4C0000 url(/images/template/body_bg.gif); text-align: center; } #wrapper { margin: 20px auto 30px auto; width: 900px; background-color: #300; border-left: 6px solid #300; border-right: 6px solid #300; } #header { width: 100%; margin: 0; padding: 0; height: 90px; overflow: hidden; background: #600 url(/images/template/header_bg.gif) repeat-x top left; border-bottom: 6px solid #300; text-align: left; z-index: -1; } #news { margin: 0; padding: 15px 0 20px 0; background-color: #633; color: white; text-align: left; } body.home #news { border-top: 6px solid #300; padding-left: 20px; width: 497px; float: left; } #about { /* background-color: #300; margin-right: 560px; padding: 20px 45px 0 45px; float: right;*/ } body.portfolio #content, body.staff #content, body.clients #content { clear: right; width: 670px; float: right; background-color: #633; text-align: left; margin: 0; padding: 0 20px 20px 20px; color: white; } body.portfolio > #content, body.staff > #content, body.clients > #content { width: 670px; } body.contact #content,body.about #content { margin-top: 0; padding: 20px 20px 20px 100px; color: white; text-align: left; background-color: #633; } body.about #content ul { padding: 0 0 0 12px; } body.about #content ul li { list-style-type: disc; padding: 0 0 6px 6px; } #footer { margin: 0; height: 90px; background-color: #600; border-top: 6px solid #300; border-bottom: 6px solid #300; clear: both; position: relative; } * html #footer { height: 78px; } /**************/ /* TYPOGRAPHY */ /**************/ h1 { display: none; } /**** #header */ /**** #nav_primary */ ul#nav_primary { background-color: green; margin: 0; padding: 0; text-align: left; color: white; text-transform: uppercase; display: block; } ul#nav_primary li { display: inline; font: 80% Verdana, sans-serif; } ul#nav_primary li a { margin: 33px 0 0 5px; padding: 2px 5px 0 5px; height: 55px; display: block; float: left; color: white; text-decoration: none; } ul#nav_primary li a:hover { background-color: #900; color: white; } ul#nav_primary li a.home { margin: 0 6px 0 0; padding: 6px 0 0 0; height: 80px; width: 497px; background: transparent url(/images/template/logo.gif) no-repeat top right; color: #600; } ul#nav_primary li a.home:hover { background: transparent url(/images/template/logo.gif) no-repeat top right; color: #600; } /* These declarations are to indicate the current page. The id for the page is in the tag. */ body.portfolio ul#nav_primary li a.portfolio { background-color: #300; } body.clients ul#nav_primary li a.clients { background-color: #300; } body.news ul#nav_primary li a.news { background-color: #300; } body.about ul#nav_primary li a.about { background-color: #300; } body.staff ul#nav_primary li a.about { background-color: #300; } body.contact ul#nav_primary li a.contact { background-color: #300; } /**** #nav_secondary */ ul#nav_secondary { list-style: none inside; margin: 0 0 6px 0; padding: 3px 0; font: 80% Verdana, sans-serif; font-weight: bold; } ul#nav_secondary li { display: inline; padding: 0; margin: 0; } ul#nav_secondary li a { text-decoration: none; padding: 0 .5em; color: #c99; } ul#nav_secondary li a:hover, ul#nav_secondary li a.current { color: white; } ul#nav_secondary li a.left { background: transparent url(/images/template/link_966_left.gif) no-repeat left center; margin-left: 6px; padding-left: 6px; width: 0; overflow: hidden; display: block; float: left; } /**** #nav_tertiary */ #nav_tertiary { width: 180px; float: left; text-align: left; font-family: Verdana, sans-serif; /* margin: 0; font-size: 90%; padding: 20px 0; */ } #nav_tertiary h2 { margin: 0; padding: 0 5px 3px 5px; font: normal normal normal 90% Georgia, serif; color: #c99; border-bottom: 1px solid #633; } #nav_tertiary ul { font-size: 80%; margin: 0; padding: 0; list-style: none; } #nav_tertiary ul li { /* display: block; */ margin: 5px 0; padding: 0 5px 0 5px; } #nav_tertiary ul li a { display: block; /* margin: 0 0 3px 0; padding: 0 25px 3px 0; */ padding-right: 15px; color: #966; text-decoration: none; } #nav_tertiary ul li a:hover { background: transparent url(/images/template/link_966.gif) no-repeat right center; /* margin: 1px 0 3px 0; padding: 0 25px 3px 0; */ } #nav_tertiary ul li.current { background-color: #633; padding-right: 0; padding-bottom: 2px; font-weight: bold; color: white; } #nav_tertiary ul li.current ul { font-weight: normal; font-size: 100%; list-style: none; margin: 0; padding: 0; } #nav_tertiary ul li.current ul li { padding-right: 0; padding-left: 0; margin-right: 3px; } #nav_tertiary ul li.current ul li.current { margin: 1px 6px 1px 0; padding: 1px 0; background: transparent url(/images/template/link_fff.gif) no-repeat right center; color: white; font-weight: bold; } #nav_tertiary ul li.current ul li a { display: block; margin: 1px 3px 0 0; padding: 1px 0; color: #c99; text-decoration: none; } #nav_tertiary ul li.current ul li a:hover { /* margin: 0; padding: 0; */ background: transparent url(/images/template/link_c99.gif) no-repeat right center; } /* CLIENTS, ABOUT US */ body.staff #nav_tertiary ul li.current, body.clients #nav_tertiary ul li.current { padding-bottom: 3px; padding-right: 5px; } body.staff #nav_tertiary ul li.current span, body.clients #nav_tertiary ul li.current span { display: block; background: transparent url(/images/template/link_fff.gif) no-repeat right center; } /**** #images */ /* HOME */ ul#images_fullsize { margin: 0; padding: 0; list-style: none; text-align: left; white-space: nowrap; } body.home ul#images_fullsize, body.about ul#images_fullsize { height: 355px; overflow: hidden; margin: 0; padding: 0; list-style: none; width: 900px; } ul#images_fullsize li { margin: 0; padding: 0; height: 355px; width: 710px; overflow: hidden; position: relative; } body.home ul#images_fullsize li, body.about ul#images_fullsize li { width: 910px; } ul#images_fullsize li div { display: none; position: absolute; top: 0; left: 0; } ul#images_fullsize li div.startup { display: block; } ul#images_fullsize li div.selected { display: block; } ul#images_fullsize li img { margin: 0; padding: 0; } ul#images_fullsize li div.fullsize p { position: absolute; top: 340px; left: 20px; margin: 0; padding: 0; height: 20px; font: 80% Verdana, sans-serif; text-transform: uppercase; font-weight: bold; color: white; } ul#images_fullsize li p .caption { padding: 3px 10px; white-space: nowrap; background-color: #300; } /* PORTFOLIO */ body.portfolio #images, body.staff #images { width: 710px; float: right; background-color: #633; } body.portfolio ul#images_fullsize li p .caption { background-color: #633; } body.portfolio ul#images_fullsize { width: 710px; } ul#images_thumbnails { clear: both; float: right; display: block; width: 670px; text-align: left; margin: 12px 0 0 0; padding: 0px 20px 10px 20px; background-color: #633; border-bottom: 6px solid #300; cursor: pointer; } ul#images_thumbnails li { display: block; margin: 0 15px 0 0; padding: 0; list-style-type: none; float: left; } ul#images_thumbnails li img { border: 1px solid black; } ul#images_thumbnails li.current img { border: 1px solid white; } /**** #content */ #content h2 { font-weight: normal; padding: 0; margin: 20px 0 0 0; font-size: 2em; font: 200% Georgia, serif; } #content h2 .subtitle { display: block; font: 45% Verdana, sans-serif; } #content ul { list-style: none; width: 325px; padding-left: 0; margin-left: 0; } #content ul li { list-style-type: none; clear: both; margin: 0; padding: 15px 0 0 0; } #content h3 { font: 105% Georgia, serif; float: left; width: 90px; margin: 0; padding: 0; } #content .twocolumn p { font: 75%/150% Verdana, sans-serif; width: 215px; float: right; margin: 0; padding: 0; } #content .onecolumn{ clear: both; } #content .onecolumn p { font: 75%/150% Verdana, sans-serif; width: 560px; float: right; padding: 0; margin: 0; } #content .twocolumn { clear: both; padding: 0; margin: 0; } #content .twocolumn .leftcolumn { float: left; } #content .twocolumn .rightcolumn { float: right; } /* body.clients */ body.clients #content h2 { font: 105% Georgia, serif; float: left; width: 90px; margin: 0; padding: 0; } body.clients #content p { margin-left: 0; padding-bottom: 1em; font: 80% Verdana, sans-serif; line-height: 170%; color: #ddd; } #content .twocolumn .leftcolumn, #content .twocolumn .rightcolumn { width: 325px; } /* body.about */ body.staff #content h2 { margin-bottom: 1em; } body.staff #content p { margin-right: 80px; font: 80% Verdana, sans-serif; line-height: 170%; color: #ddd; } /* body.contact */ body.contact #content h2 { margin-top: 0; margin-bottom: 1em; } body.contact #content p { margin-left: 0; margin-right: 80px; font: 80% Verdana, sans-serif; line-height: 1.7em; color: #ddd; } /**** #news */ #news h2 { font: normal normal normal 150%/100% Georgia, serif; margin: 0; padding: 0; width: 80px; float: left; } #news h3 { margin: 0 0 0 90px; padding: 3px 10px 3px 10px; font: 90% Verdana, sans-serif; font-weight: normal; background-color: #600; } #news p { margin-left: 90px; padding-right: 10px; font: 80% Verdana, sans-serif; line-height: 170%; color: #ddd; } #news p a { text-decoration: none; } #news p a:link { color: #ddd; border-bottom: 1px dotted #ddd; } #news p a:hover { color: #ddd; border-bottom: 1px solid #ddd; } #news p a:active { color: #fff; border-bottom: 1px solid #fff; } #news p a:visited { color: #bbb; border-bottom: 1px dotted #bbb; } /* For the MORE > links */ #news p a.more { /* padding-right: 10px; */ text-transform: uppercase; color: #ddd; /* background-image: url(/images/template/link_ddd.gif); background-position: right center; background-repeat: no-repeat; */ white-space: nowrap; } #news p a.more:link { border-bottom: 1px dotted #ddd; } #news p a.more:hover { border-bottom: 1px solid #ddd; } /* For the actual News section of the site */ body.news #news h2 { width: 160px; padding-left: 20px; } body.news #news h3 { margin-left: 190px; } body.news #news p { margin-left: 190px; padding-right: 80px; /* margin-right: 80px;*/ } body.news #news a.hover { border-bottom: 1px solid ; } .newsitem { margin-bottom: 20px; } /**** body.home #about */ #about p { width: 305px; margin: 20px 45px 0 0; display: block; float: right; text-align: left; color: #c99; font: 90% Verdana, sans-serif; line-height: 180%; } #about strong { font: 110% Georgia, serif; font-weight: bold; } #about p a.more { /* padding-right: 10px; */ text-transform: uppercase; color: #c99; text-decoration: none; /* background-image: url(/images/template/link_c99.gif); background-position: right center; background-repeat: no-repeat; */ border-bottom: 1px dotted #c99; white-space: nowrap; } #about p a.more:hover { border-bottom: 1px solid #c99; } /* CONTACT */ body.contact form { display: block; margin-top: 2em; padding-bottom: 2em; } body.contact form label { display: block; font: 14px Georgia, serif; float: left; width: 100px; margin: 0 0 .75em 0; padding: 0 15px 0 0; clear: both; } body.contact form input { display: block; float: left; } body.contact form input#submit { margin: 1em 0 1em 115px; } body.contact form br { clear: left; } /**** #footer */ #footer p { margin: 0 0 0 0; padding: 0; text-align: left; font: .65em Verdana, sans-serif; line-height: 135%; color: #c99; position: absolute; right: 30px; top: 14px; } #footer a:link, #footer a:visited { color: #c99; border-bottom: 1px dotted #c99; text-decoration: none; } #footer a:hover, #footer a:active { color: #c99; border-bottom: 1px solid #c99; text-decoration: none; } body.portfolio div#nav_tertiary { overflow: hidden; } body.portfolio div#nav_tertiary ul ul { margin: 0 0 0 18px; font-size: 11px; list-style-type: disc; }