Team:HIT-Harbin/css/style.css
From 2013.igem.org
(12 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | /* | + | /* ------------------------------------------------------------------------------------ */ |
- | * | + | /* -------------------------------- 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>. */ |
- | + | 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("https://static.igem.org/mediawiki/2013/d/dc/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("https://static.igem.org/mediawiki/2013/e/e6/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("https://static.igem.org/mediawiki/2013/d/dc/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("https://static.igem.org/mediawiki/2013/a/aa/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("https://static.igem.org/mediawiki/2013/e/e6/Separator-bkg.png") repeat-x left top; | |
- | + | margin-bottom: 40px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | blockquote { clear: both; } | |
- | + | blockquote p { | |
- | + | background: transparent url("https://static.igem.org/mediawiki/2013/6/65/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("https://static.igem.org/mediawiki/2013/e/e6/Separator-bkg.png") repeat-x top left transparent; | |
} | } | ||
- | . | + | .preload { position: relative; overflow: hidden; } |
+ | .preloading { background: #fcfbf9 url("https://static.igem.org/mediawiki/2013/archive/4/42/20130923094421%21Loading.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 | |
+ | * ----------------------------------------------------------*/ | ||
- | + | #root { | |
- | + | margin: 0; | |
- | + | padding: 0; | |
- | + | font: 13px/21px Arial; | |
- | + | color: #37342d; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | /* ---------------------------------------------------------- | |
- | + | * HEADER DEFINITION | |
+ | * ----------------------------------------------------------*/ | ||
- | . | + | #header { position: relative; width: 960px; margin: 0 auto; } |
- | + | #header .header-bar { | |
- | + | margin: 50px 0 50px 0; | |
- | + | clear: both; | |
- | + | height: 79px; | |
+ | background: transparent url("https://static.igem.org/mediawiki/2013/4/42/Header-bar-bkg.png") repeat-x left top; | ||
+ | position: relative; | ||
} | } | ||
- | / | + | #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; | ||
+ | } | ||
+ | #header #logo h1 { | ||
+ | position: relative; | ||
+ | margin: 0; | ||
+ | margin-top: 24px; | ||
+ | left: -5px; | ||
+ | right: -5px; | ||
+ | top: 0; | ||
+ | color: #fff; | ||
+ | background: transparent url("https://static.igem.org/mediawiki/2013/f/f2/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 {} | ||
+ | #header #logo h1 a { | ||
+ | font-size: 35px; | ||
+ | color: #fff; | ||
+ | display: block; | ||
+ | padding: 0 20px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | #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 { | |
- | 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; } | |
- | a | + | 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("https://static.igem.org/mediawiki/2013/c/cc/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 | |
+ | * --------------------------------------------------------- */ | ||
- | + | #menu .pixel-mega-menu { | |
- | + | display: none; | |
- | + | ||
- | . | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
position: absolute; | position: absolute; | ||
- | top: | + | left: 0; |
+ | top: 60px; | ||
+ | min-width: 460px; | ||
+ | border-radius: 0; | ||
+ | } | ||
+ | #menu .pixel-mega-menu ul.sub-menu { | ||
width: 100%; | width: 100%; | ||
- | + | padding: 30px 20px 20px 20px; | |
- | + | margin: 0; | |
- | + | display: block; | |
- | + | top: auto; | |
- | + | left: auto; | |
- | + | background: #fff; | |
- | + | border-radius: 3px; | |
- | + | border: 0; | |
- | + | } | |
+ | #menu .pixel-mega-menu > ul.sub-menu { border: 1px solid #f6e5cc; } | ||
+ | #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; | ||
+ | } | ||
+ | #menu .pixel-mega-menu > ul.sub-menu ul li { | ||
+ | margin: 0; | ||
+ | color: #777; | ||
+ | height: 24px; | ||
+ | line-height: 23px; | ||
+ | width: 90%; | ||
+ | margin-left: 0px; | ||
+ | } | ||
+ | #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; | ||
+ | } | ||
+ | #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; } | ||
+ | #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%; | ||
+ | } | ||
+ | #menu .pixel-mega-menu > ul.sub-menu > li:last-child, #menu .pixel-mega-menu > ul.sub-menu > li.last { | ||
+ | width: 50%; | ||
+ | margin-right: 0; | ||
+ | } | ||
+ | #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; | ||
+ | } | ||
+ | #menu .pixel-mega-menu > ul.sub-menu > li p { | ||
+ | padding-bottom: 10px; | ||
+ | color: #999; | ||
+ | color: #888172; | ||
+ | font: italic 12px/20px Arial; | ||
} | } | ||
- | . | + | #menu .pixel-mega-menu.two-columns { width: 460px; } |
- | . | + | #menu .pixel-mega-menu.three-columns { width: 660px; } |
+ | #menu .pixel-mega-menu.four-columns { width: 920px; } | ||
+ | #menu .pixel-mega-menu.two-columns > ul.sub-menu > li { width: 48%; margin-right: 2%; } | ||
+ | #menu .pixel-mega-menu.three-columns > ul.sub-menu > li { width: 31%; margin-right: 2%; } | ||
+ | #menu .pixel-mega-menu.four-columns > ul.sub-menu > li { width: 23%; margin-right: 2%; } | ||
+ | #menu .pixel-mega-menu.two-columns > ul.sub-menu > li.last { width: 50%; margin-right: 0; } | ||
+ | #menu .pixel-mega-menu.three-columns > ul.sub-menu > li.last { width: 33%; margin-right: 0; } | ||
+ | #menu .pixel-mega-menu.four-columns > ul.sub-menu > li.last { width: 25%; margin-right: 0; } | ||
+ | #menu .pixel-mega-menu > ul.sub-menu > li.newline { clear: both; width: 100%; padding: 0; margin: 0; } | ||
+ | #menu .pixel-mega-menu > ul.sub-menu > li.half-column { width: 48%; margin-right: 2%; } | ||
+ | #menu .pixel-mega-menu > ul.sub-menu > li.third-column { width: 31%; margin-right: 2%; } | ||
+ | #menu .pixel-mega-menu > ul.sub-menu > li.two-thirds-column { width: 65%; margin-right: 2%; } | ||
+ | #menu .pixel-mega-menu > ul.sub-menu > li.half-column.last { width: 50%; margin-right: 0; } | ||
+ | #menu .pixel-mega-menu > ul.sub-menu > li.third-column.last { width: 33%; margin-right: 0; } | ||
+ | #menu .pixel-mega-menu > ul.sub-menu > li.two-thirds-column.last { width: 67%; margin-right: 0; } | ||
+ | #menu .pixel-mega-menu > ul.sub-menu > li.fourth-column { width: 23%; margin-right: 2%; } | ||
+ | #menu .pixel-mega-menu > ul.sub-menu > li.fourth-column.last { width: 25%; margin-right: 0; } | ||
+ | #menu .pixel-mega-menu > ul.sub-menu > li.full-column { width: 100%; margin-right: 0; } | ||
+ | #menu .pixel-mega-menu > ul.sub-menu > li.last { margin-right: 0; } | ||
- | + | /* ---------------------------------------------------------- | |
- | + | * SUBHEADER | |
- | + | * --------------------------------------------------------- */ | |
- | + | ||
- | + | ||
- | . | + | #subheader-bar { margin-bottom: 30px; background: transparent url("https://static.igem.org/mediawiki/2013/e/e6/Separator-bkg.png") repeat-x bottom left; padding-bottom: 20px; overflow: hidden; } |
+ | #subheader-bar div.site-description { color: #37342d; font: italic 13px/18px Arial; margin-top: 8px; display: inline-block; float: left; } | ||
+ | #subheader-bar div.site-description h4 { margin: 0; padding: 0; font-style: normal; } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | /* ---------------------------------------------------------- | |
+ | * 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%; } | ||
+ | #root .clearer { clear: both; } | ||
+ | #root .last { margin-right: 0; } | ||
- | /* | + | /* ---------------------------------------------------------- |
- | + | * CONTENT | |
- | + | * --------------------------------------------------------- */ | |
- | # | + | |
- | + | #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("https://static.igem.org/mediawiki/2013/5/55/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("https://static.igem.org/mediawiki/2013/5/55/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; } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | . | + | /* ---------------------------------------------------------- |
- | + | * CUSTOM HEADLINES | |
- | + | * ----------------------------------------------------------*/ | |
- | + | ||
- | + | .custom-headline { | |
- | + | font: 15px/18px Arial; | |
+ | text-transform: uppercase; | ||
+ | color: #c78c45; | ||
+ | margin-bottom: 26px; | ||
} | } | ||
- | + | /* ---------------------------------------------------------- | |
- | + | * CUSTOM BUTTONS | |
+ | * --------------------------------------------------------- */ | ||
- | / | + | a.custom-button { |
- | . | + | display: inline-block; |
- | + | height: 34px; | |
- | + | font: bold 13px/34px Arial; | |
- | + | color: #fff; | |
- | + | background: #fff url("https://static.igem.org/mediawiki/2013/1/15/Button-bkg.jpg") repeat-x center top; | |
- | + | padding: 0 16px; | |
+ | border: 1px solid #aa9973; | ||
+ | text-shadow: 0 1px 0 #948564; | ||
+ | margin: 0 0 30px 0; | ||
+ | box-shadow: inset 0 0 1px 0 #fee7b4; | ||
+ | text-align: center; | ||
} | } | ||
- | + | a.custom-button:hover { | |
- | . | + | text-decoration: none; |
- | + | background: #fff url("https://static.igem.org/mediawiki/2013/9/92/Button-bkg-over.jpg") repeat-x center top; | |
- | + | box-shadow: inset 0 -10px 20px #b5a789; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | . | + | a.more-button { |
- | + | display: inline-block; | |
- | + | height: 23px; | |
- | + | background: #c3b598 url("https://static.igem.org/mediawiki/2013/b/bf/More-button-arrow.gif") no-repeat right center; | |
- | + | padding: 0 26px 0 10px; | |
- | + | color: #fff; | |
- | + | font: italic 13px/22px Arial; | |
- | + | margin: 0 0 30px 0; | |
} | } | ||
- | + | a.more-button:hover { | |
- | . | + | background: #6c675c url("https://static.igem.org/mediawiki/2013/c/c9/More-button-arrow-over.gif") no-repeat right center; |
- | + | text-decoration: none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | - | + | |
- | + | ||
} | } | ||
- | |||
- | |||
- | /* | + | /* ---------------------------------------------------------- |
- | + | * CALL TO ACTION BOX | |
- | + | * --------------------------------------------------------- */ | |
- | + | ||
- | + | ||
- | . | + | .cta-box { |
- | + | height: 59px; | |
- | + | line-height: 79px; | |
- | + | background: transparent url("https://static.igem.org/mediawiki/2013/4/42/Header-bar-bkg.png") repeat-x center top; | |
- | + | overflow: hidden; | |
- | + | padding: 20px 14px 0 14px; | |
- | + | margin: 0 0 44px 0; | |
- | + | } | |
- | + | .cta-box p { | |
- | + | color: #37342d; | |
- | + | font: italic 25px/34px "Times New Roman"; | |
- | + | margin: 0; | |
- | + | padding: 0; | |
- | + | } | |
+ | .cta-box a.custom-button { | ||
+ | position: relative; | ||
+ | top: -4px; | ||
+ | float: right; | ||
+ | font-size: 16px; | ||
+ | line-height: 46px; | ||
+ | width: 150px; | ||
+ | height: 46px; | ||
+ | margin: 0; | ||
} | } | ||
- | + | /* ---------------------------------------------------------- | |
+ | * NIVO SLIDER | ||
+ | * --------------------------------------------------------- */ | ||
- | . | + | .px-slider-wrapper { |
- | + | position: relative; | |
- | + | padding-bottom: 50px; | |
- | + | margin-bottom: 44px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .px-slider.nivoSlider img, .px-slider.nivoSliderThumbs img { display: none; } | |
- | . | + | .px-slider .nivo-controlNav img { display: block; } |
- | + | .px-slider-wrapper.nodescr { padding: 0; margin-bottom: 30px; } | |
- | + | .px-slider.nivoSlider, .px-slider.nivoSliderThumbs { | |
+ | width: 960px; | ||
+ | height: 340px; | ||
+ | position: relative; | ||
+ | background: transparent url("https://static.igem.org/mediawiki/2013/archive/4/42/20130923094421%21Loading.gif") no-repeat 50% 50%; | ||
} | } | ||
+ | .mainareaSlider { width: 730px !important; background: transparent url("https://static.igem.org/mediawiki/2013/archive/4/42/20130923094421%21Loading.gif") no-repeat 50% 50%; } | ||
+ | .px-slider.nivoSlider .nivo-controlNav { | ||
+ | position: absolute; | ||
+ | bottom: 0px; | ||
+ | right: 0px; | ||
+ | background: #000; | ||
+ | background: rgba(0, 0, 0, 0.5); | ||
+ | overflow: hidden; | ||
+ | padding: 8px 12px; | ||
+ | width: auto; | ||
+ | z-index: 10; | ||
+ | } | ||
+ | .px-slider.nivoSlider .nivo-controlNav a { | ||
+ | display: block; | ||
+ | float: left; | ||
+ | margin-left: 8px; | ||
+ | width: 6px; | ||
+ | height: 6px; | ||
+ | border-radius: 6px; | ||
+ | text-indent: -9999px; | ||
+ | background: #f6eee5; | ||
+ | } | ||
+ | .px-slider.nivoSlider .nivo-controlNav a:first-child { margin-left: 0; } | ||
+ | .px-slider.nivoSlider .nivo-controlNav a.active { background: #dcb78d; } | ||
- | . | + | .px-slider.nivoSlider .nivo-caption { |
- | + | position: absolute; | |
- | . | + | bottom: -46px; |
- | + | height: 40px; | |
- | + | line-height: 40px; | |
- | + | background: transparent url("https://static.igem.org/mediawiki/2013/8/87/Nivo-caption-bkg.png") repeat top left; | |
- | + | } | |
- | + | .px-slider.nivoSlider .nivo-caption p { | |
- | + | line-height: 40px; | |
- | + | padding: 0 10px; | |
- | + | font-size: 13px; | |
- | + | color: #242320; | |
- | + | } | |
+ | .px-slider.nivoSlider .nivo-caption p span.caption-title { | ||
+ | color: #242320; | ||
+ | padding: 0 20px 0 10px; | ||
+ | font: bold 13px Arial; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | .px-slider.nivoSlider .nivo-directionNav { | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | top: 50%; | ||
+ | margin-top: -20px; | ||
+ | right: 10px; | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | height: 40px; | ||
+ | } | ||
+ | .px-slider.nivoSlider .nivo-directionNav a { | ||
+ | display: block; | ||
+ | top: 0; | ||
+ | width: 69px; | ||
+ | height: 40px; | ||
+ | text-indent: -9999px; | ||
+ | } | ||
+ | .px-slider.nivoSlider .nivo-directionNav a.nivo-prevNav { | ||
+ | background: transparent url("https://static.igem.org/mediawiki/2013/d/dc/Nivo-nav-left.png") no-repeat left top; | ||
+ | left: -24px; | ||
+ | } | ||
+ | .px-slider.nivoSlider .nivo-directionNav a.nivo-nextNav { | ||
+ | background: transparent url("https://static.igem.org/mediawiki/2013/8/80/Nivo-nav-right.png") no-repeat left top; | ||
+ | right: -24px; | ||
} | } | ||
- | + | /* THUMBNAILS */ | |
- | + | ||
- | . | + | .px-slider.nivoSliderThumbs .nivo-controlNav { |
- | + | left: 0; | |
- | + | bottom: -62px; | |
- | + | background: none; | |
- | + | background: #000; | |
+ | background: #000 url("https://static.igem.org/mediawiki/2013/6/63/Slider-thumbs-bkg.png") repeat-x top left; | ||
+ | height: 60px; | ||
+ | margin: 0; | ||
+ | padding: 1px; | ||
+ | overflow: hidden; | ||
} | } | ||
+ | .px-slider.nivoSliderThumbs .nivo-controlNav a { | ||
+ | width: 80px; | ||
+ | height: 60px; | ||
+ | margin: 0 0 0 1px; | ||
+ | background: transparent; | ||
+ | border-radius: 0; | ||
+ | } | ||
+ | .px-slider.nivoSliderThumbs .nivo-controlNav a:first-child { margin-left: 0; } | ||
+ | .px-slider-wrapper.thumbs { margin-bottom: 90px; } | ||
+ | .px-slider.nivoSliderThumbs .nivo-controlNav a.active { background: transparent; } | ||
+ | .px-slider.nivoSliderThumbs .nivo-caption { bottom: -106px; } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | /* | + | /* ---------------------------------------------------------- |
- | + | * ROUNDABOUT SLIDER | |
- | + | * --------------------------------------------------------- */ | |
- | + | .px-slider.circles ul { | |
- | + | position: relative; | |
- | + | top: 0; | |
- | + | display: block; | |
- | + | list-style-type: none; | |
- | + | list-style-position: outside; | |
- | + | margin: 0 auto; | |
- | + | padding: 0; | |
+ | width: 100%; | ||
+ | width: 760px; | ||
+ | z-index: 0; | ||
} | } | ||
- | + | body.js-enabled .px-slider.circles ul { | |
- | + | margin: 0 auto 80px auto; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | .px-slider.circles ul li { | ||
+ | display: inline-block; | ||
+ | float: left; | ||
+ | width: 400px; | ||
+ | margin: 0 20px 20px 0; | ||
+ | } | ||
+ | .circles .roundabout-holder { | ||
+ | list-style: none; | ||
+ | padding: 0; | ||
+ | margin: 0 auto; | ||
+ | height: 370px; | ||
+ | width: 760px; | ||
+ | } | ||
+ | .circles .roundabout-moveable-item { | ||
+ | height: 360px; | ||
+ | width: 400px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .circles .roundabout-moveable-item img { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | padding: 0; | ||
+ | border: 0; | ||
+ | margin: 0; | ||
+ | background: none; | ||
+ | border-radius: 6px; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .circles .roundabout-moveable-item a { | ||
+ | position: relative; | ||
+ | border-radius: 6px; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | overflow: hidden; | ||
+ | display: block; | ||
+ | background: #eee; | ||
+ | border: 1px solid #fff; | ||
+ | } | ||
+ | .circles .roundabout-moveable-item.roundabout-in-focus a { border: 1px solid #fff; } | ||
+ | .circles .roundabout-moveable-item span { | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | padding: 14px 0; | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | font: bold 0.9em/24px Arial; | ||
+ | text-transform: uppercase; | ||
+ | color: #e5c8a6; | ||
+ | } | ||
+ | .circles .roundabout-moveable-item.roundabout-in-focus span { color: #ab7b40; } | ||
+ | .circles .roundabout-in-focus { cursor: auto; } | ||
- | + | /* ---------------------------------------------------------- | |
+ | * BLOG | ||
+ | * ----------------------------------------------------------*/ | ||
- | # | + | .large-post { |
- | + | overflow: hidden; | |
- | + | margin: 0 0 10px 0; | |
- | + | padding: 0; | |
- | - | + | } |
- | - | + | .large-post .meta-column { |
- | - | + | width: 35%; |
- | + | float: left; | |
- | + | margin-right: 4%; | |
+ | } | ||
+ | .large-post .content-column { | ||
+ | width: 59%; | ||
+ | float: left; | ||
+ | } | ||
+ | .large-post .meta-column h2.nocufon { | ||
+ | margin: 0 0 8px 0; | ||
+ | padding: 0 0 14px 0; | ||
+ | background: url("https://static.igem.org/mediawiki/2013/e/e6/Separator-bkg.png") repeat-x bottom left transparent; | ||
+ | } | ||
+ | .large-post .meta-column h2.nocufon a { color: #c78c45; } | ||
+ | .large-post .meta-column h2.nocufon a:hover { color: #b0752e; text-decoration: none; } | ||
+ | .large-post .meta-column div.meta-data, ul.post-list li .meta-data { | ||
+ | color: #37342d; | ||
+ | font-size: 11px; | ||
+ | height: 19px; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .large-post .meta-column div.meta-data a, ul.post-list li .meta-data a { | ||
+ | color: #37342d; | ||
+ | font-weight: bold; | ||
+ | font-size: 11px; | ||
+ | } | ||
+ | .large-post .meta-column div.meta-data .author, ul.post-list li .meta-data .author { | ||
+ | height: 19px; | ||
+ | padding: 0 14px 0 0; | ||
+ | background: url("https://static.igem.org/mediawiki/2013/1/19/Post-meta-sep.jpg") no-repeat right top transparent; | ||
+ | } | ||
+ | .large-post .meta-column div.meta-data .comments, ul.post-list li .meta-data .comments { | ||
+ | padding: 0 10px; | ||
+ | height: 19px; | ||
+ | } | ||
+ | ul.post-list { | ||
+ | margin: 0 0 20px 0; | ||
+ | padding: 0; | ||
+ | list-style-type: none; | ||
+ | list-style-position: outside; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | ul.post-list li { padding: 0; margin: 0; float: left; width: 48%; margin-right: 4%; overflow: hidden; } | ||
+ | ul.post-list li .post-title { | ||
+ | background: transparent url("https://static.igem.org/mediawiki/2013/8/87/Nivo-caption-bkg.png") repeat left top; | ||
+ | margin: 0; | ||
+ | padding: 10px; | ||
+ | text-align: center; | ||
+ | clear: both; | ||
+ | font: bold 13px/18px Arial; | ||
+ | text-transform: uppercase; | ||
} | } | ||
+ | ul.post-list li .post-title a { color: #37342d; } | ||
+ | ul.post-list li .meta-data { text-align: center; padding: 14px 0; margin: 0 0 16px 0; background: url("https://static.igem.org/mediawiki/2013/e/e6/Separator-bkg.png") repeat-x bottom left transparent; } | ||
+ | ul.post-list li.separator { width: 100%; clear: both; margin: 0 0 30px 0; } | ||
- | + | .post-navigator { | |
- | + | margin: 0 0 30px 0; | |
- | + | padding: 30px 0 0 0; | |
- | + | overflow: hidden; | |
+ | background: url("https://static.igem.org/mediawiki/2013/e/e6/Separator-bkg.png") repeat-x top left transparent; | ||
} | } | ||
+ | .post-navigator a { | ||
+ | min-height: 20px; | ||
+ | font: italic 17px/25px Georgia; | ||
+ | vertical-align: top; | ||
+ | color: #37342d; | ||
+ | display: block; | ||
+ | padding: 0; | ||
+ | width: 250px; | ||
+ | } | ||
+ | .post-navigator a:hover { color: #c78c45; text-decoration: none; } | ||
+ | .post-navigator a.prev { float: left; background: url("https://static.igem.org/mediawiki/2013/0/03/Prev-posts.png") no-repeat left center; padding-left: 20px; text-align: left; } | ||
+ | .post-navigator a.next { float: right; background: url("https://static.igem.org/mediawiki/2013/c/c1/Next-posts.png") no-repeat right center; padding-right: 20px; text-align: right; } | ||
+ | .post-navigator a.prev:hover { float: left; background: url("https://static.igem.org/mediawiki/2013/2/2e/Prev-posts-over.png") no-repeat left center; } | ||
+ | .post-navigator a.next:hover { float: right; background: url("https://static.igem.org/mediawiki/2013/3/30/Next-posts-over.png") no-repeat right center; } | ||
- | + | /* ---------------------------------------------------------- | |
- | + | * COMMENTS | |
+ | * ----------------------------------------------------------*/ | ||
- | . | + | ul.commentlist { |
- | + | margin: 0 0 20px 0; | |
- | . | + | padding: 0; |
- | + | overflow: hidden; | |
- | + | list-style-type: none; | |
- | + | list-style-position: outside; | |
- | + | } | |
- | + | ul.commentlist li .comment-content, ul.commentlist li ul.children .comment-content { | |
- | + | background: url("https://static.igem.org/mediawiki/2013/e/e6/Separator-bkg.png") repeat-x top left; | |
- | + | padding-top: 30px; | |
+ | margin: 0; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | ul.commentlist li:first-child > .comment-content { | ||
+ | border-top: 0; | ||
+ | background: none; | ||
+ | padding-top: 0; | ||
+ | } | ||
+ | ul.commentlist li ul.children { | ||
+ | padding-left: 20px; | ||
+ | list-style-type: none; | ||
+ | list-style-position: outside; | ||
+ | margin: 0; | ||
+ | } | ||
+ | ul.commentlist li img { | ||
+ | padding: 3px; | ||
+ | background: #fff; | ||
+ | float: left; | ||
+ | } | ||
+ | ul.commentlist li .comment-body { | ||
+ | overflow: hidden; | ||
+ | margin-left: 90px; | ||
+ | } | ||
+ | ul.commentlist li .comment-body .meta-data .author { | ||
+ | font: bold 13px/20px Arial; | ||
+ | color: #000; | ||
+ | margin-right: 4px; | ||
+ | padding-right: 8px; | ||
+ | background: url("https://static.igem.org/mediawiki/2013/a/a5/Dot-bkg.gif") no-repeat right center transparent; | ||
+ | } | ||
+ | ul.commentlist li .comment-body .meta-data, ul.commentlist li .comment-body .meta-data a { | ||
+ | color: #000; | ||
+ | font: normal 13px/20px Arial; | ||
+ | margin-bottom: 14px; | ||
+ | } | ||
+ | ul.commentlist li .comment-body .meta-data a.comment-reply-link { | ||
+ | color: #b76552; | ||
+ | margin-left: 20px; | ||
} | } | ||
- | + | /* ---------------------------------------------------------- | |
- | + | * RECENT WORK BOX | |
+ | * --------------------------------------------------------- */ | ||
- | + | .recent-work .custom-headline { | |
- | + | margin-bottom: 10px; | |
- | + | } | |
- | /*** | + | /* ---------------------------------------------------------- |
+ | * PORTFOLIO | ||
+ | * ----------------------------------------------------------*/ | ||
- | . | + | .portfolio-navbar { |
- | + | overflow: hidden; | |
+ | margin: 0 0 36px 0; | ||
+ | padding: 0; | ||
} | } | ||
- | + | .portfolio-navbar ul { | |
- | . | + | margin: 0; |
- | + | padding: 0; | |
- | + | list-style-type: none; | |
+ | list-style-position: outside; | ||
+ | overflow: hidden; | ||
} | } | ||
- | + | .portfolio-navbar ul li { | |
- | + | display: inline-block; | |
- | + | float: left; | |
- | + | color: #d1cab8; | |
- | + | font-weight: bold; | |
- | + | margin: 0 6px 0 0; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .portfolio-navbar ul li a { | |
- | . | + | display: block; |
- | + | float: left; | |
- | + | color: #37342d; | |
- | + | padding: 0 6px 0 0; | |
- | + | font-weight: normal; | |
- | + | font-size: 13px; | |
} | } | ||
- | + | /* ---------------------------------------------------------- | |
- | + | * PORTFOLIO COLUMNS | |
- | + | * ----------------------------------------------------------*/ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ul.portfolio { | |
- | + | margin: 0 0 10px 0; | |
- | . | + | padding: 0; |
- | + | list-style-type: none; | |
- | + | list-style-position: outside; | |
- | + | overflow: hidden; | |
- | + | width: 100%; | |
- | + | position: relative; | |
- | + | display: block; | |
- | + | ||
} | } | ||
+ | ul.portfolio li { | ||
+ | margin: 0 0 30px 0; | ||
+ | padding: 0; | ||
+ | float: left; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | } | ||
+ | ul.portfolio li a.image-holder { display: block; background: #fff; } | ||
+ | ul.portfolio.third li { width: 31%; margin-right: 3.5%; } | ||
+ | ul.portfolio.half li { width: 48%; margin-right: 4%; } | ||
+ | ul.portfolio.third li a.image-holder { margin-bottom: 10px; height: 200px; z-index: 10; } | ||
+ | ul.portfolio.third.notfull li a.image-holder { width: 230px; } | ||
+ | ul.portfolio.half li a.image-holder { margin-bottom: 10px; height: 250px; z-index: 10; } | ||
+ | ul.portfolio.half.notfull li a.image-holder { width: 355px; } | ||
- | + | ul.portfolio li.separator { | |
- | . | + | clear: left; |
- | + | height: 1px; | |
- | + | background: transparent url("https://static.igem.org/mediawiki/2013/e/e6/Separator-bkg.png") repeat-x bottom left; | |
- | + | width: 100%; | |
- | + | margin: 0 0 30px 0; | |
- | + | padding: 0; | |
} | } | ||
- | + | ul.portfolio li .meta-data { | |
- | / | + | background: transparent url("https://static.igem.org/mediawiki/2013/8/87/Nivo-caption-bkg.png") repeat left top; |
- | / | + | margin: 0; |
- | + | padding: 10px; | |
- | . | + | text-align: center; |
- | + | clear: both; | |
- | + | font: bold 13px/18px Arial; | |
- | + | text-transform: uppercase; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | ul.portfolio li .meta-data a { color: #37342d; } | ||
+ | ul.portfolio li .description { | ||
+ | background: rgb(235, 225, 204); | ||
+ | background: none repeat 0 0 rgba(235, 225, 204, 0.95); | ||
+ | padding: 20px; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | display: block; | ||
+ | opacity: 0; | ||
+ | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; | ||
+ | z-index: 30; | ||
+ | } | ||
+ | ul.portfolio li .description span { display: block; padding-bottom: 20px; font: normal 13px/20px Georgia; color: #555; } | ||
+ | ul.portfolio li .description em { font: italic 11px/16px Georgia; color: #917e4d; } | ||
+ | ul.portfolio.third li .description { height: 200px; } | ||
+ | ul.portfolio.half li .description { height: 250px; } | ||
- | |||
- | |||
- | /* | + | /* ---------------------------------------------------------- |
- | + | * WIDGETS | |
- | + | * ----------------------------------------------------------*/ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | .widget { margin: 0 0 40px 0; overflow: visible !important; } | |
- | + | #content .widget .px-widget-title h3, #content .widget h3 { | |
- | + | font: bold 13px/18px Arial; | |
- | + | color: #c78c45; | |
- | + | text-transform: uppercase; | |
- | + | margin-bottom: 18px; | |
- | + | background: none; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #content .widget ul { | |
- | . | + | margin: 0; |
- | + | padding: 0; | |
- | + | list-style-type: none; | |
- | + | list-style-position: outside; | |
- | + | position: relative; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | ul | + | #content .widget ul li { |
- | + | position: relative; | |
- | + | background: transparent url("https://static.igem.org/mediawiki/2013/e/e6/Separator-bkg.png") repeat-x left bottom; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #content .widget ul li a { | |
- | + | position: relative; | |
- | + | font: 12px/18px Arial; | |
- | + | color: #625d52; | |
- | + | display: block; | |
- | + | padding: 7px 8px 8px 12px; | |
+ | width: 170px; | ||
} | } | ||
- | + | #content .widget ul li a:hover { | |
- | + | overflow: visible !important; | |
- | + | color: #fff; | |
- | + | font-weight: bold; | |
+ | text-decoration: none; | ||
+ | background: transparent url("https://static.igem.org/mediawiki/2013/9/99/Sidebar-link-over-right.jpg") no-repeat left top scroll; | ||
} | } | ||
+ | #content .sidebar-right.margin { margin-right: 30px } | ||
+ | #content .sidebar-right .widget ul li a:hover { background: transparent url("https://static.igem.org/mediawiki/2013/3/33/Sidebar-link-over-left.jpg") no-repeat left top scroll; padding-left: 26px; } | ||
+ | #content .sidebar-right .px-widget-title { padding-left: 4px; } | ||
+ | #content .widget.nohover ul li a:hover { | ||
+ | background: none; | ||
+ | color: #c78c45; | ||
+ | font-weight: normal; | ||
+ | } | ||
+ | #content .sidebar-right .widget.nohover ul li a:hover { padding-left: 12px; } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | /* | + | /* ---------------------------------------------------------- |
- | + | * 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; | |
- | . | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
/*================================================= */ | /*================================================= */ | ||
/* Back To Top | /* Back To Top | ||
Line 992: | Line 1,197: | ||
width:45px; | width:45px; | ||
height:45px; | height:45px; | ||
- | background: url(../ | + | background: url("https://static.igem.org/mediawiki/2013/a/a1/Back_to_top.png") no-repeat 50% 50%; |
background-color:#c0c0c0; | background-color:#c0c0c0; | ||
-webkit-transition: all 0.1s ease-in-out; | -webkit-transition: all 0.1s ease-in-out; | ||
Line 1,002: | Line 1,207: | ||
#backtotop a:hover {background-color: #81b600;} | #backtotop a:hover {background-color: #81b600;} | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- |
Latest revision as of 17:13, 27 September 2013
/* ------------------------------------------------------------------------------------ */ /* -------------------------------- 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("") 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("") 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("") 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("") 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("") repeat-x left top; margin-bottom: 40px; } blockquote { clear: both; } blockquote p { background: transparent url("") 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("") repeat-x top left transparent; } .preload { position: relative; overflow: hidden; } .preloading { background: #fcfbf9 url("") 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 * ----------------------------------------------------------*/margin: 0; padding: 0; font: 13px/21px Arial; color: #37342d; } /* ---------------------------------------------------------- * HEADER DEFINITION * ----------------------------------------------------------*/
- root {
margin: 50px 0 50px 0; clear: both; height: 79px; background: transparent url("") repeat-x left top; position: relative; }
- header { position: relative; width: 960px; margin: 0 auto; }
- header .header-bar {
height: 128px; background: transparent url("") repeat-x left top; padding: 0; margin: 0; display: block; width: auto; position: relative; vertical-align: top; top: -24px; left: 30px; float: left; }
- header #logo {
position: relative; margin: 0; margin-top: 24px; left: -5px; right: -5px; top: 0; color: #fff; background: transparent url("") repeat-x left top; height: 54px; padding: 26px 5px 0 5px; width: 100%; display: block; font-size: 35px; } body.js-enabled #header #logo h1 {}
- header #logo h1 {
font-size: 35px; color: #fff; display: block; padding: 0 20px; text-align: center; }
- header #logo h1 a {
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("") 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 * --------------------------------------------------------- */
- header #logo h1 a:hover {
display: none; position: absolute; left: 0; top: 60px; min-width: 460px; border-radius: 0; }
- menu .pixel-mega-menu {
width: 100%; padding: 30px 20px 20px 20px; margin: 0; display: block; top: auto; left: auto; background: #fff; border-radius: 3px; border: 0; }
- menu .pixel-mega-menu ul.sub-menu {
padding: 0; background: none; position: relative; left: auto; top: auto; color: #555; overflow: hidden; box-shadow: 0 0 0 transparent; }
- menu .pixel-mega-menu > ul.sub-menu { border: 1px solid #f6e5cc; }
- menu .pixel-mega-menu > ul.sub-menu li ul.sub-menu {
margin: 0; color: #777; height: 24px; line-height: 23px; width: 90%; margin-left: 0px; }
- menu .pixel-mega-menu > ul.sub-menu ul li {
display: block; border: 0; padding: 0; margin: 0; height: auto; height: 30px; line-height: 30px; text-indent: 0; color: #888172; text-decoration: underline; }
- menu .pixel-mega-menu > ul.sub-menu > li a {
ul#menu li:hover > .pixel-mega-menu { display: block; }
- menu .pixel-mega-menu ul.sub-menu a:hover { background: none; color: #37342d; text-decoration: none; }
clear: none; float: left; display: block; margin: 0; padding: 0; margin-bottom: 30px; width: 48%; margin-right: 2%; }
- menu .pixel-mega-menu > ul.sub-menu > li {
width: 50%; margin-right: 0; }
- menu .pixel-mega-menu > ul.sub-menu > li:last-child, #menu .pixel-mega-menu > ul.sub-menu > li.last {
font: 14px/18px Arial; color: #948d7c; border-bottom: 1px solid #f6e5cc; margin-bottom: 14px; padding: 0px 10px 4px 0; background: none; }
- menu .pixel-mega-menu > ul.sub-menu li h4 {
padding-bottom: 10px; color: #999; color: #888172; font: italic 12px/20px Arial; }
- menu .pixel-mega-menu > ul.sub-menu > li p {
/* ---------------------------------------------------------- * SUBHEADER * --------------------------------------------------------- */
- menu .pixel-mega-menu.two-columns { width: 460px; }
- menu .pixel-mega-menu.three-columns { width: 660px; }
- menu .pixel-mega-menu.four-columns { width: 920px; }
- menu .pixel-mega-menu.two-columns > ul.sub-menu > li { width: 48%; margin-right: 2%; }
- menu .pixel-mega-menu.three-columns > ul.sub-menu > li { width: 31%; margin-right: 2%; }
- menu .pixel-mega-menu.four-columns > ul.sub-menu > li { width: 23%; margin-right: 2%; }
- menu .pixel-mega-menu.two-columns > ul.sub-menu > li.last { width: 50%; margin-right: 0; }
- menu .pixel-mega-menu.three-columns > ul.sub-menu > li.last { width: 33%; margin-right: 0; }
- menu .pixel-mega-menu.four-columns > ul.sub-menu > li.last { width: 25%; margin-right: 0; }
- menu .pixel-mega-menu > ul.sub-menu > li.newline { clear: both; width: 100%; padding: 0; margin: 0; }
- menu .pixel-mega-menu > ul.sub-menu > li.half-column { width: 48%; margin-right: 2%; }
- menu .pixel-mega-menu > ul.sub-menu > li.third-column { width: 31%; margin-right: 2%; }
- menu .pixel-mega-menu > ul.sub-menu > li.two-thirds-column { width: 65%; margin-right: 2%; }
- menu .pixel-mega-menu > ul.sub-menu > li.half-column.last { width: 50%; margin-right: 0; }
- menu .pixel-mega-menu > ul.sub-menu > li.third-column.last { width: 33%; margin-right: 0; }
- menu .pixel-mega-menu > ul.sub-menu > li.two-thirds-column.last { width: 67%; margin-right: 0; }
- menu .pixel-mega-menu > ul.sub-menu > li.fourth-column { width: 23%; margin-right: 2%; }
- menu .pixel-mega-menu > ul.sub-menu > li.fourth-column.last { width: 25%; margin-right: 0; }
- menu .pixel-mega-menu > ul.sub-menu > li.full-column { width: 100%; margin-right: 0; }
- menu .pixel-mega-menu > ul.sub-menu > li.last { margin-right: 0; }
/* ---------------------------------------------------------- * 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%; }
- subheader-bar { margin-bottom: 30px; background: transparent url("") repeat-x bottom left; padding-bottom: 20px; overflow: hidden; }
- subheader-bar div.site-description { color: #37342d; font: italic 13px/18px Arial; margin-top: 8px; display: inline-block; float: left; }
- subheader-bar div.site-description h4 { margin: 0; padding: 0; font-style: normal; }
/* ---------------------------------------------------------- * CONTENT * --------------------------------------------------------- */
- root .clearer { clear: both; }
- root .last { margin-right: 0; }
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("") 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("") 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; } /* ---------------------------------------------------------- * CUSTOM HEADLINES * ----------------------------------------------------------*/ .custom-headline { font: 15px/18px Arial; text-transform: uppercase; color: #c78c45; margin-bottom: 26px; } /* ---------------------------------------------------------- * CUSTOM BUTTONS * --------------------------------------------------------- */ a.custom-button { display: inline-block; height: 34px; font: bold 13px/34px Arial; color: #fff; background: #fff url("") repeat-x center top; padding: 0 16px; border: 1px solid #aa9973; text-shadow: 0 1px 0 #948564; margin: 0 0 30px 0; box-shadow: inset 0 0 1px 0 #fee7b4; text-align: center; } a.custom-button:hover { text-decoration: none; background: #fff url("") repeat-x center top; box-shadow: inset 0 -10px 20px #b5a789; } a.more-button { display: inline-block; height: 23px; background: #c3b598 url("") no-repeat right center; padding: 0 26px 0 10px; color: #fff; font: italic 13px/22px Arial; margin: 0 0 30px 0; } a.more-button:hover { background: #6c675c url("") no-repeat right center; text-decoration: none; } /* ---------------------------------------------------------- * CALL TO ACTION BOX * --------------------------------------------------------- */ .cta-box { height: 59px; line-height: 79px; background: transparent url("") repeat-x center top; overflow: hidden; padding: 20px 14px 0 14px; margin: 0 0 44px 0; } .cta-box p { color: #37342d; font: italic 25px/34px "Times New Roman"; margin: 0; padding: 0; } .cta-box a.custom-button { position: relative; top: -4px; float: right; font-size: 16px; line-height: 46px; width: 150px; height: 46px; margin: 0; } /* ---------------------------------------------------------- * NIVO SLIDER * --------------------------------------------------------- */ .px-slider-wrapper { position: relative; padding-bottom: 50px; margin-bottom: 44px; } .px-slider.nivoSlider img, .px-slider.nivoSliderThumbs img { display: none; } .px-slider .nivo-controlNav img { display: block; } .px-slider-wrapper.nodescr { padding: 0; margin-bottom: 30px; } .px-slider.nivoSlider, .px-slider.nivoSliderThumbs { width: 960px; height: 340px; position: relative; background: transparent url("") no-repeat 50% 50%; } .mainareaSlider { width: 730px !important; background: transparent url("") no-repeat 50% 50%; } .px-slider.nivoSlider .nivo-controlNav { position: absolute; bottom: 0px; right: 0px; background: #000; background: rgba(0, 0, 0, 0.5); overflow: hidden; padding: 8px 12px; width: auto; z-index: 10; } .px-slider.nivoSlider .nivo-controlNav a { display: block; float: left; margin-left: 8px; width: 6px; height: 6px; border-radius: 6px; text-indent: -9999px; background: #f6eee5; } .px-slider.nivoSlider .nivo-controlNav a:first-child { margin-left: 0; } .px-slider.nivoSlider .nivo-controlNav a.active { background: #dcb78d; } .px-slider.nivoSlider .nivo-caption { position: absolute; bottom: -46px; height: 40px; line-height: 40px; background: transparent url("") repeat top left; } .px-slider.nivoSlider .nivo-caption p { line-height: 40px; padding: 0 10px; font-size: 13px; color: #242320; } .px-slider.nivoSlider .nivo-caption p span.caption-title { color: #242320; padding: 0 20px 0 10px; font: bold 13px Arial; text-transform: uppercase; } .px-slider.nivoSlider .nivo-directionNav { position: absolute; left: 0; top: 50%; margin-top: -20px; right: 10px; display: block; width: 100%; height: 40px; } .px-slider.nivoSlider .nivo-directionNav a { display: block; top: 0; width: 69px; height: 40px; text-indent: -9999px; } .px-slider.nivoSlider .nivo-directionNav a.nivo-prevNav { background: transparent url("") no-repeat left top; left: -24px; } .px-slider.nivoSlider .nivo-directionNav a.nivo-nextNav { background: transparent url("") no-repeat left top; right: -24px; } /* THUMBNAILS */ .px-slider.nivoSliderThumbs .nivo-controlNav { left: 0; bottom: -62px; background: none; background: #000; background: #000 url("") repeat-x top left; height: 60px; margin: 0; padding: 1px; overflow: hidden; } .px-slider.nivoSliderThumbs .nivo-controlNav a { width: 80px; height: 60px; margin: 0 0 0 1px; background: transparent; border-radius: 0; } .px-slider.nivoSliderThumbs .nivo-controlNav a:first-child { margin-left: 0; } .px-slider-wrapper.thumbs { margin-bottom: 90px; } .px-slider.nivoSliderThumbs .nivo-controlNav a.active { background: transparent; } .px-slider.nivoSliderThumbs .nivo-caption { bottom: -106px; } /* ---------------------------------------------------------- * ROUNDABOUT SLIDER * --------------------------------------------------------- */ .px-slider.circles ul { position: relative; top: 0; display: block; list-style-type: none; list-style-position: outside; margin: 0 auto; padding: 0; width: 100%; width: 760px; z-index: 0; } body.js-enabled .px-slider.circles ul { margin: 0 auto 80px auto; } .px-slider.circles ul li { display: inline-block; float: left; width: 400px; margin: 0 20px 20px 0; } .circles .roundabout-holder { list-style: none; padding: 0; margin: 0 auto; height: 370px; width: 760px; } .circles .roundabout-moveable-item { height: 360px; width: 400px; cursor: pointer; } .circles .roundabout-moveable-item img { width: 100%; height: 100%; padding: 0; border: 0; margin: 0; background: none; border-radius: 6px; overflow: hidden; } .circles .roundabout-moveable-item a { position: relative; border-radius: 6px; width: 100%; height: 100%; overflow: hidden; display: block; background: #eee; border: 1px solid #fff; } .circles .roundabout-moveable-item.roundabout-in-focus a { border: 1px solid #fff; } .circles .roundabout-moveable-item span { position: relative; width: 100%; padding: 14px 0; display: block; text-align: center; font: bold 0.9em/24px Arial; text-transform: uppercase; color: #e5c8a6; } .circles .roundabout-moveable-item.roundabout-in-focus span { color: #ab7b40; } .circles .roundabout-in-focus { cursor: auto; } /* ---------------------------------------------------------- * BLOG * ----------------------------------------------------------*/ .large-post { overflow: hidden; margin: 0 0 10px 0; padding: 0; } .large-post .meta-column { width: 35%; float: left; margin-right: 4%; } .large-post .content-column { width: 59%; float: left; } .large-post .meta-column h2.nocufon { margin: 0 0 8px 0; padding: 0 0 14px 0; background: url("") repeat-x bottom left transparent; } .large-post .meta-column h2.nocufon a { color: #c78c45; } .large-post .meta-column h2.nocufon a:hover { color: #b0752e; text-decoration: none; } .large-post .meta-column div.meta-data, ul.post-list li .meta-data { color: #37342d; font-size: 11px; height: 19px; overflow: hidden; } .large-post .meta-column div.meta-data a, ul.post-list li .meta-data a { color: #37342d; font-weight: bold; font-size: 11px; } .large-post .meta-column div.meta-data .author, ul.post-list li .meta-data .author { height: 19px; padding: 0 14px 0 0; background: url("") no-repeat right top transparent; } .large-post .meta-column div.meta-data .comments, ul.post-list li .meta-data .comments { padding: 0 10px; height: 19px; } ul.post-list { margin: 0 0 20px 0; padding: 0; list-style-type: none; list-style-position: outside; overflow: hidden; } ul.post-list li { padding: 0; margin: 0; float: left; width: 48%; margin-right: 4%; overflow: hidden; } ul.post-list li .post-title { background: transparent url("") repeat left top; margin: 0; padding: 10px; text-align: center; clear: both; font: bold 13px/18px Arial; text-transform: uppercase; } ul.post-list li .post-title a { color: #37342d; } ul.post-list li .meta-data { text-align: center; padding: 14px 0; margin: 0 0 16px 0; background: url("") repeat-x bottom left transparent; } ul.post-list li.separator { width: 100%; clear: both; margin: 0 0 30px 0; } .post-navigator { margin: 0 0 30px 0; padding: 30px 0 0 0; overflow: hidden; background: url("") repeat-x top left transparent; } .post-navigator a { min-height: 20px; font: italic 17px/25px Georgia; vertical-align: top; color: #37342d; display: block; padding: 0; width: 250px; } .post-navigator a:hover { color: #c78c45; text-decoration: none; } .post-navigator a.prev { float: left; background: url("") no-repeat left center; padding-left: 20px; text-align: left; } .post-navigator a.next { float: right; background: url("") no-repeat right center; padding-right: 20px; text-align: right; } .post-navigator a.prev:hover { float: left; background: url("") no-repeat left center; } .post-navigator a.next:hover { float: right; background: url("") no-repeat right center; } /* ---------------------------------------------------------- * COMMENTS * ----------------------------------------------------------*/ ul.commentlist { margin: 0 0 20px 0; padding: 0; overflow: hidden; list-style-type: none; list-style-position: outside; } ul.commentlist li .comment-content, ul.commentlist li ul.children .comment-content { background: url("") repeat-x top left; padding-top: 30px; margin: 0; overflow: hidden; } ul.commentlist li:first-child > .comment-content { border-top: 0; background: none; padding-top: 0; } ul.commentlist li ul.children { padding-left: 20px; list-style-type: none; list-style-position: outside; margin: 0; } ul.commentlist li img { padding: 3px; background: #fff; float: left; } ul.commentlist li .comment-body { overflow: hidden; margin-left: 90px; } ul.commentlist li .comment-body .meta-data .author { font: bold 13px/20px Arial; color: #000; margin-right: 4px; padding-right: 8px; background: url("") no-repeat right center transparent; } ul.commentlist li .comment-body .meta-data, ul.commentlist li .comment-body .meta-data a { color: #000; font: normal 13px/20px Arial; margin-bottom: 14px; } ul.commentlist li .comment-body .meta-data a.comment-reply-link { color: #b76552; margin-left: 20px; } /* ---------------------------------------------------------- * RECENT WORK BOX * --------------------------------------------------------- */ .recent-work .custom-headline { margin-bottom: 10px; } /* ---------------------------------------------------------- * PORTFOLIO * ----------------------------------------------------------*/ .portfolio-navbar { overflow: hidden; margin: 0 0 36px 0; padding: 0; } .portfolio-navbar ul { margin: 0; padding: 0; list-style-type: none; list-style-position: outside; overflow: hidden; } .portfolio-navbar ul li { display: inline-block; float: left; color: #d1cab8; font-weight: bold; margin: 0 6px 0 0; } .portfolio-navbar ul li a { display: block; float: left; color: #37342d; padding: 0 6px 0 0; font-weight: normal; font-size: 13px; } /* ---------------------------------------------------------- * PORTFOLIO COLUMNS * ----------------------------------------------------------*/ ul.portfolio { margin: 0 0 10px 0; padding: 0; list-style-type: none; list-style-position: outside; overflow: hidden; width: 100%; position: relative; display: block; } ul.portfolio li { margin: 0 0 30px 0; padding: 0; float: left; overflow: hidden; position: relative; } ul.portfolio li a.image-holder { display: block; background: #fff; } ul.portfolio.third li { width: 31%; margin-right: 3.5%; } ul.portfolio.half li { width: 48%; margin-right: 4%; } ul.portfolio.third li a.image-holder { margin-bottom: 10px; height: 200px; z-index: 10; } ul.portfolio.third.notfull li a.image-holder { width: 230px; } ul.portfolio.half li a.image-holder { margin-bottom: 10px; height: 250px; z-index: 10; } ul.portfolio.half.notfull li a.image-holder { width: 355px; } ul.portfolio li.separator { clear: left; height: 1px; background: transparent url("") repeat-x bottom left; width: 100%; margin: 0 0 30px 0; padding: 0; } ul.portfolio li .meta-data { background: transparent url("") repeat left top; margin: 0; padding: 10px; text-align: center; clear: both; font: bold 13px/18px Arial; text-transform: uppercase; } ul.portfolio li .meta-data a { color: #37342d; } ul.portfolio li .description { background: rgb(235, 225, 204); background: none repeat 0 0 rgba(235, 225, 204, 0.95); padding: 20px; position: absolute; top: 0; left: 0; display: block; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; z-index: 30; } ul.portfolio li .description span { display: block; padding-bottom: 20px; font: normal 13px/20px Georgia; color: #555; } ul.portfolio li .description em { font: italic 11px/16px Georgia; color: #917e4d; } ul.portfolio.third li .description { height: 200px; } ul.portfolio.half li .description { height: 250px; } /* ---------------------------------------------------------- * WIDGETS * ----------------------------------------------------------*/ .widget { margin: 0 0 40px 0; overflow: visible !important; }
- content {
font: bold 13px/18px Arial; color: #c78c45; text-transform: uppercase; margin-bottom: 18px; background: none; }
- content .widget .px-widget-title h3, #content .widget h3 {
margin: 0; padding: 0; list-style-type: none; list-style-position: outside; position: relative; }
- content .widget ul {
position: relative; background: transparent url("") repeat-x left bottom; }
- content .widget ul li {
position: relative; font: 12px/18px Arial; color: #625d52; display: block; padding: 7px 8px 8px 12px; width: 170px; }
- content .widget ul li a {
overflow: visible !important; color: #fff; font-weight: bold; text-decoration: none; background: transparent url("") no-repeat left top scroll; }
- content .widget ul li a:hover {
background: none; color: #c78c45; font-weight: normal; }
- content .sidebar-right.margin { margin-right: 30px }
- content .sidebar-right .widget ul li a:hover { background: transparent url("") no-repeat left top scroll; padding-left: 26px; }
- content .sidebar-right .px-widget-title { padding-left: 4px; }
- content .widget.nohover ul li a:hover {
/* ---------------------------------------------------------- * 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; } /*================================================= */ /* Back To Top ================================================== */
- content .sidebar-right .widget.nohover ul li a:hover { padding-left: 12px; }
position: fixed; right:0px; display:none; bottom: 20px; margin: 0 20px 0 0; }
- backtotop {
text-decoration:none; border:0 none; display:block; width:45px; height:45px; background: url("") no-repeat 50% 50%; background-color:#c0c0c0; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }
- backtotop a {
- backtotop a:hover {background-color: #81b600;}