/* ------------------------------------------------------------- HAMBO DEVELOPMENT - HTTP://HAMBODEVELOPMENT.COM YOU DESIGN _WE DEVELOP ------------------------------------------------------------- */ html { background: #fff; overflow-x: hidden; } body { background: #fff url(/assets/images/layout/header.jpg) no-repeat center 0; overflow-x: hidden; } /* DIV CLASSES -------------------------------------------------------------*/ /* RSS links */ a.rss span, a.navigation span { display: block; height: 0; overflow: hidden; } a.navigation { background: url(/assets/images/icons/video-nav.png) no-repeat 0 0; display: block; position: absolute !important; width: 32px; } a.prev { background-position: 0 0; } a.next { background-position: -32px 0; } /* RSS and Read More in headers */ .title_link { position: absolute; right: 15px; top: 12px; text-align: center; width: 80px; } .title_link a { color: #dd3b2e; display: block; font-family: Tahoma; font-size: 10px; margin-bottom: 6px; padding: 0; text-decoration: underline; text-transform: uppercase; } /* Summary block on homepage */ .summary { background: url(/assets/images/layout/feedsframe.jpg) no-repeat 0 0; height: 902px; padding: 63px 0 0 56px; position: relative; left: -56px; width: 991px; } .summary ul { list-style: none; } .summary li { margin: 0 0 20px; } .summary li p { margin-bottom: 5px; } .summary .col { float: left; margin-right: 15px; width: 300px; } .summary .contentblock { background: url(/assets/images/layout/dark-overlay.png); margin-bottom: 15px; padding: 0 15px 15px; position: relative; width: 270px; } .summary h2 { padding: 10px 0; position: relative; } .summary .news li { padding-right: 15px; } .summary .news h2 { width: 250px; } .summary .news a h2 { color: #FFF; } .summary .news h3 { font-size: 1.4em; line-height: 1.2em; text-transform: uppercase; } .summary .gigs { background: url(/assets/images/layout/light-overlay.png); color: #333; } .summary .gigs li { position: relative; } .summary .gigs a h2 { color: #000; } .summary .gigs h3 { color: #dd3b2e; font-size: 1.6em; margin: 0 0 3px; } .summary .gigs h3 span { color: #333; font-size: 0.75em; margin-left: 25px; } .summary .gigs a.tickets { color: #5bcabf; display: block; font-family: "Trebuchet MS"; font-size: 1.2em; position: absolute; right: 20px; text-decoration: underline; text-transform: uppercase; top: -2px; } /* Music panel in summary block & on side panel */ .musicpanel li { margin: 17px 0 0; width: 275px; } .musicpanel img.cover_art { border: 1px solid #000; float: left; margin-right: 15px; } .musicpanel p { line-height: 1.2em; margin: 10px 0; } .musicpanel li a { color: #5bcabf; font-family: "Trebuchet MS"; text-decoration: underline; text-transform: uppercase; } .musicpanel a h2 { color: #FFF; } .summary .photos {float: left; } .summary .photos .title { } .summary .photos ul { float: left; padding: 0px; width: 150px; } .summary .photos li { float: left; margin-left: 75px; } .summary .photos li:hover img { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); } .photos img { border: 4px solid #fff; border-bottom-width: 20px; } .photos h4 { color: #dd3b2e; font-size: 12px; padding: 10px 0 0; text-align: center; } .minisummary { background: url(/assets/images/layout/minisummary-frame.jpg) no-repeat 0 0; height: 310px; left: -20px; } .minisummary .photos { top: 0; width:auto; } .minisummary .photos ul { width: 550px; } .minisummary .musicpanel { margin-top: -95px; } /* Video page & Video section on homepage */ .video { background: url(/assets/images/layout/video-bg.jpg) no-repeat 0 0; border-bottom: 1px dashed #000; height: 607px; margin: 0 0 10px; padding: 30px 0 0 88px; position: relative; } .video .player { height: 471px; width: 764px; } .video ul { list-style: none; margin: 17px 0 0 132px; } .video li { float: left; margin-right: 7px; } .video li a { background: url(/assets/images/layout/dark-overlay.png); border: 1px solid #000; display: block; float: left; height: 77px; padding: 3px 5px 0; width: 135px; } .video li img { border: 1px solid #000; float: left; margin-right: 7px; } .video li h6 { margin: 12px 0 0; } .video li h6, .video li span { color: #fff; display: block; } .video a.navigation { height: 32px; top: 543px; } .video a.prev { left: 180px; } .video a.next { left: 840px; } .videoplayer { height: 577px; padding: 30px 0 0 15px; } .videoplayer .player { float: left; margin-right: 45px; width: 679px; } .videoplayer .selector { background: url(/assets/images/layout/dark-overlay.png); float: left; margin-top: 105px; padding: 10px 10px 4px; } .videoplayer ul { margin: 0; } .videoplayer li { float: none; margin-bottom: 6px; } .videoplayer li a { float: none; } .main { background: url(/assets/images/layout/lissie-tile.jpg) repeat-y 0 0; float: left; margin: 12px 15px 0 -15px; width: 628px; } .main .contentblock { background: url(/assets/images/layout/lissie_footer.jpg) no-repeat 0 bottom; padding: 20px 48px 75px 53px; position: relative; z-index: 10; zoom: 1; } .main .title { background: url(/assets/images/layout/lissie_header.jpg); height: 70px; margin-bottom: -25px; padding: 58px 68px 22px 45px; position: relative; z-index: 0; } .article { border-bottom: 1px dashed #a8a8a8; margin-bottom: 10px; padding: 0 2px 5px; position: relative; } .article blockquote { color: #5bcabf; float: left; } .article cite { color: #5bcabf; font-size: 1.2em; line-height: 1.2em; } .article .meta { margin-bottom: 3px; } .article .meta a { color: #5bcabf; font-family: "Trebuchet MS"; font-size: 0.8em; margin-right: 10px; text-decoration: underline; text-transform: uppercase; } .crumbtrail { color: #b7b7b7; font-family: "Trebuchet MS"; font-size: 1.3em; margin: -10px 0 20px; } .crumbtrail ul { list-style: none; } .crumbtrail li { float: left; margin-right: 5px; } .crumbtrail a { color: #dd3b2e; } .crumbtrail a.on { color: #fff; } .contentblock p.sectionnav { border-bottom: 1px dotted #ccc; clear: left; font-size: 15px; margin-bottom: 15px; padding: 0 0 5px; } .contentblock p.sectionnav a { color: #dd3b2e; text-transform: uppercase; } .contentblock p.sectionnav a.on { color: #fff; } /* News pages */ .news .article img { float: right; margin: 0 0 10px 10px; } .news .article h3 { font-size: 1.8em; line-height: 1.2em; } .news .article span { font-size: 1.4em; line-height: 1.2em; } .news .detail p { padding: 10px 30px 10px 0; } /* Gigs pages */ .gigs .article { padding: 10px 0 20px 110px; } .gigs .article h3 { font-size: 1.8em; line-height: 1.2em; } .gigs .article h3 span { color: #dd3b2e; display: block; float: left; font-size: 0.9em; margin-left: -110px; } .gigs .article a.tickets { background: url(/assets/images/icons/tickets.gif) no-repeat 0 0; color: #5bcabf; display: block; font-family: "Trebuchet MS"; font-size: 1.2em; margin: 0 0 20px; padding: 5px 0 5px 30px; position: absolute; top: 10px; right: 10px; text-decoration: underline; text-transform: uppercase; } .gigs .detail table { font-size: 1.2em; margin: 10px 0 20px; width: 290px; } .gigs .detail table td { height: 15px; } .gigs .detail table a { color: #dd3b2e; } input.attending { border: none; display: block; height: 25px; width: 110px; } input.imattending { background:url("/assets/images/icons/button_imattending.png") no-repeat; margin-bottom: 5px; } input.notattending { background:url("/assets/images/icons/button_notattending.png") no-repeat; } .detail { padding-bottom: 15px; padding-left: 2px !important; } .detail h2 { font-size: 3em; line-height: 1.1em; text-transform: uppercase; } .detail h4 { font-size: 1.8em; line-height: 1.3em; text-transform: uppercase; } .detail a.tickets { position: relative !important; } /* Comments block */ .comments { padding-top: 10px; } .comments h3 { font-size: 1.8em; line-height: 1.2em; text-transform: uppercase; } .comments form { padding-top: 15px; } .comments label { display: block; float: left; font-family: "Trebuchet MS"; font-size: 1.4em; line-height: 1.4em; padding-top: 5px; width: 105px; } .comments label span { color: #5bcabf; display: block; } .comments textarea { height: 90px; width: 350px; } .comments .buttons { padding: 10px 70px 0 0; text-align: right; } .comments ul { list-style: none; padding-bottom: 50px; } .comments li { font-family: "Trebuchet MS"; font-size: 1.2em; line-height: 1.2em; padding: 30px 0 0 110px; position: relative; } .comments cite { color: #5bcabf; position: absolute; top: 30px; left: 0; } .comments cite span { color: #fff; display: block; } .comments .login { margin-bottom: 25px; } .comments .login p { font-size: 1.4em; line-height: 1.4em; padding-top: 15px; } .comments .login a { color: #5bcabf; font-family: "Trebuchet MS"; font-size: 0.8em; margin-right: 15px; text-decoration: underline; text-transform: uppercase; } .map { float: right; margin: 20px 0 10px 10px; } .ecology .article p { clear: left; font-size: 1.2em; line-height: 1.2em; margin-bottom: 15px; } p.pagination a { color: #dd3b2e; margin-right: 5px; } p.pagination a.on { color: #fff; } /* Photos page */ .photos .grid { margin: 50px 0 0; } .photos .grid ul { float: left; list-style: none; padding-left: 25px; } .photos .grid li { float: left; margin: 0 20px 25px 0; } .photos .grid a { display: block; float: left; } .photos .grid h4 { padding: 5px 0 0; } .photos .detail .viewer { border-bottom: 1px dashed #a8a8a8; padding: 20px 40px; position: relative; width: 450px; } .photos .detail .viewer p { font-size: 1.2em; padding: 10px; } .photos a.navigation { color: #4fbfb3; font-size: 1.2em; padding-top: 40px; text-decoration: underline; text-transform: uppercase; top: 130px; } .photos a.prev { left: -10px; } .photos a.next { left: 500px; } /* Music page */ .music .article { margin: 20px 0; padding-bottom: 20px; } .music div.article img { display: block; float: left; } .music div.info { margin: 0 0 0 300px; } .music .article p { font-size: 1.4em; line-height: 1.2em; } .music .article p span { display: block; } .music .tracklisting { background: #000; margin: 20px 0; padding: 10px; } .music .tracklisting h4 { font-size: 1.8em; line-height: 1.4em; margin-bottom: 20px; text-transform: uppercase; } .music .tracklisting ul { list-style: none; padding-right: 20px; } .music .tracklisting li { color: #dd3b2e; font-size: 12px; margin-bottom: 20px; } .music .tracklisting li span { display: block; margin-top: -1em; text-align: right; } .music div.articlefooter { clear: both; position: relative; padding: 40px 0 0 0; } .music div.meta { font-size: 0.9em; width: 100%; position: absolute; bottom: 0; } .music div.meta a { color: #5bcabf; font-family: "Trebuchet MS"; text-decoration: underline; text-transform: uppercase; } .music p.actions { bottom: 0; font-size: 1.1em; position: absolute; right: 0; text-align: right; width: 300px;} .music p.actions a { margin-left: 10px; } /* Songs page */ .songs .tracklisting { float: left; margin-top: -10px; margin-left: -10px; width: 255px; } .songs .lyrics { margin: 0 0 20px 275px; } .songs .lyrics h5 { margin-bottom: 20px; } .songs .lyrics p { font-size: 12px; } .songs #audioplayer { height: 20px; margin-bottom: 20px; width: 250px; } /* Join page */ .join form { clear: left; width: 420px; } .join form p { clear: left; font-size: 15px; } .join form p.intro { padding: 20px 0 30px; } .join form p small { font-size: 0.6em; } .join label { clear: left; display: block; float: left; font-size: 1.2em; line-height: 3em; width: 125px; } .join label span { display: block; margin-top: -20px; } .join .textfield { float: left; font-size: 1.2em; margin-bottom: 10px; padding: 5px; width: 170px; } .join select { float: left; margin: 10px 50px 10px 0; padding: 3px 5px; } .join select.groupselect { margin-right: 10px; } .join .checkboxes { margin-top: 25px; } .join .checkboxes span { width: 300px; display: block; font-size: 1.4em; line-height: 1.4em; padding-bottom: 10px; } .join .checkboxes label { clear: none; line-height: 1.2em; margin-right: 25px; padding-top: 3px; width: auto; } .join .checkboxes input { float: left; margin-right: 12px; } .join .checkboxes div { clear: left; padding: 0 0 0 45px; width: 400px; } .join .checkboxes div span { display: block; font-size: 1em; padding: 10px 0 10px 30px; } .join input[type=radio], .join input[type=checkbox] { margin-bottom: 10px; } /* Side panel */ .panel { float: left; margin: 8px 0 0; width: 330px; } .panel .block { background: url(/assets/images/layout/block-footer.jpg) no-repeat 0 bottom; margin: 0 0 15px; padding: 0 0 50px; } .panel .block .title { background: url(/assets/images/layout/panel-title.jpg) no-repeat 0 0; height: 37px; padding: 38px 0 0 34px; position: relative; } .panel .block .title_link { right: 30px; top: 42px; } .panel ul { background: transparent url(/assets/images/layout/block-bg.jpg) repeat-y 0 0; list-style: none; padding: 10px 0 10px 33px; zoom: 1; } .panel .archive ul ul { background: none; padding: 5px 0 0; } .panel .archive li { font-size: 1.8em; padding: 0 0 0 5px; } .panel .archive li li { font-size: 0.7em; margin: 0 0 0 -5px; padding: 3px 0 0; } .panel .archive li a { color: #4fbfb3; font-family: "Trebuchet MS"; text-decoration: underline; } .panel .musicpanel p { font-size: 1.2em; } .panel .musicpanel ul { padding-top: 25px; } /* MASTHEAD -------------------------------------------------------------*/ #masthead { border-bottom: 1px dashed #000; height: 500px; position: relative; } #masthead .logo { background: url(/assets/images/layout/logo.png) no-repeat 0 0; display: block; height: 227px; left: 15px; position: relative; top: 62px; width: 223px; } #masthead h1.logo { text-indent: -9999px; } #masthead .logo span { display: block; height: 0; overflow: hidden; } .membership { font-family: "Trebuchet MS", sans-serif; text-transform: uppercase; left: -15px; position: absolute; top: 425px; width: 380px; } .membership .login { float: left; padding: 15px 0 0 10px; } .membership h3 { background: url(/assets/images/layout/membership.gif) no-repeat 0 0; float: left; height: 18px; margin: 0 5px 5px 5px; text-indent: -9999px; width: 68px; } .membership form { clear: left; position: relative; } .membership .textfield { color: #e44b48; font-size: 12px; margin-right: 5px; padding: 2px 10px 3px; width: 110px; } .membership .button { display: block; position: absolute; top: 0; right: -25px; } .membership .nav { padding-right: 0px; text-align: right; } .membership .nav a { color: #5bcabf; font-family: "Trebuchet MS"; font-size: 1.1em; margin: 0 5px; text-decoration: underline; text-transform: uppercase; } .membership a.join { background: url(/assets/images/icons/join-badge.png) no-repeat 0 0; display: block; height: 70px; float: left; width: 70px; } .membership a.join span { display: block; height: 0; overflow: hidden; } .i18n { left: 510px; position: absolute; top: 421px; } .i18n li { float: left; margin-left: 4px; } .i18n a { background: url(/assets/images/icons/flags.png) no-repeat 0 0; display: block; height: 11px; width: 16px; } .i18n span { display: block; height: 0; overflow: hidden; } .social ul { left: 14px; list-style: none; padding: 0 10px; position: absolute; top: 0; } .social li { float: left; } .social a { background: url(/assets/images/icons/social.png) no-repeat 0 0; display: block; float: left; position: relative; } .social a span { display: block; height: 0; overflow: hidden; } .social .youtube a { background-position: 7px 0; height: 16px; padding: 0 20px 0 20px; top: 24px; width: 40px; } /*.social .ilike a { background-position: 11px -20px; height: 13px; padding: 0 6px 0 11px; top: 24px; width: 35px; }*/ /*.social .bebo a { background-position: 6px -40px; height: 14px; padding: 0 8px 0 6px; top: 21px; width: 43px; }*/ .social .facebook a { background-position: 8px -60px; height: 11px; padding: 0 20px 0 40px; top: 21px; width: 48px; } /*.social .flickr a { background-position: 6px -80px; height: 12px; padding: 0 6px; top: 19px; width: 38px; } */ .social .lastfm a { background-position: 6px -100px; height: 16px; padding: 0 0px 0 20px; top: 17px; width: 40px; } .social .myspace a { background-position: 6px -120px; height: 13px; padding: 0 0px 0 20px; top: 15px; width: 52px; } .social .twitter a { background-position: 6px -140px; height: 16px; padding: 0 0px 0 20px; top: 11px; width: 60px; } /* MAIN NAVIGATION ------------------------*/ #main_nav { position: absolute; right: 0; top: 443px; } .sitenav { float: left; } .sitenav ul { list-style: none; float: left; } .sitenav li { float: left; } .sitenav a { background: url(/assets/images/layout/nav.png) no-repeat 0 0; display: block; float: left; height: 45px; } .sitenav a span { display: block; height: 0; overflow: hidden; } .sitenav .nHome a { background-position: 0 0; width: 66px; } .sitenav .nNews a { background-position: 0 -45px; width: 59px; } .sitenav .nGigs a { background-position: 0 -90px; width: 53px; } .sitenav .nVideo a { background-position: 0 -135px; width: 61px; } .sitenav .nPhotos a { background-position: 0 -180px; width: 73px; } .sitenav .nBio a { background-position: 0 -403px; width: 60px; } .sitenav .nBlog a { background-position: 0 -225px; width: 53px; } .sitenav .nMusic a { background-position: 0 -270px; width: 65px; } .sitenav .nEcology a { background-position: 0 -315px; width: 77px; } .sitenav .nStore a { background-position: 0 -360px; width: 63px; } .sitenav .nForum a { background-position: 0 -453px; width: 68px; } .sitenav .nHome a:hover, .sitenav .nHome a.on { background-position: -77px 0; } .sitenav .nNews a:hover, .sitenav .nNews a.on { background-position: -77px -45px; } .sitenav .nGigs a:hover, .sitenav .nGigs a.on { background-position: -77px -90px; } .sitenav .nVideo a:hover, .sitenav .nVideo a.on { background-position: -77px -135px; } .sitenav .nPhotos a:hover, .sitenav .nPhotos a.on { background-position: -77px -180px; } .sitenav .nBio a:hover, .sitenav .nBio a.on { background-position: -79px -403px; } .sitenav .nBlog a:hover, .sitenav .nBlog a.on { background-position: -77px -225px; } .sitenav .nMusic a:hover, .sitenav .nMusic a.on { background-position: -77px -270px; } .sitenav .nEcology a:hover, .sitenav .nEcology a.on { background-position: -77px -315px; } .sitenav .nStore a:hover, .sitenav .nStore a.on { background-position: -77px -360px; } .sitenav .nForum a:hover, .sitenav .nForum a.on { background-position: -76px -453px; } #main_nav a.nNewsletter { background: url(/assets/images/layout/newsletter-button.png) no-repeat; height: 31px; right: 70px; position: absolute; top: -120px; width: 129px; } /* SITE CONTAINERS -------------------------------------------------------------*/ #container { margin: 0 auto; width: 960px; } /* FOOTER -------------------------------------------------------------*/ #footer { clear: left; padding: 15px 0 125px; position: relative; } #footer .sitenav { border-top: 1px dashed #000; } #footer img.lissielogo { display: block; height: 65px; position: absolute; right: 10px; top: 8px; width: 143px; } #footer p { clear: left; text-align: right; font-size: 1.2em; line-height: 2.3em; margin-top: 60px; padding-right: 10px; text-transform: uppercase; } #footer p, #footer a { color: #000; } #footer p .37percent { background-image: url(http://www.lissie.com/assets/images/layout/37percent.gif); background-repeat: no-repeat; text-indent: -5555px; display: block; height: 20px; width: 17px; border: 1px solid #9F0; position: relative; } /* FORMS -------------------------------------------------------------*/ /* GENERAL FORM STYLING ------------------------*/ .form fieldset { border-bottom: 1px solid #eee; margin-bottom: 15px; padding-bottom: 15px; } .form input[type="text"], .form input[type="submit"] { background-color: #e8e8e8; -webkit-border-radius: 5px; -moz-border-radius: 5px; padding: 5px; } .form input[type="submit"] { border: none; margin: 0 auto; } .form input:hover[type="submit"] { cursor: pointer; } .form input[type="text"] { border: 2px solid #e8e8e8; } .form input[type="text"]:focus, .form textarea:focus { border: 2px solid #ffbe00; } /* COLOURBOX -------------------------------------------------------------*/ /* ColorBox Core Style The following rules are the styles that are consistant between all ColorBox themes */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative; overflow:visible;} #cboxLoadedContent{overflow:auto;} #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} /* ColorBox example user style The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, in hope that this will make the relationship easier to understand. Thanks, jack@colorpowered.com */ #cboxOverlay{background:#fff;} #colorbox{} #cboxTopLeft{width:14px; height:14px; background:url(/assets/images/layout/colourbox/controls.png) 0 0 no-repeat;} #cboxTopCenter{height:14px; background:url(/assets/images/layout/colourbox/border.png) top left repeat-x;} #cboxTopRight{width:14px; height:14px; background:url(/assets/images/layout/colourbox/controls.png) -36px 0 no-repeat;} #cboxBottomLeft{width:14px; height:43px; background:url(/assets/images/layout/colourbox/controls.png) 0 -32px no-repeat;} #cboxBottomCenter{height:43px; background:url(/assets/images/layout/colourbox/border.png) bottom left repeat-x;} #cboxBottomRight{width:14px; height:43px; background:url(/assets/images/layout/colourbox/controls.png) -36px -32px no-repeat;} #cboxMiddleLeft{width:14px; background:url(/assets/images/layout/colourbox/controls.png) -175px 0 repeat-y;} #cboxMiddleRight{width:14px; background:url(/assets/images/layout/colourbox/controls.png) -211px 0 repeat-y;} #cboxContent{background:#fff;} #cboxLoadedContent{margin-bottom:5px;} #cboxLoadingOverlay{background:url(/assets/images/layout/colourbox/loading_background.png) center center no-repeat;} #cboxLoadingGraphic{background:url(/assets/images/layout/colourbox/loading.gif) center center no-repeat;} #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;} #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(/assets/images/layout/colourbox/controls.png) 0px 0px no-repeat; width:23px; height:23px; text-indent:-9999px;} #cboxPrevious{left:0px; background-position: -51px -25px;} #cboxPrevious.hover{background-position:-51px 0px;} #cboxNext{left:27px; background-position:-75px -25px;} #cboxNext.hover{background-position:-75px 0px;} #cboxClose{right:0; background-position:-100px -25px;} #cboxClose.hover{background-position:-100px 0px;} .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;} .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;} .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;} .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;} img#buzzdeck { display: none; }