Centering 2 Images In 1 Div

Discussion in 'CSS' started by Shadowplay, Dec 26, 2007.

0
  1. #1
    I need to have both images at the top center in a page and stay centered when the window is resized. How do I do this?


    http://bigtalkandgunsmoke.com


    HTML
    <?php include("pagefunctions.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title>
<?php bloginfo('name'); ?>
<?php wp_title(); ?>
</title>
<meta name="distribution" content="global" />
<meta name="robots" content="index,nofollow">
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php //comments_popup_script(); // off by default ?>
<?php if (is_single() and ('open' == $post-> comment_status) or ('comment' == $post-> comment_type) ) { ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js.php"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/effects.js.php"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/ajax_comments.js"></script>
<?php } ?>
<?php if (is_page() and ('open' == $post-> comment_status)) { ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js.php"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/effects.js.php"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/ajax_comments.js"></script>
<?php } ?>
<style type="text/css" media="screen">
		<!-- @import url( <?php bloginfo('stylesheet_url'); ?> ); -->
</style>
<?php
global $page_sort;	
	if(get_settings('spotlight_sortpages')!='')
	{ 
		$page_sort = 'sort_column='. get_settings('spotlight_sortpages');
	}	
	global $pages_to_exclude;
	
	if(get_settings('spotlight_excludepages')!='')
	{ 
		$pages_to_exclude = 'exclude='. get_settings('spotlight_excludepages');
	}	
?>
<?php wp_head(); ?>
</head>
<body id="home" class="log">

  
<div class="header_wrap">
<div class="header_title">
<div class="header_logo"> 


  </div>  <!-- end header_logo div -->
</div> <!-- end header_title div -->
</div> <!-- end header_wrap div -->

  <div>
    <ul id="navigation">
      <?php if (is_home()) {$pg_li .="current_page_item";} ?>
		<li class="<?php echo $pg_li; ?>"><a href="<?php bloginfo('siteurl'); ?>" title="Home"><span>Home</span></a></li>
		<?php wp_list_page('title_li=&depth=1&'.$page_sort.'&'.$pages_to_exclude)?>
    </ul>
  </div>  <!-- end nav div -->

<div id="wrap">
    Code (markup):

    CSS
    /*
	Theme Name: SpotLight
	Description: Light theme created by <a href="http://vaguedream.com" target="_blank">Stephen Reinhardt</a> Modified by <a href="http://themecorp.com/themes/spotlight/" title="SpotLight" target="_blank">Sadish Bala</a>.
	Version: 1.3	
	Author: Sadish Bala
	Author URI: http://themecorp.com
*/
* {
margin:0;
padding:0;
}

body 
{
	background-color:#fff;
	color:#333;
	font-family: Georgia,'Trebuchet MS','Lucida Grande', Arial, sans-serif;
	font-size:small;
	margin:0;
	padding:0;
	font-size:1em;
        

}
p 
{
	line-height:1.8em;
	margin:0.5em 0;
}
a:link, a:visited 
{
	color:#459045;
	text-decoration:none;
	border-bottom:none;
}
a:hover, a:active 
{
	text-decoration:none;
	border-bottom: 1px solid;
}
fieldset 
{
	border:none;
}
code 
{
	background-color:#eee;
	border:1px solid #ccc;
	padding:5px;
}
h1,h2,h3,h4,h5,h6 
{
	font-family:Georgia, Tahoma, Arial, Serif;
	font-weight:normal;
	line-height:1.6em;
}
h2, h3 {
font-size:1.6em;
margin:10px 0;
}

h4 {
font-size:1.3em;
}
ul 
{
	
	margin:5px 10px;
	padding:1em;
}
li 
{
	line-height:1.6em;
	margin-bottom:0.5em;
}
img 
{
	background:url(images/shadow.gif) no-repeat right bottom;
	padding:4px 10px 10px 4px;	
	border:none;
	border-top:#eee 1px solid;
	border-left:#eee 1px solid;	
}
a img {
	border:none;
	background:none;
	padding:none;
	background:url(images/shadow.gif) no-repeat right bottom;
	padding:4px 10px 10px 4px;	
	border-top:#eee 1px solid;
	border-left:#eee 1px solid;	
}
img.wp-smiley 
{
	border:none;
	padding:0;
	background:none;
}
img.right 
{
	float: right;
	margin:10px 0 0 10px;	
}
img.left 
{
	float: left; 
	margin:0 10px 10px 0;
}

#wrap 
{
	overflow:hidden;
	padding-left:20px;
	padding-right:20px;
	position:relative;
	width:950px;
	margin:0 auto;
        float:left;
}



.header_wrap
{
background:#253C4E;
height:200px;
width:100%;
margin-left:auto;
margin-right: auto;
padding:0;
text-align:center;
}


.header_title
{
background: url(images/title.gif) no-repeat;
height: 200px;
width: 440px;
}


.header_logo
{
background: url(images/logo.gif) no-repeat;
height: 200px;
width: 471px;
margin-left:440px;
}


#blogname {
height:30px;
padding-left:12px;
padding-top:28px;
text-align:left;
}

