Team:HIT-Harbin/css/style.css

From 2013.igem.org

Revision as of 09:18, 23 September 2013 by Lanqiao (Talk | contribs)

/* ------------------------------------------------------------------------------------ */ /* -------------------------------- BASIC STYLE RESET --------------------------------- */ /* ------------------------------------------------------------------------------------ */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 

   margin: 0;
   padding: 0;
   border: 0;
   font-weight: inherit;
   font-style: inherit;
   font-size: 100%;
   font-family: inherit;
   vertical-align: baseline;

}

html { overflow-x: hidden; }

/* Tables still need 'cellspacing="0"' in the markup. */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } table, td, th { vertical-align: middle; }

/* Remove possible quote marks (") from <q>,
. */ blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* Remove annoying border on linked images. */ a img { border: none; } a { outline: none; } img { vertical-align: top; } .clearer { height: 0px; clear: both; } /* ------------------------------------------------------------------------------------ */ /* -------------------------------- MAIN STYLES DEFINITION ---------------------------- */ /* ------------------------------------------------------------------------------------ */ body { margin: 0; padding: 0; line-height: 20px; width: 100%; font-family: Arial, Verdana; font-size: 62.5%; cursor: default; color: #000000; background: #fff url('../images/bkg-pattern.jpg') repeat left top; } /* ---------------------------------------------------------- * HEADLINES * ----------------------------------------------------------*/ h1, h2, h3, h4, h5, h6 { margin: 0; padding: 2px 0 0 0; font-family: Arial; font-weight: normal; color: #37342d; margin-bottom: 30px; text-transform: uppercase; word-spacing: 2px; } h1, h1 a { font-size: 28px; line-height: 28px; } h2, h2 a { font-size: 24px; line-height: 27px; } h3, h3 a { font-size: 22px; line-height: 22px; } h4, h4 a { font-size: 20px; line-height: 20px; } h5, h5 a { font-size: 18px; line-height: 18px; } h6, h6 a { font-size: 16px; line-height: 16px; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { display: block; padding: 0; margin: 0; text-decoration: none !important; color: #37342d; overflow: visible; } h1.hashed, h2.hashed, h3.hashed, h4.hashed, h5.hashed, h6.hashed { background: transparent url('../images/separator-bkg.png') repeat-x left center scroll ; clear: both; } h1.hashed span, h2.hashed span, h3.hashed span, h4.hashed span, h5.hashed span, h6.hashed span { background: #fff url('../images/bkg-pattern.jpg') repeat left top scroll; padding: 0 10px 0 0; } .nocufon { padding: 0; } .subtitle { color: #37342d; font-weight: bold; margin-bottom: 20px; } h4.subtitle, h4.subtitle a { font-size: 16px; line-height: 16px; } h5.subtitle, h5.subtitle a { font-size: 14px; line-height: 14px; } h6.subtitle, h6.subtitle a { font-size: 12px; line-height: 12px; } span.colored { color: #ca9351; } h1 span.colored, h2 span.colored, h3 span.colored, h4 span.colored, h5 span.colored, h6 span.colored { color: #c0b294; } p { color: #37342d; font: 13px/21px Arial; padding-bottom: 26px; } a { color: #ca9351; text-decoration: none; } a:hover { text-decoration: underline; } img { background: transparent; padding: 0; margin: 0; /* margin-bottom: 20px;*/ display: inline-block; } img.icon { padding: 6px 18px 0 18px; margin: 0 0 10px 0; } img.clean { background: none; padding: 0; border: 0; } a.image-holder { position: relative; display: block; margin: 0 0 30px 0; padding: 0; overflow: hidden; } a.image-holder img { margin: 0; position: relative; z-index: 10; } a.image-holder .image-zoom { display: block; display: none; width: 100%; height: 100%; background: transparent url('../images/zoom-icon.png') no-repeat center; position: absolute; margin: 0; padding: 0; top: 0px; left: 0px; z-index: 20; overflow: hidden; } body .alignleft { float: left; margin-right: 24px; margin-bottom: 20px; } body .alignright { float: right; margin-left: 24px; margin-bottom: 20px; } body .aligncenter { margin: 0 auto; margin-bottom: 20px; display: block; } body .alignleft.margin-bottom, body .alignright.margin-bottom, body .aligncenter.margin-bottom { margin-bottom: 30px; } .red { color: #e35337; } em { font-style: italic; } input { outline: 0; } ul { list-style-type: square; list-style-position: outside; margin: 0 0 26px 20px; } ul li { font: 13px/25px Arial; } .separator { clear: both; height: 1px; width: auto; background: transparent url('../images/separator-bkg.png') repeat-x left top; margin-bottom: 40px; } blockquote { clear: both; } blockquote p { background: transparent url('../images/quotes.png') no-repeat left top; background-position: 0 6px; padding: 0 0 0 66px; margin: 0; font: italic 18px/25px "Times New Roman"; color: #37342d; } blockquote cite { margin: 12px 0 40px 0; padding: 10px 0 0 0; display: block; color: #c78c45; font: bold 14px "Times New Roman"; background: url('../images/separator-bkg.png') repeat-x top left transparent; } .preload { position: relative; overflow: hidden; } .preloading { background: #fcfbf9 url('../images/loading.gif') no-repeat center; position: absolute; z-index: 20; width: 100%; height: 100%; } .preload img { visibility: hidden; } /* ---------------------------------------------------------- * FORM ELEMENTS * ----------------------------------------------------------*/ .form-details { color: #888172; font-size: 12px; float: right; text-align: right; margin-right: 162px; line-height: 40px; } label { display: block; color: #8c8c8c; font-size: 12px; padding: 4px 0; font-style: italic; } input, textarea { height: 16px; padding: 8px 10px 8px 10px; border: 1px solid #c3b598; font: 12px/16px Arial; color: #888172; margin: 0 0 20px 0; } textarea { height: auto; } input:focus, textarea:focus { border: 1px solid #eadcbf; outline: none; } /* ---------------------------------------------------------- * ROOT TEMPLATE DEFINITION * ----------------------------------------------------------*/
  1. root {
margin: 0; padding: 0; font: 13px/21px Arial; color: #37342d; } /* ---------------------------------------------------------- * HEADER DEFINITION * ----------------------------------------------------------*/
  1. header { position: relative; width: 960px; margin: 0 auto; }
  2. header .header-bar {
margin: 50px 0 50px 0; clear: both; height: 79px; background: transparent url('../images/header-bar-bkg.png') repeat-x left top; position: relative; }
  1. header #logo {
height: 128px; background: transparent url('https://static.igem.org/mediawiki/2013/8/82/Logo-bkg.png') repeat-x left top; padding: 0; margin: 0; display: block; width: auto; position: relative; vertical-align: top; top: -24px; left: 30px; float: left; }
  1. header #logo h1 {
position: relative; margin: 0; margin-top: 24px; left: -5px; right: -5px; top: 0; color: #fff; background: transparent url('../images/logo-fg.png') repeat-x left top; height: 54px; padding: 26px 5px 0 5px; width: 100%; display: block; font-size: 35px; } body.js-enabled #header #logo h1 {}
  1. header #logo h1 a {
font-size: 35px; color: #fff; display: block; padding: 0 20px; text-align: center; }
  1. header #logo h1 a:hover {
text-decoration: none; } /* ---------------------------------------------------------- * MAIN MENU DEFINITION * ----------------------------------------------------------*/ ul#menu { position: relative; right: 0; margin: 0; padding: 0; background: transparent; z-index: 50; overflow: visible; list-style-type: none; display: block; float: right; } ul#menu > li { display: inline-block; float: left; margin: 0; padding: 0; position: relative; } ul#menu > li > a { color: #777163; font: 15px/15px Arial; display: block; float: left; margin: 0 14px; height: 15px; padding: 12px 0; margin-top: 22px; vertical-align: top; text-transform: uppercase; } body.js-enabled ul#menu > li > a { margin-top: 25px; padding: 10px 0; } ul#menu > li > a:hover { color: #37342d; text-decoration: none; } ul#menu > li.current-menu-item > a, ul#menu > li.current_page_parent > a, ul#menu > li.current-menu-parent > a, ul#menu > li.current-menu-ancestor > a, ul#menu > li.current_page_ancestor > a { color: #37342d; } ul#menu > li.current-menu-item a:hover, ul#menu > li.current_page_parent a:hover, ul#menu > li.current-menu-parent a:hover, ul#menu > li.current-menu-ancestor a:hover, ul#menu > li.current_page_ancestor a:hover { } ul#menu li:hover > ul.sub-menu { display: block; } /* ---------------------------------------------------------- * SUBMENU * --------------------------------------------------------- */ ul#menu li ul.sub-menu { margin: 0; display: none; position: absolute; top: 60px; left: 0px; background: #fff; z-index: 50; border: 1px solid #f6e5cc; border-radius: 3px; box-shadow: 0 4px 5px rgba(0,0,0, .05); width: 180px; } ul#menu li ul.sub-menu li { margin: 0; position: relative; clear: both; display: block; width: 180px; padding: 0; } ul#menu li ul.sub-menu li a { position: relative; clear: both; display: block; cursor: pointer; border: 0; text-shadow: 0 0 0 transparent; background: transparent none; font-size: 12px; font-weight: normal; text-transform: none; color: #888172; width: 160px; height: 20px; line-height: 20px; padding: 8px 10px; text-align: left; border-top: 1px solid #f6e5cc; border-radius: 0; } ul#menu li ul.sub-menu li a.last, ul#menu li ul.sub-menu li:first-child > a { border-top: 0; } ul#menu li ul.sub-menu li a:hover { box-shadow: 0 0 0 transparent; border-radius: 0; color: #37342d; text-decoration: none; } ul#menu li ul.sub-menu li a.more { background: transparent url('../images/menu-item-more.png') no-repeat right center; background-position: 166px; } ul#menu li ul.sub-menu ul.sub-menu, ul#menu li ul.sub-menu ul.sub-menu ul.sub-menu { left: 160px; top: 8px; } /* ---------------------------------------------------------- * MEGAMENU * --------------------------------------------------------- */
  1. menu .pixel-mega-menu {
display: none; position: absolute; left: 0; top: 60px; min-width: 460px; border-radius: 0; }
  1. menu .pixel-mega-menu ul.sub-menu {
width: 100%; padding: 30px 20px 20px 20px; margin: 0; display: block; top: auto; left: auto; background: #fff; border-radius: 3px; border: 0; }
  1. menu .pixel-mega-menu > ul.sub-menu { border: 1px solid #f6e5cc; }
  2. menu .pixel-mega-menu > ul.sub-menu li ul.sub-menu {
padding: 0; background: none; position: relative; left: auto; top: auto; color: #555; overflow: hidden; box-shadow: 0 0 0 transparent; }
  1. menu .pixel-mega-menu > ul.sub-menu ul li {
margin: 0; color: #777; height: 24px; line-height: 23px; width: 90%; margin-left: 0px; }
  1. menu .pixel-mega-menu > ul.sub-menu > li a {
display: block; border: 0; padding: 0; margin: 0; height: auto; height: 30px; line-height: 30px; text-indent: 0; color: #888172; text-decoration: underline; }
  1. menu .pixel-mega-menu ul.sub-menu a:hover { background: none; color: #37342d; text-decoration: none; }
ul#menu li:hover > .pixel-mega-menu { display: block; }
  1. menu .pixel-mega-menu > ul.sub-menu > li {
clear: none; float: left; display: block; margin: 0; padding: 0; margin-bottom: 30px; width: 48%; margin-right: 2%; }
  1. menu .pixel-mega-menu > ul.sub-menu > li:last-child, #menu .pixel-mega-menu > ul.sub-menu > li.last {
width: 50%; margin-right: 0; }
  1. menu .pixel-mega-menu > ul.sub-menu li h4 {
font: 14px/18px Arial; color: #948d7c; border-bottom: 1px solid #f6e5cc; margin-bottom: 14px; padding: 0px 10px 4px 0; background: none; }
  1. menu .pixel-mega-menu > ul.sub-menu > li p {
padding-bottom: 10px; color: #999; color: #888172; font: italic 12px/20px Arial; }
  1. menu .pixel-mega-menu.two-columns { width: 460px; }
  2. menu .pixel-mega-menu.three-columns { width: 660px; }
  3. menu .pixel-mega-menu.four-columns { width: 920px; }
  4. menu .pixel-mega-menu.two-columns > ul.sub-menu > li { width: 48%; margin-right: 2%; }
  5. menu .pixel-mega-menu.three-columns > ul.sub-menu > li { width: 31%; margin-right: 2%; }
  6. menu .pixel-mega-menu.four-columns > ul.sub-menu > li { width: 23%; margin-right: 2%; }
  7. menu .pixel-mega-menu.two-columns > ul.sub-menu > li.last { width: 50%; margin-right: 0; }
  8. menu .pixel-mega-menu.three-columns > ul.sub-menu > li.last { width: 33%; margin-right: 0; }
  9. menu .pixel-mega-menu.four-columns > ul.sub-menu > li.last { width: 25%; margin-right: 0; }
  10. menu .pixel-mega-menu > ul.sub-menu > li.newline { clear: both; width: 100%; padding: 0; margin: 0; }
  11. menu .pixel-mega-menu > ul.sub-menu > li.half-column { width: 48%; margin-right: 2%; }
  12. menu .pixel-mega-menu > ul.sub-menu > li.third-column { width: 31%; margin-right: 2%; }
  13. menu .pixel-mega-menu > ul.sub-menu > li.two-thirds-column { width: 65%; margin-right: 2%; }
  14. menu .pixel-mega-menu > ul.sub-menu > li.half-column.last { width: 50%; margin-right: 0; }
  15. menu .pixel-mega-menu > ul.sub-menu > li.third-column.last { width: 33%; margin-right: 0; }
  16. menu .pixel-mega-menu > ul.sub-menu > li.two-thirds-column.last { width: 67%; margin-right: 0; }
  17. menu .pixel-mega-menu > ul.sub-menu > li.fourth-column { width: 23%; margin-right: 2%; }
  18. menu .pixel-mega-menu > ul.sub-menu > li.fourth-column.last { width: 25%; margin-right: 0; }
  19. menu .pixel-mega-menu > ul.sub-menu > li.full-column { width: 100%; margin-right: 0; }
  20. menu .pixel-mega-menu > ul.sub-menu > li.last { margin-right: 0; }
/* ---------------------------------------------------------- * SUBHEADER * --------------------------------------------------------- */
  1. subheader-bar { margin-bottom: 30px; background: transparent url('../images/separator-bkg.png') repeat-x bottom left; padding-bottom: 20px; overflow: hidden; }
  2. subheader-bar div.site-description { color: #37342d; font: italic 13px/18px Arial; margin-top: 8px; display: inline-block; float: left; }
  3. subheader-bar div.site-description h4 { margin: 0; padding: 0; font-style: normal; }
  1. search-bar {
display: block; float: right; width: 250px; }
  1. search-bar input {
border: 1px solid #c3b598; width: 206px; height: 28px; line-height: 28px; padding: 0 6px; margin: 0; color: #888172; float: left; }
  1. search-bar a.search-button {
background: transparent url('../images/search-button.gif') no-repeat center; width: 30px; height: 30px; display: inline-block; float: right; }
  1. search-bar a.search-button:hover { text-decoration: none; }
/* ---------------------------------------------------------- * MULTI COLUMNS * ----------------------------------------------------------*/ .multi-columns { clear: both; overflow: hidden; margin-bottom: 20px; } .multi-columns .multi-columns { clear: both; margin: 0; } .multi-columns .half { float: left; width: 48%; margin-right: 4%; } .multi-columns .third { float: left; width: 31%; margin-right: 3.5%; } .multi-columns .twothirds { float: left; width: 65.5%; margin-right: 3.5%; } .multi-columns .fourth { float: left; width: 22%; margin-right: 4%; }
  1. root .clearer { clear: both; }
  2. root .last { margin-right: 0; }
/* ---------------------------------------------------------- * CONTENT * --------------------------------------------------------- */
  1. content {
width: 960px; margin: 0 auto; padding: 0 0 30px 0; min-height: 300px; } /* ---------------------------------------------------------- * MAINAREA + SIDEBARS * ----------------------------------------------------------*/ .sidebar-left, .sidebar-right { float: left; width: 190px; margin: 0 0 40px 0; padding: 4px 10px 0 0; margin-right: 30px; background: transparent url('../images/sidebar-vert-sep-bkg.jpg') repeat-y right top scroll; } .mainarea-right, .mainarea-left, .mainarea-center { float: left; width: 730px; overflow: hidden; margin: 0; padding: 4px 0 20px 0; } .sidebar-right { float: right; margin: 0; background: transparent url('../images/sidebar-vert-sep-bkg.jpg') repeat-y left top scroll; padding: 4px 0 0 10px; } .mainarea-left { float: left; margin: 0 30px 0 0; } .mainarea-center { width: 500px; margin: 0 30px 0 0; float: left; } .sidebar-right.margin { float: left; } /* ---------------------------------------------------------- * ALERT BOXES * ----------------------------------------------------------*/ .alert-box { overflow: hidden; border-radius: 6px; padding: 0 20px; margin: 0 0 26px 0; } .alert-box .icon { padding: 20px 0; } .alert-box p { padding: 0 0 0 50px; } .alert-box.success { background: transparent url('../images/alert-box-success-bkg.png') repeat-x bottom left; max-height: 90px; border: 1px solid #a9d7ac; box-shadow: inset 0 0 7px 0 #b2dfb5; } .alert-box.success p { color: #196b07; } .alert-box.success div.icon { background: transparent url('../images/success-box-icon.png') no-repeat left center; } .alert-box.warning { background: transparent url('../images/alert-box-warning-bkg.png') repeat-x bottom left; max-height: 90px; border: 1px solid #e3d2a2; box-shadow: inset 0 0 7px 0 #eddeb4; } .alert-box.warning p { color: #7d5609; } .alert-box.warning div.icon { background: transparent url('../images/warning-box-icon.png') no-repeat left center; } .alert-box.info { background: transparent url('../images/alert-box-info-bkg.png') repeat-x bottom left; max-height: 90px; border: 1px solid #afccd6; box-shadow: inset 0 0 7px 0 #b9d3dd; } .alert-box.info p { color: #15537d; } .alert-box.info div.icon { background: transparent url('../images/info-box-icon.png') no-repeat left center; } .alert-box.error { background: transparent url('../images/alert-box-error-bkg.png') repeat-x bottom left; max-height: 90px; border: 1px solid #e1adad; box-shadow: inset 0 0 7px 0 #e7b5b5; } .alert-box.error p { color: #a84835; } .alert-box.error div.icon { background: transparent url('../images/error-box-icon.png') no-repeat left center; } /* ---------------------------------------------------------- * GALLERY * ----------------------------------------------------------*/ ul.gallery { list-style-type: none; list-style-position: outside; margin: 0 0 10px 0; padding: 0; overflow: hidden; } ul.gallery li { display: inline-block; float: left; margin: 0 8px 8px 0; } ul.gallery li a.image-holder { margin: 0; } ul.gallery li img { display: block; margin: 0; float: left; } ul.gallery.small li { margin: 0 6px 6px 0; } ul.gallery.small li img { border: 0; padding: 0; } .wrapper960 { width: 960px; margin: 0 auto; }
Retrieved from "http://2013.igem.org/Team:HIT-Harbin/css/style.css"