CSS - Input Box Positioning Not Being Picked Up On Page Load

I have footerStickAlt design for my page. Been trying to implement a new page with a big div (gonna be flash video) but it's causing the footer to bounce from bottom of page to middle of page where the big div seems to be ignored. The thing that is really aggrivating is that if you load ctrl-refresh page again, it goes back to bottom, then ctrl-refresh load page again it pops up to wrong spot. Inconsistent like that. Do it 20 times and it pops up like half the time? But it gets stranger. When the footer pops up (those page loads when IE7 is ignoring the big div height) just adjusting the size of window causes the footer to go back to bottom where it belongs. This type of buggy inconsistent behavior is not occurring in Firefox. It's really aggravating me.

I've seen this before on my main index page where I used to have a div (an advertisement) which was also confusing the IE7 just as it is now. So I removed that div on index page to evade the issue. But I want to get to root cause now and fix the situation. I'm not well versed in CSS, especially not the strange bugs like this that only occur on IE7 and only on first page load. Seems it's something to do with IE7 not interpreting the page at load, but it understands when I modify the window size it fixes itself.

Please assist o smart computer gods!

I've started using a JavaScript carousel script on my website, http://www.rockitdesign.co.uk/new/. When I loaded the page in Firefox and safari every image in the carousel would appear and then all but the top would disappear which is how it should be.

Sorry for the bad explanation, any way to stop this?

Hi, I have sort of a strange problem.

I'm making a centered website, and I have a shopping cart image which is actually a submit button for a form. If I make it just a plain image it looks like this:

http://www.rit.edu/~jtn5684/test/index1.html

However, when it's an <input type="image"> (which is what I need) it moves it drastically.

http://www.rit.edu/~jtn5684/test/index2.html

My styles are he http://www.rit.edu/~jtn5684/test/styles.css

Any idea how to make index2 look like index1 while using <input type="image">? Thanks!

Jon

Hi all, I have a fairly complex page with quite a few nested divs, and some of these nested divs have overflow:auto assigned to them.

The problem Im having is that on pageload and when I click a link that has uses javascript to switch the visibility of some of the sub elements, it flickers the div to a different part of the page.

I know the description isnt much help, but I didnt know if this was something that others had ran into in general with gecko browsers.
I've tried assigning overflow: auto to the containing divs, and to no avail.

Anyone have any general ideas as to what it could be?

Thanks in advance

Hello! I'm hoping someone can help me out here. I'm sure it's something simple I'm overlooking, but I've trialed-and-errored it enough and it's time to seek help!

I'm trying to adjust the location of the "main menu" on this page he

http://www.jeditemplearchives.com/hasbrodb/welcome.php

Currently, it is set in reference to the side of the browser in this CSS code:

Code:

.menuContainer
{
	position: absolute;
	top:113px;
	right:210px;
	margin: 10px;
	margin-top: 50px;

}

I've tried making the position relative but it really whacks out the page when I do that. I want to make it relative to the border of the content so that no matter what size resolution or if the browser is minimized it stays fixed and doesn't float left. I was able to do this to the links directly above it, but the same thing doesn't seem to work for this. Here's the code for the 'advanced' and 'login' links:

Code:

#header ul.headerLinks
{
	list-style-type: none;
	margin: 0px;
	padding: 10px;
	position: absolute;
	right: 0px;
	top: 95px;
	white-space: nowrap;
}

Thanks for any suggestions anyone comes up with!

Ok well the boss asked me to do a XHTML/CSS version of the website and get it up to snuff with web standards. Now I've done the coding to get the site to look the same in XHTML as it did before in HTML and tables... but there is one catch. I can't quite get my head around the easiest way to deal with captions underneath pictures. For example look at this page:

http://www.zeroonedesign.com/aboutus.html

Now in my version I haven't got the picture of the guys, or the "navigating our portfolio" bit.

Take a look at my version he

http://obelix.ca/zeroone/aboutus.html

