/* ---------- SITEWIDE GENERAL DEFAULT STYLES LOCATED AT ODOS.ILLINOIS.EDU/STYLES/STYLES.CSS ---------- */ /* ---------- ALL DEFAULT STYLES FOR SMALL SCREENS ARE PROGRESSIVELY ENHANCED FOR LARGER SCREENS VIA MEDIA QUERIES NEAR BOTTOM OF THIS FILE ---------- */ /* ---------- BODY BACKGROUND IMAGE OVERRIDES FOR SSE DEFAULT STYLES ---------- */ body.home { background: url("../images/bg/small/engagement.jpg") no-repeat center 7.5em; background-size: 100% auto; } body.soda { background: url("../images/bg/small/soda.jpg") no-repeat center 7.5em; background-size: 100% auto; } body.sofc { background: url("../images/bg/small/sofc-coins.jpg") no-repeat center 7.5em; background-size: 100% auto; } body.ovp { background: url("../images/bg/small/ovp.jpg") no-repeat center 7.5em; background-size: 100% auto; } body.sustainability { background: url("../images/bg/small/sustainability-grid3.jpg") no-repeat center 7.5em; background-size: 100% auto; } /* ---------- DEFAULT HEADER, BLOCK I LOGO, AND UI LINK STYLES ---------- */ /* ---------- DEFAULT GOOGLE SEARCH STYLES ---------- */ /* ---------- DEFAULT MAIN NAVIGATION STYLES ---------- */ /* SET CURRENT ACTIVE PAGE LINK COLOR IN MAIN NAV BAR */ body.home #navigation .nav-collapse li#gohome a, body.get-involved #navigation .nav-collapse li#get-involved a, body.programs #navigation .nav-collapse li#programs a, body.finances #navigation .nav-collapse li#finances a, body.about #navigation .nav-collapse li#about a { color: #fff; background-color: #ff552e; } #navigation .nav-collapse li a br { display: none; } /* MULTIPLE LEVELS */ body.get-involved #navigation .nav-collapse li#get-involved li a, body.programs #navigation .nav-collapse li#programs li a, body.finances #navigation .nav-collapse li#finances li a, body.about #navigation .nav-collapse li#about li a { padding-left: 4em; background-color: #fff; color: #333; } body.get-involved #navigation .nav-collapse li#get-involved li a:hover, body.programs #navigation .nav-collapse li#programs li a:hover, body.finances #navigation .nav-collapse li#finances li a:hover, body.about #navigation .nav-collapse li#about li a:hover, body.get-involved #navigation .nav-collapse li#get-involved li a:focus, body.programs #navigation .nav-collapse li#programs li a:focus, body.finances #navigation .nav-collapse li#finances li a:focus, body.about #navigation .nav-collapse li#about li a:focus { background-color: #bbb; color: #000; } /* ---------- DEFAULT CONTENT AREA STYLES ---------- */ body.texture #content { margin-top: 6em; } #content table { margin: 0 0 1em; width: 100%; } #content table td, #content table th { margin: 0; padding: .5em; font-size: .9em; line-height: 1.5em; } #content table tr { border-bottom: 1px solid #999; } #content table th { font-weight: bold; } #content nav#unit-nav h3 { margin-left: -9999em; position: absolute; } #content nav#unit-nav ul ul { margin-left: 1em; display: none; } #content nav#unit-nav ul ul li a { padding-left: 1.5em; } #content nav#unit-nav ul ul li a span { margin: 0 .5em 0 0; padding: 0; width: 0; height: 0; border-top: .5em solid transparent; border-bottom: .5em solid transparent; border-left: .5em solid #ff552e; display: inline-block; } body.soda-basics #content nav#unit-nav ul ul#soda-basics-drop, body.soda-resources #content nav#unit-nav ul ul#soda-resources-drop, body.soda-sorf #content nav#unit-nav ul ul#soda-sorf-drop, body.sofc-finances #content nav#unit-nav ul ul#sofc-finances-drop, body.sofc-funding #content nav#unit-nav ul ul#sofc-funding-drop, body.ssc #content nav#unit-nav ul ul, body.ovp-history #content nav#unit-nav ul ul#ovp-history-drop, body.ovp-programs #content nav#unit-nav ul ul#ovp-programs-drop { display: block; } body.soda-basics #content nav#unit-nav li a#soda-basics.link, body.soda-resources #content nav#unit-nav li a#soda-resources.link, body.soda-sorf #content nav#unit-nav li a#soda-sorf.link, body.sofc-finances #content nav#unit-nav li a#sofc-finances.link, body.sofc-funding #content nav#unit-nav li a#sofc-funding.link, body.ssc #content nav#unit-nav li a#ssc.link, body.ovp-history #content nav#unit-nav li a#ovp-history.link, body.ovp-programs #content nav#unit-nav li a#ovp-programs.link { background-color: #ff552e; color: #fff; } body.soda-basics #content nav#unit-nav li li a.active, body.soda-basics #content nav#unit-nav li li a.active:hover, body.soda-basics #content nav#unit-nav li li a.active:focus, body.soda-resources #content nav#unit-nav li li a.active, body.soda-resources #content nav#unit-nav li li a.active:hover, body.soda-resources #content nav#unit-nav li li a.active:focus, body.soda-sorf #content nav#unit-nav li li a.active, body.soda-sorf #content nav#unit-nav li li a.active:hover, body.soda-sorf #content nav#unit-nav li li a.active:focus, body.sofc-finances #content nav#unit-nav li li a.active, body.sofc-finances #content nav#unit-nav li li a.active:hover, body.sofc-finances #content nav#unit-nav li li a.active:focus, body.sofc-funding #content nav#unit-nav li li a.active, body.sofc-funding #content nav#unit-nav li li a.active:hover, body.sofc-funding #content nav#unit-nav li li a.active:focus, body.ssc #content nav#unit-nav li li a.active, body.ssc #content nav#unit-nav li li a.active:hover, body.ssc #content nav#unit-nav li li a.active:focus, body.ovp-history #content nav#unit-nav li li a.active, body.ovp-history #content nav#unit-nav li li a.active:hover, body.ovp-history #content nav#unit-nav li li a.active:focus, body.ovp-programs #content nav#unit-nav li li a.active, body.ovp-programs #content nav#unit-nav li li a.active:hover, body.ovp-programs #content nav#unit-nav li li a.active:focus { background-color: #ccc; color: #333; } body.soda-basics #content nav#unit-nav li li a.active span, body.soda-basics #content nav#unit-nav li li a.active:hover span, body.soda-basics #content nav#unit-nav li li a.active:focus span, body.soda-resources #content nav#unit-nav li li a.active span, body.soda-resources #content nav#unit-nav li li a.active:hover span, body.soda-resources #content nav#unit-nav li li a.active:focus span, body.soda-sorf #content nav#unit-nav li li a.active span, body.soda-sorf #content nav#unit-nav li li a.active:hover span, body.soda-sorf #content nav#unit-nav li li a.active:focus span, body.sofc-finances #content nav#unit-nav li li a.active span, body.sofc-finances #content nav#unit-nav li li a.active:hover span, body.sofc-finances #content nav#unit-nav li li a.active:focus span, body.sofc-funding #content nav#unit-nav li li a.active span, body.sofc-funding #content nav#unit-nav li li a.active:hover span, body.sofc-funding #content nav#unit-nav li li a.active:focus span, body.ssc #content nav#unit-nav li li a.active span, body.ssc #content nav#unit-nav li li a.active:hover span, body.ssc #content nav#unit-nav li li a.active:focus span, body.ovp-history #content nav#unit-nav li li a.active span, body.ovp-history #content nav#unit-nav li li a.active:hover span, body.ovp-history #content nav#unit-nav li li a.active:focus span, body.ovp-programs #content nav#unit-nav li li a.active span, body.ovp-programs #content nav#unit-nav li li a.active:hover span, body.ovp-programs #content nav#unit-nav li li a.active:focus span { border-left-color: #13294b; } /* ---------- DEFAULT HOME PAGE SPECIFIC STYLES ---------- */ body#home #content, body.soda #content, body.sofc #content, body.ovp #content, body.sustainability #content { margin-top: 22em; background-color: #fff; } body#home #content section#feature { } body#home #content section#welcome { margin: 0; padding: 2em 1em; width: 100%; background-color: #fff; border-top: none; border-bottom: none; } body#home #content section#welcome h2 { margin: 0 0 1em; padding: 0; font-family: 'Montserrat', Helvetica, sans-serif; font-size: 1.625em; font-weight: normal; letter-spacing: .0625em; text-transform: uppercase; text-align: center; color: #ff552e; position: static; } body#home #content section#welcome p { margin: 0; color: #13294b; font-size: 1.25em; text-align: justify; } body#home #content section#socialfeeds { padding-bottom: 4em; } /* ---------- THE FOLLOWING STYLES EITHER ENHANCE OR OVERRIDE THE STYLES LISTED ABOVE FOR SMALLER SCREENS ---------- */ @media only screen and (min-width: 400px) { #unit-container { margin: 1.25em 0 0; padding: .5em 0 .5em 1em; } } /* Tablets and larger ---------- */ @media only screen and (min-width: 768px) { body.home { background: url("../images/bg/mid/engagement.jpg") no-repeat center 10.25em; background-size: 100% auto; } body.soda { background: url("../images/bg/mid/soda.jpg") no-repeat center 10.25em; background-size: 100% auto; } body.sofc { background: url("../images/bg/mid/sofc-coins.jpg") no-repeat center 10.25em; background-size: 100% auto; } body.ovp { background: url("../images/bg/mid/ovp.jpg") no-repeat center 10.25em; background-size: 100% auto; } body.sustainability { background: url("../images/bg/mid/sustainability-grid3.jpg") no-repeat center 10.25em; background-size: 100% auto; } #navigation .nav-collapse li#get-involved { width: 25%; } #navigation .nav-collapse li#programs { width: 25%; } #navigation .nav-collapse li#finances { width: 25%; } #navigation .nav-collapse li#about { width: 25%; } body.get-involved #navigation .nav-collapse li#get-involved a span, body.programs #navigation .nav-collapse li#programs a span, body.finances #navigation .nav-collapse li#finances a span, body.about #navigation .nav-collapse li#about a span { border-top: .375em solid #fff; } body.get-involved #navigation .nav-collapse li#get-involved a:hover span, body.get-involved #navigation .nav-collapse li#get-involved a:focus span, body.programs #navigation .nav-collapse li#programs a:hover span, body.programs #navigation .nav-collapse li#programs a:focus span, body.finances #navigation .nav-collapse li#finances a:hover span, body.finances #navigation .nav-collapse li#finances a:focus span, body.about #navigation .nav-collapse li#about a:hover span, body.about #navigation .nav-collapse li#about a:focus span { border-top: .375em solid transparent; border-bottom: .375em solid #fff; } body.get-involved #navigation .nav-collapse li#get-involved > a:hover span, body.get-involved #navigation .nav-collapse li#get-involved > a:focus span, body.get-involved #navigation .nav-collapse li#get-involved:focus > a span, body.get-involved #navigation .nav-collapse li#get-involved:hover > a span, body.programs #navigation .nav-collapse li#programs > a:hover span, body.programs #navigation .nav-collapse li#programs > a:focus span, body.programs #navigation .nav-collapse li#programs:focus > a span, body.programs #navigation .nav-collapse li#programs:hover > a span, body.finances #navigation .nav-collapse li#finances > a:hover span, body.finances #navigation .nav-collapse li#finances > a:focus span, body.finances #navigation .nav-collapse li#finances:focus > a span, body.finances #navigation .nav-collapse li#finances:hover > a span, body.about #navigation .nav-collapse li#about > a:hover span, body.about #navigation .nav-collapse li#about > a:focus span, body.about #navigation .nav-collapse li#about:focus > a span, body.about #navigation .nav-collapse li#about:hover > a span { border-top: .375em solid transparent; border-bottom: .375em solid #fff; } #navigation .nav-collapse li a br { display: block; } #navigation .nav-collapse ul li#get-involved:hover > ul, #navigation .nav-collapse ul li#get-involved.focus > ul, #navigation .nav-collapse ul li#programs:hover > ul, #navigation .nav-collapse ul li#programs.focus > ul, #navigation .nav-collapse ul li#finances:hover > ul, #navigation .nav-collapse ul li#finances.focus > ul, #navigation .nav-collapse ul li#about:hover > ul, #navigation .nav-collapse ul li#about.focus > ul { width: 100%; } body.get-involved #navigation .nav-collapse li#get-involved li a, body.programs #navigation .nav-collapse li#programs li a, body.finances #navigation .nav-collapse li#finances li a, body.about #navigation .nav-collapse li#about li a { padding-left: 1em; background-color: #fff; } #navigation li#searchnav { top: -3em; } #content nav#unit-nav ul ul li a { background-color: #eeeeee; } body.texture #content { margin-top: 2.8625em; } body#home #content, body.soda #content, body.sofc #content, body.ovp #content, body.sustainability #content { margin-top: 26em; } body#home #content section#welcome { margin-top: 0; padding: 2em 1em; } body#home #content section#welcome h2 { } body#home #content section#welcome p { font-size: 1.5em; } body#home #footer { } } /*/mediaquery*/ /* Desktops and laptops ---------- */ @media only screen and (min-width: 1224px) { body.home { background: url("../images/bg/large/engagement.jpg") no-repeat center 10.25em; background-size: 100% auto; } body.soda { background: url("../images/bg/large/soda.jpg") no-repeat center 10.25em; background-size: 100% auto; } body.sofc { background: url("../images/bg/large/sofc-coins.jpg") no-repeat center 10.25em; background-size: 100% auto; } body.ovp { background: url("../images/bg/large/ovp.jpg") no-repeat center 10.25em; background-size: 100% auto; } body.sustainability { background: url("../images/bg/large/sustainability-grid3.jpg") no-repeat center 10.25em; background-size: 100% auto; } #navigation .nav-collapse li a br { display: none; } body#home #content { margin-top: 26em; } } /*/mediaquery*/