html { height: 100%; }
body {
    height: 100%;
    margin: 0;
    font-family: helvetica, sans-serif;
    -webkit-text-size-adjust: none;
}

body {
	-webkit-background-size: 100% 21px;
	background-color: #FFF;
	background-image:
        -webkit-gradient(linear, left top, right top,
            color-stop(.75, transparent),
            color-stop(.75, rgba(255,255,255,.1)) );
	-webkit-background-size: 7px;
}

* { -webkit-tap-highlight-color: transparent; }

.view {
    min-height: 100%;
    overflow: auto;
    position: relative;
}

.header-wrapper {
	height: 50px;
	font-weight: bold;
	text-shadow: rgba(0,0,0,0.7) 0 -1px 0;
	color: #fff;
	background-color: #FFF;
	background-image:url(../img/headerWEB.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	-webkit-background-size: auto 120%;
	-webkit-box-sizing: border-box;
	margin-top: 2px;
}
.header-wrapper h1 {
    text-align: center;
    font-size: 20px;
    line-height: 44px;
    margin: 0;
}

.group-wrapper {
    margin: 9px;
}

.group-wrapper h2 {
    color: #4c566c;
    font-size: 17px;
    line-height: 0.8;
    font-weight: bold;
    text-shadow: #fff 0 1px 0;
    margin: 20px 10px 12px;
}

.group-wrapper p {
    background-color: #fff;
    -webkit-border-radius: 10px;
    font-size: 17px;
    line-height: 20px;
    margin: 9px 0 20px;
    border: solid 1px #a9abae;
    padding: 11px 9px 12px;
}

.list-wrapper h2 {
    line-height: 1;
    font-size: 18px;
    padding: 1px 12px;
    font-weight: bold;
    text-shadow: rgba(0,0,0,0.5) 0 1px 0;
    background: left 1px -webkit-gradient(linear,
            left top, left bottom,
            from(rgba(0,0,0,0.18)), color-stop(0.65, transparent))
        rgba(178,187,194,0.89);
    -webkit-box-sizing: border-box;
    height: 22px;
    border-bottom: solid 1px rgba(0,0,0,0.18);
    overflow: hidden;
    white-space: nowrap;
    margin: 0;
    color: #fff;
}

.list-wrapper ul {
    padding: 0;
    background: #fff;
    font-size: 20px;
    line-height: 23px;
    margin: 0;
}

.list-wrapper ul li {
    border-bottom: 1px solid #dfdfdf;
    padding: 10px;
}

.group-wrapper ul {
    background-color: #fff;
    -webkit-border-radius: 10px;
    font-size: 17px;
    line-height: 20px;
    margin: 9px 0 10px;
}

.group-wrapper ul li {
    padding: 11px 9px 12px;
}

.group-wrapper ul {
    font-weight: bold;
    margin-bottom: 20px;
    list-style: none;
    padding: 0;
    border: solid 1px #a9abae;
}

.group-wrapper ul li:not(:last-child) {
    border-bottom: inherit;
}

.group-wrapper ul li a,
.list-wrapper ul li a {
    padding: inherit;
    color: inherit;
    text-decoration: inherit;
    margin: -11px -9px -12px;
    display: block;
    -webkit-tap-highlight-color: transparent;
    background: -webkit-canvas(chevron-normal) right center no-repeat;
}

.group-wrapper ul li:first-child a {
    -webkit-border-top-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
}

.group-wrapper ul li:last-child a {
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
}

.split-view .view:first-child {
    display: none;
}

.group-wrapper ul li a:active,
.list-wrapper ul li a:active {
    color: #fff;
    background:
        -webkit-gradient(linear,
            left top, left bottom,
            from(rgba(255, 255, 255, .25)), to(transparent) ),

        -webkit-canvas(chevron-active) right center no-repeat #015de6;
}

.group-wrapper ul li a:active *,
.list-wrapper ul li a:active * {
    color: #fff;
}

.header-wrapper .header-button {
    /* Button size and position (anchored right) */
    position: absolute;
    top: 7px;
    right: 6px;
    width: auto;
    height: 29px;
    min-width: 44px;    /* Minimum size for a tappable element */

    margin: 0;
    padding: 0 10px;

    /* Box style for a rounded button */
    -webkit-border-radius: 5px;
    border: solid 1px rgba(0,0,0,.25);
    border-top-color: rgba(0,0,0,.6);

    -webkit-box-sizing: border-box;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.3);

    /* Text style */
    font-family: inherit;
    font-size: 12px;
    font-weight: bold;
    text-shadow: rgba(0,0,0,.4) 0 -1px 0;
    text-decoration: none;
    text-align: center;
    line-height: 29px;
    color: #fff;

    /* Shiny effect for the background */
    background-color: rgba(0,0,0,.3);
    background-image:
        -webkit-gradient(linear, left top, left bottom,
            color-stop(0, rgba(255,255,255,0.25)),
            color-stop(0.1, rgba(255,255,255,.4)),
            color-stop(1, rgba(255,255,255,.1)) ),
        -webkit-gradient(linear, left top, left bottom,
            from(transparent),
            to(rgba(0,0,64,.05)) );
    background-repeat: no-repeat;
    background-position: top left, bottom left;
    -webkit-background-size: 100% 14px, 100%;
}
.header-wrapper .header-button:disabled {
    color: rgba(255,255,255,0.65)
}

.header-wrapper .header-button:active:not(:disabled) {
    background-color: rgba(0,0,64,.5);
}

.header-wrapper .header-button.left {
    left: 6px; right: auto;
}

.header-wrapper .header-button.action {
    background-color: #0f6cd7;
}

.list-wrapper ul li a {
	margin: -10px;
	text-decoration: none;
	color: inherit;
}

.list-wrapper ul li a span {
    display: block;
    margin-right: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-wrapper ul li a small {
    display: block;
    margin-right: 24px;
    font-size: 13px;
    line-height: 15px;
    height: 30px;
    overflow: hidden;
    color: gray;
}

.header-wrapper .header-button.spinning span {
    color: transparent;
    text-shadow: none;
    background: -webkit-canvas(spinner) center center no-repeat;
    -webkit-background-size: auto 22px;
    padding: 4px;
    margin: -4px;
}

	.full-column {
	    position: relative; float: left;
	    width: 100%;
	    margin-right: 24px
	}