/* CSS Document */ * { margin: 0; padding: 0 } #skiptocontent a { padding: 6px; position: absolute; top: -50px; left: 0px; color: white; border-right: 1px solid white; border-bottom: 1px solid white; border-bottom-right-radius: 8px; background: transparent; transition: top 1s ease-out, background 1s linear; z-index: 100; } #skiptocontent a:focus { position: absolute; left: 0px; top: 0px; background: #BF1722; outline: 0; transition: top .1s ease-in, background .5s linear; } /* ------------------------------------- TEXT, BREAKS & LINKS --------------------------------- */ h2, h3, h4, h5, h6 { line-height: 1.1em; font-weight: 500 !important; color: #333 } h1 { font-size: 2em; margin: 1.4em 0 .8em; line-height: 1.1em; font-weight: 500 !important; color: #333; } h2 { font-size: 1.59em; margin: 1.4em 0 1em; padding-bottom: .3em; background: linear-gradient( to left, rgba(255,255,255,0) 0%, rgba(200,200,200,1) 100% ) left bottom transparent no-repeat; background-size: 65% 3px; } h3 { font-size: 1.35em; margin: 1.25em 0 .8em; padding-bottom: .3em; background: linear-gradient( to left, rgba(255,255,255,0) 0%, rgba(200,200,200,1) 100% ) left bottom transparent no-repeat; background-size: 65% 1px; } h4 { font-size: 1.2em !important; margin: 1.1em 0 .6em !important; } h5 { font-size: 1.1em; margin: 1.1em 0 .3em } h6 { font-size: 1em; } /* SUBHEAD, SUPERHEAD */ .subhead { display: block; font-size: 80%; font-weight: 400; line-height: 1.2em; padding-left: 1px } .superhead { display: block; font-size: 80%; font-weight: 400; color: #777; line-height: 1.2em } h1.gatehead .superhead { font-size: 76%; color: #eee; line-height: .7em } .bdept h1 .superhead, .oasub h1 .superhead { font-size: 60%; } /* FONTISHNESS */ .ten, .tengray, .eleven, .textsmall { font-size: 12px; line-height: 1.1em } .tengray { color: #555; } .twelve { font-size: 14px; } .thirteen { font-size: 15px; } .fourteen { font-size: 17px; } .sixteen { font-size: 19px; } .eighteen { font-size: 21px; } .twenty { font-size: 23px; } .twentyfour { font-size: 27px; } .fontnorm, .fontnorm a, a.fontnorm { font-weight: normal } .fontbold a, a.fontbold, ul li.fontbold, div.fontbold ul li a { font-weight: bold } /* #0e4271 border: #aad1f4 HOVER -- */ a, a strong { color: #0e4271; text-decoration: none; border-bottom: 1px solid #b4cbe0; font-weight: 400 } a:visited { color: #0e4271; text-decoration: none; border-bottom: 1px solid #b4cbe0 } a:hover { color: #0070ff; border-bottom: 1px solid #c6e5fd } a:focus, li a:focus, #menubar1 a:focus, #crumb a:focus { background-color: #0e4271; color: #fff } a.black:focus, li a.black:focus, a:focus strong.black { background-color: #000; color: #fff } .noborder, table.noborder td, td.noborder, a img.noborder, a.noborder, #box.r13.noborder { border: 0px; border-top: 0px; border-bottom: 0px; border-left: 0px; border-right: 0px } p { margin: .7em 0; letter-spacing: .4px; font-size: 16px; line-height: 1.5em } p, ul, ul li, ul li li { font-weight: 300; color: #333 } p.tight, p.tight a, span.tight { line-height: 1.2em } p.intro, ul.intro li { font-size: 1.7em; line-height: 1.3em; color: #666; letter-spacing: normal; font-weight: 400; } ul.intro li { line-height: 1em; } p.intro strong { color: #555; font-weight: 800 } p img { margin-top: 14px } p img.left, p img.right, #container.tail p img { margin-top: 4px } .indent { margin-left: 20px } strong { font-weight: 600; color: #333 } hr { color: #fff; height: 0px; border-top: .5px solid #ddd; border-left: 1px solid #fff; width: 99%; background-color: #fff; margin: 3px auto 4px 0; } hr.clearer { clear: both; visibility: hidden; height: 0; margin: 0; padding: 0; line-height: 0 } .printonly { display: none } .clearright { clear: right } .clearleft { clear: left } .clearboth { clear: both } .cent { text-align: center } .right { float: right } .left { float: left } .marright { margin-right: 16px } .marleft, img.marleft, a img.marleft, div.marleft, img.right.marleft, #box.marleft { margin-left: 16px } .marbottom, p.marbottom, ul.marbottom, img.marbottom, div.marbottom, #box.marbottom { margin-bottom: 16px } .martop, p.martop, ul.martop, img.martop, div.martop, #box.martop { margin-top: 16px } .nomartop, #box.nomartop, img.nomartop { margin-top: 0 } .nomarbottom, #box.nomarbottom { margin-bottom: 0 } .textright { text-align: right } /* FORM STUFF */ input { vertical-align: middle; font-size: .9em; } /* Makes responsive fields. Sets size and field alignment.*/ form input[type=text], form input[type=password] { margin: 8px auto; width: 94%; max-width: 400px; padding: 5px; border-radius: 5px; border: 1px solid #7ac9b7; } form input[type=submit], input[type=reset], button { background: #0e4271; background-image: linear-gradient(to bottom, #237fd4, #014e95); border-radius: 5px; font-family: Arial; color: #fff; font-size: 16px; padding: 6px 15px 6px; text-decoration: none; display: inline-block; box-shadow: 0 0 0 #fff; border: none } form input:hover[type=submit], input:hover[type=reset] { background: #0070ff; background-image: linear-gradient(to bottom, #399df9, #0265c1); text-decoration: none } form textarea { width: 90%; padding: 10px; margin: 8px auto; border: 1px solid #7ac9b7; border-radius: 5px; resize: none; } form input[type=text]:focus, textarea:focus { border-color: #4697e4; } form td { vertical-align: middle } /* BUTTON */ .btn, a.btn, .button { background: #0e4271; background-image: linear-gradient(to bottom, #237fd4, #014e95); border-radius: 5px; font-family: Arial; color: #fff; font-size: 16px; padding: 6px 15px 6px; text-decoration: none; display: inline-block; } .btn:hover, a.btn:hover, .button:hover { background: #0070ff; background-image: linear-gradient(to bottom, #399df9, #0265c1); text-decoration: none } /* IMAGES */ img { border: none; } /* TABLES */ table { width: 100%; margin: 1.2em 0; padding: 0; border-collapse: collapse; border-width: 0 } th { font-weight: bold; line-height: 1.2em; border: solid 1px #ccc; padding: 4px; vertical-align: middle; text-align: center; background-color: #eee } td { line-height: 1.3em; border: solid 1px #ccc; padding: 5px; vertical-align: top; font-size: .95em } td p { font-size: 1em } td.shell { border: none; padding: 0 } .vertmid, table.vertmid td, td.vertmid, div.vertmid, div .vertmid { vertical-align: middle } table.tdfatpad td, td.tdfatpad { padding: 0 12px } .dateline { font: 10px Arial, Helvetica, sans-serif; color: #666; float: right } #border { border-left: 1px solid #ccc; border-bottom: 1px solid #fff; padding: .5em; } .hide { display: none; } /* COLORS & BACKGROUNDS */ .greentext { color: #006731 } .ltgreentext { color: #7EFD7F } .browntext { color: #A34500 } .white, a.white { color: #fff } .gray { color: #ccc } .medgray { color: #aaa } .dkgray, a.dkgray { color: #999 } .red, p.red strong { color: #a50000 } .black, a.black, a span.black, li a.black { color: #333 } .bggray, #total .bggray { background-color: #efefef } .bgltgray { background-color: #f3f3f3 } .bgdkgray { background-color: #dedede } .bgchar { background-color: #666 } .bgblack, #box.bgblack { background-color: #000 } .bgorange { background-color: #facfb5 } .bggreen { background-color: #d8ffd8 } .bgdkgreen { background-color: #1a4d3a } .bggreenbar { background-color: #194a37 } .bgblue { background-color: #80cdfe } .bgltblue { background-color: #CBEAFC } .bgyellow { background-color: #ffffcc } .bgwhite { background-color: #fff } /* WRAP - NOWRAP */ #nowrap { white-space: nowrap; } #nowrap div { display: inline-block; } /* SLIDE STAGE */ #slidestage { position: relative; margin: 1em auto; width: 100%; } #slidestage img { position: absolute; padding: 0; border: none; width: 100%; height: auto; } #slidestage img:nth-of-type(1) { animation-name: fader; animation-delay: 4s; animation-duration: 1s; z-index: 20; } #slidestage img:nth-of-type(2) { z-index: 10; } #slidestage img:nth-of-type(n+3) { display: none; } #slidestage img::after { position: absolute; left: 11px; bottom: 10px; padding: 2px 0; width: calc(100% - 22px); background: rgba(0,0,0,0.5); text-align: center; content: attr(alt); font-size: 1.1em; color: #fff; z-index: 1000; height: 20px } @keyframes fader { from { opacity: 1.0; } to { opacity: 0.0; } } /* CALENDAR */ .calitem { float: right; width: 78%; } .calitem p.eventname, .calitem p.eventname a { font-size: 1.1em; font-weight: 600; margin-bottom: 4px } .calitem p.eventbody { font-size: 1em; line-height: 1.2rem; margin-top: 0 } .bigdate { font-weight: 200; width: 80%; background-color: #f3f3f3; padding: 6px 3px 3px 20px } .bigdate div { display: inline-block; font-size: 1.4em; } .bigdateside { text-align: center; font-weight: 100; width: 20%; max-width: 180px; float: left; padding: 0; clear: both; border: none; margin-top: 0; } /* BODY & TOTAL */ body { font-size: 14px; line-height: 1.7em; font-family: "Helvetica Neue", Helvetica, "Lucida Grande", sans-serif; overflow-x: hidden; background-color: #f3f3f3; } #total { width: 100%; overflow: hidden; text-align: center; position: relative; z-index: 1; background-color: #fff } /* TOP */ div.anchor { padding-top: 100px; margin-top: -100px; } /* TOPBAR */ #topbar { height: 42px; padding: 0; margin: 0 auto; width: 100%; background-color: #444; box-shadow: 0 1px 6px #444; position: fixed; z-index: 4; opacity: .99; } #topbar>div { margin: 0 auto; width: 100%; max-width: 1140px; } .logofade { height: 42px; padding: 0; width: 100%; background: -webkit-linear-gradient(left, #222, #333, #444); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, #222, #333, #444); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(left, #222, #333, #444); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, #222, #333, #444, ); /* Standard syntax */ } .logofade>div { height: 42px; width: 18%; max-width: 100px; padding-top: 6px } .logofade>div.barbuttons { height: 42px; width: 20%; min-width: 220px; padding-top: 0; text-align: right; position: absolute; right: 0 } #topbar input[type=text] { box-sizing: border-box; border: 1px solid #ccc; border-radius: 3px; font-size: 14px; background-color: #fff; transition: width 0.4s ease-in-out; padding: 10px 16px; } #topbar input[name=search] { width: 90%; max-width: 480px; background-image: url('/default/images/searchicon.png'); background-position: 6px; background-repeat: no-repeat; padding-left: 36px } #topbar input[name=LastName] { width: 40%; max-width: 200px; background-image: url('/default/images/searchicon.png'); background-position: 6px; background-repeat: no-repeat; padding-left: 36px } /* Placeholder */ #topbar ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #b78080; font-size: 1.1em; font-weight: 900; } #topbar ::-moz-placeholder { /* Firefox 19+ */ color: #b78080; font-size: 1.1em; font-weight: 900; } #topbar :-ms-input-placeholder { /* IE 10+ */ color: #b78080; font-size: 1.1em; font-weight: 900; } #topbar :-moz-placeholder { /* Firefox 18- */ color: #b78080; font-size: 1.1em; font-weight: 900; } #topbar td { border: none; padding-top: 3px } a.topbutton { float: right; height: 24px; border-radius: 4px; margin: 9px 0 0 6px; padding: 0 5px; font-weight: 700; color: #fff; font-size: 11px; background: #666; border: none; position: relative; z-index: 100; } a.topbutton2 { height: 24px; border-radius: 4px; margin: 9px 2px 0 0; padding: 0 5px; font-weight: 700; color: #fff; font-size: 11px; background: #666; border: none; position: relative; z-index: 100; display: inline-block } /* TOP SEARCH/NAV PANELS */ .navigation__item { float: right; } .navigation__item a { border: none } .navigation__item.topbarmenu { padding: 9px 3.1% 0 10%; float: none; display: inline-block; position: absolute; right: 376px; } .navigation__item.topbarsearch { padding: 6px 5% 0 1.4%; float: none; display: inline-block; position: absolute; right: 204px } .sub-navigation, .sub-navigation:before { background-color: #f7f7f7; padding: 16px; box-shadow: 0 1px 20px #444; width: 100%; text-align: left; position: fixed; z-index: 4; left: 0; top: 42px; visibility: hidden } .navigation__item:hover .sub-navigation, .navigation__item:active .sub-navigation, .navigation__item:focus .sub-navigation { -webkit-transition-delay: .15s; -moz-transition-delay: .15s; -ms-transition-delay: .15s; -o-transition-delay: .15s; visibility: visible; display: block } /* Touch Behavior */ .touch .navigation__item.no-hover .sub-navigation { display: none !important; } /* A-Z Bar */ nav.navigation__item { float: right; } nav.navigation__item a { border: none } nav.navigation__item:hover .sub-navigation, nav.navigation__item:active .sub-navigation, nav.navigation__item:focus .sub-navigation { -webkit-transition-delay: .15s; -moz-transition-delay: .15s; -ms-transition-delay: .15s; -o-transition-delay: .15s; visibility: visible; display: block } /* Touch Behavior */ .touch nav.navigation__item.no-hover .sub-navigation { display: none !important; } /* A-Z Bar */ .azbar { font-size: 20px; color: #555; cursor: pointer; font-weight: 700 } .azbar a { font-weight: 500; letter-spacing: 0em } /* HEADER */ #header { color: #fff; margin: 40px 0 0; position: relative; text-align: center } #header img { vertical-align: top; width: 100%; max-width: 1140px; } #header div { width: 100%; text-align: center; padding: 0; margin-bottom: 0; background-color: #e7e7e7 } #header div div { margin: 0; padding: 0; border: none; } #header div div img { width: 100%; max-width: 1140px; max-height: 125px } #header div div table { max-width: 1140px } body.lastyle #header { margin-top: 40px; } body.lastyle #header div { padding-top: 10px; border-top: none; } body.lastyle #header, body.lastyle #header div { background-image: none; background-color: #f3f3f3; } body.stu16 #header div div img, body.openacad #header div div img { max-height: 180px; background-color: #e9f0e8 } body.stu16 #header div div, body.stu16 #newtab, body.stu16 #bdept { background-color: #e9f0e8 } body.lastyle.stu16 #header, body.lastyle.stu16 #header div { background-color: #e9f0e8; } body.openacad #header div div, body.openacad #newtab { background-color: #e8edf0 } /* b85 */ #header.b85 { background-image: none; background-color: #e7e7e7; /*margin-top: 39px; */ } #header.b85 h1 { font-size: 1.9rem; float: left; color: #000; margin: 30px 0 0 10px; font-weight: 700 !important; text-shadow: 3px 3px 12px #f2f2f2, -3px -3px 12px #f2f2f2, -3px 3px 12px #f2f2f2, 3px -3px 12px #f2f2f2 } #header.b85 div { height: 85px; max-width: 1140px; padding: 0 10px; margin: 0 auto; } #header.b85 div.about { background: url(https://www.esf.edu/images/banners/about.png) no-repeat top center; } #header.b85 div.animalcare { background: url(https://www.esf.edu/images/banners/animalcare.png) no-repeat top center; } #header.b85 div.ats { background: url(https://www.esf.edu/images/banners/ats.png) no-repeat top center; } #header.b85 div.baker { background: url(https://www.esf.edu/images/banners/baker.png) no-repeat top center; } #header.b85 div.bray { background: url(https://www.esf.edu/images/banners/bray.png) no-repeat top center; } #header.b85 div.braymarshallfall { background: url(https://www.esf.edu/images/banners/braymarshallfall.png) no-repeat top center; } #header.b85 div.business { background: url(https://www.esf.edu/images/banners/business.png) no-repeat top center; } #header.b85 div.centhall { background: url(https://www.esf.edu/images/banners/centhall.png) no-repeat top center; } #header.b85 div.columns { background: url(https://www.esf.edu/images/banners/columns.png) no-repeat top center; } #header.b85 div.comm { background: url(https://www.esf.edu/images/banners/communications.png) no-repeat top center; } #header.b85 div.computing { background: url(https://www.esf.edu/images/banners/computing.png) no-repeat top center; } #header.b85 div.ecenter { background: url(https://www.esf.edu/images/banners/ecenter.png) no-repeat top center; } #header.b85 div.eship { background: url(https://www.esf.edu/images/banners/eship.png) no-repeat top center; } #header.b85 div.ehs { background: url(https://www.esf.edu/images/banners/ehs.png) no-repeat top center; } #header.b85 div.feinstone { background: url(https://www.esf.edu/images/banners/feinstone.png) no-repeat top center; } #header.b85 div.find { background: url(https://www.esf.edu/images/banners/find.png) no-repeat top center; } #header.b85 div.gis { background: url(https://www.esf.edu/images/banners/gis.png) no-repeat top center; } #header.b85 div.greenroof { background: url(https://www.esf.edu/images/banners/greenroof.png) no-repeat top center; } #header.b85 div.honors { background: url(https://www.esf.edu/images/banners/honors.png) no-repeat top center; } #header.b85 div.hr { background: url(https://www.esf.edu/images/banners/hr.png) no-repeat top center; } #header.b85 div.international { background: url(https://www.esf.edu/images/banners/international.png) no-repeat top center; } #header.b85 div.jahn { background: url(https://www.esf.edu/images/banners/jahn.png) no-repeat top center; } #header.b85 div.maps { background: url(https://www.esf.edu/images/banners/maps.png) no-repeat top center; } #header.b85 div.marshalljahnview { background: url(https://www.esf.edu/images/banners/marshalljahnview.png) no-repeat top center; } #header.b85 div.police { background: url(https://www.esf.edu/images/banners/police.png) no-repeat top center; } #header.b85 div.prehealth { background: url(https://www.esf.edu/images/banners/health.png) no-repeat top center; } #header.b85 div.prelaw { background: url(https://www.esf.edu/images/banners/medallion.png) no-repeat top center; } #header.b85 div.psc { background: url(https://www.esf.edu/images/banners/pubsafe.png) no-repeat top center; } #header.b85 div.radsaf { background: url(https://www.esf.edu/images/banners/radsaf.png) no-repeat top center; } #header.b85 div.redleaves { background: url(https://www.esf.edu/images/banners/redleaves.png) no-repeat top center; } #header.b85 div.regalia { background: url(https://www.esf.edu/images/banners/regalia.png) no-repeat top center; } #header.b85 div.registrar { background: url(https://www.esf.edu/images/banners/lecture.png) no-repeat top center; } #header.b85 div.social { background: url(https://www.esf.edu/images/banners/social.png) no-repeat top center; } #header.b85 div.spotlight { background: url(https://www.esf.edu/images/banners/netguy.png) no-repeat top center; } #header.b85 div.studyabroad { background: url(https://www.esf.edu/images/banners/studyabroad.png) no-repeat top center; } #header.b85 div.summer { background: url(https://www.esf.edu/images/banners/canoes.png) no-repeat top center; } #header.b85 div.sunyesf { background: url(https://www.esf.edu/images/banners/sunyesf.png) no-repeat top center; } #header.b85 div.water { background: url(https://www.esf.edu/images/banners/water.png) no-repeat top center; } #header.b85 div.web { background: url(https://www.esf.edu/images/banners/web.png) no-repeat top center; } #header.b85 div.world { background: url(https://www.esf.edu/images/banners/world.png) no-repeat top center; } #header.b85 div.writing { background: url(https://www.esf.edu/images/banners/pages.png) no-repeat top center; } /* .bdept */ #header.bdept, #header.oasub { margin: 0 auto; width: 100%; padding: 0 } #header.bdept div, #header.oasub div { position: relative; width: 100%; text-align: left; padding: 0; margin: 0; height: 190px; margin: 0 auto; max-width: 1140px; } #header.bdept div { box-shadow: inset 500px 4px 200px -200px #f3f3f3; } body.stu16 #header.bdept div { box-shadow: none } #header.bdept div.facstaff { height: 125px } #header.bdept div.moonsub { background: url(https://www.esf.edu/images/banners/moon.png) no-repeat right bottom; background-size: auto; } #header.bdept div.alumnisub { background: url(https://www.esf.edu/images/banners/subalumni.jpg) no-repeat right bottom; background-size: auto; } #header.bdept div.chemsub { background: url(https://www.esf.edu/images/banners/subchem.jpg) no-repeat right bottom; background-size: auto; } #header.bdept div.devsub { background: url(https://www.esf.edu/images/banners/subdev.jpg) no-repeat right bottom; background-size: auto; } #header.bdept div.efbsub { background: url(https://www.esf.edu/images/banners/subefb.jpg) no-repeat right bottom; background-size: auto; } #header.bdept div.envscisub { background: url(https://www.esf.edu/images/banners/subenvsci.jpg) no-repeat right bottom; background-size: auto; } #header.bdept div.eresub { background: url(https://www.esf.edu/images/banners/subere.jpg) no-repeat right bottom; background-size: auto; } #header.bdept div.essub { background: url(https://www.esf.edu/images/banners/subes.jpg) no-repeat right bottom; background-size: auto; } #header.bdept div.ffsub { background: url(https://www.esf.edu/images/banners/subff.jpg) no-repeat right bottom; background-size: auto; } #header.bdept div.fnrmsub { background: url(https://www.esf.edu/images/banners/subfnrm.jpg) no-repeat right bottom; background-size: auto; } #header.bdept div.idesub { background: url(https://www.esf.edu/images/banners/sub/ide.jpg) no-repeat right bottom; background-size: auto; } #header.bdept div.lasub { background: url(https://www.esf.edu/images/banners/subla.jpg) no-repeat right bottom; background-size: auto; } #header.bdept div.oelosub { background: url(https://www.esf.edu/images/banners/suboelo.jpg) no-repeat right bottom; background-size: auto; } #header.bdept div.pbesub { background: url(https://www.esf.edu/images/banners/subpbe.jpg) no-repeat right bottom; background-size: auto; } #header.bdept div.rangersub { background: url(https://www.esf.edu/images/banners/subranger.jpg) no-repeat right bottom; background-size: auto; } #header.bdept div.ressub { margin-top: 40px; background: url(https://www.esf.edu/images/banners/subresearch.png) no-repeat right bottom; background-size: auto; } #header.bdept div.rwlssub { margin-top: 40px; background: url(https://www.esf.edu/images/banners/sub/rwls.jpg) no-repeat right bottom; background-size: auto; } #header.bdept div.uasub { margin-top: 40px; background: url(https://www.esf.edu/images/banners/subua.png) no-repeat right bottom; background-size: auto; } #header.bdept div.gradsub { margin-top: 40px; background: url(https://www.esf.edu/images/banners/subgrad.jpg) no-repeat right bottom; background-size: auto; } /* Student Affairs .bdept + body.stu16 */ #header.bdept div.acceptsub { background: url(https://www.esf.edu/accepted/images/banner2.png) no-repeat right bottom; background-size: auto; } #header.bdept div.careersub { background: url(https://www.esf.edu/career/images/banner2.png) no-repeat right bottom; background-size: auto; } #header.bdept div.counselsub { background: url(https://www.esf.edu/counseling/images/banner2.png) no-repeat right bottom; background-size: auto; } #header.bdept div.cstepsub { background: url(https://www.esf.edu/students/cstep/images/banner2.png) no-repeat right bottom; background-size: auto; } #header.bdept div.deansub { background: url(https://www.esf.edu/students/dean/images/banner2.png) no-repeat right bottom; background-size: auto; } #header.bdept div.graduationsub { background: url(https://www.esf.edu/students/graduation/images/banner2.png) no-repeat right bottom; background-size: auto; } #header.bdept div.involvesub { background: url(https://www.esf.edu/students/involvement/images/banner.png) no-repeat right bottom; background-size: auto; } #header.bdept div.healthsub { background: url(https://www.esf.edu/health/images/banner2.png) no-repeat right bottom; background-size: auto; } #header.bdept div.newstusub { background: url(https://www.esf.edu/students/new/images/banner.png) no-repeat right bottom; background-size: auto; } #header.bdept div.servicesub { background: url(https://www.esf.edu/students/service/images/banner2.png) no-repeat right bottom; background-size: auto; } #header.bdept div.successsub { background: url(https://www.esf.edu/students/success/images/banner2.png) no-repeat right bottom; background-size: auto; } #header.bdept div.supportsub { background: url(https://www.esf.edu/students/support/images/banner2.png) no-repeat right bottom; background-size: auto; } #header.bdept div.deabsub { background: url(https://www.esf.edu/students/support/images/banner2.png) no-repeat right bottom; background-size: auto; } /* Open Academy */ #header.oasub div { box-shadow: inset 600px 4px 140px -160px #e8edf0; } .openacad #header.oasub, .openacad #header.oasub div { background-color: #e8edf0; } #header.oasub div.oagen { background: url(https://www.esf.edu/images/banners/openacad.png) no-repeat right bottom; background-size: auto; } /* Lastyle header text */ #header.bdept div h1, #header.oasub div h1 { float: left; font-size: 2.4rem; color: #000; margin: 90px 0 0 10px; font-weight: 700 !important; line-height: .85em !important; text-shadow: 10px 10px 20px rgba(239, 239, 239, 1), -10px -10px 20px rgba(239, 239, 239, 1), -10px 10px 20px rgba(239, 239, 239, 1), 10px -10px 20px rgba(239, 239, 239, 1) } #header.bdept div h1.twoline, #header.oasub div h1.twoline { font-size: 2.2rem; margin-top: 70px; line-height: .9em !important; } #header.bdept div.facstaff h1 { margin-top: 34px; font-size: 2.2rem; } /* Department homepage header in lastyle */ #header.depthomehead div div table { margin: 0 auto } #header.depthomehead div div td { padding: 0; border: none } #header.depthomehead div div img { max-height: 300px; } #header.depthomehead div div div.r12 img { max-height: 300px; max-width: 400px } /* Banner height */ #header.b180 div div img, body.lastyle #header.b180 div div img, #header.b180 div div img { max-height: 180px; } /* Specialty bars */ #header.chestnuthead div, #header.barrwls div { background-image: none; background-color: #000 } #header.insideesf div { background-image: none; background-color: #fff } #header.willowhead div { background-image: none; background-color: #3e5044 } #header.ccdrhead div { background-image: none; background-color: #9cbeaf } #header.divinghead div { background-image: none; background-color: #001c51 } #header.cclphead div { background-image: none; background-color: #aac276 } #header.cuehead div { background-image: none; background-color: #000 } #header.susthead div, body.lastyle #header.susthead div { background-image: none; background-color: #abc0c2 } #header.nativehead div { background-image: none; background-color: #fedb7b } #header.barmelnhe div { background-image: none; background-color: #1A4100 } #header.urbanhead div { background-image: none; background-color: #02417b } #header.wushead div { background-image: none; background-color: #693913 } /* */ #header.barcnae div { background-image: url(https://www.esf.edu/cnae/images/bannerbg.jpg); } #header.barspace div { background-image: url(https://www.esf.edu/space/images/bannerbg.jpg); } #header.barnewcomb div { background-image: url(https://www.esf.edu/newcomb/images/barbg.jpg); } #header.baraec div { background-image: url(https://www.esf.edu/aec/images/barbg.jpg); } #header.baraic div { background-image: url(https://www.esf.edu/aic/images/bannerbg.jpg); } #header.barmerhab div { background-image: url(https://www.esf.edu/merhab/images/barbg.jpg); } #header.barglrc { margin-top: 0 } #header.barglrc div { background-image: url(https://www.esf.edu/glrc/images/barbg.jpg); } #header.bargbc div { background-image: url(https://www.esf.edu/greenbuilding/2017/images/bannerbg.jpg); } #header.bariise div { background-image: url(https://www.esf.edu/species/images/bannerbg.jpg); } #header.barnfi div { background-image: url(https://www.esf.edu/nfi/images/barbg.jpg); } #header.barquest div { background-image: url(https://www.esf.edu/quest/images/bannerBG.jpg); } #header.bartop10 div { background-image: url(https://www.esf.edu/top10/2014/images/bannerBG.jpg); } #header.bartop10-2016 div { background-image: url(https://www.esf.edu/top10/2016/images/bannerBG.jpg); } #header.bartop10-2015 div { background-image: url(https://www.esf.edu/top10/2015/images/barbg.jpg); } #header.barcoyote div { background-image: url(https://www.esf.edu/coyote/images/barbg.jpg); } #header.barnerr div { background-image: url(https://www.esf.edu/nerr/images/bannerbg.jpg); } #header.barsure div { background-image: url(https://www.esf.edu/outreach/sure/images/bannerBG.jpg); } #header.barwc div { background-image: url(https://www.esf.edu/womenscaucus/images/bannerBG.jpg); } #header.barradcuring div { background-image: url(https://www.esf.edu/outreach/radcuring/images/bannerBG.jpg); } #header.barbiotech div { background-image: url(https://www.esf.edu/outreach/biotechnology/images/bannerBG.jpg); } #header.barspare div { background-image: url(https://www.esf.edu/outreach/spare/images/bannerBG.jpg); } #header.bareap div { background-image: url(https://www.esf.edu/eap/images/bannerBG.jpg); } #header.barafs div { background-image: url(https://www.esf.edu/org/afs/images/bannerBG.jpg); } #header.barbpcert div { background-image: url(https://www.esf.edu/outreach/bioprocessing/images/bannerBG.jpg); } /* Full width, scaling header images */ #headerwash { width: 100%; max-height: 320px; height: 30%; overflow: hidden; padding: 0; margin: 0; position: relative; top: 40px; text-align: center; margin-bottom: 40px; background-color: #000 } #headerslides { width: 100%; max-height: 320px; overflow: hidden; padding: 0; margin: 0; position: relative; top: 40px; text-align: center; margin-bottom: 40px; height: 200vh } #headerslides > div { bottom: 0; top: 0; background-size: cover; background-repeat: no-repeat; z-index: 0; background-color: #000; } #headerslides h1 { line-height: 6.8em } #headerwash img { width: 100% } #headerwash div, #headerslides div { position: absolute; z-index: 3; width: 100%; text-align: center } #headerwash div { bottom: 6px; } #headerwash div div, #headerslides div div { position: relative; width: 100%; text-align: center } #headerwash div div div, #headerslides div div div { width: 100%; max-width: 1140px; margin: 0 auto; text-align: left } #headerwash.midpic { height: 320px; background-size: cover; background-repeat: no-repeat; background-position: center center } /* #headerwash.midpic { position: absolute; } #headerwash.midpic > div { transform: translateY(50%); -moz-transform: translateY(50%); } #headerwash.midpic img { position: relative; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%);} */ h1.gatehead { color: #fff; font-size: 3.5em; font-weight: 500 !important; text-shadow: 60px 60px 60px rgba(0, 0, 0, .4), -60px -60px 60px rgba(0, 0, 0, .4), 8px 8px 30px rgba(0, 0, 0, 1), -8px -8px 30px rgba(0, 0, 0, 1), -3px -3px 10px rgba(0, 0, 0, .6), 3px 3px 10px rgba(0, 0, 0, .6); margin-left: 6%; } .midpic h1.gatehead { position: absolute; bottom: 20%; } h1.lahead { color: #fff; font-size: 3.5em; font-weight: 100 !important; line-height: 1em; text-shadow: 20px 20px 20px rgba(0, 0, 0, 1), -20px -20px 20px rgba(0, 0, 0, 1), 4px 4px 10px rgba(0, 0, 0, 1), -4px -4px 10px rgba(0, 0, 0, 1); margin-left: 6%; } /* HEADERSLIDES ANIMATION */ .cb-slideshow, .cb-slideshow:after { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .cb-slideshow li { list-style-type: none } .cb-slideshow li span { width: 100%; height: 320px; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: top center; background-repeat: none; opacity: 0; z-index: 1; -webkit-backface-visibility: hidden; } .cb-slideshow li span.sixslide { animation: imageAnimation 36s linear infinite 0s; } .cb-slideshow li span.tenslide { animation: imageAnimation 50s linear infinite 0s; } /* Animation for the slideshow images */ @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 4% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } /* Show at least something when animations not supported */ .no-cssanimations .cb-slideshow li span { opacity: 1; } /* CONTAINER, INNER */ #container { text-align: left; background-color: #fff; width: 100%; min-width: 300px; margin: 0 auto; padding: 0; min-height: 500px; max-width: 1140px; } #container.containnfi { background-image: url(https://www.esf.edu/nfi/images/bg.jpg); background-position: bottom; background-repeat: no-repeat; padding-bottom: 15vw; background-size: 100% auto } #container.containaec { background-image: url(https://www.esf.edu/aec/images/bghome.jpg); background-position: bottom; background-repeat: no-repeat; padding-bottom: 15vw; background-size: 100% auto } #inner { min-width: 300px; min-height: 500px; margin: 0 15px 25px; padding: 0; position: static; max-width: 1140px } /* LISTS */ blockquote { margin-left: 20px } ul { margin-bottom: 14px } li { margin: .5em 0 .4em 2em; list-style-type: disc; list-style-position: outside; line-height: 1.3em; } ul.biglist, ul.medlist, ol.biglist, ol.medlist { margin-bottom: 1.3em } ul.biglist>li, ol.biglist>li { margin-left: 0; line-height: 1.5rem; font-size: 1.25rem; font-weight: 500; list-style-type: none } ul.biglist>li a, ol.biglist>li a { line-height: 1.4rem; font-weight: 700; font-size: 1.35rem; list-style-type: none } ul.medlist li, ul.medlist li a, ol.medlist li, ol.medlist li a { margin: .7rem 0; line-height: 1.3rem; font-size: 1.15rem; font-weight: 400 } ol.medlist li, ol.medlist li a { margin-left: 2em; } ol.lowercase li { list-style-type: lower-alpha } ul.medlist li li, ul.medlist li li a, ol.medlist li li, ol.medlist li li a { line-height: .8rem; font-size: .8rem; font-weight: 300 } li a { font-weight: 500; line-height: 1.3em } ol li { list-style-type: decimal } ol.loweralpha li { list-style-type: lower-alpha } ul ul, ol ol, ul ul ul, ol ol ol { margin-bottom: 0px } li li { list-style-type: circle; font-weight: normal; font-size: .95em } li li a { font-weight: normal; } li li li { list-style-type: disc; font-size: 1em } #content li { line-height: 1.2rem; font-size: .95rem; } #content li li { line-height: 1.1rem; font-size: .95em } #content li li li { font-size: 1em } ul.nobull li { list-style-type: none; margin-left: 0; margin-right: 2em } ul.nobull li li { list-style-type: circle; margin-left: 2em } #box li.news, #box li.news { list-style-position: inside; list-style-type: disc; margin-left: 10px; font-size: .9em; line-height: 1.3em } li.socialicons { padding-left: 8px; display: inline-block } li.nested { list-style-position: inside; list-style-type: circle; margin-left: 24px; font-size: .9em; line-height: 1.3em } #content li.nested { list-style-type: circle; font-size: 1em; } /* NAV BARS */ /* Newtab-Menubar1 */ #newtab { background-color: #f3f3f3; height: 40px; position: relative; z-index: 3; back ground: #f3f3f3; } #newtab div { margin: 0 auto; width: 1140px } /* OLD DROPDOWN */ #droptab { width: 100%; float: left; height: 30px; margin-left: -2px } #droptab a { border-bottom: none; font-weight: 400 } #droptab ul { position: relative; z-index: 200 } /* parent li items */ #droptab li { float: left; list-style-type: none; font-size: 1em; letter-spacing: .3px; margin: 0 0 0 4px; } #droptab li.ipad { display: none } #droptab li:hover, #droptab li:focus { position: static; } #droptab li span { color: #0e4271; line-height: 27px; display: block; padding: 2px 7px 0 10px; margin: 7px -4px 0 -1px; font-weight: 500; font-size: 1.1em; letter-spacing: 0px; position: relative; z-index: 2; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } #droptab li:hover span, #droptab li:focus span { background-color: #fff; border-top: 1px solid #ccc; margin-top: 6px; color: #333 } #droptab li:hover a strong, #droptab li:focus a strong { border: none } #droptab li a span.menutext { line-height: 1.1em; display: inline; border: none; font-weight: 300; font-size: 1em; margin: 0; padding: 0; text-transform: none; color: #330; } /* no submenu tabs */ #droptab li.nosub:hover span, #droptab li.nosub:focus span { background-color: transparent; border-top: none; border-right: 1px solid #ccc; margin-top: 7px; color: #0070ff } /* child ul items */ #droptab li ul { position: absolute; left: -999em; clear: both; background-color: #fff; margin: 0; box-shadow: 0 2px 10px #999; z-index: 0; width: 18%; max-width: 220px; min-width: 160px; } /* left instead of display to hide menus because display: none isn't read by screen readers */ #droptab li:hover ul, #droptab li:focus ul { left: auto; }/* lists nested under hovered list items */ #droptab li ul.menmed { max-width: 300px; width: 30% } #droptab li ul.wide { max-width: 400px; width: 40% } #droptab li ul.menmed ul, #droptab li ul.wide ul { max-width: 100%; width: 100% } #droptab ul ul { box-shadow: none; width: auto } #droptab li li { width: auto; text-align: left; height: auto; padding: 2px 10px 2px 10px; margin-left: 0px; margin-right: 0; font-size: .9em; float: none } #droptab li li.nested { list-style-position: inside; list-style-type: circle; font-size: .9em; float: none; width: auto; text-align: left; margin-left: 12px } #droptab li li a { display: inline-block; font-weight: 400 } #droptab li li.top { padding-top: 8px } #droptab li li.bottom { padding-bottom: 14px } #droptab li li ul { position: relative; margin-top: 4px } #droptab li li li { font-size: .95em; list-style-type: circle; list-style-position: inside; color: #aaa; } #droptab li li li a { display: inline; padding-left: 0; font-weight: 400; } #droptab li li li li { margin-left: 15px; } /* Menubar1 */ #menubar1 { font-weight: 200; font-size: 1.1em; height: 40px; letter-spacing: 1px; line-height: 39px; background: #f5f5f5; } #menubar1 a { font-weight: 700; font-size: 1.05em; letter-spacing: 0.1px; } #menubar1 .dtmenu { background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0)); padding-left: 4px; padding-right: 4px } #menubar1 .dtmenu, #menubar1 .dticon { display: inline-block; height: 40px; vertical-align: middle } #menubar1 .dticon { margin-left: 7px } #menubar1 .dticon img { margin-left: 4px; height: 34px; margin-top: 2px } #menubar1 .dticon a { border: none } .rarr { color: #f00; font-weight: bold; } /* BREADCRUMB */ #crumb { color: #555; font-size: .9em; font-weight: normal; text-transform: uppercase; margin: 0; padding: 0; } #crumb a { text-decoration: none; font-size: .95em; font-weight: normal; text-transform: uppercase; } #crumb div { margin: 0 auto; text-align: left; border-style: none; } /* CONTENT */ #content { width: 100%; max-width: 1110px; background-color: #fff; margin: 0; padding: 0 } #content img.colfade { float: left; min-height: 420px; margin-right: 20px } #content h1 { padding-bottom: 12px; border-bottom: 5px solid #ccc } /* Catalog Content */ #content.catalog img { display: none } #content.catalog p.intro, div.nointro p.intro, #content.nointro p.intro { font-weight: 300; font-size: 1rem; color: #333; letter-spacing: .4px; line-height: 1.5rem } .catadm { color: #6B8900 } p.cattotal { padding: 4px; border: 1px solid #ccc; background-color: #FFC; text-align: center } #catcodes { display: none; position: absolute; width: 240px; padding: 10px; background: #f3f3f3; color: #333; border: 1px solid #ccc; } .codelist { visibility: hidden; width: 200px; background-color: #f3f3f3; padding: 10px; margin: -20px 0 0 -280px; /* Position the tooltip CODES */ position: absolute; z-index: 1; } .catcodes:hover .codelist, .catcodes:focus .codelist { visibility: visible; } .coursepagehide, .catprint { display: none } /* CONTENT REGION CORRECTIONS */ #container.nomin, #inner.nomin, #content.nomin { min-height: 0px; height: auto } /* Tooltip style popup */ #box.tooltip { position: absolute; z-index: 100; padding: 15px; } #box.tooltip:after /* triangle decoration */ { width: 0; height: 0; content: ''; position: absolute; bottom: -10px; margin-left: -10px; } #box.tooltip.top:after { top: -20px; bottom: auto; } #box.tooltip.left:after { left: 10px; margin: 0; } #box.tooltip.right:after { right: 10px; left: auto; margin: 0; } /* PANELS */ .panelset { width: 100%; padding: 2% 0 2% 0.6% } #panel { float: left; position: relative; overflow: hidden; margin: 0; padding: 0; } .ptwo { width: 50%; float: left; position: relative; overflow: hidden; margin: 0; padding: 0; } .ptwo #box { width: 96% } .pthree { width: 33.3%; float: left; position: relative; overflow: hidden; margin: 0; padding: 0; } .pthree #box { width: 94%; margin-top: 14px } .pfour { width: 25%; float: left; position: relative; overflow: hidden; margin: 0; padding: 0; } .pfour #box { width: 94%; margin-top: 12px; } .pfive { width: 20%; } .pfive #box { width: 94%; margin-top: 10px; } .pfive #box.border { width: 86%; margin-top: 10px; } .p580 { max-height: 580px; min-height: 580px } .p480 { max-height: 480px; min-height: 480px } .p380 { max-height: 380px; min-height: 380px } .pboxrel #box { position: relative } /* READ-MORE GRADIENT AND MODAL POP OPEN PANEL - for rankings mouseovers */ .read-more { position: absolute; bottom: 0; width: 100%; margin: 0; padding: 150px 0 50px; text-align: center; /* "transparent" only works here because == rgba(0,0,0,0) */ background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,1)); -ms-filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffFFFFFF, endColorstr=#00FFFFFF); /* IE6-9 */ } /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */ .read-more.ltgray { background-image: linear-gradient( to bottom, color-stop(0, rgba(239, 239, 239, 0)), color-stop(0.7, rgba(239, 239, 239, 100)), color-stop(1, rgba(223955, 239, 239, 100))); } .read-more a { font-size: 1.2em; font-weight: 500; margin-right: 10% } .modalDialog { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity: 0; transition: opacity 100ms ease-in; pointer-events: none; max-height: 100%; overflow-y: auto; } .modalDialog:target { opacity: 1; pointer-events: auto; } .modalDialog > div { width: 90%; max-width: 90%; position: relative; margin: 10% auto; padding: 5%; border-radius: 10px; background: #fff; } a.close { background: #0069C0; float: right; margin-top: 15px; text-align: center; top: 20px; font-size: 16px; width: 30px; text-decoration: none; font-weight: bold; border-radius: 15px; color: #fff; line-height: 2em } /* PERCENTAGE DIVS */ div.l13 { width: 31.2%; float: left; padding: 0 1.5% 20px 0; } div.c13 { width: 31.2%; float: left; padding: 0 1.5% 20px; } div.r13 { width: 31.2%; float: left; padding: 0 0 10px 1.6%; margin-left: -1px; /* for overlapping border with l23 */ border-left: 1px solid #ccc } div.l23 { width: 65%; float: left; padding: 0 2% 20px 0; border-right: 1px solid #ccc } div.r23 { width: 65%; float: right; padding: 0 0 20px 2%; } div.l12 { width: 48.5%; float: left; padding: 0 1% 10px 0; } div.r12 { width: 48.5%; float: right; padding: 0 0 10px 1%; } div.l23 div.l12, div.r23 div.l12 { width: 46.5%; padding-right: 3%; } div.l23 div.r12, div.r23 div.r12 { width: 46.5%; padding-left: 3% } div.l12 div.l12, div.r12 div.l12 { width: 46.5%; padding-right: 3%; } div.l12 div.r12, div.r12 div.r12 { width: 46.5%; padding-left: 3% } div.r13 div.l12 { width: 47.5% } div.r13 div.r12 { width: 47.5%; padding-left: 3% } .borl { border-left: 1px solid #ddd } .borr { border-right: 1px solid #ddd } div.l23 div.l23, div.l23 div.r13, div.r13.noborder, div.l12 div.r13, div.l12 div.l23 { border: none } div.l23 div.r13.borl { border-left: 1px solid #ddd } div.l13.nomargin { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; } /* PERCENTAGE BOXES */ #box.l12 { width: 44%; float: left; padding: 0 1% 10px 0; border: none; margin-right: 10px } #box.r12 { width: 47.5%; float: right; padding: 0 0 10px 2%; border: none; border-left: 1px solid #ccc; margin-left: 10px } .l23 #box.r12, .r23 #box.r12 { width: 46.5%; padding-left: 3% } .l13 #box.r12, .c13 #box.r12, .r13 #box.r12 { width: 45.5%; padding-left: 4% } #box.l13 { width: 31.2%; float: left; padding: 0 1% 10px 0; border: none; margin-right: 10px } #box.r13 { width: 31.2%; float: right; padding: 0 0 10px 2%; border: none; border-left: 1px solid #ccc; margin-left: 10px } #box.r12.bgltgray, #box.l12.bgltgray { border: none } /* BOXES & IMAGES */ img.right { float: right; margin: 4px 0 4px 10px; } img.left { float: left; margin: 4px 12px 4px 0; } #box { margin: 6px 0 10px; line-height: 1.4em } #box.left { float: left; margin-right: 12px; } #box.right { float: right; margin-left: 10px } #box.leftnomar { float: left; } #box.rightnomar, .rightnomar { float: right; } #box.callout { margin-top: 10px; margin-bottom: 14px } #box.border { padding: 10px; border: 1px solid #ccc } #box.featureh h4 /* SPONSOR LISTS, ETC. */ { padding: 3%; margin-bottom: 8px; text-align: center; background-image: linear-gradient(#fff, #fff); color: #green; border: 1px solid green } #box.border.bgltgray, #box #box.border.bgltgray { border: none; box-shadow: none; } #box.border.bgpalegreen { border: 1px solid #65fe65; box-shadow: none; background: linear-gradient(135deg, #dfd, #efe, #fff); /* Standard syntax */ } #box.border.bgyellow, #box.r12.bgyellow, .r13.bgyellow { padding-left: 20px; padding-right: 16px; border: 1px solid #ffea00; box-shadow: none; background: linear-gradient(180deg, #ffd, #ffe, #fff); /* Standard syntax */ } .vidbg { background-color: #000; padding-top: 10px } /* BG image major callout */ .imgcallout { position: relative; background-color: #f3f3f3; overflow: hidden; padding: 5% 6% 3.5%; margin: 40px 0; border-radius: 16px } .imgcallout:before { content: ' '; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.09; background-repeat: no-repeat; background-position: 50% 0; background-size: cover; } .imgcallout .cohead { z-index: 2; position: relative; color: #666; font-size: 2.7em; font-weight: 200 } .imgcallout p { z-index: 2; position: relative; font-size: 1.6rem; font-weight: 400; line-height: 1.3em } .imgcallout li { z-index: 2; position: relative; list-style-type: none; margin-left: 0; font-size: 1.2em } .imgcallout hr { border: 3px solid #8A0000; margin-top: 3% } /* Percentage width and max-width */ .w10 { width: 10% } .w11 { width: 11% } .w12 { width: 12% } .w13 { width: 13% } .w14 { width: 14% } .w15 { width: 15% } .w17 { width: 17% } .w18 { width: 18% } .w20 { width: 20% } .w25 { width: 25% } .w30 { width: 30% } .w35 { width: 35% } .w40 { width: 40% } .w45 { width: 45% } .w50 { width: 50% } .w55 { width: 55% } .w60 { width: 60% } .w65 { width: 65% } .w70 { width: 70% } .w75 { width: 75% } .w80 { width: 80% } .w85 { width: 85% } .w90 { width: 90% } .w95 { width: 95% } .w100 { width: 100% } .hauto { height: auto } .h100 { height: 100% } #box h2, #box h3 { margin-top: 1em } #box #box { margin-bottom: 16px } .maxw1120 { max-width: 1100px } .maxw1040 { max-width: 1040px } .maxw1000 { max-width: 1000px } .maxw1020 { max-width: 1020px } .maxw960 { max-width: 960px } .maxw920 { max-width: 920px } .maxw900 { max-width: 900px } .maxw760 { max-width: 760px } .maxw750 { max-width: 750px } .maxw740 { max-width: 740px } .maxw726 { max-width: 726px } .maxw730 { max-width: 730px } .maxw720 { max-width: 720px } .maxw710 { max-width: 710px } .maxw700 { max-width: 700px } .maxw690 { max-width: 690px } .maxw680 { max-width: 680px } .maxw670 { max-width: 670px } .maxw660 { max-width: 660px } .maxw650 { max-width: 650px } .maxw640 { max-width: 640px } .maxw630 { max-width: 630px } .maxw620 { max-width: 620px } .maxw610 { max-width: 610px } .maxw600 { max-width: 600px } .maxw590 { max-width: 590px } .maxw580 { max-width: 580px } .maxw570 { max-width: 570px } .maxw560 { max-width: 560px } .maxw550 { max-width: 550px } .maxw540 { max-width: 540px } .maxw530 { max-width: 530px } .maxw520 { max-width: 520px } .maxw510 { max-width: 510px } .maxw500 { max-width: 500px } .maxw490 { max-width: 490px } .maxw480 { max-width: 480px } .maxw470 { max-width: 470px } .maxw460 { max-width: 460px } .maxw450 { max-width: 450px } .maxw440 { max-width: 440px } .maxw430 { max-width: 430px } .maxw420 { max-width: 420px } .maxw410 { max-width: 410px } .maxw400 { max-width: 400px } .maxw390 { max-width: 390px } .maxw380 { max-width: 380px } .maxw375 { max-width: 375px } .maxw370 { max-width: 370px } .maxw365 { max-width: 365px } .maxw360 { max-width: 360px } .maxw350 { max-width: 350px } .maxw340 { max-width: 340px } .maxw330 { max-width: 330px } .maxw320 { max-width: 320px } .maxw310 { max-width: 310px } .maxw300 { max-width: 300px } .maxw290 { max-width: 290px } .maxw280 { max-width: 280px } .maxw270 { max-width: 270px } .maxw260 { max-width: 260px } .maxw250 { max-width: 250px } .maxw240 { max-width: 240px } .maxw230 { max-width: 230px } .maxw220 { max-width: 220px } .maxw210 { max-width: 210px } .maxw200 { max-width: 200px } .maxw190 { max-width: 190px } .maxw180 { max-width: 180px } .maxw170 { max-width: 170px } .maxw160 { max-width: 160px } .maxw150 { max-width: 150px } .maxw120 { max-width: 120px } .maxw100 { max-width: 100px } .maxw90 { max-width: 90px } .maxw80 { max-width: 80px } .maxw75 { max-width: 75px } .maxw70 { max-width: 70px } .maxw60 { max-width: 60px } .maxw50 { max-width: 50px } .maxw40 { max-width: 40px } .maxw30 { max-width: 30px } /* MOBILE GENERAL */ #mobhide, div.mobhide { display: block } .mobile, .mobshow, #mobshow, .appshow { display: none } .ipad { display: none } #pushstuff div.menu-btn, #xpushstuff div.menu-btn { display: none } /* FOOTIES */ #total.footer { background-color: #efefef; padding-top: 2.4vw } #total.footer div.r13 { text-align: right } #pagetail { padding-top: 4px; font-size: .9em; color: #333; line-height: 12px; } /* BIGFOOT */ #container.tail { height: 100%; background-color: #efefef; box-shadow: 0 0 10px #ddd; margin-top: -10px; position: relative; z-index: 0 } #container.tail #box li { list-style-type: none; font-weight: normal; line-height: 1.4em; margin-left: 0; } #container.tail #box li a, #container.tail #pagetail { text-align: center; margin-top: 20px; margin-bottom: 20px } #container.tail #box a, #container.tail #pagetail a { font-weight: 200; } #container.tail #pagetail { font-weight: 300; line-height: 1.4em } #container.tail #pagetail a { font-size: 1em } /* SLIDES CAPTIONS ETC. */ .callbacks_container { position: relative; width: 100%; } .callbacks { display: block; position: relative; z-index: 2; left: 0; right: 0; bottom: 0; padding: 10px; max-width: none; list-style: none; overflow: hidden; width: 100%; } .callbacks li { position: absolute; width: 100%; left: 0; top: 0; } .callbacks img { display: block; position: relative; z-index: 1; height: auto; width: 100%; border: 0; } .caption, .callbacks { font-size: .85em; color: #666; text-align: center; margin: 4px auto; line-height: 1.3em; text-transform: uppercase; } .caption strong { color: #666; } ul.rslides .caption { text-align: left; } ul.rslides li { list-style-type: none; } ul.rslides li img { margin-bottom: 10px } .callbacks_container:before { content: "MOUSEOVER LEFT OR RIGHT ARROW TO PAUSE"; color: #c00; font-size: 10px; font-weight: bold } .callbacks_nav { position: absolute; -webkit-tap-highlight-color: rgba(0,0,0,0); top: 230px; left: 0; opacity: 0.7; z-index: 3; text-indent: -9999px; overflow: hidden; text-decoration: none; height: 61px; width: 38px; background: transparent url("https://www.esf.edu/js/ResponsiveSlides/demo/themes/themes.gif") no-repeat left top; margin-top: -45px; } .callbacks_nav:active { opacity: 1.0; } .callbacks_nav.next { left: auto; background-position: right top; right: 0; } /* VIDEO