/* Theme Name: picolight Theme URI: http://picomol.de/picolight/ Description: picolight is a neutral, light, clean and professional looking WordPress theme. You can set your own header image and favicon. You can configure the menu bar and the link color. Version: 1.1.10 Author: Valentin Author URI: http://picomol.de/about/ Tags: light, two-columns, right-sidebar, flexible-width, custom-colors, custom-header, custom-background, custom-menu, theme-options, sticky-post, translation-ready License: GNU/GPL Version 2 or later License URI: http://www.gnu.org/licenses/gpl.html */ /* ubuntu fonts */ @font-face { font-family: 'Ubuntu'; src: url('ubuntu-r.woff') format('woff'); font-weight: normal; font-style: normal; } /* elements */ body { font-family: Arial,sans-serif; margin:0 auto; font-size:14px; color: #292929; } img { border:0; } a:link ,a:active ,a:visited { text-decoration: none; border: none; text-decoration: none; } input::-moz-focus-inner { border:0; } p a:link, p a:active, p a:visited, .entry li a:link, .entry li a:active, .entry li a:visited { text-decoration: underline; } a:hover { text-decoration: none; color: #000; border: none; } a:focus { outline: none; text-shadow: 0 0 5px #BFBFBF; } textarea { border: 1px solid #F0F0F0; width: 80%; font-family: Arial,sans-serif; font-size: 13px; } input { width: 150px; } input:focus { outline: none; } .alignright { float: right; } .alignleft { float: left } acronym, abbr, span.caps { cursor: help; } acronym, abbr { border-bottom: 1px dashed #999; } .center { text-align: center; } .hidden { display: none; } .aligncenter,div.aligncenter { display: block; margin-left: auto; margin-right: auto; } /* main structure elements */ #wrapper { margin:0 auto; clear: both; background: #fff; } #wrapper #main { clear:both; overflow:hidden; } #wrapper #header #image { text-align: center; } #headerimage { width: 100%; clear: both; } #wrapper #header, #wrapper #footer { font-family: Ubuntu, Arial, 'sans serif'; padding-top: 2px; } #wrapper #header { background: #f0f0f0; border-top: 1px solid #CCCCCC; margin-bottom: 20px; } #wrapper #header h1 { font-weight: normal; font-size: 30px; margin: 0; float: left; text-transform: uppercase; text-shadow: 0 1px 0 #fff; } #wrapper #header h1 a { color: #808080; } #wrapper #header h1 a:hover { color: #292929; } #wrapper #header .description { font-size: 16px; text-transform: uppercase; color: #808080; text-shadow: 0 1px 0 #fff; } #wrapper #footer { padding: 15px; margin-top: 40px; min-height: 30px; color: #808080; background: #f0f0f0; border-top: 1px solid #ccc; } #footer a { } #main #content { margin-top: 7px; padding: 0; } #main #sidebar { line-height:18px; color: #292929; } #main #sidebar a:link, #main #sidebar a:visited { text-decoration: none; } #main #sidebar a:hover, #main #sidebar a:active { } #footer .left { margin: 10px; } #footer .right { margin: 10px; } #footer .right a:link, #footer .right a:visited { text-decoration: none; } #footer .right a:hover, #footer .right a:active { } /* navigation */ #mainnav { margin: 0 auto; display: block; font-size: 13px; text-transform: uppercase; clear: both; } #mainnav ul { padding: 0; margin: 0; min-height: 27px; } #mainnav ul li { list-style: none; position: relative; float: left; margin: 0 0 1px 0; padding: 0; border-bottom: none; } #mainnav ul ul li { padding: 0; margin-bottom: 0; border: none; } #mainnav ul ul li a { padding: 5px; } #mainnav ul li a { margin: 0; display: block; color: #808080; padding: 3px 0 0 15px; line-height: 38px; text-shadow: 0 1px 0 #fff; background: #f0f0f0; border-bottom: 1px solid #ccc; } #mainnav ul li:last-child a { padding-right: 15px; } #mainnav ul li a:hover { text-decoration: none; color: #292929; text-shadow: none; } #mainnav ul ul { display: none; float: left; position: absolute; top: 42px; left: 2px; z-index: 500; font-size: 12px; padding: 0; padding-left: 8px; background: #f0f0f0; border-bottom: 1px solid #ccc; } #mainnav ul ul ul { left: 100%; top: 0; font-size: 12px; } #mainnav ul ul a { width: 9em; height: auto; line-height: 15px; border: none; } #mainnav ul li:hover > ul { display: block; } .navigation { padding: 15px; } /* widgets */ .widget { overflow:hidden; clear:both; margin-bottom: 25px; font-size: 13px; } .widget .textwidget, .widget .tagcloud { padding: 0 10px 0 10px; margin-bottom: 10px; } .widget table { padding: 0 0 10px 10px; margin-right: 10px; } .widget h4 { font-size:12px; margin: 0 0 10px 0; padding: 8px 5px 5px 8px; text-transform: uppercase; color: #808080; } .widget ul { margin: 0; padding: 0; } .widget ul li { background:url(images/icon_bullet.png) 5px 2px no-repeat; padding:0 7px 7px 24px; list-style-type: none; } .widget_categories ul li { width:40%; float:left; margin:0; } .widget select { margin: 10px; } .widget_search { max-width: 300px; } .widget_search form { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; height: 35px; margin: 0 15px; } .widget_search input{ width:65%; border: none; background: transparent; height: 25px; padding: 5px 5px 5px 15px; color: #808080; text-shadow: 0 1px 0 #fff; } .widget_search input:focus { color: #292929; } .widget_search input#searchsubmit { width: 30px; color: transparent; background: transparent; border: none; background: url(images/lupe.png) 0 -21px no-repeat; text-shadow: none; position: relative; left: 15px; } .widget_search input#searchsubmit:hover { background: url(images/lupe.png) 0 0px no-repeat; } .widget_calendar table { width: 100%; text-align: center; padding-left: 0; } .search-title { padding: 0 15px; } /* posts and pages */ .post, .pages { margin-bottom: 25px; } .post .title, .pages .title { float:left; width: 100%; } .post .title h1, .pages .title h1, .post .title h2, .pages .title h2 { font-size: 22px; margin: 7px 15px; padding: 0; } .post .meta, .pages .meta { font-size: 13px; color: #808080; padding: 5px 15px; clear: both; border-top: 1px solid #ccc; } .post .thumbnail { float: left; margin: 10px 15px 10px 10px; } .post .entry, .pages .entry { line-height:24px; display:block; clear:both; overflow:hidden; color:#292929; text-align: justify; padding: 10px 15px 16px 15px; } .post p, .pages p { margin:0; padding: 6px 0; } .post blockquote, .pages blockquote { background:transparent url(images/quote.png) no-repeat scroll 0 0; font-style:italic; margin:5px 0 5px 0; padding:10px 15px 10px 60px; } .post ul.split3cols,.post ul.split2cols,.pages ul.split3cols,.pages ul.split2cols { font-size: 13px; overflow:auto; width:520px; } .post ul, .pages ul { list-style-type:none; margin:10px 0; padding:0 0 0 10px; } .post ul.split3cols li, .pages ul.split3cols li { float:left; width:155px; margin-right:5px; } .post ul.split2cols li, .pages ul.split2cols li { float:left; width:240px; margin-right:5px; } .pages ul.split3cols,.pages ul.split2cols { font-size: 13px; overflow:auto; width:520px; } .pages ul { list-style-type:none; margin:10px 0; padding:0 0 0 10px; } .post ul li, .pages ul li { background:url(images/icon_bullet.png) 5px 2px no-repeat; line-height: 24px; margin:4px 0; padding:0 0 0 25px; } .post .entry h1,.post .entry h2,.post .entry h3,.post .entry h4, .pages .entry h1,.pages .entry h2,.pages .entry h3,.pages .entry h4, #comment-form h3, .commentform h3 { padding: 5px 5px 2px 0; } h1, h2, h3, h4 { font-family: Ubuntu, Arial, 'sans serif'; font-weight: normal; } .post .entry h1, .pages .entry h1 { font-size:20px; } .post .entry h2, .pages .entry h2, #comment-form h3,.commentform h3 { font-size:18px; margin-top: 20px; } .post .entry h3, .pages .entry h3 { font-size:16px; margin-top: 20px; } .post .entry h4, .pages .entry h4 { font-size:14px; margin-top: 5px; } .pages h1,.pages h2,.pages h3,.pages h4 { margin: 10px 0 5px 0; padding: 5px 0 0 5px; color: #292929; } .pagelinks { clear: both; color: #808080; margin-top: 25px; } .pagelinks p { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; text-shadow: 0 1px 0 #fff; background: #f0f0f0; padding: 10px; display: inline; } .pagelinks a:link, .pagelinks a:visited { text-decoration: none; } .pagelinks a:hover { } /* tables */ .post table th, .pages table th, .comment table th { font-size: 13px; font-weight: normal; color: #808080; text-transform: uppercase; padding: 2px 4px; text-align: left; } .post table, .pages table, .comment table { margin: 10px 0; width: 100%; border-collapse: collapse; } .post td, .pages td, .comment td { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding: 2px 4px; } /* comments */ #comments { } .comment { overflow: hidden; } #comments h3, h3#reply-title { font-size: 22px; margin: 0; padding: 10px 15px 7px; background: #fff; border-bottom: 1px solid #ccc; } .commentlist { padding: 15px; list-style:none; overflow:hidden; clear:both; margin: 0; } .commentlist li { list-style:none; } .children li { border: 0px; } .children p { clear: left; } .commentlist p { color:#292929; line-height:24px; clear: left; text-align: justify; } .comment-body { padding: 6px 0px; margin-bottom: 10px; margin-right: 5px; margin-left: 5px; } .comment-body ul li { list-style-type: disc; } .comment-body ol li { list-style-type: decimal; } .comment-body ul, .comment-body ol { margin-top: 15px; } .comment-body li { border: none; padding:0 7px 7px 4px; margin: 0 0 0 10px; } .comment-author .says { display: none; } .commentlist cite, .commentlist cite a { font-style: normal; } .avatar { float: left; margin: 0 15px 0 0; } .comment-meta-date a, .reply a { color: #808080; } .comment-meta-date a:hover, .reply a:hover { color: #000; } .comment-meta-date { font-size: 12px; } .commentlist .reply { padding:0px 5px 5px 10px; text-align:right; font-size: 13px; } .comment .fn, .comment .fn a:link { font-size: 15px; display: block; } .pingback p { margin: 10px 0 10px 0; } .pingback a:link { text-decoration: none; } #respond { margin-top: 25px; } #comment-form, #respond a { text-decoration: none; } #comment-form { } #commentform { padding: 5px 20px 10px 15px; margin-top: 10px; color: #292929; text-shadow: 0 1px 0 #fff; font-size: 13px; } #comment-form span .required { width: 20px; } #comment-form input, #respond input { display: block; background: #fff; padding: 7px 10px; margin: 5px 5px 5px 0; width: 97%; max-width: 300px; color: #7F7F7F; border: none; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; background: #f0f0f0; text-shadow: 0 1px 0 #fff; } #comment-form #submit, #respond #submit { width: 250px; height: 30px; } #comment-form input:focus, #respond input:focus { color: #292929; outline: none; } #comment-form #submit:hover, #respond #submit:hover, #comment-form #submit:focus, #respond #submit:focus { outline: none; color: #292929; } #comment-form textarea, #respond textarea { width: 97%; padding: 10px; margin: 5px 5px 5px 0; color: #7F7F7F; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; background: #f0f0f0; text-shadow: 0 1px 0 #fff; } #comment-form textarea:focus, #respond textarea:focus { color: #292929; outline: none; } #cancel-comment-reply-link { font-size: 13px; } .comment-notes { } .comment-nav { margin: 10px 15px 0 15px; font-size: 13px; } /* images and videos */ #content .wp-caption { max-width: 100%!important; margin-top: 25px!important; margin-bottom: 25px!important; } img.centered, img.aligncenter { display: block; margin:0 auto; overflow:hidden; } img.alignright { display: inline; } img.alignleft { display: inline; } #content img { max-width:100%; height: auto; } #content img.aligncenter, #content .wp-caption.aligncenter { margin: 0 auto; margin-top: 25px; margin-bottom: 25px; } #content img.alignleft, #content .wp-caption.alignleft { margin: 15px 20px 0 0; } #content img.alignright, #content .wp-caption.alignright { margin: 15px 0 0 20px; } #content img.alignnone { margin: 20px 0; } #content .wp-caption.alignnone { margin: 0 0 20px 0; } #content .single-entry-content .wp-caption { max-width: 100%; text-align: center; } .wp-caption-text { font-size: 13px; color: #808080; text-align: center; } #content object, #content embed, #content iframe { max-width: 100%; margin: 25px 0 25px 0; display: block; } /* other */ .more-link { } .sticky { background: #f0f0f0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding-top: 15px; text-shadow: 0 1px 0 #fff; } .gallery-caption { } .bypostauthor { } .form-allowed-tags { display: none; } .nocomments { margin-left: 15px; color: #7F7F7F; } .results { background: #f0f0f0; padding: 5px 15px 5px 15px; margin: 0 0 10px 0; } .comment-awaiting-moderation { font-size: 12px; font-style: normal; } a, input, submit { -webkit-transition: color 0.2s; -moz-transition: color 0.2s; -o-transition: color 0.2s; -ms-transition: color 0.2s; transition: color 0.2s; } /* media queries for responsive design */ @media screen and (max-width: 850px) { #wrapper #header h1 { padding: 10px 0 0 15px; } #content { max-width: 643px; margin: 0 auto; } #sidebar { width: 100%; clear: left; margin-top: 40px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; background: #f0f0f0; padding: 10px 10px 0 10px; text-shadow: 0 1px 0 #fff; } .widget { max-width: 300px; margin: 0 auto; margin-bottom: 20px; } .right { clear: left; text-align: left; } .left { clear: left; text-align: left; } .description { clear: left; margin: 15px 15px 10px; font-size: 14px!important; } .widget_search form { background: #fff; } } @media screen and (min-width: 851px) { #content { float: left; max-width: 67%; margin-left: 2%; } #wrapper #header h1 { padding: 10px 0 8px 15px; } #sidebar { min-width: 180px; width: 25%; float: right; margin-top: 7px; margin-right: 2%; padding-right: 0px; padding-left: 0px; } #wrapper { max-width: 1050px; padding: 25px 25px 0 25px; } .right { float:right; width:40%; text-align:right; } .left { width: 40%; text-align: left; float: left; } .description { float: right; position: relative; top: 1px; right: 15px; } .widget_search form { background: #f0f0f0; } } @media screen and (min-width: 501px) { #mainnav { padding-bottom: 14px; } #header { border-bottom: 1px solid #CCCCCC; } .indexexzerpt { margin-left: 180px; } .comment-content { margin: 15px 5px 0 0; } .pingback p { margin-left: 75px; } } @media screen and (max-width: 500px) { #mainnav ul { min-height: 34px; border-bottom: none; } #mainnav ul li { width: 50%; height: 34px; overflow: hidden; } #mainnav ul li a { line-height: 30px; } #main { padding-top: 20px; } #header { border-bottom: none; } #mainnav { border-bottom: none; } .thumbnail { display: none; } .avatar { width: 40px; } ul.children { padding-left: 15px; } .comment-content { margin-top: 5px; } }