/* HSEWI style sheet */ /* dependencies - reset.css */ /* ********************************* */ /* ********************************* */ /* Basic Text / tag redefinitions ** */ body {background: white url(topbg.jpg) repeat-x; font-family: Lucida Sans Unicode, Lucida Grande, arial, sans-serif; color: #333} h1 { font-size: 24px; margin-top: 70px} h2 { font-size: 19px; margin-top: 36px} h3 { font-size: 15px; margin-top: 28px} h4 { font-size: 13px; margin-top: 20px} p { margin-top: 18px} p, li { line-height: 140%; font-size: 13px} ul, ol {padding-left: 30px; margin-top: 18px;} p + ul, p + ol { margin-top: 10px;} ul ul, ul ol, ol ul, ol ol { margin-top: 0} ul { list-style-type:square; } ol { list-style-type: decimal; } li { } /*dealing with content after headings */ h1 + p, h1 + ul, h1 + ol { margin-top: 8px} h2 + p, h2 + ol, h2 + ul { margin-top: 7px} h3 + p, h4 + p, h3 + ol, h4 + ol, h3 + ul, h4 + ul { margin-top: 5px} a { color: #003D79} a:focus, a:hover { color: #B2344E} table { width: 100%} caption { text-align: left; padding-top: 18px; text-align: left; font-size: 11px} /* Need to finish*/ th { color: white; background-color:#25598A; font-size: 13px; padding: 6px 0 8px 12px; text-align: left; vertical-align:top; border-left: 2px solid #25598A} th:first-child { border-left: none} /* this is mainly to keep the borders the same as the td cells*/ td { font-size: 12px; vertical-align:top; padding: 5px 0 5px 12px; background-color: #EEEEEE; border-left: 2px solid white;} td:first-child { border-left: none;} abbr { cursor: help;} td ul li { font-size: 12px; } td ul, td ol { margin-top: 0px; list-style-type: none; padding-left: 0px;} table.stripe {} .even { background-color: #D3DEE8; } table.padding td {padding: 12px;} /* ********************************* */ /* ********************************* */ /* Sections ************************ */ #head { position: relative; width: 960px; margin: 0 auto; height: 67px;} #head img { border: none;} #head p#college { margin-top: 0} #head p#college a { display: block; padding-top: 7px; } #head h1#title { position: absolute; right: 0; top: 0; margin-top: 0} div#nav { background-color:#F0F2E6; height: 55px;} #nav ul.menu { width: 450px; margin: 0 auto; padding: 4px 0 9px 530px; position: relative; z-index: 110 /*IE67 hack*/;} #nav ul.menu li { display: inline; zoom: 1/* IE hack*/;} #nav a { display: block; float: left; color: #252525; text-decoration: none; font-size: 14px; background: url(navborder.gif) 0 8px no-repeat; padding: 0 9px 0 10px; } #nav li ul li a { font-size: 12px; } #nav li.first a{ background-image:none} #nav li.selected a { } #nav a span { padding: 10px 10px 3px 10px; line-height: 26px; border-bottom: 4px solid transparent; display: block; line-height: 100%; } #nav a.selected span { border-color: #9DB4CB} #nav a:hover span, #nav a:focus span {border-color: #A1CC3A} #nav li.programs a span, #nav li.programsjs a span { padding-right: 12px; background: url(navprograms.png) no-repeat 78px 14px; zoom: 1 } /* li.programs is replaced by li.programsjs via jquery*/ #nav li.programs:hover a, #nav li.programsjs.hover a { padding: 0 0 0 1px; z-index:500; } #nav li.programs:hover a span, #nav li.programsjs.hover a span { padding: 5px 16px 7px 14px; background: url(navprograms.png) no-repeat 82px -14px white; border: 5px solid #ddd; border-bottom-width: 0 } #nav div#drop { position: absolute; top: 33px; left: -999999px; background:url(drop-shadow.png) 0 bottom no-repeat; padding: 0 13px 13px 13px; z-index: 100; } #nav div#drop div.innerwrap { border: 5px solid #ddd; background-color: white; overflow:hidden; width: 477px} #nav li.programs:hover div#drop, #nav li.programsjs.hover div#drop { left: 216px} #nav div#drop div#dropmask { height: 5px; background-color: white; width: 96px; position: absolute; top: 0; left: 399px; } #nav div#drop ul { float: left; width: 238px; margin: 0; padding: 12px 0 12px 0; background-color: white;} #nav div#drop ul li {display: block; padding: 2px 0 2px 16px; width: 222px;} #nav div#drop ul a{ float: none; background: none; color: #003d79; text-decoration: none; display: inline; border-bottom: 1px dotted #91ABC5; padding: 0} #nav div#drop ul.left li{ padding-left: 17px; } #nav div#drop ul a:focus, #nav div#drop ul a:active, #nav div#drop ul a:hover { border-bottom: 1px solid #91ABC5/*#A1CC3A*/;} #nav div#drop ul li.seeallprograms { padding-top: 15px; } #nav div#drop ul li.seeallprograms a { color: #B2344E; font-weight:bold; font-size:11px; border-color: #D08494; border-style: solid } #nav div#drop ul li.seeallprograms a:hover {border-color: #B2344E;} /* Stuff just on home page*/ #homespace { background: url(hsewititlebg.gif) repeat-x 0 4px #F0F2E6; padding-bottom: 30px; height: 209px} #homespace div.innerwrap { width: 930px; margin: 0 auto; padding: 28px 0 32px 30px; background: url(hsewititlegraphics.gif) no-repeat 512px 25px; position: relative; } #homespace p.intro {font-size: 18px; font-weight: normal; position: absolute; top: 119px; right: 16px; width: 423px; line-height: 130%} #homefeature { background:url(features.png) 50% 35px no-repeat #F0F2E6; padding-top: 35px; font-size: 14px; line-height: 120% } #homefeature div.innerwrap { width:960px; margin: 0 auto; padding-bottom: 20px; height: 268px; position: relative;} #homefeature h2 { font-size: 15px; margin-bottom: 16px; margin-top: 29px; font-weight:normal} #wellnesscenter {position: absolute; top: 0; left: 18px; width: 284px; } #wellnesscenter img { border: 7px solid #9DB4CB; float: left; margin-right: 13px } #whatsnew { position: absolute; top: 0; left: 401px; width: 541px;} #whatsnew ul { padding-left: 0; list-style-type: none;} #whatsnew ul li { background: url(bulletfeat.gif) no-repeat left 10px; padding-left: 11px; margin-bottom: 3px } /*end home page only*/ #container { background: #F0F2E6 url(containerbg.gif) repeat-y 50% 2px; position: relative} #container.normal {} #container.basic {} #containertop { background: url(containertop-yellow.png) no-repeat 50% 0;} #containerwrap {width: 940px; margin: 0 auto; padding-top: 40px; overflow: hidden;} #containerbottom { height: 37px; background: url(containerbottom.gif) no-repeat 50% 1px; } #sectiontitle { overflow: hidden;} #sectiontitle div.innerwrap{ background: url(sectiontitle-yellow-edge.png) no-repeat right top; float: left; height: 65px; margin-left: -20px; } #sectiontitle h1 { height: 65px; background: url(sectiontitle-yellow.png); margin-right: 1px; line-height: 55px; font-size: 26px; padding: 0 30px 0 20px; margin-top: 0; font-weight: normal} /*Apply appropirate bg for pages in the institute - global pages */ #container.institute #containertop { background-image: url(containertop-green.png);} #container.institute #sectiontitle div.innerwrap { background-image: url(sectiontitle-green-edge.png)} #container.institute #sectiontitle h1 { background: url(sectiontitle-green.png)} #content { padding-left: 20px; float: left; width: 620px; padding-bottom: 20px; clear: left} #column2 { display: none; padding-top: 20px; padding-bottom: 20px; float: left;background-color:#EFE7E7; width: 260px; padding-left: 30px; padding-right: 30px } #column3 { display: none; padding-top: 20px; padding-bottom: 20px; float: left; background-color: #F0F7F1; width: 260px; padding-left: 30px; padding-right: 20px } #container.column2 #content { width: 260px; padding-right: 30px} #container.column2 #column2 { display: block;} #container.basic #content { width: 900px; } #container.basic #subnav { display: none;} #container.column3 #content { width: 260px; padding-right: 30px} #container.column3 #column2 { display: block;} #container.column3 #column3 {display: block;} #container.column3 #subnav { display: none;} /* For next set of areas, H2 will provide the top BG, and the containing DIV will have the rest of the BG.*/ #subnav { float: right; width: 212px; margin-right: 30px; margin-top: -45px} #subnav div.menu { background: url(rightnabbox.png) 0 bottom no-repeat; margin-bottom: 15px; padding-bottom: 30px; } #subnav div.menu h2 { background: url(rightnabbox-yellow.png) no-repeat top left; font-size: 13px; height: 45px; line-height: 36px; padding-top: 21px; padding-left: 15px; margin-top: 0} #subnav div.menu ul { padding: 0; margin-top: 0; zoom:1} /*IE hack*/ #subnav div.menu ul ul { padding-left: 20px;} #subnav div.menu li { list-style-type: none; line-height: 120%; font-size: 12px} #subnav div.menu li a { padding: 5px 15px 5px 25px; display: block; } #subnav div.menu li a abbr { zoom: 1}/*IE hack*/ #subnav div.menu li a:hover, #subnav div.menu li a:focus { text-decoration: none; background:url(subnavarrow.png) no-repeat 13px 9px; } #subnav div.menu li a.selected { background:url(subnavarrow.png) no-repeat 13px 9px; font-weight:bold } /* Text only ad space in subnav -- designed for Health and PE but can be used elsewhere */ .text p { padding-left: 20px; padding-right:20px;} /* Sub Navigation Headings */ #subnav div.menu h3 { padding-left: 20px; } #subnav div#contactus { background: url(rightnabbox.png) 0 bottom no-repeat; margin-bottom: 15px; padding-bottom: 30px; overflow: hidden; } #subnav div#contactus h2 { background: url(rightnabbox-yellow.png) no-repeat top left; font-size: 13px; height: 45px; line-height: 36px; padding-top: 21px; padding-left: 15px; margin-top: 0} #subnav div#contactus h3 { margin: 10px 0 0 25px; font-size: 12px; } #subnav div#contactus p { margin: 0 15px 0 25px; font-size: 11px; overflow: hidden;} /* Related and Extra Menus */ #subnav div#relatedprograms, #subnav div.extramenu { background: url(rightnabbox.png) 0 bottom no-repeat; margin-bottom: 15px; padding-bottom: 30px; } #subnav div#relatedprograms h2, #subnav div.extramenu h2{ background: url(rightnabbox-green.png) no-repeat top left; font-size: 13px; height: 45px; line-height: 36px; padding-top: 21px; padding-left: 15px; margin-top: 0} #subnav div#relatedprograms ul, #subnav div.extramenu ul{ padding: 0; margin-top: 0; zoom:1} /*IE hack*/ #subnav div#relatedprograms li, #subnav div.extramenu li{ list-style-type: none; line-height: 120%; font-size: 12px} #subnav div#relatedprograms li a, #subnav div.extramenu li a {padding: 5px 0 5px 25px; display: block; } #subnav div#relatedprograms li a:hover, #subnav div.extramenu lis: ahover, #subnav div.menu li a:focus { text-decoration: none; background:url(subnavarrow.png) no-repeat 13px 9px;} #subnav div#relatedprograms li.seeallprograms a { font-weight: bold; padding-top: 16px; background-position: 13px 20px} #datestamp { background-color: #F0F2E6; padding: 10px 0 20px 0} #datestamp p { width: 956px; margin: 0 auto;} #foot { background: url(foottop.png) repeat-x top #EDEDED; } #foot div.innerwrap { background: url(footbot.png) repeat-x bottom; padding-bottom: 20px;} #foot div.innerwrap div.innerwrap { width: 956px; margin: 0 auto; background: none; overflow: hidden;} #foot h2 { position: absolute; left: -9999px; top: -9999px;} #foot p#footsitename { margin-top: 0; padding-top: 18px; margin-left: -2px;} #foot h3 { font-size: 14px; } #foot a { color: #333} #foot a:focus, #foot a:hover { text-decoration: none; color: #003D79} #foot a:focus { outline: 1px dotted #ccc} #foot form { padding-bottom: 10px} #foot label { display: block; padding-bottom: 3px} #foot input#txtQuery { width: 190px} #foot input#txtQuery:focus { background-color: #FFFFEB} #foot #address { margin-top: 7px} #foot ul { list-style-type: none; padding-left: 0} #foot ul li { padding-bottom: 2px;} #foot #locate { float: left; width: 318px;} #foot #sitemap { float: left; width: 250px; padding-left: 70px;} #foot #collegelinks { float: left; width: 308px; padding-left: 10px} p#sitemanagedby { margin:0 auto 20px auto; width: 960px; line-height: 45px; font-size: 11px; color: #003d79; font-weight:bold } /* ****************************************************** */ /* ****************************************************** */ /* ****Classes and Special Stuff, but mostly classes.**** */ p.skiphide {position: absolute; left: -9999px; top:-9999px;} p.intro { font-size: 15px } em.red, span.red em, strong.red, p.red em { font-style:normal; color: #B2334D} div.note { background: #F0F2E6 url(note-top.gif) repeat-x; padding: 6px 15px 30px 24px; margin-top: 24px} div.note div.innerwrap { background: url(note-bottom.gif) bottom repeat-x; margin: 0 -15px -30px -24px; padding: 0 15px 30px 24px;} /* This class added via jquery*/ img.photo, p.photo img, img.photoleft, p.photoleft img, img.photoright, p.photoright img{ display: block; border: 4px solid #333;} img.photoleft, p.photoleft { float: left; clear: left; margin-top: 24px; margin-right: 30px } img.photoright, p.photoright { float: right; margin-left: 30px; clear: right; margin-top: 20px} p.photo, p.photoleft, p.photoright { padding-left: 2px; font-style: italic; font-size: 12px} p.photo img, p.photoleft img, p.photoright img { margin-left: -2px;} a.button {color: #fff; font-weight: bold; text-decoration: none; padding: 5px 8px; background: #003d79; border: 2px solid #aaa; } a.button:hover { background-color: #24588C; } /* styles for application and/or procedural content */ div#imaging-application h3 { margin-top: 50px; background-color: #eeeeee; padding: 6px 7px 6px 0px; border-bottom: 1px solid #96C900} div#imaging-application h3 span.step { color: #fff; padding: 5px; background: #EEEEEE url(/health/assets/populartop.png) repeat-x;} div#imaging-application div.note { background: #F0F2E6; padding: 12px; margin-top: 24px; border:1px solid #96C900 } div#imaging-application div.note p { margin-top: 0px; } div#imaging-application div.note div.innerwrap {background: none;} /* DUPLICATE for transitioning away from old, too specific css naming ... styles for application and/or procedural content */ div#steps h3 { margin-top: 50px; background-color: #eeeeee; padding: 6px 7px 6px 0px; border-bottom: 1px solid #96C900} div#steps h3 span.step { color: #fff; padding: 5px; background: #EEEEEE url(/health/assets/populartop.png) repeat-x;} div.pad { margin-top: 25px; } div#steps div.note { background: #F0F2E6; padding: 12px; margin-top: 24px; border:1px solid #96C900 } div#steps div.note p { margin-top: 0px; } div#steps div.note div.innerwrap {background: none;} /* aside and subsidiaries */ div.aside, div.right {float: right; clear: right; overflow:hidden} div.right { width: 238px; margin: 10px 0 20px 30px; padding: 0 0 14px 10px; } img.right { float: right;} div.aside { width: 220px; margin: 20px 0 20px 30px; padding: 0 10px 14px 10px; border: 4px solid #91ABC5; background-color:#EEEEEE; } div.aside h2,div.right h2 { font-size: 14px; margin-top: 10px} div.aside p, div.right p { font-size: 10px; margin-top: 12px;} div.aside ul, div.aside ol {padding-left: 18px;} div.aside li { margin-top: 8px; font-size: 11px;} div.left { float: left; clear: left; margin-left: 0; margin-right: 30px;} div.popular { border: 1px solid #96C900; background: #EEEEEE url(/health/assets/populartop.png) repeat-x;} div.popular h2 { margin-top: 6px; margin-bottom: 18px; color: #fff; } div.deadline { float: left; clear:left; width:100%; margin-bottom: 48px;} div.deadline p { font-size: 14px; } div.deadline p.extra { font-size: 11px;} #container.column3 .right, #container.column2 .right, #container.column3 div.aside, #container.column2 div.aside, #container.column2 p.photoleft, #container.column3 p.photoright, #container.column2 img.photoleft, #container.column3 img.photoright { float:none; margin-left: 0; margin-right: 0} p.pagenav { border: 4px solid #91ABC5; border-bottom: none; background-color:#EEEEEE; font-size: 13px; font-weight: bold; padding: 8px 0 2px 10px; width: 290px; } ul.pagenav { list-style-type: none; margin-top: 0; padding-left: 0; border: 4px solid #91ABC5; border-top: none; background-color:#EEEEEE; font-size: 12px; padding-bottom: 10px; width: 300px; } ul.pagenav li a{ background:url(arrowPageNav.gif) no-repeat 7px 6px; display: block; padding: 1px 0 3px 24px;} /*Need image with transparent bg*/