Template:USTC-Software/header/css

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
body {
+
.pix_diapo {
-
    background:#f3f3f3;
+
background: #000;
 +
-moz-box-shadow: 0 3px 6px #000;
 +
-webkit-box-shadow: 0 3px 6px #000;
 +
box-shadow: 0 3px 6px #000;
 +
height: 470px;
 +
margin: 0 10px;
 +
overflow: hidden;
 +
position: relative;
 +
width: 940px;
}
}
-
 
+
.pix_diapo > div {
-
 
+
display: none;
-
#main {
+
height: 100%;
-
    background: url(https://static.igem.org/mediawiki/2013/1/1e/M_1243691170517.jpg) repeat;
+
left: 0;
-
    width:75%;
+
position: absolute;
-
    height:auto;
+
top: 0;
-
    /*margin:90px auto;*/
+
width: 100%;
-
    padding:30px;
+
-
    margin-top:-20px;
+
-
    margin-right:10px;
+
-
    float:right;
+
-
    font:14px Arial, Helvetica, sans-serif;
+
-
    box-shadow:#999 3px 3px 3px;
+
-
    border-radius: 10px;
+
}
}
-
 
+
#pix_prev, #pix_next {
-
 
+
cursor: pointer;
-
 
+
display: block;
-
#top {
+
height: 40px;
-
      position:fixed;
+
margin-top: -20px;
-
      background-color:#34495e;
+
position: absolute;
-
      width:100%;
+
top: 50%;
-
      height:100px;
+
width: 40px;
-
      z-index: 5000;
+
z-index: 1001;
-
      top:0px;
+
-
      left:0px;
+
-
      opacity:1;
+
-
   
+
}
}
-
 
+
#pix_prev {
-
 
+
background: url(images/prev.png) no-repeat;
-
#header {
+
left: 10px;
-
      position: relative;
+
-
      background-color:#34495e;
+
-
      border-radius: 0 0 10px 10px;
+
-
      -moz-border-radius: 0 0 5px 5px;
+
-
      -webkit-border-radius: 0 0 15px 15px;
+
-
      height:95px;
+
-
      font-family: "Helvetica Neue","Arial",sans-serif;
+
-
     
+
-
      border-top-width:0px;
+
-
      max-width:980px;
+
-
      width:970px;
+
-
      margin-left:-15px;
+
}
}
-
 
+
#pix_next {
-
 
+
background: url(images/next.png) no-repeat;
-
#nav-strip a {
+
left: auto!important;
-
      color: #fff;
+
right: 10px!important;
-
      text-decoration: none;
+
-
      cursor: pointer;
+
-
      cursor: hand;
+
}
}
-
 
+
#pix_pag {
-
 
+
margin: 0 auto;
-
#nav-strip ul {
+
position: relative;
-
      margin:0;
+
width: 940px;
-
      padding:0;
+
z-index: 1002;
-
      list-style:none;
+
}
}
-
 
+
#pix_commands {
-
 
+
cursor: pointer;
-
 
+
display: block;
-
 
+
float: left;
-
#nav-strip {
+
height: 26px;
-
      margin-top:50px;
+
margin: 15px 0 0 13px;
-
      margin-left:-25px;
+
position: relative;
-
      width: auto;
+
width: 24px;
-
      height: 25px;
+
-
      position: absolute;
+
-
      z-index:9999;
+
-
      left:190px;
+
}
}
-
 
+
#pix_play {
-
 
+
background: url(images/play.png) center no-repeat;
-
#nav-strip a:hover {  
+
height: 24px;
-
      text-decoration:none;
+
left: 0;
 +
position: absolute;
 +
top: 0;
 +
width: 24px;
}
}
-
 
+
#pix_stop {
-
 
+
background: url(images/pause.png) center no-repeat;
-
#nav-strip ul li.nav-item {
+
height: 24px;
-
      display: inline;
+
left: 0;
-
      float: left;
+
position: absolute;
-
      position:relative;
+
top: 0;
-
      padding-top:10px;
+
width: 24px;
-
      width:120px;
+
-
      height: 35px;
+
-
      text-align:center;
+
}
}
-
 
+
#pix_pag_ul {
-
 
+
float: right;
-
#nav-strip ul li.nav-item:hover,
+
margin: 0;
-
#nav-strip ul li.nav-item.hover {
+
padding: 0;
-
      background: #fff;
+
}
}
-
 
+
#pix_pag_ul > li {
-
#nav-strip ul li.nav-item:hover a,
+
cursor: pointer;
-
#nav-strip ul li.nav-item.hover a {
+
display: block;
-
    color: #000;
+
.display: inline-block;
 +
float: left;
 +
list-style: none;
 +
margin: 0 10px 0 0;
 +
padding: 20px 8px 0;
 +
text-align: center;
 +
text-indent: -9999px;
 +
width: 16px;
}
}
-
 
+
#pix_pag_ul > li > span {
-
#nav-strip ul li a {
+
background: #222;
-
      color:#fff;
+
-webkit-border-radius: 8px;
-
      display:block;
+
-moz-border-radius: 8px;
-
      font-size: 18px;
