@font-face { font-family: 'Myriad-Pro'; src: url('/fonts/Myriad-Pro.eot'); /* IE */ src: local('Myriad-Pro'), url('/fonts/Myriad-Pro.ttf') format('truetype'); /* non-IE */ /*src: local('Myriad-Pro'), url('/fonts/Myriad-Pro.woff') format('woff'); /* Modern Browsers */ } @font-face { font-family: 'Myriad-Pro-Bold'; src: url('/fonts/Myriad-Pro-Bold.eot'); /* IE */ src: local('Myriad-Pro-Bold'), url('/fonts/Myriad-Pro-Bold.ttf') format('truetype'); /* non-IE */ /*src: local('Myriad-Pro-Bold'), url('/fonts/Myriad-Pro-Bold.woff') format('woff'); /* Modern Browsers */ } @font-face { font-family: 'Myriad-Pro-Bolder'; src: url('/fonts/Myriad-Pro-Bolder.eot'); /* IE */ src: local('Myriad-Pro-Bolder'), url('/fonts/Myriad-Pro-Bolder.ttf') format('truetype'); /* non-IE */ /*src: local('Myriad-Pro-Bolder'), url('/fonts/Myriad-Pro-Bolder.woff') format('woff'); /* Modern Browsers */ } @link_color: #EF3500; * { font-family: Myriad-Pro, sans-serif; } b, strong { font-family: Myriad-Pro-Bold, sans-serif; font-weight: bold; } html, body { min-height: 100%; background: black; overflow-x: hidden; } .hidden { display: none; } .left { float: left; } .right { float: right; } .page-nav { margin: 7px 14px; overflow: hidden; &:last-child { padding: 0 0 7px 0; } li { float: left; width: 27px; margin: 0 2px 0 0; padding: 0px 2px; background: #272727; text-align: center; &:first-child, &:last-child { width: 80px; } &:last-child { margin: 0; } &.active { a { color: #EF3500; } } a { color: #888; font-size: 10pt; text-transform: uppercase; text-decoration: none; &:hover { color: #EF3500; } } } } #banner { width: 1002px; height: 242px; margin: 0 auto; } #swf-container { width: 1340px; margin-left: -170px; } #container { position: relative; width: 1002px; margin: -242px auto 0 auto; } #frame { width: 1002px; height: 242px; margin: 0 0 4px 0; -moz-box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.5); box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.5); } #menu { width: 1002px; height: 38px; overflow: hidden; background: url('/images/frontend/menu.png'); .links { margin: 10px 0 0 7px; float: left; overflow: hidden; li { float: left; padding: 0 7px; a { color: white; font-size: 14pt; text-transform: uppercase; text-decoration: none; font-family: Myriad-Pro-Bolder, sans-serif; text-shadow: 0px 0px 10px black; &:hover, &.active { color: @link_color; } } } } .social { margin: 7px 7px 0 0; float: right; overflow: hidden; li { float: left; width: 24px; height: 24px; margin: 0 5px; &.twitter { background: url(/images/social/twitter.png); } &.hyves { background: url(/images/social/hyves-2.png); } &.facebook { background: url(/images/social/facebook.png); } &.youtube { background: url(/images/social/youtube-2.png); } &.soundcloud { background: url(/images/social/sc.png); } &.wetransfer { background: url(/images/social/wetransfer.png); } a { width: 24px; height: 24px; display: block; } } } } #content { margin: 4px 0 0 0; overflow: hidden; } #left, #middle, #right { float: left; } #left { width: 292px; .header { width: 278px; height: 28px; margin: 0 0 4px 0; padding: 9px 0 0 14px; font-size: 14pt; background: url('/images/frontend/left-header.png'); text-transform: uppercase; text-decoration: none; font-family: Myriad-Pro-Bolder, sans-serif; overflow: hidden; a { color: #000; font-size: 14pt; text-transform: uppercase; text-decoration: none; font-family: Myriad-Pro-Bolder, sans-serif; &:hover, &.active { color: @link_color; } } span { float: right; display: inline-block; height: 14px; margin: 2px 4px; padding: 0 2px; background: #AFAFAF; a { line-height: 8pt; position: relative; top: -4px; font-size: 10pt; color: white; text-decoration: none; &:hover { color: @link_color; } } } } .agenda { width: 292px; height: 80px; margin: 0 0 4px 0; overflow: hidden; cursor: pointer; background: url('/images/frontend/left-agenda.png'); &:hover { p { .title { color: @link_color; } } } img, p, ul { float: left; } img { width: 72px; height: 72px; margin: 4px; } p { width: 152px; margin: 4px 0; span { display: block; } .title { font-size: 13pt; letter-spacing: -1px; text-transform: uppercase; font-family: Myriad-Pro-Bold, sans-serif; } .date, .location { font-size: 10pt; font-family: Myriad-Pro-Bolder, sans-serif; } .date { text-transform: uppercase; } } ul { width: 56px; margin: 2px; } li { margin: 2px; text-align: center; background: #AFAFAF; a { color: white; display: block; padding: 3px 0 0 0; text-transform: uppercase; text-decoration: none; font-size: 8pt; &:hover { color: @link_color; } } } } } #photo { width: 292px; padding: 10px 0 0 0; background: url('/images/frontend/photo.png'); ul { overflow: hidden; margin: 0 12px 10px 12px; } td { vertical-align: top; width: 118px; padding: 0px 14px 10px 14px; cursor: pointer; &:hover, &.active { .date, .title { color: #EF3500; } } img { width: 118px; margin: 0 0 -4px 0; } div { height: 100%; padding: 2px; background: #AFAFAF; } .date { color: white; text-transform: lowercase; font-size: 10pt; display: block; } .title { color: white; text-transform: uppercase; font-family: Myriad-Pro-Bold, sans-serif; text-decoration: none; } } li { float: left; margin: 2px; text-align: center; background: #AFAFAF; a { color: white; display: block; padding: 3px 4px 0 4px; text-transform: uppercase; text-decoration: none; font-size: 8pt; &:hover, &.active { color: #EF3500; } } } } #aftermovie { width: 282px; height: 162px; padding: 5px; background: url('/images/frontend/left-aftermovie.png'); } #links { margin: 10px 0 0 0; color: #808080; text-align: center; font-size: 8pt; a { color: #808080; text-decoration: none; text-transform: uppercase; font-family: Myriad-Pro-Bold, sans-serif; &:hover { color: @link_color; } } } #middle { width: 564px; margin: 0 5px; .header { height: 28px; margin: 0 0 4px 0; padding: 9px 14px 0 14px; color: white; overflow: hidden; font-size: 14pt; background: url('/images/frontend/middle-header.png'); text-transform: uppercase; text-decoration: none; font-family: Myriad-Pro-Bolder, sans-serif; text-shadow: 0px 0px 10px black; a { color: white; font-size: 14pt; text-transform: uppercase; text-decoration: none; font-family: Myriad-Pro-Bolder, sans-serif; text-shadow: 0px 0px 10px black; } } .box { margin: 0 0 4px 0; background: url('/images/frontend/box2.png'); background-position: center bottom; background-repeat: no-repeat; background: -moz-linear-gradient(top, rgba(0,0,0,1) 3%, rgba(70,69,69,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,rgba(0,0,0,1)), color-stop(100%,rgba(70,69,69,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,1) 3%,rgba(70,69,69,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,1) 3%,rgba(70,69,69,1) 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,1) 3%,rgba(70,69,69,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(0,0,0,1) 3%,rgba(70,69,69,1) 100%); /* W3C */ > p { color: #FFF; margin: 7px; font-family: Myriad-Pro, sans-serif; } } .news { cursor: pointer; padding: 7px 0; margin: 0 14px; overflow: hidden; border-bottom: 1px dotted #8C8C8C; &:last-child { border: none; } &:hover { p { color: #FFF; } } img { float: left; width: 82px; margin: 0 7px 0 0; } .top { overflow: hidden; } .title { float: left; color: white; width: 290px; font-size: 14pt; text-transform: uppercase; text-decoration: none; font-family: Myriad-Pro-Bold, sans-serif; } .date { color: #8C8C8C; font-size: 10pt; float: right; margin: 6px 0 0 0; text-transform: uppercase; font-family: Myriad-Pro-Bold, sans-serif; } p { text-align: justify; font-size: 10pt; color: #AFAFAF; text-decoration: none; a { font-size: 10pt; color: @link_color; text-decoration: none; } .more { color: @link_color; } } } .subscribed { height: 593px; padding: 7px 0; margin: 0 14px; overflow: hidden; border-bottom: 1px dotted #8C8C8C; p { text-align: justify; font-size: 10pt; color: #AFAFAF; text-decoration: none; a { font-size: 10pt; color: @link_color; text-decoration: none; } .more { color: @link_color; } } } .event { overflow: hidden; margin: 0 14px 4px 14px; padding: 7px 0; cursor: pointer; border-bottom: 1px dotted #8C8C8C; &:first-child { margin-top: 14px; border-top: 1px dotted #8C8C8C; } &:hover { .title { color: @link_color; } } img { float: left; width: 100px; height: 100px; margin: 0 14px 0 0; } .info { float: left; color: white; margin: 10px 0 0 0; .date, .location { font-size: 10pt; text-transform: uppercase; } .title { font-size: 16pt; font-family: Myriad-Pro-Bold, sans-serif; } ul { overflow: hidden; margin: 14px 0 0 0; li { float: left; background: #272727; padding: 0 2px; margin: 0 2px 0 0; a { font-size: 8pt; color: #888888; text-decoration: none; text-transform: uppercase; &:hover { color: @link_color; } } } } } } .ticket { overflow: hidden; margin: 0 0 4px 14px; &:first-child { margin-top: 14px; div { height: 88px; border-top: 1px dotted #8C8C8C; } } img { float: left; width: 100px; height: 100px; } div { margin: 0 14px; float: left; width: 416px; height: 89px; border-bottom: 1px dotted #8C8C8C; padding: 10px 0 0 0; } p { color: white; } .date, .location { font-size: 10pt; display: block; text-transform: uppercase; } .title { font-size: 16pt; display: block; font-family: Myriad-Pro-Bold, sans-serif; } ul { overflow: hidden; li { float: left; background: #282828; padding: 0 2px; margin: 0 2px 0 0; a { color: white; text-decoration: none; text-transform: uppercase; font-size: 8pt; &:hover { color: @link_color; } } } } .ticket_link { margin: -24px 0 0 0; padding: 4px 10px 0 10px; float: right; background: #AFAFAF; color: white; text-decoration: none; display: block; font-family: Myriad-Pro-Bold, sans-serif; font-size: 12pt; text-transform: uppercase; cursor: pointer; &:hover { color: @link_color; } } } .ticket-spacer { height: 10px; } .contact { color: #FFF; padding: 7px 14px; p { margin: 0 0 7px 0; font-family: Myriad-Pro, sans-serif; } table { tr { td { vertical-align: top; font-family: Myriad-Pro, sans-serif; &:first-child { width: 100px; } } } } input[type="text"] { width: 175px; height: 15px; padding: 3px 0 0 4px; border: none; font-size: 10pt; -moz-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.25) inset; -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.25) inset; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.25) inset; } textarea { width: 350px; height: 150px; margin: 1px 0 0 0; padding: 3px 0 0 4px; border: none; font-size: 10pt; -moz-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.25) inset; -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.25) inset; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.25) inset; } .submit { width: 60px; border: none; text-align: center; background: #AFAFAF; color: #FFF; padding: 3px 0 0 0; text-transform: uppercase; text-decoration: none; font-size: 8pt; cursor: pointer; &:hover { color: @link_color; } } } } #page-buttons-2 { width: 100%; overflow: hidden; margin: 0 0 7px 0; li { width: 50px; text-align: center; float: left; background: #272727; padding: 0 2px; margin: 0 2px 0 0; a { font-size: 8pt; color: #888888; text-decoration: none; text-transform: uppercase; &:hover { color: @link_color; } } &.back { margin: 0; float: right; width: 470px; text-align: right; padding: 0 7px 0 0; a { display: block; margin: 3px 0; } } } } #event { padding: 7px 14px; ul { overflow: hidden; li { width: 50px; text-align: center; float: left; background: #272727; padding: 0 2px; margin: 0 2px 0 0; &.active { a { color: @link_color; } } a { font-size: 8pt; color: #888888; text-decoration: none; text-transform: uppercase; &:hover { color: @link_color; } } &.back { margin: 0; float: right; width: 191px; text-align: right; padding: 0 7px 0 0; a { display: block; margin: 3px 0; } } } } img { width: 534px; height: 140px; margin: 7px 0; } #info_wrapper { overflow: hidden; } #line_up { float: left; width: 200px; margin: 0 7px 0 0; color: #FFF; span { margin: 0 0 7px 0; padding: 3px 0 0 7px; display: block; background: #272727; text-transform: uppercase; font-family: Myriad-Pro-Bold, sans-serif; } p { padding: 0 0 0 7px; font-size: 9pt; font-family: Myriad-Pro, sans-serif; } } #related_news { color: #FFF; span { margin: 0 0 7px 0; padding: 3px 0 0 7px; display: block; background: #272727; text-transform: uppercase; font-family: Myriad-Pro-Bold, sans-serif; } table { td { padding: 0 0 0 7px; } a { color: #FFF; font-size: 12pt; font-family: Myriad-Pro, sans-serif; text-decoration: none; &:hover { color: @link_color; } } } } #info { float: left; width: 327px; span { margin: 0 0 7px 0; padding: 3px 0 0 7px; color: #FFF; display: block; background: #272727; text-transform: uppercase; font-family: Myriad-Pro-Bold, sans-serif; } table { margin: 0 0 0 7px; td { color: #FFF; font-size: 9pt; &:first-child { width: 100px; vertical-align: top; } &:first-child, &.bold { font-size: 12pt; text-transform: uppercase; font-family: Myriad-Pro-Bold, sans-serif; } } } } } #right { .header { font-size: 14pt; display: block; padding: 9px 0 0 4px; text-transform: uppercase; text-decoration: none; font-family: Myriad-Pro-Bolder, sans-serif; } } #newsletter { width: 136px; height: 58px; background: url('/images/frontend/right-newsletter.png'); input[type="text"] { width: 102px; height: 15px; padding: 3px 0 0 4px; margin: 0 0 0 4px; border: none; font-size: 10pt; -moz-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.25) inset; -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.25) inset; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.25) inset; } input[type="submit"] { width: 14px; height: 20px; margin: 0 0 0 4px; background: none; border: none; cursor: pointer; } } #photos { height: 404px; margin: 4px 0; background: url('/images/frontend/photos.png'); .header { margin-bottom: 7px; } a { display: block; margin: 0 0 0 4px; } img { width: 128px; height: 115px; } } #poll { width: 136px; background-color: #FFFFFF; min-height: 143px; width: 135px; border-bottom: 1px solid #999999; border-right: 1px solid #999999; margin-bottom: 5px; table { margin: 9px 0 9px 4px; width: 95%; td { font-size: 10pt; font-family: Myriad-Pro-Bold, sans-serif; width: 100px; &:nth-child(2) { width: 0px; padding: 0 4px; } } tr:first-child td { padding: 9px 0; } } div { height: 10px; background: #EF3500; } .button { color: white; background: #AFAFAF; text-transform: uppercase; margin: 9px 0; padding: 3px 3px 0 3px; font-size: 9pt; text-decoration: none; &:hover { color: @link_color; } } }