h1#blogname a {
color:#fff;
font-size:1.3em;
}

.description {
color:#CAE972;
font-size:1em;
font-style:italic;
padding-left:12px;
text-align:left;
margin:5px 0 0;
}

#content 
{
	display:inline;
	float:left;
	text-align:left;
	width:65%;
	margin:1%;
	padding:0 20px 0 0;
}
#sidebar 
{
	display:inline;
	float:right;
	padding-top:5px;
	width:28%;
	margin:5px 0px 20px 0px;
	padding-left:20px;
	border-left:#ddd 1px dashed;
	font-size:90%;
}
#sidebar ul#feed li 
{
	list-style:none;
	margin:0;
	padding:5px 20px;
	background:url(images/feed-icon.png) no-repeat left ;
}
#sidebar h2 
{
	border-bottom:#eed 3px double;
	font-size:18px;
	color:#459045;
	letter-spacing:0;
	margin:0;
	padding:5px 0;
}
#sidebar p 
{
	margin:10px 0;
}

#sidebar ul, #sidebar form 
{
	margin:2px 0;
	padding:5px 10px;
}
#sidebar ul ul ul 
{
	margin:2px 0;
	padding:0 0 0 10px;
}
#sidebar li.sidebox 
{
	margin:0 0 2em 0;
	padding:0;
}
#sidebar li{
margin:3px 0;
line-height:1.8em;
list-style:none;
}

#sidebar ul li a {
color:#516F86;
}
#footer {
background:#223344 url(images/top_gradient.gif) bottom repeat-x;
clear:both;
height:100px;
padding:10px;
text-align:center;
margin:0 auto;
color:#ccc;
}

ol#commentlist {
list-style:none;
margin:5px 0;
padding:0;
}

.commentname {
color:#4b5ba2;
}

.commentname a {
color:#333;
font:bold 110% "Trebuchet MS", "Lucida Grande", verdana, helvetica, arial, sans-serif;
text-decoration:underline;
}

.commenttext 
{
	margin:5px 0 0 0;
	background:#ffe;
	border-left:#ccc 3px double;
}
.alt .commenttext 
{
	background:#f0f0ee;
	border-left:#ccc 3px double;
}

* html .commenttext {
height:90px;
overflow:visible;
}
input.textbox
{
	border:#ccc 1px solid;
	background:#fff url(images/postbg.jpg) repeat-y top left;
	font:1em Verdana, Arial, Serif;
	padding:2px 5px;
	width:150px;
}
textarea{
	width: 90%;
	padding:5px;
	height: 20em;
	border: 1px solid #ccc;	
	background:#fff url(images/postbg.jpg) repeat-y top left;
	font:1em Verdana, Arial, Serif;
}
input.textbox:focus, textarea:focus
{
	border:#999 1px solid;
}

.commentp {
padding:20px 12px 10px 10px;
}

.commenttext p {
margin:0 0 10px;
padding:0;
}

#commentblock ol li {
margin-bottom:30px;
}

#commentblock {
margin-left:4px;
}

.gravatar {
background:url(images/grav.png) no-repeat;
display:inline;
float:left;
height:32px;
width:32px;
margin:20px 0 0 10px;
padding:8px;
}

#commentsform p {
margin-bottom:5px;
margin-top:5px;
}
h3.entrytitle,h3 {
color:#1e2546;
display:block;
font-size:1.5em;
margin:0;
}

