/** * This is the original SASS build code for the CSS used in the theme. */ $max_header_width: 1180px; $max_page_width: 1080px; $border: 1px solid #ddd; $small-text: 0.8em; $red_colour: #d90000; $grey_colour: #ddd; $font_standard_size: 1.0em; $font_reduced_size: 0.9em; $font_small_size: 0.8em; $font_sans_serif: "Droid Sans", sans-serif; $font_serif: "Droid Serif", serif; @mixin rounded_corners($radius: 6px) { border-radius: $radius; -moz-border-radius: $radius; -webkit-border-radius: $radius; } /* =Fonts -------------------------------------------------------------- */ @font-face { font-family: 'Droid Sans'; src: url(fonts/droidsans-webfont.eot); src: url(fonts/droidsans-webfont.eot?#iefix) format('embedded-opentype'), url(fonts/droidsans-webfont.woff) format('woff'), url(fonts/droidsans-webfont.ttf) format('truetype'), url(fonts/droidsans-webfont.svg#droid_sansregular) format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Droid Serif'; src: url(fonts/droidserif-webfont.eot); src: url(fonts/droidserif-webfont.eot?#iefix) format('embedded-opentype'), url(fonts/droidserif-webfont.woff) format('woff'), url(fonts/droidserif-webfont.ttf) format('truetype'), url(fonts/droidserif-webfont.svg#droid_serifregular) format('svg'); font-weight: normal; font-style: normal; } /* =Reset -------------------------------------------------------------- */ body,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,img,dl,dt,dd,ol,ul,li,fieldset,form,legend,table,tbody,tfoot,thead,tr,th,td { margin: 0; padding: 0; border: 0; outline: 0; list-style: none; } body { background: #fff; /* Ensures the background of the WordPress customizer is correct */ } b,strong { font-weight: bold; } /* =Force HTML5 elements block -------------------------------------------------------------- */ header, nav, article, footer, address { display: block; } /* =Hidden sections -------------------------------------------------------------- */ .assistive-text, .assistive-text { display: none; } /* =Links -------------------------------------------------------------- */ a { text-decoration: none; color: $red_colour; } a:hover { text-decoration: underline; } /* =Header -------------------------------------------------------------- */ #site-header { display: block; margin: 0 auto; max-width: $max_header_width; border-bottom: $border; overflow: auto; .hgroup { overflow: hidden; margin: 2em auto 1em auto; max-width: $max_page_width; } h1 { float: left; font-family: $font_sans_serif; font-size: 2.8em; line-height: 1.5em; font-weight: bold; letter-spacing: -0.05em; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); margin: 0 0 0 2%; a { color: #000; &:hover { text-decoration: none; } span { color: $red_colour; } small { font-size: 65%; } } } h2 { font-family: $font_sans_serif; font-size: $font_standard_size; font-style: italic; line-height: 1.2em; float: right; font-weight: normal; margin: 1.5em 2% 0 2%; color: #999; } } /* =Contents -------------------------------------------------------------- */ body.page-template-full-width-php #site-content { width: 94%; padding: 0 3%; } #content-area { font-size: $font_standard_size; font-family: $font_sans_serif; line-height: 1.8em; color: #333; } h1, h2, h3, h4, h5, h6 { font-family: $font_serif; color: #333; font-weight: normal; line-height: 1em; a { color: #333; } } h1.widget-title { font-size: 1.4em; font-weight: bold; } h1 { font-size: 2.4em; margin: 1em 0 0.3em; } h2 { font-size: 1.7em; margin: 1em 0 0.3em; } h3 { font-size: 1.4em; margin: 1em 0 0.3em; } h4 { font-size: 1.3em; margin: 0.7em 0 0.2em; } h5 { font-size: 1.2em; margin: 0.7em 0 0.2em; } h6 { font-size: 1.1em; margin: 0.5em 0 0.15em; } p, li, dd, dt, .page-links, caption, th, td { font-size: $font_standard_size; font-family: $font_sans_serif; color: #333; } .page-links, p, li { margin: 1.5em 0; } .page-links { clear: both; } p { line-height: 1.8em; word-wrap: break-word; } ul, ol { margin: 1em 0 1em 1.2em; } ul li { list-style: square; line-height: 2em; margin: 0; padding: 0; } ol li { list-style-type: decimal; line-height: 2em; margin: 0; padding: 0; } dt { font-weight: bold; } blockquote { position: relative; margin: 1.5em 0 1.5em 2.5em; padding: 0 1em 0 1em; p:before, p:after { font-family: serif; position: absolute; font-size: 3em; } p:before { left: -0.3em; top: 0.05em; content:"\201C"; } p:after { margin-top: 0.1em; margin-left: 0.05em; content:"\201D"; } } blockquote, blockquote p { color: #999; font-style: italic; } code, pre { max-width: 100%; overflow: auto; font-family: monospace; font-size: $font_reduced_size; } input[type=text] { border: $border; @include rounded_corners(); padding: 3% 4%; } .search-form { input[type=submit], label { display: none; } input[type=text] { width: 90%; max-width: 400px; font-size: $font_reduced_size; } } iframe { max-width: 100%; padding: 0; margin: 0; } img { max-width: 100%; height: auto; padding: 0; margin: 0; } body .wp-caption { max-width: 94%; margin: 1em auto; padding: 2% 2% 0 2%; border: $border; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .wp-caption p { margin: 0.4em 0; padding: 0 0.8em; font-size: 0.8em; line-height: 1.5em; color: #666; } .wp-caption img { display: block; margin: 0 auto; margin: 0.4em auto 0; } /* =Post contents -------------------------------------------------------------- */ .page #content-area article, .single #content-area article { border-bottom: none; } article { margin: 0 0 2em 0; padding: 0 0 2em 0; border-bottom: $border; } article.last-post { border-bottom: none; } .entry-content { width: 100%; overflow: auto; } .thumbnail, .attachment-excerpt-thumb { float: right; max-width: 38%; margin: 0 0 1em 2em; } .entry-meta { color: #888; font-family: $font_sans_serif; font-size: 0.8em; } .alignleft { float: left; margin: 0 1em 1em 0; } .aligncenter { margin: 0 auto; display: block; } .alignright { float: right; margin: 0 0 1em 1em; } table { border-bottom: 1px solid #ededed; border-collapse: collapse; border-spacing: 0; font-size: 0.8em; line-height: 1.7em; margin: 0 0 2em 0; width: 100%; } caption, th, td { font-weight: normal; text-align: left; } caption { font-size: 1em; margin: 1.5em 0; } th { font-weight: bold; text-transform: uppercase; } td { border-top: 1px solid #ededed; padding: 1em 1em 1em 0; } /* =Sidebar -------------------------------------------------------------- */ #content-area { margin: 0 auto; max-width: $max_page_width; } #site-content { width: 63%; padding: 0 0 0 3%; float: left; overflow: hidden; } #sidebar { padding: 3%; width: 24%; float: right; border-left: $border; ul li { line-height: 1.5em; } td { padding: 0.2em; } } /* =Numeric pagination -------------------------------------------------------------- */ #numeric-pagination { margin: 4em 0 0 0; padding: 0 0 4em 0; li { float: left; list-style: none; margin: 0 0.3em; padding: 0; height: 1.6em; line-height: 1.6em; text-align: center; border: $border; } a { float: left; height: 1.3em; margin: 0; padding: 0.1em 0.5em 0.2em 0.5em; } li.active a, li a:hover { background: $red_colour; text-decoration: none; color: #fff; } } /* =Comments -------------------------------------------------------------- */ #comments { margin: 3em 0 0 0; overflow: auto; h3 { margin: 0 0 20px; } } ol.commentlist { margin: 0; padding: 0; list-style: none; li.trackback, li.pingback, li.comment { list-style: none; background: #fafafa; border: $border; margin: 0 0 1.5em 0; padding: 0; @include rounded_corners(); font-size: $font_reduced_size; color: #999; } li.trackback ul, li.pingback ul, li.comment ul { margin: 0 1.5em 1.5em 1.5em; padding: 0; } li.trackback .comment-body, li.pingback .comment-body, li.comment .comment-body { padding: 1.5em; } li.comment li.comment { font-size: $font_standard_size; background: #f6f6f6; margin: 1.5em 0 0 0; } li.comment li.comment li.comment { background: #f3f3f3; } cite { font-style: normal; } img.avatar { float: right; border: $border; margin: 0 0 1.5em 1.5em; } .comment-reply-link { background: #eee; @include rounded_corners(); border: $border; font-size: $font_small_size; padding: 0.4em 0.8em; color: #333; } .comment-reply-link:hover { background: $red_colour; color: #fff; text-decoration: none; } } .comment-author, .comment-meta { line-height: 1.5em; } .comment-meta { font-size: $font_small_size; } /* =Response -------------------------------------------------------------- */ .gform_wrapper, .contact-form, #respond { margin: 3em 0 2em 0; overflow: auto; } .comment #respond { margin: 3em 1.5em 2em 1.5em; } .gform_wrapper ul { margin: 1em 0; } .gform_wrapper li { list-style: none; } .gform_validation_container { display: none; } label { display: block; line-height: 1.5em; margin: 1.5em 0 0 0; } input[type=email], input[type=text], input[type=submit] { display: block; margin: 0 0 0.8em; padding: 0.5em 0.8em; @include rounded_corners(); background: #fafafa; border: $border; color: #666; } input[type=email], input[type=text] { width: 300px; } textarea { max-width: 700px; width: 95%; height: 200px; } input[type=email], input[type=text], textarea { font-size: $font_reduced_size; font-family: $font_sans_serif; } input[type=submit] { font-size: 1.2em; background: #eee; color: #333; border: $border; @include rounded_corners(); margin: 1.5em 0 0 0; padding: 0.4em 1em; } input[type=submit]:hover { background: $red_colour; color: #fff; cursor: pointer; } .comment-notes, .form-allowed-tags { font-size: $font_standard_size; color: #999; } /* =Third party plugins -------------------------------------------------------------- */ /* MetroShare plugin */ .metro-tabs a { height: 16px; } /* Subscribe to comments */ #respond .subscribe-to-comments label { display: inline; } /* =Footer -------------------------------------------------------------- */ #site-footer { clear: both; margin: 0 auto; max-width: $max_header_width; text-align: center; font-family: $font_sans_serif; font-size: $font_standard_size; } #site-info { border-top: $border; padding: 1.6em 0; } /* =Responsive -------------------------------------------------------------- */ @media ( min-width: 900px ) { body { font-size: 120%; } } @media ( max-width: 650px ) { #site-content { width: 94%; padding: 0 3%; float: left; } #sidebar { padding: 3%; width: 94%; border-left: none; } } @media ( max-width: 350px ) { article { .attachment-excerpt-thumb { float: none; display: block; margin: 0 auto; max-width: 100%; } } } /* =Right to left language support -------------------------------------------------------------- */ .rtl { #site-header h1 { float: right; margin: 0 2% 0 0; } #site-header h2 { float: left; margin: 1.5em 0 0 2%; } #site-content { padding: 0 3% 0 0; float: right; } #sidebar { float: left; border-right: $border; border-left: none; } #numeric-pagination li { float: right; } } /* =Print styles -------------------------------------------------------------- */ @media print { #respond, .sep, #numeric-pagination, .comments-link, #sidebar { display: none; } }