I was thinking about creating little block divs and positioning them absolute on the page... but that doesn't seem like much of a solution as I could see the stylesheet growing considerably if there was a page with a lot of these pictures with captions. Any reccomendations? How do you guys do captions with pictures?

I am testing a three column layout with a header and a footer using only CSS. Ordinarily it works fine but when the center column has less height than the left or right columns (due to amount of content in each) then the footer overlaps the left or right column as it positions itself to just below the center column.

Can anyone figure out why? I am baffled since the footer has an absolute position of left: 0px and bottom: 0px;

Here is my HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page title</title>
<style type="text/css">
body {
	margin:0px;
	padding:0px;
	height: 100%;
}
.left-col { 
	position: absolute; 
	width: 150px;
	top: 130px; 
	left: 0px;
	padding-left: 3px;
	z-index: 2;
}

.right-col {	
	position: absolute; 
	width: 150px;
	top: 120px;
	right: 0;
	padding-right: 3px;	
	z-index: 1;
	overflow: hidden;
	clear: both;
}

.center-col {
	position: relative;
	min-width: 300px;
	min-height: 100%;
	height: 100%;
	z-index: 3;
	top: 140px;
	margin: 0px 160px 150px 170px;
	text-align: left;
	padding:5px;
}

.heading { 
	position: absolute;
	left: 0px;
	top: 0px;
}

.footer {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 0px;
	z-index: 3;
	padding-top: 25px;
	margin: 0px;
	display: block;
}

.footer-bar {
	width: auto;
	padding:10px 3px 3px 0px;
	clear: both;
	background-color: gray;
	vertical-align: bottom;
	text-align: center;
}
</style>
</head>
<body>
<div class="center-col">
	center content<br />
	center content<br />
	center content<br />
	center content<br />
</div>

<div class="left-col">
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
</div>

<div class="right-col">
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
</div>

<div class="heading">
	head content
</div>

<div class="footer">
	<div class="footer-bar">page bottom</div>
</div>
</body>
</html>

I want to place the page title on the left and the pages logo on the right of the page. The logo must be directly accross from the title.

Can anyone suggest some CSS and html

Below is my feeble attempt

HTML:
<div id="header">
<p>Report Title
<span class="logo"><img src="logo.gif">
</span>
</p>
</div>

CSS:
#header p {
text-align: left;
}

#header .logo {
text-align: right;
}

Hi, this is my first posting on these forums, so my apologies in advance if I break some unwritten rules.

I have developed a web page for friend who wanted four large area of the home page to act as buttons but not look like buttons. Each area contains an image and some text and the complete are should be clickable and should change colour when the mose moves over it.

I prefer a pure html/CSS solution rather than resorting to Javascript, so I came up with the following

The html for each area is:

<div id="homePageTopicArea">
<ul>
<li>
<a href="workshops.html">
<img src="images/homePage/topic1Image.jpg" />
<div class="homePageTopicTextHeader">
<h1>Inspiring Workshops</h1>
</div>
<div class="homePageTopicText">
<p>
This range of clear ..........
</p>
</div>
</a>
</li>


and the CSS is

#homePageTopicArea
{
height: 100%;
width: 734px;
margin-top: 10px;
margin-left: 280px;
}

#homePageTopicArea ul
{
list-style-type: none;
width: 734px;
padding-left: 0px;
margin-left: 0px;
}

#homePageTopicArea li
{
outline: none;
border: 0;
margin-top: 15px;
height: 145px;
}

#homePageTopicArea li a
{
display: block;
height: 145px;
outline: none;
text-decoration: none;
}

#homePageTopicArea li a:hover
{
background-color: #AEB8CB;
}

This works great when the page is viewed in Safari. But when I use Firefox 3.5.6 or IE7, I get an error on the page, the images are correctly positioned but the text from one of the boxes, always the second or third, never the first or last, is displayed in the wrong position, way too low down the screen, and it is in the bright blue, or purple, of an unmodified link code.



If you click on the refresh button the page always displays correctly.

Can anyone explain this behaviour?

I have screenshots but dont know how to attach them.

