/* CSS layout designed by Josiah Cochran */

/* ------------------------The following code is for the mix page and production page-------------------- */

/* mixindex lists mixes on page */
#mixindex {
	width: 100%;
	height: 510px;
	text-align: left;
	margin-top: 10px;
	background-image: url(pics/josiahmixindex.jpg);
	background-repeat: no-repeat;
	background-position: 200px 0; 
	overflow: none;}

/* mixindexcol sets the column width for mix menu navigation */
.mixindexcol {
	width: 20%;
	float: left; 
	overflow: auto;
	padding: 5px; }

/* productionsindex lists mixes on page */
#productionsindex {
	width: 98%;
	height: auto;
	text-align: left;
	padding: 5px;
	background-image: url(pics/josiahmixindex.jpg);
	background-repeat: no-repeat;
	background-position: right top; 
	overflow: hidden;}

/* mix is the full box containing all mix information including title, album art, description, and track listing */
.mix {
	width: 98%;
	height: auto;
	background-color: #101010; 
	margin-right: auto;
	margin-left: auto;
	margin-top: 25px;
	margin-bottom: 25px;
	border-style: groove;
	border-color: blue; 
	overflow: hidden;}

/* mymusic is the full box for my musical productions including title, album art, and description*/
.mymusic {
	width: 98%;
	height: 420px;
	background-color: #101010;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: auto;
	margin-left: auto;
	border-style: groove;
	border-color: blue; 
	overflow: hidden; }

/* title displays title of mix or song */
.title {
	width: 100%;
	height: 40px; }

/* artfile is box containing album art */
.artfile {
	width: 48%;
	height: 310px;
	text-align: left;
	background-color: #101010;
	float: left;
	margin-bottom: 20px;
	overflow: auto; }

/* descript is box containing mix description */
.descript {
	width: 48%;
	height: 304px;
	font-family: arial, sans-serif;
	font-size: 12pt;
	text-align: left;
	background-color: #000000;
	color: #ffffff;
	border-style: groove;
	border-color: blue;
	margin-right:5px;
	margin-left:5px;
	padding:5px;
	float: right;
	overflow: auto; }

/* prescript is preview box for selected mix */
#pdescript {
	width: 400px;
	height: 496px;
	font-family: arial, sans-serif;
	font-size: 10pt;
	text-align: left;
	background-color: #000000;
	color: #ffffff;
	margin-right: 0;
	margin-left: 0;
	padding-left:5px;
	padding-right: 5px;
	float: right;
	visibility:hidden;
	overflow: auto; }

/* tracklist is box containing track listing */
.tracklist {
	width: 98%;
	height: 300px;
	background-color: #000000;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 5px;
	padding-left: 5px;
	text-align: left;
	overflow: auto; }

img.l {
	margin-right:5px;
	margin-left:5px;
	border-style: ridge;
	border-color: #ff3300;
	float: left; }

/* ********************* Adjust screen resolutions ****************************
Target resolutions:
	320px
	480px
	600px
	768px
	900px
	1200px
******************************************************************************* */

@media screen and (max-width: 1020px) {
.mymusic {
	height: auto; }
	
.artfile {
	width: 100%;
	margin: auto;
	float: none; }

.descript {
	width: 95%;
	height: auto;
	float: none; }
	
#pdescript {
	width: 0;
	height: 0; }
}

@media screen and (max-width: 600px) {
#mixindex {
	background-image: none; }
	
.mixindexcol {
	width: 45%; }
	
}

@media screen and (max-width: 480px) {
#productionsindex {
	background-image: url(pics/m_josiahmixindex.jpg);
	background-position: right bottom; }

.artfile {
	width: 100%;
	height: auto;
	padding: 10px; }

.descript {
	width: 90%;
	float: none;
	border: none; }
	
.tracklist {
	width: 95%; }

img {
	max-width:90%;
	max-height: 90%; }

}