/* Theme Name: Alpine Theme Author: Thrive Web Design Author URI: http://thriveweb.com.au/ Theme URI: http://thriveweb.com.au/themes/alpine/ Description: Minimal wordpress theme designed by Dean Oakley @ Thrive Web Design Version: 1.0 Tags: custom-background, custom-header, featured-images, flexible-width, one-column, theme-options, threaded-comments, white Description: A powerful gallery for photographers, featuring an easy to use jQuery gallery. Adding adding images to the gallery is a breeze, the pagination and keyboard control works great. Designed by Dean Oakley at thrive web design. License: This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. License URI: http://creativecommons.org/licenses/by-sa/3.0/ */ /*---------------------------- normalize ----------------------------*/ 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%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; font-size: 13px; line-height: 1.231; } body, button, input, select, textarea { font-family: sans-serif; color: #222; } ::-moz-selection { background: #f9ff51; color: black; text-shadow: none; } ::selection { background: #f9ff51; color: black; text-shadow: none; } a { color: #00e; } a:visited { } a:hover { color: #06e; } a:focus { outline: none; } 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 #ECECEC; 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, monospace; _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; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; *overflow: visible; } table button, table input { *overflow: auto; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } 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 { -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; } /*---------------------------- typography ----------------------------*/ h1, h2, h3, h4, h5, h6{ margin-bottom: 20px; margin-top: 40px; color: black; font-weight: 600; font-family: 'Open Sans', sans-serif; } h1 { font-size: 40px; line-height: 55px; } h2 { font-size: 30px; line-height: 40px;} h3 { font-size: 24px; line-height: 30px;} h4 { font-size: 18px; line-height: 22px;} h5 { font-size: 15px; line-height: 18px;} h6 { font-size: 13px; line-height: 18px;} h1:first-child, h2:first-child, h3:first-child, h4:first-child{ margin-top: 0; } p{ margin-top: 10px; margin-bottom: 10px; padding: 0; } p:first-child{ margin-top: 0; } textarea, select, input, body{ font-family: 'Open Sans', sans-serif; } /*---------------------------- Basic ----------------------------*/ body { font-size: 14px; line-height: 22px; color: gray; font-weight: normal; } a{ color: gray; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; cursor: pointer; text-decoration: none; outline: none; } a:hover{ text-decoration: none; color: #7e43ab; } blockquote{ font-style: italic; font-size: 14px; line-height: 22px; color: gray; margin-left: 0; padding-left: 40px; border-left: dotted 2px gray; } /*---------------------------- helpers ----------------------------*/ .clear{ clear:both; } .center{ max-width:1400px; margin: 0 auto; text-align:left; position:relative; } .fright{ float:right; } .taright{ text-align:right; } .tacenter{ text-align: center; } .fleft{ float:left; } .fright{ float:right; } .alignright{ float: right; margin-left: 25px; margin-bottom: 20px; } .alignleft{ float: left; margin-right: 25px; margin-bottom: 20px; } .aligncenter { display: block; margin: 5px auto 5px auto; } .alignnone{ clear: both; } .nopad{ padding: 0 !important; } /*---------------------------- header and body ----------------------------*/ body{ background-color: white; padding-top: 0; } #wrapper_border{ padding: 20px; padding-top: 10px; } #wrapper_bg{ background-color: white; position: relative; -webkit-box-shadow: 0 1px 3px 0px rgba(0,0,0, 0.3); -moz-box-shadow: 0 1px 3px 0px rgba(0,0,0, 0.3); box-shadow: 0 1px 3px 0px rgba(0,0,0, 0.3); } #header_wrap{ background-position: center center; background-repeat: no-repeat; height: 330px; } header p.tagline{ color: #7e7f82; float: left; line-height: 30px; margin: 0; padding-left:10px; width: 750px; background-color: white; font-size: 12px; } #logoContainer{ width: 100%; height: 100%; text-align: center; margin-top: 100px; } #logoContainer h1{ color: white; line-height: 0.8em; margin-bottom: 0; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; display: block; font-weight: 900; } #logoContainer p{ color: white; font-size: 12px; padding: 5px; display: inline-block; margin-top: 0; } #main{ margin-bottom: 40px; padding: 20px; } .content{ padding: 40px; padding-top: 0; } .scol{ max-width: 800px; margin: auto; margin-top: 60px; } .gcol{ max-width: 75%; margin: auto; } .col2{ margin-top: 60px; } .lcol{ float: left; width: 65%; } .rcol{ float: right; width: 35%; } .sidebar_widget{ margin-bottom: 30px; } .content, .content p, .content li{ font-size: 14px; line-height: 26px; } .content p:first-child{ margin-top: 0; } .content a{ background-color: #ededed; } .content a:hover{ text-decoration: underline; } .page-template-page-home-php #main{ margin-bottom: 0; } .btitle{ font-size: 14px; font-weight: normal; text-align: right; padding: 0; margin: 0; text-transform: uppercase; padding-right: 40px; } #page_head{ padding-bottom: 15px; padding-right: 40px; border-bottom: solid 1px #ECECEC; } #page_head h2{ font-size: 18px; color: gray; text-align: right; font-weight: normal; } .sticky{ } .bypostauthor{ } .wp-caption-text{ font-style: italic; background-color: #f4f4f4; margin: 0; padding: 5px; } .gallery-caption{ background-color: transparent; } /*---------------------------- Responsive styles ----------------------------*/ .tinynav { display: none } @media screen and (max-width: 600px) { .dets_wrap, .content_wrap{ min-width: 100%; } nav{ width: 100%; } #navwrap2{ padding-left: 5px; padding-right: 5px; } .js .tinynav { display: block; position: relative; top: 8px; border: none; background-color: #f0f0f0; width: 100%; } .js #menuUl { display: none } #blog_head{ padding-right: 5px !important; } #wrapper_border{ padding: 5px; } #main{ padding-left: 0; padding-right: 0; } #searchbox { margin-right: 5px !important; } .content{ padding: 5px; } .gcol{ max-width: 100%; } } @media screen and (max-width: 850px) { .lcol, .rcol{ width: 100%; } } /* Images */ .content img, .wp-caption, .attachment-portfolio{ max-width: 100%; /* Fluid images for posts, comments, and widgets */ } img[class*="align"], img[class*="wp-image-"] { height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */ } img.size-full{ max-width: 100%; width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */ } /*---------------------------- main menu ----------------------------*/ #navwrap{ position: fixed; left: 0; top: 0; width: 100%; z-index: 1000; height: 40px; } #navwrap2{ max-width:1400px; background-color: white; margin: auto; height: 40px; -webkit-box-shadow: 0 1px 3px 0px rgba(0,0,0, 0.3); -moz-box-shadow: 0 1px 3px 0px rgba(0,0,0, 0.3); box-shadow: 0 1px 3px 0px rgba(0,0,0, 0.3); } nav{ top: 0; left: auto; height:40px; z-index:600; } nav .filler{ width: 100%; display: inline-block; height:0px; } nav ul{ height:40px; line-height:40px; z-index:400; margin:0; padding:0; text-align: justify; } nav ul li{ display: inline; list-style:none; position:relative; margin:0; padding:0; } /* Default menu */ .menu ul li{ padding-left: 1%; padding-right: 1%; } nav ul li a{ color: black; text-decoration:none; font-size:12px; font-weight:bold; line-height:40px; height: 40px; display: inline-block; text-transform:uppercase; position: relative; } nav ul li.current_page_item a, .current-gallery-ancestor a, .current-page-ancestor a{ color:#b5b5b5; } nav ul li a:hover, nav ul li.sfHover a{ text-decoration: none; color:#b5b5b5; } nav ul li.sfHover a{ color:#b5b5b5; } nav ul li.current-menu-parent ul a{ color:#b5b5b5; } nav ul li.current_page_item ul a, single-gallery { color:#b5b5b5; } /*** dropit ***/ nav ul li ul{ position:absolute; top:28px; margin:0; padding:0; float:left; width:190px; z-index:100; height:auto; visibility:hidden; left:-15px; border-bottom: solid 1px #CCC; border-left: solid 1px #CCC; border-right: solid 1px #CCC; background-color: white; } nav ul li ul li{ margin:0px; padding:0px; display:block; } nav ul li ul li span{ display:none; } nav ul li ul li a, nav ul li.current_page_item ul li a{ display:inline-block; line-height:25px; height: auto; padding-left: 23px; width:120px; color:black !important; text-align:left; } nav ul li.sfHover ul li a:hover{ color:#b5b5b5; } nav ul li ul li.lastone a{ border-bottom:none !important; } nav ul li ul li.current_page_item a{ color: #b5b5b5 !important; } nav ul li ul li a:hover, nav ul li ul li.current_page_item a:hover{ color: #b5b5b5 !important; } .sf-sub-indicator{ width: 8px; height: 6px; background-image: url(images/drop.png); background-repeat: no-repeat; position: absolute; right: -12px; top: 17px; } /*---------------------------- sub pages ----------------------------*/ .attachment-subpage_thumbnail { float: left; margin-right:20px; margin-bottom:20px; padding: 5px; background:#FFF; background-image: url(images/diag.png); padding: 10px; } .description { overflow: hidden; margin-bottom:10px; } .description a{ color: black; text-decoration: none; font-weight: bold; } .description h3 a{ padding-top:0; } .border{ border-top:1px #E9E9E9 solid; margin-bottom: 20px; } /*---------------------------- Results page ----------------------------*/ .res_item{ float:left; position:relative; margin-right:20px; margin-bottom:20px; width:320px; padding-top: 20px; border-top: 4px solid #dadada; } .res_item.last{ margin-right:0; } .res_item h2{ border-right: none !important; } #s_info{ text-align: center; margin-bottom: 20px; overflow: hidden; } #s_info span{ background-color: #dadada; border-radius: 25px; padding: 15px; display: block; } /*---------------------------- Portfolio page ----------------------------*/ .portfolio{ text-align: center; } .portfolio_item{ position:relative; width:250px; height: 250px; display: inline-block; margin: 5px; } .portfolio_item a{ } .portfolio_item a:hover img{ opacity:0.20; filter:alpha(opacity=20); text-decoration:none; } .portfolio_item a.last{ margin-right:0; } .portfolio_item img{ -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .portfolio_item .info{ position:absolute; left:0; top:0; opacity:0; width:250px; height: 250px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .portfolio_item a:hover .info{ opacity:0.99; } .portfolio_item p{ font-size:22px; color: gray; line-height: 235px; text-align: center; } /*---------------------------- Photospace override ----------------------------*/ .photospace { position:relative; margin-bottom: 20px !important; margin-top: 0 !important; min-height: 200px; /* space for loader */ } .photospace, .photospace .thumnail_col, .photospace .gal_content, .photospace .slideshow-container, .photospace .slideshow span, .photospace .slideshow a.advance-link{ width: 100% !important; height: auto !important; background-color: transparent; } .photospace .slideshow img{ max-width: 100% !important; max-height: 100% !important; } .photospace .slideshow span{ display: block !important; } .photospace .gal_content{ float: none !important; } .photospace .slideshow span{ position: relative !important; /* Keep the gallery height - Doesn't work with synced transistions */ } .photospace .loader{ width: 100px !important; height: 100px !important; top: 50% !important; left: 50% !important; margin-left: -50px; } .photospace .thumbs_wrap2{ min-height:45px; /* space for thumbnails */ overflow: hidden; } .photospace .thumbs{ min-height:40px; } .photospace .thumbs_wrap{ float: left; left: 50%; position: relative; } .photospace .pageLink.next{ margin-right:0; } .photospace .thumnail_col { float: left; left: -50%; width:auto !important; position: relative; } .photospace ul.thumbs { float:left; } .photospace span.image-caption{ position: inherit !important; width: 100% !important; } /*---------------------------- blog header ----------------------------*/ #blog_head{ text-align: right; padding-bottom: 15px; padding-right: 40px; } #blog_head #rss{ display: inline-block; position: relative; } #searchbox{ display: inline-block; position: relative; margin-right:20px; } #searchbox form{ width:103%; } #Searchform{ display: inline-block; position: relative; width:120px; padding-left:5px; padding-right: 25px; padding-top: 3px; padding-bottom: 3px; background-image:url(images/search.png); background-position:100px 5px; background-repeat:no-repeat; } #cat{ display: inline-block; position: relative; padding-top: 3px; padding-bottom: 3px; } #blog_head #rss{ display: inline-block; position: relative; width: 14px; height: 15px; top: 4px; margin-right: 5px; background-image:url(images/rss.png); } #blog_head #rss span{ display: none; } /*---------------------------- blog format ----------------------------*/ article{ margin-bottom:40px; } article h2{ text-overflow: clip; overflow:hidden; } article h2 a, article h2 a:visited{ text-decoration: none; color: black; opacity: 0.99; } article h2 a:hover{ opacity: 0.6; } .date_box p{ margin: 0; padding: 0; text-shadow: none; position: relative; top:2px; } .date_box{ background-color: #E9E9E9; padding:10px; height:18px; margin-bottom:20px; margin-top: 10px; } .date_box a{ font-style:italic; } .search .date_box .stats{ font-size: 20px; } .date_box .stats{ float:left; } .date_box .date{ float:right; text-align:right; } #info_box{ background-color: #8c1016; border-radius:10px; margin-bottom:20px; padding: 10px; } #info_box h2, #info_box h5{ color: white; text-shadow: none; margin: 5px; } .dets_wrap{ float: left; width: 30%; text-overflow:clip; } .dets{ border-right: solid 1px #ECECEC; padding-left: 20px; padding-right: 20px; } .dets h2{ text-align: center; } .dets ul a{ background-color: #F7F7F7; color: #7e43ab; } .dets ul #perm a{ background:none; } .dets ul a:hover{ background-color: #e0f5f1; } .dets ul img:hover{ -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); } .dets ul{ padding-left: 0; } .dets li{ line-height: 22px; list-style: none; text-align: center; } .dets li.perm a{ background: none; } .dets li.perm a:hover{ background: none; } article{ border-top: solid 1px #ECECEC; padding-top: 40px; margin-bottom: 40px; overflow: hidden; } .single article{ border-bottom: 0; padding-bottom: 0; } article .content_wrap{ width: 70%; float: right; } article .content{ padding-top: 0 !important; } /*---------------------------- paging ----------------------------*/ .navigation { display: block; text-align: left; padding-top:20px; padding-bottom: 20px; margin-top:10px; float: left; width: 100%; border-top: solid 1px #ECECEC; } .navigation.comments{ margin-bottom: 20px; padding-top: 17px; } .navigation a{ text-align:center; padding:5px 20px; margin:0 2px 0 2px; border:1px solid #ECECEC; color:#000; font-size:14px; text-decoration:none; line-height:25px; } .navigation a.current{ background-color:#000; color:#FFF; } .navigation a:hover{ background:#fff; } .nav-previous{ float: left; margin-left: 40px; } .nav-next{ float: right; margin-right: 40px; } /*---------------------------- comments ----------------------------*/ div#comments{ position:relative; margin-top: 20px; } #comments textarea{ width:600px; } #comments .author{ float:left; font-weight:bold; line-height: 30px; } #comments .time{ color:#a5a5a5; float:right; font-size: 12px; font-style: italic; } #comments em{ padding-bottom:15px; display:block; } #comments #comments_num{ position:absolute; left:-260px; top:0; margin:0; } article #comments #comments_num{ display:none; } #comments .commentlist{ margin:0; padding:0; } #comments .comment { padding-bottom:5px; padding-top: 10px; border-top:solid 1px #cfcfcf; list-style:none; } #comments #respond{ margin-top:20px; padding-top: 20px; border-top:solid 1px #cfcfcf; } #comments input{ padding:5px; } #comments .comment-form-author, #comments .comment-form-email, #comments .comment-form-url, #comments .comment-notes{ position: relative; margin-left: 10px; } #comments label{ float: left; width: 65px; } .comment-form-comment label{ display: none; } textarea#comment{ width: 100%; } .required{ position: absolute; left: -10px; top: 4px; } #comments .avatar{ margin-right: 10px; float:left; } #comments .children{ padding-left: 0; } #comments .children li{ margin-left:60px; } p.author, p.time{ margin-bottom: 0; } p.form-allowed-tags{ font-size: 12px; } /*---------------------------- CF7 ----------------------------*/ .wpcf7-form .wpcf7-validation-errors{ border:none; background-color: #EFEFEF; margin:0; padding:10px; padding-top:5px; padding-bottom:5px; border-radius:5px; text-shadow: none; color:black; font-size: 12px; box-shadow: 2px 2px 1px #ECECEC; } .wpcf7-form .wpcf7-mail-sent-ok{ border:none; background-color: #EFEFEF; margin:0; padding:10px; padding-top:5px; padding-bottom:5px; border-radius:5px; text-shadow: none; color:black; font-size: 12px; box-shadow: 2px 2px 1px #ECECEC; } .wpcf7-form .wpcf7-mail-sent-ng{ border:none; background-color: #EFEFEF; margin:0; padding:10px; padding-top:5px; padding-bottom:5px; border-radius:5px; text-shadow: none; color:black; font-size: 12px; box-shadow: 2px 2px 1px #ECECEC; } .wpcf7-form span.wpcf7-not-valid-tip{ border:none; background-color: #EFEFEF; padding:10px; padding-top:5px; padding-bottom:5px; border-radius:5px; text-shadow: none; width:180px; color:black; font-size: 12px; box-shadow: 2px 2px 1px #ECECEC; } .wpcf7-form-control-wrap.event{ margin-right:5px; } /*---------------------------- footer ----------------------------*/ footer{ padding-top: 20px; overflow: hidden; border-top:solid 1px #ECECEC; padding-bottom: 20px; margin-bottom: 10px !important; } footer p, footer p a{ margin: 0; font-size: 11px; text-align: center; } footer p a:hover{ text-decoration: underline; } #thrive{ margin-top: 6px; } /*---------------------------- Load posts ----------------------------*/ #pbd-alp-load-posts{ text-align: center; } #pbd-alp-load-posts a{ padding: 5px; display: block; text-align: center; text-decoration: none; width: 80%; display: inline-block; } /* `Formalize ----------------------------------------------------------------------------------------------------*/ /* Added via JS to