javascript - CSS or JS conflict? -

i'm novice may seem rather basic problem.

a html page has 4 html embedded audio players looked styled , worked fine. added slide player called fancy box. css , js files linked separate folders css , js files of audio player.

the audio players continue work fine however, style attributes no longer show up, instead browser’s audio player shows. fancy box works fine.

is there css or js conflict of sort?

any advice appreciated in solving dilemma. (sorry incompetence.)

here html , both css.

/** audio player styles **/    .audio-player,  .audio-player div,  .audio-player h2,  .audio-player a,  .audio-player span,  .audio-player button {    margin: 0;    padding: 0;    border: none;    outline: none;    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;  }  div.audio-player {    position: relative;    width: 300px;    height: 70px;    margin: 0 auto;  }  .audio-player h2 {    position: absolute;    top: 7px;    left: 10px;    font-family: 'helvetica neue', helvetica, arial, sans-serif;    font-weight: bold;    font-size: 11px;    color: #000000;    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);  }  /* play/pause control */    .mejs-controls .mejs-button button {    cursor: pointer;    display: block;    position: absolute;    text-indent: -9999px;  }  .mejs-controls .mejs-play button,  .mejs-controls .mejs-pause button {    width: 34px;    height: 34px;    top: 32px;    left: 7px;    background: transparent url('playpause.png') 0 0 no-repeat;  }  .mejs-controls .mejs-pause button {    background-position: 0 -35px;  }  /* volume scrubber bar */    .mejs-controls div.mejs-horizontal-volume-slider {    position: absolute;    top: 23px;    right: 85px;    cursor: pointer;  }  .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {    width: 85px;    height: 11px;    background: #212227;    -webkit-box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.25);    -moz-box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.25);    box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.25);    -webkit-border-radius: 4px;    -moz-border-radius: 4px;    border-radius: 4px;  }  .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {    position: absolute;    width: 0;    height: 9px;    top: 1px;    left: 1px;    background: #c82530;    background: -webkit-linear-gradient(top, #c82530 0%, #c82530 100%);    background: -moz-linear-gradient(top, #c82530 0%, #c82530 100%);    background: -o-linear-gradient(top, #c82530 0%, #c82530 100%);    background: -ms-linear-gradient(top, #c82530 0%, #c82530 100%);    background: linear-gradient(top, #c82530 0%, #c82530 100%);    -webkit-border-radius: 8px;    -moz-border-radius: 8px;    border-radius: 8px;  }  /* time scrubber bar */    .mejs-controls div.mejs-time-rail {    width: 160px;  }  .mejs-controls .mejs-time-rail span {    position: absolute;    display: block;    width: 160px;    height: 12px;    top: 40px;    left: 55px;    cursor: pointer;    -webkit-border-radius: 0px 0px 2px 2px;    -moz-border-radius: 0px 0px 2px 2px;    border-radius: 0px 0px 2px 2px;  }  .mejs-controls .mejs-time-rail .mejs-time-total {    background: #565860;    width: 160px !important;    /* fixes display bug using jquery 1.8+ */    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;  }  .mejs-controls .mejs-time-rail .mejs-time-loaded {    top: 0;    left: 0;    width: 0;    background: #7b7d82;    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;  }  .mejs-controls .mejs-time-rail .mejs-time-current {    top: 0;    left: 0;    width: 0;    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;    background: #00873d;    background: -webkit-linear-gradient(top, #00873d 0%, #83bb63 100%);    background: -moz-linear-gradient(top, #00873d 0%, #83bb63 100%);    background: -o-linear-gradient(top, #00873d 0%, #83bb63 100%);    background: -ms-linear-gradient(top, #00873d 0%, #83bb63 100%);    background: linear-gradient(top, #00873d 0%, #83bb63 100%);  }  /* metallic sliders */    .mejs-controls .mejs-time-rail .mejs-time-handle {    position: absolute;    display: block;    width: 20px;    height: 22px;    top: -6px;    background: url('handle-lg.png') no-repeat;  }  .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {    position: absolute;    display: block;    width: 12px;    height: 14px;    top: -1px;    background: url('handle-sm.png') no-repeat;  }  /* time progress tooltip */    .mejs-controls .mejs-time-rail .mejs-time-float {    position: absolute;    display: none;    width: 33px;    height: 23px;    top: -26px;    margin-left: -17px;    z-index: 9999;    background: url('time-box.png');  }  .mejs-controls .mejs-time-rail .mejs-time-float-current {    width: 33px;    display: block;    left: 0;    top: 4px;    font-family: 'helvetica neue', helvetica, arial, sans-serif;    font-size: 10px;    font-weight: bold;    color: #666;    text-align: center;    z-index: 9999;  }  /** clearfix **/    .clearfix:after {    content: ".";    display: block;    clear: both;    visibility: hidden;    line-height: 0;    height: 0;  }  .clearfix {    display: inline-block;  }  html[xmlns] .clearfix {    display: block;  }  * html .clearfix {    height: 1%;  }

<head>  <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <!-- instancebegineditable name="doctitle" -->  <title>paul minotto: music</title>  <!-- instanceendeditable -->  <style type="text/css">  <!--  body,td,th {  	font-family: arial, helvetica, sans-serif;  	font-size: 14px;  	color: #000;  }  a:link {  	color: #00873d;  	text-decoration: none;  }  a:visited {  	color: #cc3333;  	text-decoration: none;  }  {  	font-size: 14px;  }  a:hover {  	color: #cc3333;  	text-decoration: none;  }  a:active {  	text-decoration: none;  }  h1 {  	font-size: 36px;  }  -->  </style>      <script type="text/javascript">  <!--  function mm_openbrwindow(theurl,winname,features) { //v2.0    window.open(theurl,winname,features);  }  function mm_calljs(jsstr) { //v2.0    return eval(jsstr)  }  function mm_preloadimages() { //v3.0    var d=document; if(d.images){ if(!d.mm_p) d.mm_p=new array();      var i,j=d.mm_p.length,a=mm_preloadimages.arguments; for(i=0; i<a.length; i++)      if (a[i].indexof("#")!=0){ d.mm_p[j]=new image; d.mm_p[j++].src=a[i];}}  }  //-->  </script>  <!-- instancebegineditable name="head" -->  <style type="text/css">  <!--  .green {color: #11772e;  }  .red {color: #cc3333;  }  #rcorners { border-radius: 45%;      border: 5px solid #000000;      padding: 0px;       width: 700px;      height: 130px;      }  .color {  	color: #fff;  }  </style>     <link rel="stylesheet" type="text/css" media="all" href="css/styles.css"/>    <script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>    <script type="text/javascript" src="js/mediaelement-and-player.min.js"></script>           <title>slideshow</title>    	<!-- add jquery library -->  	<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>        	<!-- add fancybox main js , css files -->  	<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>  	<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen"/>    <link rel="stylesheet" href="/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen"/>  <script type="text/javascript" src="/source/helpers/jquery.fancybox-thumbs.js"></script>    <script type="text/javascript">  	$(document).ready(function() {  		$(".fancybox").fancybox();  	});  </script>    <script type="text/javascript">      $(document).ready(function() {  	    $(".fancybox-thumb").fancybox({  		preveffect	: 'none',  		nexteffect	: 'none',  		helpers	: {  			title	: {  				type: 'outside'  			},  			thumbs	: {  				width	: 50,  				height	: 50  			}  		}  	  });      });  </script>  </head>

css slide show player.  /*! fancybox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */  .fancybox-wrap,  .fancybox-skin,  .fancybox-outer,  .fancybox-inner,  .fancybox-image,  .fancybox-wrap iframe,  .fancybox-wrap object,  .fancybox-nav,  .fancybox-nav span,  .fancybox-tmp  {  	padding: 0;  	margin: 0;  	border: 0;  	outline: none;  	vertical-align: top;  }    .fancybox-wrap {  	position: absolute;  	top: 0;  	left: 0;  	z-index: 8020;  }    .fancybox-skin {  	position: relative;  	background: #f9f9f9;  	color: #444;  	text-shadow: none;  	-webkit-border-radius: 4px;  	   -moz-border-radius: 4px;  	        border-radius: 4px;  }    .fancybox-opened {  	z-index: 8030;  }    .fancybox-opened .fancybox-skin {  	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);  	   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);  	        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);  }    .fancybox-outer, .fancybox-inner {  	position: relative;  }    .fancybox-inner {  	overflow: hidden;  }    .fancybox-type-iframe .fancybox-inner {  	-webkit-overflow-scrolling: touch;  }    .fancybox-error {  	color: #444;  	font: 14px/20px "helvetica neue",helvetica,arial,sans-serif;  	margin: 0;  	padding: 15px;  	white-space: nowrap;  }    .fancybox-image, .fancybox-iframe {  	display: block;  	width: 100%;  	height: 100%;  }    .fancybox-image {  	max-width: 100%;  	max-height: 100%;  }    #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {  	background-image: url('fancybox_sprite.png');  }    #fancybox-loading {  	position: fixed;  	top: 50%;  	left: 50%;  	margin-top: -22px;  	margin-left: -22px;  	background-position: 0 -108px;  	opacity: 0.8;  	cursor: pointer;  	z-index: 8060;  }    #fancybox-loading div {  	width: 44px;  	height: 44px;  	background: url('fancybox_loading.gif') center center no-repeat;  }    .fancybox-close {  	position: absolute;  	top: -18px;  	right: -18px;  	width: 36px;  	height: 36px;  	cursor: pointer;  	z-index: 8040;  }    .fancybox-nav {  	position: absolute;  	top: 0;  	width: 40%;  	height: 100%;  	cursor: pointer;  	text-decoration: none;  	background: transparent url('blank.gif'); /* helps ie */  	-webkit-tap-highlight-color: rgba(0,0,0,0);  	z-index: 8040;  }    .fancybox-prev {  	left: 0;  }    .fancybox-next {  	right: 0;  }    .fancybox-nav span {  	position: absolute;  	top: 50%;  	width: 36px;  	height: 34px;  	margin-top: -18px;  	cursor: pointer;  	z-index: 8040;  	visibility: hidden;  }    .fancybox-prev span {  	left: 10px;  	background-position: 0 -36px;  }    .fancybox-next span {  	right: 10px;  	background-position: 0 -72px;  }    .fancybox-nav:hover span {  	visibility: visible;  }    .fancybox-tmp {  	position: absolute;  	top: -99999px;  	left: -99999px;  	visibility: hidden;  	max-width: 99999px;  	max-height: 99999px;  	overflow: visible !important;  }    /* overlay helper */    .fancybox-lock {      overflow: hidden !important;      width: auto;  }    .fancybox-lock body {      overflow: hidden !important;  }    .fancybox-lock-test {      overflow-y: hidden !important;  }    .fancybox-overlay {  	position: absolute;  	top: 0;  	left: 0;  	overflow: hidden;  	display: none;  	z-index: 8010;  	background: url('fancybox_overlay.png');  }    .fancybox-overlay-fixed {  	position: fixed;  	bottom: 0;  	right: 0;  }    .fancybox-lock .fancybox-overlay {  	overflow: auto;  	overflow-y: scroll;  }    /* title helper */    .fancybox-title {  	visibility: hidden;  	font: normal 13px/20px "helvetica neue",helvetica,arial,sans-serif;  	position: relative;  	text-shadow: none;  	z-index: 8050;  }    .fancybox-opened .fancybox-title {  	visibility: visible;  }    .fancybox-title-float-wrap {  	position: absolute;  	bottom: 0;  	right: 50%;  	margin-bottom: -35px;  	z-index: 8050;  	text-align: center;  }    .fancybox-title-float-wrap .child {  	display: inline-block;  	margin-right: -100%;  	padding: 2px 20px;  	background: transparent; /* fallback web browsers doesn't support rgba */  	background: rgba(0, 0, 0, 0.8);  	-webkit-border-radius: 15px;  	   -moz-border-radius: 15px;  	        border-radius: 15px;  	text-shadow: 0 1px 2px #222;  	color: #fff;  	font-weight: bold;  	line-height: 24px;  	white-space: nowrap;  }    .fancybox-title-outside-wrap {  	position: relative;  	margin-top: 10px;  	color: #fff;  }    .fancybox-title-inside-wrap {  	padding-top: 10px;  }    .fancybox-title-over-wrap {  	position: absolute;  	bottom: 0;  	left: 0;  	color: #fff;  	padding: 0px;  	background: #000;  	background: rgba(0, 0, 0, 0.8);  }    /*retina graphics!*/  @media screen , (-webkit-min-device-pixel-ratio: 1.5),  	   screen , (min--moz-device-pixel-ratio: 1.5),  	   screen , (min-device-pixel-ratio: 1.5){    	#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {  		background-image: url('fancybox_sprite@2x.png');  		background-size: 44px 152px; /*the size of normal image, half size of hi-res image*/  	}    	#fancybox-loading div {  		background-image: url('fancybox_loading@2x.gif');  		background-size: 24px 24px; /*the size of normal image, half size of hi-res image*/  	}