I have a layout that has text in a left div and the form input in the right. I want the form input to be 100% width of DIV.standard_field_right not 100% width of the entire page. Can someone give me a hint please.

CSS and XHTML below:

PHP Code:
 DIV.standard_field_container {
width: 98%;
padding: 0.4em;
border: 1px solid #8B8B8B;
background-color: #E2E2E2;
overflow: hidden;
}

DIV.standard_field_left {
width: 10em;
float: left;
margin-right: 5em;
font: bold 0.8em Verdana, Arial, Helvetica, sans-serif;
}

DIV.standard_field_right {
font: normal 0.8em Verdana, Arial, Helvetica, sans-serif;
}

SPAN.standard_field_type_info {
font-weight: normal;
color: #ff0000;
border-bottom: 1px dashed #ff0000;
cursor: help;
}

INPUT.input_text_field {
width: 30em;
} 





XHTML:

PHP Code:
<div class="standard_field_container">
    <div class="standard_field_left">
        <span class="standard_field_name"><?php echo $field_definition[1]; ?></span>
        <span class="standard_field_type_info" title="<?php echo $field_definition[7]; ?>">Information</span>
    </div>
    <div class="standard_field_right">
        <span class="standard_field_input_area"><input name="<?php echo $field_definition[0]; ?>" type="text" id="<?php echo $field_definition[0]; ?>" maxlength="<?php echo $field_definition[10]; ?>"<?php if ($value_applies == '1') { ?> value="<?php echo $row["$field_definition[0]"]; ?>" <?php } ?> class="input_text_field" /></span>        
    </div>
</div> 

I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values):

It needs to be sticked to fit after content of 4 column DIV's like it is in example.

http://www.split.info/dev/less-content/
http://www.split.info/dev/more-content/

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF;  top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966;  position: absolute;  top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
	<div id="contentPane">Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
	</div>
	<div id="leftPane">Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
	</div>
	<div id="rightPane">Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
	</div>
	<div id="rightPane2">Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
	</div>
</div>
<div id="headwide">
	<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>

Content from above 4 column div's need to push footer DIV below (after them)!

Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns).

Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer...

So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx!

Echo

I get this error from XML-CSS validation.

The element type "input" must be terminated by the matching end-tag "</input>".

I'd like to know where it goes.

It is this form:

<form action="send_survey_results.php" method="POST">
Name: <input type="text" name="user" SIZE="30"><br>
e-Mail: <input type="text" name="email" size="30"><br>
Interests:<br>
<input type="checkbox" name="intere<input type="submit" value="Register">
------------additional boxes here------------------
<input type="reset" value="Clear Form">
</form>
</div>sts[]" value="clothes">Clothes

Thank you,
Ed

I'm back...

I want to click on a link and display a group of images (thumbnail) in a CSS box on the same page.

For instance: lets say I have two links on my web page. I want to load different thumbnails in the same page depending upon which link I click.

Make sense?

I have added CSS using the CoffeeCup application & believe I have succeeded....with one exception.

1 - If one goes to www.TuscanHills.co.uk/css, the CSSs load..... excellent!
2 - If one follows a link, the new CSSs don't appear on the new page.
3 - If one then does a PAGE REFRESH, the CSSs appear.

.........tell me I've been stupid
.........tell me I've made the same error every beginner does
.........anything!

Just help!

This site..theres supposed to be a menu top-right. In IE it appears then dissappears when page finished loading!
freehotsms(dot)com
Html code can be viewed from the browser..heres my CSS-its quite messy and long! I think theres an JAVASCRIPT conflict but idk! THANKS..Darned IE..doesnt even support border radius
Code:

body {margin:0px;

    }
input.rad {padding:5px;
			background:#0bb9ff;
			
			color:#000000;
			font-size:12px;
			font-family:Sans-serif;
			text-align:center;}
#header {
       background:#ffffff;
       height:auto;
		border-bottom:5px solid #e71b11; 
		
				}
