html{
	height: 100%;
	width: 100%;
}
body {
	height: 100%;
	max-height: 100%;
	width: 100%;
	max-width: 100%;
}
#page-wrapper{
	position: absolute;
	width:100%;
	height: 100%;
	overflow: hidden;
	margin: 0 auto;
	left: 0;
	right: 0;
}
header, section, footer, aside, nav, main, article, figure {
    display: block;
}
#page-wrapper > #header {
	position:relative;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	height: 6%;
	width: 100%;
}

#page-wrapper > #banner{
	position:relative;
	padding: 0;
	padding: 0;
	margin: 0;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	height: 90%;
	width: 100%;
}
#banner > #sound-main-container{
	position:relative;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	height:100%;
	max-height:100%;
	width:100%;
	max-width:100%;
}
#page-wrapper > footer {
	position: relative;
	left: 0%;
	bottom: 0%;
	width:100%;
	max-width: 100%;
	height: 4%;
	background-color: rgba(0, 0, 0, 0.4);
	z-index:2;
}
#sound-main-container {
	position: absolute;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	top: 0%;
	margin: 0;
	left: 0;
	right: 0;
}
.pinkgrad {
    background: "dark-gray"; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#C69998, #84889C); /* For Safari 5.1 to 6.0 */ /* #FDC1C1, #A6ABC5*/
    background: -o-linear-gradient(#C69998, #84889C); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#C69998, #84889C); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#C69998, #84889C); /* Standard syntax (must be last) */
}
.textnowrap {
	margin: 0;
	text-overflow: ellipsis;
	overflow:hidden;
	white-space: nowrap;

	font-size: 0.7em;
	line-height: normal;
}
.textnowrap01 {
	margin: 0;
	text-overflow: ellipsis;
	overflow:hidden;
	white-space: nowrap;
	font-size: 1em;
	line-height: normal;
}
.textnowrapandmargin {
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.7em;
	line-height: normal;
}
.hiddenclass{
	position:absolute;
	top: 0%;
	left: 0%;
	width:1px;
	max-width:1px;
	height:1px;
	max-height:1px;
}
.supersavethespace{
	margin: 0;
	padding: 0;
	left: 0;
	top: 0;
	right: 0;
	border: none;
}
#sound-main-container >  #selectedCanvasContainer {
	position: absolute;
	top: 1%;
	left: 1%;
	width: 98%;
	height: 72%;
	border-radius: 1.2em;
	background-color : rgba(0, 0, 0, 0.5);
}
#selectedCanvasContainer > #soundrepcanvasagg, #progressBarDiffCanvas,  #the-actual-sound-frame, #tdbarcanvas,  #colorcanvas, #the-actual-sound-frame-single, #canvas10, #theSquares, #theConcCircles, #freeCanvas {
	border-radius: 1.2em;
	border: solid thin rgba(128, 128, 128, 0.4);
}
.squaresclass > #theSquares {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	border-radius: 0;
}
.squaresclass > #theConcCircles {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	border-radius: 0;
}
.squaresclass > #rawcontsq {
	position: absolute;
	margin: auto;
	top: 42%;
	left: 17%;
	height: 16%;
	width: 66%;
	border-radius: 1.2em;
	background-color: rgba(0, 0, 0, 0.2);
}
#rawcontsq  > #the-actual-sound-frame {
	position: absolute;
	margin: auto;
	top: 0%;
	left: 2%;
	height: 100%;
	width: 96%;
	opacity: 1;
}
#rawcontsq  > #soundrepcanvasagg {
	position: absolute;
	margin: auto;
	top: 0%;
	left: 2%;
	height: 100%;
	width: 96%;
	opacity: 1;
}
/* Time Domain Bar*/
#selectedCanvasContainer >  #colorcanvas {
	position: absolute;
	top: 1%;
	left: 1%;
	width: 98%;
	max-width: 98%;
	height: 80%;
	max-height: 80%;
	border-radius: 1.2em;
	background-color: black;
}
#selectedCanvasContainer > #twocanvasinone {
	position: absolute;
	top: 81%;
	left: 1%;
	width: 98%;
	max-width: 98%;
	height: 18%;
	max-height: 18%;
	border-radius: 1.2em;
	background-color: black;
}
/* Time Domain Wave */
#twocanvasinone >  #the-actual-sound-frame {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	border-radius: 1.2em;
}
/* Time Domain Oscilloscope Wave */
#twocanvasinone >  #the-actual-sound-frame-single {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	border-radius: 1.2em;
}
/* Time Domain Bar All*/
#sound-main-container >  #tdbarcanvas {
	position: absolute;
	bottom: 0%;
	left: 1%;
	width: 40%;
	min-width: 280px;
	height: 4%;
	max-height: 4%;
	border-radius: 1.2em;
	border: solid thin rgba(0, 0, 0, 0.2);
	background-color: rgba(0, 0, 0, 0.2);
}

.squaresclass2 > #sound-main-container{
	 background: "dark-gray"; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#C69998, #84889C); /* For Safari 5.1 to 6.0 */ /* #FDC1C1, #A6ABC5*/
    background: -o-linear-gradient(#C69998, #84889C); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#C69998, #84889C); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#C69998, #84889C); /* Standard syntax (must be last) */
}
/* Time Domain Bar Same Size*/
#colour-sound-datas {
	position:absolute;
	top: 2%;
	right: 2%;
	width: 28%;
	max-width: 300px;
	min-width: 228px;
	border-radius: 1.2em;
	border: solid thin rgba(128, 128, 128, 0.8);
	opacity: 0.8;
}
.squaresclass > #colour-sound-datas{
	visibility: hidden;
}
#colour-sound-datas > #colour-data-div {
	position: relative;
	float: left;
	text-align: right;
	top: 0;
	width: 28%;

}
#colour-sound-datas > #sound-data-div {
	position: relative;
	float: left;
	text-align: left;
	top: 0%;
	border-left: solid thin;
	width: 72%;

}
#currNoteDiv {
	position: absolute;
	top: 60%;
	display:table;
	left: 10%;
	width: 80%;
	height: 30%;
	opacity: 0.2;
}
#soundnotesp {
	/* font-size: 800%; */
	font-weight: bold;
}
#the-colour-code {
	opacity: 0;
}
#SC_PLAYER_CONTAINER_ID {
	position: absolute;
	bottom: 4%;
	left: 1%;
	height: 104px;
	width: 40%;
	min-width: 298px; /*294px;*/
	text-align: center;
	border: solid thin rgba(128, 128, 128, 0.8);
	border-radius: 1.2em;
	background-color: rgba(0, 0, 0, 0.1);
}
.squaresclass > #SC_PLAYER_CONTAINER_ID {
	bottom: 1%;
}
#SC_PLAYER_CONTAINER_ID > #image-col-container {
	position: relative;
	float: left;
	top: 1px;
	max-height: 104px;
	border: none;
}
#SC_PLAYER_CONTAINER_ID > #scnadtrackinfocontainer{
	position: relative;
	top: 2px;
	height: 104px;
	min-height: 100px;
	max-height: 104px;
	left: 4px;
	bottom: 4px;
	margin: 0;
	padding: 0;
	border: none;
}
#scnadtrackinfocontainer > #trackinfotext {
	position: relative;
	top: 0%;
	height: 40%;
	min-height: 48px;	/*42*/
	white-space: nowrap;
	text-align: left;
	text-overflow: ellipsis;
	border: none;
	margin: 0;
	padding: 0;

}
#scnadtrackinfocontainer > #trackProgBar {
	position: relative;
	left: 0px;
	height: 60%;	/*30%;*/
	min-height: 48px;
	max-height: 50px;
	width: 96%;
	border-radius: 1.2em;
	border: none;
	margin: 0;
	padding: 0;
}
#trackProgBar > #canvas10 {
	position: relative;
	left: 0px;
	width: 100%;
	max-width: 100%;
	height: 100%;
	min-height: 40px;
	max-height: 50px;
	border-radius: 1.2em;
	border: solid thin rgba(244, 194, 232, 0.2);
	background-color: rgba(0,0,0, 0);
	margin: 0;
	padding: 0;
}
#trackProgBar > #soundnotesp {

	position: absolute;

	bottom: 2px;
	left: 40%;
	font-size: 200%;
	font-weight: bold;
	opacity: 0.24;
	color: black;
}
#trackProgBar > #cstrackcredit {
	position: absolute;
	left: 2px;
	bottom: 2px;
	border: none;
}
#image-col-container > #SC_TRACK_ALBUM_IMAGE_ID {
	top: 0;
	width: 100px;
	height: 100px;
	vertical-align: middle;
	border: solid thin rgba(64, 46, 64, 0.6);
	border-radius: 1.2em;
}
#image-col-container > #cscreditimg {
	position: absolute;
	bottom: 2px;
	left: 0;
	opacity: 0.5;
	background-color: black;
}
#SC_PLAYER_ICON_CONTAINER_ID {
	position: absolute;
	bottom: 1%;
	right: 2%;
}
a:link {
	
}
#theButtonsCont {
	position: relative;
	width: 100%;
}
.btn, .btn-xs , .btn-md, .glyphicon, .glyphicon-play, .glyphicon-remove-circle, .glyphicon-search, .glyphicon-record,  .glyphicon-play, .glyphicon-pause{
	background-color: #555555;
	border-color: #84889C;	/* #C69998;*/
}
#searchbstyle {
}
#searchFormId {
	position: relative;
	width: 100%;
	height: 2em;
	border-radius: 1em;
	color: black;
	background-color: rgb(232, 232, 232);
}
#SC_SEARCH_INPUT_ID {
	position: relative;
	width: 90%;
	height: 2em;
	border-radius: 1em;
	background-color: rgba(132, 136, 156, 0.4);
	color: black;
}
input {
    background: white;
    color: black;
	font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 0.8em;
}
::-webkit-input-placeholder {
   color:  rgba(0, 0, 0, 0.8) !important;
   font-family: "Open Sans", Helvetica, sans-serif;
   font-size: 1em;
}

