/* Theme Name: Tap2Connect Theme URI: http://www.tamesisdigital.com Description: Custom WordPress theme based on design supplied by Tap2Connect Version: 1.0 Author: Tamesis Digital Author URI: http://www.tamesisdigital.com */ /* =========================== CONTENTS: 01 Sensible defaults 02 Typography 03 Media queries =========================== */ /* ---------------------------------------------------------------------------------------------------------- 01 Sensible defaults ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ @import "css/reset.css"; 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; /* For clearing */ } body { background:#fff; /* Don't forget to style your body to avoid user overrides */ } ::-moz-selection { background:#ff0; color:#333; } ::selection { background:#ff0; color:#333; } /* ---------------------------------------------------------------------------------------------------------- 02 Typography ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /* 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) */ body, input, textarea { /* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ } h1, h2, h3, h4, h5, h6 { font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ } /* ---------------------------------------------------------------------------------------------------------- 03 Media queries (using a mobile-first approach) ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ /* 400 and up */ @media screen and (min-width:400px) { { /* Place your styles here for all widths greater than 400px */ } } /* Retina Display */ @media screen and (-webkit-min-device-pixel-ratio:2) { { /* Place your styles here for all 'Retina' screens */ } } /* ---------------------------------------------------------------------------------------------------------- 04 Styles ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ body{ background-color: #f1f1f1; font-family:Verdana, Geneva, sans-serif;} body.home { background: #f1f1f1 url(images/bg-image.png) no-repeat center 146px; } header { width:1000px; /*margin: 0 auto;*/ clear:both;} header { position:fixed; left:50%; margin-left: -500px; top:0px; z-index: 1;} div#page-content, div#footer-inner { /*width:1000px;*/ width:100%; margin: 0 auto; clear:both;} div#page-content { padding-top:172px;} /* Should equal the height of the header/logo*/ section {clear:both;} footer {margin: 0 auto; clear:both;} a, a:link, a:visited, a:active { color:#22815f; text-decoration:none;} a:hover { color:#22815f; text-decoration:underline;} a.anchor { display: block; position: relative; visibility: hidden; } a.anchor.whatwedo { margin-top:-70px; padding-bottom:70px;} a.anchor.editorial, a.anchor.whoweare { margin-top:-100px; padding-bottom:100px;} a.anchor.contactus { margin-top:-60px; padding-bottom:60px;} a.anchor.blog { margin-top:-60px; padding-bottom:60px;} a.logo{ display: block; width: 357px; height: 172px; background: url(images/logo2.png) no-repeat 0 0; overflow: hidden; text-decoration: none; border:none; outline: none; float:left; } /* //Incase ever needed, how to change the image on hover. a.logo:hover{ background: url(https://tap2connect.com/wp-content/themes/tap2connect/style.css?ver=3.8.1) no-repeat 0 0; }*/ a.logo h1{ position:relative; left: -10000px; } /*-------------------------------------Scrolling sidebar --------------------------------------------------*/ nav#menu-sidebar { position:fixed; left:0; top:176px; z-index: 1;} nav#menu-sidebar li{ position:inherit !important;} nav#menu-sidebar li a{ display: block; width: 48px; height: 48px; overflow: hidden; text-decoration: none; border:none; outline: none; float:left; } nav#menu-sidebar .menu-item-86 a{background: url(images/sidebar-twitter.gif) no-repeat 0 0;} nav#menu-sidebar .menu-item-87 a{background: url(images/sidebar-facebook.gif) no-repeat 0 0;} nav#menu-sidebar .menu-item-89 a{background: url(images/sidebar-email.gif) no-repeat 0 0;} nav#menu-sidebar .menu-item-103 a{background: url(images/sidebar-backtotop.png) no-repeat 0 0;} nav#menu-sidebar .menu-item-233 a{background: url(images/sidebar-linkedin.gif) no-repeat 0 0;} nav#menu-sidebar li a span{ position:relative; left: -10000px; } /*-------------------------------------Header --------------------------------------------------*/ nav#menu-header { float:right; background-color:#f1f1f1;} nav#menu-header ul li { float:left;} nav#menu-header ul li a, nav#menu-header ul li a:active, nav#menu-header ul li a:visited { padding: 37px 45px 36px; display: inline-block; color:#535353; font-size:0.9em; font-weight:bold; text-decoration:none; border-bottom:1px solid #c8c8c8; border-left:1px solid #c8c8c8;} nav#menu-header ul li:last-child a, nav#menu-header ul li.last-child a{ border-right:1px solid #c8c8c8;} nav#menu-header ul li a:hover { color:#535353; background:url(images/bg-nav-hover.gif) repeat-x bottom left; text-decoration:none;} /*------------------------------------- Sections (need to clean blog items out of here) --------------------------------------------------*/ div#page-content-blog { background-color:#fff; display:inline-block; /*margin: 60px 0;*/ } aside#blogsidebar { float:left; width:260px; display:inline-block; margin-right:37px;} aside#blogsidebar div { margin-bottom:30px;} #sidebar H2, .archive .widget H2, aside#blogsidebar h2 { clear:both; color:#535353; letter-spacing: -0.08em; border-bottom:1px solid #c8c8c8; padding-bottom:15px; margin-bottom:20px; display: inline-block; text-transform:uppercase; font-size:1.4em;} .single #sidebar H2, .single aside#blogsidebar h2 { font-size:1.2em !important;} .home #blogleft h2 {font-size:1.4em;} aside#blogsidebar a {display: inline-block; clear:both; font-size:0.8em; /*padding-bottom: 20px;*/ width: 100%;} aside#blogsidebar, .single article#blogpost{padding: 20px;} .single article#blogpost { float:left; width: 620px; } section#intro p, section#whatwedo p, section#editorialcopy p, section#whoweare p, section#contactus p, section#blog p { font-size:0.8em;} #intro-outer { text-align: center; } #intro-inner {width:1000px; margin:0 auto;} section#intro { text-align:center; height:662px;/* margin: 0 43px 0 464px;*/ margin:0 0 0 360px; display:inline-block; } section#intro h1{ letter-spacing: -0.08em; padding-bottom:23px; margin-bottom:22px; text-transform:uppercase;/* font-size:5em;*/ font-size: 3.2em; background:url(images/h1-bottom-border.gif) bottom center no-repeat;} #outer-box { width:100%; background-color:#FFF; margin-bottom:40px; text-align: center;} /*moved from below*/ section#whatwedo, section#editorialcopy, section#whoweare, section#contactus, section#blog { color:#363636; display:inline-block;background-color:#fff; text-align:center; margin: 0 auto; } section#whatwedo #image, section#editorialcopy #image {float:left; width:410px;} section#whatwedo #text.image, section#editorialcopy #text.image {width: 458px; text-align:left !important;} section#whatwedo #text.noimage, section#editorialcopy #text.noimage {width: 868px;} section#whatwedo h1, section#editorialcopy h1, section#whoweare h1, section#contactus h1, section#blog h1{ letter-spacing: -0.08em; border-bottom:1px solid #c8c8c8; padding-bottom:25px; margin-bottom:30px; display: inline-block; text-transform:uppercase; font-size:2.4em;} section#whatwedo #text, section#editorialcopy #text { float:left; margin:0 46px;} section#whatwedo, section#editorialcopy { width:1000px; padding: 0 170px 62px;} section#whatwedo #image, section#editorialcopy #image{ padding-top:62px;} section#whatwedo P, section#editorialcopy P { padding-bottom:10px;} section#whatwedo h1, section#editorialcopy h1{ padding-top:47px;} /* padding can't be on section as anchor link is then too low*/ section#whoweare, section#blog { padding-bottom: 30px; width:1000px; } section#contactus{ width:1000px; }/*no bottom padding here as the inner will take care of this*/ section#whoweare h1, section#contactus h1, section#blog h1 { padding-top:23px;}/* padding can't be on section as anchor link is then too low*/ section#contactus #contactusinner { padding-bottom: 30px; margin: 20px; background-color:#ebebeb;} section#whoweare p#intro, section#contactus p#intro, section#blog p#intro { padding: 0 170px 27px;} section#whoweare ul#teammembers li#teammember { margin: 0 13px; float:left; width:300px; height:550px; display:inline-block; border:1px solid #e5e5e5;} section#whoweare ul#teammembers li#teammember img.attachment-team-member-image { padding-bottom:18px;} section#whoweare ul#teammembers li#teammember h2{ letter-spacing: -0.08em; text-transform:uppercase; font-size:1.4em;} section#whoweare ul#teammembers li#teammember p#jobtitle{ border-bottom:1px solid #c8c8c8; padding: 0 10px 14px; margin-bottom:14px; display: inline-block;} section#whoweare ul#teammembers li#teammember p#jobdescription{ padding:0 19px 18px;} section#whoweare ul#teammembers li#teammember A img.sociallink { padding:8px;} section#contactus #col1, section#contactus #col2 { float:left;} section#contactus #col1 {width:400px;} section#contactus #col2 {width:490px; text-align: left;} section#contactus #contactusinner{ padding:0 35px 20px;} section#contactus label, form#commentform label { text-align:right; display:inline-block; padding-right:5px; font-size:0.8em; font-weight:bold;} section#contactus #col1 label { width:115px;} form#commentform label { width:58px;} section#contactus #col2 label { font-size:1em; margin-bottom:25px;} section#contactus #col1 input, form#commentform input { height:20px; width:234px; font-family:Verdana, Geneva, sans-serif; font-size:0.8em; color:#929292; } section#contactus input.wpcf7-email, section#contactus select {margin-top:20px;} section#contactus select { height:24px; width:240px; font-family:Verdana, Geneva, sans-serif; font-size:0.8em; color:#929292;} section#contactus textarea, form#commentform textarea {height:64px; font-family:Verdana, Geneva, sans-serif; font-size:0.8em; color:#929292; } section#contactus textarea {width:453px;} form#commentform textarea {width: 546px;} section#contactus input.wpcf7-submit, form#commentform .form-submit input { margin-top:20px; height:52px; background-color:#1f7e5c; color:#FFF; font-size:1.3em; text-transform:uppercase; font-weight:bold; border:none; } section#contactus input.wpcf7-submit {width:139px; } form#commentform .form-submit input {width:184px; float: right;} p.comment-notes, p.logged-in-as{ padding:10px 0;} h3#reply-title { font-size:1.3em; margin-top:30px;} .wpcf7-form p { clear:both;} span.wpcf7-not-valid-tip { font-size:0.8em; color:#1f7e5c;padding-right: 20px;text-align: right;} div.wpcf7-validation-errors {border: 1px solid #c8c8c8; font-size:0.8em; color:#1f7e5c;} /*------------------------------------- Blog (Needs clearing up, changes needed too quickly) --------------------------------------------------*/ section#blog #bloginner { padding: 30px; margin-bottom:20px; display:inline-block;} .home section#blog #bloginner { background-color:#ebebeb;} section#blog #bloginner #blogleft { width:275px; float:left; font-size:0.8em;} section#blog #bloginner #blogleft h2.pagetitle { font-size: 1.4em; font-weight:bold; border-bottom: 1px solid #C8C8C8; clear: both; color: #1F7E5C; display: inline-block; letter-spacing: -0.08em; margin-bottom: 20px; padding-bottom: 15px; text-transform: uppercase;} .home section#blog #bloginner #blogleft .widget h2 { font-size: 1em; font-weight:normal; margin:30px 0 10px;} section#blog #bloginner #blogleft li { margin:2px 0;} section#blog #bloginner #blogleft ul { margin-bottom:20px;} A.socialblogbutton { border:1px #1f7e5c solid; display:inline-block; padding:15px 5px 15px 50px; font-weight:bold; width:196px; margin:10px 0; } A.socialblogbutton.linkedin {background:url(images/blog-linkedin.gif) no-repeat 14px 10px; margin:40px 0 10px;} A.socialblogbutton.facebook {background:url(images/blog-facebook.gif) no-repeat 14px 10px;} A.socialblogbutton.twitter {background:url(images/blog-twitter.gif) no-repeat 14px 10px;} section#blog #bloginner #blogright { width:612px; float:left; padding:0 20px;} .archive #sidebar { margin-top:10px;} .single #sidebar ul { margin-bottom:30px;} .single ul#blogposts { margin:0 20px;} .single article#blogpost{} section#blog ul#blogposts article#blogpost { width: 612px; /*border:1px solid #e5e5e5;*/ border-bottom:1px dotted #999; padding:20px 0; display:inline-block;} section#blog ul#blogposts article#blogpost.first {padding:0 0 20px !important; } section#blog ul#blogposts article#blogpost.first #image, section#blog ul#blogposts article#blogpost.other #image {float:left;} section#blog ul#blogposts article#blogpost.first #image, section#blog ul#blogposts article#blogpost.first #image img { width:301px; height:301px;} section#blog ul#blogposts article#blogpost.other #image, section#blog ul#blogposts article#blogpost.other #image img { width:135px; height:135px;} section#blog ul#blogposts article#blogpost #text { float:left; margin:0;} .single article#blogpost #text #image {width:200px; float:left; padding-bottom: 20px;} .single article#blogpost #text #intro {width: 380px; float:left; padding:20px;} .single article#blogpost #text p { padding-bottom:10px; font-size:0.8em;} section#blog ul#blogposts article#blogpost.first #text.image {width: 295px; float:left; margin-left:15px;} section#blog ul#blogposts article#blogpost.other #text.image {width: 460px; float:left; margin-left:15px;} section#editorialcopy #text.noimage {width: 612px;} .single article #text #intro { text-align:center;} section#blog ul#blogposts article#blogpost #text { text-align:left;} .single article #text h2, section#blog ul#blogposts article#blogpost #text h2 { letter-spacing: -0.08em; font-size:1.4em;} section#blog ul#blogposts article#blogpost.other #text h2 { letter-spacing: -0.08em; font-size:1em; margin-bottom: 10px;} .single article #text h2 {margin-bottom:24px;} section#blog ul#blogposts article#blogpost #text h2 {margin-bottom:5px;} .single article #text h2 a:link, .single article #text h2 a:visited, .single article #text h2 a:active{ color:#22815F !important; font-weight:bold; text-decoration:none;} .single article #text h2 a:hover { color:#22815F !important; text-decoration:underline;} section#blog ul#blogposts article#blogpost #text h2 a:link, section#blog ul#blogposts article#blogpost #text h2 a:visited, section#blog ul#blogposts article#blogpost #text h2 a:active { color:#1F7E5C !important; font-weight:bold; text-decoration:none;} section#blog ul#blogposts article#blogpost #text h2 a:hover { color:#1F7E5C !important; text-decoration:underline;} .single article #text p.authordate {margin-bottom:15px;} section#blog ul#blogposts article#blogpost #text p.authordate{margin:10px 0; color:#999; font-size:0.7em;} .single article #text p.authordate { font-size:0.8em;} .single article #text div.sociallinks, section#blog ul#blogposts article#blogpost #text div.sociallinks{padding-bottom:15px; display:inline-block;} .single article #text hr.socialunderline, section#blog ul#blogposts article#blogpost #text hr.socialunderline{ padding-bottom: 25px; color:#c8c8c8; width:200px; text-align:center; margin: 0 auto; } section#blog ul#blogposts article#blogpost #text p.excerpt a.read-more {float:left; background-color:#22815f; font-weight:bold; text-transform:uppercase; } section#blog ul#blogposts article#blogpost.first #text p.excerpt a.read-more {padding:10px; margin:15px 0 0;} section#blog ul#blogposts article#blogpost.other #text p.excerpt a.read-more {padding:5px; margin:6px 0 0; font-size:0.8em; } section#blog ul#blogposts article#blogpost #text p.excerpt a.read-more:link, section#blog ul#blogposts article#blogpost #text p.excerpt a.read-more:visited, section#blog ul#blogposts article#blogpost #text p.excerpt a.read-more:active { color:#FFF; text-decoration:none; } section#blog ul#blogposts article#blogpost #text p.excerpt a.read-more:hover { color:#FFF; text-decoration:underline;} #page-content-blog #blogpost { text-align:left !important;} #page-content-blog #intro { text-align:center !important;} #page-content-blog #comments {font-size:0.8em;} #page-content-blog #comments img { display:none;} #page-content-blog #comments H2 { font-size:1.5em;} #page-content-blog #comments article { padding:10px 0; } /*------------------------------------- Other --------------------------------------------------*/ /*Stop facebook from being too wide*/ iframe { width: 86px !important; } /*------------------------------------- Footer --------------------------------------------------*/ footer { background-color:#343434; padding: 19px 0;} div#footer-inner {text-align:left; color:#929292; font-size:0.8em;}