/* template_002.css CSS file for the v2 blog template A NOTE ABOUT EMS: As far as it was possible, this document uses ems for units. This is a good accessibility practice because since the size of an em is based on the font size, it grows in relation to the font when the user changes the text size of their browser. As the text size increases, so does the size of margins and padding, column widths, etc, thus maintaining the page layout as much as possible. The only times that ems are not used are when the CSS spec doesn't allow them to be used, such as in the case of setting an element's absolute position, or when a border needs to be only one pixel thick. Likewise, all font sizes are set as a percentage of the base font size. As the base font size is changed in the user's browser, the rest of the fonts on the page are resized accordingly. */ /* BODY SETTINGS */ html, body { background-color: #ffffff; } body {background-color:#fff; border:0; color:#333;font-family:Arial, Helvetica, Sans-serif; font-size:12px; margin-left: 5px; margin-top: 0; padding: 0} .mc { width: 760px; padding: 0em 0em .5em 0em; background-color: #fff; text-align: left; } /* HEADER SETTINGS */ #header { color: #fff; height: 110px; width:760px; position: relative; margin: 0; padding: 0; background-image: url(/images/blog/trbloghead.jpg); background-repeat: no-repeat; } #header h2 { display: inline; position: relative; width: 760px; height: 110px;} #header h2 a { display: block; margin:0; width: 760px; height: 105px; text-indent: -2000em;} /* MENU SETTINGS */ #menu { border-bottom:1px solid #bdbcbc; border-top:1px solid #bdbcbc; overflow: hidden; margin-bottom: 1em; } #menu h1 { float: right; color:#e9e9e9; font-size:13px; font-style: italic; font-weight:700; margin:0px; padding-top: 2px; padding-right:5px; padding-bottom: 0px; text-align:right;} #menu-1 ul { margin: 0; padding: 0.3em 0 0.3em 0; } #menu-1 li { display: inline; /* used pixels to keep it aligned with the absolutely positioned blog title */ font-weight: bold; font-size: 100%; border-left:1px solid #fff; list-style-type:none; padding:0 .4em 0 .6em;} #menu-1, #menu-1 a:link,#menu-1 a:visited,#menu-1 a:active { font-family:Arial; font-size:11px; color:#ffffff; text-align:left; text-decoration:none } #menu-1 a:hover { text-decoration:underline } #menu-1 { background-color : #505050 } #menu-1 { background-image: url(/images/blog/gry_bar_head.gif); background-repeat: repeat-x; } #menu-1 #menufirst { border:none } /* SIDEBAR SETTINGS */ #sidebar { float: left; width: 204px; margin-right: 20px; margin-bottom: 0px; padding-bottom: 6px; } #sidebar p { margin: 8px 4px 8px 8px; } #sidebar form { margin-left: 0px; padding-bottom: 6px; } #sidebar a:link, #sidebar a:visited, #sidebar a:active { color : #0000cc; text-align : inherit; } #sidebar a:hover { color : #cc0000; text-align : inherit; } .sidebar2 { padding: 0 0 8px 0; background-color: #eee; color: #333; margin: 0 0 6px 0; overflow: hidden; font-size: 12px; } .sidebar2dynamic { width: 204px; padding: 0 0 8px 0; background-color: #eee; color: #333; margin-bottom: 2px; font-size: 12px; } .sidebar2 h3 { margin: 0; padding: 0.6em 0 0.6em 0.5em; background-image: url(/images/blog/side_header.gif); background-repeat: no-repeat; color: #4b4b4b; font-weight: bold; font-size: 13px; } .sidebar2 div, .sidebar2 ul, .sidebar2dynamic ul { margin: 0; padding: 0.4em; /* pad the entire *content* of the widget */} .sidebar2 ul, .sidebar2 ul li, .sidebar2dynamic ul, .sidebar2dynamic ul li { list-style-position: outside; margin: 0.1em 0 0.25em 0.6em; list-style-image: url(/images/blog/smallBullet.gif) } .sidebarheader h3 { margin: 0; padding: 0.6em 0 0.2em 0.5em; background-image: url(/images/blog/side_header.gif); background-repeat: no-repeat; color: #4b4b4b; font-weight: bold; font-size: 13px; } #researchcontent { width: 204px; padding: 0; background-color: #eee; color: #333; background-image: url(/images/blog/research_wm.gif); background-repeat: no-repeat; background-position: bottom right; margin-bottom: 2px; font-size: 12px; } #researchheader h3 { margin: 0; padding: 0.6em 0 0.1em 2.1em; background-image: url(/images/blog/research_h2.gif); background-repeat: no-repeat; color: #4b4b4b; font-weight: bold; font-size: 13px; } #buycontent { height:94%; width: 204px; padding: 0 0 8px 0; background-color: #eee; color: #333; background-image: url(/images/blog/buy_wm.gif); background-repeat: no-repeat; background-position: bottom right; margin-bottom: 2px; font-size: 12px; overflow: hidden; } #buyheader h3 { margin: 0; padding: 0.6em 0 0.2em 2.1em; background-image: url(/images/blog/buy_h2.gif); background-repeat: no-repeat; color: #4b4b4b; font-weight: bold; font-size: 13px; } #buycontent form { margin: 0 8px;} #delivercontent { width: 204px; padding: 0 0 8px 0; background-color: #eee; color: #333; background-image: url(/images/blog/deliver_wm.gif); background-repeat: no-repeat; background-position: bottom right; margin-bottom: 6px; font-size: 12px; } #delivercontent h3 { margin: 0; padding: 0.6em 0 0.2em 2.1em; background-image: url(/images/blog/deliver_h2.gif); background-repeat: no-repeat; color: #4b4b4b; font-weight: bold; font-size: 13px; } #researchcontent ul { padding: 0.4em 0.4em 0.8em 0.4em; zoom : 1;} /*#researchcontent ul, #researchcontent ul li { list-style-position: inside; margin: 0.1em 0 0 0.2em; list-style-image: url(/images/blog/smallBullet.gif)} */ #researchcontent ul, #researchcontent ul li { list-style-position: outside; margin: 0.1em 0 0 0.6em; zoom : 1; list-style-image: url(/images/blog/smallBullet.gif)} #delivercontent ul { padding: 0.4em;} #delivercontent ul, #delivercontent ul li { list-style-position: outside; margin: 0.1em 0 0 0.6em; list-style-image: url(/images/blog/smallBullet.gif)} #installcontent { width: 204px; overflow: hidden; padding: 0 0 8px 0; background-color: #eee; color: #333; background-image: url(/images/blog/install_wm.gif); background-repeat: no-repeat; background-position: bottom right; margin-bottom: 1px; font-size: 12px; } #installheader h3 { margin: 0; padding: 0.6em 0 0.2em 2.1em; background-image: url(/images/blog/install_h2.gif); background-repeat: no-repeat; color: #4b4b4b; font-weight: bold; font-size: 13px; } #installcontent form { margin: 0 0 0 8px;} .mainsmall {font-size:11px; color: #4b4b4b; font-style: italic} /* prevent the double-padding of paragraphs and divs within widget content */ #search form, .search form { padding: 4px; position: relative; margin: 0; }˙ .search-button { position: relative; bottom: -8px; } /* MAIN COLUMN SETTINGS */ #main-column{ width: 530px; float: left;} /* used for displaying multiple main content areas */ #content { width: 530px; background-color: #fff; color: #333; margin-bottom: 0; padding-bottom: 0; overflow: hidden;} .content p { margin: 8px; } /*for consumer review blog*/ #TRblogposts .content p {margin: 0px} /* POST SETTINGS */ #posts { background-color : #FFFFFF } .post-header h2 { margin-bottom: 0;} .post-header h2, .post-header h2 a:link, .post-header h2 a:visited { font-family : Arial; font-size : 123.1%; font-weight : bold; color : #cc0000; text-align : inherit; text-decoration:none !important } .post-header h2 a:hover, .post-header h2 a:active { color : #333333; text-align : inherit; text-decoration:none !important } .post-header { padding-top: 0; padding-right: 0; padding-bottom: 1em; padding-left: 0pt; background-color: #ffffff; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #999999; position: relative; clear: both; margin-bottom: 1em;} .post-header-meta { font-size: 85% !important; font-style: italic; color: #999999; } .post-header-meta a:link, .post-header-meta a:visited { color : #333333; font-weight:bold; text-align : inherit; text-decoration:none } .post-header-meta a:hover, .post-header-meta a:active { text-decoration:underline } .post-body { font-family : Arial; font-size : 100%; color : #333333; } .post-body { margin: 1em 0; } .post-body a:link, .post-body a:visited, .post-body a:active { color : #0000cc; text-align : inherit; } .post-body a:hover { color : #cc0000; text-align : inherit; } .post-body img { margin: 0.5em; border:0} .post-body ol li { list-style-position: inside; } .post-body ul li { list-style-position: outside; } .post-footer { padding: 1em 0 1em 0; font-size: 85%; position: relative; clear: both; margin-top: 0em; margin-bottom: 2.8em; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #d6d6d6; } .post-footer a { color: #0000cc; text-decoration:none } .post-footer a:hover, .post-footer a:active { color : #cc0000; text-align : inherit; text-decoration:underline } .post-social-bookmarking { display: block; position: absolute; right: 0; top: 0; padding: 0.2em 1em; } /* POSTS NAVIGATION */ #posts-navigation { margin: 1em 0 0 0; width:100%; clear: left; } #posts-navigation #prev { float: left; } #posts-navigation #next { float: right;} #posts-navigation a { padding: 0; color: #0000cc; font-weight: bold; } /* COMMENTS SETTINGS */ #comments { clear: both;} #comments h3 { margin-top: 4em; color: #333333; font-size: 123.1% } .comments-blog-title { color: #cc0000; font-style: italic; } .comment-header { padding-top: 0.5em; padding-right: 0.5em; padding-bottom: 0.5em; padding-left: 0.5em; } .comment-even { background-color: #d2d2d2; background-image: url(/images/blog/gry_bar_comment.gif); background-repeat: repeat-x;} .comment-odd { background-color: #eeeeee; background-image: url(/images/blog/gry_bar_comment2.gif); background-repeat: repeat-x; } #comment-list dt { margin: 1em 0 0.6em 0; color: #404040; font-weight: bold; } #comment-list dd { margin-bottom: 2em; margin-left: 1em; } #comment-form { width: 100%; background-color: #e9e9e9; } #comment-form div { } #comment-form h3 { color: #333333; margin: 0; padding: 0.5em; } /*customer reviews*/ table.reviewtable tbody td p.vehicle { border-bottom: 1px solid #ccc; margin-top: 1em } table.reviewtable tbody td p.vehicle a { font-size: 11px; padding-left: 2em } .reviewbody { margin-bottom:2em; margin-left:1em; width:490px; padding-top:15px; padding-right:5px; } .reviewcontent { border:solid 1px #ccc; margin:0 0 1em; width:520px } .reviewdate { background-color:#eee; margin-bottom:0; padding:2px } .reviewhelpful { background-color:#eee; padding:4px 1px 4px 5px } .reviewtext { border-left:1px solid #ddd; padding:1em; width:465px; margin-top:0px; } .bottomdot { border-bottom:1px dotted #ccc } .content .post-body p {margin:0} /*red notes*/ .itemadded, .mainsmallerred, .markdown, .rating, .rederror, .redhead, .rednote, .rednote12, .soldoutpkg, .rederroraction, .rederror a:link, .rederror a:visited, .rederroraction a:link, .rederroraction a:visited { color:#c00 } .itemadded, .mainsmallerred, .markdown { font-size:10px } .rating, .rederror, .redhead, .rednote, .rednote12, .soldoutpkg { font-weight:bold } .rednote, .soldoutpkg { font-size:11px } .rederror, .rednote12 { font-size:12px } .rating { font-size:15px } .redhead { font-size:16px } /* Labels appear before the corresponding form field in the HTML. Both are floated left, so */ #comment-form label { float: left; clear: left; width: 35%; text-align: right; margin: 0.3em 0.3em 0 0.1em; } #comment-form input[type="text"], #comment-form textarea { float: left; margin-top: 0.3em; border: 1px solid #404040; } #comment-form textarea { width: 60%; } #comment-form #captcha, #comment-form img { clear: left; margin-left: 35%; margin-top: 0.3em; padding-left: 0.3em; border: 0; width: auto; } #comment-form-submit { margin-left: 35%; margin-top: 0.3em; margin-bottom: 0.3em; } /* MESSAGE SETTINGS */ /* Used to display a message to the user to indicate the result of their * action. Possible message types include success, warning, and * failure. */ /* Styles common to all message types */ .message { margin: 1em; width: 90%; background-color: #fffbd5; border-width: 2px; border-style: solid; font-weight: bold; padding: 7px; } .message.success { background-color: #fffbd5; border-color: #fe8; } .message.error, .message.warning { background-color: #fbb; border-color: #f00; } /* SEARCH SETTINGS */ #search-results-header { border-bottom: 1px solid #333333; } /* GENERAL SETTINGS */ /* Rounded corners are accomplished though displaying one quarter of an absolutely positioned transparent PNG image. The correct section of the image is displayed at each corner of the rounded element using as CSS Sprite technique. The image has a white radius with a transparent inside to let the background color of the rounded element come through. PNG images look much better than GIF images for this purpose because PNGs support alpha transparency. That means that a given pixel in a PNG image can be set to be totally opaque (showing true white, in this case), totally transparent (showing the background color of the rounded element), or one of 254 levels of transparency in between. Alpha transparency permits us to create a smoother antialiased corner than a corresponding GIF image, in which there are only fully white or fully transparent pixels. IE6 and below do not support PNG transparency, so a browser-specific CSS file for IE6 specifies a GIF version of the corner-rounding mask. It doesn't look as nice as the PNG in a more modern browser, but it is acceptable. */ .rounded { position: relative; margin: 0; } .tl, .tr, .bl, .br { background: transparent url(http://cdn.content.compendiumblog.com/images/roundcornersprite-white.png) no-repeat scroll !important; position: absolute; width: 4px; height: 4px; padding: 0 !important; margin: 0;} .tl { top:0; left:0; background-position: 0 0 !important; } .tr { top:0; right:0; background-position: -4px 0 !important; } .bl { bottom:0; left:0; background-position: 0 -4px !important; } .br { bottom:0; right:0; background-position: -4px -4px !important; } #compendium-analytics { display: none; } #compendium-footer { display:none; } /* FOOTER SETTINGS */ #footer { float: left; display:block; width:760px; background-color:#fff; margin-top:2em; padding:0; text-align:right } #footer a:link, #footer a:visited { font-size:11px; color:#fff; font-weight:bold; margin-top:2px; padding:1px 3px 1px 1px; text-decoration:none } #footer a:hover, #footer a:active { font-size:11px; color:#fff; font-weight:bold; text-decoration: underline } .footerbar { background-color:#000; margin-bottom:.6em;}