Team:Penn/css/style2

From 2012.igem.org

(Difference between revisions)
(Created page with "* { border: 0; margin: 0; padding: 0; } body, input, textarea, button, form, div, td, ul, li, p, a { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica N...")
Line 1: Line 1:
-
* {
+
*
-
border: 0;
+
{
-
margin: 0;
+
  border: 0;
-
padding: 0;
+
  margin: 0;
 +
  padding: 0;
}
}
-
body, input, textarea, button, form, div, td, ul, li, p, a {
+
body, input, textarea, button, form, div, td, ul, li, p, a  
-
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
+
{
-
font-weight: 300;
+
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
-
font-size: 15px;
+
  font-weight: 300;
-
line-height: 20px;
+
  font-size: 15px;
-
letter-spacing: 0px;
+
  line-height: 20px;
-
text-shadow: none;
+
  letter-spacing: 0px;
-
color: #fff;
+
  text-shadow: 0px 1px 1px white;
-
text-align: justify;
+
  color: #222;
 +
  text-align: justify;
}
}
-
header, nav {
+
header, nav  
-
display: block;
+
{
-
position: relative;
+
  display: block;
 +
  position: relative;
}
}
-
img, a, *:focus {
+
img, a, *:focus  
-
outline: none;
+
{
 +
  outline: none;
}
}
-
 
+
a  
-
a {
+
{
-
text-decoration: none;
+
  text-decoration: none;
}
}
-
.c {
+
.c  
-
text-align: center;
+
{
 +
  text-align: center;
}
}
-
.l {
+
.l  
-
text-align: left;
+
{
 +
  text-align: left;
}
}
-
.r {
+
.r  
-
text-align: right;
+
{
 +
  text-align: right;
}
}
-
.j {
+
.j  
-
text-align: justify;
+
{
 +
  text-align: justify;
}
}
-
.b {
+
.b  
-
font-weight: bold;
+
{
 +
  font-weight: bold;
}
}
-
.i {
+
.i  
-
font-style: italic;
+
{
 +
  font-style: italic;
}
}
-
span.hl {
+
span.hl  
-
font-weight: bold;
+
{
-
color: #444;
+
  font-weight: bold;
 +
  color: #444;
}
}
-
.fl {
+
.fl  
-
float: left;
+
{
 +
  float: left;
}
}
-
.fr {
+
.fr  
-
float: right;
+
{
 +
  float: right;
}
}
-
.active, .active:hover, .active *, .active *:hover {
+
.active, .active:hover, .active *, .active *:hover  
-
cursor: default;
+
{
 +
  cursor: default;
}
}
-
h1, h2, h3, h4, h5 {
+
h1, h2, h3, h4, h5  
-
font-weight: normal;
+
{
 +
  font-weight: normal;
}
}
-
.clear, form br {
+
.clear, form br  
-
display: block;
+
{
-
clear: both;
+
  display: block;
-
float: none;
+
  clear: both;
-
line-height: 0px;
+
  float: none;
-
font-size: 0px;
+
  line-height: 0px;
 +
  font-size: 0px;
 +
}
 +
.notext
 +
{
 +
  line-height: 0px;
 +
  font-size: 0px;
 +
}
 +
.noheight
 +
{
 +
  height: 0px;
 +
  line-height: 0px;
 +
  font-size: 0px;
 +
  overflow: hidden;
 +
} 
 +
.hidden
 +
{
 +
  display: none;
}
}
-
.notext {
+
.forcew
-
line-height: 0px;
+
{
-
font-size: 0px;
+
  display: inline-block;
}
}
-
.noheight {
 
-
height: 0px;
 
-
line-height: 0px;
 
-
font-size: 0px;
 
-
overflow: hidden;
 
-
}
 
-
.hidden {
+
#dim
-
display: none;
+
{
 +
  min-width: 700px;
 +
  overflow: hidden;
}
}
-
.forcew {
+
header
-
display: inline-block;
+
{
 +
  padding-bottom: 40px;
}
}
-
body {
+
.page
-
background: #eee url(gallery/bg.jpg) no-repeat center top;
+
{
-
padding-top: 0px;
+
  position: relative;
 +
  width: 600px;
 +
  margin: 0px auto 0px auto;
 +
  padding: 5px;
}
}
-
#dim {
+
.bg
-
margin-top:10px;
+
{
-
min-width: 750px;
+
  position: absolute;
-
overflow: visible;
+
  left: 0px;
 +
  top: 0px;
 +
  width: 100%;
 +
  height: 100%;
 +
  background: white;
 +
  box-shadow: 0px 3px 15px -10px #000;
 +
  -moz-box-shadow: 0px 3px 15px -10px #000;
 +
  -webkit-box-shadow: 0px 3px 15px -10px #000;
 +
  border-radius: 6px;
 +
  -moz-border-radius: 6px;
 +
  -webkit-border-radius: 6px;
 +
} 
 +
