CSS - Basic Css Help In A Cgi Script

Hi:

I'm new to HTML so you would imagine what was my dilemma when I was asked to use CSS on my forms. Can someone add the CSS code to the following code along with some tips on how to make it more pleasing? If you look at it now its dull, dull, dull.

<FORM METHOD="POST" ACTION="login.php">
<TABLE border="7" CELLPADDING="3" CELLSPACING="10" BORDERCOLOR=BLACK>
<tr><th colspan=2><FONT size="5"><B><center>MAIN LOGIN FORM</B></FONT></th></tr>
<TR><TD><B>USERNAME:</B></TD><TD><input type="Text" name="username"></TD></TR>
<TR><TD><B>PASSWORD:</B></TD><TD><input type="password" name="secret"></TD><TD>
<input type="submit" name="submit" value="LOGIN"></TD><TR>
</form>
</TABLE>

Also thanks in advance.

Hey all,

I need some help with a very basic CSS file. Honestly, it is so basic, that I've never done it before, and I can't get it to work.

So, basically, what I have, is a flash file, that I want to be in the center of my page. However, in the flash file is a banner, that I want to continue at the sides, using repeating backgrounds.

What I need is a simple three column CSS file, where the center has a fixed with of 887px (the width of the swf-file) and the left and right columns change their width to whatever width the visitors web browser has.

I just can't get it to work. Can anyone help me?

Thanks a lot.

Regards.

I'm new to CSS and I am trying to create a style sheet for a website I am currently getting ready to begin production of and was trying to get my basic layout made up.

I was wandering if you guys could help me out because I keep getting a few concepts mixed up as I am going along through creating this and can't quite get it set up the way I want to.

I tried to comment my CSS so you guys could get a basic understanding of what I was aiming for. Don't worry about the odd backgrounds at the moment b/c I am just using them to easily identify my different divs.

Anyway, here is my css:
Code:

/* CSS Document */
h1 {
	font-family: Geneva, Arial, sans-serif;
	font-size: 20px;
	color:#000000;
}

h2{
	font-family: Geneva, Arial, sans-serif;
	font-size: 16px;
	color:#000000;
}

h4{
	font-family: Geneva, Arial, sans-serif;
	font-size: 12px;
	color:#000000;
}

/*============================ Begin Layout Structure ============================*/
#wrapper { /* main container for everything */
	width: 1014px; /* 1024px total with padding */
	min-height: 748px;
	margin: 0 auto;
	background: #ffffff;
	overflow: hidden; /* contain inner floats */
	position: relative; /* establish the containing block */
	padding-right: 10px; 
}

#accounttypeselector { /* select personal or business to affect page display */
	position: absolute;
	width: 100%;
	height: 25px;
	left: 0;
	top: 0;
	padding: 0;
	background: #ff00ff;
}

#servicesbar { /* container for user services */
	position: absolute; /* sitting up this way b/c will be contained within wrapper */
	width: 100%; /* with absolute positoning and being inside wrapper should be 100% of width of wrapper */
	height: 30px; /* 30px should be adequate height */
	padding: 0;
	background: #ffffff;
}

#servicesbar-services { /* container for user services once logged in */
	position: absolute; /* not sure if position for this is right - should be left side of servicesbar */
	width: 75%; /* want it to be 75% of the servicesbar width */
	height: 100%; /* since servicesbar container height is 30px should be 100% of this */
	padding: 0;
	background: #ff00ff;
}

#servicesbar-login { /* for user login and logout - contained inside servicesbar */
	position: absolute; /* not sure if position for this is right - should be right side of servicesbar */
	width: 25%; /* want it to be 25% of the servicesbar width */
	height: 100%; /* since servicesbar container height is 30px should be 100% of this */	
}

#header { /* will include site banner/logo */
	width: 1024px;
	padding: 0;
	background: #ff0000;
	background-image: "background.gif";  /* if I don't specify a height will this div take on the height of the image? */
}

#navmain { /* navbar that will be located below header */
	width: 1024px;
	padding: 0;
	background: #21ee00;
}

#bodywrapper { /* wrapper for main content - will have 3 columns here */
	width: 1024px;
	padding-top: 10;
}

