From 2013.igem.org
/* ------------------------------------------------------------------------------------ */
/* -------------------------------- 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
* ----------------------------------------------------------*/
- 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("
") repeat-x left top;
position: relative;
}
- header #logo {
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 h1 {
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 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 {
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
* --------------------------------------------------------- */
- menu .pixel-mega-menu {
display: none;
position: absolute;
left: 0;
top: 60px;
min-width: 460px;
border-radius: 0;
}
- 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;
}
- 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("") 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("
") 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 .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;
}
- content .widget ul li {
position: relative;
background: transparent url("") 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("
") no-repeat left top scroll;
}
- 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 {
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
================================================== */
- backtotop {
position: fixed;
right:0px;
display:none;
bottom: 20px;
margin: 0 20px 0 0;
}
- backtotop a {
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:hover {background-color: #81b600;}
"
