body,canvas,div,li,a,p { -webkit-user-select: none }

body {
    background: #000 url(../img/linen.png);
    padding: 0px;
    margin: 0px;
    overflow-y: hidden;
    font-size: 125%;
    font-family: helvetica, arial, sans-serif;
}

 ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

 .clearer {
    float: none;
    height: 0px;
    width: 100%;
    clear: both;
}

 div#application {

    width: 320px;
    margin-left: auto;
    margin-right: auto;
     overflow-x: hidden; 
     overflow-y: auto; 
/*     position: fixed; */
}

 div#application > #pages {
/*     position: fixed; */

    overflow-y: auto;
    overflow-x: hidden; 
    width: 320px;  
	z-index: 1;
}
 div#application > #pages > #scroller {

    position: relative;
    width: 3000px;
    min-height: 430px;
    -webkit-transform: rotate(0deg);
 }


 div#application > #pages > #scroller > ul {
    position: relative;
    width: 3000px;
    min-height: 430px;
/* 	-webkit-transition: left 300ms ease; */
	-webkit-transform: rotate(0deg);
}

 div#application > #pages > #scroller > ul > li {
    display: block;
    width: 320px;
    min-height: 430px;
    float:left;
    background: #FFF;

}


 div#application > #pages > #scroller > ul > li:first-child {
    display: block;
}

 div#application > #pages > #scroller > ul > li div.padded {
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 8px;
    padding-bottom: 15px;
}

 div#application > header {
    text-align: center;
    position: relative;
    border-top: 1px solid #666;
    border-bottom: 1px solid #111;
    background: #222;
    background: -moz-linear-gradient(top, #333 0%, #111 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.55)), color-stop(0.2, rgba(255, 255, 255, 0.35)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.5, transparent), to(transparent) );
    color: #FFF;
    z-index: 2;
}

 div#application > #pages > #scroller > ul > li ul.list li {
    padding: 7px 13px;
    border-bottom: 1px solid #000;
    clear: both;
    vertical-align: middle;
}

 div#application > #pages > #scroller > ul > li ul.list li.arrow {
    background-image: url(../img/list_arrow.png);
    padding-right: 57px;
    background-position: 263px center;
    background-size: 50px 50px;
    background-repeat: no-repeat;
}

 div#application > #pages > #scroller > ul > li ul.list li.details {
    background-image: url(../img/list_details.png);
    padding-right: 57px;
    background-position: 263px center;
    background-size: 50px 50px;

    background-repeat: no-repeat;
}

 div#application > #pages > #scroller > ul > li ul.list li.checkmark {
    background-image: url(../img/list_checkmark.png);
    padding-right: 57px;
    background-size: 50px 50px;

    background-position: 263px center;
    background-repeat: no-repeat;
}

 /* buttons that appear in list views */
div#application > #pages > #scroller >  ul > li ul.list li a.accessory {
    display: block;
    width: 50px;
    min-height: 50px;
    height: 100%;
    float: right;
    position: relative;
    left: 5px;
    text-decoration: none;
    color: transparent;
}

 div#application > #pages > #scroller > ul > li ul.list li a.accessory.details {
    background-image: url(../img/list_details.png);
    background-position: right center;
    background-size: 50px 50px;

    background-repeat: no-repeat;
}

 div#application > #pages > #scroller > ul > li ul.list li a.accessory.checkmark {
    background-image: url(../img/list_checkmark.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 50px 50px;

}


 div#application > #pages > #scroller > ul > li ul.list li a.accessory.arrow {
    background-image: url(../img/list_arrow.png);
    background-position: right center;
    background-size:50px 50px;
    background-repeat: no-repeat;
}

 div#application > #pages > #scroller > ul > li ul.list li a.accessory.delete {
    background-image: url(../img/list_delete.png);
    background-size:50px 50px;
    background-position: right center;
    background-repeat: no-repeat;
}

 div#application > #pages > #scroller > ul > li ul.list li a.accessory.add {
    background-image: url(../img/list_add.jpg);
    background-position: right center;
    background-repeat: no-repeat;
}

 div#application > #pages > #scroller > ul > li ul.list li span {
    display: block;
}

 div#application > #pages > #scroller > ul > li ul.list li:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

 div#application > #pages > #scroller > ul > li ul.list li.active {
    background-color: #2c7ae5;
    color: #FFF;
}

 div#application > #pages > #scroller > ul > li ul.list li aside {
    float: left;
    width: 50px;
    min-height: 50px;
    height: 100%;
    margin-right: 13px;
}

 div#application > #pages > #scroller > ul > li ul.list li aside.thin {
    width: 30px;
}

 div#application > #pages > #scroller > ul > li ul.list li.thin aside {
    min-height: 30px;
    width: 30px;
}

 div#application > #pages > #scroller > ul > li ul.list li.thin a.accessory {
    min-height: 30px;
}

 /* Authentication Details */
