/* --------------------------------- LAYOUT STYLES ----------------------------------- */

.main-container {
	margin: 0 auto;
	width: 80%;
	padding: 30px 0px;/*	background-color:#00FFFF;*/
}
.header {
	margin: 0 auto;
	width: 1200px;
	padding:0px 0px 0px 0px;/*	background-color:yellow;*/
}
.logo {
	float: left;
	width: 410px;
	padding:0px 0px 0px 0px;/*	background-color:green;*/
}
.main-nav {
	float: right;
	width: 60%;
	padding:0px 0px 0px 0px;/*	background-color:pink;*/
}
.main-nav-squeeze {
	height: 100%;
	padding: 0px 0px 0px 0px;
}
#menu-button {
	float: right;
	width: 44px;
	height: 13px;
	padding:0px 0px 0px 0px;
	background-image: url('../images/menu-top.png');
	display:block;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	display: none;
	background-position: 0px 0px;
}
.body-content {
	padding: 0;
	margin: 0 auto;
	clear:both;
	width: 1200px;/*	background-color:blue;*/
}
.single-column {
	width: 920px;
	padding:25px 0px 0px 0px;
	margin: 0 auto;
	clear:both;/*	background-color:gray;*/
}
.single-column-2 {
	width: 100%;
	padding: 10px 0px 0px 0px;
	margin: 0 auto;
	clear:both;/*	background-color: #CC3;*/
}



.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}




      



.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden
}

.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0
}

.embed-responsive-16by9 {
    padding-bottom: 56.25%
}

.embed-responsive-4by3 {
    padding-bottom: 75%
}







/* --------------------------------- MAIN STYLES ----------------------------------- */

body {
/*background-color:pink;*/
}
h1 {
	font-size: 140%;
	font-family: 'Muli', sans-serif;
	line-height: 20px;
	padding: 10px 0px;
	color: #6d6d6d;
}
h2 {
	font-size: 120%;
	font-family: 'Muli', sans-serif;
	font-weight:bold;
	border-bottom: 1px solid #CCC;
	padding: 0px;
	color: #ed008c;
}
h3 {
	font-size: 100%;
	font-weight: bold;
	font-family: 'Muli', sans-serif;
	line-height: 20px;
	color: #6d6d6d;
}
p {
	font-size:85%;
	font-family: 'Muli', sans-serif;
	color:#6d6d6d;
}
table {
	font-size:85%;
	font-family: 'Muli', sans-serif;
	color:#6d6d6d;
}
form {
	font-size:85%;
	font-family: 'Muli', sans-serif;
	color:#6d6d6d;
}
ol {
	font-size:85%;
	font-family: 'Muli', sans-serif;
	color:#6d6d6d;
}
ol li {
	line-height: 1.3em;
}
ul.main {
	font-size:85%;
	font-family: 'Muli', sans-serif;
	color:#6d6d6d;
}
ul.main li {
	line-height: 1.3em;
	list-style-image:url(../images/bullet.gif);
}
ul.nav-buttons, .nav-buttons li {
	margin:0;
	padding:0;
	white-space: nowrap
}
.nav-buttons li {
	display:inline;
	margin-right:13px;
}
ul.social-media-buttons, .social-media-buttons li {
	margin: 0;
	padding:0;
	white-space: nowrap;
}
.social-media-buttons li {
	display:inline;
	margin-right:10px;
}
a:link {
	font-family: 'Muli', sans-serif;
	color:#4a9ac8;
	text-decoration:none;
	border-style: none;
}
a:visited {
	font-family: 'Muli', sans-serif;
	color:#4a9ac8;
	text-decoration:none;
	border-style: none;
}
a:hover {
	font-family: 'Muli', sans-serif;
	color:#4a9ac8;
	text-decoration:none;
	border-style: none;
}
a:active {
	font-family: 'Muli', sans-serif;
	color:#4a9ac8;
	text-decoration:none;
	border-style: none;
}
img.slide-border {
	border: 1px solid #bfbfbf;
}
img.photo-border {
	border: 1px solid #bfbfbf;
	float: right;
	margin: 10px 0px 20px 0px;
}
img.album-cover {
	border: 1px solid #bfbfbf;
	float: right;
	margin: 10px 5px 0px 0px;
}
img.vinyl-cover {
	float: right;
	margin: 10px 5px 0px 0px;
}
img.paypal-button {
	float: right;
	margin: 0px 0px 0px 15px;
}
img.shop {
	border: 1px solid #bfbfbf;
	width: 100%;
}
img.logo {
	border-style: none;
}
img.footer {
	border-style: none;
}
hr.style-one {
	border: 0;
	height: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
/* --------------------------------- AUDIO PAGE STYLES ----------------------------------- */

.audio-column-1 {
	float: left;
	width: 36%;
	padding:10px 1% 0px 4%;
	margin: 0px 0px 0px 0px;
	clear:both;/*	background-color:purple;*/
}
.audio-column-2 {
	float: right;
	width: 54%;
	padding:0px 4% 0px 1%;
	margin: 0px 0px 0px 0px;
	margin: 0;/*	background-color:orange;*/
}
/* --------------------------------- PHOTO PAGE STYLES ----------------------------------- */

.photos-column-1 {
	float: left;
	width: 54%;
	padding:10px 1% 0px 4%;
	margin: 0px 0px 0px 0px;
	clear:both;
}
.photos-column-2 {
	float: right;
	width: 36%;
	padding:0px 4% 0px 1%;
	margin: 0px 0px 0px 0px;
	margin: 0;
}
/* --------------------------------- SHOP PAGE STYLES ----------------------------------- */

.shop-column-2 {
	float: left;
	width: 71%;
	margin: 1em 0px 2em 0px;
	clear:both;/*	background-color: #630;*/ /*brown*/
}
.shop-column-1 {
	float: right;
	width: 29%;
	margin: 1em 0px 0px 0px;/*	background-color: yellow;*/
}
.shop-cover {
	float: right;
	width: 300px;
	margin: 1.25em 0 0 0;
	padding:0px 3%;/*	background-color: #F06;*/ /*hot pink*/
}
.shop-description {
	width: 50%;
	margin: 1.25em 0 0 0;
	padding:0px 0% 0px 10%;/*	background-color: #CF6;*/ /*puke yellow*/
}
.paypal {
	width: 350px;
	border: thin silver solid;
	margin: 1.25em 0 0 0;/*	background-color:purple;*/
}
.mobile-menu {
	width: 50%;
	margin: 0 auto;/*	background-color: #9F9;*/
}
#top-button {
	float: right;
	width: 44px;
	height: 13px;
	padding:0px 0px 0px 0px;
	background-image: url('../images/menu-top.png');
	display:block;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	display: none;
	background-position: 0px -13px;
}
.footer {
	clear:both;
	padding: 30px 0px 0px 0px;
	margin: 0 auto;
	text-align:center;
}
/* --------------------------------- ARTICLE PAGE STYLES ----------------------------------- */