#bodywrapper-navleft { /* sub nav to be lcoated in left column of bodywrapper */
	width: 15%;
	background: #8B8378;
	padding: 0;
}

#bodywrapper-main { /* main content to be located in middle column of bodywrapper */
	width: 70%;
	background: #66CDAA;
	padding:0;
}

#bodywrapper-news { /* news column to be located in right column of bodywrapper */
	width: 15%;
	background: #8A2BE2;
	padding:0;
}

#footer { /* footer to be located at bottom of wrapper */
	width: 1014px; /* will be 1024 with padding */
	height: 20px;
	padding-right: 10px;
}

And here is just my bareboned html where I was trying to put my divs together:

Code:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="test2.css" />
</head>
<body>	
	<div id= "wrapper" >
	
		<div id= "accounttypeselector" > </div>
		
		<div id= "servicesbar" >
			<div id= "servicesbar-services" > </div>
			<div id= "servicesbar-login" > </div>
		</div>
		
		<div id= "header" > </div>
		
		<div id= "navmain" > </div>
		
		<div id= "bodywrapper" >
		
			<div id= "bodywrapper-navleft" > </div>
			<div id= "bodywrapper-main" > </div>
			<div id= "bodywrapper-news" > </div>
		
		</div>
	
	</div>
	
	<div id= "footer" > </div>
</body>
</html>

Can anyone offer me some suggestions to straighten me out here and also any tips if I am doing anything that isn't the accepted norm.

Thanks in advance and let me know if you have any questions as to what I am trying to do. Really appreciate it.

Nathan

heya guys having some drama with what should be a simple task. basically i just want to expand the intro-left div to 100% without pushing the right hand content thats fixed.

Code:

<div id="intro" style="float:left; display:inline; border: 1px solid red; width:100%;">
		<div id="intro-left" style='float:left; border:1px solid green; overflow:hidden; width:auto;'>
			text
		</div>

		<div id="feeder" style="float:right; border: 1px solid black; width:200px;height:400px;">
			text
		</div>
</div>

I am new to this stuff started php about a month ago

now i started with this css nav menu last week and can not figure out how to get the thing in the center of the page
also
in FF the nav menu is fine just not in the right location
in IE the bottom half of the nav menu sticks out one inch past the top half

here is my css

PHP Code:
#divNav {
    background: transparent url(../images/bk-nav.jpg) no-repeat top left;
    margin: 0;
    padding: 0;
    height: 80px;
    width: 800px;
}

#nav {
    position: relative;
    top: 55px;
    height: 80px;
    width: 800px;
}

#nav li ul, #nav li ul {
    margin: 0;
    padding: 0;
}

#nav a {
    text-decoration: none;
}

#nav li { /*float the main list items*/
    margin: 0;
    float: left;
    display: block;
    padding-right: 15px;
}

#nav li ul {
    display: none;
}

#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
    position: absolute;
    top: 25px;
    left: 0;
    padding-top: 15px;
    background: #224d6f;
    height: 28px;
    width: 740px;
    padding-left: 60px;
}

#nav li.on ul {
    background: #f90;
}

#nav li.on:hover ul, #nav li.over ul { /*for ie*/
    background: #224d6f;
}

#nav li a {
    color: #224d6f;
    font-weight: bold;
    display: block;
    width: 93px;
    padding: 0;
}

#nav li.on a {
    color: #f90;
}

#nav li.on ul a, #nav li.off ul a {
    border: 0;
    float: left; /*ie doesn't inherit the float*/
    color: #f90;
    width: auto;
    margin-right: 15px;
}

#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
    background: #224d6f;
}

#nav li.on ul {
    display: block;
}

#nav li.off:hover ul, #nav li.over ul {
    display: block;
    z-index: 6000;
}

#nav li.off a:hover, #nav li.on a:hover { 
    color: #f90;
}

/*do the image replacement*/

#nav li span {
    position: absolute;
    left: -9384px;
}

#liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a {
    display: block;
    position: relative;
    height: 26px;
    background: url(../images/bk-dropdownMap.gif) no-repeat; /*contains all hover states*/
}

/*first, put the initial states in place*/

#liRenaissance a {
background-position: 0 0;
}

#liArtNouveau a {
background-position: -102px 0;
}

#liModern a {
background-position: -204px 0;
}

