/* Theme Name: In Over Your Head Description: Slick, yet nifty Version: 0.3 Author: Stresslimit Author URI: http://stresslimitdesign.com ◡◠ ✥ ◠◡ Table of Contents: Defaults Basic Layout Navigation General Styles text links lists forms DIV Specific Styles Menu Page Sidebar Media queries Print /* -------------------------------------------------------------- DEFAULTS -------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; } ol, ul { list-style:none; } :focus { outline:0; } html { background:url('data:image/gif;base64,R0lGODlhEAAQAIAAAP///8zMzCH5BAAAAAAALAAAAAAQABAAAAIfhG+hq4jM3IFLJhoswNly/XkcBpIiVaInlLJr9FZWAQA7') repeat fixed left top; height:100%; } body { font:16px/18px Times, serif; color:#000; background:url('images/bg/03/body.jpg') no-repeat fixed left top; line-height:1.4em; height:100%; } html>body { height:auto; overflow-x:hidden; } /* -------------------------------------------------------------- LAYOUT -------------------------------------------------------------*/ #container { z-index:10; } #menu { position:fixed; top:0px; left:0; width:824px; height:95px; z-index:999; background:transparent url('images/menu/menu.png?v=1332231682') 126px 0 no-repeat; } /* background data:image at bottom of file */ #page { width:480px; margin:0 0 0 158px; /* Cannot be less than 440, or will mess up archives */ padding-top:100px; padding-bottom:300px; /* height of floor... actually, needs to vary depending on "how much floor is showing". There is a js hack in the header */ min-height:564px; z-index:2; } #sidebar { position:fixed; top:230px; left:0; width:146px; padding:0 0 0 5px; } #radiator { position:fixed; top:495px; left:643px; width:140px; height:225px; background:transparent url('images/bg/03/radiator.png') no-repeat left top; z-index:997; } #footer { position:fixed; top:717px; left:0; width:1830px; height:310px; background:transparent url('images/bg/03/footer.jpg') no-repeat left top; z-index:999; } /* -------------------------------------------------------------- NAVIGATION -------------------------------------------------------------*/ #menu ul { margin:39px 0 0 163px; } #menu li { float:left; text-indent:-999em; padding:0; margin:0; list-style: none; } /*#menu .blog a { width:55px; background:url('images/menu/blog.gif'); }*/ #menu .best a { width:42px; background:url('images/menu/best.gif'); } #menu .new a { width:32px; background:url('images/menu/new.gif'); } #menu .about a { width:55px; background:url('images/menu/about.gif'); } #menu .speak a { width:53px; background:url('images/menu/speak.gif'); } #menu .sub a { width:32px; background:url('images/menu/sub.gif'); } #menu .archive a { width:69px; background:url('images/menu/archive.gif'); } #menu a { display:block; height:15px; border:none; margin-left:30px; } #menu a:hover { background-position:0 -15px; } #menu li:first-child a { margin-left:14px } /* -------------------------------------------------------------- GENERAL STYLES -------------------------------------------------------------*/ /* ----- Text ----- */ p { padding:0 0 10px 0; } b, strong { font-weight:bold; } i, em { font-style:italic; } blockquote { padding:1em; border-top:1px solid #ddd; border-bottom:1px solid #ddd; background:#eee; font-style:italic; margin:0.5em 0 1.2em 0; } blockquote p { padding-bottom:0.5em; } h1 { font:30px Georgia, serif; font-style:italic; padding:3px 0 10px; } h2 { font:26px Georgia, serif; font-style:normal; font-weight:normal; padding:3px 0 15px 0; line-height:1.2em; } h3 { font:18px Georgia, serif; font-style:italic; padding:3px 0 12px 0; } h4 { font:16px Georgia, serif; font-style:italic; padding:2px 0 4px 0; } h5 { /* something good */ } h6 { font:12px Georgia, Times, serif; font-style:italic; line-height:1.5em; } h1 a, h1 a:link, h1 a:visited, h1 a:hover { color:#000; border:none; } small { font-size:0.8em; } /* ----- Links ----- */ a:link, a:visited { color:#b22a2a; text-decoration:none } a:hover, a:active { border-bottom:1px dotted #b22a2a; } a img { border:0; } a.best { color:inherit; } a.best:hover { color:#b22a2a;; } /* ----- Lists ----- */ ul { padding:0 0 10px 0; list-style-type:disc; } ul li { padding:1px 0; margin-left:20px; line-height:1.5em; } ol { list-style:decimal; } ol li { padding:1px 0; margin-left:30px; } ol li { font-weight:normal; } dl { list-style:decimal; } /* ----- Forms ----- */ #sidebar #searchform { width:150px; height:33px; } #sidebar form input { border:1px solid #878787; padding:0px; width:134px; margin:0 10px 14px 0; background:#fff; /*url('images/magnify.gif') no-repeat 120px 2px*/; -webkit-box-shadow:5px 5px 10px rgba(100,100,100,0.3); -moz-box-shadow:5px 5px 10px rgba(100,100,100,0.3); box-shadow:5px 5px 10px rgba(100,100,100,0.3); } fieldset { padding:15px 0; margin:0px; width:680px; } fieldset legend { font-weight:bold; } /* comment form is down below */ /* ----- Tables ----- */ table { border-collapse:collapse; margin:0 0 10px; width:100%; } th { text-align:left; padding-right:1em; border-bottom:3px solid #CCC; } tr { padding:1px 6px; } td { padding:3px; } th.active img { display:inline; } tr.even td { background-color:#d3ecc0; border-bottom:1px solid #CCC; } tr.odd td { background-color:#e8ffe7; border-bottom:1px solid #CCC; } tbody { border-top:1px solid #CCC; } tbody th { border-bottom:1px solid #CCC; } thead th { text-align:left; padding-right:1em; border-bottom:3px solid #CCC; } /* ----- Object ----- */ object, embed { z-index:1; } /* -------------------------------------------------------------- DIV SPECIFIC STYLES -------------------------------------------------------------*/ /* Header blind + rss e-mail Blog blind Page Archives Secret Clock Sidebar Floor mask */ /* ----- Archive plugin overrides ----- */ #inoveryourarchives { margin-top:14px; } #inoveryourarchives ul li.date a { font-size:14px; } /* ----- Header blind + rss e-mail ----- */ .blindcontainer { position:fixed; top:72px; left:172px; height:2px; overflow:hidden; z-index:1001; width:444px; padding:0 24px 0 0; background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAb8AAAADCAYAAAADbAHIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFNJREFUeNpizE4qCPn64f1ChlEwCkbBKBgFo2CYgy8f3n27cmiPK+P///8ZNFm5/o8GySgYBaNgFIyCEQJsWaAMk9GwGAWjYBSMglEwQsBNgAADAIpQEOrCFNW1AAAAAElFTkSuQmCC') no-repeat top left; } .blind { /*display:none;*/ width:365px; position:absolute; /*top:2px;*/ bottom:0; margin:0 8px 16px; padding:10px 32px; color:#35242c; font-size:13px; line-height:18px; background:#edecec; border-bottom:12px solid #dcd7d6; -moz-box-shadow:10px 5px 15px rgba(100,100,100,0.1); -webkit-box-shadow:10px 5px 15px rgba(100,100,100,0.1); box-shadow:10px 5px 15px rgba(100,100,100,0.1); } .rss { padding:2px 20px 0 0; background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA0FJREFUeNoskl1oHFUUx3/33pnZye42VJJt1rSmppZAsQ2oCFUxoA8RaxIf/KiIBMEiaEBi86K+KEjBl6AVtKDiR7VEUKi0Plnah4ilFQsqBasbaHVNTLINTdhkd2fmzoxnNh24M/fOved//+d3jkpWqtTOff9s4+LpV+LlhdvQqdJaoXQqA5SiPUe+2UL+pWm+vODtG/mw+/Gxz5wb588+s37y3RNeq4GXhhgPHM/g5F1MzqDdFO2kpEajjGqPlErv6sWjn64UPWNe7o2+dGvVsunpo3jwMO6uvahiERWuolo3UI5cady2APrmHI1vAtavLQ448cp8r2vk1u4uOkdeJHvEMLGkZn/5FnvhC1R9EXJb5JDT3kwDi4okp/riNjN5961Tvg6LWickUZ2kvozyfEz3Ttzd96EHDxCvVaH2l9jPQRDJiElCRTPKbahrh+76bwtrZcSFpolONtCFAmrwEbzhKdzte0mSmNapN0h+/Fw45oklOAkUa7Z4XQt1tApwtvdTeGsW/9WTmAfGSf88R/DBo7QufS2pG/yxI6iBYWy9QRQYopaIxEr2hI1xErSnMeXdeHsepuPJd8gdPoPqvxc7M0Hr5xk56JB74gjWLxM3LFYySZLMtQg4HS5q9W+a74/SPP0mtjaHu20Af/w46vb7sSemiOb/ENB9OEPPE603RUDKmQloJVhdIZqEcPUn4rPTtI6NElw5I31QxHv6PWxoaHw33a5Qx9BTxPkSthVLTNuByt6kGYuHJnBfmEFt3UH41UvYpYo4uQO9/zma538grFXxSjvQOweJN6JNBlmLKqSuPbvwxt4mt28UZ/h1WKwSzB5v3+reM0K0tiGuLm2u+/a0OaRJunm3cl1orpLM/0oai3LlggDqIKz8nrnElPqITZFw4d+2gN7ag7UZg0Sr6mvDl7v8uTvTNGvTAviS3z8VyVETkyftGZC5pVW5Ii1ekuBewuXr2PmreIP9c2rpm2OH0tnpjzs7pS4CxjYTUc9hpdY2SIkawU3iPnG2L2IIeLfLcMv45KRTGnrsk+Vmw1v57dSEqi+VxZWkIU0ixYmlO5OCL8ECKoOez2ITnFJ3zX9w7KPi/gNH/xdgAF+RaHRHK9lNAAAAAElFTkSuQmCC') 100% 50% no-repeat; border:0; } /* ----- Blind [rolldown from menu box] ----- */ .blind h3 { font-weight:bold; padding-top:1em; } .blind p { padding-bottom:8px; } .blind input, #emailbox input, .register .email { padding:0 6px; margin:0; height:20px; width:350px; border:1px solid #b3b3b4; background:#f2f1f2; } .blind li { color:#b22a2a; margin-left:15px; } .blind a.noborder{ /*float:left;*/ } .blind a.noborder img { padding:0 0 0 5px; } .blind a.noborder:hover, #blind a.noborder:hover img { border:none; } .blind .notinterested { color:#c81115; text-decoration:underline; cursor:pointer; } /* ----- sign / signup form ----- */ .login-submit { text-align:right; } .login-submit input { border:0; background:transparent; height:24px; font:18px/24px Georgia, serif; font-style:italic; font-weight:bold; width:auto; cursor:pointer; text-transform:lowercase; } .signup-signin { padding-bottom:1em; } .inline_subscribe_form .email_container { float:left; } .inline_subscribe_form .login-submit input { font-weight:normal; } /* ----- Blog blind ----- */ #blindcontainer-blog { left:172px; } #blind-blog form { position:relative } /*#blind-blog form h3 { position:absolute; top:0; right:0; }*/ /* ----- Annoying Popover ----- */ .annoyingpopover { background:#fff url('images/marching_ants_606.gif'); padding:1px 1px 0; /*height:255px; width:550px;*/ width:604px; height:auto; position:fixed; z-index:9999; top:100px; left:150px; display:none; } .annoyingpopover > div:first-child { background:#fff; padding:25px 28px; } .annoyingpopover .close.x { display:block; float:right; font-family:sans-serif; cursor:pointer; } .annoyingpopover h1 { color:#b22a2a; } .annoyingpopover h1, .annoyingpopover h2 { font-size:34px; font-style:normal; padding:0; margin:0; line-height:32px; } /*.annoyingpopover .makethisgoaway { font-style:italic; font-size:18px; position:absolute; top:5px; right:5px; }*/ .annoyingpopover .makethisgoaway { margin-top:10px; } .annoyingpopover .makethisgoaway a:hover { color:#000; text-decoration:none; border:0; } /*.annoyingpopover label { font-size:20px; display:block; float:left; padding-top:5px; }*/ .annoyingpopover .email { font-size:18px; line-height:24px; border:1px solid #333; display:block; float:left; width:250px; } .annoyingpopover .signin_link { display:none; } .annoyingpopover .email_container { float:left; } .annoyingpopover input.submit { background:#b22a2a; color:#fff; display:block; float:left; margin-left:2em; cursor:pointer; padding:0 12px; -moz-text-shadow:1px 1px 1px #333; text-shadow:1px 1px 1px #333; } #show-annoying-popover.not-home { position:absolute; top:50px; } /* ----- Page ----- */ .article { padding-bottom:100px; } div.article h1 a { color:#000; } div.article p { font-style:normal; /* to fix a rare chrome bug! */ } div.article h1 + p + div + p { font:15px/23px Georgia, serif; font-style:italic; } /* only works if there was an image inserted (which automatically is put in a div) */ div.article h1 + p + p { font:15px/23px Georgia, serif; font-style:italic; } /* ... so that's why this line is here, too */ /* floating images off to the right on the index page so they slide behind the radiator */ div.article div object, div.article div embed { display:none; } /* this shouldn't ever happen, but if youtube somehow gets embeded and then floated right, just hide the whole mess */ .home div.article div, .page-id-2755 div.article .post div { float:right; margin-right:-140px !important; clear:none; width:120px; } .home div.article div img, .page-id-2755 div.article .post div img { margin:0 !important; padding:0; width:120px !important; height:auto !important; } /* ANY image in .article post [now including the best of section], BUT none in SINGLE POST mode */ .home div.article p img, .page-id-2755 div.article .post p img { clear:none; max-width:474px; } div.article div a:hover, .single div#page div a:hover { border:none; } /* hopefully this targets just images */ /* a fix for including the login stuff in posts with private content */ .home div.article section.private div { float:none; margin-right:0 !important; clear:both; width:auto; } /* facebook like */ .home div.article div.fb-like, .single .fb-like { float:none; margin:0 0 10px 0; width:auto; } .fb_edge_widget_with_comment { margin-bottom: 20px; } .share { padding:10px 0; } .share #___plusone_0 { float:left!important; width:200px!important; margin:10px 0!important; } .share .twitter-share-button { position:relative; top:10px; } .filed img { float:none; margin:0 !important; padding:0 !important; } .filed { font-style:italic; padding-bottom:4px; } .filed a { font-style:normal; } .home div.article div.julienpostmeta, .julienpostmeta, .private { font-style:italic; border-top:1px dotted #999; border-bottom:1px dotted #999; margin:1em 0; padding:1em 0; color:#6a6a6a; line-height:1.2; float:none; width:480px; } .home div.article div.julienpostmeta img, .single .julienpostmeta img { display:block; float:left; padding:0; width:auto !important; } .home div.article div.julienpostmeta div, .julienpostmeta div { margin-left:60px; float:none; width:420px; } .home div.article div.julienpostmeta div h4, .julienpostmeta div h4 { padding-top:0; color:#000; font-size: 15px;} .home div.article div.julienpostmeta div p, .julienpostmeta div p { padding:0; } .home div.article div.julienpostmeta div p a#subscribe-below, .julienpostmeta div p a#subscribe-below { text-decoration:underline; color:#6a6a6a; } /* ----- Homework/private section ----- */ .private { padding:1em; color:#000; } .private input[type=email], .private input[type=text], .private input[type=password] { padding:0 6px; margin:0; height:20px; width:350px; border:1px solid #b3b3b4; background:#f2f1f2; } .private .login-submit { text-align:left; } .forgot_link { float:right; font-size:0.9em; } .message { -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; border-width:1px; border-style:solid; border-color:#f0da91; background-color:#f9f8dc; padding:0.5em 1em; margin-bottom:1em; } .error { background-color:#ffebe8; border-color:#b22a2a; } /* comments */ #comments { padding-top:20px; } #respond { } ol.commentlist li { min-height:68px; padding:5px 0; } li.depth-1 { list-style:decimal; } li.depth-2 { list-style:lower-alpha; } li.depth-3 { list-style:lower-roman; } li.depth-4 { list-style:lower-greek; } li.depth-5 { list-style:georgian; } #comment { width:470px; } .depth-1 #comment { width:410px; } .depth-2 #comment { width:380px; } .depth-3 #comment { width:350px; } .depth-4 #comment { width:320px; } .depth-5 #comment { width:290px; } .reply { font-size:13px; } .single div img { padding:0 0 10px 10px; max-width:474px; } .interest { padding:15px 0 10px 0; } .dagger { text-align:center; padding-top:20px } .navigation { height:20px; } .navigation div a img { padding:0; } .single .navigation { padding-bottom:10px; } /* ----- Archives listing ----- */ .alignleft { float:left; } .alignright { float:right; } .post h3 { clear:both; padding-top:1em; } /* ----- Secret ----- */ img#secret { position:fixed; top:290px; left:990px; padding:0; z-index:999; } div#valvebutton { position:fixed; width:10px; height:5px; top:596px; left:1122px; } /* ------ Clock ----- */ #clock { position:fixed; top:0px; left:1180px; z-index:1111; } /* ----- Flash ----- */ #flash { position:fixed; top:0; left:834px; z-index:999; } /* ----- Sidebar ----- */ #randomlinks { padding-top:999px; } /* ----- Floor Mask ----- */ #floormask { position:fixed; top:1026px; left:150px; width:642px; height:3500px; background:url('data:image/gif;base64,R0lGODlhEAAQAIAAAP///8zMzCH5BAAAAAAALAAAAAAQABAAAAIfhG+hq4jM3IFLJhoswNly/XkcBpIiVaInlLJr9FZWAQA7') repeat fixed left top; } /* ----- Extra Julien sitting ----- */ #julienSitting { position:fixed; top:283px; left:1071px; z-index:9998; } /* #footer:after, #page:after, #container:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } */ /* -------------------------------------------------------------- SMALL SCREENS [MOBILE & IPAD] -------------------------------------------------------------*/ @media screen and (max-width:1025px) { /* get rid of bg image */ html { background:#fff; } body { background:#f5f5f7 url('images/bg/footer_mobile.jpg') bottom left no-repeat !important; height:auto; padding-bottom:222px !important; } /* hide divs */ #clock, #randomlinks, #radiator, #floormask, #footer { position:static; display:none; visibility:hidden; } /* restyle elements */ #page { padding-bottom:100px; float:none; } } /*@media screen and (min-width:620px) and (max-width:790px) { */ /* #page { margin-left:196px; }*/ /* }*/ @media screen and (max-width:790px) { #menu { background-position:-10px top; } #menu ul, #test #emailbox { margin-left:27px; } #page { margin-left:20px; } /* annoyingpopover */ .annoyingpopover { left:5px; } /* tweak header blind */ #blindcontainer, #blindcontainer-blog { left:30px; } /*#blind { font-size:20px; line-height:1.2em; }*/ /*#blind h3 { font-size:30px; }*/ #blind p { padding-bottom:0.8em } #blind #email { font-size:20px; width:100%; height:1.4em; margin-left:0; } #sidebar { position:static; display:none; visibility:hidden; } } @media screen and (max-width:640px) { .home div.article div, .page-id-2755 div.article .post div { float:none; margin-right:auto !important; clear:none; width:auto; } .home div.article div img, .page-id-2755 div.article .post div img { margin:0 !important; padding:0 0 10px 10px; width:auto !important; max-width:470px !important; } .home div.article p img, .page-id-2755 div.article .post p img { clear:none; max-width:474px; } } /* -------------------------------------------------------------- PRINT -------------------------------------------------------------*/ @media print { body, html { background:white; font-size:10pt; } #sidebar, #radiator, #footer, #menu { display:none; } #page { background:transparent none; border:0; color:black; float:none !important; margin:0; padding:0; width:auto; } #container { margin:0 3%; } }