@charset "UTF-8"; /* CSS for maurymccown.com Copyright (c) 2008 Maury McCown. All rights reserved. If you yank my code in a blatant attempt to reach my level of suave coolness, not only will you fail miserably in your attempt, I will also leave a flaming bag of dog dookie on yo mama's front porch. For those interested in learning the wonderment of CSS, glean what you can from mine, grasshoppers. XHTML Strict and CSS3 are your friends. Find peace with them. Last updated 07-02-2010. NOTE: text-shadow and device-max-width tags don't validate for CSS 2.1, but they do for CSS 3 */ /* ----- MAIN WEB BROWSER CSS ----- */ p { /* adds just a bit of extra space after paragraphs */ padding-bottom: 4px; } img { /* removes the ugly border around img tags to allow for strict xhtml validation */ border-style: none; } html { /* forces a page to show a scrollbar so that the centering doesn't go wonky */ height: 100%; margin-bottom: 1px; } table { /* forces all tables to appear centered */ margin-right: auto; margin-left: auto; } h1 { /* sets the styling of the page titles */ color: #666; text-shadow: 0px 0px 1px #333; font-weight: bold; font-size: 16px; line-height: 1.45em; text-transform: uppercase; padding-bottom: 5px; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; } h2 { /* on pages with subheadings inline, this sets the styling of those headings */ margin-top: 30px; font-weight: bold; line-height: 1.45em; font-size: 14px; text-transform: capitalize; } .separator { /* a simple little line to work as a section divider */ height: 1px; background-repeat: repeat; background-image: url(graphics/nav/separator.png); } .centered { /* centers stuff I tell it to */ text-align: center; margin: auto; } #wrapper { /* establish the overall page width */ width: 968px; margin: auto; text-align: center; } body { /* establish background image and basic font settings NOTE: text-shadow doesn't validate for CSS 2.1, but it does for CSS 3 */ background-image: url(graphics/img.png); /*background-color: #887f6f;*/ color: #FFFFFF; font-size: 12px; line-height: 1.5em; font-family: "Lucida Grande", Arial, "Lucida Sans Unicode", "Trebuchet MS", Verdana, Arial, Sans-serif; text-shadow: 0px 0px 4px #232323; } #title { /* adds the site title graphic and area */ background-image: url(graphics/title2010b.png); background-repeat: no-repeat; background-position: center; height: 72px; padding-top: 20px; padding-bottom: 5px; } #navigation { /*establishes navigation area formatting*/ background-position: center; text-align: center; line-height: normal; margin-top: 10px; margin-bottom: 20px; } #top { /* adds the content area's top edge graphic */ background-image: url(graphics/2010topb.png); height: 31px; background-repeat: no-repeat; background-position: center; margin-top: 0px; margin-bottom: 0px; } #middle { /* adds the main content area where all the wonderful text is placed for the readers' enjoyment */ background-image: url(graphics/2010middleb.png); /*height: auto;*/ /*width: 952px;*/ background-repeat: repeat-y; background-position: center; padding-top: 13px; padding-bottom: 1px; padding-left: 48px; padding-right: 48px; text-align: justify; color: #666666; font-weight: normal; text-shadow: none; } #bottom { /* adds the bottom edge graphic */ /*margin: 0 auto;*/ background-image: url(graphics/2010bottomb.png); height: 31px; background-repeat: no-repeat; background-position: center; } .fontnames { /* establishes my blockquote style */ /*text-align: center;*/ /*font-style: normal;*/ /*padding-top: 5px;*/ /*padding-right: 20px;*/ /*padding-bottom: 0px;*/ /*padding-left: 20px;*/ /*margin-top: 25px;*/ /*margin-bottom: 25px;*/ border-bottom: 1px solid #CCD2C9; } /* establishes default, inherited link formatting */ a:link { color: #FFFFFF; } a:hover { color: #FFFF66; } a:visited { color: #FFFFFF; } a:active { color: #FFFFFF; } /* establishes #middle area formatting */ #middle a:link { color: #258; } #middle a:visited { color: #258; } #middle a:hover { color: #c63; } #middle a:active { color: #258; } #middle td { width: 190px; text-align: left; vertical-align: top; } li { /* establishes my bullet item style */ padding-top: 5px; padding-bottom: 5px; list-style-type: square; } blockquote { /* establishes my blockquote style */ text-align: center; font-style: normal; padding-top: 0px; padding-right: 20px; padding-bottom: 0px; padding-left: 20px; margin-top: 25px; margin-bottom: 25px; border: 1px dotted #CCD2C9; } .blog_date { /* sets the styling of the blog date entry text */ margin-top: 30px; font-weight: bold; line-height: 1.45em; font-size: 14px; height: 22px; text-transform: uppercase; font-family: "Lucida Grande", Arial, "Lucida Sans", "Trebuchet MS", Verdana, Arial, Sans-serif; letter-spacing: 0.1em; } .article_wrapper { /* sets the margin and indentation of the blog post body text */ margin-left: 20px; margin-right: 20px; } .post_title { /* sets the styling of the blog post title text */ font-weight: bold; /*text-transform: capitalize;*/ font-size: 14px; line-height: 1.45em; font-family: "Lucida Grande", Arial, "Lucida Sans", "Trebuchet MS", Verdana, Arial, Sans-serif; } .subheading { /* on pages with subheadings inline, this sets the styling of those headings */ margin-top: 30px; font-weight: bold; font-size: 14px; line-height: 1.45em; } .post_footer { /* sets the styling of the blog post footer text */ font-size: 0.75em; padding-top: 10px; border-bottom-width: 1px; border-bottom-style: solid; /* border-bottom-color: #BAC0B7;*/ border-bottom-color: #ccd1c8; margin-bottom: 40px; padding-bottom: 5px; } .fine_print { /* sets the styling of my fine print text in the footer */ font-size: .85em; font-family: "Lucida Grande", Arial, "Lucida Sans", "Trebuchet MS", Verdana, Arial, Sans-serif; font-weight: bold; line-height: 1.4em; } .super_fine_print { /* sets the styling of my super fine print text in the footer */ font-size: .75em; font-family: "Lucida Grande", Arial, "Lucida Sans", "Trebuchet MS", Verdana, Arial, Sans-serif; text-shadow: none; line-height: 1.4em; } .paginate { /* sets the styling of the pagination link text */ font-size: 0.75em; } .comment_area { padding-left: 20px; padding-right: 20px; font-size: 10px; color: #E78818; line-height: 1.4em; } .comment_footer { /* sets the styling of the blog comment footer text */ font-size: 10px; padding-top: 10px; } .comment_separator { /* separates comment text area */ height: 1px; background-repeat: repeat; background-image: url(graphics/nav/separator.png); } .float_left { /* used to float images to the left of the enclosing div tag */ float: left; padding-right: 20px; } @charset "UTF-8"; /* CSS for maurymccown.com Copyright (c) 2008 Maury McCown. All rights reserved. If you yank my code in a blatant attempt to reach my level of suave coolness, not only will you fail miserably in your attempt, I will also leave a flaming bag of dog dookie on yo mama's front porch. For those interested in learning the wonderment of CSS, glean what you can from mine, grasshoppers. XHTML Strict and CSS3 are your friends. Find peace with them. Last updated 07-02-2010. NOTE: text-shadow and device-max-width tags don't validate for CSS 2.1, but they do for CSS 3 */ /* ----- MAIN WEB BROWSER CSS ----- */ p { /* adds just a bit of extra space after paragraphs */ padding-bottom: 4px; } img { /* removes the ugly border around img tags to allow for strict xhtml validation */ border-style: none; } html { /* forces a page to show a scrollbar so that the centering doesn't go wonky */ height: 100%; margin-bottom: 1px; } table { /* forces all tables to appear centered */ margin-right: auto; margin-left: auto; } h1 { /* sets the styling of the page titles */ color: #666; text-shadow: 0px 0px 1px #333; font-weight: bold; font-size: 16px; line-height: 1.45em; text-transform: uppercase; padding-bottom: 5px; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; } h2 { /* on pages with subheadings inline, this sets the styling of those headings */ margin-top: 30px; font-weight: bold; line-height: 1.45em; font-size: 14px; text-transform: capitalize; } .separator { /* a simple little line to work as a section divider */ height: 1px; background-repeat: repeat; background-image: url(graphics/nav/separator.png); } .centered { /* centers stuff I tell it to */ text-align: center; margin: auto; } #wrapper { /* establish the overall page width */ width: 968px; margin: auto; text-align: center; } body { /* establish background image and basic font settings NOTE: text-shadow doesn't validate for CSS 2.1, but it does for CSS 3 */ background-image: url(graphics/img.png); /*background-color: #887f6f;*/ color: #FFFFFF; font-size: 12px; line-height: 1.5em; font-family: "Lucida Grande", Arial, "Lucida Sans Unicode", "Trebuchet MS", Verdana, Arial, Sans-serif; text-shadow: 0px 0px 4px #232323; } #title { /* adds the site title graphic and area */ background-image: url(graphics/title2010b.png); background-repeat: no-repeat; background-position: center; height: 72px; padding-top: 20px; padding-bottom: 5px; } #navigation { /*establishes navigation area formatting*/ background-position: center; text-align: center; line-height: normal; margin-top: 10px; margin-bottom: 20px; } #top { /* adds the content area's top edge graphic */ background-image: url(graphics/2010topb.png); height: 31px; background-repeat: no-repeat; background-position: center; margin-top: 0px; margin-bottom: 0px; } #middle { /* adds the main content area where all the wonderful text is placed for the readers' enjoyment */ background-image: url(graphics/2010middleb.png); /*height: auto;*/ /*width: 952px;*/ background-repeat: repeat-y; background-position: center; padding-top: 13px; padding-bottom: 1px; padding-left: 48px; padding-right: 48px; text-align: justify; color: #666666; font-weight: normal; text-shadow: none; } #bottom { /* adds the bottom edge graphic */ /*margin: 0 auto;*/ background-image: url(graphics/2010bottomb.png); height: 31px; background-repeat: no-repeat; background-position: center; } .fontnames { /* establishes my blockquote style */ /*text-align: center;*/ /*font-style: normal;*/ /*padding-top: 0px;*/ /*padding-right: 20px;*/ /*padding-bottom: 0px;*/ /*padding-left: 20px;*/ /*margin-top: 25px;*/ /*margin-bottom: 25px;*/ border-bottom: 1px solid #CCD2C9; } /* establishes default, inherited link formatting */ a:link { color: #FFFFFF; } a:hover { color: #FFFF66; } a:visited { color: #FFFFFF; } a:active { color: #FFFFFF; } /* establishes #middle area formatting */ #middle a:link { color: #258; } #middle a:visited { color: #258; } #middle a:hover { color: #c63; } #middle a:active { color: #258; } #middle td { width: 190px; text-align: left; vertical-align: top; } li { /* establishes my bullet item style */ padding-top: 5px; padding-bottom: 5px; list-style-type: square; } blockquote { /* establishes my blockquote style */ text-align: center; font-style: normal; padding-top: 0px; padding-right: 20px; padding-bottom: 0px; padding-left: 20px; margin-top: 25px; margin-bottom: 25px; border: 1px dotted #CCD2C9; } .blog_date { /* sets the styling of the blog date entry text */ margin-top: 30px; font-weight: bold; line-height: 1.45em; font-size: 14px; height: 22px; text-transform: uppercase; font-family: "Lucida Grande", Arial, "Lucida Sans", "Trebuchet MS", Verdana, Arial, Sans-serif; letter-spacing: 0.1em; } .article_wrapper { /* sets the margin and indentation of the blog post body text */ margin-left: 20px; margin-right: 20px; } .post_title { /* sets the styling of the blog post title text */ font-weight: bold; /*text-transform: capitalize;*/ font-size: 14px; line-height: 1.45em; font-family: "Lucida Grande", Arial, "Lucida Sans", "Trebuchet MS", Verdana, Arial, Sans-serif; } .subheading { /* on pages with subheadings inline, this sets the styling of those headings */ margin-top: 30px; font-weight: bold; font-size: 14px; line-height: 1.45em; } .post_footer { /* sets the styling of the blog post footer text */ font-size: 0.75em; padding-top: 10px; border-bottom-width: 1px; border-bottom-style: solid; /* border-bottom-color: #BAC0B7;*/ border-bottom-color: #ccd1c8; margin-bottom: 40px; padding-bottom: 5px; } .fine_print { /* sets the styling of my fine print text in the footer */ font-size: .85em; font-family: "Lucida Grande", Arial, "Lucida Sans", "Trebuchet MS", Verdana, Arial, Sans-serif; font-weight: bold; line-height: 1.4em; } .super_fine_print { /* sets the styling of my super fine print text in the footer */ font-size: .75em; font-family: "Lucida Grande", Arial, "Lucida Sans", "Trebuchet MS", Verdana, Arial, Sans-serif; text-shadow: none; line-height: 1.4em; } .paginate { /* sets the styling of the pagination link text */ font-size: 0.75em; } .comment_area { padding-left: 20px; padding-right: 20px; font-size: 10px; color: #E78818; line-height: 1.4em; } .comment_footer { /* sets the styling of the blog comment footer text */ font-size: 10px; padding-top: 10px; } .comment_separator { /* separates comment text area */ height: 1px; background-repeat: repeat; background-image: url(graphics/nav/separator.png); } .float_right { /* used to float images to the left of the enclosing div tag */ float: right; padding-right: 0px; } .block500h { /* sets the vertical height for my guitar pic div area */ height: 500px; } .block250h { /* sets the vertical height for my guitar pic div area */ height: 250px; } .nav_text { /* sets nav area text formatting */ color:#FFFFFF; font-weight:bold; text-align:center; padding-top:8px; font-family: Arial, "Lucida Grande", "Trebuchet MS", Verdana, Sans-serif; font-size:14px; word-spacing:5px; } .nav_text a { /* customizes the nav area's links */ color:#FFFFFF; text-decoration:none; font-weight:bold; } .nav_text a:link { /* kills the auto-underline */ text-decoration:none; color:#FFFFFF; } .nav_text a:hover { /* sets the nav link hover color */ color:#FFFFCC; text-decoration:none; } /* ----- iPad SPECIFIC CSS ----- */ @media screen and (max-device-width: 1024px){ body { /* establish background image and basic font settings NOTE: text-shadow doesn't validate for CSS 2.1, but it does for CSS 3 */ background-color: #887f6f; background-image: url(graphics/img.png); color: #FFFFFF; font-size: 12px; line-height: 1.5em; font-family: "Lucida Grande", Arial, "Lucida Sans Unicode", "Trebuchet MS", Verdana, Arial, Sans-serif; text-shadow: none; } h1 { /* sets the styling of the page titles */ color: #666; text-shadow: none; font-weight: bold; font-size: 16px; line-height: 1.45em; text-transform: uppercase; padding-bottom: 5px; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; } #wrapper { /* establish the overall page width */ width: 900px; margin: auto; text-align: center; } #top { /* adds the content area's top edge graphic */ background-image: none; background-color: #FFFFFF; height: 0px; background-repeat: no-repeat; background-position: center; margin-top: 0px; margin-bottom: 0px; border: none; } #middle { /* adds the main content area where all the wonderful text is placed for the readers' enjoyment */ background-image: none; background-repeat: no-repeat; background-position: center; padding-top: 20px; padding-bottom: 10px; padding-left: 25px; padding-right: 25px; text-align: justify; color: #666666; font-weight: normal; text-shadow: none; background-color: #FFFFFF; border: 15px solid #c5c6cb; } #bottom { /* adds the bottom edge graphic */ background-image: none; background-color: #FFFFFF; height: 0px; background-repeat: no-repeat; background-position: center; } .nav_text { /* sets nav area text formatting */ color:#FFFFFF; font-weight:bold; text-align:center; padding-top:8px; font-family: Arial, "Lucida Grande", "Trebuchet MS", Verdana, Sans-serif; font-size:14px; word-spacing:5px; } } /* ----- iPhone SPECIFIC CSS ----- */ @media screen and (max-device-width: 480px){ #wrapper { /* establish the overall page width */ width: 910px; margin: auto; text-align: center; } body { /* establish background image and basic font settings */ background-color: #887f6f; background-image: url(graphics/img.png); color: #FFFFFF; font-size: 12px; line-height: 1.5em; font-family: "Lucida Grande", Arial, "Lucida Sans Unicode", "Trebuchet MS", Verdana, Arial, Sans-serif; text-shadow: none; } h1 { /* sets the styling of the page titles */ color: #666; text-shadow: none; font-weight: bold; font-size: 16px; line-height: 1.45em; text-transform: uppercase; padding-bottom: 5px; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; } #top { /* adds the content area's top edge graphic */ background-image: none; background-color: #FFFFFF; height: 0px; background-repeat: no-repeat; background-position: center; margin-top: 0px; margin-bottom: 0px; } #middle { /* adds the main content area where all the wonderful text is placed for the readers' enjoyment */ background-image: none; background-repeat: no-repeat; padding-top: 20px; padding-bottom: 10px; padding-left: 25px; padding-right: 25px; text-align: justify; color: #666666; font-weight: normal; text-shadow: none; background-position: center; background-color: #FFFFFF; border: 15px solid #c5c6cb; } #bottom { /* adds the bottom edge graphic */ background-image: none; background-color: #FFFFFF; height: 0px; background-repeat: no-repeat; background-position: center; } .nav_text { /* sets nav area text formatting */ color:#FFFFFF; font-weight:bold; text-align:center; padding-top:8px; font-family: Arial, "Lucida Grande", "Trebuchet MS", Verdana, Sans-serif; font-size:11px; word-spacing:0px; } }