<style type="text/css">
/*===============================================================================*/

.main_div
{
	border-radius: 15px;
	moz-border-radius: 15px;

	/*width: 1000px;*///100%//700px;
	/*wwidth: 900px;*//*width is now declared in globalCSS.php, margins are set conditionally depending on whether mobile or desktop so they are declared in php code globalCSS.php */
	height: auto;

	/*margin: 280px 10px 0px 80px;*/
	font: 16px/1.4 Verdana;/*Arial, sans-serif;*/
	color: #666464; /*general text within the main class*/
	/*example padding: 25px 50px 75px 100px; top, right, bottom and left*/
	padding: 10px 5px 10px 20px; /*padding on the inside of border*/

background: white;

}

#main_table {
//float:left;
  box-sizing: border-box;
  overflow: hidden;
  margin: 1em auto;
border:1px;
  border-collapse: collapse;
  min-width: 23em; width: 100%;
	mmax-width: 56em;/*table size*/
  order-radius: .5em;
/*padding:0px 100px 0px 50px;*/
}

thead {
  background: #E4F9E6;//linear-gradient(#606062, #28262b);
	color:black; //color of text in header
//  font-weight: normal;
  letter-spacing:1.5;
  //text-transform: uppercase;
  cursor: pointer;
color:#666464;
//background-color:navy;
padding:10px;
}

th{
	text-align: right;
/*padding:10px;*/
//border: 3px solid white;// #8A0808;
 }


#main_tr
{
  /*display: block;	was causing table cells to have flexible width and not lining up with header*/
  overflow: hidden;
  width: 100%;
  /*box-shadow: 0 0 .5em #000;*/
    border-top: 2px solid #C0C7FB;/* this is line separating each row was color #ddd;*/
/* opacity:0.1;*/
border-collapse: collapse;

/*box-shadow: 0 0 .5em #000;border-radius:3px;*/
}

#main_td
{
font:bold 12px/1.4 Arial, sans-serif; /*the 1.4 is the space between lines*/
color:#666464;
letter-spacing:1;
	text-align:center;
	padding: 10px; /*inside padding  top, right, bottom and left*/
padding-top:40px;/*This is only meant for all columns except for the image column, overiding this line by padding:10 in image column*/

vertical-align:top;/*(middle) same as center vertically aligns everthing in td, using top align so that it has a cloth line look where there is a straight line at top, then can push to center using padding-top*/

/*background-color:#555;
font-weight:bold;
border:1px solid black;
border-radius: 2px;
box-shadow: 0 0 .2em #000;
text-shadow: 0 0 .5em #000;	
padding:15px 0px 15px 0px;
*/
}




#nonTitlecell
{
//padding:15px;
	//text-shadow: 0 0 .9em #000;
text-align:center;
color:#666464;
font:bold 13px/1.4 Arial, sans-serif;
letter-spacing:1px;
}



#titlecentered
{
}

[class*='prop__']
{
  float: left;
  position: relative;
  padding: .5em 1em;
  width: 40%;
  
  &:last-child { width: 20%; }
  
  &:before {
    position: absolute;
    top: -.5em; right: 0; bottom: -5em; left: 0;
    content: ''
  }
  
  &:after{
    position: absolute;
    right: .5em;
  }
}

}

#pic > img
{
 /*height: 60px; width: 80px; overflow: hidden;*/
}

#roundtextboxSearch
{
	border-radius: 20px;
	/*border: 1px solid #609;*/
	padding:0px 0px 0px 20px;//top, right, bottom, left
	width: 100px;
height:30px;
font-size:12pt;
}

#whiterect
{
	width: 80px;/*200px;*/
	height: auto;/*100px;*/
	background: white;
	margin:auto auto auto auto;
}
#circle {
	width: 30px;
	height: 30px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	margin:auto auto auto auto;
}

#likes{
	width: 22px;//30px;
	height: 22px;//30px;
	display: inline-block; //this line allows size width and height values to work
	-moz-border-radius: 22px;//30px;
	-webkit-border-radius: 22px;30px;
	border-radius: 22px;//30px;

	background: yellow;
	color:navy;
	//line-height: 200px;
	font: bold 18px/1.9 Verdana;
	border:2px solid navy;
	//font-weight:bold;
	text-align:center;
	margin:0px 0px 0px 2px;

}

