html, body, ul, li, h1, h2, h3, h4, form { margin: 0px;	padding: 0px;	list-style: none; }
body, td { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; vertical-align:top; margin-top:8px; color:#333333;}
object { display:block; border:0px; } img {border:0px; }
p { margin-top:0px; margin-bottom:10px; font-size: 13px; line-height:130%}
a { text-decoration:none;}
a:link { color: #003366; }
a:visited { color: #003366; }
a:hover { color: red;}
a:active { color: #003366; }
#banner {height: 173px; background-image:url(images/hd-safety-matters.jpg); background-repeat:no-repeat}

.h { display: none }
.v { display: block }

#logo {
	margin-left:28px;
	padding-top:74px;
	width:262px;
	height:34px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:17px;
	color:white;
	text-align:center;
	font-weight:bold;
}
#logo a, #logo a:hover, #logo a:visited, #logo a:active { color:white}

#wrapper { width: 960px; margin: 0px auto; position:relative}
#content { background: white; background-image:url(images/bg-menu-left.gif); background-repeat:repeat-y; background-position:left; padding-top:0px; 
width:100%; 
float:right; /* powoduje ze stopka jest wypychana na dol poza blok content (lepiej niz clear:both w stopce)*/
/* bez float content mimo ze zawiera tresc i menu to sa one wyplyniete poza content (bo same zawieraja float) i footer tez wchodzi wizualnie na content; 
float tu powoduje ze content obejmuje swoja faktyczna zawartosc a co za tym idzie wypycha reszte (footer) na zewnatrz jak naturalny blok*/
}

/*  960px = 62(margin-left) + 193(menu column) + (width, padding, margin of content column)     */

#content-column{
padding:20px 45px 5px 20px; /* min 1px padding zapobiega wychodzeniu p margin outside div box */
padding-bottom: 25px;
background:white; width:635px; float:right; /* alternatywnie zamiast width mozna podac margin-right:200px; */
background-image:url(images/safety-bar.gif); background-repeat: repeat-x; background-position:bottom left;
}

#content-column ul {padding:5px; padding-left:10px; margin:5px; margin-top:1px;}
#content-column li {list-style-type: square; color: #003399; line-height: 120%; padding: 1px 0px 4px 0px; margin:0px}

.subtitle {padding: 2px 0px 2px 2px; font-size:12px;}

/* MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU  */
#menu-column {margin-left:62px; width:193px;}

/*.menu-section { width:193px; margin-top:80px;}  alternatywnie zamiast width mozna podac margin-left: -200px; */
#menu-column ul { background: url(images/menu_bg.jpg) top; border-top: 1px solid white; border-bottom: 1px solid white; margin:20px 0px 20px 0px;}
#menu-column li {}
#menu-column a { font-size:14px; font-weight:bold; color:white; display:block; padding: 10px; width:173px; /* aby w IE widzialo background jako blok na calej dlugosci a nie tylko dlugosci linku slowa*/
border-top: 1px solid white; border-bottom: 1px solid white}
#menu-column a:hover { background: #d41f26}

h1 { color: #003366; font-size:21px; margin-bottom:20px; font-weight:normal; letter-spacing:1px; font-family:"Times New Roman", Times, serif}
h2, h2 a, h2 a:visited { color: #003366; font-size:20px; text-align:center; margin-bottom:0px; font-weight:normal; letter-spacing:1px; font-family:"Times New Roman", Times, serif}
h2 a:hover { color: red}
h3 { font-family:"Times New Roman", Times, serif; font-size:22px; color: #003366; font-weight:normal; margin-bottom:10px}
/* footer */
#footer{
clear: both; /* tu ustawia dla footera jego nieopływalność a co ważniejsze powodując że będzie on zawsze na dole i żaden div na niego nie wejdzie */
width: 100%;
background: url(images/footer-safety-matters.gif) no-repeat center;
color: #FFF;
text-align: center;

height: 30px;
vertical-align:middle;
line-height:30px;  /*  najlepszy sposob na wyrownanie w pionie (bez bawienia sie z paddingiem) */
}

#footer a{
color: #FFFF80;
}

li strong, b { color: #003366; font-family: Arial, Helvetica, sans-serif;}

input, textarea { background-color:#FFFFCC}