#inside {width:100%;
padding-top:0px;
           height:211px;
		   clear:right;
		 
       /*border-top:5px solid #e2e2e2;
	   border-left:5px solid #e2e2e2;
	   border-right:5px solid #e2e2e2;
	   -moz-border-radius: 1em 1em 1em 1em;*/
              margin-right:auto;
			  margin-left:auto;
			  
			  }
#infooter {height:20px;
          width:700px;
text-align:center;
margin:auto;
padding-top:10px;

}

#set {width:441px;
     margin-right:auto;
margin-left:auto;
background:url(images/info.png);
height:68px;
margin-top:5px;}	

td{font-family:arial;
font-size:13px;
  } 
#out {width:100%;
height:10px;
background:url(images/bottom.png);}

#rightlogin {
             
			 float:right;
			-moz-border-radius: 0em 0em .5em .5em;
			padding:5px;
			background:#f7f7f7;
			border-left:2px solid #e2e2e2;
			border-right:2px solid #e2e2e2;
			border-bottom:2px solid #e2e2e2;
			
			margin-right:80px;}
.right_ad{height:80px;
             width:auto;
			 float:right;
			 margin-top:auto;
			 margin-bottom:auto;
			
			
			
			
			margin-right:10px;}
			
.somepadding {padding-left:10px;
padding-right:10px;}
.eco{width:100%;
text-align:center;
padding-right:150px;
}

img.icon{width:60px; height:60px;padding-left:10px;padding-right:10px;}			
.center {margin-left:auto;
        margin-right:auto;
		width:468px;}
.accountbutton {
             
			 
			
			padding:5px;
			background:#0bb9ff;
			
			color:#000000;
			font-size:12px;
			font-family:Sans-serif;
			text-align:center;}
			
#button {height:17px;
             width:80px;
			 float:left;
			-moz-border-radius: 1em 1em 1em 1em;
			padding:5px;
			background:#0bb9ff;
			
			margin-right:10px;
			color:#000000;
			font-size:12px;
			font-family:Sans-serif;
			text-align:center;
			}
			
a.top:hover{text-decoration:none;
            color:#ffffff;
			font-style:strong;}
a.top:active{text-decoration:none;
            color:#ffffff;
			font-style:strong;}
a.top:link{text-decoration:none;
            color:#ffffff;
			font-style:strong;}
a.top:visited{text-decoration:none;
            color:#ffffff;
			font-style:strong;}
			
a.in:hover{text-decoration:underline;
            color: #448;
			font-style:strong;
			font-family:arial;
			font-size:13px;}
a.in:active{text-decoration:none;
            color: #448;
			font-style:strong;
			font-family:arial;
			font-size:13px;}
a.in:link{text-decoration:none;
            color: #448;
			font-style:strong;
			font-family:arial;
			font-size:13px;}
a.in:visited{text-decoration:none;
            color: #448;
			font-style:strong;
			font-family:arial;
			font-size:13px;}
			
a.tin:hover{text-decoration:underline;
            color: #448;
			font-style:strong;
			font-family:arial;
			}
a.tin:active{text-decoration:none;
            color: #448;
			font-style:strong;
			font-family:arial;
			}
a.tin:link{text-decoration:none;
            color: #448;
			font-style:strong;
			font-family:arial;
			}
a.tin:visited{text-decoration:none;
            color: #448;
			font-style:strong;
			font-family:arial;
		}
			
a.n:hover{text-decoration:underline;
            color:#ffffff;
			font-style:strong;}
a.n:active{text-decoration:none;
            color:#ffffff;
			font-style:strong;}
a.n:link{text-decoration:none;
            color:#ffffff;
			font-style:strong;}
a.n:visited{text-decoration:none;
            color:#ffffff;
			font-style:strong;}
			
			
#left_logo {width:487px;
           height:211px;
		   background:url(images/logo.png);
		   float:left;
		  
		   
		  
		   margin-left:8%;
		  }
#hold {width:600px;
float:left;
margin-left:346px;
}
#login {width:500px;
       margin-right:auto;
       margin-left:auto;
background:#f7f7f7;	 
-moz-border-radius: .5em .5em .5em .5em;
margin-bottom:10%;
margin-top:20px;
padding:5px;
border:2px solid #e2e2e2;
} 
#log {background:#f7f7f7;
padding:10px;
}
     
