Team:UCLA/Template/css

From 2013.igem.org

(Difference between revisions)
 
(148 intermediate revisions not shown)
Line 1: Line 1:
-
/* General Blueprint Style */
+
html{
-
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
+
  font-size: 18px; font-family: "Trebuchet MS", sans-serif;
-
@font-face {
+
-
font-family: 'fontawesome';
+
-
src:url('../fonts/fontawesome.eot');
+
-
src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
+
-
url('../fonts/fontawesome.svg#fontawesome') format('svg'),
+
-
url('../fonts/fontawesome.woff') format('woff'),
+
-
url('../fonts/fontawesome.ttf') format('truetype');
+
-
font-weight: normal;
+
-
font-style: normal;
+
}
}
-
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
+
h1, h2, h3, h4, h5{
-
body, html { font-size: 100%; padding: 0; margin: 0;}
+
font-family:Verdana;  
-
 
+
-
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
+
-
.clearfix:before, .clearfix:after { content: " "; display: table; }
+
-
.clearfix:after { clear: both; }
+
-
 
+
-
body {
+
-
    font-family: 'Lato', Calibri, Arial, sans-serif;
+
-
    color: #fff;
+
}
}
-
a {
+
li{
-
color: #f0f0f0;
+
font-family:Verdana;
-
text-decoration: none;
+
}
}
-
a:hover {
+
/* Full page formatting */
-
color: #000;
+
body#bg { background-image: url("http://upload.wikimedia.org/wikipedia/commons/8/82/SEM_blood_cells.jpg");
-
}
+
  background-attachment: fixed;  
 +
  background-repeat: repeat;
-
.container > header {
+
}
-
padding: 2.875em 1.875em 1.875em;
+
#top-section { position: relative; height: 20px; width: 970px; }
-
position: fixed;
+
#contentSub, #search-controls, .firstHeading, #catlinks, #p-logo { display:none; }
-
z-index: 1000;
+
#container { margin: 15px 0px auto auto; width: 975px; }
-
width: 60%;
+
-
left: 20%;
+
-
}
+
-
.container > header h1 {
+
#top-panel { height: 200px; background-color: yellow; background-image: url("https://static.igem.org/mediawiki/2013/4/4b/Ucla_header.png");}
-
font-size: 2.125em;
+
#top-panel {  border-radius: -20px 0px 0px 0px; box-shadow: 0px -2px 6px 2px #222; margin: -20px 5px 0px -5px}
-
line-height: 1.3;
+
-
margin: 0;
+
-
float: left;
+
-
font-weight: 400;
+
-
}
+
-
.container > header span {
 
-
display: block;
 
-
font-weight: 700;
 
-
text-transform: uppercase;
 
-
letter-spacing: 0.5em;
 
-
padding: 0 0 0.6em 0.1em;
 
-
}
 
-
.container > header nav {
+
#contentSub, #search-controls, .firstHeading, #catlinks, #p-logo{
-
float: right;
+
  display:none;  
}
}
-
.container > header nav a {
+
#container{  
-
display: block;
+
  margin: 15px 0px auto auto;  
-
float: left;
+
  width: 975px;  
-
position: relative;
+
-
width: 2.5em;
+
-
height: 2.5em;
+
-
background: #fff;
+
-
border-radius: 50%;
+
-
color: transparent;
+
-
margin: 0 0.1em;
+
-
border: 4px solid #fff;
+
-
text-indent: -8000px;
+
}
}
-
.container > header nav a:after {
+
#globalwrapper{  
-
content: attr(data-info);
+
  margin: 0px 0px auto auto;  
-
color: #fff;
+
-
position: absolute;
+
-
width: 600%;
+
-
top: 120%;
+
-
text-align: right;
+
-
right: 0;
+
-
opacity: 0;
+
-
pointer-events: none;
+
}
}
-
.container > header nav a:hover:after {
+
p{
-
opacity: 1;
+
 
 +
  margin: 5px;
 +
  font-family: Verdana;
}
}
-
 
+
 