:-moz-placeholder { /* Firefox 18- */
   color:  rgba(0, 0, 0, 0.8) !important;
   font-family: "Open Sans", Helvetica, sans-serif;
   font-size: 1em;
}

::-moz-placeholder {  /* Firefox 19+ */
   color:  rgba(0, 0, 0, 0.8) !important;
   font-family: "Open Sans", Helvetica, sans-serif;
   font-size: 1em;
}

:-ms-input-placeholder {
   color:  rgba(0, 0, 0, 0.8) !important;
   font-family: "Open Sans", Helvetica, sans-serif;
   font-size: 1em;
}
p { margin:0 !important; }
/* Div Search results */
#SC_SEARCH_CONTAINER_IDOp {
	top: 0;
	margin: 0;
	position: absolute;
	height: 100%;
	max-height: 100%;
	width: 100%;
	max-width: 100%;
	z-index: 97;
	opacity: 0.8;
	background-color: #DDDDDD;
}
#SC_SEARCH_CONTAINER_ID {
	margin: auto;
	position: absolute;
	height: 100%;
	max-height: 100%;
	width: 100%;
	max-width: 100%;
	z-index: 98;
}
#SC_SEARCH_CONTAINER_ID > #resultsDivMarg {
	top: 8%;
	margin: auto;
	position: relative;
	border: solid grey;
	border-radius: 1.2em;
	height: 84%;
	max-height: 84%;
	width: 50%;
	min-width: 300px;
	max-width: 50%;
	background-color: black;
	z-index: -1;/*99;*/
}
#closeResultsBut {
	position: absolute;
	top: 1%;
	left: 35px;
	z-index: 110;
}
#resultsDivMarg > #searchFormVidCont {
	margin: auto;
	top: 0%;
	position: relative;
	height: 4%;
	max-height: 4%;
	width: 96%;
	max-width: 96%;
}

#resultsDivMarg > #SC_SEARCH_CONTAINER_ID {
	margin: auto;
	top: 4%;
	position: relative;
	height: 88%;
	max-height: 88%;
	width: 96%;
	max-width: 96%;
	min-width: 300px;
	overflow-y: scroll;
}
#SC_SEARCH_CONTAINER_ID > .newtrackstyle  {
	position: relative;
	height: 20%;
	max-height: 20%;
	min-height: 50px;
	border-bottom : solid grey;
	border-width: thin;
	z-index: 101;
}

.newtrackstyle > .textsDivCont {
	position: relative;
	height: 100%;
	max-height: 100%;
	width: 70%;
	max-width: 70%;
	min-width: 200px;
	border-right : solid grey;
	border-width: thin;
	float: left;
}
.textsDivCont > .newtracknamestyle {
	position: relative;
	text-align: left;
	text-overflow: ellipsis;
	overflow:hidden;
	white-space: nowrap;
	font-size: 0.7em;
	margin-bottom: 0;
}

.textsDivCont > .newtrackcomposerstyle {
	position: relative;
	text-align: left;
	text-overflow: ellipsis;
	overflow:hidden;
	white-space: nowrap;
	font-size: 0.65em;
	opacity: 0.8;
	margin-bottom: 0;
	margin-top: 0;
}

.newtrackstyle > .albumImgDivSel {
	top: 0%;
	position: relative;
	float: right;
	width: 30%;
	height: 100%;
}
.albumImgDivSel > .newtrackimagestyle {
	position: relative;
	border-radius: 0.8em;
	border-width: thin;
	height: 100%;
}
#downloadProgCont {
	z-index: 500;
	position: absolute;
	top: 100px;
	left: 1%;
}
#toggleShowContentsButton, #showContentsButton{
	position: absolute;
	top: 1%;
	left: 10px;
}
#SC_SEARCH_BUTTON {
	position: absolute;
	top: 1%;
	left: 35px;
}
#showContentsButton {
	opacity: 0.4;
}
#SC_TRACK_INFO_CONTAINER_ID {
	position: absolute;
	bottom: 1%;
	left: 1%;
	text-align: left;
	max-width: 210px;
	max-width: 200px;
	background-color: rgba(0, 0, 0, 0.2)
}
#theButtonsCont > #cstrackcredit {
	position: relative;
	float: right;
	margin: 0px 6px 0px 0px;
	padding: 0;
	border: none;
}
#trackProgBar > #the-actual-sound-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 94%;
	border: solid thin rgba(0,0,0,0.4);
	border-radius: 0.8em;
}