div#application .loggedout {
    display: none;
}

 div#application.loggedout .loggedout {
    display: block;
}

 div#application .loggedin {
    display: none;
}

 div#application.loggedin .loggedin {
    display: block;
}

 /* Alert Pops */
#alerts {
    width: 320px;
    position: fixed;
    bottom: 0px;
    text-align: center;
	position: fixed;
    left: 0px;
    z-index: 997;
}

 #alert_message {
    z-index: 999;
    position: fixed;
    bottom: 0px;
    width: 290px;
    margin: auto 10px;
}

 #alert_message p {
    text-align: left;
/*     background: #f0f0f0; */
/*
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 5px;
*/
	color: #FFF;
    font-size: 14px;
}

 #alert_message p a {
 	color: #FFF; font-weight: bold; 
 }


 #alert_background {
    background-color: #000;
    /*background:-webkit-gradient(linear, 28% 100%, 28% 3%, from(#FFFFFF), to(#000000));
    */
	opacity: 0.80;
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=80);
    filter: alpha(opacity=80);
    z-index: 998;
    background: -moz-linear-gradient(top, #333 0%, #111 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.8)), color-stop(0.1, rgba(255, 255, 255, 0.0)), color-stop(0.5, rgba(255, 255, 255, 0)), color-stop(0.8, transparent), to(transparent) );
}

 #alert_background.error {
    background-color: #ff56aa;
    background: -webkit-gradient(linear, 28% 100%, 28% 3%, from(#ff56aa), to(#ff56aa));
}

 #alert_background.loading,  
 #alert_background.confirmation {
    background: rgba(0,0,0,0.75);
    border-radius: 10px;
    /*background:-webkit-gradient(linear, 28% 100%, 28% 3%, from(#FFFFFF), to(#000000));
    -moz-box-shadow: 4px 5px 5px #000000;
    -webkit-box-shadow: 4px 5px 5px #000000;
    box-shadow: 4px 5px 5px #000000;
    */
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin-left: 60px;
    margin-right: 60px;
}

 #alert_message.loading,
 #alert_message.confirmation {
 
    color: #fff;
    text-shadow: 2px 2px 2px #000000;
}

 a.alert_button {
    display: block;
    text-decoration: none;
    font-family: Helvetica, sans-serif;
    font-size: 14px;
    color: #050505;
    padding: 10px 20px;
    background: -moz-linear-gradient(top,#bfc0c7 0%,#f0f0f0);
    background: -webkit-gradient(linear, left top, left bottom,from(#bfc0c7),to(#f0f0f0));
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border: 1px solid #000000;
    -moz-box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 1px rgba(255,255,255,0.7);
    -webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 1px rgba(255,255,255,0.7);
    text-shadow:0px -1px 0px rgba(000,000,000,0.4),0px 1px 0px rgba(255,255,255,0.3);
    margin-bottom:5px;
}

 .loading_icon {
    -webkit-animation: cssAnimation 1s infinite linear;
    -moz-animation: cssAnimation 1s infinite linear;
}

@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}		


 #toolbar_loader {
    position: absolute;
    right: 7px;
    top: 12px;
    display: none;
}

 .loading #toolbar_loader {
    display: block;
}

 #toolbar_loader .loading_indicator {
    display: block;
    height: 16px;
    width: 16px;
    -webkit-animation: cssAnimation 1s infinite linear;
    -moz-animation: cssAnimation 1s infinite linear;
}

 /* Cool Header styles from http://www.cagintranet.com/archive/create-an-ios-header-bar-in-css3-and-html5/ */
