body { margin: auto; padding: 0; -webkit-text-size-adjust:none; font-family: Helvetica; width: 320px; overflow-x: hidden; overflow-y: scroll; min-height: 1000px; }
textarea { padding: 0; -webkit-text-size-adjust:none; font-family: Helvetica; font-size: 17px; }

/*	PAGES
*/
.FXPcgPageSet { width: 320px; min-height: 420px; position: absolute; overflow: hidden; }

.FXPcgPage { display: none; min-height: 420px; width: 320px; position: relative; top: 0px; left: 0px; padding-bottom: 1px; }
.FXPcgPageActive { display: block; }


/*	TITLE BARS

	Put HasTitle on the FXPcgPage div, and an h1 inside that FXPcgPage.
*/
.NotHasTitle { padding-top: 0px; }
.HasTitle { padding-top: 40px; }
h1 
{
	position: absolute; top: 0; left: 0; z-index: 1000;
	width: 320px; padding: 10px 0 10px 0px; margin: 0;
	height: 22px;

    box-sizing: border-box; border-bottom: 1px solid #2d3642;
    line-height: 20px; font-size: 20px; font-weight: bold; text-align: center;
    text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0; text-overflow: ellipsis;
    color: #FFFFFF;
    background: url(../images/H1.png) #6d84a2 repeat-x;
}

.decalage 
{
padding-left:40px;
width: 280px;
}
a { text-decoration: none; }

/*	BUTTON POSITIONS 

	All that actually goes in your HTML is:

		<a class="BackButton">Back</a>

	which FXPcgLayout.initLayout() converts to:

		<div class="BackButton">
			<span class="BackButton SlidingBackWrapper">
				<a class="BackButton">Back</a>
			</span>
		</div>
*/

div.LeftButton, div.RightButton, div.BackButton
{	position: absolute; top: 10px;
}
div.LeftButton { left: 6px; } div.RightButton { right: 10px; }
div.BackButton { left: 6px; border-width: 0 5px 0 12px; }
div.BackButton span.SlidingBackWrapper
{	background:url(../images/blackButtonLeft.png) no-repeat left top;
	padding-left: 5px;
}
div.BackButton span.SlidingBackWrapper a
{	background:url(../images/blackButtonRight.png) no-repeat right top;
}
div.ActiveButton span.SlidingBackWrapper
{	background:url(../images/activeButtonLeft.png) no-repeat left top;
}
div.ActiveButton span.SlidingBackWrapper a
{	background:url(../images/activeButtonRight.png) no-repeat right top;
}
div.DeleteConfirm span.SlidingBackWrapper
{	background:url(../images/redButtonLeft.png) no-repeat left top;
	padding-left: 20px;
	margin-right: 13px;
	top: -5px;
	height: 30px;
}
div.DeleteConfirm span.SlidingBackWrapper a
{	background:url(../images/redButtonRight.png) no-repeat right 8px;
	color: white;
	cursor: pointer;
	padding-right: 24px;
}
div.DoubleButton span.SlidingBackWrapper
{	background:url(../images/whiteButtonLeft.png) no-repeat left top;
	top: -5px;
}
div.DoubleButton span.SlidingBackWrapper .ALike
{	background:url(../images/whiteButtonRight.png) no-repeat right top;
	color: black;
}
div.LeftButton span.SlidingBackWrapper a.SymbolButton,
div.RightButton span.SlidingBackWrapper a.SymbolButton,
div.BackButton span.SlidingBackWrapper a.SymbolButton { font-size: 24px; line-height: 24px; }


/*	SLIDING DOOR BUTTONS */

span.SlidingBackWrapper {
  float:left; position: relative; top: -3px;
  background:url(../images/blueButtonLeft.png) no-repeat left top;
  margin:0 5px 0 5px;
  padding:0 0 0 0px;
  }
span.SlidingBackWrapper a,
span.SlidingBackWrapper .ALike
{
	position: relative; left: 5px; /* Make sure the containing element doesn't peek through */
	float:left;
	display:block;
	background:url(../images/blueButtonRight.png) no-repeat right top;
	padding:1px 10px 1px 6px;
    height: 28px; line-height: 28px;
    font-size: 12px; font-weight: bold;
    text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
    color: #FFFFFF;
  }
/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
span.SlidingBackWrapper a, span.SlidingBackWrapper .ALike { float:none; }
/* End IE5-Mac hack */

