Team:Shenzhen SFLS/comm/stylesheets

From 2013hs.igem.org

(Difference between revisions)
Line 1: Line 1:
-
/*
+
/* CSS for jQuery Orbit Plugin 1.2.3
 +
* www.ZURB.com/playground
 +
* Copyright 2010, ZURB
 +
* Free to use under the MIT license.
 +
* http://www.opensource.org/licenses/mit-license.php
 +
 
 +
/* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY
 +
  ================================================== */
 +
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
 +
table{border-collapse:collapse;border-spacing:0;}
 +
address,caption,cite,code,dfn,em,strong,th,var{font-weight:normal;font-style:normal;}
 +
ol,ul{list-style:none;}
 +
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
 +
q:before,q:after{content:'';}
 +
fieldset,img,abbr,acronym{border:0;}
 +
 
 +
#featured {
 +
width: 940px;
 +
height: 450px;
 +
background: #000 url(https://static.igem.org/mediawiki/2013hs/4/42/Loading.gif) no-repeat center center;
 +
overflow: hidden; }
 +
#featured>img, 
 +
#featured>div,
 +
#featured>a { display: none; }
 +
 
 +
/* CONTAINER
 +
  ================================================== */
 +
 
 +
div.orbit-wrapper {
 +
    width: 1px;
 +
    height: 1px;
 +
    position: relative; }
 +
 
 +
div.orbit {
 +
    width: 1px;
 +
    height: 1px;
 +
    position: relative;
 +
    overflow: hidden }
 +
 
 +
div.orbit>img {
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
    display: none; }
 +
 
 +
div.orbit>a {
 +
    border: none;
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
    line-height: 0;
 +
    display: none; }
 +
 
 +
.orbit>div {
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
    width: 100%;
 +
    height: 100%; }
 +
 
 +
/* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */
 +
 
 +
 
 +
/* TIMER
 +
  ================================================== */
 +
 
 +
div.timer {
 +
    width: 40px;
 +
    height: 40px;
 +
    overflow: hidden;
 +
    position: absolute;
 +
    top: 10px;
 +
    right: 10px;
 +
    opacity: .6;
 +
    cursor: pointer;
 +
    z-index: 1001; }
 +
 
 +
