Team:HIT-Harbin/HIT-Harbin main.css

From 2011.igem.org

Revision as of 10:38, 25 November 2011 by Liu525 (Talk | contribs)
<style type="text/css">
  • { margin:0; padding:0;} 
       p {padding:10px;word-wrap:break-word;}
       
       html,body {

font-family: "Lucida Sans Unicode",verdana,helvetica,sans-serif; 

       text-decoration:none;
       background:#91d0e1;
                       }

       a{TEXT-DECORATION:none}
       a:hover{TEXT-DECORATION:none}

/* Global Form Styles */ 

    #header{
    width: 100%;
   height: 300px;
   margin:0 auto;   
   padding:0;
   background-color: transparent;
    }

   #banner{
    width: 1000px;
    height: 250px;
    margin:0 auto;   
    padding:0;
    border:0;
   background:url( Banner_HIT-Harbin.jpg);  
   position: relative;
   margin-bottom: 0px;
   -moz-border-radius: 20px 20px 0 0;
   -webkit-border-radius: 20px 20px 0 0;
   border-radius:20px 20px 0 0;
   -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 12px 7px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 12px 7px;
   -goog-ms-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 12px 7px;
   box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 12px 7px;

}

  1. igem_logo {

float:right; height:90px; width:90px; }

#HIT_container{ 

              width: 100%;
              margin:0;
              padding:0;
              border-top: 3px solid #ccc;
              border-right: 0;
              border-bottom: 10px solid #0F67A1;
              border-left: 0;
              background:#fff;

} 

        #HIT_mainbox{
           width: 1000px;

margin:0 auto; 

           padding:0;
           height:float; 
           border: 0;
           background:#fff;
               }



      #footer{ 
     width: 100%;
     margin: 0 auto; 
     border: 0;
    color:#9ccbf7;
     }

/* 设置cadre */

.cadre{ 

   text-align:left;
   font-family: "Lucida Sans Unicode",verdana,helvetica,sans-serif;
   font-size:15px;
   line-height: 1.6em;
   padding: 0px 18px;
   width :960px;
   height:float; 
   margin-top : 5px;
   border: 2px solid #ccc;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px; 
   -goog-ms-border-radius: 10px; 
   border-radius: 10px;
   }

