/* I. Table Of Contents 1. Reset 2. Anchors 3. Anchors 4. General Classes 5. Template & Layout 6. Print 7. COMMENTS 8. SEARCH RESULTS STYLES 9. WIDGETS 10. HomePage stuff 11. All Staff Holder and Staff Page */ /**************************************************************** 1. Reset - http://tantek.com/log/2004/undohtml.css - http://meyerweb.com/eric/tools/css/reset/ ****************************************************************/ * {font-style: normal;} html, body, h1, h2, h3, h4, h5, h6, img, blockquote, q, table, thead, tbody, tfoot, caption, th, tr, td, a, form, input, textarea, fieldset, pre { margin: 0px; padding: 0px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } address { font-style: normal; } acronym, abbr { border-bottom: 1px #000 dashed; cursor: help; } ins { text-decoration: none; } a img, img { border: none; text-decoration: none; } a { text-decoration: none; } img { display: block; -ms-interpolation-mode: bicubic; } ul, ol, p, blockquote { margin-top: 1em; margin-bottom: 1em; } /**************************************************************** 2. Anchors - Link - Visited - Hover - Focus - Active ****************************************************************/ a:link, a:visited, a:hover, a:focus, a:active { color: #3c465e; } #content a, #widecontent a { text-decoration: underline; } /**************************************************************** 3. Headings ****************************************************************/ #content h2, #content h3, #content h4 { color: #737039; font-weight: normal; } #content h2 { font-size: 24px; text-transform: uppercase; margin-bottom: 5px;} #content h3 { font-size: 18px; margin-bottom: 5px; } #content h4 { font-size: 16px; margin-bottom: 5px; } /* This can get annoying making exceptions for the numerous elements that have margin/padding top so you may want to ignore the designers direction with this. */ #content h2 + P, #content h3 + P, #content h4 + P { margin-top: 0px; } /**************************************************************** 4. General Classes ****************************************************************/ /* Pseudo Elements */ ::-moz-selection { background: #3c465e; color: #fff; } ::selection { background: #3c465e; color: #fff; } .clear { clear: both; } .right{ float: right; margin-left: 10px;} /**************************************************************** 5. Template & Layout ****************************************************************/ html { background: #b9c2cd; font-size: 100%; overflow-y: scroll; } body { color: #3d475e; font-family: helvetica, arial, Sans-Serif; font-size: .75em; padding: 0px 0px 50px 0px; text-align: center; vertical-align: baseline; font-style: normal !important; } h2 *, h3 *, h1 * {font-family: helvetica, arial, Sans-Serif;} #accessibility { display: none; } #header { background: url(/themes/scedc/images/template/masthead.jpg) no-repeat left top; height: 106px; position: relative; z-index: 9999; } #header-main, #header-stripe { position: absolute; left: 0px; width: 100%; } #header-main { height: 106px; top: 0px; } #header-logo { margin-top: 10px; margin-left: 20px; display: inline-block; } #nav, #utility, #footer {font-family: Helvetica, Arial, sans-serif !important;} #nav { list-style-type: none; margin: 0px; padding: 0px; position: absolute; right: 15px; top: 60px; } #nav > li { float: left; position: relative; } #nav > li > a { color: #fff; font-size: 11px; padding: 0px 9px; display: block; height: 50px; text-transform: uppercase; } #nav > li > a:hover { color: #fff; } /* Nav Children */ #nav li ul { background: #59657a; background: -moz-linear-gradient(top, #59657a 0%, #3d475e 100%) repeat-x; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #59657a), color-stop(1.0, #3d475e)) repeat-x; display: none; list-style-type: none; margin: 0px; padding: 0px 0px 5px 0px; position: absolute; top: 46px; z-index: 4; width: 190px; } #nav li:hover > ul { display: block; zoom: 1; } /* @IE */ #nav #nav-re ul, #nav #nav-mi ul, #nav #nav-opp ul, #nav #nav-res ul, #nav #nav-comm ul, #nav #nav-inv ul, #nav .nav-sub ul { left: 0px; } #nav #nav-au ul, #nav li.last ul { right: -15px; left: auto; } #nav li ul li a { color: #d1d6e4; display: block; font-size: 11px; padding: 8px 16px; text-transform: uppercase; } #nav li ul li a:hover { color: #fff; } /* @IE */ #nav li ul li:first-child a { padding-top: 10px; } #header-stripe { background: rgba(255,255,255,0.67); height: 10px; top: 65px; z-index: 3; } #utility { list-style-type: none; margin: 0px; padding: 0px; position: absolute; top: 20px; right: 15px; z-index: 3; } #utility li { display: inline; padding: 0px 10px; border-right: 1px solid #b9b6cb; } #utility li.last {border: none;} #utility li a { color: #b9b6cb; font-size: 11px; text-transform: uppercase; } #search { background: #e8e8db; display: none; position: absolute; top: 75px; left: 0px; overflow: hidden; height: 24px; width: 311px; z-index: 3; } #search input { background: #e8e8db; border: 0px; color: #768496; padding: 0px; height: 27px; width: 235px; _width: 230px; *width: 230px; text-indent: 5px; } #search button { background: #768496; border: 0px; color: #cdd5e6; font-size: 12px; line-height: 27px; padding: 0px; height: 27px; text-transform: uppercase; width: 76px;} #wrapper { background: #fff; overflow: hidden; padding: 66px 0px 20px 0px; position: relative; } #aside { } #aside h2 { color: #737039; font-size: 18px; font-weight: normal; margin-bottom: 20px; text-transform: uppercase; } #subnav { list-style-type: none; margin: 0px 0 50px; padding: 0px; text-transform: uppercase; } .sidebarImageBlock {margin-bottom: 80px;} img.scale-with-grid, .scale-with-grid { max-width: 100%; height: auto; } /* Default */ #subnav > li { background: url(/themes/scedc/images/template/subnav-arrow-sprite.png) no-repeat left 22px; border-top: 1px dotted #dde1e5; } #subnav > li > a { color: #3c465e; display: block; font-size: 14px; font-weight: bold; line-height: 14px; padding: 20px 0px 20px 26px; } /* Hover */ #subnav > li:hover, #subnav > li.hover { background-position: -889px 22px; } #subnav > li:hover > a, #subnav > li.hover > a { color: #737039; } /* Selected */ #subnav > li.selected, #subnav > li.section { background-position: -445px 24px; } #subnav > li.selected > a, #subnav > li.section > a { color: #737039; padding-bottom: 5px; } #subnav > li.current > a { color: #737039; } #subnav > li.childless { background: none; } /* Subnav */ #subnav ul { display: none; list-style-type: none; margin: 0px 0px 0px 26px; padding: 0px; } #subnav > li.section ul { display: block; } #subnav ul li a { color: #3c465e; font-size: 12px; line-height: 18px; } #subnav ul li.current a { color: #737039; } #content, #content2 { background: #fff; border-left: 1px dashed #cdccb2; font-size: 14px; line-height: 24px; padding: 0px 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #widecontent { background: #fff; font-size: 14px; line-height: 24px; padding: 0px 30px; margin-bottom: 80px; } #social { list-style-type: none; margin: 0px; overflow: hidden; padding: 0px; position: absolute; bottom: 30px; left: 30px; } #social li { background-image: url(../images/template/social-sprite.jpg); background-repeat: no-repeat; float: left; margin-left: 4px; } #social li, #social li a { display: block; height: 36px; width: 36px; } #social-facebook { background-position: 0px 0px; margin-left: 0px; } #social-twitter { background-position: 0px -36px; } #social-linkedin { background-position: 0px -72px; } #social-youtube { background-position: 0px -108px; } #social li a span { display: none; } #footer { clear: both; padding: 17px 0px 0px 0px; position: relative; height: 177px; background: url(/themes/scedc/images/template/footer.jpg) no-repeat left top; color: #fff; } #legal { font-size: 13px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #footer ul { list-style-type: none; margin: 0px; padding: 0px; float: left; text-align: right; } #footer li {float: none; text-align: left; padding: 3px 0px; } #footer li.first { padding-top: 0px;} #footer li a { color: #fff; font-size: 13px; padding: 0px 8px; } #footer li a:hover { color: #3d475e; } #footer .new-north { position: absolute; right: 27px; top: 15px; width: 45px; height: 48px; } /**************************************************************** 6. Print - http://www.alistapart.com/stories/goingtoprint/ ****************************************************************/ @media print { #header, #aside, #social, #footer { display: none; } #container { width: 100%; } #wrapper, #content { border-width: 0px; color: #000; padding: 0px; width: 100%; } #content a { text-decoration: underline; border-bottom-width: 0px; } } /**************************************************************** 7. COMMENTS ****************************************************************/ #CommentHolder ul { list-style: none; margin: 20px 0; } #PageComments li { margin: 5px 0; padding: 1px; width: 88%; } #PageComments li.odd { background: #E8F6FF url(../images/commentBg.png) no-repeat 1% 10%; padding-left: 40px; padding-right: 10px; border-bottom: 2px solid #BCE4FE; } #PageComments li.even { background: #fff url(../images/commentBgAlt.png) no-repeat 99% 10%; padding-right: 40px; } #PageComments li.odd p.info { color: #3AA0C3; } .actionLinks li { display: inline; border-right: 1px solid #ddd; } .actionLinks li a { padding-right: 3px; font-size: 10px; } .actionLinks li.last { border-right: none; } .commentrss { background: transparent url(../images/feed-icon-14x14.png) no-repeat; padding-left: 20px; font-size: 1.1em; line-height: 1.6em; } #PageCommentsPagination p { text-align: center; font-size: 1.2em; } #PageComments p { font-size: 1em; margin: 8px 0; } #PageComments p.info { color: #999; margin: 0px; padding: 0; line-height: 1em; font-size: 0.9em; } #PageCommentInterface_Form_PostCommentForm_action_postcomment { margin-bottom: 20px; } /**************************************************************** 8. SEARCH RESULTS STYLES ****************************************************************/ ul#SearchResults { margin: 10px 0; list-style: none; padding: 0; } ul#SearchResults li { list-style: none; margin: 5px 0 20px; font-size: 1em; } /**************************************************************** 9. WIDGETS ****************************************************************/ .WidgetHolder { margin: 0 0 25px; } .WidgetHolder ul { list-style: none; margin: 0; padding: 0; } .WidgetHolder ul li { list-style-type: none; margin: 5px 0; padding: 0; } /**************************************************************** 10. HomePage stuff *************************************************************** /* Hide if we're going to leave in master template. */ #previous-bg, #current-bg, #home-quicklinks, #home-gutter, #home-bg-nav { display: none } /**************************************************************** 11. All Staff Holder and Staff Page ***************************************************************/ .staffHolder{ list-style: none; padding: 0; } .staffHolder li{ float: left; margin-right: 60px; text-align: center; width: 200px; } .staffHolder .third{ margin-right: 0; } .staffHolder li a{ text-decoration: none !important; } .staffHolder li a span{ text-decoration: none; } .staffHolder li a:hover span{ text-decoration: underline; } .staffHolder li .details{ text-align: left; } .staffHolder li .details a{ text-decoration: underline !important; } .staffHolder .sImage{ width: 200px; height: 250px; position: relative; } .staffHolder .sImage img{ position: absolute; bottom: 0; } .staffExp .lIn{ width: 33px; height: 34px; } #home-page h1, #home-page h2, #home-page h3, #home-page h4, #home-page h5 {color: #134c87; font-weight: normal;} .spiff {} .spiff h3, .DetailSpiff h3 {font-size: 24px !important; line-height: 24px; margin-top: 5px;} .spiff a, .spiff a:visited, .DetailSpiff a, .DetailSpiff a:visited {color: #6BA2CE; } .spiff h3 a, .spiff h3 a:visited, .DetailSpiff h3 a, .DetailSpiff h3 a:visited {color: #134c87;} .spiff h3 a:hover, .spiff a:hover, .DetailSpiff a:hover {text-decoration: underline;} .spiff p, .DetailSpiff p {font-size: 14px; line-height: 18px; margin-top: 5px !important;} .DetailSpiff a {text-decoration: none !important;} .DetailSpiff h3 {margin-top: 5px; margin-bottom: 0px !important;} #home-page {color: #707070 ;} #home-page #content {color: #707070 !important; margin-top: 40px; padding: 0px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #home-page #content p {line-height: 22px;} #home-page #content h1 {font-size: 44px;} #home-page .home-news h4 {font-size: 20px; line-height: 20px;} #home-page .home-news h4 a, #home-page .home-news h4 a:visited {color: #707070;} #home-page .home-news h4 a:hover {text-decoration: underline;} #home-page .home-news a, #home-page .home-news a:visited {color: #165EA8; } #home-page #aside {border-right: none;} #home-page #aside h2 {text-transform: none; color: #134c87;} #home-page #aside h2 a, #home-page #aside h2 a:visited {color: #134c87; font-size: 25px; font-weight: normal;} #home-page #aside h2 a:hover {text-decoration: underline;} .float-right {float: right;} #home-page #aside a.view-all, #home-page #aside a.view-all:visited {font-size: 15px; color: #134c87; padding-top: 10px; text-decoration: underline;} #home-page #aside a.view-all:hover {text-decoration: none;} #home-page #aside a, #home-page #aside a:visited {font-size: 18px; font-weight: bold;} #home-page #aside a.read-article {font-size: 15px; font-weight: normal; text-decoration: underline;} #home-page #aside a.read-article:hover {text-decoration: none;} .HeaderImage {margin: 0px 0px 20px;} .DetailSpiff {margin-right: 20px; float: left; width: 284px; margin-bottom: 40px} .DetailSpiff.Last {margin-right: 0px;} .half-top {margin-top: 10px;} .top { background: #005b9a; display: block; height: 12px; margin: 0px 0px 15px 0px;} .top.add-top {margin-top: 15px;} .mobile-navigation {display: none;} .pagination {margin-top: 60px;} .pagination ul {list-style-type: none; } .pagination ul li {display: inline-block; margin: 5px 5px} .pagination ul li a {padding: 7px 14px; background: #4A5872; color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-decoration: none !important;} .pagination ul li a:hover {background: #fff; border: 1px solid #4A5872; color: #4A5872; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 7px 13px; } .pagination ul li.active a {text-decoration: none; background: #6A7DA7;} .pagination ul li.active a:hover {border: none; cursor: not-allowed; padding: 7px 14px; color: #fff;} .pagination ul li.disabled a:hover {background: #4A5872; border: none; padding: 7px 14px; color: #fff;} .pagination a.disabled {cursor: not-allowed;} /*Youtube embed responsive =======================================*/ .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .fsBody .fs2Col {min-width: 1px !important;} /* IMAGES -------------------------------------------- */ .typography img.left { float: left; max-width: 50%; height: auto; margin: 5px 20px 10px 0; } .typography img.right { float: right; max-width: 50%; /* Responsive width */ height: auto; margin: 5px 0 10px 20px; } .typography img.leftAlone { float: left; margin-right: 100%; margin-bottom: 10px; clear: both; } .typography img.center { float: none; margin-left: auto; margin-right: auto; display: block; margin-bottom: 10px; clear: both; } .typography img {max-width: 100%; height: auto;} .mobile-left {float: left !important;} .mobile-right {float: right !important;} #content iframe {max-width: 100%;} #legal a, #legal a:visited {color: #fff; text-decoration: underline;} #legal a:hover {text-decoration: none;} .clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .column-row {clear: left;} .remove-top {margin-top: 0px !important;} p.sharethis { margin: 15px 0 30px; } a.ShareIcon {width: 17px; height: 17px; background: url('/themes/scedc/images/ShareIcons.png') no-repeat top left; display: inline-block; margin-right: 10px;} a.fb-share.ShareIcon {background-position: 0px 0px;} a.tw-share.ShareIcon {background-position: -18px 0px;} a.go-share.ShareIcon {background-position: -36px 0px;} a.li-share.ShareIcon {background-position: -55px 0px;} a.pi-share.ShareIcon {background-position: -74px 0px;} a.em-share.ShareIcon {background-position: -92px 0px;} /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) {} /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { .crumbs, #access, .RecentNews .two.columns, #utility, #nav { display: none !important; } .mobile-navigation { position: absolute; top: 25px; right: 5px; display: block;} .mobile-menu { display: block; width: 125px; margin-top: 40px; } #mobilenavs { list-style: none; margin-left: auto; margin-right: auto; position: relative; z-index: 550; display: block !important; } #mobilenavs li { position: relative; text-align: center; } #mobilenavs li ul { margin-left: auto; margin-right: auto; left: auto; right: -5px; width: 300px; display: none; top: 62px; z-index: 600 !important; list-style-type: none; } #mobilenavs li ul a { text-decoration: none; color: #fff; font-size: 22px; font-weight: 900; } #mobilenavs li ul li.mobile-util a { text-decoration: none; color: #1e1c2d; font-size: 16px; font-weight: normal; } #mobilenavs li:hover ul li a:hover { text-decoration: none !important; filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; } #mobilenavs a { display: block; } #mobilenavs ul { position: absolute; left: -9999px; margin: 7px 0px 0px; background: #4A5872; box-shadow: 3px 8px 10px 1px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 3px 8px 10px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow: 3px 8px 10px 1px rgba(0, 0, 0, 0.5); -o-box-shadow: 3px 8px 10px 1px rgba(0, 0, 0, 0.5); padding: 0;} #mobilenavs ul a { white-space: nowrap; padding: 7px 5px; height: auto; } #mobilenavs ul li { padding: 3px 0px 8px; width: 90%; margin: 0px auto; border-left: none; border-right: none; border-bottom: 2px solid #737039; text-align: center; } #mobilenavs ul li:last-child { border: none; } nav.mobile-subnav { display: block !important; } nav.mobile-subnav li { width: 767px !important; } nav.utility { display: none; } #carousel {display: none;} } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { .crumbs, #access, .RecentNews .two.columns, #utility, #nav { display: none !important; } .mobile-navigation { position: absolute; top: 25px; right: 5px; display: block;} #mobilenavs { list-style: none; margin-left: auto; margin-right: auto; position: relative; z-index: 550; display: block !important; } #mobilenavs li { position: relative; text-align: center; } #mobilenavs li ul { margin-left: auto; margin-right: auto; left: auto; right: -5px; width: 300px; display: none; top: 42px; z-index: 600 !important; list-style-type: none;} #mobilenavs li ul a { text-decoration: none; color: #fff; font-size: 16px; font-weight: 900; } #mobilenavs li ul li.mobile-util a { text-decoration: none; color: #1e1c2d; font-size: 16px; font-weight: normal; } #mobilenavs li ul li a:hover { text-decoration: none !important; filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; } #mobilenavs a { display: block; } #mobilenavs ul { position: absolute; left: -9999px; margin: 7px 0px 0px; background: #4A5872; box-shadow: 3px 8px 10px 1px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 3px 8px 10px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow: 3px 8px 10px 1px rgba(0, 0, 0, 0.5); -o-box-shadow: 3px 8px 10px 1px rgba(0, 0, 0, 0.5); padding: 0px;} #mobilenavs ul a { white-space: nowrap; padding: 7px 5px; height: auto; } #mobilenavs ul li { padding: 3px 0px 8px; width: 90%; margin: 0px auto; border-left: none; border-right: none; border-bottom: 2px solid #737039; text-align: center; } #mobilenavs ul li:last-child { border: none; } .mobile-left, .mobile-right {float: left !important;} #header-logo {margin: 0px; padding: 10px 20px 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #content {padding: 0 10px; border: none} #content2 {padding: 0; border: none;} #footer {background-image: none; background-color: #4A5872; height: auto;} #footer .new-north {bottom: 20px; top: auto;} .field, .middleColumn, input.text, textarea, select {display: block; position: relative; width: 100% !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #header-main {width: 260px;} #header {height: 86px; background: none; background-color: #4A5872;} #accordion h3 {color: #fff !important;} #social { list-style-type: none; margin: auto; overflow: hidden; padding: 10px; position: relative; bottom: 0; left: 0; } .mobile-right {float: none !important; clear: both; display: block; margin-left: 0px !important;} .WidgetHolder {padding: 0 10px;} #legal {padding: 0 10px; margin-bottom: 20px;} #footer .footer-utility {padding-bottom: 20px;} .spiff, .home-news {padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #carousel {display: none;} .flex-copy {position: relative; left: auto; top: auto; background: none; padding: 0; width: 100%;} #aside {padding-top: 20px; margin-top: 20px; border-top: 2px solid #dde1e5;} } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { #mobilenavs { list-style: none; margin-left: auto; margin-right: auto; position: relative; z-index: 601; display: block !important; } #mobilenavs li ul { width: 420px; right: -5px; left: auto; top: 62px;} .blog-list .ten.columns { width: 330px !important; } #header-main {width: 100%;} #header {height: 106px; background: none; background-color: #4A5872;} } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) {}