Team:HIT-Harbin/css/home.css

From 2013.igem.org

Revision as of 15:59, 16 September 2013 by Lanqiao (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

@charset "utf-8";


  1. content{
                 width:100%;
                 padding:0;
                 border:0;
                margin:0;
            background-color: transparent;
           }
  1. top-section {
             height:0px ! important ;
             margin: 0 auto;
             padding:0;
             border:0;
             background-color: transparent;
             }
  1. p-logo {
             display: none;

}

  1. search-controls{
              display: none;

}

  1. catlinks{
             display: none;

}

.firstHeading {

            display:none;

}

  1. footer-box{
          background-color: transparent;
         border: 0px;
         margin: 0px atuo;

}

}

  • {padding:0; margin:0;}

body {background:url(Body-bg.gif) repeat-x #575757; font-size:11px; color:#4e4e4e;} a {outline:none; color:#5f5f5f; font-weight:bold; text-decoration:none;} a:hover {color:#ea0101; } a img {border:none;}

.alignright {float:right;} .alignleft {float:left;} .alignnone {clear:both;} .aligncenter {margin-left: auto; margin-right: auto;}

  1. wrap {width:938px; background:url(WRAP-BG2.png) repeat-x top left #edebeb; margin:0 auto; overflow:hidden; clear:both; border-top:0px solid #c9c9c9; border-left:1px solid #c9c9c9; border-right:1px solid #c9c9c9; padding-bottom:30px;}
  2. wrap-inner {width:820px; margin:34px 0 0 30px; padding:0 30px 0 30px; overflow:hidden; background:url(TITLE-AREA-BG.jpg) no-repeat top left;}
  3. wrap-inner-withslide {width:820px; margin:34px 0 0 30px; padding:0 30px 0 30px; background: url(SLIDER-BG.png) no-repeat top left; overflow:hidden; }

/*header*/

  1. header {height:125px; width:940px; border-top:15px solid #fff; text-align:left; margin:0 auto; }
  1. nav {float:left;width:940px;}
  2. nav ul li.page_item {float:left; list-style:none; padding:3px 8px 6px 8px; line-height:18px; height:18px;background: url(Ul-bg.png

) repeat-x bottom left; margin-right:2px;}

  1. nav ul li.current_page_item {background:#000000; }
  2. nav ul li.current_page_item a {color:#fff;}
  3. nav ul li.page_last{float:left; list-style:none; padding-right:0; padding:3px 8px 6px 8px; line-height:18px; height:18px; background: url(Ul-bg.png) repeat-x bottom left;}
  4. nav ul li a {font-weight:bold; text-decoration:none; color:#fff; font-family:'Lucida Grande','Lucida Sans Unicode','Trebuchet MS', verdana, georgia; text-shadow:0 1px 0 #000;}
  5. nav ul li a:hover {color:#999999;}

.logo-area {padding-top:5px; clear:both; overflow:visible; height:220px;} a.logo {padding:5px 0 0 0; display:block; width:940px; height:220px; overflow:visible; float:left;} a#HIT-logo {text-indent:0px; background:url(HBackground.png) no-repeat;}

a.portfolio-image {display:block; width:400px; height:26px; position:relative; top:16px; left:-8px; z-index:2;} img.large-thumbs {position:relative; z-index:1; padding-bottom:10px;} .large-image{background:url(LARGE-IMG.png) no-repeat bottom left; width:400px; height:500px; float:left; margin-bottom:10px; padding-bottom:18px; } .large-image.odd {margin-right:20px;} .large-image .post-title-small{clear:both; padding:0 20px 0 20px; font-family:'Lucida Grande','Lucida Sans Unicode','Trebuchet MS', verdana, georgia; text-align:center;} .large-image .post-title-small a{font-size:13px; font-weight:bold; letter-spacing:0;line-height:16px; color:#333333; text-shadow:0 1px 0 #fff; } .large-image .post-title-small a:hover {color:#5f5f5f; }

  1. nav2 li ul {position: absolute; width: 20em; left: -999em; padding-top:-1px;}
  2. nav2 li:hover ul, #nav2 li.sfhover ul {left: auto; z-index:1000;}
  3. nav2 li ul li {border-bottom:0px solid #dedbd1; border-left:1px solid #dedbd1; border-right:1px solid #dedbd1; line-height:0px; width:15em;}
  4. nav2 li:hover, #nav2 li.hover {position: static;}
  5. nav2 li ul ul {margin: -22px 0 0 15em;}
  6. nav2 li:hover ul ul, #nav2 li.sfhover ul ul {left: -999em;}
  7. nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul {left: auto;}
  8. nav2 li:hover ul ul, #nav2 li:hover ul ul ul, #nav2 li.sfhover ul ul, #nav2 li.sfhover ul ul ul {left: -999em;}
  9. nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul {left: auto;}

.large-imagea{background:url(LARGE-IMG.png) no-repeat bottom left; width:400px; height:316px; float:left; margin-bottom:10px; padding-bottom:18px; } .large-imagea.odd {margin-right:20px;} .large-imagea .post-title-small{clear:both; padding:0 20px 0 20px; font-family:'Lucida Grande','Lucida Sans Unicode','Trebuchet MS', verdana, georgia; text-align:center;} .large-imagea.post-title-small a{font-size:13px; font-weight:bold; letter-spacing:0;line-height:16px; color:#333333; text-shadow:0 1px 0 #fff; } .large-imagea.post-title-small a:hover {color:#5f5f5f; }

/*index*/ .title-area {clear:both; height:100px; overflow:hidden; text-align:left; letter-spacing:-1px; text-transform:capitalize; margin-bottom:38px; font-size:40px; font-weight:bold; text-transform:capitalize; line-height:100px;text-shadow:0 2px 0 #000; color:#e1e1e1;}

  1. main-container {text-align:left; width:800px; overflow:hidden; line-height:22px; float:left; min-height:500px;}

.post-title {font-size:20px; line-height:29px; letter-spacing:-1px; text-transform:none; text-shadow:0 1px 0 #fff; padding-bottom:7px; margin-bottom:9px; background:url(Horiz.gif) repeat-x bottom left; color:#000000;} .post-titlee {font-size:22px; line-height:29px; letter-spacing:-1px; text-transform:none; text-shadow:0 1px 0 #fff; padding-bottom:7px; margin-bottom:9px; background:url(Horiz.gif) repeat-x bottom left;} .post-title a {font-weight:bolder;} .post-meta {font-family:'Lucida Grande','Lucida Sans Unicode','Trebuchet MS', verdana, georgia; font-size:11.5px; padding:2px 0 10px 0; margin-bottom:20px;} span.author {font-weight:bold; text-transform:capitalize; background:url(user.png) no-repeat top left; padding-left:19px; } span.the-date{background:url(calendar.png) no-repeat top left; padding-left:19px; font-weight:bold; color:#a2a2a2; margin-left:8px;} span.the-comments {background:url(Balloon.png) no-repeat top left; padding-left:19px; margin-left:8px; color:#891111; font-family:'Lucida Grande','Lucida Sans Unicode','Trebuchet MS', verdana, georgia; font-size:11.5px; } .post-excerpt {padding-bottom:30px; min-height:50px; overflow:hidden; clear:both;} .post-excerpte {font-size:14px; font-family:Arial;padding-bottom:30px; min-height:50px; overflow:hidden; clear:both;line-height:29px;} .post-excerpt a {color:#4E4E4E; background:#FFF5C0; text-shadow:0 1px 0 #fff;} .post-excerpt a:hover {color:#828282;} .post-excerpt img.alignright {display:inline; margin:8px 0 5px 20px;} .post-excerpt img.alignleft {display:inline; margin:8px 20px 5px 0;} .post-excerpt img.aligncenter {clear:both; margin:10px auto; display:block; } .post-excerpt img.alignnone {clear:both; margin:10px auto; display:block; } .post-excerpt a img.alignright {display:inline; margin:8px 0 5px 20px;} .post-excerpt a img.alignleft {display:inline; margin:8px 20px 5px 0;} .post-excerpt a img.aligncenter {clear:both; margin:10px auto; display:block; } .post-excerpt a img.alignnone {clear:both; margin:10px auto; display:block;} .post-excerpt h1, .post-excerpt h2, .post-excerpt h3, .post-excerpt h4, .post-excerpt h5, .post-excerpt h6 {font-size:20px; line-height:18px; margin-bottom:10px; color:#000000; letter-spacing:-1px;} .post-excerpt ol {padding:10px 10px 10px 15px; margin-left:10px;} .post-excerpt ol li ol {padding-left:20px;} .post-excerpt ol li ul {padding-left:20px;} .post-excerpt ul {padding:10px 10px 10px 15px; margin-left:10px;} .post-excerpt ul li ol {padding-left:20px;} .post-excerpt ul li ul {padding-left:20px;} a.more-link {color:#fff; font-family:verdana, georgia; text-align:right; text-shadow:0 1px 0 #000; font-size:10px; font-family:Verdana; background:#ab0303; padding:3px; position:relative; top:-25px; clear:both;} a:hover.more-link{color:#000; text-shadow: none;}

  1. post-navigation {clear:both; margin:45px 0 10px 0; padding:3px; background:#999999; text-align:center;}
  2. post-navigation a {color:#fff; text-shadow:0 1px 0 #000;}
  3. post-navigation a:hover {color:#000; text-shadow:0 1px 0 #fff;}

/*home page with slider*/ /* Easy Slider */

  1. slider{position:relative; text-align:left; }
  2. slider ul, #slider li {margin:0; padding:0; list-style:none;}
  3. slider li {width:820px; height:376px; overflow:hidden; background: url(Slider-li-bg.png) no-repeat; color:#FFFFFF; position:relative; }
  4. slider .left-container {float:left; width:380px; height:210px; overflow:hidden; line-height:36px; margin-top:53px;}
  5. slider .post-title-large {margin-bottom:22px;}
  6. slider .post-title-large a { font-size:40px; font-weight:bold; text-transform:capitalize; line-height:40px;text-shadow:0 2px 0 #000; color:#e1e1e1;}
  7. slider .post-excerpt {font-size:20px; font-weight:bold; color:#FFFFFF;}

ol#controls{margin:1em 0; padding:0; height:28px; position:relative; top:-90px;} ol#controls li{margin:0 10px 0 0; padding:0; float:left; list-style:none; height:23px; line-height:23px;} ol#controls li a{float:left; height:23px; line-height:23px; background: url(Contols-white.png) repeat-x bottom left; color:#000; text-shadow:0 1px 0 #fff; padding:0 8px; text-decoration:none; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; } ol#controls li.current a{background:#ab0303; color:#fff; text-shadow:none;} ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}


.slider-image-container{position:relative; width:400px; height:300px; float:right; margin-top:54px; } .post-390 {width:390px; float:left; margin-bottom:20px; text-align:left;} .post-390.odd {margin-right:40px;} .post-390 .post-excerpt {line-height:24px;} .post-390 a.more-link {position:relative; top:-15px;} .post-391 {width:800px; float:left; margin-bottom:20px; text-align:left;} .post-391.odd {margin-right:40px;} .post-391 .post-excerpt {line-height:24px;}