/* ================================================= LOCAL STYLE SHEET Use this to overwrite any of the global styles or add customized elements ================================================= */ /* min-height rule for topic blocks container */ /* .top-blocks dl{ min-height: 50px; } */ /* main styles --------------------------------------------- */ /* button */ #content-main .btn { display: inline-block; padding: 7px 12px; font-size: 14px; font-size: 1.4rem; font-weight: normal; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; color: #333; text-decoration: none; border: 1px solid #ccc; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background: #f5f5f5; /*#efefef;*/ -webkit-transition: background .2s ease, color 0.2s linear; -moz-transition: background .2s ease, color 0.2s linear; -o-transition: background .2s ease, color 0.2s linear; transition: background .2s ease, color 0.2s linear; } #content-main .btn:hover, #content-main .btn:focus { background: #e6e6e6; text-decoration: none; } #content-main .btn.primary { background: #9c3; color: #fff; border: none; font-size: 16px; font-size: 1.6rem; } #content-main .btn.primary:hover, #content-main .btn.primary:focus { background: #690; color: #fff; text-decoration: none; } /* 3 column list */ ol.col-33, ul.col-33 { float: left; list-style: none; padding: 0; } ol.col-33 li, ul.col-33 li { float: left; width: 30%; margin: 0 5% 0 0; } #content ol.col-33 li, #content ul.col-33 li { margin: 0 5% 0 0; } /* hack for 3 column list unable to use hack file in heroku? */ ol.col-33 li:first-child + li + li, ul.col-33 li:first-child + li + li { margin-right: 0; float: right; } ol.col-33 li:nth-child(3n), ul.col-33 li:nth-child(3n) { margin-right: 0; float: right; } /* search options */ form#search-options { margin-bottom: 15px; padding: 10px; } div.metadata, span.metadata { font-size: .9em; font-style: italic; color: #777; } p.note { font-size: .9em; margin-top: 0; } ul.gallery { list-style: none; } ul.gallery li { margin: 15px 0; border-top: 1px dotted #999; padding-top: 15px; } ul.gallery li:first-child { margin-top: 0; padding-top: 0; border-top: none; } ul.gallery h3 { margin-top: 0; } ul.gallery div.caption { float: right; } /* home page styles --------------------------------------------- */ #featured-study.module .subc { margin: 5px; } #featured-study img { width: 100%; } /* product page styles --------------------------------------------- */ .module.pitch h4 { margin-bottom: 5px; } .module.pitch h1 { padding-top: 30px; } .module.pitch p.subtitle { word-spacing: 1px; font-size: 1.15em; line-height: 1.42; } .module.pitch .btn.primary { margin-top: 13px; } body.epiinfo7 #content-main .module.pitch h1 { padding-top: 10px; font-size: 25px; font-size: 2.5rem; } body.epiinfo7 .module.pitch { text-align: center; margin-bottom: 20px; } body.epiinfo7 .module.pitch > * { text-align: center; } body.epiinfo7 .module.pitch p.subtitle { color: #666; font-weight: 200; -webkit-font-smoothing: antialiased; } body.epiinfo7 .module.pitch img { margin-top: -45px; margin-bottom: -60px; } body.epiinfo7 #content-main .btn.primary { padding: 10px 50px; } ul.product-features { list-style: none; } ul.product-features li { margin: 30px 0; border-top: 1px solid #ddd; padding-top: 30px; } ul.product-features li:first-child { margin-top: 0; } ul.product-features li img { float: right; width: 387px; height: 240px; margin-left: 20.5px; -webkit-box-shadow: 0 2px 1px rgba(0,0,0,0.2); -moz-box-shadow: 0 2px 1px rgba(0,0,0,0.2); box-shadow: 0 2px 2px 1px rgba(0,0,0,0.2); } ul.product-features li:nth-child(even) img { float: left; margin-left: 0; margin-right: 20.5px; } ul.product-features p { font-size: 1.1em; line-height: 1.42; } div.pitch-reminder { margin: 30px 0 20px 0; border-top: 1px solid #ddd; padding-top: 30px; text-align: center; } #content-main div.pitch-reminder a.btn { padding-left: 20px; padding-right: 20px; } div.pitch-reminder p { font-size: 1.1em; margin-top: 10px; word-spacing: 2px; text-align: center; } #product-extras h3 { padding-left: 23px; background: no-repeat 0 50%; } #product-extras h3.tutorials { background-image: url(http://www.cdc.gov/epiinfo2/new/images/video-camera2.png); } #product-extras h3.training { background-image: url(http://www.cdc.gov/epiinfo2/new/images/training.png); } #product-extras h3.help { background-image: url(http://www.cdc.gov/epiinfo2/new/images/help.png); } #product-extras p { font-size: 12px; margin-top: 5px; word-spacing: 2px; } .main-inner .pitch.mobile { width: 80%; margin: 0 auto 15px auto; } /* tutorial page styles --------------------------------------------- */ form#search-options input[type="text"] { margin-left: 3px; } ol#tutorials { overflow: visible; } ol#tutorials li { position: relative; margin-bottom: 5px; } ol#tutorials li div.tutorial { position: relative; width: 100%; top: -5px; left: -5px; padding: 5px 5px 15px 5px; } ol#tutorials li div.tutorial:hover, ol#tutorials li div.tutorial:focus { background-color: #f5faed; } ol#tutorials li div.tutorial > a { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background: url('http://www.cdc.gov/epiinfo/~inc~/images/play-movie.png') 50% 30% no-repeat; } ol#tutorials li div.tutorial > a:hover, ol#tutorials li div.tutorial > a:focus { border: 1px solid #cdcdcd; border-radius: 3px; } ol#tutorials li img { height: 170px; /*width: 100%;*/ } #content-main ol#tutorials li h3 { font-size: 1.2em; font-weight: normal; margin: 4px 0 2px 0; } ol#tutorials li div.metadata span.product { border-right: 1px solid #aaa; padding-right: 7px; margin-right: 5px; } /* faq styles --------------------------------------------- */ .faq h3 { margin-top: 18px; } .faq > h1 + h3 { margin-top: 5px; } .faq p { line-height: 1.6; } /* case-studies styles --------------------------------------------- */ ul.gallery.studies { margin-top: 15px; } ul.gallery.studies img { width: 189px; height: 131px; border: 1px solid #777; } ul.gallery.studies div.caption { width: 67%; } div.article-image { margin-top: 10px; margin-bottom: 10px; } div.article-image img { width: 100%; } div.article-image p.caption { margin-top: 5px; margin-bottom: 2px; color: #444; font-size: .9em; } /* tutorial styles --------------------------------------------- */ body.video h1 { margin-bottom: 10px; } ul.gallery.related-tutorials img { width: 39.3%; } ul.gallery.related-tutorials div.caption { width: 58%; } /* misc --------------------------------------------- */ /* self-clear floats */ .group:after, ul.gallery > li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #box-content { font-family:"Courier New", Courier, monospace; } textarea { font-family:"Courier New", Courier, monospace; width: 100%; }