h3 a:link,h3 a:visited,h3 a:hover,h3 a:active {
color:#1e2546;
}
.entry {
margin: 10px 0;
padding:15px 0;
border-bottom:#eed 3px double;
}
.entrybody 
{
	margin:1em 0;
	padding:0;
}

.entrybody a:link,.entrybody a:visited {
	border-bottom:1px dashed;
}

.entrybody a:active,.entrybody a:hover {
	border-bottom:1px solid;
}
.entrymeta {
color:#999;
margin:0;
padding:0;
font-size:90%;
}
.entrymeta .comments 
{
	background:url(images/comments.gif) no-repeat left center;
	padding-left:15px;
}
h2.archives {
background-color:#FFC;
color:#999;
font-style:italic;
margin-bottom:25px;
text-align:center;
}

.entrymeta-single {
color:#333;
margin-bottom:20px;
margin-top:3px;
}
.entrybody ul,.entrybody ol 
{
	margin:10px 0 10px 30px;
}
.entry li
{
	line-height:1.6em;
}
table {
margin:10px;
}
td,th {
padding:3px;
}
blockquote
{
	color:#666;
	margin: 1em;
	padding: 0 0 10px 50px;
	background: url(images/blockquote.gif) no-repeat left top;	
}
#navigation 
{
	clear:both;
	height:24px;
	margin:0 auto;
	padding:0 10px;
	text-align:center;
	width:880px;
	font-size:1.1em;
font-family:'Georgia', 'Verdana','Trebuchet MS','Lucida Grande';
}

#navigation a:link,
#navigation a:visited 
{
	background:#FFF url(images/active1.gif) left bottom no-repeat;
	color:#787878;
	height:24px;
	margin-right:2px;
	padding-left:12px;
	text-decoration:none;
	border:none;
}

#navigation a:link,
#navigation a:link span,
#navigation a:visited,
#navigation a:visited span 
{
	cursor:hand;
	display:block;
	float:left;
	border:none;
}

#navigation li 
{
	line-height:23px;
	float:left;
	list-style:none;
	margin:0;
}

#navigation a:hover 
{
	background:url(images/active1.gif) left bottom no-repeat;
	color:#040;
	height:24px;
	padding-left:12px;
	text-decoration:none;
	border:none;
}

#navigation .current_page_item a:link,
#navigation .current_page_item a:visited 
{
	background:#FFF url(images/current1.gif) left bottom no-repeat;
	color:#AAC8E0;
	height:27px;
	line-height:24px;
	margin-right:2px;
	padding-left:15px;
	text-decoration:none;
	border:none;
}

#navigation .current_page_item a:hover 
{
	background:#FFF url(images/current1.gif) left bottom no-repeat;
	color:#AAC8E0;
	height:27px;
	margin-right:2px;
	padding-left:15px;
	text-decoration:none;
	border:none;
}

#navigation ul 
{
	list-style:none;
	margin:0;
	padding:0;
}

h3,#commentblock h2 {
font-size:140%;
}
#navigation a:link span,
#navigation a:visited span,
#navigation a:hover span 
{
	background:url(images/active2.gif) right bottom no-repeat;
	height:24px;
	padding-right:12px;
	border:none;
}

#navigation .current_page_item a:link span,
#navigation .current_page_item a:visited span,
#navigation .current_page_item a:hover span 
{
	background:url(images/current2.gif) right bottom no-repeat;
	height:27px;
	padding-right:15px;
	border:none;
}
    Code (markup):
     
    Shadowplay, Dec 26, 2007 IP
  2. manishk

    manishk Peon

    Messages:
    63
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    well it will be quite easy to center the images if they were not applied as background images or you can combine these 2 images into 1 and then center the background. See the attached image it is much smaller in terms of filesize and will also save you one round trip to the server.
     

    Attached Files:

    manishk, Dec 27, 2007 IP
  3. fixeezy

    fixeezy Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    To fix it without image editing, consider rewriting this part of HTML:

    <div class="header_wrap">
<div class="header_title">
<div class="header_logo"> 


  </div>  <!-- end header_logo div -->