#sound-main-container >  #colorcanvas {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
}
/* Time Domain Wave */
#twocanvasinone >  #soundrepcanvasagg {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	border-radius: 1.2em;
}
/* Time Domain Bar All*/
#sound-main-container >  #progressBarDiffCanvas {
	position: absolute;
	bottom: 0%;
	left: 1%;
	width: 40%;
	min-width: 280px;
	height: 4%;
	max-height: 4%;
	border-radius: 1.2em;
	border: solid thin rgba(0, 0, 0, 0.2);
	background-color: rgba(0, 0, 0, 0.2);
}
#CSSC_MAIN_CANVAS_CONTAINER_NAME {
	width: 100%;
    height: 100%;
}
#CS_AGGREGATOR_CANVAS_CONTAINER_NAME{
	width: 100%;
    height: 100%;
	max-height: 100%;
}
#CS_POINTERS_CANVAS_CONTAINER_NAME {
	width: 100%;
    height: 100%;
	max-height: 100%;
}
html{
	height: 100%;
	width: 100%;
}
body {
	height: 100%;
	max-height: 100%;
	width: 100%;
	max-width: 100%;
}
#page-wrapper{
	position: absolute;
	width:100%;
	height: 100%;
	overflow: hidden;
	margin: 0 auto;
	left: 0;
	right: 0;
}
header, section, footer, aside, nav, main, article, figure {
    display: block;
}
#page-wrapper > #header {
	position:relative;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	height: 6%;
	width: 100%;
}

#page-wrapper > #banner{
	position:relative;
	padding: 0;
	padding: 0;
	margin: 0;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	height: 90%;
	width: 100%;
}
#banner > #sound-main-container{
	position:relative;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	height:100%;
	max-height:100%;
	width:100%;
	max-width:100%;
}
#page-wrapper > footer {
	position: relative;
	left: 0%;
	bottom: 0%;
	width:100%;
	max-width: 100%;
	height: 4%;
	background-color: rgba(0, 0, 0, 0.4);
	z-index:2;
}
#sound-main-container {
	position: absolute;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	top: 0%;
	margin: 0;
	left: 0;
	right: 0;
}
.pinkgrad {
    background: "dark-gray"; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#C69998, #84889C); /* For Safari 5.1 to 6.0 */ /* #FDC1C1, #A6ABC5*/
    background: -o-linear-gradient(#C69998, #84889C); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#C69998, #84889C); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#C69998, #84889C); /* Standard syntax (must be last) */
}
.textnowrap {
	margin: 0;
	text-overflow: ellipsis;
	overflow:hidden;
	white-space: nowrap;

	font-size: 0.7em;
	line-height: normal;
}
.textnowrap01 {
	margin: 0;
	text-overflow: ellipsis;
	overflow:hidden;
	white-space: nowrap;
	font-size: 1em;
	line-height: normal;
}
.textnowrapandmargin {
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.7em;
	line-height: normal;
}
.hiddenclass{
	position:absolute;
	top: 0%;
	left: 0%;
	width:1px;
	max-width:1px;
	height:1px;
	max-height:1px;
}
.supersavethespace{
	margin: 0;
	padding: 0;
	left: 0;
	top: 0;
	right: 0;
	border: none;
}
#sound-main-container >  #selectedCanvasContainer {
	position: absolute;
	top: 1%;
	left: 1%;
	width: 98%;
	height: 72%;
	border-radius: 1.2em;
	background-color : rgba(0, 0, 0, 0.5);
}
#selectedCanvasContainer > #soundrepcanvasagg, #progressBarDiffCanvas,  #the-actual-sound-frame, #tdbarcanvas,  #colorcanvas, #the-actual-sound-frame-single, #canvas10, #theSquares, #theConcCircles, #freeCanvas {
	border-radius: 1.2em;
	border: solid thin rgba(128, 128, 128, 0.4);
}
.squaresclass > #theSquares {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	border-radius: 0;
}
.squaresclass > #theConcCircles {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	border-radius: 0;
}
.squaresclass > #rawcontsq {
	position: absolute;
	margin: auto;
	top: 42%;
	left: 17%;
	height: 16%;
	width: 66%;
	border-radius: 1.2em;
	background-color: rgba(0, 0, 0, 0.2);
}
#rawcontsq  > #the-actual-sound-frame {
	position: absolute;
	margin: auto;
	top: 0%;
	left: 2%;
	height: 100%;
	width: 96%;
	opacity: 1;
}
#rawcontsq  > #soundrepcanvasagg {
	position: absolute;
	margin: auto;
	top: 0%;
	left: 2%;
	height: 100%;
	width: 96%;
	opacity: 1;
}
/* Time Domain Bar*/
#selectedCanvasContainer >  #colorcanvas {
	position: absolute;
	top: 1%;
	left: 1%;
	width: 98%;
	max-width: 98%;
	height: 80%;
	max-height: 80%;
	border-radius: 1.2em;
	background-color: black;
}
#selectedCanvasContainer > #twocanvasinone {
	position: absolute;
	top: 81%;
	left: 1%;
	width: 98%;
	max-width: 98%;
	height: 18%;
	max-height: 18%;
	border-radius: 1.2em;
	background-color: black;
}
/* Time Domain Wave */
#twocanvasinone >  #the-actual-sound-frame {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	border-radius: 1.2em;
}
/* Time Domain Oscilloscope Wave */
#twocanvasinone >  #the-actual-sound-frame-single {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	border-radius: 1.2em;
}
/* Time Domain Bar All*/
#sound-main-container >  #tdbarcanvas {
	position: absolute;
	bottom: 0%;
	left: 1%;
	width: 40%;
	min-width: 280px;
	height: 4%;
	max-height: 4%;
	border-radius: 1.2em;
	border: solid thin rgba(0, 0, 0, 0.2);
	background-color: rgba(0, 0, 0, 0.2);
}

.squaresclass2 > #sound-main-container{
	 background: "dark-gray"; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#C69998, #84889C); /* For Safari 5.1 to 6.0 */ /* #FDC1C1, #A6ABC5*/
    background: -o-linear-gradient(#C69998, #84889C); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#C69998, #84889C); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#C69998, #84889C); /* Standard syntax (must be last) */
}
/* Time Domain Bar Same Size*/
#colour-sound-datas {
	position:absolute;
	top: 2%;
	right: 2%;
	width: 28%;
	max-width: 300px;
	min-width: 228px;
	border-radius: 1.2em;
	border: solid thin rgba(128, 128, 128, 0.8);
	opacity: 0.8;
}
.squaresclass > #colour-sound-datas{
	visibility: hidden;
}
#colour-sound-datas > #colour-data-div {
	position: relative;
	float: left;
	text-align: right;
	top: 0;
	width: 28%;

}
#colour-sound-datas > #sound-data-div {
	position: relative;
	float: left;
	text-align: left;
	top: 0%;
	border-left: solid thin;
	width: 72%;

}
#currNoteDiv {
	position: absolute;
	top: 60%;
	display:table;
	left: 10%;
	width: 80%;
	height: 30%;
	opacity: 0.2;
}
#soundnotesp {
	/* font-size: 800%; */
	font-weight: bold;
}
#the-colour-code {
	opacity: 0;
}

input {
    background: white;
    color: black;
	font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 0.8em;
}
::-webkit-input-placeholder {
   color:  rgba(0, 0, 0, 0.8) !important;
   font-family: "Open Sans", Helvetica, sans-serif;
   font-size: 1em;
}

:-moz-placeholder { /* Firefox 18- */
   color:  rgba(0, 0, 0, 0.8) !important;
   font-family: "Open Sans", Helvetica, sans-serif;
   font-size: 1em;
}

::-moz-placeholder {  /* Firefox 19+ */
   color:  rgba(0, 0, 0, 0.8) !important;
   font-family: "Open Sans", Helvetica, sans-serif;
   font-size: 1em;
}

:-ms-input-placeholder {
   color:  rgba(0, 0, 0, 0.8) !important;
   font-family: "Open Sans", Helvetica, sans-serif;
   font-size: 1em;
}
p { margin:0 !important; }