/*	EDIT MODE
	
	This is pretty slick.  If a FXPcgPage has EditModeOn toggled on and off, content within
	that page inside of EditModeVisible and EditModeInvisible elements appears and disappears
	appropriately.
*/

.EditModeVisible, .EditModeOn .EditModeInvisible { display: none; }
.EditModeOn .EditModeVisible, .EditModeInvisible { display: inline; }


/*	PAGE TYPES

	Each FXPcgPage div should have one of the following page type classes assigned to it.
*/

.RoundedList /* Is like the iPhone Settings page. */
{	
	padding-left: 10px; width: 310px;
	background-color: rgb(197,204,211); background-image: url(../images/pinstripe.jpg);
}
.EdgedList /* Is like the iPhone Favorites page, or Contacts if you use h2s, or notes with the Notes addon. */
{
}
.IconMenu /* Is like the iPhone main page. */
{	background-color: black;
	padding: 25px 0 0 20px; width: 300px;
	height: 396px;
}

/* ADDON TYPES can be added to the basic page types. */
.Notes /* Like the notes app on iPhone */
{
	background-color: rgb(233,233,181);
}
.Notes h1
{
	background-image: none;
	background-color: rgb(90,63,50);
}
.Notes textarea
{	border: none;
	width: 1000px; height: 440px;
	background-color: rgb(233,233,181);
	padding: 8px;
}

/*	LIST PAGE TYPES

	RoundedList and EdgedList FXPcgPages should consist of one or more unordered lists (<ul>).
	Each unordered list can optionally be preceeded by an h2 tag that will become the list header.
*/

.RoundedList h2, .EdgedList h2 {	margin: 0; font-size: 17px; }
.RoundedList h2 { padding: 10px; color: rgb(76,86,108); }
.EdgedList h2
{	padding: 1px 10px; width: 300px;
	font-weight:normal; color: #fff;
	background-image: url(../images/EdgedListH2.png); background-position: bottom;
}

.EdgedList ul, .RoundedList ul
{	padding: 0;
	font-weight:bold;
	color:black;
}
.RoundedList ul
{	background-color: white;
}
.EdgedList ul { font-size:20px; margin: 0; width: 320px; }
.RoundedList ul
{	margin: 0 10px 17px 0; width: 300px;
	border: 1px solid rgb( 217, 217, 217 );
	font-size:17px;
	-webkit-border-radius: 8px;		 /* Round each corner of the created rectangle */
	-moz-border-radius: 8px;		 /* Round each corner of the created rectangle */
}


/*	The total cell height includes the padding-top, padding-bottom, border and height values: 
	10+14+1+19=44 pixels 
*/
.RoundedList ul li, .EdgedList ul li
{	list-style-type: none;	white-space: nowrap;
	border-top: 1px solid rgb( 0, 0, 0 );
	padding: 12px 10px 12px 10px; height:19px; line-height:19px;
	position: relative;
}
.EdgedList li:first-child, .RoundedList li:first-child { border-top:0; } /* XXX Redundant w/ fixListBorders()? */

/* In delete mode, we add some stylitude to each list item. */
.RoundedList ul.Deleting li, .EdgedList ul.Deleting li
{	padding-left: 49px;
	background-image: url(../images/ABDeleteCircle.png); 
	background-repeat: no-repeat; background-position: 10px 8px;
}
.RoundedList ul.Deleting li .secondary, .EdgedList ul.Deleting li .secondary,
.RoundedList ul.Sorting li .secondary, .EdgedList ul.Sorting li .secondary 
{ display: none; }
.RoundedList ul.Deleting li .ListButton, .EdgedList ul.Deleting li .ListButton,
.RoundedList ul.Sorting li .ListButton, .EdgedList ul.Sorting li .ListButton 
{ display: none; }

span.DoubleButton
{ cursor: pointer; float: right; }
li.DeleteConfirm span.DoubleButton { display: none; }
.RoundedList ul.Deleting li span.DeleteButton, .EdgedList ul.Deleting li span.DeleteButton 
{ cursor: pointer; position: absolute; top: 8px; left: 10px; width: 29px; height: 29px; }
.RoundedList ul.Deleting li span.DeleteConfirm, .EdgedList ul.Deleting li span.DeleteConfirm 
{ float: right; display: none; }
.RoundedList ul.Deleting li.DeleteConfirm span.DeleteConfirm,
.EdgedList ul.Deleting li.DeleteConfirm span.DeleteConfirm,
.RoundedList ul.Deleting li.DeleteConfirm span.DeleteConfirm .ListButton,
.EdgedList ul.Deleting li.DeleteConfirm span.DeleteConfirm .ListButton,
.RoundedList ul.Sorting li .SortDouble .ListButton,
.EdgedList ul.Sorting li .SortDouble .ListButton
{ display: inline; }
.RoundedList ul.Sorting li.DeleteConfirm .SortDouble .ListButton,
.EdgedList ul.Sorting li.DeleteConfirm .SortDouble .ListButton
{ display: none; }
.RoundedList ul.Deleting li.DeleteConfirm, .EdgedList ul.Deleting li.DeleteConfirm
{ background-image: url(../images/ABDeleteCircleRotated.png); }

