/* ==========================================================================
   Monica Peters' Custom CSS Styles
   Based on each screen size (not device dependent) change the following:
        header color & image, icons with content, text size, image sizes, 
        background colors, list styles with icons or text.

    Use em to responsively change size based on screen.
    Do not use em for the background image height on the top cta div.
        
   ========================================================================== */

/* 
	css media queries:  https://developer.mozilla.org/en-US/docs/CSS/Media_queries
 	search youtube for "css media queries"
 	px to em converter:  http://pxtoem.com/
 	http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design

*/

/* plain lists */
ul li a
{
  color: #900;
  text-decoration: none;
  padding: 0.188em; 
  display: block;
  list-style-type: none;
}

/* lady gaga link list */
#lglinks ul li a
{
	font-style: normal;
	font-size: 0.938em;
	color: #666;
	padding-left: 0.063em;
	list-style: none;
	width: 100%;
}

#cta {
	text-align: center;
	background-repeat: no-repeat;
	background-position: center;
}
.audiojs { width: 300px; margin: 0px 0px 0px; }

/* 800px min screen */
@media screen and (min-width: 800px)
{
	#cta 
	{
		background-color: white;
		height: 700px;
		background-image: url("../images/Central.jpg");
	}

	/* add lady gaga text before link */
	#lglinks ul li a:before
	{
	    content: "Lady Gaga ";
	    font-style: italic;
	    color: #666;
	    padding-left: 0.063em;
  	}

  	/* add url text in link list */
  	ul li a:after 
  	{
	    content: " " attr(href) " ";
	    font-size: 0.688em;
	    color: #666;
  	}
}

/* 600px min screen */
@media screen and (max-width: 799px)
{
	#cta 
	{
		background-color: white;
		height: 700px;
		background-image: url("../images/Central.jpg");
	}
}

/* 400px min screen */
@media screen and (max-width: 499px)
{
	#cta 
	{
		background-color: white;
		height: 400px;
		background-image: url("../images/Central.jpg");
	}
}

/* 200px min screen */
@media screen and (max-width: 399px)
{
	#cta 
	{
		background-color: white;
		height: 460px;
		background-image: url("../images/Central.jpg");
	}
}

/* 100px min screen */
@media screen and (max-width: 199px)
{
	#cta 
	{
		background-color: white;
		height: 200px;
		background-image: url("../images/Central.jpg");
	}
}

/* 50px min screen */
@media screen and (max-width: 99px)
{
	#cta 
	{
		background-color: white;
		height: 200px;
		background-image: url("../images/Central.jpg");
	}
}

/* grid based screen - tty, phone with one font */
@media handheld and (grid) and (max-width: 15em)
{
	background:url("/images/large_lady-gaga-born-this-way.jpg");
}

/* monochrome greyscale device with 8 bits per pixel */
@media all and (min-monochrome: 8)
{
	background:url("/images/Lady_Gaga_telephone_reasonably_small.jpg");
}

/* square screen */
@media screen and (min-aspect-ratio: 1/1)
{
	background:url("/images/Lady_Gaga_telephone_reasonably_small.jpg");
}

/* wide screen */
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10)
{
	background:url("/images/large_lady-gaga-born-this-way.jpg");

	/* portrait layout has new image pose */
	@media all and (orientation: portrait) 
	{

	}
}

/* progressive scanning television screen */
@media tv and (scan: progressive) 
{
	background:url("/images/large_lady-gaga-born-this-way.jpg");
}

/* handheld device */
@media handheld and (min-width: 20em), screen and (min-width: 20em) 
{
	background:url("/images/Lady_GaGa__Teeth_by_other_covers.png");
}

/* large screen */
@media all and (min-width: 1151px) 
{
		background:url("/images/large_lady-gaga-born-this-way.jpg");

		/* portrait layout has new image pose */
	@media all and (orientation: portrait) 
	{
		
	}
}

/* 
	Responsive Video
	http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ 
   	see example seven for what I did here
	Not working Yet. ToDo
#containingBlock {
  width:50%;
}
.videoWrapper {
  position: relative;
  padding-bottom:56.25%;
  padding-top:25px;
  height:0;
  overflow:hidden;
}
.videoWrapper div,
.videoWrapper object {
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
}