Team:NTU Taiwan/stylesheet/index.css

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
*{
*{
-
    word-wrap: break-word;
+
word-wrap:break-word;
}
}
-
 
body{
body{
-
    background-image: url("../images/icon/1.png");
+
background-image:url("../images/icon/1.png");
-
    color: black;
+
color:black;
-
    font-family: 'Happy Monkey', cursive, Helvetica, Arial, sans-serif;
+
font-family:'Happy Monkey', cursive, Helvetica, Arial, sans-serif;
}
}
-
 
p{
p{
-
    line-height: 30px;
+
line-height:30px;
-
    text-indent: 36px;
+
text-indent:20px;
}
}
-
 
.content{
.content{
-
    font-size: 18px;
+
font-size:18px;
}
}
-
 
footer{
footer{
-
    background-color: rgba(88, 67, 11, 0.63);
+
background-color:rgba(88, 67, 11, 0.63);
}
}
-
 
+
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
-
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+
font-family:'Happy Monkey', "Helvetica Neue", Helvetica, Arial, sans-serif;
-
    font-family: 'Happy Monkey', "Helvetica Neue", Helvetica, Arial, sans-serif;
+
}
}
-
 
.pointer-cursor{
.pointer-cursor{
-
    cursor: pointer;
+
cursor:pointer;
}
}
-
 
.navbar{
.navbar{
-
    background-color: blue;
+
background-color:blue;
-
    background-color: rgba(11, 47, 56, 0.97);
+
background-color:rgba(11, 47, 56, 0.97);
}
}
-
 
.navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav>li>a{
.navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav>li>a{
-
    color: white;
+
color:white;
}
}
-
 
.dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus{
.dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus{
-
    color: inherit;
+
color:inherit;
-
    background-color: inherit;  
+
background-color:inherit;
}
}
-
 
#navbar>li>a{
#navbar>li>a{
-
    -webkit-transition: all 0.5s ease-out 0.2s;
+
/*transition*/
-
    -moz-transition: all 0.5s ease-out 0.2s;
+
-webkit-transition:all 0.5s ease-out 0.2s;
-
    -o-transition: all 0.5s ease-out 0.2s;
+
  -moz-transition:all 0.5s ease-out 0.2s;
-
    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:rgb(11,47,56);
-
    background-color: rgba(11, 47, 56, 0.97);
+
background-color:rgba(11, 47, 56, 0.97);
}
}
-
 
#navbar .active>a{
#navbar .active>a{
-
    -webkit-transition: all 0.5s ease-out;
+
/*transition*/
-
    -moz-transition: all 0.5s ease-out;
+
-webkit-transition:all 0.5s ease-out;
-
    -o-transition: all 0.5s ease-out;
+
  -moz-transition:all 0.5s ease-out;
-
    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:rgb(131, 177, 58) !important;
-
    background-color: rgba(131, 177, 58, 1) !important;
+
background-color:rgba(131, 177, 58, 1) !important;
}
}
-
 
.navbar li a:hover{
.navbar li a:hover{
-
    -webkit-transition: all 0.2s ease-out !important;
+
/*transition*/
-
    -moz-transition: all 0.2s ease-out !important;
+
-webkit-transition:all 0.2s ease-out !important;
-
    -o-transition: all 0.2s ease-out !important;
+
  -moz-transition:all 0.2s ease-out !important;
-
    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:rgb(50, 133, 171) !important;
-
    background-color: rgba(50, 133, 171, 1) !important;  
+
background-color:rgba(50, 133, 171, 1) !important;
}
}
-
 
.row{
.row{
-
    margin-right: inherit;
+
margin-right:inherit;
-
    margin-left: inherit;
+
margin-left:inherit;
}
}
-
 
+
.divider{
-
.divider {
+
border-bottom:1px dashed #0c0c0c;
-
    border-bottom: 1px dashed #0c0c0c;
+
}
}
-
 
-
 
.thanks img{
.thanks img{
-
    -webkit-transition: all 0.2s ease-in;
+
/*transition*/
-
    -moz-transition: all 0.2s ease-in;
+
-webkit-transition:all 0.2s ease-in;
-
    -o-transition: all 0.2s ease-in;
+
  -moz-transition:all 0.2s ease-in;
-
    transition: all 0.2s ease-in;
+
    -o-transition:all 0.2s ease-in;
-
    width: 50px;
+
        transition:all 0.2s ease-in;
 +
width:50px;
}
}
-
 
