Team:UNebraska-Lincoln/css/Bio

@charset "UTF-8"; /* CSS Document */ /* @font-face definitions */

@font-face {

 font-family: 'KulminoituvaRegular';
 src: url('../fonts/kulminoituva.eot');
 src: local('Kulminoituva Regular'), local('Kulminoituva'), url('../fonts/kulminoituva.woff') format('woff'), url('../fonts/kulminoituva.ttf') format('truetype'), url('../fonts/kulminoituva.svg#Kulminoituva') format('svg');

}

@font-face {

 font-family: 'NotethisRegular';
 src: url('../fonts/Note_this.eot');
 src: local('Note this Regular'), local('Notethis'), url('../fonts/Note_this.woff') format('woff'), url('../fonts/Note_this.ttf') format('truetype'), url('../fonts/Note_this.svg#Notethis') format('svg');

}

/* General styling */

body {

 background:#202020;
 font-family: NotethisRegular, Verdana, Arial, sans-serif;
 font-size:55%;
 color:#202020;

} p1{

  font-family: NotethisRegular, Verdana, Arial, sans-serif;
    font-size:40px;
color:white;
left-align: 50px;
}

h1, h2, h3, h4, h5, h6 {

 font-family: KulminoituvaRegular, "Arial Black", Gadget, sans-serif;
 font-size:1.5em;

}

wrapper {

height: 800px;

 width:1000px;
 margin:0 auto;
 text-align:center;
 padding-top:50px;

}

/* Index Card Styling */

ul#index_cards {

 margin-top:50px;
 text-align:center;

}

ul#index_cards li {

 background:white;
 height:450px;
 width:300px;
 display:block;
 float:left;
 border:1px solid #666;
 padding:25px 10px;
 position:relative;
 border: 2px solid #29528D;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-box-shadow: 2px 2px 10px #000;
 -webkit-box-shadow: 2px 2px 10px #000;
 -moz-transition: all 0.5s ease-in-out;
 -webkit-transition: all 0.5s ease-in-out;

}

card-1 {

 -webkit-transform: rotate(-20deg);
 -moz-transform: rotate(20deg);
 z-index:1;
 left:150px;
 top:40px;

}

card-2 {

 -webkit-transform: rotate(10deg);
 -moz-transform: rotate(-10deg);
 z-index:2;
 left:70px;
 top:10px;

}

card-3 {

 background-color:#69732B;
 z-index:3;

}

card-4 {

 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 z-index:3;
 right:70px;
 top:10px;

}

card-5 {

 -webkit-transform: rotate(20deg);
 -moz-transform: rotate(20deg);
 z-index:2;
 right:100px;
 top:40px;

}

card-6 {

 -webkit-transform: rotate(-20deg);
 -moz-transform: rotate(-20deg);
 z-index:1;
 left:150px;
 top:40px;

}

card-7 {

 -webkit-transform: rotate(-10deg);
 -moz-transform: rotate(10deg);
 z-index:3;
 right:25px;
 top:10px;

}

card-8{

 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 z-index:3;
 right:30px;
 top:10px;

}

card-9 {

 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 z-index:3;
 right:100px;
 top:10px;

}

card-10 {

 -webkit-transform: rotate(-12deg);
 -moz-transform: rotate(0deg);
 z-index:3;
 right:90px;
 top:10px;

}

card-11 {

 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 z-index:3;
 left:150px;
 top:10px;

}

card-12 {

 -webkit-transform: rotate(10deg);
 -moz-transform: rotate(0deg);
 z-index:3;
 left:150px;
 top:10px;

}

/* Hover States */

ul#index_cards li:hover {

 z-index:4;

}

card-1:hover {

 -moz-transform: scale(1.1) rotate(-18deg);
    -webkit-transform: scale(1.1) rotate(-18deg);

}

card-2:hover {

 -moz-transform: scale(1.1) rotate(-8deg);
  -webkit-transform: scale(1.1) rotate(8deg);

}

card-3:hover {

 -moz-transform: scale(1.1) rotate(2deg);
  -webkit-transform: scale(1.1) rotate(2deg);

}

card-4:hover {

 -moz-transform: scale(1.1) rotate(8deg);
  -webkit-transform: scale(1.1) rotate(8deg);

}

card-5:hover {

 -moz-transform: scale(1.1) rotate(22deg);
  -webkit-transform: scale(1.1) rotate(22deg);

}

card-6:hover {

 -moz-transform: scale(1.1) rotate(-18deg);
  -webkit-transform: scale(1.1) rotate(-18deg);

}

card-7:hover {

 -moz-transform: scale(1.1) rotate(12deg);
  -webkit-transform: scale(1.1) rotate(-12deg);

}

card-8:hover {

 -moz-transform: scale(1.1) rotate(-12deg);
  -webkit-transform: scale(1.1) rotate(12deg);

}

card-9:hover {

 -moz-transform: scale(1.1) rotate(-12deg);
  -webkit-transform: scale(1.1) rotate(12deg);

}

card-10:hover {

 -moz-transform: scale(1.1) rotate(12deg);
  -webkit-transform: scale(1.1) rotate(-12deg);

}

card-11:hover {

 -moz-transform: scale(1.1) rotate(-12deg);
  -webkit-transform: scale(1.1) rotate(12deg);

}

card-12:hover {

 -moz-transform: scale(1.1) rotate(12deg);
  -webkit-transform: scale(1.1) rotate(-12deg);

}

/* Content Styling */

ul#index_cards li img {

 margin-top:7px;
 background:#eee;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-box-shadow: 0px 0px 5px #aaa;
 -webkit-box-shadow: 0px 0px 5px #aaa;

}

ul#index_cards li p {

 margin-top:4px;
 text-align:left;
 line-height:20px;

}

file:///Users/phuongninh96/Desktop/IGEM/Website/Version%201/css/Style_indexCard.css