html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  /* font: inherit;   */
  font: Arial,sans-serif;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, menu, nav, section, main {
  display: block;
}

article {
    position: relative;
}

body {
    background: #38424c url(../img/Festo_Didactic_002.jpg) no-repeat center top;
    font-size: 16px;
    font-family: Arial,sans-serif;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.kiemelt {
    font-weight: bold;
}

.megjegyzes {
    font-size: 0.7em;
}

#befoglalo {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;  
    text-align: left;     
    z-index: 1;
}

header {
    min-height: 1.56em;
    margin: 10.42% 0 0;
    padding: 0 0.6em 0.5em 0.6em;
    position: relative;
    z-index: 3;
}

header div#contener {
    margin-right: 105px; 
    
}

header div#contener h1 {
    display: inline-block;
    margin-right: 1em;
    margin-bottom: 0.5em;
    padding: 0.3em;
    font-weight: bold;
    background-color: #DCEBF6;     
    border: 2px solid #0091DC;
}

header div#contener h1 span {
    color: red;
    background-color: yellow;
}

header div.logon {
    background: url("../img/icon_buddy.gif") no-repeat scroll 0 5px rgba(0, 0, 0, 0);
    display: inline-block;
    padding: 0 0 0 12px;
    margin: 0 auto 0 auto;
}

header div.logon a {
    display: inline-block;
    padding: 0.5em 1em 0.5em 14px;
    margin-left: 1em;
    color: #000000;
    font-weight: bold;
    font-size: 0.8em;
    /* background-position: 0px 10px;    */
}

div#logo {
    position: absolute;
    right: 20px;
    /* top: 10.82%;    */
}

div#logo p {
    text-align: center;
    font-weight: bold;
    color: #0091DC; 
    font-size: 1.2em;
    background-color: yellow;
}

#content {
    background-color: #FFFFFF;
    padding: 0 0.5em 1em 0.5em;
    min-height: 15em;
}

#prim_nav {
    box-sizing: border-box;
    background-color: #FFFFFF;
/*    padding: 0 0.6em 0em 0.6em;  */             
    border-bottom: 1px solid #ccc;  
    border-left: 1.2em solid #FFFFFF; 
    border-right: 1.2em solid #FFFFFF;      
}

nav ul {
    margin-left: 200px;
    list-style-type: none;
}

nav ul li {
    display: inline-block;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    /* float: left;        */
    height: 1.8em;
    padding: 1px 0 0;
    color: #000;
    font-family: Arial,sans-serif;
    margin: 0.7em 0 -1px 0 ;
}

nav ul li.current {
    background-color: #fff;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding-top: 1px;
}

nav a {
    text-decoration: none;
    display: block;
    padding: 6px 7px 6px 7px;
    color: #666;
    font-size: 12px;
    font-weight: bold;
    line-height: 15px;
}

nav ul li.current a {
    color: #0091dc;
    padding: 6px 7px 6px 7px;
}

nav ul li.inaktiv a {
    color: #CCCCCC;
    padding: 6px 7px 6px 7px;
}

#sec_nav {
    clear: left;
    float: left;
    margin: 0 30px 0 0;
    padding: 27px 0 0;
    width: 190px;
}

#content_col {
    float: left;
    max-width: 500px;
    width: 100%;
    padding: 1.5em 0em 0em 0em;
}

#content_col h2 {
    color: #999;
    font-size: 1.5625rem;
    font-weight: normal;
    line-height: 1.875rem;
    padding: 0 0 0.6875em;
}
#content_col.belep h2 {
    display: inline-block;
    width:49%;
}
#content_col a.ugro_link {
    display: inline-block;
    width:auto;
    text-align: right;
    vertical-align: top;
}

#content_col p {
    margin-bottom: 1em;
}


#footer {
    padding: 1.625em 0 1em 230px;
}

#footer p {
    color: #FFFFFF;
    font-size: 0.75em;
}

#footer a {
    display: inline-block;
    padding: 1em;
    color: #FFFFFF;
}

div.uzenet {
    background-color: #dcebf6;
    border: 2px solid #0091dc;
    padding: 0.5em;
}

.versenyzok div.uzenet { 
    font-size: 0.8em;
}

.versenyzok .adatlap div.uzenet { 
    font-size: 1em;
}

.uzenet h4 {
    margin-bottom: 1em;
}

