/* Theme Name: dtljWPtheme Description: slick, yet nifty Author: weshatch Author URI: http://weshatch.com Version: 0.2 ◡◠ ✥ ◠◡ Table of Contents: Reset Layout General Styles typography links lists images buttons forms popup helpful Section Styles header navigation sidebar blocks footer Page Styles home work projects images life posts us single person @Media ref. colors: green: 00f137 pink: ff00ff yellow: ffff00 /* --------------------------------------------------------- RESET -------------------------------------------------------*/ html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:""; content:none; } hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } table { border-collapse:collapse; border-spacing: 0; } ins { background-color:#ff9; color:#000; text-decoration:none; } del { text-decoration:line-through; } body, html { height:100%; } /*@font-face { font-family:'Mercury Bold'; src: url('fonts/mercury_bold.eot'); src: url('fonts/mercury_bold.eot?#iefix') format('embedded-opentype'), url('fonts/mercury_bold.woff') format('woff'), url('fonts/mercury_bold.ttf') format('truetype'), url('fonts/mercury_bold.svg#rpmercury_boldregular') format('svg'); font-weight:normal; font-style:normal; }*/ /*@font-face { font-family:'Mercury'; src:url('fonts/mercury_regular.eot'); src:url('fonts/mercury_regular.eot?#iefix') format('embedded-opentype'), url('fonts/mercury_regular.woff') format('woff'), url('fonts/mercury_regular.ttf') format('truetype'), url('fonts/mercury_regular.svg#rpmercury_regularregular') format('svg'); font-weight:normal; font-style:normal; }*/ @font-face { font-family:'Mercury Bold'; src: url('http://www.dailytouslesjours.com/wp-content/themes/dtljWPtheme/fonts/mercury_bold.eot'); src: url('http://www.dailytouslesjours.com/wp-content/themes/dtljWPtheme/fonts/mercury_bold.eot?#iefix') format('embedded-opentype'), url('http://www.dailytouslesjours.com/wp-content/themes/dtljWPtheme/fonts/mercury_bold.woff') format('woff'), url('http://www.dailytouslesjours.com/wp-content/themes/dtljWPtheme/fonts/mercury_bold.ttf') format('truetype'), url('http://www.dailytouslesjours.com/wp-content/themes/dtljWPtheme/fonts/mercury_bold.svg#rpmercury_boldregular') format('svg'); font-weight:normal; font-style:normal; } @font-face { font-family:'Mercury'; src:url('http://www.dailytouslesjours.com/wp-content/themes/dtljWPtheme/fonts/mercury_regular.eot'); src:url('http://www.dailytouslesjours.com/wp-content/themes/dtljWPtheme/fonts/mercury_regular.eot?#iefix') format('embedded-opentype'), url('http://www.dailytouslesjours.com/wp-content/themes/dtljWPtheme/fonts/mercury_regular.woff') format('woff'), url('http://www.dailytouslesjours.com/wp-content/themes/dtljWPtheme/fonts/mercury_regular.ttf') format('truetype'), url('http://www.dailytouslesjours.com/wp-content/themes/dtljWPtheme/fonts/mercury_regular.svg#rpmercury_regularregular') format('svg'); font-weight:normal; font-style:normal; } * { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; background-repeat:no-repeat; position:relative; } body { font:13px/18px Mercury, Helvetica, sans-serif; color:#333; } /* --------------------------------------------------------- LAYOUT -------------------------------------------------------*/ #container { width:1260px; margin:0 auto 36px; padding:0 20px; /* width is 1220 + 40 padding */ } header { position:relative; height:105px; width:100%; margin-top:95px; text-align:center; border-top:1px solid #555; /*z-index:998;*/ } #main { /* overflow:hidden; */ } section { min-height:300px; } .column { float:left; margin-left:40px; } .column:first-child { margin-left:0px; } .narrow { width:212px; } .medium { width:464px; } .wide { width:968px; } .textheavy { width:802px; margin-left:166px; } .space { margin-left:212px; margin-right:-40px; padding-left:40px; } footer { height:150px; margin:80px 0 20px; padding-top:4px; clear:both; border-top:1px solid #555; } footer .narrow { height:80px; margin-left:0px; margin-right:40px; } footer .narrow:last-child { margin-right:0px; } .medium.column { padding-bottom:20px; } /* --------------------------------------------------------- GENERAL STYLES -------------------------------------------------------*/ /* --- typography --- */ p { margin-bottom:1.2em; } .small, #small { font-size:11px; text-transform:uppercase; line-height:1.5em; } pre { white-space:pre; } strong, b { font-weight:bold; } em, i { font-style:italic; font-family:Georgia, serif; } sup { line-height:1; vertical-align:baseline; bottom:0.8em; font-size:50%; } h1, h2, h3, h4, h5 { line-height:1.2em; font-family:'Mercury Bold', Helvetica, sans-serif; } h1 a, h2 a, h3 a { line-height:1.4em; } h4 a, h5 a { line-height:1.8em; } h1 { font-size:24px; font-weight:normal; } h2 { font-size:24px; font-weight:normal; } h3 { font-size:24px; font-weight:normal; } h4 { font-size:13px; font-weight:normal; } h5 { font-size:13px; font-weight:normal; } h6 { font-size:11px; font-weight:normal; text-transform:uppercase; } /* --- links --- */ a { color:#555; outline:0; text-decoration:none; border-bottom-width:1px; border-bottom-style:solid; } a:hover { color:#00f137; } a:focus { outline:thin dotted; } h2 a { color:#333; } h2 a:hover { color:#00f137; } h1 a, h2 a, h3 a { font-weight:normal; } a img { vertical-align:bottom; } /* --- lists --- */ ul, li { /*list-style:none;*/ } /* --- images --- */ img.alignleft { margin-right:20px; } img.alignright { margin-left:20px; } .wrap { position:relative; display:block; margin-bottom:8px; /* css crop: */ max-height:242px; overflow:hidden; line-height:0px; } .pink { } .pink::before { content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; z-index:1; background:rgba(255,0,255, 0.5); } .wp-caption { width: auto!important; } /* --- buttons --- */ .next, .prev { cursor:pointer; opacity:0.6; display:inline-block; width:24px; height:35px; border:0; } .next:hover, .prev:hover { opacity:1; } .prev { background:url('images/buttons/arrow-left_black_big.png') no-repeat; } .next { background:url('images/buttons/arrow-right_black_big.png') no-repeat; } .prev:hover { background:url('images/buttons/arrow-left_green_big.png') no-repeat; } .next:hover { background:url('images/buttons/arrow-right_green_big.png') no-repeat; } .social { height:20px; width:20px; float:left; margin-right:4px; margin-bottom-width:0px; } .social:hover { background-position:0 100%; } .linkedin { background-image:url('images/buttons/linkedin.png'); } .twitter { background-image:url('images/buttons/twitter.png'); } .fb { background-image:url('images/buttons/fb.png'); } .vimeo { background-image:url('images/buttons/vimeo.png'); } .button { padding:6px 8px; font-weight:bold; color:#fff; background:#444; } .button:hover { background:#00f137; } /* --- forms --- */ input, select, textarea { width:100%; font-size:11px; line-height:14px; color:#939393; border:1px solid #c5c5c5; padding:5px 8px; } input[type="checkbox"] { vertical-align:bottom; } input[type=button], input[type=submit], button { width:auto; cursor:pointer; border:none; } input:focus { border:1px solid #585858; } textarea { height:140px } /* --- popup --- */ #overlay { position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(255,255,255,0.7); z-index:1000; } #popup { position:relative; height:50px; width:50px; margin:20% auto; overflow:visible !important; } #popup .prev, #popup .next { position:absolute; top:20%; height:60%; z-index:100; width:100px; background-position:0 50%; } #popup .next { right:10px; background-position:100% 50%; } #popup .prev { left:10px; } #popup .close { position:absolute; right:10px; top:10px; display:block; width:32px; height:32px; cursor:pointer; z-index:1; opacity:0.7; background:url('images/buttons/close.png'); } #popup .close:hover { opacity:1; } #popup p { background-color:#fff; } .loading { background:url('images/util/loading.gif') 50% 50% no-repeat; min-width:212px; min-height:180px; } /* --- helpful --- */ .left, .alignleft { float:left !important; } .right, .alignright { float:right !important; } .disabled { opacity:0.1 !important; cursor:default !important; } a.toggle { display:inline-block; color:#00f137; border:0; padding-right:16px; height:13px; background:url('images/buttons/arrow-toggle.png') 100% 0 no-repeat; } a.toggle.expanded { background-position:100% 100%; } .hidden { display:none; } .green { color:#00f137; } .current { color:#00f137; } .clearfix:before, .clearfix:after { content:''; display:block; height:0; visibility:hidden; } .clearfix:after { clear:both; } .clearfix { zoom:1; } .uppercase { text-transform:uppercase; } /* --------------------------------------------------------- SECTION STYLES -------------------------------------------------------*/ /* --- header --- */ #sunshine { position:fixed; top:-512px; width:640px; height:640px; left:50%; margin-left:-320px; background:url('images/bg/sunshine.png'); z-index:-1; } header h1 { font:12px/22px 'Mercury', Helvetica, sans-serif; text-transform:uppercase; position:relative; } header h1 a, header h1 a:link, header h1 a:active, header h1 a:hover, header h1 a:visited, header h a:focus, header h1 a:hover::after, header h1 a:after { outline:0 none; } header h1 a { border:0; color:#555; margin-top:-18px; display:inline-block; background:url('images/buttons/dtlj_logo_black.png'); width:120px; height:36px; } header h1 a:hover { background:url('images/buttons/dtlj_logo_pink.png'); } header h1 a::after { content:''; display:none; width:108px; height:70px; position:absolute; right:-192px; top:-60px; background:url('images/bg/oui_new.png'); } header h1 a:hover::after { display:block; } /* --- site navigation --- */ header nav { position:absolute; top:-96px; margin:4px 0; } header nav a { text-transform:uppercase; padding:2px 4px; border:1px solid #00f137; } header nav ul { list-style:none; line-height:24px; } header nav li { float:left; margin-right:12px; } header nav .current a { color:#00f137; } #main > nav { top:-40px; height:40px; } #main > nav a { border:0; } #main > nav > * { float:left; } #pagination { text-align:center; margin-bottom:35px; } #pagination div { display:inline-block; line-height:30px; height:30px; } #pagination a { border:0; } #pagination .page-numbers { padding:0px 5px; vertical-align:text-bottom; } #pagination .prev { vertical-align:top; margin-right:25px; } #pagination .next { vertical-align:top; margin-left:25px; } /* --- notes --- */ .note { padding:12px; background:#f0f0f0; } .note h3 { margin-bottom:15px; } .mini h4 { margin-bottom:4px; } /* --- sidebar --- */ #sidebar { margin:0; margin-bottom:50px; } #sidebar h1 { margin-bottom:6px; } #sidebar h5, #comments h5 { color:#00f137; padding:3px 0; text-transform:uppercase; border-top:1px solid #00f137; margin-bottom: 1em; } #sidebar h5 a, #sidebar h5 a:hover, #comments h5 a, #comments h5 a:hover { line-height:1em; border:0; color:#00f137; } /*#sidebar h5 { margin:0; margin-bottom:1em; }*/ #sidebar > div { margin-bottom:40px; } #sidebar .category { margin-bottom:40px; } #sidebar ul { list-style:none; } #sidebar .category li { float:left; margin-right:10px; } #sidebar li p { margin-bottom:0px; margin-top:2px; } #sidebar li { margin-bottom:1em; } #sidebar .info { font-size: 11px; text-transform: uppercase; margin-top:30px; margin-bottom:30px; } #sidebar .links { margin-top:30px; } #sidebar #credits a, #sidebar #notes a, #sidebar #press a, #sidebar #press1 a { font-weight:normal; } /* --- footer --- */ footer h4 { margin:3px 0; text-transform:uppercase; margin-bottom:1em; } footer a { border:0; } footer .social { margin-right:10px; } #bottom_link { top:-30px; margin-left:250px; clear:both; margin-bottom:-50px; } /* --------------------------------------------------------- PAGE STYLES -------------------------------------------------------*/ h1 { margin-bottom:1.5em; } /* --- HOME --- */ .landing h3, h3.landing { font-size:28px !important; line-height:32px; margin:0px; } .blocks .column { width:590px; } .blocks article { min-height:150px; margin-bottom:80px; } .blocks .video { height:330px; /* reserves height while flash is loading */ } .blocks .project h3 { } .blocks .project h3 a { color:#333; } .blocks .project nav .prev { margin-right:20px; } .blocks .project h5 { margin-bottom:8px; pointer-events:none; } .blocks .note h3 { } .blocks .note h3 a:hover { color:#00f137; } .blocks .note { color:#ff00ff; } .blocks .note a { color:#ff00ff; } .blocks .note a:hover { color:#00f137; } .mini.note { float:left; width:212px; } .mini.note:first-child { margin-right:40px; } .mini.note img { width:100%; height:auto; } .mini.note span { margin-bottom:10px; } .mini.note .twitter { } .mini.note .small, .twitter .small { margin-top:30px; margin-bottom:-10px; } .mini.note .small a, .twitter .small a { border:0; } .twitter .small a:hover { /*color:#00f137;*/ } /*.external-link { margin-top:30px; margin-bottom:-10px; }*/ /*.external-link a { font-size:10px; font-weight:normal; color:#bbb; border:0; }*/ /*.external-link a:hover { color:#00f137; }*/ .carousel { position:relative; overflow:hidden; } .carousel ul { width:100%; overflow:hidden; list-style:none; } .carousel li { float:left; width:100%; text-align:center; padding:0 1px; min-height:120px; } .carousel li img { height:auto; max-width:100%; max-height:590px; } .carousel nav { margin-top:-15px; } /* use this to just have it working.... right? */ .carousel._small { margin:0 160px 0 0; /*margin:0px 80px;*/ } /* resizing of whole carousel on main page according to featured-img selected size */ .carousel._medium { margin:0 120px 0 0; /*margin:0px 60px;*/ } li.video { width:590px; } article.note h6 { margin-bottom: 12px; } article.note ul li { padding-left: 15px; list-style-position: inside; text-indent: -12px; } /* --- WORK --- */ .grid article { float:left; height:272px; /* normally don't hardcode height */ margin:0 40px 40px 0; } .grid article > a { display:block; border:0; margin-bottom:10px; } .grid article img { max-height:212px; max-width:212px; height:auto; width:auto; } .grid article h4 { margin-bottom:4px; } .archive .column article h4 { margin-bottom:8px; } .archive article { margin-bottom:40px; } /*.archive .column article .small {margin-bottom:12px; } */ /* --- single project --- */ .video { height:545px; /* 16:9 */ } .project article p:first-child { font-family: "Mercury Bold"; } .extra h4 { margin-top:32px; } .extra a { color:#444; border-bottom-width:1px; } .extra a:hover { color:#00f137; } .extra h4 + div { padding-top:12px; } .extra .small { margin-top:5px; } .single.post h3 a { border:0; } .gallery { float:right; width: 1008px; margin-left:0px; } .gallery img, .gallery .video { max-width:464px; max-height:464px; min-height:130px; margin-left:40px; margin-bottom:40px; } .gallery a { border:0; } .gallery .video { margin:0 0 40px 40px; float:left; width:464px; height:260px; } #main > nav .project-index { margin:7px 15px; float:left; text-align:center; width:40px; } img.wide, .video.wide { margin:0 0 40px 40px; float:right; } /* --- textheavy single project --- */ .textheavy .imgBlock { margin-top:40px; } .textheavy .imgBlock:first-child { margin-top:0px; } .textheavy .imgBlock .leftImg { float:left; margin-right:40px; max-width:464px; margin-bottom:40px; } .textheavy .imgBlock .rightImg { margin-right:-40px; max-width:338px; margin-bottom:40px; } .textheavy > p, .textheavy > h1 { max-width:464px; clear:both; } .textheavy > h1 { margin-bottom:24px; margin-top:32px; } /* --- hi-res images --- */ #main.hi-res { margin-right: -40px; } .hi-res ul { list-style:none; } .hi-res img { max-width:212px; max-height:212px; } .hi-res li { float:left; height:300px; width:212px; margin-right:40px; } /* --- LIFE --- */ .news .note, .archive .note { margin-bottom:40px; } .archive h3, .news .medium h3{ } .archive .note { width:464px; } .note #comments { margin-top:30px; } /* --- single post --- */ .note img { width:100%; height:auto; } #comments h6 a { font-weight:normal; } .note h6 a { font-weight:normal; } #comments ul { list-style:none; } #comments li p, article.note #comments li p { /*margin-bottom: 0px;*/ } #comments li .small {margin-top:6px;} #comments .reply { margin-left:40px; } #comments .children { margin-left: 40px; } .respond input, .respond textarea { margin-bottom:8px; } .respond input.button { width:auto; } .single.post #main nav { margin-left:378px; } .single .medium h3{ } /* --- US --- */ #team, #bff { margin-top:40px; } #team h5, #bff h5 { margin-top:15px; line-height:17px; } .about .medium.column ul { margin-left:-48px; list-style:none; } .about .medium.column li { width:116px; margin-left:48px; float:left; margin-bottom:20px; height:230px; } .about .medium.column ul p { text-transform:uppercase; margin-top:10px; } .about .medium.column h3 { margin-top: 8px; } .about .medium.column h2 { margin-bottom: 30px; } .about .space { padding:0; } #sidebar #twitter a { font-weight:normal; } #sidebar ul li .small { margin-top:6px; } /* --- single person --- */ #main.author nav { margin-left:378px; } #main.author h5 { margin-bottom:20px; } /* --- ARCHIVES --- */ .thumb { padding-top:60px; } /* ---- PRESS --- */ .press #main, .press-selected #main { margin-right: -40px; } .press ul { list-style:none; } .press #main li, .press-selected #main li { float: left; width:212px; height:300px; margin-right:40px; } .press #main li img, .press-selected #main li img { margin-bottom: 10px; } .press ul li .small, .press-selected ul li .small { margin-top: 6px; } /* --------------------------------------------------------- MEDIA & PRINT -------------------------------------------------------*/ @media only screen and (min-width: 1260px) { .post.archive section, .project.archive section, .search section, .about .medium.column, .events .medium.column, .single.post .medium.column, .author .medium.column { margin-left:166px; } } /* --- small screens --- */ @media only screen and (min-width: 1008px) and (max-width: 1259px) { #container { width:1008px; } .blocks .column { width:464px; } .events .medium.column, .about .medium.column { margin-left:166px; } .wide { width:716px; } .textheavy { width:716px; margin-left:40px; } .textheavy .imgBlock .rightImg { max-width:212px; } .gallery { width:756px; } .gallery img { max-width:338px; max-height:338px; } .video { height:405px; } .gallery .video { width:338px; height:190px; } /* .block .video { height:255px; /* reserves height while flash is loading * / }*/ #main.author nav, .single.post #main nav { margin-left: 252px; } .jobs { display:none; } #minis { margin-right:-40px; } /* .block .mini.note { left:0; margin:0 40px 40px 0; }*/ } /* --- smartphone (landscape) --- */ @media only screen and (min-width: 630px) and (max-width: 1007px) { #container { width:630px; } #sunshine { -webkit-transform:rotateX(180deg); } #main.author nav { margin-left: 252px; } .projects #sidebar, .news #sidebar, .archive #sidebar, .single.post #sidebar { display:none; } .author #sidebar { display:inline; } .single.post #main nav { margin-left: 238px; } .space { margin:0 0 0 40px } .search .medium.column, .author .medium.column, .events .medium.column, .about .medium.column { width:338px; margin-left:40px; } .archive .medium.column { width:338px; } .archive section.column, .search section.column { margin:0; } .grid { clear:both; } .gallery { width:378px; } .gallery img { max-width:338px; max-height:338px; } .video { height:330px; } img.wide, .wide.video { margin-left:0px; width:590px; } .gallery .video { width:338px; height:190px; } .textheavy { width:338px; margin-left:40px; } .textheavy .imgBlock .leftImg { max-width:338px; } .textheavy .imgBlock .rightImg { max-width:338px; } .wide { /*width:338px;*/ } .medium { margin-left:60px; } .narrow { width:212px; } .half { width:100%; margin:0; } .thumb { padding:0; margin-bottom:60px; } } /* --- smartphone (portrait) --- */ @media only screen and (max-width: 629px) { #container { width:320px !important; } #sunshine { -webkit-transform:rotateZ(270deg); } header nav { top:48px; left:78px; } #main > nav { top:-12px; padding-left:80px; } #main.author nav, .single.post #main nav { margin-left:0; } #sidebar { width:280px; } .projects #sidebar, .news #sidebar, .archive.project #sidebar, .single.post #sidebar { display:none; } .space { margin:0; padding-left:0; } .space article { height:auto; } .about .space, .author .space { padding:0; } .archive section.column, .search section.column { margin:0; } .gallery, .archive .note { width:280px; } .gallery img { max-width:280px; max-height:280px; margin-left:0; } .video { height:160px; width:280px; } .carousel._small, .carousel._post { margin:0px; } .carousel._medium { margin:0px 40px; } .gallery .video { height:160px; width:280px; margin:0 0 40px 0px; } .textheavy { width:280px; margin:0; } .textheavy .imgBlock .leftImg { max-width:280px; } .textheavy .imgBlock .rightImg { max-width:280px; } .blocks article { margin-bottom:40px; } .blocks .mini.note { margin:0 32px 40px; } .blocks h3 { margin-right:0 !important; } .wide, .medium, .narrow, .blocks .column, .video { width:280px; margin:0; } .thumb { padding:0; margin-bottom:60px; } #bottom_link { margin-left:90px; } iframe { height:160px } } @media print { * { background:transparent !important; color:black !important; text-shadow:none !important; /* filter:none !important; -ms-filter:none !important;*/ } a, a:visited { color:#444 !important; text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border:1px solid #999; page-break-inside:avoid; } thead { display:table-header-group; } tr, img { page-break-inside:avoid; } img { max-width:100% !important; } /*@page { margin:0.5cm; }*/ p, h2, h3 { orphans:3; widows:3; } }