Difference between revisions of "Template:Virginia/body"

 
(549 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 +
{{Virginia/menubar}}
 +
{{Virginia/stylesheet}}
 
<html>
 
<html>
−
 
+
<head>
 +
<meta name=viewport content="width=device-width, initial-scale=1">
 
<style>
 
<style>
  
Line 7: Line 10:
 
#sideMenu, #top_title {display:none;}
 
#sideMenu, #top_title {display:none;}
 
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
 
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
−
body {background-color:green; }
+
body {background-color:#ffffff;}
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
 
/********************************* MENU ********************************/
 
/********************************* MENU ********************************/
  
−
 
+
/*Contains the entire page and everything in it*/
 
.maindiv {
 
.maindiv {
−
background-color:green;
+
background-color:#ffffff;
 +
min-height:98vh;
 
width:100%;
 
width:100%;
−
top:0;
 
−
bottom:0;
 
 
position:absolute;
 
position:absolute;
 
display:block;
 
display:block;
 
}
 
}
  
−
#headerspace {
+
/*Space reserved for the menubar*/
−
background-color:blue;
+
#menuspace {
−
width:500px;
+
background-color:none;
−
height:50px;
+
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:#235c81;
 +
}
 +
 
 +
.refbox {
 
position:absolute;
 
position:absolute;
−
margin:auto;
+
bottom:26px;
−
border-radius:5px;
+
left:50%;
 +
margin-left:-117px;
 +
width:260px;
 +
padding:10px 15px 10px 15px;
 +
background-color:#235c81;
 +
color:white;
 +
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;
 +
}
  
−
</style>
+
/*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;
 +
text-align:center;
 +
font-family:Lato, sans-serif;
 +
font-size:15px;
 +
margin-top:3px;
 +
margin-left:10px;
 +
margin-bottom:2px;
 +
line-height:23px;
 +
}
  
−
<div class="maindiv">
+
.capleft {
−
<div id="headerspace">
+
float:left;
−
<h1 style="text-align:center">This is where the navigation bar will go!</h1>
+
padding:15px 15px 4px 15px;
−
</div>
+
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;
 +
 
 +
z-index:10;
 +
}
 +
 +
div.project4{position: absolute;
 +
    top: 425px;
 +
    right: 550px;
 +
    width: 175px;
 +
    height: 175px;
 +
   
 +
z-index:10;
 +
}
 +
 +
div.project5{position: absolute;
 +
    top: 640px;
 +
    right: 575px;
 +
    width: 175px;
 +
    height: 175px;
 +
 
 +
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: 150px;
 +
    right: -10px;
 +
    width: 400px;
 +
    height: 100px;
 +
   
 +
}
 +
 +
div.fox2{position: absolute;
 +
    top: 280px;
 +
    right: 790px;
 +
    width: 300px;
 +
    height: 100px;
 +
   
 +
   
 +
}
 +
 +
div.fox3{position: absolute;
 +
    top: 655px;
 +
    right: 700px;
 +
    width: 300px;
 +
    height: 100px;
 +
   
 +
   
 +
}
 +
 +
div.fox4{position: absolute;
 +
    top: 470px;
 +
    right: 220px;
 +
    width: 300px;
 +
    height: 100px;
 +
 +
   
 +
}
 +
 +
div.fox5{position: absolute;
 +
    top: 90px;
 +
    right: 550px;
 +
    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>
  
−
</div>
 
 
</html>
 
</html>

Latest revision as of 00:42, 20 October 2016