/* **********************************
*  Játékleírás
************************************ */
#content_col.jatekleiras,
#content_col.belep,
#content_col.nyertesek {
    font-size: 0.8em;
}

#content_col.jatekleiras h3 {
    margin-top: 2em;
    margin-bottom: 0.5em;
    font-weight: bold;
}

#content_col.jatekleiras a,
.logon a,
#content_col.jsz a,
#content_col.versenyzok a,
#content_col.belep a,
#content_col.kerdoiv a {
    display: inline-block;
    background: url("../img/icon_link.gif") no-repeat scroll left center rgba(0, 0, 0, 0);
    color: #000;
    padding-left: 14px;  
    text-decoration: none;  
    font-weight: bold;
}

#content_col.jatekleiras a:hover,
.logon a:hover,
#content_col.jsz a:hover,
#content_col.versenyzok a:hover,
#content_col.belep a:hover {
    color: #0091dc;
    text-decoration: underline;
}

#content_col.jatekleiras ul {
    padding-left: 1em;
}

#content_col.kerdoiv h3 {
    margin-bottom: 1em;
}

#content_col.kerdoiv ul {
    padding-left: 0em;
    list-style-type: none;
}

#content_col.kerdoiv li {
    margin-bottom: 1em;
}

#content_col.kerdoiv label {
    vertical-align: middle;
}

#content_col.kerdoiv input {
    margin-bottom: 1em;
}

#content_col.kerdoiv input[type="checkbox"] {
    vertical-align: baseline;
}

#content_col.kerdoiv p.center {
    text-align: center;
}

/* ********************************
*  Űrlap (belépés)
********************************** */
fieldset {
    background-color: #dcebf6;
    border: 1px solid #ccc;
    padding: 0.5rem 0.5rem 1rem 0.5rem;
    margin-bottom: 1rem;
}

legend {
    display: none;
    margin: 0;
    padding: 0;
}

.mezo_blokk {
    margin-top: 0.5em;
    width: 100%;
    box-sizing: border-box;
}    

div.rovid_mezo {
    display: inline-block;
    width: 8.125em;
    background-color: #FFFFFF;
    margin-right: 1em;
    padding: 0.3em 0.625em 0.3em 0.625em;
    border: 1px solid #7F9DB9;
}
div.rovid_mezo:last-child {
    margin-right: 0em;
}


div.rovid_mezo label {
    width: 4em;
    padding: 0.1em 0em 0.1em 0em;
}
div.rovid_mezo input {
    margin-left: 0rem;
}

div.foglalkozas_mezo {
    display: inline-block;
    width: auto;
}

label {
    display: inline-block;
    width: 8.5rem;
    padding-bottom:0.2em;
}

input {
    box-sizing: border-box;
    padding: 0.5em;
    width: 16.7rem;
}
input.hiba, div.hiba {
    border: 4px solid red;
}
p.hiba {
    color: red;
    margin: 0 0 0.8em 8.8rem;
}

input[type="submit"] {
    background-color: #0091DC;
    color: #FFFFFF; 
}

a.gomb {
    display: inline-block;
    width: 16.7rem;
    padding: 0.5em;
    background-color: #0091DC;
    color: #FFFFFF;  
    text-align: center;   
    text-decoration: none;
}

input[type="radio"] {
    width: 1em; 
    margin-left: 1em;
}

input[type="checkbox"] {
    display: inline-block;
    margin-top: 0.3em;
    vertical-align: top;
    width: 2em;
}

label.hosszu {
    display: inline-block;
    margin-left: 0;
    width: 86%;
}

p#nem_regisztralt {
    margin-bottom:0px;
}


.mezo_csoport {
    border: 1px solid #ccc;
    background-color: #FFFFFF;
    padding: 0.5rem 0.5rem 1rem 0.5rem;
    margin-bottom: 1rem;
} 

.mezo_csoport input[type="radio"] {
    width: 1rem;
    margin-left: 0.5rem; 
}

.mezo_csoport label {
    width: 8.0rem;
}
.mezo_csoport input {
    width: 16.2rem;
}

select {
    box-sizing: border-box;
    width: 16.2rem;
    padding: 0.5em;    
}

#belepes a.ugro_link, #regisztral a.ugro_link {
    right: 0em;
    position: absolute;
}

/* ***************************
* Versenyzők adatlap
***************************** */
#vlista ul {
    list-style-type: none;
}

