Template:Team:DukeHomePage/CSS

From 2014.igem.org

(Difference between revisions)
 
(267 intermediate revisions not shown)
Line 1: Line 1:
 +
<html xmlns="http://www.w3.org/1999/xhtml">
 +
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
Line 5: Line 9:
<style media="screen" type="text/css">
<style media="screen" type="text/css">
-
/*hide default igem banner and reformat style into blank slate*/
+
/*hide default igem banner and reformat style into blank slate - modified from UVA 2013*/
-
#globalWrapper {width: 100%;}
+
-
#top-section {width: 100%; height:0px; border:none;}
+
-
#p-logo {display:none; visibility:hidden;}
+
-
#search-controls {display:none;}
+
-
#menubar a {color:#FFFFFF;}
+
-
#menubar a:hover{text-decoration:none; color:#52749C;}
+
-
.left-menu {background-color:#FFFFFF; margin:0px 0px 0px 0px; padding:0;}
+
-
.left-menu ul {background-color:#FFFFFF; margin:0; padding:0;}
+
-
.right-menu ul li a {background-color:#CCCCCC;}
+
-
.printfooter {display:none;}
+
-
#footer-box {border:none;}
+
-
#catlinks {display:none;}
+
-
.firstHeading {display:none;}
+
-
#content {width: 100%; border:none;}
+
-
#bodyContent {border:none;}
+
-
</style>
+
-
<style media="screen" type="text/css">
+
#globalWrapper {
-
@font-face {
+
width: 100%;
-
font-family: 'Raleway';
+
-
src: url('<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Raleway:400,700,200,300,900,800" rel="stylesheet" type="text/css">') format('woff');
+
}
}
-
.igemlogo {
+
 
-
position:absolute;
+
#top-section {
-
z-index:200;
+
width: 100%;
-
padding:20px;
+
height:0px;
 +
border:none;
}
}
-
.slidingpics {
+
 
-
background-color: #000;
+
#p-logo {
-
clear: both;
+
display:none;
-
height: 420px;
+
visibility:hidden;
-
margin-left: auto;
+
-
margin-left: auto;
+
-
padding:10px;
+
-
position:relative;
+
-
z-index:1;
+
-
        overflow:hidden;
+
-
        padding-bottom:30px;
+
}
}
-
.fourfocus {
+
 
-
background-color: #000;
+
#search-controls {
-
color: white;
+
display:none;
-
padding: 15px;
+
-
height: 380px;
+
-
margin-left: auto;
+
-
margin-right: auto;
+
-
padding-left:50px;
+
-
        overflow:hidden;
+
}
}
-
.fourfocus p {
+
#menubar a {
-
color:#6A6A6A;
+
color:#000000;
}
}
-
.fourfocus h2 {
+
 
-
color: #FFFFFF;
+
#menubar a:hover{
 +
text-decoration:none;
 +
color:#fff;
}
}
-
.bottom {
+
 
-
background-color: #000;
+
 
-
color: #FFFFFF;
+
.left-menu ul {
-
padding: 35px 15px 15px 15px;
+
background-color:#000000;
-
height: 700px;
+
margin:0;
-
clear: both;
+
padding:0;
-
border-top-width: 1px;
+
-
border-top-style: solid;
+
-
border-top-color: rgba(153,153,153,0.7);
+
}
}
-
.footer {
+
 
-
background-color: #000000;
+
.right-menu ul li a {
-
padding: 5px;
+
background-color:#000;
-
text-align: center;
+
-
display: block;
+
-
font-size: 12px;
+
-
color: #FFFFFF;
+
}
}
-
.footer h3 {
+
 
-
font-size: 18px;
+
.printfooter {
-
text-transform: capitalize;
+
display:none;
-
text-align: center;
+
-
border-bottom-width: thin;
+
-
border-bottom: 1px solid rgba(255,255,255,0.3);
+
-
color:#FFFFFF;
+
}
}
-
.footer a {
+
 
-
text-decoration:none;
+
#footer-box {
-
color: #E94730;
+
display:none;
}
}
-
.footer a:hover {
+
 
-
color: blue;
+
#catlinks {
 +
display:none;
}
}
-
#picbox {
+
 
-
margin-left:auto;
+
.firstHeading {
-
margin-right:auto;
+
display:none;
-
width:1000px;
+
-
padding-top:50px;
+
-
        overflow:hidden;
+
}
}
-
#boxes {
+
 
-
width: 1000px;
+
#content {
-
margin-left: auto;
+
width: 100%;  
-
margin-right:auto;
+
border:none;
-
        overflow:hidden;