+
border-radius: 8px;
-
      font-weight:200;
+
display: block;
 +
height: 16px;
 +
width: 16px;
}
}
-
 
+
#pix_pag_ul > li:hover > span > span {
-
 
+
background: #ccc;
-
#nav-strip ul li .subnav {
+
-
      display: none;
+
-
      position:absolute;
+
-
      background: #34495e;
+
-
      top:45px;
+
}
}
-
#nav-strip ul li .subnav ul li:hover{
+
#pix_pag_ul > li > span > span {
-
      background-color:#4d77a1;
+
-webkit-border-radius: 8px;
 +
-moz-border-radius: 8px;
 +
border-radius: 8px;
 +
display: block;
 +
float: left;
 +
height: 8px;
 +
margin: 4px;
 +
width: 8px;
}
}
-
 
+
#pix_pag_ul > li.diapocurrent > span > span {
-
#nav-strip .subnav-inner {
+
background: #ff0;
-
      float: left;
+
-webkit-border-radius: 8px;
-
      width: 120px;
+
-moz-border-radius: 8px;
 +
border-radius: 8px;
}
}
-
#nav-strip .subnav .subnav-inner ul li.hp{
+
#pix_pag_ul > li > .pix_thumb {
-
      height:60px;
+
border: 4px solid #f2f2f2;
-
      background:#34495e;
+
.border: 4px solid #e6e6e6;
 +
border: 4px solid #e6e6e6\9;
 +
-moz-box-shadow: 0 1px 8px #000;
 +
-webkit-box-shadow: 0 1px 8px #000;
 +
box-shadow: 0 1px 8px #000;
 +
height: 58px;
 +
left: -17px;
 +
position: absolute;
 +
top: -40px;
 +
width: 58px;
}
}
-
#nav-strip .subnav .subnav-inner ul .hp:hover{
+
#pix_pag_ul > li > .thumb_arrow {
-
      background:#7599bc;
+
    border-left: 4px solid transparent;
 +
    border-right: 4px solid transparent;
 +
    border-top: 4px solid  #e6e6e6;
 +
top: 26px;
 +
left: 12px;
 +
position: absolute;
}
}
-
 
+
.pix_relativize {
-
 
+
overflow: hidden;
-
#nav-strip ul li .subnav ul {
+
position: relative;
-
      float: left;
+
-
      width: 120px;
+
-
      list-style:none;
+
-
      height:auto;
+
}
}
-
 
+
.imgFake {
-
 
+
cursor: pointer;
-
#nav-strip ul li .subnav ul li {
+
-
      display:block;
+
-
      /*border-top:2px outset #34495e;*/
+
-
      float:left;
+
-
      width: 120px;
+
}
}
-
 
+
.elemHover {
-
 
+
position: absolute;
-
#nav-strip ul li .subnav ul li a {
+
-
      font-weight: normal;
+
-
      margin-top:12px;
+
-
      height:32px;
+
-
      margin-bottom:2px;
+
-
      margin-top:8px;
+
}
}
-
 
+
.caption {
-
 
+
background: rgba(0, 0, 0, 0.8);
-
#nav-strip ul li .subnav ul li a,
+
    .filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000);
-
#nav-strip ul li.nav-item:hover .subnav ul li a{
+
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000)\9;
-
      position: relative;
+
bottom: 20px;
-
      color: #fff;
+
color: #fff;
-
      text-align:center;
+
display: block;
 +
font-size: 13px;
 +
padding: 20px;
 +
width: 900px;
}
}
-
 
+
.ui-loader {
-
 
+
display: none;
-
#nav-strip ul li .subnav ul li a,
+
-
#nav-strip ul li.nav-item:hover .subnav ul li a {  
+
-
      white-space: normal;
+
}
}
-
 
-
 
-
#nav-strip ul li .subnav ul li.active a,
 
-
#nav-strip ul li .subnav ul li a:hover {
 
-
      color:#000;
 
-
}
 
-
 
-
 
-
#team_logo {
 
-
      width: 275px;
 
-
      height: 45px;
 
-
      float: left;
 
-
      margin-top:5px;
 
-
      margin-left:-95px;
 
-
      font-size:33px;
 
-
      font-family:'Open Sans',"Helvetica Neue",arial,serif;
 
-
 
 
-
 
-
}
 
-
 
-
 
-
#team_logo a{
 
-
      color:#ed7751;
 
-
      text-decoration:none;
 
-
      text-shadow: 4px 3px 0.5px #03C 0.6;
 
-
      position:relative;
 
-
 
 
-
}
 
-
 
-
#team_logo a img{
 
-
      width:220px;
 
-
      height:134px;
 
-
}
 
-
 
-
#team_logo a:active{
 
-
      text-shadow:2px 2px 2px #f1f0f0;
 
-
      left:1px;
 
-
      top:1px;
 
-
}
 
-
 
-
#team_logo:hover a{
 
-
      color:#439b66;
 
-
}
 
-
 
-
#igem {
 
-
      float:right;
 
-
      margin-top:-1px;
 
-
      margin-right:-55px;
 
-
      height:83px;
 
-
      width:110px;
 
