Team:Tokyo Tech/style2.css

From 2014.igem.org

(Difference between revisions)
Line 719: Line 719:
   max-width: 495px;
   max-width: 495px;
   height: 370px;
   height: 370px;
-
   margin: 2em auto .5em auto;
+
   margin: 5em auto .5em auto;
}
}
.css-slideshow figure{
.css-slideshow figure{
   margin: 0;
   margin: 0;
-
   max-width: 600px;
+
   max-width: 495px;
-
   height: 340px;
+
   height: 370px;
   background: #000;
   background: #000;
   position: absolute;
   position: absolute;
Line 736: Line 736:
   color: #fff;
   color: #fff;
   background: rgba(0,0,0, .3);
   background: rgba(0,0,0, .3);
-
   font-size: 1em;
+
   font-size: .8em;
   padding: 8px 12px;
   padding: 8px 12px;
   opacity: 0;
   opacity: 0;
Line 759: Line 759:
}
}
figure:nth-child(1) {
figure:nth-child(1) {
-
   animation: xfade 30s 24s infinite;
+
   animation: xfade 48s 42s infinite;
}
}
figure:nth-child(2) {
figure:nth-child(2) {
-
   animation: xfade 30s 18s infinite;
+
   animation: xfade 48s 36s infinite;
}
}
figure:nth-child(3) {
figure:nth-child(3) {
-
   animation: xfade 30s 12s infinite;
+
   animation: xfade 48s 30s infinite;
}
}
figure:nth-child(4) {
figure:nth-child(4) {
-
   animation: xfade 30s 6s infinite;
+
   animation: xfade 48s 24s infinite;
}
}
figure:nth-child(5) {
figure:nth-child(5) {
-
   animation: xfade 30s 0s infinite;
+
   animation: xfade 48s 18s infinite;
 +
}
 +
figure:nth-child(6) {
 +
  animation: xfade 48s 12s infinite;
 +
}
 +
figure:nth-child(7) {
 +
  animation: xfade 48s 6s infinite;
 +
}
 +
figure:nth-child(8) {
 +
  animation: xfade 48s 0s infinite;
}
}
@keyframes xfade{
@keyframes xfade{
-
   17% {
+
   0%{
-
     opacity:1;
+
     opacity: 1;
   }
   }
-
   25% {
+
   10.5% {
-
     opacity:0;
+
     opacity: 1;
   }
   }
-
   92% {
+
   12.5%{
-
     opacity:0;
+
     opacity: 0;
 +
  }
 +
  98% {
 +
    opacity: 0;
 +
  }
 +
  100% {
 +
    opacity: 1;
   }
   }
-
}
 
-
#preloaded-images {
 
-
  position: absolute;
 
-
  overflow: hidden;
 
-
  left: -9999px;
 
-
  top: -9999px;
 
-
  height: 1px;
 
-
  width: 1px;
 
}
}

Revision as of 11:00, 17 October 2014

/* Design by TEMPLATED http://templated.co Released for free under the Creative Commons Attribution License

  • /

body{ padding: 0; 

       margin: 0;

background:url(Tokyo_Tech_Bgb3.png); font-family: "Times New Roman", Times, serif; font-size: 14px; color: #EEFCFA; 

       width: 100%;
       height: 100%;

}

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

       border-bottom: 0px;

}

h1, h2, h3 { margin: 0; padding: 0; font-weight: normal; color: #32639A; font-family: "Times New Roman", Times, serif; }

h1 { font-size: 2em; }

h2 { font-size: 2.4em; }

h3 { font-size: 1.6em; }

p, ul, ol { margin-top: 0; line-height: 200%; font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif; }

ul, ol { margin: 0px; padding: 0px; list-style: none; }

a { text-decoration: none; color: #516C00; }

a:hover { text-decoration: underline; }

a:visited{ 

       color: #516C00;

}

h2 a { text-decoration: none; }

  1. globalWrapper {

margin: 0px; padding: 0px; background:none; 

       font-size: 100%;

}


  1. wrapper {

margin: 0px; padding: 0px;

}


/* Header */

  1. header {

width: 1000px; height: 125px; 

       background:url(Tokyo_Tech_Header.png) no-repeat bottom;

margin: 0 auto; padding-top: 15px;

}


