Add FFFI MU 2012

festival-12/f/layout.css

+@charset "utf-8";
+
+/* HTML5 fallback */
+header, section, nav, footer {
+  display:block;
+}
+
+/* reset */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, header, section, nav, footer, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+}
+
+.clear {
+  clear:both;
+}
+
+/* ========== LAYOUT =========== */
+
+p{
+  margin: .8em 0 .6em 0;
+}
+
+h1{
+  padding: .5em 0 .1em 0;
+}
+
+h2, h3{
+  padding: 1em 0 .1em 0;
+}
+
+div#wrap {
+  max-width: 63em;
+  _width: 64em;
+  margin:0 auto;
+  padding: 0 2em 0 2em;
+  _padding:0 2em 0 0;
+}
+
+div#cont {
+  padding: 0 2em 5em 17.2em;
+  _padding: 0 1em 5em 2em;
+  _margin-left:16em;
+}
+
+header, div#header {
+  width:100%;
+  padding: 0 0 .8em 0;
+  position:relative;
+}
+
+#lemma {
+  height: 2em;
+  padding: 0 0 .5em 0;
+}
+
+#fffi, #fffi_ie{
+  padding: .7em 1.5em 1.3em 0;
+  margin: .9em 17em 0 0;
+  position:relative;
+  min-height:7.5em;
+}
+
+#fffi a, #fffi_ie a {
+  display: block;
+}
+
+#fffi a span#rocnik, #fffi_ie a span#rocnik{
+  display: inline;
+}
+
+header #tema, div#header #tema{
+  display: none;
+}
+
+#kdykde {
+  float:right;
+  margin: 15px 0 0 1px;
+  width: 14em;
+  position:absolute;
+  top:2.6em;
+  right:1.5em;
+  height:9em;
+  padding:.8em 1em 1.2em 1.5em;
+}
+
+#kdykde #kde{
+  padding-bottom: 2em;
+}
+
+#kdykde #kde span{
+  display: block;
+}
+
+#kdykde #kdy{
+  margin-top:-0.5em; /* pri zobrazenem case */
+  /*margin-top:.15em;*/ /* bez casu */
+}
+
+#kdykde #kdy span#cas {
+  display:block;
+  margin-top:-0.1em;
+}
+
+#kdykde #zac{
+  padding: .2em 0 0 0;
+}
+
+#kdykde #kdy, #kdykde #kde, #kdykde #zac, #kdykde #otv, #kdykde #pro {
+  display:block;
+}
+
+#events {
+  position:absolute;
+  top:2.6em;
+  right:-1.3em;
+  width:2em;
+  padding: .6em 0 1em 0;
+}
+
+#events li {
+  display:block;
+  margin-bottom:1em;
+}
+
+#events #fb{
+  width:40px;
+  height:40px;
+  background-image: url('buttons/facebook.png');
+  background-size: 100% 100%;
+}
+
+#wrap2 {
+  clear:both;
+}
+
+nav#menu, div#menu {
+  width: 14em;
+  float: left;
+  margin:5.5em 0 0 0;
+  _margin:5.5em 0 0 -.5em;
+}
+
+#menu ul {
+  margin:0;
+}
+
+#menu ul li{
+  margin-bottom:.7em;
+}
+
+section {
+  margin: 1em 0 0 0;
+  position:relative;
+}
+
+section:after {
+  position:absolute;
+  top:2.5em;
+  right:0;
+}
+
+ol {
+  padding-left: 5em;
+  _margin: 0;
+  margin: 1em 0 1.5em 0;
+}
+
+ul{
+  margin: 1em 0 1.5em 0;
+}
+
+ul li, ol li {
+  margin: 0 0 .3em 0;
+}
+
+ul li span, ol li span {
+  display:inline-block;
+  margin: .5em 1em;
+}
+
+#cta {
+  max-width: 15em;
+  text-align: center;
+  margin: auto;
+  margin-top: 3em;
+}
+
+#menu a, #cta a {
+  display:block;
+  height: 1.9em;
+  padding: .3em .7em;
+}
+
+#menu ul {
+  list-style:none;	
+}
+
+div.foto{
+  padding: 1em .2em .7em .5em;
+  margin-top:.8em;
+}
+
+div.foto a img {
+  margin:0 .3em .3em 0;
+  /*width:10em;*/
+  max-width:160px;
+}
+
+div.filmy1{
+    text-align: left;
+    min-height: 59em;
+}
+
+div.filmy2{
+    text-align: left;
+    min-height: 25em;
+}
+
+div.filmy1 a, div.filmy2 a{
+    border: 1px solid #E23A28;
+    float: left;
+    height: 100px;
+    min-height: 100px;
+    max-height: 100px;
+    margin: 0.4em;
+    padding: 0.9em 0;
+    text-align: center;
+    width: 170px;
+}
+
+div.filmy1 a img, div.filmy2 a img{
+    float: none;
+    height: 100px;
+    min-height: 100px;
+    max-height: 100px;
+    margin: 0;
+    border: none;
+    max-width:150px;
+}
+
+footer, div#footer {
+  padding: 1em 2em 5em 2em;
+}
+
+ul.partner img{
+  float: right;
+  max-height: 100px;
+  max-width:  210px;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+ul.partner div{
+  position: relative;
+  margin-left: 0.5em;
+  margin-top: 0.2em;
+  margin-right: 15em;
+}
+
+ul.partner li{
+  min-height: 100px;
+  position: relative;
+  margin-bottom: 1em;
+}
+
+ul.partner li div span{
+  display: block;
+  margin: 0;
+}
+
+ul.partner li div span.meno{
+  margin-bottom: 0.7em;
+}
+
+div.snimek{
+  margin-top: 1.5em;
+  position: relative;
+}
+
+div.snimek span{
+  margin: 0;
+}
+
+div.snimek li{
+  margin: 0;
+}
+
+div.snimek li.autor{
+  padding-bottom: 0.4em;
+}
+
+div.snimek ul{
+  margin-bottom: 0.7em;
+}
+
+div.ofilme{
+  position: relative;
+  margin-right: 12.2em;
+}
+
+div.snimek_foto{
+  position: absolute;
+  top:0;
+  right:0;
+  float: right;
+  padding-top: 2em;
+}
+
+div.snimek_foto img{
+  border-bottom: solid 0.3em;
+  border-top: solid 0.3em;
+}
+
+div.snimek li span{
+  padding-right: 0.4em;
+}
+
+ul.program ul{
+  padding-left: 1.5em;
+  margin: 0.5em 0 0.5em 0;
+}
+
+ul.program{
+  max-width: 25em;
+  margin: 0.5em;
+}
+
+ul.program span{
+  margin: 0;
+  float: right;
+}
+
+img.plagat{
+  padding-top: 0.5em;
+}
+
+/* ========== TYPO =========== */
+
+body {
+  font-family:Verdana, Geneva, sans-serif;
+  text-align:center;
+}
+
+p {
+  line-height:150%;
+  text-align:justify;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: Novecentowide-Normal;
+}
+
+div#wrap{
+  text-align:left;
+}
+
+div#wrap2 {
+  text-align:left;
+}
+
+div#cont {
+  font-size:100%;
+}
+
+h1 {
+  font-size:190%;
+}
+
+h1#fffi, div#fffi, #fffi_ie{
+  font-size:100%;
+  font-weight:normal;
+}
+
+h2 {
+  font-size:150%;
+}
+
+h3 {
+  font-size:120%;
+}
+
+.small {
+  font-size:85%;
+}
+
+#lemma {
+  font-family: Novecentowide-Normal;
+  line-height:2em;
+}
+#fffi a, #fffi_ie a{
+  font-size:300%;
+  font-family: Novecentowide-DemiBold;
+}
+
+#kdykde {
+  text-align:right;
+}
+
+#kdykde #kdy {
+  font-family: Novecentowide-DemiBold;
+  font-size:180%;
+}
+
+#kdykde #kdy span {
+  font-size:140%;
+}
+
+#kdykde #kdy span#cas {
+  font-size:100%;
+}
+
+#kdykde #otv span, #kdykde #pro span{
+  font-size:80%;
+}
+
+#kdykde #kde {
+  font-family: Novecentowide-DemiBold;
+  font-size: 90%;
+}
+
+#kdykde #zac {
+  font-family: Novecentowide-DemiBold;
+  font-size:110%;
+}
+
+#kdykde #otv, #kdykde #pro {
+  font-family: Novecentowide-DemiBold;
+  font-size:110%;
+}
+
+#menu a, #cta a {
+  font-family: Novecentowide-Normal;
+  font-size:110%;
+  line-height: 1.9em;
+}
+
+footer, div#footer {
+  text-align:center;
+}
+
+section:after{
+  font-family: Novecentowide-Normal;
+  font-size:85%;
+}
+
+div.foto{
+  text-align:center;
+}
+
+ul#partner li div span#meno{
+  font-size: 110%;
+}
+
+div.snimek h4{
+  font-size: 150%;
+}
+
+@media (max-width: 1075px){
+  div.foto a img {
+    max-width:137px;
+  }
+
+  header, div#header{
+    font-size: 88%;
+  }
+
+  body{
+    font-size: 97%;
+  }
+
+  #events fb{
+    width:37px;
+    height:37px;
+  }
+
+  #events{
+    right:-1em;
+    top:2.6em;
+  }
+  
+  img.plagat{
+    width: 600px;
+  }
+}
+
+@media (max-width: 970px){
+  div.foto a img {
+    max-width:123px;
+  }
+}
+
+@media (max-width: 900px){
+  nav#menu, div#menu {
+    float:none;
+    width: auto;
+    margin: 1em 0 0 0;
+    min-height: 9em;
+    font-size: 86%;
+  }
+
+  header, div#header{
+    font-size: 73%;
+  }
+
+  div#cont {
+    padding: 0 0 5em 0;
+  }
+
+  #menu ul
+  {
+    float:left;
+    width:100%;
+    height: auto;
+  }
+
+  #menu li {
+    display:inline;
+  }
+
+  #menu a{
+    float:left;
+    width:12em;
+    padding:0.2em 0.6em;
+    margin-right: 0.5em;
+    margin-bottom: 0.5em;
+  }
+
+  #kdykde{
+    top: 1.8em;
+  }
+
+  div.foto a img {
+    max-width:150px;
+  }
+
+  #events fb{
+    width:32px;
+    height:32px;
+  }
+  #events{
+    top:2.1em;
+  }
+}
+
+@media (max-width: 735px){
+  div.foto a img {
+    max-width:140px;
+  }
+}
+
+@media (max-width: 700px){
+  div.foto a img {
+    max-width:135px;
+  }
+}
+
+@media (max-width: 675px){
+  header, div #header{
+    font-size: 70%;
+    text-align: center;
+  }
+
+  nav#menu, div#menu {
+    min-height: 4.5em;
+    font-size: 79%;
+  }
+
+  #lemma{
+    text-align: left;
+  }
+
+  body{
+    font-size: 93%;
+  }
+
+  h1#fffi, div#fffi{
+    margin-right: 0;
+    padding-right: 0;
+  }
+
+  #kdykde{
+    position: relative;
+    float:none;
+    top:0;
+    right:0;
+    margin: 0;
+    padding: 0;
+    width:auto;
+    min-height: 4em;
+    text-align: center;
+    font-size: 85%;
+  }
+
+  header, div#header{
+    padding: 0;
+  }
+
+  #kdykde #kdy, #kdykde #kde, #kdykde #zac, #kdykde #kdy span#cas {
+    margin-right: 0.6em;
+    display: inline;
+  }
+
+  #kdykde #kdy span#cas{
+    margin-left: 0.6em;
+    margin-right: 0;
+  }
+
+  #kdykde #kdy span{
+    margin: 0;
+  }
+
+  #kdykde #kdy{
+    display: block;
+  }
+
+  #kdykde #kde{
+    font-size: 160%;
+    float: left;
+    padding-left: 4.6em;
+  }
+
+  #kdykde #zac{
+    font-size: 150%;
+  }
+
+  #kdykde #otv, #kdykde #pro{
+    font-size: 140%;
+  }
+
+  div.foto a img {
+    max-width:140px;
+  }
+
+  #events{
+    top:-1.2em;
+    right:1em;
+  }
+
+  #events fb{
+    width: 30px;
+    height: 30px;
+  }
+  
+  img.plagat{
+    width: 400px;
+  }
+}
+
+@media (max-width: 660px){
+  nav#menu, div#menu {
+    min-height: 12em;
+  }
+
+  ul.partner img{
+    max-width:  140px;
+  }
+
+  ul.partner div{
+    margin-right: 10em;
+  }
+  
+  #kdykde{
+    max-height: 6em;
+  }
+}
+
+@media (max-width: 590px){
+  div.foto a img {
+    max-width:160px;
+  }
+}
+
+@media (max-width: 450px){
+  #wrap, #wrap2{
+    width: 365px;
+  }
+
+  #menu a{
+    width:12.87em;
+  }
+
+  #menu ul{
+    padding-left: 0.2em;
+  }
+
+  body{
+    font-size: 90%;
+  }
+
+  ul.partner div{
+    margin-right: 8em;
+  }
+
+  #kdykde #kde{
+    padding-left: 4.2em;
+  }
+  
+  img.plagat{
+    width: 350px;
+  }
+}
\ No newline at end of file