-
.container > header nav a:hover {
+
h4{
-
background: #47a3da;
+
  margin: 5px;
}
}
-
.icon-drop:before,
 
-
.icon-arrow-left:before {
 
-
font-family: 'fontawesome';
 
-
position: absolute;
 
-
top: 0;
 
-
width: 100%;
 
-
height: 100%;
 
-
speak: none;
 
-
font-style: normal;
 
-
font-weight: normal;
 
-
line-height: 2;
 
-
text-align: center;
 
-
color: #47a3da;
 
-
-webkit-font-smoothing: antialiased;
 
-
text-indent: 8000px;
 
-
padding-left: 8px;
 
-
}
 
-
.container > header nav a:hover:before {
+
#nav { font-family: "Bubbler One", serif; font-size: 17px; color: white;}
-
color: #fff;
+
#nav { background-color: #0070B0; width: 1000px; list-style: none; }
-
}
+
#nav { float: left; margin: 0px 0px auto -17px; z-index: 5; }
 +
#nav li { float: left; margin: 0px 10px 0px -5px; position:relative; }
 +
#nav a { display: block; padding: 5px 15px; text-decoration: none; color: white; border-style: none; }
 +
#nav a:hover { color: #D6D615; }
-
.icon-drop:before {
+
#nav ul{ background-color: #0070B0; }
-
content: "\e000";
+
#nav ul li: hover ul.noJS{ display: block; }
-
}
+
-
.icon-arrow-left:before {
+
#subnav { font-family: "Raleway", serif; font-size: 12px; color: black;}
-
content: "\f060";
+
#subnav { background-color: #FFD700; width: 980px; list-style: none; }
-
}
+
#subnav { float: left; margin: 0px 0px auto -7px; z-index: 5; }
 +
#subnav li { float: left; margin: 0px 10px 0px -5px; position:relative; }
 +
#subnav a { display: block; padding: 5px 15px; text-decoration: none; color: black; border-style: none; }
 +
#subnav a:hover { color: #536895; }
 +
#subnav { border-radius:4px; }
 +
#current { font-weight:900;}
-
@import url(http://fonts.googleapis.com/css?family=Raleway);
+
#feature { background-color: #fff; height: auto; width: 980px; }
-
/* Set all parents to full height */
+
#feature { border-radius: 5px 5px 5px 5px; box-shadow: 0px 2px 6px 2px #222; margin-right: 50px; }
-
html, body,
+
-
.container,
+
-
.cbp-fbscroller,
+
-
.cbp-fbscroller section {
+
-
height: 100%;  
+
-
}
+
-
/* The nav is fixed on the right side  and we center it by translating it 50%
 
-
(we don't know it's height so we can't use the negative margin trick) */
 
-
.cbp-fbscroller > nav {
 
-
position: fixed;
 
-
z-index: 9999;
 
-
right: 100px;
 
-
top: 50%;
 
-
width: 26px;
 
-
-webkit-transform: translateY(-50%);
 
-
-moz-transform: translateY(-50%);
 
-
-ms-transform: translateY(-50%);
 
-
transform: translateY(-50%);
 
-
}
 
-
.cbp-fbscroller > nav a {
 
-
display: block;
 
-
position: relative;
 
-
z-index: 9999;
 
-
color: transparent;
 
-
width: 26px;
 
-
height: 26px;
 
-
outline: none;
 
-
margin: 25px 0;
 
-
border-radius: 50%;
 
-
border: 4px solid #fff;
 
-
}
 
-
.no-touch .cbp-fbscroller > nav a:hover {
+
#bottom-panel{position: relative; height:200px; }
-
background: rgba(255,255,255,0.6);
+
-
}
+
-
.cbp-fbscroller > nav a.cbp-fbcurrent {
+
#reference{font-family:Verdana; font-size:10px; }
-
background: #fff;
+
-
}
+
-
 
+
-
/* background-attachment does the trick */
+
-
.cbp-fbscroller section {
+
-
position: relative;
+
-
background-position: top center;
+
-
background-repeat: no-repeat;
+
-
background-size: cover;
+
-
}
+
-
 
+
-
.no-touch .cbp-fbscroller section {
+
-
background-attachment: fixed;
+
-
}
+
-
 
+
-
#fbsection1 {
+
-
background-image: url("https://static.igem.org/mediawiki/2013/c/ce/Ucla_bg1.png");
+
-
}
+
-
 
