/* Theme Name: In Over Your Head Description: Slick, yet nifty Version: 0.1 Author: Stress Limit Author URI: http://www.stresslimitdesign.com */ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Table of Contents: Defaults Basic Layout Navigation General Styles text links lists forms DIV Specific Styles Menu Page Sidebar 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('images/bg/bg.gif') repeat fixed left top; height:100%; } body { font: 14px/16px 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 { position:absolute; z-index:10; } /* this is for IE */ #test { position:relative; margin-right:-16px; } /* this is for IE */ #menu { position:fixed; top: 0px; left:0; width:824px; height:112px; background: transparent url('images/bg/menu.png?v=1303930773') no-repeat left top; z-index:999; } #page { position:static; width:440px; margin:0 0 0 196px; /* 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 40px 0 10px; } #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:35px 0 0 203px; padding:0; } #menu li { float:left; display:block; text-indent:-999em; height:24px; padding:0; margin:0; } #menu li.blog { margin-right:12px; width:62px; } #menu li.about { margin-right:11px; width:64px; } #menu li.archive { margin-right:14px; width:75px; } #menu li.best { margin-right:15px; width:50px; } #menu li.speak { margin-right:12px; width:62px; } #menu li.sub { width:45px; } #menu ul li.blog:hover { background:transparent url('images/menu/blog_o.gif?v=1303930773') no-repeat left top; } #menu ul li.about:hover { background:transparent url('images/menu/about_o.gif?v=1303930773') no-repeat left top; } #menu ul li.archive:hover { background:transparent url('images/menu/archive_o.gif?v=1303930773') no-repeat left top; } #menu ul li.best:hover { background:transparent url('images/menu/best_o.gif?v=1303930773') no-repeat left top; } #menu ul li.speak:hover { background:transparent url('images/menu/speak_o.gif?v=1303930773') no-repeat left top; } #menu ul li.sub:hover { background:transparent url('images/menu/sub_o.gif?v=1303930773') no-repeat left top; } #menu a { display:block; border:none; } /* -------------------------------------------------------------- GENERAL STYLES -------------------------------------------------------------*/ /* ----- Text ----- */ p { padding:0 0 10px 0; } b, strong { font-weight:bold; } i, em { font-style:italic; } blockquote { padding:6px 12px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background:#eee; font-style:italic; margin:6px 0px 15px 0px; } blockquote p { padding-bottom:5px; } h1 { font: 28px Georgia, serif; font-style:italic; padding:3px 0 10px; } h2 { font: 24px Georgia, serif; font-style:normal; font-weight:normal; padding:3px 0 15px 0; line-height:1.2em; } h3 { font: 16px Georgia, serif; font-style:italic; padding:3px 0 12px 0; } h4 { font: 14px Georgia, serif; font-style:italic; padding:2px 0 4px 0; } h5 { /* something good */ } h6 { font:11px 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 { /* color: #58c058; text-decoration:underline; */ border-bottom:1px dotted #b22a2a; } a img { border:0; } /* ----- Lists ----- */ ul { padding:0 0 10px 0; list-style-type:disc; } ul li { padding:1px 0; margin-left:20px; /* font-size:11px; font-style:italic;*/ 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 { background: #fff url('images/searchShade.gif') 0 0 no-repeat; width:150px; height:33px; } #sidebar form input { /*width:140px;*/ border:1px solid #878787; padding:2px; width:134px; margin:0 10px 14px 0; background: #fff; /*url('images/magnify.gif') no-repeat 120px 2px*/; } 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 */ /* ----- Header blind + rss e-mail ----- */ #blindcontainer { position:fixed; overflow:hidden; top:75px; left:193px; height:3px; z-index:1001; width:444px; padding:0 24px 0 0; background:transparent url('images/slot.png') no-repeat top left; } #blind { /* display:none; */ position:absolute; bottom:0; width:375px; color:#35242c; font-size:13px; line-height:18px; background:transparent url('images/blind.png') no-repeat bottom left; padding:14px 62px 30px 36px; /* background:#edecec; border-bottom:12px solid #dcd7d6; margin-bottom:22px; -webkit-box-shadow:rgba(0,0,0,0.1) 20px 20px 20px; -moz-box-shadow:rgba(0,0,0,0.1) 22px 22px; box-shadow:rgba(0,0,0,0.4) 22px 22px; */ } /* ----- Blind [rolldown from menu box] ----- */ /* ----- emailbox [inline between & after posts] ----- */ #emailbox { float:none; width:100%; color:#35242c; font-size:13px; line-height:18px; padding:15px 0; margin: 20px 0; clear: both; } .single #emailbox { padding-top:0; } #blind h3 { font-size:18px; font-weight:bold; padding:0 0 7px; } #blind h3 span { color:#97101b; } #blind h3.feedsubmit, #emailbox h3.feedsubmit { text-align:right; padding-bottom:4px; padding-right:10px; cursor:pointer; } #emailbox h3.feedsubmit { padding-right:0; } #blind p { padding-bottom:8px; } #blind input, #emailbox input { padding:0 6px; margin:0 0 0 5px; height:20px; width:254px; border:1px solid #b3b3b4; background:#f2f1f2; } #emailbox input { margin:0 10px 0 0; width:353px; } #emailbox p { padding-bottom:5px; } #emailbox h3.feedsubmit { display:inline; } #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; } /* ----- Blog blind ----- */ #blindcontainer-blog { position:fixed; overflow:hidden; top:75px; /*adjusted for emailbox */ left:193px; height:3px; z-index:1001; width:444px; padding:0 24px 0 0; background:transparent url('images/slot.png') no-repeat top left; } #blind-blog { /* display:none; */ position:absolute; bottom:0; width:375px; color:#35242c; font-size:13px; line-height:18px; background:transparent url('images/blind.png') no-repeat bottom left; padding:14px 62px 30px 36px; } #blind-blog form {position: relative} #blind-blog form h3 {position: absolute; top: 0; right: 0;} /* ----- Blind [rolldown from menu box] ----- */ #blind-blog h3 { font-size:18px; font-weight:bold; padding:0 0 7px; } #blind-blog h3 span { color:#97101b; } #blind-blog h3.feedsubmit, #emailbox h3.feedsubmit { text-align:right; padding-bottom:4px; padding-right:10px; cursor:pointer; } #blind-blog p { padding-bottom:8px; } #blind-blog input{ padding:0 6px; margin:0 0 0 5px; height:20px; width:254px; border:1px solid #b3b3b4; background:#f2f1f2; } #blind-blog a.noborder{ /*float:left;*/ } #blind-blog a.noborder img { padding:0 0 0 5px; } #blind-blog a.noborder:hover, #blind a.noborder:hover img { border:none; } #blind-blog .notinterested { color:#c81115; text-decoration:underline; cursor:pointer; } /* ----- Annoying Popover ----- */ .annoyingpopover { background:#fff url(images/marching_ants_606.gif) top left no-repeat; padding:25px 28px 0 28px; width:550px; height:255px; position:fixed; z-index:9999; top:100px; left:150px; display:none; } .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:24px; display:block; float:left; padding-top:8px; } .annoyingpopover .email { font-size:24px; border:1px solid #333; display:block; float:right; } .annoyingpopover input.submit { font-size:18px; border:1px solid #86ad72; background:#b22a2a; color:#fff; font-family:georgia, serif; display:block; float:right; margin-top:10px; cursor:pointer; clear:both; padding:4px 12px; -moz-border-radius:2px; -moz-box-shadow:0 0 1px #b55c5f inset, 1px 1px 6px #888; -moz-text-shadow:1px 1px 1px #333; text-shadow:1px 1px 1px #333; } /* ----- 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 */ 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 { float:right; margin-right:-146px !important; clear:none; width:120px; } .home div.article div img { margin:0 !important; padding:0; width:120px !important; height:auto !important; } /* ANY image in .article post, BUT none in SINGLE POST mode */ .home div.article p img { clear:none; max-width:440px; } div.article div a:hover, .single div#page div a:hover { border:none; } /* hopefully this targets just images */ /* facebook like */ .home div.article div.fb-like, .single .fb-like {float: none; margin: 0 0 10px 0; width: auto;} .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 { 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:440px; } .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:380px; } .home div.article div.julienpostmeta div h4, .julienpostmeta div h4 { padding-top:0; color:#000; } .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; } /* 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:440px; } .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:434px; } .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('images/bg/bg.gif') 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/03/footer.jpg') bottom left no-repeat !important; height:auto; padding-bottom:320px !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:-181px top; } #menu ul, #test #emailbox { margin-left:22px; } #page { margin-left:10px; } /* annoyingpopover */ .annoyingpopover {left: 5px;} /* tweak header blind */ #blindcontainer, #blindcontainer-blog { left:13px; } /*#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; } } /* -------------------------------------------------------------- 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%; } }