/* File: custom.css Description: Custom styles for the Neoclassical Theme that you define Use: The tag has been appended with the "custom" class, like so: . You can use the "custom" class to overwrite *any* CSS declarations contained in this theme's style.css file. For example, if you wish to change the default link color to green, you would add the following declarations to this file: .custom a, .custom a:visited { color: #090; } <--- This makes links green .custom a:hover { color: #00f; } <--- This makes links blue when you mouse over them Why this works: By using the "custom" class, you are creating more specific CSS declarations for HTML elements. CSS styling is applied through rules of specificity, and because declarations prepended with .custom are more specific, they get applied when the page is rendered! */ /*subheader navigation at top of content_box*/ #subheader { border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; padding: 10px; padding-left: 30px; text-transform: uppercase; list-style-type: none; clear: auto; font-size: 1.5em; min-height: 1em; } #subheader li { display: inline; float: left; margin-right: 20px; } #sns_list { list-style-type: none; clear: auto; margin-bottom: 10px; height: 40px; display: block; } #sns_list li { display: inline; float: left; margin-right: 10px; } /*change content column to 600px*/ .custom #container { width: 1040px; } .custom #masthead { width: 1020px; } .custom #rotating_image { width: 1040px; margin-bottom: 3px; } .custom #content_box { width: 1020px; /* background: url('images/content_bg_600.gif') 50% 0 repeat-y; */ /* background: url('images/content_bg_680.gif') top left repeat-y; */ background: url('images/content_bg_720.gif') top left repeat-y; padding-top: 15px; } .custom #left_box { /* width: 820px; */ /* width: 680px; */ width: 700px; } .custom #content { /*width: 618px;*/ /* width: 680px; */ width: 700px; padding: 0; } .custom #content h1 { width: 660px; margin: 0 auto; font-size: 23px; line-height: 28px; } .custom #content h2 a { font-size: 23px; line-height: 28px; } .custom #content_inner { /* background-color: red; */ /* width: 600px; */ width: 660px; width: 680px; /*try this*/ padding-left: 10px; padding-right: 10px; } .custom .navigation { /* width: 560px; */ margin: 0 auto; width: auto; width: 680px; padding: 10px 20px 10px 20px; position: relative; left: -10px; } .custom #comments { width: 599px; padding: 0 10px; } .custom dl#comment_list dd.comment { width: 580px; } .custom dl#comment_list dt.comment { width: 580px; } .custom #right_bar { width: 300px; padding-left: 20px; } /*related posts */ .custom div.related-posts a { padding: 5px !important; margin-right: 10px !important; border: none !important; } /*stretch sidebar ul li to fill sidebar*/ .custom ul.sidebar_list li.widget, .custom ul.sidebar_list li.linkcat { width: 100%; } /*stretch out newsletter input*/ .custom #mc_embed_signup form { padding: 10px 0 10px 0; } .custom #mc_embed_signup input.email { margin: 0 0 10px 0; width: 284px; /*300px parent - 16px (2x 8px padding)*/ padding: 8px; } /*stylise search input box to match*/ .custom #search_form input#s { margin: 0 0 10px 0; width: 284px; /*300px parent - 16px (2x 8px padding)*/ padding: 8px; } /*popular posts*/ .custom #popular-posts ul { list-style-type: none !important; background-image: none !important; padding-left: 5px !important; display: block; } .custom #popular-posts ul li { background-image: none; float: left; margin-right: 27px; margin-left: 0; padding: 0; width: 150px; } .custom #popular-posts ul li img { width: 150px; height: 150px; overflow: hidden; border: 1px solid #dddddd; } .custom .wpp-post-title { display: none; } /*centre align existing images in post*/ .custom #content_inner .alignnone { display: block; text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /*SNS icons in masthead*/ .custom #masthead ul { display: block; height: 40px; list-style-type: none; } .custom #masthead li { float: right; margin-left: 20px; } /*archives by year*/ .custom ul.compact-archives { list-style-type: none; font: 1.2em/1.33333em Verdana,serif; clear: both; } .custom ul.compact-archives li { margin-bottom: 15px; } .custom .tag_archives ul { list-style-type: none; margin: 20px 0 20px 0; overflow: auto; } .custom .tag_archives ul li { float: left; width: 220px; word-wrap: normal; margin-left: 0; margin-right: 0; text-align: center; } .custom .tag_archives ul > li:nth-child(2) { margin-left: 10px; margin-right: 10px; } /*make popular posts thumbnails line up horizontally*/ .custom .wpp-list li { clear: none; } /*media queries for mobile: landscape & portrait */ @media screen and (max-width: 700px) { #subheader { font-size: 1.5em; min-height: 2em; text-align: center; margin-bottom: 10px; display: inline-block; text-align: center; } #subheader li { float: none; margin: 10px; margin: 7px; } /*hide sidebars*/ #left_bar, #right_bar { display: none; } /*-- reflow/restyle main content --------------*/ /*stretch main content out all the way*/ #left_box, .custom #content { width: 100% !important; } /*resize body content images*/ .custom #content_inner img:not(.nothumb), .custom #content_inner iframe { width: 100% !important; height: auto !important; } /*fix body headlines*/ .custom #content h1 { width: auto !important; } .custom .format_text h2 { text-align: center; } /*fix comments*/ .custom #comments, .custom dl#comment_list dd.comment, .custom dl#comment_list dt.comment { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } .comment strong { padding-left: 10px; } .comment .comment_time { padding-left: 10px; display: block; } /*remove nudge adjustment on navigation */ .custom .navigation { left: 0; } /*related posts*/ .custom .related-posts a { display: block !important; width: 100% !important; float: none !important; } .custom .related-posts a div { width: 100% !important; } .custom .related-posts a > div { height: auto !important; margin-bottom: 10px; } /*hide the thumbnail*/ .custom .related-posts a div div:first-of-type { display: none; } /*enlarge the link title text*/ .custom .related-posts a div div:last-of-type { font-size: 1.4em !important; line-height: 1.4em !important; text-align: center; } /*popular posts*/ .custom #popular-posts ul li img { width: 75px !important; height: auto !important; } .custom #popular-posts ul { margin-top: 10px; text-align: center; } .custom #popular-posts ul li { width: 75px; margin: 0 5px 10px 5px; padding: 0; display: inline-block; float: none; } /*fix the rest of the divs to display correctly*/ body, .custom #container, .custom #content_inner, .custom .navigation { width: 100% !important; padding: 0 !important; margin-left: auto !important; margin-right: auto !important; } /*remove extraneous background*/ #page, .custom #content_box { width: 100% !important; background: none !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; } /*rezie banner images*/ .custom #rotating_image, .custom #masthead { width: 100% !important; padding: 0 !important; } .custom #rotating_image img { width: 100% !important; height: auto !important; border: none !important; } /*centre SNS icons*/ #masthead ul { width: 100%; height: auto !important; text-align: center; } #masthead ul li{ display: inline-block !important; float: none !important; margin-left: 5px !important; margin-right: 5px !important; } /*centre page headline*/ #logo, #masthead h1 { text-align: center; clear: both; } } /*update for just portrait view*/ @media screen and (max-width: 500px) { /*resize body copy just for portrait view*/ .custom #content_inner .format_text { font-size: 1.6em; /*1.3em*/ line-height: 1.75em; /*1.53846em*/ } }