#liPostModern a {
background-position: -306px 0;
}

#liDigital a {
background-position: -408px 0;
}

/*active area - for this demo - the code could be based on a body class, and probably work better.*/

#liModern.on a {
background-position: -204px -37px;
} /*add selectors for the other li's and background-positions*/

/*hover states*/

#liRenaissance a:hover, #liRenaissance:hover a, #liRenaissance.over a {
background-position: 0 -73px;
}

#liArtNouveau a:hover, #liArtNouveau:hover a, #liArtNouveau.over a {
background-position: -102px -73px;
}

#liModern a:hover, #liModern:hover a, #liModern.over a {
background-position: -204px -73px;
}

#liPostModern a:hover, #liPostModern:hover a, #liPostModern.over a {
background-position: -306px -73px;
}

#liDigital a:hover, #liDigital:hover a, #liDigital.over a {
background-position: -408px -73px;
}

/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
display: block;
background: #224d6f;
color: #fff;
font-family: arial, verdana, sans-serif;
font-size: small;
}        

#nav li.on ul a {
background: #f90;
} 

Hi all!

New to the forum, hopefully somebody will be able to help me out with a problem I am having!

I am currently working on a simple flat website and would like help with the layout. I know what I want, however I cant seem to get the code working

I will upload a picture outlining what I want to achieve, it would be pretty confusing to explain.

URL

Basicaly, heres the idea.

Header
Main Content Container
Footer

The footer must always be visible and stick to the bottom of the page. When displayed in higher screen resolutions, the footer is still at the bottom. That is within my ability, but I am having trouble formatting the Main Content Container. I want it to be a static height, regardless of screen size. However, if it is viewed in a lower screen resolution, the footer is going to eat into this height so I would like to get a vertical scroll bar to appear inside the Main Content Container div to accomodate for this.

I have trouble explaining what I mean please if you have the know how can you help me out? I'd really apreciate it!

Thanks in advance, hopefully I will be able to contribute to the forum in the future

Hi, I'm so glad I found this forum, i have a feeling I'll be here often, lol. I fumble my way through css and get by but I have a really annoying problem with a centre content box on the homepage of my forum, when the browser window is re sized smaller the content box gets moved down the page leaving a big gap in the middle. I have managed to absolute position the box itself but the picture and text that is in it still moves and overlaps the contents box on the right.
Sorry to be so long winded, I'm sure there's an easy coding solution but I can't find it
Thanks for reading

Hi There,

I am having a problem with getting padding to work correctly. I am trying to create a simple tabular view and the padding on my text content does not seem to be acting as I want it. In the main text content area I want a padding of .3em all the way around. It looks like the left and right padding is correct in both FF and IE. But in IE7, both the top and bottom padding appear to be more than the .3em. In FF their is no top padding and the bottom padding seems more than what I am looking for. I am including a sample which illustrates my problem. Thank you for any help on what I am doing wrong here.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
div.revsummary
{
  width: 100%;
  border: #036 solid 1px ;
  margin: .5em 0 .5em 0;
}

.revsummary span
{
  background-color: #eee;
  border-bottom: #036 solid 1px ;
  float: left;
  text-align: center;
  padding: .3em 0 .3em 0;
}

span.revsumtitle
{
  width: 90%;
  background-color: peachPuff;
  text-align: left;
  padding-left: .3em;
}

span.revsumrating
{
  width: 10%;
  margin-left: -6px;
  border-left: #036 solid 1px ;
  background-color: peachPuff;
}

span.revsumdest
{
  width: 35%;
}

span.revsumcl
{
  width: 35%;
  margin-left: -2px;
  border-right: #036 solid 1px ;
  border-left: #036 solid 1px ;
}

span.revsumship
{
  width: 30%;
}

span.revsumwrtup p
{
  padding: .3em;
  text-align: left;
}

span.revsumwrtup
{
  background: none;
  border-bottom: none;
  float: none;
}

#crContentview
{
  padding: .5em;
}

</style>
</head>