#sound-main-container >  #colorcanvas {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
}
/* Time Domain Wave */
#twocanvasinone >  #soundrepcanvasagg {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	border-radius: 1.2em;
}
/* Time Domain Bar All*/
#sound-main-container >  #progressBarDiffCanvas {
	position: absolute;
	bottom: 0%;
	left: 1%;
	width: 40%;
	min-width: 280px;
	height: 4%;
	max-height: 4%;
	border-radius: 1.2em;
	border: solid thin rgba(0, 0, 0, 0.2);
	background-color: rgba(0, 0, 0, 0.2);
}
#scnadtrackinfocontainer > #trackProgBar {
	position: relative;
	left: 0px;
	/*top: 40%;*/
	height: 60%;	/*30%;*/
	min-height: 48px;
	max-height: 50px;
	width: 96%;
	border-radius: 1.2em;
	border: none;
	margin: 0;
	padding: 0;
	/*
	border: solid thin grey;
	background-color: rgba(128, 128, 128, 0.5);
	*/
}
#trackProgBar > #the-note {

	position: absolute;

	bottom: 2px;
	left: 40%;
	font-size: 200%;
	font-weight: bold;
	opacity: 0.24;
	color: black;
}
#trackProgBar > #progressBarSameCanvas {
	position: relative;
	left: 0px;

	width: 100%;
	max-width: 100%;

	/*
	height: 100%;
	max-height: 100%;
	*/
	height: 100%;
	min-height: 40px;
	max-height: 50px;

	border-radius: 1.2em;
	border: solid thin rgba(244, 194, 232, 0.2);

	/* background-color: rgba(0,0,0, 0.6);*/
	background-color: rgba(0,0,0, 0);
	margin: 0;
	padding: 0;
}
#trackProgBar > #cstrackcredit {
	position: absolute;
	/*text-align: left;*/
	/*right: 2px;*/
	left: 2px;
	bottom: 2px;

	border: none;
}/* Div Search results */
#SC_SEARCH_CONTAINER_IDOp {
	top: 0;
	margin: 0;
	position: absolute;
	height: 100%;
	max-height: 100%;
	width: 100%;
	max-width: 100%;
	z-index: 97;
	opacity: 0.8;
	background-color: #DDDDDD;
}
#SC_SEARCH_CONTAINER_ID {
	margin: auto;
	position: absolute;
	height: 100%;
	max-height: 100%;
	width: 100%;
	max-width: 100%;
	z-index: 98;
}
#SC_SEARCH_CONTAINER_ID > #resultsDivMarg {
	top: 8%;
	margin: auto;
	position: relative;
	border: solid grey;
	border-radius: 1.2em;
	height: 84%;
	max-height: 84%;
	width: 50%;
	min-width: 300px;
	max-width: 50%;
	background-color: black;
	z-index: -1;/*99;*/
}
#closeResultsBut {
	position: absolute;
	top: 1%;
	left: 35px;
	z-index: 110;
	/*
	background-color: black;
	border: solid purple;
	*/
	/*
	top: 15%;

	float: right;
	*/

}
#resultsDivMarg > #searchFormVidCont {
	margin: auto;
	top: 0%;
	position: relative;
	height: 4%;
	max-height: 4%;
	width: 96%;
	max-width: 96%;
}

#resultsDivMarg > #SC_SEARCH_CONTAINER_ID {
	margin: auto;
	top: 4%;
	position: relative;
	height: 88%;
	max-height: 88%;
	width: 96%;
	max-width: 96%;
	min-width: 300px;
	overflow-y: scroll;
	/*z-index: 101;*/

	/*
	top: 15%;
	margin: auto;
	position: relative;
	border: solid grey;
	border-radius: 1.2em;
	height: 70%;
	max-height: 70%;
	width: 40%;
	max-width: 40%;
	overflow: scroll;
	z-index: 100;
	*/
}
#SC_SEARCH_CONTAINER_ID > .newtrackstyle  {
	position: relative;
	height: 20%;
	max-height: 20%;
	min-height: 50px;
	border-bottom : solid grey;
	border-width: thin;
	z-index: 101;
}

.newtrackstyle > .textsDivCont {
	position: relative;
	height: 100%;
	max-height: 100%;
	width: 70%;
	max-width: 70%;
	min-width: 200px;
	border-right : solid grey;
	border-width: thin;
	float: left;

}
.textsDivCont > .newtracknamestyle {
	position: relative;
	text-align: left;
	text-overflow: ellipsis;
	overflow:hidden;
	white-space: nowrap;

	font-size: 0.7em;

	margin-bottom: 0;

}

.textsDivCont > .newtrackcomposerstyle {
	position: relative;
	text-align: left;
	text-overflow: ellipsis;
	overflow:hidden;
	white-space: nowrap;

	font-size: 0.65em;
	opacity: 0.8;

	margin-bottom: 0;
	margin-top: 0;

}

.newtrackstyle > .albumImgDivSel {
	top: 0%;
	position: relative;

	float: right;
	width: 30%;
	height: 100%;

}

.albumImgDivSel > .newtrackimagestyle {
	position: relative;
	border-radius: 0.8em;
	border-width: thin;
	height: 100%;


}
#downloadProgCont {
	z-index: 500;
	position: absolute;
	top: 100px;
	left: 1%;
}
#toggleShowContentsButton, #showContentsButton{
	position: absolute;
	top: 1%;
	left: 10px;

}
#SC_SEARCH_BUTTON {
	position: absolute;
	top: 1%;
	left: 35px;
}
#showContentsButton {
	opacity: 0.4;
}
#SC_TRACK_INFO_CONTAINER_ID {
	position: absolute;
	bottom: 1%;
	left: 1%;
	text-align: left;
	max-width: 210px;
	max-width: 200px;
	background-color: rgba(0, 0, 0, 0.2)
}
#infoButton {
	position: fixed;
	top: 6%;
	right: 10px;
	z-index: 100;
}
#infodiv {
	/*margin: auto;*/
	position: fixed;
	top: 8%;
	height: 100%;
	max-height: 100%;
	width: 100%;
	max-width: 100%;
	z-index: 98;
	background-color: rgba(0, 0, 0, 0.4);
}
#infodiv > #infodivMargin {
	margin: auto;
	top: 4%;
	position: relative;
	height: 84%;
	max-height: 84%;
	width: 84%;
	max-width: 84%;
	min-width: 330px;
	overflow-y: scroll;
	z-index: 501;
	/*border: solid red;
	border-radius: 1.2em;*/
}
#theButtonsCont > #cstrackcredit {
	position: relative;
	float: right;
	margin: 0px 6px 0px 0px;
	padding: 0;
	border: none;
}
#trackProgBar > #soundrepcanvasagg {
	position: absolute;

	top: 0;
	left: 0;
	width: 100%;
	height: 94%;
	border: solid thin rgba(0,0,0,0.4);
	border-radius: 0.8em;
}

.supersavethespace{
	margin: 0;
	padding: 0;
	left: 0;
	top: 0;
	right: 0;
	border: none;
}
html{
	height: 100%;
	width: 100%;
}
body {
	height: 100%;
	max-height: 100%;
	width: 100%;
	max-width: 100%;
}
#page-wrapper{
	position: absolute;
	width:100%;
	height: 100%;
	overflow: hidden;
	margin: 0 auto;
	left: 0;
	right: 0;
}
header, section, footer, aside, nav, main, article, figure {
    display: block;
}
#page-wrapper > #header {
	position:relative;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	height: 6%;
	width: 100%;
}

