/* Urban Scrumping Styles CONTENTS ---------- 1.over all styles 2.Headings 3.Text 4.Links 5.images 6.layout 7.header 8.menu 9.leftwrap 10.mainwrap 10a. Artist page 10b.contact page 11.releases wrap 12.rightwrap 13.mailing list form 14.Rig Page 15.Footer ------------------- COLOURS ---------- Text #000000 text dark green #165008 (menu) Dark Green #5e8022 (headings) light green #97af4d grey #cccccc grey text #8b8b8b (footer) ------------------- */ /* 1.overall styles ---------------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; } HTML { overflow: scroll; } body { text-align:center; font:12px Tahoma, Verdana, sans-serif; line-height:18px; background-color:#FFFFFF } /* 2.Headings ---------------------------------------------------------------------- */ H1 { color:#fff; line-height:24px; padding:0 5px; margin:0 0 10px 0; background-color:#5e8022; font-size:14px; font-family:Tahoma, Verdana, sans-serif; font-weight:bold; } h2 { color:#fff; line-height:25px; padding:0 5px; margin:0 0 10px 0; background-color:#5e8022; font-size:14px; font-family:Tahoma, Verdana, sans-serif; font-weight:bold; } H3 { color:#5e8022; font-size:14px; font-family:Tahoma, Verdana, sans-serif; font-weight:bold; margin-bottom:10px; text-decoration:none; } H4 { color:#000; line-height:20px; padding:0 5px; margin:0 0 10px 0; background-color:#ccc; font-size:14px; font-family:Tahoma, Verdana, sans-serif; font-weight:bold; } H5 { } H6 { } /* 3.Text ---------------------------------------------------------------------- */ p { text-align:left; color:#000000; margin-bottom:10px; } OL { color:#000; line-height:15px; margin-bottom:10px; padding-left:20px; } UL { color:#000; line-height:15px; list-style-type:circle; margin-bottom:10px; } /* need font size to stop ie empty div bug */ #hr, .hr { height:1px; background-color:#5e8022; margin-bottom:10px; line-height:1px; padding:0; font-size:0; } .clear { clear:both; } .small { font-size:12px; } strong { color:#5e8022; } /* 4.Links ---------------------------------------------------------------------- */ a:link, a:visited { color:#5e8022; text-decoration: underline; border:0; } a:hover, a:active { color:#5e8022; text-decoration: none; border:0; } a:link.highlighted, a:visited.highlighted { color:#666; text-decoration: none; border:0; padding:0; background-color:#fff; display:block; } a:hover.highlighted, a:active.highlighted { color:#fff; text-decoration: none; border:0; padding:0; background-color:#97af4d; display:block; } H3 a:link, H3 a:visited { color:#5e8022; font-family:Tahoma, Verdana, sans-serif; font-weight:bold; margin-bottom:10px; text-decoration:none; } a.readMore:link, a.readMore:visited { color:#5e8022; font-family:Tahoma, Verdana, sans-serif; background:url(/images/readMore.gif) no-repeat right bottom; padding:0 12px 0 0; line-height:20px; } #home p strong a { text-decoration:none;} /* 5.images ---------------------------------------------------------------------- */ a img { border:none; } img.left { float:left; margin:0 10px 0 0; padding:0; display:inline; } img.right { float:right; margin:0 0 0 10px; padding:0; display:inline; } .large { width:275px; height:275px; display:block; margin-bottom:20px; } /* each release has 4 images 1=small(80px) - 2=forthcoming(195px) - 3=large(275px) - 4=Large backcover(275px) */ .inside3 { background-image:url(/images/phaeleh/inside/large.jpg); width:275px; height:275px; } .inside2 { } .inside1 { background-image:url(/images/phaeleh/inside/small.jpg); } .reflections3 { background-image:url(/images/phaeleh/reflections/large.jpg); width:275px; height:275px; } .reflections2 { } .reflections1 { background-image:url(/images/phaeleh/reflections/small.jpg); } .ageofwar4 { background-image:url(/images/darkham/age-of-war/largebk.png); width:275px; height:275px; } .ageofwar3 { background-image:url(/images/darkham/age-of-war/large.jpg); width:275px; height:275px; } .ageofwar2 { } .ageofwar1 { background-image:url(/images/darkham/age-of-war/small.png); } .rorschach4 { background-image:url(/images/gyu/rorschac/largebk.png); width:275px; height:275px; } .rorschach3 { background-image:url(/images/gyu/rorschac/large.png); width:275px; height:275px; } .rorschach2 { } .rorschach1 { background-image:url(/images/gyu/rorschac/small.png); } .darkroom4 { background-image:url(/images/sclist/darkroom/largebk.png); width:275px; height:275px; } .darkroom3 { background-image: url(/images/sclist/darkroom/large.jpg); width:275px; height:275px;} .darkroom2 { } .darkroom1 { background-image: url(/images/sclist/darkroom/small.png); } .solve-problem4 { background-image:url(/images/full-spektrum/solve-problem/largebk.jpg); width:275px; height:275px; } .solve-problem3 { background-image:url(/images/full-spektrum/solve-problem/large.jpg); width:275px; height:275px; } .solve-problem2 { background-image:url(/images/full-spektrum/solve-problem/forthcoming.png); width:195px; height:195px; } .solve-problem1 { background-image:url(/images/full-spektrum/solve-problem/small.jpg); } .begin1 { background-image:url(/images/apathesis/begin/small.png); width:80px; height:80px; } .begin2 { background-image:url(/images/apathesis/begin/forthcoming.jpg); width:195px; height:195px; } .begin3 { background-image:url(/images/apathesis/begin/large.jpg); width:275px; height:275px; } .begin4 { } .security1 { background-image:url(/images/full-spektrum/security-concepts/small.png); width:80px; height:80px; } .security2 { background-image:url(/images/full-spektrum/security-concepts/forthcoming.png); width:195px; height:195px; } .security3 { background-image:url(/images/full-spektrum/security-concepts/large.png); width:275px; height:275px; } .security4 { background-image:url(/images/full-spektrum/security-concepts/large-back.png); width:275px; height:275px; } .within1 { background-image:url(/images/phaeleh/within-the-emptiness/within1.jpg); width:80px; height:80px; } .within2 { background-image:url(/images/phaeleh/within-the-emptiness/within2.jpg); width:195px; height:195px; } .within3 { background-image:url(/images/phaeleh/within-the-emptiness/within3.jpg); width:275px; height:275px; } .within4 { background-image:url(/images/phaeleh/within-the-emptiness/within4.jpg); width:275px; height:275px; } .gyu1 { background:url(/images/gyu/purified/small.jpg) no-repeat 0 0; width:80px; height:80px; } .gyu2 { background-image:url(/images/gyu/purified/forthcoming.jpg); width:195px; height:195px; } .gyu3 { background-image:url(/images/gyu/purified/front.jpg); width:275px; height:275px; } .gyu4 { background-image:url(/images/gyu/purified/back.jpg); width:275px; height:275px; } /* artists have two images normal= small(100px x 100px) 2=Large (275px x whatever is needed) */ .phaeleh { background-image:url(/images/phaeleh/phaeleh.jpg); } .phaeleh2 { background-image:url(/images/phaeleh/phaeleh-big.jpg); width:275px; height:352px;} .apathesis { background-image:url(/images/apathesis/apathesis.jpg); } .apathesis2 { background-image:url(/images/apathesis/apathesis2.jpg); width:275px; height:367px;} .gyu { background-image:url(/images/gyu/gyu.jpg); } .gyu2 {background-image:url(/images/gyu/gyu2.jpg); width:275px; height:396px; } .darkham { background-image:url(/images/darkham/darkham.jpg); } .darkham2 {background-image:url(/images/darkham/darkham2.jpg); width:345px; height:275px; } .sclist { background-image:url(/images/sclist/sclist.jpg); } .sclist2 {background-image:url(/images/sclist/sclist2.jpg); width:275px; height:372px; } .full-spektrum { background-image:url(/images/full-spektrum/full-spektrum.jpg);} .full-spektrum2 {background-image: url(/images/full-spektrum/full-spektrum2.jpg); width:306px; height:275px; } .artistimg { float:right; margin:0 0 10px 10px; display:inline; } /* 6.layout ---------------------------------------------------------------------- */ .container { width:900px; text-align:left; margin:0 auto; position:relative; } .header { width:900px; position:relative; height:117px; } /* add display:inline; to fix float padding but in IE6 */ .leftwrap { float:left; display:inline; width:195px; margin:0 5px 0 0; } .rightwrap { float:left; display:inline; width:195px; margin:0 0 0 5px; } #home .mainwrap { float:left; display:inline; width:500px; } .mainwrap { float:left; display:inline; width:700px; } /* add these styles to clear the float and give footer a top margin */ .margin { height:10px; } .clearfloat { clear:both; } .footer { width:900px; } /* 7.header ---------------------------------------------------------------------- */ .logo { width:256px; height:94px; position:absolute; top:10px; right:0; border:0; } #soundsystem .logo { width:256px; height:94px; position:absolute; top:10px; right:0; border:0; } .rss { width:61px; height:20px; padding:0; margin:0; border:0; position:absolute; left:0; top:10px; } .menu { position:absolute; top:50px; left:0; width:570px; height:55px; } .menu ul { height:18px; } /* menu has 6px padding in total 3px for the back colour and 3px to seperate menu - line hieght keeps the borders small*/ .menu ul li { float:left; display:inline-block; list-style:none; margin:0 6px 0 0; padding:0 6px 0 0; color:#165008; text-decoration:none; font-size:14px; background:url(../images/menuSpacer.gif) no-repeat center right; } /* need to define all of these exactly due to a bug in IE also need to add display:inline-block;*/ .menu ul li a, .menu ul li.home a, .menu ul li.artist a, .menu ul li.releases a, .menu ul li.rig a, .menu ul li.news a, .menu ul li.contact a, .menu ul.releasemenu li a, .menu ul.artistmenu li a, .menu ul.stores li a, .menu ul.stores li.nolink strong { text-decoration:none; padding:4px; color:#165008; display:inline-block; } .menu ul li a:hover { text-decoration:none; background-color:#97af4d; color:#165008; } /* resets all strong element being light green */ .menu ul li.home a strong { color:#165008; } /* stops the last element in the menu from showing border */ .menu .end { background:0; } /* no link styles goes in the menu were there is no link to bring it inline with the padding on the links */ /* 8.menu ---------------------------------------------------------------------- */ .menu ul.releasemenu, .menu ul.artistmenu {width:620px;} /* postion absolute so we can show the correct menu for each page - defined by the body id*/ #home .menu ul.stores { position:absolute; top:35px; left:0; width:570px; } #home .menu ul.releasemenu { position:absolute; top:35px; left:-9999px; } #home .menu ul.artistmenu { position:absolute; top:35px; left:-9999px; } #thanks .menu ul.stores { position:absolute; top:35px; left:0; width:570px; } #thanks .menu ul.releasemenu { position:absolute; top:35px; left:-9999px; } #thanks .menu ul.artistmenu { position:absolute; top:35px; left:-9999px; } #releases .menu ul.stores { position:absolute; top:35px; left:-9999px; width:570px; } #releases .menu ul.releasemenu { position:absolute; top:35px; left:0; } #releases .menu ul.artistmenu { position:absolute; top:35px; left:-9999px; } #releasepage .menu ul.stores { position:absolute; top:35px; left:-9999px; width:570px; } #releasepage .menu ul.releasemenu { position:absolute; top:35px; left:0; } #releasepage .menu ul.artistmenu { position:absolute; top:35px; left:-9999px; } #artistpage .menu ul.stores { position:absolute; top:35px; left:-9999px; width:570px; } #artistpage .menu ul.releasemenu { position:absolute; top:35px; left:-9999px; } #artistpage .menu ul.artistmenu { position:absolute; top:35px; left:0; } #contact .menu ul.stores { position:absolute; top:35px; left:0; width:570px; } #contact .menu ul.releasemenu { position:absolute; top:35px; left:-9999px; } #contact .menu ul.artistmenu { position:absolute; top:35px; left:-9999px; } #news .menu ul.stores { position:absolute; top:35px; left:0; width:570px; } #news .menu ul.releasemenu { position:absolute; top:35px; left:-9999px; } #news .menu ul.artistmenu { position:absolute; top:35px; left:-9999px; } #soundsystem .menu ul.stores { position:absolute; top:35px; left:0; width:570px; } #soundsystem .menu ul.releasemenu { position:absolute; top:35px; left:-9999px; } #soundsystem .menu ul.artistmenu { position:absolute; top:35px; left:-9999px; } /* for each page we need to set the menu back colour*/ #releases .menu .releases a { background-color:#97af4d; } #artistpage .menu .artist a { background-color:#97af4d; } #soundsystem .menu .rig a { background-color:#97af4d; } /* 9.leftwrap ---------------------------------------------------------------------- */ .small a { color:#666; } /* 10.mainwrap ---------------------------------------------------------------------- */ .current { float:left; display:inline; margin:0 10px 10px 0; padding:0; background-repeat:no-repeat; } .artwork { background-repeat:no-repeat; float:right; display:inline; margin:0 0 10px 10px; padding:0; } .front { margin:0 0 20px 0; padding:0; } .back { margin:0; padding:0; } .mainwrap ul { padding-left:20px; } /* --------10a.artist page------- */ a .artistlink { width:100px; height:100px; margin:0 0 3px 0; padding:0; background-repeat:no-repeat; } .artistpage ul { float:left; display:inline-block; margin-right:16px; width:100px; padding-top:10px; border-top:#666 1px dotted; padding-left:0; } .artistpage li { list-style:none; font-size:12px; } .artistpage li, .artistpage li a { color: #666666; text-decoration:none; display:block;} .artistpage li a:hover { color:#165008; display:block; background-color:#97af4d; } .artistpage li a:visited { text-decoration:none; } .artistpage a:active { text-decoration:none; } /* --------10b.contact page------- */ #button { background-color:#5e8022; color:#FFFFFF; border:0; } #button:hover { cursor:pointer; } #textbox { background-color:#CCCCCC; color:#000000; border:0; } /* 11.releases wrap for anywhere the releases appear in the leftwrap ----------------------------------------------------------------------- */ /* need padding-left:0; to cancell out the .mainwrap ul style */ .releaseswrap ul { float:left; display:inline-block; margin-right:15px; margin-bottom:10px; width:82px; padding-top:10px; border-top:#666 1px dotted; padding-left:0; text-align:left; } .releaseswrap ul li { list-style:none; font-size:12px; display:block; text-align:left; text-decoration:none; color: #666666; margin-bottom:2px; } .releaseswrap ul li a { color: #666666; text-decoration:none; display:block; text-align:left; width:80px;} /* need this to sort bug in IE with ul li displey:inline-block */ .releaseswrap ul li a { display:inline-block; text-decoration:none; } .releaseswrap ul li a:hover { color:#165008; display:block; background-color:#97af4d; width:82px; text-decoration:none; } .releaseswrap ul li a:visited { text-decoration:none; } .releaseswrap ul li a:active { text-decoration:none; } /* need this to sort bug in IE with ul li displey:inline-block */ .releaseswrap ul li a:hover { display:inline-block; } .releaseswrap ul li a img { border:#5e8022 1px solid;} /* because to make this work in IE you need displey:inline-block we also need to cancel the padding on the last item in a row to stop IE forcing it onto the next line this is also for the artist page */ ul.end { margin-right:0; } /* add this to give image padding without backround color from the .releaseswrap li a:hover style*/ li.imgmargin a { margin-bottom:3px; } li.imgmargin a:hover { margin-bottom:3px; } /* 11 A. Within the emptiness release page ----------------------------------------------------------------------- */ #releases div.freeArtistWrap { padding-bottom:10px; overflow:hidden; } #releases div.freeArtistWrap img { margin-right:10px; } .freeDownloadLink { text-align:center; } .freeDownloadLink a { color:#FFFFFF; } .freeDownload { margin:50px 0; } /* 11 B. Security Concepts EP release page ----------------------------------------------------------------------- */ .releasebutton { display:block; padding-left:150px; font-size:18px; margin-bottom:30px; line-height:40px; width:250px; } .digitaltuneslink { background:url(/images/logos/digital.jpg) no-repeat 0 5px; margin-top:30px; } .junodownloadlink { background:url(/images/logos/juno.jpg) no-repeat 0 8px; } .addictechdownloadlink { background:url(/images/logos/addictech.jpg) no-repeat 0 0px; } .boomkatlink { background:url(/images/logos/boomkat_logo.gif) no-repeat 0 6px; } .releasebutton:hover { } .buttonouter { display:block; width:400px; } .buttonouter:hover {background:#C1DF8B url(/images/spacer.gif) no-repeat left;} .freedownloadlink { padding-left:100px; font-size:18px; margin-bottom:20px; line-height:80px; display:block; height:80px; width:450px; } .securityconceptsfree { background:url(/images/full-spektrum/security-concepts/small.png) no-repeat 0 0; } .securityconceptsfree:hover {background:url(/images/full-spektrum/security-concepts/small.png) no-repeat 0 0;} .freeouterlink:hover { background:url(/images/button-back.gif) repeat-x 0 20px; display:block; width:550px; } /* 12.rightwrap ---------------------------------------------------------------------- */ .forthcoming { margin-bottom:5px; } ul.events { width:195px; display:block; } ul.events li { list-style:none; margin:0 0 8px 0; line-height:18px; } ul.events li a { color:#000; text-decoration:none; display: inline-block; width:195px; } ul.events li a:hover { background-color:#97af4d; color:#165008; } /* 13.mailing list form ---------------------------------------------------------------------- */ #textbox2, #textbox3 { width:185px; margin:0 0 10px 0; padding:0; background-color:#CCCCCC; color:#000000; border:0;} #form2 {} /* 14.Rig Page ---------------------------------------------------------------------- */ .rigimg { } /* 15.Footer ---------------------------------------------------------------------- */ .footer { border-top:#5e8022 1px solid; margin-bottom:20px; padding-top:20px; font-size:11px; } .footer p { margin:0 0 3px 0; padding:0; line-height:17px; color:#8b8b8b; font-size:11px; } .footer p a { display:inline-block; text-decoration:none; color:#8b8b8b; } .footer p a:hover { background-color:#97af4d; color:#165008; display:inline-block; } /* line hheight is 120px as thats what five lines plus paddings and marigins add upto*/ #boomkatlogo { width:135px; height:29px; float:right; display:inline; margin:0;} .addictech { width:132px; height:32px; float:right; clear:right; display:inline; margin:15px 0 0 30px; border:0; } .digitaltunes { width:124px; height:35px; float:right; display:inline; margin:2px 0 0 30px; border:0; } .juno { width:132px; height:25px; float:right; display:inline; margin:25px 0 0 30px; border:0; }