/*	Within a list item, you might want explanatory text floated right.  Use a span.secondary.

	If the list item is a link, put the <a> immediately inside it so the whole thing is clickable.
	Only the secondary text, which is over on the right, gets the link color.

	If there should be a right arrow at the right side of the list item, include the withArrow
	class on your secondary span.

*/
.secondary {
	font-weight:normal;
	position:absolute;
	right:28px;
	line-height:20px;
	font-size: 17px;
	font-family: tahoma;
}
.EdgedList ul li a, .RoundedList ul li a
{
	display: block;
	padding: 8px 8px 12px 8px;
	margin: -8px -8px -12px -8px;
	color:#000000;
}
a .secondary {
	color: #FF0000;
}
.withArrow
{	padding-right:32px;	   /* Distance between the arrow button and a text */
	background-image: url(../images/chevron.png); background-repeat: no-repeat; background-position: 96% 50%; 
}

/* These are various types of inputs you might use.  They're all actually type=text. */
.RoundedList ul li input.TextInput, .RoundedList ul li input.IntInput
{	padding: 0; margin: 0; border: 0; width: 200px; text-align: left;
	color: rgb( 200, 200, 200 ); font-size:17px; -webkit-appearance: none;
}
.RoundedList ul li input.TextInput:focus, .RoundedList ul li input.IntInput:focus
{ border: 0; color: #324F85; }


/* BUTTONS
*/


/* Each button should have the button class and one of the color classes */
.ListButton 
{	display:block; float:right;
	border: solid gray 1px;
	padding: 0 5px 0 5px; margin: -5px 0 0 10px;
	height: 29px; line-height: 29px;
	font-size: 12px; font-weight: bold;
	color: #FFFFFF;
	text-align:center; text-shadow: #000 1px 1px 1px;
	cursor: pointer;
}



/* Make any object have clickable cursor and coloring */
.Clickable { cursor: pointer; }

/* Put this on elements when you want to character not in the Helvetica font, e.g. &uArr; */
.NoFont { font-family: broken; }

/* This adds extra left/right padding */
.WidePadding { padding-left: 10px; padding-right: 10px; }

/* If you want to display 29x29 icons inline, use ListItemImage on the image,
	and primaryWImage on the text that follows.
*/
img.ListItemImage { margin-top: -5px; }
.primaryWImage { position: relative; top: -7px; }

/*	ICON MENU

	Each row of buttons is a ul, and each button is an li.

	A typical li looks like: 

		<li><a><img>Label</a></li>

	If your image is not a rounded 55x55px image, you will do this instead: 
	
		<li><a><div class="ImageWrapper"><img></div>Label</a></li>
*/
.IconMenu ul { font-size: 12px; float: left; margin: 0; padding: 0; position: relative; top: -13px; }
.IconMenu ul li
{	list-style-type: none; display: inline;
	margin: 0 20px 0 0; padding: 0; float: left; height: 80px; width: 55px;
	text-align: center; line-height: 16px; font-weight: bold;
}
.IconMenu ul li a 
{	color: rgb( 189, 189, 206 ); font-weight: lighter;
	position: relative;
	width: 55px;
	border: 1px solid black;
	display: block;
	padding-top: 60px;
}
.IconMenu ul li a img
{	position: absolute; top: 0px; left: 0px;
	width: 55px; height: 55px;
	overflow: hidden;
	border: 0;
}
.IconMenu ul li a .IconItemText
{	position: relative; top: -8px; left: 0px;
}
.IconMenu ul li a .ImageRounder 
{	position: absolute; top: -5px; left: -5px;
	width: 48px; height: 48px;
	border: 8px solid black; 
	-webkit-border-radius: 14px; 
	-moz-border-radius: 16px; 
	z-index: 0;
	background: transparent;
}