#share-buttons
{
	margin:0px 0px 0px 0px;//top, right, bottom, left

	background: #8b8b8b; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#34495E), to(#7a7a7a)); /* for webkit browsers *//*dy: these are lines that create the background color gray
---------------------------was -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));*/
	background: -moz-linear-gradient(top,  #a9a9a9,  #7a7a7a); /* for firefox 3.6+ */



  position: fixed;
  left:0;/*right: 0;*/
  top: 30%;
  /*margin-top: -2.5em;*/

}

#share-buttons img
{
	//border-radius:10px;
	padding: 5px;
	padding-bottom:20px;
	margin:10px;
	display: block;
	/*display: inline;*//*"inline" is horizontal on one line, "block" is vertical*/
}

#share-buttons-horizontal
{

	background: #8b8b8b; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#34495E), to(#7a7a7a)); /* for webkit browsers *//*dy: these are lines that create the background color gray
					---------------------------was -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));*/
	background: -moz-linear-gradient(top,  #a9a9a9,  #7a7a7a); /* for firefox 3.6+ */
	display: inline-block;/* when horizontal listing, this line is essential for the background to encompas the images, without this the background becomes just a bar below the images*/
	border-radius:5px;
	ffont-type:verdana;
}

#share-buttons-horizontal img
{
	ppadding: 5px;
	mmargin:10px;
	/*display: block;*/	/*display:block which is default will make images appear in virtical line*/
	display: inline;	/*"display:inline" is horizontal on one line, "display:block" is vertical*/
border:1px solid white;
	vertical-align:middle;	/*necessary to vertically center images*/
	padding:5px;
	margin:20px;
	border-radius:30px;
}
#share-buttons-horizontal a
{
	text-decoration:none;/*to prevent a line under each image link*/
}

table.avgrating
{
text-align:center;
vertical-align:middle;
width:70px;/*width of background container, does not change size of background pic*/
height:70px;/*height of background container, does not change size of background pic*/
background-size: 70px 70px;/*background image size, independent of background size, for text to center properly inside of background image, width and height of background container needs to match width and background of bg image*/
background-repeat: no-repeat;
}

#ratingspan
{
color:red;
	width: 50px;/*was 40*/
	height: 50px;/*as 40*/
	border-radius: 40px;/*was 30*/
	/*border: 7px solid #609;*/
line-height:50px;/*this moves the text down as the number goes up*/
	text-align:center;
padding:0px 0px 0px 0px;//top, right, bottom, left
//vertical-align: middle;
display: inline-block; //this line allows size width and height values to work, they are ignored otherwise
	//background:url('./images/greaterthan9flat.gif');
background:url('./images/10stars.png');

}

#myratingspan
{
color:red;


	//background:url('./images/greaterthan9flat.gif');


	color:#666464;		
	width: 20px;
	height: 20px;
	line-height:20px;/*this moves the text down as the number goes up*/
	border-radius: 15px;
	border: 2px solid #609;
	text-align:center;
	padding:0px 0px 0px 0px;/*top right bottom left*/
	margin:10px 0px 0px 0px;
	/*vertical-align: middle;*/
	display: inline-block;/*this line allows size width and height values to work*/
	font-size:11pt;
}

#kf_legendL
{
width:2px;
height:2px;
}

#kf_legendR
{
color:#B3B3B3;/*very faded out color for all not chosen kf choices*/
letter-spacing:1;
font:bold 8pt/1.4 Arial, sans-serif;
//width:80px;
//height:7px;
//text-shadow: 0px 0px #ff0000;
padding:0px 2px 0px 15px;
}

#kf_highVote
{
font:bold 9pt/1.4 Arial, sans-serif;
 border-collapse: collapse;
  border-color: blue;
padding:0px 2px 0px 5px;
//	border-radius: 15px;
//	moz-border-radius: 15px;
}

#genre_highVote
{
text-align:left;
//width:200px;
font:bold 9pt/1.4 Arial, sans-serif;
	//background-color:beige;
color:#666464;	//color:brown;
margin:0px 12px 3px 12px;//margin:0px 12px 10px 12px;
//border-bottom:3px solid white;//border-bottom:15px solid white;
padding:3px 3px 3px 3px; //top left bottom right
// border-collapse: collapse;
//  border-color: blue;
//	border-radius: 15px;
//	moz-border-radius: 15px;
}


.infoHeading
{
/*infoHeading used by artist-info and movie-info*/
text-align:center;
color:gray;
font:bold 15px/1.4 Arial, sans-serif;
letter-spacing:1px;
height:50px;
width:350px;
color:white;
padding:0px 5px 0px 5px;



	background: #8b8b8b; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#34495E), to(#7a7a7a)); /* for webkit browsers *//*dy: these are lines that create the menu background color gray
---------------------------was -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));*/
	background: -moz-linear-gradient(top,  #a9a9a9,  #7a7a7a); /* for firefox 3.6+ */


}


