/******************************************************************************* Title: ID Ruby Date: January 2012 Author: Suitmedia (http://www.suitmedia.com) ******************************************************************************** 1 Reset 2 Font-face 3 Clearfix 4 Base styles 5 Common styles 6 Header 7 Content 7.1 Home 7.2 Event 8 Sidebar 9 Footer 10 Media query 11 Print *******************************************************************************/ /* 1 Reset ------------------------------------------------------------------------------*/ html, body, 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, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } blockquote { quotes: none; content: ""; content: none; font-style: italic; font-size: 105%; font-family: 'rockwell', "Courier New", Courier, Georgia, Times, "Times New Roman", serif; color: #666; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } ins { background-color: #ff9; color: #000; text-decoration: none; } mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* 2 Font-face ------------------------------------------------------------------------------*/ @font-face { font-family: 'rockwell'; src: url('/fonts/rock-webfont.eot'); src: url('/fonts/rock-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/rock-webfont.woff') format('woff'), url('/fonts/rock-webfont.ttf') format('truetype'), url('/fonts/rock-webfont.svg#RockwellRegular') format('svg'); font-weight: normal; font-style: normal; } /* 3 Clearfix ------------------------------------------------------------------------------*/ .clearfix:after, .container:after, .top-menu:after, .top-nav:after, #content:after, .post-meta:after, .pagination:after, .post-preview:after, .secondary header:after, .comments:after, .author-meta:after, .comments li:after, .comments-form p:after, .filter:after, .entry li:after, .entry-post:after, .upcoming header:after, .upcoming .entry-post:after, .past .preview-event:after, footer[role="contentinfo"] nav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* 4 Base styles ------------------------------------------------------------------------------*/ html { background: url(/images/bg-texture.png); } body { color: #555; font: 100%/1.3333 Arial, Helvetica, sans-serif; -webkit-text-size-adjust: none; } h1, h2, h3 { color: #888; font-family: 'rockwell', "Courier New", Courier, Georgia, Times, "Times New Roman", serif; font-size: 1.64em; line-height: 1.2; margin: 1em 0 0.75em; font-weight: normal; } h1 { color: #633; margin: 0; font-size: 2em; } .post p, .post ul, .post ol { margin: 0 0 1em; } a, a:active { color: #993333; outline: none; text-decoration: none; } a:hover { color: #036; } ul, ol { list-style: none; } input, select, textarea { font-family: Arial, Helvetica, sans-serif; font-size: 0.875em; } /* 5 Common styles ------------------------------------------------------------------------------*/ .container { font-size: 0.875em; margin: 0 auto; width: 73.7%; /* 940px */ } .btn { display: block; } .form-btn { border: none; cursor: pointer; display: block; line-height: 0; text-indent: -999em; } object, iframe { max-width: 100%; } /* 6 Header ------------------------------------------------------------------------------*/ header[role="banner"] { background: url(/images/bg-header.png) repeat-x; height: 110px; } .top-menu { height: 24px; padding: 5px 0 0 0; } .top-menu p { float: left; font-size: 0.857em; padding: 3px 0 0 0; } .top-nav { background: url(/images/border-top-nav.png) no-repeat 100% 0; float: right; } .top-nav li { background: url(/images/border-top-nav.png) no-repeat; float: left; padding: 0 0.7em; } .top-nav a { font-size: 0.75em; } .logo { margin-top: 18px; width: 19.25531914893617%; } .logo--website{ float: left; } .logo--companies{ padding: 5px; display: inline-block; } .logo a { display: block; } nav[role="navigation"] { background: url(/images/border-nav.png) no-repeat 100% 0; float: left; margin-top: 2px; } nav[role="navigation"] li { background: url(/images/border-nav.png) no-repeat; float: left; height: 68px; } nav[role="navigation"] a { transition: background-color 0.5s; -webkit-transition: background-color 0.5s; -moz-transition: background-color 0.5s; -o-transition: background-color 0.5s; color: #ccc; display: block; font-size: 0.857em; /* 12/14 */ font-weight: bold; padding: 2.25em 3em 2.167em 2.917em; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); text-transform: uppercase; } nav[role="navigation"] a:hover, nav[role="navigation"] .active a { background: rgba(0, 0, 0, 0.2); color: #fff; } .global-search { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background: url(/images/bg-search.png) repeat-x; border: 1px solid #cc6666; height: 22px; float: right; margin: 21px 0 0 0; padding: 0.214em 0.214em 0.214em 0.714em; position: relative; width: 24.361702127659574%; /* 229/940 */ } .global-search input[type="text"] { background: none; border: none; color: #ccc; float: left; margin: 3px 0.357em 0 0; outline: none; width: 87%; /* 189/229 */ } .global-search .form-btn { background: url(/images/btn-search.png) no-repeat; height: 23px; position: absolute; right: 5px; width: 24px; } /* 7 Content ------------------------------------------------------------------------------*/ /* 7.1 Page: Homepage ------------------------------------------------------------------------------*/ #content { min-height: 400px; padding: 22px 0 30px; } .primary { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.05); -webkit-box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.05); box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.05); background: #fff; border: 1px solid #d7d7d7; float: left; padding: 28px 0; width: 65.10638297872341%; /* 612/940 */ } .secondary { float: right; width: 31.91489361702128%; /* 300/940 */ } .post { border-top: 1px dashed #bfbfbf; line-height: 1.5; margin: 0 4.57516339869281%; padding: 20px 0; /* 28/612 */ } .post:first-child { border-top: none; padding-top: 0; } .post ul { list-style: disc; margin-left: 1.25em; } .post ol { list-style: decimal; margin-left: 1.25em; } .prime { margin-bottom: 2em; } .prime h2 { margin: 0; } .post .post-meta { margin: 0.5em 0 0; } .post .post-meta li { list-style: none; border-left: 1px solid #666; float: left; list-style: none; padding: 0 1.4388489208633094%; /* 8/556 */ } .post-meta li:first-child { border: none; padding-left: 0; } .post-meta a { color: #666; display: block; font-size: 0.8em; line-height: 1; } .primary { font-size: 1.143em; } .image-post { float: left; margin: 20px 4% 1em 0; width: 24.820143884892087%; /* 138/556 */ } .image-post img { border: 1px solid #ccc; display: block; max-width: 100%; } .video-post { height: 0; padding-top: 25px; padding-bottom: 56.25%; /* 16:9 */ position: relative; } .video-post iframe, .video-post object, .video-post embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .post-preview .more { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3pxk; background: #cc6666; clear: both; color: #fff; display: inline-block; margin-top: 10px; padding: 1.2%; } .pagination { border-top: 1px dashed #BFBFBF; margin: 20px 3.2679738562091505% 0; padding-top: 20px; } .pagination .prev, .pagination .next { float: left; width: 20%; } .pagination .next a { float: right; } .pagination .paging { float: left; width: 60%; } .pagination li { float: left; margin: 0 0.9345794392523364%; } .pagination a { background: #fff; border: 1px solid #ccc; display: inline-block; font-size: 1em; padding: 0.417em; } .pagination .prev a, .pagination .next a { background: none; border: none; } /* 7.2 Page: Content detail ------------------------------------------------------------------------------*/ .related-post { padding: 20px 4.57516339869281%; border: 1px dashed #ddd; border-right: none; border-left: none; } .related-post h2, .comments h2 { margin-top: 0; padding: 0; } .related-post li { background: url(/images/ico-arrow.png) no-repeat 0 5px; padding: 0 0 8px 16px; } .comments { margin: 0 4.57516339869281%; padding: 20px 0; } .comments ol { padding-top: 10px; } .comments ol > li { padding-top: 20px; } .comments ol > li:first-child { padding-top: 0; } .comments .image { float: left; margin-right: 3.590664272890485%; width: 14.36265709156194%; /* 80/557 */ } .comments .image img { max-width: 100%; } .comments .comment-details { float: left; width: 80.78994614003591%; /* 450/557 */ } .author-meta { padding-bottom: 10px; } .author-meta h3 { float: left; font-size: 1.2857142857142858em; margin-right: 20px; } .author-meta span { display: block; float: left; font-size: 0.7857142857142857em; padding-top: 6px; } .comment-box { background: #f3f3f3; border: 1px solid #dcdcdc; padding: 0 3.333333333333333%; } .comment-box p { line-height: 1.5; } .comments-form { border-top: 1px dashed #BFBFBF; margin: 0 4.57516339869281%; padding: 20px 0; } .comments-form h2 { color: #666; } .comments-form p { padding-bottom: 0; } .comments-form label { display: block; float: left; padding-top: 5px; width: 150px; } .comments-form label abbr { color: red; } .comments-form input[type="text"] { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background: none; border: 1px solid #ccc; font-size: 1em; float: left; height: 27px; outline: none; padding: 0.5em; width: 60%; } .comments-form textarea { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #ccc; padding: 0.5em; resize: none; width: 60%; } .comments-form .button { padding-left: 150px; } .comments-form .button input { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background-image: linear-gradient(bottom, rgb(204,101,101) 100%, rgb(204,51,51) 52%); background-image: -o-linear-gradient(bottom, rgb(204,101,101) 100%, rgb(204,51,51) 52%); background-image: -moz-linear-gradient(bottom, rgb(204,101,101) 100%, rgb(204,51,51) 52%); background-image: -webkit-linear-gradient(bottom, rgb(204,101,101) 100%, rgb(204,51,51) 52%); background-image: -ms-linear-gradient(bottom, rgb(204,101,101) 100%, rgb(204,51,51) 52%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(1, rgb(204,101,101)), color-stop(0.52, rgb(204,51,51)) ); background-color: rgb(204,101,101); border: 1px solid #cc3333; color: #fff; cursor: pointer; font-size: 14px; overflow: visible; padding: 1em 2em; text-transform: uppercase; width: auto; } /* disqus */ div#comment, .dsq-mobile .dsq-comment-text { font-size: 1.143em !Important; } .primary #dsq-content h3 { margin: 0 0 1em!important; } .dsq-brlink { display: none; } /* 7.3 Page: Events ------------------------------------------------------------------------------*/ .filter { border-bottom: 1px solid #ccc; margin-bottom: 10px; } .filter p { float: left; padding-right: 1.7985611510791366%; } .entry { padding-bottom: 20px; } .upcoming li { padding-top: 20px; } .upcoming li:after { padding-top: 0; } .upcoming header .date { background: url(/images/bg-date.png) no-repeat; color: #fff; display: block; float: left; font-size: 11px; height: 51px; margin: 0 1.6953321364452424% 0 0; /* 10/557 */ padding: 4px 0 0 0; text-align: center; width: 6.383662477558348%; /* 35/557 */ } .upcoming header .date span { color: #993333; } .upcoming header h2 { float: left; padding-top: 0; width: 91.92100538599641%; /* 512/557 */ } .upcoming .entry-post .image { float: left; margin: 20px 4% 1em 0; } .upcoming img { border: 1px solid #d0d0d0; display: block; max-width: 100%; } .past h2 { color: #555; } .past li { padding-top: 20px; } .past li:first-child { padding-top: 0; } .past .date { background: url(/images/bg-date-past.png) no-repeat; color: #fff; display: block; float: left; font-size: 11px; height: 51px; margin: 0 1.6953321364452424% 0 0; padding: 4px 0 0 0; text-align: center; width: 6.383662477558348%; } .past .date span { color: #666; } .past .details { float: left; width: 91.92100538599641%; } .past .details p { padding: 0; } /* 8 Sidebar ------------------------------------------------------------------------------*/ .secondary header { border-bottom: 1px solid #ccc; margin-bottom: 10px; padding-bottom: 5px; } .secondary header h2 { background: url(/images/ico-sidebar-title.png) no-repeat; float: left; color: #663333; font-size: 1.2857em; padding: 0 0 0 8%; margin: 0; } .secondary header a { background: url(/images/ico-sidebar-more.png) no-repeat 100% 3px; float: right; display: block; font-size: 0.875em; margin-top: 6px; padding-right: 4.3333333333333335%; } .secondary > div { padding-bottom: 30px; } .secondary .video-post { padding-bottom: 56.25%; } .secondary img { max-width: 100%; } .secondary .jobs li { border-top: 1px dotted #333; padding: 10px 0; } .secondary .jobs li:first-child { border-top: none; padding-top: 0; } .secondary .jobs hgroup { padding-bottom: 5px; } .secondary .jobs h3 { color: #333; font-size: 1em; margin: 0; font-family: Arial, Helvetica, sans-serif; font-weight: bold; } .secondary .jobs h4 { font-size: 0.7857em; font-weight: normal; } .secondary .jobs p { color: #333; font-size: 0.857em; padding: 0; } /* 9 Footer ------------------------------------------------------------------------------*/ footer[role="contentinfo"] { background: url(/images/bg-footer.png) repeat-x; font-size: 0.857em; height: 70px; overflow: hidden; padding: 20px 0; } footer[role="contentinfo"] nav { float: left; } footer[role="contentinfo"] nav li { border-left: 1px solid #666; float: left; padding: 0 5px; } footer[role="contentinfo"] nav li:first-child { border: none; padding-left: 0; } footer[role="contentinfo"] nav a { color: #666; display: block; line-height: 1; text-transform: uppercase; } footer[role="contentinfo"] .copy { float: right; } footer[role="contentinfo"] .copy a { display: block; margin-bottom: 3px; } footer[role="contentinfo"] .copy p { color: #333; padding: 3px 0; } footer[role="contentinfo"] .copy small { font-size: 0.875em; } /* 10 Media query ------------------------------------------------------------------------------*/ @media screen and (min-width: 1025px) and (max-width: 1250px) { nav[role="navigation"] { float: right; } .global-search { clear: both; float: left; margin: 20px 0; width: 60%; } .global-search .form-btn { float: right; } .filter { border-bottom: none; } .upcoming header .date { background: none; border-bottom: 1px solid #ccc; color: #999; float: none; font-size: 0.875em; height: auto; margin-bottom: 1.2em; text-align: left; width: auto; } .upcoming header .date span { color: #999; } .past .date { background: none; border-bottom: 1px solid #ccc; color: #999; float: none; font-size: 0.875em; height: auto; margin-bottom: 1.2em; text-align: left; width: auto; } .past .date span { color: #999; } } @media screen and (max-width: 1024px) { .container { margin: 20px; width: auto; } header[role="banner"] .container { margin-top: 0; } nav[role="navigation"] { float: right; } .global-search { clear: both; float: left; width: 60%; } .global-search .form-btn { float: right; } #content { clear: both; } #content .container { margin-top: 0; } .primary { float: none; margin-top: 0; width: 100%; } .image-post { width: auto; } .filter { border-bottom: none; } .upcoming header .date { background: none; border-bottom: 1px solid #ccc; color: #999; float: none; font-size: 0.875em; height: auto; margin-bottom: 1.2em; text-align: left; width: auto; } .upcoming header .date span { color: #999; } .past .date { background: none; border-bottom: 1px solid #ccc; color: #999; float: none; font-size: 0.875em; height: auto; margin-bottom: 1.2em; text-align: left; width: auto; } .past .date span { color: #999; } .secondary { display: none; } footer[role="contentinfo"] .container { margin: 0 20px; } footer[role="contentinfo"] nav { float: none; margin: 0 auto 10px; text-align: center; width: 80%; } footer[role="contentinfo"] nav li { border: none; display: inline; float: none; } footer[role="contentinfo"] nav a { display: inline; line-height: 1.5; } footer[role="contentinfo"] .copy { float: none; margin: 0 auto; text-align: center; } footer[role="contentinfo"] .copy a { display: none; } footer[role="contentinfo"] .copy a img { max-width: 100%; } footer[role="contentinfo"] .copy p { display: none; } } @media screen and (max-width: 768px) { nav[role="navigation"] { background: none; clear: both; float: none; padding-top: 40px; } nav[role="navigation"] li { background: none; float: none; height: auto; } nav[role="navigation"] a { border-bottom: 1px solid #ccc; color: #555; display: block; padding: 10px 3em 10px 2.917em; text-shadow: none; } } @media screen and (max-width: 530px) { .top-menu p { display: none; } .top-nav { float: left; } .filter .prev, .filter .next { display: none; } .post { margin: 0; } .post-meta a { font-size: 0.786em; } .primary { background: none; border: none; box-shadow: none; margin: 0; width: 100%; } .preview-post { float: none; width: auto; } .preview-post p { line-height: 1.5; } .related-post { padding: 20px 0; } .comments { margin: 0; } .pagination { padding: 20px 0; position: relative; width: 100%; } .pagination a { font-size: 1em; } .pagination .prev, .pagination .next { float: none; position: absolute; top: 3.8em; width: 22%; } .pagination .prev { left: 0; } .pagination .next { right: 0; } .pagination .paging { width: 100%; } .comment-box { background: #fff; } .comments-form input[type="text"] { float: none; width: 96%; } .comments-form textarea { width: 97%; } .comments-form .button { padding: 0; } } /* 11 Print ------------------------------------------------------------------------------*/ @media print { body { font: normal normal 12pt/1.5em "Times New Roman", Times, serif; } a[href]:after { content: " (" attr(href) ") "; font-size: 90%; } a[href^="/"]:after { content: " (http://domain.com" attr(href) ") "; } .hide { display: none !important; } } .postdate { color: #999; } sup { vertical-align: super; font-size: smaller; }