+
-
#infb1 {
+
-
font-family: 'Raleway', sans-serif;
+
-
position: relative;
+
-
height: 600px;
+
-
width: 800px;
+
-
margin: 18px auto 0;
+
-
}
+
-
 
+
-
#fbsection2 {
+
-
background-image: url("https://static.igem.org/mediawiki/2013/f/f9/Ucla_bg2.png");
+
-
}
+
-
 
+
-
#fbsection3 {
+
-
background-image: url(../images/3.jpg);
+
-
}
+
-
 
+
-
#fbsection4 {
+
-
background-image: url(../images/4.jpg);
+
-
}
+
-
 
+
-
#fbsection5 {
+
-
background-image: url(../images/5.jpg);
+
-
}
+

Latest revision as of 02:46, 29 April 2014

html{ 

 font-size: 18px; font-family: "Trebuchet MS", sans-serif;

}

h1, h2, h3, h4, h5{ font-family:Verdana; }

li{ font-family:Verdana; }

/* Full page formatting */ body#bg { background-image: url("SEM_blood_cells.jpg"); 

 background-attachment: fixed; 
 background-repeat: repeat;

}
  1. top-section { position: relative; height: 20px; width: 970px; }
  2. contentSub, #search-controls, .firstHeading, #catlinks, #p-logo { display:none; }
  3. container { margin: 15px 0px auto auto; width: 975px; }
  1. top-panel { height: 200px; background-color: yellow; background-image: url("Ucla_header.png");}
  2. top-panel { border-radius: -20px 0px 0px 0px; box-shadow: 0px -2px 6px 2px #222; margin: -20px 5px 0px -5px}


  1. contentSub, #search-controls, .firstHeading, #catlinks, #p-logo{ 
 display:none;

}

  1. container{ 
 margin: 15px 0px auto auto; 
 width: 975px;

}

  1. globalwrapper{ 
 margin: 0px 0px auto auto;

}

p{ 

 margin: 5px;
 font-family: Verdana;

}

h4{ 

 margin: 5px;

}


  1. nav { font-family: "Bubbler One", serif; font-size: 17px; color: white;}
  2. nav { background-color: #0070B0; width: 1000px; list-style: none; }
  3. nav { float: left; margin: 0px 0px auto -17px; z-index: 5; }
  4. nav li { float: left; margin: 0px 10px 0px -5px; position:relative; }
  5. nav a { display: block; padding: 5px 15px; text-decoration: none; color: white; border-style: none; }
  6. nav a:hover { color: #D6D615; }
  1. nav ul{ background-color: #0070B0; }
  2. nav ul li: hover ul.noJS{ display: block; }
  1. subnav { font-family: "Raleway", serif; font-size: 12px; color: black;}
  2. subnav { background-color: #FFD700; width: 980px; list-style: none; }
  3. subnav { float: left; margin: 0px 0px auto -7px; z-index: 5; }
  4. subnav li { float: left; margin: 0px 10px 0px -5px; position:relative; }
  5. subnav a { display: block; padding: 5px 15px; text-decoration: none; color: black; border-style: none; }
  6. subnav a:hover { color: #536895; }
  7. subnav { border-radius:4px; }
  8. current { font-weight:900;}
  1. feature { background-color: #fff; height: auto; width: 980px; }
  2. feature { border-radius: 5px 5px 5px 5px; box-shadow: 0px 2px 6px 2px #222; margin-right: 50px; }


  1. bottom-panel{position: relative; height:200px; }
  1. reference{font-family:Verdana; font-size:10px; }
Retrieved from "http://2013.igem.org/Team:UCLA/Template/css"