</div> <!-- end header_title div -->
</div> <!-- end header_wrap div -->
    Code (markup):
    Rewrite like this, if you really respect convention and wanna see trouble free version:

    <div class="header_wrap">

    <div class="header_title">
    </div> <!-- end header_title div -->

    <div class="header_logo"> 
    </div>  <!-- end header_logo div -->

</div> <!-- end header_wrap div -->
    Code (markup):
     
    fixeezy, Dec 27, 2007 IP
  4. fixeezy

    fixeezy Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You will need to rewrite a small bit of CSS in order to get this work, and issue will be fixed itself in process. ;)
     
    fixeezy, Dec 27, 2007 IP
  5. Shadowplay

    Shadowplay Peon

    Messages:
    394
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    AAAAAAHHHHH!!!!!

    I made the logo a regular image instead of a background image but now it's not showing for some reason!

    Can someone tell me what i did wrong and how to put the logo at the top center of the page?

    http://bigtalkandgunsmoke.com/


    HTML (header)
    <?php include("pagefunctions.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title>
<?php bloginfo('name'); ?>
<?php wp_title(); ?>
</title>
<meta name="distribution" content="global" />
<meta name="robots" content="index,nofollow">
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php //comments_popup_script(); // off by default ?>
<?php if (is_single() and ('open' == $post-> comment_status) or ('comment' == $post-> comment_type) ) { ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js.php"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/effects.js.php"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/ajax_comments.js"></script>
<?php } ?>
<?php if (is_page() and ('open' == $post-> comment_status)) { ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js.php"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/effects.js.php"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/ajax_comments.js"></script>
<?php } ?>
<style type="text/css" media="screen">
		<!-- @import url( <?php bloginfo('stylesheet_url'); ?> ); -->
</style>
<?php
global $page_sort;	
	if(get_settings('spotlight_sortpages')!='')
	{ 
		$page_sort = 'sort_column='. get_settings('spotlight_sortpages');
	}	
	global $pages_to_exclude;
	
	if(get_settings('spotlight_excludepages')!='')
	{ 
		$pages_to_exclude = 'exclude='. get_settings('spotlight_excludepages');
	}	
?>
<?php wp_head(); ?>
</head>
<body id="home" class="log">

  
<div class="header_wrap">

    <div class="header_logo"> 
        <img src="images/logo.gif" alt="Big Talk And Gun Smoke">
    </div>  <!-- end header_logo div -->

</div> <!-- end header_wrap div -->

  <div>
    <ul id="navigation">
      <?php if (is_home()) {$pg_li .="current_page_item";} ?>
		<li class="<?php echo $pg_li; ?>"><a href="<?php bloginfo('siteurl'); ?>" title="Home"><span>Home</span></a></li>
		<?php wp_list_page('title_li=&depth=1&'.$page_sort.'&'.$pages_to_exclude)?>
    </ul>
  </div>  <!-- end nav div -->

<div id="wrap">
    Code (markup):


    CSS
    /*
	Theme Name: SpotLight
	Description: Light theme created by <a href="http://vaguedream.com" target="_blank">Stephen Reinhardt</a> Modified by <a href="http://themecorp.com/themes/spotlight/" title="SpotLight" target="_blank">Sadish Bala</a>.
	Version: 1.3	
	Author: Sadish Bala
	Author URI: http://themecorp.com
*/
* {
margin:0;
padding:0;
}

body 
{
	background-color:#fff;
	color:#333;
	font-family: Georgia,'Trebuchet MS','Lucida Grande', Arial, sans-serif;
	font-size:1em;
	margin:0;
	padding:0;

        text-align: center;
        

}
p 
{
	line-height:1.8em;
	margin:0.5em 0;
}
a:link, a:visited 
{
	color:#459045;
	text-decoration:none;
	border-bottom:none;
}
a:hover, a:active 
{
	text-decoration:none;
	border-bottom: 1px solid;
}
fieldset 
{
	border:none;
}
code 
{
	background-color:#eee;
	border:1px solid #ccc;
	padding:5px;
}
h1,h2,h3,h4,h5,h6 
{
	font-family:Georgia, Tahoma, Arial, Serif;
	font-weight:normal;
	line-height:1.6em;
}
h2, h3 {
font-size:1.6em;
margin:10px 0;
}

h4 {
font-size:1.3em;
}
ul 
{
	
	margin:5px 10px;
	padding:1em;
}
li 
{
	line-height:1.6em;
	margin-bottom:0.5em;
}
img 
{
	background:url(images/shadow.gif) no-repeat right bottom;
	padding:4px 10px 10px 4px;	
	border:none;
	border-top:#eee 1px solid;
	border-left:#eee 1px solid;	
}
a img {
	border:none;
	background:none;
	padding:none;
	background:url(images/shadow.gif) no-repeat right bottom;
	padding:4px 10px 10px 4px;	
	border-top:#eee 1px solid;
	border-left:#eee 1px solid;	
}
img.wp-smiley 
{
	border:none;
	padding:0;
	background:none;
}
img.right 
{
	float: right;
	margin:10px 0 0 10px;	
}
img.left 
{
	float: left; 
	margin:0 10px 10px 0;
}

#wrap 
{
	overflow:hidden;
	padding-left:20px;
	padding-right:20px;
	position:relative;
	width:950px;
	margin:0 auto;
        text-align:center; 
        
}



.header_wrap
{
background:#253C4E; repeat-x;
height:200px;
width:100%;
margin-left:auto;
margin-right: auto;
padding:0;
text-align:center;
}


.header_logo
{
height: 200px;
width: 911px;
text-align:center;
position:center;
}




#blogname {
height:30px;
padding-left:12px;
padding-top:28px;
text-align:left;
}