.thanks img:hover{
.thanks img:hover{
-
    -webkit-transition: all 0.5s ease-out;
+
/*transition*/
-
    -moz-transition: all 0.5s ease-out;
+
-webkit-transition:all 0.5s ease-out;
-
    -o-transition: all 0.5s ease-out;
+
  -moz-transition:all 0.5s ease-out;
-
    transition: all 0.5s ease-out;
+
    -o-transition:all 0.5s ease-out;
-
    width: 150px;
+
        transition:all 0.5s ease-out;
 +
width:150px;
}
}
-
 
+
.divide{
-
 
+
margin-top:3%;
-
.divide {
+
margin-bottom:3%;
-
    margin-top: 3%;
+
-
    margin-bottom: 3%;
+
}
}
-
 
.blue-background{
.blue-background{
-
    -webkit-transition: all 1s ease-out;
+
/*transition*/
-
    -moz-transition: all 1s ease-out;
+
-webkit-transition:all 1s ease-out;
-
    -o-transition: all 1s ease-out;
+
  -moz-transition:all 1s ease-out;
-
    transition: all 1s ease-out;
+
    -o-transition:all 1s ease-out;
-
    background-color: rgba(61, 175, 197, 0.81);
+
        transition:all 1s ease-out;
 +
background-color:rgba(61, 175, 197, 0.81);
}
}
.grey-background{
.grey-background{
-
    -webkit-transition: all 1s ease-out;
+
/*transition*/
-
    -moz-transition: all 1s ease-out;
+
-webkit-transition:all 1s ease-out;
-
    -o-transition: all 1s ease-out;
+
  -moz-transition:all 1s ease-out;
-
    transition: all 1s ease-out;
+
    -o-transition:all 1s ease-out;
-
    background-color: rgba(73, 83, 92, 0.89);
+
        transition:all 1s ease-out;
 +
background-color:rgba(73, 83, 92, 0.89);
}
}
.green-background{
.green-background{
-
    -webkit-transition: all 1s ease-out;
+
/*transition*/
-
    -moz-transition: all 1s ease-out;
+
-webkit-transition:all 1s ease-out;
-
    -o-transition: all 1s ease-out;
+
  -moz-transition:all 1s ease-out;
-
    transition: all 1s ease-out;
+
    -o-transition:all 1s ease-out;
-
    background-color: rgba(74, 170, 81, 0.78);
+
        transition:all 1s ease-out;
 +
background-color:rgba(74, 170, 81, 0.78);
}
}
.red-background{
.red-background{
-
    -webkit-transition: all 1s ease-out;
+
/*transition*/
-
    -moz-transition: all 1s ease-out;
+
-webkit-transition:all 1s ease-out;
-
    -o-transition: all 1s ease-out;
+
  -moz-transition:all 1s ease-out;
-
    transition: all 1s ease-out;
+
    -o-transition:all 1s ease-out;
-
    background-color: rgba(202, 76, 77, 0.88);
+
        transition:all 1s ease-out;
 +
background-color:rgba(202, 76, 77, 0.88);
}
}
.yellow-background{
.yellow-background{
-
    -webkit-transition: all 1s ease-out;
+
/*transition*/
-
    -moz-transition: all 1s ease-out;
+
-webkit-transition:all 1s ease-out;
-
    -o-transition: all 1s ease-out;
+
  -moz-transition:all 1s ease-out;
-
    transition: all 1s ease-out;
+
    -o-transition:all 1s ease-out;
-
    background-color: rgba(219, 162, 9, 0.87);
+
        transition:all 1s ease-out;
 +
background-color:rgba(219, 162, 9, 0.87);
}
}
.purple-background{
.purple-background{
-
    -webkit-transition: all 1s ease-out;
+
/*transition*/
-
    -moz-transition: all 1s ease-out;
+
-webkit-transition:all 1s ease-out;
-
    -o-transition: all 1s ease-out;
+
  -moz-transition:all 1s ease-out;
-
    transition: all 1s ease-out;
+
    -o-transition:all 1s ease-out;
-
    background-color: rgba(156, 64, 168, 0.78);
+
        transition:all 1s ease-out;
 +
background-color:rgba(156, 64, 168, 0.78);
}
}
.lightblue-background{
.lightblue-background{
-
    -webkit-transition: all 1s ease-out;
+
/*transition*/
-
    -moz-transition: all 1s ease-out;
+
-webkit-transition:all 1s ease-out;
-
    -o-transition: all 1s ease-out;
+
  -moz-transition:all 1s ease-out;
-
    transition: all 1s ease-out;
+
    -o-transition:all 1s ease-out;
-
    background-color: rgba(39, 201, 207, 0.44);
+
        transition:all 1s ease-out;
 +
background-color:rgba(39, 201, 207, 0.44);
}
}
.pink-background{
.pink-background{
-
    -webkit-transition: all 1s ease-out;
+
/*transition*/
-
    -moz-transition: all 1s ease-out;
+
-webkit-transition:all 1s ease-out;
-
    -o-transition: all 1s ease-out;
+
  -moz-transition:all 1s ease-out;
-
    transition: all 1s ease-out;
+
    -o-transition:all 1s ease-out;
-
    background-color: rgba(233, 133, 133, 1);
+
        transition:all 1s ease-out;
 +
background-color:rgba(233, 133, 133, 1);
}
}
.brown-background{
.brown-background{
-
    -webkit-transition: all 1s ease-out;
+
/*transition*/
-
    -moz-transition: all 1s ease-out;
+
-webkit-transition:all 1s ease-out;
-
    -o-transition: all 1s ease-out;
+
  -moz-transition:all 1s ease-out;
-
    transition: all 1s ease-out;
+
    -o-transition:all 1s ease-out;
-
    background-color: rgba(133, 58, 17, 0.66);
+
        transition:all 1s ease-out;
 +
background-color:rgba(133, 58, 17, 0.66);
}
}
-
 
