/* Meyer's Browser Default Reset (http://meyerweb.com/eric/tools/css/reset/) - v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } body { background:#ccc; font:12px "lucida grande", Arial, Helvetica Neue, Helvetica; color:#333; line-height:150%; } /* Typography */ h1 { font:20px "lucida grande", Helvetica, Arial; color:#999; font-weight:bold; } /* h2 { font:20px "lucida grande", Helvetica, Arial; color:#999; font-weight:lighter; text-transform:uppercase; letter-spacing:2px; } */ h3 { font:14px "lucida grande", Helvetica, Arial; color:#000; line-height:140%; } h2 { font:28px Helvetica, Arial; color:#000; font-weight:lighter;/* text-transform:uppercase; */ margin:22px 0 0 0; letter-spacing:1px; } h2 strong { font-weight:bold; } span.highlight { background:#ffc; padding:2px; } h4 { font:28px Helvetica, Arial; color:#999; font-weight:lighter;/* text-transform:uppercase; */ margin:22px 0 0 0; letter-spacing:1px; } h3 { font:14px "lucida grande", Helvetica, Arial; color:#333; font-weight:bold; } a { color:#0099CC; text-decoration:none; } a:hover { text-decoration:underline; } .lightb a { color:#0099FF; } .light { color:#999; } .blue { color:#0076BD; } .dark { color:#333; } .block { float:left; display:inline; clear:left; } br.clear { clear:both; } input { padding:3px; background:#fff; border:1px solid #e6e6e6; border-top:2px solid #e6e6e6; color:#333;} h4.stay-elevated { width:250px; } .stay-elevated { background:url(../_img/h2-stayelevated.gif) no-repeat; height:15px; margin:0; width:250px; display:block; } .stay-elevated span { display:none; } .latest-updates { background:url(../_img/h2-latestupdates.gif) no-repeat; height:15px; margin:0; display:block; } .latest-updates span { display:none; } .latest-updates em { float:right; font-size:10px; letter-spacing:0; text-transform:none; font-style:normal; } .via-twitter { float:left; clear:both; background:url(../_img/h2-viatwitter.gif) no-repeat; width:200px; height:15px; margin:15px 0 0 0; display:block; } .via-twitter span { display:none; } #ie { display:none; width:400px; height:400px; background:url(../_img/ie.png) top left no-repeat; position:absolute; left:200px; top:100px; } #top-wrap { float:left; clear:both; width:100%; float:left; margin:0; background:#f8f8f8 url(../_img/bg.jpg) top left repeat-x; padding:0 0 30px 0; border-bottom:5px solid #e6e6e6;} #wrap { display:block; width:980px; margin:0 auto; overflow:hidden; } #head { width:980px; height:130px; float:left; display:inline; clear:both; overflow:hidden; background:url(../_img/logo.jpg) center center no-repeat; } #navww { float:right; width:auto; display:inline; margin:0; padding:0 0 0 9px; height:40px; background:url(../_img/shadow-l.jpg) left top no-repeat; } #navw { float:right; width:auto; display:inline; margin:0; padding:0 9px 0 0; height:40px; background:url(../_img/shadow-r.jpg) right top no-repeat; } #nav { float:right; width:auto; display:inline; margin:0; padding:0; height:40px; background:url(../_img/nav-t.jpg) left top repeat-x; letter-spacing:1px; font:16px Helvetica, Arial; -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; } #nav ul { float:left; height:40px; margin:0; padding:0; line-height:1; background:url(../_img/nav-r.jpg) right top no-repeat; -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; } #nav ul li { float:left; margin:0; padding:6px 0; } #nav ul li:hover { background:#0076BD url(../_img/nav-hover-bg.jpg) top left repeat-x; padding:6px 0 6px 1px; } #nav ul li:hover a { border:0; color:#fff; padding:6px 12px 6px 12px; } #nav ul li.first { color:#0076BD; margin:0; padding:12px; text-transform:uppercase; font-weight:lighter; } #nav ul li.first:hover { background:none; } #nav ul li.last { -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; } #nav ul li a { color:#222; text-decoration:none; display:block; float:left; border-left:1px solid #ccc; padding:6px 12px; } #nav ul li a:hover { color:#fff; } #nav ul li div { background:url(../_img/snav.png) 30px 0px no-repeat; font:13px "lucida grande"; position:absolute; top:-200px; right:auto; clear:left; } #nav ul li div ul { border-right:1px solid #ccc; border-bottom:1px solid #ccc; width:150px; height:auto; background:#E6E6E6; padding:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } #nav ul li div li { clear:left; padding:0; } #nav ul li:hover div li:hover { background:none; padding:0; } #nav ul li:hover div li a { letter-spacing:0; width:140px; color:#666; padding:5px; } #nav ul li:hover div li a:hover { background:#fff; color:#0076BD; } #nav ul li:hover div { top:28px; right:auto; margin:0 0 0 -20px; padding:4px 0 0 0; } #logo { float:left; display:block; margin:40px 0 0 10px; width:350px; height:50px; } #head-text { float:left; display:block; width:290px; margin:45px 0 0 10px; } #head-text h1 { font:11px "lucida grande", Helvetica, Arial; color:#999; line-height:120%; } #head-text b { font-size:14px; } #head-text a { color:#999; text-decoration:underline; } #content { width:980px; float:left; display:inline; clear:both; } /* HOME STYLES */ #left-h { float:left; display:inline; width:270px; padding:0 10px 0 10px; overflow:hidden; } #left-h .block { float:left; clear:both; margin:10px 0 0 0; width:270px; border-top:1px solid #e6e6e6; } #left-h .block h3 { width:230px; float:left; clear:both; margin:10px 0 0 0; } #left-h .block h3 a { color:#000; font-weight:bold; } #left-h .block h3 a:hover { color:#0076BD; text-decoration:none; } #left-h .block p { width:270px; float:left; clear:both; margin:5px 0 0 0; font-size: .9em; line-height:140%; color:#777; } #left-h .block div { width:270px; height:16px; margin:5px 0 0 0; padding:0; float:left; clear:both; display:inline; overflow:hidden; text-align:left; font:9px tahoma, arial; text-transform:uppercase; letter-spacing:2px; color:#999; } #left-h .block .icon { border:none; height:10px; margin:10px 5px 0 0; width:10px; } #left-h #signup { margin:20px 0 0 0; float:left; clear:both; } #twitter_div { float:left; clear:both; font-size:.9em; -moz-border-radius: 5px; -webkit-border-radius: 5px; background:#e6e6e6; color:#777; margin:10px 0 0 0; width:270px; } #twitter_div ul { margin:10px; } #twitter_div ul li a { display:none; } #twitter_div ul li span a { display:inline; } .follow-twitter { clear:left; float:left; width:270px; } #right-h { float:left; display:inline; width:670px; padding:0 10px; } #right-h #slide { height:320px; overflow:hidden; } #right-h img.main { background:#fff; margin:0; padding:9px; border:1px solid #E6E6E6; } #right-h img.banner { float:left; margin:10px 0; padding:0; } #right-h #new { width:670px; float:left; display:inline; } #right-h #new #newl { width:181px; height:217px; background:url(../_img/look.jpg) top left no-repeat; } #newl a {display:block; width:181px; height:217px;} #newl a span { display:none;} #right-h #new #newr { width:459px; float:right; padding:10px; background:#E6E6E6; border-right:1px solid #ccc; border-bottom:1px solid #ccc; -moz-border-radius-bottomleft:2px; -webkit-border-bottom-left-radius:2px; -moz-border-radius-topright:2px; -webkit-border-top-right-radius:2px; } #right-h #newr img { border-bottom:5px solid #ccc; margin:0 0 5px 0; } #right-h #newr p { padding:0 10px; font-size:10px; line-height:140%; } #right-h #newr span { font:12px "lucida grande", Helvetica, Arial; color:#000; font-weight:bold; } #right-h #twitter_div { width:670px; background:#fff; } /* INTERIOR STYLES */ #left { width:165px; float:left; display:inline; margin:7px 0 0 15px; overflow:hidden; } #left h4 { margin-left:10px; } #left h4.stay-elevated { margin:0;} #left ul#subnav { float:left; width:164px; margin:10px 0 5px 0; font-size:14px; display:block; clear:both; } #left ul#subnav li { width:164px; float:left; display:block; clear:left; border-bottom:1px solid #ccc; } #left ul#subnav li a { width:164px; float:left; display:block; clear:left; padding:7px 0 7px 10px; border-bottom:3px solid #E6E6E6; } #left ul#subnav li a:hover { background:#FFFFCC; /* text-decoration:none; */ } #left ul#subnav li ul li { float:left; width:164px; font-size:.8em; border:none; border-top:1px solid #ccc; background: url(../_img/arrow.gif) no-repeat 10px center; } #left ul#subnav li ul li a { width:144px; margin:0 0 0 20px; padding:5px 0 5px 5px; border-bottom:none; } #left .block { margin:0 10px 10px 0; background:#ffc; width:164px; } #left .block p { margin:10px; } #right { width:800px; float:left; display:inline; background:#F8F8F8 url(../_img/content-bg.jpg) top left no-repeat; } #int-content { float:left; display:inline; width:450px; margin:7px 0 0 10px; padding:0 40px 0 30px; color:#666; } #int-content h2 { padding-bottom:40px; margin-bottom:5px; background:url(../_img/content-title-bg.jpg) -10px bottom no-repeat; } #int-content p { color:#666; margin:0 0 10px 0; line-height:140%; } #int-content p.post-date { width:100%; height:16px; margin:5px 0 20px 0; padding:6px 0 0 0; float:left; clear:both; display:inline; overflow:hidden; background:#E6E6E6; text-align:center; font:9px tahoma, arial; text-transform:uppercase; letter-spacing:2px; color:#999; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #int-content ul {list-style:disc; margin:5px 0 10px 30px;} #int-content ul li { margin:10px 0 0 0;} #int-content h3 { margin:0 0 5px 0; line-height:150%;} #int-content h3 a { color:#000; border-bottom:2px solid #e6e6e6; padding-bottom:1px; } #int-content h3 a:hover { color:#0076BD; text-decoration:none; border-bottom:2px solid #ccc; } #int-content p.more { margin:20px 0 0 0; border-top:1px solid #ccc; padding:5px 0 5px 0;} #int-content p.more a { display:block;} #int-content p.more:hover { background:#ffc;} #right div#pinfo ul li { margin-left:0; background: url(../_img/arrow.gif) no-repeat left center;} #right div#pinfo ul li a { margin:0 0 0 10px;} #int-right-col { float:left; display:inline; width:270px; } #int-right-col .block { float:left; display:inline; margin:20px 0 0 0; padding:0 10px; } #int-right-col #updates { } #int-right-col #updates ul a { color:#999; text-decoration:none; } #int-right-col #updates p { font-size:9px; } #int-right-col ul li { width:250px; float:left; clear:left; display:inline; margin:8px 0 0 0; -moz-border-radius:4px; -webkit-border-radius:4px; } #int-right-col ul li:hover { background:#E6E6E6; } #int-right-col ul i { font-style:normal; margin:5px 0 0 0; } #int-right-col ul span { float:left; display:inline; padding:4px 9px; margin:0 8px 0 0; font:9px Tahoma; background:#E6E6E6; -moz-border-radius:4px; -webkit-border-radius:4px; } #int-right-col ul span b { clear:left; font-size:14px; } .download-block a img { padding:5px; } .download-block a img:hover { background:#ffc; } .download-block a:hover h3 { color:#09F; } .download-block { border-bottom:1px solid #e6e6e6; margin:10px 0 0 0; padding-bottom:10px; } /* GLOBAL STYLES */ #signup { float:left; display:inline; margin:7px 0 0 0; padding:10px; background:#fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; width:250px; } /* url(../_img/sign-up-bg.jpg) top left repeat-x */ #signup p { line-height:120%; margin:10px 0; font-size:10px; color:#999; } #signup form { margin:10px 0; } #signup input.form-text { font:11px "lucida grande", arial, helvetica; width:159px; height:18px; margin:0 0 3px 0; padding:2px 0 0 2px; } ul#radios li { float:left; display:inline; margin:5px 3px 0 0;} ul#radios input { margin:2px; float:left; display:inline; } ul#radios label { float:left; display:inline;} #signup-int { width:160px; margin:40px 0; float:left; clear:both; color:#777; } #signup-int p { line-height:120%; margin:10px 0; font-size:10px; color:#999; } #signup-int input.form-text { font:11px "lucida grande", arial, helvetica; width:159px; height:18px; margin:0 0 3px 0; padding:2px 0 0 2px; border:1px solid #ccc; } #content #left #signup-int form ul#radios li { float:left; display:inline; margin:5px 3px 0 0;} #content #left #signup-int form ul#radios input { margin:2px; float:left; display:inline; } #content #left #signup-int form ul#radios label { float:left; display:inline;} /* SPECIAL STUFF */ /* PORTFOLIO */ #portfolio { margin:10px 0 0 40px; } #portfolio h2 { float:left; color:#000; } #portfolio ul.navigation { float:left; font:15px Arial; font-weight:bold; margin:25px 0 0 15px; } #portfolio ul.navigation li { float:left; margin:0 5px 0 0; } #portfolio ul.navigation li a { padding:2px 7px; background:#E6E6E6; -moz-border-radius:3px; -webkit-border-radius:3px; } #portfolio ul.navigation li a.selected { background:#0076BD; color:#fff; text-decoration:none; } #portfolio ul.navigation li a:hover { background:#0076BD; color:#fff; text-decoration:none; } #portfolio p { float:left; clear:left; color:#666; margin:0 0 10px 0; line-height:140%; } /* CONTACT */ #contact { float:left; display:inline; clear:left; margin:10px 0 0 0; border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6; padding:20px 0;} #contact form { margin:0; padding:0; float:left; display:inline; clear:left; } #contact fieldset { border-top:1px solid #666666; margin:0 0 10px 0; padding:10px 0 0 0; } #contact legend { color:#0076BD; font-size:13px; font-weight:900; padding:0 5px 0 0; } #contact label { float:left; font-weight:900; display:inline; clear:left; line-height:21px; margin:0 0 3px 0; padding:0 10px 0 0; text-align:right; width:100px; } #contact input.text { background:#fff; border:1px solid #ccc; display:inline; float:left; margin:0 0 3px 0; width:225px; padding:3px 25px 3px 3px; } #contact select { color:#666666; display:inline; float:left; margin:1px 0 3px 0; } #contact .check-wrap { display:block; float:left; margin:3px 0 5px 0; width:300px; } #contact .check-wrap input { clear:left; float:left; margin:1px 3px 0 0; } #contact .check-wrap label { clear:none; float:left; font-size:.8em; line-height:15px; margin:0 0 3px 0; text-align:left; width:250px; } #contact textarea { width:300px; height:150px; float:left; display:inline; border:1px solid #ccc; background:#fff; } input.form-button { color:#0076BD; float:right; display:inline; margin:10px 15px 0 0; padding:5px 10px; clear:left; border:0; font:16px Helvetica, Arial; background:url(../_img/nav-t.jpg) top left repeat-x; -moz-border-radius: 5px; -webkit-border-radius: 5px; border:1px solid #ccc; } input.form-button:hover { background:#0076BD url(../_img/nav-hover-bg.jpg) top left repeat-x; color:#fff; } #contact input.is_required.valid { background:#fff url(../_img/valid.png) 235px center no-repeat; } #contact input.is_required.invalid { background:#fff url(../_img/invalid.png) 235px center no-repeat; } #contact input.is_required { background:#fff url(../_img/required.png) 235px center no-repeat; } /* AGENCY */ #agency { } #agency h2.top { text-align: center; margin:0 0 10px 0; font-size:22px; } #agency h6.top { text-align: center; margin:0 0 15px 0; font-size:1.2em; } #agency #left { float:left; display:inline; width:270px; padding:35px 10px 10px 10px; margin:0;} #agency #left h6 { width:100%; float:left; display:inline; margin:0 0 3px 0; color:#000; font:16px Lucida Grande; font-weight:bold; } #agency #left img { float:left; display:inline; margin:0 10px 0 0; padding:5px; background:#fff; } #agency #left p { float:left; display:inline; margin:0 10px 20px 0; } .large { float:left; display:inline; margin:3px 0 0 0; padding:10px 10px 8px 8px; font:2.4em Helvetica, Arial; font-weight:900; background:#FFFFCC; color:#0076BD; } .cblock { width:230px; padding:10px; float:left; clear:both; border:1px solid #e6e6e6; background:#fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin:5px 0; } #agency #left .cblock h6 { color:#666; } #agency #right { width:688px; padding:35px 0 0 0; background:url(../_img/agency-top.jpg) left top no-repeat; } #agency #right h6 { margin:0 0 290px 0; color:#000; font:16px "Lucida Grande" Arial, Helvetica; font-weight:bold; } #agency #right #col-1 { width:160px; float:left; display:inline; padding:0 20px 0 0; } #agency #right #col-2 { width:230px; float:left; display:inline; padding:0 20px 0 0; } #agency #right #col-3 { width:250px; float:left; display:inline; padding:0 0 0 0; } #agency #right ul { list-style-type:disc; margin:5px 0 0 15px; } #agency #right ul li { margin:0 0 5px 0; } /* New Slideshow */ .slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */height:320px; margin:0; position:relative; overflow:hidden; width:670px; } /* These 2 lines specify style applied while slider is loading */ .csw {background:#fff; overflow:hidden} .csw .loading {margin:0; left:200px; position:absolute; top:100px;} .stripViewer { /* This is the viewing window */ position:relative; overflow:hidden; border:none; /* this is the border. should have the same value for the links */ margin:auto; width:670px; /* Also specified in .stripViewer .panelContainer .panel below */ height:320px; clear:both; background:#fff; } .stripViewer img { border:1px solid #e6e6e6; padding:9px; } .stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS */ position:relative; left:0; top:0; width:100%; list-style-type:none; /* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */ } .stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */ float:left; height:100%; position:relative; width:670px; /* Also specified in .stripViewer above */ } .stripNav { /* This is the div to hold your nav (the UL generated at run time) */ margin:auto; position:absolute; bottom:19px; left:19px; z-index:10; } .stripNav ul { /* The auto-generated set of links */ list-style: none; } .stripNav ul li { float:left; margin-right:5px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */ } .stripNav a { /* The nav links */ -moz-border-radius:5px; -webkit-border-radius:5px; font-family:Lucida Grande; font-size:12px; font-weight:bold; text-align:center; line-height:21px; background:url(../_img/trans.png) repeat; color:#333; text-decoration:none; display:block; padding:0 7px; } .stripNav li a:hover { background: #fff; } .stripNav li a.current { background:#fff; } .stripNavL, .stripNavR { /* The left and right arrows */ position:absolute; top:230px; text-indent:-9000em; } #start-stop { display:none; } /* SLIDER */ #slider { width: 760px; margin: 0; position: relative; } #slider .scroll img { width:549px; } .scroll { height: 700px; width: 550px; margin:0 !important; overflow: hidden !important; clear: left; position:relative; } .scrollContainer div.panel { padding:0 0 0 1px; height: 600px; width: 549px; overflow: hidden; } .scrollButtons { position: absolute; top: 150px; cursor: pointer; display:none; } .scrollButtons.left { left: -20px; } .scrollButtons.right { right: -20px; } .hide { display: none; } #pinfo { width:190px; padding:85px 0 0 20px; position:absolute; top:0; right:0; } #pinfo h6 { float:left; clear:left; margin:15px 0 0 0; } #pinfo #arrows { float:left; margin:0; } #pinfo #arrows img { padding:4px; background:#E6E6E6; } #pinfo #arrows img:hover { background:#0076BD; } #pinfo #arrows img.left { -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; } #pinfo #arrows img.right { -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; } #footer { font-size:10px; float:left; display:inline; padding:5px 10px; background:#E6E6E6; width:940px; margin:40px 0 50px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #bottom-wrap { float:left; clear:both; margin:0; width:100%; } #bottom { width:960px; margin:10px auto 30px auto; overflow:hidden; font-size:10px; color:#666; } #bottom form { line-height:12px; margin:10px 0;} #bottom form ul { margin:5px 0 0 0;} #bottom p { line-height:13px; margin:5px 0;} #bottom a {color:#444;} #bottom .footer-block { width:170px; float:left; display:inline; margin:10px 10px 0 0; padding:10px; } #bottom .footer-block2 { width:480px; float:left; display:inline; margin:20px 10px 0 0; padding:10px; border:1px solid #dbdbdb; background:#bdbdbd url(../_img/footer-signup-bg.jpg) top left repeat-x; -moz-border-radius: 7px; -webkit-border-radius: 7px; } #bottom .footer-block3 { width:240px; float:left; display:inline; margin:10px 0 0 0; padding:0; } #footer-build a { display:block; width:240px; height:120px; background:url(../_img/build.jpg) left top; } #footer-build a:hover { width:240px; height:120px; background:url(../_img/build.jpg) 240px top; }