/* Copyright (c) 2007, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt version: 2.2.0 */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} ol,ul {list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';} abbr,acronym {border:0;} /* Copyright (c) 2007, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt version: 2.2.0 */ /** * Percents could work for IE, but for backCompat purposes, we are using keywords. * x-small is for IE6/7 quirks mode. * */ body {font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;} table {font-size:inherit;font:100%;} /** * 99% for safari; 100% is too large */ select, input, textarea {font:99% arial,helvetica,clean,sans-serif;} /** * Bump up !IE to get to 13px equivalent */ pre, code {font:115% monospace;*font-size:100%;} /** * Default line-height based on font-size rather than "computed-value" * see: http://www.w3.org/TR/CSS21/visudet.html#line-height */ body * {line-height:1.22em; } /* --------------------------- BASE */ body { background:#161922 url('gfx/bg_body.jpg') top left repeat-x; } #stamp { position:absolute; top:25px; left:-125px; width:109px; height:110px; xbackground:url('gfx/stamp.png'); } a { color:#EB0053; } a:hover { text-decoration:none; } .mainWrapper { width:658px; margin:0px auto 10px auto; position:relative; } #frontPage h1 { background:url('../images/hd_band.jpg'); } #english h1 { background:url('../images/hd_band.jpg'); } #links h1 { background:url('../images/hd_keyboard.jpg'); } #story h1 { background:url('../images/hd_drums.jpg'); } #gigspage h1 { background:url('../images/hd_gig.jpg'); } #members h1 { background:url('../images/hd_guitar.jpg'); } #gallery h1 { background:url('../images/hd_instruments.jpg'); } #audiovideo h1 { background:url('../images/hd_thingie.jpg'); } #products h1 { background:url('../images/hd_stage.jpg'); } #press h1 { background:url('../images/hd_keyboard.jpg'); } #header { background:white; } #header h1 { height:300px; width:650px; margin:0px auto; } #header h1 span { display:none; } #footer { background:transparent url('gfx/bg_footer.png') bottom left no-repeat; padding-bottom:21px; border-top:1px solid #c0c0c0; font-size:86%; position:relative; } #footer h2 { font-weight:bold; margin-bottom:4px; } #footer .content { padding:10px 20px 6px 20px; } #footer a { color:#303030; } #footer .theBand { background:url('gfx/theband.gif'); position:absolute; top:-20px; right:20px; width:150px; height:99px; } #footer .navigation { float:left; margin-right:40px; } #footer .navigation ul li { margin-top:4px; } #footer ul.contact li { background:url('gfx/i_email.gif') 0 0.15em no-repeat; padding-left:21px; } /* --------------------------- ETUSIVU */ #gigs { width:246px; background:transparent url('gfx/bg_gigs_center.gif') top left repeat-y; font-size:86%; } #gigs .content { padding:0px 20px 8px 20px; background:transparent url('gfx/bg_gigs_top.gif') top left no-repeat; } #gigs a { color:#332D28; } #gigs h2 { height:45px; } #gigs h2 span { display:none; } #gigs table, #gigspage table { width:100%; margin-bottom:15px; } #gigs table th, #gigspage table th { font-weight:bold; } #gigs table td, #gigs table th { padding:3px 10px 3px 5px; border-bottom:1px solid #E6D7BC; vertical-align:top; color:#513938; } #gigspage table td, #gigspage table th { padding:3px 10px 3px 0px; border-bottom:1px solid #e0e0e0; vertical-align:top; } .gigsFooter { height:30px; width:100%; background:red url('gfx/bg_gigs_bottom.gif') top left; } .gigsFooter a { margin-left:25px; } #oldGigs, #oldNews { display:none; } #news p { margin-bottom:10px; padding-bottom:18px; padding-right:8px; background:url('gfx/bg_newsitem.jpg') bottom right no-repeat; } #frontPage .leftColumn { float:left; width:350px; } #frontPage .rightColumn { float:right; width:246px; } .showOldNews { padding-right:14px; } .showOldGigs { padding-right:12px; } #gigs .open { background:url('gfx/arrow_gigs_2.gif') right 5px no-repeat; } #gigs .closed { background:url('gfx/arrow_gigs_1.gif') right 5px no-repeat; } #news .open { background:url('gfx/arrow_news_2.gif') right 6px no-repeat; } #news .closed { background:url('gfx/arrow_news_1.gif') right 6px no-repeat; } /* --------------------------- TUOTTEET */ #products .leftColumn { width:360px; } #products .rightColumn { width:220px; font-size:90%; } .productWrapper { margin-bottom:12px; } .productWrapper img { float:left; margin-right:12px; border:1px solid #c0c0c0; } .price { font-weight:bold; } /* --------------------------- PRESSI */ #press .leftColumn { width:360px; } #press .rightColumn { width:220px; } .pressWrapper { margin-bottom:12px; } .pressWrapper img { border:1px solid #c0c0c0; } .formats { margin-bottom:12px; } .formats li.first { background:none; padding-left:0px; } .formats li { display:inline; background:url('gfx/list_divider.gif') 0em 0.20em no-repeat; padding-left:4px; font-size:90%; } .pressImages li { margin-bottom:12px; } .pressImages li img { border:1px solid #c0c0c0; } /* --------------------------- LINKIT */ #links .leftColumn { width:360px; } #links .leftColumn p { margin-bottom:4px; } #links .leftColumn p a { margin-bottom:4px; background:url('gfx/arrow_external_link.gif') right 4px no-repeat; padding-right:12px; } /* --------------------------- ENGLISH */ #english .leftColumn { width:360px; } /* --------------------------- GIGS PAGE */ #gigspage .leftColumn { width:360px; } #gigspage .rightColumn { width:220px; font-size:90%; } /* --------------------------- AUDIO & VIDEO */ #audiovideo .leftColumn { width:360px; } #audiovideo .rightColumn { width:220px; } .albumWrapper { margin-bottom:12px; } .albumWrapper img { float:left; margin-right:12px; border:1px solid #c0c0c0; } ul.audio li { margin-bottom:4px; background:url('gfx/i_music.gif') 0em 0em no-repeat; padding-left:22px; } /* --------------------------- GALLERIA */ .galleryPage { width:600px; } .galleryRow { margin-bottom:20px; } .galleryRow .first { margin-left:0px; } .galleryImage { float:left; margin-left:24px; } .galleryNav { position:absolute; top:24px; right:20px; } .galleryNav li { float:left; border-left:1px solid #c0c0c0; font-size:85%; padding-left:6px; margin-left:6px; } .galleryNav .first { border-left:none; } .galleryNav .active a { color:#888; text-decoration:none; } #gallery .page { position:relative; } /* --------------------------- NAVIGATION */ #navigation { width:650px; height:32px; margin:0px auto; background:black url('gfx/bg_topnav.gif') bottom left no-repeat; } #navigation li { float:left; } #navigation a { display:block; background:url('gfx/bg_mainnav2.gif') 0px 0px; height:32px; } #navigation a span { display:none; } a#nav_1 { width:71px; background-position:0px 0px; margin-left:6px; } a#nav_1:hover { background-position:0px -32px; } .active a#nav_1, .active a#nav_1:hover { background-position:0px -64px; } a#nav_2 { width:95px; background-position:-71px 0px; } a#nav_2:hover { background-position:-71px -32px; } .active a#nav_2, .active a#nav_2:hover { background-position:-71px -64px; } a#nav_3 { width:62px; background-position:-166px 0px; } a#nav_3:hover { background-position:-166px -32px; } .active a#nav_3, .active a#nav_3:hover { background-position:-166px -64px; } a#nav_4 { width:62px; background-position:-228px 0px; } a#nav_4:hover { background-position:-228px -32px; } .active a#nav_4, .active a#nav_4:hover { background-position:-228px -64px; } a#nav_5 { width:112px; background-position:-290px 0px; } a#nav_5:hover { background-position:-290px -32px; } .active a#nav_5, .active a#nav_5:hover { background-position:-290px -64px; } a#nav_6 { width:72px; background-position:-402px 0px; } a#nav_6:hover { background-position:-402px -32px; } .active a#nav_6, .active a#nav_6:hover { background-position:-402px -64px; } a#nav_7 { width:73px; background-position:-475px 0px; } a#nav_7:hover { background-position:-475px -32px; } .active a#nav_7, .active a#nav_7:hover { background-position:-475px -64px; } a#nav_8 { width:61px; background-position:-547px 0px; } a#nav_8:hover { background-position:-547px -32px; } .active a#nav_8, .active a#nav_8:hover { background-position:-547px -64px; } a#nav_9 { width:26px; background-position:-608px 0px; } a#nav_9:hover { background-position:-608px -32px; } .active a#nav_9, .active a#nav_9:hover { background-position:-608px -64px; } /* --------------------------- PAGE */ .page h2 { color:#EB0053; font-size:145%; margin-bottom:10px; font-weight:normal; } .page h3 { xcolor:#EB0053; font-size:110%; margin-bottom:5px; font-weight:bold; } .page h4 { xcolor:#EB0053; font-size:100%; margin-bottom:5px; font-weight:bold; } .page h5 { xcolor:#EB0053; font-size:100%; margin-bottom:5px; font-weight:bold; } .page h6 { xcolor:#EB0053; font-size:100%; margin-bottom:5px; font-weight:bold; } .page { clear:both; padding:20px; background:white; } .page p { margin-bottom:16px; line-height:140%; } .leftColumn { float:left; width:290px; } .rightColumn { float:right; width:290px; } .storyImageContainer { width:160px; margin-bottom:2px; float:left; margin-right:12px; } .storyImageContainer img { display:block; margin:auto; width:156px; border:2px solid white; } .storyImageContainer img.active { border:2px solid black; } .storyImageContainer .caption { padding:6px 2px; font-size:10px; /*text-align:center;*/ } /* --------------------------- STOORI */ .imageOnLeft .storyImageContainer { } .imageOnRight .storyImageContainer { float:right; margin-left:20px; margin-right:0px; } #story .storyImageContainer { width:244px; } #story .storyImageContainer img { width:240px; } /* --------------------------- KOKOONPANO */ #members .page { height:440px; position:relative; overflow:hidden; } .memberInfo { float:left; width:250px; xfont-size:88%; display:none; } .memberInfo table { margin-bottom:16px; } .memberInfo table td { padding:3px 10px 3px 0px; vertical-align:top; } #UIband { margin-top:30px; height:340px; width:270px; float:right; position:relative; background:transparent url('../images/UIband_blur.jpg'); } #UIband img { position:absolute; top:0px; left:0px; } .bandMember { cursor:pointer; background-image: url(clear.gif); } .blurred { display:none; } #UImember_1 { position:absolute; top:40px; left:10px; width:50px; height:230px; } #UImember_2 { position:absolute; top:10px; left:60px; width:95px; height:320px; } #UImember_3 { position:absolute; top:85px; left:155px; width:35px; height:130px; } #UImember_4 { position:absolute; top:55px; left:190px; width:20px; height:150px; } #UImember_5 { position:absolute; top:40px; left:210px; width:50px; height:225px; } #memberImage { position:absolute; bottom:0px; right:-610px; width:610px; height:420px; cursor:pointer; } #memberImage img { display:block; margin-top:40px; } /* --------------------------- FORMS */ label { font-weight:bold; } #feedbackForm { font-size:88%; width:360px; margin:20px auto 0px auto; } #feedbackForm fieldset { background:white; padding:10px 20px; } #feedbackForm .formRow { position:relative; xpadding-left:140px; margin-bottom:8px; } #feedbackForm .formRow .text, #feedbackForm .formRow textarea { width:99%; } #feedbackForm label { xposition:absolute; xtop:3px; xleft:0px; xwidth:130px; xtext-align:right; display:block; } .buttonRow { text-align:right; xpadding-right:13px; } .buttonRow input { margin-left:8px; } .buttonRow .submit { font-weight:bold; } form .text, textarea { border:1px solid #c0c0c0; padding:2px; } form .focus { background:#FFF5CD; } body#feedback { background:#f0f0f0; } #feedback .thanks { background:white; padding:20px; width:300px; margin:auto; margin-top:20px; } /* --------------------------- EFFECTS */ .shadowLeft { position:absolute; top:0px; left:-20px; width:20px; height:801px; background:transparent url('gfx/shadow_left.png') top left no-repeat; } .shadowRight { position:absolute; top:0px; right:-20px; width:20px; height:801px; background:transparent url('gfx/shadow_right.png') top left no-repeat; } /* --------------------------- CLEARFIX */ .clearfix:after, #news p:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix, #news p {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix, * html #news p {height: 1%;} .clearfix, #news p {display: block;} /* End hide from IE-mac */