-
}
 
-
#igem a img{
 
-
        transition:width 1s, height 1s;
 
-
        -moz-transition:width 1s, height 1s, -moz-transform 1s;
 
-
        -webkit-transition:width 1s, height 1s, -webkit-transform 1s;
 
-
        -o-transition:width 1s, height 1s, -o-transform 1s;
 
-
        -ms-transition:width 1s, height 1s, -ms-transform 1s;
 
-
}
 
-
#igem a img:hover{
 
-
        transform:rotate(360deg);
 
-
        -moz-transform:rotate(360deg);
 
-
        -webkit-transform:rotate(360deg);
 
-
        -o-transform:rotate(360deg);
 
-
        -ms-transition:width 1s, height 1s, -ms-transform 1s;
 
-
}
 
-
 
-
 
-
a.content {
 
-
    text-decoration:none;
 
-
    color:#36526c;
 
-
    transition:1s;
 
-
}
 
-
a.content:hover {
 
-
    text-decoration:none;
 
-
    color:#6b93af;
 
-
    transition:1s;
 
-
}
 
-
 
-
 
-
#direction{
 
-
    width:18%;
 
-
    height:100%;
 
-
    float:left;
 
-
    top:140px;
 
-
    left:10px;
 
-
    position:fixed;
 
-
    background-color:#34495e;
 
-
    border-radius:5px;
 
-
}
 
-
 
-
#direction ul , #direction ul li a{
 
-
    color:#fff;
 
-
    font-size:18px;
 
-
    text-decoration:none;
 
-
    font-family:Tahoma, Geneva, sans-serif;
 
-
    list-style-image:none;
 
-
    list-style-image:circle;
 
-
}
 
-
 
-
#direction ul li a:hover{
 
-
    color:#aaed51;
 
-
    opacity:1;
 
-
    font-size:18px;
 
-
}
 
-
 
-
.subbutton {
 
-
    font-size:16px !important;
 
-
    margin-left:10px;
 
-
}
 
-
 
-
 
-
#box{float:left; position:relative;width:250px;}.div1{width:250px;}.div2{position:fixed;_position:absolute;top:0;z-index:250;}
 

Revision as of 09:40, 28 October 2013

.pix_diapo { background: #000; -moz-box-shadow: 0 3px 6px #000; -webkit-box-shadow: 0 3px 6px #000; box-shadow: 0 3px 6px #000; height: 470px; margin: 0 10px; overflow: hidden; position: relative; width: 940px; } .pix_diapo > div { display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

  1. pix_prev, #pix_next {

cursor: pointer; display: block; height: 40px; margin-top: -20px; position: absolute; top: 50%; width: 40px; z-index: 1001; }

  1. pix_prev {

background: url(images/prev.png) no-repeat; left: 10px; }

  1. pix_next {

background: url(images/next.png) no-repeat; left: auto!important; right: 10px!important; }

  1. pix_pag {

margin: 0 auto; position: relative; width: 940px; z-index: 1002; }

  1. pix_commands {

cursor: pointer; display: block; float: left; height: 26px; margin: 15px 0 0 13px; position: relative; width: 24px; }

  1. pix_play {

background: url(images/play.png) center no-repeat; height: 24px; left: 0; position: absolute; top: 0; width: 24px; }

  1. pix_stop {

background: url(images/pause.png) center no-repeat; height: 24px; left: 0; position: absolute; top: 0; width: 24px; }

  1. pix_pag_ul {

float: right; margin: 0; padding: 0; }

  1. pix_pag_ul > li {

cursor: pointer; display: block; .display: inline-block; float: left; list-style: none; margin: 0 10px 0 0; padding: 20px 8px 0; text-align: center; text-indent: -9999px; width: 16px; }

  1. pix_pag_ul > li > span {

background: #222; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; display: block; height: 16px; width: 16px; }

  1. pix_pag_ul > li:hover > span > span {

background: #ccc; }

  1. pix_pag_ul > li > span > span {

-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; display: block; float: left; height: 8px; margin: 4px; width: 8px; }

  1. pix_pag_ul > li.diapocurrent > span > span {

background: #ff0; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }

  1. pix_pag_ul > li > .pix_thumb {

border: 4px solid #f2f2f2; .border: 4px solid #e6e6e6; border: 4px solid #e6e6e6\9; -moz-box-shadow: 0 1px 8px #000; -webkit-box-shadow: 0 1px 8px #000; box-shadow: 0 1px 8px #000; height: 58px; 

	left: -17px;

position: absolute; top: -40px; width: 58px; }

  1. pix_pag_ul > li > .thumb_arrow { 
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-top: 4px solid  #e6e6e6;

top: 26px; left: 12px; position: absolute; } .pix_relativize { overflow: hidden; position: relative; } .imgFake { cursor: pointer; } .elemHover { position: absolute; } .caption { background: rgba(0, 0, 0, 0.8); 

   .filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000)\9;

bottom: 20px; color: #fff; display: block; font-size: 13px; padding: 20px; width: 900px; } .ui-loader { display: none; }

Retrieved from "http://2013.igem.org/Template:USTC-Software/header/css"