<body>
<div style="width: 600px;">
  <div id="crContentview">
    <div class="revsummary">
      <span class="revsumtitle">Some title line</span>
      <span class="revsumrating">AA</span>
      <span class="revsumdest">Label 1</span>
      <span class="revsumcl">Label 2</span>
      <span class="revsumship">Label 3</span>
      <span class="clear"></span>
      <span class="revsumwrtup"><p>Here is a bunch of text, I want this text to have a padding around it and it seems to work fine on the left, right and bottom, but not the top.  I have a feeling this is something to do with the way I am using the spans and floats.</p></span>
    </div>
  </div>
</div>
</body>
</html>

Hi all,

What does this mean?

H1 A:link { color:#fff }

- or -

.sectionhead H2 { font-size: 12px; }

I'm asking specifically about the space between the name of the selector and the HTML tag reference. What function does that space have? If it were a comma I would know, but I don't know what a space means. Sorry if totally dumb question.

Also, I keep seeing three-character hex values (e.g., #fff, #0cd, #078, etc). How are they used, what do they mean? I would have thought it meant to repeat the three characters to make the six (eg, #ffffff, #0cd0cd, #078078) but that appears not to be the case.

I've been looking around w3schools.org to find answers to questions like these, but no luck. Any suggestions?

Thanks to anybody who takes the time to answer!

Laura S.

Hi,

Not sure if this topic is ok if someone can nail this down here, but I have a question.

How good or bad is it to set all the value to zero?

Like
Code:

blockquote, body, dd, div, dt, fieldset, form, h1, h2, h3, h4, h5, input, li, ol, p, pre, textarea, th, td, ul{  
margin:0 0 0 0; 
padding:0 0 0 0; }

in front of the rest of styles.

What about the other tag's, how to zero them out? Or should I enter the CSS default value's? CSS 2 and CSS 2.1 are different with some default value's. How good is this for all browsers in this universe?

First I want to call it resetting them to defaults, but thats not the right word I think. Each browser has his own start ( default ) values. And setting them to a defined startvalue is not really resetting, but thats just word nickpicking.

Also what's more save
Code:

margin:0 0 0 0; 
padding:0 0 0 0;

or
Code:

margin:0;
padding:0;

is it 100% sure that the latter one overrides all the margin-lefts:10px ( thinking about cascading )?

Some comments?

Hey guys,

I am brand new to these forums, this seems like a good place to ask for help. So I am a novice web designer, I use AdobE Dreamweaver CS3. I have designed and coded some websites quite successfully, but now I keep running to the same problem. I have made my layout and turned it into different divs on Dreamweaver. This is in a very basic early stage. Next I want to add content, and I know how to do that, but every time I have done that and I add more content downward outside of the original "content" div's borders, the whole layout sometimes gets screwed up. Here is the address to the basic website that only looks to be alright: vivanidesign.com/newvivani/design.html. Then as I add content, to this particular page, it overflows, as shown in this website: vivanidesign.com/newvivani/designfail.html. How can I fix this? How can I make the background content image follow the text, so it will move down with it? Not just the content div, but the sidebar div also.

Any help would be really great, I've tried to find out the answer to this for a while!

Thanks!

how do you set the width with CSS?

i'd like to have a table with two columns, 70% and 30% with text-align left on the 70%, and text-align right on the 30%. any ideas? thanks.

***RESOLVED: Had to switch to relative positioning***

Okay. I'm sure this is extremely simple, but I can't seem to get this to work for some reason.

I'm basically trying to put a right sidebar in, but it keeps to the left.

Concept:
http://i472.photobucket.com/albums/rr82/rhoover84/concept.jpg

Reality:
http://i472.photobucket.com/albums/rr82/rhoover84/reality.jpg

Here's my css:
Code:

body {
	background-color: #5D5D5D;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}

/* Layout Specs */

#container {
	width: 950px;
	margin: 0 auto;
	text-align: left;
}
h1, h2, h3, p {
	margin: 10px 255px 10px 15px;
}
div.content {
	position: absolute;
	background-color: #FFFFFF;
	color: #504E52;
	width: 950px;
	margin: 0px 255px 0px 0px;
	z-index: 1;
}
div.header {
	background-image: url('images/header.png');
	background-position: top;
	background-repeat: no-repeat;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	width: 950px;
	height: 200px;
	z-index: 2;
}
div.rtcol {
	position: absolute;
	float: right;
	width: 240px;
	background-color: #E7EEF9;
	color: #504E52;
	border-left: 2px solid 7BD5EA;
	z-index: 2;
}
p.rtcol {
	margin: 0px;
	padding: 0px;
}

/* Text: Headings, etc. */

h1, h2, h3 {
	text-transform: uppercase;
	color: #6083BB;
}
h1.rtcol, h2.rtcol, h3.rtcol {
	color: #E36A07;
}

And finally, the HTML:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="container">
	<img src="images/logopng.png" float="left">
	<div class="header">&nbsp;</div>
	<div class="content">
		<h2>Test Title</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum mattis nisi id convallis. Nullam aliquam pellentesque lectus, eu hendrerit lectus dapibus et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Aliquam scelerisque, metus in euismod lacinia, augue tellus tempus urna, lacinia vulputate lectus quam nec ipsum. Integer iaculis nulla eu turpis fermentum quis dapibus enim consectetur.</p>
		<p>Nunc pulvinar cursus dolor id ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum aliquet ornare lacinia. Integer sed ante leo, eu dictum enim. Ut risus purus, convallis eu rhoncus at, ultricies ut diam. Ut vel mi ut nibh tincidunt pretium sit amet quis urna. Donec sed auctor eros. Vestibulum nec odio ante.</p>
	</div>
	<div class="rtcol">
		<h2 class="rtcol">Computer Training Courses</h2>
		<p class="rtcol">Tired of condescending looks from your kids?<br>Call us for more info!<br>1-888-QIK-STOP<br>(440) 392-2700</p>
	</div>
</div>	
</body>
</html>

Any suggestions are welcome, so thanks ahead of time!!

Hello folks,

I am trying to get a basic sprite working. I have been reading on this for over a week and I think I am missing something very basic.

I made a couple sprite png's in photo shop could not get them to display correctly and I found a place online that makes them for U, it displays just like the ones I made... so

http://www.realestateozarks.com/mcnally/mcn.png

Ok what is happening when I try and call the sprite and display a pic on it, it does correct width and height but divides the height by the 6 pictures on it and displays all of them instead of 1. http://www.realestateozarks.com/rsstest.htm and U can see what I am trying to say.

I am not trying to do anything fancy here only display 1 pic out of the 6 correctly.

if I call the sprite in a image statement like <img class="sprite mcn1 mc5"> it does display the img correctly... but that is not correct html code and if alt statment is added it displays it on top of pic. css code passes w3c.org test NOTE: if I try and display a individual pic in a td statment like <td class="sprite mcn1 mc5"> it displays the picture correctly... well as a backround image anyway...

here is my html code to call sprite...

In head statment
Code:

<link href="mcsprite.css" rel="stylesheet" type="text/css" >

in body to call pic
Code:

<img src="../mcnally/mcn.png" class="sprite mcn1 mc5">

Here is code in my mcsprite.css file
Code:

.sprite {background:url(../mcnally/mcn.png); 
	background-repeat:no-repeat; }

        .mcn1 {height:125px;}

		/* mcn1 */
		.mc1 {width:200px; background-position: 0px 0px;}
		.mc2 {width:200px; background-position: 0px -135px;}
		
	
		.mc3 {width:200px; background-position: 0px -270px;}
		.mc4 {width:200px; background-position: 0px -405px;}
		
                .mc5 {width:200px; background-position: 0px -540px;}
		.mc6 {width:200px; background-position: 0px -675px;}

If I can get it to display 1 pic correctly then I can change my code and display all 6 pics correctly. I have 24 pic's on my home page so using a couple sprites with 6 pic's each on them with .2 sec latency on grabbing each individual pic will save me about 2 sec load time on my home page.

thanks in advance for any suggestions/help

whonoes

Argh - I am not very good with CSS (uhm, obviously) and all I am trying to do is change the color of some list items in a blog menu. It's Wordpress, and, it's not as if the blog is important - but this is driving me insane. I've installed Firebug in an effort to figure out what is making these items red - or #333. I can alter the code in Firebug and it gives a visual representation of what the edit would look like. But when I actually make the edit, nothing happens. And I've deleted my browsing history, used every browser, etc. - and I can change everything else! I am trying to change the text color in the right hand menu from red to, well, something else.

The pages is at: http://www.webputzer.com

The .css file looks like this:

Code:

/*
Theme Name: alibi
Theme URI: http://www.blogchemistry.com/
Description: 2 column, with RHS widget sidebar
Version: 1.2
Author: BlogChemistry
Author URI: http://www.blogchemistry.com/
*/



body {
margin: 0;
padding: 0;  
color: #333;
text-align:center;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 100.1%;
background: #fff;
}


#wrapper2{
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}

#wrapper3{
border-left: 1px solid #666;
border-right: 1px solid #666;
}

