/* jqueri általános css.  ------- */
body {font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; margin: 0; background-color: #ccc; }
#container {width: 950px; padding: 2px; margin-right: auto; margin-left: auto;}

#fejlec {width: 940px; border-bottom: 2px solid #fc3; margin-left: 2px;  border-bottom: 2px solid #fc3;}
#jelkep {float: left; width: 100px; margin-left: 5px;}
#cim {width: 830px; }

h1{font-size: 33px; text-align: center; color: #363;}
h2 {font-family: Arial; font-size: 30px; text-align: center; border-bottom: 2px solid #666;}
h3 {font-family: Arial; font-size: 27px;}
h4 {font-family: Arial; font-size: 24px;}
h5 {font-family: Arial; font-size: 21px;}
h6 {font-family: Arial; font-size: 18px;} 

p {font-family: Arial; font-size: 16px; color: #000; line-height:130%;}
pre{font-family: Arial; font-size: 13px; color: #000; line-height:130%;}
strong {font-weight: bold;}
em {font-style: italic;}
li {font-family: Arial; font-size: 13px; color: #000;}

.kozepre {text-align: center;}
.balra {float: left; text-align: left;}
.jobbra {text-align: right; padding-right: 50px;}
.ameret10 {font-size: 10px; font-style: normal;}
.ameret11 {font-size: 11px; font-style: normal;}
.ameret12 {font-size: 12px; font-style: normal;}
.ameret14 {font-size: 14px; font-style: normal;}
.ameret16 {font-size: 16px; font-style: normal;}
.ameret22 {font-size: 22px; font-style: normal;}

.tkeret {width: 98.5%; border: 1px solid black; padding: 5px; background-color: #ffc;}
.peldah{background-color: #ffc;}
.bemh{background-color:  #ccff33; padding-right: 2px; padding-left: 2px;}

.feher {font-weight: bold; color: white;}
.piros {font-weight: bold; color: red;}
.zold {font-weight: bold; color: green;}
.kek {font-weight: bold; color: blue;}
.klila {font-weight: bold; color: blueviolet;}
.sbarna {font-weight: bold; color: #960;}
.csoki {font-weight: bold; color: chocolate;}
.sarga {font-weight: bold; color: yellow;}
.pirosh{ background-color: red; padding-right: 2px; padding-left: 2px;}
.piroshb{ background-color: red; color: white; padding-right: 2px; padding-left: 2px;}
.sargah{ background-color: yellow; padding-right: 2px; padding-left: 2px;}
.kekhb{ background-color: blue; color: white; padding-right: 2px; padding-left: 2px;}
.vzoldh{ background-color:  #99ff00;}
.vkekh{ background-color:  #99ff99; padding-right: 2px; padding-left: 2px;}
.feketeh{ background-color: black; color: #fff; padding-right: 2px; padding-left: 2px;}
.cianh{ background-color: aqua; padding-right: 2px; padding-left: 2px;}


/* Táblázatokhoz meghatározások Pl: 79=790px ----- 3=300px--- stb.  silver*/

.tabla100 {width: 100%; border-collapse: separate; border-spacing: 2px; border: 4px inset #ffc;  margin-left: 5px; background-color: white;}
.tabla100 th {font-size: 15px; border: 1px solid black;}
.tabla100 td {font-size: 14px; border: 1px solid black; padding-left: 5px;}




/* jqueri bemutatók szemléltetéséhez css.  ------- */

.szemlelteto * { display: block; border: 2px solid lightgrey; font-size:12px; color: blue; padding: 3px; margin: 5px;}
.szemlelteto span, .szemlelteto strong{background-color: #FFFACD;}
.szemlelteto ul{background-color: yellow;}
.szemlelteto ol{background-color: pink;}
.szemlelteto li{background-color: goldenrod;}
.szemlelteto p{background-color: Gainsboro;}
.szemlelteto pre{background-color: Gainsboro;}
.szemlelteto form{background-color: #FFFACD; margin-top: 30px;}
.szemlelteto table{background-color: lightgrey;}
.szemlelteto tr{background-color: wheat;}
.szemlelteto td{background-color: #FFFACD; border: 2px solid lightgrey; font-size:12px;}
.szemlelteto a{background-color: yellow;}

/* Táblázat a bemutatóhoz.*/
.jqerytabla {width: 99.5%; border-collapse: separate; border-spacing: 2px; border: 4px inset #ffc;  margin-left: 2px; background-color: white;}
.jqerytabla th {font-size: 15px; border: 1px solid black;}
.jqerytabla td {font-size: 14px; border: 1px solid black; padding-left: 5px;}
.jqerytabla p {font-size: 12px;}


			/* A p elemet helyettesítő, h6-os elemekhez*/
.ph6{margin: 2px; font-weight:normal; font-size:14px;}
.plink1{padding: 5px; background-color: orange;}

         /*button gomg imitálására*/
#span_button{padding: 5px; border: 4px inset black; background-color: #ccc;}

/* 03. témakörhöz. Szelektorok bemutatójához*/
#Szcontainer {width: 1050px; padding: 2px; margin-right: auto; margin-left: auto;}
#Szelektortabla {width: 99.5%; border-collapse: separate; border-spacing: 2px; border: 4px inset #ffc;  margin-left: 2px; background-color: white;}

/* delay  témakör */
.fading{width: 100%; height:110px; margin-bottom:5px;}
#dv1 {width: 98%;  padding: 2px; background-color: #ffc;}
#dv2 {width: 98%;  padding: 2px; background-color: #fcc;}
#dv3 {width: 98%;  padding: 2px; background-color: #cfc;}



/* Áthelyezések: appendTo(); prependTo(); insertAfter(); insertBefore(); */
.idehelyez{width: 100%;  height: 150px; padding-top: 50px; background-color: #ffc;}
#ide01{border: none; text-align: center;}

/* --------------------------------------------------------------------------------------------------------------- */
/* Wrap témakörökhöz,  becsomagolás áthelyezés*/ 
#container_wrap {width: 950px; padding-top: 15px; margin-right: auto; margin-left: auto;}
#wszulo{width: 90%; padding: 15px; border: 1px solid black; background-color: #ffc;}
.wgyermek{width: 85%;  margin-left: 19px;padding: 15px; border: 1px solid black; background-color: #fcf;}

#szulo{width: 99%; border: 1px solid black; background-color: #ffc;}
#szulo p{margin-left:20px;}
.szulo{margin: 0.01px; padding: 0.01px;}
.gyermek{width: 860px;  margin-left: 19px;padding: 15px; border: 1px solid black; background-color: #fcf;}

	/* Következő position:absolute; container_wrap akkor kell, ha az  offsetParent() vizuális megtekintését is itt teszteljük
			#container_wrap {width: 950px; position:absolute; top: 30px; left: 30px;} */
/* --------------------------------------------------------------------------------------------------------------- */


/* attr prop bemutatóhoz.*/
.plink1{padding: 5px; background-color: orange;}
.attrfotodiv{height: 150px; border:none;}

/* jquery 15 témakörhoz*/
.terulet{width: 300px;  padding: 5px; background-color: orange;}
.class01{color: red; background-color: yellow;}
#klikkalert{width: 95%;  padding: 5px;  border: 2px solid red; background-color: orange;}
.keykod{width:95%; height:95px; border:2px solid red; background-color:  orange;}
#JSkod, #jQerykod{font-size: 25px; font-weight: bold; text-align: center;}
/* mouse egér esemény témakör*/
#ev01{width: 90%; padding:5%; border: 1px solid black; background-color: #cfc;}
#epoz{width:100%; height:95px; border:2px solid black; background-color: goldenrod;}
#egerposition{font-size: 25pt; font-weight: bold;}

/* jquery 25 témakörhoz*/
/* A slide() témakör.*/
.slide_animacio{width: 100%; height: 300px;}
#slide{width: 99%; height: 300px; margin-top: 0.1px; padding: 0.1px; background-color: green;}
#slide p{color: yellow;}

/* A stop() témakör.*/
.stop_animacio{width: 100%; height: 300px;}
#stop{width: 99%; height: 300px; margin-top: 0.1px; padding: 0.1px; background-color: green;}
#stop p{color: yellow;}
/* ------------------------------------------------------------------- */

.divhide {width: 98%; height: 200px; margin-top: 20px; margin-bottom: 20px; padding: 0.1px;}
.div01 { padding: 15px; background-color: #cfc;}

/*Láthatóság témakör*/
.td_fading{width: 25%; height:160px;}
#fad01 {padding: 5px; background-color: #ffc;}
#fad02 {padding: 5px; background-color: #fcc;}
#fad03 {padding: 5px; background-color: #cfc;}
#fad04 {padding: 5px; background-color: orange;}

/* Terület mozgatása animate() témakör.*/
.animacio01{width: 100%; height: 100px;}
#dia{width: 99%; height: 100px; margin-top: 0.1px; padding: 0.1px; background-color: green;}
.animacio02{width: 300px; height: 300px; border:2px solid black;}
#dia02{width:80px; height: 80px; margin-top: 0.01px; padding: 0.01px; background-color: green;}

/* Animáció ismétlése.*/
.return_animacio{width: 100%; height: 300px;}
#vissza{width: 98%; height: 300px; margin-top: 0.1px; padding: 0.1px; background-color: green;}
#vissza p{color: yellow;}


/* jquery 30. témakörhoz*/
/* offsetParent() témakörhoz 3db container kell. Eredetivel azonos+ háttérszínt kap, és class lesz.   Wheat  goldenrod*/
.container01 {width: 950px; padding: 2px; margin-right: auto; margin-left: auto; background-color: #FFFACD;}
.container02 {width: 950px; padding: 2px; margin-right: auto; margin-left: auto; background-color: goldenrod;}
.container03 {width: 950px; padding: 2px; margin-right: auto; margin-left: auto; background-color: white;}


/* -- next-prev-siblings*/
.szomszed01 *{  display: block; border: 2px solid lightgrey; color: blue; padding: 1px; margin: 5px; }
.szomszed01 li, .szomszed01 p, .szomszed01 pre{background-color: yellow;}
.szomszed02 *{  display: block; border: 2px solid lightgrey; color: blue; padding: 1px; margin: 5px; }
.szomszed02 li, .szomszed02 p, .szomszed02 pre{background-color: yellow;}
.siblings *{  display: block; border: 2px solid lightgrey; color: blue; padding: 1px; margin: 5px; }
.siblings h4, .siblings h5, .siblings p, .siblings pre{ font-size: 12px; background-color: yellow;}