/* Theme Name: PRiNZ Clear Focus Theme URI: http://www.der-prinz.com/responsive-wordpress-business-and-portfolio-theme-clear-focus/ Description: A clean premium mobile responsive portfolio theme for Wordpress with a clear focus on your content. Version: 0.9 Author: Michael Oeser Author URI: http://www.der-prinz.com License: The CSS, XHTML and design is released under GPL License URI: http://www.opensource.org/licenses/gpl-license.php */ /* STRUCTURE OF THIS CSS DOCUMENT - CSS RESET - WP WANTS THEM - HTML ELEMENTS - HYPERLINKS - IMAGES AND VIDEO - MAIN STRUCTURE + HOMEPAGE STUFF - SLIDERS / LEAD ARTICLE - HEADLINES AND RELATED STUFF - SIDEBAR - WIDGETS - GENERIC BUTTON STYLES - NAVIGATION BAR STYLES - CONTENT + BREADCRUMBS + POST FORMATS + PAGE NAVIGATION LINKS + FORM ELEMENTS + COMMENTS - SPECIAL STYLES FOR ADDITIONAL PAGE TEMPLATES + PORTFOLIO PAGE + LANDING PAGES + FULLWIDTH PAGE - FOOTER - FLOAT PROPERTIES */ /*************************************** CSS Reset by Eric Meyer v1.0 | 20080212 ****************************************/ 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, b, u, i, center, 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-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } /****************************************** * WP WANTS THEM! ******************************************/ .sticky { } .gallery-caption { } .bypostauthor { } /****************************************** * HTML ELEMENTS ******************************************/ body { color: #555; padding: 0; background: url(images/page-backgrounds/linen.png) #fff; } body, select, input, textarea { font-size: 14px; font-family:'Open Sans', Arial, Verdana, Sans-Serif; line-height:1.8em; } p { margin: 15px 0; } hr { display: block; height:1px; background:#e8e8e8; border:0; } small { font-size: 0.8em; padding:3px 0px; } /*** The classes for the background structures ***/ .none { background: none; } .sand { background: url(images/page-backgrounds/sand.png); } .linen { background: url(images/page-backgrounds/linen.png); } .arab-tile { background: url(images/page-backgrounds/arab_tile.png); } .arches { background: url(images/page-backgrounds/arches.png); } .connect { background: url(images/page-backgrounds/connect.png); } .embossed-paper { background: url(images/page-backgrounds/embossed_paper.png); } .gplay { background: url(images/page-backgrounds/gplaypattern.png); } .gradient-squares { background: url(images/page-backgrounds/gradient_squares.png); } .graphy { background: url(images/page-backgrounds/graphy.png); } .knitted-netting { background: url(images/page-backgrounds/knitted-netting.png); } .large-leather { background: url(images/page-backgrounds/large_leather.png); } .purty-wood { background: url(images/page-backgrounds/purty_wood.png); } .scribble-light { background: url(images/page-backgrounds/scribble_light.png); } .shinedotted { background: url(images/page-backgrounds/shinedotted.png); } .stacked-circles { background: url(images/page-backgrounds/stacked_circles.png); } .small-crackle-bright { background: url(images/page-backgrounds/small-crackle-bright.png); } .gplay { background: url(images/page-backgrounds/gplaypattern.png); } .subtle-stripes { background: url(images/page-backgrounds/subtle_stripes.png); } .white-brick-wall { background: url(images/page-backgrounds/white_brick_wall.png); } .white-tiles { background: url(images/page-backgrounds/white_tiles.png); } .wide-rectangles { background: url(images/page-backgrounds/wide_rectangles.png); } .xv { background: url(images/page-backgrounds/xv.png); } /*************************************** * HYPERLINKS ****************************************/ /*** standard link behaviour ***/ a:link, a:active, a:visited { text-decoration: underline; } a:hover { text-decoration: none; } /*** Headerbar links ***/ #headerbar a { color:#f8f8f8; text-decoration: none; } #headerbar a:hover { text-decoration: underline; } /*** Custom WordPress Menu in Headerbar (if used) ***/ #headerbar .left .menu li { /* .menu is a default custom menu class */ float:left; list-style-type:none; padding-left:0; margin-right:10px; } #headerbar .right .menu li { /* .menu is a default custom menu class */ float:right; list-style-type:none; padding-right:0; margin-left:10px; } /*** HTML headline links ***/ h2 a:link, h2 a:active, h2 a:visited, h3 a:link, h3 a:active, h3 a:visited, h4 a:link, h4 a:active, h4 a:visited { text-decoration:none; } /*** Links in the sidebar ***/ #sidelist a:link, #sidelist a:active, #sidelist a:visited { text-decoration:none; color:#888; } #sidelist a:hover { text-decoration:underline; } #sidelist a.readmore { color:#555; } /*** Custom WordPress Menu in Sidebar (if used) ***/ #sidelist .menu li { list-style-type:none; background:none; padding-left:0; margin-bottom:0!important; } #sidelist .menu li a:link, #sidelist .menu li a:visited { /* .menu is a default custom menu class */ background: #fff; display:block; padding:4px 4px 4px 20px; border-bottom: 1px solid #e8e8e8; -webkit-transition: background 0.2s ease-in-out; -moz-transition: background 0.2s ease-in-out; -ms-transition: background 0.2s ease-in-out; -o-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out; } #sidelist .menu li a:hover, #sidelist .menu li a:active { background: #f8f8f8; text-decoration:none!important; } #sidelist .menu li ul li a, #sidelist .menu li ul li a:visited { padding:2px 2px 2px 40px!important; border:0; } #sidelist .menu li ul li a:hover, #sidelist .menu li ul li a:active { text-decoration:none!important; } /*** How tags appear ***/ #tags a { text-decoration:none; } #tags a:hover { text-decoration:underline; } /*** Links within comments metadata (date, Author etc.) ***/ .commentmetadata a:link, .commentmetadata a:active, .commentmetadata a:visited { color: #999; text-decoration:none; } .commentmetadata a:hover { text-decoration:underline; } /*** Links in the footer ***/ #footer a { color:#ddd; text-decoration: none; } #footer a:hover { text-decoration: underline; } #twocol_alternative_footer a, #fourcol_alternative_footer a { color:#ddd; } /*** Custom WordPress Menu in the regular small Footer widgetized area ***/ #footer .right .menu li { /* the custom menu widget in the right footer area */ float:right; list-style-type:none; padding-right:0; margin-left:10px; } .headerbarleft .menu li { /* .menu is a default custom menu class */ float:left; list-style-type:none; padding-right:0; margin-right:10px; } .headerbarright .menu li { /* .menu is a default custom menu class */ float:right; list-style-type:none; padding-right:0; margin-left:10px; } /* The "go to Top" link */ #top-link { display:none; position:fixed; right:10px; bottom:10px; font-weight:bold; text-decoration:none; background:#eee; color:#333!important; padding:10px;-webkit-border-radius: 3px; border-radius: 3px; opacity:.5;} #top-link:hover {text-decoration:none!important;opacity:.8;} /********************************************** * IMAGES AND VIDEO ***********************************************/ img, a:link img, a:visited img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } #featured img, #featured a:link img, #featured a:visited img { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom:10px; } #homecontent-bottom img, #homecontent-bottom a:link img, #homecontent-bottom a:visited img { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #sidebar img, #sidebar a:link img, #sidebar a:visited img { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .entry img, .entry a:link img, .entry a:visited img, img.blogimg { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } img.blogimg { margin-top:10px; } /* Make some images grayscale and fade */ img.grayscale { filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, IE10 */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ filter: grayscale(100%); -webkit-transition: all .3s ease; -moz-transition: filter .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; backface-visibility:hidden; /* Fix for transition flickering */ -webkit-backface-visibility:hidden; /* Chrome and Safari */ -moz-backface-visibility:hidden; /* Firefox */ } img.grayscale:hover { filter: none; -webkit-filter: grayscale(0%); filter: grayscale(0%); } img.carousel { opacity: .6; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } img.carousel:hover { opacity: 1; } /**** WordPress image stuff ****/ .aligncenter { display:block; margin:0 auto; } .alignleft { float:left; margin: 5px 10px 5px 0; } .alignright { float:right; margin:5px 0 5px 10px; } #leadcontainer .alignleft { margin: 0 20px 0 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #featured .alignleft { margin: 5px 10px 10px 0; } #featured .alignright { margin: 5px 0 10px 10px; } #homecontent-bottom .alignleft { float:left; margin:5px 10px 5px 0; } #homecontent-bottom .alignright { float:left; margin:5px 0 5px 10px; } .wp-caption { padding:0 8px 0 0; text-align: center; } .wp-caption p.wp-caption-text { color:#888; font-size: 11px; font-weight: normal; line-height: 10px; margin:7px 0; } img.wp-smiley, img.wp-wink { float: none; border: none; } /***iFrame Video ***/ iframe { max-width:100%; } /********************************************** * MAIN STRUCTURE + HOMEPAGE STUFF ***********************************************/ #boxed { margin:40px auto; width:980px; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); } .wrap { /* the containers that wrap around the content parts */ width:940px; margin:0 auto; padding:0 20px; } .filled { background-color:#fff; } .sliderwrap { /* the container that wraps around the slider area on the homepage */ width:100%; overflow:hidden; margin:0 auto; padding:0; } #pagetitles { background: #f8f8f8; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; padding:10px; } #content.left {/* main content */ width:63.8298%; border-right:1px solid #e8e8e8; padding-right:20px; } #content.right {/* main content */ width:63.8298%; border-left:1px solid #e8e8e8; padding-left:20px; } #headerbar { background:#222; color:#f8f8f8; padding:12px 0; font-size:0.9em; } .headerbarleft { float:left; } .headerbarright { float:right; } #headerbar p { margin:0 } #header { /* the container including the logo and the main navigation */ height:120px; } #logo { float:none; margin:0 auto; text-align:center; height:120px; } #page { /* main container for content without #header and alternate footer*/ margin:20px auto; } .center { text-align:center; } .left { float:left; } .right { float:right; } .last { padding-right:0!important; margin-right:0!important; } #actionbar { background: #f8f8f8; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; color:#777; text-shadow:#fff 1px 1px; font-weight:200; font-size: 30px; padding:30px 60px; text-align:center; line-height:34px; } #actionbar p { margin:0; } /*** Featured articles on the homepage ***/ #featured { padding: 20px 0; } #featured p { margin:0 0 15px 0; } .featuredbox { width:300px; padding:0 20px 10px 0; float:left; } .featured_widget { margin:20px 0; } #featured div .more { margin-bottom:5px; padding-left:20px; background:url(images/icons/icon-list.png) no-repeat; } #featured div .more a { text-decoration:none; } #featured div .more a:hover { text-decoration:underline; } #featured h4 { /* used for the title link of the Featured Post widget "more from this category list" */ color:#666; } /*** Portfolio Carousel ***/ #carousel { padding:20px 0; } /*** The 2 columns on the homepage ***/ #homecontent-bottom { padding: 20px 0; margin:20px 0 0 0; background: #f8f8f8; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; } #homecontent-bottom p { margin:0 0 15px 0; } .homebottom_left { width: 23%; float: left; padding:0 10px 0 0; } .homebottom_middle1 { width: 23%; float: left; padding:0 10px 0 10px; } .homebottom_middle2 { width: 23%; float: left; padding:0 10px; } .homebottom_right { width: 23%; float: left; padding:0 0 0 10px; } .homebottom_widget { margin:20px 0; } .byline, .byline a { /* the "byline" that shows date, author and comments on the homepage boxes */ font-size:10px; margin:0 0 5px 0; } /********************************************** * SLIDERS AND LEADARTICLE ***********************************************/ /*** FlexSlider and portfolio carousel (basic FlexSlider styles are located in /styles/flexslider.css) ***/ .flex-slider-text { position:absolute; left:10%; top:10%; z-index:99; background:url(images/bg-slider-text-transparent.png); border:1px solid #000; color:#ddd; padding:1.5% 2% 0.5% 2%; text-align:left; -webkit-border-radius: 7px 0px 0px 7px; border-radius: 7px 0px 0px 7px; } .flex-slider-text p { margin-bottom:25px; } /*** Leadarticle ***/ #leadcontainer { background: #f0f0f0; color:#777; font-size:1.2em; margin: 0; padding: 20px; } .leadmeta { font: 11px Arial, Helvetica, sans-serif; color:#666; text-decoration:none; } #leadcontainer p { margin-bottom:10px; line-height:1.6; } /********************************************************************************* * HEADLINES AND RELATED STUFF **********************************************************************************/ h1, h2, h3, h4, h5, h6 { font-weight:normal; text-transform:uppercase; line-height:1.2em; } h1 { font-size: 30px; margin: 20px 0; } h2 { font-size: 26px; margin: 20px 0; } h3 { font-size: 24px; margin-bottom:4px; } h4 { font-size: 20px; } h5, h6 { font-size: 18px; } .blogtitle, .blogtitle a {/* That´s only relevant, if you don´t use an image for your Logo in the header */ font-weight:200; font-size: 36px; text-transform:uppercase; text-decoration:none; padding-top:20px; line-height:normal; } .description { font-weight:bold; } .flex-slider-text h1 { color: #eee; margin:0; padding:0; background:none; line-height:1.1em; } #leadcontainer h2, #leadcontainer h2 a { font-size:34px; text-align:left; line-height:100%; display:block; text-decoration:none; background:none; border:none; margin: 5px 0 10px 0; padding:0; } #featured h2, #featured h2 a { background:none; border:none; margin:0 0 10px 0; text-decoration:none; } #homecontent-bottom h2, #homecontent-bottom h2 a { margin:0 0 10px 0; text-decoration:none; font-size:22px; } #homecontent-bottom h3, #homecontent-bottom h3 a { margin:0 0 10px 0; text-decoration:none; font-size:22px; } #homecontent-bottom h4, #homecontent-bottom h4 a { font-size: 10px; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:4px; font-weight:bold; color:#4D4D4D; text-shadow: #fff 1px 1px; } h3.carous_h3 { margin:0 0 10px 0; } h1.pagetitle, h2.pagetitle { color:#777; } .entry h1, .entry h2 , .entry h3, .entry h4, .entry h5, .entry h6 { margin: 40px 0 0 0; padding:0; } #sidebar h3, #sidebar h2 { font-size: 18px; border-bottom:1px solid #e8e8e8; padding:5px 0 5px 2px; margin:20px 0 15px 0; color:#4d4d4d; } #respond h3 { border-top:1px solid #e8e8e8; margin-top:25px; padding-top:20px } h3#comments { margin-top:32px } /****************************************** * SIDEBAR ******************************************/ #sidebar { width: 31.9159%; } #sidelist { color:#888; line-height: 1.6em; } #sidelist .sidebar_widget { margin-bottom:40px; } #sidelist li { margin-bottom:10px; padding-left:20px; background:url(images/icons/star_10x10.png) 0px 5px no-repeat; } /****************************************** * WIDGETS ******************************************/ /*** These are specific css rules for the PRiNZ Widget Factory Widgets ***/ /* used by more than one Widget */ .sidebar_widget img, .sidebar_widget a:link img, .sidebar_widget a:visited img { } /* PRiNZ Featured Categories Widget */ .extra_posts h4 { margin-top:20px; } .postlist .more { margin-top:20px; } /* PRiNZ Recent Posts Widget */ .prinz_widget_date { font-size:10px; } /* PRiNZ Social Icons Widget */ #headerbar .prinz_social_icons li {opacity:.3;-webkit-transition: opacity 0.1s ease-in-out; -moz-transition: opacity 0.1s ease-in-out; -ms-transition: opacity 0.1s ease-in-out; -o-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out;} #headerbar .prinz_social_icons li:hover {opacity:.8;} .headerbarleft .prinz_social_icons ul li, .headerbarright .prinz_social_icons ul li { margin-bottom:0!important; } /* PRiNZ Twitter Widget */ #twitter_update_list li { margin-bottom:5px; padding-left:20px; background:url(images/icons/twitter_10x10.png) 0px 6px no-repeat; } /*********************************************** * GENERIC BUTTON STYLES ************************************************/ button, .button { border:none; font-weight:bold; display: inline-block; white-space: nowrap; padding: 10px 20px; margin:10px 0; filter: alpha(opacity=80); opacity: 0.8; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-decoration:none!important; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; backface-visibility:hidden; /* Fix for transition flickering */ -webkit-backface-visibility:hidden; /* Chrome and Safari */ -moz-backface-visibility:hidden; /* Firefox */ } button:hover, .button:hover { text-decoration:none!important; } button:hover, .button:hover, input[type=submit]:hover { filter: alpha(opacity=100); opacity: 1; } button.medium, .button.medium { padding: 14px 18px; font-size:1.2em; } button.large, .button.large { padding: 18px 22px; font-size:1.4em; } button.alt, .button.alt { background: #777; } a:link.button.alt { color:#ddd; } a:hover.button.alt { color:#fff!important; } #leadcontainer .button .flex-slider-text .button { padding:14px 22px; font-size:13px; } #leadcontainer .button:hover { } .flex-slider-text .button:hover { } #featured .button, #homecontent-bottom .button { margin:0; } #homecontent-bottom .button { background:#777; color:#fff!important; } .entry .excerptmore { margin-top:30px; } /*********************************************** * STYLES FOR THE HORIZONTAL NAVIGATION MENUES ************************************************/ /*** BASIC STYLES FOR ALL MENUS ***/ .sf-menu, .sf-menu * { margin:0; padding:0; list-style:none; } .sf-menu { line-height: 2.0; } .sf-menu ul { position:absolute; top:-999em; width:9em; /* left offset of submenus need to match (see below) */ } .sf-menu ul li { width:100%; } .sf-menu li:hover { visibility:inherit; /* fixes IE7 'sticky bug' */ } /*.sf-menu li { float:left; position:relative; }*/ .sf-menu li { float:none; position:relative; display:inline-block; zoom:1; *display:inline; width:auto; } .sf-menu a { display:block; position:relative; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left:0; top:40px; /* match top ul list item height */ z-index:9999; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top:-999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left:9em; /* match ul width */ top:0; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top:-999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left:9em; /* match ul width */ top:0; } /*** PRIMARY MENU STYLES (MAIN MENU BAR) ***/ .prinz-menu-primary-mobile { display:none; ; /* Don´t show the mobile version of the menu on desktops */ } /*.prinz-menu-primary { float:right; margin-top:15px; font-size:12px; }*/ .prinz-menu-primary { float:none; margin:0 auto 10px; text-align:center; font-weight:normal; } .prinz-menu-primary a, .prinz-menu-primary a:visited { /* visited pseudo selector so IE6 applies text colour*/ padding: 0 10px; line-height: 40px; text-decoration: none; text-transform:uppercase; } .prinz-menu-primary a .sf-sub-indicator { background: none; display: block; width: 10px; height: 10px; text-indent: -9999px; overflow: hidden; position: absolute; top: 15px; right: 5px; } .prinz-menu-primary a:hover .sf-sub-indicator { background: none; } .prinz-menu-primary li li a { font-weight:normal; } .prinz-menu-primary li ul { } .prinz-menu-primary .sf-menu li li { border-bottom: 1px solid #333; background:#222; margin-bottom:0px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out;} .prinz-menu-primary .sf-menu li li:last-child {border-bottom:none;} .prinz-menu-primary .sf-menu li li li { background:#222; margin-left:0px; } .prinz-menu-primary li.sfHover a, .prinz-menu-primary a:focus, .prinz-menu-primary a:hover, .prinz-menu-primary a:active { /* hover status of main navigation */ color: #999!important; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .prinz-menu-primary .sf-menu li li:hover, .prinz-menu-primary .sf-menu li li.sfHover, .prinz-menu-primary .sf-menu li li a:focus, .prinz-menu-primary .sf-menu li li a:hover, .prinz-menu-primary .sf-menu li li a:active { background:#000; } .prinz-menu-primary li li a .sf-sub-indicator, .prinz-menu-primary li li a:hover .sf-sub-indicator { background: url(images/arrow-right.png); } /****************************************** * Content styles ******************************************/ /*** The breadcrumbs ***/ #breadcrumbs { font-size:0.9em; color: #888; background: #f4f4f4; margin: 10px 0; padding: 5px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #breadcrumbs a { text-decoration:none; } /*** Pagination formats for the achives (previous and next links) ***/ .navigation a { width: 120px; border: 1px dotted #ccc; padding:2px 4px 2px 4px; text-align:center; font-size:0.9em; text-decoration:none; color:#666; } .navigation a:hover { background-color:#eee; } .preventries { float:left; } .nextentries { float:right; } /*** Post and Page Formating ***/ /* the WordPress post formats first. They are not really used by this theme. */ .format-aside { } .format-gallery { } .format-link { } .format-image { } .format-quote { } .format-status { } .format-video { } .format-audio { } /* Post formating used by the theme */ .entry { padding-bottom:10px; } .post blockquote { color:#666; font-family: Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:1.8em; line-height:1.4em; text-align:center; padding:6px 16px; margin:18px 35px; border-top:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8; } .post ul li { list-style:none; margin-bottom:5px; margin-left:10px; padding-left:25px; background:url(images/icons/icon-entrylist.png) 6px 6px no-repeat; } .page ul.bullets li { margin-bottom:5px; padding-left:20px; background:url(images/icons/icon-entrylist.png) no-repeat; } .post ol li { margin-bottom:5px; margin-left:30px; } #tags { padding:5px; background-color:#f8f8f8; border:1px solid #e8e8e8; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .postmetadata { margin: 30px 0; } /*** Paging Bar ***/ #paging { width: 100%; text-align:center; margin-bottom: 20px; } #paging.pages a { text-decoration:none; margin: 0 5px; padding: 5px 8px; display: inline-block; border:1px solid #ccc; background: #eee; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #paging.pages a:hover { border: 1px solid #ccc; background: #fff; } #paging.pages a.active { font-weight:bold; border: 1px solid #ccc; background: #ddd; } /*** Form Elements ***/ select { background:#eee; border-top:2px solid #999; border-bottom:2px solid #999; border-left:none; border-right:none; width:100% } #searchform { padding:0; } #sidebar #searchform { padding:20px 0 20px 0; } .searchfield { width:270px; padding: 10px 5px 10px 25px; background: url(images/icons/icon-search.png) 5px center no-repeat #f8f8f8; color:#666; border:1px solid #e8e8e8; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } .searchfield:hover, .searchfield:focus { background: url(images/icons/icon-search.png) 5px center no-repeat #fff; text-decoration:none; } #header .searchfield { /* rounded Apple-like corners if it is in the header. Of course not in stupid old IE */ width:150px; } .newsletter { width:278px; margin-bottom: 5px; padding: 10px; background: #fff; color:#666; border:1px solid #e8e8e8; border-radius: 3px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .newsletter:hover, .newsletter:focus { background: #eee; text-decoration:none; } /*** Comments ***/ #commentform input[type=text] { background:#f8f8f8; width: 170px; margin: 5px 5px 1px 0; padding:10px; border:1px solid #e8e8e8; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #commentform input[type=text]:hover, #commentform input[type=text]:focus { background:#fff; border:1px solid #e8e8e8; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } #commentform textarea { background:#f8f8f8; width: 96%; margin-top:5px; padding: 10px; border:1px solid #e8e8e8; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } #commentform textarea:hover, #commentform textarea:focus { background:#fff; border:1px solid #e8e8e8 } .commentlist { padding-left:30px; } .commentlist li { border: 1px solid #e8e8e8; background:#f8f8f8; margin: 15px 0 3px; padding: 8px 15px 10px 15px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .commentlist li li { background:#f4f4f4; } .commentlist li li li { background:#f1f1f1; } #commentform small { background:#FFF; font-weight:bold; padding:0; } .commentmetadata { color:#999; font-size:0.8em; } .blogmetadata { background:#e8e8e8; text-align:center; font-size:0.9em; line-height:1.1; width:80px; float:left; margin: 22px 20px 6px 0;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } span.authormeta {} span.datemeta {display:block;background:#333;color:#fff; font-weight:bold; padding:5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} span.daymeta {font-size:2em;} span.postcommentsmeta { display:block; padding:5px; } span.postcommentsmeta a {color: #777; text-decoration:none;} .commentlist small { background:#fff; padding:2px 5px 2px 5px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; } .commentlist cite { font-weight:bold; } /***************************************************** * PAGE TEMPLATE STYLES ****************************************************/ /*** Styles for the "Portfolio" Page Template ***/ #portfolio { width:100%; } #portfolio li { list-style-type: none; background:none; padding:0; } #portfolio-filter { list-style-type: none; } #portfolio-filter li { display: inline-block; padding: 6px 12px; margin: 0 10px 20px 0; background:#f8f8f8; border:1px solid #e8e8e8; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #portfolio-filter li a { text-decoration: none; } #portfolio-filter li .current, #portfolio-filter li:hover { color: #222; } #portfolio-wrapper { padding-bottom: 25px; } #portfolio-list { list-style-type: none!important; } .portfolio-small #portfolio-list .portfolio-item { float: left; margin: 0 10px 50px 0; width:300px; height:150px; } .portfolio-medium #portfolio-list .portfolio-item { float: left; margin: 0 15px 60px 0; width:450px; height:225px; } .portfolio-large #portfolio-list .portfolio-item { float: left; margin: 0 15px 40px 0; width:100%; height:300px; } .portfolio-large #portfolio-list .portfolio-item-inner { float: left; margin: 0 15px 40px 0; width:600px; height:300px; } #portfolio-list .portfolio-item { list-style-type: none; } #portfolio-list .portfolio-item-inner { margin-left:0; list-style-type: none; overflow:hidden; position:relative; border:1px solid #e8e8e8; padding:0px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #portfolio.portfolio-small h3 a:hover, #portfolio.portfolio-medium h3 a:hover { text-decoration:none; } #portfolio.portfolio-large h3 { text-align:left; font-size:2em; font-weight:normal; margin-bottom:20px; } #portfolio.portfolio-large h3 a:hover { text-decoration:none; } #portfolio.portfolio-large p { margin-bottom:25px; } span.roll { background:url(images/bg-portfolio-rollover.png) center center no-repeat #000; height: 100%; position: absolute; width: 100%; z-index: 10; -webkit-box-shadow: 0px 0px 4px #000; -moz-box-shadow: 0px 0px 4px #000; box-shadow: 0px 0px 4px #000; } /*** Styles for the "Landingpage" Template ***/ .page-template-tpl_landing-page-php #logo { float:none; margin:0 auto; text-align:center; } #content.landingpage { text-align: center; width: 100%; } .page-template-tpl_landing-page-no-header-php #page { border-top:none; padding-top:20px; } .landingpage h1, .landingpage h2, .landingpage h3, .landingpage h4 { text-align: center; } /*** Styles for the "Fullwidth Page" Template ***/ #content.fullwidthpage { float: left; width: 100%; } /****************************************** * FOOTER ******************************************/ #footer { background: #222; margin: 0 auto; font-size:0.9em; text-align:center; padding:15px 0; color:#ddd; } #twocol_alternative_footer { background: #222; margin: 0 auto; font-size:0.9em; padding:20px 0 40px; color:#ddd; } .twocol_alternative_footer_left { width: 48%; float: left; padding:0 10px 0 0; } .twocol_alternative_footer_right { width: 48%; float: left; padding:0 0 0 10px; } #fourcol_alternative_footer { background: #222; margin: 0 auto; font-size:0.9em; padding:20px 0 40px; color:#ddd; } .fourcol_alternative_footer_left { width: 23%; float: left; padding:0 10px 0 0; } .fourcol_alternative_footer_middle1 { width: 23%; float: left; padding:0 10px 0 10px; } .fourcol_alternative_footer_middle2 { width: 23%; float: left; padding:0 10px; } .fourcol_alternative_footer_right { width: 23%; float: left; padding:0 0 0 10px; } /****************************************** * FLOAT PROPERTIES ******************************************/ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } .clear { clear:both; } .clearfloat:after { display:block; visibility:hidden; clear:both; height:0; content:"."; } .clearfloat { display:inline-block; } .clearfloat { display:block; } .clearboth { display: block; margin: 0; padding: 0; clear: both; }