span.rotator {
 +
    display: block;
 +
    width: 40px;
 +
    height: 40px;
 +
    position: absolute;
 +
    top: 0;
 +
    left: -20px;
 +
    background: url(https://static.igem.org/mediawiki/2013hs/d/dc/Rotator-black.png) no-repeat;
 +
    z-index: 3; }
 +
 
 +
span.mask {
 +
    display: block;
 +
    width: 20px;
 +
    height: 40px;
 +
    position: absolute;
 +
    top: 0;
 +
    right: 0;
 +
    z-index: 2;
 +
    overflow: hidden; }
 +
 
 +
span.rotator.move {
 +
    left: 0 }
 +
 
 +
span.mask.move {
 +
    width: 40px;
 +
    left: 0;
 +
    background: url(https://static.igem.org/mediawiki/2013hs/c/c0/Timer-black.png) repeat 0 0; }
 +
 
 +
span.pause {
 +
    display: block;
 +
    width: 40px;
 +
    height: 40px;
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
    background: url(https://static.igem.org/mediawiki/2013hs/b/b0/Pause-black.png) no-repeat;
 +
    z-index: 4;
 +
    opacity: 0; }
 +
 
 +
span.pause.active {
 +
    background: url(https://static.igem.org/mediawiki/2013hs/b/b0/Pause-black.png) no-repeat 0 -40px }
 +
 
 +
div.timer:hover span.pause,
 +
span.pause.active {
 +
    opacity: 1 }
 +
 
 +
 
 +
/* CAPTIONS
 +
  ================================================== */
 +
 
 +
.orbit-caption {
 +
    display: none;
 +
    font-family: "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; }
 +
 
 +
.orbit-wrapper .orbit-caption {
 +
    background: #000;
 +
    background: rgba(0,0,0,.6);
 +
    z-index: 1000;
 +
    color: #fff;
 +
text-align: center;
 +
padding: 7px 0;
 +
    font-size: 13px;
 +
    position: absolute;
 +
    right: 0;
 +
    bottom: 0;
 +
    width: 100%; }
 +
 
 +
 
 +
/* DIRECTIONAL NAV
 +
  ================================================== */
 +
 
 +
div.slider-nav {
 +
    display: block }
 +
 
 +
div.slider-nav span {
 +
    width: 39px;
 +
    height: 50px;
 +
    text-indent: -9999px;
 +
    position: absolute;
 +
    z-index: 1000;
 +
    top: 50%;
 +
    margin-top: -50px;
 +
    cursor: pointer; }
 +
 
 +
div.slider-nav span.right {
 +
    background: url(https://static.igem.org/mediawiki/2013hs/0/0c/Right-arrow.png);
 +
    background-size:100%;
 +
    right: 0; }
 +
 
 +
div.slider-nav span.left {
 +
    background: url(https://static.igem.org/mediawiki/2013hs/e/e7/Left-arrow.png);
 +
    background-size:100%;
 +
    left: 0; }
 +
 
 +
/* BULLET NAV
 +
  ================================================== */
 +
 
 +
.orbit-bullets {
 +
    position: absolute;
 +
    z-index: 1000;
 +
    list-style: none;
 +
    bottom: -40px;
 +
    left: 50%;
 +
margin-left: -50px;
 +
    padding: 0; }
 +
 
 +
.orbit-bullets li {
 +
    float: left;
 +
    margin-left: 5px;
 +
    cursor: pointer;
 +
    color: #999;
 +
    text-indent: -9999px;
 +
    background: url(https://static.igem.org/mediawiki/2013hs/b/bf/Bullets.jpg) no-repeat 4px 0;
 +
    background-position: 0 0;
 +
    width: 11px;
 +
    height: 11px;
 +
    overflow: hidden; }
 +
 
 +
.orbit-bullets li.active {
 +
    color: #222;
 +
    background-position: -11px 0; }
 +
   
 +
.orbit-bullets li.has-thumb {
 +
    background: none;
 +
    width: 100px;
 +
    height: 75px; }
 +
 
 +
.orbit-bullets li.active.has-thumb {
 +
    background-position: 0 0;
 +
    border-top: 2px solid #000; }
 +
 
 +
 
 +
/* basic */
 +
.c:before,.c:after{content:"";display:table;}
 +
.c:after{clear:both;}
 +
.c{zoom:1;}
 +
body {font:12px/1.5 Arial,tahoma,sans-serif;-webkit-text-size-adjust:none;text-align:justify;background:#f3f0f0 url(https://static.igem.org/mediawiki/2013hs/b/bd/Body_bg.jpg) repeat-x 50% 0;}
 +
a {text-decoration:none;overflow:hidden;}
 +
a:hover {text-decoration:underline;}
 +
.hide {display:block;width:0;height:0;overflow:hidden;}
 +
.wrap {min-width:940px;width:940px; margin:0 auto; display:block; overflow:hidden; }
 +
.sp,.nav li{ background:url(https://static.igem.org/mediawiki/2013hs/9/9a/Sp.jpg) no-repeat;}
 +
.header { height:123px;}
 +
.school_logo { float:left;}
 +
.nav { float:right; padding-top:81px}
 +
.nav li { float:left; font-size:16px; white-space:nowrap; text-align:center;line-height:42px;  display:block; background-position:  right top; }
 +
.nav li a{ color:#ffffff;*width:64px;min-width:64px;padding:0 20px 0 9px; height:42px;}
 +
.nav li a:hover {text-decoration:none;}
 +
.nav .active,.nav .active1{ background-position:right -84px ;}
 +
.container { padding-top:50px; width:100%;margin:0 auto;}
 +
.summary { display:block; overflow:hidden; clear:both; padding-top:70px;}
 +
.summary li{ width:215px; background-color:#ffffff; border-bottom:3px solid #d4d1d1; padding-bottom:7px; margin-left:25px; float:left;}
 +
.summary .title { height:31px; line-height:31px; color:#ffffff; font-size:22px; background-color:#0072c6;padding-left:9px;}
 +
.summary p {padding:6px 0 23px 9px; min-height:53px;*height:53px; line-height:18px; color:#6d6d6d;  text-align:left; word-wrap:break-word; word-break:normal; white-space:normal;}
 +
.summary li.first { margin-left:0;}
 +
 
 +
.btn_more { text-indent:-9999px; overflow:hidden; width:87px; height:28px; display:block; background-position:0 -168px; margin-left:9px;}
 +
.sponsor { margin-top:35px; height:73px; border-top:1px dashed #d4d1d1; border-bottom:1px solid #d4d1d1; padding-top:43px; padding-bottom:54px; overflow:hidden;}
 +
.sponsor li { float:left;}
#p-logo{display:none;}
#p-logo{display:none;}
.noprint { display:none;}
.noprint { display:none;}
-
*/
 

Revision as of 08:12, 13 June 2013

/* CSS for jQuery Orbit Plugin 1.2.3

* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php

/* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY

  ================================================== */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} address,caption,cite,code,dfn,em,strong,th,var{font-weight:normal;font-style:normal;} ol,ul{list-style:none;} h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;} q:before,q:after{content:;} fieldset,img,abbr,acronym{border:0;}

  1. featured {

width: 940px; height: 450px; background: #000 url(Loading.gif) no-repeat center center; overflow: hidden; }

  1. featured>img,
  2. featured>div,
  3. featured>a { display: none; }

/* CONTAINER

  ================================================== */

div.orbit-wrapper {

   width: 1px;
   height: 1px;
   position: relative; }

div.orbit {

   width: 1px;
   height: 1px;
   position: relative;
   overflow: hidden }

div.orbit>img {

   position: absolute;
   top: 0;
   left: 0;
   display: none; }

div.orbit>a {

   border: none;
   position: absolute;
   top: 0;
   left: 0;
   line-height: 0; 
   display: none; }

.orbit>div {

   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%; }

/* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */


/* TIMER

  ================================================== */

div.timer {

   width: 40px;
   height: 40px;
   overflow: hidden;
   position: absolute;
   top: 10px;
   right: 10px;
   opacity: .6;
   cursor: pointer;
   z-index: 1001; }

span.rotator {

   display: block;
   width: 40px;
   height: 40px;
   position: absolute;
   top: 0;
   left: -20px;
   background: url(Rotator-black.png) no-repeat;
   z-index: 3; }

span.mask {

   display: block;
   width: 20px;
   height: 40px;
   position: absolute;
   top: 0;
   right: 0;
   z-index: 2;
   overflow: hidden; }

span.rotator.move {

   left: 0 }

span.mask.move {

   width: 40px;
   left: 0;
   background: url(Timer-black.png) repeat 0 0; }

span.pause {

   display: block;
   width: 40px;
   height: 40px;
   position: absolute;
   top: 0;
   left: 0;
   background: url(Pause-black.png) no-repeat;
   z-index: 4;
   opacity: 0; }

span.pause.active {

   background: url(Pause-black.png) no-repeat 0 -40px }

div.timer:hover span.pause, span.pause.active {

   opacity: 1 }


/* CAPTIONS

  ================================================== */

.orbit-caption {

   display: none;
   font-family: "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; }

.orbit-wrapper .orbit-caption {

   background: #000;
   background: rgba(0,0,0,.6);
   z-index: 1000;
   color: #fff;

text-align: center; padding: 7px 0;

   font-size: 13px;
   position: absolute;
   right: 0;
   bottom: 0;
   width: 100%; }


/* DIRECTIONAL NAV

  ================================================== */

div.slider-nav {

   display: block }

div.slider-nav span {

   width: 39px;
   height: 50px;
   text-indent: -9999px;
   position: absolute;
   z-index: 1000;
   top: 50%;
   margin-top: -50px;
   cursor: pointer; }

div.slider-nav span.right {

   background: url(Right-arrow.png);
   background-size:100%;
   right: 0; }

div.slider-nav span.left {

   background: url(Left-arrow.png);
   background-size:100%;
   left: 0; }

/* BULLET NAV

  ================================================== */

.orbit-bullets {

   position: absolute;
   z-index: 1000;
   list-style: none;
   bottom: -40px;
   left: 50%;

margin-left: -50px;

   padding: 0; }

.orbit-bullets li {

   float: left;
   margin-left: 5px;
   cursor: pointer;
   color: #999;
   text-indent: -9999px;
   background: url(Bullets.jpg) no-repeat 4px 0;
   background-position: 0 0;
   width: 11px;
   height: 11px;
   overflow: hidden; }

.orbit-bullets li.active {

   color: #222;
   background-position: -11px 0; }
   

.orbit-bullets li.has-thumb {

   background: none;
   width: 100px;
   height: 75px; }

.orbit-bullets li.active.has-thumb {

   background-position: 0 0;
   border-top: 2px solid #000; }


/* basic */ .c:before,.c:after{content:"";display:table;} .c:after{clear:both;} .c{zoom:1;} body {font:12px/1.5 Arial,tahoma,sans-serif;-webkit-text-size-adjust:none;text-align:justify;background:#f3f0f0 url(Body_bg.jpg) repeat-x 50% 0;} a {text-decoration:none;overflow:hidden;} a:hover {text-decoration:underline;} .hide {display:block;width:0;height:0;overflow:hidden;} .wrap {min-width:940px;width:940px; margin:0 auto; display:block; overflow:hidden; } .sp,.nav li{ background:url(Sp.jpg) no-repeat;} .header { height:123px;} .school_logo { float:left;} .nav { float:right; padding-top:81px} .nav li { float:left; font-size:16px; white-space:nowrap; text-align:center;line-height:42px; display:block; background-position: right top; } .nav li a{ color:#ffffff;*width:64px;min-width:64px;padding:0 20px 0 9px; height:42px;} .nav li a:hover {text-decoration:none;} .nav .active,.nav .active1{ background-position:right -84px ;} .container { padding-top:50px; width:100%;margin:0 auto;} .summary { display:block; overflow:hidden; clear:both; padding-top:70px;} .summary li{ width:215px; background-color:#ffffff; border-bottom:3px solid #d4d1d1; padding-bottom:7px; margin-left:25px; float:left;} .summary .title { height:31px; line-height:31px; color:#ffffff; font-size:22px; background-color:#0072c6;padding-left:9px;} .summary p {padding:6px 0 23px 9px; min-height:53px;*height:53px; line-height:18px; color:#6d6d6d; text-align:left; word-wrap:break-word; word-break:normal; white-space:normal;} .summary li.first { margin-left:0;}

.btn_more { text-indent:-9999px; overflow:hidden; width:87px; height:28px; display:block; background-position:0 -168px; margin-left:9px;} .sponsor { margin-top:35px; height:73px; border-top:1px dashed #d4d1d1; border-bottom:1px solid #d4d1d1; padding-top:43px; padding-bottom:54px; overflow:hidden;} .sponsor li { float:left;}

  1. p-logo{display:none;}

.noprint { display:none;}