input.o {height:35px;
       width:300px;
	   font:28px arial;
	   border:1px solid #cecece;}
input.o:hover {height:35px;
       width:300px;
	   font:28px arial;
	   border:1px solid #ffd35b;
	   background:#feff9c;}
h2.login{
 font-family:Georgia;
	color:#4E443C;
	 text-transform: none; font-weight: 100;
font-size:35px;
margin-bottom:20px;
text-align:center;






color: #000;

text-shadow: 0px 1px 1px #fff;
margin-top:10px;
margin-bottom:10px;}

#menu_container {height:25px;
                padding:10px;
                border-top:3px solid #e2e2e2;
				width:auto;
				margin-right:10px;
				float:right;
				background:url(images/menub.png);
				-moz-border-radius: 0em 0em 1em 1em;
				border-bottom:1px solid #e2e2e2;
	   border-left:1px solid #e2e2e2;
	   border-right:1px solid #e2e2e2;
				}
				
				
.newsletter{background:#ffffff;
width:auto;
padding:8px;}

#menuright{height:25px;
padding-top:80px;
                padding:10px;
                background:url(images/rig.png);
				width:auto;
				   border-top:3px solid #e2e2e2;
				float:right;
				-moz-border-radius: 0em 0em 1em 1em;
				border-bottom:1px solid #e2e2e2;
	   border-left:1px solid #e2e2e2;
	   border-right:1px solid #e2e2e2;}
				
				
#menu_button {width:auto;
             height:30px;
			 background:#0bb9ff;
			 float:left;
			 color:#ffffff;
			 font-size:13px;
			 font-family:Sans-serif;
			 padding-top:10px;
			
			 padding-left:20px;
			 padding-right:20px;}
#maincont{width:950px;
         margin-right:auto;
		 margin-left:auto;
		
		 margin-bottom:10px;
		background:#f7f7f7;
		min-height:800px;
		 padding-left:10px;
		 padding-right:10px;
		 padding-top:0px;
		 border-top:2px solid #e2e2e2;
		 -moz-border-radius: 0em 0em .8em .8em;
		 border-left:2px solid #e2e2e2;
		 border-right:2px solid #e2e2e2;
		 border-bottom:2px solid #e2e2e2;
		  }
#bore {float:left;
      width:172px;
height:74px;
background:url(images/bore.png);
clear:right;
margin-top:98px;
margin-right:10px;
}
.boretext {margin-top:34px;
          text-align:center;
         font-family:Georgia bold;
color:#ffffff;
font-size:15px;}
		 
#rightcolumn {width:250px;
       background:#f7f7f7;
min-height:600px;
            padding-right:10px;
			
		
			float:right;
			
			
			margin-bottom:10px;}
#social{padding-top:10px;
padding-bottom:24px; width:190px; margin-right:auto; margin-left:auto;}
#centercolumn {width:655px;
            padding:10px;
			
		
			min-height:500px;
			float:left;
			height:auto;
		background:#f7f7f7;
			margin-bottom:10px;
		
			}
			
			
			
/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
background:#ffffff;
 margin-top:1em;
 min-height:500px;
 .6em .6em 0em 0em;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
 margin:0;
 padding:10px;
 background:#f7f7f7;
 font: bold 12px Verdana, sans-serif;
}

ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
  -moz-border-radius: .6em .6em 0em 0em;
}

ul.tabbernav li a
{
 padding:10px;
 margin-left: 3px;
  -moz-border-radius: .6em .6em 0em 0em;
 border-bottom: none;
 background: #DDE;
 text-decoration: none;
}

ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }

ul.tabbernav li a:hover
{
 color: #000;
 background: #AAE;
 border-color: #227;
  
}

