/* * * * * * GOLD MARKETING GROUP Website CSS * * * * * */ /********************* CONTAINERS ********************/ body { background:url(../images/bg-lightTan.gif); font-family:"Lucida Sans Unicode", "Lucida Grande", Tahoma, Verdana, sans-serif !important; font-size:14px; color:#222; text-align:center; margin:0; } #wrap { position:relative; text-align:left; margin:0 auto; width:910px; } #mainContainer { /*position:relative;*/ float:left; clear:both; background:url(../images/content-bg.png) repeat-y; _background:url(../images/content-bg.gif) repeat-y; /* for IE6 */ width:910px; margin:0; padding:0; } #mainContent-wrap { margin:0; padding:0 0 10px 0; position:relative; float:left; left:15px; top:0; width:870px; min-height:400px; } /* for Internet Explorer */ /*\*/ * html #mainContent-wrap { height: 400px; } /**/ img { border:0; } /******************* HEADER / TOP NAV ********************/ #header-wrap { position:relative; height:137px; margin:0; padding:0; float:left; } #hdr-logo { background:url(../images/hdr-logo.png) no-repeat; width:364px; height:137px; float:left; } #hdr-logo a { position:absolute; display:block; width:344px; height:73px; top:17px; left:6px; } #header-wrap span { display:none; } #hdr-nav { background:url(../images/hdr-nav.png) 0 -137px no-repeat; /* for IE6: */ _background:url(../images/hdr-nav.gif) 0 -137px no-repeat; margin:0; padding:0; height:137px !important; overflow:hidden !important; width:545px; float:left; } #hdr-nav li { display:block; float:left; position:relative; padding-top:137px; height:0; width:80px; overflow:hidden !important; } #hdr-nav li a { display:block; float:left; position:relative; width:73px; height:73px; /*padding-top:73px;*/ overflow:hidden !important; top:-119px; /*border:1px solid #f00;*/ margin:0; background:url(../images/hdr-nav.png) no-repeat; /* for IE6: */ _background:url(../images/hdr-nav.gif) no-repeat; } #hdr-nav li#nav-space { width:135px; height:137px; } #hdr-nav li#nav-about a { background-position: -135px -18px; } #hdr-nav li#nav-about a:hover { background-position: -135px -155px; } #hdr-nav li#nav-portfolio a { background-position: -215px -18px; } #hdr-nav li#nav-portfolio a:hover { background-position: -215px -155px; } #hdr-nav li#nav-services a { background-position: -295px -18px; } #hdr-nav li#nav-services a:hover { background-position: -295px -155px; } #hdr-nav li#nav-buzz a { background-position: -375px -18px; } #hdr-nav li#nav-buzz a:hover { background-position: -375px -155px; } #hdr-nav li#nav-contact a { background-position: -455px -18px; } #hdr-nav li#nav-contact a:hover { background-position: -455px -155px; } /*********************** TAGLINE ************************/ .tagline-flash, .tagline-static { position:relative; float:left; width:150px; height:400px; margin:0; } .tagline-flash { left:0; top:0; } .tagline-flash object { position:relative; top:-20px; left:0; z-index:1; } .tagline-static { background:url(../images/tagline.gif) no-repeat; left:10px; top:23px; } .tagline-static span { display:none; } /*********************** CONTENT ************************/ .content { position:relative; float:right; width:690px; } .content-wrap { position:relative; clear:both; float:right; width:100%; padding:10px 0 0 0; } .content h1 { margin:0 0 10px 0; height:62px; float:right; position:relative; display:block; } .content h1 span { display:none; } .content p { clear:both; margin:0; padding:0 0 15px 0; line-height:20px; } .intro { margin: 0px 0px 30px 0px; clear:both; font-size:16px; } .content-heading { position: relative; background:url(../images/content-h3-bg.gif) repeat-x; height:31px; padding:0; margin:0 0 4px 0; font-size:16px; clear:both !important; border-top:1px solid #e1e1e1; } .content-heading div { position: absolute; float: right; left: 620px; top: -18px; } .content-heading span { position:relative; left:5px; top:6px; } /* Links */ a:link, a:visited { color:#bf372f; text-decoration:underline; } a:hover { color:#d63e35; text-decoration:none; } /* remove halo effect on clicked links */ a, input, a:focus, a:active { outline: none !important; } :-moz-any-link:focus { outline: none !important; } #Home h1 { background:url(../images/hdr-Welcome.png) no-repeat; width:201px; } #About h1 { background:url(../images/hdr-About.png) no-repeat; width:153px; } #Portfolio h1 { background:url(../images/hdr-Portfolio.png) no-repeat; width:206px; } #Services h1 { background:url(../images/hdr-Services.png) no-repeat; width:208px; } #Buzz h1 { background:url(../images/hdr-Buzz.png) no-repeat; width:130px; } #Contact h1 { background:url(../images/hdr-Contact.png) no-repeat; width:191px; } /* HOME */ #Home h2 { padding-top:8px; } .sandall { position:absolute; bottom:0; right:0; font-size:13px; padding:0 !important; } .sandall-link { background:url(../images/sandall-link.png) right top no-repeat; height:33px; width:345px; padding:0 !important; display:block; color:#777 !important; text-decoration:none !important;} .sandall-link span { position:relative; top:6px;} .sandall a:hover { color:#000 !important; } /* ABOUT US */ #head-laura { background:url(../images/content-laura.png) no-repeat; height:65px; width:65px; padding: 0px 0px 5px 0px; } /*#head-holly { background:url(../images/content-holly.png) no-repeat; height:65px; width:65px; padding: 5px 0px 5px 0px; }*/ #head-kimberly { background:url(../images/content-kim.png) no-repeat; height:65px; width:65px; padding: 5px 0px 5px 0px; } #head-kate { background:url(../images/content-kate.png) no-repeat; height:65px; width:65px; padding: 5px 0px 5px 0px; } #head-rob { background:url(../images/content-rob.png) no-repeat; height:65px; width:65px; padding: 5px 0px 5px 0px; } #About p { padding:0 0 25px 6px; width:630px; } #About #headshots { position:relative; /*background:url(images/about-headshots.png) no-repeat;*/ /*width:673px;*/ height:51px; } #About #headshots a, #About .content-heading a { width:51px; height:51px; position:relative; display:block; /*background-color:#00f;*/ cursor:default; float:left; margin-right:22px; } #About #headshots div.title, #About .content-heading .title { font-size:11px; background:#222; color:#fff; padding:10px; position:absolute; text-align:center; } #About #headshots div h5, #About .content-heading div h5 { margin:0 0 3px 0; font-size:13px; } #About #headshots div div.arrow { background:url(../images/pop-arrow.png) no-repeat; background-color:none; padding:0; position:absolute; bottom:-16px; left:40px; width:22px; height:16px;} #About .content-heading .arrow { background:url(../images/pop-arrow-rt.png) no-repeat; background-color:none; padding:0; position:absolute; top:24px; width:16px; height:22px; z-index:60; } #About #LauraSandall { top:-20px; left:448px; z-index:5; position:absolute; width:136px; } #About #LauraSandall .arrow { left:156px; } /*#About #HollySharp { top:-20px; left:448px; z-index:5; position:absolute; width:136px; } #About #HollySharp .arrow { left:156px; }*/ #About #KimberlyGottschalk { top:-20px; left:434px; z-index:5; position:absolute; width:150px; } #About #KimberlyGottschalk .arrow { left:170px; } #About #KateKerfoot { top:-20px; left:484px; z-index:5; position:absolute; width:100px; } #About #KateKerfoot .arrow { left:120px; } #About #RobGoldberg { top:-20px; left:484px; z-index:5; position:absolute; width:100px; } #About #RobGoldberg .arrow { left:120px; } /*#About .AmandaH-link { background:url(../images/hd-AmandaH.png); } #About #headshots #AmandaHayward { top:-68px; left:-24px; }*/ #About .TimP-link { background:url(../images/hd-TimP.png); } #About #headshots #TimPechmann { top:-68px; left:-24px; } #About .KoryL-link { background:url(../images/hd-KoryL.png); } #About #headshots #KoryLindberg { top:-68px; left:48px; } #About .JeffM-link { background:url(../images/hd-JeffM.png); } #About #headshots #JeffMickeal { top:-68px; left:121px; } /*#About .DavidS-link { background:url(../images/hd-DavidS.png); } #About #headshots #DavidStephens { top:-68px; left:164px;}*/ #About .AnnT-link { background:url(../images/hd-AnnT.png); } #About #headshots #AnnTool { top:-68px; left:194px;} #About .AshleyD-link { background:url(../images/hd-AshleyD.png); } #About #headshots #AshleyDechter { top:-68px; left:267px; } #About .BrianaS-link { background:url(../images/hd-BrianaS.png); } #About #headshots #BrianaSpagnuolo { top:-68px; left:340px; } /*#About .CameronW-link { background:url(../images/hd-CameronW.png); } #About #headshots #CameronWood { top:-68px; left:416px; }*/ #About .DaveG-link { background:url(../images/hd-DaveG.png); } #About #headshots #DaveGroseclose { top:-68px; left:413px; } #About .KristerT-link { background:url(../images/hd-KristerT.png); } #About #headshots #KristerTidics { top:-68px; left:486px; } #About .MelissaS-link { background:url(../images/hd-MelissaS.png); margin-right:0 !important; } #About #headshots #MelissaSambo { top:-68px; left:559px; } /*#About #headshots #MelissaSambo .arrow { left:81px !important; }*/ /* PORTFOLIO */ #Portfolio #pf-list { position:relative; clear:both; margin:0; padding:0 5px 0 0; float:left; border-right:1px dashed #ccc; } #Portfolio #pf-list li.pf-item { position:relative; clear:both; list-style-type:none; float:left; min-height:154px; width:540px; margin:0 0 35px 0; } /* for Internet Explorer */ /*\*/ * html #Portfolio #pf-list li.pf-item { height: 154px; } /**/ #Portfolio #pf-list li a { background:url(../images/pf-polaroid.jpg) no-repeat; width:162px; height:154px; border:0; display:block; position:relative; float:left; text-decoration:none; } #Portfolio #pf-list li.pf-item a img { position:absolute; top:9px; left:11px; width:137px; height:111px; } #Portfolio #pf-list li#pf-LAFilmFestival a img { background:url(../images/pf-th-LAFilmFestival.jpg) no-repeat; } #Portfolio #pf-list li#pf-ComicCon a img { background:url(../images/pf-th-ComicCon.jpg) no-repeat; } #Portfolio #pf-list li#pf-PopUpStores a img { background:url(../images/pf-th-PopUpStores.jpg) no-repeat; } #Portfolio #pf-list li#pf-VerticalFashionShow a img { background:url(../images/pf-th-VerticalFashionShow.jpg) no-repeat; } #Portfolio #pf-list li#pf-MaryJBlige a img { background:url(../images/pf-th-MaryJBlige.jpg) no-repeat; } #Portfolio #pf-list li#pf-BookFestivals a img { background:url(../images/pf-th-BookFestivals.jpg) no-repeat; } #Portfolio #pf-list li#pf-RedRoom a img { background:url(../images/pf-th-RedRoom.jpg) no-repeat; } #Portfolio #pf-list li#pf-Sports a img { background:url(../images/pf-th-Sports.jpg) no-repeat; } #Portfolio #pf-list li#pf-FlashConcerts a img { background:url(../images/pf-th-FlashConcerts.jpg) no-repeat; } #Portfolio #pf-list li#pf-SoundResponse a img { background:url(../images/pf-th-SoundResponse.jpg) no-repeat; } #Portfolio #pf-list li#pf-Prevu a img { background:url(../images/pf-th-Prevu.jpg) no-repeat; } #Portfolio #pf-list li a span { position:absolute; bottom:12px; width:162px; text-align:center; display:block; cursor:pointer; font-size:11px; line-height:13px; letter-spacing:-0.1px; } #Portfolio #pf-list li .pf-desc { /*position:relative;*/ float:left; width:360px; margin:0 0 0 12px; font-size:12px; padding:5px 0 0 0; } #Portfolio #pf-list li .pf-desc h3 { margin:0; position:relative; font-size:13px; } #Portfolio #pf-list li .pf-desc h3 a { background:none !important; width:auto !important; height:auto !important; display:inline !important; text-decoration:none; } #Portfolio #pf-list li .pf-desc h3 a:link, #Portfolio #pf-list li .pf-desc h3 a:visited { color:#000; } #Portfolio #pf-list li .pf-desc h3 a:hover { color:#d63e35; } #Portfolio #pf-list li .pf-desc p, #Portfolio #pf-list li .pf-desc li { line-height:15px; } #Portfolio #pf-list li .pf-desc p { padding:4px 0 0 0 !important; } #Portfolio #pf-list li .pf-desc p em { font-style:normal; color:#555; margin-right:4px; } #Portfolio #pf-list li .pf-desc ul { margin:5px 0 0 0; padding:0; } #Portfolio #pf-list li .pf-desc ul li { list-style-type:disc !important; width:auto !important; margin:0 0 0 15px; height:auto; float:none; } #Portfolio #partners { position:relative; float:left; width:140px; /*height:825px;*/ text-align:center; } #Portfolio #partners h3 { background:url(../images/content-h3-bg.gif) repeat-x; margin:0; padding-top:4px; color:#767676; font-size:16px; height:30px; border-top:1px solid #e1e1e1; } #Portfolio #partners ul { /*background:#f00;*/ margin:0; padding:25px 0 15px 0; } #Portfolio #partners li { margin:0 auto 40px auto; padding:0; list-style-type:none; width:auto; } #Portfolio #partners li span { display:none; } #Portfolio #partners #logo-amex { background:url(../images/logo-amex.png) no-repeat; width:49px; height:45px; } #Portfolio #partners #logo-att { background:url(../images/logo-att.png) no-repeat; width:69px; height:31px; } #Portfolio #partners #logo-bestBuy { background:url(../images/logo-bestBuy.png) no-repeat; width:70px; height:49px; } #Portfolio #partners #logo-filmIndep { background:url(../images/logo-filmIndep.jpg) no-repeat; width:120px; height:11px; } #Portfolio #partners #logo-ford { background:url(../images/logo-ford.png) no-repeat; width:70px; height:27px; } #Portfolio #partners #logo-LAFF { background:url(../images/logo-LAFF.jpg) no-repeat; width:91px; height:40px; } #Portfolio #partners #logo-leviStrauss { background:url(../images/logo-leviStrauss.png) no-repeat; width:84px; height:25px; } #Portfolio #partners #logo-mervyns { background:url(../images/logo-mervyns.png) no-repeat; width:120px; height:19px; } #Portfolio #partners #logo-mrsMeyers { background:url(../images/logo-mrsMeyers.jpg) no-repeat; width:100px; height:32px; } #Portfolio #partners #logo-pacer { background:url(../images/logo-pacer.png) no-repeat; width:120px; height:62px; } #Portfolio #partners #logo-prevu { background:url(../images/logo-prevu.png) no-repeat; width:77px; height:42px; } #Portfolio #partners #logo-rockclassroom { background:url(../images/logo-rockclassroom.png) no-repeat; width:70px; height:76px; } #Portfolio #partners #logo-saturn { background:url(../images/logo-saturn.png) no-repeat; width:50px; height:56px; } #Portfolio #partners #logo-sonyEricsson { background:url(../images/logo-sonyEricsson.png) no-repeat; width:78px; height:51px; } #Portfolio #partners #logo-target { background:url(../images/logo-target.png) no-repeat; width:60px; height:74px; } #Portfolio #partners #logo-networks { background:url(../images/logo-netWorks.png) no-repeat; width:120px; height:80px; } #Portfolio #partners #logo-touchtunes { background:url(../images/logo-touchtunes.png) no-repeat; width:120px; height:25px; } #Portfolio #partners #logo-usaguitar { background:url(../images/logo-usaguitar.png) no-repeat; width:70px; height:98px; } #Portfolio #partners #logo-virginMobile { background:url(../images/logo-virginMobile.png) no-repeat; width:78px; height:46px; } #Portfolio #partners #logo-yahooMusic { background:url(../images/logo-yahooMusic.png) no-repeat; width:79px; height:29px; } /* Styles for vid popup window */ .pf-vid h2 { font-size:20px; margin:10px 0; } /* Old stuff for Portfolio quotes - no longer on pf page */ #Portfolio .pf-quote { position:relative; float:left; width:137px; min-height:110px; display:block; background:#f4f4f3 url(../images/pf-quote-bg.jpg) no-repeat; } /* for Internet Explorer */ /*\*/ * html #Portfolio .pf-quote { height: 110px; } /**/ #Portfolio .pf-quote span.quote { font-size:11px; font-weight:bold; font-style:normal; display:block; margin-bottom:3px; } #Portfolio .pf-quote span.by { font-style:italic; font-size:10px; position:relative; text-align:right; display:block; } #Portfolio .pf-quote div.txt { padding:8px 8px 10px 8px; } #Portfolio .pf-quote div.botm { background:url(../images/pf-quote-botm.jpg) no-repeat; position:absolute; bottom:0; left:0; clear:both; width:137px; height:10px; } /* SERVICES */ #Services p { float:left; margin-left:6px; clear:none; display:inline; width:665px; } .blt { color:#bf372f; float:left; font-weight:bold; clear:both; display:inline; } /* BUZZ */ #Buzz ul { clear:both; margin:0; padding:0; position:relative; } #Buzz ul li { list-style-type:none; margin:0 0 10px 20px; padding:0 0 10px 0; position:relative; clear:both; } #Buzz .buzz-quote { padding:0 0 10px 20px; margin:0 0 10px 0; clear:none; } #Buzz ul li img { position:relative; display:inline; float:left; margin:0 18px 10px 0; width:137px; height:111px; } #Buzz .buzz-quote .L, #Buzz .buzz-quote .R { font-size:28px; line-height:6px; position:relative; overflow:hidden; top:8px; color:#888; font-family:'Times New Roman', Times, serif; } #Buzz .buzz-quote .L { padding:0 4px 0 0; margin:0 0 0 -15px; } #Buzz .buzz-quote .R { padding:0 0 0 3px; } #Buzz .quote-by { text-align:right; color:#888; font-size:11px; display:block; right:0; z-index:10; bottom:0; } /* CONTACT */ #Contact .content-wrap ul.addr { position:relative; /*width:280px;*/ width:400px; float:left; padding:0; margin:0; } #Contact .content-wrap ul.addr li { list-style-type:none; padding:0 0 20px 10px; } #Contact .content-wrap ul.addr li h4 { margin:0 0 3px 0; font-size:13px; } #Contact .contact-form-wrap { position:relative; float:right; width:400px; padding:10px 0 0 0; background:#f5f5f5; border:1px dotted #ddd; } #Contact .contact-form-wrap form { position:relative; left:20px; padding:0; margin:0; } #Contact .contact-form-wrap form p { margin:0; } #Contact .contact-form-wrap form input, #Contact .contact-form-wrap form textarea { border:1px solid #aaa; } #Contact .contact-form-wrap form label { position:relative; vertical-align:top; top:2px; width:52px; display:block; float:left; font-weight:bold; } #Contact .contact-form-wrap form label.lbl-message { float:none; } #Contact .contact-form-wrap form input { width:200px; flaot:left; } #Contact .contact-form-wrap form #message_body { height:150px; width:360px; margin-top:3px; } #Contact .contact-form-wrap form #message_submit { width:150px; height:30px; font-size:14px; font-weight:bold; color:#333; background:#ddd; cursor:pointer; border:2px solid #999; position:relative; left:214px; } #Contact #errorExplanation { width:360px; position:relative; left:10px; background-color:#fff; } #Contact .contact-form-wrap form div { margin:0 0 3px 0; padding:0; } /***** Error handling *****/ .fieldWithErrors { /*padding: 0 0 0 3px;*/ border-left:3px solid #f00; display: inline; /*width:10px !important;*/ } #msgBLer .fieldWithErrors { border-left:3px solid #f00; display:block; } #errorExplanation { width: 400px; border: 2px solid red; padding: 7px; padding-bottom: 12px; margin-bottom: 20px; background-color: #f0f0f0; } #errorExplanation h2 { text-align: left; font-weight: bold; padding: 5px 5px 5px 15px; font-size: 12px; margin: -7px; background-color: #c00; color: #fff; } #errorExplanation p { color: #333; position:relative; margin: 5px 0 0 0; padding: 5px; } #errorExplanation ul { margin:0; padding:0; } #errorExplanation ul li { font-size: 12px; margin-left:30px; } div.uploadStatus { margin: 5px; } div.progressBar { margin: 5px; } div.progressBar div.border { background-color: #fff; border: 1px solid gray; width: 100%; } div.progressBar div.background { background-color: #333; height: 18px; width: 0%; } /******************* FOOTER *************************/ #footer { position:relative; clear:both; height:49px; width:910px; background:url(../images/footer-bg.png) no-repeat; } #footer p { font-size:9px; color:#ddd; text-align:center; position:relative; margin:0; padding:0; top:30px; }