#wrapper4{

}


#wrapper{
width: 770px;
margin: 0px auto;
padding: 0px;
text-align:left;
font-size: 85%;
line-height:20px;
background: #fff;
border-left: 3px solid #333;
border-right: 3px solid #333;
}


#header{
padding: 1px 0px;
margin: 0;
background: #ccc;
}	


#header-inner{
margin:0;
padding:0;
}


		
#content{
clear:both;
margin: 0;
padding: 5px 5px 5px 10px;
background:#fff;
}	

#content-inner{

}

#main {
width: 550px; 
float:left;
margin: 0;
padding: 5px 0 10px 0;
overflow:hidden;
}


#sidebar {
padding: 0;
margin: 0 0 0 560px;
background: #fff;
}


#footer {
clear: both;
margin: 0;
padding: 10px 16px;
text-align: center;
font-size: 85%;

}


#footer-inner{
background: #f2f2f2;
height: 50px;
}

#footer p{
margin:0;
padding:15px 0;
}

#navigation{
padding: 5px 15px;

}

#navigation div.fleft{
float:left;
}

#navigation div.fright{ 
float:right;
}

#credit{
text-align:right;
padding: 0 15px;
}

#credit p{
margin:0;
color:#777;
font-size:85%;
}

#credit p a, #credit p a:hover{
color:#999;
font-weight:100;
}

