* {
margin: 0;
padding: 0;
}
html {
background: #000;
font-family: sans-serif;
}
div#header, div#body, div#footer {
width: 1000px;
margin: 0 auto;
}
/*** Header ***/
div#header {
background: url("../images/header.jpg") no-repeat;
height: 259px;
position: relative;
}
div#header ul {
left: 112px;
top: 233px;
position: absolute;
}
div#header ul ul {
top: 22px;
left: 0;
height: 0;
/*overflow: hidden;*/
display: none;
-moz-transition: height 0.5s;
-webkit-transition: height 0.5s;
-o-transition: height 0.5s;
-ms-transition: height 0.5s;
transition: height 0.5s;
width: 100%;
background-color: #4b0306;
}
div#header ul li:hover ul {
height: 48px;
display:block;
-moz-transition: height 0.5s;
-webkit-transition: height 0.5s;
-o-transition: height 0.5s;
-ms-transition: height 0.5s;
transition: height 0.5s;
}
div#header ul ul li {
width: 100%;
}
div#header ul:hover ul li a {
color: #ff4100;
}
div#header ul:hover ul li:hover a {
color: #fff;
}
div#header ul li {
display: block;
float: left;
height: 24px;
width: 98px;
text-align: center;
font-size: 15px;
background-repeat: no-repeat;
position: relative;
}
/*
div#header ul li#button-home {
width: 114px;
background-position: 0 0;
}
div#header ul li#button-about {
width: 119px;
background-position: 0 -29px;
}
div#header ul li#button-stage {
width: 143px;
background-position: 0 -58px;
}
div#header ul li#button-discography {
width: 123px;
background-position: 0 -87px;
}
div#header ul li#button-gallery {
width: 109px;
background-position: 0 -116px;
}
div#header ul li#button-news {
width: 100px;
background-position: 0 -145px;
}
div#header ul li#button-contact {
width: 106px;
background-position: 0 -174px;
}
*/
div#header ul li a {
font-weight: bold;
color: #ff4100;
width: 100%;
height: 100%;
display: block;
text-decoration: none;
text-shadow: 1px 1px 2px #000;
vertical-align: middle;
-moz-transition: color 250ms;
-webkit-transition: color 250ms;
-o-transition-property: color 250ms;
-ms-transition-property: color 250ms;
}
div#header ul li:hover {
background-image: url("/images/nav_rollover.png");
}
div#header ul li:hover a {
color: #fff;
-moz-transition: color 250ms;
-webkit-transition: color 250ms;
-o-transition-property: color 250ms;
-ms-transition-property: color 250ms;
}
/*div#header ul li a:before {
content: "\2022 ";
}*/
div#header ul.icons {
left: 750px;
top: 233px;
}
div#header ul.icons li {
height: auto;
width: auto;
margin: 0 3px;
opacity: 0.6;
-ms-filter: "alpha(Opacity=60)";
filter: alpha(opacity=60);
-moz-transition: all 100ms;
-webkit-transition: all 100ms;
-o-transition: all 100ms;
-ms-transition: all 100ms;
transition: all 100ms;
}
div#header ul.icons li:hover {
background: none;
opacity: 1;
-ms-filter: "alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-transition: all 100ms;
-webkit-transition: all 100ms;
-o-transition: all 100ms;
-ms-transition: all 100ms;
transition: all 100ms;
}
/*
div#header ul.icons li a:before {
content: "";
}*/
div#header ul.icons img, a img {
border: 0;
}
/*** Body ***/
a {
-moz-transition: background-position 0.5s;
-webkit-transition: background-position 0.5s;
-o-transition: background-position 0.5s;
-ms-transition: background-position 0.5s;
transition: background-position 0.5s;
}
div#body {
background: url("/images/content_bottom.png") repeat-y;
}
div#body div#body-background-shell {
background: url("/images/content_top.png") no-repeat;
padding: 0 85px 0 120px;
color: #FFB99F;
}
div#body h3 {
padding: 1em 0 0.5em;
text-shadow: 1px 1px 2px #000;
}
div#body h3.latest-header,
div#body h3.top-header {
color: #f63e00;
}
div#body h3.welcome-header {
color: #d09782;
font-style: italic;
}
div#body h3.gallery-header {
color: #d09782;
}
div#body div.latest-news-image {
width: 161px;
height: 116px;
background: url("/images/latest_news_image.png") no-repeat;
float: left;
clear: left;
margin-bottom: 10px;
position: relative;
}
div#body div.latest-news-image img {
position: absolute;
top: 19px;
left: 24px;
}
div#body div.latest-news {
width: 228px;
height: 86px;
background: url("../images/latest_news.png") no-repeat;
padding: 15px 20px;
font-size: 9pt;
font-weight: normal;
float: left;
}
div#body div.specialNotice {
width: 700px;
height: 86px;
background: url("../images/specialnotice.png") no-repeat;
padding: 15px 20px;
font-size: 9pt;
font-weight: normal;
margin:auto;
}
div#body div.latest-news h4 {
color: #f96f40;
font-size: 9pt;
}
div#body a {
color: #ffb99f;
}
div#body a.read-more {
background: url("../images/read_more.png") no-repeat;
width: 76px;
height: 21px;
display: block;
float: right;
}
div#body a.more-news {
background: url("../images/more_news_buttons.png") no-repeat;
width: 83px;
height: 20px;
display: block;
float: right;
clear: both;
}
a.buy-now-link {
display: inline-block;
margin: 10px auto 5px;
background: url("../images/buy_now_button.png") no-repeat;
width: 66px;
height: 20px;
}
a.press-kit-button {
background: url("../images/press_kit.png") no-repeat;
width: 66px;
height: 21px;
display: block;
}
a.press-kit-button:hover {
background-position: 0 -21px;
}
a.reviews {
background: url("../images/reviews.png") no-repeat;
width: 62px;
height: 21px;
display: block;
}
a.reviews:hover {
background-position: 0 -21px;
}
div.press-kit a.press-kit-button,
div.press-kit a.reviews,
div.press-kit a.more-news {
float: none !important;
margin: auto;
}
div#body a.hear-more-songs {
width: 109px;
height: 21px;
background: url("../images/hear_more_songs.png") no-repeat;
float: right;
clear: both;
position: relative;
}
div#body a.hear-more-songs:hover {
background-position: 0 -21px;
}
a.gallery-link,
a.see-full-tracks {
width: 100px;
height: 20px;
background: url("../images/gallery_link.png") no-repeat;
clear: both;
display: block;
margin: 2em auto 0;
}
a.see-full-tracks {
width: 110px;
background-image: url("../images/see_full_track_list.png");
margin: 1em auto 0;
}
a.more-cds-dvds {
width: 110px;
height: 20px;
display: block;
float: right;
clear: both;
background-image: url("../images/more_cds_dvds.png");
margin: 1.5em auto;
}
a.gallery-link:hover,
a.see-full-tracks:hover,
a.more-cds-dvds:hover {
background-position: 0 -20px;
}
a span {
display: none;
}
div#body a.more-news:hover,
div#body a.read-more:hover,
div#body a.buy-now-link:hover {
background-position: 0 -20px;
}
div#body div.latest-news p {
color: #ffb99f;
margin: 0;
}
div#body div.latest-news-container,
div#body div.press-kit,
div#body div.gallery-container {
float: left;
clear: left;
width: 500px;
}
div#body div.welcome-container,
div#body div.top-container {
width: 295px;
float: right;
clear: right;
}
div#body a.more-about-me {
background: url("../images/more_about_me.png") no-repeat;
width: 101px;
height: 19px;
display: block;
float: right;
margin-top: 15px
}
div#body a.more-about-me:hover {
background-position: 0 -19px;
}
div#body div.top-container ol {
list-style: decimal-leading-zero inside;
color: #b38270;
font-weight: bold;
}
div#body div.top-container ol span {
font-weight: normal;
}
div#body div.about-me {
color: #ffb99f;
background-color: rgb(83, 6, 3);
border-radius: 20px 0 0 20px;
box-shadow: 0 0 15px 0 #300302 inset, -10px 0 10px 0 #7D0A06 inset, -5px 0 5px 0 #300302;
padding: 10px;
text-align: justify;
}
div#left-col {
float: left;
width: 500px;
}
div#right-col {
float: right;
width: 295px;
}
div.body-container {
padding: 1em 55px 1em 20px;
width: 720px;
text-align: justify;
}
div.body-container p {
margin: 1em 0;
}
div.body-container p img.right {
float: right;
margin: 10px 0 10px 10px;
}
div.body-container p img.left {
float: left;
margin: 10px 10px 10px 0;
}
div.body-container p img.right:first-child,
div.body-container p img.left:first-child {
margin-top: 0;
}
div.stage-thumbnail {
width: 330px;
height: 285px;
margin: 1.5em auto;
background: #530603;
text-align: center;
float: left;
padding: 10px;
}
div.stage-thumbnail div {
padding: 0 0.5em;
}
div.stage-thumbnail div p {
margin: 0;
padding: 0.5em 0;
}
div.stage-thumbnail div.discography-container ol {
text-align: left;
clear: left;
padding-left: 25px;
padding-bottom: 10px;
list-style: decimal-leading-zero;
font-size: 10pt;
}
div.stage-thumbnail div.discography-container ol li span {
font-weight: normal;
}
div.stage-thumbnail div.discography-container dl {
text-align: left;
counter-reset: discography;
clear: left;
}
div.stage-thumbnail div.discography-container dl dt:before {
counter-increment: discography;
content: counter(discography, decimal-leading-zero) ". ";
font-weight: bold;
}
div.stage-thumbnail div.discography-container dl dd {
padding-left: 25px;
padding-bottom: 10px;
}
div.gallery-thumbnail-container a {
float: left;
width: 100px;
height: 100px;
display: block;
margin-bottom: 10px;
margin-right: 10px;
opacity: 0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity = 70);
-moz-transition: 0.25s opacity, 0.25s -moz-transform;
-webkit-transition: 0.25s opacity, 0.25s -webkit-transform;
-o-transition: 0.25s opacity, 0.25s -os-transform;
-ms-transition: 0.25s opacity, 0.25s -ms-transform;
transition: 0.25s opacity, 0.25s transform;
}
div.gallery-thumbnail-container a:hover {
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100) progid:DXImageTransform.Microsoft.Matrix(M11=1.2, M12=0, M21=0, M22=1.2, SizingMethod='auto expand')";
filter: alpha(opacity = 100) matrix(M11=1.2, M12=0, M21=0, M22=1.2, SizingMethod='auto expand');
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
-moz-transition: 0.25s opacity, 0.25s -moz-transform;
-webkit-transition: 0.25s opacity, 0.25s -webkit-transform;
-o-transition: 0.25s opacity, 0.25s -os-transform;
-ms-transition: 0.25s opacity, 0.25s -ms-transform;
transition: 0.25s opacity, 0.25s transform;
}
div.gallery-thumbnail-container a img {
border: 0;
}
div.audio-caption {
font-size: 8pt;
position: absolute;
z-index: 10;
top: 13px;
left: 70px;
color: #000;
width: 165px;
height: 16px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre;
cursor: default;
}
dl {
display: block;
width: 50%;
width: -moz-fit-content;
width: intrinsic;
width: fit-content;
text-align: left;
margin: auto;
}
dt {
font-weight: bold;
margin: 1em 0 0.5em;
}
dd {
margin-left: 2em;
}
div.contact-blurb {
width: 70%;
text-align: justify;
margin: 2em auto 1em;
}
div.quote-container {
position: relative;
width: 450px;
height: 100px;
margin: auto;
}
div.quote-container blockquote {
position: absolute;
top: 0;
left: 0;
width: 450px;
height: 100px;
display: none;
}
div.quote-container blockquote p:before {
content: open-quote;
}
div.quote-container blockquote p:after {
content: close-quote;
}
div.quote-container blockquote p + p {
margin-left: 3em;
font-style: italic;
}
div.quote-container blockquote p + p:before {
content: "\2013 ";
}
div.quote-container blockquote p + p:after {
content: "";
}
div.review-container {
float: right;
width: 500px;
text-align: justify;
margin-bottom: 10px;
padding: 32px 0;
background: url('/images/quote.png') top left no-repeat;
/*background: url('../images/quote.png') top left no-repeat, url('../images/quote2.png') bottom right no-repeat;
background: url('../images/quote2.png') bottom right no-repeat;*/
}
div.end-quote {
float: right;
width: 65px;
margin-top: -25px;
padding: 32px 0;
background: url('/images/quote2.png') bottom right no-repeat;
z-index:-99;
}
div.review-container > *:first-child {
text-indent: 64px;
}
div.review-container:first-letter {
font-size: 20pt;
font-weight: bold;
}
/*** Footer ***/
div#footer {
background: url("/images/footer.png") no-repeat;
color: #680804;
text-align: center;
padding: 35px 0 15px;
font-weight: bold;
font-size: 11pt;
}
div#footer ul {
padding-bottom: 1em;
}
div#footer ul li {
display: inline;
font-size: 9pt;
border-left: 2px #680804 solid;
padding: 0 10px;
}
div#footer ul li:first-child {
border: 0;
}
div#footer ul li a {
vertical-align: top;
color: #702724;
}
div#footer ul li a:hover {
color: #703e3d;
}
.site-map ul {
text-align: left;
width: 500px;
margin: auto;
font-size: 15pt;
list-style-position: inside;
line-height: 1.6;
}
.site-map h1 {
text-align: left;
width: 500px;
margin: auto;
padding-bottom: 0.5em;
}
.site-map ul li li {
padding-left: 1.5em;
}
.site-map ul li a {
text-decoration: none;
}
.site-map ul li a:hover {
text-decoration: underline;
}
.video-overlay {
width: 250px;
height: 188px;
background-image: url("/images/play_video_background.jpg");
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
.video-overlay:hover {
background-position: 0 -188px;
}
/*Instagram*/
.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-24 { width: 24px; height: 24px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-24.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-24 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-24@2x.png); background-size: 60px 178px; } }