/* Resets */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, blockquote, cite, code, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, button {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* HTML */
body { font-family: Arial, sans-serif; background: #222; color: #222; text-align: center; margin: 0; line-height: 1.5; font-size: 13px; }
h1, h2, h3, h4, h5, h6 { }
h2 { font-size: 24px; font-weight: 400; }
h3 { font-size: 20px; font-weight: 400; color: #bb0000; }
h4 { font-size: 18px; font-weight: 400; color: #666; }
h5 { font-size: 14px; color: #bb0000; font-weight: 700; }
div { overflow: hidden; }
ul { list-style: none; }
abbr { border-bottom: 1px solid #333; cursor: help; }
a { color: #bb0000; text-decoration: underline; }
a:hover { color: #000; text-decoration: underline; }
table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 11px; background: #eee; }
th { background: #bbb; border-bottom: 1px solid #aaa; color: #000; font-weight: 700; text-align: left; padding: 5px; }
td { border-bottom: 1px solid #aaa; padding: 5px; vertical-align: top; }
#content td p { margin: 0; }
::-moz-selection { background: #ffff99; color: #000; }
::selection { background: #ffff99; color: #000; }
/* OSU Navbar styles */
.osu-semantic { position: absolute ; left: 0; top: -500px; width: 1px; height: 1px; }
a.osu-semantic:active, a.osu-semantic:focus { position: absolute; left: 0; top: 0; overflow: visible; font-family:"proximanova", Arial, sans-serif; }
a#skip:active, a#skip:focus { position: absolute; top: 0; left: 25%; width: 50%; text-align: center; padding: 0.5em 0 1.5em 0; display: block; color:#fff; z-index: 9999; text-decoration: none; background: #666; background: rgba(0,0,0,0.8); border: 1px dotted #ccc; border-top: none; border-radius: 0 0 6px 6px; }
a#skip:active:hover, a#skip:focus:hover { background: #b00; background: rgba(187,0,0,0.8); }
#osu_navbar { clear: both; background: #eaeaea url("/images/navbar/bg-navbar_red.jpg") left bottom repeat-x; }
#osu_navbar * { font-family: "proximanova", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.5; font-weight: normal; }
#osu_navbar p { margin: 0; padding: 0; }
#osu_navbar .container {width:960px; margin: 0 auto;}
#osu_navbar .univ_info { float: left; padding: 1em 0; }
#osu_navbar .univ_links { float: right; clear: none; padding: 1em 0 0; margin-top: -2px; }
#osu_navbar .univ_name a { height: 16px; width: 80px; display: block; text-indent: -9999px; background: url("/images/navbar/osu_name.png") 0 0 no-repeat; margin-left: 20px; }
#osu_navbar div.links { float: left; }
#osu_navbar div.links ul { margin: 0; }
#osu_navbar div.links ul li { list-style: none; float: left; margin-right: 1em; }
#osu_navbar div.links ul li a { color: #333; text-decoration: none; }
#osu_navbar div.links ul li a:hover, #osu_navbar div.links ul li a:focus { text-decoration: underline; }
/* Vision */
#vision { background: #222; height: 39px; }
#vision p { margin: 0; }
#vision a { display: block; margin: 0 auto; width: 960px; height: 39px; background: url("/images/vision.png") 0 0 no-repeat; }
#vision p a span { position: absolute; left: 0; top: -1000px; }
/* Hidden */
.hidden, h1 span, #slice h2 span, #osu-wordmark span, #centerpiece-nav a span { position: absolute; left: 0; top: -1000px; }
.hide, #nav-menu { display: none; }
/* Top */
#middle { max-width: 1200px; min-width: 960px; margin: 0 auto; padding: 0 0 30px 0; overflow: visible; background: #fff 50% 40px no-repeat; }
#container { width: 960px; text-align: left; margin: 0 auto; }
#header { width: 960px; background: #fff; }
#header h1 { display: none; }
#logo { float: left; margin: 45px 20px 0 0; }
#logo-osu { float: right; margin: 20px 0 20px 20px; }
#logo img, #logo-osu img { float: left; clear: both; }
/* Middle */
#middle { background: #fff; }
#content { width: 960px; clear: both; margin: 0; background: url("/images/bg-content.png") 0 0 repeat-y; }
#content ul { list-style: square; line-height: normal; }
#content ul, #content ol { padding: 0 0 0 40px; margin: 10px 0; }
#content p { margin: 10px 0; }
#content .icon-pdf { background: url("/images/icons/icon-pdf.gif") 0 3px no-repeat; padding-left: 20px; }
#content .icon-doc { background: url("/images/icons/icon-doc.gif") 0 3px no-repeat; padding-left: 20px; }
#content .icon-xls { background: url("/images/icons/icon-xls.gif") 0 3px no-repeat; padding-left: 20px; }
#content .icon-mp3 { background: url("/images/icons/icon-mp3.gif") 0 3px no-repeat; padding-left: 20px; }
#content .icon-ppt { background: url("/images/icons/icon-ppt.gif") 0 3px no-repeat; padding-left: 20px; }
#content .icon-pub { background: url("/images/icons/icon-pub.gif") 0 3px no-repeat; padding-left: 20px; }
#content .icon-msg { background: url("/images/icons/icon-outlook.gif") 0 3px no-repeat; padding-left: 20px; }
#content .icon-other { background: url("/images/icons/icon-page.gif") 0 3px no-repeat; padding-left: 20px; }
#content .images { width: 200px; float: right; padding: 20px 20px 0 20px; margin: 0 0 10px 10px; background: #fff; }
#content .images h3 { margin: 0; color: #666; font-size: 14px; font-weight: 700; }
#content .images ul { list-style: none; padding: 0; margin: 0; }
#content .images li { font-size: 11px; line-height: 1.3; color: #666; padding-top: 0; padding-bottom: 0; }
#content .images li span { display: block; }
#content .images .text { width: 200px; margin: 5px 0 10px 0; color: #666; }
#tieronenav { width: 727px; clear: both; margin: 0 0 -7px 0; }
#tieronenav ul { list-style: none; padding: 0; margin: 20px 0 0 0; }
#tieronenav ul li { float: left; }
#tieronenav ul li a { height: 330px; width: 204px; padding: 9px; margin: 0 7px 7px 0; display: block; background: #fff; color: #000; float: left; text-decoration: none; }
#tieronenav ul li a br { display: none; }
#tieronenav ul li a .image { display: block; overflow: hidden; border: 2px solid transparent; width: 200px; height: 200px; }
#tieronenav ul li a:hover .image { border-color: #990000; }
#tieronenav ul li a .image .crop { width: 400px; margin-left: -100px; display: block; overflow: visible; text-align: center; }
#tieronenav ul li a .image img { margin: 0 auto; }
#tieronenav ul li a .title { font-weight: 800; color: #990000; display: block; margin: 10px 0; }
#tieronenav ul li a .summary { display: block; font-size: 11px; }
#content .documents { clear: both; }
#content .documents ul { list-style: none; padding: 0; margin: 10px 0; }
#content .documents span { }
#content .documents .text { display: block; margin: 5px 0; }
#sidebar { width: 220px; margin: 0 20px 0 0; float: left; background: #fff; }
#sidebar ul { list-style: none; padding: 0; margin: 0; }
#sidebar li { float: left; clear: both; }
/* Tier 1*/
#sidebar li a { width: 200px; display: block; padding: 10px; text-decoration: none; color: #666; font-weight: 800; background-color: #ddd; margin: 0 0 5px 0; }
#sidebar li:last-child a { border: 0; }
#sidebar li a:hover { background-color: #ccc; color: #000; }
#sidebar .active a, #sidebar .active a:hover { background-color: #bb0000; color: #fff; }
/* Tier 2 & Tier 3*/
#sidebar li ul li a { width: 190px; padding-left: 20px; background: #ddd url("/images/arrow-right-small.gif") 10px 50% no-repeat; font-size: 11px; font-weight: 400; }
#sidebar .active li a, #sidebar li li a { color: #636466; background-color: #ddd; }
#sidebar .active li a:hover { background-color: #bb0000; color: #fff; }
/* Tier 3*/
#sidebar li ul li ul li a { width: 170px; color: #636466; padding-left: 40px; background-position: 30px 50%; }
#sidebar li.active li a:hover { background-color: #ccc; color: #000; }
#sidebar li:last-child a { margin: 0; }
#sidebar li li:last-child a { margin: 0 0 5px 0; }
#mainbar { width: 680px; padding: 20px; float: left; }
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#colorbox, #colorbox div { overflow: visible !important; }
/* Bottom */
#bottom { }
#osu-wordmark { margin: 0 0 6px 0; }
#osu-wordmark a { display: inline-block; margin: 0; width: 295px; height: 35px; background: url("/images/osu-web-footer.png") 0 0 no-repeat; }
#footer { width: 960px; margin: 0 auto; text-align: left; padding: 30px 0; color: #fff; font-size: 12px; line-height: 1.7; }
#footer p, #footer a { color: #fff; }
/* Forms */
#content .info { padding: 10px 20px; margin: 5px 0; border: 1px solid #ddd; background: #ffffcc; }
#content .info ul { padding: 0; margin: 0; list-style: none; }
#content .info li { background: url("/images/icons/icon-info.gif") 0 50% no-repeat; padding: 5px 0 5px 20px; }
#content .error { background: #fff0f0; border: 1px solid #bb0000; padding: 20px; margin: 10px 0; }
#content .error ul { padding: 0; margin: 0; list-style: none; }
#content .error li { overflow: visible; background: url("/images/icons/icon-error.gif") 0 50% no-repeat; padding-left: 20px; margin: 5px 0; }
fieldset { border-top: 1px solid #bb0000; }
fieldset legend { color: #bb0000; font-weight: 800; padding: 0 10px 0 0; }
fieldset .rowwrap { width: 100%; clear: both; padding: 5px 0; }
fieldset .label { width: 25%; float: left; font-weight: 800; }
fieldset .label label { display: block; padding-right: 5px; }
fieldset .input { width: 73%; margin-left: 2%; float: left; }
fieldset .checkboxes { overflow: scroll; height: 200px; border: 1px solid #ddd; }
fieldset table { width: auto; margin: 0; }
fieldset textarea { width: 90%; }
fieldset .checkboxes table { width: 100%; }
.tip { font-family: Tahoma, Sans-Serif; font-size: 10px !important; font-weight: 400 !important; color: #999; margin: 0 !important; }
.tooltip { clear: both; }
.submit {}
.required { color: #bb0000; font-weight: 800; font-size: 15px; }
/* Home */
#centerpiece { width: 720px; background: #111; position: relative; clear: both; margin: -20px -20px 20px -20px; border-bottom: 20px solid #fff; }
#centerpiece .story { visibility: hidden; }
#centerpiece .main { width: 720px; background: #111; }
#centerpiece .main img { float: left; clear: both; width: 100%; height: auto; }
#centerpiece .text { width: 100%; position: absolute; bottom: 0; left: 0; color: #ccc; padding: 5px 0; font-size: 11px; background: url("/images/bg-transparent.png") 0 0 repeat; z-index: 12; }
#centerpiece .text h2 { margin: 15px 20px; line-height: 1; text-transform: none; color: #fff; }
#centerpiece .text p, #centerpiece .text ul, #centerpiece .text ol { margin: 10px 20px; }
#centerpiece .text a { color: #ccc; }
#centerpiece-nav ul { list-style: none; padding: 0; margin: 0; position: absolute; right: 20px; top: 20px; z-index: 20; }
#centerpiece-nav li { float: left; }
#centerpiece-nav a { background: #ddd; display: block; width: 16px; height: 16px; margin-left: 10px; box-shadow: 3px 3px 4px #000; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
#centerpiece-nav .active a { background: #bb0000; }
#centerpiece-foreground { width: 720px; position: absolute; left: 0; top: 0; bottom: 0; background: #111; z-index: 10; }
#updates { width: 720px; margin: -20px -20px 0 -20px; font-size: 12px; border-bottom: 20px solid #fff; }
#updates .col { width: 310px; padding: 20px; float: left; }
#updates h2 { font-size: 15px; font-weight: 800; color: #fff; background: #bb0000; padding: 10px 20px; }
#updates h2 a { color: #fff; text-decoration: none; }
#updates .col h2 em { color: #ddd; font-size: 11px; font-weight: normal; text-transform: none; }
#updates .col h2 em a { color: #ddd; }
#updates .col h2 em a:hover { color: #fff; }
#updates ul { list-style: none; padding: 10px; margin: 0; }
#updates li { overflow: hidden; color: #999; clear: both; padding: 5px 10px 10px 20px; background: url("/images/icon-arrow-right.png") 0 5px no-repeat; }
#updates li a { text-decoration: none; }
#updates li .date { display: block; font-size: 11px; padding: 4px 0 0 0; }
#updates #hours { margin: 0 -20px 0 -20px; }
#updates #hours h2 { margin: 0; }
#updates #hours p { margin: 20px 20px 0 20px; }
#news li { background: url("/images/icons/icon-page.gif") 0 5px no-repeat; }
#slice { width: 720px; margin: 0 -20px -20px -20px; }
#slice .header h2 { width: 206px; height: 83px; margin: 20px 18px 0 20px; background: url("/images/logo-slice.png") 0 0 no-repeat; float: left; }
#slice .header p { width: 286px; border: 2px solid #bbb; margin: 20px 20px 0 0; padding: 20px; font-size: 11px; color: #666; float: right; background: #ccc; }
#slice h3 { border: 0; margin: 15px 0 10px 0; line-height: 1.25; }
#slice .story { width: 200px; padding: 20px; float: left; font-size: 11px; }
#slice .image { width: 190px; height: 100px; border: 4px solid #fff; box-shadow: 5px 5px 5px #aaa; text-align: center; background: #fff; }
#slice .image img.tall { height: 100px; width: auto; }
#slice .image img.wide { width: 177px; height: auto; }
#slice .more { clear: both; }
#slice .more a { display: block; margin: 0 20px 20px 20px; padding: 10px; line-height: 1; font-size: 14px; font-weight: 700; float: right; background: #bb0000; color: #fff; text-decoration: none; text-transform: uppercase; }
#slice .more a:hover { background: #000; }
/* Newsletter */
#newsletter-stories .story { clear: both; border-bottom: 1px solid #999; padding: 10px 0; }
#newsletter-stories .story:last-child { border: 0; }
#newsletter-stories .text { width: 400px; }
#newsletter-stories h3 { border: 0; }
#newsletter-stories img { box-shadow: 5px 5px 5px #aaa; border: 10px solid #fff; }
#newsletter-stories img.odd { float: right; margin: 10px 10px 20px 20px; }
#newsletter-stories img.even { float: left; margin: 10px 20px 20px 10px; }
/* People */
#people { clear: both; }
#people h3 { clear: both; padding: 10px 0; border-top: 1px solid #bb0000; }
#people ul { list-style: none; padding: 0; margin: 0; font-size: 12px; }
#people li { float: left; width: 305px; margin: 0 10px 10px 0; }
#people li .name { font-weight: 800; }
#people li .image { width: 110px; float: left; }
#people li .text { width: 195px; float: right; }
#person ul { list-style: none; padding: 0; margin: 0; }
/* Mobile */
@media screen and (max-width: 970px) {
#middle, #container, #header, #content, #content .documents, #content .images, #content .images .text, #sidebar, #sidebar li, #sidebar li a, #mainbar, .home #mainbar, #tieronenav, #updates, #updates .col, #updates .col:first-child, #slice, #slice .header p, #slice .story, #newsletter-stories .text, #bottom, #footer, fieldset .label, fieldset .input { min-width: inherit ; max-width: inherit; float: none; width: inherit; margin: 0; position: inherit !important; left: inherit; top: inherit; background: none !important; border: 0; }
body { background: #bababa; }
#vision, #header h1, #sidebar, #osu-wordmark { display: none; }
#container { padding: 0; }
#middle { margin: 0; padding: 0; }
#logo { float: left; width: 75%; display: block; margin: 0 5% 0 0; padding: 0; }
#logo-osu { float: right; width: 20%; display: block; margin: 0;}
#logo img, #logo-osu img { width: 100%; height: auto; }
#header { padding: 20px; background: #fff !important; }
#slice .header h2 { float: none; }
#nav-menu { clear: both; display: block; background: #666; }
#nav-menu a { display: block; float: right; font-size: 25px; line-height: 1; font-family: "proximanova", sans-serif; text-transform: uppercase; padding: 20px; background: #222; color: #fff; text-decoration: none; }
#nav-menu a:focus { outline: none; }
#nav-menu.active a, #nav-menu.active a:hover { color: #666; }
#centerpiece { width: inherit; background: none; padding: 0; border: 0; margin: 0 0 20px 0; }
#centerpiece .main, #centerpiece .story { width: auto; height: auto; }
#centerpiece .main img, #centerpiece .story img { width: 100% !important; height: inherit !important; }
#centerpiece .nav a { width: 24px; height: 24px; background: #a6a6a6; }
#centerpiece .nav .active a { background-position: inherit; background: #d31145; }
#content, #footer { background: #bababa !important; }
#content .images { padding: 0; }
#content .images img { width: 100% !important; height: auto !important; }
#content .images .text { margin: 0 0 10px 0; }
#mainbar, .home #mainbar { margin: 20px; padding: 20px; background: #fff !important; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#sidebar { background: #bababa !important; font-family: "proximanova", sans-serif; text-transform: uppercase; }
#sidebar ul { padding: 0; margin: 0; }
#sidebar li a, #sidebar li:last-child a, #sidebar li li:last-child a { width: auto !important; background: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
#sidebar li { width: 100%; border-bottom: 1px solid #fff; float: left; clear: both; }
#sidebar li a, #sidebar li.active a { width: auto; text-align: left; padding: 15px 20px; margin: 0; font-size: 18px !important; line-height: 1.1; background: none; filter: none; }
#sidebar li.active a { color: #bb0000; }
#sidebar li.active a:hover { color: #bb0000; background: #ccc; }
#sidebar li.active li a { color: #666; }
#sidebar li a:hover, #sidebar li.active li a:hover { color: #444445; background: #ccc !important; }
#footer { color: #222; padding: 0 20px 20px 20px; }
#footer p, #footer a { color: #222; }
fieldset input[type='text'], fieldset textarea { width: 90%; }
#updates { margin: 20px 0 0 0; }
#people li, #people li.special { float: left; width: 100%; margin: 0 10px 10px 0; background: none; padding: 0; }
#people li .image { width: 20%; margin: 0 5% 0 0; }
#people li .image img { width: 100%; height: auto; }
#people li .text { width: 75%; }
#gallery { width: auto; overflow: hidden; list-style: none; border: 1px solid #bb0000; clear: both; }
#gallery p { margin: 20px; }
#gallery .breadcrumbs { width: auto; overflow: hidden; list-style: none; padding: 10px; margin: 0; border-bottom: 1px solid #bb0000; clear: both; }
#gallery .single { width: auto; }
#gallery .single img { width: 100%; }
}
@media screen and (max-width: 600px) {
#centerpiece .text { display: none !important; }
#cboxTitle { display: none !important; }
}
@media screen and (max-width: 480px)
{
#logo { padding: 0; width: 100%; }
#logo-osu { display: none; }
}
@media screen and (max-width: 300px)
{
#container, #bottom { width: 300px; overflow: hidden; }
}
/* Responsive Navbar */
/* Switch Navbar container from fixed 960px centered to full-width */
@media only screen and (max-width: 990px) {
#osu_navbar .container {width:100%; margin:0 10px; min-width:300px;} /* Make container full width */
#osu_navbar div.container .univ_name a {margin-left:0;}
#osu_navbar div.links ul {margin-right:10px;}
}
/* Replace text links with icons at 600px */
@media only screen and (max-width: 600px) {
#osu_navbar div.links ul {margin-top:-2px; margin-right:10px;}
#osu_navbar div.links ul li {list-style:none; float:left; margin-right:.5em;}
#osu_navbar div.links ul li a {height:23px; width:23px; display:block; overflow:hidden; text-indent:-999px;}
#osu_navbar div.links ul li a:hover {text-decoration: none;}
#osu_navbar div.links ul li a.help {background:url("/images/navbar/resp-help.png") 0 0 no-repeat;}
#osu_navbar div.links ul li a.buckeyelink {background:url("/images/navbar/resp-buckeyelink.png") 0 0 no-repeat;}
#osu_navbar div.links ul li a.map {background:url("/images/navbar/resp-map.png") 0 0 no-repeat;}
#osu_navbar div.links ul li a.findpeople {background:url("/images/navbar/resp-findpeople.png") 0 0 no-repeat;}
#osu_navbar div.links ul li a.webmail {background:url("/images/navbar/resp-webmail.png") 0 0 no-repeat;}
#osu_navbar div.links ul li a.search {background:url("/images/navbar/resp-search.png") 0 0 no-repeat;}
/* Hide search box */
#osu_navbar div.search {display:none;}
}
/* Retina icons */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2) {
#osu_navbar .univ_name a {background-image: url("/images/navbar/osu_name@2x.png"); background-size: contain;}
}
@media only screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (max-width: 600px) and (min--moz-device-pixel-ratio: 2),
only screen and (max-width: 600px) and (-o-min-device-pixel-ratio: 2/1),
only screen and (max-width: 600px) and (min-device-pixel-ratio: 2) {
#osu_navbar div.links ul li a.help {background-image:url("/images/navbar/resp-help@2x.png");}
#osu_navbar div.links ul li a.buckeyelink {background-image:url("/images/navbar/resp-buckeyelink@2x.png") !important;}
#osu_navbar div.links ul li a.map {background-image:url("/images/navbar/resp-map@2x.png") !important;}
#osu_navbar div.links ul li a.findpeople {background-image:url("/images/navbar/resp-findpeople@2x.png") !important;}
#osu_navbar div.links ul li a.webmail {background-image:url("/images/navbar/resp-webmail@2x.png") !important;}
#osu_navbar div.links ul li a.search {background-image:url("/images/navbar/resp-search@2x.png") !important;}
/* scale icon background size */
#osu_navbar div.links ul li a.help,
#osu_navbar div.links ul li a.buckeyelink,
#osu_navbar div.links ul li a.map,
#osu_navbar div.links ul li a.findpeople,
#osu_navbar div.links ul li a.webmail,
#osu_navbar div.links ul li a.search { -webkit-background-size: 23px; -moz-background-size: 23px; background-size: 23px;}
}