@charset "utf-8";
/*
#f4f2e4 - jasne tlo
#e1dfd2 - ramka box
#ffd700 - head box
#ffc000 - link kolor
*/

html {
	width:100%;
	height:100.1%;
	font-size:100.1%;
}
body,h1,h2,h3,h4,h5,h6,p,form,fieldset,ul,img,table {
	margin:0;
	padding:0;
}
body  {
	font:.7em Arial, Helvetica, sans-serif;
	background:url(../images/bg.jpg) top left repeat-x #eef2d7;
	line-height:1.5em; 
	letter-spacing:1px;
	color: #000000;
}

/* GENERAL
--------------------------------------------------*/
h1,h2,h3,h4,h5,h6,p,ul,form,.greyLine{
	padding-bottom:1.2em;
}
h1{
	font-size:1.25em;
	background-color:#004710;	
	border:solid 1px #e1dfd2;
	border-bottom:none;
	padding:.65em 10px .65em 10px;
	color:#ffffff;
}
h3{
	font-size:1.1em;
}
h4{
	font-size:1em;
}
a{
	color:#fe000b;
	text-decoration:none;
}
a.ab{
	color:#000000;
}
a:hover{
	text-decoration:underline;
}
a img{
	border:none;
}	
p{
	
}
u{
	font-size:11px;
}
font{
	font-size:1em;
}
ul{
	list-style:square;
	padding-left:1.5em;
}
ul li{
	padding-left:1.5em;
}
.dist{

}
.clear{
	clear:both;
	line-height:1px;
	height:2px;	
	font-size:1px;
}
.center{
	text-align:center;
}
.tleft{
	text-align:left;
}
.tright{
	text-align:right;
}
.just {
	text-align:justify;
}
.left{
	float:left;
}
.right{
	float:right;
}
.noMargin{
	margin:0;
	padding:0;
}
.top{
	padding-top:1.2em;
}
.topm{
	margint-top:1.2em;
}	
.cl{
	clear:left;
}
.cb{
	clear:both;
}
.smallFont {
	font-size:.8em;
}
.whiteBox{
	border:solid 1px #e1dfd2;
	background-color:#FFFFFF;
	margin-bottom:10px;
	padding:10px;
	min-height:400px;
}
img.withBorder{
	border:solid 4px #004710;
	margin:0 10px 10px 0;
}
.greyLine{
	border-top:solid 1px #e1dfd2;
}

/* CONTAINER
--------------------------------------------------*/
#container { 
	width: 960px;  
	margin: 0 auto; 
	position:relative;
	padding-bottom:10px;
} 
#popup{
	display:none;
	width:937px;
	height:2em;
	border:solid 2px #FFFFFF;
	background-color:#da251d;
	color:#ffffff;
	font-weight:800;
	padding:10px;
}

/* HEADER
--------------------------------------------------*/
#header { 
	width:100%;
	height:270px;
	background:url(../images/headDivider.gif) bottom center no-repeat;*/
	position:relative;
} 

#logoMsp{
	width:260px;
	height:106px;
	background:url(../images/logoMsp.png) top left no-repeat;
}

#subaru{
	width:310px;
	height:162px;
	background:url(../images/subaru2.png) bottom left no-repeat;
}

/*#subaruLeftShadow{
	width:20px;
	height:78px;
	background:url(../images/subaruLeftShadow.png) top left no-repeat;
	position:absolute;
	top:188px;
	left:-20px;
}*/
#subaruLeftShadow{
	width:20px;
	height:158px;
	background:url(../images/subaruLeftShadow2.png) top left no-repeat;
	position:absolute;
	top:110px;
	left:-20px;
}

#olejeMotul{
	width:420px;
	height:75px;
	background:url(../images/olejeMotul.png) top left no-repeat;
	position:absolute;
	top:62px;
	left:270px;
}

#logoMotul{
	width:234px;
	height:167px;
	background:url(../images/logoCastrol.png) top left no-repeat;
	position:absolute;
	top:50px;
	right:0px;
}

/* HEADER MENU
--------------------------------------------------*/
#headerMenu{
	position:absolute;
	top:20px;
	right:0;
}

.headerMenuIcons{
	padding:0 3px 0 3px;
}

#headerMenu ul{
	margin:0;
	padding:0;
	float:left;
	margin-right:20px;
	display:inline;/* fix double margin in ie6*/
	list-style:none;
}

#headerMenu ul li{
	float:left;
	margin:0;
	padding:0;
}

