/************************************************************************* ************************************************************************** NREPP Website STYLES Wireframes by Stephanie Hay, Tellenger, Inc.: www.tellenger.com Designed and Styled by Ben Hofer, Ben Hofer Creative: www.benhofercreative.com Visual Design Copyright 2010 Ben Hofer *************************************************************************** **************************************************************************/ /************************************************************************** Settings **************************************************************************/ @charset "UTF-8"; /* Eric Meyer's Reset ***************************/ 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, 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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } ul { list-style: none; padding: 0; margin: 0; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* General Settings ********************************/ /* settings */ .clear {clear: both;} .clearleft {clear: left;} .clearright {clear: right;} span.separator {display: none;} img.alignleft {float: left; margin-right: 20px;} img.alignright {float: right; margin-left: 20px;} img.aligncenter {margin: 0 auto;} #footer ul li.last {margin-right: 0; padding-right: 0; border-right: none;} #header ul li a.last {border-right: 1px solid #fff;} div.tri-col-first {width: 30%; margin-right: 3.333%; float: left;} div.tri-col-second {width: 30%; margin-right: 3.333%; float: left;} div.tri-col-third {width: 30%; float: left;} div.four-col-first, div.four-col-second, div.four-col-third {width: 22%; margin-right: 3%; float: left;} div.four-col-fourth {width: 22%; float: left;} .search-submit, .submit { background:#fc6c24 url(images/orange-btn-bg.jpg) repeat-x; border: 1px solid #555; height: 30px; line-height: 30px; font-size: 14px; text-align: center; cursor:pointer; color: #fff; font-family:Verdana,Helvetica,Arial,sans-serif} .search-submit:hover, .search-submit:focus, .submit:hover, .submit:focus {background-color:#97CD01; background-image: none;} #int-box-content p.important input.search-submit { float: right; } #content a.submit {text-align: center; color: #fff;display: block; margin-bottom: 20px;} #sidebar a.submit {height: 40px; line-height: 40px;font-size: 14px;} /* tables */ #int-box-content table.tabular {border: 2px solid #97cd01; background-color: #fff;} #int-box-content table.tabular tr.odd {background-color: #efefef;} #int-box-content table.tabular td {border-right: 1px solid #97cd01; font-size: 14px;} #int-box-content table.tabular th {color: #fff; border-bottom: 1px solid #97cd01; background-color: #333; font-size: 14px; } /* general visual details */ #int-box ul, #int-box ol {margin-bottom: 20px; padding: 0; margin-left: 40px;} #int-box ul {list-style: disc;} #int-box ol li, #int-box ul li {font-size: 12px; line-height: 18px;} /* added by rparvin 7/19/10 */ #int-box ul li ul {list-style: circle; } #int-box ul.square {list-style: square;} /* added by rparvin 4/29/10 */ #int-box-content dt { margin-bottom: 10px; padding: 0; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; } #int-box-content dd { margin-bottom: 20px; margin-left: 20px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:14px; } #int-box-content dd p {font:normal 14px Verdana, Helvetica, Arial, sans-serif;} /* end add */ .skipNav {display:block; position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;} /* typography */ h1,h2,h3,h4,h5,h6,p,li,a,blockquote,label,table { font-family: Verdana, Helvetica, Arial, sans-serif; text-decoration: none;} h1,h2,h3,h4,h5,h6,p,li {margin-bottom: 5px;} #int-box h5 {font-size: 14px; } p, td {font-size: 14px; line-height:20px; margin-bottom: 20px; } label, td {font-size: 12px; line-height:20px; margin-bottom: 20px; } #content {color: #fff;} #content a {color: #97cd01;} #int-box {color: #000;} #footer {color: #0e295f;} em {font-style: italic;} strong {font-weight: bold;} /* tables */ table {margin-bottom: 20px; width: 100%;} th {font-weight: bold;} td,th {padding:10px; font-size: 14px;} /************************************************************************** Primary Layout ***************************************************************************/ /*rparvin 09/28/10 changed from hidden to scroll for overflow-x*/ body {background: url(images/body-bg.jpg) repeat-x; margin: 0!important;overflow-x: visible} /*Chris Byrum - change 5/15/10, updated header and content to deal with nav overflow, and make all primary container consistent min-width*/ #header {padding: 0; height: 127px; background:url(images/header-bg.jpg) repeat; min-width: 1030px;} /*rparvin 10/01/10 changed width from 960px */ #content {background: #113069; padding: 30px 30px 30px 40px; clear: both; border-top: 3px solid #97cd01; min-width: 960px;} #wrapper {float:right;margin-left:-275px;width:100%;} #int-box {margin: 0 0 0 245px; -moz-border-radius: 10px; min-width: 460px;} #sidebar {width: 220px; float: left; margin-right: 15px;} #footer {padding: 0 30px 0 30px; clear: both; background:url(images/footer-bg.jpg) repeat-x; min-width: 970px;} /*rparvin 10/01/10 changed width from 960px */ /************************************************************************** Header & Primary Navigation ***************************************************************************/ h1 {background: url(images/logo-tagline.png) no-repeat; float: left;width:542px; height: 64px; text-indent: -9999px; margin: 30px 0 0; left:10px;position:relative;} h1 a {display: block; height: 64px;} /* primary nav */ #header>ul {float: right; margin: 56px -6px 30px 0; position: static; } #header>ul>li {float: left; font-size: 12px; letter-spacing: -.03em;} #header>ul>li>a {color: #0e295f; display: block;height: 30px; line-height: 30px; border-right: 1px solid #555; padding: 0 10px;} #header>ul>li>a:hover, #header>ul>li>a:focus {background-color:#7aa602;} /* drop-downs */ #header>ul>li.hover>a {color: #fff; border-right: 1px solid #fff; } #header ul li ul {display: none;} #header ul li ul {margin-left: 0; padding: 2px 0 5px 0; position: absolute; z-index: 5; width: 180px; height: auto;background:#97CD01 url(images/dd-bg.jpg) repeat-x;} /*top: 85px; */ #header ul li.last ul {margin-left: -39px;} #header ul li ul li {float: none; color: #fff;margin:0; border-right: none;} #header ul li ul li a {margin: 5px; filter: alpha(opacity = 90);opacity: 0.9; left: 0; padding: 7px 0 7px 10px!important; color: #fff; text-transform: none; display: block;} #header ul li.hover ul li a {border:none;} #header ul li ul li a:hover, #header ul li ul li a:focus { color: #fff; background-color:#7aa602; opacity: 1;filter: alpha(opacity = 100); border: none;} *+html #header ul li ul li {margin-bottom: 5px;} /***************************************************************************** Content ********************************************************************************/ /* Intervention Box *****************************/ /* Homepage **************/ #int-box #box-nav { top: -27px; list-style: none; margin: 0; float: right; width: 600px;} /* CHG MAKE PERM? */ #int-box #box-nav li {float: left; width: 33.33333%; margin-bottom: 0;} #int-box #box-nav li a {color: #fff;height: 22px; display: block; background: url(images/tab-bg.jpg); padding: 5px 0 0 15px; font-size: 13px;} #int-box #box-nav li.active a {background: url(images/tab-bg-active.jpg); color: #000;} #int-box #box-nav li.active a:hover, #box-nav li.active a:focus {background: url(images/tab-bg-active.jpg);} #int-box #box-nav li a:hover, #box-nav li a:focus {background: url(images/tab-bg-hover.jpg);} .home #int-box-content {padding-top:60px; min-width: } .home #int-box-content h3 {font-weight: bold; margin-bottom: 10px;} #int-box-content {padding: 40px 20px; background: #bbcdef url(images/tabbed-box-bg.jpg) repeat-x; clear: both;} #int-box-content h2 {font-size: 18px; font-weight: bold; margin: 0 0 5px 0; position: relative;} #int-box-content p.important {font-size: 14px; line-height: 20px; position: relative;} /*Chris Byrum - change 5/22/10, updated colors to be easier to read*/ #int-box-content a {color: #181852; text-decoration: underline; } /*old color #3367cb*/ #int-box-content a:hover, #int-box-content a:focus { text-decoration: none; } /*old color #7eab01;*/ #int-box-content p.pagecontent {font-size: 14px; position: relative;} #int-box-content ul li { margin-bottom: 0px; font-size: 14px; } /*Chris Byrum - change 5/12/10, updated widths for form and input elements*/ #int-box-content form#basic_searchform {margin-bottom: 75px; height: 32px;width: 320px; background-color: #fff; border: 1px solid #999;} #int-box-content form#basic_searchform input {border: 1px solid #fff; width: 245px; float:left;margin-left: 5px; height: 25px; vertical-align: bottom;} /*Chris Byrum - change 5/22/10, updated width for increased button text*/ #int-box-content form#basic_searchform input#basic-submit { width: 60px; font-family:Verdana,Helvetica,Arial,sans-serif; height: 28px; margin-top: 2px; float: right; right: 2px; position: relative; font-size: 14px; background: #fc6c24 url(images/orange-btn-bg.jpg) repeat-x; color: #fff; border: 1px solid #999;} #int-box-content form#basic_searchform input#basic-submit:hover, #int-box-content form#basic_searchform input#basic-submit:focus { background-color:#97CD01; background-image: none; } /*RParvin - Google Custom Search 08/30/2010 */ #int-box-content form#basic_searchform {margin-bottom: 75px; height: 32px;width: 320px; background-color: #fff; border: 1px solid #999;} #int-box-content form#basic_searchform input {border: 1px solid #fff; width: 245px; float:left;margin-left: 5px; height: 25px;} /*Chris Byrum - change 5/22/10, updated width for increased button text*/ #int-box-content form#basic_searchform input#btnSearch { width: 60px; font-family:Verdana,Helvetica,Arial,sans-serif; height: 28px; margin-top: 2px; float: right; right: 2px; position: relative; font-size: 14px; background: #fc6c24 url(images/orange-btn-bg.jpg) repeat-x; color: #fff; border: 1px solid #999;} #int-box-content form#basic_searchform input#btnSearch:hover, #int-box-content form#basic_searchform input#btnSearch:focus { background-color:#97CD01; background-image: none; } /*RParvin - Google Custom Search 08/20/2010 */ #int-box-content form#cse-search-box {margin-bottom: 75px; height: 32px;width: 320px; background-color: #fff; border: 1px solid #999;} #int-box-content form#cse-search-box input {border: 1px solid #fff; width: 245px; float:left;margin-left: 5px; height: 25px;} /*Chris Byrum - change 5/22/10, updated width for increased button text*/ #int-box-content form#cse-search-box input#basic-submit { width: 60px; font-family:Verdana,Helvetica,Arial,sans-serif; height: 28px; margin-top: 2px; float: right; right: 2px; position: relative; font-size: 14px; background: #fc6c24 url(images/orange-btn-bg.jpg) repeat-x; color: #fff; border: 1px solid #999;} #int-box-content form#cse-search-box input#basic-submit:hover, #int-box-content form#cse-search-box input#basic-submit:focus { background-color:#97CD01; background-image: none; } img#home-img {float: right; position: relative; left: 20px; bottom: 60px;} /* Advanced Search Page **************/ .advanced-search div.row {margin-bottom: 20px;} /*Chris Byrum - change 5/22/10*/ .advanced-search div.row.row2 {margin-bottom: 5px;} #int-box .advanced-search div.row2 div.tri-col-second ul { margin-bottom: 5px; } #int-box .advanced-search ul {margin-left: 0!important;} #int-box .advanced-search ul li {font-size: 12px; margin-bottom: 5px; list-style: none!important; } .scroller-row ul {height: 100px; overflow-y: scroll; background-color: #fff; padding: 5px 0; border: 1px solid #555; margin-left: 0!important;} .scroller-row ul li {font-size: 12px; margin-bottom: 5px; list-style: none!important; } .scroller-rowNIH ul {height: 80px; overflow-y: scroll; background-color: #fff; padding: 5px 0; border: 1px solid #555; margin-left: 0!important;} .scroller-rowNIH ul li {font-size: 12px; margin-bottom: 5px; list-style: none!important; } /*Chris Byrum - change 5/12/10, fixed display of keyword field*/ .advanced-search input#keywords {width: 28%;} /*Chris Byrum - change 5/22/10, adjusted size of button*/ .advanced-search .search-submit {float:right; height: 40px; width: 150px; margin-bottom: 15px;} form.advanced-search { padding-bottom: 15px; } /*Chris Byrum - change 7/16/10, adjusted positioning of sort arrow on View Interventions list*/ table#grdSearchResults th a img { margin-bottom: -2px; } /* Search Results Page **************/ #sidebar.results ul li {cursor:pointer; color: #97cd02;} #sidebar.results ul li ul {margin-top: 15px;} #sidebar.results ul li ul li {margin:2px;} #sidebar.results li a { cursor:pointer; font-weight: bold;font-size:16px; background: url(images/cat-link-arrow.png) no-repeat right center; padding-right:45px; line-height: 18px; } #sidebar.results li.active a {background-image:url(images/cat-link-arrow-active.png);} /*Chris Byrum - change 5/22/10, CSS substitution for 'center' tags*/ #int-box-content div.center { text-align: center; } #int-box-content td.center { text-align: center; } /*#int-box-content th.center { text-align: center; vertical-align: bottom; } #int-box-content tr.center { text-align: center; vertical-align: bottom; }*/ /* Intervention Summary Page **************/ .summary #int-box-content .int-heading {padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid #000;} .summary #int-box-content h2 {font-size: 14px; font-weight: bold; line-height: 26px; width: 25%; float: left;} .summary #int-box-content a.link {font-size: 14px; font-weight: bold; background-color: #cdcdcd; margin-bottom: 5px;font-weight: normal; line-height: 26px;height: 26px; display:block; width: 150px; float: left; text-indent: 10px; margin-left: 4px;} .summary #int-box-content a.back { text-decoration: none; padding-left: 10px; background: #cdcdcd url(images/back-link.png) no-repeat left center;} .summary #int-box-content a.back:hover {cursor:pointer; color: #fff; background-color: #97cd01;} .summary #int-box-content a.link:hover {color: #fff; background-color: #97cd01;} .summary #int-box-content a.start-new { text-decoration: none; background: #cdcdcd url(images/start-new-link.png) no-repeat right center;} .summary #int-box-content a.start-new:hover {color: #fff; background-color: #97cd01;} .summary #int-box-content a.print-page {line-height: 26px;height: 26px; display: block; width: 15px; float: right; text-indent: -9999px; background: url(images/print-page.jpg) no-repeat;} .summary #int-box-content h2, .summary #int-box-content h3, .summary #int-box-content h4, .summary #int-box-content h5, .summary #int-box-content h6 { font-weight: bold; } /*Added by RParvin for PDF */ .summary #int-box-content a.PDF { text-decoration: none; float:right; background: #cdcdcd no-repeat right center;} .summary #int-box-content a.PDF:hover {color: #fff; background-color: #97cd01;} #int-box-content .int-sum h3 {color: #13306b; font-size: 24px; font-weight: bold;} #int-box-content strong.big-and-strong {font-size: 16px;} #int-box-content .int-sum strong.big-and-strong {font-size: 16px;} /*added by RParvin 07/19/2010 */ #int-box-content .int-sum ol li {font-size: 14px;} #int-box-content .int-sum ul li {font-size: 14px;} /*Chris Byrum - change 5/12/10, replacing list elements with divs to correct overlapping elements*/ #content #int-box div.cat-list div { margin-bottom: 20px; } #content #int-box div.cat-list div a.expanding-header { text-decoration: none; cursor:pointer; color: #fff; font-size: 18px; background: #13306b url(images/cat-link-arrow.png) no-repeat right center; display:block;padding: 10px 45px 10px 15px; line-height: 18px; } #content #int-box div.cat-list div p {margin-top: 20px; font-size: 14px; } #content #int-box div.cat-list div.active a.expanding-header {background-image:url(images/cat-link-arrow-active.png);} #content #int-box div.cat-list div a.expanding-header:hover {background-color:#97cd01;} /*Chris Byrum - change 7/16/10, aligned QOR table headers with bottom*/ #int-box-content table#grdQORRatings.tabular th { vertical-align: bottom; } div#grdQORRatingsContainer { width: 100%; overflow-x: auto; overflow-y: hidden; } /*Chris Byrum - change 7/16/10, centering table headings*/ #int-box-content table#grdQORRatings.tabular th, #int-box-content table#grdPopulations.tabular th, #int-box-content table#grdRFDRatings.tabular th { text-align: center; } /*Added by RParvin - 11/2/10 cost table centering*/ #int-box-content table#grdCost.tabular th { text-align: center; vertical-align: bottom; } #int-box-content table#grdCost.tabular td { text-align: left; } /*Added by RParvin - 11/16/2010 course table centering */ #int-box-content table#grdQOR.tabular th, #int-box-content table#grdRFD.tabular th, #int-box-content table#grdDesc.tabular th { text-align: center; vertical-align: bottom; } /*Chris Byrum - change 5/15/10, limited form width to prevent intervention box layout issues*/ div#mc_embed_signup form { width: 550px; } /*Chris Byrum - change 5/15/10, fixed wrapping text in first col on review pending page*/ table.tabular.reviewPending td.col1 { width: 80px; } table.tabular.reviewPending {margin-bottom: 20px; width: 75%;} /*Chris Byrum - added 7/15/10, header for Learning Module*/ div#int-box-content h2.course-title { text-align: center; margin-bottom: 20px; } /*Chris Byrum - change 7/15/10, fixed font-size in Best Practices drop down in Learning Module*/ #divBestPractices ol li, #divBestPractices ul li {font-size: 14px; line-height: 20px;} #divIntendedAudience ol li, #divIntendedAudience ul li {font-size: 14px; line-height: 20px;} /*Chris Byrum - changed 7/15/10, added alternate expanding header styles for Learning Module*/ #content #int-box div.cat-list div.expanding-container { margin-bottom: 5px; height: 35px; } #content #int-box div.cat-list div.expanding-container.active { margin-bottom: 0px; height: 20px; } #content #int-box-content.learning-module-content div.cat-list div a.expanding-header { color: #000000; background: none; padding: 0px 7px 0px 0px; font-weight: bold; font-size: 14px; float: left; } #content #int-box-content.learning-module-content div.cat-list div.active a.expanding-header { color: #00000; background: none; } .learning-module-content div.cat-list div.arrow { background: url(images/cat-link-arrow-alt.png) no-repeat; float: left; height: 14px; width: 22px; margin-top: 3px; } .learning-module-content div.cat-list div.active div.arrow { background-image: url(images/cat-link-arrow-active-alt.png); } /*RPARVIN - added 6/6/10 for legacy*/ .legacy-review-notice { padding: 4px; border-color: gray; border-width: 1px; border-style: solid; background-color: #FFC; } address { margin: 1em auto 1em auto; font-style: normal; font:normal 14px Verdana,Helvetica,Arial,sans-serif; line-height: 20px; } .liSubMenu { /* Chris Byrum - changed 6/8/10, removed smaller font override per ticket */ /*font-size: 11px;*/ font-weight: normal; } /* Chris Byrum - added 6/8/10 */ div#int-box-content.viewLegacy h3 { margin-bottom: 20px; } div#int-box-content.viewLegacy h2 { width: 100%; font-size: 18px; margin-top: 10px; } /* RPARVIN - added 7/12/10 */ div#int-box-content.viewLegacy ul li { font-size: 14px; } div#int-box-content.viewLegacy ol li { font-size: 14px; } /* Sidebar ********************************/ #sidebar p {font-size: 12px; line-height: 18px;} #sidebar p.important {font-size: 14px; line-height: 20px;} #sidebar .submit {width: 100%} #sidebar input.text {width: 100%; padding: 0;margin-bottom: 0px; } #sidebar.results a {display: block; margin-bottom: 15px;} #sidebar.results p {font-size: 12px; line-height: 18px;} #sidebar.results h2 {margin-bottom: 5px; font-weight: bold;font-size:16px;} #sidebar a label {font-size: 100%;} #sidebar li {margin-bottom: 10px;} #sidebar label {color: #000; font-size: 11px;} /* #sidebar label {color: #fff; font-size: 12px;}*/ /* added by rparvin 4/29/10 */ #sidebar.nav ul li {cursor:pointer; color: #97cd02;} #sidebar.nav ul li ul {margin-top: 15px;} #sidebar.nav li { cursor:pointer; font-weight: bold; font-size:16px; padding-right:45px; line-height: 25px; } /* Chris Byrum added 6/8/10, removes unnecessary padding in submenu*/ #sidebar.nav div#module ul li {padding-right:0px;} #sidebar.nav li.active a { color:Gray;} /* end add */ /*Chris Byrum - change 5/15/10, fixing inactive submenu links displaying as active*/ div#sidebar.nav li.active div ul li a { color: #97cd02; } div#sidebar.nav li.active div ul li.active a { color:Gray;} /*Chris Byrum - change 7/16/10, fixing sidebar contact info issue, forcing long emails to break*/ div#sidebar ul.contact-info li { word-wrap: break-word; } #sidebar ul.contact-info li {font-size: 12px; line-height: 18px;} .summary #sidebar h2 {margin-bottom: 10px;font-size:18px;} .sidebar-submit, .submit { background:#fc6c24 url(images/orange-btn-bg.jpg) repeat-x; border: 1px solid #555; height: 40px; font-size: 14px; width: 160px; cursor:pointer; color: #fff; font-family:Verdana,Helvetica,Arial,sans-serif} .sidebar-submit:hover, .sidebar-submit:focus, .submit:hover, .submit:focus {background-color:#97CD01; background-image: none;} /* Back-End ********************************/ .back-end #sidebar ul {background: #97cd01; padding:5px 0; margin-bottom:20px;} .back-end #sidebar ul li { margin: 5px;} .back-end #sidebar ul li a {background: #efefef;color: #000; display: block; padding: 10px 0 10px 5px;} .back-end #sidebar ul li a:hover,.back-end #sidebar ul li a:focus {background: #113069; color: #fff;} .back-end #int-box-content div.who {width: 200px; float: right; padding-left: 90px;background:url(images/bracket.png) no-repeat left center;} .back-end #int-box-content div.who p {margin-bottom: 4px; margin-top: 0; line-height: 14px!important;} .back-end #int-box-content div.who h3 {margin-top: 0;} .back-end h3 {font-size: 16px;} .back-end #int-title {width: 60%;} .back-end #int-title input {width: 100%;} .back-end div.wysiwyg {height: 200px; background:#fff; border: 1px solid #555; margin-bottom: 20px;} .back-end div.int-website {margin-bottom: 20px;} .back-end div.int-website input {width: 100%;} .back-end div.buttons {margin-bottom: 20px;} .back-end div.buttons input {float: right; margin-left: 10px;} #return-dash {width: 250px;} /***************************************************************************** Footer ********************************************************************************/ #footer {padding-top: 60px; height: 200px;} #footer h3#samhsa {width: 25%; float: left; padding-left: 80px; height: 80px; background:url(images/samhsa-logo.png) no-repeat left; font-weight: normal;font-size: 10px; line-height: 16px; margin-bottom: 0;} #footer #usagov-logo {float: right;margin:18px 0 20px 20px; width: 134px;height: 42px; background-image:url(images/usa-gov-logo.png); text-indent: -9999px;} #footer div#footer-nav {float: left; width: 50%;} #footer ul {margin: auto; margin-bottom: 10px; clear: both; width: 90%;} #footer ul li {float: left; margin-right: 10px; padding-right: 10px; border-right: 1px solid #555;} #footer a {font-size: 11px; color:#0e295f;} #footer p.links {clear:both; margin: auto; width: 90%;} #footer p { font-size: 11px; } .lblEmailConfirm {color:Red;font-weight:bold; width:220px;} imgLine {background-image: repeat}