+
background-color:#000;
}
}
-
#fbox1 {
+
</style>
-
float: left;
+
 
-
width: 235px;
+
 
-
margin-right: 20px;
+
<!--BEGIN HERE: This comment marks where actual coding on the main part of the page begins.-->
-
text-align:center;
+
 
-
margin-left:auto;
+
<style media="screen" type="text/css">
 +
 
 +
/*This "bodyContent" style rule controls what the formatting of the page looks like, not body, for some reason. MediaWiki logic, amirite?*/
 +
#bodyContent {
 +
border:none;
 +
background-color:#000;
 +
font-color:#fff;
 +
font-size: 1em;
 +
font-family: Futura, Helvetica;
}
}
-
#fbox2 {
+
 
-
float: left;
+
#bodyContent a {
-
width: 235px;
+
text-decoration:none;
-
margin-right: 20px;
+
color:#fff;
-
text-align:center;
+
}
}
-
#fbox3 {
+
 
-
float: left;
+
 
-
width: 235px;
+
/*This formats the stuff at the bottom. */
-
text-align:center;
+
body {
-
margin-right: 20px;
+
background-color:#000;
}
}
-
#fbox4 {
+
 
-
float: left;
+
/* Title font */
-
width: 235px;
+
.big {
-
text-align:center;
+
font-size: 4em;
 +
color:#fff;
 +
text-transform:uppercase;
 +
text-align:center;
 +
float:center;
 +
padding-bottom:0px;
}
}
-
.topbanner {
+
 
-
background-color: #000000;
+
/* Makes the square buttons */     
-
padding: 5px;
+
.sq-button {
-
height: 250px;
+
-
position:relative;
+
-
z-index:100;
+
-
}
+
-
#logo {
+
-
height: 110px;
+
-
margin: 30px auto 0px auto;
+
-
}
+
-
#VGEM, #logo p {
+
-
margin: 0;
+
-
padding: 0;
+
-
}
+
-
#VGEM {
+
-
text-align: center;
+
-
text-transform: uppercase;
+
-
color:#FFFFFF;
+
-
}
+
-
#VGEM span {
+
-
color: #E94730;
+
-
}
+
-
#logo p#VGEM a {
+
-
font-size: 60px;
+
-
color: #FFF;
+
-
        font-weight:400;
+
-
}
+
-
#logo p {
+
-
text-align: center;
+
-
text-transform: uppercase;
+
-
font-size: 25px;
+
-
font-family: 'Raleway', sans-serif;
+
-
color: #595959;
+
-
}
+
-
#logo p a {
+
-
color:#595959;
+
-
}
+
-
#logo a {
+
-
border: none;
+
-
background: none;
+
-
text-decoration: none;
+
-
color: #1F1F1F;
+
-
}
+
-
#menu11 ul {
+
-
text-transform: uppercase;
+
-
font-size: 18px;
+
-
line-height: 1.2em;
+
-
clear: both;
+
-
margin-left: auto;
+
-
    margin-right:auto;
+
-
    height:70px;
+
-
    width:900px;       
+
-
}
+
-
#menu11 ul li{
+
     display:block;
     display:block;
 +
    width:100px;
 +
    height:100px;
 +
    border:none;
 +
    line-height:50px;
 +
    color:#f5f5f5;
 +
    text-align:center;
     text-decoration:none;
     text-decoration:none;
-
     padding:0px 0px 0px 10px;
+
     opacity: 1;
-
     width:150px;
+
     background: #0736A4;
-
     height:55px;
+
     font-size:16px;
-
     border-left:6px dotted #fff;
+
     font-weight:bold;
-
     float:left;
+
     overflow:hidden;
 +
    -webkit-transition: all 0.5s ease;
 +
    -moz-transition: all 0.5s ease;
 +
    -o-transition: all 0.5s ease;
 +
/*margins must be half of the change in size*/   
 +
    margin: 5px 5px;
 +
    line-height:200%;
}
}
-
#menu11 ul li span{
+
 
-
     display:block;
+
.sq-button span {
 +
     display: table-cell;
 +
    text-align: center;
 +
    vertical-align: middle;
}
}
-
#menu11 ul li span.title{
+
 
-
    color:#fff;
+
.sq-button:hover {
-
list-style-type: none;
+
     background-color: #0000ff;
-
}
+
-
#menu11 ul li:hover{
+
-
     border-left:10px dotted #E94730;
