/* ---------- RESET ---------- */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } input { margin: 0; padding: 0; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } body { line-height: 100% } blockquote, q { quotes: none } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ul, ol, li { list-style-type: none } input, textarea { outline: none } strong { font-weight: bold } .fr { float: right } .fl { float: left } .cb { clear: both } /* ---------- VARIABLES ---------- */ /* ---------- PARAMETRIC MIXINS ---------- */ /* ---------- GENERAL ---------- */ body { font: 14px/21px Helvetica, Arial, "Lucida Grande", sans-serif; color: #5b5b5b; background: transparent url('../images/main-bg.jpg'); } p { margin-bottom: 1em } h1, h2, h3, h4, h5, h6 { margin-bottom: 1em; line-height: 1.5em; color: #282b2f; } h1 { font: 32px "Bree Serif", Georgia, serif } h2 { font: 24px "Bree Serif", Georgia, serif } h3 { font: 20px "Bree Serif", Georgia, serif } h4 { font: 16px "Bree Serif", Georgia, serif } h5 { font: 14px "Bree Serif", Georgia, serif; text-transform: uppercase; } h6 { font-size: 12px } a { color: #3d99ca; text-decoration: none; -webkit-transition: color 0.2s ease-out; -moz-transition: color 0.2s ease-out; -o-transition: color 0.2s ease-out; transition: color 0.2s ease-out; } a:hover { color: #282b2f } p a, li a { font-weight: bold } .ad-block img { border: 1px solid #d7d7d7; background: white; padding: 1px; display: block; -webkit-box-shadow: 0px 0px 5px #d7d7d7; box-shadow: 0px 0px 5px #d7d7d7; } hr { border: none; height: 1px; border-top: 1px solid #ebebeb; margin: 0; } .fancy-hr { background: #e4e4e4; height: 1px; display: block; border: none; -webkit-box-shadow: 0px 0px 7px #d7d7d7; box-shadow: 0px 0px 7px #d7d7d7; margin: 4em 0; } blockquote { font: italic 14px/1.5em Georgia, serif; color: #c9c9c9; margin: 2em 3em; background: transparent url('../images/blockquote-pattern.png') left top repeat-y; padding-left: 2em; } /* ---------- WP Styles Needed for Validation ---------- */ .sticky, .bypostauthor {} .gallery-caption { font-size: 12px; } /* ---------- TABLES ---------- */ table { margin: 2em 0; border: 1px solid #EBEBEB; background: white; } table caption { margin-bottom: .5em; border: 1px solid #EBEBEB; background: white; padding: .5em; font-weight: bold; } table tr { border-bottom: 1px solid #EBEBEB; } table th, table td { padding: 0.5em 1em; vertical-align: middle; } /* ---------- Definition Lists ---------- */ dl { margin: 2em 0; } dl dt { font-weight: bold; } dl dd { margin-left: 2em; margin-bottom: 1em; } /* ---------- ADDRESS ---------- */ address { margin: 2em 0; font-style: italic; color: #C9CAD6; } /* ---------- CODE AND PRE ---------- */ code, pre { margin: 2em 0; border: 1px solid #EBEBEB; } pre { padding: 2em; display: block; font-family: monospace; background: #f7f6f6; } code { display: inline; font-family: monospace; background: #f7f6f6; } /* ---------- HEADER ---------- */ .main-header { background: white; border-bottom: 1px solid #d7d7d7; -webkit-box-shadow: inset 0px -5px 0px #fafafa, 0px 0px 5px #d7d7d7; box-shadow: inset 0px -5px 0px #fafafa, 0px 0px 5px #d7d7d7; margin-bottom: 4em; } .top-menu-container { background: #282b2f url('../images/top-menu-bg.png') left top } #top-nav > ul { } #top-nav ul > li { float: left; font-size: 12px; padding-right: 1em; position: relative; } #top-nav ul > li a { color: #c9c9c9; padding: 1em 0; margin-left: 1em; font-weight: normal; display: inline-block; } #top-nav ul > li:first-child a, #top-nav ul > li ul li a { margin-left: 0; } #top-nav ul li a:hover { color: white } #top-nav ul > li ul { position: absolute; left: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); visibility: hidden; background: #282B2F; -webkit-transition: opacity 0.2s ease-in; -moz-transition: opacity 0.2s ease-in; -o-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; } #top-nav ul > li ul li { border-bottom: 1px solid #5b5b5b; position: relative; padding-right: 0; float: none; } #top-nav ul > li ul li:last-child { border-bottom: none } #top-nav ul > li:hover > ul { opacity: 10; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; visibility: visible; } #top-nav ul > li ul li a { color: #c9c9c9; display: block; padding: .5em 1em; white-space: nowrap; } #top-nav ul > li ul li a:hover { background: #5b5b5b } #top-nav ul > li:hover > a { color: white } #top-nav ul > li a::before { content: '/'; position: absolute; left: -2px; color: #5b5b5b; } #top-nav ul > li ul li a::before, #top-nav ul > li:first-child a::before { content: '' } #top-nav ul > li ul li ul { position: absolute; left: 100%; top: 0px; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); visibility: hidden; -webkit-transition: opacity 0.2s ease-in; -moz-transition: opacity 0.2s ease-in; -o-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; } #top-nav ul > li ul li:hover ul { opacity: 10; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; visibility: visible; } #responsive-top-nav-button { display: none; padding: 1em; margin: 1em 0; font-size: 12px; color: #c9c9c9; background-color: #282B2F; -webkit-transition: background-color 0.2s ease-in; -moz-transition: background-color 0.2s ease-in; -o-transition: background-color 0.2s ease-in; transition: background-color 0.2s ease-in; } #responsive-top-nav-button:hover { color: white; background-color: #3d4248; } .responsive-top-navigation { margin: 1em 2em 2em 2em; display: none; } .responsive-top-navigation ul li a { margin-bottom: 1em; display: block; position: relative; font-size: 12px; color: #c9c9c9; } .responsive-top-navigation ul li a:hover { color: white; } .responsive-top-navigation ul li a::before { content: '-'; position: absolute; left: -10px; color: #c9c9c9; font-weight: normal; } .responsive-top-navigation ul li ul { padding-left: 1.5em; margin-left: 1em; border-left: 1px dotted #3D4248; } .responsive-top-navigation ul li ul li a { font-weight: normal } .responsive-top-navigation ul li ul li a::before { content: '-'; position: absolute; left: -10px; color: #c9c9c9; } /* ---------- LOGO ---------- */ .logo-container { padding: 2em 0 } .logo { margin-bottom: 0; } .logo a { display: inline-block; } /* ---------- MENU ---------- */ .main-navigation ul > li { float: left; position: relative; } .main-navigation ul > li > a { color: #757575; display: block; padding: 1.75em 1em 1.75em 0; margin-right: 1em; position: relative; font-size: 13px; } .main-navigation ul > li > a::before { content: '|'; position: absolute; right: -1px; color: #d7d7d7; } .main-navigation ul > li ul li a::before { content: '' } .main-navigation ul > li ul { position: absolute; left: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); visibility: hidden; background: white; border: 1px solid #d7d7d7; -webkit-box-shadow: 0px 1px 3px #d7d7d7; box-shadow: 0px 1px 3px #d7d7d7; -webkit-transition: opacity 0.2s ease-in; -moz-transition: opacity 0.2s ease-in; -o-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; } .main-navigation ul > li ul li { border-bottom: 1px solid #e4e4e4; position: relative; float: none; } .main-navigation ul > li ul li:last-child { border-bottom: none } .main-navigation ul > li ul li a { font-size: 13px; color: #5b5b5b; display: block; padding: 1em 1.5em; white-space: nowrap; font-weight: normal; margin-right: 0; } .main-navigation ul > li ul li a:hover { background: #fafafa } .main-navigation ul > li:hover > a { color: #282b2f } .main-navigation ul > li:hover > ul { opacity: 10; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; visibility: visible; } .main-navigation ul > li ul li:hover ul { opacity: 10; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; visibility: visible; } .main-navigation ul li ul li ul { position: absolute; left: 100%; top: -1px; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); visibility: hidden; background: white; border: 1px solid #d7d7d7; -webkit-box-shadow: 0px 1px 3px #d7d7d7; box-shadow: 0px 1px 3px #d7d7d7; -webkit-transition: opacity 0.2s ease-in; -moz-transition: opacity 0.2s ease-in; -o-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; } .responsive-navigation { margin-left: 0; border-top: 1px solid #ebebeb; padding: 1em 2em; display: none; } .responsive-navigation ul li a { margin-bottom: 1em; display: block; position: relative; } .responsive-navigation ul li a::before { content: '-'; position: absolute; left: -10px; color: #c9c9c9; font-weight: normal; } .responsive-navigation ul li ul { padding-left: 1.5em; margin-left: 1em; border-left: 1px dotted #c9c9c9; } .responsive-navigation ul li ul li a { font-weight: normal } .responsive-navigation ul li ul li a::before { content: '-'; position: absolute; left: -10px; color: #c9c9c9; } .responsive-navigation-button { background: transparent url('../images/sprites.png') -128px -64px no-repeat; width: 48px; height: 48px; display: block; display: none; } .responsive-navigation-button:hover { background: transparent url('../images/sprites.png') -176px -64px no-repeat } /* ---------- FORMS ---------- */ form input[type="text"], form input[type='email'], form input[type='url'], form input[type='phone'], form textarea { border: 1px solid #cacaca; -webkit-box-shadow: 0px 0px 5px #d7d7d7; box-shadow: 0px 0px 5px #d7d7d7; padding: 0.75em 1em; font-family: Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px; width: 100%; color: #c9c9c9; -webkit-transition: color 0.2s ease-out; -moz-transition: color 0.2s ease-out; -o-transition: color 0.2s ease-out; transition: color 0.2s ease-out; } form input[type="text"]:hover, form input[type='email']:hover, form input[type='url']:hover, form input[type='phone']:hover, form textarea:hover, form input[type="text"]:focus, form input[type='email']:focus, form input[type='url']:focus, form input[type='phone']:focus, form textarea:focus { border: 1px solid #b1b1b1; color: #5b5b5b; } form input[type="submit"] { cursor: pointer; font: 12px Helvetica, Arial, "Lucida Grande", sans-serif; display: inline-block; -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; padding: .75em 1em; color: white; font-weight: normal; background-color: #65aed5; background-image: -webkit-gradient(linear, left top, left bottom, from(#65aed5), to(#3d99ca)); background-image: -webkit-linear-gradient(top, #65aed5, #3d99ca); background-image: -moz-linear-gradient(top, #65aed5, #3d99ca); background-image: -o-linear-gradient(top, #65aed5, #3d99ca); background-image: linear-gradient(to bottom, #65aed5, #3d99ca); border: 1px solid #3d99ca; text-shadow: 1px 1px 1px #286d92; -webkit-box-shadow: inset 0px 1px 1px #8dc3e0; box-shadow: inset 0px 1px 1px #8dc3e0; } form input[type='submit']:hover { background-color: #79b9da; background-image: -webkit-gradient(linear, left top, left bottom, from(#79b9da), to(#51a4cf)); background-image: -webkit-linear-gradient(top, #79b9da, #51a4cf); background-image: -moz-linear-gradient(top, #79b9da, #51a4cf); background-image: -o-linear-gradient(top, #79b9da, #51a4cf); background-image: linear-gradient(to bottom, #79b9da, #51a4cf); color: white; } form input[type='submit']:active { background-color: #51a4cf; background-image: -webkit-gradient(linear, left top, left bottom, from(#51a4cf), to(#79b9da)); background-image: -webkit-linear-gradient(top, #51a4cf, #79b9da); background-image: -moz-linear-gradient(top, #51a4cf, #79b9da); background-image: -o-linear-gradient(top, #51a4cf, #79b9da); background-image: linear-gradient(to bottom, #51a4cf, #79b9da); color: white; } .search-form input[type="text"] { background: #ffffff url('../images/sprites.png') 0 0 no-repeat; padding-left: 2.75em; } .search-results-container { margin: 0 3em; } .search-results-container + hr.fancy-hr { margin-top: 3em; } .search-results-container h4 { color: #A9A9A9; } form .p-errors label { color: red; } form .p-errors input, form .p-errors textarea { border: 1px solid #f7b5b5; } form .p-errors input:hover, form .p-errors input:focus, form .p-errors textarea:hover, form .p-errors textarea:focus { border: 1px solid #f87c7c; } /* ---------- ARTICLES ---------- */ .article-container { background: white; border: 1px solid #d7d7d7; padding-top: 3em; -webkit-box-shadow: inset 5px 5px 0px #fafafa, inset -5px -5px 0px #fafafa, 0px 0px 5px #d7d7d7; box-shadow: inset 5px 5px 0px #fafafa, inset -5px -5px 0px #fafafa, 0px 0px 5px #d7d7d7; } .article-container article { padding: 0 3em } .article-container article.no-posts, .article-container article.page-content { padding: 0 3em 3em 3em } .article-container article hr { margin: 2em 0; clear: both; } .article-container article.page-content .search-form-404 { width: 300px; } .article-container .page-admin-edit-this a { font-size: 12px; font-weight: normal; border-bottom: 1px dotted; } .article-container article ul, .article-container article ol { margin-bottom: 2em; } .article-container article li ul, .article-container article li ol { margin-bottom: 0; } .article-container article ul li { list-style: disc; margin-left: 2em; } .article-container article ol li { list-style: decimal; margin-left: 2em; } .article-container article .article-meta-categories { margin-bottom: 0; font-size: 12px; text-transform: uppercase; color: #c9c9c9; } .article-container article .article-meta-categories a { color: #c9c9c9; font-weight: normal; } .article-container article .article-meta-categories a:hover { color: #5b5b5b } .article-container article .article-meta-extra { margin-bottom: 2em; color: #c9c9c9; } .article-container article .article-meta-extra a { font-weight: normal } .article-container article .article-meta-extra a:hover { color: #5b5b5b } .article-container article .article-meta-comments { float: right; display: block; background: transparent url('../images/sprites.png') 0 -64px no-repeat; width: 48px; height: 53px; color: white; text-align: center; font: normal 18px "Bree Serif", Georgia, serif; padding-top: 11px; -webkit-transition: background 0.2s ease-in; -moz-transition: background 0.2s ease-in; -o-transition: background 0.2s ease-in; transition: background 0.2s ease-in; } .article-container article .article-meta-comments:hover { background: transparent url('../images/sprites.png') -48px -64px no-repeat } .article-container article h1 { margin-bottom: 0; margin-top: -5px; max-width: 80%; word-wrap: break-word; } .article-container article h1 a { color: #282b2f } .article-container article h1 a:hover { color: #3d99ca } .article-container article .article-preview-image { float: left; margin-right: 2em; } .article-container article .article-preview-image img { border: 1px solid #cacaca; -webkit-box-shadow: 0px 0px 5px #d7d7d7; box-shadow: 0px 0px 5px #d7d7d7; } .article-container article .article-full-image img { border: 1px solid #cacaca; -webkit-box-shadow: 0px 0px 5px #d7d7d7; box-shadow: 0px 0px 5px #d7d7d7; width: 100%; height: auto; margin-bottom: 2em; } .article-container article > p:last-child { margin-bottom: 0 } .article-container .post-pagination { clear: both; border-top: 1px solid #EBEBEB; margin-top: 2em; padding-top: 2em; font-size: 12px; text-align: center; } .article-container .article-tag-list { font-size: 12px; font-style: italic; color: #C9C9C9; } .wp-caption { text-align: center; } .wp-caption p.wp-caption-text { margin: .5em 1em; font-size: 12px; font-style: italic; } .video-container { margin-bottom: 2em } .post-type-quote { background: transparent url('../images/sprites.png') -256px -64px no-repeat; width: 48px; height: 48px; display: block; float: right; } .post-type-url { background: transparent url('../images/sprites.png') -304px -64px no-repeat; width: 48px; height: 48px; display: block; float: right; } .quote-container { background: #fafafa; border: 1px solid #d7d7d7; text-align: center; padding: 2em; -webkit-box-shadow: 0px 0px 5px #d7d7d7; box-shadow: 0px 0px 5px #d7d7d7; } .quote-container p { font: 20px Georgia, serif; font-style: italic; } .quote-container p cite { font: 14px Helvetica, Arial, "Lucida Grande", sans-serif; font-style: normal; margin-top: 2em; display: block; } .url-container { background: #fafafa; border: 1px solid #d7d7d7; text-align: center; padding: 2em 2em 1em 2em; -webkit-box-shadow: 0px 0px 5px #d7d7d7; box-shadow: 0px 0px 5px #d7d7d7; } .url-container p a { font-size: 20px; font-weight: normal; } .quote-container + p, .url-container + p { margin-top: 2em } .article-nav { padding: 0 3em; margin-bottom: 1em; margin-top: -2em; } .article-nav .article-nav-prev { float: left } .article-nav .article-nav-next { float: right } .article-intro { font-size: 16px } img.centered, .aligncenter, div.aligncenter { display: block; margin: 2em auto; } .aligncenter, .alignright, .alignleft { padding: 3px; background: white; margin: 2em auto; border: 1px solid #d7d7d7; -webkit-box-shadow: 0px 0px 5px #d7d7d7; box-shadow: 0px 0px 5px #d7d7d7; display: block; max-width: 100%; height: auto; } .aligncenter img, .alignright img, .alignleft img { max-width: 100%; height: auto; } .alignright { float: right; margin: 1.5em 0 2em 2em; } .alignleft { float: left; margin: 1.5em 2em 1.5em 0; } .alignnone { padding: 3px; background: white; margin: 2em 0; border: 1px solid #d7d7d7; -webkit-box-shadow: 0px 0px 5px #d7d7d7; box-shadow: 0px 0px 5px #d7d7d7; display: block; max-width: 100%; height: auto; } .alignnone img { max-width: 100%; height: auto; } .article-author { background: #fafafa; margin-top: 4em; border-top: 1px solid #d7d7d7; padding: 3em; -webkit-box-shadow: inset 5px 0px 0px #f5f5f5, inset -5px -5px 0px #f5f5f5; box-shadow: inset 5px 0px 0px #f5f5f5, inset -5px -5px 0px #f5f5f5; position: relative; } .article-author p { margin-bottom: 0; } .article-author p+p { margin-top: 1em; } /* ---------- COMMENTS ---------- */ .comments-area { margin-top: 4em } .article-add-comment { display: inline-block; width: 48px; height: 53px; background: transparent url('../images/sprites.png') -384px -64px no-repeat; float: right; } .article-add-comment:hover { background: transparent url('../images/sprites.png') -432px -64px no-repeat } .commentslist { margin: 4em 0; counter-reset: comment-id; } .commentslist li article { background: white; border: 1px solid #d7d7d7; padding: 2em; margin-bottom: 2em; -webkit-box-shadow: 0px 0px 5px #d7d7d7; box-shadow: 0px 0px 5px #d7d7d7; } .commentslist li article header { border-bottom: 1px solid #f1f1f1; margin-bottom: 2em; font-size: 12px; position: relative; } .commentslist li article header span, .commentslist li article .awaiting-moderation { color: #c9c9c9; font-style: italic; } .commentslist li article header h4 { margin-bottom: .5em; margin-top: 0; } .commentslist li article header h4 a { font-weight: normal } .commentslist li article header::before { counter-increment: comment-id; content: counter(comment-id); position: absolute; right: 0; top: 15px; color: #efefef; font-size: 48px; } .commentslist li article .comment-avatar img { float: right; margin-left: 2em; margin-bottom: 1em; } .commentslist li article.comment-author-admin { border: 1px solid #bebebe } .commentslist li article h4 span { display: none; } .commentslist li article.comment-author-admin h4 span { font: normal 10px Helvetica, Arial, "Lucida Grande", sans-serif; text-transform: uppercase; background: #282b2f; -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; color: white; padding: .5em; margin: 0 1em 0 0; display: inline-block; } .commentslist li ol, .commentslist li ul { padding-left: 3em; margin-left: 2em; border-left: 1px dotted #d7d7d7; } .commentslist li ol li, .commentslist li ul li { position: relative } .commentslist li ol li::before, .commentslist li ul li::before { content: ''; width: 2em; height: 1px; border-bottom: 1px dotted #d7d7d7; left: -2.5em; top: 3em; position: absolute; } .commentslist article ul, .commentslist article ol { border: none; padding-left: 0; } .commentslist article > ul, .commentslist article > ol { margin-bottom: 2em; } .commentslist article ol li::before, .commentslist article ul li::before { content: ''; display: none; } .commentslist article ol li { list-style: decimal; } .commentslist article ul li { list-style: disc; } #comment-form p label, #contact-form p label { display: inline; font-size: 12px; } #comment-form p input[type='text'], #comment-form p input[type='email'], #comment-form p input[type='url'], #contact-form p input[type='text'], #contact-form p input[type='email'], #contact-form p input[type='url'] { width: 50%; margin-right: 1em; } .comment-nav-section { margin-bottom: 2em; border-bottom: 1px solid #d7d7d7; } .allowed-tags { margin: 2em 0; font-size: 12px; } #cancel-comment-reply-link { font-size: 12px; display: block; font-family: Helvetica, Arial, "Lucida Grande", sans-serif; margin-top: 1em; } /* ---------- SIDEBAR ---------- */ .sidebar-widget { padding-bottom: 2em; margin-bottom: 2em; border-bottom: 1px solid #d7d7d7; font-size: 12px; } .sidebar-widget li ul, .sidebar-widget li ol, .footer-widget li ul, .footer-widget li ol { margin-left: 1em; } .sidebar-widget li ul li, .sidebar-widget li ol li, .footer-widget li ul li, .footer-widget li ol li { padding-left: 1em; position: relative; } .sidebar-widget li ul li::before, .sidebar-widget li ol li::before, .footer-widget li ul li::before, .footer-widget li ol li::before { content: '-'; position: absolute; left: 0; color: #5B5B6C; } .ad-125 li { float: left; margin-bottom: 12px; } .ad-125 li.alt { margin-left: 12px } .social-widget li { float: left; margin: 0 .5em .5em 0; } .social-widget li a { display: block; width: 32px; height: 32px; margin-right: .5em; background: transparent url('../images/sprites.png') no-repeat; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .social-widget li a.digg { background-position: 0 -128px } .social-widget li a.digg:hover { background-position: 0 -160px } .social-widget li a.dribbble { background-position: -32px -128px } .social-widget li a.dribbble:hover { background-position: -32px -160px } .social-widget li a.facebook { background-position: -64px -128px } .social-widget li a.facebook:hover { background-position: -64px -160px } .social-widget li a.flickr { background-position: -96px -128px } .social-widget li a.flickr:hover { background-position: -96px -160px } .social-widget li a.gplus { background-position: -128px -128px } .social-widget li a.gplus:hover { background-position: -128px -160px } .social-widget li a.linkedin { background-position: -160px -128px } .social-widget li a.linkedin:hover { background-position: -160px -160px } .social-widget li a.myspace { background-position: -192px -128px } .social-widget li a.myspace:hover { background-position: -192px -160px } .social-widget li a.pinterest { background-position: -224px -128px } .social-widget li a.pinterest:hover { background-position: -224px -160px } .social-widget li a.skype { background-position: -256px -128px } .social-widget li a.skype:hover { background-position: -256px -160px } .social-widget li a.twitter { background-position: -288px -128px } .social-widget li a.twitter:hover { background-position: -288px -160px } .social-widget li a.vimeo { background-position: -320px -128px } .social-widget li a.vimeo:hover { background-position: -320px -160px } .social-widget li a.youtube { background-position: -352px -128px } .social-widget li a.youtube:hover { background-position: -352px -160px } /* ---------- RSS WIDGET ---------- */ .rsswidget { display: block; } .rss-date { margin-bottom: 1em; display: block; font-style: italic; } .rssSummary + cite { margin-bottom: 2em; display: block; font-weight: bold; } /* ---------- TEXT WIDGET ---------- */ .textwidget img { max-width: 100%; height: auto; } .textwidget p { word-wrap: break-word; } /* ---------- BUTTON ---------- */ .button { display: inline-block; -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; padding: .75em 1em; color: white; font-weight: normal; } .small-button { display: inline-block; -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; padding: .7em .75em .5em .75em; color: white; font-weight: normal; font-size: 12px; } .blue { background-color: #65aed5; background-image: -webkit-gradient(linear, left top, left bottom, from(#65aed5), to(#3d99ca)); background-image: -webkit-linear-gradient(top, #65aed5, #3d99ca); background-image: -moz-linear-gradient(top, #65aed5, #3d99ca); background-image: -o-linear-gradient(top, #65aed5, #3d99ca); background-image: linear-gradient(to bottom, #65aed5, #3d99ca); border: 1px solid #3d99ca; text-shadow: 1px 1px 1px #286d92; -webkit-box-shadow: inset 0px 1px 1px #8dc3e0; box-shadow: inset 0px 1px 1px #8dc3e0; } .blue:hover { background-color: #79b9da; background-image: -webkit-gradient(linear, left top, left bottom, from(#79b9da), to(#51a4cf)); background-image: -webkit-linear-gradient(top, #79b9da, #51a4cf); background-image: -moz-linear-gradient(top, #79b9da, #51a4cf); background-image: -o-linear-gradient(top, #79b9da, #51a4cf); background-image: linear-gradient(to bottom, #79b9da, #51a4cf); color: white; } .blue:active { background-color: #51a4cf; background-image: -webkit-gradient(linear, left top, left bottom, from(#51a4cf), to(#79b9da)); background-image: -webkit-linear-gradient(top, #51a4cf, #79b9da); background-image: -moz-linear-gradient(top, #51a4cf, #79b9da); background-image: -o-linear-gradient(top, #51a4cf, #79b9da); background-image: linear-gradient(to bottom, #51a4cf, #79b9da); color: white; } .gray { background-color: #fdfdfd; background-image: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#e1e4e6)); background-image: -webkit-linear-gradient(top, #fdfdfd, #e1e4e6); background-image: -moz-linear-gradient(top, #fdfdfd, #e1e4e6); background-image: -o-linear-gradient(top, #fdfdfd, #e1e4e6); background-image: linear-gradient(to bottom, #fdfdfd, #e1e4e6); border: 1px solid #e1e4e6; text-shadow: 1px 1px 1px #ffffff; -webkit-box-shadow: inset 0px 1px 1px #ffffff; box-shadow: inset 0px 1px 1px #ffffff; color: #5b666d; } .gray:hover { background-color: #ffffff; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eff1f2)); background-image: -webkit-linear-gradient(top, #ffffff, #eff1f2); background-image: -moz-linear-gradient(top, #ffffff, #eff1f2); background-image: -o-linear-gradient(top, #ffffff, #eff1f2); background-image: linear-gradient(to bottom, #ffffff, #eff1f2); color: #5b666d; } .gray:active { background-color: #eff1f2; background-image: -webkit-gradient(linear, left top, left bottom, from(#eff1f2), to(#ffffff)); background-image: -webkit-linear-gradient(top, #eff1f2, #ffffff); background-image: -moz-linear-gradient(top, #eff1f2, #ffffff); background-image: -o-linear-gradient(top, #eff1f2, #ffffff); background-image: linear-gradient(to bottom, #eff1f2, #ffffff); color: #5b666d; } /* ---------- FOOTER ---------- */ .footer-widget-area { background: white; border-top: 1px solid #d7d7d7; -webkit-box-shadow: inset 0px 5px 0px #fafafa, 0px 0px 5px #d7d7d7; box-shadow: inset 0px 5px 0px #fafafa, 0px 0px 5px #d7d7d7; padding: 2em 0 4em 0; margin-top: 4em; font-size: 12px; } .footer-widget { margin-top: 2em; } .border-list li { border-bottom: 1px solid #f1f1f1 } .border-list li a { padding: .5em 0; display: block; } .copyright-container { background: #fafafa; padding: 2em 0 1em 0; border-top: 1px solid #d7d7d7; font-size: 12px; } .copyright-container .top-link-footer { float: right } /* ---------- IE8 Styles ---------- */ .ie8 .main-sidebar { width: 270px; margin-left: 30px; } .ie8 .article-container-fix { width: 640px } .ie8 .main-navigation > li ul { display: block; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .ie8 .main-navigation > li:hover ul { visibility: visible } .ie8 .commentslist li ol, .ie8 .commentslist li ul { padding-left: 0; margin-left: 2em; border-left: none; } /* ---------- MEDIA QUERIES ---------- */ /* Smaller than standard 1200 (devices and browsers) */ @media only screen and (max-width: 1199px) { .main-sidebar { width: 270px; margin-left: 30px; } .article-container-fix { width: 640px } } /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) { } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { .article-container-fix { width: 724px } .main-sidebar { display: none } .main-navigation { display: none } .responsive-navigation-button { display: block; margin: 1em 0; } #responsive-top-nav-button { display: inline-block; } #top-nav { display: none; } .search-form input[type="text"] { margin-top: 20px } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { .container { padding: 0 2em } .main-sidebar { display: none } .main-navigation { display: none } .responsive-navigation-button { display: block; margin: 1em 0; float: left; } #responsive-top-nav-button { display: inline-block; } #top-nav { display: none; } .search-form input[type="text"] { margin-top: 20px } .logo-container .ad-block { display: none } .logo a { background-position: center center } .search-form input[type="text"] { width: 200px; float: right; } .article-container-fix { width: 100% } .footer-widget { margin-bottom: 2em } .article-preview-image { display: none } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { .article-author .author-info { border-right: none; width: 100%; float: none; margin-bottom: 2em; } .article-author .share-article { width: 100%; float: none; border-top: 1px solid #d7d7d7; padding-top: 2em; } .aligncenter { width: 100% } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { .article-container article { padding: 0 2em } .article-container article h1 { max-width: 170px } h1 { font: 28px "Bree Serif", Georgia, serif } h2 { font: 22px "Bree Serif", Georgia, serif } .fancy-hr { margin: 3em 0 } .url-container p a { font-size: 14px } .article-nav { padding: 0 3em; margin-bottom: 1em; margin-top: -1em; } .logo-container { padding: 1em 0 } .article-nav-prev, .article-nav-next { float: none; width: 100%; text-align: center; } .article-author .author-info { border-right: none; width: 100%; float: none; margin-bottom: 2em; } .article-author .share-article { width: 100%; float: none; border-top: 1px solid #d7d7d7; padding-top: 2em; } .aligncenter, .alignleft, .alignright { width: 100%; display: block; float: none; margin: 2em 0; } .commentslist article header::before { display: none } blockquote { margin-left: 2em; font-size: 16px; } }