/* CSS for www.theinternetvagabond.com Written by Bill Niblock Attempting to use a fluid grid and responsive design approach. "Optimal" Page width: 1024px Columns: 6; Column Width: 139px; Column Spacer Width: 18 Single Column: 6.906em; 14.48% Single Spacer: 1.875% Assumed default type size: 16px Remember: target / context = result */ /* ============================= Reset Styles, Thanks to... http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) ============================= */ 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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* ========================== Utility Styles ============================= */ /* Font used for sub title. Font found on http://www.fontspace.com Font created by Michael Tension (mtension AT gmail DOT com) */ @font-face { font-family: "header sub"; src: url("../trinkets/Prophecy_Script.ttf") format("truetype"); } .clean { clear:both;} #page { margin: 20px auto; padding: 0 1em; max-width: 64em; /* 1024px / 16px = 64 em */ } /* ========================== Left Column Styles ============================= */ .lft_col { float:left; margin-left: 3.75%; margin-top: 175px; width: 14.48% } .leftbar { /*margin-left: 125px; margin-top: 150px;*/ padding: 0px 0px 0px 0px; } .leftbar_border1 { width: 30px; height: 300px; padding-left: 15px; padding-bottom: 0px; margin-left: -15px; border-right: 5px solid #0033CC; border-bottom-right-radius: 10px; border-bottom: 5px solid #0033CC; font: bolder 22px "Courier New", Courier, monospace; text-shadow: 2px 2px lightgrey; color: blue; } .leftbar_border2 { width: 20px; padding-left: 10px; margin-left: -24px; margin-top: -5px; border-top: 5px solid #0033CC; border-top-left-radius: 10px; border-left: 5px solid #0033CC; border-bottom-left-radius: 0px; } .leftbar_links { margin-left: -36px; z-index: 8; padding: 0px; list-style: none; } .leftbar_links_link { position: relative; height: 40px; width: 180px; margin-top: 15px; margin-bottom: 15px; background-color: white; white-space: nowrap; overflow: hidden; border: 5px solid #0033CC; border-radius: 10px; -o-transition-property: width; -moz-transition-property: width; -webkit-transition-property: width; -ms-transition-property: width; -o-transition-duration: 1s; -moz-transition-duration: 1s; -webkit-transition-duration: 1s; -ms-transition-duration: 1s; } /* .leftbar_links_link:hover { width: 180px; } */ .lbll_text { float: left; position: absolute; right: 0px; width: 140px; height: 100%; z-index: 9; font: 1.7em "Lucida Sans Unicode", "Lucida Grande", sans-serif; text-shadow: 2px 2px lightgrey; letter-spacing: 1px; text-align: right; } .lbll_img { float: left; position: absolute; left: 0px; z-index: 10; max-width: 100%; } /* ========================== Right Column Styles ============================= */ /* ========================== Middle Column Styles ============================= */ .mid_col { float:right; width: 80.665% } .titlei { margin: 0px auto; width: 100%; } .page_title { width: 100%; margin-left: 50px; } .page_title_word { float:left; font: 2.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* font-style: italic; */ text-shadow: 2px 2px #DEDEDE; color: darkgrey; letter-spacing: 8px; } .page_title_word:first-letter { font: 2.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; vertical-align: -10px; /* font-style: italic */ color: white; text-shadow: 0px 0px 15px blue; } .page_title_sub { font: 1.2em "header sub"; text-align: center; vertical-align: center; font-style: italic; margin: 0px auto; } /* .page_title_sub_border1{ padding-left: 250px; margin-left: -50px; margin-right: -5px; border-top: 5px solid #0033CC; border-top-right-radius: 10px; border-right: 5px solid #0033CC; } .page_title_sub_border2{ padding: 0px 50px 0px 25px; border-left: 5px solid #0033CC; border-bottom-left-radius: 10px; border-bottom: 5px solid #0033CC; } */ /* ========================== Main Styles ============================= */ .main { float: left; position: absolute; top: 250px; max-width: 1500px; height: 1000px; } .main_posts { float:left; position: relative; top: -100px; margin: 0px auto 0px 50px; width: 80%; max-width: 1300px; } /* ============================= Post Styles ============================= */ .dyna_post { display: none; background-color: #DD5555; border: 2px solid red; border-radius: 10px; padding: 10px; height: 100%; font: 15px "Lucida Sans Unicode", "Lucida Grande", sans-serif; color: black; } .about_cont { display: none; } .about_title { font: 2.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-style: italic; text-shadow: 2px 2px lightgrey; letter-spacing: 8px; } .about_title:first-letter { font: 2.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; vertical-align: -20px; font-style: italic; text-shadow: 3px 3px lightgrey; } .about_info { padding-left: 250px; } .sort_cont { display: none; } .sort_title { float:left; font: 2.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-style: italic; text-shadow: 2px 2px lightgrey; letter-spacing: 8px; } .sort_title:first-letter { font: 2.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif; vertical-align: -20px; font-style: italic; text-shadow: 3px 3px lightgrey; } .sort_info { padding-left: 250px; height: 100px; } .text_post { height: 100%; overflow: hidden; padding: 10px 200px 10px 30px; margin: 50px 0px; } .text_post#gplus { border-top: 5px solid green; border-left: 5px solid gold; border-bottom: 5px solid blue; border-right: 5px solid red; /*background: url('') no-repeat top right; */ } .text_post#twit { border: 5px solid lightblue; border-radius: 10px; } .text_post#vagai { border: 5px solid black; border-top-right-radius: 25px; border-bottom-left-radius: 25px; } .text_post#other { display: none; } .text_post#about { padding: 10px; margin: 10px 0px; } .text_post#temp { /*display: none;*/ border: 5px solid #3333AA; border-radius: 15px; background-color: #7777DD; padding: 20px; margin: 10px 0px; font-size: 1.2em; color: lightgrey; } /* ======================================= Responsive -- Width: 1150 thru 850 ======================================= */ @media screen and (max-width: 1150px) { #page { max-width: 50em; /* 800px / 16px = 50 em */ } .lft_col { margin-left: 1.875%; width: 14.48% } .leftbar_border1 { border-left: 5px solid #0033CC; border-bottom-left-radius: 10px; border-bottom: 5px solid #0033CC; border-right: 0px solid white; border-bottom-right-radius: 0px; } .leftbar_border2 { margin-left: 14px; margin-top: -5px; border-top: 5px solid #0033CC; border-top-right-radius: 10px; border-right: 5px solid #0033CC; border-left: 0px solid white; border-top-left-radius: 0px; } .leftbar_links { margin-left: -2px; z-index: 8; padding: 0px; list-style: none; } .leftbar_links_link { position: relative; height: 40px; width: 40px; margin-top: 15px; margin-bottom: 15px; background-color: white; white-space: nowrap; overflow: hidden; border: 5px solid #0033CC; border-radius: 10px; -o-transition-property: width; -moz-transition-property: width; -webkit-transition-property: width; -ms-transition-property: width; -o-transition-duration: 1s; -moz-transition-duration: 1s; -webkit-transition-duration: 1s; -ms-transition-duration: 1s; } .leftbar_links_link:hover { width: 180px; } .mid_col { width: 83.54%; } .main_post { width: 100%; margin: 0px auto; } .text_post { margin: 25px 0px; } .title { margin: 0px auto; } .page_title_word { font: 1.4em "Lucida Sans Unicode", "Lucida Grande", sans-serif; } .page_title_word:first-letter { font: 1.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif; } .page_title_sub { font: 1.0em "header sub"; } } /* ==================================== Responsive -- Width: 850 thru 500 ======================================= */ @media screen and (max-width: 850px) { #page { max-width: 40em; /* 640px / 16px = 40 em */ } .lft_col { display: none; } .mid_col { width: 100%; } .main_post { width: 100%; margin: 0px auto; } } /* ==================================== Responsive -- Width: 500 or less, Landscape ======================================= */ @media handheld,screen and (max-width: 500px) and (orientation: landscape) { #page { max-width: 29em; /* 464px / 16px = 29 em */ } }