/* Revision 04-10 Global style sheet for all new pages */ /*--------------- general global styles ---------------*/ body { background: url(../images/DaSliva.jpg) top repeat; font: 12px Arial, helvetica, sans-serif; text-align: center; color: #333333; padding:0; margin:0; } h1 { font-size: 1.5em; color: #000066; padding: 6px 0 3px 0; margin: 0; } h2 { font-size: 1.5em; color: #000066; padding: 6px 0 3px 0; margin: 0; } h3 { font-size: 1.3em; color: #000066; padding: 6px 0 3px 0; margin: 0; } h4 { font-size: 1.1em; color: #000066; padding: 8px 3px 0 0; margin: 0; } h3.orange { font-size: 18px; color: #FF9900; padding: 0; margin: 0; } p { margin: 5px 0; padding: 0; } a { text-decoration: none; color: #ff9900;} a:hover { text-decoration: underline; color: #000066; } ul { margin:0; padding:0; } li { padding:2px 0; } img { border: none; } /*--------------- layout structural -------------------*/ #wrapper { margin: 12px auto; padding:0; width: 820px; text-align:left; } #header { background: url(../images/Menu_new.jpg) top left no-repeat; float:left; width:820px; height:150px; } #home { float:left; width: 388px; height: 150px; margin:0; padding:0; } #home a { display:block; width: 388px; height: 150px; text-indent:-5000px; outline:none; } #addr { float:right; width: 290px; margin:0 65px 0 0; padding-top:32px; color:#FFFFFF; } #topright-nav { float:right; width: 250px; margin: 3px 18px 0 0; padding: 0; font-size:10px; text-align: right; } #topright-nav a { text-decoration: none; color: #ffffcc; } #topright-nav a:hover { text-decoration: underline; color: #333; } .addr p,#addr p, .addr-main p,#addr-main p { font-family:"Times New Roman", Times, serif; color:#FFFFFF; text-align:center; margin:0; padding:0; } #callnum,#callnum-main { font-size:36px; font-weight:bold; } #callnow,#callnow-main { font-size:14px; } #top-nav { width:820px; height:33px; background:url(../images/bg-menu-bar.jpg); margin:0; padding:0; } #top-nav li { float:left; list-style:none; margin:0; padding:0; } #top-nav li a { display:block; height:33px; margin-right:1px; background-position: top left; background-repeat: no-repeat; text-indent: -5000px; outline:none; } #subnav { width: 820px; background: url(../images/subnav-bg.gif) top left repeat-y; color: #000; padding:8px 0 7px 0; margin: 0; } #subnav ul { margin:0; padding:0 0 0 18px; list-style:none; color: #fff;} #subnav li { padding: 6px 4px 6px 3px; display:inline;} #subnav a:link, #subnav a:visited { text-decoration: none;color: #fff;} #subnav a:hover { text-decoration: underline;color: #ffffcc; } /* The following may seem excessive but are dynamically altered by an include, thus we need styles for selected states. A class won't cut it. */ #cubicles-nav, #cubicles-nav-selected { width:99px; background:url(../images/cubicles-nav.jpg); margin-left:10px; } #office-furniture-nav, #office-furniture-nav-selected{ width:149px; background:url(../images/office-furniture-nav.jpg); } #about-us-nav, #about-us-nav-selected { width:103px; background:url(../images/about-us-nav.jpg); } #our-process-nav, #our-process-nav-selected { width:120px; background:url(../images/our-process-nav.jpg); } #green-office-nav, #green-office-nav-selected { width:128px; background:url(../images/green-office-nav.jpg); } #blog-nav, #blog-nav-selected { width:76px; background:url(../images/blog-nav.jpg); } #contact-us-nav, #contact-us-nav-selected { width:119px; background:url(../images/contact-us-nav.jpg); margin-right:0; } #cubicles-nav:link, #office-furniture-nav:link, #about-us-nav:link, #our-process-nav:link, #green-office-nav:link, #blog-nav:link, #contact-us-nav:link { background-position:0 0; outline:none; } #cubicles-nav:hover, #office-furniture-nav:hover, #about-us-nav:hover, #our-process-nav:hover, #green-office-nav:hover, #blog-nav:hover, #contact-us-nav:hover, #cubicles-nav-selected:link, #cubicles-nav-selected:visited, #office-furniture-nav-selected:link, #office-furniture-nav-selected:visited, #about-us-nav-selected:link, #about-us-nav-selected:visited, #our-process-nav-selected:link, #our-process-nav-selected:visited, #green-office-nav-selected:link, #green-office-nav-selected:visited, #blog-nav-selected:link, #blog-nav-selected:visited, #contact-us-nav-selected:link, #contact-us-nav-selected:visited { background-position:0 -33px; outline:none; } #subnav #sub-about-selected:link, #subnav #sub-about-selected:visited, #subnav #sub-promises-selected:link, #subnav #sub-process-selected:visited, #subnav #sub-process-selected:link, #subnav #sub-promises-selected:visited, #subnav #sub-showcase-selected:link, #subnav #sub-showcase-selected:visited, #subnav #sub-testimonials-selected:link, #subnav #sub-testimonials-selected:visited, #subnav #sub-press-selected:link, #subnav #sub-press-selected:visited, #subnav #sub-video-selected:link, #subnav #sub-video-selected:visited, #subnav #sub-overview-selected:link, #subnav #sub-overview-selected:visited, #subnav #sub-new-selected:link, #subnav #sub-new-selected:visited, #subnav #sub-refurbished-selected:link, #subnav #sub-refurbished-selected:visited, #subnav #sub-used-selected:link, #subnav #sub-used-selected:visited, #subnav #sub-options-selected:link, #subnav #sub-options-selected:visited, #subnav #sub-call-center-selected:link, #subnav #sub-call-center-selected:visited, #subnav #sub-specials-selected:link, #subnav #sub-specials-selected:visited, #subnav #sub-leasing-selected:link, #subnav #sub-leasing-selected:visited, #subnav #sub-hoteling-selected:link, #subnav #sub-hoteling-selected:visited, #subnav #sub-brands-selected:link, #subnav #sub-brands-selected:visited, #subnav #sub-sell-selected:link, #subnav #sub-sell-selected:visited, #subnav #sub-office-furniture-selected:link, #subnav #sub-office-furniture-selected:visited, #subnav #sub-cubicles-selected:link, #subnav #sub-cubicles-selected:visited, #subnav #sub-desks-selected:link, #subnav #sub-desks-selected:visited, #subnav #sub-chairs-selected:link, #subnav #sub-chairs-selected:visited, #subnav #sub-conference-room-selected:link, #subnav #sub-conference-room-selected:visited, #subnav #sub-lobby-selected:link, #subnav #sub-lobby-selected:visited, #subnav #sub-storage-selected:link, #subnav #sub-storage-selected:visited, #subnav #sub-laminate-desks-selected:link, #subnav #sub-laminate-desks-selected:visited, #subnav #sub-wood-veneer-desks-selected:link, #subnav #sub-wood-veneer-desks-selected:visited, #subnav #sub-rentals-selected:link, #subnav #sub-rentals-selected:visited, #subnav #sub-green-selected:link, #subnav #sub-green-selected:visited, #subnav #sub-leeds-selected:link, #subnav #sub-leeds-selected:visited { color:#ffffcc; text-decoration:underline; } #footer { float:left; width: 820px; height: 28px; padding:11px 0 0 0; margin:0; background: url(../images/footer.jpg) no-repeat; text-align: center; font-size: 10px; color:#fff; } #foot-links { width: 820px; padding: 0; margin:0 0 50px 0;margin: 0 auto 0 auto; text-align: center; color: #000; } #foot-links li { padding:2px 2px; font-size: 11px; display:inline; list-style:none; } #foot-links a { text-decoration: none; color: #000; padding-right: 11px; background:url(../images/footer-bullet.gif) center right no-repeat; } #foot-links a:hover { text-decoration: underline; color:#000066;} #foot-links .last-footer a { background:none; } #eboostDesign { font-size:11px; padding: 4px 0 0 0; margin:0; color: #333; text-align:center; } #eboostDesign a { color: #000; text-decoration: none; } #eboostDesign a:hover { color: #000066; text-decoration: underline; } /*----- content bg and sidebar, nearly all pages ------*/ #main-h1 { height:26px; padding-left: 32px; margin-bottom: 12px; background: url(../images/cubeicon.jpg) top left no-repeat; } #main-h1 h1 { float: left; } #contentArea { float:left; width:820px; background: #fff url(../images/DaSlivaContent.gif) top left repeat-y; } .contentBorder { width:540px; float: left; border-right: 1px solid #FF9900; margin:0; padding: 0 25px 25px 0; } #contentOptions { padding: 15px 0 15px 35px; margin:0; float:left; width: 565px; } #full-width-content { width: 760px; margin: auto; padding-top: 18px; } #sidebar { width: 165px; float:left; padding: 15px 30px 15px 15px; margin:0; } #div-1,#sb-1,#sb-1-process { background:url(../images/1.gif); } #div-2,#sb-2,#sb-2-process { margin-top:0; background:url(../images/2.gif); } #div-3,#sb-3,#sb-3-process { background:url(../images/3.gif); } #sb-1,#sb-2,#sb-3, #sb-1-process, #sb-2-process, #sb-3-process { background-position: 0 3px; background-repeat: no-repeat; padding: 0 0 18px 32px; margin: 0; } /*Little Contact*/ #miniContact, #sidebarIndex #news { background: #ffffcc; border: 1px solid #000066; padding: 5px 0 0 5px; } #miniContact { margin-top: 25px; } #miniContact, #miniContact table { width: 170px; } #sidebarIndex #news { width: 200px; } /* 10-10 added for the revision of all forms, eliminating tables for layout. */ #miniContact form p, #sidebarIndex form p { margin: 0; padding: 6px; } #miniContact .input { width: 142px; } #sidebarIndex .input { width: 170px; } #sidebar #logos { padding-top:18px; text-align: center; } #sidebar #logos img { padding-bottom:18px; } #chat-container { width: 125px; margin: 0 auto 18px auto; border: 1px solid #FF9900; font-family: Arial, helvetica, sans-serif; font-size:11px; } #chat-container p { margin:0; padding: 2px 0 0 0; text-align: center; } #chat-container img { border:none; } #chat-container a:link,#chat-container a:visited, #chat-container a:hover,#chat-container a:active { text-decoration:none; } #chat-container a:link strong,#chat-container a:visited strong, #chat-container a:hover strong,#chat-container a:active strong { color:#000080; } /*--------------------- Classes -----------------------*/ .item-row { width: 550px; margin: auto; clear: both; } /* used in various places as the row container, next to sidebar */ .input { background: #fff; color: #333333; padding: 2px; font-size: 10px; } .input2 { background: #ffffcc; color: #333333; padding: 2px; font-size: 10px;} .submitButton { background: #000066; color: #fff; padding: 2px; font-size: 10px;} .padding { padding:0; margin:0; text-align:right; } .contentBorderHome { border-right: 1px solid #ff9900; padding:0; margin:0;} .bold { font-weight:bold; color: #000066; } .required { font-weight:bold; color:#ff0000; } .no-margin { margin: 0; padding: 0;} .no-dot li { list-style:none; } .clear-div { clear:both; } .hidden-element { display: none; } .right-align { text-align: right; } .center-align { text-align: center; } .small { font-size:11px; } .orange { color: #FF9900; } .dk-blue { color: #000066; } .rt-float { float: right; } .lt-float { float: left; } .prom-arrow { width:10px; height:10px; border:none; } .prom-seal { display: block; height: 65px; margin:0 0 12px 0; padding:22px 0 0 68px; background: url(../images/promiseSeal_sm.jpg) top left no-repeat; } /* heads w. seal */ .divider-rule { margin: 18px 0 12px 0; border-bottom: 1px solid #ccc; clear: both; } .indent-list { padding-left:20px; } /* like compare-divs ul on cubicles page, but anywhere */ .bold-list { padding-left:20px; font-weight: bold; } .HeaderStyle {margin: 5px 0; padding:0;} .HeaderStyle2 {margin: 5px 0 3px 0; padding:0;} .HeaderStyle2 {margin: 5px 6px 3px 0; padding:0;} .boldForm td { font-weight: bold;} .pCloser { margin: 3px 0 10px 0;} .bg { background: #ffffcc; color: #000066; border: 1px solid #ffffcc;} .float0 { float:left; padding: 5px; width: 165px; margin:0; height: 180px;} .float { float:left; padding: 5px; width: 165px; margin:0; height: 200px;} .cubeImgPad { padding-left: 5px;} .linkMargin { float:left; margin: 100px 0 0 90px; padding: 10px 10px 10px 15px; width: 175px; border: 1px solid #000066; background: #ffffcc;} .linkMargin a { text-decoration: none; color: #000066;} .linkMargin a:hover { text-decoration: underline; color: #ff9900;} .pad { margin: 2px 0; padding: 0; text-align:center; } .border { border: 1px solid #000066; } /* img border */ .quote-img { width: 25px; height: 22px; float: left; display: block; padding: 0 5px 0 0; margin-top:-10px; } .more-arrow { padding-right: 16px; background: url(../images/promArrow.gif) top right no-repeat; } /*- homepage, header content area slightly different -*/ #main-home { float:left; width: 388px; height: 150px; margin:0; padding:0; } #main-home a { display:block; width: 388px; height: 150px; text-indent:-5000px; outline:none; } #main-specials { float:left; width:141px; height:75px; margin: 32px auto 0 auto; padding:0; } #addr-main { float:right; width: 290px; margin:0; padding-top:32px; color:#FFFFFF; } #serviceBoxWrapper { width: 820px; padding:0; margin:0; float:left; } #cubiclesBox, #officefurnitureBox { float:left; height:196px; padding:0; margin:0; } #cubiclesBox { width:286px; background: url(../images/cubicles-box-08-11.jpg) no-repeat; } #officefurnitureBox { width:282px; background: url(../images/office-furniture-box-08-11.jpg) no-repeat; } #cubiclesBox a, #officefurnitureBox a { display: block; float:left; width:282px; height:196px; } #cubiclesBox a { margin-left:8px; } #cubiclesBox a:link, #cubiclesBox a:visited, #cubiclesBox a:hover, #officefurnitureBox a:link, #officefurnitureBox a:visited, #officefurnitureBox a:hover { outline:none; } #infoBox { float:left; width:252px; height:196px; padding:0; margin:0; } promiseHeader,#belowPromise, #promiseHeader a { width: 252px; float:left; padding:0; margin:0; } #promiseHeader { height: 58px; background: url(../images/process_TMP.jpg) no-repeat; } #promiseHeader a { display: block; height: 58px; } #belowPromise { height: 138px; background: url(../images/botPromises.gif) no-repeat; } #promise { float:left; margin:0; width:192px; padding:1px 20px 10px 15px; } #promise a { text-decoration: none; color: #000066; } #promise a:hover { text-decoration: underline; color: #ff9900; } .promLink { margin-top:0; padding-top:0; text-align:right; font-weight: bold; font-size: 1em; } #h4-1,#h4-2,#h4-3 { margin:0; padding: 6px 0 6px 0; font-size:1.0em; } #h4-3 { padding-bottom:2px; } #div-1,#div-2,#div-3 { float: left; width:30px; height:30px; margin-top:6px; clear:both; background-position: top left; background-repeat:no-repeat; } #main-video img { width:460px; height:320px; margin-bottom: 12px; } #main-video img a { outline:none; } #contentIndex { float:left; width: 513px; padding: 15px 20px 15px 35px; margin:0; } #sidebarIndex { float:left; width: 222px;padding: 25px 20px 15px 10px; margin:0; } #contentIndex ul { margin-left: 20px; font-weight: bold; } #main-side-head { margin: 5px 0; padding:0; color: #333; } #news { color: #666666; float:left; padding: 10px 10px 5px 10px; border: 1px solid #ffffcc; } #news p { font-size: 11px;} #news a {color: #666; text-decoration: underline;} #news a:hover {color: #000; text-decoration: underline;} #clientLogos { color: #666666; float:left; padding: 0 4px 5px 0; margin: 10px 0 0 0; border: 1px solid #ffffcc; font-size:11px; text-align:center; } /*------------------- aboutus css ---------------------*/ #about_pic { border: 1px solid #000066; padding: 0; margin-bottom: 10px; } div#contentOptions p { margin-bottom: 10px; line-height: 140%; } .title { font-size: 14px; color: #000066; margin: 0; font-weight: bold; } img.about_pic_sm_L { border: 1px solid #000066; padding: 0px; margin: 0 10px 0 0; float: left; } /*----------------- promise page ---------------------*/ #promise-left { width: 255px; float: left; } #promise-right { width: 255px; float: right; } #promiseAction { width: 150px; height: 100px; float: left; margin: 30px 0 0 30px; padding:0; } #promiseAction a, #promiseAction a:link, #promiseAction a:visited { display:block; width: 150px; height: 100px; background: url(../about/images/promisesAction.gif) top left no-repeat; } #promiseAction a:hover { background-position: 0 -100px; } .promise-nums { width: 30px; height: 25px; float:left; padding: 0 5px 0 0; margin:0; } /*------------------ process page ---------------------*/ #process-left { width: 270px; float: left; } #process-right { width: 248px; float: right; } #promise-1-video img, #process-1-video img, #process-2-video img { width:248px; height:205px; margin-bottom: 12px; } #promise-1-video img a, #process-1-video img a, #process-2-video img a { outline:none; } #sb-1-process,#sb-2-process, #sb-3-process { margin-bottom:0; padding-bottom:0; } #sb-2-process { line-height:33px; } /* just this one need centering */ /*----------------------- video -----------------------*/ #intro-video, #ch2-video, #ch3-video, #ch4-video, #ch5-video, #ch6-video, #ch7-video, #ch8-video { width:400px; height: 320px; margin: 18px auto 18px auto; } #video-list { padding-left: 30px; } #video-list li { list-style: none; margin: 0; padding: 9px 0 9px 0; font-weight: bold; } /*-------- cubicles, and cubicles sub- pages ----------*/ #cubicles-compare { width: 537px; margin: auto; } .cubicle-thirds { float: left; width: 177px; padding:1px; } .cubicle-thirds ul { padding:9px 0 9px 20px; } .cubicle-thirds .right-align{ margin-top:0; padding-top:3px; } .highlight-bg { background: #ffffcc; color: #000066; border: 1px solid #ff9900; padding:5px; text-align:center; } .dark-bg-head { background: #000066; color: #fff; border: 1px solid #000066; text-align:center; } .dark-bg-head h3 { color: #fff;} .hlt-bg-dark-border { background: #ffffcc; color: #000066; border: 1px solid #000066; padding:5px; text-align:center; } #newBox,#newBox a, #refurbishedBox, #refurbishedBox a, #usedBox, #usedBox a { display:block; width: 175px; height: 175px; margin:0 auto 0 auto; padding:0; } #newBox a { background:url(../cubicles/images/new-cubicles05-12-10.jpg) no-repeat; } #usedBox a { background: url(../cubicles/images/used-cubicles08-17-11.jpg) no-repeat; } #refurbishedBox a { background:url(../cubicles/images/refurbished-cubicles08-17-11.jpg) no-repeat; } #newBox a:link, #refurbishedBox a:link, #usedBox a:link { background-position: 0 0px; } #newBox a:hover, #refurbishedBox a:hover, #usedBox a:hover { background-position: 0 -175px; } #new-cubicles-img { float: right; width: 228px; margin: 0 0 0 12px; } .options-img { width: 200px; float: left; margin-right:5px; } .options-info, .options-info table { width: 300px; float: right; } .options-info .highlight-bg { width: 100px; } .options-info ul { width: 40%; float: left; white-space:nowrap; padding: 0 0 18px 12px; } .options-info ul.rt { float: right; text-align:right; } #specials-container { width: 548px; margin: auto; min-height: 400px; margin-top:24px; } #specials-container img { float:left; padding: 0 4px 4px 0; } /* ------------ Office furniture page ---------------- */ #office-furniture-intro { margin-top: 58px; padding-bottom: 18px; text-align:justify; } #desks,#chairs, #conference,#files, #lobby { display:block; float: left; width:165px; height:150px; margin: 0 12px 12px 0; } #desks { background: url(https://sandiegocubicles.com/office-furniture/images/office-desks.jpg); } #chairs { background: url(https://sandiegocubicles.com/office-furniture/images/office-chairs.jpg); } #conference { background: url(https://sandiegocubicles.com/office-furniture/images/conference-furniture.jpg); } #files { background: url(https://sandiegocubicles.com/office-furniture/images/file-cabinets.jpg); } #lobby { background: url(https://sandiegocubicles.com/office-furniture/images/reception-furniture.jpg); } #desks:link,#chairs:link, #conference:link,#files:link, #lobby:link { background-position:0 0; background-repeat:no-repeat; outline:none; } #desks:hover,#chairs:hover, #conference:hover,#files:hover, #lobby:hover { background-position:0 -150px; background-repeat:no-repeat; outline:none; } #catalog-index { float: left; display: block; outline:none; height: 34px; width: 209px; margin-left:12px; background: url(https://sandiegocubicles.com/office-furniture/images/online-catalog-button-mouseoverx34.gif) no-repeat; } #catalog-index:link, #catalog-index:active, #catalog-index:visited { background-position: 0 0; } #catalog-index:hover { background-position: 0 -34px; } #catalog-link { float: right; border: 2px solid #ccc; margin-left: 10px; width: 165px; height:270px; } #catalog-link a { outline:none; } /*------------------- Projects ------------------------*/ .projects-location { margin:0; padding:0; color: #333333; } .project-img { display:block; float: left; width:150px; height:150px; margin: 0 12px 12px 0; } /*----------------- sitemap ---------------------------*/ .sitemap { width: 250px; float: left; margin-left: 12px; } .sitemap ul, sitemap ul li { padding-left: 3px; font-weight:bold; white-space: nowrap; } .sitemap ul { margin-bottom: 12px; } .sitemap ul li ul { padding-left: 12px; font-weight:normal; } /*------------------ Contact page ---------------------*/ /* changes 10-10, tables eliminated */ #bigContact,#contactInfo { margin: 25px auto 18px auto; } #contactInfo { width: 500px; } #bigContact { width: 450px; background: #ffffcc; border: 1px solid #000066; padding: 0 10px 10px 10px; } #bigContact .input { width: 250px; } #bigContact .column { display: block; float: left; width: 165px; text-align: right; padding-right: 12px; } #contactInfo ul { margin:0; padding:0; } #contactInfo li { margin:0; padding:3px 0 3px 0; list-style: none; white-space:nowrap; } #contactInfo div { width: 250px; float: left; } /* slight mod to bigContact for /catalog-request, may or may not be temporary */ #cat-request table { margin: 25px auto 18px auto; width: 400px; background: #ffffcc; border: 1px solid #000066; padding: 0 10px 10px 10px; } #cat-request .input { width: 300px; } #cat-request #city { width: 100px; } #cat-request #zip { width: 60px; } /*------------------- Rental page ---------------------*/ .rental-row { width: 550px; margin: auto; } .rental-row div { width: 262px; float: left; } .rental-row img { width: 262px; height:177px; } .rental-row p { margin:0; padding: 0 0 24px 0; text-align: center; } .rental-row .first { margin-right:24px; } /*------------- Press releases, GSA ------------------ */ #press-release-edaw { margin-top: 12px; } .gsa-row { width: 550px; } .gsa-left { width: 330px; float: left; padding:9px 0 12px 0; } .gsa-left span { display: block; float:left; width: 9.5em; text-align: right; font-weight:bold; padding-right: 2px; } .gsa-left ul,.gsa-left li { margin:0; padding:0; list-style:none; } .gsa-right { width: 215px; float: right; } .gsa-right img { float: right; } .gsa-right div { border-bottom:1px solid #808080; } /* ------------------- Green Office -------------------*/ #green-images { width: 522px; margin:25px auto 12px auto; } /* green-office --*/ #green-images img { margin-right: 24px; } #green-images #rt { margin-right:0; } /* --- end ---- */