Team:UCSF/HumanPractice
From 2013.igem.org
(Difference between revisions)
(One intermediate revision not shown) | |||
Line 1: | Line 1: | ||
{{Template:UCSF/MainHeader}} | {{Template:UCSF/MainHeader}} | ||
+ | <html> | ||
+ | <head> | ||
+ | <!--CSS styles: global--> | ||
+ | <link rel='stylesheet' type='text/css' href="https://2012.igem.org/Team:Calgary/static/basicpageglobal.css?action=raw&ctype=text/css" /> | ||
+ | <style> | ||
+ | /*====== | ||
+ | Desktop Styling | ||
+ | ======*/ | ||
+ | |||
+ | /***Body styling***/ | ||
+ | h1{ | ||
+ | font-size: 2.5em; | ||
+ | } | ||
+ | h2{ | ||
+ | font-size: 1.8em; | ||
+ | } | ||
- | Human Practices Overview | + | h3{font-size: 1.4em; |
+ | } | ||
+ | |||
+ | #box1{ | ||
+ | width: 970px; | ||
+ | margin-top: -8px; | ||
+ | background: #fffff; | ||
+ | float: left; | ||
+ | padding-bottom: 10px; | ||
+ | margin-bottom: 5px; | ||
+ | } | ||
+ | #box1 h2{ | ||
+ | padding: 4px 4px 4px 4px; | ||
+ | } | ||
+ | #box1 p{ | ||
+ | padding: 0px 10px 0px 10px; | ||
+ | font-size: 1.1em; | ||
+ | } | ||
+ | |||
+ | #FredOscarFlag{ | ||
+ | display: block; | ||
+ | float: left; | ||
+ | width: 250px; | ||
+ | height:195px; | ||
+ | background: url('https://static.igem.org/mediawiki/2013/6/6b/UCSF2013_Logonew.png'); | ||
+ | background-position: top; | ||
+ | margin: 30px; | ||
+ | } | ||
+ | |||
+ | |||
+ | #box2{ | ||
+ | width: 968px; | ||
+ | background: #C68DD8; | ||
+ | float: left; | ||
+ | margin-bottom: 13px; | ||
+ | } | ||
+ | #box2 h2{ | ||
+ | padding: 20px 20px 20px 20px; | ||
+ | color: white; | ||
+ | } | ||
+ | #box2 p{ | ||
+ | padding: 0px 20px 0px 20px; | ||
+ | font-size: 1.1em; | ||
+ | color: white; | ||
+ | } | ||
+ | #box2 img{ | ||
+ | float: left; | ||
+ | margin: 15px; | ||
+ | height: 110px; | ||
+ | } | ||
+ | #box2:hover{ | ||
+ | background: #D79EE9; | ||
+ | } | ||
+ | |||
+ | /***positioning of elements in ZE EPIC BOX***/ | ||
+ | #epicbox{ | ||
+ | margin-top: 4px; | ||
+ | } | ||
+ | |||
+ | #boximgcontainer{ | ||
+ | float: left; | ||
+ | width: 644px; | ||
+ | height: 655px; | ||
+ | } | ||
+ | #boximgcontainer div{ | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | } | ||
+ | #orangebox{ | ||
+ | margin-bottom: 4px; | ||
+ | } | ||
+ | #orangebox .imgbox{ | ||
+ | width: 644px; | ||
+ | height: 215px; | ||
+ | top: 108px; | ||
+ | background: #F6A82D; | ||
+ | margin-bottom: 4px; | ||
+ | } | ||
+ | .oblank{ | ||
+ | width: 644px; | ||
+ | height: 104px; | ||
+ | background: #FFE485; | ||
+ | position: relative; | ||
+ | top: -219px; | ||
+ | } | ||
+ | #orangebox:hover .oblank, .oblank:hover{ | ||
+ | display: none; | ||
+ | } | ||
+ | #orangebox .iconcontainer{ | ||
+ | position: relative; | ||
+ | display: none; | ||
+ | left: auto; | ||
+ | top: -219px; | ||
+ | } | ||
+ | .iconbox div, .iconbox{ | ||
+ | width: 104px; | ||
+ | height: 104px; | ||
+ | margin-right: 4px; | ||
+ | } | ||
+ | a.obox1 div{ | ||
+ | background: #FFD35A; | ||
+ | } | ||
+ | a.obox2 div{ | ||
+ | background: #FECC44; | ||
+ | } | ||
+ | a.obox3 div{ | ||
+ | background: #F8C22E; | ||
+ | } | ||
+ | a.obox4 div{ | ||
+ | background: #F8B32E; | ||
+ | } | ||
+ | a.obox5 div{ | ||
+ | background: #F6A82D; | ||
+ | } | ||
+ | a.obox6 div{ | ||
+ | background: #F39808; | ||
+ | margin-right: 0; | ||
+ | } | ||
+ | #orangebox div:hover, #orangebox div.iconbox:hover div{ | ||
+ | background: #FFE44F; | ||
+ | } | ||
+ | #orangebox:hover .iconcontainer{ | ||
+ | display: block; | ||
+ | background: transparent; | ||
+ | } | ||
+ | |||
+ | |||
+ | #greenbox .imgbox{ | ||
+ | width: 320px; | ||
+ | height: 215px; | ||
+ | background: #58CD45; | ||
+ | } | ||
+ | .gblank{ | ||
+ | width: 320px; | ||
+ | height: 104px; | ||
+ | background: #B6FFA3; | ||
+ | position: relative; | ||
+ | top: 219px; | ||
+ | left: -320px; | ||
+ | } | ||
+ | #greenbox .iconcontainer{ | ||
+ | position: relative; | ||
+ | margin-top: 4px; | ||
+ | left: -999em; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | a.gbox1 div{ | ||
+ | background: #72E85B; | ||
+ | } | ||
+ | a.gbox2 div{ | ||
+ | background: #5BCD45; | ||
+ | } | ||
+ | a.gbox3 div{ | ||
+ | background: #4CC035; | ||
+ | } | ||
+ | a.gbox4 div{ | ||
+ | background: #44AF2F; | ||
+ | } | ||
+ | #greenbox div:hover, #greenbox div.iconbox:hover div{ | ||
+ | background: #94FF7D; | ||
+ | z-index: 99; /*hovers are not overridden by OSCAR boxes*/ | ||
+ | } | ||
+ | #greenbox:hover .gblank, .gblank:hover{ | ||
+ | display: none; | ||
+ | } | ||
+ | #greenbox:hover .iconcontainer{ | ||
+ | left: auto; | ||
+ | background: transparent; | ||
+ | } | ||
+ | |||
+ | #bluebox{ | ||
+ | position: relative; | ||
+ | top: -323px; | ||
+ | left: 320px; | ||
+ | } | ||
+ | #bluebox .imgbox{ | ||
+ | width: 320px; | ||
+ | height: 215px; | ||
+ | background: #5BB5E8; | ||
+ | margin-left: 4px; | ||
+ | } | ||
+ | .bblank{ | ||
+ | width: 320px; | ||
+ | height: 104px; | ||
+ | background: #C5F0F0; | ||
+ | position: relative; | ||
+ | top: 219px; | ||
+ | left: -320px; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | #bluebox .iconcontainer{ | ||
+ | position: relative; | ||
+ | margin-top: 4px; | ||
+ | left: -999em; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | a.bbox1 div{ | ||
+ | background: #1574AA; | ||
+ | } | ||
+ | a.bbox2 div{ | ||
+ | background: #2580B3; | ||
+ | } | ||
+ | a.bbox3 div{ | ||
+ | background: #3285B4; | ||
+ | } | ||
+ | a.bbox4 div{ | ||
+ | background: #4292BF; | ||
+ | } | ||
+ | a.bbox5 div{ | ||
+ | background: #50A2D0; | ||
+ | } | ||
+ | a.bbox6 div{ | ||
+ | background: #5BB5E8; | ||
+ | margin: 0; | ||
+ | } | ||
+ | #bluebox div:hover, #bluebox .iconbox:hover div{ | ||
+ | background: #7DD7FF; | ||
+ | z-index: 99; /*hovers are not overridden by FRED boxes*/ | ||
+ | } | ||
+ | #bluebox:hover .bblank, .bblank:hover{ | ||
+ | display: none; | ||
+ | } | ||
+ | #bluebox:hover .iconcontainer{ | ||
+ | left: -212px; | ||
+ | background: transparent; | ||
+ | } | ||
+ | |||
+ | #boxinfo{ | ||
+ | float: right; | ||
+ | position: relative; | ||
+ | width: 320px; | ||
+ | left: 3px; | ||
+ | background: #555555; | ||
+ | height: 650px; | ||
+ | margin-bottom: 12px; | ||
+ | } | ||
+ | #boxinfo h2{ | ||
+ | color: white; | ||
+ | padding: 20px 20px 0px; | ||
+ | } | ||
+ | #boxinfo p{ | ||
+ | color: white; | ||
+ | padding: 10px 20px 20px; | ||
+ | font-size: 1.2em; | ||
+ | } | ||
+ | /*initial boxinfo appearance settings*/ | ||
+ | #boxinfo div.orangebox, #boxinfo div.obox1, #boxinfo div.obox2, #boxinfo div.obox3, #boxinfo div.obox4, #boxinfo div.obox5, #boxinfo div.obox6{ | ||
+ | display: none; | ||
+ | } | ||
+ | #boxinfo div.greenbox, #boxinfo div.gbox1, #boxinfo div.gbox2, #boxinfo div.gbox3, #boxinfo div.gbox4, | ||
+ | #boxinfo div.bluebox, #boxinfo div.bbox1, #boxinfo div.bbox2, #boxinfo div.bbox3, #boxinfo div.bbox4, #boxinfo div.bbox5{ | ||
+ | position: relative; | ||
+ | padding-top: 320px; | ||
+ | display: none; | ||
+ | } | ||
+ | /*bold colours for FRED and OSCAR*/ | ||
+ | #boxinfo div.greenbox b{ | ||
+ | color: #72E85B; | ||
+ | } | ||
+ | #boxinfo div.bluebox b{ | ||
+ | color: #5EB7F0; | ||
+ | } | ||
+ | .threeboxes{ | ||
+ | clear: both; | ||
+ | position: relative; | ||
+ | width: 968px; | ||
+ | margin-bottom: 12px; | ||
+ | } | ||
+ | .threeboxes a, .threeboxes a div{ | ||
+ | width: 320px; | ||
+ | height: 155px; | ||
+ | float: left; | ||
+ | margin-bottom: 12px; | ||
+ | } | ||
+ | .threeboxes div h2{ | ||
+ | padding: 20px 20px 0px; | ||
+ | position: relative; | ||
+ | top: -155px; | ||
+ | } | ||
+ | .threeboxes div p{ | ||
+ | padding: 0px 20px; | ||
+ | position: relative; | ||
+ | top: -155px; | ||
+ | } | ||
+ | #greybox1, #greybox6{ | ||
+ | margin-right: 4px; | ||
+ | background: #58CD45; | ||
+ | } | ||
+ | #greybox1:hover, #greybox6:hover{ | ||
+ | background: #94FF7D; | ||
+ | } | ||
+ | #greybox2, #greybox5{ | ||
+ | margin-right: 4px; | ||
+ | background: #5BB5E8; | ||
+ | } | ||
+ | #greybox2:hover, #greybox5:hover{ | ||
+ | background: #7DD7FF; | ||
+ | } | ||
+ | #greybox3, #greybox4{ | ||
+ | margin: 0; | ||
+ | background: #F6A82D; | ||
+ | } | ||
+ | #greybox3:hover, #greybox4:hover{ | ||
+ | background: #FFE44F; | ||
+ | } | ||
+ | |||
+ | #sponsorsbox{ | ||
+ | clear: both; | ||
+ | position: relative; | ||
+ | width: 968px; | ||
+ | margin: 4px 0px; | ||
+ | background: #EEEEEE; | ||
+ | } | ||
+ | #sponsorsbox h2{ | ||
+ | padding: 20px 20px 0px 20px; | ||
+ | } | ||
+ | #sponsorsbox p{ | ||
+ | padding: 0px 20px; | ||
+ | } | ||
+ | #sponsorsbox table{ | ||
+ | width: 950px; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | background: #EEEEEE; | ||
+ | } | ||
+ | #sponsorsbox td{ | ||
+ | padding: 15px 0px; | ||
+ | width: 300px; | ||
+ | } | ||
+ | #sponsorsbox img{ | ||
+ | display: block; | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <h3>Human Practices Overview</h3> | ||
+ | <h2>Human Practices Overview</h2> | ||
+ | <h1>Human Practices Overview</h1> |
Latest revision as of 18:47, 12 September 2013