/* -------Team------ */ .team_info { padding:10px; padding-top:15px; margin-right:6px; position:relative; float:left; font-family: "Lucida Sans Unicode",verdana,helvetica,sans-serif; font-size: 14px; width:350px; height:240px; border: 4px solid #7ECBDF; background: white; -moz-border-radius: 20px; -webkit-border-radius: 20px; -goog-ms-border-radius: 20px; border-radius: 20px; -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 12px 7px; -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 12px 7px; -goog-ms-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 12px 7px; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 12px 7px; border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; } .team_info p{ padding:0px;width:165px;} .team_info div{ float:left;width:175px;height:230px;} .team_intro{ width:180px;} .team_intro th{ float:left;} /* ------Team END------ */

.menu { width:100%; height:50px; margin:0;

background-color:#0F67A1; }

.menu ul{ 

   padding:0;
   margin:0;
   padding:0px 0px 0px 320px;
   font-family:Arial;

} .menu ul li{ 

   float: left;
   list-style: none;
   position: relative;
   text-align: center;
   margin:0px;

} .menu ul li a{ 

   color: black;
   text-decoration: none;
   font-weight: bold;

}

@import url(http://fonts.googleapis.com/css?family=Droid+Sans:bold+Lobster); @import url(http://fonts.googleapis.com/css?family=Lobster); @import url(pictos/pictos.css);


/* -------------- THE button -------------- */ .button {

/* text */ text-decoration: none; font: 16px/1em 'Droid Sans', sans-serif; font-weight: bold; text-shadow: rgba(255,255,255,.5) 0 1px 0; -webkit-user-select: none; -moz-user-select: none; user-select: none;


/* layout */ padding: .5em .6em .4em .6em; margin: 8px; display: inline-block; position: relative;

-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;

/* effects */ border-top: 1px solid rgba(255,255,255,0.8); border-bottom: 1px solid rgba(0,0,0,0.1);

background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png); background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(noise.png); background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);

-webkit-transition: background .2s ease-in-out; -moz-transition: background .2s ease-in-out; transition: background .2s ease-in-out;

/* color */ color: hsl(0, 0%, 40%) !important; background-color: hsl(0, 0%, 75%);

-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ }

/* -------------- button (tag) -------------- */

button.button { border-left: none; border-right: none; } button.button:hover { cursor: pointer; }


/* -------------- icon -------------- */ .button:before { font: 1.2em/0 'Pictos', sans-serif; content: attr(data-icon); /* gets the icon value from the custom data attribute and puts it infront of the button label */ margin-right: 0.4em;


} /* icon only */ .icon { font-weight: normal; font-style: normal; text-indent: -999em; } .icon:before { margin-right: 0; display: block; height: 0; text-indent: 0px; }


/* -------------- colours -------------- */

.button.orange { color: hsl(39, 100%, 30%) !important; background-color: hsl(39, 100%, 50%);

-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ } .button.orange:hover { background-color: hsl(39, 100%, 65%); }


.button.blue { color: hsl(208, 50%, 40%) !important; background-color: hsl(208, 100%, 75%);

-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ } .button.blue:hover { background-color: hsl(208, 100%, 83%); }

.button.green { color: hsl(88, 70%, 30%) !important; background-color: hsl(88, 70%, 60%); -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ } .button.green:hover { background-color: hsl(88, 70%, 75%); }

.button.pink { color: hsl(340, 100%, 30%) !important; background-color: hsl(340, 100%, 75%); -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ -moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */ } .button.pink:hover { background-color: hsl(340, 100%, 83%); }


.button.transparent { color: rgba(0,0,0,0.5) !important; } .button.transparent, .button.transparent:hover, .button.transparent:active { background-color: transparent; background-image: none; } .button.transparent:hover { opacity: .9; }


/* -------------- States -------------- */

.button:hover { background-color: hsl(0, 0%, 83%); }


.button:active { background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png); background-image: -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png); background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);

-webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.4) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ -moz-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.4) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.4) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

-webkit-transform: translateY(.2em); -moz-transform: translateY(.2em); transform: translateY(.2em); }

.button:focus { outline: none; color: rgba(254,255,255,0.9) !important; text-shadow: rgba(0,0,0,0.2) 0 1px 2px; }

.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover { opacity: .5; cursor: default; color: rgba(0,0,0,0.2) !important; text-shadow: none !important; background-color: rgba(0,0,0,0.05); background-image: none; border-top: none;

-webkit-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.3) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ -moz-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.3) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */ box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.3) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

-webkit-transform: translateY(5px); -moz-transform: translateY(5px); transform: translateY(5px); }

/* -------------- Fonts -------------- */

.serif { font-family: 'Lobster', serif; font-weight: normal; }


/* -------------- Sizes -------------- */

.xs { font-size: 16px; } .xl { font-size: 32px; }


/* -------------- Materials -------------- */

.button.glossy:after, .button.glass:after { content: ""; position: absolute; 

   width: 		90%;
   height: 	60%;
   top: 		0;
   left: 		5%;    
   
   -webkit-border-radius: 	.5em .5em 1em 1em / .5em .5em 2em 2em;    
   -moz-border-radius: 	.5em .5em 1em 1em / .5em .5em 2em 2em;
   border-radius: 			.5em .5em 1em 1em / .5em .5em 2em 2em;
   
   background-image: 		-webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),
   							color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );	
   background-image: 		-moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) );	
   background-image: 		gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),
   							color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );

} .button.glossy:active:after, .button.glass:active:after, .button.disabled:after, .button[disabled]:after 

{ opacity: .6; }

.button.icon.glossy:after, .button.icon.glass:after { height: 75% ; }

/* -------------- Glass + Transparent -------------- */ .button.glass { text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,0.18) 0 .18em .15em; } .button.glass:active { text-shadow: rgba(255,255,255,.3) 0 1px 0, rgba(0,0,0,0.15) 0 .18em .15em; }


/* -------------- Shapes -------------- */