.color-rainbow{
.color-rainbow{
-
    -webkit-animation: super-rainbow 25s infinite alternate linear;
+
/*animation*/
-
    -moz-animation: super-rainbow 25s infinite alternate linear;
+
-webkit-animation:super-rainbow 25s infinite alternate linear;
-
     -o-animation: super-rainbow 25s infinite alternate linear;
+
  -moz-animation:super-rainbow 25s infinite alternate linear;
-
    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{
-
@-webkit-keyframes super-rainbow {
+
0%  { background: rgba(39, 201, 207, 0.44); }  
-
    0%  { background: rgba(39, 201, 207, 0.44); }  
+
     14%  { background: rgba(61, 175, 197, 0.81); }
     14%  { background: rgba(61, 175, 197, 0.81); }
     28%  { background: rgba(156, 64, 168, 0.78); }
     28%  { background: rgba(156, 64, 168, 0.78); }
Line 187: Line 178:
     100% { background: rgba(74, 170, 81, 0.78); }
     100% { background: rgba(74, 170, 81, 0.78); }
}
}
-
 
+
@-moz-keyframes super-rainbow{
-
@-moz-keyframes super-rainbow {
+
0%  { background: rgba(39, 201, 207, 0.44); }  
-
    0%  { background: rgba(39, 201, 207, 0.44); }  
+
     14%  { background: rgba(61, 175, 197, 0.81); }
     14%  { background: rgba(61, 175, 197, 0.81); }
     28%  { background: rgba(156, 64, 168, 0.78); }
     28%  { background: rgba(156, 64, 168, 0.78); }
Line 198: Line 188:
     100% { background: rgba(74, 170, 81, 0.78); }
     100% { background: rgba(74, 170, 81, 0.78); }
}
}
-
 
+
@-o-keyframes super-rainbow{
-
@-o-keyframes super-rainbow {
+
0%  { background: rgba(39, 201, 207, 0.44); }  
-
    0%  { background: rgba(39, 201, 207, 0.44); }  
+
     14%  { background: rgba(61, 175, 197, 0.81); }
     14%  { background: rgba(61, 175, 197, 0.81); }
     28%  { background: rgba(156, 64, 168, 0.78); }
     28%  { background: rgba(156, 64, 168, 0.78); }
Line 209: Line 198:
     100% { background: rgba(74, 170, 81, 0.78); }
     100% { background: rgba(74, 170, 81, 0.78); }
}
}
-
 
+
@keyframes super-rainbow{
-
@keyframes super-rainbow {
+
0%  { background: rgba(39, 201, 207, 0.44); }  
-
    0%  { background: rgba(39, 201, 207, 0.44); }  
+
     14%  { background: rgba(61, 175, 197, 0.81); }
     14%  { background: rgba(61, 175, 197, 0.81); }
     28%  { background: rgba(156, 64, 168, 0.78); }
     28%  { background: rgba(156, 64, 168, 0.78); }
Line 220: Line 208:
     100% { background: rgba(74, 170, 81, 0.78); }
     100% { background: rgba(74, 170, 81, 0.78); }
}
}
-
 
+
.content h1.header{
-
.content h1.header {
+
font-size:90px;
-
    font-size: 90px;
+
font-weight:700;
-
    font-weight: 700;
+
text-shadow:2px 2px rgba(0, 0, 0, 0.5);
-
    text-shadow: 2px 2px rgba(0, 0, 0, 0.5);
+
text-align:center;
-
    text-align: center;
+
line-height:1;
-
    /*line-height: 1;*/
+
margin-bottom:15px;
-
    margin-bottom: 15px;
+
letter-spacing:-2px;
-
    /*letter-spacing: -2px;*/
+
}
}
-
.content p.header {
+
.content p.header{
-
    font-size: 26px;
+
font-size:26px;
-
    color: #fff;
+
color:#fff;
-
    font-weight: 100;
+
font-weight:100;
-
    text-align: center;
+
text-align:center;
-
    line-height: 1;
+
line-height:1;
-
    text-shadow: 2px 2px rgba(0, 0, 0, 0.5);
+
text-shadow:2px 2px rgba(0, 0, 0, 0.5);
}
}
-
 
.content p{
.content p{
-
    text-align: justify;
+
text-align:justify;
}
}
-
 
+
#footer h5{
-
#footer h5 {
+
color:#dad8d4;
-
    color: #dad8d4;
+
border-bottom:1px solid #131519;
-
    border-bottom: 1px solid #131519;
+
padding-bottom:15px;
-
    padding-bottom: 15px;
+
margin-top:15px;
-
    margin-top: 15px;
+
}
}
-
 