.figure {
  width: 100%;  /* 231px / 474px */
}
.big-image {
	margin: 1.5em 0 0 0;
	padding: .5em;
	border: 1px solid #CCC;
}
.small-image-on-right {
	float: right;
	width: 30%;
	margin: .5em 0 0 0;
	padding: .5em;
	border: 1px solid #CCC;
}
.image-caption {
	font-family: 'Muli', sans-serif;
	font-size: 75%;
	color: #ed008c;
	padding: 0 0 1.5em 0;
	margin: 0;
}
.image-caption-on-right {
	float: right;
	/*width: auto;*/
	clear:both;
	font-family: 'Muli', sans-serif;
	font-size: 75%;
	color: #ed008c;
	padding: 0;
	margin: 0;
}
.image-on-left {
	float: left;
	margin: .2em .85em .5em 0em;
	padding: 0.5em;
	background: #FFF;
	border: 1px solid #CCC;
	display: table;
	width: 250px;
}
.image-on-right {
	float: right;
	margin: .2em 0em .5em .85em;
	padding: 0.5em;
	background: #FFF;
	border: 1px solid #CCC;
	display: table;
	max-width: 260px;
	width: 100%;
}
.image-no-float {
	/*float: none;*/
	margin .2em, auto;
	padding: .5em;
	border: 1px solid #CCC;
	background: #FFF;
	display: table;
	max-width: 600px;
}




section figure {
    position: relative;
    margin: 0 auto; /* to center it */
    padding: 30px 0 0 0;     
    font-size: 15px;
    text-align: center;
}
section figure img {
    max-width: auto;
    vertical-align: middle; /* to make sure images behave like blocks */
}
section figure figcaption {
    position: absolute;
    right: 0; bottom: 0; left: 0;    
    background: black; /* fallback */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bb000000, endColorstr=#bb000000); /* IE fix */
    background: rgba(0,0,0,.7); /* black transparent background */ 
	background: rgba(255,255,255, 0.9); /* white transparent background */
    /*color: #fff; */
		color: #ed008c;
		font-family: 'Muli', sans-serif;
		font-size: smaller;   
    padding: 10px;    /* padding around text */
}
section {
    padding-bottom: 30px; /* ignore, just to make it look nice */
    background: #fff;
}
section figure div {
    position: relative;
    display: inline-block;
    max-width: 100%;
    padding: 0;
}

/* --------------------------------- NAV BUTTONS FOR DESKTOP VIEWPORT STYLES----------------------------------- */

