/*** customized for ODEE sites ***/ /* from Blueprint reset.css - comment out if already using a reset */ html, body, div, span, p, a, img, ul, li {margin:0;padding:0;border:0;} #zone-osu-navbar-wrapper, #osu_navbar { background: #eaeaea url(images/bg-navbar_red.jpg) left bottom repeat-x; overflow:hidden; } /* OSU Navbar styles */ #osu_navbar {clear:both; margin:0; padding:0; } #osu_navbar * {font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:11px;line-height:1.7;} /* 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;} #osu_navbar .univ_name a {height:16px; width:220px; display:block; text-indent:-9999px; background: url(images/osu_name.png) 0 0 no-repeat; margin-left:0px;} /* Comment out if using a CSS framework or 100% fluid layout */ #osu_navbar .navbar-container {width:960px; margin: 0 auto;} #osu_navbar div.container .univ_name a {height:19px; width:220px; display:block; text-indent:-9999px; background: url(images/osu_name.png) 0 0 no-repeat; margin-left:10px;} /* Links */ #osu_navbar div.links {float:left; margin-bottom:10px;} #osu_navbar div.links ul {margin:0 20px 0 0;} #osu_navbar div.links ul li {list-style:none; float:left; margin-right:3px;} #osu_navbar div.links ul li.last {margin-right:0;} #osu_navbar div.links ul li a {color:#555; text-decoration: none;} #osu_navbar div.links ul li a:hover {text-decoration: underline;} .osu-semantic {display:none;} /* -------------------------- Responsive -------------------------- Must include: in the of the html file */ /* Switch Navbar container from fixed 950px centered to full-width */ @media only screen and (max-width: 990px) { #osu_navbar .navbar-container {width:100%; margin:0 ; min-width:280px;} /* Make container full width */ #osu_navbar .univ_name a {margin-left:0;} #osu_navbar div.links ul {margin-right:20px;} } /* Replace text links with icons when space runs out at 700px*/ @media only screen and (max-width: 700px) { #osu_navbar .univ_name a {margin-left:10px;} #osu_navbar div.links ul {margin-top:-2px; margin-right:5px;} #osu_navbar div.links ul li {list-style:none; float:left; margin-right:0; margin-left: 0;} #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/resp-help.png) 0 0 no-repeat;} #osu_navbar div.links ul li a.buckeyelink {background:url(images/resp-buckeyelink.png) 0 0 no-repeat;} #osu_navbar div.links ul li a.map {background:url(images/resp-map.png) 0 0 no-repeat;} #osu_navbar div.links ul li a.findpeople {background:url(images/resp-findpeople.png) 0 0 no-repeat;} #osu_navbar div.links ul li a.webmail {background:url(images/resp-webmail.png) 0 0 no-repeat;} #osu_navbar div.links ul li a.search {background:url(images/resp-search.png) 0 0 no-repeat;} /* Hide search box */ #osu_navbar div.search {display:none;} } /* Shrink tOSU name when space runs out at 480px */ @media only screen and (max-width: 480px) { #osu_navbar .univ_name a {height:16px; width:85px !important; display:block; text-indent:-9999px; overflow:hidden; background: url(images/osu_name.png) -30px 0 no-repeat !important;} } /* Retina icons */ @media only screen and (max-width: 700px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 700px) and (min--moz-device-pixel-ratio: 2), only screen and (max-width: 700px) and (-o-min-device-pixel-ratio: 2/1), only screen and (max-width: 700px) and (min-device-pixel-ratio: 2) { #osu_navbar .univ_name a {background-image: url(images/osu_name@2x.png) !important; /* scale name background size */ -webkit-background-size: 220px 16px; -moz-background-size: 220px 16px; background-size: 220px 16px;} #osu_navbar div.links ul li a.help {background-image:url(images/resp-help@2x.png) !important;} #osu_navbar div.links ul li a.buckeyelink {background-image:url(images/resp-buckeyelink@2x.png) !important;} #osu_navbar div.links ul li a.map {background-image:url(images/resp-map@2x.png) !important;} #osu_navbar div.links ul li a.findpeople {background-image:url(images/resp-findpeople@2x.png) !important;} #osu_navbar div.links ul li a.webmail {background-image:url(images/resp-webmail@2x.png) !important;} #osu_navbar div.links ul li a.search {background-image:url(images/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;} } /* 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;} }