article.adatlap {
    border-bottom: 1px solid #ccc;
    margin-bottom: 1em;
    font-size: 0.8em;
}

.adatlap h3 {
    font-size: 1.2em;
    font-weight: bold;
    padding: 1em 0 0 0;
}

.adatlap section {
    display: inline-block;
    min-width: 45%;
    margin: 0em 0.5em 1em 0.5em;
}

.adatlap li {
    margin: 1em 1em 1em 1em;
}
.adatlap a {
    display: inline-block;
    padding: 0.5em 1em 0.5em 1em;
}

.adatlap img {
    float: right;
    margin: 0 0 0.5em 0.5em;
}


.adatlap dl {
    margin-bottom: 1em;
}

.adatlap dt {
/*    display: inline;   */
    font-weight: bold;
    margin-right: 0em;
}

.adatlap dt::after {
    content: ":";
}    
    
.adatlap dd {
/*    display: inline;  */
   margin: 0 0 0.5em 1em;
}

.adatlap p, .adatlap dd {
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.adatlap p.vissza {
    text-align: right;
}


/* **********************************
*  Szavazas
************************************ */
#content_col.szavazas h3 {
    margin-bottom: 1em;
    font-size: 0.9em;
}

#content_col.szavazas li {
    display: inline-block;
    width: 32%;
    text-align: center;
    font-size: 0.7em;
    margin-bottom: 0.5em;
}

#content_col.szavazas li label {
    box-sizing: border-box;
    width: 100%;
    padding: 0.5em;
    border: 4px solid #dcebf6;
    
}

#szavazat input:checked + label {
    border: 4px solid #0091dc;
    border: 4px solid #dcebf6;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.8);
}

#content_col.szavazas label p {
    margin: 0;
    font-size: 1em;
    white-space: nowrap;
    overflow-x: hidden;
}

#content_col.szavazas input {
    display: block;
    margin: 0.5em auto 1em auto;
}
#content_col.szavazas fieldset {
    padding-bottom: 1em;
} 

/* *******************************
*  Játékszabály
********************************* */
#content_col.jsz {
   font-size: 0.8em;
   line-height: 150%;
/*
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
*/       
}

#content_col.jsz h3 {
    margin-top: 1em;
    margin-bottom: 1em;
    font-weight: bold;
    line-height: 150%;
    text-align: center;
    -moz-hyphens: none;
    -ms-hyphens: none;
    -o-hyphens: none;
    -webkit-hyphens: none;    
    hyphens: none;
}

#content_col.jsz h4 {
    font-weight: bold;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

#content_col.jsz .felsorolas_cim {
    margin-top: 1em;
    margin-bottom: 0em;
    font-weight: bold;
}

#content_col.jsz .felsorolas_lab {
    margin-top: -1em;
}

#content_col.jsz ul, ol, .belep ul {
    margin-left:1.5em;
    margin-bottom: 1em;
}

#content_col.jsz li {
margin-bottom: 0.5em;
}

#content_col.jsz .alairas {
    text-align: right;
    margin-right: 3em;
}

/* *******************************
*  Nyertesek
********************************* */

#content_col.nyertesek ul {
    padding-left: 1.5em;
    margin-top: 0.5em;
    margin-bottom: 1.5em;
}

#content_col.nyertesek ol  {
    margin-top: 0.5em;
    margin-bottom: 1.5em;
}

#content_col.nyertesek li {
    margin-bottom: 0.5em;
}

#content_col.nyertesek h3 {
    margin-top: 1em;
}

@media screen and (max-width:740px) {

    #prim_nav {
        box-sizing: border-box;
        background-color: #FFFFFF;
        border-bottom: 1px solid #ccc;  
        border-left: none; 
        border-right: none;      
    }

    nav ul {
        margin-left: 0.5em;
    }

    #sec_nav {
        float: none;
        padding: 0;
    }
    
    #footer {
        padding: 1.625rem 0.5em 1em 0.5em;
        text-align: center;
    }

}

@media screen and (max-width:512px) {
    #befoglalo {
        width: 100%
    }
    nav ul {
        margin-bottom: 0.5em;
    }
    
    nav ul li {
        background-color: #fff;
        border: 1px solid #ccc;
        padding-top: 1px;
    }
    
    nav ul li.current {
        border: 1px solid #0091dc;
    }
    p.hiba {
        color: red;
        margin-left: 0rem;
    }    
}

.debug {
    margin:1em;
    padding: 1em;
}