/* CSS Document */
/* 
Selektory http://www.w3schools.com/cssref/sel_element_pluss.asp
tu je priklad  rozbalovania http://jecas.cz/css-rozbalovani
 
input.rozbalovac {display: none;} zneviditelni checkbox zaskrtavacie tlacitko
.rozbalovaci > label  -- plati pre priameho potomka[label] rodica[rozbalovaci] 
selektor A + B ..vyberie prvok, ktorý je hneď prvý po inom zadanom prvku. 
*/

h2{
  text-align: center;
  text-shadow:2px 2px #FF0000;
  }

input.r1 {display: none;}

input[type=checkbox]:checked + .r2 .obsah {display: block;}

.r2 > .obsah {display: none;}

.r2 > label {display: block; cursor: pointer; font-size: 120%; font-weight: bold;}

label.r3:before {content: "+"; padding: 0 .3em; margin-right: .5em; border-radius: 3px;}

input[type=checkbox].r1:checked + div.r2 label.r3:before {content: "-";}

div.obsah p{margin-left: 1.1em;}

input.r11 {display: none;}

.r21 > .obsah11 {display: none;}

input[type=checkbox]:checked + .r21 .obsah11 {display: block;}

.r21 > label {display: block; cursor: pointer;}

div.r21 > label:before {content: "+"; padding: 0 .3em; margin-right: .5em;margin-left: 1.2em; border-radius: 3px;}

input[type=checkbox]:checked + div.r21 label:before {content: "-";}

div.obsah11 p{margin-left: 2.2em;}

.r3{
background: rgba(0,255,255,0.2);
width: 320px;
height: 30px;
margin: 5px;
border-radius: 5px 5px 5px 5px;
}

.r31{
background: rgba(204,255,255,0.2);
width: 300px;
height: 30px;
margin: 5px 5px 5px 25px;
border-radius: 5px 5px 5px 5px;
}
   

.obsah11 img
{
 width: 160px;
 float: left;
 margin: 1% 2% 1% 2%;
 transition: all 2s;
} 

.obsah11 img:hover
{
transform: scale(1.2, 1.2);
}

label{clear: both;}