/*------------------------------------------------------------------ Method / global.css Author: Kris Gray Methods: 1. CSS FILES ORGANISATION global.css -> Site Rules 2. IN THIS CSS FILE: ? --------------------------------------------------------------------*/ /* Items Critical to the site you shouldn't change. */ /* Tag Set Styles */ HTML, BODY { font-family: Georgia, serif; font-size: 12px; text-align: center; background: #ededed; height: 100%; } A { color: #8b001d; text-decoration: none; } H2 { font-size: 18px; } /* General Markup */ #container { width: 948px; margin: 0 auto; text-align: left; } #header { height: 132px; position: relative; } #header H1 A { display: block; background: url(../images/demetergrouplogo.jpg) no-repeat; width: 261px; height: 33px; position: absolute; top: 48px; left: 13px; } #header H1 A SPAN { display: none; } #header UL.nav { float: right; margin-top: 48px; overflow: hidden; } #header UL.nav LI { width: 167px; height: 33px; line-height: 33px; float: left; border-left: 1px solid #878787; text-indent: 12px; } #header UL.nav LI.first { width: 155px; } #header UL.nav LI A { font-size: 18px; color: #333; } #header UL.nav LI.selected A { color: #333; } #header UL.sub-nav { font: normal 12px Georgia, serif; position: absolute; bottom: 3px; left: 1px; } #header UL.sub-nav LI { display: inline; float: left; padding: 0 7px 0 11px; background: url(../images/backslash.gif) no-repeat 0 2px; } #header UL.sub-nav LI A { color: #552f44; } #header UL.sub-nav LI.first { background: none; } #header UL.sub-nav LI.selected A { font-weight: bold; } #header UL.sub-nav LI A:hover { color: #8B001D; } #header DL { font: normal 12px Georgia, serif; overflow: hidden; } #header DT { display: inline; float: left; padding: 0 7px 0 11px; color: #696567; font-style: italic; } #header DD { display: inline; float: left; padding: 0 7px 0 11px; background: url(../images/backslash.gif) no-repeat 0 2px; } #header DD.first { background:none; padding-left: 0;} #header DD A { color: #552f44; } #header DD A:hover { color: #8B001D; } #header DD.selected A { font-weight: bold } #header DL.l { position: absolute; bottom: 3px; left: 11px; } #header DL.r { position: absolute; bottom: 3px; right: 5px; } #footer { overflow: hidden; width: 924px; border-top: 1px solid #b5b5b5; font-size: 11px; padding-top: 11px; margin: 48px 0 0 12px; line-height: 13px; } #footer address { width: 312px; float: left; padding-left: 1px; color: #333; } #footer .contact { width: 312px; float: left; padding-left: 1px; color: #333; } #footer .copy { float: left; color: #999; } .contact SPAN { width: 23px; display: block; float: left;} /* Content Section */ .content-wrapper { background: #e2e2e2; padding: 12px; } .content-head { height: 129px; position: relative; } .content-body { position: relative; min-height: 375px; *-height: 375px; overflow: visible; font: normal 12px 'Georgia', 'serif'; } .content { border-top: 1px solid #b5b5b5; padding: 12px 0 0 0; overflow: visible; position: relative;} .content H2 { font: bold 18px Georgia, serif; color: #552f44; } .content-head P { line-height: 24px; width: 773px; } .content-head P.intro { padding-top: 3px; font-size: 18px; width:100%;} .content-body H4 { font: normal 18px Georgia, serif; padding-bottom: 5px; margin-bottom: 12px; border-bottom: 1px solid #b5b5b5; color: #552f44;} .content-body STRONG { font: bold 12px Georgia, serif; } .content-body P { line-height: 18px; margin-bottom: 12px; } /* Tiles */ .tile { border-left: 3px solid #552f44; width: 293px; height: 101px; background: #ededed url(../images/tileArrow.gif) no-repeat 269px 12px; margin: 0 2px 2px 2px; } .tile IMG { position: absolute; bottom: 12px; left: 21px; } .tile H5 { display: block; margin: 0 10px 0 12px; padding: 12px 0 2px 0; border-bottom: 1px solid #b5b5b5; width: 271px; font: normal 18px/18px Georgia, serif; color: #552f44; width: 270px; display: block; } .tile H5 A:hover { color: #8B001D; } .tile-wrapper { background: url(../images/tileBG.gif) no-repeat; display: inline; width: 296px; height: 101px; padding: 4px; float: left; margin: 0 8px 8px 0; overflow: hidden; position: relative; } .tile .hoverimg { display: none; } .hover .tile IMG { display: none; } .hover .tile IMG.hoverimg { display: block; } /* Opacity is commented out because we apply it as a transition in JS */ .filtered .tile { /*opacity: .2; filter: alpha(opacity=20);*/ } /* 3 column rules */ .multi-col { overflow: hidden; } .col { width: 300px; float: left; margin-right: 12px; display: inline;} .multi-col DIV.r { margin-right: 0px; } /* List Rules */ .list {} .list .hover { background: #f3f3f3; cursor: pointer; } .list .first { border-top: 1px solid #b5b5b5; } .list-item { border-bottom: 1px solid #d3d3d3; clear: both; overflow: hidden; height: 19px; line-height: 19px; } .list-item .person-info { display: none; } /* Utiility Classes */ .hide { display: none!important; } .show { display: block!important; } /* Page Specific */ /* Client Brands Page */ .clientbrands-page { } .clientbrands-page .content { padding: 0; border: 0 none; } .clientbrands-page .content-wrapper { padding: 11px 2px 11px 10px; height: 460px; } .clientbrands-page .content-body { min-height: 460px; *height: 460px; position: relative; overflow: hidden; } #archive { margin: 12px 12px 0 12px; } #archive .archive-head { height: 33px; border-top: 1px solid #b5b5b5; border-bottom: 1px solid #b5b5b5; } #archive .archive-head A { font: normal 12px Georgia, serif; padding-left: 6px; border-left: 2px solid #a6949e; cursor: pointer; } #archive H6 { display: inline; height: 33px; font: bold 12px/33px Georgia, serif; padding-right: 5px; } #archive UL { overflow: hidden; } #archive UL LI { width: 312px; height: 19px; float: left; border-bottom: 1px solid #d3d3d3; font: normal 12px/19px Georgia, serif; } #archive UL LI.r { width: 300px; } #archive UL LI A { color: #552F44; } #archive .hover { background: #fafafa; color: #552f44; } #archive .filtered { color: #95818c; } #tileContainer { display: block; overflow: hidden; position: absolute; } #detailsContainer { width: 920px; height: 452px; padding: 4px; position: absolute; top: 0; left: 936px; overflow: hidden; display:block; background: #ededed url(../images/detailsBG.gif) no-repeat;} #detailsContainer UL { width: 920px; height: 452px; position: relative; z-index: 100; } #detailsContainer UL LI { height: 23px; position: absolute; } #detailsContainer UL LI A { line-height: 23px; } #detailsContainer #liTitle { width: 264px; border-bottom: 1px solid #b5b5b5; top: 0; left: 12px; padding: 0 12px;} #detailsContainer #liClose { width: 600px; border-bottom: 1px solid #b5b5b5; top: 0; left: 312px; text-align: right; } #detailsContainer #liPrev { width: 288px; border-top: 1px solid #b5b5b5; bottom: 0; left: 12px; } #detailsContainer #liNext { width: 600px; border-top: 1px solid #b5b5b5; bottom: 0; left: 312px; text-align: right; } #liClose A { background: url(../images/closeImg.gif) no-repeat center right; padding: 0 12px; } #liNext A { background: url(../images/nextArrow.gif) no-repeat center right; padding: 0 12px; display: inline;} #liPrev A { background: url(../images/prevArrow.gif) no-repeat center left; padding: 0 12px;} .details { position: absolute; top: 0; left: 0; margin: 34px 0 0 0; padding: 0 0 0 316px; display: block; display: none; height: 398px; z-index: 200; width: 600px;} .details IMG { position: absolute; top: 6px; left: 16px; z-index: 200; } .details H2 { font-weight: normal; height: 73px; width: 600px; display: block; border-bottom: 1px solid #b5b5b5; } .details .left { width: 291px; float: left; display: inline; } .details .right { width: 272px; float: right; display: inline; padding-right: 16px;} .details .more { width: 280px; padding: 38px 12px 0 12px; height: 22px; position: absolute; bottom: 12px; right: 0; background: #f6f6f6 url(../images/pressIcon.gif) no-repeat 12px 12px; font-size: 11px;} /* Press Specific */ .press .l { width: 145px; } .press .m { width: 700px; font: bold 12px/18px Georgia, serif; color: #552f44; cursor: pointer; } .press .r { font: normal 10px/18px Georgia, serif; text-align: right; color: #8b001d; cursor: pointer; width: 55px; background: url(../images/moreArrows.gif) no-repeat 13px 5px;} .press .m A { color: #552F44; } .visible .press .r { background: url(../images/hideArrows.gif) no-repeat 13px 5px; } .press-info .m { width: 572px; margin-left: 157px;} .press-info P { line-height: 20px; margin-bottom: 12px; } .press-page .visible { overflow: hidden; padding-bottom: 10px; } /* People Specific */ .person { overflow: hidden; } .person .l { font: bold 12px/18px Georgia, serif; color: #552f44; cursor: pointer; } .person .m { color: #552f44; } .person .r { font: normal 10px/18px Georgia, serif; text-align: right; color: #8b001d; cursor: pointer; background: url(../images/moreArrows.gif) no-repeat 260px 6px; } .person .l A { color: #552f44; } .person-info { line-height: 18px; } .person-info H3 { font: normal 18px Georgia, serif; color: #552f44; margin-top: 45px; } .person-info STRONG { margin-bottom: 16px; display: block; } .person-info .l { width: 291px; padding-right: 9px;} .person-info .m { width: 288px; padding-right: 12px;} .people-page .visible { overflow: hidden; /*height: 338px; */} .visible .person-info { display: block; } .visible .person .l A { color: #bebdbd; } .visible .person .m { color: #bebdbd; } .visible .person .r { background: url(../images/hideArrows.gif) no-repeat 260px 6px; } /* Homepage Specific */ /* #cell1 { left: 192px; } #cell2 { left: 832px; } #cell3 { display: none;} #cell4 { left: -448px; }*/ .home-page .content-head {height: 105px;} .home-page .content-body { overflow: hidden; position: relative; left: -12px !important; width: 948px; } .home-page .content-wrapper { background: #fff; height: 530px;} #sectionlinks { position: absolute; top: 67px; left: 0; height: 20px; width: 461px; background: url('../images/cell_header.png') no-repeat; } #sectionlinks span { display: none; } #sectionlinks a {background: #fff; cursor: pointer; display: block; height: 20px; position: absolute; top: 0;} #sectionlinks #section_food { width: 206px; left: 0; background: #fff url('../images/cell_header.png') no-repeat 0 0; } #sectionlinks #section_beauty { width: 305px; left: 240px; background: #fff url('../images/cell_header.png') no-repeat -240px 0; } #sectionlinks #section_apparel { width: 258px; left: 572px; background: #fff url('../images/cell_header.png') no-repeat -572px 0; } #sectionlinks #section_food.selected, #sectionlinks #section_food:hover { background-position: 0 -20px; } #sectionlinks #section_beauty.selected, #sectionlinks #section_beauty:hover { background-position: -240px -20px; } #sectionlinks #section_apparel.selected, #sectionlinks #section_apparel:hover { background-position: -572px -20px; } .cell-wrapper {width: 564px; height: 358px; /*position: absolute; top: 0px; */background: #fff; margin: 0 37px; cursor: pointer;} .cell {width: 564px; height: 358px; position: relative; display: block;} .cell-wrapper H4 {background: url('../images/featured-client-headers.gif') no-repeat 0 0; color: #fff; display: block; height: 45px; margin: 0; padding: 0; position: relative; z-index: 20; display: none; border-bottom: none;} .cell-wrapper H4 A { width: 564px; height: 45px; display: block; color: #fff; text-indent: -10000em; position:absolute;} #cell-food h4 {background-position: 0 0;} #cell-beauty h4 {background-position: 0 -45px;} #cell-apparel h4 {background-position: 0 -90px;} .cell .image { position: absolute; top: 0px; left: 0px;} .cell-wrapper H5 A:hover{ color: #8B001D; } .cell-wrapper STRONG { font: bold 12px Georgia, serif; color: #ededed; float: left; margin: 0 0 5px 13px; } .cell-wrapper .viewall { color: #696567; font: normal 12px/12px Georgia, serif; float: right; margin: 0 13px 5px 0; } .cell-wrapper A.viewall:hover { color: #fff; } .cell-wrapper .tile { clear: both; display: none; } .cell-wrapper .cell-content { display: none; overflow: hidden; position: relative; height: 124px; } .cell-wrapper-fade { background: #fff; position:absolute; bottom: 0; left: 0; width: 300px; height: 260px; opacity: .85; filter: Alpha(opacity=85);} .nav-carousel {position: absolute; bottom: -16px; left: 427px;} .nav-carousel li {background: url('../images/carousel-indicators.gif') no-repeat 0 0; height: 9px; width: 10px; float: left; margin: 0 7px;} .nav-carousel li.on {background-position: 0 -9px;} .nav-carousel li a {text-indent: -9999px; position: absolute; } .hover H4 { background: url(../images/cellBG.png); } .hover DIV.cell-content { display: block; background: url(../images/cellBG.png); position: relative; height: 0px; }