/*  ********** default styles *********** */

p, h1, h2, h3, h4, h5, h6{
margin: 10px 0;
padding: 0;
}

h1, h2, h3, h4, h5, h6 {
font-family: georgia, 'Times New Roman', sans-serif;
}

h1{
	font-size: 190%;
}
h2{
	font-size: 160%;
}
h3{
	font-size: 120%;
}
h4{
	font-size: 130%;
}
h5{
	font-size: 100%;
}
h6{
	font-size: 70%;
}


a{
color:red;
font-weight:800;
text-decoration:none;
}
a:hover{
color:red;
text-decoration:underline;
}

a img{
border:0px;
}

hr{
height:2px;
margin:5px 0;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}

blockquote{
background: #f4f4f4;
padding: 5px 15px;
margin: 3px 30px;
}

form{
margin: 0;
padding:0;
}

fieldset{
padding:10px;
margin:0;
border:none;
}

legend{
font-weight:800;
}

code{
	font-size: 90%;
	font-family: "Courier New", Courier, monospace;
	white-space: pre;
}

td{
 vertical-align:top;
}



#tabs {
  float:left;
  width:100%;
  font-size:90%;
	background:#000;
  line-height:18px;
	
	border-top: 1px solid white;
}


    #tabs ul {
	  margin:0;
	  padding:4px 10px 0 10px;
	  list-style:none;
      }
    #tabs li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs a {
      float:left;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs a span {
      float:left;
      display:block;
      padding:5px 15px 3px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#FFF;
      }
    #tabs a:hover {
      background-position:0% -42px;
      }
    #tabs a:hover span {
      background-position:100% -42px;
      }  
	
	


/* Headings */ 

form#searchform2{
display: block;
float:right;
margin: 55px 10px 0px 5px;
}

#header h3{
margin:  0;
padding: 30px 0 0 10px;
}

#header h3 a{
font-weight:100;
color: #fff;
text-decoration: none;
font-size: 220%;
letter-spacing: 1px;
}

#header h2{
margin: 0;
padding: 10px 0 5px 10px;
font-weight:100;
font-style:italic;
color: #fff;
font-size: 130%;
letter-spacing: 1px;
}

h2#sectiontitle{
font-size:100%;
font-weight: 800;
font-family: arial, verdana, sans-serif;
padding:6px 6px 6px 10px;
margin:8px 10px 5px 10px;
background: #f2f2f2;
color: #444;

}

/* post styles */

