/* Reset Styles
***********************/
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
strong {font-weight: bold;}
em {font-style: italic;}
h2 {padding: 20px 0 30px; font-size: 18px; line-height: 22px; font-style: italic;}
h2 a {text-decoration: none; color: #427f9e;}
h2 a:hover {border-bottom: 1px dotted #427f9e;}
.flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(1,46,55,.5); color: #fff; text-shadow: 2px -1px 2px rgba(0,0,0,.3); font-size: 20px; line-height: 20px; text-align:center;}
/* 1. R E S E T D E F A U L T S
........................................................................................................................................ */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins,
kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead,
tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio,
video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }
:focus { outline: none; }
ol, ul { list-style: none inside none; }
blockquote, q { quotes: none; }
blockquote: before, blockquote: after, q: before, q: after { content: " "; content: none; }
ins { background-color: #eff3f4; text-shadow: none; color: #465458; text-decoration: none; }
mark { background-color: #dbebef; text-shadow: none; color: #465458; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; } /*- tables still need 'cellspacing="0"' in the markup ----------*/
caption, th, td { text-align: left; font-weight: normal; }
input, textarea, button { border: none; }
input, select { vertical-align: middle; }
/* 2. G R I D
........................................................................................................................................ */
.footer, .push {
height: 4em;
clear: both;
}
body { min-width: 1000px; }
.container_12 { width: 1000px; }
/* 3. B A S E S T Y L E S
....................................................................................................................................... */
html, body { height: 100%; }
html { background: url('124.jpg') repeat top left fixed; }
body { background: url('tratto.png') no-repeat top left fixed; }
body:before { content: " "; display: block; position: absolute; z-index: 100; width: 100%; left: 0; top: 0; height: 7px; background: #444652; } /* top border */
#main-wrapper { padding-top: 20px; margin: 0 auto -4em;}
/* self-clearing floats */
.mod:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clear { clear: both; }
/* text highlight/selection */
::-moz-selection{ color: #fff; background: #87c9dd; text-shadow: none; }
::selection { color: #fff; background: #87c9dd; text-shadow: none; }
/*
* Non-semantic helper classes
*/
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; } /* for image replacement */
.hidden { display: none; visibility: hidden; } /* Hide for both screenreaders and browsers: css-discuss.incutio.com/wiki/Screenreader_Visibility */
/* Hide only visually, but have it available for screenreaders: www.webaim.org/techniques/css/invisiblecontent/ */
.visuallyhidden { position:absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); }
.invisible { visibility: hidden; } /* Hide visually and from screenreaders, but maintain layout */
/* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix - only with a different class name to make it more semantic */
.group:before, .group:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
.group:after { clear: both; } /* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.group { zoom: 1; }
/* 4. T Y P O G R A P H Y
........................................................................................................................................ */
body, input, button, textarea { font: 12px/20px "Nobile", Arial, Helvetica, sans-serif; color: #5e534e; }
p, h1, h2, h3, h4, h5, h6, fieldset, pre, #main ul, #main ol, #main dt, #main dd, #main table, #main caption, #main img,
.page-content ul, .page-content ol, .page-content dt, .page-content dd, .page-content table, .page-content caption, .page-content img, .sidebar .widget, #footer .widget, .slider, .post-content ul,
.post-content ol, .post-content dt, .post-content dd, .post-content table, .post-content caption, .post-content img, .one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth,
.three_fifth, .four_fifth, .one_sixth, .five_sixth, .contact-info-shortcode, #social-networking { margin-bottom: 0px; }
.share-this, #main .comment-list li { padding-top: 20px; }
.share-this { padding-bottom: 20px; margin-bottom: 20px; }
.footer-meta img, .footer-meta p { margin-bottom: 0; }
#header, #main-headline, .slider, .section-title, #filter, #related-posts > h2, #single-item, #search-results .page-name { margin-bottom: 0px; }
.project-title { padding-bottom: 0px; margin-bottom: 0px; }
#footer .widget, .sidebar .widget, #search-results .blog-post, .post, .comments_navigation { margin-bottom: 0px; }
#content { margin-bottom: 0px; }
h1 { font-size: 16px; line-height: 20px; }
h2 { font-size: 14px; line-height: 20px; }
h3 { font-size: 13px; line-height: 20px; }
h4 { font-size: 12px; line-height: 20px; }
h5 { font-size: 11px; line-height: 20px; }
h6 { font-size: 10px; line-height: 20px; }
html { -webkit-font-smoothing: antialiased; } /* maxvoltar.com/archive/-webkit-font-smoothing */
table { font-size: inherit; font: 100%; }
p { font-size: 1em; }
blockquote { font-size: 1.1em; font-style: italic; padding-left: 28px; background: url('images/layout/quote-mark.png') no-repeat left top; }
input { font-size: .9em; }
small {
font-size: 85%;
text-align: center;
}
strong, th { font-weight: bold; }
sub { font-size: smaller; }
sup { font-size: smaller; }
pre, code, kbd, samp { font-family: monospace, sans-serif; } /* normalize monospace sizing */
/* local fonts - custom ampersand */
@font-face {
font-family: 'GoudyBookletter1911Regular';
src: url('fonts/goudybookletter1911/goudybookletter1911-openamp.eot');
src: url('fonts/goudybookletter1911/goudybookletter1911-openamp.eot?#iefix') format('eot'),
url('fonts/goudybookletter1911/goudybookletter1911-openamp.woff') format('woff'),
url('fonts/goudybookletter1911/goudybookletter1911-openamp.ttf') format('truetype'),
url('fonts/goudybookletter1911/goudybookletter1911-openamp.svg#webfont0ZQvEa4G') format('svg');
font-weight: normal;
font-style: normal;
}
/* non-semantic typography helper classes */
.caps { letter-spacing: 0.1em; font-variant: small-caps; text-transform: lowercase; }
abbr { letter-spacing: 0.1em; font-variant: small-caps; text-transform: lowercase; } /* letter space abbrevations at 10% of the type size to enhance readability */
.amp { font-size: 1.2em; font-family: 'GoudyBookletter1911Regular', Baskerville, "Goudy Old Style", Palatino, "Book Antiqua", Georgia, serif; font-style: italic; font-weight: normal; }
.with-slider-or-intro, .latest-articles, .footer-widgets, .footer-meta, #related-posts { border-top: 0px dashed #8fdbed; }
#header, .project-title, .widget_archive li, .widget_categories li, .widget_nav_menu li, .widget_links li, .widget_pages li,
.widget_recent_entries li, .widget_recent_comments li, .widget_rss li, .widget_meta li { border-bottom: 0px dashed #8fdbed; }
#main .comment-list li { border-width: 1px 0 0 0; border-style: dashed; border-color: #8fdbed; }
.single-post .share-this { border-width: 1px 0; border-style: dashed; border-color: #8fdbed; }
input:not([type=submit]):not([type=file]), textarea { border: 1px dashed #8fdbed; }
/* 5. H E A D I N G S
....................................................................................................................................... */
h1, h2, h3, h4, h5, h6 { font-family: 'Merriweather', Georgia, "Times New Roman", Times, serif; color: #4f4640; text-transform: uppercase; letter-spacing: 0.1em; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; text-rendering: optimizeLegibility; } /* www.aestheticallyloyal.com/public/optimize-legibility/ */
#main-headline { text-transform: none; color: #444751; letter-spacing: normal; line-height: 40px; font: normal 22px 'Merriweather', Georgia, "Times New Roman", Times, serif; } /* main headline at the top of the landing page */
.section-title a { float: right; }
.project-link + h3 a { display: block; }
#footer .widgettitle { text-transform: uppercase; letter-spacing: 0em; line-height:1em;}
/* 6. L I N K S
....................................................................................................................................... */
a { text-decoration: none; }
a:link { color: #939393; }
a:visited { color: #939393; }
a:hover { color: #87c9dd; }
a:active { color: #87c9dd; position: relative; top: 1px; }
a:hover, a:active { outline: none; } /* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
h1 a, h2 a, h3 a, h4 a, h5 a { font-style: normal; }
.csstransitions a, .csstransitions a img, .csstransitions input[type="submit"], .csstransitions button { -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: color .2s ease-in-out, opacity .2s ease-in-out, border-color .3s ease-in-out; transition: all .2s ease-in-out; }
/* 7. L I S T S
....................................................................................................................................... */
#main ol, .page-content ol { list-style-type: decimal; }
#main ul, .page-content ul { list-style-type: circle; }
#main ol ol, .page-content ol ol, #main ul ul, .page-content ul ul { margin-left: 28px; } /* indent the lists wrapped by other lists */
.portfolio-gallery ul, .portfolio-gallery { list-style: none; }
/* 8. F O R M S
........................................................................................................................................ */
/* colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
input[type="text"], select, textarea { margin: 0; width: 90%; } /* webkit browsers add a 2px margin outside the chrome of form elements */
select, input, textarea, button { font: 99% sans-serif; color: rgb(150, 150, 150); }
input[type="text"], textarea { padding: 7px; }
select { max-width: 250px; padding: 4px 4px 4px 0; background: rgba(255, 255, 255, 0.7); border: 1px solid rgb(230, 230, 230); }
button, input, textarea { font-family: inherit; font-size: 1em; }
label { display: inline-block; margin-bottom: 5px; }
label, input[type=button], input[type=submit], button { cursor: pointer; } /* hand cursor on clickable input elements */
.borderradius input[type="text"], .borderradius textarea, .borderradius .form-status, .borderradius select { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.boxshadow input[type="text"]:focus, .boxshadow textarea:focus { -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); }
/* buttons */
input[type="submit"], button, input[type="button"] { padding: 5px 10px; background: #798089; color: #fff; color: rgba(255, 255, 255, 0.8); }
input[type="submit"]:hover, button:hover, input[type="button"]:hover { background: #5f6875; color: #fff; color: rgba(255, 255, 255, 0.8); }
input[type="submit"] { display: inline; vertical-align: top; }
/* CSS3 submit buttons (with the help of modernizer classes - start */
.borderradius input[type="submit"], .borderradius button, input[type="button"] { -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; }
input[type="submit"]:active, button:active, input[type="button"]:active { position: relative; top: 1px; }
/* CSS3 submit buttons - end */
/* align checkboxes, radios, text inputs with their label
by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
/* style the text inputs only */
input:not([type=submit]):not([type=file]), textarea { padding: 7px; max-width: 450px; display: block; background: #fefefe; background: rgba(255, 255, 255, 0.3); color: #7c7c7c; }
.csstransitions input:not([type=submit]):not([type=file]), .csstransitions textarea { -moz-transition: all .2s ease-in; -webkit-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; }
.borderradius input:not([type=submit]):not([type=file]), .borderradius textarea { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
/* text inputs on focus */
input:not([type=submit]):not([type=file]):focus, textarea:focus { background: rgba(255, 255, 255, 0.5); }
.csstransforms input:not([type=submit]):not([type=file]):focus, .csstransforms textarea:focus { -ms-transform: scale(1.02, 1.02); -webkit-transform: scale(1.02, 1.02); -o-transform: scale(1.02, 1.02); -moz-transform: scale(1.02, 1.02); transform: scale(1.02, 1.02); }
/* 9. I M A G E S
........................................................................................................................................ */
img, a img {
font-style: italic;
text-align: center;
}
.csstransitions img { -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
/* wordpress built-in image-related classes */
img.aligncenter, .wp-caption.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom:0px;
}
img.aligncenter { margin-top: 0px; }
a img.alignright { float: right; margin: 0 0 1em 1em; }
a img.alignleft { float: left; margin: 20px; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
#main { overflow: hidden; }
#main img ~ img, #portfolio-item-meta img ~ img { margin-left: 20px; }
.wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; font-style: italic; margin-bottom: 20px; }
.wp-caption img, .wp-caption img a { margin: 0 !important; padding: 0; border: 0 none; }
.wp-caption .wp-caption-text { padding: 0 4px 5px; margin: 0; }
.wp-smiley { max-height: 13px; margin: 0 !important; }
.gallery { margin: auto; float: left; width: 100%; list-style-type: none !important; }
.gallery-image { border: 1px solid #efefef; margin-left: 0; }
.gallery-icon a { display: block; }
.gallery-caption { padding: 0 4px 5px; font-style: italic; margin-bottom: 0 !important; display: block; }
.gallery-item { float: left; text-align: center; margin-left: 0; }
.gallery-item { width: auto; float: left; margin: 10px 0 0 0; }
.gallery-item img { margin: 0 !important; padding: 0; }
.gallery-item a { float: left; border: none; margin: 0; padding: 0; }
/* 10. O T H E R E L E M E N T S
........................................................................................................................................ */
td, td img { vertical-align: top; }
td { padding: 2px 4px; }
/* Set sub, sup without affecting line-height: gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* pre { white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } */
pre {
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera */
width: 99%;
word-wrap: break-word; /* IE */
}
pre { font-size: .9em; border: 1px solid #e9e9e9; line-height: 20px; background: #fff url('images/layout/pre-code-bg.png') repeat left top; overflow: auto; /* Hides vertical scroll created by IE */ }
pre code { font-family: Consolas, "Courier New", Courier, monospace; margin: 0 0 0 40px; padding: 18px 0; display: block; }
dt { font-size: 1.5em; font-weight: bold; }
dd { display: list-item; list-style: square inside none; }
#main table, .page-content table, .post-content table { border: 1px solid #e9e9e9; border-collapse: collapse; background: #fff; }
#main tr:nth-of-type(odd), .page-content tr:nth-of-type(odd), .post-content tr:nth-of-type(odd) { background-color: #eff3f4; } /* zebra style table */
#main th, #main td, .page-content th, .page-content td, .post-content th, .post-content td { border: 1px solid #e9e9e9; padding: 9px 22px; }
#main th, .page-content th, .post-content th { font-variant: small-caps; text-transform: lowercase; }
#main caption, .page-content caption, .post-content caption { font-size: 1.2em; font-weight: bold; font-family: "PT Sans Narrow", sans-serif; }
/* 11. S L I D E R S
....................................................................................................................................... */
#slides { position: relative; margin: 0 auto; }
.csstransitions #slides a { -moz-transition: none; -webkit-transition: none; -o-transition: none; transition: none; }
.slides-container { display: none; } /* Set to display none, prevents content flash */
/* slider pagination */
.pagination { text-align: center; position: absolute; top: 20px; left: 20px; z-index: 99; }
.pagination li { display: inline; }
.pagination li a { display: inline-block; width: 12px; height: 12px; overflow: visible; margin-left: 5px; background: url('images/layout/pagination.png') no-repeat 0 1px; }
.pagination li.current a { background-position: 0 -15px; }
.pagination li a:hover { background-position: 0 -15px; }
.next, .prev, .pagination li a { text-indent: -9999px; /* hide the link text from the user */ }
/* next-previous links */
.opacity #next-prev-links { opacity: 0; }
#slides #next-prev-links img { display: block; }
#slides .next, #slides .prev { position: absolute; width: 41px; height: 41px; display: block; z-index: 99; top: 48%; margin: -10px 15px 0; }
#slides .prev { left: 15px; }
#slides .next { right: 15px; }
#slides .next:active, #slides .prev:active { position: absolute; top: 48.3%; }
.slide { position: relative; width: 940px; overflow: hidden; }
.slide img { margin-bottom: 0; }
/* portfolio slider */
#single-item { width: 680px; padding-left: 20px; }
#single-item .slide { width: 680px; height: 100px; }
#single-item .slider-img { display: block; }
#single-item figure { display: block; }
/* Latest articles slider */
#latest-articles-slider { width: 940px; height: 210px; position: relative; }
#latest-articles-slider > div { width: 620px; height: 210px; position: relative; float: left; }
#latest-articles-slider .slides_container { overflow: hidden; display: none; width: 620px; position: relative; }
.slides_container .latest-article { width: 620px; height: 210px; display:block; }
.latest-articles-pagination { position: relative; left: 10px; }
.latest-articles-pagination li { float: left; position: relative; width: 95px; margin-left: 7px; }
.latest-articles-pagination li:first-child { margin-left: 0; }
.latest-articles-pagination li:nth-child(4n + 4) { margin-left: 0; }
.latest-articles-pagination li img { border: 1px solid transparent; }
.latest-articles-pagination li.current img { border: 1px solid #b7b7b7; }
/* 12. L I G H T B O X A N D M O D A L W I N D O W
....................................................................................................................................... */
/* remove the borders and text shadows in pretty photo lightbox */
.pp_pic_holder { text-shadow: none; }
/* stop the previous and active links from flickering, when clicked */
.pp_arrow_previous:active, .pp_arrow_next:active { position: static; top: 0; }
/* modal window */
#lean_overlay { position: fixed; z-index: 100; top: 0px; left: 0px; height: 100%; width: 100%; display: none; background: #fff url('images/layout/modal-bg.png'); }
#modalContactForm { display: none; left: 51%; background: #fff; padding: 36px 20px 20px 40px; }
#close-reveal-modal { font-size: 22px; line-height: .5; position: absolute; top: 8px; right: 11px; color: #aaa; font-weight: bold; cursor: pointer; }
#close-reveal-modal:hover { color: #7c7c7c; }
.borderradius #modalContactForm { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
.boxshadow #modalContactForm { -webkit-box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.2); }
/* 13. H E A D E R
........................................................................................................................................ */
#header { padding: 0 0 0px 0; display: table; }
#logo, #menu {
vertical-align: middle;
text-align: center;
}
#wp-title-logo { color: #444652; font: normal 400 37px 'Merriweather', Georgia, "Times New Roman", Times, serif; }
.csstransitions #logo { -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
.opacity #logo, .opacity #wp-title-logo { opacity: 0.75; }
.opacity #logo:hover, .opacity #wp-title-logo:hover { opacity: 1; }
#secondary-wrapper p { font: normal 13px Arial, Helvetica, "Nobile", sans-serif; }
#social-networking { list-style: none; }
#social-networking li { float: right; }
#social-networking a img { border: none; display: block; padding-left: 6px; }
.opacity #social-networking a img { opacity: .3; }
.opacity #social-networking a:hover img { opacity: .7; }
/* 14. M A I N N A V I G A T I O N
....................................................................................................................................... */
#menu { display: table-cell; vertical-align: middle; }
#menu li { float: left; position: relative; display: block; }
#menu .menu > li { margin-right: 10px; }
#menu .menu > li:after { position: absolute; content: " "; width: 100%; height: 100%; } /* position the pseudo element right beneath a top-level li element, so we can use the mentioned pseudo element as a way to introduce some extra space between the sub-menu and the currently hovered top-level link */
.borderradius #menu .menu > li { -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; }
#menu a { display: block; line-height: 20px; font-size: 12px; border: 1px solid transparent; padding: 3px 7px; }
.csstransitions #menu a { -moz-transition: all .1s ease-in-out; -webkit-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
/* DROPDOWN */
#menu .sub-menu { position: absolute; margin: 10px 0 0 0; z-index: 9999; left: -9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */ }
.boxshadow #menu .sub-menu { -webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, .05); -moz-box-shadow: 0 0 4px 1px rgba(0, 0, 0, .05); box-shadow: 0 0 4px 1px rgba(0, 0, 0, .05); }
.opacity #menu .sub-menu { opacity: 0; /* Set initial state to transparent */ }
#menu .sub-menu li { margin-left: 0; float: none; /* Introducing a padding between the li and the a give the illusion spaced items */ }
#menu .sub-menu a { white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */ }
.csstransitions #menu li ul { -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
#menu li:hover ul { /* Display the dropdown on hover */ left: 0; /* Bring back on-screen when needed */ }
.opacity #menu li:hover ul { opacity: 1; /* Fade to opaque */ }
#menu li:hover ul li a:hover { /* Set styles for dropdown when items are hovered */ background: #56575e; background: rgba(78, 79, 86, .8); border: 1px solid transparent; border-bottom: none; color: #fff; }
/* Dropdown links */
#menu .sub-menu a { padding: 4px 9px; text-transform: none; border: 1px solid transparent; background: #ededed; line-height: 20px; /* reset to normal line height */ font-size: 11px; border: 1px solid #e0e0e0; border-bottom: none; background: #fff; color: #999999; }
#menu .sub-menu li:last-child a { border-bottom: 1px solid #e0e0e0; }
.borderradius #menu .sub-menu li:first-child a { -webkit-border-top-right-radius: 1px; -webkit-border-top-left-radius: 1px; -moz-border-radius-topright: 1px; -moz-border-radius-topleft: 1px; border-top-right-radius: 1px; border-top-left-radius: 1px; }
.borderradius #menu .sub-menu li:last-child a { -webkit-border-bottom-right-radius: 1px; -webkit-border-bottom-left-radius: 1px; -moz-border-radius-bottomright: 1px; -moz-border-radius-bottomleft: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; }
#menu a:hover, #menu .current-menu-item > a:hover, #menu .selectedLava > a { color: #423a35; } /* top-level menu links */
/* Current menu item */
#menu .current-menu-item > a { color: #4f4640; }
#menu .sub-menu .current-menu-item > a { color: #4f4640; }
#menu .sub-menu .current-menu-item > a:hover { text-decoration: none; }
/* sub menu indicator generated by jQuery plugin called superfish */
#menu .parent > a { position: relative; padding-right: 17px; } /* note: the "parent" class is generated by a custom walker */
#menu .parent > a:after { content: " "; text-indent: -9999px; position: absolute; margin: 8px 0 0 5px; width: 6px; height: 4px; background: url('images/layout/menu-arrow.png') no-repeat left top; }
.boxshadow #menu .backLava, .boxshadow #menu .selectedLava { -webkit-box-shadow: inset 0 0 4px 1px rgba(0, 0, 0, .05); -moz-box-shadow: inset 0 0 4px 1px rgba(0, 0, 0, .05); box-shadow: inset 0 0 4px 1px rgba(0, 0, 0, .05); }
#menu .backLava { background-color: #e2e2e2; background-color: rgba(200, 200, 200, .6); }
#menu .selectedLava { background-color: #e2e2e2; background-color: rgba(200, 200, 200, .6); }
/* 15. P A G E S
........................................................................................................................................ */
.two-cols-right-fixed #content .page-content, .two-cols-left-fixed #content .page-content, .sidebar { display: inline; }
.two-cols-right-fixed #content .page-content { margin-right: 30px; width: 690px; }
.two-cols-left-fixed #content .page-content { margin-left: 30px; width: 690px; }
.two-cols-right-fixed .sidebar { width: 220px; }
.two-cols-left-fixed .sidebar { width: 220px; }
/* sidebar positioning */
.two-cols-left-fixed .sidebar { float: left; }
.two-cols-left-fixed .page-content { float: right; }
.two-cols-right-fixed .page-content { float: left; }
.two-cols-right-fixed .sidebar { float: right; }
/* 16. H O M E T E M P L A T E
........................................................................................................................................ */
.no-slider-and-intro { margin-bottom: 0px; }
.with-slider-or-intro, .latest-articles { margin-bottom:30px; padding-top: 30px; }
.latest-articles { margin-top: -20px; }
.four-items-per-row.latest-projects a span, .four-items-per-row .project-link span { top: 175px; left: 75px; }
.three-items-per-row.latest-projects a span, .three-items-per-row .project-link span { top: 210px; left: 116px; }
.two-items-per-row.latest-projects a span, .two-items-per-row .project-link span { top: 330px; left: 194px; }
.latest-article-title { line-height: 1; }
.latest-article-content .read-more { margin-top: 17px; }
/* 17. B L O G
........................................................................................................................................ */
.post time { text-transform: lowercase; font-variant: small-caps; }
.post-meta li { margin: 0 0 3px 0; }
.post-meta.column-width li { max-width: 215px; } /* reduce the width of the post meta box if the sidebar is disabled */
#blog-posts .post-meta { list-style: none; margin: 0; }
.post-content > p:first-line { text-transform: lowercase; font-variant: small-caps; letter-spacing: .1em; font-size: 1.056em; }
.post-content .read-more, .blog-post .read-more { margin-top: 10px; }
.post-title + p { margin-bottom: 10px; } /* style the read more link in the search results */
h2 .post-title { position: relative; line-height: 1; color: #47413e; }
.post-thumb { margin: 0 0 3px 0; }
#blog-posts .post-thumb a img { display: block; margin-bottom: 0; }
.share-this { clear: both; margin-top: 30px; position: relative; }
.share-this:before { content: " "; position: absolute; top: 2px; left: 0; width: 100%; height: 1px; text-shadow: none; }
/* position the elements on the page properly, depending on the position of the sidebar */
.post .post-content-position { position: relative; left: 20px; width: 520px; }
.full-width-post { position: relative; left: 10px; }
.share-this { position: relative; }
.twitter-share-button { display: inline-block; text-indent: -9999px; }
.blog-pagination a { margin-right: 13px; text-transform: uppercase; }
.page-link-title { margin-right: 16px; }
.single-post .share-this div, .share-this .share { float: left; }
.share-this .share { display: inline-block; padding-right: 20px; }
.single-post .share-this { padding: 20px 0; }
/* WordPress built-in class for handling sticky posts */
.sticky { }
/* 18. P O R T F O L I O
........................................................................................................................................ */
#filter li { display: inline; }
#filter a, #filter li:first-child { margin-right: 13px; text-transform: uppercase; }
#filter .active a { border-bottom: 1px dashed; position: relative; }
#filter .active a:after { position: absolute; content: ' '; left: 0; bottom: -3px; width: 100%; height: 1px; border-bottom: 1px dashed; }
.project-link { position: relative; display: block; overflow: hidden; }
.latest-projects a span, .portfolio-item .project-link span, #related-posts .project-link span { opacity: 0; display: block; background: url('images/layout/view-details.png') no-repeat; width: 68px; height: 68px; position: absolute; z-index: 100; text-indent: -9999px; }
/* make sure the columns are properly aligned, when the projects are filtered on the portfolio page, by clearing the floats on items that contain a class of "alpha".
* Do the same for the "Related Projects" section in the single item view, and the "Latest Project" section on the home page.
*/
.portfolio-item.alpha, .related-post.alpha, .latest-project.alpha { clear: both; }
.portfolio-item { overflow: hidden; }
.item-heading h2 { margin-bottom: 7px; }
/* S I N G L E */
.project-title a { font-size: 0.75em; }
.item-term { padding: 2px 5px; background: #f3f3f3; background: rgba(0, 0, 0, .05); margin-right: 7px; }
.borderradius .item-term { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
#single-item { text-align: right; }
#related-posts { margin-bottom: 30px; padding-top: 30px; }
/* 19. W I D G E T S
........................................................................................................................................ */
.widget li { margin: 0 0 15px 0; }
.widget_archive li a, .widget_categories li a, .widget_nav_menu li a, .widget_links li a, .widget_pages li a,
.widget_recent_entries li a, .widget_recent_comments li a, .widget_rss li a, .widget_meta li a { display: block; }
/* Insert a right arrow on the right-hand side of each of the widget's links, when they're hovered over */
.widget_archive li a:after, .widget_categories li a:after, .widget_nav_menu li a:after, .widget_links li a:after, .widget_pages li a:after,
.widget_recent_entries li a:after, .widget_recent_comments li a:after, .widget_rss li a:after, .widget_meta li a:after { content: '\2192'; float: right; visibility: hidden; font-size: 1.29em; position: relative; bottom: 2px; }
.widget_archive li a:hover:after, .widget_categories li a:hover:after, .widget_nav_menu li a:hover:after, .widget_links li a:hover:after, .widget_pages li a:hover:after,
.widget_recent_entries li a:hover:after, .widget_recent_comments li a:hover:after, .widget_rss li a:hover:after, .widget_meta li a:hover:after { visibility: visible; }
.widget_nav_menu .sub-menu { margin-top: 15px; }
.widget_nav_menu .sub-menu li { margin-left: 2em; }
#footer .widget_nav_menu .sub-menu li:last-child { margin-bottom: 0px; }
/* flickr widget */
#flickr a { border-bottom: none; }
#flickr a:hover { background: none; }
#flickr div { display: inline; }
#flickr img { width: 42px; height: 42px; padding: 0 13px 10px 0; }
.csstransforms #flickr img:hover { -ms-transform: scale(1.20, 1.20); -webkit-transform: scale(1.20, 1.20); -o-transform: scale(1.20, 1.20); -moz-transform: scale(1.20, 1.20); transform: scale(1.20, 1.20); }
/* twitter widget */
.tweets { font-style: italic; }
.read-more, .timesince { display: block; }
.tweets li {
padding: 0 0 0 25px;
background: url('images/layout/twitter-feed-icon.png') no-repeat 0 6px;
/* wrap long URLs, strings of text, and other content */
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
word-wrap: break-word;
}
/* popular posts widget */
.widget.popular-posts ul { clear: both; }
.widget.popular-posts ul:before, .widget.popular-posts ul:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
.widget.popular-posts ul:after { clear: both; }
.popular-posts ul li { position: relative; clear: both; }
/* title styles */
.wpp-post-title { }
/* thumbnail styles */
.wpp-thumbnail { float: left; margin-right: 7px; margin-bottom: 7px; }
.wppnothumb, .wppgen { }
/* excerpt styles */
.wpp-excerpt {}
/* Stats tag styles */
.post-stats { font-size: 0.9em; display: block; }
.wpp-comments {}
.wpp-views {}
.wpp-author { }
.wpp-date {}
/* WP-PostRatings styles */
.wpp-rating {}
/* calendar widget */
#wp-calendar thead { border-bottom: 1px solid; }
#wp-calendar th, #wp-calendar tbody td { text-align: center; padding: 3px 6px; }
#wp-calendar tfoot td { padding-top: 3px; }
#wp-calendar caption { font-size: 1.3em; font-weight: bold; text-align: center; margin-bottom: 15px; }
/* categories widget */
.widget .children { /* indented lists */ padding-left: 1em; }
/* 20. S H O R T C O D E S
........................................................................................................................................ */
/* Fluid Column Shortcodes */
.one_half { width: 48%; }
.one_third { width: 30.66%; }
.two_third { width: 65.33%; }
.one_fourth { width: 22%; }
.three_fourth { width: 74%; }
.one_fifth { width: 16.8%; }
.two_fifth { width: 37.6%; }
.three_fifth { width: 58.4%; }
.four_fifth { width: 67.2%; }
.one_sixth { width: 13.33%; }
.five_sixth { width: 82.67%; }
.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { position:relative; margin-right:4%; float:left; }
.last { margin-right: 0 !important; clear:right; }
.clearboth {clear: both; display: block; font-size: 0; height: 0; line-height: 0; width: 100%; }
/* contact info */
.contact-info-shortcode { list-style: none !important; }
.contact-info-shortcode li { padding-left: 45px; min-height: 33px; padding-top: 4px; position: relative; margin: 0 0 15px 0; }
.contact-info:before { content: " "; background: url('images/layout/contact-info-icons.png') no-repeat top left; width: 33px; height: 33px; display: block; position: absolute; top: 0; left: 0; }
.street-address, .city-zip, .state { display: block; }
.location:before { background-position: -39px 0; }
.telephone:before { background-position: -78px 0; }
.my-mail:before { background-position: top left; }
/* contact form */
.success { color: #7b9b2f; }
.error { color: #e44141; }
.form-status { display: none; background: #eae8e8; background: rgba(0, 0, 0, 0.06); max-width: 400px; padding: 16px 10px; position: relative; margin-top: 35px; }
.contact-form .status-icon { display: block; position: absolute; top: -10px; left: -5px; background: url('images/layout/info-icons.png') no-repeat left top; width: 28px; height: 28px; }
.contact-form .success .status-icon { background-position: -33px 0; }
.contact-form .loading-img { position: relative; left: 10px; top: 4px; border: none; } /* loading gif at the end of the contact form */
.invalid-field { border-color: #edaaaa; }
/* 21. C O M M E N T S
........................................................................................................................................ */
#main .comment-list { list-style: none; }
#number-of-comments { margin-top: 40px; }
.comment { margin: 0 0 30px 0; }
.comment-author { position: relative; }
.avatar { float: left; margin: 0 10px 0 0; }
.author-link, .author-meta { line-height: 1; }
.author-link { margin-bottom: 10px; }
.author-meta { margin: 2px }
#main .children { /* indented comments */ padding-left: 4em; list-style: none; }
#cancel-comment-reply-link { margin-left: 13px; }
.form-allowed-tags { max-width: 450px; }
/* comments navigation */
.comments_navigation { text-transform: uppercase; font-size: 1.2em; }
.comments_navigation .page-numbers { padding-right: 10px; }
/* wordpress built-in class for highlighting the author comments */
.bypostauthor > article { background: url('images/layout/post-author.png') no-repeat right top; }
/* 22. 4 0 4 P A G E
.......................................................................................................................................... */
#not-found { text-align: center; }
#not-found-heading { font-size: 150px; font-weight: bold; }
#not-found-img { border: none; }
#not-found-form input { width: 500px; margin: 0 auto; }
/* 23. F O O T E R
........................................................................................................................................ */
#footer .footer-widgets li:last-child { margin-bottom: 0; }
.footer-widgets { margin-bottom: 0px; padding-top: 30px; }
.footer-meta { padding: 30px 0 0px; }
#back-top { float: right; text-transform: uppercase; letter-spacing: 0.1em; } /* link that takes the user back to the top of the page */
#back-top span { position: relative; top: -3px; }
#footer-logo { text-align: center; }
.opacity #footer-logo img { opacity: .3; }
.opacity #footer-logo a:hover img { opacity: .7; }
/* 24. I N T E R N E T E X P L O R E R
.......................................................................................................................................... */
.ie button, .ie input[type="submit"] { width: auto; overflow: visible; } /* make buttons play nicely in ie */
.ie textarea { overflow: auto; } /* remove textarea scrollbars */
.ie .post-time { font-size: 0.95em; }
/* IE 9 */
.ie9 #slides .next, .ie9 #slides .prev { opacity: 0; }
.ie9 #menu li:hover ul, .ie9 .menu > li:hover:after ul { opacity: 1; /* Fade the sub-menu to opaque */ }
/* IE 8 */
.ie8 #main .comment-list { list-style: none; }
.ie8 #slides .next, .ie8 #slides .prev { filter: alpha(opacity=0); }
.ie8 .latest-projects a span, .ie8 .portfolio-item .project-link span, .ie8 #related-posts .project-link span { filter: alpha(opacity=0); }
.ie8 #logo, .ie8 #wp-title-logo { filter: alpha(opacity=75); }
.ie8 #logo:hover, .ie8 #wp-title-logo:hover { filter: alpha(opacity=100); }
.ie8 .latest-projects a span, .ie8 .portfolio-item .project-link span, .ie8 #related-posts .project-link span { background: url('images/layout/view-details.jpg') no-repeat; }
.ie8 #social-networking a img, .ie8 #footer-logo img {
background: #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='ffffff') progid:DXImageTransform.Microsoft.Alpha(opacity=30)";
}
.ie8 #social-networking a:hover img, .ie8 #footer-logo a:hover img {
background: #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='ffffff') progid:DXImageTransform.Microsoft.Alpha(opacity=70)";
}#al {
text-align: center;
}