Team:HIT-Harbin/css/contentstyle.css

From 2014.igem.org

(Difference between revisions)
Line 125: Line 125:
-
 
+
#floatingbar,#minibar{
-
#minibar{
+
  border:1px solid #F1F1F1;
  border:1px solid #F1F1F1;
  height:50px;
  height:50px;
-
width:1115px;
 
}
}
-
#minibar ul{
+
#floatingbar ul, #minibar ul{
  list-style-type:none;
  list-style-type:none;
  margin-top:-3px;
  margin-top:-3px;
Line 138: Line 136:
   
   
}
}
-
#minibar  ul  li  a  button {
+
 
-
font-size: 25px;
+
-
}
+
#floatingbar ul li,#minibar ul li{
#floatingbar ul li,#minibar ul li{
  float:left;
  float:left;
Line 180: Line 176:
}
}
 +
 +
 +
 +
button {
 +
position: relative;
 +
margin: 0 .5em .5em .5em;
 +
padding: 0.5em 1.5em;
 +
font-size: 14px;
 +
font-weight: bold;
 +
font-family:Arial;
 +
color: #4f4f4f;
 +
text-shadow: 0 1px 1px #fff;
 +
background: #ddd;
 +
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#c4c4c4));
 +
background: -moz-linear-gradient(top, #ededed, #c4c4c4);
 +
border: 1px solid #acacac;
 +
border-top-color: #bdbdbd;
 +
letter-spacing:-1px;
 +
border-bottom-color: #949494;
 +
border-radius: .214em;
 +
-webkit-border-radius: .214em;
 +
-moz-border-radius: .214em;
 +
transition: all .2s ease-in-out;
 +
-webkit-transition: all .2s ease-in-out;
 +
-moz-transition: all .2s ease-in-out;
 +
-o-transition: all .2s ease-in-out;
 +
 +
        box-shadow: inset 0 1px 0 #fff;
 +
    -webkit-box-shadow: inset 0 1px 0 #fff;
 +
    -moz-box-shadow: inset 0 1px 0 #fff;
 +
    -o-box-shadow: inset 0 1px 0 #fff;
 +
     
 +
 +
cursor: pointer;
 +
}
 +
button:hover,
 +
button:focus {
 +
 +
 +
box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
 +
    -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
 +
    -moz-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
 +
    -o-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
 +
}
 +
button:active {
 +
background: #ccc;
 +
background: -webkit-gradient(linear, left top, left bottom, from(#c3c3c3), to(#ebebeb));
 +
background: -moz-linear-gradient(top, #c3c3c3, #ebebeb);
 +
border-color: #a6a6a6;
 +
border-top-color: #939393;
 +
border-bottom-color: #bcbcbc;
 +
 +
 +
box-shadow: inset 0 -1px 0 #fff;
 +
    -webkit-box-shadow: inset 0 -1px 0 #fff;
 +
    -moz-box-shadow: inset 0 -1px 0 #fff;
 +
    -o-box-shadow: inset 0 -1px 0 #fff;
 +
}
 +
button.default {
 +
color: #1c4257;
 +
background: #a3cde3;
 +
background: -webkit-gradient(linear, left top, left bottom, from(#b9e0f5), to(#85b2cb));
 +
background: -moz-linear-gradient(top, #b9e0f5, #85b2cb);
 +
border: 1px solid #759bb1;
 +
border-top-color: #8ab0c6;
 +
border-bottom-color: #587e93;
 +
 +
}
 +
button.default:hover,
 +
button.default:focus {
 +
box-shadow: 0 0 7px #53a6d5;
 +
 +
 +
    box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 #fff;
 +
    -webkit-box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 #fff;
 +
    -moz-box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 #fff;
 +
    -o-box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 #fff;
 +
 +
}
 +
button.default:active {
 +
background: #8abcd7;
 +
background: -webkit-gradient(linear, left top, left bottom, from(#81afc8), to(#b7def4));
 +
background: -moz-linear-gradient(top, #81afc8, #b7def4);
 +
border-color: #6e94a9;
 +
border-top-color: #567c91;
 +
border-bottom-color: #88aec4;
 +
 +
 +
box-shadow: inset 0 -1px 1px #fff;
 +
    -webkit-box-shadow: inset 0 -1px 1px #fff;
 +
    -moz-box-shadow: inset 0 -1px 1px #fff;
 +
    -o-box-shadow: inset 0 -1px 1px #fff;
 +
 +
 +
}
 +
button[disabled],
 +
button[disabled]:active {
 +
color: #a7a7a7;
 +
background:  #efefef;
 +
background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e1e1e1));
 +
background: -moz-linear-gradient(top, #f6f6f6, #e1e1e1);
 +
border-color: #d4d4d4;
 +
border-top-color: #dedede;
 +
border-bottom-color: #c9c9c9;
 +
cursor: default;
 +
}
 +
button[disabled]:hover,
 +
button[disabled]:focus {
 +
box-shadow: none;
 +
-webkit-box-shadow: none;
 +
-moz-box-shadow: none;
 +
-o-box-shadow: none;
 +
}
 +
 +
#dirbutton img { margin-top:-3px;}

Revision as of 08:08, 15 October 2014

/* CSS Document */

  1. body{background-color:#EEEADE}
  2. top-section {

background-color: transparent; }

  1. topCentent{

width:1117px; margin:-8px auto;

       padding:0;

}

  1. nav span{color:#2F798C}
  2. nav { position:relative;top:125px;width:1115px;left:0;z-index:2;
                height:67px;
          font-family: Ebrima;

}

  1. nav ul {margin-top:10px;font-size:20px;padding-top:10px;display:none;text-align:center;border: #909090 1px solid;

background: #F9F6E7;filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4); -moz-box-shadow: 2px 2px 10px #909090; -webkit-box-shadow: 2px 2px 10px #909090; box-shadow: 2px 2px 10px #909090;}

  1. nav ul{filter:aphla(opacity=80); background:#F9F6E7; background:rgba(294,246,231,0.8); important!}
  2. nav ul li:hover{background:#F9F6E7;}
  3. nav ul li { color:#183D46; position:relative;border-bottom: #909090 1px solid;}
  4. nav ul li a{font-size:14px;}
  5. nav ul li a:hover{color:#11979C;}

.nav1{float:left;width:85px;margin-top:41px;}

  1. rnav{display:none;}
  2. nav a {text-decoration:none;color:#183D46;font-size:22px;}
  3. nav li a {font-size:15px;}
  4. project{margin-left:22px;}
  5. nav #project ul{width:80px;}
  6. nav ul {font-size:20px;padding-top:10px;width:72px;display:none;}
  7. nav #project ul {

width: 102px; margin-left: -20px; }

  1. nav #judging ul {

width: 108px; margin-left: -20px; }

  1. nav #wetlab ul {

width: 100px; margin-left: -15px; }

  1. nav #team ul {

width: 100px; margin-left: -22px; }

  1. nav #humanPractices ul {

width: 129px; margin-left: 20px; }

  1. judging{margin-left: 45px;}
  2. wetlab{margin-left:73px;}
  3. software {margin-left: 307px;}
  4. team{width:57px;margin-left: 46px;}
  5. humanPractices {margin-left: 24px;}
  6. nav #humanPractices ul{width:124px;}
  1. nav a:hover {color:#2F798C}
  2. rhome a {text-decoration:none;

color: #FECA9E; font-size: 17px;}

body { background:#183D46 url( Bac2.jpg) no-repeat scroll 50% 0%; }

  1. bottomNav {

z-index:999; position:fixed; bottom:0; left:1100px; width:100%; _position:absolute; /* for IE6 */ _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible; }

  1. bottomNav a{text-decoration:none;font-family:Ebrima;color:#183D46;font-size:20px;}
  2. bottomNav a:hover{color:#2F798C;}
  3. rnav{height:1300px;font-family:Ebrima;text-decoration:none;font-weight:bold;

z-index:999; position:fixed; top:20%; left:0;; width:0; _position:absolute; /* for IE6 https://static.igem.org/mediawiki/2014/6/61/Wikibackground.jpg*/ _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible;}

  1. rnav .rnav1 {margin-top:9px;font-size: 16px;}
  2. rnav .rnav1 a {text-decoration:none;color:#F2E3C6;}
  3. rnav .rnav1 a:hover {color:#FECA9E;}
  4. rnav .rnav1 ul{width:108px;display:none;}
  5. rnav .rnav1 .rfoot{margin-bottom:10px;}
  6. rnav li a {

font-size: 10px; }

  1. rnav #home a {color:white;text-decoration:none;}
  2. rnav #home:hover a {color:red;}
  3. team {

width: 74px;}

/* for mainarea */

  1. mainarea{padding-top:264px;z-index: 0 ;margin:0 20px;}

.alignleft { width: 645px; float: left;} .cta-box { /* padding-top: 0px; */ height: 60px; border-top: #F2E3C6 2px dashed; border-bottom: #F2E3C6 2px dashed; margin-top: 49px; } a.custom-button { float: right; } a.custom-button { margin: 19px;font: bold 13px/34px Arial; } .cta-box p { margin: 19px;font: italic 25px/34px "Times New Roman"; }


  1. floatingbar,#minibar{
border:1px solid #F1F1F1;
height:50px;

}

  1. floatingbar ul, #minibar ul{
list-style-type:none;
margin-top:-3px;
margin-left:-37px;

}

  1. floatingbar ul li,#minibar ul li{
float:left;
padding:10px;

}

  1. floatingbar ul li a,#minibar ul li a{
text-decoration:none;

}

  1. minibar { display:none;}


.floater{ position:fixed; top:0px; z-index:999; height:50px; width:960px; border-top:none; background-color: #F1F1F1; border:1px solid #000000; color:#ccc; display:block; clear:both; margin-left:auto; margin-right:auto; float:left;

box-shadow: 0 0 7px rgba(0,0,0,0.4); -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.4); -moz-box-shadow: 0 0 7px rgba(0,0,0,0.4); border-radius: .214em; -webkit-border-radius: .214em; -moz-border-radius: .214em;

}


button { position: relative; margin: 0 .5em .5em .5em; padding: 0.5em 1.5em; font-size: 14px; font-weight: bold; font-family:Arial; color: #4f4f4f; text-shadow: 0 1px 1px #fff; background: #ddd; background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#c4c4c4)); background: -moz-linear-gradient(top, #ededed, #c4c4c4); border: 1px solid #acacac; border-top-color: #bdbdbd; letter-spacing:-1px; border-bottom-color: #949494; border-radius: .214em; -webkit-border-radius: .214em; -moz-border-radius: .214em; transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out;

box-shadow: inset 0 1px 0 #fff;

   		-webkit-box-shadow: inset 0 1px 0 #fff;
   		-moz-box-shadow: inset 0 1px 0 #fff;
   		-o-box-shadow: inset 0 1px 0 #fff;


cursor: pointer; } button:hover, button:focus {


box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 #fff;

   		-webkit-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
   		-moz-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
   		-o-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 #fff;

} button:active { background: #ccc; background: -webkit-gradient(linear, left top, left bottom, from(#c3c3c3), to(#ebebeb)); background: -moz-linear-gradient(top, #c3c3c3, #ebebeb); border-color: #a6a6a6; border-top-color: #939393; border-bottom-color: #bcbcbc;


box-shadow: inset 0 -1px 0 #fff;

   		-webkit-box-shadow: inset 0 -1px 0 #fff;
   		-moz-box-shadow: inset 0 -1px 0 #fff;
   		-o-box-shadow: inset 0 -1px 0 #fff;

} button.default { color: #1c4257; background: #a3cde3; background: -webkit-gradient(linear, left top, left bottom, from(#b9e0f5), to(#85b2cb)); background: -moz-linear-gradient(top, #b9e0f5, #85b2cb); border: 1px solid #759bb1; border-top-color: #8ab0c6; border-bottom-color: #587e93;

} button.default:hover, button.default:focus { box-shadow: 0 0 7px #53a6d5;


box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 #fff;

   		-webkit-box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 #fff;
   		-moz-box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 #fff;
   		-o-box-shadow: 0 0 7px #53a6d5, inset 0 1px 0 #fff;

} button.default:active { background: #8abcd7; background: -webkit-gradient(linear, left top, left bottom, from(#81afc8), to(#b7def4)); background: -moz-linear-gradient(top, #81afc8, #b7def4); border-color: #6e94a9; border-top-color: #567c91; border-bottom-color: #88aec4;


box-shadow: inset 0 -1px 1px #fff;

   		-webkit-box-shadow: inset 0 -1px 1px #fff;
   		-moz-box-shadow: inset 0 -1px 1px #fff;
   		-o-box-shadow: inset 0 -1px 1px #fff;


} button[disabled], button[disabled]:active { color: #a7a7a7; background: #efefef; background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e1e1e1)); background: -moz-linear-gradient(top, #f6f6f6, #e1e1e1); border-color: #d4d4d4; border-top-color: #dedede; border-bottom-color: #c9c9c9; cursor: default; } button[disabled]:hover, button[disabled]:focus { box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; }

#dirbutton img { margin-top:-3px;}