+
-
}
+
-
#menu11 ul li:hover span.title{
+
-
list-style-type: none;
+
-
}
+
-
#menu11 ul li span.text{
+
-
color: #325281;
+
-
font-size: 14px;
+
-
letter-spacing: 0px;
+
-
visibility: hidden;
+
-
line-height: 0px;
+
-
padding-top: 8px;
+
-
list-style-type: square;
+
-
        background-color: #000000;
+
-
        padding-bottom:2px;
+
-
        padding-left:2px;
+
-
        border-radius:10px;
+
-
}
+
-
#menu11 ul li:hover span.text{
+
-
    visibility:visible;
+
-
}
+
-
#menu11 ul li:hover span.text a{
+
-
    text-decoration:none;
+
-
color:#66CCFF;
+
-
}
+
-
#images {
+
-
    width: 900px;
+
-
    height: 350px;
+
-
    overflow: hidden;
+
-
    position: relative;
+
-
    margin: 20px auto;
+
-
    }
+
-
    #images img {
+
-
    width: 900px;
+
-
    height: 350px;
+
-
    position: absolute;
+
-
    top: 0;
+
-
    left: -400px;
+
-
    z-index: 2;
+
-
    opacity: 0;
+
-
    transition: all linear 500ms;
+
-
    -o-transition: all linear 500ms;
+
-
    -moz-transition: all linear 500ms;
+
-
    -webkit-transition: all linear 500ms;
+
-
    }
+
-
    #images img:target {
+
-
    left: 0;
+
-
    z-index: 9;
+
     opacity: 1;
     opacity: 1;
-
     }
+
     width: 110px;
-
    #images img:first-child {
+
     height: 110px;
-
     left: 0;
+
/*margins must be negative half of the change in size*/
-
     opacity:.9;
+
     margin: -5px -5px;
-
    z-index:8;
+
/* Glow effect */
-
    }
+
  -webkit-box-shadow: 0px 0px 20px rgba(7, 54, 164, 0);  
-
    #slider {
+
  -moz-box-shadow: 0px 0px 20px rgba(7, 54, 164, 0;  
-
    width:200px;
+
  box-shadow: 0px 0px 20px rgba(7, 54, 164, 0);
-
    margin-left:auto;
+
-
    margin-right:auto;
+
}
}
-
    #slider a {
+
 
-
    text-decoration: none;
+
/* So the logo is out of the way */
-
    background: #E3F1FA;
+
.logo {
-
    border: 1px solid #C6E4F2;
+
z-index:200;
-
    padding: 4px 6px;
+
padding:20px;
-
    color: #222;
+
margin: 0px 100px 0px 0px;
-
    }
+
-
    #slider a:hover {
+
-
    background: #C6E4F2;
+
-
    }
+
-
/** WRAPPER */
+
-
#featured-wrapper {
+
-
overflow: hidden;
+
-
width:1000px;
+
-
padding: 25px 50px;
+
-
background: #E54732;
+
-
color: #2D2D2D;
+
-
margin-left:auto;
+
-
margin-right:auto;
+
}
}
-
#btitle
+
 
-
{
+
.main {
-
margin-bottom: 30px;
+
position:relative;
-
text-transform: uppercase;
+
z-index:100;
-
font-weight: 300;
+
padding:20px;
-
font-size: 22px;
+
text-align:center;
-
color: #FFF;
+
}
}
-
#featured-wrapper span
+
 