.post{
margin: 0 0 10px 0;
padding: 0 5px 5px 5px;
}

.entry{
margin: 0;
padding: 0px 10px 3px 10px;
}

.post h2 {
color: #333;
font-size: 150%;
font-weight:100;
padding: 7px 0 2px 2px;
margin: 10px 0 15px 0;
}


.post h2 a{
color: #333;
text-decoration:none;
font-weight:100;
}

.post h2 a:hover{
text-decoration:none;
color: #333;
}

.postmetadata{
font-size:80%;
padding: 1px 8px 1px 5px;
margin: 0;
border-top: 1px solid #ccc;
}

.postmetadata p{
line-height: 18px;
padding: 0;
margin: 2px 0;
}


.date{
float:left;
text-align:center;
font-weight:800;
margin: 0 10px 0 0;
padding: 0 10px;
border-right: 1px solid #ccc;
color: #444;
}


.dateDay{
display:block;
font-size: 16px;
line-height: 16px;
text-align:center;
}
.dateMonth, .dateYear{
display:block;
font-size: 11px;
padding:0;
line-height: 12px;
}




/*  Comments   */

h3#comments, h3#postcomment{
	font-size: 100%;
	font-family:verdana, sans-serif;
}	

ol#commentlist{
padding: 0 0 0 20px;
font-size: 90%;
list-style-type: none;
}

ol#commentlist li{
	padding: 0px 3px;
	margin: 0;
}

ol#commentlist li p.commentheader{
margin: 0px 0 0px 0;
display: block;
padding: 1px 5px;
}



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

ul#commentlist li{
	display: block;
	padding: 0;
	margin: 0 15px 5px 15px;
	font-size:90%;
	background: #f2f2f2;
}

ul#commentlist p{
margin: 6px 0;
}

ul#commentlist li div.comm{
margin: 1px;
padding: 1px;
}

ul#commentlist li div.gravatar {
	width:50px;
	float:left;
	padding: 10px 0 0 10px;
}

ul#commentlist li div.gravatar img{
border: 2px solid #ccc;
}




ul#commentlist li div.commenttext{
padding: 0;
margin:5px 10px 5px 65px;
}

ul#commentlist li div.commenttext div.commentwrapper{
margin:0 0 0 5px;
padding: 3px 8px;
}


/*  sidebar styles */


#subscribe p{
font-size: 85%;
margin: 3px 0 10px 0;
}



.menu{
padding:0;
font-size:90%;
}

.menu a{
font-weight: 100;
}

.menu a:hover{
text-decoration:none;
}

.menu ul{
margin:0;
padding:0;
list-style-type:none;
}

.menu ul li.widget{
padding:2px;
margin:0 0 0px 0px;
}

.menu ul li.widget ul{
	margin: 0;
	padding:0;
}

.menu ul li.widget ul li{
border-bottom:1px dotted #ccc;
background: #f2f2f2;
padding: 2px 0 2px 15px;
margin:0;
}

.menu ul li.widget ul li ul{
}

.menu ul li.widget ul li ul li{
border-top: 1px dotted #ccc;
border-bottom: none !important;
padding: 2px 0 2px 15px;
}



.menu ul li.widget h3{
font-family: arial;
font-size:120%;
padding:2px 0 1px 4px;
margin:0;
border-top: 3px solid red;
border-bottom: 1px solid #bbb;
color: #333;
font-weight: 800;
font-variant:small-caps;
}

.menu ul li h3 a{
color: #333;
font-weight: 800;
}
.menu ul li h3 a:hover{
color: #333;
text-decoration: none;
}

.menu form{
display:block;
margin:0px;
padding:4px;
}

.menu input{
margin:3px 0;
font-size:90%;
}

li.widget .textwidget, li.widget #search {
padding: 2px 5px;
}

/* Calendar styles */
#wp-calendar {
empty-cells: show;
margin: 10px auto 0;
width: 155px;
}

#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}

#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}

#wp-calendar a {
display: block;
}

#wp-calendar caption {
text-align: center;
width: 100%;
}

#wp-calendar td {
padding: 3px 0;
text-align: center;
}


#footer a{
font-weight: 100;
}

If anyone could tell me what the heck is making this uneditable - man...I'd sure like to know...