/* CSS Reset, nem muszáj, de ártani nem árt */  
{  
    margin: 0;  
    padding: 0;  
} 

/* Itt mondjuk el a böngészőnek, hogy a html5 element-eket block-ként kezelje */  
html, body, h1, form, fieldset, legend, ol {
    display: block;
    margin-left: auto;
    margin-right: auto;

}

body { /* definiáljuk az alaphátteret és még pár dolgot */
	 /* háttér szín */
	color: #003300; ; /* betű szín */
	padding: 0;
	font-family: Crimson Text, serif;
	}
	
#main-container{
	width:400px;
	margin:30px auto;
	
}

	h1 { /* az oldal címének csinosítása */
		font-size: 28px; /* betűméret */
		font-family: font-family: Monotype Corsiva, serif;
		text-align: center; /* igazítás */
		}
	
	form#fizetes {
	padding: 45px 15px;
	
		/* Form háttér és lekerekítés 
	background: rgb(188, 156, 54);
background: -moz-linear-gradient(30deg, rgb(188, 156, 54) 30%, rgb(249, 245, 179) 70%);
background: -webkit-linear-gradient(30deg, rgb(188, 156, 54) 30%, rgb(249, 245, 179) 70%);
background: -o-linear-gradient(30deg, rgb(188, 156, 54) 30%, rgb(249, 245, 179) 70%);
background: -ms-linear-gradient(30deg, rgb(188, 156, 54) 30%, rgb(249, 245, 179) 70%);
background: linear-gradient(120deg, rgb(188, 156, 54) 30%, rgb(249, 245, 179) 70%);*/

	
	border-style: ridge;
    border-width: 5px;
	border-color: #A4966B;
	/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */

	
	
		-moz-border-radius: 50px 8px; /* ha kerek akkor szép */
		-webkit-border-radius: 50px 8px;
		-khtml-border-radius: 50px 8px;
		border-radius: 50px 8px;
		counter-reset: fieldsets; /* nullázzuk a számlálót */ 
		padding: 40px 10px; /* a form-ot körülvevő rész paddingját beállítjuk */
		width: 350px; /* állítunk egy szélességet */
		}
		
		form#fizetes fieldset { /* igazítjuk a számlálót */
			border: none;
			margin-bottom: 5px;
			}

		form#fizetes legend { /* számlálóhoz tartozó szöveg formázása */
				color: #3b4e8c;
				font-size: 16px;
				font-weight: bold;
				}
				
		form#fizetes > fieldset > legend:before { /* számláló utáni szöveg formázása, hogy mégis mit írjon ki */
					content:  counter(fieldsets)"." " Lépés:"; /* ezt érdemes kipróbálni, állítgassátok, csak úgy lehet memorizálni */
					counter-increment: fieldsets; /* mikor is nőveljük a számlálónkat ? Hát persze, fieldsets-enként */
					}
				
		form#fizetes ol li { /* megformázzuk a form egyes sorait, és a körülvevő területet */
				-moz-border-radius: 10px 10px 10px 10px; /* ismét kerekítések, mert szeretjük a kerek formákat */
				-webkit-border-radius: 10px 5px 10px 5px;
				-khtml-border-radius: 10px 5px 10px 5px;
				border-radius: 10px 5px 10px 5px;
				

				
				line-height: 20px; /* sor magasság definiálása */
				list-style: none; /* hozzá tartozó stílus */
				padding: 3px 1px; /* egy kis igazítás */
				margin-bottom: 3px;
					
				}
							
		form#fizetes ol ol li { /* Fizetés módja beviteli rész igazítása */
					background: none;
					border: none;
					float: left;
					}
			
		form#fizetes label { /* a form cimkéinek igazítása */
				float: left;
				font-size: 16px;
				width: 80px;
				color: #000;
					
				}
				
		form#fizetes fieldset fieldset label { /* fizetés módja beviteli rész cimkéje, annak csinosítása */
				background:none no-repeat left 60%;
				line-height: 20px;
				padding: 0 0 0 30px;
				width: 30px;
				}
					
	form#fizetes input:not([type=radio]), /* Fizetés módja rész radio típusának definiálása */
	form#fizetes textarea { /* beviteli mező kinézetének/formázásának definiálása */
				background:#FFFFFF ;
				border-style: ridge;
    border-width: 3px;
	border-color: #A4966B;
				-moz-border-radius: 10px 5px; /* újabb kerekítés.. */
				-webkit-border-radius: 10px 5px;
				-khtml-border-radius: 10px 5px;
				border-radius: 10px 5px;
				font: normal 13px Georgia, serif;
				outline: none;
				padding: 5px;
				width: 150px;
				cursor: url(img/penc.png), auto;
				}
				
	form#fizetes input[type=radio] { /* Fizetés módja radio gomb helyzete */
					float: left;
					margin-right: 5px;
					}
						
	form#fizetes button { /* megveszem gomb alaptulajdonságai */
				background: #4b676e; 
				border: none;
				-moz-border-radius: 40px; /* még mindig kerek */ 
				-webkit-border-radius: 40px;
				-khtml-border-radius: 40px;
				border-radius: 40px;
				color: #ffffff;
				display: block;
				font: 18px Georgia, serif;
				letter-spacing: 2px; /*betűk közötti hely növelése */
				margin: auto;
				padding: 7px 25px;
				text-transform: uppercase; /* írjuk át nagybetűsre bármi is kerül a gombra */
				}
					
	form#fizetes button:hover { /* megveszem gomb egér felette tulajdonságait */
					background: #384d52;
					cursor: cell; /*ez csak egy kis példa, hogy a kurzor kinézetén is tudunk változtatni. */
					}