.inner
 +
{
 +
  position: relative;
 +
  padding: 45px 45px 85px 45px;
 +
  box-shadow: 0px 0px 100px #f1f1f1 inset;
 +
  background: white;
 +
} 
 +
#doc_banner
 +
{
 +
  margin: 100px 0px;
 +
}
 +
.inner a
 +
{
 +
  border-bottom: 1px dotted #222;
}
}
-
header {
+
.inner a:hover
-
padding-bottom: 40px;
+
{
 +
  color: #000;
 +
  border-color: #000;
}
}
-
.page {
+
.inner h2.description a
-
position: relative;
+
{
-
width: 650px;
+
  color: #555;
-
margin: 0px auto 50px auto;
+
  border-color: #555;
-
padding: 0px;
+
}
}
-
.bg {
+
.inner h2.description a:hover
-
position: absolute;
+
{
-
left: 0px;
+
  color: #111;
-
top: 0px;
+
  border-color: #111;
-
width: 100%;
+
-
height: 100%;
+
-
background: white;
+
-
box-shadow: 0px 3px 15px -10px #000;
+
-
-moz-box-shadow: 0px 3px 15px -10px #000;
+
-
-webkit-box-shadow: 0px 3px 15px -10px #000;
+
-
border-radius: 6px;
+
-
-moz-border-radius: 6px;
+
-
-webkit-border-radius: 6px;
+
}
}
-
 
+
nav a
-
.inner {
+
{
-
position: relative;
+
  border: 0px !important;
-
padding: 45px 45px 85px 45px;
+
-
box-shadow: 0px 0px 100px #f1f1f1 inset;
+
-
background: white;
+
}
}
-
 
+
/*
-
#doc_banner {
+
-
margin: 100px 0px;
+
-
}
+
-
 
+
-
.inner a {
+
-
border-bottom: 1px dotted #222;
+
-
}
+
-
 
+
-
.inner a:hover {
+
-
color: #000;
+
-
border-color: #000;
+
-
}
+
-
 
+
-
.inner h2.description a {
+
-
color: #555;
+
-
border-color: #555;
+
-
}
+
-
 
+
-
.inner h2.description a:hover {
+
-
color: #111;
+
-
border-color: #111;
+
-
}
+
-
 
+
-
nav a {
+
-
border: 0px !important;
+
-
}
+
-
 
+
h1 {
h1 {
font-size: 30px;
font-size: 30px;
Line 198: Line 217:
font-size: 18px;
font-size: 18px;
}
}
-
 
+
*/
-
.page .inner p {
+
.page .inner p  
-
margin-left: 30px;
+
{
 +
  margin-left: 30px;
}
}
-
.page .inner ul {
+
.page .inner ul  
-
margin: 20px 0px 0px 50px;
+
{
 +
  margin: 20px 0px 0px 50px;
list-style: circle;
list-style: circle;
}
}
-
.page .inner p {
+
.page .inner p  
-
margin-top: 20px;
+
{
-
list-style: circle;
+
  margin-top: 20px;
 +
  list-style: circle;
}
}
-
.sep {
+
.sep  
-
width: 840px;
+
{
-
height: 4px;
+
  width: 840px;
-
margin: 50px 0px 0px -15px;
+
  height: 4px;
-
background: url(gallery/static.png) 0px -206px;
+
  margin: 50px 0px 0px -15px;
 +
  background: url(../img/static.png) 0px -206px;
}
}
-
 
+
nav  
-
nav {
+
{
-
margin-top: 30px;
+
  margin-top: 30px;
}
}
nav a,
nav a,
-
nav span {
+
nav span  
-
margin-top: 10px;
+
{
-
float: left;
+
  margin-top: 10px;
-
display: block;
+
  float: left;
-
line-height: 80px;
+
  display: block;
-
height: 80px;
+
  line-height: 80px;
-
color: #555;
+
  height: 80px;
-
margin-right: 30px;
+
  color: #555;
-
font-size: 12px;
+
  margin-right: 30px;
 +
  font-size: 12px;
}
}
-
 
+
nav a  
-
nav a {
+
{
-
width: 80px;
+
  width: 80px;
-
margin-right: 10px;
+
  margin-right: 10px;
-
background-image: url(gallery/logos.png);
+
  background-image: url(../img/logos.png);
-
}
+
}
-
 
