Template:Team:Fudan/CSS

From 2014.igem.org

Revision as of 19:06, 14 October 2014 by Liuzhu (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

body { 

   font-family: 'Century Gothic', sans-serif;

} .container-fluid { 

   max-width: 1600px;

} .container_wapper { 

   width: 100%;
   background: #c0c0c0;

} .rcolor { 

   background: #f00;

} .gcolor { 

   background: #0f0;

} .bcolor { 

   background: #00f;

} h1 { 

   margin-top: 60px;
   margin-bottom: 60px;
   text-align: center;
   font: normal normal normal 34px/60px 'Century Gothic', sans-serif;
   color: #3b3b3b;

}

.templatemo_logo a:hover { text-decoration: none; } /*menu*/

  1. templatemo_mobile_menu { 
   top: 0;
   width: 250px;
   height: 100%;
   background: #f9f9f9;
   position: fixed;
   z-index: 5500;
   right: -1500px;
   display: none;
   overflow: auto;

}

  1. templatemo_mobile_menu ul li a { 
   text-align: left;
   background: #68A4C4;
   color: #000;

}

  1. templatemo_mobile_menu ul li:hover a { 
   background: #c83233;

color: #fff; }

  1. templatemo_banner_menu { 
   width: 100%;
   background: #f9f9f9;
   height: 94px;
   border-bottom: 1px solid #68A4C4;
   position: fixed;
   top: 0;
   z-index: 5000;

}

  1. templatemo_banner_menu #logo_img { 
   max-height: 90px;
   float: left;

}

  1. templatemo_banner_menu #logo_text { 
   font: normal normal normal 36px/1em 'Century Gothic', sans-serif;
   margin-top: 30px;
   padding-left: 60px;
   text-align: left;
   color: #68A4C4;

}

  1. templatemo_banner_menu #logo_text span { 
   color: #000;

}

  1. templatemo_banner_menu ul li a ,
  2. templatemo_banner_menu ul li a:focus { 
   padding-top: 35px;
   padding-bottom: 35px;
   font: normal normal normal 18px/23px 'Century Gothic', sans-serif;
   color: #000;
   background: repeat-x url("../images/banner_bg.jpg") 0 -94px ;
   transition-duration: .5s;

}

  1. templatemo_banner_menu ul li.igem_bar a ,
  2. templatemo_banner_menu ul li.igem_bar a:focus {

font-size: 0.6em; position: relative; top: -25px; right: -40px; background:none; color:#999; }

  1. templatemo_banner_menu ul li a:hover ,
  2. templatemo_banner_menu ul li a.current

{ 

   background-position: 0 0px ;
   background-color: #68A4C4;
   color: #ffffff;

}

  1. templatemo_banner_menu ul li.igem_bar a:hover ,
  2. templatemo_banner_menu ul li.igem_bar a.current

{ 

   background:none;

color: blue; }

  1. templatemo_banner_menu #mobile_menu { 
   padding-top: 25px;
   font-size: 30px;
   float: right;
   color: #68A4C4;

} /*banner slide*/ .banner { 

   width: 100%;
   height: 500px;
   margin-top: 94px;
   position: relative; 
   overflow: hidden;

} .banner ul { 

   list-style: none; 
   padding: 0;

} .banner ul li { 

   float: left; 
   background-size:50px 50px;
   height:500px;
   width: 100%;

} .banner div.slide_caption { background: rgba(0, 0, 0, 0.0); 

   max-width: 600px;
   margin: 120px auto auto auto;

} .banner div.slide_caption h1 , .banner div.slide_caption p { 

   background: none ;
   text-align: center;
   color: #fff;
   line-height: 2em;
   text-shadow: 1px 1px 5px rgba(150, 150, 150, 1);

} .banner div.slide_caption h1 { 

   font-size: 32px;
   margin: 0;

} .banner div.slide_caption p { 

   font-size: 16px;

} .templatemo_banner_slide_01 { 

   background: url('../images/bg1.jpg');
   background-size: cover;

} .templatemo_banner_slide_02 { 

   background: url('../images/bg2.jpg');
   background-size: cover;

} .templatemo_banner_slide_03 { 

   background: url('../images/bg3.jpg');
   background-size: cover;

} .copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;} /*about our organization*/

  1. templatemo_about { 
   background: #ffffff;
   float: left;

}

  1. templatemo_about .about_icon img { 
   width: 100%;

}

  1. templatemo_about .about_icon a { 
   text-decoration:none;

color:#000; }

  1. templatemo_about .about_icon {

padding-top:5px; }

  1. templatemo_about .about_icon:hover{ 
   background:#eee;

}

  1. templatemo_about .about_icon h2 { 
   text-align: center;
   font: normal normal normal 20px/25px 'Century Gothic', sans-serif;

}

  1. templatemo_about .about_icon .imgwap { 
   text-align: center;
   border-radius: 75px;

}

  1. templatemo_about .about_icon p { 
   text-align: center;
   font: normal normal normal 14px/23px 'Century Gothic', sans-serif;

}

  1. templatemo_about .mission { 
   background-color: #bd3e25;
   color: #f5bd48;

}

  1. templatemo_about .product { 
   background-color: #334d5c;
   color: #f5bd48;

}

  1. templatemo_about .testimonial { 
   background-color: #efc84a;
   color: #ab4921;

}

  1. templatemo_about .statistic { 
   background-color: #334d5c;
   color: #efc84a;

}

  1. templatemo_about .modeling { 
   background-color: #58ad5f;
   color: #efc84a;

}

  1. templatemo_about .judging { 
   background-color: #4c9192;
   color: #efc84a;

}

  1. templatemo_team {

background:#fff; float:left; }

  1. templatemo_team #testimonial_text_wap { 
   overflow: hidden;

}

  1. templatemo_team #testimonial_text_wap h2 { 
   font-size: 24px;
   margin: 0;
   padding: 12px 0;

}

  1. templatemo_team #testimonial_text_wap h3 { 
   font-size: 20px;
   margin: 0;
   padding: 12px 0;

}

  1. templatemo_team #testimonial_text_wap img { 
   margin-bottom: 20px ;

}

  1. templatemo_team #testimonial_text_wap p { 
   font-size: 14px;
   line-height: 2em;

}

  1. templatemo_team .testimonial_text { 
   width: 100%;
   float: left;

}

  1. templatemo_team .pre_next { 
   font-size: 70px;
   top: 50%;
   margin-top: -35px;
   position: absolute;

}

  1. templatemo_team .pre_next a { 
   color: #6698b5;
   float: left;

}

  1. templatemo_team .pre_next a:hover { 
   color: #334d5c;

}

  1. templatemo_team #testimonial_text_wap h1 { 
   font-size: 70px;
   top: 50%;
   margin-top: -35px;

}

  1. templatemo_team .testimonial_top_bottom_spacer { 
   padding-bottom: 80px;

} /*events*/

  1. templatemo_events { 
   background: #6698b5;
   float: left;
   overflow: hidden;

}

  1. templatemo_events h1{ 
   color: #fff;

}

  1. templatemo_events .event_box_wap { 
   overflow:hidden;
   margin-bottom: 30px;
   cursor: pointer;
   position: relative;

}

  1. templatemo_events .event_box_wap .event_box_img { 
   position: relative;
   top: 0;

}

  1. templatemo_events .event_box_wap .event_box_caption { 
   position: relative;
   top: 0;
   padding-bottom: 10px;
   background: #fff;
   width: 100%;
   border-top: 3px solid #3c6f8c;

}

  1. templatemo_events .event_box_wap h1,
  2. templatemo_events .event_box_wap p { 
   margin: 0;
   color: #000000;
   text-align: left;

}

  1. templatemo_events .event_box_wap p { 
   padding: 5px 20px 15px 20px;

}

  1. templatemo_events .event_box_wap h1 { 
   padding: 20px 20px 20px 20px;
   font-size: 24px;
   line-height: 24px;

} /*timeline*/

  1. templatemo_timeline { 
   background: #fff;
   float: left;

}

  1. templatemo_timeline .container-fluid { 
   max-width: 1600px;
   position: absolute;
   margin: auto;
   margin-bottom: 80px;
   background: url("../images/time_line_bg.jpg") repeat-y center top;

}

  1. templatemo_timeline .time_line_wap { 
   position: absolute;
   display: none;

}

  1. templatemo_timeline .time_line_caption { 
   background: #68A4C4;
   padding: 10px 20px 10px 20px ;
   border-radius: 5px;
   height: 40px;
   clear: both;
   color: #fff;

}

  1. templatemo_timeline .time_line_paragraph { 
   background: #e6e6e6;
   padding: 10px;
   border-radius: 5px;
   width: 100%;
   margin-top: 50px;
   font-family: 'Century Gothic', sans-serif;

}

  1. templatemo_timeline .time_line_paragraph a { 
   color: #000;
   text-decoration: underline;

}

  1. templatemo_timeline .left_timeline { 
   margin-left: 30px;

}

  1. templatemo_timeline .left_timeline .time_line_caption { 
   float: right;
   margin-right: 0px;

}

  1. templatemo_timeline .right_timeline .time_line_caption { 
   float: left;

}

  1. templatemo_timeline .time_line_paragraph h1 { 
   text-align: left;
   margin: 0;
   font-size: 24px;
   line-height: 30px;
   color: #000;
   padding: 20px 20px 20px 20px;

}

  1. templatemo_timeline .time_line_paragraph p { 
   padding: 0px 20px 20px 20px;
   text-align: left;
   margin: 0;
   font-size: 14px;
   line-height: 2em;
   color: #000;

}

  1. templatemo_timeline .left_timer { 
   float: right;
   background: url("../images/arrow_left.png") 0 5px;

}

  1. templatemo_timeline .right_timer { 
   float: left;
   background: url("../images/arrow_right.png") 0px 5px;

}

  1. templatemo_timeline .left_timer ,
  2. templatemo_timeline .right_timer { 
   padding-left:30px;
   width: 101px;
   position: absolute;

}

  1. templatemo_timeline .left_timer span,
  2. templatemo_timeline .right_timer span { 
   border-radius: 20px;
   width: 30px;
   height: 30px;
   background: #e6e6e6;
   text-align: center;
   color: #fff;
   font-size: 24px;
   padding-top: 3px;
   margin-top: 3px;

} /*contact*/

  1. templatemo_contact { 
   background: #6698b5;
   float: left;

}

  1. templatemo_contact h1 { 
   color: #fff;

}

  1. templatemo_contact h2 { 
   font-size: 24px;
   color: #fff;
   padding-top: 0;
   padding-bottom: 20px;

}

  1. templatemo_contact_map { 
   width: 100%;
   height: 320px;
   float: left;
   margin-bottom: 40px;

}

  1. templatemo_contact ul li a { 
   background: none;

}

  1. templatemo_contact ul li a i { 
   width: 60px;
   padding: 20px 0;
   font-size: 32px;
   color: #fff;
   text-align: center;

}

  1. templatemo_contact p { 
   color: #fff;
   line-height: 30px;

margin-top: 15px; }

  1. templatemo_contact input { 
   width: 100%;
   height: 50px;
   padding: 10px;
   border: none;

}

  1. templatemo_contact textarea { 
   border: none;
   width: 100%;
   height: 150px;
   padding: 10px;

}

  1. templatemo_contact button { 
   width: 100%;
   height: 50px;
   float: left;
   margin-top: 20px;
   margin-bottom: 20px;
   border: none;
   background: #eaeaea;

}

  1. templatemo_contact button:hover { 
   background: #f4f4f4;

} /*templatemo_footer*/

  1. templatemo_footer { 
   width: 100%;
   border-top: 2px solid #507f9a;
   height: 70px;
   background: #447693;
   float: left;

}

  1. templatemo_footer p { 
   padding-top: 20px;
   color: #fff;
   text-align: center;

}

  1. templatemo_footer a { 
   color: #fff;
   text-decoration: underline;

}


/* Small devices (tablets, 768px and up) */ @media (max-width: 768px ) { 

   #templatemo_team .pre_next {
       font-size: 15px;
   }
   #templatemo_timeline .right_timer {
       background-position: center center;
   }

} /* Medium devices (desktops, 992px and up) */ @media (max-width: 970px ) { 

   #templatemo_timeline .right_timer {
       background-position: 100px 5px;
   }
   #templatemo_banner_menu #logo_text {
       font: normal normal normal 30px/1em 'Century Gothic', sans-serif;
   }
   #templatemo_timeline .container-fluid {
       background: url("../images/time_line_bg.jpg") repeat-y 28px 0;
   }

} /* Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px ) { }

Retrieved from "http://2014.igem.org/Template:Team:Fudan/CSS"