#headerMenu ul li a{
	height:28px;
	background-position:5px 5px;
	display:block;
	padding:0 5px 0 5px;
}
#headerMenu ul li a span{
	display:none;
}

#headerMenu ul li a:hover{
	background-position:5px -17px;
}

#hm1{
	background:url(../images/menu/glowna.gif) top left no-repeat;
	width:108px;
}

#hm2{
	background:url(../images/menu/koszyk.gif) top left no-repeat;
	width:44px;
}

#hm3{
	background:url(../images/menu/promocje.gif) top left no-repeat;
	width:61px;
}

#hm4{
	background:url(../images/menu/galeria.gif) top left no-repeat;
	width:48px;
}

#hm5{
	background:url(../images/menu/kontakt.gif) top left no-repeat;
	width:54px;
}

#hm6{
	background:url(../images/menu/regulamin.gif) top left no-repeat;
	width:67px;
}

#hm7{
	background:url(../images/menu/platnosci.gif) top left no-repeat;
	width:63px;
}

#hm8{
	background:url(../images/menu/klienci.gif) top left no-repeat;
	width:41px;
}

/* COMMON CONTENT
--------------------------------------------------*/
.buyNow{
	position:relative;
	bottom:-6px;
	left:5px;
}

/* LEFTCOLUMN
--------------------------------------------------*/
#leftColumn {
	float: left;
	width: 215px;
	padding-top:8px;
}
#filmFoot{
	padding:0;
}
#filmFlashContainer{
	width:213px;
	height:160px;
}
#searchForm{
	padding:0;
}
#searchForm input, #newsletterForm input{
	width:189px;
}
#searchForm select{
	width:193px;
}
#searchForm .btn, #newsletterForm .btn{
	width:75px;
	border:solid 1px #ffffff;
	background-color:#004710;	
	color:#ffffff;
}


/* RIGHTCOLUMN
--------------------------------------------------*/
#rightColumn {
	float: right;
	width: 215px;
	padding-top:8px;
}

/* MAINCONTENT
--------------------------------------------------*/
#mainContent { 
	margin: 0 215px;
	padding:8px 10px 0px 10px;
	/*Przy display:block w firefoxie: umieszczenie elementu np. div z clear:both spowoduje przesuniecie calego kotnentu na sam dol, table-cell to naprawia, trzeba też określić szerokość albo rozciągnąc*/
	display:table-cell;
	width:510px;
	overflow:hidden;
} 

/* FOOTER
--------------------------------------------------*/
#footer, #footer a{
	
}

#footer { 
	background:url(../images/footerBg.gif) top left repeat-y #FFFFFF;
	border:solid 1px #e1dfd2;
	height:2.5em;
	position:relative;
	padding-top:1em;
} 

#footerLeftColumn{
	float:left;
	width:215px;
	text-align:center;
}
#footerLeftColumn a{
	color:#ffffff;
}

#footer ul{
	margin:0;
	padding:0;
	float:left;
	display:inline;
	margin-left:20px;
	list-style:none;
}

#footer ul li{
	float:left;
	margin:0;
	padding:0;
}

#footer ul li a{
	padding:0 5px;	
	border-left:solid 1px #cccccc;
}

#footer ul li a.first{
	border:none;
}

#w2b{
	float:right;
}

#links{
	text-align:center;
	font-size:10px;	
	padding-top:7px;
}
#links a{
	color:#333333;
}

/* BOX
--------------------------------------------------*/
.box, .productBox{
	width:213px;
	border:solid 1px #e1dfd2;
	background-color:#FFFFFF;
	margin-bottom:10px;
	overflow:hidden;
}
.box .head{
	height:36px;
	background-color:#004710;
}
.box .head .left{	
	padding-left:7px;
}
.box .firstRow, .box .row, .box .foot{
	padding:0 10px;
}
#categories div.row, #categories div.firstRow, #categories div.foot{
	padding-right:0;
}
.box .firstRow{
	background:url(../images/box/rowBg.gif) bottom left no-repeat;
	padding-top:9px;
	padding-bottom:15px;
}
.box .row, .productBox .row{	
	background:url(../images/box/rowBg.gif) bottom left no-repeat;
	padding-top:5px;
	padding-bottom:15px;
}
.box .foot, .box .footNoBP{
	background:url(../images/box/footBg.gif) bottom left repeat-x;
	padding-top:5px;
	padding-bottom:13px;
}
.box .footNoBP{
	padding-bottom:2px;
}
.box .footNoBP img{
	margin-bottom:-4px;
}
*:first-child+html .box .footNoBP img{
	margin-bottom:0px;
}

