Template:Caltech Header
From 2012.igem.org
(Difference between revisions)
Line 4: | Line 4: | ||
<head> | <head> | ||
<style type="text/css"> | <style type="text/css"> | ||
- | + | ||
+ | body {background: #EBA243} | ||
+ | |||
+ | |||
+ | .firstHeading { | ||
+ | display:none !important; | ||
+ | } | ||
+ | |||
+ | #p-logo { height:1px; overflow:hidden; display: none;} | ||
+ | |||
+ | #top-section { | ||
+ | background-image:url('https://static.igem.org/mediawiki/2012/2/28/IDcard.jpg');; | ||
+ | height:250px ! important;; | ||
+ | } | ||
+ | |||
+ | |||
+ | p {text-align: justify; color: black;} | ||
+ | |||
+ | a:link { color: #00b0e6; text-decoration: none} | ||
+ | a:visited { color:#00b0e6; text-decoration: none} | ||
+ | a:hover { color:#f29400; text-decoration: none} | ||
+ | a:active { color:#f29400; text-decoration: none} | ||
+ | |||
+ | #bodyContent { padding: 10px auto; width: 910px; margin: auto; clear: none; color:black} | ||
+ | |||
+ | table#Team { text-align: justify; border: 0; } | ||
+ | table#Team h2, table#Team h3 { clear: both; } | ||
+ | |||
+ | |||
+ | /*-----------------------------------------------------------------------------------------------*/ | ||
+ | div.MenuBar ul li ul.DropDownMenu { | ||
+ | display: none; /* Hides all drop-down menus. */ | ||
+ | |||
+ | } | ||
+ | /* | ||
+ | li:hover works in IE7 and FF2. | ||
+ | a:hover works in IE6 and FF2. | ||
+ | a:hover breaks li:hover in FF2. | ||
+ | */ | ||
+ | div.MenuBar ul li:hover ul.DropDownMenu li ul.SideMenu, | ||
+ | div.MenuBar ul li a:hover ul.DropDownMenu li a ul.SideMenu { | ||
+ | display: none; /* Hides all side menus. */ | ||
+ | } | ||
+ | /*------------------------------------------------------------------------------------- Menu Bar */ | ||
+ | div.MenuBar { | ||
+ | font: arial, helvetica, sans-serif; | ||
+ | height: 30px; | ||
+ | width: 910px; | ||
+ | /*width: 100%*/ | ||
+ | margin: 0; | ||
+ | border-top: 0; | ||
+ | border-right: 0; | ||
+ | border-left: 0; | ||
+ | padding: 0; | ||
+ | background: black; | ||
+ | |||
+ | } | ||
+ | div.MenuBar ul { | ||
+ | font: arial, helvetica, sans-serif; | ||
+ | text-align: center; | ||
+ | list-style-type: none; | ||
+ | margin: 0.5em auto; | ||
+ | border: 0; | ||
+ | padding: 0; | ||
+ | background: black; | ||
+ | } | ||
+ | div.MenuBar ul li { | ||
+ | font: arial, helvetica, sans-serif; | ||
+ | display: block; | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | font-size: 1.3em; | ||
+ | float: left; | ||
+ | background: black; | ||
+ | text-align: center; | ||
+ | width: 107px; | ||
+ | position: relative; /* Sets the positioning context for each drop-down menu. */ | ||
+ | } | ||
+ | |||
+ | div.MenuBar ul li a { | ||
+ | font: arial, helvetica, sans-serif; | ||
+ | display: block; | ||
+ | background: black; | ||
+ | height: 22px; /* Keep height + padding-top + padding-bottom sync with the menu bar height. */ | ||
+ | color: #ffffff; | ||
+ | padding-top: 4px; | ||
+ | padding-bottom: 4px; | ||
+ | padding-left: 1em; /* Sets the left space between top-level items. */ | ||
+ | padding-right: 1em; /* Sets the right space between top-level items. */ | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | /*------------------------------------------------------------------------------ Drop-Down Menus */ | ||
+ | div.MenuBar ul li:hover ul.DropDownMenu, | ||
+ | div.MenuBar ul li a:hover ul.DropDownMenu { | ||
+ | display: block; | ||
+ | width: 10em; /* Drop-down menu width. | ||
+ | Use MenuTailor.css to customize. */ | ||
+ | height: 1em; | ||
+ | padding: 1px; /* Sets the drop-down menu "effective border" width. */ | ||
+ | position: absolute; | ||
+ | top: 23px; /* Places the drop-down menu under the menu bar. | ||
+ | Keep it sync with the menu bar height. */ | ||
+ | left: 0; /* Aligns the drop-down menu to its top-level item. */ | ||
+ | background-color: black; /* Selected item. */ | ||
+ | color: #FFFFFF; | ||
+ | |||
+ | } | ||
+ | div.MenuBar ul li:hover ul.DropDownMenu li a, | ||
+ | div.MenuBar ul li a:hover ul.DropDownMenu li a { | ||
+ | width: 10em; /* Keep it sync with the drop-down menu width. | ||
+ | Use MenuTailor.css to customize. */ | ||
+ | height: 1em; | ||
+ | padding-left: 0; | ||
+ | padding-right: 0; | ||
+ | background-color: black; /* Selected item. */ | ||
+ | color: #FFFFFF; | ||
+ | } | ||
+ | ul.DropDownMenu li a span { | ||
+ | display: block; | ||
+ | padding-left: 0.75em; /* Sets the left space of each drop-down menu item. */ | ||
+ | padding-right: 0.25em; /* Sets the right space of each drop-down menu item. */ | ||
+ | text-align: right; /* Aligns the >> symbol to the right. */ | ||
+ | } | ||
+ | ul.DropDownMenu li a span span { | ||
+ | float: left; /* Aligns the text (back) to the left. */ | ||
+ | font: 12px arial, helvetica, sans-serif; /* Required for IE55. */ | ||
+ | height: 20px; | ||
+ | color: #FFFFFF; | ||
+ | } | ||
+ | /*----------------------------------------------------------------------------------- Side Menus */ | ||
+ | div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu, | ||
+ | div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu { | ||
+ | display: block; | ||
+ | width: 11em; /* Side menu width. | ||
+ | Use MenuTailor.css to customize. */ | ||
+ | padding: 1px; /* Sets the side menu "effective border" width. */ | ||
+ | position: absolute; | ||
+ | top: -1px; /* Aligns the side menu to its drop-down menu item. | ||
+ | Keep it sync with the side menu "effective border" width. */ | ||
+ | left: 13em; /* Places the side menu to the right of the drop-down menu. | ||
+ | Keep it sync with the drop-down menu width. | ||
+ | Use MenuTailor.css to customize. */ | ||
+ | } | ||
+ | div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a, | ||
+ | div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a { | ||
+ | width: 11em; /* Keep it sync with the side menu width. | ||
+ | Use MenuTailor.css to customize. */ | ||
+ | font: 12px arial, helvetica, sans-serif; /* Required for IE55. */ | ||
+ | left: 13em; /* Places the side menu to the right of the drop-down menu. | ||
+ | Keep it sync with the drop-down menu width. | ||
+ | Use MenuTailor.css to customize. */ | ||
+ | } | ||
+ | div.MenuBar ul li ul.DropDownMenu li ul.SideMenu li a span { | ||
+ | padding-left: 1.5em; /* Sets the left space of each side menu item. */ | ||
+ | padding-right: 0.5em; /* Sets the right space of each side menu item. */ | ||
+ | text-align: left; | ||
+ | font: 12px arial, helvetica, sans-serif; /* Required for IE55. */ | ||
+ | left: 13em; /* Places the side menu to the right of the drop-down menu. | ||
+ | Keep it sync with the drop-down menu width. | ||
+ | Use MenuTailor.css to customize. */ | ||
+ | } | ||
+ | /*----------------------------------------------------------------------------- Browser Specific */ | ||
+ | * html div.MenuBar ul li a { | ||
+ | float: left; /* Required for IE55 and IE6. | ||
+ | Breaks O9. | ||
+ | Hidden (* html) from non-IE browsers. */ | ||
+ | } | ||
+ | * html ul.DropDownMenu li a:hover { | ||
+ | cursor: hand; /* Required for IE55. | ||
+ | Hidden (* html) from non-IE browsers. */ | ||
+ | } | ||
+ | ul.DropDownMenu li a:hover { | ||
+ | cursor: pointer; /* Required for IE6 and IE7. | ||
+ | Hidding it (* html) from non-IE browsers breaks IE7! | ||
+ | } | ||
+ | * html div.MenuBar a:hover { | ||
+ | text-decoration: none; /* Required for IE55 and IE6. | ||
+ | Hidden (* html) from non-IE browsers. */ | ||
+ | } | ||
+ | * html div.MenuBar ul li table, | ||
+ | * html div.MenuBar ul li table td { | ||
+ | border: 0; /* Required for IE55 and IE6. | ||
+ | Hidden (* html) from non-IE browsers. */ | ||
+ | } | ||
+ | /*------------------------------------------------------------------------------- Default Colors */ | ||
+ | div.MenuBar { | ||
+ | background-color: Menu; | ||
+ | border-bottom: 1px solid ButtonShadow; | ||
+ | } | ||
+ | div.MenuBar a { | ||
+ | background-color: Menu; /* Top-level unselected items. */ | ||
+ | color: MenuText; | ||
+ | } | ||
+ | div.MenuBar ul li:hover a, | ||
+ | div.MenuBar ul li a:hover { | ||
+ | color: #ea7f16; | ||
+ | background-color: Highlight; /* Top-level selected item. */ | ||
+ | color: HighlightText; | ||
+ | } | ||
+ | /*...............................................................................................*/ | ||
+ | div.MenuBar ul li:hover ul.DropDownMenu, | ||
+ | div.MenuBar ul li a:hover ul.DropDownMenu { | ||
+ | background-color: ButtonShadow; /* Sets the drop-down menu "effective border" color. */ | ||
+ | } | ||
+ | div.MenuBar ul li:hover ul.DropDownMenu li a, | ||
+ | div.MenuBar ul li a:hover ul.DropDownMenu li a { | ||
+ | background-color: Menu; Drop-down menu unselected items. | ||
+ | Sets the drop-down menu "effective background" color. */ | ||
+ | color: MenuText; | ||
+ | } | ||
+ | div.MenuBar ul li:hover ul.DropDownMenu li:hover a, | ||
+ | div.MenuBar ul li a:hover ul.DropDownMenu li a:hover { | ||
+ | background-color: Highlight; /* Drop-down menu selected item. */ | ||
+ | color: HighlightText; | ||
+ | } | ||
+ | /*...............................................................................................*/ | ||
+ | div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu, | ||
+ | div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu { | ||
+ | background-color: ButtonShadow; /* Sets the side menu "effective border" color. */ | ||
+ | } | ||
+ | div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a, | ||
+ | div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a { | ||
+ | background-color: Menu; /* Side menu unselected items. | ||
+ | Sets the side menu "effective background" color. */ | ||
+ | color: MenuText; | ||
+ | } | ||
+ | div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a:hover, | ||
+ | div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a:hover { | ||
+ | background-color: Highlight; /* Side menu selected item. */ | ||
+ | color: HighlightText; | ||
+ | } | ||
+ | /*-----------------------------------------------------------------------------------------------*/ | ||
+ | /*Script-Free 3-Level Menu 1.2 Tailor | ||
+ | www.CesarDaniel.info | ||
+ | /*-------------------------------------------------------------------------------------- General */ | ||
+ | body { | ||
+ | background: style="color:#bb4400"; | ||
+ | color: black; | ||
+ | margin: 0; | ||
+ | border: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | div.MenuBar { | ||
+ | font: 13px arial, helvetica, sans-serif; | ||
+ | } | ||
+ | div.MenuBar ul { | ||
+ | font: 13px arial, helvetica, sans-serif; /* Required for IE55. */ | ||
+ | } | ||
+ | /*--------------------------------------------------------------------------------------- Colors */ | ||
+ | div.MenuBar { | ||
+ | background-color: black; /* Selected item. */ | ||
+ | color: #FFFFFF; | ||
+ | border-bottom: 1px solid ButtonShadow; | ||
+ | } | ||
+ | div.MenuBar a, | ||
+ | div.MenuBar ul li:hover ul.DropDownMenu li a, | ||
+ | div.MenuBar ul li a:hover ul.DropDownMenu li a, | ||
+ | div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a, | ||
+ | div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a { | ||
+ | background-color: black; /* Selected item. */ | ||
+ | color: #FFFFFF; | ||
+ | } | ||
+ | div.MenuBar ul li:hover a, | ||
+ | div.MenuBar ul li a:hover, | ||
+ | div.MenuBar ul li:hover ul.DropDownMenu li:hover a, | ||
+ | div.MenuBar ul li a:hover ul.DropDownMenu li a:hover, | ||
+ | div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a:hover, | ||
+ | div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a:hover { | ||
+ | background-color: #00b0e6; /* Selected item. */ | ||
+ | color: #FFFFFF; | ||
+ | } | ||
+ | div.MenuBar ul li:hover ul.DropDownMenu, | ||
+ | div.MenuBar ul li a:hover ul.DropDownMenu, | ||
+ | div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu, | ||
+ | div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu { | ||
+ | background-color: ButtonShadow; /* Sets the drop-down and side menus "effective border" color. */ | ||
+ | } | ||
+ | /*--------------------------------------------------------------------------------------- Widths */ | ||
+ | /* | ||
+ | |||
+ | /* | ||
+ | Menu Bar 1 | ||
+ | Drop-Down Menu #2 | ||
+ | */ | ||
+ | div.MenuBar#navi ul li:hover ul.DropDownMenu#MB1-DDM4, | ||
+ | div.MenuBar#navi ul li a:hover ul.DropDownMenu#MB1-DDM4, | ||
+ | div.MenuBar#navi ul li:hover ul.DropDownMenu#MB1-DDM4 li a, | ||
+ | div.MenuBar#navi ul li a:hover ul.DropDownMenu#MB1-DDM4 li a { | ||
+ | width: 11em; /* Drop-down menu width. */ | ||
+ | } | ||
+ | div.MenuBar#navi ul li:hover ul.DropDownMenu#MB1-DDM5, | ||
+ | div.MenuBar#navi ul li a:hover ul.DropDownMenu#MB1-DDM5, | ||
+ | div.MenuBar#navi ul li:hover ul.DropDownMenu#MB1-DDM5 li a, | ||
+ | div.MenuBar#navi ul li a:hover ul.DropDownMenu#MB1-DDM5 li a { | ||
+ | width: 12em; /* Drop-down menu width. */ | ||
+ | } | ||
+ | |||
+ | /*...............................................................................................*/ | ||
+ | /* | ||
+ | Menu Bar 1 | ||
+ | Drop-Down Menu #2 | ||
+ | Side Menu #1 | ||
+ | */ | ||
+ | div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM1, | ||
+ | div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM1 { | ||
+ | left: 15.5em !important; /* Places the side menu to the right of the drop-down menu. | ||
+ | Keep it sync with the drop-down menu width. */ | ||
+ | } | ||
+ | div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM1, | ||
+ | div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM1, | ||
+ | div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM1 li a, | ||
+ | div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM1 li a { | ||
+ | width: 10em; /* Side menu width. */ | ||
+ | } | ||
+ | /*...............................................................................................*/ | ||
+ | /* | ||
+ | Menu Bar 1 | ||
+ | Drop-Down Menu #2 | ||
+ | Side Menu #2 | ||
+ | */ | ||
+ | div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM2, | ||
+ | div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM2 { | ||
+ | left: 15.5em !important; /* Places the side menu to the right of the drop-down menu. | ||
+ | Keep it sync with the drop-down menu width. */ | ||
+ | } | ||
+ | div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM2, | ||
+ | div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM2, | ||
+ | div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM2 li a, | ||
+ | div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM2 li a { | ||
+ | width: 10em; /* Side menu width. */ | ||
+ | } | ||
+ | /*...............................................................................................*/ | ||
+ | /* | ||
+ | Menu Bar 1 | ||
+ | Drop-Down Menu #2 | ||
+ | Side Menu #3 | ||
+ | */ | ||
+ | div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM3, | ||
+ | div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM3 { | ||
+ | left: 15.5em !important; /* Places the side menu to the right of the drop-down menu. | ||
+ | Keep it sync with the drop-down menu width. */ | ||
+ | } | ||
+ | div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM3, | ||
+ | div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM3, | ||
+ | div.MenuBar#navi ul li:hover ul.DropDownMenu li:hover ul.SideMenu#MB1-DDM2-SM3 li a, | ||
+ | div.MenuBar#navi ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu#MB1-DDM2-SM3 li a { | ||
+ | width: 10em; /* Side menu width. */ | ||
+ | } | ||
+ | /*...............................................................................................*/ | ||
+ | |||
</style> | </style> | ||
</head> | </head> |
Revision as of 23:51, 6 July 2012
Caltech iGEM 2012