Created
February 22, 2012 20:20
-
-
Save artursapek/1886984 to your computer and use it in GitHub Desktop.
Stylesheet for bandscape
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
bandscape CSS | |
author: Artur Sapek | |
*/ | |
html, body{ | |
height:100%; | |
margin:0px; | |
overflow:hidden; | |
background:#F5F5F6; | |
font-family:Arial; | |
-webkit-font-smoothing: antialiased; | |
} | |
#container{ | |
width:1200px; | |
height:100%; | |
margin:0px auto; | |
} | |
#header{ | |
height:62px; | |
width:100%; | |
background:#FFF; | |
position:absolute; | |
top:0px; | |
z-index:1000; | |
} | |
#header a.n, #header a.n:visited{ | |
font-size:18px; | |
font-family:Arial; | |
text-decoration:none; | |
color:#B2C2E1; | |
margin-right:30px; | |
position:relative; | |
left:-30px; | |
} | |
#header .city{ | |
font-size:18px; | |
font-family:Arial; | |
text-decoration:none; | |
margin-right:30px; | |
position:relative; | |
left:-30px; | |
} | |
#header a.n:hover{ | |
color:#C8D6ED; | |
} | |
#header_shadow{ | |
height:4px; | |
width:100%; | |
background:url('/media/img/shadow.png') repeat-x; | |
position:absolute; | |
top:62px; | |
z-index:1001; | |
} | |
#header_container{ | |
width:1200px; | |
margin:0px auto; | |
height:62px; | |
z-index:1000; | |
} | |
#logo{ | |
position:relative; | |
left:-45px; | |
top:9px; | |
} | |
.subheading{ | |
margin-bottom:7px; | |
font-size:18px; | |
} | |
/* MAP */ | |
#map_container{ | |
width:580px; | |
height:100%; | |
background:#E6E7E8; | |
float:left; | |
overflow:hidden; | |
z-index:1; | |
} | |
#map{ | |
position:relative; | |
background:url("/media/img/abstract_map/streets.png"); | |
z-index:2; | |
cursor:all-scroll; | |
} | |
#about_container{ | |
width:1200px; | |
background:#FFF; | |
height:100%; | |
} | |
/* HUB */ | |
#hub_elements{ | |
margin-top:0px; | |
} | |
#hub_elements:after{ | |
content:url('/media/img/empty150.gif'); | |
height:150px; | |
} | |
#hub_container{ | |
width:620px; | |
height:100%; | |
float:right; | |
position:relative; | |
overflow:hidden; | |
} | |
#hub{ | |
width:620px; | |
height:100%; | |
margin-top:62px; | |
top:0px; | |
background:#FFF; | |
position:relative; | |
overflow-y:scroll; | |
overflow-x:hidden; | |
padding-right:15px; | |
} | |
#filters_container{ | |
background:rgba(0,0,0,0.15); | |
background-repeat:repeat-x; | |
height:54px; | |
width:620px; | |
position:absolute; | |
top:62px; | |
z-index:2000; | |
} | |
/* FOOTER */ | |
#footer_container{ | |
width:100%; | |
height:46px; | |
background:#F5F5F6; | |
position:absolute; | |
bottom:0px; | |
z-index:999; | |
} | |
#footer{ | |
width:1200px; | |
margin:0px auto; | |
cursor:default; | |
text-align:center; | |
} | |
#footer div{ | |
display:inline-block; | |
margin:16px; | |
font-size:12px; | |
color:#c1c5c8; | |
} | |
#footer div:hover{ | |
color:#A0A3A5; | |
} | |
#footer_shadow{ | |
height:6px; | |
width:1200px; | |
background:url('/media/img/shadow bottom.png') repeat-x; | |
margin:0px auto; | |
position:relative; | |
top:-52px; | |
z-index:1001; | |
} | |
/* VMARKER */ | |
.vm_element{ | |
position:absolute; | |
cursor:pointer; | |
} | |
.vm_icon{ | |
z-index:51; | |
} | |
.vm_venuename{ | |
-webkit-font-smoothing: antialiased; | |
font-size:18px; | |
border: 0px; | |
padding:4px; | |
padding-left:4px; | |
font-family:Helvetica; | |
white-space: nowrap; | |
z-index:-5; | |
background:rgba(0,0,0,0.75); | |
color:#FFF; | |
z-index:1002; | |
} | |
.vm_hoverarea{ | |
width:20px; | |
height:20px; | |
z-index:56; | |
} | |
.vm_square{ | |
width:16px; | |
height:16px; | |
z-index:49; | |
} | |
.vm_arro{ | |
z-index:50; | |
} | |
._vm_Neumos{ | |
background: rgba(53,54,57,0.8); | |
} | |
._vm_NeptuneTheater{ | |
background: rgba(160,193,171,0.8); | |
} | |
._vm_MooreTheater{ | |
background: rgba(192,105,86,0.8); | |
} | |
._vm_LittleRedHen{ | |
background: rgba(255,255,255,0.8); | |
} | |
._vm_CafeRacer{ | |
background: rgba(111,182,139,0.8); | |
} | |
._vm_SeamonsterLounge{ | |
background:rgba(50,50,50,0.8); | |
} | |
._vm_BlueMoonTavern{ | |
background:rgba(83,160,216,0.8); | |
} | |
._vm_QCafe{ | |
background:rgba(24,108,165,0.8); | |
} | |
._vm_ChopSuey{ | |
background:rgba(140,140,140,0.8); | |
} | |
._vm_LucidJazzLounge{ | |
background:rgba(171,202,143,0.8); | |
} | |
._vm_FunHouse{ | |
background:rgba(60,122,190,0.8); | |
} | |
._vm_HighDive{ | |
background:rgba(167,188,198,0.8); | |
} | |
._vm_TractorTavern{ | |
background:rgba(126,115,106,0.8); | |
} | |
._vm_ShowboxattheMarket{ | |
background:rgba(181,177,166,0.8); | |
} | |
/* HUB ELEMENTS */ | |
/* NEIGHBORHOOD GROUP */ | |
.neighborhood_heading{ | |
font-size:16px; | |
padding:6px 2px 2px 20px; | |
} | |
.neighborhood_group{ | |
margin-top:20px; | |
} | |
/* SHOW LISTINGS */ | |
.show_listing{ | |
width:604px; | |
border-top:1px solid #D3D3D3; | |
padding:6px 8px 5px 8px; | |
margin-top:3px; | |
} | |
._sl_heading{ | |
margin-left:10px; | |
font-size:20px; | |
padding-bottom:8px; | |
} | |
._sl_info{ | |
font-size:12px; | |
color:#9B9B9B; | |
padding:1px 0px 0px 10px; | |
} | |
._sl_price{ | |
color:#264C21; | |
background:#9CD397; | |
padding:3px; | |
cursor:default; | |
} | |
._sl_age{ | |
color:#A33124; | |
background:#EFADA3; | |
padding:3px; | |
cursor:default; | |
} | |
._sl_grey{ | |
color:#9B9B9B; | |
} | |
/* BATHTUB I MEAN BANDTAB */ | |
.bandtab_all{ | |
padding-right:6px; | |
padding-bottom:2px; | |
display:inline-block; | |
cursor:default; | |
} | |
._bt_clickable:hover .bandtab_bandname{ | |
background:#f8abc4; | |
cursor:pointer; | |
} | |
.bandtab_all:hover span._sl_grey{ | |
color:#d2527b; | |
} | |
.bandtab_wrapper{ | |
float: left; | |
display: inline; | |
white-space:nowrap; | |
height:60px; | |
} | |
.bandtab_bandname{ | |
background:#EFEEEE; | |
height:60px; | |
padding-right:10px; | |
} | |
.bandtab_bandnamespan{ | |
padding: 9px; | |
margin-left:5px; | |
padding-bottom: 0px; | |
font-family: Arial; | |
color: #000; | |
font-size: 20px | |
} | |
.bandtab_genrespan{ | |
padding-top: 0px; | |
font-family: Arial; | |
color: #000; | |
font-size: 14px; | |
display: block; | |
} | |
.bandtab_album{ | |
display:inline-block; | |
width: 60px; | |
height: 60px; | |
float:left; | |
cursor:pointer; | |
} | |
._bt_grey{ | |
color: #A0A09F; | |
} | |
/* BANDFOCUS */ | |
.focus_container{ | |
width:604px; | |
padding:6px 8px 5px 8px; | |
margin-top:7px; | |
cursor:default; | |
} | |
.focus_main{ | |
padding:14px; | |
width:576px; | |
background:#EFEEEE; | |
height:100px; | |
position:relative; | |
} | |
#focus_peers, #focus_upcoming{ | |
margin:26px 14px 14px 14px; | |
width:576px; | |
position:relative; | |
border-bottom:1px solid #D3D3D3; | |
padding-bottom:6px; | |
} | |
.focus_bandname, .focus_venuename{ | |
font-size:26px; | |
} | |
.focus_cover{ | |
width:100px; | |
height:100px; | |
float:left; | |
} | |
.focus_vicon{ | |
position:absolute; | |
top:20px; | |
left:20px; | |
} | |
.focus_subhead{ | |
font-size:14px; | |
display:block; | |
} | |
.focus_address{ | |
font-size:12px; | |
color:#414141; | |
margin-top:2px; | |
display:block; | |
cursor:pointer; | |
} | |
.focus_address:hover{ | |
color:#000; | |
} | |
.focus_address:hover:after{ | |
content:' - get directions'; | |
background:none; | |
} | |
.focus_listen{ | |
position:absolute; | |
right:12px; | |
top:20px; | |
} | |
.focus_info{ | |
position:absolute; | |
} | |
.focus_listento{ | |
font-size:12px; | |
} | |
.focus_listenlink{ | |
position:relative; | |
top:5px; | |
font-size:14px; | |
padding:3px; | |
color:#FFF; | |
text-decoration:none; | |
} | |
._ll_bandcamp{ | |
background:#6696A7; | |
} | |
._ll_bandcamp:hover{ | |
background:#7BADBA; | |
} | |
._ll_reverbnation{ | |
background:#414042; | |
} | |
._ll_reverbnation:hover{ | |
background:#515151; | |
} | |
._ll_facebook{ | |
background:#3C589D; | |
} | |
._ll_facebook:hover{ | |
background:#4A69A5; | |
} | |
._ll_lastfm{ | |
background:#CC323D; | |
} | |
._ll_lastfm:hover{ | |
background:#D84154; | |
} | |
._ll_soundcloud{ | |
background:#F15D27; | |
} | |
._ll_soundcloud:hover{ | |
background:#F37028; | |
} | |
._ll_myspace{ | |
background:#1E1B1C; | |
} | |
._ll_myspace:hover{ | |
background:#3D393A; | |
} | |
._bf_dark{ | |
color:#303030; | |
} | |
._bf_grey{ | |
color:#8C8C8C; | |
} | |
/* ABOUT PAGE */ | |
#about{ | |
margin-top:62px; | |
} | |
#aboutShadow{ | |
height:6px; | |
width:1200px; | |
margin:0px auto; | |
background:rgba(0,0,0,0.04); | |
position:absolute; | |
top:62px; | |
z-index:1001; | |
} | |
#aboutimg{ | |
position:absolute; | |
z-index:800; | |
} | |
#mission{ | |
font-size:20px; | |
position:absolute; | |
top:470px; | |
padding-left:100px; | |
width:1000px; | |
line-height:1.5; | |
cursor:default; | |
} | |
.arturbeskutz{ | |
font-size:16px; | |
display:inline-block; | |
white-space:nowrap; | |
padding-right:20px; | |
} | |
.arturbeskutz span{ | |
font-size:12px; | |
position:relative; | |
top:-8px; | |
} | |
.arturbeskutz a, .arturbeskutz a:visited{ | |
color:#000; | |
text-decoration:none; | |
padding:5px; | |
} | |
.arturbeskutz a:hover{ | |
color:#303030; | |
} | |
.arturbeskutz a span, .arturbeskutz a:visited span{ | |
color:#8FA2CC; | |
padding:5px; | |
} | |
.arturbeskutz a:hover span{ | |
color:#ADBEDB; | |
} | |
/* YOU WANT YOUR SIDE, MR. SWAG? */ | |
/* TIME CONTROL */ | |
.timeControl_container{ | |
position:relative; | |
top:100px; | |
left:-10px; | |
white-space: nowrap; | |
display:inline-block; | |
float:left; | |
z-index:2001; | |
} | |
.timeControl_all{ | |
margin:8px; | |
z-index: 300; | |
cursor:default; | |
padding: 4px 4px 14px 6px; | |
background: #FFF; | |
height:20px; | |
} | |
.timeControl_city_container, .timeControl_maptime_container{ | |
position:relative; | |
float:left; | |
cursor:pointer; | |
} | |
.timeControl_maptime_content{ | |
background-color:#E6476C; | |
font-family:Arial; | |
padding:6px; | |
font-size:14px; | |
color:#F9F9F9; | |
border-bottom: 2px solid #9D2A5D; | |
height:16px; | |
} | |
.timeControl_city_content{ | |
background-color:#8380BD; | |
font-family:Arial; | |
padding:6px; | |
font-size:14px; | |
color:#F9F9F9; | |
border-bottom: 2px solid #484887; | |
} | |
.timeControl_city_content:hover{ | |
background:#908fc4; | |
border-bottom: 2px solid #5A5B97; | |
} | |
.timeControl_maptime_content:hover{ | |
color:#FFF; | |
padding:6px 6px 10px 6px; | |
} | |
.timeControl_regText{ | |
font-family:Arial; | |
font-size:14px; | |
float:left; | |
padding: 6px; | |
} | |
.timeControl_dropdown_container{ | |
position:absolute; | |
left:0px; | |
top:34px; | |
display:block; | |
} | |
.timeControl_dayOption_content{ | |
background-color:rgba(255,255,255,.7); | |
font-family:Arial; | |
padding:6px 6px 8px 6px; | |
font-size:14px; | |
color:#161616; | |
} | |
.timeControl_dayOption_content:hover{ | |
cursor:pointer; | |
background-color:#EA5E89; | |
font-family:Arial; | |
padding:6px; | |
cursor:pointer; | |
color:#F9F9F9; | |
border-bottom: 2px solid #A33E72; | |
} | |
.timeControl_city_popup{ | |
font-family:Arial; | |
padding:10px; | |
color:#000; | |
width:250px; | |
height:65px; | |
background:#FFF; | |
position:absolute; | |
top:40px; | |
border-top:1px solid #D8D8D8; | |
right:16px; | |
white-space:normal; | |
} | |
.timeControl_city_popup h1{ | |
font-size:24px; | |
font-weight:normal; | |
position:absolute; | |
top:20px; | |
right:36px; | |
padding:0px; | |
margin:0px; | |
} | |
.timeControl_city_popup_betaonly{ | |
color:#595959; | |
font-size:12px; | |
position:absolute; | |
bottom:20px; | |
left:17px; | |
} | |
.timeControl_city_popup_betaonly a, .timeControl_city_popup_betaonly a:visited{ | |
color:#778BBF; | |
text-decoration:none; | |
} | |
.timeControl_city_popup_betaonly a:hover{ | |
color:#8FA2C9; | |
text-decoration:underline; | |
} | |
/* ALTERATIONS */ | |
.timeControl_content_drained{ | |
background-color:#FFF; | |
font-family:Arial; | |
padding:6px 6px 12px 6px; | |
font-size:14px; | |
cursor:pointer; | |
color:#000; | |
} | |
.timeControl_maptime_content:hover, .timeControl_content_drained:hover{ | |
background-color:#EA5E89; | |
color:#FFF; | |
border-bottom: 2px solid #A33E72; | |
} | |
.timeControl_content_drained:hover{ | |
padding:6px 6px 10px 6px; | |
} | |
/* SPECIFY TIMECONTROL */ | |
.specifyControl_textbox{ | |
-webkit-font-smoothing: antialiased; | |
font-family:Arial; | |
width:25px; | |
font-size: 14px; | |
padding:6px; | |
position:relative; | |
bottom:2px; | |
color:#FFF; | |
border:none; | |
} | |
.specifyControl_textbox_selected{ | |
border-bottom:2px solid #9d3f75; | |
background:#E96E95; | |
} | |
.specifyControl_textbox_set{ | |
border-bottom:2px solid #972c5f; | |
background:#de4b6d; | |
} | |
/* SEARCH */ | |
input#search{ | |
-webkit-font-smoothing: antialiased; | |
font-family:Arial; | |
background:#FFF; | |
border:1px solid #DDDDDD; | |
width:310px; | |
font-size:18px; | |
padding:5px 2px 5px 2px; | |
outline:none; | |
} | |
#searchbox_container{ | |
float:right; | |
position:relative; | |
right:-45px; | |
margin-top:20px; | |
z-index:2000; | |
} | |
.searchbox_grey{ | |
color:#AAAAAA; | |
} | |
.search_results{ | |
padding:15px 0px 0px 8px; | |
} | |
#searchbox_close{ | |
background:url('/media/img/sprites/searchClose.png') no-repeat; | |
cursor:pointer; | |
width:15px; | |
height:15px; | |
position:absolute; | |
top:11px; | |
right:5px; | |
} | |
#search_details{ | |
background:url('/media/img/shadow_top_dark.png') repeat-x; | |
color:#FFF; | |
width:610px; | |
padding:5px; | |
font-size:12px; | |
} | |
.searchbox_close:hover{ | |
background-position:0px -15px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment