/* vim: set ts=4 sw=4 et ai si fdm=marker: */
/**** pallette
vizgreen:   #62E85A
limegreen:  #85DE7E
peach:      #D9BDA7
periwinkle: #5C649C
purple:     #845996
fig:        #6C3E96
*************/
body {
    color: #85DE7E;
    background: #000;
    font: 100%/1.4 helvetica, arial, sans-serif;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

img {
    max-width: 100%;
    -ms-interpolation-mode: bicubic;
    image-rendering: optimizeQuality;
}

.carousel {
    width: 100%;
/*    padding-bottom: 38.333333% */
    padding-bottom: 30%;
}

li.album_detail { font-weight: bold; }

ol.track_listing {
    list-style: number;
    padding-bottom: 2.5em;
}

ol.track_listing a {
    color: #62E85A;
    text-decoration: none;
}

ol.track_listing a:visited {
    color: #62E85A;
}

ol.track_listing a:hover {
    color: #845996;
}
.heading-link,
.heading-link:visited {
    color: #62E85A;
    text-decoration: none;
}

.heading-link:hover {
    color: #845996;
}

ul.links {
    font-weight: bold;
}

ul.links a {
    color: #62E85A;
    text-decoration: none;
}

ul.links a:visited {
    color: #62E85A;
}

ul.links a:hover {
    color: #845996;
}

#free_goodies {
    padding: 0 1.5em;
}

/* less than 340px */
@media (max-width:340px)
{
    .carousel
    {
        background: url(../img/carousel-narrow-lores.jpg) no-repeat;
        background-size: cover;
    }
}

/* wider than 340px */
@media (min-width:340px)
{
    .carousel
    {
        background: url(../img/carousel-wide-lores.jpg) no-repeat;
        background-size: cover;
    }
}

/* less than 340px hi-res */
@media (-webkit-min-device-pixel-ratio:2) and (max-width: 340px),
       (min-resolution:192dpi) and (max-width:340px)
{
    .carousel
    {
        /* width: 600px; height: 240px; */
        background: url(../img/carousel-narrow-hires.jpg) no-repeat;
        background-size: cover;
    }
}

/* more than 340px hi-res */
@media (-webkit-min-device-pixel-ratio:2) and (min-width: 340px),
       (min-resolution:192dpi) and (min-width:340px)
{
    .carousel
    {
        /* width: 2400px; height: 960px; */
        background: url(../img/carousel-wide-hires.jpg) no-repeat;
        background-size: cover;
    }
}


/*  SECTIONS  ============================================================================= */

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  GROUPING  ============================================================================= */


.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

/*  GRID OF TWO   ============================================================================= */


.span_2_of_2 {
	width: 100%;
}

.span_1_of_2 {
	width: 49.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_2_of_2 {
		width: 100%; 
	}
	.span_1_of_2 {
		width: 100%; 
	}
}

/*  GRID OF THREE   ============================================================================= */

	
.span_3_of_3 {
	width: 100%; 
}

.span_2_of_3 {
	width: 66.13%; 
}

.span_1_of_3 {
	width: 32.26%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_3_of_3 {
		width: 100%; 
	}
	.span_2_of_3 {
		width: 100%; 
	}
	.span_1_of_3 {
		width: 100%;
	}
}

/*  GRID OF FOUR   ============================================================================= */

	
.span_4_of_4 {
	width: 100%; 
}

.span_3_of_4 {
	width: 74.6%; 
}

.span_2_of_4 {
	width: 49.2%; 
}

.span_1_of_4 {
	width: 23.8%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_4_of_4 {
		width: 100%; 
	}
	.span_3_of_4 {
		width: 100%; 
	}
	.span_2_of_4 {
		width: 100%; 
	}
	.span_1_of_4 {
		width: 100%; 
	}
}