/********** Variables *********/ @basic-gray: #3a3a3a; /********** Mixins **********/ .box-shadow (@x: 0, @y: 0, @radius: 10px, @alpha: 1) { -webkit-box-shadow: @x @y @radius rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @radius rgba(0, 0, 0, @alpha); box-shadow: @x @y @radius rgba(0, 0, 0, @alpha); } .inset-box-shadow (@x: 0, @y: 0, @radius: 10px, @alpha: 1) { -webkit-box-shadow: @x @y @radius rgba(0, 0, 0, @alpha) inset; -moz-box-shadow: @x @y @radius rgba(0, 0, 0, @alpha) inset; box-shadow: @x @y @radius rgba(0, 0, 0, @alpha) inset; } .rounded-corners(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .specific-rounded-corners(@topleft: 5px, @topright: 5px, @bottomright: 5px, @bottomleft: 5px) { -webkit-border-radius: @topleft @topright @bottomright @bottomleft; -moz-border-radius: @topleft @topright @bottomright @bottomleft; border-radius: @topleft @topright @bottomright @bottomleft;-webkit-border-radius: @topleft @topright @bottomright @bottomleft; } .horizontal-gradient(@from: #fff, @to: #000) { background: @to; /* Old browsers */ background: -moz-linear-gradient(left, @from 0%, @to 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,@from), color-stop(100%,@to)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, @from 0%,@to 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, @from 0%,@to 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, @from 0%,@to 100%); /* IE10+ */ background: linear-gradient(left, @from 0%,@to 100%); /* W3C */ filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{from}', endColorstr='@{to}',GradientType=1 )"; /* IE6-9 */ } /********** Texts **********/ p { text-align: justify; } /********** Adverts **********/ .ad { overflow: hidden; a { padding: 0; line-height: 1em; float: left; &:not(:first-child) { margin-left: 10px; } } } /********** Layout **********/ html { background: #000 url('../img/background-gradient.png') repeat-x left top; } body { padding: 30px 0; /*font: 16px/1.5 'Open Sans Condensed', sans-serif;*/ background: transparent; position: relative; } .wait { cursor: progress; } h1, h2, h3, h4, h5, h6 { color: #fff; font-family: 'Open Sans Condensed', Arial, sans-serif; } div[id^="snippet"] { display: inline; } #container { width: 1024px; margin: 0 auto; position: relative; } a { &:hover { color: #2696FF; } } #top-line { /*margin-top: 10px;*/ width: 1024px; #logo { position: relative; bottom: -25px; float: left; z-index: 5; h1 { float: left; margin-left: 15px; a { text-indent: -9999px; background: url('../img/logo.png') no-repeat top left; display: block; width: 209px; height: 95px; &:hover { text-decoration: none; background: url('../img/logo-hover.png') no-repeat top left; } } } #notice { float: left; background: url('../img/notice-background.png') no-repeat left top; width: 305px; height: 25px; color: #e1e1e1; font-size: 14px; text-align: center; padding: 12px 0; margin-top: 50px; margin-left: 10px; p { text-align: center; } } } #play { float: right; margin-bottom: -10px; #icq-link { float: left; background: url('../img/icq-background.png') no-repeat left top; width: 226px; height: 25px; color: #e1e1e1; font-size: 14px; text-align: center; padding: 12px 0 12px 18px; margin-top: 75px; margin-left: 5px; } #play-radio { float: left; margin-top: 75px; margin-right: 20px; a { display: block; background: url('../img/play-background.png') no-repeat left top; width: 139px; height: 25px; font-size: 14px; font-weight: bold; text-align: center; padding: 12px 0; color: #e1e1e1; &:hover { background: url('../img/play-hover-background.png') no-repeat left top; text-decoration: none; color: #fff; } } } } } #highlight { width: 740px; height: 240px; float: left; padding: 20px; background: transparent url('../img/highlight-background.png') no-repeat left top; margin-bottom: 10px; position: relative; .box-shadow(0, 0, 10px, 0.5); .rounded-corners(10px); .ui-tabs-panel { width: 472px; height: 237px; overflow: hidden; float: left; position: relative; .box-shadow(0, 0, 5px); a { display: block; background: rgba(0, 0, 0, 0.8); color: #fff; padding: 5px 10px; position: absolute; bottom: 15px; width: 452px; h2 { color: #fff; font-size: 24px; line-height: 1.1em; margin-bottom: 5px; } p { font-size: 12px; } &:hover { text-decoration: none; } } } .ui-tabs-hide { display: none; } ul#photos { margin: 0 0 0 25px; display: block; width: 243px; float: left; li { display: inline; float: left; width: 114px; height: 75px; overflow: hidden; list-style-type: none; margin-bottom: 7px; .box-shadow(0, 0, 5px, 0.5); &:nth-child(odd) { margin-right: 10px; } a { display: inline-block; width: 114px; height: 75px; overflow: hidden; img { margin-right: 5px; width: 114px; } &:hover { text-decoration: none; } } } } } #radio { posititon: relative; z-index: 8; margin-top: 3px; width: 240px; float: left; #radio-settings { background: url('../img/settings-background.png') right top no-repeat; width: 200px; height: 81px; padding: 12px 20px 11px 20px; margin: 2px 0 10px 0; .box-shadow(0, 0, 5px, 0.5); .specific-rounded-corners(0, 8px, 8px, 0); a { float: left; width: 86px; height: 36px; text-align: center; background: url('../img/high-low-background.png') left top no-repeat; display: block; color: #ddd; font-size: 16px; padding: 25px 0; line-height: 1; strong { font-size: 20px; } &.low { margin-left: 20px; } &:hover { background: url('../img/high-low-hover-background.png') left top no-repeat; text-decoration: none; color: #fff; } } } } #main-menu { display: inline; nav { float: left; width: 756px; height: 54px; background: url('../img/main-menu-background.png') left top no-repeat; margin-bottom: 10px; margin-right: 10px; padding: 0 12px; posititon: relative; z-index: 70; li { font-family: 'Open Sans Condensed', sans; list-style-type: none; float: left; font-size: 20px; border-left: 1px solid #767676; border-right: 1px solid #5c5c5c; position: relative; z-index: 80; display: block; a { color: #fff; text-decoration: none; text-shadow: 0 0 7px rgba(0, 0, 0, 0.7); padding: 18px 16px; display: block; position: relative; &:hover { /*color: @basic-gray;*/ background: rgba(255, 255, 255, 0.3); } } /** 2. level **/ ul { display: none; background: fadeout(@basic-gray, 10%); color: #fff; font-size: 16px; position: absolute; top: 54px; left: -25px; padding: 5px 0; text-transform: uppercase; li { list-style-type: none; float: none; z-index: 90; border: none; a { padding: 5px 10px; display: block; width: 100px; } /** 3. level **/ ul { display: none; background: fadeout(#fff, 10%); font-size: 16px; position: absolute; top: 0; left: 95px; padding: 5px 0; text-transform: uppercase; li { list-style-type: none; float: none; z-index: 100; border: none; a { color: @basic-gray; padding: 5px 10px; text-shadow: none; &:hover { color: #fff; /*background: fadeout(@basic-gray, 10%);*/ /*background: fadeout(@basic-gray, 50%);*/ } } } } &:hover > ul { display: block; } } } &:hover > ul { display: block; } } li:first-child { border-left: none; } li:last-child { border-right: none; } } } #youtube-highlight { width: 514px; height: 320px; margin-right: 10px; margin-bottom: 10px; float: left; } #social-bar { float: left; width: 251px; #links { width: 251px; float: left; a { float: left; display: block; padding: 0; width: 54px; height: 54px; margin-right: 11px; margin-bottom: 0; &.last { margin-right: 0; } &:hover { text-decoration: none; } &.cloud { background: url('../img/cloud-icon.png') no-repeat left top; &:hover { background: url('../img/cloud-icon-hover.png') no-repeat left top; } } &.facebook { background: url('../img/facebook-icon.png') no-repeat left top; &:hover { background: url('../img/facebook-icon-hover.png') no-repeat left top; } } &.lastfm { background: url('../img/lastfm-icon.png') no-repeat left top; &:hover { background: url('../img/lastfm-icon-hover.png') no-repeat left top; } } &.youtube { background: url('../img/youtube-icon.png') no-repeat left top; &:hover { background: url('../img/youtube-icon-hover.png') no-repeat left top; } } } margin-bottom: 10px; } .ad { width: 251px; height: 251px; float: left; clear: left; padding: 0; } } #top-news { width: 232px; height: 385px; background: url('../img/top-news-background.png') no-repeat left top; float: right; color: #fff; margin-bottom: 10px; h3 { color: #fff; padding: 15px 20px 20px 20px; font-size: 28px; font-weight: normal; } ul { padding: 0; margin: 0; li { list-style-type: none; padding: 0; margin: 0; } } .piece-of-news { padding: 0; margin: 0; a { color: #e1e1e1; clear: left; overflow: hidden; padding: 5px 19px; display: block; color: #fff; &:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.3); } img { float: left; margin-right: 5px; width: 59px; height: 59px; } span { width: 130px; float: left; h4 { line-height: 1; font-size: 18px; color: #fff; } } } } } #main-content { a.more { width: 100%; float: left; padding: 5px 0; color: #fff; text-align: center; .rounded-corners(10px); margin-bottom: 10px; @from: #e80000; @to: #a10000; .horizontal-gradient(@from, @to); &:hover { text-decoration: none; .horizontal-gradient(lighten(@from, 5%), lighten(@to, 5%)); } } .paginator { margin: 20px; clear: left; a { padding: 5px 10px; color: #fff; text-align: center; .rounded-corners(5px); @from: #e80000; @to: #a10000; .horizontal-gradient(@from, @to); &:hover { text-decoration: none; .horizontal-gradient(lighten(@from, 5%), lighten(@to, 5%)); } } span { padding: 5px 10px; min-width: 30px; text-align: center; .rounded-corners(5px); &.button { color: #ccc; @from: #575757; @to: #474747; .horizontal-gradient(@from, @to); } &.current { color: #ccc; @from: #3B3B3B; @to: #2B2B2B; .horizontal-gradient(@from, @to); } } } section#articles, section#blogs { float: left; } section#articles { width: 393px; margin-right: 10px; article { width: 100%; float: left; clear: left; margin-bottom: 10px; background: #191919; color: #fff; .rounded-corners(10px); header { width: 363px; float: left; clear: left; padding: 7px 15px; margin-bottom: 15px; border-bottom: 1px solid #303030; h3 { float: left; font-size: 24px; color: #fff; a { color: #fff; &:hover { text-decoration: none; } } } } .article-body { float: left; clear: left; padding: 0 15px; img { clear: left; float: left; margin: 0 15px 10px 0; border: 1px solid #363636; } } footer { width: 363px; float: left; clear: left; padding: 7px 15px; margin-top: 15px; border-top: 1px solid #303030; span, a { float: left; margin-right: 22px; height: 20px; padding: 5px 10px; background: #202020; text-align: center; font-size: 14px; .rounded-corners(5px); &.last { margin-right: 0; float: right; } } a { color: #fff; &:hover { background: #303030; text-decoration: none; } } } } } section#blogs { width: 620px; margin-bottom: 10px; div.wrapper { width: 620px; float: left; margin-bottom: 10px; background: #191919; color: #fff; .rounded-corners(10px); header { width: 590px; float: left; clear: left; padding: 7px 15px; margin-bottom: 15px; border-bottom: 1px solid #303030; h2 { float: left; font-size: 24px; color: #fff; } } article { width: 590px; margin: 20px 15px; float: left; clear: left; header { width: 590px; text-align: center; background: #303030; padding: 0; .rounded-corners(10px); h3 { font-size: 20px; color: #fff; padding: 5px 0; line-height: 1; a { color: #fff; &:hover { text-decoration: none; } } } } .article-body { img { clear: left; float: left; border: 1px solid #363636; margin: 0 15px 10px 0; } } footer { float: left; clear: left; padding: 7px 0; width: 590px; margin-top: 15px; border: 0; span, a { float: left; margin-right: 22px; height: 20px; padding: 5px 10px; background: #202020; text-align: center; font-size: 14px; .rounded-corners(5px); &.last { margin-right: 0; float: right; } } a { color: #fff; &:hover { background: #303030; text-decoration: none; } } } } } } #page-content { margin-right: 10px; article { width: 780px; float: left; clear: left; margin-bottom: 10px; background: #191919; color: #fff; .rounded-corners(10px); header { width: 750px; float: left; clear: left; padding: 7px 15px; margin-bottom: 15px; border-bottom: 1px solid #303030; h3 { float: left; font-size: 24px; color: #fff; a { color: #fff; &:hover { text-decoration: none; } } } } .article-body { float: left; clear: left; padding: 0 15px; img { clear: left; float: left; margin: 0 15px 10px 0; border: 1px solid #363636; } } footer { width: 750px; float: left; clear: left; padding: 7px 15px; margin-top: 15px; border-top: 1px solid #303030; span, a { float: left; margin-right: 22px; height: 20px; padding: 5px 10px; background: #202020; text-align: center; font-size: 14px; .rounded-corners(5px); &.last { margin-right: 0; float: right; } } a { color: #fff; &:hover { background: #303030; text-decoration: none; } } } } } } footer#pages-footer { border: 0; .rounded-corners(10px); padding: 20px; width: 984px; background: #3a3a3a; margin-top: 10px; margin-bottom: 0; position: relative; .box-shadow(0, 5px, 10px, 0.5); .box { float: left; width: 236px; .rounded-corners(10px); background: #191919; margin-right: 13px; &.last { margin-right: 0; } h4 { background: #303030; padding: 5px 0; .specific-rounded-corners(10px, 10px, 0, 0); text-align: center; font-size: 24px; color: #fff; } ul { padding: 0; margin: 20px 0; li { list-style-type: none; margin: 0; a { h5 { padding: 5px 18px; width: 200px; display: block; color: #fff; line-height: 1; font: 16px/1.5 Arial, sans-serif; font-weight: normal; &:hover { background: #ddd; color: #444; } } &:hover { text-decoration: none; } } } } } } article#page-content, div.more-information { width: 780px; margin: 0 0 10px 0; padding: 20px 0; float: left; clear: left; background: #191919; color: #fff; .rounded-corners(10px); header { border-bottom: 1px solid #303030; padding: 0 20px 10px 20px; margin-bottom: 20px; h2, h3 { margin: 0; color: #fff; line-height: 1; } h2 { font-size: 24px; } h3 { font-size: 18px; } } h2, h3, h4, h5, h6 { margin: 0 20px; } p, li { color: #ddd; font-size: 16px; line-height: 20px; } p { padding: 0 20px; } .youtube { margin: 20px; } .paginator { clear: both; margin: 20px; } .information { padding: 0 20px; .picture { float: left; height: 100%; img { border: 1px solid #212121; margin: 0 15px 10px 15px; &.left { margin-left: 0; } &.right { margin-right: 0; } } } ul { float: left; clear: left; padding: 0; width: 780px; margin: 5px 0 15px 0; border: 0; li, a { float: left; margin-right: 22px; height: 20px; padding: 5px 20px; background: #202020; text-align: center; font-size: 14px; .rounded-corners(5px); &.last { margin-right: 0; float: right; } } li{ list-style-type: none; } a { color: #fff; line-height: 20px; &:hover { background: #303030; text-decoration: none; } } } .excerpt { /*float: left;*/ h2, h3, h4, h5, h6 { margin: 0; } p { padding: 0 0 10px 0; font-style: italic; text-align: justify; } } } .content { margin-bottom: 30px; } .photogallery { clear: left; h2 { font-size: 20px; color: #fff; padding: 10px 0; line-height: 1; text-align: center; background: #202020; padding: 5px; margin: 20px; .rounded-corners(10px); } ul { margin: 20px; background: #202020; padding: 15px 0 0 15px; .rounded-corners(10px); overflow: hidden; float: left; li { position: relative; float: left; list-style-type: none; margin: 0 15px 15px 0; padding: 0; a { img { position: relative; display: block; height: 166px; } .caption { display: block; position: absolute; bottom: 5px; background: rgba(0,0,0,0.4); width: 100%; overflow: hidden; padding: 0; margin: 0; span { padding: 5px 10px; float: left; text-align: left; } } &:hover { text-decoration: none; } } } } .author { float: left; margin: 10px 20px; padding: 10px 15px; .rounded-corners(10px); background: #202020; font-size: 16px; } .detail { position: relative; width: 740px; margin: 20px; text-align: center; /** @todo chybné rozměry odkazů */ img { max-width: 740px; } a { position: absolute; top: 0; display: block; padding: 0 30px; width: 30%; height: 100%; color: rgba(0, 0, 0, 0); font-size: 100px; &:hover { color: rgba(255, 255, 255, 1); text-decoration: none; text-shadow: 0 0 3px rgba(0, 0, 0, 0.9); } } .next { right: 0; text-align: right; } .previous { left: 0; text-align: left; } } } .fbLike { margin: 0 20px; float: left; overflow: hidden; } .fbComments { margin: 10px 20px; float: left; overflow: hidden; } ul { padding: 0; list-style-type: none; overflow: hidden; } .news { margin: 10px 20px; .piece-of-news { padding: 0; margin: 0; a { color: #e1e1e1; padding: 5px; display: block; color: #fff; overflow: hidden; &:hover { color: #fff; text-decoration: none; background: rgba(0, 0, 0, 0.1); } img { float: left; margin-right: 10px; width: 59px; height: 59px; } span { /*float: left;*/ h4 { line-height: 1; font-size: 18px; color: #fff; } } } } } } #footer-controls { position: relative; width: 984px; padding: 0 20px; margin-bottom: 20px; #roll-up a { background: url('../img/roll-up-icon.png') no-repeat left top; float: right; display: block; width: 43px; height: 35px; &:hover { text-decoration: none; background: url('../img/roll-up-icon-hover.png') no-repeat left top; } } #footer-logo a { background: url('../img/footer-logo.png') no-repeat left top; float: right; display: block; width: 123px; height: 47px; margin-right: 20px; &:hover { text-decoration: none; background: url('../img/footer-logo-hover.png') no-repeat left top; } } #copyright { float: left; padding: 15px; color: #222; } } /********************* WIDGETS *************************************/ .visiting-card { display: block; margin: 10px 20px 20px 20px; overflow: hidden; clear: left; a { overflow: hidden; img { float: left; width: 100px; margin-right: 10px; border: 1px solid #363636; } } .contact { h3 { line-height: 24px; margin-left: 0; clear: none; } a { color: #fff; display: block; &:hover { text-decoration: none; } } ul { margin: 0; padding: 0; li { list-style-type: none; margin: 0; padding: 0 0 2px 0; p { padding: 0; margin: 0 0 2px 0; } } } } } .ongoing-show { width: 240px; height: 150px; position: relative; margin: 0; padding: 0; .specific-rounded-corners(0, 10px, 10px, 0); overflow: hidden; h2 { position: relative; top: 15px; z-index: 10; display: block; padding: 5px 0; text-align: center; width: 100%; .horizontal-gradient(#E80000, #A20000); } ul { position: absolute; bottom: 10px; z-index: 20; background: rgba(0, 0, 0, 0.6); padding: 8px 15px 8px 10px; margin: 0; float: left; li { list-style-type: none; color: #fff; text-shadow: 0 0 2px #000; font-size: 22px; font-family: 'Open Sans Condensed', Arial, sans-serif; } } img { .specific-rounded-corners(0, 10px, 10px, 0); position: absolute; top: 0; right: 0; height: 150px; z-index: 0; } } /********************** GENERIC STYLES *****************************/ .low-priority, .middle-priority, .high-priority { position: relative; } .low-priority { z-index: -1; } .middle-priority { z-index: 5; } .high-priority { z-index: 10; } .left { float: left; } .line { float: left; clear: left; } .clearfix { clear: both; }