+
#kmlogo {
#kmlogo {
background-position: 0px -80px;
background-position: 0px -80px;
Line 268: Line 291:
-
body.dark {
+
body.dark  
-
background: #2d2d2d none;
+
{
 +
  background: #2d2d2d none;
}
}
-
body.dark * {
+
body.dark *  
-
text-shadow: none;
+
{
-
color: #999;
+
  text-shadow: none;
 +
  color: #999;
}
}
-
body.dark .page .bg {
+
body.dark .page .bg  
-
background: #222;
+
{
-
box-shadow: 0px 3px 15px -5px #000;
+
  background: #222;
-
-moz-box-shadow: 0px 3px 15px -5px #000;
+
  box-shadow: 0px 3px 15px -5px #000;
-
-webkit-box-shadow: 0px 3px 15px -5px #000;
+
  -moz-box-shadow: 0px 3px 15px -5px #000;
 +
  -webkit-box-shadow: 0px 3px 15px -5px #000;
}
}
-
 
+
body.dark .page .inner  
-
body.dark .page .inner {
+
{
-
box-shadow: none;
+
  box-shadow: none;
-
-moz-box-shadow: none;
+
  -moz-box-shadow: none;
-
-webkit-box-shadow: none;
+
  -webkit-box-shadow: none;
-
background: #111;
+
  background: #111;
 +
}
 +
body.dark .inner a
 +
{
 +
  color: #999;
 +
  border-bottom: 1px dotted #555;
 +
}
 +
body.dark .inner a:hover
 +
{
 +
  color: #bbb;
 +
  border-bottom: 1px dotted #777;
}
}
-
 
-
body.dark .inner a {
 
-
color: #999;
 
-
border-bottom: 1px dotted #555;
 
-
}
 
-
 
-
body.dark .inner a:hover {
 
-
color: #bbb;
 
-
border-bottom: 1px dotted #777;
 
-
}
 
-
 
-
.doc {
+
.doc  
-
margin-left: 155px;
+
{
-
padding-bottom: 115px;
+
  margin-left: 155px;
 +
  padding-bottom: 115px;
}
}
-
.doc h3 {
+
.doc h3  
-
margin-top: 100px;
+
{
 +
  margin-top: 100px;
}
}
-
.doc ul {
+
.doc ul  
-
margin: 10px 0px 0px 50px !important;
+
{
-
list-style: upper-alpha !important;
+
  margin: 10px 0px 0px 50px !important;
 +
  list-style: upper-alpha !important;
}
}
-
.doc ul li {
+
.doc ul li  
-
margin-bottom: 10px;
+
{
 +
  margin-bottom: 10px;
}
}
-
.doc ul li ul {
+
.doc ul li ul  
-
margin: 10px 0px 15px 30px !important;
+
{
-
list-style: decimal !important;
+
  margin: 10px 0px 15px 30px !important;
 +
  list-style: decimal !important;
}
}
-
.doc ul li ul li {
+
.doc ul li ul li  
-
margin-bottom: 5px;
+
{
 +
  margin-bottom: 5px;
}
}
Line 337: Line 368:
#layerslider,
#layerslider,
-
#layerslider2 {
+
#layerslider2  
-
width: 750px;
+
{
-
height: 500px;
+
  width: 700px;
-
margin: 0px auto;
+
  height: 500px;
 +
  margin: 0px auto 50px auto;
}
}
-
#leaf1 {
+
#leaf1  
-
left: 110px;
+
{
-
top: -110px;
+
  left: 110px;
 +
  top: -110px;
}
}

Revision as of 03:08, 15 September 2012

{ 

 border: 0;
 margin: 0;
 padding: 0;

}

body, input, textarea, button, form, div, td, ul, li, p, a { 

 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
 font-weight: 300;
 font-size: 15px;
 line-height: 20px;
 letter-spacing: 0px;
 text-shadow: 0px 1px 1px white;
 color: #222;
 text-align: justify;

}

header, nav { 

 display: block;
 position: relative;

}

img, a, *:focus { 

 outline: none;

} a { 

 text-decoration: none;

}

.c { 

 text-align: center;

}

.l { 

 text-align: left;

}

.r { 

 text-align: right;

}

.j { 

 text-align: justify;

}

.b { 

 font-weight: bold;

}

.i { 

 font-style: italic;

}

span.hl { 

 font-weight: bold;
 color: #444;

}

.fl { 

 float: left;

}

.fr { 

 float: right;

}

.active, .active:hover, .active *, .active *:hover { 

 cursor: default;

}

h1, h2, h3, h4, h5 { 

 font-weight: normal;

}

.clear, form br { 

 display: block;
 clear: both;
 float: none;
 line-height: 0px;
 font-size: 0px;

} .notext { 

 line-height: 0px;
 font-size: 0px;

} .noheight { 

 height: 0px;
 line-height: 0px;
 font-size: 0px;
 overflow: hidden;

} .hidden { 

 display: none;

}

.forcew { 

 display: inline-block;

}


  1. dim

{ 

 min-width: 700px;
 overflow: hidden;

}

header { 

 padding-bottom: 40px;

}

.page { 

 position: relative;
 width: 600px;
 margin: 0px auto 0px auto;
 padding: 5px;

}

