/* ---------------------------------------------------------- BSD CSS TABLE OF CONTENT 01 - GLOBAL BROWSER RESET 02 - COMMON STYLE 03 - LAYOUT 04 - HOMEPAGE 05 - SUBPAGES 06 - FRAMEWORK 07 - UTILITY COLOR GUIDE (Main Site Colors and their Hex Codes) ---------------------------------------------------------- */ /* 01 =GLOBAL BROWSER RESET ---------------------------------------------------------- */ /* YUI Reset version: 2.7.0 */ html { color: #000; background: #FFF; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; } address,caption,cite,code,dfn,em,strong,th,var,optgroup { font-style: inherit; font-weight: inherit; } del,ins { text-decoration: none; } li { list-style: none; } caption, th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; } q:before, q:after { content: ''; } abbr,acronym { border: 0; font-variant: normal; } sup { vertical-align: baseline; } sub { vertical-align: baseline; } /*because legend doesn't inherit in IE */ legend { color: #000; } input,button,textarea,select,optgroup,option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; } /*@purpose To enable resizing for IE */ /*@branch For IE6-Win, IE7-Win */ input,button,textarea,select { *font-size: 100%; } /* 02 =COMMON STYLE ---------------------------------------------------------- */ body { font: 62.5% Georgia, "Times New Roman", serif; color: #000;} .base { font-size: 13px; line-height: 16px;} #intro h1 { font: bold 34px/1.1em "Helvetica Neue", Helvetica, sans-serif; text-transform: lowercase; color: #fff; margin: 35px 0 0px;} #intro h1 .blue-title { font-size: .5em; color: #5C91CD; line-height: 1em;} .base h2 { font-size: 17px; font-family: Helvetica, sans-serif; line-height: 18px; font-weight: bold; margin: 25px 0 10px; color: #0C2864; text-transform: lowercase;} .base h2 a { color: #0C2864; } .base h3 { font-style: italic; margin-bottom: 10px;} .base p { margin-bottom: 15px; line-height: 19px;} a { text-decoration: none; } .base a { color: #09f; text-decoration: none; cursor: pointer;} .base a:hover { text-decoration: underline; } blockquote{ background: url(/page/-/images/wrapper/bg-blockquote.jpg) no-repeat; font-size: 12px; margin: -10px 0 15px 35px; padding: 10px 0 0 39px; } .base ul, ol { margin: 15px 0; padding-left: 25px; list-style-position: outside;} .base ul li { list-style-type: disc; } .base ol li { list-style-type: decimal; } .base li ol, .base li ul { margin: 0; } .base li ul { list-style-type: disc; } .base li ol { list-style-type: decimal; } .base a.more { display: block; text-align: right; font-style: italic; margin-top: -10px; overflow: hidden;} /* @group 03 - STRUCTURE */ html { background: #2c70b4; } body { background: url(/page/-/images/wrapper/background-6.jpg) no-repeat center top; min-width: 980px;} #container { width: 980px; margin: 0 auto 10px; } #masthead { width: 960px; height: 100px; overflow: hidden; margin: 0 10px; position: relative;} #masthead a.title { width: 290px; height: 90px; display: block; float: left; text-indent: -9999px; } #masthead #connect { background: #001134; float: right; margin-top: 30px; padding: 3px;} #head { margin: 0px; border-left: 10px solid #01123d; border-right: 10px solid #01123d} ul#navigation { height: 42px; width: 660px; float: left; } ul#navigation li { text-transform: lowercase; font-size: 14px; line-height: 42px; vertical-align: middle; float: left; display: block; } ul#navigation li a { color: #fff; padding: 4px 12px 1px; margin: 10px 0; display: block; height: 17px; } ul#navigation li a:hover { color: #0c2864; } ul#navigation li.contact a { border: none; padding-right: 0;} #search { float: left; color: #fff; margin: 7px 0 0 10px; } #search input.text { color: #666; padding: 3px 8px; width: 165px; vertical-align: middle; margin-right: 5px; height: 15px; } #search input.search { vertical-align: middle; } #body { background: #fff url(http://www.bluestatedigital.com/page/-/images/wrapper/bg-main.jpg) repeat-y 0 100%; width: 960px; padding: 0 10px;} #body #content { width: 640px; float: left;} #body #sidebar { width: 320px; float: right; background-color: #d6d6d6; display: inline; padding-bottom: 10px; font-family: Helvetica, serif;} #body.onecol { background: #fff none; border-left: 10px solid #01123d; border-right: 10px solid #01123d; padding: 0;} #body.onecol #content { width: 100%; } #page-content { float: left; padding: 20px; } #intro { background-color: #73bbff; padding: 15px 20px; color: #00133b; font: 1em/1.3em Arial, sans-serif; } #intro a { color: #00133b; text-decoration: none; border-bottom: 1px dotted #00133b; display: inline-block;} #intro a:hover { color: #012b85; } #intro .subNav { text-align: left; color: #fff; font: 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; margin-top: 10px; display: block;} #intro .subNav a { color: #fff; border: none;} #intro .subNav a:hover { text-decoration: underline; } #intro .subNav .active { font-weight: bold; color: #36c;} #intro .subNav img { vertical-align: middle; height: 18px; margin: -3px 2px 0;} #intro .subNav .buttons { display: inline; margin-left: 10px;} #intro .subNav ul { float: left; display: block; margin: 5px 0 0 0; padding: 0;} #intro .subNav ul li { float: left; color: #fff; margin-left: 5px; border-left: 1px solid #fff; padding-left: 5px; font: 1em Arial, Helvetica, Geneva, sans-serif; list-style-type: none;} #intro .subNav ul li a { color: #fff; border-bottom: none; } #intro .subNav ul li a:hover { text-decoration: underline; } #intro .subNav ul li.first { border-left: 0; margin-left: 0; padding-left: 0;} #intro .subNav ul li.nav_active a { color: #36c; font-weight: bold; text-decoration: none; } #intro .subNav ul li.nav_active a:hover { text-decoration: none; cursor: default;} #intro .subNav li.noborder { border: none; } #body #content #content-text { margin: 20px; } #sidebar h3 { font-size: 19px; color: #102c69; text-transform: lowercase; margin-bottom: 20px; line-height: 20px; } #sidebar #spotlight { width: 279px; background: url(/page/-/images/wrapper/bg-sidebar-ourwork.png) no-repeat; padding: 15px 20px 20px 20px; height: 285px; position: relative; } #spotlight div.entry { font-size: 13px; } #spotlight h4 { font-weight: bold; color: #102C69} #spotlight h4 a { color: #102C69; } #spotlight p { color: #010e2b;} #spotlight img { margin-bottom: 15px; border: 3px solid #888; position: relative; left: 34px; } #spotlight a:hover { color: #666; } #spotlight a#client-next { background: url(/page/-/images/wrapper/btn-ourwork-next.png) no-repeat;width: 25px; height: 133px; display: block; z-index: 1000; text-indent: -9999px; overflow: hidden; position: absolute; left: 274px; top: 58px; cursor: pointer; } #spotlight a#client-prev { background: url(/page/-/images/wrapper/btn-ourwork-previous.png) no-repeat;width: 25px; height: 133px; display: block; z-index: 1000; text-indent: -9999px; overflow: hidden; position: absolute; left: 20px; top: 58px; cursor: pointer;} #sidebar #spotlight.contact h3 { width: 320px; height: 42px; text-indent: -9999px;} #sidebar #spotlight.contact h4 { font-family: Helvetica, sans-serif; font-size: 1.15em; font-weight: bold; margin-bottom: 0px;} #sidebar #spotlight.contact p { margin-bottom: 20px; } #sidebar #feedback { width: 279px; background: url(http://www.bluestatedigital.com/page/-/images/wrapper/bg-sidebar-buzz.png) no-repeat; padding: 20px;} #sidebar #feedback p { padding: 0; margin: 0;} #sidebar #feedback .quote { background: #fff; width: 230px; margin: 0 auto; color: #102c69; font: 16px Georgia, Times, serif; line-height: 22px; padding: 15px; } #sidebar #feedback .quote-author { background: url(/page/-/images/wrapper/bg-sidebar-buzzquote.jpg) no-repeat; display: block; text-align: center; line-height: 15px; padding: 10px 0 0 20px; font-size: 13px; } #sidebar #feedback .quote-author a { color: #000; } #sidebar #bsd-wire { width: 279px; padding: 20px; background: url(/page/-/images/wrapper/bg-sidebar-bsdwire.png) no-repeat; font-size: 13px; line-height: 17px; position: relative;} #sidebar #bsd-wire h3 { margin-bottom: 10px; } #sidebar #bsd-wire div.tabset { position: absolute; top: 25px; left: 225px; text-transform: lowercase; width: 250px;} #sidebar #bsd-wire div.tabset a { color: #102c69; width: 30px; display: inline-block; position: relative; bottom: 1px;} #sidebar #bsd-wire div.tabset a.active { font-weight: bold; } #sidebar #bsd-wire div.entry { padding: 10px 5px; border-bottom: 1px solid #ccc; position: relative; right: 5px;} #sidebar #bsd-wire div.entry h3 { font-weight: bold; font-size: 12px; line-height: 15px; vertical-align: middle; margin: 0; text-transform: none;} #sidebar #bsd-wire #blogtab div.entry h3 { width: 190px; float: left; } #sidebar #bsd-wire div.entry.hovered { background: #ccc; } #sidebar #bsd-wire div.entry img { margin: 0; padding: 0 10px 0 0;} #sidebar #bsd-wire div.entry h4 { text-align: left; margin: 0; font-style: italic; color: #666; font-size: 11px; line-height: 12px;} #sidebar #bsd-wire h3 a { color: #102C69; } #sidebar #bsd-wire h4 { text-align: right; margin-top: 10px; } #sidebar #bsd-wire h4 a { color: #102c69; } #footer { padding: 25px 15px 15px 7px; height: 137px; font-family: "Helvetica Neue", Arial, sans-serif; width: 938px; border: 10px solid #01123d; border-top: 0; background: #0c2864 url(/page/-/images/wrapper/bg-footer-dark.png) no-repeat; } #footer #info { float: left; width: 294px; color: #2C70B4; font-size: 11px; line-height: 15px; } #footer #info a { color: #1ab2e5; } #footer #info a:hover { border-bottom: 1px dotted #6c7da0; } #footer #info h4 a { display: block; width: 170px; height: 25px; text-indent: -9999px;} #footer #info ul#locations li { float: left; margin-right: 7px;} #footer #info ul#locations li a { color: #2C70B4; } #footer #locations { margin: 5px 0px 20px;} #footer ul#sitemap { float: left; margin-left: 13px; text-transform: lowercase;} #footer ul#sitemap li { float: left; font-size: 11px; color: #6c7da0; line-height: 1.25em; margin: 0 10px 5px 0; } #footer ul#sitemap li ul { margin-left: 25px; } #footer ul#sitemap li a { color: #1faadc; } #footer ul#sitemap li ul li { float: none; } #footer ul#sitemap li ul li.first { font-size: 13px; margin-bottom: 10px;} #footer ul#sitemap li ul li.first a { font-weight: bold; color: #fff; } #footer ul#sitemap li a:hover { border-bottom: 1px dotted #6c7da0; } /* @end */ /* @group 04 - HOMEPAGE ELEMENTS */ body#home #feature { background: #000; position: relative; width: 100%; height: 306px; overflow: hidden; } body#home #feature .fitted { cursor: pointer; } body#home #feature .feature-left { width: 260px; height: 246px; float: left; overflow: hidden; padding: 30px; background: url(/page/-/images/wrapper/feature-bg.jpg) no-repeat; } body#home #feature .feature-left h3 { display: inline; text-transform: lowercase; color: #fff; font-size: 27px; font-weight: normal;} body#home #feature .feature-left h3.tag { font-weight: bold; color: #73bbff;} body#home #feature .feature-left a { color: #fff; font-weight: bold;} body#home #feature .feature-left a.action { position: absolute; bottom: 55px; left: 30px;} body#home #feature .feature-text { position: absolute; z-index: 1; } body#home #feature p { color: #fff; font: 13px/18px Helvetica, sans-serif; margin-top: 15px;} body#home #feature .feature-image { position: absolute; left: 320px; top: 0; z-index: 2;} body#home #feature #pager { position: absolute; left: 340px; z-index: 1000; bottom: 20px; width: 600px;} body#home #pager a { font: bold 18px Helvetica, Arial, sans-serif; color: #333; display: block; float: left; background: #169acb; width: 35px; margin: 0 1px; text-align: center; padding: 6px 0; opacity: .6;} body#home #pager a.activeSlide { opacity: 1; color: #fff;} #home-secondary { background: url(/page/-/images/wrapper/bg-homepage-secondary.png) no-repeat; height: 124px; padding: 20px;} #home-secondary div.box { width: 292px; float: left;} #home-secondary h3 { color: #fff; text-transform: lowercase; font-size: 19px; margin-bottom: 10px; } #home-secondary li { font: 11px Helvetica, Arial, sans-serif; color: #1faadc; line-height: 13px; margin-bottom: 5px;} #home-secondary li a { color: #1faadc; } #home-secondary li a:hover { color: #fff; } #home-secondary div.our-services, #home-secondary div.our-clients { border-right: 1px solid #071d51; margin-right: 20px;} #home-secondary div.column { float: left; width: 140px; margin-right: 10px;} #home-secondary div.column.right { margin: 0; } #home-secondary div.our-services li { } #home-secondary div.our-technology p { font: 12px/18px Helvetica, Arial, sans-serif; color: #1faadc; margin-bottom: 15px;} #home-secondary div.our-technology p a { color: #1faadc; } body#home #blog { width: 640px;} body#home #blog .title { position: relative; width: 640px; height: 42px; } body#home #blog h2 { width: 640px; height: 42px; text-indent: -9999px; overflow: hidden; background: url(http://www.bluestatedigital.com/page/-/images/wrapper/title-blog-homepage.png) no-repeat; position: absolute; z-index: 1;} body#home #blog h2 a { display: block; width: 580px; height: 42px; } body#home #blog a.rss { width: 16px; height: 15px; display: block; background: url(http://www.bluestatedigital.com/page/-/images/wrapper/btn-rss-blog.jpg) no-repeat 0 0; text-indent: -9999px; position: absolute; z-index: 100; right: 20px; top: 13px;} #blog #content .entry, #content #blog .entry { margin: 0 15px; border-bottom: 1px solid #d1d4d7; color: #111; padding: 15px 0;} #blog #content .entry a, #content #blog .entry a { color: #102C69; } #blog #content .entry a:hover, #content #blog .entry a:hover { border-bottom: 1px dotted #097;} #blog #content .entry .text, #content #blog .entry .text { float: left; width: 520px;} #blog #content .entry h3, #content #blog .entry h3 { font-size: 20px; line-height: 24px; margin-bottom: 5px;} #blog #content .entry h3 a, #content #blog .entry h3 a { text-decoration: none;} #blog #content .entry .byline, #content #blog .byline { color: #666; font-size: 11px; display: block; margin-bottom: 10px; text-transform: uppercase; } #blog #content .entry .byline a, #content #blog .entry .byline a { text-decoration: none; color: #666; } #blog #content .entry p, #content #blog .entry p { font-size: 13px; line-height: 1.5em; display: inline;} #blog #content .entry p a, #content #blog .entry p a { text-decoration: underline;} #blog #content .entry p.more a, #content #blog .entry p.more a { text-decoration: none; } #blog #content .entry p.more a:hover, #content #blog .entry p.more a:hover { border-bottom: 1px dotted #097; } #blog #content .entry img, #content #blog .entry img { float: left; margin: 0 20px 20px 0; border: 1px solid #d1d4d7;} body#home #blog h4 { padding: 20px 90px 20px; font-size: 13px; } body#home #blog h4 a { color: #102c69; text-decoration: none;} body#home #blog h4 a:hover { text-decoration: underline; } /* @end */ /* @group 05 - SUBPAGE ELEMENTS */ #body #content #content-body { margin: 20px; } div.client-logos img { margin-right: 10px; } #blog #content #content-body { margin-top: 5px; } #blog.interior #content-body div.entry { margin: 0; } #blog.interior #content-body div.entry a { color: #102c69;} #blog.interior #content-body div.entry h3 { font-style: normal; } #blog.interior #content-body div.entry a:hover { border-bottom: 1px dotted #097; } #blog.interior #content-body div.entry .byline a { color: #666; } #content-body .pagination { margin: 10px 15px; text-align: right; padding: 10px 0; } #content-body .pagination { margin-top: 0; } #content-body .pagination a { color: #888; padding: 0 2px;} #content-body .pagination b { border: 1px solid #9fcde7; padding: 1px 4px; background-color: #dee9ef; color: #67a9d6; } #content-body p.spotlight-blurb { color: #09f; font: italic 1.75em/1.3em Georgia, "Times New Roman", Times, serif; margin-bottom: 25px; width: 500px;} #content-body .example { background: #73bbff; width: 170px; padding: 15px; margin: 15px 15px 15px 0;float: left;} #content-body .example p { color: #fff; font: italic 1.05em/1.4em Georgia, "Times New Roman", Times, serif; margin: 0;} #content .subSubnav { text-align: right; font-size: .9em; text-transform: lowercase; color: #666; } #sidebar #pages-sidebar { text-align: center; margin-top: 65px; color: #333;} #sidebar #pages-sidebar h3 { font-size: 1.4em; margin-bottom: 2px;} #sidebar #pages-sidebar em { color: #666; font-size: .9em;} #sidebar #pages-sidebar .screenshot { margin: 25px auto; font-style: italic; font-size: .95em; width: 216px;} #sidebar #pages-sidebar img { border: 8px solid #c6c6c6; margin-bottom: 5px;} #content-body img.feature-image { width: 640px; } /* Offices */ #content h3.address { line-height: 1.4em; text-align: left; padding-bottom: 10px;} #content-body #offices { border-bottom: 1px solid #dedede; margin-bottom: 15px;} #content-body .office { width: 160px; float: left; display: inline; margin: 0 22px 15px; } #content-body .office img { width: 150px; height: 90px; border: 5px solid #dedede;} #content-body .office h4 { font-weight: bold; margin-top: 5px; text-transform: lowercase; color: #0c2864; font-family: Helvetica, sans-serif;} /* Blog */ div.image-box img { border: 1px solid #a7a7a7; } div.image-box h5.caption { font-size: .9em; text-align: center; color: #555; margin: 5px;} #blog.interior #six-questions { width: 200px; font-size: .9em; border: 1px solid #a7a7a7; padding: 10px; background: #f3f3f3; margin: 0px 0 10px 15px;} #blog.interior #six-questions h2 { margin-top: 0; } /* Case Studies */ #main #body .screenshot { float: right; width: 160px; text-align: center; padding: 15px; background: #d6d6d6; border: 1px solid #999; margin: 0 0 20px 20px; font-size: 1em; } #main #left #body .screenshot p { color: #333; font-style: italic; margin-bottom: 0; } #main #body img.casestudy-screenshot { border: 4px solid #a7a7a7; margin-bottom: 10px;} /* Staff */ #main #left #body .staff h2 { margin-bottom: 0px; } #main #left #body .biography { border-bottom: 1px solid #a7a7a7;} /* Press Center */ #main #left #body .pressDate { float: left; margin: 25px 10px 0 0; width: 115px; font-weight: bold;} #main #left #body .pressClip { float: left; margin: 25px 0 0 0; width: 470px; } #main #left #body .pressClip h3 { margin-bottom: 0px; font-weight: bold; } #main #left #body .pressClip p { margin: 0; font-size: .95em;} /* Video Center */ #main #left #feature .description { padding: 15px; border-bottom: 1px solid #a7a7a7; } #main #left #feature .description h2 { font: 1.3em/1.25em Georgia, serif; margin-bottom: 3px;} #main #list.videos h2 { font: bold 1.5em/1.4em Helvetica, sans-serif; color: #0c2864; text-transform: lowercase; margin: 15px 0 5px;} #main #left #feature .description p { font: .95em/1.5em Georgia, "Times New Roman", Times, serif; color: #000; margin: 0px;} #main #left #feature .description .byline { color: #666; font-size: .8em; font-style: italic; display: block; margin-bottom: 10px; line-height: 1.25em;} #main #left #list.videos { font-size: .9em; padding-top: 0;} #main #left #list.videos .entry img { margin-bottom: 0; } #main #left #list.videos .entry p { margin-bottom: 0; } /** Our Clients Page **/ div.client-logos { border: 1px solid #a7a7a7; padding: 10px; } div.client-logos img { margin-right: 25px; } /* Signup Forms */ #signup {width: 425px; margin: 0px auto;} #signup .text { border: 1px solid #a7a7a7; padding: 3px 5px; font: 11px Verdana, sans-serf; color: #666; margin-top: 4px;} #signup select { margin-top: 4px; } #signup td {padding-top: 7px;} #signup .input_email {width: 415px;} #signup .input_firstname {width: 190px;margin-right: 11px;} #signup .input_lastname {width: 200px;} #signup .input_addr1 {width: 415px;} #signup .input_addr2 {width: 415px; } #signup .input_city {width: 185px; margin-right: 10px;} #signup .select_state_cd {width: 100px; margin-right: 10px;} #signup .input_zip {width: 95px; } #signup .select_country {width: 175px; margin-right: 15px;} #signup .input_phone {width: 178px; margin-right: 8px;} #signup input.submit {margin-top: 10px;} #signup input.checkbox, #signup input.radiobutton {margin: 5px 5px; vertical-align: middle;} #signup label { vertical-align: middle; } #signup textarea {width: 415px; border: 1px solid #a7a7a7; padding: 3px 5px; font: 11px Verdana, sans-serf; color: #666; margin: 4px 0 5px 0;} #signup span { display: inline;} .ny-party-signup { text-align: center; margin-bottom: 10px; } /* Search */ #searchResultsForm {background: #0c2864; padding: 10px; text-align: center; margin-bottom: 15px;} #searchResultsForm input {vertical-align: middle; padding: 3px 5px;} #searchResultsForm #searchQ {width: 420px; margin-right: 4px;} #searchResultsForm #searchSubmit {} /* Comments */ #main #comments .commentInfo { margin-bottom: 10px;} #main #comments .commentName { font-size: 1.4em; font-weight: bold;} #main #comments .commentInfo .commentDate { color: #666; font-weight: normal; } #main #comments .comment p { margin: 0;} #main #comment_form fieldset { width: 350px; margin: 0 auto; } #main #comment_form .text, #main #comment_form textarea { border: 1px solid #999; padding: 2px 4px; font: 10.5px Verdana, Arial, sans-serif; color: #666; } #main #comment_form .text { width: 250px; height: 15px; } #main #comment_form textarea { width: 250px;} #main #comment_form label { display: inline-block; vertical-align: top; width: 80px; } #captcha_container{ background: transparent; width: 330px; } #captcha_container #captcha_buttons{ float: right; width: 25px; margin: 3px 0 0 10px; } #captcha_container #recaptcha_image{ width: 300px; } #captcha_container #recaptcha_image embed{ display: block; vertical-align: top; margin-bottom: 23px; } #captcha_container #recaptcha_image a { display: block; } #captcha_help_container{ display: none; } a:active, a{ outline: none; } /* @end */ /* 07 =UTILITY ---------------------------------------------------------- */ .stretcher { clear: both; height: 1px; visibility: hidden; } .nomargin { margin-bottom: 0px; } .floatl {float: left; margin: 0; padding: 0 10px 10px 0;} .floatr {float: right; margin: 0; padding: 0 0 10px 10px;} .floatr-deep {float: right; margin: 0 0 20px 10px; } .floatl-nomargin { float: left; margin: 0; padding: 0;} .floatr-nomargin { float: right; margin: 0; padding: 0;} img.border { border: 1px solid #a7a7a7; } .clear {clear:both; height:0; margin:0; font-size: 1px; line-height: 0;} .required { color: red; } i, em { font-style: italic; } b, strong { font-weight: bold; } sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative;} sup { bottom: 1ex; } sub { top: .5ex; } .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix {display:inline-block;} .clearfix {display:block;}