/*
 * Common iOS CSS
 *
 * This CSS should work for both iPad and iPhone.
 * Also any none common positioning will match iPad horizontal to allow cross browser testing.
 */

/*
 * The footer
 *
 * In Konductor, the footer is represented by two characters from the font "font-awesome"
 * which are used to represent two of the three separated pages / tabs shown.
 *
 * We don't display the character here, that's a SMOP.
 * 
 */
.footer
{
	float		: left;
	position	: fixed;
	bottom		: 10px;
	font-size	: 32pt;
	font-family	: FontAwesome;
	color		: white;
	z-index		: 9999;
}

#footerLeftDiv
{
	left	: 10px;
}

#footerRightDiv
{
	right	: 10px;
}

/*
 * The Header
 *
 * Which is rather similar to the footer..
 *
 */
.header
{
	float		: left;
	position	: fixed;
	top		: 10px;
	font-size	: 32pt;
	font-family	: FontAwesome;
	color		: white;
}

#headerPowerDiv
{
	right	: 10px;
}

#headerHomeDiv
{
	right	: 75px;
}

/* We also keep the iPad horizontal CSS in here, as it will be overridden by other CSS if necesary
 * and allows us to better test on Chrome on a PC.
 * 
 */

#playlistDiv
{
	display	: none;
	top	: 160px;
}


#libraryDiv
{
	display	: none;
	top	: 160px;
}

#controlDiv
{
	display	: none;
	left	: 0px;
}

#infoBox
{
	display	: none;
}

/*
 * Album stuff
 *
 * _1 is the standard control page
 * _2 is full screen
 */

#ds_title_1
{
	font-size	: 32pt;
}

#ds_album_1
{
	font-size	: 24pt;
}

#ds_artist_1
{
	font-size	: 16pt;
}

#ds_title_2
{
	font-size	: 32pt;
}

#ds_album_2
{
	font-size	: 24pt;
}

#ds_artist_2
{
	font-size	: 16pt;
}


#ds_cover_art
{
	position	: fixed;
	left		: 0px;
	top		: 0px;
	padding		: 0px;
	z-index		: -1;
	width		: 600px;
	height		: 600px;
}

/*
 * Progess circle.
 */
#progressId
{
	position	: fixed;
	left		: 680px;
	top		: 050px;
	display		: block;
	z-index		: 10;
}

#progressId_text
{
	position	: absolute;
	left		: 0px;
	top		: 18px;
	height		: 30px;
	width		: 60px;
	padding		: 0px;
	text-align	: center;
	font-size	: 20px;
	z-index		: 11;
}

#progressId_canvas
{
	position	: absolute;
	height		: 60px;
	width		: 60px;
	padding		: 0px;
	z-index		: 10;
}


/*
 * ui.control.titlesDiv
 */


/*
 * ui.control.topRowDiv
 */
#HomeId1
{
	left: 950px;
}

/*
 * ui.control.volumeIdDiv
 */

#volumeId
{
	position	: fixed;
	display		: block;
	z-index		: 10;
	left		: 750px;
	top		: 050px;
}

#volume_level
{
	position	: absolute;
	left		: 0px;
	top		: 18px;
	height		: 30px;
	width		: 60px;
	padding		: 0px;
	text-align	: center;
	font-size	: 20px;
	z-index		: 11;
}


#volume_level_canvas
{
	position	: absolute;
	left		: 0px;
	top		: 0px; 
	height		: 60px;
	width		: 60px;
	padding		: 0px;
	z-index		: 10;
}

#volume_level_img
{
	position	: absolute;
	left		: 0px;
	top		: 0px; 
	height		: 60px;
	width		: 60px;
	padding		: 0px;
	z-index		: 10;
}

#VolumeDecId
{
	position	: absolute;
	left		: 80px; /* Left a little more that 70px to center image more. */
	top		: 12px;
	height		: 60px;
	width		: 60px;
	padding		: 0px;
	font-size	: 36pt;
	font-family	: FontAwesome;
	color		: white;
	z-index		: 9999;
}


#VolumeIncId
{
	position	: absolute;
	left		: 140px;
	top		: 12px;
	height		: 60px;
	width		: 60px;
	padding		: 0px;
	font-size	: 36pt;
	font-family	: FontAwesome;
	color		: white;
	z-index		: 9999;
}

/*
 * ui.controls pause/play, previous, next, shuffle, repeat
 *
 * Note that all these controls are positioned `fixed` as they do not necessarily occure next to
 * each other on the UI.
 * 
 */

/*
 * Controls
 */
#pausePlayDivId
{
	float		: left;
	position	: fixed;
	left		: 800px;
	top		: 160px;
	font-size	: 72pt;
	font-family	: FontAwesome;
	color		: aqua;
	z-index		: 9999;
}

#previousDivId
{
	float		: left;
	position	: fixed;
	left		: 680px;
	top		: 300px;
	font-size	: 32pt;
	font-family	: FontAwesome;
	color		: white;
	z-index		: 9999;
}

#nextDivId
{
	float		: left;
	position	: fixed;
	left		: 755px;
	top		: 300px;
	font-size	: 32pt;
	font-family	: FontAwesome;
	color		: white;
	z-index		: 9999;
}


#randomDivId
{
	float		: left;
	position	: fixed;
	left		: 850px;
	top		: 300px;
	font-size	: 32pt;
	font-family	: FontAwesome;
	color		: white;
	z-index		: 9999;
}

#repeatDivId
{
	float		: left;
	position	: fixed;
	left		: 925px;
	top		: 300px;
	font-size	: 32pt;
	font-family	: FontAwesome;
	color		: white;
	z-index		: 9999;
}


/*
 * classes for use in HTML tables cf playlists etc.
 */

.odd
{
	background-color: black;
}

.even
{
	background-color: #413839; /*grey 30*/
}

.selected
{
	font-weight:bold;
	background-color: #15317e; /* Royal blue 4 */
}

.notCurrentAlbum
{
	background-color: black;
	color:white;
}

.currentAlbum
{
	background-color: #15317e;
	font-weight:bold;
	color:white;
}

/*
 * Trash / wastebasket
 */
.trash
{
	font-size	: 24pt;
	font-family	: FontAwesome;
	color		: aqua;
	z-index		: 9999;
}
	
/* Transparancy from: http://www.w3schools.com/css/css_image_transparency.asp */

/*
 * `footer` & `innerFooter` are used by the control page to provide the track information running along the bottom of the
 * screen.
 * I may conver from ids to classes to allow them to be used elsewhere.
 *
 */

.footerText
{
	background-color: #000000;
	position: fixed;
	bottom: 0;
	width: 100%;
	opacity: 0.6;
	margin: 0px 0px;
}

.innerFooterText
{
	opacity: 1.0;
	text-align: center;
	color: #FFFFFF;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	/*font-weight: 300;*/
}

/* Full screen background from: http://css-tricks.com/perfect-full-page-background-image
 * http://dl.dropbox.com/u/2226856/test/art.1024/noCoverArt.png
 *
 * http://dl.dropbox.com/u/2226856/test/art.320/folder0015.jpg
 *
 * The data URI below is a 1px x 1px black PNG which is used by default.
 *
 * TODO: I need to ensure that the class is set correctly for the body on elaboration.
 * The body class is set to "blackBackground" in createMainPage._init.
 * This is simply "background-color: black"
 */
body {
	margin: 0;
	padding: 0;
	background: #000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAADUlEQVQImWNgYGD4DwABBAEAfbLI3wAAAABJRU5ErkJggg==) center center fixed no-repeat;
	background-size: contain;
	color: #fff;
}