/* Theme Name: Cute Bubbles Theme URI: Description: A cute Wordpress theme using the beautiful bokeh effect. Author: Gitlan Sorin Author URI: http://point47.com/journal/ Version: 1.2 Tags: black, dark, two-columns, fixed-width, threaded-comments License: GNU General Public License License URI: license.txt **** UPDATES ***** 1.2 - updated CSS to the HTML5 Boilerplate normalization - updated fonts for better readability & added a custom font from google.com/webfonts - fixed several cross browser issues - added some CSS3 styles to improve loading and visuals - updated background image (I lost the original design so I had to make a new one.) */ /* HTML5 Boilerplate */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: sans-serif; color: #222; } body { margin: 0; font-size: 1em; line-height: 1.4; } ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } ::selection { background: #fe57a1; color: #fff; text-shadow: none; } a { color: #00e; } a:visited { color: #551a8b; } a:hover { color: #06e; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ""; content: none; } small { font-size: 85%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } ul, ol { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } label { cursor: pointer; } legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; resize: vertical; } input:valid, textarea:valid { } input:invalid, textarea:invalid { background-color: #f0dddd; } table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; } /* ---------------------- CUSTOM ---------------------------- */ html{height: 100%;} body {font-family: "Trebuchet MS", Arial, sans-serif;background: url(images/cute-bubbles-bg-large.jpg) no-repeat top center #000000; height: 100%; /* for the footer fix */ } h1,h2,h3,h4,h5, .customFont {font-family: 'Belgrano', serif;} /* the top background image loader */ #top_background{position:absolute;top: 0px;width: 100%;height: 533px;} /* the real big page container */ #container{position:relative;width: 100%;font-size: 11px;margin: 0px auto;z-index: 10; /* footer settings */ padding-bottom: 0em; } /* some header styles */ #headerContent{position:relative;width: 960px;margin: 30px 0px 10px 0px;} #headerContent h1{font-weight: normal;color: white;font-size: 3.2em;} #headerContent h1 a{font-weight: normal;color: pink;text-decoration:none; text-shadow:0px 2px 4px #333;} #headerContent h1 a:hover{font-weight: normal;color: pink;} #headerContent h5{font-weight: normal;font-size: 1.4em;color: white;text-shadow:0px 2px 4px #333;} /* the full page container */ #pageContainer{position:relative;width: 990px;font-size: 11px;margin: 0px auto;z-index: 200;} /* set the page top white shadow border */ #pageContainerCENTER{display: inline;position:relative;float: left;width: 960px;font-size: 11px;background:#151515; -webkit-box-shadow: 0px 0px 16px 4px #10302F; box-shadow: 0px 0px 16px 4px #10302F; } /* page specific styles ---------------------------------------------------- */ #theREALleft{display: inline;float: left;width: 650px;margin: 10px 0px 0px 10px;} .pagetitle{float: left;display: inline;width: 94%;margin: 10px 0px 0px 0px;padding: 0px 0px 0px 20px;font-weight: normal;color:#FFF;} .titleAndMeta{display: inline;float: left;width: 665px;background: url(images/h1_bg.jpg) repeat-x top #151515;} .titleAndMeta h2{display: inline;float: left;width: 630px;margin: 24px 0px 0px 32px;font-weight: normal;font-size: 1.6em;color:#ffffff;} .titleAndMeta h2 a{color:#ffffff;text-decoration: none;} .titleAndMeta h2 a:hover{color:pink;text-decoration: none;} .metaDate{display: inline;float: left;width: 200px;margin: 10px 0px 0px 26px;font-size: 0.9em;color: #a59797;} .metaCommentsEdit{display: inline;float: right;width: 400px;text-align: right;margin: 10px 20px 0px 0px;font-size: 0.9em;color: #a59797;} .metaCommentsEdit a{color: pink;text-decoration: none;} .metaCommentsEdit a:hover{color: #a59797;text-decoration: none;} .realPostItem{display: inline;float: left;width: 610px;margin: 10px 0px 20px 20px;padding: 10px 10px 10px 10px;background: url(images/item_bg.png) repeat-x top #151515;color: #cdc3c3;line-height: 1.8em;font-size:1.2em;border-top: 1px solid #272727;border-bottom: 1px solid #272727;} .realPostItem a{color:#fff;text-decoration: none;} .realPostItem a:hover{color: pink;text-decoration: none;} .postmetadata{display: inline;float: left;width: 610px;margin: 0px 0px 20px 20px;padding: 10px 10px 10px 10px;background: url(images/item_bg.png) repeat-x top #151515;border: 1px solid #313131;color: #cdc3c3;line-height: 1.5em;} .postmetadata a{color:#fff;text-decoration: none;} .postmetadata a:hover{color:pink;text-decoration: none;} .postmetadata_single{display: inline;float: left;width: 610px;margin: 0px 0px 20px 20px;padding: 6px 10px 6px 10px;color: #666;line-height: 1.5em;} .postmetadata_single a{color:#fff;text-decoration: none;} .postmetadata_single a:hover{color:pink;text-decoration: none;} .realPostItem code{display:inline;float:left;width: 600px;margin: 5px;} /* --------------------------------------------------------------------------------- SIDEBAR things here --------------------------------------------------------------------------------- */ #theREALright{display: inline;float: right;width: 240px;margin: 20px 5px 0px 0px;padding:0px 20px 0px 0px;} #searchform{float:left;width:90%;margin:0px 0px 0px 8px;padding:0px;} #searchform label{float:left;color:#FFFFFF;font-size: 1.5em;font-weight: normal;width:100%;font-family: 'Belgrano', serif;} #searchform #s{float:left;} #searchform #searchsubmit{float:left;} .pagenav, .categories{display: inline;float: left;width: 236px;background: url(images/left_bg_.jpg) no-repeat top center #191818;margin: 10px 0px 10px 0px;border-top: 1px solid #272727;} .pagenav h5, .categories h5{display: inline;float: left;margin:16px 0px 5px 20px;font-size: 1.5em;font-weight: normal;} .pagenav ul, .categories ul{display: inline;float: left;width: 220px;margin: 12px 0px 10px 12px;} .pagenav ul li, .categories ul li{display: inline;float: left;width: 220px;border-bottom: 1px solid #272727;} .pagenav ul li a, .categories ul li a{display: inline;float: left;width: 220px;text-decoration: none;color: #cdc3c3;padding: 6px 0px 7px 0px;} .pagenav ul li a:hover, .categories ul li a:hover{text-decoration: none;color: #f4f4f4;} .linkcat{display: inline;float: left;width: 236px;border-top: 1px solid #272727;background: url(images/left_bg_.jpg) no-repeat top center #191818;margin: 10px 0px 10px 0px;} .linkcat h2{display: inline;float: left;width: 220px;margin:16px 0px 5px 20px;font-size: 1.6em;font-weight: normal;} .linkcat ul{display: inline;float: left;width: 220px;margin: 12px 0px 10px 12px;} .linkcat ul li{display: inline;float: left;width: 220px;border-bottom: 1px solid #272727;} .linkcat ul li a{display: inline;float: left;width: 220px;text-decoration: none;color: #cdc3c3;padding: 6px 0px 7px 0px;} .linkcat ul li a:hover{text-decoration: none;color: #f4f4f4;} /* --------------------------------------------------------------------------------- */ .widget{display: inline;float: left;width: 236px;border-top: 1px solid #272727;background: url(images/left_bg_.png) no-repeat top center #191818;margin: 10px 0px 10px 0px;} .widget h2{display: inline;float: left;width: 220px;margin:16px 0px 5px 16px;font-size: 1.6em;font-weight: normal;color:#FFFFFF;} .widget ul{float:left;margin: 10px 0px; padding:3px 0px 3px 16px;} .widget ul li{display: block;width:100%;color:#FFFFFF;} .widget ul li a{display: block;width:100%;text-decoration: none;color: #cdc3c3;padding: 4px 0px;} .widget ul li a:hover{text-decoration: none;color: #f4f4f4;} /* --------------------------------------------------------------------------------- */ .widget_tag_cloud a{float:left;color: #cdc3c3;padding: 3px;margin: 3px;} .widget_search{padding: 20px 0px 20px 0px;} .widget_search input{float:left;border: 1px solid #f4f4f4;padding: 2px;margin: 0px 0px 0px 10px;} .widget_search label{margin: 0px 0px 5px 10px;} #calendar{display:inline;clear:left;} #calendar_wrap{display:inline;float:left;margin: 5px 0px 0px 30px;} #calendar_wrap a{color: #cdc3c3;} #wp-calendar #prev a, #wp-calendar #next a {font-size: 9pt;} #wp-calendar a {text-decoration: none;} #wp-calendar caption {font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;text-align: center;} #wp-calendar th {font-style: normal;text-transform: capitalize;} /* Begin Calendar */ #wp-calendar {empty-cells: show;margin: 10px auto 0;width: 155px;} #wp-calendar #next a {padding-right: 10px;text-align: right;} #wp-calendar #prev a {padding-left: 10px;text-align: left;} #wp-calendar a {display: block;} #wp-calendar caption {text-align: center;width: 100%;} #wp-calendar td {padding: 3px 0;text-align: center;} #wp-calendar td.pad:hover{background-color: #fff; } /* End Calendar */ /* footer styles */ #footer{display:inline;float:left;margin: 25px 0px 0px 0px;width: 960px;color:white;} #footerContent{margin: 0px 0px 0px 10px;color:white;font-size:1em;} #footerContent a{color:pink;} /* the bottom background image loader */ #bottom_background{position: relative;margin-top: -20em;display: inline;width: 100%;float:left;height: 300px;z-index: 100;} /** Comments part */ .commentlist{width: 590px;list-style:none;margin:10px 0px;padding:0;} .commentlist ul{list-style:none;margin:10px 0px;padding:0;display:block;width:95%;} .commentlist li{float: left;background: #312533;border: 1px solid pink;width: 100%;color: pink;font-size: 1.0em;font-family: Tahoma;padding: 10px;margin: 10px 0px 10px 0px;} /** the field styles adjustments */ #author{background: #312533;border: 1px solid pink;width: 200px;color: pink;font-size: 1.0em;font-family: Tahoma;padding: 5px;} #email {background: #312533;border: 1px solid pink;width: 200px;color: pink;font-size: 1.0em;font-family: Tahoma;padding: 5px;} #url {background: #312533;border: 1px solid pink;width: 200px;color: pink;font-size: 1.0em;font-family: Tahoma;padding: 5px;} #comment{background: #312533;border: 1px solid pink;width: 590px;color: pink;font-size: 1.0em;font-family: Tahoma;padding: 10px;} .navigation{display: inline;float: left;width: 100%;margin: 20px 0px 10px 20px;} .alignleft {display: inline;float: left;width: 45%;color: white;text-decoration: none;} .alignleft a{color: white;text-decoration: none;} .alignright {display: inline;float: right;width: 45%;color: white;text-decoration: none;text-align: right;margin: 0px 30px 0px 0px;} .alignright a{color: white;text-decoration: none;} .aligncenter {display: block;margin-left: auto;margin-right: auto;} .wp-caption {border: 1px solid #ddd;text-align: center;background-color: #f3f3f3;padding-top: 4px;margin: 10px;-moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .wp-caption img {margin: 0;padding: 0;border: 0 none;} .wp-caption-dd {font-size: 11px;line-height: 17px;padding: 0 4px 5px;margin: 0;} .wp-caption-text{} .sticky{} .gallery-caption{} .bypostauthor{} /* OTHER SCREENS */ @media only screen and (min-width: 35em) { } .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; } .ir br { display: none; } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } @media print { * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, 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; } h2, h3 { page-break-after: avoid; } }