div#application > header h1 {
    margin: 0px;
    padding: 10px 0 9px 0;
    text-align: center;
    font-size: 20px;
    text-shadow: rgba(0, 0, 0, 1) 0 -1px 0;
}

 div#application > header .button {
    display: block;
    padding: 2px 10px;
    line-height: 21px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
/*     overflow: hidden; */
    height: 20px;
    font-weight: bold;
    position: absolute;
    top: 9px;
    font-family: inherit;
    font-size: 12px;
    text-shadow: rgba(0, 0, 0, 0.6) 0 -1px 0;
    text-overflow: ellipsis;
    text-align: center;
    white-space: nowrap;
    background: none;
    cursor: pointer;
    margin: 0;

}

 div#application > header .button:link,  
  div#application > header .button:visited {
    color: #fff;
    background: #555;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.55)), color-stop(0.2, rgba(255, 255, 255, 0.35)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.5, transparent), to(transparent) );
 /*    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(140, 140, 140, 1)), color-stop(0.2, rgba(90, 90,90, 1)), color-stop(0.5, rgba(25, 25, 25, 1)),  to(#000) ); */

 
    border: 1px solid #222;
    text-decoration: none;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, 0.25);
}

 div#application > header .button:active, 
 div#application > header .button:focus, 
 div#application > header .button:hover {
    text-decoration: none;
    background: #444;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.55)), color-stop(0.2, rgba(255, 255, 255, 0.35)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.5, transparent), to(transparent) );

}

 div#application > header a.back {
    position: absolute;
    left: 0px;
    padding: 2px 6px;
    margin-left:20px;
    padding-left:0px;
   border-left: none !important;

  -webkit-border-top-left-radius: 2px;
  -webkit-border-bottom-left-radius: 2px;
	z-index:2;

}
 div#application > header a.back > span{
	background:#555;
    height: 20px;
	padding: 2px 6px;
    position: relative;
    top: -2px;
	left:1px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.55)), color-stop(0.2, rgba(255, 255, 255, 0.35)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.5, transparent), to(transparent) );
	display:block;
	 -webkit-box-shadow: inset 0px 1px 0px rgba(0, 0, 0, .25);

}


 div#application > header a.back:after{
  border: solid 1px #222;
  border-right: 0px transparent;
  border-top: 0px transparent;
  background: #555;
  content: '';
  display: block;
  -webkit-border-radius: 2px;


  position: absolute;
  top: 3px;
  left: -9px;
  width:18px;
  height:18px;	

  text-shadow: none;
  z-index: -1;
  -webkit-box-shadow: none;
  -webkit-transform: rotate(45deg);
   background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(255, 255, 255, 0.55)), color-stop(0.2, rgba(255, 255, 255, 0.35)), color-stop(0.48, rgba(255, 255, 255, 0.1)), color-stop(0.5, transparent), to(transparent) );

}

 div#application > header .button:active:after, 
 div#application > header .button:focus:after,
  div#application > header .button:hover:after {
    background: #444;
    background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(255, 255, 255, 0.55)), color-stop(0.2, rgba(255, 255, 255, 0.35)), color-stop(0.48, rgba(255, 255, 255, 0.1)), color-stop(0.5, transparent), to(transparent) );
} 


 div#application > header a.back:hover > span{
    background: #444;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.55)), color-stop(0.2, rgba(255, 255, 255, 0.35)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.5, transparent), to(transparent) );

	
}



 div#application > header a.next {
    position: absolute;
    right: 3px;
}

 /* Cool Footer styles from http://jordandobson.com/webkit_mask_iphone_nav/retina/# */
div#application > footer {
    background-color: #000;
    padding: .1em 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    border-top: .05em solid rgba(255,255,255,.33);
    -webkit-box-shadow: 0 -0.05em 0 rgba(0,0,0,0.9);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.15)), color-stop(0.5, rgba(255,255,255,.10)), color-stop(0.505, rgba(255,255,255,.0)), to(rgba(255,255,255,.0)));
}

 div#application > footer > a {
    margin: 0 auto;
    width: 3.5em;
    height: 2.5em;
    position: relative;
    border-radius: .25em;
    -webkit-border-radius: .25em;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
}

 div#application > footer > a > strong {
    position: absolute;
    font-size: .5em;
    color: #999;
    bottom: 0;
    width: 100%;
    text-align: center;
    line-height: 1.5em;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
}

 div#application > footer > a.active {
    background-color: rgba(255,255,255,.10);
}

 div#application > footer > a.active > strong {
    color: #fff;
}




