Team:NTU Taiwan/stylesheet/index.css

From 2013.igem.org

Revision as of 08:12, 27 September 2013 by Ddmail2009 (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

{

word-wrap:break-word; } body{ background-image:url(""); color:black; font-family:'Happy Monkey', cursive, Helvetica, Arial, sans-serif; } p{ line-height:30px; text-indent:20px; } .content{ font-size:18px; } footer{ background-color:rgba(88, 67, 11, 0.63); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{ font-family:'Happy Monkey', "Helvetica Neue", Helvetica, Arial, sans-serif; } .pointer-cursor{ cursor:pointer; } .navbar{ background-color:blue; background-color:rgba(11, 47, 56, 0.97); } .navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav>li>a{ color:white; } .dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus{ color:inherit; background-color:inherit; }

navbar>li>a{

/*transition*/ -webkit-transition:all 0.5s ease-out 0.2s;

  -moz-transition:all 0.5s ease-out 0.2s;
    -o-transition:all 0.5s ease-out 0.2s;
       transition:all 0.5s ease-out 0.2s;

background-color:rgb(11,47,56); background-color:rgba(11, 47, 56, 0.97); }

navbar .active>a{

/*transition*/ -webkit-transition:all 0.5s ease-out;

  -moz-transition:all 0.5s ease-out;
    -o-transition:all 0.5s ease-out;
       transition:all 0.5s ease-out;

background-color:rgb(131, 177, 58) !important; background-color:rgba(131, 177, 58, 1) !important; } .navbar li a:hover{ /*transition*/ -webkit-transition:all 0.2s ease-out !important;

  -moz-transition:all 0.2s ease-out !important;
    -o-transition:all 0.2s ease-out !important;
       transition:all 0.2s ease-out !important;

background:rgb(50, 133, 171) !important; background-color:rgba(50, 133, 171, 1) !important; } .row{ margin-right:inherit; margin-left:inherit; } .divider{ border-bottom:1px dashed #0c0c0c; } .thanks img{ /*transition*/ -webkit-transition:all 0.2s ease-in;

  -moz-transition:all 0.2s ease-in;
    -o-transition:all 0.2s ease-in;
       transition:all 0.2s ease-in;

width:50px; } .thanks img:hover{ /*transition*/ -webkit-transition:all 0.5s ease-out;

  -moz-transition:all 0.5s ease-out;
    -o-transition:all 0.5s ease-out;
       transition:all 0.5s ease-out;

width:150px; } .divide{ margin-top:3%; margin-bottom:3%; } .blue-background{ /*transition*/ -webkit-transition:all 1s ease-out;

  -moz-transition:all 1s ease-out;
    -o-transition:all 1s ease-out;
       transition:all 1s ease-out;

background-color:rgba(61, 175, 197, 0.81); } .grey-background{ /*transition*/ -webkit-transition:all 1s ease-out;

  -moz-transition:all 1s ease-out;
    -o-transition:all 1s ease-out;
       transition:all 1s ease-out;

background-color:rgba(73, 83, 92, 0.89); } .green-background{ /*transition*/ -webkit-transition:all 1s ease-out;

  -moz-transition:all 1s ease-out;
    -o-transition:all 1s ease-out;
       transition:all 1s ease-out;

background-color:rgba(74, 170, 81, 0.78); } .red-background{ /*transition*/ -webkit-transition:all 1s ease-out;

  -moz-transition:all 1s ease-out;
    -o-transition:all 1s ease-out;
       transition:all 1s ease-out;

background-color:rgba(202, 76, 77, 0.88); } .yellow-background{ /*transition*/ -webkit-transition:all 1s ease-out;

  -moz-transition:all 1s ease-out;
    -o-transition:all 1s ease-out;
       transition:all 1s ease-out;

background-color:rgba(219, 162, 9, 0.87); } .purple-background{ /*transition*/ -webkit-transition:all 1s ease-out;

  -moz-transition:all 1s ease-out;
    -o-transition:all 1s ease-out;
       transition:all 1s ease-out;

background-color:rgba(156, 64, 168, 0.78); } .lightblue-background{ /*transition*/ -webkit-transition:all 1s ease-out;

  -moz-transition:all 1s ease-out;
    -o-transition:all 1s ease-out;
       transition:all 1s ease-out;

background-color:rgba(39, 201, 207, 0.44); } .pink-background{ /*transition*/ -webkit-transition:all 1s ease-out;

  -moz-transition:all 1s ease-out;
    -o-transition:all 1s ease-out;
       transition:all 1s ease-out;

background-color:rgba(233, 133, 133, 1); } .brown-background{ /*transition*/ -webkit-transition:all 1s ease-out;

  -moz-transition:all 1s ease-out;
    -o-transition:all 1s ease-out;
       transition:all 1s ease-out;

background-color:rgba(133, 58, 17, 0.66); } .color-rainbow{ /*animation*/ -webkit-animation:super-rainbow 25s infinite alternate linear;

  -moz-animation:super-rainbow 25s infinite alternate linear;
   -ms-animation:super-rainbow 25s infinite alternate linear;
    -o-animation:super-rainbow 25s infinite alternate linear;
       animation:super-rainbow 25s infinite alternate linear;

} @-webkit-keyframes super-rainbow{ 0% { background: rgba(39, 201, 207, 0.44); }

   14%  { background: rgba(61, 175, 197, 0.81); }
   28%  { background: rgba(156, 64, 168, 0.78); }
   42%  { background: rgba(235, 157, 157, 0.82); }
   56%  { background: rgba(202, 76, 77, 0.88); }
   70%  { background: rgba(133, 58, 17, 0.66); }
   84%  { background: rgba(219, 162, 9, 0.56); }
   100% { background: rgba(74, 170, 81, 0.78); }

} @-moz-keyframes super-rainbow{ 0% { background: rgba(39, 201, 207, 0.44); }

   14%  { background: rgba(61, 175, 197, 0.81); }
   28%  { background: rgba(156, 64, 168, 0.78); }
   42%  { background: rgba(235, 157, 157, 0.82); }
   56%  { background: rgba(202, 76, 77, 0.88); }
   70%  { background: rgba(133, 58, 17, 0.66); }
   84%  { background: rgba(219, 162, 9, 0.56); }
   100% { background: rgba(74, 170, 81, 0.78); }

} @-o-keyframes super-rainbow{ 0% { background: rgba(39, 201, 207, 0.44); }

   14%  { background: rgba(61, 175, 197, 0.81); }
   28%  { background: rgba(156, 64, 168, 0.78); }
   42%  { background: rgba(235, 157, 157, 0.82); }
   56%  { background: rgba(202, 76, 77, 0.88); }
   70%  { background: rgba(133, 58, 17, 0.66); }
   84%  { background: rgba(219, 162, 9, 0.56); }
   100% { background: rgba(74, 170, 81, 0.78); }

} @keyframes super-rainbow{ 0% { background: rgba(39, 201, 207, 0.44); }

   14%  { background: rgba(61, 175, 197, 0.81); }
   28%  { background: rgba(156, 64, 168, 0.78); }
   42%  { background: rgba(235, 157, 157, 0.82); }
   56%  { background: rgba(202, 76, 77, 0.88); }
   70%  { background: rgba(133, 58, 17, 0.66); }
   84%  { background: rgba(219, 162, 9, 0.56); }
   100% { background: rgba(74, 170, 81, 0.78); }

} .content h1.header{ font-size:90px; font-weight:700; text-shadow:2px 2px rgba(0, 0, 0, 0.5); text-align:center; line-height:1; margin-bottom:15px; letter-spacing:-2px; }

.content p.header{ font-size:26px; color:#fff; font-weight:100; text-align:center; line-height:1; text-shadow:2px 2px rgba(0, 0, 0, 0.5); } .content p{ text-align:justify; }

footer h5{

color:#dad8d4; border-bottom:1px solid #131519; padding-bottom:15px; margin-top:15px; }

preloader .container{

top:200px; } .essay .tip{ /*transition*/ -webkit-transition:all 1s ease-in-out;

  -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
       transition:all 1s ease-in-out;

font-size:10px; color:rgba(0,0,0,0.2); } .essay .tipReveal:hover ~ .tip{ /*transition*/ -webkit-transition:all 0.5s linear 0.4s;

  -moz-transition:all 0.5s linear 0.4s;
    -o-transition:all 0.5s linear 0.4s;
       transition:all 0.5s linear 0.4s;

font-size:16px; color:rgba(0,0,0,1); margin-bottom:10px; color:rgba(20, 20, 20, 1); } .index-item:hover .icon-light{ /*transition*/ -webkit-transition:all 0.5s ease-in-out;

  -moz-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
       transition:all 0.5s ease-in-out;

color:rgba(3, 245, 255, 0.91); } .photo-item:hover .icon-light{ /*transition*/ -webkit-transition:all 0.5s ease-in-out;

  -moz-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
       transition:all 0.5s ease-in-out;

color:rgb(3, 245, 255); color:rgba(3, 245, 255, 0.91); } .photo-item{ /*perspective*/ -webkit-perspective:500;

  -moz-perspective:500;
   -ms-perspective:500;
    -o-perspective:500;
       perspective:500;

/*transform-style*/ -webkit-transform-style:preserve-3d;

  -moz-transform-style:preserve-3d;
   -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
       transform-style:preserve-3d;

/*transition-duration*/ -webkit-transition-duration:0.5s;

  -moz-transition-duration:0.5s;
    -o-transition-duration:0.5s;
       transition-duration:0.5s;

} img.pull-right{ margin-left:20px; } img.pull-left{ margin-right:20px; } img{ /*transition*/ -webkit-transition:all 1s ease-in-out;

  -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
       transition:all 1s ease-in-out;

} .content img:hover{ /*border-radius*/ -webkit-border-radius:6px;

  -moz-border-radius:6px;
       border-radius:6px;

/*box-shadow*/ -webkit-box-shadow:1px 1px 50px rgba(27, 58, 57, 1);

  -moz-box-shadow:1px 1px 50px rgba(27, 58, 57, 1);
       box-shadow:1px 1px 50px rgba(27, 58, 57, 1);

/*transition*/ -webkit-transition:all 1s ease-in 0.3s;

  -moz-transition:all 1s ease-in 0.3s;
    -o-transition:all 1s ease-in 0.3s;
       transition:all 1s ease-in 0.3s;

} .content img.nohover:hover{ /*border-radius*/ -webkit-border-radius:0;

  -moz-border-radius:0;
       border-radius:0;

/*box-shadow*/ -webkit-box-shadow:none;

  -moz-box-shadow:none;
       box-shadow:none;

/*transition*/ -webkit-transition:all 1s ease-in 0.3s;

  -moz-transition:all 1s ease-in 0.3s;
    -o-transition:all 1s ease-in 0.3s;
       transition:all 1s ease-in 0.3s;

} .no-vert-padding{ padding-top:0; padding-bottom:0; } .no-hori-padding{ padding-left:0; padding-right:0; } .no-top-margin{ margin-top:0; } .no-bottom-margin{ margin-bottom:0; } section{ padding:3%; } .content>:first-child{ padding-top:5%; }

ui-datepicker-div{

display:none; } .text-center{ text-align:center !important; } /* If window < 992px */ @media(max-width: 992px){ .navbar-toggle {

       display:inherit;

} .navbar-header{ float:right; } .navbar-collapse.collapse{ display:none !important; } .content>:first-child{ padding-top:70px; }

index-icons{

display:none; } .content div p{ background-color:rgba(200,200,200,0.3); padding:10px 10px 10px 10px; /*border-radius*/ -webkit-border-radius:5px;

  -moz-border-radius:5px;
       border-radius:5px;

/*box-shadow*/ -webkit-box-shadow:1px 1px 10px rgba(200, 200, 200, 0.8);

  -moz-box-shadow:1px 1px 10px rgba(200, 200, 200, 0.8);
       box-shadow:1px 1px 10px rgba(200, 200, 200, 0.8);

font-size:16px; } .content section p{ background-color:transparent; padding:0; /*border-radius*/ -webkit-border-radius:0;

  -moz-border-radius:0;
       border-radius:0;

/*box-shadow*/ -webkit-box-shadow:0 0 0 black;

  -moz-box-shadow:0 0 0 black;
       box-shadow:0 0 0 black;

font-size:16px; } }

@media(max-width: 1200px){ .navbar-right{

       display:none;

} }

/* If window > 992 px*/ @media(min-width: 992px){ .content>:first-child{ padding-top: 5%; } .index-item div{ /*transition*/ -webkit-transition:all 1s ease-in-out;

  -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
       transition:all 1s ease-in-out;

color:black; color:rgba(0, 0, 0, 0.2); } .index-item:hover div{ /*transition*/ -webkit-transition:all 0.2s ease-in-out;

  -moz-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
       transition:all 0.2s ease-in-out;

color:inherit; /*transform*/ -webkit-transform:scale(1.4);

  -moz-transform:scale(1.4);
   -ms-transform:scale(1.4);
    -o-transform:scale(1.4);
       transform:scale(1.4);

} .photo-item div{ /*transition*/ -webkit-transition:all 1s ease-in-out;

  -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
       transition:all 1s ease-in-out;

color:black; color:rgba(0, 0, 0, 0.2); /*transform*/ -webkit-transform:rotateY(25deg);

  -moz-transform:rotateY(25deg);
   -ms-transform:rotateY(25deg);
    -o-transform:rotateY(25deg);
       transform:rotateY(25deg);

} .photo-item:hover div{ /*transition*/ -webkit-transition:all 0.2s ease-out;

  -moz-transition:all 0.2s ease-out;
    -o-transition:all 0.2s ease-out;
       transition:all 0.2s ease-out;

color:inherit; /*transform*/ -webkit-transform:scale(1.4) rotateY(0deg);

  -moz-transform:scale(1.4) rotateY(0deg);
   -ms-transform:scale(1.4) rotateY(0deg);
    -o-transform:scale(1.4) rotateY(0deg);
       transform:scale(1.4) rotateY(0deg);

} }

.img-gallery, .tilt-gallery{ list-style:none; margin-bottom:0; } .img-gallery img, .tilt-gallery img{ width:100%; } .tilt-gallery img{ margin-bottom:20px; } .img-gallery li, .tilt-gallery li{ /*transition*/ -webkit-transition:all 0.6s ease-out 0.2s;

  -moz-transition:all 0.6s ease-out 0.2s;
    -o-transition:all 0.6s ease-out 0.2s;
       transition:all 0.6s ease-out 0.2s;

cursor:pointer; display:inline-block; width:5%; min-width:80px; } .img-gallery.img-2x li, .tilt-gallery.img-2x li{ /*transition*/ -webkit-transition:all 0.6s ease-out 0.2s;

  -moz-transition:all 0.6s ease-out 0.2s;
    -o-transition:all 0.6s ease-out 0.2s;
       transition:all 0.6s ease-out 0.2s;

cursor:pointer; display:inline-block; width:10%; min-width:160px; } .img-gallery li:hover{ /*transition*/ -webkit-transition:all 0.2s ease-out;

  -moz-transition:all 0.2s ease-out;
    -o-transition:all 0.2s ease-out;
       transition:all 0.2s ease-out;

width:10%; min-width:160px; } .img-gallery li.img-3x:hover{ /*transition*/ -webkit-transition:all 0.2s ease-out;

  -moz-transition:all 0.2s ease-out;
    -o-transition:all 0.2s ease-out;
       transition:all 0.2s ease-out;

width:15%; min-width:240px; } .img-gallery li.img-4x:hover{ /*transition*/ -webkit-transition:all 0.2s ease-out;

  -moz-transition:all 0.2s ease-out;
    -o-transition:all 0.2s ease-out;
       transition:all 0.2s ease-out;

width:20%; min-width:320px; } .img-gallery li.active{ /*transition*/ -webkit-transition:all 0.2s ease-out;

  -moz-transition:all 0.2s ease-out;
    -o-transition:all 0.2s ease-out;
       transition:all 0.2s ease-out;

width:10%; min-width:160px; /*box-shadow*/ -webkit-box-shadow:5px 1px 20px black;

  -moz-box-shadow:5px 1px 20px black;
       box-shadow:5px 1px 20px black;

/*border-radius*/ -webkit-border-radius:3px;

  -moz-border-radius:3px;
       border-radius:3px;

} .img-gallery li.img-3x.active{ /*transition*/ -webkit-transition:all 0.2s ease-out;

  -moz-transition:all 0.2s ease-out;
    -o-transition:all 0.2s ease-out;
       transition:all 0.2s ease-out;

width:15%; min-width:240px; /*box-shadow*/ -webkit-box-shadow:5px 1px 20px black;

  -moz-box-shadow:5px 1px 20px black;
       box-shadow:5px 1px 20px black;

/*border-radius*/ -webkit-border-radius:3px;

  -moz-border-radius:3px;
       border-radius:3px;

} .img-gallery li.img-4x.active{ /*transition*/ -webkit-transition:all 0.2s ease-out;

  -moz-transition:all 0.2s ease-out;
    -o-transition:all 0.2s ease-out;
       transition:all 0.2s ease-out;

width:20%; min-width:320px; /*box-shadow*/ -webkit-box-shadow:5px 1px 20px black;

  -moz-box-shadow:5px 1px 20px black;
       box-shadow:5px 1px 20px black;

/*border-radius*/ -webkit-border-radius:3px;

  -moz-border-radius:3px;
       border-radius:3px;

} .template{ display:none; } footer a{ color:#0E496B; } .dp_calendar .div_dates li{ width:inherit; font-size:inherit; font-family:inherit; } .dp_calendar .main_date{ font-size:40px; } .tooltip-inner{ font-size:14px; } .essay li{

 margin-top: 10px;
 margin-bottom: 10px;

} .indent{

 list-style: none;

} .essay table{

 box-shadow: 0px 1px 20px rgba(200,201,200,0.8);

} .essay table tr{

 border-bottom: 1px solid;

}

.hover-shodow:hover{

 -webkit-transition: all 0.3s linear;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.78);

} .hover-no-underline:hover{

 text-decoration: none;

}

appMovie{

/*animation*/ -webkit-animation:bluePulse 5s infinite;

  -moz-animation:bluePulse 5s infinite;
   -ms-animation:bluePulse 5s infinite;
    -o-animation:bluePulse 5s infinite;
       animation:bluePulse 5s infinite;

}

TaiwanLogo{

/*transition*/ -webkit-transition:all 1s linear;

  -moz-transition:all 1s linear;
    -o-transition:all 1s linear;
       transition:all 1s linear;

/*animation*/ -webkit-animation:TaiwanLogo 6s infinite;

  -moz-animation:TaiwanLogo 6s infinite;
   -ms-animation:TaiwanLogo 6s infinite;
    -o-animation:TaiwanLogo 6s infinite;
       animation:TaiwanLogo 6s infinite;

width:20%; } @-webkit-keyframes TaiwanLogo{ 0%{

       -webkit-transform: rotateY(0deg); opacity: 1; -webkit-animation-timing-function: ease-in-out;
   }
   10%{
       -webkit-transform: rotateY(0deg) scale(1.1); opacity: 0.9; -webkit-animation-timing-function: ease-in-out;
   }
   33%{
       -webkit-transform: rotateY(10deg) scale(1.1); -webkit-box-shadow: -10px 10px 10px rgba(1,1,1,0.2); opacity: 0.9; -webkit-animation-timing-function: ease-in-out;
   }
   66%{
       -webkit-transform: rotateY(-10deg) scale(1.1); -webkit-box-shadow: 10px 10px 10px rgba(1,1,1,0.2); opacity: 0.9; -webkit-animation-timing-function: ease-in-out;
   }
   90%{
       -webkit-transform: rotateY(-0deg) scale(1.1); opacity: 0.9; -webkit-animation-timing-function: ease-in-out;
   }
   100%{
       -webkit-transform: rotateY(0deg); opacity: 1;
   }

} @-moz-keyframes TaiwanLogo{ 0%{

       -moz-transform: rotateY(0deg); opacity: 1; -moz-animation-timing-function: ease-in-out;
   }
   10%{
       -moz-transform: rotateY(0deg) scale(1.1); opacity: 0.9; -moz-animation-timing-function: ease-in-out;
   }
   33%{
       -moz-transform: rotateY(10deg) scale(1.1); -moz-box-shadow: -10px 10px 10px rgba(1,1,1,0.2); opacity: 0.9; -moz-animation-timing-function: ease-in-out;
   }
   66%{
       -moz-transform: rotateY(-10deg) scale(1.1); -moz-box-shadow: 10px 10px 10px rgba(1,1,1,0.2); opacity: 0.9; -moz-animation-timing-function: ease-in-out;
   }
   90%{
       -moz-transform: rotateY(-0deg) scale(1.1); opacity: 0.9; -moz-animation-timing-function: ease-in-out;
   }
   100%{
       -moz-transform: rotateY(0deg); opacity: 1;
   }

} @-o-keyframes TaiwanLogo{ 0%{

       -o-transform: rotateY(0deg); opacity: 1; -o-animation-timing-function: ease-in-out;
   }
   10%{
       -o-transform: rotateY(0deg) scale(1.1); opacity: 0.9; -o-animation-timing-function: ease-in-out;
   }
   33%{
       -o-transform: rotateY(10deg) scale(1.1); box-shadow: -10px 10px 10px rgba(1,1,1,0.2); opacity: 0.9; -o-animation-timing-function: ease-in-out;
   }
   66%{
       -o-transform: rotateY(-10deg) scale(1.1); box-shadow: 10px 10px 10px rgba(1,1,1,0.2); opacity: 0.9; -o-animation-timing-function: ease-in-out;
   }
   90%{
       -o-transform: rotateY(-0deg) scale(1.1); opacity: 0.9; -o-animation-timing-function: ease-in-out;
   }
   100%{
       -o-transform: rotateY(0deg); opacity: 1;
   }

} @keyframes TaiwanLogo{ 0%{

       transform: rotateY(0deg); opacity: 1; animation-timing-function: ease-in-out;
   }
   10%{
       transform: rotateY(0deg) scale(1.1); opacity: 0.9; animation-timing-function: ease-in-out;
   }
   33%{
       transform: rotateY(10deg) scale(1.1); box-shadow: -10px 10px 10px rgba(1,1,1,0.2); opacity: 0.9; animation-timing-function: ease-in-out;
   }
   66%{
       transform: rotateY(-10deg) scale(1.1); box-shadow: 10px 10px 10px rgba(1,1,1,0.2); opacity: 0.9; animation-timing-function: ease-in-out;
   }
   90%{
       transform: rotateY(-0deg) scale(1.1); opacity: 0.9; animation-timing-function: ease-in-out;
   }
   100%{
       transform: rotateY(0deg); opacity: 1;
   }

}