ul.cssmenu {
	list-style: none;
	padding: 0px;
}
.displace {
	position: absolute;
	left: -5000px;
}
ul.cssmenu li {
	float: left;
}
ul.cssmenu li a {
	display: block;
	width: 133px;
	height: 133px;
	background: url('../images/nav-buttons.png');
}
/* Normal Links are Gray Buttons */

ul.cssmenu li.video a {
	background-position: 0 0;
}
ul.cssmenu li.audio a {
	background-position: -133px 0;
}
ul.cssmenu li.pics a {
	background-position: -266px 0;
}
ul.cssmenu li.shop a {
	background-position: -399px 0;
}
ul.cssmenu li.news a {
	background-position: -532px 0;
}
/* Hover Links Go down to the Next Column of Colored Buttons */

ul.cssmenu li.video a:hover {
	background-position: 0 -133px;
}
ul.cssmenu li.audio a:hover {
	background-position: -133px -133px;
}
ul.cssmenu li.pics a:hover {
	background-position: -266px -133px;
}
ul.cssmenu li.shop a:hover {
	background-position: -399px -133px;
}
ul.cssmenu li.news a:hover {
	background-position: -532px -133px;
}
ul.cssmenu li.video a.selected {
	background-position: 0 -133px;
}
ul.cssmenu li.audio a.selected {
	background-position: -133px -133px;
}
ul.cssmenu li.pics a.selected {
	background-position: -266px -133px;
}
ul.cssmenu li.shop a.selected {
	background-position: -399px -133px;
}
ul.cssmenu li.news a.selected {
	background-position: -532px -133px;
}
/* --------------------------------- NAV BUTTONS FOR TABLET STYLES ----------------------------------- */

ul.cssmenu-tablet {
	display: none;
}
ul.cssmenu-tablet {
	list-style: none;
	padding: 0px;
}
.displace {
	position: absolute;
	left: -5000px;
}
ul.cssmenu-tablet li {
	float: left;
}
ul.cssmenu-tablet li a {
	display: block;
	width: 100px;
	height: 100px;
	background: url('../images/nav-buttons-smaller.png');
}
/* Normal Links are Gray Buttons */

ul.cssmenu-tablet li.video a {
	background-position: 0 0;
}
ul.cssmenu-tablet li.audio a {
	background-position: -100px 0;
}
ul.cssmenu-tablet li.pics a {
	background-position: -200px 0;
}
ul.cssmenu-tablet li.shop a {
	background-position: -300px 0;
}
ul.cssmenu-tablet li.news a {
	background-position: -400px 0;
}
/* Hover Links Go down to the Next Column of Colored Buttons */

ul.cssmenu-tablet li.video a:hover {
	background-position: 0 -100px;
}
ul.cssmenu-tablet li.audio a:hover {
	background-position: -100px -100px;
}
ul.cssmenu-tablet li.pics a:hover {
	background-position: -200px -100px;
}
ul.cssmenu-tablet li.shop a:hover {
	background-position: -300px -100px;
}
ul.cssmenu-tablet li.news a:hover {
	background-position: -400px -100px;
}
/* Selected/Active Links are Color Buttons */

ul.cssmenu-tablet li.video a.selected {
	background-position: 0 -100px;
}
ul.cssmenu-tablet li.audio a.selected {
	background-position: -100px -100px;
}
ul.cssmenu-tablet li.pics a.selected {
	background-position: -200px -100px;
}
ul.cssmenu-tablet li.shop a.selected {
	background-position: -300px -100px;
}
ul.cssmenu-tablet li.news a.selected {
	background-position: -400px -100px;
}
/* --------------------------------- NAV BUTTONS FOR SMARTPHONE STYLES ----------------------------------- */	

.cssmenu-smartphone {
	width: 100%;
	display: none;
}
ul.cssmenu-smartphone {
	list-style: none;
	padding: 0px;
	margin: 0px;
	font-weight: bold;
	font-size: 110%;
}
ul.cssmenu-smartphone li {
	display: block;
	text-align:center;
}
ul.cssmenu-smartphone li a {
	display: block;
	padding: 10px 20px;
	margin: 5px 10px;
	text-decoration: none;
	color: #fff;
}
#vid {
	background-color: #01a8ec;
}
#aud {
	background-color: #dc2223;
}
#pic {
	background-color: #3332cc;
}
#sho {
	background-color: #66097b;
}
#new {
	background-color: #db118b;
}
#ema {
	background-color: #f89a1e;
}
#fac {
	background-color: #3b5998;
}
#twi {
	background-color: #00acee;
}
#ban {
	background-color: #524e4f;
}
#sou {
	background-color: #ff7800;
}
#pan {
	background-color: #34689c;
}
#spo {
	background-color: #52b529;
}
#you {
	background-color: #d03427;
}