/* Theme Name: iblogIC Theme URI: http://iblog.jp Description: iBlog blogportal theme Version: 1.4 Author: ic Author URI: http://www.infocrest.jp License: GNU General Public License License URI: http://www.gnu.org/licenses/gpl.html */ /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Reset - CSS Reset, HTML5 & Clearfix - HTML5 Boilerplate (http://html5boilerplate.com) ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { background: transparent; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; padding: 0; margin: 0; -webkit-font-smoothing: subpixel-antialiased; } /* --------------------------------------------------------------------------------------- HTML5 display definitions ------------------------------------------------------------------------------------------ */ 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; } /* --------------------------------------------------------------------------------------- Base ------------------------------------------------------------------------------------------ */ html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, body { height: 100%; } /* --------------------------------------------------------------------------------------- Lists ------------------------------------------------------------------------------------------ */ ul, ol { list-style: none; padding: 0; margin: 0; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } /* --------------------------------------------------------------------------------------- Typography ------------------------------------------------------------------------------------------ */ blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; } dfn { font-style: italic; } small { font-size: 85%; } strong, th { font-weight: bold; } td, td img { vertical-align: top; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* - Make sure sup and sub don't screw with your line-heights (gist.github.com/413930) - */ sub, sup { font-size: 75%; line-height: 0; position: relative; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Redeclare monospace font family: h5bp.com/j */ pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } /* Improve readability of pre-formatted text in all browsers */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /* --------------------------------------------------------------------------------------- Tables still need cellspacing="0" in the markup ------------------------------------------------------------------------------------------ */ table { font-size: inherit; font: 100%; border-collapse: collapse; border-spacing: 0; } th { font-weight: bold; vertical-align: bottom; } td { font-weight: normal; vertical-align: top; } /* --------------------------------------------------------------------------------------- Input ------------------------------------------------------------------------------------------ */ input, select { vertical-align: middle; outline: none; } input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; } .ie6 input { vertical-align: text-bottom;} select, input, textarea { outline: none; } /* - No weird borders or outlines on focus - */ input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : 0; } input[type="submit"]:focus, input[type="button"]:focus { outline: none; } /* --------------------------------------------------------------------------------------- Hand cursor on clickable elements ------------------------------------------------------------------------------------------ */ .clickable, label, input[type=button], input[type=submit], button { cursor: pointer; } /* - Webkit browsers add a 2px margin outside the chrome of form elements - */ button, input, select, textarea { margin: 0; } /* - Make buttons play nice in IE - */ button { width: auto; overflow: visible; } /* --------------------------------------------------------------------------------------- Embedded content ------------------------------------------------------------------------------------------ */ /* * 1. Improve image quality when scaled in IE7: h5bp.com/d * 2. Remove the gap between images and borders on image containers: h5bp.com/e */ img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } /* - Correct overflow not hidden in IE9 - */ svg:not(:root) { overflow: hidden; } /* --------------------------------------------------------------------------------------- Responsive images and other embedded objects ------------------------------------------------------------------------------------------ */ img, figure, object, embed { width: auto; max-width: 100%; height: auto; } img { -ms-interpolation-mode: bicubic; } figure { margin: 0; } /* - Scale images in IE7 more attractively - */ .ie7 img { -ms-interpolation-mode: bicubic; } /* - Prevent BG image flicker upon hover - */ .ie6 html { filter: expression(document.execCommand("BackgroundImageCache", false, true)); } /* --------------------------------------------------------------------------------------- Selection colours (easy to forget) ------------------------------------------------------------------------------------------ */ ::selection { background: #f4491f; background: rgb(244,73,31); color: #fff; } ::-moz-selection { background: #f4491f; background: rgb(244,73,31); color: #fff; } img::selection { background: transparent; } img::-moz-selection { background: transparent; } body { -webkit-tap-highlight-color: rgb(244,73,31); } /* --------------------------------------------------------------------------------------- Forms ------------------------------------------------------------------------------------------ */ form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } /* - Indicate that 'label' will shift focus to the associated form element - */ label { cursor: pointer; } /* * 1. Correct color not inheriting in IE6/7/8/9 * 2. Correct alignment displayed oddly in IE6/7 */ legend { border: 0; *margin-left: -7px; padding: 0; } /* * 1. Correct font-size not inheriting in all browsers * 2. Remove margins in FF3/4 S5 Chrome * 3. Define consistent vertical alignment display in all browsers */ button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } /* * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) * 2. Correct inner spacing displayed oddly in IE6/7 */ button, input { line-height: normal; *overflow: visible; } /* - Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7 - */ table button, table input { *overflow: auto; } /* * 1. Display hand cursor for clickable form elements * 2. Allow styling of clickable form elements in iOS */ button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } /* - Consistent box sizing and appearance - */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } 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 { -webkit-appearance: none; } /* - Remove inner padding and border in FF3/4: h5bp.com/l - */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* * 1. Remove default vertical scrollbar in IE6/7/8/9 * 2. Allow only vertical resizing */ textarea { overflow: auto; vertical-align: top; resize: vertical; } /* - Colors for form validity - */ input:valid, textarea:valid { } input:invalid, textarea:invalid { background-color: #f0dddd; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Common ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------- Paragraph ------------------------------------------------------------------------------------------ */ p { margin-bottom: 20px; } /* --------------------------------------------------------------------------------------- Alignment ------------------------------------------------------------------------------------------ */ .alignleft, .left { float: left !important; } .alignright, .right { float: right !important; } .center, .aligncenter { display: block; margin-left: auto; margin-right: auto; clear: both; } /* - Images - */ .wp-caption.alignleft, img.alignleft { margin: 0 20px 10px 0; } .wp-caption.alignright, img.alignright { margin: 0 0 10px 20px; } .wp-caption.aligncenter, img.aligncenter { margin-bottom: 20px; } img.alignnone { /*display: block; margin: 20px 0 20px; */} /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { .left, .right, img.alignleft, img.alignright, img.aligncenter, /*img.alignnone,*/ .wp-caption { display: block; width: 100% !important; margin: 0 auto; } } /* --------------------------------------------------------------------------------------- WordPress � Images � Captions ------------------------------------------------------------------------------------------ */ .wp-caption { background: #fff; text-align: center; border: 1px solid #ccc; padding: 3px; } .wp-caption { -moz-box-shadow: 0 1px 2px rgba(0,0,0, .1); -webkit-box-shadow: 0 1px 2px rgba(0,0,0, .1); box-shadow: 0 1px 2px rgba(0,0,0, .1); } .wp-caption .wp-caption-text { font-size: 0.85em; font-style: italic; padding: 5px 0; margin-bottom: 0; } /* --------------------------------------------------------------------------------------- WordPress � Images � Gallery ------------------------------------------------------------------------------------------ */ .gallery { float: left; width: 100%; margin: auto; } .gallery-item { text-align: center; } .gallery-item .gallery-caption { float: left; width: 100%; margin-bottom: 0 !important; } .gallery-item .gallery-caption { font-family: Georgia, "Times New Roman", Times, serif; font-size: 0.9em; font-style: italic; padding: 5px 0; margin-bottom: 0; } .gallery-item .gallery-icon { float: left; background: #fff; border: 1px solid #ccc; padding: 3px; } .gallery-item .gallery-icon { -moz-box-shadow: 0 1px 2px rgba(0,0,0, 0.1); -webkit-box-shadow: 0 1px 2px rgba(0,0,0, 0.1); box-shadow: 0 1px 2px rgba(0,0,0, 0.1); } .gallery-item .gallery-icon a, .gallery-item .gallery-icon img { float: left; background: #fff; border: none !important; } /* --------------------------------------------------------------------------------------- Blockquote ------------------------------------------------------------------------------------------ */ blockquote { width: 100%; position: relative; background: #fff url(images/bg-quote-lines-vertical.png) repeat-y top left; color: #888; font-size: 1.4em; line-height: 30px; border: 1px solid #ccc; padding: 40px 0 20px 0; margin-bottom: 20px; } blockquote { -moz-box-shadow: 0 1px 0 0 rgba(0,0,0, 0.1), 0 0 0 1px rgba(255,255,255, 1) inset; -webkit-box-shadow: 0 1px 0 0 rgba(0,0,0, 0.1), 0 0 0 1px rgba(255,255,255, 1) inset; box-shadow: 0 1px 0 0 rgba(0,0,0, 0.1), 0 0 0 1px rgba(255,255,255, 1) inset; } blockquote p { background: url(images/bg-quote-lines-horizontal.png) repeat top left; padding: 0 20px 20px 40px; margin: 0; } /* --------------------------------------------------------------------------------------- Make sure lists behave nice ------------------------------------------------------------------------------------------ */ .error404 .entry-content ul, .portfolio .entry-content ul, .page .entry-content ul, .post .entry-content ul { list-style-position: inside; list-style-type: disc; margin-bottom: 20px; } .error404 .entry-content ol, .portfolio .entry-content ol, .page .entry-content ol, .post .entry-content ol { list-style-position: inside; list-style-type: decimal; margin-bottom: 20px; } /* --------------------------------------------------------------------------------------- Forms ------------------------------------------------------------------------------------------ */ form input, form input[type='text'], form textarea, form select { float: left; width: 100%; background: #fff; color: #888; border: 1px solid #aaa;/* padding: 8px;*/ } form input, form input[type='text'], form textarea, form select { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-transition: background 0.25s ease-in-out; -moz-transition: background 0.25s ease-in-out; -o-transition: background 0.25s ease-in-out; -ms-transition: background 0.25s ease-in-out; transition: background 0.25s ease-in-out; -moz-box-shadow: 0 1px 0 0 rgba(0,0,0, 0.1); -webkit-box-shadow: 0 1px 0 0 rgba(0,0,0, 0.1); box-shadow: 0 1px 0 0 rgba(0,0,0, 0.1); } form input:hover, form input[type='text']:hover, form textarea:hover, form select:hover { background: #fff; color: #666; border: 1px solid #aaa; } form input:focus, form input[type='text']:focus, form textarea:focus, form select:focus { background: #fff; color: #444; border: 1px solid #999; } /* - Label - */ form label { font-weight: bold; } /* - Select - */ select, form select { float: left; width: 100%; background: #fff; color: #888; font-size: 1em; border: 1px solid #aaa; padding: 6px 8px; } /* - Input: Submit - */ form input[type='submit'] { float: right; display: block; width: auto; background: #68CBFF; color: #fff; font-size: 12px; font-weight: bold; text-transform: uppercase; line-height: 20px; border: 1px solid #4CB6E5; padding: 2px 10px; margin-top: 3px; } form input[type='submit'] { /*text-shadow: 0 1px 0 rgba(255,255,255, 1);*/ background-image: linear-gradient(bottom, rgb(76,182,229) 0%, rgb(104,203,255) 100%); background-image: -o-linear-gradient(bottom, rgb(76,182,229) 0%, rgb(104,203,255) 100%); background-image: -moz-linear-gradient(bottom, rgb(76,182,229) 0%, rgb(104,203,255) 100%); background-image: -webkit-linear-gradient(bottom, rgb(76,182,229) 0%, rgb(104,203,255) 100%); background-image: -ms-linear-gradient(bottom, rgb(76,182,229) 0%, rgb(104,203,255) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(76,182,229)) color-stop(1, rgb(104,203,255)), ); /*-moz-box-shadow: 0 1px 0 0 rgba(0,0,0, 0.1), 0 1px 0 0 rgba(255,255,255, 1) inset; -webkit-box-shadow: 0 1px 0 0 rgba(0,0,0, 0.1), 0 1px 0 0 rgba(255,255,255, 1) inset; box-shadow: 0 1px 0 0 rgba(0,0,0, 0.1), 0 1px 0 0 rgba(255,255,255, 1) inset;*/ } form input[type='submit']:hover { background: #fff; border: 1px solid #aaa; color: #222; } form input[type='submit']:active { position: relative; border: 1px solid #999; top: 1px; color: #222; } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { form input[type='submit'] { width: 100%; padding: 10px 0; } } /* - jQuery validate error - */ .error { width: 100%; color: #ff0000; margin: 0; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Typography ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ body, input, textarea { font: 14px/22px 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #555; } body, input, textarea { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } /* --------------------------------------------------------------------------------------- Links ------------------------------------------------------------------------------------------ */ a { color: #bf2e15; text-decoration: none; } a { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } a:hover { color: #9c3220; text-decoration: none; } a:active { position: relative; top: 1px; } a:active { -webkit-transition: 0; -moz-transition: 0; -o-transition: 0; transition: 0; } /* --------------------------------------------------------------------------------------- Headings ------------------------------------------------------------------------------------------ */ h1, h2, h3, h4, h5, h6 { color: #333; font-family: 'Helvetica Neue', Helvetica, sans-serif; font-weight: bold !important; padding: 0; margin: 0; } h1 { font-size: 28px; line-height: 34px; margin-bottom: 15px; } h2 { font-size: 22px; line-height: 28px; margin-bottom: 15px; } h3 { font-size: 18px; line-height: 26px; margin-bottom: 15px; } h4 { font-size: 16px; line-height: 24px; margin-bottom: 5px; } h5 { font-size: 14px; line-height: 22px; margin-bottom: 5px; } h6 { font-size: 12px; line-height: 20px; margin-bottom: 5px; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #333; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Grid Desktop Normal Layout: 978px ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- cols 1 2 3 4 5 6 7 8 9 10 11 12 px 54px 138px 222px 306px 390px 474px 558px 642px 726px 810px 894px 978px ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ body { width: 100%; background: #fff; } body * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* --------------------------------------------------------------------------------------- Columns ------------------------------------------------------------------------------------------ */ /* - Wrap - */ .wrap { float: left; position: relative; width: 100%; } /* - Container - */ .container { padding: 0 20px; } /* - Row - */ .row { width: 100%; max-width: 978px; min-width: 727px; margin: 0 auto; } /* - Columns - */ .column, .columns { float: left; position: relative; margin-left: 30px; min-height: 1px; } .column:first-child, .columns:first-child { margin-left: 0; } [class*="column"] + [class*="column"]:last-child { float: right; } .row .one { width: 54px; } .row .two { width: 138px; } .row .three { width: 222px; } .row .four { width: 306px; } .row .five { width: 390px; } .row .six { width: 474px; } .row .seven { width: 558px; } .row .eight { width: 642px; } .row .nine { width: 726px; } .row .ten { width: 810px; } .row .eleven { width: 894px; } .row .twelve { width: 978px; } .row .offset-by-one { margin-left: 54px; } .row .offset-by-two { margin-left: 138px; } .row .offset-by-three { margin-left: 222px; } .row .offset-by-four { margin-left: 306px; } .row .offset-by-five { margin-left: 390px; } .row .offset-by-six { margin-left: 474px; } .row .offset-by-seven { margin-left: 558px; } .row .offset-by-eight { margin-left: 642px; } .row .offset-by-nine { margin-left: 726px; } .row .offset-by-ten { margin-left: 810px; } .row .centered { float: none; margin: 0 auto; } .row .offset-by-one:first-child { margin-left: 108px; } .row .offset-by-two:first-child { margin-left: 192px; } .row .offset-by-three:first-child { margin-left: 276px; } .row .offset-by-four:first-child { margin-left: 360px; } .row .offset-by-five:first-child { margin-left: 444px; } .row .offset-by-six:first-child { margin-left: 528px; } .row .offset-by-seven:first-child { margin-left: 612px; } .row .offset-by-eight:first-child { margin-left: 696px; } .row .offset-by-nine:first-child { margin-left: 780px; } .row .offset-by-ten:first-child { margin-left: 864px; } .row .offset-by-eleven:first-child { margin-left: 948px; } /* - Source Ordering */ .push-two { left: 168px } .push-three { left: 252px; } .push-four { left: 336px; } .push-five { left: 420px; } .push-six { left: 504px; } .push-seven { left: 588px; } .push-eight { left: 672px; } .push-nine { left: 756px; } .push-ten { left: 840px; } .pull-two { left: 168px } .pull-three { left: 252px; } .pull-four { left: 336px; } .pull-five { left: 420px; } .pull-six { left: 504px; } .pull-seven { left: 588px; } .pull-eight { left: 672px; } .pull-nine { left: 756px; } .pull-ten { left: 840px; } /* Block Grids ---------------------- */ /* These are 2-up, 3-up, 4-up and 5-up ULs, suited for repeating blocks of content. Add 'mobile' to them to switch them just like the layout grid (one item per line) on phones For IE7/8 compatibility block-grid items need to be the same height. You can optionally uncomment the lines below to support arbitrary height, but know that IE7/8 do not support :nth-child. -------------------------------------------------- */ /* - Block-grid - */ .block-grid { display: block; overflow: hidden; } .block-grid > article, .block-grid > aside, .block-grid > li { display: block; height: auto; float: left; } .block-grid.two-up { margin-left: -30px; } .block-grid.two-up > article, .block-grid.two-up > aside, .block-grid.two-up > li { margin-left: 30px; width: 474px; } .block-grid.three-up { margin-left: -30px; } .block-grid.three-up > article, .block-grid.three-up > aside, .block-grid.three-up > li { margin-left: 30px; width: 306px; } .block-grid.four-up { margin-left: -30px; } .block-grid.four-up > article, .block-grid.four-up > aside, .block-grid.four-up > li { margin-left: 30px; width: 222px; } .block-grid.six-up { margin-left: -30px; } .block-grid.six-up > article, .block-grid.six-up > aside, .block-grid.six-up > li { margin-left: 30px; width: 138px; } /* Nicolas Gallagher's micro clearfix */ .row { *zoom: 1; } .row:before, .row:after { content: ""; display: table; } .row:after { clear: both; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Wraps ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------- Header Wrap ------------------------------------------------------------------------------------------ */ #header-wrap { position: fixed; height: 90px; background-color: #f1472d; background-color: rgba(241,71,45, 0.95); z-index: 999; padding: 20px; margin: auto 0; } #header-wrap { background: #fff; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; border-bottom: 3px solid #5174c1; -moz-box-shadow: 0 0 5px 0 rgba(0,0,0, 0.25), 0 -1px 2px 0 rgba(0,0,0, 0.35) inset; -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0, 0.25), 0 -1px 2px 0 rgba(0,0,0, 0.35) inset; box-shadow: 0 0 5px 0 rgba(0,0,0, 0.25), 0 -1px 2px 0 rgba(0,0,0, 0.35) inset; } #header-wrap.sticky-header { height: 70px; } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { #header-wrap { position: relative; } } /* --------------------------------------------------------------------------------------- Subheader Wrap ------------------------------------------------------------------------------------------ */ #subheader-wrap { /*background: #fff; border-bottom: 1px solid #b2b2b2; border-bottom: 1px solid rgba(0,0,0, 0.3);*/ padding-top: 80px; z-index: 998; } #subheader-wrap { /*-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.1), 0 -1px 0 0 rgba(0,0,0, 0.05) inset; -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.1), 0 -1px 0 0 rgba(0,0,0, 0.05) inset; box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.1), 0 -1px 0 0 rgba(0,0,0, 0.05) inset;*/ } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { #subheader-wrap { padding-top: 0; } } /* --------------------------------------------------------------------------------------- Content Wrap ------------------------------------------------------------------------------------------ */ #content-wrap {} /* --------------------------------------------------------------------------------------- Footer Wrap ------------------------------------------------------------------------------------------ */ #footer-wrap {} /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Common stuff ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------- Entry Format ------------------------------------------------------------------------------------------ */ .entry-format { float: left; position: relative; width: 100%; margin-bottom: 20px; } /* --------------------------------------------------------------------------------------- Entry Format � Icon ------------------------------------------------------------------------------------------ */ .entry-format .icon { position: absolute; width: 30px; height: 30px; background: #fff; text-indent: -9999px; top: 10px; right: 10px; } .entry-format .icon { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.25); -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.25); box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.25); } /* - View Full - */ .entry-format .icon.view-full { background-image: url(images/icons/icon-view-full.png); background-repeat: no-repeat; background-position: center center; } .entry-format .icon.view-full { opacity: 0.75; } .entry-format .icon.view-full:hover { opacity: 1; } /* --------------------------------------------------------------------------------------- Entry Thumb ------------------------------------------------------------------------------------------ */ .entry-thumb { float: left; position: relative; width: 100%; margin-bottom: 20px; } .entry-thumb:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .entry-thumb:before { -moz-box-shadow: 0 0 4px 0 rgba(0,0,0, 0.35) inset; -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0, 0.35) inset; box-shadow: 0 0 4px 0 rgba(0,0,0, 0.35) inset; } /* --------------------------------------------------------------------------------------- Entry thumb � Caption ------------------------------------------------------------------------------------------ */ .image-caption { position: absolute; background: rgba(0,0,0, 0.9); color: #fff; font-size: 0.9em; font-weight: bold; padding: 5px 10px; bottom: 20px; left: 0; } .image-caption a { color: #fff !important; } /* --------------------------------------------------------------------------------------- Entry Gallery ------------------------------------------------------------------------------------------ */ .entry-gallery:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 10; } .entry-gallery:before { -moz-box-shadow: 0 0 4px 0 rgba(0,0,0, 0.35) inset; -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0, 0.35) inset; box-shadow: 0 0 4px 0 rgba(0,0,0, 0.35) inset; } /* --------------------------------------------------------------------------------------- Flexslider ------------------------------------------------------------------------------------------ */ .flexslider {margin: 0; padding: 0;} .flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {width: 100%; display: block;} .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} /* --------------------------------------------------------------------------------------- Flexslider ------------------------------------------------------------------------------------------ */ .flexslider { float: left; width: 100%; position: relative; margin-bottom: 20px; overflow: hidden; z-index: 9; } /* - Flexslider � Direction Nav - */ .flex-nav { position: absolute; width: 100%; height: 40px; top: -40px; right: 0; z-index: 101; } .flexslider .flex-direction-nav { position: absolute; width: 100%; margin-top: -16px; top: 50%; z-index: 101; } .flexslider .flex-direction-nav { opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .flexslider:hover .flex-direction-nav { opacity: 1; } .flexslider .flex-direction-nav a { position: absolute; height: 32px; width: 17px; background-image: url(images/slider-navigation.png); background-repeat: no-repeat; text-indent: -9999px; } .flexslider .flex-direction-nav a { opacity: 0.5; } .flexslider .flex-direction-nav a:hover { opacity: 1; } .flexslider .flex-direction-nav .flex-next { background-position: -27px 0; top: 0; right: 20px; } .flexslider .flex-direction-nav .flex-prev { background-position: 0 0; top: 0; left: 20px; } /* --------------------------------------------------------------------------------------- Flexslider � Carousel ------------------------------------------------------------------------------------------ */ /* - Carousel Wrap - */ .carousel-wrap { float: left; position: relative; width: 100%; border-bottom: 1px solid #eee; margin-top: -20px; margin-bottom: 20px; } /* - Carousel - */ .carousel { float: left; position: relative; width: 80%; margin: 0 10%; } .carousel * { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .carousel .slides { float: left; width: 80%; padding: 0; } .carousel .slides li { float: left; background: #fff; margin: 15px 5px; cursor: pointer; } .carousel .slides li { opacity: 1; -moz-box-shadow: 0 1px 0 0 rgba(0,0,0, 0.1); -webkit-box-shadow: 0 1px 0 0 rgba(0,0,0, 0.1); box-shadow: 0 1px 0 0 rgba(0,0,0, 0.1); } .carousel .slides li:hover { opacity: 1; } .carousel .slides li:active { position: relative; top: 1px; } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 767px) { .carousel { width: 210px; margin: 0 28px; } .carousel .slides { width: 200px; } } /* - Image - */ .carousel .slides li img { float: left; border: 1px solid #ccc; padding: 3px; } .carousel .slides li img:hover { border: 1px solid #888; } /* - Carousel � Direction Nav - */ .carousel .flex-direction-nav { position: absolute; width: 100%; margin-top: -11px; top: 50%; z-index: 101; } .carousel .flex-direction-nav a { position: absolute; height: 22px; width: 12px; background-image: url(images/carousel-navigation.png); background-repeat: no-repeat; text-indent: -9999px; } .carousel .flex-direction-nav a { opacity: 0.25; } .carousel .flex-direction-nav a:hover { opacity: 1; } .carousel .flex-direction-nav .flex-next { background-position: -22px 0; right: -30px; } .carousel .flex-direction-nav .flex-prev { background-position: 0 0; left: -30px; } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { .carousel .flex-direction-nav .flex-next { right: -20px; } .carousel .flex-direction-nav .flex-prev { left: -20px; } } /* --------------------------------------------------------------------------------------- Audio & Video Player ------------------------------------------------------------------------------------------ */ .jp-seek-bar, .jp-volume-bar, .jp-volume-bar-knob { cursor: pointer; } /* - Interface - */ .jp-interface { display: block; float: left; position: relative; width: 100%; height: 36px; background: #333; border: 1px solid #000; } .jp-interface { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-image: linear-gradient(bottom, rgb(34,34,34) 0%, rgb(68,68,68) 100%); background-image: -o-linear-gradient(bottom, rgb(34,34,34) 0%, rgb(68,68,68) 100%); background-image: -moz-linear-gradient(bottom, rgb(34,34,34) 0%, rgb(68,68,68) 100%); background-image: -webkit-linear-gradient(bottom, rgb(34,34,34) 0%, rgb(68,68,68) 100%); background-image: -ms-linear-gradient(bottom, rgb(34,34,34) 0%, rgb(68,68,68) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(34,34,34)), color-stop(1, rgb(68,68,68)) ); -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.5), 0 1px 0 0 rgba(255,255,255, 0.15) inset; -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.5), 0 1px 0 0 rgba(255,255,255, 0.15) inset; box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.5), 0 1px 0 0 rgba(255,255,255, 0.15) inset; } .jp-interface * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } /* - Controls - */ .jp-controls { position: absolute; width: 50px; height: 34px; border-right: 1px solid #111; top: 0; left: 0; z-index: 10; } .jp-controls a.jp-play, .jp-controls a.jp-pause { float: left; width: 100%; height: 34px; background-repeat: no-repeat; background-position: center center; text-indent: -9999em; } .jp-controls a.jp-play { background-image: url(images/icons/icon-player-play.png); } .jp-controls a.jp-pause { background-image: url(images/icons/icon-player-pause.png); } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { .jp-controls { width: 40px; } } /* - Progress - */ .jp-progress-wrap { float: left; position: relative; width: 100%; height: 34px; padding: 0 65px; z-index: 9; } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { .jp-progress-wrap { padding: 0 55px; } } .jp-progress-wrap .jp-progress { position: relative; width: 100%; height: 8px; background: #222; border: 1px solid #111; top: 13px; } .jp-progress-wrap .jp-progress { -webkit-box-shadow: 0 1px 0 0 rgba(255,255,255, 0.1), 0 1px 1px rgba(0,0,0, 0.25) inset; -moz-box-shadow: 0 1px 0 0 rgba(255,255,255, 0.1), 0 1px 1px rgba(0,0,0, 0.25) inset; box-shadow: 0 1px 0 0 rgba(255,255,255, 0.1), 0 1px 1px rgba(0,0,0, 0.25) inset; } .jp-progress-wrap .jp-play-bar { float: left; height: 6px; background: #f2f2f2; } .jp-progress-wrap .jp-play-bar { -webkit-box-shadow: 0 1px 0 0 rgba(255,255,255, 0.25) inset; -moz-box-shadow: 0 1px 0 0 rgba(255,255,255, 0.25) inset; box-shadow: 0 1px 0 0 rgba(255,255,255, 0.25) inset; } .jp-progress-wrap .jp-seek-bar { float: left; height: 8px; } /* - Controls - */ .jp-volume-controls { position: absolute; width: 50px; height: 34px; border-left: 1px solid #111; top: 0; right: 0; z-index: 10; } .jp-volume-controls li a.jp-mute, .jp-volume-controls li a.jp-unmute { float: left; width: 100%; height: 34px; background-repeat: no-repeat; background-position: center center; text-indent: -9999em; } .jp-volume-controls li a.jp-mute { background-image: url(images/icons/icon-player-mute.png); } .jp-volume-controls li a.jp-unmute { background-image: url(images/icons/icon-player-unmute.png); } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { .jp-volume-controls { width: 40px; } } /* - Video - */ .jp-jplayer-video { display: none; } .jp-video { background: #000 url(images/ajax-loader-dark.gif) no-repeat center center; } .jp-video { -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.5); -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.5); box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.5); } /*---------------------------------------------------------------------------------------*/ /* Video /*---------------------------------------------------------------------------------------*/ iframe, object, embed { width: 100%; background: #000 url(images/ajax-loader-dark.gif) no-repeat center center; border: 0 !important; padding: 0 !important; margin: 0 !important; margin-bottom: -6px !important; z-index: 99; } .videoWrapper { position: relative; height: 0; padding-bottom: 56.25%; padding-top: 25px; } .videoWrapper iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Header ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #header {} /* --------------------------------------------------------------------------------------- Header � Navigation ------------------------------------------------------------------------------------------ */ #header #navigation { padding: 10px 0;} #header #navigation { font-family: "�q���M�m�p�S Pro W3", "Hiragino Kaku Gothic Pro", "���C���I", Meiryo, Osaka, "�l�r �o�S�V�b�N", "MS PGothic", sans-serif; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } /* - After scroll - */ #header-wrap.sticky-header #header #navigation { padding: 0; } .logo-wrap{ width: 100%; color: #5174c1; color: rgba(81,116,193, 1); font-size: 22px; font-weight: bold; line-height: 22px; padding: 10px 0; text-shadow: 0 1px 0 rgba(0,0,0, 0.25); } #header #navigation a { float: left; color: #5174c1; color: rgba(81,116,193, 1); font-size: 22px; font-weight: bold; line-height: 22px; padding: 10px 0; } #header #navigation a { text-shadow: 0 1px 0 rgba(0,0,0, 0.25); } #header #navigation a:hover { color: rgba(81,116,193, 1); } #header #navigation a:active { text-shadow: 0 -1px 0 rgba(0,0,0, 0.25); } #header #navigation ul li { float: left; position: relative; margin-left: 20px; } #header #navigation ul li:first-child { margin-left: 0; } /* - Sub menu - */ #header #navigation .drop > a:after { content: ' +'; } #header #navigation ul li .sub-menu { position: absolute; width: 200px; background: #fff; background: rgba(255,255,255, 0.98); padding: 15px; margin-left: 0; top: 40px; left: -999em; z-index: 999; } #header #navigation ul li .sub-menu { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); } #header #navigation ul li:hover .sub-menu { left: -15px; } #header #navigation ul li .sub-menu li { float: left; width: 100%; border-bottom: 1px solid #eee; padding: 0; margin: 0; } #header #navigation ul li .sub-menu li a { color: #888; font-size: 0.9em; font-weight: bold; padding: 5px 0; } #header #navigation ul li .sub-menu li a { text-shadow: none; } #header #navigation ul li .sub-menu li a:hover { color: #bbb; } /* - Sub menu � Current - */ #header #navigation ul li .sub-menu li.current_page_item > a, #header #navigation ul li .sub-menu li.current-cat > a, #header #navigation ul li .sub-menu li.current-menu-item > a { color: #111; } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { #header #navigation { display: none; } } /* --------------------------------------------------------------------------------------- Header � Mobile Navigation ------------------------------------------------------------------------------------------ */ #tva-mobile-menu {} /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { #tva-mobile-menu { float: left; width: 100%; background: #fff; border-bottom: 1px solid #eee; padding: 0; margin: 0; } #tva-mobile-menu > div {} #tva-mobile-menu > div > ul { float: left; width: 100%; background: #eee; padding: 2px; margin: 20px 0; } #tva-mobile-menu > div > ul li a { display: block; background: #fff; padding: 5px; margin: 2px; } /* .tva-mobile-menu-trigger { position: absolute; width: 40px; height: 40px; background-color: rgba(0,0,0, 0.1); background-image: url(images/icons/icon-mobile-menu.png); background-repeat: no-repeat; background-position: center center; top: 20px; left: 20px; z-index: 1001; } .tva-mobile-menu-trigger:hover { background-color: rgba(0,0,0, 0.25); } .tva-mobile-menu-trigger:active { position: absolute; top: 20px; } */ #tva-mobile-menu ul li .sub-menu { visibility: visible !important; display: block !important; position: relative !important; margin: 1px 0; top: 0 !important; left: 0 !important; } #tva-mobile-menu ul li .sub-menu li a { font-size: 0.9em; padding-left: 20px; margin: 1px 2px; } } /* --------------------------------------------------------------------------------------- Header � Logo ------------------------------------------------------------------------------------------ */ #header #logo { text-align: center; width: 100%;} #header #logo .logo-wrap .logo { margin-top: 10px; } #header #logo .logo-wrap .logo { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } /* - After scroll - */ #header-wrap.sticky-header #header #logo .logo-wrap .logo { margin-top: 0; } /* --------------------------------------------------------------------------------------- Header � Avatar ------------------------------------------------------------------------------------------ */ #header #logo { text-align: left; padding-right: 30px;} #header #logo a{font-size: 23px; line-height: 26px; font-weight: bold;} #header #logo .avatar-wrap .avatar { width: 60px; height: 60px; } #header #logo .avatar-wrap .avatar { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -moz-box-shadow: 0 1px 3px 0 rgba(0,0,0, 0.5), 0 1px 0 0 rgba(255,255,255, 0.5) inset; -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0, 0.5), 0 1px 0 0 rgba(255,255,255, 0.5) inset; box-shadow: 0 1px 3px 0 rgba(0,0,0, 0.5), 0 1px 0 0 rgba(255,255,255, 0.5) inset; } /* --------------------------------------------------------------------------------------- Header � Author Bio ------------------------------------------------------------------------------------------ */ #header #logo .bio-wrap { display: none; position: absolute; background-color: #000; background-color: rgba(51,51,51, 0.95); color: #fff; padding-top: 10px; margin-left: -153px; left: 50%; top: -10px; z-index: 99; } #header #logo .bio-wrap { -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 -1px 2px rgba(0,0,0, 0.5) inset; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 -1px 2px rgba(0,0,0, 0.5) inset; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 -1px 2px rgba(0,0,0, 0.5) inset; } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { #header #logo .bio-wrap { margin-left: 0; left: 0; } } /* - Avatar - */ #header #logo .bio-wrap .avatar { width: 90px; height: 90px; } #header #logo .bio-wrap .avatar { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -moz-box-shadow: 0 1px 6px 0 rgba(0,0,0, 1), 0 1px 0 0 rgba(255,255,255, 0.75) inset; -webkit-box-shadow: 0 1px 6px 0 rgba(0,0,0, 1), 0 1px 0 0 rgba(255,255,255, 0.75) inset; box-shadow: 0 1px 6px 0 rgba(0,0,0, 1), 0 1px 0 0 rgba(255,255,255, 0.75) inset; } /* - Bio - */ #header #logo .bio-wrap .bio { display: block; padding: 20px; margin-bottom: 0; } /* - Title - */ #header #logo .bio-wrap .bio .entry-title { color: #fff; margin-bottom: 5px; } /* --------------------------------------------------------------------------------------- Header � Right ------------------------------------------------------------------------------------------ */ #header #header-right { float: right; } /* --------------------------------------------------------------------------------------- Header � Right � Mobile ------------------------------------------------------------------------------------------ */ /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { #header #header-right { display: none; } #tva-mobile-header-right { float: right; width: 100%; background: #fff; border-bottom: 1px solid #eee; padding: 20px 0; margin: 0; } .tva-mobile-header-right-trigger { position: absolute; width: 40px; height: 40px; background-color: rgba(0,0,0, 0.1); background-image: url(images/icons/icon-mobile-menu.png); background-repeat: no-repeat; background-position: center center; top: 20px; right: 20px; z-index: 1001; } .tva-mobile-header-right-trigger:hover { background-color: rgba(0,0,0, 0.25); } .tva-mobile-header-right-trigger:active { position: absolute; top: 20px; } .tva-mobile-header-right-trigger.social { background-image: url(images/icons/icon-social.png); } .tva-mobile-header-right-trigger.search { background-image: url(images/icons/icon-search.png); } .tva-mobile-header-right-trigger.tagline { background-image: url(images/icons/icon-tagline.png); } } /* - Social - */ #header #header-right ul.tva-social-icons { float: right; padding: 12px 0; } #header #header-right ul.tva-social-icons { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #header #header-right ul.tva-social-icons li { float: left; } /* - After scroll - */ #header-wrap.sticky-header #header #header-right .tva-social-icons { padding: 2px 0; } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { #tva-mobile-header-right ul.tva-social-icons { text-align: center; line-height: 0; } #tva-mobile-header-right ul.tva-social-icons li { display: inline-block; } #tva-mobile-header-right ul.tva-social-icons a { margin: 0 2px; } } /* - Search - */ #header #header-right #searchform { padding: 10px 0; } #header #header-right #searchform input { background: rgba(0,0,0, 0.1); color: #fff; color: rgba(255,255,255, 0.75); border: none; padding: 8px 10px; } #header #header-right #searchform input { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0 1px 0 0 rgba(255,255,255, 0.25), 0 1px 3px 0 rgba(0,0,0, 0.5) inset; -webkit-box-shadow: 0 1px 0 0 rgba(255,255,255, 0.25), 0 1px 3px 0 rgba(0,0,0, 0.5) inset; box-shadow: 0 1px 0 0 rgba(255,255,255, 0.25), 0 1px 3px 0 rgba(0,0,0, 0.5) inset; } #header #header-right #searchform input:focus { color: #fff; color: rgba(255,255,255, 1); } /* - After scroll - */ #header-wrap.sticky-header #header #header-right #searchform { padding: 1px 0; } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { } /* - Tagline - */ #header #header-right .tagline { float: right; color: #fff; text-align: right; line-height: 20px; padding: 20px 0; } #header #header-right .tagline { text-shadow: 0 1px 0 rgba(0,0,0, 0.25); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } /* - After scroll - */ #header-wrap.sticky-header #header #header-right .tagline { padding: 10px 0; } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { #header #header-right .tagline { display: none; text-align: center; } } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Subheader ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #subheader { padding: 20px 0 20px 0;} /* --------------------------------------------------------------------------------------- Subheader � Statistics ------------------------------------------------------------------------------------------ */ #subheader #statistics { float: left; width: 100%; color: #555; font-size: 2em; font-weight: 800; text-transform: uppercase; line-height: 28px; letter-spacing: -3px; padding: 40px 0; } #subheader #statistics .date, #subheader #statistics .posts, #subheader #statistics .comments { background-repeat: no-repeat; background-position: center left; padding-left: 36px; } #subheader #statistics .date { background-image: url(images/icons/icon-date.png); } #subheader #statistics .posts { background-image: url(images/icons/icon-posts.png); } #subheader #statistics .comments { background-image: url(images/icons/icon-comments.png); } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { #subheader #statistics { font-size: 1.5em; letter-spacing: -2px; } #subheader #statistics .date { background-image: url(images/icons/icon-date.png); background-repeat: no-repeat; background-position: center left; padding-left: 40px; margin-bottom: 10px; } #subheader #statistics .posts { background-image: url(images/icons/icon-posts.png); background-repeat: no-repeat; background-position: center left; padding-left: 40px; margin-bottom: 10px; } #subheader #statistics .comments { background-image: url(images/icons/icon-comments.png); background-repeat: no-repeat; background-position: center left; padding-left: 40px; } } /* --------------------------------------------------------------------------------------- Subheader � Social ------------------------------------------------------------------------------------------ */ #subheader #social { padding: 20px 0; } #subheader #social .tva-social-icons { text-align: center; line-height: 0; } #subheader #social .tva-social-icons li { display: inline-block; } #subheader #social .tva-social-icons a { margin: 0 2px; } /* --------------------------------------------------------------------------------------- Subheader � Search ------------------------------------------------------------------------------------------ */ #subheader #search { text-align: center; padding: 20px 0; } #subheader #search input { float: none; width: 306px; margin: 0 auto; } /* --------------------------------------------------------------------------------------- Subheader � Tagline ------------------------------------------------------------------------------------------ */ #subheader #tagline { font-size: 1.2em; text-align: center; padding: 20px 0; } /* --------------------------------------------------------------------------------------- Subheader � Breadcrumbs ------------------------------------------------------------------------------------------ */ #subheader #breadcrumbs { float: left; width: 100%; padding: 20px 0; } /* --------------------------------------------------------------------------------------- Subheader � Widgets ------------------------------------------------------------------------------------------ */ /* - Trigger - */ .subheader-widgets-trigger { display: block; position: absolute; width: 30px; height: 30px; background-color: #fff; background-image: url(images/icons/icon-expand.png); background-repeat: no-repeat; background-position: center center; text-indent: -9999px; margin-top: 20px; top: auto; bottom: -28px; right: 10px; } .subheader-widgets-trigger { -webkit-border-radius: 0 0 2px 2px; -moz-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px; -moz-box-shadow: 0 2px 2px 0 rgba(0,0,0, 0.25); -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0, 0.25); box-shadow: 0 2px 2px 0 rgba(0,0,0, 0.25); } .subheader-widgets-trigger:active { position: absolute; top: auto; bottom: -28px; right: 10px; } .subheader-widgets-trigger.active { background-image: url(images/icons/icon-collapse.png); } /* - Widgets - */ #subheader-widgets { float: left; width: 100%; } #subheader-widgets .widgets { display: none; float: left; width: 100%; border-top: 1px solid #eee; padding: 40px 0; } /* - Block-grid - */ #subheader-widgets .block-grid { display: block; } #subheader-widgets .block-grid > aside { display: block; float: left; height: auto; } #subheader-widgets .block-grid.two-up { margin-left: -30px; } #subheader-widgets .block-grid.two-up > aside { margin-left: 30px; width: 474px; } #subheader-widgets .block-grid.three-up { margin-left: -30px; } #subheader-widgets .block-grid.three-up > aside { margin-left: 30px; width: 306px; } #subheader-widgets .block-grid.four-up { margin-left: -30px; } #subheader-widgets .block-grid.four-up > aside { margin-left: 30px; width: 222px; } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { #subheader-widgets .block-grid.two-up, #subheader-widgets .block-grid.three-up, #subheader-widgets .block-grid.four-up { margin-left: 0; } #subheader-widgets .block-grid.two-up > aside, #subheader-widgets .block-grid.three-up > aside, #subheader-widgets .block-grid.four-up > aside { width: 100%; max-width: 310px; min-width: 310px; padding-left: 2px !important; padding-right: 2px !important; margin: 0 auto; } } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Content ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #content { position: relative; padding: 50px 0; } /* --------------------------------------------------------------------------------------- Content � Isotope ------------------------------------------------------------------------------------------ */ #content .isotope { margin: -15px; margin-bottom: 30px; visibility: hidden; } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { #content .isotope { margin: 0; margin-bottom: 30px; } } /* - Isotope � New - */ #content .isotope-new { display: none; } /* - Isotope � Loading - */ #loading-isotope { position: fixed; width: 34px; height: 34px; background-color: #fff; background-image: url(images/ajax-loader.gif); background-repeat: no-repeat; background-position: center center; bottom: 20px; right: 20px; z-index: 9999; } #loading-isotope { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } /* --------------------------------------------------------------------------------------- Content � Item ------------------------------------------------------------------------------------------ */ #content .item { display: block; float: left; position: relative; background: #fff; margin: 0; margin-bottom: 30px; z-index: 9; } #content .item { -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.25); -webkit-box-shadow: 0 2px 1px 0 rgba(0,0,0, 0.25); box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.25); } /* --------------------------------------------------------------------------------------- Content � Isotope � Item ------------------------------------------------------------------------------------------ */ #content #isotope .item { margin: 15px; } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { #content #isotope .item { margin: 15px 0; } } .item.item-left {} .item.item-right {} /* --------------------------------------------------------------------------------------- Post & Page Content ------------------------------------------------------------------------------------------ */ .post-content { float: left; width: 100%; padding: 20px; } .page-content { float: left; width: 100%; padding: 20px; } /* --------------------------------------------------------------------------------------- Content � Timeline ------------------------------------------------------------------------------------------ */ .timeline { position: absolute; width: 6px; height: 100%; background: #e6e6e6; background: rgba(0,0,0, 0.08); margin-left: -3px; left: 50%; top: 0; z-index: 0; } /* --------------------------------------------------------------------------------------- Content � Indicators ------------------------------------------------------------------------------------------ */ .indicator { text-indent: -9999px; } /* - Left & Right indicators - */ .item.item-left .indicator { position: absolute; width: 9px; height: 28px; background-image: url(images/indicator-right.png); background-repeat: no-repeat; background-position: center center; margin-top: -14px; top: 50%; right: -9px; } .item.item-right .indicator { position: absolute; width: 9px; height: 28px; background-image: url(images/indicator-left.png); background-repeat: no-repeat; background-position: center center; margin-top: -14px; top: 50%; left: -9px; } /* - Top indicator - */ .indicator-top { display: none; position: absolute; width: 28px; height: 8px; background-image: url(images/indicator-top.png); background-repeat: no-repeat; background-position: center center; margin-left: -14px; top: -8px; left: 50%; } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { .indicator { display: none; } .indicator-top { display: block; } } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Post � General ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------- Content � Header ------------------------------------------------------------------------------------------ */ .item .entry-header { float: left; width: 100%; z-index: 99; } .item .entry-header .entry-title { z-index: 100; } /* --------------------------------------------------------------------------------------- Content � More link ------------------------------------------------------------------------------------------ */ .more-link { display: none; } /* --------------------------------------------------------------------------------------- Content � Sticky post ------------------------------------------------------------------------------------------ */ .item .sticky { position: absolute; width: 54px; height: 54px; background-image: url(images/sticky.png); background-repeat: top right; background-position: no-repeat; top: -1px; right: -1px; z-index: 99; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Post Meta ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .entry-meta { float: left; position: relative; width: 100%; background: #fff; border-top: 1px solid #eee; color: #aaa; line-height: 22px; padding: 15px 20px; } .entry-meta a { color: #aaa; } .entry-meta a:hover { color: #888; } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { .single .meta-item, .single .like-comments-container { float: left; width: 100%; border-bottom: 1px solid #f2f2f2; padding: 10px 0; margin: 0 !important; } .single .like-comments-container { border-bottom: none; padding: 0; } .single .post-like { border-bottom: none; } } /* --------------------------------------------------------------------------------------- Post Meta � Posted ------------------------------------------------------------------------------------------ */ .item .posted { float: left; } /* - Left/Right - */ .item.item-left .posted { float: right; } .item.item-right .posted { float: left; } /* - Single - */ .single .item .posted { display: block; } .item .posted .posted-icon { display: block; float: left; width: 20px; height: 20px; background-color: #aaa; background-image: url(images/icons/icon-meta-posted2.png); background-repeat: no-repeat; background-position: center center; text-indent: -9999px; } .item .posted .posted-icon { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .item.item-left .posted .posted-icon { float: right; } .item.item-right .posted .posted-icon { float: left; } .item .posted .posted-time { margin-left: 6px; } .item.item-left .posted .posted-time { margin-right: 6px; } .item.item-right .posted .posted-time { margin-left: 6px; } /* --------------------------------------------------------------------------------------- Post Meta � Read more ------------------------------------------------------------------------------------------ */ .item .read-more { display: none; position: relative; } /* - Left/Right - */ .item.item-left .read-more { float: right; } .item.item-right .read-more { float: left; } /* - Single - */ .single .item .read-more { display: none; } .item .read-more .read-more-icon { display: block; float: left; width: 20px; height: 20px; background-color: #aaa; background-image: url(images/icons/icon-meta-posted2.png); background-repeat: no-repeat; background-position: center center; text-indent: -9999px; } .item .read-more .read-more-icon { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } /* - Left/Right - */ .item.item-left .read-more .read-more-icon { float: right; } .item.item-right .read-more .read-more-icon { float: left; } .item.item-left .read-more .read-more-link { margin-right: 6px; } .item.item-right .read-more .read-more-link { margin-left: 6px; } /* --------------------------------------------------------------------------------------- Post Meta � Comments & Post like ------------------------------------------------------------------------------------------ */ .item .like-comments-container { float: right; } .item.item-left .like-comments-container { float: left; } .item.item-right .like-comments-container { float: right; } /* - Comments - */ .entry-meta .comments { float: left; } .entry-meta .comments a { display: block; float: left; width: 22px; height: 20px; background-color: #aaa; background-image: url(images/icons/icon-meta-comments2.png); background-repeat: no-repeat; background-position: center center; text-indent: -9999px; } .entry-meta .comments a:hover { background-color: #f1472d; } .entry-meta .comments .comments-number { float: left; margin-left: 4px; } /* - Post Like - */ .entry-meta .post-like { float: left; margin-left: 8px; } .entry-meta .post-like .like { display: block; float: left; width: 22px; height: 20px; background-color: #aaa; background-image: url(images/icons/icon-meta-like2.png); background-repeat: no-repeat; background-position: center center; text-indent: -9999px; } .entry-meta .post-like .like { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .entry-meta .post-like .like:hover { background-color: #f1472d; } .entry-meta .post-like .count { float: left; margin-left: 4px; } .entry-meta .post-like .like.alreadyvoted { background-color: #f1472d; } /* --------------------------------------------------------------------------------------- Post Meta � Cat links ------------------------------------------------------------------------------------------ */ .entry-meta .category { float: left; margin-left: 12px; } .item .category .category-icon { display: block; float: left; width: 16px; height: 20px; background-color: #aaa; background-image: url(images/icons/icon-meta-category.png); background-repeat: no-repeat; background-position: center center; text-indent: -9999px; margin-right: 6px; } /* --------------------------------------------------------------------------------------- Post Meta � Tag links ------------------------------------------------------------------------------------------ */ .entry-meta .tagged { float: left; margin-left: 12px; } .item .tagged .tagged-icon { display: block; float: left; width: 20px; height: 20px; background-color: #aaa; background-image: url(images/icons/icon-meta-tagged.png); background-repeat: no-repeat; background-position: center center; text-indent: -9999px; margin-right: 6px; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Post Formats ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------- Link ------------------------------------------------------------------------------------------ */ .format-link { margin: 0; } .format-link .entry-link { background: #222; text-align: center; padding: 20px; margin-bottom: 0; } .format-link .entry-link .entry-title { margin-bottom: 0;} .format-link .entry-link .entry-title a { color: #fff; color: rgba(255,255,255, 1); } .format-link .entry-link .entry-title a:hover { color: #fff; color: rgba(255,255,255, 0.75); } .format-link .entry-link .entry-url { color: #aaa; } .format-link .entry-link .entry-url { word-wrap: break-word; } .single .format-link .entry-link { margin-bottom: 20px; } /* --------------------------------------------------------------------------------------- Quote ------------------------------------------------------------------------------------------ */ .format-quote {} .isotope .format-quote .entry-quote { margin-bottom: 0 !important; } .isotope .format-quote .entry-quote { word-wrap: break-word; } /* - Quoted person - */ .format-quote .entry-quote .quoted { position: absolute; color: #888; font-size: 13px; bottom: 5px; right: 20px; } /* --------------------------------------------------------------------------------------- Status ------------------------------------------------------------------------------------------ */ .format-status {} .format-status p { line-height: 24px; } .format-status p:last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------------------- Image ------------------------------------------------------------------------------------------ */ .format-image {} .format-image .entry-image { margin-bottom: 0; } .single .format-image .entry-image { margin-bottom: 20px; } /* --------------------------------------------------------------------------------------- Gallery ------------------------------------------------------------------------------------------ */ .format-gallery {} .format-gallery .entry-gallery {} /* --------------------------------------------------------------------------------------- Audio ------------------------------------------------------------------------------------------ */ .format-audio {} .format-audio .entry-audio {} .isotope .format-audio .entry-format { margin-bottom: 0; } .format-audio .entry-header { margin-bottom: 20px; } .format-audio .entry-header .entry-title { margin-bottom: 0; } .format-audio .entry-header .entry-artist { color: #888; font-style: italic; } /* --------------------------------------------------------------------------------------- Video ------------------------------------------------------------------------------------------ */ .format-video {} .format-video .entry-video { margin-bottom: 20px; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Comments & Respond ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #comments-respond-wrap { float: left; position: relative; background: #fff; margin: 0; margin-bottom: 30px; } #comments-respond-wrap { -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.25); -webkit-box-shadow: 0 2px 1px 0 rgba(0,0,0, 0.25); box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.25); } /* - Comments & Respond content - */ .comments-content, .respond-content { float: left; width: 100%; padding: 20px; } .comments-content { border-bottom: 1px solid #eee; } /* - Closed comments - */ .comments-content.comments-closed {} .comments-content.comments-closed p:last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------------------- Comments ------------------------------------------------------------------------------------------ */ #comments .entry-header { margin-bottom: 30px; } #comments .entry-header .entry-title { margin-bottom: 10px; } #comments .entry-header .entry-description { color: #888; } .commentlist {} /* - Comments - */ #comments li, #comments li li, #comments li li li, #comments li li li li, #comments li li li li li, #comments li li li li li li { float: left; width: 100%; border-bottom: none; } /* - Avatar - */ #comments li .avatar { position: absolute; top: 2px; left: -60px; } /* - Meta - */ #comments li .comment-meta { color: #aaa; font-size: 0.9em; margin-bottom: 10px; } /* - Meta � Author - */ #comments li .comment-meta .fn { margin-bottom: 0; } /* - Meta � Comment-reply & Edit-link - */ #comments li .comment-reply a { color: #aaa; } #comments li .edit-link a { color: #aaa; } /* - Content - */ #comments li .comment-content { position: relative; margin-left: 60px; } /* - By Postauthor - */ #comments li.bypostauthor .comment-meta .fn { font-weight: bold; } /* - Children - */ #comments li li .comment-content { margin-left: 120px; } #comments li li li .comment-content { margin-left: 180px; } #comments li li li li .comment-content { margin-left: 240px; } #comments li li li li li .comment-content { margin-left: 300px; } #comments li li li li li li .comment-content { margin-left: 360px; } /* --------------------------------------------------------------------------------------- Respond ------------------------------------------------------------------------------------------ */ #respond { float: left; width: 100%; } #respond-wrap .entry-header { margin-bottom: 30px; } #respond-wrap .entry-header .entry-title { margin-bottom: 10px; } #respond-wrap .entry-header .entry-description { color: #888; } .comment-form-author { float: left; width: 49%; margin-right: 2%; } .comment-form-email { float: left; width: 49%; } .comment-form-url { float: left; width: 100%; } .comment-form-comment { float: left; width: 100%; margin-bottom: 10px; } .comment-form-author, .comment-form-email, .comment-form-url, .comment-form-comment { margin-bottom: 10px; } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { .comment-form-author { float: left; width: 100%; margin-right: 0; } .comment-form-email { float: left; width: 100%; } } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Archives ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .archive-header { text-align: center; margin-bottom: 20px; } .archive-header { text-shadow: 0 1px 0 rgba(255,255,255, 0.5); } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Contact (Tempate-contact.php) ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #contactform {} /* - Input container - */ #contactform .form-input-container { float: left; width: 100%; margin-bottom: 10px; } #contactform .form-input-container-email { margin-bottom: 0; } /* - Screenreader - */ #contactform .screenReader { position: absolute; top: -9999px; left: -9999px; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Footer ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #footer { text-align: center; padding: 20px 0; } #footer { text-shadow: 0 1px 0 rgba(255,255,255, 0.75); } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Pagination ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #page-navigation, #load-posts { float: left; position: relative; width: 100%; text-align: center; } /* --------------------------------------------------------------------------------------- Page Navigation ------------------------------------------------------------------------------------------ */ #page-navigation {} #page-navigation { background: #fff; color: #aaa; margin: 0 auto; } #page-navigation { -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.25); -webkit-box-shadow: 0 2px 1px 0 rgba(0,0,0, 0.25); box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.25); } #page-navigation .nav-previous { display: block; float: left; padding: 10px; } #page-navigation .nav-previous a:before { content: "\00ab"; padding-right: 4px; } #page-navigation .nav-next { display: block; float: right; padding: 10px; } #page-navigation .nav-next a:after { content: "\00bb"; padding-left: 4px; } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { #page-navigation { margin-bottom: 20px; } #page-navigation .nav-previous { text-align: center; } #page-navigation .nav-next { text-align: center; } } /* --------------------------------------------------------------------------------------- Load more items ------------------------------------------------------------------------------------------ */ #load-posts a.load-more-items { display: block; position: relative; width: 222px; background: #f1472d; color: #fff; font-size: 1.1em; font-weight: bold; text-transform: uppercase; padding: 10px 0; margin: 0 auto; } #load-posts a.load-more-items { text-shadow: 0 1px 0 rgba(0,0,0, 0.25); -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.25), 0 -1px 0 0 rgba(0,0,0, 0.25) inset; -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.25), 0 -1px 0 0 rgba(0,0,0, 0.25) inset; box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.25), 0 -1px 0 0 rgba(0,0,0, 0.25) inset; } #load-posts a:hover {} #load-posts a:active { position: relative; top: 1px; } /* - Inactive - */ #load-posts.inactive, #page-navigation.inactive { display: none; } /* - Counter - */ #load-posts .counter-text { width: 100%; color: #888; font-size: 0.9em; padding: 0; } #load-posts .counter-text { text-shadow: 0 1px 0 rgba(255,255,255, 0.75); } /* --------------------------------------------------------------------------------------- Load more items � Loading ------------------------------------------------------------------------------------------ */ #load-posts #loading { display: none; position: fixed; width: 34px; height: 34px; background-color: #fff; background-image: url(images/ajax-loader.gif); background-repeat: no-repeat; background-position: center center; bottom: 20px; right: 20px; z-index: 9999; } #load-posts #loading { -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Sidebar ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #sidebar {} #sidebar { display: block; float: left; position: relative; background: #fff; margin-bottom: 30px; z-index: 9; } #sidebar { -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.25); -webkit-box-shadow: 0 2px 1px 0 rgba(0,0,0, 0.25); box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.25); } #sidebar { text-shadow: 0 1px 0 rgba(255,255,255, 0.5); } #sidebar a { border-bottom: 1px solid rgba(255,255,255, 0.5); padding-bottom: 1px; } #sidebar a:hover { border-bottom: none; } /* --------------------------------------------------------------------------------------- Sidebar � Aside ------------------------------------------------------------------------------------------ */ #sidebar aside { border-top: 1px solid #eee; padding: 20px; margin-bottom: 20px; } #sidebar aside:first-child { border-top: none; } #sidebar aside p:last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------------------- Sidebar � Search ------------------------------------------------------------------------------------------ */ #sidebar aside.widget_search { margin-bottom: 0; } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Widgets ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------- Widgets � Custom � Twitter ------------------------------------------------------------------------------------------ */ aside.tva-latest-tweets #twitter_update_list {} aside.tva-latest-tweets #twitter_update_list li { margin-bottom: 20px; } aside.tva-latest-tweets #twitter_update_list .twitter-link { display: block; color: #888; margin-top: 5px; } aside.tva-latest-tweets #twitter_update_list .twitter-link:before { content: "\2014"; padding-right: 5px; } aside.tva-latest-tweets #twitter_update_list .twitter-link a {color: #888; } aside.tva-latest-tweets #twitter_update_list .twitter-link a:hover {color: #aaa; } aside.tva-latest-tweets .twitter-follow-user { font-weight: bold; } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- TVA Social ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .tva-social-icons {} .tva-social-icons a { display: block; float: left; width: 32px; height: 32px; background: url(images/icons/social-sprite.png); background-repeat: no-repeat; text-indent: -9999px; margin: 0 4px 4px 0; } /* - Version 1 - */ .tva-social-icons a.digg { background-position: -32px -32px; } .tva-social-icons a.dribbble { background-position: -96px -32px; } .tva-social-icons a.facebook { background-position: -160px -32px; } .tva-social-icons a.flickr { background-position: -288px -32px; } .tva-social-icons a.github { background-position: -224px -32px; } .tva-social-icons a.google { background-position: -352px -32px; } .tva-social-icons a.linkedin { background-position: -416px -32px; } .tva-social-icons a.pinterest { background-position: -32px -96px; } .tva-social-icons a.rss { background-position: -96px -96px; } .tva-social-icons a.skype { background-position: -160px -96px; } .tva-social-icons a.twitter { background-position: -224px -96px; } .tva-social-icons a.wordpress { background-position: -288px -96px; } .tva-social-icons a.vimeo { background-position: -352px -96px; } .tva-social-icons a.youtube { background-position: -416px -96px; } /* - Version 2 - */ .tva-social-icons a.px { background-position: -160px -160px; } .tva-social-icons a.deviantart { background-position: -224px -160px; } .tva-social-icons a.instagram { background-position: -32px -160px; } .tva-social-icons a.tumblr { background-position: -96px -160px; } /* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- TVA Social ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #header #header-right .tva-social-icons a { display: block; float: left; width: 34px; height: 34px; background: url(images/icons/social-minimal-sprite.png); background-repeat: no-repeat; text-indent: -9999px; border: 2px solid #fff; margin: 0 0 6px 6px; } #header #header-right .tva-social-icons a { opacity: 0.75; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.25), 0 1px 1px 0 rgba(0,0,0, 0.25) inset; -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.25), 0 1px 1px 0 rgba(0,0,0, 0.25) inset; box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.25), 0 1px 1px 0 rgba(0,0,0, 0.25) inset; } #header #header-right .tva-social-icons a:hover { opacity: 1; } #header #header-right .tva-social-icons a:active { -moz-box-shadow: 0 -1px 1px 0 rgba(0,0,0, 0.25), 0 -1px 1px 0 rgba(0,0,0, 0.25) inset; -webkit-box-shadow: 0 -1px 1px 0 rgba(0,0,0, 0.25), 0 -1px 1px 0 rgba(0,0,0, 0.25) inset; box-shadow: 0 -1px 1px 0 rgba(0,0,0, 0.25), 0 -1px 1px 0 rgba(0,0,0, 0.25) inset; } #header #header-right .tva-social-icons a.digg { background-position: -32px -32px; } #header #header-right .tva-social-icons a.dribbble { background-position: -96px -32px; } #header #header-right .tva-social-icons a.facebook { background-position: -160px -32px; } #header #header-right .tva-social-icons a.flickr { background-position: -288px -32px; } #header #header-right .tva-social-icons a.github { background-position: -224px -32px; } #header #header-right .tva-social-icons a.google { background-position: -352px -32px; } #header #header-right .tva-social-icons a.linkedin { background-position: -416px -32px; } #header #header-right .tva-social-icons a.pinterest { background-position: -32px -96px; } #header #header-right .tva-social-icons a.rss { background-position: -96px -96px; } #header #header-right .tva-social-icons a.skype { background-position: -160px -96px; } #header #header-right .tva-social-icons a.twitter { background-position: -224px -96px; } #header #header-right .tva-social-icons a.vimeo { background-position: -288px -96px; } #header #header-right .tva-social-icons a.wordpress { background-position: -352px -96px; } #header #header-right .tva-social-icons a.youtube { background-position: -416px -96px; } /* - Version 2 - */ #header #header-right .tva-social-icons a.px { background-position: -160px -160px; } #header #header-right .tva-social-icons a.deviantart { background-position: -224px -160px; } #header #header-right .tva-social-icons a.instagram { background-position: -32px -160px; } #header #header-right .tva-social-icons a.tumblr { background-position: -96px -160px; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Tablet Layout: 768px. Inherits styles from: Default Layout. ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- cols 1 2 3 4 5 6 7 8 9 10 11 12 px 44px 108px 172px 236px 300px 364px 428px 492px 556px 620px 684px 748px ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media only screen and (min-width: 767px) and (max-width: 1023px) { /* - Wrap - */ .wrap { display: block; float: left; position: relative; width: 100%; clear: both; } /* - Container - */ .container { padding: 0 10px; } /* - Row - */ .row { width: 100%; max-width: 474px; min-width: 474px; margin: 0 auto; } .row .row { min-width: 0; } .row .one, .row .two, .row .three, .row .four, .row .five, .row .six, .row .seven, .row .eight, .row .nine, .row .ten, .row .eleven, .row .twelve { float: left; min-width: 100%; width: 100%; max-width: 100%; margin-left: 0; } } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Mobile Layout: 306px Inherits styles from: Default Layout. ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- cols 1 px 306px ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media only screen and (min-width: 0px) and (max-width: 767px) { /* - Wrap - */ .wrap { display: block; float: left; position: relative; width: 100%; clear: both; } /* - Container - */ .container { padding: 0 10px; } /* - Row - */ .row { width: 100%; max-width: 310px; min-width: 310px; padding-left: 2px !important; padding-right: 2px !important; margin: 0 auto; } .row .row { min-width: 0; } .row .one, .row .two, .row .three, .row .four, .row .five, .row .six, .row .seven, .row .eight, .row .nine, .row .ten, .row .eleven, .row .twelve { float: left; min-width: 100%; width: 100%; max-width: 100%; margin-left: 0; } } /*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* /* Styles Drop-down /* /*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* --------------------------------------------------------------------------------------- Styles drop-down elements � Buttons ------------------------------------------------------------------------------------------ */ .button a { display: inline-block; position: relative; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.4em; font-weight: bold; text-decoration: none; text-transform: uppercase; text-align: center; line-height: 24px; padding: 10px 30px; margin: 0 0 10px !important; } .button a { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; transition: all 0.1s linear; } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { .button a { width: 100%; padding: 10px 0; } } /* - White - */ .button.button-white a { background: #f8f8f8; color: #444 !important; border: 1px solid #aaa; } .button.button-white a { text-shadow: 0 1px 0 rgba(255,255,255, 0.75); background-image: linear-gradient(bottom, rgb(232,232,232) 0%, rgb(248,248,248) 100%); background-image: -o-linear-gradient(bottom, rgb(232,232,232) 0%, rgb(248,248,248) 100%); background-image: -moz-linear-gradient(bottom, rgb(232,232,232) 0%, rgb(248,248,248) 100%); background-image: -webkit-linear-gradient(bottom, rgb(232,232,232) 0%, rgb(248,248,248) 100%); background-image: -ms-linear-gradient(bottom, rgb(232,232,232) 0%, rgb(248,248,248) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(232,232,232)), color-stop(1, rgb(248,248,248)) ); -moz-box-shadow: 0 1px 1px rgba(0,0,0, 0.1), 0 1px 0 rgba(255,255,255, 1) inset; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, 0.1), 0 1px 0 rgba(255,255,255, 1) inset; box-shadow: 0 1px 1px rgba(0,0,0, 0.1), 0 1px 0 rgba(255,255,255, 1) inset; } .button.button-white a:hover { background: #fff; } .button.button-white a:active { background: #fff; } /* - Red - */ .button.button-red a { background: #f55235; color: #570e01 !important; border: 1px solid #8b1d0a; } .button.button-red a { text-shadow: 0 1px 0 rgba(255,255,255, 0.25); background-image: linear-gradient(bottom, rgb(221,74,48) 0%, rgb(244,81,53) 100%); background-image: -o-linear-gradient(bottom, rgb(221,74,48) 0%, rgb(244,81,53) 100%); background-image: -moz-linear-gradient(bottom, rgb(221,74,48) 0%, rgb(244,81,53) 100%); background-image: -webkit-linear-gradient(bottom, rgb(221,74,48) 0%, rgb(244,81,53) 100%); background-image: -ms-linear-gradient(bottom, rgb(221,74,48) 0%, rgb(244,81,53) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(221,74,48)), color-stop(1, rgb(244,81,53)) ); -moz-box-shadow: 0 1px 1px rgba(0,0,0, 0.25), 0 1px 0 rgba(255,255,255, 0.25) inset; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, 0.25), 0 1px 0 rgba(255,255,255, 0.25) inset; box-shadow: 0 1px 1px rgba(0,0,0, 0.25), 0 1px 0 rgba(255,255,255, 0.25) inset; } .button.button-red a:hover { background: #f55235; } .button.button-red a:active { background: #f55235; } /* - Yellow - */ .button.button-yellow a { background: #ffd62c; color: #2c2301 !important; border: 1px solid #927604; } .button.button-yellow a { text-shadow: 0 1px 0 rgba(255,255,255, 0.25); background-image: linear-gradient(bottom, rgb(230,192,40) 0%, rgb(253,215,44) 100%); background-image: -o-linear-gradient(bottom, rgb(230,192,40) 0%, rgb(253,215,44) 100%); background-image: -moz-linear-gradient(bottom, rgb(230,192,40) 0%, rgb(253,215,44) 100%); background-image: -webkit-linear-gradient(bottom, rgb(230,192,40) 0%, rgb(253,215,44) 100%); background-image: -ms-linear-gradient(bottom, rgb(230,192,40) 0%, rgb(253,215,44) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(230,192,40)), color-stop(1, rgb(253,215,44)) ); -moz-box-shadow: 0 1px 1px rgba(0,0,0, 0.25), 0 1px 0 rgba(255,255,255, 0.25) inset; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, 0.25), 0 1px 0 rgba(255,255,255, 0.25) inset; box-shadow: 0 1px 1px rgba(0,0,0, 0.25), 0 1px 0 rgba(255,255,255, 0.25) inset; } .button.button-yellow a:hover { background: #ffd62c; } .button.button-yellow a:active { background: #ffd62c; } /* - Green - */ .button.button-green a { background: #45c254; color: #013908 !important; border: 1px solid #14691e; } .button.button-green a { text-shadow: 0 1px 0 rgba(255,255,255, 0.25); background-image: linear-gradient(bottom, rgb(62,175,75) 0%, rgb(69,194,84) 100%); background-image: -o-linear-gradient(bottom, rgb(62,175,75) 0%, rgb(69,194,84) 100%); background-image: -moz-linear-gradient(bottom, rgb(62,175,75) 0%, rgb(69,194,84) 100%); background-image: -webkit-linear-gradient(bottom, rgb(62,175,75) 0%, rgb(69,194,84) 100%); background-image: -ms-linear-gradient(bottom, rgb(62,175,75) 0%, rgb(69,194,84) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(62,175,75)), color-stop(1, rgb(69,194,84)) ); -moz-box-shadow: 0 1px 1px rgba(0,0,0, 0.25), 0 1px 0 rgba(255,255,255, 0.25) inset; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, 0.25), 0 1px 0 rgba(255,255,255, 0.25) inset; box-shadow: 0 1px 1px rgba(0,0,0, 0.25), 0 1px 0 rgba(255,255,255, 0.25) inset; } .button.button-green a:hover { background: #45c254; } .button.button-green a:active { background: #45c254; } /* - Blue - */ .button.button-blue a { background: #369fcc; color: #012e41 !important; border: 1px solid #0e5175; } .button.button-blue a { text-shadow: 0 1px 0 rgba(255,255,255, 0.25); background-image: linear-gradient(bottom, rgb(54,143,191) 0%, rgb(60,159,212) 100%); background-image: -o-linear-gradient(bottom, rgb(54,143,191) 0%, rgb(60,159,212) 100%); background-image: -moz-linear-gradient(bottom, rgb(54,143,191) 0%, rgb(60,159,212) 100%); background-image: -webkit-linear-gradient(bottom, rgb(54,143,191) 0%, rgb(60,159,212) 100%); background-image: -ms-linear-gradient(bottom, rgb(54,143,191) 0%, rgb(60,159,212) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(54,143,191)), color-stop(1, rgb(60,159,212)) ); -moz-box-shadow: 0 1px 1px rgba(0,0,0, 0.25), 0 1px 0 rgba(255,255,255, 0.25) inset; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, 0.25), 0 1px 0 rgba(255,255,255, 0.25) inset; box-shadow: 0 1px 1px rgba(0,0,0, 0.25), 0 1px 0 rgba(255,255,255, 0.25) inset; } .button.button-blue a:hover { background: #369fcc; } .button.button-blue a:active { background: #369fcc; } /* --------------------------------------------------------------------------------------- Styles drop-down elements � Toggle ------------------------------------------------------------------------------------------ */ .tva-toggle { margin-bottom: 20px; } .tva-toggle > p:first-child { margin: 0; } .tva-toggle > p:last-child {} /* - Trigger - */ .tva-toggle .tva-toggle-trigger { display: block; font-weight: bold; border: 1px solid #ddd; padding: 5px; padding-left: 40px; } .tva-toggle .tva-toggle-trigger { background-image: url(images/icons/icon-expand.png); background-repeat: no-repeat; background-position: center left; } .tva-toggle .tva-toggle-trigger.active { background-image: url(images/icons/icon-collapse.png); color: #999; } .tva-toggle .tva-toggle-trigger.active:hover { color: #555; } /* - Content - */ .tva-toggle .tva-toggle-content { display: none; } .tva-toggle .tva-toggle-content { padding-top: 20px; } /* --------------------------------------------------------------------------------------- Styles drop-down elements � Quotes ------------------------------------------------------------------------------------------ */ .pullquote { width: 40%; } .pullleft { margin-right: 20px; } .pullright { margin-left: 20px; } /* - Mobile - */ @media only screen and (min-width: 0px) and (max-width: 1023px) { .pullquote { float: left; width: 100%; } .pullleft { margin-right: 0; } .pullright { margin-left: 0; } } /* --------------------------------------------------------------------------------------- Styles drop-down elements � Alerts ------------------------------------------------------------------------------------------ */ .alert { display: block; position: relative; font-weight: bold; text-align: center; padding: 20px 30px; margin-bottom: 20px; } .alert { text-shadow: 0 1px 0 rgba(255,255,255, 0.25); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: background-color 0.2s linear; -moz-transition: background-color 0.2s linear; -o-transition: background-color 0.2s linear; transition: background-color 0.2s linear; -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.25); -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.25); box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.25); } .alert p:last-child { margin: 0; } /* - White - */ .alert.white { background: #fafafa; color: #111; border: 1px solid #777;} .alert.white { -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.1), 0 1px 0 0 rgba(255,255,255, 0.1) inset; -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.1), 0 1px 0 0 rgba(255,255,255, 0.1) inset; box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.1), 0 1px 0 0 rgba(255,255,255, 0.1) inset; } .alert.white a { color: #111; } /* - Red - */ .alert.red { background: #fff2f2; color: #b60f0f; border: 1px solid #e43636; } .alert.red { -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.1), 0 1px 0 0 rgba(255,255,255, 0.3) inset; -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.1), 0 1px 0 0 rgba(255,255,255, 0.3) inset; box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.1), 0 1px 0 0 rgba(255,255,255, 0.3) inset; } .alert.red a { color: #b60f0f; } /* - Yellow - */ .alert.yellow { background: #fffceb; color: #975507; border: 1px solid #dfa134; } .alert.yellow { -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.1), 0 1px 0 0 rgba(255,255,255, 0.4) inset; -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.1), 0 1px 0 0 rgba(255,255,255, 0.4) inset; box-shadow: 0 1px 1px 0 rgba(0,0,0, 0.1), 0 1px 0 0 rgba(255,255,255, 0.4) inset; } .alert.yellow a { color: #975507; } /* - Green - */ .alert.green { background: #e7fddf; color: #11601c; border: 1px solid #5a9b3a; } .alert.green { -moz-box-shadow: 0 1px 1px rgba(0,0,0, 0.1), 0 1px 0 rgba(255,255,255, 0.3) inset; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, 0.1), 0 1px 0 rgba(255,255,255, 0.3) inset; box-shadow: 0 1px 1px rgba(0,0,0, 0.1), 0 1px 0 rgba(255,255,255, 0.3) inset; } .alert.green a { color: #11601c; } /* - Blue - */ .alert.blue { background: #f2f8ff; color: #204479; border: 1px solid #496edb; } .alert.blue { -moz-box-shadow: 0 1px 1px rgba(0,0,0, 0.1), 0 1px 0 rgba(255,255,255, 0.3) inset; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, 0.1), 0 1px 0 rgba(255,255,255, 0.3) inset; box-shadow: 0 1px 1px rgba(0,0,0, 0.1), 0 1px 0 rgba(255,255,255, 0.3) inset; } .alert.blue a { color: #204479; } /* - Close alert - */ .closealert { position: absolute; font-size: 0.9em; top: 0; right: 5px; cursor: pointer; } /* --------------------------------------------------------------------------------------- Styles drop-down elements � Columns ------------------------------------------------------------------------------------------ */ .entry-content .tva-two-columns, .entry-content .tva-three-columns, .entry-content .tva-four-columns { margin-bottom: 20px; } .entry-content .tva-two-columns { -moz-column-count: 2; -moz-column-gap: 30px; -webkit-column-count: 2; -webkit-column-gap: 30px; column-count: 2; column-gap: 30px; } .entry-content .tva-three-columns { -moz-column-count: 3; -moz-column-gap: 30px; -webkit-column-count: 3; -webkit-column-gap: 30px; column-count: 3; column-gap: 30px; } .entry-content .tva-four-columns { -moz-column-count: 4; -moz-column-gap: 30px; -webkit-column-count: 4; -webkit-column-gap: 30px; column-count: 4; column-gap: 30px; } /* - Tablet - */ @media only screen and (min-width: 767px) and (max-width: 1023px) { .entry-content .tva-two-columns, .entry-content .tva-three-columns, .entry-content .tva-four-columns { margin-bottom: 20px; } .entry-content .tva-two-columns { -moz-column-count: 2; -moz-column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap: 20px; column-count: 2; column-gap: 20px; } .entry-content .tva-three-columns { -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; column-count: 3; column-gap: 20px; } .entry-content .tva-four-columns { -moz-column-count: 4; -moz-column-gap: 20px; -webkit-column-count: 4; -webkit-column-gap: 20px; column-count: 4; column-gap: 20px; } } /* - Mobile - */ @media only screen and (min-width: 0) and (max-width: 1023px) { .entry-content .tva-two-columns, .entry-content .tva-three-columns, .entry-content .tva-four-columns { margin-bottom: 20px; } .entry-content .tva-two-columns { -moz-column-count: 1; -moz-column-gap: 0; -webkit-column-count: 1; -webkit-column-gap: 0; column-count: 1; column-gap: 0; } .entry-content .tva-three-columns { -moz-column-count: 1; -moz-column-gap: 0; -webkit-column-count: 1; -webkit-column-gap: 0; column-count: 1; column-gap: 0; } .entry-content .tva-four-columns { -moz-column-count: 1; -moz-column-gap: 0; -webkit-column-count: 1; -webkit-column-gap: 0; column-count: 1; column-gap: 0; } } /* --------------------------------------------------------------------------------------- Styles drop-down elements � Lists ------------------------------------------------------------------------------------------ */ /* - v-List - */ ul.list-v { list-style-type: none !important; } ul.list-v li { background: url(images/icon-on.png) no-repeat left 1px; padding-left: 25px; } /* - x-List - */ ul.list-x { list-style-type: none !important; } ul.list-x li { background: url(images/icon-off.png) no-repeat left 1px; padding-left: 25px; } /* --------------------------------------------------------------------------------------- Styles drop-down elements � Highlight ------------------------------------------------------------------------------------------ */ .highlight { background: #7ecef4; background: rgba(126,206,244, 0.75); color: #fff; padding: 1px; } .highlight { text-shadow: none !important; } /* --------------------------------------------------------------------------------------- Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ------------------------------------------------------------------------------------------ */ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ 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: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* h5bp.com/t */ 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; } }