.info
{
/*info used by artist-info and movie-info*/
text-align:center;
color:gray;
font:bold 15px/1.4 Arial, sans-serif;
letter-spacing:1px;
}

/************Begin .play is only for youtube url preview image play button, for YT play button overlay*/
.youtube:hover
{
		bbackground-color: red;/*dy added: did not work*/
	cursor: pointer;

    ddisplay: flex;/*dy added:causes all child items, items inside this container to use this display type*/
    aalign-items: center; /*dy added: vertical, for all child items */
    jjustify-content: center; /*dy added: horizontal, for all child items */

	.play
	{
		background: red;
		opacity: 0.9;
	}
}
.play
{
	/* dy: ".play" draws only the outer box surrounding the play triangle, only controls the outer box*/

	font-size: 2em; /* change this to change size, will change both the play triangle and the surrounding box size at same time */
	/*ttransform: translateY(30px);dy:was originaly 130, this works to move the play button area down from top by the given number*/
	pposition: absolute;/*dy:puting this in was making it go too far to right,taking it out centers it horizontally*/
	left:0;
	right:0;
	/*mmargin:auto;this is actually working for left and right but not top and bottom*/
/*ddisplay:inline-block;dy added*/
margin:auto auto auto auto;/* dy added:top right bottom left, auto for top and bottom did not work but works for left and right as long as dispay:inline-block is not on*/
	background:#3b3636;/* was #3b3636;color of box surrounding play triangle*/
	opacity: 0.95;/*was 0.75*/
	border-radius: 50% / 10%;

	color: #FFFFFF;
	height: 4em;
	ppadding: 0;
/*ppadding-left:auto;dy added:did not work to center horizontally so took out*/
/*ppadding-right:auto;dy added:did not work to center horizontally so took out*/
	text-align: center;
/*vvertical-align:center;dy added:did not work to center vertically so took out*/
	text-indent: 0.1em;
	transition: all 150ms ease-out;
	width: 5em;

display: flex;/*dy added: causes all child items, items inside this container to use this display type*/
align-items: center; /*dy added: vertical, for all child items */
justify-content: center; /*dy added: horizontal, for all child items */
}

.play::before
{
	background: inherit;
	border-radius: 5% / 50%;
	bottom: 9%;
	content: "";
	left: -5%;
	/*pposition: absolute;*/
	right: -5%;
	top: 9%;
/*mmargin:auto 0px auto 0px;dy added:top right bottom left*/
}

.play::after /*dy: works to draw the play triangle but no rollover effect*/
{
	/* dy: ".play::after" draws only the white play triangle, similar to a right arrow*/

	border-style: solid;/*dy: needed or triangle wont show up*/
	border-width: 1em 0 1em 1.732em;/*dy: top right bottom left, was 1em 0 1em 1.732em, this is what determines the play triangle shape
						top:determines how high from center the top-left corner of triangle extends
						right: the higher this number, the further left the whole triangle is moved but does not affect shape of triangle
						bottom: determines how low from center the bottom-left corner of triangle extends
						left: determines how far to the right the right pointy tip of triangle extends
	*/

	border-color: transparent transparent transparent rgba(246, 16, 38, 0.95);/*dy: was (255,255,255,0.75) which is gray, changed it to red since rollover effect not working, without this line only white rectangle box is seen, this is what gives play triangle color, 4th number give it transparancy the lower the more transparent*/

	content: ' ';/*dy:was just one space char, this line does not seem to make a difference*/
	font-size: 0.95em;//dy: determines size of play triangle

	height: 0;/*does not seem to have any affect*/
	mmargin: -1em 0 0 -0.75em;/*dy: top right bottom left, not needed here*/
ddisplay:inline-block;/*dy added:not having this line or having "display:inline" (default) causes right 3rd of triangle to cut off, needs to be "block" or "inline-block" or "flex" putting this in suddenly made it display whole triangle instead of cutting off right pointy part off*/
margin:auto 0px auto 0px;/*dy added:top right bottom left, this works*/
mmargin:15px 0px 0px 0px;/*dy added:top right bottom left, this works but not when set to auto*/
vvertical-align:middle;/*dy added did not work*/


	ttop: 50%;/*dy: does not seem to have any affect*/
	pposition: absolute;/*dy: when this is on the whole triangle moves too far to right*/
	width: 0;
}

/**********End .play is only for youtube url preview image play button, for YT play button overlay */

</style>