/* Master Stylesheet Residential Computing and Student Services Static site (c) 2011 Jake Teton-Landis, all rights reserved DO NOT EDIT BY HAND THIS FILE WAS GENERATED FROM A SCSS STYLESHEET SEE http://sass-lang.com FOR MORE INFORMATION */ @import url("/stylesheets/fonts/museo_slab/font.css"); /* _reset.scss Styling Reset Note: this stylesheet uses no SCSS features, it's plain CSS2. Feel free to copy and use for other projects */ 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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } /* zero margins */ * { margin: 0; } html, body { /* for sticky footer */ height: 100%; } body { line-height: 1; } ol, ul { list-style: none; list-style-type: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } a { text-decoration: none; } /* Default colors loaded */ /* MASTER.SCSS */ body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #4f4f4f; font-size: 14px; background: url("/images/css/background.gif") repeat; } .heading-base, h1, h2, h3, h4, h5, h6, table.styled th, table.officehours th, #about .bodycontent table th, #helpdesk #column-right table th, #jobs table th, body#kb .bodycontent table th, #registration table th, #services #tv table th, #besecure table th, #unit .calconnect table th, #unit .rounds table th, body#conferences table th, body#policies table.usage th, .calConnectSession table th, #timeline table th, #header h1 a, #about ul.sections a, #error #content h3, #helpdesk #column-left li a, #helpdesk #column-right h1, #helpdesk #column-right #weeklyUsageTable p, #helpdesk #column-right #dailyUsageGraph p, #jobs p.notice, #jobs tr.header .sectionHeader, body#kb .highlight h2, .kb .section h4 .tag, #resources .bodycontent h3, #content.rcc .highlight .info.tagline, #content.rcc ul.sections a, #services ul.sections li a, #policies ul.sections li a, #besecure ul.sections li a, #support .atmyunit ul.units li h1, #support .atmyunit ul.units li h2, #support .atmyunit ul.units li h3, #support .atmyunit ul.units li h4, #support .atmyunit ul.units li h5, #support .atmyunit ul.units li h6, #support .contactrcc .callout, li.vcard .info h4, #typo #content .padded h1, #typo #content .padded h2, #typo #content .padded h3, #typo #content .padded h4, #typo #content .padded h5, body#teams .next, body#teams .prev, #getconnected ol li h3, body#policies table.usage .grouper, body#apply legend { font-family: "Museo Slab", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; } a .heading-base, a h1, a h2, a h3, a h4, a h5, a h6, a table.styled th, table.styled a th, a table.officehours th, table.officehours a th, a #about .bodycontent table th, #about .bodycontent table a th, a #helpdesk #column-right table th, #helpdesk #column-right table a th, a #jobs table th, #jobs table a th, a body#kb .bodycontent table th, body#kb .bodycontent table a th, a #registration table th, #registration table a th, a #services #tv table th, #services #tv table a th, a #besecure table th, #besecure table a th, a #unit .calconnect table th, #unit .calconnect table a th, a #unit .rounds table th, #unit .rounds table a th, a body#conferences table th, body#conferences table a th, a body#policies table.usage th, body#policies table.usage a th, a .calConnectSession table th, .calConnectSession table a th, a #timeline table th, #timeline table a th, a #header h1 a, #header h1 a a, a #about ul.sections a, #about ul.sections a a, a #error #content h3, #error #content a h3, a #helpdesk #column-left li a, #helpdesk #column-left li a a, a #helpdesk #column-right h1, #helpdesk #column-right a h1, a #helpdesk #column-right #weeklyUsageTable p, #helpdesk #column-right #weeklyUsageTable a p, a #helpdesk #column-right #dailyUsageGraph p, #helpdesk #column-right #dailyUsageGraph a p, a #jobs p.notice, #jobs a p.notice, a #jobs tr.header .sectionHeader, #jobs tr.header a .sectionHeader, a body#kb .highlight h2, body#kb .highlight a h2, a .kb .section h4 .tag, .kb .section h4 a .tag, a #resources .bodycontent h3, #resources .bodycontent a h3, a #content.rcc .highlight .info.tagline, #content.rcc .highlight a .info.tagline, a #content.rcc ul.sections a, #content.rcc ul.sections a a, a #services ul.sections li a, #services ul.sections li a a, a #policies ul.sections li a, #policies ul.sections li a a, a #besecure ul.sections li a, #besecure ul.sections li a a, a #support .atmyunit ul.units li h1, #support .atmyunit ul.units li a h1, a #support .atmyunit ul.units li h2, #support .atmyunit ul.units li a h2, a #support .atmyunit ul.units li h3, #support .atmyunit ul.units li a h3, a #support .atmyunit ul.units li h4, #support .atmyunit ul.units li a h4, a #support .atmyunit ul.units li h5, #support .atmyunit ul.units li a h5, a #support .atmyunit ul.units li h6, #support .atmyunit ul.units li a h6, a #support .contactrcc .callout, #support .contactrcc a .callout, a li.vcard .info h4, li.vcard .info a h4, a #typo #content .padded h1, #typo #content .padded a h1, a #typo #content .padded h2, #typo #content .padded a h2, a #typo #content .padded h3, #typo #content .padded a h3, a #typo #content .padded h4, #typo #content .padded a h4, a #typo #content .padded h5, #typo #content .padded a h5, a body#teams .next, body#teams a .next, a body#teams .prev, body#teams a .prev, a #getconnected ol li h3, #getconnected ol li a h3, a body#policies table.usage .grouper, body#policies table.usage a .grouper, a body#apply legend, body#apply a legend { color: inherit; } .link-base, .ie6warn a, #footer a, .leadin a, .bodycontent a, #helpdesk #column-right a, #registration .error a, #registration #column-right a, #getconnected ol li a { color: #e67a17; } .link-base:hover, .ie6warn a:hover, #footer a:hover, .leadin a:hover, .bodycontent a:hover, #helpdesk #column-right a:hover, #registration .error a:hover, #registration #column-right a:hover, #getconnected ol li a:hover { color: #abc437; text-decoration: underline; } .link-base:visited, .ie6warn a:visited, #footer a:visited, .leadin a:visited, .bodycontent a:visited, #helpdesk #column-right a:visited, #registration .error a:visited, #registration #column-right a:visited, #getconnected ol li a:visited { color: #e67a17; } .link-base:visited:hover, .ie6warn a:visited:hover, #footer a:visited:hover, .leadin a:visited:hover, .bodycontent a:visited:hover, #helpdesk #column-right a:visited:hover, #registration .error a:visited:hover, #registration #column-right a:visited:hover, #getconnected ol li a:visited:hover { color: #abc437; } .clearfix:after, .flashwrapper:after, .wrapper:after, #header:after, #header ul:after, .helpdesk-login:after, #footer:after, #content:after, .highlight:after, .section:after, #about .bodycontent #teams li:after, #about .bodycontent #teams li a:after, #about ul.sections:after, #about div.sections:after, #helpdesk #column-left:after, #helpdesk #column-right .progressbar:after, body#kb .highlight .about:after, .crumb:after, #registration ul.steps:after, #registration #column-right:after, #resources .bodycontent:after, #resources .kb:after, #content.rcc .overview:after, #content.rcc ul.sections:after, #content.rcc .jobinfo:after, #services .bodycontent ul.graphic:after, #services .bodycontent .subsection:after, #policies .bodycontent ul.graphic:after, #policies .bodycontent .subsection:after, #besecure .bodycontent ul.graphic:after, #besecure .bodycontent .subsection:after, #security .kb .section ul:after, #support .atmyunit ul.units li a:after, #unit .calconnect:after, #unit .rounds:after, li.vcard:after, li.vcard .school:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * + html .clearfix, * + html .flashwrapper, * + html .wrapper, * + html #header, * + html #header ul, #header * + html ul, * + html .helpdesk-login, * + html #footer, * + html #content, * + html .highlight, * + html .section, * + html #about .bodycontent #teams li, #about .bodycontent #teams * + html li, * + html #about .bodycontent #teams li a, #about .bodycontent #teams li * + html a, * + html #about ul.sections, #about * + html ul.sections, * + html #about div.sections, #about * + html div.sections, * + html #helpdesk #column-left, #helpdesk * + html #column-left, * + html #helpdesk #column-right .progressbar, #helpdesk #column-right * + html .progressbar, * + html body#kb .highlight .about, body#kb .highlight * + html .about, * + html .crumb, * + html #registration ul.steps, #registration * + html ul.steps, * + html #registration #column-right, #registration * + html #column-right, * + html #resources .bodycontent, #resources * + html .bodycontent, * + html #resources .kb, #resources * + html .kb, * + html #content.rcc .overview, #content.rcc * + html .overview, * + html #content.rcc ul.sections, #content.rcc * + html ul.sections, * + html #content.rcc .jobinfo, #content.rcc * + html .jobinfo, * + html #services .bodycontent ul.graphic, #services .bodycontent * + html ul.graphic, * + html #services .bodycontent .subsection, #services .bodycontent * + html .subsection, * + html #policies .bodycontent ul.graphic, #policies .bodycontent * + html ul.graphic, * + html #policies .bodycontent .subsection, #policies .bodycontent * + html .subsection, * + html #besecure .bodycontent ul.graphic, #besecure .bodycontent * + html ul.graphic, * + html #besecure .bodycontent .subsection, #besecure .bodycontent * + html .subsection, * + html #security .kb .section ul, #security .kb .section * + html ul, * + html #support .atmyunit ul.units li a, #support .atmyunit ul.units li * + html a, * + html #unit .calconnect, #unit * + html .calconnect, * + html #unit .rounds, #unit * + html .rounds, * + html li.vcard, * + html li.vcard .school, li.vcard * + html .school { min-height: 1%; clear: both; } * html .clearfix, * html .flashwrapper, * html .wrapper, * html #header, * html #header ul, #header * html ul, * html .helpdesk-login, * html #footer, * html #content, * html .highlight, * html .section, * html #about .bodycontent #teams li, #about .bodycontent #teams * html li, * html #about .bodycontent #teams li a, #about .bodycontent #teams li * html a, * html #about ul.sections, #about * html ul.sections, * html #about div.sections, #about * html div.sections, * html #helpdesk #column-left, #helpdesk * html #column-left, * html #helpdesk #column-right .progressbar, #helpdesk #column-right * html .progressbar, * html body#kb .highlight .about, body#kb .highlight * html .about, * html .crumb, * html #registration ul.steps, #registration * html ul.steps, * html #registration #column-right, #registration * html #column-right, * html #resources .bodycontent, #resources * html .bodycontent, * html #resources .kb, #resources * html .kb, * html #content.rcc .overview, #content.rcc * html .overview, * html #content.rcc ul.sections, #content.rcc * html ul.sections, * html #content.rcc .jobinfo, #content.rcc * html .jobinfo, * html #services .bodycontent ul.graphic, #services .bodycontent * html ul.graphic, * html #services .bodycontent .subsection, #services .bodycontent * html .subsection, * html #policies .bodycontent ul.graphic, #policies .bodycontent * html ul.graphic, * html #policies .bodycontent .subsection, #policies .bodycontent * html .subsection, * html #besecure .bodycontent ul.graphic, #besecure .bodycontent * html ul.graphic, * html #besecure .bodycontent .subsection, #besecure .bodycontent * html .subsection, * html #security .kb .section ul, #security .kb .section * html ul, * html #support .atmyunit ul.units li a, #support .atmyunit ul.units li * html a, * html #unit .calconnect, #unit * html .calconnect, * html #unit .rounds, #unit * html .rounds, * html li.vcard, * html li.vcard .school, li.vcard * html .school { height: 1%; overflow: visible; } .hidetext-base, #header h1 a, .internal_secret, body#policies table.usage .netflix .logo, body#policies table.usage .hulu .logo, body#policies table.usage .grooveshark .logo, body#policies table.usage .youtube .logo, body#policies table.usage .pandora .logo, body#policies table.usage .web .logo, body#policies table.usage .doc .logo, body#policies table.usage .times { text-indent: -3000px; overflow: hidden; } ul.styled, #flash ul, #about #careers ul, #error #content .bodycontent ul, #helpdesk #column-right ul, #jobs .section ul, #jobs .bodycontent ul, body#kb .bodycontent ul, #registration .error ul, #registration #column-right ul, #services .bodycontent .wrapper ul, #policies .bodycontent .wrapper ul, #besecure .bodycontent .wrapper ul, #unit .resources ul li ul, #typo #content ul { list-style: disc outside; padding-left: 3em; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { ul.styled, #flash ul, #about #careers ul, #error #content .bodycontent ul, #helpdesk #column-right ul, #jobs .section ul, #jobs .bodycontent ul, body#kb .bodycontent ul, #registration .error ul, #registration #column-right ul, #services .bodycontent .wrapper ul, #policies .bodycontent .wrapper ul, #besecure .bodycontent .wrapper ul, #unit .resources ul li ul, #typo #content ul { padding-left: 2em; } } ul.styled li, #flash ul li, #about #careers ul li, #error #content .bodycontent ul li, #helpdesk #column-right ul li, #jobs .section ul li, #jobs .bodycontent ul li, body#kb .bodycontent ul li, #registration .error ul li, #registration #column-right ul li, #services .bodycontent .wrapper ul li, #policies .bodycontent .wrapper ul li, #besecure .bodycontent .wrapper ul li, #unit .resources ul li ul li, #typo #content ul li { line-height: 1.5; } /* HEADINGS */ h1 { font-size: 56px; line-height: 1.125; } /* Page Header */ h2 { font-size: 42px; line-height: 1; } /* Section Header */ h3 { font-size: 28px; line-height: 1.5; } /* Block Header */ h4 { font-size: 21px; line-height: 1; } h5 { line-height: 1.5; font-weight: 500; } h6 { font-size: 10px; line-height: 21px; font-weight: 500; } /* TEXT ELEMENTS */ p { line-height: 1.5; margin-bottom: 21px; } p.last { margin-bottom: 0; } strong { font-weight: bold; } em { font-style: italic; } ol { list-style: decimal outside; padding-left: 3em; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { ol { padding-left: 2em; } } ol li { line-height: 1.5; } a { -moz-transition: color 0.2s ease-in-out, background 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out, background 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out, background 0.2s ease-in-out; -khtml-transition: color 0.2s ease-in-out, background 0.2s ease-in-out; transition: color 0.2s ease-in-out, background 0.2s ease-in-out; } /* TABLES */ table.styled, table.officehours, #about .bodycontent table, #helpdesk #column-right table, #jobs table, body#kb .bodycontent table, #registration table, #services #tv table, #besecure table, #unit .calconnect table, #unit .rounds table, body#conferences table, body#policies table.usage, .calConnectSession table, #timeline table { line-height: 1.5; } table.styled th, table.officehours th, #about .bodycontent table th, #helpdesk #column-right table th, #jobs table th, body#kb .bodycontent table th, #registration table th, #services #tv table th, #besecure table th, #unit .calconnect table th, #unit .rounds table th, body#conferences table th, body#policies table.usage th, .calConnectSession table th, #timeline table th { line-height: 1.5; font-weight: 500; padding: 0 5px; } table.styled td, table.officehours td, #about .bodycontent table td, #helpdesk #column-right table td, #jobs table td, body#kb .bodycontent table td, #registration table td, #services #tv table td, #besecure table td, #unit .calconnect table td, #unit .rounds table td, body#conferences table td, body#policies table.usage td, .calConnectSession table td, #timeline table td { padding: 0 5px; background: whitesmoke; border: 1px solid #ddd; } table.styled td.active, table.officehours td.active, #about .bodycontent table td.active, #helpdesk #column-right table td.active, #jobs table td.active, body#kb .bodycontent table td.active, #registration table td.active, #services #tv table td.active, #besecure table td.active, #unit .calconnect table td.active, #unit .rounds table td.active, body#conferences table td.active, body#policies table.usage td.active, .calConnectSession table td.active, #timeline table td.active, table.styled tr.active td, table.officehours tr.active td, #about .bodycontent table tr.active td, #helpdesk #column-right table tr.active td, #jobs table tr.active td, body#kb .bodycontent table tr.active td, #registration table tr.active td, #services #tv table tr.active td, #besecure table tr.active td, #unit .calconnect table tr.active td, #unit .rounds table tr.active td, body#conferences table tr.active td, body#policies table.usage tr.active td, .calConnectSession table tr.active td, #timeline table tr.active td { background: #fff; color: black; } table.styled tr:nth-child(even) td, table.officehours tr:nth-child(even) td, #about .bodycontent table tr:nth-child(even) td, #helpdesk #column-right table tr:nth-child(even) td, #jobs table tr:nth-child(even) td, body#kb .bodycontent table tr:nth-child(even) td, #registration table tr:nth-child(even) td, #services #tv table tr:nth-child(even) td, #besecure table tr:nth-child(even) td, #unit .calconnect table tr:nth-child(even) td, #unit .rounds table tr:nth-child(even) td, body#conferences table tr:nth-child(even) td, body#policies table.usage tr:nth-child(even) td, .calConnectSession table tr:nth-child(even) td, #timeline table tr:nth-child(even) td { background: #eeeeee; } table.officehours { float: left; border-collapse: separate; } table.officehours td:nth-child(even) { background: #eeeeee; } table.officehours tr:nth-child(even) td { background: inherit; } table.officehours tr:nth-child(odd) td { background: #eeeeee; } table.officehours th, table.officehours td { text-align: center; } table.officehours td { border: 0; } table.officehours th.day { border-bottom: 4px solid #abc437; } table.officehours th.active { color: black; border-bottom-color: #e67a17; } /* OTHER MIXINS */ .focus-base, #jobs .focus, #resources a.focus { display: block; float: left; margin-right: 10px; margin-bottom: 21px; color: #464540; text-decoration: none; background: #abc437; } .focus-base:hover, #jobs .focus:hover, #resources a.focus:hover { background: #e67a17; } .focus-base:hover img, #jobs .focus:hover img, #resources a.focus:hover img { background: #fff; } .focus-base h4, #jobs .focus h4, #resources a.focus h4 { padding: 0 14px; line-height: 42px; color: inherit; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .focus-base h4, #jobs .focus h4, #resources a.focus h4 { line-height: 21px; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .focus-base h4, #jobs .focus h4, #resources a.focus h4 { font-size: 14px; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .focus-base h4, #jobs .focus h4, #resources a.focus h4 { font-weight: normal; } } .focus-base img, #jobs .focus img, #resources a.focus img { background: whitesmoke; width: 100%; margin: 0 auto; } /* FORMS */ a.button, button, input[type=submit], input[type=button] { display: inline-block; line-height: 18px; font-size: 12px; color: #222; background: #abc437; border: 1px solid #434d15; border-bottom-width: 2px; padding: 0 6px; border-color: #434d15; } a.button:hover, button:hover, input[type=submit]:hover, input[type=button]:hover { color: whitesmoke; background: #e67a17; border-color: #5b3009; } textarea, input[type=email], input[type=tel], input[type=text], input[type=phone], input[type=number], input[type=password] { display: inline-block; color: #4f4f4f; font-size: 98%; line-height: 21px; border: 1px solid #7b7a71; background: #c2c2c2; text-overflow: ellipsis; } textarea:focus, input[type=email]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=phone]:focus, input[type=number]:focus, input[type=password]:focus { display: inline-block; border-color: #abc437; background: whitesmoke; color: black; outline: 0; } /* page flash messages */ #flash { margin: 21px auto; padding: 21px; padding-bottom: 0; width: 870px; border: 1px solid #555555; background-color: #b5b5b5; background-color: rgba(44, 44, 44, 0.7); } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #flash { margin: 21px 10px; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #flash { width: auto; } } #flash ul { margin-bottom: 21px; } #flash ul li { margin-bottom: 0; } #flash.error { border: 1px solid #770000; background-color: #edd8d8; color: #770000; } #flash.success { border: 1px solid #abc437; background-color: #eaf0cd; color: black; } .flashwrapper { padding-top: 1px; margin-top: -1px; background: #464540; } /* BROWSER CHROME CHANGES */ ::selection { background: #5cccda; color: black; } ::-moz-selection { background: #5cccda; color: black; } /* apply a natural box layout model to all elements */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* UTILITY CLASSES Wrapper classes keep content centered, apply a clearfix, while allowing us to make page-spanning backgrounds with markup instead of static vertically-repeating images. */ .wrapper { max-width: 970px; width: 100%; margin: 0 auto; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .wrapper { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .wrapper { padding: 5px; } } /* GLOBALWRAPPER In charge of keeping the footer at the bottom of the page. Based off http://ryanfait.com/sticky-footer/ */ html, body { height: 100%; margin: 0; } #globalwrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -128px; /* the bottom margin is the negative value of the footer's height */ padding: 0 !important; /* we ignore all overflow because the footer will provide scroll if we need it. This allows us to use giant elements to draw backgrands and in general not care about breaking scroll on the page. you often see this on rather nice websites if you resize the window then scroll right, and the page has no background in the scrolled area. Blegh. */ min-width: 980px !important; /* leave 5px padding on each side */ overflow: hidden; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #globalwrapper { min-height: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #globalwrapper { height: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #globalwrapper { margin: 0 auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #globalwrapper { min-width: 0px !important; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #globalwrapper { overflow: show; } } * html #globalwrapper { zoom: 1; overflow: visible; } /* HEADER */ #header { background: black; border-top: 4px solid #e67a17; min-height: 80px\9; } @media only screen and (min-width: 481px) { #header { min-height: 80px; } } * + html #header { min-height: 80px; } * html #header { min-height: 80px; } #header .wrapper { position: relative; } #header h1 { position: absolute\9; width: 210px; height: 76px; /* margin-right: 68px; */ z-index: 9999; } @media only screen and (min-width: 481px) { #header h1 { position: absolute; } } * + html #header h1 { position: absolute; } * html #header h1 { position: absolute; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #header h1 { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #header h1 { float: none; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #header h1 { height: auto; } } * + html #header h1 { left: 0; top: 0; } #header h1 a { display: block; width: 210px; height: 100%; font-size: 28px; line-height: 1.5; color: #fff; letter-spacing: -2px; background: black url("/images/css/rescomp-masthead-210-black.png") center center no-repeat; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #header h1 a { background: transparent; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #header h1 a { text-indent: 0; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #header h1 a { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #header h1 a { height: auto; } } #header h1 a span { color: #abc437; } #header ul { margin: 0 160px 0 231px\9; padding: 21px 0\9; position: relative; } @media only screen and (min-width: 481px) { #header ul { margin: 0 160px 0 231px; } } * + html #header ul { margin: 0 160px 0 231px; } * html #header ul { margin: 0 160px 0 231px; } @media only screen and (min-width: 481px) { #header ul { padding: 21px 0; } } * + html #header ul { padding: 21px 0; } * html #header ul { padding: 21px 0; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #header ul { clear: both; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #header ul { margin: 5px 0; } } #header li { float: left; line-height: 34px; margin-right: 10px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #header li { line-height: 21px; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #header li { padding: 0px 5px 0px 5px; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #header li { margin: 0; } } #header li a { padding: 0 12px; color: #e67a17; display: block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 200; font-size: 16px; position: relative; z-index: 10; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #header li a { font-size: 12px; } } #header li a.active, #header li a:hover { background: #464540; } #header ul.scripted li { position: relative; } #header ul.scripted li a.active, #header ul.scripted li a:hover { background: transparent; } #header ul.scripted li.slider { display: block; line-height: 34px; height: 38px; position: absolute; background: #464540 url(/images/css/indicator-arrow.png) no-repeat; background-position: bottom center; z-index: 0; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #header ul.scripted li.slider { display: none; } } #header ul.scripted li.slider:before, #header ul.scripted li.slider:after { display: block; position: absolute; top: 0; bottom: 0; height: 38px; width: 5px; background: #464540; overflow: hidden; content: '.'; text-indent: -3000px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #header ul.scripted li.slider:before, #header ul.scripted li.slider:after { display: none; } } #header ul.scripted li.slider:before { left: 0; } #header ul.scripted li.slider:after { right: 0; } .ie6warn { border: 1px solid #770000; background-color: #edd8d8; color: #770000; } .internal_secret { display: block; position: absolute; height: 4px; z-index: 9999; cursor: default; top: 84px; right: 20px; width: 20px; height: 20px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .internal_secret { display: none; } } .internal_secret:hover { background: rgba(171, 196, 55, 0.2); border: 1px solid rgba(171, 196, 55, 0.5); text-indent: 0; color: #abc437; text-transform: uppercase; } .helpdesk-login { position: absolute; top: 25px; right: 0; background: url("/images/css/log_in_glyph.png") no-repeat; background-position: 0 5px; padding-left: 29px; color: black; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .helpdesk-login { position: relative; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .helpdesk-login { margin-bottom: 5px; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .helpdesk-login { top: 0; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .helpdesk-login { float: right; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .helpdesk-login { background: transparent; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .helpdesk-login { padding: 0; } } .helpdesk-login span { font-size: 12px; display: block; line-height: 25px; background: #abc437; border: 1px solid #434d15; border-bottom-width: 2px; padding: 0 5px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .helpdesk-login span { display: inline-block; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .helpdesk-login span { line-height: 16px; } } .helpdesk-login:hover { color: whitesmoke; background-image: url("/images/css/log_in_glyph-hover.png"); } .helpdesk-login:hover span { background: #e67a17; border-color: #5b3009; } /* HEADER end */ #banner { background-size: cover; background-position: center center; padding: 8em 0 8em 0; } #banner h1 { display: inline-block; color: #fff; text-transform: uppercase; font: 40px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; letter-spacing: 2px; text-align: center; padding: 20px; border: 1px solid; margin-left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } /* FOOTER */ .push { height: 128px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .push { display: none; } } #footer:before { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #footer { position: relative; overflow: hidden; height: 124px; margin: 0; color: #dadada; background: #464540; border-bottom: 4px solid #e67a17; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #footer { height: auto; } } #footer h4 { color: inherit; } #footer p { clear: both; margin-top: 21px; margin-bottom: 0; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #footer p { margin: 0; } } #footer .wrapper { margin-top: 1em; width: 970px\9; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #footer .wrapper { position: static; } } @media only screen and (min-width: 481px) { #footer .wrapper { width: 970px; } } * + html #footer .wrapper { width: 970px; } * html #footer .wrapper { width: 970px; } #footer .wrapper div { float: left; line-height: 1.5; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #footer .wrapper div { float: none; } } #footer .wrapper .address { width: 350px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #footer .wrapper .address { width: auto; } } #footer .wrapper .nav { margin-left: 10px; width: 600px; text-align: right; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #footer .wrapper .nav { margin: 0; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #footer .wrapper .nav { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #footer .wrapper .nav { text-align: left; } } #footer .wrapper .phone { float: right; } #footer .wrapper .social { float: right; } #footer .wrapper .social a { display: block; text-decoration: none; float: left; width: 37px; margin-top: 1.7em; margin-left: 8px; } #footer .wrapper .social img { max-width: 100%; } #footer li { display: inline; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #footer li { display: block; } } #footer li a { display: inline-block; margin-left: 21px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #footer li a { margin: 0px 5px 0px 0px; } } /* FOOTER end */ /* GENERAL CONTENT */ #content { clear: both; } /* Page Headers */ .highlight { background: #5cccda; /*border-bottom: 1px solid $blue;*/ /*height: $line-height * 12 - 1px;*/ overflow: hidden; /* container for infinite image */ } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .highlight { height: auto; } } .highlight ::selection { background: #e67a17; color: black; } .highlight ::-moz-selection { background: #e67a17; color: black; } .highlight .wrapper { max-width: 970px; /*height: $line-height * 12;*/ } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .highlight .wrapper { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .highlight .wrapper { padding: 0 5px; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .highlight .wrapper { height: auto; } } .highlight h2 { clear: left; float: left; width: 400px; font-size: 70px; color: whitesmoke; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; letter-spacing: -1px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .highlight h2 { float: none; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .highlight h2 { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .highlight h2 { font-size: 42px; } } .highlight h2 .subheader { display: block; margin-top: 0.8em; font-size: 0.35em; font-weight: normal; line-height: 1.4; font-family: "Museo Slab", "Helvetica Neue", Helvetica, Arial, sans-serif; } .highlight .flash { float: right; width: 560px; height: 100%; overflow: hidden; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .highlight .flash { display: none; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .highlight .flash { float: none; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .highlight .flash { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .highlight .flash { height: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .highlight .flash { overflow: show; } } .highlight .flash img { height: 100%; float: right; } .leadin { font-weight: normal; line-height: 21px; background: #464540; color: #dadada; padding: 21px 0; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .leadin { font-size: 14px; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .leadin { padding: 0; } } .invert { color: #dadada; background: #464540; } .invert h1, .invert h2, .invert h3, .invert h4, .invert h5, .invert h6 { color: whitesmoke; } .bodycontent a.hidden { color: inherit !important; text-decoration: none !important; cursor: default; } .bodycontent a.hidden:hover { text-decoration: none !important; color: inherit !important; } .section.inverse { color: #dadada; background: #464540; padding: 10.5px 21px; margin-bottom: 21px; } .section.inverse h1, .section.inverse h2, .section.inverse h3, .section.inverse h4, .section.inverse h5, .section.inverse h6 { color: whitesmoke; } .officehours.error { border: 1px solid #770000; background-color: #e5d0d0; color: #770000; margin-bottom: 21px; } /* GENERAL CONTENT end */ /* Graphic List styles */ #surveyMonkeyInfo { margin: 0 auto; } /* _about.scss Note: some images have fixed css heights set on them due to a bug in webkit/jquery's height measurement on page reload */ #about { /* this won't work in IE due to the :first-child selector */ /* left column */ /* right column */ /* Styles that define the sliding backing and the viewport for our tabview These styles affect elements & classes added by slidercontent.js */ } #about .highlight { border-color: #464540; border-bottom: 1px solid #fff; } #about .leadin { font-size: 14px; border-bottom: 1px solid #fff; margin-bottom: -1px; /* added 0 padding if hiring is not posted */ padding: 0px; } #about .leadin .nowHiring { position: relative; padding: 24px 4px; } #about .leadin .nowHiring p { margin: 10px 0px; } #about .leadin .nowHiring p:last-of-type { margin-bottom: 0px; } #about .leadin .nowHiring img.sign { position: absolute; top: -16px; left: 14px; -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -ms-transform: rotate(-7deg); -o-transform: rotate(-7deg); -moz-transform-origin: 50.3% 15.3% 0; -webkit-transform-origin: 50.3% 15.3% 0; -ms-transform-origin: 50.3% 15.3% 0; -o-transform-origin: 50.3% 15.3% 0; } #about .leadin .nowHiring img.sign:hover { -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -o-transform: rotate(-3deg); } #about .leadin .nowHiring div { margin-left: 175px; } #about .senior { float: left; width: 640px; padding-right: -10px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about .senior { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about .senior { float: none; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about .senior { margin: 0; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about .senior { padding: 0; } } #about .senior li img { background: #e67a17; height: 150px; } #about .rcc { float: left; width: 330px; background: #d4d4d4; overflow: hidden; padding-left: 10px; margin-right: -10px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about .rcc { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about .rcc { float: none; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about .rcc { background: transparent; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about .rcc { overflow: show; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about .rcc { margin: 0; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about .rcc { padding: 0; } } #about .rcc li img { background: #abc437; height: 150px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about .senior, #about .rcc { float: none; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about .senior, #about .rcc { width: 100%; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about .senior, #about .rcc { clear: both; } } #about .bodycontent #whatWeDo { min-height: 380px; } #about .bodycontent #whatWeDo img.whatWeDo { float: left; margin: 8px 30px 10px 0px; width: 410px; } #about .bodycontent #teams li { float: left; /* these are the teams' links */ } #about .bodycontent #teams li a { display: block; float: left; width: 150px; height: 220px; background: #f5f5f5; margin-right: 10px; margin-bottom: 10px; /* margin-bottom isn't working in IE 7! */ font-size: 16px; font-weight: bold; text-decoration: none; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about .bodycontent #teams li a { margin: 0 5px 5px 0; } } * + html #about .bodycontent #teams li a { border-bottom: 10px solid transparent; } #about .bodycontent #teams li a:hover { background: #fff; } #about .bodycontent #teams li a img { width: 150px; height: 150px; } #about .bodycontent #teams li a span { display: block; padding: 10px; min-height: 3em; } #about .bodycontent .team { margin-bottom: 21px; } #about .bodycontent table { width: 100%; margin-top: 0.5em; margin-left: 21px; } #about .bodycontent table th, #about .bodycontent table td { width: 33.3%; border: 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: left; } #about .bodycontent table th { background: whitesmoke; } #about .bodycontent table tr:nth-child(even) th { background: #eeeeee; } #about .bodycontent #careers { min-height: 590px; } #about ul.sections { /*border-top: 1px solid #fff;*/ width: 960px; margin: 0 auto; position: relative; margin-bottom: 21px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about ul.sections { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about ul.sections { float: none; } } #about ul.sections li { display: inline; } #about ul.sections li.slider { background: whitesmoke; height: 42px; z-index: 0; position: absolute; padding: 0 10px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about ul.sections li.slider { display: none; } } #about ul.sections a { display: block; font-size: 28px; line-height: 1.5; float: left\9; line-height: 42px; z-index: 5; position: relative; padding: 0 10px; text-decoration: none; } @media only screen and (min-width: 481px) { #about ul.sections a { float: left; } } * + html #about ul.sections a { float: left; } * html #about ul.sections a { float: left; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about ul.sections a { position: static !important; } } #about div.sections { width: 980px; margin: 0 auto; overflow: visible !important; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about div.sections { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about div.sections { float: none; } } #about .sliderSubContainer { display: block; float: left; margin: 0; padding: 0; z-index: 3; position: relative; } #about .sliderContainer { display: block; position: absolute; top: 0; left: 0; z-index: 2; } #about .sliderViewport { position: relative; overflow: hidden; } #about .scripted #teams, #about .scripted #directory, #about .scripted #contactus { width: 980px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about .scripted #teams, #about .scripted #directory, #about .scripted #contactus { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about .scripted #teams, #about .scripted #directory, #about .scripted #contactus { float: none; } } #about #teams { margin-bottom: 21px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #about .bodycontent .leadin .nowHiring img.sign { display: none; } #about .bodycontent .leadin .nowHiring div { margin-left: 0px; } #about .bodycontent table { margin-left: 0px; } #about .bodycontent #whatWeDo { min-height: 835px; } #about .bodycontent #whatWeDo img.whatWeDo { width: 100%; } #about .bodycontent #careers { min-height: 1475px; } #about .bodycontent #careers img { max-width: 100%; } } /* _construction.scss Placeholder page */ body#construction .highlight { position: absolute; left: 0; right: 0; } body#construction .bodycontent { z-index: 5000; position: relative; width: 980px; background: url("/images/css/construction.jpg") top left no-repeat; margin: 0 auto; padding-top: 126px; height: 420px; } body#construction .notice { border: 1px solid #555555; background-color: #252525; background-color: rgba(44, 44, 44, 0.7); color: #dadada; padding: 21px; width: 640px; margin: 0 auto; } /* _error.scss styling for errordocs */ #error { background: black; color: #dadada; } #error .highlight { margin-bottom: 21px; border-color: black; } #error .flash { overflow: visible; } #error .flash h2 { background: #abc437; padding-left: 60px; width: 9000px; height: 100%; font-size: 280px; line-height: 252px; } #error #content h3 { font-size: 28px; line-height: 1.5; color: #fff; } #error #content .bodycontent ul { margin-bottom: 21px; } /* _helpdesk.scss Styling for the helpdesk redesign date: 7 July 2011 */ #helpdesk #mobile_phone { margin-bottom: 10px; } #helpdesk #column-left { padding: 21px 0; background: #5cccda; } #helpdesk #column-left li { display: inline; } #helpdesk #column-left li a { line-height: 1.5; font-weight: 500; display: block; float: left; margin-right: 21px; color: #464540; } #helpdesk #column-left li a:hover { color: black; } #helpdesk #column-right { /* Helpdesk Classes */ /* root table should be transparent */ } #helpdesk #column-right h1 { color: whitesmoke; background: #5cccda; font-size: 28px; line-height: 1.5; margin-left: -3000px; margin-right: -3000px; border-left: 3000px solid #5cccda; border-right: 3000px solid #5cccda; padding: 21px 0; margin-bottom: 21px; } #helpdesk #column-right h4 { margin-bottom: 21px; } #helpdesk #column-right table { margin-bottom: 21px; } #helpdesk #column-right table td:nth-child(even) { background: #eeeeee; } #helpdesk #column-right table tr:nth-child(even) td { background: inherit; } #helpdesk #column-right table tbody tr.row th { text-align: left; } #helpdesk #column-right table tbody th { text-align: right; } #helpdesk #column-right table td textarea, #helpdesk #column-right table td input[type=email], #helpdesk #column-right table td input[type=tel], #helpdesk #column-right table td input[type=text], #helpdesk #column-right table td input[type=phone], #helpdesk #column-right table td input[type=number], #helpdesk #column-right table td input[type=password] { width: 100%; margin: 0 -5px; padding: 0 4px; } #helpdesk #column-right a.button.negativeAction, #helpdesk #column-right button.negativeAction, #helpdesk #column-right input[type=submit].negativeAction, #helpdesk #column-right input[type=button].negativeAction { float: right; background: #e5d0d0; border-color: #651212; } #helpdesk #column-right a.button.negativeAction:hover, #helpdesk #column-right button.negativeAction:hover, #helpdesk #column-right input[type=submit].negativeAction:hover, #helpdesk #column-right input[type=button].negativeAction:hover { background: #eee0e0; border-color: #770000; color: black; } #helpdesk #column-right textarea { width: 100%; } #helpdesk #column-right label { line-height: 1.5; } #helpdesk #column-right #human, #helpdesk #column-right #network { width: 470px; float: left; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #helpdesk #column-right #human, #helpdesk #column-right #network { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #helpdesk #column-right #human, #helpdesk #column-right #network { float: none; } } #helpdesk #column-right #human { margin-right: 20px; } #helpdesk #column-right .app { margin-bottom: 42px; width: 434px; float: left; padding-left: 36px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #helpdesk #column-right .app { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #helpdesk #column-right .app { float: none; } } #helpdesk #column-right .app h4 { color: black; margin-left: -36px; } #helpdesk #column-right .app h4 img { float: left; width: 21px; margin-right: 12px; } #helpdesk #column-right #accountinfo tbody th { text-align: right; } #helpdesk #column-right .error, #helpdesk #column-right .notice { padding: 20px; margin-bottom: 21px; } #helpdesk #column-right .error p, #helpdesk #column-right .notice p { margin-bottom: 0; } #helpdesk #column-right .notice { border: 1px solid #555555; background-color: #aeaeae; background-color: rgba(44, 44, 44, 0.7); color: #dadada; } #helpdesk #column-right .error { border: 1px solid #770000; background-color: #e5d0d0; color: #770000; } #helpdesk #column-right .error ul { margin-bottom: 21px; } #helpdesk #column-right td.error { padding: 0 5px; } #helpdesk #column-right .hiddenForm { clear: both; background: whitesmoke; padding: 20px; border: 1px solid #ddd; } #helpdesk #column-right .hiddenForm table { width: 100%; } #helpdesk #column-right .progressbar { height: 19px; border: 1px solid #555555; margin-bottom: 21px; padding-right: 3px; background: whitesmoke; } #helpdesk #column-right .progressbar div { margin-right: 1px; background: #ccc; border-right: 1px solid #5cccda; height: 17px; margin: 1px; } #helpdesk #column-right .progressbar.large { margin-top: 21px; height: 63px; } #helpdesk #column-right .progressbar.large div { height: 61px; } #helpdesk #column-right .progressbar div.danger { background: #770000; border-right-color: #770000; width: 100%; text-align: center; content: 'Bandwidth Exceeded'; } #helpdesk #column-right .progressbar div.incoming { background: #e67a17; float: left; margin-right: 0; border-color: #fff; } #helpdesk #column-right .progressbar div.outgoing { background: #5cccda; float: left; margin-left: 0; } #helpdesk #column-right .icon.incoming, #helpdesk #column-right .icon.outgoing { width: 19px; height: 19px; border: 1px solid #fff; outline: 1px solid black; float: left; margin-right: 10px; } #helpdesk #column-right .icon.incoming { background: #e67a17; } #helpdesk #column-right .icon.outgoing { background: #5cccda; } #helpdesk #column-right #weeklyUsageTable, #helpdesk #column-right #dailyUsageGraph { overflow: auto; } #helpdesk #column-right #weeklyUsageTable p, #helpdesk #column-right #dailyUsageGraph p { font-size: 21px; line-height: 1; } #helpdesk #column-right #weeklyUsageTable th, #helpdesk #column-right #dailyUsageGraph th { text-align: left; } #helpdesk #column-right > table > tbody > tr > td { background: transparent; } /* _jobs.scss author: just.jake@rescomp.berkeley.edu date: 17 Oct 2011 job description in the "about" sectoin */ #jobs { /* Column Widths */ /* Open Positions Styling */ } #jobs .highlight h2 { width: 260px; } #jobs .highlight h2 span { display: block; } #jobs .highlight .flash { width: 700px; } #jobs .focus { width: 230px; } #jobs .highlight { border-color: #464540 !important; } #jobs .inverse p:last-of-type { margin-bottom: 0px; } #jobs p.notice { line-height: 1.5; font-weight: 500; text-align: center; } #jobs table { width: 960px; margin-bottom: 42px; } #jobs table td:nth-child(even) { background: #eeeeee; } #jobs table tr:nth-child(even) td { background: inherit; } #jobs tr.header { text-transform: capitalize; text-align: left; font-size: 12px; } #jobs tr.header .sectionHeader { font-size: 21px; line-height: 1; } #jobs td.title { width: 64%; } #jobs td.rate { width: 10%; } #jobs td.Summer { width: 16%; } #jobs td.hiring { width: 10%; } #jobs tr:hover, #jobs tr.positionOpen:hover { cursor: pointer; } #jobs tr:hover td.title, #jobs tr.positionOpen:hover td.title { background: #e89244; } #jobs tr:hover td.title a, #jobs tr.positionOpen:hover td.title a { display: block; color: #fff; text-decoration: none; moz-transition: none; -webkit-transition: none; -o-transition: none; -khtml-transition: none; transition: none; } #jobs tr:hover td.rate, #jobs tr.positionOpen:hover td.rate { background: #e68227; } #jobs tr:hover td.Summer, #jobs tr.positionOpen:hover td.Summer { background: #e89244; } #jobs tr:hover td.hiring, #jobs tr.positionOpen:hover td.hiring { background: #e68227; } #jobs tr.positionOpen { /* background: #abc337; td.title { background: #d2e185; } td.rate { background: #c3d760; } td.Summer { background: #d2e185; } */ } #jobs tr.positionOpen td.hiring { background: #C3D760; } #jobs tr.positionOpen:hover td.hiring { background: #ADCC17; } #kb .applyNow { margin-top: 10px; font-size: 16px; text-align: center; } #kb .applyNow a { display: inline-block; padding: 2px 10px; background: #abc437; font-weight: bold; font-size: 24px; color: #333 !important; border: 1px solid #4d5819; border-bottom-width: 2px; } #kb .applyNow a:hover { text-decoration: none; background: #e67a17; border: 1px solid #69380a; border-bottom-width: 2px; } #kb .highlight .applyNow { text-align: left; } #kb .highlight .applyNow a { font-size: 18px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #jobs .highlight h2 { width: 100%; } #jobs .highlight h2 .subheader { display: block; } #jobs .highlight h2 .subheader span { display: inline; } #jobs .hiringVideo { width: 100%; padding-bottom: 15px; } #jobs table { width: 100%; } } /* _kb.scss Styling for knowledgebase category pages and knowledgebase article pages. */ body#kb .highlight { border-color: #fff; } body#kb .highlight .about { width: 480px; float: left; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { body#kb .highlight .about { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { body#kb .highlight .about { float: none; } } body#kb .highlight .about.jobs { width: auto; } body#kb .highlight h2 { width: 480px; color: inherit; font-size: 42px; line-height: 1; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { body#kb .highlight h2 { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { body#kb .highlight h2 { float: none; } } body#kb .highlight .flash { width: 490px; } body#kb .highlight ul.info { clear: both; padding-top: 10.5px; } body#kb .highlight ul.info li { line-height: 21px; } body#kb .crumbs { width: 460px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { body#kb .crumbs { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { body#kb .crumbs { float: none; } } body#kb table.data { clear: both; background: whitesmoke; width: 480px; margin-top: 84px; line-height: 21px; } body#kb table.data .title { display: block; float: left; width: 5em; margin-right: 5px; margin-left: -5px; padding: 0 5px; background: #eeeeee; border-right: 1px solid #ddd; } body#kb table.data td { line-height: 21px; padding: 0 5px; width: 50%; border-right: 21px solid #5cccda; } body#kb table.data tr { border-bottom: 1px solid #ddd; } body#kb .bodycontent { padding-top: 21px; line-height: 21px; /*START How to Find MAC Adress Styling*/ /*END How to Find MAC Adress Styling*/ /*START Wireless Printing Styling*/ /*END Wireless Printing Styling*/ } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { body#kb .bodycontent { padding: 0; } } body#kb .bodycontent ul ul { margin-bottom: 21px; } body#kb .bodycontent ol, body#kb .bodycontent ul { margin-bottom: 21px; } body#kb .bodycontent .command { background: whitesmoke; padding: 0 3px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; border: 1px solid #d4d4d4; -moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3); -o-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3); -khtml-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3); } body#kb .bodycontent h4.author { font-weight: normal; margin-bottom: 21px; } body#kb .bodycontent h4.author:before { content: 'by '; } body#kb .bodycontent ol.contents { margin-bottom: 21px; } body#kb .bodycontent .answers > li { margin-bottom: 21px; } body#kb .bodycontent img { display: block; clear: both; margin: 0 auto 15px auto; border: 3px solid #D4D4D4; -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); -o-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); -khtml-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); max-width: 100%; } body#kb .bodycontent blockquote { margin: 0 0 21px 30px; padding-left: 20px; border-left: 2px solid; } body#kb .bodycontent .macAddress img { margin: 0px; margin-bottom: 20px; } body#kb .bodycontent .macAddress { margin-bottom: 20px; } body#kb .bodycontent .wirelessPrinting .text { float: left; max-width: 700px; } body#kb .bodycontent .wirelessPrinting .wifiBear { float: right; } body#kb .bodycontent .wifiBear img { max-width: 220px; border: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; -khtml-box-shadow: none; } body#kb .bodycontent .wirelessPrinting .instructionsLink { font-size: 1.2em; } body#kb .bodycontent table { margin-bottom: 15px; border: 3px solid #D4D4D4; -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); -o-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); -khtml-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); max-width: 100%; } body#kb .bodycontent p + table { margin-top: -21px; } /* Breadcrumbs */ .crumb { background: #464540; position: relative; float: left; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .crumb { float: none; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .crumb { margin: 0 -10px; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .crumb { padding: 0 10px; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .crumb ul { list-style-type: square; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .crumb ul { list-style-image: url("/images/scripts/next.gif"); } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .crumb ul { list-style-position: inside; } } .crumb li { position: relative; float: left; color: #e67a17; background: transparent url("/images/css/crumbtail-grey-blueline-42.png") no-repeat; padding-left: 42px; margin-left: -42px; line-height: 21px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .crumb li { background: transparent; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .crumb li { padding: 0; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .crumb li { margin: 0 10px 0 0; } } .crumb li a { -moz-transition: 0; -webkit-transition: 0; -o-transition: 0; -khtml-transition: 0; transition: 0; color: #e67a17; position: relative; display: block; float: left; color: inherit; padding-right: 63px; background: #464540; -moz-transition: none; -webkit-transition: none; -o-transition: none; -khtml-transition: none; transition: none; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .crumb li a { display: inline; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .crumb li a { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .crumb li a { float: none; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .crumb li a { padding: 0; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .crumb li a { background: transparent; } } .crumb li a:visited { color: #e67a17; } .crumb li a:visited:hover { color: whitesmoke; } .crumb li:hover { background-image: url("/images/css/crumbtail-orange-blueline-42.png"); color: whitesmoke !important; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .crumb li:hover { background: transparent; } } .crumb li:hover a { background: #e67a17; color: whitesmoke !important; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .crumb li:hover a { background: transparent; } } .crumb li:last-child a { padding-right: 10px; } /* KB sections on homepages */ .kb { margin-left: 20px; } .kb .section { line-height: 21px; width: 290px; height: 200px; padding: 0 10px; float: left; margin-right: 10px; margin-bottom: 21px; background: whitesmoke; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .kb .section { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .kb .section { float: none; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .kb .section { margin: 0 0 5px 0; } } .kb .section ul { margin-bottom: 21px; padding-left: 21px; } .kb .section h4 { line-height: 42px; } .kb .section h4 .tag { color: inherit; font-size: 10px; line-height: 21px; float: right; line-height: 42px; } .kb .section h4 a { text-decoration: none; } /* Registration.scss CSS for the registration webapp */ #registration .error { border: 1px solid #770000; background-color: #edd8d8; color: #770000; } #registration .error p, #registration .error ul, #registration .error h3 { width: 960px; margin: 0 auto; } #registration #column-left { background: black; color: #dadada; } #registration ul.steps { width: 960px; margin: 0 auto; } #registration ul.steps li { display: block; float: left; line-height: 42px; margin-right: 21px; padding: 0 10px; } #registration ul.steps li.active { background: #464540 url("/images/css/indicator-arrow.png") bottom center no-repeat; } #registration #column-right { line-height: 21px; width: 960px; margin: 0 auto; padding-top: 21px; } #registration table { margin-bottom: 21px; } #registration table th { background: #fff; } /* _resources.scss author: just.jake@rescomp.berkeley.edu date: 21 June 2011 */ #resources { /* knowledgebase element styling */ } #resources .highlight { height: 336px; border-color: #fff; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #resources .highlight { height: 210px; } } #resources .highlight .wrapper { position: relative; height: 100%; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #resources .highlight .wrapper { padding: 0; } } #resources .highlight h2 { position: absolute; padding-left: 5px; left: 10px; right: 10px; z-index: 2; text-shadow: #000 0px 0px 3px; } #resources .bodycontent h3 { font-size: 28px; line-height: 1.5; } #resources .mainfocus { display: block; color: #dadada; background: #464540; background: #464540; width: 960px; position: relative; height: 100%; overflow: hidden; text-align: right; text-decoration: none; margin-bottom: 10px; } #resources .mainfocus h1, #resources .mainfocus h2, #resources .mainfocus h3, #resources .mainfocus h4, #resources .mainfocus h5, #resources .mainfocus h6 { color: whitesmoke; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #resources .mainfocus { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #resources .mainfocus { float: none; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #resources .mainfocus { margin: 0; } } #resources .mainfocus:hover { background: #252525; } #resources .mainfocus:hover div { background: #252525; color: white; } #resources .mainfocus img { width: 100%; background: whitesmoke; } #resources .mainfocus div { padding: 14px; position: absolute; bottom: 0; left: 0; right: 0; background: #464540; } #resources .mainfocus div p { margin-bottom: 0; } #resources a.focus { width: 310px; margin-top: 21px; margin: 21px 5px 21px 5px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #resources a.focus { width: 150px; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #resources a.focus { margin: 0 5px 5px 0; } } #resources .kb { margin-top: 21px; clear: both; } /* _rcc.scss Styles specific to the really super cool RCC hiring page @author: Jake Teton-Landis @date 9 Feb 2012 */ #content.rcc .highlight { height: auto; border: 0; } #content.rcc .highlight h2 { width: auto; color: inherit; text-transform: uppercase; margin: .3em 0; color: whitesmoke; } #content.rcc .highlight h2 em { color: white; } #content.rcc .highlight .info { padding: 1em 0; margin: 0; color: whitesmoke; font-weight: normal; text-transform: uppercase; clear: both; } #content.rcc .highlight .info.tagline { font-size: 21px; line-height: 1; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: black; } #content.rcc .highlight .info em { font-style: normal; } #content.rcc .highlight .tagline { text-transform: normal; } #content.rcc .highlight .due { font-size: 14px; } #content.rcc .overview { background: #464540; border-bottom: 1px solid white; color: #dadada; padding: 1.5em 0; } #content.rcc .overview .wrapper { width: 970px\9; } @media only screen and (min-width: 481px) { #content.rcc .overview .wrapper { width: 970px; } } * + html #content.rcc .overview .wrapper { width: 970px; } * html #content.rcc .overview .wrapper { width: 970px; } #content.rcc .overview strong { color: whitesmoke; } #content.rcc .overview hr { clear: both; height: 1px; width: 100%; border: 0; background: #464540; margin-bottom: 1.5em; } #content.rcc .overview #logos { width: 100%; margin: 0; } * + html #content.rcc .overview #logos { padding-top: 21px; } #content.rcc .overview #logos img { height: 50px; width: auto; display: block; float: left; margin-right: 44px; } #content.rcc .overview #logos img[title=HSBC] { margin-right: 0; } #content.rcc .overview .wrapper > div { width: 100%; overflow: hidden; margin-top: 20px; } #content.rcc .overview .wrapper > div h4 { margin-bottom: 20px; } #content.rcc .overview .wrapper > div a { color: #e67a17; } #content.rcc .overview .wrapper > div a:hover { color: #abc437; text-decoration: underline; } #content.rcc .overview .wrapper > div .tagline { font-size: 1.1em; font-weight: bold; font-style: italic; font-family: "Museo Slab", "Helvetica Neue", Helvetica, Arial, sans-serif; } #content.rcc .overview .wrapper > div.video iframe { display: block; margin: 0px auto; } #content.rcc .overview .wrapper > div.requirements img { float: left; margin-right: 30px; width: 413px; } #content.rcc .overview .wrapper > div.work-environment img { float: right; margin-left: 30px; width: 465px; } #content.rcc .overview .wrapper > div.experience img { float: left; margin-right: 30px; width: 400px; } #content.rcc .overview .wrapper > div.experience h4.alumni { padding-top: 15px; } #content.rcc .overview .wrapper > div img, #content.rcc .overview .wrapper > div iframe { max-width: 100%; margin-bottom: 21px; } #content.rcc .overview .wrapper > div h4 { color: whitesmoke; } #content.rcc .bodycontent > .wrapper { max-width: none; width: auto; } #content.rcc ul.sections { list-style-type: none; padding: 0; width: 980px; margin: 0 auto; position: relative; margin-bottom: 3px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #content.rcc ul.sections { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #content.rcc ul.sections { float: none; } } #content.rcc ul.sections li { display: inline; } #content.rcc ul.sections li.slider { border: 3px solid #dadada; border-bottom: 0; background: whitesmoke; height: 42px; z-index: 0; position: absolute; padding: 0 6px; margin: 0; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #content.rcc ul.sections li.slider { display: none; } } #content.rcc ul.sections a { display: block; float: left\9; font-size: 21px; line-height: 1; line-height: 42px; z-index: 5; position: relative; padding: 0 10px; text-decoration: none; } @media only screen and (min-width: 481px) { #content.rcc ul.sections a { float: left; } } * + html #content.rcc ul.sections a { float: left; } * html #content.rcc ul.sections a { float: left; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #content.rcc ul.sections a { position: static !important; } } #content.rcc .jobinfo { border: 3px solid #dadada 0; background: whitesmoke; z-index: 2; padding-top: 1.5em; margin-bottom: 1.5em; } #content.rcc .jobinfo .wrapper { width: 928px; } /* _services.scss includes the styling for all tabbed content layouts right now, that is /services and /policies */ /* Styles that define the sliding backing and the viewport for our tabview These styles affect elements added by slidercontent.js */ .sliderSubContainer { display: block; float: left; margin: 0; padding: 0; } .sliderContainer { display: block; position: absolute; top: 0; left: 0; } .sliderViewport { overflow: hidden; } #services { /* use negative margin-bottom to move border of content viewport under tab */ /* Body content (below the tab bar) */ } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services img { max-width: 99%; } } #services .leadin .wrapper { width: 918px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services .leadin .wrapper { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services .leadin .wrapper { float: none; } } #services ul.sections { position: relative; margin-top: 21px; width: 960px\9; /* Scripted state */ } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services ul.sections { margin-top: 0; } } @media only screen and (min-width: 481px) { #services ul.sections { width: 960px; } } * + html #services ul.sections { width: 960px; } * html #services ul.sections { width: 960px; } #services ul.sections li { display: inline; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services ul.sections li { display: block; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services ul.sections li { line-height: 42px; } } #services ul.sections li a { text-align: center; position: relative; display: block; float: left; padding: 6px 12px; z-index: 5; font-size: 21px; line-height: 1; color: #464540; margin-right: 10px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services ul.sections li a { position: static !important; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services ul.sections li a { float: none; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services ul.sections li a { padding: 0; } } #services ul.sections li a:hover { color: #e67a17; } #services ul.sections li:last-child a { float: right; margin-right: 0; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services ul.sections li:last-child a { float: none !important; } } #services ul.sections.scripted li a.active { border: none; background: none; color: #e67a17; } #services ul.sections.scripted li.slider { display: block; width: 100%; position: absolute; border: 3px solid #dadada; height: 108%; padding: 0px 9px; /* horizontal padding should be 3px less than that of link elems */ border-bottom: 0; background: whitesmoke; color: #e67a17; z-index: 2; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services ul.sections.scripted li.slider { display: none; } } #services .bodycontent { margin-bottom: 21px; /* scripted styles */ } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services .bodycontent { margin-bottom: 0; } } #services .bodycontent .wrapper { width: 960px; padding: 15px; background: whitesmoke; border: 3px solid #dadada; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services .bodycontent .wrapper { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services .bodycontent .wrapper { padding: 5px; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services .bodycontent .wrapper { border: 0; } } #services .bodycontent.scripted .wrapper { width: 936px; float: left; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services .bodycontent.scripted .wrapper { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services .bodycontent.scripted .wrapper { float: none; } } #services .bodycontent .sliderSubContainer div h3 { display: none; } #services .bodycontent ul.graphic { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; border-collapse: collapse; border-spacing: 0; list-style: none; list-style-type: none; line-height: 21px; margin-top: 9px; margin-right: 11px; float: left; } #services .bodycontent ul.graphic li { display: block; float: left; margin: 0 10px 10px 0; width: 172px; text-align: center; } #services .bodycontent ul.graphic li p, #services .bodycontent ul.graphic li h5 { width: 152px; margin: 10px; margin-top: 0; margin-bottom: 6px; } #services .bodycontent ul.graphic li img { width: 100%; margin: 0; margin-bottom: 7px; } #services .bodycontent ul.graphic img { height: 172px; } #services .bodycontent img.graphic { float: left; height: 172px; margin-right: 10px; } #services .bodycontent .subsection img { float: left; margin: 0 21px 21px 0; width: 320px; } #services .bodycontent .section.inverse img { float: right; margin-right: 0; margin-left: 10px; } #services .bodycontent .subsection.reversed img { float: right; margin-right: 0; margin-left: 21px; } #services .bodycontent .subsection.reversed p, #services .bodycontent .subsection.reversed ol, #services .bodycontent .subsection.reversed ul { float: left; } #services .bodycontent .illustration { width: 320px; float: right; } #services .bodycontent .subsection.icon { margin-bottom: 21px; } #services .bodycontent .subsection.icon > h5 { width: 172px; text-align: center; } #services .bodycontent .subsection.icon img { width: 172px; margin-right: 10px; } #services .bodycontent .subsection.icon > p, #services .bodycontent .subsection.icon ol, #services .bodycontent .subsection.icon ul { width: 742px; float: right; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services .bodycontent .subsection.icon > p, #services .bodycontent .subsection.icon ol, #services .bodycontent .subsection.icon ul { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services .bodycontent .subsection.icon > p, #services .bodycontent .subsection.icon ol, #services .bodycontent .subsection.icon ul { float: none; } } #services .bodycontent .subsection.icon ol, #services .bodycontent .subsection.icon ul { list-style-type: none; padding: 0; } #services .highlight { border-color: #fff; } #services #tv h4 { clear: both; } #services #tv table { width: 452px; float: left; margin: 0 5px; margin-bottom: 21px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services #tv table { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services #tv table { float: none; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #services #tv table { max-width: 100%; } } #policies { /* use negative margin-bottom to move border of content viewport under tab */ /* Body content (below the tab bar) */ } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #policies img { max-width: 99%; } } #policies .leadin .wrapper { width: 918px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #policies .leadin .wrapper { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #policies .leadin .wrapper { float: none; } } #policies ul.sections { position: relative; margin-top: 21px; width: 960px\9; /* Scripted state */ } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #policies ul.sections { margin-top: 0; } } @media only screen and (min-width: 481px) { #policies ul.sections { width: 960px; } } * + html #policies ul.sections { width: 960px; } * html #policies ul.sections { width: 960px; } #policies ul.sections li { display: inline; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #policies ul.sections li { display: block; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #policies ul.sections li { line-height: 42px; } } #policies ul.sections li a { text-align: center; position: relative; display: block; float: left; padding: 6px 12px; z-index: 5; font-size: 21px; line-height: 1; color: #464540; margin-right: 10px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #policies ul.sections li a { position: static !important; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #policies ul.sections li a { float: none; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #policies ul.sections li a { padding: 0; } } #policies ul.sections li a:hover { color: #e67a17; } #policies ul.sections li:last-child a { float: right; margin-right: 0; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #policies ul.sections li:last-child a { float: none !important; } } #policies ul.sections.scripted li a.active { border: none; background: none; color: #e67a17; } #policies ul.sections.scripted li.slider { display: block; width: 100%; position: absolute; border: 3px solid #dadada; height: 108%; padding: 0px 9px; /* horizontal padding should be 3px less than that of link elems */ border-bottom: 0; background: whitesmoke; color: #e67a17; z-index: 2; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #policies ul.sections.scripted li.slider { display: none; } } #policies .bodycontent { margin-bottom: 21px; /* scripted styles */ } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #policies .bodycontent { margin-bottom: 0; } } #policies .bodycontent .wrapper { width: 960px; padding: 15px; background: whitesmoke; border: 3px solid #dadada; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #policies .bodycontent .wrapper { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #policies .bodycontent .wrapper { padding: 5px; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #policies .bodycontent .wrapper { border: 0; } } #policies .bodycontent.scripted .wrapper { width: 936px; float: left; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #policies .bodycontent.scripted .wrapper { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #policies .bodycontent.scripted .wrapper { float: none; } } #policies .bodycontent .sliderSubContainer div h3 { display: none; } #policies .bodycontent ul.graphic { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; border-collapse: collapse; border-spacing: 0; list-style: none; list-style-type: none; line-height: 21px; margin-top: 9px; margin-right: 11px; float: left; } #policies .bodycontent ul.graphic li { display: block; float: left; margin: 0 10px 10px 0; width: 172px; text-align: center; } #policies .bodycontent ul.graphic li p, #policies .bodycontent ul.graphic li h5 { width: 152px; margin: 10px; margin-top: 0; margin-bottom: 6px; } #policies .bodycontent ul.graphic li img { width: 100%; margin: 0; margin-bottom: 7px; } #policies .bodycontent ul.graphic img { height: 172px; } #policies .bodycontent img.graphic { float: left; height: 172px; margin-right: 10px; } #policies .bodycontent .subsection img { float: left; margin: 0 21px 21px 0; width: 320px; } #policies .bodycontent .section.inverse img { float: right; margin-right: 0; margin-left: 10px; } #policies .bodycontent .subsection.reversed img { float: right; margin-right: 0; margin-left: 21px; } #policies .bodycontent .subsection.reversed p, #policies .bodycontent .subsection.reversed ol, #policies .bodycontent .subsection.reversed ul { float: left; } #policies .bodycontent .illustration { width: 320px; float: right; } #policies .bodycontent .subsection.icon { margin-bottom: 21px; } #policies .bodycontent .subsection.icon > h5 { width: 172px; text-align: center; } #policies .bodycontent .subsection.icon img { width: 172px; margin-right: 10px; } #policies .bodycontent .subsection.icon > p, #policies .bodycontent .subsection.icon ol, #policies .bodycontent .subsection.icon ul { width: 742px; float: right; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #policies .bodycontent .subsection.icon > p, #policies .bodycontent .subsection.icon ol, #policies .bodycontent .subsection.icon ul { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #policies .bodycontent .subsection.icon > p, #policies .bodycontent .subsection.icon ol, #policies .bodycontent .subsection.icon ul { float: none; } } #policies .bodycontent .subsection.icon ol, #policies .bodycontent .subsection.icon ul { list-style-type: none; padding: 0; } #policies .highlight { border-color: #464540; } #besecure { /* use negative margin-bottom to move border of content viewport under tab */ /* Body content (below the tab bar) */ } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #besecure img { max-width: 99%; } } #besecure .leadin .wrapper { width: 918px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #besecure .leadin .wrapper { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #besecure .leadin .wrapper { float: none; } } #besecure ul.sections { position: relative; margin-top: 21px; width: 960px\9; /* Scripted state */ } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #besecure ul.sections { margin-top: 0; } } @media only screen and (min-width: 481px) { #besecure ul.sections { width: 960px; } } * + html #besecure ul.sections { width: 960px; } * html #besecure ul.sections { width: 960px; } #besecure ul.sections li { display: inline; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #besecure ul.sections li { display: block; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #besecure ul.sections li { line-height: 42px; } } #besecure ul.sections li a { text-align: center; position: relative; display: block; float: left; padding: 6px 12px; z-index: 5; font-size: 21px; line-height: 1; color: #464540; margin-right: 10px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #besecure ul.sections li a { position: static !important; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #besecure ul.sections li a { float: none; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #besecure ul.sections li a { padding: 0; } } #besecure ul.sections li a:hover { color: #e67a17; } #besecure ul.sections li:last-child a { float: right; margin-right: 0; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #besecure ul.sections li:last-child a { float: none !important; } } #besecure ul.sections.scripted li a.active { border: none; background: none; color: #e67a17; } #besecure ul.sections.scripted li.slider { display: block; width: 100%; position: absolute; border: 3px solid #dadada; height: 108%; padding: 0px 9px; /* horizontal padding should be 3px less than that of link elems */ border-bottom: 0; background: whitesmoke; color: #e67a17; z-index: 2; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #besecure ul.sections.scripted li.slider { display: none; } } #besecure .bodycontent { margin-bottom: 21px; /* scripted styles */ } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #besecure .bodycontent { margin-bottom: 0; } } #besecure .bodycontent .wrapper { width: 960px; padding: 15px; background: whitesmoke; border: 3px solid #dadada; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #besecure .bodycontent .wrapper { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #besecure .bodycontent .wrapper { padding: 5px; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #besecure .bodycontent .wrapper { border: 0; } } #besecure .bodycontent.scripted .wrapper { width: 936px; float: left; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #besecure .bodycontent.scripted .wrapper { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #besecure .bodycontent.scripted .wrapper { float: none; } } #besecure .bodycontent .sliderSubContainer div h3 { display: none; } #besecure .bodycontent ul.graphic { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; border-collapse: collapse; border-spacing: 0; list-style: none; list-style-type: none; line-height: 21px; margin-top: 9px; margin-right: 11px; float: left; } #besecure .bodycontent ul.graphic li { display: block; float: left; margin: 0 10px 10px 0; width: 172px; text-align: center; } #besecure .bodycontent ul.graphic li p, #besecure .bodycontent ul.graphic li h5 { width: 152px; margin: 10px; margin-top: 0; margin-bottom: 6px; } #besecure .bodycontent ul.graphic li img { width: 100%; margin: 0; margin-bottom: 7px; } #besecure .bodycontent ul.graphic img { height: 172px; } #besecure .bodycontent img.graphic { float: left; height: 172px; margin-right: 10px; } #besecure .bodycontent .subsection img { float: left; margin: 0 21px 21px 0; width: 320px; } #besecure .bodycontent .section.inverse img { float: right; margin-right: 0; margin-left: 10px; } #besecure .bodycontent .subsection.reversed img { float: right; margin-right: 0; margin-left: 21px; } #besecure .bodycontent .subsection.reversed p, #besecure .bodycontent .subsection.reversed ol, #besecure .bodycontent .subsection.reversed ul { float: left; } #besecure .bodycontent .illustration { width: 320px; float: right; } #besecure .bodycontent .subsection.icon { margin-bottom: 21px; } #besecure .bodycontent .subsection.icon > h5 { width: 172px; text-align: center; } #besecure .bodycontent .subsection.icon img { width: 172px; margin-right: 10px; } #besecure .bodycontent .subsection.icon > p, #besecure .bodycontent .subsection.icon ol, #besecure .bodycontent .subsection.icon ul { width: 742px; float: right; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #besecure .bodycontent .subsection.icon > p, #besecure .bodycontent .subsection.icon ol, #besecure .bodycontent .subsection.icon ul { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #besecure .bodycontent .subsection.icon > p, #besecure .bodycontent .subsection.icon ol, #besecure .bodycontent .subsection.icon ul { float: none; } } #besecure .bodycontent .subsection.icon ol, #besecure .bodycontent .subsection.icon ul { list-style-type: none; padding: 0; } #besecure .highlight { border: none; height: 252px; } #besecure .highlight .wrapper { height: 100%; } #besecure table td:nth-child(even) { background: #eeeeee; } #besecure table tr:nth-child(even) td { background: inherit; } #besecure .beSecureDownloadTable { font-size: 1.1em; font-weight: bold; } #timer .bodycontent { margin-bottom: 21px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #timer .bodycontent { margin-bottom: 0; } } #timer .bodycontent .wrapper { width: 960px; padding: 50px 30px; background: whitesmoke; border: 3px solid #dadada; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #timer .bodycontent .wrapper { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #timer .bodycontent .wrapper { padding: 5px; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #timer .bodycontent .wrapper { border: 0; } } #timer .bodycontent td, #timer .bodycontent th { text-align: center; padding: 5px; } #timer .bodycontent th { font-family: "Museo Slab"; font-size: 18px; font-weight: bold; } #security { /* .wrapper { padding-top: $line-height; }*/ } #security #banner { background-image: url("../images/headers/security1.jpg"); } #security .readthis { padding: 50px 0; font-size: 20px; } #security .readthis h4 { font-size: 35px; margin-bottom: 20px; } #security .about .bodycontent { padding-top: 21px; width: 560px; float: left; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #security .about .bodycontent { padding-top: 0; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #security .about .bodycontent { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #security .about .bodycontent { float: none; } } #security .kb .section { width: 930px; } #security .kb .section li { float: left; width: 270px; } #security .block { width: 33.33%; display: inline-block; position: relative; margin: 0; padding: 0; float: left; background-size: cover; background-position: center center; } #security .block h3 { display: inline-block; color: #fff; text-transform: uppercase; font: 40px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; letter-spacing: 2px; text-align: center; padding: 20px; border: 1px solid; margin-left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 50% 0 0 50%; } #security .block.besecure { background-image: url("../security/images/besecure.jpg"); } #security .block.mobile { background-image: url("../security/images/mobile.jpg"); } #security .block.resources { background-image: url("../security/images/tips.jpg"); } #security .overlay { position: relative; } #security .overlay:before { position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 0; background-color: rgba(0, 0, 0, 0.5); -moz-transition: background-color 0.13s ease; -webkit-transition: background-color 0.13s ease; -o-transition: background-color 0.13s ease; -khtml-transition: background-color 0.13s ease; transition: background-color 0.13s ease; } #security .overlay:hover:before { background-color: transparent; } #security .description { width: 33.33%; float: left; padding: 30px 65px; font-size: 20px; font-family: "Museo Slab", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; } #security .description ul { padding-left: 20px; } #security .description ul li { list-style-type: disc; margin: 10px 0; font-weight: normal; } #security .description ul a { text-decoration: none; font-size: 16px; color: #666; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 960px) { #security .block, #security .description { width: 100%; } } #besecure { /* .number { background-color: #333; color: #fff; font-size: 20px; width: 50px; height: 50px; @include border-radius(25px); position: absolute; margin: -35px 0 0 -35px; text-align: center; line-height: 50px; } .box { width: 425px; height: 435px; padding: 15px; background-color: #d4d4d4; display: inline-block; overflow: hidden; margin-bottom: 30px; color: #333; ul { padding-left: 15px !important; } img { display: block; margin: 0 auto; } h3 { text-align: center; } } .box:nth-child(even) { float: right; } .arrow { display: block; margin: 0 auto 150px auto; width: 60px; } #row1, #row2, #row3 { padding: 50px 0; }*/ /* #footer { display: none; }*/ } #besecure #banner { background-image: url("../images/headers/besecure2.jpg"); } #besecure .blurb { width: 960px; padding: 30px 0; margin: 0 auto; } #besecure .bodycontent { background-image: none; background-color: #fff; margin-bottom: 0; } #besecure .bodycontent .wrapper { background-color: #fff; width: 1200px; border: 0; position: relative; } #besecure .description { float: left; width: 275px; color: #333; text-align: center; clear: right; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } #besecure .description p { text-align: justify; } #besecure .description ul { padding-left: 0 !important; text-align: justify; } #besecure .laptop { float: right; margin-bottom: 30px; } #besecure .laptop img { max-width: 640px; } #mobile #banner { background-image: url("../images/headers/mobilesecurity.jpg"); } #mobile .bodycontent { margin: 30px 0; height: 1690px; } #mobile .intro { font-size: 16px; } #mobile ol li { margin-bottom: 30px; } #mobile ul li { margin-bottom: 0; } #cybersecuritymonth .bodycontent { margin: 30px 0; height: 1400px; } #cybersecuritymonth #banner { background-image: url("../images/headers/mobilesecurity.jpg"); } #cybersecuritymonth .wrapper img { max-width: 300px; vertical-align: middle; } #cybersecuritymonth #ways { display: inline-block; width: 300px; vertical-align: middle; margin-right: 20px; } #cybersecuritymonth li { margin-bottom: 10px; } #cybersecuritymonth #poster { display: block; margin: 15px auto; } /* _support.scss just.jake@rescomp.berkeley.edu 27 May 2011 This CSS does some tricky things to create a dynamic, page-stretching background. We want a 40-60 split on the page, which each section having its own background styling. Yet we also want to remain truly centered under our 960px header and footer, so we can't just set the two columns, contactrcc and .atmyunit, to 40% and 60% width. Instead, we set them both to 50% width, then use negative margins to acchieve our split. Then, super-wide child elements draw the backgrounds. On this page, #globalwrapper hides overflow, so we aren't bothered by massive scroll bars. The actual widths of the columns within the 960px are | .contactrcc - 400px | .atmyunit - 560px | Keep this in mind when resizing the width of .contactrcc and .atmyunit or thier contained block elements, as a stray pixel could bust one of the columns below the other if you aren't carefull. */ /* we set the height on some images because of bugs in Webkit's jquery height function especially when working with jquery.masonry */ /* content styling */ #support { /* left column */ /* Right column */ /* form */ } #support .highlight { border-bottom: 0; } #support .highlight .wrapper { height: 252px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .highlight .wrapper { height: auto; } } #support .atmyunit, #support .contactrcc { padding-top: 10px; } #support .atmyunit h2, #support .contactrcc h2 { margin-bottom: 21px; } #support .atmyunit { margin-left: -80px; padding-right: 5px; float: left; width: 50%; margin-bottom: 4px; text-align: right; color: #dadada; background: #464540; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .atmyunit { margin-left: 0; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .atmyunit { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .atmyunit { float: none; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .atmyunit { text-align: left; } } #support .atmyunit h1, #support .atmyunit h2, #support .atmyunit h3, #support .atmyunit h4, #support .atmyunit h5, #support .atmyunit h6 { color: whitesmoke; } #support .atmyunit h2 { width: 400px; float: right; text-align: right; padding-right: 21px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .atmyunit h2 { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .atmyunit h2 { float: none; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .atmyunit h2 { text-align: left; } } #support .atmyunit .bodycontent { clear: both; } #support .atmyunit .bodycontent .wrapper { width: 380px; margin: 0 0 21px auto; padding: 0 21px 0 0; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .atmyunit .bodycontent .wrapper { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .atmyunit .bodycontent .wrapper { margin: 0 5px; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .atmyunit .bodycontent .wrapper { padding: 0; } } #support .atmyunit .bodycontent h3, #support .atmyunit .bodycontent h4, #support .atmyunit .bodycontent h5 { color: #abc437; } #support .atmyunit ul.units li { display: inline; color: #4f4f4f; } #support .atmyunit ul.units li a { display: block; margin-bottom: 21px; padding: 10px; background: #dadada; border-top: 4px solid #abc437; color: #464540; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .atmyunit ul.units li a { margin-bottom: 5px; } } #support .atmyunit ul.units li a:hover { text-decoration: none; background-color: #fff; } * + html #support .atmyunit ul.units li a { display: block; } #support .atmyunit ul.units li a img { float: left; margin: -10px; margin-right: 0px; height: 130px; } #support .atmyunit ul.units li a h4 { margin-top: 20px; margin-bottom: 10px; font-size: 24px; font-weight: bold; color: #464540; } #support .atmyunit ul.units li a .hours { color: #4f4f4f; } #support .atmyunit li { line-height: 1.5; } #support .atmyunit .callout { text-align: center; } #support .contactrcc { position: relative; float: left; width: 50%; /* contact table with rollovers */ } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .contactrcc { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .contactrcc { float: none; } } #support .contactrcc h2 { width: 540px; padding-left: 21px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .contactrcc h2 { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .contactrcc h2 { float: none; } } #support .contactrcc .callout { margin-top: -21px; font-size: 28px; line-height: 1.5; text-align: center; } #support .contactrcc .wrapper { width: 540px; margin: 0 auto 0 0; padding: 0 0 0 21px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .contactrcc .wrapper { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .contactrcc .wrapper { float: none; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .contactrcc .wrapper { margin: 5px; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .contactrcc .wrapper { padding: 0; } } #support .contactrcc table { width: 100%; color: #464540; line-height: 21px; margin-bottom: 21px; } #support .contactrcc table a { margin: 0; padding: 5px 6px 1px 6px; display: block; color: #464540; white-space: nowrap; height: 100%; text-decoration: none; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; text-overflow: ellipsis; margin-bottom: 2px; } #support .contactrcc table a.name { background: #5cccda; } #support .contactrcc table tr:hover a { background: whitesmoke; } #support .contactrcc table tr:hover a.name { background: #e67a17; } #support form#supportEmailer label { display: inline-block; width: 120px; text-align: right; padding-right: 21px; } #support form#supportEmailer textarea, #support form#supportEmailer input[type=email], #support form#supportEmailer input[type=tel], #support form#supportEmailer input[type=text], #support form#supportEmailer input[type=phone], #support form#supportEmailer input[type=number], #support form#supportEmailer input[type=password] { width: 200px; font-size: 14px; margin: 0; } #support form#supportEmailer textarea:focus, #support form#supportEmailer input[type=email]:focus, #support form#supportEmailer input[type=tel]:focus, #support form#supportEmailer input[type=text]:focus, #support form#supportEmailer input[type=phone]:focus, #support form#supportEmailer input[type=number]:focus, #support form#supportEmailer input[type=password]:focus { border-color: #5cccda; } #support form#supportEmailer textarea { width: 340px; -moz-resize: vertical; -webkit-resize: vertical; -o-resize: vertical; -khtml-resize: vertical; resize: vertical; margin: 8px 0 4px; min-height: 84px; } #support form#supportEmailer div { margin: 4px 0; } #support form#supportEmailer select { width: 200px; } #support form#supportEmailer .message label { width: 48px; text-align: left; overflow: visible; } #support form#supportEmailer .message input { width: 273px; } #support form#supportEmailer .control label { width: 99px; } #support form#supportEmailer .control input[type=text] { width: 100px; margin-right: 10px; } #support form#supportEmailer .control input[type=submit] { position: relative; top: -2px; width: 110px; } #support .officehours { width: 910px; margin: 0 auto 21px auto; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .officehours { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #support .officehours { float: none; } } /* _unit.scss layout for unit pages */ #unit { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } #unit #banner1 { width: 100%; position: relative; /*h1:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; }*/ } #unit #banner1 img { width: 100%; } #unit #banner1 h1 { position: absolute; font-family: "Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; color: #fff; vertical-align: middle; padding: 20px; border: 1px solid; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #unit .highlight { border-color: #fff; } #unit .flash img { float: right; } #unit .officehours { width: 880px; margin: 0 auto; margin-bottom: 21px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #unit .officehours { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #unit .officehours { float: none; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #unit .officehours { margin-bottom: 0; } } #unit .resources { background: black; color: #dadada; } #unit .resources ul li { color: #fff; line-height: 21px; float: left; width: 470px; margin-left: 5px; margin-bottom: 21px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #unit .resources ul li { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #unit .resources ul li { float: none; } } #unit .resources ul li .icon { float: left; width: 21px; margin-right: 10px; } #unit .resources ul li div { color: #dadada; margin-top: 10px; margin-left: 31px; font-size: 12px; font-weight: normal; } #unit .resources ul li ul li { color: #dadada; margin-bottom: 0; max-width: 100%; } #unit .calconnect, #unit .rounds { width: 470px; float: left; margin-right: 10px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #unit .calconnect, #unit .rounds { width: auto; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #unit .calconnect, #unit .rounds { float: none; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #unit .calconnect, #unit .rounds { margin: 0; } } #unit .calconnect table, #unit .rounds table { width: 100%; } #unit .rounds { margin: 0; } #unit h3 { clear: both; } li.vcard { width: 310px; background: whitesmoke; float: left; margin-right: 10px; margin-bottom: 10px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { li.vcard { margin: 0; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { li.vcard { margin-bottom: 5px; } } li.vcard .portrait { float: left; overflow: hidden; text-align: center; height: 127px; width: 100px; } li.vcard .portrait img { margin-left: -47px; height: 100%; min-width: 190px; background: url("/images/css/vcard-placeholder-190.jpg"); border: 0; } li.vcard .info { float: left; padding: 1em; max-width: 182px; } li.vcard .info h4 { font-size: 21px; line-height: 1; } li.vcard .info a.url { font-size: 10px; color: #333; text-transform: uppercase; padding: 2px 3px; } li.vcard .info a.url:hover { color: whitesmoke; background: #464540; text-decoration: none; } li.vcard .org { color: #777; font-size: 12px; margin-top: 1px; margin-bottom: 10px; } li.vcard .blurb { clear: both; color: #dadada; background: #464540; padding: 1em; padding-bottom: 1px; } li.vcard .blurb p { margin-bottom: 1em; } li.vcard .school { padding: 5px; } li.vcard .school span { display: block; float: left; margin-right: 5px; padding: 5px; background: #464540; color: whitesmoke; font-size: 12px; /* supercool tag labels */ } li.vcard .school span:before { display: block; padding: 1px; text-transform: uppercase; border: 1px solid #f5f5f5; color: #444444; background: #f5f5f5; margin-bottom: 2px; font-size: 10px; } li.vcard .school span.major:before { content: "major"; text-transform: capitalize; } li.vcard .school span.minor:before { content: "minor"; text-transform: capitalize; } li.vcard .school span.class:before { content: "class"; text-transform: capitalize; } /* _typo.scss For testing typography baseline rythm stuff */ #typo { background: url("/images/css/baseline-21px.png"); } #typo #content .padded h1 { font-size: 56px; line-height: 1.125; } #typo #content .padded h2 { font-size: 42px; line-height: 1; } #typo #content .padded h3 { font-size: 28px; line-height: 1.5; } #typo #content .padded h4 { font-size: 21px; line-height: 1; } #typo #content .padded h5 { line-height: 1.5; font-weight: 500; } body#teams .next, body#teams .prev { display: block; float: left; line-height: 1.5; font-weight: 500; } body#teams .prev { float: right; } body#teams .highlight h2 { width: 600px; } /* _oneoff.scss Temporary partial for styles that should be migrated elsewhere... eventually */ #getconnected .leadin { margin-bottom: 21px; } #getconnected .highlight { height: 252px; border: 0; } #getconnected a.focus { display: block; width: 310px; float: left; margin-right: 10px; margin-bottom: 21px; color: #464540; background: #abc437; } #getconnected a.focus:hover { background: #e67a17; text-decoration: none; } #getconnected a.focus:hover img { background: #fff; } #getconnected a.focus h4 { padding: 0 14px; line-height: 42px; } #getconnected a.focus img { background: whitesmoke; width: 100%; margin: 0 auto; } #getconnected ol { clear: both; list-style-position: inside; padding: 0; } #getconnected ol li { padding: 0; margin: 0; font-size: 28px; line-height: 63px; padding-left: 23px; color: whitesmoke; background: url("/images/css/circle-orange-63.png") no-repeat top left; } #getconnected ol li * { font-size: 14px; line-height: 21px; color: #4f4f4f; letter-spacing: 0; } #getconnected ol li h3 { font-size: 28px; line-height: 1.5; position: relative; display: inline-block; padding-left: 27.3px; padding-left: 8px\9; } * + html #getconnected ol li h3 { padding-left: 42px; } #getconnected ol li p { clear: both; margin-left: 62px; } body#privacy .bodycontent { padding-top: 21px; } body#conferences table { width: 310px; margin: 21px auto; } body#conferences table td { padding: 5px; line-height: 21px; } body#policies .enforcement { width: 288px; float: left; padding: 10px; } body#policies .enforcement.middle { width: 288px; padding: 10px; margin: 0; color: #dadada; background: #464540; } body#policies .enforcement.middle h1, body#policies .enforcement.middle h2, body#policies .enforcement.middle h3, body#policies .enforcement.middle h4, body#policies .enforcement.middle h5, body#policies .enforcement.middle h6 { color: whitesmoke; } body#policies p.notice { clear: both; margin-bottom: 0; } body#policies table.usage { width: 100%; margin-bottom: 21px; } body#policies table.usage .title { border-right: 0; width: 230px; } body#policies table.usage .grouper { background: url("/images/icons/bracket-442-ddd.png") no-repeat; padding-left: 140px; vertical-align: middle; border: 0; text-transform: uppercase; font-size: 42px; line-height: 1; } body#policies table.usage .netflix .logo { width: 220px; height: 60px; background-color: transparent; background-image: url("/images/icons/datause-sprites.png"); background-position: 0px 0px; } body#policies table.usage .hulu .logo { width: 220px; height: 60px; background-color: transparent; background-image: url("/images/icons/datause-sprites.png"); background-position: 0px -60px; } body#policies table.usage .grooveshark .logo { width: 220px; height: 60px; background-color: transparent; background-image: url("/images/icons/datause-sprites.png"); background-position: 0px -120px; } body#policies table.usage .youtube .logo { width: 220px; height: 60px; background-color: transparent; background-image: url("/images/icons/datause-sprites.png"); background-position: 0px -180px; } body#policies table.usage .pandora .logo { width: 220px; height: 60px; background-color: transparent; background-image: url("/images/icons/datause-sprites.png"); background-position: 0px -240px; } body#policies table.usage .web .logo { width: 220px; height: 60px; background-color: transparent; background-image: url("/images/icons/datause-sprites.png"); background-position: 0px -300px; text-indent: 0; text-align: right; } body#policies table.usage .doc .logo { width: 220px; height: 60px; background-color: transparent; background-image: url("/images/icons/datause-sprites.png"); background-position: 0px -360px; text-indent: 0; text-align: right; } body#policies table.usage .times { display: inline-block; vertical-align: middle; width: 220px; height: 60px; background-color: transparent; background-image: url("/images/icons/datause-sprites.png"); background-position: -220px 0px; width: 50px; } body#policies table.usage tr.header th { text-indent: 0; } body#policies table.usage th, body#policies table.usage td { line-height: 62px; height: 62px; vertical-align: middle; } body#apply { /* Sortable Units */ /* Groups GPA radio buttons with text */ } body#apply ul.info { clear: both; } body#apply ul.info li { line-height: 21px; margin-top: 21px; clear: both; } body#apply fieldset { margin-bottom: 21px; background: whitesmoke; padding-bottom: 21px; clear: both; } body#apply fieldset p { padding: 0 10px; } body#apply fieldset.ref { float: left; width: 470px; margin-right: 20px; clear: none; } body#apply fieldset.ref li label { width: 35%; } body#apply fieldset.ref li input[type=text], body#apply fieldset.ref li blockquote { width: 60%; } body#apply fieldset.ref li blockquote { margin-left: 35%; } body#apply .ref.last, body#apply .ref:last-child { margin-right: 0; } body#apply legend { font-size: 21px; line-height: 1; background: whitesmoke; padding: 5px 10px; } body#apply form li { line-height: 42px; position: relative; clear: both; } body#apply form li label { width: 25%; display: block; float: left; text-align: right; padding-right: 10px; clear: left; } body#apply form li input[type=text] { width: 70%; } body#apply blockquote { width: 70%; clear: both; text-align: left; line-height: 21px; margin-left: 25%; position: relative; left: 10px; top: -10px; } body#apply input.error { border: 1px solid #770000; border: 1px solid #770000; background-color: #edd8d8; color: #770000; } body#apply label.error { display: inline-block; padding: 0 5px; border: 1px solid #770000; background-color: #edd8d8; color: #770000; background: whitesmoke; border-top: none; text-align: left; width: auto !important; float: none; font-size: .8em; } body#apply ul.ui-sortable { width: 50%; margin-left: auto; margin-right: auto; } body#apply ul.ui-sortable li { margin: 10px; margin-top: 0; padding: 0 1em; font-weight: normal; } body#apply .standalone { margin-left: 25%; padding-left: 10px; clear: left; line-height: 42px; } body#apply input[type=radio], body#apply input[type=checkbox] { margin-right: 10px; } .calConnectSessions { width: 100%; margin-top: 30px; margin-bottom: 10px; clear: both; } .calConnectSessions .wrapper { max-width: 900px; margin-left: 83px; } .calConnectSession { float: left; margin-bottom: 40px; margin-right: 17px; } .calConnectSession .session { font-family: "Museo Slab", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.5em; font-weight: bold; margin-bottom: 0.2em; width: 432px; } .calConnectSession .location { font-size: 1.2em; font-weight: 500; margin-bottom: 0.8em; } .calConnectSession .date { font-size: 1.1em; font-weight: bold; margin-top: 0.8em; margin-bottom: 0.4em; } .calConnectSession table { width: 432px; margin-bottom: 20px; } .calConnectSession th { align: left; } .calConnectSession td { padding: 0.5em; } .calConnectSession colgroup.time { width: 59px; } .calConnectSession .internationalStudents colgroup.time { width: 125px; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .calConnectSession { min-height: 0px; } .calConnectSessions .wrapper { margin-left: 78px; } } .hiringSections { overflow: hidden; margin: 20px auto; } .hiringSection { width: 31%; display: block; float: left; padding: 1.15%; } a.hiringSection:hover { text-decoration: none; background: whitesmoke; } .hiringSection h4 { margin-bottom: 5px; font-size: 20px; } .hiringSection img { width: 100%; } #timeline { /* #applicationProcess { h5 { color: #0695A7; } } */ } #timeline table { width: 100%; } #timeline table col.process { width: 19%; } #timeline table col.lead { width: 23%; } #timeline table col.senior { width: 23%; } #timeline table col.rcc { width: 35%; } #timeline table th { text-align: left; font-weight: 700; font-size: 1.25em; } #timeline table th .subheader { font-size: 0.8em; display: block; } #timeline table td { padding: 0.3em; } #timeline table td.process { font-weight: bold; } #timeline h3 { margin-top: 35px; margin-bottom: 10px; } #timeline h5 { font-weight: bold; font-size: 1.15em; } #timeline .description { margin-bottom: 15px; } #life .highlight .wrapper { padding-left: 0px; } #life .highlight .wrapper h2 { width: 500px; } #life .highlight .wrapper .flash { width: 460px; } #life h3 { margin-top: 0; margin-bottom: 10px; clear: both; } #life h5 { font-weight: bold; font-size: 1.15em; } #life p { margin-bottom: 15px; } #life img { max-width: 100%; } #life .section { margin-top: 35px; overflow: hidden; padding: 25px; } #life .section:nth-of-type(odd) { background-color: #f3f3f3; box-shadow: 0 0 5px #aaa; } #life .section:nth-of-type(odd) .description { float: left; } #life .section:nth-of-type(odd) img { float: right; } #life .section:nth-of-type(even) { background-color: #cfcfcf; box-shadow: 0 0 5px #777; } #life .section:nth-of-type(even) .description { float: right; } #life .section:nth-of-type(even) img { float: left; } #life #video { background: #464540; } #life #video iframe { display: block; margin: 0 auto; } #life #people .description { float: none; } #life #people img { float: none; } #life .tagline { font-weight: bold; font-size: 1.2em; font-style: italic; font-family: "Museo Slab", "Helvetica Neue", Helvetica, Arial, sans-serif; } #life #hours .description { width: 51%; } #life #hours img { width: 44%; } #life #location .description { width: 40%; } #life #location img { width: 55%; border: 1px solid #ddd; } #life #pay .description { width: 65%; } #life #pay img { width: 30%; } #life #work .description { width: 50%; } #life #work img { width: 45%; } #life #growth .description { width: 45%; } #life #growth img { width: 50%; } #life #alumni .description { width: 45%; } #life #alumni img { width: 50%; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .hiringSection { width: 100%; margin-bottom: 15px; } #life #video iframe { width: 100%; } #life #hours .description, #life #pay .description, #life #growth .description { width: 100%; } #life #hours img, #life #pay img, #life #growth img { width: 100%; } #life #location .description, #life #work .description, #life #alumni .description { width: 100%; } #life #location img, #life #work img, #life #alumni img { width: 100%; } } /* _.scss Styling for homepage redesign author: Allison Yee date: July 2014 */ #home .nav-wrapper { overflow: hidden; } #home #carousel { position: relative; width: 75%; float: left; overflow: hidden; color: #fff; } #home #carousel ul { font-size: 0; white-space: nowrap; margin: 0; padding: 0; } #home #carousel ul li { display: inline-block; vertical-align: top; width: 100%; white-space: normal; text-align: center; list-style: none; } #home #carousel ul li img { width: 100%; } #home #carousel ul li .slide-box { position: absolute; font-family: "Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif; vertical-align: middle; padding: 15px; border: 1px solid #fff; z-index: 5; display: none; width: 50%; bottom: 0; left: 35%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #home #carousel ul li .slide-box:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; } #home #carousel ul li .slide-text { display: inline-block; vertical-align: middle; } #home #carousel ul li .slide-title, #home #carousel ul li .slide-title a { font-size: 40px; font-weight: 300; text-transform: uppercase; margin: 15px; color: #fff; } #home #carousel ul li .slide-caption { font-size: 20px; font-weight: 300; text-align: justify; margin: 15px; line-height: 1.2; } #home .outer { overflow: hidden; } #home #news { width: 25%; float: right; background-color: #fff; overflow: scroll; color: #3d3d3d; overflow-y: scroll; overflow-x: hidden; } #home #news .more { padding: 8px; -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; border-radius: 7px; background-color: #dadada; display: inline; color: #464540; font-family: "Museo Slab", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; } #home #news h3 { font-family: "Museo Slab", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 30px; font-weight: 500; margin: 20px; display: inline-block; } #home #news h4 { font-family: "Museo Slab", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; margin: 0; } #home #news ul { list-style: none; } #home #news ul li { padding: 20px; z-index: 99; } #home #news ul li .date { font-family: "Museo Slab", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; margin-top: 5px; } #home #news ul li p { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; } #home #news .articles { margin: 0px; padding: 0px; } #home #news .articles a, #home #news .articles a:visited { text-decoration: none; color: #e67a17; } #home #news li:nth-child(odd) { background-color: #dadada; } #home #support-section { background-color: #333; clear: both; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } #home #support-section a, #home #support-section a:visited { color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } #home #support-section .container { display: block; width: 100%; min-width: 1085px; max-width: 1300px; margin: 0 auto; overflow: hidden; padding: 50px 20px; } #home #support-section img { height: 120px; float: left; margin: 20px 15px 0 0; } #home #support-section .clock { margin-right: 10px; } #home #support-section div { display: inline-block; } #home #support-section #office-hours { width: 41%; float: left; } #home #support-section #office-hours .reminder { color: #fff; margin: 15px 0 0 140px; } #home #support-section #helpdesk { width: 39%; float: left; } #home #support-section #helpdesk .laptop { margin-bottom: 12px; } #home #support-section #helpdesk h4 { display: inline-block; border-bottom: 4px solid #abc437; margin-bottom: 10px; } #home #support-section #phone-support { width: 20%; color: #fff; } #home #support-section #phone-support img { float: left; } #home #support-section #phone-support h4 { margin: 30px 0 5px 0; display: inline-block; border-bottom: 4px solid #abc437; } #home #support-section #phone-support p { margin-bottom: 10px; } #home #support-section table.officehours { color: #fff; padding: 0; width: 300px; border-spacing: 10px 0; } #home #support-section table.officehours tr:nth-child(1) th { background: transparent !important; } #home #support-section table.officehours tr:nth-child(odd) th, #home #support-section table.officehours tr:nth-child(odd) td { background: #464540; } #home #support-section table.officehours tr th { -moz-transition: background 0.2s ease; -webkit-transition: background 0.2s ease; -o-transition: background 0.2s ease; -khtml-transition: background 0.2s ease; transition: background 0.2s ease; } #home #support-section table.officehours tr th:hover { background: #191919; } #home #support-section .helpdesk { float: left; margin-top: 40px; } #home #support-section .officehours a { color: #e67a17; } #home #navlinks { background-color: #bcbcbc; padding: 20px; margin: 0 auto; } #home #navlinks #support, #home #navlinks #resources { background-color: #abc437; } #home #navlinks #services, #home #navlinks #security { background-color: #5cccda; } #home #navlinks #policies { background-color: #e67a17; } #home #navlinks .box { display: block; overflow: hidden; width: 18%; padding: 25px; margin: 0 1% 0 1%; float: left; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; border-radius: 15px; vertical-align: middle; font-family: "Helvetica"; color: #252525; text-align: center; } #home #navlinks .box .icon img { height: 95px; position: relative; top: 0px; -moz-transition: top 0.2s ease; -webkit-transition: top 0.2s ease; -o-transition: top 0.2s ease; -khtml-transition: top 0.2s ease; transition: top 0.2s ease; } #home #navlinks .box .title { font-size: 20px; margin-top: 10px; } #home #navlinks .box .caption { font-size: 13px; margin-top: 15px; } #home #navlinks .box:first-child { margin-left: 1%; } #home #navlinks .box:last-child { margin-right: 1%; } #home #navlinks .box:hover img { top: -10px; } #home #about-us { background-color: #333; height: 350px; padding-top: 70px; color: whitesmoke; text-align: center; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } #home #about-us .heading { font-family: "Museo Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: 100; font-size: 45px; margin: 15px; } #home #about-us .subheading { font-weight: 300; } #home #about-us .statistics { margin: 25px auto; display: inline-block; } #home #about-us .statistics .stat { display: inline-block; float: left; margin: 10px 50px 0 0; } #home #about-us .statistics .stat .number { font-size: 30px; font-weight: 300; line-height: 1.5; } #home #about-us .statistics .stat .description { text-transform: uppercase; font-weight: 300; font-size: 13px; } #home #about-us .statistics .stat:last-child { margin-right: 0; } @media all and (max-width: 1045px) { #home #support-section .container { min-width: 980px !important; } #home #support-section .container #office-hours { width: 33% !important; } #home #support-section .container #office-hours .reminder { margin: 15px 0 0 15px !important; } #home #support-section .container #helpdesk { width: 43% !important; } #home .clock { display: none; } } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 960px) { #home #carousel { display: none; } #home #news { width: 100%; height: 100% !important; overflow: visible; } #home #support-section .container { min-width: 0 !important; padding: 10px 0; } #home #support-section .container #office-hours { width: 300px !important; display: block; overflow: hidden; margin: 0 auto; margin-top: 20px; float: none !important; text-align: center; } #home #support-section .container #office-hours .reminder { margin: 20px 0 0 0 !important; } #home #support-section .container #helpdesk { width: 300px !important; display: block; overflow: hidden; margin: 0 auto; float: none !important; } #home #support-section .container #phone-support { width: 200px !important; float: none; display: block; overflow: hidden; margin: 0 auto; } #home #support-section img { width: 60px; } #home #support-section .clock { display: none; } #home #support-section .phone { float: left; width: 200px; } #home #navlinks { padding: 0; clear: both; } #home #navlinks .box { width: 100%; margin: 0; padding: 15px; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; } #home #navlinks .box:first-child { margin: 0; } #home #navlinks .icon, #home #navlinks .caption { display: none; } #home #navlinks .title { text-transform: uppercase; } #home #about-us { height: auto; padding-top: 25px; clear: both; } #home #about-us .heading { font-size: 38px; } #home #about-us .statistics .stat { float: none; display: block; margin: 10px auto; } } /* _news.scss author: alcyee@rescomp.berkeley.edu date: 18 July 2014 news archive */ #archive { /* #banner h1 { padding: 20px; font-family: "Helvetica Neue"; text-transform: uppercase; letter-spacing: 5px; font-weight: 100; font-size: 40px; border: 1px solid #fff; color: #fff; display: inline-block; }*/ } #archive #globalwrapper { min-width: 0 !important; } #archive #banner { min-height: auto; background-image: url("../images/headers/news.jpg"); /*@include prefix('background-size', cover);*/ background-position: center center; padding: 7em 0 7em 0; /*background-attachment: fixed;*/ } @media screen and (-webkit-min-device-pixel-ratio: 0) { #archive #banner { background-size: cover; } } #archive #container { max-width: 1050px; margin: 30px auto; } #archive .grid-sizer { width: 50%; } #archive .article { width: 40%; padding: 20px; /*border: 1px solid #ddd;*/ margin: 0 5% 40px 5%; font-family: "Helvetica Neue"; font-size: 14px; line-height: 1.5; background: #fff; color: #4f4f4f; } #archive .article a { color: #e67a17; } #archive .article img { max-width: 100%; } @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) { #archive .article { width: 90%; } } /* _resources.scss author: alcyee@rescomp.berkeley.edu date: 18 July 2014 resources index */ #resources .sections.wrapper li, #kb .sections.wrapper li { display: inline-block; padding: 7px; background-color: #abc437; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; margin-right: 10px !important; -moz-transition: background-color 0.15s ease; -webkit-transition: background-color 0.15s ease; -o-transition: background-color 0.15s ease; -khtml-transition: background-color 0.15s ease; transition: background-color 0.15s ease; } #resources .sections.wrapper li a, #kb .sections.wrapper li a { color: #333 !important; } #resources .sections.wrapper li:hover, #kb .sections.wrapper li:hover { background-color: #e67a17; } #resources #banner, #kb #banner { background-image: url("../images/headers/resources2.jpg"); background-size: cover; background-position: center center; padding: 8em 0 8em 0; } #resources #banner h1, #kb #banner h1 { display: inline-block; color: #fff; text-transform: uppercase; font: 40px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; letter-spacing: 2px; text-align: center; padding: 20px; border: 1px solid; margin-left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #resources #container, #kb #container { width: 100%; height: auto; position: relative; } #resources #sidebar, #kb #sidebar { float: left; position: absolute; width: 250px; height: 100%; background-color: #bcbcbc; padding: 30px; } #resources #sidebar h3, #kb #sidebar h3 { font-family: "Museo Slab", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; font-size: 18px; cursor: pointer; margin-bottom: 5px; } #resources #sidebar h3 .plus, #kb #sidebar h3 .plus { padding: 0 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; display: inline-block; margin-right: 8px; } #resources #sidebar a, #resources #sidebar a:visited, #kb #sidebar a, #kb #sidebar a:visited { color: #333; font-size: 14px; text-decoration: none; } #resources #sidebar ul, #resources #sidebar li, #kb #sidebar ul, #kb #sidebar li { list-style-type: none; margin: 10px; } #resources #sidebar ul, #kb #sidebar ul { padding-left: 40px; margin: 1em 0; display: none; -webkit-transition: display 0.3s linear; -moz-transition: display 0.3s linear; -o-transition: display 0.3s linear; transition: display 0.3s linear; } #resources #content, #kb #content { margin-left: 250px; padding: 50px; min-width: 340px; background: url("../images/css/kb-background2.gif"); } #resources #content .wrapper.resources, #kb #content .wrapper.resources { display: block; margin: 0 auto; overflow: hidden; /*max-width: 910px;*/ } @media all and (min-width: 1280px) { #resources #content .wrapper.resources, #kb #content .wrapper.resources { margin-left: 0px; } } #resources #content .bullet-no-space li, #kb #content .bullet-no-space li { margin: 0; } #resources #content .right-float, #kb #content .right-float { float: right; } #resources #content .left-float, #kb #content .left-float { float: left; } #resources #content .cf, #kb #content .cf { clear: both; } #resources #content .img-inline, #kb #content .img-inline { display: inline-block; } #resources #content #security, #kb #content #security { clear: both; } @media all and (min-width: 1px) and (max-width: 930px) { #resources #content .category, #kb #content .category { clear: both; } } @media all and (min-width: 931px) and (max-width: 1259px) { #resources #content #security, #kb #content #security { clear: none !important; } #resources #content #networking, #resources #content #software, #kb #content #networking, #kb #content #software { clear: both !important; } #resources #content .category:nth-child(2n), #kb #content .category:nth-child(2n) { margin-right: 0 !important; } } @media all and (min-width: 1260px) { #resources #content .category:nth-child(3n), #kb #content .category:nth-child(3n) { margin-right: 0; } } @media all and (min-width: 1310px) { #resources #content .category:nth-child(3n), #kb #content .category:nth-child(3n) { margin-right: 0; } } @media all and (max-width: 1319px) { #resources #content .category, #kb #content .category { margin-right: 50px; } } @media all and (min-width: 1320px) { #resources #content .category, #kb #content .category { margin-right: 80px; } } #resources #content .category, #kb #content .category { width: 270px; float: left; margin: 0 50px 40px 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #resources #content .category .square, #kb #content .category .square { display: inline-block; width: 240px; line-height: 240px; text-align: center; text-transform: uppercase; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 300; letter-spacing: 2px; } #resources #content .category .square.general, #kb #content .category .square.general { background-image: url("../images/resources/general.jpg"); } #resources #content .category .square.hardware, #kb #content .category .square.hardware { background-image: url("../images/resources/hardware.jpg"); } #resources #content .category .square.software, #kb #content .category .square.software { background-image: url("../images/resources/software.jpg"); } #resources #content .category .square.networking, #kb #content .category .square.networking { background-image: url("../images/resources/networking.jpg"); } #resources #content .category .square.security, #kb #content .category .square.security { background-image: url("../images/resources/security.jpg"); } #resources #content .category .square.contact, #kb #content .category .square.contact { background-image: url("../images/resources/contact.jpg"); } #resources #content .category .tab, #kb #content .category .tab { display: inline-block; width: 30px; height: 50px; background-color: #abc437; font-weight: bold; vertical-align: bottom; line-height: 50px; text-align: center; text-decoration: none; color: #333; cursor: pointer; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; -moz-transition: background 0.2s ease; -webkit-transition: background 0.2s ease; -o-transition: background 0.2s ease; -khtml-transition: background 0.2s ease; transition: background 0.2s ease; } #resources #content .category .tab:hover, #kb #content .category .tab:hover { background-color: #5cccda; } #resources #content .category .caption, #kb #content .category .caption { margin: 20px 50px 20px 20px; font-size: 14px; } #resources #content .category ul, #kb #content .category ul { display: none; padding-left: 20px; -webkit-transition: display 0.3s linear; -moz-transition: display 0.3s linear; -o-transition: display 0.3s linear; transition: display 0.3s linear; } #resources #content .category ul li, #kb #content .category ul li { list-style-type: disc; } #resources #content .category ul a, #kb #content .category ul a { text-decoration: none; font-size: 14px; color: #666; } #resources #content #article, #kb #content #article { max-width: 800px; } #resources #content #article img, #kb #content #article img { margin-bottom: 21px; } #resources #content #article table, #kb #content #article table { margin-bottom: 21px; } #resources #content #article table th, #kb #content #article table th { padding: .4em .5em; font-weight: bold; text-align: left; } #resources #content #article table td, #kb #content #article table td { padding: .25em .5em; } #resources #content #article tr:nth-child(even), #kb #content #article tr:nth-child(even) { background-color: #cdcdcd; } #resources #content #article ul, #kb #content #article ul { list-style-type: disc; padding-left: 40px; margin-bottom: 21px; } #resources #content #article blockquote, #kb #content #article blockquote { border-left: 4px solid; padding-left: 25px; margin: 0 0 21px 35px; } #resources #content p, #kb #content p { font-size: 14px; color: #333; } #resources #content a, #kb #content a { color: #e67a17; } #resources #content li:first-of-type, #kb #content li:first-of-type { margin: 0; } #resources #content li, #kb #content li { margin: 10px 0; } #resources #content ol ol, #kb #content ol ol { list-style-type: lower-latin; } @media all and (min-width: 1419px) { #resources #sidebar, #kb #sidebar { width: 300px !important; } #resources #content, #kb #content { padding-left: 100px !important; margin-left: 300px !important; } } #getconnected .bodycontent { background-image: url("../images/css/kb-background2.gif"); } #getconnected .bodycontent .wrapper { padding: 30px 0; } #getconnected #banner { background-image: url("../images/headers/getconnectedbanner.jpg"); } #getconnected .intro { font: 20px "Museo Slab"; margin-bottom: 20px; } #getconnected .connection { margin-bottom: 15px; } #getconnected .connection img { margin-right: 15px; } #getconnected .connection #airbears { margin: 0 30px 0 10px; } #getconnected .align, #getconnected .instructions { display: inline-block; vertical-align: middle; } #getconnected .instructions { max-width: 800px; } #getconnected .gc { float: right; margin: 0 35px 50px 35px; line-height: 1.5; width: 650px; empty-cells: show; } #getconnected .gc .title { text-align: center; font: bold 20px "Museo Slab"; } #getconnected .gc .unit { font: bold 14px "Museo Slab"; text-align: center; } #getconnected .gc th { border-bottom: 2px solid #abc437; font-weight: bold; } #getconnected .gc tr { -moz-transition: background-color 0.2s ease; -webkit-transition: background-color 0.2s ease; -o-transition: background-color 0.2s ease; -khtml-transition: background-color 0.2s ease; transition: background-color 0.2s ease; } #getconnected .gc td, #getconnected .gc th { padding: 5px; } #getconnected .gc tr:nth-child(n+4):nth-child(odd) { background-color: #d8d8d8; } #getconnected .gc tr:nth-child(n+4):hover { background-color: #bbb; } #getconnected #office-hours { float: left; margin: 0; width: 250px; text-align: center; } #getconnected #rounds tr td:nth-child(2), #getconnected #rounds tr td:nth-child(3) { text-align: center; } #getconnected .clock { display: block; width: 300px; margin: 40px auto 30px auto; } #getconnected #contact { margin: auto; } #getconnected #contact th, #getconnected #contact td { padding: 10px; text-align: center; } #getconnected #contact th { border-bottom: 2px solid #abc437; font-weight: bold; } #team { background: none; } #team #banner { background-image: url("/images/teams/marketing/markbanner.jpg"); } #team .inner-wrapper { text-align: center; margin: 0 auto; max-width: 700px; } #team h3 { display: inline-block; background-color: #5cccda; text-transform: uppercase; font-family: "Museo Slab", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1; padding: 6px; } #team .stats { width: 347px; display: block; margin: 0 auto; } #team .stats .left-stats { text-align: right; display: inline-block; margin-right: 40px; } #team .stats .left-stats .single-stat { text-align: right; } #team .stats .right-stats { display: inline-block; } #team .stats .right-stats .single-stat { text-align: left; } #team .stats .single-stat { margin-bottom: 10px; } #team .stats .number { font: 60px "Bebas Neue"; font-weight: bold; } #team .description { text-align: left; } #team .photostrip { margin: 50px 0; overflow: hidden; } #team .photostrip .photo { width: 33.33%; min-height: 300px; background-size: cover; background-position: center; float: left; } #team .photostrip .photo#one { background-image: url("/images/teams/marketing/IMG_8943.jpg"); } #team .photostrip .photo#two { background-image: url("/images/teams/marketing/movein1.jpg"); } #team .photostrip .photo#three { background-image: url("/images/teams/marketing/IMG_8950.jpg"); }