/* round */ .round, .round.glossy:after, .round.glass:after { border-top: none; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; }

/* oval */ .oval { border-top: none; padding-left: .8em; padding-right: .8em; -webkit-border-radius: 5em / 2em; -moz-border-radius: 5em / 2em; border-radius: 5em / 2em; } .oval.glossy:after, .oval.glass:after { top: 5%; -webkit-border-radius: 5em / 2em 2em 1em 1em; -moz-border-radius: 5em / 2em 2em 1em 1em; border-radius: 5em / 2em 2em 1em 1em; } .oval.icon { padding-left: .8em; padding-right: .8em; -webkit-border-radius: 1.5em / 1em; -moz-border-radius: 1.5em / 1em; border-radius: 1.5em / 1em; } .oval.icon.glossy:after, .oval.icon.glass:after { -webkit-border-radius: 1.5em / 1em; -moz-border-radius: 1.5em / 1em; border-radius: 1.5em / 1em; }

/* brackets */ .brackets, .brackets.glossy:after, .brackets.glass:after { border-top: none; -webkit-border-radius: .5em / 1em; -moz-border-radius: .5em / 1em; border-radius: .5em / 1em; }

/* skew */ .skew { border-top: none; padding-right: 1.2em; padding-left: 0.8em; -webkit-border-radius: 5em 1em / 5em 1em; -moz-border-radius: 5em 1em / 5em 1em; border-radius: 5em 1em / 5em 1em; } .skew.glossy:after, .skew.glass:after { left: 10%; -webkit-border-radius: 7em 1em / 5em 1em; -moz-border-radius: 7em 1em / 5em 1em; border-radius: 7em 1em / 5em 1em; } .skew.icon { padding-right: .9em; padding-left: .8em; }

/* back */ .back, .back.glossy:after, .back.glass:after { border-top-color: rgba(255,255,255,0.5); -webkit-border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em; -moz-border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em; border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em; } .back.glossy:after, .back.glass:after { left: 6%; width: 88%; }

/* knife */ .knife { padding-left: 1.5em; -webkit-border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em; -moz-border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em; border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em; } .knife.glossy:after, .knife.glass:after { left: 3%; width: 97%; -webkit-border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em; -moz-border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em; border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em; } .knife.glossy.icon:after, .knife.glass.icon:after { left: 5%; width: 95%; -webkit-border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em; -moz-border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em; border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em; }

/* shield */ .shield, .shield.glossy:after, .shield.glass:after { -webkit-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; -moz-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; } .shield { padding-left: .8em; padding-right: .8em; } .shield.icon { padding-left: .6em; padding-right: .6em; }

/* drop */ .drop { border-top: none; -webkit-border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em; -moz-border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em; border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em; } .drop.glossy:after, .drop.glass:after { left: 4%; -webkit-border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em; -moz-border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em; border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em; } .drop.icon { padding-right: .6em; }


/* morph */ .morph { border-top: none; -webkit-border-radius: 5em / 2em; -moz-border-radius: 5em / 2em; border-radius: 5em / 2em; -webkit-transition: -webkit-border-radius .3s ease-in-out; -moz-transition: -moz-border-radius .3s ease-in-out; transition: -moz-border-radius .3s ease-in-out; } .morph:hover { -webkit-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; -moz-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; } .morph:active { -webkit-border-radius: .3em; -moz-border-radius: .3em; border-radius: .3em; } .morph:after { display: none; }



/* Some ugly hacks for FF. Thanks to David Hund for some help - http://valuedstandards.com/static/test/buttons/ */ @-moz-document url-prefix() { .button { text-align: center; } .icon { padding: .5em 1em; } .icon:before { margin-left: -.42em; float: left; }

.drop.icon { padding-right: 1.1em; } .shield.icon { padding-left: 1.1em; padding-right: 1.1em; } .skew.icon { padding-right: 1.4em; padding-left: 1.3em; } .oval.icon { padding-left: 1.3em; padding-right: 1.3em; } .knife { padding-left: 2em; } }

</style>

Retrieved from "http://2011.igem.org/Team:HIT-Harbin/HIT-Harbin_main.css"