/*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 - Reset 2.0 - Typography 3.0 - Elements 4.0 - Forms 5.0 - Navigation 5.1 - Links 5.2 - Menus 6.0 - Accessibility 7.0 - Alignments 8.0 - Clearings 9.0 - Widgets 10.0 - Content 10.1 - Posts and pages 10.2 - Asides 10.3 - Comments 11.0 - Infinite scroll 12.0 - Media --------------------------------------------------------------*/ /*-------------------------------------------------------------- 1.0 - Reset --------------------------------------------------------------*/ 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, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } html { font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */ overflow-y: scroll; /* Keeps page centered in all browsers regardless of content height */ -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */ -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ } *, *:before, *:after { /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ -webkit-box-sizing: border-box; /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */ -moz-box-sizing: border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */ box-sizing: border-box; } body { background: #fff; } article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block; } ol, ul { list-style: none; } table { /* tables still need 'cellspacing="0"' in the markup */ border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } a img { border: 0; } /*-------------------------------------------------------------- 2.0 Typography --------------------------------------------------------------*/ body, button, input, select, textarea { color: #404040; font-family: sans-serif; font-size: 16px; font-size: 1.6rem; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { clear: both; } p { margin-bottom: 1.5em; } b, strong { font-weight: bold; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; } address { margin: 0 0 1.5em; } pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 1.5rem; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } sup, sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } small { font-size: 75%; } big { font-size: 125%; } /*-------------------------------------------------------------- 3.0 Elements --------------------------------------------------------------*/ hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul, ol { margin: 0 0 1.5em 3em; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: bold; } dd { margin: 0 1.5em 1.5em; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } figure { margin: 0; } table { margin: 0 0 1.5em; width: 100%; } th { font-weight: bold; } /*-------------------------------------------------------------- 4.0 Forms --------------------------------------------------------------*/ button, input, select, textarea { font-size: 100%; /* Corrects font size not being inherited in all browsers */ margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */ vertical-align: baseline; /* Improves appearance and consistency in all browsers */ *vertical-align: middle; /* Improves appearance and consistency in IE6/IE7 */ } button, input[type="button"], input[type="reset"], input[type="submit"] { border: 1px solid #ccc; border-color: #ccc #ccc #bbb #ccc; border-radius: 3px; background: #e6e6e6; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, .8); cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */ -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */ font-size: 12px; font-size: 1.2rem; line-height: 1; padding: .6em 1em .4em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); } button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { border-color: #ccc #bbb #aaa #bbb; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02); } button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { border-color: #aaa #bbb #bbb #bbb; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15); } input[type="checkbox"], input[type="radio"] { padding: 0; /* Addresses excess padding in IE8/9 */ } input[type="search"] { -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */ -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */ -moz-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ border: 0; padding: 0; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { color: #111; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"] { padding: 3px; } textarea { overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ padding-left: 3px; vertical-align: top; /* Improves readability and alignment in all browsers */ width: 98%; } /*-------------------------------------------------------------- 5.0 Navigation --------------------------------------------------------------*/ /*-------------------------------------------------------------- 5.1 Links --------------------------------------------------------------*/ a { color: royalblue; } a:visited { color: purple; } a:hover, a:focus, a:active { color: midnightblue; } /*-------------------------------------------------------------- 5.2 Menus --------------------------------------------------------------*/ .main-navigation { clear: both; display: block; float: left; width: 100%; } .main-navigation ul { list-style: none; margin: 0; padding-left: 0; } .main-navigation li { float: left; position: relative; } .main-navigation .current_page_item { background-color: #d1fc3e; } .main-navigation a { display: block; text-decoration: none; } .main-navigation ul ul { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); display: none; float: left; left: 0; position: absolute; top: 1.5em; z-index: 99999; } .main-navigation ul ul ul { left: 100%; top: 0; } .main-navigation ul ul a { width: 200px; } .main-navigation ul ul li { } .main-navigation li:hover > a { } .main-navigation ul ul :hover > a { } .main-navigation ul ul a:hover { } .main-navigation ul li:hover > ul { display: block; } .main-navigation .current_page_item a, .main-navigation .current-menu-item a { } /* Small menu */ .menu-toggle { cursor: pointer; display: none; } @media screen and (max-width: 600px) { .menu-toggle, .main-navigation.toggled .nav-menu { display: block; } .main-navigation ul { display: none; } } .site-main .comment-navigation, .site-main .paging-navigation, .site-main .post-navigation { margin: 0 0 1.5em; overflow: hidden; } .comment-navigation .nav-previous, .paging-navigation .nav-previous, .post-navigation .nav-previous { float: left; width: 50%; } .comment-navigation .nav-next, .paging-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; width: 50%; } /*-------------------------------------------------------------- 6.0 Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; } .screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar */ } /*-------------------------------------------------------------- 7.0 Alignments --------------------------------------------------------------*/ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin: 0 auto; } /*-------------------------------------------------------------- 8.0 Clearings --------------------------------------------------------------*/ .clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ''; display: table; } .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; } .clear { clear:both; } /*-------------------------------------------------------------- 9.0 Widgets --------------------------------------------------------------*/ .widget { margin: 0 0 1.5em; } /* Make sure select elements fit in widgets */ .widget select { max-width: 100%; } /* Search widget */ .widget_search .search-submit { display: none; } /*-------------------------------------------------------------- 10.0 Content --------------------------------------------------------------*/ /*-------------------------------------------------------------- 10.1 Posts and pages --------------------------------------------------------------*/ .sticky { } .hentry { margin: 0 0 1.5em; } .byline, .updated { display: none; } .single .byline, .group-blog .byline { display: inline; } .page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; padding-right: 10px; font-family: 'Verdana, Geneva, sans-serif'; font-size: 18px; font-weight: 300; line-height: 1.625; } .page-links { clear: both; margin: 0 0 1.5em; } /*-------------------------------------------------------------- 10.2 Asides --------------------------------------------------------------*/ .blog .format-aside .entry-title, .archive .format-aside .entry-title { display: none; } /*-------------------------------------------------------------- 10.3 Comments --------------------------------------------------------------*/ .comment-content a { word-wrap: break-word; } .bypostauthor { } /*-------------------------------------------------------------- 11.0 Infinite scroll --------------------------------------------------------------*/ /* Globally hidden elements when Infinite Scroll is supported and in use. */ .infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */ .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ display: none; } /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */ .infinity-end.neverending .site-footer { display: block; } /*-------------------------------------------------------------- 12.0 Media --------------------------------------------------------------*/ .page-content img.wp-smiley, .entry-content img.wp-smiley, .comment-content img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } .wp-caption { max-width: 100%; margin-bottom: 1.5em; background: #eee; border: 1px solid #ccc; } .wp-caption img[class*="wp-image-"] { display: block; margin: 1.2% auto 0; max-width: 98%; } .wp-caption-text { text-align: center; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } .site-main .gallery { margin-bottom: 1.5em; } .gallery-caption { } .site-main .gallery a img { border: none; height: auto; max-width: 90%; } .site-main .gallery dd, .site-main .gallery figcaption { margin: 0; } .site-main .gallery-columns-4 .gallery-item { } .site-main .gallery-columns-4 .gallery-item img { } /* Make sure embeds and iframes fit their containers */ embed, iframe, object { max-width: 100%; } /* Theme Styles */ /* Page Elements */ body { padding: 0 0 0 0; color: #000000; font: normal normal 12px Verdana, Geneva, sans-serif; background: #ffffff none repeat scroll top left; } h1 { font-size: 38px; } h2 { font-size: 32px; } h3 { font-size: 24px; } h4 { font-size: 18px; } h5 { font-size: 14px; } h6 { font-size: 12px; } a { color: #68cef0; text-decoration: none; } a:hover { color: #33aaff; } a:visited { color: #68cef0; text-decoration: none; } blockquote { margin: 0 0 15px; padding: 10px 15px; border-left: 3px solid #eee; } abbr[title], abbr[data-original-title] { cursor: help; border-bottom: 1px dotted #eee; } .site-title { margin-bottom: 0; color: #68cef0; font-size: 40px; line-height: 1.846153846; font-family: 'Comfortaa', cursive; font-weight: bold; } .site-description { margin-bottom: 5px; font-size: 20px; } h1.page-title, h1.entry-title { margin: .75em 0 0; color: #68cef0; font-family: 'Comfortaa', cursive; font-size: 24px; font-weight: bold; } #wrapper { width: 1350px; margin: 0 auto; padding: 10px 40px; background: #fff; ms-word-wrap: break-word; word-wrap: break-word; } .apoc-featured-image { padding: 10px; } /* Header */ #masthead { } /* Main Menu */ #site-navigation { background: #68cef0 none repeat-x scroll 0 -800px; background: #68cef0 none repeat-x scroll 0 -800px; border-bottom: 1px solid #ffffff; } #site-navigation li { padding: .6em 1em; border-left: 1px solid #fff; border-right: 1px solid #fff; } #site-navigation li:first { border-left: none; } #site-navigation li:hover { background-color: #d1fc3e; } #site-navigation a { color: #000; font-family: 'Comfortaa', cursive; font-size: 15px; font-weight: bold; } #site-navigation .current-menu-item { color: #000; background-color: #d1fc3e; } .main-navigation ul ul { top: 35px; background: #37B4de; } .main-navigation ul ul ul { top: 0; } /* Content */ .site-content { } /* Primary */ #primary { float: left; width: 940px; margin-top: 30px; border-right: 2px solid #68cef0; } #primary-full-width { float: left; width: 98%; margin-top: 30px; } /* Sidebar */ #secondary { float: right; width: 330px; margin: 30px 0; padding: 0 15px; } h1.widget-title { margin: 0 0 1em 0; color: #000; font-family: 'Comfortaa', cursive; font-size: 15px; font-weight: bold; } #secondary a { color: #68cef0; } #secondary li { margin: 0; padding: .25em 0; text-indent: 0; } /* Social Widget */. #secondary #social-icons { margin-left: -10px; } #social-icons a { margin: 0 3px; } #social-icons > a i:hover { color: #d1fc3e; } /* Footer */ #footer { margin-top: 30px; border-top: 1px dashed #bbbbbb; } #footer .site-info { margin: 50px 0; text-align: center; } /* Blog Elements */ .entry-meta { padding: 0.4em; background-color: transparent; color: #000000; letter-spacing: 3px; } .entry-footer { width: 95%; padding-bottom: 15px; border-bottom: 1px solid #68cef0; } /* WordPress Core */ a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { max-width: 96%; padding: 5px 3px 10px; text-align: center; background: #fff; border: 1px solid #f0f0f0; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { width: auto; max-width: 98.5%; height: auto; margin: 0; padding: 0; border: 0 none; } .wp-caption p.wp-caption-text { margin: 0; padding: 0 4px 5px; font-size: 11px; line-height: 17px; } img.wp-smiley { vertical-align: middle; } /* Gallery */ .gallery { float: left; width: 100%; min-width: 100%; margin: 0 auto 18px; text-align: center; } .gallery .gallery-item { float: left; width: 200px; margin-top: 0; text-align: center; } .gallery img { border: 1px solid #ddd; } .gallery .gallery-caption { margin: 0 0 12px; font-size: 12px; } .gallery dl { margin: 0; } .attachment-gallery img { display: block; width: auto; max-width: 96%; height: auto; margin: 15px auto; padding:5px; background: #fff; border: 1px solid #f0f0f0; } .gallery-meta {} .gallery-meta a { display: inline; margin: 0; padding: 0; } .gallery-meta .full-size, .gallery-meta .aperture, .gallery-meta .focal-length, .gallery-meta .iso, .gallery-meta .shutter, .gallery-meta .camera { display: block; font-size: 12px; line-height: 18px; padding: 3px 12px; } .gallery .gallery-item { float: left; margin: 0px auto; text-align: center; } .gallery img { border: 1px solid #cfcfcf; } /* Gallery Columns Style */ .gallery-columns-1 .gallery-item { width: 638px; } .gallery-columns-2 .gallery-item { width: 400px; } .gallery-columns-3 .gallery-item { width: 300px; } .gallery-columns-4 .gallery-item { width: 220px; } .gallery-columns-5 .gallery-item { width: 180px; } .gallery-columns-6 .gallery-item { width: 150px; } .gallery-columns-7 .gallery-item { width: 130px; } .gallery-columns-8 .gallery-item { width: 110px; } .gallery-columns-9 .gallery-item { width: 100px; } /* ===== Responsive Media Queries ===== */ #responsive-menu { display: none; } @media screen and (max-width: 1024px) { body { width: 100%; } #wrapper { width: 100%; padding: 0; } #primary { float: left; width: 100%; padding: 0px 30px; border: none; } #secondary { float: left; width: 500px; margin: 30px 0; padding: 0 15px; } } @media screen and (max-width: 800px) { } /* End of max-width: 800px */ @media screen and (max-width: 768px) { } /* end of max-width: 768px */ @media screen and (max-width: 600px) { .site-branding { text-align: center; } #site-navigation { display: none; } #responsive-menu { display: block; margin: 0 auto; } } /* end of max-width: 600px */ @media screen and (max-width: 480px) { .site-branding { text-align: center; } #secondary { max-width: 99%; } } /* end of max-width: 480px */ @media screen and (max-width: 320px) { .site-branding { text-align: center; } } /* end of max-width: 320px */ @media screen and (max-width: 240px) { .site-branding { text-align: center; } } /* end of max-width: 240px */