Line 1: | Line 1: | ||
− | {{Virginia/ | + | {{Virginia/menubar}} |
+ | {{Virginia/stylesheet}} | ||
<html> | <html> | ||
− | < | + | <head> |
+ | <meta name=viewport content="width=device-width, initial-scale=1"> | ||
+ | <style> | ||
+ | /********************************* DEFAULT WIKI SETTINGS ********************************/ | ||
− | + | #sideMenu, #top_title {display:none;} | |
+ | #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;} | ||
+ | body {background-color:#ffffff;} | ||
+ | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | ||
− | + | /********************************* MENU ********************************/ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | /*Contains the entire page and everything in it*/ | |
− | + | .maindiv { | |
+ | background-color:#ffffff; | ||
+ | min-height:98vh; | ||
+ | width:100%; | ||
+ | position:absolute; | ||
+ | display:block; | ||
+ | } | ||
− | + | /*Space reserved for the menubar*/ | |
+ | #menuspace { | ||
+ | background-color:none; | ||
+ | width:1200px; | ||
+ | height:48px; | ||
+ | margin:0 auto; | ||
+ | } | ||
− | |||
− | |||
− | |||
+ | /*All of the text, images, etc. of our page goes in this div*/ | ||
+ | .container { | ||
+ | /*Padding and margin are a trick to prevent margins collapsing*/ | ||
+ | padding-top:1px; | ||
+ | padding-bottom:1px; | ||
− | + | margin:9px auto 14px auto; | |
− | + | position:relative; | |
− | + | display:block; | |
− | + | background-color:white; | |
+ | width:1200px; | ||
+ | min-height:80vh; | ||
+ | } | ||
+ | /*Image section at the top of the page*/ | ||
+ | .imagearea { | ||
+ | width:100%; | ||
+ | text-align:center; | ||
+ | height:300px; | ||
+ | background-color:white; | ||
+ | margin: -1px auto 15px auto; | ||
+ | } | ||
+ | /*When text is used in the imagearea*/ | ||
+ | .imagearea h1 { | ||
+ | font-size:110px; | ||
+ | text-align:center; | ||
+ | color:white; | ||
+ | } | ||
+ | /*Specifications for image at top of page*/ | ||
+ | .mainimage { | ||
+ | height:300px; | ||
+ | } | ||
+ | /*Page title*/ | ||
+ | .pagetitle { | ||
+ | margin:0 0 20px 50px; | ||
+ | width:1170px; | ||
+ | height:30px; | ||
+ | } | ||
+ | |||
+ | /*Box for content on page*/ | ||
+ | .content { | ||
+ | width:1100px; | ||
+ | min-height:100px; | ||
+ | margin:25px auto 25px 50px; | ||
+ | padding-bottom: 35px; | ||
+ | display:inline-block; | ||
+ | } | ||
+ | |||
+ | /*Paragraph styling*/ | ||
+ | .p { | ||
+ | font-family:Sspr; | ||
+ | font-size:17px; | ||
+ | } | ||
+ | /*Paragraph title styling*/ | ||
+ | .ptitle { | ||
+ | font-family:Lato, sans-serif; | ||
+ | font-size:24px; | ||
+ | font-weight:700; | ||
+ | text-align:left; | ||
− | + | } | |
− | + | ||
− | + | .stitle { | |
− | + | font-family:Aleo; | |
− | + | font-size:18px; | |
+ | font-weight:700; | ||
− | + | } | |
+ | .f { | ||
+ | font-family:Lato, sans-serif; | ||
+ | font-size:15px; | ||
+ | text-align:center; | ||
+ | } | ||
+ | /*Reference box formatting*/ | ||
+ | .references { | ||
+ | position:relative; | ||
+ | color:blue; | ||
+ | } | ||
+ | .refbox { | ||
+ | position:absolute; | ||
+ | bottom:26px; | ||
+ | left:50%; | ||
+ | margin-left:-117px; | ||
+ | width:260px; | ||
+ | padding:10px 15px 10px 15px; | ||
+ | background-color:#99d6ff; | ||
+ | color:black; | ||
+ | visibility:hidden; | ||
+ | font-size:12px; | ||
+ | } | ||
+ | .references:hover .refbox { | ||
+ | visibility:visible; | ||
+ | } | ||
− | + | .references:hover { | |
− | + | text-decoration:underline; | |
− | + | } | |
+ | /*Bottom arrow on refbox*/ | ||
+ | .references .refbox::after { | ||
+ | content:" "; | ||
+ | position:absolute; | ||
+ | top:100%; | ||
+ | left:112px; | ||
+ | border-width:5px; | ||
+ | border-style:solid; | ||
+ | border-color:#99d6ff transparent transparent transparent; | ||
+ | } | ||
− | + | /*Image formatting*/ | |
− | + | .floatright { | |
− | + | float:right; | |
+ | background-color:#cce5ff; | ||
+ | padding:15px; | ||
+ | margin-left:10px; | ||
+ | margin-top:3px; | ||
+ | margin-bottom:5px; | ||
+ | } | ||
+ | .floatleft { | ||
+ | float:left; | ||
+ | background-color:#cce5ff; | ||
+ | padding:15px; | ||
+ | margin-right:10px; | ||
+ | margin-top:3px; | ||
+ | margin-bottom:5px; | ||
+ | } | ||
+ | .capright { | ||
+ | float:right; | ||
+ | padding:15px 15px 4px 15px; | ||
+ | background-color:#cce5ff; | ||
+ | text-align:center; | ||
+ | font-family:Lato, sans-serif; | ||
+ | font-size:15px; | ||
+ | margin-top:3px; | ||
+ | margin-left:10px; | ||
+ | margin-bottom:2px; | ||
+ | line-height:23px; | ||
+ | } | ||
+ | .capleft { | ||
+ | float:left; | ||
+ | padding:15px 15px 4px 15px; | ||
+ | background-color:#cce5ff; | ||
+ | text-align:center; | ||
+ | font-family:Lato, sans-serif; | ||
+ | font-size:15px; | ||
+ | margin-top:3px; | ||
+ | margin-right:10px; | ||
+ | margin-bottom:2px; | ||
+ | line-height:23px; | ||
+ | } | ||
− | + | /*Footer*/ | |
+ | .footerspace { | ||
+ | position:fixed; | ||
+ | background-color:#235c81; | ||
+ | left:50%; | ||
+ | margin-left:-600px; | ||
+ | width:1200px; | ||
+ | height:35px; | ||
+ | bottom:-1px; | ||
+ | z-index:50; | ||
+ | } | ||
− | + | .footerright { | |
+ | float:right; | ||
+ | margin-right:10px; | ||
+ | } | ||
+ | .footerleft { | ||
+ | float:left; | ||
+ | margin-left:10px; | ||
+ | } | ||
+ | .footerleft, .footerright { | ||
+ | margin-top:7px; | ||
+ | text-decoration:none; | ||
+ | font-family:Lato, sans-serif; | ||
+ | font-size:17px; | ||
+ | color:white; | ||
+ | } | ||
− | + | .footerleft:hover, .footerright:hover { | |
+ | text-decoration:underline; | ||
+ | } | ||
− | + | .footerleft:link, .footerright:link, .footerleft:visited, .footerright:visited { | |
+ | color:white; | ||
+ | } | ||
+ | /*Anders' attempt at making clickable links over the p&p infographic*/ | ||
− | + | div.abs1{position: absolute; | |
+ | top: 75px; | ||
+ | right: 875px; | ||
+ | width: 120px; | ||
+ | height: 140px; | ||
+ | } | ||
− | + | div.abs2{position: absolute; | |
+ | top: 10px; | ||
+ | right: 530px; | ||
+ | width: 150px; | ||
+ | height: 100px; | ||
+ | border: none; | ||
+ | z-index:10; | ||
+ | } | ||
+ | div.abs3{position: absolute; | ||
+ | top: 95px; | ||
+ | right: 235px; | ||
+ | width: 120px; | ||
+ | height: 175px; | ||
+ | } | ||
+ | div.abs4{position: absolute; | ||
+ | top: 340px; | ||
+ | right: 195px; | ||
+ | width: 150px; | ||
+ | height: 100px; | ||
+ | } | ||
− | + | div.abs5{position: absolute; | |
+ | top: 548px; | ||
+ | right: 200px; | ||
+ | width: 155px; | ||
+ | height: 135px; | ||
+ | } | ||
− | + | div.abs6{position: absolute; | |
− | + | top: 585px; | |
+ | right: 850px; | ||
+ | width: 100px; | ||
+ | height: 145px; | ||
+ | } | ||
+ | div.abs7{position: absolute; | ||
+ | top: 670px; | ||
+ | right: 420px; | ||
+ | width: 260px; | ||
+ | height: 107px; | ||
+ | } | ||
+ | div.public{position: absolute; | ||
+ | top: 560px; | ||
+ | right: 715px; | ||
+ | width: 300px; | ||
+ | height: 300px; | ||
+ | border: none; | ||
+ | } | ||
− | + | div.outreach{position: absolute; | |
+ | top: 560px; | ||
+ | right: 120px; | ||
+ | width: 300px; | ||
+ | height: 300px; | ||
+ | border: none; | ||
+ | } | ||
− | |||
− | |||
+ | div.project1{position: absolute; | ||
+ | top: 70px; | ||
+ | right: 350px; | ||
+ | width: 175px; | ||
+ | height: 175px; | ||
+ | border:none; | ||
+ | z-index:10; | ||
+ | } | ||
− | + | div.project2{position: absolute; | |
− | + | top: 190px; | |
+ | right: 515px; | ||
+ | width: 175px; | ||
+ | height: 175px; | ||
+ | border: none; | ||
+ | z-index:10; | ||
+ | } | ||
− | + | div.project3{position: absolute; | |
+ | top: 260px; | ||
+ | right: 720px; | ||
+ | width: 175px; | ||
+ | height: 175px; | ||
+ | border: none; | ||
+ | z-index:10; | ||
+ | } | ||
− | + | div.project4{position: absolute; | |
+ | top: 425px; | ||
+ | right: 550px; | ||
+ | width: 175px; | ||
+ | height: 175px; | ||
+ | border: none; | ||
+ | z-index:10; | ||
+ | } | ||
− | + | div.project5{position: absolute; | |
− | + | top: 640px; | |
+ | right: 575px; | ||
+ | width: 175px; | ||
+ | height: 175px; | ||
+ | border: none; | ||
+ | z-index:10; | ||
+ | } | ||
− | |||
− | + | div.policy{position: absolute; | |
+ | top: 340px; | ||
+ | right: 715px; | ||
+ | width: 300px; | ||
+ | height: 300px; | ||
+ | border: none; | ||
+ | } | ||
− | + | div.industry{position: absolute; | |
+ | top: 340px; | ||
+ | right: 190px; | ||
+ | width: 300px; | ||
+ | height: 300px; | ||
+ | border: none; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | div.fox1{position: absolute; | |
− | + | top: 120px; | |
+ | right: 50px; | ||
+ | width: 300px; | ||
+ | height: 100px; | ||
+ | |||
+ | } | ||
+ | |||
+ | div.fox2{position: absolute; | ||
+ | top: 280px; | ||
+ | right: 760px; | ||
+ | width: 300px; | ||
+ | height: 100px; | ||
+ | |||
+ | } | ||
+ | |||
+ | div.fox3{position: absolute; | ||
+ | top: 690px; | ||
+ | right: 660px; | ||
+ | width: 300px; | ||
+ | height: 100px; | ||
+ | |||
+ | } | ||
+ | |||
+ | div.fox4{position: absolute; | ||
+ | top: 470px; | ||
+ | right: 210px; | ||
+ | width: 300px; | ||
+ | height: 100px; | ||
+ | |||
+ | } | ||
+ | |||
+ | div.fox5{position: absolute; | ||
+ | top: 120px; | ||
+ | right: 560px; | ||
+ | width: 300px; | ||
+ | height: 100px; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .fox{ | ||
+ | font-family:Aleo; | ||
+ | font-size:20px; | ||
+ | font-weight:100; | ||
+ | text-align:left; | ||
+ | color:#235c81; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .3col{column-count:3;} | ||
+ | |||
+ | #vgemcollaboration { | ||
+ | background-image:url('https://static.igem.org/mediawiki/2016/d/de/T--Virginia--collabopen.png'); | ||
+ | background-size:180px 220px; /*Adjust background-size and the width and height properties here if you wish to resize the icon*/ | ||
+ | width:180px; | ||
+ | height:220px; | ||
+ | z-index:20; | ||
+ | padding:1px | ||
+ | background-color:#ffffff; | ||
+ | margin-top:2px; | ||
+ | margin-left:2px; | ||
+ | margin-bottom:2px; | ||
+ | top:200px; | ||
+ | } | ||
+ | |||
+ | #vgemcollaboration:hover{ | ||
+ | background-image:url('https://static.igem.org/mediawiki/2016/a/a5/T--Virginia--collabclosed.png'); | ||
+ | } | ||
+ | |||
+ | #vgemcollaboration a{ | ||
+ | display:inline-block; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | </style> | ||
+ | </head> | ||
− | |||
− | |||
− | |||
</html> | </html> |
Revision as of 04:57, 19 October 2016