/*Content-Header*/

  1. content-header {

width: 1000px; height: 50px; margin: 0 auto; background:url(Tokyo_Tech_Top.jpg) no-repeat bottom; }

/* Logo */

  1. logo-link { 
       position: absolute;
       display: block;
       left: 35px;
       top: 20px;
       width: 160px;
       height: 155px;
       opacity: 0;

}

  1. logo {

margin-left: 189px; padding: 0px; 

       display: block;

color: #000000; }

  1. logo h1, #logo p {

margin: 0; padding: 10px 0px 0px 25px; font-family: "Times New Roman", Times, serif; }

  1. logo h1 {

letter-spacing: -1px; text-transform: lowercase; font-size: 44px; }

  1. logo h1 a {

color: #FFFFFF; }

  1. logo p {

padding: 26px 0 0 2px; font: normal 19px "Times New Roman", Times, serif; color: #C5E8FF; }

  1. logo a {

border: none; background: none; text-decoration: none; color: #C5E8FF; }

/* Search */

  1. search {

float: right; width: 280px; height: 60px; padding: 20px 0px 0px 0px; background: #E2E2E2; border-bottom: 4px solid #FFFFFF; }

  1. search form {

height: 41px; margin: 0; padding: 10px 0 0 20px; }

  1. search fieldset {

margin: 0; padding: 0; border: none; }

  1. search-text {

width: 170px; padding: 6px 5px 2px 5px; border: 1px solid #DEDEDE; background: #FFFFFF; text-transform: lowercase; font: normal 11px Arial, Helvetica, sans-serif; color: #5D781D; }

  1. search-submit {

width: 50px; height: 22px; border: none; background: #B9B9B9; color: #000000; }

  1. banner {

margin-bottom: 20px; border: 12px #ECECEC solid; }

/* Menu */

  1. menu {

width: 1000px; height: 65px; margin: 0 auto; padding-bottom: 30px; 

       background: url(Tokyo_Tech_Menu.png) top no-repeat;

}

  1. menu ul {

margin: 0; 

       padding-top: 40px;
	list-style: none;

line-height: normal; }

  1. menu li {

float: left; 

       width: 130px;

margin-left: 10px; }

  1. menu a {

display: block; background: #70237A; 

       box-shadow: 0px 0px 5px 0px #000000;
       height: 38px;

width: 130px; padding-top: 15px; font-family: "Times New Roman", Times, serif; text-decoration: none; text-align: center; font-size: 20px; font-weight: normal; color: #FFFFFF; border: none; }

  1. menu ul li ul {

padding:0; margin:0; position:absolute; visibility: hidden; 

       z-index: 3;

}

  1. menu ul li ul li a:hover {

background: #FFFFFF; box-shadow: 0px 2px 10px 0px #FFFFFF; color: #E100E1; }

  1. menu ul li:hover ul { 
 display: block;
 opacity: 1;
 visibility: visible;

}

  1. menu ul li ul li a{

display: block; font-size:18px; font-family: "Times New Roman", Times, serif; color: white; background: #70237A; box-shadow: 0px 2px 10px 0px #FFFFFF; 

       z-index:2;

height:28px; padding-top:8px; margin-left:0px; width: 130;

}

  1. menu ul li ul li{

display: block; float: none; 

       margin-left: 0px;

}

  1. menu a:hover, #menu .current_page_item a {

text-decoration: none; }

  1. menu .current_page_item a {

background: #FFFFFF; padding-left: 0px; color: #70237A; }

  1. menu .current_page_item ul li a{

display: block; font-size:18px; font-family: "Times New Roman", Times, serif; color: white; background: #70237A; box-shadow: 0px 2px 10px 0px #FFFFFF; 

       z-index:2;

height:28px; padding-top:8px; margin-left:0px; width: 130;

}


  1. menu .current_page_item ul li a:hover {

background: #FFFFFF; box-shadow: 0px 2px 10px 0px #FFFFFF; color: #E100E1; }

/* Page */

  1. page {

width: 900px; margin: auto; padding: 40px 50px 0px 50px; background: url(Tokyo_Tech_Content.jpg) repeat-y; }

/* Content */

  1. content { 
       width: 100;
       padding: 0px;
       border: none;
       background: none transparent;

}

  1. content-over {

float: left; 

       width: 900px;

padding: 0px 0px 0px 0px; 

       background: white;

}

.post { margin-bottom: 15px; }

.post-bgtop { }

.post-bgbtm { }

.post .title { margin-bottom: 10px; padding: 12px 0 0 0px; letter-spacing: -.5px; font-size: 36px; color: #493E2B; }

.post .title-small { font-size: 30px; color:#493E2B; font-family:"Times New Roman", Times, serif; font-variant: normal; text-decoration: underline; }

.post .title a { color: #493E2B; border: none; }

.post .head { font-size: 24px; color:#493E2B; font-family:"Times New Roman", Times, serif; }

.post .info { text-indent:20px; color: #5A554E; font-size:16px; font-family:"Times New Roman", Times, serif; border: none; }

.post .info-18 { text-indent:20px; color: #5A554E; font-size:18px; font-family:"Times New Roman", Times, serif; border: none; }

.post .info-24 { color: #5A554E; font-size:24px; font-family:"Times New Roman", Times, serif; border: none; }

.post .info-24 a img{ position:absolute; visibility:hidden; padding:5px; left: 630px; 

       top: 565px;

}

.post .info-24 a:hover img{ 

       visibility: visible;

}


.post .Content-Modeling { color: #5A554E; font-size:24px; font-family:"Times New Roman", Times, serif; border: none; }

.post .Content-Modeling a img{ position:absolute; visibility:hidden; padding:5px; left: 630px; 

       top: 445px;

}

.post .Content-Modeling a:hover img{ 

       visibility: visible;

}

.post .meta { margin: -10px 0px 0px 0px; padding: 0px 0px 10px 0px; letter-spacing: -1px; font-size: 23px; font-weight: normal; color: #6E8D3D; font-family: "Times New Roman", Times, serif; }

.post .meta .date { float: left; }

.post .meta .posted { float: right; }

.post .meta a { }

.post .entry { background: url(Tokyo_Tech_img08.jpg) no-repeat left top; padding: 25px 0px 0px 0px; text-align: justify; }

.post .entry-long { background: url(Tokyo_Tehc_img08_long.jpg) no-repeat left top; padding: 25px 0px 0px 0px; text-align: justify; }

.post .entry-right{ background: url(Tokyo_Tech_img08_revert.jpg) no-repeat right top; padding: 25px 0px 0px 0px; text-align: justify; }

.post .underName { color: #5A554E; font-size:18px; font-family:"Times New Roman", Times, serif; border: none; }

.links { padding-top: 20px; }

.more { padding-left: 16px; background: url(Tokyo_Tech_img10.gif) no-repeat left 3px; text-decoration: underline; font-size: 12px; font-weight: normal; }

.comments { padding-left: 18px; background: url(Tokyo_Tech_img11.gif) no-repeat left 4px; text-decoration: underline; font-size: 12px; font-weight: normal; }


/* Sidebar */

  1. sidebar {

float: right; width: 273px; padding: 0px; color: #787878; }

  1. sidebar ul {

margin: 0; padding: 0; list-style: none; }

  1. sidebar li {

margin: 0; padding: 0; }

  1. sidebar li ul {

margin: 0px 0px; padding-bottom: 20px; }

  1. sidebar li li {

line-height: 35px; margin: 0px; padding: 2px 0px; border-left: none; }

  1. sidebar li li span {

height: 19px; margin-right: 16px; padding: 4px 12px; background: #3D2A0B url(Tokyo_Tech_img12.jpg) repeat-x left top; font-size: 12px; color: #FFFFFF; }

  1. sidebar li li span a {

color: #FFFFFF; }

  1. sidebar h2 {

height: 65px; background: url(Tokyo_Tech_img09.jpg) no-repeat left bottom; letter-spacing: -.5px; font-size: 28px; color: #493E2B; }

  1. sidebar p {

margin: 0 0px; padding: 0px 0px 30px 0px; text-align: justify; }

  1. sidebar p strong {

color: #4A3E29; }

  1. sidebar a {

border: none; }

  1. sidebar a:hover {

}

/* Calendar */

  1. calendar {

}

  1. calendar_wrap {

padding: 20px; }

  1. calendar table {

width: 100%; }

  1. calendar tbody td {

text-align: center; }

  1. calendar #next {

text-align: right; }

/* Footer */

  1. footer-content {

width: 1000px; height: 100px; margin: 0 auto; /*padding: 60px 50px 0px 50px;*/ background: url(Tokyo_Tech_Footer.jpg) no-repeat top; font-size: 12px; color: #887450; }

  1. footer-content .column1 {

float: left; width: 570px; }

  1. footer-content .column2 {

float: right; width: 273px; }

  1. footer-content h2 {

padding-bottom: 10px; font-size: 22px; color: #E3D2B6; }

  1. footer-content strong {

color: #E3D2B6; }

  1. footer-content a {

color: #AA8B55; }

  1. footer-content a:hover {

color: #AA8B55; }

.list li { margin-bottom: 6px; }

  1. footer-over {

height: 50px; margin: 0 auto; padding: 0px 0 15px 0; font-family: Arial, Helvetica, sans-serif; 

       color: transparent;

}

  1. footer-over p {

margin: 0; line-height: normal; font-size: 12px; text-align: center; color: #82A2B9; }

  1. footer-over a {

text-decoration: underline; color: #82A2B9; }


  1. contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { 
   display: none;}
  1. top-section { 
   width: 965px;
   height: 0;
   margin: 0 auto;
   padding: 0;
   border: none;}
  1. bodyContent p { 
   margin: 0;}

.left-menu ul { 

   visibility: hidden;

}

.left-menu:hover ul { 

   visibility: visible;

}

.image_right { float: right; margin-bottom: 0px; margin-left: 10px; } .image_left { float: left; margin-right: 10px; margin-bottom: 10px; }

li { 

       margin-bottom: 0em;

}


/* Go to top button */

  1. gototop { 
       position: fixed;
       left:90%;
       top: 95%;
       margin-top: -2.5em;

}

  1. gototop img { 
       opacity: 0.7;
       filter: alpha(opacity=40);

}

  1. gototop img:hover { 
       opacity: 1;

}


/* Slide Show */

.css-slideshow{ 

 position: relative;
 max-width: 495px;
 height: 370px;
 margin: 5em auto .5em auto;

} .css-slideshow figure{ 

 margin: 0;
 max-width: 495px;
 height: 370px;
 background: #000;
 position: absolute;

} .css-slideshow img{ 

 box-shadow: 0 0 2px #666;

} .css-slideshow figcaption{ 

 position: absolute;
 top: 0;
 color: #fff;
 background: rgba(0,0,0, .3);
 font-size: .8em;
 padding: 8px 12px;
 opacity: 0;
 transition: opacity .5s;

} .css-slideshow:hover figure figcaption{ 

 transition: opacity .5s;
 opacity: 1;

} .css-slideshow-attr{ 

 max-width: 495px;
 text-align: right;
 font-size: .7em;
 font-style: italic;
 margin:0 auto;

} .css-slideshow-attr a{ 

 color: #666;

} .css-slideshow figure{ 

 opacity:0;

} figure:nth-child(1) { 

 animation: xfade 48s 42s infinite;

} figure:nth-child(2) { 

 animation: xfade 48s 36s infinite;

} figure:nth-child(3) { 

 animation: xfade 48s 30s infinite;

} figure:nth-child(4) { 

 animation: xfade 48s 24s infinite;

} figure:nth-child(5) { 

 animation: xfade 48s 18s infinite;

} figure:nth-child(6) { 

 animation: xfade 48s 12s infinite;

} figure:nth-child(7) { 

 animation: xfade 48s 6s infinite;

} figure:nth-child(8) { 

 animation: xfade 48s 0s infinite;

}

@keyframes xfade{ 

 0%{
   opacity: 1;
 }
 10.5% {
   opacity: 1;
 }
 12.5%{
   opacity: 0;
 }
 98% {
   opacity: 0;
 }
 100% {
   opacity: 1;
 }

}

Retrieved from "http://2014.igem.org/Team:Tokyo_Tech/style2.css"