-
 
#preloader .container{
#preloader .container{
-
    top: 200px;
+
top:200px;
}
}
-
 
.essay .tip{
.essay .tip{
-
    -webkit-transition: all 0.3s ease-in-out;
+
/*transition*/
-
    -moz-transition: all 0.3s ease-in-out;
+
-webkit-transition:all 1s ease-in-out;
-
    -o-transition: all 0.3s ease-in-out;
+
  -moz-transition:all 1s ease-in-out;
-
    transition: all 0.3s ease-in-out;
+
    -o-transition:all 1s ease-in-out;
-
    font-size: 10px;
+
        transition:all 1s ease-in-out;
-
    color: rgba(0,0,0,0.2);
+
font-size:10px;
 +
color:rgba(0,0,0,0.2);
}
}
-
 
.essay .tipReveal:hover ~ .tip{
.essay .tipReveal:hover ~ .tip{
-
    -webkit-transition: all 0.5s linear 0.4s;
+
/*transition*/
-
    -moz-transition: all 0.5s linear 0.4s;
+
-webkit-transition:all 0.5s linear 0.4s;
-
    -o-transition: all 0.5s linear 0.4s;
+
  -moz-transition:all 0.5s linear 0.4s;
-
    transition: all 0.5s linear 0.4s;
+
    -o-transition:all 0.5s linear 0.4s;
-
    font-size: 16px;
+
        transition:all 0.5s linear 0.4s;
-
    color: rgba(0,0,0,1);
+
font-size:16px;
-
    margin-bottom: 10px;
+
color:rgba(0,0,0,1);
-
    color: rgba(20, 20, 20, 1);
+
margin-bottom:10px;
 +
color:rgba(20, 20, 20, 1);
}
}
-
 
.index-item:hover .icon-light{
.index-item:hover .icon-light{
-
    -webkit-transition: all 0.5s ease-in-out;
+
/*transition*/
-
    -moz-transition: all 0.5s ease-in-out;
+
-webkit-transition:all 0.5s ease-in-out;
-
    -o-transition: all 0.5s ease-in-out;
+
  -moz-transition:all 0.5s ease-in-out;
-
    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);
+
color:rgba(3, 245, 255, 0.91);
}
}
-
 
.photo-item:hover .icon-light{
.photo-item:hover .icon-light{
-
    -webkit-transition: all 0.5s ease-in-out;
+
/*transition*/
-
    -moz-transition: all 0.5s ease-in-out;
+
-webkit-transition:all 0.5s ease-in-out;
-
    -o-transition: all 0.5s ease-in-out;
+
  -moz-transition:all 0.5s ease-in-out;
-
    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:rgb(3, 245, 255);
-
    color: rgba(3, 245, 255, 0.91);
+
color:rgba(3, 245, 255, 0.91);
}
}
-
 
