/* TCB Home Page Stylesheet */ /* This stylesheet was primarily made to make the front page look good. It is currently too specific for its own good; but over time, we hope to make it into a fairly generic and useful stylesheet for general use. */ /* Version 1.2; Tim Skirvin, 28 Mar 2006 */ /* */ /* Headers and Include Bits */ /* */ /* body - this is the default page layout for everything that includes this page. There is a small background image, which has a very small border; the background color is kindof grey; and the fonts are set. There's not much else really set, but it's a good start. */ body { font-size: 100%; font-family: Arial, Sans, Helvetica, sans-serif; background-color: #E8EBF1; margin: 0px 3px; padding: 0px; min-width: 930px;} /* container - holds the whole page, both for the front page and for the templates. This is the white background bit, with more margins and such. */ #container { background-color: #FFFFFF; margin: 0px; padding: 0px; border-right-width: 2px; border-right-color: #F0F0F2; border-right-style: solid; border-left-width: 2px; border-left-color: #F0F0F2; border-left-style: solid; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #F0F0F2; } /* We don't add any default padding or margins for

tags */ #container p { margin: 0px; padding: 0px; } /* header - defines what actually goes into the top header area entirely, as long as that div is included. I suppose this is in some ways elegant. The image includes the background and, on the far right, a molecule that we don't know what it is. There's talk of making more of these, and rotating them. We'll see. */ #header { /* background-image: url(/images/topbar/aqp.jpg); */ /* background-image: url(/include/images/rotate01.gif); */ margin: 0px; padding: 0px; font-size: 100%; background: #6394c4 url(/include/images/template_images_2010/bg.png) center center repeat-y; overflow: hidden; } /* There shouldn't be any links that we actually want to clearly link in the header bar, so take away their borders. */ #header a { border: none; } #nihuiuc { background: #4477aa; padding: 10px 20px 6px 20px; font-size: 10px; color: #ffffff; text-transform: uppercase; font-weight: bold; } #nihuiuc a:link { text-decoration: none; color: #ffffff; } #nihuiuc a:visited { color: #ffffff; } #nihuiuc a:hover { text-decoration: underline; } #nihuiuc a.nih { padding-right: 10px; border-right: 1px solid #2a5063; } #nihuiuc a.uiuc { padding-left: 10px; padding-right: 20px; } /* logo - the section that loads the TCB logo into the headers. Used, again, by the front page and all template pages. */ #logo { color: #FFFFFF; margin: 0px; padding: 0px; height: 83px; width: 100%; background: url(/include/images/template_images_2010/swirls.png) right 2px no-repeat; } /* */ /* Navigation Bar */ /* */ /* This bar spans the top of the page, below the main header. It is only used on the front page. If anything we have in this document is black magic, it's this section; so tread lightly! */ /* navbar - contains the navcontainer, and that's about it. */ #navbar { background-color: #90A0AE; margin: 0; padding: 0; height: 1.25em; } #navcontainer { margin: 0px 0 0 0px; padding: 0; height: 1.5em; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; font-size: 100%; line-height: 100%; } #navcontainer ul li a { padding: 2px 0px; margin: 0px; color: #FFFFFF; text-decoration: none; display: block; text-align: center; border: none; font: normal 70%/130% Arial, Sans, Helvetica, sans-serif; letter-spacing: 0.1em; width: 8em; height: 1.5em; } #navcontainer ul li a:visited { padding: 2px 0px; margin: 0px; color: #FFFFFF; text-decoration: none; display: block; text-align: center; letter-spacing: 0.1em; width: 8em; height: 1.5em; border: none; font: normal 70%/130% Arial, Sans, Helvetica, sans-serif; } #navcontainer ul li a:hover { color: #FFFFFF; border: none; padding: 1.5px 0px; background: #990000 url(/include/images/highlight.gif) repeat-x center bottom; } #navcontainer a:active { color: #fff; margin: 0px; padding: 1.5px 0px; border: none; background: #990000 url(/include/images/highlight.gif) repeat-x left bottom; } /* */ /* Highlight Area */ /* */ /* highlight - this div area contains Quick Links and the Highlight, and that's it. This occurs just below the headers and navigation bar. */ #highlight { margin: 10px 0px 0px; padding: 0px 10px; height: 1%; } /* highlight_text - where the current highlight goes. Matches with quicklink_block. Note that the combined width is only 98%; the last 2% is a margin. */ #highlight_text { margin: 5px 0px 0px 0px; padding: 0px; float: left; width: 64%; font-family: Arial, Sans, Helvetica, sans-serif; } /* highlight_text information for the front page - note, it can be different than the CSS given in tcb.css! */ /* Ensuring that the titles are consistent... */ .highlight_title a:link { text-decoration: none; font-weight: normal; color: #000000; } .highlight_title a:visited { text-decoration: none; font-weight: normal; color: #666666; } .highlight_title a:active { text-decoration: none; font-weight: normal; border-bottom-width: 0px; color: darkred; } .highlight_title a:hover { text-decoration: none; font-weight: normal; border-bottom-width: 0px; color: darkred; } #highlight_text .highlight_image { font-size: small; font-style: italic; text-align: right; float: left; margin-right: 15px; } #highlight_text .highlight_text { font-size: small; text-align: justify; margin-top: 5px; margin-right: 10px; } #highlight_text p { padding: 0 0 3px 0; margin: 0 0 0 0; font-size: small; } /* quicklink_block - this is where the Quick Links go over in the side. It's essentially the same as link_block, but is right-justified (not the text!) in the right 34% of the screen - ie, where the highlight isn't. */ #quicklink_block { margin: 5px 0 0 0; padding: 0px; float: right; width: 34%; } #quicklink_block ul { margin: 0px; padding: 0px 5px 5px; } #quicklink_block li { margin: 0px 0px 3px; padding: 0px 0px 3px; font-family: Arial, Sans, Helvetica, sans-serif; font-size: small; list-style-type: none; } /* */ /* Link Areas */ /* */ /* left/right blocks - divides the sections of the link areas into left and right areas, where 'left' is the same width as the highlight before and 'right' is the same width as the quicklinks. */ #left { margin: 0px; padding: 0px; float: left; width: 65%; height: 1%; } #right { margin: 0px 0px 0px 66%; padding: 0px; height: 1%; } /* lefthalf/righthalf - same thing, used by other pages primarily. */ #lefthalf { margin: 0px; padding: 0px; float: left; width: 45%; height: 1%; } #righthalf { margin: 0px 0px 5% 50%; padding: 0px; height: 1%; } /* Three different types of areas to put links in. link_container_left and link_container_right are for when you want two equal-sized link areas; link_container_full is for when you just want one link area. */ #link_container_left { margin: 0; padding: 0; width: 48%; float: left; font-size: large; } #link_container_right { margin: 0 0 0 50%; padding: 0; font-size: large; } #link_container_full { margin: 0; padding: 0px; font-size: large; } /* link_text - contained within a link_container_* bock, this sets some defaults for paragraph sizes and such. */ #link_text { margin: 0 10px 0 0; padding: 0px; } #link_text p { margin: 0px; padding: 0px 10px 3px 3px; font-family: Arial, Sans, Helvetica, sans-serif; font-size: x-small; color: #666666; } link_text { margin: 0 10px 0 0; padding: 0px; } link_text p { margin: 0px; padding: 0px 10px 3px 3px; font-size: x-small; font-family: Arial, Sans, Helvetica, sans-serif; color: #666666; } /* link_block - contains everything below the highlight area. This mostly consists of small blocks, each of which contains a list of links; there are also some text blocks, such as "recent publications". */ #link_block { margin: 10px 0px 0px; padding: 0px 10px; height: 1%; } #link_block ul { margin: 0px; padding: 0px 5px 5px; } #link_block li { margin: 0px 0px 3px; padding: 0px 0px 3px; font-family: Arial, Sans, Helvetica, sans-serif; font-size: small; list-style-type: none; } /* */ /* tags */ /* */ /* Note - these must retain their order, both with 'link/visited/hover/active' and the actual order that the tags are chosen! */ /* Default - blue-ish, bolded but no underlines. Visited links are darkred, underline when we hover. */ a:link { color: #003366; text-decoration: none; font-weight: bold; margin: 0px; padding: 0px; } a:visited { color: #003366; text-decoration: none; font-weight: bold; margin: 0px; padding: 0px; } a:hover { color: #003366; text-decoration: underline; font-weight: bold; border-bottom-width: 1px; margin: 0px; padding: 0px; } a:active { color: #003366; text-decoration: none; font-weight: bold; margin: 0px; padding: 0px; } /* Major Links - black by default, gray later */ #link_block a:link { text-decoration: none; font-weight: normal; color: #000000; } #link_block a:visited { text-decoration: none; font-weight: normal; color: #666666; } #link_block a:hover { text-decoration: none; font-weight: normal; border-bottom-width: 0px; color: darkred; } #link_block a:active { text-decoration: none; font-weight: normal; border-bottom-width: 0px; color: darkred; } /* Quicklinks - same as link_block ones, actually. */ #quicklink_block a:link { text-decoration: none; font-weight: normal; color: #000000; } #quicklink_block a:visited { text-decoration: none; font-weight: normal; color: #666666; } #quicklink_block a:hover { text-decoration: none; font-weight: normal; border-bottom-width: 0px; color: darkred; } #quicklink_block a:active { text-decoration: none; font-weight: normal; border-bottom-width: 0px; color: darkred; } /* */ /* General Layout Aids */ /* */ /* h3.headarea - used to make the background grey bars for showing off each subsection. No colored text in here for links! */ h3.headarea { font-family: Arial, Sans, Helvetica, sans-serif; margin: 0px 0px 10px; padding: 5px; font-size: medium; background-image: url(/include/images/h3_bk.jpg); line-height: 100%; font-weight: normal; color: #666666; letter-spacing: .1em; border-bottom: 1px solid #CCCCCC; border-top-width: 2px; border-top-style: solid; border-top-color: #CCCCCC; background-repeat: repeat; } h3.headarea a:link { text-decoration: none; font-weight: normal; color: #000000; } h3.headarea a:visited { text-decoration: none; font-weight: normal; color: #666666; } h3.headarea a:hover { text-decoration: none; font-weight: normal; border-bottom-width: 0px; color: darkred; } h3.headarea a:active { text-decoration: none; font-weight: normal; border-bottom-width: 0px; color: darkred; } /* A right-biased text block, for use with "All Seminars"-type situations. */ div.selectall { text-align: right; font-size: medium; } #selectall { text-align: right; font-size: medium; } /* cleardiv - included to make sure things end consinently on the vertical scale; there's a 'clear: both' and invisible text in here. */ .cleardiv { font-size: 1px; line-height: 0px; margin: 0px; padding: 0px; clear: both; visibility: hidden; } /* a.clear - meant to be used for linked images. In general, links are underlined when highlighted; this is fine with text, but with images this causes problems with page resizing. This is one of the most annoying changes required by the new site, but we can handle it! */ a.clear { border-bottom-width: 0px; text-decoration: none; border: none } /* footer - the footer bar is much different than most of the page, and is used across all pages on the system through our standard includes. If nothing else, this is why this stylesheet must be loaded by all pages.*/ #footercontainer { border-top: 1px solid #cccccc; padding-top: 20px; margin-left: 10px; margin-right: 10px; } #footerlogos { float: left; padding-right: 5px; padding-left: 10px; padding-bottom: 26px; } #footerlogos { font-family: Arial, Sans, Helvetica, sans-serif; font-size: 55%; vertical-align: middle; text-transform: none; float: left; padding-right: 5px; } #footerlogos2 { float: right; padding-left: 14px; padding-right: 7px; padding-bottom: 26px; } #footerlogos a, #footerlogos2 a { float: left; margin-right: 12px; color: #003366; text-decoration: none; font-weight: bold; border-bottom: none; } #footerlogos2 a { margin-right: 0px; } #footerlogos a img, #footerlogos2 a img { border: none; } #footerlogos a:hover, #footerlogos2 a:hover { text-decoration: none; } #footer { font-family: Arial, Sans, Helvetica, sans-serif; font-size: 55%; vertical-align: middle; text-transform: none; padding-bottom: 20px; line-height: 120%; padding-right: 10px; } /* ############################################################################ #### Version History ########################################################## ############################################################################### # 1.3 Wed 29 Mar 13:35:16 CST 2006 tskirvin ### Fixes for the modified TCB::Highlights. # 1.2 Tue 28 Mar 09:19:16 CST 2006 tskirvin ### Added direct headarea tag information. # 1.1 Wed 08 Mar 12:25:24 CST 2006 tskirvin ### Working on actually commenting everything. # 1.0 Late 2005 ### This is what was offered to us by the campus web developers, which didn't ### work all that well. ############################################################################ */ .clear { clear: both; height: 0px; width: 0px; overflow: hidden; } #footer .morepadding { margin-top: 6px; } .btninput { color: #999999; padding: 0px 6px 0px 6px; border: none; width: 133px; height: 18px; margin-right: 4px; } .btnG { background: url(/include/images/template_images_2010/search.gif) 0px 0px no-repeat; width: 50px; height: 18px; border: none; } .btnG:hover { background: url(/include/images/template_images_2010/search.gif) 0px -18px no-repeat; } #searchform { float: right; } #searchform input { display: block; overflow: hidden; float: left; } .jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1; } .jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; background: url('/include/images/template_images_2010/scrolldots.gif') center center repeat-y; } .jScrollPaneDrag { position: absolute; background: url('/include/images/template_images_2010/slider.gif') center center no-repeat; cursor: pointer; } .jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; } .jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; } a.jScrollArrowUp { display: block; position: absolute; z-index: 1; top: 0; right: 0; text-indent: -2000px; overflow: hidden; height: 17px; width: 17px; background: url('/include/images/template_images_2010/basic_arrow_up.gif') 0 0 no-repeat; } a.jScrollArrowDown { display: block; position: absolute; z-index: 1; bottom: 0; right: 0; text-indent: -2000px; overflow: hidden; height: 17px; width: 17px; background: url('/include/images/template_images_2010/basic_arrow_down.gif') 0 0 no-repeat; } a.jScrollArrowUp:hover { background-position: 0 -17px; } a.jScrollArrowDown:hover { background-position: 0 -17px; } a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover { background-position: 0 -34px; } .holder { float: left; margin: 10px; } .scroll-pane { height: 288px; overflow: auto; float: left; width: 187px; } #scrollpane:active { outline: none; } #scrollpane:focus { -moz-outline-style: none; } #main-home { padding: 20px; font-size: 12px; line-height: 14px; } #main-home #highlightcontainer { width: 447px; } #main-home h3 { font-size: 21px; font-weight: bold; line-height: 23px; padding: 0px; margin: 0px 0px 10px 0px; } #main-home h2 { font-size: 16px; font-weight: bold; line-height: 18px; padding: 0px; margin: 0px 0px 5px 0px; color: #003366; } #main-home h1.main { font-size: 21px; font-weight: bold; line-height: 23px; padding: 0px; margin: 0px 0px 0px 0px; } #main-home h1.main a:link { color: #ffffff; background: #4477aa; display: block; padding: 8px; text-decoration: none; } #main-home h1.main a:active { color: #ffffff; background: #4477aa; display: block; padding: 8px; text-decoration: none; } #main-home h1.main a:visited { color: #ffffff; background: #4477aa; display: block; padding: 8px; text-decoration: none; } #main-home h1.main a:hover { color: #ffffff; background: #306294; display: block; padding: 8px; text-decoration: none; } #main-home .highlight_image { float: left; padding-right: 10px; } #main-home .highlight_under { clear: both; border: 1px solid #cccccc; padding: 5px; margin-top: 10px; } #main-home .highlight_under_width { width: 61%; } #main-home .tri { background: url(/include/images/template_images_2010/triangle-bullet.gif) 0px 3px no-repeat; padding-left: 8px; clear: both; display: block; } #main-home .tri2 { clear: none; display: inline; font-size: 12px; margin-left: 10px; } #main-home .announcement { margin-bottom: 8px; display: block; } #main-home .pad-below { padding-bottom: 7px; font-size: 11px; line-height: 12px; } #main-home .main-bg { background: url(/include/images/template_images_2010/main-bg155.gif) left bottom repeat-x; padding: 8px; } #main-home .clearstyle { background: none; padding: 0px; padding-top: 3px; } /* If you need to change the height of the Researc/Software/Outreach boxes, the height tag below is the place to do it. Also, make sure that the background main-bg gif referenced above is tall enough. Otherwise you will get a white blank between the header bar and the background */ #main-home .main-bg ul { width: 125px; height: 155px; float: left; list-style: none; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } #main-home .clearstyle ul { list-style: none; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } #main-home .main-bg ul.first { padding: 0px 10px 0px 0px; } #main-home .main-bg ul.singlecolumn, #main-home .clearstyle ul.singlecolumn { width: 100%; list-style: none; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } #main-home .main-bg ul li, #main-home .clearstyle ul li { background: url(/include/images/template_images_2010/triangle-bullet.gif) 0px 3px no-repeat; padding-left: 8px; clear: both; display: block; padding-bottom: 7px; } #main-home h2.main { color: #ffffff; background: #4477aa; display: block; padding: 8px; text-decoration: none; margin: 0px 0px 0px 0px; } #main-home .main-bg2 { background: url(/include/images/template_images_2010/main-bg.gif) left bottom repeat-x; padding: 8px; }