#page-wrapper > #banner{
	position:relative;
	padding: 0;
	padding: 0;
	margin: 0;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	height: 90%;
	width: 100%;
}
#banner > #sound-main-container{
	position:relative;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	height:100%;
	max-height:100%;
	width:100%;
	max-width:100%;
}
#page-wrapper > footer {
	position: relative;
	left: 0%;
	bottom: 0%;
	width:100%;
	max-width: 100%;
	height: 4%;
	background-color: rgba(0, 0, 0, 0.4);
	z-index:2;
}
#sound-main-container {
	position: absolute;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	top: 0%;
	margin: 0;
	left: 0;
	right: 0;
}
.pinkgrad {
    background: "dark-gray"; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#C69998, #84889C); /* For Safari 5.1 to 6.0 */ /* #FDC1C1, #A6ABC5*/
    background: -o-linear-gradient(#C69998, #84889C); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#C69998, #84889C); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#C69998, #84889C); /* Standard syntax (must be last) */
}
.textnowrap {
	margin: 0;
	text-overflow: ellipsis;
	overflow:hidden;
	white-space: nowrap;

	font-size: 0.7em;
	line-height: normal;
}
.textnowrap01 {
	margin: 0;
	text-overflow: ellipsis;
	overflow:hidden;
	white-space: nowrap;
	font-size: 1em;
	line-height: normal;
}
.textnowrapandmargin {
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.7em;
	line-height: normal;
}
.hiddenclass{
	position:absolute;
	top: 0%;
	left: 0%;
	width:1px;
	max-width:1px;
	height:1px;
	max-height:1px;
}
.supersavethespace{
	margin: 0;
	padding: 0;
	left: 0;
	top: 0;
	right: 0;
	border: none;
}
#sound-main-container >  #selectedCanvasContainer {
	position: absolute;
	top: 1%;
	left: 1%;
	width: 98%;
	height: 72%;
	border-radius: 1.2em;
	background-color : rgba(0, 0, 0, 0.5);
}
#selectedCanvasContainer > #soundrepcanvasagg, #progressBarDiffCanvas,  #the-actual-sound-frame, #tdbarcanvas,  #colorcanvas, #the-actual-sound-frame-single, #canvas10, #theSquares, #theConcCircles, #freeCanvas {
	border-radius: 1.2em;
	border: solid thin rgba(128, 128, 128, 0.4);
}
.squaresclass > #theSquares {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	border-radius: 0;
}
.squaresclass > #theConcCircles {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	border-radius: 0;
}
.squaresclass > #rawcontsq {
	position: absolute;
	margin: auto;
	top: 42%;
	left: 17%;
	height: 16%;
	width: 66%;
	border-radius: 1.2em;
	background-color: rgba(0, 0, 0, 0.2);
}
#rawcontsq  > #the-actual-sound-frame {
	position: absolute;
	margin: auto;
	top: 0%;
	left: 2%;
	height: 100%;
	width: 96%;
	opacity: 1;
}
#rawcontsq  > #soundrepcanvasagg {
	position: absolute;
	margin: auto;
	top: 0%;
	left: 2%;
	height: 100%;
	width: 96%;
	opacity: 1;
}
/* Time Domain Bar*/
#selectedCanvasContainer >  #colorcanvas {
	position: absolute;
	top: 1%;
	left: 1%;
	width: 98%;
	max-width: 98%;
	height: 80%;
	max-height: 80%;
	border-radius: 1.2em;
	background-color: black;
}
#selectedCanvasContainer > #twocanvasinone {
	position: absolute;
	top: 81%;
	left: 1%;
	width: 98%;
	max-width: 98%;
	height: 18%;
	max-height: 18%;
	border-radius: 1.2em;
	background-color: black;
}
/* Time Domain Wave */
#twocanvasinone >  #the-actual-sound-frame {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	border-radius: 1.2em;
}
/* Time Domain Oscilloscope Wave */
#twocanvasinone >  #the-actual-sound-frame-single {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	border-radius: 1.2em;
}
/* Time Domain Bar All*/
#sound-main-container >  #tdbarcanvas {
	position: absolute;
	bottom: 0%;
	left: 1%;
	width: 40%;
	min-width: 280px;
	height: 4%;
	max-height: 4%;
	border-radius: 1.2em;
	border: solid thin rgba(0, 0, 0, 0.2);
	background-color: rgba(0, 0, 0, 0.2);
}

.squaresclass2 > #sound-main-container{
	 background: "dark-gray"; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#C69998, #84889C); /* For Safari 5.1 to 6.0 */ /* #FDC1C1, #A6ABC5*/
    background: -o-linear-gradient(#C69998, #84889C); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#C69998, #84889C); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#C69998, #84889C); /* Standard syntax (must be last) */
}
/* Time Domain Bar Same Size*/
#colour-sound-datas {
	position:absolute;
	top: 2%;
	right: 2%;
	width: 28%;
	max-width: 300px;
	min-width: 228px;
	border-radius: 1.2em;
	border: solid thin rgba(128, 128, 128, 0.8);
	opacity: 0.8;
}
.squaresclass > #colour-sound-datas{
	visibility: hidden;
}
#colour-sound-datas > #colour-data-div {
	position: relative;
	float: left;
	text-align: right;
	top: 0;
	width: 28%;

}
#colour-sound-datas > #sound-data-div {
	position: relative;
	float: left;
	text-align: left;
	top: 0%;
	border-left: solid thin;
	width: 72%;

}
#currNoteDiv {
	position: absolute;
	top: 60%;
	display:table;
	left: 10%;
	width: 80%;
	height: 30%;
	opacity: 0.2;
}
#soundnotesp {
	/* font-size: 800%; */
	font-weight: bold;
}
#the-colour-code {
	opacity: 0;
}
#SC_PLAYER_CONTAINER_ID {
	position: absolute;
	bottom: 4%;
	left: 1%;
	height: 104px;
	width: 40%;
	min-width: 298px; /*294px;*/
	text-align: center;
	border: solid thin rgba(128, 128, 128, 0.8);
	border-radius: 1.2em;
	background-color: rgba(0, 0, 0, 0.1);
}
.squaresclass > #SC_PLAYER_CONTAINER_ID {
	bottom: 1%;
}
#SC_PLAYER_CONTAINER_ID > #image-col-container {
	position: relative;
	float: left;
	top: 1px;
	max-height: 104px;
	border: none;
}
#SC_PLAYER_CONTAINER_ID > #scnadtrackinfocontainer{
	position: relative;
	top: 2px;
	height: 104px;
	min-height: 100px;
	max-height: 104px;
	left: 4px;
	bottom: 4px;
	margin: 0;
	padding: 0;
	border: none;
}
#scnadtrackinfocontainer > #trackinfotext {
	position: relative;
	top: 0%;
	height: 40%;
	min-height: 48px;	/*42*/
	white-space: nowrap;
	text-align: left;
	text-overflow: ellipsis;
	border: none;
	margin: 0;
	padding: 0;

}
#scnadtrackinfocontainer > #trackProgBar {
	position: relative;
	left: 0px;
	height: 60%;	/*30%;*/
	min-height: 48px;
	max-height: 50px;
	width: 96%;
	border-radius: 1.2em;
	border: none;
	margin: 0;
	padding: 0;
}
#trackProgBar > #canvas10 {
	position: relative;
	left: 0px;
	width: 100%;
	max-width: 100%;
	height: 100%;
	min-height: 40px;
	max-height: 50px;
	border-radius: 1.2em;
	border: solid thin rgba(244, 194, 232, 0.2);
	background-color: rgba(0,0,0, 0);
	margin: 0;
	padding: 0;
}
#trackProgBar > #soundnotesp {

	position: absolute;

	bottom: 2px;
	left: 40%;
	font-size: 200%;
	font-weight: bold;
	opacity: 0.24;
	color: black;
}
#trackProgBar > #cstrackcredit {
	position: absolute;
	left: 2px;
	bottom: 2px;
	border: none;
}
#image-col-container > #SC_TRACK_ALBUM_IMAGE_ID {
	top: 0;
	width: 100px;
	height: 100px;
	vertical-align: middle;
	border: solid thin rgba(64, 46, 64, 0.6);
	border-radius: 1.2em;
}
#image-col-container > #cscreditimg {
	position: absolute;
	bottom: 2px;
	left: 0;
	opacity: 0.5;
	background-color: black;
}
#SC_PLAYER_ICON_CONTAINER_ID {
	position: absolute;
	bottom: 1%;
	right: 2%;
}
a:link {
	
}
#theButtonsCont {
	position: relative;
	width: 100%;
}
.btn, .btn-xs , .btn-md, .glyphicon, .glyphicon-play, .glyphicon-remove-circle, .glyphicon-search, .glyphicon-record,  .glyphicon-play, .glyphicon-pause{
	background-color: #555555;
	border-color: #84889C;	/* #C69998;*/
}
#searchbstyle {
}
#searchFormId {
	position: relative;
	width: 100%;
	height: 2em;
	border-radius: 1em;
	color: black;
	background-color: rgb(232, 232, 232);
}
#SC_SEARCH_INPUT_ID {
	position: relative;
	width: 90%;
	height: 2em;
	border-radius: 1em;
	background-color: rgba(132, 136, 156, 0.4);
	color: black;
}
input {
    background: white;
    color: black;
	font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 0.8em;
}
::-webkit-input-placeholder {
   color:  rgba(0, 0, 0, 0.8) !important;
   font-family: "Open Sans", Helvetica, sans-serif;
   font-size: 1em;
}