form {
	
}

	form p.input { 

		border-bottom:1px solid #CCC;
		padding: 7px; 
		margin:0px;

	}
	
	form p.input input { 
		border: 0px;
		padding:0px; 
		margin:0px;
		width: 100%;
		font-size: 13px;

	   -webkit-appearance: none;
	   outline: none;
	 }

	form p.input textarea { 
		border: 0px;
		padding:0px; 
		margin:0px;
		width: 100%;
		height: 50px;
		font-size: 13px;
	   -webkit-appearance: none;
	   outline: none;
	 }
	
	form p.input label { 
		font-size: 13px; 
		display: block;
		margin:0px;
	}
	
		form p.input label > input { 
			float: right;
			width: 70%;
		}

		form p.input label > textarea { 
			float: right;
			width: 70%;

		}
		
		
		/* Shiny buttons! */
		/* http://mwhenry.com/blog/2009/11/shiny-css-only-iphone-buttons/ */

		form > input[type=submit],
		form > intput[type=button] { margin-left: 7px; margin-right: 7px; } 

	 	input[type=submit], 
	 	input[type=button],
	 	form p.input input[type=submit], 
	 	form p.input input[type=button]

	 	{
	      font-family: "Helvetica Neue", Helvetica, sans-serif;
	      font-size: 1.3em;
	      font-weight: bold;
	      width: 97%;
	      height: 50px;
	      border: 3px solid #282726;
	      background: -webkit-gradient( linear, left top, left bottom, from(#e2e2e2), to(#8c8a88), color-stop(0.5, #acadae), color-stop(0.5, #82807e) );
	      margin: 0px;
	      text-shadow: 0px 1px 0 #cecece;
	      -webkit-background-origin: padding-box;
	      -webkit-background-clip: border-box;
	      -webkit-border-radius: 8px;
	    }

    	input[type=submit]:hover, 
		input[type=submit].cancel,
	   	input[type=submit]:active, 
   		input[type=submit].cancel:active, 
    	input[type=button]:hover, 
		input[type=button].cancel,
	   	input[type=button]:active, 
   		input[type=button].cancel:active, 

    	form p.input input[type=submit]:hover, 
		form p.input input[type=submit].cancel,
	   	form p.input input[type=submit]:active, 
   		form p.input input[type=submit].cancel:active, 
    	form p.input input[type=button]:hover, 
		form p.input input[type=button].cancel,
	   	form p.input input[type=button]:active, 
   		form p.input input[type=button].cancel:active    		
   		{
		      color: #fff;
		      text-shadow: none;
		    }

    	input[type=submit]:hover, 
		input[type=submit].cancel:hover,
    	input[type=button]:hover, 
		input[type=button].cancel:hover,
  		form p.input input[type=submit]:hover, 
  		form p.input input[type=submit].cancel:hover,
  		form p.input input[type=button]:hover, 
		form p.input input[type=button].cancel:hover
		 {
		      background: -webkit-gradient( linear, left top, left bottom, from(#aaaee5), to(#10006d), color-stop(0.5, #1F3B97), color-stop(0.5, #081f6f) );
	    }

    	input[type=submit].cancel,
		input[type=button].cancel
    	 {
	      background: -webkit-gradient( linear, left top, left bottom, from(#5c5c5b), to(#1e1b16), color-stop(0.2, #1e1b16) );
	    }


form > fieldset {
	margin: 7px; 
	background: #FFF;
	-webkit-border-radius: 12px;
	border: 1px solid #CCC;
	padding:0px;
}

	form > fieldset > p.input:last-child {
		border-bottom: none; 
	}


ul.buttons { margin: 7px; }
ul.buttons li { float: left; }
ul.buttons.two li { width: 50%;  }
ul.buttons.three li { width: 33%; }
ul.buttons.four li { width: 25%; }