/*
 * Walter Ritter, pearworks 2005
 * Version 0.4
 * Based on Apple's Scroller.css
 */

#front {
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	height:100%;
	display:block;
}

#back {
	position:absolute;
	top:0;
	left:0;
	height:224px;
	width:300px;
	background:url(Images/Default_Reverse.png);
	background-repeat:no-repeat;
	display:none;
}

/*
 * Border 
 */
#t_l {
	position:absolute;
	top:0px;
	left:0px;
	width:11px;
	height:27px;
	background:url(Images/t_l.png);
	background-repeat:no-repeat;	
}

#t_b {
	position:absolute;
	top:0px;
	left:10px;
	right:11px;
	height:27px;
	background:url(Images/t_b.png);
	background-repeat:repeat;
}

#t_r {
	position:absolute;
	top:0px;
	right:0px;
	width:11px;
	height:27px;
	background:url(Images/t_r.png);
	background-repeat:no-repeat;	
}

#b_l {
	position:absolute;
	bottom:0px;
	left:0px;
	width:11px;
	height:24px;
	background:url(Images/b_l.png);
	background-repeat:no-repeat;	
}

#b_b {
	position:absolute;
	bottom:0px;
	left:10px;
	right:11px;
	height:24px;
	background:url(Images/b_b.png);
	background-repeat:repeat;
}

#b_r {
	position:absolute;
	bottom:0px;
	right:0px;
	width:11px;
	height:24px;
	background:url(Images/b_r.png);
	background-repeat:no-repeat;	
}

#bgp {
	position:absolute;
	bottom:24px;
	right:0px;
	left:0px;
	top:27px;
	background:url(Images/m_b.png);
	background-repeat:repeat;
}


/*
 *	Top control bar where you select one of the three divs/dates
 */
 
#topBar {
	position:absolute;
	top:1px;
	left:15px;
	right:15px;
	height:24px;
}

/*
 ****************************
 *	Main content DIV styles	*
 ****************************
 */
 
/*
 *	parentDiv is set to overflow:hidden; mainContent-class divs have 
 *  normal / visible overflow
 *
 *  mainContent divs require a 'top' attribute of 0; this is so getComputedStyle
 *  will report the full size we need for sizing the scroll thumb (see 
 *  calculateAndShowThumb for more)
 */

#parentDiv {
	position:absolute;
	top:32px;	
	bottom:25px;
	left:20px;
	right:8px;
	overflow:hidden;
}
.mainContent {
	position:absolute;
	left:0;
	top:0;
	right:32px;
	font:11px "Lucida Grande";
	display:none;
	color: white;
	overflow: hidden;
	z-index: 10;
}

#statusText {
	position:absolute;
	bottom:4px;
	left:20px;
	right: 80;
	font:9px "Lucida Grande";	
	color:white;
}

#rejectButton {
	position:absolute;
	bottom:4px;
	width:32px;
	right: 76px;
	font:9px "Lucida Grande";	
	color:white;
	display:none;
	background:none;
}

#googleButton {
	position:absolute;
	bottom:4px;
	width:36px;
	right: 36px;
	font:9px "Lucida Grande";	
	color:white;
	display:none;
	background:none;
}



/*
 ************************
 *	Scroller DIV styles	*
 ************************
 */
#myScrollBar {
	position:absolute;
	right:0;
	top:4px;
	bottom:4px;
	right:5px;
	width:19px;
	display:block;
	
	-apple-dashboard-region:dashboard-region(control rectangle);
}

/*	Scroller track	*/
.scrollTrackTop {
	position:absolute;
	top:0;
	width:19px;
	height:18px;
	background:url(Images/top_scroll_track.png);
	background-repeat:no-repeat;
	background-position:top left;
}
.scrollTrackMid {
	position:absolute;
	top:18px;
	width:19px;
	bottom:18px;
	background:url(Images/mid_scroll_track.png);
	background-repeat:repeat-y;
	background-position:top left;
}
.scrollTrackBot {
	position:absolute;
	bottom:0;
	width:19px;
	height:18px;
	background:url(Images/bottom_scroll_track.png);
	background-repeat:no-repeat;
	background-position:top left;
}

/* Scroller thumb	*/
#myScrollThumb {
	position:absolute;
	top:-1px;
	left:1px;
	height:27px;
	display:block;
}
.scrollThumbTop {
	position:absolute;
	top:0;
	width:18px;
	height:9px;
	background:url(Images/scroll_bar_top.png);
	background-repeat:no-repeat;
	background-position:top left;
}
.scrollThumbMid {
	position:absolute;
	top:9px;
	width:18px;
	bottom:9px;
	background:url(Images/scroll_bar_mid.png);
	background-repeat:repeat-y;
	background-position:top left;
}
.scrollThumbBot {
	position:absolute;
	bottom:0;
	width:18px;
	height:9px;
	background:url(Images/scroll_bar_bottom.png);
	background-repeat:no-repeat;
	background-position:top left;
}

/*
 ****************
 *	Debug Div	*
 ****************
 */
#debugDiv {
	border-style:dotted; 
	border-color:black;
	background:gray;
	position:absolute;
	top:300px;
	height:200px;
	left:20px;
	right:20px;
	overflow:scroll;
	
	display:none;
}

/*
 * Flipside
 */

.flip {
    position:absolute;
    bottom:3px;
    right:18px;
    width:13px;
    height:13px;
}
#flip {
    opacity:0;
    background:url(file:///System/Library/WidgetResources/ibutton/white_i.png) no-repeat top left;
    z-index:8000;
}
#fliprollie {
    display:none;
    opacity:0.25;
    background:url(file:///System/Library/WidgetResources/ibutton/white_rollie.png) no-repeat top left;
    z-index:7999;
}


/*
 * backside
 */
.pearLyricsW {
	position:absolute;
	left:25px;
	top:3px;
	right:20px;
	font:11px "Helvetica Neue";
	font-weight: bold;
	color: white;
}

.lyricsServers {
	position:absolute;
	left:25px;
	top:125px;
	right:20px;
	font:10px "Helvetica Neue";
	color: white;
	display:none;
}

.dedication {
	position:absolute;
	left:25px;
	top:140px;
	right:20px;
	font:10px "Helvetica Neue";
	color: white;
}

.copyright {
	position:absolute;
	left:25px;
	bottom:12px;
	right:20px;
	font:9px "Helvetica Neue";
	color: white;
}

.searchField {
	position:absolute;
	left:0px;
	right:0px;
	z-index:2;
}
/*
	left:20px;
	top:45px;
	right:20px;
*/

.backlabel {
	position: absolute;
	font: 10px "Helvetica Neue";
	font-weight: bold;
	color:white;
}

#checkdiv {
	top: 26px;
	left: 24px;
}

#checkdiv2 {
	top: 43px;
	left: 24px;
}

#checkdiv3 {
	top: 60px;
	left: 24px;
}

#checkdiv4 {
	top: 77px;
	left: 24px;
}

#checkdiv5 {
	top: 94px;
	left: 24px;
}

#checkdiv6 {
	top: 111px;
	left: 24px;
}

#done {
    position:absolute;
    bottom:10px;
    right:20px;
}

#resize {
    position:absolute;
    right: 5px;
    bottom: 5px;
    -apple-dashboard-region: dashboard-region(control rectangle);
}