/* Global ------------------------------------------------------------------------------------*/ html { height:100%; } body { margin:0; color:#444; font:13px arial, helvetica, sans-serif; height:100%; min-width:1000px; } h1, h2, h3, h4, h5, ul, ol, li, p, div, table, th, td { margin:0; padding:0; } td { vertical-align:top; } img { border-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } input, textarea, select { font:100% arial, sans-serif; vertical-align:middle; } form, fieldset { margin:0; padding:0; border-style:none; } form td label { float:right; } /*---GlobalEnd---*/ /* Classes ------------------------------------------------------------------------------------*/ .clear { clear:both; } .float { float:left; } img.float { margin: 0 20px 30px 0; } .vAlign { vertical-align:middle; } /* Main ------------------------------------------------------------------------------------*/ #main { min-height:100%; } * html #main { height:100%; } .content-holder { margin:0 265px 0 0; } .container { width:98%; float:right; padding: 0 0 2em 10px; } .page-holder { width:100%; overflow:hidden; margin:0 0 0 auto; max-width:1245px; } /*---MainEnd---*/ /* Header ------------------------------------------------------------------------------------*/ #header { /*overflow hidden necessary for ie6 */ /*height:215px;*/ height:1%; overflow:hidden; position:relative; width: 100%; } #header h1 { font-family:"arial black", arial, tahoma, sans-serif; font-weight:bold; width:632px; height:120px; margin:97px 0 0 0; background:url(../images/main-title.png) no-repeat; text-indent:-9999px; } /* Subnavigation ------------------------------------------------------------------------------------*/ .lavaLamp { list-style:none; margin:0 0 1.5em 0; /*width:100%;*/ padding:3px 10px 0 5px; overflow: hidden; position: relative; background:url(../images/lava-bg-fade.png) no-repeat right top;float:left; } /* Force the list to flow horizontally */ .lavaLamp li { float: left; } /* Represents the background of the highlighted menu-item. */ .lavaLamp li.back { background: url(../images/lava.gif) no-repeat right -30px; width: 9px; height: 22px; z-index: 8; position: absolute; } .lavaLamp li.back .left { background: url(../images/lava.gif) no-repeat top left; height: 22px; margin-right: 9px; } /* Styles for each menu-item. */ .lavaLamp li a { position: relative; overflow: hidden; text-decoration: none !important; /*text-transform: uppercase;*/ outline: none; text-align:center; font-size:12px; line-height:16px; padding:0 0 5px; z-index:10; float:left; margin:0 5px; white-space:nowrap; font-weight:bold; } .lavaLamp li.current a, .lavaLamp a:hover { color:#000 !important; } /*---HeaderEnd---*/ /* Content ------------------------------------------------------------------------------------*/ #home #content { padding:0 !important; } #content { line-height:18px; height:1%; overflow:hidden; position: relative; padding:0 30px 0 0; } #content h1 { font-family:tahoma, helvetica, arial, sans-serif; font-weight: bold; font-size: 40px; line-height: 1em; margin:0 0 .5em 0; } #content h2 { font-family:tahoma, helvetica, arial, sans-serif; font-weight: normal; font-size: 30px; line-height: 1em; margin:0; } #content p { margin:0 0 18px; text-align:justify; } #content a { text-decoration:underline; } #content a:hover { text-decoration:none; } #content ul, #content ol { padding:0 0 1em 0; } #content ul ul, #content ol ol { margin:0.5em 0 0 1.2em; padding:0; } #content li { margin:0 0 0.3em; background: url(../images/bullet.png) no-repeat left 6px; list-style: none; padding-left: 15px; } #content li li { list-style-position:outside; list-style:circle; margin-left:1em; background:none; } #content .holder { } #content .holder h2 { font-size:1.5em;font-weight:normal;line-height:32px;margin:0;} #content .holder h3 { font-size:1em; font-weight:bold; line-height:18px; margin:0; text-transform: uppercase; } #content .section { clear: both; margin: 0px; } #content .fullpage { clear:both; } #content .withThumbs .section { padding: 0 0 1.5em 120px; clear:both; } #content .withThumbs .section h1 { margin-left: -120px; } #content .withThumbs .section img { margin :8px 0 18px -120px; float:left; } #content .withThumbs .section .nofloat { float:none; margin:0; } #content .withImages .section { padding: 0 0 1.5em 220px; clear:both; } #content .withImages .section h1 { margin-left: -220px; } #content .withImages .section img { margin:0.3em 0 18px -220px; float: left; } #content .withImages .section .nofloat { float:none; margin:0; } #content .rightImages .section { padding-left: 0; } #content .rightImages .section h1 { margin-left: 0; } #content .rightImages .section img { margin:8px 50px 18px 50px; float: right; } #content .withScreen .section { padding: 0 0 1.5em 420px; clear:both; } #content .withScreen .section h1 { margin-left: -420px; } #content .withScreen .section img { margin:0.3em 0 18px -420px; float: left; } #content .withVideo .section { padding: 0 0 1em 455px; clear:both; } #content .withVideo .section h1 { margin-left: -455px; } #content .withVideo .section object { margin:0.3em 0 18px -455px; float: left; } #content .withVideoSmall .section { padding: 0 0 1em 320px; clear:both; } #content .withVideoSmall .section h1 { margin-left: -320px; } #content .withVideoSmall .section object { margin:0.3em 0 18px -320px; float: left; } #content .column { width:33%; float:left; text-align:justify; } #content .column .cont { padding:0 10px 1.5em 0; } #content .column img, #content .4column img { text-align:center; display:block; margin:0 auto 20px auto; } form #contact { background: #f2efe9; width: 100%; border:1px solid #bdb2a1; } form #contact label { font-weight: bold; text-align: right; white-space: nowrap; display: block; } form #contact span { color: #C00; font-weight: normal; } form #contact input, form #contact textarea { width: 95%; } form #contact .button { font-weight: bold; color: #FFF; background: #6595A3; border-style: none; padding:3px; margin: 0; width: 96%; } form #contact .button:hover { background: #60BCD7; cursor:pointer; } #map { height:355px; position:relative; border:1px solid #bdb2a1; } /* Illustration ------------------------------------------------------------------------------------*/ .site { background:url(../images/ico-home.png) no-repeat left top; padding: 0 0 0 20px; margin:0; display: block; font-weight:bold; } .pdf { background:url(../images/ico-download.png) no-repeat left top; padding: 0 0 0 20px; margin:0; display: block; } .vid { background:url(../images/ico-video.png) no-repeat left top; padding: 0 0 0 20px; margin:0; display: block; } .links { padding:75px 0 0 0; } .links a { margin:0 0 3px 0; } #illy-lhd { width:100%; background:url(../images/illy-lhd.jpg) no-repeat left top; height:188px; } #illy-yctv { width:100%; background: url(../images/illy-yctv.jpg) no-repeat left top; height:208px; } /*---ContentEnd---*/ /* Sidebar ------------------------------------------------------------------------------------*/ #sidebar { float:right; width:255px; padding:0 9px 175px 1px; } .logo { display:block; width:206px; height:100px; padding:20px 0 30px 25px; } .logo a { display:block; width:206px; height:101px; background:url(../images/logo.png) no-repeat; text-indent:-9999px; overflow:hidden; } #sidenav { list-style:none; margin:0; padding:0; font-size:24px; letter-spacing:-1px; line-height:30px; overflow:hidden; width:100%; } #sidenav li { width:255px; float:left; clear:both; overflow:hidden; height:30px; } #sidenav li a { text-transform:uppercase; display:block; padding:0 0 0 17px; outline:none; width:255px; height:30px; } #sidenav li a:hover, #sidenav li:hover a { /*color:#c7dce5;*/ color:#000; text-decoration:none; } #sidenav li a.current { background-position:0px 0px !important; } #sidenav li.purple a { background:url(../images/nav-purple.gif) repeat-y; } #sidenav li.brown a { background:url(../images/nav-brown.gif) repeat-y; } #sidenav li.green a { background:url(../images/nav-dark-green.gif) repeat-y; } #sidenav li.beige a { background:url(../images/nav-beige.gif) repeat-y; } #sidenav li.blue a { background:url(../images/nav-blue.gif) repeat-y; } #sidenav li.pink a { background:url(../images/nav-pink.gif) repeat-y; } #sidenav li.navy a { background:url(../images/nav-beige.gif) repeat-y; } /*Featured Project Area*/ .project { width:245px; margin:75px 0 0 10px; } .project strong { display:block; padding:0 0 4px 5px; color:#c7dce5; font-size:9px; font-weight:normal; } .project a { display:block; } .project img { display:block; } /*---SidebarEnd---*/ /* Footer ------------------------------------------------------------------------------------*/ #footer { width:254px; height:198px; margin:-198px 0 0 auto; position:relative; } #footer p { font-size:11px; line-height:11px; height:22px; color:#694c77; margin:0 0 0 5px; overflow:hidden; } #footer img { display:block; } /*---FooterEnd---*/ /* Color Themes ------------------------------------------------------------------------------------*/ /* STYLE DEFINITIONS #[section] (body) = Content background color & blend #main = Navigation background image and page's left border color #content h2 = Paragraph title Color .container = Content background image #sidenav a = Sidenav link colors #sidenav a.current, #sidenav a:hover = Sidenav link:hover and current page colors #sidenav li.[color] a, #sidenav li.[color] a:hover = Navigation "current" link and hover color .lavaLamp li.back, .lavaLamp li.back .left = Subnav background bubble image .lavaLamp li a = Subnavigation link color COLOR PALETTE Beige #FCFFED Green #B4C186 Blue #76A0AE Pink #CABCBC Brown #936A5C Purple #664D79 */ /* DEFAULT COLORS (BLUE) */ body { background:#F1F6F9 url(../images/body-grad.gif) repeat-x; } #main { background:url(../images/swatches-sm.gif) repeat-y 100% 0; border-left:10px solid #6595a3; } .container { background:url(../images/content-area-bg.jpg) no-repeat 100% 0; } #content h2 { color:#6595a3; } #sidenav a { color:#694c77; } #sidenav a.current { color:#c7dce5; } .lavaLamp li.back, .lavaLamp li.back .left { background-image: url(../images/lava.gif); } .lavaLamp li a { color: #6595a3; } /* ABOUT - BLUE */ #about { background:#f9f7f7 url(../images/body-grad-about.jpg) repeat-x; } #about #main { background:url(../images/swatches-sm-blue.gif) repeat-y 100% 0; border-left:10px solid #CABCBC; } #about #header h1 { background:url(../images/title-about.png) no-repeat left top; } #about .container { background:url(../images/bg-about2.jpg) no-repeat 100% 0; } #about .container a, #about #footer p { color:#167D96; } #about #content .holder h1, #about #content .holder h2 { color:#805C87; } #about #sidenav a { color:#8FBEC6; } /*#about #sidenav a:hover { color:#444; }*/ #about #sidenav li.blue a, #home #sidenav li.blue a:hover, #about #sidenav li.blue a:hover, #contact #sidenav li.blue a:hover, #products #sidenav li.blue a:hover, #presentations #sidenav li.blue a:hover, #services #sidenav li.blue a:hover { color:#ccffff; background-position:0px 0px !important; } #about .lavaLamp li.back, #about .lavaLamp li.back .left { background-image: url(../images/lava-peach.gif); } /* News - BLUE */ #news { background:#f9f7f7 url(../images/body-grad-about.jpg) repeat-x; } #news #main { background:url(../images/swatches-sm-beige.gif) repeat-y 100% 0; border-left:10px solid #CABCBC; } #news #header h1 { background:url(../images/title-about.png) no-repeat left top; } #news .container { background:url(../images/bg-about2.jpg) no-repeat 100% 0; } #news .container a, #news #footer p { color:#167D96; } #news #content .holder h1, #news #content .holder h2 { color:#749169; } #news #sidenav a { color:#FCFFED; } /*#news #sidenav a:hover { color:#444; }*/ #news #sidenav li.navy a, #home #sidenav li.navy a:hover, #news #sidenav li.navy a:hover, #contact #sidenav li.navy a:hover, #products #sidenav li.navy a:hover, #presentations #sidenav li.navy a:hover, #services #sidenav li.navy a:hover { color:#F5BBB3; background-position:0px 0px !important; } #news .lavaLamp li.back, #news .lavaLamp li.back .left { background-image: url(../images/lava-peach.gif); } /* HOME - GREEN */ #home { background:#fcfff0 url(../images/body-grad-home.jpg) repeat-x; } #home #content { padding:0; } #home #main { background:url(../images/swatches-sm-green.gif) repeat-y 100% 0; border-left:10px solid #f7e2e7; } #home #header h1 { background:url(../images/title-home.png) no-repeat left top; } #home .container { background:url(../images/bg-home.jpg) no-repeat 100% 0; min-height:550px; } #home #content h2 { color:#936A5C; } #home #sidenav a, #home #footer p { color:#B4C186; } /*#home #sidenav a:hover { color:#444; }*/ #home #sidenav li.green a, #home #sidenav li.green a:hover, #about #sidenav li.green a:hover, #news #sidenav li.green a:hover, #contact #sidenav li.green a:hover, #products #sidenav li.green a:hover, #presentations #sidenav li.green a:hover, #services #sidenav li.green a:hover { color:#fcffed; background-position:0px 0px !important; } .lavaLamp li.back, .lavaLamp li.back .left { background-image: url(../images/lava-green.gif); } .lavaLamp li a { color: #B4C186; } /* PRESENTATIONS - BEIGE */ #presentations { background:#faf8f8 url(../images/body-grad-presentations.jpg) repeat-x; color:#676767; } #presentations #main { background:url(../images/swatches-sm-beige.gif) repeat-y 100% 0; border-left:10px solid #f5e2e8; } #presentations #header h1 { background:url(../images/title-presentations.png) no-repeat left top; } #presentations .container { background:url(../images/bg-presentations2.jpg) no-repeat 100% 0; min-height:550px; } #presentations .container a { color:#e35da2; } #presentations #content .holder h1, #presentations #content .holder h2 { color:#749169; } #presentations #content .holder h4 { color:#743d4c; font-size:1em; font-weight:bold; } #presentations #sidenav a, #presentations #footer p { color:#FCFFED; } /*#presentations #sidenav a:hover { color:#444; }*/ #presentations #sidenav li.beige a, #home #sidenav li.beige a:hover, #about #sidenav li.beige a:hover, #news #sidenav li.beige a:hover, #contact #sidenav li.beige a:hover, #products #sidenav li.beige a:hover, #presentations #sidenav li.beige a:hover, #services #sidenav li.beige a:hover { color:#f5bbb3; background-position:0px 0px !important; } #presentations .lavaLamp li.back, #presentations .lavaLamp li.back .left { background-image: url(../images/lava-brown.gif); } #presentations .lavaLamp li a { color: #936A5C; } /* PRODUCTS - BROWN */ #products { background:#f5f6f3 url(../images/body-grad-products.jpg) repeat-x; } #products #main { background:url(../images/swatches-sm-tan.gif) repeat-y 100% 0; border-left:10px solid #b6c28b; } #products #header h1 { background:url(../images/title-products.png) no-repeat left top; } #products .container { background:url(../images/bg-products2.jpg) no-repeat 100% 0; } #products .container a { color:#9a6a5c; } #products #sidenav a, #products #footer p { color:#946455; } /*#products #sidenav a:hover { color:#444; }*/ #products #sidenav li.brown a, #home #sidenav li.brown a:hover, #about #sidenav li.brown a:hover, #news #sidenav li.brown a:hover, #contact #sidenav li.brown a:hover, #products #sidenav li.brown a:hover, #presentations #sidenav li.brown a:hover, #services #sidenav li.brown a:hover { color:#FEF1E0; background-position:0px 0px !important; } #products #footer p { color:#9a6a5c; } #products #content .holder h1, #products #content .holder h2 { color:#6595A3; } #products .lavaLamp li.back, #products .lavaLamp li.back .left { background-image: url(../images/lava-green2.gif); } /*Products Page Title Links*/ #products .container .aqua{text-decoration:none;color:#6595A3;} /* SERVICES - PURPLE */ #services { background:#f7fbfd url(../images/body-grad-services.jpg) repeat-x; } #services #main { background:url(../images/swatches-sm-pink.gif) repeat-y 100% 0; border-left:10px solid #6595a3; } #services #header h1 { background:url(../images/title-services.png) no-repeat left top; } #services .container { background:url(../images/bg-services2.jpg) no-repeat 100% 0; } #services .container a { color:#694C77; } #services #sidenav a, #services #footer p { color:#694c77; } /*#services #sidenav a:hover { color:#444; }*/ #services #sidenav li.purple a, #home #sidenav li.purple a:hover, #about #sidenav li.purple a:hover, #about #sidenav li.purple a:hover, #news #sidenav li.purple a:hover, #contact #sidenav li.purple a:hover, #products #sidenav li.purple a:hover, #presentations #sidenav li.purple a:hover, #services #sidenav li.purple a:hover { color:#f0dee6; background-position:0px 0px !important; } #services #content .holder h1, #services #content .holder h2 { color:#6595A3; } #services .lavaLamp li.back, #services .lavaLamp li.back .left { background-image: url(../images/lava-pink.gif); } /* CONTACT - PINK */ #contact { background:#f7fbfd url(../images/body-grad-contact.jpg) repeat-x; } #contact #main { background:url(../images/swatches-sm-pink2.gif) repeat-y 100% 0; border-left:10px solid #a4d3dc; } #contact #header h1 { background:url(../images/title-contact.png) no-repeat left top; } #contact .container { background:url(../images/bg-contact.jpg) no-repeat 100% 0; } #contact .container a { color:#60909e; } #contact #sidenav a, #contact #footer p { color:#ae887d; } /*#contact #sidenav a:hover { color:#444; }*/ #contact #sidenav li.pink a, #home #sidenav li.pink a:hover, #about #sidenav li.pink a:hover, #news #sidenav li.pink a:hover, #contact #sidenav li.pink a:hover, #products #sidenav li.pink a:hover, #presentations #sidenav li.pink a:hover, #services #sidenav li.pink a:hover { color:#fff7f1; background-position:0px 0px !important; } #contact #content .holder h1, #contact #content .holder h2 { color:#60909e; } #contact .lavaLamp li.back, #contact .lavaLamp li.back .left { background-image: url(../images/lava.gif); }