:-moz-placeholder { /* Firefox 18- */
   color:  rgba(0, 0, 0, 0.8) !important;
   font-family: "Open Sans", Helvetica, sans-serif;
   font-size: 1em;
}

::-moz-placeholder {  /* Firefox 19+ */
   color:  rgba(0, 0, 0, 0.8) !important;
   font-family: "Open Sans", Helvetica, sans-serif;
   font-size: 1em;
}

:-ms-input-placeholder {
   color:  rgba(0, 0, 0, 0.8) !important;
   font-family: "Open Sans", Helvetica, sans-serif;
   font-size: 1em;
}
p { margin:0 !important; }
/* Div Search results */
#SC_SEARCH_CONTAINER_IDOp {
	top: 0;
	margin: 0;
	position: absolute;
	height: 100%;
	max-height: 100%;
	width: 100%;
	max-width: 100%;
	z-index: 97;
	opacity: 0.8;
	background-color: #DDDDDD;
}
#SC_SEARCH_CONTAINER_ID {
	margin: auto;
	position: absolute;
	height: 100%;
	max-height: 100%;
	width: 100%;
	max-width: 100%;
	z-index: 98;
}
#SC_SEARCH_CONTAINER_ID > #resultsDivMarg {
	top: 8%;
	margin: auto;
	position: relative;
	border: solid grey;
	border-radius: 1.2em;
	height: 84%;
	max-height: 84%;
	width: 50%;
	min-width: 300px;
	max-width: 50%;
	background-color: black;
	z-index: -1;/*99;*/
}
#closeResultsBut {
	position: absolute;
	top: 1%;
	left: 35px;
	z-index: 110;
}
#resultsDivMarg > #searchFormVidCont {
	margin: auto;
	top: 0%;
	position: relative;
	height: 4%;
	max-height: 4%;
	width: 96%;
	max-width: 96%;
}

#resultsDivMarg > #SC_SEARCH_CONTAINER_ID {
	margin: auto;
	top: 4%;
	position: relative;
	height: 88%;
	max-height: 88%;
	width: 96%;
	max-width: 96%;
	min-width: 300px;
	overflow-y: scroll;
}
#SC_SEARCH_CONTAINER_ID > .newtrackstyle  {
	position: relative;
	height: 20%;
	max-height: 20%;
	min-height: 50px;
	border-bottom : solid grey;
	border-width: thin;
	z-index: 101;
}

.newtrackstyle > .textsDivCont {
	position: relative;
	height: 100%;
	max-height: 100%;
	width: 70%;
	max-width: 70%;
	min-width: 200px;
	border-right : solid grey;
	border-width: thin;
	float: left;
}
.textsDivCont > .newtracknamestyle {
	position: relative;
	text-align: left;
	text-overflow: ellipsis;
	overflow:hidden;
	white-space: nowrap;
	font-size: 0.7em;
	margin-bottom: 0;
}

.textsDivCont > .newtrackcomposerstyle {
	position: relative;
	text-align: left;
	text-overflow: ellipsis;
	overflow:hidden;
	white-space: nowrap;
	font-size: 0.65em;
	opacity: 0.8;
	margin-bottom: 0;
	margin-top: 0;
}

.newtrackstyle > .albumImgDivSel {
	top: 0%;
	position: relative;
	float: right;
	width: 30%;
	height: 100%;
}
.albumImgDivSel > .newtrackimagestyle {
	position: relative;
	border-radius: 0.8em;
	border-width: thin;
	height: 100%;
}
#downloadProgCont {
	z-index: 500;
	position: absolute;
	top: 100px;
	left: 1%;
}
#toggleShowContentsButton, #showContentsButton{
	position: absolute;
	top: 1%;
	left: 10px;
}
#SC_SEARCH_BUTTON {
	position: absolute;
	top: 1%;
	left: 35px;
}
#showContentsButton {
	opacity: 0.4;
}
#SC_TRACK_INFO_CONTAINER_ID {
	position: absolute;
	bottom: 1%;
	left: 1%;
	text-align: left;
	max-width: 210px;
	max-width: 200px;
	background-color: rgba(0, 0, 0, 0.2)
}
#theButtonsCont > #cstrackcredit {
	position: relative;
	float: right;
	margin: 0px 6px 0px 0px;
	padding: 0;
	border: none;
}
#trackProgBar > #the-actual-sound-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 94%;
	border: solid thin rgba(0,0,0,0.4);
	border-radius: 0.8em;
}


#sound-main-container >  #colorcanvas {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
}
/* Time Domain Wave */
#twocanvasinone >  #soundrepcanvasagg {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	border-radius: 1.2em;
}
/* Time Domain Bar All*/
#sound-main-container >  #progressBarDiffCanvas {
	position: absolute;
	bottom: 0%;
	left: 1%;
	width: 40%;
	min-width: 280px;
	height: 4%;
	max-height: 4%;
	border-radius: 1.2em;
	border: solid thin rgba(0, 0, 0, 0.2);
	background-color: rgba(0, 0, 0, 0.2);
}html{
	height: 100%;
	width: 100%;
}
body {
	height: 100%;
	max-height: 100%;
	width: 100%;
	max-width: 100%;
}
#page-wrapper{
	position: absolute;
	width:100%;
	height: 100%;
	overflow: hidden;
	margin: 0 auto;
	left: 0;
	right: 0;
}
header, section, footer, aside, nav, main, article, figure {
    display: block;
}
#page-wrapper > #header {
	position:relative;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	height: 6%;
	width: 100%;
}