.bg { 

 position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 background: white;
 box-shadow: 0px 3px 15px -10px #000;
 -moz-box-shadow: 0px 3px 15px -10px #000;
 -webkit-box-shadow: 0px 3px 15px -10px #000;
 border-radius: 6px;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;

} .inner { 

 position: relative;
 padding: 45px 45px 85px 45px;
 box-shadow: 0px 0px 100px #f1f1f1 inset;
 background: white;

}

  1. doc_banner

{ 

 margin: 100px 0px;

} .inner a { 

 border-bottom: 1px dotted #222;

}

.inner a:hover { 

 color: #000;
 border-color: #000;

}

.inner h2.description a { 

 color: #555;
 border-color: #555;

}

.inner h2.description a:hover { 

 color: #111;
 border-color: #111;

} nav a { 

 border: 0px !important;

} /* h1 { font-size: 30px; }

h2 { margin-top: 10px; font-size: 22px; color: #555; }

h2.description { margin: 20px 100px 0px 30px; font-size: 15px; font-style: italic; }

h3 { margin: 40px 0px 20px 0px; font-size: 22px; }

h4 { margin: 20px 0px 20px 30px; font-size: 18px; }

  • /

.page .inner p { 

 margin-left: 30px;

}

.page .inner ul { 

 margin: 20px 0px 0px 50px;

list-style: circle; }

.page .inner p { 

 margin-top: 20px;
 list-style: circle;

}

.sep { 

 width: 840px;
 height: 4px;
 margin: 50px 0px 0px -15px;
 background: url(../img/static.png) 0px -206px;

} nav { 

 margin-top: 30px;

}

nav a, nav span { 

 margin-top: 10px;
 float: left;
 display: block;
 line-height: 80px;
 height: 80px;
 color: #555;	
 margin-right: 30px;
 font-size: 12px;

} nav a { 

 width: 80px;
 margin-right: 10px;
 background-image: url(../img/logos.png);

}

  1. kmlogo {

background-position: 0px -80px; }

  1. kmlogo:hover {

background-position: 0px 0px; }

  1. fblogo {

background-position: -80px -80px; }

  1. fblogo:hover {

background-position: -80px 0px; }

  1. cclogo {

background-position: -160px -80px; }

  1. cclogo:hover {

background-position: -160px 0px; }


body.dark { 

 background: #2d2d2d none;

}

body.dark * { 

 text-shadow: none;
 color: #999;

}

body.dark .page .bg { 

 background: #222;
 box-shadow: 0px 3px 15px -5px #000;
 -moz-box-shadow: 0px 3px 15px -5px #000;
 -webkit-box-shadow: 0px 3px 15px -5px #000;

} body.dark .page .inner { 

 box-shadow: none;
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 background: #111;

} body.dark .inner a { 

 color: #999;
 border-bottom: 1px dotted #555;

} body.dark .inner a:hover { 

 color: #bbb;
 border-bottom: 1px dotted #777;

}


.doc { 

 margin-left: 155px;
 padding-bottom: 115px;

}

.doc h3 { 

 margin-top: 100px;

}

.doc ul { 

 margin: 10px 0px 0px 50px !important;
 list-style: upper-alpha !important;

}

.doc ul li { 

 margin-bottom: 10px;

}

.doc ul li ul { 

 margin: 10px 0px 15px 30px !important;
 list-style: decimal !important;

}

.doc ul li ul li { 

 margin-bottom: 5px;

}


/* LayerSlider Layers and Sublayers unique styles */


  1. layerslider,
  2. layerslider2

{ 

 width: 700px;
 height: 500px;
 margin: 0px auto 50px auto;

}

  1. leaf1

{ 

 left: 110px;
 top: -110px;

}

  1. leaf2 {

left: -20px; top: 230px; }

  1. leaf3 {

left: 500px; top: -200px; }

  1. clouds {

left: -100px; top: -100px; }

  1. earth {

left: 850px; top: -67px; }

  1. l5text1, #l5text2, #l5text3 {

width: 120px; padding: 5px; text-align: center; color: #eee; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #000; background-color: rgba(255,255,255,.07); font-size: 17px; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); }

  1. l5text1 {

left: 250px; top: 120px; }

  1. l5text2 {

left: 450px; top: 150px; }

  1. l5text3 {

left: 620px; top: 150px; }

.ls-active #earth { -webkit-transition: all 20s ease-in-out; -moz-transition: all 20s ease-in-out; -o-transition: all 20s ease-in-out; -ms-transition: all 20s ease-in-out; 

   -webkit-transform: rotate(360deg);
   -moz-transform: rotate(360deg);
   -o-transform: rotate(360deg);
   -ms-transform: rotate(360deg);

}

Retrieved from "http://2012.igem.org/Team:Penn/css/style2"