h1#blogname a {
color:#fff;
font-size:1.3em;
}

.description {
color:#CAE972;
font-size:1em;
font-style:italic;
padding-left:12px;
text-align:left;
margin:5px 0 0;
}

#content 
{
	display:inline;
	float:left;
	text-align:left;
	width:65%;
	margin:1%;
	padding:0 20px 0 0;
}
#sidebar 
{
	display:inline;
	float:right;
	padding-top:5px;
	width:28%;
	margin:5px 0px 20px 0px;
	padding-left:20px;
	border-left:#ddd 1px dashed;
	font-size:90%;
}
#sidebar ul#feed li 
{
	list-style:none;
	margin:0;
	padding:5px 20px;
	background:url(images/feed-icon.png) no-repeat left ;
}
#sidebar h2 
{
	border-bottom:#eed 3px double;
	font-size:18px;
	color:#459045;
	letter-spacing:0;
	margin:0;
	padding:5px 0;
}
#sidebar p 
{
	margin:10px 0;
}

#sidebar ul, #sidebar form 
{
	margin:2px 0;
	padding:5px 10px;
}
#sidebar ul ul ul 
{
	margin:2px 0;
	padding:0 0 0 10px;
}
#sidebar li.sidebox 
{
	margin:0 0 2em 0;
	padding:0;
}
#sidebar li{
margin:3px 0;
line-height:1.8em;
list-style:none;
}

#sidebar ul li a {
color:#516F86;
}
#footer {
background:#223344 url(images/top_gradient.gif) bottom repeat-x;
clear:both;
height:100px;
padding:10px;
text-align:center;
margin:0 auto;
color:#ccc;
}

ol#commentlist {
list-style:none;
margin:5px 0;
padding:0;
}

.commentname {
color:#4b5ba2;
}

.commentname a {
color:#333;
font:bold 110% "Trebuchet MS", "Lucida Grande", verdana, helvetica, arial, sans-serif;
text-decoration:underline;
}

.commenttext 
{
	margin:5px 0 0 0;
	background:#ffe;
	border-left:#ccc 3px double;
}
.alt .commenttext 
{
	background:#f0f0ee;
	border-left:#ccc 3px double;
}

* html .commenttext {
height:90px;
overflow:visible;
}
input.textbox
{
	border:#ccc 1px solid;
	background:#fff url(images/postbg.jpg) repeat-y top left;
	font:1em Verdana, Arial, Serif;
	padding:2px 5px;
	width:150px;
}
textarea{
	width: 90%;
	padding:5px;
	height: 20em;
	border: 1px solid #ccc;	
	background:#fff url(images/postbg.jpg) repeat-y top left;
	font:1em Verdana, Arial, Serif;
}
input.textbox:focus, textarea:focus
{
	border:#999 1px solid;
}