#page-wrapper > #banner{
	position:relative;
	padding: 0;
	padding: 0;
	margin: 0;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	height: 90%;
	width: 100%;
}
#banner > #sound-main-container{
	position:relative;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	height:100%;
	max-height:100%;
	width:100%;
	max-width:100%;
}
#page-wrapper > footer {
	position: relative;
	left: 0%;
	bottom: 0%;
	width:100%;
	max-width: 100%;
	height: 4%;
	background-color: rgba(0, 0, 0, 0.4);
	z-index:2;
}
#sound-main-container {
	position: absolute;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	top: 0%;
	margin: 0;
	left: 0;
	right: 0;
}
.pinkgrad {
    background: "dark-gray"; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#C69998, #84889C); /* For Safari 5.1 to 6.0 */ /* #FDC1C1, #A6ABC5*/
    background: -o-linear-gradient(#C69998, #84889C); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#C69998, #84889C); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#C69998, #84889C); /* Standard syntax (must be last) */
}
.textnowrap {
	margin: 0;
	text-overflow: ellipsis;
	overflow:hidden;
	white-space: nowrap;

	font-size: 0.7em;
	line-height: normal;
}
.textnowrap01 {
	margin: 0;
	text-overflow: ellipsis;
	overflow:hidden;
	white-space: nowrap;
	font-size: 1em;
	line-height: normal;
}
.textnowrapandmargin {
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.7em;
	line-height: normal;
}
.hiddenclass{
	position:absolute;
	top: 0%;
	left: 0%;
	width:1px;
	max-width:1px;
	height:1px;
	max-height:1px;
}
.supersavethespace{
	margin: 0;
	padding: 0;
	left: 0;
	top: 0;
	right: 0;
	border: none;
}
#sound-main-container >  #selectedCanvasContainer {
	position: absolute;
	top: 1%;
	left: 1%;
	width: 98%;
	height: 72%;
	border-radius: 1.2em;
	background-color : rgba(0, 0, 0, 0.5);
}
#selectedCanvasContainer > #soundrepcanvasagg, #progressBarDiffCanvas,  #the-actual-sound-frame, #tdbarcanvas,  #colorcanvas, #the-actual-sound-frame-single, #canvas10, #theSquares, #theConcCircles, #freeCanvas {
	border-radius: 1.2em;
	border: solid thin rgba(128, 128, 128, 0.4);
}
.squaresclass > #theSquares {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	border-radius: 0;
}
.squaresclass > #theConcCircles {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	border-radius: 0;
}
.squaresclass > #rawcontsq {
	position: absolute;
	margin: auto;
	top: 42%;
	left: 17%;
	height: 16%;
	width: 66%;
	border-radius: 1.2em;
	background-color: rgba(0, 0, 0, 0.2);
}
#rawcontsq  > #the-actual-sound-frame {
	position: absolute;
	margin: auto;
	top: 0%;
	left: 2%;
	height: 100%;
	width: 96%;
	opacity: 1;
}
#rawcontsq  > #soundrepcanvasagg {
	position: absolute;
	margin: auto;
	top: 0%;
	left: 2%;
	height: 100%;
	width: 96%;
	opacity: 1;
}
/* Time Domain Bar*/
#selectedCanvasContainer >  #colorcanvas {
	position: absolute;
	top: 1%;
	left: 1%;
	width: 98%;
	max-width: 98%;
	height: 80%;
	max-height: 80%;
	border-radius: 1.2em;
	background-color: black;
}
#selectedCanvasContainer > #twocanvasinone {
	position: absolute;
	top: 81%;
	left: 1%;
	width: 98%;
	max-width: 98%;
	height: 18%;
	max-height: 18%;
	border-radius: 1.2em;
	background-color: black;
}
/* Time Domain Wave */
#twocanvasinone >  #the-actual-sound-frame {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	border-radius: 1.2em;
}
/* Time Domain Oscilloscope Wave */
#twocanvasinone >  #the-actual-sound-frame-single {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	border-radius: 1.2em;
}
/* Time Domain Bar All*/
#sound-main-container >  #tdbarcanvas {
	position: absolute;
	bottom: 0%;
	left: 1%;
	width: 40%;
	min-width: 280px;
	height: 4%;
	max-height: 4%;
	border-radius: 1.2em;
	border: solid thin rgba(0, 0, 0, 0.2);
	background-color: rgba(0, 0, 0, 0.2);
}

.squaresclass2 > #sound-main-container{
	 background: "dark-gray"; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#C69998, #84889C); /* For Safari 5.1 to 6.0 */ /* #FDC1C1, #A6ABC5*/
    background: -o-linear-gradient(#C69998, #84889C); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#C69998, #84889C); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#C69998, #84889C); /* Standard syntax (must be last) */
}
/* Time Domain Bar Same Size*/
#colour-sound-datas {
	position:absolute;
	top: 2%;
	right: 2%;
	width: 28%;
	max-width: 300px;
	min-width: 228px;
	border-radius: 1.2em;
	border: solid thin rgba(128, 128, 128, 0.8);
	opacity: 0.8;
}
.squaresclass > #colour-sound-datas{
	visibility: hidden;
}
#colour-sound-datas > #colour-data-div {
	position: relative;
	float: left;
	text-align: right;
	top: 0;
	width: 28%;

}
#colour-sound-datas > #sound-data-div {
	position: relative;
	float: left;
	text-align: left;
	top: 0%;
	border-left: solid thin;
	width: 72%;

}
#currNoteDiv {
	position: absolute;
	top: 60%;
	display:table;
	left: 10%;
	width: 80%;
	height: 30%;
	opacity: 0.2;
}
#soundnotesp {
	/* font-size: 800%; */
	font-weight: bold;
}
#the-colour-code {
	opacity: 0;
}

input {
    background: white;
    color: black;
	font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 0.8em;
}
::-webkit-input-placeholder {
   color:  rgba(0, 0, 0, 0.8) !important;
   font-family: "Open Sans", Helvetica, sans-serif;
   font-size: 1em;
}

:-moz-placeholder { /* Firefox 18- */
   color:  rgba(0, 0, 0, 0.8) !important;
   font-family: "Open Sans", Helvetica, sans-serif;
   font-size: 1em;
}

::-moz-placeholder {  /* Firefox 19+ */
   color:  rgba(0, 0, 0, 0.8) !important;
   font-family: "Open Sans", Helvetica, sans-serif;
   font-size: 1em;
}

:-ms-input-placeholder {
   color:  rgba(0, 0, 0, 0.8) !important;
   font-family: "Open Sans", Helvetica, sans-serif;
   font-size: 1em;
}
p { margin:0 !important; }