ul.tabbernav li.tabberactive a
{
 background-color: #fff;

}
td.images {text-align:center; color:#448; font: bold 12px Verdana, sans-serif;}
ul.tabbernav li.tabberactive a:hover
{
 color: #000;
 background: white;
  -moz-border-radius: .6em .6em 0em 0em;
 
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
-moz-border-radius:.6em .6em .6em .6em;
 border-top:0;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}





       
			
		
			
			
			
#leftcolumn {
           margin-right:0px;
			
			background:#f7f7f7;
			
			min-height:500px;
			float:left;}
			
.intro {height:auto;
       border:2px solid #e2e2e2;
       background:#f7f7f7;
	   
	   margin:20px;}
.holdvideo {margin-left:auto;
width:400px;
margin-right:auto;}
	   
.int{width:450px;
       padding:10px;
       
	   
	   margin-right:auto;
	   margin-left:auto;}
	   
.testing {font-size:12px;
         color:blue;
		 float:right;
		 margin:6px;
		 font-family:Verdana;
		 
		 }
.anothercontain{width:350px;margin-right:auto;margin-left:auto;}
.containbutton {float:right;}
.containbuttonl {float:left;}
td.buttnreg {float:right;
margin:6px;
height:50;
           text-align:center;
           background:url(images/late.png);
		   border:3px solid #ffffff;
		   -moz-border-radius: 1em 1em 1em 1em;
		   padding-top:11px;
		   padding-bottom:11px;
		   width:180px;
		   color:#0261ab;
		   font-family:Verdana;
		   font-size:14px;
		   font-style:strong;
		   padding-right:6px;
		   padding-left:6px;}
		   
td.buttnreg:hover {float:right;
margin:6px;
height:50;
           text-align:center;
           background:url(images/late.png);
		   border:3px solid #ffffff;
		   -moz-border-radius: 1em 1em 1em 1em;
		   padding-top:11px;
		   padding-bottom:11px;
		   width:180px;
		   color:#ffffff;
		   font-family:Verdana;
		   font-size:14px;
		   font-style:strong;
		   padding-right:6px;
		   padding-left:6px;}
		   
		   
.scroll{overflow:auto;
        height:600px;}		   

     
p.red{
font-family:Serif bold;
text-shadow: 1px 1px 2px #fff;
   font-size:20px;
   color:#000;
  padding-bottom:6px;
  margin-bottom:5px;
   padding-top:6px;
   text-align:center;
   background:#f3f3f3;
   border:2px solid #e2e2e2;
   
  
   }
   
 p.black{text-shadow: 2px 2px 3px #818173;
font-family:arial;
   font-size:16px;
   color:#000;
  padding-bottom:10px;
  margin-bottom:5px;
   padding-top:16px;
   text-align:center;
   
  
   }
p{font-family:Verdana;
  font-size:13px;
  color:#000000;
  margin-top:0px;
  }

p.small{font-family:Sans-serif;
  font-size:12px;
  color:#5f5f55;
  line-height:160%;
  margin-top:0px;
  
  }
p.blue{color: #448; font: bold 14px Verdana, sans-serif;}
ul {font-family:arial;
  font-size:16px;
  line-height:15px;
  list-style-image: url(images/arrow.png);
  margin-right:7px;
  color:5f5f55;}
  
li {margin-top:7px;
  margin-bottom:7px;}
  
  
#footer {-moz-border-radius: 1em 1em 0em 0em;
        background:#f7f7f7;
        height:40px;
		clear:left;
		clear:right;
		border:2px solid #e2e2e2;
		width:970px;
		margin-right:auto;
		margin-left:auto;
        }
#contain {width:900px;
          margin-left:auto;
          margin-right:auto;}

 
table.fh {border-collapse:collapse;
        font-size:13px; 
	    color:#ffffff;
       
        text-decoration:none;
        width:950px;	   
	     }

.foothead { border-bottom:1px solid #f3f3f3;
           height:30px;

        }

tr.top {padding-top:4px;
 font: strong Georgia,serif;
 font-size:15px;
}

th.top {height:30px;
padding-right:50px;

text-align:left;
font: strong Georgia,serif;
font-size:15px;}

td.t {padding-right:50px;
      font-style:strong;

padding:2px;
      }