.commentp {
padding:20px 12px 10px 10px;
}

.commenttext p {
margin:0 0 10px;
padding:0;
}

#commentblock ol li {
margin-bottom:30px;
}

#commentblock {
margin-left:4px;
}

.gravatar {
background:url(images/grav.png) no-repeat;
display:inline;
float:left;
height:32px;
width:32px;
margin:20px 0 0 10px;
padding:8px;
}

#commentsform p {
margin-bottom:5px;
margin-top:5px;
}
h3.entrytitle,h3 {
color:#1e2546;
display:block;
font-size:1.5em;
margin:0;
}

h3 a:link,h3 a:visited,h3 a:hover,h3 a:active {
color:#1e2546;
}
.entry {
margin: 10px 0;
padding:15px 0;
border-bottom:#eed 3px double;
}
.entrybody 
{
	margin:1em 0;
	padding:0;
}

.entrybody a:link,.entrybody a:visited {
	border-bottom:1px dashed;
}

.entrybody a:active,.entrybody a:hover {
	border-bottom:1px solid;
}
.entrymeta {
color:#999;
margin:0;
padding:0;
font-size:90%;
}
.entrymeta .comments 
{
	background:url(images/comments.gif) no-repeat left center;
	padding-left:15px;
}
h2.archives {
background-color:#FFC;
color:#999;
font-style:italic;
margin-bottom:25px;
text-align:center;
}

.entrymeta-single {
color:#333;
margin-bottom:20px;
margin-top:3px;
}
.entrybody ul,.entrybody ol 
{
	margin:10px 0 10px 30px;
}
.entry li
{
	line-height:1.6em;
}
table {
margin:10px;
}
td,th {
padding:3px;
}
blockquote
{
	color:#666;
	margin: 1em;
	padding: 0 0 10px 50px;
	background: url(images/blockquote.gif) no-repeat left top;	
}
#navigation 
{
	clear:both;
	height:24px;
	margin:0 auto;
	padding:0 10px;
	text-align:center;
	width:880px;
	font-size:1.1em;
font-family:'Georgia', 'Verdana','Trebuchet MS','Lucida Grande';
}

#navigation a:link,
#navigation a:visited 
{
	background:#FFF url(images/active1.gif) left bottom no-repeat;
	color:#787878;
	height:24px;
	margin-right:2px;
	padding-left:12px;
	text-decoration:none;
	border:none;
}

#navigation a:link,
#navigation a:link span,
#navigation a:visited,
#navigation a:visited span 
{
	cursor:hand;
	display:block;
	float:left;
	border:none;
}

#navigation li 
{
	line-height:23px;
	float:left;
	list-style:none;
	margin:0;
}

#navigation a:hover 
{
	background:url(images/active1.gif) left bottom no-repeat;
	color:#040;
	height:24px;
	padding-left:12px;
	text-decoration:none;
	border:none;
}

#navigation .current_page_item a:link,
#navigation .current_page_item a:visited 
{
	background:#FFF url(images/current1.gif) left bottom no-repeat;
	color:#AAC8E0;
	height:27px;
	line-height:24px;
	margin-right:2px;
	padding-left:15px;
	text-decoration:none;
	border:none;
}

#navigation .current_page_item a:hover 
{
	background:#FFF url(images/current1.gif) left bottom no-repeat;
	color:#AAC8E0;
	height:27px;
	margin-right:2px;
	padding-left:15px;
	text-decoration:none;
	border:none;
}

#navigation ul 
{
	list-style:none;
	margin:0;
	padding:0;
}

h3,#commentblock h2 {
font-size:140%;
}
#navigation a:link span,
#navigation a:visited span,
#navigation a:hover span 
{
	background:url(images/active2.gif) right bottom no-repeat;
	height:24px;
	padding-right:12px;
	border:none;
}

#navigation .current_page_item a:link span,
#navigation .current_page_item a:visited span,
#navigation .current_page_item a:hover span 
{
	background:url(images/current2.gif) right bottom no-repeat;
	height:27px;
	padding-right:15px;
	border:none;
}
    Code (markup):
     
    Shadowplay, Dec 30, 2007 IP