.productBox{
	width:152px;
	float:left;
	margin:0 12px 12px 0px;
	border-bottom:none;
	position:relative;
}
.lastProductBox{
	margin-right:0;
}
.productBox .head{
	height:3.5em;
	padding-top:.2em;
	text-align:center;	
	background:url(../images/box/productBoxHeadBg.gif) bottom left no-repeat #004710;
	color:#ffffff;
}
.productBox .head a{
	color:#ffffff;
}
.productBox .newest{
	background:url(../images/box/productBoxNewBg.gif) bottom right no-repeat #004710;
}
.productBox .promotion{
	background:url(../images/box/productBoxPromoBg.gif) bottom right no-repeat #004710;
}
.productBox a{
	color:#000000;
}
.productBox .row{
	text-align:center;
	background:url(../images/box/productBoxRowBg.gif) bottom left no-repeat;
	position:relative;
	width:152px;
}
.productBox .desc{
	min-height:8em;
}
.productBox .foot{	
	background:url(../images/box/productBoxFootBg.gif) bottom left no-repeat;		
	padding:0 10px;
}
.productBox .foot b{
	padding-top:5px;
}

/* TABLE
--------------------------------------------------*/
table{
	width:100%;
	text-align:center;
	border-collapse:collapse;
	margin-bottom:1.2em;
}
table tr{
	padding:0;
	background-color:#f9f9f9;
}
table tr td{
	padding:5px 0;
	border-bottom:solid 1px #e1dfd2;
}
table tr th{
	font-weight:bold;
	padding:5px 0;
	background-color:#cccccc;
}
table tr .odd{
	background-color:
}
table .verySmallImg{
	height:30px;
}
table .verySmallInput{
	width:20px;
	padding:0;
	margin:0;
}
table tr.odd{
	background-color:#ffffff;
}

form .btn{
	border:solid 1px #e1dfd2;
	background-color:#004710;
	width:auto;
	color:#ffffff;
}
form .btn:hover{
	background-color:#ffd700;
	color:#004710;
}
a.abtn{
	border:solid 1px #e1dfd2;
	background-color:#ffd700;
	color:#333333;
	padding:1px 5px 1px 5px;
	font-size:1.2em;
	letter-spacing:0;
}
*:first-child+html a.abtn{
	position:relative;
	top:-3px;
	padding:1px 5px 3px 5px;
}
a.abtn:hover {
	text-decoration:none;
}

/* FORM
--------------------------------------------------*/
form input, form select, form textarea{
	border:solid 1px #f3f4ef;
	border-top:solid 1px #caccbf;
	color:#8c8c8c;
}
form .element input, form .element select, form .element textarea{
	width:250px;
}
form label{
	background:url(../images/labelArrow.gif) left center no-repeat;
	padding-left:20px;
	display:block;
	float:left;
	text-align:left;
}

form .element{
	padding-bottom:10px;
	text-align:right;
	clear:both;
}
form .errorNote{
	color:#004710;
	text-align:right;
}
form .required{
	color:#004710;
}
form .submit input{
	width:auto;
	color:#4a3800;
	border:solid 1px #e1dfd2;
}

.radio{
	height:11px;
}

/* PRODUCT DETAILS
--------------------------------------------------*/
#magnifyingGlass{
	display:block;
	position:absolute;
	top:0px;
	right:0px;
}

/* REGUALTIONS
--------------------------------------------------*/
#regulations{
	list-style:upper-roman;
	text-align:justify;
	font-weight:bold;
	margin-left:10px;
}
#regulations ul{
	list-style:decimal;
	font-weight:normal;
}

#regulations li{
	padding-left:0;
	text-indent:0;
}

#regulations li ul li ul{
	list-style:square;
	padding-bottom:0;
}

/* KONTAKT
--------------------------------------------------*/
#kontactForm{

}
#kontactForm p input, #kontactForm p textarea{
	display:block;
	width:99%;
}
#kontactForm p textarea {
	height:10em;
}
#kontactForm p b{
	background:url(../images/labelArrow.gif) left center no-repeat;
	padding-left:15px;
}

/* GALLERIES
--------------------------------------------------*/
a.galleryImageContainer{
	width:100px;
	height:90px;
	overflow:hidden;
	border:solid 1px #e1dfd2;
	padding:4px;	
	margin:10px 10px 0 0;
	display:block;
	float:left;
}

a.galleryImageContainer:hover{
	border-color:#ffd700;
	background-color:#f4f2e4;
}