/*! * Xin Style *---------------------------------------------*/ /* Bootstrap Push Pull */ @media (min-width: 768px) { [class*="push"], [class*="pull"] { position: relative; } } @media (min-width: 768px) { .row-fluid .push1 { left: 8.547008547%; } .row-fluid .push2 { left: 17.09401709%; } .row-fluid .push3 { left: 25.64102564%; } .row-fluid .push4 { left: 34.18803419%; } .row-fluid .push5 { left: 42.73504274%; } .row-fluid .push6 { left: 51.28205128%; } .row-fluid .push7 { left: 59.82905983%; } .row-fluid .push8 { left: 68.37606838%; } .row-fluid .push9 { left: 76.92307692%; } .row-fluid .push10 { left: 85.47008547%; } .row-fluid .push11 { left: 94.01709402%; } .row-fluid .pull1 { left: -8.547008547%; } .row-fluid .pull2 { left: -17.09401709%; } .row-fluid .pull3 { left: -25.64102564%; } .row-fluid .pull4 { left: -34.18803419%; } .row-fluid .pull5 { left: -42.73504274%; } .row-fluid .pull6 { left: -51.28205128%; } .row-fluid .pull7 { left: -59.82905983%; } .row-fluid .pull8 { left: -68.37606838%; } .row-fluid .pull9 { left: -76.92307692%; } .row-fluid .pull10 { left: -85.47008547%; } .row-fluid .pull11 { left: -94.01709402%; } } /* General */ a { color: #444444; } ul, ol { margin-left: 1em; } object, embed, iframe { max-width: 100%; } body { -ms-word-wrap: break-word; word-wrap: break-word; background: none; } /* grid width */ .container-fluid { max-width: 1080px; margin: 0 auto; } /* WP required class */ .wp-caption { margin-bottom: 1em; max-width: 100%; text-align: center; } .wp-caption p.wp-caption-text { margin: 0.5em; color: #888; } .alignleft { display: inline; float: left; margin-right: 1em; margin-bottom: 1em; } .alignright { display: inline; float: right; margin-left: 1em; margin-bottom: 1em; } .aligncenter { clear: both; display: block; margin: 1em auto; } .gallery .gallery-caption { margin: 0 0 1em; font-size: 0.8em; } .gallery dl { margin: 0; } .format-gallery .entry-content { clear: both; } .bypostauthor { } /* Background */ .site-header { /* background: url(../images/header_bg.png) center top no-repeat; */ min-height: 100px; } .titlebar { box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.65); margin-bottom: 1px; } #footer { background: #e8e8e8; } #content { border-right: 1px solid #ccc; min-height: 40em; } #sidebar_one { border-right: 1px solid #ccc; } .custom-background #footer { color: #ddd; background: rgba(50, 50, 50, 0.8); } .custom-background .row-container { background: #f1f1f1; background: rgba(250,250,250, 0.8); box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.65), -5px 0 5px -5px rgba(0, 0, 0, 0.65); } .social-links a { text-indent: -9999px; display: inline-block; overflow: hidden; margin: 0; padding: 0; width: 32px; height: 32px; background: url('../images/icons.png') no-repeat 0 0; } /* Header */ #branding { position: relative; } .site-title { padding: 0 16px; text-align: center; } h3#site-title { font-size: 32px; line-height: 1; margin-top: 5px; text-shadow: 1px 1px 0px #666, 4px 4px 0px rgba(0, 0, 0, 0.15); filter: Shadow(Color=#666, Direction=135, Strength=4); text-transform: uppercase; } #site-title a { color: #00557d; text-decoration: none; } h3#site-description { font-size: 16px; line-height: 1.2; color: #7b7b7b; } #logo { text-align: center; } #header-widget { background: none; min-height: 20px; } #left-header-widget { display: inline-block; } #right-header-widget { display: inline-block; float: right; } #center-header-widget { text-align: center; } /* Post */ .titlebar h1 { font-size: 1.75em; font-variant: small-caps; margin: 0.25em 0; } .entry-title { font-size: 1.5em; line-height: 1.1em; } .hentry { margin: 0 0 2em; position: relative; padding: 0; } .single-post-link { position: absolute; right: 5px; top: 45%; text-decoration: none; } #nav-above { display: none; } #nav-single { padding: 0.8em 0; } .nav-previous { float: left; } .nav-next { float: right; text-align: right; } .page-numbers.current { padding: 0.2em 0.3em; background: #bbe9ff; } .page-link { clear: both; margin: 20px 0 12px 0; word-spacing: 3px; } .page-link a { font-weight: normal; padding: 4px 6px; text-decoration: none; border: 1px solid #999; } .page-link a:hover { background: #999; } .entry-meta { font-size: 0.875em; line-height: 1.25; } .entry-featured { color: #d20000; text-transform: uppercase; } .entry-meta-attachment { margin-bottom: 1em; } .attachment img { display: block; margin: 0 auto; } .entry-attachment { margin-top: 2em; } .entry-meta a { color: #555; } .meta-icon { margin-right: 0.3em; } .entry-featured, .meta-comment, .entry-date, .by-author, .entry-category, .entry-tag { margin-right: 0.5em; } .entry-content { margin-top: 1em; } .edit-link { margin-left: 0.5em; } /* Post Formats */ .multi .format-aside .entry-title, .multi .format-aside .post-date-2, .multi .format-aside .entry-meta { display: none; } .multi .format-link .entry-title, .multi .format-link .post-date-2, .multi .format-link .entry-meta { display: none; } .format-link .entry-summary a:before, .format-link .entry-content a:before { font-family: "FontAwesome"; content: "\f0ac"; margin-right: 10px; } .format-link .entry-summary a, .format-link .entry-content a { font-size: 18px; } .multi .format-quote .post-date-2, .multi .format-quote .entry-title, .multi .format-quote .entry-meta { display: none; } .format-aside .entry-content, .format-aside .entry-summary, .format-quote .entry-content, .format-quote .entry-summary { position: relative; background:#f1f1f1; padding: 20px 10px 10px 20px; margin: 10px 0; background:#f1f1f1; border-left: 20px solid #e1e1e1; } .format-quote blockquote { margin: 0; border: none; } .entry-content blockquote cite { margin: 5px 0 0; display: block; } .format-quote .entry-content:before, .format-quote .entry-summary:before { position: absolute; top: 30px; left: -5px; font-family: "FontAwesome"; content: "\f10d"; font-size: 36px; color: #888; } /* Full Screen*/ .fullscreen #content { margin-top: 10%; margin-bottom: 10%; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: rgba(180, 176, 157, 0.8); } .fullscreen .hentry { padding: 2em; } .fullscreen .entry-title { font-size: 2.2em; text-align: center; } .fullscreen .entry-content { font-size: 1.2em; } .fullscreen .entry-content a { color: #005f8c; } .fullscreen .entry-content .btn { color: #ffffff; } .fullscreen .post-date-2, .fullscreen .entry-meta { display: none; } .fullscreen .entry-meta .edit-link { display: inlne; } /* Post Date */ .post-date-2 { float: left; width: 52px; text-align: center; margin: 0 1em 0 0; border: solid 1px #bebebe; background-color: #fff; background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.1) 100%); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(0,0,0,0.1) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(0,0,0,0.1) 100%); border-radius: 5px; box-shadow: 0 1px 1px rgba(0,0,0,.15);} .post-date-2 .month { color: #fff; font: 11px/100% Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1px; display: block; padding: 2px 0; width: 100%; position: relative; left: 0px; top: -1px; border: solid 1px #5984db; background-color: #00ABFD; background-image: -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); box-shadow: 0 1px 0 rgba(0,0,0,.2); border-top-left-radius: 5px; border-top-right-radius: 5px; } .post-date-2 .day { color: #666; padding: 2px 0 1px; font: bold 18px/100% Arial, Helvetica, sans-serif; display: block; } .post-date-2 .year { color: #999; padding: 0 0 4px; font: 10px/100% Arial, Helvetica, sans-serif; display: block; } .img-polaroid { padding: 3px; width: 100%; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .featured-image { margin-bottom: 1.5em; } .fullscreen-image { position: fixed; top: 0; left: 0; z-index: -1; min-height: 100%; min-width: 1024px; width: 100%; height: auto; } @media screen and (max-width: 1024px) { .fullscreen-image { left: 50%; margin-left: -512px; } } .featured-container { position: absolute; left: 0px; top: 0px; color: #ff5959; } .featured-container .icon-star { margin-left: 5px; } /* Post Summary */ .post-thumbnail { display: inline; float: left; margin-right: 0.875em; margin-bottom: 0.875em; } .xin_recent_post .hentry { padding: 0; margin-bottom: 1em; } .xin_recent_post .entry-title { font-size: 1.1em; line-height: 1.2; } .xin_recent_post_link { position: absolute; top: 24px; right: 16px; } /* Comments */ .commentlist, .children { margin: 0; list-style: none; font-size: 14px; } .children { margin-left: 2em } .comment-meta .avatar { border: 1px solid #ccc; padding: 3px; margin-right: 5px; } .commentlist p { margin: 0.35em 0; } .commentlist a { color: #333; } article.comment, li.pingback { overflow: hidden; padding: 0.5em; position: relative; border-bottom: 1px solid #ccc; } a.comment-reply-link { background-color: #7bb4ec; background: -webkit-gradient(linear, left top, left bottom, from(#7bb4ec), to(#468cd4)); background: -moz-linear-gradient(top, #7bb4ec, #468cd4); background: linear-gradient(#7bb4ec, #468cd4); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7bb4ec, endColorstr=#468cd4); border-radius: 3px; color: #eee; cursor: pointer; display: inline-block; float: right; opacity: 0.6; padding: 0 1em; text-align: center; text-shadow: 1px 1px #3e79b9; } a.comment-reply-link:hover { opacity: 1; } .form-allowed-tags { display: none; } /* Widgets */ .widget-container { margin-top: 1em; margin-bottom: 1em; } #header-widget .widget-container, #center-header-widget .widget-container { margin: 0; } #home-widget-area { padding-top: 1.5em; padding-bottom: 1.5em; } .widget-area ul { list-style: none; margin: 0px; padding: 0; } .widget-area ul ul ul { margin-left: 0.8em; } .widget_recent_comments ul li { padding: 5px; border-bottom: 1px solid #999; } .widget_rss ul li, .widget_nav_menu ul li, .widget_pages ul li, .widget_meta ul li, .widget_archive ul li, .widget_recent_entries ul li, .widget_categories ul li { position: relative; margin: 0; } .widget_rss ul li a, .widget_nav_menu ul li a, .widget_meta ul li a, .widget_recent_entries ul li a, .widget_pages ul li a, .widget_archive ul li a, .widget_categories ul li a { display: block; padding: 5px; text-decoration: none; border-bottom: 1px solid #999; } .widget_rss ul li a:hover, .widget_recent_comments ul li a:hover, .widget_nav_menu ul li a:hover, .widget_meta ul li a:hover, .widget_recent_entries ul li a:hover, .widget_pages ul li a:hover, .widget_archive ul li a:hover, .widget_categories ul li a:hover { background: #eee; } .widget_rss ul li a:before, .widget_nav_menu ul li a:before, .widget_meta ul li a:before, .widget_recent_entries ul li a:before, .widget_pages ul li a:before, .widget_archive ul li a:before, .widget_categories ul li a:before { font-family: "FontAwesome"; content: "\f105"; margin-right: 0.3em; } .widget_archive ul li span, .widget_categories ul li span { position: absolute; top: 3px; right: 10px; color: #999; } .widget-title { font-size: 1.2em; border-top: 3px solid #6B7B84; border-bottom: 1px solid #6B7B84; color: #6B7B84; padding: 0.25em 0; margin-bottom: 0; } #footer-widget-area .widget-title { border-top: none; } #center-header-widget .widget-title, #header-widget .widget-title { display: none; } #searchsubmit, .widget_search label { display: none; } .search-query { max-width: 15em; } #topbar .search-query { width: 8em; background: #999; border: none; } #wp-calendar { width: 100%; } /* Navigation Tabs */ .xin_navigation .section-container.tabs > section > .title a { padding: 0.25em 0.5em; } /* Section Menu */ .navbar .brand { padding: 10px 20px; color: #eee; font-size: 16px; text-shadow: none; } .navbar .brand:hover { background: #7697FE; } #mainmenu { background-image: -moz-linear-gradient(top, #666666, #555555); background-image: -webkit-linear-gradient(top, #666666, #555555); background-image: -o-linear-gradient(top, #666666, #555555); background-image: linear-gradient(to bottom, #666666, #555555); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff666666', endColorstr='#ff555555', GradientType=0); background-repeat: repeat-x; border-top: 1px solid #555555; margin: 0; } #mainmenu .navbar-inner { border-color: transparent; background: none; filter: none; box-shadow: none; } #mainmenu .nav > li > a { color: #eee; text-shadow: none; font-weight: bold; } #mainmenu .nav > li > a:hover { background: #7697FE; } ul.nav li.dropdown:hover > .dropdown-menu { display: block; margin-top: 0; } /* Footer Menu */ .footer-menu { display: block; text-align: center; margin: 0; } .footer-menu ul { padding: 0; margin: 0; list-style:none; } .footer-menu ul li ul, .footer-menu ul li { display: inline; } .footer-menu ul li a { padding: 0 8px; } .footer-menu ul li { border-right: 1px solid #999; } .footer-menu ul li:last-child { border-right: none; } .footer-menu ul li ul li:first-child { border-left: 1px solid #999; } /* Footer */ #footer { font-size: 0.8em; padding: 0.5em 1em; } .fullscreen #footer { position: fixed; width: 100%; bottom: 0; } #footer-widget-area { font-size: 0.8em; background: #571d00; color: #eee; } #footer-widget-area .widget-container ul li, #footer-widget-area .widget-container ul li a { border-bottom-color: #712400 } #site-info, #site-generator { color: #999; line-height: 1.5; } #site-info a, #site-generator a { text-decoration: none; } #site-generator { font-style: italic; text-align: right; color: #999; } #site-generator a { color: #999; } img#wpstats { display: none; margin: 0 auto 10px; } /* Back to top button */ .back-to-top { position: fixed; bottom: 10px; right: 10px; } .back-to-top a { color: #000; padding: 5px; background: #e1e1e1; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-decoration: none; } .back-to-top a:hover { background: #c1c1c1; } /* Social Widgets */ .widget-area .social-links { clear: both; text-align: center; margin: 10px auto 0; float: none; } .widget-area .social-links li { display: inline-block; margin: 0 0.15em; } .widget-area .social-links a { opacity: 0.6; } .widget-area .social-links a:hover { opacity: 1; } .social-links a.url_facebook { background-position: 0px -70px; } .social-links a.url_linkedin { background-position: -32px -70px; } .social-links a.url_twitter { background-position: -64px -70px; } .social-links a.url_gplus { background-position: -96px -70px; } .social-links a.url_youtube { background-position: -128px -70px; } .social-links a.url_vimeo { background-position: -160px -70px; } .social-links a.url_rss { background-position: -192px -70px; } .social-links a.url_flickr { background-position: -0px -102px; } .social-links a.url_instagram { background-position: -32px -102px; } .social-links a.url_pinterest { background-position: -64px -102px; } .social-links a.url_aboutme { background-position: -96px -102px; } .social-links a.url_stumbleupon { background-position: -128px -102px; } /*Featured Home Page*/ /* Carousel base class */ #featured-home { margin-bottom: 0; } #featured-home .container { position: relative; z-index: 9; } .carousel-control { height: 80px; margin-top: 0; font-size: 120px; text-shadow: 0 1px 1px rgba(0,0,0,.4); background-color: transparent; border: 0; z-index: 10; } #featured-home .item { height: 500px; } #featured-home img { position: absolute; top: 0; left: 0; min-width: 1024px; width: 100%; min-height: 100%; height: auto; z-index: -1; } @media screen and (max-width: 1024px) { #featured-home img { left: 50%; margin-left: -512px; } } .carousel-caption { background-color: transparent; position: static; max-width: 550px; padding: 0 20px; margin-top: 200px; } .carousel-caption h1, .carousel-caption .lead { margin: 0; line-height: 1.25; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.4); } .carousel-caption .btn { margin-top: 10px; } /* to be removed */ .featured-wrapper { } .flexslider { border: none; margin: 0; box-shadow: none; background: none; } .flexslider .slides > li { height: 400px; } .slider-caption { position: absolute; bottom: 0; background-color: black; background-color: rgba(0, 0, 0, 0.6); color: #fff; width: inherit; padding: 10px 14px; font-size: 0.875em; } .flex-caption { position: absolute; bottom: 0; } .slider-caption p { margin: 0; } #featured .more-link { display: none; } #featured h2 { font-size: 1.8em; } .no-featured-image { padding: 2em; } .small-featured { padding: 1em 2em; } #featured-list { list-style: none; margin: 0; padding: 0; max-height: 50px; overflow: hidden; border: 1px solid #ccc; } #featured-list li { display: inline-block; float: left; opacity: 1; overflow: hidden; height: 50px; color: #333; } #featured-list li.active { opacity: 0.5; } #featured-list li:hover { opacity: 0.8; } #featured-list li > img { display: inline-block; width: 50px; height: 50px; border-left: 1px solid #ccc; } #featured-list li > .thumb-title { margin-left: 0.5em; } /* Portfolio */ .portfolio > .item > .hentry { margin: 0; word-wrap: break-word; padding: 1em; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #f5f5f5; } .portfolio .item { display: inline; float: left; margin: 10px 0.9% 10px 1%; width: 98%; } .portfolio.column-2 .item { width: 48%; } .portfolio.column-2 .item.sticky { width: 98%; } .portfolio.column-3 .item { width: 31.33%; } .portfolio.column-3 .item.sticky { width: 64.66%; } .portfolio.column-4 .item { width: 23%; } .portfolio.column-4 .item.sticky { width: 48%; } .portfolio .pagination { display: none; } #infscr-loading { text-align: center; z-index: 100; position: absolute; background: #999; color: #000; left: 45%; bottom: 10px; width: 200px; padding: 10px; opacity: 0.8; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } /* Tablet Portrait and below */ @media screen and (max-width: 768px) { body { padding: 0; } .flexslider .slides > li { height: auto; } .footer-menu { clear: both; } .portfolio.column-4 .item { width: 48%; } .portfolio.column-2 .item.sticky, .portfolio.column-3 .item.sticky, .portfolio.column-4 .item.sticky { width: 98%; } } /* Phones */ @media screen and (max-width: 480px) { body { padding: 0; } #site-info, #site-generator { float: none !important; text-align: center; display: block; } .portfolio.column-2 .item, .portfolio.column-3 .item, .portfolio.column-4 .item { width: 98%; } .hentry { margin: 0 0 1em; padding: 0; } .nav li.dropdown .dropdown-toggle { display: none; } .nav-collapse .dropdown-menu { display: block; } .nav-collapse .dropdown-menu li > a { color: #fff; } #mainmenu .nav > li > a { border: none; } } /* print */ @media print { h1 { page-break-before: always; } h1, h2, h3, h4, h5, h6 { page-break-after: avoid; } ul, ol, dl { page-break-before: avoid; } }