Team:NTU Taiwan/stylesheet/index.css

From 2013.igem.org

(Difference between revisions)
(Created page with "*{ word-wrap: break-word; } body{ background-image: url("../images/icon/1.png"); color: black; font-family: 'Happy Monkey', cursive, Helvetica, Arial, sans-serif...")
Line 11: Line 11:
p{
p{
     line-height: 30px;
     line-height: 30px;
 +
    text-indent: 36px;
}
}
Line 241: Line 242:
.content p{
.content p{
     text-align: justify;
     text-align: justify;
-
   
 
}
}
Line 370: Line 370:
#ui-datepicker-div{
#ui-datepicker-div{
     display: none;
     display: none;
 +
}
 +
 +
.text-center{
 +
    text-align: center !important;
}
}
Line 394: Line 398:
     #index-icons{
     #index-icons{
         display: none;
         display: none;
 +
    }
 +
 +
    .content div p {
 +
        background-color: rgba(200,200,200,0.3);
 +
        padding: 10px 10px 10px 10px;
 +
        border-radius: 5px;
 +
        box-shadow: 1px 1px 10px rgba(200, 200, 200, 0.8);
 +
        font-size: 16px;
 +
    }
 +
 +
    .content section p {
 +
        background-color: transparent;
 +
        padding: 0;
 +
        border-radius: 0;
 +
        box-shadow: 0 0 0 black;
 +
        font-size: 16px;
     }
     }
}
}
Line 569: Line 589:
.dp_calendar .main_date {
.dp_calendar .main_date {
-
     font-size: 50px;
+
     font-size: 40px;
-
    font-family: 'Open Sans Condensed', sans-serif;
+
}
}
.tooltip-inner{
.tooltip-inner{
     font-size: 14px;
     font-size: 14px;
 +
}
 +
 +
#appMovie{
 +
    -webkit-animation: bluePulse 5s infinite;
 +
    -moz-animation: bluePulse 5s infinite;
 +
    -o-animation: bluePulse 5s infinite;
 +
    animation: bluePulse 5s infinite;
}
}

Revision as of 16:45, 26 September 2013

  • { 
   word-wrap: break-word;

}

body{ 

   background-image: url("../images/icon/1.png");
   color: black;
   font-family: 'Happy Monkey', cursive, Helvetica, Arial, sans-serif;

}

p{ 

   line-height: 30px;
   text-indent: 36px;

}

.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;

}

  1. navbar>li>a{ 
   -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);

}

  1. navbar .active>a{ 
   -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{ 

   -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{ 

   -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{ 

   -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{ 

   -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{ 

   -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{ 

   -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{ 

   -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{ 

   -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{ 

   -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{ 

   -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{ 

   -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{ 

   -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{ 

   -webkit-animation: super-rainbow 25s infinite alternate linear;
   -moz-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;

}

  1. footer h5 { 
   color: #dad8d4;
   border-bottom: 1px solid #131519;
   padding-bottom: 15px;
   margin-top: 15px;

}


  1. preloader .container{ 
   top: 200px;

}

.essay .tip{ 

   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   font-size: 10px;
   color: rgba(0,0,0,0.2);

}

.essay .tipReveal:hover ~ .tip{ 

   -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{ 

   -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{ 

   -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{ 

   -webkit-perspective: 500;
   perspective: 500;

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

   -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{ 

   -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: 6px;
   box-shadow: 1px 1px 50px rgba(27, 58, 57, 1);
   -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: 0;
   box-shadow: none;
   -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%;

}

  1. 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: 5px;
       box-shadow: 1px 1px 10px rgba(200, 200, 200, 0.8);
       font-size: 16px;
   }

   .content section p {
       background-color: transparent;
       padding: 0;
       border-radius: 0;
       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{
       -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{
       -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;
       -webkit-transform: scale(1.4);
       transform: scale(1.4);
   }

   .photo-item div{
       -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);
       -webkit-transform: rotateY(25deg);
       transform: rotateY(25deg);
   }

   .photo-item:hover div{
       -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;
       -webkit-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{ 

   -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 { 

   -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{ 

   -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{ 

   -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{ 

   -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{ 

   -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: 5px 1px 20px black;
   border-radius: 3px;

}

.img-gallery li.img-3x.active{ 

   -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: 5px 1px 20px black;
   border-radius: 3px;

}

.img-gallery li.img-4x.active{ 

   -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: 5px 1px 20px black;
   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;

}

  1. appMovie{ 
   -webkit-animation: bluePulse 5s infinite;
   -moz-animation: bluePulse 5s infinite;
   -o-animation: bluePulse 5s infinite;
   animation: bluePulse 5s infinite;

}

  1. TaiwanLogo{ 
   transition: all 1s linear;
   -webkit-animation: TaiwanLogo 6s infinite;
   -moz-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;
   }

}

Retrieved from "http://2013.igem.org/Team:NTU_Taiwan/stylesheet/index.css"