/* OSU Institute of Technology: The Next Generation * Homepage CSS file. * * (C) 2009 OSU Institute of Technology * * Design by Sywan Shih * Coding by Keith Gable */ /* the images */ div.tiles { width: 90%; left: 10%; padding: 0; text-align: left; position: absolute; top: 110px; z-index: 0;} div.tiles img { width: 200px; border: 0; margin: 0; padding: 0; vertical-align: middle; } /* the links */ ul.tiles { list-style-type: none; width: 82%; left: 10%; margin: 0; padding: 0; position: absolute; top: 110px; z-index: 1; } ul.tiles li { float: left; } ul.tiles li a { display: block; height: 100%; } ul.tiles li a span { display: none; } ul.tiles li a { background-image: url("/images/1x1trans.gif"); background-repeat: repeat; } /* IE and WebKit won't render the links properly without a background image */ /* the modal box */ #hpmodal { width: 100%; min-height: 100%; position: fixed; top: 0; left: 0; z-index: 9998; background: url("/images/modal_bg-trans.png") repeat-x top left; text-align: center; padding: 0; margin: 0; } #hpmodal-panel { position: absolute; z-index: 9999; left: 10%; width: 80%; margin: 0; padding: 40px; border: 3px solid #999; border-radius: 3px; -moz-border-radius: 3px; -opera-border-radius: 3px; -webkit-border-radius: 3px; background-color: #3d3d3d; background-image: url("/images/modal_panel.png"); background-repeat: repeat-x; background-position: top left; color: #fff; font-size: 0.8em; line-height: 1.5; overflow: auto; } #hpmodal-panel h1 { font-size: 2.5em; margin: 5px 0 5px 0; font-weight: 900; color: #ffffff; padding: 0; text-transform: uppercase; letter-spacing: -1px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } #hpmodal-panel h2 { font-size: 2.0em; margin: 5px 0 5px 0; font-weight: 900; color: #ff6600; padding: 0; text-transform: uppercase; letter-spacing: -1px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } #hpmodal-panel a { color: #ff6600; text-decoration: none; border-bottom: 1px dotted #ff6600; } #hpmodal-panel a:hover { color: #ff9900; text-decoration: none; border-bottom: 1px dotted #ff9900; } #hpmodal-panel ul li { list-style-image: url("/images/bullet1-trans.png"); min-height: 7px; } #hpmodal-panel .carousel ul li { list-style: none; } #hpmodal-panel a.learnmore, #hpmodal-panel a.learnmore img { border: 0; } .twocolumn.divider>div:first-child { background: url("/images/tile_twocolumn_divider.png") no-repeat center right; } .twocolumn.divider>div:first-child p { margin-right: 20px; } /* Section buttons (news, videos, photos, events) */ #sections { position: absolute; left: 10%; width: 80%; margin: 0; padding: 0; } /* this will need to be positioned below the tiles using javascript */ #sections ul { list-style: none; margin: 0; padding: 0; } #sections ul li { list-style: none; float: left; margin: 0; padding: 0; height: 60px; width: 25%; height: 60px; } #sections ul li:first-child>span { margin-left: 0; } #sections ul li>span { display: block; background: #0b1614 url("/images/homepage/section_button_bg.png") repeat-x 0 0; border-top: 1px solid #a5693d; border-left: 1px solid #2e3937; border-right: 1px solid #2e3937; border-bottom: 1px solid #2e3327; margin-left: 0.5em; padding: 0; height: 60px; } #sections ul li>span a { display: block; height: 60px; padding: 23px 0 0 0.5em; margin: 0 -1px; /* remove the border from the left and right of the chevron */ background: url("/images/homepage/section_chevron.png") repeat-x top center; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: bold; font-size: 25px; text-transform: uppercase; text-decoration: none; letter-spacing: 1px; color: #fff; } #sections ul li a>span { /* this span is a workaround for IE, it puts a glow around the background image (!) */ display: block; /* Give the span layout so IE will filter it */ text-shadow: #935e0a 0 0 8px; } #sections ul li:hover>span { background: #141a16 url("/images/homepage/section_button_bg.png") repeat-x 0 -60px; border-top: 1px solid #f56403; border-left: 1px solid #525955; border-right: 1px solid #525955; border-bottom: 1px solid #454434; } #sections ul li:hover>span a { background: url("/images/homepage/section_chevron_hover.png") repeat-x top center; } /* Info boxes */ #infoboxes { width: 80%; margin: 0 10%; padding: 0; text-align: center; } #infoboxes a, #infoboxes img { border: 0; } #infoboxes a { margin: 0 0.25em 0.25em 0; } #infoboxes ul li a span { color: #ff6600; font-weight: bold; display: block; font-size: 1.3em; } /* The Get Real Get Hired Logo */ #get-real-get-hired { display: block; position: absolute; width: 12%; z-index: 1000; left: 17.5%; top: 50px; } #get-real-get-hired img { width: 100%; border: 0; } /* The homepage carousel */ .hpcarousel { font-size: 75%; line-height: 110%; } .hpcarousel ul.eventday { display: block; margin: 0 5px 10px 5px; padding: 0; list-style: none; color: #eee; border-top: 1px solid #2e3e44; background-color: #111c20; height: 250px; } .hpcarousel ul.eventday.stripe { background-color: #182429; } .hpcarousel span.eventday { margin: 10px 5px 0 5px; padding: 5px; display: block; background-color: #001111; color: #ff6600; /* #FF7700 is accessible */ font-weight: bold; text-align: right; text-transform: uppercase; } .hpcarousel span.eventday.stripe { background-color: #091a1b; } .hpcarousel li.event { margin: 5px; padding: 0; list-style: none; } .hpcarousel li.event .dtstart { display: block; color: #a8a8a8; } .hpcarousel a.event { color: #FFF; text-decoration: none; } .hpcarousel a.event:hover, .hpcarousel a.event:active { color: #FFF; text-decoration: underline; } /* Calendar event fancybox */ #calendarevent { color: #000; font-size: 0.8em; width: 450px; height: 175px; margin: 0; padding: 0; overflow: hidden; } #calendarevent h1 { font-size: 1.2em; margin: 0; padding: 0; font-weight: bold; } #calendarevent dt { color: #999; width: 50px; } #calendarevent dd { margin: 0 0 0 60px; }