/* CSS reset - comment out if already using a reset */ #osu_navbar .container {margin: 0 auto;} /* OSU Navbar styles */ .osu-semantic {position: absolute; left: 0; top: -500px; width: 1px; height: 1px; overflow: hidden;} 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:999999999999999999; 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; margin:0; padding:0; background: #eaeaea url(../images/bg-navbar_red.jpg) left bottom repeat-x; overflow:hidden;} #osu_navbar * {font-family:'proximanova','Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px;line-height:1.5; font-weight:normal;} /* University info */ #osu_navbar p {margin:0; padding:0;} #osu_navbar .univ_info {float:left; padding: 1em 0 ;} #osu_navbar .univ_links {float:right; clear:none; padding: 1em 0 0; margin-top:-2px; margin-right:-10px;} #osu_navbar .univ_name a {height:16px; width:80px; display:block; text-indent:-9999px; background: url(../images/osu_name@2x.png) 0 0 no-repeat; margin-left:0;color:#333;background-size: contain;} /* Links */ #osu_navbar div.links {float:left;} #osu_navbar div.links ul {margin:0; padding-left: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 {text-decoration: underline;} /* -------------------------- Responsive -------------------------- Must include: in the of the html file */ @media only screen and (max-width: 991px) { #osu_navbar a:focus, #osu_navbar a:active {outline: dotted 1px #fff;} 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:999999999999999999; 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;} #osu_navbar {clear:both; margin:0; padding:0; background: transparent; background-image:none; border-bottom: 2px solid #bb0000; overflow:hidden;} #osu_navbar div.links ul li a {color:#fff; text-decoration: none;} #osu_navbar .univ_name a { height: 16px; width: 80px; display: block; text-indent: -9999px; background: url(../images/white/osu_name@2x.png) 0 0 no-repeat; margin-left: 0; background-size: contain; } #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:last-child {margin-right:20px;} #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-image: url(../images/white/resp-help@2x.png) !important; background-size: contain; } #osu_navbar div.links ul li a.buckeyelink { background-image: url(../images/white/resp-buckeyelink@2x.png) !important; background-size: contain; } #osu_navbar div.links ul li a.map { background-image: url(../images/white/resp-map@2x.png) !important; background-size: contain; } #osu_navbar div.links ul li a.findpeople { background-image: url(../images/white/resp-findpeople@2x.png) !important; background-size: contain; } #osu_navbar div.links ul li a.webmail { background-image: url(../images/white/resp-webmail@2x.png) !important; background-size: contain; } #osu_navbar div.links ul li a.search { background-image: url(../images/white/resp-search@2x.png) !important; background-size: contain; } /* Hide search box */ #osu_navbar div.search {display:none;} } @media only screen and (max-width: 767px) { #osu_navbar .container {width:100%; margin:0; 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;} #osu_navbar div.links ul li:last-child {margin-right:0;} } /* @media only screen and (max-width: 480px) { #osu_navbar .univ_name a {height:16px; width:85px; display:block; text-indent:-9999px; overflow:hidden; background: url(../images/white/osu_name.png) -30px 0 no-repeat;} } */ /* Retina icons */ @media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 767px) and (min--moz-device-pixel-ratio: 2), only screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 2/1), only screen and (max-width: 767px) and (min-device-pixel-ratio: 2) { #osu_navbar .univ_name a {background-image: url(../images/white/osu_name@2x.png) !important; /* scale name background size */ /* -webkit-background-size: 100px 16px; -moz-background-size: 100px 16px; */ background-size: contain;} #osu_navbar div.links ul li a.help { background-image: url(../images/white/resp-help@2x.png) !important; background-size: contain; } #osu_navbar div.links ul li a.buckeyelink { background-image: url(../images/white/resp-buckeyelink@2x.png) !important; background-size: contain; } #osu_navbar div.links ul li a.map { background-image: url(../images/white/resp-map@2x.png) !important; background-size: contain; } #osu_navbar div.links ul li a.findpeople { background-image: url(../images/white/resp-findpeople@2x.png) !important; background-size: contain; } #osu_navbar div.links ul li a.webmail { background-image: url(../images/white/resp-webmail@2x.png) !important; background-size: contain; } #osu_navbar div.links ul li a.search { background-image: url(../images/white/resp-search@2x.png) !important; background-size: contain; } /* 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;} } /* Full tOSU name for iPhone 4 horiz */ @media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 480px) { /* #osu_navbar .univ_name a {width:220px !important;} */ } /* Shorten tOSU name for iPhone 4 vert */ @media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 480px) and (orientation: portrait) { /* #osu_navbar .univ_name a {width:95px !important;} */ }