/* Theme Name: Delve Video Essays (2015 Update) Theme URI: https://delve.tv Description: Flat colours for delve.tv Version: 2.0 Author: Adam Westbrook, based on the Starkers theme by Elliot Jay Stocks & Keir Whitaker Author URI: https://viewportindustries.com */ @import url(https://fonts.googleapis.com/css?family=Montserrat|Cardo:400italic,400); @import "wp-content/themes/delveupd2015/css/reset.css"; @import "wp-content/themes/delveupd2015/css/header.css"; /* 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) */ /*GLOBAL*/ html, body {width: 100%; height: auto; display: block; position: relative;} body {background-color: #e5e5e5; color: #fff; font-size: 16px;} h2 {font-size: 1em; line-height: 0.8em;} h4 {line-height: 1.4em; text-align: center; font-size: 1.4em; padding: 20px 0;} h5 {color: #fff; font-size: 2em; text-align: center; text-shadow: 3px 3px #000;} h6 {color: #fff; font-size: 0.5em; padding: 10px 5px; line-height: 0.6em; text-transform: uppercase;} p {font-weight: lighter; line-height: 1.7em; font-size: 1.5em; margin-bottom: 15px;} a {text-decoration: none; color: #62a3b7;} .primary {font-family: 'Montserrat', sans-serif; text-transform: uppercase;} .secondary {font-family: 'Cardo', sans-serif;} .blue1 {color: #303c52; } .blue2 {color: #1f5772;} .blue3 {color: #62a3b7;} .red1 {color: #b6695f;} .red2 {color: #aa617c;} .red3 {color: #766d88;} .white {color: #fff;} .bgblue1 {background-color: #303c52; } .bgblue2 {background-color: #1f5772; } .bgblue3 {background-color: #62a3b7; } .bgred1 {background-color: #b6695f; } .bgred2 {background-color: #aa617c; } .bgred3 {background-color: #766d88; } .clear {clear: both;} #content {width: 65%; max-width: 800px; float: left; margin-bottom: 50px; margin-top: 30px;} .fullwidthvideo {overflow: hidden;} .video-description {font-size: 1.2em; margin-top: 15px;} .banner {width: 98%; height: 40px; margin-bottom: 20px; overflow: hidden;} .banner h3 {color: #fff; line-height: 40px; margin: 0 0 0 10px ;} .season {margin-right: 2%;} .home .banner {width: 100%;} /*This makes sure the banner on the homepage is the right width*/ /*HEADER STYLED INSIDE CSS/HEADER.CSS*/ /*SIDEBAR*/ #sidebar {margin: 30px 60px 0 30px; position: relative; width: 200px; float: left;} header {margin-bottom: 30px;} #navbar {width: 100%; height: auto; background-color: #303c52;} .menu {} .menu ul li a {color: #fff; text-transform: uppercase; line-height: 3em; padding: 10px 10px; letter-spacing: 0; transition: all 4s ease;} .menu ul li a:hover {letter-spacing: 0.1em;} #menu-item-268 {font-style: italic; opacity: 0.8;} footer {width: 200px; height: 40px; background-color: #1f5772;} .bar {width: 200px; height: 10px;} .socialicon {float: left; margin: 0; transition: all 1s ease;} .socialicon:hover {transform:scale(0.8);} .sub-menu li a {font-size: 0.7em; margin-left: 5px;} /*GALLERIES & VIDEO*/ .posterframe {width: 100%; position: relative; overflow: hidden;} .overlay {position: absolute; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -webkit-transition: opacity 0.2s ease-out; } .overlay:hover {opacity: 1;} .logline {width: 80%; height: 100%; margin: 15% auto;} .logline h5 {text-align: left; font-size: 2.5em;} .logline h5 span {display: inline; background-color: black; padding: 0 5px 0 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone; -moz-box-decoration-break: clone; -ms-box-decoration-break: clone;} .gallery {width: 48%; margin: 0 2% 2% 0; float: left;} .gallery .overlaybutton {width: 40%; height: 20px;} .gallery h5 {font-size: 1.5em;} .gallerysingle {width: 44%; float: left; margin-right: 3%;} #sizereference1 {width: 98%;} #sizereference1 .overlay .logline h5 {font-size:2.5em;} /*Use this to make the first post full width in cases where there are an odd number of films per season. You need to add some lines of PHP: see Season1.php for details.*/ /*NEWSLETTER*/ #mailchimp {padding: 10px; margin-top: 15px;} #listintro p {font-size: 1em; text-align: center; line-height: 1.8em;} .mc-field-group {margin: 2em auto 0; float: left; width: 50%;} input.required {width: 90%; margin: 0 auto; height: 30px;} input#mc-embedded-subscribe {width: 30%; height: 50px; display: block; margin: 10px 0;} .inputcontainer {width: 100%; margin: 0 auto; } .number {font-family: 'Montserrat'; width: 30px; height: 30px; line-height: 30px; text-align: center; float: left;} #privacy {margin: 40px 0;} #privacy li {font-family: 'Montserrat'; text-transform: uppercase; font-size: 0.7em; color: #303c52; line-height: 1.3em; margin-bottom: 30px; margin-left: 45px;} /*IMAGES*/ #press {width: 500px; float: right; margin-left: 15px;} #webby {float: right;} #patreonwide {margin: 15px auto;} #patreonlogo {float: left; margin: 5px 10px;} /*PASSWORD PROTECTED*/ #wp-textbox h3, #wp-textbox h4, #wp-textbox p {color: #303c52;} #wp-textbox h3, #wp-textbox h4 {font-family: 'Montserrat', sans-serif; text-transform: uppercase;} #wp-textbox h3 {line-height: 2em;} .post-password-form p {font-family: 'Montserrat'; text-transform: uppercase; font-size: 1em;} /*READING LISTS*/ #readinglist h2 {font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-size: 1.6em; color: #303c52; text-align: center; margin: 0; padding: 30px 0 10px;} #readinglist h3 {font-family: 'Cardo', serif; font-size: 1.4em; font-weight: bold; color: #aa617c; margin: 15px 0 5px; padding: 20px 0 0;} #readinglist h4 {font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-size: 0.9em; color: #1f5772; text-align: left; margin: 5px 0; padding: 0;} #readinglist p {font-family: 'Cardo', serif; font-size: 1.1em; color: #303c52;} #readinglist #intro p {font-size: 1.3em;} /*CSS3 EFFECTS*/ .cornerright {width: 50px; height: 80px; background-color: #e5e5e5; position: absolute; top:-30px; right: -30px; -ms-transform: rotate(-45deg); /* IE 9 */ -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */ -moz-transform: rotate(-45deg); transform: rotate(-45deg); } #shine {width: 16px; height: 1000px; background-color: #fff; opacity: 0.2; position: absolute; top: -100px; left:-500px; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ -moz-transform: rotate(45deg); transform: rotate(45deg); } #shine{ animation-name: shine; animation-duration: 1.2s; animation-timing-function: ease-out; animation-delay: 2s; } @-webkit-keyframes shine { 0% {left: -200px; top: -1600px;} 100% {left: 900px; top: 900px;} } @-moz-keyframes shine { 0% {left: -200px; top: -1600px;} 100% {left: 900px; top: 900px;} } /* RESPONSIVE */ /* TABLETS LANDSCAPE */ @media only screen and (max-width: 1024px) { body {font-size: 14px;} #content {width: 65%;} #sidebar {margin-right: 20px;} #content {margin-bottom: 30px;} } /* TABLETS PORTRAIT */ @media only screen and (max-width: 800px) { body {font-size: 13px;} #sidebar {margin-right: 15px; margin-left: 10px;} #content {width: 68%;} .gallery, #sizereference1 {width: 100%; margin: 2% 0; float: none;} .gallery .overlaybutton {width: 30%; height: 40px;} .gallery h5 {font-size: 1em; line-height: 40px;} #content {margin-bottom: 30px;} header h1 {font-size: 0.8em;} } /* SMALL TABLETS PORTRAIT */ @media only screen and (max-width: 605px) { body {font-size: 13px;} #curtains {width: 100%; height: 30px; margin: 0;} #content {width: 100%;} #sizereference1 .overlay .logline h5 {font-size:2em;} #sidebar {margin: 0 0 30px 0 ; position: relative; width: 100%;} #navbar {width: 100%; height: auto; background-color: #303c52;} footer {width: 200px; height: 40px; background-color: #1f5772;} .bar {width: 200px; height: 10px;} .socialicon {float: left; margin: 0; transition: all 1s ease;} .socialicon:hover {transform:scale(0.8);} .sub-menu li a {font-size: 0.7em; margin-left: 5px;} footer {width: 100%;} #social {width: 60%; float: left; height: 50px;} #colophon {width: 40%; float: right; height: 50px;} #press {width: 100%;} #content {margin-bottom: 25px;} header h1 {font-size: 0.8em;} footer h6 {text-align: center;} } /* MOBILE DEVICES */ @media screen and (max-width:420px) { body {width: 100%; font-size: 12px;} header {margin: 0; width: 100%; height: 30px;} #curtains {width: 100%;} #content {width: 100%;} .cornerright {display: none;} .banner {overflow: visible; height: auto;} .banner h3 {line-height: 1.4em;} #press {width: 100%;} .mc-field-group {margin: 2em auto 0; float: left; width: 90%;} #content {margin-bottom: 20px;} #curtain1 {width: 2%;} #curtain2 {width: 8%;} #curtain3 {width: 80%;} #curtain4 {width: 3%;} #curtain5 {width: 5%;} #curtain6 {width: 2%;} header h1 {font-size: 0.8em;} footer h6 {text-align: center;} } @media screen and (max-width:320px) { body {font-size: 10px;} #colophon {width: 30%;} #social {width: 70%;} #content {margin-bottom: 10px;} .banner {min-height: 40px;} .banner h3 {padding-top: 10px;} .menu li {width: 50%; float: left;} .menu li a {font-size: 2em; text-align: center; } .sub-menu li a {font-size: 1em; margin: 0; line-height: 1em; float: left;} }