/* Theme Name: Let Me Build It 2014 Theme URI: http://www.bronco.co.uk/ Description: Theme for use through the Bronco publisher network and affiliates Version: 1.2 Editor: Kean Richmond @ Bronco Ltd */ /*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------- RESET.CSS ----------------------------------------------------*/ html, * {margin:0; padding:0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;} h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;} fieldset, iframe, img {border:0;} table {border-collapse:collapse; border-spacing:0;} th {font-style:normal; font-weight:normal; text-align:left;} ol,ul {list-style:none;} cite {font-style:normal;} a {outline:none;} header, section, footer, aside, nav, article, main, figure {display: block;} input {-webkit-appearance:none;} /*@media screen and (max-device-width: 480px){ body {-webkit-text-size-adjust:none;} }*/ /*---------------------------------------------------- LET ME BUILD IT ONLY - #285E99 / 40,94,153 ----------------------------------------------------*/ .background, .mainnav, .mobile-menu, .page-sidebar h4, .box, .pagination a, .post-categories a:first-child {background-color:#285E99;} .color, a, .top-search button span, .side-share h6, .btp, .sidebar-list a, .side-nav .children a:hover, .footer__links a:hover {color:#285E99;} .btp:before {border-bottom-color:#285E99!important; } /* !important added as same specificity but higher in code order */ .transparent-80-background, .pagination a:hover, .post-categories a {background:rgba(40,94,153,0.8);} .transparent-80-color, a:hover, .top-nav a:hover, .btp:hover, .sidebar-list a:hover, .post-meta--text:hover {color:rgba(40,94,153,0.8);} /*---------------------------------------------------- GENERIC FOR PUBLISHER PLATFORM ----------------------------------------------------*/ /*--- 1-1. HTML/BODY & Generics ---------------------------------------------------------------------------*/ html {font-size:62.5%;} body {background:#F7F7F7; color:#313131; font-family:"Open Sans", Arial, Helvetica, sans-serif; font-size:14px; font-size:1.4rem; line-height:1.8em;} .visible {display:block;} .hidden {display:none;} img {height:auto; max-width:100%;} iframe {max-width:100%;} /*--- 1-2. Icon Fonts ---------------------------------------------------------------------------*/ @font-face {font-family:'icomoon'; src:url("fonts/icomoon.eot"); src:url("fonts/icomoon.eot?#iefix") format("embedded-opentype"),url("fonts/icomoon.svg#icons") format("svg"),url("fonts/icomoon.woff") format("woff"),url("fonts/icomoon.ttf") format("truetype"); font-weight:normal; font-style:normal;} [data-icon]:before {font-family:'icomoon'; content:attr(data-icon); font-weight:normal; speak:none; -webkit-font-smoothing:antialiased;} [data-iconafter]:after {font-family:'icomoon'; content:attr(data-iconafter); font-weight:normal; speak:none; -webkit-font-smoothing:antialiased;} [class^="icon-"]:before,[class*=" icon-"]:before{font-family:'icomoon'; font-style:normal; font-weight:normal; speak:none; -webkit-font-smoothing:antialiased;} .screen-reader-text {left:-9999px; position:absolute; top:-9999px;} /*--- 1-3. Clearfix ---------------------------------------------------------------------------*/ .clearfix:before, .clearfix:after, .headline:before, .headline:after, .secondary:before, .secondary:after, .post-meta:before, .post-meta:after {content:""; display:table} .clearfix:after, .headline:after, .secondary:after, .post-meta:after {clear:both} .clearfix, .headline, .secondary, .post-meta {zoom:1} /*--- 1-4. Form Elements ---------------------------------------------------------------------------*/ input[type='text'] {background:#FFF; border:1px solid #E7E7E7; color:#313131; font-family:"Open Sans", Arial, Helvetica, sans-serif; max-width:100%; padding:8px 6px;} /*--- 1-5. Headings ---------------------------------------------------------------------------*/ h1, h2, h3, h4, h5, h6 {font-family:Arial, Helvetica, sans-serif; font-weight:bold; letter-spacing:-1px; line-height:1.1em;} h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {text-decoration:none;} h1 {font-size:36px; font-size:3.6rem; padding-bottom:12px;} /*@media screen and (max-width: 767px){ .headline h1 {font-size:24px; font-size:2.4rem;} }*/ .single--post h1 {font-size:42px; font-size:4.2rem;} /*@media screen and (max-width: 767px){ .single--post h1 {font-size:36px; font-size:3.6rem;} }*/ h2 {font-size:24px; font-size:2.4rem;} h2.archive-title {margin-bottom:40px;} h3 {font-size:22px; font-size:2.2rem;} h4 {font-size:20px; font-size:2rem;} .archive-title {border-bottom:3px double #E5E5E5; border-color:rgba(0,0,0,0.1); margin-bottom:40px; padding:20px 0 10px 0;} /*--- 2. SITEWIDE ---------------------------------------------------------------------------*/ /*--- 2-1. Containers ---------------------------------------------------------------------------*/ .primary-container {background:#FFF; box-shadow:0px 0px 5px 1px rgba(0,0,0,0.05); min-width:280px; margin:0 auto; padding:0 10px; max-width:1300px} /*@media screen and (min-width: 768px) and (max-width: 1378px){ .primary-container {margin:0 2.5%; padding:0 20px;} } @media screen and (min-width: 1378px){ .primary-container {margin:0 auto; padding:0 40px; width:1240px;} }*/ .secondary-container {margin:0 auto; max-width:1280px;} .page-main {clear:both; float:left; margin:20px -300px 0 0; width:100%;} /*@media screen and (min-width: 767px) and (max-width: 959px){ .page-main {margin-right:-200px;} } @media screen and (max-width: 766px){ .page-main {float:none; margin-right:0;} }*/ .page-content {margin-right:300px; padding-right:60px;} /*@media screen and (min-width: 767px) and (max-width: 959px){ .page-content {margin-right:200px;} } @media screen and (max-width: 766px){ .page-content {margin-right:0; padding:0;} } @media screen and (min-width: 920px){ .story {float:left; width:47.5%;} .story.secondary {width:100%;} .story--right {margin-left:5%;} }*/ /*--- 2-2. Header ---------------------------------------------------------------------------*/ /*.top-bar {border-bottom:1px solid #E5E5E5; font-weight:600; height:41px; padding:0 5px;} @media screen and (max-width: 766px){ .top-bar {display:none} } .top-bar a {text-decoration:none;} .top-nav {border-left:1px solid #E5E5E5; float:left; margin:5px 0; height:100%; overflow:hidden;} .top-nav li {border-right:1px solid #E5E5E5; float:left;} .top-nav a {color:#B4B4B4; display:block; font-size:11px; font-size:1.1rem; padding:3px 20px 2px 20px; text-transform:uppercase;} .top-search {float:left; padding-top:6px; width:240px;} .top-search input[type="text"] {border:0; bottom:5px; color:#000; float:left; margin-top:2px; padding:7px 5px; position:relative; width:65%;} .top-search button {background:0; border:0; cursor:pointer; float:left;} .top-search button span {font-size:22px; font-size:2.2rem;} .top-bar__social {float:right; margin-top:10px;} .top-bar__social_fb {float:left; width:95px;} .top-bar__social_twitter {float:left;}*/ .logo {display:block; margin:30px 0 20px 0; text-align:center;} @media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .site-letmebuildit .logo {background:url(images/logo--letmebuildit@2x.png) no-repeat; background-size: 100%; height: 44px;width: 357px;} .site-letmebuildit .logo img {display:none;} } /*--- 2-3. Navigation ---------------------------------------------------------------------------*/ /*.mainnav {padding-bottom:7px; height:100%; overflow:hidden;} @media screen and (max-width: 766px){ .mainnav {display:none;} } .mainnav li {float:left; padding-top:7px;} .mainnav li:last-child a {border-right:0;} .mainnav a {border-right:1px solid #FFF; border-color:rgba(255,255,255,0.5); color:#FFF; padding:0 15px; text-decoration:none;} .mainnav a:hover {color:#E0E0E0; color:rgba(255,255,255,0.8);} .subnav {border-bottom:1px solid #D6D6D6; border-color:rgba(49,49,49,0.2); font-size:13px; font-size:1.3rem; padding:10px 0; height:100%; overflow:hidden;} @media screen and (max-width: 766px){ .subnav {display:none;} } .subnav li {border-left:1px solid #D6D6D6; border-color:rgba(49,49,49,0.2); color:#666; float:left; padding:0 10px;} .subnav li.title {border-left:0; font-weight:600;} .subnav a {color:#666; text-decoration:none;} .subnav a:hover {color:#999;} .mobile-menu {display:none;} @media screen and (max-width: 766px){ .mobile-menu {color:#FFF; display:block; font-weight:600; margin:0 -10px; padding:6px 10px 7px 10px; text-decoration:none; text-transform:uppercase;} .mobile-menu:before {float:left; font-size:18px; font-size:1.8rem; margin-right:9px;} .mobile-menu:hover {background:#313131; color:#FFF;} }*/ .offcanvas {background:#F7F7F7; display:none; left:0; padding:25px 5%; position:absolute; width:70%;} .offcanvas form {margin-top:16px; position:relative;} .offcanvas form:before {font-size:19px; font-size:1.9rem; left:8px; position:absolute; top:6px;} .offcanvas input[type='text'] {background:#FFF; color:#313131; padding-left:36px; width:100%;} .close-tab {color:#B3B3B3; font-size:28px; font-size:2.8rem; text-decoration:none;} .side-nav {margin:27px 0 17px 0;} .side-nav>li {border-top:1px solid #E7E7E7; border-color:rgba(49,49,49,0.1);} .side-nav>li:first-child {border:0;} .side-nav>li>a {padding:6px 10px 5px 10px;} .side-nav a {display:block; text-decoration:none;} .side-nav .children {border-top:1px solid #E7E7E7; border-color:rgba(49,49,49,0.1); display:none; padding:7px 10px 10px 10px; height:100%; overflow:hidden;} .side-nav .children li {float:left; font-size:12px; font-size:1.2rem; width:50%;} .side-nav .children a {color:#666;} .section-head {font-weight:600;} .side-page-nav li {border-top:1px solid #E7E7E7; border-color:rgba(49,49,49,0.1);} .side-page-nav li:first-child {border:0;} .side-page-nav a {display:block; font-size:13px; font-size:1.3rem; padding:1px 10px 2px 10px; text-decoration:none;} .side-share {padding:0 10px;} .side-share h6 {font-family:"Open Sans", Arial, Helvetica, sans-serif; font-size:13px; font-size:1.3rem; font-weight:700; margin:22px 0 2px 0; text-transform:uppercase;} /*--- 2-4. Footer ---------------------------------------------------------------------------*/ .footer {clear:both; color:#8C8C8C; font-size:12px; font-size:1.2rem; padding:20px 0 80px 0; text-align:center;} .btp {display:inline-block; font-size:11px; font-size:1.1rem; font-weight:700; margin-top:2px; position:relative; text-decoration:none; text-transform:uppercase;} .btp:before {border:4px solid rgba(255,255,255,0); content:" "; height:0; left:50%; margin-left:-4px; position:absolute; top:-6px; width:0;} .btp:hover:before {border:4px solid rgba(255,255,255,0); border-bottom-color:#5A5A5A; border-bottom-color:rgba(49,49,49,0.8);} .footer__links {margin:5px 0 15px 0; text-align:center;} .footer__links li {display:inline;} .footer__links li:before {content:"|";} .footer__links li:first-child:before{content:"";} .footer__links a {color:#8C8C8C; padding:0 6px 0 8px; text-decoration:none;} .footer-logo {display:inline-block;} .footer-logo img {height:18px;} @media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .site-letmebuildit .footer-logo {background:url(../images/_logo_grey@2x.png) no-repeat; background-size:100%; height:18px; width:146px;} .site-letmebuildit .footer-logo img {display:none;} } .copyright {font-size:11px; font-size:1.1rem; line-height:normal;} /*--- 2-5. Sidebar ---------------------------------------------------------------------------*/ .page-sidebar {margin-top:20px; overflow:hidden;} /*@media screen and (min-width: 767px) and (max-width: 959px){ .page-sidebar {float:left; width:200px;} } @media screen and (min-width: 960px){ .page-sidebar {float:left; width:300px;} }*/ .page-sidebar h4 {color:#FFF; font-size:24px; font-size:2.4rem; padding:9px 10px 9px 10px;} .page-sidebar h3 {color:#00ACEE;} .page-sidebar h3.facebook {color:#35619F; margin-top:30px;} .page-sidebar h3 img {margin-right:5px;} .sidebar-block {padding:20px 0;} .sidebar-list {line-height:1.2em; padding-bottom:20px;} .sidebar-list li {padding-top:10px; height:100%; overflow:hidden;} .sidebar-list a {font-size:13px; font-size:1.3rem; text-decoration:none;} .sidebar-list img {float:left; margin-right:10px; max-width:35%;} /*--- 2-6. Share ---------------------------------------------------------------------------*/ .box {border-radius:5px; color:#FFF; cursor:pointer; display:block; text-align:center; text-decoration:none;} .box:hover {color:#FFF; opacity:0.8;} a.box.twitter {background:#00ACEE;} a.box.facebook {background:#3B5998;} a.box.gplus {background:#D74937;} a.box.linkedin {background:#3399CC;} a.box.pinterest {background:#B72429;} .share-popup {background:#FFF; border:1px solid #CCC; min-width:322px; padding:10px 10px 0 10px; position:absolute; z-index:10;} .top-share .share-popup {right:-5px; text-align:left; top:40px;} .post-meta .share-popup {position:absolute; top:24px;} .share-icon-only ul {height:100%; overflow:hidden;} .share-icon-only li {float:left; margin:0 10px 10px 0;} .share-icon-only li:last-child {margin-right:0;} .share-icon-only .box {height:52px; line-height:52px; width:52px;} .share-icon-only span {left:-9999px; position:absolute; top:-9999px;} .top-share {float:right; padding-top:7px; position:relative; text-align:right;} .top-share>a {font-size:11px; font-size:1.1rem; text-transform:uppercase;} .top-share>a:before {font-size:13px; font-size:1.3rem; margin-right:3px;} .follow-contain {clear:both; float:left; margin-bottom:-8px;} /*--- 2-7. Ads ---------------------------------------------------------------------------*/ .advert {border-bottom:1px solid #E5E5E5; border-top:1px solid #E5E5E5; clear:both; margin-bottom:20px;} .advert.after-nav {border-top:0;} .advert span {display:block; height:auto; margin:20px auto; max-width:100%;} .advert a {display:block;} .advert img {height:auto; max-width:100%;} /*@media screen and (max-width: 728px){ .leaderboard {display:none;} } @media screen and (max-width: 468px){ .banner {display:none;} }*/ .leaderboard span {width:728px;} .banner span {width:468px;} .mpu span {width:300px;} .placeholder {background:#EFEFEF; border:4px solid #CCC; color:#CCC; font-size:24px; font-size:2.4rem; font-weight:700; max-width:100%; text-align:center;} .leaderboard .placeholder {height:90px; line-height:82px;} .banner .placeholder {height:60px; line-height:52px;} .mpu .placeholder {height:250px; line-height:242px;} /*--- 3. PAGE SPECFIC ---------------------------------------------------------------------------*/ /*--- 3.1 Index ---------------------------------------------------------------------------*/ .headline {margin:33px 0 20px 0; padding-bottom:20px;} /*@media screen and (max-width: 767px){ .headline {border-top:1px solid #E5E5E5; margin-top:0; padding-top:20px;} }*/ .headline .headline-content {float:left; margin-left:5%; width:60%;} .main-headline-image {display:block; float:left; margin:7px 30px 20px 0; max-width:50%; width:400px;} /*@media screen and (max-width: 500px){ .main-headline-image {float:none; margin-right:0; max-width:none; width:100%;} } @media screen and (max-width: 767px){ .main-headline-image {margin-right:20px; margin-top:0;} }*/ .main-headline-image img {height:auto; max-width:100%;} .secondary {margin-bottom:40px; margin-right:20px;} .secondary h2 {line-height:1.2em;} .main-secondary-image {display:block; float:left; margin:7px 20px 20px 0; max-width:35%; width:220px;} /*@media screen and (max-width: 500px){ .main-secondary-image {float:none; margin-right:0; max-width:none; width:100%;} } @media screen and (max-width: 767px){ .main-secondary-image {margin-right:20px; margin-top:0;} }*/ .main-secondary-image img {max-width:100%;} .item {margin-bottom:40px;} .item h3 {line-height:1.2em;} .item .post-meta {margin-top:0;} .main-item-image {float:left; margin:20px 20px 0 0;} .item .content p {font-size:13px; font-size:1.3rem; line-height:1.6em;} .pagination {border-top:1px solid #E5E5E5; clear:both; margin-top:20px; padding:20px 0 60px 0; height:100%; overflow:hidden;} .pagination a {color:#FFF; font-size:11px; font-size:1.1rem; font-weight:700; padding:7px 15px; text-decoration:none; text-transform:uppercase;} .pagination a:hover {color:#FFF;} .older-links {float:left;} .older-links:before {float:left; margin-right:6px;} .newer-links {float:right;} .newer-links:after {float:right; margin-left:6px;} /*--- 3.2 Post Meta ---------------------------------------------------------------------------*/ .post-meta {margin:10px 0;} .post-meta>li {float:left; margin-right:20px; position:relative;} .post-meta a {text-decoration:none;} .single--post .post-meta {margin:17px 0 22px 0;} .single--post__meta {font-size:13px; font-size:1.3rem;} .post-meta--text {cursor:pointer; float:left; font-size:11px; font-size:1.1rem; font-weight:600; text-transform:uppercase;} .post-meta--text:before {font-size:15px; font-size:1.5rem; margin-right:5px; vertical-align:-2px;} /*--- 3.3 Single Only ---------------------------------------------------------------------------*/ .post-categories {margin-bottom:20px; height:100%; overflow:hidden;} .post-categories li {float:left; margin-right:4px;} .post-categories a {color:#FFF; font-weight:600; margin-right:4px; padding:1px 5px; text-decoration:none; text-transform:uppercase;} .post-categories a:hover {opacity:0.8;} .author a {font-weight:700;} .comments--heading {margin-bottom:-20px;} .social-input#comment {height:200px!important; max-width:inherit!important; width:100%;} /*--- 3.4 Content ---------------------------------------------------------------------------*/ .content h1,.content h2,.content h3,.content h4,.content h5, .content h6 {font-family:"Open Sans",Arial,Helvetica,sans-serif; font-weight:600;} .content h1,.content h2,.content h3 {margin:40px 0 20px 0;} .content h4,.content h5,.content h6 {margin:20px 0 10px 0;} .content h1 {font-size:36px; font-size:3.6rem;} .content h2 {font-size:30px; font-size:3rem;} .content h3 {font-size:26px; font-size:2.6rem;} .content h4 {font-size:22px; font-size:2.2rem;} .content h5 {font-size:18px; font-size:1.8rem;} .content p {padding:12px 0;} .content img {max-width:100%;} .content ul,.content ol {margin:0 0 12px 20px;} .content ul:first-child,.content ol:first-child {font-weight:600;} .content ul {list-style:square;} .content ol {list-style:decimal;} .content li {padding:3px 0 3px 8px;} .content .wp-caption {margin:20px 0; width:auto!important;} .content .wp-caption-text {border-bottom:1px solid #E5E5E5; border-color:rgba(0,0,0,0.1); font-size:13px; font-size:1.3rem; font-weight:600; line-height:1.3em; margin-bottom:10px; padding:0 0 7px 0;} .content blockquote {background:#E5E5E5; background:rgba(0,0,0,0.1); color:#181818; margin:12px 0; padding:10px 20px; position:relative;} /*@media screen and (min-width: 767px){ .content blockquote {float:left; margin-left:-100px; margin-right:20px; margin-top:-10px; max-width:33%;} }*/ .content blockquote p {position:relative; z-index:1;} .content blockquote:before {color:#F0F0F0; color:rgba(255,255,255,0.7); content:"“"; font-family:Arial, Helvetica, sans-serif; font-size:100px; font-size:10rem; left:5px; position:absolute; top:37px;} .alignleft {float:left; margin:12px 20px 12px 0;} .alignright {float:right; margin:12px 0 12px 20px;} .aligncenter {clear:both; display:block; margin:12px auto;} .content--single {margin-top:10px;} /*@media screen and (min-width: 960px){ .content--single {padding-left:100px;} .content--single>p:first-of-type:first-letter {float:left; font-family:"Crete Round","Open Sans",Arial,Helvetica,sans-serif; font-size:80px; font-size:8rem; margin-left:-9%; padding:8px 4px 0 0;} .content--single .wp-caption {margin-left:-100px;} }*/ /*--- 3.5 Post End ---------------------------------------------------------------------------*/ .sharing--heading {font-size:24px; font-size:2.4rem; margin:40px 0 16px 0} .sharing {height:100%; overflow:hidden} .sharing div {float:left; margin:0 0 20px 3.448275862068966%; width:17.24137931034483%} .sharing div:first-child {margin-left:0} .sharing .box {height:100px; text-transform:uppercase} .sharing .box:before {display:block; font-size:32px; font-size:3.2rem; padding:29px 0 3px 0} .sharing span {font-size:12px; font-size:1.2rem; font-weight:700} /*@media screen and (max-width: 460px){ .sharing .box {height:auto;} .sharing .box:before {font-size:24px; font-size:2.4rem; padding:10px;} .sharing span {display:none;} } @media screen and (min-width: 767px) and (max-width: 890px){ .sharing .box {height:auto;} .sharing .box:before {font-size:24px; font-size:2.4rem; padding:10px;} .sharing span {display:none;} }*/ .more-like {margin-top:17px;} .more-like ul {margin-top:15px; height:100%; overflow:hidden;} .more-like li {line-height:1.2em; margin-bottom:30px;} /*@media screen and (max-width: 419px){ .more-like li {float:left; margin-left:13.51351351351351%; width:43.24324324324324%;} .more-like li:nth-child(2n+1) {margin-left:0;} } @media screen and (min-width: 420px) and (max-width: 766px){ .more-like li {float:left; margin-left:8.620689655172414%; max-width:160px; width:27.58620689655172%;} .more-like li:first-child {margin-left:0;} } @media screen and (min-width: 767px) and (max-width: 819px){ .more-like li {float:left; margin-left:13.51351351351351%; width:43.24324324324324%;} .more-like li:nth-child(2n+1) {margin-left:0;} } @media screen and (min-width: 820px){ .more-like li {float:left; margin-left:8.620689655172414%; max-width:160px; width:27.58620689655172%;} .more-like li:first-child {margin-left:0;} }*/ .more-like a {font-size:13px; font-size:1.3rem; text-decoration:none;} .more-like img {margin-bottom:8px;} .more-like span {display:block;} /*--- 3.6 Facebook ---------------------------------------------------------------------------*/ #fb-root {display:none;} .fb_iframe_widget,.fb_iframe_widget span,.fb_iframe_widget span iframe[style] {width:100%!important;}