/*
Theme Name: Hypershot
Description: Made by Apollo13.
Get support from Forum.
Author: Apollo13
Author URI: http://themeforest.net/user/apollo13
Theme URI: http://themeforest.net/user/apollo13
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: white, theme-options, photoblogging, two-columns, translation-ready
Version: 1.9.7
*/
/* HTML5 Boilerplate */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: inherit; color: #3b3b3b; }
body { margin: 0; font-size: 1em; line-height: 1.4; }
::-moz-selection { background: #5a88fe; color: #fff; text-shadow: none; }
::selection { background: #5a88fe; color: #fff; text-shadow: none; }
a { color: #ec503a; text-decoration: none; }
a:hover { color: #3b3b3b; text-decoration: none; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
/* =============================================================================
WP styles
========================================================================== */
/* =WordPress Core
-------------------------------------------------------------- */
.says, .screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
}
.alignnone {
clear: both;
margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
clear: both;
display: block;
margin: 5px auto;
}
.alignright {
float:right;
margin: 5px 0 20px 20px;
}
.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.alignright,
a img.alignnone,
a img.alignleft,
a img.aligncenter,
.wp-caption,
.alpha-scope{
border: 1px solid #e2e2e2;
padding: 6px;
}
a img.alignright {
float: right;
margin: 5px 0 20px 20px;
}
a img.alignnone {
margin: 5px 20px 20px 0;
}
a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto
}
.wp-caption {
background-color: #fff;
max-width: 100%; /* Image does not overflow the content area */
text-align: center;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.wp-caption.alignnone {
clear: both;
margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
margin: 5px 0 20px 20px;
}
.wp-caption a{
display: block;
}
.wp-caption img {
border: 0 none;
display: block;
height: auto;
margin: 0;
max-width: 100%;
padding: 0;
width: auto;
}
.wp-caption p.wp-caption-text {
color: #9d9d9d;
font-size: 11px;
font-style: normal;
line-height: 17px;
margin: 0;
padding: 10px;
}
.gallery-caption {
color: #666;
font-size: 12px;
}
.sticky { /*Empty*/ }
/* Assistive text */
.assistive-text {
position: absolute;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
#access a.assistive-text:active,
#access a.assistive-text:focus {
background: #eee;
border-bottom: 1px solid #ddd;
color: #1982d1;
clip: auto !important;
font-size: 12px;
position: absolute;
text-decoration: underline;
top: 0;
left: 7.6%;
}
h1,h2,h3,h4,h5,h6{
color: #3b3b3b;
font-weight: bold;
line-height: 1.05em;
margin: 0 0 0.9em;
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a
.post-title a, a.post-title{
color: #3b3b3b;
display: block; /* to remove */
}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover,
.post-title a:hover, a.post-title:hover{
color: #909090;
}
h1{
font-size: 40px;
}
h2{
font-size: 34px;
}
h3{
font-size: 30px;
}
h4{
font-size: 26px;
}
h5{
font-size: 20px;
}
h6{
font-size: 16px;
}
p{
margin: 1em 0;
}
/* =============================================================================
FONTS
========================================================================== */
/* All things font(menu, interactive elements, labels). Not used for content text and titles */
body,
.a13-button,
input[type="submit"],
#header .search input{
font-family: Calibri, Arial, sans-serif;
}
/* Text content font */
.real-content,
.widget a.content,
#head-widgets .content .text,
div.textwidget,
div.widget_rss li,
div.twitter_widget p.content,
div.about-author,
div.comments-area,
input[type="text"],
input[type="search"],
input[type="password"],
textarea,
select{
font-family: Arial, sans-serif;
}
/* Titles/Headings font */
h1,h2,h3,h4,h5,
h1 a,h2 a,h3 a,h4 a,h5 a,
.post-title a, a.post-title{
font-family: Calibri, Arial, sans-serif;
}
/* =============================================================================
MAIN STYLES
========================================================================== */
body:after {
content: 'narrow1500'; /* info for JS */
display: none;
}
html, body{
min-height: 100%;
}
html.show-scroll{
overflow-y: scroll;
}
#whole-bg-image{
background-position: 50% 50%; /* .center */
background-repeat: no-repeat;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
#mid #whole-bg-image{
position: absolute;
}
#whole-bg-image.cover { background-size: cover; }
#whole-bg-image.contain { background-size: contain; }
#whole-bg-image.fitV { background-size: 100% auto; }
#whole-bg-image.fitH { background-size: auto 100%; }
#whole-bg-image img{
display: block;
height: auto;
width: 100%;
}
#root{
padding: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
body.admin-bar #root,
body.admin-bar #whole-bg-image{
top: 28px;
}
body.wp-3_8.admin-bar #root,
body.wp-3_8.admin-bar #whole-bg-image{
top: 32px;
}
body.admin-bar #mid #whole-bg-image,
body.wp-3_8.admin-bar #mid #whole-bg-image{
top: 0;
}
#header-container{
box-shadow: 0 1px 2px rgba(0,0,0, 0.10);
position: relative;
z-index: 300;
}
#header{
background-color: #fff;
padding: 0;
position: relative;
}
#header-container.fixed{
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.admin-bar #header-container.fixed{
top: 28px;
}
.wp-3_8.admin-bar #header-container.fixed{
top: 32px;
}
#mid{
padding-bottom: 30px;
position: relative;
}
#content:first-child{ /* when info bar is switched off */
padding-top: 30px;
}
#content .inside{
margin: 0 auto;
padding-bottom: 30px;
width: 1000px;
}
#footer{
background-color: #000;
height: 30px;
line-height: 30px;
padding: 0 10px;
position: fixed;
bottom: 0;
text-transform: uppercase;
width: 100%;
z-index: 200;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
#other-albums a.current,
#footer{
color: #606060;
}
body.single-album #footer{
position: absolute;
}
body.single-album.bricks-theme #footer{
position: fixed;
}
/* narrow layout */
body.narrow #footer div.content,
body.narrow #header div.content,
body.narrow .nav-parent{
margin-left: auto;
margin-right: auto;
max-width: 960px;
}
/* =============================================================================
HEADER
========================================================================== */
.add-ons{
background-color: #000;
color: #cfcfcf;
font-size: 12px;
position: relative;
z-index: 202; /*socials above logo and above hovered menu*/
}
span.action,
.add-ons span.static{
font-weight: bold;
line-height: 30px;
text-transform: uppercase;
}
.add-ons a{
color: #cfcfcf;
font-weight: bold;
}
span.action:hover,
.add-ons a:hover{
color: #fff;
cursor: pointer;
}
#access{
display: table;
width: 100%;
}
#logo{
display: table-cell;
padding: 10px;
vertical-align: middle;
}
/********/
/* TOP MENU */
.menu-container{
display: table-cell;
width: 100%;
vertical-align: middle;
}
/*helps with menu 'flicker' in compact mode on page load */
.js .menu-container{ visibility: hidden; }
.js .menu-container.loaded{ visibility: visible; }
.top-menu li:hover{
z-index: 201;
}
.top-menu li a{
color: #2E2E2E;
display: block;
padding: 0 10px;
text-decoration: none;
text-transform: uppercase;
}
.top-menu li a:hover{
color: #EA4F3B;
}
.top-menu li.current-menu-item > a{
color: #C5C5C5;
}
/* First level */
.top-menu{
float: right;
/*height: 30px;*/
margin: 0 10px 0 0;
}
.top-menu > li{
border-left: 1px solid #eee;
float: left;
height: 100%;
margin: 0;
position: relative;
white-space: nowrap;
}
.top-menu > li:first-child{
border-left: none;
}
.top-menu > li > a{
font-size: 16px;
font-weight: bold;
height: 100%;
line-height: 30px;
position: relative;
z-index: 5;
}
/* 2nd level */
.top-menu ul{
background-color: #fff;
box-shadow: 0 3px 5px rgba(0,0,0, 0.40);
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 100%;
padding: 0;
}
.top-menu ul.otherway{
left: auto;
right: 0;
}
.top-menu .last ul{
left: auto;
right: 0;
}
.top-menu li li a{
border-top: 1px solid #f2f2f2;
color: #3b3b3b;
font-size: 14px;
line-height: 30px;
}
.top-menu li li a:hover{
color: #EA4F3B;
}
.top-menu li li:first-child > a{
border-top: none;
}
/* 3rd level */
.top-menu ul ul{
top: 1px;
left: 100%;
}
.top-menu ul ul.otherway{
left: auto;
right: 100%;
}
.top-menu .last ul ul{
top: 1px;
left: auto;
right: 100%;
}
/* mark in parent option */
.top-menu li li.parent{
position: relative;
}
.top-menu li li.parent:after{
content: "";
background: transparent url(images/menu-parent.gif) 50% 50% no-repeat;
height: 8px;
margin-top: -4px;
position: absolute;
top: 50%;
right: 7px;
width: 6px;
}
.top-menu li li.parent > a{
padding-right: 19px;
}
/********/
/* END OF TOP MENU */
/********/
/* TOUCH MENU */
#access.touch{
display: block;
position: relative;
}
#access.touch h3.assistive-text{
background: #fafafa url(images/controlls.png) 7px -397px no-repeat;
border: 1px solid #d7d7d7;
border-radius: 3px;
-webkit-border-radius: 3px;
clip: auto;
cursor: pointer;
float: right;
height: 30px;
line-height: 30px;
margin: -16px 0 0;
overflow: hidden;
padding: 0;
right: 10px;
text-align: left;
text-indent: 100%;
top: 50%;
white-space: nowrap;
width: 30px;
}
#header-container.fixed #access.touch h3.assistive-text{
position: static;
margin: 9px 10px 0 0;
}
#access.touch #logo{
display: block;
float: left;
}
#access.touch .menu-container{
background-color: #fff;
display: none;
position: absolute;
top: 100%;
}
#header-container.fixed #access.touch .menu-container{
position: static;
clear: both;
}
#access.touch .menu-container > ul{
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
float: none;
height: auto;
margin: 0;
padding: 0;
}
#access.touch .sub-menu{
display: none;
background-color: transparent;
box-shadow: none;
min-width: 0;
position: static;
width: auto;
}
#access.touch li{
border: none;
border-top: 1px solid #EEEEEE;
float: none;
white-space: normal;
}
#access.touch li a{
border-top: none;
padding: 0 20px;
}
#access.touch li li a{
padding-left: 40px;
}
#access.touch li li li a{
padding-left: 60px;
}
#access.touch li.parent{
position: relative;
}
#access.touch li.parent a:after {
content: "";
background: none repeat scroll 0 0 #ddd;
height: 4px;
position: absolute;
top: 13px;
right: 10px;
width: 12px;
}
#access.touch li.parent a:before {
content: "";
background: none repeat scroll 0 0 #ddd;
height: 12px;
position: absolute;
top: 9px;
right: 14px;
width: 4px;
}
#access.touch li li.parent:after{
display: none;
}
/********/
/* END OF TOUCH MENU */
/********/
/* SOCIALS */
.socials{
float: left;
height: 30px;
padding: 0 0 0 10px;
}
.socials span.static{
float: left;
}
.socials .visible{
float: right;
height: 20px;
margin-left: 5px;
overflow: hidden;
padding-top: 3px;
}
.js .socials .visible{
display: none;
}
.socials .visible.hover{
overflow: visible;
}
.socials .slide{
border-radius: 8px;
-webkit-border-radius: 8px;
padding: 0 4px 4px 0;
}
.socials .visible.hover .slide{
background-color: rgb(0,0,0); /* IE 8 */
background-color: rgba(0,0,0,0.8);
}
.socials .slide a{
float: left;
height: 16px;
width: 16px;
margin: 4px 0 0 4px;
}
.socials .slide:hover a{
opacity: 0.6;
/* no IE opacity cause of PNG + opacity bug */
}
.socials .slide a:hover{
opacity: 1;
}
.socials img{
display: block;
height: 100%;
width: 100%;
}
/********/
/* END OF SOCIALS */
#header .search{
float: right;
padding: 0 10px 0 0;
position: relative;
}
#header .search span.action{
background: transparent url(images/add-ons.png) 100% -29px no-repeat;
padding-right: 20px;
}
#header .search-form{
margin-top: 8px;
position: absolute;
top: 100%;
right: 10px;
z-index: 300;
}
#header .search-form:after{
content: "";
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 5px dashed #000;
height: 0;
position: absolute;
right: 31px;
top: -5px;
width: 2px;
}
.js #header .search-form{
display: none;
}
/********/
/* MUSIC PLAYER */
#jpHeaderPlayer{
float: right;
margin: 0 10px 0 0;
}
#jpHeaderPlayer ul{
list-style-type: none;
height: 30px; /* for not jumping bar on load */
margin: 0;
padding: 0;
overflow: hidden; /* for not jumping bar on load */
}
#jpHeaderPlayer a.jp-play,
#jpHeaderPlayer a.jp-pause{
background: transparent url(images/add-ons.png) 100% 13px no-repeat;
display: block;
line-height: 30px;
padding-right: 20px;
text-transform: uppercase;
}
#jpAudioContainer{
overflow: hidden;
}
#jpAudioContainer audio{
max-width: 30px;
}
/********/
/* END OF MUSIC PLAYER */
#head-widgets{
background-color: #fff;
position: relative;
z-index: 301; /* above header */
}
#head-widgets .content{
margin: 0 auto;
max-width: 960px;
}
#head-widgets .handle{
color: #CFCFCF;
font-size: 12px;
display: block;
position: absolute;
left: 50%;
}
#head-widgets .handle span{
display: block;
position: relative;
left: -50%;
white-space: nowrap;
}
#head-widgets .handle:hover{
color: #fff;
}
.hide-switch{
border-top: 5px dashed #000;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
height: 0;
margin-left: -5px;
position: absolute;
bottom: -5px;
left: 0;
width: 2px;
}
.lt-ie9 .hide-switch{
border-top-style: solid;
}
.js #head-widgets.close .content{
/* inserted inline in header.php */
}
#head-widgets .content .text{
float: left;
font-size: 14px;
padding: 20px 20px 20px 10px;
width: 50%;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
#head-widgets.textonly .content .text{
float: none;
width: 100%;
}
#head-widgets .content .text iframe{
/*margin-top: 20px;*/
width: 100%;
}
#head-widgets .content .text img{
height: auto;
max-width: 100%;
}
#head-widgets .form{
float: right;
padding: 0 10px 20px 0;
width: 49.5%;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* =============================================================================
FOOTER
========================================================================== */
#footer .content{
position: relative;
}
#footer, .glass-switch{
font-size: 12px;
}
#footer a,
#footer span.action,
.glass-switch{
color: #cecece;
}
#footer a:hover,
#footer span.action:hover,
.glass-switch:hover{
color: #fff;
}
.copyright{
float: left;
font-weight: bold;
line-height: 30px;
}
.footer-menu{
float: left;
line-height: 30px;
list-style: none;
margin: 0;
padding: 0;
}
.footer-menu li{
float: left;
margin-left: 10px;
}
.footer-menu a{
display: block;
font-weight: bold;
line-height: 30px;
}
#to-top{
background: #000 url(images/to-top.gif) 50% 50% no-repeat;
border-radius: 3px;
-webkit-border-radius: 3px;
height: 50px;
opacity: 0.45;
filter: alpha(opacity=45);
position: absolute;
right: 20px;
top: -70px;
width: 50px;
}
#to-top:hover{
opacity: 1;
filter: alpha(opacity=100);
}
.js #to-top{
display: none;
}
/* GLASS SWITCH*/
#footer .controls{
float: right;
}
.glass-switch{
background: transparent url(images/controlls.png) 100% -68px no-repeat;
cursor: pointer;
float: right;
line-height: 30px;
padding-right: 22px;
white-space: nowrap;
}
.glass-switch.glow{
border-radius: 20px;
-webkit-border-radius: 20px;
box-shadow: 0 0 8px gold, 0 0 8px gold inset;
padding-left: 8px;
}
.glass-switch.off{
background-color: rgb(0,0,0); /* IE 8 */
background-color: rgba(0,0,0,0.5);
background-position: 100% -114px;
padding-left: 10px;
position: fixed;
top:0;
right: 0;
z-index: 500;
}
body.admin-bar .glass-switch.off{
top: 28px;
}
body.wp-3_8.admin-bar .glass-switch.off{
top: 32px;
}
/* =============================================================================
FORMS
========================================================================== */
input[type="text"],
input[type="search"],
input[type="password"],
textarea{
border: 1px solid #d4d4d4;
box-shadow: 1px 2px 2px 0 #E7E7E7 inset;
background-color: #fff;
/*color: #3b3b3b;*/
font-size: 13px;
height: 30px;
max-width: 100%;
padding: 6px 10px;
width: 237px;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
textarea{
display: block;
height: 115px;
max-width: 600px;
overflow: auto;
width: 100%;
}
/* FOCUS COLORS */
input[type="text"]:hover,
input[type="search"]:hover,
input[type="password"]:hover,
textarea:hover,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus,
input[type="text"].focus,
input[type="search"].focus,
input[type="password"].focus,
textarea.focus{
background-color: #f6f6f6;
box-shadow: 1px 2px 3px 2px #E7E7E7 inset;
border-color: #b1b1b1;
color: #000;
outline: none;
}
input[type="submit"]{
background-color: #ea4f3b;
border: none;
border-radius: 3px;
-webkit-border-radius: 3px;
color: #fff;
font-size: 14px;
font-weight: normal;
height: 30px;
padding: 0 22px;
text-transform: uppercase;
}
input[type="submit"]:hover,
input[type="submit"]:focus{
background-color: #747474;
}
.error input,
.error textarea{
border-color: #ea4f3b;
}
/* =============================================================================
SEARCH FORM
========================================================================== */
.search-form{
background-color: #000;
border-radius: 3px;
-webkit-border-radius: 3px;
width: 242px;
position: relative;
}
.search-form input[type="search"]{
background-color: transparent;
border: none;
box-shadow: none;
color: #fff;
font-size: 16px;
font-weight: bold;
height: 34px;
/*letter-spacing: 0.045em;*/
padding: 0 10px;
width: 208px;
}
.lt-ie9 .search-form input[type="search"]{
padding-top: 6px;
}
.search-form input[type="submit"]{
background: transparent url(images/add-ons.png) 8px -60px no-repeat;
border: none;
height: 34px;
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
width: 34px;
}
/* in widget */
.widget .search-form{
width: auto;
}
.widget .search-form input[type="search"]{
width: 226px;
}
/* =============================================================================
SINGLE PAGE / POST
========================================================================== */
.info-bar .inside{
color: #fff;
margin: 0 auto;
min-height: 50px;
max-width: 940px;
padding: 30px 10px 10px;
position: relative;
z-index: 150;
}
article,
body.search-no-results.search article, /* double class to overwrite bottom styles 'body.search article' */
body.archive.category-empty article{ /* double class to overwrite bottom styles 'body.search article' */
background-color: #fff;
border-radius: 3px;
-webkit-border-radius: 3px;
float: left;
padding: 30px;
width: 600px;
}
body.page article,
body.single article{
box-shadow: 1px 1px 0 rgba(0,0,0, 0.10);
}
body.blog article,
body.archive article,
body.search article{
background-color: transparent;
border-radius: 0;
-webkit-border-radius: 0;
padding: 0;
width: 660px;
}
.full-width article,
body.blog .full-width article,
body.archive .full-width article,
body.search .full-width article{
float: none;
width: auto;
}
.archive-item{
background-color: #fff;
border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 1px 1px 0 rgba(0,0,0, 0.10);
margin-top: 20px;
padding: 30px;
}
.archive-item:first-child{
margin-top: 0;
}
.archive-item.flat-look{
border-radius: 0;
-webkit-border-radius: 0;
box-shadow: none;
}
.info-bar .page-title{
color: #fff;
font-size: 30px;
font-weight: normal;
margin: 0;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0, 0.1);
word-wrap: break-word;
}
#blog-filters{
float: left;
margin-right: 10px;
position: relative;
}
.info-bar .tools{
max-width: 200px;
position: absolute;
right: 10px;
top: 30px;
}
.rss-link, #filter-activate{
border: 1px solid #f5f5f5;
border-radius: 3px;
-webkit-border-radius: 3px;
font-size: 14px;
height: 28px;
text-transform: uppercase;
}
.rss-link{
background: transparent url(images/controlls.png) 7px -359px no-repeat;
float: left;
margin-right: 10px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
width: 28px;
}
#filter-activate{
display: block;
padding: 0 0 0 10px;
white-space: nowrap;
}
.rss-link:hover, #filter-activate:hover{
border-color: #e5e5e5;
}
#filter-activate:after{
content: "";
background: transparent url(images/controlls.png) 6px -324px no-repeat;
display: inline-block;
height: 28px;
margin: 0 3px;
vertical-align: top;
width: 28px;
}
#filter-activate.active{
background-color: #fff;
border-color: #e5e5e5;
color: #4e4e4e;
}
#filter-activate.active:after{
background-position: 6px -397px;
}
#blog-filters > div{
background-color: #fff;
border: 1px solid #e5e5e5;
border-radius: 3px;
-webkit-border-radius: 3px;
/*margin-left: -151px;*/
padding: 15px 5px;
position: absolute;
top: 40px;
right: 0;
width: 290px;
}
.js #blog-filters > div{
display: none;
}
#blog-filters > div:after{
content: "";
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 5px dashed #fff;
height: 0;
margin-left: -5px;
position: absolute;
right: 4%;
top: -5px;
width: 2px;
}
.js #blog-filters > div > div{
float: left;
padding: 0 15px;
width: 50%;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
#blog-filters h3{
background: transparent url("images/icons.png") no-repeat 33px -57px;
color: #4e4e4e;
font-size: 14px;
margin: 0 0 10px;
padding-right: 10px;
text-transform: uppercase;
}
#blog-filters .tag-parent h3{
background-position: 64px -90px;
}
#blog-filters ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#blog-filters li{
border-bottom: 1px dotted #dfdfdf;
color: #4e4e4e;
text-align: right;
}
#blog-filters li a{
display: inline-block;
float: left;
line-height: 22px;
max-width: 100%;
text-align: left;
word-wrap: break-word;
}
.date_n_author{
font-size: 14px;
padding-left: 40px;
position: relative;
text-transform: uppercase;
}
.post-icon,
#comments-title:before,
#reply-title:before{
background: #ea4f3b url(images/posticons.png) 50% 0 no-repeat;
border-radius: 3px;
-webkit-border-radius: 3px;
height: 24px;
position: absolute;
bottom: -44px;
left: 0;
width: 24px;
}
.brick .post-icon{
bottom: -39px;
}
.format-aside .post-icon{ background-position: 50% -120px; }
.format-audio .post-icon{ background-position: 50% -216px; }
.format-chat .post-icon{ background-position: 50% -168px; }
.format-gallery .post-icon{ background-position: 50% -96px; }
.format-image .post-icon{ background-position: 50% -24px; }
.format-link .post-icon{ background-position: 50% -72px; }
.format-quote .post-icon{ background-position: 50% -144px; }
.format-status .post-icon{ background-position: 50% -192px; }
.format-video .post-icon{ background-position: 50% -48px; }
a.post-icon:hover{ /* hover only if it is link */
background-color: #3b3b3b;
}
h1.post-title,
h2.post-title{
font-size: 34px;
margin: 13px 0;
padding-left: 40px;
text-transform: uppercase;
word-wrap: break-word;
}
.date_n_author,
.date_n_author a,
.comment-info .date a,
.comment-info a.comment-reply-link,
.post-info{
color: #b8b8b8;
}
.date_n_author a:hover,
.comment-info .date a:hover,
.comment-info a.comment-reply-link:hover{
color: #3b3b3b;
}
.post-info{
border-top: 1px solid #efefef;
font-size: 14px;
padding-top: 10px;
text-transform: uppercase;
}
body.single article .post-info{ /* article selector, cause without it was affecting widgets */
margin-left: 40px;
}
body.attachment article .post-info{
margin-left: 0;
}
.post-info > a,
.post-info > span{
line-height: 22px;
}
.post-info > span,
.post-info .post-edit-link{
border: 1px solid #dadada;
border-radius: 3px;
-webkit-border-radius: 3px;
display: inline-block;
margin: 10px 6px 0 0;
padding: 0 7px 0 25px;
}
.post-info .post-edit-link,
body.attachment article .post-info > span{
padding-left: 7px;
}
.post-info > a:last-child,
.post-info > span:last-child{
margin-right: 0;
}
.post-info span.categories{
background: transparent url(images/icons.png) -50px -53px no-repeat;
}
.post-info span.tags{
background: transparent url(images/icons.png) -17px -84px no-repeat;
}
.post-info span.comments{
background: transparent url(images/icons.png) 8px -113px no-repeat;
}
.post-media{
margin: 0 0 20px;
}
.post-media img{
display: block;
height: auto;
margin: 0 auto;
max-width: 100%;
width: auto;
}
.real-content{
font-size: 14px;
line-height: 1.6;
padding: 0 0 0 40px;
margin: 20px 0;
}
body.page .real-content,
body.attachment .real-content{
margin-top: 0;
padding-left: 0;
}
.real-content p{
margin: 1em 0;
}
.contact-page .real-content > p:first-child{
margin-top: 0;
}
.real-content img{
height: auto;
max-width: 100%;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.lt-ie9 .real-content img{
max-width: none;
}
.real-content a:hover img,
.wp-caption:hover,
.post-media:hover img{
border-radius: 10px;
-webkit-border-radius: 10px;
}
.post-video{
padding: 10px 0;
}
.post-media iframe,
.real-content iframe,
.flexslider iframe{
border: none;
display: block;
/*height: auto;*/ /* making issues with to small height */
margin: 0 auto;
max-width: 100%;
}
.more-link{
background: #ea4f3b url(images/nav-arr.gif) 0 -47px no-repeat;
border-radius: 3px;
-webkit-border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 14px;
line-height: 24px;
padding: 0 10px 0 20px;
text-transform: uppercase;
}
.more-link:hover{
background-color: #747474;
color: #fff;
}
#page-links{
margin-bottom: 20px;
padding-left: 40px;
}
body.page #page-links{
padding-left: 0;
}
.password-form input[type="submit"]{
display: inline-block;
vertical-align: top;
}
/* POST FORMATS*/
div.format-status .real-content,
div.format-aside .real-content{
margin-top: 16px; /* better fit of icon */
min-height: 24px; /* icon size */
}
body.blog div.format-status .post-title,
body.blog div.format-aside .post-title,
body.archive div.format-status .post-title,
body.archive div.format-aside .post-title{
display: none;
}
span.cite-author{
color: #ababab;
display: block;
font-size: 14px;
margin: 0 0 20px 40px;
}
div.chat strong.who{
margin-right: 5px;
}
/* MASONRY STYLE */
/* for full width */
body.full-width #content .inside{
width: auto;
}
body.full-width #masonry-parent{
margin: 0 auto;
}
.js #masonry-parent{
visibility: hidden;
}
.js #masonry-parent.loaded{
visibility: visible;
}
.js #masonry-parent + div.navigation{
display: none;
}
.js #masonry-parent.loaded + div.navigation{
display: block;
}
.brick{
float: left;
margin: 0 10px 20px 10px;
width: 310px;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.masonry .brick{
position: absolute; /* webkit ignores setting 'top' without it */
}
.masonry .brick.ready {
-webkit-transition-property: left, right, top, opacity;
-moz-transition-property: left, right, top, opacity;
-ms-transition-property: left, right, top, opacity;
-o-transition-property: left, right, top, opacity;
transition-property: left, right, top, opacity;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
left: 50%; /* start point of transition */
}
.brick h2.post-title{
font-size: 26px;
}
/** ABOUT AUTHOR */
.about-author{
border-top: 1px solid #EFEFEF;
margin: 20px 0 0 40px;
padding: 20px 0 0;
}
.about-author .avatar{
border-radius: 25px;
-webkit-border-radius: 25px;
float: left;
line-height: 1.1;
}
.author-inside{
border: 1px solid #e0e0e0;
border-radius: 3px;
-webkit-border-radius: 3px;
margin-left: 70px;
padding: 20px;
position: relative;
}
.author-name{
display: block;
margin: 0 0 15px;
}
.author-name a{
font-weight: normal;
}
.author-inside:after{
content: "";
background: transparent url(images/author.png) 0 0 no-repeat;
height: 54px;
position: absolute;
top: -1px;
right: -1px;
width: 54px;
}
/* =============================================================================
SIDEBAR & WIDGETS
========================================================================== */
#content aside{
background-color: #fff;
border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 1px 1px 0 rgba(0,0,0, 0.10);
float: right;
padding: 30px;
width: 260px;
}
#content aside.flat-look{
border-radius: 0;
-webkit-border-radius: 0;
box-shadow: none;
}
.widget{
border-top: 1px solid #ECECEC;
margin-top: 30px;
padding-top: 30px;
}
.widget:first-child{
border-top: none;
margin-top: 0;
padding-top: 0;
}
.widget h3.title{
font-size: 16px;
font-weight: bold;
line-height: 1.2em;
margin: -4px 0 20px;
padding: 0;
text-transform: uppercase;
}
.widget ul{
font-size: 14px;
}
/* RECENT/POPULAR/RELATED POSTS WIDGET */
.widget_about_posts .item{
font-size: 14px;
margin: 20px 0 0;
}
.widget_about_posts .first-item{
margin-top: 0;
}
.widget_about_posts .item.full{
min-height: 50px;
}
.widget_about_posts .post-info{
border: none;
padding: 0;
}
.widget_about_posts .post-title{
display: block;
}
.widget_about_posts .full .thumb{
float: left;
height: 50px;
width: 50px;
}
.widget_about_posts .full .post-info,
.widget_about_posts .full .post-title{
margin-left: 70px;
}
.widget_about_posts .content{
clear: both;
display: block;
padding-top: 5px;
}
.widget_about_posts .post-info a.date{
margin-right: 9px;
}
.widget_about_posts .post-info a.comments{
background: transparent url(images/icons.png) 0 -116px no-repeat;
padding-left: 17px;
}
.widget_about_posts .item:hover img{
border-radius: 25px;
-webkit-border-radius: 25px;
}
/* RECENT COMMENTS WIDGET */
.widget_recent_comments{
font-size: 14px;
}
.widget_recent_comments .item{
background: transparent url(images/icons.png) 1px -114px no-repeat;
font-size: 14px;
line-height: 1.5em;
margin: 16px 0 0;
padding-left: 20px;
}
.widget_recent_comments .first-item{
margin-top: 0;
}
.widget_recent_comments .post-title{
display: inline;
}
.widget_recent_comments .content{
display: block;
}
/* RSS WIDGET */
h3 a.rsswidget{
display: inline;
}
.rsswidget img{
margin-top: -2px;
}
/* TAG CLOUD WIDGET */
.widget_tag_cloud h3.title{
margin-bottom: 10px;
}
.widget_tag_cloud a{
background: transparent url(images/icons.png) -17px -85px no-repeat;
border: 1px solid #dadada;
border-radius: 3px;
-webkit-border-radius: 3px;
display: inline-block;
font-size: 14px !important; /* tag cloud insert inline font-size style */
margin: 10px 6px 0 0;
padding: 0 7px 0 25px;
text-transform: uppercase;
}
/* ALBUMS WIDGET */
.widget_recent_albums > div{
margin: -6px 0 0 -6px;
}
.widget_recent_albums > div:hover a{
opacity: 0.5;
filter: alpha(opacity=50);
}
.widget_recent_albums > div a:hover{
opacity: 1;
filter: alpha(opacity=100);
}
.widget_recent_albums > div a:hover img{
border-radius: 63px;
-webkit-border-radius: 63px;
}
.widget_recent_albums .item{
float: left;
height: 127px;
margin: 6px 0 0 6px;
width: 127px;
}
.widget_recent_albums .item img{
max-height: 100%;
max-width: 100%;
}
/* CALENDAR WIDGET */
#wp-calendar{
font-size: 14px;
width: 100%;
}
#wp-calendar caption{
padding-bottom: 10px;
}
#wp-calendar td{
text-align: center;
}
#wp-calendar tfoot td{
padding-top: 10px;
}
#wp-calendar tfoot td#prev{
text-align: left;
}
#wp-calendar tfoot td#next{
text-align: right;
}
/* TEXT WIDGET */
.textwidget{
font-size: 14px;
line-height: 1.5em;
}
.textwidget > p:first-child{
margin-top: 0;
}
/* GOOGLE MAP WIDGET */
#SGM{
height: 400px;
width: 100%;
}
/* TWITTER WIDGET */
.tweet{
background: transparent url(images/icons.png) -90px -23px no-repeat;
font-size: 14px;
line-height: 1.5em;
margin: 20px 0 0;
padding-left: 20px;
}
.tweet_first{
margin-top: 0;
}
.twitter_widget p.content{
margin: 0;
}
/* FLICKR WIDGET */
.widget_quick-flickr-widget{
overflow: hidden; /* clear */
}
.widget_quick-flickr-widget a:hover img{
border-radius: 29px;
-webkit-border-radius: 29px;
}
.quick-flickr-item{
float: left;
height: 59px;
margin: 6px 0 0 6px;
width: 59px;
}
.quick-flickr-item a{
display: block;
height: 100%;
width: 100%;
}
.quick-flickr-item img{
height: 100%;
max-height: 100%;
max-width: 100%;
}
/* =============================================================================
PAGINATION & WP-PAGINATE PLUGIN
========================================================================== */
.navigation{
margin-top: 30px;
text-align: center;
text-transform: uppercase;
}
.navigation.lazy{
padding-bottom: 20px;
}
.navigation a,
.navigation span.current{
background-color: #fff;
border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 1px 1px 0 rgba(0,0,0, 0.10);
display: inline-block;
height: 24px;
line-height: 24px;
margin: 0 0 10px 10px;
min-width: 14px;
padding: 0 5px;
}
.navigation > a.current,
.navigation span.current,
.navigation > a:hover{
background-color: #3b3b3b;
color: #fff;
}
.navigation span{
box-shadow: 1px 1px 0 rgba(0,0,0, 0.10);
display: inline-block;
margin: 0 0 10px 10px;
}
.nav-previous a,
.nav-next a{
background-image: url(images/nav-arr.gif);
background-repeat: no-repeat;
background-position: 0 9px;
box-shadow: none;
margin: 0;
padding: 0 10px;
}
span.nav-previous{ margin-left: 0; }
.nav-previous a{ padding-left: 20px; }
.nav-next a{ background-position: 100% -22px; padding-right: 20px; }
.wp-paginate{
list-style-type: none;
margin: 0;
padding: 0;
}
.wp-paginate li{
display: inline-block;
}
.wp-paginate span.title,
.wp-paginate span.gap{
box-shadow: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}
/* =============================================================================
COMMENTS
========================================================================== */
.comments-area{
/* almost no styles cause when no comments
* then comment form area takes over styling
*/
padding-left: 40px;
}
.comments-area h3{
font-size: 20px;
line-height: 24px;
margin: 0;
position: relative;
text-transform: uppercase;
}
#comments-title{
border-top: 1px solid #EFEFEF;
margin: 20px 0 30px;
padding: 30px 0 0;
}
#comments-title:before{
content: "";
background-position: 50% -240px;
top: 30px;
left: -40px;
}
.comment{
margin: 20px 0 0;
min-height: 50px;
}
.comment .comment{
margin-left: 70px;
}
/* above 3rd level no indent */
.comment .comment .comment .comment{
margin-left: 0;
}
.comment-inside{
border: 1px solid #e0e0e0;
border-radius: 3px;
-webkit-border-radius: 3px;
margin-left: 70px;
padding: 20px;
position: relative;
}
.comment-inside:after,
.comment-inside:before{
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
border-right: 4px dashed #e0e0e0; /* dashed - to fix bug with dark lines in FF */
content: "";
height: 3px;
position: absolute;
top: 22px;
left: -5px;
}
.lt-ie9 .comment-inside:after,
.lt-ie9 .comment-inside:before{
border-right-style: solid;
}
.comment-inside:after{
border-right-color: #fff;
left: -4px;
}
a.avatar{
position: absolute;
top: 0;
left: -71px;
}
.avatar img{
border-radius: 25px;
-webkit-border-radius: 25px;
display: block;
}
.comment-info{
font-size: 14px;
line-height: 1.1;
margin: 0 0 15px;
}
.comment-info .author{
font-weight: bold;
}
.comment-info a.comment-reply-link{
border-left: 1px solid #f5f5f5;
margin: 0 0 0 8px;
padding: 0 0 0 8px;
}
.comment-text{
font-size: 14px;
word-wrap: break-word;
}
.bypostauthor > .comment-inside{
background: transparent url(images/author_pattern.gif) 0 0 repeat;
}
.bypostauthor{
position: relative;
}
.bypostauthor:after{
content: "";
background: transparent url(images/author.png) 0 0 no-repeat;
height: 54px;
position: absolute;
top: 0;
right: 0;
width: 54px;
}
.bypostauthor .comment-info{
padding-right: 45px;
}
em.comment-awaiting-moderation{
border-bottom: 1px dashed;
}
.comment-text p{
margin: 1em 0 0;
}
.comment-text > p:first-child{
margin-top: 0;
}
/********/
/* ADD COMMENT FORM */
#respond{
border-top: 1px solid #EFEFEF;
margin: 30px 0 0;
padding: 30px 0 0;
}
#respond:first-child{
margin-top: 20px;
}
.comment #respond{
border-top: none;
margin-left: 70px;
padding-top: 0;
}
#reply-title:before{
content: "";
background-position: 50% -264px;
top: 0;
left: -40px;
}
#reply-title small a{
border-left: 1px solid #f5f5f5;
color: #707070;
display: inline;
font-weight: normal;
margin-left: 8px;
padding-left: 8px;
text-transform: none;
}
#commentform p,
.message-form p{
margin: 0 0 12px;
}
#commentform p.form-submit,
.message-form p.form-submit{
margin-bottom: 0;
}
#respond .info,
.message-form .info{
font-size: 12px;
float: right;
line-height: 30px;
}
.error-info,
.submit-info{
background-color: #ccc;
color: #92070c;
font-size: 12px;
font-weight: bold;
line-height: 20px;
margin: 0 0 5px;
text-align: center;
}
.error-info{
opacity: 0;
filter: alpha(opacity=0);
}
/* captcha plugin */
.cptch_block{
font-size: 13px;
}
.cptch_block br{
display: none;
}
.cptch_block label{
font-size: 13px;
display: block;
margin-bottom: 5px;
}
.cptch_block input[type="text"]{
width: 40px !important;
text-align: center;
}
/* =============================================================================
ATTACHMENT
========================================================================== */
p.attachment img{
display: block;
margin: 0 auto;
}
/* =============================================================================
CONTACT PAGE
========================================================================== */
body.page-template-contact-php .page-title{
}
.contact-page .message-form{
border-top: 1px solid #ECECEC;
margin: 0;
max-width: 600px;
padding: 25px 0 0;
}
.contact-page .message-form{
padding-top: 0;
}
/* =============================================================================
SITEMAP/404 PAGE
========================================================================== */
.title-404{
font-size: 20px;
}
/* =============================================================================
ALBUMS LIST
========================================================================== */
.albums-list-page #mid{
padding: 0;
}
#content.albums-list{
background-color: transparent;
overflow: hidden;
padding: 0;
position: absolute;
top: 50%;
left: 0;
right: 0;
width: auto;
}
#content.albums-list.bricks-theme{
position: relative;
top: 0;
}
.albums{
height: 400px;
width: 15000px;
}
.albums .item{
float: left;
position: relative;
}
.albums .active{
cursor: pointer;
z-index: 10;
}
.albums img{
display: block;
}
.albums .active img{
border: 6px solid #fff;
}
.albums .item h2,
.albums .brick h2{
color: #fff;
font-size: 14px;
margin: 0;
padding: 24px 0;
opacity: 0;
overflow: visible !important; /* for animations */
position: absolute;
top: 50%;
text-align: center;
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;
width: 100%;
}
.lt-ie9 .albums .item h2,
.lt-ie9 .albums .brick h2{
display: none;
}
.albums .item h2 a,
.albums .brick h2 a{
color: #fff;
display: block;
outline: none; /* focus border is unnecessary here */
position: absolute;
top: -50%;
width: 100%;
}
.albums .cover{
background: url(images/album_bg.png) 0 0 repeat;
background-color: rgba(0,0,0,0.5); /* break for fallback */
height: 100%;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.lt-ie9 .albums .cover{
background-color: #000;
}
.albums .active .cover,
.albums .loaded:hover .cover,
.albums .active h2,
.albums .loaded:hover h2,
.no-js .albums .item:hover h2{
opacity: 1;
}
.lt-ie9 .albums .active .cover,
.lt-ie9 .albums .loaded:hover .cover{
filter: alpha(opacity=80);
}
.lt-ie9 .albums .active h2,
.lt-ie9 .albums .loaded:hover h2{
display: block;
}
.arrow-left,
.arrow-right{
background-color: rgba(0,0,0,0.5);
border-radius: 3px;
-webkit-border-radius: 3px;
cursor: pointer;
height: 50px;
margin-top: -25px;
position: absolute;
top: 50%;
left: 0;
width: 50px;
z-index: 12; /* active album was p arrows */
}
.arrow-left:after,
.arrow-right:after{
content: "";
background: transparent url(images/album_icons.png) 0 0 no-repeat;
height: 50px;
position: absolute;
top: 0;
left: 0;
width: 50px;
}
.arrow-right:after{
background-position: 100% -50px;
left: auto;
right: 0;
}
.arrow-right{
background-position: 100% -50px;
left: auto;
right: 0;
}
.arrow-left:hover{
background: #000 url(images/album_icons.png) -10px 0 no-repeat;
}
.arrow-right:hover{
background: #000 url(images/album_icons.png) 10px -50px no-repeat;
}
.lt-ie9 .arrow-left,
.lt-ie9 .arrow-right{
background-color: rgb(0,0,0);
}
#albums-view-bricks{
padding-bottom: 30px; /* footer height */
}
/* ALBUMS FILTER */
#albums-filter{
background-color: #fff;
box-shadow: 0 0 3px rgba(0,0,0, 0.30);
border-radius: 3px;
-webkit-border-radius: 3px;
margin: 0;
padding: 0;
min-height: 25px;
font-size: 14px;
list-style-type: none;
overflow: hidden;
position: absolute;
top: 10px;
left: 10px;
z-index: 150;
}
#albums-filter li{
border-left: 1px solid #CECECE;
float: left;
}
#albums-filter li.selected{
background-color: #F5F5F5;
}
#albums-filter a,
#albums-filter li.label{
cursor: pointer;
display: block;
padding: 0 10px;
color: #000;
line-height: 25px;
white-space: nowrap;
}
.js #albums-filter li{ display: none; }
.js #albums-filter li.label{ display: block; }
#albums-filter li.label{
border: none;
}
#albums-filter li:hover{
background-color: #F5F5F5;
}
/* NO JS AVAILABLE */
.no-js .albums{
height: auto;
width: 100%;
overflow: hidden;
}
.no-js .albums .brick{
position: relative;
}
.no-js .bricks-album,
.no-js .albums img{
visibility: visible !important;
}
.no-js .albums-list-page .arrow-left,
.no-js .albums-list-page .arrow-right{
display: none;
}
/* =============================================================================
SINGLE ALBUM & SUPERSIZED
========================================================================== */
body.single-album #mid{
z-index: -100;
}
body.album-fully-visible #mid{
z-index: 100;
padding: 0;
}
body.bricks-theme #mid,
body.album-protected #mid{
z-index: auto;
}
/* protected album form*/
body.album-protected #mid article{
margin: 100px 0 0 -235px;
max-width: 450px;
padding: 20px;
position: absolute;
left: 50%;
top: 0;
}
body.album-protected #mid .password-form{
text-align: center;
}
#album-loader{
background: url(images/spinner.gif) 50% 50% no-repeat;
height: 40px;
margin: -20px 0 0 -20px;
position: absolute;
top: 50%;
left: 50%;
width: 40px;
z-index: 0;
}
#album-view{
display: block;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: -999;
}
#album-view img{
border: none;
display: none;
height: auto;
outline: none;
position: relative;
width: auto;
transform: translate3d(0,0,0);
}
#album-view li{
display: block;
list-style: none;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
z-index: -30;
}
#album-view a {
display: block;
height: 100%;
width: 100%;
}
#album-view li.prevslide {
z-index: -20;
}
#album-view li.activeslide{
z-index: -10;
}
#album-view li.image-loading {
background: transparent url(images/spinner.gif) no-repeat center center;
height: 100%;
width: 100%;
}
#album-view li.image-loading img{
visibility: hidden;
}
#album-view li.prevslide img,
#album-view li.activeslide img{
display:block; /* was inline */
}
#album-view li iframe{
border: none;
width: 100%;
height: 100%;
}
#album-view .pattern{
background-image: url(images/patterns/pattern.png);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
/* Controls
----------------------------*/
.load-item{
visibility: hidden;
}
#album-things{
background-color: #000;
position: absolute;
bottom: 100%;
left: 0;
width: 100%;
}
#tray-button{
background: transparent url(images/controlls.png) 50% -197px no-repeat;
cursor: pointer;
height: 30px;
margin-left: -10px;
position: absolute;
bottom: -30px;
left: 50%;
width: 20px;
}
#tray-button:after{
content: "";
border-bottom: 5px dashed #000;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
height: 0;
margin-left: -5px;
position: absolute;
top: -5px;
left: 50%;
width: 2px;
z-index: 5;
}
#tray-button.active, #tray-button:hover{
background-position: 50% -154px;
}
.controls #play-button{
background: url("images/controlls.png") 100% 11px no-repeat;
cursor: pointer;
float: right;
line-height: 30px;
padding-right: 22px;
}
.controls #play-button.pause{
background-position: 100% -26px;
}
.prev-parent, .next-parent{
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.2), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0.2), rgba(0,0,0,0)); /* For Fx 3.6 to Fx 15 */
background-image: -ms-linear-gradient(left, rgba(0,0,0,0.2), rgba(0,0,0,0)); /* For IE 10 Platform Previews and Consumer Preview */
background-image: -o-linear-gradient(left, rgba(0,0,0,0.2), rgba(0,0,0,0)); /* For Opera 11.1 to 12.0 */
background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0)); /* Standard syntax; must be the last statement */
height: 280px;
margin: -140px 0 0;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 50%;
left: 0;
width: 25%;
}
.next-parent{
background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.2), rgba(0,0,0,0));
background-image: -moz-linear-gradient(right, rgba(0,0,0,0.2), rgba(0,0,0,0)); /* For Fx 3.6 to Fx 15 */
background-image: -ms-linear-gradient(right, rgba(0,0,0,0.2), rgba(0,0,0,0)); /* For IE 10 Platform Previews and Consumer Preview */
background-image: -o-linear-gradient(right, rgba(0,0,0,0.2), rgba(0,0,0,0)); /* For Opera 11.1 to 12.0 */
background-image: linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0)); /* Standard syntax; must be the last statement */
left: auto;
right: 0;
}
.lt-ie10 .prev-parent, .lt-ie10 .next-parent{
background-color: rgba(0,0,0,0.1);
}
.prev-parent:hover, .next-parent:hover{
opacity: 1;
filter: alpha(opacity=100);
}
.lt-ie9 .prev-parent, .lt-ie9 .next-parent{
background-color: #000;
}
.lt-ie9 .prev-parent:hover, .lt-ie9 .next-parent:hover{
filter: alpha(opacity=10);
}
body.single-album #prevslide{
display: none;
padding-left: 50px;
}
body.single-album #nextslide{
display: none;
padding-right: 50px;
}
body.single-album #prevslide:hover,
body.single-album #nextslide:hover{
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
-wbekit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
}
body.single-album #nextslide:hover{
background-position: 120% -50px; /* Look out for % when background position */
}
.prev-parent:hover #prevslide,
.next-parent:hover #nextslide{
display: block;
}
span.slides-count{
background: transparent url(images/album_icons.png) 0 -100px no-repeat;
color: #fff;
display: block;
font-size: 12px;
height: 34px;
line-height: 14px;
padding: 8px;
width: 34px;
}
span.slides-count span{
display: block;
height: 17px;
text-align: left;
}
span.slides-count span.of{
padding-top: 3px; /* height - line-height */
text-align: right;
}
#prev-thumb, #next-thumb{
background: transparent 50% 0 no-repeat;
background-size: cover;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
display: none;
height: 100px;
position: absolute;
top: 100%;
left: 0;
width: 100px;
}
body.single-album .arrow-left:hover #prev-thumb{
display: block;
}
body.single-album .arrow-right:hover #next-thumb{
display: block;
}
#album-controls{
display: none;
height: 30px;
margin-left: -50px;
position: absolute;
left: 50%;
bottom: 0;
width: 100px;
z-index: 205; /*above footer */
}
#album-controls.active{
display: block;
}
#album-controls #play-button,
#album-controls #nextslide,
#album-controls #prevslide{
background: transparent url(images/controlls.png) 0 0 no-repeat;
cursor: pointer;
float: left;
height: 30px;
opacity: 0.6;
/* no IE opacity cause of PNG + opacity bug */
width: 30px;
}
#album-controls #play-button:hover,
#album-controls #nextslide:hover,
#album-controls #prevslide:hover{
opacity: 1;
/* no IE opacity cause of PNG + opacity bug */
}
#album-controls #play-button{
background-position: 11px 10px;
margin-left: 5px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
#album-controls #play-button.pause{
background-position: 11px -26px;
}
#album-controls #nextslide{
background-position: 50% -287px;
margin-left: 5px;
}
#album-controls #prevslide{
background-position: 50% -245px;
}
#big-play{
background: transparent url(images/big-play.png) 50% 50% no-repeat;
height: 100px;
margin: -50px 0 0 -50px;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
}
#big-play.play{
background-position: 100% 0;
background-size: 200% 100%;
}
#big-play.pause{
background-position: 0 0;
background-size: 200% 100%;
}
.lt-ie9 #big-play{
height: 50px;
margin: -25px 0 0 -25px;
width: 50px;
}
.lt-ie9 #big-play.play{
background-position: 100% 50%;
}
.lt-ie9 #big-play.pause{
background-position: 0 50%;
}
/* Progress Bar
----------------------------*/
#progress-back{
background-color: transparent;
height: 1px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 5;
}
#progress-bar{
background-color: #bbb;
height: 1px;
width: 0;
}
/* Slide links
----------------------------*/
#text-controls{
margin: 0 auto;
position: relative;
max-width: 940px;
}
#slide-list{
list-style: none;
margin: 0;
max-width: 50%;
padding: 0;
position: absolute;
bottom: 20px;
right: 0;
z-index: 2;
}
#slide-list li{
background-color: rgba(0,0,0,0.5);
border-radius: 3px;
-webkit-border-radius: 3px;
cursor: pointer;
float: left;
font-weight: bold;
height: 20px;
line-height: 20px;
margin: 0 0 1px 1px;
min-width: 14px;
padding: 0 3px;
text-align: center;
}
#slide-list li .thumb{
background: rgba(0,0,0,0.9) 50% 0 no-repeat;
background-size: cover;
border: 3px solid #050505;
border-radius: 3px;
-webkit-border-radius: 3px;
cursor: pointer;
display: none;
height: 100px;
margin-left: -53px;
position: absolute;
bottom: 30px;
left: 50%;
width: 100px;
}
.lt-ie9 #slide-list li,
.lt-ie9 #slide-list li .thumb{
background-color: #000;
}
#slide-list li .thumb:after{
content: "";
border-top: 5px dashed #050505;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
height: 0;
margin-left: -5px;
position: absolute;
bottom: -8px;
left: 50%;
width: 2px;
}
#slide-list li:hover .thumb{
display: block;
}
#slide-list li.current-slide,
#slide-list li:hover{
background-color: rgba(0,0,0,0.9);
position: relative;
}
#slide-list a{
color: #d0d0d0;
}
#slide-list li.current-slide a,
#slide-list li:hover a{
color: #fff;
}
/* Thumbnail Tray
----------------------------*/
#other-albums{
background-color: #000;
font-size: 16px;
padding: 5px 20px;
position: absolute;
bottom: 100px;
left: 0;
right: 0;
text-align: center;
}
#other-albums a{
font-weight: bold;
margin: 0 10px;
}
#thumb-tray{
height: 100px;
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 3;
}
#thumb-tray.nomove .arrow-left,
#thumb-tray.nomove .arrow-right{
display: none;
}
#thumb-tray .cover{
background-color: #000;
opacity: 0.85;
filter: alpha(opacity=85);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#thumb-tray .inner{
background-color: #000;
height: 100%;
position: absolute;
width: 100%;
}
#thumb-list{
display: block;
list-style: none;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
left: 0;
}
#thumb-list li{
cursor: pointer;
float: left;
height: 100%;
overflow: hidden;
width: 150px;
}
#thumb-list li img{
background: url(images/spinner.gif) 50% 50% no-repeat;
height: 100%;
max-height: 100%;
max-width: 100%;
width: 100%;
}
ul#thumb-list li:before{
content: "";
background: rgba(0,0,0,0.5) url(images/album_bg.png) 0 0 repeat;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
visibility: hidden;
}
ul#thumb-list li:after{
content: "";
background: transparent url(images/album_icons.png) 0 -300px no-repeat;
height: 50px;
margin: -25px 0 0 -25px;
position: absolute;
top: 50%;
left: 50%;
width: 50px;
visibility: hidden;
}
ul#thumb-list li:hover{
position: relative;
}
ul#thumb-list li:hover:before,
ul#thumb-list li:hover:after{
visibility: visible;
}
/*ADD ONS*/
#slide-text{
background: url(images/album_bg.png) 0 0 repeat;
background-color: rgba(0,0,0,0.5); /* break for fallback */
color: #cecece;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 2;
}
#slide-text .inner{
margin: 0 auto;
min-height: 32px; /* X mark size */
padding: 30px 60px 40px 0;
position: relative;
max-width: 880px;
}
#slide-text .caption{
color: #fff;
font-size: 48px;
font-weight: bold;
line-height: 1.1;
margin: 0 0 20px;
}
#slide-text .descpription{
font-size: 16px;
line-height: 1.3;
margin: 0 0 20px;
text-transform: none;
}
#show-text{
background: url(images/controlls.png) 100% -434px no-repeat;
background-color: rgba(0,0,0,0.5); /* break for fallback */
border-radius: 3px;
-webkit-border-radius: 3px;
cursor: pointer;
font-size: 12px;
font-weight: bold;
height: 20px;
line-height: 20px;
max-width: 50%;
overflow: hidden;
padding: 0 16px 0 4px;
position: absolute;
bottom: 20px;
left: 0;
text-overflow: ellipsis;
white-space: nowrap;
z-index: 2;
}
.lt-ie9 #show-text,
.lt-ie9 #slide-text{
background-color: #000;
filter: alpha(opacity=85);
}
#close-text{
background: transparent url(images/album_icons.png) -9px -159px no-repeat;
cursor: pointer;
height: 32px;
position: absolute;
top: 40px;
right: 0;
width: 32px;
}
.album-icons{
display: none;
height: 50px;
margin: -75px 0 0 -115px;
padding: 50px 0;
position: absolute;
top: 50%;
left: 50%;
text-align: center;
width: 230px;
}
.album-icons.active{
display: block;
opacity: 0;
filter: alpha(opacity=0);
zoom: 1;
}
.album-icons.active:hover{
opacity: 1;
filter: alpha(opacity=100);
}
.lt-ie9 .album-icons.active{
background-color: #fff;
}
.lt-ie9 .album-icons.active:hover{
background-color: #fff;
filter: alpha(opacity=70);
}
.album-icons > a,
.album-icons > div{
background: url(images/album_icons.png) 0 -200px no-repeat;
background-color: rgba(0,0,0,0.5); /* break for fallback */
border-radius: 3px;
-webkit-border-radius: 3px;
cursor: pointer;
display: inline-block;
/*float: left;*/
height: 50px;
margin-left: 7px;
width: 50px;
}
.album-icons > a:hover,
.album-icons > div:hover{
background-color: rgba(0,0,0,0.9);
}
.lt-ie9 .album-icons > a,
.lt-ie9 .album-icons > div{
background-color: #000;
filter: alpha(opacity=0);
}
.lt-ie9 .album-icons:hover > a,
.lt-ie9 .album-icons:hover > div{
filter: alpha(opacity=100);
}
.album-icons > a:first-child{
margin-left: 0;
}
.album-icons > a.like-ico{ background-position: 0 -250px; }
.album-icons > a.link-ico{ background-position: 0 -400px; }
.like-ico, .like-ico:hover{
color: #fff;
font-size: 12px;
line-height: 70px;
text-align: center;
text-shadow: 1px 1px 1px #000;
}
.album-icons > div.share-ico{
background-position: 0 -450px;
position: relative;
}
#addthis-toolbox{
background-color: rgba(0,0,0,0.9);
border-radius: 3px;
-webkit-border-radius: 3px;
margin-left: -65px;
padding: 5px 0;
position: absolute;
top: 60px;
left: 50%;
visibility: hidden;
width: 130px;
}
.share-ico.active #addthis-toolbox{
visibility: visible;
}
#addthis-toolbox:after{
content: "";
border-bottom: 5px dashed rgba(0,0,0,0.9);
border-left: 4px solid transparent;
border-right: 4px solid transparent;
height: 0;
margin-left: -5px;
position: absolute;
top: -5px;
left: 50%;
width: 2px;
z-index: 5;
}
#addthis-toolbox > a{
float: left;
margin-left: 5px;
}
.bricks-album{
margin: 0 auto;
visibility: hidden;
}
.bricks-album.loaded{
visibility: visible;
}
.bricks-album .brick{
cursor: pointer;
float: left;
height: 200px;
margin: 0;
width: 300px;
}
.bricks-album .brick > a,
.bricks-album .brick img{
display: block;
height: auto;
width: 100%;
}
.bricks-album .brick > a{
outline: none;
position: relative;
}
.bricks-album .brick h2{
font-size: 24px;
padding: 20px 0;
}
.bricks-album .brick .cov{
background: rgba(0,0,0,0.5) url(images/album_bg.png) 0 0 repeat;
}
#albums-view-bricks em.cov:after{
display: none; /* no icon */
}
.bricks-album .brick:hover .cov,
.bricks-album .brick:hover h2,
.bricks-album .brick.touched .cov,
.bricks-album .brick.touched h2{
border-radius: 0;
-webkit-border-radius: 0;
opacity: 1;
}
.lt-ie9 .albums .brick:hover h2{
display: block;
}
.lt-ie9 .bricks-album .brick:hover .cov{
background: #000 url(images/album_bg.png) 0 0 repeat;
filter: alpha(opacity=80);
}
.bricks-album .brick .video:after{
content: "";
background: rgba(0,0,0,0.5) url(images/album_icons.png) 0 -350px no-repeat;
border-radius: 3px;
-webkit-border-radius: 3px;
height: 50px;
margin: -25px 0 0 -25px;
position: absolute;
top: 50%;
left: 50%;
width: 50px;
}
.bricks-album .brick .video .cov:after{
display: none;
}
.lt-ie9 .bricks-album .brick .video .cov:after{
background: #000 url(images/album_icons.png) 0 -350px no-repeat;
display: block;
}
.brick-social{
position: absolute;
top: 5px;
right: 3px;
visibility: hidden;
}
.brick:hover .brick-social,
.brick.touched .brick-social{
visibility: visible;
}
.brick-social a{
display: inline-block;
margin-right: 2px;
}
/* Touch devices controls */
html.touch #prev-thumb, html.touch #next-thumb,
html.touch span.slides-count{
display: none!important;
}
html.touch .prev-parent, html.touch .next-parent{
background-image: none;
height: 50px;
margin-top: -25px;
opacity: 1;
width: 50px;
}
html.touch body.single-album #nextslide,
html.touch body.single-album #prevslide{
border-radius: 3px!important;
display: block;
padding: 0;
}
html.touch body.single-album #nextslide:hover{
background-position: 10px -50px; /* Look out for % when background position */
}
/* SEO Album */
.js .seo-album{
visibility: hidden;
height: 100px;
width: 100px;
overflow: hidden;
position: absolute;
z-index: -50;
}
.seo-album .brick{
max-width: 100%;
}
.seo-album .brick > a,
.seo-album .brick > em{
display: block;
}
/* =============================================================================
SHORT CODES
========================================================================== */
/***** for light box */
div.gallery{
clear: both;
}
.alpha-scope{
display: block;
max-width: 100%;
position: relative;
}
em.cov{
background-color: #000;
display: block;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
em.cov:after{
content: "";
background: transparent url(images/add-ons.png) 8px -60px no-repeat;
border: none;
height: 34px;
margin: -17px 0 0 -17px;
position: absolute;
top: 50%;
left: 50%;
width: 34px;
}
.alpha-scope:hover{
border-radius: 10px;
-webkit-border-radius: 10px;
}
em.cov:hover{
border-radius: 10px;
-webkit-border-radius: 10px;
opacity: 0.8;
filter: alpha(opacity=80);
}
.alpha-scope img{
display: block;
}
div.gallery{
margin: 1em auto;
line-height: 0;
text-align: center;
}
div.gallery a{
display: inline-block;
margin: 5px;
}
/***** columns */
.left50{
width: 47%;
float: left;
margin-right: 3%;
}
.right50{
width: 47%;
float: left;
margin-left: 3%;
}
.left33, .right33{
width: 30%;
float: left;
}
.left66, .right66{
width: 66%;
float: left;
}
.left66{ margin-right: 3%; }
.right66{ margin-left: 3%; }
.center33{
width: 30%;
float: left;
margin: 0 5%;
}
.left25, .right25{
width: 21%;
float: left;
}
.right25{
margin-left: 5%
}
.center25{
width: 21%;
float: left;
margin: 0 0 0 5%;
}
.left20, .right20{
width: 15%;
float: left;
}
.right20{
margin-left: 6%
}
.center20{
width: 15%;
float: left;
margin: 0 0 0 6%;
}
div.line{
border: none;
border-bottom: 1px solid #f2f2f2;
height: 0;
line-height: 0;
font-size: 0;
margin: 20px 0 20px;
}
.a13-dropcap {
font-size: 400%;
float: left;
line-height: 0.8em;
padding: 0 2px 0 0;
font-weight: bold;
position: relative;
left: -3px;
}
/* highlight */
.a13-highlight.yellow{
background-color: #ffff00;
color: #000;
}
.a13-highlight.black{
background-color: #000;
color: #fff;
}
.a13-highlight.white{
background-color: #fff;
color: #000;
}
.a13-highlight.grey{
background-color: #808080;
color: #fff;
}
/* buttons*/
a.a13-button{
border: none;
border-radius: 3px;
-webkit-border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 14px;
font-weight: normal;
height: 30px;
line-height: 30px;
padding: 0 22px;
text-transform: uppercase;
}
a.a13-button.blue{
background-color: #1b7bcc;
}
a.a13-button.red{
background-color: #be2828;
}
a.a13-button.green{
background-color: #54b414;
}
a.a13-button.orange{
background-color: #ed9d2b;
}
a.a13-button.grey{
background-color: #505050;
}
a.a13-button:hover{
background-color: #747474;
}
a.a13-button.default{
border: 1px solid #d1d1d1;
color: #535353;
height: 28px;
line-height: 28px;
background-color: #fff; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(top, #eee, #fff);
background-image: -moz-linear-gradient(top, #eee, #fff); /* For Fx 3.6 to Fx 15 */
background-image: -ms-linear-gradient(top, #eee, #fff); /* For IE 10 Platform Previews and Consumer Preview */
background-image: -o-linear-gradient(top, #eee, #fff); /* For Opera 11.1 to 12.0 */
background-image: linear-gradient(to bottom, #eee, #fff); /* Standard syntax; must be the last statement */
}
a.a13-button.default:hover{
background-color: #eee; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(top, #fff, #eee);
background-image: -moz-linear-gradient(top, #fff, #eee);
background-image: -ms-linear-gradient(top, #fff, #eee);
background-image: -o-linear-gradient(top, #fff, #eee);
background-image: linear-gradient(to bottom, #fff, #eee);
}
/***** lists */
.real-content ul,
.real-content ol,
.widget ul{
border-bottom: 1px dotted #dfdfdf;
list-style-type: none;
margin: 1em 0;
padding: 0;
}
.real-content ol{
list-style-type: decimal;
list-style-position: inside;
}
.real-content ul ul,
.real-content ol ol,
.widget ul ul{
border-bottom: none;
margin: 0.25em 0 0;
}
.real-content ul li,
.real-content ul li li:first-child,
.real-content ol li,
.real-content ol li li:first-child,
.widget ul li,
.widget ul li li:first-child{
border-top: 1px dotted #dfdfdf;
line-height: 1.5em;
margin: 0;
padding: 0.25em 0 0.25em 15px;
position: relative;
}
.real-content ul li:first-child,
.real-content ol li:first-child,
.widget ul li:first-child{
border-top: none;
}
.real-content ol li,
.real-content ol li li:first-child{
padding-left: 0;
margin-left: 15px;
}
.real-content ul li:after,
.real-content ul li li li:after,
.widget ul li:after,
.widget ul li li li:after{
content: "";
background-color: #7f7f7f;
height: 2px;
margin-top: -1px;
position: absolute;
top: 1em;
left: 0;
width: 2px;
}
.real-content ul li li:after,
.real-content ul li li li li:after,
.widget ul li li:after,
.widget ul li li li li:after{
background-color: #ccc;
}
blockquote{
background: url(images/shortcodes/quoteleft.png) 0 0 no-repeat;
color: #848484;
font-style: italic;
margin: 1em 0;
padding: 0 50px;
}
/***** Tabs */
.tabsCell {
margin: 1em 0;
}
ul.tabs {
border: solid #d6d6d6;
border-width: 0 0 1px 1px;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
ul.tabs li,
ul.tabs li:first-child{
background: #f5f5f5;
border: 1px solid #d6d6d6;
border-left: none;
float: left;
margin: 0 0 -1px;
padding: 0;
overflow: hidden;
position: relative;
}
ul.tabs li:after{
display: none;
}
ul.tabs li a {
color: #707070;
display: block;
line-height: 37px;
outline: none;
padding: 0 15px;
text-decoration: none;
}
ul.tabs li a:hover,
ul.tabs li.active a{
background-color: #fff;
color: #e8503b;
}
ul.tabs li.active{
border-top: 1px solid #e8503b;
border-bottom: 1px solid #fff;
}
.tab_container{
background: #fff;
border: 1px solid #d6d6d6;
border-top: none;
clear: both;
line-height: 1.5em;
}
.tab_container p{
clear: both;
margin: 0;
}
.tab_content{
padding: 20px 15px;
}
/****** twitter oembed ******/
/* overwrite dumb !important styles in twitter omebed */
div.twitter-tweet-rendered{
max-width: 100% !important;
}
.real-content .twt-border {
max-width: 100% !important;
min-width: 0 !important;
}
/* =============================================================================
LIGHTBOX
========================================================================== */
.nyroModalBg {
background: #000;
height: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.nmReposition {
position: absolute;
}
.nyroModalCloseButton {
background: url(images/nyroModal/ctrl.png) -60px 0 no-repeat;
height: 45px;
top: -55px;
right: -60px;
text-indent: -9999em;
width: 45px;
z-index: 1002;
}
.nyroModalCloseButton:hover {
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
div.nyroModalTexts{
background-color: rgba(0,0,0,0.8);
bottom: -60px;
left: 0;
z-index: 1002;
}
.nyroModalTitle {
color: #cecece;
font-size: 1.1em;
margin: 0;
text-align: center;
}
.nyroModalTitle a{
color: #cecece;
}
.nyroModalTitle:empty{
display: none;
}
.nyroModalCount {
color: #6E6E6E;
font-size: 1em;
margin: 10px 0 0;
padding-bottom: 5px;
text-align: center;
}
.nyroModalCont {
background: transparent;
margin: 70px;
position: absolute;
z-index: 1001;
}
.nyroModalCont iframe {
display: block;
height: 400px;
width: 600px;
}
.nyroModalError {
border: 4px solid red;
color: red;
width: 250px;
height: 250px;
}
.nyroModalError div {
min-width: 0;
min-height: 0;
padding: 10px;
}
.nyroModalLink, .nyroModalDom, .nyroModalForm, .nyroModalFormFile {
position: relative;
padding: 10px;
min-height: 250px;
min-width: 250px;
max-width: 1000px;
}
.nyroModalImage, .nyroModalSwf, .nyroModalIframe, .nyroModalIframeForm {
position: relative;
}
.nyroModalImage img {
vertical-align: top;
}
.nyroModalHidden {
left: -9999em;
top: -9999em;
}
.nyroModalLoad {
position: absolute;
width: 100px;
height: 100px;
background: #fff url(images/nyroModal/ajaxLoader.gif) no-repeat center;
padding: 0;
}
.nyroModalPrev, .nyroModalNext {
background: transparent url(images/nyroModal/ctrl.png) 15px 50% no-repeat;
cursor: pointer;
height: 100%;
position: fixed;
top: 0;
left: 0;
text-indent: -9999em;
width: 60px;
}
.nyroModalNext{
background-position: -135px 50%;
right: 0;
left: auto;
}
.nyroModalPrev, .nyroModalNext,
.nyroModalCloseButton{
outline: none !important;
}
.nyroModalPrev:hover, .nyroModalNext:hover{
background-color: rgba(255,255,255,0.2);
}
.nyroModalPrev:hover{
background-position: -5% 50%;
}
.nyroModalNext:hover{
background-position: 105% 50%;
}
/* =============================================================================
TRANSITIONS
========================================================================== */
/* For elements that are also manipulated by JS */
.albums .item .cover,
.albums .item h2,
.bricks-album .brick h2{
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.visible .slide,
#albums-filter li{
-webkit-transition: background-color 0.3s ease;
-moz-transition: background-color 0.3s ease;
-o-transition: background-color 0.3s ease;
-ms-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
}
a,
span.action{
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
-ms-transition: color 0.3s ease;
transition: color 0.3s ease;
}
/* Special transition cause of resizing textarea */
textarea{
-webkit-transition-property: background-color, border-color, color;
-webkit-transition-duration: 0.3s;
-moz-transition-property: background-color, border-color, color;
-moz-transition-duration: 0.3s;
-o-transition-property: background-color, border-color, color;
-o-transition-duration: 0.3s;
-ms-transition-property: background-color, border-color, color;
-ms-transition-duration: 0.3s;
transition-property: background-color, border-color, color;
transition-duration: 0.3s;
}
input,
.album-icons > a, .album-icons > div,
#album-controls span,
#slide-list li,
#show-text,
.arrow-left, .arrow-right,
.visible .slide a, /* social icons */
.real-content a img,
.post-media img,
.alpha-scope,
em.cov,
.wp-caption,
.widget_recent_albums > div a,
.widget_recent_albums > div a img,
.widget_about_posts .item img,
.quick-flickr-item img,
a.a13-button,
.post-icon,
.more-link,
.navigation a,
#filter-activate,
.rss-link,
#to-top,
.nyroModalPrev, .nyroModalNext, .nyroModalCloseButton, /* nyro lightbox */
.transition{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/* =============================================================================
HELPERS
========================================================================== */
.loading, #loader{
background: url(images/spinner.gif) 50% 50% no-repeat;
height: 100%;
min-height: 15px;
min-width: 15px;
}
#loader{
background-color: #fff;
border-radius: 10px;
-webkit-border-radius: 10px;
height: 50px;
margin: -25px 0 0 -25px;
position: fixed;
left: 50%;
top: 50%;
width: 50px;
}
html.touch #loader{
display: block;
margin: 0 auto;
position: relative;
left: 0;
top: -60px
}
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.clear {
clear: both;
display: block;
font-size: 0;
height: 0;
line-height: 0;
}
/* =============================================================================
RESPONSIVE DESIGN
========================================================================== */
/* hide css small triangles */
html.touch #header .search-form:after,
html.touch .hide-switch,
html.touch #blog-filters > div:after,
html.touch .comment-inside:after,
html.touch .comment-inside:before,
html.touch #tray-button:after,
html.touch #slide-list li .thumb:after,
html.touch #addthis-toolbox:after{
display: none;
}
@media only screen and (max-width: 1000px) {
body:after {
content: 'narrow1000'; /* info for JS */
display: none;
}
/* MAIN LAYOUT */
#content .inside{
width: auto;
padding-left: 10px;
padding-right: 10px;
}
article,
body.search-no-results.search article,
body.archive.category-empty article,
body.blog article,
body.archive article,
body.search article{
width: 60%;
margin-left: 2%;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.full-width article,
body.blog .full-width article,
body.archive .full-width article,
body.search .full-width article{
margin-left: 0;
}
#content aside{
margin-right: 2%;
width: 33%;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* LIGHTBOX */
.nyroModalCont iframe {
height: 333px;
width: 500px;
}
/* SINGLE ALBUM */
#show-text{
left: 10px;
}
#slide-list,
#close-text{
right: 10px;
}
#slide-text .inner{
padding-left: 10px;
}
/* Fix for movement in header on mobiles*/
#access a.assistive-text{
display: none;
}
}
@media screen and ( max-width: 782px ) {
.wp-3_8.admin-bar #header-container.fixed,
body.wp-3_8.admin-bar #root,
body.wp-3_8.admin-bar #whole-bg-image,
body.wp-3_8.admin-bar .glass-switch.off{
top: 46px;
}
/*html .wp-3_8 #wpadminbar {*/
/*z-index: 1600 !important;*/
/*}*/
}
@media only screen and (max-width: 650px) {
body:after {
content: 'narrow650'; /* info for JS */
display: none;
}
/* MAIN LAYOUT */
article,
body.search-no-results.search article,
body.archive.category-empty article,
body.blog article,
body.archive article,
body.search article{
float: none;
margin-left: 0;
width: auto;
}
#content aside{
float: none;
margin-right: 0;
margin-top: 20px;
width: auto;
}
/* HEADER & FOOTER */
#header-container.fixed{
/* to protect user from unusable page */
max-height: 90%;
overflow: auto;
}
#logo img{
max-width: 250px;
height: auto;
}
#jpHeaderPlayer a.jp-play, #jpHeaderPlayer a.jp-pause,
#footer .controls span.action, .glass-switch {
overflow: hidden;
text-indent: -99px;
white-space: nowrap;
width: 0;
}
#jpHeaderPlayer a.jp-play, #jpHeaderPlayer a.jp-pause{
text-indent: -9999px;
}
.add-ons{
display: table;
width: 100%;
}
#jpHeaderPlayer,
#header .search{
display: table-cell;
float: none;
padding: 0 10px;
position: static;
}
#jpHeaderPlayer{
padding: 0;
vertical-align: top;
width: 30px;
}
.socials{
clear: both;
display: table-cell;
float: none;
padding: 0 10px 0 0;
vertical-align: middle;
}
#header .search-form:after {
left: 31px;
right: auto;
}
#header .search-form {
right: auto;
left: 10px;
}
.socials span.static{
display: none;
}
.socials .visible{
float: none;
height: auto;
margin-top: -2px;
padding-top: 0;
}
.glass-switch.off {
padding-left: 4px;
}
#footer,
body.single-album.bricks-theme #footer{
height: auto;
min-height: 30px;
position: relative;
}
#mid{
padding-bottom: 0;
}
#footer div.content{
padding: 5px 0;
}
#footer,
.copyright,
#footer .controls,
.footer-menu,
.footer-menu li a{
line-height: 20px;
}
#footer .content{ overflow: hidden; }
#footer .controls span.action{
line-height: 20px;
position: relative;
top: -5px;
}
.copyright{ padding-right: 10px; }
.footer-menu{ margin-left: -10px; }/* two rules for proper content look on various text length */
#album-controls{
background-color: rgba(0,0,0,0.5);
border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
top: -30px;
}
#to-top {
height: 40px;
right: 5px;
top: -45px;
width: 40px;
}
/* HEADER INFO */
#head-widgets .content .text,
#head-widgets .form{
float: none;
padding: 20px 20px 20px 10px;
width: auto;
}
.js #head-widgets.close .content{
display: none;
}
.add-ons .handle{
display: table-cell;
padding-right: 10px;
; }
.add-ons .handle span{
white-space: nowrap;
}
.hide-switch{
display: none;
}
/* POST/PAGE */
#blog-filters > div{
width: 150px;
}
.js #blog-filters > div > div{
width: auto;
float: none;
}
#blog-filters .tag-parent{
margin-top: 15px;
}
article,
body.search-no-results.search article,
body.archive.category-empty article{
padding: 20px;
}
.real-content,
.comments-area,
h1.post-title, h2.post-title,
.date_n_author{
padding-left: 0;
}
.about-author,
body.single article .post-info{
margin-left: 0;
}
.comment .comment {
margin-left: 20px;
}
.post-icon, #comments-title:before, #reply-title:before{
display: none;
}
/* BLOG LIST MASONRY */
.js #masonry-parent{
visibility: visible;
}
#masonry-parent{
width: auto !important;
}
#masonry-parent .brick{
float: none;
width: 90% !important;
margin-left: auto !important;
margin-right: auto !important;
margin-top: 20px;
}
#masonry-parent .brick:first-child{
margin-top: 0;
}
.js #masonry-parent + div.navigation{
display: block;
}
#masonry-parent + div.navigation{
padding-bottom: 15px;
}
.masonry .brick.ready {
left: 0;/* start point of transition */
}
/* ALBUMS LIST SLIDER */
/* !important to NOT destroy inline styles */
#content.albums-list{
overflow: auto;
}
.albums{
/*height: auto!important;*/
max-width: 100%;
padding-left: 0!important;
padding-right: 0!important;
}
.albums .item,
.albums .item img{
float: none;
height: auto!important;
width: 100%!important;
}
.albums .item img{
position: static!important;
}
.albums .active img{
border-width: 0!important;
}
.albums .cover{
height: auto!important;
width: auto!important;
top: 0!important;
left: 0!important;
right: 0!important;
bottom: 0!important;
}
/* ALBUMS LIST BRICKS */
#albums-view-bricks{
padding-bottom: 0;
}
#albums-filter{
max-width: 150px;
}
#albums-filter li{
border-left: none;
border-top: 1px solid #CECECE;
float: none;
}
#albums-filter a,
#albums-filter li.label{
padding: 5px 10px;
white-space: normal;
}
#albums-filter li.label{
border: none;
}
/* SINGLE ALBUM */
body.single-album #mid{
z-index: 100;
}
#other-albums,
#thumb-tray,
#slide-list,
#tray-button{
display: none!important;
}
#slide-text{
background-color: rgba(0, 0, 0, 0.90);
max-height: 200px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#slide-text .inner{
padding-top: 15px;
}
#slide-text .caption{
font-size: 20px;
margin-bottom: 15px;
}
#slide-text .descpription{
font-size: 14px;
}
.album-icons.active{
display: none;
}
/* protected album form*/
body.album-protected #mid article{
margin: 20px auto 0;
max-width: 250px;
padding: 20px;
position: static;
}
/* SHORT CODES */
.left33, .right33, .center33,
.left25, .right25, .center25,
.left20, .right20, .center20{
float: none;
margin: 1em 0;
width: auto;
}
/* LIGHTBOX */
.nyroModalCloseButton {
background-position: -70px -10px;
height: 25px;
width: 25px;
top: 0 !important;
right: 0;
position: fixed;
}
div.nyroModalTexts{
bottom: -25px;
max-height: 100px;
overflow: auto;
}
.nyroModalTitle {
margin: 0;
padding: 5px 0 10px;
font-size: 14px;
}
.nyroModalCount {
margin: 0;
font-size: 12px;
}
.nyroModalCont {
margin: 25px;
}
.nyroModalCont iframe {
height: 166px;
width: 250px;
}
.nyroModalPrev, .nyroModalNext,
.nyroModalPrev:hover{
background-position: 0px 50%;
width: 25px;
}
.nyroModalNext, .nyroModalNext:hover{
background-position: -155px 50%;
}
}
@media screen and (max-width: 600px) {
.wp-3_8.admin-bar #header-container.fixed{
top: 0;
}
}
/* HIGHER DPI IMAGES*/
@media only screen and (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5) {
#header .search span.action,
#jpHeaderPlayer a.jp-play,
#jpHeaderPlayer a.jp-pause,
.search-form input[type="submit"],
em.cov:after{
background-image: url(images/add-ons@2x.png);
background-size: 16px 86px;
}
.arrow-left:after,
.arrow-right:after,
.arrow-left:hover,
.arrow-right:hover,
span.slides-count,
ul#thumb-list li:after,
#close-text,
.album-icons > a,
.album-icons > div,
.bricks-album .brick .video:after{
background-image: url(images/album_icons@2x.png);
background-size: 50px 500px;
}
.rss-link,
#filter-activate:after,
#tray-button,
.controls #play-button,
#album-controls #play-button,
#album-controls #nextslide,
#album-controls #prevslide,
#show-text,
.glass-switch,
#access.touch h3.assistive-text{
background-image: url(images/controlls@2x.png);
background-size: 17px 470px;
}
.author-inside:after,
.bypostauthor:after{
background-image: url(images/author@2x.png);
background-size: 54px 54px;
}
#blog-filters h3,
.post-info span.categories,
.post-info span.tags,
.post-info span.comments,
.widget_about_posts .post-info a.comments,
.widget_recent_comments .item,
.widget_tag_cloud a,
.tweet{
background-image: url(images/icons@2x.png);
background-size: 130px 130px;
}
blockquote{
background-image: url(images/quoteleft@2x.png);
background-size: 26px 21px;
}
.post-icon,
#comments-title:before,
#reply-title:before{
background-image: url(images/posticons@2x.png);
background-size: 24px 288px;
}
}
@media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; }
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
#whole-bg-image {
background: inherit !important; /* corrupted theme options fix */
}