/* Theme Name: G&T using Starkers Theme URI: https://www.damianherrington.co.uk Description: G&T theme Version: 4.0 Author: Damian Herrington Tags: clean, responsive */ /*Site development by Damian Herrington, www.damianherrington.co.uk*/ /* =========================== CONTENTS: 01 Sensible defaults 02 Typography 03 Media queries =========================== */ /* ---------------------------------------------------------------------------------------------------------- 01 Sensible defaults ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /** * reset.css * * Adapted from: * Normalize.css by Nicolas Gallagher and Jonathan Neal: https://github.com/necolas/normalize.css/ * HTML5 boilerplate: http://html5boilerplate.com/ * HTML5 Doctor Reset by Eric Meyer and Richard Clark: html5doctor.com/html-5-reset-stylesheet/ * * Modified by Elliot Jay Stocks */ abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden],audio:not([controls]){display:none}html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}h1,h2,h3,h4,h5,h6{font-weight:400}a{color:#00f}a:focus{outline:thin dotted}li{list-style:none}abbr[title]{border-bottom:0}b,strong{font-weight:700}dfn,em,i{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:700}code,kbd,pre,samp{font-family:monospace,monospace;_font-family:'courier new',monospace}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:after,q:before{content:"";content:none}small{font-size:85%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}label{cursor:pointer}input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal;*overflow:visible}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}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top} /*div, article, section, header, footer, nav, li { position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) *//* }*/ .group:after { display:block; height:0; clear:both; content:"."; visibility:hidden; } body { background:#fff; } ::-moz-selection { background:#498240; color:#ffffff; } ::selection { background:#498240; color:#ffffff; } ul { -webkit-margin-before: 0em !important; -webkit-margin-after: 0em !important; -webkit-margin-start: 0px !important; -webkit-margin-end: 0px !important; -webkit-padding-start: 0px !important; } /* ---------------------------------------------------------------------------------------------------------- 02 Typography ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /* 12 / 16 = 0.75em (12px equivalent) 14 / 16 = 0.875em (14px equivalent) 16 / 16 = 1em (16px equivalent) 18 / 16 = 1.125em (18px equivalent) 21 / 16 = 1.3125em (21px equivalent) 24 / 16 = 1.5em (24px equivalent) 30 / 16 = 1.875em (30px equivalent) */ .clear {clear: both;} body { font-size: 1em; line-height: 1.1875em; color: #666666; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust:none;} input, textarea {font: 12px/14px Georgia, "Times New Roman", Times, serif; font-style: italic; color: #909090; margin-bottom: 15px;} a {color: #498240;} a:hover {color: #202020;} a, a:hover {text-decoration: none;} .logo {display: block;} h1,h2,h3,h4,h5,h6 { font-weight:normal; color: #202020; margin-bottom: 15px;} p {margin-bottom: 15px; line-height: 25px;} h1{font-size: 1.875em; /*line-height: 70px;*/line-height: 32px;}/*30px*/ h2{font-size: 1.5em;/*font-size: 1.625em;*/ line-height: 32px;}/*26px*/ h3{font-size: 1.375em; line-height: 38px;}/*22px*/ h4{font-size: 1.125em; line-height: 38px;}/*18px*/ h5{font-size: 0.875em; line-height: 48px;}/*14px*/ h6{font-size: 0.625em; line-height: 24px;}/*10px*/ .page-id-6339 h1 { line-height: 32px; color: #ffffff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .page-id-6339 h1 a { color: #ffffff; } .page-id-6339 .tagline-container h1 {text-align: center; /*padding-top: 10%;*/ color: #888888;} .page-id-6339 .tagline-container h1 a {color: #888888;} .page-id-1183 .content h4 {color: #808080; text-align: left;} img {width: 100%; height: auto;} /*.sidebar img {max-width: 100%; width: auto;}*/ .head-container {padding: 15px 0;} /*General page column arrangement*/ .content .one_half {margin-right: 3%; text-align: justify;} .content .one_half.last_column {margin-right: 0;} .one_half {margin-bottom: 0;} .single article .one_half {margin-right: 3%;} .single article .one_half.last_column {margin-right: 0;} .single .navigation { font-size: 1.175em; float: right; padding-bottom: 15px; } /*Work page*/ .category ol li {border-bottom: 1px #F2F2F2 solid; padding: 50px 0;} .category ol li:first-child {padding-top: 0;} .category article h2 a {color: #454545;} .category article h2 a:hover {color:#202020;} .category article .excerpt { margin-top: 15px; } .ubermenu-responsive-toggle { font-size: 16px; color: #498240; text-transform: capitalize; padding: 12px 0px !important; } .ubermenu-main.ubermenu-horizontal ul.ubermenu-nav > li.ubermenu-item > a { padding: 15px 0; } @media screen and (max-width: 767px) { .ubermenu-responsive .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target { padding: 6px 0px !important; } .ubermenu-main ul.ubermenu-nav > li.ubermenu-item > span.ubermenu-target { padding: 6px 0px !important; } nav.ubermenu ul.ubermenu-nav li.ubermenu-item>span.ubermenu-target .ubermenu-sub-indicator { right: 0px !important; } } .ubermenu-responsive-toggle .megaMenuToggle-icon, .ubermenu-responsive-toggle .megaMenuToggle-icon:before, .ubermenu-responsive-toggle .megaMenuToggle-icon:after { background: #498240; background: rgba(73,130,64,1); } .ubermenu .ubermenu-submenu .ubermenu-target { padding: 6px 30px 6px 10px; } nav.ubermenu ul li.ubermenu-item.ss-nav-menu-reg ul.ubermenu-submenu { padding-top: 0; padding-bottom: 0; } nav.ubermenu ul.ubermenu-nav li.ubermenu-item>a span, nav.ubermenu ul.ubermenu-nav li.ubermenu-item>span.ubermenu-target span { color: #454545; } nav.ubermenu ul.ubermenu-nav li.ubermenu-item>span.ubermenu-target .ubermenu-sub-indicator { right: -5px; margin-top: 1px; border-style: solid dashed dashed; border-color: transparent; border-top-color: #999; font-size: 0; border-width: 3px 3px 0; padding-top: 1px; } nav.ubermenu ul.ubermenu-nav li.ubermenu-item>a span:hover, nav.ubermenu ul.ubermenu-nav li.ubermenu-item>span.ubermenu-target span:hover { color: #498240; } nav.ubermenu ul.ubermenu-nav > li.ubermenu-item.ss-nav-menu-mega > ul.ubermenu-submenu, nav.ubermenu ul.ubermenu-nav li.ubermenu-item.ss-nav-menu-reg ul.sub-menu { border-color: transparent; border: none; } nav.ubermenu ul.ubermenu-nav > li.ubermenu-item > ul.ubermenu-submenu, nav.ubermenu ul.ubermenu-nav li.ubermenu-item ul.sub-menu { background: rgba(255, 255, 255, 0.5); } /* ---------------------------------------------------------------------------------------------------------- 03 Media queries (using a mobile-first approach) ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ div#wpadminbar {display: none;} @media screen and (min-width:0px) { .wrap {width:auto; margin: 0 auto; max-width: 994px; position: relative; padding: 0 15px 0 15px;} ol li article figure {width: 100%; margin-top: 20px;} header {height: auto; margin-top: 15px; background: rgba(255, 255, 255, 0.5); /*margin-bottom: 135px;/*margin-bottom: 95px;*/ margin-bottom: 103px; /*background: red;*/ } .logo {width: 114px; height: 33px;} .riba-head {float: right; width: auto; height: 33px;} .page-id-6339 header {height: 100%; /*background: rgba(255, 255, 255, 0.5);*/} .page-id-6339 .logo {width: 114px; height: 33px;} .page-id-6339 .riba-head {display: none;} /*.content-container {padding: 0 15px;}*/ .page-id-6343 .content-container p img, .page-id-6367 .content-container p img {margin-top: 5px;} .archive.category .content-container {padding-top: 5px;} nav.ubermenu {width: 100%; display: block;} .content, .gallery, .sidebar {display: block;} .content, .gallery, .sidebar {width: 100%;} .sidebar {display: none;} .single.sidebar {display: block;} .gallery a img {margin-bottom: 15px;} nav.ubermenu ul.ubermenu-nav {text-align: center;} .archive.category article a img {margin-bottom: 15px;} } @media screen and (min-width:600px) { .page-id-6339 .content {display: inline; margin-right: 0;} .page-id-6339 .content, .page-id-1183 .content {max-width: 100%;} .page-id-1183 .content {width: 100%; margin-right: 0;} .page-id-1183 .content h4 {text-align: right; } .logo, .page-id-6339 .logo {width: 228px; height: 65px; } .riba-head {float: right; height: 65px; width: auto;} .one_half {width: 48%;} header {margin-bottom: 135px;} } @media screen and (min-width:667px) { /*header {margin-bottom: 165px;}*/ header {margin-bottom: 215px;} } @media screen and (min-width:767px) { nav.ubermenu ul.ubermenu-nav > li.ubermenu-item {float: none !important; padding-right: 34px;} /*nav.ubermenu ul.ubermenu-nav > li#menu-item-6389.menu-item {padding-right: 52px;}*/ .content, .gallery, ol li article img, ol li article figure {display: inline-block; vertical-align: top;} .sidebar, .sidebar img {float: right;} nav.ubermenu ul.ubermenu-nav > li.ubermenu-item > span.ubermenu-target { padding: 15px 15px 15px 0; } } @media screen and (min-width:990px) { .wrap {padding: 0 0 0 0;} } @media screen and (min-width: 1023px) { .content, .damo {width: 69.5%; height: 100%; } .riba-head {display: none;} .content {margin-right: 6%;} .sidebar {display: inline-block; vertical-align: top; width: 23.6%;} .bx-viewport {float: left; width: 68% !important;} .single.sidebar {display: inline-block;} .single.sidebar {height: 476px; overflow-y: scroll;} .single.sidebar article .one_half {margin-right: 0; width: 100%;} .archive.category article a img { width: 69.5%; margin-right: 6.4%; margin-bottom: 75px; } .archive.category article .project-info { width: 23.6%; margin-top: -7px; } .archive.category article a img, .archive.category article .project-info { display: inline-block; vertical-align: top; } } @media screen and (min-width:1024px) { header {height: 110px; margin-bottom: 110px;} .page-id-6339 header {padding-top: 0; min-height: 110px;} .logo, .page-id-6339 .logo {float: right;} nav.ubermenu {float: left; max-width: 691px; margin-top: 12px; margin-left: 0; background: rgba(255, 255, 255, 0);} .page-id-1183 .content {width: 67%;} nav.ubermenu ul.ubermenu-nav {text-align: left;} } @media screen and (min-width:1366px) { .wrap { max-width: 1366px; } nav.ubermenu { max-width: 1031px; } .content, .damo { width: 75.54%; } .sidebar { width: 17.01%; } nav.ubermenu ul.ubermenu-nav > li.ubermenu-item { padding-right: 34px; } /*nav.ubermenu ul.ubermenu-nav > li#menu-item-6389.menu-item {padding-right: 52px;}*/ .archive.category article a img { width: 75.5%; margin-right: 7%; } .archive.category article .project-info { width: 17.1%; margin-top: -7px; } } @media screen and (max-width:767px) { nav.ubermenu.megaResponsive ul.ubermenu-nav li.ubermenu-item.ss-nav-menu-reg ul.sub-menu, nav.ubermenu.megaResponsive ul.ubermenu-nav li.ubermenu-item.ss-nav-menu-reg ul.sub-menu li.ubermenu-item ul.sub-menu { left: 0; width: 99.7%; } nav.ubermenu ul ul.sub-menu { position: relative; } nav.ubermenu ul.ubermenu-nav > li.ubermenu-item.ss-nav-menu-mega > ul.ubermenu-submenu, nav.ubermenu ul.ubermenu-nav li.ubermenu-item.ss-nav-menu-reg ul.sub-menu { background: rgba(255, 255, 255, 0); } } @media only screen and (max-width: 767px) and (min-width: 480px) { nav.ubermenu.megaResponsive ul.ubermenu-nav>li.ubermenu-item { width: 100%; } } @media only screen and (max-width: 1024px) and (min-width: 768px) { nav.ubermenu ul.ubermenu-nav > li.ubermenu-item { padding-right: 34px; } /*nav.ubermenu ul.ubermenu-nav > li#menu-item-6389.menu-item {padding-right: 52px;}*/ } @media only screen and (max-width: 1024px) { .archive.category article .project-info { margin-bottom: 30px; } } @media only screen and (max-width: 587px) { .page-id-6339 h1 { font-size: 0.875em; line-height: 16px; } } /*IE*/ .ie8 .logo {width: 228px; height: 65px; margin: 20px 0 20px 0;} .ie8 .wrap {width: 990px; margin: 0 auto;} .ie8 .wrap header {margin-bottom: 170px;} .ie8 nav.ubermenu {width: 990px; margin-bottom: 1.5em;} .ie8 .wrap header img.riba-head {width: 143px; height: 65px; float: right;} .ie8 .sidebar img {display: none;}