-
{
+
img.mainpic {
-
font-size: 18px !important;
+
display:block;
-
color: #323232;
+
text-align:center;
-
}
+
float:center;
-
#sponsors
+
padding-bottom: 10px;
-
{
+
-
float: left;
+
-
width: 330px;
+
-
margin-right: 24px;
+
-
}
+
-
#sponsors .style4
+
-
{
+
-
padding-top: 10px;
+
-
}
+
-
#dates
+
-
{
+
-
float: left;
+
-
width: 370px;
+
-
padding: 0px 20px;
+
-
}
+
-
#updates
+
-
{
+
-
float: left;
+
-
width: 200px;
+
-
}
+
-
p, ol, ul {
+
-
margin-top: 0px;
+
-
}
+
-
p {
+
-
line-height: 180%;
+
-
}
+
-
a {
+
-
color: #0000FF;
+
-
}
+
-
a:hover {
+
-
text-decoration: none;
+
-
}
+
-
a img {
+
-
border: none;
+
-
}
+
-
ul.style3
+
-
{
+
-
margin: 0;
+
-
padding: 0;
+
-
overflow: hidden;
+
-
list-style: none;
+
-
color: #6c6c6c
+
-
}
+
-
ul.style3 li
+
-
{
+
-
padding: 16px 0px 0px 0px;
+
-
margin: 0 0 1em 0;
+
-
}
+
-
ul.style3 p
+
-
{
+
-
margin: 0;
+
-
}
+
-
ul.style3 a
+
-
{
+
-
display: block;
+
-
text-decoration: none;
+
-
color: #2D2D2D;
+
-
}
+
-
ul.style3 a:hover
+
-
{
+
-
text-decoration: underline;
+
-
}
+
-
ul.style3 h3
+
-
{
+
-
padding: 10px 0px 5px 0px;
+
-
text-transform: uppercase;
+
-
font-size: 14px;
+
-
font-weight: 300;
+
-
color: #FFFFFF;
+
-
}
+
-
ul.style3 .first
+
-
{
+
-
padding-top: 0;
+
-
background: none;
+
-
}
+
-
ul.style3 .date
+
-
{
+
-
float: left;
+
-
position: relative;
+
-
width: 66px;
+
-
height: 64px;
+
-
margin: 0.5em 1.5em 0em 0.5em;
+
-
padding: 20px 0em 0em 0em;
+
-
background: #262626;
+
-
border-radius: 5px;
+
-
box-shadow: 0px 0px 0px 5px rgba(255,255,255,0.1);
+
-
line-height: normal;
+
-
text-align: center;
+
-
text-transform: uppercase;
+
-
text-shadow: 0px 1px 0px rgba(0,0,0,.2);
+
-
font-size: 12px;
+
-
font-weight: 400;
+
-
color: #FFF;
+
-
}
+
-
ul.style3 .date:after
+
-
{
+
-
content: '';
+
-
display: block;
+
-
position: absolute;
+
-
left: 0;
+
-
top: 0;
+
-
width: 100%;
+
-
height: 100%;
+
-
border-radius: 6px;
+
-
}
+
-
ul.style3 .date b
+
-
{
+
-
margin: 0;
+
-
padding: 0;
+
-
display: block;
+
-
margin-top: -5px;
+
-
font-size: 24px;
+
-
font-weight: 700;
+
-
color: #FFFFFF;
+
-
}
+
-
ul.style3 .date a
+
-
{
+
-
color: #FFFFFF !important;
+
-
}
+
-
ul.style3 .date a:hover
+
-
{
+
-
text-decoration: none;
+
-
}
+
-
ul.style4
+
-
{
+
-
margin: 0px;
+
-
padding: 0px;
+
-
list-style: none;
+
-
}
+
-
ul.style4 li
+
-
{
+
-
padding: 10px 0px 20px 0px;
+
-
border-top: 1px solid rgba(255,255,255,0.3);
+
-
}
+
-
ul.style4 a
+
-
{
+
-
color: #2D2D2D;
+
-
text-decoration: underline;
+
-
}
+
-
ul.style4 .first
+
-
{
+
-
padding-top: 0px;
+
-
border-top: none;
+
-
}
+
-
/* Button Style 1 */
+
-
.button-style {
+
-
display: inline-block;
+
-
margin-top: 20px;
+
-
padding: 7px 20px;
+
-
background: #272727;
+
-
border-radius: 5px;
+
-
text-decoration: none;
+
-
text-transform: uppercase;
+
-
color: #FFFFFF;
+
-
}
+
-
.button-style a {
+
-
color:#66CCFF;
+
-
}
+
-
.button-style-alt
+
-
{
+
-
background: #E94730;
+
-
padding: 15px 20px;
+
-
font-size: 14px;
+
-
font-weight: 600;
+
}
}
 +
</style>
</style>
 +
 +
 +
 +
 +
</head>
</head>
-
 
+
<body>
 +
<div class="main">
 +
<p class="big">
 +
Demonstrating Ultrasensitivity
 +
</p>
 +
<center><a href="https://2014.igem.org"><img class="mainpic" src="https://static.igem.org/mediawiki/2014/1/1a/Mattigemlogowhite.png" width="400px" height="400px" /></a></center>
 +
<!--https://2014.igem.org/File:Mattigemlogowhite.png or https://static.igem.org/mediawiki/2014/1/1a/Mattigemlogowhite.png -->
 +
</div>
 +
</body>
</html>
</html>

Latest revision as of 14:23, 28 August 2014

Demonstrating Ultrasensitivity

Retrieved from "http://2014.igem.org/Template:Team:DukeHomePage/CSS"