#sound-main-container >  #colorcanvas {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
}
/* Time Domain Wave */
#twocanvasinone >  #soundrepcanvasagg {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	border-radius: 1.2em;
}
/* Time Domain Bar All*/
#sound-main-container >  #progressBarDiffCanvas {
	position: absolute;
	bottom: 0%;
	left: 1%;
	width: 40%;
	min-width: 280px;
	height: 4%;
	max-height: 4%;
	border-radius: 1.2em;
	border: solid thin rgba(0, 0, 0, 0.2);
	background-color: rgba(0, 0, 0, 0.2);
}
#scnadtrackinfocontainer > #trackProgBar {
	position: relative;
	left: 0px;
	/*top: 40%;*/
	height: 60%;	/*30%;*/
	min-height: 48px;
	max-height: 50px;
	width: 96%;
	border-radius: 1.2em;
	border: none;
	margin: 0;
	padding: 0;
	/*
	border: solid thin grey;
	background-color: rgba(128, 128, 128, 0.5);
	*/
}
#trackProgBar > #the-note {

	position: absolute;

	bottom: 2px;
	left: 40%;
	font-size: 200%;
	font-weight: bold;
	opacity: 0.24;
	color: black;
}
#trackProgBar > #progressBarSameCanvas {
	position: relative;
	left: 0px;

	width: 100%;
	max-width: 100%;

	/*
	height: 100%;
	max-height: 100%;
	*/
	height: 100%;
	min-height: 40px;
	max-height: 50px;

	border-radius: 1.2em;
	border: solid thin rgba(244, 194, 232, 0.2);

	/* background-color: rgba(0,0,0, 0.6);*/
	background-color: rgba(0,0,0, 0);
	margin: 0;
	padding: 0;
}
#trackProgBar > #cstrackcredit {
	position: absolute;
	/*text-align: left;*/
	/*right: 2px;*/
	left: 2px;
	bottom: 2px;

	border: none;
}/* Div Search results */
#SC_SEARCH_CONTAINER_IDOp {
	top: 0;
	margin: 0;
	position: absolute;
	height: 100%;
	max-height: 100%;
	width: 100%;
	max-width: 100%;
	z-index: 97;
	opacity: 0.8;
	background-color: #DDDDDD;
}
#SC_SEARCH_CONTAINER_ID {
	margin: auto;
	position: absolute;
	height: 100%;
	max-height: 100%;
	width: 100%;
	max-width: 100%;
	z-index: 98;
}
#SC_SEARCH_CONTAINER_ID > #resultsDivMarg {
	top: 8%;
	margin: auto;
	position: relative;
	border: solid grey;
	border-radius: 1.2em;
	height: 84%;
	max-height: 84%;
	width: 50%;
	min-width: 300px;
	max-width: 50%;
	background-color: black;
	z-index: -1;/*99;*/
}
#closeResultsBut {
	position: absolute;
	top: 1%;
	left: 35px;
	z-index: 110;
	/*
	background-color: black;
	border: solid purple;
	*/
	/*
	top: 15%;

	float: right;
	*/

}
#resultsDivMarg > #searchFormVidCont {
	margin: auto;
	top: 0%;
	position: relative;
	height: 4%;
	max-height: 4%;
	width: 96%;
	max-width: 96%;
}

#resultsDivMarg > #SC_SEARCH_CONTAINER_ID {
	margin: auto;
	top: 4%;
	position: relative;
	height: 88%;
	max-height: 88%;
	width: 96%;
	max-width: 96%;
	min-width: 300px;
	overflow-y: scroll;
	/*z-index: 101;*/

	/*
	top: 15%;
	margin: auto;
	position: relative;
	border: solid grey;
	border-radius: 1.2em;
	height: 70%;
	max-height: 70%;
	width: 40%;
	max-width: 40%;
	overflow: scroll;
	z-index: 100;
	*/
}
#SC_SEARCH_CONTAINER_ID > .newtrackstyle  {
	position: relative;
	height: 20%;
	max-height: 20%;
	min-height: 50px;
	border-bottom : solid grey;
	border-width: thin;
	z-index: 101;
}

.newtrackstyle > .textsDivCont {
	position: relative;
	height: 100%;
	max-height: 100%;
	width: 70%;
	max-width: 70%;
	min-width: 200px;
	border-right : solid grey;
	border-width: thin;
	float: left;

}
.textsDivCont > .newtracknamestyle {
	position: relative;
	text-align: left;
	text-overflow: ellipsis;
	overflow:hidden;
	white-space: nowrap;

	font-size: 0.7em;

	margin-bottom: 0;

}

.textsDivCont > .newtrackcomposerstyle {
	position: relative;
	text-align: left;
	text-overflow: ellipsis;
	overflow:hidden;
	white-space: nowrap;

	font-size: 0.65em;
	opacity: 0.8;

	margin-bottom: 0;
	margin-top: 0;

}

.newtrackstyle > .albumImgDivSel {
	top: 0%;
	position: relative;

	float: right;
	width: 30%;
	height: 100%;

}

.albumImgDivSel > .newtrackimagestyle {
	position: relative;
	border-radius: 0.8em;
	border-width: thin;
	height: 100%;


}
#downloadProgCont {
	z-index: 500;
	position: absolute;
	top: 100px;
	left: 1%;
}
#toggleShowContentsButton, #showContentsButton{
	position: absolute;
	top: 1%;
	left: 10px;

}
#SC_SEARCH_BUTTON {
	position: absolute;
	top: 1%;
	left: 35px;
}
#showContentsButton {
	opacity: 0.4;
}
#SC_TRACK_INFO_CONTAINER_ID {
	position: absolute;
	bottom: 1%;
	left: 1%;
	text-align: left;
	max-width: 210px;
	max-width: 200px;
	background-color: rgba(0, 0, 0, 0.2)
}
#infoButton {
	position: fixed;
	top: 6%;
	right: 10px;
	z-index: 100;
}
#infodiv {
	/*margin: auto;*/
	position: fixed;
	top: 8%;
	height: 100%;
	max-height: 100%;
	width: 100%;
	max-width: 100%;
	z-index: 98;
	background-color: rgba(0, 0, 0, 0.4);
}
#infodiv > #infodivMargin {
	margin: auto;
	top: 4%;
	position: relative;
	height: 84%;
	max-height: 84%;
	width: 84%;
	max-width: 84%;
	min-width: 330px;
	overflow-y: scroll;
	z-index: 501;
	/*border: solid red;
	border-radius: 1.2em;*/
}
#theButtonsCont > #cstrackcredit {
	position: relative;
	float: right;
	margin: 0px 6px 0px 0px;
	padding: 0;
	border: none;
}
#trackProgBar > #soundrepcanvasagg {
	position: absolute;

	top: 0;
	left: 0;
	width: 100%;
	height: 94%;
	border: solid thin rgba(0,0,0,0.4);
	border-radius: 0.8em;
}

.supersavethespace{
	margin: 0;
	padding: 0;
	left: 0;
	top: 0;
	right: 0;
	border: none;
}
header, section, footer, aside, nav, main, article, figure {
    display: block;
}
#infoButton {
	position: fixed;
	top: 6%;
	right: 10px;
	z-index: 100;
}
#infodiv {
	position: fixed;
	top: 8%;
	height: 100%;
	max-height: 100%;
	width: 100%;
	max-width: 100%;
	z-index: 98;
	background-color: rgba(0, 0, 0, 0.4);
}
#infodiv > #infodivMargin {
	margin: auto;
	top: 4%;
	position: relative;
	height: 84%;
	max-height: 84%;
	width: 84%;
	max-width: 84%;
	min-width: 330px;
	overflow-y: scroll;
	z-index: 501;
}header, section, footer, aside, nav, main, article, figure {
    display: block;
}
#infoButton {
	position: fixed;
	top: 6%;
	right: 10px;
	z-index: 100;
}
#infodiv {
	position: fixed;
	top: 8%;
	height: 100%;
	max-height: 100%;
	width: 100%;
	max-width: 100%;
	z-index: 98;
	background-color: rgba(0, 0, 0, 0.4);
}
#infodiv > #infodivMargin {
	margin: auto;
	top: 4%;
	position: relative;
	height: 84%;
	max-height: 84%;
	width: 84%;
	max-width: 84%;
	min-width: 330px;
	overflow-y: scroll;
	z-index: 501;
}