.photo-item{
.photo-item{
-
    -webkit-perspective: 500;
+
/*perspective*/
-
     perspective: 500;
+
-webkit-perspective:500;
-
 
+
  -moz-perspective:500;
-
    -webkit-transform-style: preserve-3d;
+
     -ms-perspective:500;
-
     transform-style: preserve-3d;
+
    -o-perspective:500;
-
 
+
        perspective:500;
-
    -webkit-transition-duration: 0.5s;
+
/*transform-style*/
-
    -moz-transition-duration: 0.5s;
+
-webkit-transform-style:preserve-3d;
-
    -o-transition-duration: 0.5s;
+
  -moz-transform-style:preserve-3d;
-
    transition-duration: 0.5s;
+
     -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{
img.pull-right{
-
    margin-left: 20px;
+
margin-left:20px;
}
}
img.pull-left{
img.pull-left{
-
    margin-right: 20px;
+
margin-right:20px;
}
}
-
 
img{
img{
-
    -webkit-transition: all 1s ease-in-out;
+
/*transition*/
-
    -moz-transition: all 1s ease-in-out;
+
-webkit-transition:all 1s ease-in-out;
-
    -o-transition: all 1s ease-in-out;
+
  -moz-transition:all 1s ease-in-out;
-
    transition: all 1s ease-in-out;
+
    -o-transition:all 1s ease-in-out;
 +
        transition:all 1s ease-in-out;
}
}
-
 
.content img:hover{
.content img:hover{
-
    border-radius: 6px;
+
/*border-radius*/
-
    box-shadow: 1px 1px 50px rgba(27, 58, 57, 1);
+
-webkit-border-radius:6px;
-
    -webkit-transition: all 1s ease-in 0.3s;
+
  -moz-border-radius:6px;
-
    -moz-transition: all 1s ease-in 0.3s;
+
        border-radius:6px;
-
    -o-transition: all 1s ease-in 0.3s;
+
/*box-shadow*/
-
    transition: all 1s ease-in 0.3s;
+
-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{
.content img.nohover:hover{
-
    border-radius: 0;
+
/*border-radius*/
-
    box-shadow: none;
+
-webkit-border-radius:0;
-
    -webkit-transition: all 1s ease-in 0.3s;
+
  -moz-border-radius:0;
-
    -moz-transition: all 1s ease-in 0.3s;
+
        border-radius:0;
-
    -o-transition: all 1s ease-in 0.3s;
+
/*box-shadow*/
-
    transition: all 1s ease-in 0.3s;
+
-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{
.no-vert-padding{
-
    padding-top: 0;
+
padding-top:0;
-
    padding-bottom: 0;
+
padding-bottom:0;
}
}
-
 
.no-hori-padding{
.no-hori-padding{
-
    padding-left: 0;
+
padding-left:0;
-
    padding-right: 0;
+
padding-right:0;
}
}
-
 
.no-top-margin{
.no-top-margin{
-
    margin-top: 0;
+
margin-top:0;
}
}
-
 
.no-bottom-margin{
.no-bottom-margin{
-
    margin-bottom: 0;
+
margin-bottom:0;
}
}
-
 
section{
section{
-
    padding: 3%;
+
padding:3%;
}
}
-
 
.content>:first-child{
.content>:first-child{
-
    padding-top: 5%;
+
padding-top:5%;
}
}
-
 
#ui-datepicker-div{
#ui-datepicker-div{
-
    display: none;
+
display:none;
}
}
-
 
.text-center{
.text-center{
-
    text-align: center !important;
+
text-align:center !important;
}
}
-
 
-
 
-
 
/* If window < 992px */
/* If window < 992px */
@media(max-width: 992px){
@media(max-width: 992px){
-
    .navbar-toggle {
+
.navbar-toggle {
-
         display: inherit;
+
         display:inherit;
-
    }
+
}
-
 
+
.navbar-header{
-
    .navbar-header{
+
float:right;
-
        float: right;
+
}
-
    }
+
.navbar-collapse.collapse{
-
 
+
display:none !important;
-
    .navbar-collapse.collapse {
+
}
-
        display: none !important;
+
.content>:first-child{
-
    }
+
padding-top:70px;
-
 
+
}
-
    .content>:first-child{
+
#index-icons{
-
        padding-top: 70px;
+
display:none;
-
    }
+
}
-
 
+
.content div p{
-
    #index-icons{
+
background-color:rgba(200,200,200,0.3);
-
        display: none;
+
padding:10px 10px 10px 10px;
-
    }
+
/*border-radius*/
-
 
+
-webkit-border-radius:5px;
-
    .content div p {
+
  -moz-border-radius:5px;
-
        background-color: rgba(200,200,200,0.3);
+
         border-radius:5px;
-
        padding: 10px 10px 10px 10px;
+
/*box-shadow*/
-
        border-radius: 5px;
+
-webkit-box-shadow:1px 1px 10px rgba(200, 200, 200, 0.8);
-
         box-shadow: 1px 1px 10px rgba(200, 200, 200, 0.8);
+
  -moz-box-shadow:1px 1px 10px rgba(200, 200, 200, 0.8);
-
         font-size: 16px;
+
         box-shadow:1px 1px 10px rgba(200, 200, 200, 0.8);
-
    }
+
font-size:16px;
-
 
+
}
-
    .content section p {
+
.content section p{
-
        background-color: transparent;
+
background-color:transparent;
-
        padding: 0;
+
padding:0;
-
        border-radius: 0;
+
/*border-radius*/
-
         box-shadow: 0 0 0 black;
+
-webkit-border-radius:0;
-
         font-size: 16px;
+
  -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){
@media(max-width: 1200px){
-
    .navbar-right{
+
.navbar-right{
-
         display: none;
+
         display:none;
-
    }
+
}
}
}
/* If window > 992 px*/
/* If window > 992 px*/
@media(min-width: 992px){
@media(min-width: 992px){
-
    .content>:first-child{
+
.content>:first-child{       padding-top: 5%;
-
        padding-top: 5%;
+
}
-
    }
+
.index-item div{
-
 
+
/*transition*/
-
    .index-item div{
+
-webkit-transition:all 1s ease-in-out;
-
        -webkit-transition: all 1s ease-in-out;
+
  -moz-transition:all 1s ease-in-out;
-
        -moz-transition: all 1s ease-in-out;
+
    -o-transition:all 1s ease-in-out;
-
        -o-transition: all 1s ease-in-out;
+
         transition:all 1s ease-in-out;
-
         transition: all 1s ease-in-out;
+
color:black;
-
 
+
color:rgba(0, 0, 0, 0.2);
-
        color: black;
+
}
-
        color: rgba(0, 0, 0, 0.2);
+
.index-item:hover div{
-
    }
+
/*transition*/
-
 
+
-webkit-transition:all 0.2s ease-in-out;
-
    .index-item:hover div{
+
  -moz-transition:all 0.2s ease-in-out;
-
        -webkit-transition: all 0.2s ease-in-out;
+
    -o-transition:all 0.2s ease-in-out;
-
        -moz-transition: all 0.2s ease-in-out;
+
         transition:all 0.2s ease-in-out;
-
        -o-transition: all 0.2s ease-in-out;
+
color:inherit;
-
         transition: all 0.2s ease-in-out;
+
/*transform*/
-
 
+
-webkit-transform:scale(1.4);
-
        color: inherit;
+
  -moz-transform:scale(1.4);
-
        -webkit-transform: scale(1.4);
+
     -ms-transform:scale(1.4);
-
        transform: scale(1.4);
+
    -o-transform:scale(1.4);
-
     }
+
        transform:scale(1.4);
-
 
+
}
-
    .photo-item div{
+
.photo-item div{
-
        -webkit-transition: all 1s ease-in-out;
+
/*transition*/
-
        -moz-transition: all 1s ease-in-out;
+
-webkit-transition:all 1s ease-in-out;
-
        -o-transition: all 1s ease-in-out;
+
  -moz-transition:all 1s ease-in-out;
-
         transition: all 1s ease-in-out;
+
    -o-transition:all 1s ease-in-out;
-
 
+
         transition:all 1s ease-in-out;
-
        color: black;
+
color:black;
-
        color: rgba(0, 0, 0, 0.2);
+
color:rgba(0, 0, 0, 0.2);
-
        -webkit-transform: rotateY(25deg);
+
/*transform*/
-
        transform: rotateY(25deg);
+
-webkit-transform:rotateY(25deg);
-
     }
+
  -moz-transform:rotateY(25deg);
-
 
+
     -ms-transform:rotateY(25deg);
-
    .photo-item:hover div{
+
    -o-transform:rotateY(25deg);
-
        -webkit-transition: all 0.2s ease-out;
+
        transform:rotateY(25deg);
-
        -moz-transition: all 0.2s ease-out;
+
}
-
        -o-transition: all 0.2s ease-out;
+
.photo-item:hover div{
-
         transition: all 0.2s ease-out;
+
/*transition*/
-
 
+
-webkit-transition:all 0.2s ease-out;
-
        color: inherit;
+
  -moz-transition:all 0.2s ease-out;
-
        -webkit-transform: scale(1.4) rotateY(0deg);
+
    -o-transition:all 0.2s ease-out;
-
        transform: scale(1.4) rotateY(0deg);
+
         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{
.img-gallery, .tilt-gallery{
-
    list-style: none;
+
list-style:none;
-
    margin-bottom: 0;
+
margin-bottom:0;
}
}
.img-gallery img, .tilt-gallery img{
.img-gallery img, .tilt-gallery img{
-
    width: 100%;
+
width:100%;
}
}
-
 
.tilt-gallery img{
.tilt-gallery img{
-
    margin-bottom: 20px;
+
margin-bottom:20px;
}
}
-
 
.img-gallery li, .tilt-gallery li{
.img-gallery li, .tilt-gallery li{
-
    -webkit-transition: all 0.6s ease-out 0.2s;
+
/*transition*/
-
    -moz-transition: all 0.6s ease-out 0.2s;
+
-webkit-transition:all 0.6s ease-out 0.2s;
-
    -o-transition: all 0.6s ease-out 0.2s;
+
  -moz-transition:all 0.6s ease-out 0.2s;
-
    transition: all 0.6s ease-out 0.2s;
+
    -o-transition:all 0.6s ease-out 0.2s;
-
    cursor: pointer;
+
        transition:all 0.6s ease-out 0.2s;
-
    display: inline-block;
+
cursor:pointer;
-
    width: 5%;
+
display:inline-block;
-
    min-width: 80px;
+
width:5%;
 +
min-width:80px;
}
}
-
 
+
.img-gallery.img-2x li, .tilt-gallery.img-2x li{
-
.img-gallery.img-2x li, .tilt-gallery.img-2x li {
+
/*transition*/
-
    -webkit-transition: all 0.6s ease-out 0.2s;
+
-webkit-transition:all 0.6s ease-out 0.2s;
-
    -moz-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;
+
    -o-transition:all 0.6s ease-out 0.2s;
-
    transition: all 0.6s ease-out 0.2s;
+
        transition:all 0.6s ease-out 0.2s;
-
 
+
cursor:pointer;
-
    cursor: pointer;
+
display:inline-block;
-
    display: inline-block;
+
width:10%;
-
    width: 10%;
+
min-width:160px;
-
    min-width: 160px;
+
}
}
-
 
.img-gallery li:hover{
.img-gallery li:hover{
-
    -webkit-transition: all 0.2s ease-out;
+
/*transition*/
-
    -moz-transition: all 0.2s ease-out;
+
-webkit-transition:all 0.2s ease-out;
-
    -o-transition: all 0.2s ease-out;
+
  -moz-transition:all 0.2s ease-out;
-
    transition: all 0.2s ease-out;
+
    -o-transition:all 0.2s ease-out;
-
 
+
        transition:all 0.2s ease-out;
-
    width: 10%;
+
width:10%;
-
    min-width: 160px;
+
min-width:160px;
}
}
-
 
.img-gallery li.img-3x:hover{
.img-gallery li.img-3x:hover{
-
    -webkit-transition: all 0.2s ease-out;
+
/*transition*/
-
    -moz-transition: all 0.2s ease-out;
+
-webkit-transition:all 0.2s ease-out;
-
    -o-transition: all 0.2s ease-out;
+
  -moz-transition:all 0.2s ease-out;
-
    transition: all 0.2s ease-out;
+
    -o-transition:all 0.2s ease-out;
-
    width: 15%;
+
        transition:all 0.2s ease-out;
-
    min-width: 240px;
+
width:15%;
 +
min-width:240px;
}
}
-
 
.img-gallery li.img-4x:hover{
.img-gallery li.img-4x:hover{
-
    -webkit-transition: all 0.2s ease-out;
+
/*transition*/
-
    -moz-transition: all 0.2s ease-out;
+
-webkit-transition:all 0.2s ease-out;
-
    -o-transition: all 0.2s ease-out;
+
  -moz-transition:all 0.2s ease-out;
-
    transition: all 0.2s ease-out;
+
    -o-transition:all 0.2s ease-out;
-
    width: 20%;
+
        transition:all 0.2s ease-out;
-
    min-width: 320px;
+
width:20%;
 +
min-width:320px;
}
}
-
 
.img-gallery li.active{
.img-gallery li.active{
-
    -webkit-transition: all 0.2s ease-out;
+
/*transition*/
-
    -moz-transition: all 0.2s ease-out;
+
-webkit-transition:all 0.2s ease-out;
-
    -o-transition: all 0.2s ease-out;
+
  -moz-transition:all 0.2s ease-out;
-
    transition: all 0.2s ease-out;
+
    -o-transition:all 0.2s ease-out;
-
 
+
        transition:all 0.2s ease-out;
-
    width: 10%;
+
width:10%;
-
    min-width: 160px;
+
min-width:160px;
-
    box-shadow: 5px 1px 20px black;
+
/*box-shadow*/
-
    border-radius: 3px;
+
-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{
.img-gallery li.img-3x.active{
-
    -webkit-transition: all 0.2s ease-out;
+
/*transition*/
-
    -moz-transition: all 0.2s ease-out;
+
-webkit-transition:all 0.2s ease-out;
-
    -o-transition: all 0.2s ease-out;
+
  -moz-transition:all 0.2s ease-out;
-
    transition: all 0.2s ease-out;
+
    -o-transition:all 0.2s ease-out;
-
 
+
        transition:all 0.2s ease-out;
-
    width: 15%;
+
width:15%;
-
    min-width: 240px;
+
min-width:240px;
-
    box-shadow: 5px 1px 20px black;
+
/*box-shadow*/
-
    border-radius: 3px;
+
-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{
.img-gallery li.img-4x.active{
-
    -webkit-transition: all 0.2s ease-out;
+
/*transition*/
-
    -moz-transition: all 0.2s ease-out;
+
-webkit-transition:all 0.2s ease-out;
-
    -o-transition: all 0.2s ease-out;
+
  -moz-transition:all 0.2s ease-out;
-
    transition: all 0.2s ease-out;
+
    -o-transition:all 0.2s ease-out;
-
 
+
        transition:all 0.2s ease-out;
-
    width: 20%;
+
width:20%;
-
    min-width: 320px;
+
min-width:320px;
-
    box-shadow: 5px 1px 20px black;
+
/*box-shadow*/
-
    border-radius: 3px;
+
-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{
.template{
-
    display: none;
+
display:none;
}
}
-
 
footer a{
footer a{
-
    color: #0E496B;
+
color:#0E496B;
}
}
-
 
.dp_calendar .div_dates li{
.dp_calendar .div_dates li{
-
    width: inherit;
+
width:inherit;
-
    font-size: inherit;
+
font-size:inherit;
-
    font-family: inherit;
+
font-family:inherit;
}
}
-
 
+
.dp_calendar .main_date{
-
.dp_calendar .main_date {
+
font-size:40px;
-
    font-size: 40px;
+
}
}
-
 
.tooltip-inner{
.tooltip-inner{
-
    font-size: 14px;
+
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{
#appMovie{
-
    -webkit-animation: bluePulse 5s infinite;
+
/*animation*/
-
    -moz-animation: bluePulse 5s infinite;
+
-webkit-animation:bluePulse 5s infinite;
-
     -o-animation: bluePulse 5s infinite;
+
  -moz-animation:bluePulse 5s infinite;
-
    animation: bluePulse 5s infinite;
+
     -ms-animation:bluePulse 5s infinite;
 +
    -o-animation:bluePulse 5s infinite;
 +
        animation:bluePulse 5s infinite;
}
}
-
 
#TaiwanLogo{
#TaiwanLogo{
-
    transition: all 1s linear;
+
/*transition*/
-
    -webkit-animation: TaiwanLogo 6s infinite;
+
-webkit-transition:all 1s linear;
-
    -moz-animation: TaiwanLogo 6s infinite;
+
  -moz-transition:all 1s linear;
-
     -o-animation: TaiwanLogo 6s infinite;
+
    -o-transition:all 1s linear;
-
    animation: TaiwanLogo 6s infinite;
+
        transition:all 1s linear;
-
 
+
/*animation*/
-
    width: 20%;
+
-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{
@-webkit-keyframes TaiwanLogo{
-
    0%{
+
0%{
         -webkit-transform: rotateY(0deg); opacity: 1; -webkit-animation-timing-function: ease-in-out;
         -webkit-transform: rotateY(0deg); opacity: 1; -webkit-animation-timing-function: ease-in-out;
     }
     }
Line 633: Line 662:
     }
     }
}
}
-
 
@-moz-keyframes TaiwanLogo{
@-moz-keyframes TaiwanLogo{
-
    0%{
+
0%{
         -moz-transform: rotateY(0deg); opacity: 1; -moz-animation-timing-function: ease-in-out;
         -moz-transform: rotateY(0deg); opacity: 1; -moz-animation-timing-function: ease-in-out;
     }
     }
Line 654: Line 682:
     }
     }
}
}
-
 
@-o-keyframes TaiwanLogo{
@-o-keyframes TaiwanLogo{
-
    0%{
+
0%{
         -o-transform: rotateY(0deg); opacity: 1; -o-animation-timing-function: ease-in-out;
         -o-transform: rotateY(0deg); opacity: 1; -o-animation-timing-function: ease-in-out;
     }
     }
Line 675: Line 702:
     }
     }
}
}
-
 
@keyframes TaiwanLogo{
@keyframes TaiwanLogo{
-
    0%{
+
0%{
         transform: rotateY(0deg); opacity: 1; animation-timing-function: ease-in-out;
         transform: rotateY(0deg); opacity: 1; animation-timing-function: ease-in-out;
     }
     }

Revision as of 07:20, 27 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: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; }

  1. 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); }

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

  1. footer h5{

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

  1. 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%; }

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

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

}

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

}

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

}

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