Team:Penn/css/style2

From 2012.igem.org

Revision as of 03:09, 15 September 2012 by Amurthur (Talk | contribs)

{

 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);

}